@atlaskit/profilecard 22.0.2 → 22.1.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/profilecard
 
+## 22.1.0
+
+### Minor Changes
+
+- [#113227](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/113227)
+  [`d8c1edd78e6d4`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d8c1edd78e6d4) -
+  Compiled migration - user profile card
+
+## 22.0.3
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 22.0.2
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -32,6 +32,9 @@
         {
             "path": "../../../design-system/button/afm-cc/tsconfig.json"
         },
+        {
+            "path": "../../../design-system/css/afm-cc/tsconfig.json"
+        },
         {
             "path": "../../../design-system/dropdown-menu/afm-cc/tsconfig.json"
         },

package/afm-jira/tsconfig.json

@@ -32,6 +32,9 @@
 		{
 			"path": "../../../design-system/button/afm-jira/tsconfig.json"
 		},
+		{
+			"path": "../../../design-system/css/afm-jira/tsconfig.json"
+		},
 		{
 			"path": "../../../design-system/dropdown-menu/afm-jira/tsconfig.json"
 		},

package/afm-post-office/tsconfig.json

@@ -32,6 +32,9 @@
 		{
 			"path": "../../../design-system/button/afm-post-office/tsconfig.json"
 		},
+		{
+			"path": "../../../design-system/css/afm-post-office/tsconfig.json"
+		},
 		{
 			"path": "../../../design-system/dropdown-menu/afm-post-office/tsconfig.json"
 		},

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.0.2");
+  headers.append('atl-client-version', "22.1.0");
   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.0.2");
+  headers.append('atl-client-version', "22.1.0");
   return headers;
 };
 function getTeamFromAGG(_x, _x2, _x3) {

package/dist/cjs/components/Icon/IconLabel.js

@@ -16,6 +16,7 @@ var _clockRecent = _interopRequireDefault(require("@atlaskit/icon/core/migration
 var _email = _interopRequireDefault(require("@atlaskit/icon/core/migration/email"));
 var _location = _interopRequireDefault(require("@atlaskit/icon/core/migration/location"));
 var _officeBuilding = _interopRequireDefault(require("@atlaskit/icon/core/migration/office-building"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _Card = require("../../styled/Card");
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
@@ -43,13 +44,11 @@ var IconLabel = exports.default = /*#__PURE__*/function (_React$PureComponent) {
       var displayIcon = IconElement ? /*#__PURE__*/_react.default.createElement(IconElement, {
         label: "".concat(this.props.icon),
         LEGACY_size: "small",
-        color: "currentColor"
+        color: (0, _platformFeatureFlags.fg)('compiled-migration-profilecard') ? "var(--ds-text-subtlest, #626F86)" : 'currentColor'
       }) : null;
-      return /*#__PURE__*/_react.default.createElement(_Card.DetailsLabel, null, /*#__PURE__*/_react.default.createElement(_Card.DetailsLabelIcon, {
-        as: "dt"
-      }, displayIcon), /*#__PURE__*/_react.default.createElement(_Card.DetailsLabelText, {
-        as: "dd"
-      }, this.props.children));
+      return /*#__PURE__*/_react.default.createElement(_Card.DetailsLabel, {
+        extraTopSpace: this.props.extraTopSpace
+      }, /*#__PURE__*/_react.default.createElement(_Card.DetailsLabelIcon, null, displayIcon), /*#__PURE__*/_react.default.createElement(_Card.DetailsLabelText, null, this.props.children));
     }
   }]);
 }(_react.default.PureComponent);

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

@@ -45,7 +45,7 @@ var OverflowProfileCardButtons = exports.OverflowProfileCardButtons = function O
     });
   }, [numActions, fireAnalyticsWithDuration]);
   return /*#__PURE__*/_react.default.createElement(_Card.OverflowActionButtonsWrapper, {
-    "data-testid": "profilecard-actions-overflow"
+    testId: "profilecard-actions-overflow"
   }, /*#__PURE__*/_react.default.createElement(_dropdownMenu.default, {
     onOpenChange: onOpenChange,
     placement: 'bottom-end',

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

@@ -57,9 +57,9 @@ var useKudos = function useKudos(cloudId, userId, teamCentralBaseUrl, openKudosD
 };
 var Wrapper = function Wrapper(props) {
   return /*#__PURE__*/_react.default.createElement(_Card.CardWrapper, {
-    "data-testid": "profilecard",
+    testId: "profilecard",
     role: "dialog",
-    "aria-labelledby": "profilecard-name-label"
+    labelledBy: "profilecard-name-label"
   }, props.children);
 };
 var ProfilecardInternal = exports.ProfilecardInternal = function ProfilecardInternal(props) {
@@ -162,7 +162,7 @@ var Actions = function Actions(_ref) {
   var regularActions = actions.slice(0, _OverflowProfileCardButtons.ACTION_OVERFLOW_THRESHOLD);
   var overflowActions = actions.length > _OverflowProfileCardButtons.ACTION_OVERFLOW_THRESHOLD ? actions.slice(_OverflowProfileCardButtons.ACTION_OVERFLOW_THRESHOLD) : undefined;
   return /*#__PURE__*/_react.default.createElement(_Card.ActionButtonGroup, {
-    "data-testid": "profilecard-actions"
+    testId: "profilecard-actions"
   }, regularActions.map(function (action, index) {
     var isKudos = action.id === GIVE_KUDOS_ACTION_ID;
     var button = /*#__PURE__*/_react.default.createElement(_focusRing.default, {
@@ -204,7 +204,7 @@ var LoadingView = function LoadingView(_ref2) {
     });
   }, [fireAnalyticsWithDuration]);
   return /*#__PURE__*/_react.default.createElement(_Card.SpinnerContainer, {
-    "data-testid": "profilecard-spinner-container"
+    testId: "profilecard-spinner-container"
   }, /*#__PURE__*/_react.default.createElement(_spinner.default, null));
 };
 var _default = exports.default = (0, _analyticsNext.withAnalyticsEvents)()(ProfilecardInternal);

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

@@ -90,7 +90,7 @@ var CustomLozenges = function CustomLozenges(_ref) {
 var BotProfileCardDetails = function BotProfileCardDetails(props) {
   var fullName = props.fullName,
     nickname = props.nickname;
-  return /*#__PURE__*/_react.default.createElement(_Card.DetailsGroup, null, renderName(nickname, fullName), /*#__PURE__*/_react.default.createElement(_Card.AppTitleLabel, null, "App"));
+  return /*#__PURE__*/_react.default.createElement(_Card.DetailsGroup, null, renderName(nickname, fullName), /*#__PURE__*/_react.default.createElement(_Card.AppTitleLabel, null, "APP"));
 };
 var DisabledProfileCardDetails = function DisabledProfileCardDetails(props) {
   var companyName = props.companyName,
@@ -130,7 +130,8 @@ var ProfileCardDetails = exports.ProfileCardDetails = function ProfileCardDetail
     as: "dl",
     xcss: detailedListWrapperStyles
   }, /*#__PURE__*/_react.default.createElement(_Icon.IconLabel, {
-    icon: "email"
+    icon: "email",
+    extraTopSpace: true
   }, props.email), /*#__PURE__*/_react.default.createElement(_Icon.IconLabel, {
     icon: "time"
   }, props.timestring), /*#__PURE__*/_react.default.createElement(_Icon.IconLabel, {

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

@@ -176,7 +176,7 @@ var ProfileCardResourced = /*#__PURE__*/function (_React$PureComponent) {
         }));
       } else if (hasError) {
         return /*#__PURE__*/_react.default.createElement(_Card.CardWrapper, {
-          "data-testid": "profile-card-resourced-error-state"
+          testId: "profile-card-resourced-error-state"
         }, /*#__PURE__*/_react.default.createElement(_Error.ErrorMessage, {
           errorType: error,
           reload: this.clientFetchProfile,

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

@@ -410,7 +410,7 @@ function ProfilecardTriggerNext(_ref2) {
 var LoadingView = function LoadingView(_ref4) {
   var fireAnalytics = _ref4.fireAnalytics;
   return /*#__PURE__*/_react.default.createElement(_Card.CardWrapper, {
-    "data-testId": "profilecard.profilecardtrigger.loading"
+    testId: "profilecard.profilecardtrigger.loading"
   }, /*#__PURE__*/_react.default.createElement(_UserLoadingState.default, {
     fireAnalytics: fireAnalytics
   }));

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

@@ -0,0 +1,78 @@
+._11c81vlj{font:var(--ds-font-body-small,normal 400 11px/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._11c8qk37{font:var(--ds-font-body-UNSAFE_small,normal 400 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._2rkoglpi{border-radius:var(--ds-border-radius,4px)}
+._zulp12x7{gap:var(--ds-space-075,6px)}
+._zulpu2gc{gap:var(--ds-space-100,8px)}
+._12vemgnk{background-repeat:no-repeat}
+._154i1ejb{top:var(--ds-space-300,24px)}
+._154ixy5q{top:var(--ds-space-400,2pc)}
+._154ize3t{top:var(--ds-space-0,0)}
+._16jlkb7n{flex-grow:1}
+._16qs1cd0{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #091e4226,0 0 1px #091e424f)}
+._18m915vq{overflow-y:hidden}
+._18u01epz{margin-left:var(--ds-space-1000,5pc)}
+._18u0u2gc{margin-left:var(--ds-space-100,8px)}
+._18u0utpp{margin-left:var(--ds-space-150,9pt)}
+._18u0ze3t{margin-left:var(--ds-space-0,0)}
+._19bv12x7{padding-left:var(--ds-space-075,6px)}
+._19bv1ejb{padding-left:var(--ds-space-300,24px)}
+._19bvxy5q{padding-left:var(--ds-space-400,2pc)}
+._19pk1b66{margin-top:var(--ds-space-050,4px)}
+._19pkpxbi{margin-top:var(--ds-space-200,1pc)}
+._19pkutpp{margin-top:var(--ds-space-150,9pt)}
+._19pkxy5q{margin-top:var(--ds-space-400,2pc)}
+._19pkze3t{margin-top:var(--ds-space-0,0)}
+._1bah1h6o{justify-content:center}
+._1bah1y6m{justify-content:flex-start}
+._1bahesu3{justify-content:flex-end}
+._1bsb18pt{width:228px}
+._1bsb1gwv{width:360px}
+._1bsb1ns9{width:-moz-fit-content;width:fit-content}
+._1bsb1w81{width:150px}
+._1bsb7vkz{width:1pc}
+._1bsbzwfg{width:2pc}
+._1bto1l2s{text-overflow:ellipsis}
+._1e0c1o8l{display:inline-block}
+._1e0c1txw{display:flex}
+._1e0c1ule{display:block}
+._1e0cglyw{display:none}
+._1itk1419{background-image:linear-gradient(to bottom,var(--ds-background-brand-bold,#0c66e4) 0,var(--ds-background-brand-bold,#0c66e4) 100%)}
+._1itkkf3t{background-image:linear-gradient(to bottom,var(--ds-background-disabled,#091e4208) 0,var(--ds-background-disabled,#091e4208) 100%)}
+._1itkq1hn{background-image:radial-gradient(circle,var(--ds-background-information-pressed,#85b8ff) 0,var(--ds-background-discovery-pressed,#b8acf6) 25%,transparent 50%)}
+._1lrw14bs{background-size:100% 6pc}
+._1ltv1ejb{left:var(--ds-space-300,24px)}
+._1ltvze3t{left:var(--ds-space-0,0)}
+._1n261g80{flex-wrap:wrap}
+._1o9zidpf{flex-shrink:0}
+._1pby1mrw{z-index:-1}
+._1reo15vq{overflow-x:hidden}
+._1tkebv7e{min-height:136px}
+._1xi2ze3t{right:var(--ds-space-0,0)}
+._2hwxze3t{margin-right:var(--ds-space-0,0)}
+._2lx21bp4{flex-direction:column}
+._2lx2vrvc{flex-direction:row}
+._4cvr1h6o{align-items:center}
+._4t3i16xz{height:6pc}
+._4t3i1w81{height:150px}
+._4t3i7vkz{height:1pc}
+._4t3izwfg{height:2pc}
+._5sagi11n{animation-duration:3s}
+._94n5ze3t{bottom:var(--ds-space-0,0)}
+._ca0q1ejb{padding-top:var(--ds-space-300,24px)}
+._i0dl1wug{flex-basis:auto}
+._j7hq1q51{animation-name:k1ojqp0a}
+._kqswh2mm{position:relative}
+._kqswstnw{position:absolute}
+._mkrz1rip{clip-path:inset(0 0 0 0 round 3px)}
+._n3td1ejb{padding-bottom:var(--ds-space-300,24px)}
+._o5721q9c{white-space:nowrap}
+._otyrze3t{margin-bottom:var(--ds-space-0,0)}
+._s7n4jp4b{vertical-align:top}
+._syaz131l{color:var(--ds-text-subtlest,#626f86)}
+._syaz1fxt{color:var(--ds-text,#172b4d)}
+._tip8kb7n{animation-iteration-count:1}
+._u5f312x7{padding-right:var(--ds-space-075,6px)}
+._u5f31ejb{padding-right:var(--ds-space-300,24px)}
+._uiztglyw{-webkit-user-select:none;-ms-user-select:none;user-select:none}
+._y3gnusic{text-align:right}
+@keyframes k1ojqp0a{0%{transform:translate(-5pc,-50px)}to{transform:translate(90px,-70px)}}

package/dist/cjs/styled/Card.js

@@ -1,3 +1,4 @@
+/* Card.tsx generated by @compiled/babel-plugin v0.36.0 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -5,11 +6,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SpinnerContainer = exports.ProfileImage = exports.OverflowActionButtonsWrapper = exports.LozengeWrapper = exports.KudosBlobAnimationStyle = exports.KudosBlobAnimation = exports.JobTitleLabel = exports.DisabledInfo = exports.DetailsLabelText = exports.DetailsLabelIcon = exports.DetailsLabel = exports.DetailsGroup = exports.CustomLozengeContainer = exports.CardWrapper = exports.CardContent = exports.CardContainer = exports.AppTitleLabel = exports.AnimationWrapper = exports.AnimatedKudosButton = exports.ActionsFlexSpacer = exports.ActionButtonGroup = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+require("./Card.compiled.css");
+var _runtime = require("@compiled/react/runtime");
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/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");
@@ -17,67 +22,222 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
 /* eslint-disable @atlaskit/design-system/no-styled-tagged-template-expression -- needs manual remediation */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+var kudosButtonAnimationTransformationCompiled = null;
+var styles = {
+  cardWrapper: "_2rkoglpi _1bsb1gwv",
+  profileImage: "_kqswstnw _154i1ejb _1ltv1ejb",
+  actionsFlexSpacer: "_16jlkb7n _1o9zidpf _i0dl1wug",
+  kudosBlobAnimationStyle: "_1e0cglyw _4t3i1w81 _1bsb1w81 _1pby1mrw _kqswstnw _154ixy5q",
+  animationWrapper: "_mkrz1rip _kqswstnw _154ize3t _1ltvze3t _94n5ze3t _1xi2ze3t",
+  animatedKudosButton: "_18u0u2gc",
+  actionButtonGroup: "_zulp12x7 _uiztglyw _19pkpxbi _2hwxze3t _18u0ze3t _otyrze3t _y3gnusic _1bahesu3 _1e0c1txw",
+  overflowActionButtonsWrapper: "_1e0c1o8l _1bsbzwfg _4t3izwfg",
+  cardContent: "_1e0c1txw _2lx21bp4 _1tkebv7e",
+  detailsGroup: "_1e0c1txw _2lx21bp4 _18u01epz _19bvxy5q _1bsb18pt",
+  disabledInfo: "_11c81vlj _syaz1fxt _19pkutpp _2hwxze3t _18u0ze3t _otyrze3t",
+  lozengeWrapper: "_19pkpxbi _1e0c1ule",
+  customLozengeContainer: "_1e0c1txw _2lx2vrvc _1n261g80 _1bah1y6m _19pkutpp",
+  spinnerContainer: "_4cvr1h6o _1e0c1txw _4t3i16xz _1bah1h6o _kqswh2mm",
+  cardContainer: "_1reo15vq _18m915vq _kqswh2mm _12vemgnk _1lrw14bs _ca0q1ejb _19bv1ejb _u5f31ejb _n3td1ejb",
+  cardContainerActiveUser: "_1itk1419",
+  cardContainerDisabledUser: "_1itkkf3t",
+  cardContainerWithElevation: "_2rkoglpi _16qs1cd0",
+  detailsLabel: "_zulpu2gc _1e0c1txw _4cvr1h6o _1bah1y6m _19pkutpp _2hwxze3t _18u0ze3t _otyrze3t _o5721q9c",
+  detailsLabelExtraTopSpace: "_19pkxy5q",
+  detailsLabelIcon: "_1e0c1txw _1o9zidpf _syaz131l _1bsb7vkz _4t3i7vkz _s7n4jp4b _19pkze3t",
+  detailsLabelText: "_1reo15vq _18m915vq _11c8qk37 _1bto1l2s _syaz1fxt _19pkze3t _18u0ze3t",
+  kudosBlobAnimation: "_1e0cglyw _4t3i1w81 _1bsb1w81 _1pby1mrw _kqswstnw _j7hq1q51 _tip8kb7n _5sagi11n _1itkq1hn",
+  jobTitleLabel: "_19pkze3t _otyrze3t _18u0utpp _2hwxze3t",
+  appTitleLabel: "_2rkoglpi _syaz1fxt _u5f312x7 _19bv12x7 _1bsb1ns9 _19pk1b66 _otyrze3t _18u0utpp _2hwxze3t"
+};
+var CardWrapper = exports.CardWrapper = function CardWrapper(_ref) {
+  var children = _ref.children,
+    role = _ref.role,
+    testId = _ref.testId,
+    labelledBy = _ref.labelledBy;
+  return (0, _platformFeatureFlags.fg)('compiled-migration-profilecard') ? /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    xcss: (0, _css.cx)(styles.cardWrapper),
+    backgroundColor: 'elevation.surface.overlay',
+    role: role,
+    testId: testId,
+    "aria-labelledby": labelledBy
+  }, children) : /*#__PURE__*/_react.default.createElement(CardWrapperLegacy, {
+    "data-testid": testId,
+    role: role,
+    "aria-labelledby": labelledBy
+  }, 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(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\tbackground-color: ", ";\n\tborder-radius: ", ";\n\twidth: 360px;\n"])), _constants2.bgColor, "var(--ds-border-radius, 3px)");
-
+var CardWrapperLegacy = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\tbackground-color: ", ";\n\tborder-radius: ", ";\n\twidth: 360px;\n"])), _constants2.bgColor, "var(--ds-border-radius, 3px)");
+var ProfileImage = exports.ProfileImage = function ProfileImage(_ref2) {
+  var children = _ref2.children;
+  return (0, _platformFeatureFlags.fg)('compiled-migration-profilecard') ? /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    xcss: (0, _css.cx)(styles.profileImage)
+  }, children) : /*#__PURE__*/_react.default.createElement(ProfileImageLegacy, null, children);
+};
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var ProfileImage = exports.ProfileImage = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\tposition: absolute;\n\ttop: ", ";\n\tleft: ", ";\n"])), "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)");
-
+var ProfileImageLegacy = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\tposition: absolute;\n\ttop: ", ";\n\tleft: ", ";\n"])), "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)");
+var ActionsFlexSpacer = exports.ActionsFlexSpacer = function ActionsFlexSpacer() {
+  return (0, _platformFeatureFlags.fg)('compiled-migration-profilecard') ? /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    xcss: (0, _css.cx)(styles.actionsFlexSpacer)
+  }) : /*#__PURE__*/_react.default.createElement(ActionsFlexSpacerLegacy, null);
+};
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var ActionsFlexSpacer = exports.ActionsFlexSpacer = _styled.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\tflex: 1 0 auto;\n"])));
+var ActionsFlexSpacerLegacy = _styled.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\tflex: 1 0 auto;\n"])));
 
 // eslint-disable-next-line @atlaskit/design-system/no-keyframes-tagged-template-expression -- needs manual remediation
 var kudosButtonAnimationTransformation = (0, _react2.keyframes)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  0%   { transform: translate(-80px, -50px); }\n  100% { transform: translate(90px, -70px); }\n"])));
+var KudosBlobAnimationStyle = exports.KudosBlobAnimationStyle = function KudosBlobAnimationStyle() {
+  return (0, _platformFeatureFlags.fg)('compiled-migration-profilecard') ? /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    xcss: (0, _css.cx)(styles.kudosBlobAnimationStyle)
+  }) :
+  /*#__PURE__*/
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+  _react.default.createElement(KudosBlobAnimationStyleLegacy, {
+    className: "kudos-blob-animation"
+  });
+};
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var KudosBlobAnimationStyle = exports.KudosBlobAnimationStyle = _styled.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n\tdisplay: none;\n\theight: 150px;\n\twidth: 150px;\n\tz-index: -1;\n\tposition: absolute;\n\ttop: ", "em;\n\tanimation-name: ", ";\n\tanimation-iteration-count: 1;\n\tanimation-duration: 3s;\n\tbackground-image: radial-gradient(\n\t\tcircle,\n\t\t", " 0%,\n\t\t", " 25%,\n\t\ttransparent 50%\n\t);\n\toverflow: hidden;\n"])), 32 / 14, kudosButtonAnimationTransformation, "var(--ds-background-information-pressed, #85B8FF)", "var(--ds-background-discovery-pressed, #B8ACF6)");
-var KudosBlobAnimation = exports.KudosBlobAnimation = function KudosBlobAnimation(props) {
-  return (
-    /*#__PURE__*/
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    _react.default.createElement(KudosBlobAnimationStyle, (0, _extends2.default)({
-      className: "kudos-blob-animation"
-    }, props))
-  );
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled
+var KudosBlobAnimationStyleLegacy = _styled.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n\tdisplay: none;\n\theight: 150px;\n\twidth: 150px;\n\tz-index: -1;\n\tposition: absolute;\n\ttop: ", "em;\n\tanimation-name: ", ";\n\tanimation-iteration-count: 1;\n\tanimation-duration: 3s;\n\tbackground-image: radial-gradient(\n\t\tcircle,\n\t\t", " 0%,\n\t\t", " 25%,\n\t\ttransparent 50%\n\t);\n\toverflow: hidden;\n"])), 32 / 14, kudosButtonAnimationTransformation, "var(--ds-background-information-pressed, #85B8FF)", "var(--ds-background-discovery-pressed, #B8ACF6)");
+var KudosBlobAnimation = exports.KudosBlobAnimation = function KudosBlobAnimation() {
+  return (0, _platformFeatureFlags.fg)('compiled-migration-profilecard') ? /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    xcss: (0, _css.cx)(styles.kudosBlobAnimationStyle)
+  }) : /*#__PURE__*/_react.default.createElement(KudosBlobAnimationLegacy, null);
+};
+var KudosBlobAnimationLegacy = function KudosBlobAnimationLegacy() {
+  return /*#__PURE__*/_react.default.createElement(KudosBlobAnimationStyle, null);
+};
+var AnimationWrapper = exports.AnimationWrapper = function AnimationWrapper(_ref3) {
+  var children = _ref3.children;
+  return (0, _platformFeatureFlags.fg)('compiled-migration-profilecard') ? /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    xcss: (0, _css.cx)(styles.animationWrapper)
+  }, children) : /*#__PURE__*/_react.default.createElement(AnimationWrapperLegacy, null, children);
 };
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var AnimationWrapper = exports.AnimationWrapper = _styled.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n\tclip-path: inset(0px 0px 0px 0px round ", "px);\n\tposition: absolute;\n\ttop: 0;\n\tleft: 0;\n\tbottom: 0;\n\tright: 0;\n"])), (0, _constants.borderRadius)());
-
+var AnimationWrapperLegacy = _styled.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n\tclip-path: inset(0px 0px 0px 0px round ", "px);\n\tposition: absolute;\n\ttop: 0;\n\tleft: 0;\n\tbottom: 0;\n\tright: 0;\n"])), (0, _constants.borderRadius)());
+var AnimatedKudosButton = exports.AnimatedKudosButton = function AnimatedKudosButton(_ref4) {
+  var children = _ref4.children;
+  return (0, _platformFeatureFlags.fg)('compiled-migration-profilecard') ? /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    xcss: (0, _css.cx)(styles.animatedKudosButton)
+  }, children) : /*#__PURE__*/_react.default.createElement(AnimatedKudosButtonLegacy, null, children);
+};
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var AnimatedKudosButton = exports.AnimatedKudosButton = _styled.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n\tmargin-left: ", ";\n\n\t/* Need babel-plugin-emotion to use component selector */\n\t/* Previously with styled-components: &:hover {KudosBlobAnimation} { */\n\t&:focus-within .kudos-blob-animation,\n\t&:focus .kudos-blob-animation,\n\t&:hover .kudos-blob-animation {\n\t\tdisplay: block;\n\t}\n"])), "var(--ds-space-100, 8px)");
-
+var AnimatedKudosButtonLegacy = _styled.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n\tmargin-left: ", ";\n\n\t/* Need babel-plugin-emotion to use component selector */\n\t/* Previously with styled-components: &:hover {KudosBlobAnimation} { */\n\t&:focus-within .kudos-blob-animation,\n\t&:focus .kudos-blob-animation,\n\t&:hover .kudos-blob-animation {\n\t\tdisplay: block;\n\t}\n"])), "var(--ds-space-100, 8px)");
+var ActionButtonGroup = exports.ActionButtonGroup = function ActionButtonGroup(_ref5) {
+  var children = _ref5.children,
+    testId = _ref5.testId;
+  return (0, _platformFeatureFlags.fg)('compiled-migration-profilecard') ? /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    testId: testId,
+    xcss: (0, _css.cx)(styles.actionButtonGroup)
+  }, children) : /*#__PURE__*/_react.default.createElement(ActionButtonGroupLegacy, {
+    "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 ActionButtonGroup = exports.ActionButtonGroup = _styled.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n\tuser-select: none;\n\tmargin: ", " 0 0 0;\n\ttext-align: right;\n\tdisplay: flex;\n\tjustify-content: flex-end;\n\n\tbutton,\n\ta {\n\t\tposition: relative;\n\t}\n\n\tbutton,\n\ta,\n\tspan {\n\t\tmargin-left: ", ";\n\n\t\t&:first-child {\n\t\t\tmargin-left: ", ";\n\t\t}\n\t}\n\n\ta,\n\tbutton {\n\t\t&:focus {\n\t\t\toutline-color: ", ";\n\t\t\toutline-offset: ", ";\n\t\t\toutline-style: solid;\n\t\t\toutline-width: ", ";\n\t\t}\n\t}\n"])), "var(--ds-space-200, 16px)", "var(--ds-space-100, 8px)", "var(--ds-space-0, 0px)", "var(--ds-border-focused, ".concat(_colors.B200, ")"), "var(--ds-border-width, 2px)", "var(--ds-border-width, 2px)");
-
+var ActionButtonGroupLegacy = _styled.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n\tuser-select: none;\n\tmargin: ", " 0 0 0;\n\ttext-align: right;\n\tdisplay: flex;\n\tjustify-content: flex-end;\n\n\tbutton,\n\ta {\n\t\tposition: relative;\n\t}\n\n\tbutton,\n\ta,\n\tspan {\n\t\tmargin-left: ", ";\n\n\t\t&:first-child {\n\t\t\tmargin-left: ", ";\n\t\t}\n\t}\n\n\ta,\n\tbutton {\n\t\t&:focus {\n\t\t\toutline-color: ", ";\n\t\t\toutline-offset: ", ";\n\t\t\toutline-style: solid;\n\t\t\toutline-width: ", ";\n\t\t}\n\t}\n"])), "var(--ds-space-200, 16px)", "var(--ds-space-100, 8px)", "var(--ds-space-0, 0px)", "var(--ds-border-focused, ".concat(_colors.B200, ")"), "var(--ds-border-width, 2px)", "var(--ds-border-width, 2px)");
+var OverflowActionButtonsWrapper = exports.OverflowActionButtonsWrapper = function OverflowActionButtonsWrapper(_ref6) {
+  var children = _ref6.children,
+    testId = _ref6.testId;
+  return (0, _platformFeatureFlags.fg)('compiled-migration-profilecard') ? /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    testId: testId,
+    xcss: (0, _css.cx)(styles.overflowActionButtonsWrapper)
+  }, children) : /*#__PURE__*/_react.default.createElement(OverflowActionButtonsWrapperLegacy, {
+    "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 OverflowActionButtonsWrapper = exports.OverflowActionButtonsWrapper = _styled.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n\tdisplay: inline-block;\n\twidth: ", ";\n\theight: ", ";\n\tmargin-left: ", ";\n\n\tbutton {\n\t\t&:focus {\n\t\t\toutline-color: ", ";\n\t\t\toutline-offset: ", ";\n\t\t\toutline-style: solid;\n\t\t\toutline-width: ", ";\n\t\t}\n\t}\n"])), "var(--ds-space-400, 32px)", "var(--ds-space-400, 32px)", "var(--ds-space-100, 8px)", "var(--ds-border-focused, ".concat(_colors.B200, ")"), "var(--ds-border-width, 2px)", "var(--ds-border-width, 2px)");
-
+var OverflowActionButtonsWrapperLegacy = _styled.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n\tdisplay: inline-block;\n\twidth: ", ";\n\theight: ", ";\n\tmargin-left: ", ";\n\n\tbutton {\n\t\t&:focus {\n\t\t\toutline-color: ", ";\n\t\t\toutline-offset: ", ";\n\t\t\toutline-style: solid;\n\t\t\toutline-width: ", ";\n\t\t}\n\t}\n"])), "var(--ds-space-400, 32px)", "var(--ds-space-400, 32px)", "var(--ds-space-100, 8px)", "var(--ds-border-focused, ".concat(_colors.B200, ")"), "var(--ds-border-width, 2px)", "var(--ds-border-width, 2px)");
+var CardContent = exports.CardContent = function CardContent(_ref7) {
+  var children = _ref7.children;
+  return (0, _platformFeatureFlags.fg)('compiled-migration-profilecard') ? /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    xcss: (0, _css.cx)(styles.cardContent)
+  }, children) : /*#__PURE__*/_react.default.createElement(CardContentLegacy, null, children);
+};
 // 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(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n\tdisplay: flex;\n\tflex-direction: column;\n\tmin-height: 136px;\n"])));
-
+var CardContentLegacy = _styled.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n\tdisplay: flex;\n\tflex-direction: column;\n\tmin-height: 136px;\n"])));
+var DetailsGroup = exports.DetailsGroup = function DetailsGroup(_ref8) {
+  var children = _ref8.children;
+  return (0, _platformFeatureFlags.fg)('compiled-migration-profilecard') ? /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    xcss: (0, _css.cx)(styles.detailsGroup)
+  }, children) : /*#__PURE__*/_react.default.createElement(DetailsGroupLegacy, null, children);
+};
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var DetailsGroup = exports.DetailsGroup = _styled.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n\tdisplay: flex;\n\tflex-direction: column;\n\tmargin-left: 116px;\n\twidth: 196px;\n"])));
-
+var DetailsGroupLegacy = _styled.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n\tdisplay: flex;\n\tflex-direction: column;\n\tmargin-left: 116px;\n\twidth: 196px;\n"])));
+var DisabledInfo = exports.DisabledInfo = function DisabledInfo(_ref9) {
+  var children = _ref9.children;
+  return (0, _platformFeatureFlags.fg)('compiled-migration-profilecard') ? /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    xcss: (0, _css.cx)(styles.disabledInfo)
+  }, children) : /*#__PURE__*/_react.default.createElement(DisabledInfoLegacy, null, children);
+};
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var DisabledInfo = exports.DisabledInfo = _styled.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n\tfont: ", ";\n\tcolor: ", ";\n\tmargin: ", " 0 0 0;\n\tline-height: 16px;\n"])), "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)", _constants2.labelTextColor, "var(--ds-space-150, 12px)");
-
+var DisabledInfoLegacy = _styled.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n\tfont: ", ";\n\tcolor: ", ";\n\tmargin: ", " 0 0 0;\n\tline-height: 16px;\n"])), "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)", _constants2.labelTextColor, "var(--ds-space-150, 12px)");
+var LozengeWrapper = exports.LozengeWrapper = function LozengeWrapper(_ref10) {
+  var children = _ref10.children;
+  return (0, _platformFeatureFlags.fg)('compiled-migration-profilecard') ? /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    xcss: (0, _css.cx)(styles.lozengeWrapper)
+  }, children) : /*#__PURE__*/_react.default.createElement(LozengeWrapperLegacy, null, children);
+};
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var LozengeWrapper = exports.LozengeWrapper = _styled.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n\tmargin-top: ", ";\n\ttext-transform: uppercase;\n\tdisplay: block;\n"])), "var(--ds-space-200, 16px)");
-
+var LozengeWrapperLegacy = _styled.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n\tmargin-top: ", ";\n\ttext-transform: uppercase;\n\tdisplay: block;\n"])), "var(--ds-space-200, 16px)");
+var CustomLozengeContainer = exports.CustomLozengeContainer = function CustomLozengeContainer(_ref11) {
+  var children = _ref11.children;
+  return (0, _platformFeatureFlags.fg)('compiled-migration-profilecard') ? /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    xcss: (0, _css.cx)(styles.customLozengeContainer)
+  }, children) : /*#__PURE__*/_react.default.createElement(CustomLozengeContainerLegacy, null, children);
+};
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var CustomLozengeContainer = exports.CustomLozengeContainer = (0, _styled.default)(LozengeWrapper)(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n\tdisplay: flex;\n\tflex-direction: row;\n\tflex-wrap: wrap;\n\tjustify-content: flex-start;\n\tmargin-top: ", ";\n\t> * {\n\t\tmargin-top: ", ";\n\t\t&:not(:last-child) {\n\t\t\tmargin-right: ", ";\n\t\t}\n\t}\n"])), "var(--ds-space-150, 12px)", "var(--ds-space-050, 4px)", "var(--ds-space-050, 4px)");
-
+var CustomLozengeContainerLegacy = (0, _styled.default)(LozengeWrapper)(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n\tdisplay: flex;\n\tflex-direction: row;\n\tflex-wrap: wrap;\n\tjustify-content: flex-start;\n\tmargin-top: ", ";\n\t> * {\n\t\tmargin-top: ", ";\n\t\t&:not(:last-child) {\n\t\t\tmargin-right: ", ";\n\t\t}\n\t}\n"])), "var(--ds-space-150, 12px)", "var(--ds-space-050, 4px)", "var(--ds-space-050, 4px)");
+var JobTitleLabel = exports.JobTitleLabel = function JobTitleLabel(_ref12) {
+  var children = _ref12.children;
+  return (0, _platformFeatureFlags.fg)('compiled-migration-profilecard') ? /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    xcss: (0, _css.cx)(styles.jobTitleLabel)
+  }, /*#__PURE__*/_react.default.createElement(_compiled.Text, {
+    maxLines: 1,
+    color: "color.text.inverse"
+  }, children)) : /*#__PURE__*/_react.default.createElement(JobTitleLabelLegacy, null, children);
+};
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var JobTitleLabel = exports.JobTitleLabel = _styled.default.span(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n\twhite-space: nowrap;\n\n\tfont: ", ";\n\tcolor: ", ";\n\tmargin: 0 0 ", " 0;\n"])), "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)", _constants2.headerTextColor, "var(--ds-space-150, 12px)");
-
+var JobTitleLabelLegacy = _styled.default.span(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n\twhite-space: nowrap;\n\n\tfont: ", ";\n\tcolor: ", ";\n\tmargin: 0 0 ", " 0;\n"])), "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)", _constants2.headerTextColor, "var(--ds-space-150, 12px)");
+var AppTitleLabel = exports.AppTitleLabel = function AppTitleLabel(_ref13) {
+  var children = _ref13.children;
+  return (0, _platformFeatureFlags.fg)('compiled-migration-profilecard') ? /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    xcss: (0, _css.cx)(styles.appTitleLabel),
+    backgroundColor: "color.background.neutral"
+  }, /*#__PURE__*/_react.default.createElement(_compiled.Text, {
+    color: "color.text",
+    size: "UNSAFE_small",
+    weight: "bold"
+  }, children)) : /*#__PURE__*/_react.default.createElement(AppTitleLabelLegacy, null, children);
+};
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var AppTitleLabel = exports.AppTitleLabel = _styled.default.span(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["\n\tbackground: ", ";\n\tcolor: ", ";\n\tborder-radius: ", ";\n\tpadding: 0 ", ";\n\twidth: fit-content;\n\tfont-weight: ", ";\n\ttext-transform: uppercase;\n\n\tfont: ", ";\n\tmargin: ", " 0 ", " 0;\n"])), _constants2.appLabelBgColor, _constants2.appLabelTextColor, (0, _constants.borderRadius)(), "var(--ds-space-075, 6px)", "var(--ds-font-weight-bold, 700)", "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)", "var(--ds-space-050, 4px)", "var(--ds-space-150, 12px)");
-
+var AppTitleLabelLegacy = _styled.default.span(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["\n\tbackground: ", ";\n\tcolor: ", ";\n\tborder-radius: ", ";\n\tpadding: 0 ", ";\n\twidth: fit-content;\n\tfont-weight: ", ";\n\ttext-transform: uppercase;\n\n\tfont: ", ";\n\tmargin: ", " 0 ", " 0;\n"])), _constants2.appLabelBgColor, _constants2.appLabelTextColor, (0, _constants.borderRadius)(), "var(--ds-space-075, 6px)", "var(--ds-font-weight-bold, 700)", "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)", "var(--ds-space-050, 4px)", "var(--ds-space-150, 12px)");
+var SpinnerContainer = exports.SpinnerContainer = function SpinnerContainer(_ref14) {
+  var children = _ref14.children,
+    testId = _ref14.testId;
+  return (0, _platformFeatureFlags.fg)('compiled-migration-profilecard') ? /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    testId: testId,
+    xcss: (0, _css.cx)(styles.spinnerContainer)
+  }, children) : /*#__PURE__*/_react.default.createElement(SpinnerContainerLegacy, {
+    "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 SpinnerContainer = exports.SpinnerContainer = _styled.default.div(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2.default)(["\n\talign-items: center;\n\tdisplay: flex;\n\theight: 96px;\n\tjustify-content: center;\n\tposition: relative;\n"])));
+var SpinnerContainerLegacy = _styled.default.div(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2.default)(["\n\talign-items: center;\n\tdisplay: flex;\n\theight: 96px;\n\tjustify-content: center;\n\tposition: relative;\n"])));
+var CardContainer = exports.CardContainer = function CardContainer(_ref15) {
+  var children = _ref15.children,
+    isDisabledUser = _ref15.isDisabledUser,
+    withoutElevation = _ref15.withoutElevation;
+  return (0, _platformFeatureFlags.fg)('compiled-migration-profilecard') ? /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    xcss: (0, _css.cx)(styles.cardContainer, isDisabledUser ? styles.cardContainerDisabledUser : styles.cardContainerActiveUser, !withoutElevation && styles.cardContainerWithElevation)
+  }, children) : /*#__PURE__*/_react.default.createElement(CardContainerLegacy, {
+    isDisabledUser: isDisabledUser,
+    withoutElevation: withoutElevation
+  }, children);
+};
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var CardContainer = exports.CardContainer = _styled.default.div(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2.default)(["\n\tposition: relative;\n\t-webkit-font-smoothing: antialiased;\n\t-moz-osx-font-smoothing: grayscale;\n\tbackground-image: linear-gradient(\n\t\tto bottom,\n\t\t", "\n\t\t\t0%,\n\t\t", " 100%\n\t);\n\tbackground-repeat: no-repeat;\n\tbackground-size: 100% 96px;\n\tbox-sizing: content-box;\n\tpadding: ", ";\n\tbox-shadow: ", ";\n\tborder-radius: ", ";\n\n\toverflow: hidden;\n"])), function (props) {
+var CardContainerLegacy = _styled.default.div(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2.default)(["\n\tposition: relative;\n\t-webkit-font-smoothing: antialiased;\n\t-moz-osx-font-smoothing: grayscale;\n\tbackground-image: linear-gradient(\n\t\tto bottom,\n\t\t", "\n\t\t\t0%,\n\t\t", " 100%\n\t);\n\tbackground-repeat: no-repeat;\n\tbackground-size: 100% 96px;\n\tbox-sizing: content-box;\n\tpadding: ", ";\n\tbox-shadow: ", ";\n\tborder-radius: ", ";\n\n\toverflow: hidden;\n"])), function (props) {
   return props.isDisabledUser ? _constants2.headerBgColorDisabledUser : _constants2.headerBgColor;
 }, function (props) {
   return props.isDisabledUser ? _constants2.headerBgColorDisabledUser : _constants2.headerBgColor;
@@ -86,12 +246,31 @@ var CardContainer = exports.CardContainer = _styled.default.div(_templateObject1
 }, function (props) {
   return props.withoutElevation ? '' : "".concat((0, _constants.borderRadius)(), "px");
 });
