@atlaskit/renderer 90.0.0 → 92.0.1

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @atlaskit/renderer
 
+## 92.0.1
+
+### Patch Changes
+
+- [`9671dfa12b1`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9671dfa12b1) - Revert [MEX-1276] fix vertical scroll for firefox when media link is wrapped
+
+## 92.0.0
+
+### Minor Changes
+
+- [`9712e78abb0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9712e78abb0) - ED-14255 moved some usages of editor-shared-styles to emotion
+
+### Patch Changes
+
+- [`3c717788e4d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3c717788e4d) - ED-14569 Feature flag the renderer TTI analytic event
+- [`d0eed99c3e3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d0eed99c3e3) - ED-14264 Moved styles to emotion css
+- [`f9a144c5a71`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f9a144c5a71) - ED-14255 migrated table styles to use emotion
+- [`3fcadf8ab52`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3fcadf8ab52) - ED-14263 migrate editor common styled usagese to emotion
+- [`244512e8724`](https://bitbucket.org/atlassian/atlassian-frontend/commits/244512e8724) - ED-14301 Add tti metrics for renderer
+- [`47d10a85190`](https://bitbucket.org/atlassian/atlassian-frontend/commits/47d10a85190) - [ED-10235] When a heading is used as a header in a sticky headers table, two headers are added into the document to enable sticky header behaviour. We need to ensure the heading ID is not duplicated so scroll behaviour remains intact when user uses the heading anchor link in renderer.
+- Updated dependencies
+
+## 91.0.0
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 90.0.0
 
 ### Patch Changes

package/dist/cjs/analytics/enums.js

@@ -20,6 +20,7 @@ exports.ACTION = ACTION;
 (function (ACTION) {
   ACTION["STARTED"] = "started";
   ACTION["RENDERED"] = "rendered";
+  ACTION["RENDERER_TTI"] = "tti";
   ACTION["CRASHED"] = "unhandledErrorCaught";
   ACTION["INVALID_PROSEMIRROR_DOCUMENT"] = "invalidProsemirrorDocument";
   ACTION["SELECT_ALL_CAUGHT"] = "selectAllCaught";

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

@@ -9,12 +9,10 @@ exports.default = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = require("@emotion/react");
 
 var _reactIntlNext = require("react-intl-next");
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
 var _code = require("@atlaskit/code");
 
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
@@ -33,6 +31,16 @@ var _codeBlockCopyButton = _interopRequireDefault(require("./codeBlockCopyButton
 
 var _templateObject;
 
+var codeBlockStyle = function codeBlockStyle(props) {
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    tab-size: 4;\n    [data-ds--code--code-block] {\n      font-size: ", ";\n      line-height: 1.5rem;\n      background-image: ", ";\n      background-attachment: local, scroll, scroll;\n      background-position: 100% 0, 100% 0, 0 0;\n\n  "])), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), (0, _editorSharedStyles.overflowShadow)({
+    background: (0, _components.themed)({
+      light: _colors.N20,
+      dark: _colors.DN50
+    })(props),
+    width: "".concat((0, _constants.gridSize)(), "px")
+  }));
+};
+
 function CodeBlock(props) {
   var text = props.text,
       language = props.language,
@@ -42,11 +50,12 @@ function CodeBlock(props) {
   var featureFlags = (0, _useFeatureFlags.useFeatureFlags)();
   var codeBidiWarningLabel = props.intl.formatMessage(_messages.codeBidiWarningMessages.label);
   var className = ['code-block', props.className].join(' ');
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: className
-  }, allowCopyToClipboard ? /*#__PURE__*/_react.default.createElement(_codeBlockCopyButton.default, {
+  return (0, _react.jsx)("div", {
+    className: className,
+    css: codeBlockStyle
+  }, allowCopyToClipboard ? (0, _react.jsx)(_codeBlockCopyButton.default, {
     content: text
-  }) : null, /*#__PURE__*/_react.default.createElement(_code.CodeBlock, {
+  }) : null, (0, _react.jsx)(_code.CodeBlock, {
     language: language,
     text: text,
     codeBidiWarnings: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.codeBidiWarnings,
@@ -55,14 +64,6 @@ function CodeBlock(props) {
   }));
 }
 
-var IntlCodeBlock = (0, _reactIntlNext.injectIntl)(CodeBlock);
-
-var _default = (0, _styledComponents.default)(IntlCodeBlock)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  tab-size: 4;\n  [data-ds--code--code-block] {\n    font-size: ", ";\n    line-height: 1.5rem;\n    background-image: ", ";\n    background-attachment: local, scroll, scroll;\n    background-position: 100% 0, 100% 0, 0 0;\n  }\n"])), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), (0, _editorSharedStyles.overflowShadow)({
-  background: (0, _components.themed)({
-    light: _colors.N20,
-    dark: _colors.DN50
-  }),
-  width: "".concat((0, _constants.gridSize)(), "px")
-}));
+var _default = (0, _reactIntlNext.injectIntl)(CodeBlock);
 
 exports.default = _default;

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

@@ -48,13 +48,15 @@ function Heading(props) {
   var headingId = props.headingId,
       dataAttributes = props.dataAttributes,
       allowHeadingAnchorLinks = props.allowHeadingAnchorLinks,
-      marks = props.marks;
+      marks = props.marks,
+      invisible = props.invisible;
   var HX = "h".concat(props.level);
   var showAnchorLink = !!props.showAnchorLink;
   var isRightAligned = hasRightAlignmentMark(marks);
   var enableNestedHeaderLinks = allowHeadingAnchorLinks && allowHeadingAnchorLinks.allowNestedHeaderLinks;
+  var headingIdToUse = invisible ? undefined : headingId;
   return /*#__PURE__*/_react.default.createElement(HX, (0, _extends2.default)({
-    id: headingId
+    id: headingIdToUse
   }, dataAttributes), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, showAnchorLink && isRightAligned ? WrapChildTextInSpan(props.children) : props.children, showAnchorLink && /*#__PURE__*/_react.default.createElement(_copyTextProvider.CopyTextConsumer, null, function (_ref) {
     var copyTextToClipboard = _ref.copyTextToClipboard;
     return headingId && /*#__PURE__*/_react.default.createElement(_analyticsContext.default.Consumer, null, function (_ref2) {

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

@@ -9,14 +9,19 @@ exports.default = LayoutSection;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _react2 = require("@emotion/react");
+
 var _ui = require("@atlaskit/editor-common/ui");
 
+/** @jsx jsx */
 function LayoutSection(props) {
-  return /*#__PURE__*/_react.default.createElement("div", {
+  return (0, _react2.jsx)("div", {
     "data-layout-column": true,
     "data-column-width": props.width,
     style: {
       flexBasis: "".concat(props.width, "%")
     }
-  }, /*#__PURE__*/_react.default.createElement(_ui.WidthProvider, null, /*#__PURE__*/_react.default.createElement(_ui.ClearNextSiblingMarginTop, null), props.children));
+  }, (0, _react2.jsx)(_ui.WidthProvider, null, (0, _react2.jsx)("div", {
+    css: _ui.clearNextSiblingMarginTopStyle
+  }), props.children));
 }

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

@@ -27,6 +27,8 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _react2 = require("@emotion/react");
+
 var _providerFactory = require("@atlaskit/editor-common/provider-factory");
 
 var _ui = require("@atlaskit/editor-common/ui");
@@ -79,8 +81,7 @@ var Media = /*#__PURE__*/function (_PureComponent) {
       var linkHref = linkMark === null || linkMark === void 0 ? void 0 : linkMark.attrs.href;
       var eventHandlers = linkHref ? undefined : _this.props.eventHandlers;
       var shouldOpenMediaViewer = !linkHref && allowMediaViewer;
-
-      var mediaComponent = /*#__PURE__*/_react.default.createElement(_MediaCard.MediaCard, (0, _extends2.default)({
+      var mediaComponent = (0, _react2.jsx)(_MediaCard.MediaCard, (0, _extends2.default)({
         mediaProvider: mediaProvider,
         contextIdentifierProvider: contextIdentifierProvider
       }, _this.props, {
@@ -91,12 +92,12 @@ var Media = /*#__PURE__*/function (_PureComponent) {
         shouldEnableDownloadButton: enableDownloadButton,
         ssr: ssr
       }));
-
-      return linkHref ? /*#__PURE__*/_react.default.createElement(_ui.MediaLink, {
+      return linkHref ? (0, _react2.jsx)("a", {
         href: linkHref,
         rel: "noreferrer noopener",
         onClick: _this.handleMediaLinkClick,
-        "data-block-link": linkHref
+        "data-block-link": linkHref,
+        css: _ui.mediaLinkStyle
       }, mediaComponent) : mediaComponent;
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleMediaLinkClick", function (event) {
@@ -141,7 +142,7 @@ var Media = /*#__PURE__*/function (_PureComponent) {
         return this.renderCard();
       }
 
-      return /*#__PURE__*/_react.default.createElement(_providerFactory.WithProviders, {
+      return (0, _react2.jsx)(_providerFactory.WithProviders, {
         providers: ['mediaProvider', 'contextIdentifierProvider'],
         providerFactory: providers,
         renderNode: this.renderCard

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

@@ -29,6 +29,8 @@ var _utils = require("../../../utils");
 
 var _table = require("./table");
 
+var _injectProps = require("../../utils/inject-props");
+
 var _templateObject, _templateObject2, _templateObject3;
 
 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); }
@@ -61,7 +63,7 @@ var FixedTableDiv = _styledComponents.default.div.attrs({
       width: wrapperWidth
     };
   }
-})(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n  ", ";\n  ", ";\n\n  z-index: ", ";\n\n  &\n    .", ",\n    &\n    .", "\n    > table {\n    margin-top: 0;\n    margin-bottom: 0;\n  }\n\n  border-top: ", "px solid white;\n  background: white;\n  box-shadow: 0 6px 4px -4px ", ";\n\n  div[data-expanded='false'] & {\n    display: none;\n  }\n\n  &\n    .", ".right-shadow::after,\n    &\n    .", ".left-shadow::before {\n    top: 0px;\n    height: 100%;\n  }\n"])), function (props) {
+})(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n  ", ";\n  ", ";\n\n  z-index: ", ";\n\n  // Fix this when move we move this to use emotion\n  &&&\n    .", ",\n    &&&\n    .", "\n    > table {\n    margin-top: 0;\n    margin-bottom: 0;\n  }\n\n  border-top: ", "px solid white;\n  background: white;\n  box-shadow: 0 6px 4px -4px ", ";\n\n  div[data-expanded='false'] & {\n    display: none;\n  }\n\n  &&&\n    .", ".right-shadow::after,\n    &&&\n    .", ".left-shadow::before {\n    top: 0px;\n    height: 100%;\n  }\n"])), function (props) {
   return props.mode === 'stick' ? 'position: fixed' : '';
 }, function (props) {
   return props.mode === 'pin-bottom' ? 'position: absolute' : '';
@@ -113,7 +115,16 @@ var StickyTable = function StickyTable(_ref3) {
     isNumberColumnEnabled: isNumberColumnEnabled,
     renderWidth: renderWidth,
     allowDynamicTextSizing: allowDynamicTextSizing
-  }, children)))));
+  },
+  /**
+   * @see https://product-fabric.atlassian.net/browse/ED-10235
+   * We pass prop 'invisible' to our table's children nodes meaning
+   * they exist inside of the 'invisible' duplicated table component that
+   * enables sticky headers.
+   */
+  (0, _injectProps.recursivelyInjectProps)(children, {
+    invisible: true
+  }))))));
 };
 
 exports.StickyTable = StickyTable;

package/dist/cjs/react/utils/inject-props.js

@@ -0,0 +1,33 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.recursivelyInjectProps = recursivelyInjectProps;
+
+var _react = _interopRequireDefault(require("react"));
+
+/**
+ * Helper function to recursively injects props to
+ * all valid children react nodes.
+ */
+function recursivelyInjectProps(children, propsToInject) {
+  return _react.default.Children.toArray(children).map(function (child) {
+    // Cannot add a prop to an invalid element, so just return the child
+    if (! /*#__PURE__*/_react.default.isValidElement(child)) {
+      return child;
+    } // Recursive call if child has nested children
+
+
+    if (child.props.children) {
+      child = /*#__PURE__*/_react.default.cloneElement(child, {
+        children: recursivelyInjectProps(child.props.children, propsToInject)
+      });
+    } // Add props to react child node
+
+
+    return /*#__PURE__*/_react.default.cloneElement(child, propsToInject);
+  });
+}

package/dist/cjs/ui/Expand.js

@@ -17,6 +17,8 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _react2 = require("@emotion/react");
+
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _constants = require("@atlaskit/theme/constants");
@@ -63,7 +65,7 @@ var ContentContainer = _styledComponents.default.div(_templateObject4 || (_templ
 
 var ExpandLayoutWrapperWithRef = /*#__PURE__*/(0, _react.forwardRef)(function WithRef(props, ref) {
   // @ts-ignore: incorrect innerRef typing
-  return /*#__PURE__*/_react.default.createElement(_ui.ExpandLayoutWrapper, (0, _extends2.default)({}, props, {
+  return (0, _react2.jsx)(_ui.ExpandLayoutWrapper, (0, _extends2.default)({}, props, {
     innerRef: ref
   }));
 });
@@ -114,18 +116,18 @@ function Expand(_ref) {
   var handleBlur = (0, _react.useCallback)(function () {
     return setFocused(false);
   }, []);
-  return /*#__PURE__*/_react.default.createElement(Container, {
+  return (0, _react2.jsx)(Container, {
     "data-node-type": nodeType,
     "data-title": title,
     "data-expanded": expanded,
     expanded: expanded,
     focused: focused
-  }, nestedHeaderIds && nestedHeaderIds.length > 0 ? /*#__PURE__*/_react.default.createElement(_activeHeaderIdProvider.ActiveHeaderIdConsumer, {
+  }, nestedHeaderIds && nestedHeaderIds.length > 0 ? (0, _react2.jsx)(_activeHeaderIdProvider.ActiveHeaderIdConsumer, {
     nestedHeaderIds: nestedHeaderIds,
     onNestedHeaderIdMatch: function onNestedHeaderIdMatch() {
       return setExpanded(true);
     }
-  }) : null, /*#__PURE__*/_react.default.createElement(TitleContainer, {
+  }) : null, (0, _react2.jsx)(TitleContainer, {
     onClick: function onClick(e) {
       e.stopPropagation();
       fireExpandToggleAnalytics(nodeType, expanded, fireAnalyticsEvent);
@@ -140,21 +142,23 @@ function Expand(_ref) {
     "aria-expanded": expanded,
     contentEditable: false,
     expanded: expanded
-  }, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+  }, (0, _react2.jsx)(_tooltip.default, {
     content: label,
     position: "top",
     tag: ExpandLayoutWrapperWithRef
-  }, /*#__PURE__*/_react.default.createElement(_ui.ExpandIconWrapper, {
+  }, (0, _react2.jsx)(_ui.ExpandIconWrapper, {
     expanded: expanded
-  }, /*#__PURE__*/_react.default.createElement(_chevronRight.default, {
+  }, (0, _react2.jsx)(_chevronRight.default, {
     label: label
-  }))), /*#__PURE__*/_react.default.createElement(Title, {
+  }))), (0, _react2.jsx)(Title, {
     id: id
-  }, title || intl.formatMessage(_ui.expandMessages.expandDefaultTitle))), /*#__PURE__*/_react.default.createElement(ContentContainer, {
+  }, title || intl.formatMessage(_ui.expandMessages.expandDefaultTitle))), (0, _react2.jsx)(ContentContainer, {
     expanded: expanded
-  }, /*#__PURE__*/_react.default.createElement("div", {
+  }, (0, _react2.jsx)("div", {
     className: "".concat(nodeType, "-content-wrapper")
-  }, /*#__PURE__*/_react.default.createElement(_ui.WidthProvider, null, /*#__PURE__*/_react.default.createElement(_ui.ClearNextSiblingMarginTop, null), children))));
+  }, (0, _react2.jsx)(_ui.WidthProvider, null, (0, _react2.jsx)("div", {
+    css: _ui.clearNextSiblingMarginTopStyle
+  }), children))));
 }
 
 var _default = (0, _reactIntlNext.injectIntl)(Expand);

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

@@ -29,6 +29,8 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _react2 = require("@emotion/react");
+
 var _adfSchema = require("@atlaskit/adf-schema");
 
 var _adfUtils = require("@atlaskit/adf-utils");
@@ -153,6 +155,24 @@ var Renderer = /*#__PURE__*/function (_PureComponent) {
     _this.editorRef = props.innerRef || /*#__PURE__*/_react.default.createRef();
     _this.id = (0, _v.default)();
     (0, _utils.startMeasure)("Renderer Render Time: ".concat(_this.id));
+
+    var _featureFlags = _this.featureFlags(_this.props.featureFlags).featureFlags;
+
+    if (_featureFlags !== null && _featureFlags !== void 0 && _featureFlags.rendererTtiTracking) {
+      (0, _utils.measureTTI)(function (tti, ttiFromInvocation, canceled) {
+        _this.fireAnalyticsEvent({
+          action: _enums.ACTION.RENDERER_TTI,
+          actionSubject: _enums.ACTION_SUBJECT.RENDERER,
+          attributes: {
+            tti: tti,
+            ttiFromInvocation: ttiFromInvocation,
+            canceled: canceled
+          },
+          eventType: _enums.EVENT_TYPE.OPERATIONAL
+        });
+      });
+    }
+
     return _this;
   }
 
@@ -346,17 +366,17 @@ var Renderer = /*#__PURE__*/function (_PureComponent) {
           onComplete(stat);
         }
 
-        var rendererOutput = /*#__PURE__*/_react.default.createElement(_rendererContext.RendererContextProvider, {
+        var rendererOutput = (0, _react2.jsx)(_rendererContext.RendererContextProvider, {
           value: this.featureFlags(this.props.featureFlags)
-        }, /*#__PURE__*/_react.default.createElement(_copyTextProvider.CopyTextProvider, null, /*#__PURE__*/_react.default.createElement(_activeHeaderIdProvider.ActiveHeaderIdProvider, {
+        }, (0, _react2.jsx)(_copyTextProvider.CopyTextProvider, null, (0, _react2.jsx)(_activeHeaderIdProvider.ActiveHeaderIdProvider, {
           value: (0, _links.getActiveHeadingId)(allowHeadingAnchorLinks)
-        }, /*#__PURE__*/_react.default.createElement(_ui.LegacyToNextIntlProvider, null, /*#__PURE__*/_react.default.createElement(_ui.IntlLegacyFallbackProvider, null, /*#__PURE__*/_react.default.createElement(_analyticsContext.default.Provider, {
+        }, (0, _react2.jsx)(_ui.LegacyToNextIntlProvider, null, (0, _react2.jsx)(_ui.IntlLegacyFallbackProvider, null, (0, _react2.jsx)(_analyticsContext.default.Provider, {
           value: {
             fireAnalyticsEvent: function fireAnalyticsEvent(event) {
               return _this3.fireAnalyticsEvent(event);
             }
           }
-        }, /*#__PURE__*/_react.default.createElement(_SmartCardStorage.Provider, null, /*#__PURE__*/_react.default.createElement(RendererWrapper, {
+        }, (0, _react2.jsx)(_SmartCardStorage.Provider, null, (0, _react2.jsx)(RendererWrapper, {
           appearance: appearance,
           dynamicTextSizing: !!allowDynamicTextSizing,
           allowNestedHeaderLinks: allowNestedHeaderLinks,
@@ -367,15 +387,14 @@ var Renderer = /*#__PURE__*/function (_PureComponent) {
           innerRef: this.editorRef,
           onClick: handleWrapperOnClick,
           onMouseDown: this.onMouseDownEditView
-        }, enableSsrInlineScripts ? /*#__PURE__*/_react.default.createElement(_breakoutSsr.BreakoutSSRInlineScript, {
+        }, enableSsrInlineScripts ? (0, _react2.jsx)(_breakoutSsr.BreakoutSSRInlineScript, {
           allowDynamicTextSizing: !!allowDynamicTextSizing
-        }) : null, /*#__PURE__*/_react.default.createElement(RendererActionsInternalUpdater, {
+        }) : null, (0, _react2.jsx)(RendererActionsInternalUpdater, {
           doc: pmDoc,
           schema: schema,
           onAnalyticsEvent: this.fireAnalyticsEvent
         }, result)))))))));
-
-        return truncated ? /*#__PURE__*/_react.default.createElement(_truncatedWrapper.TruncatedWrapper, {
+        return truncated ? (0, _react2.jsx)(_truncatedWrapper.TruncatedWrapper, {
           height: maxHeight,
           fadeHeight: fadeOutHeight
         }, rendererOutput) : rendererOutput;
@@ -384,7 +403,7 @@ var Renderer = /*#__PURE__*/function (_PureComponent) {
           onError(e);
         }
 
-        return /*#__PURE__*/_react.default.createElement(RendererWrapper, {
+        return (0, _react2.jsx)(RendererWrapper, {
           appearance: appearance,
           dynamicTextSizing: !!allowDynamicTextSizing,
           allowCopyToClipboard: allowCopyToClipboard,
@@ -392,7 +411,7 @@ var Renderer = /*#__PURE__*/function (_PureComponent) {
           allowColumnSorting: allowColumnSorting,
           allowNestedHeaderLinks: allowNestedHeaderLinks,
           onClick: handleWrapperOnClick
-        }, /*#__PURE__*/_react.default.createElement(_ui.UnsupportedBlock, null));
+        }, (0, _react2.jsx)(_ui.UnsupportedBlock, null));
       }
     }
   }, {
@@ -417,7 +436,7 @@ var Renderer = /*#__PURE__*/function (_PureComponent) {
 exports.Renderer = Renderer;
 
 var RendererWithAnalytics = /*#__PURE__*/_react.default.memo(function (props) {
-  return /*#__PURE__*/_react.default.createElement(_analyticsNamespacedContext.FabricEditorAnalyticsContext, {
+  return (0, _react2.jsx)(_analyticsNamespacedContext.FabricEditorAnalyticsContext, {
     data: {
       appearance: (0, _utils.getAnalyticsAppearance)(props.appearance),
       packageName: _version.name,
@@ -425,15 +444,15 @@ var RendererWithAnalytics = /*#__PURE__*/_react.default.memo(function (props) {
       componentName: 'renderer',
       editorSessionId: (0, _v.default)()
     }
-  }, /*#__PURE__*/_react.default.createElement(_ui.WithCreateAnalyticsEvent, {
+  }, (0, _react2.jsx)(_ui.WithCreateAnalyticsEvent, {
     render: function render(createAnalyticsEvent) {
       // `IntlNextErrorBoundary` only captures Internationalisation errors, leaving others for `ErrorBoundary`.
-      return /*#__PURE__*/_react.default.createElement(_ErrorBoundary.ErrorBoundary, {
+      return (0, _react2.jsx)(_ErrorBoundary.ErrorBoundary, {
         component: _enums.ACTION_SUBJECT.RENDERER,
         rethrowError: true,
         fallbackComponent: null,
         createAnalyticsEvent: createAnalyticsEvent
-      }, /*#__PURE__*/_react.default.createElement(_ui.IntlNextErrorBoundary, null, /*#__PURE__*/_react.default.createElement(Renderer, (0, _extends2.default)({}, props, {
+      }, (0, _react2.jsx)(_ui.IntlNextErrorBoundary, null, (0, _react2.jsx)(Renderer, (0, _extends2.default)({}, props, {
         createAnalyticsEvent: createAnalyticsEvent
       }))));
     }
@@ -450,23 +469,23 @@ var RendererWithIframeFallbackWrapper = /*#__PURE__*/_react.default.memo(functio
       subscribe = props.subscribe,
       onClick = props.onClick,
       onMouseDown = props.onMouseDown;
-
-  var renderer = /*#__PURE__*/_react.default.createElement(_ui.WidthProvider, {
+  var renderer = (0, _react2.jsx)(_ui.WidthProvider, {
     className: "ak-renderer-wrapper"
-  }, /*#__PURE__*/_react.default.createElement(_ui.BaseTheme, {
+  }, (0, _react2.jsx)(_ui.BaseTheme, {
     dynamicTextSizing: dynamicTextSizing,
     baseFontSize: !dynamicTextSizing && appearance && appearance !== 'comment' ? _editorSharedStyles.akEditorFullPageDefaultFontSize : undefined
-  }, /*#__PURE__*/_react.default.createElement(_style.Wrapper, {
+  }, (0, _react2.jsx)(_style.DeprecatedWrapper, {
     innerRef: innerRef,
     appearance: appearance,
     allowNestedHeaderLinks: allowNestedHeaderLinks,
     allowColumnSorting: !!allowColumnSorting,
     onClick: onClick,
-    onMouseDown: onMouseDown
+    onMouseDown: onMouseDown,
+    css: _style.rendererStyles
   }, children)));
 
   if (!subscribe) {
-    return /*#__PURE__*/_react.default.createElement(_widthDetector.IframeWidthObserverFallbackWrapper, null, renderer);
+    return (0, _react2.jsx)(_widthDetector.IframeWidthObserverFallbackWrapper, null, renderer);
   }
 
   return renderer;
@@ -481,9 +500,9 @@ var RendererWithIframeFallbackWrapper = /*#__PURE__*/_react.default.memo(functio
 
 
 function RendererWrapper(props) {
-  return /*#__PURE__*/_react.default.createElement(_widthDetector.IframeWrapperConsumer, null, function (_ref) {
+  return (0, _react2.jsx)(_widthDetector.IframeWrapperConsumer, null, function (_ref) {
     var subscribe = _ref.subscribe;
-    return /*#__PURE__*/_react.default.createElement(RendererWithIframeFallbackWrapper, (0, _extends2.default)({}, props, {
+    return (0, _react2.jsx)(RendererWithIframeFallbackWrapper, (0, _extends2.default)({}, props, {
       subscribe: subscribe
     }));
   });
@@ -519,16 +538,16 @@ var RendererWithAnnotationSelection = function RendererWithAnnotationSelection(p
   var innerRef = props.innerRef || localRef;
 
   if (!allowAnnotations) {
-    return /*#__PURE__*/_react.default.createElement(RendererWithAnalytics, (0, _extends2.default)({
+    return (0, _react2.jsx)(RendererWithAnalytics, (0, _extends2.default)({
       innerRef: innerRef
     }, props));
   }
 
-  return /*#__PURE__*/_react.default.createElement(_RendererActionsContext.RendererActionsContext, null, /*#__PURE__*/_react.default.createElement(_annotations.AnnotationsWrapper, {
+  return (0, _react2.jsx)(_RendererActionsContext.RendererActionsContext, null, (0, _react2.jsx)(_annotations.AnnotationsWrapper, {
     rendererRef: innerRef,
     adfDocument: adfDocument,
     annotationProvider: props.annotationProvider
-  }, /*#__PURE__*/_react.default.createElement(RendererWithAnalytics, (0, _extends2.default)({
+  }, (0, _react2.jsx)(RendererWithAnalytics, (0, _extends2.default)({
     innerRef: innerRef
   }, props))));
 };

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

@@ -7,12 +7,14 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.headingSizes = exports.Wrapper = exports.FullPagePadding = void 0;
+exports.rendererStyles = exports.headingSizes = exports.FullPagePadding = exports.DeprecatedWrapper = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
+var _react = require("@emotion/react");
+
 var _components = require("@atlaskit/theme/components");
 
 var _constants = require("@atlaskit/theme/constants");
@@ -31,7 +33,7 @@ var _consts = require("../../consts");
 
 var _headingAnchor = require("../../react/nodes/heading-anchor");
 
-var _templateObject, _templateObject2;
+var _templateObject, _templateObject2, _templateObject3;
 
 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); }
 
@@ -116,19 +118,29 @@ var fullWidthStyles = function fullWidthStyles(_ref4) {
   }
 
   return "\n  max-width: ".concat(_editorSharedStyles.akEditorFullWidthLayoutWidth, "px;\n  margin: 0 auto;\n\n  .fabric-editor-breakout-mark,\n  .pm-table-container,\n  .ak-renderer-extension {\n    width: 100% !important;\n  }\n  ");
+};
+
+var rendererStyles = function rendererStyles(theme) {
+  // This is required to be compatible with styled-components prop structure.
+  var props = {
+    theme: theme
+  };
+  return (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    ", "\n\n    ", ";\n    ", ";\n    ", ";\n\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", "\n\n    /* plugin styles*/\n    ", " &\n    div[class^='image-wrap-'] + div[class^='image-wrap-'] {\n      margin-left: 0;\n      margin-right: 0;\n    }\n\n    ", ";\n  "])), (0, _styles.tableSharedStyle)(props), _styles.whitespaceSharedStyles, _styles.blockquoteSharedStyles, (0, _styles.headingsSharedStyles)(props), _styles.paragraphSharedStyles, _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.blockMarksSharedStyles, (0, _styles.codeMarkSharedStyles)(props), _styles.shadowSharedStyle, _styles.dateSharedStyle, _styles.textColorStyles, _styles.tasksAndDecisionsStyles, _styles.smartCardSharedStyles, _styles.mediaSingleSharedStyle, _styles.columnLayoutSharedStyle);
 }; // 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\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)({
+exports.rendererStyles = rendererStyles;
+
+var DeprecatedWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (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  & .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\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  & [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, _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)({
+}), fullPageStyles, fullWidthStyles, headingAnchorStyle('h1'), headingAnchorStyle('h2'), headingAnchorStyle('h3'), headingAnchorStyle('h4'), headingAnchorStyle('h5'), headingAnchorStyle('h6'), colors.B400, colors.B300, colors.placeholderText, _styles.panelSharedStyles, _styles.ruleSharedStyles, (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, _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)({
+}), colors.R50, colors.R500, (0, _constants.gridSize)() * 3, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, alignedHeadingAnchorStyle, _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.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)({
@@ -155,6 +167,6 @@ var Wrapper = _styledComponents.default.div(_templateObject2 || (_templateObject
 }), (0, _components.themed)({
   light: _editorSharedStyles.akEditorTableToolbar,
   dark: _editorSharedStyles.akEditorTableToolbarDark
-}), (0, _constants.borderRadius)(), _editorSharedStyles.blockNodesVerticalMargin, _styles.columnLayoutSharedStyle, (0, _constants.gridSize)() * 2.5, (0, _constants.gridSize)() * 4, _editorSharedStyles.gridMediumMaxWidth);
+}), (0, _constants.borderRadius)(), _editorSharedStyles.blockNodesVerticalMargin, (0, _constants.gridSize)() * 2.5, (0, _constants.gridSize)() * 4, _editorSharedStyles.gridMediumMaxWidth);
 
-exports.Wrapper = Wrapper;
+exports.DeprecatedWrapper = DeprecatedWrapper;