Replace styled-components with Emotion in ui

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,8 @@
-import styled from 'styled-components';
+import styled from '@emotion/styled';
+import { Theme } from '../../themes/default';
 
 const Divider = styled.div`
-  background-color: ${(props) => props.theme.base02};
+  background-color: ${(props: { theme?: Theme }) => 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;
@@ -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;

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

pnpm-lock.yaml

@@ -2442,6 +2442,12 @@ importers:
       '@babel/preset-typescript':
         specifier: ^7.27.1
         version: 7.27.1(@babel/core@7.27.1)
+      '@emotion/react':
+        specifier: ^11.14.0
+        version: 11.14.0(@types/react@19.1.6)(react@19.1.0)
+      '@emotion/styled':
+        specifier: ^11.14.0
+        version: 11.14.0(@emotion/react@11.14.0(@types/react@19.1.6)(react@19.1.0))(@types/react@19.1.6)(react@19.1.0)
       '@storybook/addon-onboarding':
         specifier: ^9.0.2
         version: 9.0.2(storybook@9.0.2(@testing-library/dom@10.4.0)(prettier@3.5.3))
@@ -2469,9 +2475,6 @@ importers:
       '@types/react':
         specifier: ^19.1.6
         version: 19.1.6
-      '@types/styled-components':
-        specifier: ^5.1.34
-        version: 5.1.34
       babel-loader:
         specifier: ^10.0.0
         version: 10.0.0(@babel/core@7.27.1)(webpack@5.99.9(@swc/core@1.11.29(@swc/helpers@0.5.17))(esbuild@0.25.4))
@@ -2502,9 +2505,6 @@ importers:
       storybook:
         specifier: ^9.0.2
         version: 9.0.2(@testing-library/dom@10.4.0)(prettier@3.5.3)
-      styled-components:
-        specifier: ^5.3.11
-        version: 5.3.11(@babel/core@7.27.1)(react-dom@19.1.0(react@19.1.0))(react-is@19.1.0)(react@19.1.0)
       stylelint:
         specifier: ^16.19.1
         version: 16.19.1(typescript@5.8.3)
@@ -3685,6 +3685,16 @@ packages:
   '@emotion/sheet@1.4.0':
     resolution: {integrity: sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg==}
 
+  '@emotion/styled@11.14.0':
+    resolution: {integrity: sha512-XxfOnXFffatap2IyCeJyNov3kiDQWoR08gPUQxvbL7fxKryGBKUZUkG6Hz48DZwVrJSVh9sJboyV1Ds4OW6SgA==}
+    peerDependencies:
+      '@emotion/react': ^11.0.0-rc.0
+      '@types/react': '*'
+      react: '>=16.8.0'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@emotion/stylis@0.8.5':
     resolution: {integrity: sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==}
 
@@ -11626,6 +11636,21 @@ snapshots:
 
   '@emotion/sheet@1.4.0': {}
 
+  '@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@19.1.6)(react@19.1.0))(@types/react@19.1.6)(react@19.1.0)':
+    dependencies:
+      '@babel/runtime': 7.27.1
+      '@emotion/babel-plugin': 11.13.5
+      '@emotion/is-prop-valid': 1.3.1
+      '@emotion/react': 11.14.0(@types/react@19.1.6)(react@19.1.0)
+      '@emotion/serialize': 1.3.3
+      '@emotion/use-insertion-effect-with-fallbacks': 1.2.0(react@19.1.0)
+      '@emotion/utils': 1.4.2
+      react: 19.1.0
+    optionalDependencies:
+      '@types/react': 19.1.6
+    transitivePeerDependencies:
+      - supports-color
+
   '@emotion/stylis@0.8.5': {}
 
   '@emotion/unitless@0.10.0': {}