@atlaskit/renderer 114.3.0 → 114.3.2

package/dist/esm/react/nodes/media/index.js

@@ -10,7 +10,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _excluded = ["marks", "mediaSingleElement", "isDrafting"],
   _excluded2 = ["marks", "mediaSingleElement", "isDrafting"];
-var _templateObject, _templateObject2;
+var _templateObject;
 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; }
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
@@ -43,14 +43,33 @@ import { useInlineCommentsFilter } from '../../../ui/annotations/hooks/use-inlin
 import { useInlineCommentSubscriberContext } from '../../../ui/annotations/hooks/use-inline-comment-subscriber';
 import { AnnotationUpdateEvent } from '@atlaskit/editor-common/types';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
-// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-var linkStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\tposition: absolute;\n\tbackground: transparent;\n\ttop: 0;\n\tright: 0;\n\tbottom: 0;\n\tleft: 0;\n\tcursor: pointer;\n\twidth: 100% !important;\n\theight: 100% !important;\n"])));
+import { componentWithFG } from '@atlaskit/platform-feature-flags-react';
+var linkStyle = css({
+  position: 'absolute',
+  background: 'transparent',
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+  cursor: 'pointer',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+  width: '100% !important',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+  height: '100% !important'
+});
 
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Ignored via go/DSP-18766
-var borderStyle = function borderStyle(color, width) {
-  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n\tposition: absolute;\n\twidth: 100% !important;\n\theight: 100% !important;\n\tborder-radius: ", "px;\n\tbox-shadow: 0 0 0 ", "px ", ";\n"])), width, width, color);
+var borderStyleOld = function borderStyleOld(color, width) {
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\tposition: absolute;\n\twidth: 100% !important;\n\theight: 100% !important;\n\tborder-radius: ", "px;\n\tbox-shadow: 0 0 0 ", "px ", ";\n"])), width, width, color);
 };
-var MediaBorder = function MediaBorder(_ref) {
+var borderStyleNew = css({
+  position: 'absolute',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+  width: '100% !important',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+  height: '100% !important'
+});
+var MediaBorderOld = function MediaBorderOld(_ref) {
   var _mark$attrs$color, _mark$attrs$size;
   var mark = _ref.mark,
     children = _ref.children;
@@ -66,15 +85,39 @@ var MediaBorder = function MediaBorder(_ref) {
     "data-size": borderWidth
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
     ,
-    css: borderStyle(paletteColorValue, borderWidth)
+    css: borderStyleOld(paletteColorValue, borderWidth)
   }, jsx(MediaBorderGapFiller, {
     borderColor: borderColor
   }), children);
 };
-var MediaLink = function MediaLink(_ref2) {
+var MediaBorderNew = function MediaBorderNew(_ref2) {
+  var _mark$attrs$color2, _mark$attrs$size2;
   var mark = _ref2.mark,
-    children = _ref2.children,
-    onClick = _ref2.onClick;
+    children = _ref2.children;
+  if (!mark) {
+    return jsx(Fragment, null, children);
+  }
+  var borderColor = (_mark$attrs$color2 = mark === null || mark === void 0 ? void 0 : mark.attrs.color) !== null && _mark$attrs$color2 !== void 0 ? _mark$attrs$color2 : '';
+  var borderWidth = (_mark$attrs$size2 = mark === null || mark === void 0 ? void 0 : mark.attrs.size) !== null && _mark$attrs$size2 !== void 0 ? _mark$attrs$size2 : 0;
+  var paletteColorValue = hexToEditorBorderPaletteColor(borderColor) || borderColor;
+  return jsx("div", {
+    "data-mark-type": "border",
+    "data-color": borderColor,
+    "data-size": borderWidth,
+    css: borderStyleNew,
+    style: {
+      borderRadius: "".concat(borderWidth, "px"),
+      boxShadow: "0 0 0 ".concat(borderWidth, "px ").concat(paletteColorValue)
+    }
+  }, jsx(MediaBorderGapFiller, {
+    borderColor: borderColor
+  }), children);
+};
+var MediaBorder = componentWithFG('platform_editor_emotion_refactor_renderer', MediaBorderNew, MediaBorderOld);
+var MediaLink = function MediaLink(_ref3) {
+  var mark = _ref3.mark,
+    children = _ref3.children,
+    onClick = _ref3.onClick;
   if (!mark) {
     return jsx(Fragment, null, children);
   }
@@ -87,9 +130,9 @@ var MediaLink = function MediaLink(_ref2) {
     css: linkStyle
   }, children);
 };
-var MediaAnnotation = function MediaAnnotation(_ref3) {
-  var mark = _ref3.mark,
-    children = _ref3.children;
+var MediaAnnotation = function MediaAnnotation(_ref4) {
+  var mark = _ref4.mark,
+    children = _ref4.children;
   if (!mark) {
     return jsx(Fragment, null, children);
   }
@@ -107,10 +150,10 @@ var MediaAnnotation = function MediaAnnotation(_ref3) {
     useBlockLevel: true
   }, children);
 };
-var _MediaAnnotations = function MediaAnnotations(_ref4) {
-  var _ref4$marks = _ref4.marks,
-    marks = _ref4$marks === void 0 ? [] : _ref4$marks,
-    children = _ref4.children;
+var _MediaAnnotations = function MediaAnnotations(_ref5) {
+  var _ref5$marks = _ref5.marks,
+    marks = _ref5$marks === void 0 ? [] : _ref5$marks,
+    children = _ref5.children;
   // Early Exit
   if (marks.length === 0) {
     return jsx(Fragment, null, children);
@@ -127,13 +170,13 @@ var _MediaAnnotations = function MediaAnnotations(_ref4) {
   }, children) : jsx(Fragment, null, children)));
 };
 var CommentBadge = injectIntl(CommentBadgeComponent);
