carbon-react 123.8.0 → 123.9.1

package/esm/components/profile/profile.style.js

@@ -3,34 +3,51 @@ import { margin } from "styled-system";
 import Portrait from "../portrait";
 import baseTheme from "../../style/themes/base";
 import profileConfigSizes from "./profile.config";
+import Link from "../link";
+import { StyledPortraitContainer } from "../portrait/portrait.style";
 const ProfileNameStyle = styled.span`
   font-weight: bold;
-  display: block;
   font-size: ${({
   size = "M"
 }) => profileConfigSizes[size].nameSize};
 `;
-const ProfileEmailStyle = styled.span`
+const ProfileEmailStyle = styled(Link)`
+  a {
+    font-size: ${({
+  size = "M"
+}) => profileConfigSizes[size].emailSize};
+    color: ${({
+  darkBackground
+}) => darkBackground && "var(--colorsActionMajor350)"};
+  }
+`;
+const ProfileTextStyle = styled.span`
   font-size: ${({
   size = "M"
 }) => profileConfigSizes[size].emailSize};
 `;
 const ProfileStyle = styled.div`
+  border-radius: inherit;
   white-space: nowrap;
-  color: var(--colorsUtilityYin090);
-  display: ${({
-  hasSrc
-}) => hasSrc ? "flex" : ""};
-
+  color: ${({
+  darkBackground
+}) => darkBackground ? "var(--colorsUtilityReadOnly600)" : "var(--colorsUtilityYin090)"};
+  background-color: ${({
+  darkBackground
+}) => darkBackground ? "var(--colorsUtilityYin090)" : "transparent"};
+  display: flex;
+  flex-direction: row;
   ${margin}
+
+  ${StyledPortraitContainer} {
+    flex-shrink: 0;
+  }
 `;
 const ProfileDetailsStyle = styled.div`
   vertical-align: middle;
-  display: inline-block;
-  margin-top: ${({
-  hasSrc,
-  size = "M"
-}) => hasSrc ? profileConfigSizes[size].marginTop : ""};
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
   line-height: ${({
   size = "M"
 }) => profileConfigSizes[size].lineHeight};
