@atlaskit/renderer 114.4.5 → 114.5.1

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/renderer
 
+## 114.5.1
+
+### Patch Changes
+
+- [#131541](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/131541)
+  [`14e2b8676868b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/14e2b8676868b) -
+  ENGHEALTH-23692 Iconography lift for renderer
+
+## 114.5.0
+
+### Minor Changes
+
+- [#130460](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/130460)
+  [`661496fcc810e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/661496fcc810e) -
+  Revised styles for MBE in Renderer
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 114.4.5
 
 ### Patch Changes

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

@@ -11,7 +11,7 @@ var _react2 = require("react");
 var _reactIntlNext = require("react-intl-next");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
-var _copy = _interopRequireDefault(require("@atlaskit/icon/glyph/copy"));
+var _copy = _interopRequireDefault(require("@atlaskit/icon/core/migration/copy"));
 var _clipboard = require("../../../utils/clipboard");
 var _messages = require("@atlaskit/editor-common/messages");
 var _enums = require("../../../../analytics/enums");

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

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = require("@emotion/react");
-var _ui = require("@atlaskit/editor-common/ui");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 /**
  * @jsxRuntime classic
@@ -14,15 +13,19 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
-var containerCSS = (0, _react.css)({
+var containerCSSOld = (0, _react.css)({
   minHeight: '100px',
   flexBasis: '100%'
 });
+var containerCSSNew = (0, _react.css)({
+  padding: "var(--ds-space-100, 8px)",
+  minHeight: '100px',
+  // by default all frames are hidden, this style is overridden in multiBodiedExtensions for active frame
+  display: 'none'
+});
 var ExtensionFrame = function ExtensionFrame(props) {
   return (0, _react.jsx)("div", {
-    css: [containerCSS, (0, _platformFeatureFlags.fg)('platform_editor_multi_body_extension_extensibility') &&
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    _ui.sharedMultiBodiedExtensionStyles.extensionFrameContent],
+    css: [(0, _platformFeatureFlags.fg)('platform_editor_multi_body_extension_extensibility') ? containerCSSNew : containerCSSOld],
     "data-extension-frame": "true"
   }, props.children);
 };

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

@@ -18,7 +18,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
-var _link = _interopRequireDefault(require("@atlaskit/icon/glyph/link"));
+var _link = _interopRequireDefault(require("@atlaskit/icon/core/migration/link"));
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _reactIntlNext = require("react-intl-next");
 var _messages = require("../../messages");
@@ -121,8 +121,8 @@ var HeadingAnchor = /*#__PURE__*/function (_React$PureComponent) {
         type: "button"
       }, (0, _react2.jsx)(_link.default, {
         label: _this.getCopyAriaLabel(),
-        size: _this.props.level > 3 ? 'small' : 'medium',
-        primaryColor: _this.state.isClicked ? "var(--ds-icon-selected, ".concat(_colors.B400, ")") : "var(--ds-icon-subtle, ".concat(_colors.N200, ")")
+        LEGACY_size: _this.props.level > 3 ? 'small' : 'medium',
+        color: _this.state.isClicked ? "var(--ds-icon-selected, ".concat(_colors.B400, ")") : "var(--ds-icon-subtle, ".concat(_colors.N200, ")")
       }));
     });
     return _this;

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

@@ -6,19 +6,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("@emotion/react");
-var _colors = require("@atlaskit/theme/colors");
 var _react2 = _interopRequireWildcard(require("react"));
-var _extension = require("./extension");
 var _ui = require("@atlaskit/editor-common/ui");
 var _consts = require("../../consts");
 var _utils = require("@atlaskit/editor-common/utils");
 var _actions = require("./multiBodiedExtension/actions");
 var _context = require("./multiBodiedExtension/context");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _templateObject, _templateObject2, _templateObject3;
