@atlaskit/editor-common 78.11.4 → 78.11.6

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

@@ -1,74 +1,51 @@
 import { css } from '@emotion/react';
 const richMediaClassName = 'rich-media-item';
 const wrappedMediaBreakoutPoint = 410;
-const mediaSingleSharedStyle = css`
-  li .${richMediaClassName} {
-    margin: 0;
-  }
-
-  /* Hack for chrome to fix media single position
-     inside a list when media is the first child */
-  &.ua-chrome li > .mediaSingleView-content-wrap::before {
-    content: '';
-    display: block;
-    height: 0;
-  }
-
-  &.ua-firefox {
-    .mediaSingleView-content-wrap {
-      user-select: none;
+const mediaSingleSharedStyle = css({
+  [`li .${richMediaClassName}`]: {
+    margin: 0
+  },
+  // Hack for chrome to fix media single position inside a list when media is the first child
+  '&.ua-chrome li > .mediaSingleView-content-wrap::before': {
+    content: "''",
+    display: 'block',
+    height: 0
+  },
+  '&.ua-firefox': {
+    '.mediaSingleView-content-wrap': {
+      userSelect: 'none'
+    },
+    '.captionView-content-wrap': {
+      userSelect: 'text'
     }
-
-    .captionView-content-wrap {
-      user-select: text;
-    }
-  }
-
-  .mediaSingleView-content-wrap[layout='center'] {
-    clear: both;
-  }
-
-  table .${richMediaClassName} {
-    margin-top: ${"var(--ds-space-150, 12px)"};
-    margin-bottom: ${"var(--ds-space-150, 12px)"};
-    clear: both;
-
-    &.image-wrap-left,
-    &.image-wrap-right {
-      clear: none;
-
-      &:first-child {
-        margin-top: ${"var(--ds-space-150, 12px)"};
+  },
+  ".mediaSingleView-content-wrap[layout='center']": {
+    clear: 'both'
+  },
+  [`table .${richMediaClassName}`]: {
+    marginTop: "var(--ds-space-150, 12px)",
+    marginBottom: "var(--ds-space-150, 12px)",
+    clear: 'both',
+    '&.image-wrap-left, &.image-wrap-right': {
+      clear: 'none',
+      '&:first-child': {
+        marginTop: "var(--ds-space-150, 12px)"
       }
     }
-  }
-
-  .${richMediaClassName}.image-wrap-right
-    + .${richMediaClassName}.image-wrap-left {
-    clear: both;
-  }
-
-  .${richMediaClassName}.image-wrap-left
-    + .${richMediaClassName}.image-wrap-right,
-    .${richMediaClassName}.image-wrap-right
-    + .${richMediaClassName}.image-wrap-left,
-    .${richMediaClassName}.image-wrap-left
-    + .${richMediaClassName}.image-wrap-left,
-    .${richMediaClassName}.image-wrap-right
-    + .${richMediaClassName}.image-wrap-right {
-    margin-right: 0;
-    margin-left: 0;
-  }
-
-  @media all and (max-width: ${wrappedMediaBreakoutPoint}px) {
-    div.mediaSingleView-content-wrap[layout='wrap-left'],
-    div.mediaSingleView-content-wrap[data-layout='wrap-left'],
-    div.mediaSingleView-content-wrap[layout='wrap-right'],
-    div.mediaSingleView-content-wrap[data-layout='wrap-right'] {
-      float: none;
-      overflow: auto;
-      margin: ${"var(--ds-space-150, 12px)"} 0;
+  },
+  [`.${richMediaClassName}.image-wrap-right + .${richMediaClassName}.image-wrap-left`]: {
+    clear: 'both'
+  },
+  [`.${richMediaClassName}.image-wrap-left + .${richMediaClassName}.image-wrap-right, .${richMediaClassName}.image-wrap-right + .${richMediaClassName}.image-wrap-left, .${richMediaClassName}.image-wrap-left + .${richMediaClassName}.image-wrap-left, .${richMediaClassName}.image-wrap-right + .${richMediaClassName}.image-wrap-right`]: {
+    marginRight: 0,
+    marginLeft: 0
+  },
+  [`@media all and (max-width: ${wrappedMediaBreakoutPoint}px)`]: {
+    "div.mediaSingleView-content-wrap[layout='wrap-left'], div.mediaSingleView-content-wrap[data-layout='wrap-left'], div.mediaSingleView-content-wrap[layout='wrap-right'], div.mediaSingleView-content-wrap[data-layout='wrap-right']": {
+      float: 'none',
+      overflow: 'auto',
+      margin: `${"var(--ds-space-150, 12px)"} 0`
     }
   }
-`;
+});
 export { mediaSingleSharedStyle, richMediaClassName };

