@atlaskit/editor-common 78.11.5 → 78.11.7

package/dist/esm/styles/shared/headings.js

@@ -1,10 +1,41 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { css } from '@emotion/react';
 import { h100, h300, h400, h500, h600, h700 } from '@atlaskit/theme/typography';
 
 // @see typography spreadsheet: https://docs.google.com/spreadsheets/d/1iYusRGCT4PoPfvxbJ8NrgjtfFgXLm5lpDWXzjua1W2E/edit#gid=93913128
 // text sizing prototype: http://proto/fabricrender/
 export var headingsSharedStyles = function headingsSharedStyles() {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  & h1 {\n    ", ";\n    margin-bottom: 0;\n    margin-top: 1.667em;\n  }\n\n  & h2 {\n    ", ";\n    margin-top: 1.8em;\n    margin-bottom: 0;\n  }\n\n  & h3 {\n    ", ";\n    margin-top: 2em;\n    margin-bottom: 0;\n  }\n\n  & h4 {\n    ", ";\n    margin-top: 1.357em;\n  }\n\n  & h5 {\n    ", ";\n    margin-top: 1.667em;\n    text-transform: none;\n  }\n\n  & h6 {\n    ", ";\n    margin-top: 1.455em;\n    text-transform: none;\n  }\n"])), h700(), h600(), h500(), h400(), h300(), h100());
+  return css({
+    '& h1': _objectSpread(_objectSpread({}, h700()), {}, {
+      marginBottom: 0,
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+      marginTop: '1.667em'
+    }),
+    '& h2': _objectSpread(_objectSpread({}, h600()), {}, {
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+      marginTop: '1.8em',
+      marginBottom: 0
+    }),
+    '& h3': _objectSpread(_objectSpread({}, h500()), {}, {
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+      marginTop: '2em',
+      marginBottom: 0
+    }),
+    '& h4': _objectSpread(_objectSpread({}, h400()), {}, {
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+      marginTop: '1.357em'
+    }),
+    '& h5': _objectSpread(_objectSpread({}, h300()), {}, {
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+      marginTop: '1.667em',
+      textTransform: 'none'
+    }),
+    '& h6': _objectSpread(_objectSpread({}, h100()), {}, {
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+      marginTop: '1.455em',
+      textTransform: 'none'
+    })
+  });
 };

package/dist/esm/styles/shared/indentation.js

@@ -1,6 +1,29 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
 import { css } from '@emotion/react';
-
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
-export var indentationSharedStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .fabric-editor-indentation-mark {\n    &[data-level='1'] {\n      margin-left: 30px;\n    }\n    &[data-level='2'] {\n      margin-left: 60px;\n    }\n    &[data-level='3'] {\n      margin-left: 90px;\n    }\n    &[data-level='4'] {\n      margin-left: 120px;\n    }\n    &[data-level='5'] {\n      margin-left: 150px;\n    }\n    &[data-level='6'] {\n      margin-left: 180px;\n    }\n  }\n"])));
+export var indentationSharedStyles = css({
+  '.fabric-editor-indentation-mark': {
+    "&[data-level='1']": {
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+      marginLeft: '30px'
+    },
+    "&[data-level='2']": {
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+      marginLeft: '60px'
+    },
+    "&[data-level='3']": {
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+      marginLeft: '90px'
+    },
+    "&[data-level='4']": {
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+      marginLeft: '120px'
+    },
+    "&[data-level='5']": {
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+      marginLeft: '150px'
+    },
+    "&[data-level='6']": {
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+      marginLeft: '180px'
+    }
+  }
+});

package/dist/esm/styles/shared/link.js

@@ -1,5 +1,7 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
 import { css } from '@emotion/react';
-var linkSharedStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  a.blockLink {\n    display: block;\n  }\n"])));
+var linkSharedStyle = css({
+  'a.blockLink': {
+    display: 'block'
+  }
+});
 export { linkSharedStyle };

