@atlaskit/editor-core 176.0.3 → 177.0.1

package/dist/cjs/plugins/list/pm-plugins/main.js

@@ -29,6 +29,10 @@ var _gapCursorSelection = require("../../selection/gap-cursor-selection");
 
 var _styles = require("@atlaskit/editor-common/styles");
 
+var _utils2 = require("@atlaskit/editor-common/utils");
+
+var _featureFlagsContext = require("../../feature-flags-context");
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -44,8 +48,9 @@ var initialState = {
   decorationSet: _prosemirrorView.DecorationSet.empty
 };
 
-var getDecorations = function getDecorations(doc) {
-  var decorations = []; // this stack keeps track of each (nested) list to calculate the indentation level
+var getDecorations = function getDecorations(doc, state) {
+  var decorations = [];
+  var featureFlags = (0, _featureFlagsContext.getFeatureFlags)(state); // this stack keeps track of each (nested) list to calculate the indentation level
 
   var processedListsStack = [];
   doc.nodesBetween(0, doc.content.size, function (node, currentNodeStartPos) {
@@ -76,10 +81,27 @@ var getDecorations = function getDecorations(doc) {
         'data-indent-level': "".concat(depth)
       }));
 
-      if (node.childCount >= 100) {
-        decorations.push(_prosemirrorView.Decoration.node(from, to, {
-          'data-child-count': '100+'
-        }));
+      if (featureFlags !== null && featureFlags !== void 0 && featureFlags.restartNumberedLists) {
+        var _node$attrs;
+
+        // If a numbered list has item counters numbering >= 100, we'll need to add special
+        // spacing to account for the extra digit chars
+        var digitsSize = (0, _utils2.getItemCounterDigitsSize)({
+          itemsCount: node === null || node === void 0 ? void 0 : node.childCount,
+          order: node === null || node === void 0 ? void 0 : (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.order
+        });
+
+        if (digitsSize) {
+          decorations.push(_prosemirrorView.Decoration.node(from, to, {
+            style: (0, _styles.getOrderedListInlineStyles)(digitsSize, 'string')
+          }));
+        }
+      } else {
+        if (node.childCount >= 100) {
+          decorations.push(_prosemirrorView.Decoration.node(from, to, {
+            'data-child-count': '100+'
+          }));
+        }
       }
     }
   });
@@ -88,9 +110,9 @@ var getDecorations = function getDecorations(doc) {
 
 exports.getDecorations = getDecorations;
 
-var handleDocChanged = function handleDocChanged(tr, pluginState) {
+var handleDocChanged = function handleDocChanged(tr, pluginState, editorState) {
   var nextPluginState = handleSelectionChanged(tr, pluginState);
-  var decorationSet = getDecorations(tr.doc);
+  var decorationSet = getDecorations(tr.doc, editorState);
   return _objectSpread(_objectSpread({}, nextPluginState), {}, {
     decorationSet: decorationSet
   });
@@ -135,7 +157,7 @@ var _pluginFactory = (0, _pluginStateFactory.pluginFactory)(listPluginKey, reduc
 
 var createInitialState = function createInitialState(state) {
   return _objectSpread(_objectSpread({}, initialState), {}, {
-    decorationSet: getDecorations(state.doc)
+    decorationSet: getDecorations(state.doc, state)
   });
 };
 
@@ -165,7 +187,7 @@ var createPlugin = function createPlugin(eventDispatch) {
             var _document, _document$elementFrom;
 
             var bufferPx = 50;
-            var isCodeBlockNextToListMarker = Boolean((_document = document) === null || _document === void 0 ? void 0 : (_document$elementFrom = _document.elementFromPoint(event.clientX + (_styles.listPaddingLeftMarkerSpace + bufferPx), event.clientY)) === null || _document$elementFrom === void 0 ? void 0 : _document$elementFrom.closest(".".concat(_styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER)));
+            var isCodeBlockNextToListMarker = Boolean((_document = document) === null || _document === void 0 ? void 0 : (_document$elementFrom = _document.elementFromPoint(event.clientX + (_styles.listItemCounterPadding + bufferPx), event.clientY)) === null || _document$elementFrom === void 0 ? void 0 : _document$elementFrom.closest(".".concat(_styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER)));
 
             if (isCodeBlockNextToListMarker) {
               // +1 needed to put cursor inside li

package/dist/cjs/plugins/media/index.js

@@ -15,6 +15,10 @@ Object.defineProperty(exports, "insertMediaSingleNode", {
 
 var _react = _interopRequireDefault(require("react"));
 
+var _prosemirrorState = require("prosemirror-state");
+
+var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
+
 var _adfSchema = require("@atlaskit/adf-schema");
 
 var _main = require("./pm-plugins/main");
@@ -176,6 +180,37 @@ var mediaPlugin = function mediaPlugin(options) {
         });
       }
 
+      pmPlugins.push({
+        name: 'mediaSelectionHandler',
+        plugin: function plugin() {
+          var mediaSelectionHandlerPlugin = new _safePlugin.SafePlugin({
+            key: new _prosemirrorState.PluginKey('mediaSelectionHandlerPlugin'),
+            props: {
+              handleScrollToSelection: function handleScrollToSelection(view) {
+                var selection = view.state.selection;
+
+                if (!(selection instanceof _prosemirrorState.NodeSelection) || selection.node.type.name !== 'media') {
+                  return false;
+                }
+
+                var _view$domAtPos = view.domAtPos(selection.from),
+                    node = _view$domAtPos.node,
+                    offset = _view$domAtPos.offset;
+
+                if ( // Is the media element mounted already?
+                offset === node.childNodes.length) {
+                  // Media is not ready, so stop the scroll request
+                  return true;
+                } // Media is ready, keep the scrolling request
+
+
+                return false;
+              }
+            }
+          });
+          return mediaSelectionHandlerPlugin;
+        }
+      });
       return pmPlugins;
     },
     contentComponent: function contentComponent(_ref7) {

package/dist/cjs/plugins/media/nodeviews/mediaGroup.js

@@ -113,13 +113,12 @@ var MediaGroup = /*#__PURE__*/function (_React$Component) {
       var oldMediaNodes = _this.mediaNodes;
       _this.mediaNodes = [];
       node.forEach(function (item, childOffset) {
-        _this.mediaPluginState.mediaGroupNodes[item.attrs.id] = {
-          node: item,
-          getPos: function getPos() {
-            return props.getPos() + childOffset + 1;
-          }
+        var getPos = function getPos() {
+          return props.getPos() + childOffset + 1;
         };
 
+        _this.mediaPluginState.setMediaGroupNode(item, getPos);
+
         _this.mediaNodes.push(item);
       });
 
@@ -263,7 +262,9 @@ var MediaGroup = /*#__PURE__*/function (_React$Component) {
                   }
 
                   _context.next = 14;
-                  return mediaNodeUpdater.copyNode();
+                  return mediaNodeUpdater.copyNode({
+                    traceId: node.attrs.__mediaTraceId
+                  });
 
                 case 14:
                 case "end":

package/dist/cjs/plugins/media/nodeviews/mediaInline.js

@@ -120,7 +120,9 @@ var updateMediaNodeAttributes = /*#__PURE__*/function () {
             }
 
             _context.prev = 13;
-            copyNode = mediaNodeUpdater.copyNode();
+            copyNode = mediaNodeUpdater.copyNode({
+              traceId: node.attrs.__mediaTraceId
+            });
             addPendingTask(copyNode);
             _context.next = 18;
             return copyNode;

package/dist/cjs/plugins/media/nodeviews/mediaNodeUpdater.js

@@ -484,80 +484,86 @@ var MediaNodeUpdater = /*#__PURE__*/function () {
         return _ref7.apply(this, arguments);
       };
     }());
-    (0, _defineProperty2.default)(this, "copyNode", /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee8() {
-      var mediaProvider, _this$props, isMediaSingle, view, attrs, nodeContextId, uploadMediaClientConfig, mediaClient, auth, objectId, id, collection, source, currentCollectionName, destination, mediaFile;
+    (0, _defineProperty2.default)(this, "copyNode", /*#__PURE__*/function () {
+      var _ref8 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee8(traceContext) {
+        var mediaProvider, _this$props, isMediaSingle, view, attrs, nodeContextId, uploadMediaClientConfig, mediaClient, auth, objectId, id, collection, source, currentCollectionName, destination, mediaFile;
 
-      return _regenerator.default.wrap(function _callee8$(_context8) {
-        while (1) {
-          switch (_context8.prev = _context8.next) {
-            case 0:
-              _context8.next = 2;
-              return _this.props.mediaProvider;
+        return _regenerator.default.wrap(function _callee8$(_context8) {
+          while (1) {
+            switch (_context8.prev = _context8.next) {
+              case 0:
+                _context8.next = 2;
+                return _this.props.mediaProvider;
 
-            case 2:
-              mediaProvider = _context8.sent;
-              _this$props = _this.props, isMediaSingle = _this$props.isMediaSingle, view = _this$props.view;
-              attrs = _this.getAttrs();
+              case 2:
+                mediaProvider = _context8.sent;
+                _this$props = _this.props, isMediaSingle = _this$props.isMediaSingle, view = _this$props.view;
+                attrs = _this.getAttrs();
 
-              if (!(!mediaProvider || !mediaProvider.uploadParams || !attrs || attrs.type !== 'file')) {
-                _context8.next = 7;
-                break;
-              }
+                if (!(!mediaProvider || !mediaProvider.uploadParams || !attrs || attrs.type !== 'file')) {
+                  _context8.next = 7;
+                  break;
+                }
 
-              return _context8.abrupt("return");
+                return _context8.abrupt("return");
 
-            case 7:
-              nodeContextId = _this.getNodeContextId();
-              uploadMediaClientConfig = mediaProvider.uploadMediaClientConfig;
+              case 7:
+                nodeContextId = _this.getNodeContextId();
+                uploadMediaClientConfig = mediaProvider.uploadMediaClientConfig;
 
-              if (!(uploadMediaClientConfig && uploadMediaClientConfig.getAuthFromContext && nodeContextId)) {
-                _context8.next = 25;
-                break;
-              }
+                if (!(uploadMediaClientConfig && uploadMediaClientConfig.getAuthFromContext && nodeContextId)) {
+                  _context8.next = 25;
+                  break;
+                }
 
-              mediaClient = (0, _mediaClient.getMediaClient)(uploadMediaClientConfig);
-              _context8.next = 13;
-              return uploadMediaClientConfig.getAuthFromContext(nodeContextId);
+                mediaClient = (0, _mediaClient.getMediaClient)(uploadMediaClientConfig);
+                _context8.next = 13;
+                return uploadMediaClientConfig.getAuthFromContext(nodeContextId);
 
-            case 13:
-              auth = _context8.sent;
-              _context8.next = 16;
-              return _this.getObjectId();
+              case 13:
+                auth = _context8.sent;
+                _context8.next = 16;
+                return _this.getObjectId();
 
-            case 16:
-              objectId = _context8.sent;
-              id = attrs.id, collection = attrs.collection;
-              source = {
-                id: id,
-                collection: collection,
-                authProvider: function authProvider() {
-                  return Promise.resolve(auth);
-                }
-              };
-              currentCollectionName = mediaProvider.uploadParams.collection;
-              destination = {
-                collection: currentCollectionName,
-                authProvider: uploadMediaClientConfig.authProvider,
-                occurrenceKey: (0, _v.default)()
-              };
-              _context8.next = 23;
-              return mediaClient.file.copyFile(source, destination);
-
-            case 23:
-              mediaFile = _context8.sent;
-              (0, _helpers.updateMediaNodeAttrs)(source.id, {
-                id: mediaFile.id,
-                collection: currentCollectionName,
-                __contextId: objectId
-              }, isMediaSingle)(view.state, view.dispatch);
+              case 16:
+                objectId = _context8.sent;
+                id = attrs.id, collection = attrs.collection;
+                source = {
+                  id: id,
+                  collection: collection,
+                  authProvider: function authProvider() {
+                    return Promise.resolve(auth);
+                  }
+                };
+                currentCollectionName = mediaProvider.uploadParams.collection;
+                destination = {
+                  collection: currentCollectionName,
+                  authProvider: uploadMediaClientConfig.authProvider,
+                  occurrenceKey: (0, _v.default)()
+                };
+                _context8.next = 23;
+                return mediaClient.file.copyFile(source, destination, undefined, traceContext);
 
-            case 25:
-            case "end":
-              return _context8.stop();
+              case 23:
+                mediaFile = _context8.sent;
+                (0, _helpers.updateMediaNodeAttrs)(source.id, {
+                  id: mediaFile.id,
+                  collection: currentCollectionName,
+                  __contextId: objectId
+                }, isMediaSingle)(view.state, view.dispatch);
+
+              case 25:
+              case "end":
+                return _context8.stop();
+            }
           }
-        }
-      }, _callee8);
-    })));
+        }, _callee8);
+      }));
+
+      return function (_x3) {
+        return _ref8.apply(this, arguments);
+      };
+    }());
     this.props = props;
   }
 
@@ -723,7 +729,7 @@ var MediaNodeUpdater = /*#__PURE__*/function () {
         }, _callee10, this, [[1, 6]]);
       }));
 
