diff --git a/package.json b/package.json
index e3b92dd9..8b6b141c 100644
--- a/package.json
+++ b/package.json
@@ -30,7 +30,7 @@
     "test:one": "polkadot-dev-run-test --env browser"
   },
   "devDependencies": {
-    "@polkadot/dev": "^0.70.4",
+    "@polkadot/dev": "^0.71.1",
     "@polkadot/x-bundle": "^11.0.1",
     "@types/node": "^18.14.6",
     "react": "^18.2.0",
diff --git a/packages/react-identicon/src/Identicon.tsx b/packages/react-identicon/src/Identicon.tsx
index df791c38..1a43ce7d 100644
--- a/packages/react-identicon/src/Identicon.tsx
+++ b/packages/react-identicon/src/Identicon.tsx
@@ -6,22 +6,22 @@ import type { IdentityProps as Props, Props as ComponentProps } from './types';
 
 import React from 'react';
 import CopyToClipboard from 'react-copy-to-clipboard';
-import styledComponents from 'styled-components';
+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';
+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: typeof styledComponents }).styled ||
-  (styledComponents as unknown as { default: typeof styledComponents }).default ||
-  styledComponents
+  (styledComponents as unknown as { styled: StyledInterface }).styled ||
+  (styledComponents as unknown as { default: StyledInterface }).default ||
+  styledComponents as unknown as StyledInterface
 );
 
 const Fallback = Beachball;
diff --git a/packages/react-identicon/src/bundle.ts b/packages/react-identicon/src/bundle.ts
index abc2265d..83b15577 100644
--- a/packages/react-identicon/src/bundle.ts
+++ b/packages/react-identicon/src/bundle.ts
@@ -1,7 +1,7 @@
 // Copyright 2017-2023 @polkadot/react-identicon authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-export * from './icons';
+export * from './icons/index.js';
 
-export { Identicon } from './Identicon';
-export { packageInfo } from './packageInfo';
+export { Identicon } from './Identicon.js';
+export { packageInfo } from './packageInfo.js';
diff --git a/packages/react-identicon/src/detectPackage.ts b/packages/react-identicon/src/detectPackage.ts
index a26a2223..fe79db36 100644
--- a/packages/react-identicon/src/detectPackage.ts
+++ b/packages/react-identicon/src/detectPackage.ts
@@ -5,7 +5,7 @@
 
 import { detectPackage } from '@polkadot/util';
 
-import others from './detectOther';
-import { packageInfo } from './packageInfo';
+import others from './detectOther.js';
+import { packageInfo } from './packageInfo.js';
 
 detectPackage(packageInfo, null, others);
diff --git a/packages/react-identicon/src/icons/Ethereum.tsx b/packages/react-identicon/src/icons/Ethereum.tsx
index be0f4f8a..f22031f7 100644
--- a/packages/react-identicon/src/icons/Ethereum.tsx
+++ b/packages/react-identicon/src/icons/Ethereum.tsx
@@ -5,16 +5,16 @@ import type { Props } from '../types';
 
 import makeBlockie from 'ethereum-blockies-base64';
 import React, { useMemo } from 'react';
