@atlaskit/renderer 130.2.17 → 130.3.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/renderer
 
+## 130.3.0
+
+### Minor Changes
+
+- [`800992939bc88`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/800992939bc88) -
+  EDITOR-6751 - Inline bodied extension: fire analytics event when rendering
+
+### Patch Changes
+
+- Updated dependencies
+
+## 130.2.18
+
+### Patch Changes
+
+- [`1c1f0af056fcb`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1c1f0af056fcb) -
+  migrate react components from emotion to compiled for link, panel and layoutColumn
+- Updated dependencies
+
 ## 130.2.17
 
 ### Patch Changes

package/dist/cjs/react/marks/link-compiled.compiled.css

@@ -0,0 +1,6 @@
+
+._syaz13af{color:var(--ds-link,#1868db)}._1bnx8stv:hover{text-decoration-line:underline}
+._30l313af:hover{color:var(--ds-link,#1868db)}
+._9oik1r31:hover{text-decoration-color:currentColor}
+._jf4cnqa1:hover{text-decoration-style:solid}
+._9h8h12zz:active{color:var(--ds-link-pressed,#1558bc)}

package/dist/cjs/react/marks/link-compiled.js

@@ -0,0 +1,27 @@
+/* link-compiled.tsx generated by @compiled/babel-plugin v0.39.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LinkUrlCompiled = void 0;
+require("./link-compiled.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _linkUrl = _interopRequireDefault(require("@atlaskit/smart-card/link-url"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+/**
+ * Compiled branch of the `platform_editor_static_css` experiment.
+ * Used via `componentWithCondition` in `link.tsx`.
+ *
+ * Cleanup: delete this file once the experiment has shipped.
+ */
+var anchorStyles = null;
+var LinkUrlCompiled = exports.LinkUrlCompiled = function LinkUrlCompiled(props) {
+  return /*#__PURE__*/React.createElement(_linkUrl.default, (0, _extends2.default)({}, props, {
+    className: (0, _runtime.ax)(["_syaz13af _9oik1r31 _1bnx8stv _jf4cnqa1 _30l313af _9h8h12zz"])
+  }));
+};

package/dist/cjs/react/marks/link-emotion.js

@@ -0,0 +1,42 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LinkUrlEmotion = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = require("@emotion/react");
+var _linkUrl = _interopRequireDefault(require("@atlaskit/smart-card/link-url"));
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+/**
+ * Emotion branch of the `platform_editor_static_css` experiment.
+ * Used via `componentWithCondition` in `link.tsx`.
+ *
+ * Cleanup: delete this file once the experiment has shipped.
+ */
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- intentional: emotion fallback for compiled migration
+
+var anchorStyles = (0, _react.css)({
+  color: "var(--ds-link, #1868DB)",
+  '&:hover': {
+    color: "var(--ds-link, #1868DB)",
+    textDecoration: 'underline'
+  },
+  '&:active': {
+    color: "var(--ds-link-pressed, #1558BC)"
+  }
+});
+var LinkUrlEmotion = exports.LinkUrlEmotion = function LinkUrlEmotion(props) {
+  return (
+    // Ignored via go/ees005
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    (0, _react.jsx)(_linkUrl.default, (0, _extends2.default)({
+      css: anchorStyles
+    }, props))
+  );
+};

package/dist/cjs/react/marks/link.js

@@ -8,30 +8,21 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = Link;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
-var _react2 = require("@emotion/react");
+var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react");
 var _utils = require("../../utils");
 var _events = require("../../analytics/events");
 var _analytics = require("@atlaskit/editor-common/analytics");
-var _linkUrl = _interopRequireDefault(require("@atlaskit/smart-card/link-url"));
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _analyticsNext = require("@atlaskit/analytics-next");
+var _linkCompiled = require("./link-compiled");
+var _linkEmotion = require("./link-emotion");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var LinkUrlMigration = (0, _platformFeatureFlagsReact.componentWithCondition)(function () {
+  return (0, _expValEquals.expValEquals)('platform_editor_renderer_static_css', 'isEnabled', true);
+}, _linkCompiled.LinkUrlCompiled, _linkEmotion.LinkUrlEmotion);
 /**
- * @jsxRuntime classic
- * @jsx jsx
+ * Render an ADF link mark in renderer.
  */
-
-/* eslint-disable @typescript-eslint/consistent-type-imports, @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766; jsx required at runtime for @jsxRuntime classic */
-
-var anchorStyles = (0, _react2.css)({
-  color: "var(--ds-link, #1868DB)",
-  '&:hover': {
-    color: "var(--ds-link, #1868DB)",
-    textDecoration: 'underline'
-  },
-  '&:active': {
-    color: "var(--ds-link-pressed, #1558BC)"
-  }
-});
 function Link(props) {
   var href = props.href,
     target = props.target,
@@ -60,7 +51,7 @@ function Link(props) {
   }
   var handler = (0, _utils.getEventHandler)(eventHandlers, 'link');
   if (isMediaLink) {
-    return (0, _react2.jsx)(_react.Fragment, null, props.children);
+    return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, props.children);
   }
   var analyticsData = {
     attributes: {
@@ -69,12 +60,11 @@ function Link(props) {
     // Below is added for the future implementation of Linking Platform namespaced analytic context
     location: 'renderer'
   };
-  return (0, _react2.jsx)(_analyticsNext.AnalyticsContext, {
+  return /*#__PURE__*/_react.default.createElement(_analyticsNext.AnalyticsContext, {
     data: analyticsData
-  }, (0, _react2.jsx)(_linkUrl.default, (0, _extends2.default)({
-    css: anchorStyles
-    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
-    ,
+  }, /*#__PURE__*/_react.default.createElement(LinkUrlMigration
+  // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
+  , (0, _extends2.default)({
     onClick: function onClick(e) {
       if (fireAnalyticsEvent) {
         fireAnalyticsEvent({

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

@@ -28,7 +28,8 @@ var BodiedExtension = function BodiedExtension(props) {
     parameters = props.parameters,
     extensionViewportSizes = props.extensionViewportSizes,
     localId = props.localId,
-    shouldDisplayExtensionAsInline = props.shouldDisplayExtensionAsInline;
+    shouldDisplayExtensionAsInline = props.shouldDisplayExtensionAsInline,
+    fireAnalyticsEvent = props.fireAnalyticsEvent;
   var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
   var removeOverflow = _react.default.Children.toArray(children)
@@ -66,7 +67,8 @@ var BodiedExtension = function BodiedExtension(props) {
         // Return the content directly if it's a valid JSX.Element
         return (0, _extension.renderExtension)(result, layout, {
           isTopLevel: path.length < 1,
-          rendererAppearance: props.rendererAppearance
+          rendererAppearance: props.rendererAppearance,
+          fireAnalyticsEvent: fireAnalyticsEvent
         }, removeOverflow, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes, undefined, localId, shouldDisplayExtensionAsInline, node);
       }
     } catch (_unused) {
@@ -77,7 +79,8 @@ var BodiedExtension = function BodiedExtension(props) {
     // Always return default content if anything goes wrong
     return (0, _extension.renderExtension)(children, layout, {
       isTopLevel: path.length < 1,
-      rendererAppearance: props.rendererAppearance
+      rendererAppearance: props.rendererAppearance,
+      fireAnalyticsEvent: fireAnalyticsEvent
     }, removeOverflow, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes, undefined, localId, shouldDisplayExtensionAsInline, node);
   }))));
 };

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

@@ -1,13 +1,15 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.renderExtension = exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = require("@emotion/react");
-var _react2 = _interopRequireDefault(require("react"));
+var _react2 = _interopRequireWildcard(require("react"));
+var _analytics = require("@atlaskit/editor-common/analytics");
 var _ExtensionRenderer = _interopRequireDefault(require("../../ui/ExtensionRenderer"));
 var _ui = require("@atlaskit/editor-common/ui");
 var _utils = require("@atlaskit/editor-common/utils");
@@ -15,6 +17,7 @@ var _consts = require("../../consts");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _breakout = require("../utils/breakout");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -46,6 +49,28 @@ var getViewportSize = function getViewportSize(extensionId, extensionViewportSiz
 var containerStyle = (0, _react.css)({
   containerType: 'inline-size'
 });
+/**
+ * Fires an analytics event once on mount when a bodied extension is rendered as an inline element.
+ * The node is stored in a ref to avoid re-firing if the node reference changes.
+ */
+var FireExtensionAsInlineAnalytics = function FireExtensionAsInlineAnalytics(_ref) {
+  var fireAnalyticsEvent = _ref.fireAnalyticsEvent,
+    node = _ref.node;
+  var nodeRef = (0, _react2.useRef)(node);
+  (0, _react2.useEffect)(function () {
+    fireAnalyticsEvent({
+      action: _analytics.ACTION.RENDERED,
+      actionSubject: _analytics.ACTION_SUBJECT.EXTENSION_AS_INLINE,
+      actionSubjectId: _analytics.ACTION_SUBJECT_ID.EXTENSION_BODIED,
+      attributes: {
+        extensionKey: nodeRef.current.extensionKey,
+        extensionType: nodeRef.current.extensionType
+      },
+      eventType: _analytics.EVENT_TYPE.OPERATIONAL
+    });
+  }, [fireAnalyticsEvent]);
+  return null;
+};
 var renderExtension = exports.renderExtension = function renderExtension(content, layout) {
   var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
   var removeOverflow = arguments.length > 3 ? arguments[3] : undefined;
@@ -59,10 +84,11 @@ var renderExtension = exports.renderExtension = function renderExtension(content
   var overflowContainerClass = !removeOverflow ? _consts.RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER : '';
 
   // by default, we assume the extension is at top level, (direct child of doc node)
-  var _ref = options || {},
-    _ref$isTopLevel = _ref.isTopLevel,
-    isTopLevel = _ref$isTopLevel === void 0 ? true : _ref$isTopLevel,
-    rendererAppearance = _ref.rendererAppearance;
+  var _ref2 = options || {},
+    _ref2$isTopLevel = _ref2.isTopLevel,
+    isTopLevel = _ref2$isTopLevel === void 0 ? true : _ref2$isTopLevel,
+    rendererAppearance = _ref2.rendererAppearance,
+    fireAnalyticsEvent = _ref2.fireAnalyticsEvent;
   // we should only use custom layout for full-page appearance
   var canUseCustomLayout = (0, _expValEquals.expValEquals)('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? rendererAppearance === 'full-page' : true;
   var isCustomLayout = isTopLevel && ['wide', 'full-width'].includes(layout) && canUseCustomLayout;
@@ -77,6 +103,10 @@ var renderExtension = exports.renderExtension = function renderExtension(content
   var extensionHeight = nodeHeight || viewportSize;
   var isInline = (shouldDisplayExtensionAsInline === null || shouldDisplayExtensionAsInline === void 0 ? void 0 : shouldDisplayExtensionAsInline(node)) && (0, _expValEquals.expValEquals)('platform_editor_render_bodied_extension_as_inline', 'isEnabled', true);
   var inlineClassName = isInline ? _consts.RendererCssClassName.EXTENSION_AS_INLINE : '';
+  var asInlineAnalytics = isInline && fireAnalyticsEvent && node && (0, _platformFeatureFlags.fg)('platform_editor_render_inline_extension_analytics') ? (0, _react.jsx)(FireExtensionAsInlineAnalytics, {
+    fireAnalyticsEvent: fireAnalyticsEvent,
+    node: node
+  }) : null;
   if ((0, _expValEquals.expValEquals)('platform_editor_renderer_extension_width_fix', 'isEnabled', true)) {
     var extensionDiv = (0, _react.jsx)("div", {
       ref: options.handleRef
@@ -100,14 +130,14 @@ var renderExtension = exports.renderExtension = function renderExtension(content
       ,
       className: "".concat(_consts.RendererCssClassName.EXTENSION_INNER_WRAPPER, " ").concat(overflowContainerClass),
       css: [!isInsideOfInlineExtension && (0, _platformFeatureFlags.fg)('platform_fix_macro_renders_in_layouts') && containerStyle]
-    }, content));
+    }, asInlineAnalytics, content));
     return centerAlignClass && (0, _expValEquals.expValEquals)('platform_editor_flex_based_centering', 'isEnabled', true) ? (0, _react.jsx)("div", {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
       className: _consts.RendererCssClassName.STICKY_SAFE_CENTER_WRAPPER + ' ' + _consts.RendererCssClassName.FLEX_CENTER_WRAPPER
     }, extensionDiv) : extensionDiv;
   }
-  return (0, _react.jsx)(_ui.WidthConsumer, null, function (_ref2) {
-    var width = _ref2.width;
+  return (0, _react.jsx)(_ui.WidthConsumer, null, function (_ref3) {
+    var width = _ref3.width;
     var extensionDiv = (0, _react.jsx)("div", {
       ref: options.handleRef
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
@@ -129,7 +159,7 @@ var renderExtension = exports.renderExtension = function renderExtension(content
       ,
       className: "".concat(_consts.RendererCssClassName.EXTENSION_INNER_WRAPPER, " ").concat(overflowContainerClass),
       css: [!isInsideOfInlineExtension && (0, _platformFeatureFlags.fg)('platform_fix_macro_renders_in_layouts') && containerStyle]
-    }, content));
+    }, asInlineAnalytics, content));
     return centerAlignClass && (0, _expValEquals.expValEquals)('platform_editor_flex_based_centering', 'isEnabled', true) ? (0, _react.jsx)("div", {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
       className: _consts.RendererCssClassName.STICKY_SAFE_CENTER_WRAPPER + ' ' + _consts.RendererCssClassName.FLEX_CENTER_WRAPPER
@@ -154,8 +184,8 @@ var Extension = function Extension(props) {
   // eslint-disable-next-line react/jsx-props-no-spreading
   , (0, _extends2.default)({}, props, {
     type: "extension"
-  }), function (_ref3) {
-    var result = _ref3.result;
+  }), function (_ref4) {
+    var result = _ref4.result;
     try {
       // Return the result directly if it's a valid JSX.Element
       if (result && /*#__PURE__*/_react2.default.isValidElement(result)) {

package/dist/cjs/react/nodes/layoutColumn-compiled.compiled.css

@@ -0,0 +1,10 @@
+._12kpidpf [class*=image-wrap-]:has(+[class*=image-wrap-]){margin-top:0}
+._166hgrf3+.fabric-editor-block-mark>h4{margin-top:0!important}
+._19segrf3+.fabric-editor-block-mark>h1{margin-top:0!important}
+._1ki1grf3+.fabric-editor-block-mark>h2{margin-top:0!important}
+._1skbgrf3+*{margin-top:0!important}
+._1tihidpf [class*=image-wrap-]+[class*=image-wrap-]{margin-top:0}
+._7g1ogrf3+.fabric-editor-block-mark>h5{margin-top:0!important}
+._bmdegrf3+.fabric-editor-block-mark>h3{margin-top:0!important}
+._hgeogrf3+.fabric-editor-block-mark>p{margin-top:0!important}
+._sk2jgrf3+.fabric-editor-block-mark>h6{margin-top:0!important}

package/dist/cjs/react/nodes/layoutColumn-compiled.js

@@ -0,0 +1,37 @@
+/* layoutColumn-compiled.tsx generated by @compiled/babel-plugin v0.39.1 */
+/**
+ * Compiled branch of the `platform_editor_static_css` experiment.
+ * Used via `componentWithCondition` in `layoutColumn.tsx`.
+ *
+ * Cleanup: delete this file once the experiment has shipped.
+ */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LayoutSectionCompiled = void 0;
+require("./layoutColumn-compiled.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _react = _interopRequireDefault(require("react"));
+var _ui = require("@atlaskit/editor-common/ui");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+// localized styles, was from clearNextSiblingMarginTopStyle in @atlaskit/editor-common/ui
+var clearNextSiblingMarginTopStyle = null;
+var multipleWrappedImagesStyle = null;
+
+// localized styles, was from clearNextSiblingBlockMarkMarginTopStyle in @atlaskit/editor-common/ui
+var clearNextSiblingBlockMarkMarginTopStyle = null;
+var LayoutSectionCompiled = exports.LayoutSectionCompiled = function LayoutSectionCompiled(props) {
+  return /*#__PURE__*/_react.default.createElement("div", {
+    "data-layout-column": true,
+    "data-column-width": props.width,
+    style: {
+      flexBasis: "".concat(props.width, "%")
+    },
+    className: (0, _runtime.ax)([(0, _platformFeatureFlags.fg)('platform_editor_fix_media_in_renderer') && "_1tihidpf _12kpidpf"])
+  }, /*#__PURE__*/_react.default.createElement(_ui.WidthProvider, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _runtime.ax)(["_1skbgrf3", "_19segrf3 _1ki1grf3 _bmdegrf3 _166hgrf3 _7g1ogrf3 _sk2jgrf3 _hgeogrf3"])
+  }), props.children));
+};

package/dist/cjs/react/nodes/layoutColumn-emotion.js

@@ -0,0 +1,59 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LayoutSectionEmotion = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@emotion/react");
+var _ui = require("@atlaskit/editor-common/ui");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+/**
+ * Emotion branch of the `platform_editor_static_css` experiment.
+ * Used via `componentWithCondition` in `layoutColumn.tsx`.
+ *
+ * Cleanup: delete this file once the experiment has shipped.
+ */
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- intentional: emotion fallback for compiled migration
+
+// localized styles, was from clearNextSiblingMarginTopStyle in @atlaskit/editor-common/ui
+var clearNextSiblingMarginTopStyle = (0, _react2.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '& + *': {
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
+    marginTop: '0 !important'
+  }
+});
+var multipleWrappedImagesStyle = (0, _react2.css)({
+  // Given the first wrapped mediaSingle has 0 marginTop (see clearNextSiblingMarginTopStyle),
+  // update all wrapped mediaSingle inside layout to have 0 margin top unless they don't have sibling wrapped mediaSingle
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,  @atlaskit/ui-styling-standard/no-unsafe-selectors
+  '& [class*="image-wrap-"] + [class*="image-wrap-"], & [class*="image-wrap-"]:has( + [class*="image-wrap-"])': {
+    marginTop: '0'
+  }
+});
+
+// localized styles, was from clearNextSiblingBlockMarkMarginTopStyle in @atlaskit/editor-common/ui
+var clearNextSiblingBlockMarkMarginTopStyle = (0, _react2.css)((0, _defineProperty2.default)({}, "+ .fabric-editor-block-mark > p,\n\t  + .fabric-editor-block-mark > h1,\n\t  + .fabric-editor-block-mark > h2,\n\t  + .fabric-editor-block-mark > h3,\n\t  + .fabric-editor-block-mark > h4,\n\t  + .fabric-editor-block-mark > h5,\n\t  + .fabric-editor-block-mark > h6\n\t", {
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
+  marginTop: '0 !important'
+}));
+var LayoutSectionEmotion = exports.LayoutSectionEmotion = function LayoutSectionEmotion(props) {
+  return (0, _react2.jsx)("div", {
+    "data-layout-column": true,
+    "data-column-width": props.width,
+    style: {
+      flexBasis: "".concat(props.width, "%")
+    },
+    css: (0, _platformFeatureFlags.fg)('platform_editor_fix_media_in_renderer') && multipleWrappedImagesStyle
+  }, (0, _react2.jsx)(_ui.WidthProvider, null, (0, _react2.jsx)("div", {
+    css: [clearNextSiblingMarginTopStyle, clearNextSiblingBlockMarkMarginTopStyle]
+  }), props.children));
+};

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

@@ -5,49 +5,19 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = LayoutSection;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
-var _react2 = require("@emotion/react");
-var _ui = require("@atlaskit/editor-common/ui");
-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 _layoutColumnCompiled = require("./layoutColumn-compiled");
+var _layoutColumnEmotion = require("./layoutColumn-emotion");
+var LayoutSectionMigration = (0, _platformFeatureFlagsReact.componentWithCondition)(function () {
+  return (0, _expValEquals.expValEquals)('platform_editor_renderer_static_css', 'isEnabled', true);
+}, _layoutColumnCompiled.LayoutSectionCompiled, _layoutColumnEmotion.LayoutSectionEmotion);
+
 /**
- * @jsxRuntime classic
- * @jsx jsx
+ * Render a layout column in renderer.
  */
-
-/* eslint-disable @typescript-eslint/consistent-type-imports, @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766; jsx required at runtime for @jsxRuntime classic */
-
-// localized styles, was from clearNextSiblingMarginTopStyle in @atlaskit/editor-common/ui
-var clearNextSiblingMarginTopStyle = (0, _react2.css)({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '& + *': {
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
-    marginTop: '0 !important'
-  }
-});
-var multipleWrappedImagesStyle = (0, _react2.css)({
-  // Given the first wrapped mediaSingle has 0 marginTop (see clearNextSiblingMarginTopStyle),
-  // update all wrapped mediaSingle inside layout to have 0 margin top unless they don't have sibling wrapped mediaSingle
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,  @atlaskit/ui-styling-standard/no-unsafe-selectors
-  '& [class*="image-wrap-"] + [class*="image-wrap-"], & [class*="image-wrap-"]:has( + [class*="image-wrap-"])': {
-    marginTop: '0'
-  }
-});
-
-// localized styles, was from clearNextSiblingBlockMarkMarginTopStyle in @atlaskit/editor-common/ui
-var clearNextSiblingBlockMarkMarginTopStyle = (0, _react2.css)((0, _defineProperty2.default)({}, "+ .fabric-editor-block-mark > p,\n\t  + .fabric-editor-block-mark > h1,\n\t  + .fabric-editor-block-mark > h2,\n\t  + .fabric-editor-block-mark > h3,\n\t  + .fabric-editor-block-mark > h4,\n\t  + .fabric-editor-block-mark > h5,\n\t  + .fabric-editor-block-mark > h6\n\t", {
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
-  marginTop: '0 !important'
-}));
 function LayoutSection(props) {
-  return (0, _react2.jsx)("div", {
-    "data-layout-column": true,
-    "data-column-width": props.width,
-    style: {
-      flexBasis: "".concat(props.width, "%")
-    },
-    css: (0, _platformFeatureFlags.fg)('platform_editor_fix_media_in_renderer') && multipleWrappedImagesStyle
-  }, (0, _react2.jsx)(_ui.WidthProvider, null, (0, _react2.jsx)("div", {
-    css: [clearNextSiblingMarginTopStyle, clearNextSiblingBlockMarkMarginTopStyle]
-  }), props.children));
+  // eslint-disable-next-line react/jsx-props-no-spreading
+  return /*#__PURE__*/_react.default.createElement(LayoutSectionMigration, props);
 }

package/dist/cjs/react/nodes/panel-compiled.compiled.css

@@ -0,0 +1,54 @@
+
+._1wvnia51 .ak-editor-panel__content .ak-editor-panel{border:var(--ds-border-width,1px) solid var(--ds-border,#0b120e24)}
+._imyb1bbz.ak-editor-panel{margin:var(--_15dzi2n)}
+._lklzfajl.ak-editor-panel{border-radius:var(--ds-radius-small,3px)}._11k7idpf.ak-editor-panel .ak-editor-panel__content{margin-right:0}
+._11wb1ejb.ak-editor-panel .ak-editor-panel__icon{width:var(--ds-space-300,24px)}
+._122m1aok.ak-editor-panel[data-panel-type=custom]{background-color:var(--ak-renderer-panel-custom-bg-color)}
+._13n84jg8.ak-editor-panel{align-items:normal}
+._1554u2gc.ak-editor-panel{padding-top:var(--ds-space-100,8px)}
+._15sp1vk5.ak-editor-panel[data-panel-type=error]{background-color:var(--ds-background-accent-red-subtlest,#ffeceb)}
+._18w0h2mm.ak-editor-panel{position:relative}
+._18y8qm1h.ak-editor-panel[data-panel-type=note] .ak-editor-panel__icon{color:var(--ds-icon-discovery,#af59e1)}
+._19agidpf.ak-editor-panel .ak-editor-panel__content{flex-shrink:0}
+._19s71txw.ak-editor-panel{display:flex}
+._1a3fnkob.ak-editor-panel .ak-editor-panel__icon>span{vertical-align:middle}
+._1b0jutpp.ak-editor-panel[data-panel-type=custom]{padding-right:var(--ds-space-150,9pt)}
+._1bi2v77o.ak-editor-panel .ak-editor-panel__content{margin-bottom:var(--ds-space-025,2px)}
+._1cgk1h6o.ak-editor-panel .ak-editor-panel__icon{text-align:center}
+._1eiopxbi.ak-editor-panel{padding-right:var(--ds-space-200,1pc)}
+._1fe7s4qr.ak-editor-panel[data-panel-type=error] .ak-editor-panel__icon{color:var(--ds-icon-danger,#c9372c)}
+._1g6dibhp.ak-editor-panel[data-panel-type=warning]{background-color:var(--ds-background-accent-yellow-subtlest,#fef7c8)}
+._1h33yhbg.ak-editor-panel .ak-editor-panel__icon{color:var(--ds-icon-information,#357de8)}
+._1hauowts.ak-editor-panel .ak-editor-panel__icon .emoji-common-emoji-sprite{vertical-align:var(--_qwtrmr)}
+._1it3jmsf.ak-editor-panel{min-width:var(--_1jw427p)}
+._1l9midpf.ak-editor-panel .ak-editor-panel__icon{flex-shrink:0}
+._1n3wglyw.ak-editor-panel .ak-editor-panel__icon{-ms-user-select:none}
+._1oah1ntv.ak-editor-panel .ak-editor-panel__icon{box-sizing:content-box}
+._1pciu2gc.ak-editor-panel .ak-editor-panel__icon{padding-right:var(--ds-space-100,8px)}
+._1q6xf1ug.ak-editor-panel .ak-editor-panel__content{flex-basis:0%}
+._1udservl.ak-editor-panel[data-panel-type=warning] .ak-editor-panel__icon{color:var(--ds-icon-warning,#e06c00)}
+._1uvd116y.ak-editor-panel .ak-editor-panel__icon>span{display:inline-flex}
+._1v1c1ejb.ak-editor-panel .ak-editor-panel__icon{height:var(--ds-space-300,24px)}
+._1w22u2gc.ak-editor-panel{padding-bottom:var(--ds-space-100,8px)}
+._1whxutpp.ak-editor-panel[data-panel-type=custom]{padding-left:var(--ds-space-150,9pt)}
+._1yw1vq3b.ak-editor-panel .ak-editor-panel__icon{margin-top:.1em}
+._50vakb7n.ak-editor-panel .ak-editor-panel__content{flex-grow:1}
+._5zphglyw.ak-editor-panel .ak-editor-panel__icon{-webkit-user-select:none;-ms-user-select:none;user-select:none}
+._66ohu2gc.ak-editor-panel{padding-left:var(--ds-space-100,8px)}
+._6qwr1hna.ak-editor-panel{word-break:break-word}
+._7c6p1t9x.ak-editor-panel .ak-editor-panel__icon .emoji-common-emoji-image{vertical-align:var(--_1glv3p1)}
+._9dunutpp.ak-editor-panel__no-icon{padding-left:var(--ds-space-150,9pt)}
+._e5ovn729.ak-editor-panel[data-panel-type=tip]{background-color:var(--ds-background-accent-green-subtlest,#dcfff1)}
+._fc9iidpf.ak-editor-panel .ak-editor-panel__content{min-width:0}
+._g8a34pcx.ak-editor-panel[data-panel-type=tip] .ak-editor-panel__icon{color:var(--ds-icon-success,#6a9a23)}
+._gb1eidpf.ak-editor-panel .ak-editor-panel__content{margin-left:0}
+._gt7x4pcx.ak-editor-panel[data-panel-type=success] .ak-editor-panel__icon{color:var(--ds-icon-success,#6a9a23)}
+._iqv91kw7.ak-editor-panel{color:inherit}
+._jde2v77o.ak-editor-panel .ak-editor-panel__content{margin-top:var(--ds-space-025,2px)}
+._nlelp2ly.ak-editor-panel[data-panel-type=note]{background-color:var(--ds-background-accent-purple-subtlest,#f8eefe)}
+._pzbautpp.ak-editor-panel__no-icon{padding-right:var(--ds-space-150,9pt)}
+._s4ldn729.ak-editor-panel[data-panel-type=success]{background-color:var(--ds-background-accent-green-subtlest,#dcfff1)}
+._ujht1s93.ak-editor-panel{background-color:var(--ds-background-accent-blue-subtlest,#e9f2fe)}
+._wz94glyw.ak-editor-panel .ak-editor-panel__icon{-moz-user-select:none}
+._zs6jglyw.ak-editor-panel .ak-editor-panel__icon{-webkit-user-select:none}
+@-moz-document url-prefix(){._udsa1o8l.ak-editor-panel .ak-editor-panel__icon .emoji-common-emoji-image img{display:inline-block}}

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

@@ -0,0 +1,60 @@
+/* panel-compiled.tsx generated by @compiled/babel-plugin v0.39.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PanelStyledCompiled = void 0;
+require("./panel-compiled.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _adfSchema = require("@atlaskit/adf-schema");
+var _consts = require("@atlaskit/editor-shared-styles/consts");
+var _editorPalette = require("@atlaskit/editor-palette");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _excluded = ["backgroundColor", "children", "className", "hasIcon"];
+/**
+ * Compiled branch of the `platform_editor_static_css` experiment.
+ * Used via `componentWithCondition` in `panel.tsx`.
+ *
+ * Cleanup: delete this file once the experiment has shipped.
+ */
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+// New custom icons are a little smaller than predefined icons.
+// To fix alignment issues with custom icons, vertical alignment is updated.
+var panelEmojiSpriteVerticalAlignment = -(8 * 3 - _consts.akEditorCustomIconSize) / 2;
+var panelEmojiImageVerticalAlignment = panelEmojiSpriteVerticalAlignment - 1;
+var blockNodesVerticalMargin = '0.75rem';
+var akEditorTableCellMinWidth = 48;
+var panelBaseStyles = null;
+var panelHasNoIconStyles = null;
+var panelNestedIconStyles = null;
+var nestedPanelStyles = null;
+var panelCustomBackground = null;
+var PanelStyledCompiled = exports.PanelStyledCompiled = function PanelStyledCompiled(_ref) {
+  var backgroundColor = _ref.backgroundColor,
+    children = _ref.children,
+    className = _ref.className,
+    hasIcon = _ref.hasIcon,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var customBackgroundColor = backgroundColor ? (0, _editorPalette.hexToEditorBackgroundPaletteColor)(backgroundColor) || backgroundColor : undefined;
+  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, props, {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- intentional: preserve existing PanelSharedCssClassName.prefix class
+    className: (0, _runtime.ax)(["_lklzfajl _imyb1bbz _50vakb7n _19agidpf _1q6xf1ug _jde2v77o _1bi2v77o _gb1eidpf _11k7idpf _fc9iidpf _1554u2gc _1eiopxbi _1w22u2gc _66ohu2gc _1it3jmsf _19s71txw _18w0h2mm _13n84jg8 _6qwr1hna _ujht1s93 _iqv91kw7 _1l9midpf _1v1c1ejb _11wb1ejb _1oah1ntv _1pciu2gc _1cgk1h6o _5zphglyw _wz94glyw _zs6jglyw _1n3wglyw _1yw1vq3b _1h33yhbg _1a3fnkob _1uvd116y _1hauowts _7c6p1t9x _udsa1o8l _nlelp2ly _18y8qm1h _e5ovn729 _g8a34pcx _1g6dibhp _1udservl _15sp1vk5 _1fe7s4qr _s4ldn729 _gt7x4pcx", !hasIcon && "_1whxutpp _1b0jutpp", props['data-panel-type'] === _adfSchema.PanelType.CUSTOM && backgroundColor && "_122m1aok", (0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes') && "_9dunutpp _pzbautpp", "_1wvnia51", className]),
+    style: _objectSpread(_objectSpread({}, {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- intentional: custom panel background is dynamic via CSS variable
+      '--ak-renderer-panel-custom-bg-color': customBackgroundColor
+    }), {}, {
+      "--_15dzi2n": (0, _runtime.ix)("".concat(blockNodesVerticalMargin, " 0 0")),
+      "--_1jw427p": (0, _runtime.ix)("".concat(akEditorTableCellMinWidth, "px")),
+      "--_qwtrmr": (0, _runtime.ix)("".concat(panelEmojiSpriteVerticalAlignment, "px")),
+      "--_1glv3p1": (0, _runtime.ix)("".concat(panelEmojiImageVerticalAlignment, "px"))
+    })
+  }), children);
+};
+PanelStyledCompiled.displayName = 'PanelStyledCompiled';