@atlaskit/renderer 114.5.2 → 114.5.3

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/renderer
 
+## 114.5.3
+
+### Patch Changes
+
+- [#132083](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/132083)
+  [`fd96380b3ebf5`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/fd96380b3ebf5) -
+  [ux] ED-27218: Made editorUGCToken depends on fg instead of typo theme
+- Updated dependencies
+
 ## 114.5.2
 
 ### Patch Changes

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

@@ -28,7 +28,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 var containerStyles = (0, _react.css)({
   // Remove top margin if MBE is the first on the doc/page (MBE can only be on the first level)
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-nested-selectors
-  '&:first-of-type > .ak-renderer-extension': {
+  '&:first-child > .ak-renderer-extension': {
     marginTop: 0
   }
 });
@@ -134,6 +134,7 @@ var MultiBodiedExtension = function MultiBodiedExtension(props) {
   return (0, _react.jsx)("section", {
     css: [containerStyles, containerActiveFrameStyles],
     "data-testid": "multiBodiedExtension--container",
+    "data-multiBodiedExtension-container": true,
     "data-active-child-index": activeChildIndex,
     "data-layout": layout
   }, (0, _react.jsx)(_ui.WidthConsumer, null, function (_ref4) {

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

@@ -8,7 +8,6 @@ exports.RendererStyleContainer = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
-var _tokens = require("@atlaskit/tokens");
 var _style = require("./style");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _consts = require("../../consts");
@@ -955,7 +954,6 @@ var tableSharedStyle = (0, _react.css)((0, _defineProperty2.default)((0, _define
   'th td': {
     backgroundColor: "var(--ds-background-neutral-subtle, white)"
   },
-  // platform_editor_nested_tables_renderer_styles has already been lunched, so assume it's on
   '> tbody > tr > td': {
     backgroundColor: "var(--ds-surface, #FFFFFF)"
   },
@@ -1151,8 +1149,6 @@ var rendererTableColumnStyles = (0, _react.css)((0, _defineProperty2.default)({}
     borderRight: "0px none"
   })
 }));
-
-// assume FG platform_editor_nested_tables_renderer_styles and platform_editor_renderer_table_header_styles on
 var rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks = (0, _react.css)((0, _defineProperty2.default)({}, ".".concat(_consts.RendererCssClassName.DOCUMENT, " .").concat(_styles.TableSharedCssClassName.TABLE_CONTAINER), (0, _defineProperty2.default)({}, ".".concat(_styles.TableSharedCssClassName.TABLE_NODE_WRAPPER, " > table, .").concat(_styles.TableSharedCssClassName.TABLE_STICKY_WRAPPER, " > table"), (0, _defineProperty2.default)({}, ".".concat(_consts.RendererCssClassName.SORTABLE_COLUMN_WRAPPER), (0, _defineProperty2.default)({}, ".".concat(_consts.RendererCssClassName.SORTABLE_COLUMN), (0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(_headingAnchor.HeadingAnchorWrapperClassName), {
   position: 'unset'
 }), '>', {
@@ -1367,8 +1363,6 @@ var RendererStyleContainer = exports.RendererStyleContainer = function RendererS
     innerRef = props.innerRef,
     testId = props.testId;
   var isAdvancedLayoutsOn = (0, _experiments.editorExperiment)('advanced_layouts', true);
-  var _getGlobalTheme = (0, _tokens.getGlobalTheme)(),
-    typography = _getGlobalTheme.typography;
   if ((0, _platformFeatureFlags.fg)('platform_editor_emotion_refactor_renderer')) {
     return (
       // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
@@ -1378,13 +1372,13 @@ var RendererStyleContainer = exports.RendererStyleContainer = function RendererS
         onMouseDown: onMouseDown,
         style: {
           '--ak-renderer-base-font-size': "".concat((0, _getBaseFontSize.getBaseFontSize)(appearance), "px"),
-          '--ak-renderer-editor-font-heading-h1': "".concat((0, _ugcTokens.editorUGCToken)('editor.font.heading.h1', typography)),
-          '--ak-renderer-editor-font-heading-h2': "".concat((0, _ugcTokens.editorUGCToken)('editor.font.heading.h2', typography)),
-          '--ak-renderer-editor-font-heading-h3': "".concat((0, _ugcTokens.editorUGCToken)('editor.font.heading.h3', typography)),
-          '--ak-renderer-editor-font-heading-h4': "".concat((0, _ugcTokens.editorUGCToken)('editor.font.heading.h4', typography)),
-          '--ak-renderer-editor-font-heading-h5': "".concat((0, _ugcTokens.editorUGCToken)('editor.font.heading.h5', typography)),
-          '--ak-renderer-editor-font-heading-h6': "".concat((0, _ugcTokens.editorUGCToken)('editor.font.heading.h6', typography)),
-          '--ak-renderer-editor-font-normal-text': "".concat((0, _ugcTokens.editorUGCToken)('editor.font.body', typography))
+          '--ak-renderer-editor-font-heading-h1': "".concat((0, _ugcTokens.editorUGCToken)('editor.font.heading.h1')),
+          '--ak-renderer-editor-font-heading-h2': "".concat((0, _ugcTokens.editorUGCToken)('editor.font.heading.h2')),
+          '--ak-renderer-editor-font-heading-h3': "".concat((0, _ugcTokens.editorUGCToken)('editor.font.heading.h3')),
+          '--ak-renderer-editor-font-heading-h4': "".concat((0, _ugcTokens.editorUGCToken)('editor.font.heading.h4')),
+          '--ak-renderer-editor-font-heading-h5': "".concat((0, _ugcTokens.editorUGCToken)('editor.font.heading.h5')),
+          '--ak-renderer-editor-font-heading-h6': "".concat((0, _ugcTokens.editorUGCToken)('editor.font.heading.h6')),
+          '--ak-renderer-editor-font-normal-text': "".concat((0, _ugcTokens.editorUGCToken)('editor.font.body'))
         },
         css: [baseStyles, appearance === 'full-page' && rendererFullPageStyles, appearance === 'full-width' && rendererFullWidthStyles, !(0, _table.isTableResizingEnabled)(appearance) && rendererFullWidthStylesForTableResizing, telepointerStyles, whitespaceSharedStyles, blockquoteSharedStyles, (0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') ? headingsSharedStylesWithEditorUGC : headingsSharedStyles, headingWithAlignmentStyles, ruleSharedStyles, (0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') ? paragraphSharedStylesWithEditorUGC : paragraphSharedStyles, listsSharedStyles, _browser.browser.gecko && listsSharedStylesForGekko, indentationSharedStyles, blockMarksSharedStyles, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles, tasksAndDecisionsStyles, smartCardStyles, (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') && smartCardStylesAvatarFix,
         // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix

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

@@ -67,7 +67,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 var NORMAL_SEVERITY_THRESHOLD = exports.NORMAL_SEVERITY_THRESHOLD = 2000;
 var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "114.5.2";
+var packageVersion = "114.5.3";
 var setAsQueryContainerStyles = (0, _react2.css)({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size',

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

@@ -23,7 +23,7 @@ var _lightWeightCodeBlock = require("../../react/nodes/codeBlock/components/ligh
 var _table = require("../../react/nodes/table");
 var _table2 = require("@atlaskit/editor-common/table");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
 /* eslint-disable @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation */
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
@@ -125,7 +125,7 @@ var tableSortableColumnStyle = function tableSortableColumnStyle(_ref2) {
   if (allowNestedHeaderLinks) {
     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 (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n\t\t.", " {\n\t\t\tpadding: 0;\n\n\t\t\t.", " {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\tpadding: ", "px;\n\t\t\t\tborder-width: 1.5px;\n\t\t\t\tborder-style: solid;\n\t\t\t\tborder-color: transparent;\n\n\t\t\t\t> *:first-child {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\n\t\t\t\t> .ProseMirror-gapcursor:first-child + *,\n\t\t\t\t> style:first-child + .ProseMirror-gapcursor + * {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\n\t\t\t\t> .ProseMirror-gapcursor:first-child + span + *,\n\t\t\t\t> style:first-child + .ProseMirror-gapcursor + span + * {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\n\t\t\t\t@supports selector(:focus-visible) {\n\t\t\t\t\t&:focus {\n\t\t\t\t\t\toutline: unset;\n\t\t\t\t\t}\n\t\t\t\t\t&:focus-visible {\n\t\t\t\t\t\tborder-color: ", ";\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t", "\n\t\t\t}\n\n\t\t\t", "\n\t\t}\n\t"])), _consts.RendererCssClassName.SORTABLE_COLUMN_WRAPPER, _consts.RendererCssClassName.SORTABLE_COLUMN, _styles.tableCellPadding, "var(--ds-border-focused, ".concat(colors.B300, ")"), headingsCss, (0, _platformFeatureFlags.fg)('platform_editor_nested_tables_renderer_styles') ? (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t\t\t// New styles\n\t\t\t\t\t\t> .", "\n\t\t\t\t\t\t\t> .", " {\n\t\t\t\t\t\t\tmargin: 0;\n\n\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\t\ttransition: opacity 0.2s ease-in-out;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t> .", "\n\t\t\t\t\t\t\t> .", " {\n\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\topacity: 0;\n\t\t\t\t\t\t\t\t&:focus {\n\t\t\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t&:hover:not(\n\t\t\t\t\t\t\t\t:has(\n\t\t\t\t\t\t\t\t\t\t.", "\n\t\t\t\t\t\t\t\t\t\t\t.", ":hover\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t> .", "\n\t\t\t\t\t\t\t> .", " {\n\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t"])), _consts.RendererCssClassName.SORTABLE_COLUMN, _consts.RendererCssClassName.SORTABLE_COLUMN_ICON_WRAPPER, _table2.SORTABLE_COLUMN_ICON_CLASSNAME, _consts.RendererCssClassName.SORTABLE_COLUMN, _consts.RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, _table2.SORTABLE_COLUMN_ICON_CLASSNAME, _consts.RendererCssClassName.SORTABLE_COLUMN_WRAPPER, _consts.RendererCssClassName.SORTABLE_COLUMN, _consts.RendererCssClassName.SORTABLE_COLUMN, _consts.RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, _table2.SORTABLE_COLUMN_ICON_CLASSNAME) : (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t\t\t// old styles\n\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\tmargin: 0;\n\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\t\ttransition: opacity 0.2s ease-in-out;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\topacity: 0;\n\t\t\t\t\t\t\t\t&:focus {\n\t\t\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t&:hover {\n\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t"])), _consts.RendererCssClassName.SORTABLE_COLUMN_ICON_WRAPPER, _table2.SORTABLE_COLUMN_ICON_CLASSNAME, _consts.RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, _table2.SORTABLE_COLUMN_ICON_CLASSNAME, _consts.RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, _table2.SORTABLE_COLUMN_ICON_CLASSNAME));
+  return (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n\t\t.", " {\n\t\t\tpadding: 0;\n\n\t\t\t.", " {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\tpadding: ", "px;\n\t\t\t\tborder-width: 1.5px;\n\t\t\t\tborder-style: solid;\n\t\t\t\tborder-color: transparent;\n\n\t\t\t\t> *:first-child {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\n\t\t\t\t> .ProseMirror-gapcursor:first-child + *,\n\t\t\t\t> style:first-child + .ProseMirror-gapcursor + * {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\n\t\t\t\t> .ProseMirror-gapcursor:first-child + span + *,\n\t\t\t\t> style:first-child + .ProseMirror-gapcursor + span + * {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\n\t\t\t\t@supports selector(:focus-visible) {\n\t\t\t\t\t&:focus {\n\t\t\t\t\t\toutline: unset;\n\t\t\t\t\t}\n\t\t\t\t\t&:focus-visible {\n\t\t\t\t\t\tborder-color: ", ";\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t", "\n\t\t\t}\n\n\t\t\t", "\n\t\t}\n\t"])), _consts.RendererCssClassName.SORTABLE_COLUMN_WRAPPER, _consts.RendererCssClassName.SORTABLE_COLUMN, _styles.tableCellPadding, "var(--ds-border-focused, ".concat(colors.B300, ")"), headingsCss, (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t// New styles\n\t\t\t\t> .", "\n\t\t\t\t\t> .", " {\n\t\t\t\t\tmargin: 0;\n\n\t\t\t\t\t.", " {\n\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\ttransition: opacity 0.2s ease-in-out;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t> .", "\n\t\t\t\t\t> .", " {\n\t\t\t\t\t.", " {\n\t\t\t\t\t\topacity: 0;\n\t\t\t\t\t\t&:focus {\n\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t&:hover:not(\n\t\t\t\t\t\t:has(\n\t\t\t\t\t\t\t.", "\n\t\t\t\t\t\t\t\t.", ":hover\n\t\t\t\t\t\t)\n\t\t\t\t\t)\n\t\t\t\t\t> .", "\n\t\t\t\t\t> .", " {\n\t\t\t\t\t.", " {\n\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t"])), _consts.RendererCssClassName.SORTABLE_COLUMN, _consts.RendererCssClassName.SORTABLE_COLUMN_ICON_WRAPPER, _table2.SORTABLE_COLUMN_ICON_CLASSNAME, _consts.RendererCssClassName.SORTABLE_COLUMN, _consts.RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, _table2.SORTABLE_COLUMN_ICON_CLASSNAME, _consts.RendererCssClassName.SORTABLE_COLUMN_WRAPPER, _consts.RendererCssClassName.SORTABLE_COLUMN, _consts.RendererCssClassName.SORTABLE_COLUMN, _consts.RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, _table2.SORTABLE_COLUMN_ICON_CLASSNAME));
 };
 var fullPageStyles = function fullPageStyles(_ref3, _ref4) {
   var appearance = _ref3.appearance;
@@ -133,20 +133,20 @@ var fullPageStyles = function fullPageStyles(_ref3, _ref4) {
   if (appearance !== 'full-page') {
     return '';
   }
-  return (0, _react.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n\t\tmax-width: ", ";\n\t\tmargin: 0 auto;\n\t\tpadding: 0 ", "px;\n\t"])), theme && theme.layoutMaxWidth ? "".concat(theme.layoutMaxWidth, "px") : 'none', appearance === 'full-page' ? FullPagePadding : 0);
+  return (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n\t\tmax-width: ", ";\n\t\tmargin: 0 auto;\n\t\tpadding: 0 ", "px;\n\t"])), theme && theme.layoutMaxWidth ? "".concat(theme.layoutMaxWidth, "px") : 'none', appearance === 'full-page' ? FullPagePadding : 0);
 };
 var fullWidthStyles = function fullWidthStyles(_ref5) {
   var appearance = _ref5.appearance;
   if (appearance !== 'full-width') {
     return '';
   }
-  return (0, _react.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n\t\tmax-width: ", "px;\n\t\tmargin: 0 auto;\n\n\t\t/* don't override if the breakout mark has width attribute defined */\n\t\t.fabric-editor-breakout-mark:not([data-has-width='true']),\n\t\t.ak-renderer-extension {\n\t\t\twidth: 100% !important;\n\t\t}\n\n\t\t", "\n\t"])), _editorSharedStyles.akEditorFullWidthLayoutWidth, (0, _table.isTableResizingEnabled)(appearance) ? '' : "\n      .pm-table-container {\n        width: 100% !important;\n      }\n    ");
+  return (0, _react.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n\t\tmax-width: ", "px;\n\t\tmargin: 0 auto;\n\n\t\t/* don't override if the breakout mark has width attribute defined */\n\t\t.fabric-editor-breakout-mark:not([data-has-width='true']),\n\t\t.ak-renderer-extension {\n\t\t\twidth: 100% !important;\n\t\t}\n\n\t\t", "\n\t"])), _editorSharedStyles.akEditorFullWidthLayoutWidth, (0, _table.isTableResizingEnabled)(appearance) ? '' : "\n      .pm-table-container {\n        width: 100% !important;\n      }\n    ");
 };
 var breakoutWidthStyle = function breakoutWidthStyle() {
-  return (0, _react.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n\t\t*:not([data-mark-type='fragment']) .", " {\n\t\t\t// Ignored via go/ees007\n\t\t\t// eslint-disable-next-line @atlaskit/editor/enforce-todo-comment-format\n\t\t\t// TODO - improve inline style logic on table container so important styles aren't required here\n\t\t\twidth: 100% !important;\n\t\t\tleft: 0 !important;\n\t\t}\n\n\t\t[data-mark-type='fragment'] * .", " {\n\t\t\t// Ignored via go/ees007\n\t\t\t// eslint-disable-next-line @atlaskit/editor/enforce-todo-comment-format\n\t\t\t// TODO - improve inline style logic on table container so important styles aren't required here\n\t\t\twidth: 100% !important;\n\t\t\tleft: 0 !important;\n\t\t}\n\t"])), _styles.TableSharedCssClassName.TABLE_CONTAINER, _styles.TableSharedCssClassName.TABLE_CONTAINER);
+  return (0, _react.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n\t\t*:not([data-mark-type='fragment']) .", " {\n\t\t\t// Ignored via go/ees007\n\t\t\t// eslint-disable-next-line @atlaskit/editor/enforce-todo-comment-format\n\t\t\t// TODO - improve inline style logic on table container so important styles aren't required here\n\t\t\twidth: 100% !important;\n\t\t\tleft: 0 !important;\n\t\t}\n\n\t\t[data-mark-type='fragment'] * .", " {\n\t\t\t// Ignored via go/ees007\n\t\t\t// eslint-disable-next-line @atlaskit/editor/enforce-todo-comment-format\n\t\t\t// TODO - improve inline style logic on table container so important styles aren't required here\n\t\t\twidth: 100% !important;\n\t\t\tleft: 0 !important;\n\t\t}\n\t"])), _styles.TableSharedCssClassName.TABLE_CONTAINER, _styles.TableSharedCssClassName.TABLE_CONTAINER);
 };
 var getShadowOverrides = function getShadowOverrides() {
-  return (0, _react.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n\t\t/** Shadow overrides */\n\t\t&.", "::after, &.", "::before {\n\t\t\twidth: ", "px;\n\t\t\tbackground: linear-gradient(\n\t\t\t\t\tto left,\n\t\t\t\t\ttransparent 0,\n\t\t\t\t\t", " 140%\n\t\t\t\t),\n\t\t\t\tlinear-gradient(\n\t\t\t\t\tto right,\n\t\t\t\t\t", " 0px,\n\t\t\t\t\ttransparent 1px\n\t\t\t\t);\n\t\t}\n\n\t\t&.", "::after {\n\t\t\tbackground: linear-gradient(\n\t\t\t\t\tto right,\n\t\t\t\t\ttransparent 0,\n\t\t\t\t\t", " 140%\n\t\t\t\t),\n\t\t\t\tlinear-gradient(\n\t\t\t\t\tto left,\n\t\t\t\t\t", " 0px,\n\t\t\t\t\ttransparent 1px\n\t\t\t\t);\n\t\t\tright: 0px;\n\t\t}\n\t"])), _ui.shadowClassNames.RIGHT_SHADOW, _ui.shadowClassNames.LEFT_SHADOW, tableShadowWidth, "var(--ds-shadow-overflow-spread, ".concat(_colors.N40A, ")"), "var(--ds-shadow-overflow-perimeter, transparent)", _ui.shadowClassNames.RIGHT_SHADOW, "var(--ds-shadow-overflow-spread, ".concat(_colors.N40A, ")"), "var(--ds-shadow-overflow-perimeter, transparent)");
+  return (0, _react.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n\t\t/** Shadow overrides */\n\t\t&.", "::after, &.", "::before {\n\t\t\twidth: ", "px;\n\t\t\tbackground: linear-gradient(\n\t\t\t\t\tto left,\n\t\t\t\t\ttransparent 0,\n\t\t\t\t\t", " 140%\n\t\t\t\t),\n\t\t\t\tlinear-gradient(\n\t\t\t\t\tto right,\n\t\t\t\t\t", " 0px,\n\t\t\t\t\ttransparent 1px\n\t\t\t\t);\n\t\t}\n\n\t\t&.", "::after {\n\t\t\tbackground: linear-gradient(\n\t\t\t\t\tto right,\n\t\t\t\t\ttransparent 0,\n\t\t\t\t\t", " 140%\n\t\t\t\t),\n\t\t\t\tlinear-gradient(\n\t\t\t\t\tto left,\n\t\t\t\t\t", " 0px,\n\t\t\t\t\ttransparent 1px\n\t\t\t\t);\n\t\t\tright: 0px;\n\t\t}\n\t"])), _ui.shadowClassNames.RIGHT_SHADOW, _ui.shadowClassNames.LEFT_SHADOW, tableShadowWidth, "var(--ds-shadow-overflow-spread, ".concat(_colors.N40A, ")"), "var(--ds-shadow-overflow-perimeter, transparent)", _ui.shadowClassNames.RIGHT_SHADOW, "var(--ds-shadow-overflow-spread, ".concat(_colors.N40A, ")"), "var(--ds-shadow-overflow-perimeter, transparent)");
 };
 function getAnnotationStyles(_ref6) {
   var allowAnnotations = _ref6.allowAnnotations;
@@ -203,7 +203,7 @@ var rendererStyles = exports.rendererStyles = function rendererStyles(wrapperPro
     var isAdvancedLayoutsOn = (0, _experiments.editorExperiment)('advanced_layouts', true);
 
     // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/design-system/no-css-tagged-template-expression
-    return (0, _react.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n\t\tfont-size: ", "px;\n\t\tline-height: 1.5rem;\n\t\tcolor: ", ";\n\n\t\t.", "::after {\n\t\t\t// we add a clearfix after ak-renderer-document in order to\n\t\t\t// contain internal floats (such as media images that are \"wrap-left\")\n\t\t\t// to just the renderer (and not spill outside of it)\n\t\t\tcontent: '';\n\t\t\tvisibility: hidden;\n\t\t\tdisplay: block;\n\t\t\theight: 0;\n\t\t\tclear: both;\n\t\t}\n\n\t\t", "\n\t\t", "\n\n      .", " {\n\t\t\t", "\n\t\t}\n\n\t\t& h1 {\n\t\t\t", "\n\t\t}\n\n\t\t& h2 {\n\t\t\t", "\n\t\t}\n\n\t\t& h3 {\n\t\t\t", "\n\t\t}\n\n\t\t& h4 {\n\t\t\t", "\n\t\t}\n\n\t\t& h5 {\n\t\t\t", "\n\t\t}\n\n\t\t& h6 {\n\t\t\t", "\n\t\t}\n\n\t\t& span.akActionMark {\n\t\t\tcolor: ", ";\n\t\t\ttext-decoration: none;\n\n\t\t\t&:hover {\n\t\t\t\tcolor: ", ";\n\t\t\t\ttext-decoration: underline;\n\t\t\t}\n\n\t\t\t&:active {\n\t\t\t\tcolor: ", ";\n\t\t\t}\n\t\t}\n\n\t\t& span.akActionMark {\n\t\t\tcursor: pointer;\n\t\t}\n\n\t\t& span[data-placeholder] {\n\t\t\tcolor: ", ";\n\t\t}\n\n\t\t", "\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", "\n\t\t", "\n\n\t\t& .UnknownBlock {\n\t\t\tfont-family: ", ";\n\t\t\tfont-size: ", ";\n\t\t\tfont-weight: ", ";\n\t\t\twhite-space: pre-wrap;\n\t\t\tword-wrap: break-word;\n\t\t}\n\n\t\t& span.date-node {\n\t\t\tbackground: ", ";\n\t\t\tborder-radius: ", ";\n\t\t\tcolor: ", ";\n\t\t\tpadding: ", " ", ";\n\t\t\tmargin: 0 1px;\n\t\t\ttransition: background 0.3s;\n\t\t}\n\n\t\t& span.date-node-highlighted {\n\t\t\tbackground: ", ";\n\t\t\tcolor: ", ";\n\t\t}\n\n\t\t& .renderer-image {\n\t\t\tmax-width: 100%;\n\t\t\tdisplay: block;\n\t\t\tmargin: ", " 0;\n\t\t}\n\n\t\t.", ".rich-media-wrapped + .", ":not(.rich-media-wrapped) {\n\t\t\tclear: both;\n\t\t}\n\n\t\t& .code-block,\n\t\t& blockquote,\n\t\t& hr,\n\t\t& > div > div:not(.rich-media-wrapped),\n\t\t.", ".rich-media-wrapped + .rich-media-wrapped + *:not(.rich-media-wrapped),\n\t\t.", ".rich-media-wrapped + div:not(.rich-media-wrapped),\n\t\t.", ".image-align-start,\n\t\t\t.", ".image-center,\n\t\t\t.", ".image-align-end {\n\t\t\tclear: both;\n\t\t}\n\n\t\t& .rich-media-wrapped {\n\t\t\t& + h1,\n\t\t\t& + h2,\n\t\t\t& + h3,\n\t\t\t& + h4,\n\t\t\t& + h5,\n\t\t\t& + h6 {\n\t\t\t\tmargin-top: ", ";\n\t\t\t}\n\t\t}\n\n\t\t", "\n\t\t/* plugin styles */\n    ", " &\n    div[class^='image-wrap-'] + div[class^='image-wrap-'] {\n\t\t\tmargin-left: 0;\n\t\t\tmargin-right: 0;\n\t\t}\n\n\t\t/* Breakout for tables and extensions */\n\t\t.", " > {\n\t\t\t", "\n\n\t\t\t* .", " {\n\t\t\t\toverflow-x: auto;\n\t\t\t}\n\n\t\t\t& .", ":first-child {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\t\t}\n\n\t\t.", " {\n\t\t\t.", " {\n\t\t\t\tmargin-top: ", ";\n\t\t\t}\n\n\t\t\t.", " {\n\t\t\t\tmargin-left: 50%;\n\t\t\t\ttransform: translateX(-50%);\n\t\t\t}\n\n\t\t\t.", " {\n\t\t\t\toverflow-x: auto;\n\t\t\t}\n\n\t\t\t.", " .", " {\n\t\t\t\tdisplay: flex;\n\t\t\t}\n\t\t}\n\n\t\t", "\n\n\t\t.", " .", " {\n\t\t\tz-index: 0;\n\t\t\ttransition: all 0.1s linear;\n\t\t\tdisplay: flex; /* needed to avoid position: fixed jumpiness in Chrome */\n\n\t\t\t/** Shadow overrides */\n\t\t\t&.", "::after, &.", "::before {\n\t\t\t\ttop: ", "px;\n\t\t\t\theight: calc(100% - ", "px);\n\t\t\t\tz-index: ", ";\n\t\t\t}\n\n\t\t\t", "\n\n\t\t\t", "\n\n\t\t\t&\n          .", ",\n          &\n          .", " {\n\t\t\t\theight: calc(100% - ", "px);\n\t\t\t}\n\n\t\t\t/**\n\t\t\t * A hack for making all the <th /> heights equal in case some have shorter\n\t\t\t * content than others.\n\t\t\t *\n\t\t\t * This is done to make sort buttons fill entire <th />.\n\t\t\t*/\n\t\t\t", " {\n\t\t\t\theight: 1px; /* will be ignored */\n\t\t\t\t", ";\n\t\t\t\tmargin-left: 0;\n\t\t\t\tmargin-right: 0;\n\t\t\t}\n\n\t\t\t", " {\n\t\t\t\theight: 100%;\n\n\t\t\t\ttd,\n\t\t\t\tth {\n\t\t\t\t\tposition: relative;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\ttable[data-number-column='true'] {\n\t\t\t\t.", " {\n\t\t\t\t\tbackground-color: ", ";\n\t\t\t\t\tborder-right: 1px solid\n\t\t\t\t\t\t", ";\n\t\t\t\t\twidth: ", "px;\n\t\t\t\t\ttext-align: center;\n\t\t\t\t\tcolor: ", ";\n\t\t\t\t\tfont-size: ", ";\n\t\t\t\t}\n\n\t\t\t\t.fixed .", " {\n\t\t\t\t\tborder-right: 0px none;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\ttr[data-header-row].fixed {\n\t\t\tposition: fixed !important;\n\t\t\tdisplay: flex;\n\t\t\toverflow: hidden;\n\t\t\tz-index: ", ";\n\n\t\t\tborder-right: 1px solid ", ";\n\t\t\tborder-bottom: 1px solid ", ";\n\n\t\t\t/* this is to compensate for the table border */\n\t\t\ttransform: translateX(-1px);\n\t\t}\n\n\t\t.sticky > th {\n\t\t\tz-index: ", ";\n\t\t\tposition: sticky !important;\n\t\t\ttop: 0;\n\t\t}\n\n\t\t/* Make the number column header sticky */\n\t\t.sticky > td {\n\t\t\tposition: sticky !important;\n\t\t\ttop: 0;\n\t\t}\n\n\t\t/* add border for position: sticky\n     and work around background-clip: padding-box\n     bug for FF causing box-shadow bug in Chrome */\n\t\t.sticky th,\n\t\t.sticky td {\n\t\t\tbox-shadow:\n\t\t\t\t0px 1px ", ",\n\t\t\t\t0px -0.5px ", ",\n\t\t\t\tinset -1px 0px ", ",\n\t\t\t\t0px -1px ", ";\n\t\t}\n\n\t\t/* this will remove jumpiness caused in Chrome for sticky headers */\n\t\t.fixed + tr {\n\t\t\tmin-height: 0px;\n\t\t}\n\n\t\t/*\n   * We wrap CodeBlock in a grid to prevent it from overflowing the container of the renderer.\n   * See ED-4159.\n   */\n\t\t& .code-block {\n\t\t\tmax-width: 100%;\n\t\t\t/* -ms- properties are necessary until MS supports the latest version of the grid spec */\n\t\t\t/* stylelint-disable value-no-vendor-prefix, declaration-block-no-duplicate-properties */\n\t\t\tdisplay: block;\n\t\t\t/* stylelint-enable */\n\n\t\t\tposition: relative;\n\t\t\tborder-radius: ", ";\n\n\t\t\t/*\n     * The overall renderer has word-wrap: break; which causes issues with\n     * code block line numbers in Safari / iOS.\n     */\n\t\t\tword-wrap: normal;\n\t\t}\n\n\t\t& .MediaGroup,\n\t\t& .code-block {\n\t\t\tmargin-top: ", ";\n\n\t\t\t&:first-child {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\t\t}\n\n\t\t", "\n\n\t\t", "\n\n      ", ";\n\t\t", ";\n\t\t& [data-layout-section] {\n\t\t\tmargin-top: ", ";\n\t\t\t& > div + div {\n\t\t\t\tmargin-left: ", ";\n\t\t\t}\n\n\t\t\t@media screen and (max-width: ", "px) {\n\t\t\t\t& > div + div {\n\t\t\t\t\tmargin-left: 0;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t& .MediaGroup,\n\t\t\t& .code-block {\n\t\t\t\tmargin-top: ", ";\n\n\t\t\t\t&:first-child {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t& li {\n\t\t\t> .code-block {\n\t\t\t\tmargin: ", " 0 0 0;\n\t\t\t}\n\t\t\t> .code-block:first-child {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\n\t\t\t> div:last-of-type.code-block {\n\t\t\t\tmargin-bottom: ", ";\n\t\t\t}\n\t\t}\n\n\t\t&:not([data-node-type='decisionList']) > li,\n      // This prevents https://product-fabric.atlassian.net/browse/ED-20924\n      &:not(.", ") > li {\n\t\t\t", "\n\t\t}\n\t"])), (0, _editorSharedStyles.editorFontSize)(themeProps), "var(--ds-text, ".concat(colors.N800, ")"), _consts.RendererCssClassName.DOCUMENT, fullPageStyles(wrapperProps, themeProps), fullWidthStyles(wrapperProps), _consts.RendererCssClassName.DOCUMENT, _mediaInline.mediaInlineImageStyles, headingAnchorStyle('h1'), headingAnchorStyle('h2'), headingAnchorStyle('h3'), headingAnchorStyle('h4'), headingAnchorStyle('h5'), headingAnchorStyle('h6'), "var(--ds-link, ".concat(colors.B400, ")"), "var(--ds-link, ".concat(colors.B300, ")"), "var(--ds-link-pressed, ".concat(colors.B500, ")"), "var(--ds-text-subtlest, ".concat(colors.N200, ")"), telepointerStyles, _styles.whitespaceSharedStyles, _styles.blockquoteSharedStyles, (0, _styles.headingsSharedStyles)(typography), (0, _styles.ruleSharedStyles)(), (0, _styles.paragraphSharedStyles)(typography), _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.blockMarksSharedStyles, (0, _styles.codeMarkSharedStyles)(), _styles.shadowSharedStyle, _styles.dateSharedStyle, _styles.textColorStyles, (0, _styles.backgroundColorStyles)(), _styles.tasksAndDecisionsStyles, (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') ? (0, _styles.getSmartCardSharedStyles)() : _styles.smartCardSharedStyles, getAnnotationStyles(wrapperProps), "var(--ds-font-family-body, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)", (0, _editorSharedStyles.relativeFontSizeToBase16)(14), "var(--ds-font-weight-regular, 400)", "var(--ds-background-neutral, ".concat(colors.N30A, ")"), "var(--ds-border-radius-100, 3px)", "var(--ds-text, ".concat(colors.N800, ")"), "var(--ds-space-025, 2px)", "var(--ds-space-050, 4px)", "var(--ds-background-danger, ".concat(colors.R50, ")"), "var(--ds-text-danger, ".concat(colors.R500, ")"), "var(--ds-space-300, 24px)", _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, "var(--ds-space-100, 8px)", alignedHeadingAnchorStyle(wrapperProps), _styles.mediaSingleSharedStyle, _consts.RendererCssClassName.DOCUMENT, breakoutWidthStyle(), _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, _ui.shadowObserverClassNames.SHADOW_CONTAINER, _styles.TableSharedCssClassName.TABLE_NODE_WRAPPER, (0, _styles.tableSharedStyle)(), _consts.RendererCssClassName.DOCUMENT, _styles.TableSharedCssClassName.TABLE_CONTAINER, _ui.shadowClassNames.RIGHT_SHADOW, _ui.shadowClassNames.LEFT_SHADOW, _styles.tableMarginTop - 1, _styles.tableMarginTop, _editorSharedStyles.akEditorStickyHeaderZIndex, getShadowOverrides(), (0, _table.isStickyScrollbarEnabled)(appearance) ? stickyScrollbarStyles : '', _ui.shadowObserverClassNames.SENTINEL_LEFT, _ui.shadowObserverClassNames.SENTINEL_RIGHT, _styles.tableMarginTop, (0, _platformFeatureFlags.fg)('platform_editor_renderer_table_header_styles') ? ".".concat(_styles.TableSharedCssClassName.TABLE_NODE_WRAPPER, " > table, .").concat(_styles.TableSharedCssClassName.TABLE_STICKY_WRAPPER, " > table") : 'table', tableSortableColumnStyle(wrapperProps), (0, _platformFeatureFlags.fg)('platform_editor_renderer_table_header_styles') ? ".".concat(_styles.TableSharedCssClassName.TABLE_NODE_WRAPPER, " > table > tbody > tr:first-of-type, .").concat(_styles.TableSharedCssClassName.TABLE_STICKY_WRAPPER, " > table > tbody > tr:first-of-type") : 'table tr:first-of-type', _consts.RendererCssClassName.NUMBER_COLUMN, (0, _platformFeatureFlags.fg)('platform_editor_tables_numbered_column_correction') ? "var(--ds-background-accent-gray-subtlest, #F1F2F4)" : "var(--ds-background-neutral, ".concat(_editorSharedStyles.akEditorTableToolbar, ")"), "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorder, ")"), _editorSharedStyles.akEditorTableNumberColumnWidth, "var(--ds-text-subtlest, ".concat(colors.N200, ")"), (0, _editorSharedStyles.relativeFontSizeToBase16)(14), _consts.RendererCssClassName.NUMBER_COLUMN, _editorSharedStyles.akEditorStickyHeaderZIndex, "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorder, ")"), "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorder, ")"), _editorSharedStyles.akEditorStickyHeaderZIndex, "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorder, ")"), "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorder, ")"), "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableToolbar, ")"), "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableToolbar, ")"), "var(--ds-border-radius-100, 3px)", _editorSharedStyles.blockNodesVerticalMargin, useGridRenderForCodeBlock(useBlockRenderForCodeBlock), (0, _lightWeightCodeBlock.getLightWeightCodeBlockStylesForRootRendererStyleSheet)(), isAdvancedLayoutsOn ? _styles.columnLayoutResponsiveSharedStyle : _styles.columnLayoutSharedStyle, isAdvancedLayoutsOn && _styles.columnLayoutResponsiveRendererStyles, "var(--ds-space-250, 20px)", isAdvancedLayoutsOn ? 0 : "var(--ds-space-400, 32px)", _editorSharedStyles.gridMediumMaxWidth, _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.blockNodesVerticalMargin, _styles.SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, _browser.browser.safari ? _styles.codeBlockInListSafariFix : '');
+    return (0, _react.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n\t\tfont-size: ", "px;\n\t\tline-height: 1.5rem;\n\t\tcolor: ", ";\n\n\t\t.", "::after {\n\t\t\t// we add a clearfix after ak-renderer-document in order to\n\t\t\t// contain internal floats (such as media images that are \"wrap-left\")\n\t\t\t// to just the renderer (and not spill outside of it)\n\t\t\tcontent: '';\n\t\t\tvisibility: hidden;\n\t\t\tdisplay: block;\n\t\t\theight: 0;\n\t\t\tclear: both;\n\t\t}\n\n\t\t", "\n\t\t", "\n\n      .", " {\n\t\t\t", "\n\t\t}\n\n\t\t& h1 {\n\t\t\t", "\n\t\t}\n\n\t\t& h2 {\n\t\t\t", "\n\t\t}\n\n\t\t& h3 {\n\t\t\t", "\n\t\t}\n\n\t\t& h4 {\n\t\t\t", "\n\t\t}\n\n\t\t& h5 {\n\t\t\t", "\n\t\t}\n\n\t\t& h6 {\n\t\t\t", "\n\t\t}\n\n\t\t& span.akActionMark {\n\t\t\tcolor: ", ";\n\t\t\ttext-decoration: none;\n\n\t\t\t&:hover {\n\t\t\t\tcolor: ", ";\n\t\t\t\ttext-decoration: underline;\n\t\t\t}\n\n\t\t\t&:active {\n\t\t\t\tcolor: ", ";\n\t\t\t}\n\t\t}\n\n\t\t& span.akActionMark {\n\t\t\tcursor: pointer;\n\t\t}\n\n\t\t& span[data-placeholder] {\n\t\t\tcolor: ", ";\n\t\t}\n\n\t\t", "\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", "\n\t\t", "\n\n\t\t& .UnknownBlock {\n\t\t\tfont-family: ", ";\n\t\t\tfont-size: ", ";\n\t\t\tfont-weight: ", ";\n\t\t\twhite-space: pre-wrap;\n\t\t\tword-wrap: break-word;\n\t\t}\n\n\t\t& span.date-node {\n\t\t\tbackground: ", ";\n\t\t\tborder-radius: ", ";\n\t\t\tcolor: ", ";\n\t\t\tpadding: ", " ", ";\n\t\t\tmargin: 0 1px;\n\t\t\ttransition: background 0.3s;\n\t\t}\n\n\t\t& span.date-node-highlighted {\n\t\t\tbackground: ", ";\n\t\t\tcolor: ", ";\n\t\t}\n\n\t\t& .renderer-image {\n\t\t\tmax-width: 100%;\n\t\t\tdisplay: block;\n\t\t\tmargin: ", " 0;\n\t\t}\n\n\t\t.", ".rich-media-wrapped + .", ":not(.rich-media-wrapped) {\n\t\t\tclear: both;\n\t\t}\n\n\t\t& .code-block,\n\t\t& blockquote,\n\t\t& hr,\n\t\t& > div > div:not(.rich-media-wrapped),\n\t\t.", ".rich-media-wrapped + .rich-media-wrapped + *:not(.rich-media-wrapped),\n\t\t.", ".rich-media-wrapped + div:not(.rich-media-wrapped),\n\t\t.", ".image-align-start,\n\t\t\t.", ".image-center,\n\t\t\t.", ".image-align-end {\n\t\t\tclear: both;\n\t\t}\n\n\t\t& .rich-media-wrapped {\n\t\t\t& + h1,\n\t\t\t& + h2,\n\t\t\t& + h3,\n\t\t\t& + h4,\n\t\t\t& + h5,\n\t\t\t& + h6 {\n\t\t\t\tmargin-top: ", ";\n\t\t\t}\n\t\t}\n\n\t\t", "\n\t\t/* plugin styles */\n    ", " &\n    div[class^='image-wrap-'] + div[class^='image-wrap-'] {\n\t\t\tmargin-left: 0;\n\t\t\tmargin-right: 0;\n\t\t}\n\n\t\t/* Breakout for tables and extensions */\n\t\t.", " > {\n\t\t\t", "\n\n\t\t\t* .", " {\n\t\t\t\toverflow-x: auto;\n\t\t\t}\n\n\t\t\t& .", ":first-child {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\t\t}\n\n\t\t.", " {\n\t\t\t.", " {\n\t\t\t\tmargin-top: ", ";\n\t\t\t}\n\n\t\t\t.", " {\n\t\t\t\tmargin-left: 50%;\n\t\t\t\ttransform: translateX(-50%);\n\t\t\t}\n\n\t\t\t.", " {\n\t\t\t\toverflow-x: auto;\n\t\t\t}\n\n\t\t\t.", " .", " {\n\t\t\t\tdisplay: flex;\n\t\t\t}\n\t\t}\n\n\t\t", "\n\n\t\t.", " .", " {\n\t\t\tz-index: 0;\n\t\t\ttransition: all 0.1s linear;\n\t\t\tdisplay: flex; /* needed to avoid position: fixed jumpiness in Chrome */\n\n\t\t\t/** Shadow overrides */\n\t\t\t&.", "::after, &.", "::before {\n\t\t\t\ttop: ", "px;\n\t\t\t\theight: calc(100% - ", "px);\n\t\t\t\tz-index: ", ";\n\t\t\t}\n\n\t\t\t", "\n\n\t\t\t", "\n\n\t\t\t&\n          .", ",\n          &\n          .", " {\n\t\t\t\theight: calc(100% - ", "px);\n\t\t\t}\n\n\t\t\t/**\n\t\t\t * A hack for making all the <th /> heights equal in case some have shorter\n\t\t\t * content than others.\n\t\t\t *\n\t\t\t * This is done to make sort buttons fill entire <th />.\n\t\t\t*/\n\t\t\t", " {\n\t\t\t\theight: 1px; /* will be ignored */\n\t\t\t\t", ";\n\t\t\t\tmargin-left: 0;\n\t\t\t\tmargin-right: 0;\n\t\t\t}\n\n\t\t\t", " {\n\t\t\t\theight: 100%;\n\n\t\t\t\ttd,\n\t\t\t\tth {\n\t\t\t\t\tposition: relative;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\ttable[data-number-column='true'] {\n\t\t\t\t.", " {\n\t\t\t\t\tbackground-color: ", ";\n\t\t\t\t\tborder-right: 1px solid\n\t\t\t\t\t\t", ";\n\t\t\t\t\twidth: ", "px;\n\t\t\t\t\ttext-align: center;\n\t\t\t\t\tcolor: ", ";\n\t\t\t\t\tfont-size: ", ";\n\t\t\t\t}\n\n\t\t\t\t.fixed .", " {\n\t\t\t\t\tborder-right: 0px none;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\ttr[data-header-row].fixed {\n\t\t\tposition: fixed !important;\n\t\t\tdisplay: flex;\n\t\t\toverflow: hidden;\n\t\t\tz-index: ", ";\n\n\t\t\tborder-right: 1px solid ", ";\n\t\t\tborder-bottom: 1px solid ", ";\n\n\t\t\t/* this is to compensate for the table border */\n\t\t\ttransform: translateX(-1px);\n\t\t}\n\n\t\t.sticky > th {\n\t\t\tz-index: ", ";\n\t\t\tposition: sticky !important;\n\t\t\ttop: 0;\n\t\t}\n\n\t\t/* Make the number column header sticky */\n\t\t.sticky > td {\n\t\t\tposition: sticky !important;\n\t\t\ttop: 0;\n\t\t}\n\n\t\t/* add border for position: sticky\n     and work around background-clip: padding-box\n     bug for FF causing box-shadow bug in Chrome */\n\t\t.sticky th,\n\t\t.sticky td {\n\t\t\tbox-shadow:\n\t\t\t\t0px 1px ", ",\n\t\t\t\t0px -0.5px ", ",\n\t\t\t\tinset -1px 0px ", ",\n\t\t\t\t0px -1px ", ";\n\t\t}\n\n\t\t/* this will remove jumpiness caused in Chrome for sticky headers */\n\t\t.fixed + tr {\n\t\t\tmin-height: 0px;\n\t\t}\n\n\t\t/*\n   * We wrap CodeBlock in a grid to prevent it from overflowing the container of the renderer.\n   * See ED-4159.\n   */\n\t\t& .code-block {\n\t\t\tmax-width: 100%;\n\t\t\t/* -ms- properties are necessary until MS supports the latest version of the grid spec */\n\t\t\t/* stylelint-disable value-no-vendor-prefix, declaration-block-no-duplicate-properties */\n\t\t\tdisplay: block;\n\t\t\t/* stylelint-enable */\n\n\t\t\tposition: relative;\n\t\t\tborder-radius: ", ";\n\n\t\t\t/*\n     * The overall renderer has word-wrap: break; which causes issues with\n     * code block line numbers in Safari / iOS.\n     */\n\t\t\tword-wrap: normal;\n\t\t}\n\n\t\t& .MediaGroup,\n\t\t& .code-block {\n\t\t\tmargin-top: ", ";\n\n\t\t\t&:first-child {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\t\t}\n\n\t\t", "\n\n\t\t", "\n\n      ", ";\n\t\t", ";\n\t\t& [data-layout-section] {\n\t\t\tmargin-top: ", ";\n\t\t\t& > div + div {\n\t\t\t\tmargin-left: ", ";\n\t\t\t}\n\n\t\t\t@media screen and (max-width: ", "px) {\n\t\t\t\t& > div + div {\n\t\t\t\t\tmargin-left: 0;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t& .MediaGroup,\n\t\t\t& .code-block {\n\t\t\t\tmargin-top: ", ";\n\n\t\t\t\t&:first-child {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t& li {\n\t\t\t> .code-block {\n\t\t\t\tmargin: ", " 0 0 0;\n\t\t\t}\n\t\t\t> .code-block:first-child {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\n\t\t\t> div:last-of-type.code-block {\n\t\t\t\tmargin-bottom: ", ";\n\t\t\t}\n\t\t}\n\n\t\t&:not([data-node-type='decisionList']) > li,\n      // This prevents https://product-fabric.atlassian.net/browse/ED-20924\n      &:not(.", ") > li {\n\t\t\t", "\n\t\t}\n\t"])), (0, _editorSharedStyles.editorFontSize)(themeProps), "var(--ds-text, ".concat(colors.N800, ")"), _consts.RendererCssClassName.DOCUMENT, fullPageStyles(wrapperProps, themeProps), fullWidthStyles(wrapperProps), _consts.RendererCssClassName.DOCUMENT, _mediaInline.mediaInlineImageStyles, headingAnchorStyle('h1'), headingAnchorStyle('h2'), headingAnchorStyle('h3'), headingAnchorStyle('h4'), headingAnchorStyle('h5'), headingAnchorStyle('h6'), "var(--ds-link, ".concat(colors.B400, ")"), "var(--ds-link, ".concat(colors.B300, ")"), "var(--ds-link-pressed, ".concat(colors.B500, ")"), "var(--ds-text-subtlest, ".concat(colors.N200, ")"), telepointerStyles, _styles.whitespaceSharedStyles, _styles.blockquoteSharedStyles, (0, _styles.headingsSharedStyles)(typography), (0, _styles.ruleSharedStyles)(), (0, _styles.paragraphSharedStyles)(typography), _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.blockMarksSharedStyles, (0, _styles.codeMarkSharedStyles)(), _styles.shadowSharedStyle, _styles.dateSharedStyle, _styles.textColorStyles, (0, _styles.backgroundColorStyles)(), _styles.tasksAndDecisionsStyles, (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') ? (0, _styles.getSmartCardSharedStyles)() : _styles.smartCardSharedStyles, getAnnotationStyles(wrapperProps), "var(--ds-font-family-body, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)", (0, _editorSharedStyles.relativeFontSizeToBase16)(14), "var(--ds-font-weight-regular, 400)", "var(--ds-background-neutral, ".concat(colors.N30A, ")"), "var(--ds-border-radius-100, 3px)", "var(--ds-text, ".concat(colors.N800, ")"), "var(--ds-space-025, 2px)", "var(--ds-space-050, 4px)", "var(--ds-background-danger, ".concat(colors.R50, ")"), "var(--ds-text-danger, ".concat(colors.R500, ")"), "var(--ds-space-300, 24px)", _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, "var(--ds-space-100, 8px)", alignedHeadingAnchorStyle(wrapperProps), _styles.mediaSingleSharedStyle, _consts.RendererCssClassName.DOCUMENT, breakoutWidthStyle(), _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, _ui.shadowObserverClassNames.SHADOW_CONTAINER, _styles.TableSharedCssClassName.TABLE_NODE_WRAPPER, (0, _styles.tableSharedStyle)(), _consts.RendererCssClassName.DOCUMENT, _styles.TableSharedCssClassName.TABLE_CONTAINER, _ui.shadowClassNames.RIGHT_SHADOW, _ui.shadowClassNames.LEFT_SHADOW, _styles.tableMarginTop - 1, _styles.tableMarginTop, _editorSharedStyles.akEditorStickyHeaderZIndex, getShadowOverrides(), (0, _table.isStickyScrollbarEnabled)(appearance) ? stickyScrollbarStyles : '', _ui.shadowObserverClassNames.SENTINEL_LEFT, _ui.shadowObserverClassNames.SENTINEL_RIGHT, _styles.tableMarginTop, (0, _platformFeatureFlags.fg)('platform_editor_renderer_table_header_styles') ? ".".concat(_styles.TableSharedCssClassName.TABLE_NODE_WRAPPER, " > table, .").concat(_styles.TableSharedCssClassName.TABLE_STICKY_WRAPPER, " > table") : 'table', tableSortableColumnStyle(wrapperProps), (0, _platformFeatureFlags.fg)('platform_editor_renderer_table_header_styles') ? ".".concat(_styles.TableSharedCssClassName.TABLE_NODE_WRAPPER, " > table > tbody > tr:first-of-type, .").concat(_styles.TableSharedCssClassName.TABLE_STICKY_WRAPPER, " > table > tbody > tr:first-of-type") : 'table tr:first-of-type', _consts.RendererCssClassName.NUMBER_COLUMN, (0, _platformFeatureFlags.fg)('platform_editor_tables_numbered_column_correction') ? "var(--ds-background-accent-gray-subtlest, #F1F2F4)" : "var(--ds-background-neutral, ".concat(_editorSharedStyles.akEditorTableToolbar, ")"), "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorder, ")"), _editorSharedStyles.akEditorTableNumberColumnWidth, "var(--ds-text-subtlest, ".concat(colors.N200, ")"), (0, _editorSharedStyles.relativeFontSizeToBase16)(14), _consts.RendererCssClassName.NUMBER_COLUMN, _editorSharedStyles.akEditorStickyHeaderZIndex, "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorder, ")"), "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorder, ")"), _editorSharedStyles.akEditorStickyHeaderZIndex, "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorder, ")"), "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorder, ")"), "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableToolbar, ")"), "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableToolbar, ")"), "var(--ds-border-radius-100, 3px)", _editorSharedStyles.blockNodesVerticalMargin, useGridRenderForCodeBlock(useBlockRenderForCodeBlock), (0, _lightWeightCodeBlock.getLightWeightCodeBlockStylesForRootRendererStyleSheet)(), isAdvancedLayoutsOn ? _styles.columnLayoutResponsiveSharedStyle : _styles.columnLayoutSharedStyle, isAdvancedLayoutsOn && _styles.columnLayoutResponsiveRendererStyles, "var(--ds-space-250, 20px)", isAdvancedLayoutsOn ? 0 : "var(--ds-space-400, 32px)", _editorSharedStyles.gridMediumMaxWidth, _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.blockNodesVerticalMargin, _styles.SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, _browser.browser.safari ? _styles.codeBlockInListSafariFix : '');
   };
 };
 var useGridRenderForCodeBlock = function useGridRenderForCodeBlock(codeBlockRenderAsBlock) {

package/dist/es2019/react/nodes/multiBodiedExtension.js

@@ -16,7 +16,7 @@ import { useMultiBodiedExtensionContext } from './multiBodiedExtension/context';
 const containerStyles = css({
   // Remove top margin if MBE is the first on the doc/page (MBE can only be on the first level)
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-nested-selectors
-  '&:first-of-type > .ak-renderer-extension': {
+  '&:first-child > .ak-renderer-extension': {
     marginTop: 0
   }
 });
@@ -127,6 +127,7 @@ const MultiBodiedExtension = props => {
   return jsx("section", {
     css: [containerStyles, containerActiveFrameStyles],
     "data-testid": "multiBodiedExtension--container",
+    "data-multiBodiedExtension-container": true,
     "data-active-child-index": activeChildIndex,
     "data-layout": layout
   }, jsx(WidthConsumer, null, ({

package/dist/es2019/ui/Renderer/RendererStyleContainer.js

@@ -8,7 +8,6 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
 import { css, jsx } from '@emotion/react';
 import { B300, B400, B500, N20, N200, N30A, N40A, N60A, N800, R50, R500, Y300, Y75 } from '@atlaskit/theme/colors';
-import { getGlobalTheme } from '@atlaskit/tokens';
 import { FullPagePadding, rendererStyles } from './style';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { RendererCssClassName } from '../../consts';
@@ -1132,7 +1131,6 @@ const tableSharedStyle = css({
     'th td': {
       backgroundColor: "var(--ds-background-neutral-subtle, white)"
     },
-    // platform_editor_nested_tables_renderer_styles has already been lunched, so assume it's on
     '> tbody > tr > td': {
       backgroundColor: "var(--ds-surface, #FFFFFF)"
     },
@@ -1492,8 +1490,6 @@ const rendererTableColumnStyles = css({
     }
   }
 });
-
-// assume FG platform_editor_nested_tables_renderer_styles and platform_editor_renderer_table_header_styles on
 const rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks = css({
   [`.${RendererCssClassName.DOCUMENT} .${TableSharedCssClassName.TABLE_CONTAINER}`]: {
     [`.${TableSharedCssClassName.TABLE_NODE_WRAPPER} > table, .${TableSharedCssClassName.TABLE_STICKY_WRAPPER} > table`]: {
@@ -1747,9 +1743,6 @@ export const RendererStyleContainer = props => {
     testId
   } = props;
   const isAdvancedLayoutsOn = editorExperiment('advanced_layouts', true);
-  const {
-    typography
-  } = getGlobalTheme();
   if (fg('platform_editor_emotion_refactor_renderer')) {
     return (
       // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
@@ -1759,13 +1752,13 @@ export const RendererStyleContainer = props => {
         onMouseDown: onMouseDown,
         style: {
           '--ak-renderer-base-font-size': `${getBaseFontSize(appearance)}px`,
-          '--ak-renderer-editor-font-heading-h1': `${editorUGCToken('editor.font.heading.h1', typography)}`,
-          '--ak-renderer-editor-font-heading-h2': `${editorUGCToken('editor.font.heading.h2', typography)}`,
-          '--ak-renderer-editor-font-heading-h3': `${editorUGCToken('editor.font.heading.h3', typography)}`,
-          '--ak-renderer-editor-font-heading-h4': `${editorUGCToken('editor.font.heading.h4', typography)}`,
-          '--ak-renderer-editor-font-heading-h5': `${editorUGCToken('editor.font.heading.h5', typography)}`,
-          '--ak-renderer-editor-font-heading-h6': `${editorUGCToken('editor.font.heading.h6', typography)}`,
-          '--ak-renderer-editor-font-normal-text': `${editorUGCToken('editor.font.body', typography)}`
+          '--ak-renderer-editor-font-heading-h1': `${editorUGCToken('editor.font.heading.h1')}`,
+          '--ak-renderer-editor-font-heading-h2': `${editorUGCToken('editor.font.heading.h2')}`,
+          '--ak-renderer-editor-font-heading-h3': `${editorUGCToken('editor.font.heading.h3')}`,
+          '--ak-renderer-editor-font-heading-h4': `${editorUGCToken('editor.font.heading.h4')}`,
+          '--ak-renderer-editor-font-heading-h5': `${editorUGCToken('editor.font.heading.h5')}`,
+          '--ak-renderer-editor-font-heading-h6': `${editorUGCToken('editor.font.heading.h6')}`,
+          '--ak-renderer-editor-font-normal-text': `${editorUGCToken('editor.font.body')}`
         },
         css: [baseStyles, appearance === 'full-page' && rendererFullPageStyles, appearance === 'full-width' && rendererFullWidthStyles, !isTableResizingEnabled(appearance) && rendererFullWidthStylesForTableResizing, telepointerStyles, whitespaceSharedStyles, blockquoteSharedStyles, fg('platform_editor_typography_ugc') ? headingsSharedStylesWithEditorUGC : headingsSharedStyles, headingWithAlignmentStyles, ruleSharedStyles, fg('platform_editor_typography_ugc') ? paragraphSharedStylesWithEditorUGC : paragraphSharedStyles, listsSharedStyles, browser.gecko && listsSharedStylesForGekko, indentationSharedStyles, blockMarksSharedStyles, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles, tasksAndDecisionsStyles, smartCardStyles, fg('platform-linking-visual-refresh-v1') && smartCardStylesAvatarFix,
         // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix

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

@@ -48,7 +48,7 @@ import { removeEmptySpaceAroundContent } from './rendererHelper';
 export const NORMAL_SEVERITY_THRESHOLD = 2000;
 export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "114.5.2";
+const packageVersion = "114.5.3";
 const setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size',

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

@@ -285,67 +285,41 @@ const tableSortableColumnStyle = ({
 				${headingsCss}
 			}
 
-			${fg('platform_editor_nested_tables_renderer_styles') ? css`
-						// New styles
-						> .${RendererCssClassName.SORTABLE_COLUMN}
-							> .${RendererCssClassName.SORTABLE_COLUMN_ICON_WRAPPER} {
-							margin: 0;
-
-							.${SORTABLE_COLUMN_ICON_CLASSNAME} {
-								opacity: 1;
-								transition: opacity 0.2s ease-in-out;
-							}
-						}
-
-						> .${RendererCssClassName.SORTABLE_COLUMN}
-							> .${RendererCssClassName.SORTABLE_COLUMN_NO_ORDER} {
-							.${SORTABLE_COLUMN_ICON_CLASSNAME} {
-								opacity: 0;
-								&:focus {
-									opacity: 1;
-								}
-							}
-						}
-
-						&:hover:not(
-								:has(
-										.${RendererCssClassName.SORTABLE_COLUMN_WRAPPER}
-											.${RendererCssClassName.SORTABLE_COLUMN}:hover
-									)
-							)
-							> .${RendererCssClassName.SORTABLE_COLUMN}
-							> .${RendererCssClassName.SORTABLE_COLUMN_NO_ORDER} {
-							.${SORTABLE_COLUMN_ICON_CLASSNAME} {
-								opacity: 1;
-							}
-						}
-					` : css`
-						// old styles
-						.${RendererCssClassName.SORTABLE_COLUMN_ICON_WRAPPER} {
-							margin: 0;
-							.${SORTABLE_COLUMN_ICON_CLASSNAME} {
-								opacity: 1;
-								transition: opacity 0.2s ease-in-out;
-							}
-						}
+			${css`
+				// New styles
+				> .${RendererCssClassName.SORTABLE_COLUMN}
+					> .${RendererCssClassName.SORTABLE_COLUMN_ICON_WRAPPER} {
+					margin: 0;
+
+					.${SORTABLE_COLUMN_ICON_CLASSNAME} {
+						opacity: 1;
+						transition: opacity 0.2s ease-in-out;
+					}
+				}
 
-						.${RendererCssClassName.SORTABLE_COLUMN_NO_ORDER} {
-							.${SORTABLE_COLUMN_ICON_CLASSNAME} {
-								opacity: 0;
-								&:focus {
-									opacity: 1;
-								}
-							}
+				> .${RendererCssClassName.SORTABLE_COLUMN}
+					> .${RendererCssClassName.SORTABLE_COLUMN_NO_ORDER} {
+					.${SORTABLE_COLUMN_ICON_CLASSNAME} {
+						opacity: 0;
+						&:focus {
+							opacity: 1;
 						}
+					}
+				}
 
-						&:hover {
-							.${RendererCssClassName.SORTABLE_COLUMN_NO_ORDER} {
-								.${SORTABLE_COLUMN_ICON_CLASSNAME} {
-									opacity: 1;
-								}
-							}
-						}
-					`}
+				&:hover:not(
+						:has(
+							.${RendererCssClassName.SORTABLE_COLUMN_WRAPPER}
+								.${RendererCssClassName.SORTABLE_COLUMN}:hover
+						)
+					)
+					> .${RendererCssClassName.SORTABLE_COLUMN}
+					> .${RendererCssClassName.SORTABLE_COLUMN_NO_ORDER} {
+					.${SORTABLE_COLUMN_ICON_CLASSNAME} {
+						opacity: 1;
+					}
+				}
+			`}
 		}
 	`;
 };

package/dist/esm/react/nodes/multiBodiedExtension.js

@@ -19,7 +19,7 @@ import { useMultiBodiedExtensionContext } from './multiBodiedExtension/context';
 var containerStyles = css({
   // Remove top margin if MBE is the first on the doc/page (MBE can only be on the first level)
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-nested-selectors
-  '&:first-of-type > .ak-renderer-extension': {
+  '&:first-child > .ak-renderer-extension': {
     marginTop: 0
   }
 });
@@ -125,6 +125,7 @@ var MultiBodiedExtension = function MultiBodiedExtension(props) {
   return jsx("section", {
     css: [containerStyles, containerActiveFrameStyles],
     "data-testid": "multiBodiedExtension--container",
+    "data-multiBodiedExtension-container": true,
     "data-active-child-index": activeChildIndex,
     "data-layout": layout
   }, jsx(WidthConsumer, null, function (_ref4) {

package/dist/esm/ui/Renderer/RendererStyleContainer.js

@@ -10,7 +10,6 @@ var _css, _css3;
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
 import { css, jsx } from '@emotion/react';
 import { B300, B400, B500, N20, N200, N30A, N40A, N60A, N800, R50, R500, Y300, Y75 } from '@atlaskit/theme/colors';
-import { getGlobalTheme } from '@atlaskit/tokens';
 import { FullPagePadding, rendererStyles } from './style';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { RendererCssClassName } from '../../consts';
@@ -948,7 +947,6 @@ var tableSharedStyle = css(_defineProperty(_defineProperty(_defineProperty(_defi
   'th td': {
     backgroundColor: "var(--ds-background-neutral-subtle, white)"
   },
-  // platform_editor_nested_tables_renderer_styles has already been lunched, so assume it's on
   '> tbody > tr > td': {
     backgroundColor: "var(--ds-surface, #FFFFFF)"
   },
@@ -1144,8 +1142,6 @@ var rendererTableColumnStyles = css(_defineProperty({}, ".".concat(RendererCssCl
     borderRight: "0px none"
   })
 }));
-
-// assume FG platform_editor_nested_tables_renderer_styles and platform_editor_renderer_table_header_styles on
 var rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks = css(_defineProperty({}, ".".concat(RendererCssClassName.DOCUMENT, " .").concat(TableSharedCssClassName.TABLE_CONTAINER), _defineProperty({}, ".".concat(TableSharedCssClassName.TABLE_NODE_WRAPPER, " > table, .").concat(TableSharedCssClassName.TABLE_STICKY_WRAPPER, " > table"), _defineProperty({}, ".".concat(RendererCssClassName.SORTABLE_COLUMN_WRAPPER), _defineProperty({}, ".".concat(RendererCssClassName.SORTABLE_COLUMN), _defineProperty(_defineProperty({}, ".".concat(HeadingAnchorWrapperClassName), {
   position: 'unset'
 }), '>', {
@@ -1360,8 +1356,6 @@ export var RendererStyleContainer = function RendererStyleContainer(props) {
     innerRef = props.innerRef,
     testId = props.testId;
   var isAdvancedLayoutsOn = editorExperiment('advanced_layouts', true);
-  var _getGlobalTheme = getGlobalTheme(),
-    typography = _getGlobalTheme.typography;
   if (fg('platform_editor_emotion_refactor_renderer')) {
     return (
       // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
@@ -1371,13 +1365,13 @@ export var RendererStyleContainer = function RendererStyleContainer(props) {
         onMouseDown: onMouseDown,
         style: {
           '--ak-renderer-base-font-size': "".concat(getBaseFontSize(appearance), "px"),
-          '--ak-renderer-editor-font-heading-h1': "".concat(editorUGCToken('editor.font.heading.h1', typography)),
-          '--ak-renderer-editor-font-heading-h2': "".concat(editorUGCToken('editor.font.heading.h2', typography)),
-          '--ak-renderer-editor-font-heading-h3': "".concat(editorUGCToken('editor.font.heading.h3', typography)),
-          '--ak-renderer-editor-font-heading-h4': "".concat(editorUGCToken('editor.font.heading.h4', typography)),
-          '--ak-renderer-editor-font-heading-h5': "".concat(editorUGCToken('editor.font.heading.h5', typography)),
-          '--ak-renderer-editor-font-heading-h6': "".concat(editorUGCToken('editor.font.heading.h6', typography)),
-          '--ak-renderer-editor-font-normal-text': "".concat(editorUGCToken('editor.font.body', typography))
+          '--ak-renderer-editor-font-heading-h1': "".concat(editorUGCToken('editor.font.heading.h1')),
+          '--ak-renderer-editor-font-heading-h2': "".concat(editorUGCToken('editor.font.heading.h2')),
+          '--ak-renderer-editor-font-heading-h3': "".concat(editorUGCToken('editor.font.heading.h3')),
+          '--ak-renderer-editor-font-heading-h4': "".concat(editorUGCToken('editor.font.heading.h4')),
+          '--ak-renderer-editor-font-heading-h5': "".concat(editorUGCToken('editor.font.heading.h5')),
+          '--ak-renderer-editor-font-heading-h6': "".concat(editorUGCToken('editor.font.heading.h6')),
+          '--ak-renderer-editor-font-normal-text': "".concat(editorUGCToken('editor.font.body'))
         },
         css: [baseStyles, appearance === 'full-page' && rendererFullPageStyles, appearance === 'full-width' && rendererFullWidthStyles, !isTableResizingEnabled(appearance) && rendererFullWidthStylesForTableResizing, telepointerStyles, whitespaceSharedStyles, blockquoteSharedStyles, fg('platform_editor_typography_ugc') ? headingsSharedStylesWithEditorUGC : headingsSharedStyles, headingWithAlignmentStyles, ruleSharedStyles, fg('platform_editor_typography_ugc') ? paragraphSharedStylesWithEditorUGC : paragraphSharedStyles, listsSharedStyles, browser.gecko && listsSharedStylesForGekko, indentationSharedStyles, blockMarksSharedStyles, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles, tasksAndDecisionsStyles, smartCardStyles, fg('platform-linking-visual-refresh-v1') && smartCardStylesAvatarFix,
         // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix

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

@@ -57,7 +57,7 @@ import { removeEmptySpaceAroundContent } from './rendererHelper';
 export var NORMAL_SEVERITY_THRESHOLD = 2000;
 export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "114.5.2";
+var packageVersion = "114.5.3";
 var setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size',

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

@@ -1,5 +1,5 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
 /* eslint-disable @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation */
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
@@ -115,7 +115,7 @@ var tableSortableColumnStyle = function tableSortableColumnStyle(_ref2) {
   if (allowNestedHeaderLinks) {
     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(HeadingAnchorWrapperClassName, " {\n        position: unset;\n      }\n      > {\n        h1, h2, h3, h4, h5, h6 {\n          margin-right: 30px;\n        }\n      }\n    ");
   }
-  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n\t\t.", " {\n\t\t\tpadding: 0;\n\n\t\t\t.", " {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\tpadding: ", "px;\n\t\t\t\tborder-width: 1.5px;\n\t\t\t\tborder-style: solid;\n\t\t\t\tborder-color: transparent;\n\n\t\t\t\t> *:first-child {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\n\t\t\t\t> .ProseMirror-gapcursor:first-child + *,\n\t\t\t\t> style:first-child + .ProseMirror-gapcursor + * {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\n\t\t\t\t> .ProseMirror-gapcursor:first-child + span + *,\n\t\t\t\t> style:first-child + .ProseMirror-gapcursor + span + * {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\n\t\t\t\t@supports selector(:focus-visible) {\n\t\t\t\t\t&:focus {\n\t\t\t\t\t\toutline: unset;\n\t\t\t\t\t}\n\t\t\t\t\t&:focus-visible {\n\t\t\t\t\t\tborder-color: ", ";\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t", "\n\t\t\t}\n\n\t\t\t", "\n\t\t}\n\t"])), RendererCssClassName.SORTABLE_COLUMN_WRAPPER, RendererCssClassName.SORTABLE_COLUMN, tableCellPadding, "var(--ds-border-focused, ".concat(colors.B300, ")"), headingsCss, fg('platform_editor_nested_tables_renderer_styles') ? css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n\t\t\t\t\t\t// New styles\n\t\t\t\t\t\t> .", "\n\t\t\t\t\t\t\t> .", " {\n\t\t\t\t\t\t\tmargin: 0;\n\n\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\t\ttransition: opacity 0.2s ease-in-out;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t> .", "\n\t\t\t\t\t\t\t> .", " {\n\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\topacity: 0;\n\t\t\t\t\t\t\t\t&:focus {\n\t\t\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t&:hover:not(\n\t\t\t\t\t\t\t\t:has(\n\t\t\t\t\t\t\t\t\t\t.", "\n\t\t\t\t\t\t\t\t\t\t\t.", ":hover\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t> .", "\n\t\t\t\t\t\t\t> .", " {\n\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t"])), RendererCssClassName.SORTABLE_COLUMN, RendererCssClassName.SORTABLE_COLUMN_ICON_WRAPPER, SORTABLE_COLUMN_ICON_CLASSNAME, RendererCssClassName.SORTABLE_COLUMN, RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, SORTABLE_COLUMN_ICON_CLASSNAME, RendererCssClassName.SORTABLE_COLUMN_WRAPPER, RendererCssClassName.SORTABLE_COLUMN, RendererCssClassName.SORTABLE_COLUMN, RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, SORTABLE_COLUMN_ICON_CLASSNAME) : css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n\t\t\t\t\t\t// old styles\n\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\tmargin: 0;\n\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\t\ttransition: opacity 0.2s ease-in-out;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\topacity: 0;\n\t\t\t\t\t\t\t\t&:focus {\n\t\t\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t&:hover {\n\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t"])), RendererCssClassName.SORTABLE_COLUMN_ICON_WRAPPER, SORTABLE_COLUMN_ICON_CLASSNAME, RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, SORTABLE_COLUMN_ICON_CLASSNAME, RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, SORTABLE_COLUMN_ICON_CLASSNAME));
+  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n\t\t.", " {\n\t\t\tpadding: 0;\n\n\t\t\t.", " {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\tpadding: ", "px;\n\t\t\t\tborder-width: 1.5px;\n\t\t\t\tborder-style: solid;\n\t\t\t\tborder-color: transparent;\n\n\t\t\t\t> *:first-child {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\n\t\t\t\t> .ProseMirror-gapcursor:first-child + *,\n\t\t\t\t> style:first-child + .ProseMirror-gapcursor + * {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\n\t\t\t\t> .ProseMirror-gapcursor:first-child + span + *,\n\t\t\t\t> style:first-child + .ProseMirror-gapcursor + span + * {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\n\t\t\t\t@supports selector(:focus-visible) {\n\t\t\t\t\t&:focus {\n\t\t\t\t\t\toutline: unset;\n\t\t\t\t\t}\n\t\t\t\t\t&:focus-visible {\n\t\t\t\t\t\tborder-color: ", ";\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t", "\n\t\t\t}\n\n\t\t\t", "\n\t\t}\n\t"])), RendererCssClassName.SORTABLE_COLUMN_WRAPPER, RendererCssClassName.SORTABLE_COLUMN, tableCellPadding, "var(--ds-border-focused, ".concat(colors.B300, ")"), headingsCss, css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n\t\t\t\t// New styles\n\t\t\t\t> .", "\n\t\t\t\t\t> .", " {\n\t\t\t\t\tmargin: 0;\n\n\t\t\t\t\t.", " {\n\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\ttransition: opacity 0.2s ease-in-out;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t> .", "\n\t\t\t\t\t> .", " {\n\t\t\t\t\t.", " {\n\t\t\t\t\t\topacity: 0;\n\t\t\t\t\t\t&:focus {\n\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t&:hover:not(\n\t\t\t\t\t\t:has(\n\t\t\t\t\t\t\t.", "\n\t\t\t\t\t\t\t\t.", ":hover\n\t\t\t\t\t\t)\n\t\t\t\t\t)\n\t\t\t\t\t> .", "\n\t\t\t\t\t> .", " {\n\t\t\t\t\t.", " {\n\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t"])), RendererCssClassName.SORTABLE_COLUMN, RendererCssClassName.SORTABLE_COLUMN_ICON_WRAPPER, SORTABLE_COLUMN_ICON_CLASSNAME, RendererCssClassName.SORTABLE_COLUMN, RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, SORTABLE_COLUMN_ICON_CLASSNAME, RendererCssClassName.SORTABLE_COLUMN_WRAPPER, RendererCssClassName.SORTABLE_COLUMN, RendererCssClassName.SORTABLE_COLUMN, RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, SORTABLE_COLUMN_ICON_CLASSNAME));
 };
 var fullPageStyles = function fullPageStyles(_ref3, _ref4) {
   var appearance = _ref3.appearance;
@@ -123,20 +123,20 @@ var fullPageStyles = function fullPageStyles(_ref3, _ref4) {
   if (appearance !== 'full-page') {
     return '';
   }
-  return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n\t\tmax-width: ", ";\n\t\tmargin: 0 auto;\n\t\tpadding: 0 ", "px;\n\t"])), theme && theme.layoutMaxWidth ? "".concat(theme.layoutMaxWidth, "px") : 'none', appearance === 'full-page' ? FullPagePadding : 0);
+  return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n\t\tmax-width: ", ";\n\t\tmargin: 0 auto;\n\t\tpadding: 0 ", "px;\n\t"])), theme && theme.layoutMaxWidth ? "".concat(theme.layoutMaxWidth, "px") : 'none', appearance === 'full-page' ? FullPagePadding : 0);
 };
 var fullWidthStyles = function fullWidthStyles(_ref5) {
   var appearance = _ref5.appearance;
   if (appearance !== 'full-width') {
     return '';
   }
-  return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n\t\tmax-width: ", "px;\n\t\tmargin: 0 auto;\n\n\t\t/* don't override if the breakout mark has width attribute defined */\n\t\t.fabric-editor-breakout-mark:not([data-has-width='true']),\n\t\t.ak-renderer-extension {\n\t\t\twidth: 100% !important;\n\t\t}\n\n\t\t", "\n\t"])), akEditorFullWidthLayoutWidth, isTableResizingEnabled(appearance) ? '' : "\n      .pm-table-container {\n        width: 100% !important;\n      }\n    ");
+  return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n\t\tmax-width: ", "px;\n\t\tmargin: 0 auto;\n\n\t\t/* don't override if the breakout mark has width attribute defined */\n\t\t.fabric-editor-breakout-mark:not([data-has-width='true']),\n\t\t.ak-renderer-extension {\n\t\t\twidth: 100% !important;\n\t\t}\n\n\t\t", "\n\t"])), akEditorFullWidthLayoutWidth, isTableResizingEnabled(appearance) ? '' : "\n      .pm-table-container {\n        width: 100% !important;\n      }\n    ");
 };
 var breakoutWidthStyle = function breakoutWidthStyle() {
-  return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n\t\t*:not([data-mark-type='fragment']) .", " {\n\t\t\t// Ignored via go/ees007\n\t\t\t// eslint-disable-next-line @atlaskit/editor/enforce-todo-comment-format\n\t\t\t// TODO - improve inline style logic on table container so important styles aren't required here\n\t\t\twidth: 100% !important;\n\t\t\tleft: 0 !important;\n\t\t}\n\n\t\t[data-mark-type='fragment'] * .", " {\n\t\t\t// Ignored via go/ees007\n\t\t\t// eslint-disable-next-line @atlaskit/editor/enforce-todo-comment-format\n\t\t\t// TODO - improve inline style logic on table container so important styles aren't required here\n\t\t\twidth: 100% !important;\n\t\t\tleft: 0 !important;\n\t\t}\n\t"])), TableSharedCssClassName.TABLE_CONTAINER, TableSharedCssClassName.TABLE_CONTAINER);
+  return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n\t\t*:not([data-mark-type='fragment']) .", " {\n\t\t\t// Ignored via go/ees007\n\t\t\t// eslint-disable-next-line @atlaskit/editor/enforce-todo-comment-format\n\t\t\t// TODO - improve inline style logic on table container so important styles aren't required here\n\t\t\twidth: 100% !important;\n\t\t\tleft: 0 !important;\n\t\t}\n\n\t\t[data-mark-type='fragment'] * .", " {\n\t\t\t// Ignored via go/ees007\n\t\t\t// eslint-disable-next-line @atlaskit/editor/enforce-todo-comment-format\n\t\t\t// TODO - improve inline style logic on table container so important styles aren't required here\n\t\t\twidth: 100% !important;\n\t\t\tleft: 0 !important;\n\t\t}\n\t"])), TableSharedCssClassName.TABLE_CONTAINER, TableSharedCssClassName.TABLE_CONTAINER);
 };
 var getShadowOverrides = function getShadowOverrides() {
-  return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n\t\t/** Shadow overrides */\n\t\t&.", "::after, &.", "::before {\n\t\t\twidth: ", "px;\n\t\t\tbackground: linear-gradient(\n\t\t\t\t\tto left,\n\t\t\t\t\ttransparent 0,\n\t\t\t\t\t", " 140%\n\t\t\t\t),\n\t\t\t\tlinear-gradient(\n\t\t\t\t\tto right,\n\t\t\t\t\t", " 0px,\n\t\t\t\t\ttransparent 1px\n\t\t\t\t);\n\t\t}\n\n\t\t&.", "::after {\n\t\t\tbackground: linear-gradient(\n\t\t\t\t\tto right,\n\t\t\t\t\ttransparent 0,\n\t\t\t\t\t", " 140%\n\t\t\t\t),\n\t\t\t\tlinear-gradient(\n\t\t\t\t\tto left,\n\t\t\t\t\t", " 0px,\n\t\t\t\t\ttransparent 1px\n\t\t\t\t);\n\t\t\tright: 0px;\n\t\t}\n\t"])), shadowClassNames.RIGHT_SHADOW, shadowClassNames.LEFT_SHADOW, tableShadowWidth, "var(--ds-shadow-overflow-spread, ".concat(N40A, ")"), "var(--ds-shadow-overflow-perimeter, transparent)", shadowClassNames.RIGHT_SHADOW, "var(--ds-shadow-overflow-spread, ".concat(N40A, ")"), "var(--ds-shadow-overflow-perimeter, transparent)");
+  return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n\t\t/** Shadow overrides */\n\t\t&.", "::after, &.", "::before {\n\t\t\twidth: ", "px;\n\t\t\tbackground: linear-gradient(\n\t\t\t\t\tto left,\n\t\t\t\t\ttransparent 0,\n\t\t\t\t\t", " 140%\n\t\t\t\t),\n\t\t\t\tlinear-gradient(\n\t\t\t\t\tto right,\n\t\t\t\t\t", " 0px,\n\t\t\t\t\ttransparent 1px\n\t\t\t\t);\n\t\t}\n\n\t\t&.", "::after {\n\t\t\tbackground: linear-gradient(\n\t\t\t\t\tto right,\n\t\t\t\t\ttransparent 0,\n\t\t\t\t\t", " 140%\n\t\t\t\t),\n\t\t\t\tlinear-gradient(\n\t\t\t\t\tto left,\n\t\t\t\t\t", " 0px,\n\t\t\t\t\ttransparent 1px\n\t\t\t\t);\n\t\t\tright: 0px;\n\t\t}\n\t"])), shadowClassNames.RIGHT_SHADOW, shadowClassNames.LEFT_SHADOW, tableShadowWidth, "var(--ds-shadow-overflow-spread, ".concat(N40A, ")"), "var(--ds-shadow-overflow-perimeter, transparent)", shadowClassNames.RIGHT_SHADOW, "var(--ds-shadow-overflow-spread, ".concat(N40A, ")"), "var(--ds-shadow-overflow-perimeter, transparent)");
 };
 function getAnnotationStyles(_ref6) {
   var allowAnnotations = _ref6.allowAnnotations;
@@ -193,7 +193,7 @@ export var rendererStyles = function rendererStyles(wrapperProps) {
     var isAdvancedLayoutsOn = editorExperiment('advanced_layouts', true);
 
     // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/design-system/no-css-tagged-template-expression
-    return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n\t\tfont-size: ", "px;\n\t\tline-height: 1.5rem;\n\t\tcolor: ", ";\n\n\t\t.", "::after {\n\t\t\t// we add a clearfix after ak-renderer-document in order to\n\t\t\t// contain internal floats (such as media images that are \"wrap-left\")\n\t\t\t// to just the renderer (and not spill outside of it)\n\t\t\tcontent: '';\n\t\t\tvisibility: hidden;\n\t\t\tdisplay: block;\n\t\t\theight: 0;\n\t\t\tclear: both;\n\t\t}\n\n\t\t", "\n\t\t", "\n\n      .", " {\n\t\t\t", "\n\t\t}\n\n\t\t& h1 {\n\t\t\t", "\n\t\t}\n\n\t\t& h2 {\n\t\t\t", "\n\t\t}\n\n\t\t& h3 {\n\t\t\t", "\n\t\t}\n\n\t\t& h4 {\n\t\t\t", "\n\t\t}\n\n\t\t& h5 {\n\t\t\t", "\n\t\t}\n\n\t\t& h6 {\n\t\t\t", "\n\t\t}\n\n\t\t& span.akActionMark {\n\t\t\tcolor: ", ";\n\t\t\ttext-decoration: none;\n\n\t\t\t&:hover {\n\t\t\t\tcolor: ", ";\n\t\t\t\ttext-decoration: underline;\n\t\t\t}\n\n\t\t\t&:active {\n\t\t\t\tcolor: ", ";\n\t\t\t}\n\t\t}\n\n\t\t& span.akActionMark {\n\t\t\tcursor: pointer;\n\t\t}\n\n\t\t& span[data-placeholder] {\n\t\t\tcolor: ", ";\n\t\t}\n\n\t\t", "\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", "\n\t\t", "\n\n\t\t& .UnknownBlock {\n\t\t\tfont-family: ", ";\n\t\t\tfont-size: ", ";\n\t\t\tfont-weight: ", ";\n\t\t\twhite-space: pre-wrap;\n\t\t\tword-wrap: break-word;\n\t\t}\n\n\t\t& span.date-node {\n\t\t\tbackground: ", ";\n\t\t\tborder-radius: ", ";\n\t\t\tcolor: ", ";\n\t\t\tpadding: ", " ", ";\n\t\t\tmargin: 0 1px;\n\t\t\ttransition: background 0.3s;\n\t\t}\n\n\t\t& span.date-node-highlighted {\n\t\t\tbackground: ", ";\n\t\t\tcolor: ", ";\n\t\t}\n\n\t\t& .renderer-image {\n\t\t\tmax-width: 100%;\n\t\t\tdisplay: block;\n\t\t\tmargin: ", " 0;\n\t\t}\n\n\t\t.", ".rich-media-wrapped + .", ":not(.rich-media-wrapped) {\n\t\t\tclear: both;\n\t\t}\n\n\t\t& .code-block,\n\t\t& blockquote,\n\t\t& hr,\n\t\t& > div > div:not(.rich-media-wrapped),\n\t\t.", ".rich-media-wrapped + .rich-media-wrapped + *:not(.rich-media-wrapped),\n\t\t.", ".rich-media-wrapped + div:not(.rich-media-wrapped),\n\t\t.", ".image-align-start,\n\t\t\t.", ".image-center,\n\t\t\t.", ".image-align-end {\n\t\t\tclear: both;\n\t\t}\n\n\t\t& .rich-media-wrapped {\n\t\t\t& + h1,\n\t\t\t& + h2,\n\t\t\t& + h3,\n\t\t\t& + h4,\n\t\t\t& + h5,\n\t\t\t& + h6 {\n\t\t\t\tmargin-top: ", ";\n\t\t\t}\n\t\t}\n\n\t\t", "\n\t\t/* plugin styles */\n    ", " &\n    div[class^='image-wrap-'] + div[class^='image-wrap-'] {\n\t\t\tmargin-left: 0;\n\t\t\tmargin-right: 0;\n\t\t}\n\n\t\t/* Breakout for tables and extensions */\n\t\t.", " > {\n\t\t\t", "\n\n\t\t\t* .", " {\n\t\t\t\toverflow-x: auto;\n\t\t\t}\n\n\t\t\t& .", ":first-child {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\t\t}\n\n\t\t.", " {\n\t\t\t.", " {\n\t\t\t\tmargin-top: ", ";\n\t\t\t}\n\n\t\t\t.", " {\n\t\t\t\tmargin-left: 50%;\n\t\t\t\ttransform: translateX(-50%);\n\t\t\t}\n\n\t\t\t.", " {\n\t\t\t\toverflow-x: auto;\n\t\t\t}\n\n\t\t\t.", " .", " {\n\t\t\t\tdisplay: flex;\n\t\t\t}\n\t\t}\n\n\t\t", "\n\n\t\t.", " .", " {\n\t\t\tz-index: 0;\n\t\t\ttransition: all 0.1s linear;\n\t\t\tdisplay: flex; /* needed to avoid position: fixed jumpiness in Chrome */\n\n\t\t\t/** Shadow overrides */\n\t\t\t&.", "::after, &.", "::before {\n\t\t\t\ttop: ", "px;\n\t\t\t\theight: calc(100% - ", "px);\n\t\t\t\tz-index: ", ";\n\t\t\t}\n\n\t\t\t", "\n\n\t\t\t", "\n\n\t\t\t&\n          .", ",\n          &\n          .", " {\n\t\t\t\theight: calc(100% - ", "px);\n\t\t\t}\n\n\t\t\t/**\n\t\t\t * A hack for making all the <th /> heights equal in case some have shorter\n\t\t\t * content than others.\n\t\t\t *\n\t\t\t * This is done to make sort buttons fill entire <th />.\n\t\t\t*/\n\t\t\t", " {\n\t\t\t\theight: 1px; /* will be ignored */\n\t\t\t\t", ";\n\t\t\t\tmargin-left: 0;\n\t\t\t\tmargin-right: 0;\n\t\t\t}\n\n\t\t\t", " {\n\t\t\t\theight: 100%;\n\n\t\t\t\ttd,\n\t\t\t\tth {\n\t\t\t\t\tposition: relative;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\ttable[data-number-column='true'] {\n\t\t\t\t.", " {\n\t\t\t\t\tbackground-color: ", ";\n\t\t\t\t\tborder-right: 1px solid\n\t\t\t\t\t\t", ";\n\t\t\t\t\twidth: ", "px;\n\t\t\t\t\ttext-align: center;\n\t\t\t\t\tcolor: ", ";\n\t\t\t\t\tfont-size: ", ";\n\t\t\t\t}\n\n\t\t\t\t.fixed .", " {\n\t\t\t\t\tborder-right: 0px none;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\ttr[data-header-row].fixed {\n\t\t\tposition: fixed !important;\n\t\t\tdisplay: flex;\n\t\t\toverflow: hidden;\n\t\t\tz-index: ", ";\n\n\t\t\tborder-right: 1px solid ", ";\n\t\t\tborder-bottom: 1px solid ", ";\n\n\t\t\t/* this is to compensate for the table border */\n\t\t\ttransform: translateX(-1px);\n\t\t}\n\n\t\t.sticky > th {\n\t\t\tz-index: ", ";\n\t\t\tposition: sticky !important;\n\t\t\ttop: 0;\n\t\t}\n\n\t\t/* Make the number column header sticky */\n\t\t.sticky > td {\n\t\t\tposition: sticky !important;\n\t\t\ttop: 0;\n\t\t}\n\n\t\t/* add border for position: sticky\n     and work around background-clip: padding-box\n     bug for FF causing box-shadow bug in Chrome */\n\t\t.sticky th,\n\t\t.sticky td {\n\t\t\tbox-shadow:\n\t\t\t\t0px 1px ", ",\n\t\t\t\t0px -0.5px ", ",\n\t\t\t\tinset -1px 0px ", ",\n\t\t\t\t0px -1px ", ";\n\t\t}\n\n\t\t/* this will remove jumpiness caused in Chrome for sticky headers */\n\t\t.fixed + tr {\n\t\t\tmin-height: 0px;\n\t\t}\n\n\t\t/*\n   * We wrap CodeBlock in a grid to prevent it from overflowing the container of the renderer.\n   * See ED-4159.\n   */\n\t\t& .code-block {\n\t\t\tmax-width: 100%;\n\t\t\t/* -ms- properties are necessary until MS supports the latest version of the grid spec */\n\t\t\t/* stylelint-disable value-no-vendor-prefix, declaration-block-no-duplicate-properties */\n\t\t\tdisplay: block;\n\t\t\t/* stylelint-enable */\n\n\t\t\tposition: relative;\n\t\t\tborder-radius: ", ";\n\n\t\t\t/*\n     * The overall renderer has word-wrap: break; which causes issues with\n     * code block line numbers in Safari / iOS.\n     */\n\t\t\tword-wrap: normal;\n\t\t}\n\n\t\t& .MediaGroup,\n\t\t& .code-block {\n\t\t\tmargin-top: ", ";\n\n\t\t\t&:first-child {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\t\t}\n\n\t\t", "\n\n\t\t", "\n\n      ", ";\n\t\t", ";\n\t\t& [data-layout-section] {\n\t\t\tmargin-top: ", ";\n\t\t\t& > div + div {\n\t\t\t\tmargin-left: ", ";\n\t\t\t}\n\n\t\t\t@media screen and (max-width: ", "px) {\n\t\t\t\t& > div + div {\n\t\t\t\t\tmargin-left: 0;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t& .MediaGroup,\n\t\t\t& .code-block {\n\t\t\t\tmargin-top: ", ";\n\n\t\t\t\t&:first-child {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t& li {\n\t\t\t> .code-block {\n\t\t\t\tmargin: ", " 0 0 0;\n\t\t\t}\n\t\t\t> .code-block:first-child {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\n\t\t\t> div:last-of-type.code-block {\n\t\t\t\tmargin-bottom: ", ";\n\t\t\t}\n\t\t}\n\n\t\t&:not([data-node-type='decisionList']) > li,\n      // This prevents https://product-fabric.atlassian.net/browse/ED-20924\n      &:not(.", ") > li {\n\t\t\t", "\n\t\t}\n\t"])), editorFontSize(themeProps), "var(--ds-text, ".concat(colors.N800, ")"), RendererCssClassName.DOCUMENT, fullPageStyles(wrapperProps, themeProps), fullWidthStyles(wrapperProps), RendererCssClassName.DOCUMENT, mediaInlineImageStyles, headingAnchorStyle('h1'), headingAnchorStyle('h2'), headingAnchorStyle('h3'), headingAnchorStyle('h4'), headingAnchorStyle('h5'), headingAnchorStyle('h6'), "var(--ds-link, ".concat(colors.B400, ")"), "var(--ds-link, ".concat(colors.B300, ")"), "var(--ds-link-pressed, ".concat(colors.B500, ")"), "var(--ds-text-subtlest, ".concat(colors.N200, ")"), telepointerStyles, whitespaceSharedStyles, blockquoteSharedStyles, headingsSharedStyles(typography), ruleSharedStyles(), paragraphSharedStyles(typography), listsSharedStyles, indentationSharedStyles, blockMarksSharedStyles, codeMarkSharedStyles(), shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles(), tasksAndDecisionsStyles, fg('platform-linking-visual-refresh-v1') ? getSmartCardSharedStyles() : smartCardSharedStyles, getAnnotationStyles(wrapperProps), "var(--ds-font-family-body, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)", relativeFontSizeToBase16(14), "var(--ds-font-weight-regular, 400)", "var(--ds-background-neutral, ".concat(colors.N30A, ")"), "var(--ds-border-radius-100, 3px)", "var(--ds-text, ".concat(colors.N800, ")"), "var(--ds-space-025, 2px)", "var(--ds-space-050, 4px)", "var(--ds-background-danger, ".concat(colors.R50, ")"), "var(--ds-text-danger, ".concat(colors.R500, ")"), "var(--ds-space-300, 24px)", richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, "var(--ds-space-100, 8px)", alignedHeadingAnchorStyle(wrapperProps), mediaSingleSharedStyle, RendererCssClassName.DOCUMENT, breakoutWidthStyle(), RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER, RendererCssClassName.EXTENSION, RendererCssClassName.DOCUMENT, RendererCssClassName.EXTENSION, blockNodesVerticalMargin, RendererCssClassName.EXTENSION_CENTER_ALIGN, TableSharedCssClassName.TABLE_NODE_WRAPPER, shadowObserverClassNames.SHADOW_CONTAINER, TableSharedCssClassName.TABLE_NODE_WRAPPER, tableSharedStyle(), RendererCssClassName.DOCUMENT, TableSharedCssClassName.TABLE_CONTAINER, shadowClassNames.RIGHT_SHADOW, shadowClassNames.LEFT_SHADOW, tableMarginTop - 1, tableMarginTop, akEditorStickyHeaderZIndex, getShadowOverrides(), isStickyScrollbarEnabled(appearance) ? stickyScrollbarStyles : '', shadowObserverClassNames.SENTINEL_LEFT, shadowObserverClassNames.SENTINEL_RIGHT, tableMarginTop, fg('platform_editor_renderer_table_header_styles') ? ".".concat(TableSharedCssClassName.TABLE_NODE_WRAPPER, " > table, .").concat(TableSharedCssClassName.TABLE_STICKY_WRAPPER, " > table") : 'table', tableSortableColumnStyle(wrapperProps), fg('platform_editor_renderer_table_header_styles') ? ".".concat(TableSharedCssClassName.TABLE_NODE_WRAPPER, " > table > tbody > tr:first-of-type, .").concat(TableSharedCssClassName.TABLE_STICKY_WRAPPER, " > table > tbody > tr:first-of-type") : 'table tr:first-of-type', RendererCssClassName.NUMBER_COLUMN, fg('platform_editor_tables_numbered_column_correction') ? "var(--ds-background-accent-gray-subtlest, #F1F2F4)" : "var(--ds-background-neutral, ".concat(akEditorTableToolbar, ")"), "var(--ds-background-accent-gray-subtler, ".concat(akEditorTableBorder, ")"), akEditorTableNumberColumnWidth, "var(--ds-text-subtlest, ".concat(colors.N200, ")"), relativeFontSizeToBase16(14), RendererCssClassName.NUMBER_COLUMN, akEditorStickyHeaderZIndex, "var(--ds-background-accent-gray-subtler, ".concat(akEditorTableBorder, ")"), "var(--ds-background-accent-gray-subtler, ".concat(akEditorTableBorder, ")"), akEditorStickyHeaderZIndex, "var(--ds-background-accent-gray-subtler, ".concat(akEditorTableBorder, ")"), "var(--ds-background-accent-gray-subtler, ".concat(akEditorTableBorder, ")"), "var(--ds-background-accent-gray-subtler, ".concat(akEditorTableToolbar, ")"), "var(--ds-background-accent-gray-subtler, ".concat(akEditorTableToolbar, ")"), "var(--ds-border-radius-100, 3px)", blockNodesVerticalMargin, useGridRenderForCodeBlock(useBlockRenderForCodeBlock), getLightWeightCodeBlockStylesForRootRendererStyleSheet(), isAdvancedLayoutsOn ? columnLayoutResponsiveSharedStyle : columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, "var(--ds-space-250, 20px)", isAdvancedLayoutsOn ? 0 : "var(--ds-space-400, 32px)", gridMediumMaxWidth, blockNodesVerticalMargin, blockNodesVerticalMargin, blockNodesVerticalMargin, SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, browser.safari ? codeBlockInListSafariFix : '');
+    return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n\t\tfont-size: ", "px;\n\t\tline-height: 1.5rem;\n\t\tcolor: ", ";\n\n\t\t.", "::after {\n\t\t\t// we add a clearfix after ak-renderer-document in order to\n\t\t\t// contain internal floats (such as media images that are \"wrap-left\")\n\t\t\t// to just the renderer (and not spill outside of it)\n\t\t\tcontent: '';\n\t\t\tvisibility: hidden;\n\t\t\tdisplay: block;\n\t\t\theight: 0;\n\t\t\tclear: both;\n\t\t}\n\n\t\t", "\n\t\t", "\n\n      .", " {\n\t\t\t", "\n\t\t}\n\n\t\t& h1 {\n\t\t\t", "\n\t\t}\n\n\t\t& h2 {\n\t\t\t", "\n\t\t}\n\n\t\t& h3 {\n\t\t\t", "\n\t\t}\n\n\t\t& h4 {\n\t\t\t", "\n\t\t}\n\n\t\t& h5 {\n\t\t\t", "\n\t\t}\n\n\t\t& h6 {\n\t\t\t", "\n\t\t}\n\n\t\t& span.akActionMark {\n\t\t\tcolor: ", ";\n\t\t\ttext-decoration: none;\n\n\t\t\t&:hover {\n\t\t\t\tcolor: ", ";\n\t\t\t\ttext-decoration: underline;\n\t\t\t}\n\n\t\t\t&:active {\n\t\t\t\tcolor: ", ";\n\t\t\t}\n\t\t}\n\n\t\t& span.akActionMark {\n\t\t\tcursor: pointer;\n\t\t}\n\n\t\t& span[data-placeholder] {\n\t\t\tcolor: ", ";\n\t\t}\n\n\t\t", "\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", "\n\t\t", "\n\n\t\t& .UnknownBlock {\n\t\t\tfont-family: ", ";\n\t\t\tfont-size: ", ";\n\t\t\tfont-weight: ", ";\n\t\t\twhite-space: pre-wrap;\n\t\t\tword-wrap: break-word;\n\t\t}\n\n\t\t& span.date-node {\n\t\t\tbackground: ", ";\n\t\t\tborder-radius: ", ";\n\t\t\tcolor: ", ";\n\t\t\tpadding: ", " ", ";\n\t\t\tmargin: 0 1px;\n\t\t\ttransition: background 0.3s;\n\t\t}\n\n\t\t& span.date-node-highlighted {\n\t\t\tbackground: ", ";\n\t\t\tcolor: ", ";\n\t\t}\n\n\t\t& .renderer-image {\n\t\t\tmax-width: 100%;\n\t\t\tdisplay: block;\n\t\t\tmargin: ", " 0;\n\t\t}\n\n\t\t.", ".rich-media-wrapped + .", ":not(.rich-media-wrapped) {\n\t\t\tclear: both;\n\t\t}\n\n\t\t& .code-block,\n\t\t& blockquote,\n\t\t& hr,\n\t\t& > div > div:not(.rich-media-wrapped),\n\t\t.", ".rich-media-wrapped + .rich-media-wrapped + *:not(.rich-media-wrapped),\n\t\t.", ".rich-media-wrapped + div:not(.rich-media-wrapped),\n\t\t.", ".image-align-start,\n\t\t\t.", ".image-center,\n\t\t\t.", ".image-align-end {\n\t\t\tclear: both;\n\t\t}\n\n\t\t& .rich-media-wrapped {\n\t\t\t& + h1,\n\t\t\t& + h2,\n\t\t\t& + h3,\n\t\t\t& + h4,\n\t\t\t& + h5,\n\t\t\t& + h6 {\n\t\t\t\tmargin-top: ", ";\n\t\t\t}\n\t\t}\n\n\t\t", "\n\t\t/* plugin styles */\n    ", " &\n    div[class^='image-wrap-'] + div[class^='image-wrap-'] {\n\t\t\tmargin-left: 0;\n\t\t\tmargin-right: 0;\n\t\t}\n\n\t\t/* Breakout for tables and extensions */\n\t\t.", " > {\n\t\t\t", "\n\n\t\t\t* .", " {\n\t\t\t\toverflow-x: auto;\n\t\t\t}\n\n\t\t\t& .", ":first-child {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\t\t}\n\n\t\t.", " {\n\t\t\t.", " {\n\t\t\t\tmargin-top: ", ";\n\t\t\t}\n\n\t\t\t.", " {\n\t\t\t\tmargin-left: 50%;\n\t\t\t\ttransform: translateX(-50%);\n\t\t\t}\n\n\t\t\t.", " {\n\t\t\t\toverflow-x: auto;\n\t\t\t}\n\n\t\t\t.", " .", " {\n\t\t\t\tdisplay: flex;\n\t\t\t}\n\t\t}\n\n\t\t", "\n\n\t\t.", " .", " {\n\t\t\tz-index: 0;\n\t\t\ttransition: all 0.1s linear;\n\t\t\tdisplay: flex; /* needed to avoid position: fixed jumpiness in Chrome */\n\n\t\t\t/** Shadow overrides */\n\t\t\t&.", "::after, &.", "::before {\n\t\t\t\ttop: ", "px;\n\t\t\t\theight: calc(100% - ", "px);\n\t\t\t\tz-index: ", ";\n\t\t\t}\n\n\t\t\t", "\n\n\t\t\t", "\n\n\t\t\t&\n          .", ",\n          &\n          .", " {\n\t\t\t\theight: calc(100% - ", "px);\n\t\t\t}\n\n\t\t\t/**\n\t\t\t * A hack for making all the <th /> heights equal in case some have shorter\n\t\t\t * content than others.\n\t\t\t *\n\t\t\t * This is done to make sort buttons fill entire <th />.\n\t\t\t*/\n\t\t\t", " {\n\t\t\t\theight: 1px; /* will be ignored */\n\t\t\t\t", ";\n\t\t\t\tmargin-left: 0;\n\t\t\t\tmargin-right: 0;\n\t\t\t}\n\n\t\t\t", " {\n\t\t\t\theight: 100%;\n\n\t\t\t\ttd,\n\t\t\t\tth {\n\t\t\t\t\tposition: relative;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\ttable[data-number-column='true'] {\n\t\t\t\t.", " {\n\t\t\t\t\tbackground-color: ", ";\n\t\t\t\t\tborder-right: 1px solid\n\t\t\t\t\t\t", ";\n\t\t\t\t\twidth: ", "px;\n\t\t\t\t\ttext-align: center;\n\t\t\t\t\tcolor: ", ";\n\t\t\t\t\tfont-size: ", ";\n\t\t\t\t}\n\n\t\t\t\t.fixed .", " {\n\t\t\t\t\tborder-right: 0px none;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\ttr[data-header-row].fixed {\n\t\t\tposition: fixed !important;\n\t\t\tdisplay: flex;\n\t\t\toverflow: hidden;\n\t\t\tz-index: ", ";\n\n\t\t\tborder-right: 1px solid ", ";\n\t\t\tborder-bottom: 1px solid ", ";\n\n\t\t\t/* this is to compensate for the table border */\n\t\t\ttransform: translateX(-1px);\n\t\t}\n\n\t\t.sticky > th {\n\t\t\tz-index: ", ";\n\t\t\tposition: sticky !important;\n\t\t\ttop: 0;\n\t\t}\n\n\t\t/* Make the number column header sticky */\n\t\t.sticky > td {\n\t\t\tposition: sticky !important;\n\t\t\ttop: 0;\n\t\t}\n\n\t\t/* add border for position: sticky\n     and work around background-clip: padding-box\n     bug for FF causing box-shadow bug in Chrome */\n\t\t.sticky th,\n\t\t.sticky td {\n\t\t\tbox-shadow:\n\t\t\t\t0px 1px ", ",\n\t\t\t\t0px -0.5px ", ",\n\t\t\t\tinset -1px 0px ", ",\n\t\t\t\t0px -1px ", ";\n\t\t}\n\n\t\t/* this will remove jumpiness caused in Chrome for sticky headers */\n\t\t.fixed + tr {\n\t\t\tmin-height: 0px;\n\t\t}\n\n\t\t/*\n   * We wrap CodeBlock in a grid to prevent it from overflowing the container of the renderer.\n   * See ED-4159.\n   */\n\t\t& .code-block {\n\t\t\tmax-width: 100%;\n\t\t\t/* -ms- properties are necessary until MS supports the latest version of the grid spec */\n\t\t\t/* stylelint-disable value-no-vendor-prefix, declaration-block-no-duplicate-properties */\n\t\t\tdisplay: block;\n\t\t\t/* stylelint-enable */\n\n\t\t\tposition: relative;\n\t\t\tborder-radius: ", ";\n\n\t\t\t/*\n     * The overall renderer has word-wrap: break; which causes issues with\n     * code block line numbers in Safari / iOS.\n     */\n\t\t\tword-wrap: normal;\n\t\t}\n\n\t\t& .MediaGroup,\n\t\t& .code-block {\n\t\t\tmargin-top: ", ";\n\n\t\t\t&:first-child {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\t\t}\n\n\t\t", "\n\n\t\t", "\n\n      ", ";\n\t\t", ";\n\t\t& [data-layout-section] {\n\t\t\tmargin-top: ", ";\n\t\t\t& > div + div {\n\t\t\t\tmargin-left: ", ";\n\t\t\t}\n\n\t\t\t@media screen and (max-width: ", "px) {\n\t\t\t\t& > div + div {\n\t\t\t\t\tmargin-left: 0;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t& .MediaGroup,\n\t\t\t& .code-block {\n\t\t\t\tmargin-top: ", ";\n\n\t\t\t\t&:first-child {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t& li {\n\t\t\t> .code-block {\n\t\t\t\tmargin: ", " 0 0 0;\n\t\t\t}\n\t\t\t> .code-block:first-child {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\n\t\t\t> div:last-of-type.code-block {\n\t\t\t\tmargin-bottom: ", ";\n\t\t\t}\n\t\t}\n\n\t\t&:not([data-node-type='decisionList']) > li,\n      // This prevents https://product-fabric.atlassian.net/browse/ED-20924\n      &:not(.", ") > li {\n\t\t\t", "\n\t\t}\n\t"])), editorFontSize(themeProps), "var(--ds-text, ".concat(colors.N800, ")"), RendererCssClassName.DOCUMENT, fullPageStyles(wrapperProps, themeProps), fullWidthStyles(wrapperProps), RendererCssClassName.DOCUMENT, mediaInlineImageStyles, headingAnchorStyle('h1'), headingAnchorStyle('h2'), headingAnchorStyle('h3'), headingAnchorStyle('h4'), headingAnchorStyle('h5'), headingAnchorStyle('h6'), "var(--ds-link, ".concat(colors.B400, ")"), "var(--ds-link, ".concat(colors.B300, ")"), "var(--ds-link-pressed, ".concat(colors.B500, ")"), "var(--ds-text-subtlest, ".concat(colors.N200, ")"), telepointerStyles, whitespaceSharedStyles, blockquoteSharedStyles, headingsSharedStyles(typography), ruleSharedStyles(), paragraphSharedStyles(typography), listsSharedStyles, indentationSharedStyles, blockMarksSharedStyles, codeMarkSharedStyles(), shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles(), tasksAndDecisionsStyles, fg('platform-linking-visual-refresh-v1') ? getSmartCardSharedStyles() : smartCardSharedStyles, getAnnotationStyles(wrapperProps), "var(--ds-font-family-body, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)", relativeFontSizeToBase16(14), "var(--ds-font-weight-regular, 400)", "var(--ds-background-neutral, ".concat(colors.N30A, ")"), "var(--ds-border-radius-100, 3px)", "var(--ds-text, ".concat(colors.N800, ")"), "var(--ds-space-025, 2px)", "var(--ds-space-050, 4px)", "var(--ds-background-danger, ".concat(colors.R50, ")"), "var(--ds-text-danger, ".concat(colors.R500, ")"), "var(--ds-space-300, 24px)", richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, "var(--ds-space-100, 8px)", alignedHeadingAnchorStyle(wrapperProps), mediaSingleSharedStyle, RendererCssClassName.DOCUMENT, breakoutWidthStyle(), RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER, RendererCssClassName.EXTENSION, RendererCssClassName.DOCUMENT, RendererCssClassName.EXTENSION, blockNodesVerticalMargin, RendererCssClassName.EXTENSION_CENTER_ALIGN, TableSharedCssClassName.TABLE_NODE_WRAPPER, shadowObserverClassNames.SHADOW_CONTAINER, TableSharedCssClassName.TABLE_NODE_WRAPPER, tableSharedStyle(), RendererCssClassName.DOCUMENT, TableSharedCssClassName.TABLE_CONTAINER, shadowClassNames.RIGHT_SHADOW, shadowClassNames.LEFT_SHADOW, tableMarginTop - 1, tableMarginTop, akEditorStickyHeaderZIndex, getShadowOverrides(), isStickyScrollbarEnabled(appearance) ? stickyScrollbarStyles : '', shadowObserverClassNames.SENTINEL_LEFT, shadowObserverClassNames.SENTINEL_RIGHT, tableMarginTop, fg('platform_editor_renderer_table_header_styles') ? ".".concat(TableSharedCssClassName.TABLE_NODE_WRAPPER, " > table, .").concat(TableSharedCssClassName.TABLE_STICKY_WRAPPER, " > table") : 'table', tableSortableColumnStyle(wrapperProps), fg('platform_editor_renderer_table_header_styles') ? ".".concat(TableSharedCssClassName.TABLE_NODE_WRAPPER, " > table > tbody > tr:first-of-type, .").concat(TableSharedCssClassName.TABLE_STICKY_WRAPPER, " > table > tbody > tr:first-of-type") : 'table tr:first-of-type', RendererCssClassName.NUMBER_COLUMN, fg('platform_editor_tables_numbered_column_correction') ? "var(--ds-background-accent-gray-subtlest, #F1F2F4)" : "var(--ds-background-neutral, ".concat(akEditorTableToolbar, ")"), "var(--ds-background-accent-gray-subtler, ".concat(akEditorTableBorder, ")"), akEditorTableNumberColumnWidth, "var(--ds-text-subtlest, ".concat(colors.N200, ")"), relativeFontSizeToBase16(14), RendererCssClassName.NUMBER_COLUMN, akEditorStickyHeaderZIndex, "var(--ds-background-accent-gray-subtler, ".concat(akEditorTableBorder, ")"), "var(--ds-background-accent-gray-subtler, ".concat(akEditorTableBorder, ")"), akEditorStickyHeaderZIndex, "var(--ds-background-accent-gray-subtler, ".concat(akEditorTableBorder, ")"), "var(--ds-background-accent-gray-subtler, ".concat(akEditorTableBorder, ")"), "var(--ds-background-accent-gray-subtler, ".concat(akEditorTableToolbar, ")"), "var(--ds-background-accent-gray-subtler, ".concat(akEditorTableToolbar, ")"), "var(--ds-border-radius-100, 3px)", blockNodesVerticalMargin, useGridRenderForCodeBlock(useBlockRenderForCodeBlock), getLightWeightCodeBlockStylesForRootRendererStyleSheet(), isAdvancedLayoutsOn ? columnLayoutResponsiveSharedStyle : columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, "var(--ds-space-250, 20px)", isAdvancedLayoutsOn ? 0 : "var(--ds-space-400, 32px)", gridMediumMaxWidth, blockNodesVerticalMargin, blockNodesVerticalMargin, blockNodesVerticalMargin, SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, browser.safari ? codeBlockInListSafariFix : '');
   };
 };
 var useGridRenderForCodeBlock = function useGridRenderForCodeBlock(codeBlockRenderAsBlock) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "114.5.2",
+	"version": "114.5.3",
 	"description": "Renderer component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -38,7 +38,7 @@
 		"@atlaskit/editor-shared-styles": "^3.4.0",
 		"@atlaskit/emoji": "^69.0.0",
 		"@atlaskit/feature-gate-js-client": "^5.0.0",
-		"@atlaskit/icon": "^25.1.0",
+		"@atlaskit/icon": "^25.2.0",
 		"@atlaskit/link-datasource": "^4.1.0",
 		"@atlaskit/media-card": "^79.0.0",
 		"@atlaskit/media-client": "^32.0.0",
@@ -50,7 +50,7 @@
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/platform-feature-flags-react": "^0.1.0",
 		"@atlaskit/react-ufo": "^3.4.0",
-		"@atlaskit/smart-card": "^36.1.0",
+		"@atlaskit/smart-card": "^36.2.0",
 		"@atlaskit/status": "^3.0.0",
 		"@atlaskit/task-decision": "^19.1.0",
 		"@atlaskit/theme": "^18.0.0",
@@ -156,9 +156,6 @@
 		"platform_editor_react18_renderer": {
 			"type": "boolean"
 		},
-		"platform_editor_nested_tables_renderer_styles": {
-			"type": "boolean"
-		},
 		"confluence-frontend-comments-panel": {
 			"type": "boolean"
 		},