@atlaskit/editor-core 162.0.2 → 164.0.1

package/dist/cjs/ui/Appearance/FullPage/StyledComponents.js

@@ -5,17 +5,17 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SidebarArea = exports.ScrollContainer = exports.FullPageEditorWrapper = exports.EditorContentGutter = exports.EditorContentArea = exports.ContentArea = void 0;
+exports.sidebarArea = exports.positionedOverEditorStyle = exports.fullPageEditorWrapper = exports.editorContentGutterStyle = exports.editorContentAreaStyle = exports.editorContentAreaHideContainer = exports.contentArea = exports.ScrollContainer = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _react = require("@emotion/react");
 
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
 var _adfSchema = require("@atlaskit/adf-schema");
 
-var _ContentStyles = _interopRequireDefault(require("../../ContentStyles"));
+var _ContentStyles = require("../../ContentStyles");
 
 var _commonStyles = require("../../../plugins/table/ui/common-styles");
 
@@ -23,53 +23,48 @@ var _consts = require("../../../plugins/table/ui/consts");
 
 var _styles = require("../../styles");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
 
 var SWOOP_ANIMATION = "0.5s ".concat(_editorSharedStyles.akEditorSwoopCubicBezier);
 var TOTAL_PADDING = _editorSharedStyles.akEditorGutterPadding * 2;
-
-var FullPageEditorWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  min-width: 340px;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n"])));
-
-exports.FullPageEditorWrapper = FullPageEditorWrapper;
-FullPageEditorWrapper.displayName = 'FullPageEditorWrapper';
-var ScrollContainer = (0, _styledComponents.default)(_ContentStyles.default)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  flex-grow: 1;\n  height: 100%;\n  overflow-y: scroll;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  scroll-behavior: smooth;\n  ", ";\n"])), _styles.scrollbarStyles);
+var fullPageEditorWrapper = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  min-width: 340px;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n"])));
+exports.fullPageEditorWrapper = fullPageEditorWrapper;
+var scrollStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  flex-grow: 1;\n  height: 100%;\n  overflow-y: scroll;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  scroll-behavior: smooth;\n  ", ";\n"])), _styles.scrollbarStyles);
+var ScrollContainer = (0, _ContentStyles.createEditorContentStyle)(scrollStyles);
 exports.ScrollContainer = ScrollContainer;
