@atlaskit/profilecard 15.7.1 → 16.0.0

package/CHANGELOG.md

@@ -1,5 +1,68 @@
 # @atlaskit/profilecard
 
+## 16.0.0
+
+### Major Changes
+
+- [`47f58da5946`](https://bitbucket.org/atlassian/atlassian-frontend/commits/47f58da5946) - ED-13322, ED-13324, ED-13326, ED-13323, ED-13204: Upgrade and support react-intl@^5.18.1 including breaking API changes, types and tests in atlassian-frontend packages
+
+  What changed: Upgraded our react-intl support from ^2.6.0 to ^5.18.1. This means editor packages now rely on consumers installing ^5.18.1, otherwise editor usage of react-intl will mismatch with actual installed react-intl APIs.
+  Why change was made: As part of a coordinated upgrade effort across AF packages, as react-intl v2 is quite dated.
+  How consumer should update their code: Ensure react-intl ^5.18.1 is installed in consuming applications.
+
+  Upgrade guide: To consume atlassian-frontend packages that use react-intl5 setup a second provider for the new version, using an npm alias
+
+  ```js
+  "react-intl": "^2.6.0",
+  "react-intl-next": "npm:react-intl@^5.18.1",
+  ```
+
+  ```js
+  import { IntlProvider } from 'react-intl';
+  import { IntlProvider as IntlNextProvider } from 'react-intl-next';
+
+  return (
+    <IntlProvider
+      key={locale}
+      data-test-language={locale}
+      locale={locale}
+      defaultLocale={DEFAULT_LOCALE}
+      messages={messages}
+    >
+      <IntlNextProvider
+        key={locale}
+        data-test-language={locale}
+        locale={locale}
+        defaultLocale={DEFAULT_LOCALE}
+        messages={messages}
+      >
+        {children}
+      </IntlNextProvider>
+    </IntlProvider>
+  );
+  ```
+
+## 15.8.2
+
+### Patch Changes
+
+- Updated dependencies
+
+## 15.8.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 15.8.0
+
+### Minor Changes
+
+- [`1b9bc1e4b9a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1b9bc1e4b9a) - [ux] Instrumented profilecard with the new theming package, `@atlaskit/tokens`.
+
+  New tokens will be visible only in applications configured to use the new Tokens API (currently in alpha).
+  These changes are intended to be interoperable with the legacy theme implementation. Legacy dark mode users should expect no visual or breaking changes.
+
 ## 15.7.1
 
 ### Patch Changes

package/dist/cjs/client/UserProfileCardClient.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.modifyResponse = void 0;
+exports.modifyResponse = exports.default = void 0;
 
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 

package/dist/cjs/client/index.js

@@ -25,13 +25,13 @@ Object.defineProperty(exports, "UserProfileClient", {
     return _UserProfileCardClient.default;
   }
 });
+exports.default = void 0;
 Object.defineProperty(exports, "modifyResponse", {
   enumerable: true,
   get: function get() {
     return _UserProfileCardClient.modifyResponse;
   }
 });
-exports.default = void 0;
 
 var _CachingClient = _interopRequireDefault(require("./CachingClient"));
 

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

@@ -9,6 +9,9 @@ exports.ErrorIllustration = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _tokens = require("@atlaskit/tokens");
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 var ErrorIllustration = function ErrorIllustration() {
   return /*#__PURE__*/_react.default.createElement("svg", {
     width: "42",
@@ -20,7 +23,7 @@ var ErrorIllustration = function ErrorIllustration() {
     clipPath: "url(#clip0)"
   }, /*#__PURE__*/_react.default.createElement("path", {
     d: "M0.649902 0H163.93V212H0.649902V0Z",
-    fill: "white",
+    fill: (0, _tokens.token)('color.background.overlay', 'white'),
     fillOpacity: "0.01"
   }), /*#__PURE__*/_react.default.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/cjs/components/Team/TeamProfileCard.js

@@ -19,7 +19,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _reactIntl = require("react-intl");
+var _reactIntlNext = require("react-intl-next");
 
 var _avatarGroup = _interopRequireDefault(require("@atlaskit/avatar-group"));
 
@@ -103,7 +103,7 @@ var TeamMembers = function TeamMembers(_ref) {
 
     isMoreMembersOpen.current = !isOpen;
   }, [analytics, count]);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_TeamCard.MemberCount, null, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, (0, _extends2.default)({}, message, {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_TeamCard.MemberCount, null, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, message, {
     values: {
       count: count
     }
@@ -256,7 +256,7 @@ var TeamProfilecardContent = function TeamProfilecardContent(_ref5) {
       viewProfileLink = _ref5.viewProfileLink,
       viewProfileOnClick = _ref5.viewProfileOnClick;
   var allActions = [{
-    label: /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _messages.default.teamViewProfile),
+    label: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.default.teamViewProfile),
     link: viewProfileLink,
     callback: viewProfileOnClick,
     id: 'view-profile'
@@ -320,12 +320,12 @@ var ErrorMessage = function ErrorMessage(_ref6) {
   }, [analytics, clientFetchProfile]);
   return /*#__PURE__*/_react.default.createElement(_Error.ErrorWrapper, {
     "data-testid": "team-profilecard-error"
-  }, /*#__PURE__*/_react.default.createElement(_Error2.ErrorIllustration, null), /*#__PURE__*/_react.default.createElement(_Error.TeamErrorTitle, null, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _messages.default.teamErrorTitle)), /*#__PURE__*/_react.default.createElement(_Error.TeamErrorText, null, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _messages.default.teamErrorText)), clientFetchProfile && /*#__PURE__*/_react.default.createElement(_TeamCard.ActionButtons, null, /*#__PURE__*/_react.default.createElement(_TeamCard.WrappedButton, null, /*#__PURE__*/_react.default.createElement(_loadingButton.default, {
+  }, /*#__PURE__*/_react.default.createElement(_Error2.ErrorIllustration, null), /*#__PURE__*/_react.default.createElement(_Error.TeamErrorTitle, null, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.default.teamErrorTitle)), /*#__PURE__*/_react.default.createElement(_Error.TeamErrorText, null, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.default.teamErrorText)), clientFetchProfile && /*#__PURE__*/_react.default.createElement(_TeamCard.ActionButtons, null, /*#__PURE__*/_react.default.createElement(_TeamCard.WrappedButton, null, /*#__PURE__*/_react.default.createElement(_loadingButton.default, {
     testId: "client-fetch-profile-button",
     shouldFitContainer: true,
     onClick: retry,
     isLoading: isLoading
-  }, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _messages.default.teamErrorButton)))));
+  }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.default.teamErrorButton)))));
 };
 
 var TeamProfileCard = function TeamProfileCard(props) {

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

@@ -27,7 +27,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = _interopRequireDefault(require("react"));
 
-var _reactIntl = require("react-intl");
+var _reactIntlNext = require("react-intl-next");
 
 var _avatar = _interopRequireDefault(require("@atlaskit/avatar"));
 
@@ -39,6 +39,8 @@ var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
 
 var _colors = require("@atlaskit/theme/colors");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _analytics = require("../../internal/analytics");
 
 var _relativeDate = _interopRequireDefault(require("../../internal/relative-date"));
@@ -176,7 +178,7 @@ var Profilecard = /*#__PURE__*/function (_React$PureComponent) {
       }, this.getDisabledAccountName()), hasDisabledAccountLozenge && /*#__PURE__*/_react.default.createElement(_Card.LozengeWrapper, null, /*#__PURE__*/_react.default.createElement(_lozenge.default, {
         appearance: "default",
         isBold: true
-      }, status === 'inactive' && /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _messages.default.inactiveAccountMsg), status === 'closed' && /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _messages.default.closedAccountMsg))), /*#__PURE__*/_react.default.createElement(_Card.DisabledInfo, null, this.getDisabledAccountDesc()), status === 'inactive' && /*#__PURE__*/_react.default.createElement(_Icon.IconLabel, {
+      }, status === 'inactive' && /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.default.inactiveAccountMsg), status === 'closed' && /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.default.closedAccountMsg))), /*#__PURE__*/_react.default.createElement(_Card.DisabledInfo, null, this.getDisabledAccountDesc()), status === 'inactive' && /*#__PURE__*/_react.default.createElement(_Icon.IconLabel, {
         icon: "companyName"
       }, companyName));
     }
@@ -191,7 +193,7 @@ var Profilecard = /*#__PURE__*/function (_React$PureComponent) {
       if (status === 'inactive') {
         return fullName || nickname;
       } else if (status === 'closed') {
-        return nickname || /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _messages.default.disabledAccountDefaultName);
+        return nickname || /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.default.disabledAccountDefaultName);
       }
 
       return null;
@@ -214,16 +216,16 @@ var Profilecard = /*#__PURE__*/function (_React$PureComponent) {
       var secondSentence = null;
 
       if (relativeDateKey) {
-        secondSentence = /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage // @ts-ignore
+        secondSentence = /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage // @ts-ignore
         , _messages.default["".concat(status, "AccountDescMsgHasDate").concat(relativeDateKey)]);
       } else {
         secondSentence =
         /*#__PURE__*/
         // @ts-ignore
-        _react.default.createElement(_reactIntl.FormattedMessage, _messages.default["".concat(status, "AccountDescMsgNoDate")]);
+        _react.default.createElement(_reactIntlNext.FormattedMessage, _messages.default["".concat(status, "AccountDescMsgNoDate")]);
       }
 
-      return /*#__PURE__*/_react.default.createElement("p", null, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _messages.default.generalDescMsgForDisabledUser), ' ', secondSentence);
+      return /*#__PURE__*/_react.default.createElement("p", null, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.default.generalDescMsgForDisabledUser), ' ', secondSentence);
     }
   }, {
     key: "renderFullNameAndPublicName",
@@ -304,7 +306,7 @@ var Profilecard = /*#__PURE__*/function (_React$PureComponent) {
         }, /*#__PURE__*/_react.default.createElement(_Card.ProfileImage, null, /*#__PURE__*/_react.default.createElement(_avatar.default, {
           size: "xlarge",
           src: this.props.status !== 'closed' ? this.props.avatarUrl : undefined,
-          borderColor: _colors.N0
+          borderColor: (0, _tokens.token)('color.background.overlay', _colors.N0)
         })), /*#__PURE__*/_react.default.createElement(_Card.CardContent, null, this.renderCardDetails(), actions ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Card.ActionsFlexSpacer, null), actions) : null));
       }
 

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

@@ -23,16 +23,16 @@ Object.defineProperty(exports, "ProfileCard", {
     return _ProfileCard.default;
   }
 });
-Object.defineProperty(exports, "ProfileCardTrigger", {
+Object.defineProperty(exports, "ProfileCardResourced", {
   enumerable: true,
   get: function get() {
-    return _ProfileCardTrigger.default;
+    return _ProfileCardResourced.default;
   }
 });
-Object.defineProperty(exports, "ProfileCardResourced", {
+Object.defineProperty(exports, "ProfileCardTrigger", {
   enumerable: true,
   get: function get() {
-    return _ProfileCardResourced.default;
+    return _ProfileCardTrigger.default;
   }
 });
 exports.default = void 0;

package/dist/cjs/i18n/index.js

@@ -5,12 +5,6 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "en_ZZ", {
-  enumerable: true,
-  get: function get() {
-    return _en_ZZ.default;
-  }
-});
 Object.defineProperty(exports, "cs", {
   enumerable: true,
   get: function get() {
@@ -41,6 +35,12 @@ Object.defineProperty(exports, "en_GB", {
     return _en_GB.default;
   }
 });
+Object.defineProperty(exports, "en_ZZ", {
+  enumerable: true,
+  get: function get() {
+    return _en_ZZ.default;
+  }
+});
 Object.defineProperty(exports, "es", {
   enumerable: true,
   get: function get() {
@@ -186,19 +186,15 @@ Object.defineProperty(exports, "zh_TW", {
   }
 });
 
-var _en_ZZ = _interopRequireDefault(require("./en_ZZ"));
+var _zh = _interopRequireDefault(require("./zh"));
+
+var _zh_TW = _interopRequireDefault(require("./zh_TW"));
 
 var _cs = _interopRequireDefault(require("./cs"));
 
 var _da = _interopRequireDefault(require("./da"));
 
-var _de = _interopRequireDefault(require("./de"));
-
-var _en = _interopRequireDefault(require("./en"));
-
-var _en_GB = _interopRequireDefault(require("./en_GB"));
-
-var _es = _interopRequireDefault(require("./es"));
+var _nl = _interopRequireDefault(require("./nl"));
 
 var _et = _interopRequireDefault(require("./et"));
 
@@ -206,9 +202,9 @@ var _fi = _interopRequireDefault(require("./fi"));
 
 var _fr = _interopRequireDefault(require("./fr"));
 
-var _hu = _interopRequireDefault(require("./hu"));
+var _de = _interopRequireDefault(require("./de"));
 
-var _is = _interopRequireDefault(require("./is"));
+var _hu = _interopRequireDefault(require("./hu"));
 
 var _it = _interopRequireDefault(require("./it"));
 
@@ -218,20 +214,18 @@ var _ko = _interopRequireDefault(require("./ko"));
 
 var _nb = _interopRequireDefault(require("./nb"));
 
-var _nl = _interopRequireDefault(require("./nl"));
-
 var _pl = _interopRequireDefault(require("./pl"));
 
 var _pt_BR = _interopRequireDefault(require("./pt_BR"));
 
 var _pt_PT = _interopRequireDefault(require("./pt_PT"));
 
-var _ro = _interopRequireDefault(require("./ro"));
-
 var _ru = _interopRequireDefault(require("./ru"));
 
 var _sk = _interopRequireDefault(require("./sk"));
 
+var _es = _interopRequireDefault(require("./es"));
+
 var _sv = _interopRequireDefault(require("./sv"));
 
 var _th = _interopRequireDefault(require("./th"));
@@ -242,6 +236,12 @@ var _uk = _interopRequireDefault(require("./uk"));
 
 var _vi = _interopRequireDefault(require("./vi"));
 
-var _zh = _interopRequireDefault(require("./zh"));
+var _en_ZZ = _interopRequireDefault(require("./en_ZZ"));
+
+var _en = _interopRequireDefault(require("./en"));
+
+var _en_GB = _interopRequireDefault(require("./en_GB"));
+
+var _is = _interopRequireDefault(require("./is"));
 
-var _zh_TW = _interopRequireDefault(require("./zh_TW"));
+var _ro = _interopRequireDefault(require("./ro"));

package/dist/cjs/index.js

@@ -7,73 +7,73 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "ProfileClient", {
+Object.defineProperty(exports, "DELAY_MS_HIDE", {
   enumerable: true,
   get: function get() {
-    return _ProfileCardClient.default;
+    return _config.DELAY_MS_HIDE;
   }
 });
-Object.defineProperty(exports, "TeamProfileClient", {
+Object.defineProperty(exports, "DELAY_MS_SHOW", {
   enumerable: true,
   get: function get() {
-    return _TeamProfileCardClient.default;
+    return _config.DELAY_MS_SHOW;
   }
 });
-Object.defineProperty(exports, "UserProfileClient", {
+Object.defineProperty(exports, "ProfileCard", {
   enumerable: true,
   get: function get() {
-    return _UserProfileCardClient.default;
+    return _ProfileCard.default;
   }
 });
-Object.defineProperty(exports, "modifyResponse", {
+Object.defineProperty(exports, "ProfileCardTrigger", {
   enumerable: true,
   get: function get() {
-    return _UserProfileCardClient.modifyResponse;
+    return _ProfileCardTrigger.default;
   }
 });
-Object.defineProperty(exports, "TeamProfileCardTrigger", {
+Object.defineProperty(exports, "ProfileClient", {
   enumerable: true,
   get: function get() {
-    return _TeamProfileCardTrigger.default;
+    return _ProfileCardClient.default;
   }
 });
-Object.defineProperty(exports, "ProfileCard", {
+Object.defineProperty(exports, "TeamProfileCard", {
   enumerable: true,
   get: function get() {
-    return _ProfileCard.default;
+    return _TeamProfileCard.default;
   }
 });
-Object.defineProperty(exports, "ProfileCardTrigger", {
+Object.defineProperty(exports, "TeamProfileCardTrigger", {
   enumerable: true,
   get: function get() {
-    return _ProfileCardTrigger.default;
+    return _TeamProfileCardTrigger.default;
   }
 });
-Object.defineProperty(exports, "DELAY_MS_HIDE", {
+Object.defineProperty(exports, "TeamProfileClient", {
   enumerable: true,
   get: function get() {
-    return _config.DELAY_MS_HIDE;
+    return _TeamProfileCardClient.default;
   }
 });
-Object.defineProperty(exports, "DELAY_MS_SHOW", {
+Object.defineProperty(exports, "UserProfileClient", {
   enumerable: true,
   get: function get() {
-    return _config.DELAY_MS_SHOW;
+    return _UserProfileCardClient.default;
   }
 });
-Object.defineProperty(exports, "withOuterListeners", {
+exports.default = void 0;
+Object.defineProperty(exports, "modifyResponse", {
   enumerable: true,
   get: function get() {
-    return _withOuterListeners.default;
+    return _UserProfileCardClient.modifyResponse;
   }
 });
-Object.defineProperty(exports, "TeamProfileCard", {
+Object.defineProperty(exports, "withOuterListeners", {
   enumerable: true,
   get: function get() {
-    return _TeamProfileCard.default;
+    return _withOuterListeners.default;
   }
 });
-exports.default = void 0;
 
 var _ProfileCardClient = _interopRequireDefault(require("./client/ProfileCardClient"));
 

package/dist/cjs/internal/relative-date.js

@@ -5,8 +5,8 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isValidDate = isValidDate;
 exports.default = getRelativeDateKey;
+exports.isValidDate = isValidDate;
 
 var _differenceInMonths = _interopRequireDefault(require("date-fns/differenceInMonths"));
 

package/dist/cjs/messages.js

@@ -5,9 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _reactIntl = require("react-intl");
+var _reactIntlNext = require("react-intl-next");
 
-var messages = (0, _reactIntl.defineMessages)({
+var messages = (0, _reactIntlNext.defineMessages)({
   inactiveAccountMsg: {
     id: 'pt.profile-card.inactive.account',
     defaultMessage: 'Account deactivated',

package/dist/cjs/mocks/simple-mock-clients.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.simpleProfileClient = exports.simpleMockTeamClient = exports.simpleMockUserClient = void 0;
+exports.simpleProfileClient = exports.simpleMockUserClient = exports.simpleMockTeamClient = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 

package/dist/cjs/mocks/util.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getTimeString = exports.getWeekday = exports.random = void 0;
+exports.random = exports.getWeekday = exports.getTimeString = void 0;
 
 function padMinutes(minutes) {
   return minutes < 10 ? "0".concat(minutes) : String(minutes);

package/dist/cjs/styled/Card.js

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.DetailsLabelText = exports.DetailsLabelIcon = exports.DetailsLabel = exports.CardContainer = exports.SpinnerContainer = exports.AppTitleLabel = exports.JobTitleLabel = exports.CustomLozengeContainer = exports.LozengeWrapper = exports.FullNameLabel = exports.DisabledInfo = exports.DetailsGroup = exports.CardContent = exports.ActionButtonGroup = exports.ActionsFlexSpacer = exports.ProfileImage = exports.CardWrapper = exports.CardContainerEmpty = void 0;
+exports.SpinnerContainer = exports.ProfileImage = exports.LozengeWrapper = exports.JobTitleLabel = exports.FullNameLabel = exports.DisabledInfo = exports.DetailsLabelText = exports.DetailsLabelIcon = exports.DetailsLabel = exports.DetailsGroup = exports.CustomLozengeContainer = exports.CardWrapper = exports.CardContent = exports.CardContainerEmpty = exports.CardContainer = exports.AppTitleLabel = exports.ActionsFlexSpacer = exports.ActionButtonGroup = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
@@ -15,8 +15,6 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _constants = require("@atlaskit/theme/constants");
 
-var _elevation = require("@atlaskit/theme/elevation");
-
 var _constants2 = require("../styled/constants");
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19;
@@ -96,7 +94,7 @@ var CardContainer = _styledComponents.default.div(_templateObject15 || (_templat
     return '';
   }
 
-  return (0, _styledComponents.css)(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["\n      ", "\n      border-radius: ", "px;\n    "])), _elevation.e200, _constants.borderRadius);
+  return (0, _styledComponents.css)(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["\n      box-shadow: ", ";\n      border-radius: ", "px;\n    "])), _constants2.boxShadow, _constants.borderRadius);
 });
 
 exports.CardContainer = CardContainer;

package/dist/cjs/styled/Error.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TeamErrorText = exports.TeamErrorTitle = exports.ErrorText = exports.ErrorTitle = exports.ErrorWrapper = void 0;
+exports.TeamErrorTitle = exports.TeamErrorText = exports.ErrorWrapper = exports.ErrorTitle = exports.ErrorText = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
@@ -17,6 +17,8 @@ var _constants = require("@atlaskit/theme/constants");
 
 var _typography = require("@atlaskit/theme/typography");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _constants2 = require("../styled/constants");
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
@@ -37,6 +39,6 @@ var TeamErrorTitle = _styledComponents.default.p(_templateObject4 || (_templateO
 
 exports.TeamErrorTitle = TeamErrorTitle;
 
-var TeamErrorText = _styledComponents.default.p(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  margin-top: ", "px;\n"])), _colors.N200, (0, _constants.gridSize)() * 1);
+var TeamErrorText = _styledComponents.default.p(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  margin-top: ", "px;\n"])), (0, _tokens.token)('color.text.lowEmphasis', _colors.N200), (0, _constants.gridSize)() * 1);
 
 exports.TeamErrorText = TeamErrorText;

package/dist/cjs/styled/TeamCard.js

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.LoadingWrapper = exports.MoreButton = exports.WrappedButton = exports.ActionButtons = exports.Description = exports.DescriptionWrapper = exports.AvatarSection = exports.MemberCount = exports.TeamName = exports.CardContent = exports.CardHeader = exports.CardWrapper = exports.CardTriggerWrapper = void 0;
+exports.WrappedButton = exports.TeamName = exports.MoreButton = exports.MemberCount = exports.LoadingWrapper = exports.DescriptionWrapper = exports.Description = exports.CardWrapper = exports.CardTriggerWrapper = exports.CardHeader = exports.CardContent = exports.AvatarSection = exports.ActionButtons = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
@@ -19,6 +19,8 @@ var _constants = require("@atlaskit/theme/constants");
 
 var _typography = require("@atlaskit/theme/typography");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _constants2 = require("../styled/constants");
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;
@@ -34,7 +36,7 @@ exports.CardTriggerWrapper = CardTriggerWrapper;
 var CardWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\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"])), _constants2.bgColor, _constants.borderRadius, (0, _constants.gridSize)() * 40);
 
 exports.CardWrapper = CardWrapper;
-var loadingImage = (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n"])), _colors.N20);
+var loadingImage = (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n"])), (0, _tokens.token)('color.background.subtleNeutral.resting', _colors.N20));
 var defaultImage = (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n"])), _constants2.teamHeaderBgColor);
 
 var CardHeader = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n  background-repeat: no-repeat;\n  background-size: cover;\n  box-sizing: content-box;\n  height: ", "px;\n"])), function (props) {
@@ -59,7 +61,7 @@ var TeamName = _styledComponents.default.h6(_templateObject8 || (_templateObject
 
 exports.TeamName = TeamName;
 
-var MemberCount = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  margin-top: ", "px;\n"])), _colors.N200, (0, _constants.gridSize)() * 0.5);
+var MemberCount = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  margin-top: ", "px;\n"])), (0, _tokens.token)('color.text.lowEmphasis', _colors.N200), (0, _constants.gridSize)() * 0.5);
 
 exports.MemberCount = MemberCount;
 
@@ -75,7 +77,7 @@ var Description = _styledComponents.default.span(_templateObject12 || (_template
 
 exports.Description = Description;
 
-var ActionButtons = _styledComponents.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\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"])), (0, _constants.gridSize)() * 3, (0, _constants.gridSize)() * 3, (0, _constants.gridSize)());
+var ActionButtons = _styledComponents.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  width: calc(100% + 8px);\n  display: flex;\n  justify-content: space-between;\n  margin: ", "px -", "px 0 -", "px;\n  background-color: ", ";\n"])), (0, _constants.gridSize)() * 3, (0, _constants.gridSize)() * 3, (0, _constants.gridSize)(), (0, _tokens.token)('color.background.overlay', 'hsla(0, 100%, 100%, 0.2)'));
 
 exports.ActionButtons = ActionButtons;