carbon-react 110.1.1 → 110.2.0

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

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { PortraitSizes, PortraitShapes } from "./portrait.component";
+export interface PortraitGravatarProps {
+    /** The user's email address for the Gravatar. */
+    gravatarEmail: string;
+    /** The size of the Gravatar. */
+    size: PortraitSizes;
+    /** The shape of the Gravatar. */
+    shape?: PortraitShapes;
+    /** The `alt` HTML string. */
+    alt?: string;
+    /** A callback to execute if the Gravatar image fails to load. */
+    errorCallback?: () => void;
+}
+declare const PortraitGravatar: ({ gravatarEmail, size, alt, shape, errorCallback, }: PortraitGravatarProps) => JSX.Element;
+export default PortraitGravatar;

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

@@ -17,15 +17,12 @@ var _portrait2 = require("./portrait.config");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-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); }
-
 const PortraitGravatar = ({
   gravatarEmail,
   size,
   alt,
-  shape,
-  errorCallback,
-  ...rest
+  shape = "square",
+  errorCallback
 }) => {
   const gravatarSrc = () => {
     const {
@@ -40,34 +37,22 @@ const PortraitGravatar = ({
     return `${base}${hash}?s=${dimensions}&d=${fallbackOption}`;
   };
 
-  return /*#__PURE__*/_react.default.createElement(_portrait.StyledPortraitGravatar, _extends({
+  return /*#__PURE__*/_react.default.createElement(_portrait.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.default.string.isRequired,
-
-  /** The size of the Gravatar. */
-  size: _propTypes.default.oneOf(["XS", "S", "M", "ML", "L", "XL", "XXL"]).isRequired,
-
-  /** The shape of the Gravatar. */
-  shape: _propTypes.default.oneOf(["circle", "square"]),
-
-  /** The `alt` HTML string. */
-  alt: _propTypes.default.string,
-
-  /** A callback to execute if the Gravatar image fails to load. */
-  errorCallback: _propTypes.default.func
-};
-PortraitGravatar.defaultProps = {
-  shape: "square"
+  "alt": _propTypes.default.string,
+  "errorCallback": _propTypes.default.func,
+  "gravatarEmail": _propTypes.default.string.isRequired,
+  "shape": _propTypes.default.oneOf(["circle", "square"]),
+  "size": _propTypes.default.oneOf(["L", "M", "ML", "S", "XL", "XS", "XXL"]).isRequired
 };
 var _default = PortraitGravatar;
 exports.default = _default;

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

@@ -21,19 +21,16 @@ function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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 || 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 PortraitInitials = ({
   initials,
   size,
-  shape,
+  shape = "square",
   darkBackground,
-  alt,
-  ...rest
+  alt
 }) => {
   const [cachedImageDataUrl, setCachedImageDataUrl] = (0, _react.useState)();
   (0, _react.useEffect)(() => {
-    setCachedImageDataUrl(null);
+    setCachedImageDataUrl("");
   }, [initials, size, darkBackground]);
 
   const generateDataUrl = () => {
@@ -53,16 +50,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 = _common.default[bgColor];
+      context.fillRect(0, 0, dimensions, dimensions);
+      context.fillStyle = _common.default[textColor];
+      context.fillText(initials.slice(0, 3).toUpperCase(), dimensions / 2, dimensions / 1.5);
+    } // Set image representation in default format (png)
 
-    context.fillStyle = _common.default[bgColor];
-    context.fillRect(0, 0, dimensions, dimensions);
-    context.fillStyle = _common.default[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
 
@@ -71,35 +72,23 @@ const PortraitInitials = ({
     return dataURI;
   };
 
-  return /*#__PURE__*/_react.default.createElement(_portrait.StyledPortraitInitials, _extends({
+  return /*#__PURE__*/_react.default.createElement(_portrait.StyledPortraitInitials, {
     "data-element": "initials",
     size: size,
     shape: shape,
     initials: initials
-  }, rest), /*#__PURE__*/_react.default.createElement(_portrait.StyledPortraitInitialsImg, {
+  }, /*#__PURE__*/_react.default.createElement(_portrait.StyledPortraitInitialsImg, {
     src: generateDataUrl(),
     alt: alt
   }));
 };
 
 PortraitInitials.propTypes = {
-  /** The user's initials to render. */
-  initials: _propTypes.default.string.isRequired,
-
-  /** The size of the initials image. */
-  size: _propTypes.default.oneOf(["XS", "S", "M", "ML", "L", "XL", "XXL"]).isRequired,
-
-  /** Use a dark background. */
-  darkBackground: _propTypes.default.bool,
-
-  /** The shape of the Portrait. */
-  shape: _propTypes.default.oneOf(["circle", "square"]),
-
-  /** The `alt` HTML string. */
-  alt: _propTypes.default.string
-};
-PortraitInitials.defaultProps = {
-  shape: "square"
+  "alt": _propTypes.default.string,
+  "darkBackground": _propTypes.default.bool,
+  "initials": _propTypes.default.string.isRequired,
+  "shape": _propTypes.default.oneOf(["circle", "square"]),
+  "size": _propTypes.default.oneOf(["L", "M", "ML", "S", "XL", "XS", "XXL"]).isRequired
 };
 var _default = PortraitInitials;
 exports.default = _default;

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

@@ -3,14 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.Portrait = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _propTypes2 = _interopRequireDefault(require("@styled-system/prop-types"));
-
 var _tooltip = _interopRequireDefault(require("../tooltip"));
 
 var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags/tags"));
@@ -31,16 +29,14 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 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); }
 
-const marginPropTypes = (0, _utils.filterStyledSystemMarginProps)(_propTypes2.default.space);
-
 const Portrait = ({
-  alt,
-  darkBackground,
+  alt = "",
+  darkBackground = false,
   gravatar,
-  iconType,
+  iconType = "individual",
   initials,
-  shape,
-  size,
+  shape = "square",
+  size = "M",
   src,
   onClick,
   tooltipMessage,
@@ -121,71 +117,179 @@ const Portrait = ({
   return renderComponent();
 };
 
-Portrait.propTypes = { ...marginPropTypes,
-
-  /** The size of the Portrait. */
-  size: _propTypes.default.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.default.string,
-
-  /** The `alt` HTML string. */
-  alt: _propTypes.default.string,
-
-  /** The shape of the Portrait. */
-  shape: _propTypes.default.oneOf(["circle", "square"]),
-
-  /** The initials to render in the Portrait. */
-  initials: _propTypes.default.string,
-
-  /** Use a dark background. */
-  darkBackground: _propTypes.default.bool,
-
-  /** The icon to render as fallback */
-  iconType: _propTypes.default.string,
-
-  /** Prop for `onClick` events. */
-  onClick: _propTypes.default.func,
-
-  /** The message to be displayed within the tooltip */
-  tooltipMessage: _propTypes.default.node,
-
-  /** The id attribute to use for the tooltip */
-  tooltipId: _propTypes.default.string,
-
-  /** Whether to to show the Tooltip */
-  tooltipIsVisible: _propTypes.default.bool,
-
-  /** Sets position of the tooltip */
-  tooltipPosition: _propTypes.default.oneOf(["top", "bottom", "left", "right"]),
-
-  /** Defines the message type */
-  tooltipType: _propTypes.default.string,
-
-  /** Defines the size of the tooltip content */
-  tooltipSize: _propTypes.default.oneOf(["medium", "large"]),
-
-  /** Override background color of the Tooltip, provide design token, any color from palette or any valid css color value. */
-  tooltipBgColor: _propTypes.default.string,
-
-  /** Override font color of the Tooltip, provide design token, any color from palette or any valid css color value. */
-  tooltipFontColor: _propTypes.default.string
-};
-Portrait.defaultProps = {
-  size: "M",
-  shape: "square",
-  darkBackground: false,
-  alt: "",
-  iconType: "individual"
+exports.Portrait = Portrait;
+Portrait.propTypes = {
+  "alt": _propTypes.default.string,
+  "darkBackground": _propTypes.default.bool,
+  "gravatar": _propTypes.default.string,
+  "iconType": _propTypes.default.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.default.string,
+  "m": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "margin": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "marginBottom": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "marginLeft": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "marginRight": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "marginTop": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "marginX": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "marginY": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "mb": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "ml": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "mr": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "mt": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "mx": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "my": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "onClick": _propTypes.default.func,
+  "shape": _propTypes.default.oneOf(["circle", "square"]),
+  "size": _propTypes.default.oneOf(["L", "M", "ML", "S", "XL", "XS", "XXL"]),
+  "src": _propTypes.default.string,
+  "tooltipBgColor": _propTypes.default.string,
+  "tooltipFontColor": _propTypes.default.string,
+  "tooltipId": _propTypes.default.string,
+  "tooltipIsVisible": _propTypes.default.bool,
+  "tooltipMessage": _propTypes.default.node,
+  "tooltipPosition": _propTypes.default.oneOf(["bottom", "left", "right", "top"]),
+  "tooltipSize": _propTypes.default.oneOf(["large", "medium"]),
+  "tooltipType": _propTypes.default.string
 };
 var _default = Portrait;
 exports.default = _default;

package/lib/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/lib/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 {};