-var CommentBadgeWrapper = function CommentBadgeWrapper(_ref5) {
+var CommentBadgeWrapper = function CommentBadgeWrapper(_ref6) {
   var _marks$map;
-  var marks = _ref5.marks,
-    mediaSingleElement = _ref5.mediaSingleElement,
-    _ref5$isDrafting = _ref5.isDrafting,
-    isDrafting = _ref5$isDrafting === void 0 ? false : _ref5$isDrafting,
-    rest = _objectWithoutProperties(_ref5, _excluded);
+  var marks = _ref6.marks,
+    mediaSingleElement = _ref6.mediaSingleElement,
+    _ref6$isDrafting = _ref6.isDrafting,
+    isDrafting = _ref6$isDrafting === void 0 ? false : _ref6$isDrafting,
+    rest = _objectWithoutProperties(_ref6, _excluded);
   var _useState = useState('default'),
     _useState2 = _slicedToArray(_useState, 2),
     status = _useState2[0],
@@ -210,13 +253,13 @@ var CommentBadgeWrapper = function CommentBadgeWrapper(_ref5) {
  * when clean up platform_editor_add_media_from_url feature flag
  */
 
-var CommentBadgeNextWrapper = function CommentBadgeNextWrapper(_ref6) {
+var CommentBadgeNextWrapper = function CommentBadgeNextWrapper(_ref7) {
   var _marks$map2;
-  var marks = _ref6.marks,
-    mediaSingleElement = _ref6.mediaSingleElement,
-    _ref6$isDrafting = _ref6.isDrafting,
-    isDrafting = _ref6$isDrafting === void 0 ? false : _ref6$isDrafting,
-    rest = _objectWithoutProperties(_ref6, _excluded2);
+  var marks = _ref7.marks,
+    mediaSingleElement = _ref7.mediaSingleElement,
+    _ref7$isDrafting = _ref7.isDrafting,
+    isDrafting = _ref7$isDrafting === void 0 ? false : _ref7$isDrafting,
+    rest = _objectWithoutProperties(_ref7, _excluded2);
   var _useState5 = useState('default'),
     _useState6 = _slicedToArray(_useState5, 2),
     status = _useState6[0],
@@ -336,9 +379,9 @@ var Media = /*#__PURE__*/function (_PureComponent) {
         mediaWidth: width,
         mediaHeight: height,
         useMinimumZIndex: true
-      }, function (_ref8) {
-        var badgeSize = _ref8.badgeSize,
-          visible = _ref8.visible;
+      }, function (_ref9) {
+        var badgeSize = _ref9.badgeSize,
+          visible = _ref9.visible;
         return jsx(React.Fragment, null, fg('platform_editor_hide_external_media_badge') ? visible && jsx(ExternalImageBadge, {
           badgeSize: badgeSize,
           type: _this.props.type,

package/dist/esm/react/nodes/mediaSingle/index.js

@@ -7,16 +7,23 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 
 import { default as React, Fragment, useCallback, useContext, useMemo, useEffect } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import { MediaSingle as UIMediaSingle, WidthContext } from '@atlaskit/editor-common/ui';
 import { akEditorFullWidthLayoutWidth, akEditorDefaultLayoutWidth, akEditorWideLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { FullPagePadding } from '../../../ui/Renderer/style';
-import { uiMediaSingleBaseStyles, uiMediaSingleLayoutStyles } from './styles';
 import { useAnnotationRangeDispatch } from '../../../ui/annotations/contexts/AnnotationRangeContext';
 import { useAnnotationHoverDispatch } from '../../../ui/annotations/contexts/AnnotationHoverContext';
 var DEFAULT_WIDTH = 250;
 var DEFAULT_HEIGHT = 200;
+var uiMediaSingleBaseStyles = css({
+  transition: 'all 0.1s linear'
+});
+var uiMediaSingleLayoutStyles = css({
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+  marginLeft: '50%',
+  transform: 'translateX(-50%)'
+});
 var isMediaElement = function isMediaElement(media) {
   if (!media) {
     return false;

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

@@ -18,11 +18,90 @@ import { RendererCssClassName } from '../../consts';
 import { calcBreakoutWidth } from '@atlaskit/editor-common/utils';
 import { useMultiBodiedExtensionActions } from './multiBodiedExtension/actions';
 import { useMultiBodiedExtensionContext } from './multiBodiedExtension/context';
+import { fg } from '@atlaskit/platform-feature-flags';
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Ignored via go/DSP-18766
-var navigationStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t", ";\n\tmargin-left: 0 !important;\n\tmargin-right: 0 !important;\n\t.mbe-add-tab-button,\n\t.mbe-remove-tab {\n\t\tdisplay: none;\n\t}\n"])), sharedMultiBodiedExtensionStyles.mbeNavigation);
+var navigationStylesOld = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t", ";\n\tmargin-left: 0 !important;\n\tmargin-right: 0 !important;\n\t.mbe-add-tab-button,\n\t.mbe-remove-tab {\n\t\tdisplay: none;\n\t}\n"])), sharedMultiBodiedExtensionStyles.mbeNavigation);
 
+// localized sharedMultiBodiedExtensionStyles.mbeNavigation in navigationCssExtendedNew
+var navigationStylesNew = css({
+  borderTopLeftRadius: "var(--ds-border-radius, 3px)",
+  borderTopRightRadius: "var(--ds-border-radius, 3px)",
+  userSelect: 'none',
+  WebkitUserModify: 'read-only',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
+  borderBottom: 'none !important',
+  background: "var(--ds-surface, white)",
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '&.remove-margins': {
+    margin: "var(--ds-space-negative-100, -8px)"
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '&.remove-border': {
+    border: 'none'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+  marginLeft: '0 !important',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+  marginRight: '0 !important',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.mbe-add-tab-button, .mbe-remove-tab': {
+    display: 'none'
+  }
+});
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
+var containerStylesOld = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n\t", ";\n\t.ak-renderer-extension {\n\t\tmargin-top: 0 !important;\n\t}\n\n\t[data-layout='full-width'],\n\t[data-layout='wide'] {\n\t\t.multiBodiedExtension-navigation {\n\t\t\tborder-right: 3px solid ", " !important;\n\t\t}\n\t}\n"])), sharedMultiBodiedExtensionStyles.mbeExtensionContainer, "var(--ds-border, ".concat(N40, ")"));
+
+// localized sharedMultiBodiedExtensionStyles.mbeExtensionContainer in containerStylesNew
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
-var containerStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n\t", ";\n\t.ak-renderer-extension {\n\t\tmargin-top: 0 !important;\n\t}\n\n\t[data-layout='full-width'],\n\t[data-layout='wide'] {\n\t\t.multiBodiedExtension-navigation {\n\t\t\tborder-right: 3px solid ", " !important;\n\t\t}\n\t}\n"])), sharedMultiBodiedExtensionStyles.mbeExtensionContainer, "var(--ds-border, ".concat(N40, ")"));
+var containerStylesNew = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
+  background: 'transparent !important',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+  'padding:': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
+    left: "var(--ds-space-100, 8px)".concat(" !important"),
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
+    right: "var(--ds-space-100, 8px)".concat(" !important")
+  },
+  paddingBottom: "var(--ds-space-100, 8px)",
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '&.remove-padding': {
+    paddingBottom: 0
+  },
+  position: 'relative',
+  verticalAlign: 'middle',
+  cursor: 'pointer',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '.multiBodiedExtension-handler-result': {
+    marginLeft: "var(--ds-space-100, 8px)"
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  ".multiBodiedExtension-content-dom-wrapper > [data-extension-frame='true'], .multiBodiedExtension--frames > [data-extension-frame='true']": {
+    display: 'none',
+    background: "var(--ds-surface, white)"
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '.multiBodiedExtension-content-dom-wrapper, .multiBodiedExtension--frames': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+    "[data-extension-frame='true'] > :not(style):first-child, [data-extension-frame='true'] > style:first-child + *": {
+      marginTop: 0
+    }
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ak-renderer-extension': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+    marginTop: '0 !important'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '[data-layout="full-width"], [data-layout="wide"]': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.multiBodiedExtension-navigation': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+      borderRight: "3px solid ".concat("var(--ds-border, ".concat(N40, ")"), " !important")
+    }
+  }
+});
 var MultiBodiedExtensionChildrenContainer = function MultiBodiedExtensionChildrenContainer(_ref) {
   var children = _ref.children;
   return jsx("article", {
@@ -37,7 +116,7 @@ var MultiBodiedExtensionNavigation = function MultiBodiedExtensionNavigation(_re
   return jsx("nav", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: "multiBodiedExtension-navigation",
-    css: navigationStyles,
+    css: fg('platform_editor_emotion_refactor_renderer') ? navigationStylesNew : navigationStylesOld,
     "data-testid": "multiBodiedExtension-navigation"
   }, children);
 };
@@ -141,7 +220,7 @@ var MultiBodiedExtension = function MultiBodiedExtension(props) {
   return jsx("section", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: "multiBodiedExtension--container",
-    css: [containerStyles, containerActiveFrameStyles],
+    css: [fg('platform_editor_emotion_refactor_renderer') ? containerStylesNew : containerStylesOld, containerActiveFrameStyles],
     "data-testid": "multiBodiedExtension--container",
     "data-active-child-index": activeChildIndex,
     "data-layout": layout

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

@@ -2,7 +2,8 @@ import _extends from "@babel/runtime/helpers/extends";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _templateObject, _templateObject2;
-var _excluded = ["backgroundColor", "hasIcon"];
+var _excluded = ["backgroundColor", "hasIcon"],
+  _excluded2 = ["backgroundColor", "hasIcon"];
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -12,13 +13,155 @@ import React from 'react';
 import { css, jsx } from '@emotion/react';
 import TipIcon from '@atlaskit/icon/glyph/editor/hint';
 import { PanelType } from '@atlaskit/adf-schema';
-import { panelSharedStylesWithoutPrefix, PanelSharedCssClassName } from '@atlaskit/editor-common/panel';
+import { PanelSharedCssClassName, panelSharedStylesWithoutPrefix } from '@atlaskit/editor-common/panel';
 import { hexToEditorBackgroundPaletteColor } from '@atlaskit/editor-palette';
 import EmojiIcon from '@atlaskit/icon/glyph/editor/emoji';
 import { fg } from '@atlaskit/platform-feature-flags';
 import EmojiItem from './emoji';
 import { PanelInfoIcon, PanelSuccessIcon, PanelNoteIcon, PanelWarningIcon, PanelErrorIcon } from '@atlaskit/editor-common/icons';
-var PanelStyled = function PanelStyled(_ref) {
+import { akEditorCustomIconSize } from '@atlaskit/editor-shared-styles/consts';
+import { componentWithFG } from '@atlaskit/platform-feature-flags-react';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+// 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-border-radius, 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, #DEEBFF)",
+    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, #1D7AFC)",
+      // 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, #EAE6FF)",
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '.ak-editor-panel__icon': {
+        color: "var(--ds-icon-discovery, #8270DB)"
+      }
+    },
+    // 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, #E3FCEF)",
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '.ak-editor-panel__icon': {
+        color: "var(--ds-icon-success, #22A06B)"
+      }
+    },
+    // 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, #FFFAE6)",
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '.ak-editor-panel__icon': {
+        color: "var(--ds-icon-warning, #E56910)"
+      }
+    },
+    // 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, #FFEBE6)",
+      // 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, #E3FCEF)",
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '.ak-editor-panel__icon': {
+        color: "var(--ds-icon-success, #22A06B)"
+      }
+    }
+  }
+});
+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 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 PanelStyledOld = function PanelStyledOld(_ref) {
   var backgroundColor = _ref.backgroundColor,
     hasIcon = _ref.hasIcon,
     props = _objectWithoutProperties(_ref, _excluded);
@@ -37,6 +180,23 @@ var PanelStyled = function PanelStyled(_ref) {
     }, props), props.children)
   );
 };
+var PanelStyledNew = function PanelStyledNew(_ref2) {
+  var backgroundColor = _ref2.backgroundColor,
+    hasIcon = _ref2.hasIcon,
+    props = _objectWithoutProperties(_ref2, _excluded2);
+  var customBackgroundColor = backgroundColor ? hexToEditorBackgroundPaletteColor(backgroundColor) : backgroundColor;
+  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, editorExperiment('nested-dnd', true) && panelNestedIconStyles]
+    // Ignored via go/ees005
+    // eslint-disable-next-line react/jsx-props-no-spreading
+  }, props), props.children);
+};
+var PanelStyled = componentWithFG('platform_editor_emotion_refactor_renderer', PanelStyledNew, PanelStyledOld);
 PanelStyled.displayName = 'PanelStyled';
 var panelIcons = {
   info: PanelInfoIcon,

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

@@ -16,6 +16,7 @@ import { akEditorStickyHeaderZIndex } from '@atlaskit/editor-shared-styles';
 import { N40A } from '@atlaskit/theme/colors';
 import { Table } from './table';
 import { recursivelyInjectProps } from '../../utils/inject-props';
+import { componentWithFG } from '@atlaskit/platform-feature-flags-react';
 export var tableStickyPadding = 8;
 var modeSpecficStyles = {
   none: css({
@@ -29,6 +30,27 @@ var modeSpecficStyles = {
   })
 };
 
+// refactored based on fixedTableDivStaticStyles
+// TODO: DSP-4123 - Quality ticket
+var fixedTableDivStaticStylesNew = css(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
+  zIndex: 'var(--ak-renderer-sticky-header-zindex)'
+}, "& .".concat(TableSharedCssClassName.TABLE_CONTAINER, ", & .").concat(TableSharedCssClassName.TABLE_STICKY_WRAPPER, " > table"), {
+  marginTop: 0,
+  marginBottom: 0,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  tr: {
+    background: "var(--ds-surface, white)"
+  }
+}), "borderTop", "".concat(tableStickyPadding, "px solid ", "var(--ds-surface, white)")), "background", "var(--ds-surface-overlay, white)"), "boxShadow", "0 6px 4px -4px ".concat("var(--ds-shadow-overflow-perimeter, ".concat(N40A, ")"))), "div[data-expanded='false'] &", {
+  display: 'none'
+}), "& .".concat(TableSharedCssClassName.TABLE_CONTAINER, ".is-sticky.right-shadow::after, & .").concat(TableSharedCssClassName.TABLE_CONTAINER, ".is-sticky.left-shadow::before"), {
+  top: '0px',
+  height: '100%'
+}), "&.fixed-table-div-custom-table-resizing[mode='stick']", {
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  zIndex: 'var(--ak-renderer-sticky-header-zindex)'
+}));
+
 // TODO: DSP-4123 - Quality ticket
 var fixedTableDivStaticStyles = function fixedTableDivStaticStyles(top, width, allowTableResizing) {
   var stickyHeaderZIndex;
@@ -61,7 +83,7 @@ var fixedTableDivStaticStyles = function fixedTableDivStaticStyles(top, width, a
     zIndex: stickyHeaderZIndex
   }));
 };
