@atlaskit/profilecard 22.1.0 → 22.2.2

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @atlaskit/profilecard
 
+## 22.2.2
+
+### Patch Changes
+
+- Updated dependencies
+
+## 22.2.1
+
+### Patch Changes
+
+- [#114979](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/114979)
+  [`06b6a25655d18`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/06b6a25655d18) -
+  Fix for isVisibl
+- [#114983](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/114983)
+  [`ba03c91383ce7`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ba03c91383ce7) -
+  Remove invalid specifier
+
+## 22.2.0
+
+### Minor Changes
+
+- [#113447](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/113447)
+  [`6ef7d7cb5d379`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/6ef7d7cb5d379) -
+  Compiled migration - team card
+
 ## 22.1.0
 
 ### Minor Changes

package/dist/cjs/client/getOrgIdForCloudIdFromAGG.js

@@ -11,7 +11,7 @@ var _graphqlUtils = require("./graphqlUtils");
 var ORG_ID_FROM_CLOUD_ID_QUERY = "query OrgIdFromCloudId($cloudId: ID!) {\n\ttenantContexts(cloudIds: [$cloudId]) {\n\t\torgId\n\t}\n}";
 var addHeaders = function addHeaders(headers) {
   headers.append('atl-client-name', "@atlaskit/profilecard");
-  headers.append('atl-client-version', "22.1.0");
+  headers.append('atl-client-version', "22.2.2");
   return headers;
 };
 function getOrgIdForCloudIdFromAGG(_x, _x2) {

package/dist/cjs/client/getTeamFromAGG.js

@@ -66,7 +66,7 @@ var addHeaders = exports.addHeaders = function addHeaders(headers) {
   headers.append('X-ExperimentalApi', 'teams-beta');
   headers.append('X-ExperimentalApi', 'team-members-beta');
   headers.append('atl-client-name', "@atlaskit/profilecard");
-  headers.append('atl-client-version', "22.1.0");
+  headers.append('atl-client-version', "22.2.2");
   return headers;
 };
 function getTeamFromAGG(_x, _x2, _x3) {

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

@@ -37,7 +37,7 @@ var ErrorMessage = function ErrorMessage(props) {
     }, "Try again and we\u2019ll give it another shot"));
   };
   return /*#__PURE__*/_react.default.createElement(_Error.ErrorWrapper, {
-    "data-testid": "profilecard-error"
+    testId: "profilecard-error"
   }, /*#__PURE__*/_react.default.createElement(_crossCircle.default, {
     label: "icon error",
     size: "xlarge"

package/dist/cjs/components/Team/TeamForbiddenErrorState.js

@@ -26,7 +26,7 @@ var _default = exports.default = function _default(props) {
     });
   }, [analytics]);
   return /*#__PURE__*/_react.default.createElement(_TeamCard.TeamForbiddenErrorStateWrapper, {
-    "data-testid": "team-profilecard-forbidden-error-state"
+    testId: "team-profilecard-forbidden-error-state"
   }, /*#__PURE__*/_react.default.createElement(_emptyState.default, {
     header: intl.formatMessage(_messages.default.teamForbiddenErrorStateTitle),
     description: intl.formatMessage(_messages.default.teamForbiddenErrorStateDescription),

package/dist/cjs/components/Team/TeamLoadingState.js

@@ -22,10 +22,10 @@ var _default = exports.default = function _default(props) {
     });
   }, [analytics]);
   return /*#__PURE__*/_react.default.createElement(_TeamCard.CardWrapper, {
-    "data-testid": "team-profilecard"
+    testId: "team-profilecard"
   }, /*#__PURE__*/_react.default.createElement(_TeamCard.CardHeader, {
     isLoading: true
   }), /*#__PURE__*/_react.default.createElement(_TeamCard.CardContent, null, /*#__PURE__*/_react.default.createElement(_TeamCard.LoadingWrapper, {
-    "data-testid": "team-profilecard-spinner"
+    testId: "team-profilecard-spinner"
   }, /*#__PURE__*/_react.default.createElement(_spinner.default, null))));
 };

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

@@ -21,7 +21,7 @@ var _menu = require("@atlaskit/menu");
 var _verifiedTeamIcon = require("@atlaskit/people-teams-ui-public/verified-team-icon");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _popup = _interopRequireDefault(require("@atlaskit/popup"));
-var _primitives = require("@atlaskit/primitives");
+var _compiled = require("@atlaskit/primitives/compiled");
 var _constants = require("@atlaskit/theme/constants");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _messages = _interopRequireDefault(require("../../messages"));
@@ -250,12 +250,13 @@ var TeamProfilecardContent = function TeamProfilecardContent(_ref5) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [analytics]);
   return /*#__PURE__*/_react.default.createElement(_TeamCard.CardWrapper, {
-    "data-testid": "team-profilecard"
+    testId: "team-profilecard"
   }, /*#__PURE__*/_react.default.createElement(_TeamCard.CardHeader, {
-    image: team.largeHeaderImageUrl || team.smallHeaderImageUrl
+    image: team.largeHeaderImageUrl || team.smallHeaderImageUrl,
+    label: team.displayName
   }), /*#__PURE__*/_react.default.createElement(_TeamCard.CardContent, null, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
     content: team.displayName
-  }, /*#__PURE__*/_react.default.createElement(_primitives.Inline, null, /*#__PURE__*/_react.default.createElement(_TeamCard.TeamName, null, team.displayName), team.isVerified && (0, _platformFeatureFlags.fg)('show_verified_team_icon_in_profile_card') && /*#__PURE__*/_react.default.createElement(_verifiedTeamIcon.VerifiedTeamIcon, null))), /*#__PURE__*/_react.default.createElement(TeamMembers, {
+  }, /*#__PURE__*/_react.default.createElement(_compiled.Inline, null, /*#__PURE__*/_react.default.createElement(_TeamCard.TeamName, null, team.displayName), team.isVerified && (0, _platformFeatureFlags.fg)('show_verified_team_icon_in_profile_card') && /*#__PURE__*/_react.default.createElement(_verifiedTeamIcon.VerifiedTeamIcon, null))), /*#__PURE__*/_react.default.createElement(TeamMembers, {
     analytics: analytics,
     members: team.members,
     generateUserLink: generateUserLink,
@@ -290,8 +291,8 @@ var ErrorMessage = function ErrorMessage(_ref6) {
     }
   }, [analytics, clientFetchProfile]);
   return /*#__PURE__*/_react.default.createElement(_Error.ErrorWrapper, {
-    "data-testid": "team-profilecard-error"
-  }, /*#__PURE__*/_react.default.createElement(_Error2.ErrorIllustration, null), /*#__PURE__*/_react.default.createElement(_primitives.Text, {
+    testId: "team-profilecard-error"
+  }, /*#__PURE__*/_react.default.createElement(_Error2.ErrorIllustration, null), /*#__PURE__*/_react.default.createElement(_compiled.Text, {
     as: "p",
     weight: "semibold"
   }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.default.teamErrorTitle)), /*#__PURE__*/_react.default.createElement(_Error.TeamErrorText, null, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.default.teamErrorText)), clientFetchProfile && /*#__PURE__*/_react.default.createElement(_TeamCard.ActionButtons, null, /*#__PURE__*/_react.default.createElement(_TeamCard.WrappedButton, null, /*#__PURE__*/_react.default.createElement(_loadingButton.default, {
@@ -315,7 +316,7 @@ var TeamProfileCard = function TeamProfileCard(props) {
       });
     } else {
       return /*#__PURE__*/_react.default.createElement(_TeamCard.CardWrapper, {
-        "data-testid": "team-profilecard"
+        testId: "team-profilecard"
       }, /*#__PURE__*/_react.default.createElement(ErrorMessage, {
         analytics: analytics,
         clientFetchProfile: clientFetchProfile,

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

@@ -96,14 +96,15 @@ function ProfilecardTriggerNext(_ref2) {
     product = _ref2.product,
     agentActions = _ref2.agentActions,
     _ref2$ariaHideProfile = _ref2.ariaHideProfileTrigger,
-    ariaHideProfileTrigger = _ref2$ariaHideProfile === void 0 ? false : _ref2$ariaHideProfile;
+    ariaHideProfileTrigger = _ref2$ariaHideProfile === void 0 ? false : _ref2$ariaHideProfile,
+    propsIsVisible = _ref2.isVisible;
   var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
   var _useIntl = (0, _reactIntlNext.useIntl)(),
     formatMessage = _useIntl.formatMessage;
   var isMounted = (0, _react.useRef)(false);
-  var showDelay = trigger === 'click' ? 0 : _config.DELAY_MS_SHOW;
-  var hideDelay = trigger === 'click' ? 0 : _config.DELAY_MS_HIDE;
+  var showDelay = trigger === 'click' || propsIsVisible && (0, _platformFeatureFlags.fg)('fix_profilecard_trigger_isvisible') ? 0 : _config.DELAY_MS_SHOW;
+  var hideDelay = trigger === 'click' || propsIsVisible && (0, _platformFeatureFlags.fg)('fix_profilecard_trigger_isvisible') ? 0 : _config.DELAY_MS_HIDE;
   var showTimer = (0, _react.useRef)(0);
   var hideTimer = (0, _react.useRef)(0);
   var _useState = (0, _react.useState)(false),
@@ -289,6 +290,16 @@ function ProfilecardTriggerNext(_ref2) {
   var onFocus = (0, _react.useCallback)(function () {
     showProfilecard();
   }, [showProfilecard]);
+  (0, _react.useEffect)(function () {
+    if (!(0, _platformFeatureFlags.fg)('fix_profilecard_trigger_isvisible')) {
+      return;
+    }
+    if (propsIsVisible) {
+      showProfilecard();
+    } else {
+      hideProfilecard();
+    }
+  }, [hideProfilecard, propsIsVisible, showProfilecard]);
   var containerListeners = (0, _react.useMemo)(function () {
     return trigger === 'hover' ? {
       onMouseEnter: onMouseEnter,

package/dist/cjs/styled/Card.js

@@ -1,4 +1,4 @@
-/* Card.tsx generated by @compiled/babel-plugin v0.36.0 */
+/* Card.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/styled/Error.compiled.css

@@ -0,0 +1,9 @@
+._11c81oud{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._19bv1ejb{padding-left:var(--ds-space-300,24px)}
+._19pku2gc{margin-top:var(--ds-space-100,8px)}
+._ca0q1ejb{padding-top:var(--ds-space-300,24px)}
+._n3td1ejb{padding-bottom:var(--ds-space-300,24px)}
+._syaz1fxt{color:var(--ds-text,#172b4d)}
+._syaz1wmz{color:var(--ds-text-subtlest,#6b778c)}
+._u5f31ejb{padding-right:var(--ds-space-300,24px)}
+._y3gn1h6o{text-align:center}

package/dist/cjs/styled/Error.js

@@ -1,3 +1,4 @@
+/* Error.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -5,29 +6,56 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TeamErrorText = exports.ErrorWrapper = exports.ErrorTitle = void 0;
+require("./Error.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
 var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _css = require("@atlaskit/css");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _compiled = require("@atlaskit/primitives/compiled");
 var _colors = require("@atlaskit/theme/colors");
 var _constants = require("./constants");
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
+var styles = {
+  errorWrapper: "_y3gn1h6o _ca0q1ejb _u5f31ejb _n3td1ejb _19bv1ejb",
+  errorTitle: "_11c81oud _syaz1fxt _19pku2gc",
+  teamErrorText: "_syaz1wmz _19pku2gc"
+};
+var ErrorWrapper = exports.ErrorWrapper = function ErrorWrapper(props) {
+  return (0, _platformFeatureFlags.fg)('compiled-migration-profilecard') ? /*#__PURE__*/_react.default.createElement(_compiled.Box, (0, _extends2.default)({
+    xcss: (0, _css.cx)(styles.errorWrapper)
+  }, props)) : /*#__PURE__*/_react.default.createElement(ErrorWrapperLegacy, {
+    "data-testId": props.testId
+  }, props.children);
+};
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var ErrorWrapper = exports.ErrorWrapper = _styled.default.div({
+var ErrorWrapperLegacy = _styled.default.div({
   textAlign: 'center',
   padding: "var(--ds-space-300, 24px)",
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   color: _constants.errorIconColor
 });
-
+var ErrorTitle = exports.ErrorTitle = function ErrorTitle(props) {
+  return (0, _platformFeatureFlags.fg)('compiled-migration-profilecard') ? /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    xcss: (0, _css.cx)(styles.errorTitle)
+  }, props.children) : /*#__PURE__*/_react.default.createElement(ErrorTitleLegacy, null, props.children);
+};
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var ErrorTitle = exports.ErrorTitle = _styled.default.p({
+var ErrorTitleLegacy = _styled.default.p({
   font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   color: _constants.errorTitleColor,
   margin: "var(--ds-space-100, 8px)".concat(" 0")
 });
+var TeamErrorText = exports.TeamErrorText = function TeamErrorText(props) {
+  return (0, _platformFeatureFlags.fg)('compiled-migration-profilecard') ? /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    xcss: (0, _css.cx)(styles.teamErrorText)
+  }, props.children) : /*#__PURE__*/_react.default.createElement(TeamErrorTextLegacy, null, props.children);
+};
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var TeamErrorText = exports.TeamErrorText = _styled.default.p({
+var TeamErrorTextLegacy = _styled.default.p({
   color: "var(--ds-text-subtlest, ".concat(_colors.N200, ")"),
   marginTop: "var(--ds-space-100, 8px)"
 });

package/dist/cjs/styled/ReportingLines.js

@@ -1,4 +1,4 @@
-/* ReportingLines.tsx generated by @compiled/babel-plugin v0.36.0 */
+/* ReportingLines.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/styled/TeamCard.compiled.css

@@ -0,0 +1,40 @@
+._11c8o0gd{font:var(--ds-font-heading-medium,normal 500 20px/24px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._2rkoglpi{border-radius:var(--ds-border-radius,4px)}
+._12vemgnk{background-repeat:no-repeat}
+._16jlkb7n{flex-grow:1}
+._18m915vq{overflow-y:hidden}
+._18u01i6y{margin-left:var(--ds-space-negative-025,-2px)}
+._18u0u2gc{margin-left:var(--ds-space-100,8px)}
+._18u0x0bf{margin-left:var(--ds-space-negative-100,-8px)}
+._19bv1ejb{padding-left:var(--ds-space-300,24px)}
+._19pk1b66{margin-top:var(--ds-space-050,4px)}
+._19pk1ejb{margin-top:var(--ds-space-300,24px)}
+._19pk1jfw{margin-top:var(--ds-space-500,40px)}
+._19pkpxbi{margin-top:var(--ds-space-200,1pc)}
+._1bah1yb4{justify-content:space-between}
+._1bsb1osq{width:100%}
+._1bsbnklw{width:20pc}
+._1e0c1kw7{display:inherit}
+._1e0c1txw{display:flex}
+._1e0ccj1k{display:-webkit-box}
+._1lrw1dfr{background-size:cover}
+._1p1dglyw{text-transform:none}
+._1reo15vq{overflow-x:hidden}
+._1tke1l8a{min-height:78pt}
+._2hwx10v4{margin-right:var(--ds-space-negative-300,-24px)}
+._2lx21bp4{flex-direction:column}
+._4cvr1h6o{align-items:center}
+._4t3i1qr7{height:8pc}
+._c71l1wqb{max-height:60px}
+._c71lckbl{max-height:3pc}
+._ca0q1ejb{padding-top:var(--ds-space-300,24px)}
+._i0dlidpf{flex-basis:0}
+._kqswh2mm{position:relative}
+._n3td1ejb{padding-bottom:var(--ds-space-300,24px)}
+._otyr1ejb{margin-bottom:var(--ds-space-300,24px)}
+._otyr1jfw{margin-bottom:var(--ds-space-500,40px)}
+._otyridpf{margin-bottom:0}
+._ouxl1ssb{background-position:50%}
+._syaz1wmz{color:var(--ds-text-subtlest,#6b778c)}
+._u5f31ejb{padding-right:var(--ds-space-300,24px)}
+._y3gn1h6o{text-align:center}

package/dist/cjs/styled/TeamCard.js

@@ -1,3 +1,4 @@
+/* TeamCard.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -5,19 +6,58 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.WrappedButton = exports.TeamName = exports.TeamForbiddenErrorStateWrapper = exports.MoreButton = exports.MemberCount = exports.LoadingWrapper = exports.DescriptionWrapper = exports.Description = exports.CardWrapper = exports.CardTriggerWrapper = exports.CardHeader = exports.CardContent = exports.AvatarSection = exports.ActionButtons = exports.AccessLockSVGWrapper = void 0;
+require("./TeamCard.compiled.css");
+var _runtime = require("@compiled/react/runtime");
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
 var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _css = require("@atlaskit/css");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _compiled = require("@atlaskit/primitives/compiled");
 var _colors = require("@atlaskit/theme/colors");
 var _constants = require("@atlaskit/theme/constants");
 var _constants2 = require("./constants");
 var _templateObject; // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+var styles = {
+  cardtriggerwrapper: "_1e0c1kw7",
+  cardwrapper: "_2rkoglpi _1bsbnklw _kqswh2mm",
+  teamforbiddenerrorstatewrapper: "_1bsbnklw _kqswh2mm",
+  cardheader: "_12vemgnk _ouxl1ssb _1lrw1dfr _4t3i1qr7",
+  cardcontent: "_1e0c1txw _2lx21bp4 _ca0q1ejb _u5f31ejb _n3td1ejb _19bv1ejb _1tke1l8a",
+  teamname: "_11c8o0gd _1reo15vq _18m915vq _1p1dglyw _c71lckbl _1e0ccj1k",
+  membercount: "_syaz1wmz _19pk1b66",
+  avatarsection: "_19pkpxbi _18u01i6y",
+  descriptionwrapper: "_19pkpxbi _4cvr1h6o _1e0c1txw",
+  description: "_1reo15vq _18m915vq _c71l1wqb _1e0ccj1k",
+  actionbuttons: "_1bsb1osq _1e0c1txw _1bah1yb4 _19pk1ejb _2hwx10v4 _otyridpf _18u0x0bf",
+  wrappedbutton: "_i0dlidpf _16jlkb7n _18u0u2gc",
+  morebutton: "_18u0u2gc",
+  loadingwrapper: "_y3gn1h6o _19pk1jfw _otyr1jfw",
+  accesslocksvgwrapper: "_otyr1ejb"
+};
+var CardTriggerWrapper = exports.CardTriggerWrapper = function CardTriggerWrapper() {
+  return (0, _platformFeatureFlags.fg)('compiled-migration-profilecard') ? /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    xcss: (0, _css.cx)(styles.cardtriggerwrapper)
+  }) : /*#__PURE__*/_react.default.createElement(CardTriggerWrapperLegacy, null);
+};
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var CardTriggerWrapper = exports.CardTriggerWrapper = _styled.default.div({
+var CardTriggerWrapperLegacy = _styled.default.div({
   display: 'inherit'
 });
-
+var CardWrapper = exports.CardWrapper = function CardWrapper(_ref) {
+  var testId = _ref.testId,
+    children = _ref.children;
+  return (0, _platformFeatureFlags.fg)('compiled-migration-profilecard') ? /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    xcss: (0, _css.cx)(styles.cardwrapper),
+    backgroundColor: "elevation.surface.overlay",
+    testId: testId
+  }, children) : /*#__PURE__*/_react.default.createElement(CardWrapperLegacy, {
+    "data-testid": testId
+  }, children);
+};
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var CardWrapper = exports.CardWrapper = _styled.default.div({
+var CardWrapperLegacy = _styled.default.div({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   backgroundColor: _constants2.bgColor,
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
@@ -28,32 +68,64 @@ var CardWrapper = exports.CardWrapper = _styled.default.div({
   WebkitFontSmoothing: 'antialiased',
   MozOsxFontSmoothing: 'grayscale'
 });
-
+var TeamForbiddenErrorStateWrapper = exports.TeamForbiddenErrorStateWrapper = function TeamForbiddenErrorStateWrapper(props) {
+  return (0, _platformFeatureFlags.fg)('compiled-migration-profilecard') ? /*#__PURE__*/_react.default.createElement(_compiled.Box, (0, _extends2.default)({
+    xcss: (0, _css.cx)(styles.teamforbiddenerrorstatewrapper)
+  }, props)) : /*#__PURE__*/_react.default.createElement(TeamForbiddenErrorStateWrapperLegacy, {
+    "data-testid": props.testId
+  }, props.children);
+};
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var TeamForbiddenErrorStateWrapper = exports.TeamForbiddenErrorStateWrapper = _styled.default.div({
+var TeamForbiddenErrorStateWrapperLegacy = _styled.default.div({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   width: '320px',
   position: 'relative'
 });
+var CardHeader = exports.CardHeader = function CardHeader(_ref2) {
+  var image = _ref2.image,
+    isLoading = _ref2.isLoading,
+    label = _ref2.label;
+  return (0, _platformFeatureFlags.fg)('compiled-migration-profilecard') ? isLoading || !image ? /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    xcss: (0, _css.cx)(styles.cardheader),
+    backgroundColor: "color.background.neutral"
+  }) : /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    as: "img",
+    alt: label || '',
+    src: image,
+    xcss: (0, _css.cx)(styles.cardheader),
+    backgroundColor: "color.background.neutral"
+  }) : /*#__PURE__*/_react.default.createElement(CardHeaderLegacy, {
+    image: image,
+    isLoading: isLoading
+  });
+};
 
 // eslint-disable-next-line @atlaskit/design-system/no-styled-tagged-template-expression, @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var CardHeader = exports.CardHeader = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\tbackground-color: ", ";\n\tbackground-image: ", ";\n\tbackground-repeat: no-repeat;\n\tbackground-position: center;\n\tbackground-size: cover;\n\tbox-sizing: content-box;\n\theight: 128px;\n"])), function (props) {
+var CardHeaderLegacy = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\tbackground-color: ", ";\n\tbackground-image: ", ";\n\tbackground-repeat: no-repeat;\n\tbackground-position: center;\n\tbackground-size: cover;\n\tbox-sizing: content-box;\n\theight: 128px;\n"])), function (props) {
   return props.isLoading ? "var(--ds-background-neutral, ".concat(_colors.N20, ")") : props.image ? '' : _constants2.teamHeaderBgColor;
 }, function (props) {
   return props.image ? "url(".concat(props.image, ")") : '';
 });
-
+var CardContent = exports.CardContent = function CardContent(props) {
+  return (0, _platformFeatureFlags.fg)('compiled-migration-profilecard') ? /*#__PURE__*/_react.default.createElement(_compiled.Box, (0, _extends2.default)({
+    xcss: (0, _css.cx)(styles.cardcontent)
+  }, props)) : /*#__PURE__*/_react.default.createElement(CardContentLegacy, props);
+};
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var CardContent = exports.CardContent = _styled.default.div({
+var CardContentLegacy = _styled.default.div({
   display: 'flex',
   flexDirection: 'column',
   padding: "var(--ds-space-300, 24px)",
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   minHeight: '104px'
 });
-
+var TeamName = exports.TeamName = function TeamName(props) {
+  return (0, _platformFeatureFlags.fg)('compiled-migration-profilecard') ? /*#__PURE__*/_react.default.createElement(_compiled.Box, (0, _extends2.default)({
+    xcss: (0, _css.cx)(styles.teamname)
+  }, props)) : /*#__PURE__*/_react.default.createElement(TeamNameLegacy, props);
+};
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-var TeamName = exports.TeamName = _styled.default.h6({
+var TeamNameLegacy = _styled.default.h6({
   font: "var(--ds-font-heading-medium, normal 500 20px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
   textTransform: 'none',
   overflow: 'hidden',
@@ -62,78 +134,104 @@ var TeamName = exports.TeamName = _styled.default.h6({
   WebkitLineClamp: 2,
   WebkitBoxOrient: 'vertical'
 });
-
+var MemberCount = exports.MemberCount = function MemberCount(props) {
+  return (0, _platformFeatureFlags.fg)('compiled-migration-profilecard') ? /*#__PURE__*/_react.default.createElement(_compiled.Box, (0, _extends2.default)({
+    xcss: (0, _css.cx)(styles.membercount)
+  }, props)) : /*#__PURE__*/_react.default.createElement(MemberCountLegacy, props);
+};
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var MemberCount = exports.MemberCount = _styled.default.div({
+var MemberCountLegacy = _styled.default.div({
   color: "var(--ds-text-subtlest, ".concat(_colors.N200, ")"),
   marginTop: "var(--ds-space-050, 4px)"
 });
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var AvatarSection = exports.AvatarSection = _styled.default.div({
+var AvatarSection = exports.AvatarSection = function AvatarSection(props) {
+  return (0, _platformFeatureFlags.fg)('compiled-migration-profilecard') ? /*#__PURE__*/_react.default.createElement(_compiled.Box, (0, _extends2.default)({
+    xcss: (0, _css.cx)(styles.avatarsection)
+  }, props)) : /*#__PURE__*/_react.default.createElement(AvatarSectionLegacy, props);
+};
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/use-primitives -- Ignored via go/DSP-18766
+var AvatarSectionLegacy = _styled.default.div({
   marginTop: "var(--ds-space-200, 16px)",
   marginLeft: "var(--ds-space-negative-025, -2px)"
 });
-
+var DescriptionWrapper = exports.DescriptionWrapper = function DescriptionWrapper(props) {
+  return (0, _platformFeatureFlags.fg)('compiled-migration-profilecard') ? /*#__PURE__*/_react.default.createElement(_compiled.Box, (0, _extends2.default)({
+    xcss: (0, _css.cx)(styles.descriptionwrapper)
+  }, props)) : /*#__PURE__*/_react.default.createElement(DescriptionWrapperLegacy, props);
+};
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var DescriptionWrapper = exports.DescriptionWrapper = _styled.default.div({
+var DescriptionWrapperLegacy = _styled.default.div({
   marginTop: "var(--ds-space-200, 16px)",
   alignItems: 'center',
   display: 'flex'
 });
-
+var Description = exports.Description = function Description(props) {
+  return (0, _platformFeatureFlags.fg)('compiled-migration-profilecard') ? /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    xcss: (0, _css.cx)(styles.description)
+  }, /*#__PURE__*/_react.default.createElement(_compiled.Text, (0, _extends2.default)({
+    maxLines: 3
+  }, props))) : /*#__PURE__*/_react.default.createElement(DescriptionLegacy, props);
+};
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var Description = exports.Description = _styled.default.span({
+var DescriptionLegacy = _styled.default.span({
   overflow: 'hidden',
   maxHeight: '60px',
   display: '-webkit-box',
   WebkitLineClamp: 3,
   WebkitBoxOrient: 'vertical'
 });
-
+var ActionButtons = exports.ActionButtons = function ActionButtons(props) {
+  return (0, _platformFeatureFlags.fg)('compiled-migration-profilecard') ? /*#__PURE__*/_react.default.createElement(_compiled.Box, (0, _extends2.default)({
+    xcss: (0, _css.cx)(styles.actionbuttons),
+    backgroundColor: "elevation.surface.overlay"
+  }, props)) : /*#__PURE__*/_react.default.createElement(ActionButtonsLegacy, props);
+};
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var ActionButtons = exports.ActionButtons = _styled.default.div({
+var ActionButtonsLegacy = _styled.default.div({
   width: 'calc(100% + 8px)',
   display: 'flex',
   justifyContent: 'space-between',
   margin: "var(--ds-space-300, 24px)".concat(" ", "var(--ds-space-negative-300, -24px)", " 0 ", "var(--ds-space-negative-100, -8px)"),
   backgroundColor: "var(--ds-surface-overlay, hsla(0, 100%, 100%, 0.2))"
 });
-
+var WrappedButton = exports.WrappedButton = function WrappedButton(props) {
+  return (0, _platformFeatureFlags.fg)('compiled-migration-profilecard') ? /*#__PURE__*/_react.default.createElement(_compiled.Box, (0, _extends2.default)({
+    xcss: (0, _css.cx)(styles.wrappedbutton)
+  }, props)) : /*#__PURE__*/_react.default.createElement(WrappedButtonLegacy, props);
+};
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var WrappedButton = exports.WrappedButton = _styled.default.div({
+var WrappedButtonLegacy = _styled.default.div({
   flexBasis: 0,
   flexGrow: 1,
   marginLeft: "var(--ds-space-100, 8px)"
 });
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var MoreButton = exports.MoreButton = _styled.default.div({
+var MoreButton = exports.MoreButton = function MoreButton(props) {
+  return (0, _platformFeatureFlags.fg)('compiled-migration-profilecard') ? /*#__PURE__*/_react.default.createElement(_compiled.Box, (0, _extends2.default)({
+    xcss: (0, _css.cx)(styles.morebutton)
+  }, props)) : /*#__PURE__*/_react.default.createElement(MoreButtonLegacy, props);
+};
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/use-primitives -- Ignored via go/DSP-18766
+var MoreButtonLegacy = _styled.default.div({
   marginLeft: "var(--ds-space-100, 8px)"
 });
-
+var LoadingWrapper = exports.LoadingWrapper = function LoadingWrapper(props) {
+  return (0, _platformFeatureFlags.fg)('compiled-migration-profilecard') ? /*#__PURE__*/_react.default.createElement(_compiled.Box, (0, _extends2.default)({
+    xcss: (0, _css.cx)(styles.loadingwrapper)
+  }, props)) : /*#__PURE__*/_react.default.createElement(LoadingWrapperLegacy, {
+    "data-testid": props.testId
+  }, props.children);
+};
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var LoadingWrapper = exports.LoadingWrapper = _styled.default.div({
+var LoadingWrapperLegacy = _styled.default.div({
   textAlign: 'center',
   marginTop: "var(--ds-space-500, 40px)"
 });
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var AccessLockSVGWrapper = exports.AccessLockSVGWrapper = _styled.default.div({
+var AccessLockSVGWrapper = exports.AccessLockSVGWrapper = function AccessLockSVGWrapper(props) {
+  return (0, _platformFeatureFlags.fg)('compiled-migration-profilecard') ? /*#__PURE__*/_react.default.createElement(_compiled.Box, (0, _extends2.default)({
+    xcss: (0, _css.cx)(styles.accesslocksvgwrapper)
+  }, props)) : /*#__PURE__*/_react.default.createElement(AccessLockSVGWrapperLegacy, props);
+};
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/use-primitives -- Ignored via go/DSP-18766
+var AccessLockSVGWrapperLegacy = _styled.default.div({
   marginBottom: "var(--ds-space-300, 24px)"
-});
-
-// export const LoadingTeamName = styled.div`
-//   width: 175px;
-//   height: ${gridSize () *3)px;
-//   border-radius: ${borderRadius}px;
-//   background-color: #f4f5f7;
-// `;
-
-// export const LoadingMemberCount = styled.div`
-//   width: 81px;
-//   height: ${gridSize () *2)px;
-//   border-radius: 3px;
-//   background-color: #f4f5f7;
-//   margin: 4px 0;
-// `;
+});

package/dist/cjs/util/analytics.js

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

package/dist/es2019/client/getOrgIdForCloudIdFromAGG.js

@@ -6,7 +6,7 @@ const ORG_ID_FROM_CLOUD_ID_QUERY = `query OrgIdFromCloudId($cloudId: ID!) {
 }`;
 const addHeaders = headers => {
   headers.append('atl-client-name', "@atlaskit/profilecard");
-  headers.append('atl-client-version', "22.1.0");
+  headers.append('atl-client-version', "22.2.2");
   return headers;
 };
 export async function getOrgIdForCloudIdFromAGG(url, cloudId) {

package/dist/es2019/client/getTeamFromAGG.js

@@ -75,7 +75,7 @@ export const addHeaders = headers => {
   headers.append('X-ExperimentalApi', 'teams-beta');
   headers.append('X-ExperimentalApi', 'team-members-beta');
   headers.append('atl-client-name', "@atlaskit/profilecard");
-  headers.append('atl-client-version', "22.1.0");
+  headers.append('atl-client-version', "22.2.2");
   return headers;
 };
 export async function getTeamFromAGG(url, teamId, siteId) {

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

@@ -29,7 +29,7 @@ const ErrorMessage = props => {
     }, "Try again and we\u2019ll give it another shot"));
   };
   return /*#__PURE__*/React.createElement(ErrorWrapper, {
-    "data-testid": "profilecard-error"
+    testId: "profilecard-error"
   }, /*#__PURE__*/React.createElement(IconError, {
     label: "icon error",
     size: "xlarge"