Replace styled-components with Emotion (#1883)

* Replace styled-components with Emotion in ui * react-dock * Remainder * Fix * Format * Update snapshots * Create bright-sheep-joke.md
2025-06-28 08:53:14 +03:00 · 2025-06-01 09:59:13 -04:00 · 2025-06-01 09:59:13 -04:00 · 61632768a7
commit 61632768a7
parent 585d6b9220
65 changed files with 332 additions and 858 deletions
--- a/.changeset/bright-sheep-joke.md
+++ b/.changeset/bright-sheep-joke.md
@ -0,0 +1,10 @@
+---
+'@redux-devtools/app-core': major
+'@redux-devtools/app': major
+'@redux-devtools/inspector-monitor-test-tab': major
+'@redux-devtools/rtk-query-monitor': major
+'@redux-devtools/slider-monitor': major
+'@redux-devtools/ui': major
+---
+
+Replace styled-components with Emotion
--- a/extension/package.json
+++ b/extension/package.json
@ -25,6 +25,7 @@
  },
  "dependencies": {
    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
    "@redux-devtools/app": "workspace:^",
    "@redux-devtools/core": "workspace:^",
    "@redux-devtools/instrument": "workspace:^",
@ -44,8 +45,7 @@
    "react-json-tree": "workspace:^",
    "react-redux": "^9.2.0",
    "redux": "^5.0.1",
-    "redux-persist": "^6.0.0",
-    "styled-components": "^5.3.11"
+    "redux-persist": "^6.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.27.1",
@ -60,7 +60,6 @@
    "@types/lodash-es": "^4.17.12",
    "@types/react": "^19.1.6",
    "@types/react-dom": "^19.1.5",
-    "@types/styled-components": "^5.1.34",
    "chromedriver": "^126.0.5",
    "cross-env": "^7.0.3",
    "electron": "^31.7.7",
--- a/packages/react-dock/demo/package.json
+++ b/packages/react-dock/demo/package.json
@ -10,13 +10,13 @@
    "type-check": "tsc --noEmit"
  },
  "dependencies": {
+    "@emotion/styled": "^11.14.0",
    "react": "^19.1.0",
    "react-bootstrap": "^2.10.10",
    "react-dock": "workspace:^",
    "react-dom": "^19.1.0",
    "react-icons": "^5.5.0",
-    "react-is": "^19.1.0",
-    "styled-components": "^5.3.11"
+    "react-is": "^19.1.0"
  },
  "devDependencies": {
    "@babel/core": "^7.27.1",
@ -26,7 +26,6 @@
    "@types/node": "^22.15.21",
    "@types/react": "^19.1.6",
    "@types/react-dom": "^19.1.5",
-    "@types/styled-components": "^5.1.34",
    "babel-loader": "^10.0.0",
    "cross-env": "^7.0.3",
    "fork-ts-checker-webpack-plugin": "^9.1.0",
--- a/packages/react-dock/demo/src/App.tsx
+++ b/packages/react-dock/demo/src/App.tsx
@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import Button from 'react-bootstrap/Button';
 import Form from 'react-bootstrap/Form';
 import { BsX } from 'react-icons/bs';
-import styled from 'styled-components';
+import styled from '@emotion/styled';

 import { Dock } from 'react-dock';

--- a/packages/redux-devtools-app-core/package.json
+++ b/packages/redux-devtools-app-core/package.json
@ -61,6 +61,7 @@
    "@babel/preset-react": "^7.27.1",
    "@babel/preset-typescript": "^7.27.1",
    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
    "@reduxjs/toolkit": "^2.8.2",
    "@rjsf/core": "^5.24.10",
    "@testing-library/dom": "^10.4.0",
@ -72,7 +73,6 @@
    "@types/node": "^22.15.21",
    "@types/react": "^19.1.6",
    "@types/react-dom": "^19.1.5",
-    "@types/styled-components": "^5.1.34",
    "cross-env": "^7.0.3",
    "esbuild": "^0.25.4",
    "jest": "^29.7.0",
@ -83,21 +83,19 @@
    "redux": "^5.0.1",
    "redux-persist": "^6.0.0",
    "rimraf": "^6.0.1",
-    "styled-components": "^5.3.11",
    "ts-jest": "^29.3.4",
    "ts-node": "^10.9.2",
    "typescript": "~5.8.3"
  },
  "peerDependencies": {
    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
    "@reduxjs/toolkit": "^1.0.0 || ^2.0.0",
    "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
-    "@types/styled-components": "^5.1.34",
    "react": "^16.8.4 || ^17.0.0 || ^18.0.0 || ^19.0.0",
    "react-dom": "^16.8.4 || ^17.0.0 || ^18.0.0 || ^19.0.0",
    "react-redux": "^8.0.0 || ^9.0.0",
    "redux": "^4.0.0 || ^5.0.0",
-    "redux-persist": "^6.0.0",
-    "styled-components": "^5.3.11"
+    "redux-persist": "^6.0.0"
  }
 }
--- a/packages/redux-devtools-app-core/src/containers/DevTools.tsx
+++ b/packages/redux-devtools-app-core/src/containers/DevTools.tsx
@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { withTheme } from 'styled-components';
+import { withTheme } from '@emotion/react';
 import { LiftedAction, LiftedState } from '@redux-devtools/core';
 import { Action } from 'redux';
 import getMonitor from '../utils/getMonitor';
--- a/packages/redux-devtools-app-core/src/containers/monitors/Dispatcher.tsx
+++ b/packages/redux-devtools-app-core/src/containers/monitors/Dispatcher.tsx
@ -1,8 +1,14 @@
 // Based on https://github.com/YoruNoHikage/redux-devtools-dispatch

 import React, { Component } from 'react';
-import styled from 'styled-components';
-import { Button, Select, Editor, Toolbar } from '@redux-devtools/ui';
+import styled from '@emotion/styled';
+import {
+  Button,
+  Select,
+  Editor,
+  Toolbar,
+  Base16Theme,
+} from '@redux-devtools/ui';
 import { connect, ResolveThunks } from 'react-redux';
 import { dispatchRemotely } from '../../actions';
 import { Options } from '../../reducers/instances';
