@atlaskit/profilecard/dist/esm/styled/Card.js

A React component to display a card with user information.

/* Card.tsx generated by @compiled/babel-plugin v0.36.1 */
import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21;
import "./Card.compiled.css";
import { ax, ix } from "@compiled/react/runtime";
/* eslint-disable @atlaskit/design-system/no-styled-tagged-template-expression -- needs manual remediation */
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';
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: "_11c81o8v _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 _11c8dcr7 _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 var CardWrapper = function CardWrapper(_ref) {
  var children = _ref.children,
    role = _ref.role,
    testId = _ref.testId,
    labelledBy = _ref.labelledBy;
  return 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
var CardWrapperLegacy = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\tbackground-color: ", ";\n\tborder-radius: ", ";\n\twidth: 360px;\n"])), bgColor, "var(--ds-border-radius, 3px)");
export var ProfileImage = function ProfileImage(_ref2) {
  var children = _ref2.children;
  return 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
var ProfileImageLegacy = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n\tposition: absolute;\n\ttop: ", ";\n\tleft: ", ";\n"])), "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)");
export var ActionsFlexSpacer = function ActionsFlexSpacer() {
  return 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
var ActionsFlexSpacerLegacy = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n\tflex: 1 0 auto;\n"])));

// eslint-disable-next-line @atlaskit/design-system/no-keyframes-tagged-template-expression -- needs manual remediation
var kudosButtonAnimationTransformation = keyframes(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  0%   { transform: translate(-80px, -50px); }\n  100% { transform: translate(90px, -70px); }\n"])));
export var KudosBlobAnimationStyle = function KudosBlobAnimationStyle() {
  return 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
var KudosBlobAnimationStyleLegacy = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\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)");
export var KudosBlobAnimation = function KudosBlobAnimation() {
  return fg('compiled-migration-profilecard') ? /*#__PURE__*/React.createElement(Box, {
    xcss: cx(styles.kudosBlobAnimationStyle)
  }) : /*#__PURE__*/React.createElement(KudosBlobAnimationLegacy, null);
};
var KudosBlobAnimationLegacy = function KudosBlobAnimationLegacy() {
  return /*#__PURE__*/React.createElement(KudosBlobAnimationStyle, null);
};
export var AnimationWrapper = function AnimationWrapper(_ref3) {
  var children = _ref3.children;
  return 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
var AnimationWrapperLegacy = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\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"])), borderRadius());
export var AnimatedKudosButton = function AnimatedKudosButton(_ref4) {
  var children = _ref4.children;
  return 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
var AnimatedKudosButtonLegacy = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\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)");
export var ActionButtonGroup = function ActionButtonGroup(_ref5) {
  var children = _ref5.children,
    testId = _ref5.testId;
  return 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
var ActionButtonGroupLegacy = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\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(B200, ")"), "var(--ds-border-width, 2px)", "var(--ds-border-width, 2px)");
export var OverflowActionButtonsWrapper = function OverflowActionButtonsWrapper(_ref6) {
  var children = _ref6.children,
    testId = _ref6.testId;
  return 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
var OverflowActionButtonsWrapperLegacy = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\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(B200, ")"), "var(--ds-border-width, 2px)", "var(--ds-border-width, 2px)");
export var CardContent = function CardContent(_ref7) {
  var children = _ref7.children;
  return 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
var CardContentLegacy = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n\tdisplay: flex;\n\tflex-direction: column;\n\tmin-height: 136px;\n"])));
export var DetailsGroup = function DetailsGroup(_ref8) {
  var children = _ref8.children;
  return 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
var DetailsGroupLegacy = styled.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n\tdisplay: flex;\n\tflex-direction: column;\n\tmargin-left: 116px;\n\twidth: 196px;\n"])));
export var DisabledInfo = function DisabledInfo(_ref9) {
  var children = _ref9.children;
  return 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
var DisabledInfoLegacy = styled.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\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, \"Helvetica Neue\", sans-serif)", labelTextColor, "var(--ds-space-150, 12px)");
export var LozengeWrapper = function LozengeWrapper(_ref10) {
  var children = _ref10.children;
  return 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
var LozengeWrapperLegacy = styled.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n\tmargin-top: ", ";\n\ttext-transform: uppercase;\n\tdisplay: block;\n"])), "var(--ds-space-200, 16px)");
export var CustomLozengeContainer = function CustomLozengeContainer(_ref11) {
  var children = _ref11.children;
  return 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
var CustomLozengeContainerLegacy = styled(LozengeWrapper)(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\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)");
export var JobTitleLabel = function JobTitleLabel(_ref12) {
  var children = _ref12.children;
  return 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
var JobTitleLabelLegacy = styled.span(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\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, \"Helvetica Neue\", sans-serif)", headerTextColor, "var(--ds-space-150, 12px)");
export var AppTitleLabel = function AppTitleLabel(_ref13) {
  var children = _ref13.children;
  return 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
var AppTitleLabelLegacy = styled.span(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\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"])), appLabelBgColor, appLabelTextColor, 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, \"Helvetica Neue\", sans-serif)", "var(--ds-space-050, 4px)", "var(--ds-space-150, 12px)");
export var SpinnerContainer = function SpinnerContainer(_ref14) {
  var children = _ref14.children,
    testId = _ref14.testId;
  return 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
var SpinnerContainerLegacy = styled.div(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n\talign-items: center;\n\tdisplay: flex;\n\theight: 96px;\n\tjustify-content: center;\n\tposition: relative;\n"])));
export var CardContainer = function CardContainer(_ref15) {
  var children = _ref15.children,
    isDisabledUser = _ref15.isDisabledUser,
    withoutElevation = _ref15.withoutElevation;
  return 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
var CardContainerLegacy = styled.div(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\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 ? headerBgColorDisabledUser : headerBgColor;
}, function (props) {
  return props.isDisabledUser ? headerBgColorDisabledUser : headerBgColor;
}, "var(--ds-space-300, 24px)", function (props) {
  return props.withoutElevation ? '' : "".concat("var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N50A, ", 0 0 1px ").concat(N60A), ")"));
}, function (props) {
  return props.withoutElevation ? '' : "".concat(borderRadius(), "px");
});
export var DetailsLabel = function DetailsLabel(_ref16) {
  var children = _ref16.children,
    _ref16$extraTopSpace = _ref16.extraTopSpace,
    extraTopSpace = _ref16$extraTopSpace === void 0 ? false : _ref16$extraTopSpace;
  return 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
var DetailsLabelLegacy = styled.div(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\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)");
export var DetailsLabelIcon = function DetailsLabelIcon(_ref17) {
  var children = _ref17.children;
  return 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
var DetailsLabelIconLegacy = styled.dt(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\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"])), labelIconColor, "var(--ds-space-200, 16px)", "var(--ds-space-200, 16px)", "var(--ds-space-050, 4px)");
export var DetailsLabelText = function DetailsLabelText(_ref18) {
  var children = _ref18.children;
  return 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
var DetailsLabelTextLegacy = styled.dd(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\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"])), labelTextColor, "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)", "var(--ds-space-050, 4px)", "var(--ds-space-050, 4px)");