@atlaskit/renderer 109.19.4 → 109.20.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/renderer
 
+## 109.20.0
+
+### Minor Changes
+
+- [#91934](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/91934) [`b76a78c6a199`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b76a78c6a199) - bumped editor-prosemirror version to 4.0.0
+
+### Patch Changes
+
+- [#93451](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/93451) [`33ccdcc238ab`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/33ccdcc238ab) - [ED-22917] Wrap inline cards in data attributes used by clipboard handlers, and annotation calculations.
+- Updated dependencies
+
+## 109.19.5
+
+### Patch Changes
+
+- [#92426](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/92426) [`32c76c7c225c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/32c76c7c225c) - Bump adf-schema to 35.9.2 to support table alignment options
+- Updated dependencies
+
 ## 109.19.4
 
 ### Patch Changes

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

@@ -13,10 +13,14 @@ var _adfSchema = require("@atlaskit/adf-schema");
 var _templateObject;
 /** @jsx jsx */
 var MarkWrapper = function MarkWrapper(props) {
-  var styles = props['data-align'] ? (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n        text-align: ", ";\n      "])), _adfSchema.alignmentPositionMap[props['data-align']]) : '';
-  return (0, _react2.jsx)("div", (0, _extends2.default)({
-    css: styles
-  }, props), props.children);
+  var styles = props['data-align'] ? // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
+  (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n        text-align: ", ";\n      "])), _adfSchema.alignmentPositionMap[props['data-align']]) : '';
+  return (
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    (0, _react2.jsx)("div", (0, _extends2.default)({
+      css: styles
+    }, props), props.children)
+  );
 };
 function Alignment(props) {
   return (0, _react2.jsx)(MarkWrapper, {

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

@@ -1,19 +1,22 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = Breakout;
 exports.wrapperStyles = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
 var _ui = require("@atlaskit/editor-common/ui");
 var _utils = require("@atlaskit/editor-common/utils");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
-var _templateObject;
 /** @jsx jsx */
-var wrapperStyles = exports.wrapperStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  margin: ", " 0;\n  margin-left: 50%;\n  transform: translateX(-50%);\n"])), _editorSharedStyles.blockNodesVerticalMargin);
+
+var wrapperStyles = exports.wrapperStyles = (0, _react.css)({
+  margin: "".concat(_editorSharedStyles.blockNodesVerticalMargin, " 0"),
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+  marginLeft: '50%',
+  transform: 'translateX(-50%)'
+});
 function Breakout(props) {
   return (0, _react.jsx)(_ui.WidthConsumer, null, function (_ref) {
     var width = _ref.width;

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

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = Link;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
@@ -16,11 +15,20 @@ var _events = require("../../analytics/events");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _linkUrl = _interopRequireDefault(require("@atlaskit/smart-card/link-url"));
 var _analyticsNext = require("@atlaskit/analytics-next");
-var _templateObject;
-/** @jsx jsx */
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 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 && Object.prototype.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 anchorStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n\n  &:hover {\n    color: ", ";\n    text-decoration: underline;\n  }\n\n  &:active {\n    color: ", ";\n  }\n"])), "var(--ds-link, ".concat(_colors.B400, ")"), "var(--ds-link, ".concat(_colors.B300, ")"), "var(--ds-link-pressed, ".concat(_colors.B500, ")"));
+/** @jsx jsx */
+
+var anchorStyles = (0, _react2.css)({
+  color: "var(--ds-link, ".concat(_colors.B400, ")"),
+  '&:hover': {
+    color: "var(--ds-link, ".concat(_colors.B300, ")"),
+    textDecoration: 'underline'
+  },
+  '&:active': {
+    color: "var(--ds-link-pressed, ".concat(_colors.B500, ")")
+  }
+});
 function Link(props) {
   var href = props.href,
     target = props.target,

package/dist/cjs/react/nodes/codeBlock/components/codeBlockContainer.js

@@ -14,6 +14,7 @@ var _styles = require("@atlaskit/editor-common/styles");
 var _codeBlockButtonContainer = _interopRequireDefault(require("./codeBlockButtonContainer"));
 var _templateObject;
 /** @jsx jsx */
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
 var codeBlockStyleOverrides = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  tab-size: 4;\n  background-color: ", ";\n\n  &:hover {\n    button {\n      opacity: 1;\n    }\n  }\n\n  button {\n    opacity: 0;\n    transition: opacity 0.2s ease 0s;\n  }\n\n  ", " {\n    font-size: ", ";\n    line-height: 1.5rem;\n    background-image: ", ";\n    background-attachment: local, local, local, local, scroll, scroll, scroll,\n      scroll;\n    background-position: 0 0, 0 0, 100% 0, 100% 0, 100% 0, 100% 0, 0 0, 0 0;\n  }\n"])), "var(--ds-surface-raised, ".concat(_colors.N20, ")"), _styles.CodeBlockSharedCssClassName.DS_CODEBLOCK, (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), (0, _editorSharedStyles.overflowShadow)({
   leftCoverWidth: "var(--ds-space-300, 24px)"
 }));

package/dist/cjs/react/nodes/codeBlock/components/lightWeightCodeBlock.js

@@ -17,6 +17,7 @@ var _templateObject, _templateObject2;
 /** @jsx jsx */
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 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 && Object.prototype.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; }
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
 var lightWeightCodeBlockStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    cursor: text;\n  }\n"])), _styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER);
 var LightWeightCodeBlockCssClassName = exports.LightWeightCodeBlockCssClassName = {
   CONTAINER: 'light-weight-code-block'
@@ -28,6 +29,7 @@ var getLightWeightCodeBlockStylesForRootRendererStyleSheet = exports.getLightWei
   // lightweight codeblock containers will not be targeted.
   // NOTE: This must be added after other .code-block styles in the root
   // Renderer stylesheet.
+  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
   return (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    .", "\n      > .", "\n      .", " {\n      margin-top: ", ";\n    }\n  "])), _consts.RendererCssClassName.DOCUMENT, LightWeightCodeBlockCssClassName.CONTAINER, _styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, _editorSharedStyles.blockNodesVerticalMargin);
 };
 var LightWeightCodeBlock = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {

package/dist/cjs/react/nodes/heading-anchor.js

@@ -14,7 +14,6 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
@@ -24,7 +23,6 @@ var _link = _interopRequireDefault(require("@atlaskit/icon/glyph/link"));
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _reactIntlNext = require("react-intl-next");
 var _messages = require("../../messages");
-var _templateObject;
 var _excluded = ["children"];
 /** @jsx jsx */
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
@@ -38,7 +36,15 @@ var CopyAnchorWrapperWithRef = /*#__PURE__*/_react.default.forwardRef(function (
     ref: ref
   }), children);
 });
-var copyAnchorButtonStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: inline;\n  outline: none;\n  background-color: transparent;\n  border: none;\n  color: ", ";\n  cursor: pointer;\n  right: 0;\n"])), "var(--ds-icon, ".concat(_colors.N500, ")"));
+var copyAnchorButtonStyles = (0, _react2.css)({
+  display: 'inline',
+  outline: 'none',
+  backgroundColor: 'transparent',
+  border: 'none',
+  color: "var(--ds-icon, ".concat(_colors.N500, ")"),
+  cursor: 'pointer',
+  right: 0
+});
 var HeadingAnchor = /*#__PURE__*/function (_React$PureComponent) {
   (0, _inherits2.default)(HeadingAnchor, _React$PureComponent);
   var _super = _createSuper(HeadingAnchor);

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

@@ -18,7 +18,9 @@ var _getCardClickHandler = require("../utils/getCardClickHandler");
 var _analyticsNext = require("@atlaskit/analytics-next");
 /** @jsx jsx */
 
-var annotatedCard = (0, _platformFeatureFlags.getBooleanFF)('platform.editor.allow-inline-comments-for-inline-nodes') ? (0, _react.css)({
+var annotatedCard = (0, _react.css)({
+  // This is expected to be reworked as part of https://team.atlassian.com/project/ATLAS-61846/updates
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
   "[data-mark-type='annotation'][data-mark-annotation-state='active'] &": {
     background: "var(--ds-background-accent-yellow-subtler, ".concat(_colors.Y75, ")"),
     borderBottom: "2px solid ".concat("var(--ds-border-accent-yellow, ".concat(_colors.Y300, ")")),
@@ -26,7 +28,7 @@ var annotatedCard = (0, _platformFeatureFlags.getBooleanFF)('platform.editor.all
     cursor: 'pointer',
     padding: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-025, 2px)")
   }
-}) : '';
+});
 var InlineCard = function InlineCard(props) {
   var url = props.url,
     data = props.data,
@@ -54,6 +56,31 @@ var InlineCard = function InlineCard(props) {
     location: 'renderer'
   };
   if (ssr && url) {
+    // platform.editor.allow-inline-comments-for-inline-nodes requires this change to work -- however this feature flag is only intended to go to HELLO (and is expected to last for Q4).
+    // platform.editor.renderer-inline-card-ssr-fix_kqcwl is the feature flag that allows this change to be safely released more widely.
+    // Once platform.editor.renderer-inline-card-ssr-fix_kqcwl reaches 100% we can remove both checks
+    if (
+    // eslint-disable-next-line @atlaskit/platform/no-invalid-feature-flag-usage
+    (0, _platformFeatureFlags.getBooleanFF)('platform.editor.renderer-inline-card-ssr-fix_kqcwl') ||
+    // eslint-disable-next-line @atlaskit/platform/no-invalid-feature-flag-usage
+    (0, _platformFeatureFlags.getBooleanFF)('platform.editor.allow-inline-comments-for-inline-nodes')) {
+      return (0, _react.jsx)("span", {
+        "data-inline-card": true,
+        "data-card-data": data ? JSON.stringify(data) : undefined,
+        "data-card-url": url,
+        css: annotatedCard
+      }, (0, _react.jsx)(_analyticsNext.AnalyticsContext, {
+        data: analyticsData
+      }, (0, _react.jsx)(_ssr.CardSSR, {
+        appearance: "inline",
+        url: url,
+        showAuthTooltip: showAuthTooltip,
+        showHoverPreview: !hideHoverPreview,
+        actionOptions: actionOptions,
+        showServerActions: showServerActions,
+        onClick: onClick
+      })));
+    }
     return (0, _react.jsx)(_analyticsNext.AnalyticsContext, {
       data: analyticsData
     }, (0, _react.jsx)(_ssr.CardSSR, {
@@ -78,7 +105,7 @@ var InlineCard = function InlineCard(props) {
     "data-inline-card": true,
     "data-card-data": data ? JSON.stringify(data) : undefined,
     "data-card-url": url,
-    css: annotatedCard
+    css: (0, _platformFeatureFlags.getBooleanFF)('platform.editor.allow-inline-comments-for-inline-nodes') ? annotatedCard : undefined
   }, (0, _react.jsx)(_fallback.CardErrorBoundary, (0, _extends2.default)({
     unsupportedComponent: _ui.UnsupportedInline
   }, cardProps), (0, _react.jsx)(_smartCard.Card, (0, _extends2.default)({

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

@@ -5,13 +5,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = LayoutSection;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
 var _ui = require("@atlaskit/editor-common/ui");
-var _templateObject;
 /** @jsx jsx */
-var layoutColumnClearMarginTopStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n"])), _ui.clearNextSiblingMarginTopStyle, _ui.clearNextSiblingBlockMarkMarginTopStyle);
+
+var layoutColumnClearMarginTopStyles = (0, _react2.css)(_ui.clearNextSiblingMarginTopStyle, _ui.clearNextSiblingBlockMarkMarginTopStyle);
 function LayoutSection(props) {
   return (0, _react2.jsx)("div", {
     "data-layout-column": true,

package/dist/cjs/react/nodes/mediaSingle/styles.js

@@ -1,13 +1,17 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.uiMediaSingleLayoutStyles = exports.uiMediaSingleBaseStyles = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
-var _templateObject, _templateObject2;
 /** @jsx jsx */
-var uiMediaSingleBaseStyles = exports.uiMediaSingleBaseStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  transition: all 0.1s linear;\n"])));
-var uiMediaSingleLayoutStyles = exports.uiMediaSingleLayoutStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: 50%;\n  transform: translateX(-50%);\n"])));
+
+var uiMediaSingleBaseStyles = exports.uiMediaSingleBaseStyles = (0, _react.css)({
+  transition: 'all 0.1s linear'
+});
+var uiMediaSingleLayoutStyles = exports.uiMediaSingleLayoutStyles = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+  marginLeft: '50%',
+  transform: 'translateX(-50%)'
+});

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

@@ -50,6 +50,8 @@ var useMultiBodiedExtensionActions = function useMultiBodiedExtensionActions(_re
   }, [updateActiveChild, children]);
   return actions;
 };
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
 var navigationCssExtended = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n  margin-left: 0 !important;\n  margin-right: 0 !important;\n  .mbe-add-tab-button,\n  .mbe-remove-tab {\n    display: none;\n  }\n"])), _ui.sharedMultiBodiedExtensionStyles.mbeNavigation);
 var MultiBodiedExtension = function MultiBodiedExtension(props) {
   var children = props.children,
@@ -78,6 +80,7 @@ var MultiBodiedExtension = function MultiBodiedExtension(props) {
     updateActiveChild: updateActiveChild,
     children: children
   });
+  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
   var containerCssExtended = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    ", ";\n    .ak-renderer-extension {\n      margin-top: 0 !important;\n    }\n\n    [data-layout='full-width'],\n    [data-layout='wide'] {\n      .multiBodiedExtension-navigation {\n        border-right: 3px solid ", " !important;\n      }\n    }\n\n    .multiBodiedExtension--frames\n      > [data-extension-frame='true']:nth-of-type(", ") {\n      ", "\n      margin-left: 0;\n      margin-right: 0;\n    }\n  "])), _ui.sharedMultiBodiedExtensionStyles.mbeExtensionContainer, "var(--ds-border, ".concat(_colors.N40, ")"), activeChildIndex + 1, _ui.sharedMultiBodiedExtensionStyles.extensionFrameContent);
   var isTopLevel = path.length < 1;
   var centerAlignClass = isTopLevel && ['wide', 'full-width'].includes(layout) ? _consts.RendererCssClassName.EXTENSION_CENTER_ALIGN : '';
@@ -119,7 +122,9 @@ var MultiBodiedExtension = function MultiBodiedExtension(props) {
     }, children));
   }
   return (0, _react.jsx)("section", {
-    className: "multiBodiedExtension--container",
+    className: "multiBodiedExtension--container"
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    ,
     css: containerCssExtended,
     "data-testid": "multiBodiedExtension--container",
     "data-active-child-index": activeChildIndex,

package/dist/cjs/ui/Expand.js

@@ -24,44 +24,70 @@ var _events = require("../analytics/events");
 var _utils = require("../utils");
 var _activeHeaderIdProvider = require("./active-header-id-provider");
 var _excluded = ["expanded"];
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var _templateObject, _templateObject2, _templateObject3;
 /** @jsx jsx */
 // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 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 && Object.prototype.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 titleStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  outline: none;\n  border: none;\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: normal;\n  display: flex;\n  flex: 1;\n  margin: 0;\n  padding: 0 0 0 ", ";\n  text-align: left;\n"])), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), _editorSharedStyles.akEditorLineHeight, "var(--ds-space-050, 4px)");
+var titleStyles = (0, _react.css)({
+  outline: 'none',
+  border: 'none',
+  fontSize: (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()),
+  lineHeight: _editorSharedStyles.akEditorLineHeight,
+  fontWeight: 'normal',
+  display: 'flex',
+  flex: 1,
+  margin: 0,
+  padding: "0 0 0 ".concat("var(--ds-space-050, 4px)"),
+  textAlign: 'left'
+});
 var Container = function Container(props) {
   var paddingBottom = props.expanded ? "var(--ds-space-100, 8px)" : "var(--ds-space-0, 0px)";
   var sharedContainerStyles = _ui.sharedExpandStyles.containerStyles(props);
+
+  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
   var styles = function styles() {
-    return (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    ", "\n    padding: 0;\n    padding-bottom: ", ";\n  "])), sharedContainerStyles(), paddingBottom);
+    return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    ", "\n    padding: 0;\n    padding-bottom: ", ";\n  "])), sharedContainerStyles(), paddingBottom);
   };
-  return (0, _react.jsx)("div", (0, _extends2.default)({
-    css: styles
-  }, props), props.children);
+  return (
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    (0, _react.jsx)("div", (0, _extends2.default)({
+      css: styles
+    }, props), props.children)
+  );
 };
 var TitleContainer = function TitleContainer(props) {
   var paddingBottom = !props.expanded ? "var(--ds-space-100, 8px)" : "var(--ds-space-0, 0px)";
+
+  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
   var styles = function styles() {
-    return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    ", "\n    padding: ", ";\n    padding-bottom: ", ";\n  "])), _ui.sharedExpandStyles.titleContainerStyles(), "var(--ds-space-100, 8px)", paddingBottom);
+    return (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    ", "\n    padding: ", ";\n    padding-bottom: ", ";\n  "])), _ui.sharedExpandStyles.titleContainerStyles(), "var(--ds-space-100, 8px)", paddingBottom);
   };
   var expanded = props.expanded,
     buttonProps = (0, _objectWithoutProperties2.default)(props, _excluded);
-  return (0, _react.jsx)("button", (0, _extends2.default)({
-    type: "button",
-    css: styles
-  }, buttonProps), props.children);
+  return (
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    (0, _react.jsx)("button", (0, _extends2.default)({
+      type: "button",
+      css: styles
+    }, buttonProps), props.children)
+  );
 };
 TitleContainer.displayName = 'TitleContainerButton';
 var ContentContainer = function ContentContainer(props) {
   var sharedContentStyles = _ui.sharedExpandStyles.contentStyles(props);
   var visibility = props.expanded ? 'visible' : 'hidden';
+
+  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression  -- needs manual remediation
   var styles = function styles() {
-    return (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    ", ";\n    padding-right: ", ";\n    padding-left: ", ";\n    visibility: ", ";\n  "])), sharedContentStyles(), "var(--ds-space-200, 16px)", "var(--ds-space-400, 32px)", visibility);
+    return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    ", ";\n    padding-right: ", ";\n    padding-left: ", ";\n    visibility: ", ";\n  "])), sharedContentStyles(), "var(--ds-space-200, 16px)", "var(--ds-space-400, 32px)", visibility);
   };
-  return (0, _react.jsx)("div", (0, _extends2.default)({
-    css: styles
-  }, props), props.children);
+  return (
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    (0, _react.jsx)("div", (0, _extends2.default)({
+      css: styles
+    }, props), props.children)
+  );
 };
 function fireExpandToggleAnalytics(nodeType, expanded, fireAnalyticsEvent) {
   if (!fireAnalyticsEvent) {

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

@@ -55,7 +55,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 var NORMAL_SEVERITY_THRESHOLD = exports.NORMAL_SEVERITY_THRESHOLD = 2000;
 var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "109.19.4";
+var packageVersion = "109.20.0";
 var Renderer = exports.Renderer = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(Renderer, _PureComponent);
   var _super = _createSuper(Renderer);

package/dist/cjs/ui/Renderer/style.js

@@ -23,6 +23,7 @@ var _headingAnchor = require("../../react/nodes/heading-anchor");
 var _lightWeightCodeBlock = require("../../react/nodes/codeBlock/components/lightWeightCodeBlock");
 var _table = require("../../react/nodes/table");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
+/* eslint-disable @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation */
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 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 && Object.prototype.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; }
@@ -33,7 +34,7 @@ var telepointerStyles = function telepointerStyles() {
   var _getGlobalTheme = (0, _tokens.getGlobalTheme)(),
     colorMode = _getGlobalTheme.colorMode;
 
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
   return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    #", " {\n      display: inline-block;\n      position: relative;\n      width: 1.5px;\n      height: 25px;\n      background: linear-gradient(\n        45deg,\n        ", " -12.02%,\n        ", " 19.18%,\n        ", " 71.87%\n      );\n      margin-left: ", ";\n\n      &::after {\n        content: 'AI';\n        position: absolute;\n        display: block;\n        top: 0;\n        left: 0;\n        font-size: 10px;\n        font-weight: 700;\n        width: 12.5px;\n        height: 13px;\n        padding-top: 1px;\n        padding-left: 1.5px;\n        line-height: initial;\n        border-radius: 0px 2px 2px 0px;\n        color: ", ";\n        background: linear-gradient(\n          45deg,\n          ", " -57%,\n          ", " 71.87%\n        );\n      }\n    }\n  "])), TELEPOINTER_ID, colorMode === 'dark' ? '#f5cd47' : '#f8e6a0', colorMode === 'dark' ? '#60c6d2' : '#8bdbe5', colorMode === 'dark' ? '#388bff' : '#0c66e4', "var(--ds-space-025, 2px)", "var(--ds-text-inverse, white)", colorMode === 'dark' ? '#60c6d2' : '#8bdbe5', colorMode === 'dark' ? '#388bff' : '#0c66e4');
 };
 var getLineHeight = function getLineHeight(fontCode) {

package/dist/cjs/ui/Renderer/truncated-wrapper.js

@@ -10,15 +10,25 @@ var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/creat
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
 var _react2 = require("react");
-var _templateObject;
-/** @jsx jsx */
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /** @jsx jsx */
 var fadeOutStyles = function fadeOutStyles(maxHeight, top, backgroundColor) {
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  overflow-y: hidden;\n  max-height: ", "px;\n  &::after {\n    content: '';\n    position: absolute;\n    top: ", "px;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    background-image: linear-gradient(\n      ", ",\n      ", "\n    );\n  }\n"])), maxHeight, top, "var(--ds-background-neutral-subtle, rgba(255, 255, 255, 0))", backgroundColor);
+  return (0, _react.css)({
+    position: 'relative',
+    overflowY: 'hidden',
+    maxHeight: "".concat(maxHeight, "px"),
+    '&::after': {
+      content: "''",
+      position: 'absolute',
+      top: "".concat(top, "px"),
+      bottom: 0,
+      left: 0,
+      right: 0,
+      backgroundImage: "linear-gradient( ".concat("var(--ds-background-neutral-subtle, rgba(255, 255, 255, 0))", ", ", backgroundColor, " )")
+    }
+  });
 };
 var FadeOut = function FadeOut(props) {
   var children = props.children,
@@ -27,6 +37,7 @@ var FadeOut = function FadeOut(props) {
     height = props.height;
   var top = height - fadeHeight;
   var styles = fadeOutStyles(height, top, backgroundColor);
+  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
   return (0, _react.jsx)("div", {
     css: styles
   }, children);

package/dist/cjs/ui/SortingIcon.js

@@ -13,7 +13,7 @@ var _types = require("@atlaskit/editor-common/types");
 var _messages = require("../messages");
 var _reactIntlNext = require("react-intl-next");
 var _consts = require("../consts");
-var _templateObject, _templateObject2, _templateObject3;
+var _templateObject, _templateObject2;
 /** @jsx jsx */
 var StatusClassNames = exports.StatusClassNames = /*#__PURE__*/function (StatusClassNames) {
   StatusClassNames["ASC"] = "sorting-icon-svg__asc";
@@ -21,14 +21,35 @@ var StatusClassNames = exports.StatusClassNames = /*#__PURE__*/function (StatusC
   StatusClassNames["NO_ORDER"] = "sorting-icon-svg__no_order";
   StatusClassNames["SORTING_NOT_ALLOWED"] = "sorting-icon-svg__not-allowed";
   return StatusClassNames;
-}({});
+}({}); // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
 var buttonStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  display: flex;\n  height: 28px;\n  width: 28px;\n  margin: ", ";\n  right: 0;\n  top: 0;\n  border: 2px solid ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n  }\n\n  &.", "__not-allowed {\n    cursor: not-allowed;\n  }\n"])), "var(--ds-space-075, 6px)", "var(--ds-border, #fff)", "var(--ds-border-radius-100, 4px)", "var(--ds-surface-overlay, ".concat(_colors.N20, ")"), "var(--ds-surface-overlay-hovered, ".concat(_colors.N30, ")"), "var(--ds-surface-overlay-pressed, rgba(179, 212, 255, 0.6))", _consts.RendererCssClassName.SORTABLE_COLUMN_ICON);
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
 var iconWrapperStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  width: 8px;\n  height: 12px;\n  transition: transform 0.3s cubic-bezier(0.15, 1, 0.3, 1);\n  transform-origin: 50% 50%;\n  display: flex;\n  justify-content: center;\n\n  &.", " {\n    transform: rotate(-180deg);\n  }\n\n  &.", "-inactive {\n    opacity: 0.7;\n  }\n"])), StatusClassNames.DESC, _consts.RendererCssClassName.SORTABLE_COLUMN_ICON);
 
 // The icon is created with CSS due to the following Firefox issue: https://product-fabric.atlassian.net/browse/ED-8001
 // The TL;DR is that svg's in tables mess up how HTML is copied in Firefox. Using a styled div instead solves the problem.
 // For this reason, svg's should be avoided in tables until this issue is fixed: https://bugzilla.mozilla.org/show_bug.cgi?id=1664350
-var iconStyles = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  height: 100%;\n  width: 2px;\n  border-radius: 50px;\n  background: ", ";\n\n  &::before,\n  &::after {\n    background: ", ";\n    content: '';\n    height: 2px;\n    width: 6px;\n    position: absolute;\n    border-radius: 50px;\n  }\n\n  &::before {\n    transform: rotate(45deg) translate(3.4px, 8.5px);\n  }\n\n  &::after {\n    transform: rotate(-45deg) translate(-6.3px, 5.7px);\n  }\n"])), "var(--ds-icon, #42526E)", "var(--ds-icon, #42526E)");
+var iconStyles = (0, _react.css)({
+  height: '100%',
+  width: '2px',
+  borderRadius: '50px',
+  background: "var(--ds-icon, #42526E)",
+  '&::before, &::after': {
+    background: "var(--ds-icon, #42526E)",
+    content: "''",
+    height: '2px',
+    width: '6px',
+    position: 'absolute',
+    borderRadius: '50px'
+  },
+  '&::before': {
+    transform: 'rotate(45deg) translate(3.4px, 8.5px)'
+  },
+  '&::after': {
+    transform: 'rotate(-45deg) translate(-6.3px, 5.7px)'
+  }
+});
 var getIconClassName = function getIconClassName(isSortingAllowed, sortOrdered) {
   var activated = sortOrdered !== _types.SortOrder.NO_ORDER;
   var activeStatusClass = "".concat(_consts.RendererCssClassName.SORTABLE_COLUMN_ICON, "-").concat(activated ? 'active' : 'inactive');

package/dist/es2019/react/marks/alignment.js

@@ -4,12 +4,17 @@ import React from 'react';
 import { css, jsx } from '@emotion/react';
 import { alignmentPositionMap } from '@atlaskit/adf-schema';
 const MarkWrapper = props => {
-  const styles = props['data-align'] ? css`
+  const styles = props['data-align'] ?
+  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
+  css`
         text-align: ${alignmentPositionMap[props['data-align']]};
       ` : '';
-  return jsx("div", _extends({
-    css: styles
-  }, props), props.children);
+  return (
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    jsx("div", _extends({
+      css: styles
+    }, props), props.children)
+  );
 };
 export default function Alignment(props) {
   return jsx(MarkWrapper, {

package/dist/es2019/react/marks/breakout.js

@@ -3,11 +3,12 @@ import { css, jsx } from '@emotion/react';
 import { WidthConsumer } from '@atlaskit/editor-common/ui';
 import { calcBreakoutWidth } from '@atlaskit/editor-common/utils';
 import { blockNodesVerticalMargin } from '@atlaskit/editor-shared-styles';
-export const wrapperStyles = css`
-  margin: ${blockNodesVerticalMargin} 0;
-  margin-left: 50%;
-  transform: translateX(-50%);
-`;
+export const wrapperStyles = css({
+  margin: `${blockNodesVerticalMargin} 0`,
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+  marginLeft: '50%',
+  transform: 'translateX(-50%)'
+});
 export default function Breakout(props) {
   return jsx(WidthConsumer, null, ({
     width

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

@@ -8,18 +8,16 @@ import { PLATFORM, MODE } from '../../analytics/events';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import LinkUrl from '@atlaskit/smart-card/link-url';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
-const anchorStyles = css`
-  color: ${`var(--ds-link, ${B400})`};
-
-  &:hover {
-    color: ${`var(--ds-link, ${B300})`};
-    text-decoration: underline;
+const anchorStyles = css({
+  color: `var(--ds-link, ${B400})`,
+  '&:hover': {
+    color: `var(--ds-link, ${B300})`,
+    textDecoration: 'underline'
+  },
+  '&:active': {
+    color: `var(--ds-link-pressed, ${B500})`
   }
-
-  &:active {
-    color: ${`var(--ds-link-pressed, ${B500})`};
-  }
-`;
+});
 export default function Link(props) {
   const {
     href,

package/dist/es2019/react/nodes/codeBlock/components/codeBlockContainer.js

@@ -5,6 +5,8 @@ import { N20 } from '@atlaskit/theme/colors';
 import { fontSize } from '@atlaskit/theme/constants';
 import { CodeBlockSharedCssClassName } from '@atlaskit/editor-common/styles';
 import CodeBlockButtonContainer from './codeBlockButtonContainer';
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
 const codeBlockStyleOverrides = css`
   tab-size: 4;
   background-color: ${`var(--ds-surface-raised, ${N20})`};

package/dist/es2019/react/nodes/codeBlock/components/lightWeightCodeBlock.js

@@ -5,6 +5,7 @@ import { blockNodesVerticalMargin } from '@atlaskit/editor-shared-styles';
 import { codeBlockSharedStyles, CodeBlockSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { useBidiWarnings } from '../../../hooks/use-bidi-warnings';
 import { RendererCssClassName } from '../../../../consts';
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
 const lightWeightCodeBlockStyles = css`
   .${CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER} {
     cursor: text;
@@ -20,6 +21,7 @@ export const getLightWeightCodeBlockStylesForRootRendererStyleSheet = () => {
   // lightweight codeblock containers will not be targeted.
   // NOTE: This must be added after other .code-block styles in the root
   // Renderer stylesheet.
+  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
   return css`
     .${RendererCssClassName.DOCUMENT}
       > .${LightWeightCodeBlockCssClassName.CONTAINER}