@ -12,7 +18,7 @@ export const DispatcherContainer = styled.div`
  flex-direction: column;
  flex-shrink: 0;
  padding-top: 2px;
-  background: ${(props) => props.theme.base01};
+  background: ${(props: { theme?: Base16Theme }) => props.theme!.base01};
 `;

 export const CodeContainer = styled.div`
@ -24,7 +30,7 @@ export const CodeContainer = styled.div`
 export const ActionContainer = styled.div`
  display: table;
  width: 100%;
-  color: ${(props) => props.theme.base06};
+  color: ${(props: { theme?: Base16Theme }) => props.theme!.base06};

  > div {
    display: table-row;
--- a/packages/redux-devtools-app-core/src/containers/monitors/InspectorWrapper/ChartTab.tsx
+++ b/packages/redux-devtools-app-core/src/containers/monitors/InspectorWrapper/ChartTab.tsx
@ -1,6 +1,6 @@
 import React, { Component, RefCallback } from 'react';
 import { connect, ResolveThunks } from 'react-redux';
-import { withTheme } from 'styled-components';
+import { withTheme } from '@emotion/react';
 import { tree } from 'd3-state-visualizer';
 import type { HierarchyPointNode, Node, Options } from 'd3-state-visualizer';
 import { getPath } from '../ChartMonitorWrapper';
--- a/packages/redux-devtools-app-core/src/containers/monitors/InspectorWrapper/VisualDiffTab.tsx
+++ b/packages/redux-devtools-app-core/src/containers/monitors/InspectorWrapper/VisualDiffTab.tsx
@ -1,8 +1,8 @@
 import React, { Component } from 'react';
 import type { Delta } from 'jsondiffpatch';
 import * as htmlFormatter from 'jsondiffpatch/formatters/html';
-import styled, { ThemedStyledProps } from 'styled-components';
-import { effects, Theme } from '@redux-devtools/ui';
+import styled from '@emotion/styled';
+import { Base16Theme, effects } from '@redux-devtools/ui';

 export const StyledContainer = styled.div`
  .jsondiffpatch-delta {
@ -19,8 +19,7 @@ export const StyledContainer = styled.div`
    padding: 2px 3px;
    border-radius: 3px;
    position: relative;
-    ${/* eslint-disable-next-line @typescript-eslint/no-empty-object-type */ ''}
-    color: ${(props: ThemedStyledProps<{}, Theme>) => props.theme.base07};
+    color: ${(props: { theme?: Base16Theme }) => props.theme!.base07};
    display: inline-block;
  }

@ -44,25 +43,22 @@ export const StyledContainer = styled.div`
  .jsondiffpatch-modified .jsondiffpatch-right-value:before {
    vertical-align: top;
    padding: 2px;
-    ${/* eslint-disable-next-line @typescript-eslint/no-empty-object-type */ ''}
-    color: ${(props: ThemedStyledProps<{}, Theme>) => props.theme.base0E};
+    color: ${(props) => props.theme.base0E};
    content: ' => ';
  }

  .jsondiffpatch-added .jsondiffpatch-value pre,
  .jsondiffpatch-modified .jsondiffpatch-right-value pre,
  .jsondiffpatch-textdiff-added {
-    ${/* eslint-disable-next-line @typescript-eslint/no-empty-object-type */ ''}
-    background: ${(props: ThemedStyledProps<{}, Theme>) =>
-      effects.color(props.theme.base0B, 'alpha', 0.2)};
+    background: ${(props: { theme?: Base16Theme }) =>
+      effects.color(props.theme!.base0B, 'alpha', 0.2)};
  }

  .jsondiffpatch-deleted pre,
  .jsondiffpatch-modified .jsondiffpatch-left-value pre,
  .jsondiffpatch-textdiff-deleted {
-    ${/* eslint-disable-next-line @typescript-eslint/no-empty-object-type */ ''}
-    background: ${(props: ThemedStyledProps<{}, Theme>) =>
-      effects.color(props.theme.base08, 'alpha', 0.2)};
+    background: ${(props: { theme?: Base16Theme }) =>
+      effects.color(props.theme!.base08, 'alpha', 0.2)};
    text-decoration: line-through;
  }

@ -129,14 +125,12 @@ export const StyledContainer = styled.div`
    padding: 2px 0;
    padding-right: 5px;
    vertical-align: top;
-    ${/* eslint-disable-next-line @typescript-eslint/no-empty-object-type */ ''}
-    color: ${(props: ThemedStyledProps<{}, Theme>) => props.theme.base0D};
+    color: ${(props) => props.theme.base0D};
  }

  .jsondiffpatch-property-name:after {
    content: ': ';
-    ${/* eslint-disable-next-line @typescript-eslint/no-empty-object-type */ ''}
-    color: ${(props: ThemedStyledProps<{}, Theme>) => props.theme.base07};
+    color: ${(props) => props.theme.base07};
  }

  .jsondiffpatch-child-node-type-array > .jsondiffpatch-property-name:after {
@ -172,8 +166,7 @@ export const StyledContainer = styled.div`
  }

  .jsondiffpatch-value pre:after {
-    ${/* eslint-disable-next-line @typescript-eslint/no-empty-object-type */ ''}
-    color: ${(props: ThemedStyledProps<{}, Theme>) => props.theme.base07};
+    color: ${(props) => props.theme.base07};
    content: ',';
  }

@ -196,8 +189,7 @@ export const StyledContainer = styled.div`

  .jsondiffpatch-moved .jsondiffpatch-moved-destination {
    display: inline-block;
-    ${/* eslint-disable-next-line @typescript-eslint/no-empty-object-type */ ''}
-    background: ${(props: ThemedStyledProps<{}, Theme>) => props.theme.base0A};
+    background: ${(props) => props.theme.base0A};
  }

  .jsondiffpatch-moved .jsondiffpatch-moved-destination:before {
--- a/packages/redux-devtools-app-core/src/containers/monitors/Slider.tsx
+++ b/packages/redux-devtools-app-core/src/containers/monitors/Slider.tsx
@ -1,13 +1,14 @@
 import React, { Component } from 'react';
-import styled, { withTheme } from 'styled-components';
+import styled from '@emotion/styled';
+import { withTheme } from '@emotion/react';
 import { SliderMonitor } from '@redux-devtools/slider-monitor';
 import { LiftedAction } from '@redux-devtools/core';
 import { Action } from 'redux';
-import { ThemeFromProvider } from '@redux-devtools/ui';
+import { Base16Theme, ThemeFromProvider } from '@redux-devtools/ui';
 import { State } from '../../reducers/instances';

 const SliderWrapper = styled.div`
