@atlaskit/renderer 109.19.3 → 109.19.5

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}

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

@@ -20,15 +20,15 @@ const CopyAnchorWrapperWithRef = /*#__PURE__*/React.forwardRef((props, ref) => {
     ref: ref
   }), children);
 });
-const copyAnchorButtonStyles = css`
-  display: inline;
-  outline: none;
-  background-color: transparent;
-  border: none;
-  color: ${`var(--ds-icon, ${N500})`};
-  cursor: pointer;
-  right: 0;
-`;
+const copyAnchorButtonStyles = css({
+  display: 'inline',
+  outline: 'none',
+  backgroundColor: 'transparent',
+  border: 'none',
+  color: `var(--ds-icon, ${N500})`,
+  cursor: 'pointer',
+  right: 0
+});
 class HeadingAnchor extends React.PureComponent {
   constructor(...args) {
     super(...args);

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

@@ -2,10 +2,7 @@
 import React from 'react';
 import { jsx, css } from '@emotion/react';
 import { WidthProvider, clearNextSiblingMarginTopStyle, clearNextSiblingBlockMarkMarginTopStyle } from '@atlaskit/editor-common/ui';
-const layoutColumnClearMarginTopStyles = css`
-  ${clearNextSiblingMarginTopStyle}
-  ${clearNextSiblingBlockMarkMarginTopStyle}
-`;
+const layoutColumnClearMarginTopStyles = css(clearNextSiblingMarginTopStyle, clearNextSiblingBlockMarkMarginTopStyle);
 export default function LayoutSection(props) {
   return jsx("div", {
     "data-layout-column": true,

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

@@ -281,9 +281,9 @@ const 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/es2019/react/nodes/mediaSingle/styles.js

@@ -1,9 +1,10 @@
 /** @jsx jsx */
 import { css } from '@emotion/react';
-export const uiMediaSingleBaseStyles = css`
-  transition: all 0.1s linear;
-`;
-export const uiMediaSingleLayoutStyles = css`
-  margin-left: 50%;
-  transform: translateX(-50%);
-`;
+export const uiMediaSingleBaseStyles = css({
+  transition: 'all 0.1s linear'
+});
+export const uiMediaSingleLayoutStyles = css({
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+  marginLeft: '50%',
+  transform: 'translateX(-50%)'
+});

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

@@ -40,6 +40,8 @@ const useMultiBodiedExtensionActions = ({
   }, [updateActiveChild, children]);
   return actions;
 };
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
 const navigationCssExtended = css`
   ${sharedMultiBodiedExtensionStyles.mbeNavigation};
   margin-left: 0 !important;
@@ -71,6 +73,7 @@ const MultiBodiedExtension = props => {
     updateActiveChild,
     children
   });
+  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
   const containerCssExtended = css`
     ${sharedMultiBodiedExtensionStyles.mbeExtensionContainer};
     .ak-renderer-extension {
@@ -132,7 +135,9 @@ const 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/es2019/steps/index.js

@@ -1,7 +1,9 @@
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { AddMarkStep } from '@atlaskit/editor-prosemirror/transform';
 function getStartPos(element) {
   return parseInt(element.dataset.rendererStartPos || '-1', 10);
 }
+const getNodeType = element => element.dataset.nodeType;
 function isPositionPointer(element) {
   return getStartPos(element) > -1;
 }
@@ -17,18 +19,6 @@ function findParent(element) {
   }
   return findParent(parentElement);
 }
-function findMediaParent(element) {
-  const {
-    parentElement
-  } = element;
-  if (!parentElement || isRoot(parentElement)) {
-    return null;
-  }
-  if (parentElement.dataset.nodeType === 'mediaSingle') {
-    return parentElement;
-  }
-  return findParent(parentElement);
-}
 function findParentBeforePointer(element) {
   const {
     parentElement
@@ -57,22 +47,39 @@ function isNodeInlineMark(node) {
 function isElementInlineMark(element) {
   return !!element && Boolean(element.dataset.rendererMark);
 }
+function isNodeInlineTextMark(node) {
+  if (node === null) {
+    return false;
+  }
+  const 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) {
   let resolvedPos = 0;
@@ -81,10 +88,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;
@@ -118,9 +133,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) {
@@ -142,8 +164,8 @@ export function getPosFromRange(range) {
     endContainer,
     endOffset
   } = range;
-  const parent = findMediaParent(startContainer);
-  if (parent) {
+  const parent = findParent(startContainer);
+  if (parent && getNodeType(parent) === 'media') {
     const pos = getStartPos(parent);
     return {
       from: pos,

package/dist/es2019/ui/Expand.js

@@ -14,32 +14,39 @@ import { injectIntl } from 'react-intl-next';
 import { MODE, PLATFORM } from '../analytics/events';
 import { getPlatform } from '../utils';
 import { ActiveHeaderIdConsumer } from './active-header-id-provider';
-const titleStyles = css`
-  outline: none;
-  border: none;
-  font-size: ${relativeFontSizeToBase16(fontSize())};
-  line-height: ${akEditorLineHeight};
-  font-weight: normal;
-  display: flex;
-  flex: 1;
-  margin: 0;
-  padding: 0 0 0 ${"var(--ds-space-050, 4px)"};
-  text-align: left;
-`;
+const titleStyles = css({
+  outline: 'none',
+  border: 'none',
+  fontSize: relativeFontSizeToBase16(fontSize()),
+  lineHeight: akEditorLineHeight,
+  fontWeight: 'normal',
+  display: 'flex',
+  flex: 1,
+  margin: 0,
+  padding: `0 0 0 ${"var(--ds-space-050, 4px)"}`,
+  textAlign: 'left'
+});
 const Container = props => {
   const paddingBottom = props.expanded ? "var(--ds-space-100, 8px)" : "var(--ds-space-0, 0px)";
   const sharedContainerStyles = sharedExpandStyles.containerStyles(props);
+
+  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
   const styles = () => css`
     ${sharedContainerStyles()}
     padding: 0;
     padding-bottom: ${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)
+  );
 };
 const TitleContainer = props => {
   const 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
   const styles = () => css`
     ${sharedExpandStyles.titleContainerStyles()}
     padding: ${"var(--ds-space-100, 8px)"};
@@ -49,24 +56,32 @@ const TitleContainer = props => {
     expanded,
     ...buttonProps
   } = props;
-  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';
 const ContentContainer = props => {
   const sharedContentStyles = sharedExpandStyles.contentStyles(props);
   const visibility = props.expanded ? 'visible' : 'hidden';
+
+  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression  -- needs manual remediation
   const styles = () => css`
     ${sharedContentStyles()};
     padding-right: ${"var(--ds-space-200, 16px)"};
     padding-left: ${"var(--ds-space-400, 32px)"};
     visibility: ${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/es2019/ui/Renderer/index.js

@@ -36,7 +36,7 @@ import { EditorMediaClientProvider } from '../../react/utils/EditorMediaClientPr
 export const NORMAL_SEVERITY_THRESHOLD = 2000;
 export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "109.19.3";
+const packageVersion = "109.19.5";
 export class Renderer extends PureComponent {
   constructor(props) {
     super(props);

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

@@ -1,3 +1,4 @@
+/* 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';
@@ -24,7 +25,7 @@ const telepointerStyles = () => {
     colorMode
   } = getGlobalTheme();
 
-  // 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`
     #${TELEPOINTER_ID} {
       display: inline-block;

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

@@ -1,23 +1,20 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
 import { Component } from 'react';
-const fadeOutStyles = (maxHeight, top, backgroundColor) => css`
-  position: relative;
-  overflow-y: hidden;
-  max-height: ${maxHeight}px;
-  &::after {
-    content: '';
-    position: absolute;
-    top: ${top}px;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    background-image: linear-gradient(
-      ${"var(--ds-background-neutral-subtle, rgba(255, 255, 255, 0))"},
-      ${backgroundColor}
-    );
+const fadeOutStyles = (maxHeight, top, backgroundColor) => css({
+  position: 'relative',
+  overflowY: 'hidden',
+  maxHeight: `${maxHeight}px`,
+  '&::after': {
+    content: "''",
+    position: 'absolute',
+    top: `${top}px`,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    backgroundImage: `linear-gradient( ${"var(--ds-background-neutral-subtle, rgba(255, 255, 255, 0))"}, ${backgroundColor} )`
   }
-`;
+});
 const FadeOut = props => {
   const {
     children,
@@ -27,6 +24,7 @@ const FadeOut = props => {
   } = props;
   const top = height - fadeHeight;
   const styles = fadeOutStyles(height, top, backgroundColor);
+  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
   return jsx("div", {
     css: styles
   }, children);

package/dist/es2019/ui/SortingIcon.js

@@ -13,6 +13,8 @@ export let 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
 const buttonStyles = css`
   position: absolute;
   display: flex;
@@ -40,6 +42,8 @@ const buttonStyles = css`
     cursor: not-allowed;
   }
 `;
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
 const iconWrapperStyles = css`
   width: 8px;
   height: 12px;
@@ -60,30 +64,26 @@ const iconWrapperStyles = css`
 // 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
-const iconStyles = css`
-  height: 100%;
-  width: 2px;
-  border-radius: 50px;
-  background: ${"var(--ds-icon, #42526E)"};
-
-  &::before,
-  &::after {
-    background: ${"var(--ds-icon, #42526E)"};
-    content: '';
-    height: 2px;
-    width: 6px;
-    position: absolute;
-    border-radius: 50px;
-  }
-
-  &::before {
-    transform: rotate(45deg) translate(3.4px, 8.5px);
-  }
-
-  &::after {
-    transform: rotate(-45deg) translate(-6.3px, 5.7px);
+const 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)'
   }
-`;
+});
 const getIconClassName = (isSortingAllowed, sortOrdered) => {
   const activated = sortOrdered !== SortOrder.NO_ORDER;
   const activeStatusClass = `${RendererCssClassName.SORTABLE_COLUMN_ICON}-${activated ? 'active' : 'inactive'}`;

package/dist/esm/actions/index.js

@@ -223,7 +223,7 @@ var RendererActions = /*#__PURE__*/function () {
 
       // If from points to a node position,
       // we need to 1 position before it for nodeAt to return the node itself
-      var beforeNodePos = Math.max(from, 0);
+      var beforeNodePos = Math.max(from - 1, 0);
       var possibleNode = this.doc.nodeAt(beforeNodePos);
       if ((possibleNode === null || possibleNode === void 0 ? void 0 : possibleNode.type.name) === 'media') {
         step = new AddNodeMarkStep(beforeNodePos, this.schema.marks.annotation.create({

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

@@ -6,10 +6,14 @@ import React from 'react';
 import { css, jsx } from '@emotion/react';
 import { alignmentPositionMap } from '@atlaskit/adf-schema';
 var MarkWrapper = function MarkWrapper(props) {
-  var styles = props['data-align'] ? css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        text-align: ", ";\n      "])), alignmentPositionMap[props['data-align']]) : '';
-  return jsx("div", _extends({
-    css: styles
-  }, props), props.children);
+  var styles = props['data-align'] ? // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
+  css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        text-align: ", ";\n      "])), alignmentPositionMap[props['data-align']]) : '';
+  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/esm/react/marks/breakout.js

@@ -1,11 +1,14 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
 /** @jsx jsx */
 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 var wrapperStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  margin: ", " 0;\n  margin-left: 50%;\n  transform: translateX(-50%);\n"])), blockNodesVerticalMargin);
+export var wrapperStyles = css({
+  margin: "".concat(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, function (_ref) {
     var width = _ref.width;

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

@@ -1,6 +1,4 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
 /** @jsx jsx */
 import React, { Fragment } from 'react';
 import { css, jsx } from '@emotion/react';
@@ -10,7 +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';
-var anchorStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n\n  &:hover {\n    color: ", ";\n    text-decoration: underline;\n  }\n\n  &:active {\n    color: ", ";\n  }\n"])), "var(--ds-link, ".concat(B400, ")"), "var(--ds-link, ".concat(B300, ")"), "var(--ds-link-pressed, ".concat(B500, ")"));
+var anchorStyles = css({
+  color: "var(--ds-link, ".concat(B400, ")"),
+  '&:hover': {
+    color: "var(--ds-link, ".concat(B300, ")"),
+    textDecoration: 'underline'
+  },
+  '&:active': {
+    color: "var(--ds-link-pressed, ".concat(B500, ")")
+  }
+});
 export default function Link(props) {
   var href = props.href,
     target = props.target,

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

@@ -7,6 +7,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
 var codeBlockStyleOverrides = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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(N20, ")"), CodeBlockSharedCssClassName.DS_CODEBLOCK, relativeFontSizeToBase16(fontSize()), overflowShadow({
   leftCoverWidth: "var(--ds-space-300, 24px)"
 }));