@atlaskit/mention 21.0.14 → 21.0.16

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/mention
 
+## 21.0.16
+
+### Patch Changes
+
+- [`6455cf006b3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6455cf006b3) - Builds for this package now pass through a tokens babel plugin, removing runtime invocations of the tokens() function and improving performance.
+
+## 21.0.15
+
+### Patch Changes
+
+- [`9ace7f714e3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9ace7f714e3) - Handle new Teams ARI format in mentions
+
 ## 21.0.14
 
 ### Patch Changes

package/dist/cjs/api/TeamMentionResource.js

@@ -356,7 +356,8 @@ var TeamMentionResource = /*#__PURE__*/function (_MentionResource) {
     value: function trimTeamARI() {
       var teamId = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
       var TEAM_ARI_PREFIX = 'ari:cloud:teams::team/';
-      return teamId.replace(TEAM_ARI_PREFIX, '');
+      var IDENTITY_TEAM_ARI_PREFIX = 'ari:cloud:identity::team/';
+      return teamId.replace(TEAM_ARI_PREFIX, '').replace(IDENTITY_TEAM_ARI_PREFIX, '');
     }
   }]);
   return TeamMentionResource;

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

@@ -21,8 +21,6 @@ var _components = require("@atlaskit/theme/components");
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _types = require("../../types");
 
 var _react2 = require("react");
@@ -33,51 +31,51 @@ var _mentionStyle, _templateObject;
 
 var mentionStyle = (_mentionStyle = {}, (0, _defineProperty2.default)(_mentionStyle, _types.MentionType.SELF, {
   background: (0, _components.themed)({
-    light: (0, _tokens.token)('color.background.brand.bold', _colors.B400),
-    dark: (0, _tokens.token)('color.background.brand.bold', _colors.B200)
+    light: "var(--ds-background-brand-bold, ".concat(_colors.B400, ")"),
+    dark: "var(--ds-background-brand-bold, ".concat(_colors.B200, ")")
   }),
   borderColor: 'transparent',
   text: (0, _components.themed)({
-    light: (0, _tokens.token)('color.text.inverse', _colors.N20),
-    dark: (0, _tokens.token)('color.text.inverse', _colors.DN30)
+    light: "var(--ds-text-inverse, ".concat(_colors.N20, ")"),
+    dark: "var(--ds-text-inverse, ".concat(_colors.DN30, ")")
   }),
   hoveredBackground: (0, _components.themed)({
-    light: (0, _tokens.token)('color.background.brand.bold.hovered', _colors.B400),
-    dark: (0, _tokens.token)('color.background.brand.bold.hovered', _colors.B200)
+    light: "var(--ds-background-brand-bold-hovered, ".concat(_colors.B400, ")"),
+    dark: "var(--ds-background-brand-bold-hovered, ".concat(_colors.B200, ")")
   }),
   pressedBackground: (0, _components.themed)({
-    light: (0, _tokens.token)('color.background.brand.bold.pressed', _colors.B400),
-    dark: (0, _tokens.token)('color.background.brand.bold.pressed', _colors.B200)
+    light: "var(--ds-background-brand-bold-pressed, ".concat(_colors.B400, ")"),
+    dark: "var(--ds-background-brand-bold-pressed, ".concat(_colors.B200, ")")
   })
 }), (0, _defineProperty2.default)(_mentionStyle, _types.MentionType.RESTRICTED, {
   background: 'transparent',
   borderColor: (0, _components.themed)({
-    light: (0, _tokens.token)('color.border.bold', _colors.N500),
-    dark: (0, _tokens.token)('color.border.bold', _colors.DN80)
+    light: "var(--ds-border-bold, ".concat(_colors.N500, ")"),
+    dark: "var(--ds-border-bold, ".concat(_colors.DN80, ")")
   }),
   text: (0, _components.themed)({
-    light: (0, _tokens.token)('color.text', _colors.N500),
-    dark: (0, _tokens.token)('color.text', _colors.DN100)
+    light: "var(--ds-text, ".concat(_colors.N500, ")"),
+    dark: "var(--ds-text, ".concat(_colors.DN100, ")")
   }),
   hoveredBackground: 'transparent',
   pressedBackground: 'transparent'
 }), (0, _defineProperty2.default)(_mentionStyle, _types.MentionType.DEFAULT, {
   background: (0, _components.themed)({
-    light: (0, _tokens.token)('color.background.neutral', _colors.N30A),
-    dark: (0, _tokens.token)('color.background.neutral', _colors.DN80)
+    light: "var(--ds-background-neutral, ".concat(_colors.N30A, ")"),
+    dark: "var(--ds-background-neutral, ".concat(_colors.DN80, ")")
   }),
   borderColor: 'transparent',
   text: (0, _components.themed)({
-    light: (0, _tokens.token)('color.text.subtle', _colors.N500),
-    dark: (0, _tokens.token)('color.text.subtle', _colors.DN800)
+    light: "var(--ds-text-subtle, ".concat(_colors.N500, ")"),
+    dark: "var(--ds-text-subtle, ".concat(_colors.DN800, ")")
   }),
   hoveredBackground: (0, _components.themed)({
-    light: (0, _tokens.token)('color.background.neutral.hovered', _colors.N30A),
-    dark: (0, _tokens.token)('color.background.neutral.hovered', _colors.DN80)
+    light: "var(--ds-background-neutral-hovered, ".concat(_colors.N30A, ")"),
+    dark: "var(--ds-background-neutral-hovered, ".concat(_colors.DN80, ")")
   }),
   pressedBackground: (0, _components.themed)({
-    light: (0, _tokens.token)('color.background.neutral.pressed', _colors.N30A),
-    dark: (0, _tokens.token)('color.background.neutral.pressed', _colors.DN80)
+    light: "var(--ds-background-neutral-pressed, ".concat(_colors.N30A, ")"),
+    dark: "var(--ds-background-neutral-pressed, ".concat(_colors.DN80, ")")
   })
 }), _mentionStyle);
 

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

