@atlaskit/editor-core 161.0.0 → 163.0.0

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

@@ -1,4 +1,4 @@
-import { css } from 'styled-components';
+import { css } from '@emotion/react';
 import { B75, B200 } from '@atlaskit/theme/colors';
 export const searchMatchBgColour = B75;
 export const selectedSearchMatchBgColour = B200;

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

@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
 /** @jsx jsx */
 import React from 'react';
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import { defineMessages, injectIntl } from 'react-intl-next';
 import EditorCloseIcon from '@atlaskit/icon/glyph/editor/close';
 import ChevronDownIcon from '@atlaskit/icon/glyph/hipchat/chevron-down';

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

@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
 /** @jsx jsx */
 import React from 'react';
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import Find from './Find';
 import Replace from './Replace';
 import { ruleStyles, wrapperStyles } from './styles';

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

@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
 /** @jsx jsx */
 import React from 'react';
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import Button from '@atlaskit/button/standard-button';
 import { defineMessages, injectIntl } from 'react-intl-next';
 import Textfield from '@atlaskit/textfield';

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

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import { N60, N30A } from '@atlaskit/theme/colors';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 export const replaceSectionButtonStyles = css({
@@ -20,15 +20,20 @@ export const wrapperStyles = css({
     margin: '0px 4px'
   }
 });
-export const sectionWrapperStyles = css({
-  display: 'flex',
-  alignItems: 'column',
-  '> *': {
-    display: 'inline-flex',
-    height: '32px',
-    flex: '0 0 auto'
+export const sectionWrapperStyles = css`
+  display: flex;
+
+  & > * {
+    display: inline-flex;
+    height: 32px;
+    flex: 0 0 auto;
   }
-});
+
+  & > [data-ds--text-field--container] {
+    display: flex;
+    flex: 1 1 auto;
+  }
+`;
 export const countStyles = css({
   color: `${N60}`,
   fontSize: `${relativeFontSizeToBase16(12)}`,

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Component } from 'react';
-import styled, { ThemeProvider } from 'styled-components';
+import styled from 'styled-components';
 import { gridSize } from '@atlaskit/theme/constants';
 import { B400 } from '@atlaskit/theme/colors'; // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 
@@ -20,6 +20,11 @@ const Spacer = styled.span`
 `;
 const MenuContainer = styled.div`
   min-width: ${menuItemDimensions.width}px;
+
+  // temporary solution before we migrated off dst/item
+  & span[class^='ItemParts__Before'] {
+    margin-right: 4px;
+  }
 `;
 const padding = gridSize();
 export const itemSpacing = gridSize() / 2;
@@ -49,11 +54,7 @@ class Dropdown extends Component {
       items,
       intl
     } = this.props;
-    return /*#__PURE__*/React.createElement(ThemeProvider, {
-      theme: {
-        [itemThemeNamespace]: editorItemTheme
-      }
-    }, /*#__PURE__*/React.createElement(MenuContainer, null, items.filter(item => !item.hidden).map((item, idx) => {
+    return /*#__PURE__*/React.createElement(MenuContainer, null, items.filter(item => !item.hidden).map((item, idx) => {
       const itemContent = /*#__PURE__*/React.createElement(Item, {
         key: idx,
         isCompact: true,
@@ -69,7 +70,10 @@ class Dropdown extends Component {
           hide();
         },
         "data-testid": item.testId,
-        isDisabled: item.disabled
+        isDisabled: item.disabled,
+        theme: {
+          [itemThemeNamespace]: editorItemTheme
+        }
       }, item.title);
 
       if (item.tooltip) {
@@ -80,7 +84,7 @@ class Dropdown extends Component {
       }
 
       return itemContent;
-    })));
+    }));
   }
 
   renderSelected(item, intl) {

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/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};
 `;