@atlaskit/mention 19.9.5 → 21.0.0

package/dist/es2019/util/i18n.js

@@ -1,22 +1,264 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage, useIntl } from 'react-intl-next';
 import { messages } from '../components/i18n';
-export const noPropFormatter = messageDescriptor => props => /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, props, messageDescriptor));
-export const NoAccessWarning = ({
-  name,
-  ...props
-}) => /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, props, {
-  values: {
-    name
+export const propFormatter = messageDescriptor => ({
+  values,
+  children
+}) => {
+  const {
+    formatMessage
+  } = useIntl();
+  const message = formatMessage(messageDescriptor, values);
+
+  if (typeof children === 'function') {
+    return children(message);
   }
-}, messages.noAccessWarning));
-export const NoAccessLabel = noPropFormatter(messages.noAccessLabel);
-export const DefaultHeadline = noPropFormatter(messages.defaultHeadline);
-export const DefaultAdvisedAction = noPropFormatter(messages.defaultAdvisedAction);
-export const LoginAgain = noPropFormatter(messages.loginAgain);
-export const DifferentText = noPropFormatter(messages.differentText);
-export const TeamMentionHighlightTitle = noPropFormatter(messages.TeamMentionHighlightTitle);
-export const TeamMentionHighlightCloseTooltip = noPropFormatter(messages.TeamMentionHighlightCloseButtonToolTip);
-export const TeamMentionHighlightDescription = noPropFormatter(messages.TeamMentionHighlightDescription);
-export const TeamMentionHighlightDescriptionLink = noPropFormatter(messages.TeamMentionHighlightDescriptionLink);
+
+  return /*#__PURE__*/React.createElement(FormattedMessage, _extends({
+    values: values
+  }, messageDescriptor));
+};
+export const UnknownUserError = propFormatter(messages.unknownUserError);
+export const NoAccessWarning = propFormatter(messages.noAccessWarning);
+export const NoAccessLabel = propFormatter(messages.noAccessLabel);
+export const DefaultHeadline = propFormatter(messages.defaultHeadline);
+export const DefaultAdvisedAction = propFormatter(messages.defaultAdvisedAction);
+export const LoginAgain = propFormatter(messages.loginAgain);
+export const DifferentText = propFormatter(messages.differentText);
+export const TeamMentionHighlightTitle = propFormatter(messages.TeamMentionHighlightTitle);
+export const TeamMentionHighlightCloseTooltip = propFormatter(messages.TeamMentionHighlightCloseButtonToolTip);
+export const TeamMentionHighlightDescription = propFormatter(messages.TeamMentionHighlightDescription);
+export const TeamMentionHighlightDescriptionLink = propFormatter(messages.TeamMentionHighlightDescriptionLink);
+/**
+ * Tries to get the most specific messages bundle for a given locale.
+ *
+ * Strategy:
+ * 1. Try to find messages with the exact string (i.e. 'fr_FR')
+ * 2. If that doesn't work, try to find messages for the country locale (i.e. 'fr')
+ * 3. If that doesn't work, return english messages as a fallback.
+ *
+ * @param locale string specifying the locale like 'en_GB', or 'fr'.
+ */
+
+export const getMessagesForLocale = async locale => {
+  switch (locale) {
+    case 'cs':
+      {
+        return import(
+        /* webpackChunkName: "@atlaskit-internal_mention-i18n-cs" */
+        '../i18n/cs').then(mod => mod.default);
+      }
+
+    case 'da':
+      {
+        return import(
+        /* webpackChunkName: "@atlaskit-internal_mention-i18n-da" */
+        '../i18n/da').then(mod => mod.default);
+      }
+
+    case 'de':
+      {
+        return import(
+        /* webpackChunkName: "@atlaskit-internal_mention-i18n-de" */
+        '../i18n/de').then(mod => mod.default);
+      }
+
+    case 'en':
+      {
+        return import(
+        /* webpackChunkName: "@atlaskit-internal_mention-i18n-en" */
+        '../i18n/en').then(mod => mod.default);
+      }
+
+    case 'en_GB':
+      {
+        return import(
+        /* webpackChunkName: "@atlaskit-internal_mention-i18n-en_GB" */
+        '../i18n/en_GB').then(mod => mod.default);
+      }
+
+    case 'es':
+      {
+        return import(
+        /* webpackChunkName: "@atlaskit-internal_mention-i18n-es" */
+        '../i18n/es').then(mod => mod.default);
+      }
+
+    case 'et':
+      {
+        return import(
+        /* webpackChunkName: "@atlaskit-internal_mention-i18n-et" */
+        '../i18n/et').then(mod => mod.default);
+      }
+
+    case 'fi':
+      {
+        return import(
+        /* webpackChunkName: "@atlaskit-internal_mention-i18n-fi" */
+        '../i18n/fi').then(mod => mod.default);
+      }
+
+    case 'fr':
+      {
+        return import(
+        /* webpackChunkName: "@atlaskit-internal_mention-i18n-fr" */
+        '../i18n/fr').then(mod => mod.default);
+      }
+
+    case 'hu':
+      {
+        return import(
+        /* webpackChunkName: "@atlaskit-internal_mention-i18n-hu" */
+        '../i18n/hu').then(mod => mod.default);
+      }
+
+    case 'is':
+      {
+        return import(
+        /* webpackChunkName: "@atlaskit-internal_mention-i18n-is" */
+        '../i18n/is').then(mod => mod.default);
+      }
+
+    case 'it':
+      {
+        return import(
+        /* webpackChunkName: "@atlaskit-internal_mention-i18n-it" */
+        '../i18n/it').then(mod => mod.default);
+      }
+
+    case 'ja':
+      {
+        return import(
+        /* webpackChunkName: "@atlaskit-internal_mention-i18n-ja" */
+        '../i18n/ja').then(mod => mod.default);
+      }
+
+    case 'ko':
+      {
+        return import(
+        /* webpackChunkName: "@atlaskit-internal_mention-i18n-ko" */
+        '../i18n/ko').then(mod => mod.default);
+      }
+
+    case 'nb':
+      {
+        return import(
+        /* webpackChunkName: "@atlaskit-internal_mention-i18n-nb" */
+        '../i18n/nb').then(mod => mod.default);
+      }
+
+    case 'nl':
+      {
+        return import(
+        /* webpackChunkName: "@atlaskit-internal_mention-i18n-nl" */
+        '../i18n/nl').then(mod => mod.default);
+      }
+
+    case 'pl':
+      {
+        return import(
+        /* webpackChunkName: "@atlaskit-internal_mention-i18n-pl" */
+        '../i18n/pl').then(mod => mod.default);
+      }
+
+    case 'pt_BR':
+    case 'pt-BR':
+      {
+        return import(
+        /* webpackChunkName: "@atlaskit-internal_mention-i18n-pt_BR" */
+        '../i18n/pt_BR').then(mod => mod.default);
+      }
+
+    case 'pt_PT':
+    case 'pt-PT':
+      {
+        return import(
+        /* webpackChunkName: "@atlaskit-internal_mention-i18n-pt_PT" */
+        '../i18n/pt_PT').then(mod => mod.default);
+      }
+
+    case 'ro':
+      {
+        return import(
+        /* webpackChunkName: "@atlaskit-internal_mention-i18n-ro" */
+        '../i18n/ro').then(mod => mod.default);
+      }
+
+    case 'ru':
+      {
+        return import(
+        /* webpackChunkName: "@atlaskit-internal_mention-i18n-ru" */
+        '../i18n/ru').then(mod => mod.default);
+      }
+
+    case 'sk':
+      {
+        return import(
+        /* webpackChunkName: "@atlaskit-internal_mention-i18n-sk" */
+        '../i18n/sk').then(mod => mod.default);
+      }
+
+    case 'sv':
+      {
+        return import(
+        /* webpackChunkName: "@atlaskit-internal_mention-i18n-sv" */
+        '../i18n/sv').then(mod => mod.default);
+      }
+
+    case 'th':
+      {
+        return import(
+        /* webpackChunkName: "@atlaskit-internal_mention-i18n-th" */
+        '../i18n/th').then(mod => mod.default);
+      }
+
+    case 'tr':
+      {
+        return import(
+        /* webpackChunkName: "@atlaskit-internal_mention-i18n-tr" */
+        '../i18n/tr').then(mod => mod.default);
+      }
+
+    case 'uk':
+      {
+        return import(
+        /* webpackChunkName: "@atlaskit-internal_mention-i18n-uk" */
+        '../i18n/uk').then(mod => mod.default);
+      }
+
+    case 'vi':
+      {
+        return import(
+        /* webpackChunkName: "@atlaskit-internal_mention-i18n-vi" */
+        '../i18n/vi').then(mod => mod.default);
+      }
+
+    case 'zh_TW':
+      {
+        return import(
+        /* webpackChunkName: "@atlaskit-internal_mention-i18n-zh_TW" */
+        '../i18n/zh_TW').then(mod => mod.default);
+      }
+
+    case 'zh':
+      {
+        return import(
+        /* webpackChunkName: "@atlaskit-internal_mention-i18n-zh" */
+        '../i18n/zh').then(mod => mod.default);
+      }
+
+    default:
+      {
+        const fragments = locale.split(/[_-]/);
+
+        if (fragments.length === 2) {
+          return getMessagesForLocale(fragments[0]);
+        } else {
+          return import(
+          /* webpackChunkName: "@atlaskit-internal_mention-i18n-en" */
+          '../i18n/en').then(mod => mod.default);
+        }
+      }
+  }
+};

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/mention",
-	"version": "19.9.5",
+	"version": "21.0.0",
 	"sideEffects": false
 }