@@ -13,10 +13,8 @@ var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _templateObject;
 
-var DescriptionBylineStyle = _styled.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])), (0, _tokens.token)('color.text.subtlest', _colors.N100));
+var DescriptionBylineStyle = _styled.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])), "var(--ds-text-subtlest, ".concat(_colors.N100, ")"));
 
 exports.DescriptionBylineStyle = DescriptionBylineStyle;

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

@@ -37,8 +37,6 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _react = _interopRequireDefault(require("react"));
 
-var _tokens = require("@atlaskit/tokens");
-
 var _types = require("../../types");
 
 var _i18n = require("../../util/i18n");
@@ -141,7 +139,7 @@ var MentionItem = /*#__PURE__*/function (_React$PureComponent) {
 
       var restricted = (0, _types.isRestricted)(accessLevel);
       var nameHighlights = highlight && highlight.name;
-      var borderColor = selected ? (0, _tokens.token)('color.border', _colors.N30) : undefined;
+      var borderColor = selected ? "var(--ds-border, ".concat(_colors.N30, ")") : undefined;
       return /*#__PURE__*/_react.default.createElement(_MessagesIntlProvider.default, null, /*#__PURE__*/_react.default.createElement(_styles.MentionItemStyle, {
         selected: selected,
         onMouseDown: this.onMentionSelected,

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

@@ -13,8 +13,6 @@ var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 
 var RowStyle = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])));
@@ -33,7 +31,7 @@ var NameSectionStyle = _styled.default.div(_templateObject3 || (_templateObject3
 
 exports.NameSectionStyle = NameSectionStyle;
 
-var FullNameStyle = _styled.default.span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: block;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: ", ";\n"])), (0, _tokens.token)('color.text', _colors.N900));
+var FullNameStyle = _styled.default.span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: block;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: ", ";\n"])), "var(--ds-text, ".concat(_colors.N900, ")"));
 
 exports.FullNameStyle = FullNameStyle;
 
@@ -43,18 +41,18 @@ var InfoSectionStyle = _styled.default.div(_templateObject5 || (_templateObject5
 
 exports.InfoSectionStyle = InfoSectionStyle;
 
-var TimeStyle = _styled.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: 20px;\n  flex: none;\n  color: ", ";\n  font-size: 12px;\n"])), (0, _tokens.token)('color.text.subtlest', _colors.N100));
+var TimeStyle = _styled.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: 20px;\n  flex: none;\n  color: ", ";\n  font-size: 12px;\n"])), "var(--ds-text-subtlest, ".concat(_colors.N100, ")"));
 
 exports.TimeStyle = TimeStyle;
 var MENTION_ITEM_HEIGHT = 48;
 exports.MENTION_ITEM_HEIGHT = MENTION_ITEM_HEIGHT;
 
 var MentionItemStyle = _styled.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\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 ? (0, _tokens.token)('color.background.selected', _colors.N30) : 'transparent';
+  return props.selected ? "var(--ds-background-selected, ".concat(_colors.N30, ")") : 'transparent';
 }, MENTION_ITEM_HEIGHT);
 
 exports.MentionItemStyle = MentionItemStyle;
 
-var AccessSectionStyle = _styled.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  padding-left: 5px;\n  color: ", ";\n"])), (0, _tokens.token)('color.text.subtle', _colors.N500));
+var AccessSectionStyle = _styled.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  padding-left: 5px;\n  color: ", ";\n"])), "var(--ds-text-subtle, ".concat(_colors.N500, ")"));
 
 exports.AccessSectionStyle = AccessSectionStyle;

package/dist/cjs/components/MentionList/styles.js

@@ -11,14 +11,12 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 
-var _tokens = require("@atlaskit/tokens");
-
 var _sharedStyles = require("../../shared-styles");
 
 var _templateObject;
 
 var MentionListStyle = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: ", ";\n\n  /* list style */\n  width: ", ";\n  color: ", ";\n\n  border: 1px solid ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n"])), function (props) {
   return props.empty ? 'none' : 'block';
-}, _sharedStyles.mentionListWidth, (0, _tokens.token)('color.text.subtle', '#333'), _sharedStyles.noDialogContainerBorderColor, _sharedStyles.noDialogContainerBorderRadius, _sharedStyles.noDialogContainerBoxShadow);
+}, _sharedStyles.mentionListWidth, "var(--ds-text-subtle, #333)", _sharedStyles.noDialogContainerBorderColor, _sharedStyles.noDialogContainerBorderRadius, _sharedStyles.noDialogContainerBoxShadow);
 
 exports.MentionListStyle = MentionListStyle;

package/dist/cjs/components/MentionListError/styles.js

