+
Third child
@@ -26,9 +26,9 @@ export const Direction: StoryFn = props => (
Direction Column:
- First child
- Second child
- Third child
+ First child
+ Second child
+ Third child
diff --git a/packages/ui/src/components/Stack/__stories__/Responsive.stories.tsx b/packages/ui/src/components/Stack/__stories__/Responsive.stories.tsx
index c24ca7b6c5..46190586c3 100644
--- a/packages/ui/src/components/Stack/__stories__/Responsive.stories.tsx
+++ b/packages/ui/src/components/Stack/__stories__/Responsive.stories.tsx
@@ -1,6 +1,6 @@
import type { StoryFn } from '@storybook/react-vite'
import { Stack } from '../../Stack'
-import { styledDiv } from './DivWithBackground.css'
+import { child } from './styles.css'
export const Responsive: StoryFn = props => (
(
direction={{ small: 'row', xsmall: 'row', xxsmall: 'column' }}
gap={{ small: 3, xsmall: 2, xxsmall: 1 }}
>
-
+
First child
-
+
Second child
-
+
Third child
diff --git a/packages/ui/src/components/Stack/__stories__/Template.stories.tsx b/packages/ui/src/components/Stack/__stories__/Template.stories.tsx
index 8df0f5173b..2319f2ba41 100644
--- a/packages/ui/src/components/Stack/__stories__/Template.stories.tsx
+++ b/packages/ui/src/components/Stack/__stories__/Template.stories.tsx
@@ -1,11 +1,11 @@
import type { StoryFn } from '@storybook/react-vite'
import { Stack } from '..'
-import { styledDiv } from './DivWithBackground.css'
+import { child, firstChild, secondChild, thirdChild } from './styles.css'
export const Template: StoryFn
= props => (
- First child
- Second child
- Third child
+ First child
+ Second child
+ Third child
)
diff --git a/packages/ui/src/components/Stack/__stories__/helper.tsx b/packages/ui/src/components/Stack/__stories__/helper.tsx
index d3cdd4e092..452e07a418 100644
--- a/packages/ui/src/components/Stack/__stories__/helper.tsx
+++ b/packages/ui/src/components/Stack/__stories__/helper.tsx
@@ -1,30 +1,13 @@
-import styled from '@emotion/styled'
-
-const Child = styled.div`
- display: flex;
- align-items: center;
- justify-content: center;
- padding: ${({ theme }) => theme.space['2']};
- border-radius: ${({ theme }) => theme.radii.default};
-`
-
-const FirstChild = styled(Child)`
- background-color: ${({ theme }) => theme.colors.info.background};
- color: ${({ theme }) => theme.colors.info.text};
-`
-
-const SecondChild = styled(Child)`
- background-color: ${({ theme }) => theme.colors.primary.background};
- color: ${({ theme }) => theme.colors.primary.text};
-`
-
-const ThirdChild = styled(Child)`
- background-color: ${({ theme }) => theme.colors.warning.background};
- color: ${({ theme }) => theme.colors.warning.text};
-`
+import { child, firstChild, secondChild, thirdChild } from './styles.css'
export const coloredChildren = [
- 1,
- 2,
- 3,
+
+ 1
+
,
+
+ 2
+
,
+
+ 3
+
,
]
diff --git a/packages/ui/src/components/Stack/__stories__/styles.css.ts b/packages/ui/src/components/Stack/__stories__/styles.css.ts
new file mode 100644
index 0000000000..11576387de
--- /dev/null
+++ b/packages/ui/src/components/Stack/__stories__/styles.css.ts
@@ -0,0 +1,36 @@
+import { theme } from '@ultraviolet/themes'
+import { style } from '@vanilla-extract/css'
+
+export const child = style({
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ padding: theme.space[1],
+ borderRadius: theme.radii.default,
+ color: theme.colors.primary.text,
+ border: `1px solid ${theme.colors.primary.border}`,
+ backgroundColor: theme.colors.primary.background,
+ selectors: {
+ '&[data-width-full="true"]': {
+ width: '100%',
+ },
+ },
+})
+
+export const firstChild = style({
+ backgroundColor: theme.colors.info.background,
+ color: theme.colors.info.text,
+ border: `1px solid ${theme.colors.info.border}`,
+})
+
+export const secondChild = style({
+ backgroundColor: theme.colors.primary.background,
+ color: theme.colors.primary.text,
+ border: `1px solid ${theme.colors.primary.border}`,
+})
+
+export const thirdChild = style({
+ backgroundColor: theme.colors.warning.background,
+ color: theme.colors.warning.text,
+ border: `1px solid ${theme.colors.warning.border}`,
+})
diff --git a/packages/ui/src/components/Text/__stories__/OneLine.stories.tsx b/packages/ui/src/components/Text/__stories__/OneLine.stories.tsx
index 8881ac761f..5fe1a88477 100644
--- a/packages/ui/src/components/Text/__stories__/OneLine.stories.tsx
+++ b/packages/ui/src/components/Text/__stories__/OneLine.stories.tsx
@@ -1,33 +1,25 @@
-import styled from '@emotion/styled'
import type { StoryFn } from '@storybook/react-vite'
import { Text } from '../index'
-
-const Container = styled.div`
- margin-bottom: ${({ theme }) => theme.space['2']};
- margin-top: ${({ theme }) => theme.space['1']};
- width: 200px;
- background: ${({ theme }) => theme.colors.info.background};
- padding: ${({ theme }) => theme.space['1']};
-`
+import { oneLineContainer } from './style.css'
export const OneLine: StoryFn = args => (
<>
Without ellipsis
-
+
This text is quite long. Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua.
-
+
With ellipsis (a tooltip is displayed on hover)
-
+
This text is quite long. Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua.
-
+
)
diff --git a/packages/ui/src/components/Text/__stories__/style.css.ts b/packages/ui/src/components/Text/__stories__/style.css.ts
new file mode 100644
index 0000000000..db90261c5f
--- /dev/null
+++ b/packages/ui/src/components/Text/__stories__/style.css.ts
@@ -0,0 +1,10 @@
+import { theme } from '@ultraviolet/themes'
+import { style } from '@vanilla-extract/css'
+
+export const oneLineContainer = style({
+ marginBottom: theme.space[2],
+ marginTop: theme.space[2],
+ width: 200,
+ background: theme.colors.info.background,
+ padding: theme.space[1],
+})
diff --git a/packages/ui/src/emotion.d.ts b/packages/ui/src/emotion.d.ts
deleted file mode 100644
index fd16571f1d..0000000000
--- a/packages/ui/src/emotion.d.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import type { consoleLightTheme } from '@ultraviolet/themes'
-
-type UltravioletUITheme = typeof consoleLightTheme
-declare module '@emotion/react' {
- export interface Theme extends UltravioletUITheme {}
-}
diff --git a/packages/ui/src/helpers/__tests__/treeMap.test.ts b/packages/ui/src/helpers/__tests__/treeMap.test.ts
index 96b74d9ffa..0768251ae7 100644
--- a/packages/ui/src/helpers/__tests__/treeMap.test.ts
+++ b/packages/ui/src/helpers/__tests__/treeMap.test.ts
@@ -1,8 +1,10 @@
-import { Theme } from '@emotion/react'
import { DefaultTreeMapDatum } from '@nivo/treemap'
+import { consoleLightTheme } from '@ultraviolet/themes'
import { describe, expect, it } from 'vitest'
import { getAllIds, getDataColors, getOpacity, percentToHex } from '../treeMap'
+type Theme = typeof consoleLightTheme
+
describe('getOpacity', () => {
it('should return 100 for input 0', () => {
expect(getOpacity(0)).toBe(100)
diff --git a/packages/ui/src/helpers/treeMap.ts b/packages/ui/src/helpers/treeMap.ts
index 76e27224f1..e054453047 100644
--- a/packages/ui/src/helpers/treeMap.ts
+++ b/packages/ui/src/helpers/treeMap.ts
@@ -1,6 +1,7 @@
-import type { Theme } from '@emotion/react'
import type { DefaultTreeMapDatum } from '@nivo/treemap'
+import type { consoleLightTheme } from '@ultraviolet/themes'
+type Theme = typeof consoleLightTheme
type ReturnType = Record
/**
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index f3edfcac80..ed6a171b81 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -11,7 +11,6 @@ export {
useTheme,
} from './theme'
export {
- Breakpoint,
bounce,
bounceDefault,
down,
diff --git a/packages/ui/src/utils/index.ts b/packages/ui/src/utils/index.ts
index f71d0c3707..6503e3e9d3 100644
--- a/packages/ui/src/utils/index.ts
+++ b/packages/ui/src/utils/index.ts
@@ -60,4 +60,4 @@ export { getUUID } from './ids'
export { default as normalize } from './normalize'
export type { ComparableType } from './orderBy'
export { orderBy } from './orderBy'
-export { Breakpoint, down, up } from './responsive'
+export { down, up } from './responsive'
diff --git a/packages/ui/src/utils/responsive/Breakpoint.tsx b/packages/ui/src/utils/responsive/Breakpoint.tsx
deleted file mode 100644
index 00f5c8a67c..0000000000
--- a/packages/ui/src/utils/responsive/Breakpoint.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import styled from '@emotion/styled'
-import type { ScreenSize } from '../../theme'
-import { down, up } from './utilities'
-
-const Breakpoint = styled.div<{ down?: ScreenSize; up?: ScreenSize }>`
- display: none;
- ${props => `
- ${props.up ? up(props.up, 'display: block;') : ''}
- ${props.down ? down(props.down, 'display: block;') : ''}
- `}
-`
-
-export default Breakpoint
diff --git a/packages/ui/src/utils/responsive/index.ts b/packages/ui/src/utils/responsive/index.ts
index 2361872e5c..91cafe82cc 100644
--- a/packages/ui/src/utils/responsive/index.ts
+++ b/packages/ui/src/utils/responsive/index.ts
@@ -1,2 +1 @@
-export { default as Breakpoint } from './Breakpoint'
export { down, up } from './utilities'
diff --git a/packages/ui/src/utils/responsive/style.css.ts b/packages/ui/src/utils/responsive/style.css.ts
new file mode 100644
index 0000000000..88ccc73569
--- /dev/null
+++ b/packages/ui/src/utils/responsive/style.css.ts
@@ -0,0 +1,8 @@
+import { style } from '@vanilla-extract/css'
+
+export const breakpoint = style({
+ display: 'none',
+})
+
+export const upStyle = style({})
+export const downStyle = style({})
diff --git a/packages/ui/tsconfig.json b/packages/ui/tsconfig.json
index 469acdba3f..cb80a12a22 100644
--- a/packages/ui/tsconfig.json
+++ b/packages/ui/tsconfig.json
@@ -3,6 +3,6 @@
"compilerOptions": {
"baseUrl": "."
},
- "include": ["src", "../../global.d.ts", "emotion.d.ts", "vitest.setup.ts"],
+ "include": ["src", "../../global.d.ts", "vitest.setup.ts"],
"exclude": ["node_modules", "coverage", "dist"]
}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0f779289f0..b580da36f8 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -47,24 +47,6 @@ importers:
'@commitlint/config-conventional':
specifier: 20.0.0
version: 20.0.0
- '@emotion/babel-plugin':
- specifier: 11.13.5
- version: 11.13.5
- '@emotion/cache':
- specifier: 11.14.0
- version: 11.14.0
- '@emotion/eslint-plugin':
- specifier: 11.12.0
- version: 11.12.0(eslint@9.39.1(jiti@2.4.2))(typescript@5.9.3)
- '@emotion/jest':
- specifier: 11.13.0
- version: 11.13.0
- '@emotion/react':
- specifier: 11.14.0
- version: 11.14.0(@types/react@19.2.2)(react@19.2.0)
- '@emotion/styled':
- specifier: 11.14.1
- version: 11.14.1(@emotion/react@11.14.0(@types/react@19.2.2)(react@19.2.0))(@types/react@19.2.2)(react@19.2.0)
'@eslint/compat':
specifier: 1.4.1
version: 1.4.1(eslint@9.39.1(jiti@2.4.2))
@@ -146,6 +128,9 @@ importers:
'@ultraviolet/ui':
specifier: workspace:*
version: link:packages/ui
+ '@vanilla-extract/css':
+ specifier: 1.17.4
+ version: 1.17.4(babel-plugin-macros@3.1.0)
'@vanilla-extract/vite-plugin':
specifier: 5.1.1
version: 5.1.1(@types/node@22.18.11)(babel-plugin-macros@3.1.0)(jiti@2.4.2)(sass@1.94.0)(terser@5.39.0)(tsx@4.20.6)(vite@7.2.2(@types/node@22.18.11)(jiti@2.4.2)(sass@1.94.0)(terser@5.39.0)(tsx@4.20.6)(yaml@2.8.1))(yaml@2.8.1)
@@ -712,9 +697,6 @@ importers:
packages/ui:
dependencies:
- '@emotion/serialize':
- specifier: 1.3.3
- version: 1.3.3
'@nivo/bar':
specifier: 0.89.1
version: 0.89.1(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
@@ -776,12 +758,6 @@ importers:
'@babel/core':
specifier: 7.28.5
version: 7.28.5
- '@emotion/react':
- specifier: 11.14.0
- version: 11.14.0(@types/react@19.2.2)(react@19.2.0)
- '@emotion/styled':
- specifier: 11.14.1
- version: 11.14.1(@emotion/react@11.14.0(@types/react@19.2.2)(react@19.2.0))(@types/react@19.2.2)(react@19.2.0)
'@types/react':
specifier: 19.2.2
version: 19.2.2
@@ -914,10 +890,6 @@ packages:
resolution: {integrity: sha512-E5chM8eWjTp/aNoVpcbfM7mLxu9XGLWYise2eBKGQomAk/Mb4XoxyqXTZbuTohbsl8EKqdlMhnDI2CCLfcs9wA==}
engines: {node: '>=6.9.0'}
- '@babel/helper-module-imports@7.25.9':
- resolution: {integrity: sha512-tnUA4RsrmflIM6W6RFTLFSXITtl0wKjgpnLgXyowocVPrbYrLUXSBXDgTs8BlbmIzIdlBySRQjINYs2BAkiLtw==}
- engines: {node: '>=6.9.0'}
-
'@babel/helper-module-imports@7.27.1':
resolution: {integrity: sha512-0gSFWUPNXNopqtIPQvlD5WgXYI5GY2kP2cCvoT8kczjbfcfuIljTbcWrulD1CIPIX2gt1wghbDy08yE1p+/r3w==}
engines: {node: '>=6.9.0'}
@@ -1431,14 +1403,6 @@ packages:
peerDependencies:
'@babel/core': ^7.0.0-0
- '@babel/runtime@7.26.9':
- resolution: {integrity: sha512-aA63XwOkcl4xxQa3HjPMqOP6LiK0ZDv3mUPYEFXkpHbaFjtGggE1A61FjFzJnB+p7/oy2gA8E+rcBNl/zC1tMg==}
- engines: {node: '>=6.9.0'}
-
- '@babel/runtime@7.27.6':
- resolution: {integrity: sha512-vbavdySgbTTrmFE+EsiqUTzlOr5bzlnJtUv9PynGCAKvfQqjIXbvFdumPM/GxMDfyuGMJaJAU6TO4zc1Jf1i8Q==}
- engines: {node: '>=6.9.0'}
-
'@babel/runtime@7.28.2':
resolution: {integrity: sha512-KHp2IflsnGywDjBWDkR9iEqiWSpc8GIi0lgTT3mOElT0PP1tG26P4tmFI2YvAdzgq9RGyoHZQEIEdZy6Ec5xCA==}
engines: {node: '>=6.9.0'}
@@ -1451,10 +1415,6 @@ packages:
resolution: {integrity: sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw==}
engines: {node: '>=6.9.0'}
- '@babel/traverse@7.26.9':
- resolution: {integrity: sha512-ZYW7L+pL8ahU5fXmNbPF+iZFHCv5scFak7MZ9bwaRPLUhHh7QQEMjZUg0HevihoqCM5iSYHN61EyCoZvqC+bxg==}
- engines: {node: '>=6.9.0'}
-
'@babel/traverse@7.28.4':
resolution: {integrity: sha512-YEzuboP2qvQavAcjgQNVgsvHIDv6ZpwXvcvjmyySP2DIMuByS/6ioU5G9pYrWHM6T2YDfc7xga9iNzYOs12CFQ==}
engines: {node: '>=6.9.0'}
@@ -1463,10 +1423,6 @@ packages:
resolution: {integrity: sha512-TCCj4t55U90khlYkVV/0TfkJkAkUg3jZFA3Neb7unZT8CPok7iiRfaX0F+WnqWqt7OxhOn0uBKXCw4lbL8W0aQ==}
engines: {node: '>=6.9.0'}
- '@babel/types@7.26.9':
- resolution: {integrity: sha512-Y3IR1cRnOxOCDvMmNiym7XpXQ93iGDDPHx+Zj+NM+rg0fBaShfQLkg+hKPaZCEvg5N/LeCo4+Rj/i3FuJsIQaw==}
- engines: {node: '>=6.9.0'}
-
'@babel/types@7.28.0':
resolution: {integrity: sha512-jYnje+JyZG5YThjHiF28oT4SIZLnYOcSBb6+SDaFIyzDVSkXQmQQYclJ2R+YxcdmK0AX6x1E5OQNtuh3jHDrUg==}
engines: {node: '>=6.9.0'}
@@ -1826,15 +1782,6 @@ packages:
'@emnapi/wasi-threads@1.0.2':
resolution: {integrity: sha512-5n3nTJblwRi8LlXkJ9eBzu+kZR8Yxcc7ubakyQTFzPMtIhFpUBRbsnc2Dv88IZDIbCDlBiWrknhB4Lsz7mg6BA==}
- '@emotion/babel-plugin@11.13.5':
- resolution: {integrity: sha512-pxHCpT2ex+0q+HH91/zsdHkw/lXd468DIN2zvfvLtPKLLMo6gQj7oLObq8PhkrxOZb/gGCq03S3Z7PDhS8pduQ==}
-
- '@emotion/cache@11.14.0':
- resolution: {integrity: sha512-L/B1lc/TViYk4DcpGxtAVbx0ZyiKM5ktoIyafGkH6zg/tj+mA+NE//aPYKG0k8kCHSHVJrpLpcAlOBEXQ3SavA==}
-
- '@emotion/css-prettifier@1.2.0':
- resolution: {integrity: sha512-p+9m/5fp61i90CGUT+516glGBXWoEHgSelybqR+5vlX6Kb+Z0rkOfEMFqTBwYMRxXZTitibZERl32n2yPma7Dw==}
-
'@emotion/eslint-plugin@11.12.0':
resolution: {integrity: sha512-N0rtAVKk6w8RchWtexdG/GFbg48tdlO4cnq9Jg6H3ul3EDDgkYkPE0PKMb1/CJ7cDyYsiNPYVc3ZnWnd2/d0tA==}
engines: {node: '>=6'}
@@ -1844,62 +1791,6 @@ packages:
'@emotion/hash@0.9.2':
resolution: {integrity: sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==}
- '@emotion/is-prop-valid@1.3.1':
- resolution: {integrity: sha512-/ACwoqx7XQi9knQs/G0qKvv5teDMhD7bXYns9N/wM8ah8iNb8jZ2uNO0YOgiq2o2poIvVtJS2YALasQuMSQ7Kw==}
-
- '@emotion/jest@11.13.0':
- resolution: {integrity: sha512-XyoUbJ9fthKdlXjTvjzd6aQ8yVWe68InZawFdGTFkJQRW44rsLHK1qjKB/+L7RiGgdm0BYFv7+tz8znQzRQOBw==}
- peerDependencies:
- '@types/jest': ^26.0.14 || ^27.0.0 || ^28.0.0 || ^29.0.0
- enzyme-to-json: ^3.2.1
- peerDependenciesMeta:
- '@types/jest':
- optional: true
- enzyme-to-json:
- optional: true
-
- '@emotion/memoize@0.9.0':
- resolution: {integrity: sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==}
-
- '@emotion/react@11.14.0':
- resolution: {integrity: sha512-O000MLDBDdk/EohJPFUqvnp4qnHeYkVP5B0xEG0D/L7cOKP9kefu2DXn8dj74cQfsEzUqh+sr1RzFqiL1o+PpA==}
- peerDependencies:
- '@types/react': '*'
- react: '>=16.8.0'
- peerDependenciesMeta:
- '@types/react':
- optional: true
-
- '@emotion/serialize@1.3.3':
- resolution: {integrity: sha512-EISGqt7sSNWHGI76hC7x1CksiXPahbxEOrC5RjmFRJTqLyEK9/9hZvBbiYn70dw4wuwMKiEMCUlR6ZXTSWQqxA==}
-
- '@emotion/sheet@1.4.0':
- resolution: {integrity: sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg==}
-
- '@emotion/styled@11.14.1':
- resolution: {integrity: sha512-qEEJt42DuToa3gurlH4Qqc1kVpNq8wO8cJtDzU46TjlzWjDlsVyevtYCRijVq3SrHsROS+gVQ8Fnea108GnKzw==}
- peerDependencies:
- '@emotion/react': ^11.0.0-rc.0
- '@types/react': '*'
- react: '>=16.8.0'
- peerDependenciesMeta:
- '@types/react':
- optional: true
-
- '@emotion/unitless@0.10.0':
- resolution: {integrity: sha512-dFoMUuQA20zvtVTuxZww6OHoJYgrzfKM1t52mVySDJnMSEa08ruEvdYQbhvyu6soU+NeLVd3yKfTfT0NeV6qGg==}
-
- '@emotion/use-insertion-effect-with-fallbacks@1.2.0':
- resolution: {integrity: sha512-yJMtVdH59sxi/aVJBpk9FQq+OR8ll5GT8oWd57UpeaKEVGab41JWaCFA7FRLoMLloOZF/c/wsPoe+bfGmRKgDg==}
- peerDependencies:
- react: '>=16.8.0'
-
- '@emotion/utils@1.4.2':
- resolution: {integrity: sha512-3vLclRofFziIa3J2wDh9jjbkUz9qk5Vi3IZ/FSTKViB0k+ef0fPV7dYrUIugbgupYDx7v9ud/SjrtEP8Y4xLoA==}
-
- '@emotion/weak-memoize@0.4.0':
- resolution: {integrity: sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg==}
-
'@epic-web/invariant@1.0.0':
resolution: {integrity: sha512-lrTPqgvfFQtR/eY/qkIzp98OGdNJu0m5ji3q/nJI8v3SXkRKEnWiOxMmbvcSoAIzv/cGiuvRy57k4suKQSAdwA==}
@@ -4360,9 +4251,6 @@ packages:
engines: {node: '>=16'}
hasBin: true
- convert-source-map@1.9.0:
- resolution: {integrity: sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==}
-
convert-source-map@2.0.0:
resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
@@ -5413,10 +5301,6 @@ packages:
resolution: {integrity: sha512-5lsx1NUDHtSjfg0eHlmYvZKv8/nVqX4ckFbM+FrGcQ+04KWcWFo9P5MxPZYSzUvyzmdTbI7Eix8Q4IbELDqzKg==}
engines: {node: '>=0.10.0'}
- globals@11.12.0:
- resolution: {integrity: sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==}
- engines: {node: '>=4'}
-
globals@14.0.0:
resolution: {integrity: sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==}
engines: {node: '>=18'}
@@ -5500,9 +5384,6 @@ packages:
highlightjs-vue@1.0.0:
resolution: {integrity: sha512-PDEfEF102G23vHmPhLyPboFCD+BkMGu+GuJe2d9/eH4FsCwvgBpnc9n0pGE+ffKdph38s6foEZiEjdgHdzp+IA==}
- hoist-non-react-statics@3.3.2:
- resolution: {integrity: sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==}
-
homedir-polyfill@1.0.3:
resolution: {integrity: sha512-eSmmWE5bZTK2Nou4g0AI3zZ9rswp7GRKoKXS1BLUkvPviOqs4YTN1djQIqrXy9k5gEtdLPy86JjRwsNM9tnDcA==}
engines: {node: '>=0.10.0'}
@@ -7513,10 +7394,6 @@ packages:
source-map-support@0.5.21:
resolution: {integrity: sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==}
- source-map@0.5.7:
- resolution: {integrity: sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==}
- engines: {node: '>=0.10.0'}
-
source-map@0.6.1:
resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
engines: {node: '>=0.10.0'}
@@ -7539,10 +7416,6 @@ packages:
spdx-license-ids@3.0.21:
resolution: {integrity: sha512-Bvg/8F5XephndSK3JffaRqdT+gyhfqIPwDHpX80tJrF8QQRYMo8sNMeaZ2Dp5+jhwKnUmIOyFFQfHRkjJm5nXg==}
- specificity@0.4.1:
- resolution: {integrity: sha512-1klA3Gi5PD1Wv9Q0wUoOQN1IWAuPu0D1U03ThXTr0cJ20+/iq2tHSDnK7Kk/0LXJ1ztUB2/1Os0wKmfyNgUQfg==}
- hasBin: true
-
split2@4.2.0:
resolution: {integrity: sha512-UcjcJOWknrNkF6PLX83qcHM6KHgVKNkV62Y8a5uYDVv9ydGQVwAHMKqHdJje1VTWpljG0WYpCDhrCdAOYH4TWg==}
engines: {node: '>= 10.x'}
@@ -7705,9 +7578,6 @@ packages:
peerDependencies:
postcss: ^8.2.15
- stylis@4.2.0:
- resolution: {integrity: sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==}
-
supports-color@5.5.0:
resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==}
engines: {node: '>=4'}
@@ -8539,13 +8409,6 @@ snapshots:
transitivePeerDependencies:
- supports-color
- '@babel/helper-module-imports@7.25.9':
- dependencies:
- '@babel/traverse': 7.26.9
- '@babel/types': 7.26.9
- transitivePeerDependencies:
- - supports-color
-
'@babel/helper-module-imports@7.27.1':
dependencies:
'@babel/traverse': 7.28.4
@@ -9200,12 +9063,6 @@ snapshots:
transitivePeerDependencies:
- supports-color
- '@babel/runtime@7.26.9':
- dependencies:
- regenerator-runtime: 0.14.1
-
- '@babel/runtime@7.27.6': {}
-
'@babel/runtime@7.28.2': {}
'@babel/runtime@7.28.4': {}
@@ -9216,18 +9073,6 @@ snapshots:
'@babel/parser': 7.28.5
'@babel/types': 7.28.5
- '@babel/traverse@7.26.9':
- dependencies:
- '@babel/code-frame': 7.27.1
- '@babel/generator': 7.28.5
- '@babel/parser': 7.28.5
- '@babel/template': 7.27.2
- '@babel/types': 7.28.5
- debug: 4.4.3
- globals: 11.12.0
- transitivePeerDependencies:
- - supports-color
-
'@babel/traverse@7.28.4':
dependencies:
'@babel/code-frame': 7.27.1
@@ -9252,11 +9097,6 @@ snapshots:
transitivePeerDependencies:
- supports-color
- '@babel/types@7.26.9':
- dependencies:
- '@babel/helper-string-parser': 7.27.1
- '@babel/helper-validator-identifier': 7.28.5
-
'@babel/types@7.28.0':
dependencies:
'@babel/helper-string-parser': 7.27.1
@@ -9928,35 +9768,6 @@ snapshots:
tslib: 2.8.1
optional: true
- '@emotion/babel-plugin@11.13.5':
- dependencies:
- '@babel/helper-module-imports': 7.25.9
- '@babel/runtime': 7.26.9
- '@emotion/hash': 0.9.2
- '@emotion/memoize': 0.9.0
- '@emotion/serialize': 1.3.3
- babel-plugin-macros: 3.1.0
- convert-source-map: 1.9.0
- escape-string-regexp: 4.0.0
- find-root: 1.1.0
- source-map: 0.5.7
- stylis: 4.2.0
- transitivePeerDependencies:
- - supports-color
-
- '@emotion/cache@11.14.0':
- dependencies:
- '@emotion/memoize': 0.9.0
- '@emotion/sheet': 1.4.0
- '@emotion/utils': 1.4.2
- '@emotion/weak-memoize': 0.4.0
- stylis: 4.2.0
-
- '@emotion/css-prettifier@1.2.0':
- dependencies:
- '@emotion/memoize': 0.9.0
- stylis: 4.2.0
-
'@emotion/eslint-plugin@11.12.0(eslint@9.39.1(jiti@2.4.2))(typescript@5.9.3)':
dependencies:
'@typescript-eslint/utils': 5.62.0(eslint@9.39.1(jiti@2.4.2))(typescript@5.9.3)
@@ -9967,71 +9778,6 @@ snapshots:
'@emotion/hash@0.9.2': {}
- '@emotion/is-prop-valid@1.3.1':
- dependencies:
- '@emotion/memoize': 0.9.0
-
- '@emotion/jest@11.13.0':
- dependencies:
- '@babel/runtime': 7.28.4
- '@emotion/css-prettifier': 1.2.0
- chalk: 4.1.2
- specificity: 0.4.1
- stylis: 4.2.0
-
- '@emotion/memoize@0.9.0': {}
-
- '@emotion/react@11.14.0(@types/react@19.2.2)(react@19.2.0)':
- dependencies:
- '@babel/runtime': 7.27.6
- '@emotion/babel-plugin': 11.13.5
- '@emotion/cache': 11.14.0
- '@emotion/serialize': 1.3.3
- '@emotion/use-insertion-effect-with-fallbacks': 1.2.0(react@19.2.0)
- '@emotion/utils': 1.4.2
- '@emotion/weak-memoize': 0.4.0
- hoist-non-react-statics: 3.3.2
- react: 19.2.0
- optionalDependencies:
- '@types/react': 19.2.2
- transitivePeerDependencies:
- - supports-color
-
- '@emotion/serialize@1.3.3':
- dependencies:
- '@emotion/hash': 0.9.2
- '@emotion/memoize': 0.9.0
- '@emotion/unitless': 0.10.0
- '@emotion/utils': 1.4.2
- csstype: 3.1.3
-
- '@emotion/sheet@1.4.0': {}
-
- '@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.2)(react@19.2.0))(@types/react@19.2.2)(react@19.2.0)':
- dependencies:
- '@babel/runtime': 7.27.6
- '@emotion/babel-plugin': 11.13.5
- '@emotion/is-prop-valid': 1.3.1
- '@emotion/react': 11.14.0(@types/react@19.2.2)(react@19.2.0)
- '@emotion/serialize': 1.3.3
- '@emotion/use-insertion-effect-with-fallbacks': 1.2.0(react@19.2.0)
- '@emotion/utils': 1.4.2
- react: 19.2.0
- optionalDependencies:
- '@types/react': 19.2.2
- transitivePeerDependencies:
- - supports-color
-
- '@emotion/unitless@0.10.0': {}
-
- '@emotion/use-insertion-effect-with-fallbacks@1.2.0(react@19.2.0)':
- dependencies:
- react: 19.2.0
-
- '@emotion/utils@1.4.2': {}
-
- '@emotion/weak-memoize@0.4.0': {}
-
'@epic-web/invariant@1.0.0': {}
'@esbuild/aix-ppc64@0.25.0':
@@ -11466,7 +11212,8 @@ snapshots:
'@types/normalize-package-data@2.4.4': {}
- '@types/parse-json@4.0.2': {}
+ '@types/parse-json@4.0.2':
+ optional: true
'@types/react-dom@19.2.2(@types/react@19.2.2)':
dependencies:
@@ -12400,6 +12147,7 @@ snapshots:
'@babel/runtime': 7.28.4
cosmiconfig: 7.1.0
resolve: 1.22.10
+ optional: true
babel-plugin-named-exports-order@0.0.2: {}
@@ -12781,8 +12529,6 @@ snapshots:
meow: 12.1.1
split2: 4.2.0
- convert-source-map@1.9.0: {}
-
convert-source-map@2.0.0: {}
cookie@1.0.2: {}
@@ -12811,6 +12557,7 @@ snapshots:
parse-json: 5.2.0
path-type: 4.0.0
yaml: 1.10.2
+ optional: true
cosmiconfig@8.3.6(typescript@5.9.3):
dependencies:
@@ -14090,8 +13837,6 @@ snapshots:
is-windows: 1.0.2
which: 1.3.1
- globals@11.12.0: {}
-
globals@14.0.0: {}
globals@16.4.0: {}
@@ -14166,10 +13911,6 @@ snapshots:
highlightjs-vue@1.0.0: {}
- hoist-non-react-statics@3.3.2:
- dependencies:
- react-is: 16.13.1
-
homedir-polyfill@1.0.3:
dependencies:
parse-passwd: 1.0.0
@@ -16517,8 +16258,6 @@ snapshots:
buffer-from: 1.1.2
source-map: 0.6.1
- source-map@0.5.7: {}
-
source-map@0.6.1: {}
space-separated-tokens@1.1.5: {}
@@ -16542,8 +16281,6 @@ snapshots:
spdx-license-ids@3.0.21: {}
- specificity@0.4.1: {}
-
split2@4.2.0: {}
sprintf-js@1.0.3: {}
@@ -16732,8 +16469,6 @@ snapshots:
postcss: 8.5.6
postcss-selector-parser: 6.1.2
- stylis@4.2.0: {}
-
supports-color@5.5.0:
dependencies:
has-flag: 3.0.0
diff --git a/tsconfig.json b/tsconfig.json
index c958a1dac5..5f5ed65cca 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -3,7 +3,6 @@
"compilerOptions": {
"target": "esnext",
"module": "esnext",
- "jsxImportSource": "@emotion/react",
"types": ["vite/client", "@testing-library/jest-dom"],
"noEmit": true,
"skipLibCheck": true,
diff --git a/utils/scripts/analyse-deps.ts b/utils/scripts/analyse-deps.ts
index 0b10268ef3..406c45d94b 100644
--- a/utils/scripts/analyse-deps.ts
+++ b/utils/scripts/analyse-deps.ts
@@ -58,14 +58,9 @@ for (const file of filesToAnalyze) {
.replace(/\.tsx?$/, '')
if (
- ![
- 'react',
- 'react-vite',
- 'vitest',
- 'styled',
- '@emotion/styled',
- 'components/',
- ].some(string => normalizedFile.endsWith(string))
+ !['react', 'react-vite', 'vitest', 'styled', 'components/'].some(
+ string => normalizedFile.endsWith(string),
+ )
) {
const importedComponent = normalizedFile.split('/').toReversed()[0]
diff --git a/vite.config.ts b/vite.config.ts
index 86d54f2b3a..7b9b26e9a1 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -9,7 +9,6 @@ import type { ViteUserConfig } from 'vitest/config'
const pkg = await readPackage()
const externalPkgs = [
- '@emotion',
...Object.keys(pkg.dependencies || {}),
...Object.keys(pkg.optionalDependencies || {}),
...Object.keys(pkg.peerDependencies || {}),
@@ -69,10 +68,6 @@ export const defaultConfig: ViteUserConfig = {
},
plugins: [
react({
- babel: {
- plugins: ['@emotion/babel-plugin'],
- },
- jsxImportSource: '@emotion/react',
jsxRuntime: 'automatic',
}),
preserveDirectives(),