@atlaskit/profilecard 16.2.0 → 16.3.0

package/dist/es2019/client/TeamProfileCardClient.js

@@ -1,6 +1,7 @@
 import { teamRequestAnalytics } from '../util/analytics';
 import { getPageTime } from '../util/performance';
 import CachingClient from './CachingClient';
+import { getTeamFromAGG } from './getTeamFromAGG';
 import { graphqlQuery } from './graphqlUtils';
 const QUERY = `query Team($teamId: String!, $organizationId: String) {
   Team: Team(teamId: $teamId, organizationId: $organizationId) {
@@ -18,11 +19,6 @@ const QUERY = `query Team($teamId: String!, $organizationId: String) {
     },
   }
 }`;
-/**
- * @param  {string} userId
- * @param  {string} cloudId
- * @return {string} GraphQL Query String
- */
 
 const buildTeamQuery = (teamId, orgId) => ({
   query: QUERY,
@@ -38,6 +34,14 @@ export default class TeamProfileCardClient extends CachingClient {
     this.options = options;
   }
 
+  makeRequestViaGateway(teamId, _orgId) {
+    if (!this.options.gatewayGraphqlUrl) {
+      throw new Error('Trying to fetch via gateway with no specified config.gatewayGraphqlUrl');
+    }
+
+    return getTeamFromAGG(this.options.gatewayGraphqlUrl, teamId);
+  }
+
   makeRequest(teamId, orgId) {
     if (!this.options.url) {
       throw new Error('config.url is a required parameter for fetching teams');
@@ -65,14 +69,17 @@ export default class TeamProfileCardClient extends CachingClient {
         analytics(teamRequestAnalytics('triggered'));
       }
 
-      this.makeRequest(teamId, orgId).then(data => {
+      const shouldUseGateway = !!this.options.gatewayGraphqlUrl;
+      const promise = shouldUseGateway ? this.makeRequestViaGateway(teamId, orgId) : this.makeRequest(teamId, orgId);
+      promise.then(data => {
         if (this.cache) {
           this.setCachedProfile(teamId, data);
         }
 
         if (analytics) {
           analytics(teamRequestAnalytics('succeeded', {
-            duration: getPageTime() - startTime
+            duration: getPageTime() - startTime,
+            gateway: shouldUseGateway
           }));
         }
 
@@ -82,7 +89,8 @@ export default class TeamProfileCardClient extends CachingClient {
           analytics(teamRequestAnalytics('failed', {
             duration: getPageTime() - startTime,
             errorStatus: error.code,
-            errorReason: error.reason
+            errorReason: error.reason,
+            gateway: shouldUseGateway
           }));
         }
 

package/dist/es2019/client/getTeamFromAGG.js

@@ -0,0 +1,66 @@
+import { graphqlQuery } from './graphqlUtils';
+export const extractIdFromAri = ari => {
+  const slashPos = ari.indexOf('/');
+  const id = ari.slice(slashPos + 1);
+  return id;
+};
+export const idToAri = teamId => {
+  return `ari:cloud:teams::team/${teamId}`;
+};
+export const convertTeam = result => {
+  var _team$members;
+
+  const {
+    team
+  } = result;
+  return { ...team,
+    id: extractIdFromAri(team.id),
+    members: (_team$members = team.members) === null || _team$members === void 0 ? void 0 : _team$members.nodes.map(({
+      member
+    }) => ({
+      id: member.accountId,
+      fullName: member.name,
+      avatarUrl: member.picture
+    }))
+  };
+};
+const GATEWAY_QUERY = `query TeamCard($teamId: ID!) {
+  Team: team {
+    team (id: $teamId) {
+      id
+      displayName
+      description
+      smallHeaderImageUrl
+      largeHeaderImageUrl
+      smallAvatarImageUrl
+      largeAvatarImageUrl
+      members {
+        nodes {
+          member {
+            accountId
+            name
+            picture
+          }
+        }
+      }
+    }
+  }
+}`;
+export const buildGatewayQuery = teamId => ({
+  query: GATEWAY_QUERY,
+  variables: {
+    teamId: idToAri(teamId)
+  }
+});
+export const addExperimentalHeaders = headers => {
+  headers.append('X-ExperimentalApi', 'teams-beta');
+  headers.append('X-ExperimentalApi', 'team-members-beta');
+  return headers;
+};
+export async function getTeamFromAGG(url, teamId) {
+  const query = buildGatewayQuery(teamId);
+  const {
+    Team
+  } = await graphqlQuery(url, query, addExperimentalHeaders);
+  return convertTeam(Team);
+}

package/dist/es2019/client/graphqlUtils.js

@@ -4,12 +4,16 @@ const buildHeaders = () => {
   return headers;
 };
 
+const id = headers => headers;
 /**
  * @param {string} serviceUrl - GraphQL service endpoint
  * @param {Query} query - GraphQL query
+ * @param {HeaderProcessor} processHeaders - a function to add extra headers to the request
  */
-export function graphqlQuery(serviceUrl, query) {
-  const headers = buildHeaders();
+
+
+export function graphqlQuery(serviceUrl, query, processHeaders = id) {
+  const headers = processHeaders(buildHeaders());
   return fetch(new Request(serviceUrl, {
     method: 'POST',
     credentials: 'include',

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

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

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

@@ -247,7 +247,7 @@ export default class Profilecard extends React.PureComponent {
       }, /*#__PURE__*/React.createElement(ProfileImage, null, /*#__PURE__*/React.createElement(Avatar, {
         size: "xlarge",
         src: this.props.status !== 'closed' ? this.props.avatarUrl : undefined,
-        borderColor: token('color.background.overlay', N0)
+        borderColor: token('elevation.surface.overlay', N0)
       })), /*#__PURE__*/React.createElement(CardContent, null, this.renderCardDetails(), actions ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ActionsFlexSpacer, null), actions) : null));
     }
 

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

@@ -25,5 +25,9 @@ export default function getMockTeamClient(data) {
       });
     }
 
+    makeRequestViaGateway(teamId) {
+      return this.makeRequest(teamId);
+    }
+
   };
 }

package/dist/es2019/styled/Error.js

@@ -21,6 +21,6 @@ export const TeamErrorTitle = styled.p`
   ${h400};
 `;
 export const TeamErrorText = styled.p`
