@atlaskit/editor-core 162.0.2 → 164.0.1

package/dist/es2019/plugins/type-ahead/ui/TypeAheadPopup.js

@@ -1,12 +1,14 @@
+/** @jsx jsx */
 import React, { useEffect, useMemo } from 'react';
-import styled from 'styled-components';
+import { css, jsx } from '@emotion/react';
 import { akEditorFloatingDialogZIndex } from '@atlaskit/editor-shared-styles';
 import { Popup } from '@atlaskit/editor-common/ui';
 import { borderRadius, gridSize } from '@atlaskit/theme/constants';
 import { N0, N60A, N50A } from '@atlaskit/theme/colors';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '../../analytics';
+import { TYPE_AHEAD_POPUP_CONTENT_CLASS } from '../constants';
 import { TypeAheadList } from './TypeAheadList';
-const TypeAheadContent = styled.div`
+const typeAheadContent = css`
   background: ${N0};
   border-radius: ${borderRadius()}px;
   box-shadow: 0 0 1px ${N60A}, 0 4px 8px -2px ${N50A};
@@ -95,7 +97,7 @@ export const TypeAheadPopup = /*#__PURE__*/React.memo(props => {
   // we need to send the event again
   // eslint-disable-next-line react-hooks/exhaustive-deps
   triggerHandler]);