package/dist/esm/api/MentionResource.js

@@ -7,9 +7,9 @@ import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+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) { _defineProperty(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; }
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
@@ -588,14 +588,14 @@ export var MentionResource = /*#__PURE__*/function (_AbstractMentionResou) {
 
   return MentionResource;
 }(AbstractMentionResource);
-export var HttpError = function HttpError(statusCode, statusMessage) {
+export var HttpError = /*#__PURE__*/_createClass(function HttpError(statusCode, statusMessage) {
   _classCallCheck(this, HttpError);
 
   this.statusCode = statusCode;
   this.message = statusMessage;
   this.name = 'HttpError';
   this.stack = new Error().stack;
-};
+});
 export var isResolvingMentionProvider = function isResolvingMentionProvider(p) {
   return !!(p && p.supportsMentionNameResolving && p.supportsMentionNameResolving());
 };

package/dist/esm/api/TeamMentionResource.js

@@ -10,9 +10,9 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+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) { _defineProperty(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; }
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 

package/dist/esm/api/analytics.js

@@ -16,14 +16,4 @@ export var defaultAttributes = function defaultAttributes(context) {
     pickerType: 'mentions',
     source: 'smarts'
   };
-};
-export var getUsersForAnalytics = function getUsersForAnalytics(users) {
-  return users ? users.map(function (_ref) {
-    var id = _ref.id,
-        entityType = _ref.entityType;
-    return {
-      id: id,
-      type: entityType.toLowerCase()
-    };
-  }) : [];
 };