-      function handleExternalMedia(_x3) {
+      function handleExternalMedia(_x4) {
         return _handleExternalMedia.apply(this, arguments);
       }
 

package/dist/cjs/plugins/media/nodeviews/mediaSingle.js

@@ -226,7 +226,9 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
                 });
 
                 _context2.prev = 24;
-                copyNode = mediaNodeUpdater.copyNode();
+                copyNode = mediaNodeUpdater.copyNode({
+                  traceId: node.attrs.__mediaTraceId
+                });
                 addPendingTask(copyNode);
                 _context2.next = 29;
                 return copyNode;

package/dist/cjs/plugins/media/pm-plugins/alt-text/ui/AltTextEdit.js

@@ -57,8 +57,6 @@ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
 var _ui = require("@atlaskit/editor-common/ui");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 
 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); }
@@ -74,12 +72,12 @@ exports.CONTAINER_WIDTH_IN_PX = CONTAINER_WIDTH_IN_PX;
 var MAX_ALT_TEXT_LENGTH = 510; // double tweet length
 
 exports.MAX_ALT_TEXT_LENGTH = MAX_ALT_TEXT_LENGTH;
-var supportText = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  font-size: ", ";\n  padding: 12px 40px;\n  line-height: 20px;\n  border-top: 1px solid ", ";\n  margin: 0;\n"])), (0, _tokens.token)('color.text.subtlest', _colors.N100), (0, _editorSharedStyles.relativeFontSizeToBase16)(12), (0, _tokens.token)('color.border', _colors.N30));
+var supportText = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  font-size: ", ";\n  padding: 12px 40px;\n  line-height: 20px;\n  border-top: 1px solid ", ";\n  margin: 0;\n"])), "var(--ds-text-subtlest, ".concat(_colors.N100, ")"), (0, _editorSharedStyles.relativeFontSizeToBase16)(12), "var(--ds-border, ".concat(_colors.N30, ")"));
 var container = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  width: ", "px;\n  display: flex;\n  flex-direction: column;\n  overflow: auto;\n  line-height: 2;\n"])), CONTAINER_WIDTH_IN_PX);
 var inputWrapper = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  line-height: 0;\n  padding: 5px 0;\n  align-items: center;\n"])));
