carbon-react 123.8.0 → 123.9.0

package/esm/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/esm/components/portrait/portrait.component.js

@@ -1,18 +1,19 @@
 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); }
 import React, { useEffect, useState, useContext } from "react";
 import PropTypes from "prop-types";
+import MD5 from "crypto-js/md5";
 import invariant from "invariant";
 import Tooltip from "../tooltip";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
-import PortraitGravatar from "./portrait-gravatar.component";
-import PortraitInitials from "./portrait-initials.component";
-import { StyledCustomImg, StyledIcon, StyledPortraitContainer } from "./portrait.style";
+import { PORTRAIT_SIZE_PARAMS } from "./portrait.config";
+import { StyledCustomImg, StyledIcon, StyledPortraitContainer, StyledPortraitInitials, StyledPortraitGravatar } from "./portrait.style";
 import { filterStyledSystemMarginProps } from "../../style/utils";
 import { NewValidationContext as RoundedCornersOptOutContext } from "../carbon-provider/carbon-provider.component";
-export const Portrait = ({
-  alt = "",
+const Portrait = ({
+  alt,
+  name,
   darkBackground = false,
-  gravatar,
+  gravatar = "",
   iconType = "individual",
   initials,
   shape,
@@ -39,39 +40,41 @@ export const Portrait = ({
     setExternalError(false);
   }, [gravatar, src]);
   const tagProps = tagComponent("portrait", rest);
+  const gravatarSrc = () => {
+    const {
+      dimensions
+    } = PORTRAIT_SIZE_PARAMS[size];
+    const base = "https://www.gravatar.com/avatar/";
+    const hash = MD5(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.createElement(StyledIcon, {
       type: iconType,
-      size: size,
-      shape: shape || defaultShape,
-      darkBackground: darkBackground
+      size: size
     });
     if (initials) {
-      portrait = /*#__PURE__*/React.createElement(PortraitInitials, {
+      portrait = /*#__PURE__*/React.createElement(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.createElement(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.createElement(PortraitGravatar, {
-        gravatarEmail: gravatar,
-        shape: shape || defaultShape,
-        size: size,
-        alt: alt,
-        errorCallback: () => setExternalError(true)
+      portrait = /*#__PURE__*/React.createElement(StyledPortraitGravatar, {
+        src: gravatarSrc(),
+        alt: alt || name || "",
+        onError: () => setExternalError(true)
       });
     }
     if (tooltipMessage) {
@@ -86,11 +89,19 @@ export const Portrait = ({
         fontColor: tooltipFontColor
       }, /*#__PURE__*/React.createElement(StyledPortraitContainer, _extends({}, filterStyledSystemMarginProps(rest), {
         onClick: onClick
-      }, tagProps), portrait));
+      }, tagProps, {
+        darkBackground: darkBackground,
+        size: size,
+        shape: shape || defaultShape
+      }), portrait));
     }
     return /*#__PURE__*/React.createElement(StyledPortraitContainer, _extends({}, filterStyledSystemMarginProps(rest), {
       onClick: onClick
-    }, tagProps), portrait);
+    }, tagProps, {
+      darkBackground: darkBackground,
+      size: size,
+      shape: shape || defaultShape
+    }), portrait);
   };
   return renderComponent();
 };

package/esm/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/esm/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/esm/components/portrait/portrait.style.js

@@ -1,106 +1,63 @@
-import styled, { css } from "styled-components";
+import styled from "styled-components";
 import { margin } from "styled-system";
 import BaseTheme from "../../style/themes/base";
 import Icon from "../icon";
 import { PORTRAIT_SIZE_PARAMS } from "./portrait.config";
-function stylingForSize({
-  size,
-  initials
-}) {
-  const params = PORTRAIT_SIZE_PARAMS[size];
-  if (initials) {
-    return css`
-      width: inherit;
-      height: inherit;
-      margin: 1px;
-    `;
-  }
-  return 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 css`
-    ${cssString}
-  `;
-}
-function stylingForIcon({
-  size,
-  darkBackground
-}) {
-  const params = PORTRAIT_SIZE_PARAMS[size];
-  let color = "var(--colorsUtilityMajor200)";
-  let backgroundColor = "var(--colorsUtilityMajor025)";
-  if (darkBackground) {
-    color = "var(--colorsUtilityMajor025)";
-    backgroundColor = "var(--colorsUtilityMajor200)";
-  }
-  return css`
-    background-color: ${backgroundColor};
-    color: ${color};
-    ::before {
-      font-size: ${params?.iconDimensions}px;
-    }
-  `;
-}
-export function getColorsForInitials(darkBackground) {
-  return {
-    textColor: darkBackground ? "colorsUtilityYang100" : "colorsUtilityYin055",
-    bgColor: darkBackground ? "colorsUtilityMajor400" : "colorsUtilityMajor025"
-  };
-}
+import profileConfigSizes from "../profile/profile.config";
 export const StyledPortraitInitials = styled.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;
-    }
-  }
-`;
-export const StyledPortraitInitialsImg = styled.img`
-  display: block;
+  font-weight: bold;
+  font-size: ${({
+  size
+}) => profileConfigSizes[size].initialSize};
+  display: flex;
+  white-space: nowrap;
+  align-items: center;
+  justify-content: center;
+  height: inherit;
+  width: inherit;
 `;
 export const StyledPortraitGravatar = styled.img`
-  display: inline-block;
-  vertical-align: middle;
-  ${stylingForSize}
-  ${stylingForShape}
+  height: inherit;
+  width: inherit;
 `;
 export const StyledCustomImg = styled.img`
-  display: block;
-  ${stylingForSize}
-  ${stylingForShape}
+  height: inherit;
+  width: inherit;
 `;
 
 // && is used here to increase the specificity
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 export const StyledIcon = styled(Icon)`
   && {
-    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_SIZE_PARAMS[size].iconDimensions}px;
+    }
   }
 `;
 export const StyledPortraitContainer = styled.div`
