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

.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

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",
+    "redux-persist": "^6.0.0"
-    "styled-components": "^5.3.11"
   },
   "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",

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",
+    "react-is": "^19.1.0"
-    "styled-components": "^5.3.11"
   },
   "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",

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';
 

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",
+    "redux-persist": "^6.0.0"
-    "styled-components": "^5.3.11"
   }
 }

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';

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 styled from '@emotion/styled';
-import { Button, Select, Editor, Toolbar } from '@redux-devtools/ui';
+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;

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';

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 styled from '@emotion/styled';
-import { effects, Theme } from '@redux-devtools/ui';
+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: { theme?: Base16Theme }) => props.theme!.base07};
-    color: ${(props: ThemedStyledProps<{}, Theme>) => 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) => props.theme.base0E};
-    color: ${(props: ThemedStyledProps<{}, Theme>) => 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: { theme?: Base16Theme }) =>
-    background: ${(props: ThemedStyledProps<{}, Theme>) =>
+      effects.color(props.theme!.base0B, 'alpha', 0.2)};
-      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: { theme?: Base16Theme }) =>
-    background: ${(props: ThemedStyledProps<{}, Theme>) =>
+      effects.color(props.theme!.base08, 'alpha', 0.2)};
-      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) => props.theme.base0D};
-    color: ${(props: ThemedStyledProps<{}, Theme>) => props.theme.base0D};
   }
 
   .jsondiffpatch-property-name:after {
     content: ': ';
-    ${/* eslint-disable-next-line @typescript-eslint/no-empty-object-type */ ''}
+    color: ${(props) => props.theme.base07};
-    color: ${(props: ThemedStyledProps<{}, Theme>) => 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) => props.theme.base07};
-    color: ${(props: ThemedStyledProps<{}, Theme>) => 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) => props.theme.base0A};
-    background: ${(props: ThemedStyledProps<{}, Theme>) => props.theme.base0A};
   }
 
   .jsondiffpatch-moved .jsondiffpatch-moved-destination:before {

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;
 `;

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",
+    "react-dom": "^16.8.4 || ^17.0.0 || ^18.0.0 || ^19.0.0"
-    "styled-components": "^5.3.11"
   }
 }

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",

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",
+    "redux-logger": "^3.0.6"
-    "styled-components": "^5.3.11"
   },
   "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",

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",
+    "redux": "^3.4.0 || ^4.0.0 || ^5.0.0"
-    "styled-components": "^5.3.11"
   }
 }

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",
+    "react-router-dom": "^7.6.1"
-    "styled-components": "^5.3.11"
   },
   "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",

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",
+    "redux": "^3.4.0 || ^4.0.0 || ^5.0.0"
-    "styled-components": "^5.3.11"
   }
 }

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",

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",
+    "redux": "^3.4.0 || ^4.0.0 || ^5.0.0"
-    "styled-components": "^5.3.11"
   }
 }

packages/redux-devtools-ui/.stylelintrc

@@ -1,7 +0,0 @@
-{
-  "processors": ["stylelint-processor-styled-components"],
-  "extends": [
-    "stylelint-config-recommended",
-    "stylelint-config-styled-components"
-  ]
-}

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"
-    "react": "^16.3.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
-    "styled-components": "^5.3.11"
   }
 }

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 './';

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 {

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;

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;

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';

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: { theme?: Theme }) =>
-  background-color: ${(props: ThemedStyledProps<{}, Theme>) =>
+    color(props.theme!.base00, 'lighten', 0.03)};
-    color(props.theme.base00, 'lighten', 0.03)};
   color: ${(props) => props.theme.base07};
   font-size: 12px;
 

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';

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;

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;

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;

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 }: { theme?: Base16Theme }) =>
-    theme.scheme === 'default' && theme.light
+    theme!.scheme === 'default' && (theme as Theme).light
       ? defaultStyle
-      : themedStyle(theme),
+      : themedStyle(theme!),
 );
 
 export interface EditorProps {

packages/redux-devtools-ui/src/Editor/styles/index.ts

@@ -1,5 +1,5 @@
-import { css } from 'styled-components';
+import { css } from '@emotion/react';
-import { Theme } from '../../themes/default';
+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 {

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 }: { theme: Theme }) => css`
-export default ({ theme }: ThemedStyledProps<{}, Theme>) => css`
   padding: 10px;
   line-height: 1.846;
   font-size: 14px;

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 './';
 

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;

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 './';
 

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

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';

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 './';
 

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 }: { theme: Theme }) => css`
-export const containerStyle = ({ theme }: ThemedStyledProps<{}, Theme>) => css`
   display: flex;
   align-items: center;
 

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;

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;

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';

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 {

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 = ({
+export const style = ({ theme, main }: StyleProps & { theme: Theme }) => css`
-  theme,
-  main,
-}: ThemedStyledProps<StyleProps, Theme>) => css`
   display: flex;
   flex: 0 0 1;
   padding-left: 1px;

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 = ({
+export const style = ({ theme, main }: StyleProps & { theme: Theme }) => css`
-  theme,
-  main,
-}: ThemedStyledProps<StyleProps, Theme>) => css`
   display: flex;
   flex: 0 0 1;
   padding-left: 1px;

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';

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;

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;

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 = (
+const Toolbar = styled.div<
-  styled as ThemedStyledInterface<
+  Props & { theme?: Base16Theme & { fontFamily?: CSS.Property.FontFamily } }
-    Base16Theme & { fontFamily?: CSS.Property.FontFamily }
+>`
-  >
-).div<Props>`
   display: flex;
   flex-shrink: 0;
   box-sizing: border-box;

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`

