@atlaskit/mention 19.9.6 → 20.0.0

package/dist/cjs/util/i18n.js

@@ -2,55 +2,326 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.noPropFormatter = exports.TeamMentionHighlightTitle = exports.TeamMentionHighlightDescriptionLink = exports.TeamMentionHighlightDescription = exports.TeamMentionHighlightCloseTooltip = exports.NoAccessWarning = exports.NoAccessLabel = exports.LoginAgain = exports.DifferentText = exports.DefaultHeadline = exports.DefaultAdvisedAction = void 0;
+exports.propFormatter = exports.getMessagesForLocale = exports.UnknownUserError = exports.TeamMentionHighlightTitle = exports.TeamMentionHighlightDescriptionLink = exports.TeamMentionHighlightDescription = exports.TeamMentionHighlightCloseTooltip = exports.NoAccessWarning = exports.NoAccessLabel = exports.LoginAgain = exports.DifferentText = exports.DefaultHeadline = exports.DefaultAdvisedAction = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
 var _react = _interopRequireDefault(require("react"));
 
-var _reactIntl = require("react-intl");
+var _reactIntlNext = require("react-intl-next");
 
 var _i18n = require("../components/i18n");
 
-var noPropFormatter = function noPropFormatter(messageDescriptor) {
-  return function (props) {
-    return /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, (0, _extends2.default)({}, props, messageDescriptor));
-  };
-};
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var propFormatter = function propFormatter(messageDescriptor) {
+  return function (_ref) {
+    var values = _ref.values,
+        children = _ref.children;
 
-exports.noPropFormatter = noPropFormatter;
+    var _useIntl = (0, _reactIntlNext.useIntl)(),
+        formatMessage = _useIntl.formatMessage;
 
-var NoAccessWarning = function NoAccessWarning(_ref) {
-  var name = _ref.name,
-      props = (0, _objectWithoutProperties2.default)(_ref, ["name"]);
-  return /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, (0, _extends2.default)({}, props, {
-    values: {
-      name: name
+    var message = formatMessage(messageDescriptor, values);
+
+    if (typeof children === 'function') {
+      return children(message);
     }
-  }, _i18n.messages.noAccessWarning));
+
+    return /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({
+      values: values
+    }, messageDescriptor));
+  };
 };
 
+exports.propFormatter = propFormatter;
+var UnknownUserError = propFormatter(_i18n.messages.unknownUserError);
+exports.UnknownUserError = UnknownUserError;
+var NoAccessWarning = propFormatter(_i18n.messages.noAccessWarning);
 exports.NoAccessWarning = NoAccessWarning;
-var NoAccessLabel = noPropFormatter(_i18n.messages.noAccessLabel);
+var NoAccessLabel = propFormatter(_i18n.messages.noAccessLabel);
 exports.NoAccessLabel = NoAccessLabel;
-var DefaultHeadline = noPropFormatter(_i18n.messages.defaultHeadline);
+var DefaultHeadline = propFormatter(_i18n.messages.defaultHeadline);
 exports.DefaultHeadline = DefaultHeadline;
-var DefaultAdvisedAction = noPropFormatter(_i18n.messages.defaultAdvisedAction);
+var DefaultAdvisedAction = propFormatter(_i18n.messages.defaultAdvisedAction);
 exports.DefaultAdvisedAction = DefaultAdvisedAction;
-var LoginAgain = noPropFormatter(_i18n.messages.loginAgain);
+var LoginAgain = propFormatter(_i18n.messages.loginAgain);
 exports.LoginAgain = LoginAgain;
-var DifferentText = noPropFormatter(_i18n.messages.differentText);
+var DifferentText = propFormatter(_i18n.messages.differentText);
 exports.DifferentText = DifferentText;
-var TeamMentionHighlightTitle = noPropFormatter(_i18n.messages.TeamMentionHighlightTitle);
+var TeamMentionHighlightTitle = propFormatter(_i18n.messages.TeamMentionHighlightTitle);
 exports.TeamMentionHighlightTitle = TeamMentionHighlightTitle;