-
+var DetailsLabel = exports.DetailsLabel = function DetailsLabel(_ref16) {
+  var children = _ref16.children,
+    _ref16$extraTopSpace = _ref16.extraTopSpace,
+    extraTopSpace = _ref16$extraTopSpace === void 0 ? false : _ref16$extraTopSpace;
+  return (0, _platformFeatureFlags.fg)('compiled-migration-profilecard') ? /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    xcss: (0, _css.cx)(styles.detailsLabel, extraTopSpace && styles.detailsLabelExtraTopSpace)
+  }, children) : /*#__PURE__*/_react.default.createElement(DetailsLabelLegacy, null, children);
+};
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var DetailsLabel = exports.DetailsLabel = _styled.default.div(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2.default)(["\n\tdisplay: flex;\n\talign-items: center;\n\tmargin: ", " 0 0 0;\n\twhite-space: nowrap;\n\n\t& + & {\n\t\tmargin-top: ", ";\n\t}\n"])), "var(--ds-space-200, 16px)", "var(--ds-space-025, 2px)");
-
+var DetailsLabelLegacy = _styled.default.div(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2.default)(["\n\tdisplay: flex;\n\talign-items: center;\n\tmargin: ", " 0 0 0;\n\twhite-space: nowrap;\n\n\t& + & {\n\t\tmargin-top: ", ";\n\t}\n"])), "var(--ds-space-200, 16px)", "var(--ds-space-025, 2px)");
+var DetailsLabelIcon = exports.DetailsLabelIcon = function DetailsLabelIcon(_ref17) {
+  var children = _ref17.children;
+  return (0, _platformFeatureFlags.fg)('compiled-migration-profilecard') ? /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    as: "dt",
+    xcss: (0, _css.cx)(styles.detailsLabelIcon)
+  }, children) : /*#__PURE__*/_react.default.createElement(DetailsLabelIconLegacy, null, children);
+};
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var DetailsLabelIcon = exports.DetailsLabelIcon = _styled.default.dt(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2.default)(["\n\tdisplay: flex;\n\tflex-shrink: 0;\n\tcolor: ", ";\n\twidth: ", ";\n\theight: ", ";\n\tpadding: ", ";\n\tvertical-align: top;\n\n\tsvg {\n\t\twidth: 100%;\n\t\theight: 100%;\n\t}\n"])), _constants2.labelIconColor, "var(--ds-space-200, 16px)", "var(--ds-space-200, 16px)", "var(--ds-space-050, 4px)");
-
+var DetailsLabelIconLegacy = _styled.default.dt(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2.default)(["\n\tdisplay: flex;\n\tflex-shrink: 0;\n\tcolor: ", ";\n\twidth: ", ";\n\theight: ", ";\n\tpadding: ", ";\n\tvertical-align: top;\n\n\tsvg {\n\t\twidth: 100%;\n\t\theight: 100%;\n\t}\n"])), _constants2.labelIconColor, "var(--ds-space-200, 16px)", "var(--ds-space-200, 16px)", "var(--ds-space-050, 4px)");
+var DetailsLabelText = exports.DetailsLabelText = function DetailsLabelText(_ref18) {
+  var children = _ref18.children;
+  return (0, _platformFeatureFlags.fg)('compiled-migration-profilecard') ? /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    as: "dd",
+    xcss: (0, _css.cx)(styles.detailsLabelText)
+  }, children) : /*#__PURE__*/_react.default.createElement(DetailsLabelTextLegacy, null, children);
+};
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var DetailsLabelText = exports.DetailsLabelText = _styled.default.dd(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2.default)(["\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n\tcolor: ", ";\n\tfont: ", ";\n\tpadding-block: ", ";\n\tpadding-left: ", ";\n\tmargin-inline-start: 0;\n\tmargin-top: 0;\n"])), _constants2.labelTextColor, "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)", "var(--ds-space-050, 4px)", "var(--ds-space-050, 4px)");
+var DetailsLabelTextLegacy = _styled.default.dd(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2.default)(["\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n\tcolor: ", ";\n\tfont: ", ";\n\tpadding-block: ", ";\n\tpadding-left: ", ";\n\tmargin-inline-start: 0;\n\tmargin-top: 0;\n"])), _constants2.labelTextColor, "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)", "var(--ds-space-050, 4px)", "var(--ds-space-050, 4px)");

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

@@ -0,0 +1,10 @@
+._11c81vlj{font:var(--ds-font-body-small,normal 400 11px/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._18u01b66{margin-left:var(--ds-space-050,4px)}
+._18u0r5cr{margin-left:var(--ds-space-negative-050,-4px)}
+._18u0u2gc{margin-left:var(--ds-space-100,8px)}
+._19pk1b66{margin-top:var(--ds-space-050,4px)}
+._19pku2gc{margin-top:var(--ds-space-100,8px)}
+._1e0c1txw{display:flex}
+._2hwx1b66{margin-right:var(--ds-space-050,4px)}
+._4cvr1h6o{align-items:center}
+._otyr1b66{margin-bottom:var(--ds-space-050,4px)}