@atlaskit/profilecard 15.7.1 → 16.0.0

package/dist/cjs/styled/constants.js

@@ -5,78 +5,85 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.errorTextColor = exports.errorTitleColor = exports.errorIconColor = exports.labelIconColor = exports.labelTextColor = exports.appLabelTextColor = exports.appLabelBgColor = exports.headerTextColorInactive = exports.headerTextColor = exports.headerBgColorDisabledUser = exports.teamHeaderBgColor = exports.headerBgColor = exports.bgColor = void 0;
+exports.teamHeaderBgColor = exports.labelTextColor = exports.labelIconColor = exports.headerTextColorInactive = exports.headerTextColor = exports.headerBgColorDisabledUser = exports.headerBgColor = exports.errorTitleColor = exports.errorTextColor = exports.errorIconColor = exports.boxShadow = exports.bgColor = exports.appLabelTextColor = exports.appLabelBgColor = void 0;
 
 var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
 
 var _components = require("@atlaskit/theme/components");
 
+var _tokens = require("@atlaskit/tokens");
+
 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 bgColor = (0, _components.themed)({
-  light: colors.N0,
-  dark: colors.DN50
+  light: (0, _tokens.token)('color.background.overlay', colors.N0),
+  dark: (0, _tokens.token)('color.background.overlay', colors.DN50)
 });
 exports.bgColor = bgColor;
 var headerBgColor = (0, _components.themed)({
-  light: colors.B500,
-  dark: colors.B100
+  light: (0, _tokens.token)('color.background.boldBrand.resting', colors.B500),
+  dark: (0, _tokens.token)('color.background.boldBrand.resting', colors.B100)
 });
 exports.headerBgColor = headerBgColor;
 var teamHeaderBgColor = (0, _components.themed)({
-  light: colors.N50,
-  dark: colors.N50
+  light: (0, _tokens.token)('color.background.subtleNeutral.resting', colors.N50),
+  dark: (0, _tokens.token)('color.background.subtleNeutral.resting', colors.N50)
 });
 exports.teamHeaderBgColor = teamHeaderBgColor;
 var headerBgColorDisabledUser = (0, _components.themed)({
-  light: colors.N30,
-  dark: colors.B100
+  light: (0, _tokens.token)('color.background.disabled', colors.N30),
+  dark: (0, _tokens.token)('color.background.disabled', colors.B100)
 });
 exports.headerBgColorDisabledUser = headerBgColorDisabledUser;
 var headerTextColor = (0, _components.themed)({
-  light: colors.N0,
-  dark: colors.N0
+  light: (0, _tokens.token)('color.text.onBold', colors.N0),
+  dark: (0, _tokens.token)('color.text.onBold', colors.N0)
 });
 exports.headerTextColor = headerTextColor;
 var headerTextColorInactive = (0, _components.themed)({
-  light: colors.N800,
-  dark: colors.N0
+  light: (0, _tokens.token)('color.text.highEmphasis', colors.N800),
+  dark: (0, _tokens.token)('color.text.highEmphasis', colors.N0)
 });
 exports.headerTextColorInactive = headerTextColorInactive;
 var appLabelBgColor = (0, _components.themed)({
-  light: colors.N20,
-  dark: colors.N20
+  light: (0, _tokens.token)('color.background.subtleNeutral.resting', colors.N20),
+  dark: (0, _tokens.token)('color.background.subtleNeutral.resting', colors.N20)
 });
 exports.appLabelBgColor = appLabelBgColor;
 var appLabelTextColor = (0, _components.themed)({
-  light: colors.N500,
-  dark: colors.N500
+  light: (0, _tokens.token)('color.text.highEmphasis', colors.N500),
+  dark: (0, _tokens.token)('color.text.highEmphasis', colors.N500)
 });
 exports.appLabelTextColor = appLabelTextColor;
 var labelTextColor = (0, _components.themed)({
-  light: colors.N800,
-  dark: colors.DN900
+  light: (0, _tokens.token)('color.text.highEmphasis', colors.N800),
+  dark: (0, _tokens.token)('color.text.highEmphasis', colors.DN900)
 });
 exports.labelTextColor = labelTextColor;
 var labelIconColor = (0, _components.themed)({
-  light: colors.N60,
-  dark: colors.DN100
+  light: (0, _tokens.token)('color.text.lowEmphasis', colors.N60),
+  dark: (0, _tokens.token)('color.text.lowEmphasis', colors.DN100)
 });
 exports.labelIconColor = labelIconColor;
 var errorIconColor = (0, _components.themed)({
-  light: colors.N90,
-  dark: colors.DN90
+  light: (0, _tokens.token)('color.text.disabled', colors.N90),
+  dark: (0, _tokens.token)('color.text.disabled', colors.DN90)
 });
 exports.errorIconColor = errorIconColor;
 var errorTitleColor = (0, _components.themed)({
-  light: colors.N800,
-  dark: colors.DN800
+  light: (0, _tokens.token)('color.text.highEmphasis', colors.N800),
+  dark: (0, _tokens.token)('color.text.highEmphasis', colors.DN800)
 });
 exports.errorTitleColor = errorTitleColor;
 var errorTextColor = (0, _components.themed)({
-  light: colors.N90,
-  dark: colors.DN90
+  light: (0, _tokens.token)('color.text.lowEmphasis', colors.N90),
+  dark: (0, _tokens.token)('color.text.lowEmphasis', colors.DN90)
+});
+exports.errorTextColor = errorTextColor;
+var boxShadow = (0, _components.themed)({
+  light: (0, _tokens.token)('shadow.overlay', "0 4px 8px -2px ".concat(colors.N50A, ", 0 0 1px ").concat(colors.N60A)),
+  dark: (0, _tokens.token)('shadow.overlay', "0 4px 8px -2px ".concat(colors.DN50A, ", 0 0 1px ").concat(colors.DN60A))
 });