+var _templateObject;
 /* eslint-disable @atlaskit/design-system/prefer-primitives, @atlaskit/design-system/consistent-css-prop-usage */
 /**
  * @jsxRuntime classic
@@ -28,104 +25,22 @@ var _templateObject, _templateObject2, _templateObject3;
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Ignored via go/DSP-18766
-var navigationStylesOld = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t", ";\n\tmargin-left: 0 !important;\n\tmargin-right: 0 !important;\n\t.mbe-add-tab-button,\n\t.mbe-remove-tab {\n\t\tdisplay: none;\n\t}\n"])), _ui.sharedMultiBodiedExtensionStyles.mbeNavigation);
-
-// localized sharedMultiBodiedExtensionStyles.mbeNavigation in navigationCssExtendedNew
-var navigationStylesNew = (0, _react.css)({
-  borderTopLeftRadius: "var(--ds-border-radius, 3px)",
-  borderTopRightRadius: "var(--ds-border-radius, 3px)",
-  userSelect: 'none',
-  WebkitUserModify: 'read-only',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
-  borderBottom: 'none !important',
-  background: "var(--ds-surface, white)",
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '&.remove-margins': {
-    margin: "var(--ds-space-negative-100, -8px)"
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '&.remove-border': {
-    border: 'none'
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
-  marginLeft: '0 !important',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
-  marginRight: '0 !important',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '.mbe-add-tab-button, .mbe-remove-tab': {
-    display: 'none'
-  }
-});
-
-// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
-var containerStylesOld = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\t", ";\n\t.ak-renderer-extension {\n\t\tmargin-top: 0 !important;\n\t}\n\n\t[data-layout='full-width'],\n\t[data-layout='wide'] {\n\t\t.multiBodiedExtension-navigation {\n\t\t\tborder-right: 3px solid ", " !important;\n\t\t}\n\t}\n"])), _ui.sharedMultiBodiedExtensionStyles.mbeExtensionContainer, "var(--ds-border, ".concat(_colors.N40, ")"));
-
-// localized sharedMultiBodiedExtensionStyles.mbeExtensionContainer in containerStylesNew
-// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
-var containerStylesNew = (0, _react.css)({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
-  background: 'transparent !important',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-  'padding:': {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
-    left: "var(--ds-space-100, 8px)".concat(" !important"),
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
-    right: "var(--ds-space-100, 8px)".concat(" !important")
-  },
-  paddingBottom: "var(--ds-space-100, 8px)",
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '&.remove-padding': {
-    paddingBottom: 0
-  },
-  position: 'relative',
-  verticalAlign: 'middle',
-  cursor: 'pointer',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '.multiBodiedExtension-handler-result': {
-    marginLeft: "var(--ds-space-100, 8px)"
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  ".multiBodiedExtension-content-dom-wrapper > [data-extension-frame='true'], .multiBodiedExtension--frames > [data-extension-frame='true']": {
-    display: 'none',
-    background: 'transparent'
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '.multiBodiedExtension-content-dom-wrapper, .multiBodiedExtension--frames': {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-    "[data-extension-frame='true'] > :not(style):first-child, [data-extension-frame='true'] > style:first-child + *": {
-      marginTop: 0
-    }
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '.ak-renderer-extension': {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
-    marginTop: '0 !important'
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '[data-layout="full-width"], [data-layout="wide"]': {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '.multiBodiedExtension-navigation': {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
-      borderRight: "3px solid ".concat("var(--ds-border, ".concat(_colors.N40, ")"), " !important")
-    }
+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': {
+    marginTop: 0
   }
 });
 var MultiBodiedExtensionChildrenContainer = function MultiBodiedExtensionChildrenContainer(_ref) {
   var children = _ref.children;
   return (0, _react.jsx)("article", {
     "data-testid": "multiBodiedExtension--frames"
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    ,
-    className: "multiBodiedExtension--frames"
   }, children);
 };
 var MultiBodiedExtensionNavigation = function MultiBodiedExtensionNavigation(_ref2) {
   var children = _ref2.children;
   return (0, _react.jsx)("nav", {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    className: "multiBodiedExtension-navigation",
-    css: (0, _platformFeatureFlags.fg)('platform_editor_emotion_refactor_renderer') ? navigationStylesNew : navigationStylesOld,
     "data-testid": "multiBodiedExtension-navigation"
   }, children);
 };
@@ -136,16 +51,21 @@ var MultiBodiedExtensionWrapper = function MultiBodiedExtensionWrapper(_ref3) {
     children = _ref3.children;
   var isTopLevel = path.length < 1;
   var centerAlignClass = isTopLevel && ['wide', 'full-width'].includes(layout) ? _consts.RendererCssClassName.EXTENSION_CENTER_ALIGN : '';
+
+  // This hierarchy is copied from regular extension (see extension.tsx)
   return (0, _react.jsx)("div", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    className: "".concat(_consts.RendererCssClassName.EXTENSION, " ").concat(centerAlignClass, " ").concat(_consts.RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER),
+    className: "".concat(_consts.RendererCssClassName.EXTENSION, " ").concat(centerAlignClass),
     style: {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
       width: isTopLevel ? (0, _utils.calcBreakoutWidth)(layout, width) : '100%'
     },
     "data-layout": layout,
     "data-testid": "multiBodiedExtension--wrapper"
-  }, children);
+  }, (0, _react.jsx)("div", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    className: "".concat(_consts.RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER)
+  }, children));
 };
 var MultiBodiedExtension = function MultiBodiedExtension(props) {
   var _extensionContext$pri;
@@ -195,41 +115,24 @@ var MultiBodiedExtension = function MultiBodiedExtension(props) {
       localId: localId,
       fragmentLocalId: fragmentLocalId
     };
-    var renderMultiBodiedExtension = function renderMultiBodiedExtension() {
-      var MultiBodiedExtensionNodeRenderer = (0, _react.jsx)(NodeRenderer, {
+    if (privateProps.__allowBodiedOverride) {
+      return (0, _react.jsx)(NodeRenderer, {
         node: node,
         actions: actions
       });
-      try {
-        if ( /*#__PURE__*/_react2.default.isValidElement(MultiBodiedExtensionNodeRenderer)) {
-          // Return the content directly if it's a valid JSX.Element
-          return (0, _extension.renderExtension)(MultiBodiedExtensionNodeRenderer, 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 (0, _extension.renderExtension)(children, layout, {
-        isTopLevel: path.length < 1
-      });
-    };
-    if (privateProps.__allowBodiedOverride) {
-      return renderMultiBodiedExtension();
     } else {
-      return (0, _react.jsx)(_react2.default.Fragment, null, (0, _react.jsx)(MultiBodiedExtensionNavigation, null, renderMultiBodiedExtension()), (0, _react.jsx)(MultiBodiedExtensionChildrenContainer, null, children));
+      return (0, _react.jsx)(_react2.default.Fragment, null, (0, _react.jsx)(MultiBodiedExtensionNavigation, null, (0, _react.jsx)(NodeRenderer, {
+        node: node,
+        actions: actions
+      })), (0, _react.jsx)(MultiBodiedExtensionChildrenContainer, null, children));
     }
-  }, [loading, extensionContext, layout, path, marks, extensionKey, extensionType, parameters, content, localId, actions, children]);
+  }, [loading, extensionContext, marks, extensionKey, extensionType, parameters, content, localId, actions, children]);
 
