@atlaskit/renderer 92.0.1 → 93.0.2

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

@@ -7,9 +7,7 @@ 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 = void 0;
+exports.default = exports.Renderer = exports.NORMAL_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -31,7 +29,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _react2 = require("@emotion/react");
 
-var _adfSchema = require("@atlaskit/adf-schema");
+var _schemaDefault = require("@atlaskit/adf-schema/schema-default");
 
 var _adfUtils = require("@atlaskit/adf-utils");
 
@@ -45,8 +43,6 @@ var _normalizeFeatureFlags = require("@atlaskit/editor-common/normalize-feature-
 
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
-var _widthDetector = require("@atlaskit/width-detector");
-
 var _analyticsListeners = require("@atlaskit/analytics-listeners");
 
 var _analyticsNamespacedContext = require("@atlaskit/analytics-namespaced-context");
@@ -91,6 +87,8 @@ var _memoizeOne = _interopRequireDefault(require("memoize-one"));
 
 var _ErrorBoundary = require("./ErrorBoundary");
 
+var _RenderTracking = require("../../react/utils/performance/RenderTracking");
+
 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; }
@@ -119,8 +117,11 @@ var Renderer = /*#__PURE__*/function (_PureComponent) {
     (0, _classCallCheck2.default)(this, Renderer);
     _this = _super.call(this, props);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "featureFlags", (0, _memoizeOne.default)(function (featureFlags) {
+      var normalizedFeatureFlags = (0, _normalizeFeatureFlags.normalizeFeatureFlags)(featureFlags, {
+        objectFlagKeys: ['rendererRenderTracking']
+      });
       return {
-        featureFlags: (0, _normalizeFeatureFlags.normalizeFeatureFlags)(featureFlags)
+        featureFlags: normalizedFeatureFlags
       };
     }));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "fireAnalyticsEvent", function (event) {
@@ -140,7 +141,7 @@ var Renderer = /*#__PURE__*/function (_PureComponent) {
         return schema;
       }
 
-      return (0, _adfSchema.getSchemaBasedOnStage)(adfStage);
+      return (0, _schemaDefault.getSchemaBasedOnStage)(adfStage);
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onMouseDownEditView", function () {
       // When the user is deselecting text on the screen by clicking, if they are clicking outside
@@ -355,6 +356,8 @@ var Renderer = /*#__PURE__*/function (_PureComponent) {
       };
 
       try {
+        var _this$featureFlags, _this$featureFlags$fe, _this$featureFlags$fe2;
+
         var schema = this.getSchema();
 
         var _renderDocument = (0, _.renderDocument)(document, this.serializer, schema, adfStage, this.props.useSpecBasedValidator, this.id, this.fireAnalyticsEvent, this.props.unsupportedContentLevelsTracking, this.props.appearance),
@@ -370,7 +373,7 @@ var Renderer = /*#__PURE__*/function (_PureComponent) {
           value: this.featureFlags(this.props.featureFlags)
         }, (0, _react2.jsx)(_copyTextProvider.CopyTextProvider, null, (0, _react2.jsx)(_activeHeaderIdProvider.ActiveHeaderIdProvider, {
           value: (0, _links.getActiveHeadingId)(allowHeadingAnchorLinks)
-        }, (0, _react2.jsx)(_ui.LegacyToNextIntlProvider, null, (0, _react2.jsx)(_ui.IntlLegacyFallbackProvider, null, (0, _react2.jsx)(_analyticsContext.default.Provider, {
+        }, (0, _react2.jsx)(_analyticsContext.default.Provider, {
           value: {
             fireAnalyticsEvent: function fireAnalyticsEvent(event) {
               return _this3.fireAnalyticsEvent(event);
@@ -393,11 +396,20 @@ var Renderer = /*#__PURE__*/function (_PureComponent) {
           doc: pmDoc,
           schema: schema,
           onAnalyticsEvent: this.fireAnalyticsEvent
-        }, result)))))))));
-        return truncated ? (0, _react2.jsx)(_truncatedWrapper.TruncatedWrapper, {
+        }, result)))))));
+        var rendererResult = truncated ? (0, _react2.jsx)(_truncatedWrapper.TruncatedWrapper, {
           height: maxHeight,
           fadeHeight: fadeOutHeight
         }, rendererOutput) : rendererOutput;
