diff --git a/.eslintrc.js b/.eslintrc.js
index 23dec113db66..3b63941e2183 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -10,12 +10,13 @@ module.exports = {
   parserOptions: {
     requireConfigFile: false,
     babelOptions: {
-      presets: ['@babel/preset-react'],
+      presets: [['@babel/preset-react', { runtime: 'automatic', importSource: '@emotion/react' }]],
     },
   },
   extends: [
     'eslint:recommended',
     'plugin:react/recommended',
+    'plugin:react/jsx-runtime',
     'plugin:cypress/recommended',
     'prettier',
     'plugin:import/recommended',
@@ -84,6 +85,7 @@ module.exports = {
       extends: [
         'eslint:recommended',
         'plugin:react/recommended',
+        'plugin:react/jsx-runtime',
         'plugin:cypress/recommended',
         'plugin:@typescript-eslint/recommended',
         'prettier',
diff --git a/babel.config.js b/babel.config.js
index 496b0af1bea1..505a624298b9 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -9,7 +9,15 @@ const isESM = process.env.NODE_ENV === 'esm';
 console.log('Build Package:', path.basename(process.cwd()));
 
 // Always enabled plugins
-const basePlugins = ['babel-plugin-inline-json-import'];
+const basePlugins = [
+  'babel-plugin-inline-json-import',
+  [
+    '@emotion/babel-plugin',
+    {
+      autoLabel: 'always',
+    },
+  ],
+];
 
 // All legacy transforms have been removed as they are now included in @babel/preset-env
 // Features like class properties, optional chaining, nullish coalescing are now standard in modern JS
@@ -29,17 +37,31 @@ const svgo = {
   ],
 };
 
+const slateSerializerSpec =
+  /packages[\\/]decap-cms-widget-(markdown|richtext)[\\/]src[\\/]serializers[\\/]__tests__[\\/]slate\.spec\.js$/;
+
+const automaticReactPreset = [
+  '@babel/preset-react',
+  {
+    runtime: 'automatic',
+    importSource: '@emotion/react',
+  },
+];
+
 function presets() {
+  return [...(!isESM ? [['@babel/preset-env', {}]] : []), '@babel/preset-typescript'];
+}
+
+function overrides() {
   return [
-    '@babel/preset-react',
-    ...(!isESM ? [['@babel/preset-env', {}]] : []),
-    [
-      '@emotion/babel-preset-css-prop',
-      {
-        autoLabel: 'always',
-      },
-    ],
-    '@babel/preset-typescript',
+    {
+      exclude: slateSerializerSpec,
+      presets: [automaticReactPreset],
+    },
+    {
+      test: slateSerializerSpec,
+      presets: [['@babel/preset-react', { runtime: 'classic', pragma: 'h' }]],
+    },
   ];
 }
 
@@ -91,4 +113,5 @@ function plugins() {
 module.exports = {
   presets: presets(),
   plugins: plugins(),
+  overrides: overrides(),
 };
diff --git a/package-lock.json b/package-lock.json
index afb75680c02d..54e0799406dc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,7 +7,6 @@
     "": {
       "version": "0.0.0",
       "dependencies": {
-        "@emotion/babel-preset-css-prop": "^11.11.0",
         "buffer": "^6.0.3",
         "emotion": "^11.0.0",
         "eslint-config-prettier": "^8.0.0",
@@ -27,6 +26,7 @@
         "@babel/preset-typescript": "^7.10.4",
         "@commitlint/cli": "^18.6.1",
         "@commitlint/config-conventional": "^18.6.3",
+        "@emotion/babel-plugin": "^11.13.5",
         "@emotion/eslint-plugin": "^11.0.0",
         "@emotion/jest": "^11.11.0",
         "@octokit/rest": "^21.1.1",
@@ -239,6 +239,7 @@
     },
     "node_modules/@babel/helper-annotate-as-pure": {
       "version": "7.27.3",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/types": "^7.27.3"
@@ -399,6 +400,7 @@
       "version": "7.28.6",
       "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.28.6.tgz",
       "integrity": "sha512-S9gzZ/bz83GRysI7gAD4wPT/AI3uCnY+9xn+Mx/KPs2JwHJIz1W8PZkg2cqyt3RNOBM8ejcXhV6y8Og7ly/Dug==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
@@ -702,6 +704,7 @@
     },
     "node_modules/@babel/plugin-syntax-jsx": {
       "version": "7.27.1",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.27.1"
@@ -1435,6 +1438,7 @@
     },
     "node_modules/@babel/plugin-transform-react-jsx": {
       "version": "7.27.1",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-annotate-as-pure": "^7.27.1",
@@ -2396,33 +2400,10 @@
         "stylis": "4.2.0"
       }
     },
-    "node_modules/@emotion/babel-plugin-jsx-pragmatic": {
-      "version": "0.3.0",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/plugin-syntax-jsx": "^7.17.12"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0"
-      }
-    },
     "node_modules/@emotion/babel-plugin/node_modules/convert-source-map": {
       "version": "1.9.0",
       "license": "MIT"
     },
-    "node_modules/@emotion/babel-preset-css-prop": {
-      "version": "11.12.0",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/plugin-transform-react-jsx": "^7.17.12",
-        "@babel/runtime": "^7.18.3",
-        "@emotion/babel-plugin": "^11.12.0",
-        "@emotion/babel-plugin-jsx-pragmatic": "^0.3.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0"
-      }
-    },
     "node_modules/@emotion/cache": {
       "version": "11.14.0",
       "license": "MIT",
@@ -31333,6 +31314,7 @@
         "cross-env": "^7.0.0"
       },
       "peerDependencies": {
+        "@emotion/react": "^11.11.1",
         "react": "^19.1.0"
       }
     },
@@ -31680,6 +31662,7 @@
         "react-immutable-proptypes": "^2.1.0"
       },
       "peerDependencies": {
+        "@emotion/react": "^11.11.1",
         "decap-cms-ui-default": "^3.0.0",
         "immutable": "^3.7.6",
         "prop-types": "^15.7.2",
@@ -31845,6 +31828,7 @@
         "react-select": "^5.10.0"
       },
       "peerDependencies": {
+        "@emotion/react": "^11.11.1",
         "decap-cms-lib-widgets": "^3.0.0",
         "decap-cms-ui-default": "^3.0.0",
         "immutable": "^3.7.6",
@@ -31857,6 +31841,7 @@
       "version": "3.2.0",
       "license": "MIT",
       "peerDependencies": {
+        "@emotion/react": "^11.11.1",
         "decap-cms-ui-default": "^3.0.0",
         "prop-types": "^15.7.2",
         "react": "^19.1.0"
@@ -31869,6 +31854,7 @@
         "react-textarea-autosize": "^8.0.0"
       },
       "peerDependencies": {
+        "@emotion/react": "^11.11.1",
         "decap-cms-ui-default": "^3.0.0",
         "prop-types": "^15.7.2",
         "react": "^19.1.0"
diff --git a/package.json b/package.json
index 8f45a86bce28..49d685f8627e 100644
--- a/package.json
+++ b/package.json
@@ -55,6 +55,7 @@
     "@babel/preset-typescript": "^7.10.4",
     "@commitlint/cli": "^18.6.1",
     "@commitlint/config-conventional": "^18.6.3",
+    "@emotion/babel-plugin": "^11.13.5",
     "@emotion/eslint-plugin": "^11.0.0",
     "@emotion/jest": "^11.11.0",
     "@octokit/rest": "^21.1.1",
@@ -145,7 +146,6 @@
   },
   "private": true,
   "dependencies": {
-    "@emotion/babel-preset-css-prop": "^11.11.0",
     "buffer": "^6.0.3",
     "emotion": "^11.0.0",
     "eslint-config-prettier": "^8.0.0",
diff --git a/packages/decap-cms-backend-aws-cognito-github-proxy/src/implementation.tsx b/packages/decap-cms-backend-aws-cognito-github-proxy/src/implementation.tsx
index 2d0c44f46d00..034c4dbb9aa6 100644
--- a/packages/decap-cms-backend-aws-cognito-github-proxy/src/implementation.tsx
+++ b/packages/decap-cms-backend-aws-cognito-github-proxy/src/implementation.tsx
@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { GitHubBackend } from 'decap-cms-backend-github';
 import { PKCEAuthenticationPage } from 'decap-cms-ui-auth';
 
diff --git a/packages/decap-cms-backend-github/src/implementation.tsx b/packages/decap-cms-backend-github/src/implementation.tsx
index 9262131303a6..26037c4e2040 100644
--- a/packages/decap-cms-backend-github/src/implementation.tsx
+++ b/packages/decap-cms-backend-github/src/implementation.tsx
@@ -1,4 +1,3 @@
-import * as React from 'react';
 import semaphore from 'semaphore';
 import trimStart from 'lodash/trimStart';
 import { stripIndent } from 'common-tags';
diff --git a/packages/decap-cms-core/src/bootstrap.js b/packages/decap-cms-core/src/bootstrap.js
index fe5cf749b348..daf554faf6cf 100644
--- a/packages/decap-cms-core/src/bootstrap.js
+++ b/packages/decap-cms-core/src/bootstrap.js
@@ -1,5 +1,4 @@
 import './lib/polyfill';
-import React from 'react';
 import { createRoot } from 'react-dom/client';
 import { Provider, connect } from 'react-redux';
 import { Route, Router } from 'react-router-dom';
diff --git a/packages/decap-cms-core/src/components/App/NotFoundPage.js b/packages/decap-cms-core/src/components/App/NotFoundPage.js
index 0f404fd072b8..4255a2cda4b0 100644
--- a/packages/decap-cms-core/src/components/App/NotFoundPage.js
+++ b/packages/decap-cms-core/src/components/App/NotFoundPage.js
@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from '@emotion/styled';
 import { translate } from 'react-polyglot';
 import { lengths } from 'decap-cms-ui-default';
diff --git a/packages/decap-cms-core/src/components/Collection/CollectionControls.js b/packages/decap-cms-core/src/components/Collection/CollectionControls.js
index 40d491de5479..150c49f296b0 100644
--- a/packages/decap-cms-core/src/components/Collection/CollectionControls.js
+++ b/packages/decap-cms-core/src/components/Collection/CollectionControls.js
@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from '@emotion/styled';
 import { lengths } from 'decap-cms-ui-default';
 
diff --git a/packages/decap-cms-core/src/components/Collection/CollectionTop.js b/packages/decap-cms-core/src/components/Collection/CollectionTop.js
index 1e5c7c53517b..0b029468f367 100644
--- a/packages/decap-cms-core/src/components/Collection/CollectionTop.js
+++ b/packages/decap-cms-core/src/components/Collection/CollectionTop.js
@@ -1,6 +1,5 @@
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import React from 'react';
 import styled from '@emotion/styled';
 import { translate } from 'react-polyglot';
 import { Link } from 'react-router-dom';
diff --git a/packages/decap-cms-core/src/components/Collection/ControlButton.js b/packages/decap-cms-core/src/components/Collection/ControlButton.js
index c4e0c5f0f488..8af979467258 100644
--- a/packages/decap-cms-core/src/components/Collection/ControlButton.js
+++ b/packages/decap-cms-core/src/components/Collection/ControlButton.js
@@ -1,4 +1,3 @@
-import React from 'react';
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { buttons, StyledDropdownButton, colors } from 'decap-cms-ui-default';
diff --git a/packages/decap-cms-core/src/components/Collection/Entries/Entries.js b/packages/decap-cms-core/src/components/Collection/Entries/Entries.js
index 97d463a68252..2ce639ab6ea4 100644
--- a/packages/decap-cms-core/src/components/Collection/Entries/Entries.js
+++ b/packages/decap-cms-core/src/components/Collection/Entries/Entries.js
@@ -1,5 +1,4 @@
 import PropTypes from 'prop-types';
-import React from 'react';
 import styled from '@emotion/styled';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { translate } from 'react-polyglot';
diff --git a/packages/decap-cms-core/src/components/Collection/Entries/EntryCard.js b/packages/decap-cms-core/src/components/Collection/Entries/EntryCard.js
index 55e96fdbc662..c46872cd12c2 100644
--- a/packages/decap-cms-core/src/components/Collection/Entries/EntryCard.js
+++ b/packages/decap-cms-core/src/components/Collection/Entries/EntryCard.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import styled from '@emotion/styled';
 import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
diff --git a/packages/decap-cms-core/src/components/Collection/Entries/__tests__/EntriesCollection.spec.js b/packages/decap-cms-core/src/components/Collection/Entries/__tests__/EntriesCollection.spec.js
index 8ef282154b15..2fe3845de290 100644
--- a/packages/decap-cms-core/src/components/Collection/Entries/__tests__/EntriesCollection.spec.js
+++ b/packages/decap-cms-core/src/components/Collection/Entries/__tests__/EntriesCollection.spec.js
@@ -1,4 +1,3 @@
-import React from 'react';
 import { render } from '@testing-library/react';
 import { Set, fromJS } from 'immutable';
 import configureStore from 'redux-mock-store';
@@ -11,7 +10,6 @@ import ConnectedEntriesCollection, {
 import Entries from '../Entries';
 
 jest.mock('../Entries', () => {
-  const React = require('react');
   return jest.fn(props => <mock-entries {...props} />);
 });
 
diff --git a/packages/decap-cms-core/src/components/Collection/FilterControl.js b/packages/decap-cms-core/src/components/Collection/FilterControl.js
index ddd71f2249eb..1301d5494698 100644
--- a/packages/decap-cms-core/src/components/Collection/FilterControl.js
+++ b/packages/decap-cms-core/src/components/Collection/FilterControl.js
@@ -1,4 +1,3 @@
-import React from 'react';
 import { translate } from 'react-polyglot';
 import { Dropdown, DropdownCheckedItem } from 'decap-cms-ui-default';
 
diff --git a/packages/decap-cms-core/src/components/Collection/GroupControl.js b/packages/decap-cms-core/src/components/Collection/GroupControl.js
index 34b7e692c8d8..ef600813fc7d 100644
--- a/packages/decap-cms-core/src/components/Collection/GroupControl.js
+++ b/packages/decap-cms-core/src/components/Collection/GroupControl.js
@@ -1,4 +1,3 @@
-import React from 'react';
 import { translate } from 'react-polyglot';
 import { Dropdown, DropdownItem } from 'decap-cms-ui-default';
 
diff --git a/packages/decap-cms-core/src/components/Collection/SortControl.js b/packages/decap-cms-core/src/components/Collection/SortControl.js
index 698e547ca4c3..bab28e477c42 100644
--- a/packages/decap-cms-core/src/components/Collection/SortControl.js
+++ b/packages/decap-cms-core/src/components/Collection/SortControl.js
@@ -1,4 +1,3 @@
-import React from 'react';
 import { translate } from 'react-polyglot';
 import { Dropdown, DropdownItem } from 'decap-cms-ui-default';
 
diff --git a/packages/decap-cms-core/src/components/Collection/ViewStyleControl.js b/packages/decap-cms-core/src/components/Collection/ViewStyleControl.js
index f8218887d787..0723655a5301 100644
--- a/packages/decap-cms-core/src/components/Collection/ViewStyleControl.js
+++ b/packages/decap-cms-core/src/components/Collection/ViewStyleControl.js
@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from '@emotion/styled';
 import { Icon, buttons, colors } from 'decap-cms-ui-default';
 
diff --git a/packages/decap-cms-core/src/components/Collection/__tests__/Collection.spec.js b/packages/decap-cms-core/src/components/Collection/__tests__/Collection.spec.js
index eca5af8d4023..c5f66e67a1e7 100644
--- a/packages/decap-cms-core/src/components/Collection/__tests__/Collection.spec.js
+++ b/packages/decap-cms-core/src/components/Collection/__tests__/Collection.spec.js
@@ -1,4 +1,3 @@
-import React from 'react';
 import { render } from '@testing-library/react';
 import { fromJS } from 'immutable';
 import configureStore from 'redux-mock-store';
diff --git a/packages/decap-cms-core/src/components/Collection/__tests__/NestedCollection.spec.js b/packages/decap-cms-core/src/components/Collection/__tests__/NestedCollection.spec.js
index 7c17cd18c68e..7c24fbb67ee7 100644
--- a/packages/decap-cms-core/src/components/Collection/__tests__/NestedCollection.spec.js
+++ b/packages/decap-cms-core/src/components/Collection/__tests__/NestedCollection.spec.js
@@ -1,4 +1,3 @@
-import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
 import { render, fireEvent } from '@testing-library/react';
 import { fromJS } from 'immutable';
diff --git a/packages/decap-cms-core/src/components/Collection/__tests__/Sidebar.spec.js b/packages/decap-cms-core/src/components/Collection/__tests__/Sidebar.spec.js
index d94723964fb1..690d72b7f86b 100644
--- a/packages/decap-cms-core/src/components/Collection/__tests__/Sidebar.spec.js
+++ b/packages/decap-cms-core/src/components/Collection/__tests__/Sidebar.spec.js
@@ -1,4 +1,3 @@
-import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
 import { render } from '@testing-library/react';
 import { fromJS } from 'immutable';
diff --git a/packages/decap-cms-core/src/components/Editor/EditorInterface.js b/packages/decap-cms-core/src/components/Editor/EditorInterface.js
index a331510d4313..255df012fc9a 100644
--- a/packages/decap-cms-core/src/components/Editor/EditorInterface.js
+++ b/packages/decap-cms-core/src/components/Editor/EditorInterface.js
@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import React, { Component } from 'react';
+import { Component } from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { css, Global } from '@emotion/react';
 import styled from '@emotion/styled';
diff --git a/packages/decap-cms-core/src/components/Editor/EditorNotesPane/AddNoteForm.js b/packages/decap-cms-core/src/components/Editor/EditorNotesPane/AddNoteForm.js
index 108a510e1923..2b2524aa0410 100644
--- a/packages/decap-cms-core/src/components/Editor/EditorNotesPane/AddNoteForm.js
+++ b/packages/decap-cms-core/src/components/Editor/EditorNotesPane/AddNoteForm.js
@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import React, { Component } from 'react';
+import { Component } from 'react';
 import styled from '@emotion/styled';
 import { colors, transitions } from 'decap-cms-ui-default';
 
diff --git a/packages/decap-cms-core/src/components/Editor/EditorNotesPane/EditorNotesPane.js b/packages/decap-cms-core/src/components/Editor/EditorNotesPane/EditorNotesPane.js
index 3f4fff570965..0f61f7e17093 100644
--- a/packages/decap-cms-core/src/components/Editor/EditorNotesPane/EditorNotesPane.js
+++ b/packages/decap-cms-core/src/components/Editor/EditorNotesPane/EditorNotesPane.js
@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import React, { Component } from 'react';
+import { Component } from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import styled from '@emotion/styled';
 import { List } from 'immutable';
diff --git a/packages/decap-cms-core/src/components/Editor/EditorNotesPane/NoteItem.js b/packages/decap-cms-core/src/components/Editor/EditorNotesPane/NoteItem.js
index db7fa4066fca..6ea06b2dafb6 100644
--- a/packages/decap-cms-core/src/components/Editor/EditorNotesPane/NoteItem.js
+++ b/packages/decap-cms-core/src/components/Editor/EditorNotesPane/NoteItem.js
@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import React, { Component } from 'react';
+import { Component } from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import styled from '@emotion/styled';
 import { colors, transitions } from 'decap-cms-ui-default';
diff --git a/packages/decap-cms-core/src/components/Editor/EditorNotesPane/NotesList.js b/packages/decap-cms-core/src/components/Editor/EditorNotesPane/NotesList.js
index 509d74f43c8e..2c27b92b1e81 100644
--- a/packages/decap-cms-core/src/components/Editor/EditorNotesPane/NotesList.js
+++ b/packages/decap-cms-core/src/components/Editor/EditorNotesPane/NotesList.js
@@ -1,5 +1,4 @@
 import PropTypes from 'prop-types';
-import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import styled from '@emotion/styled';
 
diff --git a/packages/decap-cms-core/src/components/Editor/__tests__/Editor.spec.js b/packages/decap-cms-core/src/components/Editor/__tests__/Editor.spec.js
index 05cf0e91f4c9..27a81d12c280 100644
--- a/packages/decap-cms-core/src/components/Editor/__tests__/Editor.spec.js
+++ b/packages/decap-cms-core/src/components/Editor/__tests__/Editor.spec.js
@@ -1,4 +1,3 @@
-import React from 'react';
 import { render } from '@testing-library/react';
 import { fromJS } from 'immutable';
 
diff --git a/packages/decap-cms-core/src/components/Editor/__tests__/EditorToolbar.spec.js b/packages/decap-cms-core/src/components/Editor/__tests__/EditorToolbar.spec.js
index 55736baee917..a846d6c188bd 100644
--- a/packages/decap-cms-core/src/components/Editor/__tests__/EditorToolbar.spec.js
+++ b/packages/decap-cms-core/src/components/Editor/__tests__/EditorToolbar.spec.js
@@ -1,4 +1,3 @@
-import React from 'react';
 import { render } from '@testing-library/react';
 import { fromJS } from 'immutable';
 
diff --git a/packages/decap-cms-core/src/components/EditorWidgets/Unknown/UnknownControl.js b/packages/decap-cms-core/src/components/EditorWidgets/Unknown/UnknownControl.js
index 638b9ea653fe..45d4fb506be8 100644
--- a/packages/decap-cms-core/src/components/EditorWidgets/Unknown/UnknownControl.js
+++ b/packages/decap-cms-core/src/components/EditorWidgets/Unknown/UnknownControl.js
@@ -1,4 +1,3 @@
-import React from 'react';
 import { translate } from 'react-polyglot';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
diff --git a/packages/decap-cms-core/src/components/EditorWidgets/Unknown/UnknownPreview.js b/packages/decap-cms-core/src/components/EditorWidgets/Unknown/UnknownPreview.js
index 44a8ec0b5460..1dc4435abf67 100644
--- a/packages/decap-cms-core/src/components/EditorWidgets/Unknown/UnknownPreview.js
+++ b/packages/decap-cms-core/src/components/EditorWidgets/Unknown/UnknownPreview.js
@@ -1,4 +1,3 @@
-import React from 'react';
 import { translate } from 'react-polyglot';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
diff --git a/packages/decap-cms-core/src/components/MediaLibrary/EmptyMessage.js b/packages/decap-cms-core/src/components/MediaLibrary/EmptyMessage.js
index 024181c47de8..c91b475ac638 100644
--- a/packages/decap-cms-core/src/components/MediaLibrary/EmptyMessage.js
+++ b/packages/decap-cms-core/src/components/MediaLibrary/EmptyMessage.js
@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import { colors } from 'decap-cms-ui-default';
diff --git a/packages/decap-cms-core/src/components/MediaLibrary/MediaLibraryCardGrid.js b/packages/decap-cms-core/src/components/MediaLibrary/MediaLibraryCardGrid.js
index f8d7b04d4d40..d2831e56ae63 100644
--- a/packages/decap-cms-core/src/components/MediaLibrary/MediaLibraryCardGrid.js
+++ b/packages/decap-cms-core/src/components/MediaLibrary/MediaLibraryCardGrid.js
@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import { Waypoint } from 'react-waypoint';
diff --git a/packages/decap-cms-core/src/components/MediaLibrary/MediaLibraryHeader.js b/packages/decap-cms-core/src/components/MediaLibrary/MediaLibraryHeader.js
index 9239fc0464e3..ca83aeb7f21f 100644
--- a/packages/decap-cms-core/src/components/MediaLibrary/MediaLibraryHeader.js
+++ b/packages/decap-cms-core/src/components/MediaLibrary/MediaLibraryHeader.js
@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import { Icon, shadows, colors, buttons } from 'decap-cms-ui-default';
diff --git a/packages/decap-cms-core/src/components/MediaLibrary/MediaLibraryModal.js b/packages/decap-cms-core/src/components/MediaLibrary/MediaLibraryModal.js
index 6648d5b5abdf..625f6c62fe1c 100644
--- a/packages/decap-cms-core/src/components/MediaLibrary/MediaLibraryModal.js
+++ b/packages/decap-cms-core/src/components/MediaLibrary/MediaLibraryModal.js
@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import { Map } from 'immutable';
diff --git a/packages/decap-cms-core/src/components/MediaLibrary/MediaLibrarySearch.js b/packages/decap-cms-core/src/components/MediaLibrary/MediaLibrarySearch.js
index ec49a871a2c0..6c8533892239 100644
--- a/packages/decap-cms-core/src/components/MediaLibrary/MediaLibrarySearch.js
+++ b/packages/decap-cms-core/src/components/MediaLibrary/MediaLibrarySearch.js
@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import { Icon, lengths, colors, zIndex } from 'decap-cms-ui-default';
diff --git a/packages/decap-cms-core/src/components/MediaLibrary/MediaLibraryTop.js b/packages/decap-cms-core/src/components/MediaLibrary/MediaLibraryTop.js
index 88491dbee906..c64c1d708355 100644
--- a/packages/decap-cms-core/src/components/MediaLibrary/MediaLibraryTop.js
+++ b/packages/decap-cms-core/src/components/MediaLibrary/MediaLibraryTop.js
@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
diff --git a/packages/decap-cms-core/src/components/MediaLibrary/__tests__/MediaLibraryButtons.spec.js b/packages/decap-cms-core/src/components/MediaLibrary/__tests__/MediaLibraryButtons.spec.js
index 9761933283b5..9acc834c3a31 100644
--- a/packages/decap-cms-core/src/components/MediaLibrary/__tests__/MediaLibraryButtons.spec.js
+++ b/packages/decap-cms-core/src/components/MediaLibrary/__tests__/MediaLibraryButtons.spec.js
@@ -1,4 +1,3 @@
-import React from 'react';
 import { render } from '@testing-library/react';
 
 import { CopyToClipBoardButton } from '../MediaLibraryButtons';
diff --git a/packages/decap-cms-core/src/components/MediaLibrary/__tests__/MediaLibraryCard.spec.js b/packages/decap-cms-core/src/components/MediaLibrary/__tests__/MediaLibraryCard.spec.js
index d0516c87d28e..fee162a2a21c 100644
--- a/packages/decap-cms-core/src/components/MediaLibrary/__tests__/MediaLibraryCard.spec.js
+++ b/packages/decap-cms-core/src/components/MediaLibrary/__tests__/MediaLibraryCard.spec.js
@@ -1,4 +1,3 @@
-import React from 'react';
 import { Map } from 'immutable';
 import { render } from '@testing-library/react';
 
diff --git a/packages/decap-cms-core/src/components/UI/FileUploadButton.js b/packages/decap-cms-core/src/components/UI/FileUploadButton.js
index 3746e6e57a37..88f3cd2e5d18 100644
--- a/packages/decap-cms-core/src/components/UI/FileUploadButton.js
+++ b/packages/decap-cms-core/src/components/UI/FileUploadButton.js
@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 
 export function FileUploadButton({ label, imagesOnly, onChange, disabled, className }) {
diff --git a/packages/decap-cms-core/src/components/UI/Notifications.tsx b/packages/decap-cms-core/src/components/UI/Notifications.tsx
index 664888157c78..f946e9a8da01 100644
--- a/packages/decap-cms-core/src/components/UI/Notifications.tsx
+++ b/packages/decap-cms-core/src/components/UI/Notifications.tsx
@@ -1,5 +1,4 @@
-// eslint-disable-next-line no-unused-vars
-import React, { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 // import { translate } from 'react-polyglot';
 import { injectStyle } from 'react-toastify/dist/inject-style';
 import { toast, ToastContainer } from 'react-toastify';
@@ -25,7 +24,7 @@ type IdMap = {
 function Notifications({ notifications }: Props) {
   const t = useTranslate();
   const dispatch = useDispatch();
-  const [idMap, setIdMap] = React.useState<IdMap>({});
+  const [idMap, setIdMap] = useState<IdMap>({});
 
   useEffect(() => {
     notifications
diff --git a/packages/decap-cms-core/src/components/UI/SettingsDropdown.js b/packages/decap-cms-core/src/components/UI/SettingsDropdown.js
index 30d7d31c29cf..85e965381ceb 100644
--- a/packages/decap-cms-core/src/components/UI/SettingsDropdown.js
+++ b/packages/decap-cms-core/src/components/UI/SettingsDropdown.js
@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
diff --git a/packages/decap-cms-core/src/components/UI/__tests__/ErrorBoundary.spec.js b/packages/decap-cms-core/src/components/UI/__tests__/ErrorBoundary.spec.js
index ea11b0997b4a..b25d9e9dd652 100644
--- a/packages/decap-cms-core/src/components/UI/__tests__/ErrorBoundary.spec.js
+++ b/packages/decap-cms-core/src/components/UI/__tests__/ErrorBoundary.spec.js
@@ -1,4 +1,3 @@
-import React from 'react';
 import { render } from '@testing-library/react';
 import { oneLineTrim } from 'common-tags';
 
diff --git a/packages/decap-cms-core/src/components/Workflow/Workflow.js b/packages/decap-cms-core/src/components/Workflow/Workflow.js
index c98569b655d9..1e8058c06251 100644
--- a/packages/decap-cms-core/src/components/Workflow/Workflow.js
+++ b/packages/decap-cms-core/src/components/Workflow/Workflow.js
@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import React, { Component } from 'react';
+import { Component } from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import styled from '@emotion/styled';
 import { OrderedMap } from 'immutable';
diff --git a/packages/decap-cms-core/src/components/Workflow/WorkflowCard.js b/packages/decap-cms-core/src/components/Workflow/WorkflowCard.js
index 1c6e8a670dbb..7569cd210c9d 100644
--- a/packages/decap-cms-core/src/components/Workflow/WorkflowCard.js
+++ b/packages/decap-cms-core/src/components/Workflow/WorkflowCard.js
@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
diff --git a/packages/decap-cms-core/src/constants/fieldInference.tsx b/packages/decap-cms-core/src/constants/fieldInference.tsx
index 56c49aa7440c..8f755608b6b6 100644
--- a/packages/decap-cms-core/src/constants/fieldInference.tsx
+++ b/packages/decap-cms-core/src/constants/fieldInference.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import type { ReactNode } from 'react';
 
 export const IDENTIFIER_FIELDS = ['title', 'path'] as const;
 
@@ -9,7 +9,7 @@ export const INFERABLE_FIELDS = {
     type: 'string',
     secondaryTypes: [],
     synonyms: ['title', 'name', 'label', 'headline', 'header'],
-    defaultPreview: (value: React.ReactNode) => <h1>{value}</h1>, // eslint-disable-line react/display-name
+    defaultPreview: (value: ReactNode) => <h1>{value}</h1>, // eslint-disable-line react/display-name
     fallbackToFirstField: true,
     showError: true,
   },
@@ -17,7 +17,7 @@ export const INFERABLE_FIELDS = {
     type: 'string',
     secondaryTypes: [],
     synonyms: ['short_title', 'shortTitle', 'short'],
-    defaultPreview: (value: React.ReactNode) => <h2>{value}</h2>, // eslint-disable-line react/display-name
+    defaultPreview: (value: ReactNode) => <h2>{value}</h2>, // eslint-disable-line react/display-name
     fallbackToFirstField: false,
     showError: false,
   },
@@ -25,7 +25,7 @@ export const INFERABLE_FIELDS = {
     type: 'string',
     secondaryTypes: [],
     synonyms: ['author', 'name', 'by', 'byline', 'owner'],
-    defaultPreview: (value: React.ReactNode) => <strong>{value}</strong>, // eslint-disable-line react/display-name
+    defaultPreview: (value: ReactNode) => <strong>{value}</strong>, // eslint-disable-line react/display-name
     fallbackToFirstField: false,
     showError: false,
   },
@@ -33,7 +33,7 @@ export const INFERABLE_FIELDS = {
     type: 'datetime',
     secondaryTypes: ['date'],
     synonyms: ['date', 'publishDate', 'publish_date'],
-    defaultPreview: (value: React.ReactNode) => value,
+    defaultPreview: (value: ReactNode) => value,
     fallbackToFirstField: false,
     showError: false,
   },
@@ -53,7 +53,7 @@ export const INFERABLE_FIELDS = {
       'bio',
       'summary',
     ],
-    defaultPreview: (value: React.ReactNode) => value,
+    defaultPreview: (value: ReactNode) => value,
     fallbackToFirstField: false,
     showError: false,
   },
@@ -71,7 +71,7 @@ export const INFERABLE_FIELDS = {
       'hero',
       'logo',
     ],
-    defaultPreview: (value: React.ReactNode) => value,
+    defaultPreview: (value: ReactNode) => value,
     fallbackToFirstField: false,
     showError: false,
   },
diff --git a/packages/decap-cms-editor-component-image/package.json b/packages/decap-cms-editor-component-image/package.json
index 5282acf73908..51267a4da579 100644
--- a/packages/decap-cms-editor-component-image/package.json
+++ b/packages/decap-cms-editor-component-image/package.json
@@ -22,6 +22,7 @@
     "cross-env": "^7.0.0"
   },
   "peerDependencies": {
+    "@emotion/react": "^11.11.1",
     "react": "^19.1.0"
   }
 }
diff --git a/packages/decap-cms-editor-component-image/src/index.js b/packages/decap-cms-editor-component-image/src/index.js
index 9541d2236e48..8a5df0e2ded0 100644
--- a/packages/decap-cms-editor-component-image/src/index.js
+++ b/packages/decap-cms-editor-component-image/src/index.js
@@ -1,5 +1,3 @@
-import React from 'react';
-
 const image = {
   label: 'Image',
   id: 'image',
diff --git a/packages/decap-cms-ui-auth/src/__tests__/NetlifyAuthenticationPage.spec.js b/packages/decap-cms-ui-auth/src/__tests__/NetlifyAuthenticationPage.spec.js
index 31411fb6774a..0419ef7c0971 100644
--- a/packages/decap-cms-ui-auth/src/__tests__/NetlifyAuthenticationPage.spec.js
+++ b/packages/decap-cms-ui-auth/src/__tests__/NetlifyAuthenticationPage.spec.js
@@ -1,4 +1,3 @@
-import React from 'react';
 import { render } from '@testing-library/react';
 
 import NetlifyAuthenticationPage from '../NetlifyAuthenticationPage';
diff --git a/packages/decap-cms-ui-default/src/AuthenticationPage.js b/packages/decap-cms-ui-default/src/AuthenticationPage.js
index 5ce5539ad3d9..d9d15e39cc28 100644
--- a/packages/decap-cms-ui-default/src/AuthenticationPage.js
+++ b/packages/decap-cms-ui-default/src/AuthenticationPage.js
@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 
diff --git a/packages/decap-cms-ui-default/src/Dropdown.js b/packages/decap-cms-ui-default/src/Dropdown.js
index be3113b28819..52e0c867f3bb 100644
--- a/packages/decap-cms-ui-default/src/Dropdown.js
+++ b/packages/decap-cms-ui-default/src/Dropdown.js
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import PropTypes from 'prop-types';
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
diff --git a/packages/decap-cms-ui-default/src/Icon.js b/packages/decap-cms-ui-default/src/Icon.js
index 11da3de53959..29f47988d65c 100644
--- a/packages/decap-cms-ui-default/src/Icon.js
+++ b/packages/decap-cms-ui-default/src/Icon.js
@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 
@@ -54,6 +53,8 @@ const sizes = {
 
 function Icon({ type, direction, size = 'medium', className }) {
   const IconSvg = icons[type].image;
+  // inline-react-svg stores root SVG attributes here, but React 19 no longer applies them.
+  const iconProps = IconSvg.defaultProps || {};
 
   return (
     <IconWrapper
@@ -61,7 +62,7 @@ function Icon({ type, direction, size = 'medium', className }) {
       size={sizes[size] || size}
       rotation={getRotation(icons[type].direction, direction)}
     >
-      <IconSvg />
+      <IconSvg {...iconProps} />
     </IconWrapper>
   );
 }
diff --git a/packages/decap-cms-ui-default/src/IconButton.js b/packages/decap-cms-ui-default/src/IconButton.js
index 1a87e1e7dfa8..cc87d2141782 100644
--- a/packages/decap-cms-ui-default/src/IconButton.js
+++ b/packages/decap-cms-ui-default/src/IconButton.js
@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from '@emotion/styled';
 
 import Icon from './Icon';
diff --git a/packages/decap-cms-ui-default/src/ListItemTopBar.js b/packages/decap-cms-ui-default/src/ListItemTopBar.js
index 4fd56abf4448..2d6dff147356 100644
--- a/packages/decap-cms-ui-default/src/ListItemTopBar.js
+++ b/packages/decap-cms-ui-default/src/ListItemTopBar.js
@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 
diff --git a/packages/decap-cms-ui-default/src/Toggle.js b/packages/decap-cms-ui-default/src/Toggle.js
index 46a4d25b9c39..b605c7deba08 100644
--- a/packages/decap-cms-ui-default/src/Toggle.js
+++ b/packages/decap-cms-ui-default/src/Toggle.js
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import { css } from '@emotion/react';
diff --git a/packages/decap-cms-ui-default/src/styles.js b/packages/decap-cms-ui-default/src/styles.js
index 704331bcf495..ebeb756d617f 100644
--- a/packages/decap-cms-ui-default/src/styles.js
+++ b/packages/decap-cms-ui-default/src/styles.js
@@ -1,4 +1,3 @@
-import React from 'react';
 import { css, Global } from '@emotion/react';
 
 /**
diff --git a/packages/decap-cms-widget-code/src/CodePreview.js b/packages/decap-cms-widget-code/src/CodePreview.js
index f8f3d16a0e7f..b360c772f464 100644
--- a/packages/decap-cms-widget-code/src/CodePreview.js
+++ b/packages/decap-cms-widget-code/src/CodePreview.js
@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import { Map } from 'immutable';
 import isString from 'lodash/isString';
diff --git a/packages/decap-cms-widget-code/src/SettingsButton.js b/packages/decap-cms-widget-code/src/SettingsButton.js
index 2744ff342f99..dd519758bfed 100644
--- a/packages/decap-cms-widget-code/src/SettingsButton.js
+++ b/packages/decap-cms-widget-code/src/SettingsButton.js
@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from '@emotion/styled';
 import { Icon, buttons, shadows, zIndex } from 'decap-cms-ui-default';
 
diff --git a/packages/decap-cms-widget-code/src/SettingsPane.js b/packages/decap-cms-widget-code/src/SettingsPane.js
index 3f83671709f2..cb4a41c942b1 100644
--- a/packages/decap-cms-widget-code/src/SettingsPane.js
+++ b/packages/decap-cms-widget-code/src/SettingsPane.js
@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from '@emotion/styled';
 import Select from 'react-select';
 import isHotkey from 'is-hotkey';
diff --git a/packages/decap-cms-widget-colorstring/src/ColorPreview.js b/packages/decap-cms-widget-colorstring/src/ColorPreview.js
index 6b6271572435..7beb3bf0386d 100644
--- a/packages/decap-cms-widget-colorstring/src/ColorPreview.js
+++ b/packages/decap-cms-widget-colorstring/src/ColorPreview.js
@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import { WidgetPreviewContainer } from 'decap-cms-ui-default';
 
diff --git a/packages/decap-cms-widget-datetime/src/DateTimeControl.js b/packages/decap-cms-widget-datetime/src/DateTimeControl.js
index c6057a3be8ae..7f20288fc8b9 100644
--- a/packages/decap-cms-widget-datetime/src/DateTimeControl.js
+++ b/packages/decap-cms-widget-datetime/src/DateTimeControl.js
@@ -1,7 +1,6 @@
-/** @jsx jsx */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { jsx, css } from '@emotion/react';
+import { css } from '@emotion/react';
 import dayjs from 'dayjs';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
 import localizedFormat from 'dayjs/plugin/localizedFormat';
diff --git a/packages/decap-cms-widget-datetime/src/DateTimePreview.js b/packages/decap-cms-widget-datetime/src/DateTimePreview.js
index bf7017df71be..1fe34df1bfc7 100644
--- a/packages/decap-cms-widget-datetime/src/DateTimePreview.js
+++ b/packages/decap-cms-widget-datetime/src/DateTimePreview.js
@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import { WidgetPreviewContainer } from 'decap-cms-ui-default';
 
diff --git a/packages/decap-cms-widget-datetime/src/__tests__/DateTimeControl.spec.js b/packages/decap-cms-widget-datetime/src/__tests__/DateTimeControl.spec.js
index 9e1e021d9bf7..754709f7ae2b 100644
--- a/packages/decap-cms-widget-datetime/src/__tests__/DateTimeControl.spec.js
+++ b/packages/decap-cms-widget-datetime/src/__tests__/DateTimeControl.spec.js
@@ -1,4 +1,3 @@
-import React from 'react';
 import { render, fireEvent } from '@testing-library/react';
 import dayjs from 'dayjs';
 
diff --git a/packages/decap-cms-widget-file/src/FilePreview.js b/packages/decap-cms-widget-file/src/FilePreview.js
index 0017b54d8de6..7cbaac69763e 100644
--- a/packages/decap-cms-widget-file/src/FilePreview.js
+++ b/packages/decap-cms-widget-file/src/FilePreview.js
@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import { List } from 'immutable';
diff --git a/packages/decap-cms-widget-image/src/ImagePreview.js b/packages/decap-cms-widget-image/src/ImagePreview.js
index f34f90636b94..eb97074d5582 100644
--- a/packages/decap-cms-widget-image/src/ImagePreview.js
+++ b/packages/decap-cms-widget-image/src/ImagePreview.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import { List } from 'immutable';
diff --git a/packages/decap-cms-widget-list/src/__tests__/ListControl.spec.js b/packages/decap-cms-widget-list/src/__tests__/ListControl.spec.js
index 72825ccb7d19..bf9e3345d35e 100644
--- a/packages/decap-cms-widget-list/src/__tests__/ListControl.spec.js
+++ b/packages/decap-cms-widget-list/src/__tests__/ListControl.spec.js
@@ -1,4 +1,3 @@
-import React from 'react';
 import { fireEvent, render } from '@testing-library/react';
 import { fromJS } from 'immutable';
 
diff --git a/packages/decap-cms-widget-map/src/MapPreview.js b/packages/decap-cms-widget-map/src/MapPreview.js
index 1e0f57b4f8a5..3f7821f2257a 100644
--- a/packages/decap-cms-widget-map/src/MapPreview.js
+++ b/packages/decap-cms-widget-map/src/MapPreview.js
@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import { WidgetPreviewContainer } from 'decap-cms-ui-default';
 
diff --git a/packages/decap-cms-widget-markdown/src/MarkdownControl/RawEditor.js b/packages/decap-cms-widget-markdown/src/MarkdownControl/RawEditor.js
index be007246a58e..081705cc1e69 100644
--- a/packages/decap-cms-widget-markdown/src/MarkdownControl/RawEditor.js
+++ b/packages/decap-cms-widget-markdown/src/MarkdownControl/RawEditor.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { ClassNames } from '@emotion/react';
diff --git a/packages/decap-cms-widget-markdown/src/MarkdownControl/ToolbarButton.js b/packages/decap-cms-widget-markdown/src/MarkdownControl/ToolbarButton.js
index c75a2dbb53c0..9886b2710b6c 100644
--- a/packages/decap-cms-widget-markdown/src/MarkdownControl/ToolbarButton.js
+++ b/packages/decap-cms-widget-markdown/src/MarkdownControl/ToolbarButton.js
@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import { Icon, buttons } from 'decap-cms-ui-default';
diff --git a/packages/decap-cms-widget-markdown/src/MarkdownControl/VisualEditor.js b/packages/decap-cms-widget-markdown/src/MarkdownControl/VisualEditor.js
index bb3555a14e58..efe10c3dc131 100644
--- a/packages/decap-cms-widget-markdown/src/MarkdownControl/VisualEditor.js
+++ b/packages/decap-cms-widget-markdown/src/MarkdownControl/VisualEditor.js
@@ -1,5 +1,5 @@
 // @refresh reset
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { ClassNames, css as coreCss } from '@emotion/react';
diff --git a/packages/decap-cms-widget-markdown/src/MarkdownControl/components/Shortcode.js b/packages/decap-cms-widget-markdown/src/MarkdownControl/components/Shortcode.js
index 7a835796de22..5c4ba28a46fb 100644
--- a/packages/decap-cms-widget-markdown/src/MarkdownControl/components/Shortcode.js
+++ b/packages/decap-cms-widget-markdown/src/MarkdownControl/components/Shortcode.js
@@ -1,5 +1,5 @@
 /* eslint-disable react/prop-types */
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { css } from '@emotion/react';
 import { fromJS } from 'immutable';
 import omit from 'lodash/omit';
diff --git a/packages/decap-cms-widget-markdown/src/MarkdownControl/components/VoidBlock.js b/packages/decap-cms-widget-markdown/src/MarkdownControl/components/VoidBlock.js
index ad2b0a7b9ef0..a23cfd49c1d5 100644
--- a/packages/decap-cms-widget-markdown/src/MarkdownControl/components/VoidBlock.js
+++ b/packages/decap-cms-widget-markdown/src/MarkdownControl/components/VoidBlock.js
@@ -1,5 +1,4 @@
 /* eslint-disable react/prop-types */
-import React from 'react';
 import { css } from '@emotion/react';
 import { zIndex } from 'decap-cms-ui-default';
 import { ReactEditor, useSlate } from 'slate-react';
diff --git a/packages/decap-cms-widget-markdown/src/MarkdownControl/renderers.js b/packages/decap-cms-widget-markdown/src/MarkdownControl/renderers.js
index 10b0fc0217e4..fbddd3842675 100644
--- a/packages/decap-cms-widget-markdown/src/MarkdownControl/renderers.js
+++ b/packages/decap-cms-widget-markdown/src/MarkdownControl/renderers.js
@@ -1,5 +1,4 @@
 /* eslint-disable react/display-name */
-import React from 'react';
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { colors, lengths } from 'decap-cms-ui-default';
diff --git a/packages/decap-cms-widget-markdown/src/__tests__/renderer.spec.js b/packages/decap-cms-widget-markdown/src/__tests__/renderer.spec.js
index 73eb3c7324db..85f8f46374d1 100644
--- a/packages/decap-cms-widget-markdown/src/__tests__/renderer.spec.js
+++ b/packages/decap-cms-widget-markdown/src/__tests__/renderer.spec.js
@@ -1,4 +1,3 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 import padStart from 'lodash/padStart';
 import { Map } from 'immutable';
diff --git a/packages/decap-cms-widget-markdown/src/serializers/__tests__/slate.spec.js b/packages/decap-cms-widget-markdown/src/serializers/__tests__/slate.spec.js
index a0bb78b64dfb..ccfd5acb72cd 100644
--- a/packages/decap-cms-widget-markdown/src/serializers/__tests__/slate.spec.js
+++ b/packages/decap-cms-widget-markdown/src/serializers/__tests__/slate.spec.js
@@ -1,7 +1,9 @@
+/** @jsxRuntime classic */
 /** @jsx h */
 
 import flow from 'lodash/flow';
 
+// eslint-disable-next-line no-unused-vars
 import h from '../../../test-helpers/h';
 import { markdownToSlate, slateToMarkdown } from '../index';
 
diff --git a/packages/decap-cms-widget-number/package.json b/packages/decap-cms-widget-number/package.json
index d15d64b5d5f0..c5ad089638b4 100644
--- a/packages/decap-cms-widget-number/package.json
+++ b/packages/decap-cms-widget-number/package.json
@@ -23,6 +23,7 @@
     "react-immutable-proptypes": "^2.1.0"
   },
   "peerDependencies": {
+    "@emotion/react": "^11.11.1",
     "decap-cms-ui-default": "^3.0.0",
     "immutable": "^3.7.6",
     "prop-types": "^15.7.2",
diff --git a/packages/decap-cms-widget-number/src/NumberPreview.js b/packages/decap-cms-widget-number/src/NumberPreview.js
index 397de228edd3..d71fe42b795f 100644
--- a/packages/decap-cms-widget-number/src/NumberPreview.js
+++ b/packages/decap-cms-widget-number/src/NumberPreview.js
@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import { WidgetPreviewContainer } from 'decap-cms-ui-default';
 
diff --git a/packages/decap-cms-widget-object/src/ObjectPreview.js b/packages/decap-cms-widget-object/src/ObjectPreview.js
index 5209503eb75e..6ee443127b7f 100644
--- a/packages/decap-cms-widget-object/src/ObjectPreview.js
+++ b/packages/decap-cms-widget-object/src/ObjectPreview.js
@@ -1,4 +1,3 @@
-import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { WidgetPreviewContainer } from 'decap-cms-ui-default';
 import { fromJS } from 'immutable';
diff --git a/packages/decap-cms-widget-relation/src/RelationPreview.js b/packages/decap-cms-widget-relation/src/RelationPreview.js
index c4c5a96356ec..18b3710c67ad 100644
--- a/packages/decap-cms-widget-relation/src/RelationPreview.js
+++ b/packages/decap-cms-widget-relation/src/RelationPreview.js
@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import { WidgetPreviewContainer } from 'decap-cms-ui-default';
 
diff --git a/packages/decap-cms-widget-richtext/src/RichtextControl/RawEditor.js b/packages/decap-cms-widget-richtext/src/RichtextControl/RawEditor.js
index 336c75403cc4..913d2ef7d16c 100644
--- a/packages/decap-cms-widget-richtext/src/RichtextControl/RawEditor.js
+++ b/packages/decap-cms-widget-richtext/src/RichtextControl/RawEditor.js
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { css, ClassNames } from '@emotion/react';
diff --git a/packages/decap-cms-widget-richtext/src/RichtextControl/VisualEditor.js b/packages/decap-cms-widget-richtext/src/RichtextControl/VisualEditor.js
index f19def1031a1..78e13d983f8d 100644
--- a/packages/decap-cms-widget-richtext/src/RichtextControl/VisualEditor.js
+++ b/packages/decap-cms-widget-richtext/src/RichtextControl/VisualEditor.js
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { KEYS } from 'platejs';
 import { usePlateEditor, Plate, ParagraphPlugin, PlateLeaf } from 'platejs/react';
 import {
diff --git a/packages/decap-cms-widget-richtext/src/RichtextControl/components/Editor.js b/packages/decap-cms-widget-richtext/src/RichtextControl/components/Editor.js
index c729ce43229f..8ed4e73b943b 100644
--- a/packages/decap-cms-widget-richtext/src/RichtextControl/components/Editor.js
+++ b/packages/decap-cms-widget-richtext/src/RichtextControl/components/Editor.js
@@ -1,4 +1,3 @@
-import React from 'react';
 import { PlateContent } from 'platejs/react';
 import { ClassNames } from '@emotion/react';
 
diff --git a/packages/decap-cms-widget-richtext/src/RichtextControl/components/Element/BlockquoteElement.js b/packages/decap-cms-widget-richtext/src/RichtextControl/components/Element/BlockquoteElement.js
index c99ce7aa14f0..ee6ee85c71e3 100644
--- a/packages/decap-cms-widget-richtext/src/RichtextControl/components/Element/BlockquoteElement.js
+++ b/packages/decap-cms-widget-richtext/src/RichtextControl/components/Element/BlockquoteElement.js
@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from '@emotion/styled';
 import { colors } from 'decap-cms-ui-default';
 import { PlateElement } from 'platejs/react';
diff --git a/packages/decap-cms-widget-richtext/src/RichtextControl/components/Element/BreakElement.js b/packages/decap-cms-widget-richtext/src/RichtextControl/components/Element/BreakElement.js
index 17c7ee1319b6..38ee1159b85d 100644
--- a/packages/decap-cms-widget-richtext/src/RichtextControl/components/Element/BreakElement.js
+++ b/packages/decap-cms-widget-richtext/src/RichtextControl/components/Element/BreakElement.js
@@ -1,4 +1,3 @@
-import React from 'react';
 import { PlateElement } from 'platejs/react';
 
 function BreakElement(props) {
diff --git a/packages/decap-cms-widget-richtext/src/RichtextControl/components/Element/HeadingElement.js b/packages/decap-cms-widget-richtext/src/RichtextControl/components/Element/HeadingElement.js
index 8c4e025bd938..26b23fb0561e 100644
--- a/packages/decap-cms-widget-richtext/src/RichtextControl/components/Element/HeadingElement.js
+++ b/packages/decap-cms-widget-richtext/src/RichtextControl/components/Element/HeadingElement.js
@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from '@emotion/styled';
 
 const headingVariants = {
diff --git a/packages/decap-cms-widget-richtext/src/RichtextControl/components/Element/ImageElement.js b/packages/decap-cms-widget-richtext/src/RichtextControl/components/Element/ImageElement.js
index 0236dff2844e..f5a925c0bd40 100644
--- a/packages/decap-cms-widget-richtext/src/RichtextControl/components/Element/ImageElement.js
+++ b/packages/decap-cms-widget-richtext/src/RichtextControl/components/Element/ImageElement.js
@@ -1,4 +1,3 @@
-import React from 'react';
 import { PlateElement } from 'platejs/react';
 
 function isAbsoluteAssetUrl(url) {
diff --git a/packages/decap-cms-widget-richtext/src/RichtextControl/components/Element/LinkElement.js b/packages/decap-cms-widget-richtext/src/RichtextControl/components/Element/LinkElement.js
index 1257b915f0a4..6c452c735eff 100644
--- a/packages/decap-cms-widget-richtext/src/RichtextControl/components/Element/LinkElement.js
+++ b/packages/decap-cms-widget-richtext/src/RichtextControl/components/Element/LinkElement.js
@@ -1,4 +1,3 @@
-import React from 'react';
 import { PlateElement } from 'platejs/react';
 import { useLink } from '@platejs/link/react';
 
diff --git a/packages/decap-cms-widget-richtext/src/RichtextControl/components/Element/ListElement.js b/packages/decap-cms-widget-richtext/src/RichtextControl/components/Element/ListElement.js
index acd3e05a6c56..103a93ade294 100644
--- a/packages/decap-cms-widget-richtext/src/RichtextControl/components/Element/ListElement.js
+++ b/packages/decap-cms-widget-richtext/src/RichtextControl/components/Element/ListElement.js
@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from '@emotion/styled';
 import { PlateElement } from 'platejs/react';
 
diff --git a/packages/decap-cms-widget-richtext/src/RichtextControl/components/Element/ShortcodeElement.js b/packages/decap-cms-widget-richtext/src/RichtextControl/components/Element/ShortcodeElement.js
index 1008f43f383b..beda51467d77 100644
--- a/packages/decap-cms-widget-richtext/src/RichtextControl/components/Element/ShortcodeElement.js
+++ b/packages/decap-cms-widget-richtext/src/RichtextControl/components/Element/ShortcodeElement.js
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import styled from '@emotion/styled';
 import { fromJS } from 'immutable';
 import { omit } from 'lodash';
diff --git a/packages/decap-cms-widget-richtext/src/RichtextControl/components/Element/TableCellElement.js b/packages/decap-cms-widget-richtext/src/RichtextControl/components/Element/TableCellElement.js
index ee98decc5231..e9bbe60fe612 100644
--- a/packages/decap-cms-widget-richtext/src/RichtextControl/components/Element/TableCellElement.js
+++ b/packages/decap-cms-widget-richtext/src/RichtextControl/components/Element/TableCellElement.js
@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from '@emotion/styled';
 
 const StyledTd = styled.td`
diff --git a/packages/decap-cms-widget-richtext/src/RichtextControl/components/Element/TableElement.js b/packages/decap-cms-widget-richtext/src/RichtextControl/components/Element/TableElement.js
index 9654e6a46238..50d64b85612e 100644
--- a/packages/decap-cms-widget-richtext/src/RichtextControl/components/Element/TableElement.js
+++ b/packages/decap-cms-widget-richtext/src/RichtextControl/components/Element/TableElement.js
@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from '@emotion/styled';
 
 const StyledTable = styled.table`
diff --git a/packages/decap-cms-widget-richtext/src/RichtextControl/components/Element/TableRowElement.js b/packages/decap-cms-widget-richtext/src/RichtextControl/components/Element/TableRowElement.js
index bdc3d65b6a4c..b75e54fc3a30 100644
--- a/packages/decap-cms-widget-richtext/src/RichtextControl/components/Element/TableRowElement.js
+++ b/packages/decap-cms-widget-richtext/src/RichtextControl/components/Element/TableRowElement.js
@@ -1,5 +1,3 @@
-import React from 'react';
-
 function TableRowElement({ children, attributes, nodeProps }) {
   return (
     <tr {...attributes} {...nodeProps}>
diff --git a/packages/decap-cms-widget-richtext/src/RichtextControl/components/Leaf/CodeLeaf.js b/packages/decap-cms-widget-richtext/src/RichtextControl/components/Leaf/CodeLeaf.js
index 66fd0033e93c..60ce96e4aae5 100644
--- a/packages/decap-cms-widget-richtext/src/RichtextControl/components/Leaf/CodeLeaf.js
+++ b/packages/decap-cms-widget-richtext/src/RichtextControl/components/Leaf/CodeLeaf.js
@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from '@emotion/styled';
 import { colors, lengths } from 'decap-cms-ui-default';
 
diff --git a/packages/decap-cms-widget-richtext/src/RichtextControl/components/Toolbar/BlockquoteToolbarButton.js b/packages/decap-cms-widget-richtext/src/RichtextControl/components/Toolbar/BlockquoteToolbarButton.js
index ac70ac191f99..876aaf71133c 100644
--- a/packages/decap-cms-widget-richtext/src/RichtextControl/components/Toolbar/BlockquoteToolbarButton.js
+++ b/packages/decap-cms-widget-richtext/src/RichtextControl/components/Toolbar/BlockquoteToolbarButton.js
@@ -1,4 +1,3 @@
-import React from 'react';
 import { useEditorRef, useEditorSelector } from 'platejs/react';
 import { BlockquotePlugin } from '@platejs/basic-nodes/react';
 import { unwrapList } from '@platejs/list-classic';
diff --git a/packages/decap-cms-widget-richtext/src/RichtextControl/components/Toolbar/EditorComponentsToolbarButton.js b/packages/decap-cms-widget-richtext/src/RichtextControl/components/Toolbar/EditorComponentsToolbarButton.js
index c2c4d7c68dd4..afa9185c322a 100644
--- a/packages/decap-cms-widget-richtext/src/RichtextControl/components/Toolbar/EditorComponentsToolbarButton.js
+++ b/packages/decap-cms-widget-richtext/src/RichtextControl/components/Toolbar/EditorComponentsToolbarButton.js
@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import { Dropdown, DropdownButton, DropdownItem } from 'decap-cms-ui-default';
diff --git a/packages/decap-cms-widget-richtext/src/RichtextControl/components/Toolbar/HeadingToolbarButton.js b/packages/decap-cms-widget-richtext/src/RichtextControl/components/Toolbar/HeadingToolbarButton.js
index 8e4141f679f7..0668761bd2a4 100644
--- a/packages/decap-cms-widget-richtext/src/RichtextControl/components/Toolbar/HeadingToolbarButton.js
+++ b/packages/decap-cms-widget-richtext/src/RichtextControl/components/Toolbar/HeadingToolbarButton.js
@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import { unwrapList } from '@platejs/list-classic';
diff --git a/packages/decap-cms-widget-richtext/src/RichtextControl/components/Toolbar/LinkToolbarButton.js b/packages/decap-cms-widget-richtext/src/RichtextControl/components/Toolbar/LinkToolbarButton.js
index 000c605a38bc..ee0fb5245b83 100644
--- a/packages/decap-cms-widget-richtext/src/RichtextControl/components/Toolbar/LinkToolbarButton.js
+++ b/packages/decap-cms-widget-richtext/src/RichtextControl/components/Toolbar/LinkToolbarButton.js
@@ -1,4 +1,3 @@
-import React from 'react';
 import { useEditorRef } from 'platejs/react';
 import { useLinkToolbarButton, useLinkToolbarButtonState } from '@platejs/link/react';
 
diff --git a/packages/decap-cms-widget-richtext/src/RichtextControl/components/Toolbar/ListToolbarButton.js b/packages/decap-cms-widget-richtext/src/RichtextControl/components/Toolbar/ListToolbarButton.js
index 730c7918f446..027c6273bb6e 100644
--- a/packages/decap-cms-widget-richtext/src/RichtextControl/components/Toolbar/ListToolbarButton.js
+++ b/packages/decap-cms-widget-richtext/src/RichtextControl/components/Toolbar/ListToolbarButton.js
@@ -1,4 +1,3 @@
-import React from 'react';
 import { useListToolbarButton, useListToolbarButtonState } from '@platejs/list-classic/react';
 
 import ToolbarButton from './ToolbarButton';
diff --git a/packages/decap-cms-widget-richtext/src/RichtextControl/components/Toolbar/MarkToolbarButton.js b/packages/decap-cms-widget-richtext/src/RichtextControl/components/Toolbar/MarkToolbarButton.js
index f594ce99630f..0c69aaef366c 100644
--- a/packages/decap-cms-widget-richtext/src/RichtextControl/components/Toolbar/MarkToolbarButton.js
+++ b/packages/decap-cms-widget-richtext/src/RichtextControl/components/Toolbar/MarkToolbarButton.js
@@ -1,4 +1,3 @@
-import React from 'react';
 import { useMarkToolbarButton, useMarkToolbarButtonState } from 'platejs/react';
 
 import ToolbarButton from './ToolbarButton';
diff --git a/packages/decap-cms-widget-richtext/src/RichtextControl/components/Toolbar/Toolbar.js b/packages/decap-cms-widget-richtext/src/RichtextControl/components/Toolbar/Toolbar.js
index 7ac7f596358b..00bb26bffd75 100644
--- a/packages/decap-cms-widget-richtext/src/RichtextControl/components/Toolbar/Toolbar.js
+++ b/packages/decap-cms-widget-richtext/src/RichtextControl/components/Toolbar/Toolbar.js
@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import { List } from 'immutable';
diff --git a/packages/decap-cms-widget-richtext/src/RichtextControl/components/Toolbar/ToolbarButton.js b/packages/decap-cms-widget-richtext/src/RichtextControl/components/Toolbar/ToolbarButton.js
index 8db168b01ed2..1aaa1628af0f 100644
--- a/packages/decap-cms-widget-richtext/src/RichtextControl/components/Toolbar/ToolbarButton.js
+++ b/packages/decap-cms-widget-richtext/src/RichtextControl/components/Toolbar/ToolbarButton.js
@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import { Icon, buttons } from 'decap-cms-ui-default';
diff --git a/packages/decap-cms-widget-richtext/src/RichtextControl/editorContext.js b/packages/decap-cms-widget-richtext/src/RichtextControl/editorContext.js
index 6ceb6806efbf..d5e9d1c2b436 100644
--- a/packages/decap-cms-widget-richtext/src/RichtextControl/editorContext.js
+++ b/packages/decap-cms-widget-richtext/src/RichtextControl/editorContext.js
@@ -1,4 +1,4 @@
-import React, { createContext, useContext } from 'react';
+import { createContext, useContext } from 'react';
 
 const EditorContext = createContext(null);
 
diff --git a/packages/decap-cms-widget-richtext/src/RichtextPreview.js b/packages/decap-cms-widget-richtext/src/RichtextPreview.js
index 749278216f1d..5b2622fd548e 100644
--- a/packages/decap-cms-widget-richtext/src/RichtextPreview.js
+++ b/packages/decap-cms-widget-richtext/src/RichtextPreview.js
@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import { WidgetPreviewContainer } from 'decap-cms-ui-default';
 import ImmutablePropTypes from 'react-immutable-proptypes';
diff --git a/packages/decap-cms-widget-richtext/src/__tests__/renderer.spec.js b/packages/decap-cms-widget-richtext/src/__tests__/renderer.spec.js
index 2de193e8a07b..b3829077c466 100644
--- a/packages/decap-cms-widget-richtext/src/__tests__/renderer.spec.js
+++ b/packages/decap-cms-widget-richtext/src/__tests__/renderer.spec.js
@@ -1,4 +1,3 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 import padStart from 'lodash/padStart';
 import { Map } from 'immutable';
diff --git a/packages/decap-cms-widget-richtext/src/serializers/__tests__/slate.spec.js b/packages/decap-cms-widget-richtext/src/serializers/__tests__/slate.spec.js
index 1b9d00e83d03..844513dd8d9b 100644
--- a/packages/decap-cms-widget-richtext/src/serializers/__tests__/slate.spec.js
+++ b/packages/decap-cms-widget-richtext/src/serializers/__tests__/slate.spec.js
@@ -1,7 +1,9 @@
+/** @jsxRuntime classic */
 /** @jsx h */
 
 import flow from 'lodash/flow';
 
+// eslint-disable-next-line no-unused-vars
 import h from '../../../test-helpers/h';
 import { markdownToSlate, slateToMarkdown } from '../index';
 
diff --git a/packages/decap-cms-widget-select/package.json b/packages/decap-cms-widget-select/package.json
index a22dd9293ee7..214d95ba10a5 100644
--- a/packages/decap-cms-widget-select/package.json
+++ b/packages/decap-cms-widget-select/package.json
@@ -22,6 +22,7 @@
     "build:esm": "cross-env NODE_ENV=esm babel src --out-dir dist/esm --ignore \"**/__tests__\" --root-mode upward"
   },
   "peerDependencies": {
+    "@emotion/react": "^11.11.1",
     "decap-cms-lib-widgets": "^3.0.0",
     "decap-cms-ui-default": "^3.0.0",
     "immutable": "^3.7.6",
diff --git a/packages/decap-cms-widget-select/src/SelectPreview.js b/packages/decap-cms-widget-select/src/SelectPreview.js
index ea20f7b5eb1d..34d38f50a771 100644
--- a/packages/decap-cms-widget-select/src/SelectPreview.js
+++ b/packages/decap-cms-widget-select/src/SelectPreview.js
@@ -1,5 +1,4 @@
 import PropTypes from 'prop-types';
-import React from 'react';
 import { List } from 'immutable';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { WidgetPreviewContainer } from 'decap-cms-ui-default';
diff --git a/packages/decap-cms-widget-string/package.json b/packages/decap-cms-widget-string/package.json
index f47f3a3cc5c2..6d3a63b06498 100644
--- a/packages/decap-cms-widget-string/package.json
+++ b/packages/decap-cms-widget-string/package.json
@@ -20,6 +20,7 @@
     "build:esm": "cross-env NODE_ENV=esm babel src --out-dir dist/esm --ignore \"**/__tests__\" --root-mode upward"
   },
   "peerDependencies": {
+    "@emotion/react": "^11.11.1",
     "decap-cms-ui-default": "^3.0.0",
     "prop-types": "^15.7.2",
     "react": "^19.1.0"
diff --git a/packages/decap-cms-widget-string/src/StringPreview.js b/packages/decap-cms-widget-string/src/StringPreview.js
index f475c0ab2aff..5f3c94516cbd 100644
--- a/packages/decap-cms-widget-string/src/StringPreview.js
+++ b/packages/decap-cms-widget-string/src/StringPreview.js
@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import { WidgetPreviewContainer } from 'decap-cms-ui-default';
 
diff --git a/packages/decap-cms-widget-text/package.json b/packages/decap-cms-widget-text/package.json
index d589ec955f46..d6711ce5d57c 100644
--- a/packages/decap-cms-widget-text/package.json
+++ b/packages/decap-cms-widget-text/package.json
@@ -26,6 +26,7 @@
     "react-textarea-autosize": "^8.0.0"
   },
   "peerDependencies": {
+    "@emotion/react": "^11.11.1",
     "decap-cms-ui-default": "^3.0.0",
     "prop-types": "^15.7.2",
     "react": "^19.1.0"
diff --git a/packages/decap-cms-widget-text/src/TextPreview.js b/packages/decap-cms-widget-text/src/TextPreview.js
index 8ce1bf1ffd5c..3e0cd8e8be18 100644
--- a/packages/decap-cms-widget-text/src/TextPreview.js
+++ b/packages/decap-cms-widget-text/src/TextPreview.js
@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import { WidgetPreviewContainer } from 'decap-cms-ui-default';
 
diff --git a/tsconfig.json b/tsconfig.json
index f953092fe550..e927bf2a0937 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,7 +1,8 @@
 {
   "compilerOptions": {
     "declaration": true,
-    "jsx": "react",
+    "jsx": "react-jsx",
+    "jsxImportSource": "@emotion/react",
     "target": "esnext",
     "module": "nodenext",
     "moduleResolution": "nodenext",
@@ -21,7 +22,7 @@
       "decap-cms-backend-gitlab": ["packages/decap-cms-backend-gitlab/src"],
       "decap-cms-lib-util": ["packages/decap-cms-lib-util/src"],
       "decap-cms-lib-widgets": ["packages/decap-cms-lib-widgets/src"],
-      "decap-cms-ui-default": ["packages/decap-cms-ui-default/src"],
+      "decap-cms-ui-default": ["packages/decap-cms-ui-default/src"]
     }
   },
   "include": ["**/src/**/*"],