-  border-color: ${(props) => props.theme.base02};
+  border-color: ${(props: { theme?: Base16Theme }) => props.theme!.base02};
  border-style: solid;
  border-width: 1px 0;
 `;
--- a/packages/redux-devtools-app/package.json
+++ b/packages/redux-devtools-app/package.json
@ -57,6 +57,7 @@
    "@babel/preset-react": "^7.27.1",
    "@babel/preset-typescript": "^7.27.1",
    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
    "@reduxjs/toolkit": "^2.8.2",
    "@rjsf/core": "^5.24.10",
    "@types/jsan": "^3.1.5",
@ -65,7 +66,6 @@
    "@types/react": "^19.1.6",
    "@types/react-dom": "^19.1.5",
    "@types/socketcluster-client": "^19.1.0",
-    "@types/styled-components": "^5.1.34",
    "@types/webpack-env": "^1.18.8",
    "babel-loader": "^10.0.0",
    "cross-env": "^7.0.3",
@ -79,7 +79,6 @@
    "react-dom": "^19.1.0",
    "rimraf": "^6.0.1",
    "style-loader": "^4.0.0",
-    "styled-components": "^5.3.11",
    "ts-jest": "^29.3.4",
    "ts-node": "^10.9.2",
    "typescript": "~5.8.3",
@ -89,11 +88,10 @@
  },
  "peerDependencies": {
    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
    "@reduxjs/toolkit": "^1.0.0 || ^2.0.0",
    "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
-    "@types/styled-components": "^5.1.34",
    "react": "^16.8.4 || ^17.0.0 || ^18.0.0 || ^19.0.0",
-    "react-dom": "^16.8.4 || ^17.0.0 || ^18.0.0 || ^19.0.0",
-    "styled-components": "^5.3.11"
+    "react-dom": "^16.8.4 || ^17.0.0 || ^18.0.0 || ^19.0.0"
  }
 }
--- a/packages/redux-devtools-cli/package.json
+++ b/packages/redux-devtools-cli/package.json
@ -43,6 +43,7 @@
  "dependencies": {
    "@apollo/server": "^4.12.1",
    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
    "@redux-devtools/app": "workspace:^",
    "@reduxjs/toolkit": "^2.8.2",
    "@types/react": "^19.1.6",
@ -65,7 +66,6 @@
    "semver": "^7.7.2",
    "socketcluster-server": "^19.1.1",
    "sqlite3": "^5.1.7",
-    "styled-components": "^5.3.11",
    "uuid": "^11.1.0"
  },
  "devDependencies": {
@ -81,7 +81,6 @@
    "@types/semver": "^7.7.0",
    "@types/socketcluster-client": "^19.1.0",
    "@types/socketcluster-server": "^19.0.1",
-    "@types/styled-components": "^5.1.34",
    "@types/supertest": "^6.0.3",
    "@types/uuid": "^10.0.0",
    "globals": "^16.1.0",
--- a/packages/redux-devtools-inspector-monitor-test-tab/demo/package.json
+++ b/packages/redux-devtools-inspector-monitor-test-tab/demo/package.json
@ -11,6 +11,7 @@
  },
  "dependencies": {
    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
    "@redux-devtools/core": "workspace:^",
    "@redux-devtools/dock-monitor": "workspace:^",
    "@redux-devtools/inspector-monitor": "workspace:^",
@ -24,8 +25,7 @@
    "react-redux": "^9.2.0",
    "react-router-dom": "^7.6.1",
    "redux": "^5.0.1",
-    "redux-logger": "^3.0.6",
-    "styled-components": "^5.3.11"
+    "redux-logger": "^3.0.6"
  },
  "devDependencies": {
    "@babel/core": "^7.27.1",
@ -37,7 +37,6 @@
    "@types/react": "^19.1.6",
    "@types/react-dom": "^19.1.5",
    "@types/redux-logger": "^3.0.13",
-    "@types/styled-components": "^5.1.34",
    "@types/webpack-env": "^1.18.8",
    "babel-loader": "^10.0.0",
    "cross-env": "^7.0.3",
--- a/packages/redux-devtools-inspector-monitor-test-tab/package.json
+++ b/packages/redux-devtools-inspector-monitor-test-tab/package.json
@ -61,6 +61,7 @@
    "@babel/preset-react": "^7.27.1",
    "@babel/preset-typescript": "^7.27.1",
    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
    "@redux-devtools/core": "workspace:^",
    "@redux-devtools/inspector-monitor": "workspace:^",
    "@testing-library/dom": "^10.4.0",
@ -81,12 +82,11 @@
  },
  "peerDependencies": {
    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
    "@redux-devtools/inspector-monitor": "workspace:^",
    "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
-    "@types/styled-components": "^5.1.34",
    "react": "^16.8.4 || ^17.0.0 || ^18.0.0 || ^19.0.0",
    "react-dom": "^16.8.4 || ^17.0.0 || ^18.0.0 || ^19.0.0",
-    "redux": "^3.4.0 || ^4.0.0 || ^5.0.0",
-    "styled-components": "^5.3.11"
+    "redux": "^3.4.0 || ^4.0.0 || ^5.0.0"
  }
 }
--- a/packages/redux-devtools-rtk-query-monitor/demo/package.json
+++ b/packages/redux-devtools-rtk-query-monitor/demo/package.json
@ -13,6 +13,7 @@
    "@babel/runtime": "^7.27.1",
    "@chakra-ui/react": "^3.19.1",
    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
    "@mswjs/data": "^0.16.2",
    "@redux-devtools/core": "workspace:^",
    "@redux-devtools/dock-monitor": "workspace:^",
@ -24,8 +25,7 @@
    "react-icons": "^5.5.0",
    "react-is": "^19.1.0",
    "react-redux": "^9.2.0",
-    "react-router-dom": "^7.6.1",
-    "styled-components": "^5.3.11"
+    "react-router-dom": "^7.6.1"
  },
  "devDependencies": {
    "@babel/core": "^7.27.1",
@ -36,7 +36,6 @@
    "@types/node": "^22.15.21",
    "@types/react": "^19.1.6",
    "@types/react-dom": "^19.1.5",
-    "@types/styled-components": "^5.1.34",
    "babel-loader": "^10.0.0",
    "copy-webpack-plugin": "^13.0.0",
    "cross-env": "^7.0.3",
--- a/packages/redux-devtools-rtk-query-monitor/package.json
+++ b/packages/redux-devtools-rtk-query-monitor/package.json
@ -63,6 +63,7 @@
    "@babel/preset-typescript": "^7.27.1",
    "@emotion/babel-preset-css-prop": "^11.12.0",
    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
    "@redux-devtools/core": "workspace:^",
    "@reduxjs/toolkit": "^2.8.2",
    "@testing-library/dom": "^10.4.0",
@ -84,12 +85,11 @@
  },
  "peerDependencies": {
    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
    "@redux-devtools/core": "workspace:^",
    "@reduxjs/toolkit": "^1.0.0 || ^2.0.0",
    "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
-    "@types/styled-components": "^5.1.34",
    "react": "^16.8.4 || ^17.0.0 || ^18.0.0 || ^19.0.0",
-    "redux": "^3.4.0 || ^4.0.0 || ^5.0.0",
-    "styled-components": "^5.3.11"
+    "redux": "^3.4.0 || ^4.0.0 || ^5.0.0"
  }
 }
--- a/packages/redux-devtools-slider-monitor/examples/todomvc/package.json
+++ b/packages/redux-devtools-slider-monitor/examples/todomvc/package.json
@ -15,6 +15,8 @@
    "type-check": "tsc --noEmit"
  },
  "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
    "@redux-devtools/core": "workspace:^",
    "@redux-devtools/dock-monitor": "workspace:^",
    "@redux-devtools/log-monitor": "workspace:^",
@ -25,7 +27,6 @@
    "react-is": "^19.1.0",
    "react-redux": "^9.2.0",
    "redux": "^5.0.1",
-    "styled-components": "^5.3.11",
    "todomvc-app-css": "^2.4.3"
  },
  "devDependencies": {
@ -36,7 +37,6 @@
    "@types/node": "^22.15.21",
    "@types/react": "^19.1.6",
    "@types/react-dom": "^19.1.5",
-    "@types/styled-components": "^5.1.34",
    "@types/webpack-env": "^1.18.8",
    "babel-loader": "^10.0.0",
    "cross-env": "^7.0.3",
--- a/packages/redux-devtools-slider-monitor/package.json
+++ b/packages/redux-devtools-slider-monitor/package.json
@ -52,11 +52,11 @@
    "typescript": "~5.8.3"
  },
  "peerDependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
    "@redux-devtools/core": "workspace:^",
    "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
-    "@types/styled-components": "^5.1.34",
    "react": "^16.8.4 || ^17.0.0 || ^18.0.0 || ^19.0.0",
-    "redux": "^3.4.0 || ^4.0.0 || ^5.0.0",
-    "styled-components": "^5.3.11"
+    "redux": "^3.4.0 || ^4.0.0 || ^5.0.0"
  }
 }
--- a/packages/redux-devtools-ui/.stylelintrc
+++ b/packages/redux-devtools-ui/.stylelintrc
@ -1,7 +0,0 @@
-{
-  "processors": ["stylelint-processor-styled-components"],
-  "extends": [
-    "stylelint-config-recommended",
-    "stylelint-config-styled-components"
-  ]
-}
--- a/packages/redux-devtools-ui/package.json
+++ b/packages/redux-devtools-ui/package.json
@ -36,7 +36,6 @@
    "clean": "rimraf lib storybook-static",
    "test": "jest",
    "lint": "eslint .",
-    "lint:css": "stylelint \"./src/**/*.js\"",
    "type-check": "tsc --noEmit",
    "prepack": "pnpm run clean && pnpm run build",
    "prepublish": "pnpm run type-check && pnpm run lint && pnpm run test"
@ -64,6 +63,8 @@
    "@babel/preset-env": "^7.27.2",
    "@babel/preset-react": "^7.27.1",
    "@babel/preset-typescript": "^7.27.1",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
    "@storybook/addon-onboarding": "^9.0.2",
    "@storybook/react-vite": "^9.0.2",
    "@testing-library/dom": "^10.4.0",
@ -73,7 +74,6 @@
    "@types/node": "^22.15.21",
    "@types/jest": "^29.5.14",
    "@types/react": "^19.1.6",
-    "@types/styled-components": "^5.1.34",
    "babel-loader": "^10.0.0",
    "csstype": "^3.1.3",
    "jest": "^29.7.0",
@ -84,19 +84,14 @@
    "react-is": "^19.1.0",
    "rimraf": "^6.0.1",
    "storybook": "^9.0.2",
-    "styled-components": "^5.3.11",
-    "stylelint": "^16.19.1",
-    "stylelint-config-standard": "^38.0.0",
-    "stylelint-config-styled-components": "^0.1.1",
-    "stylelint-processor-styled-components": "^1.10.0",
    "ts-jest": "^29.3.4",
    "typescript": "~5.8.3",
    "vite": "^6.3.5"
  },
  "peerDependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
    "@types/react": "^16.3.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
-    "@types/styled-components": "^5.1.34",
-    "react": "^16.3.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
-    "styled-components": "^5.3.11"
+    "react": "^16.3.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
  }
 }
--- a/packages/redux-devtools-ui/src/Button/Button.stories.tsx
+++ b/packages/redux-devtools-ui/src/Button/Button.stories.tsx
@ -1,5 +1,5 @@
 import React from 'react';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import { MdFiberManualRecord } from 'react-icons/md';
 import { Meta, StoryObj } from '@storybook/react-vite';
 import Button from './';
--- a/packages/redux-devtools-ui/src/Button/styles/common.ts
+++ b/packages/redux-devtools-ui/src/Button/styles/common.ts
@ -1,4 +1,4 @@
-import { css, ThemedStyledProps } from 'styled-components';
+import { css } from '@emotion/react';
 import { fadeIn } from '../../utils/animations';
 import colorEffect from '../../utils/color';
 import { Mark, Size, TooltipPosition } from '../Button';
@ -138,7 +138,7 @@ export const commonStyle = ({
  theme,
  mark,
  size,
-}: ThemedStyledProps<CommonStyleProps, Theme>) => css`
+}: CommonStyleProps & { theme: Theme }) => css`
  display: inline-block;
  position: relative;
  flex-shrink: 0;
@ -188,7 +188,7 @@ export const tooltipStyle = ({
  tooltipPosition,
  mark,
  size,
-}: ThemedStyledProps<TooltipStyleProps, Theme>) => css`
+}: TooltipStyleProps & { theme: Theme }) => css`
  ${commonStyle({ theme, mark, size })}

  &:before {
--- a/packages/redux-devtools-ui/src/Button/styles/default.ts
+++ b/packages/redux-devtools-ui/src/Button/styles/default.ts
@ -1,4 +1,4 @@
-import { css, ThemedStyledProps } from 'styled-components';
+import { css } from '@emotion/react';
 import { Theme } from '../../themes/default';

 export interface StyleProps {
@ -10,7 +10,7 @@ export const style = ({
  theme,
  primary,
  disabled,
-}: ThemedStyledProps<StyleProps, Theme>) => css`
+}: StyleProps & { theme: Theme }) => css`
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  outline: none;
--- a/packages/redux-devtools-ui/src/Button/styles/material.ts
+++ b/packages/redux-devtools-ui/src/Button/styles/material.ts
@ -1,4 +1,4 @@
-import { css, ThemedStyledProps } from 'styled-components';
+import { css } from '@emotion/react';
 import { ripple } from '../../utils/animations';
 import { StyleProps } from './default';
 import { Theme } from '../../themes/default';
@ -7,7 +7,7 @@ export const style = ({
  theme,
  primary,
  disabled,
-}: ThemedStyledProps<StyleProps, Theme>) => css`
+}: StyleProps & { theme: Theme }) => css`
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  outline: none;
--- a/packages/redux-devtools-ui/src/Container/index.tsx
+++ b/packages/redux-devtools-ui/src/Container/index.tsx
@ -1,5 +1,5 @@
 import React from 'react';
-import { ThemeProvider } from 'styled-components';
+import { ThemeProvider } from '@emotion/react';
 import { useTheme, ThemeData } from '../utils/theme';
 import { MainContainerWrapper, ContainerWrapper } from './styles';
 import { Theme } from '../themes/default';
--- a/packages/redux-devtools-ui/src/Container/styles/index.ts
+++ b/packages/redux-devtools-ui/src/Container/styles/index.ts
@ -1,4 +1,4 @@
-import styled, { ThemedStyledProps } from 'styled-components';
+import styled from '@emotion/styled';
 import color from '../../utils/color';
 import { Theme } from '../../themes/default';

@ -8,9 +8,8 @@ export const MainContainerWrapper = styled.div`
  width: 100%;
  flex-flow: column nowrap;
  overflow: auto;