package/dist/es2019/styles/shared/panel.js

@@ -149,6 +149,8 @@ const mainDynamicStyles = panelType => {
     color: inherit;
   `;
 };
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Safe to autofix with a tiny tweak to `mainDynamicStyles` being an object, but holding off…
 export const panelSharedStylesWithoutPrefix = () => css`
   border-radius: ${"var(--ds-border-radius, 3px)"};
   margin: ${blockNodesVerticalMargin} 0 0;
@@ -200,7 +202,7 @@ export const panelSharedStylesWithoutPrefix = () => css`
   }
 
   .ak-editor-panel__content {
-    margin: 1px 0 1px;
+    margin: ${"var(--ds-space-025, 2px)"} 0 ${"var(--ds-space-025, 2px)"};
     flex: 1 0 0;
     /*
       https://ishadeed.com/article/min-max-css/#setting-min-width-to-zero-with-flexbox
@@ -249,8 +251,6 @@ export const panelSharedStylesWithoutPrefix = () => css`
     }
   }
 `;
-export const panelSharedStyles = () => css`
-  .${PanelSharedCssClassName.prefix} {
-    ${panelSharedStylesWithoutPrefix()}
-  }
-`;
+export const panelSharedStyles = () => css({
+  [`.${PanelSharedCssClassName.prefix}`]: panelSharedStylesWithoutPrefix()
+});

package/dist/es2019/styles/shared/paragraph.js

@@ -2,13 +2,14 @@ import { css } from '@emotion/react';
 import { akEditorLineHeight, blockNodesVerticalMargin } from '@atlaskit/editor-shared-styles';
 
 // @see typography spreadsheet: https://docs.google.com/spreadsheets/d/1iYusRGCT4PoPfvxbJ8NrgjtfFgXLm5lpDWXzjua1W2E/edit#gid=93913128
-export const paragraphSharedStyles = css`
-  & p {
-    font-size: 1em;
-    line-height: ${akEditorLineHeight};
-    font-weight: normal;
-    margin-top: ${blockNodesVerticalMargin};
-    margin-bottom: 0;
-    letter-spacing: -0.005em;
+export const paragraphSharedStyles = css({
+  '& p': {
+    fontSize: '1em',
+    lineHeight: akEditorLineHeight,
+    fontWeight: 'normal',
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+    marginTop: blockNodesVerticalMargin,
+    marginBottom: 0,
+    letterSpacing: '-0.005em'
   }
-`;
+});

package/dist/es2019/styles/shared/plugins.js

@@ -1,43 +1,38 @@
 import { css } from '@emotion/react';
 import { N30 } from '@atlaskit/theme/colors';
-export const buttonGroupStyle = css`
-  display: inline-flex;
-  align-items: center;
-
-  & > div {
-    display: flex;
+export const buttonGroupStyle = css({
+  display: 'inline-flex',
+  alignItems: 'center',
+  '& > div': {
+    display: 'flex'
   }
-`;
+});
 
 // This style is copied to packages/editor/editor-plugin-ai/src/ui/components/AtlassianIntelligenceToolbarButton/styles.tsx
 // If you make change here, change in above file as well.
-export const separatorStyles = css`
-  background: ${`var(--ds-border, ${N30})`};
-  width: 1px;
-  height: 24px;
-  display: inline-block;
-  margin: 0 ${"var(--ds-space-100, 8px)"};
-  user-select: none;
-`;
+export const separatorStyles = css({
+  background: `var(--ds-border, ${N30})`,
+  width: '1px',
+  height: '24px',
+  display: 'inline-block',
+  margin: `0 ${"var(--ds-space-100, 8px)"}`,
+  userSelect: 'none'
+});
 
 // This style is copied to packages/editor/editor-plugin-ai/src/ui/components/AtlassianIntelligenceToolbarButton/styles.tsx
 // If you make change here, change in above file as well.
-export const wrapperStyle = css`
-  display: flex;
-  align-items: center;
-
-  > div,
-  > span {
-    display: flex;
-  }
-
-  > div > div {
-    display: flex;
-  }
-
-  margin-left: 0;
-  min-width: auto;
-`;
-export const triggerWrapperStyles = css`
-  display: flex;
-`;
+export const wrapperStyle = css({
+  display: 'flex',
+  alignItems: 'center',
+  '> div, > span': {
+    display: 'flex'
+  },
+  '> div > div': {
+    display: 'flex'
+  },
+  marginLeft: 0,
+  minWidth: 'auto'
+});
+export const triggerWrapperStyles = css({
+  display: 'flex'
+});

package/dist/es2019/styles/shared/resizer.js

@@ -5,9 +5,9 @@ import { B200, B50, N60 } from '@atlaskit/theme/colors';
   Styles in this file are based on
   packages/editor/editor-core/src/plugins/media/styles.ts
 */
-
 export const resizerItemClassName = 'resizer-item';
 export const resizerHoverZoneClassName = 'resizer-hover-zone';
+export const resizerExtendedZone = 'resizer-is-extended';
 export const resizerHandleClassName = 'resizer-handle';
 export const resizerHandleTrackClassName = `${resizerHandleClassName}-track`;
 export const resizerHandleThumbClassName = `${resizerHandleClassName}-thumb`;
@@ -17,6 +17,8 @@ export const resizerDangerClassName = `${resizerHandleClassName}-danger`;
 const akEditorSelectedNodeClassName = 'ak-editor-selected-node';
 export const handleWrapperClass = 'resizer-handle-wrapper';
 export const resizerHandleZIndex = 1;
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Seems perfectly safe to autofix, but comments would be lost…
 export const resizerStyles = css`
   .${resizerItemClassName} {
     will-change: width;
@@ -191,14 +193,17 @@ export const resizerStyles = css`
     display: inline-block;
     width: 100%;
 
-    &.is-extended {
+    &.${resizerExtendedZone} {
       padding: 0 ${"var(--ds-space-150, 12px)"};
       left: ${"var(--ds-space-negative-150, -12px)"};
     }
   }
 
   // This below style is here to make sure the image width is correct when nested in a table
-  table .${resizerHoverZoneClassName} {
+  table
+    .${resizerHoverZoneClassName},
+    table
+    .${resizerHoverZoneClassName}.${resizerExtendedZone} {
     padding: unset;
     left: unset;
   }

package/dist/es2019/styles/shared/rule.js

@@ -2,12 +2,13 @@ import { css } from '@emotion/react';
 import { akEditorLineHeight } from '@atlaskit/editor-shared-styles';
 import { N30A } from '@atlaskit/theme/colors';
 // @see typography spreadsheet: https://docs.google.com/spreadsheets/d/1iYusRGCT4PoPfvxbJ8NrgjtfFgXLm5lpDWXzjua1W2E/edit#gid=93913128
-export const ruleSharedStyles = () => css`
-  & hr {
-    border: none;
-    background-color: ${`var(--ds-border, ${N30A})`};
-    margin: ${akEditorLineHeight}em 0;
-    height: 2px;
-    border-radius: 1px;
+export const ruleSharedStyles = () => css({
+  '& hr': {
+    border: 'none',
+    backgroundColor: `var(--ds-border, ${N30A})`,
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+    margin: `${akEditorLineHeight}em 0`,
+    height: '2px',
+    borderRadius: '1px'
   }
-`;
+});

package/dist/es2019/styles/shared/shadow.js

@@ -22,70 +22,40 @@ const shadowWidth = 8;
  *      background-attachment: local, local, scroll, scroll;
  */
 
-const shadowSharedStyle = css`
-  &
-    .${shadowClassNames.RIGHT_SHADOW}::before,
-    .${shadowClassNames.RIGHT_SHADOW}::after,
-    .${shadowClassNames.LEFT_SHADOW}::before,
-    .${shadowClassNames.LEFT_SHADOW}::after {
-    display: none;
-    position: absolute;
-    pointer-events: none;
-    z-index: ${akEditorShadowZIndex};
-    width: ${shadowWidth}px;
-    content: '';
-    /* Scrollbar is outside the content in IE, inset in other browsers. */
-    height: calc(100%);
+const shadowSharedStyle = css({
+  [`& .${shadowClassNames.RIGHT_SHADOW}::before, .${shadowClassNames.RIGHT_SHADOW}::after, .${shadowClassNames.LEFT_SHADOW}::before, .${shadowClassNames.LEFT_SHADOW}::after`]: {
+    display: 'none',
+    position: 'absolute',
+    pointerEvents: 'none',
+    zIndex: akEditorShadowZIndex,
+    width: `${shadowWidth}px`,
+    content: "''",
+    height: 'calc(100%)'
+  },
+  [`& .${shadowClassNames.RIGHT_SHADOW}, .${shadowClassNames.LEFT_SHADOW}`]: {
+    position: 'relative'
+  },
+  [`& .${shadowClassNames.LEFT_SHADOW}::before`]: {
+    background: `linear-gradient( to left, transparent 0, ${`var(--ds-shadow-overflow-spread, ${N40A})`} ${getBooleanFF('platform.editor.table.increase-shadow-visibility_lh89r') ? 140 : 100}% ), linear-gradient( to right, ${"var(--ds-shadow-overflow-perimeter, transparent)"} 0px, transparent 1px )`,
+    top: '0px',
+    left: 0,
+    display: 'block'
+  },
+  [`& .${shadowClassNames.RIGHT_SHADOW}::after`]: {
+    background: `linear-gradient( to right, transparent 0, ${`var(--ds-shadow-overflow-spread, ${N40A})`} ${getBooleanFF('platform.editor.table.increase-shadow-visibility_lh89r') ? 140 : 100}% ), linear-gradient( to left, ${"var(--ds-shadow-overflow-perimeter, transparent)"} 0px, transparent 1px )`,
+    right: '0px',
+    top: '0px',
+    display: 'block'
+  },
+  [`& .${shadowObserverClassNames.SENTINEL_LEFT}`]: {
+    height: '100%',
+    width: '0px',
+    minWidth: '0px'
+  },
+  [`& .${shadowObserverClassNames.SENTINEL_RIGHT}`]: {
+    height: '100%',
+    width: '0px',
+    minWidth: '0px'
   }
-
-  & .${shadowClassNames.RIGHT_SHADOW}, .${shadowClassNames.LEFT_SHADOW} {
-    position: relative;
-  }
-
-  & .${shadowClassNames.LEFT_SHADOW}::before {
-    background: linear-gradient(
-        to left,
-        transparent 0,
-        ${`var(--ds-shadow-overflow-spread, ${N40A})`}
-          ${getBooleanFF('platform.editor.table.increase-shadow-visibility_lh89r') ? 140 : 100}%
-      ),
-      linear-gradient(
-        to right,
-        ${"var(--ds-shadow-overflow-perimeter, transparent)"} 0px,
-        transparent 1px
-      );
-    top: 0px;
-    left: 0;
-    display: block;
-  }
-
-  & .${shadowClassNames.RIGHT_SHADOW}::after {
-    background: linear-gradient(
-        to right,
-        transparent 0,
-        ${`var(--ds-shadow-overflow-spread, ${N40A})`}
-          ${getBooleanFF('platform.editor.table.increase-shadow-visibility_lh89r') ? 140 : 100}%
-      ),
-      linear-gradient(
-        to left,
-        ${"var(--ds-shadow-overflow-perimeter, transparent)"} 0px,
-        transparent 1px
-      );
-    left: calc(100% - ${shadowWidth}px);
-    top: 0px;
-    display: block;
-  }
-
-  & .${shadowObserverClassNames.SENTINEL_LEFT} {
-    height: 100%;
-    width: 0px;
-    min-width: 0px;
-  }
-
-  & .${shadowObserverClassNames.SENTINEL_RIGHT} {
-    height: 100%;
-    width: 0px;
-    min-width: 0px;
-  }
-`;
+});
 export { shadowSharedStyle };

package/dist/es2019/styles/shared/smartCard.js

@@ -4,6 +4,8 @@ import { N0, N40 } from '@atlaskit/theme/colors';
 import { SmartCardSharedCssClassName } from './smart-card';
 export const DATASOURCE_INNER_CONTAINER_CLASSNAME = 'datasourceView-content-inner-wrap';
 export const FLOATING_TOOLBAR_LINKPICKER_CLASSNAME = 'card-floating-toolbar--link-picker';
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Seems safe to autofix with a fix to `getSelectionStyles`
 export const smartCardStyles = css`
   .${SmartCardSharedCssClassName.INLINE_CARD_CONTAINER} {
     max-width: calc(100% - 20px);

package/dist/es2019/styles/shared/table.js

@@ -34,6 +34,8 @@ export const TableSharedCssClassName = {
   TABLE_COLUMN_CONTROLS_DECORATIONS: `${tablePrefixSelector}-column-controls-decoration`,
   TABLE_RESIZER_CONTAINER: `${tablePrefixSelector}-resizer-container`
 };
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Appears safe to auto-fix, but leaving it up to the team to remediate as the readability only gets worse with autofixing
 const tableSharedStyle = () => css`
   ${tableCellBackgroundStyleOverride()}
   .${TableSharedCssClassName.TABLE_CONTAINER} {

package/dist/es2019/styles/shared/tableCell.js

@@ -22,6 +22,4 @@ const mapBackgroundColors = () => {
   });
   return cssString;
 };
-export const tableCellBackgroundStyleOverride = () => css`
-  ${mapBackgroundColors()}
-`;
+export const tableCellBackgroundStyleOverride = () => css(mapBackgroundColors());

package/dist/es2019/styles/shared/text-color.js

@@ -1,10 +1,9 @@
 import { css } from '@emotion/react';
-export const textColorStyles = css`
-  .fabric-text-color-mark {
-    color: var(--custom-palette-color, inherit);
+export const textColorStyles = css({
+  '.fabric-text-color-mark': {
+    color: 'var(--custom-palette-color, inherit)'
+  },
+  'a .fabric-text-color-mark': {
+    color: 'unset'
   }
-
-  a .fabric-text-color-mark {
-    color: unset;
-  }
-`;
+});

package/dist/es2019/styles/shared/unsupported-content.js

@@ -6,6 +6,8 @@ export const UnsupportedSharedCssClassName = {
 };
 const inlineUnsupportedSelector = `.${UnsupportedSharedCssClassName.INLINE_CONTAINER} > span:nth-of-type(2)`;
 const blockUnsupportedSelector = `.${UnsupportedSharedCssClassName.BLOCK_CONTAINER} > div`;
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Nested `getSelectionStyles` would need a rebuild to autofix
 export const unsupportedStyles = css`
   ${blockUnsupportedSelector}, ${inlineUnsupportedSelector} {
     cursor: pointer;

package/dist/es2019/styles/shared/whitespace.js

@@ -1,6 +1,6 @@
 import { css } from '@emotion/react';
-const whitespaceSharedStyles = css`
-  word-wrap: break-word;
-  white-space: pre-wrap;
-`;
+const whitespaceSharedStyles = css({
+  wordWrap: 'break-word',
+  whiteSpace: 'pre-wrap'
+});
 export { whitespaceSharedStyles };

package/dist/es2019/ui/Announcer/announcer.js

@@ -9,8 +9,10 @@ import React, { forwardRef, memo, useEffect, useState } from 'react';
 
 // Note: Text won't be announced if the text message doesn't change after the render.
 // For using a forced announcement in this case, set the 'key' attribute - key={Date.now()}
+
 // Note: Flag 'contentRendered' resolves bug with duplicates messages (NVDA + Firefox)
 // https://github.com/nvaccess/nvda/labels/bug%2Fdouble-speaking
+
 let timer;
 const Announcer = /*#__PURE__*/forwardRef(({
   ariaAtomic = 'true',

package/dist/es2019/ui/ContextPanel/context.js

@@ -15,6 +15,7 @@ import React from 'react';
 // positionedOverEditor is used to determine whether the context panel is positioned over the Editor so we are
 // able to position and add margins to handle certain elements like inline comment dialogues overlapping the context
 // panel
+
 export const ContextPanel = /*#__PURE__*/React.createContext({
   width: 0,
   positionedOverEditor: false,

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

@@ -7,7 +7,7 @@ import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@
 import { N0, N50A, N60A, N900 } from '@atlaskit/theme/colors';
 import Layer from '../Layer';
 const packageName = "@atlaskit/editor-common";
-const packageVersion = "78.11.4";
+const packageVersion = "78.11.6";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 class DropList extends Component {

package/dist/es2019/ui/Expand/index.js

@@ -7,7 +7,7 @@ import { defineMessages } from 'react-intl-next';
 import { akEditorLineHeight, akEditorSwoopCubicBezier, akLayoutGutterOffset, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import { B300, N200, N200A, N300A, N30A, N40A, N50A, N90 } from '@atlaskit/theme/colors';
 // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
-import { fontSize, gridSize } from '@atlaskit/theme/constants';
+import { fontSize } from '@atlaskit/theme/constants';
 export const messages = defineMessages({
   collapseNode: {
     id: 'fabric.editor.collapseNode',
@@ -121,9 +121,8 @@ const containerStyles = styleProps => {
 const contentStyles = styleProps => () => css`
     padding-top: ${styleProps.expanded ? "var(--ds-space-100, 8px)" : "var(--ds-space-0, 0px)"};
     padding-right: ${"var(--ds-space-100, 8px)"};
-    // TODO: Migrate away from gridSize
-    // Recommendation: Replace gridSize with 8 if important to highlight 8*4 - 8/2, or directly replace with 28px
-    padding-left: ${gridSize() * 4 - gridSize() / 2}px;
+    padding-left: ${"var(--ds-space-300, 24px)"};
+    margin-left: ${"var(--ds-space-050, 4px)"};
     display: flow-root;
 
     // The follow rules inside @supports block are added as a part of ED-8893

package/dist/es2019/ui/Layer/index.js

@@ -128,7 +128,6 @@ export default class Layer extends Component {
           boundariesElement: 'viewport',
           padding: 0 // leave 0 pixels between popper and the boundariesElement
         },
-
         preventOverflow: {
           enabled: false,
           escapeWithReference: true

package/dist/es2019/ui/MediaSingle/styled.js

@@ -135,27 +135,29 @@ export const MediaSingleDimensionHelper = ({
   isExtendedResizeExperienceOn,
   isNestedNode = false,
   isInsideOfInlineExtension = false
-}) => css`
-  /* For nested rich media items, set max-width to 100% */
-  tr &,
-  [data-layout-column] &,
-  [data-node-type='expand'] &,
-  [data-panel-type] &,
-  li & {
-    max-width: 100%;
-  }
+}) =>
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
+css`
+    /* For nested rich media items, set max-width to 100% */
+    tr &,
+    [data-layout-column] &,
+    [data-node-type='expand'] &,
+    [data-panel-type] &,
+    li & {
+      max-width: 100%;
+    }
 
-  width: ${isExtendedResizeExperienceOn ? `${mediaSingleWidth || width}px` : mediaSingleWidth ? calcResizedWidth(layout, width || 0, containerWidth) : calcLegacyWidth(layout, width || 0, containerWidth, fullWidthMode, isResized, isInsideOfInlineExtension)};
-  ${layout === 'full-width' &&
+    width: ${isExtendedResizeExperienceOn ? `${mediaSingleWidth || width}px` : mediaSingleWidth ? calcResizedWidth(layout, width || 0, containerWidth) : calcLegacyWidth(layout, width || 0, containerWidth, fullWidthMode, isResized, isInsideOfInlineExtension)};
+    ${layout === 'full-width' &&
 /* This causes issues for new experience where we don't strip layout attributes
- when copying top-level node and pasting into a table/layout,
- because full-width layout will remain, causing node to be edge-to-edge */
-!isExtendedResizeExperienceOn && css`
-    min-width: 100%;
-  `}
-  max-width: ${isExtendedResizeExperienceOn ? `${containerWidth}px` : calcMaxWidth(layout, containerWidth)};
+when copying top-level node and pasting into a table/layout,
+because full-width layout will remain, causing node to be edge-to-edge */
+!isExtendedResizeExperienceOn && css({
+  minWidth: '100%'
+})}
+    max-width: ${isExtendedResizeExperienceOn ? `${containerWidth}px` : calcMaxWidth(layout, containerWidth)};
 
-  ${isExtendedResizeExperienceOn && `&[class*='is-resizing'] {
+    ${isExtendedResizeExperienceOn && `&[class*='is-resizing'] {
     .new-file-experience-wrapper {
       box-shadow: none !important;
     }
@@ -164,27 +166,29 @@ export const MediaSingleDimensionHelper = ({
       transform: translateX(-50%);`}
   }`}
 
-  &:not(.is-resizing) {
-    transition: width 100ms ease-in;
-  }
+    &:not(.is-resizing) {
+      transition: width 100ms ease-in;
+    }
 
-  float: ${float(layout)};
-  margin: ${calcMargin(layout)};
+    float: ${float(layout)};
+    margin: ${calcMargin(layout)};
 
-  &[class*='not-resizing'] {
-    ${isNestedNode ? /* Make nested node appear responsive when resizing table cell */
+    &[class*='not-resizing'] {
+      ${isNestedNode ? /* Make nested node appear responsive when resizing table cell */
 `max-width: 100%;` : nonWrappedLayouts.includes(layout) && `margin-left: 50%;
         transform: translateX(-50%);`}
-  }
+    }
 
-  ${isImageAligned(layout)};
-`;
+    ${isImageAligned(layout)};
+  `;
 const RenderFallbackContainer = ({
   hasFallbackContainer,
   paddingBottom,
   height
-}) => css`
-  ${hasFallbackContainer ? `
+}) =>
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
+css`
+    ${hasFallbackContainer ? `
   &::after {
     content: '';
     display: block;
@@ -195,7 +199,9 @@ const RenderFallbackContainer = ({
     line-height: 0;
   }
   ` : ''}
-`;
+  `;
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
 export const mediaWrapperStyle = props => css`
   position: relative;