@atlaskit/profilecard 22.0.3 → 22.2.0

package/dist/es2019/styled/Card.js

@@ -1,31 +1,84 @@
-import _extends from "@babel/runtime/helpers/extends";
+/* Card.tsx generated by @compiled/babel-plugin v0.36.0 */
 /* eslint-disable @atlaskit/design-system/no-styled-tagged-template-expression -- needs manual remediation */
+import "./Card.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
-
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { keyframes } from '@emotion/react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import styled from '@emotion/styled';
+import { cx } from '@atlaskit/css';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Box, Text } from '@atlaskit/primitives/compiled';
 import { B200, N50A, N60A } from '@atlaskit/theme/colors';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { appLabelBgColor, appLabelTextColor, bgColor, headerBgColor, headerBgColorDisabledUser, headerTextColor, labelIconColor, labelTextColor } from './constants';
-
+const kudosButtonAnimationTransformationCompiled = null;
+const 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"
+};
+export const CardWrapper = ({
+  children,
+  role,
+  testId,
+  labelledBy
+}) => fg('compiled-migration-profilecard') ? /*#__PURE__*/React.createElement(Box, {
+  xcss: cx(styles.cardWrapper),
+  backgroundColor: 'elevation.surface.overlay',
+  role: role,
+  testId: testId,
+  "aria-labelledby": labelledBy
+}, children) : /*#__PURE__*/React.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
-export const CardWrapper = styled.div`
+const CardWrapperLegacy = styled.div`
 	background-color: ${bgColor};
 	border-radius: ${"var(--ds-border-radius, 3px)"};
 	width: 360px;
 `;
-
+export const ProfileImage = ({
+  children
+}) => fg('compiled-migration-profilecard') ? /*#__PURE__*/React.createElement(Box, {
+  xcss: cx(styles.profileImage)
+}, children) : /*#__PURE__*/React.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
-export const ProfileImage = styled.div`
+const ProfileImageLegacy = styled.div`
 	position: absolute;
 	top: ${"var(--ds-space-300, 24px)"};
 	left: ${"var(--ds-space-300, 24px)"};
 `;
-
+export const ActionsFlexSpacer = () => fg('compiled-migration-profilecard') ? /*#__PURE__*/React.createElement(Box, {
+  xcss: cx(styles.actionsFlexSpacer)
+}) : /*#__PURE__*/React.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
-export const ActionsFlexSpacer = styled.div`
+const ActionsFlexSpacerLegacy = styled.div`
 	flex: 1 0 auto;
 `;
 
@@ -34,9 +87,17 @@ const kudosButtonAnimationTransformation = keyframes`
   0%   { transform: translate(-80px, -50px); }
   100% { transform: translate(90px, -70px); }
 `;
+export const KudosBlobAnimationStyle = () => fg('compiled-migration-profilecard') ? /*#__PURE__*/React.createElement(Box, {
+  xcss: cx(styles.kudosBlobAnimationStyle)
+}) :
+/*#__PURE__*/
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+React.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
-export const KudosBlobAnimationStyle = styled.div`
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled
+const KudosBlobAnimationStyleLegacy = styled.div`
 	display: none;
 	height: 150px;
 	width: 150px;
@@ -54,15 +115,18 @@ export const KudosBlobAnimationStyle = styled.div`
 	);
 	overflow: hidden;
 `;
-export const KudosBlobAnimation = props =>
-/*#__PURE__*/
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-React.createElement(KudosBlobAnimationStyle, _extends({
-  className: "kudos-blob-animation"
-}, props));
+export const KudosBlobAnimation = () => fg('compiled-migration-profilecard') ? /*#__PURE__*/React.createElement(Box, {
+  xcss: cx(styles.kudosBlobAnimationStyle)
+}) : /*#__PURE__*/React.createElement(KudosBlobAnimationLegacy, null);
+const KudosBlobAnimationLegacy = () => /*#__PURE__*/React.createElement(KudosBlobAnimationStyle, null);
+export const AnimationWrapper = ({
+  children
+}) => fg('compiled-migration-profilecard') ? /*#__PURE__*/React.createElement(Box, {
+  xcss: cx(styles.animationWrapper)
+}, children) : /*#__PURE__*/React.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
-export const AnimationWrapper = styled.div`
+const AnimationWrapperLegacy = styled.div`
 	clip-path: inset(0px 0px 0px 0px round ${borderRadius()}px);
 	position: absolute;
 	top: 0;
@@ -70,9 +134,13 @@ export const AnimationWrapper = styled.div`
 	bottom: 0;
 	right: 0;
 `;
-
+export const AnimatedKudosButton = ({
+  children
+}) => fg('compiled-migration-profilecard') ? /*#__PURE__*/React.createElement(Box, {
+  xcss: cx(styles.animatedKudosButton)
+}, children) : /*#__PURE__*/React.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
-export const AnimatedKudosButton = styled.div`
+const AnimatedKudosButtonLegacy = styled.div`
 	margin-left: ${"var(--ds-space-100, 8px)"};
 
 	/* Need babel-plugin-emotion to use component selector */
@@ -83,9 +151,17 @@ export const AnimatedKudosButton = styled.div`
 		display: block;
 	}
 `;
-
+export const ActionButtonGroup = ({
+  children,
+  testId
+}) => fg('compiled-migration-profilecard') ? /*#__PURE__*/React.createElement(Box, {
+  testId: testId,
+  xcss: cx(styles.actionButtonGroup)
+}, children) : /*#__PURE__*/React.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
-export const ActionButtonGroup = styled.div`
+const ActionButtonGroupLegacy = styled.div`
 	user-select: none;
 	margin: ${"var(--ds-space-200, 16px)"} 0 0 0;
 	text-align: right;
@@ -117,9 +193,17 @@ export const ActionButtonGroup = styled.div`
 		}
 	}
 `;
-
+export const OverflowActionButtonsWrapper = ({
+  children,
+  testId
+}) => fg('compiled-migration-profilecard') ? /*#__PURE__*/React.createElement(Box, {
+  testId: testId,
+  xcss: cx(styles.overflowActionButtonsWrapper)
+}, children) : /*#__PURE__*/React.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
-export const OverflowActionButtonsWrapper = styled.div`
+const OverflowActionButtonsWrapperLegacy = styled.div`
 	display: inline-block;
 	width: ${"var(--ds-space-400, 32px)"};
 	height: ${"var(--ds-space-400, 32px)"};
@@ -134,39 +218,59 @@ export const OverflowActionButtonsWrapper = styled.div`
 		}
 	}
 `;
-
+export const CardContent = ({
+  children
+}) => fg('compiled-migration-profilecard') ? /*#__PURE__*/React.createElement(Box, {
+  xcss: cx(styles.cardContent)
+}, children) : /*#__PURE__*/React.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
-export const CardContent = styled.div`
+const CardContentLegacy = styled.div`
 	display: flex;
 	flex-direction: column;
 	min-height: 136px;
 `;
