@atlaskit/editor-core 207.9.0 → 207.10.1

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # @atlaskit/editor-core
 
+## 207.10.1
+
+### Patch Changes
+
+- [#160084](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/160084)
+  [`ad90a6f9f245d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ad90a6f9f245d) -
+  refactor emotion styles for list
+- [#160454](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/160454)
+  [`e09cbdb2a1f3c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e09cbdb2a1f3c) -
+  Cleaned up INP feature gate
+- Updated dependencies
+
+## 207.10.0
+
+### Minor Changes
+
+- [#160678](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/160678)
+  [`9454f60883904`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9454f60883904) -
+  [https://product-fabric.atlassian.net/browse/ED-27746](ED-27746) - rewrite editor shadow, text
+  color and unsupported CSS in static emotion
+- [#160532](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/160532)
+  [`0997882c2118b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0997882c2118b) -
+  [https://product-fabric.atlassian.net/browse/ED-27746](ED-27746) - rewrite editor date CSS in
+  static emotion
+
+### Patch Changes
+
+- [#159090](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/159090)
+  [`9cbae97c20f84`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9cbae97c20f84) -
+  Reduces rerenders of text formatting options and the toolbar when it is docked to top.
+- Updated dependencies
+
 ## 207.9.0
 
 ### Minor Changes

package/dist/cjs/composable-editor/core-editor.js

@@ -17,7 +17,6 @@ var _useAnalyticsEvents2 = require("@atlaskit/analytics-next/useAnalyticsEvents"
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _performanceMeasures = require("@atlaskit/editor-common/performance-measures");
 var _analytics2 = require("@atlaskit/editor-common/utils/analytics");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _actions = _interopRequireDefault(require("../actions"));
 var _EditorContext = require("../ui/EditorContext");
 var _featureFlagsFromProps = require("../utils/feature-flags-from-props");
@@ -94,7 +93,7 @@ function Editor(passedProps) {
     }
   }, [onSaveFromProps]);
   var isFullPageApperance = Boolean(props.appearance && ['full-page', 'full-width'].includes(props.appearance));
-  return (0, _react2.jsx)(_react.Fragment, null, isFullPageApperance && (0, _platformFeatureFlags.fg)('platform_editor_fe--inp-metrics') ? (0, _react2.jsx)(_editorInpMetrics.EditorINPMetrics, null) : null, (0, _react2.jsx)(_editorInternal.EditorInternal, {
+  return (0, _react2.jsx)(_react.Fragment, null, isFullPageApperance ? (0, _react2.jsx)(_editorInpMetrics.EditorINPMetrics, null) : null, (0, _react2.jsx)(_editorInternal.EditorInternal, {
     props: props,
     handleAnalyticsEvent: handleAnalyticsEvent,
     createAnalyticsEvent: createAnalyticsEvent,

package/dist/cjs/ui/Appearance/FullPage/FullPageToolbar.js

@@ -99,11 +99,13 @@ var EditorToolbar = exports.EditorToolbar = /*#__PURE__*/_react.default.memo(fun
       };
     }
   });
-  var isShortcutToFocusToolbar = function isShortcutToFocusToolbar(event) {
+  var isShortcutToFocusToolbarRaw = function isShortcutToFocusToolbarRaw(event) {
     //Alt + F9 to reach first element in this main toolbar
     return event.altKey && (event.key === 'F9' || event.keyCode === 120);
   };
-  var handleEscape = function handleEscape(event) {
+  var isShortcutToFocusToolbarMemoized = (0, _react.useCallback)(isShortcutToFocusToolbarRaw, []);
+  var isShortcutToFocusToolbar = (0, _platformFeatureFlags.fg)('platform_editor_toolbar_rerender_optimization') ? isShortcutToFocusToolbarMemoized : isShortcutToFocusToolbarRaw;
+  var handleEscapeRaw = function handleEscapeRaw(event) {
     var _props$editorView;
     if (!((_props$editorView = props.editorView) !== null && _props$editorView !== void 0 && _props$editorView.hasFocus())) {
       var _props$editorView2;
@@ -112,6 +114,16 @@ var EditorToolbar = exports.EditorToolbar = /*#__PURE__*/_react.default.memo(fun
     event.preventDefault();
     event.stopPropagation();
   };
+  var handleEscapeMemoized = (0, _react.useCallback)(function (event) {
+    var _props$editorView3;
+    if (!((_props$editorView3 = props.editorView) !== null && _props$editorView3 !== void 0 && _props$editorView3.hasFocus())) {
+      var _props$editorView4;
+      (_props$editorView4 = props.editorView) === null || _props$editorView4 === void 0 || _props$editorView4.focus();
+    }
+    event.preventDefault();
+    event.stopPropagation();
+  }, [props.editorView]);
+  var handleEscape = (0, _platformFeatureFlags.fg)('platform_editor_toolbar_rerender_optimization') ? handleEscapeMemoized : handleEscapeRaw;
   return (0, _react2.jsx)(_ui.ContextPanelConsumer, null, function (_ref2) {
     var contextPanelWidth = _ref2.width;
     return (0, _react2.jsx)(_uiMenu.ToolbarArrowKeyNavigationProvider, {

package/dist/cjs/ui/EditorContentContainer/EditorContentContainer.js

@@ -4,10 +4,11 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.placeholderStyles = exports.default = void 0;
+exports.placeholderStyles = exports.isFirefox = exports.default = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
+var _browser = require("@atlaskit/editor-common/browser");
 var _collab = require("@atlaskit/editor-common/collab");
 var _emoji = require("@atlaskit/editor-common/emoji");
 var _mention = require("@atlaskit/editor-common/mention");
@@ -24,31 +25,35 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _tokens = require("@atlaskit/tokens");
 var _getInlineNodeViewProducer = require("../../nodeviews/getInlineNodeViewProducer.styles");
-var _date = require("../ContentStyles/date");
 var _expand = require("../ContentStyles/expand");
 var _extension = require("../ContentStyles/extension");
 var _panel = require("../ContentStyles/panel");
 var _status = require("../ContentStyles/status");
 var _tasksAndDecisions = require("../ContentStyles/tasks-and-decisions");
-var _aiPanel = require("./styles/ai-panel");
+var _aiPanel = require("./styles/aiPanel");
 var _annotationStyles = require("./styles/annotationStyles");
 var _backgroundColorStyles = require("./styles/backgroundColorStyles");
 var _blockMarksStyles = require("./styles/blockMarksStyles");
 var _codeBlockStyles = require("./styles/codeBlockStyles");
 var _codeMarkStyles = require("./styles/codeMarkStyles");
+var _dateStyles = require("./styles/dateStyles");
 var _embedCardStyles = require("./styles/embedCardStyles");
 var _firstBlockNodeStyles = require("./styles/firstBlockNodeStyles");
 var _gridStyles = require("./styles/gridStyles");
 var _indentationStyles = require("./styles/indentationStyles");
 var _layout = require("./styles/layout");
 var _link = require("./styles/link");
+var _list = require("./styles/list");
 var _mediaStyles = require("./styles/mediaStyles");
 var _paragraphStyles = require("./styles/paragraphStyles");
 var _resizerStyles = require("./styles/resizerStyles");
 var _rule = require("./styles/rule");
+var _shadowStyles = require("./styles/shadowStyles");
 var _tasksAndDecisionsStyles = require("./styles/tasksAndDecisionsStyles");
+var _textColorStyles = require("./styles/textColorStyles");
+var _unsupportedStyles = require("./styles/unsupportedStyles");
 var _whitespaceStyles = require("./styles/whitespaceStyles");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
 /* eslint-disable @atlaskit/design-system/consistent-css-prop-usage */
 /* eslint-disable react-hooks/rules-of-hooks */
 /* eslint-disable @atlaskit/design-system/no-css-tagged-template-expression -- Requires manual remediation over time due to use of unsafe nested mixins */
@@ -57,6 +62,7 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
  * @jsx jsx
  */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+var isFirefox = exports.isFirefox = typeof navigator !== 'undefined' && navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
 var vanillaMentionsStyles = (0, _react2.css)({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '.editor-mention-primitive': {
@@ -103,9 +109,8 @@ var vanillaMentionsStyles = (0, _react2.css)({
 });
 var vanillaSelectionStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t.danger {\n\t\t.editor-mention-primitive {\n\t\t\tbox-shadow: 0 0 0 ", "px ", ";\n\t\t\tbackground-color: ", ";\n\t\t}\n\t}\n\n\t.", " > .editor-mention-primitive,\n\t.", " > .editor-mention-primitive.mention-self,\n\t.", " > .editor-mention-primitive.mention-restricted {\n\t\t", "\n\t\t/* need to specify dark text colour because personal mentions\n\t\t   (in dark blue) have white text by default */\n\t\tcolor: ", "\n\t}\n"])), _editorSharedStyles.akEditorSelectedBorderSize, _editorSharedStyles.akEditorDeleteBorder, "var(--ds-background-danger, ".concat(_editorSharedStyles.akEditorDeleteBackgroundWithOpacity, ")"), _editorSharedStyles.akEditorSelectedNodeClassName, _editorSharedStyles.akEditorSelectedNodeClassName, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow, _editorSharedStyles.SelectionStyle.Background]), "var(--ds-text-subtle, #44546F)");
 var mentionsStyles = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\t.", " {\n\t\t&.", " [data-mention-id] > span {\n\t\t\t", "\n\n\t\t\t/* need to specify dark text colour because personal mentions\n\t\t (in dark blue) have white text by default */\n\t  color: ", ";\n\t\t}\n\t}\n\n\t.danger {\n\t\t.", ".", "\n\t\t\t> span\n\t\t\t> span\n\t\t\t> span {\n\t\t\tbox-shadow: 0 0 0 ", "px ", ";\n\t\t\tbackground-color: ", ";\n\t\t}\n\t\t.", " > span > span > span {\n\t\t\tbackground-color: ", ";\n\t\t\tcolor: ", ";\n\t\t}\n\t}\n"])), _mention.MentionSharedCssClassName.MENTION_CONTAINER, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow, _editorSharedStyles.SelectionStyle.Background]), "var(--ds-text-subtle, #44546F)", _mention.MentionSharedCssClassName.MENTION_CONTAINER, _editorSharedStyles.akEditorSelectedNodeClassName, _editorSharedStyles.akEditorSelectedBorderSize, _editorSharedStyles.akEditorDeleteBorder, "var(--ds-background-danger, ".concat(_editorSharedStyles.akEditorDeleteBackgroundWithOpacity, ")"), _mention.MentionSharedCssClassName.MENTION_CONTAINER, "var(--ds-background-neutral, #091E420F)", "var(--ds-text-subtle, #44546F)");
-var listsStyles = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\t.ProseMirror {\n\t\tli {\n\t\t\tposition: relative;\n\n\t\t\t> p:not(:first-child) {\n\t\t\t\tmargin: ", " 0 0 0;\n\t\t\t}\n\n\t\t\t// In SSR the above rule will apply to all p tags because first-child would be a style tag.\n\t\t\t// The following rule resets the first p tag back to its original margin\n\t\t\t// defined in packages/editor/editor-common/src/styles/shared/paragraph.ts\n\t\t\t> style:first-child + p {\n\t\t\t\tmargin-top: ", ";\n\t\t\t}\n\t\t}\n\t}\n"])), "var(--ds-space-050, 4px)", _editorSharedStyles.blockNodesVerticalMargin);
-var reactEmojiStyles = (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n\t.", " {\n\t\tdisplay: inline-block;\n\n\t\t.", " {\n\t\t\tcursor: pointer;\n\n\t\t\t&.", " > span {\n\t\t\t\t/** needed for selection style to cover custom emoji image properly */\n\t\t\t\tdisplay: flex;\n\t\t\t}\n\t\t}\n\n\t\t&.", " {\n\t\t\t.", ", .", " {\n\t\t\t\tborder-radius: 2px;\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\t}\n"])), _emoji.EmojiSharedCssClassName.EMOJI_CONTAINER, _emoji.EmojiSharedCssClassName.EMOJI_NODE, _emoji.EmojiSharedCssClassName.EMOJI_IMAGE, _editorSharedStyles.akEditorSelectedNodeClassName, _emoji.EmojiSharedCssClassName.EMOJI_SPRITE, _emoji.EmojiSharedCssClassName.EMOJI_IMAGE, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Blanket, _editorSharedStyles.SelectionStyle.BoxShadow]));
-var emojiStyles = (0, _react2.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n\t[data-prosemirror-node-view-type='vanilla'] {\n\t\t.", " {\n\t\t\tdisplay: inline-block;\n\t\t}\n\n\t\t.", ", .", " {\n\t\t\tbackground: no-repeat transparent;\n\t\t\tdisplay: inline-block;\n\t\t\theight: ", "px;\n\t\t\tmax-height: ", "px;\n\t\t\tcursor: pointer;\n\t\t\tvertical-align: middle;\n\t\t\tuser-select: all;\n\t\t}\n\n\t\t&.", " {\n\t\t\t.", ", .", " {\n\t\t\t\tborder-radius: 2px;\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\t}\n"])), _emoji.EmojiSharedCssClassName.EMOJI_CONTAINER, _emoji.EmojiSharedCssClassName.EMOJI_SPRITE, _emoji.EmojiSharedCssClassName.EMOJI_IMAGE, _emoji.defaultEmojiHeight, _emoji.defaultEmojiHeight, _editorSharedStyles.akEditorSelectedNodeClassName, _emoji.EmojiSharedCssClassName.EMOJI_SPRITE, _emoji.EmojiSharedCssClassName.EMOJI_IMAGE, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Blanket, _editorSharedStyles.SelectionStyle.BoxShadow]));
+var reactEmojiStyles = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\t.", " {\n\t\tdisplay: inline-block;\n\n\t\t.", " {\n\t\t\tcursor: pointer;\n\n\t\t\t&.", " > span {\n\t\t\t\t/** needed for selection style to cover custom emoji image properly */\n\t\t\t\tdisplay: flex;\n\t\t\t}\n\t\t}\n\n\t\t&.", " {\n\t\t\t.", ", .", " {\n\t\t\t\tborder-radius: 2px;\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\t}\n"])), _emoji.EmojiSharedCssClassName.EMOJI_CONTAINER, _emoji.EmojiSharedCssClassName.EMOJI_NODE, _emoji.EmojiSharedCssClassName.EMOJI_IMAGE, _editorSharedStyles.akEditorSelectedNodeClassName, _emoji.EmojiSharedCssClassName.EMOJI_SPRITE, _emoji.EmojiSharedCssClassName.EMOJI_IMAGE, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Blanket, _editorSharedStyles.SelectionStyle.BoxShadow]));
+var emojiStyles = (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n\t[data-prosemirror-node-view-type='vanilla'] {\n\t\t.", " {\n\t\t\tdisplay: inline-block;\n\t\t}\n\n\t\t.", ", .", " {\n\t\t\tbackground: no-repeat transparent;\n\t\t\tdisplay: inline-block;\n\t\t\theight: ", "px;\n\t\t\tmax-height: ", "px;\n\t\t\tcursor: pointer;\n\t\t\tvertical-align: middle;\n\t\t\tuser-select: all;\n\t\t}\n\n\t\t&.", " {\n\t\t\t.", ", .", " {\n\t\t\t\tborder-radius: 2px;\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\t}\n"])), _emoji.EmojiSharedCssClassName.EMOJI_CONTAINER, _emoji.EmojiSharedCssClassName.EMOJI_SPRITE, _emoji.EmojiSharedCssClassName.EMOJI_IMAGE, _emoji.defaultEmojiHeight, _emoji.defaultEmojiHeight, _editorSharedStyles.akEditorSelectedNodeClassName, _emoji.EmojiSharedCssClassName.EMOJI_SPRITE, _emoji.EmojiSharedCssClassName.EMOJI_IMAGE, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Blanket, _editorSharedStyles.SelectionStyle.BoxShadow]));
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var placeholderStyles = exports.placeholderStyles = (0, _react2.css)({
@@ -146,13 +151,13 @@ var akEditorBreakpointForSmallDevice = "1266px";
 
 // jest warning: JSDOM version (22) doesn't support the new @container CSS rule
 var contentStyles = function contentStyles() {
-  return (0, _react2.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n\t--ak-editor--default-gutter-padding: ", "px;\n\t/* 52 is from akEditorGutterPaddingDynamic via editor-shared-styles */\n\t--ak-editor--large-gutter-padding: ", "px;\n\t--ak-editor--default-layout-width: ", "px;\n\t--ak-editor--full-width-layout-width: ", "px;\n\t/* calculate editor line length, 100cqw is the editor container width */\n\t--ak-editor--line-length: min(\n\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\tvar(--ak-editor--default-layout-width)\n\t);\n\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t--ak-editor--breakout-full-page-guttering-padding: calc(\n\t\tvar(--ak-editor--large-gutter-padding) * 2 + var(--ak-editor--default-gutter-padding)\n\t);\n\n\t.fabric-editor--full-width-mode {\n\t\t--ak-editor--line-length: min(\n\t\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\t\tvar(--ak-editor--full-width-layout-width)\n\t\t);\n\t}\n\n\t.ProseMirror {\n\t\t--ak-editor-max-container-width: calc(100cqw - var(--ak-editor--large-gutter-padding));\n\t}\n\n\t/* We can't allow nodes that are inside other nodes to bleed from the parent container */\n\t.ProseMirror > div[data-prosemirror-node-block] [data-prosemirror-node-block] {\n\t\t--ak-editor-max-container-width: 100%;\n\t}\n\n\t/* container editor-area is defined in platform/packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts */\n\t@container editor-area (width >= ", ") {\n\t\t.ProseMirror {\n\t\t\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t\t}\n\t}\n\n\t.ProseMirror {\n\t\toutline: none;\n\t\tfont-size: var(--ak-editor-base-font-size);\n\n\t\t", ";\n\n\t\t", ";\n\n\t\t", ";\n\n\t\t", ";\n\n\t\t", ";\n\t}\n\n\t", "\n\n\t.ProseMirror-hideselection *::selection {\n\t\tbackground: transparent;\n\t}\n\n\t.ProseMirror-hideselection *::-moz-selection {\n\t\tbackground: transparent;\n\t}\n\n\t/**\n\t * This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24\n\t *\n\t * 1. Merge and Release platform_editor_hide_cursor_when_pm_hideselection\n\t * 2. Cleanup duplicated style from platform_editor_advanced_code_blocks\n\t *    https://product-fabric.atlassian.net/browse/ED-26331\n\t */\n\t", "\n\n\t/* This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24 */\n\t", "\n\n\t.ProseMirror-selectednode {\n\t\toutline: none;\n\t}\n\n\t.ProseMirror-selectednode:empty {\n\t\toutline: 2px solid ", ";\n\t}\n\n\t.ProseMirror.ProseMirror-focused:has(.ProseMirror-mark-boundary-cursor) {\n\t\tcaret-color: transparent;\n\t}\n\t.ProseMirror:not(.ProseMirror-focused) .ProseMirror-mark-boundary-cursor {\n\t\tdisplay: none;\n\t}\n\n\t", "\n\n\t", "\n\n\t", "\n\n\t", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n  ", ";\n\n\t", "\n\n\t", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  // Switch between the two icons based on the visual refresh feature gate\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n\t", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  .panelView-content-wrap {\n\t\tbox-sizing: border-box;\n\t}\n\n\t.mediaGroupView-content-wrap ul {\n\t\tpadding: 0;\n\t}\n\n\t/** Needed to override any cleared floats, e.g. image wrapping */\n\n\tdiv.fabric-editor-block-mark[class^='fabric-editor-align'] {\n\t\tclear: none !important;\n\t}\n\n\t.fabric-editor-align-end {\n\t\ttext-align: right;\n\t}\n\n\t.fabric-editor-align-start {\n\t\ttext-align: left;\n\t}\n\n\t.fabric-editor-align-center {\n\t\ttext-align: center;\n\t}\n\n\t// For FullPage only when inside a table\n\t// Related code all lives inside: packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts\n\t// In the \"editorContentAreaContainerStyle\" function\n\t.fabric-editor--full-width-mode {\n\t\t.pm-table-container {\n\t\t\t.code-block,\n\t\t\t.extension-container,\n\t\t\t.multiBodiedExtension--container {\n\t\t\t\tmax-width: 100%;\n\t\t\t}\n\t\t}\n\t}\n\n\t.pm-table-header-content-wrap :not(.fabric-editor-alignment),\n\t.pm-table-header-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark,\n\t.pm-table-cell-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark {\n\t\tp:first-of-type {\n\t\t\tmargin-top: 0;\n\t\t}\n\t}\n\t.pm-table-cell-content-wrap .mediaGroupView-content-wrap {\n\t\tclear: both;\n\t}\n\n\t.hyperlink-floating-toolbar {\n\t\tpadding: 0;\n\t}\n\n\t/* Legacy Link icon in the Atlaskit package\n\t is bigger than the others, new ADS icon does not have this issue\n  */\n\t", "\n"])), _editorSharedStyles.akEditorGutterPadding, (0, _editorSharedStyles.akEditorGutterPaddingDynamic)(), _editorSharedStyles.akEditorDefaultLayoutWidth, _editorSharedStyles.akEditorFullWidthLayoutWidth, _editorSharedStyles.akEditorCalculatedWideLayoutWidthSmallViewport, akEditorBreakpointForSmallDevice, _editorSharedStyles.akEditorCalculatedWideLayoutWidth, _whitespaceStyles.whitespaceStyles, _styles.listsSharedStyles, _indentationStyles.indentationStyles, _styles.shadowSharedStyle, _getInlineNodeViewProducer.InlineNodeViewSharedStyles, (0, _platformFeatureFlags.fg)('editor_request_to_edit_task') ? null : (0, _react2.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.ProseMirror[contenteditable='false'] .taskItemView-content-wrap {\n\t\t\t\t\tpointer-events: none;\n\t\t\t\t\topacity: 0.7;\n\t\t\t\t}\n\t\t\t"]))), (0, _platformFeatureFlags.fg)('platform_editor_hide_cursor_when_pm_hideselection') ? (0, _react2.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.ProseMirror-hideselection {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t"]))) : null, (0, _experiments.editorExperiment)('platform_editor_advanced_code_blocks', true) ? (0, _react2.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.ProseMirror-hideselection {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t"]))) : null, "var(--ds-border-focused, #8cf)", _styles5.placeholderTextStyles, placeholderStyles, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? placeholderOverflowStyles : null, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_quick_insert_placeholder') ? placeholderWrapStyles : null, _codeBlockStyles.codeBlockStyles, (0, _styles2.blocktypeStyles)(), _codeMarkStyles.codeMarkStyles, _styles.textColorStyles, _backgroundColorStyles.backgroundColorStyles, listsStyles, _rule.ruleStyles, _mediaStyles.mediaStyles, (0, _platformFeatureFlags.fg)('confluence_team_presence_scroll_to_pointer') ? _collab.telepointerStyle : _collab.telepointerStyleWithInitialOnly, _selection.gapCursorStyles, (0, _panel.panelStyles)(), mentionsStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
+  return (0, _react2.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n\t--ak-editor--default-gutter-padding: ", "px;\n\t/* 52 is from akEditorGutterPaddingDynamic via editor-shared-styles */\n\t--ak-editor--large-gutter-padding: ", "px;\n\t--ak-editor--default-layout-width: ", "px;\n\t--ak-editor--full-width-layout-width: ", "px;\n\t/* calculate editor line length, 100cqw is the editor container width */\n\t--ak-editor--line-length: min(\n\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\tvar(--ak-editor--default-layout-width)\n\t);\n\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t--ak-editor--breakout-full-page-guttering-padding: calc(\n\t\tvar(--ak-editor--large-gutter-padding) * 2 + var(--ak-editor--default-gutter-padding)\n\t);\n\n\t.fabric-editor--full-width-mode {\n\t\t--ak-editor--line-length: min(\n\t\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\t\tvar(--ak-editor--full-width-layout-width)\n\t\t);\n\t}\n\n\t.ProseMirror {\n\t\t--ak-editor-max-container-width: calc(100cqw - var(--ak-editor--large-gutter-padding));\n\t}\n\n\t/* We can't allow nodes that are inside other nodes to bleed from the parent container */\n\t.ProseMirror > div[data-prosemirror-node-block] [data-prosemirror-node-block] {\n\t\t--ak-editor-max-container-width: 100%;\n\t}\n\n\t/* container editor-area is defined in platform/packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts */\n\t@container editor-area (width >= ", ") {\n\t\t.ProseMirror {\n\t\t\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t\t}\n\t}\n\n\t.ProseMirror {\n\t\toutline: none;\n\t\tfont-size: var(--ak-editor-base-font-size);\n\n\t\t", ";\n\n\t\t", ";\n\n\t\t", ";\n\n\t\t", ";\n\n\t\t", ";\n\t}\n\n\t", "\n\n\t.ProseMirror-hideselection *::selection {\n\t\tbackground: transparent;\n\t}\n\n\t.ProseMirror-hideselection *::-moz-selection {\n\t\tbackground: transparent;\n\t}\n\n\t/**\n\t * This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24\n\t *\n\t * 1. Merge and Release platform_editor_hide_cursor_when_pm_hideselection\n\t * 2. Cleanup duplicated style from platform_editor_advanced_code_blocks\n\t *    https://product-fabric.atlassian.net/browse/ED-26331\n\t */\n\t", "\n\n\t/* This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24 */\n\t", "\n\n\t.ProseMirror-selectednode {\n\t\toutline: none;\n\t}\n\n\t.ProseMirror-selectednode:empty {\n\t\toutline: 2px solid ", ";\n\t}\n\n\t.ProseMirror.ProseMirror-focused:has(.ProseMirror-mark-boundary-cursor) {\n\t\tcaret-color: transparent;\n\t}\n\t.ProseMirror:not(.ProseMirror-focused) .ProseMirror-mark-boundary-cursor {\n\t\tdisplay: none;\n\t}\n\n\t", "\n\n\t", "\n\n\t", "\n\n\t", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n  ", ";\n\n\t", "\n\n\t", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  // Switch between the two icons based on the visual refresh feature gate\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  .panelView-content-wrap {\n\t\tbox-sizing: border-box;\n\t}\n\n\t.mediaGroupView-content-wrap ul {\n\t\tpadding: 0;\n\t}\n\n\t/** Needed to override any cleared floats, e.g. image wrapping */\n\n\tdiv.fabric-editor-block-mark[class^='fabric-editor-align'] {\n\t\tclear: none !important;\n\t}\n\n\t.fabric-editor-align-end {\n\t\ttext-align: right;\n\t}\n\n\t.fabric-editor-align-start {\n\t\ttext-align: left;\n\t}\n\n\t.fabric-editor-align-center {\n\t\ttext-align: center;\n\t}\n\n\t// For FullPage only when inside a table\n\t// Related code all lives inside: packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts\n\t// In the \"editorContentAreaContainerStyle\" function\n\t.fabric-editor--full-width-mode {\n\t\t.pm-table-container {\n\t\t\t.code-block,\n\t\t\t.extension-container,\n\t\t\t.multiBodiedExtension--container {\n\t\t\t\tmax-width: 100%;\n\t\t\t}\n\t\t}\n\t}\n\n\t.pm-table-header-content-wrap :not(.fabric-editor-alignment),\n\t.pm-table-header-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark,\n\t.pm-table-cell-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark {\n\t\tp:first-of-type {\n\t\t\tmargin-top: 0;\n\t\t}\n\t}\n\t.pm-table-cell-content-wrap .mediaGroupView-content-wrap {\n\t\tclear: both;\n\t}\n\n\t.hyperlink-floating-toolbar {\n\t\tpadding: 0;\n\t}\n\n\t/* Legacy Link icon in the Atlaskit package\n\t is bigger than the others, new ADS icon does not have this issue\n  */\n\t", "\n"])), _editorSharedStyles.akEditorGutterPadding, (0, _editorSharedStyles.akEditorGutterPaddingDynamic)(), _editorSharedStyles.akEditorDefaultLayoutWidth, _editorSharedStyles.akEditorFullWidthLayoutWidth, _editorSharedStyles.akEditorCalculatedWideLayoutWidthSmallViewport, akEditorBreakpointForSmallDevice, _editorSharedStyles.akEditorCalculatedWideLayoutWidth, _whitespaceStyles.whitespaceStyles, _styles.listsSharedStyles, _indentationStyles.indentationStyles, _shadowStyles.shadowStyles, _getInlineNodeViewProducer.InlineNodeViewSharedStyles, (0, _platformFeatureFlags.fg)('editor_request_to_edit_task') ? null : (0, _react2.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.ProseMirror[contenteditable='false'] .taskItemView-content-wrap {\n\t\t\t\t\tpointer-events: none;\n\t\t\t\t\topacity: 0.7;\n\t\t\t\t}\n\t\t\t"]))), (0, _platformFeatureFlags.fg)('platform_editor_hide_cursor_when_pm_hideselection') ? (0, _react2.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.ProseMirror-hideselection {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t"]))) : null, (0, _experiments.editorExperiment)('platform_editor_advanced_code_blocks', true) ? (0, _react2.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.ProseMirror-hideselection {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t"]))) : null, "var(--ds-border-focused, #8cf)", _styles5.placeholderTextStyles, placeholderStyles, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? placeholderOverflowStyles : null, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_quick_insert_placeholder') ? placeholderWrapStyles : null, _codeBlockStyles.codeBlockStyles, (0, _styles2.blocktypeStyles)(), _codeMarkStyles.codeMarkStyles, _textColorStyles.textColorStyles, _backgroundColorStyles.backgroundColorStyles, _list.listsStyles, _rule.ruleStyles, _mediaStyles.mediaStyles, (0, _platformFeatureFlags.fg)('confluence_team_presence_scroll_to_pointer') ? _collab.telepointerStyle : _collab.telepointerStyleWithInitialOnly, _selection.gapCursorStyles, (0, _panel.panelStyles)(), mentionsStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
     exposure: false
   }) && vanillaMentionsStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
     exposure: false
   }) && vanillaSelectionStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
     exposure: false
-  }) ? emojiStyles : reactEmojiStyles, emojiStyles, _tasksAndDecisionsStyles.tasksAndDecisionsStyles, _gridStyles.gridStyles, _blockMarksStyles.blockMarksStyles, _styles.dateSharedStyle, _extension.extensionStyles, (0, _expand.expandStyles)(), _styles3.findReplaceStyles, _styles4.textHighlightStyle, _tasksAndDecisions.taskDecisionStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
+  }) ? emojiStyles : reactEmojiStyles, emojiStyles, _tasksAndDecisionsStyles.tasksAndDecisionsStyles, _gridStyles.gridStyles, _blockMarksStyles.blockMarksStyles, _dateStyles.dateStyles, _extension.extensionStyles, (0, _expand.expandStyles)(), _styles3.findReplaceStyles, _styles4.textHighlightStyle, _tasksAndDecisions.taskDecisionStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
     exposure: false
   }) && _tasksAndDecisions.vanillaTaskItemStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
     exposure: false
@@ -160,7 +165,7 @@ var contentStyles = function contentStyles() {
     exposure: false
   }) && (0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') && _tasksAndDecisions.vanillaTaskDecisionIconWithVisualRefresh, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
     exposure: false
-  }) && !(0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') && _tasksAndDecisions.vanillaTaskDecisionIconWithoutVisualRefresh, _status.statusStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true) ? (0, _status.vanillaStatusStyles)() : null, _annotationStyles.annotationStyles, (0, _styles.smartCardStyles)(), (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') ? (0, _styles.getSmartCardSharedStyles)() : _styles.smartCardSharedStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true) ? _date.dateVanillaStyles : null, _date.dateStyles, _embedCardStyles.embedCardStyles, _styles.unsupportedStyles, _resizerStyles.resizerStyles, !(0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') ? (0, _react2.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.hyperlink-open-link {\n\t\t\t\t\tmin-width: 24px;\n\t\t\t\t\tsvg {\n\t\t\t\t\t\tmax-width: 18px;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t"]))) : null);
+  }) && !(0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') && _tasksAndDecisions.vanillaTaskDecisionIconWithoutVisualRefresh, _status.statusStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true) ? (0, _status.vanillaStatusStyles)() : null, _annotationStyles.annotationStyles, (0, _styles.smartCardStyles)(), (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') ? (0, _styles.getSmartCardSharedStyles)() : _styles.smartCardSharedStyles, _embedCardStyles.embedCardStyles, _unsupportedStyles.unsupportedStyles, _resizerStyles.resizerStyles, !(0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') ? (0, _react2.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.hyperlink-open-link {\n\t\t\t\t\tmin-width: 24px;\n\t\t\t\t\tsvg {\n\t\t\t\t\t\tmax-width: 18px;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t"]))) : null);
 };
 var CommentEditorMargin = 14;
 
@@ -230,7 +235,9 @@ var EditorContentContainer = /*#__PURE__*/_react.default.forwardRef(function (pr
     ref: ref,
     css: [contentStyles(),
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-    (0, _layout.layoutBaseStyles)(), (0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') ? (0, _platformFeatureFlags.fg)('platform-dst-jira-web-fonts') || (0, _platformFeatureFlags.fg)('confluence_typography_refreshed') || (0, _platformFeatureFlags.fg)('atlas_editor_typography_refreshed') ?
+    (0, _layout.layoutBaseStyles)(), (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true) &&
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    _dateStyles.dateVanillaStyles, (0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') ? (0, _platformFeatureFlags.fg)('platform-dst-jira-web-fonts') || (0, _platformFeatureFlags.fg)('confluence_typography_refreshed') || (0, _platformFeatureFlags.fg)('atlas_editor_typography_refreshed') ?
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     _paragraphStyles.paragraphStylesUGCRefreshed :
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
@@ -238,14 +245,20 @@ var EditorContentContainer = /*#__PURE__*/_react.default.forwardRef(function (pr
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     _paragraphStyles.paragraphStylesOld,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-    (0, _platformFeatureFlags.fg)('platform_editor_hyperlink_underline') ? _link.linkStyles : _link.linkStylesOld, (0, _experiments.editorExperiment)('platform_editor_breakout_resizing', true) &&
+    (0, _platformFeatureFlags.fg)('platform_editor_hyperlink_underline') ? _link.linkStyles : _link.linkStylesOld,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    _browser.browser.safari && _list.listsStylesSafariFix, (0, _experiments.editorExperiment)('platform_editor_breakout_resizing', true) &&
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     _resizerStyles.pragmaticResizerStyles,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     _aiPanel.aiPanelBaseStyles,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    isFirefox && _aiPanel.aiPanelBaseFirefoxStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     colorMode === 'dark' && _aiPanel.aiPanelDarkStyles,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    colorMode === 'dark' && isFirefox && _aiPanel.aiPanelDarkFirefoxStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     viewMode === 'view' && _layout.layoutViewStyles, isComment && commentEditorStyles, isFullPage && fullPageEditorStyles, (0, _platformFeatureFlags.fg)('platform_editor_ssr_fix_lists') && listLayoutShiftFix, (0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes') ?
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     _codeBlockStyles.firstCodeBlockWithNoMargin :

package/dist/cjs/ui/EditorContentContainer/styles/aiPanel.js

@@ -0,0 +1,203 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.aiPanelDarkStyles = exports.aiPanelDarkFirefoxStyles = exports.aiPanelBaseStyles = exports.aiPanelBaseFirefoxStyles = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = require("@emotion/react");
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
+
+/**
+ * aiPanelStyles
+ * was imported from packages/editor/editor-core/src/ui/ContentStyles/ai-panels.ts
+ */
+
+var rotationAnimation = (0, _react.keyframes)({
+  '0%': {
+    '--panel-gradient-angle': '0deg'
+  },
+  '100%': {
+    '--panel-gradient-angle': '360deg'
+  }
+});
+var rotationAnimationFirefox = (0, _react.keyframes)({
+  '0%': {
+    '--panel-gradient-angle': '0deg',
+    backgroundPosition: '100%'
+  },
+  '100%': {
+    '--panel-gradient-angle': '360deg',
+    backgroundPosition: '-100%'
+  }
+});
+var aiPrismColor = (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, 'prism.border.step.1', {
+  light: '#0065FF',
+  dark: '#0065FF80'
+}), 'prism.border.step.2', {
+  light: '#0469FF',
+  dark: '#0469FF80'
+}), 'prism.border.step.3', {
+  light: '#BF63F3',
+  dark: '#BF63F380'
+}), 'prism.border.step.4', {
+  light: '#FFA900',
+  dark: '#FFA90080'
+});
+var aiPrismColorStep1Light = aiPrismColor['prism.border.step.1']['light'];
+var aiPrismColorStep2Light = aiPrismColor['prism.border.step.2']['light'];
+var aiPrismColorStep3Light = aiPrismColor['prism.border.step.3']['light'];
+var aiPrismColorStep4Light = aiPrismColor['prism.border.step.4']['light'];
+var aiPrismColorStep1Dark = aiPrismColor['prism.border.step.1']['dark'];
+var aiPrismColorStep2Dark = aiPrismColor['prism.border.step.2']['dark'];
+var aiPrismColorStep3Dark = aiPrismColor['prism.border.step.3']['dark'];
+var aiPrismColorStep4Dark = aiPrismColor['prism.border.step.4']['dark'];
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+var prismBorderBaseBackgroundFirefox = "linear-gradient(90deg, ".concat(aiPrismColorStep1Light, " 0%, ").concat(aiPrismColorStep2Light, " 12%, ").concat(aiPrismColorStep3Light, " 24%, ").concat(aiPrismColorStep4Light, " 48%, ").concat(aiPrismColorStep3Light, " 64%, ").concat(aiPrismColorStep2Light, " 80%, ").concat(aiPrismColorStep1Light, " 100%)");
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+var prismBorderBaseBackground = "conic-gradient(from var(--panel-gradient-angle, 270deg), ".concat(aiPrismColorStep1Light, " 0%, ").concat(aiPrismColorStep2Light, " 20%, ").concat(aiPrismColorStep3Light, " 50%, ").concat(aiPrismColorStep4Light, " 56%, ").concat(aiPrismColorStep1Light, " 100%)");
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+var prismBorderDarkBackgroundFirefox = "linear-gradient(90deg, ".concat(aiPrismColorStep1Dark, " 0%, ").concat(aiPrismColorStep2Dark, " 12%, ").concat(aiPrismColorStep3Dark, " 24%, ").concat(aiPrismColorStep4Dark, " 48%, ").concat(aiPrismColorStep3Dark, " 64%, ").concat(aiPrismColorStep2Dark, " 80%, ").concat(aiPrismColorStep1Dark, " 100%)");
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+var prismBorderDarkBackground = "conic-gradient(from var(--panel-gradient-angle, 270deg), ".concat(aiPrismColorStep1Dark, " 0%, ").concat(aiPrismColorStep2Dark, " 20%, ").concat(aiPrismColorStep3Dark, " 50%, ").concat(aiPrismColorStep4Dark, " 56%, ").concat(aiPrismColorStep1Dark, " 100%)");
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+var aiPanelBaseStyles = exports.aiPanelBaseStyles = (0, _react.css)({
+  '@property --panel-gradient-angle': {
+    syntax: '<angle>',
+    initialValue: '270deg',
+    inherits: false
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  'div[extensionType="com.atlassian.ai-blocks"]': {
+    /* This hides the label for the extension */
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.extension-label': {
+      display: 'none'
+    },
+    /* This styles the ai panel correctly when its just sitting on the page and there
+    is no user interaction */
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.extension-container': {
+      position: 'relative',
+      boxShadow: 'none',
+      overflow: 'unset',
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+      backgroundColor: "var(--ds-surface, #FFFFFF)".concat(" !important"),
+      // prismBorderBaseStyles
+      '&::before, &::after': {
+        content: "''",
+        position: 'absolute',
+        zIndex: -1,
+        width: "calc(100% + 2px)",
+        height: "calc(100% + 2px)",
+        top: "-1px",
+        left: "-1px",
+        borderRadius: "calc(".concat("var(--ds-border-radius-100, 3px)", " + 1px)"),
+        transform: 'translate3d(0, 0, 0)',
+        background: prismBorderBaseBackground
+      },
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '&.with-hover-border': {
+        '&::before, &::after': {
+          //prismBorderHoverStyles
+          background: "var(--ds-border-input, #8590A2)"
+        }
+      },
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '& .with-margin-styles': {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+        backgroundColor: "var(--ds-surface, #FFFFFF)".concat(" !important"),
+        borderRadius: "var(--ds-border-radius-100, 3px)"
+      }
+    }
+  },
+  /* This styles the ai panel correctly when its streaming */
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+  'div[extensionType="com.atlassian.ai-blocks"]:has(.streaming)': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.extension-container': {
+      '&::before, &::after': {
+        // prismBorderAnimationStyles
+        animationName: rotationAnimation,
+        animationDuration: '2s',
+        animationTimingFunction: 'linear',
+        animationIterationCount: 'infinite',
+        '@media (prefers-reduced-motion)': {
+          animation: 'none'
+        }
+      }
+    }
+  },
+  /* This styles the ai panel correctly when a user is hovering over the delete button in the floating panel */
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  'div[extensionType="com.atlassian.ai-blocks"].danger': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.extension-container': {
+      boxShadow: "0 0 0 1px ".concat("var(--ds-border-danger, #E2483D)")
+    }
+  },
+  /* This removes the margin from the action list when inside an ai panel */
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  'div[extensiontype="com.atlassian.ai-blocks"][extensionkey="ai-action-items-block:aiActionItemsBodiedExtension"]': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    'div[data-node-type="actionList"]': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+      margin: '0 !important'
+    }
+  }
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+var aiPanelBaseFirefoxStyles = exports.aiPanelBaseFirefoxStyles = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  'div[extensionType="com.atlassian.ai-blocks"]': {
+    '&::before, &::after': {
+      background: prismBorderBaseBackgroundFirefox,
+      backgroundSize: '200%'
+    }
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+  'div[extensionType="com.atlassian.ai-blocks"]:has(.streaming)': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.extension-container': {
+      '&::before, &::after': {
+        animationName: rotationAnimationFirefox,
+        animationDirection: 'normal',
+        animationDuration: '1s'
+      }
+    }
+  }
+});
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+var aiPanelDarkStyles = exports.aiPanelDarkStyles = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  'div[extensionType="com.atlassian.ai-blocks"]': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.extension-container': {
+      '&::before, &::after': {
+        background: prismBorderDarkBackground
+      }
+    }
+  }
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+var aiPanelDarkFirefoxStyles = exports.aiPanelDarkFirefoxStyles = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  'div[extensionType="com.atlassian.ai-blocks"]': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.extension-container': {
+      '&::before, &::after': {
+        background: prismBorderDarkBackgroundFirefox,
+        backgroundSize: '200%'
+      }
+    }
+  }
+});

package/dist/cjs/ui/EditorContentContainer/styles/dateStyles.js

@@ -0,0 +1,51 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.dateVanillaStyles = exports.dateStyles = exports.DateSharedCssClassName = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = require("@emotion/react");
+var _selectionStyles = require("./selectionStyles");
+// eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
+
+var DateSharedCssClassName = exports.DateSharedCssClassName = {
+  DATE_WRAPPER: "date-lozenger-container",
+  DATE_CONTAINER: 'dateView-content-wrap'
+};
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+var dateVanillaStyles = exports.dateVanillaStyles = (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "[data-prosemirror-node-view-type='vanilla'][data-prosemirror-node-name='date'] .".concat(DateSharedCssClassName.DATE_WRAPPER, " span"), {
+  backgroundColor: "var(--ds-background-neutral, #091E420F)",
+  color: "var(--ds-text, #172B4D)",
+  borderRadius: "var(--ds-border-radius-100, 4px)",
+  padding: "var(--ds-space-025, 2px)".concat(" ", "var(--ds-space-050, 4px)"),
+  margin: '0 1px',
+  position: 'relative',
+  transition: 'background 0.3s',
+  whiteSpace: 'nowrap',
+  cursor: 'unset'
+}), "[data-prosemirror-node-view-type='vanilla'][data-prosemirror-node-name='date'] .".concat(DateSharedCssClassName.DATE_WRAPPER, " span:hover"), {
+  backgroundColor: "var(--ds-background-neutral-hovered, #091E4224)"
+}), "[data-prosemirror-node-view-type='vanilla'][data-prosemirror-node-name='date'] .".concat(DateSharedCssClassName.DATE_WRAPPER, " span.date-node-color-red"), {
+  backgroundColor: "var(--ds-background-accent-red-subtlest, #FFECEB)",
+  color: "var(--ds-text-accent-red, #AE2E24)"
+}), "[data-prosemirror-node-view-type='vanilla'][data-prosemirror-node-name='date'] .".concat(DateSharedCssClassName.DATE_WRAPPER, " span.date-node-color-red:hover"), {
+  backgroundColor: "var(--ds-background-accent-red-subtler, #FFD5D2)"
+}));
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+var dateStyles = exports.dateStyles = (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(DateSharedCssClassName.DATE_WRAPPER, " span"), {
+  whiteSpace: 'unset'
+}), ".".concat(DateSharedCssClassName.DATE_CONTAINER), (0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(DateSharedCssClassName.DATE_WRAPPER), {
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+  lineHeight: 'initial',
+  cursor: 'pointer'
+}), '&.ak-editor-selected-node', (0, _defineProperty2.default)({}, ".".concat(DateSharedCssClassName.DATE_WRAPPER, " > span"), [
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+_selectionStyles.boxShadowSelectionStyles,
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+_selectionStyles.hideNativeBrowserTextSelectionStyles]))), '.danger', (0, _defineProperty2.default)({}, ".".concat(DateSharedCssClassName.DATE_CONTAINER, ".ak-editor-selected-node .").concat(DateSharedCssClassName.DATE_WRAPPER, " > span"), {
+  boxShadow: "0 0 0 1px ".concat("var(--ds-border-danger, #E2483D)")
+})));

package/dist/cjs/ui/EditorContentContainer/styles/list.js

@@ -0,0 +1,49 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.listsStylesSafariFix = exports.listsStyles = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = require("@emotion/react");
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
+
+// copied from packages/editor/editor-shared-styles/src/consts/consts.ts
+var akEditorLineHeight = 1.714;
+// copied from packages/editor/editor-common/src/styles/shared/smart-card.ts
+var BLOCK_CARD_CONTAINER = 'blockCardView-content-wrap';
+
+// copied from packages/editor/editor-shared-styles/src/consts/consts.ts
+var blockNodesVerticalMargin = '0.75rem';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+var listsStyles = exports.listsStyles = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '.ProseMirror li': {
+    position: 'relative',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '& > p:not(:first-child)': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+      margin: "var(--ds-space-050, 4px)".concat(" 0 0 0")
+    },
+    /* In SSR the above rule will apply to all p tags because first-child would be a style tag.
+    	The following rule resets the first p tag back to its original margin
+    	defined in packages/editor/editor-common/src/styles/shared/paragraph.ts */
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '& > style:first-child + p': {
+      marginTop: blockNodesVerticalMargin
+    }
+  }
+});
+
+/* This prevents https://product-fabric.atlassian.net/browse/ED-20924 */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+var listsStylesSafariFix = exports.listsStylesSafariFix = (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".ProseMirror:not(.".concat(BLOCK_CARD_CONTAINER, ") > li::before"), {
+  content: '" "',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+  lineHeight: akEditorLineHeight
+}), ".ProseMirror:not(.".concat(BLOCK_CARD_CONTAINER, ") > li > p:first-child, .ProseMirror:not(.").concat(BLOCK_CARD_CONTAINER, ") > li > .code-block:first-child, .ProseMirror:not(.").concat(BLOCK_CARD_CONTAINER, ") > li > .ProseMirror-gapcursor:first-child + .code-block"), {
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+  marginTop: "-".concat(akEditorLineHeight, "em !important")
+}));

package/dist/cjs/ui/EditorContentContainer/styles/selectionStyles.js

@@ -28,7 +28,7 @@ var borderSelectionStyles = exports.borderSelectionStyles = (0, _react.css)({
   // Fixes ED-15246: Trello card is visible through a border of a table border
   '&::after': {
     height: '100%',
-    content: '"\\00a0"',
+    content: "'\\00a0'",
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
     background: "var(--ds-border-selected, #0C66E4)",
     position: 'absolute',