@atlaskit/editor-common 74.0.1 → 74.1.0

package/dist/cjs/paste/md-plugins/newline-md-plugin.js

@@ -0,0 +1,67 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+// File has been copied to packages/editor/editor-plugin-ai/src/provider/markdown-transformer/md/newline-md-plugin.ts
+// If changes are made to this file, please make the same update in the linked file.
+
+// ED-15363: modified version of the original newline plugin
+// https://github.com/markdown-it/markdown-it/blob/master/lib/rules_inline/newline.js
+var newline = function newline(state, silent) {
+  var pmax,
+    // ED-15363: unread variables
+    // max,
+    // ws,
+    pos = state.pos;
+  if (state.src.charCodeAt(pos) !== 0x0a /* \n */) {
+    return false;
+  }
+  pmax = state.pending.length - 1;
+  // ED-15363: unread variable
+  // max = state.posMax;
+
+  // '  \n' -> hardbreak
+  // Lookup in pending chars is bad practice! Don't copy to other rules!
+  // Pending string is stored in concat mode, indexed lookups will cause
+  // convertion to flat mode.
+  if (!silent) {
+    if (pmax >= 0 && state.pending.charCodeAt(pmax) === 0x20) {
+      if (pmax >= 1 && state.pending.charCodeAt(pmax - 1) === 0x20) {
+        // ED-15363: We commented out this logic to preserve trailing whitespaces
+        // for each line of text when pasting plain text
+
+        // // Find whitespaces tail of pending chars.
+        // ws = pmax - 1;
+        // while (ws >= 1 && state.pending.charCodeAt(ws - 1) === 0x20) {
+        //   ws--;
+        // }
+        // state.pending = state.pending.slice(0, ws);
+        state.push('hardbreak', 'br', 0);
+      } else {
+        state.pending = state.pending.slice(0, -1);
+        state.push('softbreak', 'br', 0);
+      }
+    } else {
+      state.push('softbreak', 'br', 0);
+    }
+  }
+  pos++;
+
+  // ED-15363: We commented out this logic from the original library to
+  // preserve leading whitespaces for each line of text when pasting plain
+  // text (to preserve whitespace-based indentation).
+
+  // // skip heading spaces for next line
+  // while (pos < max && isSpace(state.src.charCodeAt(pos))) {
+  //   pos++;
+  // }
+
+  state.pos = pos;
+  return true;
+};
+var _default = function _default(md) {
+  return md.inline.ruler.at('newline', newline);
+};
+exports.default = _default;

package/dist/cjs/paste/md-plugins/paragraph-md-plugin.js

@@ -0,0 +1,73 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+// File has been copied to packages/editor/editor-plugin-ai/src/provider/markdown-transformer/md/paragraph-md-plugin.ts
+// If changes are made to this file, please make the same update in the linked file.
+
+// ED-15363: modified version of the original paragraph plugin
+// https://github.com/markdown-it/markdown-it/blob/master/lib/rules_block/paragraph.js
+
+var paragraph = function paragraph(state, startLine) {
+  var content,
+    terminate,
+    i,
+    l,
+    token,
+    oldParentType,
+    nextLine = startLine + 1,
+    terminatorRules = state.md.block.ruler.getRules('paragraph'),
+    endLine = state.lineMax;
+  oldParentType = state.parentType;
+  state.parentType = 'paragraph';
+
+  // jump line-by-line until empty one or EOF
+  for (; nextLine < endLine && !state.isEmpty(nextLine); nextLine++) {
+    // this would be a code block normally, but after paragraph
+    // it's considered a lazy continuation regardless of what's there
+    if (state.sCount[nextLine] - state.blkIndent > 3) {
+      continue;
+    }
+
+    // quirk for blockquotes, this line should already be checked by that rule
+    if (state.sCount[nextLine] < 0) {
+      continue;
+    }
+
+    // Some tags can terminate paragraph without empty line.
+    terminate = false;
+    for (i = 0, l = terminatorRules.length; i < l; i++) {
+      if (terminatorRules[i](state, nextLine, endLine, true)) {
+        terminate = true;
+        break;
+      }
+    }
+    if (terminate) {
+      break;
+    }
+  }
+
+  // ED-15363: We removed .trim() from this logic from the original library to
+  // preserve leading whitespaces at the beginning and end of paragraph blocks
+  // when pasting plain text (to preserve whitespace-based indentation, at the
+  // beginning and end of paragraphs).
+
+  // content = state.getLines(startLine, nextLine, state.blkIndent, false) .trim()
+  content = state.getLines(startLine, nextLine, state.blkIndent, false);
+  state.line = nextLine;
+  token = state.push('paragraph_open', 'p', 1);
+  token.map = [startLine, state.line];
+  token = state.push('inline', '', 0);
+  token.content = content;
+  token.map = [startLine, state.line];
+  token.children = [];
+  token = state.push('paragraph_close', 'p', -1);
+  state.parentType = oldParentType;
+  return true;
+};
+var _default = function _default(md) {
+  return md.block.ruler.at('paragraph', paragraph);
+};
+exports.default = _default;