+        var rendererRenderTracking = (_this$featureFlags = this.featureFlags(this.props.featureFlags)) === null || _this$featureFlags === void 0 ? void 0 : (_this$featureFlags$fe = _this$featureFlags.featureFlags) === null || _this$featureFlags$fe === void 0 ? void 0 : (_this$featureFlags$fe2 = _this$featureFlags$fe.rendererRenderTracking) === null || _this$featureFlags$fe2 === void 0 ? void 0 : _this$featureFlags$fe2[_enums.ACTION_SUBJECT.RENDERER];
+        var reRenderTracking = (rendererRenderTracking === null || rendererRenderTracking === void 0 ? void 0 : rendererRenderTracking.enabled) && (0, _react2.jsx)(_RenderTracking.RenderTracking, {
+          componentProps: this.props,
+          action: _enums.ACTION.RE_RENDERED,
+          actionSubject: _enums.ACTION_SUBJECT.RENDERER,
+          handleAnalyticsEvent: this.fireAnalyticsEvent,
+          useShallow: rendererRenderTracking.useShallow
+        });
+        return (0, _react2.jsx)(_react.Fragment, null, reRenderTracking, rendererResult);
       } catch (e) {
         if (onError) {
           onError(e);
@@ -446,73 +458,50 @@ var RendererWithAnalytics = /*#__PURE__*/_react.default.memo(function (props) {
     }
   }, (0, _react2.jsx)(_ui.WithCreateAnalyticsEvent, {
     render: function render(createAnalyticsEvent) {
-      // `IntlNextErrorBoundary` only captures Internationalisation errors, leaving others for `ErrorBoundary`.
+      // `IntlErrorBoundary` only captures Internationalisation errors, leaving others for `ErrorBoundary`.
       return (0, _react2.jsx)(_ErrorBoundary.ErrorBoundary, {
         component: _enums.ACTION_SUBJECT.RENDERER,
         rethrowError: true,
         fallbackComponent: null,
         createAnalyticsEvent: createAnalyticsEvent
-      }, (0, _react2.jsx)(_ui.IntlNextErrorBoundary, null, (0, _react2.jsx)(Renderer, (0, _extends2.default)({}, props, {
+      }, (0, _react2.jsx)(_ui.IntlErrorBoundary, null, (0, _react2.jsx)(Renderer, (0, _extends2.default)({}, props, {
         createAnalyticsEvent: createAnalyticsEvent
       }))));
     }
   }));
 });
 
-var RendererWithIframeFallbackWrapper = /*#__PURE__*/_react.default.memo(function (props) {
+var RendererWrapper = /*#__PURE__*/_react.default.memo(function (props) {
   var allowColumnSorting = props.allowColumnSorting,
       dynamicTextSizing = props.dynamicTextSizing,
       allowNestedHeaderLinks = props.allowNestedHeaderLinks,
       innerRef = props.innerRef,
       appearance = props.appearance,
       children = props.children,
-      subscribe = props.subscribe,
       onClick = props.onClick,
       onMouseDown = props.onMouseDown;
-  var renderer = (0, _react2.jsx)(_ui.WidthProvider, {
+  return (0, _react2.jsx)(_ui.WidthProvider, {
     className: "ak-renderer-wrapper"
   }, (0, _react2.jsx)(_ui.BaseTheme, {
     dynamicTextSizing: dynamicTextSizing,
     baseFontSize: !dynamicTextSizing && appearance && appearance !== 'comment' ? _editorSharedStyles.akEditorFullPageDefaultFontSize : undefined
-  }, (0, _react2.jsx)(_style.DeprecatedWrapper, {
-    innerRef: innerRef,
-    appearance: appearance,
-    allowNestedHeaderLinks: allowNestedHeaderLinks,
-    allowColumnSorting: !!allowColumnSorting,
+  }, (0, _react2.jsx)("div", {
+    ref: innerRef,
     onClick: onClick,
     onMouseDown: onMouseDown,
-    css: _style.rendererStyles
+    css: (0, _style.rendererStyles)({
+      appearance: appearance,
+      allowNestedHeaderLinks: allowNestedHeaderLinks,
+      allowColumnSorting: !!allowColumnSorting
+    })
   }, children)));
-
-  if (!subscribe) {
-    return (0, _react2.jsx)(_widthDetector.IframeWidthObserverFallbackWrapper, null, renderer);
-  }
-
-  return renderer;
 });
-/**
- * When the product doesn't provide a IframeWidthObserverFallbackWrapper,
- * we will give one to the renderer,
- *
- * so if we have more than one `WidthProvider` on the content,
- * only one iframe will be created on the older browsers.
- */
-
-
-function RendererWrapper(props) {
-  return (0, _react2.jsx)(_widthDetector.IframeWrapperConsumer, null, function (_ref) {
-    var subscribe = _ref.subscribe;
-    return (0, _react2.jsx)(RendererWithIframeFallbackWrapper, (0, _extends2.default)({}, props, {
-      subscribe: subscribe
-    }));
-  });
-}
 
-function RendererActionsInternalUpdater(_ref2) {
-  var children = _ref2.children,
-      doc = _ref2.doc,
-      schema = _ref2.schema,
-      onAnalyticsEvent = _ref2.onAnalyticsEvent;
+function RendererActionsInternalUpdater(_ref) {
+  var children = _ref.children,
+      doc = _ref.doc,
+      schema = _ref.schema,
+      onAnalyticsEvent = _ref.onAnalyticsEvent;
   var actions = (0, _react.useContext)(_RendererActionsContext.RendererContext);
   var rendererRef = (0, _react.useRef)(null);
   (0, _react.useLayoutEffect)(function () {

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

@@ -7,12 +7,10 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.rendererStyles = exports.headingSizes = exports.FullPagePadding = exports.DeprecatedWrapper = void 0;
+exports.rendererStyles = exports.headingSizes = exports.FullPagePadding = 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");
@@ -33,7 +31,7 @@ var _consts = require("../../consts");
 
 var _headingAnchor = require("../../react/nodes/heading-anchor");
 
-var _templateObject, _templateObject2, _templateObject3;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 
 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); }
 
@@ -69,7 +67,7 @@ var headingSizes = {
 exports.headingSizes = headingSizes;
 
 var headingAnchorStyle = function headingAnchorStyle(headingTag) {
-  return (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    /**\n     * The copy link button doesn't reserve space in the DOM so that\n     * the text alignment isn't impacted by the button/icon's space.\n     */\n    .", " {\n      position: absolute;\n      height: ", "em;\n\n      margin-left: 6px;\n\n      button {\n        padding-left: 0;\n        padding-right: 0;\n      }\n    }\n\n    /**\n     * Applies hover effects to the heading anchor link button\n     * to fade in when the user rolls over the heading.\n     *\n     * The link is persistent on mobile, so we use feature detection\n     * to enable hover effects for systems that support it (desktop).\n     *\n     * @see https://caniuse.com/mdn-css_at-rules_media_hover\n     */\n    @media (hover: hover) and (pointer: fine) {\n      .", " {\n        > button {\n          opacity: 0;\n          transform: translate(-8px, 0px);\n          transition: opacity 0.2s ease 0s, transform 0.2s ease 0s;\n        }\n      }\n\n      &:hover {\n        .", " > button {\n          opacity: 1;\n          transform: none !important;\n        }\n      }\n    }\n  "])), _headingAnchor.HeadingAnchorWrapperClassName, headingSizes[headingTag].lineHeight, _headingAnchor.HeadingAnchorWrapperClassName, _headingAnchor.HeadingAnchorWrapperClassName);
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    /**\n     * The copy link button doesn't reserve space in the DOM so that\n     * the text alignment isn't impacted by the button/icon's space.\n     */\n    .", " {\n      position: absolute;\n      height: ", "em;\n\n      margin-left: 6px;\n\n      button {\n        padding-left: 0;\n        padding-right: 0;\n      }\n    }\n\n    /**\n     * Applies hover effects to the heading anchor link button\n     * to fade in when the user rolls over the heading.\n     *\n     * The link is persistent on mobile, so we use feature detection\n     * to enable hover effects for systems that support it (desktop).\n     *\n     * @see https://caniuse.com/mdn-css_at-rules_media_hover\n     */\n    @media (hover: hover) and (pointer: fine) {\n      .", " {\n        > button {\n          opacity: 0;\n          transform: translate(-8px, 0px);\n          transition: opacity 0.2s ease 0s, transform 0.2s ease 0s;\n        }\n      }\n\n      &:hover {\n        .", " > button {\n          opacity: 1;\n          transform: none !important;\n        }\n      }\n    }\n  "])), _headingAnchor.HeadingAnchorWrapperClassName, headingSizes[headingTag].lineHeight, _headingAnchor.HeadingAnchorWrapperClassName, _headingAnchor.HeadingAnchorWrapperClassName);
 };
 
 var alignedHeadingAnchorStyle = function alignedHeadingAnchorStyle(_ref) {
@@ -79,7 +77,7 @@ var alignedHeadingAnchorStyle = function alignedHeadingAnchorStyle(_ref) {
     return '';
   }
 
-  return "\n    .fabric-editor-block-mark[data-align] > {\n      h1, h2, h3, h4, h5, h6 {\n        position: relative;\n      }\n    }\n\n    /**\n     * For right-alignment we flip the link to be before the heading\n     * text so that the text is flush up against the edge of the editor's\n     * container edge.\n     */\n    .fabric-editor-block-mark:not([data-align='center'])[data-align] {\n        > {\n          h1, h2, h3, h4, h5, h6 {\n            // Using right to left text to achieve the inverse effect\n            // of where the copy link button icon sits for left/center\n            // alignment.\n            // Although this is unorthodox it's the only approach which\n            // allows the button to sit flush against the left edge of\n            // bottom line of text.\n            direction: rtl;\n\n            // By default RTL will negatively impact the layout of special\n            // characters within the heading text, and potentially other\n            // nested inline nodes. To prevent this we insert pseudo elements\n            // containing HTML entities to retain LTR for all heading content\n            // except for the copy link button.\n            > *:not(.".concat(_headingAnchor.HeadingAnchorWrapperClassName, "):not(br) {\n              ::before {\n                // Open LTR: https://www.fileformat.info/info/unicode/char/202a/index.htm\n                content: '\u202A';\n              }\n              ::after {\n                // Close LTR: https://www.fileformat.info/info/unicode/char/202c/index.htm\n                content: '\u202C';\n              }\n            }\n          }\n        }\n        .").concat(_headingAnchor.HeadingAnchorWrapperClassName, " {\n          margin: 0 6px 0 0;\n        }\n\n        @media (hover: hover) and (pointer: fine) {\n          .").concat(_headingAnchor.HeadingAnchorWrapperClassName, " > button {\n            transform: translate(8px, 0px);\n          }\n        }\n      }\n    }\n  ");
+  return (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    .fabric-editor-block-mark[data-align] > {\n      h1,\n      h2,\n      h3,\n      h4,\n      h5,\n      h6 {\n        position: relative;\n      }\n    }\n\n    /**\n     * For right-alignment we flip the link to be before the heading\n     * text so that the text is flush up against the edge of the editor's\n     * container edge.\n     */\n    .fabric-editor-block-mark:not([data-align='center'])[data-align] {\n      > {\n        h1,\n        h2,\n        h3,\n        h4,\n        h5,\n        h6 {\n          // Using right to left text to achieve the inverse effect\n          // of where the copy link button icon sits for left/center\n          // alignment.\n          // Although this is unorthodox it's the only approach which\n          // allows the button to sit flush against the left edge of\n          // bottom line of text.\n          direction: rtl;\n\n          // By default RTL will negatively impact the layout of special\n          // characters within the heading text, and potentially other\n          // nested inline nodes. To prevent this we insert pseudo elements\n          // containing HTML entities to retain LTR for all heading content\n          // except for the copy link button.\n          > *:not(.", "):not(br) {\n            ::before {\n              // Open LTR: https://www.fileformat.info/info/unicode/char/202a/index.htm\n              content: '\u202A';\n            }\n            ::after {\n              // Close LTR: https://www.fileformat.info/info/unicode/char/202c/index.htm\n              content: '\u202C';\n            }\n          }\n        }\n      }\n      .", " {\n        margin: 0 6px 0 0;\n      }\n\n      @media (hover: hover) and (pointer: fine) {\n        .", " > button {\n          transform: translate(8px, 0px);\n        }\n      }\n    }\n  "], ["\n    .fabric-editor-block-mark[data-align] > {\n      h1,\n      h2,\n      h3,\n      h4,\n      h5,\n      h6 {\n        position: relative;\n      }\n    }\n\n    /**\n     * For right-alignment we flip the link to be before the heading\n     * text so that the text is flush up against the edge of the editor's\n     * container edge.\n     */\n    .fabric-editor-block-mark:not([data-align='center'])[data-align] {\n      > {\n        h1,\n        h2,\n        h3,\n        h4,\n        h5,\n        h6 {\n          // Using right to left text to achieve the inverse effect\n          // of where the copy link button icon sits for left/center\n          // alignment.\n          // Although this is unorthodox it's the only approach which\n          // allows the button to sit flush against the left edge of\n          // bottom line of text.\n          direction: rtl;\n\n          // By default RTL will negatively impact the layout of special\n          // characters within the heading text, and potentially other\n          // nested inline nodes. To prevent this we insert pseudo elements\n          // containing HTML entities to retain LTR for all heading content\n          // except for the copy link button.\n          > *:not(.", "):not(br) {\n            ::before {\n              // Open LTR: https://www.fileformat.info/info/unicode/char/202a/index.htm\n              content: '\\u202A';\n            }\n            ::after {\n              // Close LTR: https://www.fileformat.info/info/unicode/char/202c/index.htm\n              content: '\\u202C';\n            }\n          }\n        }\n      }\n      .", " {\n        margin: 0 6px 0 0;\n      }\n\n      @media (hover: hover) and (pointer: fine) {\n        .", " > button {\n          transform: translate(8px, 0px);\n        }\n      }\n    }\n  "])), _headingAnchor.HeadingAnchorWrapperClassName, _headingAnchor.HeadingAnchorWrapperClassName, _headingAnchor.HeadingAnchorWrapperClassName);
 };
 
 var tableSortableColumnStyle = function tableSortableColumnStyle(_ref2) {
@@ -96,77 +94,74 @@ 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(_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  ");
+  return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    .", " {\n      padding: 0;\n\n      .", " {\n        width: 100%;\n        height: 100%;\n        cursor: pointer;\n        padding: ", "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: ", ";\n          }\n        }\n\n        ", "\n      }\n\n      &.", "\n        .", " {\n        cursor: default;\n      }\n\n      .", " {\n        margin: 0;\n        opacity: 1;\n        transition: opacity 0.2s ease-in-out;\n      }\n\n      .", " {\n        opacity: 0;\n      }\n\n      &:hover {\n        .", " {\n          opacity: 1;\n        }\n      }\n    }\n  "])), _consts.RendererCssClassName.SORTABLE_COLUMN, _consts.RendererCssClassName.SORTABLE_COLUMN_BUTTON, _styles.tableCellPadding, colors.B300, headingsCss, _consts.RendererCssClassName.SORTABLE_COLUMN_NOT_ALLOWED, _consts.RendererCssClassName.SORTABLE_COLUMN_BUTTON, _consts.RendererCssClassName.SORTABLE_COLUMN_ICON, _consts.RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, _consts.RendererCssClassName.SORTABLE_COLUMN_NO_ORDER);
 };
 
-var fullPageStyles = function fullPageStyles(_ref3) {
-  var theme = _ref3.theme,
-      appearance = _ref3.appearance;
+var fullPageStyles = function fullPageStyles(_ref3, _ref4) {
+  var appearance = _ref3.appearance;
+  var theme = _ref4.theme;
 
   if (appearance !== 'full-page' && appearance !== 'mobile') {
     return '';
   }
 
-  return "\n    max-width: ".concat(theme && theme.layoutMaxWidth ? "".concat(theme.layoutMaxWidth, "px") : 'none', ";\n    margin: 0 auto;\n    padding: 0 ").concat(appearance === 'full-page' ? FullPagePadding : 0, "px;\n  ");
+  return (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    max-width: ", ";\n    margin: 0 auto;\n    padding: 0 ", "px;\n  "])), theme && theme.layoutMaxWidth ? "".concat(theme.layoutMaxWidth, "px") : 'none', appearance === 'full-page' ? FullPagePadding : 0);
 };
 
-var fullWidthStyles = function fullWidthStyles(_ref4) {
-  var appearance = _ref4.appearance;
+var fullWidthStyles = function fullWidthStyles(_ref5) {
+  var appearance = _ref5.appearance;
 
   if (appearance !== 'full-width') {
     return '';
   }
 
-  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  ");
+  return (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n    max-width: ", "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  "])), _editorSharedStyles.akEditorFullWidthLayoutWidth);
 };
 
-var rendererStyles = function rendererStyles(theme) {
-  // This is required to be compatible with styled-components prop structure.
-  var props = {
-    theme: theme
+var rendererStyles = function rendererStyles(wrapperProps) {
+  return function (theme) {
+    // This is required to be compatible with styled-components prop structure.
+    var themeProps = {
+      theme: theme
+    };
+    return (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n    font-size: ", "px;\n    line-height: 1.5rem;\n    color: ", ";\n\n    .", "::after {\n      // we add a clearfix after ak-renderer-document in order to\n      // contain internal floats (such as media images that are \"wrap-left\")\n      // to just the renderer (and not spill outside of it)\n      content: '';\n      visibility: hidden;\n      display: block;\n      height: 0;\n      clear: both;\n    }\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\n      + .", ":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\n      + .rich-media-wrapped\n      + *: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    /* plugin styles */\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      .", " {\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    .", " .", " {\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,\n        &.", "::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,\n        th {\n          position: relative;\n        }\n      }\n\n      table[data-number-column='true'] {\n        .", " {\n          background-color: ", ";\n          border-right: 1px solid\n            ", ";\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        ", ";\n      border-bottom: 1px solid\n        ", ";\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,\n    .sticky td {\n      box-shadow: 0px 1px\n          ", ",\n        0px -0.5px ", ",\n        inset -1px 0px ", ",\n        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      .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  "])), (0, _editorSharedStyles.editorFontSize)(themeProps), (0, _components.themed)({
+      light: colors.N800,
+      dark: '#B8C7E0'
+    })(themeProps), _consts.RendererCssClassName.DOCUMENT, fullPageStyles(wrapperProps, themeProps), fullWidthStyles(wrapperProps), headingAnchorStyle('h1'), headingAnchorStyle('h2'), headingAnchorStyle('h3'), headingAnchorStyle('h4'), headingAnchorStyle('h5'), headingAnchorStyle('h6'), colors.B400, colors.B300, colors.placeholderText(themeProps), _styles.whitespaceSharedStyles, _styles.blockquoteSharedStyles, (0, _styles.headingsSharedStyles)(themeProps), (0, _styles.ruleSharedStyles)(themeProps), _styles.paragraphSharedStyles, _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.blockMarksSharedStyles, (0, _styles.codeMarkSharedStyles)(themeProps), _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
+    })(themeProps), (0, _constants.borderRadius)(), (0, _components.themed)({
+      light: colors.N800,
+      dark: colors.DN600
+    })(themeProps), colors.R50, colors.R500, (0, _constants.gridSize)() * 3, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, alignedHeadingAnchorStyle(wrapperProps), _styles.mediaSingleSharedStyle, _consts.RendererCssClassName.DOCUMENT, _styles.TableSharedCssClassName.TABLE_CONTAINER, _consts.RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER, _consts.RendererCssClassName.EXTENSION, _consts.RendererCssClassName.DOCUMENT, _consts.RendererCssClassName.EXTENSION, _editorSharedStyles.blockNodesVerticalMargin, _consts.RendererCssClassName.EXTENSION_CENTER_ALIGN, _styles.TableSharedCssClassName.TABLE_NODE_WRAPPER, (0, _styles.tableSharedStyle)(themeProps), _consts.RendererCssClassName.DOCUMENT, _styles.TableSharedCssClassName.TABLE_CONTAINER, _ui.shadowClassNames.RIGHT_SHADOW, _ui.shadowClassNames.LEFT_SHADOW, _styles.tableMarginTop - 1, _styles.tableMarginTop, _editorSharedStyles.akEditorStickyHeaderZIndex, tableSortableColumnStyle(wrapperProps), _consts.RendererCssClassName.NUMBER_COLUMN, (0, _components.themed)({
+      light: _editorSharedStyles.akEditorTableToolbar,
+      dark: _editorSharedStyles.akEditorTableToolbarDark
+    })(themeProps), (0, _components.themed)({
+      light: _editorSharedStyles.akEditorTableBorder,
+      dark: _editorSharedStyles.akEditorTableBorderDark
+    })(themeProps), _editorSharedStyles.akEditorTableNumberColumnWidth, (0, _components.themed)({
+      light: colors.N200,
+      dark: colors.DN400
+    })(themeProps), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), _consts.RendererCssClassName.NUMBER_COLUMN, _editorSharedStyles.akEditorStickyHeaderZIndex, (0, _components.themed)({
+      light: _editorSharedStyles.akEditorTableBorder,
+      dark: _editorSharedStyles.akEditorTableBorderDark
+    })(themeProps), (0, _components.themed)({
+      light: _editorSharedStyles.akEditorTableBorder,
+      dark: _editorSharedStyles.akEditorTableBorderDark
+    })(themeProps), _editorSharedStyles.akEditorStickyHeaderZIndex, (0, _components.themed)({
+      light: _editorSharedStyles.akEditorTableBorder,
+      dark: _editorSharedStyles.akEditorTableBorderDark
+    })(themeProps), (0, _components.themed)({
+      light: _editorSharedStyles.akEditorTableBorder,
+      dark: _editorSharedStyles.akEditorTableBorderDark
+    })(themeProps), (0, _components.themed)({
+      light: _editorSharedStyles.akEditorTableToolbar,
+      dark: _editorSharedStyles.akEditorTableToolbarDark
+    })(themeProps), (0, _components.themed)({
+      light: _editorSharedStyles.akEditorTableToolbar,
+      dark: _editorSharedStyles.akEditorTableToolbarDark
+    })(themeProps), (0, _constants.borderRadius)(), _editorSharedStyles.blockNodesVerticalMargin, _styles.columnLayoutSharedStyle, (0, _constants.gridSize)() * 2.5, (0, _constants.gridSize)() * 4, _editorSharedStyles.gridMediumMaxWidth);
   };
-  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
-
-
-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.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, _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)({
-  light: _editorSharedStyles.akEditorTableBorder,
-  dark: _editorSharedStyles.akEditorTableBorderDark
-}), _editorSharedStyles.akEditorTableNumberColumnWidth, (0, _components.themed)({
-  light: colors.N200,
-  dark: colors.DN400
-}), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), _consts.RendererCssClassName.NUMBER_COLUMN, _editorSharedStyles.akEditorStickyHeaderZIndex, (0, _components.themed)({
-  light: _editorSharedStyles.akEditorTableBorder,
-  dark: _editorSharedStyles.akEditorTableBorderDark
-}), (0, _components.themed)({
-  light: _editorSharedStyles.akEditorTableBorder,
-  dark: _editorSharedStyles.akEditorTableBorderDark
-}), _editorSharedStyles.akEditorStickyHeaderZIndex, (0, _components.themed)({
-  light: _editorSharedStyles.akEditorTableBorder,
-  dark: _editorSharedStyles.akEditorTableBorderDark
-}), (0, _components.themed)({
-  light: _editorSharedStyles.akEditorTableBorder,
-  dark: _editorSharedStyles.akEditorTableBorderDark
-}), (0, _components.themed)({
-  light: _editorSharedStyles.akEditorTableToolbar,
-  dark: _editorSharedStyles.akEditorTableToolbarDark
-}), (0, _components.themed)({
-  light: _editorSharedStyles.akEditorTableToolbar,
-  dark: _editorSharedStyles.akEditorTableToolbarDark
-}), (0, _constants.borderRadius)(), _editorSharedStyles.blockNodesVerticalMargin, (0, _constants.gridSize)() * 2.5, (0, _constants.gridSize)() * 4, _editorSharedStyles.gridMediumMaxWidth);
-
-exports.DeprecatedWrapper = DeprecatedWrapper;
+};
+
+exports.rendererStyles = rendererStyles;

package/dist/cjs/ui/Renderer/truncated-wrapper.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
 });
@@ -21,31 +19,31 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("@emotion/react");
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _react2 = require("react");
 
 var _templateObject;
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 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; } }
 
-var FadeOut = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  overflow-y: hidden;\n  max-height: ", "px;\n  &::after {\n    content: '';\n    position: absolute;\n    top: ", "px;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    /* Using 'rgba(255, 255, 255, 0)' because 'transparent' breaks the gradient in Safari 11 */\n    background-image: ", ";\n  }\n"])), function (_ref) {
-  var height = _ref.height;
-  return height;
-}, function (_ref2) {
-  var height = _ref2.height,
-      fadeHeight = _ref2.fadeHeight;
-  return height - fadeHeight;
-}, function (_ref3) {
-  var backgroundColor = _ref3.backgroundColor;
-  return "linear-gradient(rgba(255, 255, 255, 0),  ".concat(backgroundColor, ")");
-});
+var fadeOutStyles = function fadeOutStyles(maxHeight, top, backgroundColor) {
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  overflow-y: hidden;\n  max-height: ", "px;\n  &::after {\n    content: '';\n    position: absolute;\n    top: ", "px;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    background-image: linear-gradient(\n      rgba(255, 255, 255, 0),\n      ", "\n    );\n  }\n"])), maxHeight, top, backgroundColor);
+};
+
+var FadeOut = function FadeOut(props) {
+  var children = props.children,
+      backgroundColor = props.backgroundColor,
+      fadeHeight = props.fadeHeight,
+      height = props.height;
+  var top = height - fadeHeight;
+  var styles = fadeOutStyles(height, top, backgroundColor);
+  return (0, _react.jsx)("div", {
+    css: styles
+  }, children);
+};
 
 var TruncatedWrapper = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(TruncatedWrapper, _Component);
@@ -68,7 +66,7 @@ var TruncatedWrapper = /*#__PURE__*/function (_Component) {
           _this$props$backgroun = _this$props.backgroundColor,
           backgroundColor = _this$props$backgroun === void 0 ? 'white' : _this$props$backgroun,
           children = _this$props.children;
-      return /*#__PURE__*/_react.default.createElement(FadeOut, {
+      return (0, _react.jsx)(FadeOut, {
         height: height,
         fadeHeight: fadeHeight,
         backgroundColor: backgroundColor
@@ -76,6 +74,6 @@ var TruncatedWrapper = /*#__PURE__*/function (_Component) {
     }
   }]);
   return TruncatedWrapper;
-}(_react.Component);
+}(_react2.Component);
 
 exports.TruncatedWrapper = TruncatedWrapper;

package/dist/cjs/ui/SortingIcon.js

@@ -9,9 +9,7 @@ exports.default = exports.TableSortIconDataUrl = exports.StatusClassNames = void
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _react = _interopRequireDefault(require("react"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _react = require("@emotion/react");
 
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 
@@ -43,9 +41,8 @@ exports.StatusClassNames = StatusClassNames;
   StatusClassNames["SORTING_NOT_ALLOWED"] = "sorting-icon-svg__not-allowed";
 })(StatusClassNames || (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.7;\n  }\n"])), TableSortIconDataUrl, StatusClassNames.DESC, TABLE_SORTING_ICON_CLASS);
+var wrapperStyles = (0, _react.css)(_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 tableSortingIconStyles = (0, _react.css)(_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) {
@@ -91,13 +88,15 @@ var SortingIcon = function SortingIcon(_ref) {
   var activated = sortOrdered !== _types.SortOrder.NO_ORDER;
   var wrapperClassName = !isSortingAllowed ? StatusClassNames.SORTING_NOT_ALLOWED : '';
   var content = getTooltipTitle(intl, isSortingAllowed, sortOrdered);
-  return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+  return (0, _react.jsx)(_tooltip.default, {
     delay: 0,
     content: content,
     position: "top"
-  }, /*#__PURE__*/_react.default.createElement(Wrapper, {
+  }, (0, _react.jsx)("figure", {
+    css: wrapperStyles,
     className: wrapperClassName
-  }, /*#__PURE__*/_react.default.createElement(TableSortingIcon, {
+  }, (0, _react.jsx)("div", {
+    css: tableSortingIconStyles,
     className: "".concat(getClassName(sortOrdered), " ").concat(TABLE_SORTING_ICON_CLASS, "-").concat(activated ? 'active' : 'inactive')
   })));
 };

package/dist/cjs/ui/renderer-props.js

@@ -1,5 +1,3 @@
 "use strict";
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+var _enums = require("../analytics/enums");

package/dist/cjs/utils.js

@@ -14,7 +14,7 @@ var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/creat
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
-var _adfSchema = require("@atlaskit/adf-schema");
+var _schemaDefault = require("@atlaskit/adf-schema/schema-default");
 
 var _editorJsonTransformer = require("@atlaskit/editor-json-transformer");
 
@@ -26,7 +26,7 @@ function createEncoder(parser, encoder) {
 
 var ADFEncoder = /*#__PURE__*/(0, _createClass2.default)(function ADFEncoder(createTransformerWithSchema) {
   (0, _classCallCheck2.default)(this, ADFEncoder);
-  var transformer = createTransformerWithSchema(_adfSchema.defaultSchema);
+  var transformer = createTransformerWithSchema(_schemaDefault.defaultSchema);
   this.encode = createEncoder(transformer, new _editorJsonTransformer.JSONTransformer());
 });
 exports.ADFEncoder = ADFEncoder;

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "92.0.1",
+	"version": "93.0.2",
 	"sideEffects": false
 }

package/dist/es2019/analytics/enums.js

@@ -12,6 +12,7 @@ export let ACTION;
 (function (ACTION) {
   ACTION["STARTED"] = "started";
   ACTION["RENDERED"] = "rendered";
+  ACTION["RE_RENDERED"] = "reRendered";
   ACTION["RENDERER_TTI"] = "tti";
   ACTION["CRASHED"] = "unhandledErrorCaught";
   ACTION["INVALID_PROSEMIRROR_DOCUMENT"] = "invalidProsemirrorDocument";

package/dist/es2019/i18n/en.js

@@ -0,0 +1,20 @@
+/**
+ * NOTE:
+ *
+ * This file is automatically generated by Traduki 2.0.
+ * DO NOT CHANGE IT BY HAND or your changes will be lost.
+ */
+//
+export default {
+  'fabric.editor.codeBlockCopyButton.copiedToClipboard': 'Copied!',
+  'fabric.editor.codeBlockCopyButton.copyToClipboard': 'Copy',
+  'fabric.editor.headingLink.ascOrderLabel': 'Sort column Z to A',
+  'fabric.editor.headingLink.ascSortingLabel': 'ascending',
+  'fabric.editor.headingLink.copied': 'Copied!',
+  'fabric.editor.headingLink.copyAnchorLink': 'Copy link to heading',
+  'fabric.editor.headingLink.copyAriaLabel': 'Copy',
+  'fabric.editor.headingLink.descOrderLabel': "⚠️ You can't sort a table with merged cell",
+  'fabric.editor.headingLink.failedToCopy': 'Copy failed',
+  'fabric.editor.headingLink.noOrderLabel': 'Sort column A to Z',
+  'fabric.editor.headingLink.noneSortingLabel': 'descending'
+};