diff --git a/package.json b/package.json
index 64991cf4..a8354ff1 100644
--- a/package.json
+++ b/package.json
@@ -32,13 +32,13 @@
     "lint": "polkadot-dev-run-lint",
     "postinstall": "polkadot-dev-yarn-only",
     "start": "yarn watch",
-    "test": "EXTENSION_PREFIX='test' polkadot-dev-run-test --env jest -- --detectOpenHandles",
-    "test:one": "EXTENSION_PREFIX='test' polkadot-dev-run-test --env jest -- --detectOpenHandles",
+    "test": "EXTENSION_PREFIX='test' polkadot-dev-run-test --env jest",
+    "test:one": "EXTENSION_PREFIX='test' polkadot-dev-run-test --env jest",
     "watch": "cd packages/extension && yarn polkadot-exec-webpack --config webpack.watch.cjs --mode development --watch"
   },
   "devDependencies": {
     "@babel/core": "^7.20.12",
-    "@polkadot/dev": "^0.68.38",
+    "@polkadot/dev": "^0.68.41",
     "@types/jest": "^29.4.0",
     "i18next-scanner": "^4.1.1",
     "sinon-chrome": "^3.0.1"
diff --git a/packages/extension-base/package.json b/packages/extension-base/package.json
index c721a2bc..0a8e0f47 100644
--- a/packages/extension-base/package.json
+++ b/packages/extension-base/package.json
@@ -30,8 +30,8 @@
     "@polkadot/phishing": "^0.19.3",
     "@polkadot/rpc-provider": "^9.14.2",
     "@polkadot/types": "^9.14.2",
-    "@polkadot/ui-keyring": "^2.11.3",
-    "@polkadot/ui-settings": "^2.11.3",
+    "@polkadot/ui-keyring": "^2.12.1",
+    "@polkadot/ui-settings": "^2.12.1",
     "@polkadot/util": "^10.4.2",
     "@polkadot/util-crypto": "^10.4.2",
     "eventemitter3": "^5.0.0",
diff --git a/packages/extension-ui/package.json b/packages/extension-ui/package.json
index 576ce0bd..a3583ec9 100644
--- a/packages/extension-ui/package.json
+++ b/packages/extension-ui/package.json
@@ -29,12 +29,12 @@
     "@polkadot/hw-ledger": "^10.4.2",
     "@polkadot/keyring": "^10.4.2",
     "@polkadot/networks": "^10.4.2",
-    "@polkadot/react-identicon": "^2.11.3",
-    "@polkadot/react-qr": "^2.11.3",
+    "@polkadot/react-identicon": "^2.12.1",
+    "@polkadot/react-qr": "^2.12.1",
     "@polkadot/types": "^9.14.2",
     "@polkadot/types-augment": "^9.14.2",
-    "@polkadot/ui-keyring": "^2.11.3",
-    "@polkadot/ui-settings": "^2.11.3",
+    "@polkadot/ui-keyring": "^2.12.1",
+    "@polkadot/ui-settings": "^2.12.1",
     "@polkadot/util": "^10.4.2",
     "@polkadot/util-crypto": "^10.4.2",
     "file-saver": "^2.0.5",
diff --git a/packages/extension-ui/src/Popup/Accounts/Account.spec.tsx b/packages/extension-ui/src/Popup/Accounts/Account.spec.tsx
index 6c9eab27..6d76374d 100644
--- a/packages/extension-ui/src/Popup/Accounts/Account.spec.tsx
+++ b/packages/extension-ui/src/Popup/Accounts/Account.spec.tsx
@@ -3,8 +3,10 @@
 
 import '@polkadot/extension-mocks/chrome';
 
+import type { ReactWrapper } from 'enzyme';
+
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
-import { configure, mount, ReactWrapper } from 'enzyme';
+import enzyme from 'enzyme';
 import React from 'react';
 import { act } from 'react-dom/test-utils';
 import { MemoryRouter } from 'react-router';
@@ -15,6 +17,8 @@ import * as messaging from '../../messaging';
 import { flushAllPromises } from '../../testHelpers';
 import Account from './Account';
 
+const { configure, mount } = enzyme;
+
 // NOTE Required for spyOn when using @swc/jest
 // https://github.com/swc-project/swc/issues/3843
 jest.mock('../../messaging', (): Record<string, unknown> => ({
diff --git a/packages/extension-ui/src/Popup/Accounts/Account.tsx b/packages/extension-ui/src/Popup/Accounts/Account.tsx
index 88f24251..37fafd96 100644
--- a/packages/extension-ui/src/Popup/Accounts/Account.tsx
+++ b/packages/extension-ui/src/Popup/Accounts/Account.tsx
@@ -4,7 +4,6 @@
 import type { AccountJson } from '@polkadot/extension-base/background/types';
 
 import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
-import styled from 'styled-components';
 
 import { canDerive } from '@polkadot/extension-base/utils';
 import { ThemeProps } from '@polkadot/extension-ui/types';
@@ -14,6 +13,7 @@ import useGenesisHashOptions from '../../hooks/useGenesisHashOptions';
 import useTranslation from '../../hooks/useTranslation';
 import { editAccount, tieAccount } from '../../messaging';
 import { Name } from '../../partials';
+import { styled } from '../../styled';
 
 interface Props extends AccountJson {
   className?: string;
diff --git a/packages/extension-ui/src/Popup/Accounts/AccountsTree.tsx b/packages/extension-ui/src/Popup/Accounts/AccountsTree.tsx
index 2d02f698..9fdb5367 100644
--- a/packages/extension-ui/src/Popup/Accounts/AccountsTree.tsx
+++ b/packages/extension-ui/src/Popup/Accounts/AccountsTree.tsx
@@ -4,8 +4,8 @@
 import type { AccountWithChildren } from '@polkadot/extension-base/background/types';
 
 import React from 'react';
-import styled from 'styled-components';
 
+import { styled } from '../../styled';
 import Account from './Account';
 
 interface Props extends AccountWithChildren {
diff --git a/packages/extension-ui/src/Popup/Accounts/AddAccount.tsx b/packages/extension-ui/src/Popup/Accounts/AddAccount.tsx
index f7618052..9f978227 100644
--- a/packages/extension-ui/src/Popup/Accounts/AddAccount.tsx
+++ b/packages/extension-ui/src/Popup/Accounts/AddAccount.tsx
@@ -4,11 +4,11 @@
 import type { ThemeProps } from '../../types';
 
 import React, { useCallback, useContext } from 'react';
-import styled from 'styled-components';
 
 import { ActionContext } from '../../components';
 import useTranslation from '../../hooks/useTranslation';
 import Header from '../../partials/Header';
+import { styled } from '../../styled';
 import AddAccountImage from './AddAccountImage';
 
 interface Props extends ThemeProps {
diff --git a/packages/extension-ui/src/Popup/Accounts/AddAccountImage.tsx b/packages/extension-ui/src/Popup/Accounts/AddAccountImage.tsx
index 323fd76f..a83ab0b9 100644
--- a/packages/extension-ui/src/Popup/Accounts/AddAccountImage.tsx
+++ b/packages/extension-ui/src/Popup/Accounts/AddAccountImage.tsx
@@ -10,7 +10,8 @@
 import type { ThemeProps } from '../../types';
 
 import React from 'react';
-import styled from 'styled-components';
+
+import { styled } from '../../styled';
 
 interface Props extends ThemeProps {
   className?: string;
diff --git a/packages/extension-ui/src/Popup/Accounts/index.tsx b/packages/extension-ui/src/Popup/Accounts/index.tsx
index 28e15585..1a42d00a 100644
--- a/packages/extension-ui/src/Popup/Accounts/index.tsx
+++ b/packages/extension-ui/src/Popup/Accounts/index.tsx
@@ -4,7 +4,6 @@
 import type { ThemeProps } from '../../types';
 
 import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
-import styled from 'styled-components';
 
 import { AccountWithChildren } from '@polkadot/extension-base/background/types';
 import getNetworkMap from '@polkadot/extension-ui/util/getNetworkMap';
@@ -12,6 +11,7 @@ import getNetworkMap from '@polkadot/extension-ui/util/getNetworkMap';
 import { AccountContext } from '../../components';
 import useTranslation from '../../hooks/useTranslation';
 import { Header } from '../../partials';
+import { styled } from '../../styled';
 import AccountsTree from './AccountsTree';
 import AddAccount from './AddAccount';
 
diff --git a/packages/extension-ui/src/Popup/AuthManagement/AccountManagement.tsx b/packages/extension-ui/src/Popup/AuthManagement/AccountManagement.tsx
index 39f67502..fddfa144 100644
--- a/packages/extension-ui/src/Popup/AuthManagement/AccountManagement.tsx
+++ b/packages/extension-ui/src/Popup/AuthManagement/AccountManagement.tsx
@@ -5,12 +5,12 @@ import type { ThemeProps } from '../../types';
 
 import React, { useCallback, useContext, useEffect } from 'react';
 import { useParams } from 'react-router';
-import styled from 'styled-components';
 
 import { AccountContext, ActionContext, Button } from '../../components';
 import useTranslation from '../../hooks/useTranslation';
 import { getAuthList, updateAuthorization } from '../../messaging';
 import { AccountSelection, Header } from '../../partials';
+import { styled } from '../../styled';
 
 interface Props extends ThemeProps {
   className?: string;
diff --git a/packages/extension-ui/src/Popup/AuthManagement/WebsiteEntry.tsx b/packages/extension-ui/src/Popup/AuthManagement/WebsiteEntry.tsx
index 6f50afd8..6b95fa21 100644
--- a/packages/extension-ui/src/Popup/AuthManagement/WebsiteEntry.tsx
+++ b/packages/extension-ui/src/Popup/AuthManagement/WebsiteEntry.tsx
@@ -5,12 +5,13 @@ import type { ThemeProps } from '../../types';
 
 import React, { useCallback } from 'react';
 import { Link } from 'react-router-dom';
-import styled from 'styled-components';
 
 import { AuthUrlInfo } from '@polkadot/extension-base/background/handlers/State';
 import { RemoveAuth } from '@polkadot/extension-ui/components';
 import { useTranslation } from '@polkadot/extension-ui/components/translate';
 
+import { styled } from '../../styled';
+
 interface Props extends ThemeProps {
   className?: string;
   info: AuthUrlInfo;
diff --git a/packages/extension-ui/src/Popup/AuthManagement/index.tsx b/packages/extension-ui/src/Popup/AuthManagement/index.tsx
index 3160281b..b850c143 100644
--- a/packages/extension-ui/src/Popup/AuthManagement/index.tsx
+++ b/packages/extension-ui/src/Popup/AuthManagement/index.tsx
@@ -4,7 +4,6 @@
 import type { ThemeProps } from '../../types';
 
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import styled from 'styled-components';
 
 import { AuthUrlInfo, AuthUrls } from '@polkadot/extension-base/background/handlers/State';
 import { InputFilter } from '@polkadot/extension-ui/components';
@@ -12,6 +11,7 @@ import { InputFilter } from '@polkadot/extension-ui/components';
 import useTranslation from '../../hooks/useTranslation';
 import { getAuthList, removeAuthorization } from '../../messaging';
 import { Header } from '../../partials';
+import { styled } from '../../styled';
 import WebsiteEntry from './WebsiteEntry';
 
 interface Props extends ThemeProps {
diff --git a/packages/extension-ui/src/Popup/Authorize/Authorize.spec.tsx b/packages/extension-ui/src/Popup/Authorize/Authorize.spec.tsx
index 64dc6706..4d3c76fb 100644
--- a/packages/extension-ui/src/Popup/Authorize/Authorize.spec.tsx
+++ b/packages/extension-ui/src/Popup/Authorize/Authorize.spec.tsx
@@ -3,10 +3,11 @@
 
 import '@polkadot/extension-mocks/chrome';
 
+import type { ReactWrapper } from 'enzyme';
 import type { AccountJson, AuthorizeRequest } from '@polkadot/extension-base/background/types';
 
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
-import { configure, mount, ReactWrapper } from 'enzyme';
+import enzyme from 'enzyme';
 import React from 'react';
 import { ThemeProvider } from 'styled-components';
 
@@ -17,6 +18,8 @@ import Account from '../Accounts/Account';
 import Request from './Request';
 import Authorize from '.';
 
+const { configure, mount } = enzyme;
+
 // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment,@typescript-eslint/no-unsafe-call
 configure({ adapter: new Adapter() });
 
diff --git a/packages/extension-ui/src/Popup/Authorize/NoAccount.tsx b/packages/extension-ui/src/Popup/Authorize/NoAccount.tsx
index 7955560b..49b566a0 100644
--- a/packages/extension-ui/src/Popup/Authorize/NoAccount.tsx
+++ b/packages/extension-ui/src/Popup/Authorize/NoAccount.tsx
@@ -6,11 +6,12 @@ import type { ThemeProps } from '../../types';
 import { t } from 'i18next';
 import React, { useCallback } from 'react';
 import { Trans } from 'react-i18next';
-import styled from 'styled-components';
 
 import { Button, Warning } from '@polkadot/extension-ui/components';
 import { deleteAuthRequest } from '@polkadot/extension-ui/messaging';
 
+import { styled } from '../../styled';
+
 interface Props extends ThemeProps {
   authId: string;
   className?: string;
diff --git a/packages/extension-ui/src/Popup/Authorize/Request.tsx b/packages/extension-ui/src/Popup/Authorize/Request.tsx
index 8a2cf803..36e28b9e 100644
--- a/packages/extension-ui/src/Popup/Authorize/Request.tsx
+++ b/packages/extension-ui/src/Popup/Authorize/Request.tsx
@@ -5,12 +5,12 @@ import type { RequestAuthorizeTab } from '@polkadot/extension-base/background/ty
 import type { ThemeProps } from '../../types';
 
 import React, { useCallback, useContext, useEffect } from 'react';
-import styled from 'styled-components';
 
 import { AccountContext, ActionBar, ActionContext, Button, Link } from '../../components';
 import useTranslation from '../../hooks/useTranslation';
 import { approveAuthRequest, deleteAuthRequest } from '../../messaging';
 import { AccountSelection } from '../../partials';
+import { styled } from '../../styled';
 import NoAccount from './NoAccount';
 
 interface Props extends ThemeProps {
diff --git a/packages/extension-ui/src/Popup/Authorize/index.tsx b/packages/extension-ui/src/Popup/Authorize/index.tsx
index e206659c..9866bf7c 100644
--- a/packages/extension-ui/src/Popup/Authorize/index.tsx
+++ b/packages/extension-ui/src/Popup/Authorize/index.tsx
@@ -4,11 +4,11 @@
 import type { ThemeProps } from '../../types';
 
 import React, { useContext } from 'react';
-import styled from 'styled-components';
 
 import { AuthorizeReqContext } from '../../components';
 import useTranslation from '../../hooks/useTranslation';
 import { Header } from '../../partials';
+import { styled } from '../../styled';
 import Request from './Request';
 
 interface Props extends ThemeProps {
diff --git a/packages/extension-ui/src/Popup/CreateAccount/CreateAccount.spec.tsx b/packages/extension-ui/src/Popup/CreateAccount/CreateAccount.spec.tsx
index c0ab0b17..6b5e5e66 100644
--- a/packages/extension-ui/src/Popup/CreateAccount/CreateAccount.spec.tsx
+++ b/packages/extension-ui/src/Popup/CreateAccount/CreateAccount.spec.tsx
@@ -3,8 +3,10 @@
 
 import '@polkadot/extension-mocks/chrome';
 
+import type { ReactWrapper } from 'enzyme';
+
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
-import { configure, mount, ReactWrapper } from 'enzyme';
+import enzyme from 'enzyme';
 import React from 'react';
 import { act } from 'react-dom/test-utils';
 import { ThemeProvider } from 'styled-components';
@@ -15,6 +17,8 @@ import { Header } from '../../partials';
 import { flushAllPromises } from '../../testHelpers';
 import CreateAccount from '.';
 
+const { configure, mount } = enzyme;
+
 // NOTE Required for spyOn when using @swc/jest
 // https://github.com/swc-project/swc/issues/3843
 jest.mock('../../messaging', (): Record<string, unknown> => ({
diff --git a/packages/extension-ui/src/Popup/CreateAccount/index.tsx b/packages/extension-ui/src/Popup/CreateAccount/index.tsx
index fb486fdb..9f20432f 100644
--- a/packages/extension-ui/src/Popup/CreateAccount/index.tsx
+++ b/packages/extension-ui/src/Popup/CreateAccount/index.tsx
@@ -2,7 +2,6 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import React, { useCallback, useContext, useEffect, useState } from 'react';
-import styled from 'styled-components';
 
 import { ActionContext, Address, Dropdown, Loading } from '../../components';
 import AccountNamePasswordCreation from '../../components/AccountNamePasswordCreation';
@@ -11,6 +10,7 @@ import useMetadata from '../../hooks/useMetadata';
 import useTranslation from '../../hooks/useTranslation';
 import { createAccountSuri, createSeed, validateSeed } from '../../messaging';
 import { HeaderWithSteps } from '../../partials';
+import { styled } from '../../styled';
 import { DEFAULT_TYPE } from '../../util/defaultType';
 import Mnemonic from './Mnemonic';
 
diff --git a/packages/extension-ui/src/Popup/Derive/AddressDropdown.tsx b/packages/extension-ui/src/Popup/Derive/AddressDropdown.tsx
index cecb4572..7d6d06b1 100644
--- a/packages/extension-ui/src/Popup/Derive/AddressDropdown.tsx
+++ b/packages/extension-ui/src/Popup/Derive/AddressDropdown.tsx
@@ -4,11 +4,11 @@
 import type { ThemeProps } from '../../types';
 
 import React, { useCallback, useRef, useState } from 'react';
-import styled from 'styled-components';
 
 import arrow from '../../assets/arrow-down.svg';
 import { Address } from '../../components';
 import useOutsideClick from '../../hooks/useOutsideClick';
+import { styled } from '../../styled';
 
 interface Props {
   allAddresses: [string, string | null][];
diff --git a/packages/extension-ui/src/Popup/Derive/DerivationPath.tsx b/packages/extension-ui/src/Popup/Derive/DerivationPath.tsx
index 77ed9130..07690281 100644
--- a/packages/extension-ui/src/Popup/Derive/DerivationPath.tsx
+++ b/packages/extension-ui/src/Popup/Derive/DerivationPath.tsx
@@ -6,10 +6,10 @@ import type { ThemeProps } from '../../types';
 import { faLock, faLockOpen } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React, { useCallback, useEffect, useState } from 'react';
-import styled from 'styled-components';
 
 import { Button, InputWithLabel } from '../../components';
 import useTranslation from '../../hooks/useTranslation';
+import { styled } from '../../styled';
 
 interface Props extends ThemeProps{
   className?: string;
diff --git a/packages/extension-ui/src/Popup/Derive/Derive.spec.tsx b/packages/extension-ui/src/Popup/Derive/Derive.spec.tsx
index 6edb7421..396f3d94 100644
--- a/packages/extension-ui/src/Popup/Derive/Derive.spec.tsx
+++ b/packages/extension-ui/src/Popup/Derive/Derive.spec.tsx
@@ -3,10 +3,11 @@
 
 import '@polkadot/extension-mocks/chrome';
 
+import type { ReactWrapper } from 'enzyme';
 import type { AccountJson, ResponseDeriveValidate } from '@polkadot/extension-base/background/types';
 
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
-import { configure, mount, ReactWrapper } from 'enzyme';
+import enzyme from 'enzyme';
 import React from 'react';
 import { act } from 'react-dom/test-utils';
 import { MemoryRouter, Route } from 'react-router';
@@ -19,6 +20,8 @@ import { buildHierarchy } from '../../util/buildHierarchy';
 import AddressDropdown from './AddressDropdown';
 import Derive from '.';
 
+const { configure, mount } = enzyme;
+
 // NOTE Required for spyOn when using @swc/jest
 // https://github.com/swc-project/swc/issues/3843
 jest.mock('../../messaging', (): Record<string, unknown> => ({
diff --git a/packages/extension-ui/src/Popup/Export.spec.tsx b/packages/extension-ui/src/Popup/Export.spec.tsx
index ca4f8c9a..25bffdd8 100644
--- a/packages/extension-ui/src/Popup/Export.spec.tsx
+++ b/packages/extension-ui/src/Popup/Export.spec.tsx
@@ -3,10 +3,11 @@
 
 import '@polkadot/extension-mocks/chrome';
 
+import type { ReactWrapper } from 'enzyme';
 import type { KeyringPair$Json } from '@polkadot/keyring/types';
 
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
-import { configure, mount, ReactWrapper } from 'enzyme';
+import enzyme from 'enzyme';
 import React from 'react';
 import { act } from 'react-dom/test-utils';
 import { MemoryRouter, Route } from 'react-router';
@@ -17,6 +18,8 @@ import * as messaging from '../messaging';
 import { flushAllPromises } from '../testHelpers';
 import Export from './Export';
 
+const { configure, mount } = enzyme;
+
 // NOTE Required for spyOn when using @swc/jest
 // https://github.com/swc-project/swc/issues/3843
 jest.mock('../messaging', (): Record<string, unknown> => ({
diff --git a/packages/extension-ui/src/Popup/Export.tsx b/packages/extension-ui/src/Popup/Export.tsx
index 8ad4d757..81f05e1d 100644
--- a/packages/extension-ui/src/Popup/Export.tsx
+++ b/packages/extension-ui/src/Popup/Export.tsx
@@ -6,12 +6,12 @@ import type { ThemeProps } from '../types';
 import { saveAs } from 'file-saver';
 import React, { useCallback, useContext, useState } from 'react';
 import { RouteComponentProps, withRouter } from 'react-router';
-import styled from 'styled-components';
 
 import { ActionBar, ActionContext, ActionText, Address, Button, InputWithLabel, Warning } from '../components';
 import useTranslation from '../hooks/useTranslation';
 import { exportAccount } from '../messaging';
 import { Header } from '../partials';
+import { styled } from '../styled';
 
 const MIN_LENGTH = 6;
 
diff --git a/packages/extension-ui/src/Popup/ExportAll.tsx b/packages/extension-ui/src/Popup/ExportAll.tsx
index 5327ac3c..26a03d3f 100644
--- a/packages/extension-ui/src/Popup/ExportAll.tsx
+++ b/packages/extension-ui/src/Popup/ExportAll.tsx
@@ -6,12 +6,12 @@ import type { ThemeProps } from '../types';
 import { saveAs } from 'file-saver';
 import React, { useCallback, useContext, useState } from 'react';
 import { RouteComponentProps, withRouter } from 'react-router';
-import styled from 'styled-components';
 
 import { AccountContext, ActionBar, ActionContext, ActionText, Button, InputWithLabel, Warning } from '../components';
 import useTranslation from '../hooks/useTranslation';
 import { exportAccounts } from '../messaging';
 import { Header } from '../partials';
+import { styled } from '../styled';
 
 const MIN_LENGTH = 6;
 
diff --git a/packages/extension-ui/src/Popup/Forget.tsx b/packages/extension-ui/src/Popup/Forget.tsx
index 23b91002..42437995 100644
--- a/packages/extension-ui/src/Popup/Forget.tsx
+++ b/packages/extension-ui/src/Popup/Forget.tsx
@@ -5,12 +5,12 @@ import type { ThemeProps } from '../types';
 
 import React, { useCallback, useContext, useState } from 'react';
 import { RouteComponentProps, withRouter } from 'react-router';
-import styled from 'styled-components';
 
 import { ActionBar, ActionContext, ActionText, Address, Button, Warning } from '../components';
 import useTranslation from '../hooks/useTranslation';
 import { forgetAccount } from '../messaging';
 import { Header } from '../partials';
+import { styled } from '../styled';
 
 interface Props extends RouteComponentProps<{ address: string }>, ThemeProps {
   className?: string;
diff --git a/packages/extension-ui/src/Popup/ImportLedger.tsx b/packages/extension-ui/src/Popup/ImportLedger.tsx
index 01130cad..b56d0804 100644
--- a/packages/extension-ui/src/Popup/ImportLedger.tsx
+++ b/packages/extension-ui/src/Popup/ImportLedger.tsx
@@ -4,7 +4,6 @@
 import { faSync } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';
-import styled from 'styled-components';
 
 import settings from '@polkadot/ui-settings';
 
@@ -13,6 +12,7 @@ import { useLedger } from '../hooks/useLedger';
 import useTranslation from '../hooks/useTranslation';
 import { createAccountHardware } from '../messaging';
 import { Header, Name } from '../partials';
+import { styled } from '../styled';
 import { ThemeProps } from '../types';
 import ledgerChains from '../util/legerChains';
 
diff --git a/packages/extension-ui/src/Popup/ImportQr.spec.tsx b/packages/extension-ui/src/Popup/ImportQr.spec.tsx
index 3b73b7bc..9c2deeda 100644
--- a/packages/extension-ui/src/Popup/ImportQr.spec.tsx
+++ b/packages/extension-ui/src/Popup/ImportQr.spec.tsx
@@ -3,8 +3,10 @@
 
 import '@polkadot/extension-mocks/chrome';
 
+import type { ReactWrapper } from 'enzyme';
+
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
-import { configure, mount, ReactWrapper } from 'enzyme';
+import enzyme from 'enzyme';
 import React from 'react';
 import { act } from 'react-dom/test-utils';
 import { MemoryRouter } from 'react-router';
@@ -14,6 +16,8 @@ import * as messaging from '../messaging';
 import { flushAllPromises } from '../testHelpers';
 import ImportQr from './ImportQr';
 
+const { configure, mount } = enzyme;
+
 const mockedAccount = {
   content: '12bxf6QJS5hMJgwbJMDjFot1sq93EvgQwyuPWENr9SzJfxtN',
   expectedBannerChain: 'Polkadot',
diff --git a/packages/extension-ui/src/Popup/ImportSeed/ImportSeed.spec.tsx b/packages/extension-ui/src/Popup/ImportSeed/ImportSeed.spec.tsx
index 50357497..db1203e5 100644
--- a/packages/extension-ui/src/Popup/ImportSeed/ImportSeed.spec.tsx
+++ b/packages/extension-ui/src/Popup/ImportSeed/ImportSeed.spec.tsx
@@ -3,8 +3,10 @@
 
 import '@polkadot/extension-mocks/chrome';
 
+import type { ReactWrapper } from 'enzyme';
+
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
-import { configure, mount, ReactWrapper } from 'enzyme';
+import enzyme from 'enzyme';
 import React from 'react';
 import { act } from 'react-dom/test-utils';
 import { MemoryRouter } from 'react-router';
@@ -14,6 +16,8 @@ import * as messaging from '../../messaging';
 import { flushAllPromises } from '../../testHelpers';
 import ImportSeed from './';
 
+const { configure, mount } = enzyme;
+
 const account = {
   derivation: '/1',
   expectedAddress: '5GNg7RWeAAJuya4wTxb8aZf19bCWJroKuJNrhk4N3iYHNqTm',
diff --git a/packages/extension-ui/src/Popup/ImportSeed/SeedAndPath.tsx b/packages/extension-ui/src/Popup/ImportSeed/SeedAndPath.tsx
index 5d289ac7..25b354e6 100644
--- a/packages/extension-ui/src/Popup/ImportSeed/SeedAndPath.tsx
+++ b/packages/extension-ui/src/Popup/ImportSeed/SeedAndPath.tsx
@@ -8,7 +8,6 @@ import type { AccountInfo } from '.';
 import { faCaretDown, faCaretRight } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React, { useCallback, useEffect, useState } from 'react';
-import styled from 'styled-components';
 
 import { validateSeed } from '@polkadot/extension-ui/messaging';
 import { objectSpread } from '@polkadot/util';
@@ -16,6 +15,7 @@ import { objectSpread } from '@polkadot/util';
 import { ButtonArea, Dropdown, InputWithLabel, NextStepButton, TextAreaWithLabel, VerticalSpace, Warning } from '../../components';
 import useGenesisHashOptions from '../../hooks/useGenesisHashOptions';
 import useTranslation from '../../hooks/useTranslation';
+import { styled } from '../../styled';
 
 interface Props {
   className?: string;
diff --git a/packages/extension-ui/src/Popup/Metadata/Request.tsx b/packages/extension-ui/src/Popup/Metadata/Request.tsx
index 71903de8..57ba1487 100644
--- a/packages/extension-ui/src/Popup/Metadata/Request.tsx
+++ b/packages/extension-ui/src/Popup/Metadata/Request.tsx
@@ -5,12 +5,12 @@ import type { MetadataDef } from '@polkadot/extension-inject/types';
 import type { ThemeProps } from '../../types';
 
 import React, { useCallback, useContext } from 'react';
-import styled from 'styled-components';
 
 import { ActionBar, ActionContext, Button, Link, Table, Warning } from '../../components';
 import useMetadata from '../../hooks/useMetadata';
 import useTranslation from '../../hooks/useTranslation';
 import { approveMetaRequest, rejectMetaRequest } from '../../messaging';
+import { styled } from '../../styled';
 
 interface Props {
   className?: string;
diff --git a/packages/extension-ui/src/Popup/PhishingDetected.tsx b/packages/extension-ui/src/Popup/PhishingDetected.tsx
index a3f5b0e9..ecb52605 100644
--- a/packages/extension-ui/src/Popup/PhishingDetected.tsx
+++ b/packages/extension-ui/src/Popup/PhishingDetected.tsx
@@ -6,10 +6,10 @@ import type { ThemeProps } from '../types';
 import React from 'react';
 import { Trans } from 'react-i18next';
 import { useParams } from 'react-router';
-import styled from 'styled-components';
 
 import useTranslation from '../hooks/useTranslation';
 import { Header } from '../partials';
+import { styled } from '../styled';
 
 interface Props extends ThemeProps {
   className?: string;
diff --git a/packages/extension-ui/src/Popup/RestoreJson.tsx b/packages/extension-ui/src/Popup/RestoreJson.tsx
index bbb76833..c0f05f1c 100644
--- a/packages/extension-ui/src/Popup/RestoreJson.tsx
+++ b/packages/extension-ui/src/Popup/RestoreJson.tsx
@@ -6,7 +6,6 @@ import type { KeyringPair$Json } from '@polkadot/keyring/types';
 import type { KeyringPairs$Json } from '@polkadot/ui-keyring/types';
 
 import React, { useCallback, useContext, useEffect, useState } from 'react';
-import styled from 'styled-components';
 
 import { u8aToString } from '@polkadot/util';
 
@@ -14,6 +13,7 @@ import { AccountContext, ActionContext, Address, Button, InputFileWithLabel, Inp
 import useTranslation from '../hooks/useTranslation';
 import { batchRestore, jsonGetAccountInfo, jsonRestore } from '../messaging';
 import { Header } from '../partials';
+import { styled } from '../styled';
 import { DEFAULT_TYPE } from '../util/defaultType';
 import { isKeyringPairs$Json } from '../util/typeGuards';
 
diff --git a/packages/extension-ui/src/Popup/Signing/Bytes.tsx b/packages/extension-ui/src/Popup/Signing/Bytes.tsx
index 266d1518..1fac46cb 100644
--- a/packages/extension-ui/src/Popup/Signing/Bytes.tsx
+++ b/packages/extension-ui/src/Popup/Signing/Bytes.tsx
@@ -4,11 +4,11 @@
 import type { ThemeProps } from '../../types';
 
 import React, { useMemo } from 'react';
-import styled from 'styled-components';
 
 import { isAscii, u8aToString, u8aUnwrapBytes } from '@polkadot/util';
 
 import useTranslation from '../../hooks/useTranslation';
+import { styled } from '../../styled';
 
 interface Props {
   className?: string;
diff --git a/packages/extension-ui/src/Popup/Signing/LedgerSign.tsx b/packages/extension-ui/src/Popup/Signing/LedgerSign.tsx
index c88fa172..6fbc24af 100644
--- a/packages/extension-ui/src/Popup/Signing/LedgerSign.tsx
+++ b/packages/extension-ui/src/Popup/Signing/LedgerSign.tsx
@@ -7,11 +7,11 @@ import type { HexString } from '@polkadot/util/types';
 import { faSync } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React, { useCallback, useEffect, useState } from 'react';
-import styled from 'styled-components';
 
 import { Button, Warning } from '../../components';
 import { useLedger } from '../../hooks/useLedger';
 import useTranslation from '../../hooks/useTranslation';
+import { styled } from '../../styled';
 
 interface Props {
   accountIndex?: number;
diff --git a/packages/extension-ui/src/Popup/Signing/Qr.tsx b/packages/extension-ui/src/Popup/Signing/Qr.tsx
index a576ce9e..81a8dcdd 100644
--- a/packages/extension-ui/src/Popup/Signing/Qr.tsx
+++ b/packages/extension-ui/src/Popup/Signing/Qr.tsx
@@ -5,13 +5,13 @@ import type { ExtrinsicPayload } from '@polkadot/types/interfaces';
 import type { HexString } from '@polkadot/util/types';
 
 import React, { useCallback, useMemo, useState } from 'react';
-import styled from 'styled-components';
 
 import { wrapBytes } from '@polkadot/extension-dapp/wrapBytes';
 import { QrDisplayPayload, QrScanSignature } from '@polkadot/react-qr';
 
 import { Button } from '../../components';
 import useTranslation from '../../hooks/useTranslation';
+import { styled } from '../../styled';
 import { CMD_MORTAL, CMD_SIGN_MESSAGE } from './Request';
 
 interface Props {
diff --git a/packages/extension-ui/src/Popup/Signing/Request/SignArea.tsx b/packages/extension-ui/src/Popup/Signing/Request/SignArea.tsx
index df0d6a08..67eee486 100644
--- a/packages/extension-ui/src/Popup/Signing/Request/SignArea.tsx
+++ b/packages/extension-ui/src/Popup/Signing/Request/SignArea.tsx
@@ -2,13 +2,13 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import React, { useCallback, useContext, useEffect, useState } from 'react';
-import styled from 'styled-components';
 
 import { PASSWORD_EXPIRY_MIN } from '@polkadot/extension-base/defaults';
 
 import { ActionBar, ActionContext, Button, ButtonArea, Checkbox, Link } from '../../../components';
 import useTranslation from '../../../hooks/useTranslation';
 import { approveSignPassword, cancelSignRequest, isSignLocked } from '../../../messaging';
+import { styled } from '../../../styled';
 import Unlock from '../Unlock';
 
 interface Props {
diff --git a/packages/extension-ui/src/Popup/Signing/Signing.spec.tsx b/packages/extension-ui/src/Popup/Signing/Signing.spec.tsx
index a7b1bf05..3b8fa017 100644
--- a/packages/extension-ui/src/Popup/Signing/Signing.spec.tsx
+++ b/packages/extension-ui/src/Popup/Signing/Signing.spec.tsx
@@ -3,10 +3,11 @@
 
 import '@polkadot/extension-mocks/chrome';
 
+import type { ReactWrapper } from 'enzyme';
 import type { SigningRequest } from '@polkadot/extension-base/background/types';
 
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
-import { configure, mount, ReactWrapper } from 'enzyme';
+import enzyme from 'enzyme';
 import { EventEmitter } from 'events';
 import React, { useState } from 'react';
 import { act } from 'react-dom/test-utils';
@@ -23,6 +24,8 @@ import Request from './Request';
 import TransactionIndex from './TransactionIndex';
 import Signing from '.';
 
+const { configure, mount } = enzyme;
+
 // NOTE Required for spyOn when using @swc/jest
 // https://github.com/swc-project/swc/issues/3843
 jest.mock('../../messaging', (): Record<string, unknown> => ({
diff --git a/packages/extension-ui/src/Popup/Signing/TransactionIndex.tsx b/packages/extension-ui/src/Popup/Signing/TransactionIndex.tsx
index 6113dadc..69671156 100644
--- a/packages/extension-ui/src/Popup/Signing/TransactionIndex.tsx
+++ b/packages/extension-ui/src/Popup/Signing/TransactionIndex.tsx
@@ -6,7 +6,8 @@ import type { ThemeProps } from '../../types';
 import { faArrowLeft, faArrowRight } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React, { useCallback } from 'react';
-import styled from 'styled-components';
+
+import { styled } from '../../styled';
 
 interface Props {
   className?: string;
diff --git a/packages/extension-ui/src/Popup/Welcome.tsx b/packages/extension-ui/src/Popup/Welcome.tsx
index 6f876108..3c375fec 100644
--- a/packages/extension-ui/src/Popup/Welcome.tsx
+++ b/packages/extension-ui/src/Popup/Welcome.tsx
@@ -4,11 +4,11 @@
 import type { ThemeProps } from '../types';
 
 import React, { useCallback, useContext } from 'react';
-import styled from 'styled-components';
 
 import { ActionContext, Box, Button, ButtonArea, List, VerticalSpace } from '../components';
 import useTranslation from '../hooks/useTranslation';
 import { Header } from '../partials';
+import { styled } from '../styled';
 
 interface Props extends ThemeProps {
   className?: string;
diff --git a/packages/extension-ui/src/components/AccountNamePasswordCreation.spec.tsx b/packages/extension-ui/src/components/AccountNamePasswordCreation.spec.tsx
index 39e81607..42e3f011 100644
--- a/packages/extension-ui/src/components/AccountNamePasswordCreation.spec.tsx
+++ b/packages/extension-ui/src/components/AccountNamePasswordCreation.spec.tsx
@@ -6,7 +6,7 @@ import '@polkadot/extension-mocks/chrome';
 import type { ReactWrapper } from 'enzyme';
 
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
-import { configure, mount } from 'enzyme';
+import enzyme from 'enzyme';
 import React from 'react';
 import { act } from 'react-dom/test-utils';
 
@@ -17,6 +17,8 @@ import { AccountNamePasswordCreation, Input, InputWithLabel, NextStepButton } fr
 // For this file, there are a lot of them
 /* eslint-disable @typescript-eslint/no-unsafe-argument */
 
+const { configure, mount } = enzyme;
+
 // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment,@typescript-eslint/no-unsafe-call
 configure({ adapter: new Adapter() });
 
diff --git a/packages/extension-ui/src/components/ActionBar.tsx b/packages/extension-ui/src/components/ActionBar.tsx
index 1097021f..3c88e253 100644
--- a/packages/extension-ui/src/components/ActionBar.tsx
+++ b/packages/extension-ui/src/components/ActionBar.tsx
@@ -2,7 +2,8 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import React from 'react';
-import styled from 'styled-components';
+
+import { styled } from '../styled';
 
 interface Props {
   children: React.ReactNode;
diff --git a/packages/extension-ui/src/components/ActionText.tsx b/packages/extension-ui/src/components/ActionText.tsx
index c8957db5..12d57eb8 100644
--- a/packages/extension-ui/src/components/ActionText.tsx
+++ b/packages/extension-ui/src/components/ActionText.tsx
@@ -6,7 +6,8 @@ import type { ThemeProps } from '../types';
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React, { MouseEventHandler } from 'react';
-import styled from 'styled-components';
+
+import { styled } from '../styled';
 
 interface Props {
   className?: string;
diff --git a/packages/extension-ui/src/components/Address.spec.tsx b/packages/extension-ui/src/components/Address.spec.tsx
index 1830a303..b1775e33 100644
--- a/packages/extension-ui/src/components/Address.spec.tsx
+++ b/packages/extension-ui/src/components/Address.spec.tsx
@@ -9,7 +9,7 @@ import type { IconTheme } from '@polkadot/react-identicon/types';
 import type { Props as AddressComponentProps } from './Address';
 
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
-import { configure, mount } from 'enzyme';
+import enzyme from 'enzyme';
 import React from 'react';
 import { act } from 'react-dom/test-utils';
 
@@ -22,6 +22,8 @@ import { DEFAULT_TYPE } from '../util/defaultType';
 import getParentNameSuri from '../util/getParentNameSuri';
 import { AccountContext, Address } from '.';
 
+const { configure, mount } = enzyme;
+
 // NOTE Required for spyOn when using @swc/jest
 // https://github.com/swc-project/swc/issues/3843
 jest.mock('../messaging', (): Record<string, unknown> => ({
diff --git a/packages/extension-ui/src/components/Address.tsx b/packages/extension-ui/src/components/Address.tsx
index 3a06340c..e940110e 100644
--- a/packages/extension-ui/src/components/Address.tsx
+++ b/packages/extension-ui/src/components/Address.tsx
@@ -14,7 +14,6 @@ import { faCodeBranch, faQrcode } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';
 import CopyToClipboard from 'react-copy-to-clipboard';
-import styled from 'styled-components';
 
 import { decodeAddress, encodeAddress } from '@polkadot/util-crypto';
 
@@ -24,6 +23,7 @@ import useOutsideClick from '../hooks/useOutsideClick';
 import useToast from '../hooks/useToast';
 import useTranslation from '../hooks/useTranslation';
 import { showAccount } from '../messaging';
+import { styled } from '../styled';
 import { DEFAULT_TYPE } from '../util/defaultType';
 import getParentNameSuri from '../util/getParentNameSuri';
 import { AccountContext, SettingsContext } from './contexts';
diff --git a/packages/extension-ui/src/components/BackButton.tsx b/packages/extension-ui/src/components/BackButton.tsx
index 4eb05911..d9b4f3e0 100644
--- a/packages/extension-ui/src/components/BackButton.tsx
+++ b/packages/extension-ui/src/components/BackButton.tsx
@@ -6,8 +6,8 @@ import type { ThemeProps } from '../types';
 import { faArrowLeft } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React from 'react';
-import styled from 'styled-components';
 
+import { styled } from '../styled';
 import Button from './Button';
 
 interface Props {
diff --git a/packages/extension-ui/src/components/Box.tsx b/packages/extension-ui/src/components/Box.tsx
index c087ae71..04da17c3 100644
--- a/packages/extension-ui/src/components/Box.tsx
+++ b/packages/extension-ui/src/components/Box.tsx
@@ -4,7 +4,8 @@
 import type { ThemeProps } from '../types';
 
 import React from 'react';
-import styled from 'styled-components';
+
+import { styled } from '../styled';
 
 interface Props {
   banner?: React.ReactNode;
diff --git a/packages/extension-ui/src/components/Button.tsx b/packages/extension-ui/src/components/Button.tsx
index be45f090..7ccf105a 100644
--- a/packages/extension-ui/src/components/Button.tsx
+++ b/packages/extension-ui/src/components/Button.tsx
@@ -4,8 +4,8 @@
 import type { ThemeProps } from '../types';
 
 import React, { useCallback } from 'react';
-import styled from 'styled-components';
 
+import { styled } from '../styled';
 import Spinner from './Spinner';
 
 interface Props extends ThemeProps {
diff --git a/packages/extension-ui/src/components/ButtonArea.tsx b/packages/extension-ui/src/components/ButtonArea.tsx
index 19b48983..be3b6323 100644
--- a/packages/extension-ui/src/components/ButtonArea.tsx
+++ b/packages/extension-ui/src/components/ButtonArea.tsx
@@ -4,7 +4,8 @@
 import type { ThemeProps } from '../types';
 
 import React from 'react';
-import styled from 'styled-components';
+
+import { styled } from '../styled';
 
 interface Props extends ThemeProps {
   className?: string;
diff --git a/packages/extension-ui/src/components/ButtonWithSubtitle.tsx b/packages/extension-ui/src/components/ButtonWithSubtitle.tsx
index 740f490d..88a1229a 100644
--- a/packages/extension-ui/src/components/ButtonWithSubtitle.tsx
+++ b/packages/extension-ui/src/components/ButtonWithSubtitle.tsx
@@ -2,8 +2,8 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import React from 'react';
-import styled from 'styled-components';
 
+import { styled } from '../styled';
 import { Button } from '.';
 
 interface ButtonWithSubtitleProps {
diff --git a/packages/extension-ui/src/components/Checkbox.tsx b/packages/extension-ui/src/components/Checkbox.tsx
index ddd23d9d..795ac0dd 100644
--- a/packages/extension-ui/src/components/Checkbox.tsx
+++ b/packages/extension-ui/src/components/Checkbox.tsx
@@ -4,9 +4,9 @@
 import type { ThemeProps } from '../types';
 
 import React, { useCallback, useEffect } from 'react';
-import styled from 'styled-components';
 
 import Checkmark from '../assets/checkmark.svg';
+import { styled } from '../styled';
 
 interface Props {
   checked: boolean;
diff --git a/packages/extension-ui/src/components/Dropdown.tsx b/packages/extension-ui/src/components/Dropdown.tsx
index 0fe8cc27..57d41b7d 100644
--- a/packages/extension-ui/src/components/Dropdown.tsx
+++ b/packages/extension-ui/src/components/Dropdown.tsx
@@ -4,9 +4,9 @@
 import type { ThemeProps } from '../types';
 
 import React, { useCallback } from 'react';
-import styled from 'styled-components';
 
 import arrow from '../assets/arrow-down.svg';
+import { styled } from '../styled';
 import Label from './Label';
 
 interface DropdownOption {
diff --git a/packages/extension-ui/src/components/Icon.tsx b/packages/extension-ui/src/components/Icon.tsx
index 93a68873..2be0bfd9 100644
--- a/packages/extension-ui/src/components/Icon.tsx
+++ b/packages/extension-ui/src/components/Icon.tsx
@@ -2,7 +2,8 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import React from 'react';
-import styled from 'styled-components';
+
+import { styled } from '../styled';
 
 interface Props {
   className?: string;
diff --git a/packages/extension-ui/src/components/Identicon.tsx b/packages/extension-ui/src/components/Identicon.tsx
index cf6192f2..227340a0 100644
--- a/packages/extension-ui/src/components/Identicon.tsx
+++ b/packages/extension-ui/src/components/Identicon.tsx
@@ -5,10 +5,11 @@ import type { IconTheme } from '@polkadot/react-identicon/types';
 import type { ThemeProps } from '../types';
 
 import React from 'react';
-import styled from 'styled-components';
 
 import Icon from '@polkadot/react-identicon';
 
+import { styled } from '../styled';
+
 interface Props {
   className?: string;
   iconTheme?: IconTheme;
diff --git a/packages/extension-ui/src/components/InputFileWithLabel.tsx b/packages/extension-ui/src/components/InputFileWithLabel.tsx
index ba2aabb4..00f63840 100644
--- a/packages/extension-ui/src/components/InputFileWithLabel.tsx
+++ b/packages/extension-ui/src/components/InputFileWithLabel.tsx
@@ -5,11 +5,11 @@ import type { ThemeProps } from '../types';
 
 import React, { createRef, useCallback, useState } from 'react';
 import Dropzone, { DropzoneRef } from 'react-dropzone';
-import styled from 'styled-components';
 
 import { formatNumber, hexToU8a, isHex, u8aToString } from '@polkadot/util';
 
 import useTranslation from '../hooks/useTranslation';
+import { styled } from '../styled';
 import Label from './Label';
 
 function classes (...classNames: (boolean | null | string | undefined)[]): string {
diff --git a/packages/extension-ui/src/components/InputFilter.tsx b/packages/extension-ui/src/components/InputFilter.tsx
index 7fe9580a..edea345a 100644
--- a/packages/extension-ui/src/components/InputFilter.tsx
+++ b/packages/extension-ui/src/components/InputFilter.tsx
@@ -4,8 +4,8 @@
 import { faTimes } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React, { useCallback, useRef } from 'react';
-import styled from 'styled-components';
 
+import { styled } from '../styled';
 import { ThemeProps } from '../types';
 import { Input } from './TextInputs';
 
diff --git a/packages/extension-ui/src/components/InputWithLabel.tsx b/packages/extension-ui/src/components/InputWithLabel.tsx
index 4d1496fa..8a23d14c 100644
--- a/packages/extension-ui/src/components/InputWithLabel.tsx
+++ b/packages/extension-ui/src/components/InputWithLabel.tsx
@@ -2,9 +2,9 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import React, { useCallback, useState } from 'react';
-import styled from 'styled-components';
 
 import useTranslation from '../hooks/useTranslation';
+import { styled } from '../styled';
 import Label from './Label';
 import { Input } from './TextInputs';
 import Warning from './Warning';
diff --git a/packages/extension-ui/src/components/Label.tsx b/packages/extension-ui/src/components/Label.tsx
index b2cbd978..8db38bf9 100644
--- a/packages/extension-ui/src/components/Label.tsx
+++ b/packages/extension-ui/src/components/Label.tsx
@@ -4,7 +4,8 @@
 import type { ThemeProps } from '../types';
 
 import React from 'react';
-import styled from 'styled-components';
+
+import { styled } from '../styled';
 
 interface Props {
   children: React.ReactNode;
diff --git a/packages/extension-ui/src/components/Link.tsx b/packages/extension-ui/src/components/Link.tsx
index 5e5100b2..2467fd6f 100644
--- a/packages/extension-ui/src/components/Link.tsx
+++ b/packages/extension-ui/src/components/Link.tsx
@@ -5,7 +5,8 @@ import type { ThemeProps } from '../types';
 
 import React from 'react';
 import { Link as RouterLink } from 'react-router-dom';
-import styled from 'styled-components';
+
+import { styled } from '../styled';
 
 interface Props {
   children?: React.ReactNode;
diff --git a/packages/extension-ui/src/components/List.tsx b/packages/extension-ui/src/components/List.tsx
index 45e8d205..0d70038a 100644
--- a/packages/extension-ui/src/components/List.tsx
+++ b/packages/extension-ui/src/components/List.tsx
@@ -4,7 +4,8 @@
 import type { ThemeProps } from '../types';
 
 import React from 'react';
-import styled from 'styled-components';
+
+import { styled } from '../styled';
 
 interface Props extends ThemeProps {
   className?: string;
diff --git a/packages/extension-ui/src/components/Main.tsx b/packages/extension-ui/src/components/Main.tsx
index 3285321d..e9070a55 100644
--- a/packages/extension-ui/src/components/Main.tsx
+++ b/packages/extension-ui/src/components/Main.tsx
@@ -4,7 +4,8 @@
 import type { ThemeProps } from '../types';
 
 import React from 'react';
-import styled from 'styled-components';
+
+import { styled } from '../styled';
 
 interface Props {
   children: React.ReactNode;
diff --git a/packages/extension-ui/src/components/Menu.tsx b/packages/extension-ui/src/components/Menu.tsx
index 929c4318..ebf37353 100644
--- a/packages/extension-ui/src/components/Menu.tsx
+++ b/packages/extension-ui/src/components/Menu.tsx
@@ -4,7 +4,8 @@
 import type { ThemeProps } from '../types';
 
 import React from 'react';
-import styled from 'styled-components';
+
+import { styled } from '../styled';
 
 interface Props {
   children: React.ReactNode;
diff --git a/packages/extension-ui/src/components/MenuDivider.tsx b/packages/extension-ui/src/components/MenuDivider.tsx
index 356b0d34..4fa01469 100644
--- a/packages/extension-ui/src/components/MenuDivider.tsx
+++ b/packages/extension-ui/src/components/MenuDivider.tsx
@@ -4,7 +4,8 @@
 import type { ThemeProps } from '../types';
 
 import React from 'react';
-import styled from 'styled-components';
+
+import { styled } from '../styled';
 
 interface Props extends ThemeProps {
   className?: string;
diff --git a/packages/extension-ui/src/components/MenuItem.tsx b/packages/extension-ui/src/components/MenuItem.tsx
index ee4e0710..014e7a72 100644
--- a/packages/extension-ui/src/components/MenuItem.tsx
+++ b/packages/extension-ui/src/components/MenuItem.tsx
@@ -4,7 +4,8 @@
 import type { ThemeProps } from '../types';
 
 import React from 'react';
-import styled from 'styled-components';
+
+import { styled } from '../styled';
 
 interface Props extends ThemeProps {
   children: React.ReactNode;
diff --git a/packages/extension-ui/src/components/MnemonicSeed.tsx b/packages/extension-ui/src/components/MnemonicSeed.tsx
index 3e3283f2..0a6b5655 100644
--- a/packages/extension-ui/src/components/MnemonicSeed.tsx
+++ b/packages/extension-ui/src/components/MnemonicSeed.tsx
@@ -5,9 +5,9 @@ import type { ThemeProps } from '../types';
 
 import { faCopy } from '@fortawesome/free-regular-svg-icons';
 import React, { MouseEventHandler } from 'react';
-import styled from 'styled-components';
 
 import useTranslation from '../hooks/useTranslation';
+import { styled } from '../styled';
 import ActionText from './ActionText';
 import TextAreaWithLabel from './TextAreaWithLabel';
 
diff --git a/packages/extension-ui/src/components/NextStepButton.tsx b/packages/extension-ui/src/components/NextStepButton.tsx
index b2615864..dad370c4 100644
--- a/packages/extension-ui/src/components/NextStepButton.tsx
+++ b/packages/extension-ui/src/components/NextStepButton.tsx
@@ -6,8 +6,8 @@ import type { ThemeProps } from '../types';
 import { faArrowRight } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React from 'react';
-import styled from 'styled-components';
 
+import { styled } from '../styled';
 import Button from './Button';
 
 type Props = React.ComponentProps<typeof Button>;
diff --git a/packages/extension-ui/src/components/RemoveAuth.tsx b/packages/extension-ui/src/components/RemoveAuth.tsx
index e9825737..d68e0d80 100644
--- a/packages/extension-ui/src/components/RemoveAuth.tsx
+++ b/packages/extension-ui/src/components/RemoveAuth.tsx
@@ -6,7 +6,8 @@ import type { ThemeProps } from '../types';
 import { faTrash } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React from 'react';
-import styled from 'styled-components';
+
+import { styled } from '../styled';
 
 interface Props{
   className?: string
diff --git a/packages/extension-ui/src/components/Spinner.tsx b/packages/extension-ui/src/components/Spinner.tsx
index db1577c6..c354b48c 100644
--- a/packages/extension-ui/src/components/Spinner.tsx
+++ b/packages/extension-ui/src/components/Spinner.tsx
@@ -4,9 +4,9 @@
 import type { ThemeProps } from '../types';
 
 import React from 'react';
-import styled from 'styled-components';
 
 import spinnerSrc from '../assets/spinner.png';
+import { styled } from '../styled';
 
 interface Props extends ThemeProps {
   className?: string;
diff --git a/packages/extension-ui/src/components/Svg.tsx b/packages/extension-ui/src/components/Svg.tsx
index 31fa49bf..50e926b0 100644
--- a/packages/extension-ui/src/components/Svg.tsx
+++ b/packages/extension-ui/src/components/Svg.tsx
@@ -4,7 +4,8 @@
 import type { ThemeProps } from '../types';
 
 import React from 'react';
-import styled from 'styled-components';
+
+import { styled } from '../styled';
 
 interface Props extends ThemeProps {
   className?: string;
diff --git a/packages/extension-ui/src/components/Switch.tsx b/packages/extension-ui/src/components/Switch.tsx
index 28b90f5e..4e70e302 100644
--- a/packages/extension-ui/src/components/Switch.tsx
+++ b/packages/extension-ui/src/components/Switch.tsx
@@ -4,7 +4,8 @@
 import type { ThemeProps } from '../types';
 
 import React, { useCallback } from 'react';
-import styled from 'styled-components';
+
+import { styled } from '../styled';
 
 interface Props {
   checked: boolean;
diff --git a/packages/extension-ui/src/components/Table.tsx b/packages/extension-ui/src/components/Table.tsx
index 9afda2de..1d712b4c 100644
--- a/packages/extension-ui/src/components/Table.tsx
+++ b/packages/extension-ui/src/components/Table.tsx
@@ -4,7 +4,8 @@
 import type { ThemeProps } from '../types';
 
 import React from 'react';
-import styled from 'styled-components';
+
+import { styled } from '../styled';
 
 interface Props {
   children: React.ReactNode;
diff --git a/packages/extension-ui/src/components/Toast/Toast.tsx b/packages/extension-ui/src/components/Toast/Toast.tsx
index fe0e7c83..ba1b8ef8 100644
--- a/packages/extension-ui/src/components/Toast/Toast.tsx
+++ b/packages/extension-ui/src/components/Toast/Toast.tsx
@@ -4,7 +4,8 @@
 import type { ThemeProps } from '../../types';
 
 import React from 'react';
-import styled from 'styled-components';
+
+import { styled } from '../../styled';
 
 interface Props {
   content: React.ReactChild;
diff --git a/packages/extension-ui/src/components/VerticalSpace.tsx b/packages/extension-ui/src/components/VerticalSpace.tsx
index fe32ed2a..f1d217ca 100644
--- a/packages/extension-ui/src/components/VerticalSpace.tsx
+++ b/packages/extension-ui/src/components/VerticalSpace.tsx
@@ -2,7 +2,8 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import React from 'react';
-import styled from 'styled-components';
+
+import { styled } from '../styled';
 
 interface Props {
   className?: string;
diff --git a/packages/extension-ui/src/components/Warning.tsx b/packages/extension-ui/src/components/Warning.tsx
index 2f8bb9bd..1d7d9d2a 100644
--- a/packages/extension-ui/src/components/Warning.tsx
+++ b/packages/extension-ui/src/components/Warning.tsx
@@ -6,7 +6,8 @@ import type { ThemeProps } from '../types';
 import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React from 'react';
-import styled from 'styled-components';
+
+import { styled } from '../styled';
 
 interface Props extends ThemeProps {
   children: React.ReactNode;
diff --git a/packages/extension-ui/src/messaging.spec.ts b/packages/extension-ui/src/messaging.spec.ts
index 404b301e..3d5dcc91 100644
--- a/packages/extension-ui/src/messaging.spec.ts
+++ b/packages/extension-ui/src/messaging.spec.ts
@@ -4,12 +4,12 @@
 import '@polkadot/extension-mocks/chrome';
 
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
-import { configure } from 'enzyme';
+import enzyme from 'enzyme';
 
 import { exportAccount } from './messaging';
 
 // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment,@typescript-eslint/no-unsafe-call
-configure({ adapter: new Adapter() });
+enzyme.configure({ adapter: new Adapter() });
 
 describe('messaging sends message to background via extension port for', () => {
   test('exportAccount', () => {
diff --git a/packages/extension-ui/src/partials/AccountSelection.tsx b/packages/extension-ui/src/partials/AccountSelection.tsx
index f7259c69..1cb20331 100644
--- a/packages/extension-ui/src/partials/AccountSelection.tsx
+++ b/packages/extension-ui/src/partials/AccountSelection.tsx
@@ -5,11 +5,11 @@ import type { ThemeProps } from '../types';
 
 import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import { Trans } from 'react-i18next';
-import styled from 'styled-components';
 
 import { AccountContext, Checkbox, Warning } from '../components';
 import useTranslation from '../hooks/useTranslation';
 import AccountsTree from '../Popup/Accounts/AccountsTree';
+import { styled } from '../styled';
 
 interface Props extends ThemeProps {
   className?: string;
diff --git a/packages/extension-ui/src/partials/Header.spec.tsx b/packages/extension-ui/src/partials/Header.spec.tsx
index eacab3c1..80cc20d4 100644
--- a/packages/extension-ui/src/partials/Header.spec.tsx
+++ b/packages/extension-ui/src/partials/Header.spec.tsx
@@ -3,8 +3,10 @@
 
 import '@polkadot/extension-mocks/chrome';
 
+import type { ReactWrapper } from 'enzyme';
+
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
-import { configure, mount, ReactWrapper } from 'enzyme';
+import enzyme from 'enzyme';
 import React from 'react';
 import { MemoryRouter } from 'react-router';
 import { ThemeProvider } from 'styled-components';
@@ -13,6 +15,8 @@ import { themes } from '../components';
 import Header from './Header';
 import Settings from './MenuSettings';
 
+const { configure, mount } = enzyme;
+
 // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment,@typescript-eslint/no-unsafe-call
 configure({ adapter: new Adapter() });
 
diff --git a/packages/extension-ui/src/partials/Header.tsx b/packages/extension-ui/src/partials/Header.tsx
index 528d7163..991ef96a 100644
--- a/packages/extension-ui/src/partials/Header.tsx
+++ b/packages/extension-ui/src/partials/Header.tsx
@@ -6,7 +6,6 @@ import type { ThemeProps } from '../types';
 import { faArrowLeft, faCog, faPlusCircle, faSearch } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
-import styled from 'styled-components';
 
 import logo from '../assets/pjs.svg';
 import { ActionContext } from '../components';
@@ -15,6 +14,7 @@ import Link from '../components/Link';
 import useOutsideClick from '../hooks/useOutsideClick';
 import useTranslation from '../hooks/useTranslation';
 import { getConnectedTabsUrl } from '../messaging';
+import { styled } from '../styled';
 import MenuAdd from './MenuAdd';
 import MenuSettings from './MenuSettings';
 
diff --git a/packages/extension-ui/src/partials/HeaderWithSteps.tsx b/packages/extension-ui/src/partials/HeaderWithSteps.tsx
index 0f2b20cf..8addffd7 100644
--- a/packages/extension-ui/src/partials/HeaderWithSteps.tsx
+++ b/packages/extension-ui/src/partials/HeaderWithSteps.tsx
@@ -4,9 +4,9 @@
 import type { ThemeProps } from '../types';
 
 import React, { useCallback, useContext } from 'react';
-import styled from 'styled-components';
 
 import { ActionContext, ActionText } from '../components';
+import { styled } from '../styled';
 import Header from './Header';
 
 interface Props extends ThemeProps {
diff --git a/packages/extension-ui/src/partials/MenuAdd.tsx b/packages/extension-ui/src/partials/MenuAdd.tsx
index 06bf3331..d3b682dd 100644
--- a/packages/extension-ui/src/partials/MenuAdd.tsx
+++ b/packages/extension-ui/src/partials/MenuAdd.tsx
@@ -7,13 +7,13 @@ import { faUsb } from '@fortawesome/free-brands-svg-icons';
 import { faCodeBranch, faFileExport, faFileUpload, faKey, faPlusCircle, faQrcode } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React, { useCallback, useContext } from 'react';
-import styled from 'styled-components';
 
 import { AccountContext, Link, MediaContext, Menu, MenuDivider, MenuItem } from '../components';
 import useIsPopup from '../hooks/useIsPopup';
 import { useLedger } from '../hooks/useLedger';
 import useTranslation from '../hooks/useTranslation';
 import { windowOpen } from '../messaging';
+import { styled } from '../styled';
 
 interface Props extends ThemeProps {
   className?: string;
diff --git a/packages/extension-ui/src/styled.ts b/packages/extension-ui/src/styled.ts
new file mode 100644
index 00000000..90d41ae9
--- /dev/null
+++ b/packages/extension-ui/src/styled.ts
@@ -0,0 +1,14 @@
+// Copyright 2019-2023 @polkadot/extension-ui authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+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: typeof styledComponents }).styled ||
+  (styledComponents as unknown as { default: typeof styledComponents }).default ||
+  styledComponents
+);
diff --git a/packages/extension-ui/src/util/buildHierarchy.spec.ts b/packages/extension-ui/src/util/buildHierarchy.spec.ts
index 4cbf3162..b5bf0a4b 100644
--- a/packages/extension-ui/src/util/buildHierarchy.spec.ts
+++ b/packages/extension-ui/src/util/buildHierarchy.spec.ts
@@ -21,87 +21,85 @@ describe('Use Account Hierarchy', () => {
     parentAddress?: string;
     suri?: string;
     whenCreated?: number;
-  } => ({
-    address,
-    name,
-    parentAddress,
-    suri,
-    whenCreated
-  });
+  } => ({ address, name, parentAddress, suri, whenCreated });
 
-  test('for empty account list, returns empty list', () => {
+  it('for empty account list, returns empty list', () => {
     testHierarchy([], []);
   });
 
-  test('returns one account', () => {
+  it('returns one account', () => {
     testHierarchy([acc('a')], [acc('a')]);
   });
 
-  test('puts child account into children field of parent: single child', () => {
+  it('puts child account into children field of parent: single child', () => {
     testHierarchy([acc('a'), acc('b', 'a')], [
-      { address: 'a', children: [acc('b', 'a')] }
+      { address: 'a', children: [acc('b', 'a')], name: undefined, parentAddress: undefined, suri: undefined, whenCreated: undefined }
     ]);
   });
 
-  test('puts child account into children field of parent: more children', () => {
+  it('puts child account into children field of parent: more children', () => {
     testHierarchy([acc('a'), acc('b', 'a'), acc('c', 'a')], [
-      { address: 'a', children: [acc('b', 'a'), acc('c', 'a')] }
+      { address: 'a', children: [acc('b', 'a'), acc('c', 'a')], name: undefined, parentAddress: undefined, suri: undefined, whenCreated: undefined }
     ]);
   });
 
-  test('puts child account into children field of parent: 2 roots', () => {
+  it('puts child account into children field of parent: 2 roots', () => {
     testHierarchy([acc('a'), acc('b', 'a'), acc('c', 'a'), acc('d')], [
-      { address: 'a', children: [acc('b', 'a'), acc('c', 'a')] },
+      { address: 'a', children: [acc('b', 'a'), acc('c', 'a')], name: undefined, parentAddress: undefined, suri: undefined, whenCreated: undefined },
       acc('d')
     ]);
   });
 
-  test('handles grandchildren', () => {
+  it('handles grandchildren', () => {
     testHierarchy([acc('a'), acc('b', 'a'), acc('c', 'b')], [{
       address: 'a',
       children: [{
         ...acc('b', 'a'),
         children: [acc('c', 'b')]
-      }]
+      }],
+      name: undefined,
+      parentAddress: undefined,
+      suri: undefined,
+      whenCreated: undefined
     }]);
   });
 
-  test('sorts accounts by network', () => {
+  it('sorts accounts by network', () => {
     testHierarchy(
       [{ address: 'b', genesisHash: genesisExample.KUSAMA }, { address: 'a', genesisHash: genesisExample.POLKADOT }, { address: 'c', genesisHash: genesisExample.KUSAMA }],
       [{ address: 'b', genesisHash: genesisExample.KUSAMA }, { address: 'c', genesisHash: genesisExample.KUSAMA }, { address: 'a', genesisHash: genesisExample.POLKADOT }]
     );
   });
 
-  test('sorts accounts by network and name', () => {
+  it('sorts accounts by network and name', () => {
     testHierarchy(
       [{ address: 'b', genesisHash: genesisExample.KUSAMA, name: 'b-last-kusama' }, { address: 'a', genesisHash: genesisExample.POLKADOT }, { address: 'c', genesisHash: genesisExample.KUSAMA, name: 'a-first-kusama' }],
       [{ address: 'c', genesisHash: genesisExample.KUSAMA, name: 'a-first-kusama' }, { address: 'b', genesisHash: genesisExample.KUSAMA, name: 'b-last-kusama' }, { address: 'a', genesisHash: genesisExample.POLKADOT }]
     );
   });
 
-  test('sorts accounts by name and creation date', () => {
+  it('sorts accounts by name and creation date', () => {
     testHierarchy(
       [acc('b', undefined, 2, 'b'), acc('z', undefined, 1, 'b'), acc('a', undefined, 4, 'a')],
-      [{ address: 'a', name: 'a', whenCreated: 4 }, { address: 'z', name: 'b', whenCreated: 1 }, { address: 'b', name: 'b', whenCreated: 2 }]
+      [{ address: 'a', name: 'a', parentAddress: undefined, suri: undefined, whenCreated: 4 }, { address: 'z', name: 'b', parentAddress: undefined, suri: undefined, whenCreated: 1 }, { address: 'b', name: 'b', parentAddress: undefined, suri: undefined, whenCreated: 2 }]
     );
   });
 
-  test('sorts account children by name and path', () => {
+  it('sorts account children by name and path', () => {
     testHierarchy(
       [acc('a', undefined, 1, 'a'), acc('b', 'a', 1, 'b', '/2'), acc('b', 'a', 1, 'b', '/0')],
-      [{ address: 'a', children: [acc('b', 'a', 1, 'b', '/0'), acc('b', 'a', 1, 'b', '/2')], name: 'a', whenCreated: 1 }]
+      [{ address: 'a', children: [acc('b', 'a', 1, 'b', '/0'), acc('b', 'a', 1, 'b', '/2')], name: 'a', parentAddress: undefined, suri: undefined, whenCreated: 1 }]
     );
   });
 
-  test('sorts accounts with children by name and creation date', () => {
+  it('sorts accounts with children by name and creation date', () => {
     testHierarchy(
       [acc('b', undefined, 2, 'b'), acc('z', undefined, 1, 'b'), acc('d', 'b', 2, 'd'), acc('c', 'b', 3, 'c'), acc('a', undefined, 4, 'a')],
-      [{ address: 'a', name: 'a', whenCreated: 4 }, { address: 'z', name: 'b', whenCreated: 1 }, { address: 'b', children: [acc('c', 'b', 3, 'c'), acc('d', 'b', 2, 'd')], name: 'b', whenCreated: 2 }]
+      [{ address: 'a', name: 'a', parentAddress: undefined, suri: undefined, whenCreated: 4 }, { address: 'z', name: 'b', parentAddress: undefined, suri: undefined, whenCreated: 1 }, { address: 'b', children: [acc('c', 'b', 3, 'c'), acc('d', 'b', 2, 'd')], name: 'b', parentAddress: undefined, suri: undefined, whenCreated: 2 }]
     );
   });
 
-  test('if creation time is missing, puts account at the back of a list', () => {
+  it('if creation time is missing, puts account at the back of a list', () => {
     testHierarchy(
       [acc('a'), acc('b', undefined, 2), acc('c', undefined, 1)],
       [acc('c', undefined, 1), acc('b', undefined, 2), acc('a')]
diff --git a/packages/extension-ui/src/util/nextDerivationPath.spec.ts b/packages/extension-ui/src/util/nextDerivationPath.spec.ts
index 71723756..eef35bf2 100644
--- a/packages/extension-ui/src/util/nextDerivationPath.spec.ts
+++ b/packages/extension-ui/src/util/nextDerivationPath.spec.ts
@@ -12,19 +12,19 @@ describe('Generate Derivation Path', () => {
     parentAddress
   });
 
-  test('generates path for first masters child', () => {
+  it('generates path for first masters child', () => {
     expect(nextDerivationPath([acc('a')], 'a')).toEqual('//0');
   });
 
-  test('generates path for third masters child', () => {
+  it('generates path for third masters child', () => {
     expect(nextDerivationPath([acc('a'), acc('b', 'a'), acc('c', 'a')], 'a')).toEqual('//2');
   });
 
-  test('generates path for masters child when another root exists', () => {
+  it('generates path for masters child when another root exists', () => {
     expect(nextDerivationPath([acc('a'), acc('b', 'a'), acc('c', 'a'), acc('d')], 'a')).toEqual('//2');
   });
 
-  test('generates path for masters grandchild', () => {
+  it('generates path for masters grandchild', () => {
     expect(nextDerivationPath([acc('a'), acc('b', 'a'), acc('c', 'b'), acc('d', 'b')], 'b')).toEqual('//2');
   });
 });
diff --git a/packages/extension/package.json b/packages/extension/package.json
index 3de0b6bd..7e275f46 100644
--- a/packages/extension/package.json
+++ b/packages/extension/package.json
@@ -22,7 +22,7 @@
     "@polkadot/extension-ui": "^0.44.9"
   },
   "devDependencies": {
-    "@polkadot/dev": "^0.68.38",
+    "@polkadot/dev": "^0.68.41",
     "babel-loader": "^8.3.0",
     "browser-resolve": "^2.0.0",
     "buffer": "^6.0.3",
diff --git a/yarn.lock b/yarn.lock
index 5002dc32..bdfe5914 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2578,9 +2578,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@polkadot/dev@npm:^0.68.38":
-  version: 0.68.38
-  resolution: "@polkadot/dev@npm:0.68.38"
+"@polkadot/dev@npm:^0.68.41":
+  version: 0.68.41
+  resolution: "@polkadot/dev@npm:0.68.41"
   dependencies:
     "@babel/cli": ^7.20.7
     "@babel/core": ^7.20.12
@@ -2644,7 +2644,7 @@ __metadata:
     jsdom: ^21.1.0
     madge: ^6.0.0
     prettier: ^2.8.4
-    rollup: ^3.17.1
+    rollup: ^3.17.2
     rollup-plugin-cleanup: ^3.2.1
     typescript: ^4.9.5
     webpack: ^5.75.0
@@ -2682,7 +2682,7 @@ __metadata:
     polkadot-exec-swc: scripts/polkadot-exec-swc.mjs
     polkadot-exec-tsc: scripts/polkadot-exec-tsc.mjs
     polkadot-exec-webpack: scripts/polkadot-exec-webpack.mjs
-  checksum: 7fa2e683784b02b97fb08c34f1f84d6504e28d2a3d1ae0513b392390a800f4801f281bf789b0c7f0a19e221bfc6de5a2c89a237eb3674ce9ad131188392d7e08
+  checksum: a3e5d0acca6393c0d2cda36d5000ce605bf7cc0da6dd427947a82fe7d7783ce3ba2711bf4167d69178fc227e5ab86bd8ef75b3292d71328a817d0c3030305e95
   languageName: node
   linkType: hard
 
@@ -2701,8 +2701,8 @@ __metadata:
     "@polkadot/phishing": ^0.19.3
     "@polkadot/rpc-provider": ^9.14.2
     "@polkadot/types": ^9.14.2
-    "@polkadot/ui-keyring": ^2.11.3
-    "@polkadot/ui-settings": ^2.11.3
+    "@polkadot/ui-keyring": ^2.12.1
+    "@polkadot/ui-settings": ^2.12.1
     "@polkadot/util": ^10.4.2
     "@polkadot/util-crypto": ^10.4.2
     eventemitter3: ^5.0.0
@@ -2799,12 +2799,12 @@ __metadata:
     "@polkadot/hw-ledger": ^10.4.2
     "@polkadot/keyring": ^10.4.2
     "@polkadot/networks": ^10.4.2
-    "@polkadot/react-identicon": ^2.11.3
-    "@polkadot/react-qr": ^2.11.3
+    "@polkadot/react-identicon": ^2.12.1
+    "@polkadot/react-qr": ^2.12.1
     "@polkadot/types": ^9.14.2
     "@polkadot/types-augment": ^9.14.2
-    "@polkadot/ui-keyring": ^2.11.3
-    "@polkadot/ui-settings": ^2.11.3
+    "@polkadot/ui-keyring": ^2.12.1
+    "@polkadot/ui-settings": ^2.12.1
     "@polkadot/util": ^10.4.2
     "@polkadot/util-crypto": ^10.4.2
     "@types/enzyme": ^3.10.12
@@ -2838,7 +2838,7 @@ __metadata:
   resolution: "@polkadot/extension@workspace:packages/extension"
   dependencies:
     "@babel/runtime": ^7.20.13
-    "@polkadot/dev": ^0.68.38
+    "@polkadot/dev": ^0.68.41
     "@polkadot/extension-base": ^0.44.9
     "@polkadot/extension-inject": ^0.44.9
     "@polkadot/extension-ui": ^0.44.9
@@ -2926,14 +2926,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@polkadot/react-identicon@npm:^2.11.3":
-  version: 2.11.3
-  resolution: "@polkadot/react-identicon@npm:2.11.3"
+"@polkadot/react-identicon@npm:^2.12.1":
+  version: 2.12.1
+  resolution: "@polkadot/react-identicon@npm:2.12.1"
   dependencies:
     "@babel/runtime": ^7.20.13
     "@polkadot/keyring": ^10.4.2
-    "@polkadot/ui-settings": 2.11.3
-    "@polkadot/ui-shared": 2.11.3
+    "@polkadot/ui-settings": 2.12.1
+    "@polkadot/ui-shared": 2.12.1
     "@polkadot/util": ^10.4.2
     "@polkadot/util-crypto": ^10.4.2
     color: ^3.2.1
@@ -2949,16 +2949,16 @@ __metadata:
     react-dom: "*"
     react-is: "*"
     styled-components: "*"
-  checksum: 2454027dce63a036d19722deb65f1239c47c678effd5b356faf2a1a77b6426cfe889f382d078d8490562a5456c97184723e18e664a5c24f2eca128b46829a33b
+  checksum: 5fbb640edcbfb0f3fb00170dcb5585c10dc7d578e9fd958c257b8853d5627fb561d34ee20af1a11a6838a4dabce78afdbf05a6945615341576389c6d714c786c
   languageName: node
   linkType: hard
 
-"@polkadot/react-qr@npm:^2.11.3":
-  version: 2.11.3
-  resolution: "@polkadot/react-qr@npm:2.11.3"
+"@polkadot/react-qr@npm:^2.12.1":
+  version: 2.12.1
+  resolution: "@polkadot/react-qr@npm:2.12.1"
   dependencies:
     "@babel/runtime": ^7.20.13
-    "@polkadot/ui-settings": 2.11.3
+    "@polkadot/ui-settings": 2.12.1
     "@polkadot/util": ^10.4.2
     "@polkadot/util-crypto": ^10.4.2
     qrcode-generator: ^1.4.4
@@ -2970,7 +2970,7 @@ __metadata:
     react: "*"
     react-dom: "*"
     styled-components: "*"
-  checksum: 457e540dad46287df8f02465b7b8cef1c6ff6f6eb7a299d3dc12c81c4c946e59c7d1522e41f93a808828b5145d767ebc7704aa87577e7974d563121432e4da13
+  checksum: 2f348b48e7a387afa1784547c9b39f22a000ca1ad99896bb8b87f03298dfad582ec23512ad764a57758282f60f10f071c766595cc774085ef8ba017a1f3ffa19
   languageName: node
   linkType: hard
 
@@ -3099,13 +3099,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@polkadot/ui-keyring@npm:^2.11.3":
-  version: 2.11.3
-  resolution: "@polkadot/ui-keyring@npm:2.11.3"
+"@polkadot/ui-keyring@npm:^2.12.1":
+  version: 2.12.1
+  resolution: "@polkadot/ui-keyring@npm:2.12.1"
   dependencies:
     "@babel/runtime": ^7.20.13
     "@polkadot/keyring": ^10.4.2
-    "@polkadot/ui-settings": 2.11.3
+    "@polkadot/ui-settings": 2.12.1
     "@polkadot/util": ^10.4.2
     "@polkadot/util-crypto": ^10.4.2
     mkdirp: ^2.1.3
@@ -3115,13 +3115,13 @@ __metadata:
     "@polkadot/keyring": "*"
     "@polkadot/ui-settings": "*"
     "@polkadot/util": "*"
-  checksum: 91cbabaab1c5cc40dd11235bfaaa88ca817cb0b2b20b7ff55a30ae2d02ab0c64872e3d76385a819610cd60910e809c7665edaad7bb7f2066cb783f483eed3feb
+  checksum: 524e3dcbb35ff7c6c4aaf39735259adc4cac94fa82ad9c9782906c86215ec74790b3c22e21f27e80025a07b98a42de1c2d2c6d69738fa89f3f087391d8c98ea2
   languageName: node
   linkType: hard
 
-"@polkadot/ui-settings@npm:2.11.3, @polkadot/ui-settings@npm:^2.11.3":
-  version: 2.11.3
-  resolution: "@polkadot/ui-settings@npm:2.11.3"
+"@polkadot/ui-settings@npm:2.12.1, @polkadot/ui-settings@npm:^2.12.1":
+  version: 2.12.1
+  resolution: "@polkadot/ui-settings@npm:2.12.1"
   dependencies:
     "@babel/runtime": ^7.20.13
     "@polkadot/networks": ^10.4.2
@@ -3131,20 +3131,20 @@ __metadata:
   peerDependencies:
     "@polkadot/networks": "*"
     "@polkadot/util": "*"
-  checksum: 66daa72e53579a9cbb05f8cdc11dac7a8e3b1a30d558c399c21e818ba0bd7483d0ec579902ad9a3b80959949ad8c0a208030c373318e4dc79d8afd4720cf3e65
+  checksum: 13ccd765520be013c1bd3d7e4638b9e3b8f2a63bc2d7971c9787b7bccc9c6042f5f14bd86581ffc4a8ea50135d52f0d4d5011fdfd63717c5c547d35a4e74fd26
   languageName: node
   linkType: hard
 
-"@polkadot/ui-shared@npm:2.11.3":
-  version: 2.11.3
-  resolution: "@polkadot/ui-shared@npm:2.11.3"
+"@polkadot/ui-shared@npm:2.12.1":
+  version: 2.12.1
+  resolution: "@polkadot/ui-shared@npm:2.12.1"
   dependencies:
     "@babel/runtime": ^7.20.13
     color: ^3.2.1
   peerDependencies:
     "@polkadot/util": "*"
     "@polkadot/util-crypto": "*"
-  checksum: aa74e86ad8191524ac451ab99a3e2f457bb72582a0148971dc750be656b16518f3ab147a09b11cb7b9761d3aa33a1093958dfb36bc6b300f9e1e16b3d95b6252
+  checksum: c9c16bf04166ae15d5d494723805b469e149a01bc5b50184d6bac1ee0fe854f13b492241d229a81b4949c0a081a94d95b78a479c63a875b9218ad3c27eb90935
   languageName: node
   linkType: hard
 
@@ -16225,9 +16225,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rollup@npm:^3.17.1":
-  version: 3.17.1
-  resolution: "rollup@npm:3.17.1"
+"rollup@npm:^3.17.2":
+  version: 3.17.2
+  resolution: "rollup@npm:3.17.2"
   dependencies:
     fsevents: ~2.3.2
   dependenciesMeta:
@@ -16235,7 +16235,7 @@ __metadata:
       optional: true
   bin:
     rollup: dist/bin/rollup
-  checksum: 3c6076eba228a6623b886929154ebbb9ddfb6a044e567456eeb6257b5235f4fd740655836b539155b1b25697f38f5d189bf81b9ce0624ce5aafc6c8620bd80c0
+  checksum: 9473eb7e7ffdb74c8e01e813eccb2e81e86cd429aea4705c424a5369845bedd871e715347a53be04a157f8febb99a8e502c124b896141e06d94fb86d6e121721
   languageName: node
   linkType: hard
 
@@ -16244,7 +16244,7 @@ __metadata:
   resolution: "root-workspace-0b6124@workspace:."
   dependencies:
     "@babel/core": ^7.20.12
-    "@polkadot/dev": ^0.68.38
+    "@polkadot/dev": ^0.68.41
     "@types/jest": ^29.4.0
     i18next-scanner: ^4.1.1
     sinon-chrome: ^3.0.1