@atlaskit/editor-core 189.5.1 → 189.5.3

package/dist/es2019/plugins/find-replace/ui/Replace.js

@@ -1,5 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+/** @jsx jsx */
 import React from 'react';
+import { jsx } from '@emotion/react';
 import Button from '@atlaskit/button/standard-button';
 import { defineMessages, injectIntl } from 'react-intl-next';
 import Textfield from '@atlaskit/textfield';
@@ -121,9 +123,9 @@ class Replace extends React.PureComponent {
     const {
       canReplace
     } = this.props;
-    return /*#__PURE__*/React.createElement("div", {
+    return jsx("div", {
       css: sectionWrapperStyles
-    }, /*#__PURE__*/React.createElement(Textfield, {
+    }, jsx(Textfield, {
       name: "replace",
       appearance: "none",
       placeholder: this.replaceWith,
@@ -134,12 +136,12 @@ class Replace extends React.PureComponent {
       onKeyDown: this.handleReplaceKeyDown,
       onCompositionStart: this.handleCompositionStart,
       onCompositionEnd: this.handleCompositionEnd
-    }), /*#__PURE__*/React.createElement(Button, {
+    }), jsx(Button, {
       css: replaceSectionButtonStyles,
       testId: this.replace,
       onClick: this.handleReplaceClick,
       isDisabled: !canReplace
-    }, this.replace), /*#__PURE__*/React.createElement(Button, {
+    }, this.replace), jsx(Button, {
       css: replaceSectionButtonStyles,
       testId: this.replaceAll,
       onClick: this.handleReplaceAllClick,

package/dist/es2019/plugins/find-replace/ui/styles.js

@@ -1,3 +1,4 @@
+/** @jsx jsx */
 import { css } from '@emotion/react';
 import { N60, N30A } from '@atlaskit/theme/colors';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';

package/dist/es2019/plugins/jira-issue/nodeviews/jira-issue.js

@@ -1,4 +1,5 @@
-import { css } from '@emotion/react';
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
 import { JiraIcon } from '@atlaskit/logo/jira-icon';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { N30, N50 } from '@atlaskit/theme/colors';
@@ -54,14 +55,14 @@ export default function JIRAIssueNode(props) {
       }
     }
   } = props;
-  return /*#__PURE__*/React.createElement("span", {
+  return jsx("span", {
     css: wrapperNode,
     "data-testid": "jira-issue-node"
-  }, /*#__PURE__*/React.createElement("span", {
+  }, jsx("span", {
     css: svgChildNode
-  }, /*#__PURE__*/React.createElement(JiraIcon, {
+  }, jsx(JiraIcon, {
     size: "small"
-  })), /*#__PURE__*/React.createElement("span", {
+  })), jsx("span", {
     css: jiraChildNode
   }, issueKey));
 }

package/dist/es2019/plugins/undo-redo/ui/ToolbarUndoRedo/index.js

@@ -1,3 +1,5 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import UndoIcon from '@atlaskit/icon/glyph/undo';
 import RedoIcon from '@atlaskit/icon/glyph/redo';
@@ -53,39 +55,39 @@ export const ToolbarUndoRedo = ({
     canUndo,
     canRedo
   } = historyState !== null && historyState !== void 0 ? historyState : {};
-  return /*#__PURE__*/React.createElement("span", {
+  return jsx("span", {
     css: buttonGroupStyle
-  }, /*#__PURE__*/React.createElement(ToolbarButton, {
+  }, jsx(ToolbarButton, {
     buttonId: TOOLBAR_BUTTON.UNDO,
     spacing: isReducedSpacing ? 'none' : 'default',
     onClick: handleUndo,
     disabled: !canUndo || disabled,
     "aria-label": tooltip(undoKeymap, labelUndo),
     "aria-keyshortcuts": getAriaKeyshortcuts(undoKeymap),
-    title: /*#__PURE__*/React.createElement(ToolTipContent, {
+    title: jsx(ToolTipContent, {
       description: labelUndo,
       keymap: undoKeymap
     }),
-    iconBefore: /*#__PURE__*/React.createElement(UndoIcon, {
+    iconBefore: jsx(UndoIcon, {
       label: ""
     }),
     testId: "ak-editor-toolbar-button-undo"
-  }), /*#__PURE__*/React.createElement(ToolbarButton, {
+  }), jsx(ToolbarButton, {
     spacing: isReducedSpacing ? 'none' : 'default',
     buttonId: TOOLBAR_BUTTON.REDO,
     onClick: handleRedo,
     disabled: !canRedo || disabled,
-    title: /*#__PURE__*/React.createElement(ToolTipContent, {
+    title: jsx(ToolTipContent, {
       description: labelRedo,
       keymap: redoKeymap
     }),
-    iconBefore: /*#__PURE__*/React.createElement(RedoIcon, {
+    iconBefore: jsx(RedoIcon, {
       label: ""
     }),
     testId: "ak-editor-toolbar-button-redo",
     "aria-label": tooltip(redoKeymap, labelRedo),
     "aria-keyshortcuts": getAriaKeyshortcuts(redoKeymap)
-  }), /*#__PURE__*/React.createElement("span", {
+  }), jsx("span", {
     css: separatorStyles
   }));
 };

package/dist/es2019/ui/Addon/ClickAreaBlock/index.js

@@ -1,5 +1,6 @@
+/** @jsx jsx */
 import React from 'react';
-import { css } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { clickAreaClickHandler } from '../click-area-helper';
 const clickWrapper = css`
   flex-grow: 1;
@@ -18,7 +19,7 @@ export const ClickAreaBlock = ({
       clickAreaClickHandler(editorView, event);
     }
   }, [editorView, editorDisabled]);
-  return /*#__PURE__*/React.createElement("div", {
+  return jsx("div", {
     "data-testid": "click-wrapper",
     css: clickWrapper,
     onMouseDown: handleMouseDown

package/dist/es2019/ui/Addon/ClickAreaInline/index.js

@@ -1,5 +1,6 @@
+/** @jsx jsx */
 import React from 'react';
-import { css } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { createParagraphAtEnd } from '../../../commands';
 const clickArea = css`
   flex-grow: 1;
@@ -17,7 +18,7 @@ export const ClickAreaInline = ({
       event.stopPropagation();
     }
   }, [editorView]);
-  return /*#__PURE__*/React.createElement("div", {
+  return jsx("div", {
     "data-testid": "click-wrapper",
     css: clickArea,
     onMouseDown: handleMouseDown

package/dist/es2019/ui/Addon/ClickAreaMobile/index.js

@@ -1,6 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+/** @jsx jsx */
 import React from 'react';
-import { css } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { clickAreaClickHandler } from '../click-area-helper';
 
 /**
@@ -57,7 +58,7 @@ export default class ClickAreaMobile extends React.Component {
     });
   }
   render() {
-    return /*#__PURE__*/React.createElement("div", {
+    return jsx("div", {
       css: clickWrapper({
         isExpanded: this.props.isExpanded,
         minHeight: this.props.minHeight

package/dist/es2019/ui/Addon/Dropdown/index.js

@@ -1,5 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+/** @jsx jsx */
 import React from 'react';
+import { jsx } from '@emotion/react';
 import { dropdown } from './styles';
 export default class DropdownWrapper extends React.Component {
   constructor(...args) {
@@ -25,7 +27,7 @@ export default class DropdownWrapper extends React.Component {
     const children = React.Children.map(this.props.children, child => /*#__PURE__*/React.cloneElement(child, {
       onClick: this.handleClick
     }));
-    return /*#__PURE__*/React.createElement("div", {
+    return jsx("div", {
       css: dropdown
     }, children);
   }

package/dist/es2019/ui/Addon/DropdownItem/index.js

@@ -1,9 +1,11 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import { dropdownItem } from './styles';
-const DropdownItemWrapper = props => /*#__PURE__*/React.createElement("div", {
+const DropdownItemWrapper = props => jsx("div", {
   css: dropdownItem,
   onClick: () => props.onClick && props.onClick({
     actionOnClick: props.actionOnClick,
     renderOnClick: props.renderOnClick
   })
-}, /*#__PURE__*/React.createElement("span", null, props.icon), props.children);
+}, jsx("span", null, props.icon), props.children);
 export default DropdownItemWrapper;

package/dist/es2019/ui/Alignment/index.js

@@ -1,3 +1,5 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import { PureComponent } from 'react';
 import { injectIntl } from 'react-intl-next';
 import { IconMap } from '../../plugins/alignment/ui/ToolbarAlignment/icon-map';
@@ -24,7 +26,7 @@ class Alignment extends PureComponent {
       className,
       intl
     } = this.props;
-    return /*#__PURE__*/React.createElement("div", {
+    return jsx("div", {
       css: alignmentWrapper,
       className: className
     }, alignmentOptions.map(alignment => {
@@ -34,8 +36,8 @@ class Alignment extends PureComponent {
         shortcut
       } = alignment;
       const message = intl.formatMessage(title);
-      return /*#__PURE__*/React.createElement(AlignmentButton, {
-        content: /*#__PURE__*/React.createElement(IconMap, {
+      return jsx(AlignmentButton, {
+        content: jsx(IconMap, {
           alignment: value
         }),
         key: value,

package/dist/es2019/ui/Appearance/Chromeless.js

@@ -1,6 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+/** @jsx jsx */
 import React, { Fragment } from 'react';
-import { css } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import PluginSlot from '../PluginSlot';
 import { createEditorContentStyle } from '../ContentStyles';
 import { scrollbarStyles } from '../styles';
@@ -58,9 +59,9 @@ export default class Editor extends React.Component {
         featureFlags
       } = this.props;
       const maxContentSizeReached = Boolean(maxContentSize === null || maxContentSize === void 0 ? void 0 : maxContentSize.maxContentSizeReached);
-      return /*#__PURE__*/React.createElement(WithFlash, {
+      return jsx(WithFlash, {
         animate: maxContentSizeReached
-      }, /*#__PURE__*/React.createElement("div", {
+      }, jsx("div", {
         css: [chromelessEditor, maxHeight && css`
                 max-height: ${maxHeight}px;
               `, css`
@@ -68,10 +69,10 @@ export default class Editor extends React.Component {
             `],
         "data-testid": "chromeless-editor",
         ref: ref => this.containerElement = ref
-      }, /*#__PURE__*/React.createElement(ContentArea, {
+      }, jsx(ContentArea, {
         className: "ak-editor-content-area",
         featureFlags: featureFlags
-      }, customContentComponents, /*#__PURE__*/React.createElement(PluginSlot, {
+      }, customContentComponents, jsx(PluginSlot, {
         editorView: editorView,
         editorActions: editorActions,
         eventDispatcher: eventDispatcher,
@@ -90,7 +91,7 @@ export default class Editor extends React.Component {
     });
   }
   render() {
-    return /*#__PURE__*/React.createElement(RenderWithPluginState, {
+    return jsx(RenderWithPluginState, {
       renderChrome: this.renderChrome
     });
   }
@@ -103,7 +104,7 @@ function RenderWithPluginState({
   const {
     maxContentSizeState
   } = useSharedPluginState(api, ['maxContentSize']);
-  return /*#__PURE__*/React.createElement(Fragment, null, renderChrome({
+  return jsx(Fragment, null, renderChrome({
     maxContentSize: maxContentSizeState
   }));
 }

package/dist/es2019/ui/Appearance/Comment/Comment.js

@@ -1,6 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+/** @jsx jsx */
 import React, { Fragment } from 'react';
-import { css } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import ButtonGroup from '@atlaskit/button/button-group';
 import Button from '@atlaskit/button/custom-theme-button';
 import { borderRadius } from '@atlaskit/theme/constants';
@@ -134,17 +135,17 @@ class Editor extends React.Component {
         event.preventDefault();
         event.stopPropagation();
       };
-      return /*#__PURE__*/React.createElement(WithFlash, {
+      return jsx(WithFlash, {
         animate: maxContentSizeReached
-      }, /*#__PURE__*/React.createElement("div", {
+      }, jsx("div", {
         css: [commentEditorStyle, css`
               min-height: ${minHeight}px;
             `],
         className: "akEditor",
         ref: this.wrapperElementRef
-      }, /*#__PURE__*/React.createElement(MainToolbar, {
+      }, jsx(MainToolbar, {
         useStickyToolbar: useStickyToolbar
-      }, /*#__PURE__*/React.createElement(ToolbarArrowKeyNavigationProvider, {
+      }, jsx(ToolbarArrowKeyNavigationProvider, {
         editorView: editorView,
         childComponentSelector: "[data-testid='ak-editor-main-toolbar']",
         isShortcutToFocusToolbar: isShortcutToFocusToolbar,
@@ -152,7 +153,7 @@ class Editor extends React.Component {
         editorAppearance: this.appearance,
         useStickyToolbar: useStickyToolbar,
         intl: intl
-      }, /*#__PURE__*/React.createElement(Toolbar, {
+      }, jsx(Toolbar, {
         editorView: editorView,
         editorActions: editorActions,
         eventDispatcher: eventDispatcher,
@@ -165,15 +166,15 @@ class Editor extends React.Component {
         disabled: !!disabled,
         dispatchAnalyticsEvent: dispatchAnalyticsEvent,
         containerElement: this.containerElement
-      }), /*#__PURE__*/React.createElement("div", {
+      }), jsx("div", {
         css: mainToolbarCustomComponentsSlotStyle
-      }, customPrimaryToolbarComponents))), /*#__PURE__*/React.createElement(ClickAreaBlock, {
+      }, customPrimaryToolbarComponents))), jsx(ClickAreaBlock, {
         editorView: editorView,
         editorDisabled: disabled
-      }, /*#__PURE__*/React.createElement(WidthConsumer, null, ({
+      }, jsx(WidthConsumer, null, ({
         width
       }) => {
-        return /*#__PURE__*/React.createElement(ContentArea, {
+        return jsx(ContentArea, {
           ref: ref => this.containerElement = ref,
           css: maxHeight ? css`
                             max-height: ${maxHeight}px;
@@ -182,7 +183,7 @@ class Editor extends React.Component {
             'less-margin': width < akEditorMobileBreakoutPoint
           }),
           featureFlags: featureFlags
-        }, customContentComponents, /*#__PURE__*/React.createElement(PluginSlot, {
+        }, customContentComponents, jsx(PluginSlot, {
           editorView: editorView,
           editorActions: editorActions,
           eventDispatcher: eventDispatcher,
@@ -198,19 +199,19 @@ class Editor extends React.Component {
           wrapperElement: this.wrapperElementRef.current,
           pluginHooks: pluginHooks
         }), editorDOMElement);
-      }))), showSecondaryToolbar && /*#__PURE__*/React.createElement("div", {
+      }))), showSecondaryToolbar && jsx("div", {
         css: secondaryToolbarStyle,
         "data-testid": "ak-editor-secondary-toolbar"
-      }, /*#__PURE__*/React.createElement(ButtonGroup, null, !!onSave && /*#__PURE__*/React.createElement(Button, {
+      }, jsx(ButtonGroup, null, !!onSave && jsx(Button, {
         appearance: "primary",
         onClick: this.handleSave,
         testId: "comment-save-button",
         isDisabled: disabled || mediaState && !mediaState.allUploadsFinished
-      }, intl.formatMessage(messages.saveButton)), !!onCancel && /*#__PURE__*/React.createElement(Button, {
+      }, intl.formatMessage(messages.saveButton)), !!onCancel && jsx(Button, {
         appearance: "subtle",
         onClick: this.handleCancel,
         isDisabled: disabled
-      }, intl.formatMessage(messages.cancelButton))), /*#__PURE__*/React.createElement("span", {
+      }, intl.formatMessage(messages.cancelButton))), jsx("span", {
         style: {
           flexGrow: 1
         }
@@ -221,7 +222,7 @@ class Editor extends React.Component {
     }
   }
   render() {
-    return /*#__PURE__*/React.createElement(RenderWithPluginState, {
+    return jsx(RenderWithPluginState, {
       renderChrome: this.renderChrome
     });
   }
@@ -235,7 +236,7 @@ function RenderWithPluginState({
     mediaState,
     maxContentSizeState
   } = useSharedPluginState(api, ['media', 'maxContentSize']);
-  return /*#__PURE__*/React.createElement(Fragment, null, renderChrome({
+  return jsx(Fragment, null, renderChrome({
     maxContentSize: maxContentSizeState,
     mediaState: mediaState !== null && mediaState !== void 0 ? mediaState : undefined
   }));

package/dist/es2019/ui/Appearance/Comment/Toolbar.js

@@ -1,5 +1,7 @@
+/** @jsx jsx */
+
 import React, { useEffect, useState } from 'react';
-import { css } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { N30 } from '@atlaskit/theme/colors';
 import { akEditorToolbarKeylineHeight, akEditorMenuZIndex } from '@atlaskit/editor-shared-styles';
 export const TableControlsPadding = 20;
@@ -51,7 +53,7 @@ const StickyToolbar = props => {
       setTop(props.offsetTop || 0);
     }
   }, [props.externalToolbarRef, props.offsetTop]);
-  return /*#__PURE__*/React.createElement("div", {
+  return jsx("div", {
     css: [mainToolbarWrapperStyle, stickyToolbarWrapperStyle, css`
           top: ${top}px;
         `],
@@ -59,7 +61,7 @@ const StickyToolbar = props => {
     className: 'show-keyline'
   }, props.children);
 };
-const FixedToolbar = props => /*#__PURE__*/React.createElement("div", {
+const FixedToolbar = props => jsx("div", {
   css: mainToolbarWrapperStyle,
   "data-testid": "ak-editor-main-toolbar"
 }, props.children);
@@ -96,9 +98,9 @@ export const MainToolbar = ({
   children
 }) => {
   if (useStickyToolbar) {
-    return /*#__PURE__*/React.createElement(StickyToolbar, getStickyParameters(useStickyToolbar), children);
+    return jsx(StickyToolbar, getStickyParameters(useStickyToolbar), children);
   }
-  return /*#__PURE__*/React.createElement(FixedToolbar, null, children);
+  return jsx(FixedToolbar, null, children);
 };
 export const mainToolbarCustomComponentsSlotStyle = css`
   display: flex;

package/dist/es2019/ui/Appearance/FullPage/FullPage.js

@@ -1,4 +1,6 @@
+/** @jsx jsx */
 import React, { useEffect, useState, useRef, useMemo } from 'react';
+import { jsx } from '@emotion/react';
 import { fullPageEditorWrapper } from './StyledComponents';
 import { ContextPanelWidthProvider } from '@atlaskit/editor-common/ui';
 import { FullPageContentArea } from './FullPageContentArea';
@@ -33,11 +35,11 @@ export const FullPageEditor = props => {
   const wrapperElementRef = useMemo(() => props.innerRef, [props.innerRef]);
   const scrollContentContainerRef = useRef(null);
   const showKeyline = useShowKeyline(scrollContentContainerRef);
-  return /*#__PURE__*/React.createElement(ContextPanelWidthProvider, null, /*#__PURE__*/React.createElement("div", {
+  return jsx(ContextPanelWidthProvider, null, jsx("div", {
     css: fullPageEditorWrapper,
     className: "akEditor",
     ref: wrapperElementRef
-  }, /*#__PURE__*/React.createElement(FullPageToolbar, {
+  }, jsx(FullPageToolbar, {
     appearance: props.appearance,
     beforeIcon: props.primaryToolbarIconBefore,
     collabEdit: props.collabEdit,
@@ -58,7 +60,7 @@ export const FullPageEditor = props => {
     showKeyline: showKeyline,
     featureFlags: props.featureFlags,
     hideAvatarGroup: props.hideAvatarGroup
-  }), /*#__PURE__*/React.createElement(FullPageContentArea, {
+  }), jsx(FullPageContentArea, {
     ref: scrollContentContainerRef,
     appearance: props.appearance,
     contentComponents: props.contentComponents,

package/dist/es2019/ui/Appearance/FullPage/FullPageContentArea.js

@@ -1,4 +1,5 @@
-import { useTheme } from '@emotion/react';
+/** @jsx jsx */
+import { jsx, useTheme } from '@emotion/react';
 import { WidthConsumer, ContextPanelConsumer } from '@atlaskit/editor-common/ui';
 import React, { useImperativeHandle, useRef } from 'react';
 import { injectIntl } from 'react-intl-next';
@@ -21,23 +22,23 @@ const Content = /*#__PURE__*/React.forwardRef((props, ref) => {
       return contentAreaRef.current;
     }
   }), []);
-  return /*#__PURE__*/React.createElement(WidthConsumer, null, ({
+  return jsx(WidthConsumer, null, ({
     width
-  }) => /*#__PURE__*/React.createElement(ContextPanelConsumer, null, ({
+  }) => jsx(ContextPanelConsumer, null, ({
     positionedOverEditor
   }) => {
     var _contentAreaRef$curre;
-    return /*#__PURE__*/React.createElement("div", {
+    return jsx("div", {
       css: [contentArea, positionedOverEditor && positionedOverEditorStyle],
       "data-testid": CONTENT_AREA_TEST_ID
-    }, /*#__PURE__*/React.createElement(ScrollContainer, {
+    }, jsx(ScrollContainer, {
       className: "fabric-editor-popup-scroll-parent",
       featureFlags: props.featureFlags,
       ref: scrollContainerRef
-    }, /*#__PURE__*/React.createElement(ClickAreaBlock, {
+    }, jsx(ClickAreaBlock, {
       editorView: props.editorView,
       editorDisabled: props.disabled
-    }, /*#__PURE__*/React.createElement("div", {
+    }, jsx("div", {
       css: editorContentAreaStyle({
         fullWidthMode,
         layoutMaxWidth: theme.layoutMaxWidth,
@@ -46,11 +47,11 @@ const Content = /*#__PURE__*/React.forwardRef((props, ref) => {
       role: "region",
       "aria-label": props.intl.formatMessage(messages.editableContentLabel),
       ref: contentAreaRef
-    }, /*#__PURE__*/React.createElement("div", {
+    }, jsx("div", {
       css: editorContentGutterStyle,
       className: ['ak-editor-content-area', fullWidthMode ? 'fabric-editor--full-width-mode' : ''].join(' '),
       ref: contentAreaRef
-    }, props.customContentComponents, /*#__PURE__*/React.createElement(PluginSlot, {
+    }, props.customContentComponents, jsx(PluginSlot, {
       editorView: props.editorView,
       editorActions: props.editorActions,
       eventDispatcher: props.eventDispatcher,
@@ -66,9 +67,9 @@ const Content = /*#__PURE__*/React.forwardRef((props, ref) => {
       containerElement: scrollContainerRef.current,
       dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
       wrapperElement: props.wrapperElement
-    }), props.editorDOMElement)))), /*#__PURE__*/React.createElement("div", {
+    }), props.editorDOMElement)))), jsx("div", {
       css: sidebarArea
-    }, props.contextPanel || /*#__PURE__*/React.createElement(ContextPanel, {
+    }, props.contextPanel || jsx(ContextPanel, {
       visible: false
     })));
   }));

package/dist/es2019/ui/Appearance/FullPage/FullPageToolbar.js

@@ -1,4 +1,7 @@
+/** @jsx jsx */
+
 import React, { useState, useEffect } from 'react';
+import { jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import AvatarsWithPluginState from '../../../plugins/collab-edit/ui';
 import FindReplaceToolbarButtonWithState from '../../../plugins/find-replace/FindReplaceToolbarButtonWithState';
@@ -16,11 +19,11 @@ export const EditorToolbar = /*#__PURE__*/React.memo(props => {
 
   // When primary toolbar components is undefined, do not show two line editor toolbar
   const twoLineEditorToolbar = !!props.customPrimaryToolbarComponents && !!((_props$featureFlags = props.featureFlags) !== null && _props$featureFlags !== void 0 && _props$featureFlags.twoLineEditorToolbar);
-  const nonCustomToolbar = /*#__PURE__*/React.createElement("div", {
+  const nonCustomToolbar = jsx("div", {
     css: nonCustomToolbarWrapperStyle
-  }, props.beforeIcon && /*#__PURE__*/React.createElement("div", {
+  }, props.beforeIcon && jsx("div", {
     css: mainToolbarIconBeforeStyle
-  }, props.beforeIcon), /*#__PURE__*/React.createElement(Toolbar, {
+  }, props.beforeIcon), jsx(Toolbar, {
     editorView: props.editorView,
     editorActions: props.editorActions,
     eventDispatcher: props.eventDispatcher,
@@ -36,17 +39,16 @@ export const EditorToolbar = /*#__PURE__*/React.memo(props => {
     hasMinWidth: props.hasMinWidth,
     twoLineEditorToolbar: twoLineEditorToolbar
   }));
-  const customToolbar = /*#__PURE__*/React.createElement("div", {
+  const customToolbar = jsx("div", {
     css: customToolbarWrapperStyle
-  }, twoLineEditorToolbar && !!props.customPrimaryToolbarComponents && 'before' in props.customPrimaryToolbarComponents ? /*#__PURE__*/React.createElement(BeforePrimaryToolbarWrapper, {
+  }, twoLineEditorToolbar && !!props.customPrimaryToolbarComponents && 'before' in props.customPrimaryToolbarComponents ? jsx(BeforePrimaryToolbarWrapper, {
     beforePrimaryToolbarComponents: props.customPrimaryToolbarComponents.before
   }) : null, props.hideAvatarGroup || (props === null || props === void 0 ? void 0 : (_props$featureFlags2 = props.featureFlags) === null || _props$featureFlags2 === void 0 ? void 0 : _props$featureFlags2.showAvatarGroupAsPlugin) === true && !((_props$featureFlags3 = props.featureFlags) !== null && _props$featureFlags3 !== void 0 && _props$featureFlags3.twoLineEditorToolbar) ? null :
-  /*#__PURE__*/
   // Avatars are moved to Confluence codebase for Edit in Context
   // When Edit in Context is enabled customPrimaryToolbarComponents is undefined
   // For more details please check
   // https://hello.atlassian.net/wiki/spaces/PCG/pages/2851572180/Editor+toolbar+for+live+pages+and+edit+in+context+projects
-  React.createElement(AvatarsWithPluginState, {
+  jsx(AvatarsWithPluginState, {
     editorView: props.editorView,
     eventDispatcher: props.eventDispatcher,
     inviteToEditComponent: (_props$collabEdit = props.collabEdit) === null || _props$collabEdit === void 0 ? void 0 : _props$collabEdit.inviteToEditComponent,
@@ -54,7 +56,7 @@ export const EditorToolbar = /*#__PURE__*/React.memo(props => {
     isInviteToEditButtonSelected: (_props$collabEdit3 = props.collabEdit) === null || _props$collabEdit3 === void 0 ? void 0 : _props$collabEdit3.isInviteToEditButtonSelected,
     featureFlags: props.featureFlags || {},
     editorAnalyticsAPI: editorAPI === null || editorAPI === void 0 ? void 0 : (_editorAPI$analytics = editorAPI.analytics) === null || _editorAPI$analytics === void 0 ? void 0 : _editorAPI$analytics.actions
-  }), editorAPI !== null && editorAPI !== void 0 && editorAPI.findReplace && twoLineEditorToolbar ? /*#__PURE__*/React.createElement(FindReplaceToolbarButtonWithState, {
+  }), editorAPI !== null && editorAPI !== void 0 && editorAPI.findReplace && twoLineEditorToolbar ? jsx(FindReplaceToolbarButtonWithState, {
     popupsBoundariesElement: props.popupsBoundariesElement,
     popupsMountPoint: props.popupsMountPoint,
     popupsScrollableElement: props.popupsScrollableElement,
@@ -91,22 +93,22 @@ export const EditorToolbar = /*#__PURE__*/React.memo(props => {
     event.preventDefault();
     event.stopPropagation();
   };
-  return /*#__PURE__*/React.createElement(ContextPanelConsumer, null, ({
+  return jsx(ContextPanelConsumer, null, ({
     width: contextPanelWidth
-  }) => /*#__PURE__*/React.createElement(ToolbarArrowKeyNavigationProvider, {
+  }) => jsx(ToolbarArrowKeyNavigationProvider, {
     editorView: props.editorView,
     childComponentSelector: "[data-testid='ak-editor-main-toolbar']",
     isShortcutToFocusToolbar: isShortcutToFocusToolbar,
     handleEscape: handleEscape,
     intl: props.intl
-  }, /*#__PURE__*/React.createElement("div", {
+  }, jsx("div", {
     css: mainToolbarStyle(props.showKeyline || contextPanelWidth > 0, twoLineEditorToolbar),
     "data-testid": "ak-editor-main-toolbar"
-  }, /*#__PURE__*/React.createElement("div", {
+  }, jsx("div", {
     css: mainToolbarFirstChildStyle(twoLineEditorToolbar),
     role: "toolbar",
     "aria-label": props.intl.formatMessage(messages.toolbarLabel)
-  }, shouldSplitToolbar ? customToolbar : nonCustomToolbar), /*#__PURE__*/React.createElement("div", {
+  }, shouldSplitToolbar ? customToolbar : nonCustomToolbar), jsx("div", {
     css: mainToolbarSecondChildStyle(twoLineEditorToolbar),
     "data-testid": 'avatar-group-outside-plugin',
     role: "region",

package/dist/es2019/ui/AppearanceComponents/Mobile.js

@@ -1,5 +1,6 @@
+/** @jsx jsx */
 import React, { useCallback, forwardRef } from 'react';
-import { css } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import WithFlash from '../WithFlash';
 import { createEditorContentStyle } from '../ContentStyles';
 import { ClickAreaMobile as ClickArea } from '../Addon';
@@ -69,20 +70,20 @@ export const MobileAppearance = /*#__PURE__*/forwardRef(function MobileAppearanc
         currentIsExpanded = isExpanded;
       }
     }
-    return /*#__PURE__*/React.createElement(WithFlash, {
+    return jsx(WithFlash, {
       animate: maxContentSizeReached
-    }, /*#__PURE__*/React.createElement("div", {
+    }, jsx("div", {
       css: mobileEditor,
       ref: ref
-    }, /*#__PURE__*/React.createElement(ClickArea, {
+    }, jsx(ClickArea, {
       editorView: editorView || undefined,
       minHeight: minHeight,
       persistScrollGutter: persistScrollGutter,
       isExpanded: currentIsExpanded,
       editorDisabled: editorDisabled
-    }, /*#__PURE__*/React.createElement(ContentArea, {
+    }, jsx(ContentArea, {
       featureFlags: featureFlags
-    }, /*#__PURE__*/React.createElement("div", {
+    }, jsx("div", {
       className: "ak-editor-content-area"
     }, children)))));
   }, [children, editorView, persistScrollGutter, editorDisabled, ref, featureFlags, api === null || api === void 0 ? void 0 : (_api$base2 = api.base) === null || _api$base2 === void 0 ? void 0 : _api$base2.sharedState]);