@atlaskit/editor-core 162.0.0 → 164.0.0

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

@@ -7,22 +7,26 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TypeAheadListItem = exports.ItemIcon = exports.ICON_WIDTH = exports.ICON_HEIGHT = void 0;
+exports.itemTheme = exports.itemIcon = exports.TypeAheadListItem = exports.ITEM_PADDING = exports.ICON_WIDTH = exports.ICON_HEIGHT = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _react = _interopRequireWildcard(require("react"));
 
+var _react2 = require("@emotion/react");
+
 var _colors = require("@atlaskit/theme/colors");
 
+var _components = require("@atlaskit/theme/components");
+
 var _constants = require("@atlaskit/theme/constants");
 
-var _item = _interopRequireDefault(require("@atlaskit/item"));
+var _item = _interopRequireWildcard(require("@atlaskit/item"));
 
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
 var _fallback = _interopRequireDefault(require("../../quick-insert/assets/fallback"));
 
 var _styles = require("../../../ui/styles");
@@ -39,24 +43,58 @@ var ICON_HEIGHT = 40;
 exports.ICON_HEIGHT = ICON_HEIGHT;
 var ICON_WIDTH = 40;
 exports.ICON_WIDTH = ICON_WIDTH;
-
-var ItemIcon = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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, (0, _constants.borderRadius)(), ICON_WIDTH, ICON_HEIGHT);
-
-exports.ItemIcon = ItemIcon;
-
-var ItemBody = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  line-height: 1.4;\n"])));
-
-var ItemText = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  white-space: initial;\n  .item-description {\n    font-size: ", ";\n    color: ", ";\n    margin-top: 4px;\n  }\n"])), (0, _editorSharedStyles.relativeFontSizeToBase16)(11.67), _colors.N200);
-
-var ItemAfter = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  flex: 0 0 auto;\n"])));
-
+var ITEM_PADDING = 12;
+exports.ITEM_PADDING = ITEM_PADDING;
+var itemTheme = (0, _defineProperty2.default)({}, _item.itemThemeNamespace, {
+  padding: {
+    default: {
+      bottom: ITEM_PADDING,
+      left: ITEM_PADDING,
+      right: ITEM_PADDING,
+      top: ITEM_PADDING
+    }
+  },
+  beforeItemSpacing: {
+    default: function _default() {
+      return ITEM_PADDING;
+    }
+  },
+  borderRadius: function borderRadius() {
+    return 0;
+  },
+  hover: {
+    // background: colors.transparent, transparent is not a thing
+    text: _colors.text,
+    secondaryText: _colors.N200
+  },
+  selected: {
+    background: (0, _components.themed)({
+      light: _colors.N20,
+      dark: _colors.DN70
+    }),
+    text: (0, _components.themed)({
+      light: _colors.N800,
+      dark: _colors.DN600
+    }),
+    secondaryText: (0, _components.themed)({
+      light: _colors.N200,
+      dark: _colors.DN300
+    })
+  }
+});
+exports.itemTheme = itemTheme;
+var itemIcon = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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, (0, _constants.borderRadius)(), ICON_WIDTH, ICON_HEIGHT);
+exports.itemIcon = itemIcon;
+var itemBody = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  line-height: 1.4;\n"])));
+var itemText = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  white-space: initial;\n  .item-description {\n    font-size: ", ";\n    color: ", ";\n    margin-top: 4px;\n  }\n"])), (0, _editorSharedStyles.relativeFontSizeToBase16)(11.67), _colors.N200);
+var itemAfter = (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  flex: 0 0 auto;\n"])));
 var hidden = {
   overflow: 'hidden'
 };
 
 var FallbackIcon = /*#__PURE__*/_react.default.memo(function (_ref) {
   var label = _ref.label;
-  return /*#__PURE__*/_react.default.createElement(_fallback.default, null);
+  return (0, _react2.jsx)(_fallback.default, null);
 });
 
 var noop = function noop() {};
@@ -92,7 +130,9 @@ var TypeAheadListItem = function TypeAheadListItem(_ref2) {
       title = item.title,
       customRenderItem = item.render;
   var elementIcon = (0, _react.useMemo)(function () {
-    return /*#__PURE__*/_react.default.createElement(ItemIcon, null, icon ? icon() : /*#__PURE__*/_react.default.createElement(FallbackIcon, {
+    return (0, _react2.jsx)("div", {
+      css: itemIcon
+    }, icon ? icon() : (0, _react2.jsx)(FallbackIcon, {
       label: title
     }));
   }, [icon, title]);
@@ -105,14 +145,14 @@ var TypeAheadListItem = function TypeAheadListItem(_ref2) {
     }
 
     var Comp = customRenderItem;
-    return /*#__PURE__*/_react.default.createElement("div", {
+    return (0, _react2.jsx)("div", {
       "aria-selected": isSelected,
       "aria-label": title,
       role: "option",
       tabIndex: 0,
       style: hidden,
       onMouseMove: onMouseMove
-    }, /*#__PURE__*/_react.default.createElement(Comp, {
+    }, (0, _react2.jsx)(Comp, {
       onClick: insertSelectedItem,
       isSelected: isSelected,
       onHover: noop
@@ -123,19 +163,28 @@ var TypeAheadListItem = function TypeAheadListItem(_ref2) {
     return customItem;
   }
 
-  return /*#__PURE__*/_react.default.createElement(_item.default, {
+  return (0, _react2.jsx)(_item.default, {
     onClick: insertSelectedItem,
     onMouseMove: onMouseMove,
     elemBefore: elementIcon,
     isSelected: isSelected,
     "aria-selected": isSelected,
     "aria-label": item.title,
-    role: "option"
-  }, /*#__PURE__*/_react.default.createElement(ItemBody, null, /*#__PURE__*/_react.default.createElement(ItemText, null, /*#__PURE__*/_react.default.createElement("div", {
+    role: "option",
+    theme: itemTheme
+  }, (0, _react2.jsx)("div", {
+    css: itemBody
+  }, (0, _react2.jsx)("div", {
+    css: itemText
+  }, (0, _react2.jsx)("div", {
     className: "item-title"
-  }, item.title), item.description && /*#__PURE__*/_react.default.createElement("div", {
+  }, item.title), item.description && (0, _react2.jsx)("div", {
     className: "item-description"
-  }, item.description)), /*#__PURE__*/_react.default.createElement(ItemAfter, null, item.keyshortcut && /*#__PURE__*/_react.default.createElement(_styles.Shortcut, null, item.keyshortcut))));
+  }, item.description)), (0, _react2.jsx)("div", {
+    css: itemAfter
+  }, item.keyshortcut && (0, _react2.jsx)("div", {
+    css: _styles.shortcutStyle
+  }, item.keyshortcut))));
 };
 
 exports.TypeAheadListItem = TypeAheadListItem;

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

@@ -13,7 +13,7 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _react2 = require("@emotion/react");
 
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
@@ -25,6 +25,8 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _analytics = require("../../analytics");
 
+var _constants2 = require("../constants");
+
 var _TypeAheadList = require("./TypeAheadList");
 
 var _templateObject;
@@ -33,7 +35,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var TypeAheadContent = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])), _colors.N0, (0, _constants.borderRadius)(), _colors.N60A, _colors.N50A, (0, _constants.gridSize)() / 2);
+var typeAheadContent = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])), _colors.N0, (0, _constants.borderRadius)(), _colors.N60A, _colors.N50A, (0, _constants.gridSize)() / 2);
 
 var Highlight = function Highlight(_ref) {
   var state = _ref.state,
@@ -113,7 +115,7 @@ var TypeAheadPopup = /*#__PURE__*/_react.default.memo(function (props) {
   // we need to send the event again
   // eslint-disable-next-line react-hooks/exhaustive-deps
   triggerHandler]);
-  return /*#__PURE__*/_react.default.createElement(_ui.Popup, {
+  return (0, _react2.jsx)(_ui.Popup, {
     zIndex: _editorSharedStyles.akEditorFloatingDialogZIndex,
     target: anchorElement,
     mountTo: popupsMountPoint,
@@ -122,12 +124,14 @@ var TypeAheadPopup = /*#__PURE__*/_react.default.memo(function (props) {
     fitHeight: 300,
     fitWidth: 340,
     offset: OFFSET
-  }, /*#__PURE__*/_react.default.createElement(TypeAheadContent, {
-    className: "fabric-editor-typeahead"
-  }, /*#__PURE__*/_react.default.createElement(Highlight, {
+  }, (0, _react2.jsx)("div", {
+    css: typeAheadContent,
+    tabIndex: 0,
+    className: _constants2.TYPE_AHEAD_POPUP_CONTENT_CLASS
+  }, (0, _react2.jsx)(Highlight, {
     state: editorView.state,
     triggerHandler: triggerHandler
-  }), /*#__PURE__*/_react.default.createElement(_TypeAheadList.TypeAheadList, {
+  }), (0, _react2.jsx)(_TypeAheadList.TypeAheadList, {
     items: items,
     selectedIndex: selectedIndex,
     onItemHover: setSelectedItem,

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

@@ -19,7 +19,9 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
+
+var _react2 = require("@emotion/react");
 
 var _reactIntlNext = require("react-intl-next");
 
@@ -108,37 +110,39 @@ var ToolbarUndoRedo = /*#__PURE__*/function (_PureComponent) {
       var labelRedo = formatMessage(_messages.messages.redo);
       var canUndo = historyState.canUndo,
           canRedo = historyState.canRedo;
-      return /*#__PURE__*/_react.default.createElement(_styles.ButtonGroup, {
-        width: isReducedSpacing ? 'small' : 'large'
-      }, /*#__PURE__*/_react.default.createElement(_ToolbarButton.default, {
+      return (0, _react2.jsx)("span", {
+        css: _styles.buttonGroupStyle
+      }, (0, _react2.jsx)(_ToolbarButton.default, {
         buttonId: _ToolbarButton.TOOLBAR_BUTTON.UNDO,
         spacing: isReducedSpacing ? 'none' : 'default',
         onClick: handleUndo,
         disabled: !canUndo || disabled,
         "aria-label": labelUndo,
-        title: /*#__PURE__*/_react.default.createElement(_keymaps.ToolTipContent, {
+        title: (0, _react2.jsx)(_keymaps.ToolTipContent, {
           description: labelUndo,
           keymap: _keymaps.undo
         }),
-        iconBefore: /*#__PURE__*/_react.default.createElement(_undo.default, {
+        iconBefore: (0, _react2.jsx)(_undo.default, {
           label: ""
         }),
         testId: "ak-editor-toolbar-button-undo"
-      }), /*#__PURE__*/_react.default.createElement(_ToolbarButton.default, {
+      }), (0, _react2.jsx)(_ToolbarButton.default, {
         spacing: isReducedSpacing ? 'none' : 'default',
         buttonId: _ToolbarButton.TOOLBAR_BUTTON.REDO,
         onClick: handleRedo,
         disabled: !canRedo || disabled,
-        title: /*#__PURE__*/_react.default.createElement(_keymaps.ToolTipContent, {
+        title: (0, _react2.jsx)(_keymaps.ToolTipContent, {
           description: labelRedo,
           keymap: _keymaps.redo
         }),
-        iconBefore: /*#__PURE__*/_react.default.createElement(_redo.default, {
+        iconBefore: (0, _react2.jsx)(_redo.default, {
           label: ""
         }),
         testId: "ak-editor-toolbar-button-redo",
         "aria-label": labelRedo
-      }), /*#__PURE__*/_react.default.createElement(_styles.Separator, null));
+      }), (0, _react2.jsx)("span", {
+        css: _styles.separatorStyles
+      }));
     }
   }]);
   return ToolbarUndoRedo;

package/dist/cjs/plugins/unsupported-content/styles.js

@@ -9,7 +9,7 @@ exports.unsupportedStyles = exports.UnsupportedSharedCssClassName = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _styledComponents = require("styled-components");
+var _react = require("@emotion/react");
 
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
@@ -22,5 +22,5 @@ var UnsupportedSharedCssClassName = {
 exports.UnsupportedSharedCssClassName = UnsupportedSharedCssClassName;
 var inlineUnsupportedSelector = ".".concat(UnsupportedSharedCssClassName.INLINE_CONTAINER, " > span");
 var blockUnsupportedSelector = ".".concat(UnsupportedSharedCssClassName.BLOCK_CONTAINER, " > div");
-var unsupportedStyles = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", ", ", " {\n    cursor: pointer;\n  }\n\n  .", "", ",\n    .", "", " {\n    ", "\n  }\n\n  .danger {\n    .", "", ",\n      .", "", " {\n      border: ", "px solid ", ";\n      background-color: ", ";\n    }\n  }\n"])), blockUnsupportedSelector, inlineUnsupportedSelector, _editorSharedStyles.akEditorSelectedNodeClassName, blockUnsupportedSelector, _editorSharedStyles.akEditorSelectedNodeClassName, inlineUnsupportedSelector, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Background, _editorSharedStyles.SelectionStyle.Border]), _editorSharedStyles.akEditorSelectedNodeClassName, blockUnsupportedSelector, _editorSharedStyles.akEditorSelectedNodeClassName, inlineUnsupportedSelector, _editorSharedStyles.akEditorSelectedBorderSize, _editorSharedStyles.akEditorDeleteBorder, _editorSharedStyles.akEditorDeleteBackgroundWithOpacity);
+var unsupportedStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", ", ", " {\n    cursor: pointer;\n  }\n\n  .", "", ",\n    .", "", " {\n    ", "\n  }\n\n  .danger {\n    .", "", ",\n      .", "", " {\n      border: ", "px solid ", ";\n      background-color: ", ";\n    }\n  }\n"])), blockUnsupportedSelector, inlineUnsupportedSelector, _editorSharedStyles.akEditorSelectedNodeClassName, blockUnsupportedSelector, _editorSharedStyles.akEditorSelectedNodeClassName, inlineUnsupportedSelector, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Background, _editorSharedStyles.SelectionStyle.Border]), _editorSharedStyles.akEditorSelectedNodeClassName, blockUnsupportedSelector, _editorSharedStyles.akEditorSelectedNodeClassName, inlineUnsupportedSelector, _editorSharedStyles.akEditorSelectedBorderSize, _editorSharedStyles.akEditorDeleteBorder, _editorSharedStyles.akEditorDeleteBackgroundWithOpacity);
 exports.unsupportedStyles = unsupportedStyles;

package/dist/cjs/profiler/render-count.js

@@ -13,8 +13,6 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _uuid = _interopRequireDefault(require("uuid"));
 
-var _useComponentRendererTracking = require("../utils/react-hooks/use-component-renderer-tracking");
-
 var _utils = require("@atlaskit/editor-common/utils");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -53,7 +51,7 @@ var CoreRenderCountProfiler = function CoreRenderCountProfiler(_ref) {
     });
   };
 
-  (0, _useComponentRendererTracking.useComponentRenderTracking)({
+  (0, _utils.useComponentRenderTracking)({
     onRender: onRender,
     propsDiffingOptions: {
       enabled: false

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

@@ -25,7 +25,7 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _react = _interopRequireDefault(require("react"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _react2 = require("@emotion/react");
 
 var _clickAreaHelper = require("../click-area-helper");
 
@@ -35,9 +35,7 @@ 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; } }
 
-var ClickWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  flex-grow: 1;\n  height: 100%;\n"])));
-
-ClickWrapper.displayName = 'ClickWrapper';
+var clickWrapper = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  flex-grow: 1;\n  height: 100%;\n"])));
 
 var ClickAreaBlock = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(ClickAreaBlock, _React$Component);
@@ -69,7 +67,9 @@ var ClickAreaBlock = /*#__PURE__*/function (_React$Component) {
   (0, _createClass2.default)(ClickAreaBlock, [{
     key: "render",
     value: function render() {
-      return /*#__PURE__*/_react.default.createElement(ClickWrapper, {
+      return (0, _react2.jsx)("div", {
+        "data-testid": "click-wrapper",
+        css: clickWrapper,
         onClick: this.handleClick
       }, this.props.children);
     }

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

@@ -25,7 +25,7 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _react = _interopRequireDefault(require("react"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _react2 = require("@emotion/react");
 
 var _commands = require("../../../commands");
 
@@ -35,9 +35,7 @@ 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; } }
 
-var ClickArea = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  flex-grow: 1;\n"])));
-
-ClickArea.displayName = 'ClickArea';
+var clickArea = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  flex-grow: 1;\n"])));
 
 var ClickAreaInline = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(ClickAreaInline, _React$Component);
@@ -70,7 +68,8 @@ var ClickAreaInline = /*#__PURE__*/function (_React$Component) {
   (0, _createClass2.default)(ClickAreaInline, [{
     key: "render",
     value: function render() {
-      return /*#__PURE__*/_react.default.createElement(ClickArea, {
+      return (0, _react2.jsx)("div", {
+        css: clickArea,
         onClick: this.handleClick
       });
     }

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

@@ -25,7 +25,7 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _react = _interopRequireDefault(require("react"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _react2 = require("@emotion/react");
 
 var _clickAreaHelper = require("../click-area-helper");
 
@@ -40,11 +40,11 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
  * clicks/taps within or below the content (e.g. if the content
  * doesn't exceed the viewport, or whether it overflows it).
  */
-var ClickWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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 (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  height: 100%;\n  ", ";\n"])), isExpanded && minHeight ? "min-height: ".concat(minHeight, "px") : '');
+};
 
 /**
  * Click Area is responsible for improving UX by ensuring the user
@@ -101,13 +101,14 @@ var ClickAreaMobile = /*#__PURE__*/function (_React$Component) {
   (0, _createClass2.default)(ClickAreaMobile, [{
     key: "render",
     value: function render() {
-      return /*#__PURE__*/_react.default.createElement(ClickWrapper, {
+      return (0, _react2.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/cjs/ui/Addon/Dropdown/index.js

@@ -23,6 +23,8 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = _interopRequireDefault(require("react"));
 
+var _react2 = require("@emotion/react");
+
 var _styles = require("./styles");
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
@@ -72,7 +74,9 @@ var DropdownWrapper = /*#__PURE__*/function (_React$Component) {
         });
       });
 
-      return /*#__PURE__*/_react.default.createElement(_styles.Dropdown, null, children);
+      return (0, _react2.jsx)("div", {
+        css: _styles.dropdown
+      }, children);
     }
   }]);
   return DropdownWrapper;

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

@@ -5,11 +5,11 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Dropdown = void 0;
+exports.dropdown = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _react = require("@emotion/react");
 
 var _constants = require("@atlaskit/theme/constants");
 
@@ -17,6 +17,5 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _templateObject;
 
-var Dropdown = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])), (0, _constants.borderRadius)(), _colors.N60A, _colors.N60A);
-
-exports.Dropdown = Dropdown;
+var dropdown = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])), (0, _constants.borderRadius)(), _colors.N60A, _colors.N60A);
+exports.dropdown = dropdown;

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

@@ -1,25 +1,25 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = require("@emotion/react");
 
 var _styles = require("./styles");
 
+/** @jsx jsx */
 var DropdownItemWrapper = function DropdownItemWrapper(props) {
-  return /*#__PURE__*/_react.default.createElement(_styles.DropdownItem, {
+  return (0, _react.jsx)("div", {
+    css: _styles.dropdownItem,
     onClick: function onClick() {
       return props.onClick && props.onClick({
         actionOnClick: props.actionOnClick,
         renderOnClick: props.renderOnClick
       });
     }
-  }, /*#__PURE__*/_react.default.createElement("span", null, props.icon), props.children);
+  }, (0, _react.jsx)("span", null, props.icon), props.children);
 };
 
 var _default = DropdownItemWrapper;

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

@@ -5,16 +5,15 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.DropdownItem = void 0;
+exports.dropdownItem = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _react = require("@emotion/react");
 
 var _colors = require("@atlaskit/theme/colors");
 
 var _templateObject;
 
-var DropdownItem = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])), _colors.N800, _colors.N20);
-
-exports.DropdownItem = DropdownItem;
+var dropdownItem = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])), _colors.N800, _colors.N20);
+exports.dropdownItem = dropdownItem;

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

@@ -2,8 +2,6 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -19,7 +17,9 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("@emotion/react");
+
+var _react2 = require("react");
 
 var _reactIntlNext = require("react-intl-next");
 
@@ -33,10 +33,6 @@ var _styles = require("./styles");
 
 var _keymaps = require("../../keymaps");
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(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; } }
@@ -72,18 +68,16 @@ var Alignment = /*#__PURE__*/function (_PureComponent) {
           selectedAlignment = _this$props.selectedAlignment,
           className = _this$props.className,
           intl = _this$props.intl;
-      return /*#__PURE__*/_react.default.createElement(_styles.AlignmentWrapper, {
-        className: className,
-        style: {
-          maxWidth: 3 * 32
-        }
+      return (0, _react.jsx)("div", {
+        css: _styles.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.default.createElement(_AlignmentButton.default, {
-          content: /*#__PURE__*/_react.default.createElement(_iconMap.IconMap, {
+        return (0, _react.jsx)(_AlignmentButton.default, {
+          content: (0, _react.jsx)(_iconMap.IconMap, {
             alignment: value
           }),
           key: value,
@@ -97,7 +91,7 @@ var Alignment = /*#__PURE__*/function (_PureComponent) {
     }
   }]);
   return Alignment;
-}(_react.PureComponent);
+}(_react2.PureComponent);
 
 var _default = (0, _reactIntlNext.injectIntl)(Alignment);
 

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

@@ -5,16 +5,15 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.AlignmentWrapper = void 0;
+exports.alignmentWrapper = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _react = require("@emotion/react");
 
 var _constants = require("@atlaskit/theme/constants");
 
 var _templateObject;
 
-var AlignmentWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  padding: 0 ", "px;\n  display: flex;\n  flex-wrap: wrap;\n"])), (0, _constants.gridSize)());
-
-exports.AlignmentWrapper = AlignmentWrapper;
+var alignmentWrapper = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  padding: 0 ", "px;\n  display: flex;\n  flex-wrap: wrap;\n  max-width: ", "px;\n"])), (0, _constants.gridSize)(), 3 * 32);
+exports.alignmentWrapper = alignmentWrapper;