chore: update emotion to the latest version

package.json

@@ -28,7 +28,7 @@
     "color-hash": "2.0.2",
     "electron": "35.7.5",
     "electron-json-storage": "4.6.0",
-    "emotion": "9.2.12",
+    "@emotion/css": "11.13.5",
     "graphql": "16.13.1",
     "graphql-request": "5.1.0",
     "graphql-tag": "2.12.6",

packages/overmind-devtools-client/package.json

@@ -20,7 +20,7 @@
 	"dependencies": {
 		"@babel/runtime": "^7.28.6",
 		"color-hash": "^2.0.2",
-		"emotion": "^9.2.12",
+		"@emotion/css": "^11.13.5",
 		"lodash.clonedeep": "^4.5.0",
 		"overmind-react": "next",
 		"react": "^19.2.4",

packages/overmind-devtools-client/src/components/Action/styles.ts

@@ -1,4 +1,4 @@
-import { css } from 'emotion'
+import { css } from '@emotion/css'
 import { colors } from '../../theme'
 
 export const wrapper = css({

packages/overmind-devtools-client/src/components/ActionFlush/index.tsx

@@ -3,7 +3,7 @@ import { useAppState } from '../../overmind'
 import { Flush as FlushType } from '../../overmind/types'
 import * as styles from './styles'
 import * as textStyles from '../../styles/text'
-import { css } from 'emotion'
+import { css } from '@emotion/css'
 import { FaCode, FaLink } from 'react-icons/fa'
 
 type Props = {

packages/overmind-devtools-client/src/components/ActionFlush/styles.ts

@@ -1,4 +1,4 @@
-import { css } from 'emotion'
+import { css } from '@emotion/css'
 import { colors } from '../../theme'
 
 export const flush = css({

packages/overmind-devtools-client/src/components/ActionOperator/index.tsx

@@ -1,4 +1,4 @@
-import { css } from 'emotion'
+import { css } from '@emotion/css'
 import * as React from 'react'
 
 import { useAppState } from '../../overmind'

packages/overmind-devtools-client/src/components/ActionOperator/styles.ts

@@ -1,4 +1,4 @@
-import { css, keyframes } from 'emotion'
+import { css, keyframes } from '@emotion/css'
 import { colors } from '../../theme'
 
 export const operator = css({

packages/overmind-devtools-client/src/components/ActionPayload/styles.ts

@@ -1,4 +1,4 @@
-import { css } from 'emotion'
+import { css } from '@emotion/css'
 import { colors } from '../../theme'
 
 export const wrapper = css({

packages/overmind-devtools-client/src/components/ActionSelector/index.tsx

@@ -2,7 +2,7 @@ import * as React from 'react'
 import * as styles from './styles'
 import { useAppState, useActions } from '../../overmind'
 import { nameToColor } from '../../overmind/utils'
-import { css } from 'emotion'
+import { css } from '@emotion/css'
 
 const ActionSelector: React.FunctionComponent = () => {
   const state = useAppState()

packages/overmind-devtools-client/src/components/ActionSelector/styles.ts

@@ -1,4 +1,4 @@
-import { css } from 'emotion'
+import { css } from '@emotion/css'
 import { colors } from '../../theme'
 
 export const wrapper = css({

packages/overmind-devtools-client/src/components/Actions/styles.ts

@@ -1,4 +1,4 @@
-import { css } from 'emotion'
+import { css } from '@emotion/css'
 
 export const wrapper = css({
   position: 'relative',

packages/overmind-devtools-client/src/components/ActionsList/index.tsx

@@ -1,4 +1,4 @@
-import { css } from 'emotion'
+import { css } from '@emotion/css'
 import * as React from 'react'
 import { FaChevronDown } from 'react-icons/fa'
 

packages/overmind-devtools-client/src/components/ActionsList/styles.ts

@@ -1,4 +1,4 @@
-import { css } from 'emotion'
+import { css } from '@emotion/css'
 
 import { colors } from '../../theme'
 

packages/overmind-devtools-client/src/components/ActionsTools/styles.ts

@@ -1,4 +1,4 @@
-import { css } from 'emotion'
+import { css } from '@emotion/css'
 
 import { colors } from '../../theme'
 

packages/overmind-devtools-client/src/components/Apps/index.tsx

@@ -2,7 +2,7 @@ import * as React from 'react'
 import { useAppState, useActions } from '../../overmind'
 import { getAppShortName, nameToColor } from '../../overmind/utils'
 import * as styles from './styles'
-import { css } from 'emotion'
+import { css } from '@emotion/css'
 
 const Apps: React.FunctionComponent = () => {
   const state = useAppState()

packages/overmind-devtools-client/src/components/Apps/styles.ts

@@ -1,4 +1,4 @@
-import { css } from 'emotion'
+import { css } from '@emotion/css'
 import { colors } from '../../theme'
 
 export const wrapper = css({

packages/overmind-devtools-client/src/components/Chart/index.tsx

@@ -1,4 +1,4 @@
-import { css } from 'emotion'
+import { css } from '@emotion/css'
 import * as React from 'react'
 import { FaChevronDown, FaChevronUp } from 'react-icons/fa'
 

packages/overmind-devtools-client/src/components/Chart/styles.ts

@@ -1,4 +1,4 @@
-import { css } from 'emotion'
+import { css } from '@emotion/css'
 
 import { colors } from '../../theme'
 

packages/overmind-devtools-client/src/components/Charts/index.tsx

@@ -1,4 +1,4 @@
-import { css } from 'emotion'
+import { css } from '@emotion/css'
 import * as React from 'react'
 import SplitPane, { Pane } from '../common/SplitPane'
 

packages/overmind-devtools-client/src/components/Charts/styles.ts

@@ -1,4 +1,4 @@
-import { css } from 'emotion'
+import { css } from '@emotion/css'
 
 import { colors } from '../../theme'
 

packages/overmind-devtools-client/src/components/Components/index.tsx

@@ -2,7 +2,7 @@ import * as React from 'react'
 import { useAppState, useActions } from '../../overmind'
 import * as styles from './styles'
 import * as textStyles from '../../styles/text'
-import { css } from 'emotion'
+import { css } from '@emotion/css'
 import { colors } from '../../theme'
 import { FaChevronDown, FaChevronUp } from 'react-icons/fa'
 

packages/overmind-devtools-client/src/components/Components/styles.ts

@@ -1,4 +1,4 @@
-import { css } from 'emotion'
+import { css } from '@emotion/css'
 import { colors } from '../../theme'
 
 export const wrapper = css({

packages/overmind-devtools-client/src/components/Console/styles.ts

@@ -1,4 +1,4 @@
-import { css } from 'emotion'
+import { css } from '@emotion/css'
 
 export const wrapper = css({
   overflowY: 'auto',

packages/overmind-devtools-client/src/components/ConsoleRow/styles.ts

@@ -1,4 +1,4 @@
-import { css } from 'emotion'
+import { css } from '@emotion/css'
 import { colors } from '../../theme'
 
 export const wrapper = css({

packages/overmind-devtools-client/src/components/Devtools/index.tsx

@@ -2,7 +2,7 @@ import * as React from 'react'
 import { useAppState, useEffects } from '../../overmind'
 import * as styles from './styles'
 import * as text from '../../styles/text'
-import { css } from 'emotion'
+import { css } from '@emotion/css'
 import Workspace from '../Workspace'
 import Zoomable from '../Zoomable'
 

packages/overmind-devtools-client/src/components/Devtools/styles.ts

@@ -1,4 +1,4 @@
-import { css } from 'emotion'
+import { css } from '@emotion/css'
 import { colors } from '../../theme'
 
 export const wrapper = css({

packages/overmind-devtools-client/src/components/Flushes/index.tsx

@@ -3,7 +3,7 @@ import { useAppState } from '../../overmind'
 import * as textStyles from '../../styles/text'
 import ValueInspector from '../ValueInspector'
 import * as styles from './styles'
-import { css } from 'emotion'
+import { css } from '@emotion/css'
 
 const Flushes: React.FunctionComponent = () => {
   const state = useAppState()

packages/overmind-devtools-client/src/components/Flushes/styles.ts

@@ -1,4 +1,4 @@
-import { css } from 'emotion'
+import { css } from '@emotion/css'
 import { colors } from '../../theme'
 
 export const wrapper = css({

packages/overmind-devtools-client/src/components/History/styles.ts

@@ -1,4 +1,4 @@
-import { css } from 'emotion'
+import { css } from '@emotion/css'
 
 import { colors } from '../../theme'
 

packages/overmind-devtools-client/src/components/Inspector/index.tsx

@@ -1,4 +1,4 @@
-import { css } from 'emotion'
+import { css } from '@emotion/css'
 import * as React from 'react'
 
 import { isValidJson } from '../../overmind/utils'

packages/overmind-devtools-client/src/components/Inspector/styles.ts

@@ -1,4 +1,4 @@
-import { css } from 'emotion'
+import { css } from '@emotion/css'
 
 import { colors } from '../../theme'
 

packages/overmind-devtools-client/src/components/RuntimeConfig/styles.ts

@@ -1,4 +1,4 @@
-import { css } from 'emotion'
+import { css } from '@emotion/css'
 import { colors } from '../../theme'
 
 export const wrapper = css({

packages/overmind-devtools-client/src/components/State/index.tsx

@@ -1,4 +1,4 @@
-import { css } from 'emotion'
+import { css } from '@emotion/css'
 import * as React from 'react'
 import { PropsWithChildren } from 'react'
 

packages/overmind-devtools-client/src/components/State/styles.ts

@@ -1,4 +1,4 @@
-import { css } from 'emotion'
+import { css } from '@emotion/css'
 
 import { colors } from '../../theme'
 

packages/overmind-devtools-client/src/components/StateMachineSelector/index.tsx

@@ -2,7 +2,7 @@ import * as React from 'react'
 import * as styles from './styles'
 import { useAppState, useActions } from '../../overmind'
 import { nameToColor } from '../../overmind/utils'
-import { css } from 'emotion'
+import { css } from '@emotion/css'
 
 const StateMachineSelector: React.FunctionComponent = () => {
   const state = useAppState()

packages/overmind-devtools-client/src/components/StateMachineSelector/styles.ts

@@ -1,4 +1,4 @@
-import { css } from 'emotion'
+import { css } from '@emotion/css'
 import { colors } from '../../theme'
 
 export const selector = css({

packages/overmind-devtools-client/src/components/StateMachineTransitions/styles.ts

@@ -1,4 +1,4 @@
-import { css } from 'emotion'
+import { css } from '@emotion/css'
 import { colors } from '../../theme'
 
 export const transitionDetails = css({

packages/overmind-devtools-client/src/components/StateMachines/styles.ts

@@ -1,4 +1,4 @@
-import { css } from 'emotion'
+import { css } from '@emotion/css'
 
 export const wrapper = css({
   position: 'relative',

packages/overmind-devtools-client/src/components/StateMachinesList/index.tsx

@@ -2,7 +2,7 @@ import * as React from 'react'
 import { FaChevronDown } from 'react-icons/fa'
 import { useAppState, useActions } from '../../overmind'
 import * as styles from './styles'
-import { css } from 'emotion'
+import { css } from '@emotion/css'
 import { nameToColor } from '../../overmind/utils'
 
 const StateMachinesList: React.FunctionComponent = () => {

packages/overmind-devtools-client/src/components/StateMachinesList/styles.ts

@@ -1,4 +1,4 @@
-import { css } from 'emotion'
+import { css } from '@emotion/css'
 import { colors } from '../../theme'
 
 export const listWrapper = css({

packages/overmind-devtools-client/src/components/Tabs/index.tsx

@@ -1,4 +1,4 @@
-import { css } from 'emotion'
+import { css } from '@emotion/css'
 import * as React from 'react'
 import {
   FaChrome,

packages/overmind-devtools-client/src/components/Tabs/styles.ts

@@ -1,4 +1,4 @@
-import { css } from 'emotion'
+import { css } from '@emotion/css'
 
 import { colors } from '../../theme'
 

packages/overmind-devtools-client/src/components/Workspace/styles.ts

@@ -1,4 +1,4 @@
-import { css } from 'emotion'
+import { css } from '@emotion/css'
 import { colors } from '../../theme'
 
 export const wrapper = css({

packages/overmind-devtools-client/src/components/Zoomable/styles.ts

@@ -1,4 +1,4 @@
-import { css } from 'emotion'
+import { css } from '@emotion/css'
 import { colors } from '../../theme'
 
 export const container = (zoomLevel: number) =>

packages/overmind-devtools-client/src/components/common/Button/styles.ts

@@ -1,4 +1,4 @@
-import { css } from 'emotion'
+import { css } from '@emotion/css'
 import { colors } from '../../../theme'
 
 export const button = css({

packages/overmind-devtools-client/src/components/common/Input/styles.ts

@@ -1,4 +1,4 @@
-import { css } from 'emotion'
+import { css } from '@emotion/css'
 import { colors } from '../../../theme'
 
 export const wrapper = css({

packages/overmind-devtools-client/src/components/common/SplitPane/styles.ts

@@ -1,4 +1,4 @@
-import { css, injectGlobal } from 'emotion'
+import { css, injectGlobal } from '@emotion/css'
 import { colors } from '../../../theme'
 
 injectGlobal`

packages/overmind-devtools-client/src/components/common/Tooltip/styles.ts

@@ -1,4 +1,4 @@
-import { css } from 'emotion'
+import { css } from '@emotion/css'
 import { colors } from '../../../theme'
 
 export const tooltipWrapper = css({

packages/overmind-devtools-client/src/index.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { injectGlobal } from 'emotion'
+import { injectGlobal } from '@emotion/css'
 import { createOvermind } from 'overmind'
 import { Provider } from 'overmind-react'
 import { createRoot } from 'react-dom/client'

packages/overmind-devtools-client/src/styles/text.ts

@@ -1,4 +1,4 @@
-import { css } from 'emotion'
+import { css } from '@emotion/css'
 import { colors } from '../theme'
 
 export const white = css({