@atlaskit/editor-core 162.0.2 → 164.0.1

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

@@ -1,9 +1,10 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/** @jsx jsx */
 import React from 'react';
+import { css, jsx } from '@emotion/react';
 import Transition from 'react-transition-group/Transition';
-import styled from 'styled-components';
-import { css } from 'styled-components';
 import { N30 } from '@atlaskit/theme/colors';
 import { akEditorSwoopCubicBezier, akEditorDefaultLayoutWidth, akEditorWideLayoutWidth, akEditorBreakoutPadding, akEditorContextPanelWidth, ATLASSIAN_NAVIGATION_HEIGHT } from '@atlaskit/editor-shared-styles';
 import { ContextPanelConsumer } from './context';
@@ -33,35 +34,21 @@ export const shouldPanelBePositionedOverEditor = (editorWidth, panelWidth) => {
   const hasSpaceForWideBreakoutsAndPanel = !contentBreakoutModes.includes(FULLWIDTH_MODE) && contentBreakoutModes.includes(WIDE_MODE) && containerWidth >= panelWidth * 2 + WIDE_EDITOR_WIDTH;
   return editorNotFullWidth && (hasSpaceForPanel || hasSpaceForWideBreakoutsAndPanel);
 };
-/**
- * Only use absolute position for panel when screen size is wide enough
- * to accomodate breakout content and editor is not in wide mode.
- */
-
-const panelSlideStyles = ({
-  positionPanelOverEditor
-}) => {
-  if (positionPanelOverEditor) {
-    return absolutePanelStyles;
-  }
-
-  return;
-};
-
-export const Panel = styled.div`
-  width: ${p => p.visible ? p.panelWidth : 0}px;
+const panelHidden = css`
+  width: 0;
+`;
+export const panel = css`
+  width: ${akEditorContextPanelWidth}px;
   height: 100%;
   transition: width ${ANIM_SPEED_MS}ms ${akEditorSwoopCubicBezier};
   overflow: hidden;
   box-shadow: inset 2px 0 0 0 ${N30};
-
-  ${props => panelSlideStyles(props)};
 `;
-export const Content = styled.div`
+export const content = css`
   transition: width 600ms ${akEditorSwoopCubicBezier};
   box-sizing: border-box;
   padding: 16px 16px 0px;
-  width: ${p => p.visible ? p.panelWidth : 0}px;
+  width: ${akEditorContextPanelWidth}px;
   height: 100%;
   overflow-y: auto;
 `;
@@ -86,7 +73,7 @@ export class SwappableContentArea extends React.PureComponent {
         return;
       }
 
