@atlaskit/editor-core 163.0.0 → 164.0.2

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

@@ -5,11 +5,11 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SecondaryToolbar = exports.NonCustomToolbarWrapper = exports.MainToolbarSecondChild = exports.MainToolbarIconBefore = exports.MainToolbarFirstChild = exports.MainToolbar = exports.MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT = exports.CustomToolbarWrapper = void 0;
+exports.nonCustomToolbarWrapperStyle = exports.mainToolbarStyle = exports.mainToolbarSecondChildStyle = exports.mainToolbarIconBeforeStyle = exports.mainToolbarFirstChildStyle = exports.customToolbarWrapperStyle = exports.MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT = 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");
 
@@ -17,51 +17,39 @@ var _constants = require("@atlaskit/theme/constants");
 
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
 
 var MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT = 868;
 exports.MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT = MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT;
 var toolbarLineHeight = 56;
-
-var MainToolbar = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  align-items: center;\n  box-shadow: ", ";\n  transition: box-shadow 200ms ", ";\n  z-index: ", ";\n  display: flex;\n  height: ", "px;\n  flex-shrink: 0;\n  background-color: white;\n\n  & object {\n    height: 0 !important;\n  }\n\n  @media (max-width: ", "px) {\n    ", "\n  }\n\n  @media (max-width: ", "px) {\n    display: grid;\n    height: calc(", "px * 2);\n  }\n"])), function (props) {
-  return props.showKeyline ? "0 ".concat(_editorSharedStyles.akEditorToolbarKeylineHeight, "px 0 0 ").concat(_colors.N30) : 'none';
-}, _editorSharedStyles.akEditorSwoopCubicBezier, _editorSharedStyles.akEditorMenuZIndex, toolbarLineHeight, MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT, function (props) {
-  return props.twoLineEditorToolbar && "\n        flex-wrap: wrap;\n        height: calc(".concat(toolbarLineHeight, "px * 2);\n      ");
-}, _editorSharedStyles.akEditorMobileMaxWidth, toolbarLineHeight);
-
-exports.MainToolbar = MainToolbar;
-MainToolbar.displayName = 'MainToolbar';
-
-var MainToolbarIconBefore = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  margin: ", "px;\n  height: ", "px;\n  width: ", "px;\n  @media (max-width: ", "px) {\n    grid-column: 1;\n    grid-row: 1;\n  }\n"])), (0, _constants.gridSize)() * 2, (0, _constants.gridSize)() * 4, (0, _constants.gridSize)() * 4, _editorSharedStyles.akEditorMobileMaxWidth);
-
-exports.MainToolbarIconBefore = MainToolbarIconBefore;
-MainToolbarIconBefore.displayName = 'MainToolbarIconBefore';
-
-var MainToolbarFirstChild = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-grow: 1;\n\n  @media (max-width: ", "px) {\n    ", "\n  }\n  @media (max-width: ", "px) {\n    grid-column: 1;\n    grid-row: 1;\n  }\n"])), MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT, function (props) {
-  return props.twoLineEditorToolbar && "\n        flex: 1 1 100%;\n        height: ".concat(toolbarLineHeight, "px;\n        justify-content: flex-end;\n        // ED-10241: We add fit-content to ensure that MainToolbar does not\n        // shrink more than the size of its contents. This will prevent the\n        // find/replace icon from being overlapped during a confluence\n        // publish operation\n        min-width: fit-content;\n      ");
-}, _editorSharedStyles.akEditorMobileMaxWidth);
-
-exports.MainToolbarFirstChild = MainToolbarFirstChild;
-MainToolbarFirstChild.displayName = 'MainToolbarFirstChild';
-
-var MainToolbarSecondChild = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  // ED-10241: We add fit-content to ensure that MainToolbar does not\n  // shrink more than the size of its contents. This will prevent the\n  // find/replace icon from being overlapped during a confluence\n  // publish operation\n  min-width: fit-content;\n  @media (max-width: ", "px) {\n    ", "\n  }\n"])), MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT, function (props) {
-  return props.twoLineEditorToolbar && "\n        display: flex;\n        flex-grow: 1;\n        flex: 1 1 100%;\n        margin: auto;\n        height: ".concat(toolbarLineHeight, "px;\n        min-width: 0;\n      ");
-});
-
-exports.MainToolbarSecondChild = MainToolbarSecondChild;
-MainToolbarSecondChild.displayName = 'MainToolbarSecondChild';
-
-var SecondaryToolbar = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  box-sizing: border-box;\n  justify-content: flex-end;\n  align-items: center;\n  flex-shrink: 0;\n  display: flex;\n  padding: 24px 0;\n"])));
-
-exports.SecondaryToolbar = SecondaryToolbar;
-SecondaryToolbar.displayName = 'SecondaryToolbar';
-
-var NonCustomToolbarWrapper = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  align-items: center;\n  display: flex;\n  flex-grow: 1;\n"])));
-
-exports.NonCustomToolbarWrapper = NonCustomToolbarWrapper;
-NonCustomToolbarWrapper.displayName = 'NonCustomToolbar';
-
-var CustomToolbarWrapper = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  align-items: center;\n  display: flex;\n"])));
-
-exports.CustomToolbarWrapper = CustomToolbarWrapper;
-CustomToolbarWrapper.displayName = 'CustomToolbar';
+var mainToolbarWithKeyline = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  box-shadow: 0 ", "px 0 0 ", ";\n"])), _editorSharedStyles.akEditorToolbarKeylineHeight, _colors.N30);
+var mainToolbarTwoLineStyle = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  @media (max-width: ", "px) {\n    flex-wrap: wrap;\n    height: calc(", "px * 2);\n  }\n"])), MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT, toolbarLineHeight);
+var mainToolbar = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  align-items: center;\n  box-shadow: none;\n  transition: box-shadow 200ms ", ";\n  z-index: ", ";\n  display: flex;\n  height: ", "px;\n  flex-shrink: 0;\n  background-color: white;\n\n  & object {\n    height: 0 !important;\n  }\n\n  @media (max-width: ", "px) {\n    display: grid;\n    height: calc(", "px * 2);\n  }\n"])), _editorSharedStyles.akEditorSwoopCubicBezier, _editorSharedStyles.akEditorMenuZIndex, toolbarLineHeight, _editorSharedStyles.akEditorMobileMaxWidth, toolbarLineHeight);
+
+var mainToolbarStyle = function mainToolbarStyle(showKeyline, twoLineEditorToolbar) {
+  return [mainToolbar, showKeyline && mainToolbarWithKeyline, twoLineEditorToolbar && mainToolbarTwoLineStyle];
+};
+
+exports.mainToolbarStyle = mainToolbarStyle;
+var mainToolbarIconBeforeStyle = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  margin: ", "px;\n  height: ", "px;\n  width: ", "px;\n  @media (max-width: ", "px) {\n    grid-column: 1;\n    grid-row: 1;\n  }\n"])), (0, _constants.gridSize)() * 2, (0, _constants.gridSize)() * 4, (0, _constants.gridSize)() * 4, _editorSharedStyles.akEditorMobileMaxWidth);
+exports.mainToolbarIconBeforeStyle = mainToolbarIconBeforeStyle;
+var mainToolbarFirstChild = (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-grow: 1;\n\n  @media (max-width: ", "px) {\n    grid-column: 1;\n    grid-row: 1;\n  }\n"])), _editorSharedStyles.akEditorMobileMaxWidth);
+var mainToolbarFirstChildTowLine = (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  @media (max-width: ", "px) {\n    flex: 1 1 100%;\n    height: ", "px;\n    justify-content: flex-end;\n    // ED-10241: We add fit-content to ensure that MainToolbar does not\n    // shrink more than the size of its contents. This will prevent the\n    // find/replace icon from being overlapped during a confluence\n    // publish operation\n    min-width: fit-content;\n  }\n"])), MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT, toolbarLineHeight);
+
+var mainToolbarFirstChildStyle = function mainToolbarFirstChildStyle(twoLineEditorToolbar) {
+  return [mainToolbarFirstChild, twoLineEditorToolbar && mainToolbarFirstChildTowLine];
+};
+
+exports.mainToolbarFirstChildStyle = mainToolbarFirstChildStyle;
+var mainToolbarSecondChild = (0, _react.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  // ED-10241: We add fit-content to ensure that MainToolbar does not\n  // shrink more than the size of its contents. This will prevent the\n  // find/replace icon from being overlapped during a confluence\n  // publish operation\n  min-width: fit-content;\n"])));
+var mainToolbarSecondChildTwoLine = (0, _react.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  @media (max-width: ", "px) {\n    display: flex;\n    flex-grow: 1;\n    flex: 1 1 100%;\n    margin: auto;\n    height: ", "px;\n    min-width: 0;\n  }\n"])), MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT, toolbarLineHeight);
+
+var mainToolbarSecondChildStyle = function mainToolbarSecondChildStyle(twoLineEditorToolbar) {
+  return [mainToolbarSecondChild, twoLineEditorToolbar && mainToolbarSecondChildTwoLine];
+};
+
+exports.mainToolbarSecondChildStyle = mainToolbarSecondChildStyle;
+var nonCustomToolbarWrapperStyle = (0, _react.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  align-items: center;\n  display: flex;\n  flex-grow: 1;\n"])));
+exports.nonCustomToolbarWrapperStyle = nonCustomToolbarWrapperStyle;
+var customToolbarWrapperStyle = (0, _react.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  align-items: center;\n  display: flex;\n"])));
+exports.customToolbarWrapperStyle = customToolbarWrapperStyle;

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/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;