-exports.errorTextColor = errorTextColor;
+exports.boxShadow = boxShadow;

package/dist/cjs/util/analytics.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.errorRetryClicked = exports.moreMembersClicked = exports.teamAvatarClicked = exports.moreActionsClicked = exports.teamActionClicked = exports.teamProfileCardRendered = exports.teamRequestAnalytics = exports.teamCardTriggered = exports.firePeopleTeamsEvent = void 0;
+exports.teamRequestAnalytics = exports.teamProfileCardRendered = exports.teamCardTriggered = exports.teamAvatarClicked = exports.teamActionClicked = exports.moreMembersClicked = exports.moreActionsClicked = exports.firePeopleTeamsEvent = exports.errorRetryClicked = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
@@ -31,7 +31,7 @@ var createEvent = function createEvent(eventType, action, actionSubject, actionS
     actionSubjectId: actionSubjectId,
     attributes: _objectSpread(_objectSpread({
       packageName: "@atlaskit/profilecard",
-      packageVersion: "15.7.1"
+      packageVersion: "16.0.0"
     }, attributes), {}, {
       firedAt: (0, _performance.getPageTime)()
     })

package/dist/cjs/util/config.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.DELAY_MS_HIDE = exports.DELAY_MS_SHOW = void 0;
+exports.DELAY_MS_SHOW = exports.DELAY_MS_HIDE = void 0;
 var DELAY_MS_SHOW = 800;
 exports.DELAY_MS_SHOW = DELAY_MS_SHOW;
 var DELAY_MS_HIDE = 200;

package/dist/cjs/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/profilecard",
-	"version": "15.7.1"
+	"version": "16.0.0"
 }

package/dist/es2019/components/Error/ErrorIllustration.js