package/dist/esm/components/LockCircleIcon/index.js

@@ -0,0 +1,11 @@
+import { lazy } from 'react';
+var AsyncLockCircleIcon = /*#__PURE__*/lazy(function () {
+  return import(
+  /* webpackChunkName: "@atlaskit-internal_mention/LockCircleIcon" */
+  '@atlaskit/icon/glyph/lock-circle').then(function (module) {
+    return {
+      default: module.default
+    };
+  });
+});
+export default AsyncLockCircleIcon;

package/dist/esm/components/Mention/PrimitiveMention.js

@@ -0,0 +1,100 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _excluded = ["mentionType"];
+
+var _mentionStyle, _templateObject;
+
+/** @jsx jsx */
+import { jsx, css } from '@emotion/core';
+import { themed, useGlobalTheme } from '@atlaskit/theme/components';
+import { B400, B200, N500, DN800, DN100, DN80, N30A, DN30, N20 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
+import { MentionType } from '../../types';
+import { forwardRef } from 'react';
+var mentionStyle = (_mentionStyle = {}, _defineProperty(_mentionStyle, MentionType.SELF, {
+  background: themed({
+    light: token('color.background.brand.bold', B400),
+    dark: token('color.background.brand.bold', B200)
+  }),
+  borderColor: 'transparent',
+  text: themed({
+    light: token('color.text.inverse', N20),
+    dark: token('color.text.inverse', DN30)
+  }),
+  hoveredBackground: themed({
+    light: token('color.background.brand.bold.hovered', B400),
+    dark: token('color.background.brand.bold.hovered', B200)
+  }),
+  pressedBackground: themed({
+    light: token('color.background.brand.bold.pressed', B400),
+    dark: token('color.background.brand.bold.pressed', B200)
+  })
+}), _defineProperty(_mentionStyle, MentionType.RESTRICTED, {
+  background: 'transparent',
+  borderColor: themed({
+    light: token('color.border', N500),
+    dark: token('color.border', DN80)
+  }),
+  text: themed({
+    light: token('color.text.disabled', N500),
+    dark: token('color.text.disabled', DN100)
+  }),
+  hoveredBackground: 'transparent',
+  pressedBackground: 'transparent'
+}), _defineProperty(_mentionStyle, MentionType.DEFAULT, {
+  background: themed({
+    light: token('color.background.neutral', N30A),
+    dark: token('color.background.neutral', DN80)
+  }),
+  borderColor: 'transparent',
+  text: themed({
+    light: token('color.text.subtle', N500),
+    dark: token('color.text.subtle', DN800)
+  }),
+  hoveredBackground: themed({
+    light: token('color.background.neutral.hovered', N30A),
+    dark: token('color.background.neutral.hovered', DN80)
+  }),
+  pressedBackground: themed({
+    light: token('color.background.neutral.pressed', N30A),
+    dark: token('color.background.neutral.pressed', DN80)
+  })
+}), _mentionStyle);
+
+var getStyle = function getStyle(_ref, property) {
+  var mentionType = _ref.mentionType,
+      theme = _ref.theme;
+  var obj = mentionStyle[mentionType][property];
+  return typeof obj === 'string' ? obj : obj({
+    theme: theme
+  });
+};
+
+var PrimitiveMention = /*#__PURE__*/forwardRef(function (_ref2, ref) {
+  var mentionType = _ref2.mentionType,
+      other = _objectWithoutProperties(_ref2, _excluded);
+
+  var theme = useGlobalTheme();
+  return jsx("span", _extends({
+    ref: ref,
+    css: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n          display: inline;\n          border: 1px solid ", ";\n          background: ", ";\n          color: ", ";\n          border-radius: 20px;\n          cursor: pointer;\n          padding: 0 0.3em 2px 0.23em;\n          line-height: 1.714;\n          font-size: 1em;\n          font-weight: normal;\n          word-break: break-word;\n          &:hover {\n            background: ", ";\n          }\n          &:active {\n            background: ", ";\n          }\n        "])), getStyle({
+      theme: theme,
+      mentionType: mentionType
+    }, 'borderColor'), getStyle({
+      theme: theme,
+      mentionType: mentionType
+    }, 'background'), getStyle({
+      theme: theme,
+      mentionType: mentionType
+    }, 'text'), getStyle({
+      theme: theme,
+      mentionType: mentionType
+    }, 'hoveredBackground'), getStyle({
+      theme: theme,
+      mentionType: mentionType
+    }, 'pressedBackground'))
+  }, other));
+});
+export default PrimitiveMention;

