@atlaskit/editor-core 163.0.0 → 164.0.2

package/dist/esm/plugins/text-formatting/ui/Toolbar/index.js

@@ -10,9 +10,11 @@ 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, { useMemo, useState, useEffect } from 'react';
+import { jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
-import { Separator, Wrapper, ButtonGroup } from '../../../../ui/styles';
+import { separatorStyles, wrapperStyle, buttonGroupStyle } from '../../../../ui/styles';
 import { useFormattingIcons, useHasFormattingActived } from './hooks/formatting-icons';
 import { useClearIcon } from './hooks/clear-formatting-icon';
 import { useResponsiveToolbarButtons, useResponsiveIconTypeMenu } from './hooks/responsive-toolbar-buttons';
@@ -129,25 +131,27 @@ var ToolbarFormatting = function ToolbarFormatting(_ref) {
       setMessage(screenReaderMessage);
     }
   }, [screenReaderMessage]);
-  return /*#__PURE__*/React.createElement(ButtonGroup, {
-    width: isReducedSpacing ? 'small' : 'large'
-  }, message && /*#__PURE__*/React.createElement(Announcer, {
+  return jsx("span", {
+    css: buttonGroupStyle
+  }, message && jsx(Announcer, {
     ariaLive: "assertive",
     text: message,
     ariaRelevant: "additions",
     delay: 250
-  }), /*#__PURE__*/React.createElement(SingleToolbarButtons, {
+  }), jsx(SingleToolbarButtons, {
     items: singleItems,
     editorView: editorView,
     isReducedSpacing: isReducedSpacing
-  }), /*#__PURE__*/React.createElement(Wrapper, null, isToolbarDisabled ? /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(MoreButton, {
+  }), jsx("span", {
+    css: wrapperStyle
+  }, isToolbarDisabled ? jsx("div", null, jsx(MoreButton, {
     label: moreFormattingButtonLabel,
     isReducedSpacing: isReducedSpacing,
     isDisabled: true,
     isSelected: false,
     "aria-expanded": undefined,
     "aria-pressed": undefined
-  })) : /*#__PURE__*/React.createElement(FormattingTextDropdownMenu, {
+  })) : jsx(FormattingTextDropdownMenu, {
     popupsMountPoint: popupsMountPoint,
     popupsBoundariesElement: popupsBoundariesElement,
     popupsScrollableElement: popupsScrollableElement,
@@ -156,7 +160,9 @@ var ToolbarFormatting = function ToolbarFormatting(_ref) {
     moreButtonLabel: moreFormattingButtonLabel,
     hasFormattingActive: hasFormattingActive,
     items: items
-  }), /*#__PURE__*/React.createElement(Separator, null)));
+  }), jsx("span", {
+    css: separatorStyles
+  })));
 };
 
 var Toolbar = /*#__PURE__*/function (_React$PureComponent) {
@@ -182,7 +188,7 @@ var Toolbar = /*#__PURE__*/function (_React$PureComponent) {
           isToolbarDisabled = _this$props.isToolbarDisabled,
           shouldUseResponsiveToolbar = _this$props.shouldUseResponsiveToolbar,
           intl = _this$props.intl;
-      return /*#__PURE__*/React.createElement(ToolbarFormatting, {
+      return jsx(ToolbarFormatting, {
         popupsMountPoint: popupsMountPoint,
         popupsScrollableElement: popupsScrollableElement,
         toolbarSize: toolbarSize,

package/dist/esm/plugins/text-formatting/ui/Toolbar/more-button.js

@@ -1,6 +1,8 @@
+/** @jsx jsx */
 import React from 'react';
+import { jsx } from '@emotion/react';
 import MoreIcon from '@atlaskit/icon/glyph/editor/more';
-import { TriggerWrapper } from '../../../../ui/styles';
+import { triggerWrapperStyles } from '../../../../ui/styles';
 import ToolbarButton from '../../../../ui/ToolbarButton';
 export var MoreButton = /*#__PURE__*/React.memo(function (_ref) {
   var label = _ref.label,
@@ -9,13 +11,15 @@ export var MoreButton = /*#__PURE__*/React.memo(function (_ref) {
       isSelected = _ref.isSelected,
       isDisabled = _ref.isDisabled,
       onClick = _ref.onClick;
-  return /*#__PURE__*/React.createElement(ToolbarButton, {
+  return jsx(ToolbarButton, {
     disabled: isDisabled,
     selected: isSelected,
     onClick: onClick,
     spacing: isReducedSpacing ? 'none' : 'default',
     title: label,
-    iconBefore: /*#__PURE__*/React.createElement(TriggerWrapper, null, /*#__PURE__*/React.createElement(MoreIcon, {
+    iconBefore: jsx("div", {
+      css: triggerWrapperStyles
+    }, jsx(MoreIcon, {
       label: ""
     })),
     "aria-expanded": ariaExpanded,

package/dist/esm/plugins/text-formatting/ui/Toolbar/single-toolbar-buttons.js

@@ -1,5 +1,7 @@
+/** @jsx jsx */
 import React, { useCallback } from 'react';
-import { ButtonGroup } from '../../../../ui/styles';
+import { jsx } from '@emotion/react';
+import { buttonGroupStyle } from '../../../../ui/styles';
 import ToolbarButton from '../../../../ui/ToolbarButton';
 export var SingleToolbarButtons = /*#__PURE__*/React.memo(function (_ref) {
   var items = _ref.items,
@@ -11,10 +13,10 @@ export var SingleToolbarButtons = /*#__PURE__*/React.memo(function (_ref) {
       return false;
     };
   }, [editorView.state, editorView.dispatch]);
-  return /*#__PURE__*/React.createElement(ButtonGroup, {
-    width: isReducedSpacing ? 'small' : 'large'
+  return jsx("span", {
+    css: buttonGroupStyle
   }, items.map(function (item) {
-    return /*#__PURE__*/React.createElement(ToolbarButton, {
+    return jsx(ToolbarButton, {
       key: item.key,
       buttonId: item.buttonId,
       spacing: isReducedSpacing ? 'none' : 'default',

package/dist/esm/plugins/type-ahead/ui/InputQuery.js

@@ -2,13 +2,14 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject;
 
-import React, { useRef, useEffect, useCallback } from 'react';
-import styled from 'styled-components';
+/** @jsx jsx */
+import React, { useRef, useEffect, useCallback, Fragment } from 'react';
+import { css, jsx } from '@emotion/react';
 import { keyName as keyNameNormalized } from 'w3c-keyname';
 import { browser, ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/utils';
 import { CloseSelectionOptions, TYPE_AHEAD_POPUP_CONTENT_CLASS } from '../constants';
 import { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
-var QuerySpan = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  outline: none;\n"])));
+var querySpan = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  outline: none;\n"])));
 
 var isNavigationKey = function isNavigationKey(event) {
   return ['Enter', 'Tab', 'ArrowDown', 'ArrowUp'].includes(event.key);
@@ -305,9 +306,16 @@ export var InputQuery = /*#__PURE__*/React.memo(function (_ref) {
       });
     }
   }, [forceFocus, reopenQuery]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, triggerQueryPrefix, /*#__PURE__*/React.createElement(QuerySpan, {
+  /**
+    When we migrated to emotion from styled component, we started getting this error.
+    jsx-a11y/interactive-supports-focus
+    Task added in https://product-fabric.atlassian.net/wiki/spaces/E/pages/3182068181/Potential+improvements#Moderate-changes.
+   */
+
+  return jsx(Fragment, null, triggerQueryPrefix, jsx("span", {
+    css: querySpan,
     contentEditable: true,
-    innerRef: ref,
+    ref: ref,
     onKeyUp: onKeyUp,
     onClick: onClick,
     role: "textbox",

package/dist/esm/plugins/type-ahead/ui/TypeAheadListItem.js

@@ -3,16 +3,17 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
+/** @jsx jsx */
 import React, { useCallback, useMemo, useRef, useLayoutEffect } from 'react';
+import { css, jsx } from '@emotion/react';
 import { text as colorsText, N200, N20, DN70, N800, DN600, DN300 } from '@atlaskit/theme/colors';
 import { themed } from '@atlaskit/theme/components';
 import { borderRadius } from '@atlaskit/theme/constants'; // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 
 import Item, { itemThemeNamespace } from '@atlaskit/item';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
-import styled from 'styled-components';
 import IconFallback from '../../quick-insert/assets/fallback';
-import { Shortcut } from '../../../ui/styles';
+import { shortcutStyle } from '../../../ui/styles';
 import { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
 export var ICON_HEIGHT = 40;
 export var ICON_WIDTH = 40;
@@ -54,16 +55,16 @@ export var itemTheme = _defineProperty({}, itemThemeNamespace, {
     })
   }
 });
-export var ItemIcon = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: ", "px;\n  height: ", "px;\n  overflow: hidden;\n  border: 1px solid rgba(223, 225, 229, 0.5); /* N60 at 50% */\n  border-radius: ", "px;\n  box-sizing: border-box;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  div {\n    width: ", "px;\n    height: ", "px;\n  }\n"])), ICON_WIDTH, ICON_HEIGHT, borderRadius(), ICON_WIDTH, ICON_HEIGHT);
-var ItemBody = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  line-height: 1.4;\n"])));
-var ItemText = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  white-space: initial;\n  .item-description {\n    font-size: ", ";\n    color: ", ";\n    margin-top: 4px;\n  }\n"])), relativeFontSizeToBase16(11.67), N200);
-var ItemAfter = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  flex: 0 0 auto;\n"])));
+export var itemIcon = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: ", "px;\n  height: ", "px;\n  overflow: hidden;\n  border: 1px solid rgba(223, 225, 229, 0.5); /* N60 at 50% */\n  border-radius: ", "px;\n  box-sizing: border-box;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  div {\n    width: ", "px;\n    height: ", "px;\n  }\n"])), ICON_WIDTH, ICON_HEIGHT, borderRadius(), ICON_WIDTH, ICON_HEIGHT);
+var itemBody = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  line-height: 1.4;\n"])));
+var itemText = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  white-space: initial;\n  .item-description {\n    font-size: ", ";\n    color: ", ";\n    margin-top: 4px;\n  }\n"])), relativeFontSizeToBase16(11.67), N200);
+var itemAfter = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  flex: 0 0 auto;\n"])));
 var hidden = {
   overflow: 'hidden'
 };
 var FallbackIcon = /*#__PURE__*/React.memo(function (_ref) {
   var label = _ref.label;
-  return /*#__PURE__*/React.createElement(IconFallback, null);
+  return jsx(IconFallback, null);
 });
 
 var noop = function noop() {};
@@ -99,7 +100,9 @@ export var TypeAheadListItem = function TypeAheadListItem(_ref2) {
       title = item.title,
       customRenderItem = item.render;
   var elementIcon = useMemo(function () {
-    return /*#__PURE__*/React.createElement(ItemIcon, null, icon ? icon() : /*#__PURE__*/React.createElement(FallbackIcon, {
+    return jsx("div", {
+      css: itemIcon
+    }, icon ? icon() : jsx(FallbackIcon, {
       label: title
     }));
   }, [icon, title]);
@@ -112,14 +115,14 @@ export var TypeAheadListItem = function TypeAheadListItem(_ref2) {
     }
 
     var Comp = customRenderItem;
-    return /*#__PURE__*/React.createElement("div", {
+    return jsx("div", {
       "aria-selected": isSelected,
       "aria-label": title,
       role: "option",
       tabIndex: 0,
       style: hidden,
       onMouseMove: onMouseMove
-    }, /*#__PURE__*/React.createElement(Comp, {
+    }, jsx(Comp, {
       onClick: insertSelectedItem,
       isSelected: isSelected,
       onHover: noop
@@ -130,7 +133,7 @@ export var TypeAheadListItem = function TypeAheadListItem(_ref2) {
     return customItem;
   }
 
-  return /*#__PURE__*/React.createElement(Item, {
+  return jsx(Item, {
     onClick: insertSelectedItem,
     onMouseMove: onMouseMove,
     elemBefore: elementIcon,
@@ -139,9 +142,17 @@ export var TypeAheadListItem = function TypeAheadListItem(_ref2) {
     "aria-label": item.title,
     role: "option",
     theme: itemTheme
-  }, /*#__PURE__*/React.createElement(ItemBody, null, /*#__PURE__*/React.createElement(ItemText, null, /*#__PURE__*/React.createElement("div", {
+  }, jsx("div", {
+    css: itemBody
+  }, jsx("div", {
+    css: itemText
+  }, jsx("div", {
     className: "item-title"
-  }, item.title), item.description && /*#__PURE__*/React.createElement("div", {
+  }, item.title), item.description && jsx("div", {
     className: "item-description"
-  }, item.description)), /*#__PURE__*/React.createElement(ItemAfter, null, item.keyshortcut && /*#__PURE__*/React.createElement(Shortcut, null, item.keyshortcut))));
+  }, item.description)), jsx("div", {
+    css: itemAfter
+  }, item.keyshortcut && jsx("div", {
+    css: shortcutStyle
+  }, item.keyshortcut))));
 };

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

@@ -2,8 +2,9 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject;
 
+/** @jsx jsx */
 import React, { useEffect, useMemo } from 'react';
-import styled from 'styled-components';
+import { css, jsx } from '@emotion/react';
 import { akEditorFloatingDialogZIndex } from '@atlaskit/editor-shared-styles';
 import { Popup } from '@atlaskit/editor-common/ui';
 import { borderRadius, gridSize } from '@atlaskit/theme/constants';
@@ -11,7 +12,7 @@ import { N0, N60A, N50A } from '@atlaskit/theme/colors';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '../../analytics';
 import { TYPE_AHEAD_POPUP_CONTENT_CLASS } from '../constants';
 import { TypeAheadList } from './TypeAheadList';
-var TypeAheadContent = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: ", ";\n  border-radius: ", "px;\n  box-shadow: 0 0 1px ", ", 0 4px 8px -2px ", ";\n  padding: ", "px 0;\n  width: 320px;\n  max-height: 380px; /* ~5.5 visibile items */\n  overflow-y: auto;\n  -ms-overflow-style: -ms-autohiding-scrollbar;\n  position: relative;\n"])), N0, borderRadius(), N60A, N50A, gridSize() / 2);
+var typeAheadContent = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: ", ";\n  border-radius: ", "px;\n  box-shadow: 0 0 1px ", ", 0 4px 8px -2px ", ";\n  padding: ", "px 0;\n  width: 320px;\n  max-height: 380px; /* ~5.5 visibile items */\n  overflow-y: auto;\n  -ms-overflow-style: -ms-autohiding-scrollbar;\n  position: relative;\n"])), N0, borderRadius(), N60A, N50A, gridSize() / 2);
 
 var Highlight = function Highlight(_ref) {
   var state = _ref.state,
@@ -90,7 +91,7 @@ export var TypeAheadPopup = /*#__PURE__*/React.memo(function (props) {
   // we need to send the event again
   // eslint-disable-next-line react-hooks/exhaustive-deps
   triggerHandler]);
-  return /*#__PURE__*/React.createElement(Popup, {
+  return jsx(Popup, {
     zIndex: akEditorFloatingDialogZIndex,
     target: anchorElement,
     mountTo: popupsMountPoint,
@@ -99,13 +100,14 @@ export var TypeAheadPopup = /*#__PURE__*/React.memo(function (props) {
     fitHeight: 300,
     fitWidth: 340,
     offset: OFFSET
-  }, /*#__PURE__*/React.createElement(TypeAheadContent, {
+  }, jsx("div", {
+    css: typeAheadContent,
     tabIndex: 0,
     className: TYPE_AHEAD_POPUP_CONTENT_CLASS
-  }, /*#__PURE__*/React.createElement(Highlight, {
+  }, jsx(Highlight, {
     state: editorView.state,
     triggerHandler: triggerHandler
-  }), /*#__PURE__*/React.createElement(TypeAheadList, {
+  }), jsx(TypeAheadList, {
     items: items,
     selectedIndex: selectedIndex,
     onItemHover: setSelectedItem,

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

@@ -8,12 +8,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; } }
 
-import React, { PureComponent } from 'react';
+/** @jsx jsx */
+import { PureComponent } from 'react';
+import { jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import UndoIcon from '@atlaskit/icon/glyph/undo';
 import RedoIcon from '@atlaskit/icon/glyph/redo';
 import { undo as undoKeymap, redo as redoKeymap, ToolTipContent } from '../../../../keymaps';
-import { ButtonGroup, Separator } from '../../../../ui/styles';
+import { buttonGroupStyle, separatorStyles } from '../../../../ui/styles';
 import ToolbarButton, { TOOLBAR_BUTTON } from '../../../../ui/ToolbarButton';
 import { messages } from '../../messages';
 import { createTypeAheadTools } from '../../../type-ahead/api';
@@ -81,37 +83,39 @@ export var ToolbarUndoRedo = /*#__PURE__*/function (_PureComponent) {
       var labelRedo = formatMessage(messages.redo);
       var canUndo = historyState.canUndo,
           canRedo = historyState.canRedo;
-      return /*#__PURE__*/React.createElement(ButtonGroup, {
-        width: isReducedSpacing ? 'small' : 'large'
-      }, /*#__PURE__*/React.createElement(ToolbarButton, {
+      return jsx("span", {
+        css: buttonGroupStyle
+      }, jsx(ToolbarButton, {
         buttonId: TOOLBAR_BUTTON.UNDO,
         spacing: isReducedSpacing ? 'none' : 'default',
         onClick: handleUndo,
         disabled: !canUndo || disabled,
         "aria-label": labelUndo,
-        title: /*#__PURE__*/React.createElement(ToolTipContent, {
+        title: jsx(ToolTipContent, {
           description: labelUndo,
           keymap: undoKeymap
         }),
-        iconBefore: /*#__PURE__*/React.createElement(UndoIcon, {
+        iconBefore: jsx(UndoIcon, {
           label: ""
         }),
         testId: "ak-editor-toolbar-button-undo"
-      }), /*#__PURE__*/React.createElement(ToolbarButton, {
+      }), jsx(ToolbarButton, {
         spacing: isReducedSpacing ? 'none' : 'default',
         buttonId: TOOLBAR_BUTTON.REDO,
         onClick: handleRedo,
         disabled: !canRedo || disabled,
-        title: /*#__PURE__*/React.createElement(ToolTipContent, {
+        title: jsx(ToolTipContent, {
           description: labelRedo,
           keymap: redoKeymap
         }),
-        iconBefore: /*#__PURE__*/React.createElement(RedoIcon, {
+        iconBefore: jsx(RedoIcon, {
           label: ""
         }),
         testId: "ak-editor-toolbar-button-redo",
         "aria-label": labelRedo
-      }), /*#__PURE__*/React.createElement(Separator, null));
+      }), jsx("span", {
+        css: separatorStyles
+      }));
     }
   }]);
 

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

@@ -13,11 +13,11 @@ 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 styled from 'styled-components';
+import { css, jsx } from '@emotion/react';
 import { clickAreaClickHandler } from '../click-area-helper';
-var ClickWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  flex-grow: 1;\n  height: 100%;\n"])));
-ClickWrapper.displayName = 'ClickWrapper';
+var clickWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  flex-grow: 1;\n  height: 100%;\n"])));
 
 var ClickAreaBlock = /*#__PURE__*/function (_React$Component) {
   _inherits(ClickAreaBlock, _React$Component);
@@ -51,7 +51,9 @@ var ClickAreaBlock = /*#__PURE__*/function (_React$Component) {
   _createClass(ClickAreaBlock, [{
     key: "render",
     value: function render() {
-      return /*#__PURE__*/React.createElement(ClickWrapper, {
+      return jsx("div", {
+        "data-testid": "click-wrapper",
+        css: clickWrapper,
         onClick: this.handleClick
       }, this.props.children);
     }

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

@@ -13,11 +13,11 @@ 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 styled from 'styled-components';
+import { css, jsx } from '@emotion/react';
 import { createParagraphAtEnd } from '../../../commands';
-var ClickArea = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  flex-grow: 1;\n"])));
-ClickArea.displayName = 'ClickArea';
+var clickArea = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  flex-grow: 1;\n"])));
 
 var ClickAreaInline = /*#__PURE__*/function (_React$Component) {
   _inherits(ClickAreaInline, _React$Component);
@@ -52,7 +52,8 @@ var ClickAreaInline = /*#__PURE__*/function (_React$Component) {
   _createClass(ClickAreaInline, [{
     key: "render",
     value: function render() {
-      return /*#__PURE__*/React.createElement(ClickArea, {
+      return jsx("div", {
+        css: clickArea,
         onClick: this.handleClick
       });
     }

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

@@ -13,8 +13,9 @@ 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 styled from 'styled-components';
+import { css, jsx } from '@emotion/react';
 import { clickAreaClickHandler } from '../click-area-helper';
 /**
  * Fills the visible viewport height so that it can filter
@@ -22,10 +23,11 @@ import { clickAreaClickHandler } from '../click-area-helper';
  * doesn't exceed the viewport, or whether it overflows it).
  */
 
-var ClickWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  height: 100%;\n  ", "\n"])), function (props) {
-  return props.isExpanded && props.minHeight && "min-height: ".concat(props.minHeight, "px");
-});
-ClickWrapper.displayName = 'ClickWrapper';
+var clickWrapper = function clickWrapper(_ref) {
+  var isExpanded = _ref.isExpanded,
+      minHeight = _ref.minHeight;
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  height: 100%;\n  ", ";\n"])), isExpanded && minHeight ? "min-height: ".concat(minHeight, "px") : '');
+};
 
 /**
  * Click Area is responsible for improving UX by ensuring the user
@@ -85,13 +87,14 @@ var ClickAreaMobile = /*#__PURE__*/function (_React$Component) {
   _createClass(ClickAreaMobile, [{
     key: "render",
     value: function render() {
-      return /*#__PURE__*/React.createElement(ClickWrapper, {
+      return jsx("div", {
+        css: clickWrapper({
+          isExpanded: this.props.isExpanded,
+          minHeight: this.props.minHeight
+        }),
         className: "editor-click-wrapper",
-        minHeight: this.props.minHeight,
-        persistScrollGutter: this.props.persistScrollGutter,
         onClick: this.handleClick,
-        innerRef: this.clickElementRef,
-        isExpanded: this.props.isExpanded
+        ref: this.clickElementRef
       }, this.props.children);
     }
   }]);

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

@@ -10,8 +10,10 @@ 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 { Dropdown } from './styles';
+import { jsx } from '@emotion/react';
+import { dropdown } from './styles';
 
 var DropdownWrapper = /*#__PURE__*/function (_React$Component) {
   _inherits(DropdownWrapper, _React$Component);
@@ -57,7 +59,9 @@ var DropdownWrapper = /*#__PURE__*/function (_React$Component) {
           onClick: _this2.handleClick
         });
       });
-      return /*#__PURE__*/React.createElement(Dropdown, null, children);
+      return jsx("div", {
+        css: dropdown
+      }, children);
     }
   }]);
 

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

@@ -2,7 +2,7 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject;
 
-import styled from 'styled-components';
+import { css } from '@emotion/react';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { N60A } from '@atlaskit/theme/colors';
-export var Dropdown = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  background: white;\n  border-radius: ", "px;\n  box-shadow: 0 4px 8px -2px ", ", 0 0 1px ", ";\n  box-sizing: border-box;\n  padding: 4px 0;\n"])), borderRadius(), N60A, N60A);
+export var dropdown = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  background: white;\n  border-radius: ", "px;\n  box-shadow: 0 4px 8px -2px ", ", 0 0 1px ", ";\n  box-sizing: border-box;\n  padding: 4px 0;\n"])), borderRadius(), N60A, N60A);

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

@@ -1,15 +1,17 @@
-import React from 'react';
-import { DropdownItem } from './styles';
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { dropdownItem } from './styles';
 
 var DropdownItemWrapper = function DropdownItemWrapper(props) {
-  return /*#__PURE__*/React.createElement(DropdownItem, {
+  return jsx("div", {
+    css: dropdownItem,
     onClick: function onClick() {
       return props.onClick && props.onClick({
         actionOnClick: props.actionOnClick,
         renderOnClick: props.renderOnClick
       });
     }
-  }, /*#__PURE__*/React.createElement("span", null, props.icon), props.children);
+  }, jsx("span", null, props.icon), props.children);
 };
 
 export default DropdownItemWrapper;

package/dist/esm/ui/Addon/DropdownItem/styles.js

@@ -2,6 +2,6 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject;
 
-import styled from 'styled-components';
+import { css } from '@emotion/react';
 import { N800, N20 } from '@atlaskit/theme/colors';
-export var DropdownItem = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  text-decoration: none;\n  padding: 8px 32px 8px 12px;\n  color: ", ";\n  > span {\n    display: flex;\n    margin-right: 8px;\n  }\n  &:hover {\n    background-color: ", ";\n  }\n"])), N800, N20);
+export var dropdownItem = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  text-decoration: none;\n  padding: 8px 32px 8px 12px;\n  color: ", ";\n  > span {\n    display: flex;\n    margin-right: 8px;\n  }\n  &:hover {\n    background-color: ", ";\n  }\n"])), N800, N20);

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

@@ -8,13 +8,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; } }
 
-import React from 'react';
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import { PureComponent } from 'react';
 import { injectIntl } from 'react-intl-next';
 import { IconMap } from '../../plugins/alignment/ui/ToolbarAlignment/icon-map';
 import AlignmentButton from './AlignmentButton';
 import { alignmentMessages } from './messages';
-import { AlignmentWrapper } from './styles';
+import { alignmentWrapper } from './styles';
 import { alignLeft, alignRight } from '../../keymaps';
 var alignmentOptions = [{
   title: alignmentMessages.alignLeft,
@@ -48,18 +49,16 @@ var Alignment = /*#__PURE__*/function (_PureComponent) {
           selectedAlignment = _this$props.selectedAlignment,
           className = _this$props.className,
           intl = _this$props.intl;
-      return /*#__PURE__*/React.createElement(AlignmentWrapper, {
-        className: className,
-        style: {
-          maxWidth: 3 * 32
-        }
+      return jsx("div", {
+        css: alignmentWrapper,
+        className: className
       }, alignmentOptions.map(function (alignment) {
         var value = alignment.value,
             title = alignment.title,
             shortcut = alignment.shortcut;
         var message = intl.formatMessage(title);
-        return /*#__PURE__*/React.createElement(AlignmentButton, {
-          content: /*#__PURE__*/React.createElement(IconMap, {
+        return jsx(AlignmentButton, {
+          content: jsx(IconMap, {
             alignment: value
           }),
           key: value,

package/dist/esm/ui/Alignment/styles.js

@@ -2,6 +2,6 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject;
 
-import styled from 'styled-components';
+import { css } from '@emotion/react';
 import { gridSize } from '@atlaskit/theme/constants';
-export var AlignmentWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: 0 ", "px;\n  display: flex;\n  flex-wrap: wrap;\n"])), gridSize());
+export var alignmentWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: 0 ", "px;\n  display: flex;\n  flex-wrap: wrap;\n  max-width: ", "px;\n"])), gridSize(), 3 * 32);