@@ -11,8 +11,6 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 
-var _tokens = require("@atlaskit/tokens");
-
 var _constants = require("@atlaskit/theme/constants");
 
 var _colors = require("@atlaskit/theme/colors");
@@ -21,7 +19,7 @@ var _typography = require("@atlaskit/theme/typography");
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
-var MentionListErrorStyle = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  align-items: center;\n  display: flex;\n  justify-content: center;\n  flex-direction: column;\n  background-color: ", ";\n  color: ", ";\n  border: 1px solid ", ";\n  border-radius: ", "px;\n"])), (0, _tokens.token)('elevation.surface.overlay', 'white'), (0, _tokens.token)('color.text.subtle', _colors.N500), (0, _tokens.token)('elevation.surface.overlay', '#fff'), (0, _constants.borderRadius)());
+var MentionListErrorStyle = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  align-items: center;\n  display: flex;\n  justify-content: center;\n  flex-direction: column;\n  background-color: ", ";\n  color: ", ";\n  border: 1px solid ", ";\n  border-radius: ", "px;\n"])), "var(--ds-surface-overlay, white)", "var(--ds-text-subtle, ".concat(_colors.N500, ")"), "var(--ds-surface-overlay, #fff)", (0, _constants.borderRadius)());
 
 exports.MentionListErrorStyle = MentionListErrorStyle;
 

package/dist/cjs/components/MentionPicker/styles.js

@@ -11,8 +11,6 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 
-var _tokens = require("@atlaskit/tokens");
-
 var _colors = require("@atlaskit/theme/colors");
 
 var _sharedStyles = require("../../shared-styles");
@@ -25,6 +23,6 @@ var MentionPickerStyle = _styled.default.div(_templateObject || (_templateObject
 
 exports.MentionPickerStyle = MentionPickerStyle;
 
-var MentionPickerInfoStyle = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  color: ", ";\n  border: 1px solid ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  display: block;\n  width: ", ";\n  white-space: nowrap;\n\n  & {\n    p {\n      margin: 0;\n      overflow: hidden;\n      padding: 9px;\n      text-overflow: ellipsis;\n    }\n  }\n"])), (0, _tokens.token)('elevation.surface', '#fff'), (0, _tokens.token)('color.text.subtlest', _colors.N100), _sharedStyles.noDialogContainerBorderColor, _sharedStyles.noDialogContainerBorderRadius, _sharedStyles.noDialogContainerBoxShadow, _sharedStyles.mentionListWidth);
+var MentionPickerInfoStyle = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  color: ", ";\n  border: 1px solid ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  display: block;\n  width: ", ";\n  white-space: nowrap;\n\n  & {\n    p {\n      margin: 0;\n      overflow: hidden;\n      padding: 9px;\n      text-overflow: ellipsis;\n    }\n  }\n"])), "var(--ds-surface, #fff)", "var(--ds-text-subtlest, ".concat(_colors.N100, ")"), _sharedStyles.noDialogContainerBorderColor, _sharedStyles.noDialogContainerBorderRadius, _sharedStyles.noDialogContainerBoxShadow, _sharedStyles.mentionListWidth);
 
 exports.MentionPickerInfoStyle = MentionPickerInfoStyle;

package/dist/cjs/components/Scrollable/styles.js

@@ -11,14 +11,12 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 
-var _tokens = require("@atlaskit/tokens");
-
 var _constants = require("@atlaskit/theme/constants");
 
 var _sharedStyles = require("../../shared-styles");
 
 var _templateObject;
 
-var ScrollableStyle = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: block;\n  overflow-x: hidden;\n  overflow-y: auto;\n\n  padding: 4px 0;\n  margin: 0;\n\n  background: ", ";\n  max-height: ", ";\n\n  border-radius: ", "px;\n"])), (0, _tokens.token)('elevation.surface', 'white'), _sharedStyles.scrollableMaxHeight, (0, _constants.borderRadius)());
+var ScrollableStyle = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: block;\n  overflow-x: hidden;\n  overflow-y: auto;\n\n  padding: 4px 0;\n  margin: 0;\n\n  background: ", ";\n  max-height: ", ";\n\n  border-radius: ", "px;\n"])), "var(--ds-surface, white)", _sharedStyles.scrollableMaxHeight, (0, _constants.borderRadius)());
 
 exports.ScrollableStyle = ScrollableStyle;

package/dist/cjs/components/TeamMentionHighlight/styles.js

@@ -17,8 +17,6 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _typography = require("@atlaskit/theme/typography");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 
 var Actions = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  justify-content: flex-end;\n  margin-top: -", "px; /* Negative margin is used to middle align x button with title */\n  margin-right: ", "px;\n"])), (0, _constants.gridSize)() * 0.5, (0, _constants.gridSize)() * 0.5);
@@ -33,7 +31,7 @@ var Heading = _styled.default.div(_templateObject3 || (_templateObject3 = (0, _t
 
 exports.Heading = Heading;
 
-var Card = _styled.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  background-color: ", ";\n  overflow: hidden;\n  line-height: 21px;\n  padding-top: ", "px;\n  padding-bottom: ", "px;\n  padding-left: ", "px;\n  padding-right: 0px;\n  margin-top: -", "px; /* Negative margin is used to fill the entire top of the mention dropdown with background colour of highlight */\n"])), (0, _tokens.token)('color.background.discovery', _colors.P50), (0, _constants.gridSize)() * 2, (0, _constants.gridSize)() * 2, (0, _constants.gridSize)() * 2, (0, _constants.gridSize)() * 0.5);
+var Card = _styled.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  background-color: ", ";\n  overflow: hidden;\n  line-height: 21px;\n  padding-top: ", "px;\n  padding-bottom: ", "px;\n  padding-left: ", "px;\n  padding-right: 0px;\n  margin-top: -", "px; /* Negative margin is used to fill the entire top of the mention dropdown with background colour of highlight */\n"])), "var(--ds-background-discovery, ".concat(_colors.P50, ")"), (0, _constants.gridSize)() * 2, (0, _constants.gridSize)() * 2, (0, _constants.gridSize)() * 2, (0, _constants.gridSize)() * 0.5);
 
 exports.Card = Card;
 

package/dist/cjs/shared-styles.js

@@ -9,14 +9,12 @@ var _constants = require("@atlaskit/theme/constants");
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _tokens = require("@atlaskit/tokens");
-
-var noDialogContainerBorderColor = (0, _tokens.token)('color.border', _colors.N40); // This has not been confirmed by the ADG yet
+var noDialogContainerBorderColor = "var(--ds-border, ".concat(_colors.N40, ")"); // This has not been confirmed by the ADG yet
 
 exports.noDialogContainerBorderColor = noDialogContainerBorderColor;
 var noDialogContainerBorderRadius = "".concat((0, _constants.borderRadius)(), "px");
 exports.noDialogContainerBorderRadius = noDialogContainerBorderRadius;
-var noDialogContainerBoxShadow = (0, _tokens.token)('elevation.shadow.overlay', '0 4px 8px -2px rgba(9, 30, 66, 0.25), 0 0 1px rgba(9, 30, 66, 0.31)'); // Copied from droplist style
+var noDialogContainerBoxShadow = "var(--ds-shadow-overlay, 0 4px 8px -2px rgba(9, 30, 66, 0.25), 0 0 1px rgba(9, 30, 66, 0.31))"; // Copied from droplist style
 
 exports.noDialogContainerBoxShadow = noDialogContainerBoxShadow;
 var scrollableMaxHeight = '264px';

package/dist/cjs/version.json

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

package/dist/es2019/api/TeamMentionResource.js

@@ -212,7 +212,8 @@ export default class TeamMentionResource extends MentionResource {
 
   trimTeamARI(teamId = '') {
     const TEAM_ARI_PREFIX = 'ari:cloud:teams::team/';
-    return teamId.replace(TEAM_ARI_PREFIX, '');
+    const IDENTITY_TEAM_ARI_PREFIX = 'ari:cloud:identity::team/';
+    return teamId.replace(TEAM_ARI_PREFIX, '').replace(IDENTITY_TEAM_ARI_PREFIX, '');
   }
 
 }

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

@@ -4,59 +4,58 @@ import _extends from "@babel/runtime/helpers/extends";
 import { jsx, css } from '@emotion/react';
 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)
+      light: `var(--ds-background-brand-bold, ${B400})`,
+      dark: `var(--ds-background-brand-bold, ${B200})`
     }),
     borderColor: 'transparent',
     text: themed({
-      light: token('color.text.inverse', N20),
-      dark: token('color.text.inverse', DN30)
+      light: `var(--ds-text-inverse, ${N20})`,
+      dark: `var(--ds-text-inverse, ${DN30})`
     }),
     hoveredBackground: themed({
-      light: token('color.background.brand.bold.hovered', B400),
-      dark: token('color.background.brand.bold.hovered', B200)
+      light: `var(--ds-background-brand-bold-hovered, ${B400})`,
+      dark: `var(--ds-background-brand-bold-hovered, ${B200})`
     }),
     pressedBackground: themed({
-      light: token('color.background.brand.bold.pressed', B400),
-      dark: token('color.background.brand.bold.pressed', B200)
+      light: `var(--ds-background-brand-bold-pressed, ${B400})`,
+      dark: `var(--ds-background-brand-bold-pressed, ${B200})`
     })
   },
   [MentionType.RESTRICTED]: {
     background: 'transparent',
     borderColor: themed({
-      light: token('color.border.bold', N500),
-      dark: token('color.border.bold', DN80)
+      light: `var(--ds-border-bold, ${N500})`,
+      dark: `var(--ds-border-bold, ${DN80})`
     }),
     text: themed({
-      light: token('color.text', N500),
-      dark: token('color.text', DN100)
+      light: `var(--ds-text, ${N500})`,
+      dark: `var(--ds-text, ${DN100})`
     }),
     hoveredBackground: 'transparent',
     pressedBackground: 'transparent'
   },
   [MentionType.DEFAULT]: {
     background: themed({
-      light: token('color.background.neutral', N30A),
-      dark: token('color.background.neutral', DN80)
+      light: `var(--ds-background-neutral, ${N30A})`,
+      dark: `var(--ds-background-neutral, ${DN80})`
     }),
     borderColor: 'transparent',
     text: themed({
-      light: token('color.text.subtle', N500),
-      dark: token('color.text.subtle', DN800)
+      light: `var(--ds-text-subtle, ${N500})`,
+      dark: `var(--ds-text-subtle, ${DN800})`
     }),
     hoveredBackground: themed({
-      light: token('color.background.neutral.hovered', N30A),
-      dark: token('color.background.neutral.hovered', DN80)
+      light: `var(--ds-background-neutral-hovered, ${N30A})`,
+      dark: `var(--ds-background-neutral-hovered, ${DN80})`
     }),
     pressedBackground: themed({
-      light: token('color.background.neutral.pressed', N30A),
-      dark: token('color.background.neutral.pressed', DN80)
+      light: `var(--ds-background-neutral-pressed, ${N30A})`,
+      dark: `var(--ds-background-neutral-pressed, ${DN80})`
     })
   }
 };

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

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

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

@@ -3,7 +3,6 @@ import Avatar from '@atlaskit/avatar';
 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';
@@ -86,7 +85,7 @@ export default class MentionItem extends React.PureComponent {
     } = presence || {};
     const restricted = isRestricted(accessLevel);
     const nameHighlights = highlight && highlight.name;
-    const borderColor = selected ? token('color.border', N30) : undefined;
+    const borderColor = selected ? `var(--ds-border, ${N30})` : undefined;
     return /*#__PURE__*/React.createElement(MessagesIntlProvider, null, /*#__PURE__*/React.createElement(MentionItemStyle, {
       selected: selected,
       onMouseDown: this.onMentionSelected,

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

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

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

@@ -1,12 +1,11 @@
 import styled from '@emotion/styled';
-import { token } from '@atlaskit/tokens';
 import { mentionListWidth, noDialogContainerBorderColor, noDialogContainerBorderRadius, noDialogContainerBoxShadow } from '../../shared-styles';
 export const MentionListStyle = styled.div`
   display: ${props => props.empty ? 'none' : 'block'};
 
   /* list style */
   width: ${mentionListWidth};
-  color: ${token('color.text.subtle', '#333')};
+  color: ${"var(--ds-text-subtle, #333)"};
 
   border: 1px solid ${noDialogContainerBorderColor};
   border-radius: ${noDialogContainerBorderRadius};

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

@@ -1,5 +1,4 @@
 import styled from '@emotion/styled';
-import { token } from '@atlaskit/tokens';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { N500 } from '@atlaskit/theme/colors';
 import { h400 } from '@atlaskit/theme/typography';
@@ -8,9 +7,9 @@ export const MentionListErrorStyle = styled.div`
   display: flex;
   justify-content: center;
   flex-direction: column;
-  background-color: ${token('elevation.surface.overlay', 'white')};
-  color: ${token('color.text.subtle', N500)};
-  border: 1px solid ${token('elevation.surface.overlay', '#fff')};
+  background-color: ${"var(--ds-surface-overlay, white)"};
+  color: ${`var(--ds-text-subtle, ${N500})`};
+  border: 1px solid ${"var(--ds-surface-overlay, #fff)"};
   border-radius: ${borderRadius()}px;
 `;
 export const GenericErrorVisualStyle = styled.div`

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

@@ -1,13 +1,12 @@
 import styled from '@emotion/styled';
-import { token } from '@atlaskit/tokens';
 import { N100 } from '@atlaskit/theme/colors';
 import { mentionListWidth, noDialogContainerBorderColor, noDialogContainerBorderRadius, noDialogContainerBoxShadow } from '../../shared-styles';
 export const MentionPickerStyle = styled.div`
   display: ${props => props.visible ? 'block' : 'none'};
 `;
 export const MentionPickerInfoStyle = styled.div`
-  background: ${token('elevation.surface', '#fff')};
-  color: ${token('color.text.subtlest', N100)};
+  background: ${"var(--ds-surface, #fff)"};
+  color: ${`var(--ds-text-subtlest, ${N100})`};
   border: 1px solid ${noDialogContainerBorderColor};
   border-radius: ${noDialogContainerBorderRadius};
   box-shadow: ${noDialogContainerBoxShadow};

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

@@ -1,5 +1,4 @@
 import styled from '@emotion/styled';
-import { token } from '@atlaskit/tokens';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { scrollableMaxHeight } from '../../shared-styles';
 export const ScrollableStyle = styled.div`
@@ -10,7 +9,7 @@ export const ScrollableStyle = styled.div`
   padding: 4px 0;
   margin: 0;
 
-  background: ${token('elevation.surface', 'white')};
+  background: ${"var(--ds-surface, white)"};
   max-height: ${scrollableMaxHeight};
 
   border-radius: ${borderRadius()}px;

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

@@ -2,7 +2,6 @@ import styled from '@emotion/styled';
 import { gridSize } from '@atlaskit/theme/constants';
 import { P50 } from '@atlaskit/theme/colors';
 import { h400 } from '@atlaskit/theme/typography';
-import { token } from '@atlaskit/tokens';
 export const Actions = styled.div`
   justify-content: flex-end;
   margin-top: -${gridSize() * 0.5}px; /* Negative margin is used to middle align x button with title */
@@ -19,7 +18,7 @@ export const Heading = styled.div`
 export const Card = styled.div`
   display: flex;
   flex-direction: row;
-  background-color: ${token('color.background.discovery', P50)};
+  background-color: ${`var(--ds-background-discovery, ${P50})`};
   overflow: hidden;
   line-height: 21px;
   padding-top: ${gridSize() * 2}px;

package/dist/es2019/shared-styles.js

@@ -1,10 +1,9 @@
 import { borderRadius } from '@atlaskit/theme/constants';
 import { N40 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
-export const noDialogContainerBorderColor = token('color.border', N40); // This has not been confirmed by the ADG yet
+export const noDialogContainerBorderColor = `var(--ds-border, ${N40})`; // This has not been confirmed by the ADG yet
 
 export const noDialogContainerBorderRadius = `${borderRadius()}px`;
-export const noDialogContainerBoxShadow = token('elevation.shadow.overlay', '0 4px 8px -2px rgba(9, 30, 66, 0.25), 0 0 1px rgba(9, 30, 66, 0.31)'); // Copied from droplist style
+export const noDialogContainerBoxShadow = "var(--ds-shadow-overlay, 0 4px 8px -2px rgba(9, 30, 66, 0.25), 0 0 1px rgba(9, 30, 66, 0.31))"; // Copied from droplist style
 
 export const scrollableMaxHeight = '264px';
 export const mentionListWidth = '340px';

package/dist/es2019/version.json

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

package/dist/esm/api/TeamMentionResource.js

@@ -337,7 +337,8 @@ var TeamMentionResource = /*#__PURE__*/function (_MentionResource) {
     value: function trimTeamARI() {
       var teamId = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
       var TEAM_ARI_PREFIX = 'ari:cloud:teams::team/';
-      return teamId.replace(TEAM_ARI_PREFIX, '');
+      var IDENTITY_TEAM_ARI_PREFIX = 'ari:cloud:identity::team/';
+      return teamId.replace(TEAM_ARI_PREFIX, '').replace(IDENTITY_TEAM_ARI_PREFIX, '');
     }
   }]);
 

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

@@ -10,56 +10,55 @@ var _mentionStyle, _templateObject;
 import { jsx, css } from '@emotion/react';
 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)
+    light: "var(--ds-background-brand-bold, ".concat(B400, ")"),
+    dark: "var(--ds-background-brand-bold, ".concat(B200, ")")
   }),
   borderColor: 'transparent',
   text: themed({
-    light: token('color.text.inverse', N20),
-    dark: token('color.text.inverse', DN30)
+    light: "var(--ds-text-inverse, ".concat(N20, ")"),
+    dark: "var(--ds-text-inverse, ".concat(DN30, ")")
   }),
   hoveredBackground: themed({
-    light: token('color.background.brand.bold.hovered', B400),
-    dark: token('color.background.brand.bold.hovered', B200)
+    light: "var(--ds-background-brand-bold-hovered, ".concat(B400, ")"),
+    dark: "var(--ds-background-brand-bold-hovered, ".concat(B200, ")")
   }),
   pressedBackground: themed({
-    light: token('color.background.brand.bold.pressed', B400),
-    dark: token('color.background.brand.bold.pressed', B200)
+    light: "var(--ds-background-brand-bold-pressed, ".concat(B400, ")"),
+    dark: "var(--ds-background-brand-bold-pressed, ".concat(B200, ")")
   })
 }), _defineProperty(_mentionStyle, MentionType.RESTRICTED, {
   background: 'transparent',
   borderColor: themed({
-    light: token('color.border.bold', N500),
-    dark: token('color.border.bold', DN80)
+    light: "var(--ds-border-bold, ".concat(N500, ")"),
+    dark: "var(--ds-border-bold, ".concat(DN80, ")")
   }),
   text: themed({
-    light: token('color.text', N500),
-    dark: token('color.text', DN100)
+    light: "var(--ds-text, ".concat(N500, ")"),
+    dark: "var(--ds-text, ".concat(DN100, ")")
   }),
   hoveredBackground: 'transparent',
   pressedBackground: 'transparent'
 }), _defineProperty(_mentionStyle, MentionType.DEFAULT, {
   background: themed({
-    light: token('color.background.neutral', N30A),
-    dark: token('color.background.neutral', DN80)
+    light: "var(--ds-background-neutral, ".concat(N30A, ")"),
+    dark: "var(--ds-background-neutral, ".concat(DN80, ")")
   }),
   borderColor: 'transparent',
   text: themed({
-    light: token('color.text.subtle', N500),
-    dark: token('color.text.subtle', DN800)
+    light: "var(--ds-text-subtle, ".concat(N500, ")"),
+    dark: "var(--ds-text-subtle, ".concat(DN800, ")")
   }),
   hoveredBackground: themed({
-    light: token('color.background.neutral.hovered', N30A),
-    dark: token('color.background.neutral.hovered', DN80)
+    light: "var(--ds-background-neutral-hovered, ".concat(N30A, ")"),
+    dark: "var(--ds-background-neutral-hovered, ".concat(DN80, ")")
   }),
   pressedBackground: themed({
-    light: token('color.background.neutral.pressed', N30A),
-    dark: token('color.background.neutral.pressed', DN80)
+    light: "var(--ds-background-neutral-pressed, ".concat(N30A, ")"),
+    dark: "var(--ds-background-neutral-pressed, ".concat(DN80, ")")
   })
 }), _mentionStyle);
 

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