package/dist/esm/components/Mention/index.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
@@ -12,13 +11,14 @@ 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; } }
 
 import React from 'react';
-import { FormattedMessage } from 'react-intl';
-import { MentionStyle } from './styles';
-import { NoAccessTooltip } from '../NoAccessTooltip';
+import FocusRing from '@atlaskit/focus-ring';
+import MessagesIntlProvider from '../MessagesIntlProvider';
+import PrimitiveMention from './PrimitiveMention';
+import AsyncNoAccessTooltip from '../NoAccessTooltip';
 import { isRestricted, MentionType } from '../../types';
 import { fireAnalyticsMentionEvent } from '../../util/analytics';
-import { withAnalyticsEvents } from '@atlaskit/analytics-next';
-import { messages } from '../i18n';
+import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
+import { UnknownUserError } from '../../util/i18n';
 export var ANALYTICS_HOVER_DELAY = 1000;
 export var UNKNOWN_USER_ID = '_|unknown|_';
 export var MentionInternal = /*#__PURE__*/function (_React$PureComponent) {
@@ -112,12 +112,12 @@ export var MentionInternal = /*#__PURE__*/function (_React$PureComponent) {
   }, {
     key: "renderUnknownUserError",
     value: function renderUnknownUserError(id) {
-      return /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.unknownUserError, {
+      return /*#__PURE__*/React.createElement(UnknownUserError, {
         values: {
           userId: id.slice(-5)
         }
-      }), function (message) {
-        return "@".concat(message);
+      }, function (message) {
+        return /*#__PURE__*/React.createElement(React.Fragment, null, "@".concat(message));
       });
     }
   }, {
@@ -132,19 +132,22 @@ export var MentionInternal = /*#__PURE__*/function (_React$PureComponent) {
           accessLevel = props.accessLevel;
       var mentionType = this.getMentionType();
       var failedMention = text === "@".concat(UNKNOWN_USER_ID);
-      var mentionComponent = /*#__PURE__*/React.createElement(MentionStyle, {
+      var mentionComponent = /*#__PURE__*/React.createElement(FocusRing, null, /*#__PURE__*/React.createElement(PrimitiveMention, {
         mentionType: mentionType,
         onClick: handleOnClick,
         onMouseEnter: handleOnMouseEnter,
-        onMouseLeave: handleOnMouseLeave
-      }, failedMention ? this.renderUnknownUserError(id) : text || '@...');
+        onMouseLeave: handleOnMouseLeave,
+        spellCheck: false
+      }, failedMention ? this.renderUnknownUserError(id) : text || '@...'));
       return /*#__PURE__*/React.createElement("span", {
         "data-mention-id": id,
         "data-access-level": accessLevel,
         spellCheck: false
-      }, mentionType === MentionType.RESTRICTED ? /*#__PURE__*/React.createElement(NoAccessTooltip, {
+      }, /*#__PURE__*/React.createElement(MessagesIntlProvider, null, mentionType === MentionType.RESTRICTED ? /*#__PURE__*/React.createElement(React.Suspense, {
+        fallback: mentionComponent
+      }, /*#__PURE__*/React.createElement(AsyncNoAccessTooltip, {
         name: text
-      }, mentionComponent) : mentionComponent);
+      }, mentionComponent)) : mentionComponent));
     }
   }]);
 