@@ -44,4 +61,4 @@ const ProfileAvatarStyle = styled(Portrait)`
 ProfileStyle.defaultProps = {
   theme: baseTheme
 };
-export { ProfileStyle, ProfileNameStyle, ProfileDetailsStyle, ProfileAvatarStyle, ProfileEmailStyle };
+export { ProfileStyle, ProfileNameStyle, ProfileDetailsStyle, ProfileAvatarStyle, ProfileEmailStyle, ProfileTextStyle };

package/lib/components/breadcrumbs/crumb/crumb.component.d.ts

@@ -1,5 +1,5 @@
-import { LinkProps } from "components/link/link.component";
 import React from "react";
+import { LinkProps } from "../../link";
 import { TagProps } from "../../../__internal__/utils/helpers/tags";
 export interface CrumbProps extends Omit<LinkProps, "tooltipMessage" | "tooltipPosition" | "iconType" | "iconAlign" | "isSkipLink" | "isDarkBackground" | "ariaLabel" | "className" | "variant" | "target" | "rel" | "icon" | "disabled">, TagProps {
     /** This sets the Crumb to current, does not render Link */

package/lib/components/portrait/portrait.component.d.ts

@@ -10,6 +10,8 @@ export interface PortraitProps extends MarginProps {
     src?: string;
     /** The size of the Portrait. */
     size?: PortraitSizes;
+    /** @private @ignore */
+    name?: string;
     /** The `alt` HTML string. */
     alt?: string;
     /** The shape of the Portrait. */
@@ -39,5 +41,5 @@ export interface PortraitProps extends MarginProps {
     /** Override font color of the Tooltip, provide any color from palette or any valid css color value. */
     tooltipFontColor?: string;
 }
-export declare const Portrait: ({ alt, darkBackground, gravatar, iconType, initials, shape, size, src, onClick, tooltipMessage, tooltipId, tooltipIsVisible, tooltipPosition, tooltipType, tooltipSize, tooltipBgColor, tooltipFontColor, ...rest }: PortraitProps) => React.JSX.Element;
+declare const Portrait: ({ alt, name, darkBackground, gravatar, iconType, initials, shape, size, src, onClick, tooltipMessage, tooltipId, tooltipIsVisible, tooltipPosition, tooltipType, tooltipSize, tooltipBgColor, tooltipFontColor, ...rest }: PortraitProps) => React.JSX.Element;
 export default Portrait;

package/lib/components/portrait/portrait.component.js

@@ -3,15 +3,15 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.Portrait = void 0;
+exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _md = _interopRequireDefault(require("crypto-js/md5"));
 var _invariant = _interopRequireDefault(require("invariant"));
 var _tooltip = _interopRequireDefault(require("../tooltip"));
 var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags/tags"));
-var _portraitGravatar = _interopRequireDefault(require("./portrait-gravatar.component"));
-var _portraitInitials = _interopRequireDefault(require("./portrait-initials.component"));
-var _portrait = require("./portrait.style");
+var _portrait = require("./portrait.config");
+var _portrait2 = require("./portrait.style");
 var _utils = require("../../style/utils");
 var _carbonProvider = require("../carbon-provider/carbon-provider.component");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -19,9 +19,10 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 const Portrait = ({
-  alt = "",
+  alt,
+  name,
   darkBackground = false,
-  gravatar,
+  gravatar = "",
   iconType = "individual",
   initials,
   shape,
@@ -48,39 +49,41 @@ const Portrait = ({
     setExternalError(false);
   }, [gravatar, src]);
   const tagProps = (0, _tags.default)("portrait", rest);
+  const gravatarSrc = () => {
+    const {
+      dimensions
+    } = _portrait.PORTRAIT_SIZE_PARAMS[size];
+    const base = "https://www.gravatar.com/avatar/";
+    const hash = (0, _md.default)(gravatar.toLowerCase());
+    const fallbackOption = "404"; // "Return an HTTP 404 File Not Found response"
+
+    /** @see https://en.gravatar.com/site/implement/images/#default-image */
+    return `${base}${hash}?s=${dimensions}&d=${fallbackOption}`;
+  };
   const renderComponent = () => {
-    let portrait = /*#__PURE__*/_react.default.createElement(_portrait.StyledIcon, {
+    let portrait = /*#__PURE__*/_react.default.createElement(_portrait2.StyledIcon, {
       type: iconType,
-      size: size,
-      shape: shape || defaultShape,
-      darkBackground: darkBackground
+      size: size
     });
     if (initials) {
-      portrait = /*#__PURE__*/_react.default.createElement(_portraitInitials.default, {
+      portrait = /*#__PURE__*/_react.default.createElement(_portrait2.StyledPortraitInitials, {
         size: size,
-        shape: shape || defaultShape,
-        initials: initials,
-        darkBackground: darkBackground,
-        alt: alt
-      });
+        "data-element": "initials"
+      }, initials.slice(0, 3).toUpperCase());
     }
     if (src && !externalError) {
-      portrait = /*#__PURE__*/_react.default.createElement(_portrait.StyledCustomImg, {
+      portrait = /*#__PURE__*/_react.default.createElement(_portrait2.StyledCustomImg, {
         src: src,
-        alt: alt,
-        size: size,
-        shape: shape || defaultShape,
+        alt: alt || name || "",
         "data-element": "user-image",
         onError: () => setExternalError(true)
       });
     }
     if (gravatar && !externalError) {
-      portrait = /*#__PURE__*/_react.default.createElement(_portraitGravatar.default, {
-        gravatarEmail: gravatar,
-        shape: shape || defaultShape,
-        size: size,
-        alt: alt,
-        errorCallback: () => setExternalError(true)
+      portrait = /*#__PURE__*/_react.default.createElement(_portrait2.StyledPortraitGravatar, {
+        src: gravatarSrc(),
+        alt: alt || name || "",
+        onError: () => setExternalError(true)
       });
     }
     if (tooltipMessage) {
@@ -93,16 +96,23 @@ const Portrait = ({
         isVisible: tooltipIsVisible,
         bgColor: tooltipBgColor,
         fontColor: tooltipFontColor
-      }, /*#__PURE__*/_react.default.createElement(_portrait.StyledPortraitContainer, _extends({}, (0, _utils.filterStyledSystemMarginProps)(rest), {
+      }, /*#__PURE__*/_react.default.createElement(_portrait2.StyledPortraitContainer, _extends({}, (0, _utils.filterStyledSystemMarginProps)(rest), {
         onClick: onClick
-      }, tagProps), portrait));
+      }, tagProps, {
+        darkBackground: darkBackground,
+        size: size,
+        shape: shape || defaultShape
+      }), portrait));
     }
-    return /*#__PURE__*/_react.default.createElement(_portrait.StyledPortraitContainer, _extends({}, (0, _utils.filterStyledSystemMarginProps)(rest), {
+    return /*#__PURE__*/_react.default.createElement(_portrait2.StyledPortraitContainer, _extends({}, (0, _utils.filterStyledSystemMarginProps)(rest), {
       onClick: onClick
-    }, tagProps), portrait);
+    }, tagProps, {
+      darkBackground: darkBackground,
+      size: size,
+      shape: shape || defaultShape
+    }), portrait);
   };
   return renderComponent();
 };
-exports.Portrait = Portrait;
 var _default = Portrait;
 exports.default = _default;

package/lib/components/portrait/portrait.config.d.ts

@@ -1,7 +1,7 @@
-export declare const PORTRAIT_SHAPES: string[];
-declare type PortraitSize = "XS" | "S" | "M" | "ML" | "L" | "XL" | "XXL";
-export declare const PORTRAIT_SIZES: PortraitSize[];
-declare type PortraitSizeParams = Record<PortraitSize, {
+import { PortraitShapes, PortraitSizes } from "./portrait.component";
+export declare const PORTRAIT_SHAPES: PortraitShapes[];
+export declare const PORTRAIT_SIZES: PortraitSizes[];
+declare type PortraitSizeParams = Record<PortraitSizes, {
     dimensions: number;
     iconDimensions: number;
 }>;

package/lib/components/portrait/portrait.style.d.ts

@@ -1,28 +1,15 @@
 import React from "react";
 import { MarginProps } from "styled-system";
-import { IconType } from "../icon";
 import { PortraitSizes, PortraitShapes } from "./portrait.component";
-export declare function getColorsForInitials(darkBackground?: boolean): {
-    textColor: "colorsUtilityYang100" | "colorsUtilityYin055";
-    bgColor: "colorsUtilityMajor400" | "colorsUtilityMajor025";
-};
-declare type PortraitSizeAndShape = {
+declare type StyledPortraitProps = {
+    darkBackground?: boolean;
     size: PortraitSizes;
     shape?: PortraitShapes;
+    onClick?: (ev: React.MouseEvent<HTMLElement>) => void;
 };
-export declare const StyledPortraitInitials: import("styled-components").StyledComponent<"div", any, PortraitSizeAndShape & {
-    initials?: string | undefined;
-}, never>;
-export declare const StyledPortraitInitialsImg: import("styled-components").StyledComponent<"img", any, {}, never>;
-export declare const StyledPortraitGravatar: import("styled-components").StyledComponent<"img", any, PortraitSizeAndShape, never>;
-export declare const StyledCustomImg: import("styled-components").StyledComponent<"img", any, PortraitSizeAndShape, never>;
-export declare const StyledIcon: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<import("../icon").IconProps & React.RefAttributes<HTMLSpanElement>>, any, {
-    size: PortraitSizes;
-    shape?: PortraitShapes | undefined;
-    darkBackground: boolean;
-    type: IconType;
-}, never>;
-export declare const StyledPortraitContainer: import("styled-components").StyledComponent<"div", any, MarginProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & {
-    onClick?: ((ev: React.MouseEvent<HTMLElement>) => void) | undefined;
-}, never>;
+export declare const StyledPortraitInitials: import("styled-components").StyledComponent<"div", any, Pick<StyledPortraitProps, "size">, never>;
+export declare const StyledPortraitGravatar: import("styled-components").StyledComponent<"img", any, {}, never>;
+export declare const StyledCustomImg: import("styled-components").StyledComponent<"img", any, {}, never>;
+export declare const StyledIcon: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<import("../icon").IconProps & React.RefAttributes<HTMLSpanElement>>, any, Pick<StyledPortraitProps, "size">, never>;
+export declare const StyledPortraitContainer: import("styled-components").StyledComponent<"div", any, StyledPortraitProps & MarginProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>, never>;
 export {};

package/lib/components/portrait/portrait.style.js

@@ -3,100 +3,35 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledPortraitInitialsImg = exports.StyledPortraitInitials = exports.StyledPortraitGravatar = exports.StyledPortraitContainer = exports.StyledIcon = exports.StyledCustomImg = void 0;
-exports.getColorsForInitials = getColorsForInitials;
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
+exports.StyledPortraitInitials = exports.StyledPortraitGravatar = exports.StyledPortraitContainer = exports.StyledIcon = exports.StyledCustomImg = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _styledSystem = require("styled-system");
 var _base = _interopRequireDefault(require("../../style/themes/base"));
 var _icon = _interopRequireDefault(require("../icon"));
 var _portrait = require("./portrait.config");
+var _profile = _interopRequireDefault(require("../profile/profile.config"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function stylingForSize({
-  size,
-  initials
-}) {
-  const params = _portrait.PORTRAIT_SIZE_PARAMS[size];
-  if (initials) {
-    return (0, _styledComponents.css)`
-      width: inherit;
-      height: inherit;
-      margin: 1px;
-    `;
-  }
-  return (0, _styledComponents.css)`
-    width: ${params?.dimensions}px;
-    height: ${params?.dimensions}px;
-  `;
-}
-function stylingForShape({
-  shape
-}) {
-  let cssString = "overflow: hidden;";
-  if (shape === "square") cssString += "border-radius: 0px;";
-  if (shape === "circle") cssString += "border-radius: var(--borderRadiusCircle);";
-  return (0, _styledComponents.css)`
-    ${cssString}
-  `;
-}
-function stylingForIcon({
-  size,
-  darkBackground
-}) {
-  const params = _portrait.PORTRAIT_SIZE_PARAMS[size];
-  let color = "var(--colorsUtilityMajor200)";
-  let backgroundColor = "var(--colorsUtilityMajor025)";
-  if (darkBackground) {
-    color = "var(--colorsUtilityMajor025)";
-    backgroundColor = "var(--colorsUtilityMajor200)";
-  }
-  return (0, _styledComponents.css)`
-    background-color: ${backgroundColor};
-    color: ${color};
-    ::before {
-      font-size: ${params?.iconDimensions}px;
-    }
-  `;
-}
-function getColorsForInitials(darkBackground) {
-  return {
-    textColor: darkBackground ? "colorsUtilityYang100" : "colorsUtilityYin055",
-    bgColor: darkBackground ? "colorsUtilityMajor400" : "colorsUtilityMajor025"
-  };
-}
 const StyledPortraitInitials = _styledComponents.default.div`