-
+export const DetailsGroup = ({
+  children
+}) => fg('compiled-migration-profilecard') ? /*#__PURE__*/React.createElement(Box, {
+  xcss: cx(styles.detailsGroup)
+}, children) : /*#__PURE__*/React.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
-export const DetailsGroup = styled.div`
+const DetailsGroupLegacy = styled.div`
 	display: flex;
 	flex-direction: column;
 	margin-left: 116px;
 	width: 196px;
 `;
-
+export const DisabledInfo = ({
+  children
+}) => fg('compiled-migration-profilecard') ? /*#__PURE__*/React.createElement(Box, {
+  xcss: cx(styles.disabledInfo)
+}, children) : /*#__PURE__*/React.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
-export const DisabledInfo = styled.div`
+const DisabledInfoLegacy = styled.div`
 	font: ${"var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"};
 	color: ${labelTextColor};
 	margin: ${"var(--ds-space-150, 12px)"} 0 0 0;
 	line-height: 16px;
 `;
-
+export const LozengeWrapper = ({
+  children
+}) => fg('compiled-migration-profilecard') ? /*#__PURE__*/React.createElement(Box, {
+  xcss: cx(styles.lozengeWrapper)
+}, children) : /*#__PURE__*/React.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
-export const LozengeWrapper = styled.div`
+const LozengeWrapperLegacy = styled.div`
 	margin-top: ${"var(--ds-space-200, 16px)"};
 	text-transform: uppercase;
 	display: block;
 `;
-
+export const CustomLozengeContainer = ({
+  children
+}) => fg('compiled-migration-profilecard') ? /*#__PURE__*/React.createElement(Box, {
+  xcss: cx(styles.customLozengeContainer)
+}, children) : /*#__PURE__*/React.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
-export const CustomLozengeContainer = styled(LozengeWrapper)`
+const CustomLozengeContainerLegacy = styled(LozengeWrapper)`
 	display: flex;
 	flex-direction: row;
 	flex-wrap: wrap;
@@ -179,9 +283,16 @@ export const CustomLozengeContainer = styled(LozengeWrapper)`
 		}
 	}
 `;
-
+export const JobTitleLabel = ({
+  children
+}) => fg('compiled-migration-profilecard') ? /*#__PURE__*/React.createElement(Box, {
+  xcss: cx(styles.jobTitleLabel)
+}, /*#__PURE__*/React.createElement(Text, {
+  maxLines: 1,
+  color: "color.text.inverse"
+}, children)) : /*#__PURE__*/React.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
-export const JobTitleLabel = styled.span`
+const JobTitleLabelLegacy = styled.span`
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
@@ -190,9 +301,18 @@ export const JobTitleLabel = styled.span`
 	color: ${headerTextColor};
 	margin: 0 0 ${"var(--ds-space-150, 12px)"} 0;
 `;
-
+export const AppTitleLabel = ({
+  children
+}) => fg('compiled-migration-profilecard') ? /*#__PURE__*/React.createElement(Box, {
+  xcss: cx(styles.appTitleLabel),
+  backgroundColor: "color.background.neutral"
+}, /*#__PURE__*/React.createElement(Text, {
+  color: "color.text",
+  size: "UNSAFE_small",
+  weight: "bold"
+}, children)) : /*#__PURE__*/React.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
-export const AppTitleLabel = styled.span`
+const AppTitleLabelLegacy = styled.span`
 	background: ${appLabelBgColor};
 	color: ${appLabelTextColor};
 	border-radius: ${borderRadius()};
@@ -204,17 +324,35 @@ export const AppTitleLabel = styled.span`
 	font: ${"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)"};
 	margin: ${"var(--ds-space-050, 4px)"} 0 ${"var(--ds-space-150, 12px)"} 0;
 `;
-
+export const SpinnerContainer = ({
+  children,
+  testId
+}) => fg('compiled-migration-profilecard') ? /*#__PURE__*/React.createElement(Box, {
+  testId: testId,
+  xcss: cx(styles.spinnerContainer)
+}, children) : /*#__PURE__*/React.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
-export const SpinnerContainer = styled.div`
+const SpinnerContainerLegacy = styled.div`
 	align-items: center;
 	display: flex;
 	height: 96px;
 	justify-content: center;
 	position: relative;
 `;