packages/redux-devtools-ui/src/utils/createStyledComponent.ts

@@ -1,53 +1,29 @@
 import React from 'react';
 import styled, {
-  InterpolationFunction,
+  FunctionInterpolation,
   StyledComponent,
-  StyledComponentPropsWithRef,
+} from '@emotion/styled';
-  ThemedStyledInterface,
+import { PropsOf } from '@emotion/react';
-  ThemedStyledProps,
-} from 'styled-components';
 import type { Base16Theme } from 'react-base16-styling';
 import getDefaultTheme, { Theme } from '../themes/default';
 import { ThemeFromProvider } from './theme';
 
-type StyleFunction<
+type StyleFunction<Props> = FunctionInterpolation<Props>;
-  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>
->;
 
-interface StylesObject<
+interface StylesObject<Props> {
-  C extends keyof React.JSX.IntrinsicElements | React.ComponentType<any>,
+  [type: string]: StyleFunction<Props>;
-  // eslint-disable-next-line @typescript-eslint/no-empty-object-type
-  O extends object = {},
-> {
-  [type: string]: StyleFunction<C, O>;
 }
 
-type Styles<
+type Styles<Props> = StylesObject<Props> | StyleFunction<Props>;
-  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>;
 
-function isStylesObject<
+function isStylesObject<Props>(
-  C extends keyof React.JSX.IntrinsicElements | React.ComponentType<any>,
+  styles: Styles<Props>,
-  // eslint-disable-next-line @typescript-eslint/no-empty-object-type
+): styles is StylesObject<Props> {
-  O extends object = {},
->(styles: Styles<C>): styles is StylesObject<C, O> {
   return typeof styles === 'object';
 }
 
-const getStyle = <
+const getStyle = <Props>(styles: Styles<Props>, type: string) =>
-  C extends keyof React.JSX.IntrinsicElements | React.ComponentType<any>,
+  isStylesObject(styles) ? styles[type] || styles.default : styles;
-  // 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);
 
 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> {
+): StyledComponent<PropsOf<C> & O & { theme?: Theme | Base16Theme }> {
-  return (styled as ThemedStyledInterface<Theme>)((component || 'div') as C)`
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    ${(props: ThemedStyledProps<StyledComponentPropsWithRef<C> & O, Theme>) =>
+  // @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?

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)}

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>

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>

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

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>

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"

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

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

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"

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>

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

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"
 />
 `;