@atlaskit/renderer 120.2.3 → 120.2.5

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/renderer
 
+## 120.2.5
+
+### Patch Changes
+
+- [#189276](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/189276)
+  [`95e1796eaa4d0`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/95e1796eaa4d0) -
+  [ux] Applies reduced padding in Full page renderer on narrow screens.
+- Updated dependencies
+
+## 120.2.4
+
+### Patch Changes
+
+- [#185241](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/185241)
+  [`0d1bffce3fedd`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0d1bffce3fedd) -
+  [ux] View embed as block card when page width smaller or equal to 600px
+- Updated dependencies
+
 ## 120.2.3
 
 ### Patch Changes

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = EmbedCard;
+exports.default = exports.EmbedOrBlockCardInternal = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("@emotion/react");
@@ -15,11 +15,14 @@ var _linkProvider = require("@atlaskit/link-provider");
 var _ui = require("@atlaskit/editor-common/ui");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _fallback = require("./fallback");
 var _style = require("../../ui/Renderer/style");
 var _getCardClickHandler = require("../utils/getCardClickHandler");
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _PortalContext = require("../../ui/Renderer/PortalContext");
+var _blockCard = _interopRequireDefault(require("./blockCard"));
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -46,7 +49,7 @@ var uIMediaSingleLayoutStyles = (0, _react.css)({
   marginLeft: '50%',
   transform: 'translateX(-50%)'
 });
-function EmbedCard(props) {
+function EmbedCardInternal(props) {
   var _smartLinks$frameStyl;
   var url = props.url,
     data = props.data,
@@ -219,4 +222,47 @@ function EmbedCard(props) {
       }, cardComponent)))))
     );
   }));
-}
+}
+var EmbedOrBlockCardInternal = exports.EmbedOrBlockCardInternal = function EmbedOrBlockCardInternal(_ref5) {
+  var url = _ref5.url,
+    data = _ref5.data,
+    eventHandlers = _ref5.eventHandlers,
+    portal = _ref5.portal,
+    originalHeight = _ref5.originalHeight,
+    originalWidth = _ref5.originalWidth,
+    embedWidth = _ref5.width,
+    layout = _ref5.layout,
+    rendererAppearance = _ref5.rendererAppearance,
+    isInsideOfBlockNode = _ref5.isInsideOfBlockNode,
+    smartLinks = _ref5.smartLinks,
+    isInsideOfInlineExtension = _ref5.isInsideOfInlineExtension;
+  var _useContext = (0, _react2.useContext)(_ui.WidthContext),
+    width = _useContext.width;
+  var viewAsBlockCard = width && width <= _editorSharedStyles.akEditorFullPageNarrowBreakout;
+  return viewAsBlockCard ? (0, _react.jsx)(_blockCard.default, {
+    url: url,
+    data: data,
+    eventHandlers: eventHandlers,
+    portal: portal,
+    layout: layout,
+    rendererAppearance: rendererAppearance,
+    smartLinks: smartLinks
+  }) : (0, _react.jsx)(EmbedCardInternal, {
+    url: url,
+    data: data,
+    eventHandlers: eventHandlers,
+    portal: portal,
+    originalHeight: originalHeight,
+    originalWidth: originalWidth,
+    width: embedWidth,
+    layout: layout,
+    rendererAppearance: rendererAppearance,
+    isInsideOfBlockNode: isInsideOfBlockNode,
+    smartLinks: smartLinks,
+    isInsideOfInlineExtension: isInsideOfInlineExtension
+  });
+};
+var EmbedCardWithCondition = (0, _platformFeatureFlagsReact.componentWithCondition)(function () {
+  return (0, _expValEquals.expValEquals)('platform_editor_preview_panel_responsiveness', 'isEnabled', true);
+}, EmbedOrBlockCardInternal, EmbedCardInternal);
+var _default = exports.default = EmbedCardWithCondition;

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

@@ -30,6 +30,7 @@ var _SmartCardStorage = require("../../ui/SmartCardStorage");
 var _sticky = require("./table/sticky");
 var _table = require("./table/table");
 var _appearance = require("../utils/appearance");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _TableStickyScrollbar = require("./TableStickyScrollbar");
 var _tableNew = require("./tableNew");
 function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
@@ -425,7 +426,8 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
       // Please consider changes below carefully to not negatively impact SSR
       // `renderWidth` cannot be depended on during SSR
       var isRenderWidthValid = !!renderWidth && renderWidth > 0;