@@ -4,5 +4,4 @@ var _templateObject;
 
 import styled from '@emotion/styled';
 import { N100 } from '@atlaskit/theme/colors';
-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));
+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"])), "var(--ds-text-subtlest, ".concat(N100, ")"));

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

@@ -15,7 +15,6 @@ import Avatar from '@atlaskit/avatar';
 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';
@@ -111,7 +110,7 @@ var MentionItem = /*#__PURE__*/function (_React$PureComponent) {
 
       var restricted = isRestricted(accessLevel);
       var nameHighlights = highlight && highlight.name;
-      var borderColor = selected ? token('color.border', N30) : undefined;
+      var borderColor = selected ? "var(--ds-border, ".concat(N30, ")") : undefined;
       return /*#__PURE__*/React.createElement(MessagesIntlProvider, null, /*#__PURE__*/React.createElement(MentionItemStyle, {
         selected: selected,
         onMouseDown: this.onMentionSelected,

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

@@ -4,7 +4,6 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
 
 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';
@@ -12,13 +11,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"])), token('color.text', 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"])), "var(--ds-text, ".concat(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"])), token('color.text.subtlest', N100));
+export var TimeStyle = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  margin-left: 20px;\n  flex: none;\n  color: ", ";\n  font-size: 12px;\n"])), "var(--ds-text-subtlest, ".concat(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 ? token('color.background.selected', N30) : 'transparent';
+  return props.selected ? "var(--ds-background-selected, ".concat(N30, ")") : 'transparent';
 }, MENTION_ITEM_HEIGHT);
-export var AccessSectionStyle = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  padding-left: 5px;\n  color: ", ";\n"])), token('color.text.subtle', N500));
+export var AccessSectionStyle = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  padding-left: 5px;\n  color: ", ";\n"])), "var(--ds-text-subtle, ".concat(N500, ")"));

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

@@ -3,8 +3,7 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 var _templateObject;
 
 import styled from '@emotion/styled';
-import { token } from '@atlaskit/tokens';
 import { mentionListWidth, noDialogContainerBorderColor, noDialogContainerBorderRadius, noDialogContainerBoxShadow } from '../../shared-styles';
 export var MentionListStyle = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: ", ";\n\n  /* list style */\n  width: ", ";\n  color: ", ";\n\n  border: 1px solid ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n"])), function (props) {
   return props.empty ? 'none' : 'block';
-}, mentionListWidth, token('color.text.subtle', '#333'), noDialogContainerBorderColor, noDialogContainerBorderRadius, noDialogContainerBoxShadow);
+}, mentionListWidth, "var(--ds-text-subtle, #333)", noDialogContainerBorderColor, noDialogContainerBorderRadius, noDialogContainerBoxShadow);

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

