@atlaskit/profilecard 19.2.0 → 19.2.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/profilecard
 
+## 19.2.2
+
+### Patch Changes
+
+- [`c3d16d3164f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c3d16d3164f) - Migrated use of `gridSize` to space tokens where possible. There is no expected visual or behaviour change.
+
+## 19.2.1
+
+### Patch Changes
+
+- [`052672d7eca`](https://bitbucket.org/atlassian/atlassian-frontend/commits/052672d7eca) - Added errorSource to analytics events, added tests for fail events
+
 ## 19.2.0
 
 ### Minor Changes

package/dist/cjs/client/errorUtils.js

@@ -18,6 +18,7 @@ var getErrorAttributes = function getErrorAttributes(error) {
     errorMessage: error === null || error === void 0 ? void 0 : error.message,
     errorStatus: error === null || error === void 0 ? void 0 : error.code,
     errorReason: (error === null || error === void 0 ? void 0 : error.reason) || 'default',
+    errorSource: error === null || error === void 0 ? void 0 : error.source,
     isSLOFailure: !isIgnoredError(error),
     traceId: (_error$traceId = error === null || error === void 0 ? void 0 : error.traceId) !== null && _error$traceId !== void 0 ? _error$traceId : undefined
   };

package/dist/cjs/client/graphqlUtils.js

@@ -46,7 +46,7 @@ function graphqlQuery(serviceUrl, query) {
       return Promise.reject({
         reason: ((_json$errors$ = json.errors[0]) === null || _json$errors$ === void 0 ? void 0 : _json$errors$.category) || ((_json$errors$2 = json.errors[0]) === null || _json$errors$2 === void 0 ? void 0 : (_json$errors$2$extens = _json$errors$2.extensions) === null || _json$errors$2$extens === void 0 ? void 0 : _json$errors$2$extens.classification) || 'default',
         code: (_json$errors$3 = json.errors[0]) === null || _json$errors$3 === void 0 ? void 0 : (_json$errors$3$extens = _json$errors$3.extensions) === null || _json$errors$3$extens === void 0 ? void 0 : _json$errors$3$extens.statusCode,
-        errorSource: (_json$errors$4 = json.errors[0]) === null || _json$errors$4 === void 0 ? void 0 : (_json$errors$4$extens = _json$errors$4.extensions) === null || _json$errors$4$extens === void 0 ? void 0 : _json$errors$4$extens.errorSource,
+        source: (_json$errors$4 = json.errors[0]) === null || _json$errors$4 === void 0 ? void 0 : (_json$errors$4$extens = _json$errors$4.extensions) === null || _json$errors$4$extens === void 0 ? void 0 : _json$errors$4$extens.errorSource,
         message: json.errors[0].message,
         traceId: (_json$extensions = json.extensions) === null || _json$extensions === void 0 ? void 0 : (_json$extensions$gate = _json$extensions.gateway) === null || _json$extensions$gate === void 0 ? void 0 : _json$extensions$gate.request_id
       });

package/dist/cjs/mocks/mock-team-client.js

@@ -24,20 +24,24 @@ function getMockTeamClient(data) {
     (0, _createClass2.default)(MockTeamClient, [{
       key: "makeRequest",
       value: function makeRequest(teamId) {
+        var _data$error, _data$error2, _data$error3, _data$error4, _data$error5;
+        var errorResponse = {
+          reason: (_data$error = data.error) === null || _data$error === void 0 ? void 0 : _data$error.reason,
+          code: (_data$error2 = data.error) === null || _data$error2 === void 0 ? void 0 : _data$error2.code,
+          source: (_data$error3 = data.error) === null || _data$error3 === void 0 ? void 0 : _data$error3.source,
+          message: (_data$error4 = data.error) === null || _data$error4 === void 0 ? void 0 : _data$error4.message,
+          traceId: (_data$error5 = data.error) === null || _data$error5 === void 0 ? void 0 : _data$error5.traceId
+        };
         if (!data.timeout) {
           if (data.error && Math.random() < data.errorRate) {
-            return Promise.reject({
-              reason: data.error
-            });
+            return Promise.reject(errorResponse);
           }
           return Promise.resolve(data.team);
         }
         return new Promise(function (resolve, reject) {
           setTimeout(function () {
             if (data.error && Math.random() < data.errorRate) {
-              reject({
-                reason: data.error
-              });
+              reject(errorResponse);
             }
             return resolve(data.team);
           }, data.timeout);

package/dist/cjs/styled/Card.js

@@ -21,7 +21,7 @@ var CardContainerEmpty = _styled.default.div(_templateObject || (_templateObject
 exports.CardContainerEmpty = CardContainerEmpty;
 var CardWrapper = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  border-radius: ", "px;\n  width: ", "px;\n"])), _constants2.bgColor, _constants.borderRadius, (0, _constants.gridSize)() * 45);
 exports.CardWrapper = CardWrapper;
-var ProfileImage = _styled.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  top: ", "px;\n  left: ", "px;\n"])), (0, _constants.gridSize)() * 3, (0, _constants.gridSize)() * 3);
+var ProfileImage = _styled.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  top: ", ";\n  left: ", ";\n"])), "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)");
 exports.ProfileImage = ProfileImage;
 var ActionsFlexSpacer = _styled.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  flex: 1 0 auto;\n"])));
 exports.ActionsFlexSpacer = ActionsFlexSpacer;
@@ -36,7 +36,7 @@ var KudosBlobAnimation = function KudosBlobAnimation(props) {
 exports.KudosBlobAnimation = KudosBlobAnimation;
 var AnimatedKudosButton = _styled.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: ", "px;\n\n  /* Need babel-plugin-emotion to use component selector */\n  /* Previously with styled-components: &:hover {KudosBlobAnimation} { */\n  &:hover .kudos-blob-animation {\n    display: block;\n  }\n\n  button,\n  a {\n    clip-path: inset(0px 0px 0px 0px round ", "px);\n  }\n  overflow: hidden;\n"])), _constants.gridSize, _constants.borderRadius);
 exports.AnimatedKudosButton = AnimatedKudosButton;
-var ActionButtonGroup = _styled.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  user-select: none;\n  margin: ", "px 0 0 0;\n  text-align: right;\n  display: flex;\n  justify-content: flex-end;\n\n  button,\n  a,\n  span {\n    margin-left: ", "px;\n\n    &:first-child {\n      margin-left: 0;\n    }\n  }\n"])), 2 * (0, _constants.gridSize)(), _constants.gridSize);
+var ActionButtonGroup = _styled.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  user-select: none;\n  margin: ", " 0 0 0;\n  text-align: right;\n  display: flex;\n  justify-content: flex-end;\n\n  button,\n  a,\n  span {\n    margin-left: ", "px;\n\n    &:first-child {\n      margin-left: 0;\n    }\n  }\n"])), "var(--ds-space-200, 16px)", _constants.gridSize);
 exports.ActionButtonGroup = ActionButtonGroup;
 var OverflowActionButtonsWrapper = _styled.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-block;\n  width: 32px;\n  height: 32px;\n  margin-left: ", "px;\n"])), _constants.gridSize);
 exports.OverflowActionButtonsWrapper = OverflowActionButtonsWrapper;
@@ -44,7 +44,7 @@ var CardContent = _styled.default.div(_templateObject10 || (_templateObject10 =
 exports.CardContent = CardContent;
 var DetailsGroup = _styled.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  margin-left: ", "px;\n  width: ", "px;\n"])), (0, _constants.gridSize)() * 14.5, (0, _constants.gridSize)() * 24.5);
 exports.DetailsGroup = DetailsGroup;
-var DisabledInfo = _styled.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: ", "px;\n  color: ", ";\n  margin: ", "px 0 0 0;\n  line-height: ", "px;\n"])), _constants.fontSizeSmall, _constants2.labelTextColor, (0, _constants.gridSize)() * 1.5, (0, _constants.gridSize)() * 2);
+var DisabledInfo = _styled.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: ", "px;\n  color: ", ";\n  margin: ", " 0 0 0;\n  line-height: ", ";\n"])), _constants.fontSizeSmall, _constants2.labelTextColor, "var(--ds-space-150, 12px)", "var(--ds-font-lineHeight-100, 16px)");
 exports.DisabledInfo = DisabledInfo;
 var FullNameLabel = _styled.default.span(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n\n  font-size: 18px;\n  color: ", ";\n  margin: ", ";\n  line-height: ", "em;\n"])), function (props) {
   return props.isDisabledAccount ? _constants2.headerTextColorInactive : _constants2.headerTextColor;
@@ -52,29 +52,29 @@ var FullNameLabel = _styled.default.span(_templateObject13 || (_templateObject13
   return getFullNameMargin(props);
 }, 24 / 18);
 exports.FullNameLabel = FullNameLabel;
-var LozengeWrapper = _styled.default.div(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: ", "px;\n  text-transform: uppercase;\n  display: block;\n"])), (0, _constants.gridSize)() * 2);
+var LozengeWrapper = _styled.default.div(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: ", ";\n  text-transform: uppercase;\n  display: block;\n"])), "var(--ds-space-200, 16px)");
 exports.LozengeWrapper = LozengeWrapper;
-var CustomLozengeContainer = (0, _styled.default)(LozengeWrapper)(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  margin-top: ", "px;\n  > * {\n    margin-top: ", "px;\n    &:not(:last-child) {\n      margin-right: ", "px;\n    }\n  }\n"])), (0, _constants.gridSize)() * 1.5, (0, _constants.gridSize)() / 2, (0, _constants.gridSize)() / 2);
+var CustomLozengeContainer = (0, _styled.default)(LozengeWrapper)(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  margin-top: ", ";\n  > * {\n    margin-top: ", ";\n    &:not(:last-child) {\n      margin-right: ", ";\n    }\n  }\n"])), "var(--ds-space-150, 12px)", "var(--ds-space-050, 4px)", "var(--ds-space-050, 4px)");
 exports.CustomLozengeContainer = CustomLozengeContainer;
-var JobTitleLabel = _styled.default.span(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n\n  font-size: 14px;\n  color: ", ";\n  margin: 0 0 ", "px 0;\n  line-height: ", "em;\n"])), _constants2.headerTextColor, (0, _constants.gridSize)() * 1.5, 24 / 14);
+var JobTitleLabel = _styled.default.span(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n\n  font-size: 14px;\n  color: ", ";\n  margin: 0 0 ", " 0;\n  line-height: ", "em;\n"])), _constants2.headerTextColor, "var(--ds-space-150, 12px)", 24 / 14);
 exports.JobTitleLabel = JobTitleLabel;
-var AppTitleLabel = _styled.default.span(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  color: ", ";\n  border-radius: ", ";\n  padding: 0 6px;\n  width: fit-content;\n  font-weight: bold;\n  text-transform: uppercase;\n\n  font-size: 12px;\n  margin: 4px 0 ", "px 0;\n  line-height: ", "em;\n"])), _constants2.appLabelBgColor, _constants2.appLabelTextColor, (0, _constants.borderRadius)(), (0, _constants.gridSize)() * 1.5, 24 / 14);
+var AppTitleLabel = _styled.default.span(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  color: ", ";\n  border-radius: ", ";\n  padding: 0 6px;\n  width: fit-content;\n  font-weight: bold;\n  text-transform: uppercase;\n\n  font-size: 12px;\n  margin: 4px 0 ", " 0;\n  line-height: ", "em;\n"])), _constants2.appLabelBgColor, _constants2.appLabelTextColor, (0, _constants.borderRadius)(), "var(--ds-space-150, 12px)", 24 / 14);
 exports.AppTitleLabel = AppTitleLabel;
 var SpinnerContainer = _styled.default.div(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2.default)(["\n  align-items: center;\n  display: flex;\n  height: ", "px;\n  justify-content: center;\n  position: relative;\n"])), (0, _constants.gridSize)() * 12);
 exports.SpinnerContainer = SpinnerContainer;
-var CardContainer = _styled.default.div(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  background-image: linear-gradient(\n    to bottom,\n    ", "\n      0%,\n    ", "\n      100%\n  );\n  background-repeat: no-repeat;\n  background-size: 100% ", "px;\n  box-sizing: content-box;\n  padding: ", "px;\n  box-shadow: ", ";\n  border-radius: ", ";\n\n  overflow: hidden;\n"])), function (props) {
+var CardContainer = _styled.default.div(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  background-image: linear-gradient(\n    to bottom,\n    ", "\n      0%,\n    ", "\n      100%\n  );\n  background-repeat: no-repeat;\n  background-size: 100% ", "px;\n  box-sizing: content-box;\n  padding: ", ";\n  box-shadow: ", ";\n  border-radius: ", ";\n\n  overflow: hidden;\n"])), function (props) {
   return props.isDisabledUser ? _constants2.headerBgColorDisabledUser : _constants2.headerBgColor;
 }, function (props) {
   return props.isDisabledUser ? _constants2.headerBgColorDisabledUser : _constants2.headerBgColor;
-}, (0, _constants.gridSize)() * 12, (0, _constants.gridSize)() * 3, function (props) {
+}, (0, _constants.gridSize)() * 12, "var(--ds-space-300, 24px)", function (props) {
   return props.withoutElevation ? '' : "".concat("var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A), ")"));
 }, function (props) {
   return props.withoutElevation ? '' : "".concat((0, _constants.borderRadius)(), "px");
 });
 exports.CardContainer = CardContainer;
-var DetailsLabel = _styled.default.div(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2.default)(["\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"])), (0, _constants.gridSize)() * 3, (0, _constants.gridSize)() * 1.5, (0, _constants.gridSize)() * 2, (0, _constants.gridSize)() / 4);
+var DetailsLabel = _styled.default.div(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  line-height: ", ";\n  font-size: ", "px;\n  margin: ", " 0 0 0;\n  white-space: nowrap;\n\n  & + & {\n    margin-top: ", ";\n  }\n"])), "var(--ds-font-lineHeight-300, 24px)", (0, _constants.gridSize)() * 1.5, "var(--ds-space-200, 16px)", "var(--ds-space-025, 2px)");
 exports.DetailsLabel = DetailsLabel;
-var DetailsLabelIcon = _styled.default.div(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2.default)(["\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"])), _constants2.labelIconColor, (0, _constants.gridSize)() * 2, (0, _constants.gridSize)() * 2, (0, _constants.gridSize)() / 2);
+var DetailsLabelIcon = _styled.default.div(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-shrink: 0;\n  color: ", ";\n  width: ", ";\n  height: ", ";\n  padding: ", ";\n  vertical-align: top;\n\n  svg {\n    width: 100%;\n    height: 100%;\n  }\n"])), _constants2.labelIconColor, "var(--ds-space-200, 16px)", "var(--ds-space-200, 16px)", "var(--ds-space-050, 4px)");
 exports.DetailsLabelIcon = DetailsLabelIcon;
-var DetailsLabelText = _styled.default.span(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteral2.default)(["\n  overflow: hidden;\n  text-overflow: ellipsis;\n  color: ", ";\n  padding-left: ", "px;\n"])), _constants2.labelTextColor, (0, _constants.gridSize)() / 2);
+var DetailsLabelText = _styled.default.span(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteral2.default)(["\n  overflow: hidden;\n  text-overflow: ellipsis;\n  color: ", ";\n  padding-left: ", ";\n"])), _constants2.labelTextColor, "var(--ds-space-050, 4px)");
 exports.DetailsLabelText = DetailsLabelText;

package/dist/cjs/styled/Error.js

@@ -12,13 +12,13 @@ var _constants = require("@atlaskit/theme/constants");
 var _typography = require("@atlaskit/theme/typography");
 var _constants2 = require("./constants");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-var ErrorWrapper = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  text-align: center;\n  padding: ", "px;\n  color: ", ";\n"])), (0, _constants.gridSize)() * 3, _constants2.errorIconColor);
+var ErrorWrapper = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  text-align: center;\n  padding: ", ";\n  color: ", ";\n"])), "var(--ds-space-300, 24px)", _constants2.errorIconColor);
 exports.ErrorWrapper = ErrorWrapper;
-var ErrorTitle = _styled.default.p(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  line-height: ", "px;\n  margin: ", "px 0;\n"])), _constants2.errorTitleColor, (0, _constants.gridSize)() * 3, _constants.gridSize);
+var ErrorTitle = _styled.default.p(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  line-height: ", "px;\n  margin: ", " 0;\n"])), _constants2.errorTitleColor, (0, _constants.gridSize)() * 3, "var(--ds-space-100, 8px)");
 exports.ErrorTitle = ErrorTitle;
 var ErrorText = _styled.default.span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n"])), _constants2.errorTextColor);
 exports.ErrorText = ErrorText;
 var TeamErrorTitle = _styled.default.p(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n"])), _typography.h400);
 exports.TeamErrorTitle = TeamErrorTitle;
-var TeamErrorText = _styled.default.p(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  margin-top: ", "px;\n"])), "var(--ds-text-subtlest, ".concat(_colors.N200, ")"), (0, _constants.gridSize)() * 1);
+var TeamErrorText = _styled.default.p(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  margin-top: ", ";\n"])), "var(--ds-text-subtlest, ".concat(_colors.N200, ")"), "var(--ds-space-100, 8px)");
 exports.TeamErrorText = TeamErrorText;

package/dist/cjs/styled/ReportingLines.js

@@ -10,13 +10,13 @@ var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _constants = require("@atlaskit/theme/constants");
 var _constants2 = require("./constants");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-var ReportingLinesSection = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  // Minor left margin to align better with existing icon fields\n  margin-left: ", "px;\n  margin-top: ", "px;\n"])), (0, _constants.gridSize)() / 2, (0, _constants.gridSize)());
+var ReportingLinesSection = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  // Minor left margin to align better with existing icon fields\n  margin-left: ", ";\n  margin-top: ", ";\n"])), "var(--ds-space-050, 4px)", "var(--ds-space-100, 8px)");
 exports.ReportingLinesSection = ReportingLinesSection;
-var ReportingLinesHeading = _styled.default.h5(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  font-size: ", "px;\n  font-weight: 600;\n  margin-bottom: ", "px;\n"])), _constants2.appLabelTextColor, (0, _constants.gridSize)() * 1.5, (0, _constants.gridSize)());
+var ReportingLinesHeading = _styled.default.h5(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  font-size: ", "px;\n  font-weight: 600;\n  margin-bottom: ", ";\n"])), _constants2.appLabelTextColor, (0, _constants.gridSize)() * 1.5, "var(--ds-space-100, 8px)");
 exports.ReportingLinesHeading = ReportingLinesHeading;
-var ManagerSection = _styled.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  margin: ", "px ", "px;\n"])), (0, _constants.gridSize)() / 2, (0, _constants.gridSize)() / 2);
+var ManagerSection = _styled.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  margin: ", " ", ";\n"])), "var(--ds-space-050, 4px)", "var(--ds-space-050, 4px)");
 exports.ManagerSection = ManagerSection;
-var ManagerName = _styled.default.span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: ", "px;\n  margin-left: ", "px;\n"])), (0, _constants.gridSize)() * 1.5, (0, _constants.gridSize)());
+var ManagerName = _styled.default.span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: ", "px;\n  margin-left: ", ";\n"])), (0, _constants.gridSize)() * 1.5, "var(--ds-space-100, 8px)");
 exports.ManagerName = ManagerName;
-var OffsetWrapper = _styled.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: ", "px;\n  // Offset left margin so the avatar aligns with the heading\n  margin-left: -", "px;\n"])), (0, _constants.gridSize)() / 2, (0, _constants.gridSize)() / 2);
+var OffsetWrapper = _styled.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: ", ";\n  // Offset left margin so the avatar aligns with the heading\n  margin-left: calc(-1 * ", ");\n"])), "var(--ds-space-050, 4px)", "var(--ds-space-050, 4px)");
 exports.OffsetWrapper = OffsetWrapper;

package/dist/cjs/styled/TeamCard.js

@@ -24,27 +24,27 @@ var CardHeader = _styled.default.div(_templateObject4 || (_templateObject4 = (0,
   return props.image ? "url(".concat(props.image, ")") : '';
 }, (0, _constants.gridSize)() * 16);
 exports.CardHeader = CardHeader;
-var CardContent = _styled.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  padding: ", "px;\n  min-height: ", "px;\n"])), (0, _constants.gridSize)() * 3, (0, _constants.gridSize)() * 13);
+var CardContent = _styled.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  padding: ", ";\n  min-height: ", "px;\n"])), "var(--ds-space-300, 24px)", (0, _constants.gridSize)() * 13);
 exports.CardContent = CardContent;
 var TeamName = _styled.default.h6(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\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"])), _typography.h600);
 exports.TeamName = TeamName;
-var MemberCount = _styled.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  margin-top: ", "px;\n"])), "var(--ds-text-subtlest, ".concat(_colors.N200, ")"), (0, _constants.gridSize)() * 0.5);
+var MemberCount = _styled.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  margin-top: ", ";\n"])), "var(--ds-text-subtlest, ".concat(_colors.N200, ")"), "var(--ds-space-050, 4px)");
 exports.MemberCount = MemberCount;
-var AvatarSection = _styled.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: ", "px;\n  margin-left: -2px;\n"])), (0, _constants.gridSize)() * 2);
+var AvatarSection = _styled.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: ", ";\n  margin-left: -2px;\n"])), "var(--ds-space-200, 16px)");
 exports.AvatarSection = AvatarSection;
-var DescriptionWrapper = _styled.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: ", "px;\n  align-items: center;\n  display: flex;\n"])), (0, _constants.gridSize)() * 2);
+var DescriptionWrapper = _styled.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: ", ";\n  align-items: center;\n  display: flex;\n"])), "var(--ds-space-200, 16px)");
 exports.DescriptionWrapper = DescriptionWrapper;
 var Description = _styled.default.span(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  overflow: hidden;\n  max-height: 60px;\n  display: -webkit-box;\n  -webkit-line-clamp: 3;\n  -webkit-box-orient: vertical;\n"])));
 exports.Description = Description;
-var ActionButtons = _styled.default.div(_templateObject11 || (_templateObject11 = (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)(), "var(--ds-surface-overlay, hsla(0, 100%, 100%, 0.2))");
+var ActionButtons = _styled.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  width: calc(100% + 8px);\n  display: flex;\n  justify-content: space-between;\n  margin: ", " calc(-1 * ", ")\n    0 calc(-1 * ", ");\n  background-color: ", ";\n"])), "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)", "var(--ds-space-100, 8px)", "var(--ds-surface-overlay, hsla(0, 100%, 100%, 0.2))");
 exports.ActionButtons = ActionButtons;
 var WrappedButton = _styled.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  flex-basis: 0;\n  flex-grow: 1;\n  margin-left: 8px;\n"])));
 exports.WrappedButton = WrappedButton;
 var MoreButton = _styled.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: 8px;\n"])));
 exports.MoreButton = MoreButton;
-var LoadingWrapper = _styled.default.div(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n  text-align: center;\n  margin-top: ", "px;\n"])), (0, _constants.gridSize)() * 5);
+var LoadingWrapper = _styled.default.div(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n  text-align: center;\n  margin-top: ", ";\n"])), "var(--ds-space-500, 40px)");
 exports.LoadingWrapper = LoadingWrapper;
-var AccessLockSVGWrapper = _styled.default.div(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n  margin-bottom: ", "px;\n"])), (0, _constants.gridSize)() * 3);
+var AccessLockSVGWrapper = _styled.default.div(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n  margin-bottom: ", ";\n"])), "var(--ds-space-300, 24px)");
 
 // export const LoadingTeamName = styled.div`
 //   width: 175px;

package/dist/cjs/util/analytics.js

@@ -44,7 +44,7 @@ var createEvent = function createEvent(eventType, action, actionSubject, actionS
     actionSubjectId: actionSubjectId,
     attributes: _objectSpread(_objectSpread({
       packageName: "@atlaskit/profilecard",
-      packageVersion: "19.2.0"
+      packageVersion: "19.2.2"
     }, attributes), {}, {
       firedAt: Math.round((0, _performance.getPageTime)())
     })

package/dist/cjs/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/profilecard",
-	"version": "19.2.0"
+	"version": "19.2.2"
 }

package/dist/es2019/client/errorUtils.js

@@ -12,6 +12,7 @@ export const getErrorAttributes = error => {
     errorMessage: error === null || error === void 0 ? void 0 : error.message,
     errorStatus: error === null || error === void 0 ? void 0 : error.code,
     errorReason: (error === null || error === void 0 ? void 0 : error.reason) || 'default',
+    errorSource: error === null || error === void 0 ? void 0 : error.source,
     isSLOFailure: !isIgnoredError(error),
     traceId: (_error$traceId = error === null || error === void 0 ? void 0 : error.traceId) !== null && _error$traceId !== void 0 ? _error$traceId : undefined
   };

package/dist/es2019/client/graphqlUtils.js

@@ -35,7 +35,7 @@ export function graphqlQuery(serviceUrl, query, processHeaders = id) {
       return Promise.reject({
         reason: ((_json$errors$ = json.errors[0]) === null || _json$errors$ === void 0 ? void 0 : _json$errors$.category) || ((_json$errors$2 = json.errors[0]) === null || _json$errors$2 === void 0 ? void 0 : (_json$errors$2$extens = _json$errors$2.extensions) === null || _json$errors$2$extens === void 0 ? void 0 : _json$errors$2$extens.classification) || 'default',
         code: (_json$errors$3 = json.errors[0]) === null || _json$errors$3 === void 0 ? void 0 : (_json$errors$3$extens = _json$errors$3.extensions) === null || _json$errors$3$extens === void 0 ? void 0 : _json$errors$3$extens.statusCode,
-        errorSource: (_json$errors$4 = json.errors[0]) === null || _json$errors$4 === void 0 ? void 0 : (_json$errors$4$extens = _json$errors$4.extensions) === null || _json$errors$4$extens === void 0 ? void 0 : _json$errors$4$extens.errorSource,
+        source: (_json$errors$4 = json.errors[0]) === null || _json$errors$4 === void 0 ? void 0 : (_json$errors$4$extens = _json$errors$4.extensions) === null || _json$errors$4$extens === void 0 ? void 0 : _json$errors$4$extens.errorSource,
         message: json.errors[0].message,
         traceId: (_json$extensions = json.extensions) === null || _json$extensions === void 0 ? void 0 : (_json$extensions$gate = _json$extensions.gateway) === null || _json$extensions$gate === void 0 ? void 0 : _json$extensions$gate.request_id
       });

package/dist/es2019/mocks/mock-team-client.js

@@ -2,20 +2,24 @@ import TeamProfileCardClient from '../client/TeamProfileCardClient';
 export default function getMockTeamClient(data) {
   return class MockTeamClient extends TeamProfileCardClient {
     makeRequest(teamId) {
+      var _data$error, _data$error2, _data$error3, _data$error4, _data$error5;
+      const errorResponse = {
+        reason: (_data$error = data.error) === null || _data$error === void 0 ? void 0 : _data$error.reason,
+        code: (_data$error2 = data.error) === null || _data$error2 === void 0 ? void 0 : _data$error2.code,
+        source: (_data$error3 = data.error) === null || _data$error3 === void 0 ? void 0 : _data$error3.source,
+        message: (_data$error4 = data.error) === null || _data$error4 === void 0 ? void 0 : _data$error4.message,
+        traceId: (_data$error5 = data.error) === null || _data$error5 === void 0 ? void 0 : _data$error5.traceId
+      };
       if (!data.timeout) {
         if (data.error && Math.random() < data.errorRate) {
-          return Promise.reject({
-            reason: data.error
-          });
+          return Promise.reject(errorResponse);
         }
         return Promise.resolve(data.team);
       }
       return new Promise((resolve, reject) => {
         setTimeout(() => {
           if (data.error && Math.random() < data.errorRate) {
-            reject({
-              reason: data.error
-            });
+            reject(errorResponse);
           }
           return resolve(data.team);
         }, data.timeout);

package/dist/es2019/styled/Card.js

@@ -14,8 +14,8 @@ export const CardWrapper = styled.div`
 `;
 export const ProfileImage = styled.div`
   position: absolute;
-  top: ${gridSize() * 3}px;
-  left: ${gridSize() * 3}px;
+  top: ${"var(--ds-space-300, 24px)"};
+  left: ${"var(--ds-space-300, 24px)"};
 `;
 export const ActionsFlexSpacer = styled.div`
   flex: 1 0 auto;
@@ -61,7 +61,7 @@ export const AnimatedKudosButton = styled.div`
 `;
 export const ActionButtonGroup = styled.div`
   user-select: none;
-  margin: ${2 * gridSize()}px 0 0 0;
+  margin: ${"var(--ds-space-200, 16px)"} 0 0 0;
   text-align: right;
   display: flex;
   justify-content: flex-end;
@@ -96,8 +96,8 @@ export const DetailsGroup = styled.div`
 export const DisabledInfo = styled.div`
   font-size: ${fontSizeSmall}px;
   color: ${labelTextColor};
-  margin: ${gridSize() * 1.5}px 0 0 0;
-  line-height: ${gridSize() * 2}px;
+  margin: ${"var(--ds-space-150, 12px)"} 0 0 0;
+  line-height: ${"var(--ds-font-lineHeight-100, 16px)"};
 `;
 export const FullNameLabel = styled.span`
   overflow: hidden;
@@ -110,7 +110,7 @@ export const FullNameLabel = styled.span`
   line-height: ${24 / 18}em;
 `;
 export const LozengeWrapper = styled.div`
-  margin-top: ${gridSize() * 2}px;
+  margin-top: ${"var(--ds-space-200, 16px)"};
   text-transform: uppercase;
   display: block;
 `;
@@ -119,11 +119,11 @@ export const CustomLozengeContainer = styled(LozengeWrapper)`
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: flex-start;
-  margin-top: ${gridSize() * 1.5}px;
+  margin-top: ${"var(--ds-space-150, 12px)"};
   > * {
-    margin-top: ${gridSize() / 2}px;
+    margin-top: ${"var(--ds-space-050, 4px)"};
     &:not(:last-child) {
-      margin-right: ${gridSize() / 2}px;
+      margin-right: ${"var(--ds-space-050, 4px)"};
     }
   }
 `;
@@ -134,7 +134,7 @@ export const JobTitleLabel = styled.span`
 
   font-size: 14px;
   color: ${headerTextColor};
-  margin: 0 0 ${gridSize() * 1.5}px 0;
+  margin: 0 0 ${"var(--ds-space-150, 12px)"} 0;
   line-height: ${24 / 14}em;
 `;
 export const AppTitleLabel = styled.span`
@@ -147,7 +147,7 @@ export const AppTitleLabel = styled.span`
   text-transform: uppercase;
 
   font-size: 12px;
-  margin: 4px 0 ${gridSize() * 1.5}px 0;
+  margin: 4px 0 ${"var(--ds-space-150, 12px)"} 0;
   line-height: ${24 / 14}em;
 `;
 export const SpinnerContainer = styled.div`
@@ -171,7 +171,7 @@ export const CardContainer = styled.div`
   background-repeat: no-repeat;
   background-size: 100% ${gridSize() * 12}px;
   box-sizing: content-box;
-  padding: ${gridSize() * 3}px;
+  padding: ${"var(--ds-space-300, 24px)"};
   box-shadow: ${props => props.withoutElevation ? '' : `${`var(--ds-shadow-overlay, ${`0 4px 8px -2px ${N50A}, 0 0 1px ${N60A}`})`}`};
   border-radius: ${props => props.withoutElevation ? '' : `${borderRadius()}px`};
 
@@ -180,22 +180,22 @@ export const CardContainer = styled.div`
 export const DetailsLabel = styled.div`
   display: flex;
   align-items: center;
-  line-height: ${gridSize() * 3}px;
+  line-height: ${"var(--ds-font-lineHeight-300, 24px)"};
   font-size: ${gridSize() * 1.5}px;
-  margin: ${gridSize() * 2}px 0 0 0;
+  margin: ${"var(--ds-space-200, 16px)"} 0 0 0;
   white-space: nowrap;
 
   & + & {
-    margin-top: ${gridSize() / 4}px;
+    margin-top: ${"var(--ds-space-025, 2px)"};
   }
 `;
 export const DetailsLabelIcon = styled.div`
   display: flex;
   flex-shrink: 0;
   color: ${labelIconColor};
-  width: ${gridSize() * 2}px;
-  height: ${gridSize() * 2}px;
-  padding: ${gridSize() / 2}px;
+  width: ${"var(--ds-space-200, 16px)"};
+  height: ${"var(--ds-space-200, 16px)"};
+  padding: ${"var(--ds-space-050, 4px)"};
   vertical-align: top;
 
   svg {
@@ -207,5 +207,5 @@ export const DetailsLabelText = styled.span`
   overflow: hidden;
   text-overflow: ellipsis;
   color: ${labelTextColor};
-  padding-left: ${gridSize() / 2}px;
+  padding-left: ${"var(--ds-space-050, 4px)"};
 `;

package/dist/es2019/styled/Error.js

@@ -5,13 +5,13 @@ import { h400 } from '@atlaskit/theme/typography';
 import { errorIconColor, errorTextColor, errorTitleColor } from './constants';
 export const ErrorWrapper = styled.div`
   text-align: center;
-  padding: ${gridSize() * 3}px;
+  padding: ${"var(--ds-space-300, 24px)"};
   color: ${errorIconColor};
 `;
 export const ErrorTitle = styled.p`
   color: ${errorTitleColor};
   line-height: ${gridSize() * 3}px;
-  margin: ${gridSize}px 0;
+  margin: ${"var(--ds-space-100, 8px)"} 0;
 `;
 export const ErrorText = styled.span`
   color: ${errorTextColor};
@@ -21,5 +21,5 @@ export const TeamErrorTitle = styled.p`
 `;
 export const TeamErrorText = styled.p`
   color: ${`var(--ds-text-subtlest, ${N200})`};
-  margin-top: ${gridSize() * 1}px;
+  margin-top: ${"var(--ds-space-100, 8px)"};
 `;

package/dist/es2019/styled/ReportingLines.js

@@ -3,26 +3,26 @@ import { gridSize } from '@atlaskit/theme/constants';
 import { appLabelTextColor } from './constants';
 export const ReportingLinesSection = styled.div`
   // Minor left margin to align better with existing icon fields
-  margin-left: ${gridSize() / 2}px;
-  margin-top: ${gridSize()}px;
+  margin-left: ${"var(--ds-space-050, 4px)"};
+  margin-top: ${"var(--ds-space-100, 8px)"};
 `;
 export const ReportingLinesHeading = styled.h5`
   color: ${appLabelTextColor};
   font-size: ${gridSize() * 1.5}px;
   font-weight: 600;
-  margin-bottom: ${gridSize()}px;
+  margin-bottom: ${"var(--ds-space-100, 8px)"};
 `;
 export const ManagerSection = styled.div`
   display: flex;
   align-items: center;
-  margin: ${gridSize() / 2}px ${gridSize() / 2}px;
+  margin: ${"var(--ds-space-050, 4px)"} ${"var(--ds-space-050, 4px)"};
 `;
 export const ManagerName = styled.span`
   font-size: ${gridSize() * 1.5}px;
-  margin-left: ${gridSize()}px;
+  margin-left: ${"var(--ds-space-100, 8px)"};
 `;
 export const OffsetWrapper = styled.div`
-  margin-top: ${gridSize() / 2}px;
+  margin-top: ${"var(--ds-space-050, 4px)"};
   // Offset left margin so the avatar aligns with the heading
-  margin-left: -${gridSize() / 2}px;
+  margin-left: calc(-1 * ${"var(--ds-space-050, 4px)"});
 `;

package/dist/es2019/styled/TeamCard.js

@@ -30,7 +30,7 @@ export const CardHeader = styled.div`
 export const CardContent = styled.div`
   display: flex;
   flex-direction: column;
-  padding: ${gridSize() * 3}px;
+  padding: ${"var(--ds-space-300, 24px)"};
   min-height: ${gridSize() * 13}px;
 `;
 export const TeamName = styled.h6`
@@ -44,14 +44,14 @@ export const TeamName = styled.h6`
 `;
 export const MemberCount = styled.div`
   color: ${`var(--ds-text-subtlest, ${N200})`};
-  margin-top: ${gridSize() * 0.5}px;
+  margin-top: ${"var(--ds-space-050, 4px)"};
 `;
 export const AvatarSection = styled.div`
-  margin-top: ${gridSize() * 2}px;
+  margin-top: ${"var(--ds-space-200, 16px)"};
   margin-left: -2px;
 `;
 export const DescriptionWrapper = styled.div`
-  margin-top: ${gridSize() * 2}px;
+  margin-top: ${"var(--ds-space-200, 16px)"};
   align-items: center;
   display: flex;
 `;
@@ -66,7 +66,8 @@ export const ActionButtons = styled.div`
   width: calc(100% + 8px);
   display: flex;
   justify-content: space-between;
-  margin: ${gridSize() * 3}px -${gridSize() * 3}px 0 -${gridSize()}px;
+  margin: ${"var(--ds-space-300, 24px)"} calc(-1 * ${"var(--ds-space-300, 24px)"})
+    0 calc(-1 * ${"var(--ds-space-100, 8px)"});
   background-color: ${"var(--ds-surface-overlay, hsla(0, 100%, 100%, 0.2))"};
 `;
 export const WrappedButton = styled.div`
@@ -79,10 +80,10 @@ export const MoreButton = styled.div`
 `;
 export const LoadingWrapper = styled.div`
   text-align: center;
-  margin-top: ${gridSize() * 5}px;
+  margin-top: ${"var(--ds-space-500, 40px)"};
 `;
 export const AccessLockSVGWrapper = styled.div`
-  margin-bottom: ${gridSize() * 3}px;
+  margin-bottom: ${"var(--ds-space-300, 24px)"};
 `;
 
 // export const LoadingTeamName = styled.div`

package/dist/es2019/util/analytics.js

@@ -31,7 +31,7 @@ const createEvent = (eventType, action, actionSubject, actionSubjectId, attribut
   actionSubjectId,
   attributes: {
     packageName: "@atlaskit/profilecard",
-    packageVersion: "19.2.0",
+    packageVersion: "19.2.2",
     ...attributes,
     firedAt: Math.round(getPageTime())
   }

package/dist/es2019/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/profilecard",
-	"version": "19.2.0"
+	"version": "19.2.2"
 }

package/dist/esm/client/errorUtils.js

@@ -12,6 +12,7 @@ export var getErrorAttributes = function getErrorAttributes(error) {
     errorMessage: error === null || error === void 0 ? void 0 : error.message,
     errorStatus: error === null || error === void 0 ? void 0 : error.code,
     errorReason: (error === null || error === void 0 ? void 0 : error.reason) || 'default',
+    errorSource: error === null || error === void 0 ? void 0 : error.source,
     isSLOFailure: !isIgnoredError(error),
     traceId: (_error$traceId = error === null || error === void 0 ? void 0 : error.traceId) !== null && _error$traceId !== void 0 ? _error$traceId : undefined
   };

package/dist/esm/client/graphqlUtils.js

@@ -40,7 +40,7 @@ export function graphqlQuery(serviceUrl, query) {
       return Promise.reject({
         reason: ((_json$errors$ = json.errors[0]) === null || _json$errors$ === void 0 ? void 0 : _json$errors$.category) || ((_json$errors$2 = json.errors[0]) === null || _json$errors$2 === void 0 ? void 0 : (_json$errors$2$extens = _json$errors$2.extensions) === null || _json$errors$2$extens === void 0 ? void 0 : _json$errors$2$extens.classification) || 'default',
         code: (_json$errors$3 = json.errors[0]) === null || _json$errors$3 === void 0 ? void 0 : (_json$errors$3$extens = _json$errors$3.extensions) === null || _json$errors$3$extens === void 0 ? void 0 : _json$errors$3$extens.statusCode,
-        errorSource: (_json$errors$4 = json.errors[0]) === null || _json$errors$4 === void 0 ? void 0 : (_json$errors$4$extens = _json$errors$4.extensions) === null || _json$errors$4$extens === void 0 ? void 0 : _json$errors$4$extens.errorSource,
+        source: (_json$errors$4 = json.errors[0]) === null || _json$errors$4 === void 0 ? void 0 : (_json$errors$4$extens = _json$errors$4.extensions) === null || _json$errors$4$extens === void 0 ? void 0 : _json$errors$4$extens.errorSource,
         message: json.errors[0].message,
         traceId: (_json$extensions = json.extensions) === null || _json$extensions === void 0 ? void 0 : (_json$extensions$gate = _json$extensions.gateway) === null || _json$extensions$gate === void 0 ? void 0 : _json$extensions$gate.request_id
       });

package/dist/esm/mocks/mock-team-client.js

@@ -17,20 +17,24 @@ export default function getMockTeamClient(data) {
     _createClass(MockTeamClient, [{
       key: "makeRequest",
       value: function makeRequest(teamId) {
+        var _data$error, _data$error2, _data$error3, _data$error4, _data$error5;
+        var errorResponse = {
+          reason: (_data$error = data.error) === null || _data$error === void 0 ? void 0 : _data$error.reason,
+          code: (_data$error2 = data.error) === null || _data$error2 === void 0 ? void 0 : _data$error2.code,
+          source: (_data$error3 = data.error) === null || _data$error3 === void 0 ? void 0 : _data$error3.source,
+          message: (_data$error4 = data.error) === null || _data$error4 === void 0 ? void 0 : _data$error4.message,
+          traceId: (_data$error5 = data.error) === null || _data$error5 === void 0 ? void 0 : _data$error5.traceId
+        };
         if (!data.timeout) {
           if (data.error && Math.random() < data.errorRate) {
-            return Promise.reject({
-              reason: data.error
-            });
+            return Promise.reject(errorResponse);
           }
           return Promise.resolve(data.team);
         }
         return new Promise(function (resolve, reject) {
           setTimeout(function () {
             if (data.error && Math.random() < data.errorRate) {
-              reject({
-                reason: data.error
-              });
+              reject(errorResponse);
             }
             return resolve(data.team);
           }, data.timeout);

package/dist/esm/styled/Card.js

@@ -12,7 +12,7 @@ var getFullNameMargin = function getFullNameMargin(props) {
 };
 export var CardContainerEmpty = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral([""])));
 export var CardWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  border-radius: ", "px;\n  width: ", "px;\n"])), bgColor, borderRadius, gridSize() * 45);
-export var ProfileImage = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: ", "px;\n  left: ", "px;\n"])), gridSize() * 3, gridSize() * 3);
+export var ProfileImage = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: ", ";\n  left: ", ";\n"])), "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)");
 export var ActionsFlexSpacer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  flex: 1 0 auto;\n"])));
 var kudosButtonAnimationTransformation = keyframes(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["{\n  0%   { transform: translate(-80px, -50px); }\n  100% { transform: translate(90px, -70px); }\n}"])));
 export var KudosBlobAnimationStyle = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: none;\n  height: 150px;\n  width: 150px;\n  z-index: -1;\n  position: absolute;\n  animation-name: ", ";\n  animation-iteration-count: 1;\n  animation-duration: 3s;\n  background-image: radial-gradient(\n    circle,\n    ", " 0%,\n    ", " 25%,\n    transparent 50%\n  );\n  overflow: hidden;\n"])), kudosButtonAnimationTransformation, "var(--ds-background-information-pressed, #85B8FF)", "var(--ds-background-discovery-pressed, #B8ACF6)");
@@ -22,30 +22,30 @@ export var KudosBlobAnimation = function KudosBlobAnimation(props) {
   }, props));
 };
 export var AnimatedKudosButton = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  margin-left: ", "px;\n\n  /* Need babel-plugin-emotion to use component selector */\n  /* Previously with styled-components: &:hover {KudosBlobAnimation} { */\n  &:hover .kudos-blob-animation {\n    display: block;\n  }\n\n  button,\n  a {\n    clip-path: inset(0px 0px 0px 0px round ", "px);\n  }\n  overflow: hidden;\n"])), gridSize, borderRadius);
-export var ActionButtonGroup = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  user-select: none;\n  margin: ", "px 0 0 0;\n  text-align: right;\n  display: flex;\n  justify-content: flex-end;\n\n  button,\n  a,\n  span {\n    margin-left: ", "px;\n\n    &:first-child {\n      margin-left: 0;\n    }\n  }\n"])), 2 * gridSize(), gridSize);
+export var ActionButtonGroup = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  user-select: none;\n  margin: ", " 0 0 0;\n  text-align: right;\n  display: flex;\n  justify-content: flex-end;\n\n  button,\n  a,\n  span {\n    margin-left: ", "px;\n\n    &:first-child {\n      margin-left: 0;\n    }\n  }\n"])), "var(--ds-space-200, 16px)", gridSize);
 export var OverflowActionButtonsWrapper = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  display: inline-block;\n  width: 32px;\n  height: 32px;\n  margin-left: ", "px;\n"])), gridSize);
 export var CardContent = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  min-height: ", "px;\n"])), gridSize() * 17);
 export var DetailsGroup = styled.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  margin-left: ", "px;\n  width: ", "px;\n"])), gridSize() * 14.5, gridSize() * 24.5);
-export var DisabledInfo = styled.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  font-size: ", "px;\n  color: ", ";\n  margin: ", "px 0 0 0;\n  line-height: ", "px;\n"])), fontSizeSmall, labelTextColor, gridSize() * 1.5, gridSize() * 2);
+export var DisabledInfo = styled.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  font-size: ", "px;\n  color: ", ";\n  margin: ", " 0 0 0;\n  line-height: ", ";\n"])), fontSizeSmall, labelTextColor, "var(--ds-space-150, 12px)", "var(--ds-font-lineHeight-100, 16px)");
 export var FullNameLabel = styled.span(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n\n  font-size: 18px;\n  color: ", ";\n  margin: ", ";\n  line-height: ", "em;\n"])), function (props) {
   return props.isDisabledAccount ? headerTextColorInactive : headerTextColor;
 }, function (props) {
   return getFullNameMargin(props);
 }, 24 / 18);
-export var LozengeWrapper = styled.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  margin-top: ", "px;\n  text-transform: uppercase;\n  display: block;\n"])), gridSize() * 2);
-export var CustomLozengeContainer = styled(LozengeWrapper)(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  margin-top: ", "px;\n  > * {\n    margin-top: ", "px;\n    &:not(:last-child) {\n      margin-right: ", "px;\n    }\n  }\n"])), gridSize() * 1.5, gridSize() / 2, gridSize() / 2);
-export var JobTitleLabel = styled.span(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n\n  font-size: 14px;\n  color: ", ";\n  margin: 0 0 ", "px 0;\n  line-height: ", "em;\n"])), headerTextColor, gridSize() * 1.5, 24 / 14);
-export var AppTitleLabel = styled.span(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n  background: ", ";\n  color: ", ";\n  border-radius: ", ";\n  padding: 0 6px;\n  width: fit-content;\n  font-weight: bold;\n  text-transform: uppercase;\n\n  font-size: 12px;\n  margin: 4px 0 ", "px 0;\n  line-height: ", "em;\n"])), appLabelBgColor, appLabelTextColor, borderRadius(), gridSize() * 1.5, 24 / 14);
+export var LozengeWrapper = styled.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  margin-top: ", ";\n  text-transform: uppercase;\n  display: block;\n"])), "var(--ds-space-200, 16px)");
+export var CustomLozengeContainer = styled(LozengeWrapper)(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  margin-top: ", ";\n  > * {\n    margin-top: ", ";\n    &:not(:last-child) {\n      margin-right: ", ";\n    }\n  }\n"])), "var(--ds-space-150, 12px)", "var(--ds-space-050, 4px)", "var(--ds-space-050, 4px)");
+export var JobTitleLabel = styled.span(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n\n  font-size: 14px;\n  color: ", ";\n  margin: 0 0 ", " 0;\n  line-height: ", "em;\n"])), headerTextColor, "var(--ds-space-150, 12px)", 24 / 14);
+export var AppTitleLabel = styled.span(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n  background: ", ";\n  color: ", ";\n  border-radius: ", ";\n  padding: 0 6px;\n  width: fit-content;\n  font-weight: bold;\n  text-transform: uppercase;\n\n  font-size: 12px;\n  margin: 4px 0 ", " 0;\n  line-height: ", "em;\n"])), appLabelBgColor, appLabelTextColor, borderRadius(), "var(--ds-space-150, 12px)", 24 / 14);
 export var SpinnerContainer = styled.div(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n  align-items: center;\n  display: flex;\n  height: ", "px;\n  justify-content: center;\n  position: relative;\n"])), gridSize() * 12);
-export var CardContainer = styled.div(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n  position: relative;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  background-image: linear-gradient(\n    to bottom,\n    ", "\n      0%,\n    ", "\n      100%\n  );\n  background-repeat: no-repeat;\n  background-size: 100% ", "px;\n  box-sizing: content-box;\n  padding: ", "px;\n  box-shadow: ", ";\n  border-radius: ", ";\n\n  overflow: hidden;\n"])), function (props) {
+export var CardContainer = styled.div(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n  position: relative;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  background-image: linear-gradient(\n    to bottom,\n    ", "\n      0%,\n    ", "\n      100%\n  );\n  background-repeat: no-repeat;\n  background-size: 100% ", "px;\n  box-sizing: content-box;\n  padding: ", ";\n  box-shadow: ", ";\n  border-radius: ", ";\n\n  overflow: hidden;\n"])), function (props) {
   return props.isDisabledUser ? headerBgColorDisabledUser : headerBgColor;
 }, function (props) {
   return props.isDisabledUser ? headerBgColorDisabledUser : headerBgColor;
-}, gridSize() * 12, gridSize() * 3, function (props) {
+}, gridSize() * 12, "var(--ds-space-300, 24px)", function (props) {
   return props.withoutElevation ? '' : "".concat("var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N50A, ", 0 0 1px ").concat(N60A), ")"));
 }, function (props) {
   return props.withoutElevation ? '' : "".concat(borderRadius(), "px");
 });
-export var DetailsLabel = styled.div(_templateObject20 || (_templateObject20 = _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(_templateObject21 || (_templateObject21 = _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);
-export var DetailsLabelText = styled.span(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n  overflow: hidden;\n  text-overflow: ellipsis;\n  color: ", ";\n  padding-left: ", "px;\n"])), labelTextColor, gridSize() / 2);
+export var DetailsLabel = styled.div(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  line-height: ", ";\n  font-size: ", "px;\n  margin: ", " 0 0 0;\n  white-space: nowrap;\n\n  & + & {\n    margin-top: ", ";\n  }\n"])), "var(--ds-font-lineHeight-300, 24px)", gridSize() * 1.5, "var(--ds-space-200, 16px)", "var(--ds-space-025, 2px)");
+export var DetailsLabelIcon = styled.div(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-shrink: 0;\n  color: ", ";\n  width: ", ";\n  height: ", ";\n  padding: ", ";\n  vertical-align: top;\n\n  svg {\n    width: 100%;\n    height: 100%;\n  }\n"])), labelIconColor, "var(--ds-space-200, 16px)", "var(--ds-space-200, 16px)", "var(--ds-space-050, 4px)");
+export var DetailsLabelText = styled.span(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n  overflow: hidden;\n  text-overflow: ellipsis;\n  color: ", ";\n  padding-left: ", ";\n"])), labelTextColor, "var(--ds-space-050, 4px)");

package/dist/esm/styled/Error.js

@@ -5,8 +5,8 @@ import { N200 } from '@atlaskit/theme/colors';
 import { gridSize } from '@atlaskit/theme/constants';
 import { h400 } from '@atlaskit/theme/typography';
 import { errorIconColor, errorTextColor, errorTitleColor } from './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 ErrorWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  text-align: center;\n  padding: ", ";\n  color: ", ";\n"])), "var(--ds-space-300, 24px)", errorIconColor);
+export var ErrorTitle = styled.p(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  color: ", ";\n  line-height: ", "px;\n  margin: ", " 0;\n"])), errorTitleColor, gridSize() * 3, "var(--ds-space-100, 8px)");
 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"])), "var(--ds-text-subtlest, ".concat(N200, ")"), gridSize() * 1);
+export var TeamErrorText = styled.p(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  color: ", ";\n  margin-top: ", ";\n"])), "var(--ds-text-subtlest, ".concat(N200, ")"), "var(--ds-space-100, 8px)");

package/dist/esm/styled/ReportingLines.js

@@ -3,8 +3,8 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
 import styled from '@emotion/styled';
 import { gridSize } from '@atlaskit/theme/constants';
 import { appLabelTextColor } from './constants';
-export var ReportingLinesSection = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  // Minor left margin to align better with existing icon fields\n  margin-left: ", "px;\n  margin-top: ", "px;\n"])), gridSize() / 2, gridSize());
-export var ReportingLinesHeading = styled.h5(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: ", "px;\n  font-weight: 600;\n  margin-bottom: ", "px;\n"])), appLabelTextColor, gridSize() * 1.5, gridSize());
-export var ManagerSection = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  margin: ", "px ", "px;\n"])), gridSize() / 2, gridSize() / 2);
-export var ManagerName = styled.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  font-size: ", "px;\n  margin-left: ", "px;\n"])), gridSize() * 1.5, gridSize());
-export var OffsetWrapper = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  margin-top: ", "px;\n  // Offset left margin so the avatar aligns with the heading\n  margin-left: -", "px;\n"])), gridSize() / 2, gridSize() / 2);
+export var ReportingLinesSection = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  // Minor left margin to align better with existing icon fields\n  margin-left: ", ";\n  margin-top: ", ";\n"])), "var(--ds-space-050, 4px)", "var(--ds-space-100, 8px)");
+export var ReportingLinesHeading = styled.h5(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: ", "px;\n  font-weight: 600;\n  margin-bottom: ", ";\n"])), appLabelTextColor, gridSize() * 1.5, "var(--ds-space-100, 8px)");
+export var ManagerSection = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  margin: ", " ", ";\n"])), "var(--ds-space-050, 4px)", "var(--ds-space-050, 4px)");
+export var ManagerName = styled.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  font-size: ", "px;\n  margin-left: ", ";\n"])), gridSize() * 1.5, "var(--ds-space-100, 8px)");
+export var OffsetWrapper = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  margin-top: ", ";\n  // Offset left margin so the avatar aligns with the heading\n  margin-left: calc(-1 * ", ");\n"])), "var(--ds-space-050, 4px)", "var(--ds-space-050, 4px)");

package/dist/esm/styled/TeamCard.js

@@ -13,17 +13,17 @@ export var CardHeader = styled.div(_templateObject4 || (_templateObject4 = _tagg
 }, function (props) {
   return props.image ? "url(".concat(props.image, ")") : '';
 }, gridSize() * 16);
-export var CardContent = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  padding: ", "px;\n  min-height: ", "px;\n"])), gridSize() * 3, gridSize() * 13);
+export var CardContent = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  padding: ", ";\n  min-height: ", "px;\n"])), "var(--ds-space-300, 24px)", gridSize() * 13);
 export var TeamName = styled.h6(_templateObject6 || (_templateObject6 = _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(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  color: ", ";\n  margin-top: ", "px;\n"])), "var(--ds-text-subtlest, ".concat(N200, ")"), gridSize() * 0.5);
-export var AvatarSection = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  margin-top: ", "px;\n  margin-left: -2px;\n"])), gridSize() * 2);
-export var DescriptionWrapper = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  margin-top: ", "px;\n  align-items: center;\n  display: flex;\n"])), gridSize() * 2);
+export var MemberCount = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  color: ", ";\n  margin-top: ", ";\n"])), "var(--ds-text-subtlest, ".concat(N200, ")"), "var(--ds-space-050, 4px)");
+export var AvatarSection = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  margin-top: ", ";\n  margin-left: -2px;\n"])), "var(--ds-space-200, 16px)");
+export var DescriptionWrapper = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  margin-top: ", ";\n  align-items: center;\n  display: flex;\n"])), "var(--ds-space-200, 16px)");
 export var Description = styled.span(_templateObject10 || (_templateObject10 = _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(_templateObject11 || (_templateObject11 = _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(), "var(--ds-surface-overlay, hsla(0, 100%, 100%, 0.2))");
+export var ActionButtons = styled.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  width: calc(100% + 8px);\n  display: flex;\n  justify-content: space-between;\n  margin: ", " calc(-1 * ", ")\n    0 calc(-1 * ", ");\n  background-color: ", ";\n"])), "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)", "var(--ds-space-100, 8px)", "var(--ds-surface-overlay, hsla(0, 100%, 100%, 0.2))");
 export var WrappedButton = styled.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  flex-basis: 0;\n  flex-grow: 1;\n  margin-left: 8px;\n"])));
 export var MoreButton = styled.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  margin-left: 8px;\n"])));
-export var LoadingWrapper = styled.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  text-align: center;\n  margin-top: ", "px;\n"])), gridSize() * 5);
-export var AccessLockSVGWrapper = styled.div(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  margin-bottom: ", "px;\n"])), gridSize() * 3);
+export var LoadingWrapper = styled.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  text-align: center;\n  margin-top: ", ";\n"])), "var(--ds-space-500, 40px)");
+export var AccessLockSVGWrapper = styled.div(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  margin-bottom: ", ";\n"])), "var(--ds-space-300, 24px)");
 
 // export const LoadingTeamName = styled.div`
 //   width: 175px;

package/dist/esm/util/analytics.js

@@ -38,7 +38,7 @@ var createEvent = function createEvent(eventType, action, actionSubject, actionS
     actionSubjectId: actionSubjectId,
     attributes: _objectSpread(_objectSpread({
       packageName: "@atlaskit/profilecard",
-      packageVersion: "19.2.0"
+      packageVersion: "19.2.2"
     }, attributes), {}, {
       firedAt: Math.round(getPageTime())
     })

package/dist/esm/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/profilecard",
-	"version": "19.2.0"
+	"version": "19.2.2"
 }

package/dist/types/client/errorUtils.d.ts

@@ -3,6 +3,7 @@ export declare const getErrorAttributes: (error?: GraphQLError | undefined) => {
     errorMessage: string | undefined;
     errorStatus: number | undefined;
     errorReason: string;
+    errorSource: string | undefined;
     isSLOFailure: boolean;
     traceId: string | undefined;
 };

package/dist/types/client/graphqlUtils.d.ts

@@ -5,7 +5,7 @@ interface Query {
 export interface GraphQLError {
     code?: number;
     reason?: string;
-    errorSource?: string;
+    source?: string;
     message?: string;
     traceId?: string;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/profilecard",
-  "version": "19.2.0",
+  "version": "19.2.2",
   "description": "A React component to display a card with user information.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -43,7 +43,7 @@
     "@atlaskit/analytics-next": "^9.0.0",
     "@atlaskit/avatar": "^21.2.0",
     "@atlaskit/avatar-group": "^9.2.0",
-    "@atlaskit/button": "^16.5.0",
+    "@atlaskit/button": "^16.6.0",
     "@atlaskit/dropdown-menu": "^11.7.0",
     "@atlaskit/empty-state": "^7.4.8",
     "@atlaskit/give-kudos": "^1.0.0",
@@ -69,10 +69,10 @@
   "devDependencies": {
     "@atlaskit/docs": "*",
     "@atlaskit/dynamic-table": "^14.8.0",
-    "@atlaskit/flag": "^15.0.0",
+    "@atlaskit/flag": "^15.1.0",
     "@atlaskit/inline-edit": "^12.2.0",
     "@atlaskit/select": "^16.1.0",
-    "@atlaskit/util-data-test": "^17.6.0",
+    "@atlaskit/util-data-test": "^17.7.0",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@testing-library/react": "^12.1.5",
     "enzyme": "^3.10.0",