package/dist/esm/styles/shared/lists.js

@@ -42,4 +42,6 @@ export function getOrderedListInlineStyles(itemCounterDigitsSize, styleFormat) {
   }
   return style;
 }
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- There is some "flow-root" hack that is not actually valid css.  Do note, this might not even work in Compiled (or Emotion) due to the way tagged template expressions are parsed…
 export var listsSharedStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  /* =============== INDENTATION SPACING ========= */\n\n  ul,\n  ol {\n    box-sizing: border-box;\n    padding-left: var(\n      ", ",\n      ", "px\n    );\n\n    /*\n    Firefox does not handle empty block element inside li tag.\n    If there is not block element inside li tag,\n      then firefox sets inherited height to li\n    However, if there is any block element and if it's empty\n      (or has empty inline element) then\n    firefox sets li tag height to zero.\n    More details at\n    https://product-fabric.atlassian.net/wiki/spaces/~455502413/pages/3149365890/ED-14110+Investigation\n    */\n    li p:empty,\n    li p > span:empty {\n      ", "\n    }\n  }\n\n  ", ", ", " {\n    /*\n      Ensures list item content adheres to the list's margin instead\n      of filling the entire block row. This is important to allow\n      clicking interactive elements which are floated next to a list.\n\n      For some history and context on this block, see PRs related to tickets.:\n      @see ED-6551 - original issue.\n      @see ED-7015 - follow up issue.\n      @see ED-7447 - flow-root change.\n\n      We use 'display: table' (old clear fix / new block formatting context hack)\n      for older browsers and 'flow-root' for modern browsers.\n\n      @see https://css-tricks.com/display-flow-root/\n    */\n    // For older browsers the do not support flow-root.\n    /* stylelint-disable declaration-block-no-duplicate-properties */\n    display: table;\n    display: flow-root;\n    /* stylelint-enable declaration-block-no-duplicate-properties */\n  }\n\n  /* =============== INDENTATION AESTHETICS ========= */\n\n  /**\n        We support nested lists up to six levels deep.\n    **/\n\n  /* LEGACY LISTS */\n\n  ul,\n  ul ul ul ul {\n    list-style-type: disc;\n  }\n\n  ul ul,\n  ul ul ul ul ul {\n    list-style-type: circle;\n  }\n\n  ul ul ul,\n  ul ul ul ul ul ul {\n    list-style-type: square;\n  }\n\n  ol,\n  ol ol ol ol {\n    list-style-type: decimal;\n  }\n  ol ol,\n  ol ol ol ol ol {\n    list-style-type: lower-alpha;\n  }\n  ol ol ol,\n  ol ol ol ol ol ol {\n    list-style-type: lower-roman;\n  }\n\n  /* PREDICTABLE LISTS */\n\n  ol[data-indent-level='1'],\n  ol[data-indent-level='4'] {\n    list-style-type: decimal;\n  }\n\n  ol[data-indent-level='2'],\n  ol[data-indent-level='5'] {\n    list-style-type: lower-alpha;\n  }\n\n  ol[data-indent-level='3'],\n  ol[data-indent-level='6'] {\n    list-style-type: lower-roman;\n  }\n\n  ul[data-indent-level='1'],\n  ul[data-indent-level='4'] {\n    list-style-type: disc;\n  }\n\n  ul[data-indent-level='2'],\n  ul[data-indent-level='5'] {\n    list-style-type: circle;\n  }\n\n  ul[data-indent-level='3'],\n  ul[data-indent-level='6'] {\n    list-style-type: square;\n  }\n"])), CSS_VAR_NAMES.ITEM_COUNTER_PADDING, listItemCounterPadding, browser.gecko ? 'display: inline-block;' : '', orderedListSelector, bulletListSelector);

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

@@ -1,7 +1,43 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _css;
 import { css } from '@emotion/react';
 var richMediaClassName = 'rich-media-item';
 var wrappedMediaBreakoutPoint = 410;
-var mediaSingleSharedStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  li .", " {\n    margin: 0;\n  }\n\n  /* Hack for chrome to fix media single position\n     inside a list when media is the first child */\n  &.ua-chrome li > .mediaSingleView-content-wrap::before {\n    content: '';\n    display: block;\n    height: 0;\n  }\n\n  &.ua-firefox {\n    .mediaSingleView-content-wrap {\n      user-select: none;\n    }\n\n    .captionView-content-wrap {\n      user-select: text;\n    }\n  }\n\n  .mediaSingleView-content-wrap[layout='center'] {\n    clear: both;\n  }\n\n  table .", " {\n    margin-top: ", ";\n    margin-bottom: ", ";\n    clear: both;\n\n    &.image-wrap-left,\n    &.image-wrap-right {\n      clear: none;\n\n      &:first-child {\n        margin-top: ", ";\n      }\n    }\n  }\n\n  .", ".image-wrap-right\n    + .", ".image-wrap-left {\n    clear: both;\n  }\n\n  .", ".image-wrap-left\n    + .", ".image-wrap-right,\n    .", ".image-wrap-right\n    + .", ".image-wrap-left,\n    .", ".image-wrap-left\n    + .", ".image-wrap-left,\n    .", ".image-wrap-right\n    + .", ".image-wrap-right {\n    margin-right: 0;\n    margin-left: 0;\n  }\n\n  @media all and (max-width: ", "px) {\n    div.mediaSingleView-content-wrap[layout='wrap-left'],\n    div.mediaSingleView-content-wrap[data-layout='wrap-left'],\n    div.mediaSingleView-content-wrap[layout='wrap-right'],\n    div.mediaSingleView-content-wrap[data-layout='wrap-right'] {\n      float: none;\n      overflow: auto;\n      margin: ", " 0;\n    }\n  }\n"])), richMediaClassName, richMediaClassName, "var(--ds-space-150, 12px)", "var(--ds-space-150, 12px)", "var(--ds-space-150, 12px)", richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, wrappedMediaBreakoutPoint, "var(--ds-space-150, 12px)");
+var mediaSingleSharedStyle = css((_css = {}, _defineProperty(_css, "li .".concat(richMediaClassName), {
+  margin: 0
+}), _defineProperty(_css, '&.ua-chrome li > .mediaSingleView-content-wrap::before', {
+  content: "''",
+  display: 'block',
+  height: 0
+}), _defineProperty(_css, '&.ua-firefox', {
+  '.mediaSingleView-content-wrap': {
+    userSelect: 'none'
+  },
+  '.captionView-content-wrap': {
+    userSelect: 'text'
+  }
+}), _defineProperty(_css, ".mediaSingleView-content-wrap[layout='center']", {
+  clear: 'both'
+}), _defineProperty(_css, "table .".concat(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)"
+    }
+  }
+}), _defineProperty(_css, ".".concat(richMediaClassName, ".image-wrap-right + .").concat(richMediaClassName, ".image-wrap-left"), {
+  clear: 'both'
+}), _defineProperty(_css, ".".concat(richMediaClassName, ".image-wrap-left + .").concat(richMediaClassName, ".image-wrap-right, .").concat(richMediaClassName, ".image-wrap-right + .").concat(richMediaClassName, ".image-wrap-left, .").concat(richMediaClassName, ".image-wrap-left + .").concat(richMediaClassName, ".image-wrap-left, .").concat(richMediaClassName, ".image-wrap-right + .").concat(richMediaClassName, ".image-wrap-right"), {
+  marginRight: 0,
+  marginLeft: 0
+}), _defineProperty(_css, "@media all and (max-width: ".concat(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)".concat(" 0")
+  }
+}), _css));
 export { mediaSingleSharedStyle, richMediaClassName };

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

