@atlaskit/renderer 130.2.16 → 130.2.18

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

@@ -1,45 +1,16 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
 import React from 'react';
-/* 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 */
-import { jsx, css } from '@emotion/react';
-import { WidthProvider } from '@atlaskit/editor-common/ui';
-import { fg } from '@atlaskit/platform-feature-flags';
-
-// localized styles, was from clearNextSiblingMarginTopStyle in @atlaskit/editor-common/ui
-var clearNextSiblingMarginTopStyle = 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 = 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'
-  }
-});
+import { componentWithCondition } from '@atlaskit/platform-feature-flags-react';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { LayoutSectionCompiled } from './layoutColumn-compiled';
+import { LayoutSectionEmotion } from './layoutColumn-emotion';
+var LayoutSectionMigration = componentWithCondition(function () {
+  return expValEquals('platform_editor_renderer_static_css', 'isEnabled', true);
+}, LayoutSectionCompiled, LayoutSectionEmotion);
 
-// localized styles, was from clearNextSiblingBlockMarkMarginTopStyle in @atlaskit/editor-common/ui
-var clearNextSiblingBlockMarkMarginTopStyle = css(_defineProperty({}, "+ .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'
-}));
+/**
+ * Render a layout column in renderer.
+ */
 export default function LayoutSection(props) {
-  return jsx("div", {
-    "data-layout-column": true,
-    "data-column-width": props.width,
-    style: {
-      flexBasis: "".concat(props.width, "%")
-    },
-    css: fg('platform_editor_fix_media_in_renderer') && multipleWrappedImagesStyle
-  }, jsx(WidthProvider, null, jsx("div", {
-    css: [clearNextSiblingMarginTopStyle, clearNextSiblingBlockMarkMarginTopStyle]
-  }), props.children));
+  // eslint-disable-next-line react/jsx-props-no-spreading
+  return /*#__PURE__*/React.createElement(LayoutSectionMigration, props);
 }

package/dist/esm/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/esm/react/nodes/panel-compiled.js

@@ -0,0 +1,53 @@
+/* panel-compiled.tsx generated by @compiled/babel-plugin v0.39.1 */
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["backgroundColor", "children", "className", "hasIcon"];
+import "./panel-compiled.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+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) { _defineProperty(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; }
+/**
+ * Compiled branch of the `platform_editor_static_css` experiment.
+ * Used via `componentWithCondition` in `panel.tsx`.
+ *
+ * Cleanup: delete this file once the experiment has shipped.
+ */
+import React from 'react';
+import { PanelType } from '@atlaskit/adf-schema';
+import { akEditorCustomIconSize } from '@atlaskit/editor-shared-styles/consts';
+import { hexToEditorBackgroundPaletteColor } from '@atlaskit/editor-palette';
+import { fg } from '@atlaskit/platform-feature-flags';
+// 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 - 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;
+export var PanelStyledCompiled = function PanelStyledCompiled(_ref) {
+  var backgroundColor = _ref.backgroundColor,
+    children = _ref.children,
+    className = _ref.className,
+    hasIcon = _ref.hasIcon,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var customBackgroundColor = backgroundColor ? hexToEditorBackgroundPaletteColor(backgroundColor) || backgroundColor : undefined;
+  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- intentional: preserve existing PanelSharedCssClassName.prefix class
+    className: 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'] === PanelType.CUSTOM && backgroundColor && "_122m1aok", 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": ix("".concat(blockNodesVerticalMargin, " 0 0")),
+      "--_1jw427p": ix("".concat(akEditorTableCellMinWidth, "px")),
+      "--_qwtrmr": ix("".concat(panelEmojiSpriteVerticalAlignment, "px")),
+      "--_1glv3p1": ix("".concat(panelEmojiImageVerticalAlignment, "px"))
+    })
+  }), children);
+};
+PanelStyledCompiled.displayName = 'PanelStyledCompiled';

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