+  color: ${({
+  darkBackground
+}) => darkBackground ? "var(--colorsUtilityReadOnly600)" : "var(--colorsUtilityYin090)"};
+  background-color: ${({
+  darkBackground
+}) => darkBackground ? "var(--colorsUtilityYin090)" : "var(--colorsUtilityReadOnly400)"};
+  width: ${({
+  size
+}) => PORTRAIT_SIZE_PARAMS[size].dimensions}px;
+  height: ${({
+  size
+}) => 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/esm/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/esm/components/profile/profile.component.js

@@ -2,7 +2,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 import React from "react";
 import PropTypes from "prop-types";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
-import { ProfileStyle, ProfileNameStyle, ProfileDetailsStyle, ProfileAvatarStyle, ProfileEmailStyle } from "./profile.style";
+import { ProfileStyle, ProfileNameStyle, ProfileDetailsStyle, ProfileAvatarStyle, ProfileEmailStyle, ProfileTextStyle } from "./profile.style";
 import { filterStyledSystemMarginProps } from "../../style/utils";
 function acronymize(str) {
   if (!str) return "";
@@ -10,51 +10,68 @@ function acronymize(str) {
   if (!matches) return "";
   return matches.join("");
 }
+let useOfNoNameWarnTriggered = false;
 export 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.createElement(ProfileAvatarStyle, {
+      return /*#__PURE__*/React.createElement(ProfileAvatarStyle, _extends({
         src: src,
-        alt: getInitials(),
-        initials: getInitials(),
-        size: size,
-        shape: "circle",
         "data-element": "user-image"
-      });
+      }, commonAvatarProps));
     }
-    return /*#__PURE__*/React.createElement(ProfileAvatarStyle, {
-      initials: getInitials(),
-      gravatar: email,
-      size: size
-    });
+    return /*#__PURE__*/React.createElement(ProfileAvatarStyle, _extends({
+      gravatar: email
+    }, commonAvatarProps));
   };
-  const text = () => {
-    return /*#__PURE__*/React.createElement(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.createElement(ProfileDetailsStyle, {
       size: size,
-      hasSrc: !!src
+      hasSrc: !!src,
+      "data-element": "details"
     }, /*#__PURE__*/React.createElement(ProfileNameStyle, {
       size: size,
       "data-element": "name"
     }, name), /*#__PURE__*/React.createElement(ProfileEmailStyle, {
+      href: `mailto: ${email}`,
       size: size,
+      darkBackground: darkBackground,
       "data-element": "email"
-    }, email));
+    }, email), /*#__PURE__*/React.createElement(ProfileTextStyle, {
+      size: size,
+      "data-element": "text"
+    }, text));
+    return null;
   };
   return /*#__PURE__*/React.createElement(ProfileStyle, _extends({
     className: className,
-    hasSrc: !!src
-  }, tagComponent("profile", props), filterStyledSystemMarginProps(props)), avatar(), text());
+    hasSrc: !!src,
+    darkBackground: darkBackground
+  }, tagComponent("profile", props), filterStyledSystemMarginProps(props)), avatar(), children());
 };
 export default Profile;

package/esm/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;

package/esm/components/profile/profile.config.js