@@ -1,6 +1,7 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-var _templateObject, _templateObject2;
+var _templateObject;
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import { css } from '@emotion/react';
 import { PanelType } from '@atlaskit/adf-schema';
@@ -157,9 +158,11 @@ export var getPanelTypeBackground = function getPanelTypeBackground(panelType) {
 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…
 export var panelSharedStylesWithoutPrefix = function panelSharedStylesWithoutPrefix() {
   return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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)", blockNodesVerticalMargin, "var(--ds-space-100, 8px)", "var(--ds-space-200, 16px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", akEditorTableCellMinWidth, mainDynamicStyles(PanelType.INFO), PanelSharedCssClassName.icon, "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)", "var(--ds-space-100, 8px)", iconDynamicStyles(PanelType.INFO), emojiSprite, panelEmojiSpriteVerticalAlignment, emojiImage, panelEmojiImageVerticalAlignment, "var(--ds-space-025, 2px)", "var(--ds-space-025, 2px)", PanelType.NOTE, mainDynamicStyles(PanelType.NOTE), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.NOTE), PanelType.TIP, mainDynamicStyles(PanelType.TIP), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.TIP), PanelType.WARNING, mainDynamicStyles(PanelType.WARNING), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.WARNING), PanelType.ERROR, mainDynamicStyles(PanelType.ERROR), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.ERROR), PanelType.SUCCESS, mainDynamicStyles(PanelType.SUCCESS), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.SUCCESS));
 };
 export var panelSharedStyles = function panelSharedStyles() {
-  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  .", " {\n    ", "\n  }\n"])), PanelSharedCssClassName.prefix, panelSharedStylesWithoutPrefix());
+  return css(_defineProperty({}, ".".concat(PanelSharedCssClassName.prefix), panelSharedStylesWithoutPrefix()));
 };

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

