carbon-react 110.1.1 → 110.2.0

package/esm/components/portrait/portrait-gravatar.component.js

@@ -1,5 +1,3 @@
-function _extends() { _extends = Object.assign || 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 from "react";
 import PropTypes from "prop-types";
 import MD5 from "crypto-js/md5";
@@ -10,9 +8,8 @@ const PortraitGravatar = ({
   gravatarEmail,
   size,
   alt,
-  shape,
-  errorCallback,
-  ...rest
+  shape = "square",
+  errorCallback
 }) => {
   const gravatarSrc = () => {
     const {
@@ -27,33 +24,21 @@ const PortraitGravatar = ({
     return `${base}${hash}?s=${dimensions}&d=${fallbackOption}`;
   };
 
-  return /*#__PURE__*/React.createElement(StyledPortraitGravatar, _extends({
+  return /*#__PURE__*/React.createElement(StyledPortraitGravatar, {
     src: gravatarSrc(),
     alt: alt,
     size: size,
     shape: shape,
     onError: errorCallback,
     "data-element": "user-image"
-  }, rest));
+  });
 };
 
 PortraitGravatar.propTypes = {
-  /** The user's email address for the Gravatar. */
-  gravatarEmail: PropTypes.string.isRequired,
-
-  /** The size of the Gravatar. */
-  size: PropTypes.oneOf(["XS", "S", "M", "ML", "L", "XL", "XXL"]).isRequired,
-
-  /** The shape of the Gravatar. */
-  shape: PropTypes.oneOf(["circle", "square"]),
-
-  /** The `alt` HTML string. */
-  alt: PropTypes.string,
-
-  /** A callback to execute if the Gravatar image fails to load. */
-  errorCallback: PropTypes.func
-};
-PortraitGravatar.defaultProps = {
-  shape: "square"
+  "alt": PropTypes.string,
+  "errorCallback": PropTypes.func,
+  "gravatarEmail": PropTypes.string.isRequired,
+  "shape": PropTypes.oneOf(["circle", "square"]),
+  "size": PropTypes.oneOf(["L", "M", "ML", "S", "XL", "XS", "XXL"]).isRequired
 };
 export default PortraitGravatar;

package/esm/components/portrait/portrait-initials.component.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { PortraitSizes, PortraitShapes } from "./portrait.component";
+export interface PortraitInitialsProps {
+    /** The user's initials to render. */
+    initials: string;
+    /** The size of the initials image. */
+    size: PortraitSizes;
+    /** Use a dark background. */
+    darkBackground?: boolean;
+    /** The shape of the Portrait. */
+    shape?: PortraitShapes;
+    /** The `alt` HTML string. */
+    alt?: string;
+}
+declare const PortraitInitials: ({ initials, size, shape, darkBackground, alt, }: PortraitInitialsProps) => JSX.Element;
+export default PortraitInitials;

package/esm/components/portrait/portrait-initials.component.js

@@ -1,5 +1,3 @@
-function _extends() { _extends = Object.assign || 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 } from "react";
 import PropTypes from "prop-types";
 import tokens from "@sage/design-tokens/js/base/common";
@@ -9,14 +7,13 @@ import { PORTRAIT_SIZE_PARAMS } from "./portrait.config";
 const PortraitInitials = ({
   initials,
   size,
-  shape,
+  shape = "square",
   darkBackground,
-  alt,
-  ...rest
+  alt
 }) => {
   const [cachedImageDataUrl, setCachedImageDataUrl] = useState();
   useEffect(() => {
-    setCachedImageDataUrl(null);
+    setCachedImageDataUrl("");
   }, [initials, size, darkBackground]);
 
   const generateDataUrl = () => {
@@ -36,16 +33,20 @@ const PortraitInitials = ({
     dimensions -= 2; // Set canvas with & height
 
     canvas.width = dimensions;
-    canvas.height = dimensions; // Select a font family to support different language characters
-    // like Arial
+    canvas.height = dimensions; // Select a font family to support different language characters like Arial
+
+    /* istanbul ignore else */
 
-    context.font = `${Math.round(canvas.width / 2.4)}px "Sage UI", Arial`;
-    context.textAlign = "center"; // Setup background and front color
+    if (context) {
+      context.font = `${Math.round(canvas.width / 2.4)}px "Sage UI", Arial`;
+      context.textAlign = "center"; // Setup background and front color
+
+      context.fillStyle = tokens[bgColor];
+      context.fillRect(0, 0, dimensions, dimensions);
+      context.fillStyle = tokens[textColor];
+      context.fillText(initials.slice(0, 3).toUpperCase(), dimensions / 2, dimensions / 1.5);
+    } // Set image representation in default format (png)
 
-    context.fillStyle = tokens[bgColor];
-    context.fillRect(0, 0, dimensions, dimensions);
-    context.fillStyle = tokens[textColor];
-    context.fillText(initials.slice(0, 3).toUpperCase(), dimensions / 2, dimensions / 1.5); // Set image representation in default format (png)
 
     const dataURI = canvas.toDataURL(); // Dispose canvas element
 
@@ -54,34 +55,22 @@ const PortraitInitials = ({
     return dataURI;
   };
 
-  return /*#__PURE__*/React.createElement(StyledPortraitInitials, _extends({
+  return /*#__PURE__*/React.createElement(StyledPortraitInitials, {
     "data-element": "initials",
     size: size,
     shape: shape,
     initials: initials
-  }, rest), /*#__PURE__*/React.createElement(StyledPortraitInitialsImg, {
+  }, /*#__PURE__*/React.createElement(StyledPortraitInitialsImg, {
     src: generateDataUrl(),
     alt: alt
   }));
 };
 
 PortraitInitials.propTypes = {
-  /** The user's initials to render. */
-  initials: PropTypes.string.isRequired,
-
-  /** The size of the initials image. */
-  size: PropTypes.oneOf(["XS", "S", "M", "ML", "L", "XL", "XXL"]).isRequired,
-
-  /** Use a dark background. */
-  darkBackground: PropTypes.bool,
-
-  /** The shape of the Portrait. */
-  shape: PropTypes.oneOf(["circle", "square"]),
-
-  /** The `alt` HTML string. */
-  alt: PropTypes.string
-};
-PortraitInitials.defaultProps = {
-  shape: "square"
+  "alt": PropTypes.string,
+  "darkBackground": PropTypes.bool,
+  "initials": PropTypes.string.isRequired,
+  "shape": PropTypes.oneOf(["circle", "square"]),
+  "size": PropTypes.oneOf(["L", "M", "ML", "S", "XL", "XS", "XXL"]).isRequired
 };
 export default PortraitInitials;

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

@@ -0,0 +1,50 @@
+import React from "react";
+import { MarginProps } from "styled-system";
+import { IconType } from "../icon";
+export declare type PortraitShapes = "circle" | "square";
+export declare type PortraitSizes = "XS" | "S" | "M" | "ML" | "L" | "XL" | "XXL";
+export interface PortraitBaseProps extends MarginProps {
+    /** The size of the Portrait. */
+    size?: PortraitSizes;
+    /** The `alt` HTML string. */
+    alt?: string;
+    /** The shape of the Portrait. */
+    shape?: PortraitShapes;
+    /** Icon to be rendered as a fallback. */
+    iconType?: IconType;
+    /** The initials to render in the Portrait. */
+    initials?: string;
+    /** Use a dark background. */
+    darkBackground?: boolean;
+    /** Prop for `onClick` events. */
+    onClick?: (ev: React.MouseEvent<HTMLElement>) => void;
+    /** The message to be displayed within the tooltip */
+    tooltipMessage?: React.ReactNode;
+    /** The id attribute to use for the tooltip */
+    tooltipId?: string;
+    /** Whether to to show the Tooltip */
+    tooltipIsVisible?: boolean;
+    /** Sets position of the tooltip */
+    tooltipPosition?: "top" | "bottom" | "left" | "right";
+    /** Defines the message type */
+    tooltipType?: string;
+    /** Defines the size of the tooltip content */
+    tooltipSize?: "medium" | "large";
+    /** Override background color of the Tooltip, provide any color from palette or any valid css color value. */
+    tooltipBgColor?: string;
+    /** Override font color of the Tooltip, provide any color from palette or any valid css color value. */
+    tooltipFontColor?: string;
+}
+export interface PortraitWithGravatar extends PortraitBaseProps {
+    /** An email address registered with Gravatar. */
+    gravatar?: string;
+    src?: never;
+}
+export interface PortraitWithSrc extends PortraitBaseProps {
+    /** A custom image URL. */
+    src?: string;
+    gravatar?: never;
+}
+export declare type PortraitProps = PortraitWithGravatar | PortraitWithSrc;
+export declare const Portrait: ({ alt, darkBackground, gravatar, iconType, initials, shape, size, src, onClick, tooltipMessage, tooltipId, tooltipIsVisible, tooltipPosition, tooltipType, tooltipSize, tooltipBgColor, tooltipFontColor, ...rest }: PortraitProps) => JSX.Element;
+export default Portrait;

package/esm/components/portrait/portrait.component.js

@@ -2,23 +2,21 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 import React, { useEffect, useState } from "react";
 import PropTypes from "prop-types";
-import styledSystemPropTypes from "@styled-system/prop-types";
 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 { filterStyledSystemMarginProps } from "../../style/utils";
-const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
 
 const Portrait = ({
-  alt,
-  darkBackground,
+  alt = "",
+  darkBackground = false,
   gravatar,
-  iconType,
+  iconType = "individual",
   initials,
-  shape,
-  size,
+  shape = "square",
+  size = "M",
   src,
   onClick,
   tooltipMessage,
@@ -99,70 +97,178 @@ const Portrait = ({
   return renderComponent();
 };
 
-Portrait.propTypes = { ...marginPropTypes,
-
-  /** The size of the Portrait. */
-  size: PropTypes.oneOf(["XS", "S", "M", "ML", "L", "XL", "XXL"]),
-
-  /** A custom image URL. */
-  src: props => {
-    if (props.src && typeof props.src !== "string") {
-      throw new Error(`Invalid prop \`src\` of type \`${typeof props.src}\` supplied to \`Portrait\`, expected \`string\`.`);
-    } else if (props.gravatar && props.src) {
-      throw new Error('Portrait requires a prop of "src" or "gravatar" but not both');
-    }
-  },
-
-  /** An email address registered with Gravatar. */
-  gravatar: PropTypes.string,
-
-  /** The `alt` HTML string. */
-  alt: PropTypes.string,
-
-  /** The shape of the Portrait. */
-  shape: PropTypes.oneOf(["circle", "square"]),
-
-  /** The initials to render in the Portrait. */
-  initials: PropTypes.string,
-
-  /** Use a dark background. */
-  darkBackground: PropTypes.bool,
-
-  /** The icon to render as fallback */
-  iconType: PropTypes.string,
-
-  /** Prop for `onClick` events. */
-  onClick: PropTypes.func,
-
-  /** The message to be displayed within the tooltip */
-  tooltipMessage: PropTypes.node,
-
-  /** The id attribute to use for the tooltip */
-  tooltipId: PropTypes.string,
-
-  /** Whether to to show the Tooltip */
-  tooltipIsVisible: PropTypes.bool,
-
-  /** Sets position of the tooltip */
-  tooltipPosition: PropTypes.oneOf(["top", "bottom", "left", "right"]),
-
-  /** Defines the message type */
-  tooltipType: PropTypes.string,
-
-  /** Defines the size of the tooltip content */
-  tooltipSize: PropTypes.oneOf(["medium", "large"]),
-
-  /** Override background color of the Tooltip, provide design token, any color from palette or any valid css color value. */
-  tooltipBgColor: PropTypes.string,
-
-  /** Override font color of the Tooltip, provide design token, any color from palette or any valid css color value. */
-  tooltipFontColor: PropTypes.string
-};
-Portrait.defaultProps = {
-  size: "M",
-  shape: "square",
-  darkBackground: false,
-  alt: "",
-  iconType: "individual"
+Portrait.propTypes = {
+  "alt": PropTypes.string,
+  "darkBackground": PropTypes.bool,
+  "gravatar": PropTypes.string,
+  "iconType": PropTypes.oneOf(["add", "admin", "alert", "analysis", "arrow_down", "arrow_left_boxed", "arrow_left_right_small", "arrow_left_small", "arrow_left", "arrow_right_small", "arrow_right", "arrow_up", "arrow", "attach", "bank", "basket_with_squares", "basket", "bin", "block_arrow_right", "blocked_square", "blocked", "bold", "boxed_shapes", "bulk_destroy", "bullet_list_dotted", "bullet_list_numbers", "bullet_list", "business", "calendar_today", "calendar", "call", "camera", "card_view", "caret_down", "caret_large_down", "caret_large_left", "caret_large_right", "caret_large_up", "caret_left", "caret_right", "caret_up", "cart", "chart_bar", "chart_line", "chart_pie", "chat_notes", "chat", "chevron_down_thick", "chevron_down", "chevron_left_thick", "chevron_left", "chevron_right_thick", "chevron_right", "chevron_up_thick", "chevron_up", "circle_with_dots", "circles_connection", "clock", "close", "coins", "collaborate", "computer_clock", "connect", "contacts", "copy", "create", "credit_card_slash", "credit_card", "cross_circle", "cross", "csv", "delete", "delivery", "disconnect", "disputed", "document_right_align", "document_tick", "document_vertical_lines", "download", "draft", "drag_vertical", "drag", "dropdown", "duplicate", "edit", "edited", "ellipsis_horizontal", "ellipsis_vertical", "email_switch", "email", "entry", "envelope_dollar", "envelope_euro", "error_square", "error", "euro", "expand", "factory", "favourite_lined", "favourite", "fax", "feedback", "file_excel", "file_generic", "file_image", "file_pdf", "file_word", "files_leaning", "filter_new", "filter", "fit_height", "fit_width", "flag", "folder", "gift", "go", "graph", "grid", "help", "hide", "home", "image", "in_progress", "in_transit", "individual", "info", "italic", "key", "ledger_arrow_left", "ledger_arrow_right", "ledger", "lightbulb_off", "lightbulb_on", "link", "list_view", "location", "locked", "logout", "lookup", "marker", "message", "minus_large", "minus", "mobile", "money_bag", "none", "old_warning", "pause_circle", "pause", "pdf", "people_switch", "people", "person_info", "person_tick", "person", "phone", "piggy_bank", "play_circle", "play", "plus_large", "plus", "pound", "print", "progress", "progressed", "question_hollow", "question_mark", "question", "refresh_clock", "refresh", "remove", "sage_coin", "save", "scan", "search", "services", "settings_old", "settings", "share", "shop", "sort_down", "sort_up", "spanner", "split_container", "split", "square_dot", "squares_nine", "stacked_boxes", "stacked_squares", "submitted", "sync", "tag", "talk", "three_boxes", "tick_circle", "tick", "true_tick", "undo", "unlocked", "upload", "uploaded", "video", "view", "warning"]),
+  "initials": PropTypes.string,
+  "m": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "margin": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginBottom": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginLeft": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginRight": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginTop": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginX": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginY": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mb": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "ml": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mr": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mt": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mx": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "my": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "onClick": PropTypes.func,
+  "shape": PropTypes.oneOf(["circle", "square"]),
+  "size": PropTypes.oneOf(["L", "M", "ML", "S", "XL", "XS", "XXL"]),
+  "src": PropTypes.string,
+  "tooltipBgColor": PropTypes.string,
+  "tooltipFontColor": PropTypes.string,
+  "tooltipId": PropTypes.string,
+  "tooltipIsVisible": PropTypes.bool,
+  "tooltipMessage": PropTypes.node,
+  "tooltipPosition": PropTypes.oneOf(["bottom", "left", "right", "top"]),
+  "tooltipSize": PropTypes.oneOf(["large", "medium"]),
+  "tooltipType": PropTypes.string
 };
+export { Portrait };
 export default Portrait;

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

@@ -0,0 +1,32 @@
+export declare const PORTRAIT_SHAPES: string[];
+export declare const PORTRAIT_SIZES: string[];
+export declare const PORTRAIT_SIZE_PARAMS: {
+    XS: {
+        dimensions: number;
+        iconDimensions: number;
+    };
+    S: {
+        dimensions: number;
+        iconDimensions: number;
+    };
+    M: {
+        dimensions: number;
+        iconDimensions: number;
+    };
+    ML: {
+        dimensions: number;
+        iconDimensions: number;
+    };
+    L: {
+        dimensions: number;
+        iconDimensions: number;
+    };
+    XL: {
+        dimensions: number;
+        iconDimensions: number;
+    };
+    XXL: {
+        dimensions: number;
+        iconDimensions: number;
+    };
+};

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

@@ -0,0 +1,28 @@
+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 = {
+    size: PortraitSizes;
+    shape?: PortraitShapes;
+};
+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 {};