+  // make the frame visible
   // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
-  var containerActiveFrameStyles = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\t\t.multiBodiedExtension--frames\n\t\t\t> [data-extension-frame='true']:nth-of-type(", ") {\n\t\t\tdisplay: block;\n\t\t\tmargin-left: 0;\n\t\t\tmargin-right: 0;\n\t\t}\n\t"])), activeChildIndex + 1);
+  var containerActiveFrameStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t\t& [data-extension-frame='true']:nth-of-type(", ") {\n\t\t\tdisplay: block;\n\t\t}\n\t"])), activeChildIndex + 1);
   return (0, _react.jsx)("section", {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    className: "multiBodiedExtension--container",
-    css: [(0, _platformFeatureFlags.fg)('platform_editor_emotion_refactor_renderer') ? containerStylesNew : containerStylesOld, containerActiveFrameStyles],
+    css: [containerStyles, containerActiveFrameStyles],
     "data-testid": "multiBodiedExtension--container",
     "data-active-child-index": activeChildIndex,
     "data-layout": layout

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

@@ -10,12 +10,12 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
-var _hint = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/hint"));
+var _lightbulbEditorHint = _interopRequireDefault(require("@atlaskit/icon/core/migration/lightbulb--editor-hint"));
 var _adfSchema = require("@atlaskit/adf-schema");
 var _panel = require("@atlaskit/editor-common/panel");
 var _editorPalette = require("@atlaskit/editor-palette");
-var _emoji = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/emoji"));
-var _emoji2 = _interopRequireDefault(require("./emoji"));
+var _emojiEditorEmoji = _interopRequireDefault(require("@atlaskit/icon/core/migration/emoji--editor-emoji"));
+var _emoji = _interopRequireDefault(require("./emoji"));
 var _icons = require("@atlaskit/editor-common/icons");
 var _consts = require("@atlaskit/editor-shared-styles/consts");
 var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react");
@@ -208,10 +208,10 @@ var panelIcons = {
   info: _icons.PanelInfoIcon,
   success: _icons.PanelSuccessIcon,
   note: _icons.PanelNoteIcon,
-  tip: _hint.default,
+  tip: _lightbulbEditorHint.default,
   warning: _icons.PanelWarningIcon,
   error: _icons.PanelErrorIcon,
-  custom: _emoji.default
+  custom: _emojiEditorEmoji.default
 };
 var Panel = function Panel(props) {
   var allowCustomPanels = props.allowCustomPanels,
@@ -228,7 +228,7 @@ var Panel = function Panel(props) {
   var getIcon = function getIcon() {
     if (panelType === _adfSchema.PanelType.CUSTOM) {
       if (panelIcon && providers) {
-        return (0, _react2.jsx)(_emoji2.default, {
+        return (0, _react2.jsx)(_emoji.default, {
           id: panelIconId,
           text: panelIconText,
           shortName: panelIcon,

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.4.5";
+var packageVersion = "114.5.1";
 var setAsQueryContainerStyles = (0, _react2.css)({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size',

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

@@ -8,7 +8,7 @@ import { useState } from 'react';
 import { injectIntl } from 'react-intl-next';
 import Tooltip from '@atlaskit/tooltip';
 import Button from '@atlaskit/button/custom-theme-button';
-import CopyIcon from '@atlaskit/icon/glyph/copy';
+import CopyIcon from '@atlaskit/icon/core/migration/copy';
 import { copyTextToClipboard } from '../../../utils/clipboard';
 import { codeBlockButtonMessages } from '@atlaskit/editor-common/messages';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '../../../../analytics/enums';

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

@@ -5,17 +5,20 @@
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx, css } from '@emotion/react';
-import { sharedMultiBodiedExtensionStyles } from '@atlaskit/editor-common/ui';
 import { fg } from '@atlaskit/platform-feature-flags';
-const containerCSS = css({
+const containerCSSOld = css({
   minHeight: '100px',
   flexBasis: '100%'
 });
+const containerCSSNew = css({
+  padding: `${"var(--ds-space-100, 8px)"}`,
+  minHeight: '100px',
+  // by default all frames are hidden, this style is overridden in multiBodiedExtensions for active frame
+  display: 'none'
+});
 const ExtensionFrame = props => {
   return jsx("div", {
-    css: [containerCSS, fg('platform_editor_multi_body_extension_extensibility') &&
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    sharedMultiBodiedExtensionStyles.extensionFrameContent],
+    css: [fg('platform_editor_multi_body_extension_extensibility') ? containerCSSNew : containerCSSOld],
     "data-extension-frame": "true"
   }, props.children);
 };

package/dist/es2019/react/nodes/heading-anchor.js

@@ -9,7 +9,7 @@ import React from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { N200, N500, B400 } from '@atlaskit/theme/colors';
-import LinkIcon from '@atlaskit/icon/glyph/link';
+import LinkIcon from '@atlaskit/icon/core/migration/link';
 import Tooltip from '@atlaskit/tooltip';
 import { injectIntl } from 'react-intl-next';
 import { headingAnchorLinkMessages } from '../../messages';
@@ -87,8 +87,8 @@ class HeadingAnchor extends React.PureComponent {
         type: "button"
       }, jsx(LinkIcon, {
         label: this.getCopyAriaLabel(),
-        size: this.props.level > 3 ? 'small' : 'medium',
-        primaryColor: this.state.isClicked ? `var(--ds-icon-selected, ${B400})` : `var(--ds-icon-subtle, ${N200})`
+        LEGACY_size: this.props.level > 3 ? 'small' : 'medium',
+        color: this.state.isClicked ? `var(--ds-icon-selected, ${B400})` : `var(--ds-icon-subtle, ${N200})`
       }));
     });
   }

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

@@ -7,116 +7,17 @@
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx, css } from '@emotion/react';
-import { N40 } from '@atlaskit/theme/colors';
 import React, { useState } from 'react';
-import { renderExtension } from './extension';
-import { WidthConsumer, sharedMultiBodiedExtensionStyles } from '@atlaskit/editor-common/ui';
+import { WidthConsumer } from '@atlaskit/editor-common/ui';
 import { RendererCssClassName } from '../../consts';
 import { calcBreakoutWidth } from '@atlaskit/editor-common/utils';
 import { useMultiBodiedExtensionActions } from './multiBodiedExtension/actions';
 import { useMultiBodiedExtensionContext } from './multiBodiedExtension/context';
-import { fg } from '@atlaskit/platform-feature-flags';
-// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Ignored via go/DSP-18766
-const navigationStylesOld = css`
-	${sharedMultiBodiedExtensionStyles.mbeNavigation};
-	margin-left: 0 !important;
-	margin-right: 0 !important;
-	.mbe-add-tab-button,
-	.mbe-remove-tab {
-		display: none;
-	}
-`;
-
-// localized sharedMultiBodiedExtensionStyles.mbeNavigation in navigationCssExtendedNew
-const navigationStylesNew = css({
-  borderTopLeftRadius: "var(--ds-border-radius, 3px)",
-  borderTopRightRadius: "var(--ds-border-radius, 3px)",
-  userSelect: 'none',
-  WebkitUserModify: 'read-only',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
-  borderBottom: 'none !important',
-  background: "var(--ds-surface, white)",
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '&.remove-margins': {
-    margin: "var(--ds-space-negative-100, -8px)"
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '&.remove-border': {
-    border: 'none'
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
-  marginLeft: '0 !important',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
-  marginRight: '0 !important',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '.mbe-add-tab-button, .mbe-remove-tab': {
-    display: 'none'
-  }
-});
-
-// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
-const containerStylesOld = css`
-	${sharedMultiBodiedExtensionStyles.mbeExtensionContainer};
-	.ak-renderer-extension {
-		margin-top: 0 !important;
-	}
-
-	[data-layout='full-width'],
-	[data-layout='wide'] {
-		.multiBodiedExtension-navigation {
-			border-right: 3px solid ${`var(--ds-border, ${N40})`} !important;
-		}
-	}
-`;
-
-// localized sharedMultiBodiedExtensionStyles.mbeExtensionContainer in containerStylesNew
-// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
-const containerStylesNew = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
-  background: 'transparent !important',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-  'padding:': {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
-    left: `${"var(--ds-space-100, 8px)"} !important`,
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
-    right: `${"var(--ds-space-100, 8px)"} !important`
-  },
-  paddingBottom: "var(--ds-space-100, 8px)",
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '&.remove-padding': {
-    paddingBottom: 0
-  },
-  position: 'relative',
-  verticalAlign: 'middle',
-  cursor: 'pointer',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '.multiBodiedExtension-handler-result': {
-    marginLeft: "var(--ds-space-100, 8px)"
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  ".multiBodiedExtension-content-dom-wrapper > [data-extension-frame='true'], .multiBodiedExtension--frames > [data-extension-frame='true']": {
-    display: 'none',
-    background: 'transparent'
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '.multiBodiedExtension-content-dom-wrapper, .multiBodiedExtension--frames': {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-    "[data-extension-frame='true'] > :not(style):first-child, [data-extension-frame='true'] > style:first-child + *": {
-      marginTop: 0
-    }
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '.ak-renderer-extension': {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
-    marginTop: '0 !important'
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '[data-layout="full-width"], [data-layout="wide"]': {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '.multiBodiedExtension-navigation': {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
-      borderRight: `3px solid ${`var(--ds-border, ${N40})`} !important`
-    }
+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': {
+    marginTop: 0
   }
 });
 const MultiBodiedExtensionChildrenContainer = ({
@@ -124,18 +25,12 @@ const MultiBodiedExtensionChildrenContainer = ({
 }) => {
   return jsx("article", {
     "data-testid": "multiBodiedExtension--frames"
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    ,
-    className: `multiBodiedExtension--frames`
   }, children);
 };
 const MultiBodiedExtensionNavigation = ({
   children
 }) => {
   return jsx("nav", {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    className: "multiBodiedExtension-navigation",
-    css: fg('platform_editor_emotion_refactor_renderer') ? navigationStylesNew : navigationStylesOld,
     "data-testid": "multiBodiedExtension-navigation"
   }, children);
 };
@@ -147,16 +42,21 @@ const MultiBodiedExtensionWrapper = ({
 }) => {
   const isTopLevel = path.length < 1;
   const centerAlignClass = isTopLevel && ['wide', 'full-width'].includes(layout) ? RendererCssClassName.EXTENSION_CENTER_ALIGN : '';
+
+  // This hierarchy is copied from regular extension (see extension.tsx)
   return jsx("div", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    className: `${RendererCssClassName.EXTENSION} ${centerAlignClass} ${RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER}`,
+    className: `${RendererCssClassName.EXTENSION} ${centerAlignClass}`,
     style: {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
       width: isTopLevel ? calcBreakoutWidth(layout, width) : '100%'
     },
     "data-layout": layout,
     "data-testid": "multiBodiedExtension--wrapper"
-  }, children);
+  }, jsx("div", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    className: `${RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER}`
+  }, children));
 };
 const MultiBodiedExtension = props => {
   var _extensionContext$pri;
@@ -204,48 +104,28 @@ const MultiBodiedExtension = props => {
       localId,
       fragmentLocalId
     };
-    const renderMultiBodiedExtension = () => {
-      const MultiBodiedExtensionNodeRenderer = jsx(NodeRenderer, {
+    if (privateProps.__allowBodiedOverride) {
+      return jsx(NodeRenderer, {
         node: node,
         actions: actions
       });
-      try {
-        if ( /*#__PURE__*/React.isValidElement(MultiBodiedExtensionNodeRenderer)) {
-          // Return the content directly if it's a valid JSX.Element
-          return renderExtension(MultiBodiedExtensionNodeRenderer, 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
-      });
-    };
-    if (privateProps.__allowBodiedOverride) {
-      return renderMultiBodiedExtension();
     } else {
-      return jsx(React.Fragment, null, jsx(MultiBodiedExtensionNavigation, null, renderMultiBodiedExtension()), jsx(MultiBodiedExtensionChildrenContainer, null, children));
+      return jsx(React.Fragment, null, jsx(MultiBodiedExtensionNavigation, null, jsx(NodeRenderer, {
+        node: node,
+        actions: actions
+      })), jsx(MultiBodiedExtensionChildrenContainer, null, children));
     }
-  }, [loading, extensionContext, layout, path, marks, extensionKey, extensionType, parameters, content, localId, actions, children]);
+  }, [loading, extensionContext, marks, extensionKey, extensionType, parameters, content, localId, actions, children]);
 
+  // make the frame visible
   // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
   const containerActiveFrameStyles = css`
-		.multiBodiedExtension--frames
-			> [data-extension-frame='true']:nth-of-type(${activeChildIndex + 1}) {
+		& [data-extension-frame='true']:nth-of-type(${activeChildIndex + 1}) {
 			display: block;
-			margin-left: 0;
-			margin-right: 0;
 		}
 	`;
   return jsx("section", {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    className: "multiBodiedExtension--container",
-    css: [fg('platform_editor_emotion_refactor_renderer') ? containerStylesNew : containerStylesOld, containerActiveFrameStyles],
+    css: [containerStyles, containerActiveFrameStyles],
     "data-testid": "multiBodiedExtension--container",
     "data-active-child-index": activeChildIndex,
     "data-layout": layout

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

@@ -6,11 +6,11 @@ import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
-import TipIcon from '@atlaskit/icon/glyph/editor/hint';
+import TipIcon from '@atlaskit/icon/core/migration/lightbulb--editor-hint';
 import { PanelType } from '@atlaskit/adf-schema';
 import { PanelSharedCssClassName, panelSharedStylesWithoutPrefix } from '@atlaskit/editor-common/panel';
 import { hexToEditorBackgroundPaletteColor } from '@atlaskit/editor-palette';
-import EmojiIcon from '@atlaskit/icon/glyph/editor/emoji';
+import EmojiIcon from '@atlaskit/icon/core/migration/emoji--editor-emoji';
 import EmojiItem from './emoji';
 import { PanelInfoIcon, PanelSuccessIcon, PanelNoteIcon, PanelWarningIcon, PanelErrorIcon } from '@atlaskit/editor-common/icons';
 import { akEditorCustomIconSize } from '@atlaskit/editor-shared-styles/consts';

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.4.5";
+const packageVersion = "114.5.1";
 const setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size',

package/dist/esm/react/nodes/codeBlock/components/codeBlockCopyButton.js

@@ -9,7 +9,7 @@ import { useState } from 'react';
 import { injectIntl } from 'react-intl-next';
 import Tooltip from '@atlaskit/tooltip';
 import Button from '@atlaskit/button/custom-theme-button';
-import CopyIcon from '@atlaskit/icon/glyph/copy';
+import CopyIcon from '@atlaskit/icon/core/migration/copy';
 import { copyTextToClipboard } from '../../../utils/clipboard';
 import { codeBlockButtonMessages } from '@atlaskit/editor-common/messages';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '../../../../analytics/enums';

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

@@ -5,17 +5,20 @@
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx, css } from '@emotion/react';
-import { sharedMultiBodiedExtensionStyles } from '@atlaskit/editor-common/ui';
 import { fg } from '@atlaskit/platform-feature-flags';
-var containerCSS = css({
+var containerCSSOld = css({
   minHeight: '100px',
   flexBasis: '100%'
 });
+var containerCSSNew = css({
+  padding: "var(--ds-space-100, 8px)",
+  minHeight: '100px',
+  // by default all frames are hidden, this style is overridden in multiBodiedExtensions for active frame
+  display: 'none'
+});
 var ExtensionFrame = function ExtensionFrame(props) {
   return jsx("div", {
-    css: [containerCSS, fg('platform_editor_multi_body_extension_extensibility') &&
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    sharedMultiBodiedExtensionStyles.extensionFrameContent],
+    css: [fg('platform_editor_multi_body_extension_extensibility') ? containerCSSNew : containerCSSOld],
     "data-extension-frame": "true"
   }, props.children);
 };

package/dist/esm/react/nodes/heading-anchor.js

@@ -20,7 +20,7 @@ import React from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { N200, N500, B400 } from '@atlaskit/theme/colors';
-import LinkIcon from '@atlaskit/icon/glyph/link';
+import LinkIcon from '@atlaskit/icon/core/migration/link';
 import Tooltip from '@atlaskit/tooltip';
 import { injectIntl } from 'react-intl-next';
 import { headingAnchorLinkMessages } from '../../messages';
@@ -115,8 +115,8 @@ var HeadingAnchor = /*#__PURE__*/function (_React$PureComponent) {
         type: "button"
       }, jsx(LinkIcon, {
         label: _this.getCopyAriaLabel(),
-        size: _this.props.level > 3 ? 'small' : 'medium',
-        primaryColor: _this.state.isClicked ? "var(--ds-icon-selected, ".concat(B400, ")") : "var(--ds-icon-subtle, ".concat(N200, ")")
+        LEGACY_size: _this.props.level > 3 ? 'small' : 'medium',
+        color: _this.state.isClicked ? "var(--ds-icon-selected, ".concat(B400, ")") : "var(--ds-icon-subtle, ".concat(N200, ")")
       }));
     });
     return _this;

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

@@ -1,6 +1,6 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3;
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+var _templateObject;
 /* eslint-disable @atlaskit/design-system/prefer-primitives, @atlaskit/design-system/consistent-css-prop-usage */
 /**
  * @jsxRuntime classic
@@ -10,113 +10,28 @@ var _templateObject, _templateObject2, _templateObject3;
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx, css } from '@emotion/react';
-import { N40 } from '@atlaskit/theme/colors';
 import React, { useState } from 'react';
-import { renderExtension } from './extension';
-import { WidthConsumer, sharedMultiBodiedExtensionStyles } from '@atlaskit/editor-common/ui';
+import { WidthConsumer } from '@atlaskit/editor-common/ui';
 import { RendererCssClassName } from '../../consts';
 import { calcBreakoutWidth } from '@atlaskit/editor-common/utils';
 import { useMultiBodiedExtensionActions } from './multiBodiedExtension/actions';
 import { useMultiBodiedExtensionContext } from './multiBodiedExtension/context';
-import { fg } from '@atlaskit/platform-feature-flags';
-// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Ignored via go/DSP-18766
-var navigationStylesOld = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t", ";\n\tmargin-left: 0 !important;\n\tmargin-right: 0 !important;\n\t.mbe-add-tab-button,\n\t.mbe-remove-tab {\n\t\tdisplay: none;\n\t}\n"])), sharedMultiBodiedExtensionStyles.mbeNavigation);
-
-// localized sharedMultiBodiedExtensionStyles.mbeNavigation in navigationCssExtendedNew
-var navigationStylesNew = css({
-  borderTopLeftRadius: "var(--ds-border-radius, 3px)",
-  borderTopRightRadius: "var(--ds-border-radius, 3px)",
-  userSelect: 'none',
-  WebkitUserModify: 'read-only',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
-  borderBottom: 'none !important',
-  background: "var(--ds-surface, white)",
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '&.remove-margins': {
-    margin: "var(--ds-space-negative-100, -8px)"
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '&.remove-border': {
-    border: 'none'
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
-  marginLeft: '0 !important',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
-  marginRight: '0 !important',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '.mbe-add-tab-button, .mbe-remove-tab': {
-    display: 'none'
-  }
-});
-
-// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
-var containerStylesOld = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n\t", ";\n\t.ak-renderer-extension {\n\t\tmargin-top: 0 !important;\n\t}\n\n\t[data-layout='full-width'],\n\t[data-layout='wide'] {\n\t\t.multiBodiedExtension-navigation {\n\t\t\tborder-right: 3px solid ", " !important;\n\t\t}\n\t}\n"])), sharedMultiBodiedExtensionStyles.mbeExtensionContainer, "var(--ds-border, ".concat(N40, ")"));
-
-// localized sharedMultiBodiedExtensionStyles.mbeExtensionContainer in containerStylesNew
-// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
-var containerStylesNew = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
-  background: 'transparent !important',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-  'padding:': {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
-    left: "var(--ds-space-100, 8px)".concat(" !important"),
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
-    right: "var(--ds-space-100, 8px)".concat(" !important")
-  },
-  paddingBottom: "var(--ds-space-100, 8px)",
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '&.remove-padding': {
-    paddingBottom: 0
-  },
-  position: 'relative',
-  verticalAlign: 'middle',
-  cursor: 'pointer',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '.multiBodiedExtension-handler-result': {
-    marginLeft: "var(--ds-space-100, 8px)"
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  ".multiBodiedExtension-content-dom-wrapper > [data-extension-frame='true'], .multiBodiedExtension--frames > [data-extension-frame='true']": {
-    display: 'none',
-    background: 'transparent'
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '.multiBodiedExtension-content-dom-wrapper, .multiBodiedExtension--frames': {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-    "[data-extension-frame='true'] > :not(style):first-child, [data-extension-frame='true'] > style:first-child + *": {
-      marginTop: 0
-    }
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '.ak-renderer-extension': {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
-    marginTop: '0 !important'
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '[data-layout="full-width"], [data-layout="wide"]': {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '.multiBodiedExtension-navigation': {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
-      borderRight: "3px solid ".concat("var(--ds-border, ".concat(N40, ")"), " !important")
-    }
+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': {
+    marginTop: 0
   }
 });
 var MultiBodiedExtensionChildrenContainer = function MultiBodiedExtensionChildrenContainer(_ref) {
   var children = _ref.children;
   return jsx("article", {
     "data-testid": "multiBodiedExtension--frames"
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    ,
-    className: "multiBodiedExtension--frames"
   }, children);
 };
 var MultiBodiedExtensionNavigation = function MultiBodiedExtensionNavigation(_ref2) {
   var children = _ref2.children;
   return jsx("nav", {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    className: "multiBodiedExtension-navigation",
-    css: fg('platform_editor_emotion_refactor_renderer') ? navigationStylesNew : navigationStylesOld,
     "data-testid": "multiBodiedExtension-navigation"
   }, children);
 };
@@ -127,16 +42,21 @@ var MultiBodiedExtensionWrapper = function MultiBodiedExtensionWrapper(_ref3) {
     children = _ref3.children;
   var isTopLevel = path.length < 1;
   var centerAlignClass = isTopLevel && ['wide', 'full-width'].includes(layout) ? RendererCssClassName.EXTENSION_CENTER_ALIGN : '';
+
+  // This hierarchy is copied from regular extension (see extension.tsx)
   return jsx("div", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    className: "".concat(RendererCssClassName.EXTENSION, " ").concat(centerAlignClass, " ").concat(RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER),
+    className: "".concat(RendererCssClassName.EXTENSION, " ").concat(centerAlignClass),
     style: {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
       width: isTopLevel ? calcBreakoutWidth(layout, width) : '100%'
     },
     "data-layout": layout,
     "data-testid": "multiBodiedExtension--wrapper"
-  }, children);
+  }, jsx("div", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    className: "".concat(RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER)
+  }, children));
 };
 var MultiBodiedExtension = function MultiBodiedExtension(props) {
   var _extensionContext$pri;
@@ -186,41 +106,24 @@ var MultiBodiedExtension = function MultiBodiedExtension(props) {
       localId: localId,
       fragmentLocalId: fragmentLocalId
     };
-    var renderMultiBodiedExtension = function renderMultiBodiedExtension() {
-      var MultiBodiedExtensionNodeRenderer = jsx(NodeRenderer, {
+    if (privateProps.__allowBodiedOverride) {
+      return jsx(NodeRenderer, {
         node: node,
         actions: actions
       });
-      try {
-        if ( /*#__PURE__*/React.isValidElement(MultiBodiedExtensionNodeRenderer)) {
-          // Return the content directly if it's a valid JSX.Element
-          return renderExtension(MultiBodiedExtensionNodeRenderer, 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
-      });
-    };
-    if (privateProps.__allowBodiedOverride) {
-      return renderMultiBodiedExtension();
     } else {
-      return jsx(React.Fragment, null, jsx(MultiBodiedExtensionNavigation, null, renderMultiBodiedExtension()), jsx(MultiBodiedExtensionChildrenContainer, null, children));
+      return jsx(React.Fragment, null, jsx(MultiBodiedExtensionNavigation, null, jsx(NodeRenderer, {
+        node: node,
+        actions: actions
+      })), jsx(MultiBodiedExtensionChildrenContainer, null, children));
     }
-  }, [loading, extensionContext, layout, path, marks, extensionKey, extensionType, parameters, content, localId, actions, children]);
+  }, [loading, extensionContext, marks, extensionKey, extensionType, parameters, content, localId, actions, children]);
 
+  // make the frame visible
   // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
-  var containerActiveFrameStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n\t\t.multiBodiedExtension--frames\n\t\t\t> [data-extension-frame='true']:nth-of-type(", ") {\n\t\t\tdisplay: block;\n\t\t\tmargin-left: 0;\n\t\t\tmargin-right: 0;\n\t\t}\n\t"])), activeChildIndex + 1);
+  var containerActiveFrameStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t\t& [data-extension-frame='true']:nth-of-type(", ") {\n\t\t\tdisplay: block;\n\t\t}\n\t"])), activeChildIndex + 1);
   return jsx("section", {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    className: "multiBodiedExtension--container",
-    css: [fg('platform_editor_emotion_refactor_renderer') ? containerStylesNew : containerStylesOld, containerActiveFrameStyles],
+    css: [containerStyles, containerActiveFrameStyles],
     "data-testid": "multiBodiedExtension--container",
     "data-active-child-index": activeChildIndex,
     "data-layout": layout

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

@@ -11,11 +11,11 @@ var _excluded = ["backgroundColor", "hasIcon"],
 import React from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
-import TipIcon from '@atlaskit/icon/glyph/editor/hint';
+import TipIcon from '@atlaskit/icon/core/migration/lightbulb--editor-hint';
 import { PanelType } from '@atlaskit/adf-schema';
 import { PanelSharedCssClassName, panelSharedStylesWithoutPrefix } from '@atlaskit/editor-common/panel';
 import { hexToEditorBackgroundPaletteColor } from '@atlaskit/editor-palette';
-import EmojiIcon from '@atlaskit/icon/glyph/editor/emoji';
+import EmojiIcon from '@atlaskit/icon/core/migration/emoji--editor-emoji';
 import EmojiItem from './emoji';
 import { PanelInfoIcon, PanelSuccessIcon, PanelNoteIcon, PanelWarningIcon, PanelErrorIcon } from '@atlaskit/editor-common/icons';
 import { akEditorCustomIconSize } from '@atlaskit/editor-shared-styles/consts';

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.4.5";
+var packageVersion = "114.5.1";
 var setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size',

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "114.4.5",
+	"version": "114.5.1",
 	"description": "Renderer component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -54,7 +54,7 @@
 		"@atlaskit/status": "^3.0.0",
 		"@atlaskit/task-decision": "^19.1.0",
 		"@atlaskit/theme": "^18.0.0",
-		"@atlaskit/tmp-editor-statsig": "^4.3.0",
+		"@atlaskit/tmp-editor-statsig": "^4.4.0",
 		"@atlaskit/tokens": "^4.5.0",
 		"@atlaskit/tooltip": "^20.0.0",
 		"@atlaskit/visually-hidden": "^3.0.0",