@@ -3,11 +3,10 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 import styled from '@emotion/styled';
-import { token } from '@atlaskit/tokens';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { N500 } from '@atlaskit/theme/colors';
 import { h400 } from '@atlaskit/theme/typography';
-export var MentionListErrorStyle = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  align-items: center;\n  display: flex;\n  justify-content: center;\n  flex-direction: column;\n  background-color: ", ";\n  color: ", ";\n  border: 1px solid ", ";\n  border-radius: ", "px;\n"])), token('elevation.surface.overlay', 'white'), token('color.text.subtle', N500), token('elevation.surface.overlay', '#fff'), borderRadius());
+export var MentionListErrorStyle = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  align-items: center;\n  display: flex;\n  justify-content: center;\n  flex-direction: column;\n  background-color: ", ";\n  color: ", ";\n  border: 1px solid ", ";\n  border-radius: ", "px;\n"])), "var(--ds-surface-overlay, white)", "var(--ds-text-subtle, ".concat(N500, ")"), "var(--ds-surface-overlay, #fff)", borderRadius());
 export var GenericErrorVisualStyle = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  height: 108px;\n  margin-bottom: 8px;\n  margin-top: 36px;\n  width: 83px;\n"]))); // TODO: Figure out why the themed css function is causing type errors when passed prop children
 
 export var MentionListErrorHeadlineStyle = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", ";\n  margin-bottom: 8px;\n"])), h400());

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

@@ -3,10 +3,9 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 var _templateObject, _templateObject2;
 
 import styled from '@emotion/styled';
-import { token } from '@atlaskit/tokens';
 import { N100 } from '@atlaskit/theme/colors';
 import { mentionListWidth, noDialogContainerBorderColor, noDialogContainerBorderRadius, noDialogContainerBoxShadow } from '../../shared-styles';
 export var MentionPickerStyle = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: ", ";\n"])), function (props) {
   return props.visible ? 'block' : 'none';
 });