-var FixedTableDiv = function FixedTableDiv(props) {
+var FixedTableDivOld = function FixedTableDivOld(props) {
   var top = props.top,
     wrapperWidth = props.wrapperWidth,
     mode = props.mode,
@@ -80,6 +102,34 @@ var FixedTableDiv = function FixedTableDiv(props) {
     css: fixedTableCss
   }), props.children);
 };
+var FixedTableDivNew = function FixedTableDivNew(props) {
+  var top = props.top,
+    wrapperWidth = props.wrapperWidth,
+    mode = props.mode,
+    allowTableResizing = props.allowTableResizing;
+  var stickyHeaderZIndex;
+  if (allowTableResizing) {
+    stickyHeaderZIndex = 13;
+  } else {
+    stickyHeaderZIndex = akEditorStickyHeaderZIndex;
+  }
+  var attrs = {
+    mode: mode
+  };
+  return jsx("div", _extends({}, attrs, {
+    "data-testid": "sticky-table-fixed"
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
+    className: allowTableResizing ? 'fixed-table-div-custom-table-resizing' : '',
+    css: [fixedTableDivStaticStylesNew, modeSpecficStyles === null || modeSpecficStyles === void 0 ? void 0 : modeSpecficStyles[mode]],
+    style: {
+      '--ak-renderer-sticky-header-zindex': stickyHeaderZIndex,
+      width: "".concat(wrapperWidth, "px"),
+      top: top ? "".concat(top, "px") : undefined
+    }
+  }), props.children);
+};
+var FixedTableDiv = componentWithFG('platform_editor_emotion_refactor_renderer', FixedTableDivNew, FixedTableDivOld);
 export var StickyTable = function StickyTable(_ref) {
   var top = _ref.top,
     left = _ref.left,