-  display: inline-block;
-  vertical-align: middle;
-  box-sizing: border-box;
-  ${stylingForSize}
-  ${stylingForShape}
-  outline: 1px solid var(--colorsUtilityMajor200);
-  /* Styling for safari. This ensures that there is no outline on the component but that a border is still present 
-     to achieve the same styling as Chrome and Firefox */
-  @media not all and (min-resolution: 0.001dpcm) {
-    @supports (-webkit-appearance: none) and (stroke-color: transparent) {
-      border: 1px solid var(--colorsUtilityMajor200);
-      outline: none;
-    }
-  }
+  font-weight: bold;
+  font-size: ${({
+  size
+}) => _profile.default[size].initialSize};
+  display: flex;
+  white-space: nowrap;
+  align-items: center;
+  justify-content: center;
+  height: inherit;
+  width: inherit;
 `;
 exports.StyledPortraitInitials = StyledPortraitInitials;
-const StyledPortraitInitialsImg = _styledComponents.default.img`
-  display: block;
-`;
-exports.StyledPortraitInitialsImg = StyledPortraitInitialsImg;
 const StyledPortraitGravatar = _styledComponents.default.img`
-  display: inline-block;
-  vertical-align: middle;
-  ${stylingForSize}
-  ${stylingForShape}
+  height: inherit;
+  width: inherit;
 `;
 exports.StyledPortraitGravatar = StyledPortraitGravatar;
 const StyledCustomImg = _styledComponents.default.img`
