@atlaskit/renderer 109.1.5 → 109.2.0

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

@@ -8,11 +8,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.rendererStyles = exports.headingSizes = exports.TELEPOINTER_ID = exports.FullPagePadding = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
-var _components = require("@atlaskit/theme/components");
 var _constants = require("@atlaskit/theme/constants");
 var _colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
 var colors = _colors;
 var _typography = require("@atlaskit/theme/typography");
+var _tokens = require("@atlaskit/tokens");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _mediaInline = require("@atlaskit/editor-common/media-inline");
 var _styles = require("@atlaskit/editor-common/styles");
@@ -24,28 +24,16 @@ var _headingAnchor = require("../../react/nodes/heading-anchor");
 var _lightWeightCodeBlock = require("../../react/nodes/codeBlock/components/lightWeightCodeBlock");
 var _table = require("../../react/nodes/table");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var FullPagePadding = exports.FullPagePadding = 32;
 var tableShadowWidth = 32;
 var TELEPOINTER_ID = exports.TELEPOINTER_ID = 'ai-streaming-telepointer';
-var telepointerStyles = function telepointerStyles(themeProps) {
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    #", " {\n      display: inline-block;\n      position: relative;\n      width: 1.5px;\n      height: 25px;\n      background: linear-gradient(\n        45deg,\n        ", " -12.02%,\n        ", "\n          19.18%,\n        ", "\n          71.87%\n      );\n      margin-left: ", ";\n\n      &::after {\n        content: 'AI';\n        position: absolute;\n        display: block;\n        top: 0;\n        left: 0;\n        font-size: 10px;\n        font-weight: 700;\n        width: 12.5px;\n        height: 13px;\n        padding-top: 1px;\n        padding-left: 1.5px;\n        line-height: initial;\n        border-radius: 0px 2px 2px 0px;\n        color: ", ";\n        background: linear-gradient(\n          45deg,\n          ", " -57%,\n          ", "\n            71.87%\n        );\n      }\n    }\n  "])), TELEPOINTER_ID, (0, _components.themed)({
-    light: '#F8E6A0',
-    dark: '#F5CD47'
-  })(themeProps), (0, _components.themed)({
-    light: '#8BDBE5',
-    dark: '#60C6D2'
-  })(themeProps), (0, _components.themed)({
-    light: '#0C66E4',
-    dark: '#388BFF'
-  })(themeProps), "var(--ds-space-025, 2px)", "var(--ds-text-inverse, white)", (0, _components.themed)({
-    light: '#8BDBE5',
-    dark: '#60C6D2'
-  })(themeProps), (0, _components.themed)({
-    light: '#0C66E4',
-    dark: '#388BFF'
-  })(themeProps));
+var telepointerStyles = function telepointerStyles() {
+  var _getGlobalTheme = (0, _tokens.getGlobalTheme)(),
+    colorMode = _getGlobalTheme.colorMode;
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    #", " {\n      display: inline-block;\n      position: relative;\n      width: 1.5px;\n      height: 25px;\n      background: linear-gradient(\n        45deg,\n        ", " -12.02%,\n        ", " 19.18%,\n        ", " 71.87%\n      );\n      margin-left: ", ";\n\n      &::after {\n        content: 'AI';\n        position: absolute;\n        display: block;\n        top: 0;\n        left: 0;\n        font-size: 10px;\n        font-weight: 700;\n        width: 12.5px;\n        height: 13px;\n        padding-top: 1px;\n        padding-left: 1.5px;\n        line-height: initial;\n        border-radius: 0px 2px 2px 0px;\n        color: ", ";\n        background: linear-gradient(\n          45deg,\n          ", " -57%,\n          ", " 71.87%\n        );\n      }\n    }\n  "])), TELEPOINTER_ID, colorMode === 'dark' ? '#f5cd47' : '#f8e6a0', colorMode === 'dark' ? '#60c6d2' : '#8bdbe5', colorMode === 'dark' ? '#388bff' : '#0c66e4', "var(--ds-space-025, 2px)", "var(--ds-text-inverse, white)", colorMode === 'dark' ? '#60c6d2' : '#8bdbe5', colorMode === 'dark' ? '#388bff' : '#0c66e4');
 };
 var getLineHeight = function getLineHeight(fontCode) {
   return _typography.headingSizes[fontCode].lineHeight / _typography.headingSizes[fontCode].size;
@@ -123,46 +111,7 @@ var rendererStyles = exports.rendererStyles = function rendererStyles(wrapperPro
       theme: theme
     };
     var useBlockRenderForCodeBlock = wrapperProps.useBlockRenderForCodeBlock;
-    return (0, _react.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n      font-size: ", "px;\n      line-height: 1.5rem;\n      color: ", ";\n\n      .", "::after {\n        // we add a clearfix after ak-renderer-document in order to\n        // contain internal floats (such as media images that are \"wrap-left\")\n        // to just the renderer (and not spill outside of it)\n        content: '';\n        visibility: hidden;\n        display: block;\n        height: 0;\n        clear: both;\n      }\n\n      ", "\n      ", "\n\n      .", " {\n        ", "\n      }\n\n      & h1 {\n        ", "\n      }\n\n      & h2 {\n        ", "\n      }\n\n      & h3 {\n        ", "\n      }\n\n      & h4 {\n        ", "\n      }\n\n      & h5 {\n        ", "\n      }\n\n      & h6 {\n        ", "\n      }\n\n      & span.akActionMark {\n        color: ", ";\n        text-decoration: none;\n\n        &:hover {\n          color: ", ";\n          text-decoration: underline;\n        }\n\n        &:active {\n          color: ", ";\n        }\n      }\n\n      & span.akActionMark {\n        cursor: pointer;\n      }\n\n      & span[data-placeholder] {\n        color: ", ";\n      }\n\n      ", "\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", "\n\n      & .UnknownBlock {\n        font-family: ", ";\n        font-size: ", ";\n        font-weight: 400;\n        white-space: pre-wrap;\n        word-wrap: break-word;\n      }\n\n      & span.date-node {\n        background: ", ";\n        border-radius: ", ";\n        color: ", ";\n        padding: ", " ", ";\n        margin: 0 1px;\n        transition: background 0.3s;\n      }\n\n      & span.date-node-highlighted {\n        background: ", ";\n        color: ", ";\n      }\n\n      & .renderer-image {\n        max-width: 100%;\n        display: block;\n        margin: ", " 0;\n      }\n\n      .", ".rich-media-wrapped\n        + .", ":not(.rich-media-wrapped) {\n        clear: both;\n      }\n\n      & .code-block,\n      & blockquote,\n      & hr,\n      & > div > div:not(.rich-media-wrapped),\n      .", ".rich-media-wrapped\n        + .rich-media-wrapped\n        + *:not(.rich-media-wrapped),\n      .", ".rich-media-wrapped + div:not(.rich-media-wrapped),\n      .", ".image-align-start,\n        .", ".image-center,\n        .", ".image-align-end {\n        clear: both;\n      }\n\n      & .rich-media-wrapped {\n        & + h1,\n        & + h2,\n        & + h3,\n        & + h4,\n        & + h5,\n        & + h6 {\n          margin-top: ", ";\n        }\n      }\n\n      ", "\n      /* plugin styles */\n    ", " &\n    div[class^='image-wrap-'] + div[class^='image-wrap-'] {\n        margin-left: 0;\n        margin-right: 0;\n      }\n\n      /* Breakout for tables and extensions */\n      .", " > {\n        ", "\n\n        * .", " {\n          overflow-x: auto;\n        }\n\n        & .", ":first-child {\n          margin-top: 0;\n        }\n      }\n\n      .", " {\n        .", " {\n          margin-top: ", ";\n        }\n\n        .", " {\n          margin-left: 50%;\n          transform: translateX(-50%);\n        }\n\n        .", " {\n          overflow-x: auto;\n        }\n\n        .", "\n          .", " {\n          display: flex;\n        }\n      }\n\n      ", "\n\n      .", " .", " {\n        z-index: 0;\n        transition: all 0.1s linear;\n        display: flex; /* needed to avoid position: fixed jumpiness in Chrome */\n\n        /** Shadow overrides */\n        &.", "::after,\n          &.", "::before {\n          top: ", "px;\n          height: calc(100% - ", "px);\n          z-index: ", ";\n        }\n\n        ", "\n\n        &\n          .", ",\n          &\n          .", " {\n          height: calc(100% - ", "px);\n        }\n\n        /**\n     * A hack for making all the <th /> heights equal in case some have shorter\n     * content than others.\n     *\n     * This is done to make sort buttons fill entire <th />.\n     */\n        table {\n          height: 1px; /* will be ignored */\n          ", ";\n          margin-left: 0;\n          margin-right: 0;\n        }\n\n        table tr:first-of-type {\n          height: 100%;\n\n          td,\n          th {\n            position: relative;\n          }\n        }\n\n        table[data-number-column='true'] {\n          .", " {\n            background-color: ", ";\n            border-right: 1px solid\n              ", ";\n            width: ", "px;\n            text-align: center;\n            color: ", ";\n            font-size: ", ";\n          }\n\n          .fixed .", " {\n            border-right: 0px none;\n          }\n        }\n      }\n\n      tr[data-header-row].fixed {\n        position: fixed !important;\n        display: flex;\n        overflow: hidden;\n        z-index: ", ";\n\n        border-right: 1px solid\n          ", ";\n        border-bottom: 1px solid\n          ", ";\n\n        /* this is to compensate for the table border */\n        transform: translateX(-1px);\n      }\n\n      .sticky > th {\n        z-index: ", ";\n        position: sticky !important;\n        top: 0;\n      }\n\n      /* Make the number column header sticky */\n      .sticky > td {\n        position: sticky !important;\n        top: 0;\n      }\n\n      /* add border for position: sticky\n     and work around background-clip: padding-box\n     bug for FF causing box-shadow bug in Chrome */\n      .sticky th,\n      .sticky td {\n        box-shadow: 0px 1px\n            ", ",\n          0px -0.5px ", ",\n          inset -1px 0px ", ",\n          0px -1px ", ";\n      }\n\n      /* this will remove jumpiness caused in Chrome for sticky headers */\n      .fixed + tr {\n        min-height: 0px;\n      }\n\n      /*\n   * We wrap CodeBlock in a grid to prevent it from overflowing the container of the renderer.\n   * See ED-4159.\n   */\n      & .code-block {\n        max-width: 100%;\n        /* -ms- properties are necessary until MS supports the latest version of the grid spec */\n        /* stylelint-disable value-no-vendor-prefix, declaration-block-no-duplicate-properties */\n        display: block;\n        /* stylelint-enable */\n\n        position: relative;\n        border-radius: ", ";\n\n        /*\n     * The overall renderer has word-wrap: break; which causes issues with\n     * code block line numbers in Safari / iOS.\n     */\n        word-wrap: normal;\n      }\n\n      & .MediaGroup,\n      & .code-block {\n        margin-top: ", ";\n\n        &:first-child {\n          margin-top: 0;\n        }\n      }\n\n      ", "\n\n      ", "\n\n      ", ";\n      & [data-layout-section] {\n        margin-top: ", ";\n        & > div + div {\n          margin-left: ", ";\n        }\n\n        @media screen and (max-width: ", "px) {\n          & > div + div {\n            margin-left: 0;\n          }\n        }\n\n        & .MediaGroup,\n        & .code-block {\n          margin-top: ", ";\n\n          &:first-child {\n            margin-top: 0;\n          }\n        }\n      }\n\n      & li {\n        > .code-block {\n          margin: ", " 0 0 0;\n        }\n        > .code-block:first-child {\n          margin-top: 0;\n        }\n\n        > div:last-of-type.code-block {\n          margin-bottom: ", ";\n        }\n      }\n\n      &:not([data-node-type='decisionList']) > li,\n      // This prevents https://product-fabric.atlassian.net/browse/ED-20924\n      &:not(.", ") > li {\n        ", "\n      }\n    "])), (0, _editorSharedStyles.editorFontSize)(themeProps), (0, _components.themed)({
-      light: "var(--ds-text, ".concat(colors.N800, ")"),
-      dark: "var(--ds-text, #B8C7E0)"
-    })(themeProps), _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, ")"), (0, _components.themed)({
-      light: "var(--ds-text-subtlest, ".concat(colors.N200, ")"),
-      dark: "var(--ds-text-subtlest, ".concat(colors.DN200, ")")
-    })(themeProps), telepointerStyles(themeProps), _styles.whitespaceSharedStyles, _styles.blockquoteSharedStyles, (0, _styles.headingsSharedStyles)(), (0, _styles.ruleSharedStyles)(), _styles.paragraphSharedStyles, _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.blockMarksSharedStyles, (0, _styles.codeMarkSharedStyles)(), _styles.shadowSharedStyle, _styles.dateSharedStyle, _styles.textColorStyles, _styles.tasksAndDecisionsStyles, _styles.smartCardSharedStyles, (0, _constants.fontFamily)(), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), (0, _components.themed)({
-      light: "var(--ds-background-neutral, ".concat(colors.N30A, ")"),
-      dark: "var(--ds-background-neutral, ".concat(colors.DN70, ")")
-    })(themeProps), "var(--ds-border-radius-100, 3px)", (0, _components.themed)({
-      light: "var(--ds-text, ".concat(colors.N800, ")"),
-      dark: "var(--ds-text, ".concat(colors.DN600, ")")
-    })(themeProps), "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(), _ui.shadowObserverClassNames.SENTINEL_LEFT, _ui.shadowObserverClassNames.SENTINEL_RIGHT, _styles.tableMarginTop, tableSortableColumnStyle(wrapperProps), _consts.RendererCssClassName.NUMBER_COLUMN, (0, _components.themed)({
-      light: "var(--ds-background-neutral, ".concat(_editorSharedStyles.akEditorTableToolbar, ")"),
-      dark: "var(--ds-background-neutral, ".concat(_editorSharedStyles.akEditorTableToolbarDark, ")")
-    })(themeProps), (0, _components.themed)({
-      light: "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorder, ")"),
-      dark: "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorderDark, ")")
-    })(themeProps), _editorSharedStyles.akEditorTableNumberColumnWidth, (0, _components.themed)({
-      light: "var(--ds-text-subtlest, ".concat(colors.N200, ")"),
-      dark: "var(--ds-text-subtlest, ".concat(colors.DN400, ")")
-    })(themeProps), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), _consts.RendererCssClassName.NUMBER_COLUMN, _editorSharedStyles.akEditorStickyHeaderZIndex, (0, _components.themed)({
-      light: "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorder, ")"),
-      dark: "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorderDark, ")")
-    })(themeProps), (0, _components.themed)({
-      light: "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorder, ")"),
-      dark: "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorderDark, ")")
-    })(themeProps), _editorSharedStyles.akEditorStickyHeaderZIndex, (0, _components.themed)({
-      light: "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorder, ")"),
-      dark: "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorderDark, ")")
-    })(themeProps), (0, _components.themed)({
-      light: "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorder, ")"),
-      dark: "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorderDark, ")")
-    })(themeProps), (0, _components.themed)({
-      light: "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableToolbar, ")"),
-      dark: "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableToolbarDark, ")")
-    })(themeProps), (0, _components.themed)({
-      light: "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableToolbar, ")"),
-      dark: "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableToolbarDark, ")")
-    })(themeProps), "var(--ds-border-radius-100, 3px)", _editorSharedStyles.blockNodesVerticalMargin, useGridRenderForCodeBlock(useBlockRenderForCodeBlock), (0, _lightWeightCodeBlock.getLightWeightCodeBlockStylesForRootRendererStyleSheet)(), _styles.columnLayoutSharedStyle, "var(--ds-space-250, 20px)", "var(--ds-space-400, 32px)", _editorSharedStyles.gridMediumMaxWidth, _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.blockNodesVerticalMargin, _styles.SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, _utils.browser.safari ? _styles.codeBlockInListSafariFix : '');
+    return (0, _react.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n      font-size: ", "px;\n      line-height: 1.5rem;\n      color: ", ";\n\n      .", "::after {\n        // we add a clearfix after ak-renderer-document in order to\n        // contain internal floats (such as media images that are \"wrap-left\")\n        // to just the renderer (and not spill outside of it)\n        content: '';\n        visibility: hidden;\n        display: block;\n        height: 0;\n        clear: both;\n      }\n\n      ", "\n      ", "\n\n      .", " {\n        ", "\n      }\n\n      & h1 {\n        ", "\n      }\n\n      & h2 {\n        ", "\n      }\n\n      & h3 {\n        ", "\n      }\n\n      & h4 {\n        ", "\n      }\n\n      & h5 {\n        ", "\n      }\n\n      & h6 {\n        ", "\n      }\n\n      & span.akActionMark {\n        color: ", ";\n        text-decoration: none;\n\n        &:hover {\n          color: ", ";\n          text-decoration: underline;\n        }\n\n        &:active {\n          color: ", ";\n        }\n      }\n\n      & span.akActionMark {\n        cursor: pointer;\n      }\n\n      & span[data-placeholder] {\n        color: ", ";\n      }\n\n      ", "\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", "\n\n      & .UnknownBlock {\n        font-family: ", ";\n        font-size: ", ";\n        font-weight: 400;\n        white-space: pre-wrap;\n        word-wrap: break-word;\n      }\n\n      & span.date-node {\n        background: ", ";\n        border-radius: ", ";\n        color: ", ";\n        padding: ", " ", ";\n        margin: 0 1px;\n        transition: background 0.3s;\n      }\n\n      & span.date-node-highlighted {\n        background: ", ";\n        color: ", ";\n      }\n\n      & .renderer-image {\n        max-width: 100%;\n        display: block;\n        margin: ", " 0;\n      }\n\n      .", ".rich-media-wrapped\n        + .", ":not(.rich-media-wrapped) {\n        clear: both;\n      }\n\n      & .code-block,\n      & blockquote,\n      & hr,\n      & > div > div:not(.rich-media-wrapped),\n      .", ".rich-media-wrapped\n        + .rich-media-wrapped\n        + *:not(.rich-media-wrapped),\n      .", ".rich-media-wrapped + div:not(.rich-media-wrapped),\n      .", ".image-align-start,\n        .", ".image-center,\n        .", ".image-align-end {\n        clear: both;\n      }\n\n      & .rich-media-wrapped {\n        & + h1,\n        & + h2,\n        & + h3,\n        & + h4,\n        & + h5,\n        & + h6 {\n          margin-top: ", ";\n        }\n      }\n\n      ", "\n      /* plugin styles */\n    ", " &\n    div[class^='image-wrap-'] + div[class^='image-wrap-'] {\n        margin-left: 0;\n        margin-right: 0;\n      }\n\n      /* Breakout for tables and extensions */\n      .", " > {\n        ", "\n\n        * .", " {\n          overflow-x: auto;\n        }\n\n        & .", ":first-child {\n          margin-top: 0;\n        }\n      }\n\n      .", " {\n        .", " {\n          margin-top: ", ";\n        }\n\n        .", " {\n          margin-left: 50%;\n          transform: translateX(-50%);\n        }\n\n        .", " {\n          overflow-x: auto;\n        }\n\n        .", "\n          .", " {\n          display: flex;\n        }\n      }\n\n      ", "\n\n      .", " .", " {\n        z-index: 0;\n        transition: all 0.1s linear;\n        display: flex; /* needed to avoid position: fixed jumpiness in Chrome */\n\n        /** Shadow overrides */\n        &.", "::after,\n          &.", "::before {\n          top: ", "px;\n          height: calc(100% - ", "px);\n          z-index: ", ";\n        }\n\n        ", "\n\n        &\n          .", ",\n          &\n          .", " {\n          height: calc(100% - ", "px);\n        }\n\n        /**\n     * A hack for making all the <th /> heights equal in case some have shorter\n     * content than others.\n     *\n     * This is done to make sort buttons fill entire <th />.\n     */\n        table {\n          height: 1px; /* will be ignored */\n          ", ";\n          margin-left: 0;\n          margin-right: 0;\n        }\n\n        table tr:first-of-type {\n          height: 100%;\n\n          td,\n          th {\n            position: relative;\n          }\n        }\n\n        table[data-number-column='true'] {\n          .", " {\n            background-color: ", ";\n            border-right: 1px solid\n              ", ";\n            width: ", "px;\n            text-align: center;\n            color: ", ";\n            font-size: ", ";\n          }\n\n          .fixed .", " {\n            border-right: 0px none;\n          }\n        }\n      }\n\n      tr[data-header-row].fixed {\n        position: fixed !important;\n        display: flex;\n        overflow: hidden;\n        z-index: ", ";\n\n        border-right: 1px solid\n          ", ";\n        border-bottom: 1px solid\n          ", ";\n\n        /* this is to compensate for the table border */\n        transform: translateX(-1px);\n      }\n\n      .sticky > th {\n        z-index: ", ";\n        position: sticky !important;\n        top: 0;\n      }\n\n      /* Make the number column header sticky */\n      .sticky > td {\n        position: sticky !important;\n        top: 0;\n      }\n\n      /* add border for position: sticky\n     and work around background-clip: padding-box\n     bug for FF causing box-shadow bug in Chrome */\n      .sticky th,\n      .sticky td {\n        box-shadow: 0px 1px\n            ", ",\n          0px -0.5px ", ",\n          inset -1px 0px ", ",\n          0px -1px ", ";\n      }\n\n      /* this will remove jumpiness caused in Chrome for sticky headers */\n      .fixed + tr {\n        min-height: 0px;\n      }\n\n      /*\n   * We wrap CodeBlock in a grid to prevent it from overflowing the container of the renderer.\n   * See ED-4159.\n   */\n      & .code-block {\n        max-width: 100%;\n        /* -ms- properties are necessary until MS supports the latest version of the grid spec */\n        /* stylelint-disable value-no-vendor-prefix, declaration-block-no-duplicate-properties */\n        display: block;\n        /* stylelint-enable */\n\n        position: relative;\n        border-radius: ", ";\n\n        /*\n     * The overall renderer has word-wrap: break; which causes issues with\n     * code block line numbers in Safari / iOS.\n     */\n        word-wrap: normal;\n      }\n\n      & .MediaGroup,\n      & .code-block {\n        margin-top: ", ";\n\n        &:first-child {\n          margin-top: 0;\n        }\n      }\n\n      ", "\n\n      ", "\n\n      ", ";\n      & [data-layout-section] {\n        margin-top: ", ";\n        & > div + div {\n          margin-left: ", ";\n        }\n\n        @media screen and (max-width: ", "px) {\n          & > div + div {\n            margin-left: 0;\n          }\n        }\n\n        & .MediaGroup,\n        & .code-block {\n          margin-top: ", ";\n\n          &:first-child {\n            margin-top: 0;\n          }\n        }\n      }\n\n      & li {\n        > .code-block {\n          margin: ", " 0 0 0;\n        }\n        > .code-block:first-child {\n          margin-top: 0;\n        }\n\n        > div:last-of-type.code-block {\n          margin-bottom: ", ";\n        }\n      }\n\n      &:not([data-node-type='decisionList']) > li,\n      // This prevents https://product-fabric.atlassian.net/browse/ED-20924\n      &:not(.", ") > li {\n        ", "\n      }\n    "])), (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)(), (0, _styles.ruleSharedStyles)(), _styles.paragraphSharedStyles, _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.blockMarksSharedStyles, (0, _styles.codeMarkSharedStyles)(), _styles.shadowSharedStyle, _styles.dateSharedStyle, _styles.textColorStyles, _styles.tasksAndDecisionsStyles, _styles.smartCardSharedStyles, (0, _constants.fontFamily)(), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), "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(), _ui.shadowObserverClassNames.SENTINEL_LEFT, _ui.shadowObserverClassNames.SENTINEL_RIGHT, _styles.tableMarginTop, tableSortableColumnStyle(wrapperProps), _consts.RendererCssClassName.NUMBER_COLUMN, "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)((0, _constants.fontSize)()), _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)(), _styles.columnLayoutSharedStyle, "var(--ds-space-250, 20px)", "var(--ds-space-400, 32px)", _editorSharedStyles.gridMediumMaxWidth, _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.blockNodesVerticalMargin, _styles.SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, _utils.browser.safari ? _styles.codeBlockInListSafariFix : '');
   };
 };
 var useGridRenderForCodeBlock = function useGridRenderForCodeBlock(codeBlockRenderAsBlock) {

package/dist/es2019/react/nodes/codeBlock/components/codeBlockContainer.js

@@ -1,44 +1,37 @@
 /** @jsx jsx */
 import { jsx, css } from '@emotion/react';
 import { overflowShadow, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
-import { N20, DN50 } from '@atlaskit/theme/colors';
-import { themed } from '@atlaskit/theme/components';
+import { N20 } from '@atlaskit/theme/colors';
 import { fontSize } from '@atlaskit/theme/constants';
 import { CodeBlockSharedCssClassName } from '@atlaskit/editor-common/styles';
 import CodeBlockButtonContainer from './codeBlockButtonContainer';
-const codeBlockStyleOverrides = props => css`
-    tab-size: 4;
-    background-color: ${themed({
-  light: `var(--ds-surface-raised, ${N20})`,
-  dark: `var(--ds-surface-raised, ${DN50})`
-})(props)};
-
-    &:hover {
-      button {
-        opacity: 1;
-      }
-    }
+const codeBlockStyleOverrides = css`
+  tab-size: 4;
+  background-color: ${`var(--ds-surface-raised, ${N20})`};
 
+  &:hover {
     button {
-      opacity: 0;
-      transition: opacity 0.2s ease 0s;
+      opacity: 1;
     }
+  }
 
-    ${CodeBlockSharedCssClassName.DS_CODEBLOCK} {
-      font-size: ${relativeFontSizeToBase16(fontSize())};
-      line-height: 1.5rem;
-      background-image: ${overflowShadow({
-  background: themed({
-    light: `var(--ds-background-neutral, ${N20})`,
-    dark: `var(--ds-background-neutral, ${DN50})`
-  })(props),
+  button {
+    opacity: 0;
+    transition: opacity 0.2s ease 0s;
+  }
+
+  ${CodeBlockSharedCssClassName.DS_CODEBLOCK} {
+    font-size: ${relativeFontSizeToBase16(fontSize())};
+    line-height: 1.5rem;
+    background-image: ${overflowShadow({
+  background: `var(--ds-background-neutral, ${N20})`,
   leftCoverWidth: "var(--ds-space-300, 24px)"
 })};
-      background-attachment: local, local, local, local, scroll, scroll, scroll,
-        scroll;
-      background-position: 0 0, 0 0, 100% 0, 100% 0, 100% 0, 100% 0, 0 0, 0 0;
-    }
-  `;
+    background-attachment: local, local, local, local, scroll, scroll, scroll,
+      scroll;
+    background-position: 0 0, 0 0, 100% 0, 100% 0, 100% 0, 100% 0, 0 0, 0 0;
+  }
+`;
 const CodeBlockContainer = ({
   allowCopyToClipboard,
   allowWrapCodeBlock,

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

@@ -1,36 +1,32 @@
 import _extends from "@babel/runtime/helpers/extends";
-import { MediaInlineImageCard, shouldShowInlineImage } from '@atlaskit/editor-common/media-inline';
-import { WithProviders } from '@atlaskit/editor-common/provider-factory';
+import { MediaInlineImageCard } from '@atlaskit/editor-common/media-inline';
+import { useProvider } from '@atlaskit/editor-common/provider-factory';
 import { MediaInlineCard } from '@atlaskit/media-card';
 import { MediaClientContext } from '@atlaskit/media-client-react';
-import { MediaInlineCardErroredView, MediaInlineCardLoadingView, messages } from '@atlaskit/media-ui';
-import React, { useCallback, useEffect, useState } from 'react';
-import { createIntl, injectIntl } from 'react-intl-next';
+import { MediaInlineCardLoadingView } from '@atlaskit/media-ui';
+import React, { useCallback, useEffect, useState, useContext } from 'react';
+import { injectIntl } from 'react-intl-next';
 import { getClipboardAttrs, mediaIdentifierMap } from '../../ui/MediaCard';
 export const RenderMediaInline = ({
   rendererAppearance,
-  intl,
   clipboardAttrs,
-  mediaInlineProviders,
   collection: collectionName,
   eventHandlers,
-  identifier,
-  alt,
-  width,
-  height,
-  type,
-  borderSize,
-  borderColor
+  identifier
 }) => {
-  const [contextIdentifierProvider, setContextIdentifierProvider] = useState();
+  const [contextIdentifier, setContextIdentifier] = useState();
   const [fileState, setFileState] = useState();
-  const mediaClient = React.useContext(MediaClientContext);
-  const updateContext = async contextIdentifierProvider => {
+  const mediaClient = useContext(MediaClientContext);
+  const contextIdentifierProvider = useProvider('contextIdentifierProvider');
+  useEffect(() => {
     if (contextIdentifierProvider) {
-      const resolvedContextID = await contextIdentifierProvider;
-      setContextIdentifierProvider(resolvedContextID);
+      contextIdentifierProvider.then(resolvedContextID => {
+        if (contextIdentifier !== resolvedContextID) {
+          setContextIdentifier(resolvedContextID);
+        }
+      });
     }
-  };
+  }, [contextIdentifier, contextIdentifierProvider]);
   const updateFileState = useCallback(async id => {
     const options = {
       collectionName
@@ -60,18 +56,14 @@ export const RenderMediaInline = ({
     };
   }, [identifier, collectionName]);
   useEffect(() => {
-    const {
-      contextIdentifierProvider
-    } = mediaInlineProviders;
     const {
       id
     } = clipboardAttrs;
-    updateContext(contextIdentifierProvider);
     id && updateFileState(id);
-  }, [mediaInlineProviders, contextIdentifierProvider, clipboardAttrs, updateFileState]);
+  }, [contextIdentifier, clipboardAttrs, updateFileState]);
 
   /*
-   * Only show the loading view if the media provider is not ready
+   * Only show the loading view if the media client is not ready
    * prevents calling the media API before the provider is ready
    */
   if (!mediaClient) {
@@ -80,19 +72,6 @@ export const RenderMediaInline = ({
       isSelected: false
     });
   }
-  if (type && shouldShowInlineImage(type)) {
-    return /*#__PURE__*/React.createElement(MediaInlineImageCard, {
-      mediaClient: mediaClient,
-      identifier: identifier,
-      alt: alt,
-      width: width,
-      height: height,
-      border: {
-        borderSize,
-        borderColor
-      }
-    });
-  }
   const handleMediaInlineClick = result => {
     var _eventHandlers$media;
     if (eventHandlers !== null && eventHandlers !== void 0 && (_eventHandlers$media = eventHandlers.media) !== null && _eventHandlers$media !== void 0 && _eventHandlers$media.onClick) {
@@ -102,39 +81,34 @@ export const RenderMediaInline = ({
   };
   const shouldOpenMediaViewer = rendererAppearance !== 'mobile';
   const shouldDisplayToolTip = rendererAppearance !== 'mobile';
-  const {
-    mediaProvider
-  } = mediaInlineProviders;
   const {
     id,
     collection
   } = clipboardAttrs;
-  return /*#__PURE__*/React.createElement("span", _extends({}, getClipboardAttrs({
-    id,
-    collection,
-    contextIdentifierProvider,
-    fileState
-  }), {
-    "data-node-type": "mediaInline"
-  }), mediaProvider || mediaClient ? /*#__PURE__*/React.createElement(MediaInlineCard, {
-    identifier: identifier,
-    onClick: handleMediaInlineClick,
-    shouldOpenMediaViewer: shouldOpenMediaViewer,
-    shouldDisplayToolTip: shouldDisplayToolTip,
-    mediaClientConfig: mediaClient.mediaClientConfig,
-    mediaViewerItems: Array.from(mediaIdentifierMap.values())
-  }) : /*#__PURE__*/React.createElement(MediaInlineCardErroredView, {
-    message: (intl || createIntl({
-      locale: 'en'
-    })).formatMessage(messages.couldnt_load_file)
-  }));
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line @atlaskit/design-system/prefer-primitives
+    React.createElement("span", _extends({}, getClipboardAttrs({
+      id,
+      collection,
+      contextIdentifierProvider: contextIdentifier,
+      fileState
+    }), {
+      "data-node-type": "mediaInline"
+    }), /*#__PURE__*/React.createElement(MediaInlineCard, {
+      identifier: identifier,
+      onClick: handleMediaInlineClick,
+      shouldOpenMediaViewer: shouldOpenMediaViewer,
+      shouldDisplayToolTip: shouldDisplayToolTip,
+      mediaClientConfig: mediaClient.mediaClientConfig,
+      mediaViewerItems: Array.from(mediaIdentifierMap.values())
+    }))
+  );
 };
 const MediaInline = props => {
-  var _borderMark$attrs$col, _borderMark$attrs$siz;
   const {
     collection,
     id,
-    providers: providerFactory,
     intl,
     rendererAppearance,
     featureFlags,
@@ -142,7 +116,8 @@ const MediaInline = props => {
     alt,
     width,
     height,
-    marks
+    marks,
+    ssr
   } = props;
   const clipboardAttrs = {
     id,
@@ -153,30 +128,33 @@ const MediaInline = props => {
     mediaItemType: 'file',
     collectionName: collection
   };
-  const borderMark = marks === null || marks === void 0 ? void 0 : marks.find(mark => (mark === null || mark === void 0 ? void 0 : mark.type.name) === 'border');
-  const borderColor = (_borderMark$attrs$col = borderMark === null || borderMark === void 0 ? void 0 : borderMark.attrs.color) !== null && _borderMark$attrs$col !== void 0 ? _borderMark$attrs$col : '';
-  const borderSize = (_borderMark$attrs$siz = borderMark === null || borderMark === void 0 ? void 0 : borderMark.attrs.size) !== null && _borderMark$attrs$siz !== void 0 ? _borderMark$attrs$siz : 0;
-  return /*#__PURE__*/React.createElement(WithProviders, {
-    providers: ['mediaProvider', 'contextIdentifierProvider'],
-    providerFactory: providerFactory,
-    renderNode: mediaInlineProviders => {
-      return /*#__PURE__*/React.createElement(RenderMediaInline, {
-        identifier: identifier,
-        clipboardAttrs: clipboardAttrs,
-        eventHandlers: props.eventHandlers,
-        rendererAppearance: rendererAppearance,
-        intl: intl,
-        mediaInlineProviders: mediaInlineProviders,
-        collection: collection,
-        featureFlags: featureFlags,
-        type: fileType,
-        alt: alt,
-        width: width,
-        height: height,
-        borderSize: borderSize,
-        borderColor: borderColor
-      });
-    }
+  const mediaClient = useContext(MediaClientContext);
+  if (fileType === 'image') {
+    var _borderMark$attrs$col, _borderMark$attrs$siz;
+    const borderMark = marks === null || marks === void 0 ? void 0 : marks.find(mark => (mark === null || mark === void 0 ? void 0 : mark.type.name) === 'border');
+    const borderColor = (_borderMark$attrs$col = borderMark === null || borderMark === void 0 ? void 0 : borderMark.attrs.color) !== null && _borderMark$attrs$col !== void 0 ? _borderMark$attrs$col : '';
+    const borderSize = (_borderMark$attrs$siz = borderMark === null || borderMark === void 0 ? void 0 : borderMark.attrs.size) !== null && _borderMark$attrs$siz !== void 0 ? _borderMark$attrs$siz : 0;
+    return /*#__PURE__*/React.createElement(MediaInlineImageCard, {
+      mediaClient: mediaClient,
+      identifier: identifier,
+      alt: alt,
+      width: width,
+      height: height,
+      ssr: ssr,
+      border: {
+        borderSize,
+        borderColor
+      }
+    });
+  }
+  return /*#__PURE__*/React.createElement(RenderMediaInline, {
+    identifier: identifier,
+    clipboardAttrs: clipboardAttrs,
+    eventHandlers: props.eventHandlers,
+    rendererAppearance: rendererAppearance,
+    intl: intl,
+    collection: collection,
+    featureFlags: featureFlags
   });
 };
 export default injectIntl(MediaInline);

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

@@ -1,8 +1,11 @@
 import _extends from "@babel/runtime/helpers/extends";
+/* eslint-disable @atlaskit/design-system/prefer-primitives */
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage/preview */
 /** @jsx jsx */
 
-import { jsx, css } from '@emotion/react';
+import { jsx } from '@emotion/react';
+// eslint-disable-next-line @typescript-eslint/no-duplicate-imports
+import { css } from '@emotion/react';
 import { N40, N50 } from '@atlaskit/theme/colors';
 import React, { useState } from 'react';
 import { renderExtension } from './extension';
@@ -87,6 +90,44 @@ const MultiBodiedExtension = props => {
   `;
   const isTopLevel = path.length < 1;
   const centerAlignClass = isTopLevel && ['wide', 'full-width'].includes(layout) ? RendererCssClassName.EXTENSION_CENTER_ALIGN : '';
+  function renderMbeContent(width) {
+    return jsx("div", {
+      className: `${RendererCssClassName.EXTENSION} ${centerAlignClass}`,
+      style: {
+        width: isTopLevel ? calcBreakoutWidth(layout, width) : '100%'
+      },
+      "data-layout": layout
+    }, jsx("nav", {
+      className: "multiBodiedExtension-navigation",
+      css: navigationCSS,
+      "data-testid": "multiBodiedExtension-navigation"
+    }, jsx(ExtensionRenderer, _extends({}, props, {
+      actions: actions,
+      type: "multiBodiedExtension"
+    }), ({
+      result
+    }) => {
+      try {
+        if (result && /*#__PURE__*/React.isValidElement(result)) {
+          // Return the content directly if it's a valid JSX.Element
+          return renderExtension(result, layout, {
+            isTopLevel: path.length < 1
+          });
+        }
+      } catch (e) {
+        /** We don't want this error to block renderer */
+        /** We keep rendering the default content */
+      }
+
+      // Always return default content if anything goes wrong
+      return renderExtension(children, layout, {
+        isTopLevel: path.length < 1
+      });
+    })), jsx("article", {
+      className: "multiBodiedExtension--frames",
+      "data-testid": "multiBodiedExtension--frames"
+    }, children));
+  }
   return jsx("section", {
     className: "multiBodiedExtension--container",
     css: containerCSS,
@@ -94,41 +135,6 @@ const MultiBodiedExtension = props => {
     "data-active-child-index": activeChildIndex
   }, jsx(WidthConsumer, null, ({
     width
-  }) => jsx("div", {
-    className: `${RendererCssClassName.EXTENSION} ${centerAlignClass}`,
-    style: {
-      width: isTopLevel ? calcBreakoutWidth(layout, width) : '100%'
-    },
-    "data-layout": layout
-  }, jsx("nav", {
-    className: "multiBodiedExtension-navigation",
-    css: navigationCSS,
-    "data-testid": "multiBodiedExtension-navigation"
-  }, jsx(ExtensionRenderer, _extends({}, props, {
-    actions: actions,
-    type: "multiBodiedExtension"
-  }), ({
-    result
-  }) => {
-    try {
-      if (result && /*#__PURE__*/React.isValidElement(result)) {
-        // Return the content directly if it's a valid JSX.Element
-        return renderExtension(result, layout, {
-          isTopLevel: path.length < 1
-        });
-      }
-    } catch (e) {
-      /** We don't want this error to block renderer */
-      /** We keep rendering the default content */
-    }
-
-    // Always return default content if anything goes wrong
-    return renderExtension(children, layout, {
-      isTopLevel: path.length < 1
-    });
-  })), jsx("article", {
-    className: "multiBodiedExtension--frames",
-    "data-testid": "multiBodiedExtension--frames"
-  }, children))));
+  }) => renderMbeContent(width)));
 };
 export default MultiBodiedExtension;

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

@@ -4,20 +4,17 @@ import React from 'react';
 import { css, jsx } from '@emotion/react';
 import TipIcon from '@atlaskit/icon/glyph/editor/hint';
 import { PanelType } from '@atlaskit/adf-schema';
-import { getPanelBackgroundDarkModeColors, panelSharedStylesWithoutPrefix, PanelSharedCssClassName } from '@atlaskit/editor-common/panel';
+import { panelSharedStylesWithoutPrefix, PanelSharedCssClassName } from '@atlaskit/editor-common/panel';
 import { hexToEditorBackgroundPaletteColor } from '@atlaskit/editor-palette';
 import EmojiIcon from '@atlaskit/icon/glyph/editor/emoji';
 import EmojiItem from './emoji';
-// AFP-2532 TODO: Fix automatic suppressions below
-// eslint-disable-next-line @atlassian/tangerine/import/entry-points
-import { themed } from '@atlaskit/theme';
 import { PanelInfoIcon, PanelSuccessIcon, PanelNoteIcon, PanelWarningIcon, PanelErrorIcon } from '@atlaskit/editor-common/icons';
 const PanelStyled = ({
   backgroundColor,
   hasIcon,
   ...props
 }) => {
-  let styles = theme => css`
+  let styles = css`
     &.${PanelSharedCssClassName.prefix} {
       ${panelSharedStylesWithoutPrefix()}
 
@@ -27,25 +24,16 @@ const PanelStyled = ({
     }
   `;
   if (props['data-panel-type'] === PanelType.CUSTOM && backgroundColor) {
-    styles = theme => {
-      const tokenColor = hexToEditorBackgroundPaletteColor(backgroundColor);
-      const customStyle = themed({
-        dark: getPanelBackgroundDarkModeColors,
-        light: `background-color: ${tokenColor || backgroundColor};`
-      })({
-        theme
-      });
-      return css`
-        &.${PanelSharedCssClassName.prefix} {
-          ${panelSharedStylesWithoutPrefix()}
-        }
+    styles = css`
+      &.${PanelSharedCssClassName.prefix} {
+        ${panelSharedStylesWithoutPrefix()}
+      }
 
-        &[data-panel-type=${PanelType.CUSTOM}] {
-          ${customStyle};
-          ${hasIcon ? '' : 'padding-left: 12px;'}
-        }
-      `;
-    };
+      &[data-panel-type=${PanelType.CUSTOM}] {
+        background-color: ${hexToEditorBackgroundPaletteColor(backgroundColor) || backgroundColor};
+        ${hasIcon ? '' : 'padding-left: 12px;'}
+      }
+    `;
   }
   return jsx("div", _extends({
     css: styles

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

@@ -2,7 +2,6 @@ import React from 'react';
 import { tableCellBorderWidth, tableCellMinWidth } from '@atlaskit/editor-common/styles';
 import { akEditorTableNumberColumnWidth, akEditorWideLayoutWidth, akEditorFullWidthLayoutWidth, akEditorTableLegacyCellMinWidth, akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { isTableResizingEnabled } from '../table';
 
 // we allow scaling down column widths by no more than 30%
@@ -69,17 +68,11 @@ const renderScaleDownColgroup = props => {
     tableContainerWidth = getTableLayoutWidth(layout);
   }
   if (isTableResizingEnabled(rendererAppearance) && !isInsideOfBlockNode && !tableResized) {
-    if (getBooleanFF('platform.editor.custom-table-width-scale-down-undefined-column_nkyvx')) {
-      // for tables with no column widths defined, assume that the real table width
-      // is defined by node.attrs.width
-      const tableWidth = (isNumberColumnEnabled ? tableContainerWidth - akEditorTableNumberColumnWidth : tableContainerWidth) - 1;
-      const defaultColumnWidth = tableWidth / noOfColumns;
-      targetWidths = new Array(noOfColumns).fill(defaultColumnWidth);
-    } else {
-      return new Array(noOfColumns).fill({
-        minWidth: `${tableCellMinWidth}px`
-      });
-    }
+    // for tables with no column widths defined, assume that the real table width
+    // is defined by node.attrs.width
+    const tableWidth = (isNumberColumnEnabled ? tableContainerWidth - akEditorTableNumberColumnWidth : tableContainerWidth) - 1;
+    const defaultColumnWidth = tableWidth / noOfColumns;
+    targetWidths = new Array(noOfColumns).fill(defaultColumnWidth);
   } else if (!tableResized) {
     return null;
   }

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

@@ -406,7 +406,7 @@ React.createElement(WidthConsumer, null, ({
   var _props$columnWidths;
   const renderWidth = props.rendererAppearance === 'full-page' ? width - FullPagePadding * 2 : width;
   const colWidthsSum = ((_props$columnWidths = props.columnWidths) === null || _props$columnWidths === void 0 ? void 0 : _props$columnWidths.reduce((total, val) => total + val, 0)) || 0;
-  if (colWidthsSum || getBooleanFF('platform.editor.custom-table-width-scale-down-undefined-column_nkyvx') && isTableResizingEnabled(props.rendererAppearance)) {
+  if (colWidthsSum || isTableResizingEnabled(props.rendererAppearance)) {
     return /*#__PURE__*/React.createElement(TableWithShadows, _extends({
       renderWidth: renderWidth
     }, props));