-  ${/* eslint-disable-next-line @typescript-eslint/no-empty-object-type */ ''}
-  background-color: ${(props: ThemedStyledProps<{}, Theme>) =>
-    color(props.theme.base00, 'lighten', 0.03)};
+  background-color: ${(props: { theme?: Theme }) =>
+    color(props.theme!.base00, 'lighten', 0.03)};
  color: ${(props) => props.theme.base07};
  font-size: 12px;

--- a/packages/redux-devtools-ui/src/ContextMenu/ContextMenu.stories.tsx
+++ b/packages/redux-devtools-ui/src/ContextMenu/ContextMenu.stories.tsx
@ -1,5 +1,5 @@
 import React from 'react';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import { Meta, StoryObj } from '@storybook/react-vite';
 import ContextMenu from './';
 import { items } from './data';
--- a/packages/redux-devtools-ui/src/ContextMenu/styles/index.ts
+++ b/packages/redux-devtools-ui/src/ContextMenu/styles/index.ts
@ -1,4 +1,4 @@
-import { css, ThemedStyledProps } from 'styled-components';
+import { css } from '@emotion/react';
 import { Theme } from '../../themes/default';

 interface StyleProps {
@ -12,7 +12,7 @@ export default ({
  left,
  top,
  visible,
-}: ThemedStyledProps<StyleProps, Theme>) => css`
+}: StyleProps & { theme: Theme }) => css`
  ${visible
    ? `
    visibility: visible;
--- a/packages/redux-devtools-ui/src/Dialog/styles/default.ts
+++ b/packages/redux-devtools-ui/src/Dialog/styles/default.ts
@ -1,4 +1,4 @@
-import { css, ThemedStyledProps } from 'styled-components';
+import { css } from '@emotion/react';
 import { Theme } from '../../themes/default';

 export interface StyleProps {
@ -10,7 +10,7 @@ export const style = ({
  theme,
  open,
  fullWidth,
-}: ThemedStyledProps<StyleProps, Theme>) => css`
+}: StyleProps & { theme: Theme }) => css`
  position: fixed;
  top: 0px;
  right: 0px;
--- a/packages/redux-devtools-ui/src/Dialog/styles/material.ts
+++ b/packages/redux-devtools-ui/src/Dialog/styles/material.ts
@ -1,4 +1,4 @@
-import { css, ThemedStyledProps } from 'styled-components';
+import { css } from '@emotion/react';
 import { StyleProps } from './default';
 import { Theme } from '../../themes/default';

@ -6,7 +6,7 @@ export const style = ({
  theme,
  open,
  fullWidth,
-}: ThemedStyledProps<StyleProps, Theme>) => css`
+}: StyleProps & { theme: Theme }) => css`
  position: fixed;
  top: 0px;
  right: 0px;
--- a/packages/redux-devtools-ui/src/Editor/Editor.tsx
+++ b/packages/redux-devtools-ui/src/Editor/Editor.tsx
@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import CodeMirror, { EditorChange } from 'codemirror';
 import type { Base16Theme } from 'react-base16-styling';
 import { defaultStyle, themedStyle } from './styles';
@ -16,10 +16,10 @@ import 'codemirror/addon/fold/foldgutter.css';

 const EditorContainer = styled.div(
  '' as unknown as TemplateStringsArray,
-  ({ theme }: { theme: Theme }) =>
-    theme.scheme === 'default' && theme.light
+  ({ theme }: { theme?: Base16Theme }) =>
+    theme!.scheme === 'default' && (theme as Theme).light
      ? defaultStyle
-      : themedStyle(theme),
+      : themedStyle(theme!),
 );

 export interface EditorProps {
--- a/packages/redux-devtools-ui/src/Editor/styles/index.ts
+++ b/packages/redux-devtools-ui/src/Editor/styles/index.ts
@ -1,5 +1,5 @@
-import { css } from 'styled-components';
-import { Theme } from '../../themes/default';
+import { css } from '@emotion/react';
+import { Base16Theme } from 'react-base16-styling';

 export const defaultStyle = `
  height: 100%;