-var TeamMentionHighlightCloseTooltip = noPropFormatter(_i18n.messages.TeamMentionHighlightCloseButtonToolTip);
+var TeamMentionHighlightCloseTooltip = propFormatter(_i18n.messages.TeamMentionHighlightCloseButtonToolTip);
 exports.TeamMentionHighlightCloseTooltip = TeamMentionHighlightCloseTooltip;
-var TeamMentionHighlightDescription = noPropFormatter(_i18n.messages.TeamMentionHighlightDescription);
+var TeamMentionHighlightDescription = propFormatter(_i18n.messages.TeamMentionHighlightDescription);
 exports.TeamMentionHighlightDescription = TeamMentionHighlightDescription;
-var TeamMentionHighlightDescriptionLink = noPropFormatter(_i18n.messages.TeamMentionHighlightDescriptionLink);
-exports.TeamMentionHighlightDescriptionLink = TeamMentionHighlightDescriptionLink;
+var TeamMentionHighlightDescriptionLink = propFormatter(_i18n.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'.
+ */
+
+exports.TeamMentionHighlightDescriptionLink = TeamMentionHighlightDescriptionLink;
+
+var getMessagesForLocale = /*#__PURE__*/function () {
+  var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(locale) {
+    var fragments;
+    return _regenerator.default.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _context.t0 = locale;
+            _context.next = _context.t0 === 'cs' ? 3 : _context.t0 === 'da' ? 4 : _context.t0 === 'de' ? 5 : _context.t0 === 'en' ? 6 : _context.t0 === 'en_GB' ? 7 : _context.t0 === 'es' ? 8 : _context.t0 === 'et' ? 9 : _context.t0 === 'fi' ? 10 : _context.t0 === 'fr' ? 11 : _context.t0 === 'hu' ? 12 : _context.t0 === 'is' ? 13 : _context.t0 === 'it' ? 14 : _context.t0 === 'ja' ? 15 : _context.t0 === 'ko' ? 16 : _context.t0 === 'nb' ? 17 : _context.t0 === 'nl' ? 18 : _context.t0 === 'pl' ? 19 : _context.t0 === 'pt_BR' ? 20 : _context.t0 === 'pt-BR' ? 20 : _context.t0 === 'pt_PT' ? 21 : _context.t0 === 'pt-PT' ? 21 : _context.t0 === 'ro' ? 22 : _context.t0 === 'ru' ? 23 : _context.t0 === 'sk' ? 24 : _context.t0 === 'sv' ? 25 : _context.t0 === 'th' ? 26 : _context.t0 === 'tr' ? 27 : _context.t0 === 'uk' ? 28 : _context.t0 === 'vi' ? 29 : _context.t0 === 'zh_TW' ? 30 : _context.t0 === 'zh' ? 31 : 32;
+            break;
+
+          case 3:
+            return _context.abrupt("return", Promise.resolve().then(function () {
+              return _interopRequireWildcard(require('../i18n/cs'));
+            }).then(function (mod) {
+              return mod.default;
+            }));
+
+          case 4:
+            return _context.abrupt("return", Promise.resolve().then(function () {
+              return _interopRequireWildcard(require('../i18n/da'));
+            }).then(function (mod) {
+              return mod.default;
+            }));
+
+          case 5:
+            return _context.abrupt("return", Promise.resolve().then(function () {
+              return _interopRequireWildcard(require('../i18n/de'));
+            }).then(function (mod) {
+              return mod.default;
+            }));
+
+          case 6:
+            return _context.abrupt("return", Promise.resolve().then(function () {
+              return _interopRequireWildcard(require('../i18n/en'));
+            }).then(function (mod) {
+              return mod.default;
+            }));
+
+          case 7:
+            return _context.abrupt("return", Promise.resolve().then(function () {
+              return _interopRequireWildcard(require('../i18n/en_GB'));
+            }).then(function (mod) {
+              return mod.default;
+            }));
+
+          case 8:
+            return _context.abrupt("return", Promise.resolve().then(function () {
+              return _interopRequireWildcard(require('../i18n/es'));
+            }).then(function (mod) {
+              return mod.default;
+            }));
+
+          case 9:
+            return _context.abrupt("return", Promise.resolve().then(function () {
+              return _interopRequireWildcard(require('../i18n/et'));
+            }).then(function (mod) {
+              return mod.default;
+            }));
+
+          case 10:
+            return _context.abrupt("return", Promise.resolve().then(function () {
+              return _interopRequireWildcard(require('../i18n/fi'));
+            }).then(function (mod) {
+              return mod.default;
+            }));
+
+          case 11:
+            return _context.abrupt("return", Promise.resolve().then(function () {
+              return _interopRequireWildcard(require('../i18n/fr'));
+            }).then(function (mod) {
+              return mod.default;
+            }));
+
+          case 12:
+            return _context.abrupt("return", Promise.resolve().then(function () {
+              return _interopRequireWildcard(require('../i18n/hu'));
+            }).then(function (mod) {
+              return mod.default;
+            }));
+
+          case 13:
+            return _context.abrupt("return", Promise.resolve().then(function () {
+              return _interopRequireWildcard(require('../i18n/is'));
+            }).then(function (mod) {
+              return mod.default;
+            }));
+
+          case 14:
+            return _context.abrupt("return", Promise.resolve().then(function () {
+              return _interopRequireWildcard(require('../i18n/it'));
+            }).then(function (mod) {
+              return mod.default;
+            }));
+
+          case 15:
+            return _context.abrupt("return", Promise.resolve().then(function () {
+              return _interopRequireWildcard(require('../i18n/ja'));
+            }).then(function (mod) {
+              return mod.default;
+            }));
+
+          case 16:
+            return _context.abrupt("return", Promise.resolve().then(function () {
+              return _interopRequireWildcard(require('../i18n/ko'));
+            }).then(function (mod) {
+              return mod.default;
+            }));
+
+          case 17:
+            return _context.abrupt("return", Promise.resolve().then(function () {
+              return _interopRequireWildcard(require('../i18n/nb'));
+            }).then(function (mod) {
+              return mod.default;
+            }));
+
+          case 18:
+            return _context.abrupt("return", Promise.resolve().then(function () {
+              return _interopRequireWildcard(require('../i18n/nl'));
+            }).then(function (mod) {
+              return mod.default;
+            }));
+
+          case 19:
+            return _context.abrupt("return", Promise.resolve().then(function () {
+              return _interopRequireWildcard(require('../i18n/pl'));
+            }).then(function (mod) {
+              return mod.default;
+            }));
+
+          case 20:
+            return _context.abrupt("return", Promise.resolve().then(function () {
+              return _interopRequireWildcard(require('../i18n/pt_BR'));
+            }).then(function (mod) {
+              return mod.default;
+            }));
+
+          case 21:
+            return _context.abrupt("return", Promise.resolve().then(function () {
+              return _interopRequireWildcard(require('../i18n/pt_PT'));
+            }).then(function (mod) {
+              return mod.default;
+            }));
+
+          case 22:
+            return _context.abrupt("return", Promise.resolve().then(function () {
+              return _interopRequireWildcard(require('../i18n/ro'));
+            }).then(function (mod) {
+              return mod.default;
+            }));
+
+          case 23:
+            return _context.abrupt("return", Promise.resolve().then(function () {
+              return _interopRequireWildcard(require('../i18n/ru'));
+            }).then(function (mod) {
+              return mod.default;
+            }));
+
+          case 24:
+            return _context.abrupt("return", Promise.resolve().then(function () {
+              return _interopRequireWildcard(require('../i18n/sk'));
+            }).then(function (mod) {
+              return mod.default;
+            }));
+
+          case 25:
+            return _context.abrupt("return", Promise.resolve().then(function () {
+              return _interopRequireWildcard(require('../i18n/sv'));
+            }).then(function (mod) {
+              return mod.default;
+            }));
+
+          case 26:
+            return _context.abrupt("return", Promise.resolve().then(function () {
+              return _interopRequireWildcard(require('../i18n/th'));
+            }).then(function (mod) {
+              return mod.default;
+            }));
+
+          case 27:
+            return _context.abrupt("return", Promise.resolve().then(function () {
+              return _interopRequireWildcard(require('../i18n/tr'));
+            }).then(function (mod) {
+              return mod.default;
+            }));
+
+          case 28:
+            return _context.abrupt("return", Promise.resolve().then(function () {
+              return _interopRequireWildcard(require('../i18n/uk'));
+            }).then(function (mod) {
+              return mod.default;
+            }));
+
+          case 29:
+            return _context.abrupt("return", Promise.resolve().then(function () {
+              return _interopRequireWildcard(require('../i18n/vi'));
+            }).then(function (mod) {
+              return mod.default;
+            }));
+
+          case 30:
+            return _context.abrupt("return", Promise.resolve().then(function () {
+              return _interopRequireWildcard(require('../i18n/zh_TW'));
+            }).then(function (mod) {
+              return mod.default;
+            }));
+
+          case 31:
+            return _context.abrupt("return", Promise.resolve().then(function () {
+              return _interopRequireWildcard(require('../i18n/zh'));
+            }).then(function (mod) {
+              return mod.default;
+            }));
+
+          case 32:
+            fragments = locale.split(/[_-]/);
+
+            if (!(fragments.length === 2)) {
+              _context.next = 37;
+              break;
+            }
+
+            return _context.abrupt("return", getMessagesForLocale(fragments[0]));
+
+          case 37:
+            return _context.abrupt("return", Promise.resolve().then(function () {
+              return _interopRequireWildcard(require('../i18n/en'));
+            }).then(function (mod) {
+              return mod.default;
+            }));
+
+          case 38:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  }));
+
+  return function getMessagesForLocale(_x) {
+    return _ref2.apply(this, arguments);
+  };
+}();
+
+exports.getMessagesForLocale = getMessagesForLocale;