-export var MentionPickerInfoStyle = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background: ", ";\n  color: ", ";\n  border: 1px solid ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  display: block;\n  width: ", ";\n  white-space: nowrap;\n\n  & {\n    p {\n      margin: 0;\n      overflow: hidden;\n      padding: 9px;\n      text-overflow: ellipsis;\n    }\n  }\n"])), token('elevation.surface', '#fff'), token('color.text.subtlest', N100), noDialogContainerBorderColor, noDialogContainerBorderRadius, noDialogContainerBoxShadow, mentionListWidth);
+export var MentionPickerInfoStyle = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background: ", ";\n  color: ", ";\n  border: 1px solid ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  display: block;\n  width: ", ";\n  white-space: nowrap;\n\n  & {\n    p {\n      margin: 0;\n      overflow: hidden;\n      padding: 9px;\n      text-overflow: ellipsis;\n    }\n  }\n"])), "var(--ds-surface, #fff)", "var(--ds-text-subtlest, ".concat(N100, ")"), noDialogContainerBorderColor, noDialogContainerBorderRadius, noDialogContainerBoxShadow, mentionListWidth);

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

@@ -3,7 +3,6 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 var _templateObject;
 
 import styled from '@emotion/styled';
-import { token } from '@atlaskit/tokens';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { scrollableMaxHeight } from '../../shared-styles';
-export var ScrollableStyle = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: block;\n  overflow-x: hidden;\n  overflow-y: auto;\n\n  padding: 4px 0;\n  margin: 0;\n\n  background: ", ";\n  max-height: ", ";\n\n  border-radius: ", "px;\n"])), token('elevation.surface', 'white'), scrollableMaxHeight, borderRadius());
+export var ScrollableStyle = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: block;\n  overflow-x: hidden;\n  overflow-y: auto;\n\n  padding: 4px 0;\n  margin: 0;\n\n  background: ", ";\n  max-height: ", ";\n\n  border-radius: ", "px;\n"])), "var(--ds-surface, white)", scrollableMaxHeight, borderRadius());

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

@@ -6,11 +6,10 @@ import styled from '@emotion/styled';
 import { gridSize } from '@atlaskit/theme/constants';
 import { P50 } from '@atlaskit/theme/colors';
 import { h400 } from '@atlaskit/theme/typography';
-import { token } from '@atlaskit/tokens';
 export var Actions = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  justify-content: flex-end;\n  margin-top: -", "px; /* Negative margin is used to middle align x button with title */\n  margin-right: ", "px;\n"])), gridSize() * 0.5, gridSize() * 0.5);
 export var Title = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", ";\n  margin-top: 0px;\n"])), h400);
 export var Heading = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin-left: ", "px;\n  margin-bottom: ", "px;\n"])), gridSize() * 2, gridSize() * 0.5);
-export var Card = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  background-color: ", ";\n  overflow: hidden;\n  line-height: 21px;\n  padding-top: ", "px;\n  padding-bottom: ", "px;\n  padding-left: ", "px;\n  padding-right: 0px;\n  margin-top: -", "px; /* Negative margin is used to fill the entire top of the mention dropdown with background colour of highlight */\n"])), token('color.background.discovery', P50), gridSize() * 2, gridSize() * 2, gridSize() * 2, gridSize() * 0.5);
+export var Card = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  background-color: ", ";\n  overflow: hidden;\n  line-height: 21px;\n  padding-top: ", "px;\n  padding-bottom: ", "px;\n  padding-left: ", "px;\n  padding-right: 0px;\n  margin-top: -", "px; /* Negative margin is used to fill the entire top of the mention dropdown with background colour of highlight */\n"])), "var(--ds-background-discovery, ".concat(P50, ")"), gridSize() * 2, gridSize() * 2, gridSize() * 2, gridSize() * 0.5);
 export var Content = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  max-width: 290px;\n  display: flex;\n"])));
 export var Section = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral([""])));
 export var Aside = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  opacity: 0.8;\n"])));

