@atlaskit/editor-core 163.0.0 → 164.0.2

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

@@ -5,16 +5,15 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.DropdownItem = void 0;
+exports.dropdownItem = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _react = require("@emotion/react");
 
 var _colors = require("@atlaskit/theme/colors");
 
 var _templateObject;
 
-var DropdownItem = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  text-decoration: none;\n  padding: 8px 32px 8px 12px;\n  color: ", ";\n  > span {\n    display: flex;\n    margin-right: 8px;\n  }\n  &:hover {\n    background-color: ", ";\n  }\n"])), _colors.N800, _colors.N20);
-
-exports.DropdownItem = DropdownItem;
+var dropdownItem = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  text-decoration: none;\n  padding: 8px 32px 8px 12px;\n  color: ", ";\n  > span {\n    display: flex;\n    margin-right: 8px;\n  }\n  &:hover {\n    background-color: ", ";\n  }\n"])), _colors.N800, _colors.N20);
+exports.dropdownItem = dropdownItem;

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

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

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

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

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

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

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  /* stylelint-disable declaration-block-no-duplicate-properties */\n  position: relative;\n  position: sticky;\n  /* stylelint-enable declaration-block-no-duplicate-properties */\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,7 +144,7 @@ var FullPageEditor = /*#__PURE__*/function (_React$Component) {
         providerFactory: props.providerFactory,
         showKeyline: showKeyline,
         featureFlags: featureFlags
-      }), /*#__PURE__*/_react.default.createElement(_FullPageContentArea.FullPageContentArea, {
+      }), (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,31 +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,
+      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,
@@ -65,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));