package/dist/cjs/version.json

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

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

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

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

@@ -0,0 +1,117 @@
+import _extends from "@babel/runtime/helpers/extends";
+
+/** @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';
+const 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)
+    })
+  },
+  [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'
+  },
+  [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)
+    })
+  }
+};
+
+const getStyle = ({
+  mentionType,
+  theme
+}, property) => {
+  const obj = mentionStyle[mentionType][property];
+  return typeof obj === 'string' ? obj : obj({
+    theme
+  });
+};
+
+const PrimitiveMention = /*#__PURE__*/forwardRef(({
+  mentionType,
+  ...other
+}, ref) => {
+  const theme = useGlobalTheme();
+  return jsx("span", _extends({
+    ref: ref,
+    css: css`
+          display: inline;
+          border: 1px solid ${getStyle({
+      theme,
+      mentionType
+    }, 'borderColor')};
+          background: ${getStyle({
+      theme,
+      mentionType
+    }, 'background')};
+          color: ${getStyle({
+      theme,
+      mentionType
+    }, 'text')};
+          border-radius: 20px;
+          cursor: pointer;
+          padding: 0 0.3em 2px 0.23em;
+          line-height: 1.714;
+          font-size: 1em;
+          font-weight: normal;
+          word-break: break-word;
+          &:hover {
+            background: ${getStyle({
+      theme,
+      mentionType
+    }, 'hoveredBackground')};
+          }
+          &:active {
+            background: ${getStyle({
+      theme,
+      mentionType
+    }, 'pressedBackground')};
+          }
+        `
+  }, other));
+});
+export default PrimitiveMention;

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