@@ -1,7 +1,15 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
 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 var paragraphSharedStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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"])), akEditorLineHeight, blockNodesVerticalMargin);
+export var 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/esm/styles/shared/plugins.js

@@ -1,14 +1,38 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 import { css } from '@emotion/react';
 import { N30 } from '@atlaskit/theme/colors';
-export var buttonGroupStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-flex;\n  align-items: center;\n\n  & > div {\n    display: flex;\n  }\n"])));
+export var 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 var separatorStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background: ", ";\n  width: 1px;\n  height: 24px;\n  display: inline-block;\n  margin: 0 ", ";\n  user-select: none;\n"])), "var(--ds-border, ".concat(N30, ")"), "var(--ds-space-100, 8px)");
+export var separatorStyles = css({
+  background: "var(--ds-border, ".concat(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.
-export var wrapperStyle = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\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"])));
-export var triggerWrapperStyles = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n"])));
+export var wrapperStyle = css({
+  display: 'flex',
+  alignItems: 'center',
+  '> div, > span': {
+    display: 'flex'
+  },
+  '> div > div': {
+    display: 'flex'
+  },
+  marginLeft: 0,
+  minWidth: 'auto'
+});
+export var triggerWrapperStyles = css({
+  display: 'flex'
+});

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

@@ -19,4 +19,6 @@ export var resizerDangerClassName = "".concat(resizerHandleClassName, "-danger")
 var akEditorSelectedNodeClassName = 'ak-editor-selected-node';
 export var handleWrapperClass = 'resizer-handle-wrapper';
 export var 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 var resizerStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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(B200, ")"), resizerDangerClassName, resizerHandleThumbClassName, "var(--ds-icon-danger, ".concat(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(B200, ")"), resizerHandleTrackClassName, resizerHandleThumbClassName, "var(--ds-space-025, 2px)", "var(--ds-border, ".concat(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(B50, ")"), "var(--ds-background-selected, ".concat(B50, ")"), akEditorSelectedNodeClassName, resizerHandleThumbClassName, "var(--ds-border-focused, ".concat(B200, ")"), resizerHoverZoneClassName, resizerExtendedZone, "var(--ds-space-150, 12px)", "var(--ds-space-negative-150, -12px)", resizerHoverZoneClassName, resizerHoverZoneClassName, resizerExtendedZone);

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

@@ -1,9 +1,16 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
 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 var ruleSharedStyles = function ruleSharedStyles() {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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(N30A, ")"), akEditorLineHeight);
+  return css({
+    '& hr': {
+      border: 'none',
+      backgroundColor: "var(--ds-border, ".concat(N30A, ")"),
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+      margin: "".concat(akEditorLineHeight, "em 0"),
+      height: '2px',
+      borderRadius: '1px'
+    }
+  });
 };

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

@@ -41,8 +41,7 @@ var shadowSharedStyle = css((_css = {}, _defineProperty(_css, "& .".concat(shado
   display: 'block'
 }), _defineProperty(_css, "& .".concat(shadowClassNames.RIGHT_SHADOW, "::after"), {
   background: "linear-gradient( to right, transparent 0, ".concat("var(--ds-shadow-overflow-spread, ".concat(N40A, ")"), " ", 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'
 }), _defineProperty(_css, "& .".concat(shadowObserverClassNames.SENTINEL_LEFT), {

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

@@ -6,4 +6,6 @@ import { N0, N40 } from '@atlaskit/theme/colors';
 import { SmartCardSharedCssClassName } from './smart-card';
 export var DATASOURCE_INNER_CONTAINER_CLASSNAME = 'datasourceView-content-inner-wrap';
 export var 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 var smartCardStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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"])), SmartCardSharedCssClassName.INLINE_CARD_CONTAINER, "var(--ds-space-025, 2px)", "var(--ds-space-025, 2px)", SmartCardSharedCssClassName.LOADER_WRAPPER, getSelectionStyles([SelectionStyle.BoxShadow]), akEditorSelectedNodeClassName, SmartCardSharedCssClassName.LOADER_WRAPPER, getSelectionStyles([SelectionStyle.BoxShadow]), SmartCardSharedCssClassName.LOADER_WRAPPER, SmartCardSharedCssClassName.LOADER_WRAPPER, "var(--ds-border-danger, ".concat(akEditorDeleteBorder, ")"), SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, SmartCardSharedCssClassName.LOADER_WRAPPER, akEditorSelectedNodeClassName, SmartCardSharedCssClassName.LOADER_WRAPPER, getSelectionStyles([SelectionStyle.BoxShadow]), "var(--ds-border-radius-200, 8px)", SmartCardSharedCssClassName.LOADER_WRAPPER, "var(--ds-border-danger, ".concat(akEditorDeleteBorder, ")"), SmartCardSharedCssClassName.DATASOURCE_CONTAINER, SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, DATASOURCE_INNER_CONTAINER_CLASSNAME, "var(--ds-background-neutral-subtle, ".concat(N0, ")"), "var(--ds-border-radius-200, 8px)", "var(--ds-border, ".concat(N40, ")"), akEditorSelectedNodeClassName, DATASOURCE_INNER_CONTAINER_CLASSNAME, getSelectionStyles([SelectionStyle.BoxShadow]), DATASOURCE_INNER_CONTAINER_CLASSNAME, "var(--ds-border-danger, ".concat(akEditorDeleteBorder, ")"), SmartCardSharedCssClassName.EMBED_CARD_CONTAINER, SmartCardSharedCssClassName.LOADER_WRAPPER, akEditorSelectedNodeClassName, SmartCardSharedCssClassName.LOADER_WRAPPER, getSelectionStyles([SelectionStyle.BoxShadow]), "var(--ds-border-danger, ".concat(akEditorDeleteBorder, ")"), "var(--ds-background-danger, ".concat(akEditorDeleteBackground, ")"), "var(--ds-border-danger, ".concat(akEditorDeleteBorder, ")"), FLOATING_TOOLBAR_LINKPICKER_CLASSNAME);

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

@@ -36,6 +36,8 @@ export var TableSharedCssClassName = {
   TABLE_COLUMN_CONTROLS_DECORATIONS: "".concat(tablePrefixSelector, "-column-controls-decoration"),
   TABLE_RESIZER_CONTAINER: "".concat(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 = function tableSharedStyle() {
   return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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"])), tableCellBackgroundStyleOverride(), TableSharedCssClassName.TABLE_CONTAINER, "var(--ds-space-200, 16px)", TableSharedCssClassName.TABLE_CONTAINER, 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(akEditorTableBorder, ")"), "var(--ds-background-neutral-subtle, white)", tableCellMinWidth, "var(--ds-background-accent-gray-subtler, ".concat(akEditorTableBorder, ")"), "var(--ds-space-100, 8px)", browser.gecko || browser.ie || browser.mac && browser.chrome ? 'background-clip: padding-box;' : '', "var(--ds-space-150, 12px)", "var(--ds-background-accent-gray-subtlest, ".concat(akEditorTableToolbar, ")"), CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, "var(--ds-surface-raised, rgb(235, 237, 240))", akEditorSelectedNodeClassName, "var(--ds-border, transparent)", CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER, overflowShadow({
     leftCoverWidth: "var(--ds-space-300, 24px)"

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

@@ -1,5 +1,3 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import { css } from '@emotion/react';
 import { tableBackgroundColorNames } from '@atlaskit/adf-schema';
@@ -20,5 +18,5 @@ var mapBackgroundColors = function mapBackgroundColors() {
   return cssString;
 };
 export var tableCellBackgroundStyleOverride = function tableCellBackgroundStyleOverride() {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n"])), mapBackgroundColors());
+  return css(mapBackgroundColors());
 };

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

@@ -1,4 +1,9 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
 import { css } from '@emotion/react';
-export var textColorStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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"])));
+export var textColorStyles = css({
+  '.fabric-text-color-mark': {
+    color: 'var(--custom-palette-color, inherit)'
+  },
+  'a .fabric-text-color-mark': {
+    color: 'unset'
+  }
+});

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

@@ -8,4 +8,6 @@ export var 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
 export var unsupportedStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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, akEditorSelectedNodeClassName, blockUnsupportedSelector, akEditorSelectedNodeClassName, inlineUnsupportedSelector, getSelectionStyles([SelectionStyle.Background, SelectionStyle.Border]), akEditorSelectedNodeClassName, blockUnsupportedSelector, akEditorSelectedNodeClassName, inlineUnsupportedSelector, akEditorSelectedBorderSize, "var(--ds-border-danger, ".concat(akEditorDeleteBorder, ")"), "var(--ds-blanket-danger, ".concat(akEditorDeleteBackgroundWithOpacity, ")"));

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

@@ -1,5 +1,6 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
 import { css } from '@emotion/react';
-var whitespaceSharedStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  word-wrap: break-word;\n  white-space: pre-wrap;\n"])));
+var whitespaceSharedStyles = css({
+  wordWrap: 'break-word',
+  whiteSpace: 'pre-wrap'
+});
 export { whitespaceSharedStyles };

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

@@ -17,7 +17,7 @@ import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@
 import { N0, N50A, N60A, N900 } from '@atlaskit/theme/colors';
 import Layer from '../Layer';
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "78.11.5";
+var packageVersion = "78.11.7";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {

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

@@ -1,7 +1,7 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _excluded = ["children"];
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var _templateObject, _templateObject2, _templateObject3;
 /** @jsx jsx */
 
 import React from 'react';
@@ -149,20 +149,28 @@ export var MediaSingleDimensionHelper = function MediaSingleDimensionHelper(_ref
     isNestedNode = _ref$isNestedNode === void 0 ? false : _ref$isNestedNode,
     _ref$isInsideOfInline = _ref.isInsideOfInlineExtension,
     isInsideOfInlineExtension = _ref$isInsideOfInline === void 0 ? false : _ref$isInsideOfInline;
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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 && css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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 && 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%;" : 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
+    css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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 && 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 && 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%;" : 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 css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\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
+    css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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
 export var mediaWrapperStyle = function mediaWrapperStyle(props) {
-  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\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 css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\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');
 };
 export var MediaWrapper = function MediaWrapper(_ref3) {
   var children = _ref3.children,

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

@@ -2,6 +2,8 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 var _templateObject;
 import { css } from '@emotion/react';
 import { MediaSingleDimensionHelper } from '../MediaSingle/styled';
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
 export var wrapperStyle = function wrapperStyle(props) {
   return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  & > div {\n    ", ";\n    position: relative;\n    clear: both;\n\n    > div {\n      position: absolute;\n      height: 100%;\n      width: 100%;\n    }\n  }\n"])), MediaSingleDimensionHelper(props));
 };

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

@@ -1,12 +1,19 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2;
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { css } from '@emotion/react';
 
 // We use !important to ensure next sibling gets the margin reset no matter what
-var marginTopReset = "margin-top: 0 !important;";
-export var clearNextSiblingMarginTopStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  & + * {\n    ", "\n  }\n"])), marginTopReset);
+
+export var clearNextSiblingMarginTopStyle = 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(',');
-export var clearNextSiblingBlockMarkMarginTopStyle = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", " {\n    ", "\n  }\n"])), nextSiblingBlockMarkContentSelectors, marginTopReset);
+export var clearNextSiblingBlockMarkMarginTopStyle = css(_defineProperty({}, "".concat(nextSiblingBlockMarkContentSelectors), {
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+  marginTop: '0 !important'
+}));

package/dist/types/collab/index.d.ts

@@ -378,7 +378,7 @@ export type InviteToEditComponentProps = {
 export interface CollabInviteToEditProps {
     inviteToEditHandler?: (event: React.MouseEvent<HTMLElement>) => void;
     isInviteToEditButtonSelected?: boolean;
-    inviteToEditComponent?: React.ComponentType<InviteToEditComponentProps>;
+    inviteToEditComponent?: React.ComponentType<React.PropsWithChildren<InviteToEditComponentProps>>;
 }
 export interface CollabAnalyticsProps {
     /**

package/dist/types/element-browser/components/ElementBrowserLoader.d.ts

@@ -2,5 +2,5 @@
 import React from 'react';
 import Loadable from 'react-loadable';
 import type { Props as ElementBrowserProps } from '../ElementBrowser';
-declare const ElementBrowserLoader: React.ComponentType<ElementBrowserProps> & Loadable.LoadableComponent;
+declare const ElementBrowserLoader: React.ComponentType<React.PropsWithChildren<ElementBrowserProps>> & Loadable.LoadableComponent;
 export default ElementBrowserLoader;

package/dist/types/extensibility/Extension/Extension/index.d.ts

@@ -18,6 +18,8 @@ export interface Props {
     pluginInjectionApi: ExtensionsPluginInjectionAPI;
     showMacroInteractionDesignUpdates?: boolean;
     isNodeSelected?: boolean;
+    isNodeHovered?: boolean;
+    setIsNodeHovered?: (isHovered: boolean) => void;
 }
 /**
  * End workaround

package/dist/types/extensibility/Extension/Lozenge.d.ts

@@ -7,6 +7,7 @@ export interface Props {
     node: PmNode;
     showMacroInteractionDesignUpdates?: boolean;
     isNodeSelected?: boolean;
+    isNodeHovered?: boolean;
     customContainerStyles?: CSSProperties;
 }
 export interface LozengeData {

package/dist/types/extensibility/Extension/LozengeComponent.d.ts

@@ -12,6 +12,7 @@ type LozengeComponentProps = {
     isNodeSelected?: boolean;
     showMacroInteractionDesignUpdates?: boolean;
     customContainerStyles?: CSSProperties;
+    isNodeHovered?: boolean;
 };
-export declare const LozengeComponent: ({ lozengeData, isBlockExtension, title, params, renderImage, isNodeSelected, showMacroInteractionDesignUpdates, customContainerStyles, }: LozengeComponentProps) => jsx.JSX.Element;
+export declare const LozengeComponent: ({ lozengeData, isBlockExtension, title, params, renderImage, isNodeSelected, showMacroInteractionDesignUpdates, customContainerStyles, isNodeHovered, }: LozengeComponentProps) => jsx.JSX.Element;
 export {};

package/dist/types/extensibility/ExtensionComponent.d.ts

@@ -27,6 +27,7 @@ export interface State {
         __hideFrame?: boolean;
     };
     activeChildIndex?: number;
+    isNodeHovered?: boolean;
 }
 export declare class ExtensionComponent extends Component<Props, State> {
     private privatePropsParsed;
@@ -39,6 +40,7 @@ export declare class ExtensionComponent extends Component<Props, State> {
     UNSAFE_componentWillReceiveProps(nextProps: Props): void;
     getNodeRenderer: import("memoize-one").MemoizedFn<typeof getNodeRenderer>;
     getExtensionModuleNodePrivateProps: import("memoize-one").MemoizedFn<typeof getExtensionModuleNodePrivateProps>;
+    setIsNodeHovered: (isHovered: boolean) => void;
     render(): JSX.Element | null;
     private setStateFromPromise;
     /**

package/dist/types/extensibility/MultiBodiedExtension/index.d.ts

@@ -20,6 +20,8 @@ type Props = {
     editorAppearance?: EditorAppearance;
     showMacroInteractionDesignUpdates?: boolean;
     isNodeSelected?: boolean;
+    isNodeHovered?: boolean;
+    setIsNodeHovered?: (isHovered: boolean) => void;
 };
 declare const MultiBodiedExtension: (props: Props & OverflowShadowProps) => jsx.JSX.Element;
 /**

package/dist/types/extensions/types/extension-manifest-common.d.ts

@@ -4,5 +4,5 @@ export type ESModule<T> = {
     default: T;
 };
 export type MaybeESModule<T> = ESModule<T> | T;
-export type ExtensionIcon = ComponentType<any>;
+export type ExtensionIcon = ComponentType<React.PropsWithChildren<any>>;
 export type ExtensionIconModule = Promise<MaybeESModule<ExtensionIcon>>;

package/dist/types/extensions/types/extension-manifest.d.ts

@@ -13,7 +13,7 @@ export type ExtensionComponentProps<T extends Parameters = Parameters> = {
     actions?: MultiBodiedExtensionActions;
     [key: string]: any;
 };
-export type ExtensionComponent<T extends Parameters> = ComponentType<ExtensionComponentProps<T>>;
+export type ExtensionComponent<T extends Parameters> = ComponentType<React.PropsWithChildren<ExtensionComponentProps<T>>>;
 export type ExtensionComponentModule<T extends Parameters> = Promise<MaybeESModule<ExtensionComponent<T>>>;
 export type Serializer<T extends Parameters = Parameters> = (data: T) => string;
 export type Deserializer<T extends Parameters = Parameters> = (value: string) => T;

package/dist/types/icons/index.d.ts

@@ -7,4 +7,4 @@ export { PanelErrorIcon } from './shared/PanelErrorIcon';
 export { PanelSuccessIcon } from './shared/PanelSuccessIcon';
 export { PanelNoteIcon } from './shared/PanelNoteIcon';
 export { BorderIcon } from './shared/BorderIcon';
-export declare const IconTable: React.ComponentType<IconProps> & Loadable.LoadableComponent;
+export declare const IconTable: React.ComponentType<React.PropsWithChildren<IconProps>> & Loadable.LoadableComponent;