@atlaskit/renderer 82.2.0 → 84.1.1

package/dist/cjs/react/nodes/index.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isTextNode = isTextNode;
+exports.BlockCard = void 0;
 Object.defineProperty(exports, "Blockquote", {
   enumerable: true,
   get: function get() {
@@ -24,6 +24,13 @@ Object.defineProperty(exports, "BulletList", {
     return _bulletList.default;
   }
 });
+Object.defineProperty(exports, "Caption", {
+  enumerable: true,
+  get: function get() {
+    return _caption.default;
+  }
+});
+exports.DecisionItem = exports.Date = exports.CodeBlock = void 0;
 Object.defineProperty(exports, "DecisionList", {
   enumerable: true,
   get: function get() {
@@ -42,6 +49,13 @@ Object.defineProperty(exports, "DocWithSelectAllTrap", {
     return _doc.DocWithSelectAllTrap;
   }
 });
+Object.defineProperty(exports, "EmbedCard", {
+  enumerable: true,
+  get: function get() {
+    return _embedCard.default;
+  }
+});
+exports.Expand = exports.Emoji = void 0;
 Object.defineProperty(exports, "Extension", {
   enumerable: true,
   get: function get() {
@@ -60,22 +74,23 @@ Object.defineProperty(exports, "Heading", {
     return _heading.default;
   }
 });
+exports.InlineCard = void 0;
 Object.defineProperty(exports, "InlineExtension", {
   enumerable: true,
   get: function get() {
     return _inlineExtension.default;
   }
 });
-Object.defineProperty(exports, "LayoutSection", {
+Object.defineProperty(exports, "LayoutColumn", {
   enumerable: true,
   get: function get() {
-    return _layoutSection.default;
+    return _layoutColumn.default;
   }
 });
-Object.defineProperty(exports, "LayoutColumn", {
+Object.defineProperty(exports, "LayoutSection", {
   enumerable: true,
   get: function get() {
-    return _layoutColumn.default;
+    return _layoutSection.default;
   }
 });
 Object.defineProperty(exports, "ListItem", {
@@ -84,18 +99,14 @@ Object.defineProperty(exports, "ListItem", {
     return _listItem.default;
   }
 });
+exports.MediaInline = exports.MediaGroup = exports.Media = void 0;
 Object.defineProperty(exports, "MediaSingle", {
   enumerable: true,
   get: function get() {
     return _mediaSingle.default;
   }
 });
-Object.defineProperty(exports, "Caption", {
-  enumerable: true,
-  get: function get() {
-    return _caption.default;
-  }
-});
+exports.Mention = void 0;
 Object.defineProperty(exports, "OrderedList", {
   enumerable: true,
   get: function get() {
@@ -126,12 +137,7 @@ Object.defineProperty(exports, "Rule", {
     return _rule.default;
   }
 });
-Object.defineProperty(exports, "TaskList", {
-  enumerable: true,
-  get: function get() {
-    return _taskList.default;
-  }
-});
+exports.Status = void 0;
 Object.defineProperty(exports, "Table", {
   enumerable: true,
   get: function get() {
@@ -150,19 +156,22 @@ Object.defineProperty(exports, "TableRow", {
     return _tableRow.default;
   }
 });
-Object.defineProperty(exports, "UnknownBlock", {
+exports.TaskItem = void 0;
+Object.defineProperty(exports, "TaskList", {
   enumerable: true,
   get: function get() {
-    return _unknownBlock.default;
+    return _taskList.default;
   }
 });
-Object.defineProperty(exports, "EmbedCard", {
+Object.defineProperty(exports, "UnknownBlock", {
   enumerable: true,
   get: function get() {
-    return _embedCard.default;
+    return _unknownBlock.default;
   }
 });
-exports.TaskItem = exports.Status = exports.Mention = exports.MediaInline = exports.MediaGroup = exports.Media = exports.InlineCard = exports.Expand = exports.Emoji = exports.DecisionItem = exports.Date = exports.CodeBlock = exports.BlockCard = exports.isEmojiDoc = exports.isTextWrapper = exports.isText = exports.mergeTextNodes = exports.toReact = exports.nodeToReact = void 0;
+exports.isText = exports.isEmojiDoc = void 0;
+exports.isTextNode = isTextNode;
+exports.toReact = exports.nodeToReact = exports.mergeTextNodes = exports.isTextWrapper = void 0;
 
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 

package/dist/cjs/react/nodes/media.js

@@ -69,7 +69,8 @@ var Media = /*#__PURE__*/function (_PureComponent) {
           alt = _this$props.alt,
           featureFlags = _this$props.featureFlags,
           allowMediaViewer = _this$props.shouldOpenMediaViewer,
-          enableDownloadButton = _this$props.enableDownloadButton;
+          enableDownloadButton = _this$props.enableDownloadButton,
+          ssr = _this$props.ssr;
 
       var linkMark = _this.props.marks.find(_this.props.isLinkMark);
 
@@ -85,7 +86,8 @@ var Media = /*#__PURE__*/function (_PureComponent) {
         eventHandlers: eventHandlers,
         alt: allowAltTextOnImages ? alt : undefined,
         featureFlags: featureFlags,
-        shouldEnableDownloadButton: enableDownloadButton
+        shouldEnableDownloadButton: enableDownloadButton,
+        ssr: ssr
       }));
 
       return linkHref ? /*#__PURE__*/_react.default.createElement(_editorCommon.MediaLink, {

package/dist/cjs/react/nodes/mediaSingle/index.js

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.getMediaContainerWidth = void 0;
+exports.getMediaContainerWidth = exports.default = void 0;
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
@@ -31,7 +31,7 @@ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _reactIntl = require("react-intl");
+var _reactIntlNext = require("react-intl-next");
 
 var _style = require("../../../ui/Renderer/style");
 
@@ -223,6 +223,6 @@ var MediaSingle = /*#__PURE__*/function (_Component) {
   return MediaSingle;
 }(_react.Component);
 
-var _default = (0, _reactIntl.injectIntl)(MediaSingle);
+var _default = (0, _reactIntlNext.injectIntl)(MediaSingle);
 
 exports.default = _default;

package/dist/cjs/react/nodes/panel.js

@@ -40,14 +40,12 @@ var _templateObject;
 var PanelStyled = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n"])), function (props) {
   if (props['data-panel-type'] !== _adfSchema.PanelType.CUSTOM || !props.backgroundColor) {
     return '';
-  }
+  } // Similar to mainDynamicStyles()
 
-  var border = (0, _theme.themed)({
-    light: 'none',
-    dark: "1px solid rgba(255, 255, 255, 0.4)"
-  })(props); // Similar to mainDynamicStyles()
 
-  return "\n      &[data-panel-type=".concat(_adfSchema.PanelType.CUSTOM, "] {\n        background-color: ").concat(props.backgroundColor, ";\n        border: ").concat(border, ";\n      }\n    ");
+  return "\n      &[data-panel-type=".concat(_adfSchema.PanelType.CUSTOM, "] {\n        background-color: ").concat(props.backgroundColor, ";\n        ").concat((0, _theme.themed)({
+    dark: _editorCommon.getPanelBackgroundDarkModeColors
+  }), ";\n      }\n    ");
 });
 
 var panelIcons = {

package/dist/cjs/react/nodes/table/colgroup.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Colgroup = exports.calcScalePercent = void 0;
+exports.calcScalePercent = exports.Colgroup = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 

package/dist/cjs/react/nodes/table/sticky.js

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.OverflowParent = exports.StickyTable = exports.FixedTableDiv = exports.tableStickyPadding = void 0;
+exports.tableStickyPadding = exports.StickyTable = exports.OverflowParent = exports.FixedTableDiv = void 0;
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 

package/dist/cjs/react/nodes/tableCell.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TableCell = exports.TableHeader = exports.withSortableColumn = void 0;
+exports.withSortableColumn = exports.TableHeader = exports.TableCell = void 0;
 
 var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
 

package/dist/cjs/react/renderer-node.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.insideBreakoutLayout = exports.hasBreakOutMark = exports.isLayoutNode = void 0;
+exports.isLayoutNode = exports.insideBreakoutLayout = exports.hasBreakOutMark = void 0;
 
 var isLayoutNode = function isLayoutNode(node) {
   return node.type.name === 'layoutSection';

package/dist/cjs/react/utils/links.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isNestedHeaderLinksEnabled = isNestedHeaderLinksEnabled;
 exports.getActiveHeadingId = getActiveHeadingId;
+exports.isNestedHeaderLinksEnabled = isNestedHeaderLinksEnabled;
 
 function isNestedHeaderLinksEnabled(allowHeadingAnchorLinks) {
   // If it's a boolean or undefined, then we don't support nesting.

package/dist/cjs/render-document.js

@@ -11,6 +11,10 @@ var _validator = require("@atlaskit/editor-common/validator");
 
 var _editorCommon = require("@atlaskit/editor-common");
 
+var _enums = require("./analytics/enums");
+
+var _events = require("./analytics/events");
+
 var _unsupportedContent = require("./analytics/unsupported-content");
 
 var SUPPORTS_HIRES_TIMER_API = !!(window.performance && performance.now);
@@ -75,7 +79,23 @@ var renderDocument = function renderDocument(doc, serializer) {
 
   var _withStopwatch2 = withStopwatch(function () {
     var pmNode = schema.nodeFromJSON(validDoc);
-    pmNode.check();
+
+    try {
+      pmNode.check();
+    } catch (err) {
+      if (dispatchAnalyticsEvent) {
+        dispatchAnalyticsEvent({
+          action: _enums.ACTION.INVALID_PROSEMIRROR_DOCUMENT,
+          actionSubject: _enums.ACTION_SUBJECT.RENDERER,
+          attributes: {
+            platform: _events.PLATFORM.WEB,
+            error: err === null || err === void 0 ? void 0 : err.toString()
+          },
+          eventType: _enums.EVENT_TYPE.OPERATIONAL
+        });
+      }
+    }
+
     return pmNode;
   }),
       node = _withStopwatch2.output,

package/dist/cjs/renderer-context.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.RendererContextProvider = exports.useRendererContext = void 0;
+exports.useRendererContext = exports.RendererContextProvider = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 

package/dist/cjs/steps/index.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.resolvePos = resolvePos;
-exports.getPosFromRange = getPosFromRange;
 exports.createAnnotationStep = createAnnotationStep;
+exports.getPosFromRange = getPosFromRange;
+exports.resolvePos = resolvePos;
 
 var _prosemirrorTransform = require("prosemirror-transform");
 

package/dist/cjs/text/nodes/index.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.nodeToReducerMapping = exports.reduce = void 0;
+exports.reduce = exports.nodeToReducerMapping = void 0;
 
 var _blockquote = _interopRequireDefault(require("./blockquote"));
 

package/dist/cjs/ui/Expand.js

@@ -33,7 +33,7 @@ var _events = require("../analytics/events");
 
 var _enums = require("../analytics/enums");
 
-var _reactIntl = require("react-intl");
+var _reactIntlNext = require("react-intl-next");
 
 var _activeHeaderIdProvider = require("./active-header-id-provider");
 
@@ -157,6 +157,6 @@ function Expand(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_editorCommon.WidthProvider, null, /*#__PURE__*/_react.default.createElement(_editorCommon.ClearNextSiblingMarginTop, null), children))));
 }
 
-var _default = (0, _reactIntl.injectIntl)(Expand);
+var _default = (0, _reactIntlNext.injectIntl)(Expand);
 
 exports.default = _default;

package/dist/cjs/ui/MediaCard.js

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.MediaCard = exports.getClipboardAttrs = exports.CardWrapper = exports.MediaCardInternal = exports.getListOfIdentifiersFromDoc = void 0;
+exports.getListOfIdentifiersFromDoc = exports.getClipboardAttrs = exports.MediaCardInternal = exports.MediaCard = exports.CardWrapper = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
@@ -290,7 +290,8 @@ var MediaCardInternal = /*#__PURE__*/function (_Component) {
           imageStatus = _this$props4.imageStatus,
           disableOverlay = _this$props4.disableOverlay,
           alt = _this$props4.alt,
-          featureFlags = _this$props4.featureFlags;
+          featureFlags = _this$props4.featureFlags,
+          ssr = _this$props4.ssr;
 
       if (imageStatus === 'loading' || !url) {
         return this.renderLoadingCard();
@@ -315,7 +316,8 @@ var MediaCardInternal = /*#__PURE__*/function (_Component) {
         mediaViewerDataSource: {
           list: Array.from(mediaIdentifierMap.values())
         },
-        featureFlags: featureFlags
+        featureFlags: featureFlags,
+        ssr: ssr === null || ssr === void 0 ? void 0 : ssr.mode
       });
     }
     /**
@@ -330,7 +332,7 @@ var MediaCardInternal = /*#__PURE__*/function (_Component) {
     value: function render() {
       var _this$state = this.state,
           contextIdentifierProvider = _this$state.contextIdentifierProvider,
-          mediaClientConfig = _this$state.mediaClientConfig,
+          mediaClientConfigInState = _this$state.mediaClientConfig,
           fileState = _this$state.fileState;
       var _this$props5 = this.props,
           id = _this$props5.id,
@@ -346,7 +348,8 @@ var MediaCardInternal = /*#__PURE__*/function (_Component) {
           originalDimensions = _this$props5.originalDimensions,
           forceOpenMediaViewer = _this$props5.shouldOpenMediaViewer,
           featureFlags = _this$props5.featureFlags,
-          shouldEnableDownloadButton = _this$props5.shouldEnableDownloadButton;
+          shouldEnableDownloadButton = _this$props5.shouldEnableDownloadButton,
+          ssr = _this$props5.ssr;
       var isMobile = rendererAppearance === 'mobile';
       var shouldPlayInline = useInlinePlayer !== undefined ? useInlinePlayer : true;
       var isInlinePlayer = isMobile ? false : shouldPlayInline;
@@ -361,6 +364,8 @@ var MediaCardInternal = /*#__PURE__*/function (_Component) {
         return null;
       }
 
+      var mediaClientConfig = !!ssr ? ssr.config : mediaClientConfigInState;
+
       if (!mediaClientConfig || !id) {
         return this.renderLoadingCard();
       }
@@ -402,7 +407,8 @@ var MediaCardInternal = /*#__PURE__*/function (_Component) {
           list: Array.from(mediaIdentifierMap.values())
         },
         featureFlags: featureFlags,
-        shouldEnableDownloadButton: shouldEnableDownloadButton
+        shouldEnableDownloadButton: shouldEnableDownloadButton,
+        ssr: ssr === null || ssr === void 0 ? void 0 : ssr.mode
       }));
     }
   }]);

package/dist/cjs/ui/Renderer/breakout-ssr.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.BreakoutSSRInlineScript = BreakoutSSRInlineScript;
-exports.createBreakoutInlineScript = createBreakoutInlineScript;
 exports.calcLineLength = exports.breakoutInlineScriptContext = void 0;
+exports.createBreakoutInlineScript = createBreakoutInlineScript;
 
 var _react = _interopRequireDefault(require("react"));
 

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

@@ -7,8 +7,9 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.Renderer = exports.NORMAL_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = void 0;
 exports.RendererWrapper = RendererWrapper;
-exports.default = exports.Renderer = exports.DEGRADED_SEVERITY_THRESHOLD = exports.NORMAL_SEVERITY_THRESHOLD = void 0;
+exports.default = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -28,8 +29,6 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _reactIntl = require("react-intl");
-
 var _adfSchema = require("@atlaskit/adf-schema");
 
 var _adfUtils = require("@atlaskit/adf-utils");
@@ -223,7 +222,7 @@ var Renderer = /*#__PURE__*/function (_PureComponent) {
       var nextMedia = nextProps.media || {};
       var media = this.props.media || {};
 
-      if (nextProps.portal !== this.props.portal || nextProps.appearance !== this.props.appearance || nextProps.stickyHeaders !== this.props.stickyHeaders || nextProps.disableActions !== this.props.disableActions || nextProps.UNSAFE_allowCustomPanels !== this.props.UNSAFE_allowCustomPanels || nextProps.allowHeadingAnchorLinks !== this.props.allowHeadingAnchorLinks || nextMedia.allowLinking !== media.allowLinking) {
+      if (nextProps.portal !== this.props.portal || nextProps.appearance !== this.props.appearance || nextProps.stickyHeaders !== this.props.stickyHeaders || nextProps.disableActions !== this.props.disableActions || nextProps.allowCustomPanels !== this.props.allowCustomPanels || nextProps.allowHeadingAnchorLinks !== this.props.allowHeadingAnchorLinks || nextMedia.allowLinking !== media.allowLinking) {
         this.serializer = new _.ReactSerializer(this.deriveSerializerProps(nextProps));
       }
     }
@@ -257,7 +256,7 @@ var Renderer = /*#__PURE__*/function (_PureComponent) {
         surroundTextNodesWithTextWrapper: allowAnnotationsDraftMode,
         media: props.media,
         allowCopyToClipboard: props.allowCopyToClipboard,
-        allowCustomPanels: props.UNSAFE_allowCustomPanels,
+        allowCustomPanels: props.allowCustomPanels,
         allowAnnotations: props.allowAnnotations,
         allowSelectAllTrap: props.allowSelectAllTrap,
         allowPlaceholderText: props.allowPlaceholderText
@@ -283,7 +282,7 @@ var Renderer = /*#__PURE__*/function (_PureComponent) {
           allowPlaceholderText = _this$props2.allowPlaceholderText,
           allowColumnSorting = _this$props2.allowColumnSorting,
           allowCopyToClipboard = _this$props2.allowCopyToClipboard,
-          UNSAFE_allowCustomPanels = _this$props2.UNSAFE_allowCustomPanels;
+          allowCustomPanels = _this$props2.allowCustomPanels;
       var allowNestedHeaderLinks = (0, _links.isNestedHeaderLinksEnabled)(allowHeadingAnchorLinks);
       /**
        * Handle clicks inside renderer. If the click isn't on media, in the media picker, or on a
@@ -346,7 +345,7 @@ var Renderer = /*#__PURE__*/function (_PureComponent) {
           value: this.featureFlags(this.props.featureFlags)
         }, /*#__PURE__*/_react.default.createElement(_copyTextProvider.CopyTextProvider, null, /*#__PURE__*/_react.default.createElement(_activeHeaderIdProvider.ActiveHeaderIdProvider, {
           value: (0, _links.getActiveHeadingId)(allowHeadingAnchorLinks)
-        }, /*#__PURE__*/_react.default.createElement(_reactIntl.IntlProvider, null, /*#__PURE__*/_react.default.createElement(_analyticsContext.default.Provider, {
+        }, /*#__PURE__*/_react.default.createElement(_editorCommon.LegacyToNextIntlProvider, null, /*#__PURE__*/_react.default.createElement(_editorCommon.IntlLegacyFallbackProvider, null, /*#__PURE__*/_react.default.createElement(_analyticsContext.default.Provider, {
           value: {
             fireAnalyticsEvent: function fireAnalyticsEvent(event) {
               return _this3.fireAnalyticsEvent(event);
@@ -358,7 +357,7 @@ var Renderer = /*#__PURE__*/function (_PureComponent) {
           allowNestedHeaderLinks: allowNestedHeaderLinks,
           allowColumnSorting: allowColumnSorting,
           allowCopyToClipboard: allowCopyToClipboard,
-          allowCustomPanels: UNSAFE_allowCustomPanels,
+          allowCustomPanels: allowCustomPanels,
           allowPlaceholderText: allowPlaceholderText,
           innerRef: this.editorRef,
           onClick: handleWrapperOnClick,
@@ -369,7 +368,7 @@ var Renderer = /*#__PURE__*/function (_PureComponent) {
           doc: pmDoc,
           schema: schema,
           onAnalyticsEvent: this.fireAnalyticsEvent
-        }, result))))))));
+        }, result)))))))));
 
         return truncated ? /*#__PURE__*/_react.default.createElement(_truncatedWrapper.TruncatedWrapper, {
           height: maxHeight,
@@ -423,14 +422,15 @@ var RendererWithAnalytics = /*#__PURE__*/_react.default.memo(function (props) {
     }
   }, /*#__PURE__*/_react.default.createElement(_editorCommon.WithCreateAnalyticsEvent, {
     render: function render(createAnalyticsEvent) {
+      // `IntlNextErrorBoundary` only captures Internationalisation errors, leaving others for `ErrorBoundary`.
       return /*#__PURE__*/_react.default.createElement(_ErrorBoundary.ErrorBoundary, {
         component: _enums.ACTION_SUBJECT.RENDERER,
         rethrowError: true,
         fallbackComponent: null,
         createAnalyticsEvent: createAnalyticsEvent
-      }, /*#__PURE__*/_react.default.createElement(Renderer, (0, _extends2.default)({}, props, {
+      }, /*#__PURE__*/_react.default.createElement(_editorCommon.IntlNextErrorBoundary, null, /*#__PURE__*/_react.default.createElement(Renderer, (0, _extends2.default)({}, props, {
         createAnalyticsEvent: createAnalyticsEvent
-      })));
+      }))));
     }
   }));
 });

package/dist/cjs/ui/Renderer/style.js

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Wrapper = exports.headingSizes = exports.FullPagePadding = void 0;
+exports.headingSizes = exports.Wrapper = exports.FullPagePadding = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
@@ -21,7 +21,9 @@ var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
 
 var _typography = require("@atlaskit/theme/typography");
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _styles = require("@atlaskit/editor-common/styles");
+
+var _ui = require("@atlaskit/editor-common/ui");
 
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
@@ -92,7 +94,7 @@ var tableSortableColumnStyle = function tableSortableColumnStyle(_ref2) {
     headingsCss = "\n      /**\n       * When the sort button is enabled we want the heading's copy link button\n       * to reserve space so that it can prematurely wrap to avoid the button\n       * being displayed underneath the sort button (hidden or obscured).\n       *\n       * The two buttons fight each other since the sort button is displayed\n       * on hover of the <th /> and the copy link button is displayed on hover\n       * of the heading.\n       *\n       * Note that this can break the WYSIWYG experience in the case where\n       * a heading fills the width of the table cell and the only thing which\n       * wraps is the copy link button. This is hopefully a rare fringe case.\n       */\n      .".concat(_headingAnchor.HeadingAnchorWrapperClassName, " {\n        position: unset;\n      }\n      > {\n        h1, h2, h3, h4, h5, h6 {\n          margin-right: 30px;\n        }\n      }\n    ");
   }
 
-  return "\n    .".concat(_consts.RendererCssClassName.SORTABLE_COLUMN, " {\n      padding: 0;\n\n      .").concat(_consts.RendererCssClassName.SORTABLE_COLUMN_BUTTON, " {\n        width: 100%;\n        height: 100%;\n        cursor: pointer;\n        padding: ").concat(_editorCommon.tableCellPadding, "px;\n        border-width: 1.5px;\n        border-style: solid;\n        border-color: transparent;\n\n        > *:first-child {\n          margin-top: 0;\n        }\n\n        > .ProseMirror-gapcursor.-right:first-child + * {\n          margin-top: 0;\n        }\n\n        > .ProseMirror-gapcursor:first-child + span + * {\n          margin-top: 0;\n        }\n\n        @supports selector(:focus-visible) {\n          &:focus {\n            outline: unset;\n          }\n          &:focus-visible {\n            border-color: ").concat(colors.B300, ";\n          }\n        }\n\n        ").concat(headingsCss, "\n      }\n\n      &.").concat(_consts.RendererCssClassName.SORTABLE_COLUMN_NOT_ALLOWED, " .").concat(_consts.RendererCssClassName.SORTABLE_COLUMN_BUTTON, " {\n        cursor: default;\n      }\n\n      .").concat(_consts.RendererCssClassName.SORTABLE_COLUMN_ICON, " {\n        margin: 0;\n        opacity: 1;\n        transition: opacity 0.2s ease-in-out;\n      }\n\n      .").concat(_consts.RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, " {\n        opacity: 0;\n      }\n\n      &:hover {\n        .").concat(_consts.RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, " {\n          opacity: 1;\n        }\n      }\n    }\n  ");
+  return "\n    .".concat(_consts.RendererCssClassName.SORTABLE_COLUMN, " {\n      padding: 0;\n\n      .").concat(_consts.RendererCssClassName.SORTABLE_COLUMN_BUTTON, " {\n        width: 100%;\n        height: 100%;\n        cursor: pointer;\n        padding: ").concat(_styles.tableCellPadding, "px;\n        border-width: 1.5px;\n        border-style: solid;\n        border-color: transparent;\n\n        > *:first-child {\n          margin-top: 0;\n        }\n\n        > .ProseMirror-gapcursor.-right:first-child + * {\n          margin-top: 0;\n        }\n\n        > .ProseMirror-gapcursor:first-child + span + * {\n          margin-top: 0;\n        }\n\n        @supports selector(:focus-visible) {\n          &:focus {\n            outline: unset;\n          }\n          &:focus-visible {\n            border-color: ").concat(colors.B300, ";\n          }\n        }\n\n        ").concat(headingsCss, "\n      }\n\n      &.").concat(_consts.RendererCssClassName.SORTABLE_COLUMN_NOT_ALLOWED, " .").concat(_consts.RendererCssClassName.SORTABLE_COLUMN_BUTTON, " {\n        cursor: default;\n      }\n\n      .").concat(_consts.RendererCssClassName.SORTABLE_COLUMN_ICON, " {\n        margin: 0;\n        opacity: 1;\n        transition: opacity 0.2s ease-in-out;\n      }\n\n      .").concat(_consts.RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, " {\n        opacity: 0;\n      }\n\n      &:hover {\n        .").concat(_consts.RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, " {\n          opacity: 1;\n        }\n      }\n    }\n  ");
 };
 
 var fullPageStyles = function fullPageStyles(_ref3) {
@@ -117,16 +119,16 @@ var fullWidthStyles = function fullWidthStyles(_ref4) {
 }; // prettier-ignore
 
 
-var Wrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: ", "px;\n  line-height: 1.5rem;\n  color: ", ";\n\n  ", "\n  ", "\n\n  & h1 {\n    ", "\n  }\n\n  & h2 {\n    ", "\n  }\n\n  & h3 {\n    ", "\n  }\n\n  & h4 {\n    ", "\n  }\n\n  & h5 {\n    ", "\n  }\n\n  & h6 {\n    ", "\n  }\n\n  & span.akActionMark {\n    color: ", ";\n    text-decoration: none;\n\n    &:hover {\n      color: ", ";\n      text-decoration: underline;\n    }\n  }\n\n  & span.akActionMark {\n    cursor: pointer;\n  }\n\n  & span[data-placeholder] {\n    color: ", ";\n  }\n\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", "\n\n  & .UnknownBlock {\n    font-family: ", ";\n    font-size: ", ";\n    font-weight: 400;\n    white-space: pre-wrap;\n    word-wrap: break-word;\n  }\n\n  & span.date-node {\n    background: ", ";\n    border-radius: ", "px;\n    color: ", ";\n    padding: 2px 4px;\n    margin: 0 1px;\n    transition: background 0.3s;\n  }\n\n  & span.date-node-highlighted {\n    background: ", ";\n    color: ", ";\n  }\n\n  & .renderer-image {\n    max-width: 100%;\n    display: block;\n    margin: ", "px 0;\n  }\n\n  .", ".rich-media-wrapped + .", ":not(.rich-media-wrapped) {\n    clear: both;\n  }\n\n  & .code-block,\n  & blockquote,\n  & hr,\n  & > div > div:not(.rich-media-wrapped),\n  .", ".rich-media-wrapped + .rich-media-wrapped + *:not(.rich-media-wrapped),\n  .", ".rich-media-wrapped + div:not(.rich-media-wrapped),\n  .", ".image-align-start,\n  .", ".image-center,\n  .", ".image-align-end {\n    clear: both;\n  }\n\n  & .rich-media-wrapped {\n    & + h1,\n    & + h2,\n    & + h3,\n    & + h4,\n    & + h5,\n    & + h6 {\n      margin-top: 8px;\n    }\n  }\n\n  ", "\n\n  ", " &\n  div[class^='image-wrap-'] + div[class^='image-wrap-'] {\n    margin-left: 0;\n    margin-right: 0;\n  }\n\n  /* Breakout for tables and extensions */\n  .", " > {\n    * .", " {\n      width: 100% !important;\n      left: 0 !important;\n    }\n\n    * .", " {\n      overflow-x: auto;\n    }\n\n    & .", ":first-child {\n      margin-top: 0;\n    }\n  }\n\n  .", " {\n    margin-top: ", ";\n  }\n\n  .", " {\n      margin-left: 50%;\n      transform: translateX(-50%);\n  }\n\n  .", " {\n    overflow-x: auto;\n  }\n\n  ", "\n\n  .", " {\n    z-index: 0;\n    transition: all 0.1s linear;\n    display: flex; /* needed to avoid position: fixed jumpiness in Chrome */\n\n    /** Shadow overrides */\n    &.", "::after, &.", "::before {\n      top: ", "px;\n      height: calc(100% - ", "px);\n      z-index: ", ";\n    }\n\n    /**\n     * A hack for making all the <th /> heights equal in case some have shorter\n     * content than others.\n     *\n     * This is done to make sort buttons fill entire <th />.\n     */\n    table {\n      height: 1px; /* will be ignored */\n      ", ";\n      margin-left: 0;\n      margin-right: 0;\n    }\n\n    table tr:first-child {\n      height: 100%;\n\n      td, th {\n        position: relative;\n      }\n    }\n\n    table[data-number-column='true'] {\n      .", " {\n        background-color: ", ";\n        border-right: 1px solid ", ";\n        width: ", "px;\n        text-align: center;\n        color: ", ";\n        font-size: ", ";\n      }\n\n      .fixed .", " {\n        border-right: 0px none;\n      }\n    }\n  }\n\n  tr[data-header-row].fixed {\n    position: fixed !important;\n    display: flex;\n    overflow: hidden;\n    z-index: ", ";\n\n    border-right: 1px solid ", ";\n    border-bottom: 1px solid ", ";\n\n    /* this is to compensate for the table border */\n    transform: translateX(-1px);\n  }\n\n  .sticky > th {\n    z-index: ", ";\n    position: sticky !important;\n    top: 0;\n  }\n\n  /* Make the number column header sticky */\n  .sticky > td {\n    position: sticky !important;\n    top: 0;\n  }\n\n  /* add border for position: sticky\n     and work around background-clip: padding-box\n     bug for FF causing box-shadow bug in Chrome */\n  .sticky th, .sticky td {\n    box-shadow: 0px 1px ", ", 0px -0.5px ", ", inset -1px 0px ", ", 0px -1px ", ";\n  }\n\n   /* this will remove jumpiness caused in Chrome for sticky headers */\n  .fixed + tr {\n    min-height: 0px;\n  }\n\n  /*\n   * We wrap CodeBlock in a grid to prevent it from overflowing the container of the renderer.\n   * See ED-4159.\n   */\n  & .code-block {\n    max-width: 100%;\n    /* -ms- properties are necessary until MS supports the latest version of the grid spec */\n    /* stylelint-disable value-no-vendor-prefix, declaration-block-no-duplicate-properties */\n    display: -ms-grid;\n    display: grid;\n    -ms-grid-columns: auto 1fr;\n    /* stylelint-enable */\n\n    grid-template-columns: minmax(0, 1fr);\n    position: relative;\n    border-radius: ", "px;\n\n    /*\n     * The overall renderer has word-wrap: break; which causes issues with\n     * code block line numbers in Safari / iOS.\n     */\n    word-wrap: normal;\n\n    & > span {\n      /* stylelint-disable value-no-vendor-prefix */\n      -ms-grid-row: 1;\n      -ms-grid-column: 2;\n      /* stylelint-enable */\n      grid-column: 1;\n    }\n  }\n\n  & .MediaGroup,\n  & .code-block {\n    margin-top: ", ";\n\n    &:first-child {\n      margin-top: 0;\n    }\n\n    &:hover button.copy-to-clipboard{\n      opacity: 1;\n      position: absolute;\n      height: 32px;\n      width: 32px;\n      right: 6px;\n      top: 4px;\n      padding: 2px;\n    }\n  }\n\n  ", ";\n  & [data-layout-section] {\n    margin-top: ", "px;\n    & > div + div {\n      margin-left: ", "px;\n    }\n\n    @media screen and (max-width: ", "px) {\n      & > div + div {\n        margin-left: 0;\n      }\n    }\n  }\n"])), _editorSharedStyles.editorFontSize, (0, _components.themed)({
+var Wrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: ", "px;\n  line-height: 1.5rem;\n  color: ", ";\n\n  ", "\n  ", "\n\n  & h1 {\n    ", "\n  }\n\n  & h2 {\n    ", "\n  }\n\n  & h3 {\n    ", "\n  }\n\n  & h4 {\n    ", "\n  }\n\n  & h5 {\n    ", "\n  }\n\n  & h6 {\n    ", "\n  }\n\n  & span.akActionMark {\n    color: ", ";\n    text-decoration: none;\n\n    &:hover {\n      color: ", ";\n      text-decoration: underline;\n    }\n  }\n\n  & span.akActionMark {\n    cursor: pointer;\n  }\n\n  & span[data-placeholder] {\n    color: ", ";\n  }\n\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", "\n\n  & .UnknownBlock {\n    font-family: ", ";\n    font-size: ", ";\n    font-weight: 400;\n    white-space: pre-wrap;\n    word-wrap: break-word;\n  }\n\n  & span.date-node {\n    background: ", ";\n    border-radius: ", "px;\n    color: ", ";\n    padding: 2px 4px;\n    margin: 0 1px;\n    transition: background 0.3s;\n  }\n\n  & span.date-node-highlighted {\n    background: ", ";\n    color: ", ";\n  }\n\n  & .renderer-image {\n    max-width: 100%;\n    display: block;\n    margin: ", "px 0;\n  }\n\n  .", ".rich-media-wrapped + .", ":not(.rich-media-wrapped) {\n    clear: both;\n  }\n\n  & .code-block,\n  & blockquote,\n  & hr,\n  & > div > div:not(.rich-media-wrapped),\n  .", ".rich-media-wrapped + .rich-media-wrapped + *:not(.rich-media-wrapped),\n  .", ".rich-media-wrapped + div:not(.rich-media-wrapped),\n  .", ".image-align-start,\n  .", ".image-center,\n  .", ".image-align-end {\n    clear: both;\n  }\n\n  & .rich-media-wrapped {\n    & + h1,\n    & + h2,\n    & + h3,\n    & + h4,\n    & + h5,\n    & + h6 {\n      margin-top: 8px;\n    }\n  }\n\n  ", "\n\n  ", " &\n  div[class^='image-wrap-'] + div[class^='image-wrap-'] {\n    margin-left: 0;\n    margin-right: 0;\n  }\n\n  /* Breakout for tables and extensions */\n  .", " > {\n    * .", " {\n      width: 100% !important;\n      left: 0 !important;\n    }\n\n    * .", " {\n      overflow-x: auto;\n    }\n\n    & .", ":first-child {\n      margin-top: 0;\n    }\n  }\n\n  .", " {\n    margin-top: ", ";\n  }\n\n  .", " {\n      margin-left: 50%;\n      transform: translateX(-50%);\n  }\n\n  .", " {\n    overflow-x: auto;\n  }\n\n  ", "\n\n  .", " {\n    z-index: 0;\n    transition: all 0.1s linear;\n    display: flex; /* needed to avoid position: fixed jumpiness in Chrome */\n\n    /** Shadow overrides */\n    &.", "::after, &.", "::before {\n      top: ", "px;\n      height: calc(100% - ", "px);\n      z-index: ", ";\n    }\n\n    /**\n     * A hack for making all the <th /> heights equal in case some have shorter\n     * content than others.\n     *\n     * This is done to make sort buttons fill entire <th />.\n     */\n    table {\n      height: 1px; /* will be ignored */\n      ", ";\n      margin-left: 0;\n      margin-right: 0;\n    }\n\n    table tr:first-child {\n      height: 100%;\n\n      td, th {\n        position: relative;\n      }\n    }\n\n    table[data-number-column='true'] {\n      .", " {\n        background-color: ", ";\n        border-right: 1px solid ", ";\n        width: ", "px;\n        text-align: center;\n        color: ", ";\n        font-size: ", ";\n      }\n\n      .fixed .", " {\n        border-right: 0px none;\n      }\n    }\n  }\n\n  tr[data-header-row].fixed {\n    position: fixed !important;\n    display: flex;\n    overflow: hidden;\n    z-index: ", ";\n\n    border-right: 1px solid ", ";\n    border-bottom: 1px solid ", ";\n\n    /* this is to compensate for the table border */\n    transform: translateX(-1px);\n  }\n\n  .sticky > th {\n    z-index: ", ";\n    position: sticky !important;\n    top: 0;\n  }\n\n  /* Make the number column header sticky */\n  .sticky > td {\n    position: sticky !important;\n    top: 0;\n  }\n\n  /* add border for position: sticky\n     and work around background-clip: padding-box\n     bug for FF causing box-shadow bug in Chrome */\n  .sticky th, .sticky td {\n    box-shadow: 0px 1px ", ", 0px -0.5px ", ", inset -1px 0px ", ", 0px -1px ", ";\n  }\n\n   /* this will remove jumpiness caused in Chrome for sticky headers */\n  .fixed + tr {\n    min-height: 0px;\n  }\n\n  /*\n   * We wrap CodeBlock in a grid to prevent it from overflowing the container of the renderer.\n   * See ED-4159.\n   */\n  & .code-block {\n    max-width: 100%;\n    /* -ms- properties are necessary until MS supports the latest version of the grid spec */\n    /* stylelint-disable value-no-vendor-prefix, declaration-block-no-duplicate-properties */\n    display: -ms-grid;\n    display: grid;\n    -ms-grid-columns: auto 1fr;\n    /* stylelint-enable */\n\n    grid-template-columns: minmax(0, 1fr);\n    position: relative;\n    border-radius: ", "px;\n\n    /*\n     * The overall renderer has word-wrap: break; which causes issues with\n     * code block line numbers in Safari / iOS.\n     */\n    word-wrap: normal;\n\n    & > span {\n      /* stylelint-disable value-no-vendor-prefix */\n      -ms-grid-row: 1;\n      -ms-grid-column: 2;\n      /* stylelint-enable */\n      grid-column: 1;\n    }\n  }\n\n  & .MediaGroup,\n  & .code-block {\n    margin-top: ", ";\n\n    &:first-child {\n      margin-top: 0;\n    }\n\n    &:hover button.copy-to-clipboard, .copy-to-clipboard:focus{\n      opacity: 1;\n      position: absolute;\n      height: 32px;\n      width: 32px;\n      right: 6px;\n      top: 4px;\n      padding: 2px;\n    }\n  }\n\n  ", ";\n  & [data-layout-section] {\n    margin-top: ", "px;\n    & > div + div {\n      margin-left: ", "px;\n    }\n\n    @media screen and (max-width: ", "px) {\n      & > div + div {\n        margin-left: 0;\n      }\n    }\n  }\n"])), _editorSharedStyles.editorFontSize, (0, _components.themed)({
   light: colors.N800,
   dark: '#B8C7E0'
-}), fullPageStyles, fullWidthStyles, headingAnchorStyle('h1'), headingAnchorStyle('h2'), headingAnchorStyle('h3'), headingAnchorStyle('h4'), headingAnchorStyle('h5'), headingAnchorStyle('h6'), colors.B400, colors.B300, colors.placeholderText, _editorCommon.whitespaceSharedStyles, _editorCommon.blockquoteSharedStyles, _editorCommon.headingsSharedStyles, _editorCommon.panelSharedStyles, _editorCommon.ruleSharedStyles, _editorCommon.paragraphSharedStyles, _editorCommon.listsSharedStyles, _editorCommon.indentationSharedStyles, _editorCommon.blockMarksSharedStyles, _editorCommon.codeMarkSharedStyles, _editorCommon.shadowSharedStyle, _editorCommon.dateSharedStyle, _editorCommon.tasksAndDecisionsStyles, _editorCommon.smartCardSharedStyles, (0, _constants.fontFamily)(), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), (0, _components.themed)({
+}), fullPageStyles, fullWidthStyles, headingAnchorStyle('h1'), headingAnchorStyle('h2'), headingAnchorStyle('h3'), headingAnchorStyle('h4'), headingAnchorStyle('h5'), headingAnchorStyle('h6'), colors.B400, colors.B300, colors.placeholderText, _styles.whitespaceSharedStyles, _styles.blockquoteSharedStyles, _styles.headingsSharedStyles, _styles.panelSharedStyles, _styles.ruleSharedStyles, _styles.paragraphSharedStyles, _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.blockMarksSharedStyles, _styles.codeMarkSharedStyles, _styles.shadowSharedStyle, _styles.dateSharedStyle, _styles.textColorStyles, _styles.tasksAndDecisionsStyles, _styles.smartCardSharedStyles, (0, _constants.fontFamily)(), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), (0, _components.themed)({
   light: colors.N30A,
   dark: colors.DN70
 }), (0, _constants.borderRadius)(), (0, _components.themed)({
   light: colors.N800,
   dark: colors.DN600
-}), colors.R50, colors.R500, (0, _constants.gridSize)() * 3, _editorCommon.richMediaClassName, _editorCommon.richMediaClassName, _editorCommon.richMediaClassName, _editorCommon.richMediaClassName, _editorCommon.richMediaClassName, _editorCommon.richMediaClassName, _editorCommon.richMediaClassName, alignedHeadingAnchorStyle, _editorCommon.mediaSingleSharedStyle, _consts.RendererCssClassName.DOCUMENT, _editorCommon.TableSharedCssClassName.TABLE_CONTAINER, _consts.RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER, _consts.RendererCssClassName.EXTENSION, _consts.RendererCssClassName.EXTENSION, _editorSharedStyles.blockNodesVerticalMargin, _consts.RendererCssClassName.EXTENSION_CENTER_ALIGN, _editorCommon.TableSharedCssClassName.TABLE_NODE_WRAPPER, _editorCommon.tableSharedStyle, _editorCommon.TableSharedCssClassName.TABLE_CONTAINER, _editorCommon.shadowClassNames.RIGHT_SHADOW, _editorCommon.shadowClassNames.LEFT_SHADOW, _editorCommon.tableMarginTop - 1, _editorCommon.tableMarginTop, _editorSharedStyles.akEditorStickyHeaderZIndex, tableSortableColumnStyle, _consts.RendererCssClassName.NUMBER_COLUMN, (0, _components.themed)({
+}), colors.R50, colors.R500, (0, _constants.gridSize)() * 3, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, alignedHeadingAnchorStyle, _styles.mediaSingleSharedStyle, _consts.RendererCssClassName.DOCUMENT, _styles.TableSharedCssClassName.TABLE_CONTAINER, _consts.RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER, _consts.RendererCssClassName.EXTENSION, _consts.RendererCssClassName.EXTENSION, _editorSharedStyles.blockNodesVerticalMargin, _consts.RendererCssClassName.EXTENSION_CENTER_ALIGN, _styles.TableSharedCssClassName.TABLE_NODE_WRAPPER, _styles.tableSharedStyle, _styles.TableSharedCssClassName.TABLE_CONTAINER, _ui.shadowClassNames.RIGHT_SHADOW, _ui.shadowClassNames.LEFT_SHADOW, _styles.tableMarginTop - 1, _styles.tableMarginTop, _editorSharedStyles.akEditorStickyHeaderZIndex, tableSortableColumnStyle, _consts.RendererCssClassName.NUMBER_COLUMN, (0, _components.themed)({
   light: _editorSharedStyles.akEditorTableToolbar,
   dark: _editorSharedStyles.akEditorTableToolbarDark
 }), (0, _components.themed)({
@@ -153,6 +155,6 @@ var Wrapper = _styledComponents.default.div(_templateObject2 || (_templateObject
 }), (0, _components.themed)({
   light: _editorSharedStyles.akEditorTableToolbar,
   dark: _editorSharedStyles.akEditorTableToolbarDark
-}), (0, _constants.borderRadius)(), _editorSharedStyles.blockNodesVerticalMargin, _editorCommon.columnLayoutSharedStyle, (0, _constants.gridSize)() * 2.5, (0, _constants.gridSize)() * 4, _editorSharedStyles.gridMediumMaxWidth);
+}), (0, _constants.borderRadius)(), _editorSharedStyles.blockNodesVerticalMargin, _styles.columnLayoutSharedStyle, (0, _constants.gridSize)() * 2.5, (0, _constants.gridSize)() * 4, _editorSharedStyles.gridMediumMaxWidth);
 
 exports.Wrapper = Wrapper;

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