@@ -0,0 +1,179 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["backgroundColor", "hasIcon"];
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+/**
+ * Emotion branch of the `platform_editor_static_css` experiment.
+ * Used via `componentWithCondition` in `panel.tsx`.
+ *
+ * Cleanup: delete this file once the experiment has shipped.
+ */
+import React from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- intentional: emotion fallback for compiled migration
+import { css, jsx } from '@emotion/react';
+import { PanelType } from '@atlaskit/adf-schema';
+import { akEditorCustomIconSize } from '@atlaskit/editor-shared-styles/consts';
+import { hexToEditorBackgroundPaletteColor } from '@atlaskit/editor-palette';
+import { fg } from '@atlaskit/platform-feature-flags';
+// 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 - akEditorCustomIconSize) / 2;
+var panelEmojiImageVerticalAlignment = panelEmojiSpriteVerticalAlignment - 1;
+var blockNodesVerticalMargin = '0.75rem';
+var akEditorTableCellMinWidth = 48;
+var panelBaseStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '&.ak-editor-panel': {
+    borderRadius: "var(--ds-radius-small, 3px)",
+    margin: "".concat(blockNodesVerticalMargin, " 0 0"),
+    paddingTop: "var(--ds-space-100, 8px)",
+    paddingRight: "var(--ds-space-200, 16px)",
+    paddingBottom: "var(--ds-space-100, 8px)",
+    paddingLeft: "var(--ds-space-100, 8px)",
+    minWidth: "".concat(akEditorTableCellMinWidth, "px"),
+    display: 'flex',
+    position: 'relative',
+    alignItems: 'normal',
+    wordBreak: 'break-word',
+    backgroundColor: "var(--ds-background-accent-blue-subtlest, #E9F2FE)",
+    color: 'inherit',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.ak-editor-panel__icon': {
+      flexShrink: 0,
+      height: "var(--ds-space-300, 24px)",
+      width: "var(--ds-space-300, 24px)",
+      boxSizing: 'content-box',
+      paddingRight: "var(--ds-space-100, 8px)",
+      textAlign: 'center',
+      userSelect: 'none',
+      MozUserSelect: 'none',
+      WebkitUserSelect: 'none',
+      MsUserSelect: 'none',
+      // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+      marginTop: '0.1em',
+      color: "var(--ds-icon-information, #357DE8)",
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '> span': {
+        verticalAlign: 'middle',
+        display: 'inline-flex'
+      },
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '.emoji-common-emoji-sprite': {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+        verticalAlign: "".concat(panelEmojiSpriteVerticalAlignment, "px")
+      },
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '.emoji-common-emoji-image': {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+        verticalAlign: "".concat(panelEmojiImageVerticalAlignment, "px"),
+        // Vertical align only works for inline-block elements in Firefox
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+        '@-moz-document url-prefix()': {
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+          img: {
+            display: 'inline-block'
+          }
+        }
+      }
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.ak-editor-panel__content': {
+      margin: "var(--ds-space-025, 2px)".concat(" 0 ", "var(--ds-space-025, 2px)"),
+      flex: '1 0 0',
+      minWidth: 0
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '&[data-panel-type="note"]': {
+      backgroundColor: "var(--ds-background-accent-purple-subtlest, #F8EEFE)",
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '.ak-editor-panel__icon': {
+        color: "var(--ds-icon-discovery, #AF59E1)"
+      }
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+    '&[data-panel-type="tip"]': {
+      backgroundColor: "var(--ds-background-accent-green-subtlest, #DCFFF1)",
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '.ak-editor-panel__icon': {
+        color: "var(--ds-icon-success, #6A9A23)"
+      }
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '&[data-panel-type="warning"]': {
+      backgroundColor: "var(--ds-background-accent-yellow-subtlest, #FEF7C8)",
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '.ak-editor-panel__icon': {
+        color: "var(--ds-icon-warning, #E06C00)"
+      }
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '&[data-panel-type="error"]': {
+      backgroundColor: "var(--ds-background-accent-red-subtlest, #FFECEB)",
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '.ak-editor-panel__icon': {
+        color: "var(--ds-icon-danger, #C9372C)"
+      }
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '&[data-panel-type="success"]': {
+      backgroundColor: "var(--ds-background-accent-green-subtlest, #DCFFF1)",
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '.ak-editor-panel__icon': {
+        color: "var(--ds-icon-success, #6A9A23)"
+      }
+    }
+  }
+});
+var panelHasNoIconStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '&.ak-editor-panel': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '&[data-panel-type="custom"]': {
+      paddingLeft: "var(--ds-space-150, 12px)",
+      paddingRight: "var(--ds-space-150, 12px)"
+    }
+  }
+});
+var panelNestedIconStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '&.ak-editor-panel__no-icon': {
+    paddingLeft: "var(--ds-space-150, 12px)",
+    paddingRight: "var(--ds-space-150, 12px)"
+  }
+});
+var nestedPanelStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ak-editor-panel__content .ak-editor-panel': {
+    border: "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border, #0B120E24)")
+  }
+});
+var panelCustomBackground = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '&.ak-editor-panel': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '&[data-panel-type="custom"]': {
+      backgroundColor: 'var(--ak-renderer-panel-custom-bg-color)'
+    }
+  }
+});
+export var PanelStyledEmotion = function PanelStyledEmotion(_ref) {
+  var backgroundColor = _ref.backgroundColor,
+    hasIcon = _ref.hasIcon,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var customBackgroundColor = backgroundColor ? hexToEditorBackgroundPaletteColor(backgroundColor) || backgroundColor : undefined;
+  return jsx("div", _extends({
+    style:
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+    {
+      '--ak-renderer-panel-custom-bg-color': customBackgroundColor
+    },
+    css: [panelBaseStyles, !hasIcon && panelHasNoIconStyles, props['data-panel-type'] === PanelType.CUSTOM && backgroundColor && panelCustomBackground, fg('platform_editor_nested_dnd_styles_changes') && panelNestedIconStyles, nestedPanelStyles]
+    // Ignored via go/ees005
+    // eslint-disable-next-line react/jsx-props-no-spreading
+  }, props), props.children);
+};
+PanelStyledEmotion.displayName = 'PanelStyledEmotion';

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

