@atlaskit/mention 19.9.5 → 21.0.0

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)};
 `;

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

@@ -4,6 +4,7 @@ import debug from '../../util/logger';
 import { actualMouseMove, mouseLocation } from '../../util/mouse';
 import MentionItem from '../MentionItem';
 import MentionListError from '../MentionListError';
+import MessagesIntlProvider from '../MessagesIntlProvider';
 import Scrollable from '../Scrollable';
 import { MentionListStyle } from './styles';
 
@@ -257,9 +258,9 @@ export default class MentionList extends React.PureComponent {
       }, this.renderItems());
     }
 
-    return /*#__PURE__*/React.createElement(MentionListStyle, {
+    return /*#__PURE__*/React.createElement(MessagesIntlProvider, null, /*#__PURE__*/React.createElement(MentionListStyle, {
       empty: !hasMentions && !resourceError
-    }, errorSection, resultSection);
+    }, errorSection, resultSection));
   }
 
 }

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

@@ -1,13 +1,12 @@
-import styled from 'styled-components'; // @ts-ignore: unused variable
-// prettier-ignore
-
+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: #333;
+  color: ${token('color.text.subtle', '#333')};
 
   border: 1px solid ${noDialogContainerBorderColor};
   border-radius: ${noDialogContainerBorderRadius};

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

@@ -1,3 +1,4 @@
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import React from 'react';
 import { GenericErrorVisualStyle } from './styles';
 export class GenericErrorIllustration extends React.PureComponent {

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

@@ -1,6 +1,5 @@
-import styled from 'styled-components'; // @ts-ignore: unused variable
-// prettier-ignore
-
+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';
@@ -9,9 +8,9 @@ export const MentionListErrorStyle = styled.div`
   display: flex;
   justify-content: center;
   flex-direction: column;
-  background-color: white;
-  color: ${N500};
-  border: 1px solid #fff;
+  background-color: ${token('elevation.surface.overlay', 'white')};
+  color: ${token('color.text.subtle', N500)};
+  border: 1px solid ${token('elevation.surface.overlay', '#fff')};
   border-radius: ${borderRadius()}px;
 `;
 export const GenericErrorVisualStyle = styled.div`

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

@@ -1,6 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import { withAnalyticsEvents } from '@atlaskit/analytics-next';
+import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
 import React from 'react';
+import { IntlProvider, injectIntl } from 'react-intl-next';
 import { fireAnalyticsMentionTypeaheadEvent } from '../../util/analytics';
 import uniqueId from '../../util/id';
 import debug from '../../util/logger';