package/dist/cjs/paste/md.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.md = void 0;
+var _markdownIt = _interopRequireDefault(require("markdown-it"));
+var _ignoreListHeadingMdPlugin = _interopRequireDefault(require("./md-plugins/ignore-list-heading-md-plugin"));
+var _linkifyMdPlugin = _interopRequireDefault(require("./md-plugins/linkify-md-plugin"));
+var _newlineMdPlugin = _interopRequireDefault(require("./md-plugins/newline-md-plugin"));
+var _paragraphMdPlugin = _interopRequireDefault(require("./md-plugins/paragraph-md-plugin"));
+// File has been copied to packages/editor/editor-plugin-ai/src/provider/markdown-transformer/md/index.ts
+// If changes are made to this file, please make the same update in the linked file.
+
+var md = (0, _markdownIt.default)('zero', {
+  html: false
+});
+exports.md = md;
+md.enable([
+// Process html entity - {, ¯, ", ...
+'entity',
+// Process escaped chars and hardbreaks
+'escape', 'newline']);
+md.use(_paragraphMdPlugin.default);
+
+// enable modified version of linkify plugin
+// @see https://product-fabric.atlassian.net/browse/ED-3097
+md.use(_linkifyMdPlugin.default);
+md.use(_newlineMdPlugin.default);
+md.use(_ignoreListHeadingMdPlugin.default);

package/dist/cjs/preset/plugin-injection-api.js

@@ -262,8 +262,10 @@ var EditorPluginInjectionAPI = /*#__PURE__*/function () {
           }
           var plugin = getPluginByName(prop);
           if (!plugin) {
-            // eslint-disable-next-line
-            console.error("Plugin: ".concat(prop, " does not exist"));
+            if (process.env.NODE_ENV === 'development') {
+              // eslint-disable-next-line
+              console.warn("Plugin: ".concat(prop, " does not exist"));
+            }
             return undefined;
           }
           var sharedState = sharedStateAPI.createAPI(plugin);

package/dist/cjs/resizer.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ResizerNext", {
+  enumerable: true,
+  get: function get() {
+    return _Resizer.default;
+  }
+});
+var _Resizer = _interopRequireDefault(require("./ui/Resizer"));

package/dist/cjs/styles/index.js

@@ -183,6 +183,12 @@ Object.defineProperty(exports, "paragraphSharedStyles", {
     return _paragraph.paragraphSharedStyles;
   }
 });
+Object.defineProperty(exports, "resizerStyles", {
+  enumerable: true,
+  get: function get() {
+    return _resizer.resizerStyles;
+  }
+});
 Object.defineProperty(exports, "richMediaClassName", {
   enumerable: true,
   get: function get() {
@@ -308,4 +314,5 @@ var _smartCard = require("./shared/smart-card");
 var _dropdownMenu = require("./shared/dropdown-menu");
 var _codeBlock = require("./shared/code-block");
 var _layout = require("./shared/layout");
-var _extension = require("./shared/extension");
+var _extension = require("./shared/extension");
+var _resizer = require("./shared/resizer");

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

@@ -8,7 +8,6 @@ exports.blockquoteSharedStyles = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
-var _constants = require("@atlaskit/theme/constants");
 var _templateObject;
-var blockquoteSharedStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  & blockquote {\n    box-sizing: border-box;\n    padding-left: ", "px;\n    border-left: 2px solid\n      ", ";\n    margin: ", " 0 0 0;\n    margin-right: 0;\n\n    [dir='rtl'] & {\n      padding-left: 0;\n      padding-right: ", "px;\n    }\n\n    &:first-child {\n      margin-top: 0;\n    }\n\n    &::before {\n      content: '';\n    }\n\n    &::after {\n      content: none;\n    }\n\n    & p {\n      display: block;\n    }\n\n    & table,\n    & table:last-child {\n      display: inline-table;\n    }\n  }\n"])), (0, _constants.gridSize)() * 2, "var(--ds-border, ".concat(_editorSharedStyles.akEditorBlockquoteBorderColor, ")"), _editorSharedStyles.blockNodesVerticalMargin, (0, _constants.gridSize)() * 2);
+var blockquoteSharedStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  & blockquote {\n    box-sizing: border-box;\n    padding-left: ", ";\n    border-left: 2px solid\n      ", ";\n    margin: ", " 0 0 0;\n    margin-right: 0;\n\n    [dir='rtl'] & {\n      padding-left: 0;\n      padding-right: ", ";\n    }\n\n    &:first-child {\n      margin-top: 0;\n    }\n\n    &::before {\n      content: '';\n    }\n\n    &::after {\n      content: none;\n    }\n\n    & p {\n      display: block;\n    }\n\n    & table,\n    & table:last-child {\n      display: inline-table;\n    }\n  }\n"])), "var(--ds-space-200, 16px)", "var(--ds-border, ".concat(_editorSharedStyles.akEditorBlockquoteBorderColor, ")"), _editorSharedStyles.blockNodesVerticalMargin, "var(--ds-space-200, 16px)");
 exports.blockquoteSharedStyles = blockquoteSharedStyles;

package/dist/cjs/styles/shared/code-block.js

@@ -23,7 +23,7 @@ var CodeBlockSharedCssClassName = {
 };
 exports.CodeBlockSharedCssClassName = CodeBlockSharedCssClassName;
 var codeBlockSharedStyles = function codeBlockSharedStyles(props) {
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    position: relative;\n    background-color: ", ";\n    border-radius: ", "px;\n    margin: ", " 0 0 0;\n    font-family: ", ";\n    min-width: ", "px;\n    cursor: pointer;\n\n    --ds--code--bg-color: transparent;\n\n    /* This is necessary to allow for arrow key navigation in/out of code blocks in Firefox. */\n    white-space: normal;\n\n    .", " {\n      position: absolute;\n      visibility: hidden;\n      height: 1.5rem;\n      top: 0px;\n      left: 0px;\n    }\n\n    .", " {\n      position: absolute;\n      visibility: hidden;\n      height: 1.5rem;\n      bottom: 0px;\n      right: 0px;\n    }\n\n    .", " {\n      background-color: ", ";\n      display: flex;\n      border-radius: ", "px;\n      width: 100%;\n      counter-reset: line;\n      overflow-x: auto;\n\n      background-image: ", ";\n\n      background-repeat: no-repeat;\n      background-attachment: local, local, local, local, scroll, scroll, scroll,\n        scroll;\n      background-size: ", "px 100%, ", "px 100%,\n        ", "px 100%, ", "px 100%, ", "px 100%,\n        1px 100%, ", "px 100%, 1px 100%;\n      background-position: 0 0, 0 0, 100% 0, 100% 0, 100% 0, 100% 0, 0 0, 0 0;\n\n      /* Be careful if refactoring this; it is needed to keep arrow key navigation in Firefox consistent with other browsers. */\n      overflow-y: hidden;\n    }\n\n    .", " {\n      flex-shrink: 0;\n      text-align: right;\n      background-color: ", ";\n      padding: ", "px;\n      position: relative;\n\n      span {\n        display: block;\n        line-height: 0;\n        font-size: 0;\n\n        ::before {\n          display: inline-block;\n          content: counter(line);\n          counter-increment: line;\n          color: ", ";\n          font-size: ", ";\n          line-height: 1.5rem;\n        }\n      }\n    }\n\n    .", " {\n      display: flex;\n      flex: 1;\n\n      code {\n        flex-grow: 1;\n        tab-size: 4;\n        cursor: text;\n        color: ", ";\n        border-radius: ", "px;\n        margin: ", "px;\n        white-space: pre;\n        font-size: ", ";\n        line-height: 1.5rem;\n      }\n    }\n  }\n"])), CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, "var(--ds-surface-raised, transparent)", (0, _constants.borderRadius)(), _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.akEditorCodeFontFamily, _editorSharedStyles.akEditorTableCellMinWidth, CodeBlockSharedCssClassName.CODEBLOCK_START, CodeBlockSharedCssClassName.CODEBLOCK_END, CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER, (0, _components.themed)({
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    position: relative;\n    background-color: ", ";\n    border-radius: ", "px;\n    margin: ", " 0 0 0;\n    font-family: ", ";\n    min-width: ", "px;\n    cursor: pointer;\n\n    --ds--code--bg-color: transparent;\n\n    /* This is necessary to allow for arrow key navigation in/out of code blocks in Firefox. */\n    white-space: normal;\n\n    .", " {\n      position: absolute;\n      visibility: hidden;\n      height: 1.5rem;\n      top: 0px;\n      left: 0px;\n    }\n\n    .", " {\n      position: absolute;\n      visibility: hidden;\n      height: 1.5rem;\n      bottom: 0px;\n      right: 0px;\n    }\n\n    .", " {\n      background-color: ", ";\n      display: flex;\n      border-radius: ", "px;\n      width: 100%;\n      counter-reset: line;\n      overflow-x: auto;\n\n      background-image: ", ";\n\n      background-repeat: no-repeat;\n      background-attachment: local, local, local, local, scroll, scroll, scroll,\n        scroll;\n      background-size: ", " 100%,\n        ", " 100%, ", " 100%,\n        ", " 100%, ", " 100%,\n        1px 100%, ", " 100%, 1px 100%;\n      background-position: 0 0, 0 0, 100% 0, 100% 0, 100% 0, 100% 0, 0 0, 0 0;\n\n      /* Be careful if refactoring this; it is needed to keep arrow key navigation in Firefox consistent with other browsers. */\n      overflow-y: hidden;\n    }\n\n    .", " {\n      flex-shrink: 0;\n      text-align: right;\n      background-color: ", ";\n      padding: ", ";\n      position: relative;\n\n      span {\n        display: block;\n        line-height: 0;\n        font-size: 0;\n\n        ::before {\n          display: inline-block;\n          content: counter(line);\n          counter-increment: line;\n          color: ", ";\n          font-size: ", ";\n          line-height: 1.5rem;\n        }\n      }\n    }\n\n    .", " {\n      display: flex;\n      flex: 1;\n\n      code {\n        flex-grow: 1;\n        tab-size: 4;\n        cursor: text;\n        color: ", ";\n        border-radius: ", "px;\n        margin: ", ";\n        white-space: pre;\n        font-size: ", ";\n        line-height: 1.5rem;\n      }\n    }\n  }\n"])), CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, "var(--ds-surface-raised, transparent)", (0, _constants.borderRadius)(), _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.akEditorCodeFontFamily, _editorSharedStyles.akEditorTableCellMinWidth, CodeBlockSharedCssClassName.CODEBLOCK_START, CodeBlockSharedCssClassName.CODEBLOCK_END, CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER, (0, _components.themed)({
     light: "var(--ds-background-neutral, ".concat(_colors.N20, ")"),
     dark: "var(--ds-background-neutral, ".concat(_colors.DN50, ")")
   })(props), (0, _constants.borderRadius)(), (0, _editorSharedStyles.overflowShadow)({
@@ -31,17 +31,17 @@ var codeBlockSharedStyles = function codeBlockSharedStyles(props) {
       light: "var(--ds-background-neutral, ".concat(_colors.N20, ")"),
       dark: "var(--ds-background-neutral, ".concat(_colors.DN50, ")")
     })(props),
-    leftCoverWidth: "".concat((0, _constants.gridSize)() * 3, "px")
-  }), (0, _constants.gridSize)() * 3, (0, _constants.gridSize)() * 3, (0, _constants.gridSize)(), (0, _constants.gridSize)(), (0, _constants.gridSize)(), (0, _constants.gridSize)(), CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER, (0, _components.themed)({
+    leftCoverWidth: "var(--ds-space-300, 24px)"
+  }), "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER, (0, _components.themed)({
     light: "var(--ds-background-neutral, ".concat(_colors.N30, ")"),
     dark: "var(--ds-background-neutral, ".concat(_colors.DN20, ")")
-  })(props), (0, _constants.gridSize)(), (0, _components.themed)({
+  })(props), "var(--ds-space-100, 8px)", (0, _components.themed)({
     light: "var(--ds-text-subtlest, ".concat(_colors.N400, ")"),
     dark: "var(--ds-text-subtlest, ".concat(_colors.DN400, ")")
   })(props), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), CodeBlockSharedCssClassName.CODEBLOCK_CONTENT, (0, _components.themed)({
     light: "var(--ds-text, ".concat(_colors.N800, ")"),
     dark: "var(--ds-text, ".concat(_colors.DN800, ")")
-  })(props), (0, _constants.borderRadius)(), (0, _constants.gridSize)(), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()));
+  })(props), (0, _constants.borderRadius)(), "var(--ds-space-100, 8px)", (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()));
 };
 exports.codeBlockSharedStyles = codeBlockSharedStyles;
 var codeBlockInListSafariFix = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ::before {\n    content: ' ';\n    line-height: ", ";\n  }\n\n  > p:first-child,\n  > .code-block:first-child,\n  > .ProseMirror-gapcursor:first-child + .code-block {\n    margin-top: -", "em !important;\n  }\n"])), _editorSharedStyles.akEditorLineHeight, _editorSharedStyles.akEditorLineHeight);

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

@@ -5,6 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.EXTENSION_PADDING = exports.BODIED_EXT_PADDING = void 0;
 var _constants = require("@atlaskit/theme/constants");
+// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
+
+// TODO: Migrate away from gridSize
+// Recommendation: Replace gridSize with 8
 var EXTENSION_PADDING = (0, _constants.gridSize)();
 exports.EXTENSION_PADDING = EXTENSION_PADDING;
 var BODIED_EXT_PADDING = EXTENSION_PADDING * 2;

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

@@ -5,6 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.LAYOUT_SECTION_MARGIN = exports.LAYOUT_COLUMN_PADDING = void 0;
 var _constants = require("@atlaskit/theme/constants");
+// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
+
+// TODO: Migrate away from gridSize
+// Recommendation: Replace gridSize with 8
 var LAYOUT_SECTION_MARGIN = (0, _constants.gridSize)();
 exports.LAYOUT_SECTION_MARGIN = LAYOUT_SECTION_MARGIN;
 var LAYOUT_COLUMN_PADDING = (0, _constants.gridSize)() * 1.5;

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

@@ -21,6 +21,7 @@ var _components = require("@atlaskit/theme/components");
 var _constants = require("@atlaskit/theme/constants");
 var _templateObject, _templateObject2;
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var lightPanelColors = {
@@ -119,6 +120,8 @@ var tokenDarkPanelColors = {
   error: "var(--ds-background-danger, ".concat(darkPanelColors['error'], ")")
 };
 
+// TODO: Migrate away from gridSize
+// Recommendation: Replace gridSize with 8
 // New custom icons are a little smaller than predefined icons.
 // To fix alignment issues with custom icons, vertical alignment is updated.
 var panelEmojiSpriteVerticalAlignment = -((0, _constants.gridSize)() * 3 - _consts.akEditorCustomIconSize) / 2;
@@ -225,7 +228,7 @@ var mainDynamicStyles = function mainDynamicStyles(panelType) {
   };
 };
 var panelSharedStylesWithoutPrefix = function panelSharedStylesWithoutPrefix(props) {
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: ", "px;\n  margin: ", " 0 0;\n  padding: ", "px;\n  min-width: ", "px;\n  display: flex;\n  position: relative;\n  align-items: baseline;\n  word-break: break-word;\n\n  ", "\n\n  .", " {\n    flex-shrink: 0;\n    height: ", "px;\n    width: ", "px;\n    box-sizing: content-box;\n    padding-right: ", "px;\n    text-align: center;\n    user-select: none;\n    -moz-user-select: none;\n    -webkit-user-select: none;\n    -ms-user-select: none;\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: 1px 0 1px;\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\n  &[data-panel-type='", "'] {\n    ", ";\n  }\n"])), (0, _constants.borderRadius)(), _editorSharedStyles.blockNodesVerticalMargin, (0, _constants.gridSize)(), _editorSharedStyles.akEditorTableCellMinWidth, mainDynamicStyles(_adfSchema.PanelType.INFO)(props), PanelSharedCssClassName.icon, (0, _constants.gridSize)() * 3, (0, _constants.gridSize)() * 3, (0, _constants.gridSize)(), iconDynamicStyles(_adfSchema.PanelType.INFO)(props), _emoji.emojiSprite, panelEmojiSpriteVerticalAlignment, _emoji.emojiImage, panelEmojiImageVerticalAlignment, _adfSchema.PanelType.NOTE, mainDynamicStyles(_adfSchema.PanelType.NOTE)(props), PanelSharedCssClassName.icon, iconDynamicStyles(_adfSchema.PanelType.NOTE)(props), _adfSchema.PanelType.TIP, mainDynamicStyles(_adfSchema.PanelType.TIP)(props), PanelSharedCssClassName.icon, iconDynamicStyles(_adfSchema.PanelType.TIP)(props), _adfSchema.PanelType.WARNING, mainDynamicStyles(_adfSchema.PanelType.WARNING)(props), PanelSharedCssClassName.icon, iconDynamicStyles(_adfSchema.PanelType.WARNING)(props), _adfSchema.PanelType.ERROR, mainDynamicStyles(_adfSchema.PanelType.ERROR)(props), PanelSharedCssClassName.icon, iconDynamicStyles(_adfSchema.PanelType.ERROR)(props), _adfSchema.PanelType.SUCCESS, mainDynamicStyles(_adfSchema.PanelType.SUCCESS)(props), PanelSharedCssClassName.icon, iconDynamicStyles(_adfSchema.PanelType.SUCCESS)(props), _adfSchema.PanelType.CUSTOM, (0, _components.themed)({
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: ", "px;\n  margin: ", " 0 0;\n  padding: ", ";\n  min-width: ", "px;\n  display: flex;\n  position: relative;\n  align-items: baseline;\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    ", "\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: 1px 0 1px;\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\n  &[data-panel-type='", "'] {\n    ", ";\n  }\n"])), (0, _constants.borderRadius)(), _editorSharedStyles.blockNodesVerticalMargin, "var(--ds-space-100, 8px)", _editorSharedStyles.akEditorTableCellMinWidth, mainDynamicStyles(_adfSchema.PanelType.INFO)(props), PanelSharedCssClassName.icon, "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)", "var(--ds-space-100, 8px)", iconDynamicStyles(_adfSchema.PanelType.INFO)(props), _emoji.emojiSprite, panelEmojiSpriteVerticalAlignment, _emoji.emojiImage, panelEmojiImageVerticalAlignment, _adfSchema.PanelType.NOTE, mainDynamicStyles(_adfSchema.PanelType.NOTE)(props), PanelSharedCssClassName.icon, iconDynamicStyles(_adfSchema.PanelType.NOTE)(props), _adfSchema.PanelType.TIP, mainDynamicStyles(_adfSchema.PanelType.TIP)(props), PanelSharedCssClassName.icon, iconDynamicStyles(_adfSchema.PanelType.TIP)(props), _adfSchema.PanelType.WARNING, mainDynamicStyles(_adfSchema.PanelType.WARNING)(props), PanelSharedCssClassName.icon, iconDynamicStyles(_adfSchema.PanelType.WARNING)(props), _adfSchema.PanelType.ERROR, mainDynamicStyles(_adfSchema.PanelType.ERROR)(props), PanelSharedCssClassName.icon, iconDynamicStyles(_adfSchema.PanelType.ERROR)(props), _adfSchema.PanelType.SUCCESS, mainDynamicStyles(_adfSchema.PanelType.SUCCESS)(props), PanelSharedCssClassName.icon, iconDynamicStyles(_adfSchema.PanelType.SUCCESS)(props), _adfSchema.PanelType.CUSTOM, (0, _components.themed)({
     dark: getPanelBackgroundDarkModeColors
   })(props));
 };

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

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.resizerStyles = exports.resizerItemClassName = exports.resizerHandleZIndex = exports.resizerHandleRightClassName = exports.resizerHandlePadding = exports.resizerHandleLeftClassName = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = require("@emotion/react");
+var _colors = require("@atlaskit/theme/colors");
+var _templateObject;
+/*
+  Styles in this file are based on
+  packages/editor/editor-core/src/plugins/media/styles.ts
+*/
+
+var resizerItemClassName = 'resizer-item';
+exports.resizerItemClassName = resizerItemClassName;
+var resizerHandleRightClassName = 'resizer-handle-right';
+exports.resizerHandleRightClassName = resizerHandleRightClassName;
+var resizerHandleLeftClassName = 'resizer-handle-left';
+
+// akEditorSelectedNodeClassName from '@atlaskit/editor-shared-styles';
+exports.resizerHandleLeftClassName = resizerHandleLeftClassName;
+var akEditorSelectedNodeClassName = 'ak-editor-selected-node';
+var resizerHandlePadding = 13;
+exports.resizerHandlePadding = resizerHandlePadding;
+var resizerHandleZIndex = 99;
+exports.resizerHandleZIndex = resizerHandleZIndex;
+var resizerStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    background: ", ";\n  }\n\n  .", ", .", " {\n    display: flex;\n    flex-direction: column;\n\n    /* vertical align */\n    justify-content: center;\n  }\n\n  .", " {\n    align-items: flex-end;\n    /* padding-right: 12px; */\n    /* margin-right: -", "px; */\n  }\n\n  .", " {\n    align-items: flex-start;\n    /* padding-left: 12px; */\n    /* margin-left: -", "px; */\n  }\n\n  .", "::after,\n    .", "::after {\n    content: ' ';\n    display: flex;\n    width: 3px;\n    height: 64px;\n\n    border-radius: 6px;\n  }\n\n  .", ":hover\n    .", "::after,\n    .", ":hover\n    .", "::after {\n    background: ", ";\n  }\n\n  .", "\n    .", "::after,\n    .", "\n    .", "::after,\n    .", "\n    .", ":hover::after,\n    .", "\n    .", ":hover::after,\n    .", ".is-resizing\n    .", "::after,\n    .", ".is-resizing\n    .", "::after {\n    background: ", ";\n  }\n"])), resizerItemClassName, "var(--ds-border-focused, ".concat(_colors.B200, ")"), resizerHandleRightClassName, resizerHandleLeftClassName, resizerHandleRightClassName, resizerHandlePadding, resizerHandleLeftClassName, resizerHandlePadding, resizerHandleRightClassName, resizerHandleLeftClassName, resizerItemClassName, resizerHandleLeftClassName, resizerItemClassName, resizerHandleRightClassName, "var(--ds-border, ".concat(_colors.N60, ")"), akEditorSelectedNodeClassName, resizerHandleRightClassName, akEditorSelectedNodeClassName, resizerHandleLeftClassName, resizerItemClassName, resizerHandleRightClassName, resizerItemClassName, resizerHandleLeftClassName, resizerItemClassName, resizerHandleRightClassName, resizerItemClassName, resizerHandleLeftClassName, "var(--ds-border-focused, ".concat(_colors.B200, ")"));
+exports.resizerStyles = resizerStyles;

package/dist/cjs/styles/shared/smart-card.js

@@ -6,12 +6,17 @@ Object.defineProperty(exports, "__esModule", {
 exports.smartCardSharedStyles = exports.SmartCardSharedCssClassName = void 0;
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _constants = require("@atlaskit/theme/constants");
+// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
+
 var SmartCardSharedCssClassName = {
   INLINE_CARD_CONTAINER: 'inlineCardView-content-wrap',
   BLOCK_CARD_CONTAINER: 'blockCardView-content-wrap',
   EMBED_CARD_CONTAINER: 'embedCardView-content-wrap',
   LOADER_WRAPPER: 'loader-wrapper'
 };
+
+// TODO: Migrate away from gridSize
+// Recommendation: Replace gridSize with 8
 exports.SmartCardSharedCssClassName = SmartCardSharedCssClassName;
 var smartCardSharedStyles = "\n  .".concat(SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, " {\n    display: block;\n    margin: ").concat(_editorSharedStyles.blockNodesVerticalMargin, " 0 0;\n    max-width: ").concat((0, _constants.gridSize)() * 95, "px;\n  }\n");
 exports.smartCardSharedStyles = smartCardSharedStyles;

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

@@ -11,7 +11,6 @@ var _adfSchema = require("@atlaskit/adf-schema");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _colors = require("@atlaskit/theme/colors");
 var _components = require("@atlaskit/theme/components");
-var _constants = require("@atlaskit/theme/constants");
 var _browser = _interopRequireDefault(require("../../utils/browser"));
 var _codeBlock = require("./code-block");
 var _tableCell = require("./tableCell");
@@ -73,7 +72,7 @@ var tableSharedStyle = function tableSharedStyle(props) {
       light: "var(--ds-background-neutral, rgb(235, 237, 240))",
       dark: "var(--ds-background-neutral, rgb(36, 47, 66))"
     })(props),
-    leftCoverWidth: "".concat((0, _constants.gridSize)() * 3, "px")
+    leftCoverWidth: "var(--ds-space-300, 24px)"
   }), (0, _components.themed)({
     light: "var(--ds-background-neutral, rgb(235, 237, 240))",
     dark: "var(--ds-background-neutral, rgb(36, 47, 66))"
@@ -85,7 +84,7 @@ var tableSharedStyle = function tableSharedStyle(props) {
       light: "var(--ds-background-neutral, rgb(235, 237, 240))",
       dark: "var(--ds-background-neutral, rgb(36, 47, 66))"
     })(props),
-    leftCoverWidth: "".concat((0, _constants.gridSize)() * 3, "px")
+    leftCoverWidth: "var(--ds-space-300, 24px)"
   }), (0, _components.themed)({
     light: "var(--ds-background-neutral, rgb(235, 237, 240))",
     dark: "var(--ds-background-neutral, rgb(36, 47, 66))"

package/dist/cjs/types/performance-tracking.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -22,10 +22,12 @@ var _constants = require("@atlaskit/theme/constants");
 var _Layer = _interopRequireDefault(require("../Layer"));
 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() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } /** @jsx jsx */
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } /** @jsx jsx */ // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "74.0.1";
+var packageVersion = "74.1.0";
 var halfFocusRing = 1;
+// TODO: Migrate away from gridSize
+// Recommendation: Replace gridSize with token('space.100', '8px') after verfiying Popper can accept this
 var dropOffset = "0, ".concat((0, _constants.gridSize)(), "px");
 var DropList = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(DropList, _Component);
@@ -41,13 +43,13 @@ var DropList = /*#__PURE__*/function (_Component) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "triggerStyles", (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    transition-duration: 0.2s;\n    transition: box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38);\n    ", "\n  "])), _this.props.shouldFitContainer ? 'display: block; box-sizing: border-box;' : 'display: inline-flex;'));
     /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "menuWrapper", function (theme) {
-      return (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n      color: ", ";\n      background-color: ", ";\n      border-radius: ", "px;\n      box-shadow: 0 ", "px ", "px -", "px ", ",\n        0 0 1px ", ";\n      box-sizing: border-box;\n      overflow: auto;\n      padding: ", "px 0;\n      max-height: 90vh;\n    "])), (0, _components.themed)({
+      return (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n      color: ", ";\n      background-color: ", ";\n      border-radius: ", "px;\n      box-shadow: 0 ", " ", "\n          calc(-1 * ", ") ", ",\n        0 0 1px ", ";\n      box-sizing: border-box;\n      overflow: auto;\n      padding: ", " 0;\n      max-height: 90vh;\n    "])), (0, _components.themed)({
         light: "var(--ds-text, ".concat(_colors.N900, ")"),
         dark: "var(--ds-text, ".concat(_colors.DN600, ")")
       })(theme), (0, _components.themed)({
         light: "var(--ds-surface-overlay, ".concat(_colors.N0, ")"),
         dark: "var(--ds-surface-overlay, ".concat(_colors.DN50, ")")
-      })(theme), (0, _constants.borderRadius)(), (0, _constants.gridSize)() / 2, (0, _constants.gridSize)(), (0, _constants.gridSize)() / 4, _colors.N50A, _colors.N60A, (0, _constants.gridSize)() / 2);
+      })(theme), (0, _constants.borderRadius)(), "var(--ds-space-050, 4px)", "var(--ds-space-100, 8px)", "var(--ds-space-025, 2px)", _colors.N50A, _colors.N60A, "var(--ds-space-050, 4px)");
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "componentDidMount", function () {
       _this.setContentWidth();

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

@@ -13,7 +13,9 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _analytics = require("../../analytics");
+var _error = require("../../monitoring/error");
 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() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 var ErrorBoundary = /*#__PURE__*/function (_React$Component) {
@@ -58,6 +60,11 @@ var ErrorBoundary = /*#__PURE__*/function (_React$Component) {
           }
         });
       }
+      if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.sentry-error-monitoring_6bksu')) {
+        (0, _error.logException)(error, {
+          location: 'editor-common'
+        });
+      }
       if (this.hasFallback()) {
         this.setState({
           errorCaptured: true

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

@@ -19,6 +19,7 @@ var _constants = require("@atlaskit/theme/constants");
 var _excluded = ["children"];
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 /** @jsx jsx */
+// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var messages = (0, _reactIntlNext.defineMessages)({
@@ -44,7 +45,7 @@ var messages = (0, _reactIntlNext.defineMessages)({
   }
 });
 exports.messages = messages;
-var BORDER_RADIUS = (0, _constants.gridSize)() / 2;
+var BORDER_RADIUS = "var(--ds-radius-100, 4px)";
 var EXPAND_COLLAPSED_BACKGROUND = "var(--ds-background-neutral-subtle, transparent)";
 var EXPAND_SELECTED_BACKGROUND = (0, _components.themed)({
   light: "var(--ds-surface, rgba(255, 255, 255, 0.6))",
@@ -67,13 +68,13 @@ var ExpandIconWrapper = function ExpandIconWrapper(_ref) {
 };
 exports.ExpandIconWrapper = ExpandIconWrapper;
 var expandIconWrapperStyle = function expandIconWrapperStyle(props) {
-  return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  cursor: pointer;\n  display: flex;\n  color: ", ";\n  border-radius: ", "px;\n  width: 24px;\n  height: 24px;\n\n  &:hover {\n    background: ", ";\n  }\n\n  svg {\n    transition: transform 0.2s ", ";\n  }\n"])), (0, _components.themed)({
+  return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  cursor: pointer;\n  display: flex;\n  color: ", ";\n  border-radius: ", ";\n  width: 24px;\n  height: 24px;\n\n  &:hover {\n    background: ", ";\n  }\n\n  svg {\n    transition: transform 0.2s ", ";\n  }\n"])), (0, _components.themed)({
     light: "var(--ds-icon, ".concat(colors.N90, ")"),
     dark: "var(--ds-icon, #d9dde3)"
-  })(props), (0, _constants.gridSize)() / 2, "var(--ds-background-neutral-subtle-hovered, ".concat(colors.N30A, ")"), _editorSharedStyles.akEditorSwoopCubicBezier);
+  })(props), "var(--ds-radius-100, 4px)", "var(--ds-background-neutral-subtle-hovered, ".concat(colors.N30A, ")"), _editorSharedStyles.akEditorSwoopCubicBezier);
 };
 var expandIconWrapperExpandedStyle = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  svg {\n    transform: rotate(90deg);\n  }\n"])));
-var expandLayoutWrapperStyle = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  width: ", "px;\n  height: ", "px;\n"])), (0, _constants.gridSize)() * 3, (0, _constants.gridSize)() * 3);
+var expandLayoutWrapperStyle = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  width: ", ";\n  height: ", ";\n"])), "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)");
 exports.expandLayoutWrapperStyle = expandLayoutWrapperStyle;
 var ExpandLayoutWrapperWithRef = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var children = props.children,
@@ -88,6 +89,8 @@ exports.ExpandLayoutWrapperWithRef = ExpandLayoutWrapperWithRef;
 var containerStyles = function containerStyles(styleProps) {
   var expanded = styleProps.expanded,
     focused = styleProps.focused;
+  // TODO: Migrate away from gridSize
+  // Recommendation: Verify if this is intentional: 8 / 4 / 14 rem = 4.57px?
   var marginTop = "".concat((0, _constants.gridSize)() / 2 / (0, _constants.fontSize)(), "rem");
   var marginBottom = 0;
   // Only only these margins if the expand isn't editable
@@ -95,7 +98,7 @@ var containerStyles = function containerStyles(styleProps) {
   var marginHorizontal = styleProps['data-node-type'] === 'expand' ? "-".concat(_editorSharedStyles.akLayoutGutterOffset, "px") : 0;
   var margin = "".concat(marginTop, " ").concat(marginHorizontal, " ").concat(marginBottom);
   return function (themeProps) {
-    return (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    border-width: 1px;\n    border-style: solid;\n    border-color: ", ";\n    border-radius: ", "px;\n    min-height: 25px;\n    background: ", ";\n    margin: ", ";\n\n    transition: background 0.3s ", ",\n      border-color 0.3s ", ";\n    padding: ", "px;\n\n    &:hover {\n      // TODO: Remove the border styles below once design tokens have been enabled and fallbacks are no longer triggered.\n      // This is because the default state already uses the same token and, as such, the hover style won't change anything.\n      // https://product-fabric.atlassian.net/browse/DSP-4152\n      border: 1px solid\n        ", ";\n      background: ", ";\n    }\n\n    td > :not(style):first-child,\n    td > style:first-child + * {\n      margin-top: 0;\n    }\n  "])), focused ? EXPAND_FOCUSED_BORDER_COLOR : expanded ? EXPAND_EXPANDED_BORDER_COLOR(themeProps) : EXPAND_COLLAPSED_BORDER_COLOR, BORDER_RADIUS, !expanded ? EXPAND_COLLAPSED_BACKGROUND : EXPAND_SELECTED_BACKGROUND(themeProps), margin, _editorSharedStyles.akEditorSwoopCubicBezier, _editorSharedStyles.akEditorSwoopCubicBezier, (0, _constants.gridSize)(), (0, _components.themed)({
+    return (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    border-width: 1px;\n    border-style: solid;\n    border-color: ", ";\n    border-radius: ", ";\n    min-height: 25px;\n    background: ", ";\n    margin: ", ";\n\n    transition: background 0.3s ", ",\n      border-color 0.3s ", ";\n    padding: ", ";\n\n    &:hover {\n      // TODO: Remove the border styles below once design tokens have been enabled and fallbacks are no longer triggered.\n      // This is because the default state already uses the same token and, as such, the hover style won't change anything.\n      // https://product-fabric.atlassian.net/browse/DSP-4152\n      border: 1px solid\n        ", ";\n      background: ", ";\n    }\n\n    td > :not(style):first-child,\n    td > style:first-child + * {\n      margin-top: 0;\n    }\n  "])), focused ? EXPAND_FOCUSED_BORDER_COLOR : expanded ? EXPAND_EXPANDED_BORDER_COLOR(themeProps) : EXPAND_COLLAPSED_BORDER_COLOR, BORDER_RADIUS, !expanded ? EXPAND_COLLAPSED_BACKGROUND : EXPAND_SELECTED_BACKGROUND(themeProps), margin, _editorSharedStyles.akEditorSwoopCubicBezier, _editorSharedStyles.akEditorSwoopCubicBezier, "var(--ds-space-100, 8px)", (0, _components.themed)({
       light: "var(--ds-border, ".concat(colors.N50A, ")"),
       dark: "var(--ds-border, ".concat(colors.DN50, ")")
     })(themeProps), EXPAND_SELECTED_BACKGROUND(themeProps));
@@ -103,14 +106,14 @@ var containerStyles = function containerStyles(styleProps) {
 };
 var contentStyles = function contentStyles(styleProps) {
   return function (themeProps) {
-    return (0, _react2.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n    padding-top: ", "px;\n    padding-right: ", "px;\n    padding-left: ", "px;\n    display: flow-root;\n\n    // The follow rules inside @supports block are added as a part of ED-8893\n    // The fix is targeting mobile bridge on iOS 12 or below,\n    // We should consider remove this fix when we no longer support iOS 12\n    @supports not (display: flow-root) {\n      width: 100%;\n      box-sizing: border-box;\n    }\n\n    ", "\n  "])), styleProps.expanded ? (0, _constants.gridSize)() : 0, (0, _constants.gridSize)(), (0, _constants.gridSize)() * 4 - (0, _constants.gridSize)() / 2, !styleProps.expanded ? "\n        .expand-content-wrapper, .nestedExpand-content-wrapper {\n          /* We visually hide the content here to preserve the content during copy+paste */\n          width: 100%;\n          display: block;\n          height: 0;\n          overflow: hidden;\n          clip: rect(1px, 1px, 1px, 1px);\n          white-space: nowrap;\n          user-select: none;\n        }\n      " : '');
+    return (0, _react2.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n    padding-top: ", ";\n    padding-right: ", ";\n    // TODO: Migrate away from gridSize\n    // Recommendation: Replace gridSize with 8 if important to highlight 8*4 - 8/2, or directly replace with 28px\n    padding-left: ", "px;\n    display: flow-root;\n\n    // The follow rules inside @supports block are added as a part of ED-8893\n    // The fix is targeting mobile bridge on iOS 12 or below,\n    // We should consider remove this fix when we no longer support iOS 12\n    @supports not (display: flow-root) {\n      width: 100%;\n      box-sizing: border-box;\n    }\n\n    ", "\n  "])), styleProps.expanded ? "var(--ds-space-100, 8px)" : "var(--ds-space-0, 0px)", "var(--ds-space-100, 8px)", (0, _constants.gridSize)() * 4 - (0, _constants.gridSize)() / 2, !styleProps.expanded ? "\n        .expand-content-wrapper, .nestedExpand-content-wrapper {\n          /* We visually hide the content here to preserve the content during copy+paste */\n          width: 100%;\n          display: block;\n          height: 0;\n          overflow: hidden;\n          clip: rect(1px, 1px, 1px, 1px);\n          white-space: nowrap;\n          user-select: none;\n        }\n      " : '');
   };
 };
 var titleInputStyles = function titleInputStyles(props) {
-  return (0, _react2.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  outline: none;\n  border: none;\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: normal;\n  color: ", ";\n  background: transparent;\n  display: flex;\n  flex: 1;\n  padding: 0 0 0 ", "px;\n  width: 100%;\n\n  &::placeholder {\n    opacity: 0.6;\n    color: ", ";\n  }\n"])), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), _editorSharedStyles.akEditorLineHeight, (0, _components.themed)({
+  return (0, _react2.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  outline: none;\n  border: none;\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: normal;\n  color: ", ";\n  background: transparent;\n  display: flex;\n  flex: 1;\n  padding: 0 0 0 ", ";\n  width: 100%;\n\n  &::placeholder {\n    opacity: 0.6;\n    color: ", ";\n  }\n"])), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), _editorSharedStyles.akEditorLineHeight, (0, _components.themed)({
     light: "var(--ds-text-subtlest, ".concat(colors.N200A, ")"),
     dark: "var(--ds-text-subtlest, ".concat(colors.DN600, ")")
-  })(props), (0, _constants.gridSize)() / 2, (0, _components.themed)({
+  })(props), "var(--ds-space-050, 4px)", (0, _components.themed)({
     light: "var(--ds-text-subtlest, ".concat(colors.N200A, ")"),
     dark: "var(--ds-text-subtlest, ".concat(colors.DN600, ")")
   })(props));