package/dist/esm/components/MentionDescriptionByline/TeamMentionDescriptionByline.js

@@ -12,7 +12,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; } }
 
 import React from 'react';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage } from 'react-intl-next';
 import { DescriptionBylineStyle } from './styles';
 import { messages } from '../i18n';
 

package/dist/esm/components/MentionDescriptionByline/styles.js

@@ -2,8 +2,7 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject;
 
-import styled from 'styled-components'; // @ts-ignore: unused variable
-// prettier-ignore
-
+import styled from '@emotion/styled';
 import { N100 } from '@atlaskit/theme/colors';
-export var DescriptionBylineStyle = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: 12px;\n\n  margin-top: 2px;\n\n  display: block;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n"])), N100);
+import { token } from '@atlaskit/tokens';
+export var DescriptionBylineStyle = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: 12px;\n\n  margin-top: 2px;\n\n  display: block;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n"])), token('color.text.subtlest', N100));

package/dist/esm/components/MentionItem/index.js

@@ -12,17 +12,19 @@ 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; } }
 
 import Avatar from '@atlaskit/avatar';
-import LockCircleIcon from '@atlaskit/icon/glyph/lock-circle';
 import Lozenge from '@atlaskit/lozenge';
 import { N30 } from '@atlaskit/theme/colors';
 import React from 'react';
+import { token } from '@atlaskit/tokens';
 import { isRestricted } from '../../types';
 import { NoAccessLabel } from '../../util/i18n';
 import { leftClick } from '../../util/mouse';
-import { NoAccessTooltip } from '../NoAccessTooltip';
+import AsyncNoAccessTooltip from '../NoAccessTooltip';
+import AsyncLockCircleIcon from '../LockCircleIcon';
 import { AccessSectionStyle, AvatarStyle, FullNameStyle, InfoSectionStyle, MentionItemStyle, NameSectionStyle, RowStyle, TimeStyle } from './styles';
 import { renderHighlight } from './MentionHighlightHelpers';
 import MentionDescriptionByline from '../MentionDescriptionByline';