-  color: ${token('color.text.lowEmphasis', N200)};
+  color: ${token('color.text.subtlest', N200)};
   margin-top: ${gridSize() * 1}px;
 `;

package/dist/es2019/styled/TeamCard.js

@@ -16,7 +16,7 @@ export const CardWrapper = styled.div`
   -moz-osx-font-smoothing: grayscale;
 `;
 const loadingImage = css`
-  background-color: ${token('color.background.subtleNeutral.resting', N20)};
+  background-color: ${token('color.background.neutral', N20)};
 `;
 const defaultImage = css`
   background-color: ${teamHeaderBgColor};
@@ -58,7 +58,7 @@ export const TeamName = styled.h6`
   -webkit-box-orient: vertical;
 `;
 export const MemberCount = styled.div`
-  color: ${token('color.text.lowEmphasis', N200)};
+  color: ${token('color.text.subtlest', N200)};
   margin-top: ${gridSize() * 0.5}px;
 `;
 export const AvatarSection = styled.div`
@@ -82,7 +82,7 @@ export const ActionButtons = styled.div`
   display: flex;
   justify-content: space-between;
   margin: ${gridSize() * 3}px -${gridSize() * 3}px 0 -${gridSize()}px;
-  background-color: ${token('color.background.overlay', 'hsla(0, 100%, 100%, 0.2)')};
+  background-color: ${token('elevation.surface.overlay', 'hsla(0, 100%, 100%, 0.2)')};
 `;
 export const WrappedButton = styled.div`
   flex-basis: 0;

package/dist/es2019/styled/constants.js

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

package/dist/es2019/util/analytics.js

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

package/dist/es2019/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/profilecard",
-	"version": "16.2.0"
+	"version": "16.3.0"
 }

package/dist/esm/client/CachingClient.js

@@ -2,9 +2,9 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 import { LRUCache } from 'lru-fast';
 

package/dist/esm/client/ProfileCardClient.js

@@ -2,9 +2,9 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 import TeamCentralCardClient from './TeamCentralCardClient';
 import TeamProfileCardClient from './TeamProfileCardClient';

package/dist/esm/client/TeamProfileCardClient.js

