@atlaskit/editor-core 162.0.2 → 164.0.1

package/dist/es2019/plugins/floating-toolbar/ui/Toolbar.js

@@ -1,6 +1,7 @@
+/** @jsx jsx */
 import React from 'react';
+import { css, jsx } from '@emotion/react';
 import { Component } from 'react';
-import styled from 'styled-components';
 import ButtonGroup from '@atlaskit/button/button-group';
 import { themed } from '@atlaskit/theme/components';
 import { borderRadius, gridSize } from '@atlaskit/theme/constants';
@@ -20,11 +21,12 @@ import Announcer from '../../../utils/announcer/announcer';
 import { injectIntl } from 'react-intl-next';
 import messages from './messages';
 const akGridSize = gridSize();
-const ToolbarContainer = styled.div`
+
+const toolbarContainer = theme => css`
   background-color: ${themed({
   light: 'white',
   dark: DN70
-})};
+})(theme)};
   border-radius: ${borderRadius()}px;
   box-shadow: 0 0 1px rgba(9, 30, 66, 0.31),
     0 4px 8px -2px rgba(9, 30, 66, 0.25);
@@ -32,12 +34,16 @@ const ToolbarContainer = styled.div`
   display: flex;
   line-height: 1;
   box-sizing: border-box;
-  ${props => props.hasCompactLeftPadding ? `padding-left: ${akGridSize / 2}px` : ''};
+
   & > div {
     align-items: center;
   }
 `;
 
+const toolbarContainerLeftPadding = css`
+  padding-left: ${akGridSize / 2}px;
+`;
+
 function makeSameType(_a, _b) {
   return true;
 }
