@atlaskit/renderer 109.19.3 → 109.19.5

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

@@ -7,6 +7,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
 var lightWeightCodeBlockStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .", " {\n    cursor: text;\n  }\n"])), CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER);
 export var LightWeightCodeBlockCssClassName = {
   CONTAINER: 'light-weight-code-block'
@@ -18,6 +19,7 @@ export var getLightWeightCodeBlockStylesForRootRendererStyleSheet = function get
   // 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(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    .", "\n      > .", "\n      .", " {\n      margin-top: ", ";\n    }\n  "])), RendererCssClassName.DOCUMENT, LightWeightCodeBlockCssClassName.CONTAINER, CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, blockNodesVerticalMargin);
 };
 var LightWeightCodeBlock = /*#__PURE__*/forwardRef(function (_ref, ref) {

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

@@ -6,10 +6,8 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _templateObject;
 var _excluded = ["children"];
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
@@ -32,7 +30,15 @@ var CopyAnchorWrapperWithRef = /*#__PURE__*/React.forwardRef(function (props, re
     ref: ref
   }), children);
 });
-var copyAnchorButtonStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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(N500, ")"));
+var copyAnchorButtonStyles = css({
+  display: 'inline',
+  outline: 'none',
+  backgroundColor: 'transparent',
+  border: 'none',
+  color: "var(--ds-icon, ".concat(N500, ")"),
+  cursor: 'pointer',
+  right: 0
+});
 var HeadingAnchor = /*#__PURE__*/function (_React$PureComponent) {
   _inherits(HeadingAnchor, _React$PureComponent);
   var _super = _createSuper(HeadingAnchor);

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

@@ -1,10 +1,8 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
 /** @jsx jsx */
 import React from 'react';
 import { jsx, css } from '@emotion/react';
 import { WidthProvider, clearNextSiblingMarginTopStyle, clearNextSiblingBlockMarkMarginTopStyle } from '@atlaskit/editor-common/ui';
-var layoutColumnClearMarginTopStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n  ", "\n"])), clearNextSiblingMarginTopStyle, clearNextSiblingBlockMarkMarginTopStyle);
+var layoutColumnClearMarginTopStyles = css(clearNextSiblingMarginTopStyle, clearNextSiblingBlockMarkMarginTopStyle);
 export default function LayoutSection(props) {
   return jsx("div", {
     "data-layout-column": true,

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

@@ -298,9 +298,9 @@ var MediaWithDraftAnnotation = function MediaWithDraftAnnotation(props) {
     if (pos === undefined) {
       return;
     }
-    if (draftPosition !== null && draftPosition.from + 1 === pos) {
+    if (draftPosition !== null && draftPosition.from === pos) {
       setShouldApplyDraftAnnotation(true);
-      setPosition((draftPosition === null || draftPosition === void 0 ? void 0 : draftPosition.from) + 1);
+      setPosition(draftPosition === null || draftPosition === void 0 ? void 0 : draftPosition.from);
     } else if (draftPosition === null && shouldApplyDraftAnnotation) {
       setShouldApplyDraftAnnotation(false);
       setPosition(undefined);

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

@@ -1,6 +1,10 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2;
 /** @jsx jsx */
 import { css } from '@emotion/react';
-export var uiMediaSingleBaseStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  transition: all 0.1s linear;\n"])));
-export var uiMediaSingleLayoutStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin-left: 50%;\n  transform: translateX(-50%);\n"])));
+export var uiMediaSingleBaseStyles = css({
+  transition: 'all 0.1s linear'
+});
+export var uiMediaSingleLayoutStyles = css({
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+  marginLeft: '50%',
+  transform: 'translateX(-50%)'
+});

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

@@ -42,6 +42,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 = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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"])), sharedMultiBodiedExtensionStyles.mbeNavigation);
 var MultiBodiedExtension = function MultiBodiedExtension(props) {
   var children = props.children,
@@ -70,6 +72,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 = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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  "])), sharedMultiBodiedExtensionStyles.mbeExtensionContainer, "var(--ds-border, ".concat(N40, ")"), activeChildIndex + 1, sharedMultiBodiedExtensionStyles.extensionFrameContent);
   var isTopLevel = path.length < 1;
   var centerAlignClass = isTopLevel && ['wide', 'full-width'].includes(layout) ? RendererCssClassName.EXTENSION_CENTER_ALIGN : '';
@@ -111,7 +114,9 @@ var MultiBodiedExtension = function MultiBodiedExtension(props) {
     }, children));
   }
   return 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/esm/steps/index.js

@@ -1,7 +1,11 @@
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { AddMarkStep } from '@atlaskit/editor-prosemirror/transform';
 function getStartPos(element) {
   return parseInt(element.dataset.rendererStartPos || '-1', 10);
 }
+var getNodeType = function getNodeType(element) {
+  return element.dataset.nodeType;
+};
 function isPositionPointer(element) {
   return getStartPos(element) > -1;
 }
@@ -15,16 +19,6 @@ function findParent(element) {
   }
   return findParent(parentElement);
 }
-function findMediaParent(element) {
-  var parentElement = element.parentElement;
-  if (!parentElement || isRoot(parentElement)) {
-    return null;
-  }
-  if (parentElement.dataset.nodeType === 'mediaSingle') {
-    return parentElement;
-  }
-  return findParent(parentElement);
-}
 function findParentBeforePointer(element) {
   var parentElement = element.parentElement;
   if (isRoot(parentElement) || !parentElement) {
@@ -51,22 +45,39 @@ function isNodeInlineMark(node) {
 function isElementInlineMark(element) {
   return !!element && Boolean(element.dataset.rendererMark);
 }
+function isNodeInlineTextMark(node) {
+  if (node === null) {
+    return false;
+  }
+  var isInlineMark = isElementNode(node) && Boolean(node.dataset.rendererMark);
+  if (!isInlineMark) {
+    return false;
+  }
+
+  /**
+   * This checks if the element has any descendents with the data-inline-card
+   * attribute set to 'true'. If it does, we should not consider it as an
+   * inline text mark.
+   **/
+
+  if (hasInlineCardDescendant(node)) {
+    return false;
+  }
+  return true;
+}
 
 /**
- * This returns the text content of a node excluding content
- * inside inline cards (spans with data-inline-card="true").
+ * This checks all the descendents of a node and returns true if it reaches
+ * a descendant with the data-inline-card attribute set to 'true'.
  */
-function getPMTextContent(node) {
-  if (isTextNode(node)) {
-    return node.textContent;
-  }
+function hasInlineCardDescendant(node) {
   if (isElementNode(node)) {
     if (node.dataset.inlineCard === 'true') {
-      return '';
+      return true;
     }
-    return Array.from(node.childNodes).map(getPMTextContent).join('');
+    return Array.from(node.childNodes).some(hasInlineCardDescendant);
   }
-  return '';
+  return false;
 }
 function resolveNodePos(node) {
   var resolvedPos = 0;
@@ -75,10 +86,18 @@ function resolveNodePos(node) {
     if (prev && (isTextNode(prev) || isHighlightTextNode(prev))) {
       resolvedPos += (prev.textContent || '').length;
     } else if (prev) {
-      if (isNodeInlineMark(prev) && prev.textContent) {
-        resolvedPos += getPMTextContent(prev).length;
+      if (getBooleanFF('platform.editor.allow-inline-comments-for-inline-nodes')) {
+        if (isNodeInlineTextMark(prev) && prev.textContent) {
+          resolvedPos += prev.textContent.length;
+        } else {
+          resolvedPos += 1;
+        }
       } else {
-        resolvedPos += 1;
+        if (isNodeInlineMark(prev) && prev.textContent) {
+          resolvedPos += prev.textContent.length;
+        } else {
+          resolvedPos += 1;
+        }
       }
     }
     prev = prev.previousSibling;
@@ -112,9 +131,16 @@ export function resolvePos(node, offset) {
     // If our range is inside an inline node
     // We need to move our pointers to parent element
     // since we don't want to count text inside inline nodes at all
-    if (!(isElementInlineMark(preParentPointer) || isHighlightTextNode(preParentPointer))) {
-      current = current.parentElement;
-      offset = 0;
+    if (getBooleanFF('platform.editor.allow-inline-comments-for-inline-nodes')) {
+      if (!(isNodeInlineTextMark(preParentPointer) || isHighlightTextNode(preParentPointer))) {
+        current = current.parentElement;
+        offset = 0;
+      }
+    } else {
+      if (!(isElementInlineMark(preParentPointer) || isHighlightTextNode(preParentPointer))) {
+        current = current.parentElement;
+        offset = 0;
+      }
     }
     resolvedPos += resolveNodePos(current);
     while (current && current.parentElement !== parent) {
@@ -134,8 +160,8 @@ export function getPosFromRange(range) {
     startOffset = range.startOffset,
     endContainer = range.endContainer,
     endOffset = range.endOffset;
-  var parent = findMediaParent(startContainer);
-  if (parent) {
+  var parent = findParent(startContainer);
+  if (parent && getNodeType(parent) === 'media') {
     var pos = getStartPos(parent);
     return {
       from: pos,

package/dist/esm/ui/Expand.js

@@ -3,7 +3,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 import _extends from "@babel/runtime/helpers/extends";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _excluded = ["expanded"];
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var _templateObject, _templateObject2, _templateObject3;
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
 import React, { useCallback, useMemo, useRef } from 'react';
@@ -19,39 +19,65 @@ import { injectIntl } from 'react-intl-next';
 import { MODE, PLATFORM } from '../analytics/events';
 import { getPlatform } from '../utils';
 import { ActiveHeaderIdConsumer } from './active-header-id-provider';
-var titleStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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"])), relativeFontSizeToBase16(fontSize()), akEditorLineHeight, "var(--ds-space-050, 4px)");
+var titleStyles = css({
+  outline: 'none',
+  border: 'none',
+  fontSize: relativeFontSizeToBase16(fontSize()),
+  lineHeight: 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 = sharedExpandStyles.containerStyles(props);
+
+  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
   var styles = function styles() {
-    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    ", "\n    padding: 0;\n    padding-bottom: ", ";\n  "])), sharedContainerStyles(), paddingBottom);
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    ", "\n    padding: 0;\n    padding-bottom: ", ";\n  "])), sharedContainerStyles(), paddingBottom);
   };
-  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)
+  );
 };
 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 css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    ", "\n    padding: ", ";\n    padding-bottom: ", ";\n  "])), sharedExpandStyles.titleContainerStyles(), "var(--ds-space-100, 8px)", paddingBottom);
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    ", "\n    padding: ", ";\n    padding-bottom: ", ";\n  "])), sharedExpandStyles.titleContainerStyles(), "var(--ds-space-100, 8px)", paddingBottom);
   };
   var expanded = props.expanded,
     buttonProps = _objectWithoutProperties(props, _excluded);
-  return jsx("button", _extends({
-    type: "button",
-    css: styles
-  }, buttonProps), props.children);
+  return (
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    jsx("button", _extends({
+      type: "button",
+      css: styles
+    }, buttonProps), props.children)
+  );
 };
 TitleContainer.displayName = 'TitleContainerButton';
 var ContentContainer = function ContentContainer(props) {
   var sharedContentStyles = 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 css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    ", ";\n    padding-right: ", ";\n    padding-left: ", ";\n    visibility: ", ";\n  "])), sharedContentStyles(), "var(--ds-space-200, 16px)", "var(--ds-space-400, 32px)", visibility);
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    ", ";\n    padding-right: ", ";\n    padding-left: ", ";\n    visibility: ", ";\n  "])), sharedContentStyles(), "var(--ds-space-200, 16px)", "var(--ds-space-400, 32px)", visibility);
   };
-  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)
+  );
 };
 function fireExpandToggleAnalytics(nodeType, expanded, fireAnalyticsEvent) {
   if (!fireAnalyticsEvent) {

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

@@ -46,7 +46,7 @@ import { EditorMediaClientProvider } from '../../react/utils/EditorMediaClientPr
 export var NORMAL_SEVERITY_THRESHOLD = 2000;
 export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "109.19.3";
+var packageVersion = "109.19.5";
 export var Renderer = /*#__PURE__*/function (_PureComponent) {
   _inherits(Renderer, _PureComponent);
   var _super = _createSuper(Renderer);

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

@@ -1,5 +1,6 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 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 */
 
 import { css } from '@emotion/react';
@@ -25,7 +26,7 @@ var telepointerStyles = function telepointerStyles() {
   var _getGlobalTheme = 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 css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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/esm/ui/Renderer/truncated-wrapper.js

@@ -3,15 +3,26 @@ import _createClass from "@babel/runtime/helpers/createClass";
 import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
 import { Component } from 'react';
 var fadeOutStyles = function fadeOutStyles(maxHeight, top, backgroundColor) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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 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,
@@ -20,6 +31,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 jsx("div", {
     css: styles
   }, children);

package/dist/esm/ui/SortingIcon.js

@@ -1,5 +1,5 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3;
+var _templateObject, _templateObject2;
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
 import Tooltip from '@atlaskit/tooltip';
@@ -15,13 +15,36 @@ export var StatusClassNames = /*#__PURE__*/function (StatusClassNames) {
   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 = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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(N20, ")"), "var(--ds-surface-overlay-hovered, ".concat(N30, ")"), "var(--ds-surface-overlay-pressed, rgba(179, 212, 255, 0.6))", RendererCssClassName.SORTABLE_COLUMN_ICON);
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
 var iconWrapperStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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, 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 = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\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 = 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 !== SortOrder.NO_ORDER;
   var activeStatusClass = "".concat(RendererCssClassName.SORTABLE_COLUMN_ICON, "-").concat(activated ? 'active' : 'inactive');

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

@@ -1,4 +1,4 @@
 import { jsx } from '@emotion/react';
-import { AlignmentAttributes } from '@atlaskit/adf-schema';
-import { MarkProps } from '../types';
+import type { AlignmentAttributes } from '@atlaskit/adf-schema';
+import type { MarkProps } from '../types';
 export default function Alignment(props: MarkProps<AlignmentAttributes>): jsx.JSX.Element;

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

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
-import { BreakoutMarkAttrs } from '@atlaskit/adf-schema';
-import { MarkProps } from '../types';
+import type { BreakoutMarkAttrs } from '@atlaskit/adf-schema';
+import type { MarkProps } from '../types';
 export declare const wrapperStyles: import("@emotion/react").SerializedStyles;
 export default function Breakout(props: MarkProps<BreakoutMarkAttrs>): jsx.JSX.Element;

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

@@ -1,6 +1,6 @@
 import { jsx } from '@emotion/react';
-import { LinkAttributes } from '@atlaskit/adf-schema';
-import { MarkProps } from '../types';
+import type { LinkAttributes } from '@atlaskit/adf-schema';
+import type { MarkProps } from '../types';
 interface LinkProps extends LinkAttributes {
     target?: string;
     isMediaLink?: boolean;

package/dist/types-ts4.5/react/marks/alignment.d.ts

@@ -1,4 +1,4 @@
 import { jsx } from '@emotion/react';
-import { AlignmentAttributes } from '@atlaskit/adf-schema';
-import { MarkProps } from '../types';
+import type { AlignmentAttributes } from '@atlaskit/adf-schema';
+import type { MarkProps } from '../types';
 export default function Alignment(props: MarkProps<AlignmentAttributes>): jsx.JSX.Element;

package/dist/types-ts4.5/react/marks/breakout.d.ts

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
-import { BreakoutMarkAttrs } from '@atlaskit/adf-schema';
-import { MarkProps } from '../types';
+import type { BreakoutMarkAttrs } from '@atlaskit/adf-schema';
+import type { MarkProps } from '../types';
 export declare const wrapperStyles: import("@emotion/react").SerializedStyles;
 export default function Breakout(props: MarkProps<BreakoutMarkAttrs>): jsx.JSX.Element;

package/dist/types-ts4.5/react/marks/link.d.ts

@@ -1,6 +1,6 @@
 import { jsx } from '@emotion/react';
-import { LinkAttributes } from '@atlaskit/adf-schema';
-import { MarkProps } from '../types';
+import type { LinkAttributes } from '@atlaskit/adf-schema';
+import type { MarkProps } from '../types';
 interface LinkProps extends LinkAttributes {
     target?: string;
     isMediaLink?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/renderer",
-  "version": "109.19.3",
+  "version": "109.19.5",
   "description": "Renderer component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -24,14 +24,14 @@
     "runReact18": true
   },
   "dependencies": {
-    "@atlaskit/adf-schema": "^35.9.0",
+    "@atlaskit/adf-schema": "^35.9.2",
     "@atlaskit/adf-utils": "^19.0.0",
     "@atlaskit/analytics-listeners": "^8.9.0",
     "@atlaskit/analytics-namespaced-context": "^6.9.0",
     "@atlaskit/analytics-next": "^9.2.0",
-    "@atlaskit/button": "^17.12.0",
+    "@atlaskit/button": "^17.13.0",
     "@atlaskit/code": "^15.1.0",
-    "@atlaskit/editor-common": "^78.29.0",
+    "@atlaskit/editor-common": "^78.30.0",
     "@atlaskit/editor-json-transformer": "^8.10.0",
     "@atlaskit/editor-palette": "1.5.3",
     "@atlaskit/editor-prosemirror": "3.0.0",
@@ -44,10 +44,10 @@
     "@atlaskit/media-client-react": "^2.0.0",
     "@atlaskit/media-common": "^11.1.0",
     "@atlaskit/media-filmstrip": "^47.0.0",
-    "@atlaskit/media-ui": "^25.7.0",
+    "@atlaskit/media-ui": "^25.9.0",
     "@atlaskit/media-viewer": "^48.4.0",
     "@atlaskit/platform-feature-flags": "^0.2.0",
-    "@atlaskit/smart-card": "^26.56.0",
+    "@atlaskit/smart-card": "^26.57.0",
     "@atlaskit/status": "^1.4.0",
     "@atlaskit/task-decision": "^17.9.0",
     "@atlaskit/theme": "^12.7.0",