@@ -1,52 +1,52 @@
 export const PROFILE_SIZES = ["XS", "S", "M", "ML", "L", "XL", "XXL"];
 export default {
   XS: {
+    initialSize: "var(--fontSizes050)",
     nameSize: "var(--fontSizes050)",
     emailSize: "var(--fontSizes025)",
     lineHeight: "12px",
-    marginLeft: "16px",
-    marginTop: "1px"
+    marginLeft: "16px"
   },
   S: {
+    initialSize: "var(--fontSizes100)",
     nameSize: "var(--fontSizes100)",
     emailSize: "var(--fontSizes100)",
     lineHeight: "16px",
-    marginLeft: "16px",
-    marginTop: "1px"
+    marginLeft: "16px"
   },
   M: {
+    initialSize: "var(--fontSizes300)",
     nameSize: "var(--fontSizes100)",
     emailSize: "var(--fontSizes100)",
     lineHeight: "16px",
-    marginLeft: "16px",
-    marginTop: "4px"
+    marginLeft: "16px"
   },
   ML: {
+    initialSize: "var(--fontSizes600)",
     nameSize: "var(--fontSizes200)",
     emailSize: "var(--fontSizes100)",
     lineHeight: "20px",
-    marginLeft: "24px",
-    marginTop: "8px"
+    marginLeft: "24px"
   },
   L: {
+    initialSize: "var(--fontSizes700)",
     nameSize: "var(--fontSizes400)",
     emailSize: "var(--fontSizes100)",
     lineHeight: "22px",
-    marginLeft: "24px",
-    marginTop: "14px"
+    marginLeft: "24px"
   },
   XL: {
+    initialSize: "var(--fontSizes900)",
     nameSize: "var(--fontSizes600)",
     emailSize: "var(--fontSizes300)",
     lineHeight: "26px",
-    marginLeft: "32px",
-    marginTop: "24px"
+    marginLeft: "32px"
   },
   XXL: {
+    initialSize: "var(--fontSizes1000)",
     nameSize: "var(--fontSizes700)",
     emailSize: "var(--fontSizes600)",
     lineHeight: "30px",
-    marginLeft: "40px",
-    marginTop: "32px"
+    marginLeft: "40px"
   }
 };

package/esm/components/profile/profile.style.d.ts

@@ -1,16 +1,14 @@
 /// <reference types="react" />
 import { ProfileSize } from "./profile.config";
-interface ProfileSizeProps {
+interface ProfileSProps {
     size?: ProfileSize;
+    hasSrc?: boolean;
+    darkBackground?: boolean;
 }
-interface ProfileHasSrcProps {
-    hasSrc: boolean;
-}
-interface ProfileDetailsStyleProps extends ProfileSizeProps, ProfileHasSrcProps {
-}
-declare const ProfileNameStyle: import("styled-components").StyledComponent<"span", any, ProfileSizeProps, never>;
-declare const ProfileEmailStyle: import("styled-components").StyledComponent<"span", any, ProfileSizeProps, never>;
-declare const ProfileStyle: import("styled-components").StyledComponent<"div", any, ProfileHasSrcProps, never>;
-declare const ProfileDetailsStyle: import("styled-components").StyledComponent<"div", any, ProfileDetailsStyleProps, never>;
-declare const ProfileAvatarStyle: import("styled-components").StyledComponent<({ alt, darkBackground, gravatar, iconType, initials, shape, size, src, onClick, tooltipMessage, tooltipId, tooltipIsVisible, tooltipPosition, tooltipType, tooltipSize, tooltipBgColor, tooltipFontColor, ...rest }: import("../portrait").PortraitProps) => import("react").JSX.Element, any, {}, never>;
-export { ProfileStyle, ProfileNameStyle, ProfileDetailsStyle, ProfileAvatarStyle, ProfileEmailStyle, };
+declare const ProfileNameStyle: import("styled-components").StyledComponent<"span", any, ProfileSProps, never>;
+declare const ProfileEmailStyle: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../link").LinkProps & import("react").RefAttributes<HTMLButtonElement | HTMLLinkElement>>, any, Pick<ProfileSProps, "size" | "darkBackground">, never>;
+declare const ProfileTextStyle: import("styled-components").StyledComponent<"span", any, ProfileSProps, never>;
+declare const ProfileStyle: import("styled-components").StyledComponent<"div", any, Pick<ProfileSProps, "darkBackground" | "hasSrc">, never>;
+declare const ProfileDetailsStyle: import("styled-components").StyledComponent<"div", any, Pick<ProfileSProps, "size" | "hasSrc">, never>;
+declare const ProfileAvatarStyle: import("styled-components").StyledComponent<({ alt, name, darkBackground, gravatar, iconType, initials, shape, size, src, onClick, tooltipMessage, tooltipId, tooltipIsVisible, tooltipPosition, tooltipType, tooltipSize, tooltipBgColor, tooltipFontColor, ...rest }: import("../portrait").PortraitProps) => import("react").JSX.Element, any, {}, never>;
+export { ProfileStyle, ProfileNameStyle, ProfileDetailsStyle, ProfileAvatarStyle, ProfileEmailStyle, ProfileTextStyle, };