-      return /*#__PURE__*/React.createElement(Transition, {
+      return jsx(Transition, {
         timeout: this.state.mounted ? ANIM_SPEED_MS : 0,
         in: !!pluginContent,
         mountOnEnter: true,
@@ -104,7 +91,7 @@ export class SwappableContentArea extends React.PureComponent {
         return;
       }
 
-      return /*#__PURE__*/React.createElement(Transition, {
+      return jsx(Transition, {
         timeout: this.state.mounted ? ANIM_SPEED_MS : 0,
         in: isVisible,
         mountOnEnter: true,
@@ -143,7 +130,7 @@ export class SwappableContentArea extends React.PureComponent {
     const width = akEditorContextPanelWidth;
     const userVisible = !!this.props.visible;
     const visible = userVisible || !!this.state.currentPluginContent;
-    return /*#__PURE__*/React.createElement(ContextPanelConsumer, null, ({
+    return jsx(ContextPanelConsumer, null, ({
       broadcastWidth,
       broadcastPosition,
       positionedOverEditor
@@ -151,16 +138,19 @@ export class SwappableContentArea extends React.PureComponent {
       const newPosition = editorWidth ? shouldPanelBePositionedOverEditor(editorWidth, width) : false;
       broadcastWidth(visible ? width : 0);
       (newPosition && visible) !== positionedOverEditor && broadcastPosition(newPosition && visible);
-      return /*#__PURE__*/React.createElement(Panel, {
-        panelWidth: width,
-        visible: visible,
-        positionPanelOverEditor: newPosition,
+      return jsx("div", {
+        css: [panel, !visible && panelHidden,
+        /**
+         * Only use absolute position for panel when screen size is wide enough
+         * to accommodate breakout content and editor is not in wide mode.
+         */
+        newPosition && absolutePanelStyles],
         "data-testid": "context-panel-panel",
         "aria-labelledby": "context-panel-title",
         role: "dialog"
-      }, /*#__PURE__*/React.createElement(Content, {
-        panelWidth: width,
-        visible: visible
+      }, jsx("div", {
+        "data-testid": "context-panel-content",
+        css: [content, !visible && panelHidden]
       }, this.showPluginContent() || this.showProvidedContent(userVisible)));
     });
   }
@@ -168,19 +158,19 @@ export class SwappableContentArea extends React.PureComponent {
 }
 export default class ContextPanel extends React.Component {
   render() {
-    return /*#__PURE__*/React.createElement(WithEditorActions, {
+    return jsx(WithEditorActions, {
       render: actions => {
         const eventDispatcher = actions._privateGetEventDispatcher();
 
         const editorView = actions._privateGetEditorView();
 
         if (!eventDispatcher) {
-          return /*#__PURE__*/React.createElement(SwappableContentArea, _extends({
+          return jsx(SwappableContentArea, _extends({
             editorView: editorView
           }, this.props));
         }
 
-        return /*#__PURE__*/React.createElement(WithPluginState, {
+        return jsx(WithPluginState, {
           eventDispatcher: eventDispatcher,
           plugins: {
             contextPanel: contextPanelPluginKey,
@@ -198,7 +188,7 @@ export default class ContextPanel extends React.Component {
             const editorWidth = { ...widthState,
               contentBreakoutModes: editorView ? getChildBreakoutModes(editorView.state.doc, editorView.state.schema) : []
             };
-            return /*#__PURE__*/React.createElement(SwappableContentArea, _extends({}, this.props, {
+            return jsx(SwappableContentArea, _extends({}, this.props, {
               editorView: editorView,
               pluginContent: firstContent,
               editorWidth: editorWidth

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

@@ -1,6 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React, { PureComponent } from 'react';
-import styled from 'styled-components'; // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
+
+/** @jsx jsx */
+import { PureComponent } from 'react';
+import { css, jsx } from '@emotion/react'; // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 
 import DropList from '@atlaskit/droplist'; // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 
@@ -9,7 +11,7 @@ import Tooltip from '@atlaskit/tooltip';
 import { Popup } from '@atlaskit/editor-common/ui';
 import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
 import withOuterListeners from '../with-outer-listeners';
-const Wrapper = styled.div`
+const wrapper = css`
   /* tooltip in ToolbarButton is display:block */
   & > div > div {
     display: flex;
@@ -20,11 +22,15 @@ const DropListWithOutsideListeners = withOuterListeners(DropList);
  * Hack for item to imitate old dropdown-menu selected styles
  */
 
-const ItemWrapper = styled.div`
-  ${props => props.isSelected ? '&& > span, && > span:hover { background: #6c798f; color: #fff; }' : ''};
+const itemWrapper = css`
+  && > span,
+  && > span:hover {
+    background: #6c798f;
+    color: #fff;
+  }
 `;
-const ItemContentWrapper = styled.span`
-  ${props => props.hasElemBefore ? 'margin-left: 8px;' : ''};
+const itemContentWrapper = css`
+  margin-left: 8px;
 `;
 /**
  * Wrapper around @atlaskit/droplist which uses Popup and Portal to render
@@ -78,15 +84,15 @@ export default class DropdownMenuWrapper extends PureComponent {
     // If neither are present, don't wrap in an Item.
 
     if (!item.onClick && !item.value && !item.value.name) {
-      return /*#__PURE__*/React.createElement("span", {
+      return jsx("span", {
         key: String(item.content)
       }, item.content);
     }
 
-    const dropListItem = /*#__PURE__*/React.createElement(ItemWrapper, {
-      key: item.key || item.content,
-      isSelected: item.isActive
-    }, /*#__PURE__*/React.createElement(Item, {
+    const dropListItem = jsx("div", {
+      css: item.isActive ? itemWrapper : '',
+      key: item.key || item.content
+    }, jsx(Item, {
       role: shouldUseDefaultRole ? 'button' : 'menuitem',
       elemBefore: item.elemBefore,
       elemAfter: item.elemAfter,
@@ -103,12 +109,12 @@ export default class DropdownMenuWrapper extends PureComponent {
       className: item.className,
       "aria-label": item.label || String(item.content),
       "aria-pressed": shouldUseDefaultRole ? item.isActive : undefined
-    }, /*#__PURE__*/React.createElement(ItemContentWrapper, {
-      hasElemBefore: !!item.elemBefore
+    }, jsx("span", {
+      css: !!item.elemBefore ? itemContentWrapper : ''
     }, item.content)));
 
     if (item.tooltipDescription) {
-      return /*#__PURE__*/React.createElement(Tooltip, {
+      return jsx(Tooltip, {
         key: item.key || item.content,
         content: item.tooltipDescription,
         position: item.tooltipPosition
@@ -135,7 +141,7 @@ export default class DropdownMenuWrapper extends PureComponent {
       zIndex,
       shouldUseDefaultRole
     } = this.props;
-    return /*#__PURE__*/React.createElement(Popup, {
+    return jsx(Popup, {
       target: isOpen ? target : undefined,
       mountTo: mountTo,
       boundariesElement: boundariesElement,
@@ -145,7 +151,7 @@ export default class DropdownMenuWrapper extends PureComponent {
       fitWidth: fitWidth,
       zIndex: zIndex || akEditorFloatingPanelZIndex,
       offset: offset
-    }, /*#__PURE__*/React.createElement(DropListWithOutsideListeners, {
+    }, jsx(DropListWithOutsideListeners, {
       isOpen: true,
       appearance: "tall",
       position: popupPlacement.join(' '),
@@ -154,12 +160,12 @@ export default class DropdownMenuWrapper extends PureComponent {
       isTriggerNotTabbable: true,
       handleClickOutside: this.handleClose,
       handleEscapeKeydown: this.handleClose
-    }, /*#__PURE__*/React.createElement("div", {
+    }, jsx("div", {
       style: {
         height: 0,
         minWidth: fitWidth || 0
       }
-    }), items.map((group, index) => /*#__PURE__*/React.createElement(ItemGroup, {
+    }), items.map((group, index) => jsx(ItemGroup, {
       key: index,
       role: shouldUseDefaultRole ? 'group' : 'menu'
     }, group.items.map(item => this.renderItem(item))))));
@@ -170,7 +176,9 @@ export default class DropdownMenuWrapper extends PureComponent {
       children,
       isOpen
     } = this.props;
-    return /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement("div", {
+    return jsx("div", {
+      css: wrapper
+    }, jsx("div", {
       ref: this.handleRef
     }, children), isOpen ? this.renderDropdownMenu() : null);
   }

package/dist/es2019/ui/ElementBrowser/InsertMenu.js

@@ -1,5 +1,8 @@
+import _extends from "@babel/runtime/helpers/extends";
+
+/** @jsx jsx */
 import React, { useState, useCallback } from 'react';
-import styled, { ThemeProvider } from 'styled-components';
+import { css, jsx } from '@emotion/react';
 // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 import Item, { itemThemeNamespace } from '@atlaskit/item'; // AFP-2532 TODO: Fix automatic suppressions below
 // eslint-disable-next-line @atlassian/tangerine/import/entry-points
@@ -62,10 +65,10 @@ const InsertMenu = ({
   }, [quickInsertDropdownItems]);
   const render = useCallback(({
     quickInsertState
-  }) => /*#__PURE__*/React.createElement(ElementBrowserWrapper, {
+  }) => jsx(ElementBrowserWrapper, {
     handleClickOutside: toggleVisiblity,
     handleEscapeKeydown: toggleVisiblity
-  }, /*#__PURE__*/React.createElement(ElementBrowser, {
+  }, jsx(ElementBrowser, {
     mode: "inline",
     getItems: getItems(quickInsertState),
     emptyStateHandler: quickInsertState === null || quickInsertState === void 0 ? void 0 : quickInsertState.emptyStateHandler,
@@ -75,14 +78,14 @@ const InsertMenu = ({
     ,
     key: quickInsertDropdownItems.length
   })), [getItems, onInsertItem, quickInsertDropdownItems.length, toggleVisiblity]);
-  return /*#__PURE__*/React.createElement(InsertMenuWrapper, {
-    itemCount: itemCount
-  }, /*#__PURE__*/React.createElement(WithPluginState, {
+  return jsx("div", {
+    css: theme => insertMenuWrapper(theme, itemCount)
+  }, jsx(WithPluginState, {
     plugins: {
       quickInsertState: pluginKey
     },
     render: render
-  }), itemCount > 0 && viewMoreItem && /*#__PURE__*/React.createElement(ViewMore, {
+  }), itemCount > 0 && viewMoreItem && jsx(ViewMore, {
     item: viewMoreItem
   }));
 };
@@ -100,15 +103,16 @@ const ViewMore = ({
       item.action();
     }
   }, [item]);
-  return /*#__PURE__*/React.createElement(ThemeProvider, {
-    theme: viewMoreItemTheme
-  }, /*#__PURE__*/React.createElement(Item, {
+  return jsx(Item, {
     onClick: item.action,
-    elemBefore: /*#__PURE__*/React.createElement(ItemBefore, null, item.icon()),
+    elemBefore: jsx("div", {
+      css: itemBefore
+    }, item.icon()),
     "aria-describedby": item.title,
     "data-testid": "view-more-elements-item",
-    onKeyPress: onKeyPress
-  }, item.title));
+    onKeyPress: onKeyPress,
+    theme: viewMoreItemTheme
+  }, item.title);
 };
 
 const getSvgIconForItem = ({
@@ -124,7 +128,7 @@ const getSvgIconForItem = ({
     date: IconDate,
     status: IconStatus
   }[name];
-  return Icon ? /*#__PURE__*/React.createElement(Icon, {
+  return Icon ? jsx(Icon, {
     label: ""
   }) : undefined;
 };
@@ -142,19 +146,22 @@ const getInsertMenuHeight = ({
   return 560; // For showing 6 Elements.
 };
 
-const InsertMenuWrapper = styled.div`
+const insertMenuWrapper = (theme, itemCount) => css`
   display: flex;
   flex-direction: column;
   width: 320px;
-  height: ${getInsertMenuHeight}px;
+  height: ${getInsertMenuHeight({
+  itemCount
+})}px;
   background-color: ${themed({
   light: N0,
   dark: DN50
-})()};
+})(theme)};
   border-radius: ${borderRadius()}px;
   box-shadow: 0 0 0 1px ${N30A}, 0 2px 1px ${N30A}, 0 0 20px -6px ${N60A};
 `;
-const ItemBefore = styled.div`
+
+const itemBefore = css`
   width: 40px;
   height: 40px;
   box-sizing: border-box;
@@ -175,11 +182,22 @@ const viewMoreItemTheme = {
     height: HEIGHT
   }
 };
-const FlexWrapper = styled.div`
+const flexWrapperStyles = css`
   display: flex;
   flex: 1;
   box-sizing: border-box;
   overflow: hidden;
 `;
+
+const FlexWrapper = props => {
+  const {
+    children,
+    ...divProps
+  } = props;
+  return jsx("div", _extends({
+    css: flexWrapperStyles
+  }, divProps), children);
+};
+
 const ElementBrowserWrapper = withOuterListeners(FlexWrapper);
 export default InsertMenu;

package/dist/es2019/ui/ElementBrowser/ModalElementBrowser.js

@@ -1,5 +1,6 @@
+/** @jsx jsx */
 import React, { useState, useCallback } from 'react';
-import styled from 'styled-components';
+import { css, jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import { DN50, N0 } from '@atlaskit/theme/colors';
 import { themed } from '@atlaskit/theme/components';
@@ -11,6 +12,34 @@ import ElementBrowser from './components/ElementBrowserLoader';
 import { getCategories } from './categories';
 import { MODAL_WRAPPER_PADDING } from './constants';
 import { messages } from './messages';
+const actions = css`
+  display: inline-flex;
+  margin: 0 -4px;
+`;
+const actionItem = css`
+  flex: 1 0 auto;
+  margin: 0 4px;
+`;
+const wrapper = css`
+  display: flex;
+  flex: 1 1 auto;
+  box-sizing: border-box;
+  padding: ${MODAL_WRAPPER_PADDING}px ${MODAL_WRAPPER_PADDING}px 0 10px;
+  overflow: hidden;
+  background-color: ${themed({
+  light: N0,
+  dark: DN50
+})()};
+  border-radius: ${borderRadius()}px;
+`;
+const modalFooter = css`
+  display: flex;
+  padding: ${MODAL_WRAPPER_PADDING}px;
+
+  position: relative;
+  align-items: center;
+  justify-content: space-between;
+`;
 
 const ModalElementBrowser = props => {
   const [selectedItem, setSelectedItem] = useState();
@@ -24,7 +53,7 @@ const ModalElementBrowser = props => {
   const onInsertItem = useCallback(item => {
     props.onInsertItem(item);
   }, [props]);
-  const RenderFooter = useCallback(() => /*#__PURE__*/React.createElement(Footer, {
+  const RenderFooter = useCallback(() => jsx(Footer, {
     onInsert: () => onInsertItem(selectedItem),
     beforeElement: helpUrl ? HelpLink(helpUrl, intl.formatMessage(messages.help)) : undefined
   }), [onInsertItem, selectedItem, helpUrl, intl]); // Since Modal uses stackIndex it's shouldCloseOnEscapePress prop doesn't work.
@@ -34,7 +63,9 @@ const ModalElementBrowser = props => {
       props.onClose();
     }
   }, [props]);
-  const RenderBody = useCallback(() => /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(ElementBrowser, {
+  const RenderBody = useCallback(() => jsx("div", {
+    css: wrapper
+  }, jsx(ElementBrowser, {
     categories: getCategories(props.intl),
     getItems: props.getItems,
     showSearch: true,
@@ -44,11 +75,11 @@ const ModalElementBrowser = props => {
     onInsertItem: onInsertItem,
     emptyStateHandler: props.emptyStateHandler
   })), [props.intl, props.getItems, onSelectItem, onInsertItem, props.emptyStateHandler]);
-  return /*#__PURE__*/React.createElement("div", {
+  return jsx("div", {
     "data-editor-popup": true,
     onClick: onModalClick,
     onKeyDown: onKeyDown
-  }, /*#__PURE__*/React.createElement(ModalTransition, null, props.isOpen && /*#__PURE__*/React.createElement(Modal, {
+  }, jsx(ModalTransition, null, props.isOpen && jsx(Modal, {
     testId: "element-browser-modal-dialog",
     stackIndex: 0,
     key: "element-browser-modal",
@@ -59,7 +90,7 @@ const ModalElementBrowser = props => {
     // packages/design-system/modal-dialog/src/components/Content.tsx Line 287
     ,
     shouldCloseOnEscapePress: false
-  }, /*#__PURE__*/React.createElement(RenderBody, null), /*#__PURE__*/React.createElement(RenderFooter, null))));
+  }, jsx(RenderBody, null), jsx(RenderFooter, null))));
 };
 
 ModalElementBrowser.displayName = 'ModalElementBrowser'; // Prevent ModalElementBrowser click propagation through to the editor.
@@ -73,19 +104,27 @@ const Footer = ({
   const {
     onClose
   } = useModal();
-  return /*#__PURE__*/React.createElement(ModalFooter, null, beforeElement ? beforeElement : /*#__PURE__*/React.createElement("span", null), /*#__PURE__*/React.createElement(Actions, null, /*#__PURE__*/React.createElement(ActionItem, null, /*#__PURE__*/React.createElement(Button, {
+  return jsx("div", {
+    css: modalFooter
+  }, beforeElement ? beforeElement : jsx("span", null), jsx("div", {
+    css: actions
+  }, jsx("div", {
+    css: actionItem
+  }, jsx(Button, {
     appearance: "primary",
     onClick: onInsert,
     testId: "ModalElementBrowser__insert-button"
-  }, "Insert")), /*#__PURE__*/React.createElement(ActionItem, null, /*#__PURE__*/React.createElement(Button, {
+  }, "Insert")), jsx("div", {
+    css: actionItem
+  }, jsx(Button, {
     appearance: "subtle",
     onClick: onClose,
     testId: "ModalElementBrowser__close-button"
   }, "Close"))));
 };
 
-const HelpLink = (url, helpText) => /*#__PURE__*/React.createElement(Button, {
-  iconBefore: /*#__PURE__*/React.createElement(QuestionCircleIcon, {
+const HelpLink = (url, helpText) => jsx(Button, {
+  iconBefore: jsx(QuestionCircleIcon, {
     label: "help",
     size: "medium"
   }),
@@ -95,32 +134,4 @@ const HelpLink = (url, helpText) => /*#__PURE__*/React.createElement(Button, {
   testId: "ModalElementBrowser__help-button"
 }, helpText);
 
-const Actions = styled.div`
-  display: inline-flex;
-  margin: 0 -4px;
-`;
-const ActionItem = styled.div`
-  flex: 1 0 auto;
-  margin: 0 4px;
-`;
-const Wrapper = styled.div`
-  display: flex;
-  flex: 1 1 auto;
-  box-sizing: border-box;
-  padding: ${MODAL_WRAPPER_PADDING}px ${MODAL_WRAPPER_PADDING}px 0 10px;
-  overflow: hidden;
-  background-color: ${themed({
-  light: N0,
-  dark: DN50
-})()};
-  border-radius: ${borderRadius()}px;
-`;
-const ModalFooter = styled.div`
-  display: flex;
-  padding: ${MODAL_WRAPPER_PADDING}px;
-
-  position: relative;
-  align-items: center;
-  justify-content: space-between;
-`;
 export default injectIntl(ModalElementBrowser);

package/dist/es2019/ui/ElementBrowser/components/CategoryList.js

@@ -1,6 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React, { memo, useCallback } from 'react';
-import styled from 'styled-components';
+
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
+import React, { memo, useCallback, Fragment } from 'react';
 import { N800, B400, B50 } from '@atlaskit/theme/colors';
 import Button from '@atlaskit/button/custom-theme-button';
 import { withAnalyticsContext } from '@atlaskit/analytics-next';
@@ -13,7 +15,7 @@ function CategoryList({
   ...props
 }) {
   const [focusedCategoryIndex, setFocusedCategoryIndex] = React.useState(null);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, categories.map((category, index) => /*#__PURE__*/React.createElement(CategoryListItem, _extends({
+  return jsx(Fragment, null, categories.map((category, index) => jsx(CategoryListItem, _extends({
     key: category.title,
     index: index,
     category: category,
@@ -77,7 +79,9 @@ function CategoryListItem({
       ...rest
     };
   }, [category.name, selectedCategory]);
-  return /*#__PURE__*/React.createElement(ButtonWrapper, null, /*#__PURE__*/React.createElement(Button, {
+  return jsx("div", {
+    css: buttonWrapper
+  }, jsx(Button, {
     appearance: "subtle",
     isSelected: selectedCategory === category.name,
     onClick: onClick,
@@ -88,7 +92,7 @@ function CategoryListItem({
   }, category.title));
 }
 
-const ButtonWrapper = styled.div`
+const buttonWrapper = css`
   height: ${GRID_SIZE * 4}px;
   margin: 4px 4px 4px 0;
 

package/dist/es2019/ui/ElementBrowser/components/ElementBrowserLoader.js

@@ -1,8 +1,9 @@
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
 import React from 'react';
 import Loadable from 'react-loadable';
-import styled from 'styled-components';
 import Spinner from '@atlaskit/spinner';
-const SpinnerContainer = styled.div`
+const spinnerContainer = css`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -13,7 +14,9 @@ const ElementBrowserLoader = Loadable({
   loader: () => import(
   /* webpackChunkName: "@atlaskit-internal_editor-element-browser" */
   '../ElementBrowser').then(module => module.default),
-  loading: () => /*#__PURE__*/React.createElement(SpinnerContainer, null, /*#__PURE__*/React.createElement(Spinner, {
+  loading: () => jsx("div", {
+    css: spinnerContainer
+  }, jsx(Spinner, {
     size: "medium"
   }))
 });