-      var renderWidthCSS = rendererAppearance === 'full-page' ? "100cqw - ".concat(_style.FullPagePadding, "px * 2") : "100cqw";
+      var fullPageRendererWidthCSS = (0, _expValEquals.expValEquals)('platform_editor_preview_panel_responsiveness', 'isEnabled', true) ? 'calc(100cqw - var(--ak-renderer--full-page-gutter) * 2)' : "100cqw - ".concat(_style.FullPagePadding, "px * 2");
+      var renderWidthCSS = rendererAppearance === 'full-page' ? fullPageRendererWidthCSS : "100cqw";
       var calcDefaultLayoutWidthByAppearance = function calcDefaultLayoutWidthByAppearance(rendererAppearance, tableNode) {
         if (rendererAppearance === 'full-width' && !(tableNode !== null && tableNode !== void 0 && tableNode.attrs.width)) {
           return [isRenderWidthValid ? Math.min(_editorSharedStyles.akEditorFullWidthLayoutWidth, renderWidth) : _editorSharedStyles.akEditorFullWidthLayoutWidth, "min(".concat(_editorSharedStyles.akEditorFullWidthLayoutWidth, "px, ").concat(renderWidthCSS, ")")];

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

@@ -16,6 +16,7 @@ var _styles = require("@atlaskit/editor-common/styles");
 var _nodeWidth = require("@atlaskit/editor-common/node-width");
 var _style = require("../../ui/Renderer/style");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _utils = require("@atlaskit/editor-common/utils");
 var _types = require("@atlaskit/editor-common/types");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
@@ -399,7 +400,8 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
       var stickyMode = this.state.stickyMode;
       var lineLengthFixedWidth = _editorSharedStyles.akEditorDefaultLayoutWidth;
       var updatedLayout;
-      var renderWidthCSS = rendererAppearance === 'full-page' ? "100cqw - ".concat(_style.FullPagePadding, "px * 2") : "100cqw";
+      var fullPageRendererWidthCSS = (0, _expValEquals.expValEquals)('platform_editor_preview_panel_responsiveness', 'isEnabled', true) ? 'calc(100cqw - var(--ak-renderer--full-page-gutter) * 2)' : "100cqw - ".concat(_style.FullPagePadding, "px * 2");
+      var renderWidthCSS = rendererAppearance === 'full-page' ? fullPageRendererWidthCSS : "100cqw";
       var calcDefaultLayoutWidthByAppearance = function calcDefaultLayoutWidthByAppearance(rendererAppearance, tableNode) {
         if (rendererAppearance === 'full-width' && !(tableNode !== null && tableNode !== void 0 && tableNode.attrs.width)) {
           return "min(".concat(_editorSharedStyles.akEditorFullWidthLayoutWidth, "px, ").concat(renderWidthCSS, ")");

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

@@ -24,7 +24,7 @@ var _table2 = require("@atlaskit/editor-common/table");
 var _lightWeightCodeBlock = require("../../react/nodes/codeBlock/components/lightWeightCodeBlock");
 var _ugcTokens = require("@atlaskit/editor-common/ugc-tokens");
 var _getBaseFontSize = require("./get-base-font-size");
-var _css, _css5;
+var _css, _css7;
 /* eslint-disable @atlaskit/ui-styling-standard/no-important-styles */
 /* eslint-disable @atlaskit/ui-styling-standard/no-imported-style-values */
 /* eslint-disable @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values */
@@ -154,6 +154,15 @@ var responsiveBreakoutWidthFullWidth = (0, _react.css)((0, _defineProperty2.defa
 }, "@media (min-width: ".concat(akEditorBreakpointForSmallDevice, ")"), {
   '--ak-editor--breakout-wide-layout-width': "".concat(_editorSharedStyles.akEditorCalculatedWideLayoutWidth, "px")
 }));
+var responsiveBreakoutWidthWithReducedPadding = (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)({
+  '--ak-editor--breakout-container-without-gutter-width': "calc(100cqw - var(--ak-renderer--full-page-gutter) * 2)",
+  // Corresponds to the legacyContentStyles from `@atlaskit/editor-core` meant to introduce responsive breakout width.
+  '--ak-editor--breakout-wide-layout-width': "".concat(_editorSharedStyles.akEditorCalculatedWideLayoutWidthSmallViewport, "px")
+}, "@media (min-width: ".concat(akEditorBreakpointForSmallDevice, ")"), {
+  '--ak-editor--breakout-wide-layout-width': "".concat(_editorSharedStyles.akEditorCalculatedWideLayoutWidth, "px")
+}), "@media (max-width: ".concat(_editorSharedStyles.akEditorFullPageNarrowBreakout, "px)"), {
+  '--ak-editor--breakout-container-without-gutter-width': "calc(100cqw - var(--ak-renderer--full-page-gutter) * 2)"
+}));
 var hideHeadingCopyLinkWrapperStyles = (0, _react.css)({
   '& h1, & h2, & h3, & h4, & h5, & h6': (0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(_headingAnchor.HeadingAnchorWrapperClassName), {
     '&:focus-within': {
@@ -173,6 +182,16 @@ var rendererFullPageStyles = (0, _react.css)({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
   padding: "0 ".concat(_style.FullPagePadding, "px")
 });
+var rendererFullPageStylesWithReducedPadding = (0, _react.css)((0, _defineProperty2.default)({
+  '--ak-renderer--full-page-gutter': "".concat(_style.FullPagePadding, "px"),
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+  maxWidth: "".concat(_editorSharedStyles.akEditorDefaultLayoutWidth, "px"),
+  margin: '0 auto',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+  padding: "0 var(--ak-renderer--full-page-gutter)"
+}, "@media (max-width: ".concat(_editorSharedStyles.akEditorFullPageNarrowBreakout, "px)"), {
+  '--ak-renderer--full-page-gutter': "".concat(_editorSharedStyles.akEditorGutterPaddingReduced, "px")
+}));
 var rendererFullWidthStyles = (0, _react.css)({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
   maxWidth: "".concat(_editorSharedStyles.akEditorFullWidthLayoutWidth, "px"),
@@ -491,13 +510,13 @@ var paragraphSharedStyles = (0, _react.css)({
     letterSpacing: '-0.005em'
   }
 });
-var listsSharedStyles = (0, _react.css)((_css5 = {
+var listsSharedStyles = (0, _react.css)((_css7 = {
   /* =============== INDENTATION SPACING ========= */
   'ul, ol': {
     boxSizing: 'border-box',
     paddingLeft: "var(--ed--list--item-counter--padding, ".concat(_styles.listItemCounterPadding, "px)")
   }
-}, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_css5, "".concat(_adfSchema.orderedListSelector, ", ").concat(_adfSchema.bulletListSelector), {
+}, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_css7, "".concat(_adfSchema.orderedListSelector, ", ").concat(_adfSchema.bulletListSelector), {
   /*
    Ensures list item content adheres to the list's margin instead
    of filling the entire block row. This is important to allow
@@ -529,7 +548,7 @@ var listsSharedStyles = (0, _react.css)((_css5 = {
   listStyleType: 'lower-alpha'
 }), 'ol[data-indent-level="3"], ol[data-indent-level="6"]', {
   listStyleType: 'lower-roman'
-}), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_css5, 'ul[data-indent-level="1"], ul[data-indent-level="4"]', {
+}), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_css7, 'ul[data-indent-level="1"], ul[data-indent-level="4"]', {
   listStyleType: 'disc'
 }), 'ul[data-indent-level="2"], ul[data-indent-level="5"]', {
   listStyleType: 'circle'
@@ -1415,6 +1434,9 @@ var RendererStyleContainer = exports.RendererStyleContainer = function RendererS
     innerRef = props.innerRef,
     testId = props.testId;
   var isAdvancedLayoutsOn = (0, _experiments.editorExperiment)('advanced_layouts', true);
+  var isPreviewPanelResponsivenessOn = (0, _experiments.editorExperiment)('platform_editor_preview_panel_responsiveness', true, {
+    exposure: true
+  });
   return (
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions, @atlassian/a11y/interactive-element-not-keyboard-focusable
     (0, _react.jsx)("div", {
@@ -1431,13 +1453,13 @@ var RendererStyleContainer = exports.RendererStyleContainer = function RendererS
         '--ak-renderer-editor-font-heading-h6': "".concat((0, _ugcTokens.editorUGCToken)('editor.font.heading.h6')),
         '--ak-renderer-editor-font-normal-text': "".concat((0, _ugcTokens.editorUGCToken)('editor.font.body'))
       },
-      css: [baseStyles, hideHeadingCopyLinkWrapperStyles, appearance === 'full-page' && rendererFullPageStyles, appearance === 'full-width' && rendererFullWidthStyles, appearance === 'full-width' && !(0, _table.isTableResizingEnabled)(appearance) && rendererFullWidthStylesForTableResizing, telepointerStyles, whitespaceSharedStyles, blockquoteSharedStyles, (0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') ? headingsSharedStylesWithEditorUGC : headingsSharedStyles, headingWithAlignmentStyles, ruleSharedStyles, (0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') ? paragraphSharedStylesWithEditorUGC : paragraphSharedStyles, listsSharedStyles, _browser.browser.gecko && listsSharedStylesForGekko, indentationSharedStyles, (0, _platformFeatureFlags.fg)('platform_editor__renderer_indentation_text_margin') && indentationSharedStylesWithMarginFix, blockMarksSharedStyles, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles, tasksAndDecisionsStyles, smartCardStyles, smartCardStylesAvatarFix, (0, _platformFeatureFlags.fg)('smartcard_avatar_margin_fix') && smartCardStylesAvatarMarginFix, (0, _platformFeatureFlags.fg)('platform_editor_avatar_group_margin_fix') && smartCardStylesAvatarMarginFix2,
+      css: [baseStyles, hideHeadingCopyLinkWrapperStyles, appearance === 'full-page' && isPreviewPanelResponsivenessOn && rendererFullPageStylesWithReducedPadding, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && rendererFullPageStyles, appearance === 'full-width' && rendererFullWidthStyles, appearance === 'full-width' && !(0, _table.isTableResizingEnabled)(appearance) && rendererFullWidthStylesForTableResizing, telepointerStyles, whitespaceSharedStyles, blockquoteSharedStyles, (0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') ? headingsSharedStylesWithEditorUGC : headingsSharedStyles, headingWithAlignmentStyles, ruleSharedStyles, (0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') ? paragraphSharedStylesWithEditorUGC : paragraphSharedStyles, listsSharedStyles, _browser.browser.gecko && listsSharedStylesForGekko, indentationSharedStyles, (0, _platformFeatureFlags.fg)('platform_editor__renderer_indentation_text_margin') && indentationSharedStylesWithMarginFix, blockMarksSharedStyles, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles, tasksAndDecisionsStyles, smartCardStyles, smartCardStylesAvatarFix, (0, _platformFeatureFlags.fg)('smartcard_avatar_margin_fix') && smartCardStylesAvatarMarginFix, (0, _platformFeatureFlags.fg)('platform_editor_avatar_group_margin_fix') && smartCardStylesAvatarMarginFix2,
       // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
       (0, _platformFeatureFlags.fg)('editor_inline_comments_on_inline_nodes') && rendererAnnotationStyles,
       // eslint-disable-next-line @atlaskit/platform/no-preconditioning, @atlaskit/platform/ensure-feature-flag-prefix
       (0, _platformFeatureFlags.fg)('editor_inline_comments_on_inline_nodes') &&
       // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
-      (0, _platformFeatureFlags.fg)('annotations_align_editor_and_renderer_styles') && rendererAnnotationStylesCommentHeightFix, baseOtherStyles, allowNestedHeaderLinks && alignedHeadingAnchorStyle, mediaSingleSharedStyle, tableSharedStyle, tableRendererHeaderStylesForTableCellOnly, (0, _platformFeatureFlags.fg)('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, (0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes') ? firstNodeWithNotMarginTopWithNestedDnD : firstNodeWithNotMarginTop, rendererTableStyles, (0, _table.isStickyScrollbarEnabled)(appearance) && stickyScrollbarStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && allowNestedHeaderLinks && rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks, (0, _platformFeatureFlags.fg)('platform_editor_tables_numbered_column_correction') ? rendererTableColumnStyles : rendererTableColumnStylesOld, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, _browser.browser.safari && codeBlockInListSafariFixStyles, appearance === 'full-page' && responsiveBreakoutWidth, appearance === 'full-width' && responsiveBreakoutWidthFullWidth],
+      (0, _platformFeatureFlags.fg)('annotations_align_editor_and_renderer_styles') && rendererAnnotationStylesCommentHeightFix, baseOtherStyles, allowNestedHeaderLinks && alignedHeadingAnchorStyle, mediaSingleSharedStyle, tableSharedStyle, tableRendererHeaderStylesForTableCellOnly, (0, _platformFeatureFlags.fg)('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, (0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes') ? firstNodeWithNotMarginTopWithNestedDnD : firstNodeWithNotMarginTop, rendererTableStyles, (0, _table.isStickyScrollbarEnabled)(appearance) && stickyScrollbarStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && allowNestedHeaderLinks && rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks, (0, _platformFeatureFlags.fg)('platform_editor_tables_numbered_column_correction') ? rendererTableColumnStyles : rendererTableColumnStylesOld, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, _browser.browser.safari && codeBlockInListSafariFixStyles, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && responsiveBreakoutWidth, appearance === 'full-page' && isPreviewPanelResponsivenessOn && responsiveBreakoutWidthWithReducedPadding, appearance === 'full-width' && responsiveBreakoutWidthFullWidth],
       "data-testid": testId
     }, children)
   );

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

@@ -63,7 +63,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 var NORMAL_SEVERITY_THRESHOLD = exports.NORMAL_SEVERITY_THRESHOLD = 2000;
 var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "120.2.2";
+var packageVersion = "120.2.4";
 var setAsQueryContainerStyles = (0, _react2.css)({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

package/dist/cjs/ui/annotations/hooks/use-events.js

@@ -94,9 +94,6 @@ var useHasFocusEvent = exports.useHasFocusEvent = function useHasFocusEvent(_ref
     };
     var removeFocus = function removeFocus() {
       setHasFocus(false);
-      if (document.activeElement instanceof HTMLElement) {
-        document.activeElement.blur();
-      }
     };
     var removeHoverEffect = function removeHoverEffect() {
       setIsHovered(false);
@@ -200,9 +197,6 @@ var useAnnotationClickEvent = exports.useAnnotationClickEvent = function useAnno
         annotations: [],
         clickElementTarget: undefined
       });
-      if (document.activeElement instanceof HTMLElement) {
-        document.activeElement.blur();
-      }
     };
     if (!isAnnotationManagerEnabled) {
       updateSubscriber.on(_types.AnnotationUpdateEvent.ON_ANNOTATION_CLICK, clickCb);

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

@@ -9,14 +9,17 @@ import { useContext, useState, useRef } from 'react';
 import { Card, EmbedResizeMessageListener } from '@atlaskit/smart-card';
 import { CardSSR } from '@atlaskit/smart-card/ssr';
 import { SmartCardContext } from '@atlaskit/link-provider';
-import { WidthConsumer, UnsupportedBlock, MediaSingle as UIMediaSingle } from '@atlaskit/editor-common/ui';
-import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_WIDTH } from '@atlaskit/editor-shared-styles';
+import { WidthConsumer, UnsupportedBlock, MediaSingle as UIMediaSingle, WidthContext } from '@atlaskit/editor-common/ui';
+import { akEditorDefaultLayoutWidth, akEditorFullPageNarrowBreakout, akEditorFullWidthLayoutWidth, DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_WIDTH } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { componentWithCondition } from '@atlaskit/platform-feature-flags-react';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { CardErrorBoundary } from './fallback';
 import { FullPagePadding } from '../../ui/Renderer/style';
 import { getCardClickHandler } from '../utils/getCardClickHandler';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
 import { usePortal } from '../../ui/Renderer/PortalContext';
+import BlockCard from './blockCard';
 const embedCardWrapperStyles = css({
   width: '100%',
   height: '100%',
@@ -37,7 +40,7 @@ const uIMediaSingleLayoutStyles = css({
   marginLeft: '50%',
   transform: 'translateX(-50%)'
 });
-export default function EmbedCard(props) {
+function EmbedCardInternal(props) {
   var _smartLinks$frameStyl;
   const {
     url,
@@ -207,4 +210,47 @@ export default function EmbedCard(props) {
       }, cardComponent)))))
     );
   }));
-}
+}
+export const EmbedOrBlockCardInternal = ({
+  url,
+  data,
+  eventHandlers,
+  portal,
+  originalHeight,
+  originalWidth,
+  width: embedWidth,
+  layout,
+  rendererAppearance,
+  isInsideOfBlockNode,
+  smartLinks,
+  isInsideOfInlineExtension
+}) => {
+  const {
+    width
+  } = useContext(WidthContext);
+  const viewAsBlockCard = width && width <= akEditorFullPageNarrowBreakout;
+  return viewAsBlockCard ? jsx(BlockCard, {
+    url: url,
+    data: data,
+    eventHandlers: eventHandlers,
+    portal: portal,
+    layout: layout,
+    rendererAppearance: rendererAppearance,
+    smartLinks: smartLinks
+  }) : jsx(EmbedCardInternal, {
+    url: url,
+    data: data,
+    eventHandlers: eventHandlers,
+    portal: portal,
+    originalHeight: originalHeight,
+    originalWidth: originalWidth,
+    width: embedWidth,
+    layout: layout,
+    rendererAppearance: rendererAppearance,
+    isInsideOfBlockNode: isInsideOfBlockNode,
+    smartLinks: smartLinks,
+    isInsideOfInlineExtension: isInsideOfInlineExtension
+  });
+};
+const EmbedCardWithCondition = componentWithCondition(() => expValEquals('platform_editor_preview_panel_responsiveness', 'isEnabled', true), EmbedOrBlockCardInternal, EmbedCardInternal);
+export default EmbedCardWithCondition;

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

@@ -17,6 +17,7 @@ import { withSmartCardStorage } from '../../ui/SmartCardStorage';
 import { StickyTable, tableStickyPadding, OverflowParent } from './table/sticky';
 import { Table } from './table/table';
 import { isCommentAppearance, isFullPageAppearance, isFullWidthAppearance, isFullWidthOrFullPageAppearance } from '../utils/appearance';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { TableStickyScrollbar } from './TableStickyScrollbar';
 import { TableProcessorWithContainerStyles } from './tableNew';
 export const isTableResizingEnabled = appearance => isFullWidthOrFullPageAppearance(appearance) || isCommentAppearance(appearance) && editorExperiment('support_table_in_comment', true, {
@@ -371,7 +372,8 @@ export class TableContainer extends React.Component {
     // Please consider changes below carefully to not negatively impact SSR
     // `renderWidth` cannot be depended on during SSR
     const isRenderWidthValid = !!renderWidth && renderWidth > 0;
-    const renderWidthCSS = rendererAppearance === 'full-page' ? `100cqw - ${FullPagePadding}px * 2` : `100cqw`;
+    const fullPageRendererWidthCSS = expValEquals('platform_editor_preview_panel_responsiveness', 'isEnabled', true) ? 'calc(100cqw - var(--ak-renderer--full-page-gutter) * 2)' : `100cqw - ${FullPagePadding}px * 2`;
+    const renderWidthCSS = rendererAppearance === 'full-page' ? fullPageRendererWidthCSS : `100cqw`;
     const calcDefaultLayoutWidthByAppearance = (rendererAppearance, tableNode) => {
       if (rendererAppearance === 'full-width' && !(tableNode !== null && tableNode !== void 0 && tableNode.attrs.width)) {
         return [isRenderWidthValid ? Math.min(akEditorFullWidthLayoutWidth, renderWidth) : akEditorFullWidthLayoutWidth, `min(${akEditorFullWidthLayoutWidth}px, ${renderWidthCSS})`];

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

@@ -5,6 +5,7 @@ import { TableSharedCssClassName, tableMarginTop } from '@atlaskit/editor-common
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import { FullPagePadding } from '../../ui/Renderer/style';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { createCompareNodes, convertProsemirrorTableNodeToArrayOfRows, hasMergedCell, compose } from '@atlaskit/editor-common/utils';
 import { SortOrder } from '@atlaskit/editor-common/types';
 import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
@@ -343,7 +344,8 @@ export class TableContainer extends React.Component {
     } = this.state;
     const lineLengthFixedWidth = akEditorDefaultLayoutWidth;
     let updatedLayout;
-    const renderWidthCSS = rendererAppearance === 'full-page' ? `100cqw - ${FullPagePadding}px * 2` : `100cqw`;
+    const fullPageRendererWidthCSS = expValEquals('platform_editor_preview_panel_responsiveness', 'isEnabled', true) ? 'calc(100cqw - var(--ak-renderer--full-page-gutter) * 2)' : `100cqw - ${FullPagePadding}px * 2`;
+    const renderWidthCSS = rendererAppearance === 'full-page' ? fullPageRendererWidthCSS : `100cqw`;
     const calcDefaultLayoutWidthByAppearance = (rendererAppearance, tableNode) => {
       if (rendererAppearance === 'full-width' && !(tableNode !== null && tableNode !== void 0 && tableNode.attrs.width)) {
         return `min(${akEditorFullWidthLayoutWidth}px, ${renderWidthCSS})`;

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

@@ -11,7 +11,7 @@ import { B300, B400, B500, N20, N200, N30A, N40A, N60A, N800, R50, R500, Y300, Y
 import { FullPagePadding } from './style';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { RendererCssClassName } from '../../consts';
-import { akEditorBlockquoteBorderColor, akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorGutterPadding, akEditorLineHeight, akEditorSelectedNodeClassName, akEditorShadowZIndex, akEditorStickyHeaderZIndex, akEditorTableBorder, akEditorTableCellMinWidth, akEditorTableNumberColumnWidth, akEditorTableToolbar, blockNodesVerticalMargin, gridMediumMaxWidth } from '@atlaskit/editor-shared-styles';
+import { akEditorBlockquoteBorderColor, akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorFullPageNarrowBreakout, akEditorGutterPaddingReduced, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorGutterPadding, akEditorLineHeight, akEditorSelectedNodeClassName, akEditorShadowZIndex, akEditorStickyHeaderZIndex, akEditorTableBorder, akEditorTableCellMinWidth, akEditorTableNumberColumnWidth, akEditorTableToolbar, blockNodesVerticalMargin, gridMediumMaxWidth } from '@atlaskit/editor-shared-styles';
 import { INLINE_IMAGE_WRAPPER_CLASS_NAME } from '@atlaskit/editor-common/media-inline';
 import { HeadingAnchorWrapperClassName } from '../../react/nodes/heading-anchor';
 import { CodeBlockSharedCssClassName, DateSharedCssClassName, listItemCounterPadding, richMediaClassName, SmartCardSharedCssClassName, tableCellBorderWidth, tableCellMinWidth, tableCellPadding, tableMarginTop, TableSharedCssClassName, TaskDecisionSharedCssClassName } from '@atlaskit/editor-common/styles';
@@ -215,6 +215,17 @@ const responsiveBreakoutWidthFullWidth = css({
     '--ak-editor--breakout-wide-layout-width': `${akEditorCalculatedWideLayoutWidth}px`
   }
 });
+const responsiveBreakoutWidthWithReducedPadding = css({
+  '--ak-editor--breakout-container-without-gutter-width': `calc(100cqw - var(--ak-renderer--full-page-gutter) * 2)`,
+  // Corresponds to the legacyContentStyles from `@atlaskit/editor-core` meant to introduce responsive breakout width.
+  '--ak-editor--breakout-wide-layout-width': `${akEditorCalculatedWideLayoutWidthSmallViewport}px`,
+  [`@media (min-width: ${akEditorBreakpointForSmallDevice})`]: {
+    '--ak-editor--breakout-wide-layout-width': `${akEditorCalculatedWideLayoutWidth}px`
+  },
+  [`@media (max-width: ${akEditorFullPageNarrowBreakout}px)`]: {
+    '--ak-editor--breakout-container-without-gutter-width': `calc(100cqw - var(--ak-renderer--full-page-gutter) * 2)`
+  }
+});
 const hideHeadingCopyLinkWrapperStyles = css({
   '& h1, & h2, & h3, & h4, & h5, & h6': {
     [`.${HeadingAnchorWrapperClassName}`]: {
@@ -242,6 +253,17 @@ const rendererFullPageStyles = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
   padding: `0 ${FullPagePadding}px`
 });
+const rendererFullPageStylesWithReducedPadding = css({
+  '--ak-renderer--full-page-gutter': `${FullPagePadding}px`,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+  maxWidth: `${akEditorDefaultLayoutWidth}px`,
+  margin: '0 auto',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+  padding: `0 var(--ak-renderer--full-page-gutter)`,
+  [`@media (max-width: ${akEditorFullPageNarrowBreakout}px)`]: {
+    '--ak-renderer--full-page-gutter': `${akEditorGutterPaddingReduced}px`
+  }
+});
 const rendererFullWidthStyles = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
   maxWidth: `${akEditorFullWidthLayoutWidth}px`,
@@ -1811,6 +1833,9 @@ export const RendererStyleContainer = props => {
     testId
   } = props;
   const isAdvancedLayoutsOn = editorExperiment('advanced_layouts', true);
+  const isPreviewPanelResponsivenessOn = editorExperiment('platform_editor_preview_panel_responsiveness', true, {
+    exposure: true
+  });
   return (
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions, @atlassian/a11y/interactive-element-not-keyboard-focusable
     jsx("div", {
@@ -1827,13 +1852,13 @@ export const RendererStyleContainer = props => {
         '--ak-renderer-editor-font-heading-h6': `${editorUGCToken('editor.font.heading.h6')}`,
         '--ak-renderer-editor-font-normal-text': `${editorUGCToken('editor.font.body')}`
       },
-      css: [baseStyles, hideHeadingCopyLinkWrapperStyles, appearance === 'full-page' && rendererFullPageStyles, appearance === 'full-width' && rendererFullWidthStyles, appearance === 'full-width' && !isTableResizingEnabled(appearance) && rendererFullWidthStylesForTableResizing, telepointerStyles, whitespaceSharedStyles, blockquoteSharedStyles, fg('platform_editor_typography_ugc') ? headingsSharedStylesWithEditorUGC : headingsSharedStyles, headingWithAlignmentStyles, ruleSharedStyles, fg('platform_editor_typography_ugc') ? paragraphSharedStylesWithEditorUGC : paragraphSharedStyles, listsSharedStyles, browser.gecko && listsSharedStylesForGekko, indentationSharedStyles, fg('platform_editor__renderer_indentation_text_margin') && indentationSharedStylesWithMarginFix, blockMarksSharedStyles, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles, tasksAndDecisionsStyles, smartCardStyles, smartCardStylesAvatarFix, fg('smartcard_avatar_margin_fix') && smartCardStylesAvatarMarginFix, fg('platform_editor_avatar_group_margin_fix') && smartCardStylesAvatarMarginFix2,
+      css: [baseStyles, hideHeadingCopyLinkWrapperStyles, appearance === 'full-page' && isPreviewPanelResponsivenessOn && rendererFullPageStylesWithReducedPadding, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && rendererFullPageStyles, appearance === 'full-width' && rendererFullWidthStyles, appearance === 'full-width' && !isTableResizingEnabled(appearance) && rendererFullWidthStylesForTableResizing, telepointerStyles, whitespaceSharedStyles, blockquoteSharedStyles, fg('platform_editor_typography_ugc') ? headingsSharedStylesWithEditorUGC : headingsSharedStyles, headingWithAlignmentStyles, ruleSharedStyles, fg('platform_editor_typography_ugc') ? paragraphSharedStylesWithEditorUGC : paragraphSharedStyles, listsSharedStyles, browser.gecko && listsSharedStylesForGekko, indentationSharedStyles, fg('platform_editor__renderer_indentation_text_margin') && indentationSharedStylesWithMarginFix, blockMarksSharedStyles, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles, tasksAndDecisionsStyles, smartCardStyles, smartCardStylesAvatarFix, fg('smartcard_avatar_margin_fix') && smartCardStylesAvatarMarginFix, fg('platform_editor_avatar_group_margin_fix') && smartCardStylesAvatarMarginFix2,
       // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
       fg('editor_inline_comments_on_inline_nodes') && rendererAnnotationStyles,
       // eslint-disable-next-line @atlaskit/platform/no-preconditioning, @atlaskit/platform/ensure-feature-flag-prefix
       fg('editor_inline_comments_on_inline_nodes') &&
       // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
-      fg('annotations_align_editor_and_renderer_styles') && rendererAnnotationStylesCommentHeightFix, baseOtherStyles, allowNestedHeaderLinks && alignedHeadingAnchorStyle, mediaSingleSharedStyle, tableSharedStyle, tableRendererHeaderStylesForTableCellOnly, fg('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, fg('platform_editor_nested_dnd_styles_changes') ? firstNodeWithNotMarginTopWithNestedDnD : firstNodeWithNotMarginTop, rendererTableStyles, isStickyScrollbarEnabled(appearance) && stickyScrollbarStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && allowNestedHeaderLinks && rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks, fg('platform_editor_tables_numbered_column_correction') ? rendererTableColumnStyles : rendererTableColumnStylesOld, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, browser.safari && codeBlockInListSafariFixStyles, appearance === 'full-page' && responsiveBreakoutWidth, appearance === 'full-width' && responsiveBreakoutWidthFullWidth],
+      fg('annotations_align_editor_and_renderer_styles') && rendererAnnotationStylesCommentHeightFix, baseOtherStyles, allowNestedHeaderLinks && alignedHeadingAnchorStyle, mediaSingleSharedStyle, tableSharedStyle, tableRendererHeaderStylesForTableCellOnly, fg('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, fg('platform_editor_nested_dnd_styles_changes') ? firstNodeWithNotMarginTopWithNestedDnD : firstNodeWithNotMarginTop, rendererTableStyles, isStickyScrollbarEnabled(appearance) && stickyScrollbarStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && allowNestedHeaderLinks && rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks, fg('platform_editor_tables_numbered_column_correction') ? rendererTableColumnStyles : rendererTableColumnStylesOld, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, browser.safari && codeBlockInListSafariFixStyles, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && responsiveBreakoutWidth, appearance === 'full-page' && isPreviewPanelResponsivenessOn && responsiveBreakoutWidthWithReducedPadding, appearance === 'full-width' && responsiveBreakoutWidthFullWidth],
       "data-testid": testId
     }, children)
   );

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

@@ -49,7 +49,7 @@ import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equ
 export const NORMAL_SEVERITY_THRESHOLD = 2000;
 export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "120.2.2";
+const packageVersion = "120.2.4";
 const setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

package/dist/es2019/ui/annotations/hooks/use-events.js

@@ -89,9 +89,6 @@ export const useHasFocusEvent = ({
     };
     const removeFocus = () => {
       setHasFocus(false);
-      if (document.activeElement instanceof HTMLElement) {
-        document.activeElement.blur();
-      }
     };
     const removeHoverEffect = () => {
       setIsHovered(false);
@@ -193,9 +190,6 @@ export const useAnnotationClickEvent = props => {
         annotations: [],
         clickElementTarget: undefined
       });
-      if (document.activeElement instanceof HTMLElement) {
-        document.activeElement.blur();
-      }
     };
     if (!isAnnotationManagerEnabled) {
       updateSubscriber.on(AnnotationUpdateEvent.ON_ANNOTATION_CLICK, clickCb);

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

@@ -10,14 +10,17 @@ import { useContext, useState, useRef } from 'react';
 import { Card, EmbedResizeMessageListener } from '@atlaskit/smart-card';
 import { CardSSR } from '@atlaskit/smart-card/ssr';
 import { SmartCardContext } from '@atlaskit/link-provider';
-import { WidthConsumer, UnsupportedBlock, MediaSingle as UIMediaSingle } from '@atlaskit/editor-common/ui';
-import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_WIDTH } from '@atlaskit/editor-shared-styles';
+import { WidthConsumer, UnsupportedBlock, MediaSingle as UIMediaSingle, WidthContext } from '@atlaskit/editor-common/ui';
+import { akEditorDefaultLayoutWidth, akEditorFullPageNarrowBreakout, akEditorFullWidthLayoutWidth, DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_WIDTH } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { componentWithCondition } from '@atlaskit/platform-feature-flags-react';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { CardErrorBoundary } from './fallback';
 import { FullPagePadding } from '../../ui/Renderer/style';
 import { getCardClickHandler } from '../utils/getCardClickHandler';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
 import { usePortal } from '../../ui/Renderer/PortalContext';
+import BlockCard from './blockCard';
 var embedCardWrapperStyles = css({
   width: '100%',
   height: '100%',
@@ -38,7 +41,7 @@ var uIMediaSingleLayoutStyles = css({
   marginLeft: '50%',
   transform: 'translateX(-50%)'
 });
-export default function EmbedCard(props) {
+function EmbedCardInternal(props) {
   var _smartLinks$frameStyl;
   var url = props.url,
     data = props.data,
@@ -211,4 +214,47 @@ export default function EmbedCard(props) {
       }, cardComponent)))))
     );
   }));
-}
+}
+export var EmbedOrBlockCardInternal = function EmbedOrBlockCardInternal(_ref5) {
+  var url = _ref5.url,
+    data = _ref5.data,
+    eventHandlers = _ref5.eventHandlers,
+    portal = _ref5.portal,
+    originalHeight = _ref5.originalHeight,
+    originalWidth = _ref5.originalWidth,
+    embedWidth = _ref5.width,
+    layout = _ref5.layout,
+    rendererAppearance = _ref5.rendererAppearance,
+    isInsideOfBlockNode = _ref5.isInsideOfBlockNode,
+    smartLinks = _ref5.smartLinks,
+    isInsideOfInlineExtension = _ref5.isInsideOfInlineExtension;
+  var _useContext = useContext(WidthContext),
+    width = _useContext.width;
+  var viewAsBlockCard = width && width <= akEditorFullPageNarrowBreakout;
+  return viewAsBlockCard ? jsx(BlockCard, {
+    url: url,
+    data: data,
+    eventHandlers: eventHandlers,
+    portal: portal,
+    layout: layout,
+    rendererAppearance: rendererAppearance,
+    smartLinks: smartLinks
+  }) : jsx(EmbedCardInternal, {
+    url: url,
+    data: data,
+    eventHandlers: eventHandlers,
+    portal: portal,
+    originalHeight: originalHeight,
+    originalWidth: originalWidth,
+    width: embedWidth,
+    layout: layout,
+    rendererAppearance: rendererAppearance,
+    isInsideOfBlockNode: isInsideOfBlockNode,
+    smartLinks: smartLinks,
+    isInsideOfInlineExtension: isInsideOfInlineExtension
+  });
+};
+var EmbedCardWithCondition = componentWithCondition(function () {
+  return expValEquals('platform_editor_preview_panel_responsiveness', 'isEnabled', true);
+}, EmbedOrBlockCardInternal, EmbedCardInternal);
+export default EmbedCardWithCondition;

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

@@ -28,6 +28,7 @@ import { withSmartCardStorage } from '../../ui/SmartCardStorage';
 import { StickyTable, tableStickyPadding, OverflowParent } from './table/sticky';
 import { Table } from './table/table';
 import { isCommentAppearance, isFullPageAppearance, isFullWidthAppearance, isFullWidthOrFullPageAppearance } from '../utils/appearance';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { TableStickyScrollbar } from './TableStickyScrollbar';
 import { TableProcessorWithContainerStyles } from './tableNew';
 export var isTableResizingEnabled = function isTableResizingEnabled(appearance) {
@@ -418,7 +419,8 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
       // Please consider changes below carefully to not negatively impact SSR
       // `renderWidth` cannot be depended on during SSR
       var isRenderWidthValid = !!renderWidth && renderWidth > 0;
-      var renderWidthCSS = rendererAppearance === 'full-page' ? "100cqw - ".concat(FullPagePadding, "px * 2") : "100cqw";
+      var fullPageRendererWidthCSS = expValEquals('platform_editor_preview_panel_responsiveness', 'isEnabled', true) ? 'calc(100cqw - var(--ak-renderer--full-page-gutter) * 2)' : "100cqw - ".concat(FullPagePadding, "px * 2");
+      var renderWidthCSS = rendererAppearance === 'full-page' ? fullPageRendererWidthCSS : "100cqw";
       var calcDefaultLayoutWidthByAppearance = function calcDefaultLayoutWidthByAppearance(rendererAppearance, tableNode) {
         if (rendererAppearance === 'full-width' && !(tableNode !== null && tableNode !== void 0 && tableNode.attrs.width)) {
           return [isRenderWidthValid ? Math.min(akEditorFullWidthLayoutWidth, renderWidth) : akEditorFullWidthLayoutWidth, "min(".concat(akEditorFullWidthLayoutWidth, "px, ").concat(renderWidthCSS, ")")];

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

@@ -17,6 +17,7 @@ import { TableSharedCssClassName, tableMarginTop } from '@atlaskit/editor-common
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import { FullPagePadding } from '../../ui/Renderer/style';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { createCompareNodes, convertProsemirrorTableNodeToArrayOfRows, hasMergedCell, compose } from '@atlaskit/editor-common/utils';
 import { SortOrder } from '@atlaskit/editor-common/types';
 import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
@@ -393,7 +394,8 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
       var stickyMode = this.state.stickyMode;
       var lineLengthFixedWidth = akEditorDefaultLayoutWidth;
       var updatedLayout;
-      var renderWidthCSS = rendererAppearance === 'full-page' ? "100cqw - ".concat(FullPagePadding, "px * 2") : "100cqw";
+      var fullPageRendererWidthCSS = expValEquals('platform_editor_preview_panel_responsiveness', 'isEnabled', true) ? 'calc(100cqw - var(--ak-renderer--full-page-gutter) * 2)' : "100cqw - ".concat(FullPagePadding, "px * 2");
+      var renderWidthCSS = rendererAppearance === 'full-page' ? fullPageRendererWidthCSS : "100cqw";
       var calcDefaultLayoutWidthByAppearance = function calcDefaultLayoutWidthByAppearance(rendererAppearance, tableNode) {
         if (rendererAppearance === 'full-width' && !(tableNode !== null && tableNode !== void 0 && tableNode.attrs.width)) {
           return "min(".concat(akEditorFullWidthLayoutWidth, "px, ").concat(renderWidthCSS, ")");

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

@@ -1,5 +1,5 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _css, _css5;
+var _css, _css7;
 /* eslint-disable @atlaskit/ui-styling-standard/no-important-styles */
 /* eslint-disable @atlaskit/ui-styling-standard/no-imported-style-values */
 /* eslint-disable @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values */
@@ -13,7 +13,7 @@ import { B300, B400, B500, N20, N200, N30A, N40A, N60A, N800, R50, R500, Y300, Y
 import { FullPagePadding } from './style';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { RendererCssClassName } from '../../consts';
-import { akEditorBlockquoteBorderColor, akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorGutterPadding, akEditorLineHeight, akEditorSelectedNodeClassName, akEditorShadowZIndex, akEditorStickyHeaderZIndex, akEditorTableBorder, akEditorTableCellMinWidth, akEditorTableNumberColumnWidth, akEditorTableToolbar, blockNodesVerticalMargin, gridMediumMaxWidth } from '@atlaskit/editor-shared-styles';
+import { akEditorBlockquoteBorderColor, akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorFullPageNarrowBreakout, akEditorGutterPaddingReduced, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorGutterPadding, akEditorLineHeight, akEditorSelectedNodeClassName, akEditorShadowZIndex, akEditorStickyHeaderZIndex, akEditorTableBorder, akEditorTableCellMinWidth, akEditorTableNumberColumnWidth, akEditorTableToolbar, blockNodesVerticalMargin, gridMediumMaxWidth } from '@atlaskit/editor-shared-styles';
 import { INLINE_IMAGE_WRAPPER_CLASS_NAME } from '@atlaskit/editor-common/media-inline';
 import { HeadingAnchorWrapperClassName } from '../../react/nodes/heading-anchor';
 import { CodeBlockSharedCssClassName, DateSharedCssClassName, listItemCounterPadding, richMediaClassName, SmartCardSharedCssClassName, tableCellBorderWidth, tableCellMinWidth, tableCellPadding, tableMarginTop, TableSharedCssClassName, TaskDecisionSharedCssClassName } from '@atlaskit/editor-common/styles';
@@ -147,6 +147,15 @@ var responsiveBreakoutWidthFullWidth = css(_defineProperty({
 }, "@media (min-width: ".concat(akEditorBreakpointForSmallDevice, ")"), {
   '--ak-editor--breakout-wide-layout-width': "".concat(akEditorCalculatedWideLayoutWidth, "px")
 }));
+var responsiveBreakoutWidthWithReducedPadding = css(_defineProperty(_defineProperty({
+  '--ak-editor--breakout-container-without-gutter-width': "calc(100cqw - var(--ak-renderer--full-page-gutter) * 2)",
+  // Corresponds to the legacyContentStyles from `@atlaskit/editor-core` meant to introduce responsive breakout width.
+  '--ak-editor--breakout-wide-layout-width': "".concat(akEditorCalculatedWideLayoutWidthSmallViewport, "px")
+}, "@media (min-width: ".concat(akEditorBreakpointForSmallDevice, ")"), {
+  '--ak-editor--breakout-wide-layout-width': "".concat(akEditorCalculatedWideLayoutWidth, "px")
+}), "@media (max-width: ".concat(akEditorFullPageNarrowBreakout, "px)"), {
+  '--ak-editor--breakout-container-without-gutter-width': "calc(100cqw - var(--ak-renderer--full-page-gutter) * 2)"
+}));
 var hideHeadingCopyLinkWrapperStyles = css({
   '& h1, & h2, & h3, & h4, & h5, & h6': _defineProperty(_defineProperty({}, ".".concat(HeadingAnchorWrapperClassName), {
     '&:focus-within': {
@@ -166,6 +175,16 @@ var rendererFullPageStyles = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
   padding: "0 ".concat(FullPagePadding, "px")
 });
+var rendererFullPageStylesWithReducedPadding = css(_defineProperty({
+  '--ak-renderer--full-page-gutter': "".concat(FullPagePadding, "px"),
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+  maxWidth: "".concat(akEditorDefaultLayoutWidth, "px"),
+  margin: '0 auto',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+  padding: "0 var(--ak-renderer--full-page-gutter)"
+}, "@media (max-width: ".concat(akEditorFullPageNarrowBreakout, "px)"), {
+  '--ak-renderer--full-page-gutter': "".concat(akEditorGutterPaddingReduced, "px")
+}));
 var rendererFullWidthStyles = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
   maxWidth: "".concat(akEditorFullWidthLayoutWidth, "px"),
@@ -484,13 +503,13 @@ var paragraphSharedStyles = css({
     letterSpacing: '-0.005em'
   }
 });
-var listsSharedStyles = css((_css5 = {
+var listsSharedStyles = css((_css7 = {
   /* =============== INDENTATION SPACING ========= */
   'ul, ol': {
     boxSizing: 'border-box',
     paddingLeft: "var(--ed--list--item-counter--padding, ".concat(listItemCounterPadding, "px)")
   }
-}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_css5, "".concat(orderedListSelector, ", ").concat(bulletListSelector), {
+}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_css7, "".concat(orderedListSelector, ", ").concat(bulletListSelector), {
   /*
    Ensures list item content adheres to the list's margin instead
    of filling the entire block row. This is important to allow
@@ -522,7 +541,7 @@ var listsSharedStyles = css((_css5 = {
   listStyleType: 'lower-alpha'
 }), 'ol[data-indent-level="3"], ol[data-indent-level="6"]', {
   listStyleType: 'lower-roman'
-}), _defineProperty(_defineProperty(_defineProperty(_css5, 'ul[data-indent-level="1"], ul[data-indent-level="4"]', {
+}), _defineProperty(_defineProperty(_defineProperty(_css7, 'ul[data-indent-level="1"], ul[data-indent-level="4"]', {
   listStyleType: 'disc'
 }), 'ul[data-indent-level="2"], ul[data-indent-level="5"]', {
   listStyleType: 'circle'
@@ -1408,6 +1427,9 @@ export var RendererStyleContainer = function RendererStyleContainer(props) {
     innerRef = props.innerRef,
     testId = props.testId;
   var isAdvancedLayoutsOn = editorExperiment('advanced_layouts', true);
+  var isPreviewPanelResponsivenessOn = editorExperiment('platform_editor_preview_panel_responsiveness', true, {
+    exposure: true
+  });
   return (
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions, @atlassian/a11y/interactive-element-not-keyboard-focusable
     jsx("div", {
@@ -1424,13 +1446,13 @@ export var RendererStyleContainer = function RendererStyleContainer(props) {
         '--ak-renderer-editor-font-heading-h6': "".concat(editorUGCToken('editor.font.heading.h6')),
         '--ak-renderer-editor-font-normal-text': "".concat(editorUGCToken('editor.font.body'))
       },
-      css: [baseStyles, hideHeadingCopyLinkWrapperStyles, appearance === 'full-page' && rendererFullPageStyles, appearance === 'full-width' && rendererFullWidthStyles, appearance === 'full-width' && !isTableResizingEnabled(appearance) && rendererFullWidthStylesForTableResizing, telepointerStyles, whitespaceSharedStyles, blockquoteSharedStyles, fg('platform_editor_typography_ugc') ? headingsSharedStylesWithEditorUGC : headingsSharedStyles, headingWithAlignmentStyles, ruleSharedStyles, fg('platform_editor_typography_ugc') ? paragraphSharedStylesWithEditorUGC : paragraphSharedStyles, listsSharedStyles, browser.gecko && listsSharedStylesForGekko, indentationSharedStyles, fg('platform_editor__renderer_indentation_text_margin') && indentationSharedStylesWithMarginFix, blockMarksSharedStyles, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles, tasksAndDecisionsStyles, smartCardStyles, smartCardStylesAvatarFix, fg('smartcard_avatar_margin_fix') && smartCardStylesAvatarMarginFix, fg('platform_editor_avatar_group_margin_fix') && smartCardStylesAvatarMarginFix2,
+      css: [baseStyles, hideHeadingCopyLinkWrapperStyles, appearance === 'full-page' && isPreviewPanelResponsivenessOn && rendererFullPageStylesWithReducedPadding, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && rendererFullPageStyles, appearance === 'full-width' && rendererFullWidthStyles, appearance === 'full-width' && !isTableResizingEnabled(appearance) && rendererFullWidthStylesForTableResizing, telepointerStyles, whitespaceSharedStyles, blockquoteSharedStyles, fg('platform_editor_typography_ugc') ? headingsSharedStylesWithEditorUGC : headingsSharedStyles, headingWithAlignmentStyles, ruleSharedStyles, fg('platform_editor_typography_ugc') ? paragraphSharedStylesWithEditorUGC : paragraphSharedStyles, listsSharedStyles, browser.gecko && listsSharedStylesForGekko, indentationSharedStyles, fg('platform_editor__renderer_indentation_text_margin') && indentationSharedStylesWithMarginFix, blockMarksSharedStyles, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles, tasksAndDecisionsStyles, smartCardStyles, smartCardStylesAvatarFix, fg('smartcard_avatar_margin_fix') && smartCardStylesAvatarMarginFix, fg('platform_editor_avatar_group_margin_fix') && smartCardStylesAvatarMarginFix2,
       // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
       fg('editor_inline_comments_on_inline_nodes') && rendererAnnotationStyles,
       // eslint-disable-next-line @atlaskit/platform/no-preconditioning, @atlaskit/platform/ensure-feature-flag-prefix
       fg('editor_inline_comments_on_inline_nodes') &&
       // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
-      fg('annotations_align_editor_and_renderer_styles') && rendererAnnotationStylesCommentHeightFix, baseOtherStyles, allowNestedHeaderLinks && alignedHeadingAnchorStyle, mediaSingleSharedStyle, tableSharedStyle, tableRendererHeaderStylesForTableCellOnly, fg('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, fg('platform_editor_nested_dnd_styles_changes') ? firstNodeWithNotMarginTopWithNestedDnD : firstNodeWithNotMarginTop, rendererTableStyles, isStickyScrollbarEnabled(appearance) && stickyScrollbarStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && allowNestedHeaderLinks && rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks, fg('platform_editor_tables_numbered_column_correction') ? rendererTableColumnStyles : rendererTableColumnStylesOld, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, browser.safari && codeBlockInListSafariFixStyles, appearance === 'full-page' && responsiveBreakoutWidth, appearance === 'full-width' && responsiveBreakoutWidthFullWidth],
+      fg('annotations_align_editor_and_renderer_styles') && rendererAnnotationStylesCommentHeightFix, baseOtherStyles, allowNestedHeaderLinks && alignedHeadingAnchorStyle, mediaSingleSharedStyle, tableSharedStyle, tableRendererHeaderStylesForTableCellOnly, fg('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, fg('platform_editor_nested_dnd_styles_changes') ? firstNodeWithNotMarginTopWithNestedDnD : firstNodeWithNotMarginTop, rendererTableStyles, isStickyScrollbarEnabled(appearance) && stickyScrollbarStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && allowNestedHeaderLinks && rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks, fg('platform_editor_tables_numbered_column_correction') ? rendererTableColumnStyles : rendererTableColumnStylesOld, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, browser.safari && codeBlockInListSafariFixStyles, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && responsiveBreakoutWidth, appearance === 'full-page' && isPreviewPanelResponsivenessOn && responsiveBreakoutWidthWithReducedPadding, appearance === 'full-width' && responsiveBreakoutWidthFullWidth],
       "data-testid": testId
     }, children)
   );

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

@@ -54,7 +54,7 @@ import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equ
 export var NORMAL_SEVERITY_THRESHOLD = 2000;
 export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "120.2.2";
+var packageVersion = "120.2.4";
 var setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

package/dist/esm/ui/annotations/hooks/use-events.js

@@ -87,9 +87,6 @@ export var useHasFocusEvent = function useHasFocusEvent(_ref2) {
     };
     var removeFocus = function removeFocus() {
       setHasFocus(false);
-      if (document.activeElement instanceof HTMLElement) {
-        document.activeElement.blur();
-      }
     };
     var removeHoverEffect = function removeHoverEffect() {
       setIsHovered(false);
@@ -193,9 +190,6 @@ export var useAnnotationClickEvent = function useAnnotationClickEvent(props) {
         annotations: [],
         clickElementTarget: undefined
       });
-      if (document.activeElement instanceof HTMLElement) {
-        document.activeElement.blur();
-      }
     };
     if (!isAnnotationManagerEnabled) {
       updateSubscriber.on(AnnotationUpdateEvent.ON_ANNOTATION_CLICK, clickCb);

package/dist/types/react/nodes/embedCard.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -7,7 +8,7 @@ import type { SmartLinksOptions } from '../../types/smartLinksOptions';
 import type { EventHandlers } from '@atlaskit/editor-common/ui';
 import type { RichMediaLayout } from '@atlaskit/adf-schema';
 import type { RendererAppearance } from '../../ui/Renderer/types';
-export default function EmbedCard(props: {
+type EmbedCardInternalProps = {
     url?: string;
     data?: object;
     eventHandlers?: EventHandlers;
@@ -20,4 +21,7 @@ export default function EmbedCard(props: {
     isInsideOfBlockNode?: boolean;
     smartLinks?: SmartLinksOptions;
     isInsideOfInlineExtension?: boolean;
-}): jsx.JSX.Element;
+};
+export declare const EmbedOrBlockCardInternal: ({ url, data, eventHandlers, portal, originalHeight, originalWidth, width: embedWidth, layout, rendererAppearance, isInsideOfBlockNode, smartLinks, isInsideOfInlineExtension, }: EmbedCardInternalProps) => jsx.JSX.Element;
+declare const EmbedCardWithCondition: import("react").FC<EmbedCardInternalProps>;
+export default EmbedCardWithCondition;

package/dist/types-ts4.5/react/nodes/embedCard.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -7,7 +8,7 @@ import type { SmartLinksOptions } from '../../types/smartLinksOptions';
 import type { EventHandlers } from '@atlaskit/editor-common/ui';
 import type { RichMediaLayout } from '@atlaskit/adf-schema';
 import type { RendererAppearance } from '../../ui/Renderer/types';
-export default function EmbedCard(props: {
+type EmbedCardInternalProps = {
     url?: string;
     data?: object;
     eventHandlers?: EventHandlers;
@@ -20,4 +21,7 @@ export default function EmbedCard(props: {
     isInsideOfBlockNode?: boolean;
     smartLinks?: SmartLinksOptions;
     isInsideOfInlineExtension?: boolean;
-}): jsx.JSX.Element;
+};
+export declare const EmbedOrBlockCardInternal: ({ url, data, eventHandlers, portal, originalHeight, originalWidth, width: embedWidth, layout, rendererAppearance, isInsideOfBlockNode, smartLinks, isInsideOfInlineExtension, }: EmbedCardInternalProps) => jsx.JSX.Element;
+declare const EmbedCardWithCondition: import("react").FC<EmbedCardInternalProps>;
+export default EmbedCardWithCondition;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "120.2.3",
+	"version": "120.2.5",
 	"description": "Renderer component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -37,11 +37,11 @@
 		"@atlaskit/editor-tables": "^2.9.0",
 		"@atlaskit/emoji": "^69.3.0",
 		"@atlaskit/feature-gate-js-client": "^5.5.0",
-		"@atlaskit/icon": "^27.6.0",
+		"@atlaskit/icon": "^27.7.0",
 		"@atlaskit/link": "^3.2.0",
 		"@atlaskit/link-datasource": "^4.14.0",
 		"@atlaskit/media-card": "^79.4.0",
-		"@atlaskit/media-client": "^35.1.0",
+		"@atlaskit/media-client": "^35.2.0",
 		"@atlaskit/media-client-react": "^4.1.0",
 		"@atlaskit/media-common": "^12.3.0",
 		"@atlaskit/media-filmstrip": "^51.0.0",
@@ -54,7 +54,7 @@
 		"@atlaskit/status": "^3.0.0",
 		"@atlaskit/task-decision": "^19.2.0",
 		"@atlaskit/theme": "^19.0.0",
-		"@atlaskit/tmp-editor-statsig": "^9.10.0",
+		"@atlaskit/tmp-editor-statsig": "^9.12.0",
 		"@atlaskit/tokens": "^5.6.0",
 		"@atlaskit/tooltip": "^20.3.0",
 		"@atlaskit/visually-hidden": "^3.0.0",