-import styledComponents from 'styled-components';
+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: typeof styledComponents }).styled ||
-  (styledComponents as unknown as { default: typeof styledComponents }).default ||
-  styledComponents
+  (styledComponents as unknown as { styled: StyledInterface }).styled ||
+  (styledComponents as unknown as { default: StyledInterface }).default ||
+  styledComponents as unknown as StyledInterface
 );
 
 interface ImgProps {
diff --git a/packages/react-identicon/src/icons/index.ts b/packages/react-identicon/src/icons/index.ts
index bcdcdc26..7b3cbd38 100644
--- a/packages/react-identicon/src/icons/index.ts
+++ b/packages/react-identicon/src/icons/index.ts
@@ -1,8 +1,8 @@
 // Copyright 2017-2023 @polkadot/react-identicon authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-export { Beachball } from './Beachball';
-export { Empty } from './Empty';
-export { Ethereum } from './Ethereum';
-export { Jdenticon } from './Jdenticon';
-export { Polkadot } from './Polkadot';
+export { Beachball } from './Beachball.js';
+export { Empty } from './Empty.js';
+export { Ethereum } from './Ethereum.js';
+export { Jdenticon } from './Jdenticon.js';
+export { Polkadot } from './Polkadot.js';
diff --git a/packages/react-identicon/src/index.ts b/packages/react-identicon/src/index.ts
index c57eedd6..7e81f556 100644
--- a/packages/react-identicon/src/index.ts
+++ b/packages/react-identicon/src/index.ts
@@ -1,10 +1,10 @@
 // Copyright 2017-2023 @polkadot/react-identicon authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import './detectPackage';
+import './detectPackage.js';
 
-import { Identicon } from './bundle';
+import { Identicon } from './bundle.js';
 
-export * from './bundle';
+export * from './bundle.js';
 
 export default Identicon;
diff --git a/packages/react-qr/src/Display.tsx b/packages/react-qr/src/Display.tsx
index 32db1912..672ced69 100644
--- a/packages/react-qr/src/Display.tsx
+++ b/packages/react-qr/src/Display.tsx
@@ -2,22 +2,22 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import React, { useEffect, useMemo, useRef, useState } from 'react';
-import styledComponents from 'styled-components';
+import styledComponents, { StyledInterface } from 'styled-components';
 
 import { objectSpread } from '@polkadot/util';
 import { xxhashAsHex } from '@polkadot/util-crypto';
 
-import { qrcode } from './qrcode';
-import { createFrames, createImgSize } from './util';
+import { qrcode } from './qrcode.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: typeof styledComponents }).styled ||
-  (styledComponents as unknown as { default: typeof styledComponents }).default ||
-  styledComponents
+  (styledComponents as unknown as { styled: StyledInterface }).styled ||
+  (styledComponents as unknown as { default: StyledInterface }).default ||
+  styledComponents as unknown as StyledInterface
 );
 
 interface Props {
diff --git a/packages/react-qr/src/DisplayAddress.tsx b/packages/react-qr/src/DisplayAddress.tsx
index c073ed03..4a8b6696 100644
--- a/packages/react-qr/src/DisplayAddress.tsx
+++ b/packages/react-qr/src/DisplayAddress.tsx
@@ -3,8 +3,8 @@
 
 import React, { useMemo } from 'react';
 
-import { QrDisplay } from './Display';
-import { createAddressPayload } from './util';
+import { QrDisplay } from './Display.js';
+import { createAddressPayload } from './util.js';
 
 interface Props {
   address: string;
diff --git a/packages/react-qr/src/DisplayPayload.tsx b/packages/react-qr/src/DisplayPayload.tsx
index 2681d8df..f263c422 100644
--- a/packages/react-qr/src/DisplayPayload.tsx
+++ b/packages/react-qr/src/DisplayPayload.tsx
@@ -3,8 +3,8 @@
 
 import React, { useMemo } from 'react';
 
-import { QrDisplay } from './Display';
-import { createSignPayload } from './util';
+import { QrDisplay } from './Display.js';
+import { createSignPayload } from './util.js';
 
 interface Props {
   address: string;
diff --git a/packages/react-qr/src/NetworkSpecs.tsx b/packages/react-qr/src/NetworkSpecs.tsx
index d84412a5..c9973484 100644
--- a/packages/react-qr/src/NetworkSpecs.tsx
+++ b/packages/react-qr/src/NetworkSpecs.tsx
@@ -5,8 +5,8 @@ import type { NetworkSpecsStruct } from '@polkadot/ui-settings/types';
 
 import React, { useMemo } from 'react';
 
-import { QrDisplay } from './Display';
-import { encodeString } from './util';
+import { QrDisplay } from './Display.js';
+import { encodeString } from './util.js';
 
 interface Props {
   className?: string;
diff --git a/packages/react-qr/src/Scan.tsx b/packages/react-qr/src/Scan.tsx
index 610e8fe1..bf60941f 100644
--- a/packages/react-qr/src/Scan.tsx
+++ b/packages/react-qr/src/Scan.tsx
@@ -3,18 +3,18 @@
 
 import React, { useCallback, useMemo } from 'react';
 import Reader from 'react-qr-reader';
-import styledComponents from 'styled-components';
+import styledComponents, { StyledInterface } from 'styled-components';
 
-import { createImgSize } from './util';
+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: typeof styledComponents }).styled ||
-  (styledComponents as unknown as { default: typeof styledComponents }).default ||
-  styledComponents
+  (styledComponents as unknown as { styled: StyledInterface }).styled ||
+  (styledComponents as unknown as { default: StyledInterface }).default ||
+  styledComponents as unknown as StyledInterface
 );
 
 interface Props {
diff --git a/packages/react-qr/src/ScanAddress.tsx b/packages/react-qr/src/ScanAddress.tsx
index b32b8f7c..fbdb5836 100644
--- a/packages/react-qr/src/ScanAddress.tsx
+++ b/packages/react-qr/src/ScanAddress.tsx
@@ -6,8 +6,8 @@ import React, { useCallback } from 'react';
 import { assert } from '@polkadot/util';
 import { decodeAddress } from '@polkadot/util-crypto';
 
-import { ADDRESS_PREFIX, SEED_PREFIX } from './constants';
-import { QrScan } from './Scan';
+import { ADDRESS_PREFIX, SEED_PREFIX } from './constants.js';
+import { QrScan } from './Scan.js';
 
 interface ScanType {
   isAddress: boolean;
diff --git a/packages/react-qr/src/ScanSignature.tsx b/packages/react-qr/src/ScanSignature.tsx
index 5d908573..a739fb25 100644
--- a/packages/react-qr/src/ScanSignature.tsx
+++ b/packages/react-qr/src/ScanSignature.tsx
@@ -5,7 +5,7 @@ import type { HexString } from '@polkadot/util/types';
 
 import React, { useCallback } from 'react';
 
-import { QrScan } from './Scan';
+import { QrScan } from './Scan.js';
 
 interface ScanType {
   signature: HexString;
diff --git a/packages/react-qr/src/bundle.ts b/packages/react-qr/src/bundle.ts
index 908dd6fb..44bf57e1 100644
--- a/packages/react-qr/src/bundle.ts
+++ b/packages/react-qr/src/bundle.ts
@@ -1,9 +1,9 @@
 // Copyright 2017-2023 @polkadot/react-qr authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-export { QrDisplayAddress } from './DisplayAddress';
-export { QrDisplayPayload } from './DisplayPayload';
-export { QrScanAddress } from './ScanAddress';
-export { QrScanSignature } from './ScanSignature';
-export { QrNetworkSpecs } from './NetworkSpecs';
-export { packageInfo } from './packageInfo';
+export { QrDisplayAddress } from './DisplayAddress.js';
+export { QrDisplayPayload } from './DisplayPayload.js';
+export { QrScanAddress } from './ScanAddress.js';
+export { QrScanSignature } from './ScanSignature.js';
+export { QrNetworkSpecs } from './NetworkSpecs.js';
+export { packageInfo } from './packageInfo.js';
diff --git a/packages/react-qr/src/detectPackage.ts b/packages/react-qr/src/detectPackage.ts
index e2a8ed24..8e746280 100644
--- a/packages/react-qr/src/detectPackage.ts
+++ b/packages/react-qr/src/detectPackage.ts
@@ -5,7 +5,7 @@
 
 import { detectPackage } from '@polkadot/util';
 
-import others from './detectOther';
-import { packageInfo } from './packageInfo';
+import others from './detectOther.js';
+import { packageInfo } from './packageInfo.js';
 
 detectPackage(packageInfo, null, others);
diff --git a/packages/react-qr/src/index.ts b/packages/react-qr/src/index.ts
index 23b30eed..cb58cb15 100644
--- a/packages/react-qr/src/index.ts
+++ b/packages/react-qr/src/index.ts
@@ -1,6 +1,6 @@
 // Copyright 2017-2023 @polkadot/react-qr authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import './detectPackage';
+import './detectPackage.js';
 
-export * from './bundle';
+export * from './bundle.js';
diff --git a/packages/react-qr/src/util.spec.ts b/packages/react-qr/src/util.spec.ts
index 88dd4077..c5d0afe3 100644
--- a/packages/react-qr/src/util.spec.ts
+++ b/packages/react-qr/src/util.spec.ts
@@ -6,7 +6,7 @@
 import { u8aConcat, u8aToHex, u8aToString } from '@polkadot/util';
 import { randomAsU8a } from '@polkadot/util-crypto';
 
-import { createAddressPayload, createFrames, createSignPayload, decodeString, encodeNumber, encodeString } from './util';
+import { createAddressPayload, createFrames, createSignPayload, decodeString, encodeNumber, encodeString } from './util.js';
 
 describe('util', (): void => {
   describe('Uint8Array <-> string', (): void => {
diff --git a/packages/react-qr/src/util.ts b/packages/react-qr/src/util.ts
index a7273831..baead8ac 100644
--- a/packages/react-qr/src/util.ts
+++ b/packages/react-qr/src/util.ts
@@ -4,7 +4,7 @@
 import { isString, u8aConcat, u8aToU8a } from '@polkadot/util';
 import { decodeAddress } from '@polkadot/util-crypto';
 
-import { ADDRESS_PREFIX, CRYPTO_SR25519, FRAME_SIZE, SUBSTRATE_ID } from './constants';
+import { ADDRESS_PREFIX, CRYPTO_SR25519, FRAME_SIZE, SUBSTRATE_ID } from './constants.js';
 
 const MULTIPART = new Uint8Array([0]);
 
diff --git a/packages/reactnative-identicon/src/Identicon.tsx b/packages/reactnative-identicon/src/Identicon.tsx
index b1e42848..8595b2d2 100644
--- a/packages/reactnative-identicon/src/Identicon.tsx
+++ b/packages/reactnative-identicon/src/Identicon.tsx
@@ -2,14 +2,14 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { Prefix } from '@polkadot/util-crypto/address/types';
-import type { Props as ComponentProps } from './types';
+import type { Props as ComponentProps } from './types.js';
 
 import React from 'react';
 
 import { isHex, isU8a, u8aToHex } from '@polkadot/util';
 import { decodeAddress, encodeAddress } from '@polkadot/util-crypto';
 
-import { Empty, Polkadot } from './icons';
+import { Empty, Polkadot } from './icons/index.js';
 
 const Fallback = Polkadot;
 
diff --git a/packages/reactnative-identicon/src/bundle.ts b/packages/reactnative-identicon/src/bundle.ts
index afb08374..fe0c38b0 100644
--- a/packages/reactnative-identicon/src/bundle.ts
+++ b/packages/reactnative-identicon/src/bundle.ts
@@ -1,5 +1,5 @@
 // Copyright 2017-2023 @polkadot/reactnative-identicon authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-export * from './icons';
-export { packageInfo } from './packageInfo';
+export * from './icons/index.js';
+export { packageInfo } from './packageInfo.js';
diff --git a/packages/reactnative-identicon/src/detectPackage.ts b/packages/reactnative-identicon/src/detectPackage.ts
index 1aac18a6..07c97b8b 100644
--- a/packages/reactnative-identicon/src/detectPackage.ts
+++ b/packages/reactnative-identicon/src/detectPackage.ts
@@ -5,7 +5,7 @@
 
 import { detectPackage } from '@polkadot/util';
 
-import others from './detectOther';
-import { packageInfo } from './packageInfo';
+import others from './detectOther.js';
+import { packageInfo } from './packageInfo.js';
 
 detectPackage(packageInfo, null, others);
diff --git a/packages/reactnative-identicon/src/icons/Empty.tsx b/packages/reactnative-identicon/src/icons/Empty.tsx
index f4fc36a2..ab42eef7 100644
--- a/packages/reactnative-identicon/src/icons/Empty.tsx
+++ b/packages/reactnative-identicon/src/icons/Empty.tsx
@@ -1,7 +1,7 @@
 // Copyright 2017-2023 @polkadot/reactnative-identicon authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { Props } from '../types';
+import type { Props } from '../types.js';
 
 import React from 'react';
 import { View } from 'react-native';
diff --git a/packages/reactnative-identicon/src/icons/Polkadot.tsx b/packages/reactnative-identicon/src/icons/Polkadot.tsx
index df024745..72425311 100644
--- a/packages/reactnative-identicon/src/icons/Polkadot.tsx
+++ b/packages/reactnative-identicon/src/icons/Polkadot.tsx
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { Circle as CircleType } from '@polkadot/ui-shared/icons/types';
-import type { Props } from '../types';
+import type { Props } from '../types.js';
 
 import React, { useMemo } from 'react';
 import { View } from 'react-native';
diff --git a/packages/reactnative-identicon/src/icons/index.ts b/packages/reactnative-identicon/src/icons/index.ts
index 2f979de2..e54370cb 100644
--- a/packages/reactnative-identicon/src/icons/index.ts
+++ b/packages/reactnative-identicon/src/icons/index.ts
@@ -1,5 +1,5 @@
 // Copyright 2017-2023 @polkadot/reactnative-identicon authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-export { default as Empty } from './Empty';
-export { default as Polkadot } from './Polkadot';
+export { default as Empty } from './Empty.js';
+export { default as Polkadot } from './Polkadot.js';
diff --git a/packages/reactnative-identicon/src/index.ts b/packages/reactnative-identicon/src/index.ts
index 71bb53ba..e8de2e37 100644
--- a/packages/reactnative-identicon/src/index.ts
+++ b/packages/reactnative-identicon/src/index.ts
@@ -1,10 +1,10 @@
 // Copyright 2017-2023 @polkadot/reactnative-identicon authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import './detectPackage';
+import './detectPackage.js';
 
-import Identicon from './Identicon';
+import Identicon from './Identicon.js';
 
-export * from './bundle';
+export * from './bundle.js';
 
 export default Identicon;
diff --git a/packages/ui-keyring/src/Base.ts b/packages/ui-keyring/src/Base.ts
index 52064f01..a8da2844 100644
--- a/packages/ui-keyring/src/Base.ts
+++ b/packages/ui-keyring/src/Base.ts
@@ -9,11 +9,11 @@ import type { KeyringOptions, KeyringStore } from './types';
 import { createTestKeyring } from '@polkadot/keyring';
 import { isBoolean, isNumber, isString } from '@polkadot/util';
 
-import { accounts } from './observable/accounts';
-import { addresses } from './observable/addresses';
-import { contracts } from './observable/contracts';
-import { env } from './observable/env';
-import { BrowserStore } from './stores/Browser'; // direct import (skip index with all)
+import { accounts } from './observable/accounts.js';
+import { addresses } from './observable/addresses.js';
+import { contracts } from './observable/contracts.js';
+import { env } from './observable/env.js';
+import { BrowserStore } from './stores/Browser.js'; // direct import (skip index with all)
 
 export class Base {
   #accounts: AddressSubject;
diff --git a/packages/ui-keyring/src/Keyring.ts b/packages/ui-keyring/src/Keyring.ts
index 1ed64e7b..aa8a9b49 100644
--- a/packages/ui-keyring/src/Keyring.ts
+++ b/packages/ui-keyring/src/Keyring.ts
@@ -5,18 +5,18 @@ import type { KeyringPair, KeyringPair$Json, KeyringPair$Meta } from '@polkadot/
 import type { BN } from '@polkadot/util';
 import type { EncryptedJson } from '@polkadot/util-crypto/json/types';
 import type { KeypairType } from '@polkadot/util-crypto/types';
-import type { AddressSubject, SingleAddress } from './observable/types';
-import type { CreateResult, KeyringAddress, KeyringAddressType, KeyringItemType, KeyringJson, KeyringJson$Meta, KeyringOptions, KeyringPairs$Json, KeyringStruct } from './types';
+import type { AddressSubject, SingleAddress } from './observable/types.js';
+import type { CreateResult, KeyringAddress, KeyringAddressType, KeyringItemType, KeyringJson, KeyringJson$Meta, KeyringOptions, KeyringPairs$Json, KeyringStruct } from './types.js';
 
 import { createPair } from '@polkadot/keyring';
 import { chains } from '@polkadot/ui-settings';
 import { bnToBn, hexToU8a, isFunction, isHex, isString, objectSpread, stringify, stringToU8a, u8aSorted, u8aToString } from '@polkadot/util';
 import { base64Decode, createKeyMulti, jsonDecrypt, jsonEncrypt } from '@polkadot/util-crypto';
 
-import { env } from './observable/env';
-import { Base } from './Base';
-import { accountKey, accountRegex, addressKey, addressRegex, contractKey, contractRegex } from './defaults';
-import { KeyringOption } from './options';
+import { env } from './observable/env.js';
+import { KeyringOption } from './options/index.js';
+import { Base } from './Base.js';
+import { accountKey, accountRegex, addressKey, addressRegex, contractKey, contractRegex } from './defaults.js';
 
 const RECENT_EXPIRY = 24 * 60 * 60;
 
diff --git a/packages/ui-keyring/src/bundle.ts b/packages/ui-keyring/src/bundle.ts
index 768d8c05..3ffdb8c1 100644
--- a/packages/ui-keyring/src/bundle.ts
+++ b/packages/ui-keyring/src/bundle.ts
@@ -1,9 +1,9 @@
 // Copyright 2017-2023 @polkadot/ui-keyring authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import { Keyring } from './Keyring';
+import { Keyring } from './Keyring.js';
 
-export { packageInfo } from './packageInfo';
+export { packageInfo } from './packageInfo.js';
 
 const keyring = new Keyring();
 
diff --git a/packages/ui-keyring/src/detectPackage.ts b/packages/ui-keyring/src/detectPackage.ts
index f596bc56..0de2f249 100644
--- a/packages/ui-keyring/src/detectPackage.ts
+++ b/packages/ui-keyring/src/detectPackage.ts
@@ -5,7 +5,7 @@
 
 import { detectPackage } from '@polkadot/util';
 
-import others from './detectOther';
-import { packageInfo } from './packageInfo';
+import others from './detectOther.js';
+import { packageInfo } from './packageInfo.js';
 
 detectPackage(packageInfo, null, others);
diff --git a/packages/ui-keyring/src/index.ts b/packages/ui-keyring/src/index.ts
index 63123184..97801668 100644
--- a/packages/ui-keyring/src/index.ts
+++ b/packages/ui-keyring/src/index.ts
@@ -1,10 +1,10 @@
 // Copyright 2017-2023 @polkadot/ui-keyring authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import './detectPackage';
+import './detectPackage.js';
 
-import { keyring } from './bundle';
+import { keyring } from './bundle.js';
 
-export * from './bundle';
+export * from './bundle.js';
 
 export default keyring;
diff --git a/packages/ui-keyring/src/observable/accounts.ts b/packages/ui-keyring/src/observable/accounts.ts
index df8742ca..9a4cbe2c 100644
--- a/packages/ui-keyring/src/observable/accounts.ts
+++ b/packages/ui-keyring/src/observable/accounts.ts
@@ -1,7 +1,7 @@
 // Copyright 2017-2023 @polkadot/ui-keyring authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import { accountKey } from '../defaults';
-import { genericSubject } from './genericSubject';
+import { accountKey } from '../defaults.js';
+import { genericSubject } from './genericSubject.js';
 
 export const accounts = genericSubject(accountKey, true);
diff --git a/packages/ui-keyring/src/observable/addresses.ts b/packages/ui-keyring/src/observable/addresses.ts
index ea9a2119..f9f281f8 100644
--- a/packages/ui-keyring/src/observable/addresses.ts
+++ b/packages/ui-keyring/src/observable/addresses.ts
@@ -1,7 +1,7 @@
 // Copyright 2017-2023 @polkadot/ui-keyring authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import { addressKey } from '../defaults';
-import { genericSubject } from './genericSubject';
+import { addressKey } from '../defaults.js';
+import { genericSubject } from './genericSubject.js';
 
 export const addresses = genericSubject(addressKey);
diff --git a/packages/ui-keyring/src/observable/contracts.ts b/packages/ui-keyring/src/observable/contracts.ts
index 5ee984b3..ada5a5f5 100644
--- a/packages/ui-keyring/src/observable/contracts.ts
+++ b/packages/ui-keyring/src/observable/contracts.ts
@@ -1,7 +1,7 @@
 // Copyright 2017-2023 @polkadot/ui-keyring authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import { contractKey } from '../defaults';
-import { genericSubject } from './genericSubject';
+import { contractKey } from '../defaults.js';
+import { genericSubject } from './genericSubject.js';
 
 export const contracts = genericSubject(contractKey);
diff --git a/packages/ui-keyring/src/observable/genericSubject.ts b/packages/ui-keyring/src/observable/genericSubject.ts
index 0a830b1b..de19fdd4 100644
--- a/packages/ui-keyring/src/observable/genericSubject.ts
+++ b/packages/ui-keyring/src/observable/genericSubject.ts
@@ -9,8 +9,8 @@ import { BehaviorSubject } from 'rxjs';
 
 import { objectCopy, objectSpread } from '@polkadot/util';
 
-import { createOptionItem } from '../options/item';
-import { env } from './env';
+import { createOptionItem } from '../options/item.js';
+import { env } from './env.js';
 
 function callNext (current: SubjectInfo, subject: BehaviorSubject<SubjectInfo>, withTest: boolean): void {
   const isDevMode = env.isDevelopment();
diff --git a/packages/ui-keyring/src/observable/index.ts b/packages/ui-keyring/src/observable/index.ts
index 7023b657..9bb3a5f5 100644
--- a/packages/ui-keyring/src/observable/index.ts
+++ b/packages/ui-keyring/src/observable/index.ts
@@ -5,9 +5,9 @@ import type { SubjectInfo } from './types';
 
 import { combineLatest, map } from 'rxjs';
 
-import { accounts } from './accounts';
-import { addresses } from './addresses';
-import { contracts } from './contracts';
+import { accounts } from './accounts.js';
+import { addresses } from './addresses.js';
+import { contracts } from './contracts.js';
 
 interface Result {
   accounts: SubjectInfo;
diff --git a/packages/ui-keyring/src/observable/types.ts b/packages/ui-keyring/src/observable/types.ts
index 7a7bf64d..03446711 100644
--- a/packages/ui-keyring/src/observable/types.ts
+++ b/packages/ui-keyring/src/observable/types.ts
@@ -3,8 +3,8 @@
 
 import type { BehaviorSubject } from 'rxjs';
 import type { KeypairType } from '@polkadot/util-crypto/types';
-import type { KeyringSectionOption } from '../options/types';
-import type { KeyringJson, KeyringStore } from '../types';
+import type { KeyringSectionOption } from '../options/types.js';
+import type { KeyringJson, KeyringStore } from '../types.js';
 
 export interface SingleAddress {
   json: KeyringJson;
diff --git a/packages/ui-keyring/src/options/index.spec.ts b/packages/ui-keyring/src/options/index.spec.ts
index 1481b154..38944767 100644
--- a/packages/ui-keyring/src/options/index.spec.ts
+++ b/packages/ui-keyring/src/options/index.spec.ts
@@ -3,9 +3,9 @@
 
 /// <reference types="@polkadot/dev/node/test/node" />
 
-import type { KeyringStruct } from '../types';
+import type { KeyringStruct } from '../types.js';
 
-import { KeyringOption } from '.';
+import { KeyringOption } from './index.js';
 
 const keyringOption = new KeyringOption();
 
diff --git a/packages/ui-keyring/src/options/index.ts b/packages/ui-keyring/src/options/index.ts
index f185ab62..24a96f1c 100644
--- a/packages/ui-keyring/src/options/index.ts
+++ b/packages/ui-keyring/src/options/index.ts
@@ -1,15 +1,15 @@
 // Copyright 2017-2023 @polkadot/ui-keyring authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { SingleAddress } from '../observable/types';
-import type { KeyringStruct } from '../types';
-import type { KeyringOptionInstance, KeyringOptions, KeyringSectionOption, KeyringSectionOptions } from './types';
+import type { SingleAddress } from '../observable/types.js';
+import type { KeyringStruct } from '../types.js';
+import type { KeyringOptionInstance, KeyringOptions, KeyringSectionOption, KeyringSectionOptions } from './types.js';
 
 import { BehaviorSubject } from 'rxjs';
 
 import { assert } from '@polkadot/util';
 
-import { obervableAll } from '../observable';
+import { obervableAll } from '../observable/index.js';
 
 let hasCalledInitOptions = false;
 
diff --git a/packages/ui-keyring/src/options/item.ts b/packages/ui-keyring/src/options/item.ts
index 35f7350c..55151756 100644
--- a/packages/ui-keyring/src/options/item.ts
+++ b/packages/ui-keyring/src/options/item.ts
@@ -1,7 +1,7 @@
 // Copyright 2017-2023 @polkadot/ui-keyring authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { KeyringSectionOption } from './types';
+import type { KeyringSectionOption } from './types.js';
 
 import { isUndefined } from '@polkadot/util';
 
diff --git a/packages/ui-keyring/src/options/types.ts b/packages/ui-keyring/src/options/types.ts
index 805c25a4..3bc62843 100644
--- a/packages/ui-keyring/src/options/types.ts
+++ b/packages/ui-keyring/src/options/types.ts
@@ -1,7 +1,7 @@
 // Copyright 2017-2023 @polkadot/ui-keyring authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { KeyringItemType, KeyringStruct } from '../types';
+import type { KeyringItemType, KeyringStruct } from '../types.js';
 
 export interface KeyringSectionOption {
   key: string | null;
diff --git a/packages/ui-keyring/src/stores/File.ts b/packages/ui-keyring/src/stores/File.ts
index 66bcc60f..0be2bcdb 100644
--- a/packages/ui-keyring/src/stores/File.ts
+++ b/packages/ui-keyring/src/stores/File.ts
@@ -3,9 +3,9 @@
 
 import type { KeyringJson, KeyringStore } from '../types';
 
-import fs from 'fs';
 import mkdirp from 'mkdirp';
-import path from 'path';
+import fs from 'node:fs';
+import path from 'node:path';
 
 import { assert } from '@polkadot/util';
 
diff --git a/packages/ui-keyring/src/stores/index.ts b/packages/ui-keyring/src/stores/index.ts
index 198c190a..9b5a1b10 100644
--- a/packages/ui-keyring/src/stores/index.ts
+++ b/packages/ui-keyring/src/stores/index.ts
@@ -1,5 +1,5 @@
 // Copyright 2017-2023 @polkadot/ui-keyring authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-export { BrowserStore } from './Browser';
-export { FileStore } from './File';
+export { BrowserStore } from './Browser.js';
+export { FileStore } from './File.js';
diff --git a/packages/ui-keyring/src/types.ts b/packages/ui-keyring/src/types.ts
index 1d45593a..4cce967b 100644
--- a/packages/ui-keyring/src/types.ts
+++ b/packages/ui-keyring/src/types.ts
@@ -4,7 +4,7 @@
 import type { KeyringInstance as BaseKeyringInstance, KeyringOptions as KeyringOptionsBase, KeyringPair, KeyringPair$Json, KeyringPair$Meta } from '@polkadot/keyring/types';
 import type { EncryptedJson } from '@polkadot/util-crypto/json/types';
 import type { KeypairType } from '@polkadot/util-crypto/types';
-import type { AddressSubject, SingleAddress } from './observable/types';
+import type { AddressSubject, SingleAddress } from './observable/types.js';
 
 export interface ContractMeta {
   abi: string;
diff --git a/packages/ui-settings/src/Settings.ts b/packages/ui-settings/src/Settings.ts
index c0874e28..2b4745b5 100644
--- a/packages/ui-settings/src/Settings.ts
+++ b/packages/ui-settings/src/Settings.ts
@@ -8,7 +8,7 @@ import store from 'store';
 
 import { hasProcess, isUndefined } from '@polkadot/util';
 
-import { CAMERA, CAMERA_DEFAULT, CRYPTOS, CRYPTOS_ETH, CRYPTOS_LEDGER, ENDPOINT_DEFAULT, ENDPOINTS, ICON_DEFAULT, ICONS, LANGUAGE_DEFAULT, LEDGER_CONN, LEDGER_CONN_DEFAULT, LOCKING, LOCKING_DEFAULT, METADATA_UP, METADATA_UP_DEFAULT, NOTIFICATION_DEFAULT, PREFIX_DEFAULT, PREFIXES, STORAGE, STORAGE_DEFAULT, UIMODE_DEFAULT, UIMODES, UITHEME_DEFAULT, UITHEMES } from './defaults';
+import { CAMERA, CAMERA_DEFAULT, CRYPTOS, CRYPTOS_ETH, CRYPTOS_LEDGER, ENDPOINT_DEFAULT, ENDPOINTS, ICON_DEFAULT, ICONS, LANGUAGE_DEFAULT, LEDGER_CONN, LEDGER_CONN_DEFAULT, LOCKING, LOCKING_DEFAULT, METADATA_UP, METADATA_UP_DEFAULT, NOTIFICATION_DEFAULT, PREFIX_DEFAULT, PREFIXES, STORAGE, STORAGE_DEFAULT, UIMODE_DEFAULT, UIMODES, UITHEME_DEFAULT, UITHEMES } from './defaults/index.js';
 
 type ChangeCallback = (settings: SettingsStruct) => void;
 type OnTypes = 'change';
diff --git a/packages/ui-settings/src/bundle.ts b/packages/ui-settings/src/bundle.ts
index d42d6493..ad4ed233 100644
--- a/packages/ui-settings/src/bundle.ts
+++ b/packages/ui-settings/src/bundle.ts
@@ -1,10 +1,10 @@
 // Copyright 2017-2023 @polkadot/ui-settings authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import { Settings, settings } from './Settings';
+import { Settings, settings } from './Settings.js';
 
-export { ENDPOINT_DEFAULT, ICON_DEFAULT, ICON_DEFAULT_HOST, LANGUAGE_DEFAULT, LOCKING_DEFAULT, PREFIX_DEFAULT, UIMODE_DEFAULT, UITHEME_DEFAULT } from './defaults';
-export { chains } from './defaults/chains';
-export { packageInfo } from './packageInfo';
+export { ENDPOINT_DEFAULT, ICON_DEFAULT, ICON_DEFAULT_HOST, LANGUAGE_DEFAULT, LOCKING_DEFAULT, PREFIX_DEFAULT, UIMODE_DEFAULT, UITHEME_DEFAULT } from './defaults/index.js';
+export { chains } from './defaults/chains.js';
+export { packageInfo } from './packageInfo.js';
 
 export { settings, Settings };
diff --git a/packages/ui-settings/src/defaults/crypto.ts b/packages/ui-settings/src/defaults/crypto.ts
index dffe9bdf..80f17ce4 100644
--- a/packages/ui-settings/src/defaults/crypto.ts
+++ b/packages/ui-settings/src/defaults/crypto.ts
@@ -1,7 +1,7 @@
 // Copyright 2017-2023 @polkadot/ui-settings authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { Option } from '../types';
+import type { Option } from '../types.js';
 
 export const CRYPTOS: Option[] = [
   {
diff --git a/packages/ui-settings/src/defaults/endpoints.ts b/packages/ui-settings/src/defaults/endpoints.ts
index f2512136..58bd2ab4 100644
--- a/packages/ui-settings/src/defaults/endpoints.ts
+++ b/packages/ui-settings/src/defaults/endpoints.ts
@@ -1,7 +1,7 @@
 // Copyright 2017-2023 @polkadot/ui-settings authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { Option } from '../types';
+import type { Option } from '../types.js';
 
 export const ENDPOINTS: Option[] = [{
   info: 'local',
diff --git a/packages/ui-settings/src/defaults/index.ts b/packages/ui-settings/src/defaults/index.ts
index 9dfa3c8b..186591f5 100644
--- a/packages/ui-settings/src/defaults/index.ts
+++ b/packages/ui-settings/src/defaults/index.ts
@@ -1,13 +1,13 @@
 // Copyright 2017-2023 @polkadot/ui-settings authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { Option } from '../types';
+import type { Option } from '../types.js';
 
-import { CRYPTOS, CRYPTOS_ETH, CRYPTOS_LEDGER } from './crypto';
-import { ENDPOINT_DEFAULT, ENDPOINTS } from './endpoints';
-import { LEDGER_CONN, LEDGER_CONN_DEFAULT } from './ledger';
-import { PREFIX_DEFAULT, PREFIXES } from './ss58';
-import { ICON_DEFAULT, ICON_DEFAULT_HOST, ICONS, NOTIFICATION_DEFAULT, UIMODE_DEFAULT, UIMODES, UITHEME_DEFAULT, UITHEMES } from './ui';
+import { CRYPTOS, CRYPTOS_ETH, CRYPTOS_LEDGER } from './crypto.js';
+import { ENDPOINT_DEFAULT, ENDPOINTS } from './endpoints.js';
+import { LEDGER_CONN, LEDGER_CONN_DEFAULT } from './ledger.js';
+import { PREFIX_DEFAULT, PREFIXES } from './ss58.js';
+import { ICON_DEFAULT, ICON_DEFAULT_HOST, ICONS, NOTIFICATION_DEFAULT, UIMODE_DEFAULT, UIMODES, UITHEME_DEFAULT, UITHEMES } from './ui.js';
 
 const CAMERA_DEFAULT = 'off';
 
diff --git a/packages/ui-settings/src/defaults/ledger.ts b/packages/ui-settings/src/defaults/ledger.ts
index 65d304c0..a6e3f327 100644
--- a/packages/ui-settings/src/defaults/ledger.ts
+++ b/packages/ui-settings/src/defaults/ledger.ts
@@ -1,7 +1,7 @@
 // Copyright 2017-2023 @polkadot/ui-settings authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { Option } from '../types';
+import type { Option } from '../types.js';
 
 export const LEDGER_CONN_DEFAULT = 'none';
 
diff --git a/packages/ui-settings/src/defaults/ss58.ts b/packages/ui-settings/src/defaults/ss58.ts
index a101d27b..65de3f93 100644
--- a/packages/ui-settings/src/defaults/ss58.ts
+++ b/packages/ui-settings/src/defaults/ss58.ts
@@ -1,7 +1,7 @@
 // Copyright 2017-2023 @polkadot/ui-settings authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { Option } from '../types';
+import type { Option } from '../types.js';
 
 import { availableNetworks } from '@polkadot/networks';
 
diff --git a/packages/ui-settings/src/defaults/ui.ts b/packages/ui-settings/src/defaults/ui.ts
index deeeec8f..2d56d932 100644
--- a/packages/ui-settings/src/defaults/ui.ts
+++ b/packages/ui-settings/src/defaults/ui.ts
@@ -3,7 +3,7 @@
 
 import type { Option } from '../types';
 
-import { isPolkadot } from './type';
+import { isPolkadot } from './type.js';
 
 const LANGUAGE_DEFAULT = 'default';
 
diff --git a/packages/ui-settings/src/detectPackage.ts b/packages/ui-settings/src/detectPackage.ts
index fdf1ff79..b1fbf445 100644
--- a/packages/ui-settings/src/detectPackage.ts
+++ b/packages/ui-settings/src/detectPackage.ts
@@ -5,7 +5,7 @@
 
 import { detectPackage } from '@polkadot/util';
 
-import others from './detectOther';
-import { packageInfo } from './packageInfo';
+import others from './detectOther.js';
+import { packageInfo } from './packageInfo.js';
 
 detectPackage(packageInfo, null, others);
diff --git a/packages/ui-settings/src/index.ts b/packages/ui-settings/src/index.ts
index ce3e1721..cb7b1be0 100644
--- a/packages/ui-settings/src/index.ts
+++ b/packages/ui-settings/src/index.ts
@@ -1,8 +1,8 @@
 // Copyright 2017-2023 @polkadot/ui-settings authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import { settings } from './bundle';
+import { settings } from './bundle.js';
 
-export * from './bundle';
+export * from './bundle.js';
 
 export default settings;
diff --git a/packages/ui-shared/src/bundle.ts b/packages/ui-shared/src/bundle.ts
index f450b00b..79062cf4 100644
--- a/packages/ui-shared/src/bundle.ts
+++ b/packages/ui-shared/src/bundle.ts
@@ -1,5 +1,5 @@
 // Copyright 2018-2023 @polkadot/ui-shared authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-export * from './icons';
-export { packageInfo } from './packageInfo';
+export * from './icons/index.js';
+export { packageInfo } from './packageInfo.js';
diff --git a/packages/ui-shared/src/detectPackage.ts b/packages/ui-shared/src/detectPackage.ts
index 4070a5e0..ca517ad9 100644
--- a/packages/ui-shared/src/detectPackage.ts
+++ b/packages/ui-shared/src/detectPackage.ts
@@ -5,7 +5,7 @@
 
 import { detectPackage } from '@polkadot/util';
 
-import others from './detectOther';
-import { packageInfo } from './packageInfo';
+import others from './detectOther.js';
+import { packageInfo } from './packageInfo.js';
 
 detectPackage(packageInfo, null, others);
diff --git a/packages/ui-shared/src/icons/beachball/colors.spec.ts b/packages/ui-shared/src/icons/beachball/colors.spec.ts
index 04e7e09d..2355bfb7 100644
--- a/packages/ui-shared/src/icons/beachball/colors.spec.ts
+++ b/packages/ui-shared/src/icons/beachball/colors.spec.ts
@@ -3,10 +3,10 @@
 
 /// <reference types="@polkadot/dev/node/test/node" />
 
-import type { ColorGen } from './types';
+import type { ColorGen } from './types.js';
 
-import { colors as newColors } from './colors';
-import { seeder as newSeeder } from './seeder';
+import { colors as newColors } from './colors.js';
+import { seeder as newSeeder } from './seeder.js';
 
 describe('colors', (): void => {
   let colors: ColorGen;
diff --git a/packages/ui-shared/src/icons/beachball/colors.ts b/packages/ui-shared/src/icons/beachball/colors.ts
index b64f1d6e..9f92c381 100644
--- a/packages/ui-shared/src/icons/beachball/colors.ts
+++ b/packages/ui-shared/src/icons/beachball/colors.ts
@@ -3,11 +3,11 @@
 
 // Copyright 2016 Dan Finlay
 
-import type { ColorGen, Seeder } from './types';
+import type { ColorGen, Seeder } from './types.js';
 
 import Color from 'color';
 
-import { COLORS } from './defaults';
+import { COLORS } from './defaults.js';
 
 const WOBBLE = 30;
 
diff --git a/packages/ui-shared/src/icons/beachball/container.spec.ts b/packages/ui-shared/src/icons/beachball/container.spec.ts
index 16e47e07..0579a725 100644
--- a/packages/ui-shared/src/icons/beachball/container.spec.ts
+++ b/packages/ui-shared/src/icons/beachball/container.spec.ts
@@ -3,7 +3,7 @@
 
 /// <reference types="@polkadot/dev/node/test/node" />
 
-import { container } from './container';
+import { container } from './container.js';
 
 describe('container', (): void => {
   it('applies default styles', (): void => {
diff --git a/packages/ui-shared/src/icons/beachball/demo.ts b/packages/ui-shared/src/icons/beachball/demo.ts
index b0a097f4..772879a4 100644
--- a/packages/ui-shared/src/icons/beachball/demo.ts
+++ b/packages/ui-shared/src/icons/beachball/demo.ts
@@ -6,7 +6,7 @@
 import { isNull } from '@polkadot/util';
 import { encodeAddress, randomAsU8a } from '@polkadot/util-crypto';
 
-import { beachballIcon } from '.';
+import { beachballIcon } from './index.js';
 
 const element = document.getElementById('demo');
 
diff --git a/packages/ui-shared/src/icons/beachball/index.spec.ts b/packages/ui-shared/src/icons/beachball/index.spec.ts
index 26829338..8530b9a1 100644
--- a/packages/ui-shared/src/icons/beachball/index.spec.ts
+++ b/packages/ui-shared/src/icons/beachball/index.spec.ts
@@ -5,7 +5,7 @@
 
 import xmlserializer from 'xmlserializer';
 
-import { beachballIcon } from '.';
+import { beachballIcon } from './index.js';
 
 describe('identicon', (): void => {
   it('generates a basic [0,..,0] identicon', (): void => {
diff --git a/packages/ui-shared/src/icons/beachball/index.ts b/packages/ui-shared/src/icons/beachball/index.ts
index 72fd30d8..8de7a594 100644
--- a/packages/ui-shared/src/icons/beachball/index.ts
+++ b/packages/ui-shared/src/icons/beachball/index.ts
@@ -5,12 +5,12 @@
 
 import type { Options } from '../types';
 
-import { circle } from './shape/circle';
-import { element } from './svg/element';
-import { colors } from './colors';
-import { container as newContainer } from './container';
-import { SHAPE_COUNT } from './defaults';
-import { seeder as newSeeder } from './seeder';
+import { circle } from './shape/circle.js';
+import { element } from './svg/element.js';
+import { colors } from './colors.js';
+import { container as newContainer } from './container.js';
+import { SHAPE_COUNT } from './defaults.js';
+import { seeder as newSeeder } from './seeder.js';
 
 export function beachballIcon (seed: string | Uint8Array, { size = 256 }: Options, className = '', style?: { [index: string]: string }): HTMLElement {
   const seeder = newSeeder(seed);
diff --git a/packages/ui-shared/src/icons/beachball/seeder.spec.ts b/packages/ui-shared/src/icons/beachball/seeder.spec.ts
index 78fa8555..66ec5d98 100644
--- a/packages/ui-shared/src/icons/beachball/seeder.spec.ts
+++ b/packages/ui-shared/src/icons/beachball/seeder.spec.ts
@@ -5,7 +5,7 @@
 
 import type { Seeder } from './types';
 
-import { seeder as newSeeder } from './seeder';
+import { seeder as newSeeder } from './seeder.js';
 
 describe('seeder', (): void => {
   let seeder: Seeder;
diff --git a/packages/ui-shared/src/icons/beachball/shape/circle.spec.ts b/packages/ui-shared/src/icons/beachball/shape/circle.spec.ts
index 50d4dbac..81c4994e 100644
--- a/packages/ui-shared/src/icons/beachball/shape/circle.spec.ts
+++ b/packages/ui-shared/src/icons/beachball/shape/circle.spec.ts
@@ -5,8 +5,8 @@
 
 import xmlserializer from 'xmlserializer';
 
-import { seeder } from '../seeder';
-import { circle } from './circle';
+import { seeder } from '../seeder.js';
+import { circle } from './circle.js';
 
 describe('circle', (): void => {
   it('creates a circle shape', (): void => {
diff --git a/packages/ui-shared/src/icons/beachball/shape/circle.ts b/packages/ui-shared/src/icons/beachball/shape/circle.ts
index f6abb068..b09727f1 100644
--- a/packages/ui-shared/src/icons/beachball/shape/circle.ts
+++ b/packages/ui-shared/src/icons/beachball/shape/circle.ts
@@ -5,8 +5,8 @@
 
 import type { Seeder } from '../types';
 
-import { SHAPE_COUNT } from '../defaults';
-import { circle as newCircle } from '../svg/circle';
+import { SHAPE_COUNT } from '../defaults.js';
+import { circle as newCircle } from '../svg/circle.js';
 
 export function circle (seeder: Seeder, fill: string, diameter: number, count: number): Element {
   const center = diameter / 2;
diff --git a/packages/ui-shared/src/icons/beachball/shape/square.ts b/packages/ui-shared/src/icons/beachball/shape/square.ts
index 41559917..e21aa560 100644
--- a/packages/ui-shared/src/icons/beachball/shape/square.ts
+++ b/packages/ui-shared/src/icons/beachball/shape/square.ts
@@ -5,8 +5,8 @@
 
 import type { Seeder } from '../types';
 
-import { SHAPE_COUNT } from '../defaults';
-import { rect as newRect } from '../svg/rect';
+import { SHAPE_COUNT } from '../defaults.js';
+import { rect as newRect } from '../svg/rect.js';
 
 export function square (seeder: Seeder, fill: string, diameter: number, count: number): Element {
   const center = diameter / 2;
diff --git a/packages/ui-shared/src/icons/beachball/svg/circle.spec.ts b/packages/ui-shared/src/icons/beachball/svg/circle.spec.ts
index 187478d7..d8b29340 100644
--- a/packages/ui-shared/src/icons/beachball/svg/circle.spec.ts
+++ b/packages/ui-shared/src/icons/beachball/svg/circle.spec.ts
@@ -5,7 +5,7 @@
 
 import xs from 'xmlserializer';
 
-import { circle } from './circle';
+import { circle } from './circle.js';
 
 describe('circle', (): void => {
   it('creates a basic SVG circle element', (): void => {
diff --git a/packages/ui-shared/src/icons/beachball/svg/circle.ts b/packages/ui-shared/src/icons/beachball/svg/circle.ts
index eff477ca..e05c889e 100644
--- a/packages/ui-shared/src/icons/beachball/svg/circle.ts
+++ b/packages/ui-shared/src/icons/beachball/svg/circle.ts
@@ -1,7 +1,7 @@
 // Copyright 2017-2023 @polkadot/ui-shared authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import { svg } from './svg';
+import { svg } from './svg.js';
 
 export function circle (r: number, cx: number, cy: number): Element {
   const elem = svg('circle');
diff --git a/packages/ui-shared/src/icons/beachball/svg/element.spec.ts b/packages/ui-shared/src/icons/beachball/svg/element.spec.ts
index a7eef24d..b7be5c9c 100644
--- a/packages/ui-shared/src/icons/beachball/svg/element.spec.ts
+++ b/packages/ui-shared/src/icons/beachball/svg/element.spec.ts
@@ -5,7 +5,7 @@
 
 import xs from 'xmlserializer';
 
-import { element } from './element';
+import { element } from './element.js';
 
 describe('element', (): void => {
   it('creates a basic SVG element', (): void => {
diff --git a/packages/ui-shared/src/icons/beachball/svg/element.ts b/packages/ui-shared/src/icons/beachball/svg/element.ts
index 1069de63..aa4d09ae 100644
--- a/packages/ui-shared/src/icons/beachball/svg/element.ts
+++ b/packages/ui-shared/src/icons/beachball/svg/element.ts
@@ -3,7 +3,7 @@
 
 // Copyright 2016 Dan Finlay
 
-import { svg } from './svg';
+import { svg } from './svg.js';
 
 export function element (size: number, type = 'svg', x = 0, y = 0): Element {
   const elem = svg(type);
diff --git a/packages/ui-shared/src/icons/beachball/svg/rect.spec.ts b/packages/ui-shared/src/icons/beachball/svg/rect.spec.ts
index cd44b70f..7ceb55e2 100644
--- a/packages/ui-shared/src/icons/beachball/svg/rect.spec.ts
+++ b/packages/ui-shared/src/icons/beachball/svg/rect.spec.ts
@@ -5,7 +5,7 @@
 
 import xs from 'xmlserializer';
 
-import { rect } from './rect';
+import { rect } from './rect.js';
 
 describe('rect', (): void => {
   it('creates a basic SVG rect element', (): void => {
diff --git a/packages/ui-shared/src/icons/beachball/svg/rect.ts b/packages/ui-shared/src/icons/beachball/svg/rect.ts
index e356e9de..868d3e46 100644
--- a/packages/ui-shared/src/icons/beachball/svg/rect.ts
+++ b/packages/ui-shared/src/icons/beachball/svg/rect.ts
@@ -1,7 +1,7 @@
 // Copyright 2017-2023 @polkadot/ui-shared authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import { element } from './element';
+import { element } from './element.js';
 
 export function rect (size: number): Element {
   const elem = element(size, 'rect');
diff --git a/packages/ui-shared/src/icons/beachball/svg/svg.spec.ts b/packages/ui-shared/src/icons/beachball/svg/svg.spec.ts
index 9fa6b963..c5ddf60a 100644
--- a/packages/ui-shared/src/icons/beachball/svg/svg.spec.ts
+++ b/packages/ui-shared/src/icons/beachball/svg/svg.spec.ts
@@ -5,7 +5,7 @@
 
 import xs from 'xmlserializer';
 
-import { svg } from './svg';
+import { svg } from './svg.js';
 
 describe('svg', (): void => {
   it('creates a basic SVG element', (): void => {
diff --git a/packages/ui-shared/src/icons/index.ts b/packages/ui-shared/src/icons/index.ts
index 4025d552..0616317f 100644
--- a/packages/ui-shared/src/icons/index.ts
+++ b/packages/ui-shared/src/icons/index.ts
@@ -1,5 +1,5 @@
 // Copyright 2018-2023 @polkadot/ui-shared authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-export { beachballIcon } from './beachball';
-export { polkadotIcon } from './polkadot';
+export { beachballIcon } from './beachball/index.js';
+export { polkadotIcon } from './polkadot.js';
diff --git a/packages/ui-shared/src/icons/polkadot.spec.ts b/packages/ui-shared/src/icons/polkadot.spec.ts
index 43569a33..71c4799f 100644
--- a/packages/ui-shared/src/icons/polkadot.spec.ts
+++ b/packages/ui-shared/src/icons/polkadot.spec.ts
@@ -3,7 +3,7 @@
 
 /// <reference types="@polkadot/dev/node/test/node" />
 
-import { polkadotIcon } from './polkadot';
+import { polkadotIcon } from './polkadot.js';
 
 describe('polkadotIcon', (): void => {
   it('generates the correct points from known', (): void => {
diff --git a/packages/ui-shared/src/index.ts b/packages/ui-shared/src/index.ts
index 4c65ab7e..102d0928 100644
--- a/packages/ui-shared/src/index.ts
+++ b/packages/ui-shared/src/index.ts
@@ -1,6 +1,6 @@
 // Copyright 2018-2023 @polkadot/ui-shared authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import './detectPackage';
+import './detectPackage.js';
 
-export * from './bundle';
+export * from './bundle.js';
diff --git a/packages/vue-identicon/src/Identicon.ts b/packages/vue-identicon/src/Identicon.ts
index 5fcc1ee2..3609f3bc 100644
--- a/packages/vue-identicon/src/Identicon.ts
+++ b/packages/vue-identicon/src/Identicon.ts
@@ -8,7 +8,7 @@ import Vue, { VNode } from 'vue';
 import { isHex, isU8a, u8aToHex } from '@polkadot/util';
 import { decodeAddress, encodeAddress } from '@polkadot/util-crypto';
 
-import { Beachball, Empty, Jdenticon, Polkadot } from './icons';
+import { Beachball, Empty, Jdenticon, Polkadot } from './icons/index.js';
 
 interface Account {
   address: string;
diff --git a/packages/vue-identicon/src/bundle.ts b/packages/vue-identicon/src/bundle.ts
index 3368da07..0d32fe75 100644
--- a/packages/vue-identicon/src/bundle.ts
+++ b/packages/vue-identicon/src/bundle.ts
@@ -1,6 +1,6 @@
 // Copyright 2017-2023 @polkadot/vue-identicon authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-export { Identicon } from './Identicon';
+export { Identicon } from './Identicon.js';
 
-export { packageInfo } from './packageInfo';
+export { packageInfo } from './packageInfo.js';
diff --git a/packages/vue-identicon/src/detectPackage.ts b/packages/vue-identicon/src/detectPackage.ts
index b38f7309..c4c5017f 100644
--- a/packages/vue-identicon/src/detectPackage.ts
+++ b/packages/vue-identicon/src/detectPackage.ts
@@ -5,7 +5,7 @@
 
 import { detectPackage } from '@polkadot/util';
 
-import others from './detectOther';
-import { packageInfo } from './packageInfo';
+import others from './detectOther.js';
+import { packageInfo } from './packageInfo.js';
 
 detectPackage(packageInfo, null, others);
diff --git a/packages/vue-identicon/src/icons/index.ts b/packages/vue-identicon/src/icons/index.ts
index 94cb29c2..3213965e 100644
--- a/packages/vue-identicon/src/icons/index.ts
+++ b/packages/vue-identicon/src/icons/index.ts
@@ -1,7 +1,7 @@
 // Copyright 2017-2023 @polkadot/reactnative-identicon authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-export * from './Beachball';
-export * from './Empty';
-export * from './Jdenticon';
-export * from './Polkadot';
+export * from './Beachball.js';
+export * from './Empty.js';
+export * from './Jdenticon.js';
+export * from './Polkadot.js';
diff --git a/packages/vue-identicon/src/index.ts b/packages/vue-identicon/src/index.ts
index 915e2a10..2086f90c 100644
--- a/packages/vue-identicon/src/index.ts
+++ b/packages/vue-identicon/src/index.ts
@@ -1,10 +1,10 @@
 // Copyright 2017-2023 @polkadot/vue-identicon authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import './detectPackage';
+import './detectPackage.js';
 
-import { Identicon } from './bundle';
+import { Identicon } from './bundle.js';
 
-export * from './bundle';
+export * from './bundle.js';
 
 export default Identicon;
diff --git a/yarn.lock b/yarn.lock
index eb77da61..6e55bba5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1397,9 +1397,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@polkadot/dev@npm:^0.70.4":
-  version: 0.70.4
-  resolution: "@polkadot/dev@npm:0.70.4"
+"@polkadot/dev@npm:^0.71.1":
+  version: 0.71.1
+  resolution: "@polkadot/dev@npm:0.71.1"
   dependencies:
     "@eslint/js": ^8.35.0
     "@rollup/plugin-alias": ^4.0.3
@@ -1409,8 +1409,8 @@ __metadata:
     "@rollup/plugin-json": ^6.0.0
     "@rollup/plugin-node-resolve": ^15.0.1
     "@rushstack/eslint-patch": ^1.2.0
-    "@typescript-eslint/eslint-plugin": ^5.54.0
-    "@typescript-eslint/parser": ^5.54.0
+    "@typescript-eslint/eslint-plugin": ^5.54.1
+    "@typescript-eslint/parser": ^5.54.1
     eslint: ^8.35.0
     eslint-config-standard: ^17.0.0
     eslint-import-resolver-node: ^0.3.7
@@ -1464,7 +1464,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: 446bc7a0637a91d30829d5fccb2b6c74d9f54bc7e67290c11cfca56a0f528a33b5ee1b066ed9bde6b669d866c89e3895ff7a44b79210bb549dd406afccc0ca9d
+  checksum: 18505f604cd99a6fa858fe0dd6f9f09f6ae46bc3428616dd8df6f4533b4854de1c517f1c0ede5f7c11a881ffea2175ffd48c8526ea16f7da3320595d0ae67cf8
   languageName: node
   linkType: hard
 
@@ -2651,13 +2651,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@typescript-eslint/eslint-plugin@npm:^5.54.0":
-  version: 5.54.0
-  resolution: "@typescript-eslint/eslint-plugin@npm:5.54.0"
+"@typescript-eslint/eslint-plugin@npm:^5.54.1":
+  version: 5.54.1
+  resolution: "@typescript-eslint/eslint-plugin@npm:5.54.1"
   dependencies:
-    "@typescript-eslint/scope-manager": 5.54.0
-    "@typescript-eslint/type-utils": 5.54.0
-    "@typescript-eslint/utils": 5.54.0
+    "@typescript-eslint/scope-manager": 5.54.1
+    "@typescript-eslint/type-utils": 5.54.1
+    "@typescript-eslint/utils": 5.54.1
     debug: ^4.3.4
     grapheme-splitter: ^1.0.4
     ignore: ^5.2.0
@@ -2671,7 +2671,7 @@ __metadata:
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: 4fdb520b8e0f6b9eb878206ddfa4212522f170d1507d7aba8a975159a198efa37af6d2d17982dd560317452d0748f2e2da5dd7347b172bc4446d1c5562ce2e94
+  checksum: 76476c08ca0142a9bf6e2381f5cd1c037d86fbafa9c0dded4a97bd3b23b5962dd2c3943bade11b21d674195674f0e36dbf80faa15a1906f5a2ca1f699baf1dd5
   languageName: node
   linkType: hard
 
@@ -2686,20 +2686,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@typescript-eslint/parser@npm:^5.54.0":
-  version: 5.54.0
-  resolution: "@typescript-eslint/parser@npm:5.54.0"
+"@typescript-eslint/parser@npm:^5.54.1":
+  version: 5.54.1
+  resolution: "@typescript-eslint/parser@npm:5.54.1"
   dependencies:
-    "@typescript-eslint/scope-manager": 5.54.0
-    "@typescript-eslint/types": 5.54.0
-    "@typescript-eslint/typescript-estree": 5.54.0
+    "@typescript-eslint/scope-manager": 5.54.1
+    "@typescript-eslint/types": 5.54.1
+    "@typescript-eslint/typescript-estree": 5.54.1
     debug: ^4.3.4
   peerDependencies:
     eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: 368d6dd85be42c3f518f0ddeed23ecd1d3c9484a77ae291ee4e08e2703ed379bed613bde014cd8ab2a3e06e85dd8aef201112ae5e3d2a07deba29ae80bb1fe06
+  checksum: f466513d306ca926b97c2cec1eebaf2cd15d45bd5633a4358f23ba9a4de1b0ec4630b1c20abc395943934ed1d2ef65f545fd6737c317a7abe579612101e8a83f
   languageName: node
   linkType: hard
 
@@ -2713,22 +2713,22 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@typescript-eslint/scope-manager@npm:5.54.0":
-  version: 5.54.0
-  resolution: "@typescript-eslint/scope-manager@npm:5.54.0"
+"@typescript-eslint/scope-manager@npm:5.54.1":
+  version: 5.54.1
+  resolution: "@typescript-eslint/scope-manager@npm:5.54.1"
   dependencies:
-    "@typescript-eslint/types": 5.54.0
-    "@typescript-eslint/visitor-keys": 5.54.0
-  checksum: e50f12396de0ddb94aab119bdd5f4769b80dd2c273e137fd25e5811e25114d7a3d3668cdb3c454aca9537e940744881d62a1fed2ec86f07f60533dc7382ae15c
+    "@typescript-eslint/types": 5.54.1
+    "@typescript-eslint/visitor-keys": 5.54.1
+  checksum: 9add24cf3a7852634ad0680a827646860ac4698a6ac8aae31e8b781e29f59e84b51f0cdaacffd0747811012647f01b51969d988da9b302ead374ceebffbe204b
   languageName: node
   linkType: hard
 
-"@typescript-eslint/type-utils@npm:5.54.0":
-  version: 5.54.0
-  resolution: "@typescript-eslint/type-utils@npm:5.54.0"
+"@typescript-eslint/type-utils@npm:5.54.1":
+  version: 5.54.1
+  resolution: "@typescript-eslint/type-utils@npm:5.54.1"
   dependencies:
-    "@typescript-eslint/typescript-estree": 5.54.0
-    "@typescript-eslint/utils": 5.54.0
+    "@typescript-eslint/typescript-estree": 5.54.1
+    "@typescript-eslint/utils": 5.54.1
     debug: ^4.3.4
     tsutils: ^3.21.0
   peerDependencies:
@@ -2736,7 +2736,7 @@ __metadata:
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: 9cb5b52c7277bdf74b9ea3282fc40f41fda90ea4b1d33039044476e43cf05a766b1294e7d45f429594f2776828f7d17729cfa4ea027315f3df883e748ba57514
+  checksum: 0073838b782b7f4619775be124ca6643fec43a2d56043eaf3ceb100960a5193f14ac747b28ce17a5c9ac643fdee8abda82a7d905c81521358de7b27a2dcbc9af
   languageName: node
   linkType: hard
 
@@ -2754,10 +2754,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@typescript-eslint/types@npm:5.54.0":
-  version: 5.54.0
-  resolution: "@typescript-eslint/types@npm:5.54.0"
-  checksum: 0f66b1b93078f3afea6dfcd3d4e2f0abea4f60cd0c613c2cf13f85098e5bf786185484c9846ed80b6c4272de2c31a70c5a8aacb91314cf1b6da7dcb8855cb7ac
+"@typescript-eslint/types@npm:5.54.1":
+  version: 5.54.1
+  resolution: "@typescript-eslint/types@npm:5.54.1"
+  checksum: 84a8f725cfa10646af389659e09c510c38d82c65960c7b613f844a264acc0e197471cba03f3e8f4b6411bc35dca28922c8352a7bd44621411c73fd6dd4096da2
   languageName: node
   linkType: hard
 
@@ -2779,12 +2779,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@typescript-eslint/typescript-estree@npm:5.54.0, @typescript-eslint/typescript-estree@npm:^5.13.0":
-  version: 5.54.0
-  resolution: "@typescript-eslint/typescript-estree@npm:5.54.0"
+"@typescript-eslint/typescript-estree@npm:5.54.1, @typescript-eslint/typescript-estree@npm:^5.13.0":
+  version: 5.54.1
+  resolution: "@typescript-eslint/typescript-estree@npm:5.54.1"
   dependencies:
-    "@typescript-eslint/types": 5.54.0
-    "@typescript-eslint/visitor-keys": 5.54.0
+    "@typescript-eslint/types": 5.54.1
+    "@typescript-eslint/visitor-keys": 5.54.1
     debug: ^4.3.4
     globby: ^11.1.0
     is-glob: ^4.0.3
@@ -2793,7 +2793,7 @@ __metadata:
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: 377c75c34c4f95b7ab6218c1d96a6db3ea6ed6727711b6a09354582fe0157861dc1b6fb9e3f7113cd09741f713735d59d5ab5845457f5733a4ebad7470bf600a
+  checksum: ea42bdb4832fa96fa1121237c9b664ac4506e2836646651e08a8542c8601d78af6c288779707f893ca4c884221829bb7d7b4b43c4a9c3ed959519266d03a139b
   languageName: node
   linkType: hard
 
@@ -2833,21 +2833,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@typescript-eslint/utils@npm:5.54.0, @typescript-eslint/utils@npm:^5.10.0":
-  version: 5.54.0
-  resolution: "@typescript-eslint/utils@npm:5.54.0"
+"@typescript-eslint/utils@npm:5.54.1, @typescript-eslint/utils@npm:^5.10.0":
+  version: 5.54.1
+  resolution: "@typescript-eslint/utils@npm:5.54.1"
   dependencies:
     "@types/json-schema": ^7.0.9
     "@types/semver": ^7.3.12
-    "@typescript-eslint/scope-manager": 5.54.0
-    "@typescript-eslint/types": 5.54.0
-    "@typescript-eslint/typescript-estree": 5.54.0
+    "@typescript-eslint/scope-manager": 5.54.1
+    "@typescript-eslint/types": 5.54.1
+    "@typescript-eslint/typescript-estree": 5.54.1
     eslint-scope: ^5.1.1
     eslint-utils: ^3.0.0
     semver: ^7.3.7
   peerDependencies:
     eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
-  checksum: b8f344fc2961c7af530b93e53d5a17b5084cdf550b381082e3fb7f349ef16e718d9eebde1b9fc2d8fc4ecf8d60d334b004359977247554265c1afc87323bed37
+  checksum: 8f428ea4d338ce85d55fd0c9ae2b217b323f29f51b7c9f8077fef7001ca21d28b032c5e5165b67ae6057aef69edb0e7a164c3c483703be6f3e4e574248bbc399
   languageName: node
   linkType: hard
 
@@ -2871,13 +2871,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@typescript-eslint/visitor-keys@npm:5.54.0":
-  version: 5.54.0
-  resolution: "@typescript-eslint/visitor-keys@npm:5.54.0"
+"@typescript-eslint/visitor-keys@npm:5.54.1":
+  version: 5.54.1
+  resolution: "@typescript-eslint/visitor-keys@npm:5.54.1"
   dependencies:
-    "@typescript-eslint/types": 5.54.0
+    "@typescript-eslint/types": 5.54.1
     eslint-visitor-keys: ^3.3.0
-  checksum: 17fc323c09e6272b603cdaec30a99916600fbbb737e1fbc8c1727a487753b4363cea112277fa43e0562bff34bdd1de9ad73ff9433118b1fd469b112fad0313ca
+  checksum: 3a691abd2a43b86a0c41526d14a2afcc93a2e0512b5f8b9ec43f6029c493870808036eae5ee4fc655d26e1999017c4a4dffb241f47c36c2a1238ec9fbd08719c
   languageName: node
   linkType: hard
 
@@ -11126,7 +11126,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "root-workspace-0b6124@workspace:."
   dependencies:
-    "@polkadot/dev": ^0.70.4
+    "@polkadot/dev": ^0.71.1
     "@polkadot/x-bundle": ^11.0.1
     "@types/node": ^18.14.6
     react: ^18.2.0