@atlaskit/editor-core 162.0.2 → 164.0.1

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;

package/dist/cjs/ui/Appearance/Chromeless.js

@@ -25,13 +25,13 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _react = _interopRequireDefault(require("react"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _react2 = require("@emotion/react");
 
 var _PluginSlot = _interopRequireDefault(require("../PluginSlot"));
 
 var _WithPluginState = _interopRequireDefault(require("../WithPluginState"));
 
-var _ContentStyles = _interopRequireDefault(require("../ContentStyles"));
+var _ContentStyles = require("../ContentStyles");
 
 var _maxContentSize = require("../../plugins/max-content-size");
 
@@ -45,12 +45,8 @@ 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 ChromelessEditor = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  line-height: 20px;\n  height: auto;\n  min-height: 30px;\n  ", " overflow-x: hidden;\n  overflow-y: auto;\n  ", " max-width: inherit;\n  box-sizing: border-box;\n  word-wrap: break-word;\n\n  div > .ProseMirror {\n    outline: none;\n    white-space: pre-wrap;\n    padding: 0;\n    margin: 0;\n  }\n"])), function (props) {
-  return props.maxHeight ? 'max-height: ' + props.maxHeight + 'px;' : '';
-}, _styles.scrollbarStyles);
-
-ChromelessEditor.displayName = 'ChromelessEditor';
-var ContentArea = (0, _styledComponents.default)(_ContentStyles.default)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)([""])));
+var chromelessEditor = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  line-height: 20px;\n  height: auto;\n  min-height: 30px;\n\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n  max-width: inherit;\n  box-sizing: border-box;\n  word-wrap: break-word;\n\n  div > .ProseMirror {\n    outline: none;\n    white-space: pre-wrap;\n    padding: 0;\n    margin: 0;\n  }\n"])), _styles.scrollbarStyles);
+var ContentArea = (0, _ContentStyles.createEditorContentStyle)();
 ContentArea.displayName = 'ContentArea';
 
 var Editor = /*#__PURE__*/function (_React$Component) {
@@ -87,14 +83,14 @@ var Editor = /*#__PURE__*/function (_React$Component) {
           disabled = _this$props.disabled,
           dispatchAnalyticsEvent = _this$props.dispatchAnalyticsEvent;
       var maxContentSizeReached = Boolean(maxContentSize === null || maxContentSize === void 0 ? void 0 : maxContentSize.maxContentSizeReached);
-      return /*#__PURE__*/_react.default.createElement(_WithFlash.default, {
+      return (0, _react2.jsx)(_WithFlash.default, {
         animate: maxContentSizeReached
-      }, /*#__PURE__*/_react.default.createElement(ChromelessEditor, {
-        maxHeight: maxHeight,
-        innerRef: function innerRef(ref) {
-          return _this.containerElement = ref;
+      }, (0, _react2.jsx)("div", {
+        css: [chromelessEditor, maxHeight && (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n                max-height: ", "px;\n              "])), maxHeight)],
+        ref: function ref(_ref2) {
+          return _this.containerElement = _ref2;
         }
-      }, /*#__PURE__*/_react.default.createElement(ContentArea, null, customContentComponents, /*#__PURE__*/_react.default.createElement(_PluginSlot.default, {
+      }, (0, _react2.jsx)(ContentArea, null, customContentComponents, (0, _react2.jsx)(_PluginSlot.default, {
         editorView: editorView,
         editorActions: editorActions,
         eventDispatcher: eventDispatcher,
@@ -115,7 +111,7 @@ var Editor = /*#__PURE__*/function (_React$Component) {
   (0, _createClass2.default)(Editor, [{
     key: "render",
     value: function render() {
-      return /*#__PURE__*/_react.default.createElement(_WithPluginState.default, {
+      return (0, _react2.jsx)(_WithPluginState.default, {
         plugins: {
           maxContentSize: _maxContentSize.pluginKey
         },