@atlaskit/renderer 124.4.3 → 124.5.0

package/dist/cjs/react/index.js

@@ -185,6 +185,7 @@ var ReactSerializer = exports.default = /*#__PURE__*/function () {
     this.portal = init.portal;
     this.rendererContext = init.objectContext;
     this.appearance = init.appearance;
+    this.contentMode = init.contentMode;
     this.disableHeadingIDs = init.disableHeadingIDs;
     this.disableActions = init.disableActions;
     this.allowHeadingAnchorLinks = init.allowHeadingAnchorLinks;
@@ -626,6 +627,7 @@ var ReactSerializer = exports.default = /*#__PURE__*/function () {
         allowWrapCodeBlock: this.allowWrapCodeBlock,
         allowPlaceholderText: this.allowPlaceholderText,
         rendererAppearance: this.appearance,
+        rendererContentMode: this.contentMode,
         fireAnalyticsEvent: this.fireAnalyticsEvent,
         nodeType: node.type.name,
         marks: node.marks,

package/dist/cjs/ui/Expand.js

@@ -22,6 +22,7 @@ var _uniqueId2 = _interopRequireDefault(require("lodash/uniqueId"));
 var _reactIntlNext = require("react-intl-next");
 var _events = require("../analytics/events");
 var _activeHeaderIdProvider = require("./active-header-id-provider");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _excluded = ["expanded"];
 /**
  * @jsxRuntime classic
@@ -44,6 +45,10 @@ var titleStyles = (0, _react.css)({
   padding: "0 0 0 ".concat("var(--ds-space-050, 4px)"),
   textAlign: 'left'
 });
+var titleStylesDense = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+  fontSize: 'var(--ak-renderer-base-font-size)'
+});
 var containerStyles = (0, _react.css)({
   borderWidth: "var(--ds-border-width, 1px)",
   borderStyle: 'solid',
@@ -197,7 +202,8 @@ function Expand(_ref2) {
     fireAnalyticsEvent = _ref2.fireAnalyticsEvent,
     localId = _ref2.localId,
     nestedHeaderIds = _ref2.nestedHeaderIds,
-    rendererAppearance = _ref2.rendererAppearance;
+    rendererAppearance = _ref2.rendererAppearance,
+    rendererContentMode = _ref2.rendererContentMode;
   var _React$useState = _react2.default.useState(false),
     _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
     expanded = _React$useState2[0],
@@ -216,6 +222,8 @@ function Expand(_ref2) {
   var handleBlur = (0, _react2.useCallback)(function () {
     return setFocused(false);
   }, []);
+  var isCompactModeSupported = (0, _expValEquals.expValEquals)('cc_editor_ai_content_mode', 'variant', 'test') && (0, _platformFeatureFlags.fg)('platform_editor_content_mode_button_mvp');
+  var isDense = rendererContentMode === 'dense' && isCompactModeSupported;
   return (0, _react.jsx)(Container, {
     "data-testid": "expand-container-".concat(nodeType, "-").concat(id),
     "data-node-type": nodeType,
@@ -267,7 +275,7 @@ function Expand(_ref2) {
     spacing: "spacious",
     size: "small"
   }))), (0, _react.jsx)("span", {
-    css: titleStyles,
+    css: [titleStyles, isDense && titleStylesDense],
     id: id
   }, title || intl.formatMessage(_ui.expandMessages.expandDefaultTitle))), (0, _react.jsx)(ContentContainer, {
     expanded: expanded

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

@@ -716,7 +716,8 @@ var codeMarkSharedStyles = (0, _react.css)({
   }
 });
 var extensionStyle = (0, _react.css)({
-  '.ak-renderer-extension *': {
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+  '.ak-renderer-extension :not([data-inline-card-lozenge] *)': {
     // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
     fontSize: 'var(--ak-renderer-base-font-size)'
   }
@@ -1521,12 +1522,7 @@ var rendererAnnotationStylesCommentHeightFix = (0, _react.css)({
     paddingTop: "var(--ds-space-025, 2px)"
   }
 });
-
-// Calculate emoji size based on base font size
-// Default: 20px emoji at 16px base font
-// Scaled: 20px * (baseFontSize/16)
-// E.g., dense mode (13px base): 20px * (13/16) = 16.25px
-var denseEmojiStyles = (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(_emoji.EmojiSharedCssClassName.EMOJI_IMAGE), {
+var denseStyles = (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(_emoji.EmojiSharedCssClassName.EMOJI_IMAGE), {
   height: "calc(".concat(_emoji.defaultEmojiHeight, " * var(--ak-renderer-base-font-size) / ").concat(_editorSharedStyles.akEditorFullPageDefaultFontSize, ")"),
   width: "calc(".concat(_emoji.defaultEmojiHeight, " * var(--ak-renderer-base-font-size) / ").concat(_editorSharedStyles.akEditorFullPageDefaultFontSize, ")"),
   maxHeight: "calc(".concat(_emoji.defaultEmojiHeight, " * var(--ak-renderer-base-font-size) / ").concat(_editorSharedStyles.akEditorFullPageDefaultFontSize, ")"),
@@ -1575,7 +1571,7 @@ 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, (0, _expValEquals.expValEquals)('cc_editor_ai_content_mode', 'variant', 'test') && (0, _platformFeatureFlags.fg)('platform_editor_content_mode_button_mvp') && denseEmojiStyles, hideHeadingCopyLinkWrapperStyles, appearance === 'full-page' && isPreviewPanelResponsivenessOn && rendererFullPageStylesWithReducedPadding, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && rendererFullPageStyles, appearance === 'full-width' && rendererFullWidthStyles, appearance === 'full-width' && !(0, _table.isTableResizingEnabled)(appearance) && rendererFullWidthStylesForTableResizing, !(0, _platformFeatureFlags.fg)('aifc_create_enabled') && telepointerStyles, (0, _platformFeatureFlags.fg)('aifc_create_enabled') && rovoTelepointerStyles, whitespaceSharedStyles, blockquoteSharedStyles, (0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') ? headingsSharedStylesWithEditorUGC : headingsSharedStyles, headingWithAlignmentStyles, ruleSharedStyles, (0, _expValEquals.expValEquals)('cc_editor_ai_content_mode', 'variant', 'test') && (0, _platformFeatureFlags.fg)('platform_editor_content_mode_button_mvp') && extensionStyle, (0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') ? (0, _expValEquals.expValEquals)('cc_editor_ai_content_mode', 'variant', 'test') && (0, _platformFeatureFlags.fg)('platform_editor_content_mode_button_mvp') ? paragraphStylesUGCScaledMargin : paragraphSharedStylesWithEditorUGC : (0, _expValEquals.expValEquals)('cc_editor_ai_content_mode', 'variant', 'test') && (0, _platformFeatureFlags.fg)('platform_editor_content_mode_button_mvp') ? paragraphSharedStyleScaledMargin : paragraphSharedStyles, listsSharedStyles, _browser.browser.gecko && listsSharedStylesForGekko, indentationSharedStyles, (0, _platformFeatureFlags.fg)('platform_editor__renderer_indentation_text_margin') && indentationSharedStylesWithMarginFix, blockMarksSharedStyles, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles, (0, _expValEquals.expValEquals)('platform_editor_text_highlight_padding', 'isEnabled', true) &&
+      css: [baseStyles, (0, _expValEquals.expValEquals)('cc_editor_ai_content_mode', 'variant', 'test') && (0, _platformFeatureFlags.fg)('platform_editor_content_mode_button_mvp') && denseStyles, hideHeadingCopyLinkWrapperStyles, appearance === 'full-page' && isPreviewPanelResponsivenessOn && rendererFullPageStylesWithReducedPadding, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && rendererFullPageStyles, appearance === 'full-width' && rendererFullWidthStyles, appearance === 'full-width' && !(0, _table.isTableResizingEnabled)(appearance) && rendererFullWidthStylesForTableResizing, !(0, _platformFeatureFlags.fg)('aifc_create_enabled') && telepointerStyles, (0, _platformFeatureFlags.fg)('aifc_create_enabled') && rovoTelepointerStyles, whitespaceSharedStyles, blockquoteSharedStyles, (0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') ? headingsSharedStylesWithEditorUGC : headingsSharedStyles, headingWithAlignmentStyles, ruleSharedStyles, (0, _expValEquals.expValEquals)('cc_editor_ai_content_mode', 'variant', 'test') && (0, _platformFeatureFlags.fg)('platform_editor_content_mode_button_mvp') && extensionStyle, (0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') ? (0, _expValEquals.expValEquals)('cc_editor_ai_content_mode', 'variant', 'test') && (0, _platformFeatureFlags.fg)('platform_editor_content_mode_button_mvp') ? paragraphStylesUGCScaledMargin : paragraphSharedStylesWithEditorUGC : (0, _expValEquals.expValEquals)('cc_editor_ai_content_mode', 'variant', 'test') && (0, _platformFeatureFlags.fg)('platform_editor_content_mode_button_mvp') ? paragraphSharedStyleScaledMargin : paragraphSharedStyles, listsSharedStyles, _browser.browser.gecko && listsSharedStylesForGekko, indentationSharedStyles, (0, _platformFeatureFlags.fg)('platform_editor__renderer_indentation_text_margin') && indentationSharedStylesWithMarginFix, blockMarksSharedStyles, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles, (0, _expValEquals.expValEquals)('platform_editor_text_highlight_padding', 'isEnabled', true) &&
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
       textHighlightPaddingStyles, tasksAndDecisionsStyles, smartCardStyles, smartCardStylesAvatarFix, (0, _experiments.editorExperiment)('platform_editor_preview_panel_linking_exp', true) && headerSmartCardStyles, (0, _platformFeatureFlags.fg)('smartcard_avatar_margin_fix') && smartCardStylesAvatarMarginFix, smartCardStylesAvatarListZeroMarginTop, (0, _platformFeatureFlags.fg)('editor_inline_comments_on_inline_nodes') && rendererAnnotationStyles,
       // eslint-disable-next-line @atlaskit/platform/no-preconditioning

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

@@ -68,7 +68,7 @@ var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
 // we want to calculate all the table widths (which causes reflows) after the renderer has finished loading to mitigate performance impact
 var TABLE_WIDTH_INFO_TIMEOUT = 10000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "124.4.2";
+var packageVersion = "124.4.4";
 var setAsQueryContainerStyles = (0, _react2.css)({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'
@@ -231,6 +231,7 @@ var RendererFunctionalComponent = exports.RendererFunctionalComponent = function
         schema: props.schema
       }, props.rendererContext),
       appearance: props.appearance,
+      contentMode: props.contentMode,
       disableHeadingIDs: props.disableHeadingIDs,
       disableActions: props.disableActions,
       allowHeadingAnchorLinks: props.allowHeadingAnchorLinks,

package/dist/es2019/react/index.js

@@ -171,6 +171,7 @@ export default class ReactSerializer {
     this.portal = init.portal;
     this.rendererContext = init.objectContext;
     this.appearance = init.appearance;
+    this.contentMode = init.contentMode;
     this.disableHeadingIDs = init.disableHeadingIDs;
     this.disableActions = init.disableActions;
     this.allowHeadingAnchorLinks = init.allowHeadingAnchorLinks;
@@ -558,6 +559,7 @@ export default class ReactSerializer {
       allowWrapCodeBlock: this.allowWrapCodeBlock,
       allowPlaceholderText: this.allowPlaceholderText,
       rendererAppearance: this.appearance,
+      rendererContentMode: this.contentMode,
       fireAnalyticsEvent: this.fireAnalyticsEvent,
       nodeType: node.type.name,
       marks: node.marks,

package/dist/es2019/ui/Expand.js

@@ -18,6 +18,7 @@ import _uniqueId from 'lodash/uniqueId';
 import { injectIntl } from 'react-intl-next';
 import { MODE, PLATFORM } from '../analytics/events';
 import { ActiveHeaderIdConsumer } from './active-header-id-provider';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 const titleStyles = css({
   outline: 'none',
   border: 'none',
@@ -32,6 +33,10 @@ const titleStyles = css({
   padding: `0 0 0 ${"var(--ds-space-050, 4px)"}`,
   textAlign: 'left'
 });
+const titleStylesDense = css({
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+  fontSize: 'var(--ak-renderer-base-font-size)'
+});
 const containerStyles = css({
   borderWidth: "var(--ds-border-width, 1px)",
   borderStyle: 'solid',
@@ -188,7 +193,8 @@ function Expand({
   fireAnalyticsEvent,
   localId,
   nestedHeaderIds,
-  rendererAppearance
+  rendererAppearance,
+  rendererContentMode
 }) {
   const [expanded, setExpanded] = React.useState(false);
   const [focused, setFocused] = React.useState(false);
@@ -199,6 +205,8 @@ function Expand({
   } = useRef(_uniqueId('expand-title-'));
   const handleFocus = useCallback(() => setFocused(true), []);
   const handleBlur = useCallback(() => setFocused(false), []);
+  const isCompactModeSupported = expValEquals('cc_editor_ai_content_mode', 'variant', 'test') && fg('platform_editor_content_mode_button_mvp');
+  const isDense = rendererContentMode === 'dense' && isCompactModeSupported;
   return jsx(Container, {
     "data-testid": `expand-container-${nodeType}-${id}`,
     "data-node-type": nodeType,
@@ -248,7 +256,7 @@ function Expand({
     spacing: "spacious",
     size: "small"
   }))), jsx("span", {
-    css: titleStyles,
+    css: [titleStyles, isDense && titleStylesDense],
     id: id
   }, title || intl.formatMessage(expandMessages.expandDefaultTitle))), jsx(ContentContainer, {
     expanded: expanded

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

@@ -823,7 +823,8 @@ const codeMarkSharedStyles = css({
   }
 });
 const extensionStyle = css({
-  '.ak-renderer-extension *': {
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+  '.ak-renderer-extension :not([data-inline-card-lozenge] *)': {
     // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
     fontSize: 'var(--ak-renderer-base-font-size)'
   }
@@ -1923,12 +1924,11 @@ const rendererAnnotationStylesCommentHeightFix = css({
     paddingTop: "var(--ds-space-025, 2px)"
   }
 });
-
-// Calculate emoji size based on base font size
-// Default: 20px emoji at 16px base font
-// Scaled: 20px * (baseFontSize/16)
-// E.g., dense mode (13px base): 20px * (13/16) = 16.25px
-const denseEmojiStyles = css({
+const denseStyles = css({
+  // Scale emoji size based on base font size
+  // Default: 20px emoji at 16px base font
+  // Scaled: 20px * (baseFontSize/16)
+  // E.g., dense mode (13px base): 20px * (13/16) = 16.25px
   [`.${EmojiSharedCssClassName.EMOJI_IMAGE}`]: {
     height: `calc(${defaultEmojiHeight} * var(--ak-renderer-base-font-size) / ${akEditorFullPageDefaultFontSize})`,
     width: `calc(${defaultEmojiHeight} * var(--ak-renderer-base-font-size) / ${akEditorFullPageDefaultFontSize})`,
@@ -1984,7 +1984,7 @@ 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, expValEquals('cc_editor_ai_content_mode', 'variant', 'test') && fg('platform_editor_content_mode_button_mvp') && denseEmojiStyles, hideHeadingCopyLinkWrapperStyles, appearance === 'full-page' && isPreviewPanelResponsivenessOn && rendererFullPageStylesWithReducedPadding, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && rendererFullPageStyles, appearance === 'full-width' && rendererFullWidthStyles, appearance === 'full-width' && !isTableResizingEnabled(appearance) && rendererFullWidthStylesForTableResizing, !fg('aifc_create_enabled') && telepointerStyles, fg('aifc_create_enabled') && rovoTelepointerStyles, whitespaceSharedStyles, blockquoteSharedStyles, fg('platform_editor_typography_ugc') ? headingsSharedStylesWithEditorUGC : headingsSharedStyles, headingWithAlignmentStyles, ruleSharedStyles, expValEquals('cc_editor_ai_content_mode', 'variant', 'test') && fg('platform_editor_content_mode_button_mvp') && extensionStyle, fg('platform_editor_typography_ugc') ? expValEquals('cc_editor_ai_content_mode', 'variant', 'test') && fg('platform_editor_content_mode_button_mvp') ? paragraphStylesUGCScaledMargin : paragraphSharedStylesWithEditorUGC : expValEquals('cc_editor_ai_content_mode', 'variant', 'test') && fg('platform_editor_content_mode_button_mvp') ? paragraphSharedStyleScaledMargin : paragraphSharedStyles, listsSharedStyles, browser.gecko && listsSharedStylesForGekko, indentationSharedStyles, fg('platform_editor__renderer_indentation_text_margin') && indentationSharedStylesWithMarginFix, blockMarksSharedStyles, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles, expValEquals('platform_editor_text_highlight_padding', 'isEnabled', true) &&
+      css: [baseStyles, expValEquals('cc_editor_ai_content_mode', 'variant', 'test') && fg('platform_editor_content_mode_button_mvp') && denseStyles, hideHeadingCopyLinkWrapperStyles, appearance === 'full-page' && isPreviewPanelResponsivenessOn && rendererFullPageStylesWithReducedPadding, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && rendererFullPageStyles, appearance === 'full-width' && rendererFullWidthStyles, appearance === 'full-width' && !isTableResizingEnabled(appearance) && rendererFullWidthStylesForTableResizing, !fg('aifc_create_enabled') && telepointerStyles, fg('aifc_create_enabled') && rovoTelepointerStyles, whitespaceSharedStyles, blockquoteSharedStyles, fg('platform_editor_typography_ugc') ? headingsSharedStylesWithEditorUGC : headingsSharedStyles, headingWithAlignmentStyles, ruleSharedStyles, expValEquals('cc_editor_ai_content_mode', 'variant', 'test') && fg('platform_editor_content_mode_button_mvp') && extensionStyle, fg('platform_editor_typography_ugc') ? expValEquals('cc_editor_ai_content_mode', 'variant', 'test') && fg('platform_editor_content_mode_button_mvp') ? paragraphStylesUGCScaledMargin : paragraphSharedStylesWithEditorUGC : expValEquals('cc_editor_ai_content_mode', 'variant', 'test') && fg('platform_editor_content_mode_button_mvp') ? paragraphSharedStyleScaledMargin : paragraphSharedStyles, listsSharedStyles, browser.gecko && listsSharedStylesForGekko, indentationSharedStyles, fg('platform_editor__renderer_indentation_text_margin') && indentationSharedStylesWithMarginFix, blockMarksSharedStyles, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles, expValEquals('platform_editor_text_highlight_padding', 'isEnabled', true) &&
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
       textHighlightPaddingStyles, tasksAndDecisionsStyles, smartCardStyles, smartCardStylesAvatarFix, editorExperiment('platform_editor_preview_panel_linking_exp', true) && headerSmartCardStyles, fg('smartcard_avatar_margin_fix') && smartCardStylesAvatarMarginFix, smartCardStylesAvatarListZeroMarginTop, fg('editor_inline_comments_on_inline_nodes') && rendererAnnotationStyles,
       // eslint-disable-next-line @atlaskit/platform/no-preconditioning

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

@@ -54,7 +54,7 @@ export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 // we want to calculate all the table widths (which causes reflows) after the renderer has finished loading to mitigate performance impact
 const TABLE_WIDTH_INFO_TIMEOUT = 10000;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "124.4.2";
+const packageVersion = "124.4.4";
 const setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'
@@ -223,6 +223,7 @@ export const RendererFunctionalComponent = props => {
         ...props.rendererContext
       },
       appearance: props.appearance,
+      contentMode: props.contentMode,
       disableHeadingIDs: props.disableHeadingIDs,
       disableActions: props.disableActions,
       allowHeadingAnchorLinks: props.allowHeadingAnchorLinks,

package/dist/esm/react/index.js

@@ -178,6 +178,7 @@ var ReactSerializer = /*#__PURE__*/function () {
     this.portal = init.portal;
     this.rendererContext = init.objectContext;
     this.appearance = init.appearance;
+    this.contentMode = init.contentMode;
     this.disableHeadingIDs = init.disableHeadingIDs;
     this.disableActions = init.disableActions;
     this.allowHeadingAnchorLinks = init.allowHeadingAnchorLinks;
@@ -619,6 +620,7 @@ var ReactSerializer = /*#__PURE__*/function () {
         allowWrapCodeBlock: this.allowWrapCodeBlock,
         allowPlaceholderText: this.allowPlaceholderText,
         rendererAppearance: this.appearance,
+        rendererContentMode: this.contentMode,
         fireAnalyticsEvent: this.fireAnalyticsEvent,
         nodeType: node.type.name,
         marks: node.marks,

package/dist/esm/ui/Expand.js

@@ -21,6 +21,7 @@ import _uniqueId from 'lodash/uniqueId';
 import { injectIntl } from 'react-intl-next';
 import { MODE, PLATFORM } from '../analytics/events';
 import { ActiveHeaderIdConsumer } from './active-header-id-provider';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 var titleStyles = css({
   outline: 'none',
   border: 'none',
@@ -35,6 +36,10 @@ var titleStyles = css({
   padding: "0 0 0 ".concat("var(--ds-space-050, 4px)"),
   textAlign: 'left'
 });
+var titleStylesDense = css({
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+  fontSize: 'var(--ak-renderer-base-font-size)'
+});
 var containerStyles = css({
   borderWidth: "var(--ds-border-width, 1px)",
   borderStyle: 'solid',
@@ -188,7 +193,8 @@ function Expand(_ref2) {
     fireAnalyticsEvent = _ref2.fireAnalyticsEvent,
     localId = _ref2.localId,
     nestedHeaderIds = _ref2.nestedHeaderIds,
-    rendererAppearance = _ref2.rendererAppearance;
+    rendererAppearance = _ref2.rendererAppearance,
+    rendererContentMode = _ref2.rendererContentMode;
   var _React$useState = React.useState(false),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     expanded = _React$useState2[0],
@@ -207,6 +213,8 @@ function Expand(_ref2) {
   var handleBlur = useCallback(function () {
     return setFocused(false);
   }, []);
+  var isCompactModeSupported = expValEquals('cc_editor_ai_content_mode', 'variant', 'test') && fg('platform_editor_content_mode_button_mvp');
+  var isDense = rendererContentMode === 'dense' && isCompactModeSupported;
   return jsx(Container, {
     "data-testid": "expand-container-".concat(nodeType, "-").concat(id),
     "data-node-type": nodeType,
@@ -258,7 +266,7 @@ function Expand(_ref2) {
     spacing: "spacious",
     size: "small"
   }))), jsx("span", {
-    css: titleStyles,
+    css: [titleStyles, isDense && titleStylesDense],
     id: id
   }, title || intl.formatMessage(expandMessages.expandDefaultTitle))), jsx(ContentContainer, {
     expanded: expanded

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

@@ -709,7 +709,8 @@ var codeMarkSharedStyles = css({
   }
 });
 var extensionStyle = css({
-  '.ak-renderer-extension *': {
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+  '.ak-renderer-extension :not([data-inline-card-lozenge] *)': {
     // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
     fontSize: 'var(--ak-renderer-base-font-size)'
   }
@@ -1514,12 +1515,7 @@ var rendererAnnotationStylesCommentHeightFix = css({
     paddingTop: "var(--ds-space-025, 2px)"
   }
 });
-
-// Calculate emoji size based on base font size
-// Default: 20px emoji at 16px base font
-// Scaled: 20px * (baseFontSize/16)
-// E.g., dense mode (13px base): 20px * (13/16) = 16.25px
-var denseEmojiStyles = css(_defineProperty(_defineProperty({}, ".".concat(EmojiSharedCssClassName.EMOJI_IMAGE), {
+var denseStyles = css(_defineProperty(_defineProperty({}, ".".concat(EmojiSharedCssClassName.EMOJI_IMAGE), {
   height: "calc(".concat(defaultEmojiHeight, " * var(--ak-renderer-base-font-size) / ").concat(akEditorFullPageDefaultFontSize, ")"),
   width: "calc(".concat(defaultEmojiHeight, " * var(--ak-renderer-base-font-size) / ").concat(akEditorFullPageDefaultFontSize, ")"),
   maxHeight: "calc(".concat(defaultEmojiHeight, " * var(--ak-renderer-base-font-size) / ").concat(akEditorFullPageDefaultFontSize, ")"),
@@ -1568,7 +1564,7 @@ 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, expValEquals('cc_editor_ai_content_mode', 'variant', 'test') && fg('platform_editor_content_mode_button_mvp') && denseEmojiStyles, hideHeadingCopyLinkWrapperStyles, appearance === 'full-page' && isPreviewPanelResponsivenessOn && rendererFullPageStylesWithReducedPadding, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && rendererFullPageStyles, appearance === 'full-width' && rendererFullWidthStyles, appearance === 'full-width' && !isTableResizingEnabled(appearance) && rendererFullWidthStylesForTableResizing, !fg('aifc_create_enabled') && telepointerStyles, fg('aifc_create_enabled') && rovoTelepointerStyles, whitespaceSharedStyles, blockquoteSharedStyles, fg('platform_editor_typography_ugc') ? headingsSharedStylesWithEditorUGC : headingsSharedStyles, headingWithAlignmentStyles, ruleSharedStyles, expValEquals('cc_editor_ai_content_mode', 'variant', 'test') && fg('platform_editor_content_mode_button_mvp') && extensionStyle, fg('platform_editor_typography_ugc') ? expValEquals('cc_editor_ai_content_mode', 'variant', 'test') && fg('platform_editor_content_mode_button_mvp') ? paragraphStylesUGCScaledMargin : paragraphSharedStylesWithEditorUGC : expValEquals('cc_editor_ai_content_mode', 'variant', 'test') && fg('platform_editor_content_mode_button_mvp') ? paragraphSharedStyleScaledMargin : paragraphSharedStyles, listsSharedStyles, browser.gecko && listsSharedStylesForGekko, indentationSharedStyles, fg('platform_editor__renderer_indentation_text_margin') && indentationSharedStylesWithMarginFix, blockMarksSharedStyles, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles, expValEquals('platform_editor_text_highlight_padding', 'isEnabled', true) &&
+      css: [baseStyles, expValEquals('cc_editor_ai_content_mode', 'variant', 'test') && fg('platform_editor_content_mode_button_mvp') && denseStyles, hideHeadingCopyLinkWrapperStyles, appearance === 'full-page' && isPreviewPanelResponsivenessOn && rendererFullPageStylesWithReducedPadding, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && rendererFullPageStyles, appearance === 'full-width' && rendererFullWidthStyles, appearance === 'full-width' && !isTableResizingEnabled(appearance) && rendererFullWidthStylesForTableResizing, !fg('aifc_create_enabled') && telepointerStyles, fg('aifc_create_enabled') && rovoTelepointerStyles, whitespaceSharedStyles, blockquoteSharedStyles, fg('platform_editor_typography_ugc') ? headingsSharedStylesWithEditorUGC : headingsSharedStyles, headingWithAlignmentStyles, ruleSharedStyles, expValEquals('cc_editor_ai_content_mode', 'variant', 'test') && fg('platform_editor_content_mode_button_mvp') && extensionStyle, fg('platform_editor_typography_ugc') ? expValEquals('cc_editor_ai_content_mode', 'variant', 'test') && fg('platform_editor_content_mode_button_mvp') ? paragraphStylesUGCScaledMargin : paragraphSharedStylesWithEditorUGC : expValEquals('cc_editor_ai_content_mode', 'variant', 'test') && fg('platform_editor_content_mode_button_mvp') ? paragraphSharedStyleScaledMargin : paragraphSharedStyles, listsSharedStyles, browser.gecko && listsSharedStylesForGekko, indentationSharedStyles, fg('platform_editor__renderer_indentation_text_margin') && indentationSharedStylesWithMarginFix, blockMarksSharedStyles, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles, expValEquals('platform_editor_text_highlight_padding', 'isEnabled', true) &&
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
       textHighlightPaddingStyles, tasksAndDecisionsStyles, smartCardStyles, smartCardStylesAvatarFix, editorExperiment('platform_editor_preview_panel_linking_exp', true) && headerSmartCardStyles, fg('smartcard_avatar_margin_fix') && smartCardStylesAvatarMarginFix, smartCardStylesAvatarListZeroMarginTop, fg('editor_inline_comments_on_inline_nodes') && rendererAnnotationStyles,
       // eslint-disable-next-line @atlaskit/platform/no-preconditioning

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

@@ -59,7 +59,7 @@ export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 // we want to calculate all the table widths (which causes reflows) after the renderer has finished loading to mitigate performance impact
 var TABLE_WIDTH_INFO_TIMEOUT = 10000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "124.4.2";
+var packageVersion = "124.4.4";
 var setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'
@@ -222,6 +222,7 @@ export var RendererFunctionalComponent = function RendererFunctionalComponent(pr
         schema: props.schema
       }, props.rendererContext),
       appearance: props.appearance,
+      contentMode: props.contentMode,
       disableHeadingIDs: props.disableHeadingIDs,
       disableActions: props.disableActions,
       allowHeadingAnchorLinks: props.allowHeadingAnchorLinks,

package/dist/types/react/index.d.ts

@@ -2,7 +2,7 @@ import { type GetPMNodeHeight } from '@atlaskit/editor-common/extensibility';
 import type { Fragment, Mark, Node } from '@atlaskit/editor-prosemirror/model';
 import type { AnalyticsEventPayload } from '../analytics/events';
 import type { Serializer } from '../serializer';
-import type { HeadingAnchorLinksProps, NodeComponentsProps, RendererAppearance, StickyHeaderConfig } from '../ui/Renderer/types';
+import type { HeadingAnchorLinksProps, NodeComponentsProps, RendererAppearance, RendererContentMode, StickyHeaderConfig } from '../ui/Renderer/types';
 import type { TextWrapper } from './nodes';
 import type { ExtensionHandlers } from '@atlaskit/editor-common/extensions';
 import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
@@ -26,6 +26,7 @@ export interface ReactSerializerInit {
     allowWindowedCodeBlock?: boolean;
     allowWrapCodeBlock?: boolean;
     appearance?: RendererAppearance;
+    contentMode?: RendererContentMode;
     disableActions?: boolean;
     disableHeadingIDs?: boolean;
     disableTableOverflowShadow?: boolean;
@@ -66,6 +67,7 @@ export default class ReactSerializer implements Serializer<JSX.Element> {
     private portal?;
     private rendererContext?;
     private appearance?;
+    private contentMode?;
     private disableHeadingIDs?;
     private disableActions?;
     private headingIds;

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

@@ -5,7 +5,7 @@ import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 import type { EventHandlers } from '@atlaskit/editor-common/ui';
 import type { AnalyticsEventPayload } from '../analytics/events';
 import type { Serializer } from '../serializer';
-import type { RendererAppearance, HeadingAnchorLinksProps } from '../ui/Renderer/types';
+import type { RendererAppearance, HeadingAnchorLinksProps, RendererContentMode } from '../ui/Renderer/types';
 import type { AnnotationId, AnnotationTypes } from '@atlaskit/adf-schema';
 export interface RendererContext {
     adDoc?: any;
@@ -34,6 +34,7 @@ export interface NodeMeta {
     portal?: HTMLElement | undefined;
     providers?: ProviderFactory | undefined;
     rendererAppearance?: RendererAppearance;
+    rendererContentMode?: RendererContentMode;
     rendererContext?: RendererContext;
     serializer: Serializer<JSX.Element>;
     text?: PMNode['text'];

package/dist/types/ui/Expand.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { WrappedComponentProps } from 'react-intl-next';
 import type { AnalyticsEventPayload } from '../analytics/events';
-import type { RendererAppearance } from './Renderer/types';
+import type { RendererAppearance, RendererContentMode } from './Renderer/types';
 export interface ExpandProps {
     children: React.ReactNode;
     fireAnalyticsEvent?: (event: AnalyticsEventPayload) => void;
@@ -9,6 +9,7 @@ export interface ExpandProps {
     nestedHeaderIds?: Array<string>;
     nodeType: 'expand' | 'nestedExpand';
     rendererAppearance?: RendererAppearance;
+    rendererContentMode?: RendererContentMode;
     title: string;
 }
 declare const _default: React.FC<import("react-intl-next").WithIntlProps<ExpandProps & WrappedComponentProps>> & {

package/dist/types-ts4.5/react/index.d.ts

@@ -2,7 +2,7 @@ import { type GetPMNodeHeight } from '@atlaskit/editor-common/extensibility';
 import type { Fragment, Mark, Node } from '@atlaskit/editor-prosemirror/model';
 import type { AnalyticsEventPayload } from '../analytics/events';
 import type { Serializer } from '../serializer';
-import type { HeadingAnchorLinksProps, NodeComponentsProps, RendererAppearance, StickyHeaderConfig } from '../ui/Renderer/types';
+import type { HeadingAnchorLinksProps, NodeComponentsProps, RendererAppearance, RendererContentMode, StickyHeaderConfig } from '../ui/Renderer/types';
 import type { TextWrapper } from './nodes';
 import type { ExtensionHandlers } from '@atlaskit/editor-common/extensions';
 import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
@@ -26,6 +26,7 @@ export interface ReactSerializerInit {
     allowWindowedCodeBlock?: boolean;
     allowWrapCodeBlock?: boolean;
     appearance?: RendererAppearance;
+    contentMode?: RendererContentMode;
     disableActions?: boolean;
     disableHeadingIDs?: boolean;
     disableTableOverflowShadow?: boolean;
@@ -66,6 +67,7 @@ export default class ReactSerializer implements Serializer<JSX.Element> {
     private portal?;
     private rendererContext?;
     private appearance?;
+    private contentMode?;
     private disableHeadingIDs?;
     private disableActions?;
     private headingIds;

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

@@ -5,7 +5,7 @@ import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 import type { EventHandlers } from '@atlaskit/editor-common/ui';
 import type { AnalyticsEventPayload } from '../analytics/events';
 import type { Serializer } from '../serializer';
-import type { RendererAppearance, HeadingAnchorLinksProps } from '../ui/Renderer/types';
+import type { RendererAppearance, HeadingAnchorLinksProps, RendererContentMode } from '../ui/Renderer/types';
 import type { AnnotationId, AnnotationTypes } from '@atlaskit/adf-schema';
 export interface RendererContext {
     adDoc?: any;
@@ -34,6 +34,7 @@ export interface NodeMeta {
     portal?: HTMLElement | undefined;
     providers?: ProviderFactory | undefined;
     rendererAppearance?: RendererAppearance;
+    rendererContentMode?: RendererContentMode;
     rendererContext?: RendererContext;
     serializer: Serializer<JSX.Element>;
     text?: PMNode['text'];

package/dist/types-ts4.5/ui/Expand.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { WrappedComponentProps } from 'react-intl-next';
 import type { AnalyticsEventPayload } from '../analytics/events';
-import type { RendererAppearance } from './Renderer/types';
+import type { RendererAppearance, RendererContentMode } from './Renderer/types';
 export interface ExpandProps {
     children: React.ReactNode;
     fireAnalyticsEvent?: (event: AnalyticsEventPayload) => void;
@@ -9,6 +9,7 @@ export interface ExpandProps {
     nestedHeaderIds?: Array<string>;
     nodeType: 'expand' | 'nestedExpand';
     rendererAppearance?: RendererAppearance;
+    rendererContentMode?: RendererContentMode;
     title: string;
 }
 declare const _default: React.FC<import("react-intl-next").WithIntlProps<ExpandProps & WrappedComponentProps>> & {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "124.4.3",
+	"version": "124.5.0",
 	"description": "Renderer component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -52,12 +52,12 @@
 		"@atlaskit/media-viewer": "^52.4.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/platform-feature-flags-react": "^0.3.0",
-		"@atlaskit/react-ufo": "^4.11.0",
+		"@atlaskit/react-ufo": "^4.12.0",
 		"@atlaskit/smart-card": "^43.1.0",
 		"@atlaskit/status": "^3.0.0",
 		"@atlaskit/task-decision": "^19.2.0",
 		"@atlaskit/theme": "^21.0.0",
-		"@atlaskit/tmp-editor-statsig": "^13.10.0",
+		"@atlaskit/tmp-editor-statsig": "^13.11.0",
 		"@atlaskit/tokens": "^6.5.0",
 		"@atlaskit/tooltip": "^20.5.0",
 		"@atlaskit/visually-hidden": "^3.0.0",
@@ -71,7 +71,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^110.12.0",
+		"@atlaskit/editor-common": "^110.13.0",
 		"@atlaskit/link-provider": "^4.0.0",
 		"@atlaskit/media-core": "^37.0.0",
 		"react": "^18.2.0",