@atlaskit/editor-common 78.11.5 → 78.11.6

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

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.getPanelDarkColor = exports.getPanelBackgroundDarkModeColors = exports.darkPanelColors = exports.PanelSharedSelectors = exports.PanelSharedCssClassName = void 0;
 exports.getPanelDarkModeCSS = getPanelDarkModeCSS;
 exports.panelSharedStylesWithoutPrefix = exports.panelSharedStyles = exports.getPanelTypeBackgroundNoTokens = exports.getPanelTypeBackground = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("@emotion/react");
@@ -16,7 +17,7 @@ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _consts = require("@atlaskit/editor-shared-styles/consts");
 var _emoji = require("@atlaskit/emoji");
 var _colors = require("@atlaskit/theme/colors");
-var _templateObject, _templateObject2;
+var _templateObject;
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 var lightPanelColors = {
   info: _colors.B50,
@@ -166,9 +167,11 @@ var getPanelTypeBackground = exports.getPanelTypeBackground = function getPanelT
 var mainDynamicStyles = function mainDynamicStyles(panelType) {
   return "\n    background-color: ".concat(getPanelTypeBackground(panelType), ";\n    color: inherit;\n  ");
 };
+
+// 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…
 var panelSharedStylesWithoutPrefix = exports.panelSharedStylesWithoutPrefix = function panelSharedStylesWithoutPrefix() {
   return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: ", ";\n  margin: ", " 0 0;\n  padding-top: ", ";\n  padding-right: ", ";\n  padding-bottom: ", ";\n  padding-left: ", ";\n  min-width: ", "px;\n  display: flex;\n  position: relative;\n  align-items: normal;\n  word-break: break-word;\n\n  ", "\n\n  .", " {\n    flex-shrink: 0;\n    height: ", ";\n    width: ", ";\n    box-sizing: content-box;\n    padding-right: ", ";\n    text-align: center;\n    user-select: none;\n    -moz-user-select: none;\n    -webkit-user-select: none;\n    -ms-user-select: none;\n    margin-top: 0.1em;\n    ", "\n\n    > span {\n      vertical-align: middle;\n      display: inline-flex;\n    }\n\n    .", " {\n      vertical-align: ", "px;\n    }\n\n    .", " {\n      vertical-align: ", "px;\n\n      // Vertical align only works for inline-block elements in Firefox\n      @-moz-document url-prefix() {\n        img {\n          display: inline-block;\n        }\n      }\n    }\n  }\n\n  .ak-editor-panel__content {\n    margin: ", " 0 ", ";\n    flex: 1 0 0;\n    /*\n      https://ishadeed.com/article/min-max-css/#setting-min-width-to-zero-with-flexbox\n      The default value for min-width is auto, which is computed to zero. When an element is a flex item, the value of min-width doesn\u2019t compute to zero. The minimum size of a flex item is equal to the size of its contents.\n    */\n    min-width: 0;\n  }\n\n  &[data-panel-type='", "'] {\n    ", "\n\n    .", " {\n      ", "\n    }\n  }\n\n  &[data-panel-type='", "'] {\n    ", "\n\n    .", " {\n      ", "\n    }\n  }\n\n  &[data-panel-type='", "'] {\n    ", "\n\n    .", " {\n      ", "\n    }\n  }\n\n  &[data-panel-type='", "'] {\n    ", "\n\n    .", " {\n      ", "\n    }\n  }\n\n  &[data-panel-type='", "'] {\n    ", "\n\n    .", " {\n      ", "\n    }\n  }\n"])), "var(--ds-border-radius, 3px)", _editorSharedStyles.blockNodesVerticalMargin, "var(--ds-space-100, 8px)", "var(--ds-space-200, 16px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", _editorSharedStyles.akEditorTableCellMinWidth, mainDynamicStyles(_adfSchema.PanelType.INFO), PanelSharedCssClassName.icon, "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)", "var(--ds-space-100, 8px)", iconDynamicStyles(_adfSchema.PanelType.INFO), _emoji.emojiSprite, panelEmojiSpriteVerticalAlignment, _emoji.emojiImage, panelEmojiImageVerticalAlignment, "var(--ds-space-025, 2px)", "var(--ds-space-025, 2px)", _adfSchema.PanelType.NOTE, mainDynamicStyles(_adfSchema.PanelType.NOTE), PanelSharedCssClassName.icon, iconDynamicStyles(_adfSchema.PanelType.NOTE), _adfSchema.PanelType.TIP, mainDynamicStyles(_adfSchema.PanelType.TIP), PanelSharedCssClassName.icon, iconDynamicStyles(_adfSchema.PanelType.TIP), _adfSchema.PanelType.WARNING, mainDynamicStyles(_adfSchema.PanelType.WARNING), PanelSharedCssClassName.icon, iconDynamicStyles(_adfSchema.PanelType.WARNING), _adfSchema.PanelType.ERROR, mainDynamicStyles(_adfSchema.PanelType.ERROR), PanelSharedCssClassName.icon, iconDynamicStyles(_adfSchema.PanelType.ERROR), _adfSchema.PanelType.SUCCESS, mainDynamicStyles(_adfSchema.PanelType.SUCCESS), PanelSharedCssClassName.icon, iconDynamicStyles(_adfSchema.PanelType.SUCCESS));
 };
 var panelSharedStyles = exports.panelSharedStyles = function panelSharedStyles() {
-  return (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    ", "\n  }\n"])), PanelSharedCssClassName.prefix, panelSharedStylesWithoutPrefix());
+  return (0, _react.css)((0, _defineProperty2.default)({}, ".".concat(PanelSharedCssClassName.prefix), panelSharedStylesWithoutPrefix()));
 };

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

@@ -1,13 +1,20 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.paragraphSharedStyles = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
-var _templateObject;
 // @see typography spreadsheet: https://docs.google.com/spreadsheets/d/1iYusRGCT4PoPfvxbJ8NrgjtfFgXLm5lpDWXzjua1W2E/edit#gid=93913128
-var paragraphSharedStyles = exports.paragraphSharedStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  & p {\n    font-size: 1em;\n    line-height: ", ";\n    font-weight: normal;\n    margin-top: ", ";\n    margin-bottom: 0;\n    letter-spacing: -0.005em;\n  }\n"])), _editorSharedStyles.akEditorLineHeight, _editorSharedStyles.blockNodesVerticalMargin);
+var paragraphSharedStyles = exports.paragraphSharedStyles = (0, _react.css)({
+  '& p': {
+    fontSize: '1em',
+    lineHeight: _editorSharedStyles.akEditorLineHeight,
+    fontWeight: 'normal',
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+    marginTop: _editorSharedStyles.blockNodesVerticalMargin,
+    marginBottom: 0,
+    letterSpacing: '-0.005em'
+  }
+});

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

@@ -1,21 +1,44 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.wrapperStyle = exports.triggerWrapperStyles = exports.separatorStyles = exports.buttonGroupStyle = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-var buttonGroupStyle = exports.buttonGroupStyle = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-flex;\n  align-items: center;\n\n  & > div {\n    display: flex;\n  }\n"])));
+var buttonGroupStyle = exports.buttonGroupStyle = (0, _react.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.
-var separatorStyles = exports.separatorStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  width: 1px;\n  height: 24px;\n  display: inline-block;\n  margin: 0 ", ";\n  user-select: none;\n"])), "var(--ds-border, ".concat(_colors.N30, ")"), "var(--ds-space-100, 8px)");
+var separatorStyles = exports.separatorStyles = (0, _react.css)({
+  background: "var(--ds-border, ".concat(_colors.N30, ")"),
+  width: '1px',
+  height: '24px',
+  display: 'inline-block',
+  margin: "0 ".concat("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.
-var wrapperStyle = exports.wrapperStyle = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n\n  > div,\n  > span {\n    display: flex;\n  }\n\n  > div > div {\n    display: flex;\n  }\n\n  margin-left: 0;\n  min-width: auto;\n"])));
-var triggerWrapperStyles = exports.triggerWrapperStyles = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n"])));
+var wrapperStyle = exports.wrapperStyle = (0, _react.css)({
+  display: 'flex',
+  alignItems: 'center',
+  '> div, > span': {
+    display: 'flex'
+  },
+  '> div > div': {
+    display: 'flex'
+  },
+  marginLeft: 0,
+  minWidth: 'auto'
+});
+var triggerWrapperStyles = exports.triggerWrapperStyles = (0, _react.css)({
+  display: 'flex'
+});

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

@@ -26,4 +26,6 @@ var resizerDangerClassName = exports.resizerDangerClassName = "".concat(resizerH
 var akEditorSelectedNodeClassName = 'ak-editor-selected-node';
 var handleWrapperClass = exports.handleWrapperClass = 'resizer-handle-wrapper';
 var resizerHandleZIndex = exports.resizerHandleZIndex = 1;
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Seems perfectly safe to autofix, but comments would be lost…
 var resizerStyles = exports.resizerStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    will-change: width;\n\n    &:hover,\n    &.display-handle {\n      & > .", " > .", " {\n        visibility: visible;\n        opacity: 1;\n      }\n    }\n\n    &.is-resizing {\n      & .", " {\n        background: ", ";\n      }\n    }\n\n    &.", " {\n      & .", " {\n        transition: none;\n        background: ", ";\n      }\n    }\n  }\n\n  .", " {\n    display: flex;\n    visibility: hidden;\n    opacity: 0;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    width: 7px;\n    transition: visibility 0.2s, opacity 0.2s;\n\n    /*\n      NOTE: The below style is targeted at the div element added by the tooltip. We don't have any means of injecting styles\n      into the tooltip\n    */\n    & div[role='presentation'] {\n      width: 100%;\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n      align-items: center;\n      margin-top: ", ";\n      white-space: normal;\n    }\n\n    /*\n      Handle Positions\n    */\n    &.left {\n      align-items: flex-start;\n    }\n    &.right {\n      align-items: flex-end;\n    }\n\n    /*\n      Handle Sizing\n    */\n    &.small {\n      & .", " {\n        height: 43px;\n      }\n    }\n    &.medium {\n      & .", " {\n        height: 64px;\n      }\n    }\n    &.large {\n      & .", " {\n        height: 96px;\n      }\n    }\n\n    /*\n      Handle Alignment\n    */\n    &.sticky {\n      & .", " {\n        position: sticky;\n        top: ", ";\n        bottom: ", ";\n      }\n    }\n\n    &:hover {\n      & .", " {\n        background: ", ";\n      }\n\n      & .", " {\n        visibility: visible;\n        opacity: 0.5;\n      }\n    }\n  }\n\n  .", " {\n    content: ' ';\n    display: flex;\n    width: 3px;\n    margin: 0 ", ";\n    height: 64px;\n    transition: background-color 0.2s;\n    border-radius: 6px;\n    border: 0;\n    padding: 0;\n    z-index: 2;\n    outline: none;\n    min-height: 24px;\n    background: ", ";\n\n    &:hover {\n      cursor: col-resize;\n    }\n\n    &:focus {\n      background: ", ";\n\n      &::after {\n        content: '';\n        position: absolute;\n        top: ", ";\n        right: ", ";\n        bottom: ", ";\n        left: ", ";\n        border: 2px solid ", ";\n        border-radius: inherit;\n        z-index: -1;\n      }\n    }\n  }\n\n  .", " {\n    visibility: hidden;\n    position: absolute;\n    width: 7px;\n    height: calc(100% - 40px);\n    border-radius: 4px;\n    opacity: 0;\n    transition: background-color 0.2s, visibility 0.2s, opacity 0.2s;\n\n    &.none {\n      background: none;\n    }\n\n    &.shadow {\n      background: ", ";\n    }\n\n    &.full-height {\n      background: ", ";\n      height: 100%;\n      min-height: 36px;\n    }\n  }\n\n  .", " {\n    & .", " {\n      background: ", ";\n    }\n  }\n\n  .", " {\n    position: relative;\n    display: inline-block;\n    width: 100%;\n\n    &.", " {\n      padding: 0 ", ";\n      left: ", ";\n    }\n  }\n\n  // This below style is here to make sure the image width is correct when nested in a table\n  table\n    .", ",\n    table\n    .", ".", " {\n    padding: unset;\n    left: unset;\n  }\n"])), resizerItemClassName, handleWrapperClass, resizerHandleClassName, resizerHandleThumbClassName, "var(--ds-border-focused, ".concat(_colors.B200, ")"), resizerDangerClassName, resizerHandleThumbClassName, "var(--ds-icon-danger, ".concat(_editorSharedStyles.akEditorDeleteIconColor, ")"), resizerHandleClassName, "var(--ds-space-negative-200, -16px)", resizerHandleThumbClassName, resizerHandleThumbClassName, resizerHandleThumbClassName, resizerHandleThumbClassName, "var(--ds-space-150, 12px)", "var(--ds-space-150, 12px)", resizerHandleThumbClassName, "var(--ds-border-focused, ".concat(_colors.B200, ")"), resizerHandleTrackClassName, resizerHandleThumbClassName, "var(--ds-space-025, 2px)", "var(--ds-border, ".concat(_colors.N60, ")"), "var(--ds-border-selected, #0C66E4)", "var(--ds-space-negative-050, -4px)", "var(--ds-space-negative-050, -4px)", "var(--ds-space-negative-050, -4px)", "var(--ds-space-negative-050, -4px)", "var(--ds-border-focused, #388BFF)", resizerHandleTrackClassName, "var(--ds-background-selected, ".concat(_colors.B50, ")"), "var(--ds-background-selected, ".concat(_colors.B50, ")"), akEditorSelectedNodeClassName, resizerHandleThumbClassName, "var(--ds-border-focused, ".concat(_colors.B200, ")"), resizerHoverZoneClassName, resizerExtendedZone, "var(--ds-space-150, 12px)", "var(--ds-space-negative-150, -12px)", resizerHoverZoneClassName, resizerHoverZoneClassName, resizerExtendedZone);

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

@@ -1,16 +1,22 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ruleSharedStyles = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _colors = require("@atlaskit/theme/colors");
-var _templateObject;
 // @see typography spreadsheet: https://docs.google.com/spreadsheets/d/1iYusRGCT4PoPfvxbJ8NrgjtfFgXLm5lpDWXzjua1W2E/edit#gid=93913128
 var ruleSharedStyles = exports.ruleSharedStyles = function ruleSharedStyles() {
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  & hr {\n    border: none;\n    background-color: ", ";\n    margin: ", "em 0;\n    height: 2px;\n    border-radius: 1px;\n  }\n"])), "var(--ds-border, ".concat(_colors.N30A, ")"), _editorSharedStyles.akEditorLineHeight);
+  return (0, _react.css)({
+    '& hr': {
+      border: 'none',
+      backgroundColor: "var(--ds-border, ".concat(_colors.N30A, ")"),
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+      margin: "".concat(_editorSharedStyles.akEditorLineHeight, "em 0"),
+      height: '2px',
+      borderRadius: '1px'
+    }
+  });
 };

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

@@ -47,8 +47,7 @@ var shadowSharedStyle = exports.shadowSharedStyle = (0, _react.css)((_css = {},
   display: 'block'
 }), (0, _defineProperty2.default)(_css, "& .".concat(_OverflowShadow.shadowClassNames.RIGHT_SHADOW, "::after"), {
   background: "linear-gradient( to right, transparent 0, ".concat("var(--ds-shadow-overflow-spread, ".concat(_colors.N40A, ")"), " ", (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.increase-shadow-visibility_lh89r') ? 140 : 100, "% ), linear-gradient( to left, ", "var(--ds-shadow-overflow-perimeter, transparent)", " 0px, transparent 1px )"),
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
-  left: "calc(100% - ".concat(shadowWidth, "px)"),
+  right: '0px',
   top: '0px',
   display: 'block'
 }), (0, _defineProperty2.default)(_css, "& .".concat(_shadowObserver.shadowObserverClassNames.SENTINEL_LEFT), {

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

@@ -13,4 +13,6 @@ var _smartCard = require("./smart-card");
 var _templateObject;
 var DATASOURCE_INNER_CONTAINER_CLASSNAME = exports.DATASOURCE_INNER_CONTAINER_CLASSNAME = 'datasourceView-content-inner-wrap';
 var FLOATING_TOOLBAR_LINKPICKER_CLASSNAME = exports.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`
 var smartCardStyles = exports.smartCardStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    max-width: calc(100% - 20px);\n    vertical-align: top;\n    word-break: break-all;\n\n    .card {\n      padding-left: ", ";\n      padding-right: ", ";\n      padding-top: 0.5em;\n      padding-bottom: 0.5em;\n      margin-bottom: -0.5em;\n\n      .", " > a:focus {\n        ", "\n      }\n    }\n\n    &.", "\n      .", "\n      > a {\n      ", "\n    }\n    .", " > a {\n      /* EDM-1717: box-shadow Safari fix start */\n      z-index: 1;\n      position: relative;\n      /* EDM-1717: box-shadow Safari fix end */\n    }\n\n    &.danger {\n      .", " > a {\n        box-shadow: 0 0 0 1px\n          ", ";\n        /* EDM-1717: box-shadow Safari fix start */\n        z-index: 2;\n        /* EDM-1717: box-shadow Safari fix end */\n      }\n    }\n  }\n\n  .", " {\n    .", " > div {\n      cursor: pointer;\n    }\n\n    &.", "\n      .", "\n      > div {\n      ", "\n      border-radius: ", ";\n    }\n\n    &.danger {\n      .", " > div {\n        box-shadow: 0 0 0 1px\n          ", " !important;\n      }\n    }\n  }\n\n  .", ".", " {\n    max-width: 100%;\n    display: flex;\n    justify-content: center;\n\n    .", " {\n      cursor: pointer;\n      background-color: ", ";\n      border-radius: ", ";\n      border: 1px solid ", ";\n    }\n\n    &.", " {\n      .", " {\n        ", "\n      }\n    }\n\n    &.danger {\n      .", " {\n        box-shadow: 0 0 0 1px\n          ", ";\n      }\n    }\n  }\n\n  .", " {\n    .", " > div {\n      cursor: pointer;\n      &::after {\n        transition: box-shadow 0s;\n      }\n    }\n\n    &.", "\n      .", "\n      > div::after {\n      ", "\n    }\n\n    &.danger {\n      .media-card-frame::after {\n        box-shadow: 0 0 0 1px\n          ", " !important;\n        background: ", " !important;\n      }\n      .richMedia-resize-handle-right::after,\n      .richMedia-resize-handle-left::after {\n        background: ", ";\n      }\n    }\n  }\n\n  .", " {\n    padding: 0;\n  }\n"])), _smartCard.SmartCardSharedCssClassName.INLINE_CARD_CONTAINER, "var(--ds-space-025, 2px)", "var(--ds-space-025, 2px)", _smartCard.SmartCardSharedCssClassName.LOADER_WRAPPER, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow]), _editorSharedStyles.akEditorSelectedNodeClassName, _smartCard.SmartCardSharedCssClassName.LOADER_WRAPPER, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow]), _smartCard.SmartCardSharedCssClassName.LOADER_WRAPPER, _smartCard.SmartCardSharedCssClassName.LOADER_WRAPPER, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), _smartCard.SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, _smartCard.SmartCardSharedCssClassName.LOADER_WRAPPER, _editorSharedStyles.akEditorSelectedNodeClassName, _smartCard.SmartCardSharedCssClassName.LOADER_WRAPPER, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow]), "var(--ds-border-radius-200, 8px)", _smartCard.SmartCardSharedCssClassName.LOADER_WRAPPER, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), _smartCard.SmartCardSharedCssClassName.DATASOURCE_CONTAINER, _smartCard.SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, DATASOURCE_INNER_CONTAINER_CLASSNAME, "var(--ds-background-neutral-subtle, ".concat(_colors.N0, ")"), "var(--ds-border-radius-200, 8px)", "var(--ds-border, ".concat(_colors.N40, ")"), _editorSharedStyles.akEditorSelectedNodeClassName, DATASOURCE_INNER_CONTAINER_CLASSNAME, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow]), DATASOURCE_INNER_CONTAINER_CLASSNAME, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), _smartCard.SmartCardSharedCssClassName.EMBED_CARD_CONTAINER, _smartCard.SmartCardSharedCssClassName.LOADER_WRAPPER, _editorSharedStyles.akEditorSelectedNodeClassName, _smartCard.SmartCardSharedCssClassName.LOADER_WRAPPER, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow]), "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), "var(--ds-background-danger, ".concat(_editorSharedStyles.akEditorDeleteBackground, ")"), "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), FLOATING_TOOLBAR_LINKPICKER_CLASSNAME);

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

@@ -43,6 +43,8 @@ var TableSharedCssClassName = exports.TableSharedCssClassName = {
   TABLE_COLUMN_CONTROLS_DECORATIONS: "".concat(_adfSchema.tablePrefixSelector, "-column-controls-decoration"),
   TABLE_RESIZER_CONTAINER: "".concat(_adfSchema.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
 var tableSharedStyle = exports.tableSharedStyle = function tableSharedStyle() {
   return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  .", " {\n    position: relative;\n    margin: 0 auto ", ";\n    box-sizing: border-box;\n\n    /**\n     * Fix block top alignment inside table cells.\n     */\n    .decisionItemView-content-wrap:first-of-type > div {\n      margin-top: 0;\n    }\n  }\n  .", "[data-number-column='true'] {\n    padding-left: ", "px;\n    clear: both;\n  }\n\n  .", " {\n    will-change: width, margin-left;\n  }\n\n  .", " table {\n    will-change: width;\n  }\n\n  .", " > table {\n    margin: ", " 0 0 0;\n  }\n\n  .", " > table,\n  .", " > table {\n    margin: ", " ", " 0 0;\n  }\n\n  /* avoid applying styles to nested tables (possible via extensions) */\n  .", " > table,\n  .", " > table,\n  .", " > table {\n    border-collapse: collapse;\n    border: ", "px solid\n      ", ";\n    table-layout: fixed;\n    font-size: 1em;\n    width: 100%;\n\n    &[data-autosize='true'] {\n      table-layout: auto;\n    }\n\n    & {\n      * {\n        box-sizing: border-box;\n      }\n      hr {\n        box-sizing: content-box;\n      }\n\n      tbody {\n        border-bottom: none;\n      }\n      th td {\n        background-color: ", ";\n      }\n      th,\n      td {\n        min-width: ", "px;\n        font-weight: normal;\n        vertical-align: top;\n        border: 1px solid\n          ", ";\n        border-right-width: 0;\n        border-bottom-width: 0;\n        padding: ", ";\n        /* https://stackoverflow.com/questions/7517127/borders-not-shown-in-firefox-with-border-collapse-on-table-position-relative-o */\n        ", "\n\n        > :first-child:not(style),\n        > style:first-child + * {\n          margin-top: 0;\n        }\n\n        > .ProseMirror-gapcursor:first-child + *,\n        > style:first-child + .ProseMirror-gapcursor + * {\n          margin-top: 0;\n        }\n\n        > .ProseMirror-gapcursor:first-child + span + *,\n        > style:first-child + .ProseMirror-gapcursor + span + * {\n          margin-top: 0;\n        }\n\n        th p:not(:first-of-type),\n        td p:not(:first-of-type) {\n          margin-top: ", ";\n        }\n      }\n      th {\n        background-color: ", ";\n        text-align: left;\n\n        /* only apply this styling to codeblocks in default background headercells */\n        /* TODO this needs to be overhauled as it relies on unsafe selectors */\n        &:not([style]):not(.danger) {\n          .", ":not(.danger) {\n            background-color: ", ";\n\n            :not(.", ") {\n              box-shadow: 0px 0px 0px 1px\n                ", ";\n            }\n\n            .", " {\n              background-image: ", ";\n\n              background-color: ", ";\n            }\n\n            .", " {\n              background-color: ", ";\n            }\n\n            /* this is only relevant to the element taken care of by renderer */\n            > [data-ds--code--code-block] {\n              background-image: ", "!important;\n\n              background-color: ", "!important;\n\n              // selector lives inside @atlaskit/code\n              --ds--code--line-number-bg-color: ", ";\n            }\n          }\n        }\n      }\n    }\n  }\n"])), (0, _tableCell.tableCellBackgroundStyleOverride)(), TableSharedCssClassName.TABLE_CONTAINER, "var(--ds-space-200, 16px)", TableSharedCssClassName.TABLE_CONTAINER, _editorSharedStyles.akEditorTableNumberColumnWidth - 1, TableSharedCssClassName.TABLE_RESIZER_CONTAINER, TableSharedCssClassName.TABLE_RESIZER_CONTAINER, TableSharedCssClassName.TABLE_NODE_WRAPPER, "var(--ds-space-300, 24px)", TableSharedCssClassName.TABLE_CONTAINER, TableSharedCssClassName.TABLE_STICKY_WRAPPER, "var(--ds-space-300, 24px)", "var(--ds-space-100, 8px)", TableSharedCssClassName.TABLE_CONTAINER, TableSharedCssClassName.TABLE_NODE_WRAPPER, TableSharedCssClassName.TABLE_STICKY_WRAPPER, tableCellBorderWidth, "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorder, ")"), "var(--ds-background-neutral-subtle, white)", tableCellMinWidth, "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorder, ")"), "var(--ds-space-100, 8px)", _browser.default.gecko || _browser.default.ie || _browser.default.mac && _browser.default.chrome ? 'background-clip: padding-box;' : '', "var(--ds-space-150, 12px)", "var(--ds-background-accent-gray-subtlest, ".concat(_editorSharedStyles.akEditorTableToolbar, ")"), _codeBlock.CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, "var(--ds-surface-raised, rgb(235, 237, 240))", _editorSharedStyles.akEditorSelectedNodeClassName, "var(--ds-border, transparent)", _codeBlock.CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER, (0, _editorSharedStyles.overflowShadow)({
     leftCoverWidth: "var(--ds-space-300, 24px)"

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

@@ -1,16 +1,14 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.tableCellBackgroundStyleOverride = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
 var _adfSchema = require("@atlaskit/adf-schema");
 var _editorPalette = require("@atlaskit/editor-palette");
-var _templateObject;
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+
 // This is used in order to support usage of DS tokens. Table cell background-color
 // is set inline in '@atlaskit/adf-schema' and the color value is stored in ADF so
 // it is not possible to use tokens there without polluting ADF.
@@ -27,5 +25,5 @@ var mapBackgroundColors = function mapBackgroundColors() {
   return cssString;
 };
 var tableCellBackgroundStyleOverride = exports.tableCellBackgroundStyleOverride = function tableCellBackgroundStyleOverride() {
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n"])), mapBackgroundColors());
+  return (0, _react.css)(mapBackgroundColors());
 };

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

@@ -1,11 +1,15 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.textColorStyles = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
-var _templateObject;
-var textColorStyles = exports.textColorStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .fabric-text-color-mark {\n    color: var(--custom-palette-color, inherit);\n  }\n\n  a .fabric-text-color-mark {\n    color: unset;\n  }\n"])));
+var textColorStyles = exports.textColorStyles = (0, _react.css)({
+  '.fabric-text-color-mark': {
+    color: 'var(--custom-palette-color, inherit)'
+  },
+  'a .fabric-text-color-mark': {
+    color: 'unset'
+  }
+});

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

@@ -15,4 +15,6 @@ var UnsupportedSharedCssClassName = exports.UnsupportedSharedCssClassName = {
 };
 var inlineUnsupportedSelector = ".".concat(UnsupportedSharedCssClassName.INLINE_CONTAINER, " > span:nth-of-type(2)");
 var blockUnsupportedSelector = ".".concat(UnsupportedSharedCssClassName.BLOCK_CONTAINER, " > div");
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Nested `getSelectionStyles` would need a rebuild to autofix
 var unsupportedStyles = exports.unsupportedStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", ", ", " {\n    cursor: pointer;\n  }\n\n  .", "", ",\n    .", "", " {\n    ", "\n  }\n\n  .danger {\n    .", "", ",\n      .", "", " {\n      border: ", "px solid\n        ", ";\n      background-color: ", ";\n    }\n  }\n"])), blockUnsupportedSelector, inlineUnsupportedSelector, _editorSharedStyles.akEditorSelectedNodeClassName, blockUnsupportedSelector, _editorSharedStyles.akEditorSelectedNodeClassName, inlineUnsupportedSelector, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Background, _editorSharedStyles.SelectionStyle.Border]), _editorSharedStyles.akEditorSelectedNodeClassName, blockUnsupportedSelector, _editorSharedStyles.akEditorSelectedNodeClassName, inlineUnsupportedSelector, _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), "var(--ds-blanket-danger, ".concat(_editorSharedStyles.akEditorDeleteBackgroundWithOpacity, ")"));

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

@@ -1,11 +1,11 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.whitespaceSharedStyles = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
-var _templateObject;
-var whitespaceSharedStyles = exports.whitespaceSharedStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  word-wrap: break-word;\n  white-space: pre-wrap;\n"])));
+var whitespaceSharedStyles = exports.whitespaceSharedStyles = (0, _react.css)({
+  wordWrap: 'break-word',
+  whiteSpace: 'pre-wrap'
+});

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

@@ -22,7 +22,7 @@ var _templateObject, _templateObject2, _templateObject3;
 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; })(); } /** @jsx jsx */
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "78.11.5";
+var packageVersion = "78.11.6";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {

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

@@ -17,7 +17,7 @@ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _utils = require("../../utils");
 var _breakout = require("../../utils/breakout");
 var _excluded = ["children"];
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var _templateObject, _templateObject2, _templateObject3;
 /** @jsx jsx */
 function float(layout) {
   switch (layout) {
@@ -159,20 +159,28 @@ var MediaSingleDimensionHelper = exports.MediaSingleDimensionHelper = function M
     isNestedNode = _ref$isNestedNode === void 0 ? false : _ref$isNestedNode,
     _ref$isInsideOfInline = _ref.isInsideOfInlineExtension,
     isInsideOfInlineExtension = _ref$isInsideOfInline === void 0 ? false : _ref$isInsideOfInline;
-  return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  /* For nested rich media items, set max-width to 100% */\n  tr &,\n  [data-layout-column] &,\n  [data-node-type='expand'] &,\n  [data-panel-type] &,\n  li & {\n    max-width: 100%;\n  }\n\n  width: ", ";\n  ", "\n  max-width: ", ";\n\n  ", "\n\n  &:not(.is-resizing) {\n    transition: width 100ms ease-in;\n  }\n\n  float: ", ";\n  margin: ", ";\n\n  &[class*='not-resizing'] {\n    ", "\n  }\n\n  ", ";\n"])), isExtendedResizeExperienceOn ? "".concat(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 && (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    min-width: 100%;\n  "]))), isExtendedResizeExperienceOn ? "".concat(containerWidth, "px") : calcMaxWidth(layout, containerWidth), isExtendedResizeExperienceOn && "&[class*='is-resizing'] {\n    .new-file-experience-wrapper {\n      box-shadow: none !important;\n    }\n\n    ".concat(!isNestedNode && _utils.nonWrappedLayouts.includes(layout) && "margin-left: 50%;\n      transform: translateX(-50%);", "\n  }"), float(layout), calcMargin(layout), isNestedNode ? /* Make nested node appear responsive when resizing table cell */"max-width: 100%;" : _utils.nonWrappedLayouts.includes(layout) && "margin-left: 50%;\n        transform: translateX(-50%);", isImageAligned(layout));
+  return (// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
+    (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    /* For nested rich media items, set max-width to 100% */\n    tr &,\n    [data-layout-column] &,\n    [data-node-type='expand'] &,\n    [data-panel-type] &,\n    li & {\n      max-width: 100%;\n    }\n\n    width: ", ";\n    ", "\n    max-width: ", ";\n\n    ", "\n\n    &:not(.is-resizing) {\n      transition: width 100ms ease-in;\n    }\n\n    float: ", ";\n    margin: ", ";\n\n    &[class*='not-resizing'] {\n      ", "\n    }\n\n    ", ";\n  "])), isExtendedResizeExperienceOn ? "".concat(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 && (0, _react2.css)({
+      minWidth: '100%'
+    }), isExtendedResizeExperienceOn ? "".concat(containerWidth, "px") : calcMaxWidth(layout, containerWidth), isExtendedResizeExperienceOn && "&[class*='is-resizing'] {\n    .new-file-experience-wrapper {\n      box-shadow: none !important;\n    }\n\n    ".concat(!isNestedNode && _utils.nonWrappedLayouts.includes(layout) && "margin-left: 50%;\n      transform: translateX(-50%);", "\n  }"), float(layout), calcMargin(layout), isNestedNode ? /* Make nested node appear responsive when resizing table cell */"max-width: 100%;" : _utils.nonWrappedLayouts.includes(layout) && "margin-left: 50%;\n        transform: translateX(-50%);", isImageAligned(layout))
+  );
 };
 var RenderFallbackContainer = function RenderFallbackContainer(_ref2) {
   var hasFallbackContainer = _ref2.hasFallbackContainer,
     paddingBottom = _ref2.paddingBottom,
     height = _ref2.height;
-  return (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n"])), hasFallbackContainer ? "\n  &::after {\n    content: '';\n    display: block;\n    ".concat(height ? "height: ".concat(height, "px;") : paddingBottom ? "padding-bottom: ".concat(paddingBottom, ";") : '', "\n\n    /* Fixes extra padding problem in Firefox */\n    font-size: 0;\n    line-height: 0;\n  }\n  ") : '');
+  return (// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
+    (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    ", "\n  "])), hasFallbackContainer ? "\n  &::after {\n    content: '';\n    display: block;\n    ".concat(height ? "height: ".concat(height, "px;") : paddingBottom ? "padding-bottom: ".concat(paddingBottom, ";") : '', "\n\n    /* Fixes extra padding problem in Firefox */\n    font-size: 0;\n    line-height: 0;\n  }\n  ") : '')
+  );
 };
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
 var mediaWrapperStyle = exports.mediaWrapperStyle = function mediaWrapperStyle(props) {
-  return (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n\n  ", "\n\n  /* Editor */\n  & > figure {\n    position: ", ";\n    height: 100%;\n    width: 100%;\n  }\n\n  & > div {\n    position: ", ";\n    height: 100%;\n    width: 100%;\n  }\n\n  &[data-node-type='embedCard'] > div {\n    width: 100%;\n  }\n\n  /* Renderer */\n  [data-node-type='media'] {\n    position: static !important;\n\n    > div {\n      position: absolute;\n      height: 100%;\n    }\n  }\n"])), RenderFallbackContainer(props), props.hasFallbackContainer ? 'absolute' : 'relative', props.hasFallbackContainer ? 'absolute' : 'relative');
+  return (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n\n  ", "\n\n  /* Editor */\n  & > figure {\n    position: ", ";\n    height: 100%;\n    width: 100%;\n  }\n\n  & > div {\n    position: ", ";\n    height: 100%;\n    width: 100%;\n  }\n\n  &[data-node-type='embedCard'] > div {\n    width: 100%;\n  }\n\n  /* Renderer */\n  [data-node-type='media'] {\n    position: static !important;\n\n    > div {\n      position: absolute;\n      height: 100%;\n    }\n  }\n"])), RenderFallbackContainer(props), props.hasFallbackContainer ? 'absolute' : 'relative', props.hasFallbackContainer ? 'absolute' : 'relative');
 };
 var MediaWrapper = exports.MediaWrapper = function MediaWrapper(_ref3) {
   var children = _ref3.children,

package/dist/cjs/ui/ResizerLegacy/styled.js

@@ -9,6 +9,7 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 var _react = require("@emotion/react");
 var _styled = require("../MediaSingle/styled");
 var _templateObject;
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
 var wrapperStyle = exports.wrapperStyle = function wrapperStyle(props) {
   return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  & > div {\n    ", ";\n    position: relative;\n    clear: both;\n\n    > div {\n      position: absolute;\n      height: 100%;\n      width: 100%;\n    }\n  }\n"])), (0, _styled.MediaSingleDimensionHelper)(props));
 };

package/dist/cjs/ui/clear-next-sibling-margin-top.js

@@ -5,14 +5,21 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.clearNextSiblingMarginTopStyle = exports.clearNextSiblingBlockMarkMarginTopStyle = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
-var _templateObject, _templateObject2;
 // We use !important to ensure next sibling gets the margin reset no matter what
-var marginTopReset = "margin-top: 0 !important;";
-var clearNextSiblingMarginTopStyle = exports.clearNextSiblingMarginTopStyle = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  & + * {\n    ", "\n  }\n"])), marginTopReset);
+
+var clearNextSiblingMarginTopStyle = exports.clearNextSiblingMarginTopStyle = (0, _react.css)({
+  '& + *': {
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+    marginTop: '0 !important'
+  }
+});
 var textElements = ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
 var nextSiblingBlockMarkContentSelectors = textElements.map(function (elem) {
   return "+ .fabric-editor-block-mark > ".concat(elem);
 }).join(',');
-var clearNextSiblingBlockMarkMarginTopStyle = exports.clearNextSiblingBlockMarkMarginTopStyle = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", " {\n    ", "\n  }\n"])), nextSiblingBlockMarkContentSelectors, marginTopReset);
+var clearNextSiblingBlockMarkMarginTopStyle = exports.clearNextSiblingBlockMarkMarginTopStyle = (0, _react.css)((0, _defineProperty2.default)({}, "".concat(nextSiblingBlockMarkContentSelectors), {
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+  marginTop: '0 !important'
+}));

package/dist/es2019/collab/index.js

@@ -132,51 +132,44 @@ export const colors = [themeColors.R100, themeColors.R300, themeColors.R500, the
   solid,
   selection: hexToRgba(solid, 0.2)
 }));
-const telepointerColorStyle = (color, index) => `
-  &.color-${index} {
-    background-color: ${color.selection};
-    &::after {
-      background-color: ${color.solid};
-      color: ${"var(--ds-text-inverse, #fff)"};
-      border-color: ${color.solid};
-    }
-  }
-`;
 export const TELEPOINTER_DIM_CLASS = 'telepointer-dim';
-
-// Disable top: -14px since it is necessary to align to cursor
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
-export const telepointerStyle = css`
-  .ProseMirror .telepointer {
-    position: relative;
-    transition: opacity 200ms;
-
-    &.telepointer-selection {
-      line-height: 1.2;
-      pointer-events: none;
-      user-select: none;
-    }
-
-    &.telepointer-selection-badge::after {
-      content: attr(data-initial);
-      position: absolute;
-      display: block;
-      top: -14px;
-      font-size: ${relativeFontSizeToBase16(9)};
-      padding: ${"var(--ds-space-025, 2px)"};
-      color: ${"var(--ds-text-inverse, white)"};
-      left: 0px;
-      border-radius: 2px 2px 2px 0;
-      line-height: initial;
+export const telepointerStyle = css({
+  '.ProseMirror .telepointer': {
+    position: 'relative',
+    transition: 'opacity 200ms',
+    '&.telepointer-selection': {
+      lineHeight: 1.2,
+      pointerEvents: 'none',
+      userSelect: 'none'
+    },
+    '&.telepointer-selection-badge::after': {
+      content: 'attr(data-initial)',
+      position: 'absolute',
+      display: 'block',
+      // Disable top: -14px since it is necessary to align to cursor
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+      top: '-14px',
+      fontSize: relativeFontSizeToBase16(9),
+      padding: "var(--ds-space-025, 2px)",
+      color: "var(--ds-text-inverse, white)",
+      left: '0px',
+      borderRadius: '2px 2px 2px 0',
+      lineHeight: 'initial'
+    },
+    [`&.${TELEPOINTER_DIM_CLASS}`]: {
+      opacity: 0.2
     }
-
-    &.${TELEPOINTER_DIM_CLASS} {
-      opacity: 0.2;
+  }
+}, ...colors.map((color, index) => ({
+  [`&.color-${index}`]: {
+    backgroundColor: color.selection,
+    '&::after': {
+      backgroundColor: color.solid,
+      color: "var(--ds-text-inverse, #fff)",
+      borderColor: color.solid
     }
-
-    ${colors.map((color, index) => telepointerColorStyle(color, index))};
   }
-`;
+})));
 const tintKey = 'collab:isDirtyTransaction';
 export const isDirtyTransaction = tr => {
   return Boolean(tr.getMeta(tintKey));

package/dist/es2019/keymaps/index.js

@@ -90,17 +90,13 @@ const arrowKeysMap = {
   ARROWUP: '\u2191',
   ARROWDOWN: '\u2193'
 };
-const tooltipShortcutStyle = css`
-  border-radius: 2px;
-  background-color: ${`var(--ds-background-inverse-subtle, ${N400})`};
-  padding: 0 ${"var(--ds-space-025, 2px)"};
-
-  /* TODO: fix in develop: https://atlassian.slack.com/archives/CFG3PSQ9E/p1647395052443259?thread_ts=1647394572.556029&cid=CFG3PSQ9E */
-  /* stylelint-disable-next-line */
-  label: tooltip-shortcut;
-`;
-/* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
-
+const tooltipShortcutStyle = css({
+  borderRadius: '2px',
+  backgroundColor: `var(--ds-background-inverse-subtle, ${N400})`,
+  padding: `0 ${"var(--ds-space-025, 2px)"}`,
+  // NOTE: This might not actually do anything: https://atlassian.slack.com/archives/CFG3PSQ9E/p1647395052443259?thread_ts=1647394572.556029&cid=CFG3PSQ9E
+  label: 'tooltip-shortcut'
+});
 function formatShortcut(keymap) {
   let shortcut;
   if (browser.mac) {

package/dist/es2019/media-inline/media-inline-image-card.js

@@ -1,5 +1,4 @@
 /** @jsx jsx */
-
 import { Fragment, useCallback, useEffect, useMemo, useState } from 'react';
 import { jsx } from '@emotion/react';
 import ReactDOM from 'react-dom';

package/dist/es2019/media-inline/styles.js

@@ -7,6 +7,7 @@ export const INLINE_IMAGE_BORDER_SIZE_CSS_VAR_KEY = '--editor-media-inline-image
 export const INLINE_IMAGE_BORDER_COLOR_CSS_VAR_KEY = '--editor-media-inline-image-border-color';
 
 // We implemented such selectors to ensure specificity:
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Nested and dynamic css calls are violations, needs manual remediation
 const inlineImageHeight = (height, margin = 0) => css`
   /* Editor style */
   > .mediaInlineView-content-wrap > .${INLINE_IMAGE_WRAPPER_CLASS_NAME},
@@ -25,6 +26,7 @@ const inlineImageHeight = (height, margin = 0) => css`
  * shift in top and bottom and size adjustments to make up for lack of 1to1 size
  * mapping
  */
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Nested and dynamic css calls are violations, needs manual remediation
 export const mediaInlineImageStyles = css`
   // p, h3, and action items
   .${INLINE_IMAGE_WRAPPER_CLASS_NAME} {

package/dist/es2019/media-inline/views/icon-wrapper.js

@@ -1,5 +1,4 @@
 /** @jsx jsx */
-
 import { css, jsx } from '@emotion/react';
 const wrapperStyle = css({
   display: 'flex',

package/dist/es2019/monitoring/error.js

@@ -1,6 +1,6 @@
 const SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 const packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-const packageVersion = "78.11.5";
+const packageVersion = "78.11.6";
 const sanitiseSentryEvents = (data, _hint) => {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

package/dist/es2019/selection/gap-cursor/styles.js

@@ -1,17 +1,19 @@
 import { css, keyframes } from '@emotion/react';
-const gapCursorBlink = keyframes`
-  from, to {
-    opacity: 0;
+const gapCursorBlink = keyframes({
+  'from, to': {
+    opacity: 0
+  },
+  '50%': {
+    opacity: 1
   }
-  50% {
-    opacity: 1;
-  }
-`;
+});
 export const hideCaretModifier = 'ProseMirror-hide-gapcursor';
 const gapCursor = '.ProseMirror-gapcursor';
 const prosemirrorwidget = '.ProseMirror-widget';
 const wrapLeft = '[layout="wrap-left"]';
 const wrapRight = '[layout="wrap-right"]';
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- This needs manual remediation, it autofixes seemingly safely, but the code style and readability is destroyed.
 export const gapCursorStyles = css`
   /* =============== GAP CURSOR ================== */
   .ProseMirror {

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

@@ -9,22 +9,23 @@ export const AnnotationSharedClassNames = {
 const Y75a = 'rgba(255, 240, 179, 0.5)';
 const Y200a = 'rgba(255, 196, 0, 0.82)';
 export const AnnotationSharedCSSByState = () => ({
-  focus: css`
+  focus: css({
     // Background is not coming through in confluence, suspecting to be caused by some specific combination of
     // emotion and token look up
-
-    background: ${`var(--ds-background-accent-yellow-subtler, ${Y75})`};
-    border-bottom: 2px solid ${`var(--ds-border-accent-yellow, ${Y300})`};
+    background: `var(--ds-background-accent-yellow-subtler, ${Y75})`,
+    borderBottom: `2px solid ${`var(--ds-border-accent-yellow, ${Y300})`}`,
     // TODO: https://product-fabric.atlassian.net/browse/DSP-4147
-    box-shadow: ${`var(--ds-shadow-overlay, ${`1px 2px 3px ${N60A}, -1px 2px 3px ${N60A}`})`};
-    cursor: pointer;
-  `,
-  blur: css`
-    background: ${`var(--ds-background-accent-yellow-subtlest, ${Y75a})`};
-    border-bottom: 2px solid ${`var(--ds-border-accent-yellow, ${Y200a})`};
-    cursor: pointer;
-  `
+    boxShadow: `var(--ds-shadow-overlay, ${`1px 2px 3px ${N60A}, -1px 2px 3px ${N60A}`})`,
+    cursor: 'pointer'
+  }),
+  blur: css({
+    background: `var(--ds-background-accent-yellow-subtlest, ${Y75a})`,
+    borderBottom: `2px solid ${`var(--ds-border-accent-yellow, ${Y200a})`}`,
+    cursor: 'pointer'
+  })
 });
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- `AnnotationSharedCSSByState()` is not safe in object syntax
 export const annotationSharedStyles = () => css`
   .ProseMirror {
     .${AnnotationSharedClassNames.focus} {