-  display: block;
-  ${stylingForSize}
-  ${stylingForShape}
+  height: inherit;
+  width: inherit;
 `;
 
 // && is used here to increase the specificity
@@ -104,18 +39,36 @@ const StyledCustomImg = _styledComponents.default.img`
 exports.StyledCustomImg = StyledCustomImg;
 const StyledIcon = (0, _styledComponents.default)(_icon.default)`
   && {
-    box-sizing: border-box;
-    line-height: 14px;
-    ${stylingForSize}
-    ${stylingForIcon}
-    ${stylingForShape}
-    border: 1px dashed ${({
-  darkBackground
-}) => darkBackground ? "var(--colorsUtilityMajorTransparent)" : "var(--colorsUtilityMajor200)"};
+    color: inherit;
+    height: inherit;
+    width: inherit;
+
+    ::before {
+      font-size: ${({
+  size
+}) => _portrait.PORTRAIT_SIZE_PARAMS[size].iconDimensions}px;
+    }
   }
 `;
 exports.StyledIcon = StyledIcon;
 const StyledPortraitContainer = _styledComponents.default.div`
+  color: ${({
+  darkBackground
+}) => darkBackground ? "var(--colorsUtilityReadOnly600)" : "var(--colorsUtilityYin090)"};
+  background-color: ${({
+  darkBackground
+}) => darkBackground ? "var(--colorsUtilityYin090)" : "var(--colorsUtilityReadOnly400)"};
+  width: ${({
+  size
+}) => _portrait.PORTRAIT_SIZE_PARAMS[size].dimensions}px;
+  height: ${({
+  size
+}) => _portrait.PORTRAIT_SIZE_PARAMS[size].dimensions}px;
+  overflow: hidden;
+  border-radius: ${({
+  shape
+}) => shape === "square" ? "0px" : "var(--borderRadiusCircle)"};
+  border: 1px solid var(--colorsUtilityReadOnly600);
   display: inline-block;
   ${({
   onClick

package/lib/components/profile/profile.component.d.ts

@@ -5,14 +5,20 @@ export interface ProfileProps {
     className?: string;
     /** Custom source URL */
     src?: string;
+    /** The `alt` HTML string. */
+    alt?: string;
     /** Define the name to display. */
-    name: string;
+    name?: string;
     /** Define the email to use (will check Gravatar for image). */
-    email: string;
+    email?: string;
+    /** Define read-only text to display. */
+    text?: string;
     /** Define initials to display if there is no Gravatar image. */
     initials?: string;
     /** Allow to setup size for the component */
     size?: ProfileSize;
+    /** Use a dark background. */
+    darkBackground?: boolean;
 }
-export declare const Profile: ({ src, className, initials, name, size, email, ...props }: ProfileProps) => React.JSX.Element;
+export declare const Profile: ({ src, alt, className, initials, name, size, email, text, darkBackground, ...props }: ProfileProps) => React.JSX.Element;
 export default Profile;

package/lib/components/profile/profile.component.js

@@ -17,52 +17,69 @@ function acronymize(str) {
   if (!matches) return "";
   return matches.join("");
 }
+let useOfNoNameWarnTriggered = false;
 const Profile = ({
   src,
+  alt,
   className,
   initials,
   name,
   size,
   email,
+  text,
+  darkBackground,
   ...props
 }) => {
   const getInitials = () => {
     if (initials) return initials;
-    return acronymize(name);
+    return acronymize(name).slice(0, 3).toUpperCase();
+  };
+  const commonAvatarProps = {
+    darkBackground,
+    alt,
+    name,
+    initials: getInitials(),
+    size
   };
   const avatar = () => {
     if (src) {
-      return /*#__PURE__*/_react.default.createElement(_profile.ProfileAvatarStyle, {
+      return /*#__PURE__*/_react.default.createElement(_profile.ProfileAvatarStyle, _extends({
         src: src,
-        alt: getInitials(),
-        initials: getInitials(),
-        size: size,
-        shape: "circle",
         "data-element": "user-image"
-      });
+      }, commonAvatarProps));
     }
-    return /*#__PURE__*/_react.default.createElement(_profile.ProfileAvatarStyle, {
-      initials: getInitials(),
-      gravatar: email,
-      size: size
-    });
+    return /*#__PURE__*/_react.default.createElement(_profile.ProfileAvatarStyle, _extends({
+      gravatar: email
+    }, commonAvatarProps));
   };
-  const text = () => {
-    return /*#__PURE__*/_react.default.createElement(_profile.ProfileDetailsStyle, {
+  if (!useOfNoNameWarnTriggered && !name && (email || text)) {
+    useOfNoNameWarnTriggered = true;
+    console.warn("[WARNING] The `email` or `text` prop should not be used without the `name` prop in `Profile`." + " Please use the `name` prop as well as `email` or `text`.");
+  }
+  const children = () => {
+    if (name) return /*#__PURE__*/_react.default.createElement(_profile.ProfileDetailsStyle, {
       size: size,
-      hasSrc: !!src
+      hasSrc: !!src,
+      "data-element": "details"
     }, /*#__PURE__*/_react.default.createElement(_profile.ProfileNameStyle, {
       size: size,
       "data-element": "name"
     }, name), /*#__PURE__*/_react.default.createElement(_profile.ProfileEmailStyle, {
+      href: `mailto: ${email}`,
       size: size,
+      darkBackground: darkBackground,
       "data-element": "email"
-    }, email));
+    }, email), /*#__PURE__*/_react.default.createElement(_profile.ProfileTextStyle, {
+      size: size,
+      "data-element": "text"
+    }, text));
+    return null;
   };
   return /*#__PURE__*/_react.default.createElement(_profile.ProfileStyle, _extends({
     className: className,
-    hasSrc: !!src
-  }, (0, _tags.default)("profile", props), (0, _utils.filterStyledSystemMarginProps)(props)), avatar(), text());
+    hasSrc: !!src,
+    darkBackground: darkBackground
+  }, (0, _tags.default)("profile", props), (0, _utils.filterStyledSystemMarginProps)(props)), avatar(), children());
 };
 exports.Profile = Profile;
 var _default = Profile;

package/lib/components/profile/profile.config.d.ts

@@ -3,53 +3,53 @@ declare type AllProfileSizes = typeof PROFILE_SIZES;
 export declare type ProfileSize = AllProfileSizes[number];
 declare const _default: {
     XS: {
+        initialSize: string;
         nameSize: string;
         emailSize: string;
         lineHeight: string;
         marginLeft: string;
-        marginTop: string;
     };
     S: {
+        initialSize: string;
         nameSize: string;
         emailSize: string;
         lineHeight: string;
         marginLeft: string;
-        marginTop: string;
     };
     M: {
+        initialSize: string;
         nameSize: string;
         emailSize: string;
         lineHeight: string;
         marginLeft: string;
-        marginTop: string;
     };
     ML: {
+        initialSize: string;
         nameSize: string;
         emailSize: string;
         lineHeight: string;
         marginLeft: string;
-        marginTop: string;
     };
     L: {
+        initialSize: string;
         nameSize: string;
         emailSize: string;
         lineHeight: string;
         marginLeft: string;
-        marginTop: string;
     };
     XL: {
+        initialSize: string;
         nameSize: string;
         emailSize: string;
         lineHeight: string;
         marginLeft: string;
-        marginTop: string;
     };
     XXL: {
+        initialSize: string;
         nameSize: string;
         emailSize: string;
         lineHeight: string;
         marginLeft: string;
-        marginTop: string;
     };
 };
 export default _default;