@@ -1,4 +1,6 @@
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import React from 'react';
+import { token } from '@atlaskit/tokens';
 export const ErrorIllustration = () => {
   return /*#__PURE__*/React.createElement("svg", {
     width: "42",
@@ -10,7 +12,7 @@ export const ErrorIllustration = () => {
     clipPath: "url(#clip0)"
   }, /*#__PURE__*/React.createElement("path", {
     d: "M0.649902 0H163.93V212H0.649902V0Z",
-    fill: "white",
+    fill: token('color.background.overlay', 'white'),
     fillOpacity: "0.01"
   }), /*#__PURE__*/React.createElement("path", {
     d: "M95.4299 74.1603L161.87 189.24C167.71 199.36 160.41 212 148.73 212H15.8499C4.16994 212 -3.13006 199.35 2.70994 189.24L69.1499 74.1603C74.9899 64.0403 89.5899 64.0403 95.4299 74.1603ZM87.8699 157.71L90.7499 113.36C91.0899 108.07 86.8899 103.58 81.5899 103.58C76.2799 103.58 72.0799 108.06 72.4299 113.36L75.3099 157.71C75.5299 161.02 78.2699 163.6 81.5899 163.6C84.8999 163.6 87.6499 161.02 87.8699 157.71ZM72.0299 181.25C72.0299 186.91 76.7899 191.35 82.4199 190.83C87.2699 190.38 91.1499 186.33 91.2499 181.46C91.3599 176.01 86.9399 171.52 81.5199 171.52C76.2899 171.51 72.0299 175.89 72.0299 181.25Z",

package/dist/es2019/components/Team/TeamProfileCard.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage } from 'react-intl-next';
 import AvatarGroup from '@atlaskit/avatar-group';
 import ButtonGroup from '@atlaskit/button/button-group';
 import LoadingButton from '@atlaskit/button/loading-button';

package/dist/es2019/components/User/ProfileCard.js

@@ -1,12 +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 { FormattedMessage } from 'react-intl-next';
 import Avatar from '@atlaskit/avatar';
 import Button from '@atlaskit/button/custom-theme-button';
 import Lozenge from '@atlaskit/lozenge';
 import Spinner from '@atlaskit/spinner';
 import { N0 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import { AnalyticsName } from '../../internal/analytics';
 import relativeDate from '../../internal/relative-date';
 import messages from '../../messages';
@@ -234,7 +235,7 @@ export default class Profilecard extends React.PureComponent {
       }, /*#__PURE__*/React.createElement(ProfileImage, null, /*#__PURE__*/React.createElement(Avatar, {
         size: "xlarge",
         src: this.props.status !== 'closed' ? this.props.avatarUrl : undefined,
-        borderColor: N0
+        borderColor: token('color.background.overlay', N0)
       })), /*#__PURE__*/React.createElement(CardContent, null, this.renderCardDetails(), actions ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ActionsFlexSpacer, null), actions) : null));
     }
 

package/dist/es2019/i18n/index.js

@@ -4,33 +4,33 @@
  * This file is automatically generated by i18n-tools.
  * DO NOT CHANGE IT BY HAND or your changes will be lost.
  */
-export { default as en_ZZ } from './en_ZZ';
+export { default as zh } from './zh';
+export { default as zh_TW } from './zh_TW';
 export { default as cs } from './cs';
 export { default as da } from './da';
-export { default as de } from './de';
-export { default as en } from './en';
-export { default as en_GB } from './en_GB';
-export { default as es } from './es';
+export { default as nl } from './nl';
 export { default as et } from './et';
 export { default as fi } from './fi';
 export { default as fr } from './fr';
+export { default as de } from './de';
 export { default as hu } from './hu';
-export { default as is } from './is';
 export { default as it } from './it';
 export { default as ja } from './ja';
 export { default as ko } from './ko';
 export { default as nb } from './nb';
-export { default as nl } from './nl';
 export { default as pl } from './pl';
 export { default as pt_BR } from './pt_BR';
 export { default as pt_PT } from './pt_PT';
-export { default as ro } from './ro';
 export { default as ru } from './ru';
 export { default as sk } from './sk';
+export { default as es } from './es';
 export { default as sv } from './sv';
 export { default as th } from './th';
 export { default as tr } from './tr';
 export { default as uk } from './uk';
 export { default as vi } from './vi';
-export { default as zh } from './zh';
-export { default as zh_TW } from './zh_TW';
+export { default as en_ZZ } from './en_ZZ';
+export { default as en } from './en';
+export { default as en_GB } from './en_GB';
+export { default as is } from './is';
+export { default as ro } from './ro';

package/dist/es2019/messages.js

@@ -1,4 +1,4 @@
-import { defineMessages } from 'react-intl';
+import { defineMessages } from 'react-intl-next';
 const messages = defineMessages({
   inactiveAccountMsg: {
     id: 'pt.profile-card.inactive.account',

package/dist/es2019/styled/Card.js

@@ -1,7 +1,6 @@
 import styled, { css } from 'styled-components';
 import { borderRadius, fontSizeSmall, gridSize } from '@atlaskit/theme/constants';
-import { e200 } from '@atlaskit/theme/elevation';
-import { appLabelBgColor, appLabelTextColor, bgColor, headerBgColor, headerBgColorDisabledUser, headerTextColor, headerTextColorInactive, labelIconColor, labelTextColor } from '../styled/constants';
+import { appLabelBgColor, appLabelTextColor, bgColor, boxShadow, headerBgColor, headerBgColorDisabledUser, headerTextColor, headerTextColorInactive, labelIconColor, labelTextColor } from '../styled/constants';
 
 const getFullNameMargin = props => props.noMeta ? `${gridSize() * 4.5}px 0 ${gridSize() * 1.5}px 0` : `${gridSize() * 1.5}px 0 0 0`;
 
@@ -128,7 +127,7 @@ export const CardContainer = styled.div`
   }
 
   return css`
-      ${e200}
+      box-shadow: ${boxShadow};
       border-radius: ${borderRadius}px;
     `;
 }}

package/dist/es2019/styled/Error.js

@@ -2,6 +2,7 @@ import styled from 'styled-components';
 import { N200 } from '@atlaskit/theme/colors';
 import { gridSize } from '@atlaskit/theme/constants';
 import { h400 } from '@atlaskit/theme/typography';
+import { token } from '@atlaskit/tokens';
 import { errorIconColor, errorTextColor, errorTitleColor } from '../styled/constants';
 export const ErrorWrapper = styled.div`
   text-align: center;
@@ -20,6 +21,6 @@ export const TeamErrorTitle = styled.p`
   ${h400};
 `;
 export const TeamErrorText = styled.p`
-  color: ${N200};
+  color: ${token('color.text.lowEmphasis', N200)};
   margin-top: ${gridSize() * 1}px;
 `;

package/dist/es2019/styled/TeamCard.js

@@ -2,6 +2,7 @@ import styled, { css } from 'styled-components';
 import { N20, N200 } from '@atlaskit/theme/colors';
 import { borderRadius, gridSize } from '@atlaskit/theme/constants';
 import { h600 } from '@atlaskit/theme/typography';
+import { token } from '@atlaskit/tokens';
 import { bgColor, teamHeaderBgColor } from '../styled/constants';
 export const CardTriggerWrapper = styled.div`
   display: inherit;
@@ -15,7 +16,7 @@ export const CardWrapper = styled.div`
   -moz-osx-font-smoothing: grayscale;
 `;
 const loadingImage = css`
-  background-color: ${N20};
+  background-color: ${token('color.background.subtleNeutral.resting', N20)};
 `;
 const defaultImage = css`
   background-color: ${teamHeaderBgColor};
@@ -57,7 +58,7 @@ export const TeamName = styled.h6`
   -webkit-box-orient: vertical;
 `;
 export const MemberCount = styled.div`
-  color: ${N200};
+  color: ${token('color.text.lowEmphasis', N200)};
   margin-top: ${gridSize() * 0.5}px;
 `;
 export const AvatarSection = styled.div`
@@ -81,7 +82,7 @@ export const ActionButtons = styled.div`
   display: flex;
   justify-content: space-between;
   margin: ${gridSize() * 3}px -${gridSize() * 3}px 0 -${gridSize()}px;
-  background-color: hsla(0, 100%, 100%, 0.2);
+  background-color: ${token('color.background.overlay', 'hsla(0, 100%, 100%, 0.2)')};
 `;
 export const WrappedButton = styled.div`
   flex-basis: 0;

package/dist/es2019/styled/constants.js

@@ -1,54 +1,59 @@
 import * as colors from '@atlaskit/theme/colors';
 import { themed } from '@atlaskit/theme/components';
+import { token } from '@atlaskit/tokens';
 export const bgColor = themed({
-  light: colors.N0,
-  dark: colors.DN50
+  light: token('color.background.overlay', colors.N0),
+  dark: token('color.background.overlay', colors.DN50)
 });
 export const headerBgColor = themed({
-  light: colors.B500,
-  dark: colors.B100
+  light: token('color.background.boldBrand.resting', colors.B500),
+  dark: token('color.background.boldBrand.resting', colors.B100)
 });
 export const teamHeaderBgColor = themed({
-  light: colors.N50,
-  dark: colors.N50
+  light: token('color.background.subtleNeutral.resting', colors.N50),
+  dark: token('color.background.subtleNeutral.resting', colors.N50)
 });
 export const headerBgColorDisabledUser = themed({
-  light: colors.N30,
-  dark: colors.B100
+  light: token('color.background.disabled', colors.N30),
+  dark: token('color.background.disabled', colors.B100)
 });
 export const headerTextColor = themed({
-  light: colors.N0,
-  dark: colors.N0
+  light: token('color.text.onBold', colors.N0),
+  dark: token('color.text.onBold', colors.N0)
 });
 export const headerTextColorInactive = themed({
-  light: colors.N800,
-  dark: colors.N0
+  light: token('color.text.highEmphasis', colors.N800),
+  dark: token('color.text.highEmphasis', colors.N0)
 });
 export const appLabelBgColor = themed({
-  light: colors.N20,
-  dark: colors.N20
+  light: token('color.background.subtleNeutral.resting', colors.N20),
+  dark: token('color.background.subtleNeutral.resting', colors.N20)
 });
 export const appLabelTextColor = themed({
-  light: colors.N500,
-  dark: colors.N500
+  light: token('color.text.highEmphasis', colors.N500),
+  dark: token('color.text.highEmphasis', colors.N500)
 });
 export const labelTextColor = themed({
-  light: colors.N800,
-  dark: colors.DN900
+  light: token('color.text.highEmphasis', colors.N800),
+  dark: token('color.text.highEmphasis', colors.DN900)
 });
 export const labelIconColor = themed({
-  light: colors.N60,
-  dark: colors.DN100
+  light: token('color.text.lowEmphasis', colors.N60),
+  dark: token('color.text.lowEmphasis', colors.DN100)
 });
 export const errorIconColor = themed({
-  light: colors.N90,
-  dark: colors.DN90
+  light: token('color.text.disabled', colors.N90),
+  dark: token('color.text.disabled', colors.DN90)
 });
 export const errorTitleColor = themed({
-  light: colors.N800,
-  dark: colors.DN800
+  light: token('color.text.highEmphasis', colors.N800),
+  dark: token('color.text.highEmphasis', colors.DN800)
 });
 export const errorTextColor = themed({
-  light: colors.N90,
-  dark: colors.DN90
+  light: token('color.text.lowEmphasis', colors.N90),
+  dark: token('color.text.lowEmphasis', colors.DN90)
+});
+export const boxShadow = themed({
+  light: token('shadow.overlay', `0 4px 8px -2px ${colors.N50A}, 0 0 1px ${colors.N60A}`),
+  dark: token('shadow.overlay', `0 4px 8px -2px ${colors.DN50A}, 0 0 1px ${colors.DN60A}`)
 });

package/dist/es2019/util/analytics.js

@@ -11,7 +11,7 @@ const createEvent = (eventType, action, actionSubject, actionSubjectId, attribut
   actionSubjectId,
   attributes: {
     packageName: "@atlaskit/profilecard",
-    packageVersion: "15.7.1",
+    packageVersion: "16.0.0",
     ...attributes,
     firedAt: getPageTime()
   }

package/dist/es2019/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/profilecard",
-	"version": "15.7.1"
+	"version": "16.0.0"
 }

package/dist/esm/components/Error/ErrorIllustration.js

@@ -1,4 +1,6 @@
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import React from 'react';
+import { token } from '@atlaskit/tokens';
 export var ErrorIllustration = function ErrorIllustration() {
   return /*#__PURE__*/React.createElement("svg", {
     width: "42",
@@ -10,7 +12,7 @@ export var ErrorIllustration = function ErrorIllustration() {
     clipPath: "url(#clip0)"
   }, /*#__PURE__*/React.createElement("path", {
     d: "M0.649902 0H163.93V212H0.649902V0Z",
-    fill: "white",
+    fill: token('color.background.overlay', 'white'),
     fillOpacity: "0.01"
   }), /*#__PURE__*/React.createElement("path", {
     d: "M95.4299 74.1603L161.87 189.24C167.71 199.36 160.41 212 148.73 212H15.8499C4.16994 212 -3.13006 199.35 2.70994 189.24L69.1499 74.1603C74.9899 64.0403 89.5899 64.0403 95.4299 74.1603ZM87.8699 157.71L90.7499 113.36C91.0899 108.07 86.8899 103.58 81.5899 103.58C76.2799 103.58 72.0799 108.06 72.4299 113.36L75.3099 157.71C75.5299 161.02 78.2699 163.6 81.5899 163.6C84.8999 163.6 87.6499 161.02 87.8699 157.71ZM72.0299 181.25C72.0299 186.91 76.7899 191.35 82.4199 190.83C87.2699 190.38 91.1499 186.33 91.2499 181.46C91.3599 176.01 86.9399 171.52 81.5199 171.52C76.2899 171.51 72.0299 175.89 72.0299 181.25Z",

package/dist/esm/components/Team/TeamProfileCard.js

@@ -8,7 +8,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage } from 'react-intl-next';
 import AvatarGroup from '@atlaskit/avatar-group';
 import ButtonGroup from '@atlaskit/button/button-group';
 import LoadingButton from '@atlaskit/button/loading-button';

package/dist/esm/components/User/ProfileCard.js

@@ -13,12 +13,13 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 import React from 'react';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage } from 'react-intl-next';
 import Avatar from '@atlaskit/avatar';
 import Button from '@atlaskit/button/custom-theme-button';
 import Lozenge from '@atlaskit/lozenge';
 import Spinner from '@atlaskit/spinner';
 import { N0 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import { AnalyticsName } from '../../internal/analytics';
 import relativeDate from '../../internal/relative-date';
 import messages from '../../messages';
@@ -280,7 +281,7 @@ var Profilecard = /*#__PURE__*/function (_React$PureComponent) {
         }, /*#__PURE__*/React.createElement(ProfileImage, null, /*#__PURE__*/React.createElement(Avatar, {
           size: "xlarge",
           src: this.props.status !== 'closed' ? this.props.avatarUrl : undefined,
-          borderColor: N0
+          borderColor: token('color.background.overlay', N0)
         })), /*#__PURE__*/React.createElement(CardContent, null, this.renderCardDetails(), actions ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ActionsFlexSpacer, null), actions) : null));
       }
 

package/dist/esm/i18n/index.js

@@ -4,33 +4,33 @@
  * This file is automatically generated by i18n-tools.
  * DO NOT CHANGE IT BY HAND or your changes will be lost.
  */
-export { default as en_ZZ } from './en_ZZ';
+export { default as zh } from './zh';
+export { default as zh_TW } from './zh_TW';
 export { default as cs } from './cs';
 export { default as da } from './da';
-export { default as de } from './de';
-export { default as en } from './en';
-export { default as en_GB } from './en_GB';
-export { default as es } from './es';
+export { default as nl } from './nl';
 export { default as et } from './et';
 export { default as fi } from './fi';
 export { default as fr } from './fr';
+export { default as de } from './de';
 export { default as hu } from './hu';
-export { default as is } from './is';
 export { default as it } from './it';
 export { default as ja } from './ja';
 export { default as ko } from './ko';
 export { default as nb } from './nb';
-export { default as nl } from './nl';
 export { default as pl } from './pl';
 export { default as pt_BR } from './pt_BR';
 export { default as pt_PT } from './pt_PT';
-export { default as ro } from './ro';
 export { default as ru } from './ru';
 export { default as sk } from './sk';
+export { default as es } from './es';
 export { default as sv } from './sv';
 export { default as th } from './th';
 export { default as tr } from './tr';
 export { default as uk } from './uk';
 export { default as vi } from './vi';
-export { default as zh } from './zh';
-export { default as zh_TW } from './zh_TW';
+export { default as en_ZZ } from './en_ZZ';
+export { default as en } from './en';
+export { default as en_GB } from './en_GB';
+export { default as is } from './is';
+export { default as ro } from './ro';

package/dist/esm/messages.js

@@ -1,4 +1,4 @@
-import { defineMessages } from 'react-intl';
+import { defineMessages } from 'react-intl-next';
 var messages = defineMessages({
   inactiveAccountMsg: {
     id: 'pt.profile-card.inactive.account',

package/dist/esm/styled/Card.js

@@ -4,8 +4,7 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
 
 import styled, { css } from 'styled-components';
 import { borderRadius, fontSizeSmall, gridSize } from '@atlaskit/theme/constants';
-import { e200 } from '@atlaskit/theme/elevation';
-import { appLabelBgColor, appLabelTextColor, bgColor, headerBgColor, headerBgColorDisabledUser, headerTextColor, headerTextColorInactive, labelIconColor, labelTextColor } from '../styled/constants';
+import { appLabelBgColor, appLabelTextColor, bgColor, boxShadow, headerBgColor, headerBgColorDisabledUser, headerTextColor, headerTextColorInactive, labelIconColor, labelTextColor } from '../styled/constants';
 
 var getFullNameMargin = function getFullNameMargin(props) {
   return props.noMeta ? "".concat(gridSize() * 4.5, "px 0 ").concat(gridSize() * 1.5, "px 0") : "".concat(gridSize() * 1.5, "px 0 0 0");
@@ -38,7 +37,7 @@ export var CardContainer = styled.div(_templateObject15 || (_templateObject15 =
     return '';
   }
 
-  return css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n      ", "\n      border-radius: ", "px;\n    "])), e200, borderRadius);
+  return css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n      box-shadow: ", ";\n      border-radius: ", "px;\n    "])), boxShadow, borderRadius);
 });
 export var DetailsLabel = styled.div(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  line-height: ", "px;\n  font-size: ", "px;\n  margin: ", "px 0 0 0;\n  white-space: nowrap;\n\n  & + & {\n    margin-top: ", "px;\n  }\n"])), gridSize() * 3, gridSize() * 1.5, gridSize() * 2, gridSize() / 4);
 export var DetailsLabelIcon = styled.div(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-shrink: 0;\n  color: ", ";\n  width: ", "px;\n  height: ", "px;\n  padding: ", "px;\n  vertical-align: top;\n\n  svg {\n    width: 100%;\n    height: 100%;\n  }\n"])), labelIconColor, gridSize() * 2, gridSize() * 2, gridSize() / 2);

package/dist/esm/styled/Error.js

@@ -6,9 +6,10 @@ import styled from 'styled-components';
 import { N200 } from '@atlaskit/theme/colors';
 import { gridSize } from '@atlaskit/theme/constants';
 import { h400 } from '@atlaskit/theme/typography';
+import { token } from '@atlaskit/tokens';
 import { errorIconColor, errorTextColor, errorTitleColor } from '../styled/constants';
 export var ErrorWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  text-align: center;\n  padding: ", "px;\n  color: ", ";\n"])), gridSize() * 3, errorIconColor);
 export var ErrorTitle = styled.p(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  color: ", ";\n  line-height: ", "px;\n  margin: ", "px 0;\n"])), errorTitleColor, gridSize() * 3, gridSize);
 export var ErrorText = styled.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), errorTextColor);
 export var TeamErrorTitle = styled.p(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  ", ";\n"])), h400);
-export var TeamErrorText = styled.p(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  color: ", ";\n  margin-top: ", "px;\n"])), N200, gridSize() * 1);
+export var TeamErrorText = styled.p(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  color: ", ";\n  margin-top: ", "px;\n"])), token('color.text.lowEmphasis', N200), gridSize() * 1);

package/dist/esm/styled/TeamCard.js

@@ -6,10 +6,11 @@ import styled, { css } from 'styled-components';
 import { N20, N200 } from '@atlaskit/theme/colors';
 import { borderRadius, gridSize } from '@atlaskit/theme/constants';
 import { h600 } from '@atlaskit/theme/typography';
+import { token } from '@atlaskit/tokens';
 import { bgColor, teamHeaderBgColor } from '../styled/constants';
 export var CardTriggerWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inherit;\n"])));
 export var CardWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  border-radius: ", "px;\n  width: ", "px;\n  position: relative;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n"])), bgColor, borderRadius, gridSize() * 40);
-var loadingImage = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  background-color: ", ";\n"])), N20);
+var loadingImage = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  background-color: ", ";\n"])), token('color.background.subtleNeutral.resting', N20));
 var defaultImage = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  background-color: ", ";\n"])), teamHeaderBgColor);
 export var CardHeader = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  ", ";\n  background-repeat: no-repeat;\n  background-size: cover;\n  box-sizing: content-box;\n  height: ", "px;\n"])), function (props) {
   if (props.isLoading) {
@@ -24,11 +25,11 @@ export var CardHeader = styled.div(_templateObject5 || (_templateObject5 = _tagg
 }, gridSize() * 16);
 export var CardContent = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  padding: ", "px;\n  min-height: ", "px;\n"])), gridSize() * 3, gridSize() * 13);
 export var TeamName = styled.h6(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  ", ";\n  text-transform: none;\n  overflow: hidden;\n  max-height: 48px;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n"])), h600);
-export var MemberCount = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  color: ", ";\n  margin-top: ", "px;\n"])), N200, gridSize() * 0.5);
+export var MemberCount = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  color: ", ";\n  margin-top: ", "px;\n"])), token('color.text.lowEmphasis', N200), gridSize() * 0.5);
 export var AvatarSection = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  margin-top: ", "px;\n  margin-left: -2px;\n"])), gridSize() * 2);
 export var DescriptionWrapper = styled.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  margin-top: ", "px;\n  align-items: center;\n  display: flex;\n"])), gridSize() * 2);
 export var Description = styled.span(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  overflow: hidden;\n  max-height: 60px;\n  display: -webkit-box;\n  -webkit-line-clamp: 3;\n  -webkit-box-orient: vertical;\n"])));
-export var ActionButtons = styled.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  width: calc(100% + 8px);\n  display: flex;\n  justify-content: space-between;\n  margin: ", "px -", "px 0 -", "px;\n  background-color: hsla(0, 100%, 100%, 0.2);\n"])), gridSize() * 3, gridSize() * 3, gridSize());
+export var ActionButtons = styled.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  width: calc(100% + 8px);\n  display: flex;\n  justify-content: space-between;\n  margin: ", "px -", "px 0 -", "px;\n  background-color: ", ";\n"])), gridSize() * 3, gridSize() * 3, gridSize(), token('color.background.overlay', 'hsla(0, 100%, 100%, 0.2)'));
 export var WrappedButton = styled.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  flex-basis: 0;\n  flex-grow: 1;\n  margin-left: 8px;\n"])));
 export var MoreButton = styled.div(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  margin-left: 8px;\n"])));
 export var LoadingWrapper = styled.div(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n  text-align: center;\n  margin-top: ", "px;\n"])), gridSize() * 5); // export const LoadingTeamName = styled.div`