+export const CardContainer = ({
+  children,
+  isDisabledUser,
+  withoutElevation
+}) => fg('compiled-migration-profilecard') ? /*#__PURE__*/React.createElement(Box, {
+  xcss: cx(styles.cardContainer, isDisabledUser ? styles.cardContainerDisabledUser : styles.cardContainerActiveUser, !withoutElevation && styles.cardContainerWithElevation)
+}, children) : /*#__PURE__*/React.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
-export const CardContainer = styled.div`
+const CardContainerLegacy = styled.div`
 	position: relative;
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
@@ -233,9 +371,14 @@ export const CardContainer = styled.div`
 
 	overflow: hidden;
 `;
-
+export const DetailsLabel = ({
+  children,
+  extraTopSpace = false
+}) => fg('compiled-migration-profilecard') ? /*#__PURE__*/React.createElement(Box, {
+  xcss: cx(styles.detailsLabel, extraTopSpace && styles.detailsLabelExtraTopSpace)
+}, children) : /*#__PURE__*/React.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
-export const DetailsLabel = styled.div`
+const DetailsLabelLegacy = styled.div`
 	display: flex;
 	align-items: center;
 	margin: ${"var(--ds-space-200, 16px)"} 0 0 0;
@@ -245,9 +388,14 @@ export const DetailsLabel = styled.div`
 		margin-top: ${"var(--ds-space-025, 2px)"};
 	}
 `;
-
+export const DetailsLabelIcon = ({
+  children
+}) => fg('compiled-migration-profilecard') ? /*#__PURE__*/React.createElement(Box, {
+  as: "dt",
+  xcss: cx(styles.detailsLabelIcon)
+}, children) : /*#__PURE__*/React.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
-export const DetailsLabelIcon = styled.dt`
+const DetailsLabelIconLegacy = styled.dt`
 	display: flex;
 	flex-shrink: 0;
 	color: ${labelIconColor};
@@ -261,9 +409,14 @@ export const DetailsLabelIcon = styled.dt`
 		height: 100%;
 	}
 `;
-
+export const DetailsLabelText = ({
+  children
+}) => fg('compiled-migration-profilecard') ? /*#__PURE__*/React.createElement(Box, {
+  as: "dd",
+  xcss: cx(styles.detailsLabelText)
+}, children) : /*#__PURE__*/React.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
-export const DetailsLabelText = styled.dd`
+const DetailsLabelTextLegacy = styled.dd`
 	overflow: hidden;
 	text-overflow: ellipsis;
 	color: ${labelTextColor};

package/dist/es2019/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/es2019/styled/Error.js

@@ -1,26 +1,49 @@
+/* Error.tsx generated by @compiled/babel-plugin v0.36.0 */
+import _extends from "@babel/runtime/helpers/extends";
+import "./Error.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React from 'react';
+
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import styled from '@emotion/styled';
+import { cx } from '@atlaskit/css';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Box } from '@atlaskit/primitives/compiled';
 import { N200 } from '@atlaskit/theme/colors';
 import { errorIconColor, errorTitleColor } from './constants';