-var validationWrapper = (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  line-height: 0;\n  padding: 12px 24px 12px 0;\n  margin: 0 12px 0 40px;\n  border-top: 1px solid ", ";\n  align-items: start;\n  flex-direction: column;\n"])), (0, _tokens.token)('color.border.danger', _colors.R400));
+var validationWrapper = (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  line-height: 0;\n  padding: 12px 24px 12px 0;\n  margin: 0 12px 0 40px;\n  border-top: 1px solid ", ";\n  align-items: start;\n  flex-direction: column;\n"])), "var(--ds-border-danger, ".concat(_colors.R400, ")"));
 var buttonWrapper = (0, _react2.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  padding: 4px 8px;\n"])));
-var clearText = (0, _react2.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n"])), (0, _tokens.token)('color.icon.subtle', _colors.N80));
+var clearText = (0, _react2.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n"])), "var(--ds-icon-subtle, ".concat(_colors.N80, ")"));
 
 var AltTextEditComponent = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(AltTextEditComponent, _React$Component);

package/dist/cjs/plugins/media/pm-plugins/main.js

@@ -521,6 +521,12 @@ var MediaPluginStateImplementation = /*#__PURE__*/function () {
           break;
       }
     });
+    (0, _defineProperty2.default)(this, "setMediaGroupNode", function (node, getPos) {
+      _this.mediaGroupNodes[node.attrs.id] = {
+        node: node,
+        getPos: getPos
+      };
+    });
     (0, _defineProperty2.default)(this, "removeNodeById", function (state) {
       var id = state.id;
       var mediaNodeWithPos = helpers.findMediaNode(_this, id, (0, _isImage.isImage)(state.fileMimeType));

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

@@ -19,11 +19,9 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _mediaCard = require("@atlaskit/media-card");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _templateObject;
 
-var mediaStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror {\n    ", " & [layout='full-width'] .", ",\n    & [layout='wide'] .", " {\n      margin-left: 50%;\n      transform: translateX(-50%);\n    }\n\n    & [layout^='wrap-'] + [layout^='wrap-'] {\n      clear: none;\n      & + p,\n      & + div[class^='fabric-editor-align'],\n      & + ul,\n      & + ol,\n      & + h1,\n      & + h2,\n      & + h3,\n      & + h4,\n      & + h5,\n      & + h6 {\n        clear: both !important;\n      }\n      & .", " {\n        margin-left: 0;\n        margin-right: 0;\n      }\n    }\n\n    .mediaSingleView-content-wrap[layout^='wrap-'] {\n      max-width: 100%;\n      // overwrite default Prosemirror setting making it clear: both\n      clear: inherit;\n    }\n\n    .mediaSingleView-content-wrap[layout='wrap-left'] {\n      float: left;\n    }\n\n    .mediaSingleView-content-wrap[layout='wrap-right'] {\n      float: right;\n    }\n\n    .mediaSingleView-content-wrap[layout='wrap-right']\n      + .mediaSingleView-content-wrap[layout='wrap-left'] {\n      clear: both;\n    }\n\n    /* Larger margins for resize handlers when at depth 0 of the document */\n    & > .mediaSingleView-content-wrap {\n      .richMedia-resize-handle-right {\n        margin-right: -", "px;\n      }\n      .richMedia-resize-handle-left {\n        margin-left: -", "px;\n      }\n    }\n  }\n\n  .richMedia-resize-handle-right,\n  .richMedia-resize-handle-left {\n    display: flex;\n    flex-direction: column;\n\n    /* vertical align */\n    justify-content: center;\n  }\n\n  .richMedia-resize-handle-right {\n    align-items: flex-end;\n    padding-right: 12px;\n    margin-right: -", "px;\n  }\n\n  .richMedia-resize-handle-left {\n    align-items: flex-start;\n    padding-left: 12px;\n    margin-left: -", "px;\n  }\n\n  .richMedia-resize-handle-right::after,\n  .richMedia-resize-handle-left::after {\n    content: ' ';\n    display: flex;\n    width: 3px;\n    height: 64px;\n\n    border-radius: 6px;\n  }\n\n  .", ":hover .richMedia-resize-handle-left::after,\n  .", ":hover .richMedia-resize-handle-right::after {\n    background: ", ";\n  }\n\n  .", " .richMedia-resize-handle-right::after,\n  .", " .richMedia-resize-handle-left::after,\n  .", " .richMedia-resize-handle-right:hover::after,\n  .", " .richMedia-resize-handle-left:hover::after,\n  .", ".is-resizing .richMedia-resize-handle-right::after,\n  .", ".is-resizing .richMedia-resize-handle-left::after {\n    background: ", ";\n  }\n\n  .__resizable_base__ {\n    left: unset !important;\n    width: auto !important;\n    height: auto !important;\n  }\n\n  /* Danger when top level node for smart cards / inline links */\n  .danger > div > div > .media-card-frame,\n  .danger > span > a {\n    background-color: ", ";\n    box-shadow: 0px 0px 0px ", "px\n      ", ";\n    transition: background-color 0s, box-shadow 0s;\n  }\n  .mediaGroupView-content-wrap.danger {\n    /* Media inline */\n    .", "::after {\n      border: 1px solid ", ";\n    }\n  }\n  /* Danger when nested node or common */\n  .danger {\n    /* Media single */\n    .", " .", "::after {\n      border: 1px solid ", ";\n    }\n    /* Media single video player */\n    .", " .", "::after {\n      border: 1px solid ", ";\n    }\n    /* New file experience */\n    .", " .", " {\n      box-shadow: 0 0 0 1px\n        ", " !important;\n    }\n    /* Media resize handlers */\n    .richMedia-resize-handle-right::after,\n    .richMedia-resize-handle-left::after {\n      background: ", ";\n    }\n\n    /* Smart cards */\n    div div .media-card-frame,\n    .inlineCardView-content-wrap > span > a {\n      background-color: ", "; /* R75 with 50% opactiy */\n      transition: background-color 0s;\n    }\n\n    div div .media-card-frame::after {\n      box-shadow: none;\n    }\n  }\n"])), _styles.mediaSingleSharedStyle, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _editorSharedStyles.akEditorMediaResizeHandlerPaddingWide, _editorSharedStyles.akEditorMediaResizeHandlerPaddingWide, _editorSharedStyles.akEditorMediaResizeHandlerPadding, _editorSharedStyles.akEditorMediaResizeHandlerPadding, _styles.richMediaClassName, _styles.richMediaClassName, (0, _tokens.token)('color.border', _colors.N60), _editorSharedStyles.akEditorSelectedNodeClassName, _editorSharedStyles.akEditorSelectedNodeClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, (0, _tokens.token)('color.border.focused', _colors.B200), (0, _tokens.token)('color.background.danger', _editorSharedStyles.akEditorDeleteBackground), _editorSharedStyles.akEditorSelectedBorderBoldSize, (0, _tokens.token)('color.border.danger', _editorSharedStyles.akEditorDeleteBorder), _mediaCard.fileCardImageViewSelectedSelector, (0, _tokens.token)('color.border.danger', _editorSharedStyles.akEditorDeleteIconColor), _styles.richMediaClassName, _mediaCard.fileCardImageViewSelector, (0, _tokens.token)('color.border.danger', _editorSharedStyles.akEditorDeleteIconColor), _styles.richMediaClassName, _mediaCard.inlinePlayerClassName, (0, _tokens.token)('color.border.danger', _editorSharedStyles.akEditorDeleteIconColor), _styles.richMediaClassName, _mediaCard.newFileExperienceClassName, (0, _tokens.token)('color.border.danger', _editorSharedStyles.akEditorDeleteIconColor), (0, _tokens.token)('color.icon.danger', _editorSharedStyles.akEditorDeleteIconColor), (0, _tokens.token)('color.blanket.danger', 'rgb(255, 189, 173, 0.5)'));
+var mediaStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror {\n    ", " & [layout='full-width'] .", ",\n    & [layout='wide'] .", " {\n      margin-left: 50%;\n      transform: translateX(-50%);\n    }\n\n    & [layout^='wrap-'] + [layout^='wrap-'] {\n      clear: none;\n      & + p,\n      & + div[class^='fabric-editor-align'],\n      & + ul,\n      & + ol,\n      & + h1,\n      & + h2,\n      & + h3,\n      & + h4,\n      & + h5,\n      & + h6 {\n        clear: both !important;\n      }\n      & .", " {\n        margin-left: 0;\n        margin-right: 0;\n      }\n    }\n\n    .mediaSingleView-content-wrap[layout^='wrap-'] {\n      max-width: 100%;\n      // overwrite default Prosemirror setting making it clear: both\n      clear: inherit;\n    }\n\n    .mediaSingleView-content-wrap[layout='wrap-left'] {\n      float: left;\n    }\n\n    .mediaSingleView-content-wrap[layout='wrap-right'] {\n      float: right;\n    }\n\n    .mediaSingleView-content-wrap[layout='wrap-right']\n      + .mediaSingleView-content-wrap[layout='wrap-left'] {\n      clear: both;\n    }\n\n    /* Larger margins for resize handlers when at depth 0 of the document */\n    & > .mediaSingleView-content-wrap {\n      .richMedia-resize-handle-right {\n        margin-right: -", "px;\n      }\n      .richMedia-resize-handle-left {\n        margin-left: -", "px;\n      }\n    }\n  }\n\n  .richMedia-resize-handle-right,\n  .richMedia-resize-handle-left {\n    display: flex;\n    flex-direction: column;\n\n    /* vertical align */\n    justify-content: center;\n  }\n\n  .richMedia-resize-handle-right {\n    align-items: flex-end;\n    padding-right: 12px;\n    margin-right: -", "px;\n  }\n\n  .richMedia-resize-handle-left {\n    align-items: flex-start;\n    padding-left: 12px;\n    margin-left: -", "px;\n  }\n\n  .richMedia-resize-handle-right::after,\n  .richMedia-resize-handle-left::after {\n    content: ' ';\n    display: flex;\n    width: 3px;\n    height: 64px;\n\n    border-radius: 6px;\n  }\n\n  .", ":hover .richMedia-resize-handle-left::after,\n  .", ":hover .richMedia-resize-handle-right::after {\n    background: ", ";\n  }\n\n  .", " .richMedia-resize-handle-right::after,\n  .", " .richMedia-resize-handle-left::after,\n  .", " .richMedia-resize-handle-right:hover::after,\n  .", " .richMedia-resize-handle-left:hover::after,\n  .", ".is-resizing .richMedia-resize-handle-right::after,\n  .", ".is-resizing .richMedia-resize-handle-left::after {\n    background: ", ";\n  }\n\n  .__resizable_base__ {\n    left: unset !important;\n    width: auto !important;\n    height: auto !important;\n  }\n\n  /* Danger when top level node for smart cards / inline links */\n  .danger > div > div > .media-card-frame,\n  .danger > span > a {\n    background-color: ", ";\n    box-shadow: 0px 0px 0px ", "px\n      ", ";\n    transition: background-color 0s, box-shadow 0s;\n  }\n  .mediaGroupView-content-wrap.danger {\n    /* Media inline */\n    .", "::after {\n      border: 1px solid ", ";\n    }\n  }\n  /* Danger when nested node or common */\n  .danger {\n    /* Media single */\n    .", " .", "::after {\n      border: 1px solid ", ";\n    }\n    /* Media single video player */\n    .", " .", "::after {\n      border: 1px solid ", ";\n    }\n    /* New file experience */\n    .", " .", " {\n      box-shadow: 0 0 0 1px\n        ", " !important;\n    }\n    /* Media resize handlers */\n    .richMedia-resize-handle-right::after,\n    .richMedia-resize-handle-left::after {\n      background: ", ";\n    }\n\n    /* Smart cards */\n    div div .media-card-frame,\n    .inlineCardView-content-wrap > span > a {\n      background-color: ", "; /* R75 with 50% opactiy */\n      transition: background-color 0s;\n    }\n\n    div div .media-card-frame::after {\n      box-shadow: none;\n    }\n  }\n"])), _styles.mediaSingleSharedStyle, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _editorSharedStyles.akEditorMediaResizeHandlerPaddingWide, _editorSharedStyles.akEditorMediaResizeHandlerPaddingWide, _editorSharedStyles.akEditorMediaResizeHandlerPadding, _editorSharedStyles.akEditorMediaResizeHandlerPadding, _styles.richMediaClassName, _styles.richMediaClassName, "var(--ds-border, ".concat(_colors.N60, ")"), _editorSharedStyles.akEditorSelectedNodeClassName, _editorSharedStyles.akEditorSelectedNodeClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, "var(--ds-border-focused, ".concat(_colors.B200, ")"), "var(--ds-background-danger, ".concat(_editorSharedStyles.akEditorDeleteBackground, ")"), _editorSharedStyles.akEditorSelectedBorderBoldSize, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), _mediaCard.fileCardImageViewSelectedSelector, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteIconColor, ")"), _styles.richMediaClassName, _mediaCard.fileCardImageViewSelector, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteIconColor, ")"), _styles.richMediaClassName, _mediaCard.inlinePlayerClassName, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteIconColor, ")"), _styles.richMediaClassName, _mediaCard.newFileExperienceClassName, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteIconColor, ")"), "var(--ds-icon-danger, ".concat(_editorSharedStyles.akEditorDeleteIconColor, ")"), "var(--ds-blanket-danger, rgb(255, 189, 173, 0.5))");
 /* `left: unset` above is to work around Chrome bug where rendering a div with
  * that style applied inside a container that has a scroll, causes any svgs on
  * the page, without a border, that are inside a flexbox, to no longer align to

package/dist/cjs/plugins/media/toolbar/index.js

@@ -140,6 +140,7 @@ var generateMediaCardFloatingToolbar = function generateMediaCardFloatingToolbar
     id: 'editor.media.delete',
     type: 'button',
     appearance: 'danger',
+    focusEditoronEnter: true,
     icon: _remove.default,
     onMouseEnter: (0, _decoration.hoverDecoration)(mediaGroup, true),
     onMouseLeave: (0, _decoration.hoverDecoration)(mediaGroup, false),
@@ -213,6 +214,7 @@ var generateMediaInlineFloatingToolbar = function generateMediaInlineFloatingToo
     id: 'editor.media.delete',
     type: 'button',
     appearance: 'danger',
+    focusEditoronEnter: true,
     icon: _remove.default,
     onMouseEnter: (0, _decoration.hoverDecoration)(mediaInline, true),
     onMouseLeave: (0, _decoration.hoverDecoration)(mediaInline, false),
@@ -298,6 +300,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
     id: 'editor.media.delete',
     type: 'button',
     appearance: 'danger',
+    focusEditoronEnter: true,
     icon: _remove.default,
     onMouseEnter: (0, _decoration.hoverDecoration)(mediaSingle, true),
     onMouseLeave: (0, _decoration.hoverDecoration)(mediaSingle, false),

package/dist/cjs/plugins/media/ui/CaptionPlaceholder/index.js

@@ -17,13 +17,11 @@ var _reactIntlNext = require("react-intl-next");
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _messages = require("./messages");
 
 var _templateObject;
 
-var placeholder = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  width: 100%;\n  text-align: center;\n  margin-top: 8px !important;\n  display: block;\n"])), (0, _tokens.token)('color.text.subtlest', _colors.N200));
+var placeholder = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  width: 100%;\n  text-align: center;\n  margin-top: 8px !important;\n  display: block;\n"])), "var(--ds-text-subtlest, ".concat(_colors.N200, ")"));
 var CAPTION_PLACEHOLDER_ID = 'caption-placeholder';
 exports.CAPTION_PLACEHOLDER_ID = CAPTION_PLACEHOLDER_ID;
 

package/dist/cjs/plugins/media/ui/Media/DropPlaceholder.js

@@ -23,14 +23,12 @@ var _reactIntlNext = require("react-intl-next");
 
 var _dropPlaceholderMessages = require("./drop-placeholder-messages");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _media = require("../../nodeviews/mediaNodeView/media");
 
 var _templateObject, _templateObject2;
 
-var iconWrapper = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  background: ", ";\n  border-radius: ", "px;\n  margin: 5px 3px 25px;\n  width: ", "px;\n  min-height: ", "px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])), (0, _tokens.token)('color.icon.accent.blue', (0, _adfSchema.hexToRgba)(_colors.B400, 0.4) || _colors.B400), (0, _tokens.token)('color.background.accent.blue.subtle', (0, _adfSchema.hexToRgba)(_colors.B300, 0.6) || _colors.B300), (0, _constants.borderRadius)(), _media.FILE_WIDTH, _media.MEDIA_HEIGHT);
-var dropLine = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  border-radius: ", "px;\n  margin: 2px 0;\n  width: 100%;\n  height: 2px;\n"])), (0, _tokens.token)('color.border.focused', _colors.B200), (0, _constants.borderRadius)());
+var iconWrapper = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  background: ", ";\n  border-radius: ", "px;\n  margin: 5px 3px 25px;\n  width: ", "px;\n  min-height: ", "px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])), "var(--ds-icon-accent-blue, ".concat((0, _adfSchema.hexToRgba)(_colors.B400, 0.4) || _colors.B400, ")"), "var(--ds-background-accent-blue-subtle, ".concat((0, _adfSchema.hexToRgba)(_colors.B300, 0.6) || _colors.B300, ")"), (0, _constants.borderRadius)(), _media.FILE_WIDTH, _media.MEDIA_HEIGHT);
+var dropLine = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  border-radius: ", "px;\n  margin: 2px 0;\n  width: 100%;\n  height: 2px;\n"])), "var(--ds-border-focused, ".concat(_colors.B200, ")"), (0, _constants.borderRadius)());
 
 var IconWrapperComponent = function IconWrapperComponent(props) {
   var intl = props.intl;

package/dist/cjs/plugins/media/ui/MediaLinkingToolbar.js

@@ -55,8 +55,6 @@ var _enums = require("../../analytics/types/enums");
 
 var _mediaLinkingToolbarMessages = require("./media-linking-toolbar-messages");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _templateObject, _templateObject2;
 
 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); }
@@ -67,7 +65,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 validationWrapper = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  line-height: 0;\n  padding: 12px 24px 12px 0;\n  margin: 0 4px 0 32px;\n  border-top: 1px solid ", ";\n  align-items: start;\n  display: flex;\n  flex-direction: column;\n"])), (0, _tokens.token)('color.border.danger', _colors.R400));
+var validationWrapper = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  line-height: 0;\n  padding: 12px 24px 12px 0;\n  margin: 0 4px 0 32px;\n  border-top: 1px solid ", ";\n  align-items: start;\n  display: flex;\n  flex-direction: column;\n"])), "var(--ds-border-danger, ".concat(_colors.R400, ")"));
 var buttonWrapper = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 4px 8px 4px 0px;\n"])));
 
 var LinkAddToolbar = /*#__PURE__*/function (_React$PureComponent) {

package/dist/cjs/plugins/media/utils/media-single.js

@@ -36,6 +36,8 @@ var _isImage = require("./is-image");
 
 var _position = require("../../../utils/prosemirror/position");
 
+var _mediaCommon2 = require("@atlaskit/media-common");
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -221,6 +223,7 @@ function transformSliceForMedia(slice, schema) {
       bulletList = _schema$nodes2.bulletList,
       orderedList = _schema$nodes2.orderedList,
       media = _schema$nodes2.media,
+      mediaInline = _schema$nodes2.mediaInline,
       expand = _schema$nodes2.expand;
   return function (selection) {
     var newSlice = slice;
@@ -234,10 +237,23 @@ function transformSliceForMedia(slice, schema) {
       });
     }
 
+    var __mediaTraceId = (0, _mediaCommon2.getRandomHex)(8);
+
     newSlice = (0, _slice.mapSlice)(newSlice, function (node) {
-      return node.type.name === 'media' && node.attrs.type === 'external' ? media.createChecked(_objectSpread(_objectSpread({}, node.attrs), {}, {
-        __external: true
-      }), node.content, node.marks) : node;
+      if (node.type.name === 'media') {
+        return media.createChecked(_objectSpread(_objectSpread({}, node.attrs), {}, {
+          __external: node.attrs.type === 'external',
+          __mediaTraceId: node.attrs.type === 'external' ? null : __mediaTraceId
+        }), node.content, node.marks);
+      }
+
+      if (node.type.name === 'mediaInline') {
+        return mediaInline.createChecked(_objectSpread(_objectSpread({}, node.attrs), {}, {
+          __mediaTraceId: __mediaTraceId
+        }), node.content, node.marks);
+      }
+
+      return node;
     });
     return newSlice;
   };

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

@@ -17,9 +17,7 @@ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _templateObject;
 
-var mentionsStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    &.", " [data-mention-id] > span {\n      ", "\n\n      /* need to specify dark text colour because personal mentions\n         (in dark blue) have white text by default */\n      color: ", ";\n    }\n  }\n\n  .danger {\n    .", ".", "\n      > span\n      > span\n      > span {\n      box-shadow: 0 0 0 ", "px ", ";\n      background-color: ", ";\n    }\n    .", " > span > span > span {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n"])), _mention.MentionSharedCssClassName.MENTION_CONTAINER, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow, _editorSharedStyles.SelectionStyle.Background]), (0, _tokens.token)('color.text.subtle', _colors.N500), _mention.MentionSharedCssClassName.MENTION_CONTAINER, _editorSharedStyles.akEditorSelectedNodeClassName, _editorSharedStyles.akEditorSelectedBorderSize, _editorSharedStyles.akEditorDeleteBorder, (0, _tokens.token)('color.background.danger', _editorSharedStyles.akEditorDeleteBackgroundWithOpacity), _mention.MentionSharedCssClassName.MENTION_CONTAINER, (0, _tokens.token)('color.background.neutral', _colors.N30A), (0, _tokens.token)('color.text.subtle', _colors.N500));
+var mentionsStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    &.", " [data-mention-id] > span {\n      ", "\n\n      /* need to specify dark text colour because personal mentions\n         (in dark blue) have white text by default */\n      color: ", ";\n    }\n  }\n\n  .danger {\n    .", ".", "\n      > span\n      > span\n      > span {\n      box-shadow: 0 0 0 ", "px ", ";\n      background-color: ", ";\n    }\n    .", " > span > span > span {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n"])), _mention.MentionSharedCssClassName.MENTION_CONTAINER, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow, _editorSharedStyles.SelectionStyle.Background]), "var(--ds-text-subtle, ".concat(_colors.N500, ")"), _mention.MentionSharedCssClassName.MENTION_CONTAINER, _editorSharedStyles.akEditorSelectedNodeClassName, _editorSharedStyles.akEditorSelectedBorderSize, _editorSharedStyles.akEditorDeleteBorder, "var(--ds-background-danger, ".concat(_editorSharedStyles.akEditorDeleteBackgroundWithOpacity, ")"), _mention.MentionSharedCssClassName.MENTION_CONTAINER, "var(--ds-background-neutral, ".concat(_colors.N30A, ")"), "var(--ds-text-subtle, ".concat(_colors.N500, ")"));
 exports.mentionsStyles = mentionsStyles;

package/dist/cjs/plugins/mentions/ui/InviteItem/index.js

@@ -17,8 +17,6 @@ var _add = _interopRequireDefault(require("@atlaskit/icon/glyph/add"));
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _react2 = _interopRequireWildcard(require("react"));
 
 var _reactIntlNext = require("react-intl-next");
@@ -78,7 +76,7 @@ var InviteItem = function InviteItem(_ref) {
     css: _styles.avatarStyle
   }, (0, _react.jsx)(_add.default, {
     label: intl.formatMessage(_messages.messages.mentionsAddLabel),
-    primaryColor: (0, _tokens.token)('color.icon.subtle', _colors.N300)
+    primaryColor: "var(--ds-icon-subtle, ".concat(_colors.N300, ")")
   })), (0, _react.jsx)("div", {
     css: _styles.nameSectionStyle,
     "data-testid": "name-section"

package/dist/cjs/plugins/mentions/ui/InviteItem/styles.js

@@ -13,8 +13,6 @@ var _react = require("@emotion/react");
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 
 var ROW_SIDE_PADDING = 14;
@@ -25,11 +23,11 @@ var AVATAR_HEIGHT = 36;
 exports.AVATAR_HEIGHT = AVATAR_HEIGHT;
 var avatarStyle = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  flex: initial;\n  opacity: inherit;\n  width: 36px;\n  height: ", "px;\n\n  > span {\n    width: 24px;\n    height: 24px;\n    padding: 6px;\n  }\n"])), AVATAR_HEIGHT);
 exports.avatarStyle = avatarStyle;
-var nameSectionStyle = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  flex: 1;\n  min-width: 0;\n  margin-left: 14px;\n  color: ", ";\n  opacity: inherit;\n"])), (0, _tokens.token)('color.text.subtle', _colors.N300));
+var nameSectionStyle = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  flex: 1;\n  min-width: 0;\n  margin-left: 14px;\n  color: ", ";\n  opacity: inherit;\n"])), "var(--ds-text-subtle, ".concat(_colors.N300, ")"));
 exports.nameSectionStyle = nameSectionStyle;
 var mentionItemStyle = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: transparent;\n  display: block;\n  overflow: hidden;\n  list-style-type: none;\n  cursor: pointer;\n"])));
 exports.mentionItemStyle = mentionItemStyle;
-var mentionItemSelectedStyle = (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n"])), (0, _tokens.token)('color.background.neutral.subtle.hovered', _colors.N30));
+var mentionItemSelectedStyle = (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n"])), "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N30, ")"));
 exports.mentionItemSelectedStyle = mentionItemSelectedStyle;
 var capitalizedStyle = (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  text-transform: capitalize;\n"])));
 exports.capitalizedStyle = capitalizedStyle;