@atlaskit/editor-core 161.0.0 → 163.0.0

package/dist/esm/plugins/fake-text-cursor/styles.js

@@ -2,6 +2,6 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject;
 
-import { css } from 'styled-components';
+import { css } from '@emotion/react';
 import { B75 } from '@atlaskit/theme/colors';
 export var fakeCursorStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror {\n    .ProseMirror-fake-text-cursor {\n      display: inline;\n      pointer-events: none;\n      position: relative;\n    }\n\n    .ProseMirror-fake-text-cursor::after {\n      content: '';\n      display: inline;\n      top: 0;\n      position: absolute;\n      border-right: 1px solid rgba(0, 0, 0, 0.4);\n    }\n\n    .ProseMirror-fake-text-selection {\n      display: inline;\n      pointer-events: none;\n      position: relative;\n      background-color: ", ";\n    }\n  }\n"])), B75);

package/dist/esm/plugins/feature-flags-context/feature-flags-from-props.js

@@ -58,6 +58,6 @@ export function createFeatureFlagsFromProps(props) {
     maxUnsafeChromeSpellcheckingVersion: safeNumberFeatureFlag((_props$featureFlags36 = props.featureFlags) === null || _props$featureFlags36 === void 0 ? void 0 : _props$featureFlags36.maxUnsafeChromeSpellcheckingVersion),
     useNativeCollabPlugin: Boolean(typeof ((_props$collabEdit = props.collabEdit) === null || _props$collabEdit === void 0 ? void 0 : _props$collabEdit.useNativePlugin) === 'boolean' ? !!((_props$collabEdit2 = props.collabEdit) !== null && _props$collabEdit2 !== void 0 && _props$collabEdit2.useNativePlugin) : false),
     chromeCursorHandlerFixedVersion: typeof ((_props$featureFlags37 = props.featureFlags) === null || _props$featureFlags37 === void 0 ? void 0 : _props$featureFlags37.chromeCursorHandlerFixedVersion) === 'string' ? Number(props.featureFlags.chromeCursorHandlerFixedVersion) || undefined : undefined,
-    viewChangingExperimentToolbarStyle: typeof ((_props$featureFlags38 = props.featureFlags) === null || _props$featureFlags38 === void 0 ? void 0 : _props$featureFlags38.viewChangingExperimentToolbarStyle) === 'string' ? props.featureFlags.viewChangingExperimentToolbarStyle || undefined : undefined
+    viewChangingExperimentToolbarStyle: typeof ((_props$featureFlags38 = props.featureFlags) === null || _props$featureFlags38 === void 0 ? void 0 : _props$featureFlags38['view-changing-experiment-toolbar-style']) === 'string' ? props.featureFlags['view-changing-experiment-toolbar-style'] || undefined : undefined
   });
 }

package/dist/esm/plugins/find-replace/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 { B75, B200 } from '@atlaskit/theme/colors';
 export var searchMatchBgColour = B75;
 export var selectedSearchMatchBgColour = B200;

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

@@ -12,7 +12,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 /** @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/esm/plugins/find-replace/ui/FindReplace.js

@@ -12,7 +12,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 /** @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/esm/plugins/find-replace/ui/Replace.js

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

@@ -1,5 +1,9 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject;
+
 /** @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 var replaceSectionButtonStyles = css({
@@ -20,15 +24,7 @@ export var wrapperStyles = css({
     margin: '0px 4px'
   }
 });
-export var sectionWrapperStyles = css({
-  display: 'flex',
-  alignItems: 'column',
-  '> *': {
-    display: 'inline-flex',
-    height: '32px',
-    flex: '0 0 auto'
-  }
-});
+export var sectionWrapperStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n\n  & > * {\n    display: inline-flex;\n    height: 32px;\n    flex: 0 0 auto;\n  }\n\n  & > [data-ds--text-field--container] {\n    display: flex;\n    flex: 1 1 auto;\n  }\n"])));
 export var countStyles = css({
   color: "".concat(N60),
   fontSize: "".concat(relativeFontSizeToBase16(12)),

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

@@ -14,7 +14,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 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
 
@@ -28,7 +28,7 @@ export var menuItemDimensions = {
   height: 32
 };
 var Spacer = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex: 1;\n  padding: 8px;\n"])));
-var MenuContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  min-width: ", "px;\n"])), menuItemDimensions.width);
+var MenuContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  min-width: ", "px;\n\n  // temporary solution before we migrated off dst/item\n  & span[class^='ItemParts__Before'] {\n    margin-right: 4px;\n  }\n"])), menuItemDimensions.width);
 var padding = gridSize();
 export var itemSpacing = gridSize() / 2;
 var editorItemTheme = {
@@ -70,9 +70,7 @@ var Dropdown = /*#__PURE__*/function (_Component) {
           dispatchCommand = _this$props.dispatchCommand,
           items = _this$props.items,
           intl = _this$props.intl;
-      return /*#__PURE__*/React.createElement(ThemeProvider, {
-        theme: _defineProperty({}, itemThemeNamespace, editorItemTheme)
-      }, /*#__PURE__*/React.createElement(MenuContainer, null, items.filter(function (item) {
+      return /*#__PURE__*/React.createElement(MenuContainer, null, items.filter(function (item) {
         return !item.hidden;
       }).map(function (item, idx) {
         var itemContent = /*#__PURE__*/React.createElement(Item, {
@@ -90,7 +88,8 @@ var Dropdown = /*#__PURE__*/function (_Component) {
             hide();
           },
           "data-testid": item.testId,
-          isDisabled: item.disabled
+          isDisabled: item.disabled,
+          theme: _defineProperty({}, itemThemeNamespace, editorItemTheme)
         }, item.title);
 
         if (item.tooltip) {
@@ -101,7 +100,7 @@ var Dropdown = /*#__PURE__*/function (_Component) {
         }
 
         return itemContent;
-      })));
+      }));
     }
   }, {
     key: "renderSelected",

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/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"])));