package/dist/esm/shared-styles.js

@@ -1,10 +1,9 @@
 import { borderRadius } from '@atlaskit/theme/constants';
 import { N40 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
-export var noDialogContainerBorderColor = token('color.border', N40); // This has not been confirmed by the ADG yet
+export var noDialogContainerBorderColor = "var(--ds-border, ".concat(N40, ")"); // This has not been confirmed by the ADG yet
 
 export var noDialogContainerBorderRadius = "".concat(borderRadius(), "px");
-export var noDialogContainerBoxShadow = token('elevation.shadow.overlay', '0 4px 8px -2px rgba(9, 30, 66, 0.25), 0 0 1px rgba(9, 30, 66, 0.31)'); // Copied from droplist style
+export var noDialogContainerBoxShadow = "var(--ds-shadow-overlay, 0 4px 8px -2px rgba(9, 30, 66, 0.25), 0 0 1px rgba(9, 30, 66, 0.31))"; // Copied from droplist style
 
 export var scrollableMaxHeight = '264px';
 export var mentionListWidth = '340px';

package/dist/esm/version.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/mention",
-  "version": "21.0.14",
+  "version": "21.0.16",
   "description": "A React component used to display user profiles in a list for 'Mention' functionality",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -50,10 +50,10 @@
     "react-intl-next": "npm:react-intl@^5.18.1"
   },
   "devDependencies": {
-    "@atlaskit/adf-utils": "^17.1.0",
+    "@atlaskit/adf-utils": "^18.0.0",
     "@atlaskit/docs": "^9.0.0",
-    "@atlaskit/editor-core": "^176.0.0",
-    "@atlaskit/editor-test-helpers": "^17.2.0",
+    "@atlaskit/editor-core": "^177.0.0",
+    "@atlaskit/editor-test-helpers": "^18.0.0",
     "@atlaskit/elements-test-helpers": "^0.7.0",
     "@atlaskit/section-message": "^6.3.0",
     "@atlaskit/ssr": "*",

package/report.api.md

@@ -1,4 +1,4 @@
-<!-- API Report Version: 2.2 -->
+<!-- API Report Version: 2.3 -->
 
 ## API Report File for "@atlaskit/mention"