@atlaskit/editor-core 162.0.2 → 164.0.1

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

@@ -5,15 +5,16 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-var _templateObject;
+var _templateObject, _templateObject2;
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
+/** @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';
@@ -33,12 +34,15 @@ import Announcer from '../../../utils/announcer/announcer';
 import { injectIntl } from 'react-intl-next';
 import messages from './messages';
 var akGridSize = gridSize();
-var ToolbarContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background-color: ", ";\n  border-radius: ", "px;\n  box-shadow: 0 0 1px rgba(9, 30, 66, 0.31),\n    0 4px 8px -2px rgba(9, 30, 66, 0.25);\n  padding: ", "px ", "px;\n  display: flex;\n  line-height: 1;\n  box-sizing: border-box;\n  ", ";\n  & > div {\n    align-items: center;\n  }\n"])), themed({
-  light: 'white',
-  dark: DN70
-}), borderRadius(), akGridSize / 2, akGridSize, function (props) {
-  return props.hasCompactLeftPadding ? "padding-left: ".concat(akGridSize / 2, "px") : '';
-});
+
+var toolbarContainer = function toolbarContainer(theme) {
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background-color: ", ";\n  border-radius: ", "px;\n  box-shadow: 0 0 1px rgba(9, 30, 66, 0.31),\n    0 4px 8px -2px rgba(9, 30, 66, 0.25);\n  padding: ", "px ", "px;\n  display: flex;\n  line-height: 1;\n  box-sizing: border-box;\n\n  & > div {\n    align-items: center;\n  }\n"])), themed({
+    light: 'white',
+    dark: DN70
+  })(theme), borderRadius(), akGridSize / 2, akGridSize);
+};
+
+var toolbarContainerLeftPadding = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding-left: ", "px;\n"])), akGridSize / 2);
 
 function makeSameType(_a, _b) {
   return true;
@@ -149,14 +153,18 @@ var Toolbar = /*#__PURE__*/function (_Component) {
 
 
       var firstElementIsSelect = items[0].type === 'select';
-      return /*#__PURE__*/React.createElement(ToolbarContainer, {
+      return jsx("div", {
+        css: function css(theme) {
+          return [toolbarContainer({
+            theme: 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(function (item) {
+      }), jsx(ButtonGroup, null, items.filter(function (item) {
         return !item.hidden;
       }).map(function (item, idx) {
         switch (item.type) {
@@ -171,12 +179,12 @@ var Toolbar = /*#__PURE__*/function (_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,
@@ -204,7 +212,7 @@ var Toolbar = /*#__PURE__*/function (_Component) {
             }, item.showTitle && item.title);
 
           case 'input':
-            return /*#__PURE__*/React.createElement(Input, {
+            return jsx(Input, {
               key: idx,
               mountPoint: popupsMountPoint,
               boundariesElement: popupsBoundariesElement,
@@ -225,10 +233,10 @@ var Toolbar = /*#__PURE__*/function (_Component) {
 
           case 'dropdown':
             var 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,
@@ -243,7 +251,7 @@ var Toolbar = /*#__PURE__*/function (_Component) {
 
           case 'select':
             if (item.selectType === 'list') {
-              return /*#__PURE__*/React.createElement(Select, {
+              return jsx(Select, {
                 key: idx,
                 dispatchCommand: dispatchCommand,
                 options: item.options,
@@ -261,7 +269,7 @@ var Toolbar = /*#__PURE__*/function (_Component) {
             }
 
             if (item.selectType === 'color') {
-              return /*#__PURE__*/React.createElement(ColorPickerButton, {
+              return jsx(ColorPickerButton, {
                 key: idx,
                 title: item.title,
                 onChange: function onChange(selected) {
@@ -274,7 +282,7 @@ var Toolbar = /*#__PURE__*/function (_Component) {
             }
 
             if (item.selectType === 'emoji') {
-              return /*#__PURE__*/React.createElement(EmojiPickerButton, {
+              return jsx(EmojiPickerButton, {
                 key: idx,
                 editorView: editorView,
                 title: item.title,
@@ -300,7 +308,7 @@ var Toolbar = /*#__PURE__*/function (_Component) {
               return null;
             }
 
-            return /*#__PURE__*/React.createElement(ExtensionsPlaceholder, {
+            return jsx(ExtensionsPlaceholder, {
               key: idx,
               node: node,
               editorView: editorView,
@@ -309,7 +317,7 @@ var Toolbar = /*#__PURE__*/function (_Component) {
             });
 
           case 'separator':
-            return /*#__PURE__*/React.createElement(Separator, {
+            return jsx(Separator, {
               key: idx
             });
         }

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

@@ -51,7 +51,13 @@ var getStyles = function getStyles(property, _ref) {
 export var 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/esm/plugins/grid/index.js

@@ -13,7 +13,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 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/esm/plugins/grid/styles.js

@@ -2,7 +2,7 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject;
 
-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 var GRID_GUTTER = 12;

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

@@ -12,12 +12,14 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
+/** @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';
@@ -80,7 +82,9 @@ export var formatting = function formatting(_ref) {
       return keymaps.toggleBold;
     },
     autoFormatting: function autoFormatting() {
-      return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(CodeLg, null, "**", /*#__PURE__*/React.createElement(FormattedMessage, toolbarMessages.bold), "**"));
+      return jsx("span", null, jsx("span", {
+        css: codeLg
+      }, "**", jsx(FormattedMessage, toolbarMessages.bold), "**"));
     }
   }, {
     name: formatMessage(toolbarMessages.italic),
@@ -89,7 +93,9 @@ export var formatting = function formatting(_ref) {
       return keymaps.toggleItalic;
     },
     autoFormatting: function autoFormatting() {
-      return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(CodeLg, null, "*", /*#__PURE__*/React.createElement(FormattedMessage, toolbarMessages.italic), "*"));
+      return jsx("span", null, jsx("span", {
+        css: codeLg
+      }, "*", jsx(FormattedMessage, toolbarMessages.italic), "*"));
     }
   }, {
     name: formatMessage(toolbarMessages.underline),
@@ -104,7 +110,9 @@ export var formatting = function formatting(_ref) {
       return keymaps.toggleStrikethrough;
     },
     autoFormatting: function autoFormatting() {
-      return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(CodeLg, null, "~~", /*#__PURE__*/React.createElement(FormattedMessage, toolbarMessages.strike), "~~"));
+      return jsx("span", null, jsx("span", {
+        css: codeLg
+      }, "~~", jsx(FormattedMessage, toolbarMessages.strike), "~~"));
     }
   }, {
     name: formatMessage(toolbarMessages.subscript),
@@ -125,7 +133,11 @@ export var formatting = function formatting(_ref) {
       return keymaps.toggleHeading1;
     },
     autoFormatting: function autoFormatting() {
-      return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(CodeSm, null, "#"), " ", /*#__PURE__*/React.createElement(CodeLg, null, "Space"));
+      return jsx("span", null, jsx("span", {
+        css: codeSm
+      }, "#"), " ", jsx("span", {
+        css: codeLg
+      }, "Space"));
     }
   }, {
     name: formatMessage(blockTypeMessages.heading2),
@@ -134,7 +146,11 @@ export var formatting = function formatting(_ref) {
       return keymaps.toggleHeading2;
     },
     autoFormatting: function autoFormatting() {
-      return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(CodeLg, null, "##"), " ", /*#__PURE__*/React.createElement(CodeLg, null, "Space"));
+      return jsx("span", null, jsx("span", {
+        css: codeLg
+      }, "##"), " ", jsx("span", {
+        css: codeLg
+      }, "Space"));
     }
   }, {
     name: formatMessage(blockTypeMessages.heading3),
@@ -143,7 +159,11 @@ export var formatting = function formatting(_ref) {
       return keymaps.toggleHeading3;
     },
     autoFormatting: function autoFormatting() {
-      return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(CodeLg, null, "###"), " ", /*#__PURE__*/React.createElement(CodeLg, null, "Space"));
+      return jsx("span", null, jsx("span", {
+        css: codeLg
+      }, "###"), " ", jsx("span", {
+        css: codeLg
+      }, "Space"));
     }
   }, {
     name: formatMessage(blockTypeMessages.heading4),
@@ -152,7 +172,11 @@ export var formatting = function formatting(_ref) {
       return keymaps.toggleHeading4;
     },
     autoFormatting: function autoFormatting() {
-      return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(CodeLg, null, "####"), " ", /*#__PURE__*/React.createElement(CodeLg, null, "Space"));
+      return jsx("span", null, jsx("span", {
+        css: codeLg
+      }, "####"), " ", jsx("span", {
+        css: codeLg
+      }, "Space"));
     }
   }, {
     name: formatMessage(blockTypeMessages.heading5),
@@ -161,7 +185,11 @@ export var formatting = function formatting(_ref) {
       return keymaps.toggleHeading5;
     },
     autoFormatting: function autoFormatting() {
-      return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(CodeLg, null, "#####"), " ", /*#__PURE__*/React.createElement(CodeLg, null, "Space"));
+      return jsx("span", null, jsx("span", {
+        css: codeLg
+      }, "#####"), " ", jsx("span", {
+        css: codeLg
+      }, "Space"));
     }
   }, {
     name: formatMessage(blockTypeMessages.heading6),
@@ -170,7 +198,11 @@ export var formatting = function formatting(_ref) {
       return keymaps.toggleHeading6;
     },
     autoFormatting: function autoFormatting() {
-      return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(CodeLg, null, "######"), " ", /*#__PURE__*/React.createElement(CodeLg, null, "Space"));
+      return jsx("span", null, jsx("span", {
+        css: codeLg
+      }, "######"), " ", jsx("span", {
+        css: codeLg
+      }, "Space"));
     }
   }, {
     name: formatMessage(blockTypeMessages.normal),
@@ -185,7 +217,11 @@ export var formatting = function formatting(_ref) {
       return keymaps.toggleOrderedList;
     },
     autoFormatting: function autoFormatting() {
-      return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(CodeSm, null, "1."), " ", /*#__PURE__*/React.createElement(CodeLg, null, "Space"));
+      return jsx("span", null, jsx("span", {
+        css: codeSm
+      }, "1."), " ", jsx("span", {
+        css: codeLg
+      }, "Space"));
     }
   }, {
     name: formatMessage(listMessages.unorderedList),
@@ -194,7 +230,11 @@ export var formatting = function formatting(_ref) {
       return keymaps.toggleBulletList;
     },
     autoFormatting: function autoFormatting() {
-      return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(CodeSm, null, "*"), " ", /*#__PURE__*/React.createElement(CodeLg, null, "Space"));
+      return jsx("span", null, jsx("span", {
+        css: codeSm
+      }, "*"), " ", jsx("span", {
+        css: codeLg
+      }, "Space"));
     }
   }, {
     name: formatMessage(blockTypeMessages.blockquote),
@@ -203,13 +243,19 @@ export var formatting = function formatting(_ref) {
       return keymaps.toggleBlockQuote;
     },
     autoFormatting: function autoFormatting() {
-      return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(CodeLg, null, '>'), " ", /*#__PURE__*/React.createElement(CodeLg, null, "Space"));
+      return jsx("span", null, jsx("span", {
+        css: codeLg
+      }, '>'), " ", jsx("span", {
+        css: codeLg
+      }, "Space"));
     }
   }, {
     name: formatMessage(blockTypeMessages.codeblock),
     type: 'codeBlock',
     autoFormatting: function autoFormatting() {
-      return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(CodeLg, null, "```"));
+      return jsx("span", null, jsx("span", {
+        css: codeLg
+      }, "```"));
     }
   }, {
     name: formatMessage(insertBlockMessages.horizontalRule),
@@ -218,7 +264,9 @@ export var formatting = function formatting(_ref) {
       return keymaps.insertRule;
     },
     autoFormatting: function autoFormatting() {
-      return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(CodeLg, null, "---"));
+      return jsx("span", null, jsx("span", {
+        css: codeLg
+      }, "---"));
     }
   }, {
     name: formatMessage(insertBlockMessages.link),
@@ -227,7 +275,9 @@ export var formatting = function formatting(_ref) {
       return keymaps.addLink;
     },
     autoFormatting: function autoFormatting() {
-      return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(CodeLg, null, "[", /*#__PURE__*/React.createElement(FormattedMessage, insertBlockMessages.link), "](http://a.com)"));
+      return jsx("span", null, jsx("span", {
+        css: codeLg
+      }, "[", jsx(FormattedMessage, insertBlockMessages.link), "](http://a.com)"));
     }
   }, {
     name: formatMessage(toolbarMessages.code),
@@ -236,31 +286,45 @@ export var formatting = function formatting(_ref) {
       return keymaps.toggleCode;
     },
     autoFormatting: function autoFormatting() {
-      return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(CodeLg, null, "`", /*#__PURE__*/React.createElement(FormattedMessage, toolbarMessages.code), "`"));
+      return jsx("span", null, jsx("span", {
+        css: codeLg
+      }, "`", jsx(FormattedMessage, toolbarMessages.code), "`"));
     }
   }, {
     name: formatMessage(insertBlockMessages.action),
     type: 'taskItem',
     autoFormatting: function autoFormatting() {
-      return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(CodeSm, null, "[]"), " ", /*#__PURE__*/React.createElement(CodeLg, null, "Space"));
+      return jsx("span", null, jsx("span", {
+        css: codeSm
+      }, "[]"), " ", jsx("span", {
+        css: codeLg
+      }, "Space"));
     }
   }, {
     name: formatMessage(insertBlockMessages.decision),
     type: 'decisionItem',
     autoFormatting: function autoFormatting() {
-      return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(CodeSm, null, "<>"), " ", /*#__PURE__*/React.createElement(CodeLg, null, "Space"));
+      return jsx("span", null, jsx("span", {
+        css: codeSm
+      }, "<>"), " ", jsx("span", {
+        css: codeLg
+      }, "Space"));
     }
   }, {
     name: formatMessage(insertBlockMessages.emoji),
     type: 'emoji',
     autoFormatting: function autoFormatting() {
-      return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(CodeLg, null, ":"));
+      return jsx("span", null, jsx("span", {
+        css: codeLg
+      }, ":"));
     }
   }, {
     name: formatMessage(insertBlockMessages.mention),
     type: 'mention',
     autoFormatting: function autoFormatting() {
-      return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(CodeLg, null, "@"));
+      return jsx("span", null, jsx("span", {
+        css: codeLg
+      }, "@"));
     }
   }, {
     name: formatMessage(alignmentMessages.alignLeft),
@@ -317,7 +381,9 @@ var imageAutoFormat = {
   name: 'Image',
   type: 'image',
   autoFormatting: function autoFormatting() {
-    return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(CodeLg, null, "![", /*#__PURE__*/React.createElement(FormattedMessage, messages.altText), "](http://www.image.com)"));
+    return jsx("span", null, jsx("span", {
+      css: codeLg
+    }, "![", jsx(FormattedMessage, messages.altText), "](http://www.image.com)"));
   }
 };
 
@@ -327,7 +393,9 @@ var quickInsertAutoFormat = function quickInsertAutoFormat(_ref3) {
     name: formatMessage(messages.quickInsert),
     type: 'quickInsert',
     autoFormatting: function autoFormatting() {
-      return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(CodeLg, null, "/"));
+      return jsx("span", null, jsx("span", {
+        css: codeLg
+      }, "/"));
     }
   };
 };
@@ -346,22 +414,25 @@ export var getComponentFromKeymap = function getComponentFromKeymap(keymap) {
   }
 
   var keyParts = shortcut.replace(/\-(?=.)/g, ' + ').split(' ');
-  return /*#__PURE__*/React.createElement("span", null, keyParts.map(function (part, index) {
+  return jsx("span", null, keyParts.map(function (part, index) {
     if (part === '+') {
-      return /*#__PURE__*/React.createElement("span", {
+      return jsx("span", {
         key: "".concat(shortcut, "-").concat(index)
       }, ' + ');
     } else if (part === 'Cmd') {
-      return /*#__PURE__*/React.createElement(CodeSm, {
+      return jsx("span", {
+        css: codeSm,
         key: "".concat(shortcut, "-").concat(index)
       }, "\u2318");
     } else if (['ctrl', 'alt', 'opt', 'shift'].indexOf(part.toLowerCase()) >= 0) {
-      return /*#__PURE__*/React.createElement(CodeMd, {
+      return jsx("span", {
+        css: codeMd,
         key: "".concat(shortcut, "-").concat(index)
       }, part);
     }
 
-    return /*#__PURE__*/React.createElement(CodeSm, {
+    return jsx("span", {
+      css: codeSm,
       key: "".concat(shortcut, "-").concat(index)
     }, part.toUpperCase());
   }));
@@ -372,12 +443,14 @@ var ModalHeader = injectIntl(function (_ref4) {
   var _useModal = useModal(),
       onClose = _useModal.onClose;
 
-  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"
     })
@@ -385,7 +458,9 @@ var ModalHeader = injectIntl(function (_ref4) {
 });
 
 var ModalFooter = function ModalFooter() {
-  return /*#__PURE__*/React.createElement(Footer, null, /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.helpDialogTips, {
+  return jsx("div", {
+    css: footer
+  }, jsx(FormattedMessage, _extends({}, messages.helpDialogTips, {
     values: {
       keyMap: getComponentFromKeymap(keymaps.openHelp)
     }
@@ -447,32 +522,51 @@ var HelpDialog = /*#__PURE__*/function (_React$Component) {
           imageEnabled = _this$props.imageEnabled,
           quickInsertEnabled = _this$props.quickInsertEnabled;
       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(function (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(function (form) {
         var keymap = form.keymap && form.keymap(_this2.props);
         return keymap && keymap[browser.mac ? 'mac' : 'windows'];
       }).map(function (form) {
-        return /*#__PURE__*/React.createElement(Row, {
+        return jsx("div", {
+          css: row,
           key: "textFormatting-".concat(form.name)
-        }, /*#__PURE__*/React.createElement("span", null, form.name), getComponentFromKeymap(form.keymap()));
+        }, jsx("span", null, form.name), getComponentFromKeymap(form.keymap()));
       }), this.formatting.filter(function (form) {
         return shortcutNamesWithoutKeymap.indexOf(form.type) !== -1;
       }).filter(function (form) {
         return form.autoFormatting;
       }).map(function (form) {
-        return /*#__PURE__*/React.createElement(Row, {
+        return jsx("div", {
+          css: row,
           key: "autoFormatting-".concat(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(function (form) {
+        }, 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(function (form) {
         return shortcutNamesWithoutKeymap.indexOf(form.type) === -1;
       }).map(function (form) {
-        return form.autoFormatting && /*#__PURE__*/React.createElement(Row, {
+        return form.autoFormatting && jsx("div", {
+          css: row,
           key: "autoFormatting-".concat(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/esm/plugins/help-dialog/ui/styles.js

@@ -2,19 +2,19 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
 
-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 var Header = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  z-index: ", ";\n  min-height: 24px;\n  padding: 20px 40px;\n  font-size: ", ";\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  box-shadow: 'none';\n  color: ", ";\n  background-color: ", ";\n  border-radius: ", "px;\n"])), akEditorUnitZIndex, relativeFontSizeToBase16(24), colors.N400, colors.N0, borderRadius());
-export var Footer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  z-index: ", ";\n  font-size: ", ";\n  line-height: 20px;\n  color: ", ";\n  padding: 24px;\n  text-align: right;\n  box-shadow: 'none';\n"])), akEditorUnitZIndex, relativeFontSizeToBase16(14), colors.N300);
-export var ContentWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  padding: 18px 20px;\n  border-bottom-right-radius: ", "px;\n  overflow: auto;\n  position: relative;\n  color: ", ";\n  background-color: ", ";\n"])), borderRadius(), colors.N400, colors.N0);
-export var Line = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  background: #fff;\n  content: '';\n  display: block;\n  height: 2px;\n  left: 0;\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: 100%;\n  min-width: 604px;\n"])));
-export var Content = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  min-width: 524px;\n  width: 100%;\n  position: relative;\n  display: flex;\n  justify-content: space-between;\n"])));
-export var ColumnLeft = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  width: 44%;\n"])));
-export var ColumnRight = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  width: 44%;\n"])));
-export var Row = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  margin: 20px 0;\n  display: flex;\n  justify-content: space-between;\n"])));
-export var Title = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  font-size: ", ";\n  font-weight: 400;\n"])), relativeFontSizeToBase16(18));
-export var CodeSm = styled.span(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  border-radius: ", "px;\n  width: 24px;\n  display: inline-block;\n  height: 24px;\n  line-height: 24px;\n  text-align: center;\n"])), colors.N20, borderRadius());
-export var CodeMd = styled.span(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  border-radius: ", "px;\n  display: inline-block;\n  height: 24px;\n  line-height: 24px;\n  width: 50px;\n  text-align: center;\n"])), colors.N20, borderRadius());
-export var CodeLg = styled.span(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  border-radius: ", "px;\n  display: inline-block;\n  height: 24px;\n  line-height: 24px;\n  padding: 0 10px;\n  text-align: center;\n"])), colors.N20, borderRadius());
+export var header = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  z-index: ", ";\n  min-height: 24px;\n  padding: 20px 40px;\n  font-size: ", ";\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  box-shadow: 'none';\n  color: ", ";\n  background-color: ", ";\n  border-radius: ", "px;\n"])), akEditorUnitZIndex, relativeFontSizeToBase16(24), colors.N400, colors.N0, borderRadius());
+export var footer = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  z-index: ", ";\n  font-size: ", ";\n  line-height: 20px;\n  color: ", ";\n  padding: 24px;\n  text-align: right;\n  box-shadow: 'none';\n"])), akEditorUnitZIndex, relativeFontSizeToBase16(14), colors.N300);
+export var contentWrapper = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  padding: 18px 20px;\n  border-bottom-right-radius: ", "px;\n  overflow: auto;\n  position: relative;\n  color: ", ";\n  background-color: ", ";\n"])), borderRadius(), colors.N400, colors.N0);
+export var line = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  background: #fff;\n  content: '';\n  display: block;\n  height: 2px;\n  left: 0;\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: 100%;\n  min-width: 604px;\n"])));
+export var content = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  min-width: 524px;\n  width: 100%;\n  position: relative;\n  display: flex;\n  justify-content: space-between;\n"])));
+export var columnLeft = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  width: 44%;\n"])));
+export var columnRight = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  width: 44%;\n"])));
+export var row = css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  margin: 20px 0;\n  display: flex;\n  justify-content: space-between;\n"])));
+export var title = css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  font-size: ", ";\n  font-weight: 400;\n"])), relativeFontSizeToBase16(18));
+export var codeSm = css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  border-radius: ", "px;\n  width: 24px;\n  display: inline-block;\n  height: 24px;\n  line-height: 24px;\n  text-align: center;\n"])), colors.N20, borderRadius());
+export var codeMd = css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  border-radius: ", "px;\n  display: inline-block;\n  height: 24px;\n  line-height: 24px;\n  width: 50px;\n  text-align: center;\n"])), colors.N20, borderRadius());
+export var codeLg = css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  border-radius: ", "px;\n  display: inline-block;\n  height: 24px;\n  line-height: 24px;\n  padding: 0 10px;\n  text-align: center;\n"])), colors.N20, borderRadius());

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

@@ -1,9 +1,8 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-var _templateObject, _templateObject2, _templateObject3;
+var _templateObject, _templateObject2;
 
-/* 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 var linkStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror {\n    ", "\n  }\n"])), linkSharedStyle);
 /**
@@ -11,5 +10,4 @@ export var linkStyles = css(_templateObject || (_templateObject = _taggedTemplat
  * to provide more context to a non-sighted user.
  */
 
-export var visuallyHiddenStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  clip: rect(1px, 1px, 1px, 1px);\n  clip-path: inset(50%);\n  height: 1px;\n  width: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n"])));
-export var ScreenReaderText = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", ";\n"])), visuallyHiddenStyles);
+export var visuallyHiddenStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  clip: rect(1px, 1px, 1px, 1px);\n  clip-path: inset(50%);\n  height: 1px;\n  width: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n"])));