@@ -123,14 +129,18 @@ class Toolbar extends Component {
 
 
     const firstElementIsSelect = items[0].type === 'select';
-    return /*#__PURE__*/React.createElement(ToolbarContainer, {
+    return jsx("div", {
+      css: theme => {
+        return [toolbarContainer({
+          theme
+        }), firstElementIsSelect && toolbarContainerLeftPadding];
+      },
       "aria-label": intl.formatMessage(messages.floatingToolbarAriaLabel),
-      hasCompactLeftPadding: firstElementIsSelect,
       className: className
-    }, /*#__PURE__*/React.createElement(Announcer, {
+    }, jsx(Announcer, {
       text: intl.formatMessage(messages.floatingToolbarAnnouncer),
       delay: 250
-    }), /*#__PURE__*/React.createElement(ButtonGroup, null, items.filter(item => !item.hidden).map((item, idx) => {
+    }), jsx(ButtonGroup, null, items.filter(item => !item.hidden).map((item, idx) => {
       switch (item.type) {
         case 'button':
           const ButtonIcon = item.icon;
@@ -143,12 +153,12 @@ class Toolbar extends Component {
             }
           };
 
-          return /*#__PURE__*/React.createElement(Button, {
+          return jsx(Button, {
             className: item.className,
             key: idx,
             title: item.title,
             href: item.href,
-            icon: item.icon ? /*#__PURE__*/React.createElement(ButtonIcon, {
+            icon: item.icon ? jsx(ButtonIcon, {
               label: item.title
             }) : undefined,
             appearance: item.appearance,
@@ -168,7 +178,7 @@ class Toolbar extends Component {
           }, item.showTitle && item.title);
 
         case 'input':
-          return /*#__PURE__*/React.createElement(Input, {
+          return jsx(Input, {
             key: idx,
             mountPoint: popupsMountPoint,
             boundariesElement: popupsBoundariesElement,
@@ -185,10 +195,10 @@ class Toolbar extends Component {
 
         case 'dropdown':
           const DropdownIcon = item.icon;
-          return /*#__PURE__*/React.createElement(Dropdown, {
+          return jsx(Dropdown, {
             key: idx,
             title: item.title,
-            icon: DropdownIcon && /*#__PURE__*/React.createElement(DropdownIcon, {
+            icon: DropdownIcon && jsx(DropdownIcon, {
               label: item.title
             }),
             dispatchCommand: dispatchCommand,
@@ -203,7 +213,7 @@ class Toolbar extends Component {
 
         case 'select':
           if (item.selectType === 'list') {
-            return /*#__PURE__*/React.createElement(Select, {
+            return jsx(Select, {
               key: idx,
               dispatchCommand: dispatchCommand,
               options: item.options,
@@ -219,7 +229,7 @@ class Toolbar extends Component {
           }
 
           if (item.selectType === 'color') {
-            return /*#__PURE__*/React.createElement(ColorPickerButton, {
+            return jsx(ColorPickerButton, {
               key: idx,
               title: item.title,
               onChange: selected => {
@@ -232,7 +242,7 @@ class Toolbar extends Component {
           }
 
           if (item.selectType === 'emoji') {
-            return /*#__PURE__*/React.createElement(EmojiPickerButton, {
+            return jsx(EmojiPickerButton, {
               key: idx,
               editorView: editorView,
               title: item.title,
@@ -257,7 +267,7 @@ class Toolbar extends Component {
             return null;
           }
 
-          return /*#__PURE__*/React.createElement(ExtensionsPlaceholder, {
+          return jsx(ExtensionsPlaceholder, {
             key: idx,
             node: node,
             editorView: editorView,
@@ -266,7 +276,7 @@ class Toolbar extends Component {
           });
 
         case 'separator':
-          return /*#__PURE__*/React.createElement(Separator, {
+          return jsx(Separator, {
             key: idx
           });
       }

package/dist/es2019/plugins/floating-toolbar/ui/styles.js

@@ -48,7 +48,13 @@ const getStyles = (property, {
 export const iconOnlySpacing = {
   '&&': {
     padding: '0px',
-    '&[href]': {
+
+    /**
+      Increased specificity here because css for .hyperlink-open-link defined in
+      packages/editor/editor-core/src/ui/ContentStyles/index.tsx file
+      overrides padding left-right 2px with 4px.
+    */
+    '&&[href]': {
       padding: '0 2px'
     }
   },

package/dist/es2019/plugins/grid/index.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import classnames from 'classnames';
-import { withTheme } from 'styled-components';
+import { withTheme } from '@emotion/react';
 import { PluginKey } from 'prosemirror-state';
 import { breakoutWideScaleRatio, akEditorFullPageMaxWidth, akEditorBreakoutPadding } from '@atlaskit/editor-shared-styles';
 import { pluginKey as widthPlugin } from '../width/index';

package/dist/es2019/plugins/grid/styles.js

@@ -1,4 +1,4 @@
-import { css } from 'styled-components';
+import { css } from '@emotion/react';
 import { N30A, B200 } from '@atlaskit/theme/colors';
 import { akEditorGridLineZIndex } from '@atlaskit/editor-shared-styles';
 export const GRID_GUTTER = 12;

package/dist/es2019/plugins/help-dialog/ui/index.js

@@ -1,11 +1,14 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
+
+/** @jsx jsx */
 import React from 'react';
+import { jsx } from '@emotion/react';
 import { injectIntl, defineMessages, FormattedMessage } from 'react-intl-next';
 import { browser } from '@atlaskit/editor-common/utils';
 import CrossIcon from '@atlaskit/icon/glyph/cross';
 import AkModalDialog, { ModalTransition, ModalBody, useModal } from '@atlaskit/modal-dialog';
-import { Header, Footer, ContentWrapper, Line, Content, ColumnRight, ColumnLeft, Row, CodeSm, CodeMd, CodeLg, Title } from './styles';
+import { header, footer, contentWrapper, line, content, columnRight, columnLeft, row, codeSm, codeMd, codeLg, title } from './styles';
 import * as keymaps from '../../../keymaps';
 import ToolbarButton from '../../../ui/ToolbarButton';
 import { toolbarMessages } from '../../text-formatting/ui/Toolbar/toolbar-messages';
@@ -65,12 +68,16 @@ export const formatting = ({
   name: formatMessage(toolbarMessages.bold),
   type: 'strong',
   keymap: () => keymaps.toggleBold,
-  autoFormatting: () => /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(CodeLg, null, "**", /*#__PURE__*/React.createElement(FormattedMessage, toolbarMessages.bold), "**"))
+  autoFormatting: () => jsx("span", null, jsx("span", {
+    css: codeLg
+  }, "**", jsx(FormattedMessage, toolbarMessages.bold), "**"))
 }, {
   name: formatMessage(toolbarMessages.italic),
   type: 'em',
   keymap: () => keymaps.toggleItalic,
-  autoFormatting: () => /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(CodeLg, null, "*", /*#__PURE__*/React.createElement(FormattedMessage, toolbarMessages.italic), "*"))
+  autoFormatting: () => jsx("span", null, jsx("span", {
+    css: codeLg
+  }, "*", jsx(FormattedMessage, toolbarMessages.italic), "*"))
 }, {
   name: formatMessage(toolbarMessages.underline),
   type: 'underline',
@@ -79,7 +86,9 @@ export const formatting = ({
   name: formatMessage(toolbarMessages.strike),
   type: 'strike',
   keymap: () => keymaps.toggleStrikethrough,
-  autoFormatting: () => /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(CodeLg, null, "~~", /*#__PURE__*/React.createElement(FormattedMessage, toolbarMessages.strike), "~~"))
+  autoFormatting: () => jsx("span", null, jsx("span", {
+    css: codeLg
+  }, "~~", jsx(FormattedMessage, toolbarMessages.strike), "~~"))
 }, {
   name: formatMessage(toolbarMessages.subscript),
   type: 'subsup',
@@ -92,32 +101,56 @@ export const formatting = ({
   name: formatMessage(blockTypeMessages.heading1),
   type: 'heading',
   keymap: () => keymaps.toggleHeading1,
-  autoFormatting: () => /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(CodeSm, null, "#"), " ", /*#__PURE__*/React.createElement(CodeLg, null, "Space"))
+  autoFormatting: () => jsx("span", null, jsx("span", {
+    css: codeSm
+  }, "#"), " ", jsx("span", {
+    css: codeLg
+  }, "Space"))
 }, {
   name: formatMessage(blockTypeMessages.heading2),
   type: 'heading',
   keymap: () => keymaps.toggleHeading2,
-  autoFormatting: () => /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(CodeLg, null, "##"), " ", /*#__PURE__*/React.createElement(CodeLg, null, "Space"))
+  autoFormatting: () => jsx("span", null, jsx("span", {
+    css: codeLg
+  }, "##"), " ", jsx("span", {
+    css: codeLg
+  }, "Space"))
 }, {
   name: formatMessage(blockTypeMessages.heading3),
   type: 'heading',
   keymap: () => keymaps.toggleHeading3,
-  autoFormatting: () => /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(CodeLg, null, "###"), " ", /*#__PURE__*/React.createElement(CodeLg, null, "Space"))
+  autoFormatting: () => jsx("span", null, jsx("span", {
+    css: codeLg
+  }, "###"), " ", jsx("span", {
+    css: codeLg
+  }, "Space"))
 }, {
   name: formatMessage(blockTypeMessages.heading4),
   type: 'heading',
   keymap: () => keymaps.toggleHeading4,
-  autoFormatting: () => /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(CodeLg, null, "####"), " ", /*#__PURE__*/React.createElement(CodeLg, null, "Space"))
+  autoFormatting: () => jsx("span", null, jsx("span", {
+    css: codeLg
+  }, "####"), " ", jsx("span", {
+    css: codeLg
+  }, "Space"))
 }, {
   name: formatMessage(blockTypeMessages.heading5),
   type: 'heading',
   keymap: () => keymaps.toggleHeading5,
-  autoFormatting: () => /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(CodeLg, null, "#####"), " ", /*#__PURE__*/React.createElement(CodeLg, null, "Space"))
+  autoFormatting: () => jsx("span", null, jsx("span", {
+    css: codeLg
+  }, "#####"), " ", jsx("span", {
+    css: codeLg
+  }, "Space"))
 }, {
   name: formatMessage(blockTypeMessages.heading6),
   type: 'heading',
   keymap: () => keymaps.toggleHeading6,
-  autoFormatting: () => /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(CodeLg, null, "######"), " ", /*#__PURE__*/React.createElement(CodeLg, null, "Space"))
+  autoFormatting: () => jsx("span", null, jsx("span", {
+    css: codeLg
+  }, "######"), " ", jsx("span", {
+    css: codeLg
+  }, "Space"))
 }, {
   name: formatMessage(blockTypeMessages.normal),
   type: 'paragraph',
@@ -126,52 +159,84 @@ export const formatting = ({
   name: formatMessage(listMessages.orderedList),
   type: 'orderedList',
   keymap: () => keymaps.toggleOrderedList,
-  autoFormatting: () => /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(CodeSm, null, "1."), " ", /*#__PURE__*/React.createElement(CodeLg, null, "Space"))
+  autoFormatting: () => jsx("span", null, jsx("span", {
+    css: codeSm
+  }, "1."), " ", jsx("span", {
+    css: codeLg
+  }, "Space"))
 }, {
   name: formatMessage(listMessages.unorderedList),
   type: 'bulletList',
   keymap: () => keymaps.toggleBulletList,
-  autoFormatting: () => /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(CodeSm, null, "*"), " ", /*#__PURE__*/React.createElement(CodeLg, null, "Space"))
+  autoFormatting: () => jsx("span", null, jsx("span", {
+    css: codeSm
+  }, "*"), " ", jsx("span", {
+    css: codeLg
+  }, "Space"))
 }, {
   name: formatMessage(blockTypeMessages.blockquote),
   type: 'blockquote',
   keymap: () => keymaps.toggleBlockQuote,
-  autoFormatting: () => /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(CodeLg, null, '>'), " ", /*#__PURE__*/React.createElement(CodeLg, null, "Space"))
+  autoFormatting: () => jsx("span", null, jsx("span", {
+    css: codeLg
+  }, '>'), " ", jsx("span", {
+    css: codeLg
+  }, "Space"))
 }, {
   name: formatMessage(blockTypeMessages.codeblock),
   type: 'codeBlock',
-  autoFormatting: () => /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(CodeLg, null, "```"))
+  autoFormatting: () => jsx("span", null, jsx("span", {
+    css: codeLg
+  }, "```"))
 }, {
   name: formatMessage(insertBlockMessages.horizontalRule),
   type: 'rule',
   keymap: () => keymaps.insertRule,
-  autoFormatting: () => /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(CodeLg, null, "---"))
+  autoFormatting: () => jsx("span", null, jsx("span", {
+    css: codeLg
+  }, "---"))
 }, {
   name: formatMessage(insertBlockMessages.link),
   type: 'link',
   keymap: () => keymaps.addLink,
-  autoFormatting: () => /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(CodeLg, null, "[", /*#__PURE__*/React.createElement(FormattedMessage, insertBlockMessages.link), "](http://a.com)"))
+  autoFormatting: () => jsx("span", null, jsx("span", {
+    css: codeLg
+  }, "[", jsx(FormattedMessage, insertBlockMessages.link), "](http://a.com)"))
 }, {
   name: formatMessage(toolbarMessages.code),
   type: 'code',
   keymap: () => keymaps.toggleCode,
-  autoFormatting: () => /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(CodeLg, null, "`", /*#__PURE__*/React.createElement(FormattedMessage, toolbarMessages.code), "`"))
+  autoFormatting: () => jsx("span", null, jsx("span", {
+    css: codeLg
+  }, "`", jsx(FormattedMessage, toolbarMessages.code), "`"))
 }, {
   name: formatMessage(insertBlockMessages.action),
   type: 'taskItem',
-  autoFormatting: () => /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(CodeSm, null, "[]"), " ", /*#__PURE__*/React.createElement(CodeLg, null, "Space"))
+  autoFormatting: () => jsx("span", null, jsx("span", {
+    css: codeSm
+  }, "[]"), " ", jsx("span", {
+    css: codeLg
+  }, "Space"))
 }, {
   name: formatMessage(insertBlockMessages.decision),
   type: 'decisionItem',
-  autoFormatting: () => /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(CodeSm, null, "<>"), " ", /*#__PURE__*/React.createElement(CodeLg, null, "Space"))
+  autoFormatting: () => jsx("span", null, jsx("span", {
+    css: codeSm
+  }, "<>"), " ", jsx("span", {
+    css: codeLg
+  }, "Space"))
 }, {
   name: formatMessage(insertBlockMessages.emoji),
   type: 'emoji',
-  autoFormatting: () => /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(CodeLg, null, ":"))
+  autoFormatting: () => jsx("span", null, jsx("span", {
+    css: codeLg
+  }, ":"))
 }, {
   name: formatMessage(insertBlockMessages.mention),
   type: 'mention',
-  autoFormatting: () => /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(CodeLg, null, "@"))
+  autoFormatting: () => jsx("span", null, jsx("span", {
+    css: codeLg
+  }, "@"))
 }, {
   name: formatMessage(alignmentMessages.alignLeft),
   type: 'alignment',
@@ -210,7 +275,9 @@ const otherFormatting = ({
 const imageAutoFormat = {
   name: 'Image',
   type: 'image',
-  autoFormatting: () => /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(CodeLg, null, "![", /*#__PURE__*/React.createElement(FormattedMessage, messages.altText), "](http://www.image.com)"))
+  autoFormatting: () => jsx("span", null, jsx("span", {
+    css: codeLg
+  }, "![", jsx(FormattedMessage, messages.altText), "](http://www.image.com)"))
 };
 
 const quickInsertAutoFormat = ({
@@ -218,7 +285,9 @@ const quickInsertAutoFormat = ({
 }) => ({
   name: formatMessage(messages.quickInsert),
   type: 'quickInsert',
-  autoFormatting: () => /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(CodeLg, null, "/"))
+  autoFormatting: () => jsx("span", null, jsx("span", {
+    css: codeLg
+  }, "/"))
 });
 
 export const getSupportedFormatting = (schema, intl, imageEnabled, quickInsertEnabled) => {
@@ -233,22 +302,25 @@ export const getComponentFromKeymap = keymap => {
   }
 
   const keyParts = shortcut.replace(/\-(?=.)/g, ' + ').split(' ');
-  return /*#__PURE__*/React.createElement("span", null, keyParts.map((part, index) => {
+  return jsx("span", null, keyParts.map((part, index) => {
     if (part === '+') {
-      return /*#__PURE__*/React.createElement("span", {
+      return jsx("span", {
         key: `${shortcut}-${index}`
       }, ' + ');
     } else if (part === 'Cmd') {
-      return /*#__PURE__*/React.createElement(CodeSm, {
+      return jsx("span", {
+        css: codeSm,
         key: `${shortcut}-${index}`
       }, "\u2318");
     } else if (['ctrl', 'alt', 'opt', 'shift'].indexOf(part.toLowerCase()) >= 0) {
-      return /*#__PURE__*/React.createElement(CodeMd, {
+      return jsx("span", {
+        css: codeMd,
         key: `${shortcut}-${index}`
       }, part);
     }
 
-    return /*#__PURE__*/React.createElement(CodeSm, {
+    return jsx("span", {
+      css: codeSm,
       key: `${shortcut}-${index}`
     }, part.toUpperCase());
   }));
@@ -261,19 +333,23 @@ const ModalHeader = injectIntl(({
   const {
     onClose
   } = useModal();
-  return /*#__PURE__*/React.createElement(Header, null, /*#__PURE__*/React.createElement(FormattedMessage, messages.editorHelp), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ToolbarButton // @ts-ignore
+  return jsx("div", {
+    css: header
+  }, jsx(FormattedMessage, messages.editorHelp), jsx("div", null, jsx(ToolbarButton // @ts-ignore
   , {
     onClick: onClose,
     title: formatMessage(messages.closeHelpDialog),
     spacing: "compact",
-    iconBefore: /*#__PURE__*/React.createElement(CrossIcon, {
+    iconBefore: jsx(CrossIcon, {
       label: formatMessage(messages.closeHelpDialog),
       size: "medium"
     })
   })));
 });
 
-const ModalFooter = () => /*#__PURE__*/React.createElement(Footer, null, /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.helpDialogTips, {
+const ModalFooter = () => jsx("div", {
+  css: footer
+}, jsx(FormattedMessage, _extends({}, messages.helpDialogTips, {
   values: {
     keyMap: getComponentFromKeymap(keymaps.openHelp)
   }
@@ -318,20 +394,39 @@ class HelpDialog extends React.Component {
       quickInsertEnabled
     } = this.props;
     this.formatting = getSupportedFormatting(editorView.state.schema, intl, imageEnabled, quickInsertEnabled);
-    return /*#__PURE__*/React.createElement(ModalTransition, null, this.props.isVisible ? /*#__PURE__*/React.createElement(AkModalDialog, {
+    return jsx(ModalTransition, null, this.props.isVisible ? jsx(AkModalDialog, {
       width: "large",
       onClose: this.closeDialog,
       testId: "help-modal-dialog"
-    }, /*#__PURE__*/React.createElement(ModalHeader, null), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement(ContentWrapper, null, /*#__PURE__*/React.createElement(Line, null), /*#__PURE__*/React.createElement(Content, null, /*#__PURE__*/React.createElement(ColumnLeft, null, /*#__PURE__*/React.createElement(Title, null, /*#__PURE__*/React.createElement(FormattedMessage, messages.keyboardShortcuts)), /*#__PURE__*/React.createElement("div", null, this.formatting.filter(form => {
+    }, jsx(ModalHeader, null), jsx(ModalBody, null, jsx("div", {
+      css: contentWrapper
+    }, jsx("div", {
+      css: line
+    }), jsx("div", {
+      css: content
+    }, jsx("div", {
+      css: columnLeft
+    }, jsx("div", {
+      css: title
+    }, jsx(FormattedMessage, messages.keyboardShortcuts)), jsx("div", null, this.formatting.filter(form => {
       const keymap = form.keymap && form.keymap(this.props);
       return keymap && keymap[browser.mac ? 'mac' : 'windows'];
-    }).map(form => /*#__PURE__*/React.createElement(Row, {
+    }).map(form => jsx("div", {
+      css: row,
       key: `textFormatting-${form.name}`
-    }, /*#__PURE__*/React.createElement("span", null, form.name), getComponentFromKeymap(form.keymap()))), this.formatting.filter(form => shortcutNamesWithoutKeymap.indexOf(form.type) !== -1).filter(form => form.autoFormatting).map(form => /*#__PURE__*/React.createElement(Row, {
+    }, jsx("span", null, form.name), getComponentFromKeymap(form.keymap()))), this.formatting.filter(form => shortcutNamesWithoutKeymap.indexOf(form.type) !== -1).filter(form => form.autoFormatting).map(form => jsx("div", {
+      css: row,
       key: `autoFormatting-${form.name}`
-    }, /*#__PURE__*/React.createElement("span", null, form.name), form.autoFormatting())))), /*#__PURE__*/React.createElement(Line, null), /*#__PURE__*/React.createElement(ColumnRight, null, /*#__PURE__*/React.createElement(Title, null, /*#__PURE__*/React.createElement(FormattedMessage, messages.markdown)), /*#__PURE__*/React.createElement("div", null, this.formatting.filter(form => shortcutNamesWithoutKeymap.indexOf(form.type) === -1).map(form => form.autoFormatting && /*#__PURE__*/React.createElement(Row, {
+    }, jsx("span", null, form.name), form.autoFormatting())))), jsx("div", {
+      css: line
+    }), jsx("div", {
+      css: columnRight
+    }, jsx("div", {
+      css: title
+    }, jsx(FormattedMessage, messages.markdown)), jsx("div", null, this.formatting.filter(form => shortcutNamesWithoutKeymap.indexOf(form.type) === -1).map(form => form.autoFormatting && jsx("div", {
+      css: row,
       key: `autoFormatting-${form.name}`
-    }, /*#__PURE__*/React.createElement("span", null, form.name), form.autoFormatting()))))))), /*#__PURE__*/React.createElement(ModalFooter, null)) : null);
+    }, jsx("span", null, form.name), form.autoFormatting()))))))), jsx(ModalFooter, null)) : null);
   }
 
 }

package/dist/es2019/plugins/help-dialog/ui/styles.js

@@ -1,8 +1,8 @@
-import styled from 'styled-components';
+import { css } from '@emotion/react';
 import { borderRadius } from '@atlaskit/theme/constants';
 import * as colors from '@atlaskit/theme/colors';
 import { akEditorUnitZIndex, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
-export const Header = styled.div`
+export const header = css`
   z-index: ${akEditorUnitZIndex};
   min-height: 24px;
   padding: 20px 40px;
@@ -15,7 +15,7 @@ export const Header = styled.div`
   background-color: ${colors.N0};
   border-radius: ${borderRadius()}px;
 `;
-export const Footer = styled.div`
+export const footer = css`
   z-index: ${akEditorUnitZIndex};
   font-size: ${relativeFontSizeToBase16(14)};
   line-height: 20px;
@@ -24,7 +24,7 @@ export const Footer = styled.div`
   text-align: right;
   box-shadow: 'none';
 `;
-export const ContentWrapper = styled.div`
+export const contentWrapper = css`
   padding: 18px 20px;
   border-bottom-right-radius: ${borderRadius()}px;
   overflow: auto;
@@ -32,7 +32,7 @@ export const ContentWrapper = styled.div`
   color: ${colors.N400};
   background-color: ${colors.N0};
 `;
-export const Line = styled.div`
+export const line = css`
   background: #fff;
   content: '';
   display: block;
@@ -44,29 +44,29 @@ export const Line = styled.div`
   width: 100%;
   min-width: 604px;
 `;
-export const Content = styled.div`
+export const content = css`
   min-width: 524px;
   width: 100%;
   position: relative;
   display: flex;
   justify-content: space-between;
 `;
-export const ColumnLeft = styled.div`
+export const columnLeft = css`
   width: 44%;
 `;
-export const ColumnRight = styled.div`
+export const columnRight = css`
   width: 44%;
 `;
-export const Row = styled.div`
+export const row = css`
   margin: 20px 0;
   display: flex;
   justify-content: space-between;
 `;
-export const Title = styled.div`
+export const title = css`
   font-size: ${relativeFontSizeToBase16(18)};
   font-weight: 400;
 `;
-export const CodeSm = styled.span`
+export const codeSm = css`
   background-color: ${colors.N20};
   border-radius: ${borderRadius()}px;
   width: 24px;
@@ -75,7 +75,7 @@ export const CodeSm = styled.span`
   line-height: 24px;
   text-align: center;
 `;
-export const CodeMd = styled.span`
+export const codeMd = css`
   background-color: ${colors.N20};
   border-radius: ${borderRadius()}px;
   display: inline-block;
@@ -84,7 +84,7 @@ export const CodeMd = styled.span`
   width: 50px;
   text-align: center;
 `;
-export const CodeLg = styled.span`
+export const codeLg = css`
   background-color: ${colors.N20};
   border-radius: ${borderRadius()}px;
   display: inline-block;

package/dist/es2019/plugins/hyperlink/styles.js

@@ -1,5 +1,4 @@
-/* eslint-disable @atlaskit/design-system/use-visually-hidden */
-import styled, { css } from 'styled-components';
+import { css } from '@emotion/react';
 import { linkSharedStyle } from '@atlaskit/editor-common/styles';
 export const linkStyles = css`
   .ProseMirror {
@@ -20,7 +19,4 @@ export const visuallyHiddenStyles = css`
   overflow: hidden;
   padding: 0;
   position: absolute;
-`;
-export const ScreenReaderText = styled.div`
-  ${visuallyHiddenStyles};
 `;