@hig/avatar - npm Package Compare versions

Comparing version 2.1.0 to 2.2.0

build/index.es.js

@@ -6,2 +6,38 @@ import React, { useState } from 'react';
 
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
+function _objectWithoutProperties(source, excluded) {
+  if (source == null) return {};
+
+  var target = _objectWithoutPropertiesLoose(source, excluded);
+
+  var key, i;
+
+  if (Object.getOwnPropertySymbols) {
+    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+
+    for (i = 0; i < sourceSymbolKeys.length; i++) {
+      key = sourceSymbolKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+      target[key] = source[key];
+    }
+  }
+
+  return target;
+}
+
 /*
@@ -38,2 +74,3 @@
 
+
   for (var i = 0; i < document.styleSheets.length; i++) {
@@ -59,5 +96,3 @@ if (document.styleSheets[i].ownerNode === tag) {
 
-var StyleSheet =
-/*#__PURE__*/
-function () {
+var StyleSheet = /*#__PURE__*/function () {
   function StyleSheet(options) {
@@ -142,4 +177,2 @@ this.isSpeedy = options.speedy === undefined ? process.env.NODE_ENV === 'production' : options.speedy;
 
-var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
-
 function stylis_min(W) {
@@ -478,3 +511,3 @@ function M(d, c, e, h, a) {
         for (d = 0 === m ? '' : d[0] + ' '; b < a; ++b) {
-          c[b] = Z(d, c[b], e, m).trim();
+          c[b] = Z(d, c[b], e).trim();
         }
@@ -489,3 +522,3 @@
           for (var n = 0; n < m; ++n) {
-            c[v++] = Z(d[n] + ' ', h[b], e, m).trim();
+            c[v++] = Z(d[n] + ' ', h[b], e).trim();
           }
@@ -694,3 +727,3 @@ }
       default:
-        if ('function' === typeof d) S[A++] = d;else if ('object' === (typeof d === 'undefined' ? 'undefined' : _typeof(d))) for (var c = 0, e = d.length; c < e; ++c) {
+        if ('function' === typeof d) S[A++] = d;else if ('object' === typeof d) for (var c = 0, e = d.length; c < e; ++c) {
           T(d[c]);
@@ -776,5 +809,5 @@ } else Y = !!d | 0;
 
-// https://github.com/thysultan/stylis.js/tree/master/plugins/rule-sheet
 // inlined to avoid umd wrapper and peerDep warnings/installing stylis
 // since we use stylis after closure compiler
+
 var delimiter = '/*|*/';
@@ -792,2 +825,3 @@ var needle = delimiter + '}';
 };
+
 var ruleSheet = function ruleSheet(context, content, selectors, parents, line, column, length, ns, depth, at) {
@@ -852,2 +886,3 @@ switch (context) {
 };
+
 var removeLabel = function removeLabel(context, content) {
@@ -858,9 +893,9 @@ if (context === 1 && // charcode for l
   ) {
-      return '';
-    }
+    return '';
+  }
 };
 
-var isBrowser = typeof document !== 'undefined';
+var isBrowser$1 = typeof document !== 'undefined';
 var rootServerStylisCache = {};
-var getServerStylisCache = isBrowser ? undefined : weakMemoize(function () {
+var getServerStylisCache = isBrowser$1 ? undefined : weakMemoize(function () {
   var getCache = weakMemoize(function () {
@@ -908,3 +943,3 @@ return {};
 
-  if (isBrowser) {
+  if (isBrowser$1) {
     container = options.container || document.head;
@@ -927,3 +962,3 @@ var nodes = document.querySelectorAll("style[data-emotion-" + key + "]");
 
-  if (isBrowser) {
+  if (isBrowser$1) {
     stylis.use(options.stylisPlugins)(ruleSheet);
@@ -1155,4 +1190,2 @@
 
-var _typeof$1 = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
-
 var hyphenateRegex = /[A-Z]|^ms/g;
@@ -1235,3 +1268,3 @@ var animationRegex = /_EMO_([^_]+?)_([^]*?)_EMO_/g;
 
-  switch (typeof interpolation === 'undefined' ? 'undefined' : _typeof$1(interpolation)) {
+  switch (typeof interpolation) {
     case 'boolean':
@@ -1317,3 +1350,3 @@ {
 
-      if ((typeof value === 'undefined' ? 'undefined' : _typeof$1(value)) !== 'object') {
+      if (typeof value !== 'object') {
         if (registered != null && registered[value] !== undefined) {
@@ -1353,4 +1386,5 @@ string += _key + "{" + registered[value] + "}";
 var cursor;
+
 var serializeStyles = function serializeStyles(args, registered, mergedProps) {
-  if (args.length === 1 && _typeof$1(args[0]) === 'object' && args[0] !== null && args[0].styles !== undefined) {
+  if (args.length === 1 && typeof args[0] === 'object' && args[0] !== null && args[0].styles !== undefined) {
     return args[0];
@@ -1417,3 +1451,4 @@ }
 
-var isBrowser$1 = typeof document !== 'undefined';
+var isBrowser = typeof document !== 'undefined';
+
 function getRegisteredStyles(registered, registeredStyles, classNames) {
@@ -1430,2 +1465,3 @@ var rawClassName = '';
 }
+
 var insertStyles = function insertStyles(cache, serialized, isStringTag) {
@@ -1443,3 +1479,3 @@ var className = cache.key + "-" + serialized.name;
   // also, note that this check will be dead code eliminated in the browser
-  isBrowser$1 === false && cache.compat !== undefined) && cache.registered[className] === undefined) {
+  isBrowser === false && cache.compat !== undefined) && cache.registered[className] === undefined) {
     cache.registered[className] = serialized.styles;
@@ -1455,3 +1491,3 @@ }
 
-      if (!isBrowser$1 && maybeStyles !== undefined) {
+      if (!isBrowser && maybeStyles !== undefined) {
         stylesForSSR += maybeStyles;
@@ -1463,3 +1499,3 @@ }
 
-    if (!isBrowser$1 && stylesForSSR.length !== 0) {
+    if (!isBrowser && stylesForSSR.length !== 0) {
       return stylesForSSR;
@@ -1470,4 +1506,2 @@ }
 
-var _typeof$2 = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
-
 function insertWithoutScoping(cache, serialized) {
@@ -1575,3 +1609,3 @@ if (cache.inserted[serialized.name] === undefined) {
 
-    switch (typeof arg === 'undefined' ? 'undefined' : _typeof$2(arg)) {
+    switch (typeof arg) {
       case 'boolean':
@@ -1619,3 +1653,3 @@ break;
 
-var sizes = Object.freeze({
+const sizes = Object.freeze({
   SMALL_16: "small",
@@ -1627,12 +1661,12 @@ MEDIUM_24: "medium",
 });
+const AVAILABLE_SIZES = Object.freeze(Object.values(sizes));
 
-var AVAILABLE_SIZES = Object.freeze(Object.values(sizes));
-
-var _SizeMapping;
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-var SizeMapping = (_SizeMapping = {}, _defineProperty(_SizeMapping, sizes.SMALL_16, "extraSmall"), _defineProperty(_SizeMapping, sizes.MEDIUM_24, "small"), _defineProperty(_SizeMapping, sizes.MEDIUM_32, "medium"), _defineProperty(_SizeMapping, sizes.LARGE_48, "large"), _defineProperty(_SizeMapping, sizes.XLARGE_64, "extraLarge"), _SizeMapping);
-
-var StyleItems = {
+const SizeMapping = {
+  [sizes.SMALL_16]: "extraSmall",
+  [sizes.MEDIUM_24]: "small",
+  [sizes.MEDIUM_32]: "medium",
+  [sizes.LARGE_48]: "large",
+  [sizes.XLARGE_64]: "extraLarge"
+};
+const StyleItems = {
   avatarContainer: "avatarContainer",
@@ -1644,55 +1678,51 @@ avatarImageWrapper: "avatarImageWrapper",
 
-function _defineProperty$1(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 function stylesheet(props, themeData) {
-  var _styles;
-
-  var backgroundId = props.backgroundId,
-      size = props.size,
-      customStylesheet = props.stylesheet;
-
-  var sizeString = size ? SizeMapping[size] : SizeMapping[sizes.MEDIUM_32];
-  var diameter = themeData["avatar." + sizeString + ".diameter"];
-  var fontSize = themeData["avatar." + sizeString + ".fontSize"];
-  var fontFamily = themeData["basics.fontFamilies.main"];
-  var bgColor = themeData["avatar.backgroundColor" + (backgroundId || 1)];
-  var fgColor = themeData["avatar.fontColor"];
-
-  var styles = (_styles = {}, _defineProperty$1(_styles, StyleItems.avatarContainer, {
-    backgroundColor: bgColor,
-    color: fgColor,
-    width: diameter,
-    height: diameter,
-    lineHeight: diameter,
-    fontSize: fontSize,
-    display: "block",
-    position: "relative",
-    margin: 0,
-    overflow: "hidden",
-    borderRadius: "50%",
-    textAlign: "center"
-  }), _defineProperty$1(_styles, StyleItems.avatarImageWrapper, {
-    position: "absolute",
-    display: "flex",
-    zIndex: "2",
-    fontSize: fontSize
-  }), _defineProperty$1(_styles, StyleItems.avatarImage, {
-    borderRadius: "50%",
-    width: diameter,
-    height: diameter
-  }), _defineProperty$1(_styles, StyleItems.avatarInitials, {
-    width: diameter,
-    height: diameter,
-    fontFamily: fontFamily
-  }), _styles);
-
+  const {
+    backgroundId,
+    size,
+    stylesheet: customStylesheet
+  } = props;
+  const sizeString = size ? SizeMapping[size] : SizeMapping[sizes.MEDIUM_32];
+  const diameter = themeData[`avatar.${sizeString}.diameter`];
+  const fontSize = themeData[`avatar.${sizeString}.fontSize`];
+  const fontFamily = themeData["basics.fontFamilies.main"];
+  const bgColor = themeData[`avatar.backgroundColor${backgroundId || 1}`];
+  const fgColor = themeData["avatar.fontColor"];
+  const styles = {
+    [StyleItems.avatarContainer]: {
+      backgroundColor: bgColor,
+      color: fgColor,
+      width: diameter,
+      height: diameter,
+      lineHeight: diameter,
+      fontSize,
+      display: "block",
+      position: "relative",
+      margin: 0,
+      overflow: "hidden",
+      borderRadius: "50%",
+      textAlign: "center"
+    },
+    [StyleItems.avatarImageWrapper]: {
+      position: "absolute",
+      display: "flex",
+      zIndex: "2",
+      fontSize
+    },
+    [StyleItems.avatarImage]: {
+      borderRadius: "50%",
+      width: diameter,
+      height: diameter
+    },
+    [StyleItems.avatarInitials]: {
+      width: diameter,
+      height: diameter,
+      fontFamily
+    }
+  };
   return customStylesheet ? customStylesheet(styles, props, themeData) : styles;
 }
 
-var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
-
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
-var COLOR_VARIANT_COUNT = 15;
-
+const _excluded = ["size", "name", "firstName", "lastName", "stylesheet"];
+const COLOR_VARIANT_COUNT = 15;
 /**
@@ -1704,10 +1734,13 @@ * @param {Object} name
  */
+
 function generateUniqueNumberFromName(name) {
-  var firstName = name.firstName,
-      lastName = name.lastName;
+  const {
+    firstName,
+    lastName
+  } = name;
+  let firstNum = 0;
 
-  var firstNum = 0;
   if (firstName) {
-    var firstArray = firstName.split("");
-    firstArray.forEach(function (char) {
+    const firstArray = firstName.split("");
+    firstArray.forEach(char => {
       firstNum += char.charCodeAt(0);
@@ -1717,6 +1750,7 @@ });
 
-  var lastNum = 0;
+  let lastNum = 0;
+
   if (lastName) {
-    var lastArray = lastName.split("");
-    lastArray.forEach(function (char) {
+    const lastArray = lastName.split("");
+    lastArray.forEach(char => {
       lastNum += char.charCodeAt(0);
@@ -1728,3 +1762,2 @@ });
 }
-
 /**
@@ -1736,8 +1769,9 @@ * @param {Object} name
  */
+
+
 function backgroundIdFromName(name) {
-  var uniqueNum = generateUniqueNumberFromName(name);
-  // Return whole number between 1 and COLOR_VARIANT_COUNT
+  const uniqueNum = generateUniqueNumberFromName(name); // Return whole number between 1 and COLOR_VARIANT_COUNT
+
   return Math.round(uniqueNum) % COLOR_VARIANT_COUNT + 1;
 }
-
 /**
@@ -1749,8 +1783,8 @@ * @param {Object} name
  */
+
 function initialsFromName(name) {
-  var firstInitial = name.firstName ? name.firstName.slice(0, 1) : "";
-  var lastInitial = name.lastName ? name.lastName.slice(0, 1) : "";
-  return ("" + firstInitial + lastInitial).toUpperCase();
+  const firstInitial = name.firstName ? name.firstName.slice(0, 1) : "";
+  const lastInitial = name.lastName ? name.lastName.slice(0, 1) : "";
+  return `${firstInitial}${lastInitial}`.toUpperCase();
 }
-
 /**
@@ -1762,7 +1796,8 @@ * @param {string} name
  */
+
+
 function buildFirstAndLastName(name) {
   if (typeof name === "string") {
-    var spaceIndex = name.lastIndexOf(" ");
+    const spaceIndex = name.lastIndexOf(" "); // No spaces - there is only a single name, return it as the firstName
 
-    // No spaces - there is only a single name, return it as the firstName
     if (spaceIndex === -1) {
@@ -1772,13 +1807,12 @@ return {
       };
-    }
+    } // Grab first name
 
-    // Grab first name
-    var firstName = name.slice(0, spaceIndex);
-    // Grab last name, skipping the space
-    var lastName = name.slice(spaceIndex + 1);
 
-    // Return new name structure, split into firstName and last
+    const firstName = name.slice(0, spaceIndex); // Grab last name, skipping the space
+
+    const lastName = name.slice(spaceIndex + 1); // Return new name structure, split into firstName and last
+
     return {
-      firstName: firstName,
-      lastName: lastName
+      firstName,
+      lastName
     };
@@ -1789,3 +1823,2 @@ }
 }
-
 /**
@@ -1798,47 +1831,53 @@ * @param {Object} props
  */
-function Image(_ref) {
-  var image = _ref.image,
-      alt = _ref.alt,
-      size = _ref.size,
-      onError = _ref.onError,
-      className = _ref.className,
-      resolvedRoles = _ref.resolvedRoles,
-      customStylesheet = _ref.stylesheet;
 
-  var styles = stylesheet({ size: size, stylesheet: customStylesheet }, resolvedRoles);
 
-  var imageWrapperClassName = createCustomClassNames(className, "image-wrapper");
-  var imageClassName = createCustomClassNames(className, "image");
+function Image(_ref) {
+  let {
+    image,
+    alt,
+    size,
+    onError,
+    className,
+    resolvedRoles,
+    stylesheet: customStylesheet
+  } = _ref;
+  const styles = stylesheet({
+    size,
+    stylesheet: customStylesheet
+  }, resolvedRoles);
+  const imageWrapperClassName = createCustomClassNames(className, "image-wrapper");
+  const imageClassName = createCustomClassNames(className, "image");
+  return /*#__PURE__*/React.createElement("span", {
+    className: cx(css(styles[StyleItems.avatarImageWrapper]), imageWrapperClassName)
+  }, /*#__PURE__*/React.createElement("img", {
+    className: cx(css(styles[StyleItems.avatarImage]), imageClassName),
+    src: image,
+    alt: alt,
+    onError: onError
+  }));
+}
 
-  return React.createElement(
-    "span",
-    {
-      className: cx(css(styles[StyleItems.avatarImageWrapper]), imageWrapperClassName)
-    },
-    React.createElement("img", {
-      className: cx(css(styles[StyleItems.avatarImage]), imageClassName),
-      src: image,
-      alt: alt,
-      onError: onError
-    })
-  );
-}
 Image.propTypes = {
   /** URL to a profile image */
   image: PropTypes.string,
+
   /** Optional alt message override for Avatar Image  */
   alt: PropTypes.string,
+
   /** Set the size of the avatar */
   size: PropTypes.oneOf(AVAILABLE_SIZES),
+
   /** Called when an error occurs on the image  */
   onError: PropTypes.func,
+
   /** Optional className */
   className: PropTypes.string,
+
   /** Theme context */
   // eslint-disable-next-line react/forbid-prop-types
   resolvedRoles: PropTypes.any,
+
   /** Optional style override */
   stylesheet: PropTypes.func
 };
-
 /**
@@ -1852,25 +1891,27 @@ * @param {Object} props
  */
+
 function Initials(_ref2) {
-  var size = _ref2.size,
-      name = _ref2.name,
-      className = _ref2.className,
-      resolvedRoles = _ref2.resolvedRoles,
-      customStylesheet = _ref2.stylesheet;
+  let {
+    size,
+    name,
+    className,
+    resolvedRoles,
+    stylesheet: customStylesheet
+  } = _ref2;
+  const styles = stylesheet({
+    size,
+    stylesheet: customStylesheet
+  }, resolvedRoles);
+  const initials = initialsFromName(name);
+  const initialsClassName = createCustomClassNames(className, "initials");
+  return /*#__PURE__*/React.createElement("span", {
+    className: cx(css(styles[StyleItems.avatarInitials]), initialsClassName),
+    "aria-hidden": "true"
+  }, size === sizes.SMALL_16 ? initials[0] : initials);
+}
 
-  var styles = stylesheet({ size: size, stylesheet: customStylesheet }, resolvedRoles);
-  var initials = initialsFromName(name);
-  var initialsClassName = createCustomClassNames(className, "initials");
-
-  return React.createElement(
-    "span",
-    {
-      className: cx(css(styles[StyleItems.avatarInitials]), initialsClassName),
-      "aria-hidden": "true"
-    },
-    size === sizes.SMALL_16 ? initials[0] : initials
-  );
-}
 Initials.propTypes = {
   /** Set the size of the avatar */
   size: PropTypes.oneOf(AVAILABLE_SIZES),
+
   /** First and Last name object */
@@ -1881,11 +1922,13 @@ name: PropTypes.shape({
   }),
+
   /** Optional className */
   className: PropTypes.string,
+
   /** Theme context */
   // eslint-disable-next-line react/forbid-prop-types
   resolvedRoles: PropTypes.any,
+
   /** Optional style override */
   stylesheet: PropTypes.func
 };
-
 /**
@@ -1904,44 +1947,43 @@ * @typedef {Object} AvatarProps
 
-var Avatar = function Avatar(props) {
-  var _useState = useState(undefined),
-      _useState2 = _slicedToArray(_useState, 2),
-      imageUrl = _useState2[0],
-      setImageUrl = _useState2[1];
+const Avatar = props => {
+  const [imageUrl, setImageUrl] = useState(undefined);
+  const [hasImageError, setHasImageError] = useState(false);
 
-  var _useState3 = useState(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      hasImageError = _useState4[0],
-      setHasImageError = _useState4[1];
+  const {
+    size,
+    name,
+    firstName,
+    lastName,
+    stylesheet: customStylesheet
+  } = props,
+        otherProps = _objectWithoutProperties(props, _excluded);
 
-  var size = props.size,
-      name = props.name,
-      firstName = props.firstName,
-      lastName = props.lastName,
-      customStylesheet = props.stylesheet,
-      otherProps = _objectWithoutProperties(props, ["size", "name", "firstName", "lastName", "stylesheet"]);
-
-  var className = otherProps.className;
-
-
-  var nameObj = !firstName && !lastName ? buildFirstAndLastName(name) : {
-    firstName: firstName,
-    lastName: lastName
+  const {
+    className
+  } = otherProps;
+  const nameObj = !firstName && !lastName ? buildFirstAndLastName(name) : {
+    firstName,
+    lastName
   };
+  const backgroundId = backgroundIdFromName(nameObj);
+  const nameStringWithLeadingSpace = `${nameObj.firstName ? ` ${nameObj.firstName}` : ""}${nameObj.lastName ? ` ${nameObj.lastName}` : ""}`;
+  const label = props.label ? props.label : `Avatar for${nameStringWithLeadingSpace}`;
+  const imageAlt = props.imageAlt ? props.imageAlt : `Avatar image of${nameStringWithLeadingSpace}`;
+  const showImage = imageUrl && !hasImageError;
 
-  var backgroundId = backgroundIdFromName(nameObj);
-  var nameStringWithLeadingSpace = "" + (nameObj.firstName ? " " + nameObj.firstName : "") + (nameObj.lastName ? " " + nameObj.lastName : "");
-  var label = props.label ? props.label : "Avatar for" + nameStringWithLeadingSpace;
-  var imageAlt = props.imageAlt ? props.imageAlt : "Avatar image of" + nameStringWithLeadingSpace;
-  var showImage = imageUrl && !hasImageError;
-  var styles = function styles(roles) {
-    return stylesheet({ size: size, backgroundId: backgroundId, stylesheet: customStylesheet }, roles);
-  };
-
+  const styles = roles => stylesheet({
+    size,
+    backgroundId,
+    stylesheet: customStylesheet
+  }, roles);
   /**
    * @param {Event} errorEvent
    */
-  var handleImageError = function handleImageError(errorEvent) {
-    var onImageError = props.onImageError;
 
 
+  const handleImageError = errorEvent => {
+    const {
+      onImageError
+    } = props;
+
     if (onImageError) {
@@ -1951,2 +1993,3 @@ onImageError(errorEvent);
     }
+
     setHasImageError(true);
@@ -1960,37 +2003,29 @@ };
 
-  return React.createElement(
-    ThemeContext.Consumer,
-    null,
-    function (_ref3) {
-      var resolvedRoles = _ref3.resolvedRoles;
-      return React.createElement(
-        "span",
-        {
-          "aria-label": label,
-          className: cx(css(styles(resolvedRoles)[StyleItems.avatarContainer]), className),
-          role: "img"
-        },
-        !showImage ? null : React.createElement(Image, {
-          resolvedRoles: resolvedRoles,
-          size: size,
-          image: imageUrl,
-          className: className,
-          onError: handleImageError,
-          alt: imageAlt,
-          stylesheet: customStylesheet
-        }),
-        React.createElement(Initials, {
-          name: nameObj,
-          size: size,
-          resolvedRoles: resolvedRoles,
-          className: className,
-          stylesheet: customStylesheet
-        })
-      );
-    }
-  );
+  return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, _ref3 => {
+    let {
+      resolvedRoles
+    } = _ref3;
+    return /*#__PURE__*/React.createElement("span", {
+      "aria-label": label,
+      className: cx(css(styles(resolvedRoles)[StyleItems.avatarContainer]), className),
+      role: "img"
+    }, !showImage ? null : /*#__PURE__*/React.createElement(Image, {
+      resolvedRoles: resolvedRoles,
+      size: size,
+      image: imageUrl,
+      className: className,
+      onError: handleImageError,
+      alt: imageAlt,
+      stylesheet: customStylesheet
+    }), /*#__PURE__*/React.createElement(Initials, {
+      name: nameObj,
+      size: size,
+      resolvedRoles: resolvedRoles,
+      className: className,
+      stylesheet: customStylesheet
+    }));
+  });
 };
 
 Avatar.displayName = "Avatar";
-
 Avatar.propTypes = {
@@ -2002,20 +2037,27 @@ /** The name for the avatar, in one string
   name: PropTypes.string,
+
   /** The first name for the avatar */
   firstName: PropTypes.string,
+
   /** The last name for the avatar */
   lastName: PropTypes.string,
+
   /** Set the size of the avatar */
   size: PropTypes.oneOf(AVAILABLE_SIZES),
+
   /** URL to a profile image */
   image: PropTypes.string,
+
   /** Called when an error occurs on the image  */
   onImageError: PropTypes.func,
+
   /** Optional label message override for Avatar  */
   label: PropTypes.string,
+
   /** Optional alt message override for Avatar Image  */
   imageAlt: PropTypes.string,
+
   /** Function to modify the component's styles */
   stylesheet: PropTypes.func
 };
-
 Avatar.defaultProps = {
@@ -2105,3 +2147,2 @@ name: "Anonymous User",
 
-export default Avatar;
-export { sizes, AVAILABLE_SIZES, stylesheet, SizeMapping, StyleItems };
+export { AVAILABLE_SIZES, SizeMapping, StyleItems, Avatar as default, sizes, stylesheet };

build/index.js

@@ -5,10 +5,48 @@ 'use strict';
 
-function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
-
 var React = require('react');
-var React__default = _interopDefault(React);
-var PropTypes = _interopDefault(require('prop-types'));
+var PropTypes = require('prop-types');
 var themeContext = require('@hig/theme-context');
 var utils = require('@hig/utils');
 
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
+function _objectWithoutProperties(source, excluded) {
+  if (source == null) return {};
+
+  var target = _objectWithoutPropertiesLoose(source, excluded);
+
+  var key, i;
+
+  if (Object.getOwnPropertySymbols) {
+    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+
+    for (i = 0; i < sourceSymbolKeys.length; i++) {
+      key = sourceSymbolKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+      target[key] = source[key];
+    }
+  }
+
+  return target;
+}
+
 /*
@@ -45,2 +83,3 @@
 
+
   for (var i = 0; i < document.styleSheets.length; i++) {
@@ -66,5 +105,3 @@ if (document.styleSheets[i].ownerNode === tag) {
 
-var StyleSheet =
-/*#__PURE__*/
-function () {
+var StyleSheet = /*#__PURE__*/function () {
   function StyleSheet(options) {
@@ -149,4 +186,2 @@ this.isSpeedy = options.speedy === undefined ? process.env.NODE_ENV === 'production' : options.speedy;
 
-var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
-
 function stylis_min(W) {
@@ -485,3 +520,3 @@ function M(d, c, e, h, a) {
         for (d = 0 === m ? '' : d[0] + ' '; b < a; ++b) {
-          c[b] = Z(d, c[b], e, m).trim();
+          c[b] = Z(d, c[b], e).trim();
         }
@@ -496,3 +531,3 @@
           for (var n = 0; n < m; ++n) {
-            c[v++] = Z(d[n] + ' ', h[b], e, m).trim();
+            c[v++] = Z(d[n] + ' ', h[b], e).trim();
           }
@@ -701,3 +736,3 @@ }
       default:
-        if ('function' === typeof d) S[A++] = d;else if ('object' === (typeof d === 'undefined' ? 'undefined' : _typeof(d))) for (var c = 0, e = d.length; c < e; ++c) {
+        if ('function' === typeof d) S[A++] = d;else if ('object' === typeof d) for (var c = 0, e = d.length; c < e; ++c) {
           T(d[c]);
@@ -783,5 +818,5 @@ } else Y = !!d | 0;
 
-// https://github.com/thysultan/stylis.js/tree/master/plugins/rule-sheet
 // inlined to avoid umd wrapper and peerDep warnings/installing stylis
 // since we use stylis after closure compiler
+
 var delimiter = '/*|*/';
@@ -799,2 +834,3 @@ var needle = delimiter + '}';
 };
+
 var ruleSheet = function ruleSheet(context, content, selectors, parents, line, column, length, ns, depth, at) {
@@ -859,2 +895,3 @@ switch (context) {
 };
+
 var removeLabel = function removeLabel(context, content) {
@@ -865,9 +902,9 @@ if (context === 1 && // charcode for l
   ) {
-      return '';
-    }
+    return '';
+  }
 };
 
-var isBrowser = typeof document !== 'undefined';
+var isBrowser$1 = typeof document !== 'undefined';
 var rootServerStylisCache = {};
-var getServerStylisCache = isBrowser ? undefined : weakMemoize(function () {
+var getServerStylisCache = isBrowser$1 ? undefined : weakMemoize(function () {
   var getCache = weakMemoize(function () {
@@ -915,3 +952,3 @@ return {};
 
-  if (isBrowser) {
+  if (isBrowser$1) {
     container = options.container || document.head;
@@ -934,3 +971,3 @@ var nodes = document.querySelectorAll("style[data-emotion-" + key + "]");
 
-  if (isBrowser) {
+  if (isBrowser$1) {
     stylis.use(options.stylisPlugins)(ruleSheet);
@@ -1162,4 +1199,2 @@
 
-var _typeof$1 = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
-
 var hyphenateRegex = /[A-Z]|^ms/g;
@@ -1242,3 +1277,3 @@ var animationRegex = /_EMO_([^_]+?)_([^]*?)_EMO_/g;
 
-  switch (typeof interpolation === 'undefined' ? 'undefined' : _typeof$1(interpolation)) {
+  switch (typeof interpolation) {
     case 'boolean':
@@ -1324,3 +1359,3 @@ {
 
-      if ((typeof value === 'undefined' ? 'undefined' : _typeof$1(value)) !== 'object') {
+      if (typeof value !== 'object') {
         if (registered != null && registered[value] !== undefined) {
@@ -1360,4 +1395,5 @@ string += _key + "{" + registered[value] + "}";
 var cursor;
+
 var serializeStyles = function serializeStyles(args, registered, mergedProps) {
-  if (args.length === 1 && _typeof$1(args[0]) === 'object' && args[0] !== null && args[0].styles !== undefined) {
+  if (args.length === 1 && typeof args[0] === 'object' && args[0] !== null && args[0].styles !== undefined) {
     return args[0];
@@ -1424,3 +1460,4 @@ }
 
-var isBrowser$1 = typeof document !== 'undefined';
+var isBrowser = typeof document !== 'undefined';
+
 function getRegisteredStyles(registered, registeredStyles, classNames) {
@@ -1437,2 +1474,3 @@ var rawClassName = '';
 }
+
 var insertStyles = function insertStyles(cache, serialized, isStringTag) {
@@ -1450,3 +1488,3 @@ var className = cache.key + "-" + serialized.name;
   // also, note that this check will be dead code eliminated in the browser
-  isBrowser$1 === false && cache.compat !== undefined) && cache.registered[className] === undefined) {
+  isBrowser === false && cache.compat !== undefined) && cache.registered[className] === undefined) {
     cache.registered[className] = serialized.styles;
@@ -1462,3 +1500,3 @@ }
 
-      if (!isBrowser$1 && maybeStyles !== undefined) {
+      if (!isBrowser && maybeStyles !== undefined) {
         stylesForSSR += maybeStyles;
@@ -1470,3 +1508,3 @@ }
 
-    if (!isBrowser$1 && stylesForSSR.length !== 0) {
+    if (!isBrowser && stylesForSSR.length !== 0) {
       return stylesForSSR;
@@ -1477,4 +1515,2 @@ }
 
-var _typeof$2 = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
-
 function insertWithoutScoping(cache, serialized) {
@@ -1582,3 +1618,3 @@ if (cache.inserted[serialized.name] === undefined) {
 
-    switch (typeof arg === 'undefined' ? 'undefined' : _typeof$2(arg)) {
+    switch (typeof arg) {
       case 'boolean':
@@ -1626,3 +1662,3 @@ break;
 
-var sizes = Object.freeze({
+const sizes = Object.freeze({
   SMALL_16: "small",
@@ -1634,12 +1670,12 @@ MEDIUM_24: "medium",
 });
+const AVAILABLE_SIZES = Object.freeze(Object.values(sizes));
 
-var AVAILABLE_SIZES = Object.freeze(Object.values(sizes));
-
-var _SizeMapping;
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-var SizeMapping = (_SizeMapping = {}, _defineProperty(_SizeMapping, sizes.SMALL_16, "extraSmall"), _defineProperty(_SizeMapping, sizes.MEDIUM_24, "small"), _defineProperty(_SizeMapping, sizes.MEDIUM_32, "medium"), _defineProperty(_SizeMapping, sizes.LARGE_48, "large"), _defineProperty(_SizeMapping, sizes.XLARGE_64, "extraLarge"), _SizeMapping);
-
-var StyleItems = {
+const SizeMapping = {
+  [sizes.SMALL_16]: "extraSmall",
+  [sizes.MEDIUM_24]: "small",
+  [sizes.MEDIUM_32]: "medium",
+  [sizes.LARGE_48]: "large",
+  [sizes.XLARGE_64]: "extraLarge"
+};
+const StyleItems = {
   avatarContainer: "avatarContainer",
@@ -1651,55 +1687,51 @@ avatarImageWrapper: "avatarImageWrapper",
 
-function _defineProperty$1(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 function stylesheet(props, themeData) {
-  var _styles;
-
-  var backgroundId = props.backgroundId,
-      size = props.size,
-      customStylesheet = props.stylesheet;
-
-  var sizeString = size ? SizeMapping[size] : SizeMapping[sizes.MEDIUM_32];
-  var diameter = themeData["avatar." + sizeString + ".diameter"];
-  var fontSize = themeData["avatar." + sizeString + ".fontSize"];
-  var fontFamily = themeData["basics.fontFamilies.main"];
-  var bgColor = themeData["avatar.backgroundColor" + (backgroundId || 1)];
-  var fgColor = themeData["avatar.fontColor"];
-
-  var styles = (_styles = {}, _defineProperty$1(_styles, StyleItems.avatarContainer, {
-    backgroundColor: bgColor,
-    color: fgColor,
-    width: diameter,
-    height: diameter,
-    lineHeight: diameter,
-    fontSize: fontSize,
-    display: "block",
-    position: "relative",
-    margin: 0,
-    overflow: "hidden",
-    borderRadius: "50%",
-    textAlign: "center"
-  }), _defineProperty$1(_styles, StyleItems.avatarImageWrapper, {
-    position: "absolute",
-    display: "flex",
-    zIndex: "2",
-    fontSize: fontSize
-  }), _defineProperty$1(_styles, StyleItems.avatarImage, {
-    borderRadius: "50%",
-    width: diameter,
-    height: diameter
-  }), _defineProperty$1(_styles, StyleItems.avatarInitials, {
-    width: diameter,
-    height: diameter,
-    fontFamily: fontFamily
-  }), _styles);
-
+  const {
+    backgroundId,
+    size,
+    stylesheet: customStylesheet
+  } = props;
+  const sizeString = size ? SizeMapping[size] : SizeMapping[sizes.MEDIUM_32];
+  const diameter = themeData[`avatar.${sizeString}.diameter`];
+  const fontSize = themeData[`avatar.${sizeString}.fontSize`];
+  const fontFamily = themeData["basics.fontFamilies.main"];
+  const bgColor = themeData[`avatar.backgroundColor${backgroundId || 1}`];
+  const fgColor = themeData["avatar.fontColor"];
+  const styles = {
+    [StyleItems.avatarContainer]: {
+      backgroundColor: bgColor,
+      color: fgColor,
+      width: diameter,
+      height: diameter,
+      lineHeight: diameter,
+      fontSize,
+      display: "block",
+      position: "relative",
+      margin: 0,
+      overflow: "hidden",
+      borderRadius: "50%",
+      textAlign: "center"
+    },
+    [StyleItems.avatarImageWrapper]: {
+      position: "absolute",
+      display: "flex",
+      zIndex: "2",
+      fontSize
+    },
+    [StyleItems.avatarImage]: {
+      borderRadius: "50%",
+      width: diameter,
+      height: diameter
+    },
+    [StyleItems.avatarInitials]: {
+      width: diameter,
+      height: diameter,
+      fontFamily
+    }
+  };
   return customStylesheet ? customStylesheet(styles, props, themeData) : styles;
 }
 
-var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
-
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
-var COLOR_VARIANT_COUNT = 15;
-
+const _excluded = ["size", "name", "firstName", "lastName", "stylesheet"];
+const COLOR_VARIANT_COUNT = 15;
 /**
@@ -1711,10 +1743,13 @@ * @param {Object} name
  */
+
 function generateUniqueNumberFromName(name) {
-  var firstName = name.firstName,
-      lastName = name.lastName;
+  const {
+    firstName,
+    lastName
+  } = name;
+  let firstNum = 0;
 
-  var firstNum = 0;
   if (firstName) {
-    var firstArray = firstName.split("");
-    firstArray.forEach(function (char) {
+    const firstArray = firstName.split("");
+    firstArray.forEach(char => {
       firstNum += char.charCodeAt(0);
@@ -1724,6 +1759,7 @@ });
 
-  var lastNum = 0;
+  let lastNum = 0;
+
   if (lastName) {
-    var lastArray = lastName.split("");
-    lastArray.forEach(function (char) {
+    const lastArray = lastName.split("");
+    lastArray.forEach(char => {
       lastNum += char.charCodeAt(0);
@@ -1735,3 +1771,2 @@ });
 }
-
 /**
@@ -1743,8 +1778,9 @@ * @param {Object} name
  */
+
+
 function backgroundIdFromName(name) {
-  var uniqueNum = generateUniqueNumberFromName(name);
-  // Return whole number between 1 and COLOR_VARIANT_COUNT
+  const uniqueNum = generateUniqueNumberFromName(name); // Return whole number between 1 and COLOR_VARIANT_COUNT
+
   return Math.round(uniqueNum) % COLOR_VARIANT_COUNT + 1;
 }
-
 /**
@@ -1756,8 +1792,8 @@ * @param {Object} name
  */
+
 function initialsFromName(name) {
-  var firstInitial = name.firstName ? name.firstName.slice(0, 1) : "";
-  var lastInitial = name.lastName ? name.lastName.slice(0, 1) : "";
-  return ("" + firstInitial + lastInitial).toUpperCase();
+  const firstInitial = name.firstName ? name.firstName.slice(0, 1) : "";
+  const lastInitial = name.lastName ? name.lastName.slice(0, 1) : "";
+  return `${firstInitial}${lastInitial}`.toUpperCase();
 }
-
 /**
@@ -1769,7 +1805,8 @@ * @param {string} name
  */
+
+
 function buildFirstAndLastName(name) {
   if (typeof name === "string") {
-    var spaceIndex = name.lastIndexOf(" ");
+    const spaceIndex = name.lastIndexOf(" "); // No spaces - there is only a single name, return it as the firstName
 
-    // No spaces - there is only a single name, return it as the firstName
     if (spaceIndex === -1) {
@@ -1779,13 +1816,12 @@ return {
       };
-    }
+    } // Grab first name
 
-    // Grab first name
-    var firstName = name.slice(0, spaceIndex);
-    // Grab last name, skipping the space
-    var lastName = name.slice(spaceIndex + 1);
 
-    // Return new name structure, split into firstName and last
+    const firstName = name.slice(0, spaceIndex); // Grab last name, skipping the space
+
+    const lastName = name.slice(spaceIndex + 1); // Return new name structure, split into firstName and last
+
     return {
-      firstName: firstName,
-      lastName: lastName
+      firstName,
+      lastName
     };
@@ -1796,3 +1832,2 @@ }
 }
-
 /**
@@ -1805,47 +1840,53 @@ * @param {Object} props
  */
-function Image(_ref) {
-  var image = _ref.image,
-      alt = _ref.alt,
-      size = _ref.size,
-      onError = _ref.onError,
-      className = _ref.className,
-      resolvedRoles = _ref.resolvedRoles,
-      customStylesheet = _ref.stylesheet;
 
-  var styles = stylesheet({ size: size, stylesheet: customStylesheet }, resolvedRoles);
 
-  var imageWrapperClassName = utils.createCustomClassNames(className, "image-wrapper");
-  var imageClassName = utils.createCustomClassNames(className, "image");
+function Image(_ref) {
+  let {
+    image,
+    alt,
+    size,
+    onError,
+    className,
+    resolvedRoles,
+    stylesheet: customStylesheet
+  } = _ref;
+  const styles = stylesheet({
+    size,
+    stylesheet: customStylesheet
+  }, resolvedRoles);
+  const imageWrapperClassName = utils.createCustomClassNames(className, "image-wrapper");
+  const imageClassName = utils.createCustomClassNames(className, "image");
+  return /*#__PURE__*/React__default["default"].createElement("span", {
+    className: cx(css(styles[StyleItems.avatarImageWrapper]), imageWrapperClassName)
+  }, /*#__PURE__*/React__default["default"].createElement("img", {
+    className: cx(css(styles[StyleItems.avatarImage]), imageClassName),
+    src: image,
+    alt: alt,
+    onError: onError
+  }));
+}
 
-  return React__default.createElement(
-    "span",
-    {
-      className: cx(css(styles[StyleItems.avatarImageWrapper]), imageWrapperClassName)
-    },
-    React__default.createElement("img", {
-      className: cx(css(styles[StyleItems.avatarImage]), imageClassName),
-      src: image,
-      alt: alt,
-      onError: onError
-    })
-  );
-}
 Image.propTypes = {
   /** URL to a profile image */
-  image: PropTypes.string,
+  image: PropTypes__default["default"].string,
+
   /** Optional alt message override for Avatar Image  */
-  alt: PropTypes.string,
+  alt: PropTypes__default["default"].string,
+
   /** Set the size of the avatar */
-  size: PropTypes.oneOf(AVAILABLE_SIZES),
+  size: PropTypes__default["default"].oneOf(AVAILABLE_SIZES),
+
   /** Called when an error occurs on the image  */
-  onError: PropTypes.func,
+  onError: PropTypes__default["default"].func,
+
   /** Optional className */
-  className: PropTypes.string,
+  className: PropTypes__default["default"].string,
+
   /** Theme context */
   // eslint-disable-next-line react/forbid-prop-types
-  resolvedRoles: PropTypes.any,
+  resolvedRoles: PropTypes__default["default"].any,
+
   /** Optional style override */
-  stylesheet: PropTypes.func
+  stylesheet: PropTypes__default["default"].func
 };
-
 /**
@@ -1859,39 +1900,43 @@ * @param {Object} props
  */
+
 function Initials(_ref2) {
-  var size = _ref2.size,
-      name = _ref2.name,
-      className = _ref2.className,
-      resolvedRoles = _ref2.resolvedRoles,
-      customStylesheet = _ref2.stylesheet;
+  let {
+    size,
+    name,
+    className,
+    resolvedRoles,
+    stylesheet: customStylesheet
+  } = _ref2;
+  const styles = stylesheet({
+    size,
+    stylesheet: customStylesheet
+  }, resolvedRoles);
+  const initials = initialsFromName(name);
+  const initialsClassName = utils.createCustomClassNames(className, "initials");
+  return /*#__PURE__*/React__default["default"].createElement("span", {
+    className: cx(css(styles[StyleItems.avatarInitials]), initialsClassName),
+    "aria-hidden": "true"
+  }, size === sizes.SMALL_16 ? initials[0] : initials);
+}
 
-  var styles = stylesheet({ size: size, stylesheet: customStylesheet }, resolvedRoles);
-  var initials = initialsFromName(name);
-  var initialsClassName = utils.createCustomClassNames(className, "initials");
-
-  return React__default.createElement(
-    "span",
-    {
-      className: cx(css(styles[StyleItems.avatarInitials]), initialsClassName),
-      "aria-hidden": "true"
-    },
-    size === sizes.SMALL_16 ? initials[0] : initials
-  );
-}
 Initials.propTypes = {
   /** Set the size of the avatar */
-  size: PropTypes.oneOf(AVAILABLE_SIZES),
+  size: PropTypes__default["default"].oneOf(AVAILABLE_SIZES),
+
   /** First and Last name object */
-  name: PropTypes.shape({
-    firstName: PropTypes.string,
-    lastName: PropTypes.string
+  name: PropTypes__default["default"].shape({
+    firstName: PropTypes__default["default"].string,
+    lastName: PropTypes__default["default"].string
   }),
+
   /** Optional className */
-  className: PropTypes.string,
+  className: PropTypes__default["default"].string,
+
   /** Theme context */
   // eslint-disable-next-line react/forbid-prop-types
-  resolvedRoles: PropTypes.any,
+  resolvedRoles: PropTypes__default["default"].any,
+
   /** Optional style override */
-  stylesheet: PropTypes.func
+  stylesheet: PropTypes__default["default"].func
 };
-
 /**
@@ -1910,44 +1955,43 @@ * @typedef {Object} AvatarProps
 
-var Avatar = function Avatar(props) {
-  var _useState = React.useState(undefined),
-      _useState2 = _slicedToArray(_useState, 2),
-      imageUrl = _useState2[0],
-      setImageUrl = _useState2[1];
+const Avatar = props => {
+  const [imageUrl, setImageUrl] = React.useState(undefined);
+  const [hasImageError, setHasImageError] = React.useState(false);
 
-  var _useState3 = React.useState(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      hasImageError = _useState4[0],
-      setHasImageError = _useState4[1];
+  const {
+    size,
+    name,
+    firstName,
+    lastName,
+    stylesheet: customStylesheet
+  } = props,
+        otherProps = _objectWithoutProperties(props, _excluded);
 
-  var size = props.size,
-      name = props.name,
-      firstName = props.firstName,
-      lastName = props.lastName,
-      customStylesheet = props.stylesheet,
-      otherProps = _objectWithoutProperties(props, ["size", "name", "firstName", "lastName", "stylesheet"]);
-
-  var className = otherProps.className;
-
-
-  var nameObj = !firstName && !lastName ? buildFirstAndLastName(name) : {
-    firstName: firstName,
-    lastName: lastName
+  const {
+    className
+  } = otherProps;
+  const nameObj = !firstName && !lastName ? buildFirstAndLastName(name) : {
+    firstName,
+    lastName
   };
+  const backgroundId = backgroundIdFromName(nameObj);
+  const nameStringWithLeadingSpace = `${nameObj.firstName ? ` ${nameObj.firstName}` : ""}${nameObj.lastName ? ` ${nameObj.lastName}` : ""}`;
+  const label = props.label ? props.label : `Avatar for${nameStringWithLeadingSpace}`;
+  const imageAlt = props.imageAlt ? props.imageAlt : `Avatar image of${nameStringWithLeadingSpace}`;
+  const showImage = imageUrl && !hasImageError;
 
-  var backgroundId = backgroundIdFromName(nameObj);
-  var nameStringWithLeadingSpace = "" + (nameObj.firstName ? " " + nameObj.firstName : "") + (nameObj.lastName ? " " + nameObj.lastName : "");
-  var label = props.label ? props.label : "Avatar for" + nameStringWithLeadingSpace;
-  var imageAlt = props.imageAlt ? props.imageAlt : "Avatar image of" + nameStringWithLeadingSpace;
-  var showImage = imageUrl && !hasImageError;
-  var styles = function styles(roles) {
-    return stylesheet({ size: size, backgroundId: backgroundId, stylesheet: customStylesheet }, roles);
-  };
-
+  const styles = roles => stylesheet({
+    size,
+    backgroundId,
+    stylesheet: customStylesheet
+  }, roles);
   /**
    * @param {Event} errorEvent
    */
-  var handleImageError = function handleImageError(errorEvent) {
-    var onImageError = props.onImageError;
 
 
+  const handleImageError = errorEvent => {
+    const {
+      onImageError
+    } = props;
+
     if (onImageError) {
@@ -1957,2 +2001,3 @@ onImageError(errorEvent);
     }
+
     setHasImageError(true);
@@ -1966,37 +2011,29 @@ };
 
-  return React__default.createElement(
-    themeContext.ThemeContext.Consumer,
-    null,
-    function (_ref3) {
-      var resolvedRoles = _ref3.resolvedRoles;
-      return React__default.createElement(
-        "span",
-        {
-          "aria-label": label,
-          className: cx(css(styles(resolvedRoles)[StyleItems.avatarContainer]), className),
-          role: "img"
-        },
-        !showImage ? null : React__default.createElement(Image, {
-          resolvedRoles: resolvedRoles,
-          size: size,
-          image: imageUrl,
-          className: className,
-          onError: handleImageError,
-          alt: imageAlt,
-          stylesheet: customStylesheet
-        }),
-        React__default.createElement(Initials, {
-          name: nameObj,
-          size: size,
-          resolvedRoles: resolvedRoles,
-          className: className,
-          stylesheet: customStylesheet
-        })
-      );
-    }
-  );
+  return /*#__PURE__*/React__default["default"].createElement(themeContext.ThemeContext.Consumer, null, _ref3 => {
+    let {
+      resolvedRoles
+    } = _ref3;
+    return /*#__PURE__*/React__default["default"].createElement("span", {
+      "aria-label": label,
+      className: cx(css(styles(resolvedRoles)[StyleItems.avatarContainer]), className),
+      role: "img"
+    }, !showImage ? null : /*#__PURE__*/React__default["default"].createElement(Image, {
+      resolvedRoles: resolvedRoles,
+      size: size,
+      image: imageUrl,
+      className: className,
+      onError: handleImageError,
+      alt: imageAlt,
+      stylesheet: customStylesheet
+    }), /*#__PURE__*/React__default["default"].createElement(Initials, {
+      name: nameObj,
+      size: size,
+      resolvedRoles: resolvedRoles,
+      className: className,
+      stylesheet: customStylesheet
+    }));
+  });
 };
 
 Avatar.displayName = "Avatar";
-
 Avatar.propTypes = {
@@ -2007,21 +2044,28 @@ /** The name for the avatar, in one string
    */
-  name: PropTypes.string,
+  name: PropTypes__default["default"].string,
+
   /** The first name for the avatar */
-  firstName: PropTypes.string,
+  firstName: PropTypes__default["default"].string,
+
   /** The last name for the avatar */
-  lastName: PropTypes.string,
+  lastName: PropTypes__default["default"].string,
+
   /** Set the size of the avatar */
-  size: PropTypes.oneOf(AVAILABLE_SIZES),
+  size: PropTypes__default["default"].oneOf(AVAILABLE_SIZES),
+
   /** URL to a profile image */
-  image: PropTypes.string,
+  image: PropTypes__default["default"].string,
+
   /** Called when an error occurs on the image  */
-  onImageError: PropTypes.func,
+  onImageError: PropTypes__default["default"].func,
+
   /** Optional label message override for Avatar  */
-  label: PropTypes.string,
+  label: PropTypes__default["default"].string,
+
   /** Optional alt message override for Avatar Image  */
-  imageAlt: PropTypes.string,
+  imageAlt: PropTypes__default["default"].string,
+
   /** Function to modify the component's styles */
-  stylesheet: PropTypes.func
+  stylesheet: PropTypes__default["default"].func
 };
-
 Avatar.defaultProps = {
@@ -2111,7 +2155,7 @@ name: "Anonymous User",
 
-exports.default = Avatar;
-exports.sizes = sizes;
 exports.AVAILABLE_SIZES = AVAILABLE_SIZES;
-exports.stylesheet = stylesheet;
 exports.SizeMapping = SizeMapping;
 exports.StyleItems = StyleItems;
+exports["default"] = Avatar;
+exports.sizes = sizes;
+exports.stylesheet = stylesheet;

CHANGELOG.md

@@ -0,1 +1,8 @@
+# [@hig/avatar-v2.2.0](https://github.com/Autodesk/hig/compare/@hig/avatar@2.1.0...@hig/avatar@2.2.0) (2022-08-28)
+
+
+### Features
+
+* use latest theme-data ([6214278](https://github.com/Autodesk/hig/commit/6214278))
+
 # [@hig/avatar-v2.1.0](https://github.com/Autodesk/hig/compare/@hig/avatar@2.0.0...@hig/avatar@2.1.0) (2022-01-24)
@@ -2,0 +9,0 @@

package.json

 {
   "name": "@hig/avatar",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "HIG Avatar",
@@ -21,8 +21,7 @@ "author": "Autodesk Inc.",
     "@hig/utils": "^0.4.1",
-    "prop-types": "^15.7.1",
-    "react-lifecycles-compat": "^3.0.4"
+    "prop-types": "^15.7.1"
   },
   "peerDependencies": {
-    "@hig/theme-context": "^4.1.0",
-    "@hig/theme-data": "^2.22.1",
+    "@hig/theme-context": "^4.2.0",
+    "@hig/theme-data": "^3.1.0",
     "react": "^17.0.0"
@@ -29,0 +28,0 @@ },

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Dependency count

5

decreased by-16.67%

Lines of code

3494

increased by1.16%

Worsened metrics

Total package byte prevSize

124276

decreased by-3.15%

Dependency changes

• - Removedreact-lifecycles-compat@^3.0.4

• - Removed@hig/theme-data@2.26.0(transitive)

• - Removedreact-lifecycles-compat@3.0.4(transitive)