@atlaskit/editor-core 162.0.2 → 164.0.1

package/dist/cjs/ui/Appearance/Comment/Comment.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 _buttonGroup = _interopRequireDefault(require("@atlaskit/button/button-group"));
 
@@ -41,8 +41,6 @@ var _PluginSlot = _interopRequireDefault(require("../../PluginSlot"));
 
 var _WithPluginState = _interopRequireDefault(require("../../WithPluginState"));
 
-var _ContentStyles = _interopRequireDefault(require("../../ContentStyles"));
-
 var _maxContentSize = require("../../../plugins/max-content-size");
 
 var _pluginKey = require("../../../plugins/media/pm-plugins/plugin-key");
@@ -69,7 +67,9 @@ var _messages = _interopRequireDefault(require("../../../messages"));
 
 var _Toolbar2 = require("./Toolbar");
 
-var _templateObject, _templateObject2, _templateObject3;
+var _ContentStyles = require("../../ContentStyles");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 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); }; }
 
@@ -77,18 +77,10 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 var CommentEditorMargin = 14;
 var CommentEditorSmallerMargin = 8;
-
-var CommentEditor = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n\n  .less-margin .ProseMirror {\n    margin: 12px ", "px ", "px;\n  }\n\n  min-width: 272px;\n  /* Border + Toolbar + Footer + (Paragraph + ((Parahraph + Margin) * (DefaultLines - 1)) */\n  /* calc(2px + 40px + 24px + ( 20px + (32px * 2))) */\n  min-height: 150px;\n  height: auto;\n  background-color: white;\n  border: 1px solid ", ";\n  box-sizing: border-box;\n  border-radius: ", "px;\n\n  max-width: inherit;\n  word-wrap: break-word;\n"])), CommentEditorSmallerMargin, CommentEditorSmallerMargin, _colors.N40, (0, _constants.borderRadius)());
-
-CommentEditor.displayName = 'CommentEditor';
-var ContentArea = (0, _styledComponents.default)(_ContentStyles.default)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  flex-grow: 1;\n  overflow-x: hidden;\n  overflow-y: auto;\n  line-height: 24px;\n  ", ";\n\n  /** Hack for Bitbucket to ensure entire editorView gets drop event; see ED-3294 **/\n  /** Hack for tables controlls. Otherwise marging collapse and controlls are misplaced. **/\n  .ProseMirror {\n    margin: 12px ", "px ", "px;\n  }\n\n  .gridParent {\n    margin-left: ", "px;\n    margin-right: ", "px;\n    width: calc(100% + ", "px);\n  }\n\n  padding: ", "px;\n\n  ", ";\n"])), function (props) {
-  return props.maxHeight ? 'max-height: ' + props.maxHeight + 'px;' : '';
-}, CommentEditorMargin, CommentEditorMargin, CommentEditorMargin - _grid.GRID_GUTTER, CommentEditorMargin - _grid.GRID_GUTTER, CommentEditorMargin - _grid.GRID_GUTTER, _Toolbar2.TableControlsPadding, _commonStyles.deprecatedTableCommentEditorStyles);
+var commentEditorStyle = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n\n  .less-margin .ProseMirror {\n    margin: 12px ", "px ", "px;\n  }\n\n  min-width: 272px;\n  /* Border + Toolbar + Footer + (Paragraph + ((Parahraph + Margin) * (DefaultLines - 1)) */\n  /* calc(2px + 40px + 24px + ( 20px + (32px * 2))) */\n  min-height: 150px;\n  height: auto;\n  background-color: white;\n  border: 1px solid ", ";\n  box-sizing: border-box;\n  border-radius: ", "px;\n\n  max-width: inherit;\n  word-wrap: break-word;\n"])), CommentEditorSmallerMargin, CommentEditorSmallerMargin, _colors.N40, (0, _constants.borderRadius)());
+var ContentArea = (0, _ContentStyles.createEditorContentStyle)((0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  flex-grow: 1;\n  overflow-x: hidden;\n  overflow-y: auto;\n  line-height: 24px;\n\n  /** Hack for Bitbucket to ensure entire editorView gets drop event; see ED-3294 **/\n  /** Hack for tables controlls. Otherwise marging collapse and controlls are misplaced. **/\n  .ProseMirror {\n    margin: 12px ", "px ", "px;\n  }\n\n  .gridParent {\n    margin-left: ", "px;\n    margin-right: ", "px;\n    width: calc(100% + ", "px);\n  }\n\n  padding: ", "px;\n\n  ", ";\n"])), CommentEditorMargin, CommentEditorMargin, CommentEditorMargin - _grid.GRID_GUTTER, CommentEditorMargin - _grid.GRID_GUTTER, CommentEditorMargin - _grid.GRID_GUTTER, _Toolbar2.TableControlsPadding, _commonStyles.tableCommentEditorStyles));
 ContentArea.displayName = 'ContentArea';
-
-var SecondaryToolbar = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  box-sizing: border-box;\n  justify-content: flex-end;\n  align-items: center;\n  display: flex;\n  padding: 12px 1px;\n"])));
-
-SecondaryToolbar.displayName = 'SecondaryToolbar';
+var secondaryToolbarStyle = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  box-sizing: border-box;\n  justify-content: flex-end;\n  align-items: center;\n  display: flex;\n  padding: 12px 1px;\n"])));
 
 var Editor = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(Editor, _React$Component);
@@ -143,14 +135,14 @@ var Editor = /*#__PURE__*/function (_React$Component) {
           useStickyToolbar = _this$props.useStickyToolbar;
       var maxContentSizeReached = Boolean(maxContentSize === null || maxContentSize === void 0 ? void 0 : maxContentSize.maxContentSizeReached);
       var showSecondaryToolbar = !!onSave || !!onCancel || !!customSecondaryToolbarComponents;
-      return /*#__PURE__*/_react.default.createElement(_WithFlash.default, {
+      return (0, _react2.jsx)(_WithFlash.default, {
         animate: maxContentSizeReached
-      }, /*#__PURE__*/_react.default.createElement(CommentEditor, {
-        maxHeight: maxHeight,
+      }, (0, _react2.jsx)("div", {
+        css: commentEditorStyle,
         className: "akEditor"
-      }, /*#__PURE__*/_react.default.createElement(_Toolbar2.MainToolbar, {
+      }, (0, _react2.jsx)(_Toolbar2.MainToolbar, {
         useStickyToolbar: useStickyToolbar
-      }, /*#__PURE__*/_react.default.createElement(_Toolbar.default, {
+      }, (0, _react2.jsx)(_Toolbar.default, {
         editorView: editorView,
         editorActions: editorActions,
         eventDispatcher: eventDispatcher,
@@ -163,19 +155,21 @@ var Editor = /*#__PURE__*/function (_React$Component) {
         disabled: !!disabled,
         dispatchAnalyticsEvent: dispatchAnalyticsEvent,
         containerElement: _this.containerElement
-      }), /*#__PURE__*/_react.default.createElement(_Toolbar2.MainToolbarCustomComponentsSlot, null, customPrimaryToolbarComponents)), /*#__PURE__*/_react.default.createElement(_Addon.ClickAreaBlock, {
+      }), (0, _react2.jsx)("div", {
+        css: _Toolbar2.mainToolbarCustomComponentsSlotStyle
+      }, customPrimaryToolbarComponents)), (0, _react2.jsx)(_Addon.ClickAreaBlock, {
         editorView: editorView
-      }, /*#__PURE__*/_react.default.createElement(_ui.WidthConsumer, null, function (_ref2) {
+      }, (0, _react2.jsx)(_ui.WidthConsumer, null, function (_ref2) {
         var width = _ref2.width;
-        return /*#__PURE__*/_react.default.createElement(ContentArea, {
-          innerRef: function innerRef(ref) {
-            return _this.containerElement = ref;
+        return (0, _react2.jsx)(ContentArea, {
+          ref: function ref(_ref3) {
+            return _this.containerElement = _ref3;
           },
+          css: maxHeight ? (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n                            max-height: ", "px;\n                          "])), maxHeight) : null,
           className: (0, _classnames.default)('ak-editor-content-area', {
             'less-margin': width < _editorSharedStyles.akEditorMobileBreakoutPoint
-          }),
-          maxHeight: maxHeight
-        }, customContentComponents, /*#__PURE__*/_react.default.createElement(_PluginSlot.default, {
+          })
+        }, customContentComponents, (0, _react2.jsx)(_PluginSlot.default, {
           editorView: editorView,
           editorActions: editorActions,
           eventDispatcher: eventDispatcher,
@@ -189,20 +183,21 @@ var Editor = /*#__PURE__*/function (_React$Component) {
           containerElement: _this.containerElement,
           disabled: !!disabled
         }), editorDOMElement);
-      })), /*#__PURE__*/_react.default.createElement(_WidthEmitter.default, {
+      })), (0, _react2.jsx)(_WidthEmitter.default, {
         editorView: editorView
-      })), showSecondaryToolbar && /*#__PURE__*/_react.default.createElement(SecondaryToolbar, {
+      })), showSecondaryToolbar && (0, _react2.jsx)("div", {
+        css: secondaryToolbarStyle,
         "data-testid": "ak-editor-secondary-toolbar"
-      }, /*#__PURE__*/_react.default.createElement(_buttonGroup.default, null, !!onSave && /*#__PURE__*/_react.default.createElement(_customThemeButton.default, {
+      }, (0, _react2.jsx)(_buttonGroup.default, null, !!onSave && (0, _react2.jsx)(_customThemeButton.default, {
         appearance: "primary",
         onClick: _this.handleSave,
         testId: "comment-save-button",
         isDisabled: disabled || mediaState && !mediaState.allUploadsFinished
-      }, intl.formatMessage(_messages.default.saveButton)), !!onCancel && /*#__PURE__*/_react.default.createElement(_customThemeButton.default, {
+      }, intl.formatMessage(_messages.default.saveButton)), !!onCancel && (0, _react2.jsx)(_customThemeButton.default, {
         appearance: "subtle",
         onClick: _this.handleCancel,
         isDisabled: disabled
-      }, intl.formatMessage(_messages.default.cancelButton))), /*#__PURE__*/_react.default.createElement("span", {
+      }, intl.formatMessage(_messages.default.cancelButton))), (0, _react2.jsx)("span", {
         style: {
           flexGrow: 1
         }
@@ -214,7 +209,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,
           mediaState: _pluginKey.stateKey

package/dist/cjs/ui/Appearance/Comment/Toolbar.js

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TableControlsPadding = exports.MainToolbarWrapper = exports.MainToolbarCustomComponentsSlot = exports.MainToolbar = void 0;
+exports.mainToolbarCustomComponentsSlotStyle = exports.TableControlsPadding = exports.MainToolbar = void 0;
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
@@ -15,7 +15,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 _constants = require("@atlaskit/theme/constants");
 
@@ -23,7 +23,7 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
-var _templateObject, _templateObject2, _templateObject3;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 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); }
 
@@ -31,15 +31,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 var TableControlsPadding = 20;
 exports.TableControlsPadding = TableControlsPadding;
-
-var MainToolbarWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  align-items: center;\n  padding: ", "px ", "px 0;\n  display: flex;\n  height: auto;\n  background-color: white;\n  box-shadow: none;\n  padding-left: ", "px;\n\n  & > div > *:first-child {\n    margin-left: 0;\n  }\n\n  .block-type-btn {\n    padding-left: 0;\n  }\n"])), (0, _constants.gridSize)(), (0, _constants.gridSize)(), TableControlsPadding);
-
-exports.MainToolbarWrapper = MainToolbarWrapper;
-MainToolbarWrapper.displayName = 'MainToolbar';
-var StickyToolbarWrapper = (0, _styledComponents.default)(MainToolbarWrapper)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  position: sticky;\n  top: ", ";\n  padding-bottom: ", "px;\n  z-index: ", ";\n  transition: box-shadow ease-in-out 0.2s;\n  &.show-keyline {\n    box-shadow: 0 ", "px 0 0 ", ";\n  }\n"])), function (props) {
-  return "".concat(props.top, "px");
-}, (0, _constants.gridSize)(), _editorSharedStyles.akEditorGridLineZIndex + _editorSharedStyles.akEditorMenuZIndex, _editorSharedStyles.akEditorToolbarKeylineHeight, _colors.N30);
-StickyToolbarWrapper.displayName = 'MainToolbarSticky';
+var mainToolbarWrapperStyle = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  align-items: center;\n  padding: ", "px ", "px 0;\n  display: flex;\n  height: auto;\n  background-color: white;\n  box-shadow: none;\n  padding-left: ", "px;\n\n  & > div > *:first-child {\n    margin-left: 0;\n  }\n\n  .block-type-btn {\n    padding-left: 0;\n  }\n"])), (0, _constants.gridSize)(), (0, _constants.gridSize)(), TableControlsPadding);
+var stickyToolbarWrapperStyle = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  /* stylelint-disable declaration-block-no-duplicate-properties */\n  position: relative;\n  position: sticky;\n  /* stylelint-enable declaration-block-no-duplicate-properties */\n  padding-bottom: ", "px;\n  z-index: ", ";\n  transition: box-shadow ease-in-out 0.2s;\n  &.show-keyline {\n    box-shadow: 0 ", "px 0 0 ", ";\n  }\n"])), (0, _constants.gridSize)(), _editorSharedStyles.akEditorGridLineZIndex + _editorSharedStyles.akEditorMenuZIndex, _editorSharedStyles.akEditorToolbarKeylineHeight, _colors.N30);
 
 var StickyToolbar = function StickyToolbar(props) {
   var _useState = (0, _react.useState)(0),
@@ -52,15 +45,16 @@ var StickyToolbar = function StickyToolbar(props) {
 
     setTop(((_props$externalToolba = props.externalToolbarRef) === null || _props$externalToolba === void 0 ? void 0 : (_props$externalToolba2 = _props$externalToolba.current) === null || _props$externalToolba2 === void 0 ? void 0 : _props$externalToolba2.clientHeight) || 0);
   }, [setTop, props.externalToolbarRef]);
-  return /*#__PURE__*/_react.default.createElement(StickyToolbarWrapper, {
+  return (0, _react2.jsx)("div", {
+    css: [mainToolbarWrapperStyle, stickyToolbarWrapperStyle, (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n          top: ", ";\n        "])), top)],
     "data-testid": "ak-editor-main-toolbar",
-    className: 'show-keyline',
-    top: top
+    className: 'show-keyline'
   }, props.children);
 };
 
 var FixedToolbar = function FixedToolbar(props) {
-  return /*#__PURE__*/_react.default.createElement(MainToolbarWrapper, {
+  return (0, _react2.jsx)("div", {
+    css: mainToolbarWrapperStyle,
     "data-testid": "ak-editor-main-toolbar"
   }, props.children);
 };
@@ -70,17 +64,14 @@ var MainToolbar = function MainToolbar(_ref) {
       children = _ref.children;
 
   if (!!useStickyToolbar) {
-    return /*#__PURE__*/_react.default.createElement(StickyToolbar, {
+    return (0, _react2.jsx)(StickyToolbar, {
       externalToolbarRef: typeof useStickyToolbar === 'boolean' ? undefined : useStickyToolbar
     }, children);
   }
 
-  return /*#__PURE__*/_react.default.createElement(FixedToolbar, null, children);
+  return (0, _react2.jsx)(FixedToolbar, null, children);
 };
 
 exports.MainToolbar = MainToolbar;
-
-var MainToolbarCustomComponentsSlot = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  flex-grow: 1;\n  padding-right: ", "px;\n  > div {\n    display: flex;\n    flex-shrink: 0;\n  }\n"])), TableControlsPadding);
-
-exports.MainToolbarCustomComponentsSlot = MainToolbarCustomComponentsSlot;
-MainToolbarCustomComponentsSlot.displayName = 'MainToolbar';
+var mainToolbarCustomComponentsSlotStyle = (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  flex-grow: 1;\n  padding-right: ", "px;\n  > div {\n    display: flex;\n    flex-shrink: 0;\n  }\n"])), TableControlsPadding);
+exports.mainToolbarCustomComponentsSlotStyle = mainToolbarCustomComponentsSlotStyle;

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

@@ -23,6 +23,8 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = _interopRequireDefault(require("react"));
 
+var _react2 = require("@emotion/react");
+
 var _rafSchd = _interopRequireDefault(require("raf-schd"));
 
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
@@ -119,9 +121,10 @@ var FullPageEditor = /*#__PURE__*/function (_React$Component) {
       var props = this.props;
       var showKeyline = this.state.showKeyline;
       var featureFlags = (_props$editorView = props.editorView) !== null && _props$editorView !== void 0 && _props$editorView.state ? (0, _featureFlagsContext.getFeatureFlags)(props.editorView.state) : undefined;
-      return /*#__PURE__*/_react.default.createElement(_context.ContextPanelWidthProvider, null, /*#__PURE__*/_react.default.createElement(_StyledComponents.FullPageEditorWrapper, {
+      return (0, _react2.jsx)(_context.ContextPanelWidthProvider, null, (0, _react2.jsx)("div", {
+        css: _StyledComponents.fullPageEditorWrapper,
         className: "akEditor"
-      }, /*#__PURE__*/_react.default.createElement(_FullPageToolbar.FullPageToolbar, {
+      }, (0, _react2.jsx)(_FullPageToolbar.FullPageToolbar, {
         appearance: props.appearance,
         beforeIcon: props.primaryToolbarIconBefore,
         collabEdit: props.collabEdit,
@@ -141,8 +144,7 @@ var FullPageEditor = /*#__PURE__*/function (_React$Component) {
         providerFactory: props.providerFactory,
         showKeyline: showKeyline,
         featureFlags: featureFlags
-      }), /*#__PURE__*/_react.default.createElement(_FullPageContentArea.FullPageContentArea, {
-        allowAnnotation: props.allowAnnotation,
+      }), (0, _react2.jsx)(_FullPageContentArea.FullPageContentArea, {
         appearance: props.appearance,
         contentArea: this.contentArea,
         contentAreaRef: this.contentAreaRef,

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

@@ -7,11 +7,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.FullPageContentArea = exports.CONTENT_AREA_TEST_ID = void 0;
 
+var _react = require("@emotion/react");
+
 var _ui = require("@atlaskit/editor-common/ui");
 
 var _context = require("../../ContextPanel/context");
 
-var _react = _interopRequireDefault(require("react"));
+var _react2 = _interopRequireDefault(require("react"));
 
 var _reactIntlNext = require("react-intl-next");
 
@@ -27,32 +29,38 @@ var _StyledComponents = require("./StyledComponents");
 
 var _messages = _interopRequireDefault(require("./messages"));
 
+/** @jsx jsx */
 var CONTENT_AREA_TEST_ID = 'ak-editor-fp-content-area';
 exports.CONTENT_AREA_TEST_ID = CONTENT_AREA_TEST_ID;
 
-var Content = /*#__PURE__*/_react.default.memo(function (props) {
-  return /*#__PURE__*/_react.default.createElement(_ui.WidthConsumer, null, function (_ref) {
+var Content = /*#__PURE__*/_react2.default.memo(function (props) {
+  var theme = (0, _react.useTheme)();
+  var fullWidthMode = props.appearance === 'full-width';
+  return (0, _react.jsx)(_ui.WidthConsumer, null, function (_ref) {
     var width = _ref.width;
-    return /*#__PURE__*/_react.default.createElement(_context.ContextPanelConsumer, null, function (_ref2) {
+    return (0, _react.jsx)(_context.ContextPanelConsumer, null, function (_ref2) {
       var positionedOverEditor = _ref2.positionedOverEditor;
-      return /*#__PURE__*/_react.default.createElement(_StyledComponents.ContentArea, {
-        "data-testid": CONTENT_AREA_TEST_ID,
-        positionedOverEditor: positionedOverEditor
-      }, /*#__PURE__*/_react.default.createElement(_StyledComponents.ScrollContainer, {
-        innerRef: props.scrollContainerRef,
-        allowAnnotation: props.allowAnnotation,
+      return (0, _react.jsx)("div", {
+        css: [_StyledComponents.contentArea, positionedOverEditor && _StyledComponents.positionedOverEditorStyle],
+        "data-testid": CONTENT_AREA_TEST_ID
+      }, (0, _react.jsx)(_StyledComponents.ScrollContainer, {
+        ref: props.scrollContainerRef,
         className: "fabric-editor-popup-scroll-parent"
-      }, /*#__PURE__*/_react.default.createElement(_Addon.ClickAreaBlock, {
+      }, (0, _react.jsx)(_Addon.ClickAreaBlock, {
         editorView: props.editorView
-      }, /*#__PURE__*/_react.default.createElement(_StyledComponents.EditorContentArea, {
+      }, (0, _react.jsx)("div", {
+        css: (0, _StyledComponents.editorContentAreaStyle)({
+          fullWidthMode: fullWidthMode,
+          layoutMaxWidth: theme.layoutMaxWidth,
+          containerWidth: width
+        }),
         role: "region",
         "aria-label": props.intl.formatMessage(_messages.default.editableContentLabel),
-        fullWidthMode: props.appearance === 'full-width',
-        innerRef: props.contentAreaRef,
-        containerWidth: width
-      }, /*#__PURE__*/_react.default.createElement(_StyledComponents.EditorContentGutter, {
-        className: ['ak-editor-content-area', props.appearance === 'full-width' ? 'fabric-editor--full-width-mode' : ''].join(' ')
-      }, props.customContentComponents, /*#__PURE__*/_react.default.createElement(_PluginSlot.default, {
+        ref: props.contentAreaRef
+      }, (0, _react.jsx)("div", {
+        css: _StyledComponents.editorContentGutterStyle,
+        className: ['ak-editor-content-area', fullWidthMode ? 'fabric-editor--full-width-mode' : ''].join(' ')
+      }, props.customContentComponents, (0, _react.jsx)(_PluginSlot.default, {
         editorView: props.editorView,
         editorActions: props.editorActions,
         eventDispatcher: props.eventDispatcher,
@@ -66,9 +74,11 @@ var Content = /*#__PURE__*/_react.default.memo(function (props) {
         disabled: !!props.disabled,
         containerElement: props.scrollContainer,
         dispatchAnalyticsEvent: props.dispatchAnalyticsEvent
-      }), props.editorDOMElement)))), /*#__PURE__*/_react.default.createElement(_StyledComponents.SidebarArea, null, props.contextPanel || /*#__PURE__*/_react.default.createElement(_ContextPanel.default, {
+      }), props.editorDOMElement)))), (0, _react.jsx)("div", {
+        css: _StyledComponents.sidebarArea
+      }, props.contextPanel || (0, _react.jsx)(_ContextPanel.default, {
         visible: false
-      })), /*#__PURE__*/_react.default.createElement(_WidthEmitter.default, {
+      })), (0, _react.jsx)(_WidthEmitter.default, {
         editorView: props.editorView
       }));
     });

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

@@ -13,6 +13,8 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _react2 = require("@emotion/react");
+
 var _reactIntlNext = require("react-intl-next");
 
 var _ui = _interopRequireDefault(require("../../../plugins/collab-edit/ui"));
@@ -33,6 +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; }
 
+/** @jsx jsx */
 var EditorToolbar = /*#__PURE__*/_react.default.memo(function (props) {
   var _props$featureFlags, _props$featureFlags2, _props$featureFlags3, _props$collabEdit, _props$collabEdit2, _props$collabEdit3, _props$featureFlags4, _props$featureFlags5;
 
@@ -41,7 +44,11 @@ var EditorToolbar = /*#__PURE__*/_react.default.memo(function (props) {
       shouldSplitToolbar = _useState2[0],
       setShouldSplitToolbar = _useState2[1];
 
-  var nonCustomToolbar = /*#__PURE__*/_react.default.createElement(_MainToolbar.NonCustomToolbarWrapper, null, props.beforeIcon && /*#__PURE__*/_react.default.createElement(_MainToolbar.MainToolbarIconBefore, null, props.beforeIcon), /*#__PURE__*/_react.default.createElement(_Toolbar.default, {
+  var nonCustomToolbar = (0, _react2.jsx)("div", {
+    css: _MainToolbar.nonCustomToolbarWrapperStyle
+  }, props.beforeIcon && (0, _react2.jsx)("div", {
+    css: _MainToolbar.mainToolbarIconBeforeStyle
+  }, props.beforeIcon), (0, _react2.jsx)(_Toolbar.default, {
     editorView: props.editorView,
     editorActions: props.editorActions,
     eventDispatcher: props.eventDispatcher,
@@ -56,16 +63,17 @@ var EditorToolbar = /*#__PURE__*/_react.default.memo(function (props) {
     containerElement: props.containerElement,
     hasMinWidth: props.hasMinWidth
   }));
-
-  var customToolbar = /*#__PURE__*/_react.default.createElement(_MainToolbar.CustomToolbarWrapper, null, (_props$featureFlags = props.featureFlags) !== null && _props$featureFlags !== void 0 && _props$featureFlags.twoLineEditorToolbar && !!props.customPrimaryToolbarComponents && 'before' in props.customPrimaryToolbarComponents ? /*#__PURE__*/_react.default.createElement(_BeforePrimaryToolbarWrapper.BeforePrimaryToolbarWrapper, {
+  var customToolbar = (0, _react2.jsx)("div", {
+    css: _MainToolbar.customToolbarWrapperStyle
+  }, (_props$featureFlags = props.featureFlags) !== null && _props$featureFlags !== void 0 && _props$featureFlags.twoLineEditorToolbar && !!props.customPrimaryToolbarComponents && 'before' in props.customPrimaryToolbarComponents ? (0, _react2.jsx)(_BeforePrimaryToolbarWrapper.BeforePrimaryToolbarWrapper, {
     beforePrimaryToolbarComponents: props.customPrimaryToolbarComponents.before
-  }) : null, (props === null || props === void 0 ? void 0 : (_props$featureFlags2 = props.featureFlags) === null || _props$featureFlags2 === void 0 ? void 0 : _props$featureFlags2.showAvatarGroupAsPlugin) === true && !((_props$featureFlags3 = props.featureFlags) !== null && _props$featureFlags3 !== void 0 && _props$featureFlags3.twoLineEditorToolbar) ? null : /*#__PURE__*/_react.default.createElement(_ui.default, {
+  }) : null, (props === null || props === void 0 ? void 0 : (_props$featureFlags2 = props.featureFlags) === null || _props$featureFlags2 === void 0 ? void 0 : _props$featureFlags2.showAvatarGroupAsPlugin) === true && !((_props$featureFlags3 = props.featureFlags) !== null && _props$featureFlags3 !== void 0 && _props$featureFlags3.twoLineEditorToolbar) ? null : (0, _react2.jsx)(_ui.default, {
     editorView: props.editorView,
     eventDispatcher: props.eventDispatcher,
     inviteToEditComponent: (_props$collabEdit = props.collabEdit) === null || _props$collabEdit === void 0 ? void 0 : _props$collabEdit.inviteToEditComponent,
     inviteToEditHandler: (_props$collabEdit2 = props.collabEdit) === null || _props$collabEdit2 === void 0 ? void 0 : _props$collabEdit2.inviteToEditHandler,
     isInviteToEditButtonSelected: (_props$collabEdit3 = props.collabEdit) === null || _props$collabEdit3 === void 0 ? void 0 : _props$collabEdit3.isInviteToEditButtonSelected
-  }), (_props$featureFlags4 = props.featureFlags) !== null && _props$featureFlags4 !== void 0 && _props$featureFlags4.findReplace && (_props$featureFlags5 = props.featureFlags) !== null && _props$featureFlags5 !== void 0 && _props$featureFlags5.twoLineEditorToolbar ? /*#__PURE__*/_react.default.createElement(_FindReplaceToolbarButtonWithState.default, {
+  }), (_props$featureFlags4 = props.featureFlags) !== null && _props$featureFlags4 !== void 0 && _props$featureFlags4.findReplace && (_props$featureFlags5 = props.featureFlags) !== null && _props$featureFlags5 !== void 0 && _props$featureFlags5.twoLineEditorToolbar ? (0, _react2.jsx)(_FindReplaceToolbarButtonWithState.default, {
     popupsBoundariesElement: props.popupsBoundariesElement,
     popupsMountPoint: props.popupsMountPoint,
     popupsScrollableElement: props.popupsScrollableElement,
@@ -73,7 +81,6 @@ var EditorToolbar = /*#__PURE__*/_react.default.memo(function (props) {
     containerElement: props.containerElement,
     dispatchAnalyticsEvent: props.dispatchAnalyticsEvent
   }) : null, !!props.customPrimaryToolbarComponents && 'after' in props.customPrimaryToolbarComponents ? props.customPrimaryToolbarComponents.after : props.customPrimaryToolbarComponents);
-
   (0, _react.useEffect)(function () {
     var _props$featureFlags6;
 
@@ -89,21 +96,20 @@ var EditorToolbar = /*#__PURE__*/_react.default.memo(function (props) {
       };
     }
   });
-  return /*#__PURE__*/_react.default.createElement(_context.ContextPanelConsumer, null, function (_ref) {
+  return (0, _react2.jsx)(_context.ContextPanelConsumer, null, function (_ref) {
     var _props$featureFlags7, _props$featureFlags8, _props$featureFlags9;
 
     var contextPanelWidth = _ref.width;
-    return /*#__PURE__*/_react.default.createElement(_MainToolbar.MainToolbar, {
-      "data-testid": "ak-editor-main-toolbar",
-      showKeyline: props.showKeyline || contextPanelWidth > 0,
-      twoLineEditorToolbar: !!((_props$featureFlags7 = props.featureFlags) !== null && _props$featureFlags7 !== void 0 && _props$featureFlags7.twoLineEditorToolbar)
-    }, /*#__PURE__*/_react.default.createElement(_MainToolbar.MainToolbarFirstChild, {
-      twoLineEditorToolbar: !!((_props$featureFlags8 = props.featureFlags) !== null && _props$featureFlags8 !== void 0 && _props$featureFlags8.twoLineEditorToolbar),
+    return (0, _react2.jsx)("div", {
+      css: (0, _MainToolbar.mainToolbarStyle)(props.showKeyline || contextPanelWidth > 0, !!((_props$featureFlags7 = props.featureFlags) !== null && _props$featureFlags7 !== void 0 && _props$featureFlags7.twoLineEditorToolbar)),
+      "data-testid": "ak-editor-main-toolbar"
+    }, (0, _react2.jsx)("div", {
+      css: (0, _MainToolbar.mainToolbarFirstChildStyle)(!!((_props$featureFlags8 = props.featureFlags) !== null && _props$featureFlags8 !== void 0 && _props$featureFlags8.twoLineEditorToolbar)),
       role: "region",
       "aria-label": props.intl.formatMessage(_messages.default.toolbarLabel)
-    }, shouldSplitToolbar ? customToolbar : nonCustomToolbar), /*#__PURE__*/_react.default.createElement(_MainToolbar.MainToolbarSecondChild, {
+    }, shouldSplitToolbar ? customToolbar : nonCustomToolbar), (0, _react2.jsx)("div", {
+      css: (0, _MainToolbar.mainToolbarSecondChildStyle)(!!((_props$featureFlags9 = props.featureFlags) !== null && _props$featureFlags9 !== void 0 && _props$featureFlags9.twoLineEditorToolbar)),
       "data-testid": 'avatar-group-outside-plugin',
-      twoLineEditorToolbar: !!((_props$featureFlags9 = props.featureFlags) !== null && _props$featureFlags9 !== void 0 && _props$featureFlags9.twoLineEditorToolbar),
       role: "region",
       "aria-label": props.intl.formatMessage(_messages.default.pageActionsLabel)
     }, shouldSplitToolbar ? nonCustomToolbar : customToolbar));

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;