@@ -11,13 +11,9 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 import { teamRequestAnalytics } from '../util/analytics';
 import { getPageTime } from '../util/performance';
 import CachingClient from './CachingClient';
+import { getTeamFromAGG } from './getTeamFromAGG';
 import { graphqlQuery } from './graphqlUtils';
 var QUERY = "query Team($teamId: String!, $organizationId: String) {\n  Team: Team(teamId: $teamId, organizationId: $organizationId) {\n    id,\n    description,\n    displayName,\n    largeHeaderImageUrl,\n    smallHeaderImageUrl,\n    largeAvatarImageUrl,\n    smallAvatarImageUrl,\n    members {\n      id,\n      fullName,\n      avatarUrl,\n    },\n  }\n}";
-/**
- * @param  {string} userId
- * @param  {string} cloudId
- * @return {string} GraphQL Query String
- */
 
 var buildTeamQuery = function buildTeamQuery(teamId, orgId) {
   return {
@@ -45,6 +41,15 @@ var TeamProfileCardClient = /*#__PURE__*/function (_CachingClient) {
   }
 
   _createClass(TeamProfileCardClient, [{
+    key: "makeRequestViaGateway",
+    value: function makeRequestViaGateway(teamId, _orgId) {
+      if (!this.options.gatewayGraphqlUrl) {
+        throw new Error('Trying to fetch via gateway with no specified config.gatewayGraphqlUrl');
+      }
+
+      return getTeamFromAGG(this.options.gatewayGraphqlUrl, teamId);
+    }
+  }, {
     key: "makeRequest",
     value: function makeRequest(teamId, orgId) {
       if (!this.options.url) {
@@ -78,14 +83,17 @@ var TeamProfileCardClient = /*#__PURE__*/function (_CachingClient) {
           analytics(teamRequestAnalytics('triggered'));
         }
 
-        _this2.makeRequest(teamId, orgId).then(function (data) {
+        var shouldUseGateway = !!_this2.options.gatewayGraphqlUrl;
+        var promise = shouldUseGateway ? _this2.makeRequestViaGateway(teamId, orgId) : _this2.makeRequest(teamId, orgId);
+        promise.then(function (data) {
           if (_this2.cache) {
             _this2.setCachedProfile(teamId, data);
           }
 
           if (analytics) {
             analytics(teamRequestAnalytics('succeeded', {
-              duration: getPageTime() - startTime
+              duration: getPageTime() - startTime,
+              gateway: shouldUseGateway
             }));
           }
 
@@ -95,7 +103,8 @@ var TeamProfileCardClient = /*#__PURE__*/function (_CachingClient) {
             analytics(teamRequestAnalytics('failed', {
               duration: getPageTime() - startTime,
               errorStatus: error.code,
-              errorReason: error.reason
+              errorReason: error.reason,
+              gateway: shouldUseGateway
             }));
           }
 

package/dist/esm/client/UserProfileCardClient.js

@@ -11,9 +11,9 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 import CachingClient from './CachingClient';
 import { graphqlQuery } from './graphqlUtils';

package/dist/esm/client/getTeamFromAGG.js

@@ -0,0 +1,77 @@
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+import { graphqlQuery } from './graphqlUtils';
+export var extractIdFromAri = function extractIdFromAri(ari) {
+  var slashPos = ari.indexOf('/');
+  var id = ari.slice(slashPos + 1);
+  return id;
+};
+export var idToAri = function idToAri(teamId) {
+  return "ari:cloud:teams::team/".concat(teamId);
+};
+export var convertTeam = function convertTeam(result) {
+  var _team$members;
+
+  var team = result.team;
+  return _objectSpread(_objectSpread({}, team), {}, {
+    id: extractIdFromAri(team.id),
+    members: (_team$members = team.members) === null || _team$members === void 0 ? void 0 : _team$members.nodes.map(function (_ref) {
+      var member = _ref.member;
+      return {
+        id: member.accountId,
+        fullName: member.name,
+        avatarUrl: member.picture
+      };
+    })
+  });
+};
+var GATEWAY_QUERY = "query TeamCard($teamId: ID!) {\n  Team: team {\n    team (id: $teamId) {\n      id\n      displayName\n      description\n      smallHeaderImageUrl\n      largeHeaderImageUrl\n      smallAvatarImageUrl\n      largeAvatarImageUrl\n      members {\n        nodes {\n          member {\n            accountId\n            name\n            picture\n          }\n        }\n      }\n    }\n  }\n}";
+export var buildGatewayQuery = function buildGatewayQuery(teamId) {
+  return {
+    query: GATEWAY_QUERY,
+    variables: {
+      teamId: idToAri(teamId)
+    }
+  };
+};
+export var addExperimentalHeaders = function addExperimentalHeaders(headers) {
+  headers.append('X-ExperimentalApi', 'teams-beta');
+  headers.append('X-ExperimentalApi', 'team-members-beta');
+  return headers;
+};
+export function getTeamFromAGG(_x, _x2) {
+  return _getTeamFromAGG.apply(this, arguments);
+}
+
+function _getTeamFromAGG() {
+  _getTeamFromAGG = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(url, teamId) {
+    var query, _yield$graphqlQuery, Team;
+
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            query = buildGatewayQuery(teamId);
+            _context.next = 3;
+            return graphqlQuery(url, query, addExperimentalHeaders);
+
+          case 3:
+            _yield$graphqlQuery = _context.sent;
+            Team = _yield$graphqlQuery.Team;
+            return _context.abrupt("return", convertTeam(Team));
+
+          case 6:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  }));
+  return _getTeamFromAGG.apply(this, arguments);
+}

package/dist/esm/client/graphqlUtils.js

@@ -4,12 +4,19 @@ var buildHeaders = function buildHeaders() {
   return headers;
 };
 
+var id = function id(headers) {
+  return headers;
+};
 /**
  * @param {string} serviceUrl - GraphQL service endpoint
  * @param {Query} query - GraphQL query
+ * @param {HeaderProcessor} processHeaders - a function to add extra headers to the request
  */
+
+
 export function graphqlQuery(serviceUrl, query) {
-  var headers = buildHeaders();
+  var processHeaders = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : id;
+  var headers = processHeaders(buildHeaders());
   return fetch(new Request(serviceUrl, {
     method: 'POST',
     credentials: 'include',

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

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

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

@@ -3,9 +3,9 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _extends from "@babel/runtime/helpers/extends";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { FormattedMessage } from 'react-intl-next';

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

@@ -7,6 +7,7 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _excluded = ["text"];
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
@@ -235,7 +236,7 @@ var Profilecard = /*#__PURE__*/function (_React$PureComponent) {
     value: function renderCustomLozenges(lozenges) {
       return lozenges.length > 0 ? /*#__PURE__*/React.createElement(CustomLozengeContainer, null, lozenges.map(function (_ref, index) {
         var text = _ref.text,
-            otherProps = _objectWithoutProperties(_ref, ["text"]);
+            otherProps = _objectWithoutProperties(_ref, _excluded);
 
         return /*#__PURE__*/React.createElement(Lozenge, _extends({}, otherProps, {
           key: index
@@ -297,7 +298,7 @@ var Profilecard = /*#__PURE__*/function (_React$PureComponent) {
         }, /*#__PURE__*/React.createElement(ProfileImage, null, /*#__PURE__*/React.createElement(Avatar, {
           size: "xlarge",
           src: this.props.status !== 'closed' ? this.props.avatarUrl : undefined,
-          borderColor: token('color.background.overlay', N0)
+          borderColor: token('elevation.surface.overlay', N0)
         })), /*#__PURE__*/React.createElement(CardContent, null, this.renderCardDetails(), actions ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ActionsFlexSpacer, null), actions) : null));
       }
 

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

@@ -7,9 +7,9 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 

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

@@ -7,10 +7,11 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _excluded = ["ref"];
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
@@ -231,7 +232,7 @@ var ProfilecardTrigger = /*#__PURE__*/function (_React$PureComponent) {
         content: this.renderCard,
         trigger: function trigger(triggerProps) {
           var ref = triggerProps.ref,
-              innerProps = _objectWithoutProperties(triggerProps, ["ref"]);
+              innerProps = _objectWithoutProperties(triggerProps, _excluded);
 
           return /*#__PURE__*/React.createElement("span", _extends({}, innerProps, _this2.containerListeners, {
             ref: ref,