@@ -162,7 +163,8 @@ export class MentionPicker extends React.PureComponent {
       zIndex,
       offsetX,
       offsetY,
-      showTeamMentionsHighlight
+      showTeamMentionsHighlight,
+      intl
     } = this.props;
     const {
       visible,
@@ -190,7 +192,9 @@ export class MentionPicker extends React.PureComponent {
           zIndex: zIndex,
           offsetX: offsetX,
           offsetY: offsetY
-        }, /*#__PURE__*/React.createElement("div", null, resourceMentionList, infoContent));
+        }, /*#__PURE__*/React.createElement(IntlProvider, {
+          locale: (intl === null || intl === void 0 ? void 0 : intl.locale) || 'en'
+        }, /*#__PURE__*/React.createElement("div", null, resourceMentionList, infoContent)));
       } else {
         // don't show if we have a position, but no target yet
         content = null;
@@ -218,5 +222,8 @@ _defineProperty(MentionPicker, "defaultProps", {
   onClose: () => {}
 });
 
-export const MentionPickerWithAnalytics = withAnalyticsEvents({})(MentionPicker);
+const MentionPickerWithIntl = injectIntl(MentionPicker, {
+  forwardRef: true
+});
+export const MentionPickerWithAnalytics = withAnalyticsEvents({})(MentionPickerWithIntl);
 export default MentionPickerWithAnalytics;

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

@@ -1,14 +1,13 @@
-import styled from 'styled-components'; // @ts-ignore: unused variable
-// prettier-ignore
-
+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: #fff;
-  color: ${N100};
+  background: ${token('elevation.surface', '#fff')};
+  color: ${token('color.text.subtlest', N100)};
   border: 1px solid ${noDialogContainerBorderColor};
   border-radius: ${noDialogContainerBorderRadius};
   box-shadow: ${noDialogContainerBoxShadow};

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

@@ -0,0 +1,38 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { IntlProvider, useIntl } from 'react-intl-next';
+import { getMessagesForLocale } from '../../util/i18n';
+const EMPTY = {};
+
+const useI18n = locale => {
+  const [messages, setMessages] = React.useState(EMPTY);
+  React.useEffect(() => {
+    let aborted = false;
+    setMessages(EMPTY);
+    getMessagesForLocale(locale).then(messages => {
+      if (!aborted) {
+        setMessages(messages);
+      }
+    }).catch(error => {
+      // eslint-disable-next-line no-console
+      console.error(error);
+    });
+    return () => {
+      aborted = true;
+    };
+  }, [locale]);
+  return messages;
+};
+
+const MessagesIntlProvider = props => {
+  const {
+    children
+  } = props;
+  const intl = useIntl();
+  const messages = useI18n(intl.locale);
+  return /*#__PURE__*/React.createElement(IntlProvider, _extends({}, intl, {
+    messages: messages
+  }), children);
+};
+
+export default MessagesIntlProvider;

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

@@ -0,0 +1,9 @@
+import React from 'react';
+const AsyncNoAccessTooltip = /*#__PURE__*/React.lazy(() => import(
+/* webpackChunkName: "@atlaskit-internal_@atlaskit/mention/no-access-tooltip" */
+'./main').then(module => {
+  return {
+    default: module.NoAccessTooltip
+  };
+}));
+export default AsyncNoAccessTooltip;

package/dist/es2019/components/{NoAccessTooltip.js → NoAccessTooltip/main.js}

@@ -1,11 +1,13 @@
 import Tooltip from '@atlaskit/tooltip';
 import React from 'react';
-import { NoAccessWarning } from '../util/i18n';
+import { NoAccessWarning } from '../../util/i18n';
 export const NoAccessTooltip = ({
   name,
   children
 }) => /*#__PURE__*/React.createElement(NoAccessWarning, {
-  name: name
+  values: {
+    name: name
+  }
 }, text => /*#__PURE__*/React.createElement(Tooltip, {
   content: text,
   position: "right"

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

@@ -1,10 +1,10 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React from 'react';
+import React, { Suspense } from 'react';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import uniqueId from '../../util/id';
 import debug from '../../util/logger';
 import MentionList from '../MentionList';
-import TeamMentionHighlight from '../TeamMentionHighlight';
+import { LazyTeamMentionHighlight } from '../TeamMentionHighlight/lazy';
 import TeamMentionHighlightController from '../TeamMentionHighlight/TeamMentionHighlightController';
 import { fireSliAnalyticsEvent, SLI_EVENT_TYPE } from '../../util/analytics';
 
@@ -143,10 +143,12 @@ export class ResourcedMentionListWithoutAnalytics extends React.PureComponent {
         return null;
       }
 
-      return /*#__PURE__*/React.createElement(TeamMentionHighlight, {
+      return /*#__PURE__*/React.createElement(Suspense, {
+        fallback: null
+      }, /*#__PURE__*/React.createElement(LazyTeamMentionHighlight, {
         createTeamLink: createTeamPath,
         onClose: this.closeHighlight
-      });
+      }));
     });
 
     this.subscriberKey = uniqueId('ak-resourced-mention-list');

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

@@ -29,7 +29,7 @@ export default class Scrollable extends React.PureComponent {
 
   render() {
     return /*#__PURE__*/React.createElement(ScrollableStyle, {
-      innerRef: this.handleRef
+      ref: this.handleRef
     }, this.props.children);
   }
 

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

@@ -1,6 +1,5 @@
-import styled from 'styled-components'; // @ts-ignore: unused variable
-// prettier-ignore
-
+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`
@@ -11,7 +10,7 @@ export const ScrollableStyle = styled.div`
   padding: 4px 0;
   margin: 0;
 
-  background: white;
+  background: ${token('elevation.surface', 'white')};
   max-height: ${scrollableMaxHeight};
 
   border-radius: ${borderRadius()}px;

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

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
-import { withAnalyticsEvents } from '@atlaskit/analytics-next';
+import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
 import Button from '@atlaskit/button/custom-theme-button';
 import EditorCloseIcon from '@atlaskit/icon/glyph/editor/close';
 import Tooltip from '@atlaskit/tooltip';
@@ -8,6 +8,7 @@ import TeamMentionHighlightController from './TeamMentionHighlightController';
 import { fireAnalyticsTeamMentionHighlightEvent, ComponentNames, Actions } from '../../util/analytics';
 import { TeamMentionHighlightTitle, TeamMentionHighlightCloseTooltip, TeamMentionHighlightDescription, TeamMentionHighlightDescriptionLink } from '../../util/i18n';
 import * as Styled from './styles';
+import MessagesIntlProvider from '../MessagesIntlProvider';
 const ICON_URL = 'data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjEyOCIgdmlld0JveD0iMCAwIDEyOCAxMjgiIHdpZHRoPSIxMjgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48Y2lyY2xlIGN4PSI2NCIgY3k9IjY0IiBmaWxsPSIjNTI0M2FhIiBmaWxsLXJ1bGU9Im5vbnplcm8iIHI9IjY0Ii8+PHBhdGggZD0ibTgwIDY0Yy02LjYyNzQxNyAwLTEyLTUuMzcyNTgzLTEyLTEyczUuMzcyNTgzLTEyIDEyLTEyIDEyIDUuMzcyNTgzIDEyIDEyLTUuMzcyNTgzIDEyLTEyIDEyem0tMzItMTJjLTYuNjI3NDE3IDAtMTItNS4zNzI1ODMtMTItMTJzNS4zNzI1ODMtMTIgMTItMTIgMTIgNS4zNzI1ODMgMTIgMTItNS4zNzI1ODMgMTItMTIgMTJ6bTEyIDI0YzAtNC40MiAzLjU0OC04IDgtOGgyNGM0LjQyIDAgOCAzLjU0IDggOHYxNC45MmMwIDEyLjEwOC00MCAxMi4xMDgtNDAgMHptOC0xMmgtLjAxMmMtMy4xODQzNTM3LjAwNDI0LTYuMjM2NTQxIDEuMjczNTYxNS04LjQ4NDg0MjcgMy41Mjg2MTQ5LTIuMjQ4MzAxOCAyLjI1NTA1MzQtMy41MDg0NjU2IDUuMzExMDMzLTMuNTAzMTU3MyA4LjQ5NTM4NTF2MTEuMjI4Yy0xMS43ODQgMi4xMzYtMjgtLjI1Mi0yOC03LjkzNnYtMTUuMzA0YzAtNC40MjQgMy41NDgtOC4wMTIgOC04LjAxMmgyNGMyLjEyMjcwODYtLjAwMzE5MTIgNC4xNTkzOTQ2LjgzODYzODYgNS42NjAzNzggMi4zMzk2MjJzMi4zNDI4MTMyIDMuNTM3NjY5NCAyLjMzOTYyMiA1LjY2MDM3OHoiIGZpbGw9IiNmZmYiIGZpbGwtb3BhY2l0eT0iLjk1Ii8+PC9nPjwvc3ZnPg==';
 export class TeamMentionHighlightInternal extends React.Component {
   // Wrap whole dialog so we can catch events, see preventClickOnCard
@@ -111,7 +112,7 @@ export class TeamMentionHighlightInternal extends React.Component {
       return null;
     }
 
-    return /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/React.createElement(MessagesIntlProvider, null, /*#__PURE__*/React.createElement("div", {
       ref: this.elWrapper
     }, /*#__PURE__*/React.createElement(Styled.Card, null, /*#__PURE__*/React.createElement(Styled.Content, null, /*#__PURE__*/React.createElement(Styled.Aside, null, /*#__PURE__*/React.createElement("img", {
       src: ICON_URL,
@@ -135,7 +136,7 @@ export class TeamMentionHighlightInternal extends React.Component {
       }),
       spacing: "none" // on click fired by preventClickOnCard, not here
 
-    }))))))));
+    })))))))));
   }
 
 }

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