-  return /*#__PURE__*/React.createElement(Popup, {
+  return jsx(Popup, {
     zIndex: akEditorFloatingDialogZIndex,
     target: anchorElement,
     mountTo: popupsMountPoint,
@@ -104,12 +106,14 @@ export const TypeAheadPopup = /*#__PURE__*/React.memo(props => {
     fitHeight: 300,
     fitWidth: 340,
     offset: OFFSET
-  }, /*#__PURE__*/React.createElement(TypeAheadContent, {
-    className: "fabric-editor-typeahead"
-  }, /*#__PURE__*/React.createElement(Highlight, {
+  }, jsx("div", {
+    css: typeAheadContent,
+    tabIndex: 0,
+    className: TYPE_AHEAD_POPUP_CONTENT_CLASS
+  }, jsx(Highlight, {
     state: editorView.state,
     triggerHandler: triggerHandler
-  }), /*#__PURE__*/React.createElement(TypeAheadList, {
+  }), jsx(TypeAheadList, {
     items: items,
     selectedIndex: selectedIndex,
     onItemHover: setSelectedItem,

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

@@ -1,9 +1,11 @@
-import React, { PureComponent } from 'react';
+/** @jsx jsx */
+import { PureComponent } from 'react';
+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';
 import { undo as undoKeymap, redo as redoKeymap, ToolTipContent } from '../../../../keymaps';
-import { ButtonGroup, Separator } from '../../../../ui/styles';
+import { buttonGroupStyle, separatorStyles } from '../../../../ui/styles';
 import ToolbarButton, { TOOLBAR_BUTTON } from '../../../../ui/ToolbarButton';
 import { messages } from '../../messages';
 import { createTypeAheadTools } from '../../../type-ahead/api';
@@ -60,37 +62,39 @@ export class ToolbarUndoRedo extends PureComponent {
       canUndo,
       canRedo
     } = historyState;
-    return /*#__PURE__*/React.createElement(ButtonGroup, {
-      width: isReducedSpacing ? 'small' : 'large'
-    }, /*#__PURE__*/React.createElement(ToolbarButton, {
+    return jsx("span", {
+      css: buttonGroupStyle
+    }, jsx(ToolbarButton, {
       buttonId: TOOLBAR_BUTTON.UNDO,
       spacing: isReducedSpacing ? 'none' : 'default',
       onClick: handleUndo,
       disabled: !canUndo || disabled,
       "aria-label": labelUndo,
-      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": labelRedo
-    }), /*#__PURE__*/React.createElement(Separator, null));
+    }), jsx("span", {
+      css: separatorStyles
+    }));
   }
 
 }

package/dist/es2019/plugins/unsupported-content/styles.js

@@ -1,4 +1,4 @@
-import { css } from 'styled-components';
+import { css } from '@emotion/react';
 import { SelectionStyle, getSelectionStyles, akEditorDeleteBackgroundWithOpacity, akEditorSelectedBorderSize, akEditorDeleteBorder, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
 export const UnsupportedSharedCssClassName = {
   BLOCK_CONTAINER: 'unsupportedBlockView-content-wrap',

package/dist/es2019/profiler/render-count.js

@@ -1,6 +1,6 @@
 import React, { useRef } from 'react';
 import uuid from 'uuid';
-import { useComponentRenderTracking } from '../utils/react-hooks/use-component-renderer-tracking';
+import { useComponentRenderTracking } from '@atlaskit/editor-common/utils';
 import { RenderCountProfiler as RenderCountProfilerClass } from '@atlaskit/editor-common/utils';
 export let ProfiledComponentIds;
 

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

@@ -1,12 +1,13 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/** @jsx jsx */
 import React from 'react';
-import styled from 'styled-components';
+import { css, jsx } from '@emotion/react';
 import { clickAreaClickHandler } from '../click-area-helper';
-const ClickWrapper = styled.div`
+const clickWrapper = css`
   flex-grow: 1;
   height: 100%;
 `;
-ClickWrapper.displayName = 'ClickWrapper';
 export default class ClickAreaBlock extends React.Component {
   constructor(...args) {
     super(...args);
@@ -25,7 +26,9 @@ export default class ClickAreaBlock extends React.Component {
   }
 
   render() {
-    return /*#__PURE__*/React.createElement(ClickWrapper, {
+    return jsx("div", {
+      "data-testid": "click-wrapper",
+      css: clickWrapper,
       onClick: this.handleClick
     }, this.props.children);
   }

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

@@ -1,11 +1,12 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/** @jsx jsx */
 import React from 'react';
-import styled from 'styled-components';
+import { css, jsx } from '@emotion/react';
 import { createParagraphAtEnd } from '../../../commands';
-const ClickArea = styled.div`
+const clickArea = css`
   flex-grow: 1;
 `;
-ClickArea.displayName = 'ClickArea';
 export default class ClickAreaInline extends React.Component {
   constructor(...args) {
     super(...args);
@@ -25,7 +26,8 @@ export default class ClickAreaInline extends React.Component {
   }
 
   render() {
-    return /*#__PURE__*/React.createElement(ClickArea, {
+    return jsx("div", {
+      css: clickArea,
       onClick: this.handleClick
     });
   }

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

@@ -1,6 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/** @jsx jsx */
 import React from 'react';
-import styled from 'styled-components';
+import { css, jsx } from '@emotion/react';
 import { clickAreaClickHandler } from '../click-area-helper';
 /**
  * Fills the visible viewport height so that it can filter
@@ -8,11 +10,13 @@ import { clickAreaClickHandler } from '../click-area-helper';
  * doesn't exceed the viewport, or whether it overflows it).
  */
 
-const ClickWrapper = styled.div`
+const clickWrapper = ({
+  isExpanded,
+  minHeight
+}) => css`
   height: 100%;
-  ${props => props.isExpanded && props.minHeight && `min-height: ${props.minHeight}px`}
+  ${isExpanded && minHeight ? `min-height: ${minHeight}px` : ''};
 `;
-ClickWrapper.displayName = 'ClickWrapper';
 
 /**
  * Click Area is responsible for improving UX by ensuring the user
@@ -58,13 +62,14 @@ export default class ClickAreaMobile extends React.Component {
   }
 
   render() {
-    return /*#__PURE__*/React.createElement(ClickWrapper, {
+    return jsx("div", {
+      css: clickWrapper({
+        isExpanded: this.props.isExpanded,
+        minHeight: this.props.minHeight
+      }),
       className: "editor-click-wrapper",
-      minHeight: this.props.minHeight,
-      persistScrollGutter: this.props.persistScrollGutter,
       onClick: this.handleClick,
-      innerRef: this.clickElementRef,
-      isExpanded: this.props.isExpanded
+      ref: this.clickElementRef
     }, this.props.children);
   }
 

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

@@ -1,6 +1,9 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/** @jsx jsx */
 import React from 'react';
-import { Dropdown } from './styles';
+import { jsx } from '@emotion/react';
+import { dropdown } from './styles';
 export default class DropdownWrapper extends React.Component {
   constructor(...args) {
     super(...args);
@@ -28,7 +31,9 @@ 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(Dropdown, null, children);
+    return jsx("div", {
+      css: dropdown
+    }, children);
   }
 
 }

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

@@ -1,7 +1,7 @@
-import styled from 'styled-components';
+import { css } from '@emotion/react';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { N60A } from '@atlaskit/theme/colors';
-export const Dropdown = styled.div`
+export const dropdown = css`
   display: flex;
   flex-direction: column;
   background: white;

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

@@ -1,11 +1,13 @@
-import React from 'react';
-import { DropdownItem } from './styles';
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { dropdownItem } from './styles';
 
-const DropdownItemWrapper = props => /*#__PURE__*/React.createElement(DropdownItem, {
+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/Addon/DropdownItem/styles.js

@@ -1,6 +1,6 @@
-import styled from 'styled-components';
+import { css } from '@emotion/react';
 import { N800, N20 } from '@atlaskit/theme/colors';
-export const DropdownItem = styled.div`
+export const dropdownItem = css`
   display: flex;
   align-items: center;
   cursor: pointer;

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

@@ -1,10 +1,11 @@
-import React from 'react';
+/** @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';
 import AlignmentButton from './AlignmentButton';
 import { alignmentMessages } from './messages';
-import { AlignmentWrapper } from './styles';
+import { alignmentWrapper } from './styles';
 import { alignLeft, alignRight } from '../../keymaps';
 const alignmentOptions = [{
   title: alignmentMessages.alignLeft,
@@ -27,11 +28,9 @@ class Alignment extends PureComponent {
       className,
       intl
     } = this.props;
-    return /*#__PURE__*/React.createElement(AlignmentWrapper, {
-      className: className,
-      style: {
-        maxWidth: 3 * 32
-      }
+    return jsx("div", {
+      css: alignmentWrapper,
+      className: className
     }, alignmentOptions.map(alignment => {
       const {
         value,
@@ -39,8 +38,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/Alignment/styles.js

@@ -1,7 +1,8 @@
-import styled from 'styled-components';
+import { css } from '@emotion/react';
 import { gridSize } from '@atlaskit/theme/constants';
-export const AlignmentWrapper = styled.div`
+export const alignmentWrapper = css`
   padding: 0 ${gridSize()}px;
   display: flex;
   flex-wrap: wrap;
+  max-width: ${3 * 32}px;
 `;

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

@@ -1,19 +1,23 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/** @jsx jsx */
 import React from 'react';
-import styled from 'styled-components';
+import { css, jsx } from '@emotion/react';
 import PluginSlot from '../PluginSlot';
 import WithPluginState from '../WithPluginState';
-import ContentStyles from '../ContentStyles';
+import { createEditorContentStyle } from '../ContentStyles';
 import { pluginKey as maxContentSizePluginKey } from '../../plugins/max-content-size';
 import { scrollbarStyles } from '../styles';
 import WithFlash from '../WithFlash';
-const ChromelessEditor = styled.div`
+const chromelessEditor = css`
   line-height: 20px;
   height: auto;
   min-height: 30px;
-  ${props => props.maxHeight ? 'max-height: ' + props.maxHeight + 'px;' : ''} overflow-x: hidden;
+
+  overflow-x: hidden;
   overflow-y: auto;
-  ${scrollbarStyles} max-width: inherit;
+  ${scrollbarStyles};
+  max-width: inherit;
   box-sizing: border-box;
   word-wrap: break-word;
 
@@ -24,8 +28,7 @@ const ChromelessEditor = styled.div`
     margin: 0;
   }
 `;
-ChromelessEditor.displayName = 'ChromelessEditor';
-const ContentArea = styled(ContentStyles)``;
+const ContentArea = createEditorContentStyle();
 ContentArea.displayName = 'ContentArea';
 export default class Editor extends React.Component {
   constructor(...args) {
@@ -54,12 +57,14 @@ export default class Editor extends React.Component {
         dispatchAnalyticsEvent
       } = 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(ChromelessEditor, {
-        maxHeight: maxHeight,
-        innerRef: ref => this.containerElement = ref
-      }, /*#__PURE__*/React.createElement(ContentArea, null, customContentComponents, /*#__PURE__*/React.createElement(PluginSlot, {
+      }, jsx("div", {
+        css: [chromelessEditor, maxHeight && css`
+                max-height: ${maxHeight}px;
+              `],
+        ref: ref => this.containerElement = ref
+      }, jsx(ContentArea, null, customContentComponents, jsx(PluginSlot, {
         editorView: editorView,
         editorActions: editorActions,
         eventDispatcher: eventDispatcher,
@@ -77,7 +82,7 @@ export default class Editor extends React.Component {
   }
 
   render() {
-    return /*#__PURE__*/React.createElement(WithPluginState, {
+    return jsx(WithPluginState, {
       plugins: {
         maxContentSize: maxContentSizePluginKey
       },

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

@@ -1,6 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/** @jsx jsx */
 import React from 'react';
-import styled from 'styled-components';
+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';
@@ -8,11 +10,10 @@ import { N40 } from '@atlaskit/theme/colors';
 import Toolbar from '../../Toolbar';
 import PluginSlot from '../../PluginSlot';
 import WithPluginState from '../../WithPluginState';
-import ContentStyles from '../../ContentStyles';
 import { pluginKey as maxContentSizePluginKey } from '../../../plugins/max-content-size';
 import { stateKey as mediaPluginKey } from '../../../plugins/media/pm-plugins/plugin-key';
 import { ClickAreaBlock } from '../../Addon';
-import { deprecatedTableCommentEditorStyles } from '../../../plugins/table/ui/common-styles';
+import { tableCommentEditorStyles } from '../../../plugins/table/ui/common-styles';
 import WithFlash from '../../WithFlash';
 import { WidthConsumer } from '@atlaskit/editor-common/ui';
 import { akEditorMobileBreakoutPoint } from '@atlaskit/editor-shared-styles';
@@ -21,10 +22,11 @@ import { GRID_GUTTER } from '../../../plugins/grid';
 import classnames from 'classnames';
 import { injectIntl } from 'react-intl-next';
 import messages from '../../../messages';
-import { TableControlsPadding, MainToolbar, MainToolbarCustomComponentsSlot } from './Toolbar';
+import { TableControlsPadding, MainToolbar, mainToolbarCustomComponentsSlotStyle } from './Toolbar';
+import { createEditorContentStyle } from '../../ContentStyles';
 const CommentEditorMargin = 14;
 const CommentEditorSmallerMargin = 8;
-const CommentEditor = styled.div`
+const commentEditorStyle = css`
   display: flex;
   flex-direction: column;
 
@@ -45,13 +47,11 @@ const CommentEditor = styled.div`
   max-width: inherit;
   word-wrap: break-word;
 `;
-CommentEditor.displayName = 'CommentEditor';
-const ContentArea = styled(ContentStyles)`
+const ContentArea = createEditorContentStyle(css`
   flex-grow: 1;
   overflow-x: hidden;
   overflow-y: auto;
   line-height: 24px;
-  ${props => props.maxHeight ? 'max-height: ' + props.maxHeight + 'px;' : ''};
 
   /** Hack for Bitbucket to ensure entire editorView gets drop event; see ED-3294 **/
   /** Hack for tables controlls. Otherwise marging collapse and controlls are misplaced. **/
@@ -67,17 +67,16 @@ const ContentArea = styled(ContentStyles)`
 
   padding: ${TableControlsPadding}px;
 
-  ${deprecatedTableCommentEditorStyles};
-`;
+  ${tableCommentEditorStyles};
+`);
 ContentArea.displayName = 'ContentArea';
-const SecondaryToolbar = styled.div`
+const secondaryToolbarStyle = css`
   box-sizing: border-box;
   justify-content: flex-end;
   align-items: center;
   display: flex;
   padding: 12px 1px;
 `;
-SecondaryToolbar.displayName = 'SecondaryToolbar';
 
 class Editor extends React.Component {
   constructor(...args) {
@@ -127,14 +126,14 @@ class Editor extends React.Component {
       } = this.props;
       const maxContentSizeReached = Boolean(maxContentSize === null || maxContentSize === void 0 ? void 0 : maxContentSize.maxContentSizeReached);
       const showSecondaryToolbar = !!onSave || !!onCancel || !!customSecondaryToolbarComponents;
-      return /*#__PURE__*/React.createElement(WithFlash, {
+      return jsx(WithFlash, {
         animate: maxContentSizeReached
-      }, /*#__PURE__*/React.createElement(CommentEditor, {
-        maxHeight: maxHeight,
+      }, jsx("div", {
+        css: commentEditorStyle,
         className: "akEditor"
-      }, /*#__PURE__*/React.createElement(MainToolbar, {
+      }, jsx(MainToolbar, {
         useStickyToolbar: useStickyToolbar
-      }, /*#__PURE__*/React.createElement(Toolbar, {
+      }, jsx(Toolbar, {
         editorView: editorView,
         editorActions: editorActions,
         eventDispatcher: eventDispatcher,
@@ -147,18 +146,22 @@ class Editor extends React.Component {
         disabled: !!disabled,
         dispatchAnalyticsEvent: dispatchAnalyticsEvent,
         containerElement: this.containerElement
-      }), /*#__PURE__*/React.createElement(MainToolbarCustomComponentsSlot, null, customPrimaryToolbarComponents)), /*#__PURE__*/React.createElement(ClickAreaBlock, {
+      }), jsx("div", {
+        css: mainToolbarCustomComponentsSlotStyle
+      }, customPrimaryToolbarComponents)), jsx(ClickAreaBlock, {
         editorView: editorView
-      }, /*#__PURE__*/React.createElement(WidthConsumer, null, ({
+      }, jsx(WidthConsumer, null, ({
         width
       }) => {
-        return /*#__PURE__*/React.createElement(ContentArea, {
-          innerRef: ref => this.containerElement = ref,
+        return jsx(ContentArea, {
+          ref: ref => this.containerElement = ref,
+          css: maxHeight ? css`
+                            max-height: ${maxHeight}px;
+                          ` : null,
           className: classnames('ak-editor-content-area', {
             'less-margin': width < akEditorMobileBreakoutPoint
-          }),
-          maxHeight: maxHeight
-        }, customContentComponents, /*#__PURE__*/React.createElement(PluginSlot, {
+          })
+        }, customContentComponents, jsx(PluginSlot, {
           editorView: editorView,
           editorActions: editorActions,
           eventDispatcher: eventDispatcher,
@@ -172,20 +175,21 @@ class Editor extends React.Component {
           containerElement: this.containerElement,
           disabled: !!disabled
         }), editorDOMElement);
-      })), /*#__PURE__*/React.createElement(WidthEmitter, {
+      })), jsx(WidthEmitter, {
         editorView: editorView
-      })), showSecondaryToolbar && /*#__PURE__*/React.createElement(SecondaryToolbar, {
+      })), 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
         }
@@ -194,7 +198,7 @@ class Editor extends React.Component {
   }
 
   render() {
-    return /*#__PURE__*/React.createElement(WithPluginState, {
+    return jsx(WithPluginState, {
       plugins: {
         maxContentSize: maxContentSizePluginKey,
         mediaState: mediaPluginKey

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

@@ -1,10 +1,11 @@
+/** @jsx jsx */
 import React, { useEffect, useState } from 'react';
-import styled from 'styled-components';
+import { css, jsx } from '@emotion/react';
 import { gridSize } from '@atlaskit/theme/constants';
 import { N30 } from '@atlaskit/theme/colors';
 import { akEditorToolbarKeylineHeight, akEditorGridLineZIndex, akEditorMenuZIndex } from '@atlaskit/editor-shared-styles';
 export const TableControlsPadding = 20;
-export const MainToolbarWrapper = styled.div`
+const mainToolbarWrapperStyle = css`
   position: relative;
   align-items: center;
   padding: ${gridSize()}px ${gridSize()}px 0;
@@ -22,11 +23,11 @@ export const MainToolbarWrapper = styled.div`
     padding-left: 0;
   }
 `;
-MainToolbarWrapper.displayName = 'MainToolbar';
-const StickyToolbarWrapper = styled(MainToolbarWrapper)`
+const stickyToolbarWrapperStyle = css`
+  /* stylelint-disable declaration-block-no-duplicate-properties */
   position: relative;
   position: sticky;
-  top: ${props => `${props.top}px`};
+  /* stylelint-enable declaration-block-no-duplicate-properties */
   padding-bottom: ${gridSize()}px;
   z-index: ${akEditorGridLineZIndex + akEditorMenuZIndex};
   transition: box-shadow ease-in-out 0.2s;
@@ -34,7 +35,6 @@ const StickyToolbarWrapper = styled(MainToolbarWrapper)`
     box-shadow: 0 ${akEditorToolbarKeylineHeight}px 0 0 ${N30};
   }
 `;
-StickyToolbarWrapper.displayName = 'MainToolbarSticky';
 
 const StickyToolbar = props => {
   const [top, setTop] = useState(0);
@@ -43,14 +43,17 @@ const StickyToolbar = props => {
 
     setTop(((_props$externalToolba = props.externalToolbarRef) === null || _props$externalToolba === void 0 ? void 0 : (_props$externalToolba2 = _props$externalToolba.current) === null || _props$externalToolba2 === void 0 ? void 0 : _props$externalToolba2.clientHeight) || 0);
   }, [setTop, props.externalToolbarRef]);
-  return /*#__PURE__*/React.createElement(StickyToolbarWrapper, {
+  return jsx("div", {
+    css: [mainToolbarWrapperStyle, stickyToolbarWrapperStyle, css`
+          top: ${top};
+        `],
     "data-testid": "ak-editor-main-toolbar",
-    className: 'show-keyline',
-    top: top
+    className: 'show-keyline'
   }, props.children);
 };
 
-const FixedToolbar = props => /*#__PURE__*/React.createElement(MainToolbarWrapper, {
+const FixedToolbar = props => jsx("div", {
+  css: mainToolbarWrapperStyle,
   "data-testid": "ak-editor-main-toolbar"
 }, props.children);
 
@@ -59,14 +62,14 @@ export const MainToolbar = ({
   children
 }) => {
   if (!!useStickyToolbar) {
-    return /*#__PURE__*/React.createElement(StickyToolbar, {
+    return jsx(StickyToolbar, {
       externalToolbarRef: typeof useStickyToolbar === 'boolean' ? undefined : useStickyToolbar
     }, children);
   }
 
-  return /*#__PURE__*/React.createElement(FixedToolbar, null, children);
+  return jsx(FixedToolbar, null, children);
 };
-export const MainToolbarCustomComponentsSlot = styled.div`
+export const mainToolbarCustomComponentsSlotStyle = css`
   display: flex;
   justify-content: flex-end;
   align-items: center;
@@ -76,5 +79,4 @@ export const MainToolbarCustomComponentsSlot = styled.div`
     display: flex;
     flex-shrink: 0;
   }
-`;
-MainToolbarCustomComponentsSlot.displayName = 'MainToolbar';
+`;