@@ -8,7 +8,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.RendererActionsContext = RendererActionsContext;
-exports.RendererActionsContextConsumer = exports.RendererContext = void 0;
+exports.RendererContext = exports.RendererActionsContextConsumer = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 

package/dist/cjs/ui/SortingIcon.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.StatusClassNames = exports.TableSortIconDataUrl = void 0;
+exports.default = exports.TableSortIconDataUrl = exports.StatusClassNames = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
@@ -41,7 +41,7 @@ exports.StatusClassNames = StatusClassNames;
 
 var Wrapper = _styledComponents.default.figure(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  display: flex;\n  height: 28px;\n  width: 28px;\n  margin: 6px;\n  right: 0;\n  top: 0;\n  border: 2px solid #fff;\n  border-radius: ", "px;\n  background-color: ", ";\n  justify-content: center;\n  align-items: center;\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &.", " {\n    cursor: not-allowed;\n  }\n"])), (0, _constants.gridSize)() / 2, _colors.N20, _colors.N30, StatusClassNames.SORTING_NOT_ALLOWED);
 
-var TableSortingIcon = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  width: 8px;\n  height: 12px;\n  transition: transform 0.3s cubic-bezier(0.15, 1, 0.3, 1);\n  transform-origin: 50% 50%;\n  background-image: url(", ");\n\n  &.", " {\n    transform: rotate(-180deg);\n  }\n\n  &.", "-inactive {\n    opacity: 0.5;\n  }\n"])), TableSortIconDataUrl, StatusClassNames.DESC, TABLE_SORTING_ICON_CLASS);
+var TableSortingIcon = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  width: 8px;\n  height: 12px;\n  transition: transform 0.3s cubic-bezier(0.15, 1, 0.3, 1);\n  transform-origin: 50% 50%;\n  background-image: url(", ");\n\n  &.", " {\n    transform: rotate(-180deg);\n  }\n\n  &.", "-inactive {\n    opacity: 0.7;\n  }\n"])), TableSortIconDataUrl, StatusClassNames.DESC, TABLE_SORTING_ICON_CLASS);
 
 var getClassName = function getClassName(status) {
   switch (status) {

package/dist/cjs/ui/active-header-id-provider.js

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ActiveHeaderIdConsumer = exports.ActiveHeaderIdProvider = void 0;
+exports.ActiveHeaderIdProvider = exports.ActiveHeaderIdConsumer = void 0;
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));