@@ -0,0 +1,6 @@
+import React from 'react';
+export const LazyTeamMentionHighlight = /*#__PURE__*/React.lazy(() => import(
+/* webpackChunkName: "@atlaskit-internal_@atlassian/mention/TeamMentionHighlight" */
+'./').then(module => ({
+  default: module.default
+})));

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

@@ -1,7 +1,8 @@
-import styled from 'styled-components';
+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*/
@@ -18,7 +19,7 @@ export const Heading = styled.div`
 export const Card = styled.div`
   display: flex;
   flex-direction: row;
-  background-color: ${P50};
+  background-color: ${token('color.background.discovery', P50)};
   overflow: hidden;
   line-height: 21px;
   padding-top: ${gridSize() * 2}px;

package/dist/es2019/components/i18n.js

@@ -1,4 +1,4 @@
-import { defineMessages } from 'react-intl';
+import { defineMessages } from 'react-intl-next';
 export const messages = defineMessages({
   unknownUserError: {
     id: 'fabric.mention.unknow.user.error',

package/dist/es2019/i18n/cs.js

@@ -1,10 +1,10 @@
 /**
  * NOTE:
  *
- * This file is automatically generated by i18n-tools.
+ * This file is automatically generated by Traduki 2.0.
  * DO NOT CHANGE IT BY HAND or your changes will be lost.
  */
-// Czech
+//Czech
 export default {
   'fabric.elements.mentions.team.meantion.highlight.close.button.tooltip': 'Zavřít',
   'fabric.elements.mentions.team.member.50plus': 'Tým • 50 a více členů',

package/dist/es2019/i18n/da.js

@@ -1,10 +1,10 @@
 /**
  * NOTE:
  *
- * This file is automatically generated by i18n-tools.
+ * This file is automatically generated by Traduki 2.0.
  * DO NOT CHANGE IT BY HAND or your changes will be lost.
  */
-// Danish
+//Danish (Denmark)
 export default {
   'fabric.elements.mentions.team.meantion.highlight.close.button.tooltip': 'Afvis',
   'fabric.elements.mentions.team.member.50plus': 'Team • Over 50 medlemmer',