-
+const styles = {
+  errorWrapper: "_y3gn1h6o _ca0q1ejb _u5f31ejb _n3td1ejb _19bv1ejb",
+  errorTitle: "_11c81oud _syaz1fxt _19pku2gc",
+  teamErrorText: "_syaz1wmz _19pku2gc"
+};
+export const ErrorWrapper = props => fg('compiled-migration-profilecard') ? /*#__PURE__*/React.createElement(Box, _extends({
+  xcss: cx(styles.errorWrapper)
+}, props)) : /*#__PURE__*/React.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
-export const ErrorWrapper = styled.div({
+const ErrorWrapperLegacy = styled.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: errorIconColor
 });
-
+export const ErrorTitle = props => fg('compiled-migration-profilecard') ? /*#__PURE__*/React.createElement(Box, {
+  xcss: cx(styles.errorTitle)
+}, props.children) : /*#__PURE__*/React.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
-export const ErrorTitle = styled.p({
+const ErrorTitleLegacy = styled.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: errorTitleColor,
   margin: `${"var(--ds-space-100, 8px)"} 0`
 });
+export const TeamErrorText = props => fg('compiled-migration-profilecard') ? /*#__PURE__*/React.createElement(Box, {
+  xcss: cx(styles.teamErrorText)
+}, props.children) : /*#__PURE__*/React.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
-export const TeamErrorText = styled.p({
+const TeamErrorTextLegacy = styled.p({
   color: `var(--ds-text-subtlest, ${N200})`,
   marginTop: "var(--ds-space-100, 8px)"
 });

package/dist/es2019/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)}

package/dist/es2019/styled/ReportingLines.js

@@ -1,28 +1,63 @@
+/* ReportingLines.tsx generated by @compiled/babel-plugin v0.36.0 */
+import "./ReportingLines.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React from 'react';
+
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import styled from '@emotion/styled';
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const ReportingLinesSection = styled.div({
+import { cx } from '@atlaskit/css';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Box } from '@atlaskit/primitives/compiled';
+const styles = {
+  reportingLinesSection: "_18u01b66 _19pku2gc",
+  managerSection: "_1e0c1txw _4cvr1h6o _18u01b66 _19pk1b66 _otyr1b66 _2hwx1b66",
+  managerName: "_11c81vlj _18u0u2gc",
+  offsetWrapper: "_19pk1b66 _18u0r5cr"
+};
+
+// 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
+const ReportingLinesSectionLegacy = styled.div({
   // Minor left margin to align better with existing icon fields
   marginLeft: "var(--ds-space-050, 4px)",
   marginTop: "var(--ds-space-100, 8px)"
 });
+export const ReportingLinesSection = ({
+  children
+}) => fg('compiled-migration-profilecard') ? /*#__PURE__*/React.createElement(Box, {
+  xcss: cx(styles.reportingLinesSection)
+}, children) : /*#__PURE__*/React.createElement(ReportingLinesSectionLegacy, null, children);
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const ManagerSection = styled.div({
+const ManagerSectionLegacy = styled.div({
   display: 'flex',
   alignItems: 'center',
   margin: `${"var(--ds-space-050, 4px)"} ${"var(--ds-space-050, 4px)"}`
 });
+export const ManagerSection = ({
+  children
+}) => fg('compiled-migration-profilecard') ? /*#__PURE__*/React.createElement(Box, {
+  xcss: cx(styles.managerSection)
+}, children) : /*#__PURE__*/React.createElement(ManagerSectionLegacy, null, children);
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const ManagerName = styled.span({
+const ManagerNameLegacy = styled.span({
   font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
   marginLeft: "var(--ds-space-100, 8px)"
 });
+export const ManagerName = ({
+  children
+}) => fg('compiled-migration-profilecard') ? /*#__PURE__*/React.createElement(Box, {
+  xcss: cx(styles.managerName)
+}, children) : /*#__PURE__*/React.createElement(ManagerNameLegacy, null, children);
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const OffsetWrapper = styled.div({
+// 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
+const OffsetWrapperLegacy = styled.div({
   marginTop: "var(--ds-space-050, 4px)",
   // Offset left margin so the avatar aligns with the heading
   marginLeft: "var(--ds-space-negative-050, -4px)"
-});
+});
+export const OffsetWrapper = ({
+  children
+}) => fg('compiled-migration-profilecard') ? /*#__PURE__*/React.createElement(Box, {
+  xcss: cx(styles.offsetWrapper)
+}, children) : /*#__PURE__*/React.createElement(OffsetWrapperLegacy, null, children);

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

@@ -0,0 +1,41 @@
+._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}
+._1itk1g60{background-image:url()}
+._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}