@ -11,7 +11,7 @@ export const defaultStyle = `
  }
 `;

-export const themedStyle = (theme: Theme) => css`
+export const themedStyle = (theme: Base16Theme) => css`
  height: 100%;

  > div {
--- a/packages/redux-devtools-ui/src/Form/styles/index.ts
+++ b/packages/redux-devtools-ui/src/Form/styles/index.ts
@ -1,8 +1,7 @@
-import { css, ThemedStyledProps } from 'styled-components';
+import { css } from '@emotion/react';
 import { Theme } from '../../themes/default';

-// eslint-disable-next-line @typescript-eslint/no-empty-object-type
-export default ({ theme }: ThemedStyledProps<{}, Theme>) => css`
+export default ({ theme }: { theme: Theme }) => css`
  padding: 10px;
  line-height: 1.846;
  font-size: 14px;
--- a/packages/redux-devtools-ui/src/Notification/Notification.stories.tsx
+++ b/packages/redux-devtools-ui/src/Notification/Notification.stories.tsx
@ -1,5 +1,5 @@
 import React from 'react';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import { Meta, StoryObj } from '@storybook/react-vite';
 import Notification from './';

--- a/packages/redux-devtools-ui/src/Notification/styles/index.ts
+++ b/packages/redux-devtools-ui/src/Notification/styles/index.ts
@ -1,4 +1,4 @@
-import { css, ThemedStyledProps } from 'styled-components';
+import { css } from '@emotion/react';
 import { Theme } from '../../themes/default';
 import { Type } from '../Notification';

@ -19,7 +19,7 @@ interface StyleProps {
  type: Type;
 }

-export default ({ theme, type }: ThemedStyledProps<StyleProps, Theme>) => css`
+export default ({ theme, type }: StyleProps & { theme: Theme }) => css`
  display: flex;
  align-items: flex-start;
  flex-shrink: 0;
--- a/packages/redux-devtools-ui/src/SegmentedControl/SegmentedControl.stories.tsx
+++ b/packages/redux-devtools-ui/src/SegmentedControl/SegmentedControl.stories.tsx
@ -1,5 +1,5 @@
 import React from 'react';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import { Meta, StoryObj } from '@storybook/react-vite';
 import SegmentedControl from './';

--- a/packages/redux-devtools-ui/src/SegmentedControl/styles/index.ts
+++ b/packages/redux-devtools-ui/src/SegmentedControl/styles/index.ts
@ -1,4 +1,4 @@
-import { css, ThemedStyledProps } from 'styled-components';
+import { css } from '@emotion/react';
 import color from '../../utils/color';
 import { Theme } from '../../themes/default';

@ -6,10 +6,7 @@ interface StyleProps {
  disabled: boolean | undefined;
 }

-export default ({
-  theme,
-  disabled,
-}: ThemedStyledProps<StyleProps, Theme>) => css`
+export default ({ theme, disabled }: StyleProps & { theme: Theme }) => css`
  display: flex;
  flex-shrink: 0;

--- a/packages/redux-devtools-ui/src/Select/Select.stories.tsx
+++ b/packages/redux-devtools-ui/src/Select/Select.stories.tsx
@ -1,5 +1,5 @@
 import React from 'react';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import Select from './';
 import { options } from './options';
 import { Meta, StoryObj } from '@storybook/react-vite';
--- a/packages/redux-devtools-ui/src/Slider/Slider.stories.tsx
+++ b/packages/redux-devtools-ui/src/Slider/Slider.stories.tsx
@ -1,5 +1,5 @@
 import React from 'react';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import { Meta, StoryObj } from '@storybook/react-vite';
 import Slider from './';

--- a/packages/redux-devtools-ui/src/Slider/styles/common.ts
+++ b/packages/redux-devtools-ui/src/Slider/styles/common.ts
@ -1,8 +1,7 @@
-import { css, ThemedStyledProps } from 'styled-components';
+import { css } from '@emotion/react';
 import { Theme } from '../../themes/default';

-// eslint-disable-next-line @typescript-eslint/no-empty-object-type
-export const containerStyle = ({ theme }: ThemedStyledProps<{}, Theme>) => css`
+export const containerStyle = ({ theme }: { theme: Theme }) => css`
  display: flex;
  align-items: center;

--- a/packages/redux-devtools-ui/src/Slider/styles/default.ts
+++ b/packages/redux-devtools-ui/src/Slider/styles/default.ts
@ -6,7 +6,7 @@ Based on:
 http://codepen.io/thebabydino/pen/YPOPxr
 */

-import { css, ThemedStyledProps } from 'styled-components';
+import { css } from '@emotion/react';
 import { prefixSelectors } from '../../utils/autoPrefix';
 import { Theme } from '../../themes/default';

@ -21,7 +21,7 @@ export const style = ({
  percent,
  disabled,
  withLabel,
-}: ThemedStyledProps<StyleProps, Theme>) => css`
+}: StyleProps & { theme: Theme }) => css`
  display: block;
  width: 100%;
  position: relative;
--- a/packages/redux-devtools-ui/src/Slider/styles/material.ts
+++ b/packages/redux-devtools-ui/src/Slider/styles/material.ts
@ -1,4 +1,4 @@
-import { css, ThemedStyledProps } from 'styled-components';
+import { css } from '@emotion/react';
 import { prefixSelectors } from '../../utils/autoPrefix';
 import color from '../../utils/color';
 import { animationCurve } from '../../utils/animations';
@ -10,7 +10,7 @@ export const style = ({
  percent,
  disabled,
  withLabel,
-}: ThemedStyledProps<StyleProps, Theme>) => css`
+}: StyleProps & { theme: Theme }) => css`
  display: block;
  width: 100%;
  position: relative;
--- a/packages/redux-devtools-ui/src/Tabs/Tabs.stories.tsx
+++ b/packages/redux-devtools-ui/src/Tabs/Tabs.stories.tsx
@ -1,5 +1,5 @@
 import React from 'react';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import { Meta, StoryObj } from '@storybook/react-vite';
 import Tabs from './';
 import { tabs, simple10Tabs } from './data';
--- a/packages/redux-devtools-ui/src/Tabs/styles/common.ts
+++ b/packages/redux-devtools-ui/src/Tabs/styles/common.ts
@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import { Position } from '../Tabs';

 interface StyleProps {
--- a/packages/redux-devtools-ui/src/Tabs/styles/default.ts
+++ b/packages/redux-devtools-ui/src/Tabs/styles/default.ts
@ -1,14 +1,11 @@
-import { css, ThemedStyledProps } from 'styled-components';
+import { css } from '@emotion/react';
 import { Theme } from '../../themes/default';

 export interface StyleProps {
  main: boolean | undefined;
 }

-export const style = ({
-  theme,
-  main,
-}: ThemedStyledProps<StyleProps, Theme>) => css`
+export const style = ({ theme, main }: StyleProps & { theme: Theme }) => css`
  display: flex;
  flex: 0 0 1;
  padding-left: 1px;
--- a/packages/redux-devtools-ui/src/Tabs/styles/material.ts
+++ b/packages/redux-devtools-ui/src/Tabs/styles/material.ts
@ -1,12 +1,9 @@
-import { css, ThemedStyledProps } from 'styled-components';
+import { css } from '@emotion/react';
 import { ripple } from '../../utils/animations';
 import { Theme } from '../../themes/default';
 import { StyleProps } from './default';

-export const style = ({
-  theme,
-  main,
-}: ThemedStyledProps<StyleProps, Theme>) => css`
+export const style = ({ theme, main }: StyleProps & { theme: Theme }) => css`
  display: flex;
  flex: 0 0 1;
  padding-left: 1px;
--- a/packages/redux-devtools-ui/src/Toolbar/Toolbar.stories.tsx
+++ b/packages/redux-devtools-ui/src/Toolbar/Toolbar.stories.tsx
@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import { Meta, StoryObj } from '@storybook/react-vite';
 import { MdPlayArrow } from 'react-icons/md';
 import { MdFiberManualRecord } from 'react-icons/md';
--- a/packages/redux-devtools-ui/src/Toolbar/styles/Divider.ts
+++ b/packages/redux-devtools-ui/src/Toolbar/styles/Divider.ts
@ -1,7 +1,10 @@
-import styled from 'styled-components';
+import styled from '@emotion/styled';
+import { Base16Theme } from 'react-base16-styling';

 const Divider = styled.div`
-  background-color: ${(props) => props.theme.base02};
+  background-color: ${(props: {
+    theme?: Base16Theme & { inputHeight?: number };
+  }) => props.theme!.base02};
  box-shadow: 1px 1px 2px ${(props) => props.theme.base00};
  height: ${(props) => props.theme.inputHeight || '30'}px;
  width: 1px;
--- a/packages/redux-devtools-ui/src/Toolbar/styles/Spacer.ts
+++ b/packages/redux-devtools-ui/src/Toolbar/styles/Spacer.ts
@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from '@emotion/styled';

 const Spacer = styled.div`
  flex-grow: 1;
--- a/packages/redux-devtools-ui/src/Toolbar/styles/Toolbar.ts
+++ b/packages/redux-devtools-ui/src/Toolbar/styles/Toolbar.ts
@ -1,4 +1,4 @@
-import styled, { ThemedStyledInterface } from 'styled-components';
+import styled from '@emotion/styled';
 import type { Base16Theme } from 'react-base16-styling';
 import * as CSS from 'csstype';

@ -11,11 +11,9 @@ export interface Props {
  noBorder?: boolean;
 }

-const Toolbar = (
-  styled as ThemedStyledInterface<
-    Base16Theme & { fontFamily?: CSS.Property.FontFamily }
-  >
-).div<Props>`
+const Toolbar = styled.div<
+  Props & { theme?: Base16Theme & { fontFamily?: CSS.Property.FontFamily } }
+>`
  display: flex;
  flex-shrink: 0;
  box-sizing: border-box;
@ -30,11 +28,11 @@ const Toolbar = (
  position: relative;
  ${({ borderPosition, theme }) =>
    borderPosition && `border-${borderPosition}: 1px solid ${theme.base02};`}
-  
+
  & > div {
    margin: auto ${(props) => (props.noBorder ? '0' : '1px;')};
  }
-  
+
  & button {
    border-radius: 0;
    ${(props) => props.noBorder && 'border-color: transparent;'}
@ -47,7 +45,7 @@ const Toolbar = (
    text-align: left;
    margin: auto 1px;
    flex-grow: 1;
-    
+
    .Select-control {
      cursor: pointer;
      border-radius: 0 !important;
--- a/packages/redux-devtools-ui/src/utils/animations.ts
+++ b/packages/redux-devtools-ui/src/utils/animations.ts
@ -1,4 +1,4 @@
-import { css, keyframes } from 'styled-components';
+import { css, keyframes } from '@emotion/react';
 import { Theme } from '../themes/default';

 export const spin = keyframes`
--- a/packages/redux-devtools-ui/src/utils/createStyledComponent.ts
+++ b/packages/redux-devtools-ui/src/utils/createStyledComponent.ts
@ -1,53 +1,29 @@
 import React from 'react';
 import styled, {
-  InterpolationFunction,
+  FunctionInterpolation,
  StyledComponent,
-  StyledComponentPropsWithRef,
-  ThemedStyledInterface,
-  ThemedStyledProps,
-} from 'styled-components';
+} from '@emotion/styled';
+import { PropsOf } from '@emotion/react';
 import type { Base16Theme } from 'react-base16-styling';
 import getDefaultTheme, { Theme } from '../themes/default';
 import { ThemeFromProvider } from './theme';

-type StyleFunction<
-  C extends keyof React.JSX.IntrinsicElements | React.ComponentType<any>,
-  // eslint-disable-next-line @typescript-eslint/no-empty-object-type
-  O extends object = {},
-> = InterpolationFunction<
-  ThemedStyledProps<StyledComponentPropsWithRef<C> & O, Theme>
->;
+type StyleFunction<Props> = FunctionInterpolation<Props>;

-interface StylesObject<
-  C extends keyof React.JSX.IntrinsicElements | React.ComponentType<any>,
-  // eslint-disable-next-line @typescript-eslint/no-empty-object-type
-  O extends object = {},
-> {
-  [type: string]: StyleFunction<C, O>;
+interface StylesObject<Props> {
+  [type: string]: StyleFunction<Props>;
 }

-type Styles<
-  C extends keyof React.JSX.IntrinsicElements | React.ComponentType<any>,
-  // eslint-disable-next-line @typescript-eslint/no-empty-object-type
-  O extends object = {},
-> = StylesObject<C, O> | StyleFunction<C, O>;
+type Styles<Props> = StylesObject<Props> | StyleFunction<Props>;

-function isStylesObject<
-  C extends keyof React.JSX.IntrinsicElements | React.ComponentType<any>,
-  // eslint-disable-next-line @typescript-eslint/no-empty-object-type
-  O extends object = {},
->(styles: Styles<C>): styles is StylesObject<C, O> {
+function isStylesObject<Props>(
+  styles: Styles<Props>,
+): styles is StylesObject<Props> {
  return typeof styles === 'object';
 }

-const getStyle = <
-  C extends keyof React.JSX.IntrinsicElements | React.ComponentType<any>,
-  // eslint-disable-next-line @typescript-eslint/no-empty-object-type
-  O extends object = {},
->(
-  styles: Styles<C, O>,
-  type: string,
-) => (isStylesObject(styles) ? styles[type] || styles.default : styles);
+const getStyle = <Props>(styles: Styles<Props>, type: string) =>
+  isStylesObject(styles) ? styles[type] || styles.default : styles;

 function isThemeFromProvider(
  theme: Theme | Base16Theme,
@ -57,14 +33,15 @@ function isThemeFromProvider(

 export default function createStyledComponent<
  C extends keyof React.JSX.IntrinsicElements | React.ComponentType<any>,
-  // eslint-disable-next-line @typescript-eslint/no-empty-object-type
-  O extends object = {},
+  O extends object,
 >(
-  styles: Styles<C, O>,
+  styles: Styles<PropsOf<C> & O & { theme: Theme }>,
  component?: C,
-): StyledComponent<C, Theme | Base16Theme, O> {
-  return (styled as ThemedStyledInterface<Theme>)((component || 'div') as C)`
-    ${(props: ThemedStyledProps<StyledComponentPropsWithRef<C> & O, Theme>) =>
+): StyledComponent<PropsOf<C> & O & { theme?: Theme | Base16Theme }> {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  return styled((component || 'div') as C)`
+    ${(props: PropsOf<C> & { theme: Theme | Base16Theme }) =>
      isThemeFromProvider(props.theme as Theme | Base16Theme)
        ? getStyle(styles, props.theme.type as string)
        : // used outside of container (theme provider)
@ -75,7 +52,7 @@ export default function createStyledComponent<
            ...props,
            theme: getDefaultTheme(props.theme as Base16Theme),
          })}
-  ` as StyledComponent<C, Theme | Base16Theme, O>;
+  ` as StyledComponent<PropsOf<C> & O & { theme?: Theme | Base16Theme }>;
 }

 // TODO: memoize it?
--- a/packages/redux-devtools-ui/src/utils/createThemedComponent.tsx
+++ b/packages/redux-devtools-ui/src/utils/createThemedComponent.tsx
@ -1,5 +1,5 @@
 import React from 'react';
-import { withTheme } from 'styled-components';
+import { withTheme } from '@emotion/react';
 import type { Base16Theme } from 'react-base16-styling';
 import getDefaultTheme, { Theme } from '../themes/default';

@ -8,10 +8,14 @@ export default <C extends React.ComponentType<any>>(
    ? C
    : never,
 ) => {
-  return withTheme((props) => {
+  return withTheme((props: { theme?: Theme }) => {
    return props.theme && props.theme.type ? (
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
      <UnthemedComponent {...props} />
    ) : (
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
      <UnthemedComponent
        {...props}
        theme={getDefaultTheme((props.theme ?? {}) as Base16Theme)}
--- a/packages/redux-devtools-ui/test/snapshots/Button.test.tsx.snap
+++ b/packages/redux-devtools-ui/test/snapshots/Button.test.tsx.snap
@ -2,10 +2,10 @@

 exports[`Button renders correctly 1`] = `
 <div
-  class="sc-dcJsrY dAhqLr"
+  class="css-jg680o"
 >
  <button
-    class="sc-eqUAAy fNGiZB"
+    class="css-g2zi5"
  >
    Text
  </button>
--- a/packages/redux-devtools-ui/test/snapshots/Container.test.tsx.snap
+++ b/packages/redux-devtools-ui/test/snapshots/Container.test.tsx.snap
@ -2,7 +2,7 @@

 exports[`Container renders correctly 1`] = `
 <div
-  class="sc-aXZVg crnRxl"
+  class="css-83ymb"
 >
  Text
 </div>
--- a/packages/redux-devtools-ui/test/snapshots/ContextMenu.test.tsx.snap
+++ b/packages/redux-devtools-ui/test/snapshots/ContextMenu.test.tsx.snap
@ -2,7 +2,7 @@

 exports[`ContextMenu renders correctly 1`] = `
 <div
-  class="sc-iGgWBj eOjwsb"
+  class="css-1x2keqt"
  style="top: 100px; left: 100px;"
 >
  <button
--- a/packages/redux-devtools-ui/test/snapshots/Dialog.test.tsx.snap
+++ b/packages/redux-devtools-ui/test/snapshots/Dialog.test.tsx.snap
@ -2,7 +2,7 @@

 exports[`Dialog renders correctly 1`] = `
 <div
-  class="sc-jXbUNg bziNId"
+  class="css-1nze9tl"
 >
  <div />
  <div>
@ -21,19 +21,19 @@ exports[`Dialog renders correctly 1`] = `
      class="mc-dialog--footer"
    >
      <div
-        class="sc-dcJsrY dAhqLr"
+        class="css-jg680o"
      >
        <button
-          class="sc-eqUAAy fNGiZB"
+          class="css-g2zi5"
        >
          Cancel
        </button>
      </div>
      <div
-        class="sc-dcJsrY dAhqLr"
+        class="css-jg680o"
      >
        <button
-          class="sc-eqUAAy jJvjWh"
+          class="css-1td9y62"
        >
          Submit
        </button>
@ -45,7 +45,7 @@ exports[`Dialog renders correctly 1`] = `

 exports[`Dialog renders modal 1`] = `
 <div
-  class="sc-jXbUNg bziNId"
+  class="css-1nze9tl"
 >
  <div />
  <div>
@ -61,19 +61,19 @@ exports[`Dialog renders modal 1`] = `
      class="mc-dialog--footer"
    >
      <div
-        class="sc-dcJsrY dAhqLr"
+        class="css-jg680o"
      >
        <button
-          class="sc-eqUAAy fNGiZB"
+          class="css-g2zi5"
        >
          Cancel
        </button>
      </div>
      <div
-        class="sc-dcJsrY dAhqLr"
+        class="css-jg680o"
      >
        <button
-          class="sc-eqUAAy jJvjWh"
+          class="css-1td9y62"
        >
          Submit
        </button>
@ -85,7 +85,7 @@ exports[`Dialog renders modal 1`] = `

 exports[`Dialog renders with props 1`] = `
 <div
-  class="sc-jXbUNg cXoIGe"
+  class="css-1cbskzi"
  open=""
 >
  <div />
@ -109,19 +109,19 @@ exports[`Dialog renders with props 1`] = `
      class="mc-dialog--footer"
    >
      <div
-        class="sc-dcJsrY dAhqLr"
+        class="css-jg680o"
      >
        <button
-          class="sc-eqUAAy fNGiZB"
+          class="css-g2zi5"
        >
          Cancel
        </button>
      </div>
      <div
-        class="sc-dcJsrY dAhqLr"
+        class="css-jg680o"
      >
        <button
-          class="sc-eqUAAy jJvjWh"
+          class="css-1td9y62"
        >
          Submit
        </button>
--- a/packages/redux-devtools-ui/test/snapshots/Editor.test.tsx.snap
+++ b/packages/redux-devtools-ui/test/snapshots/Editor.test.tsx.snap
@ -2,7 +2,7 @@

 exports[`Editor renders correctly 1`] = `
 <div
-  class="sc-dhKdcB cZUDgE"
+  class="css-1u3pnvo"
 >
  <div
    class="CodeMirror cm-s-default"
--- a/packages/redux-devtools-ui/test/snapshots/Form.test.tsx.snap
+++ b/packages/redux-devtools-ui/test/snapshots/Form.test.tsx.snap
@ -2,7 +2,7 @@

 exports[`Form renders correctly 1`] = `
 <form
-  class="sc-imWYAI iSPDym"
+  class="css-yd7kx"
 >
  <div
    class="form-group field field-object"
@ -345,10 +345,10 @@ exports[`Form renders correctly 1`] = `
          Integer range
        </label>
        <div
-          class="sc-gsFSXq jEgvpD"
+          class="css-1vryedt"
        >
          <div
-            class="sc-kAyceB iOgjoF"
+            class="css-nc7xvn"
          >
            <input
              id="root_integerRange"
@ -369,10 +369,10 @@ exports[`Form renders correctly 1`] = `
    </fieldset>
  </div>
  <div
-    class="sc-dcJsrY dAtIkD"
+    class="css-q8f4aw"
  >
    <button
-      class="sc-eqUAAy fNGiZB"
+      class="css-g2zi5"
      type="submit"
    >
      Submit
@ -383,7 +383,7 @@ exports[`Form renders correctly 1`] = `

 exports[`Form renders with no button 1`] = `
 <form
-  class="sc-imWYAI iSPDym"
+  class="css-yd7kx"
 >
  <div
    class="form-group field field-object"
@ -726,10 +726,10 @@ exports[`Form renders with no button 1`] = `
          Integer range
        </label>
        <div
-          class="sc-gsFSXq jEgvpD"
+          class="css-1vryedt"
        >
          <div
-            class="sc-kAyceB iOgjoF"
+            class="css-nc7xvn"
          >
            <input
              id="root_integerRange"
@ -755,7 +755,7 @@ exports[`Form renders with no button 1`] = `

 exports[`Form renders with primary button 1`] = `
 <form
-  class="sc-imWYAI iSPDym"
+  class="css-yd7kx"
 >
  <div
    class="form-group field field-object"
@ -1098,10 +1098,10 @@ exports[`Form renders with primary button 1`] = `
          Integer range
        </label>
        <div
-          class="sc-gsFSXq jEgvpD"
+          class="css-1vryedt"
        >
          <div
-            class="sc-kAyceB iOgjoF"
+            class="css-nc7xvn"
          >
            <input
              id="root_integerRange"
@ -1122,10 +1122,10 @@ exports[`Form renders with primary button 1`] = `
    </fieldset>
  </div>
  <div
-    class="sc-dcJsrY dAtIkD"
+    class="css-q8f4aw"
  >
    <button
-      class="sc-eqUAAy jJvjWh"
+      class="css-1td9y62"
      type="submit"
    >
      Custom button
--- a/packages/redux-devtools-ui/test/snapshots/Notification.test.tsx.snap
+++ b/packages/redux-devtools-ui/test/snapshots/Notification.test.tsx.snap
@ -2,7 +2,7 @@

 exports[`Notification renders correctly 1`] = `
 <div
-  class="sc-cwHptR dfOHxO"
+  class="css-105dgur"
  type="info"
 >
  <span>
@ -13,7 +13,7 @@ exports[`Notification renders correctly 1`] = `

 exports[`Notification renders with props 1`] = `
 <div
-  class="sc-cwHptR dfOHxO"
+  class="css-105dgur"
  type="error"
 >
  <svg
--- a/packages/redux-devtools-ui/test/snapshots/SegmentedControl.test.tsx.snap
+++ b/packages/redux-devtools-ui/test/snapshots/SegmentedControl.test.tsx.snap
@ -2,7 +2,7 @@

 exports[`SegmentedControl renders correctly 1`] = `
 <div
-  class="sc-jlZhew doebln"
+  class="css-rlakr"
 >
  <button
    data-selected="true"
--- a/packages/redux-devtools-ui/test/snapshots/Slider.test.tsx.snap
+++ b/packages/redux-devtools-ui/test/snapshots/Slider.test.tsx.snap
@ -2,7 +2,7 @@

 exports[`Slider renders correctly 1`] = `
 <div
-  class="sc-gsFSXq bjzPMz"
+  class="css-20crcy"
 >
  <input
    max="100"
@ -15,7 +15,7 @@ exports[`Slider renders correctly 1`] = `

 exports[`Slider renders with props 1`] = `
 <div
-  class="sc-gsFSXq eoPGPm"
+  class="css-1cg3ohj"
  disabled=""
 >
  <label>
--- a/packages/redux-devtools-ui/test/snapshots/Tabs.test.tsx.snap
+++ b/packages/redux-devtools-ui/test/snapshots/Tabs.test.tsx.snap
@ -2,10 +2,10 @@

 exports[`Tabs renders correctly 1`] = `
 <div
-  class="sc-dAlyuH iaKjXm"
+  class="css-1q9755x"
 >
  <div
-    class="sc-kpDqfm czFkfy"
+    class="css-1rbphu7"
  >
    <div>
      <button
@ -30,10 +30,10 @@ exports[`Tabs renders correctly 1`] = `

 exports[`Tabs renders tabs without inner components 1`] = `
 <div
-  class="sc-dAlyuH iaKjXm"
+  class="css-1q9755x"
 >
  <div
-    class="sc-kpDqfm czFkfy"
+    class="css-1rbphu7"
  >
    <div>
      <button
@ -94,10 +94,10 @@ exports[`Tabs renders tabs without inner components 1`] = `

 exports[`Tabs renders with props 1`] = `
 <div
-  class="sc-dAlyuH iaKjXm"
+  class="css-1q9755x"
 >
  <div
-    class="sc-kpDqfm czFkfy"
+    class="css-1rbphu7"
  >
    <div>
      <button
--- a/packages/redux-devtools-ui/test/snapshots/Toolbar.test.tsx.snap
+++ b/packages/redux-devtools-ui/test/snapshots/Toolbar.test.tsx.snap
@ -2,28 +2,28 @@

 exports[`Toolbar renders correctly 1`] = `
 <div
-  class="sc-jEACwC kawwwh"
+  class="css-1vb2bz"
 >
  <div
-    class="sc-dcJsrY dAhqLr"
+    class="css-jg680o"
  >
    <button
-      class="sc-eqUAAy fNGiZB"
+      class="css-g2zi5"
    >
      1
    </button>
  </div>
  <div
-    class="sc-cPiKLX jaimvX"
+    class="css-t7c7u"
  />
  <div
-    class="sc-dLMFU crJLZZ"
+    class="css-w6gvpm"
  />
  <div
-    class="sc-dcJsrY dAhqLr"
+    class="css-jg680o"
  >
    <button
-      class="sc-eqUAAy fNGiZB"
+      class="css-g2zi5"
    >
      2
    </button>
@ -33,6 +33,6 @@ exports[`Toolbar renders correctly 1`] = `

 exports[`Toolbar renders with props 1`] = `
 <div
-  class="sc-jEACwC hdWhho"
+  class="css-1wu4lza"
 />
 `;
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml