@atlaskit/editor-common 71.0.2 → 72.0.0

package/CHANGELOG.md

@@ -1,5 +1,82 @@
 # @atlaskit/editor-common
 
+## 72.0.0
+
+### Major Changes
+
+- [`ac1c880cf4c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ac1c880cf4c) - [ux] ED-12395 - Remove the keyboard accessible date picker feature flag, which has been 100% rolled out
+
+  ## **DEPRECATION WARNING:**
+
+  There's two deprecations in this change:
+
+  ### 1. Remove `keyboardAccessibleDatepicker` and the `allowKeyboardAccessibleDatepicker` feature flag
+
+  Now that this has been fully rolled out, this feature flag is no longer required. The if-statement that depends on this feature flag was also removed in point 2 below:
+
+  ### 2. Remove the `showTextField` prop on the DatePicker
+
+  This was exclusively used to conditionally render the `DatePickerInput`. Its usage was always set to `true` in code or through the feature flag that has now been rolled out. Thus, this deprecation simplifies the API.
+
+  Since no code related to this feature flag remains, there are no inline deprecation warnings.
+
+- [`5d317ed8aa3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5d317ed8aa3) - [ux] ED-15882: Implement custom starting numbers for orderedList nodes in adf-schema, editor, renderer, transformers behind restartNumberedLists feature flag. Users will be able to set a custom starting number when typing to create a numbered list in the Editor and this will be persisted across Renderer and other format transformations.
+
+  Note: restartNumberedLists will be off by default. To enable it, consumers will need to set <Editor featureFlags={{ restartNumberedLists: true }}> or <Renderer featureFlags={{ restartNumberedLists: true }}>
+
+### Minor Changes
+
+- [`fbe1cd7d043`](https://bitbucket.org/atlassian/atlassian-frontend/commits/fbe1cd7d043) - Adds a new feature flag: preventPopupOverflow that can be used to force the popup placement when it overflows the screen
+- [`a730df6e3ed`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a730df6e3ed) - ED-16163 Refactored analytics constants to be in editor-common
+- [`5307b130e91`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5307b130e91) - Cleaned up placeholder lint feature as it was no longer being used
+- [`195fa69b80a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/195fa69b80a) - Minor referentiality util housekeeping
+- [`4ed695c539e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4ed695c539e) - Renamed Popup prop preventTopOverflow to preventOverflow used for both vertical and horizontal placement now
+- [`c42a0344d32`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c42a0344d32) - The linking view changing experiment toolbar style will be removed, including the feature flag. All variants will be removed except for toolbarIcons which will be the only view of the toolbar of the linking view switcher.
+- [`8820442c2b2`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8820442c2b2) - [ux] ED-15709: add feature for delete element if it is `isReferencedSource` is `true`
+
+  - add checkbox confirmation dialog when then config have `isReferentiality.`
+  - add referentiality helper functions.
+  - update confirmDialog config to a handler to reduce traverse times.
+  - user can now tick checkbox to delete descendent nodes or only selected node when user click the delete icon in floating toolbar.
+
+- [`1d41bbc2965`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1d41bbc2965) - This changeset introduces non breaking changes to support ssr within the loader emoji component
+- [`651dee737d2`](https://bitbucket.org/atlassian/atlassian-frontend/commits/651dee737d2) - ED-15301 Added initial preset builder types
+- [`d2c62b69a6a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d2c62b69a6a) - [ux] Adds support to floating toolbar configuration to enable trapping focus within the Popup.
+
+### Patch Changes
+
+- [`2fd53283b55`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2fd53283b55) - Updated i18n language files
+- [`a70436952a6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a70436952a6) - [ED-15980] Reinstate unsupportedContentEncountered event
+- [`3a54fce9ade`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3a54fce9ade) - DSP-4513 Updated tokens used to render annotations.
+
+  New tokens will be visible only in applications configured to use the new Tokens API (currently in beta).
+  These changes are intended to be interoperable with the legacy theme implementation. Legacy dark mode users should expect no visual or breaking changes.
+
+- [`9940267512c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9940267512c) - [ED-15979] Fix column sorting when comparing text with mixed alpha and numeric values
+- [`a838c2e281e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a838c2e281e) - [ux] ED-15959 Migrate panel to use editor-palette package for background colours.
+- [`60068f7fcbe`](https://bitbucket.org/atlassian/atlassian-frontend/commits/60068f7fcbe) - [ED-16007] Changes made to improve the floating toolbar's keyboard accessibility
+- [`ed617ce197c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ed617ce197c) - [ux] DSP-4451 - Adds design tokens to table overflow shadows. Fixes visual bug with table overflow shadow size and placement.
+- [`f608bc44cf2`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f608bc44cf2) - [ux] ED-16177 Added new text color labels. These new labels are disabled by default and only present when useSomewhatSemanticTextColorNames feature flag is set to true.
+- [`bb9a5f9d77d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/bb9a5f9d77d) - [ux] ED-16176 Added useSomewhatSemanticTextColorNames feature flag. This is part of COMMIT-5058 work to unblock dark mode for Jira. The intention of the flag is to show semantic names in tooltips when hovering over colors in the text color palette in token light/dark mode. Note that the flag is 'somewhat semantic' due to white/dark-gray not being semantic names.
+- [`233e03b2d92`](https://bitbucket.org/atlassian/atlassian-frontend/commits/233e03b2d92) - ED-16007 To highlight the table rows and columns when the 'Delete Row' and 'Delete Column' options are highlighted in the 'cell options' menu of floating toolbar
+- [`7fd5785d37d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7fd5785d37d) - [ESS-2752] Fix clientId type derived from prosemirror-collab
+- [`b2fa6d3e611`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b2fa6d3e611) - [ED-16106] Fix margin top when paragraph has alignment marks
+- [`e4089f2c471`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e4089f2c471) - Modified toolbar buttons to read out keyboard shortcuts by screen readers.
+- [`4fbaeb2a1fd`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4fbaeb2a1fd) - DSP-4118 Updated tokens used to render overflow shadows in code blocks.
+
+  New tokens will be visible only in applications configured to use the new Tokens API (currently in beta).
+  These changes are intended to be interoperable with the legacy theme implementation. Legacy dark mode users should expect no visual or breaking changes.
+
+  `overflowShadow` now optionally supports customizing the size of the "covers" that appear over shadows when at the edge of content, via `leftCoverWidth` and `rightCoverWidth`, and the shadow width via the `width` prop.
+
+- Updated dependencies
+
+## 71.0.3
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 71.0.2
 
 ### Patch Changes

package/dist/cjs/analytics/types/enums.js

@@ -107,7 +107,7 @@ exports.ACTION = ACTION;
   ACTION["TYPING_FINISHED"] = "typingFinished";
   ACTION["TYPING_STARTED"] = "typingStarted";
   ACTION["UNLINK"] = "unlinked";
-  ACTION["UNSUPPORTED_CONTENT_ENCOUNTERED"] = "unsupportedContentEncountered";
+  ACTION["UNSUPPORTED_CONTENT_ENCOUNTERED"] = "unsupportedContentEncounteredV2";
   ACTION["UPDATED"] = "updated";
   ACTION["UPDATED_FRAGMENT_MARK_NAME"] = "updatedFragmentMarkName";
   ACTION["UPDATED_SOURCE"] = "updatedSource";
@@ -124,6 +124,16 @@ exports.ACTION = ACTION;
   ACTION["UFO_SESSION_COMPLETE"] = "ufoSessionComplete";
   ACTION["INVALID_PROSEMIRROR_DOCUMENT"] = "invalidProsemirrorDocument";
   ACTION["DOCUMENT_PROCESSING_ERROR"] = "documentProcessingError";
+  ACTION["RENDERER_TTI"] = "tti";
+  ACTION["CRASHED"] = "unhandledErrorCaught";
+  ACTION["SELECT_ALL_CAUGHT"] = "selectAllCaught";
+  ACTION["SELECT_ALL_ESCAPED"] = "selectAllEscaped";
+  ACTION["SORT_COLUMN"] = "sortedColumn";
+  ACTION["SORT_COLUMN_NOT_ALLOWED"] = "sortColumnNotAllowed";
+  ACTION["CREATE_NOT_ALLOWED"] = "createNotAllowed";
+  ACTION["UNSUPPORTED_CONTENT_LEVELS_TRACKING_SUCCEEDED"] = "unsupportedContentLevelsTrackingSucceeded";
+  ACTION["UNSUPPORTED_CONTENT_LEVELS_TRACKING_ERRORED"] = "unsupportedContentLevelsTrackingErrored";
+  ACTION["UNSUPPORTED_TOOLTIP_VIEWED"] = "viewed";
 })(ACTION || (exports.ACTION = ACTION = {}));
 
 var INPUT_METHOD;
@@ -213,6 +223,10 @@ exports.ACTION_SUBJECT = ACTION_SUBJECT;
   ACTION_SUBJECT["CREATE_LINK_INLINE_DIALOG"] = "createLinkInlineDialog";
   ACTION_SUBJECT["CODE_BLOCK"] = "codeBlock";
   ACTION_SUBJECT["REACT_EDITOR_VIEW"] = "reactEditorView";
+  ACTION_SUBJECT["RENDERER"] = "renderer";
+  ACTION_SUBJECT["ANCHOR_LINK"] = "anchorLink";
+  ACTION_SUBJECT["LINK"] = "link";
+  ACTION_SUBJECT["TOOLTIP"] = "tooltip";
 })(ACTION_SUBJECT || (exports.ACTION_SUBJECT = ACTION_SUBJECT = {}));
 
 var ACTION_SUBJECT_ID;
@@ -331,9 +345,14 @@ exports.ACTION_SUBJECT_ID = ACTION_SUBJECT_ID;
   ACTION_SUBJECT_ID["TYPEAHEAD_QUICK_INSERT"] = "quickInsertTypeAhead";
   ACTION_SUBJECT_ID["UNKNOWN_NODE"] = "unknownNode";
   ACTION_SUBJECT_ID["UNLINK"] = "unlink";
+  ACTION_SUBJECT_ID["HEADING_ANCHOR_LINK"] = "headingAnchorLink";
+  ACTION_SUBJECT_ID["UNSUPPORTED_ERROR"] = "unsupportedUnhandled";
+  ACTION_SUBJECT_ID["UNSUPPORTED_NODE_ATTRIBUTE"] = "unsupportedNodeAttribute";
   ACTION_SUBJECT_ID["UNSUPPORTED_BLOCK"] = "unsupportedBlock";
   ACTION_SUBJECT_ID["UNSUPPORTED_INLINE"] = "unsupportedInline";
   ACTION_SUBJECT_ID["UNSUPPORTED_MARK"] = "unsupportedMark";
+  ACTION_SUBJECT_ID["ON_UNSUPPORTED_INLINE"] = "onUnsupportedInline";
+  ACTION_SUBJECT_ID["ON_UNSUPPORTED_BLOCK"] = "onUnsupportedBlock";
 })(ACTION_SUBJECT_ID || (exports.ACTION_SUBJECT_ID = ACTION_SUBJECT_ID = {}));
 
 var FLOATING_CONTROLS_TITLE;

package/dist/cjs/i18n/index.js

@@ -23,16 +23,22 @@ Object.defineProperty(exports, "de", {
     return _de.default;
   }
 });
-Object.defineProperty(exports, "es", {
+Object.defineProperty(exports, "en", {
   enumerable: true,
   get: function get() {
-    return _es.default;
+    return _en.default;
   }
 });
-Object.defineProperty(exports, "et", {
+Object.defineProperty(exports, "en_GB", {
   enumerable: true,
   get: function get() {
-    return _et.default;
+    return _en_GB.default;
+  }
+});
+Object.defineProperty(exports, "es", {
+  enumerable: true,
+  get: function get() {
+    return _es.default;
   }
 });
 Object.defineProperty(exports, "fi", {
@@ -166,7 +172,9 @@ var _da = _interopRequireDefault(require("./da"));
 
 var _nl = _interopRequireDefault(require("./nl"));
 
-var _et = _interopRequireDefault(require("./et"));
+var _en = _interopRequireDefault(require("./en"));
+
+var _en_GB = _interopRequireDefault(require("./en_GB"));
 
 var _fi = _interopRequireDefault(require("./fi"));
 

package/dist/cjs/i18n/languages.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+/**
+ * NOTE:
+ *
+ * ED-16073:
+ * This was manually updated since the original `@atlaskit/i18n-tools` has been deprecated
+ */
+var _default = {
+  zh: 'Chinese (Simplified)',
+  zh_TW: 'Chinese (Traditional)',
+  cs: 'Czech',
+  da: 'Danish',
+  nl: 'Dutch',
+  en: 'English',
+  en_GB: 'English (United Kingdom)',
+  fi: 'Finnish',
+  fr: 'French',
+  de: 'German',
+  hu: 'Hungarian',
+  it: 'Italian',
+  ja: 'Japanese',
+  ko: 'Korean',
+  nb: 'Norwegian Bokmål',
+  pl: 'Polish',
+  pt_BR: 'Portuguese (Brazil)',
+  pt_PT: 'Portuguese (Portugal)',
+  ru: 'Russian',
+  sk: 'Slovak',
+  es: 'Spanish',
+  sv: 'Swedish',
+  th: 'Thai',
+  tr: 'Turkish',
+  uk: 'Ukrainian',
+  vi: 'Vietnamese'
+};
+exports.default = _default;

package/dist/cjs/keymaps/index.js

@@ -2,7 +2,7 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
+var _typeof3 = require("@babel/runtime/helpers/typeof");
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -87,13 +87,17 @@ exports.findKeyMapForBrowser = findKeyMapForBrowser;
 exports.findKeymapByDescription = findKeymapByDescription;
 exports.findShortcutByDescription = findShortcutByDescription;
 exports.findShortcutByKeymap = findShortcutByKeymap;
-exports.insertRule = exports.insertNewLine = exports.indentList = exports.indent = exports.forwardDelete = void 0;
+exports.forwardDelete = void 0;
+exports.getAriaKeyshortcuts = getAriaKeyshortcuts;
+exports.insertRule = exports.insertNewLine = exports.indentList = exports.indent = void 0;
 exports.makeKeyMapWithCommon = makeKeyMapWithCommon;
 exports.makeKeymap = makeKeymap;
 exports.toggleUnderline = exports.toggleTable = exports.toggleSuperscript = exports.toggleSubscript = exports.toggleStrikethrough = exports.toggleOrderedList = exports.toggleItalic = exports.toggleHeading6 = exports.toggleHeading5 = exports.toggleHeading4 = exports.toggleHeading3 = exports.toggleHeading2 = exports.toggleHeading1 = exports.toggleCode = exports.toggleBulletList = exports.toggleBold = exports.toggleBlockQuote = exports.tab = exports.submit = exports.splitListItem = exports.splitCodeBlock = exports.space = exports.shiftTab = exports.shiftEnter = exports.shiftBackspace = exports.setNormalText = exports.redo = exports.previousCell = exports.pastePlainText = exports.paste = exports.outdentList = exports.outdent = exports.openHelp = exports.nextCell = exports.moveUp = exports.moveRight = exports.moveLeft = exports.moveDown = void 0;
 exports.tooltip = tooltip;
 exports.undo = void 0;
 
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
 var _react = _interopRequireWildcard(require("react"));
@@ -112,7 +116,7 @@ var _templateObject;
 
 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; }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(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 addAltText = makeKeyMapWithCommon('Add Alt Text', 'Mod-Alt-y');
 exports.addAltText = addAltText;
@@ -316,6 +320,54 @@ function findShortcutByKeymap(keymap) {
   return keymap.windows;
 }
 
+function getAriaKeyshortcuts(keymap) {
+  var keyShortcuts;
+
+  if (typeof keymap === 'string') {
+    keyShortcuts = keymap;
+  } else if ((0, _typeof2.default)(keymap) === 'object') {
+    keyShortcuts = keymap[_utils.browser.mac ? 'mac' : 'windows'];
+  }
+
+  if (keyShortcuts) {
+    return keyShortcuts.toLowerCase().split('-').map(function (modifier) {
+      switch (modifier) {
+        case 'cmd':
+          return 'Meta';
+
+        case 'ctrl':
+          return 'Control';
+
+        case 'alt':
+          return 'Alt';
+
+        case 'shift':
+          return 'Shift';
+
+        case 'enter':
+          return 'Enter';
+
+        case 'esc':
+          return 'Esc';
+
+        case 'tab':
+          return 'Tab';
+
+        case 'space':
+          return 'Space';
+
+        case 'backspace':
+          return 'Backspace';
+
+        default:
+          return modifier.split('').join(' ');
+      }
+    }).join('+');
+  } else {
+    return undefined;
+  }
+}
+
 var ALL = [toggleOrderedList, toggleBulletList, toggleBold, toggleItalic, toggleUnderline, toggleStrikethrough, toggleSubscript, toggleSuperscript, toggleCode, setNormalText, toggleHeading1, toggleHeading2, toggleHeading3, toggleHeading4, toggleHeading5, toggleHeading6, toggleBlockQuote, insertNewLine, insertRule, splitCodeBlock, splitListItem, redo, undo, find, escape, enter, shiftEnter];
 
 function makeKeymap(description, windows, mac, common) {

package/dist/cjs/styles/index.js

@@ -129,6 +129,12 @@ Object.defineProperty(exports, "dateSharedStyle", {
     return _date.dateSharedStyle;
   }
 });
+Object.defineProperty(exports, "getOrderedListInlineStyles", {
+  enumerable: true,
+  get: function get() {
+    return _lists.getOrderedListInlineStyles;
+  }
+});
 Object.defineProperty(exports, "headingsSharedStyles", {
   enumerable: true,
   get: function get() {
@@ -147,10 +153,10 @@ Object.defineProperty(exports, "linkSharedStyle", {
     return _link.linkSharedStyle;
   }
 });
-Object.defineProperty(exports, "listPaddingLeftMarkerSpace", {
+Object.defineProperty(exports, "listItemCounterPadding", {
   enumerable: true,
   get: function get() {
-    return _lists.listPaddingLeftMarkerSpace;
+    return _lists.listItemCounterPadding;
   }
 });
 Object.defineProperty(exports, "listsSharedStyles", {

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

@@ -36,23 +36,20 @@ var DY200 = '#82641c';
 
 var AnnotationSharedCSSByState = function AnnotationSharedCSSByState(props) {
   return {
-    /* eslint-disable */
     focus: (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    // Background is not coming through in confluence, suspecting to be caused by some specific combination of\n    // emotion and token look up\n\n    background: ", ";\n    border-bottom: 2px solid\n      ", ";\n    // TODO: https://product-fabric.atlassian.net/browse/DSP-4147\n    box-shadow: ", ";\n    cursor: pointer;\n  "])), (0, _components.themed)({
-      light: _colors.Y75,
-      dark: DY75
+      light: (0, _tokens.token)('color.background.accent.yellow.subtler', _colors.Y75),
+      dark: (0, _tokens.token)('color.background.accent.yellow.subtler', DY75)
     })(props), (0, _components.themed)({
       light: (0, _tokens.token)('color.border.accent.yellow', _colors.Y300),
       dark: (0, _tokens.token)('color.border.accent.yellow', DY300)
     })(props), (0, _tokens.token)('elevation.shadow.overlay', "1px 2px 3px ".concat(_colors.N60A, ", -1px 2px 3px ").concat(_colors.N60A))),
     blur: (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    background: ", ";\n    border-bottom: 2px solid\n      ", ";\n    cursor: pointer;\n  "])), (0, _components.themed)({
-      light: Y75a,
-      dark: DY75a
+      light: (0, _tokens.token)('color.background.accent.yellow.subtlest', Y75a),
+      dark: (0, _tokens.token)('color.background.accent.yellow.subtlest', DY75a)
     })(props), (0, _components.themed)({
       light: (0, _tokens.token)('color.border.accent.yellow', Y200a),
       dark: (0, _tokens.token)('color.border.accent.yellow', DY200)
     })(props))
-    /* eslint-enable */
-
   };
 };
 

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

@@ -13,5 +13,5 @@ var _react = require("@emotion/react");
 
 var _templateObject;
 
-var blockMarksSharedStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  /**\n   * We need to remove margin-top from first item\n   * inside doc, tableCell, tableHeader, blockquote, etc.\n   */\n  *:not(.fabric-editor-block-mark) >,\n  /* For nested block marks apart from those with indentation mark */\n  *:not(.fabric-editor-block-mark) > div.fabric-editor-block-mark:first-of-type:not(.fabric-editor-indentation-mark),\n  // If first document element has indentation mark remove margin-top\n  .ProseMirror .fabric-editor-indentation-mark:first-of-type:first-child {\n    p,\n    h1,\n    h2,\n    h3,\n    h4,\n    h5,\n    h6,\n    .heading-wrapper {\n      :first-child:not(style),\n      style:first-child + * {\n        margin-top: 0;\n      }\n    }\n  }\n"])));
+var blockMarksSharedStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  /**\n   * We need to remove margin-top from first item\n   * inside doc, tableCell, tableHeader, blockquote, etc.\n   */\n  *:not(.fabric-editor-block-mark) >,\n  /* For nested block marks apart from those with indentation mark */\n  *:not(.fabric-editor-block-mark) >\n    div.fabric-editor-block-mark:first-of-type\n    /* Do not remove the margin top for nodes inside indentation marks */\n      :not(.fabric-editor-indentation-mark)\n    /* Do not remove the margin top for nodes inside alignment marks */\n      :not(.fabric-editor-alignment),\n  // If first element inside a block node has alignment mark, then remove the margin-top\n  .fabric-editor-alignment:first-of-type:first-child,\n  // If first document element has indentation mark remove margin-top\n  .ProseMirror .fabric-editor-indentation-mark:first-of-type:first-child {\n    p,\n    h1,\n    h2,\n    h3,\n    h4,\n    h5,\n    h6,\n    .heading-wrapper {\n      :first-child:not(style),\n      style:first-child + * {\n        margin-top: 0;\n      }\n    }\n  }\n"])));
 exports.blockMarksSharedStyles = blockMarksSharedStyles;

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

@@ -35,17 +35,16 @@ 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;\n      background-size: 8px 100%, 8px 100%, 8px 100%, 8px 100%, 8px 100%,\n        8px 100%;\n      background-position: 0 0, 0 0, 100% 0, 100% 0, 100% 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, (0, _tokens.token)('elevation.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: ", "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, (0, _tokens.token)('elevation.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: (0, _tokens.token)('color.background.neutral', _colors.N20),
     dark: (0, _tokens.token)('color.background.neutral', _colors.DN50)
   })(props), (0, _constants.borderRadius)(), (0, _editorSharedStyles.overflowShadow)({
-    // TODO: https://product-fabric.atlassian.net/browse/DSP-4118
     background: (0, _components.themed)({
       light: (0, _tokens.token)('color.background.neutral', _colors.N20),
       dark: (0, _tokens.token)('color.background.neutral', _colors.DN50)
     })(props),
-    width: '8px'
-  }), CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER, (0, _components.themed)({
+    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)({
     light: (0, _tokens.token)('color.background.neutral', _colors.N30),
     dark: (0, _tokens.token)('color.background.neutral', _colors.DN20)
   })(props), (0, _constants.gridSize)(), (0, _components.themed)({

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

@@ -5,10 +5,15 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.listsSharedStyles = exports.listPaddingLeftMarkerSpace = void 0;
+exports.getOrderedListInlineStyles = getOrderedListInlineStyles;
+exports.listsSharedStyles = exports.listItemCounterPadding = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
 var _react = require("@emotion/react");
 
 var _adfSchema = require("@atlaskit/adf-schema");
@@ -17,7 +22,53 @@ var _browser = _interopRequireDefault(require("../../utils/browser"));
 
 var _templateObject;
 
-var listPaddingLeftMarkerSpace = 24;
-exports.listPaddingLeftMarkerSpace = listPaddingLeftMarkerSpace;
-var listsSharedStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  /* =============== INDENTATION SPACING ========= */\n\n  ul,\n  ol {\n    box-sizing: border-box;\n    padding-left: ", "px;\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"])), listPaddingLeftMarkerSpace, _browser.default.gecko ? 'display: inline-block;' : '', _adfSchema.orderedListSelector, _adfSchema.bulletListSelector);
+var listItemCounterPadding = 24;
+exports.listItemCounterPadding = listItemCounterPadding;
+var CSS_VAR_NAMES;
+
+(function (CSS_VAR_NAMES) {
+  CSS_VAR_NAMES["ITEM_COUNTER_PADDING"] = "--ed--list--item-counter--padding";
+})(CSS_VAR_NAMES || (CSS_VAR_NAMES = {}));
+
+var getItemCounterLeftPadding = function getItemCounterLeftPadding(itemCounterDigitsSize) {
+  // Previous padding-left was approximately 24px. We approximate that
+  // same value using "ch" units (which represent the width of a "0" digit
+  // character). We use "ch" so that this computed padding can now grow if
+  //  the font-size ever enlarges.
+  var paddingLeft = "2.385ch";
+
+  if (itemCounterDigitsSize >= 3) {
+    // When there are 3 or more digits, we use a combination of "ch" units and
+    // pixel values so that while the computed padding grows if font-size ever
+    // enlarges, it doesn't over-scale with each digit (because of the fixed pixel
+    // portion of the computed value). This way, very large item counters will not
+    // become overly left-padded.
+    var fixedBasePx = 2;
+    paddingLeft = "calc(".concat(itemCounterDigitsSize + 1, "ch - ").concat(fixedBasePx, "px)");
+  }
+
+  return paddingLeft;
+};
+
+var stringifyStyle = function stringifyStyle(style) {
+  return Object.entries(style).reduce(function (str, _ref) {
+    var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
+        key = _ref2[0],
+        value = _ref2[1];
+
+    return "".concat(str).concat(key, ":").concat(value, ";");
+  }, "");
+};
+
+function getOrderedListInlineStyles(itemCounterDigitsSize, styleFormat) {
+  var style = (0, _defineProperty2.default)({}, CSS_VAR_NAMES.ITEM_COUNTER_PADDING, getItemCounterLeftPadding(itemCounterDigitsSize));
+
+  if (styleFormat === 'string') {
+    return stringifyStyle(style);
+  }
+
+  return style;
+}
+
+var listsSharedStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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.default.gecko ? 'display: inline-block;' : '', _adfSchema.orderedListSelector, _adfSchema.bulletListSelector);
 exports.listsSharedStyles = listsSharedStyles;

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

@@ -19,6 +19,8 @@ var _react = require("@emotion/react");
 
 var _adfSchema = require("@atlaskit/adf-schema");
 
+var _editorPalette = require("@atlaskit/editor-palette");
+
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
 var _consts = require("@atlaskit/editor-shared-styles/consts");
@@ -48,9 +50,6 @@ var tokenPanelColor = {
   error: 'color.background.danger'
 };
 var lightPanelColor = {
-  // TODO: https://product-fabric.atlassian.net/browse/DSP-4066
-
-  /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
   info: colors.B50,
   note: colors.P50,
   tip: colors.G50,
@@ -120,8 +119,6 @@ var darkPanelColors = {
   LightGray: '#5A6977',
   TextColor: '#D9DDE3'
 };
-/* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
-
 exports.darkPanelColors = darkPanelColors;
 var lightIconColor = {
   info: (0, _tokens.token)('color.icon.information', colors.B400),
@@ -144,16 +141,15 @@ var darkIconColor = {
 var panelEmojiSpriteVerticalAlignment = -((0, _constants.gridSize)() * 3 - _consts.akEditorCustomIconSize) / 2;
 var panelEmojiImageVerticalAlignment = panelEmojiSpriteVerticalAlignment - 1; // TODO: https://product-fabric.atlassian.net/browse/DSP-4066
 
-/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
-
-var panelDarkModeColors = [[colors.B50, darkPanelColors.B1200S], [colors.B75, darkPanelColors.B900], [colors.B100, darkPanelColors.B800S], [colors.N0, darkPanelColors.LightGray], [colors.N20, darkPanelColors.Gray], [colors.N60, darkPanelColors.DarkGray], [colors.T50, darkPanelColors.T1200S], [colors.T75, darkPanelColors.T900], [colors.T100, darkPanelColors.T900S], [colors.G50, darkPanelColors.G1200S], [colors.G75, darkPanelColors.G900], [colors.G200, darkPanelColors.G900S], [colors.Y50, darkPanelColors.Y1200S], [colors.Y75, darkPanelColors.Y900], [colors.Y200, darkPanelColors.Y800S], [colors.R50, darkPanelColors.R1200S], [colors.R75, darkPanelColors.R900], [colors.R100, darkPanelColors.R800S], [colors.P50, darkPanelColors.P1200S], [colors.P75, darkPanelColors.P900], [colors.P100, darkPanelColors.P800S]];
+var panelDarkModeColors = [[colors.B50, darkPanelColors.B1200S], [colors.B75, darkPanelColors.B900], [colors.B100, darkPanelColors.B800S], [colors.N0, darkPanelColors.LightGray], [colors.N20, darkPanelColors.Gray], [colors.N60, darkPanelColors.DarkGray], [colors.T50, darkPanelColors.T1200S], [colors.T75, darkPanelColors.T900], [colors.T100, darkPanelColors.T900S], [colors.G50, darkPanelColors.G1200S], [colors.G75, darkPanelColors.G900], [colors.G200, darkPanelColors.G900S], [colors.Y50, darkPanelColors.Y1200S], [colors.Y75, darkPanelColors.Y900], [colors.Y200, darkPanelColors.Y800S], [colors.R50, darkPanelColors.R1200S], [colors.R75, darkPanelColors.R900], [colors.R100, darkPanelColors.R800S], [colors.P50, darkPanelColors.P1200S], [colors.P75, darkPanelColors.P900], [colors.P100, darkPanelColors.P800S]]; // used for custom panels
 
 var getPanelDarkColor = function getPanelDarkColor(panelColor) {
   var colorObject = panelDarkModeColors.find(function (color) {
     return color[0] === panelColor || color[1] === panelColor;
   });
   return colorObject ? colorObject[1] : darkPanelColors.B1200S;
-};
+}; // used for custom panels
+
 
 exports.getPanelDarkColor = getPanelDarkColor;
 var getPanelBackgroundDarkModeColors = panelDarkModeColors.map(function (_ref) {
@@ -232,10 +228,8 @@ var getPanelTypeBackground = function getPanelTypeBackground(panelType) {
   // TODO: https://product-fabric.atlassian.net/browse/DSP-4066
 
   /* eslint-disable @atlaskit/design-system/no-unsafe-design-token-usage */
-  var light = (0, _tokens.token)(tokenPanelColor[panelType], lightPanelColor[panelType]);
+  var light = (0, _editorPalette.hexToEditorBackgroundPaletteColor)(lightPanelColor[panelType]);
   var dark = (0, _tokens.token)(tokenPanelColor[panelType], darkPanelColors[panelType]);
-  /* eslint-disable @atlaskit/design-system/no-unsafe-design-token-usage */
-
   var background = (0, _components.themed)({
     light: light,
     dark: dark

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

@@ -15,6 +15,8 @@ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
 var _colors = require("@atlaskit/theme/colors");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _OverflowShadow = require("../../ui/OverflowShadow");
 
 var _shadowObserver = require("../../ui/OverflowShadow/shadowObserver");
@@ -36,5 +38,5 @@ var shadowWidth = 8;
  *      background-attachment: local, local, scroll, scroll;
  */
 
-var shadowSharedStyle = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  &\n    .", "::before,\n    .", "::after,\n    .", "::before,\n    .", "::after {\n    display: none;\n    position: absolute;\n    pointer-events: none;\n    z-index: ", ";\n    width: ", "px;\n    content: '';\n    /* Scrollbar is outside the content in IE, inset in other browsers. */\n    height: calc(100%);\n  }\n\n  & .", ", .", " {\n    position: relative;\n  }\n\n  & .", "::before {\n    background: linear-gradient(to left, rgba(99, 114, 130, 0) 0, ", " 100%);\n    top: 0px;\n    left: 0;\n    display: block;\n  }\n\n  & .", "::after {\n    background: linear-gradient(\n      to right,\n      rgba(99, 114, 130, 0) 0,\n      ", " 100%\n    );\n    left: calc(100% - ", "px);\n    top: 0px;\n    display: block;\n  }\n  & .", " {\n    height: 100%;\n    width: 0px;\n    min-width: 0px;\n  }\n\n  & .", " {\n    height: 100%;\n    width: 0px;\n    min-width: 0px;\n  }\n"])), _OverflowShadow.shadowClassNames.RIGHT_SHADOW, _OverflowShadow.shadowClassNames.RIGHT_SHADOW, _OverflowShadow.shadowClassNames.LEFT_SHADOW, _OverflowShadow.shadowClassNames.LEFT_SHADOW, _editorSharedStyles.akEditorShadowZIndex, shadowWidth, _OverflowShadow.shadowClassNames.RIGHT_SHADOW, _OverflowShadow.shadowClassNames.LEFT_SHADOW, _OverflowShadow.shadowClassNames.LEFT_SHADOW, _colors.N40A, _OverflowShadow.shadowClassNames.RIGHT_SHADOW, _colors.N40A, shadowWidth, _shadowObserver.shadowObserverClassNames.SENTINEL_LEFT, _shadowObserver.shadowObserverClassNames.SENTINEL_RIGHT);
+var shadowSharedStyle = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  &\n    .", "::before,\n    .", "::after,\n    .", "::before,\n    .", "::after {\n    display: none;\n    position: absolute;\n    pointer-events: none;\n    z-index: ", ";\n    width: ", "px;\n    content: '';\n    /* Scrollbar is outside the content in IE, inset in other browsers. */\n    height: calc(100%);\n  }\n\n  & .", ", .", " {\n    position: relative;\n  }\n\n  & .", "::before {\n    background: linear-gradient(\n        to left,\n        transparent 0,\n        ", " 100%\n      ),\n      linear-gradient(\n        to right,\n        ", " 0px,\n        transparent 1px\n      );\n    top: 0px;\n    left: 0;\n    display: block;\n  }\n\n  & .", "::after {\n    background: linear-gradient(\n        to right,\n        transparent 0,\n        ", " 100%\n      ),\n      linear-gradient(\n        to left,\n        ", " 0px,\n        transparent 1px\n      );\n    left: calc(100% - ", "px);\n    top: 0px;\n    display: block;\n  }\n\n  & .", " {\n    height: 100%;\n    width: 0px;\n    min-width: 0px;\n  }\n\n  & .", " {\n    height: 100%;\n    width: 0px;\n    min-width: 0px;\n  }\n"])), _OverflowShadow.shadowClassNames.RIGHT_SHADOW, _OverflowShadow.shadowClassNames.RIGHT_SHADOW, _OverflowShadow.shadowClassNames.LEFT_SHADOW, _OverflowShadow.shadowClassNames.LEFT_SHADOW, _editorSharedStyles.akEditorShadowZIndex, shadowWidth, _OverflowShadow.shadowClassNames.RIGHT_SHADOW, _OverflowShadow.shadowClassNames.LEFT_SHADOW, _OverflowShadow.shadowClassNames.LEFT_SHADOW, (0, _tokens.token)('elevation.shadow.overflow.spread', _colors.N40A), (0, _tokens.token)('elevation.shadow.overflow.perimeter', 'transparent'), _OverflowShadow.shadowClassNames.RIGHT_SHADOW, (0, _tokens.token)('elevation.shadow.overflow.spread', _colors.N40A), (0, _tokens.token)('elevation.shadow.overflow.perimeter', 'transparent'), shadowWidth, _shadowObserver.shadowObserverClassNames.SENTINEL_LEFT, _shadowObserver.shadowObserverClassNames.SENTINEL_RIGHT);
 exports.shadowSharedStyle = shadowSharedStyle;

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

@@ -82,7 +82,7 @@ var tableSharedStyle = function tableSharedStyle(props) {
       light: (0, _tokens.token)('color.background.neutral', 'rgb(235, 237, 240)'),
       dark: (0, _tokens.token)('color.background.neutral', 'rgb(36, 47, 66)')
     })(props),
-    width: "".concat((0, _constants.gridSize)(), "px")
+    leftCoverWidth: "".concat((0, _constants.gridSize)() * 3, "px")
   }), (0, _components.themed)({
     light: (0, _tokens.token)('color.background.neutral', 'rgb(235, 237, 240)'),
     dark: (0, _tokens.token)('color.background.neutral', 'rgb(36, 47, 66)')
@@ -94,7 +94,7 @@ var tableSharedStyle = function tableSharedStyle(props) {
       light: (0, _tokens.token)('color.background.neutral', 'rgb(235, 237, 240)'),
       dark: (0, _tokens.token)('color.background.neutral', 'rgb(36, 47, 66)')
     })(props),
-    width: "".concat((0, _constants.gridSize)(), "px")
+    leftCoverWidth: "".concat((0, _constants.gridSize)() * 3, "px")
   }), (0, _components.themed)({
     light: (0, _tokens.token)('color.background.neutral', 'rgb(235, 237, 240)'),
     dark: (0, _tokens.token)('color.background.neutral', 'rgb(36, 47, 66)')

package/dist/cjs/types/next-editor-plugin.js

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

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

@@ -46,7 +46,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 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 packageName = "@atlaskit/editor-common";
-var packageVersion = "71.0.2";
+var packageVersion = "72.0.0";
 var halfFocusRing = 1;
 var dropOffset = "0, ".concat((0, _constants.gridSize)(), "px");