@contentful/field-editor-rich-text 4.20.14 → 5.0.0

package/dist/cjs/plugins/List/components/ListItem.js

@@ -10,7 +10,7 @@ Object.defineProperty(exports, "ListItem", {
 });
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _f36tokens = /*#__PURE__*/ _interop_require_default(require("@contentful/f36-tokens"));
-const _emotion = require("emotion");
+const _css = require("@emotion/css");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -57,7 +57,7 @@ function _interop_require_wildcard(obj, nodeInterop) {
     }
     return newObj;
 }
-const style = (0, _emotion.css)`
+const style = (0, _css.css)`
   margin: 0;
   list-style: inherit;
   margin-top: ${_f36tokens.default.spacingXs};

package/dist/cjs/plugins/Marks/Bold.js

@@ -22,8 +22,8 @@ _export(exports, {
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _f36icons = require("@contentful/f36-icons");
 const _richtexttypes = require("@contentful/rich-text-types");
+const _css = require("@emotion/css");
 const _platebasicmarks = require("@udecode/plate-basic-marks");
-const _emotion = require("emotion");
 const _queries = require("../../internal/queries");
 const _MarkToolbarButton = require("./components/MarkToolbarButton");
 const _helpers = require("./helpers");
@@ -74,7 +74,7 @@ const ToolbarBoldButton = (0, _MarkToolbarButton.createMarkToolbarButton)({
     icon: /*#__PURE__*/ _react.createElement(_f36icons.TextBIcon, null)
 });
 const styles = {
-    bold: (0, _emotion.css)({
+    bold: (0, _css.css)({
         fontWeight: 600
     })
 };

package/dist/cjs/plugins/Marks/Code.js

@@ -25,8 +25,8 @@ _export(exports, {
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _f36icons = require("@contentful/f36-icons");
 const _richtexttypes = require("@contentful/rich-text-types");
+const _css = require("@emotion/css");
 const _platebasicmarks = require("@udecode/plate-basic-marks");
-const _emotion = require("emotion");
 const _MarkToolbarButton = require("./components/MarkToolbarButton");
 const _helpers = require("./helpers");
 function _getRequireWildcardCache(nodeInterop) {
@@ -80,7 +80,7 @@ const ToolbarDropdownCodeButton = (0, _MarkToolbarButton.createMarkToolbarButton
     mark: _richtexttypes.MARKS.CODE
 });
 const styles = {
-    code: (0, _emotion.css)({
+    code: (0, _css.css)({
         fontFamily: 'monospace',
         fontSize: '.9em'
     })

package/dist/cjs/plugins/Marks/Italic.js

@@ -22,8 +22,8 @@ _export(exports, {
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _f36icons = require("@contentful/f36-icons");
 const _richtexttypes = require("@contentful/rich-text-types");
+const _css = require("@emotion/css");
 const _platebasicmarks = require("@udecode/plate-basic-marks");
-const _emotion = require("emotion");
 const _queries = require("../../internal/queries");
 const _MarkToolbarButton = require("./components/MarkToolbarButton");
 const _helpers = require("./helpers");
@@ -74,7 +74,7 @@ const ToolbarItalicButton = (0, _MarkToolbarButton.createMarkToolbarButton)({
     icon: /*#__PURE__*/ _react.createElement(_f36icons.TextItalicIcon, null)
 });
 const styles = {
-    italic: (0, _emotion.css)({
+    italic: (0, _css.css)({
         fontStyle: 'italic'
     })
 };

package/dist/cjs/plugins/Marks/Strikethrough.js

@@ -25,8 +25,8 @@ _export(exports, {
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _f36icons = require("@contentful/f36-icons");
 const _richtexttypes = require("@contentful/rich-text-types");
+const _css = require("@emotion/css");
 const _platebasicmarks = require("@udecode/plate-basic-marks");
-const _emotion = require("emotion");
 const _MarkToolbarButton = require("./components/MarkToolbarButton");
 const _helpers = require("./helpers");
 function _getRequireWildcardCache(nodeInterop) {
@@ -71,7 +71,7 @@ function _interop_require_wildcard(obj, nodeInterop) {
     return newObj;
 }
 const styles = {
-    strikethrough: (0, _emotion.css)({
+    strikethrough: (0, _css.css)({
         textDecoration: 'line-through'
     })
 };

package/dist/cjs/plugins/Marks/Subscript.js

@@ -23,10 +23,11 @@ _export(exports, {
     }
 });
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _f36icon = require("@contentful/f36-icon");
 const _f36icons = require("@contentful/f36-icons");
 const _richtexttypes = require("@contentful/rich-text-types");
+const _css = require("@emotion/css");
 const _platebasicmarks = require("@udecode/plate-basic-marks");
-const _emotion = require("emotion");
 const _MarkToolbarButton = require("./components/MarkToolbarButton");
 const _helpers = require("./helpers");
 function _getRequireWildcardCache(nodeInterop) {
@@ -71,7 +72,7 @@ function _interop_require_wildcard(obj, nodeInterop) {
     return newObj;
 }
 const styles = {
-    subscript: (0, _emotion.css)({
+    subscript: (0, _css.css)({
         verticalAlign: 'sub',
         fontSize: 'smaller'
     })
@@ -79,7 +80,8 @@ const styles = {
 const ToolbarSubscriptButton = (0, _MarkToolbarButton.createMarkToolbarButton)({
     title: 'Subscript',
     mark: _richtexttypes.MARKS.SUBSCRIPT,
-    icon: /*#__PURE__*/ _react.createElement(_f36icons.TextSubscriptIcon, {
+    icon: /*#__PURE__*/ _react.createElement(_f36icon.Icon, {
+        as: _f36icons.TextSubscriptIcon,
         viewBox: "0 0 23 18"
     })
 });

package/dist/cjs/plugins/Marks/Superscript.js

@@ -25,8 +25,8 @@ _export(exports, {
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _f36icons = require("@contentful/f36-icons");
 const _richtexttypes = require("@contentful/rich-text-types");
+const _css = require("@emotion/css");
 const _platebasicmarks = require("@udecode/plate-basic-marks");
-const _emotion = require("emotion");
 const _MarkToolbarButton = require("./components/MarkToolbarButton");
 const _helpers = require("./helpers");
 function _getRequireWildcardCache(nodeInterop) {
@@ -71,7 +71,7 @@ function _interop_require_wildcard(obj, nodeInterop) {
     return newObj;
 }
 const styles = {
-    superscript: (0, _emotion.css)({
+    superscript: (0, _css.css)({
         verticalAlign: 'super',
         fontSize: 'smaller'
     })

package/dist/cjs/plugins/Marks/components/MarkToolbarButton.js

@@ -11,7 +11,7 @@ Object.defineProperty(exports, "createMarkToolbarButton", {
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _f36components = require("@contentful/f36-components");
 const _f36tokens = /*#__PURE__*/ _interop_require_default(require("@contentful/f36-tokens"));
-const _emotion = require("emotion");
+const _css = require("@emotion/css");
 const _ContentfulEditorProvider = require("../../../ContentfulEditorProvider");
 const _editor = require("../../../helpers/editor");
 const _queries = require("../../../internal/queries");
@@ -64,7 +64,7 @@ function _interop_require_wildcard(obj, nodeInterop) {
     return newObj;
 }
 const styles = {
-    isActive: (0, _emotion.css)({
+    isActive: (0, _css.css)({
         backgroundColor: _f36tokens.default.blue100,
         color: _f36tokens.default.blue600
     })
@@ -88,7 +88,7 @@ const createMarkToolbarButton = ({ mark, title, icon })=>{
             return /*#__PURE__*/ _react.createElement(_f36components.Menu.Item, {
                 onClick: handleClick,
                 disabled: isDisabled,
-                className: (0, _emotion.cx)({
+                className: (0, _css.cx)({
                     [styles.isActive]: (0, _queries.isMarkActive)(editor, mark)
                 }),
                 testId: `${mark}-toolbar-button`

package/dist/cjs/plugins/Paragraph/Paragraph.js

@@ -11,7 +11,7 @@ Object.defineProperty(exports, "Paragraph", {
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _f36tokens = /*#__PURE__*/ _interop_require_default(require("@contentful/f36-tokens"));
 const _richtexttypes = require("@contentful/rich-text-types");
-const _emotion = require("emotion");
+const _css = require("@emotion/css");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -59,7 +59,7 @@ function _interop_require_wildcard(obj, nodeInterop) {
     return newObj;
 }
 const styles = {
-    [_richtexttypes.BLOCKS.PARAGRAPH]: (0, _emotion.css)`
+    [_richtexttypes.BLOCKS.PARAGRAPH]: (0, _css.css)`
     line-height: ${_f36tokens.default.lineHeightDefault};
     margin-bottom: 1.5em;
     direction: inherit;

package/dist/cjs/plugins/Quote/components/Quote.js

@@ -10,7 +10,7 @@ Object.defineProperty(exports, "Quote", {
 });
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _f36tokens = /*#__PURE__*/ _interop_require_default(require("@contentful/f36-tokens"));
-const _emotion = require("emotion");
+const _css = require("@emotion/css");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -57,7 +57,7 @@ function _interop_require_wildcard(obj, nodeInterop) {
     }
     return newObj;
 }
-const style = (0, _emotion.css)({
+const style = (0, _css.css)({
     margin: '0 0 1.3125rem',
     borderLeft: `6px solid ${_f36tokens.default.gray200}`,
     paddingLeft: '0.875rem',

package/dist/cjs/plugins/Table/components/Cell.js

@@ -10,7 +10,7 @@ Object.defineProperty(exports, "Cell", {
 });
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _f36tokens = /*#__PURE__*/ _interop_require_default(require("@contentful/f36-tokens"));
-const _emotion = require("emotion");
+const _css = require("@emotion/css");
 const _slatereact = require("slate-react");
 const _TableActions = require("./TableActions");
 function _interop_require_default(obj) {
@@ -59,7 +59,7 @@ function _interop_require_wildcard(obj, nodeInterop) {
     }
     return newObj;
 }
-const style = (0, _emotion.css)`
+const style = (0, _css.css)`
   border: 1px solid ${_f36tokens.default.gray400};
   border-collapse: collapse;
   padding: 10px 12px;

package/dist/cjs/plugins/Table/components/HeaderCell.js

@@ -10,7 +10,7 @@ Object.defineProperty(exports, "HeaderCell", {
 });
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _f36tokens = /*#__PURE__*/ _interop_require_default(require("@contentful/f36-tokens"));
-const _emotion = require("emotion");
+const _css = require("@emotion/css");
 const _slatereact = require("slate-react");
 const _TableActions = require("./TableActions");
 function _interop_require_default(obj) {
@@ -59,7 +59,7 @@ function _interop_require_wildcard(obj, nodeInterop) {
     }
     return newObj;
 }
-const style = (0, _emotion.css)`
+const style = (0, _css.css)`
   background-clip: padding-box;
   background-color: ${_f36tokens.default.gray200};
   border: 1px solid ${_f36tokens.default.gray400};

package/dist/cjs/plugins/Table/components/Row.js

@@ -10,7 +10,7 @@ Object.defineProperty(exports, "Row", {
 });
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _f36tokens = /*#__PURE__*/ _interop_require_default(require("@contentful/f36-tokens"));
-const _emotion = require("emotion");
+const _css = require("@emotion/css");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -57,7 +57,7 @@ function _interop_require_wildcard(obj, nodeInterop) {
     }
     return newObj;
 }
-const style = (0, _emotion.css)`
+const style = (0, _css.css)`
   border: 1px solid ${_f36tokens.default.gray400};
   border-collapse: collapse;
 

package/dist/cjs/plugins/Table/components/Table.js

@@ -11,7 +11,7 @@ Object.defineProperty(exports, "Table", {
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _f36tokens = /*#__PURE__*/ _interop_require_default(require("@contentful/f36-tokens"));
 const _richtexttypes = require("@contentful/rich-text-types");
-const _emotion = require("emotion");
+const _css = require("@emotion/css");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -58,7 +58,7 @@ function _interop_require_wildcard(obj, nodeInterop) {
     }
     return newObj;
 }
-const style = (0, _emotion.css)`
+const style = (0, _css.css)`
   margin-bottom: 1.5em;
   border-collapse: collapse;
   border-radius: 5px;

package/dist/cjs/plugins/Table/components/TableActions.js

@@ -20,8 +20,8 @@ const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _f36components = require("@contentful/f36-components");
 const _f36icons = require("@contentful/f36-icons");
 const _richtexttypes = require("@contentful/rich-text-types");
+const _css = require("@emotion/css");
 const _platetable = require("@udecode/plate-table");
-const _emotion = require("emotion");
 const _ContentfulEditorProvider = require("../../../ContentfulEditorProvider");
 const _editor = require("../../../helpers/editor");
 const _internal = require("../../../internal");
@@ -71,7 +71,7 @@ function _interop_require_wildcard(obj, nodeInterop) {
     return newObj;
 }
 const styles = {
-    topRight: (0, _emotion.css)({
+    topRight: (0, _css.css)({
         position: 'absolute',
         insetBlockStart: '6px',
         insetInlineEnd: '5px'

package/dist/cjs/plugins/shared/EmbeddedBlockToolbarIcon.js

@@ -21,7 +21,7 @@ const _f36components = require("@contentful/f36-components");
 const _f36icons = require("@contentful/f36-icons");
 const _f36tokens = /*#__PURE__*/ _interop_require_default(require("@contentful/f36-tokens"));
 const _richtexttypes = require("@contentful/rich-text-types");
-const _emotion = require("emotion");
+const _css = require("@emotion/css");
 const _ContentfulEditorProvider = require("../../ContentfulEditorProvider");
 const _SdkProvider = require("../../SdkProvider");
 const _EmbeddedBlockUtil = require("../shared/EmbeddedBlockUtil");
@@ -73,7 +73,7 @@ function _interop_require_wildcard(obj, nodeInterop) {
     return newObj;
 }
 const styles = {
-    icon: (0, _emotion.css)({
+    icon: (0, _css.css)({
         marginRight: '10px'
     })
 };

package/dist/cjs/plugins/shared/EmbeddedInlineToolbarIcon.js

@@ -13,7 +13,7 @@ const _f36components = require("@contentful/f36-components");
 const _f36icons = require("@contentful/f36-icons");
 const _f36tokens = /*#__PURE__*/ _interop_require_default(require("@contentful/f36-tokens"));
 const _richtexttypes = require("@contentful/rich-text-types");
-const _emotion = require("emotion");
+const _css = require("@emotion/css");
 const _ContentfulEditorProvider = require("../../ContentfulEditorProvider");
 const _editor = require("../../helpers/editor");
 const _SdkProvider = require("../../SdkProvider");
@@ -66,10 +66,10 @@ function _interop_require_wildcard(obj, nodeInterop) {
     return newObj;
 }
 const styles = {
-    icon: (0, _emotion.css)({
+    icon: (0, _css.css)({
         marginRight: '10px'
     }),
-    root: (0, _emotion.css)({
+    root: (0, _css.css)({
         display: 'inline-block',
         margin: `0 ${_f36tokens.default.spacing2Xs}`,
         fontSize: 'inherit',

package/dist/cjs/plugins/shared/LinkedBlockWrapper.js

@@ -9,7 +9,7 @@ Object.defineProperty(exports, "LinkedBlockWrapper", {
     }
 });
 const _react = /*#__PURE__*/ _interop_require_default(require("react"));
-const _emotion = require("emotion");
+const _css = require("@emotion/css");
 const _environment = require("../../helpers/environment");
 const _utils = require("./utils");
 function _interop_require_default(obj) {
@@ -18,11 +18,11 @@ function _interop_require_default(obj) {
     };
 }
 const styles = {
-    root: (0, _emotion.css)({
+    root: (0, _css.css)({
         marginBottom: '1.25rem !important',
         display: 'block'
     }),
-    container: (0, _emotion.css)({
+    container: (0, _css.css)({
         display: 'inline-block',
         verticalAlign: 'text-top',
         width: '100%'

package/dist/cjs/plugins/shared/LinkedInlineWrapper.js

@@ -10,7 +10,7 @@ Object.defineProperty(exports, "LinkedInlineWrapper", {
 });
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _f36tokens = /*#__PURE__*/ _interop_require_default(require("@contentful/f36-tokens"));
-const _emotion = require("emotion");
+const _css = require("@emotion/css");
 const _environment = require("../../helpers/environment");
 const _utils = require("./utils");
 function _interop_require_default(obj) {
@@ -60,10 +60,10 @@ function _interop_require_wildcard(obj, nodeInterop) {
     return newObj;
 }
 const styles = {
-    icon: (0, _emotion.css)({
+    icon: (0, _css.css)({
         marginRight: '10px'
     }),
-    root: (0, _emotion.css)({
+    root: (0, _css.css)({
         display: 'inline-block',
         margin: `0 ${_f36tokens.default.spacing2Xs}`,
         fontSize: 'inherit',

package/dist/cjs/plugins/shared/ToolbarButton.js

@@ -11,7 +11,7 @@ Object.defineProperty(exports, "ToolbarButton", {
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _f36components = require("@contentful/f36-components");
 const _f36tokens = /*#__PURE__*/ _interop_require_default(require("@contentful/f36-tokens"));
-const _emotion = require("emotion");
+const _css = require("@emotion/css");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -59,37 +59,57 @@ function _interop_require_wildcard(obj, nodeInterop) {
     return newObj;
 }
 const styles = {
-    button: (0, _emotion.css)({
+    button: (0, _css.css)({
         height: '30px',
         width: '30px',
         marginLeft: _f36tokens.default.spacing2Xs,
         marginRight: _f36tokens.default.spacing2Xs
     }),
-    tooltip: (0, _emotion.css)({
-        zIndex: Number(_f36tokens.default.zIndexTooltip)
+    tooltip: (0, _css.css)({
+        zIndex: Number(_f36tokens.default.zIndexTooltip),
+        pointerEvents: 'none'
     })
 };
 function ToolbarButton(props) {
     const { title, testId, isActive, children, className, isDisabled = false } = props;
-    const handleClick = (event)=>{
+    const pointerTriggeredRef = _react.useRef(false);
+    const handlePointerDown = _react.useCallback((event)=>{
+        if (isDisabled || event.button !== 0) {
+            return;
+        }
         event.preventDefault();
+        pointerTriggeredRef.current = true;
         props.onClick();
-    };
-    const button = /*#__PURE__*/ _react.createElement(_f36components.Button, {
-        className: (0, _emotion.cx)(styles.button, className),
+    }, [
+        isDisabled,
+        props
+    ]);
+    const handleClick = _react.useCallback((event)=>{
+        if (pointerTriggeredRef.current) {
+            pointerTriggeredRef.current = false;
+            return;
+        }
+        event.preventDefault();
+        props.onClick();
+    }, [
+        props
+    ]);
+    return /*#__PURE__*/ _react.createElement(_f36components.IconButton, {
+        className: (0, _css.cx)(styles.button, className),
         isDisabled: isDisabled,
-        startIcon: children,
+        onMouseDown: handlePointerDown,
         onClick: handleClick,
         testId: testId,
         variant: isActive ? 'secondary' : 'transparent',
-        size: "small"
-    });
-    if (title) {
-        return /*#__PURE__*/ _react.createElement(_f36components.Tooltip, {
+        size: "small",
+        icon: children,
+        "aria-label": title,
+        withTooltip: !!title,
+        tooltipProps: {
             className: styles.tooltip,
-            placement: "bottom",
+            usePortal: true,
+            placement: 'bottom',
             content: title
-        }, button);
-    }
-    return button;
+        }
+    });
 }

package/dist/esm/CharConstraints.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import tokens from '@contentful/f36-tokens';
 import { CharValidation, ConstraintsUtils } from '@contentful/field-editor-shared';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { usePlateEditorState } from './internal/hooks';
 import { useSdkContext } from './SdkProvider';
 const styles = {

package/dist/esm/RichTextEditor.js

@@ -2,8 +2,8 @@ import * as React from 'react';
 import { EntityProvider } from '@contentful/field-editor-reference';
 import { FieldConnector } from '@contentful/field-editor-shared';
 import * as Contentful from '@contentful/rich-text-types';
+import { css, cx } from '@emotion/css';
 import { PlateContent, Plate } from '@udecode/plate-common';
-import { css, cx } from 'emotion';
 import deepEquals from 'fast-deep-equal';
 import noop from 'lodash/noop';
 import { useDeepCompareMemo } from 'use-deep-compare';

package/dist/esm/RichTextEditor.styles.js

@@ -1,5 +1,5 @@
 import tokens from '@contentful/f36-tokens';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 const STYLE_EDITOR_BORDER = `1px solid ${tokens.gray400}`;
 export const styles = {
     root: css({

package/dist/esm/Toolbar/components/StickyToolbarWrapper.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 const styles = {
     nativeSticky: (offset)=>css`
     position: -webkit-sticky;

package/dist/esm/Toolbar/index.js

@@ -3,7 +3,7 @@ import { Flex, IconButton, Menu } from '@contentful/f36-components';
 import { DotsThreeIcon } from '@contentful/f36-icons';
 import tokens from '@contentful/f36-tokens';
 import { BLOCKS, INLINES, MARKS } from '@contentful/rich-text-types';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { useContentfulEditor } from '../ContentfulEditorProvider';
 import { isNodeTypeSelected } from '../helpers/editor';
 import { isMarkEnabled, isNodeTypeEnabled } from '../helpers/validations';

package/dist/esm/dialogs/HypelinkDialog/HyperlinkDialog.js

@@ -15,8 +15,8 @@ import * as React from 'react';
 import { Button, Form, FormControl, FormLabel, ModalContent, ModalControls, Select, TextInput, TextLink } from '@contentful/f36-components';
 import tokens from '@contentful/f36-tokens';
 import { EntityProvider } from '@contentful/field-editor-reference';
+import { css } from '@emotion/css';
 import { i18n as $_i18n } from "@lingui/core";
-import { css } from 'emotion';
 import PropTypes from 'prop-types';
 import { FetchingWrappedAssetCard } from '../../plugins/shared/FetchingWrappedAssetCard';
 import { FetchingWrappedEntryCard } from '../../plugins/shared/FetchingWrappedEntryCard';

package/dist/esm/plugins/CommandPalette/components/CommandList.js

@@ -3,7 +3,7 @@ import { usePopper } from 'react-popper';
 import { Popover, Stack, SectionHeading, ScreenReaderOnly, Flex, AssetIcon } from '@contentful/f36-components';
 import { Portal } from '@contentful/f36-utils';
 import { SharedQueryClientProvider } from '@contentful/field-editor-shared/react-query';
-import { cx } from 'emotion';
+import { cx } from '@emotion/css';
 import { useSdkContext } from '../../../SdkProvider';
 import { useCommandList } from '../hooks/useCommandList';
 import { useCommands } from '../useCommands';
@@ -44,8 +44,6 @@ const Asset = ({ command, selectedItem })=>/*#__PURE__*/ React.createElement("bu
         alt: "",
         className: styles.thumbnail
     }) : /*#__PURE__*/ React.createElement(AssetIcon, {
-        width: "30",
-        height: "30",
         className: styles.thumbnail
     }), /*#__PURE__*/ React.createElement("span", null, command.label)));
 const Item = ({ command, selectedItem })=>/*#__PURE__*/ React.createElement("button", {

package/dist/esm/plugins/CommandPalette/components/CommandList.styles.js

@@ -1,5 +1,5 @@
 import tokens from '@contentful/f36-tokens';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 const styles = {
     container: css({
         position: 'absolute',

package/dist/esm/plugins/CommandPalette/components/CommandPrompt.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import tokens from '@contentful/f36-tokens';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { trimLeadingSlash } from '../utils/trimLeadingSlash';
 import { CommandList } from './CommandList';
 const styles = {

package/dist/esm/plugins/EmbeddedEntityInline/FetchingWrappedInlineEntryCard.js

@@ -6,7 +6,7 @@ import { ScheduledIconWithTooltip, useEntity, useEntityLoader } from '@contentfu
 import { entityHelpers } from '@contentful/field-editor-shared';
 import { SharedQueryClientProvider, useContentType } from '@contentful/field-editor-shared/react-query';
 import { INLINES } from '@contentful/rich-text-types';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 const { getEntryTitle, getEntityStatus } = entityHelpers;
 const styles = {
     scheduledIcon: css({

package/dist/esm/plugins/Heading/components/Heading.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import tokens from '@contentful/f36-tokens';
 import { BLOCKS } from '@contentful/rich-text-types';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 const styles = {
     dropdown: {
         root: css`

package/dist/esm/plugins/Heading/components/ToolbarHeadingButton.js

@@ -3,7 +3,7 @@ import { Menu, Button } from '@contentful/f36-components';
 import { CaretDownIcon } from '@contentful/f36-icons';
 import tokens from '@contentful/f36-tokens';
 import { BLOCKS } from '@contentful/rich-text-types';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { useContentfulEditor } from '../../../ContentfulEditorProvider';
 import { getElementFromCurrentSelection, focus, isBlockSelected, toggleElement } from '../../../helpers/editor';
 import { isNodeTypeEnabled } from '../../../helpers/validations';

package/dist/esm/plugins/Hr/index.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { MinusIcon } from '@contentful/f36-icons';
 import tokens from '@contentful/f36-tokens';
 import { BLOCKS } from '@contentful/rich-text-types';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import * as Slate from 'slate-react';
 import { useContentfulEditor } from '../../ContentfulEditorProvider';
 import { getNodeEntryFromSelection, isBlockSelected, moveToTheNextLine, focus } from '../../helpers/editor';

package/dist/esm/plugins/Hyperlink/HyperlinkModal.js

@@ -4,7 +4,7 @@ import tokens from '@contentful/f36-tokens';
 import { EntityProvider } from '@contentful/field-editor-reference';
 import { ModalDialogLauncher } from '@contentful/field-editor-shared';
 import { INLINES } from '@contentful/rich-text-types';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { focus, getNodeEntryFromSelection, insertLink, LINK_TYPES } from '../../helpers/editor';
 import getAllowedResourcesForNodeType from '../../helpers/getAllowedResourcesForNodeType';
 import getLinkedContentTypeIdsForNodeType from '../../helpers/getLinkedContentTypeIdsForNodeType';

package/dist/esm/plugins/Hyperlink/components/styles.js

@@ -1,5 +1,5 @@
 import tokens from '@contentful/f36-tokens';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 export const styles = {
     hyperlinkWrapper: css({
         display: 'inline',