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

package/dist/cjs/CharConstraints.js

@@ -11,7 +11,7 @@ Object.defineProperty(exports, "CharConstraints", {
 const _react = /*#__PURE__*/ _interop_require_default(require("react"));
 const _f36tokens = /*#__PURE__*/ _interop_require_default(require("@contentful/f36-tokens"));
 const _fieldeditorshared = require("@contentful/field-editor-shared");
-const _emotion = require("emotion");
+const _css = require("@emotion/css");
 const _hooks = require("./internal/hooks");
 const _SdkProvider = require("./SdkProvider");
 function _interop_require_default(obj) {
@@ -20,14 +20,14 @@ function _interop_require_default(obj) {
     };
 }
 const styles = {
-    container: (0, _emotion.css)({
+    container: (0, _css.css)({
         display: 'flex',
         justifyContent: 'space-between',
         fontSize: _f36tokens.default.fontSizeM,
         marginTop: _f36tokens.default.spacingXs,
         color: _f36tokens.default.gray700
     }),
-    counterInvalid: (0, _emotion.css)({
+    counterInvalid: (0, _css.css)({
         color: _f36tokens.default.red600
     })
 };
@@ -39,7 +39,7 @@ function CharCounter({ checkConstraints }) {
     const count = editor.getCharacterCount();
     const valid = checkConstraints(count);
     return /*#__PURE__*/ _react.default.createElement("span", {
-        className: (0, _emotion.cx)({
+        className: (0, _css.cx)({
             [styles.counterInvalid]: !valid
         })
     }, count, " characters");

package/dist/cjs/RichTextEditor.js

@@ -20,8 +20,8 @@ const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _fieldeditorreference = require("@contentful/field-editor-reference");
 const _fieldeditorshared = require("@contentful/field-editor-shared");
 const _richtexttypes = /*#__PURE__*/ _interop_require_wildcard(require("@contentful/rich-text-types"));
+const _css = require("@emotion/css");
 const _platecommon = require("@udecode/plate-common");
-const _emotion = require("emotion");
 const _fastdeepequal = /*#__PURE__*/ _interop_require_default(require("fast-deep-equal"));
 const _noop = /*#__PURE__*/ _interop_require_default(require("lodash/noop"));
 const _usedeepcompare = require("use-deep-compare");
@@ -96,9 +96,9 @@ const ConnectedRichTextEditor = (props)=>{
         props.value
     ]);
     const direction = sdk.locales.direction[sdk.field.locale] ?? 'ltr';
-    const classNames = (0, _emotion.cx)(_RichTextEditorstyles.styles.editor, props.minHeight !== undefined ? (0, _emotion.css)({
+    const classNames = (0, _css.cx)(_RichTextEditorstyles.styles.editor, props.minHeight !== undefined ? (0, _css.css)({
         minHeight: props.minHeight
-    }) : undefined, props.maxHeight !== undefined ? (0, _emotion.css)({
+    }) : undefined, props.maxHeight !== undefined ? (0, _css.css)({
         maxHeight: props.maxHeight
     }) : undefined, props.isDisabled ? _RichTextEditorstyles.styles.disabled : _RichTextEditorstyles.styles.enabled, props.isToolbarHidden && _RichTextEditorstyles.styles.hiddenToolbar, direction === 'rtl' ? _RichTextEditorstyles.styles.rtl : _RichTextEditorstyles.styles.ltr);
     return /*#__PURE__*/ _react.createElement(_fieldeditorreference.EntityProvider, {

package/dist/cjs/RichTextEditor.styles.js

@@ -9,7 +9,7 @@ Object.defineProperty(exports, "styles", {
     }
 });
 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
@@ -17,10 +17,10 @@ function _interop_require_default(obj) {
 }
 const STYLE_EDITOR_BORDER = `1px solid ${_f36tokens.default.gray400}`;
 const styles = {
-    root: (0, _emotion.css)({
+    root: (0, _css.css)({
         position: 'relative'
     }),
-    editor: (0, _emotion.css)({
+    editor: (0, _css.css)({
         borderRadius: `0 0 ${_f36tokens.default.borderRadiusMedium} ${_f36tokens.default.borderRadiusMedium}`,
         border: STYLE_EDITOR_BORDER,
         borderTop: 0,
@@ -46,10 +46,10 @@ const styles = {
             margin: 0
         }
     }),
-    hiddenToolbar: (0, _emotion.css)({
+    hiddenToolbar: (0, _css.css)({
         borderTop: STYLE_EDITOR_BORDER
     }),
-    enabled: (0, _emotion.css)({
+    enabled: (0, _css.css)({
         background: _f36tokens.default.colorWhite,
         a: {
             span: {
@@ -60,14 +60,14 @@ const styles = {
             }
         }
     }),
-    disabled: (0, _emotion.css)({
+    disabled: (0, _css.css)({
         background: _f36tokens.default.gray100,
         cursor: 'not-allowed'
     }),
-    rtl: (0, _emotion.css)({
+    rtl: (0, _css.css)({
         direction: 'rtl'
     }),
-    ltr: (0, _emotion.css)({
+    ltr: (0, _css.css)({
         direction: 'ltr'
     })
 };

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

@@ -9,14 +9,14 @@ Object.defineProperty(exports, "default", {
     }
 });
 const _react = /*#__PURE__*/ _interop_require_default(require("react"));
-const _emotion = require("emotion");
+const _css = require("@emotion/css");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
 }
 const styles = {
-    nativeSticky: (offset)=>(0, _emotion.css)`
+    nativeSticky: (offset)=>(0, _css.css)`
     position: -webkit-sticky;
     position: sticky;
     top: ${offset ? offset : -1}px;

package/dist/cjs/Toolbar/index.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 _validations = require("../helpers/validations");
@@ -82,26 +82,26 @@ function _interop_require_wildcard(obj, nodeInterop) {
     return newObj;
 }
 const styles = {
-    toolbar: (0, _emotion.css)({
+    toolbar: (0, _css.css)({
         border: `1px solid ${_f36tokens.default.gray400}`,
         backgroundColor: _f36tokens.default.gray100,
         padding: _f36tokens.default.spacingXs,
         borderRadius: `${_f36tokens.default.borderRadiusMedium} ${_f36tokens.default.borderRadiusMedium} 0 0`
     }),
-    toolbarBtn: (0, _emotion.css)({
+    toolbarBtn: (0, _css.css)({
         height: '30px',
         width: '30px',
         marginLeft: _f36tokens.default.spacing2Xs,
         marginRight: _f36tokens.default.spacing2Xs
     }),
-    divider: (0, _emotion.css)({
+    divider: (0, _css.css)({
         display: 'inline-block',
         height: '21px',
         width: '1px',
         background: _f36tokens.default.gray300,
         margin: `0 ${_f36tokens.default.spacing2Xs}`
     }),
-    embedActionsWrapper: (0, _emotion.css)({
+    embedActionsWrapper: (0, _css.css)({
         display: [
             '-webkit-box',
             '-ms-flexbox',
@@ -111,7 +111,7 @@ const styles = {
         alignSelf: 'flex-start',
         msFlexItemAlign: 'start'
     }),
-    formattingOptionsWrapper: (0, _emotion.css)({
+    formattingOptionsWrapper: (0, _css.css)({
         display: [
             '-webkit-box',
             '-ms-flexbox',

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

@@ -23,8 +23,8 @@ 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 _fieldeditorreference = require("@contentful/field-editor-reference");
+const _css = require("@emotion/css");
 const _core = require("@lingui/core");
-const _emotion = require("emotion");
 const _proptypes = /*#__PURE__*/ _interop_require_default(require("prop-types"));
 const _FetchingWrappedAssetCard = require("../../plugins/shared/FetchingWrappedAssetCard");
 const _FetchingWrappedEntryCard = require("../../plugins/shared/FetchingWrappedEntryCard");
@@ -247,7 +247,7 @@ class HyperlinkDialog extends (_React_Component = _react.Component) {
             message: "Link target"
         })), !isEntitySelectorVisible && /*#__PURE__*/ _react.createElement(_f36components.TextLink, {
             as: "button",
-            className: (0, _emotion.css)({
+            className: (0, _css.css)({
                 marginLeft: _f36tokens.default.spacingS
             }),
             onClick: resetEntity
@@ -270,7 +270,7 @@ class HyperlinkDialog extends (_React_Component = _react.Component) {
     }
     renderEntitySelector(type) {
         return /*#__PURE__*/ _react.createElement("div", {
-            className: (0, _emotion.css)({
+            className: (0, _css.css)({
                 marginTop: _f36tokens.default.spacingS
             })
         }, type === LINK_TYPES.ENTRY && /*#__PURE__*/ _react.createElement(_f36components.TextLink, {

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

@@ -13,7 +13,7 @@ const _reactpopper = require("react-popper");
 const _f36components = require("@contentful/f36-components");
 const _f36utils = require("@contentful/f36-utils");
 const _reactquery = require("@contentful/field-editor-shared/react-query");
-const _emotion = require("emotion");
+const _css = require("@emotion/css");
 const _SdkProvider = require("../../../SdkProvider");
 const _useCommandList = require("../hooks/useCommandList");
 const _useCommands = require("../useCommands");
@@ -75,7 +75,7 @@ const Group = ({ commandGroup, selectedItem })=>/*#__PURE__*/ _react.createEleme
     }, commandGroup.group), commandGroup.commands.map((command)=>/*#__PURE__*/ _react.createElement("button", {
             key: command.id,
             id: command.id,
-            className: (0, _emotion.cx)(_CommandListstyles.default.menuItem, {
+            className: (0, _css.cx)(_CommandListstyles.default.menuItem, {
                 [_CommandListstyles.default.menuItemSelected]: command.id === selectedItem
             }),
             onClick: command.callback
@@ -86,7 +86,7 @@ const Group = ({ commandGroup, selectedItem })=>/*#__PURE__*/ _react.createEleme
 const Asset = ({ command, selectedItem })=>/*#__PURE__*/ _react.createElement("button", {
         key: command.id,
         id: command.id,
-        className: (0, _emotion.cx)(_CommandListstyles.default.menuItem, {
+        className: (0, _css.cx)(_CommandListstyles.default.menuItem, {
             [_CommandListstyles.default.menuItemSelected]: command.id === selectedItem
         }),
         onClick: command.callback
@@ -100,14 +100,12 @@ const Asset = ({ command, selectedItem })=>/*#__PURE__*/ _react.createElement("b
         alt: "",
         className: _CommandListstyles.default.thumbnail
     }) : /*#__PURE__*/ _react.createElement(_f36components.AssetIcon, {
-        width: "30",
-        height: "30",
         className: _CommandListstyles.default.thumbnail
     }), /*#__PURE__*/ _react.createElement("span", null, command.label)));
 const Item = ({ command, selectedItem })=>/*#__PURE__*/ _react.createElement("button", {
         key: command.id,
         id: command.id,
-        className: (0, _emotion.cx)(_CommandListstyles.default.menuItem, {
+        className: (0, _css.cx)(_CommandListstyles.default.menuItem, {
             [_CommandListstyles.default.menuItemSelected]: command.id === selectedItem
         }),
         onClick: command.callback

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

@@ -9,14 +9,14 @@ Object.defineProperty(exports, "default", {
     }
 });
 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
     };
 }
 const styles = {
-    container: (0, _emotion.css)({
+    container: (0, _css.css)({
         position: 'absolute',
         zIndex: _f36tokens.default.zIndexNotification,
         fontWeight: _f36tokens.default.fontWeightNormal,
@@ -27,18 +27,18 @@ const styles = {
             marginLeft: 0
         }
     }),
-    menuPoper: (0, _emotion.css)({
+    menuPoper: (0, _css.css)({
         zIndex: _f36tokens.default.zIndexModal
     }),
-    menuContent: (0, _emotion.css)({
+    menuContent: (0, _css.css)({
         width: '400px',
         maxHeight: '300px'
     }),
-    menuList: (0, _emotion.css)({
+    menuList: (0, _css.css)({
         overflow: 'auto',
         maxHeight: '200px'
     }),
-    menuItem: (0, _emotion.css)({
+    menuItem: (0, _css.css)({
         display: 'block',
         width: '100%',
         background: 'none',
@@ -66,35 +66,35 @@ const styles = {
             cursor: 'auto'
         }
     }),
-    menuItemSelected: (0, _emotion.css)({
+    menuItemSelected: (0, _css.css)({
         boxShadow: `inset ${_f36tokens.default.glowPrimary}`,
         borderRadius: _f36tokens.default.borderRadiusMedium
     }),
-    menuDivider: (0, _emotion.css)({
+    menuDivider: (0, _css.css)({
         border: 'none',
         width: '100%',
         height: '1px',
         background: _f36tokens.default.gray300,
         margin: `${_f36tokens.default.spacingXs} 0`
     }),
-    menuHeader: (0, _emotion.css)({
+    menuHeader: (0, _css.css)({
         zIndex: _f36tokens.default.zIndexDefault,
         top: 0,
         backgroundColor: _f36tokens.default.gray100,
         padding: _f36tokens.default.spacingM
     }),
-    menuFooter: (0, _emotion.css)({
+    menuFooter: (0, _css.css)({
         position: 'sticky',
         bottom: 0,
         backgroundColor: _f36tokens.default.gray100,
         padding: _f36tokens.default.spacingM
     }),
-    footerList: (0, _emotion.css)({
+    footerList: (0, _css.css)({
         listStyle: 'none',
         color: _f36tokens.default.gray600,
         fontSize: _f36tokens.default.fontSizeM
     }),
-    thumbnail: (0, _emotion.css)({
+    thumbnail: (0, _css.css)({
         width: '30px',
         height: '30px',
         objectFit: 'cover'

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

@@ -10,7 +10,7 @@ Object.defineProperty(exports, "CommandPrompt", {
 });
 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 _trimLeadingSlash = require("../utils/trimLeadingSlash");
 const _CommandList = require("./CommandList");
 function _interop_require_default(obj) {
@@ -60,7 +60,7 @@ function _interop_require_wildcard(obj, nodeInterop) {
     return newObj;
 }
 const styles = {
-    commandPrompt: (0, _emotion.css)({
+    commandPrompt: (0, _css.css)({
         color: _f36tokens.default.blue400
     })
 };

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

@@ -16,7 +16,7 @@ const _fieldeditorreference = require("@contentful/field-editor-reference");
 const _fieldeditorshared = require("@contentful/field-editor-shared");
 const _reactquery = require("@contentful/field-editor-shared/react-query");
 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
@@ -65,7 +65,7 @@ function _interop_require_wildcard(obj, nodeInterop) {
 }
 const { getEntryTitle, getEntityStatus } = _fieldeditorshared.entityHelpers;
 const styles = {
-    scheduledIcon: (0, _emotion.css)({
+    scheduledIcon: (0, _css.css)({
         verticalAlign: 'text-bottom',
         marginRight: _f36tokens.default.spacing2Xs
     })

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

@@ -11,7 +11,7 @@ Object.defineProperty(exports, "HeadingComponents", {
 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
@@ -60,54 +60,54 @@ function _interop_require_wildcard(obj, nodeInterop) {
 }
 const styles = {
     dropdown: {
-        root: (0, _emotion.css)`
+        root: (0, _css.css)`
       font-weight: ${_f36tokens.default.fontWeightDemiBold};
     `,
-        [_richtexttypes.BLOCKS.PARAGRAPH]: (0, _emotion.css)`
+        [_richtexttypes.BLOCKS.PARAGRAPH]: (0, _css.css)`
       font-size: ${_f36tokens.default.fontSizeL};
     `,
-        [_richtexttypes.BLOCKS.HEADING_1]: (0, _emotion.css)`
+        [_richtexttypes.BLOCKS.HEADING_1]: (0, _css.css)`
       font-size: 1.625rem;
     `,
-        [_richtexttypes.BLOCKS.HEADING_2]: (0, _emotion.css)`
+        [_richtexttypes.BLOCKS.HEADING_2]: (0, _css.css)`
       font-size: 1.4375rem;
     `,
-        [_richtexttypes.BLOCKS.HEADING_3]: (0, _emotion.css)`
+        [_richtexttypes.BLOCKS.HEADING_3]: (0, _css.css)`
       font-size: 1.25rem;
     `,
-        [_richtexttypes.BLOCKS.HEADING_4]: (0, _emotion.css)`
+        [_richtexttypes.BLOCKS.HEADING_4]: (0, _css.css)`
       font-size: 1.125rem;
     `,
-        [_richtexttypes.BLOCKS.HEADING_5]: (0, _emotion.css)`
+        [_richtexttypes.BLOCKS.HEADING_5]: (0, _css.css)`
       font-size: 1rem;
     `,
-        [_richtexttypes.BLOCKS.HEADING_6]: (0, _emotion.css)`
+        [_richtexttypes.BLOCKS.HEADING_6]: (0, _css.css)`
       font-size: 0.875rem;
     `
     },
     headings: {
-        root: (0, _emotion.css)`
+        root: (0, _css.css)`
       font-weight: ${_f36tokens.default.fontWeightMedium};
       line-height: 1.3;
       margin: 0 0 ${_f36tokens.default.spacingS};
       direction: inherit;
     `,
-        [_richtexttypes.BLOCKS.HEADING_1]: (0, _emotion.css)`
+        [_richtexttypes.BLOCKS.HEADING_1]: (0, _css.css)`
       font-size: 1.875rem;
     `,
-        [_richtexttypes.BLOCKS.HEADING_2]: (0, _emotion.css)`
+        [_richtexttypes.BLOCKS.HEADING_2]: (0, _css.css)`
       font-size: 1.5625rem;
     `,
-        [_richtexttypes.BLOCKS.HEADING_3]: (0, _emotion.css)`
+        [_richtexttypes.BLOCKS.HEADING_3]: (0, _css.css)`
       font-size: 1.375rem;
     `,
-        [_richtexttypes.BLOCKS.HEADING_4]: (0, _emotion.css)`
+        [_richtexttypes.BLOCKS.HEADING_4]: (0, _css.css)`
       font-size: 1.25rem;
     `,
-        [_richtexttypes.BLOCKS.HEADING_5]: (0, _emotion.css)`
+        [_richtexttypes.BLOCKS.HEADING_5]: (0, _css.css)`
       font-size: 1.125rem;
     `,
-        [_richtexttypes.BLOCKS.HEADING_6]: (0, _emotion.css)`
+        [_richtexttypes.BLOCKS.HEADING_6]: (0, _css.css)`
       font-size: 1rem;
     `
     }
@@ -116,7 +116,7 @@ function createHeading(Tag, block) {
     return function Heading(props) {
         return /*#__PURE__*/ _react.createElement(Tag, {
             ...props.attributes,
-            className: (0, _emotion.cx)(styles.headings.root, styles.headings[block])
+            className: (0, _css.cx)(styles.headings.root, styles.headings[block])
         }, props.children);
     };
 }

package/dist/cjs/plugins/Heading/components/ToolbarHeadingButton.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 _validations = require("../../../helpers/validations");
@@ -65,33 +65,33 @@ function _interop_require_wildcard(obj, nodeInterop) {
     return newObj;
 }
 const styles = {
-    button: (0, _emotion.css)({
+    button: (0, _css.css)({
         minWidth: '125px',
         justifyContent: 'space-between'
     }),
     dropdown: {
-        root: (0, _emotion.css)`
+        root: (0, _css.css)`
       font-weight: ${_f36tokens.default.fontWeightDemiBold};
     `,
-        [_richtexttypes.BLOCKS.PARAGRAPH]: (0, _emotion.css)`
+        [_richtexttypes.BLOCKS.PARAGRAPH]: (0, _css.css)`
       font-size: ${_f36tokens.default.fontSizeL};
     `,
-        [_richtexttypes.BLOCKS.HEADING_1]: (0, _emotion.css)`
+        [_richtexttypes.BLOCKS.HEADING_1]: (0, _css.css)`
       font-size: 1.625rem;
     `,
-        [_richtexttypes.BLOCKS.HEADING_2]: (0, _emotion.css)`
+        [_richtexttypes.BLOCKS.HEADING_2]: (0, _css.css)`
       font-size: 1.4375rem;
     `,
-        [_richtexttypes.BLOCKS.HEADING_3]: (0, _emotion.css)`
+        [_richtexttypes.BLOCKS.HEADING_3]: (0, _css.css)`
       font-size: 1.25rem;
     `,
-        [_richtexttypes.BLOCKS.HEADING_4]: (0, _emotion.css)`
+        [_richtexttypes.BLOCKS.HEADING_4]: (0, _css.css)`
       font-size: 1.125rem;
     `,
-        [_richtexttypes.BLOCKS.HEADING_5]: (0, _emotion.css)`
+        [_richtexttypes.BLOCKS.HEADING_5]: (0, _css.css)`
       font-size: 1rem;
     `,
-        [_richtexttypes.BLOCKS.HEADING_6]: (0, _emotion.css)`
+        [_richtexttypes.BLOCKS.HEADING_6]: (0, _css.css)`
       font-size: 0.875rem;
     `
     }
@@ -186,6 +186,6 @@ function ToolbarHeadingButton(props) {
             testId: `dropdown-option-${nodeType}`,
             disabled: props.isDisabled
         }, /*#__PURE__*/ _react.createElement("span", {
-            className: (0, _emotion.cx)(styles.dropdown.root, styles.dropdown[nodeType])
+            className: (0, _css.cx)(styles.dropdown.root, styles.dropdown[nodeType])
         }, LABELS[nodeType]))).filter(Boolean)));
 }

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

@@ -26,7 +26,7 @@ const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 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 _slatereact = /*#__PURE__*/ _interop_require_wildcard(require("slate-react"));
 const _ContentfulEditorProvider = require("../../ContentfulEditorProvider");
 const _editor = require("../../helpers/editor");
@@ -80,10 +80,10 @@ function _interop_require_wildcard(obj, nodeInterop) {
     return newObj;
 }
 const styles = {
-    container: (0, _emotion.css)`
+    container: (0, _css.css)`
     margin: 0 0 ${_f36tokens.default.spacingL};
   `,
-    hr: (0, _emotion.css)`
+    hr: (0, _css.css)`
     margin: 0;
     height: ${_f36tokens.default.spacingM};
     background: transparent;
@@ -102,7 +102,7 @@ const styles = {
       top: 50%;
     }
   `,
-    hrSelected: (0, _emotion.css)`
+    hrSelected: (0, _css.css)`
     &::after {
       background: ${_f36tokens.default.colorPrimary};
       -webkit-box-shadow: 0px 0px 5px ${_f36tokens.default.colorPrimary};
@@ -165,7 +165,7 @@ function Hr(props) {
         draggable: true,
         contentEditable: false
     }, /*#__PURE__*/ _react.createElement("hr", {
-        className: (0, _emotion.cx)(styles.hr, isSelected && isFocused ? styles.hrSelected : undefined)
+        className: (0, _css.cx)(styles.hr, isSelected && isFocused ? styles.hrSelected : undefined)
     })), props.children);
 }
 const createHrPlugin = ()=>({

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

@@ -22,7 +22,7 @@ const _f36tokens = /*#__PURE__*/ _interop_require_default(require("@contentful/f
 const _fieldeditorreference = require("@contentful/field-editor-reference");
 const _fieldeditorshared = require("@contentful/field-editor-shared");
 const _richtexttypes = require("@contentful/rich-text-types");
-const _emotion = require("emotion");
+const _css = require("@emotion/css");
 const _editor = require("../../helpers/editor");
 const _getAllowedResourcesForNodeType = /*#__PURE__*/ _interop_require_default(require("../../helpers/getAllowedResourcesForNodeType"));
 const _getLinkedContentTypeIdsForNodeType = /*#__PURE__*/ _interop_require_default(require("../../helpers/getLinkedContentTypeIdsForNodeType"));
@@ -80,7 +80,7 @@ function _interop_require_wildcard(obj, nodeInterop) {
     return newObj;
 }
 const styles = {
-    removeSelectionLabel: (0, _emotion.css)`
+    removeSelectionLabel: (0, _css.css)`
     margin-left: ${_f36tokens.default.spacingS};
     margin-bottom: ${_f36tokens.default.spacingXs}; // to match FormLabel margin
   `

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

@@ -9,24 +9,24 @@ Object.defineProperty(exports, "styles", {
     }
 });
 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
     };
 }
 const styles = {
-    hyperlinkWrapper: (0, _emotion.css)({
+    hyperlinkWrapper: (0, _css.css)({
         display: 'inline',
         position: 'static',
         a: {
             fontSize: 'inherit !important'
         }
     }),
-    iconButton: (0, _emotion.css)({
+    iconButton: (0, _css.css)({
         padding: `${_f36tokens.default.spacing2Xs} ${_f36tokens.default.spacingXs}`
     }),
-    openLink: (0, _emotion.css)({
+    openLink: (0, _css.css)({
         display: 'inline-block',
         marginLeft: _f36tokens.default.spacingXs,
         marginRight: _f36tokens.default.spacingXs,
@@ -35,10 +35,10 @@ const styles = {
         overflow: 'hidden',
         textOverflow: 'ellipsis'
     }),
-    popover: (0, _emotion.css)({
+    popover: (0, _css.css)({
         zIndex: _f36tokens.default.zIndexModal
     }),
-    hyperlink: (0, _emotion.css)({
+    hyperlink: (0, _css.css)({
         position: 'relative',
         whiteSpace: 'pre-wrap',
         overflowWrap: 'break-word',

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

@@ -19,7 +19,7 @@ _export(exports, {
 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
@@ -66,7 +66,7 @@ function _interop_require_wildcard(obj, nodeInterop) {
     }
     return newObj;
 }
-const baseStyle = (0, _emotion.css)`
+const baseStyle = (0, _css.css)`
   padding: 0;
   margin: 0 0 1.25rem 1.25rem;
   direction: inherit;
@@ -77,7 +77,7 @@ const baseStyle = (0, _emotion.css)`
   }
 `;
 const styles = {
-    [_richtexttypes.BLOCKS.UL_LIST]: (0, _emotion.css)`
+    [_richtexttypes.BLOCKS.UL_LIST]: (0, _css.css)`
     list-style-type: disc;
     ul {
       list-style-type: circle;
@@ -86,7 +86,7 @@ const styles = {
       }
     }
   `,
-    [_richtexttypes.BLOCKS.OL_LIST]: (0, _emotion.css)`
+    [_richtexttypes.BLOCKS.OL_LIST]: (0, _css.css)`
     list-style-type: decimal;
     ol {
       list-style-type: upper-alpha;
@@ -103,7 +103,7 @@ function createList(Tag, block) {
     return function List(props) {
         return /*#__PURE__*/ _react.createElement(Tag, {
             ...props.attributes,
-            className: (0, _emotion.cx)(baseStyle, styles[block])
+            className: (0, _css.cx)(baseStyle, styles[block])
         }, props.children);
     };
 }