@atlaskit/editor-common 94.3.0 → 94.4.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @atlaskit/editor-common
 
+## 94.4.0
+
+### Minor Changes
+
+- [#156360](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/156360)
+  [`482dbb03dbf68`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/482dbb03dbf68) -
+  [ux] Update mediaSingle and embedCard to set wrap layout z-index under FG
+
+### Patch Changes
+
+- [#156974](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/156974)
+  [`e23605a60e753`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e23605a60e753) -
+  Add four and five column support for layout sections
+- Updated dependencies
+
+## 94.3.1
+
+### Patch Changes
+
+- [#155488](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/155488)
+  [`75a3286a32347`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/75a3286a32347) -
+  update tokens
+
 ## 94.3.0
 
 ### Minor Changes

package/dist/cjs/analytics/types/node-events.js

@@ -11,6 +11,8 @@ var LAYOUT_TYPE = exports.LAYOUT_TYPE = /*#__PURE__*/function (LAYOUT_TYPE) {
   LAYOUT_TYPE["LEFT_SIDEBAR"] = "twoColumnsLeftSidebar";
   LAYOUT_TYPE["RIGHT_SIDEBAR"] = "twoColumnsRightSidebar";
   LAYOUT_TYPE["THREE_WITH_SIDEBARS"] = "threeColumnsWithSidebars ";
+  LAYOUT_TYPE["FOUR_COLS_EQUAL"] = "fourColumnsEqual";
+  LAYOUT_TYPE["FIVE_COLS_EQUAL"] = "fiveColumnsEqual";
   return LAYOUT_TYPE;
 }({});
 var SMART_LINK_TYPE = exports.SMART_LINK_TYPE = /*#__PURE__*/function (SMART_LINK_TYPE) {

package/dist/cjs/doc-utils/editor-use-only.js

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.createEditorUseOnlyNotice = createEditorUseOnlyNotice;
 var _react = _interopRequireDefault(require("react"));
 var _sectionMessage = _interopRequireDefault(require("@atlaskit/section-message"));
+/* eslint-disable @atlaskit/design-system/use-primitives-text */
+
 function AlternativePackagesMessage(_ref) {
   var alternatePackages = _ref.alternatePackages;
   if (!alternatePackages) {

package/dist/cjs/element-browser/components/ElementList/ElementList.js

@@ -19,6 +19,8 @@ var _withAnalyticsContext = _interopRequireDefault(require("@atlaskit/analytics-
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _shortcut = require("@atlaskit/editor-shared-styles/shortcut");
 var _menu = require("@atlaskit/menu");
+var _primitives = require("@atlaskit/primitives");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _analytics = require("../../../analytics");
 var _quickInsert = require("../../../quick-insert");
@@ -290,8 +292,7 @@ var itemStyleOverrides = {
   alignItems: 'flex-start'
 };
 var ElementBefore = /*#__PURE__*/(0, _react.memo)(function (_ref6) {
-  var icon = _ref6.icon,
-    title = _ref6.title;
+  var icon = _ref6.icon;
   return (0, _react2.jsx)("div", {
     css: [itemIcon, itemIconStyle]
   }, icon ? icon() : (0, _react2.jsx)(_quickInsert.IconFallback, null));
@@ -300,25 +301,51 @@ var ItemContent = /*#__PURE__*/(0, _react.memo)(function (_ref7) {
   var title = _ref7.title,
     description = _ref7.description,
     keyshortcut = _ref7.keyshortcut;
-  return (
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    (0, _react2.jsx)("div", {
-      css: itemBody,
-      className: "item-body"
-    }, (0, _react2.jsx)("div", {
-      css: itemText
-    }, (0, _react2.jsx)("div", {
-      css: itemTitleWrapper
-    }, (0, _react2.jsx)("p", {
-      css: itemTitle
-    }, title), (0, _react2.jsx)("div", {
-      css: itemAfter
-    }, keyshortcut && (0, _react2.jsx)("div", {
-      css: _shortcut.shortcutStyle
-    }, keyshortcut))), description && (0, _react2.jsx)("p", {
-      css: itemDescription
-    }, description)))
-  );
+  if ((0, _experiments.editorExperiment)('typography_migration_ugc', true)) {
+    return (
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      (0, _react2.jsx)("div", {
+        css: itemBody,
+        className: "item-body"
+      }, (0, _react2.jsx)("div", {
+        css: itemText
+      }, (0, _react2.jsx)(_primitives.Stack, {
+        space: "space.025"
+      }, (0, _react2.jsx)("div", {
+        css: itemTitleWrapper
+      }, (0, _react2.jsx)(_primitives.Text, {
+        maxLines: 1
+      }, title), (0, _react2.jsx)("div", {
+        css: itemAfter
+      }, keyshortcut && (0, _react2.jsx)("div", {
+        css: _shortcut.shortcutStyle
+      }, keyshortcut))), description && (0, _react2.jsx)(_primitives.Text, {
+        color: "color.text.subtle",
+        size: "small",
+        maxLines: 2
+      }, description))))
+    );
+  } else {
+    return (
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      (0, _react2.jsx)("div", {
+        css: itemBody,
+        className: "item-body"
+      }, (0, _react2.jsx)("div", {
+        css: itemText
+      }, (0, _react2.jsx)("div", {
+        css: itemTitleWrapper
+      }, (0, _react2.jsx)("p", {
+        css: itemTitle
+      }, title), (0, _react2.jsx)("div", {
+        css: itemAfter
+      }, keyshortcut && (0, _react2.jsx)("div", {
+        css: _shortcut.shortcutStyle
+      }, keyshortcut))), description && (0, _react2.jsx)("p", {
+        css: itemDescription
+      }, description)))
+    );
+  }
 });
 var elementItemsWrapper = (0, _react2.css)({
   flex: 1,

package/dist/cjs/element-browser/components/ElementList/EmptyState.js

@@ -29,7 +29,7 @@ function EmptyState(_ref) {
     description: "Empty state heading"
   })), (0, _react.jsx)("div", {
     css: emptyStateSubHeading
-  }, (0, _react.jsx)("p", null, (0, _react.jsx)(_reactIntlNext.FormattedMessage, {
+  }, (0, _react.jsx)(_primitives.Text, null, (0, _react.jsx)(_reactIntlNext.FormattedMessage, {
     id: "fabric.editor.elementbrowser.search.empty-state.sub-heading",
     defaultMessage: "Try searching with a different term or discover new apps for Atlassian products.",
     description: "Empty state sub-heading"

package/dist/cjs/element-browser/components/StatelessElementBrowser.js

@@ -14,6 +14,7 @@ var _reactIntlNext = require("react-intl-next");
 var _withAnalyticsContext = _interopRequireDefault(require("@atlaskit/analytics-next/withAnalyticsContext"));
 var _withAnalyticsEvents = _interopRequireDefault(require("@atlaskit/analytics-next/withAnalyticsEvents"));
 var _analytics = require("../../analytics");
+var _getEditorUgcToken = _interopRequireDefault(require("../../ugc-tokens/get-editor-ugc-token"));
 var _constants = require("../constants");
 var _useContainerWidth2 = _interopRequireDefault(require("../hooks/use-container-width"));
 var _useSelectAndFocusOnArrowNavigation = _interopRequireDefault(require("../hooks/use-select-and-focus-on-arrow-navigation"));
@@ -82,7 +83,8 @@ var sidebarHeading = (0, _react2.css)({
   display: 'inline-flex',
   alignItems: 'center',
   paddingLeft: "var(--ds-space-150, 12px)",
-  fontWeight: 700
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+  font: (0, _getEditorUgcToken.default)('editor.font.heading.h1', 'typography-modernized') // use editor h1 modernized here as the style matches
 });
 var mobileMainContent = (0, _react2.css)({
   flex: '1 1 auto',
@@ -282,51 +284,54 @@ function MobileBrowser(_ref) {
     createAnalyticsEvent = _ref.createAnalyticsEvent,
     emptyStateHandler = _ref.emptyStateHandler,
     viewMoreItem = _ref.viewMoreItem;
-  return (0, _react2.jsx)("div", {
-    css: mobileElementBrowserContainer,
-    onKeyDown: onKeyDown,
-    "data-testid": "mobile__element-browser"
-  }, (0, _react2.jsx)("div", {
-    css: showCategories ? [mobileSideBar, mobileSideBarShowCategories] : mobileSideBar
-  }, showSearch && (0, _react2.jsx)(_ElementSearch.default, {
-    onSearch: onSearch,
-    onKeyDown: onKeyPress,
-    mode: mode,
-    focus: focusOnSearch,
-    onClick: setFocusOnSearch,
-    searchTerm: searchTerm,
-    items: items,
-    selectedItemIndex: selectedItemIndex
-  }), showCategories && (0, _react2.jsx)("nav", {
-    css: mobileCategoryListWrapper,
-    tabIndex: -1
-  }, (0, _react2.jsx)(_CategoryList.default, {
-    categories: categories,
-    onSelectCategory: onSelectCategory,
-    selectedCategory: selectedCategory,
-    focusedCategoryIndex: focusedCategoryIndex,
-    setFocusedCategoryIndex: setFocusedCategoryIndex,
-    setFocusedItemIndex: setFocusedItemIndex,
-    setFocusOnSearch: setFocusOnSearch
-  }))), (0, _react2.jsx)("div", {
-    css: mobileMainContent
-  }, (0, _react2.jsx)(_ElementList.default, {
-    items: items,
-    mode: mode,
-    onInsertItem: onInsertItem,
-    selectedItemIndex: selectedItemIndex,
-    focusedItemIndex: focusedItemIndex,
-    setFocusedItemIndex: setFocusedItemIndex,
-    columnCount: columnCount,
-    setColumnCount: setColumnCount,
-    createAnalyticsEvent: createAnalyticsEvent,
-    emptyStateHandler: emptyStateHandler,
-    selectedCategory: selectedCategory,
-    searchTerm: searchTerm
-  })), viewMoreItem && (0, _react2.jsx)(_ViewMore.ViewMore, {
-    item: viewMoreItem,
-    focus: focusOnViewMore
-  }));
+  return (
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    (0, _react2.jsx)("div", {
+      css: mobileElementBrowserContainer,
+      onKeyDown: onKeyDown,
+      "data-testid": "mobile__element-browser"
+    }, (0, _react2.jsx)("div", {
+      css: showCategories ? [mobileSideBar, mobileSideBarShowCategories] : mobileSideBar
+    }, showSearch && (0, _react2.jsx)(_ElementSearch.default, {
+      onSearch: onSearch,
+      onKeyDown: onKeyPress,
+      mode: mode,
+      focus: focusOnSearch,
+      onClick: setFocusOnSearch,
+      searchTerm: searchTerm,
+      items: items,
+      selectedItemIndex: selectedItemIndex
+    }), showCategories && (0, _react2.jsx)("nav", {
+      css: mobileCategoryListWrapper,
+      tabIndex: -1
+    }, (0, _react2.jsx)(_CategoryList.default, {
+      categories: categories,
+      onSelectCategory: onSelectCategory,
+      selectedCategory: selectedCategory,
+      focusedCategoryIndex: focusedCategoryIndex,
+      setFocusedCategoryIndex: setFocusedCategoryIndex,
+      setFocusedItemIndex: setFocusedItemIndex,
+      setFocusOnSearch: setFocusOnSearch
+    }))), (0, _react2.jsx)("div", {
+      css: mobileMainContent
+    }, (0, _react2.jsx)(_ElementList.default, {
+      items: items,
+      mode: mode,
+      onInsertItem: onInsertItem,
+      selectedItemIndex: selectedItemIndex,
+      focusedItemIndex: focusedItemIndex,
+      setFocusedItemIndex: setFocusedItemIndex,
+      columnCount: columnCount,
+      setColumnCount: setColumnCount,
+      createAnalyticsEvent: createAnalyticsEvent,
+      emptyStateHandler: emptyStateHandler,
+      selectedCategory: selectedCategory,
+      searchTerm: searchTerm
+    })), viewMoreItem && (0, _react2.jsx)(_ViewMore.ViewMore, {
+      item: viewMoreItem,
+      focus: focusOnViewMore
+    }))
+  );
 }
 function DesktopBrowser(_ref2) {
   var showCategories = _ref2.showCategories,
@@ -358,7 +363,7 @@ function DesktopBrowser(_ref2) {
     "data-testid": "desktop__element-browser"
   }, showCategories && (0, _react2.jsx)("div", {
     css: showCategories ? sideBarShowCategories : sideBar
-  }, (0, _react2.jsx)("h2", {
+  }, (0, _react2.jsx)("div", {
     css: sidebarHeading,
     "data-testid": "sidebar-heading",
     id: "sidebar-heading"

package/dist/cjs/extensibility/Extension/Lozenge/ExtensionLabel.js

@@ -78,7 +78,7 @@ var buttonLabelStyles = (0, _react2.css)({
   '&.remove-nested-left-margin': {
     marginLeft: 0
   },
-  fontSize: '16px',
+  fontSize: "var(--ds-space-200, 16px)",
   fontWeight: "var(--ds-font-weight-regular, 400)"
 });
 var spacerStyles = (0, _react2.css)({
@@ -86,6 +86,9 @@ var spacerStyles = (0, _react2.css)({
   height: '10px'
 });
 var textStyles = (0, _react2.css)({
+  // cannot use font.body or editor custom font.body here as line-height need to be 1 (from sharedLabelStyles)
+  // cannot use space token as there is not token for 14px
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   fontSize: '14px',
   fontWeight: "var(--ds-font-weight-regular, 400)",
   padding: "var(--ds-space-025, 2px)".concat(" ", "var(--ds-space-050, 4px)")
@@ -147,53 +150,58 @@ var ExtensionLabel = exports.ExtensionLabel = function ExtensionLabel(_ref) {
   var iconClassNames = (0, _classnames.default)({
     'hide-icon': isBodiedMacro && !isNodeHovered
   });
-  return (0, _react2.jsx)("div", {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    css: containerStyles
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    ,
-    className: containerClassNames
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-    ,
-    style: customContainerStyles,
-    onMouseOver: function onMouseOver() {
-      setIsNodeHovered === null || setIsNodeHovered === void 0 || setIsNodeHovered(true);
-    },
-    onMouseLeave: function onMouseLeave() {
-      setIsNodeHovered === null || setIsNodeHovered === void 0 || setIsNodeHovered(false);
-    },
-    "data-testid": "new-lozenge-container"
-  }, showMacroButtonUpdates ? (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_tooltip.default, {
-    content: (0, _react2.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, i18n.configure, {
-      values: {
-        macroName: text
-      }
-    })),
-    position: "top"
-  }, function (tooltipProps) {
-    return (0, _react2.jsx)("span", (0, _extends2.default)({
-      "data-testid": "new-lozenge-button"
-    }, tooltipProps, {
-      css: [sharedLabelStyles, buttonLabelStyles]
+  return (
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    (0, _react2.jsx)("div", {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      css: containerStyles
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      ,
+      className: containerClassNames
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+      ,
+      style: customContainerStyles
+      // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
+      ,
+      onMouseOver: function onMouseOver() {
+        setIsNodeHovered === null || setIsNodeHovered === void 0 || setIsNodeHovered(true);
+      },
+      onMouseLeave: function onMouseLeave() {
+        setIsNodeHovered === null || setIsNodeHovered === void 0 || setIsNodeHovered(false);
+      },
+      "data-testid": "new-lozenge-container"
+    }, showMacroButtonUpdates ? (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_tooltip.default, {
+      content: (0, _react2.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, i18n.configure, {
+        values: {
+          macroName: text
+        }
+      })),
+      position: "top"
+    }, function (tooltipProps) {
+      return (0, _react2.jsx)("span", (0, _extends2.default)({
+        "data-testid": "new-lozenge-button"
+      }, tooltipProps, {
+        css: [sharedLabelStyles, buttonLabelStyles]
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+        ,
+        className: "".concat(sharedLabelClassNames, " ").concat(newButtonLabelClassNames)
+      }), text, (0, _react2.jsx)("span", {
+        css: iconStyles,
+        className: iconClassNames,
+        "data-testid": "config-icon"
+      }, (0, _react2.jsx)(_preferences.default, {
+        label: ""
+      })));
+    }), (0, _react2.jsx)("div", {
+      css: spacerStyles
+    })) : (0, _react2.jsx)("span", {
+      "data-testid": "new-lozenge",
+      css: [sharedLabelStyles, originalLabelStyles]
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       ,
-      className: "".concat(sharedLabelClassNames, " ").concat(newButtonLabelClassNames)
-    }), text, (0, _react2.jsx)("span", {
-      css: iconStyles,
-      className: iconClassNames,
-      "data-testid": "config-icon"
-    }, (0, _react2.jsx)(_preferences.default, {
-      label: ""
-    })));
-  }), (0, _react2.jsx)("div", {
-    css: spacerStyles
-  })) : (0, _react2.jsx)("span", {
-    "data-testid": "new-lozenge",
-    css: [sharedLabelStyles, originalLabelStyles]
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    ,
-    className: sharedLabelClassNames
-  }, (0, _react2.jsx)("span", {
-    css: textStyles
-  }, text)));
+      className: sharedLabelClassNames
+    }, (0, _react2.jsx)("span", {
+      css: textStyles
+    }, text)))
+  );
 };

package/dist/cjs/monitoring/error.js

@@ -17,7 +17,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-var packageVersion = "94.3.0";
+var packageVersion = "94.4.0";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

package/dist/cjs/styles/index.js

@@ -273,6 +273,12 @@ Object.defineProperty(exports, "mediaSingleSharedStyle", {
     return _mediaSingle.mediaSingleSharedStyle;
   }
 });
+Object.defineProperty(exports, "mediaSingleSharedStyleNew", {
+  enumerable: true,
+  get: function get() {
+    return _mediaSingle.mediaSingleSharedStyleNew;
+  }
+});
 Object.defineProperty(exports, "paragraphSharedStyles", {
   enumerable: true,
   get: function get() {

package/dist/cjs/styles/shared/embedCard.js

@@ -5,30 +5,57 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.embedSpacingStyles = exports.embedCardStyles = void 0;
 var _react = require("@emotion/react");
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var embedCardStyles = exports.embedCardStyles = (0, _react.css)({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '.ProseMirror': {
+var embedCardStyles = exports.embedCardStyles = function embedCardStyles() {
+  return (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_3') ? (0, _react.css)({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-    ".embedCardView-content-wrap[layout^='wrap-']": {
-      maxWidth: '100%'
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-    ".embedCardView-content-wrap[layout='wrap-left']": {
-      float: 'left'
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-    ".embedCardView-content-wrap[layout='wrap-right']": {
-      float: 'right'
-    },
+    '.ProseMirror': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+      ".embedCardView-content-wrap[layout^='wrap-']": {
+        maxWidth: '100%',
+        position: 'relative',
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+        zIndex: _editorSharedStyles.akEditorWrappedNodeZIndex
+      },
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+      ".embedCardView-content-wrap[layout='wrap-left']": {
+        float: 'left'
+      },
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+      ".embedCardView-content-wrap[layout='wrap-right']": {
+        float: 'right'
+      },
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+      ".embedCardView-content-wrap[layout='wrap-right'] + .embedCardView-content-wrap[layout='wrap-left']": {
+        clear: 'both'
+      }
+    }
+  }) : (0, _react.css)({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-    ".embedCardView-content-wrap[layout='wrap-right'] + .embedCardView-content-wrap[layout='wrap-left']": {
-      clear: 'both'
+    '.ProseMirror': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+      ".embedCardView-content-wrap[layout^='wrap-']": {
+        maxWidth: '100%'
+      },
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+      ".embedCardView-content-wrap[layout='wrap-left']": {
+        float: 'left'
+      },
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+      ".embedCardView-content-wrap[layout='wrap-right']": {
+        float: 'right'
+      },
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+      ".embedCardView-content-wrap[layout='wrap-right'] + .embedCardView-content-wrap[layout='wrap-left']": {
+        clear: 'both'
+      }
     }
-  }
-});
+  });
+};
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var embedSpacingStyles = exports.embedSpacingStyles = (0, _react.css)({

package/dist/cjs/styles/shared/media-single.js

@@ -4,10 +4,11 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.richMediaClassName = exports.mediaSingleSharedStyle = void 0;
+exports.richMediaClassName = exports.mediaSingleSharedStyleNew = exports.mediaSingleSharedStyle = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
-var _css; // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _css, _css2; // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var richMediaClassName = exports.richMediaClassName = 'rich-media-item';
 var wrappedMediaBreakoutPoint = 410;
 var mediaSingleSharedStyle = exports.mediaSingleSharedStyle = (0, _react.css)((_css = {}, (0, _defineProperty2.default)(_css, "li .".concat(richMediaClassName), {
@@ -52,5 +53,51 @@ var mediaSingleSharedStyle = exports.mediaSingleSharedStyle = (0, _react.css)((_
     margin: "var(--ds-space-150, 12px)".concat(" 0")
   }
 }), _css));
+var mediaSingleSharedStyleNew = exports.mediaSingleSharedStyleNew = (0, _react.css)((_css2 = {}, (0, _defineProperty2.default)(_css2, "li .".concat(richMediaClassName), {
+  margin: 0
+}), (0, _defineProperty2.default)(_css2, '&.ua-chrome li > .mediaSingleView-content-wrap::before', {
+  content: "''",
+  display: 'block',
+  height: 0
+}), (0, _defineProperty2.default)(_css2, '&.ua-firefox', {
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '.mediaSingleView-content-wrap': {
+    userSelect: 'none'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '.captionView-content-wrap': {
+    userSelect: 'text'
+  }
+}), (0, _defineProperty2.default)(_css2, ".mediaSingleView-content-wrap[layout^='wrap-']", {
+  position: 'relative',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+  zIndex: _editorSharedStyles.akEditorWrappedNodeZIndex
+}), (0, _defineProperty2.default)(_css2, ".mediaSingleView-content-wrap[layout='center']", {
+  clear: 'both'
+}), (0, _defineProperty2.default)(_css2, "table .".concat(richMediaClassName), {
+  marginTop: "var(--ds-space-150, 12px)",
+  marginBottom: "var(--ds-space-150, 12px)",
+  clear: 'both',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '&.image-wrap-left[data-layout], &.image-wrap-right[data-layout]': {
+    clear: 'none',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+    '&:first-child': {
+      marginTop: "var(--ds-space-150, 12px)"
+    }
+  }
+}), (0, _defineProperty2.default)(_css2, ".".concat(richMediaClassName, ".image-wrap-right + .").concat(richMediaClassName, ".image-wrap-left"), {
+  clear: 'both'
+}), (0, _defineProperty2.default)(_css2, ".".concat(richMediaClassName, ".image-wrap-left + .").concat(richMediaClassName, ".image-wrap-right, .").concat(richMediaClassName, ".image-wrap-right + .").concat(richMediaClassName, ".image-wrap-left, .").concat(richMediaClassName, ".image-wrap-left + .").concat(richMediaClassName, ".image-wrap-left, .").concat(richMediaClassName, ".image-wrap-right + .").concat(richMediaClassName, ".image-wrap-right"), {
+  marginRight: 0,
+  marginLeft: 0
+}), (0, _defineProperty2.default)(_css2, "@media all and (max-width: ".concat(wrappedMediaBreakoutPoint, "px)"), {
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  "div.mediaSingleView-content-wrap[layout='wrap-left'], div.mediaSingleView-content-wrap[data-layout='wrap-left'], div.mediaSingleView-content-wrap[layout='wrap-right'], div.mediaSingleView-content-wrap[data-layout='wrap-right']": {
+    float: 'none',
+    overflow: 'auto',
+    margin: "var(--ds-space-150, 12px)".concat(" 0")
+  }
+}), _css2));
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766

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

@@ -14,6 +14,7 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
+var _primitives = require("@atlaskit/primitives");
 var _messages = require("./messages");
 function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = (0, _getPrototypeOf2.default)(t); if (r) { var s = (0, _getPrototypeOf2.default)(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return (0, _possibleConstructorReturn2.default)(this, e); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /**
@@ -26,10 +27,10 @@ var captionWrapperStyle = (0, _react2.css)({
   position: 'relative',
   color: "var(--ds-text-subtle, #44546F)"
 });
-var placeholderStyle = (0, _react2.css)({
-  color: "var(--ds-text-subtlest, #626F86)",
+var placeholderStyle = (0, _primitives.xcss)({
+  color: 'color.text.subtlest',
   position: 'absolute',
-  top: 0,
+  top: 'space.0',
   width: '100%'
 });
 var CaptionComponent = exports.CaptionComponent = /*#__PURE__*/function (_React$Component) {
@@ -54,9 +55,9 @@ var CaptionComponent = exports.CaptionComponent = /*#__PURE__*/function (_React$
         "data-testid": "media-caption"
       }, dataAttributes, {
         css: captionWrapperStyle
-      }), showPlaceholder ? (0, _react2.jsx)("p", {
-        css: placeholderStyle
-      }, formatMessage(_messages.messages.placeholder)) : null, children);
+      }), showPlaceholder ? (0, _react2.jsx)(_primitives.Box, {
+        xcss: placeholderStyle
+      }, (0, _react2.jsx)(_primitives.Text, null, formatMessage(_messages.messages.placeholder))) : null, children);
     }
   }]);
   return CaptionComponent;

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

@@ -24,7 +24,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
  * @jsx jsx
  */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "94.3.0";
+var packageVersion = "94.4.0";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {

package/dist/es2019/analytics/types/node-events.js

@@ -5,6 +5,8 @@ export let LAYOUT_TYPE = /*#__PURE__*/function (LAYOUT_TYPE) {
   LAYOUT_TYPE["LEFT_SIDEBAR"] = "twoColumnsLeftSidebar";
   LAYOUT_TYPE["RIGHT_SIDEBAR"] = "twoColumnsRightSidebar";
   LAYOUT_TYPE["THREE_WITH_SIDEBARS"] = "threeColumnsWithSidebars ";
+  LAYOUT_TYPE["FOUR_COLS_EQUAL"] = "fourColumnsEqual";
+  LAYOUT_TYPE["FIVE_COLS_EQUAL"] = "fiveColumnsEqual";
   return LAYOUT_TYPE;
 }({});
 export let SMART_LINK_TYPE = /*#__PURE__*/function (SMART_LINK_TYPE) {

package/dist/es2019/doc-utils/editor-use-only.js

@@ -1,3 +1,4 @@
+/* eslint-disable @atlaskit/design-system/use-primitives-text */
 import React from 'react';
 import SectionMessage from '@atlaskit/section-message';
 function AlternativePackagesMessage({