+import MessagesIntlProvider from '../MessagesIntlProvider';
 export { MENTION_ITEM_HEIGHT } from './styles';
 
 function renderLozenge(lozenge) {
@@ -109,8 +111,8 @@ var MentionItem = /*#__PURE__*/function (_React$PureComponent) {
 
       var restricted = isRestricted(accessLevel);
       var nameHighlights = highlight && highlight.name;
-      var borderColor = selected ? N30 : undefined;
-      return /*#__PURE__*/React.createElement(MentionItemStyle, {
+      var borderColor = selected ? token('color.border', N30) : undefined;
+      return /*#__PURE__*/React.createElement(MessagesIntlProvider, null, /*#__PURE__*/React.createElement(MentionItemStyle, {
         selected: selected,
         onMouseDown: this.onMentionSelected,
         onMouseMove: this.onMentionMenuItemMouseMove,
@@ -130,15 +132,17 @@ var MentionItem = /*#__PURE__*/function (_React$PureComponent) {
         mention: mention
       })), /*#__PURE__*/React.createElement(InfoSectionStyle, {
         restricted: restricted
-      }, renderLozenge(lozenge), renderTime(time)), restricted ? /*#__PURE__*/React.createElement(NoAccessTooltip, {
+      }, renderLozenge(lozenge), renderTime(time)), restricted ? /*#__PURE__*/React.createElement(React.Suspense, {
+        fallback: null
+      }, /*#__PURE__*/React.createElement(AsyncNoAccessTooltip, {
         name: name
       }, /*#__PURE__*/React.createElement(AccessSectionStyle, null, /*#__PURE__*/React.createElement(NoAccessLabel, null, function (text) {
-        return /*#__PURE__*/React.createElement(LockCircleIcon, {
+        return /*#__PURE__*/React.createElement(AsyncLockCircleIcon, {
           label: text
         });
       }
       /* safe to cast to string given there is no value binding */
-      ))) : null));
+      )))) : null)));
     }
   }]);
 

package/dist/esm/components/MentionItem/styles.js

@@ -2,10 +2,9 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 
-import styled from 'styled-components'; // @ts-ignore: unused variable
-// prettier-ignore
-
+import styled from '@emotion/styled';
 import { N900, N100, N30, N500 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 export var RowStyle = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  align-items: center;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  overflow: hidden;\n  padding: 6px 14px;\n  text-overflow: ellipsis;\n  vertical-align: middle;\n"])));
 export var AvatarStyle = styled.span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: relative;\n  flex: initial;\n  opacity: ", ";\n"])), function (props) {
   return props.restricted ? '0.5' : 'inherit';
@@ -13,13 +12,13 @@ export var AvatarStyle = styled.span(_templateObject2 || (_templateObject2 = _ta
 export var NameSectionStyle = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  flex: 1;\n  min-width: 0;\n  margin-left: 14px;\n  opacity: ", ";\n"])), function (props) {
   return props.restricted ? '0.5' : 'inherit';
 });
-export var FullNameStyle = styled.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: block;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: ", ";\n"])), N900);
+export var FullNameStyle = styled.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: block;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: ", ";\n"])), token('color.text', N900));
 export var InfoSectionStyle = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  text-align: right;\n  opacity: ", ";\n\n  & {\n    /* Lozenge */\n    & > span {\n      margin-bottom: 2px;\n    }\n  }\n"])), function (props) {
   return props.restricted ? '0.5' : 'inherit';
 });
-export var TimeStyle = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  margin-left: 20px;\n  flex: none;\n  color: ", ";\n  font-size: 12px;\n"])), N100);
+export var TimeStyle = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  margin-left: 20px;\n  flex: none;\n  color: ", ";\n  font-size: 12px;\n"])), token('color.text.subtlest', N100));
 export var MENTION_ITEM_HEIGHT = 48;
 export var MentionItemStyle = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  display: block;\n  overflow: hidden;\n  list-style-type: none;\n  height: ", "px;\n  line-height: 1.2;\n  cursor: pointer;\n"])), function (props) {
-  return props.selected ? N30 : 'transparent';
+  return props.selected ? token('color.background.brand', N30) : 'transparent';
 }, MENTION_ITEM_HEIGHT);
-export var AccessSectionStyle = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  padding-left: 5px;\n  color: ", ";\n"])), N500);
+export var AccessSectionStyle = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  padding-left: 5px;\n  color: ", ";\n"])), token('color.text.subtle', N500));