-ScrollContainer.displayName = 'ScrollContainer';
-
-var ContentArea = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  height: calc(100% - ", ");\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0\n    ", "px;\n\n  // transition used to match scrollbar with config panel opening animation\n  // only use animation when opening as there is a bug with floating toolbars.\n  transition: padding ", "ms\n    ", ";\n"])), _editorSharedStyles.ATLASSIAN_NAVIGATION_HEIGHT, function (p) {
-  return p.positionedOverEditor ? _editorSharedStyles.akEditorContextPanelWidth : 0;
-}, function (p) {
-  return p.positionedOverEditor ? 500 : 0;
-}, _editorSharedStyles.akEditorSwoopCubicBezier);
-
-exports.ContentArea = ContentArea;
-ContentArea.displayName = 'ContentArea';
-
-var SidebarArea = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  height: 100%;\n  box-sizing: border-box;\n  align-self: flex-end;\n"])));
-
-exports.SidebarArea = SidebarArea;
-SidebarArea.displayName = 'SidebarArea';
-
-var EditorContentArea = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  line-height: 24px;\n  padding-top: 50px;\n  padding-bottom: 55px;\n  height: calc(\n    100% - 105px\n  ); /* fill the viewport: 100% - (padding top & bottom) */\n  width: 100%;\n  margin: auto;\n  flex-direction: column;\n  flex-grow: 1;\n\n  max-width: ", "px;\n  transition: max-width ", ";\n\n  & .ProseMirror {\n    flex-grow: 1;\n    box-sizing: border-box;\n  }\n\n  & .ProseMirror {\n    & > * {\n      /* pre-emptively clear all direct descendant content, just in case any are adjacent floated content */\n      clear: both;\n    }\n    > p,\n    > ul,\n    > ol:not(", "):not(", "),\n    > h1,\n    > h2,\n    > h3,\n    > h4,\n    > h5,\n    > h6 {\n      /* deliberately allow wrapping of text based nodes, just in case any are adjacent floated content */\n      clear: none;\n    }\n\n    > p:last-child {\n      margin-bottom: 24px;\n    }\n  }\n\n  ", ";\n\n  .fabric-editor--full-width-mode {\n    /* Full Width Mode styles for ignoring breakout sizes */\n    .fabric-editor-breakout-mark,\n    .extension-container.block,\n    .pm-table-container {\n      width: 100% !important;\n    }\n\n    .fabric-editor-breakout-mark {\n      margin-left: unset !important;\n      transform: none !important;\n    }\n\n    /* Prevent horizontal scroll on page in full width mode */\n    ", "\n  }\n"])), function (_ref) {
-  var theme = _ref.theme,
-      fullWidthMode = _ref.fullWidthMode;
-  return (fullWidthMode ? _editorSharedStyles.akEditorFullWidthLayoutWidth : theme.layoutMaxWidth) + TOTAL_PADDING;
-}, SWOOP_ANIMATION, _adfSchema.taskListSelector, _adfSchema.decisionListSelector, _commonStyles.deprecatedTableFullPageEditorStyles, function (_ref2) {
-  var containerWidth = _ref2.containerWidth;
-
-  if (!containerWidth) {
-    // initially hide until we have a containerWidth and can properly size them,
-    // otherwise they can cause the editor width to extend which is non-recoverable
-    return "\n          .pm-table-container,\n          .code-block,\n          .extension-container {\n            display: none;\n          }\n        ";
-  }
-
-  return "\n        .pm-table-container,\n        .code-block,\n        .extension-container {\n          max-width: ".concat(containerWidth - TOTAL_PADDING - _consts.tableMarginFullWidthMode * 2, "px;\n        }\n\n        [data-layout-section] {\n          max-width: ").concat(containerWidth - TOTAL_PADDING + _editorSharedStyles.akLayoutGutterOffset * 2, "px;\n        }\n      ");
-});
-
-exports.EditorContentArea = EditorContentArea;
-EditorContentArea.displayName = 'EditorContentArea';
-
-var EditorContentGutter = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  box-sizing: border-box;\n  padding: 0 ", "px;\n"])), _editorSharedStyles.akEditorGutterPadding);
-
-exports.EditorContentGutter = EditorContentGutter;
-EditorContentGutter.displayName = 'EditorContentGutter';
+ScrollContainer.displayName = 'ScrollContainer'; // transition used to match scrollbar with config panel opening animation
+// only use animation when opening as there is a bug with floating toolbars.
+
+var positionedOverEditorStyle = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 0 ", "px;\n  transition: padding 500ms ", ";\n"])), _editorSharedStyles.akEditorContextPanelWidth, _editorSharedStyles.akEditorSwoopCubicBezier);
+exports.positionedOverEditorStyle = positionedOverEditorStyle;
+var contentArea = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  height: calc(100% - ", ");\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  transition: padding 0ms ", ";\n"])), _editorSharedStyles.ATLASSIAN_NAVIGATION_HEIGHT, _editorSharedStyles.akEditorSwoopCubicBezier);
+exports.contentArea = contentArea;
+var sidebarArea = (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  height: 100%;\n  box-sizing: border-box;\n  align-self: flex-end;\n"]))); // initially hide until we have a containerWidth and can properly size them,
+// otherwise they can cause the editor width to extend which is non-recoverable
+
+exports.sidebarArea = sidebarArea;
+var editorContentAreaHideContainer = (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  .fabric-editor--full-width-mode {\n    .pm-table-container,\n    .code-block,\n    .extension-container {\n      display: none;\n    }\n  }\n"])));
+/* Prevent horizontal scroll on page in full width mode */
+
+exports.editorContentAreaHideContainer = editorContentAreaHideContainer;
+
+var editorContentAreaContainerStyle = function editorContentAreaContainerStyle(containerWidth) {
+  return (0, _react.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  .fabric-editor--full-width-mode {\n    .pm-table-container,\n    .code-block,\n    .extension-container {\n      max-width: ", "px;\n    }\n\n    [data-layout-section] {\n      max-width: ", "px;\n    }\n  }\n"])), containerWidth - TOTAL_PADDING - _consts.tableMarginFullWidthMode * 2, containerWidth - TOTAL_PADDING + _editorSharedStyles.akLayoutGutterOffset * 2);
+};
+
+var editorContentAreaStyle = function editorContentAreaStyle(_ref) {
+  var layoutMaxWidth = _ref.layoutMaxWidth,
+      fullWidthMode = _ref.fullWidthMode,
+      containerWidth = _ref.containerWidth;
+  return [editorContentArea, !fullWidthMode && editorContentAreaWithLayoutWith(layoutMaxWidth), containerWidth ? editorContentAreaContainerStyle(containerWidth) : editorContentAreaHideContainer];
+};
+
+exports.editorContentAreaStyle = editorContentAreaStyle;
+
+var editorContentAreaWithLayoutWith = function editorContentAreaWithLayoutWith(layoutMaxWidth) {
+  return (0, _react.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  max-width: ", "px;\n"])), layoutMaxWidth + TOTAL_PADDING);
+};
+
+var editorContentArea = (0, _react.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  line-height: 24px;\n  padding-top: 50px;\n  padding-bottom: 55px;\n  height: calc(\n    100% - 105px\n  ); /* fill the viewport: 100% - (padding top & bottom) */\n  width: 100%;\n  margin: auto;\n  flex-direction: column;\n  flex-grow: 1;\n\n  max-width: ", "px;\n  transition: max-width ", ";\n  & .ProseMirror {\n    flex-grow: 1;\n    box-sizing: border-box;\n  }\n\n  & .ProseMirror {\n    & > * {\n      /* pre-emptively clear all direct descendant content, just in case any are adjacent floated content */\n      clear: both;\n    }\n    > p,\n    > ul,\n    > ol:not(", "):not(", "),\n    > h1,\n    > h2,\n    > h3,\n    > h4,\n    > h5,\n    > h6 {\n      /* deliberately allow wrapping of text based nodes, just in case any are adjacent floated content */\n      clear: none;\n    }\n\n    > p:last-child {\n      margin-bottom: 24px;\n    }\n  }\n\n  ", ";\n\n  .fabric-editor--full-width-mode {\n    /* Full Width Mode styles for ignoring breakout sizes */\n    .fabric-editor-breakout-mark,\n    .extension-container.block,\n    .pm-table-container {\n      width: 100% !important;\n    }\n\n    .fabric-editor-breakout-mark {\n      margin-left: unset !important;\n      transform: none !important;\n    }\n  }\n"])), _editorSharedStyles.akEditorFullWidthLayoutWidth + TOTAL_PADDING, SWOOP_ANIMATION, _adfSchema.taskListSelector, _adfSchema.decisionListSelector, _commonStyles.tableFullPageEditorStyles);
+var editorContentGutterStyle = (0, _react.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  box-sizing: border-box;\n  padding: 0 ", "px;\n"])), _editorSharedStyles.akEditorGutterPadding);
+exports.editorContentGutterStyle = editorContentGutterStyle;

package/dist/cjs/ui/Appearance/FullPage/messages.js

@@ -5,9 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _reactIntl = require("react-intl");
+var _reactIntlNext = require("react-intl-next");
 
-var _default = (0, _reactIntl.defineMessages)({
+var _default = (0, _reactIntlNext.defineMessages)({
   toolbarLabel: {
     id: 'fabric.editor.toolbarLabel',
     defaultMessage: 'Editor toolbar',

package/dist/cjs/ui/AppearanceComponents/Mobile.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 _maxContentSize = require("../../plugins/max-content-size");
 
@@ -23,20 +23,18 @@ var _WithPluginState = _interopRequireDefault(require("../WithPluginState"));
 
 var _WithFlash = _interopRequireDefault(require("../WithFlash"));
 
-var _ContentStyles = _interopRequireDefault(require("../ContentStyles"));
+var _ContentStyles = require("../ContentStyles");
 
 var _Addon = require("../Addon");
 
-var _templateObject, _templateObject2;
+var _templateObject;
 
 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; }
 
-var MobileEditor = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  min-height: 30px;\n  width: 100%;\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"])));
-
-MobileEditor.displayName = 'MobileEditor';
-var ContentArea = (0, _styledComponents.default)(_ContentStyles.default)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)([""])));
+var mobileEditor = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  min-height: 30px;\n  width: 100%;\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"])));
+var ContentArea = (0, _ContentStyles.createEditorContentStyle)();
 ContentArea.displayName = 'ContentArea';
 
 function MobileAppearance(_ref) {
@@ -75,21 +73,20 @@ function MobileAppearance(_ref) {
       }
     }
 
-    return /*#__PURE__*/_react.default.createElement(_WithFlash.default, {
+    return (0, _react2.jsx)(_WithFlash.default, {
       animate: maxContentSizeReached
-    }, /*#__PURE__*/_react.default.createElement(MobileEditor, {
-      isMaxContentSizeReached: maxContentSizeReached,
-      maxHeight: maxHeight
-    }, /*#__PURE__*/_react.default.createElement(_Addon.ClickAreaMobile, {
+    }, (0, _react2.jsx)("div", {
+      css: mobileEditor
+    }, (0, _react2.jsx)(_Addon.ClickAreaMobile, {
       editorView: editorView || undefined,
       minHeight: minHeight,
       persistScrollGutter: persistScrollGutter,
       isExpanded: currentIsExpanded
-    }, /*#__PURE__*/_react.default.createElement(ContentArea, null, /*#__PURE__*/_react.default.createElement("div", {
+    }, (0, _react2.jsx)(ContentArea, null, (0, _react2.jsx)("div", {
       className: "ak-editor-content-area"
     }, children)))));
-  }, [children, maxHeight, editorView, persistScrollGutter]);
-  return /*#__PURE__*/_react.default.createElement(_WithPluginState.default, {
+  }, [children, editorView, persistScrollGutter]);
+  return (0, _react2.jsx)(_WithPluginState.default, {
     plugins: {
       maxContentSize: _maxContentSize.pluginKey,
       mobileDimensions: _pluginFactory.mobileDimensionsPluginKey

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

@@ -25,6 +25,8 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _react2 = require("@emotion/react");
+
 var _styles = require("./styles");
 
 var _reactIntlNext = require("react-intl-next");
@@ -79,8 +81,9 @@ var ChromeCollapsed = /*#__PURE__*/function (_PureComponent) {
     key: "render",
     value: function render() {
       var placeholder = this.props.text || this.props.intl.formatMessage(_messages.messages.chromeCollapsedPlaceholder);
-      return /*#__PURE__*/_react.default.createElement(_styles.Input, {
-        innerRef: this.handleInputRef,
+      return (0, _react2.jsx)("input", {
+        css: _styles.inputStyle,
+        ref: this.handleInputRef,
         onFocus: this.focusHandler,
         placeholder: placeholder
       });

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

@@ -5,11 +5,11 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Input = void 0;
+exports.inputStyle = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _react = require("@emotion/react");
 
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
@@ -19,6 +19,5 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _templateObject;
 
-var Input = _styledComponents.default.input(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  /* Normal .className gets overridden by input[type=text] hence this hack to produce input.className */\n  input& {\n    background-color: white;\n    border: 1px solid ", ";\n    border-radius: ", "px;\n    box-sizing: border-box;\n    height: 40px;\n    padding-left: 20px;\n    padding-top: 12px;\n    padding-bottom: 12px;\n    font-size: ", ";\n    width: 100%;\n    font-weight: 400;\n    line-height: 1.42857142857143;\n    letter-spacing: -0.005em;\n    color: ", ";\n\n    &:hover {\n      border-color: ", ";\n      cursor: text;\n    }\n  }\n"])), _editorSharedStyles.akEditorSubtleAccent, (0, _constants.borderRadius)(), (0, _editorSharedStyles.relativeFontSizeToBase16)(14), _colors.N300, _colors.N50);
-
-exports.Input = Input;
+var inputStyle = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  /* Normal .className gets overridden by input[type=text] hence this hack to produce input.className */\n  input& {\n    background-color: white;\n    border: 1px solid ", ";\n    border-radius: ", "px;\n    box-sizing: border-box;\n    height: 40px;\n    padding-left: 20px;\n    padding-top: 12px;\n    padding-bottom: 12px;\n    font-size: ", ";\n    width: 100%;\n    font-weight: 400;\n    line-height: 1.42857142857143;\n    letter-spacing: -0.005em;\n    color: ", ";\n\n    &:hover {\n      border-color: ", ";\n      cursor: text;\n    }\n  }\n"])), _editorSharedStyles.akEditorSubtleAccent, (0, _constants.borderRadius)(), (0, _editorSharedStyles.relativeFontSizeToBase16)(14), _colors.N300, _colors.N50);
+exports.inputStyle = inputStyle;

package/dist/cjs/ui/ColorPalette/Color/index.js

@@ -25,6 +25,8 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _react2 = require("@emotion/react");
+
 var _done = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/done"));
 
 var _colors = require("@atlaskit/theme/colors");
@@ -82,9 +84,12 @@ var Color = /*#__PURE__*/function (_PureComponent) {
           borderColor = _this$props2.borderColor,
           _this$props2$checkMar = _this$props2.checkMarkColor,
           checkMarkColor = _this$props2$checkMar === void 0 ? _colors.N0 : _this$props2$checkMar;
-      return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+      return (0, _react2.jsx)(_tooltip.default, {
         content: label
-      }, /*#__PURE__*/_react.default.createElement(_styles.ButtonWrapper, null, /*#__PURE__*/_react.default.createElement(_styles.Button, {
+      }, (0, _react2.jsx)("span", {
+        css: _styles.buttonWrapperStyle
+      }, (0, _react2.jsx)("button", {
+        css: _styles.buttonStyle,
         "aria-label": label,
         role: "radio",
         "aria-checked": isSelected,
@@ -97,7 +102,7 @@ var Color = /*#__PURE__*/function (_PureComponent) {
           border: "1px solid ".concat(borderColor)
         },
         autoFocus: autoFocus
-      }, isSelected && /*#__PURE__*/_react.default.createElement(_done.default, {
+      }, isSelected && (0, _react2.jsx)(_done.default, {
         primaryColor: checkMarkColor,
         label: ""
       }))));

package/dist/cjs/ui/ColorPalette/Color/styles.js

@@ -5,20 +5,17 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ButtonWrapper = exports.Button = void 0;
+exports.buttonWrapperStyle = exports.buttonStyle = 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, _templateObject2;
 
-var Button = _styledComponents.default.button(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  height: 26px;\n  width: 26px;\n  background: ", ";\n  padding: 0;\n  border-radius: 4px;\n  border: 1px solid ", ";\n  cursor: pointer;\n  display: block;\n"])), _colors.N900, _colors.N0);
-
-exports.Button = Button;
-
-var ButtonWrapper = _styledComponents.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  border: 1px solid transparent;\n  margin: 1px;\n  font-size: 0;\n  display: flex;\n  align-items: center;\n  padding: 1px;\n  border-radius: 6px;\n  &:hover {\n    border-color: ", ";\n  }\n"])), _colors.N50);
-
-exports.ButtonWrapper = ButtonWrapper;
+var buttonStyle = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  height: 26px;\n  width: 26px;\n  background: ", ";\n  padding: 0;\n  border-radius: 4px;\n  border: 1px solid ", ";\n  cursor: pointer;\n  display: block;\n"])), _colors.N900, _colors.N0);
+exports.buttonStyle = buttonStyle;
+var buttonWrapperStyle = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  border: 1px solid transparent;\n  margin: 1px;\n  font-size: 0;\n  display: flex;\n  align-items: center;\n  padding: 1px;\n  border-radius: 6px;\n  &:hover {\n    border-color: ", ";\n  }\n"])), _colors.N50);
+exports.buttonWrapperStyle = buttonWrapperStyle;

package/dist/cjs/ui/ColorPalette/Palettes/panelBackgroundPalette.js

@@ -13,7 +13,7 @@ var _theme = require("@atlaskit/theme");
 
 var _common = require("./common");
 
-var _styles = require("@atlaskit/editor-common/styles");
+var _panel = require("@atlaskit/editor-common/panel");
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -90,67 +90,67 @@ var panelBackgroundPalette = [{
 exports.panelBackgroundPalette = panelBackgroundPalette;
 var panelDarkModeBackgroundPalette = [{
   label: 'Dark gray',
-  value: _styles.darkPanelColors.DarkGray
+  value: _panel.darkPanelColors.DarkGray
 }, {
   label: 'Dark blue',
-  value: _styles.darkPanelColors.B1200S
+  value: _panel.darkPanelColors.B1200S
 }, {
   label: 'Dark teal',
-  value: _styles.darkPanelColors.T1200S
+  value: _panel.darkPanelColors.T1200S
 }, {
   label: 'Dark green',
-  value: _styles.darkPanelColors.G1200S
+  value: _panel.darkPanelColors.G1200S
 }, {
   label: 'Dark yellow',
-  value: _styles.darkPanelColors.Y1200S
+  value: _panel.darkPanelColors.Y1200S
 }, {
   label: 'Dark red',
-  value: _styles.darkPanelColors.R1200S
+  value: _panel.darkPanelColors.R1200S
 }, {
   label: 'Dark purple',
-  value: _styles.darkPanelColors.P1200S
+  value: _panel.darkPanelColors.P1200S
 }, {
   label: 'Gray',
-  value: _styles.darkPanelColors.Gray
+  value: _panel.darkPanelColors.Gray
 }, {
   label: 'blue',
-  value: _styles.darkPanelColors.B900
+  value: _panel.darkPanelColors.B900
 }, {
   label: 'teal',
-  value: _styles.darkPanelColors.T900
+  value: _panel.darkPanelColors.T900
 }, {
   label: 'green',
-  value: _styles.darkPanelColors.G900
+  value: _panel.darkPanelColors.G900
 }, {
   label: 'yellow',
-  value: _styles.darkPanelColors.Y900
+  value: _panel.darkPanelColors.Y900
 }, {
   label: 'red',
-  value: _styles.darkPanelColors.R900
+  value: _panel.darkPanelColors.R900
 }, {
   label: 'purple',
-  value: _styles.darkPanelColors.P900
+  value: _panel.darkPanelColors.P900
 }, {
   label: 'Light gray',
-  value: _styles.darkPanelColors.LightGray
+  value: _panel.darkPanelColors.LightGray
 }, {
   label: 'Light blue',
-  value: _styles.darkPanelColors.B800S
+  value: _panel.darkPanelColors.B800S
 }, {
   label: 'Light teal',
-  value: _styles.darkPanelColors.T900S
+  value: _panel.darkPanelColors.T900S
 }, {
   label: 'Light green',
-  value: _styles.darkPanelColors.G900S
+  value: _panel.darkPanelColors.G900S
 }, {
   label: 'Light yellow',
-  value: _styles.darkPanelColors.Y800S
+  value: _panel.darkPanelColors.Y800S
 }, {
   label: 'Light red',
-  value: _styles.darkPanelColors.R800S
+  value: _panel.darkPanelColors.R800S
 }, {
   label: 'Light purple',
-  value: _styles.darkPanelColors.P800S
+  value: _panel.darkPanelColors.P800S
 }].map(function (color) {
   return _objectSpread(_objectSpread({}, color), {}, {
     border: _common.DEFAULT_BORDER_COLOR

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

@@ -10,6 +10,8 @@ exports.getContrastColor = getContrastColor;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _react2 = require("@emotion/react");
+
 var _chromatism = _interopRequireDefault(require("chromatism"));
 
 var _Color = _interopRequireDefault(require("./Color"));
@@ -20,6 +22,8 @@ var _reactIntlNext = require("react-intl-next");
 
 var _colors = require("@atlaskit/theme/colors");
 
+/** @jsx jsx */
+
 /**
  * For a given color pick the color from a list of colors with
  * the highest contrast
@@ -52,8 +56,9 @@ var ColorPalette = function ColorPalette(props) {
     }, []);
   }, [palette, cols]);
 
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, colorsPerRow.map(function (row, rowIdx) {
-    return /*#__PURE__*/_react.default.createElement(_styles.ColorPaletteWrapper, {
+  return (0, _react2.jsx)(_react.default.Fragment, null, colorsPerRow.map(function (row, rowIdx) {
+    return (0, _react2.jsx)("div", {
+      css: _styles.colorPaletteWrapper,
       className: className,
       key: "row-first-color-".concat(row[0].value),
       role: "radiogroup"
@@ -62,7 +67,7 @@ var ColorPalette = function ColorPalette(props) {
           label = _ref.label,
           border = _ref.border,
           message = _ref.message;
-      return /*#__PURE__*/_react.default.createElement(_Color.default, {
+      return (0, _react2.jsx)(_Color.default, {
         key: value,
         value: value,
         borderColor: border,

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

@@ -5,16 +5,15 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ColorPaletteWrapper = void 0;
+exports.colorPaletteWrapper = 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 ColorPaletteWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  padding: 0 ", "px;\n  /* Firefox bug fix: https://product-fabric.atlassian.net/browse/ED-1789 */\n  display: flex;\n"])), (0, _constants.gridSize)());
-
-exports.ColorPaletteWrapper = ColorPaletteWrapper;
+var colorPaletteWrapper = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  padding: 0 ", "px;\n  /* Firefox bug fix: https://product-fabric.atlassian.net/browse/ED-1789 */\n  display: flex;\n"])), (0, _constants.gridSize)());
+exports.colorPaletteWrapper = colorPaletteWrapper;

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

@@ -13,7 +13,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 _ui = require("@atlaskit/editor-common/ui");
 
@@ -38,10 +38,9 @@ var _types = require("../../plugins/analytics/types");
 var _templateObject, _templateObject2;
 
 // helps adjusts position of popup
-var ColorPickerButtonWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n"]))); // Control the size of color picker buttons and preview
+var colorPickerButtonWrapper = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n"]))); // Control the size of color picker buttons and preview
 
-
-var ColorPickerWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: ", "px;\n  background-color: white;\n  box-shadow: 0 4px 8px -2px ", ", 0 0 1px ", ";\n  padding: 8px 0px;\n"])), (0, _constants.borderRadius)(), _colors.N60A, _colors.N60A);
+var colorPickerWrapper = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: ", "px;\n  background-color: white;\n  box-shadow: 0 4px 8px -2px ", ", 0 0 1px ", ";\n  padding: 8px 0px;\n"])), (0, _constants.borderRadius)(), _colors.N60A, _colors.N60A);
 
 var ColorPickerButton = function ColorPickerButton(props) {
   var _props$size, _props$size2;
@@ -91,13 +90,15 @@ var ColorPickerButton = function ColorPickerButton(props) {
       return;
     }
 
-    return /*#__PURE__*/_react.default.createElement(_ui.Popup, {
+    return (0, _react2.jsx)(_ui.Popup, {
       target: buttonRef.current,
       fitHeight: 350,
       fitWidth: 350,
       offset: [0, 10],
       alignX: props.alignX
-    }, /*#__PURE__*/_react.default.createElement(ColorPickerWrapper, null, /*#__PURE__*/_react.default.createElement(ColorPaletteWithListeners, {
+    }, (0, _react2.jsx)("div", {
+      css: colorPickerWrapper
+    }, (0, _react2.jsx)(ColorPaletteWithListeners, {
       palette: props.colorPalette,
       cols: props.cols,
       selectedColor: props.currentColor || null,
@@ -107,10 +108,12 @@ var ColorPickerButton = function ColorPickerButton(props) {
   };
 
   var title = props.title || '';
-  return /*#__PURE__*/_react.default.createElement(ColorPickerButtonWrapper, null, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+  return (0, _react2.jsx)("div", {
+    css: colorPickerButtonWrapper
+  }, (0, _react2.jsx)(_tooltip.default, {
     content: title,
     position: "top"
-  }, /*#__PURE__*/_react.default.createElement(_button.default, {
+  }, (0, _react2.jsx)(_button.default, {
     ref: buttonRef,
     "aria-label": title,
     spacing: "compact",

package/dist/cjs/ui/ConfigPanel/ErrorMessage/ErrorImage.js

@@ -11,66 +11,68 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _react = _interopRequireDefault(require("react"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _react2 = require("@emotion/react");
 
 var _constants = require("@atlaskit/theme/constants");
 
 var _templateObject;
 
-var ImageContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0 auto ", "px;\n  height: 80px;\n"])), (0, _constants.gridSize)() * 3);
+var imageContainer = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0 auto ", "px;\n  height: 80px;\n"])), (0, _constants.gridSize)() * 3);
 
 var ErrorImage = function ErrorImage() {
-  return /*#__PURE__*/_react.default.createElement(ImageContainer, null, /*#__PURE__*/_react.default.createElement("svg", {
+  return (0, _react2.jsx)("div", {
+    css: imageContainer
+  }, (0, _react2.jsx)("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 163.28 218",
     height: "80"
-  }, /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("linearGradient", {
+  }, (0, _react2.jsx)("defs", null, (0, _react2.jsx)("linearGradient", {
     id: "linear-gradient",
     x1: "133.86",
     x2: "-2.79",
     y1: "136.43",
     y2: "200.15",
     gradientUnits: "userSpaceOnUse"
-  }, /*#__PURE__*/_react.default.createElement("stop", {
+  }, (0, _react2.jsx)("stop", {
     offset: "0",
     stopColor: "#ffd740"
-  }), /*#__PURE__*/_react.default.createElement("stop", {
+  }), (0, _react2.jsx)("stop", {
     offset: "1",
     stopColor: "#ffab00"
-  })), /*#__PURE__*/_react.default.createElement("clipPath", {
+  })), (0, _react2.jsx)("clipPath", {
     id: "clip-path"
-  }, /*#__PURE__*/_react.default.createElement("path", {
+  }, (0, _react2.jsx)("path", {
     id: "_Polygon_",
     d: "M94.78 80.16l66.44 115.08A15.17 15.17 0 01148.08 218H15.2a15.17 15.17 0 01-13.14-22.76L68.5 80.16a15.17 15.17 0 0126.28 0z",
     className: "cls-1",
     "data-name": "<Polygon>"
-  })), /*#__PURE__*/_react.default.createElement("style", null, ".cls-1{fill:url(#linear-gradient)}.cls-2{fill:#253858}.cls-6{fill:none;stroke-linecap:round;stroke-miterlimit:10;stroke-width:2px;stroke:#5e6c84}")), /*#__PURE__*/_react.default.createElement("g", {
+  })), (0, _react2.jsx)("style", null, ".cls-1{fill:url(#linear-gradient)}.cls-2{fill:#253858}.cls-6{fill:none;stroke-linecap:round;stroke-miterlimit:10;stroke-width:2px;stroke:#5e6c84}")), (0, _react2.jsx)("g", {
     id: "Layer_2",
     "data-name": "Layer 2"
-  }, /*#__PURE__*/_react.default.createElement("g", {
+  }, (0, _react2.jsx)("g", {
     id: "Software"
-  }, /*#__PURE__*/_react.default.createElement("path", {
+  }, (0, _react2.jsx)("path", {
     id: "_Polygon_2",
     d: "M94.78 80.16l66.44 115.08A15.17 15.17 0 01148.08 218H15.2a15.17 15.17 0 01-13.14-22.76L68.5 80.16a15.17 15.17 0 0126.28 0z",
     className: "cls-1",
     "data-name": "<Polygon>"
-  }), /*#__PURE__*/_react.default.createElement("path", {
+  }), (0, _react2.jsx)("path", {
     d: "M87.22 163.71l2.88-44.35a9.18 9.18 0 00-9.16-9.78 9.18 9.18 0 00-9.16 9.78l2.88 44.35a6.3 6.3 0 006.28 5.89 6.3 6.3 0 006.28-5.89zM71.38 187.25a9.53 9.53 0 0010.39 9.58 9.68 9.68 0 00-.9-19.32 9.64 9.64 0 00-9.49 9.74z",
     className: "cls-2"
-  }), /*#__PURE__*/_react.default.createElement("path", {
+  }), (0, _react2.jsx)("path", {
     fill: "#ffc400",
     d: "M91.7 27.17L84.29.45A.61.61 0 0083.1.5l-4.66 25.1-5.8-1.08a.61.61 0 00-.7.76L79.35 52a.61.61 0 001.19 0l4.66-25.1 5.8 1.03a.61.61 0 00.7-.76z"
-  }), /*#__PURE__*/_react.default.createElement("path", {
+  }), (0, _react2.jsx)("path", {
     fill: "#ffab00",
     d: "M65.12 41.81l-10.88-8.55a.27.27 0 00-.41.33L59.36 45l-2.66 1.31a.27.27 0 000 .45l10.87 8.55a.27.27 0 00.41-.33l-5.57-11.43 2.66-1.29a.27.27 0 00.05-.45z"
-  }), /*#__PURE__*/_react.default.createElement("path", {
+  }), (0, _react2.jsx)("path", {
     fill: "none",
     stroke: "#344563",
     strokeLinecap: "round",
     strokeMiterlimit: "10",
     strokeWidth: "2",
     d: "M115.15 36.6c-1.17 1.59-11-5.6-12.16-4s8.66 8.79 7.5 10.39-11-5.6-12.17-4 8.66 8.79 7.49 10.39-11-5.6-12.17-4 8.66 8.79 7.49 10.39"
-  }), /*#__PURE__*/_react.default.createElement("path", {
+  }), (0, _react2.jsx)("path", {
     d: "M119.92 64.19c-1.46 1.33-7.05-4.78-8.51-3.44s4.13 7.45 2.67 8.78-7.05-4.78-8.51-3.44c-.68.62.16 2.27 1.11 4M44.8 64c1.82.77 5-6.87 6.86-6.1s-1.39 8.4.43 9.17 5-6.87 6.86-6.1c.85.36.61 2.19.29 4.13",
     className: "cls-6"
   })))));