@@ -1,13 +1,13 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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 const ANALYTICS_HOVER_DELAY = 1000;
 export const UNKNOWN_USER_ID = '_|unknown|_';
 export class MentionInternal extends React.PureComponent {
@@ -88,11 +88,11 @@ export class MentionInternal extends React.PureComponent {
   }
 
   renderUnknownUserError(id) {
-    return /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.unknownUserError, {
+    return /*#__PURE__*/React.createElement(UnknownUserError, {
       values: {
         userId: id.slice(-5)
       }
-    }), message => `@${message}`);
+    }, message => /*#__PURE__*/React.createElement(React.Fragment, null, `@${message}`));
   }
 
   render() {
@@ -109,19 +109,22 @@ export class MentionInternal extends React.PureComponent {
     } = props;
     const mentionType = this.getMentionType();
     const failedMention = text === `@${UNKNOWN_USER_ID}`;
-    const mentionComponent = /*#__PURE__*/React.createElement(MentionStyle, {
+    const 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/es2019/components/MentionDescriptionByline/TeamMentionDescriptionByline.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage } from 'react-intl-next';
 import { DescriptionBylineStyle } from './styles';
 import { messages } from '../i18n';
 export default class TeamMentionDescriptionByline extends React.PureComponent {

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

@@ -1,9 +1,8 @@
-import styled from 'styled-components'; // @ts-ignore: unused variable
-// prettier-ignore
-
+import styled from '@emotion/styled';
 import { N100 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 export const DescriptionBylineStyle = styled.span`
-  color: ${N100};
+  color: ${token('color.text.subtlest', N100)};
   font-size: 12px;
 
   margin-top: 2px;

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

@@ -1,16 +1,18 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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) {
@@ -84,8 +86,8 @@ export default class MentionItem extends React.PureComponent {
     } = presence || {};
     const restricted = isRestricted(accessLevel);
     const nameHighlights = highlight && highlight.name;
-    const borderColor = selected ? N30 : undefined;
-    return /*#__PURE__*/React.createElement(MentionItemStyle, {
+    const 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,
@@ -105,13 +107,15 @@ export default class MentionItem extends 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, text => /*#__PURE__*/React.createElement(LockCircleIcon, {
+    }, /*#__PURE__*/React.createElement(AccessSectionStyle, null, /*#__PURE__*/React.createElement(NoAccessLabel, null, text => /*#__PURE__*/React.createElement(AsyncLockCircleIcon, {
       label: text
     })
     /* safe to cast to string given there is no value binding */
-    ))) : null));
+    )))) : null)));
   }
 
 }

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

@@ -1,7 +1,6 @@
-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 const RowStyle = styled.div`
   align-items: center;
   display: flex;
@@ -28,7 +27,7 @@ export const FullNameStyle = styled.span`
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  color: ${N900};
+  color: ${token('color.text', N900)};
 `;
 export const InfoSectionStyle = styled.div`
   display: flex;
@@ -46,12 +45,12 @@ export const InfoSectionStyle = styled.div`
 export const TimeStyle = styled.div`
   margin-left: 20px;
   flex: none;
-  color: ${N100};
+  color: ${token('color.text.subtlest', N100)};
   font-size: 12px;
 `;
 export const MENTION_ITEM_HEIGHT = 48;
 export const MentionItemStyle = styled.div`
-  background-color: ${props => props.selected ? N30 : 'transparent'};
+  background-color: ${props => props.selected ? token('color.background.brand', N30) : 'transparent'};
   display: block;
   overflow: hidden;
   list-style-type: none;
@@ -61,5 +60,5 @@ export const MentionItemStyle = styled.div`
 `;
 export const AccessSectionStyle = styled.div`
   padding-left: 5px;
-  color: ${N500};
+  color: ${token('color.text.subtle', N500)};
 `;