@@ -1,184 +1,14 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["backgroundColor", "hasIcon"];
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
 import React from 'react';
-/* 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 */
-import { jsx, css } from '@emotion/react';
-import TipIcon from '@atlaskit/icon/core/lightbulb';
 import { PanelType } from '@atlaskit/adf-schema';
+import { PanelInfoIcon, PanelSuccessIcon, PanelNoteIcon, PanelWarningIcon, PanelErrorIcon } from '@atlaskit/editor-common/icons';
 import { PanelSharedCssClassName } from '@atlaskit/editor-common/panel';
-import { hexToEditorBackgroundPaletteColor } from '@atlaskit/editor-palette';
 import EmojiIcon from '@atlaskit/icon/core/emoji';
+import TipIcon from '@atlaskit/icon/core/lightbulb';
+import { componentWithCondition } from '@atlaskit/platform-feature-flags-react';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import EmojiItem from './emoji';
-import { PanelInfoIcon, PanelSuccessIcon, PanelNoteIcon, PanelWarningIcon, PanelErrorIcon } from '@atlaskit/editor-common/icons';
-import { akEditorCustomIconSize } from '@atlaskit/editor-shared-styles/consts';
-import { fg } from '@atlaskit/platform-feature-flags';
-// 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 - akEditorCustomIconSize) / 2;
-var panelEmojiImageVerticalAlignment = panelEmojiSpriteVerticalAlignment - 1;
-var blockNodesVerticalMargin = '0.75rem';
-var akEditorTableCellMinWidth = 48;
-var panelBaseStyles = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '&.ak-editor-panel': {
-    borderRadius: "var(--ds-radius-small, 3px)",
-    margin: "".concat(blockNodesVerticalMargin, " 0 0"),
-    paddingTop: "var(--ds-space-100, 8px)",
-    paddingRight: "var(--ds-space-200, 16px)",
-    paddingBottom: "var(--ds-space-100, 8px)",
-    paddingLeft: "var(--ds-space-100, 8px)",
-    minWidth: "".concat(akEditorTableCellMinWidth, "px"),
-    display: 'flex',
-    position: 'relative',
-    alignItems: 'normal',
-    wordBreak: 'break-word',
-    backgroundColor: "var(--ds-background-accent-blue-subtlest, #E9F2FE)",
-    color: 'inherit',
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '.ak-editor-panel__icon': {
-      flexShrink: 0,
-      height: "var(--ds-space-300, 24px)",
-      width: "var(--ds-space-300, 24px)",
-      boxSizing: 'content-box',
-      paddingRight: "var(--ds-space-100, 8px)",
-      textAlign: 'center',
-      userSelect: 'none',
-      MozUserSelect: 'none',
-      WebkitUserSelect: 'none',
-      MsUserSelect: 'none',
-      // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
-      marginTop: '0.1em',
-      color: "var(--ds-icon-information, #357DE8)",
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-      '> span': {
-        verticalAlign: 'middle',
-        display: 'inline-flex'
-      },
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-      '.emoji-common-emoji-sprite': {
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
-        verticalAlign: "".concat(panelEmojiSpriteVerticalAlignment, "px")
-      },
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-      '.emoji-common-emoji-image': {
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
-        verticalAlign: "".concat(panelEmojiImageVerticalAlignment, "px"),
-        // Vertical align only works for inline-block elements in Firefox
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
-        '@-moz-document url-prefix()': {
-          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-          img: {
-            display: 'inline-block'
-          }
-        }
-      }
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '.ak-editor-panel__content': {
-      margin: "var(--ds-space-025, 2px)".concat(" 0 ", "var(--ds-space-025, 2px)"),
-      flex: '1 0 0',
-      /*
-      https://ishadeed.com/article/min-max-css/#setting-min-width-to-zero-with-flexbox
-      The default value for min-width is auto, which is computed to zero. When an element is a flex item, the value of min-width doesn’t compute to zero. The minimum size of a flex item is equal to the size of its contents.
-      */
-      minWidth: 0
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '&[data-panel-type="note"]': {
-      backgroundColor: "var(--ds-background-accent-purple-subtlest, #F8EEFE)",
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-      '.ak-editor-panel__icon': {
-        color: "var(--ds-icon-discovery, #AF59E1)"
-      }
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
-    '&[data-panel-type="tip"]': {
-      backgroundColor: "var(--ds-background-accent-green-subtlest, #DCFFF1)",
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-      '.ak-editor-panel__icon': {
-        color: "var(--ds-icon-success, #6A9A23)"
-      }
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
-    '&[data-panel-type="warning"]': {
-      backgroundColor: "var(--ds-background-accent-yellow-subtlest, #FEF7C8)",
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-      '.ak-editor-panel__icon': {
-        color: "var(--ds-icon-warning, #E06C00)"
-      }
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
-    '&[data-panel-type="error"]': {
-      backgroundColor: "var(--ds-background-accent-red-subtlest, #FFECEB)",
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-      '.ak-editor-panel__icon': {
-        color: "var(--ds-icon-danger, #C9372C)"
-      }
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
-    '&[data-panel-type="success"]': {
-      backgroundColor: "var(--ds-background-accent-green-subtlest, #DCFFF1)",
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-      '.ak-editor-panel__icon': {
-        color: "var(--ds-icon-success, #6A9A23)"
-      }
-    }
-  }
-});
-var panelHasNoIconStyles = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
-  '&.ak-editor-panel': {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '&[data-panel-type="custom"]': {
-      paddingLeft: "var(--ds-space-150, 12px)",
-      paddingRight: "var(--ds-space-150, 12px)"
-    }
-  }
-});
-var panelNestedIconStyles = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '&.ak-editor-panel__no-icon': {
-    paddingLeft: "var(--ds-space-150, 12px)",
-    paddingRight: "var(--ds-space-150, 12px)"
-  }
-});
-var nestedPanelStyles = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '.ak-editor-panel__content .ak-editor-panel': {
-    border: "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border, #0B120E24)")
-  }
-});
-var panelCustomBackground = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
-  '&.ak-editor-panel': {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '&[data-panel-type="custom"]': {
-      backgroundColor: 'var(--ak-renderer-panel-custom-bg-color)'
-    }
-  }
-});
-var PanelStyled = function PanelStyled(_ref) {
-  var backgroundColor = _ref.backgroundColor,
-    hasIcon = _ref.hasIcon,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var customBackgroundColor = backgroundColor ? hexToEditorBackgroundPaletteColor(backgroundColor) || backgroundColor : undefined;
-  return jsx("div", _extends({
-    style:
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
-    {
-      '--ak-renderer-panel-custom-bg-color': customBackgroundColor
-    },
-    css: [panelBaseStyles, !hasIcon && panelHasNoIconStyles, props['data-panel-type'] === PanelType.CUSTOM && backgroundColor && panelCustomBackground, fg('platform_editor_nested_dnd_styles_changes') && panelNestedIconStyles, nestedPanelStyles]
-    // Ignored via go/ees005
-    // eslint-disable-next-line react/jsx-props-no-spreading
-  }, props), props.children);
-};
-PanelStyled.displayName = 'PanelStyled';
+import { PanelStyledCompiled } from './panel-compiled';
+import { PanelStyledEmotion } from './panel-emotion';
 var panelIcons = {
   info: PanelInfoIcon,
   success: PanelSuccessIcon,
@@ -188,6 +18,9 @@ var panelIcons = {
   error: PanelErrorIcon,
   custom: EmojiIcon
 };
+var PanelStyledMigration = componentWithCondition(function () {
+  return expValEquals('platform_editor_renderer_static_css', 'isEnabled', true);
+}, PanelStyledCompiled, PanelStyledEmotion);
 var Panel = function Panel(props) {
   var allowCustomPanels = props.allowCustomPanels,
     type = props.panelType,
@@ -204,7 +37,7 @@ var Panel = function Panel(props) {
   var getIcon = function getIcon() {
     if (panelType === PanelType.CUSTOM) {
       if (panelIcon && providers) {
-        return jsx(EmojiItem, {
+        return /*#__PURE__*/React.createElement(EmojiItem, {
           id: panelIconId,
           text: panelIconText,
           shortName: panelIcon,
@@ -214,7 +47,7 @@ var Panel = function Panel(props) {
       return null;
     }
     var Icon = panelIcons[panelType];
-    return jsx(Icon, {
+    return /*#__PURE__*/React.createElement(Icon, {
       label: "".concat(panelType, " panel")
     });
   };
@@ -222,12 +55,12 @@ var Panel = function Panel(props) {
   var renderIcon = function renderIcon() {
     if (icon) {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-      return jsx("div", {
+      return /*#__PURE__*/React.createElement("div", {
         className: PanelSharedCssClassName.icon
       }, icon);
     }
   };
-  return jsx(PanelStyled
+  return /*#__PURE__*/React.createElement(PanelStyledMigration
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
   , {
     className: PanelSharedCssClassName.prefix,
@@ -239,7 +72,7 @@ var Panel = function Panel(props) {
     "data-panel-icon-text": panelIconText,
     backgroundColor: panelColor,
     hasIcon: Boolean(icon)
-  }, renderIcon(), jsx("div", {
+  }, renderIcon(), /*#__PURE__*/React.createElement("div", {
     className: PanelSharedCssClassName.content
   }, children));
 };

package/dist/types/react/marks/link-compiled.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+/**
+ * Compiled branch of the `platform_editor_static_css` experiment.
+ * Used via `componentWithCondition` in `link.tsx`.
+ *
+ * Cleanup: delete this file once the experiment has shipped.
+ */
+import type { ComponentProps } from 'react';
+import LinkUrl from '@atlaskit/smart-card/link-url';
+export declare const LinkUrlCompiled: (props: ComponentProps<typeof LinkUrl>) => JSX.Element;

package/dist/types/react/marks/link-emotion.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @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.
+ */
+import type { ComponentProps } from 'react';
+import { jsx } from '@emotion/react';
+import LinkUrl from '@atlaskit/smart-card/link-url';
+export declare const LinkUrlEmotion: (props: ComponentProps<typeof LinkUrl>) => jsx.JSX.Element;

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

@@ -1,4 +1,4 @@
-import { jsx } from '@emotion/react';
+import React from 'react';
 import type { LinkAttributes } from '@atlaskit/adf-schema';
 import type { MarkProps } from '../types';
 interface LinkProps extends LinkAttributes {
@@ -6,5 +6,8 @@ interface LinkProps extends LinkAttributes {
     onSetLinkTarget?: (url: string) => '_blank' | undefined;
     target?: string;
 }
-export default function Link(props: MarkProps<LinkProps>): jsx.JSX.Element;
+/**
+ * Render an ADF link mark in renderer.
+ */
+export default function Link(props: MarkProps<LinkProps>): React.JSX.Element;
 export {};

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

@@ -65,7 +65,7 @@ declare const EmbedCard: React.ComponentType<{
     isInsideOfBlockNode?: boolean;
     isInsideOfInlineExtension?: boolean;
     layout: RichMediaLayout;
-    onSetLinkTarget?: (url: string) => "_blank" | undefined;
+    onSetLinkTarget?: (url: string) => '_blank' | undefined;
     originalHeight?: number;
     originalWidth?: number;
     portal?: HTMLElement;
@@ -82,7 +82,7 @@ declare const BlockCard: React.ComponentType<{
     isNodeNested?: boolean;
     layout?: string;
     localId?: string;
-    onSetLinkTarget?: (url: string) => "_blank" | undefined;
+    onSetLinkTarget?: (url: string) => '_blank' | undefined;
     portal?: HTMLElement;
     rendererAppearance?: RendererAppearance;
     smartLinks?: SmartLinksOptions;