npm - @commercetools-uikit/avatar - Versions diffs - 16.7.5 → 16.9.0 - Mend

@commercetools-uikit/avatar 16.7.5 → 16.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/README.md +10 -7
package/dist/commercetools-uikit-avatar.cjs.dev.js +107 -33
package/dist/commercetools-uikit-avatar.cjs.prod.js +97 -32
package/dist/commercetools-uikit-avatar.esm.js +106 -34
package/dist/declarations/src/avatar.d.ts +4 -1
package/dist/declarations/src/avatar.styles.d.ts +6 -0
package/package.json +4 -3

package/README.md CHANGED Viewed

@@ -38,6 +38,7 @@ const Example = () => (
     firstName="John"
     lastName="Doe"
     size="s"
+    color="accent"
   />
 );
@@ -46,10 +47,12 @@ export default Example;
 ## Properties
-| Props           | Type                                               | Required | Default | Description                             |
-| --------------- | -------------------------------------------------- | :------: | ------- | --------------------------------------- |
-| `firstName`     | `string`                                           |          | `''`    | The first name of the user.             |
-| `lastName`      | `string`                                           |          | `''`    | The last name of the user.              |
-| `gravatarHash`  | `string`                                           |    ✅    |         | The hashed string of the user gravatar. |
-| `isHighlighted` | `boolean`                                          |          | `false` | Enhances the appearance of the avatar.  |
-| `size`          | `union`<br/>Possible values:<br/>`'s' , 'm' , 'l'` |          | `'s'`   | The size of the rendered avatar.        |
+| Props           | Type                                                                          | Required | Default    | Description                             |
+| --------------- | ----------------------------------------------------------------------------- | :------: | ---------- | --------------------------------------- |
+| `firstName`     | `string`                                                                      |          | `''`       | The first name of the user.             |
+| `lastName`      | `string`                                                                      |          | `''`       | The last name of the user.              |
+| `gravatarHash`  | `string`                                                                      |    ✅    |            | The hashed string of the user gravatar. |
+| `isHighlighted` | `boolean`                                                                     |          | `false`    | Enhances the appearance of the avatar.  |
+| `size`          | `union`<br/>Possible values:<br/>`'s' , 'm' , 'l'`                            |          | `'s'`      | The size of the rendered avatar.        |
+| `color`         | `union`<br/>Possible values:<br/>`'accent' , 'purple' , 'turquoise', 'brown'` |          | `'accent'` | The color of the rendered avatar.       |
+| `icon`          | `ReactElement`                                                                |          |            | an `<Icon />` component                 |

package/dist/commercetools-uikit-avatar.cjs.dev.js CHANGED Viewed

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
+var _pt = require('prop-types');
 var _sliceInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/slice');
 var _trimInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/trim');
 var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
@@ -15,13 +16,16 @@ var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/in
 var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors');
 var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
 var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
+var react$1 = require('react');
 var react = require('@emotion/react');
-var designSystem = require('@commercetools-uikit/design-system');
 var utils = require('@commercetools-uikit/utils');
+var designSystem = require('@commercetools-uikit/design-system');
+var startCase = require('lodash/startCase');
 var jsxRuntime = require('@emotion/react/jsx-runtime');
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+var _pt__default = /*#__PURE__*/_interopDefault(_pt);
 var _sliceInstanceProperty__default = /*#__PURE__*/_interopDefault(_sliceInstanceProperty);
 var _trimInstanceProperty__default = /*#__PURE__*/_interopDefault(_trimInstanceProperty);
 var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
@@ -34,28 +38,73 @@ var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachIns
 var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
 var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
 var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
+var startCase__default = /*#__PURE__*/_interopDefault(startCase);
-function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context4, _context5; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context4 = ownKeys(Object(source), !0)).call(_context4, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context5 = ownKeys(Object(source))).call(_context5, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
-const avatarSizes = {
+const fontSizeMap = {
   s: {
-    width: '26px',
-    fontSize: designSystem.designTokens.fontSizeForAvatarAsSmall
+    narrow: designSystem.designTokens.fontSize30,
+    wide: designSystem.designTokens.fontSize10
   },
   m: {
-    width: designSystem.designTokens.widthForAvatarAsMedium,
-    fontSize: designSystem.designTokens.fontSizeForAvatarAsMedium
+    narrow: designSystem.designTokens.fontSize50,
+    wide: designSystem.designTokens.fontSize30
   },
   l: {
-    width: '100px',
-    fontSize: designSystem.designTokens.fontSizeForAvatarAsBig
+    narrow: designSystem.designTokens.fontSize90,
+    wide: designSystem.designTokens.fontSize80
+  }
+};
+const widthSizeMap = {
+  s: '32px',
+  m: '40px',
+  l: '100px'
+};
+const colorsMap = {
+  accent: {
+    normal: designSystem.designTokens.colorAccent90,
+    highlighted: designSystem.designTokens.colorAccent95
+  },
+  purple: {
+    normal: designSystem.designTokens.colorPurple90,
+    highlighted: designSystem.designTokens.colorPurple95
+  },
+  turquoise: {
+    normal: designSystem.designTokens.colorTurquoise90,
+    highlighted: designSystem.designTokens.colorTurquoise95
+  },
+  brown: {
+    normal: designSystem.designTokens.colorBrown90,
+    highlighted: designSystem.designTokens.colorBrown95
   }
 };
+const getFontSize = (avatarInitials, avatarSize) => {
+  const widthCode = avatarInitials.length > 1 ? 'wide' : 'narrow';
+  return fontSizeMap[avatarSize][widthCode];
+};
+const getWidthSize = avatarSize => widthSizeMap[avatarSize];
+const getBackgroundColor = function () {
+  let avatarColor = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'accent';
+  let isHighlighted = arguments.length > 1 ? arguments[1] : undefined;
+  return colorsMap[avatarColor][isHighlighted ? 'highlighted' : 'normal'];
+};
+const getForegroundColor = avatarColor => {
+  return avatarColor === 'accent' ? designSystem.designTokens.colorAccent40 : designSystem.designTokens["color".concat(startCase__default["default"](avatarColor), "50")];
+};
+const getAvatarStyles = avatarProps => {
+  const avatarSize = getWidthSize(avatarProps.size);
+  const backgroundColor = getBackgroundColor(avatarProps.color, avatarProps.isHighlighted);
+  const foregroundColor = getForegroundColor(avatarProps.color);
+  return /*#__PURE__*/react.css("align-items:center;background-color:", backgroundColor, ";border-radius:100%;font-size:", designSystem.designTokens.fontSizeDefault, ";font-weight:", designSystem.designTokens.fontWeight600, ";color:", foregroundColor, ";display:flex;justify-content:center;overflow:hidden;position:relative;fill:", foregroundColor, ";height:", avatarSize, ";width:", avatarSize, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:getAvatarStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImF2YXRhci5zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBNEVZIiwiZmlsZSI6ImF2YXRhci5zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBkZXNpZ25Ub2tlbnMgfSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9kZXNpZ24tc3lzdGVtJztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCBzdGFydENhc2UgZnJvbSAnbG9kYXNoL3N0YXJ0Q2FzZSc7XG5pbXBvcnQgeyBUQXZhdGFyUHJvcHMgfSBmcm9tICcuL2F2YXRhcic7XG5cbmNvbnN0IGZvbnRTaXplTWFwID0ge1xuICBzOiB7XG4gICAgbmFycm93OiBkZXNpZ25Ub2tlbnMuZm9udFNpemUzMCxcbiAgICB3aWRlOiBkZXNpZ25Ub2tlbnMuZm9udFNpemUxMCxcbiAgfSxcbiAgbToge1xuICAgIG5hcnJvdzogZGVzaWduVG9rZW5zLmZvbnRTaXplNTAsXG4gICAgd2lkZTogZGVzaWduVG9rZW5zLmZvbnRTaXplMzAsXG4gIH0sXG4gIGw6IHtcbiAgICBuYXJyb3c6IGRlc2lnblRva2Vucy5mb250U2l6ZTkwLFxuICAgIHdpZGU6IGRlc2lnblRva2Vucy5mb250U2l6ZTgwLFxuICB9LFxufTtcblxuY29uc3Qgd2lkdGhTaXplTWFwID0ge1xuICBzOiAnMzJweCcsXG4gIG06ICc0MHB4JyxcbiAgbDogJzEwMHB4Jyxcbn07XG5cbmNvbnN0IGNvbG9yc01hcCA9IHtcbiAgYWNjZW50OiB7XG4gICAgbm9ybWFsOiBkZXNpZ25Ub2tlbnMuY29sb3JBY2NlbnQ5MCxcbiAgICBoaWdobGlnaHRlZDogZGVzaWduVG9rZW5zLmNvbG9yQWNjZW50OTUsXG4gIH0sXG4gIHB1cnBsZToge1xuICAgIG5vcm1hbDogZGVzaWduVG9rZW5zLmNvbG9yUHVycGxlOTAsXG4gICAgaGlnaGxpZ2h0ZWQ6IGRlc2lnblRva2Vucy5jb2xvclB1cnBsZTk1LFxuICB9LFxuICB0dXJxdW9pc2U6IHtcbiAgICBub3JtYWw6IGRlc2lnblRva2Vucy5jb2xvclR1cnF1b2lzZTkwLFxuICAgIGhpZ2hsaWdodGVkOiBkZXNpZ25Ub2tlbnMuY29sb3JUdXJxdW9pc2U5NSxcbiAgfSxcbiAgYnJvd246IHtcbiAgICBub3JtYWw6IGRlc2lnblRva2Vucy5jb2xvckJyb3duOTAsXG4gICAgaGlnaGxpZ2h0ZWQ6IGRlc2lnblRva2Vucy5jb2xvckJyb3duOTUsXG4gIH0sXG59O1xuXG5leHBvcnQgY29uc3QgZ2V0Rm9udFNpemUgPSAoXG4gIGF2YXRhckluaXRpYWxzOiBzdHJpbmcsXG4gIGF2YXRhclNpemU6IFRBdmF0YXJQcm9wc1snc2l6ZSddXG4pID0+IHtcbiAgY29uc3Qgd2lkdGhDb2RlID0gYXZhdGFySW5pdGlhbHMubGVuZ3RoID4gMSA/ICd3aWRlJyA6ICduYXJyb3cnO1xuICByZXR1cm4gZm9udFNpemVNYXBbYXZhdGFyU2l6ZV1bd2lkdGhDb2RlXTtcbn07XG5cbmV4cG9ydCBjb25zdCBnZXRXaWR0aFNpemUgPSAoYXZhdGFyU2l6ZTogVEF2YXRhclByb3BzWydzaXplJ10pID0+XG4gIHdpZHRoU2l6ZU1hcFthdmF0YXJTaXplXTtcblxuZXhwb3J0IGNvbnN0IGdldEJhY2tncm91bmRDb2xvciA9IChcbiAgYXZhdGFyQ29sb3I6IFRBdmF0YXJQcm9wc1snY29sb3InXSA9ICdhY2NlbnQnLFxuICBpc0hpZ2hsaWdodGVkOiBUQXZhdGFyUHJvcHNbJ2lzSGlnaGxpZ2h0ZWQnXVxuKSA9PiBjb2xvcnNNYXBbYXZhdGFyQ29sb3JdW2lzSGlnaGxpZ2h0ZWQgPyAnaGlnaGxpZ2h0ZWQnIDogJ25vcm1hbCddO1xuXG5leHBvcnQgY29uc3QgZ2V0Rm9yZWdyb3VuZENvbG9yID0gKGF2YXRhckNvbG9yOiBUQXZhdGFyUHJvcHNbJ2NvbG9yJ10pID0+IHtcbiAgcmV0dXJuIGF2YXRhckNvbG9yID09PSAnYWNjZW50J1xuICAgID8gZGVzaWduVG9rZW5zLmNvbG9yQWNjZW50NDBcbiAgICA6IGRlc2lnblRva2Vuc1tcbiAgICAgICAgYGNvbG9yJHtzdGFydENhc2UoYXZhdGFyQ29sb3IpfTUwYCBhcyBrZXlvZiB0eXBlb2YgZGVzaWduVG9rZW5zXG4gICAgICBdO1xufTtcblxuZXhwb3J0IGNvbnN0IGdldEF2YXRhclN0eWxlcyA9IChhdmF0YXJQcm9wczogVEF2YXRhclByb3BzKSA9PiB7XG4gIGNvbnN0IGF2YXRhclNpemUgPSBnZXRXaWR0aFNpemUoYXZhdGFyUHJvcHMuc2l6ZSk7XG4gIGNvbnN0IGJhY2tncm91bmRDb2xvciA9IGdldEJhY2tncm91bmRDb2xvcihcbiAgICBhdmF0YXJQcm9wcy5jb2xvcixcbiAgICBhdmF0YXJQcm9wcy5pc0hpZ2hsaWdodGVkXG4gICk7XG4gIGNvbnN0IGZvcmVncm91bmRDb2xvciA9IGdldEZvcmVncm91bmRDb2xvcihhdmF0YXJQcm9wcy5jb2xvcik7XG4gIHJldHVybiBjc3NgXG4gICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke2JhY2tncm91bmRDb2xvcn07XG4gICAgYm9yZGVyLXJhZGl1czogMTAwJTtcbiAgICBmb250LXNpemU6ICR7ZGVzaWduVG9rZW5zLmZvbnRTaXplRGVmYXVsdH07XG4gICAgZm9udC13ZWlnaHQ6ICR7ZGVzaWduVG9rZW5zLmZvbnRXZWlnaHQ2MDB9O1xuICAgIGNvbG9yOiAke2ZvcmVncm91bmRDb2xvcn07XG4gICAgZGlzcGxheTogZmxleDtcbiAgICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgICBvdmVyZmxvdzogaGlkZGVuO1xuICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICBmaWxsOiAke2ZvcmVncm91bmRDb2xvcn07XG5cbiAgICBoZWlnaHQ6ICR7YXZhdGFyU2l6ZX07XG4gICAgd2lkdGg6ICR7YXZhdGFyU2l6ZX07XG4gIGA7XG59O1xuIl19 */");
+};
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context4, _context5; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context4 = ownKeys(Object(source), !0)).call(_context4, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context5 = ownKeys(Object(source))).call(_context5, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
 const defaultProps = {
   firstName: '',
   lastName: '',
   isHighlighted: false,
-  size: 's'
+  size: 's',
+  color: 'accent'
 };
 const getFirstChar = str => {
   var _context;
@@ -69,7 +118,6 @@ const getInitialsFromName = _ref => {
     lastName = _ref$lastName === void 0 ? '' : _ref$lastName;
   return _concatInstanceProperty__default["default"](_context2 = "".concat(getFirstChar(firstName))).call(_context2, getFirstChar(lastName));
 };
 /**
  * `s` - defines the size. We want a bigger one if the user is on a retina-display
  * `d` - defines the default if the user is not known to Gravatar. It returns a blank image,
@@ -80,12 +128,13 @@ const getInitialsFromName = _ref => {
 const createGravatarImgUrl = function (md5Hash, size) {
   var _context3;
   let multiplyBy = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
-  const sizeAsInt = _parseInt__default["default"](avatarSizes[size].width.replace(/px$/, ''), 10);
+  const imageSize = getWidthSize(size);
+  const sizeAsInt = _parseInt__default["default"](imageSize.replace(/px$/, ''), 10);
   const gravatarSize = sizeAsInt * multiplyBy;
   return _concatInstanceProperty__default["default"](_context3 = "https://www.gravatar.com/avatar/".concat(md5Hash, "?s=")).call(_context3, gravatarSize, "&d=blank");
 };
 const GravatarImg = props => jsxRuntime.jsx("img", {
-  css: /*#__PURE__*/react.css("background-position:center center;background-size:contain;position:relative;z-index:10;", props.isHighlighted ? 'opacity: 0.7;' : '', ";" + (process.env.NODE_ENV === "production" ? "" : ";label:GravatarImg;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImF2YXRhci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBMEZZIiwiZmlsZSI6ImF2YXRhci50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgeyBkZXNpZ25Ub2tlbnMgfSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9kZXNpZ24tc3lzdGVtJztcbmltcG9ydCB7IGZpbHRlckRhdGFBdHRyaWJ1dGVzIH0gZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvdXRpbHMnO1xuXG5leHBvcnQgdHlwZSBUQXZhdGFyUHJvcHMgPSB7XG4gIC8qKlxuICAgKiBUaGUgZmlyc3QgbmFtZSBvZiB0aGUgdXNlci5cbiAgICovXG4gIGZpcnN0TmFtZT86IHN0cmluZztcbiAgLyoqXG4gICAqIFRoZSBsYXN0IG5hbWUgb2YgdGhlIHVzZXIuXG4gICAqL1xuICBsYXN0TmFtZT86IHN0cmluZztcbiAgLyoqXG4gICAqIFRoZSBoYXNoZWQgc3RyaW5nIG9mIHRoZSB1c2VyIGdyYXZhdGFyLlxuICAgKi9cbiAgZ3JhdmF0YXJIYXNoOiBzdHJpbmc7XG4gIC8qKlxuICAgKiBFbmhhbmNlcyB0aGUgYXBwZWFyYW5jZSBvZiB0aGUgYXZhdGFyLlxuICAgKi9cbiAgaXNIaWdobGlnaHRlZD86IGJvb2xlYW47XG4gIC8qKlxuICAgKiBUaGUgc2l6ZSBvZiB0aGUgcmVuZGVyZWQgYXZhdGFyLlxuICAgKi9cbiAgc2l6ZTogJ3MnIHwgJ20nIHwgJ2wnO1xufTtcblxuZXhwb3J0IHR5cGUgVEdyYXZhdGFySW1nUHJvcHMgPSBQaWNrPFxuICBUQXZhdGFyUHJvcHMsXG4gICdncmF2YXRhckhhc2gnIHwgJ2lzSGlnaGxpZ2h0ZWQnIHwgJ3NpemUnXG4+O1xuXG5leHBvcnQgdHlwZSBUSW5pdGlhbHNQcm9wcyA9IFBpY2s8XG4gIFRBdmF0YXJQcm9wcyxcbiAgJ2ZpcnN0TmFtZScgfCAnbGFzdE5hbWUnIHwgJ3NpemUnXG4+O1xuXG5jb25zdCBhdmF0YXJTaXplcyA9IHtcbiAgczoge1xuICAgIHdpZHRoOiAnMjZweCcsXG4gICAgZm9udFNpemU6IGRlc2lnblRva2Vucy5mb250U2l6ZUZvckF2YXRhckFzU21hbGwsXG4gIH0sXG4gIG06IHtcbiAgICB3aWR0aDogZGVzaWduVG9rZW5zLndpZHRoRm9yQXZhdGFyQXNNZWRpdW0sXG4gICAgZm9udFNpemU6IGRlc2lnblRva2Vucy5mb250U2l6ZUZvckF2YXRhckFzTWVkaXVtLFxuICB9LFxuICBsOiB7XG4gICAgd2lkdGg6ICcxMDBweCcsXG4gICAgZm9udFNpemU6IGRlc2lnblRva2Vucy5mb250U2l6ZUZvckF2YXRhckFzQmlnLFxuICB9LFxufTtcblxuY29uc3QgZGVmYXVsdFByb3BzOiBQaWNrPFxuICBUQXZhdGFyUHJvcHMsXG4gICdmaXJzdE5hbWUnIHwgJ2xhc3ROYW1lJyB8ICdpc0hpZ2hsaWdodGVkJyB8ICdzaXplJ1xuPiA9IHtcbiAgZmlyc3ROYW1lOiAnJyxcbiAgbGFzdE5hbWU6ICcnLFxuICBpc0hpZ2hsaWdodGVkOiBmYWxzZSxcbiAgc2l6ZTogJ3MnLFxufTtcblxuY29uc3QgZ2V0Rmlyc3RDaGFyID0gKHN0cjogc3RyaW5nKSA9PlxuICB0eXBlb2Ygc3RyID09PSAnc3RyaW5nJyA/IHN0ci50cmltKCkuc2xpY2UoMCwgMSkudG9VcHBlckNhc2UoKSA6ICcnO1xuXG5jb25zdCBnZXRJbml0aWFsc0Zyb21OYW1lID0gKHtcbiAgZmlyc3ROYW1lID0gJycsXG4gIGxhc3ROYW1lID0gJycsXG59OiBQaWNrPFRBdmF0YXJQcm9wcywgJ2ZpcnN0TmFtZScgfCAnbGFzdE5hbWUnPikgPT5cbiAgYCR7Z2V0Rmlyc3RDaGFyKGZpcnN0TmFtZSl9JHtnZXRGaXJzdENoYXIobGFzdE5hbWUpfWA7XG5cbi8qKlxuICogYHNgIC0gZGVmaW5lcyB0aGUgc2l6ZS4gV2Ugd2FudCBhIGJpZ2dlciBvbmUgaWYgdGhlIHVzZXIgaXMgb24gYSByZXRpbmEtZGlzcGxheVxuICogYGRgIC0gZGVmaW5lcyB0aGUgZGVmYXVsdCBpZiB0aGUgdXNlciBpcyBub3Qga25vd24gdG8gR3JhdmF0YXIuIEl0IHJldHVybnMgYSBibGFuayBpbWFnZSxcbiAqICAgICAgICB3aGljaCBsZXQgdGhlIGluaXRpYWxzIHVuZGVybmVhdGggc2hpbmUgdGhyb3VnaFxuICpcbiAqIEBzZWU6IGh0dHBzOi8vZGUuZ3JhdmF0YXIuY29tL3NpdGUvaW1wbGVtZW50L2ltYWdlcy9cbiAqL1xuY29uc3QgY3JlYXRlR3JhdmF0YXJJbWdVcmwgPSAoXG4gIG1kNUhhc2g6IFRBdmF0YXJQcm9wc1snZ3JhdmF0YXJIYXNoJ10sXG4gIHNpemU6IFRBdmF0YXJQcm9wc1snc2l6ZSddLFxuICBtdWx0aXBseUJ5OiBudW1iZXIgPSAxXG4pID0+IHtcbiAgY29uc3Qgc2l6ZUFzSW50ID0gcGFyc2VJbnQoYXZhdGFyU2l6ZXNbc2l6ZV0ud2lkdGgucmVwbGFjZSgvcHgkLywgJycpLCAxMCk7XG4gIGNvbnN0IGdyYXZhdGFyU2l6ZSA9IHNpemVBc0ludCAqIG11bHRpcGx5Qnk7XG4gIHJldHVybiBgaHR0cHM6Ly93d3cuZ3JhdmF0YXIuY29tL2F2YXRhci8ke21kNUhhc2h9P3M9JHtncmF2YXRhclNpemV9JmQ9YmxhbmtgO1xufTtcblxuY29uc3QgR3JhdmF0YXJJbWcgPSAocHJvcHM6IFRHcmF2YXRhckltZ1Byb3BzKSA9PiAoXG4gIDxpbWdcbiAgICBjc3M9e2Nzc2BcbiAgICAgIGJhY2tncm91bmQtcG9zaXRpb246IGNlbnRlciBjZW50ZXI7XG4gICAgICBiYWNrZ3JvdW5kLXNpemU6IGNvbnRhaW47XG4gICAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gICAgICB6LWluZGV4OiAxMDtcblxuICAgICAgJHtwcm9wcy5pc0hpZ2hsaWdodGVkID8gJ29wYWNpdHk6IDAuNzsnIDogJyd9XG4gICAgYH1cbiAgICBzcmM9e2NyZWF0ZUdyYXZhdGFySW1nVXJsKHByb3BzLmdyYXZhdGFySGFzaCwgcHJvcHMuc2l6ZSl9XG4gICAgc3JjU2V0PXtbXG4gICAgICBgJHtjcmVhdGVHcmF2YXRhckltZ1VybChwcm9wcy5ncmF2YXRhckhhc2gsIHByb3BzLnNpemUpfSAxeGAsXG4gICAgICBgJHtjcmVhdGVHcmF2YXRhckltZ1VybChwcm9wcy5ncmF2YXRhckhhc2gsIHByb3BzLnNpemUsIDIpfSAyeGAsXG4gICAgXS5qb2luKCcsJyl9XG4gICAgLyoqXG4gICAgICogQmFzZWQgb24gaHR0cHM6Ly93d3cudzMub3JnL1dBSS90dXRvcmlhbHMvaW1hZ2VzL2RlY2lzaW9uLXRyZWUvOlxuICAgICAqIGltYWdlIGNvbnRyaWJ1dGVzIG1lYW5pbmcgdG8gdGhlIGN1cnJlbnQgcGFnZSBvciBjb250ZXh0IGFuZCBpdCBzaG93cyBjb250ZW50IHRoYXQgaXMgcmVkdW5kYW50IHRvIHJlYWwgdGV4dCBuZWFyYnlcbiAgICAgKi9cbiAgICBhbHQ9XCJcIlxuICAvPlxuKTtcbkdyYXZhdGFySW1nLmRpc3BsYXlOYW1lID0gJ0dyYXZhdGFySW1nJztcblxuY29uc3QgSW5pdGlhbHMgPSAocHJvcHM6IFRJbml0aWFsc1Byb3BzKSA9PiAoXG4gIDxkaXZcbiAgICBjc3M9e2Nzc2BcbiAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICAgIGZvbnQtc2l6ZTogJHthdmF0YXJTaXplc1twcm9wcy5zaXplXS5mb250U2l6ZX07XG4gICAgYH1cbiAgPlxuICAgIHtnZXRJbml0aWFsc0Zyb21OYW1lKHtcbiAgICAgIGZpcnN0TmFtZTogcHJvcHMuZmlyc3ROYW1lLFxuICAgICAgbGFzdE5hbWU6IHByb3BzLmxhc3ROYW1lLFxuICAgIH0pfVxuICA8L2Rpdj5cbik7XG5Jbml0aWFscy5kaXNwbGF5TmFtZSA9ICdJbml0aWFscyc7XG5cbmNvbnN0IEF2YXRhciA9IChwcm9wczogVEF2YXRhclByb3BzKSA9PiAoXG4gIDxkaXZcbiAgICBjc3M9e2Nzc2BcbiAgICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke2Rlc2lnblRva2Vucy5iYWNrZ3JvdW5kQ29sb3JGb3JBdmF0YXJ9O1xuICAgICAgYm9yZGVyLXJhZGl1czogMTAwJTtcbiAgICAgIGZvbnQtc2l6ZTogJHtkZXNpZ25Ub2tlbnMuZm9udFNpemVEZWZhdWx0fTtcbiAgICAgIGNvbG9yOiAke2Rlc2lnblRva2Vucy5jb2xvclN1cmZhY2V9O1xuICAgICAgZGlzcGxheTogZmxleDtcbiAgICAgIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICAgICAgb3ZlcmZsb3c6IGhpZGRlbjtcbiAgICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcblxuICAgICAgaGVpZ2h0OiAke2F2YXRhclNpemVzW3Byb3BzLnNpemVdLndpZHRofTtcbiAgICAgIHdpZHRoOiAke2F2YXRhclNpemVzW3Byb3BzLnNpemVdLndpZHRofTtcblxuICAgICAgJHtwcm9wcy5pc0hpZ2hsaWdodGVkXG4gICAgICAgID8gYGJhY2tncm91bmQtY29sb3I6ICR7ZGVzaWduVG9rZW5zLmJhY2tncm91bmRDb2xvckZvckF2YXRhcldoZW5IaWdobGlnaHRlZH07YFxuICAgICAgICA6ICcnfVxuICAgIGB9XG4gICAgey4uLmZpbHRlckRhdGFBdHRyaWJ1dGVzKHByb3BzKX1cbiAgPlxuICAgIDxHcmF2YXRhckltZ1xuICAgICAgZ3JhdmF0YXJIYXNoPXtwcm9wcy5ncmF2YXRhckhhc2h9XG4gICAgICBzaXplPXtwcm9wcy5zaXplfVxuICAgICAgaXNIaWdobGlnaHRlZD17cHJvcHMuaXNIaWdobGlnaHRlZH1cbiAgICAvPlxuICAgIDxJbml0aWFsc1xuICAgICAgc2l6ZT17cHJvcHMuc2l6ZX1cbiAgICAgIGZpcnN0TmFtZT17cHJvcHMuZmlyc3ROYW1lfVxuICAgICAgbGFzdE5hbWU9e3Byb3BzLmxhc3ROYW1lfVxuICAgIC8+XG4gIDwvZGl2PlxuKTtcblxuQXZhdGFyLmRpc3BsYXlOYW1lID0gJ0F2YXRhcic7XG5BdmF0YXIuZGVmYXVsdFByb3BzID0gZGVmYXVsdFByb3BzO1xuXG5leHBvcnQgZGVmYXVsdCBBdmF0YXI7XG4iXX0= */"),
+  css: /*#__PURE__*/react.css("background-position:center center;background-size:contain;position:relative;z-index:10;", props.isHighlighted ? 'opacity: 0.7;' : '', ";" + (process.env.NODE_ENV === "production" ? "" : ";label:GravatarImg;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImF2YXRhci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBeUZZIiwiZmlsZSI6ImF2YXRhci50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBSZWFjdEVsZW1lbnQsIGNsb25lRWxlbWVudCB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IGZpbHRlckRhdGFBdHRyaWJ1dGVzIH0gZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvdXRpbHMnO1xuaW1wb3J0IHtcbiAgZ2V0QXZhdGFyU3R5bGVzLFxuICBnZXRGb250U2l6ZSxcbiAgZ2V0Rm9yZWdyb3VuZENvbG9yLFxuICBnZXRXaWR0aFNpemUsXG59IGZyb20gJy4vYXZhdGFyLnN0eWxlcyc7XG5cbmV4cG9ydCB0eXBlIFRBdmF0YXJQcm9wcyA9IHtcbiAgLyoqXG4gICAqIFRoZSBmaXJzdCBuYW1lIG9mIHRoZSB1c2VyLlxuICAgKi9cbiAgZmlyc3ROYW1lPzogc3RyaW5nO1xuICAvKipcbiAgICogVGhlIGxhc3QgbmFtZSBvZiB0aGUgdXNlci5cbiAgICovXG4gIGxhc3ROYW1lPzogc3RyaW5nO1xuICAvKipcbiAgICogVGhlIGhhc2hlZCBzdHJpbmcgb2YgdGhlIHVzZXIgZ3JhdmF0YXIuXG4gICAqL1xuICBncmF2YXRhckhhc2g6IHN0cmluZztcbiAgLyoqXG4gICAqIEVuaGFuY2VzIHRoZSBhcHBlYXJhbmNlIG9mIHRoZSBhdmF0YXIuXG4gICAqL1xuICBpc0hpZ2hsaWdodGVkPzogYm9vbGVhbjtcbiAgLyoqXG4gICAqIFRoZSBzaXplIG9mIHRoZSByZW5kZXJlZCBhdmF0YXIuXG4gICAqL1xuICBzaXplOiAncycgfCAnbScgfCAnbCc7XG4gIC8qKlxuICAgKiBUaGUgY29sb3Igb2YgdGhlIGF2YXRhci5cbiAgICovXG4gIGNvbG9yPzogJ2FjY2VudCcgfCAncHVycGxlJyB8ICd0dXJxdW9pc2UnIHwgJ2Jyb3duJztcbiAgLyoqIGFuIDxJY29uIC8+IGNvbXBvbmVudFxuICAgKi9cbiAgaWNvbj86IFJlYWN0RWxlbWVudDtcbn07XG5cbmV4cG9ydCB0eXBlIFRHcmF2YXRhckltZ1Byb3BzID0gUGljazxcbiAgVEF2YXRhclByb3BzLFxuICAnZ3JhdmF0YXJIYXNoJyB8ICdpc0hpZ2hsaWdodGVkJyB8ICdzaXplJ1xuPjtcblxuZXhwb3J0IHR5cGUgVEluaXRpYWxzUHJvcHMgPSBQaWNrPFxuICBUQXZhdGFyUHJvcHMsXG4gICdmaXJzdE5hbWUnIHwgJ2xhc3ROYW1lJyB8ICdzaXplJ1xuPjtcblxuY29uc3QgZGVmYXVsdFByb3BzOiBQaWNrPFxuICBUQXZhdGFyUHJvcHMsXG4gICdmaXJzdE5hbWUnIHwgJ2xhc3ROYW1lJyB8ICdpc0hpZ2hsaWdodGVkJyB8ICdzaXplJyB8ICdjb2xvcidcbj4gPSB7XG4gIGZpcnN0TmFtZTogJycsXG4gIGxhc3ROYW1lOiAnJyxcbiAgaXNIaWdobGlnaHRlZDogZmFsc2UsXG4gIHNpemU6ICdzJyxcbiAgY29sb3I6ICdhY2NlbnQnLFxufTtcblxuY29uc3QgZ2V0Rmlyc3RDaGFyID0gKHN0cjogc3RyaW5nKSA9PlxuICB0eXBlb2Ygc3RyID09PSAnc3RyaW5nJyA/IHN0ci50cmltKCkuc2xpY2UoMCwgMSkudG9VcHBlckNhc2UoKSA6ICcnO1xuXG5jb25zdCBnZXRJbml0aWFsc0Zyb21OYW1lID0gKHtcbiAgZmlyc3ROYW1lID0gJycsXG4gIGxhc3ROYW1lID0gJycsXG59OiBQaWNrPFRBdmF0YXJQcm9wcywgJ2ZpcnN0TmFtZScgfCAnbGFzdE5hbWUnPikgPT5cbiAgYCR7Z2V0Rmlyc3RDaGFyKGZpcnN0TmFtZSl9JHtnZXRGaXJzdENoYXIobGFzdE5hbWUpfWA7XG4vKipcbiAqIGBzYCAtIGRlZmluZXMgdGhlIHNpemUuIFdlIHdhbnQgYSBiaWdnZXIgb25lIGlmIHRoZSB1c2VyIGlzIG9uIGEgcmV0aW5hLWRpc3BsYXlcbiAqIGBkYCAtIGRlZmluZXMgdGhlIGRlZmF1bHQgaWYgdGhlIHVzZXIgaXMgbm90IGtub3duIHRvIEdyYXZhdGFyLiBJdCByZXR1cm5zIGEgYmxhbmsgaW1hZ2UsXG4gKiAgICAgICAgd2hpY2ggbGV0IHRoZSBpbml0aWFscyB1bmRlcm5lYXRoIHNoaW5lIHRocm91Z2hcbiAqXG4gKiBAc2VlOiBodHRwczovL2RlLmdyYXZhdGFyLmNvbS9zaXRlL2ltcGxlbWVudC9pbWFnZXMvXG4gKi9cbmNvbnN0IGNyZWF0ZUdyYXZhdGFySW1nVXJsID0gKFxuICBtZDVIYXNoOiBUQXZhdGFyUHJvcHNbJ2dyYXZhdGFySGFzaCddLFxuICBzaXplOiBUQXZhdGFyUHJvcHNbJ3NpemUnXSxcbiAgbXVsdGlwbHlCeTogbnVtYmVyID0gMVxuKSA9PiB7XG4gIGNvbnN0IGltYWdlU2l6ZSA9IGdldFdpZHRoU2l6ZShzaXplKTtcbiAgY29uc3Qgc2l6ZUFzSW50ID0gcGFyc2VJbnQoaW1hZ2VTaXplLnJlcGxhY2UoL3B4JC8sICcnKSwgMTApO1xuICBjb25zdCBncmF2YXRhclNpemUgPSBzaXplQXNJbnQgKiBtdWx0aXBseUJ5O1xuICByZXR1cm4gYGh0dHBzOi8vd3d3LmdyYXZhdGFyLmNvbS9hdmF0YXIvJHttZDVIYXNofT9zPSR7Z3JhdmF0YXJTaXplfSZkPWJsYW5rYDtcbn07XG5cbmNvbnN0IEdyYXZhdGFySW1nID0gKHByb3BzOiBUR3JhdmF0YXJJbWdQcm9wcykgPT4gKFxuICA8aW1nXG4gICAgY3NzPXtjc3NgXG4gICAgICBiYWNrZ3JvdW5kLXBvc2l0aW9uOiBjZW50ZXIgY2VudGVyO1xuICAgICAgYmFja2dyb3VuZC1zaXplOiBjb250YWluO1xuICAgICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgICAgei1pbmRleDogMTA7XG5cbiAgICAgICR7cHJvcHMuaXNIaWdobGlnaHRlZCA/ICdvcGFjaXR5OiAwLjc7JyA6ICcnfVxuICAgIGB9XG4gICAgc3JjPXtjcmVhdGVHcmF2YXRhckltZ1VybChwcm9wcy5ncmF2YXRhckhhc2gsIHByb3BzLnNpemUpfVxuICAgIHNyY1NldD17W1xuICAgICAgYCR7Y3JlYXRlR3JhdmF0YXJJbWdVcmwocHJvcHMuZ3JhdmF0YXJIYXNoLCBwcm9wcy5zaXplKX0gMXhgLFxuICAgICAgYCR7Y3JlYXRlR3JhdmF0YXJJbWdVcmwocHJvcHMuZ3JhdmF0YXJIYXNoLCBwcm9wcy5zaXplLCAyKX0gMnhgLFxuICAgIF0uam9pbignLCcpfVxuICAgIC8qKlxuICAgICAqIEJhc2VkIG9uIGh0dHBzOi8vd3d3LnczLm9yZy9XQUkvdHV0b3JpYWxzL2ltYWdlcy9kZWNpc2lvbi10cmVlLzpcbiAgICAgKiBpbWFnZSBjb250cmlidXRlcyBtZWFuaW5nIHRvIHRoZSBjdXJyZW50IHBhZ2Ugb3IgY29udGV4dCBhbmQgaXQgc2hvd3MgY29udGVudCB0aGF0IGlzIHJlZHVuZGFudCB0byByZWFsIHRleHQgbmVhcmJ5XG4gICAgICovXG4gICAgYWx0PVwiXCJcbiAgLz5cbik7XG5HcmF2YXRhckltZy5kaXNwbGF5TmFtZSA9ICdHcmF2YXRhckltZyc7XG5cbmNvbnN0IEluaXRpYWxzID0gKHByb3BzOiBUSW5pdGlhbHNQcm9wcykgPT4ge1xuICBjb25zdCBpbml0aWFsc0Zyb21OYW1lID0gZ2V0SW5pdGlhbHNGcm9tTmFtZSh7XG4gICAgZmlyc3ROYW1lOiBwcm9wcy5maXJzdE5hbWUsXG4gICAgbGFzdE5hbWU6IHByb3BzLmxhc3ROYW1lLFxuICB9KTtcbiAgcmV0dXJuIChcbiAgICA8ZGl2XG4gICAgICBjc3M9e2Nzc2BcbiAgICAgICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgICAgICBmb250LXNpemU6ICR7Z2V0Rm9udFNpemUoaW5pdGlhbHNGcm9tTmFtZSwgcHJvcHMuc2l6ZSl9O1xuICAgICAgYH1cbiAgICA+XG4gICAgICB7aW5pdGlhbHNGcm9tTmFtZX1cbiAgICA8L2Rpdj5cbiAgKTtcbn07XG5Jbml0aWFscy5kaXNwbGF5TmFtZSA9ICdJbml0aWFscyc7XG5cbmNvbnN0IEF2YXRhciA9IChwcm9wczogVEF2YXRhclByb3BzKSA9PiB7XG4gIGNvbnN0IGF2YXRhclNpemUgPSBnZXRXaWR0aFNpemUocHJvcHMuc2l6ZSk7XG4gIGNvbnN0IGZvcmVncm91bmRDb2xvciA9IGdldEZvcmVncm91bmRDb2xvcihwcm9wcy5jb2xvcik7XG4gIHJldHVybiAoXG4gICAgPGRpdiBjc3M9e2dldEF2YXRhclN0eWxlcyhwcm9wcyl9IHsuLi5maWx0ZXJEYXRhQXR0cmlidXRlcyhwcm9wcyl9PlxuICAgICAge3Byb3BzPy5pY29uID8gKFxuICAgICAgICA8ZGl2XG4gICAgICAgICAgY3NzPXtjc3NgXG4gICAgICAgICAgICBoZWlnaHQ6IGNhbGMoJHthdmF0YXJTaXplfSAtIDQ1JSk7XG4gICAgICAgICAgICB3aWR0aDogY2FsYygke2F2YXRhclNpemV9IC0gNDUlKTtcbiAgICAgICAgICBgfVxuICAgICAgICA+XG4gICAgICAgICAge2Nsb25lRWxlbWVudChwcm9wcz8uaWNvbiwge1xuICAgICAgICAgICAgc2l6ZTogJ3NjYWxlJyxcbiAgICAgICAgICAgIGNvbG9yOiBmb3JlZ3JvdW5kQ29sb3IsXG4gICAgICAgICAgICBiYWNrZ3JvdW5kY29sb3I6IGZvcmVncm91bmRDb2xvcixcbiAgICAgICAgICB9KX1cbiAgICAgICAgPC9kaXY+XG4gICAgICApIDogKFxuICAgICAgICA8PlxuICAgICAgICAgIDxHcmF2YXRhckltZ1xuICAgICAgICAgICAgZ3JhdmF0YXJIYXNoPXtwcm9wcy5ncmF2YXRhckhhc2h9XG4gICAgICAgICAgICBzaXplPXtwcm9wcy5zaXplfVxuICAgICAgICAgICAgaXNIaWdobGlnaHRlZD17cHJvcHMuaXNIaWdobGlnaHRlZH1cbiAgICAgICAgICAvPlxuICAgICAgICAgIDxJbml0aWFsc1xuICAgICAgICAgICAgc2l6ZT17cHJvcHMuc2l6ZX1cbiAgICAgICAgICAgIGZpcnN0TmFtZT17cHJvcHMuZmlyc3ROYW1lfVxuICAgICAgICAgICAgbGFzdE5hbWU9e3Byb3BzLmxhc3ROYW1lfVxuICAgICAgICAgIC8+XG4gICAgICAgIDwvPlxuICAgICAgKX1cbiAgICA8L2Rpdj5cbiAgKTtcbn07XG5BdmF0YXIuZGlzcGxheU5hbWUgPSAnQXZhdGFyJztcbkF2YXRhci5kZWZhdWx0UHJvcHMgPSBkZWZhdWx0UHJvcHM7XG5cbmV4cG9ydCBkZWZhdWx0IEF2YXRhcjtcbiJdfQ== */"),
   src: createGravatarImgUrl(props.gravatarHash, props.size),
   srcSet: ["".concat(createGravatarImgUrl(props.gravatarHash, props.size), " 1x"), "".concat(createGravatarImgUrl(props.gravatarHash, props.size, 2), " 2x")].join(',')
   /**
@@ -95,33 +144,58 @@ const GravatarImg = props => jsxRuntime.jsx("img", {
   alt: ""
 });
 GravatarImg.displayName = 'GravatarImg';
-const Initials = props => jsxRuntime.jsx("div", {
-  css: /*#__PURE__*/react.css("position:absolute;font-size:", avatarSizes[props.size].fontSize, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:Initials;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImF2YXRhci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBa0hZIiwiZmlsZSI6ImF2YXRhci50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgeyBkZXNpZ25Ub2tlbnMgfSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9kZXNpZ24tc3lzdGVtJztcbmltcG9ydCB7IGZpbHRlckRhdGFBdHRyaWJ1dGVzIH0gZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvdXRpbHMnO1xuXG5leHBvcnQgdHlwZSBUQXZhdGFyUHJvcHMgPSB7XG4gIC8qKlxuICAgKiBUaGUgZmlyc3QgbmFtZSBvZiB0aGUgdXNlci5cbiAgICovXG4gIGZpcnN0TmFtZT86IHN0cmluZztcbiAgLyoqXG4gICAqIFRoZSBsYXN0IG5hbWUgb2YgdGhlIHVzZXIuXG4gICAqL1xuICBsYXN0TmFtZT86IHN0cmluZztcbiAgLyoqXG4gICAqIFRoZSBoYXNoZWQgc3RyaW5nIG9mIHRoZSB1c2VyIGdyYXZhdGFyLlxuICAgKi9cbiAgZ3JhdmF0YXJIYXNoOiBzdHJpbmc7XG4gIC8qKlxuICAgKiBFbmhhbmNlcyB0aGUgYXBwZWFyYW5jZSBvZiB0aGUgYXZhdGFyLlxuICAgKi9cbiAgaXNIaWdobGlnaHRlZD86IGJvb2xlYW47XG4gIC8qKlxuICAgKiBUaGUgc2l6ZSBvZiB0aGUgcmVuZGVyZWQgYXZhdGFyLlxuICAgKi9cbiAgc2l6ZTogJ3MnIHwgJ20nIHwgJ2wnO1xufTtcblxuZXhwb3J0IHR5cGUgVEdyYXZhdGFySW1nUHJvcHMgPSBQaWNrPFxuICBUQXZhdGFyUHJvcHMsXG4gICdncmF2YXRhckhhc2gnIHwgJ2lzSGlnaGxpZ2h0ZWQnIHwgJ3NpemUnXG4+O1xuXG5leHBvcnQgdHlwZSBUSW5pdGlhbHNQcm9wcyA9IFBpY2s8XG4gIFRBdmF0YXJQcm9wcyxcbiAgJ2ZpcnN0TmFtZScgfCAnbGFzdE5hbWUnIHwgJ3NpemUnXG4+O1xuXG5jb25zdCBhdmF0YXJTaXplcyA9IHtcbiAgczoge1xuICAgIHdpZHRoOiAnMjZweCcsXG4gICAgZm9udFNpemU6IGRlc2lnblRva2Vucy5mb250U2l6ZUZvckF2YXRhckFzU21hbGwsXG4gIH0sXG4gIG06IHtcbiAgICB3aWR0aDogZGVzaWduVG9rZW5zLndpZHRoRm9yQXZhdGFyQXNNZWRpdW0sXG4gICAgZm9udFNpemU6IGRlc2lnblRva2Vucy5mb250U2l6ZUZvckF2YXRhckFzTWVkaXVtLFxuICB9LFxuICBsOiB7XG4gICAgd2lkdGg6ICcxMDBweCcsXG4gICAgZm9udFNpemU6IGRlc2lnblRva2Vucy5mb250U2l6ZUZvckF2YXRhckFzQmlnLFxuICB9LFxufTtcblxuY29uc3QgZGVmYXVsdFByb3BzOiBQaWNrPFxuICBUQXZhdGFyUHJvcHMsXG4gICdmaXJzdE5hbWUnIHwgJ2xhc3ROYW1lJyB8ICdpc0hpZ2hsaWdodGVkJyB8ICdzaXplJ1xuPiA9IHtcbiAgZmlyc3ROYW1lOiAnJyxcbiAgbGFzdE5hbWU6ICcnLFxuICBpc0hpZ2hsaWdodGVkOiBmYWxzZSxcbiAgc2l6ZTogJ3MnLFxufTtcblxuY29uc3QgZ2V0Rmlyc3RDaGFyID0gKHN0cjogc3RyaW5nKSA9PlxuICB0eXBlb2Ygc3RyID09PSAnc3RyaW5nJyA/IHN0ci50cmltKCkuc2xpY2UoMCwgMSkudG9VcHBlckNhc2UoKSA6ICcnO1xuXG5jb25zdCBnZXRJbml0aWFsc0Zyb21OYW1lID0gKHtcbiAgZmlyc3ROYW1lID0gJycsXG4gIGxhc3ROYW1lID0gJycsXG59OiBQaWNrPFRBdmF0YXJQcm9wcywgJ2ZpcnN0TmFtZScgfCAnbGFzdE5hbWUnPikgPT5cbiAgYCR7Z2V0Rmlyc3RDaGFyKGZpcnN0TmFtZSl9JHtnZXRGaXJzdENoYXIobGFzdE5hbWUpfWA7XG5cbi8qKlxuICogYHNgIC0gZGVmaW5lcyB0aGUgc2l6ZS4gV2Ugd2FudCBhIGJpZ2dlciBvbmUgaWYgdGhlIHVzZXIgaXMgb24gYSByZXRpbmEtZGlzcGxheVxuICogYGRgIC0gZGVmaW5lcyB0aGUgZGVmYXVsdCBpZiB0aGUgdXNlciBpcyBub3Qga25vd24gdG8gR3JhdmF0YXIuIEl0IHJldHVybnMgYSBibGFuayBpbWFnZSxcbiAqICAgICAgICB3aGljaCBsZXQgdGhlIGluaXRpYWxzIHVuZGVybmVhdGggc2hpbmUgdGhyb3VnaFxuICpcbiAqIEBzZWU6IGh0dHBzOi8vZGUuZ3JhdmF0YXIuY29tL3NpdGUvaW1wbGVtZW50L2ltYWdlcy9cbiAqL1xuY29uc3QgY3JlYXRlR3JhdmF0YXJJbWdVcmwgPSAoXG4gIG1kNUhhc2g6IFRBdmF0YXJQcm9wc1snZ3JhdmF0YXJIYXNoJ10sXG4gIHNpemU6IFRBdmF0YXJQcm9wc1snc2l6ZSddLFxuICBtdWx0aXBseUJ5OiBudW1iZXIgPSAxXG4pID0+IHtcbiAgY29uc3Qgc2l6ZUFzSW50ID0gcGFyc2VJbnQoYXZhdGFyU2l6ZXNbc2l6ZV0ud2lkdGgucmVwbGFjZSgvcHgkLywgJycpLCAxMCk7XG4gIGNvbnN0IGdyYXZhdGFyU2l6ZSA9IHNpemVBc0ludCAqIG11bHRpcGx5Qnk7XG4gIHJldHVybiBgaHR0cHM6Ly93d3cuZ3JhdmF0YXIuY29tL2F2YXRhci8ke21kNUhhc2h9P3M9JHtncmF2YXRhclNpemV9JmQ9YmxhbmtgO1xufTtcblxuY29uc3QgR3JhdmF0YXJJbWcgPSAocHJvcHM6IFRHcmF2YXRhckltZ1Byb3BzKSA9PiAoXG4gIDxpbWdcbiAgICBjc3M9e2Nzc2BcbiAgICAgIGJhY2tncm91bmQtcG9zaXRpb246IGNlbnRlciBjZW50ZXI7XG4gICAgICBiYWNrZ3JvdW5kLXNpemU6IGNvbnRhaW47XG4gICAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gICAgICB6LWluZGV4OiAxMDtcblxuICAgICAgJHtwcm9wcy5pc0hpZ2hsaWdodGVkID8gJ29wYWNpdHk6IDAuNzsnIDogJyd9XG4gICAgYH1cbiAgICBzcmM9e2NyZWF0ZUdyYXZhdGFySW1nVXJsKHByb3BzLmdyYXZhdGFySGFzaCwgcHJvcHMuc2l6ZSl9XG4gICAgc3JjU2V0PXtbXG4gICAgICBgJHtjcmVhdGVHcmF2YXRhckltZ1VybChwcm9wcy5ncmF2YXRhckhhc2gsIHByb3BzLnNpemUpfSAxeGAsXG4gICAgICBgJHtjcmVhdGVHcmF2YXRhckltZ1VybChwcm9wcy5ncmF2YXRhckhhc2gsIHByb3BzLnNpemUsIDIpfSAyeGAsXG4gICAgXS5qb2luKCcsJyl9XG4gICAgLyoqXG4gICAgICogQmFzZWQgb24gaHR0cHM6Ly93d3cudzMub3JnL1dBSS90dXRvcmlhbHMvaW1hZ2VzL2RlY2lzaW9uLXRyZWUvOlxuICAgICAqIGltYWdlIGNvbnRyaWJ1dGVzIG1lYW5pbmcgdG8gdGhlIGN1cnJlbnQgcGFnZSBvciBjb250ZXh0IGFuZCBpdCBzaG93cyBjb250ZW50IHRoYXQgaXMgcmVkdW5kYW50IHRvIHJlYWwgdGV4dCBuZWFyYnlcbiAgICAgKi9cbiAgICBhbHQ9XCJcIlxuICAvPlxuKTtcbkdyYXZhdGFySW1nLmRpc3BsYXlOYW1lID0gJ0dyYXZhdGFySW1nJztcblxuY29uc3QgSW5pdGlhbHMgPSAocHJvcHM6IFRJbml0aWFsc1Byb3BzKSA9PiAoXG4gIDxkaXZcbiAgICBjc3M9e2Nzc2BcbiAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICAgIGZvbnQtc2l6ZTogJHthdmF0YXJTaXplc1twcm9wcy5zaXplXS5mb250U2l6ZX07XG4gICAgYH1cbiAgPlxuICAgIHtnZXRJbml0aWFsc0Zyb21OYW1lKHtcbiAgICAgIGZpcnN0TmFtZTogcHJvcHMuZmlyc3ROYW1lLFxuICAgICAgbGFzdE5hbWU6IHByb3BzLmxhc3ROYW1lLFxuICAgIH0pfVxuICA8L2Rpdj5cbik7XG5Jbml0aWFscy5kaXNwbGF5TmFtZSA9ICdJbml0aWFscyc7XG5cbmNvbnN0IEF2YXRhciA9IChwcm9wczogVEF2YXRhclByb3BzKSA9PiAoXG4gIDxkaXZcbiAgICBjc3M9e2Nzc2BcbiAgICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke2Rlc2lnblRva2Vucy5iYWNrZ3JvdW5kQ29sb3JGb3JBdmF0YXJ9O1xuICAgICAgYm9yZGVyLXJhZGl1czogMTAwJTtcbiAgICAgIGZvbnQtc2l6ZTogJHtkZXNpZ25Ub2tlbnMuZm9udFNpemVEZWZhdWx0fTtcbiAgICAgIGNvbG9yOiAke2Rlc2lnblRva2Vucy5jb2xvclN1cmZhY2V9O1xuICAgICAgZGlzcGxheTogZmxleDtcbiAgICAgIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICAgICAgb3ZlcmZsb3c6IGhpZGRlbjtcbiAgICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcblxuICAgICAgaGVpZ2h0OiAke2F2YXRhclNpemVzW3Byb3BzLnNpemVdLndpZHRofTtcbiAgICAgIHdpZHRoOiAke2F2YXRhclNpemVzW3Byb3BzLnNpemVdLndpZHRofTtcblxuICAgICAgJHtwcm9wcy5pc0hpZ2hsaWdodGVkXG4gICAgICAgID8gYGJhY2tncm91bmQtY29sb3I6ICR7ZGVzaWduVG9rZW5zLmJhY2tncm91bmRDb2xvckZvckF2YXRhcldoZW5IaWdobGlnaHRlZH07YFxuICAgICAgICA6ICcnfVxuICAgIGB9XG4gICAgey4uLmZpbHRlckRhdGFBdHRyaWJ1dGVzKHByb3BzKX1cbiAgPlxuICAgIDxHcmF2YXRhckltZ1xuICAgICAgZ3JhdmF0YXJIYXNoPXtwcm9wcy5ncmF2YXRhckhhc2h9XG4gICAgICBzaXplPXtwcm9wcy5zaXplfVxuICAgICAgaXNIaWdobGlnaHRlZD17cHJvcHMuaXNIaWdobGlnaHRlZH1cbiAgICAvPlxuICAgIDxJbml0aWFsc1xuICAgICAgc2l6ZT17cHJvcHMuc2l6ZX1cbiAgICAgIGZpcnN0TmFtZT17cHJvcHMuZmlyc3ROYW1lfVxuICAgICAgbGFzdE5hbWU9e3Byb3BzLmxhc3ROYW1lfVxuICAgIC8+XG4gIDwvZGl2PlxuKTtcblxuQXZhdGFyLmRpc3BsYXlOYW1lID0gJ0F2YXRhcic7XG5BdmF0YXIuZGVmYXVsdFByb3BzID0gZGVmYXVsdFByb3BzO1xuXG5leHBvcnQgZGVmYXVsdCBBdmF0YXI7XG4iXX0= */"),
-  children: getInitialsFromName({
+const Initials = props => {
+  const initialsFromName = getInitialsFromName({
     firstName: props.firstName,
     lastName: props.lastName
-  })
-});
+  });
+  return jsxRuntime.jsx("div", {
+    css: /*#__PURE__*/react.css("position:absolute;font-size:", getFontSize(initialsFromName, props.size), ";" + (process.env.NODE_ENV === "production" ? "" : ";label:Initials;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImF2YXRhci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBc0hjIiwiZmlsZSI6ImF2YXRhci50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBSZWFjdEVsZW1lbnQsIGNsb25lRWxlbWVudCB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IGZpbHRlckRhdGFBdHRyaWJ1dGVzIH0gZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvdXRpbHMnO1xuaW1wb3J0IHtcbiAgZ2V0QXZhdGFyU3R5bGVzLFxuICBnZXRGb250U2l6ZSxcbiAgZ2V0Rm9yZWdyb3VuZENvbG9yLFxuICBnZXRXaWR0aFNpemUsXG59IGZyb20gJy4vYXZhdGFyLnN0eWxlcyc7XG5cbmV4cG9ydCB0eXBlIFRBdmF0YXJQcm9wcyA9IHtcbiAgLyoqXG4gICAqIFRoZSBmaXJzdCBuYW1lIG9mIHRoZSB1c2VyLlxuICAgKi9cbiAgZmlyc3ROYW1lPzogc3RyaW5nO1xuICAvKipcbiAgICogVGhlIGxhc3QgbmFtZSBvZiB0aGUgdXNlci5cbiAgICovXG4gIGxhc3ROYW1lPzogc3RyaW5nO1xuICAvKipcbiAgICogVGhlIGhhc2hlZCBzdHJpbmcgb2YgdGhlIHVzZXIgZ3JhdmF0YXIuXG4gICAqL1xuICBncmF2YXRhckhhc2g6IHN0cmluZztcbiAgLyoqXG4gICAqIEVuaGFuY2VzIHRoZSBhcHBlYXJhbmNlIG9mIHRoZSBhdmF0YXIuXG4gICAqL1xuICBpc0hpZ2hsaWdodGVkPzogYm9vbGVhbjtcbiAgLyoqXG4gICAqIFRoZSBzaXplIG9mIHRoZSByZW5kZXJlZCBhdmF0YXIuXG4gICAqL1xuICBzaXplOiAncycgfCAnbScgfCAnbCc7XG4gIC8qKlxuICAgKiBUaGUgY29sb3Igb2YgdGhlIGF2YXRhci5cbiAgICovXG4gIGNvbG9yPzogJ2FjY2VudCcgfCAncHVycGxlJyB8ICd0dXJxdW9pc2UnIHwgJ2Jyb3duJztcbiAgLyoqIGFuIDxJY29uIC8+IGNvbXBvbmVudFxuICAgKi9cbiAgaWNvbj86IFJlYWN0RWxlbWVudDtcbn07XG5cbmV4cG9ydCB0eXBlIFRHcmF2YXRhckltZ1Byb3BzID0gUGljazxcbiAgVEF2YXRhclByb3BzLFxuICAnZ3JhdmF0YXJIYXNoJyB8ICdpc0hpZ2hsaWdodGVkJyB8ICdzaXplJ1xuPjtcblxuZXhwb3J0IHR5cGUgVEluaXRpYWxzUHJvcHMgPSBQaWNrPFxuICBUQXZhdGFyUHJvcHMsXG4gICdmaXJzdE5hbWUnIHwgJ2xhc3ROYW1lJyB8ICdzaXplJ1xuPjtcblxuY29uc3QgZGVmYXVsdFByb3BzOiBQaWNrPFxuICBUQXZhdGFyUHJvcHMsXG4gICdmaXJzdE5hbWUnIHwgJ2xhc3ROYW1lJyB8ICdpc0hpZ2hsaWdodGVkJyB8ICdzaXplJyB8ICdjb2xvcidcbj4gPSB7XG4gIGZpcnN0TmFtZTogJycsXG4gIGxhc3ROYW1lOiAnJyxcbiAgaXNIaWdobGlnaHRlZDogZmFsc2UsXG4gIHNpemU6ICdzJyxcbiAgY29sb3I6ICdhY2NlbnQnLFxufTtcblxuY29uc3QgZ2V0Rmlyc3RDaGFyID0gKHN0cjogc3RyaW5nKSA9PlxuICB0eXBlb2Ygc3RyID09PSAnc3RyaW5nJyA/IHN0ci50cmltKCkuc2xpY2UoMCwgMSkudG9VcHBlckNhc2UoKSA6ICcnO1xuXG5jb25zdCBnZXRJbml0aWFsc0Zyb21OYW1lID0gKHtcbiAgZmlyc3ROYW1lID0gJycsXG4gIGxhc3ROYW1lID0gJycsXG59OiBQaWNrPFRBdmF0YXJQcm9wcywgJ2ZpcnN0TmFtZScgfCAnbGFzdE5hbWUnPikgPT5cbiAgYCR7Z2V0Rmlyc3RDaGFyKGZpcnN0TmFtZSl9JHtnZXRGaXJzdENoYXIobGFzdE5hbWUpfWA7XG4vKipcbiAqIGBzYCAtIGRlZmluZXMgdGhlIHNpemUuIFdlIHdhbnQgYSBiaWdnZXIgb25lIGlmIHRoZSB1c2VyIGlzIG9uIGEgcmV0aW5hLWRpc3BsYXlcbiAqIGBkYCAtIGRlZmluZXMgdGhlIGRlZmF1bHQgaWYgdGhlIHVzZXIgaXMgbm90IGtub3duIHRvIEdyYXZhdGFyLiBJdCByZXR1cm5zIGEgYmxhbmsgaW1hZ2UsXG4gKiAgICAgICAgd2hpY2ggbGV0IHRoZSBpbml0aWFscyB1bmRlcm5lYXRoIHNoaW5lIHRocm91Z2hcbiAqXG4gKiBAc2VlOiBodHRwczovL2RlLmdyYXZhdGFyLmNvbS9zaXRlL2ltcGxlbWVudC9pbWFnZXMvXG4gKi9cbmNvbnN0IGNyZWF0ZUdyYXZhdGFySW1nVXJsID0gKFxuICBtZDVIYXNoOiBUQXZhdGFyUHJvcHNbJ2dyYXZhdGFySGFzaCddLFxuICBzaXplOiBUQXZhdGFyUHJvcHNbJ3NpemUnXSxcbiAgbXVsdGlwbHlCeTogbnVtYmVyID0gMVxuKSA9PiB7XG4gIGNvbnN0IGltYWdlU2l6ZSA9IGdldFdpZHRoU2l6ZShzaXplKTtcbiAgY29uc3Qgc2l6ZUFzSW50ID0gcGFyc2VJbnQoaW1hZ2VTaXplLnJlcGxhY2UoL3B4JC8sICcnKSwgMTApO1xuICBjb25zdCBncmF2YXRhclNpemUgPSBzaXplQXNJbnQgKiBtdWx0aXBseUJ5O1xuICByZXR1cm4gYGh0dHBzOi8vd3d3LmdyYXZhdGFyLmNvbS9hdmF0YXIvJHttZDVIYXNofT9zPSR7Z3JhdmF0YXJTaXplfSZkPWJsYW5rYDtcbn07XG5cbmNvbnN0IEdyYXZhdGFySW1nID0gKHByb3BzOiBUR3JhdmF0YXJJbWdQcm9wcykgPT4gKFxuICA8aW1nXG4gICAgY3NzPXtjc3NgXG4gICAgICBiYWNrZ3JvdW5kLXBvc2l0aW9uOiBjZW50ZXIgY2VudGVyO1xuICAgICAgYmFja2dyb3VuZC1zaXplOiBjb250YWluO1xuICAgICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgICAgei1pbmRleDogMTA7XG5cbiAgICAgICR7cHJvcHMuaXNIaWdobGlnaHRlZCA/ICdvcGFjaXR5OiAwLjc7JyA6ICcnfVxuICAgIGB9XG4gICAgc3JjPXtjcmVhdGVHcmF2YXRhckltZ1VybChwcm9wcy5ncmF2YXRhckhhc2gsIHByb3BzLnNpemUpfVxuICAgIHNyY1NldD17W1xuICAgICAgYCR7Y3JlYXRlR3JhdmF0YXJJbWdVcmwocHJvcHMuZ3JhdmF0YXJIYXNoLCBwcm9wcy5zaXplKX0gMXhgLFxuICAgICAgYCR7Y3JlYXRlR3JhdmF0YXJJbWdVcmwocHJvcHMuZ3JhdmF0YXJIYXNoLCBwcm9wcy5zaXplLCAyKX0gMnhgLFxuICAgIF0uam9pbignLCcpfVxuICAgIC8qKlxuICAgICAqIEJhc2VkIG9uIGh0dHBzOi8vd3d3LnczLm9yZy9XQUkvdHV0b3JpYWxzL2ltYWdlcy9kZWNpc2lvbi10cmVlLzpcbiAgICAgKiBpbWFnZSBjb250cmlidXRlcyBtZWFuaW5nIHRvIHRoZSBjdXJyZW50IHBhZ2Ugb3IgY29udGV4dCBhbmQgaXQgc2hvd3MgY29udGVudCB0aGF0IGlzIHJlZHVuZGFudCB0byByZWFsIHRleHQgbmVhcmJ5XG4gICAgICovXG4gICAgYWx0PVwiXCJcbiAgLz5cbik7XG5HcmF2YXRhckltZy5kaXNwbGF5TmFtZSA9ICdHcmF2YXRhckltZyc7XG5cbmNvbnN0IEluaXRpYWxzID0gKHByb3BzOiBUSW5pdGlhbHNQcm9wcykgPT4ge1xuICBjb25zdCBpbml0aWFsc0Zyb21OYW1lID0gZ2V0SW5pdGlhbHNGcm9tTmFtZSh7XG4gICAgZmlyc3ROYW1lOiBwcm9wcy5maXJzdE5hbWUsXG4gICAgbGFzdE5hbWU6IHByb3BzLmxhc3ROYW1lLFxuICB9KTtcbiAgcmV0dXJuIChcbiAgICA8ZGl2XG4gICAgICBjc3M9e2Nzc2BcbiAgICAgICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgICAgICBmb250LXNpemU6ICR7Z2V0Rm9udFNpemUoaW5pdGlhbHNGcm9tTmFtZSwgcHJvcHMuc2l6ZSl9O1xuICAgICAgYH1cbiAgICA+XG4gICAgICB7aW5pdGlhbHNGcm9tTmFtZX1cbiAgICA8L2Rpdj5cbiAgKTtcbn07XG5Jbml0aWFscy5kaXNwbGF5TmFtZSA9ICdJbml0aWFscyc7XG5cbmNvbnN0IEF2YXRhciA9IChwcm9wczogVEF2YXRhclByb3BzKSA9PiB7XG4gIGNvbnN0IGF2YXRhclNpemUgPSBnZXRXaWR0aFNpemUocHJvcHMuc2l6ZSk7XG4gIGNvbnN0IGZvcmVncm91bmRDb2xvciA9IGdldEZvcmVncm91bmRDb2xvcihwcm9wcy5jb2xvcik7XG4gIHJldHVybiAoXG4gICAgPGRpdiBjc3M9e2dldEF2YXRhclN0eWxlcyhwcm9wcyl9IHsuLi5maWx0ZXJEYXRhQXR0cmlidXRlcyhwcm9wcyl9PlxuICAgICAge3Byb3BzPy5pY29uID8gKFxuICAgICAgICA8ZGl2XG4gICAgICAgICAgY3NzPXtjc3NgXG4gICAgICAgICAgICBoZWlnaHQ6IGNhbGMoJHthdmF0YXJTaXplfSAtIDQ1JSk7XG4gICAgICAgICAgICB3aWR0aDogY2FsYygke2F2YXRhclNpemV9IC0gNDUlKTtcbiAgICAgICAgICBgfVxuICAgICAgICA+XG4gICAgICAgICAge2Nsb25lRWxlbWVudChwcm9wcz8uaWNvbiwge1xuICAgICAgICAgICAgc2l6ZTogJ3NjYWxlJyxcbiAgICAgICAgICAgIGNvbG9yOiBmb3JlZ3JvdW5kQ29sb3IsXG4gICAgICAgICAgICBiYWNrZ3JvdW5kY29sb3I6IGZvcmVncm91bmRDb2xvcixcbiAgICAgICAgICB9KX1cbiAgICAgICAgPC9kaXY+XG4gICAgICApIDogKFxuICAgICAgICA8PlxuICAgICAgICAgIDxHcmF2YXRhckltZ1xuICAgICAgICAgICAgZ3JhdmF0YXJIYXNoPXtwcm9wcy5ncmF2YXRhckhhc2h9XG4gICAgICAgICAgICBzaXplPXtwcm9wcy5zaXplfVxuICAgICAgICAgICAgaXNIaWdobGlnaHRlZD17cHJvcHMuaXNIaWdobGlnaHRlZH1cbiAgICAgICAgICAvPlxuICAgICAgICAgIDxJbml0aWFsc1xuICAgICAgICAgICAgc2l6ZT17cHJvcHMuc2l6ZX1cbiAgICAgICAgICAgIGZpcnN0TmFtZT17cHJvcHMuZmlyc3ROYW1lfVxuICAgICAgICAgICAgbGFzdE5hbWU9e3Byb3BzLmxhc3ROYW1lfVxuICAgICAgICAgIC8+XG4gICAgICAgIDwvPlxuICAgICAgKX1cbiAgICA8L2Rpdj5cbiAgKTtcbn07XG5BdmF0YXIuZGlzcGxheU5hbWUgPSAnQXZhdGFyJztcbkF2YXRhci5kZWZhdWx0UHJvcHMgPSBkZWZhdWx0UHJvcHM7XG5cbmV4cG9ydCBkZWZhdWx0IEF2YXRhcjtcbiJdfQ== */"),
+    children: initialsFromName
+  });
+};
 Initials.displayName = 'Initials';
-const Avatar = props => jsxRuntime.jsxs("div", _objectSpread(_objectSpread({
-  css: /*#__PURE__*/react.css("align-items:center;background-color:", designSystem.designTokens.backgroundColorForAvatar, ";border-radius:100%;font-size:", designSystem.designTokens.fontSizeDefault, ";color:", designSystem.designTokens.colorSurface, ";display:flex;justify-content:center;overflow:hidden;position:relative;height:", avatarSizes[props.size].width, ";width:", avatarSizes[props.size].width, ";", props.isHighlighted ? "background-color: ".concat(designSystem.designTokens.backgroundColorForAvatarWhenHighlighted, ";") : '', ";" + (process.env.NODE_ENV === "production" ? "" : ";label:Avatar;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImF2YXRhci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBaUlZIiwiZmlsZSI6ImF2YXRhci50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgeyBkZXNpZ25Ub2tlbnMgfSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9kZXNpZ24tc3lzdGVtJztcbmltcG9ydCB7IGZpbHRlckRhdGFBdHRyaWJ1dGVzIH0gZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvdXRpbHMnO1xuXG5leHBvcnQgdHlwZSBUQXZhdGFyUHJvcHMgPSB7XG4gIC8qKlxuICAgKiBUaGUgZmlyc3QgbmFtZSBvZiB0aGUgdXNlci5cbiAgICovXG4gIGZpcnN0TmFtZT86IHN0cmluZztcbiAgLyoqXG4gICAqIFRoZSBsYXN0IG5hbWUgb2YgdGhlIHVzZXIuXG4gICAqL1xuICBsYXN0TmFtZT86IHN0cmluZztcbiAgLyoqXG4gICAqIFRoZSBoYXNoZWQgc3RyaW5nIG9mIHRoZSB1c2VyIGdyYXZhdGFyLlxuICAgKi9cbiAgZ3JhdmF0YXJIYXNoOiBzdHJpbmc7XG4gIC8qKlxuICAgKiBFbmhhbmNlcyB0aGUgYXBwZWFyYW5jZSBvZiB0aGUgYXZhdGFyLlxuICAgKi9cbiAgaXNIaWdobGlnaHRlZD86IGJvb2xlYW47XG4gIC8qKlxuICAgKiBUaGUgc2l6ZSBvZiB0aGUgcmVuZGVyZWQgYXZhdGFyLlxuICAgKi9cbiAgc2l6ZTogJ3MnIHwgJ20nIHwgJ2wnO1xufTtcblxuZXhwb3J0IHR5cGUgVEdyYXZhdGFySW1nUHJvcHMgPSBQaWNrPFxuICBUQXZhdGFyUHJvcHMsXG4gICdncmF2YXRhckhhc2gnIHwgJ2lzSGlnaGxpZ2h0ZWQnIHwgJ3NpemUnXG4+O1xuXG5leHBvcnQgdHlwZSBUSW5pdGlhbHNQcm9wcyA9IFBpY2s8XG4gIFRBdmF0YXJQcm9wcyxcbiAgJ2ZpcnN0TmFtZScgfCAnbGFzdE5hbWUnIHwgJ3NpemUnXG4+O1xuXG5jb25zdCBhdmF0YXJTaXplcyA9IHtcbiAgczoge1xuICAgIHdpZHRoOiAnMjZweCcsXG4gICAgZm9udFNpemU6IGRlc2lnblRva2Vucy5mb250U2l6ZUZvckF2YXRhckFzU21hbGwsXG4gIH0sXG4gIG06IHtcbiAgICB3aWR0aDogZGVzaWduVG9rZW5zLndpZHRoRm9yQXZhdGFyQXNNZWRpdW0sXG4gICAgZm9udFNpemU6IGRlc2lnblRva2Vucy5mb250U2l6ZUZvckF2YXRhckFzTWVkaXVtLFxuICB9LFxuICBsOiB7XG4gICAgd2lkdGg6ICcxMDBweCcsXG4gICAgZm9udFNpemU6IGRlc2lnblRva2Vucy5mb250U2l6ZUZvckF2YXRhckFzQmlnLFxuICB9LFxufTtcblxuY29uc3QgZGVmYXVsdFByb3BzOiBQaWNrPFxuICBUQXZhdGFyUHJvcHMsXG4gICdmaXJzdE5hbWUnIHwgJ2xhc3ROYW1lJyB8ICdpc0hpZ2hsaWdodGVkJyB8ICdzaXplJ1xuPiA9IHtcbiAgZmlyc3ROYW1lOiAnJyxcbiAgbGFzdE5hbWU6ICcnLFxuICBpc0hpZ2hsaWdodGVkOiBmYWxzZSxcbiAgc2l6ZTogJ3MnLFxufTtcblxuY29uc3QgZ2V0Rmlyc3RDaGFyID0gKHN0cjogc3RyaW5nKSA9PlxuICB0eXBlb2Ygc3RyID09PSAnc3RyaW5nJyA/IHN0ci50cmltKCkuc2xpY2UoMCwgMSkudG9VcHBlckNhc2UoKSA6ICcnO1xuXG5jb25zdCBnZXRJbml0aWFsc0Zyb21OYW1lID0gKHtcbiAgZmlyc3ROYW1lID0gJycsXG4gIGxhc3ROYW1lID0gJycsXG59OiBQaWNrPFRBdmF0YXJQcm9wcywgJ2ZpcnN0TmFtZScgfCAnbGFzdE5hbWUnPikgPT5cbiAgYCR7Z2V0Rmlyc3RDaGFyKGZpcnN0TmFtZSl9JHtnZXRGaXJzdENoYXIobGFzdE5hbWUpfWA7XG5cbi8qKlxuICogYHNgIC0gZGVmaW5lcyB0aGUgc2l6ZS4gV2Ugd2FudCBhIGJpZ2dlciBvbmUgaWYgdGhlIHVzZXIgaXMgb24gYSByZXRpbmEtZGlzcGxheVxuICogYGRgIC0gZGVmaW5lcyB0aGUgZGVmYXVsdCBpZiB0aGUgdXNlciBpcyBub3Qga25vd24gdG8gR3JhdmF0YXIuIEl0IHJldHVybnMgYSBibGFuayBpbWFnZSxcbiAqICAgICAgICB3aGljaCBsZXQgdGhlIGluaXRpYWxzIHVuZGVybmVhdGggc2hpbmUgdGhyb3VnaFxuICpcbiAqIEBzZWU6IGh0dHBzOi8vZGUuZ3JhdmF0YXIuY29tL3NpdGUvaW1wbGVtZW50L2ltYWdlcy9cbiAqL1xuY29uc3QgY3JlYXRlR3JhdmF0YXJJbWdVcmwgPSAoXG4gIG1kNUhhc2g6IFRBdmF0YXJQcm9wc1snZ3JhdmF0YXJIYXNoJ10sXG4gIHNpemU6IFRBdmF0YXJQcm9wc1snc2l6ZSddLFxuICBtdWx0aXBseUJ5OiBudW1iZXIgPSAxXG4pID0+IHtcbiAgY29uc3Qgc2l6ZUFzSW50ID0gcGFyc2VJbnQoYXZhdGFyU2l6ZXNbc2l6ZV0ud2lkdGgucmVwbGFjZSgvcHgkLywgJycpLCAxMCk7XG4gIGNvbnN0IGdyYXZhdGFyU2l6ZSA9IHNpemVBc0ludCAqIG11bHRpcGx5Qnk7XG4gIHJldHVybiBgaHR0cHM6Ly93d3cuZ3JhdmF0YXIuY29tL2F2YXRhci8ke21kNUhhc2h9P3M9JHtncmF2YXRhclNpemV9JmQ9YmxhbmtgO1xufTtcblxuY29uc3QgR3JhdmF0YXJJbWcgPSAocHJvcHM6IFRHcmF2YXRhckltZ1Byb3BzKSA9PiAoXG4gIDxpbWdcbiAgICBjc3M9e2Nzc2BcbiAgICAgIGJhY2tncm91bmQtcG9zaXRpb246IGNlbnRlciBjZW50ZXI7XG4gICAgICBiYWNrZ3JvdW5kLXNpemU6IGNvbnRhaW47XG4gICAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gICAgICB6LWluZGV4OiAxMDtcblxuICAgICAgJHtwcm9wcy5pc0hpZ2hsaWdodGVkID8gJ29wYWNpdHk6IDAuNzsnIDogJyd9XG4gICAgYH1cbiAgICBzcmM9e2NyZWF0ZUdyYXZhdGFySW1nVXJsKHByb3BzLmdyYXZhdGFySGFzaCwgcHJvcHMuc2l6ZSl9XG4gICAgc3JjU2V0PXtbXG4gICAgICBgJHtjcmVhdGVHcmF2YXRhckltZ1VybChwcm9wcy5ncmF2YXRhckhhc2gsIHByb3BzLnNpemUpfSAxeGAsXG4gICAgICBgJHtjcmVhdGVHcmF2YXRhckltZ1VybChwcm9wcy5ncmF2YXRhckhhc2gsIHByb3BzLnNpemUsIDIpfSAyeGAsXG4gICAgXS5qb2luKCcsJyl9XG4gICAgLyoqXG4gICAgICogQmFzZWQgb24gaHR0cHM6Ly93d3cudzMub3JnL1dBSS90dXRvcmlhbHMvaW1hZ2VzL2RlY2lzaW9uLXRyZWUvOlxuICAgICAqIGltYWdlIGNvbnRyaWJ1dGVzIG1lYW5pbmcgdG8gdGhlIGN1cnJlbnQgcGFnZSBvciBjb250ZXh0IGFuZCBpdCBzaG93cyBjb250ZW50IHRoYXQgaXMgcmVkdW5kYW50IHRvIHJlYWwgdGV4dCBuZWFyYnlcbiAgICAgKi9cbiAgICBhbHQ9XCJcIlxuICAvPlxuKTtcbkdyYXZhdGFySW1nLmRpc3BsYXlOYW1lID0gJ0dyYXZhdGFySW1nJztcblxuY29uc3QgSW5pdGlhbHMgPSAocHJvcHM6IFRJbml0aWFsc1Byb3BzKSA9PiAoXG4gIDxkaXZcbiAgICBjc3M9e2Nzc2BcbiAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICAgIGZvbnQtc2l6ZTogJHthdmF0YXJTaXplc1twcm9wcy5zaXplXS5mb250U2l6ZX07XG4gICAgYH1cbiAgPlxuICAgIHtnZXRJbml0aWFsc0Zyb21OYW1lKHtcbiAgICAgIGZpcnN0TmFtZTogcHJvcHMuZmlyc3ROYW1lLFxuICAgICAgbGFzdE5hbWU6IHByb3BzLmxhc3ROYW1lLFxuICAgIH0pfVxuICA8L2Rpdj5cbik7XG5Jbml0aWFscy5kaXNwbGF5TmFtZSA9ICdJbml0aWFscyc7XG5cbmNvbnN0IEF2YXRhciA9IChwcm9wczogVEF2YXRhclByb3BzKSA9PiAoXG4gIDxkaXZcbiAgICBjc3M9e2Nzc2BcbiAgICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke2Rlc2lnblRva2Vucy5iYWNrZ3JvdW5kQ29sb3JGb3JBdmF0YXJ9O1xuICAgICAgYm9yZGVyLXJhZGl1czogMTAwJTtcbiAgICAgIGZvbnQtc2l6ZTogJHtkZXNpZ25Ub2tlbnMuZm9udFNpemVEZWZhdWx0fTtcbiAgICAgIGNvbG9yOiAke2Rlc2lnblRva2Vucy5jb2xvclN1cmZhY2V9O1xuICAgICAgZGlzcGxheTogZmxleDtcbiAgICAgIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICAgICAgb3ZlcmZsb3c6IGhpZGRlbjtcbiAgICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcblxuICAgICAgaGVpZ2h0OiAke2F2YXRhclNpemVzW3Byb3BzLnNpemVdLndpZHRofTtcbiAgICAgIHdpZHRoOiAke2F2YXRhclNpemVzW3Byb3BzLnNpemVdLndpZHRofTtcblxuICAgICAgJHtwcm9wcy5pc0hpZ2hsaWdodGVkXG4gICAgICAgID8gYGJhY2tncm91bmQtY29sb3I6ICR7ZGVzaWduVG9rZW5zLmJhY2tncm91bmRDb2xvckZvckF2YXRhcldoZW5IaWdobGlnaHRlZH07YFxuICAgICAgICA6ICcnfVxuICAgIGB9XG4gICAgey4uLmZpbHRlckRhdGFBdHRyaWJ1dGVzKHByb3BzKX1cbiAgPlxuICAgIDxHcmF2YXRhckltZ1xuICAgICAgZ3JhdmF0YXJIYXNoPXtwcm9wcy5ncmF2YXRhckhhc2h9XG4gICAgICBzaXplPXtwcm9wcy5zaXplfVxuICAgICAgaXNIaWdobGlnaHRlZD17cHJvcHMuaXNIaWdobGlnaHRlZH1cbiAgICAvPlxuICAgIDxJbml0aWFsc1xuICAgICAgc2l6ZT17cHJvcHMuc2l6ZX1cbiAgICAgIGZpcnN0TmFtZT17cHJvcHMuZmlyc3ROYW1lfVxuICAgICAgbGFzdE5hbWU9e3Byb3BzLmxhc3ROYW1lfVxuICAgIC8+XG4gIDwvZGl2PlxuKTtcblxuQXZhdGFyLmRpc3BsYXlOYW1lID0gJ0F2YXRhcic7XG5BdmF0YXIuZGVmYXVsdFByb3BzID0gZGVmYXVsdFByb3BzO1xuXG5leHBvcnQgZGVmYXVsdCBBdmF0YXI7XG4iXX0= */")
-}, utils.filterDataAttributes(props)), {}, {
-  children: [jsxRuntime.jsx(GravatarImg, {
-    gravatarHash: props.gravatarHash,
-    size: props.size,
-    isHighlighted: props.isHighlighted
-  }), jsxRuntime.jsx(Initials, {
-    size: props.size,
-    firstName: props.firstName,
-    lastName: props.lastName
-  })]
-}));
+const Avatar = props => {
+  const avatarSize = getWidthSize(props.size);
+  const foregroundColor = getForegroundColor(props.color);
+  return jsxRuntime.jsx("div", _objectSpread(_objectSpread({
+    css: getAvatarStyles(props)
+  }, utils.filterDataAttributes(props)), {}, {
+    children: props !== null && props !== void 0 && props.icon ? jsxRuntime.jsx("div", {
+      css: /*#__PURE__*/react.css("height:calc(", avatarSize, " - 45%);width:calc(", avatarSize, " - 45%);" + (process.env.NODE_ENV === "production" ? "" : ";label:Avatar;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImF2YXRhci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBd0lrQiIsImZpbGUiOiJhdmF0YXIudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgUmVhY3RFbGVtZW50LCBjbG9uZUVsZW1lbnQgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgeyBmaWx0ZXJEYXRhQXR0cmlidXRlcyB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L3V0aWxzJztcbmltcG9ydCB7XG4gIGdldEF2YXRhclN0eWxlcyxcbiAgZ2V0Rm9udFNpemUsXG4gIGdldEZvcmVncm91bmRDb2xvcixcbiAgZ2V0V2lkdGhTaXplLFxufSBmcm9tICcuL2F2YXRhci5zdHlsZXMnO1xuXG5leHBvcnQgdHlwZSBUQXZhdGFyUHJvcHMgPSB7XG4gIC8qKlxuICAgKiBUaGUgZmlyc3QgbmFtZSBvZiB0aGUgdXNlci5cbiAgICovXG4gIGZpcnN0TmFtZT86IHN0cmluZztcbiAgLyoqXG4gICAqIFRoZSBsYXN0IG5hbWUgb2YgdGhlIHVzZXIuXG4gICAqL1xuICBsYXN0TmFtZT86IHN0cmluZztcbiAgLyoqXG4gICAqIFRoZSBoYXNoZWQgc3RyaW5nIG9mIHRoZSB1c2VyIGdyYXZhdGFyLlxuICAgKi9cbiAgZ3JhdmF0YXJIYXNoOiBzdHJpbmc7XG4gIC8qKlxuICAgKiBFbmhhbmNlcyB0aGUgYXBwZWFyYW5jZSBvZiB0aGUgYXZhdGFyLlxuICAgKi9cbiAgaXNIaWdobGlnaHRlZD86IGJvb2xlYW47XG4gIC8qKlxuICAgKiBUaGUgc2l6ZSBvZiB0aGUgcmVuZGVyZWQgYXZhdGFyLlxuICAgKi9cbiAgc2l6ZTogJ3MnIHwgJ20nIHwgJ2wnO1xuICAvKipcbiAgICogVGhlIGNvbG9yIG9mIHRoZSBhdmF0YXIuXG4gICAqL1xuICBjb2xvcj86ICdhY2NlbnQnIHwgJ3B1cnBsZScgfCAndHVycXVvaXNlJyB8ICdicm93bic7XG4gIC8qKiBhbiA8SWNvbiAvPiBjb21wb25lbnRcbiAgICovXG4gIGljb24/OiBSZWFjdEVsZW1lbnQ7XG59O1xuXG5leHBvcnQgdHlwZSBUR3JhdmF0YXJJbWdQcm9wcyA9IFBpY2s8XG4gIFRBdmF0YXJQcm9wcyxcbiAgJ2dyYXZhdGFySGFzaCcgfCAnaXNIaWdobGlnaHRlZCcgfCAnc2l6ZSdcbj47XG5cbmV4cG9ydCB0eXBlIFRJbml0aWFsc1Byb3BzID0gUGljazxcbiAgVEF2YXRhclByb3BzLFxuICAnZmlyc3ROYW1lJyB8ICdsYXN0TmFtZScgfCAnc2l6ZSdcbj47XG5cbmNvbnN0IGRlZmF1bHRQcm9wczogUGljazxcbiAgVEF2YXRhclByb3BzLFxuICAnZmlyc3ROYW1lJyB8ICdsYXN0TmFtZScgfCAnaXNIaWdobGlnaHRlZCcgfCAnc2l6ZScgfCAnY29sb3InXG4+ID0ge1xuICBmaXJzdE5hbWU6ICcnLFxuICBsYXN0TmFtZTogJycsXG4gIGlzSGlnaGxpZ2h0ZWQ6IGZhbHNlLFxuICBzaXplOiAncycsXG4gIGNvbG9yOiAnYWNjZW50Jyxcbn07XG5cbmNvbnN0IGdldEZpcnN0Q2hhciA9IChzdHI6IHN0cmluZykgPT5cbiAgdHlwZW9mIHN0ciA9PT0gJ3N0cmluZycgPyBzdHIudHJpbSgpLnNsaWNlKDAsIDEpLnRvVXBwZXJDYXNlKCkgOiAnJztcblxuY29uc3QgZ2V0SW5pdGlhbHNGcm9tTmFtZSA9ICh7XG4gIGZpcnN0TmFtZSA9ICcnLFxuICBsYXN0TmFtZSA9ICcnLFxufTogUGljazxUQXZhdGFyUHJvcHMsICdmaXJzdE5hbWUnIHwgJ2xhc3ROYW1lJz4pID0+XG4gIGAke2dldEZpcnN0Q2hhcihmaXJzdE5hbWUpfSR7Z2V0Rmlyc3RDaGFyKGxhc3ROYW1lKX1gO1xuLyoqXG4gKiBgc2AgLSBkZWZpbmVzIHRoZSBzaXplLiBXZSB3YW50IGEgYmlnZ2VyIG9uZSBpZiB0aGUgdXNlciBpcyBvbiBhIHJldGluYS1kaXNwbGF5XG4gKiBgZGAgLSBkZWZpbmVzIHRoZSBkZWZhdWx0IGlmIHRoZSB1c2VyIGlzIG5vdCBrbm93biB0byBHcmF2YXRhci4gSXQgcmV0dXJucyBhIGJsYW5rIGltYWdlLFxuICogICAgICAgIHdoaWNoIGxldCB0aGUgaW5pdGlhbHMgdW5kZXJuZWF0aCBzaGluZSB0aHJvdWdoXG4gKlxuICogQHNlZTogaHR0cHM6Ly9kZS5ncmF2YXRhci5jb20vc2l0ZS9pbXBsZW1lbnQvaW1hZ2VzL1xuICovXG5jb25zdCBjcmVhdGVHcmF2YXRhckltZ1VybCA9IChcbiAgbWQ1SGFzaDogVEF2YXRhclByb3BzWydncmF2YXRhckhhc2gnXSxcbiAgc2l6ZTogVEF2YXRhclByb3BzWydzaXplJ10sXG4gIG11bHRpcGx5Qnk6IG51bWJlciA9IDFcbikgPT4ge1xuICBjb25zdCBpbWFnZVNpemUgPSBnZXRXaWR0aFNpemUoc2l6ZSk7XG4gIGNvbnN0IHNpemVBc0ludCA9IHBhcnNlSW50KGltYWdlU2l6ZS5yZXBsYWNlKC9weCQvLCAnJyksIDEwKTtcbiAgY29uc3QgZ3JhdmF0YXJTaXplID0gc2l6ZUFzSW50ICogbXVsdGlwbHlCeTtcbiAgcmV0dXJuIGBodHRwczovL3d3dy5ncmF2YXRhci5jb20vYXZhdGFyLyR7bWQ1SGFzaH0/cz0ke2dyYXZhdGFyU2l6ZX0mZD1ibGFua2A7XG59O1xuXG5jb25zdCBHcmF2YXRhckltZyA9IChwcm9wczogVEdyYXZhdGFySW1nUHJvcHMpID0+IChcbiAgPGltZ1xuICAgIGNzcz17Y3NzYFxuICAgICAgYmFja2dyb3VuZC1wb3NpdGlvbjogY2VudGVyIGNlbnRlcjtcbiAgICAgIGJhY2tncm91bmQtc2l6ZTogY29udGFpbjtcbiAgICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICAgIHotaW5kZXg6IDEwO1xuXG4gICAgICAke3Byb3BzLmlzSGlnaGxpZ2h0ZWQgPyAnb3BhY2l0eTogMC43OycgOiAnJ31cbiAgICBgfVxuICAgIHNyYz17Y3JlYXRlR3JhdmF0YXJJbWdVcmwocHJvcHMuZ3JhdmF0YXJIYXNoLCBwcm9wcy5zaXplKX1cbiAgICBzcmNTZXQ9e1tcbiAgICAgIGAke2NyZWF0ZUdyYXZhdGFySW1nVXJsKHByb3BzLmdyYXZhdGFySGFzaCwgcHJvcHMuc2l6ZSl9IDF4YCxcbiAgICAgIGAke2NyZWF0ZUdyYXZhdGFySW1nVXJsKHByb3BzLmdyYXZhdGFySGFzaCwgcHJvcHMuc2l6ZSwgMil9IDJ4YCxcbiAgICBdLmpvaW4oJywnKX1cbiAgICAvKipcbiAgICAgKiBCYXNlZCBvbiBodHRwczovL3d3dy53My5vcmcvV0FJL3R1dG9yaWFscy9pbWFnZXMvZGVjaXNpb24tdHJlZS86XG4gICAgICogaW1hZ2UgY29udHJpYnV0ZXMgbWVhbmluZyB0byB0aGUgY3VycmVudCBwYWdlIG9yIGNvbnRleHQgYW5kIGl0IHNob3dzIGNvbnRlbnQgdGhhdCBpcyByZWR1bmRhbnQgdG8gcmVhbCB0ZXh0IG5lYXJieVxuICAgICAqL1xuICAgIGFsdD1cIlwiXG4gIC8+XG4pO1xuR3JhdmF0YXJJbWcuZGlzcGxheU5hbWUgPSAnR3JhdmF0YXJJbWcnO1xuXG5jb25zdCBJbml0aWFscyA9IChwcm9wczogVEluaXRpYWxzUHJvcHMpID0+IHtcbiAgY29uc3QgaW5pdGlhbHNGcm9tTmFtZSA9IGdldEluaXRpYWxzRnJvbU5hbWUoe1xuICAgIGZpcnN0TmFtZTogcHJvcHMuZmlyc3ROYW1lLFxuICAgIGxhc3ROYW1lOiBwcm9wcy5sYXN0TmFtZSxcbiAgfSk7XG4gIHJldHVybiAoXG4gICAgPGRpdlxuICAgICAgY3NzPXtjc3NgXG4gICAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICAgICAgZm9udC1zaXplOiAke2dldEZvbnRTaXplKGluaXRpYWxzRnJvbU5hbWUsIHByb3BzLnNpemUpfTtcbiAgICAgIGB9XG4gICAgPlxuICAgICAge2luaXRpYWxzRnJvbU5hbWV9XG4gICAgPC9kaXY+XG4gICk7XG59O1xuSW5pdGlhbHMuZGlzcGxheU5hbWUgPSAnSW5pdGlhbHMnO1xuXG5jb25zdCBBdmF0YXIgPSAocHJvcHM6IFRBdmF0YXJQcm9wcykgPT4ge1xuICBjb25zdCBhdmF0YXJTaXplID0gZ2V0V2lkdGhTaXplKHByb3BzLnNpemUpO1xuICBjb25zdCBmb3JlZ3JvdW5kQ29sb3IgPSBnZXRGb3JlZ3JvdW5kQ29sb3IocHJvcHMuY29sb3IpO1xuICByZXR1cm4gKFxuICAgIDxkaXYgY3NzPXtnZXRBdmF0YXJTdHlsZXMocHJvcHMpfSB7Li4uZmlsdGVyRGF0YUF0dHJpYnV0ZXMocHJvcHMpfT5cbiAgICAgIHtwcm9wcz8uaWNvbiA/IChcbiAgICAgICAgPGRpdlxuICAgICAgICAgIGNzcz17Y3NzYFxuICAgICAgICAgICAgaGVpZ2h0OiBjYWxjKCR7YXZhdGFyU2l6ZX0gLSA0NSUpO1xuICAgICAgICAgICAgd2lkdGg6IGNhbGMoJHthdmF0YXJTaXplfSAtIDQ1JSk7XG4gICAgICAgICAgYH1cbiAgICAgICAgPlxuICAgICAgICAgIHtjbG9uZUVsZW1lbnQocHJvcHM/Lmljb24sIHtcbiAgICAgICAgICAgIHNpemU6ICdzY2FsZScsXG4gICAgICAgICAgICBjb2xvcjogZm9yZWdyb3VuZENvbG9yLFxuICAgICAgICAgICAgYmFja2dyb3VuZGNvbG9yOiBmb3JlZ3JvdW5kQ29sb3IsXG4gICAgICAgICAgfSl9XG4gICAgICAgIDwvZGl2PlxuICAgICAgKSA6IChcbiAgICAgICAgPD5cbiAgICAgICAgICA8R3JhdmF0YXJJbWdcbiAgICAgICAgICAgIGdyYXZhdGFySGFzaD17cHJvcHMuZ3JhdmF0YXJIYXNofVxuICAgICAgICAgICAgc2l6ZT17cHJvcHMuc2l6ZX1cbiAgICAgICAgICAgIGlzSGlnaGxpZ2h0ZWQ9e3Byb3BzLmlzSGlnaGxpZ2h0ZWR9XG4gICAgICAgICAgLz5cbiAgICAgICAgICA8SW5pdGlhbHNcbiAgICAgICAgICAgIHNpemU9e3Byb3BzLnNpemV9XG4gICAgICAgICAgICBmaXJzdE5hbWU9e3Byb3BzLmZpcnN0TmFtZX1cbiAgICAgICAgICAgIGxhc3ROYW1lPXtwcm9wcy5sYXN0TmFtZX1cbiAgICAgICAgICAvPlxuICAgICAgICA8Lz5cbiAgICAgICl9XG4gICAgPC9kaXY+XG4gICk7XG59O1xuQXZhdGFyLmRpc3BsYXlOYW1lID0gJ0F2YXRhcic7XG5BdmF0YXIuZGVmYXVsdFByb3BzID0gZGVmYXVsdFByb3BzO1xuXG5leHBvcnQgZGVmYXVsdCBBdmF0YXI7XG4iXX0= */"),
+      children: /*#__PURE__*/react$1.cloneElement(props === null || props === void 0 ? void 0 : props.icon, {
+        size: 'scale',
+        color: foregroundColor,
+        backgroundcolor: foregroundColor
+      })
+    }) : jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [jsxRuntime.jsx(GravatarImg, {
+        gravatarHash: props.gravatarHash,
+        size: props.size,
+        isHighlighted: props.isHighlighted
+      }), jsxRuntime.jsx(Initials, {
+        size: props.size,
+        firstName: props.firstName,
+        lastName: props.lastName
+      })]
+    })
+  }));
+};
+Avatar.propTypes = process.env.NODE_ENV !== "production" ? {
+  firstName: _pt__default["default"].string,
+  lastName: _pt__default["default"].string,
+  gravatarHash: _pt__default["default"].string.isRequired,
+  isHighlighted: _pt__default["default"].bool,
+  size: _pt__default["default"].oneOf(['s', 'm', 'l']).isRequired,
+  color: _pt__default["default"].oneOf(['accent', 'purple', 'turquoise', 'brown']),
+  icon: _pt__default["default"].element
+} : {};
 Avatar.displayName = 'Avatar';
 Avatar.defaultProps = defaultProps;
 var Avatar$1 = Avatar;
 // NOTE: This string will be replaced on build time with the package version.
-var version = "16.7.5";
+var version = "16.9.0";
 exports["default"] = Avatar$1;
 exports.version = version;

package/dist/commercetools-uikit-avatar.cjs.prod.js CHANGED Viewed

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
+require('prop-types');
 var _sliceInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/slice');
 var _trimInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/trim');
 var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
@@ -15,9 +16,11 @@ var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/in
 var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors');
 var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
 var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
+var react$1 = require('react');
 var react = require('@emotion/react');
-var designSystem = require('@commercetools-uikit/design-system');
 var utils = require('@commercetools-uikit/utils');
+var designSystem = require('@commercetools-uikit/design-system');
+var startCase = require('lodash/startCase');
 var jsxRuntime = require('@emotion/react/jsx-runtime');
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
@@ -34,28 +37,73 @@ var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachIns
 var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
 var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
 var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
+var startCase__default = /*#__PURE__*/_interopDefault(startCase);
-function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context4, _context5; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context4 = ownKeys(Object(source), !0)).call(_context4, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context5 = ownKeys(Object(source))).call(_context5, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
-const avatarSizes = {
+const fontSizeMap = {
   s: {
-    width: '26px',
-    fontSize: designSystem.designTokens.fontSizeForAvatarAsSmall
+    narrow: designSystem.designTokens.fontSize30,
+    wide: designSystem.designTokens.fontSize10
   },
   m: {
-    width: designSystem.designTokens.widthForAvatarAsMedium,
-    fontSize: designSystem.designTokens.fontSizeForAvatarAsMedium
+    narrow: designSystem.designTokens.fontSize50,
+    wide: designSystem.designTokens.fontSize30
   },
   l: {
-    width: '100px',
-    fontSize: designSystem.designTokens.fontSizeForAvatarAsBig
+    narrow: designSystem.designTokens.fontSize90,
+    wide: designSystem.designTokens.fontSize80
+  }
+};
+const widthSizeMap = {
+  s: '32px',
+  m: '40px',
+  l: '100px'
+};
+const colorsMap = {
+  accent: {
+    normal: designSystem.designTokens.colorAccent90,
+    highlighted: designSystem.designTokens.colorAccent95
+  },
+  purple: {
+    normal: designSystem.designTokens.colorPurple90,
+    highlighted: designSystem.designTokens.colorPurple95
+  },
+  turquoise: {
+    normal: designSystem.designTokens.colorTurquoise90,
+    highlighted: designSystem.designTokens.colorTurquoise95
+  },
+  brown: {
+    normal: designSystem.designTokens.colorBrown90,
+    highlighted: designSystem.designTokens.colorBrown95
   }
 };
+const getFontSize = (avatarInitials, avatarSize) => {
+  const widthCode = avatarInitials.length > 1 ? 'wide' : 'narrow';
+  return fontSizeMap[avatarSize][widthCode];
+};
+const getWidthSize = avatarSize => widthSizeMap[avatarSize];
+const getBackgroundColor = function () {
+  let avatarColor = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'accent';
+  let isHighlighted = arguments.length > 1 ? arguments[1] : undefined;
+  return colorsMap[avatarColor][isHighlighted ? 'highlighted' : 'normal'];
+};
+const getForegroundColor = avatarColor => {
+  return avatarColor === 'accent' ? designSystem.designTokens.colorAccent40 : designSystem.designTokens["color".concat(startCase__default["default"](avatarColor), "50")];
+};
+const getAvatarStyles = avatarProps => {
+  const avatarSize = getWidthSize(avatarProps.size);
+  const backgroundColor = getBackgroundColor(avatarProps.color, avatarProps.isHighlighted);
+  const foregroundColor = getForegroundColor(avatarProps.color);
+  return /*#__PURE__*/react.css("align-items:center;background-color:", backgroundColor, ";border-radius:100%;font-size:", designSystem.designTokens.fontSizeDefault, ";font-weight:", designSystem.designTokens.fontWeight600, ";color:", foregroundColor, ";display:flex;justify-content:center;overflow:hidden;position:relative;fill:", foregroundColor, ";height:", avatarSize, ";width:", avatarSize, ";" + ("" ), "" );
+};
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context4, _context5; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context4 = ownKeys(Object(source), !0)).call(_context4, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context5 = ownKeys(Object(source))).call(_context5, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
 const defaultProps = {
   firstName: '',
   lastName: '',
   isHighlighted: false,
-  size: 's'
+  size: 's',
+  color: 'accent'
 };
 const getFirstChar = str => {
   var _context;
@@ -69,7 +117,6 @@ const getInitialsFromName = _ref => {
     lastName = _ref$lastName === void 0 ? '' : _ref$lastName;
   return _concatInstanceProperty__default["default"](_context2 = "".concat(getFirstChar(firstName))).call(_context2, getFirstChar(lastName));
 };
 /**
  * `s` - defines the size. We want a bigger one if the user is on a retina-display
  * `d` - defines the default if the user is not known to Gravatar. It returns a blank image,
@@ -80,7 +127,8 @@ const getInitialsFromName = _ref => {
 const createGravatarImgUrl = function (md5Hash, size) {
   var _context3;
   let multiplyBy = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
-  const sizeAsInt = _parseInt__default["default"](avatarSizes[size].width.replace(/px$/, ''), 10);
+  const imageSize = getWidthSize(size);
+  const sizeAsInt = _parseInt__default["default"](imageSize.replace(/px$/, ''), 10);
   const gravatarSize = sizeAsInt * multiplyBy;
   return _concatInstanceProperty__default["default"](_context3 = "https://www.gravatar.com/avatar/".concat(md5Hash, "?s=")).call(_context3, gravatarSize, "&d=blank");
 };
@@ -95,33 +143,50 @@ const GravatarImg = props => jsxRuntime.jsx("img", {
   alt: ""
 });
 GravatarImg.displayName = 'GravatarImg';
-const Initials = props => jsxRuntime.jsx("div", {
-  css: /*#__PURE__*/react.css("position:absolute;font-size:", avatarSizes[props.size].fontSize, ";" + ("" ), "" ),
-  children: getInitialsFromName({
+const Initials = props => {
+  const initialsFromName = getInitialsFromName({
     firstName: props.firstName,
     lastName: props.lastName
-  })
-});
+  });
+  return jsxRuntime.jsx("div", {
+    css: /*#__PURE__*/react.css("position:absolute;font-size:", getFontSize(initialsFromName, props.size), ";" + ("" ), "" ),
+    children: initialsFromName
+  });
+};
 Initials.displayName = 'Initials';
-const Avatar = props => jsxRuntime.jsxs("div", _objectSpread(_objectSpread({
-  css: /*#__PURE__*/react.css("align-items:center;background-color:", designSystem.designTokens.backgroundColorForAvatar, ";border-radius:100%;font-size:", designSystem.designTokens.fontSizeDefault, ";color:", designSystem.designTokens.colorSurface, ";display:flex;justify-content:center;overflow:hidden;position:relative;height:", avatarSizes[props.size].width, ";width:", avatarSizes[props.size].width, ";", props.isHighlighted ? "background-color: ".concat(designSystem.designTokens.backgroundColorForAvatarWhenHighlighted, ";") : '', ";" + ("" ), "" )
-}, utils.filterDataAttributes(props)), {}, {
-  children: [jsxRuntime.jsx(GravatarImg, {
-    gravatarHash: props.gravatarHash,
-    size: props.size,
-    isHighlighted: props.isHighlighted
-  }), jsxRuntime.jsx(Initials, {
-    size: props.size,
-    firstName: props.firstName,
-    lastName: props.lastName
-  })]
-}));
+const Avatar = props => {
+  const avatarSize = getWidthSize(props.size);
+  const foregroundColor = getForegroundColor(props.color);
+  return jsxRuntime.jsx("div", _objectSpread(_objectSpread({
+    css: getAvatarStyles(props)
+  }, utils.filterDataAttributes(props)), {}, {
+    children: props !== null && props !== void 0 && props.icon ? jsxRuntime.jsx("div", {
+      css: /*#__PURE__*/react.css("height:calc(", avatarSize, " - 45%);width:calc(", avatarSize, " - 45%);" + ("" ), "" ),
+      children: /*#__PURE__*/react$1.cloneElement(props === null || props === void 0 ? void 0 : props.icon, {
+        size: 'scale',
+        color: foregroundColor,
+        backgroundcolor: foregroundColor
+      })
+    }) : jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [jsxRuntime.jsx(GravatarImg, {
+        gravatarHash: props.gravatarHash,
+        size: props.size,
+        isHighlighted: props.isHighlighted
+      }), jsxRuntime.jsx(Initials, {
+        size: props.size,
+        firstName: props.firstName,
+        lastName: props.lastName
+      })]
+    })
+  }));
+};
+Avatar.propTypes = {};
 Avatar.displayName = 'Avatar';
 Avatar.defaultProps = defaultProps;
 var Avatar$1 = Avatar;
 // NOTE: This string will be replaced on build time with the package version.
-var version = "16.7.5";
+var version = "16.9.0";
 exports["default"] = Avatar$1;
 exports.version = version;

package/dist/commercetools-uikit-avatar.esm.js CHANGED Viewed

@@ -1,4 +1,5 @@
 import _defineProperty from '@babel/runtime-corejs3/helpers/esm/defineProperty';
+import _pt from 'prop-types';
 import _sliceInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/slice';
 import _trimInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/trim';
 import _concatInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/concat';
@@ -11,32 +12,78 @@ import _forEachInstanceProperty from '@babel/runtime-corejs3/core-js-stable/inst
 import _Object$getOwnPropertyDescriptors from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors';
 import _Object$defineProperties from '@babel/runtime-corejs3/core-js-stable/object/define-properties';
 import _Object$defineProperty from '@babel/runtime-corejs3/core-js-stable/object/define-property';
+import { cloneElement } from 'react';
 import { css } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
 import { filterDataAttributes } from '@commercetools-uikit/utils';
-import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import { designTokens } from '@commercetools-uikit/design-system';
+import startCase from 'lodash/startCase';
+import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
-function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context4, _context5; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context4 = ownKeys(Object(source), !0)).call(_context4, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context5 = ownKeys(Object(source))).call(_context5, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-const avatarSizes = {
+const fontSizeMap = {
   s: {
-    width: '26px',
-    fontSize: designTokens.fontSizeForAvatarAsSmall
+    narrow: designTokens.fontSize30,
+    wide: designTokens.fontSize10
   },
   m: {
-    width: designTokens.widthForAvatarAsMedium,
-    fontSize: designTokens.fontSizeForAvatarAsMedium
+    narrow: designTokens.fontSize50,
+    wide: designTokens.fontSize30
   },
   l: {
-    width: '100px',
-    fontSize: designTokens.fontSizeForAvatarAsBig
+    narrow: designTokens.fontSize90,
+    wide: designTokens.fontSize80
+  }
+};
+const widthSizeMap = {
+  s: '32px',
+  m: '40px',
+  l: '100px'
+};
+const colorsMap = {
+  accent: {
+    normal: designTokens.colorAccent90,
+    highlighted: designTokens.colorAccent95
+  },
+  purple: {
+    normal: designTokens.colorPurple90,
+    highlighted: designTokens.colorPurple95
+  },
+  turquoise: {
+    normal: designTokens.colorTurquoise90,
+    highlighted: designTokens.colorTurquoise95
+  },
+  brown: {
+    normal: designTokens.colorBrown90,
+    highlighted: designTokens.colorBrown95
   }
 };
+const getFontSize = (avatarInitials, avatarSize) => {
+  const widthCode = avatarInitials.length > 1 ? 'wide' : 'narrow';
+  return fontSizeMap[avatarSize][widthCode];
+};
+const getWidthSize = avatarSize => widthSizeMap[avatarSize];
+const getBackgroundColor = function () {
+  let avatarColor = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'accent';
+  let isHighlighted = arguments.length > 1 ? arguments[1] : undefined;
+  return colorsMap[avatarColor][isHighlighted ? 'highlighted' : 'normal'];
+};
+const getForegroundColor = avatarColor => {
+  return avatarColor === 'accent' ? designTokens.colorAccent40 : designTokens["color".concat(startCase(avatarColor), "50")];
+};
+const getAvatarStyles = avatarProps => {
+  const avatarSize = getWidthSize(avatarProps.size);
+  const backgroundColor = getBackgroundColor(avatarProps.color, avatarProps.isHighlighted);
+  const foregroundColor = getForegroundColor(avatarProps.color);
+  return /*#__PURE__*/css("align-items:center;background-color:", backgroundColor, ";border-radius:100%;font-size:", designTokens.fontSizeDefault, ";font-weight:", designTokens.fontWeight600, ";color:", foregroundColor, ";display:flex;justify-content:center;overflow:hidden;position:relative;fill:", foregroundColor, ";height:", avatarSize, ";width:", avatarSize, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:getAvatarStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImF2YXRhci5zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBNEVZIiwiZmlsZSI6ImF2YXRhci5zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBkZXNpZ25Ub2tlbnMgfSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9kZXNpZ24tc3lzdGVtJztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCBzdGFydENhc2UgZnJvbSAnbG9kYXNoL3N0YXJ0Q2FzZSc7XG5pbXBvcnQgeyBUQXZhdGFyUHJvcHMgfSBmcm9tICcuL2F2YXRhcic7XG5cbmNvbnN0IGZvbnRTaXplTWFwID0ge1xuICBzOiB7XG4gICAgbmFycm93OiBkZXNpZ25Ub2tlbnMuZm9udFNpemUzMCxcbiAgICB3aWRlOiBkZXNpZ25Ub2tlbnMuZm9udFNpemUxMCxcbiAgfSxcbiAgbToge1xuICAgIG5hcnJvdzogZGVzaWduVG9rZW5zLmZvbnRTaXplNTAsXG4gICAgd2lkZTogZGVzaWduVG9rZW5zLmZvbnRTaXplMzAsXG4gIH0sXG4gIGw6IHtcbiAgICBuYXJyb3c6IGRlc2lnblRva2Vucy5mb250U2l6ZTkwLFxuICAgIHdpZGU6IGRlc2lnblRva2Vucy5mb250U2l6ZTgwLFxuICB9LFxufTtcblxuY29uc3Qgd2lkdGhTaXplTWFwID0ge1xuICBzOiAnMzJweCcsXG4gIG06ICc0MHB4JyxcbiAgbDogJzEwMHB4Jyxcbn07XG5cbmNvbnN0IGNvbG9yc01hcCA9IHtcbiAgYWNjZW50OiB7XG4gICAgbm9ybWFsOiBkZXNpZ25Ub2tlbnMuY29sb3JBY2NlbnQ5MCxcbiAgICBoaWdobGlnaHRlZDogZGVzaWduVG9rZW5zLmNvbG9yQWNjZW50OTUsXG4gIH0sXG4gIHB1cnBsZToge1xuICAgIG5vcm1hbDogZGVzaWduVG9rZW5zLmNvbG9yUHVycGxlOTAsXG4gICAgaGlnaGxpZ2h0ZWQ6IGRlc2lnblRva2Vucy5jb2xvclB1cnBsZTk1LFxuICB9LFxuICB0dXJxdW9pc2U6IHtcbiAgICBub3JtYWw6IGRlc2lnblRva2Vucy5jb2xvclR1cnF1b2lzZTkwLFxuICAgIGhpZ2hsaWdodGVkOiBkZXNpZ25Ub2tlbnMuY29sb3JUdXJxdW9pc2U5NSxcbiAgfSxcbiAgYnJvd246IHtcbiAgICBub3JtYWw6IGRlc2lnblRva2Vucy5jb2xvckJyb3duOTAsXG4gICAgaGlnaGxpZ2h0ZWQ6IGRlc2lnblRva2Vucy5jb2xvckJyb3duOTUsXG4gIH0sXG59O1xuXG5leHBvcnQgY29uc3QgZ2V0Rm9udFNpemUgPSAoXG4gIGF2YXRhckluaXRpYWxzOiBzdHJpbmcsXG4gIGF2YXRhclNpemU6IFRBdmF0YXJQcm9wc1snc2l6ZSddXG4pID0+IHtcbiAgY29uc3Qgd2lkdGhDb2RlID0gYXZhdGFySW5pdGlhbHMubGVuZ3RoID4gMSA/ICd3aWRlJyA6ICduYXJyb3cnO1xuICByZXR1cm4gZm9udFNpemVNYXBbYXZhdGFyU2l6ZV1bd2lkdGhDb2RlXTtcbn07XG5cbmV4cG9ydCBjb25zdCBnZXRXaWR0aFNpemUgPSAoYXZhdGFyU2l6ZTogVEF2YXRhclByb3BzWydzaXplJ10pID0+XG4gIHdpZHRoU2l6ZU1hcFthdmF0YXJTaXplXTtcblxuZXhwb3J0IGNvbnN0IGdldEJhY2tncm91bmRDb2xvciA9IChcbiAgYXZhdGFyQ29sb3I6IFRBdmF0YXJQcm9wc1snY29sb3InXSA9ICdhY2NlbnQnLFxuICBpc0hpZ2hsaWdodGVkOiBUQXZhdGFyUHJvcHNbJ2lzSGlnaGxpZ2h0ZWQnXVxuKSA9PiBjb2xvcnNNYXBbYXZhdGFyQ29sb3JdW2lzSGlnaGxpZ2h0ZWQgPyAnaGlnaGxpZ2h0ZWQnIDogJ25vcm1hbCddO1xuXG5leHBvcnQgY29uc3QgZ2V0Rm9yZWdyb3VuZENvbG9yID0gKGF2YXRhckNvbG9yOiBUQXZhdGFyUHJvcHNbJ2NvbG9yJ10pID0+IHtcbiAgcmV0dXJuIGF2YXRhckNvbG9yID09PSAnYWNjZW50J1xuICAgID8gZGVzaWduVG9rZW5zLmNvbG9yQWNjZW50NDBcbiAgICA6IGRlc2lnblRva2Vuc1tcbiAgICAgICAgYGNvbG9yJHtzdGFydENhc2UoYXZhdGFyQ29sb3IpfTUwYCBhcyBrZXlvZiB0eXBlb2YgZGVzaWduVG9rZW5zXG4gICAgICBdO1xufTtcblxuZXhwb3J0IGNvbnN0IGdldEF2YXRhclN0eWxlcyA9IChhdmF0YXJQcm9wczogVEF2YXRhclByb3BzKSA9PiB7XG4gIGNvbnN0IGF2YXRhclNpemUgPSBnZXRXaWR0aFNpemUoYXZhdGFyUHJvcHMuc2l6ZSk7XG4gIGNvbnN0IGJhY2tncm91bmRDb2xvciA9IGdldEJhY2tncm91bmRDb2xvcihcbiAgICBhdmF0YXJQcm9wcy5jb2xvcixcbiAgICBhdmF0YXJQcm9wcy5pc0hpZ2hsaWdodGVkXG4gICk7XG4gIGNvbnN0IGZvcmVncm91bmRDb2xvciA9IGdldEZvcmVncm91bmRDb2xvcihhdmF0YXJQcm9wcy5jb2xvcik7XG4gIHJldHVybiBjc3NgXG4gICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke2JhY2tncm91bmRDb2xvcn07XG4gICAgYm9yZGVyLXJhZGl1czogMTAwJTtcbiAgICBmb250LXNpemU6ICR7ZGVzaWduVG9rZW5zLmZvbnRTaXplRGVmYXVsdH07XG4gICAgZm9udC13ZWlnaHQ6ICR7ZGVzaWduVG9rZW5zLmZvbnRXZWlnaHQ2MDB9O1xuICAgIGNvbG9yOiAke2ZvcmVncm91bmRDb2xvcn07XG4gICAgZGlzcGxheTogZmxleDtcbiAgICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgICBvdmVyZmxvdzogaGlkZGVuO1xuICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICBmaWxsOiAke2ZvcmVncm91bmRDb2xvcn07XG5cbiAgICBoZWlnaHQ6ICR7YXZhdGFyU2l6ZX07XG4gICAgd2lkdGg6ICR7YXZhdGFyU2l6ZX07XG4gIGA7XG59O1xuIl19 */");
+};
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context4, _context5; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context4 = ownKeys(Object(source), !0)).call(_context4, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context5 = ownKeys(Object(source))).call(_context5, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 const defaultProps = {
   firstName: '',
   lastName: '',
   isHighlighted: false,
-  size: 's'
+  size: 's',
+  color: 'accent'
 };
 const getFirstChar = str => {
   var _context;
@@ -50,7 +97,6 @@ const getInitialsFromName = _ref => {
     lastName = _ref$lastName === void 0 ? '' : _ref$lastName;
   return _concatInstanceProperty(_context2 = "".concat(getFirstChar(firstName))).call(_context2, getFirstChar(lastName));
 };
 /**
  * `s` - defines the size. We want a bigger one if the user is on a retina-display
  * `d` - defines the default if the user is not known to Gravatar. It returns a blank image,
@@ -61,12 +107,13 @@ const getInitialsFromName = _ref => {
 const createGravatarImgUrl = function (md5Hash, size) {
   var _context3;
   let multiplyBy = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
-  const sizeAsInt = _parseInt(avatarSizes[size].width.replace(/px$/, ''), 10);
+  const imageSize = getWidthSize(size);
+  const sizeAsInt = _parseInt(imageSize.replace(/px$/, ''), 10);
   const gravatarSize = sizeAsInt * multiplyBy;
   return _concatInstanceProperty(_context3 = "https://www.gravatar.com/avatar/".concat(md5Hash, "?s=")).call(_context3, gravatarSize, "&d=blank");
 };
 const GravatarImg = props => jsx("img", {
-  css: /*#__PURE__*/css("background-position:center center;background-size:contain;position:relative;z-index:10;", props.isHighlighted ? 'opacity: 0.7;' : '', ";" + (process.env.NODE_ENV === "production" ? "" : ";label:GravatarImg;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImF2YXRhci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBMEZZIiwiZmlsZSI6ImF2YXRhci50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgeyBkZXNpZ25Ub2tlbnMgfSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9kZXNpZ24tc3lzdGVtJztcbmltcG9ydCB7IGZpbHRlckRhdGFBdHRyaWJ1dGVzIH0gZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvdXRpbHMnO1xuXG5leHBvcnQgdHlwZSBUQXZhdGFyUHJvcHMgPSB7XG4gIC8qKlxuICAgKiBUaGUgZmlyc3QgbmFtZSBvZiB0aGUgdXNlci5cbiAgICovXG4gIGZpcnN0TmFtZT86IHN0cmluZztcbiAgLyoqXG4gICAqIFRoZSBsYXN0IG5hbWUgb2YgdGhlIHVzZXIuXG4gICAqL1xuICBsYXN0TmFtZT86IHN0cmluZztcbiAgLyoqXG4gICAqIFRoZSBoYXNoZWQgc3RyaW5nIG9mIHRoZSB1c2VyIGdyYXZhdGFyLlxuICAgKi9cbiAgZ3JhdmF0YXJIYXNoOiBzdHJpbmc7XG4gIC8qKlxuICAgKiBFbmhhbmNlcyB0aGUgYXBwZWFyYW5jZSBvZiB0aGUgYXZhdGFyLlxuICAgKi9cbiAgaXNIaWdobGlnaHRlZD86IGJvb2xlYW47XG4gIC8qKlxuICAgKiBUaGUgc2l6ZSBvZiB0aGUgcmVuZGVyZWQgYXZhdGFyLlxuICAgKi9cbiAgc2l6ZTogJ3MnIHwgJ20nIHwgJ2wnO1xufTtcblxuZXhwb3J0IHR5cGUgVEdyYXZhdGFySW1nUHJvcHMgPSBQaWNrPFxuICBUQXZhdGFyUHJvcHMsXG4gICdncmF2YXRhckhhc2gnIHwgJ2lzSGlnaGxpZ2h0ZWQnIHwgJ3NpemUnXG4+O1xuXG5leHBvcnQgdHlwZSBUSW5pdGlhbHNQcm9wcyA9IFBpY2s8XG4gIFRBdmF0YXJQcm9wcyxcbiAgJ2ZpcnN0TmFtZScgfCAnbGFzdE5hbWUnIHwgJ3NpemUnXG4+O1xuXG5jb25zdCBhdmF0YXJTaXplcyA9IHtcbiAgczoge1xuICAgIHdpZHRoOiAnMjZweCcsXG4gICAgZm9udFNpemU6IGRlc2lnblRva2Vucy5mb250U2l6ZUZvckF2YXRhckFzU21hbGwsXG4gIH0sXG4gIG06IHtcbiAgICB3aWR0aDogZGVzaWduVG9rZW5zLndpZHRoRm9yQXZhdGFyQXNNZWRpdW0sXG4gICAgZm9udFNpemU6IGRlc2lnblRva2Vucy5mb250U2l6ZUZvckF2YXRhckFzTWVkaXVtLFxuICB9LFxuICBsOiB7XG4gICAgd2lkdGg6ICcxMDBweCcsXG4gICAgZm9udFNpemU6IGRlc2lnblRva2Vucy5mb250U2l6ZUZvckF2YXRhckFzQmlnLFxuICB9LFxufTtcblxuY29uc3QgZGVmYXVsdFByb3BzOiBQaWNrPFxuICBUQXZhdGFyUHJvcHMsXG4gICdmaXJzdE5hbWUnIHwgJ2xhc3ROYW1lJyB8ICdpc0hpZ2hsaWdodGVkJyB8ICdzaXplJ1xuPiA9IHtcbiAgZmlyc3ROYW1lOiAnJyxcbiAgbGFzdE5hbWU6ICcnLFxuICBpc0hpZ2hsaWdodGVkOiBmYWxzZSxcbiAgc2l6ZTogJ3MnLFxufTtcblxuY29uc3QgZ2V0Rmlyc3RDaGFyID0gKHN0cjogc3RyaW5nKSA9PlxuICB0eXBlb2Ygc3RyID09PSAnc3RyaW5nJyA/IHN0ci50cmltKCkuc2xpY2UoMCwgMSkudG9VcHBlckNhc2UoKSA6ICcnO1xuXG5jb25zdCBnZXRJbml0aWFsc0Zyb21OYW1lID0gKHtcbiAgZmlyc3ROYW1lID0gJycsXG4gIGxhc3ROYW1lID0gJycsXG59OiBQaWNrPFRBdmF0YXJQcm9wcywgJ2ZpcnN0TmFtZScgfCAnbGFzdE5hbWUnPikgPT5cbiAgYCR7Z2V0Rmlyc3RDaGFyKGZpcnN0TmFtZSl9JHtnZXRGaXJzdENoYXIobGFzdE5hbWUpfWA7XG5cbi8qKlxuICogYHNgIC0gZGVmaW5lcyB0aGUgc2l6ZS4gV2Ugd2FudCBhIGJpZ2dlciBvbmUgaWYgdGhlIHVzZXIgaXMgb24gYSByZXRpbmEtZGlzcGxheVxuICogYGRgIC0gZGVmaW5lcyB0aGUgZGVmYXVsdCBpZiB0aGUgdXNlciBpcyBub3Qga25vd24gdG8gR3JhdmF0YXIuIEl0IHJldHVybnMgYSBibGFuayBpbWFnZSxcbiAqICAgICAgICB3aGljaCBsZXQgdGhlIGluaXRpYWxzIHVuZGVybmVhdGggc2hpbmUgdGhyb3VnaFxuICpcbiAqIEBzZWU6IGh0dHBzOi8vZGUuZ3JhdmF0YXIuY29tL3NpdGUvaW1wbGVtZW50L2ltYWdlcy9cbiAqL1xuY29uc3QgY3JlYXRlR3JhdmF0YXJJbWdVcmwgPSAoXG4gIG1kNUhhc2g6IFRBdmF0YXJQcm9wc1snZ3JhdmF0YXJIYXNoJ10sXG4gIHNpemU6IFRBdmF0YXJQcm9wc1snc2l6ZSddLFxuICBtdWx0aXBseUJ5OiBudW1iZXIgPSAxXG4pID0+IHtcbiAgY29uc3Qgc2l6ZUFzSW50ID0gcGFyc2VJbnQoYXZhdGFyU2l6ZXNbc2l6ZV0ud2lkdGgucmVwbGFjZSgvcHgkLywgJycpLCAxMCk7XG4gIGNvbnN0IGdyYXZhdGFyU2l6ZSA9IHNpemVBc0ludCAqIG11bHRpcGx5Qnk7XG4gIHJldHVybiBgaHR0cHM6Ly93d3cuZ3JhdmF0YXIuY29tL2F2YXRhci8ke21kNUhhc2h9P3M9JHtncmF2YXRhclNpemV9JmQ9YmxhbmtgO1xufTtcblxuY29uc3QgR3JhdmF0YXJJbWcgPSAocHJvcHM6IFRHcmF2YXRhckltZ1Byb3BzKSA9PiAoXG4gIDxpbWdcbiAgICBjc3M9e2Nzc2BcbiAgICAgIGJhY2tncm91bmQtcG9zaXRpb246IGNlbnRlciBjZW50ZXI7XG4gICAgICBiYWNrZ3JvdW5kLXNpemU6IGNvbnRhaW47XG4gICAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gICAgICB6LWluZGV4OiAxMDtcblxuICAgICAgJHtwcm9wcy5pc0hpZ2hsaWdodGVkID8gJ29wYWNpdHk6IDAuNzsnIDogJyd9XG4gICAgYH1cbiAgICBzcmM9e2NyZWF0ZUdyYXZhdGFySW1nVXJsKHByb3BzLmdyYXZhdGFySGFzaCwgcHJvcHMuc2l6ZSl9XG4gICAgc3JjU2V0PXtbXG4gICAgICBgJHtjcmVhdGVHcmF2YXRhckltZ1VybChwcm9wcy5ncmF2YXRhckhhc2gsIHByb3BzLnNpemUpfSAxeGAsXG4gICAgICBgJHtjcmVhdGVHcmF2YXRhckltZ1VybChwcm9wcy5ncmF2YXRhckhhc2gsIHByb3BzLnNpemUsIDIpfSAyeGAsXG4gICAgXS5qb2luKCcsJyl9XG4gICAgLyoqXG4gICAgICogQmFzZWQgb24gaHR0cHM6Ly93d3cudzMub3JnL1dBSS90dXRvcmlhbHMvaW1hZ2VzL2RlY2lzaW9uLXRyZWUvOlxuICAgICAqIGltYWdlIGNvbnRyaWJ1dGVzIG1lYW5pbmcgdG8gdGhlIGN1cnJlbnQgcGFnZSBvciBjb250ZXh0IGFuZCBpdCBzaG93cyBjb250ZW50IHRoYXQgaXMgcmVkdW5kYW50IHRvIHJlYWwgdGV4dCBuZWFyYnlcbiAgICAgKi9cbiAgICBhbHQ9XCJcIlxuICAvPlxuKTtcbkdyYXZhdGFySW1nLmRpc3BsYXlOYW1lID0gJ0dyYXZhdGFySW1nJztcblxuY29uc3QgSW5pdGlhbHMgPSAocHJvcHM6IFRJbml0aWFsc1Byb3BzKSA9PiAoXG4gIDxkaXZcbiAgICBjc3M9e2Nzc2BcbiAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICAgIGZvbnQtc2l6ZTogJHthdmF0YXJTaXplc1twcm9wcy5zaXplXS5mb250U2l6ZX07XG4gICAgYH1cbiAgPlxuICAgIHtnZXRJbml0aWFsc0Zyb21OYW1lKHtcbiAgICAgIGZpcnN0TmFtZTogcHJvcHMuZmlyc3ROYW1lLFxuICAgICAgbGFzdE5hbWU6IHByb3BzLmxhc3ROYW1lLFxuICAgIH0pfVxuICA8L2Rpdj5cbik7XG5Jbml0aWFscy5kaXNwbGF5TmFtZSA9ICdJbml0aWFscyc7XG5cbmNvbnN0IEF2YXRhciA9IChwcm9wczogVEF2YXRhclByb3BzKSA9PiAoXG4gIDxkaXZcbiAgICBjc3M9e2Nzc2BcbiAgICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke2Rlc2lnblRva2Vucy5iYWNrZ3JvdW5kQ29sb3JGb3JBdmF0YXJ9O1xuICAgICAgYm9yZGVyLXJhZGl1czogMTAwJTtcbiAgICAgIGZvbnQtc2l6ZTogJHtkZXNpZ25Ub2tlbnMuZm9udFNpemVEZWZhdWx0fTtcbiAgICAgIGNvbG9yOiAke2Rlc2lnblRva2Vucy5jb2xvclN1cmZhY2V9O1xuICAgICAgZGlzcGxheTogZmxleDtcbiAgICAgIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICAgICAgb3ZlcmZsb3c6IGhpZGRlbjtcbiAgICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcblxuICAgICAgaGVpZ2h0OiAke2F2YXRhclNpemVzW3Byb3BzLnNpemVdLndpZHRofTtcbiAgICAgIHdpZHRoOiAke2F2YXRhclNpemVzW3Byb3BzLnNpemVdLndpZHRofTtcblxuICAgICAgJHtwcm9wcy5pc0hpZ2hsaWdodGVkXG4gICAgICAgID8gYGJhY2tncm91bmQtY29sb3I6ICR7ZGVzaWduVG9rZW5zLmJhY2tncm91bmRDb2xvckZvckF2YXRhcldoZW5IaWdobGlnaHRlZH07YFxuICAgICAgICA6ICcnfVxuICAgIGB9XG4gICAgey4uLmZpbHRlckRhdGFBdHRyaWJ1dGVzKHByb3BzKX1cbiAgPlxuICAgIDxHcmF2YXRhckltZ1xuICAgICAgZ3JhdmF0YXJIYXNoPXtwcm9wcy5ncmF2YXRhckhhc2h9XG4gICAgICBzaXplPXtwcm9wcy5zaXplfVxuICAgICAgaXNIaWdobGlnaHRlZD17cHJvcHMuaXNIaWdobGlnaHRlZH1cbiAgICAvPlxuICAgIDxJbml0aWFsc1xuICAgICAgc2l6ZT17cHJvcHMuc2l6ZX1cbiAgICAgIGZpcnN0TmFtZT17cHJvcHMuZmlyc3ROYW1lfVxuICAgICAgbGFzdE5hbWU9e3Byb3BzLmxhc3ROYW1lfVxuICAgIC8+XG4gIDwvZGl2PlxuKTtcblxuQXZhdGFyLmRpc3BsYXlOYW1lID0gJ0F2YXRhcic7XG5BdmF0YXIuZGVmYXVsdFByb3BzID0gZGVmYXVsdFByb3BzO1xuXG5leHBvcnQgZGVmYXVsdCBBdmF0YXI7XG4iXX0= */"),
+  css: /*#__PURE__*/css("background-position:center center;background-size:contain;position:relative;z-index:10;", props.isHighlighted ? 'opacity: 0.7;' : '', ";" + (process.env.NODE_ENV === "production" ? "" : ";label:GravatarImg;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImF2YXRhci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBeUZZIiwiZmlsZSI6ImF2YXRhci50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBSZWFjdEVsZW1lbnQsIGNsb25lRWxlbWVudCB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IGZpbHRlckRhdGFBdHRyaWJ1dGVzIH0gZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvdXRpbHMnO1xuaW1wb3J0IHtcbiAgZ2V0QXZhdGFyU3R5bGVzLFxuICBnZXRGb250U2l6ZSxcbiAgZ2V0Rm9yZWdyb3VuZENvbG9yLFxuICBnZXRXaWR0aFNpemUsXG59IGZyb20gJy4vYXZhdGFyLnN0eWxlcyc7XG5cbmV4cG9ydCB0eXBlIFRBdmF0YXJQcm9wcyA9IHtcbiAgLyoqXG4gICAqIFRoZSBmaXJzdCBuYW1lIG9mIHRoZSB1c2VyLlxuICAgKi9cbiAgZmlyc3ROYW1lPzogc3RyaW5nO1xuICAvKipcbiAgICogVGhlIGxhc3QgbmFtZSBvZiB0aGUgdXNlci5cbiAgICovXG4gIGxhc3ROYW1lPzogc3RyaW5nO1xuICAvKipcbiAgICogVGhlIGhhc2hlZCBzdHJpbmcgb2YgdGhlIHVzZXIgZ3JhdmF0YXIuXG4gICAqL1xuICBncmF2YXRhckhhc2g6IHN0cmluZztcbiAgLyoqXG4gICAqIEVuaGFuY2VzIHRoZSBhcHBlYXJhbmNlIG9mIHRoZSBhdmF0YXIuXG4gICAqL1xuICBpc0hpZ2hsaWdodGVkPzogYm9vbGVhbjtcbiAgLyoqXG4gICAqIFRoZSBzaXplIG9mIHRoZSByZW5kZXJlZCBhdmF0YXIuXG4gICAqL1xuICBzaXplOiAncycgfCAnbScgfCAnbCc7XG4gIC8qKlxuICAgKiBUaGUgY29sb3Igb2YgdGhlIGF2YXRhci5cbiAgICovXG4gIGNvbG9yPzogJ2FjY2VudCcgfCAncHVycGxlJyB8ICd0dXJxdW9pc2UnIHwgJ2Jyb3duJztcbiAgLyoqIGFuIDxJY29uIC8+IGNvbXBvbmVudFxuICAgKi9cbiAgaWNvbj86IFJlYWN0RWxlbWVudDtcbn07XG5cbmV4cG9ydCB0eXBlIFRHcmF2YXRhckltZ1Byb3BzID0gUGljazxcbiAgVEF2YXRhclByb3BzLFxuICAnZ3JhdmF0YXJIYXNoJyB8ICdpc0hpZ2hsaWdodGVkJyB8ICdzaXplJ1xuPjtcblxuZXhwb3J0IHR5cGUgVEluaXRpYWxzUHJvcHMgPSBQaWNrPFxuICBUQXZhdGFyUHJvcHMsXG4gICdmaXJzdE5hbWUnIHwgJ2xhc3ROYW1lJyB8ICdzaXplJ1xuPjtcblxuY29uc3QgZGVmYXVsdFByb3BzOiBQaWNrPFxuICBUQXZhdGFyUHJvcHMsXG4gICdmaXJzdE5hbWUnIHwgJ2xhc3ROYW1lJyB8ICdpc0hpZ2hsaWdodGVkJyB8ICdzaXplJyB8ICdjb2xvcidcbj4gPSB7XG4gIGZpcnN0TmFtZTogJycsXG4gIGxhc3ROYW1lOiAnJyxcbiAgaXNIaWdobGlnaHRlZDogZmFsc2UsXG4gIHNpemU6ICdzJyxcbiAgY29sb3I6ICdhY2NlbnQnLFxufTtcblxuY29uc3QgZ2V0Rmlyc3RDaGFyID0gKHN0cjogc3RyaW5nKSA9PlxuICB0eXBlb2Ygc3RyID09PSAnc3RyaW5nJyA/IHN0ci50cmltKCkuc2xpY2UoMCwgMSkudG9VcHBlckNhc2UoKSA6ICcnO1xuXG5jb25zdCBnZXRJbml0aWFsc0Zyb21OYW1lID0gKHtcbiAgZmlyc3ROYW1lID0gJycsXG4gIGxhc3ROYW1lID0gJycsXG59OiBQaWNrPFRBdmF0YXJQcm9wcywgJ2ZpcnN0TmFtZScgfCAnbGFzdE5hbWUnPikgPT5cbiAgYCR7Z2V0Rmlyc3RDaGFyKGZpcnN0TmFtZSl9JHtnZXRGaXJzdENoYXIobGFzdE5hbWUpfWA7XG4vKipcbiAqIGBzYCAtIGRlZmluZXMgdGhlIHNpemUuIFdlIHdhbnQgYSBiaWdnZXIgb25lIGlmIHRoZSB1c2VyIGlzIG9uIGEgcmV0aW5hLWRpc3BsYXlcbiAqIGBkYCAtIGRlZmluZXMgdGhlIGRlZmF1bHQgaWYgdGhlIHVzZXIgaXMgbm90IGtub3duIHRvIEdyYXZhdGFyLiBJdCByZXR1cm5zIGEgYmxhbmsgaW1hZ2UsXG4gKiAgICAgICAgd2hpY2ggbGV0IHRoZSBpbml0aWFscyB1bmRlcm5lYXRoIHNoaW5lIHRocm91Z2hcbiAqXG4gKiBAc2VlOiBodHRwczovL2RlLmdyYXZhdGFyLmNvbS9zaXRlL2ltcGxlbWVudC9pbWFnZXMvXG4gKi9cbmNvbnN0IGNyZWF0ZUdyYXZhdGFySW1nVXJsID0gKFxuICBtZDVIYXNoOiBUQXZhdGFyUHJvcHNbJ2dyYXZhdGFySGFzaCddLFxuICBzaXplOiBUQXZhdGFyUHJvcHNbJ3NpemUnXSxcbiAgbXVsdGlwbHlCeTogbnVtYmVyID0gMVxuKSA9PiB7XG4gIGNvbnN0IGltYWdlU2l6ZSA9IGdldFdpZHRoU2l6ZShzaXplKTtcbiAgY29uc3Qgc2l6ZUFzSW50ID0gcGFyc2VJbnQoaW1hZ2VTaXplLnJlcGxhY2UoL3B4JC8sICcnKSwgMTApO1xuICBjb25zdCBncmF2YXRhclNpemUgPSBzaXplQXNJbnQgKiBtdWx0aXBseUJ5O1xuICByZXR1cm4gYGh0dHBzOi8vd3d3LmdyYXZhdGFyLmNvbS9hdmF0YXIvJHttZDVIYXNofT9zPSR7Z3JhdmF0YXJTaXplfSZkPWJsYW5rYDtcbn07XG5cbmNvbnN0IEdyYXZhdGFySW1nID0gKHByb3BzOiBUR3JhdmF0YXJJbWdQcm9wcykgPT4gKFxuICA8aW1nXG4gICAgY3NzPXtjc3NgXG4gICAgICBiYWNrZ3JvdW5kLXBvc2l0aW9uOiBjZW50ZXIgY2VudGVyO1xuICAgICAgYmFja2dyb3VuZC1zaXplOiBjb250YWluO1xuICAgICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgICAgei1pbmRleDogMTA7XG5cbiAgICAgICR7cHJvcHMuaXNIaWdobGlnaHRlZCA/ICdvcGFjaXR5OiAwLjc7JyA6ICcnfVxuICAgIGB9XG4gICAgc3JjPXtjcmVhdGVHcmF2YXRhckltZ1VybChwcm9wcy5ncmF2YXRhckhhc2gsIHByb3BzLnNpemUpfVxuICAgIHNyY1NldD17W1xuICAgICAgYCR7Y3JlYXRlR3JhdmF0YXJJbWdVcmwocHJvcHMuZ3JhdmF0YXJIYXNoLCBwcm9wcy5zaXplKX0gMXhgLFxuICAgICAgYCR7Y3JlYXRlR3JhdmF0YXJJbWdVcmwocHJvcHMuZ3JhdmF0YXJIYXNoLCBwcm9wcy5zaXplLCAyKX0gMnhgLFxuICAgIF0uam9pbignLCcpfVxuICAgIC8qKlxuICAgICAqIEJhc2VkIG9uIGh0dHBzOi8vd3d3LnczLm9yZy9XQUkvdHV0b3JpYWxzL2ltYWdlcy9kZWNpc2lvbi10cmVlLzpcbiAgICAgKiBpbWFnZSBjb250cmlidXRlcyBtZWFuaW5nIHRvIHRoZSBjdXJyZW50IHBhZ2Ugb3IgY29udGV4dCBhbmQgaXQgc2hvd3MgY29udGVudCB0aGF0IGlzIHJlZHVuZGFudCB0byByZWFsIHRleHQgbmVhcmJ5XG4gICAgICovXG4gICAgYWx0PVwiXCJcbiAgLz5cbik7XG5HcmF2YXRhckltZy5kaXNwbGF5TmFtZSA9ICdHcmF2YXRhckltZyc7XG5cbmNvbnN0IEluaXRpYWxzID0gKHByb3BzOiBUSW5pdGlhbHNQcm9wcykgPT4ge1xuICBjb25zdCBpbml0aWFsc0Zyb21OYW1lID0gZ2V0SW5pdGlhbHNGcm9tTmFtZSh7XG4gICAgZmlyc3ROYW1lOiBwcm9wcy5maXJzdE5hbWUsXG4gICAgbGFzdE5hbWU6IHByb3BzLmxhc3ROYW1lLFxuICB9KTtcbiAgcmV0dXJuIChcbiAgICA8ZGl2XG4gICAgICBjc3M9e2Nzc2BcbiAgICAgICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgICAgICBmb250LXNpemU6ICR7Z2V0Rm9udFNpemUoaW5pdGlhbHNGcm9tTmFtZSwgcHJvcHMuc2l6ZSl9O1xuICAgICAgYH1cbiAgICA+XG4gICAgICB7aW5pdGlhbHNGcm9tTmFtZX1cbiAgICA8L2Rpdj5cbiAgKTtcbn07XG5Jbml0aWFscy5kaXNwbGF5TmFtZSA9ICdJbml0aWFscyc7XG5cbmNvbnN0IEF2YXRhciA9IChwcm9wczogVEF2YXRhclByb3BzKSA9PiB7XG4gIGNvbnN0IGF2YXRhclNpemUgPSBnZXRXaWR0aFNpemUocHJvcHMuc2l6ZSk7XG4gIGNvbnN0IGZvcmVncm91bmRDb2xvciA9IGdldEZvcmVncm91bmRDb2xvcihwcm9wcy5jb2xvcik7XG4gIHJldHVybiAoXG4gICAgPGRpdiBjc3M9e2dldEF2YXRhclN0eWxlcyhwcm9wcyl9IHsuLi5maWx0ZXJEYXRhQXR0cmlidXRlcyhwcm9wcyl9PlxuICAgICAge3Byb3BzPy5pY29uID8gKFxuICAgICAgICA8ZGl2XG4gICAgICAgICAgY3NzPXtjc3NgXG4gICAgICAgICAgICBoZWlnaHQ6IGNhbGMoJHthdmF0YXJTaXplfSAtIDQ1JSk7XG4gICAgICAgICAgICB3aWR0aDogY2FsYygke2F2YXRhclNpemV9IC0gNDUlKTtcbiAgICAgICAgICBgfVxuICAgICAgICA+XG4gICAgICAgICAge2Nsb25lRWxlbWVudChwcm9wcz8uaWNvbiwge1xuICAgICAgICAgICAgc2l6ZTogJ3NjYWxlJyxcbiAgICAgICAgICAgIGNvbG9yOiBmb3JlZ3JvdW5kQ29sb3IsXG4gICAgICAgICAgICBiYWNrZ3JvdW5kY29sb3I6IGZvcmVncm91bmRDb2xvcixcbiAgICAgICAgICB9KX1cbiAgICAgICAgPC9kaXY+XG4gICAgICApIDogKFxuICAgICAgICA8PlxuICAgICAgICAgIDxHcmF2YXRhckltZ1xuICAgICAgICAgICAgZ3JhdmF0YXJIYXNoPXtwcm9wcy5ncmF2YXRhckhhc2h9XG4gICAgICAgICAgICBzaXplPXtwcm9wcy5zaXplfVxuICAgICAgICAgICAgaXNIaWdobGlnaHRlZD17cHJvcHMuaXNIaWdobGlnaHRlZH1cbiAgICAgICAgICAvPlxuICAgICAgICAgIDxJbml0aWFsc1xuICAgICAgICAgICAgc2l6ZT17cHJvcHMuc2l6ZX1cbiAgICAgICAgICAgIGZpcnN0TmFtZT17cHJvcHMuZmlyc3ROYW1lfVxuICAgICAgICAgICAgbGFzdE5hbWU9e3Byb3BzLmxhc3ROYW1lfVxuICAgICAgICAgIC8+XG4gICAgICAgIDwvPlxuICAgICAgKX1cbiAgICA8L2Rpdj5cbiAgKTtcbn07XG5BdmF0YXIuZGlzcGxheU5hbWUgPSAnQXZhdGFyJztcbkF2YXRhci5kZWZhdWx0UHJvcHMgPSBkZWZhdWx0UHJvcHM7XG5cbmV4cG9ydCBkZWZhdWx0IEF2YXRhcjtcbiJdfQ== */"),
   src: createGravatarImgUrl(props.gravatarHash, props.size),
   srcSet: ["".concat(createGravatarImgUrl(props.gravatarHash, props.size), " 1x"), "".concat(createGravatarImgUrl(props.gravatarHash, props.size, 2), " 2x")].join(',')
   /**
@@ -76,32 +123,57 @@ const GravatarImg = props => jsx("img", {
   alt: ""
 });
 GravatarImg.displayName = 'GravatarImg';
-const Initials = props => jsx("div", {
-  css: /*#__PURE__*/css("position:absolute;font-size:", avatarSizes[props.size].fontSize, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:Initials;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImF2YXRhci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBa0hZIiwiZmlsZSI6ImF2YXRhci50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgeyBkZXNpZ25Ub2tlbnMgfSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9kZXNpZ24tc3lzdGVtJztcbmltcG9ydCB7IGZpbHRlckRhdGFBdHRyaWJ1dGVzIH0gZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvdXRpbHMnO1xuXG5leHBvcnQgdHlwZSBUQXZhdGFyUHJvcHMgPSB7XG4gIC8qKlxuICAgKiBUaGUgZmlyc3QgbmFtZSBvZiB0aGUgdXNlci5cbiAgICovXG4gIGZpcnN0TmFtZT86IHN0cmluZztcbiAgLyoqXG4gICAqIFRoZSBsYXN0IG5hbWUgb2YgdGhlIHVzZXIuXG4gICAqL1xuICBsYXN0TmFtZT86IHN0cmluZztcbiAgLyoqXG4gICAqIFRoZSBoYXNoZWQgc3RyaW5nIG9mIHRoZSB1c2VyIGdyYXZhdGFyLlxuICAgKi9cbiAgZ3JhdmF0YXJIYXNoOiBzdHJpbmc7XG4gIC8qKlxuICAgKiBFbmhhbmNlcyB0aGUgYXBwZWFyYW5jZSBvZiB0aGUgYXZhdGFyLlxuICAgKi9cbiAgaXNIaWdobGlnaHRlZD86IGJvb2xlYW47XG4gIC8qKlxuICAgKiBUaGUgc2l6ZSBvZiB0aGUgcmVuZGVyZWQgYXZhdGFyLlxuICAgKi9cbiAgc2l6ZTogJ3MnIHwgJ20nIHwgJ2wnO1xufTtcblxuZXhwb3J0IHR5cGUgVEdyYXZhdGFySW1nUHJvcHMgPSBQaWNrPFxuICBUQXZhdGFyUHJvcHMsXG4gICdncmF2YXRhckhhc2gnIHwgJ2lzSGlnaGxpZ2h0ZWQnIHwgJ3NpemUnXG4+O1xuXG5leHBvcnQgdHlwZSBUSW5pdGlhbHNQcm9wcyA9IFBpY2s8XG4gIFRBdmF0YXJQcm9wcyxcbiAgJ2ZpcnN0TmFtZScgfCAnbGFzdE5hbWUnIHwgJ3NpemUnXG4+O1xuXG5jb25zdCBhdmF0YXJTaXplcyA9IHtcbiAgczoge1xuICAgIHdpZHRoOiAnMjZweCcsXG4gICAgZm9udFNpemU6IGRlc2lnblRva2Vucy5mb250U2l6ZUZvckF2YXRhckFzU21hbGwsXG4gIH0sXG4gIG06IHtcbiAgICB3aWR0aDogZGVzaWduVG9rZW5zLndpZHRoRm9yQXZhdGFyQXNNZWRpdW0sXG4gICAgZm9udFNpemU6IGRlc2lnblRva2Vucy5mb250U2l6ZUZvckF2YXRhckFzTWVkaXVtLFxuICB9LFxuICBsOiB7XG4gICAgd2lkdGg6ICcxMDBweCcsXG4gICAgZm9udFNpemU6IGRlc2lnblRva2Vucy5mb250U2l6ZUZvckF2YXRhckFzQmlnLFxuICB9LFxufTtcblxuY29uc3QgZGVmYXVsdFByb3BzOiBQaWNrPFxuICBUQXZhdGFyUHJvcHMsXG4gICdmaXJzdE5hbWUnIHwgJ2xhc3ROYW1lJyB8ICdpc0hpZ2hsaWdodGVkJyB8ICdzaXplJ1xuPiA9IHtcbiAgZmlyc3ROYW1lOiAnJyxcbiAgbGFzdE5hbWU6ICcnLFxuICBpc0hpZ2hsaWdodGVkOiBmYWxzZSxcbiAgc2l6ZTogJ3MnLFxufTtcblxuY29uc3QgZ2V0Rmlyc3RDaGFyID0gKHN0cjogc3RyaW5nKSA9PlxuICB0eXBlb2Ygc3RyID09PSAnc3RyaW5nJyA/IHN0ci50cmltKCkuc2xpY2UoMCwgMSkudG9VcHBlckNhc2UoKSA6ICcnO1xuXG5jb25zdCBnZXRJbml0aWFsc0Zyb21OYW1lID0gKHtcbiAgZmlyc3ROYW1lID0gJycsXG4gIGxhc3ROYW1lID0gJycsXG59OiBQaWNrPFRBdmF0YXJQcm9wcywgJ2ZpcnN0TmFtZScgfCAnbGFzdE5hbWUnPikgPT5cbiAgYCR7Z2V0Rmlyc3RDaGFyKGZpcnN0TmFtZSl9JHtnZXRGaXJzdENoYXIobGFzdE5hbWUpfWA7XG5cbi8qKlxuICogYHNgIC0gZGVmaW5lcyB0aGUgc2l6ZS4gV2Ugd2FudCBhIGJpZ2dlciBvbmUgaWYgdGhlIHVzZXIgaXMgb24gYSByZXRpbmEtZGlzcGxheVxuICogYGRgIC0gZGVmaW5lcyB0aGUgZGVmYXVsdCBpZiB0aGUgdXNlciBpcyBub3Qga25vd24gdG8gR3JhdmF0YXIuIEl0IHJldHVybnMgYSBibGFuayBpbWFnZSxcbiAqICAgICAgICB3aGljaCBsZXQgdGhlIGluaXRpYWxzIHVuZGVybmVhdGggc2hpbmUgdGhyb3VnaFxuICpcbiAqIEBzZWU6IGh0dHBzOi8vZGUuZ3JhdmF0YXIuY29tL3NpdGUvaW1wbGVtZW50L2ltYWdlcy9cbiAqL1xuY29uc3QgY3JlYXRlR3JhdmF0YXJJbWdVcmwgPSAoXG4gIG1kNUhhc2g6IFRBdmF0YXJQcm9wc1snZ3JhdmF0YXJIYXNoJ10sXG4gIHNpemU6IFRBdmF0YXJQcm9wc1snc2l6ZSddLFxuICBtdWx0aXBseUJ5OiBudW1iZXIgPSAxXG4pID0+IHtcbiAgY29uc3Qgc2l6ZUFzSW50ID0gcGFyc2VJbnQoYXZhdGFyU2l6ZXNbc2l6ZV0ud2lkdGgucmVwbGFjZSgvcHgkLywgJycpLCAxMCk7XG4gIGNvbnN0IGdyYXZhdGFyU2l6ZSA9IHNpemVBc0ludCAqIG11bHRpcGx5Qnk7XG4gIHJldHVybiBgaHR0cHM6Ly93d3cuZ3JhdmF0YXIuY29tL2F2YXRhci8ke21kNUhhc2h9P3M9JHtncmF2YXRhclNpemV9JmQ9YmxhbmtgO1xufTtcblxuY29uc3QgR3JhdmF0YXJJbWcgPSAocHJvcHM6IFRHcmF2YXRhckltZ1Byb3BzKSA9PiAoXG4gIDxpbWdcbiAgICBjc3M9e2Nzc2BcbiAgICAgIGJhY2tncm91bmQtcG9zaXRpb246IGNlbnRlciBjZW50ZXI7XG4gICAgICBiYWNrZ3JvdW5kLXNpemU6IGNvbnRhaW47XG4gICAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gICAgICB6LWluZGV4OiAxMDtcblxuICAgICAgJHtwcm9wcy5pc0hpZ2hsaWdodGVkID8gJ29wYWNpdHk6IDAuNzsnIDogJyd9XG4gICAgYH1cbiAgICBzcmM9e2NyZWF0ZUdyYXZhdGFySW1nVXJsKHByb3BzLmdyYXZhdGFySGFzaCwgcHJvcHMuc2l6ZSl9XG4gICAgc3JjU2V0PXtbXG4gICAgICBgJHtjcmVhdGVHcmF2YXRhckltZ1VybChwcm9wcy5ncmF2YXRhckhhc2gsIHByb3BzLnNpemUpfSAxeGAsXG4gICAgICBgJHtjcmVhdGVHcmF2YXRhckltZ1VybChwcm9wcy5ncmF2YXRhckhhc2gsIHByb3BzLnNpemUsIDIpfSAyeGAsXG4gICAgXS5qb2luKCcsJyl9XG4gICAgLyoqXG4gICAgICogQmFzZWQgb24gaHR0cHM6Ly93d3cudzMub3JnL1dBSS90dXRvcmlhbHMvaW1hZ2VzL2RlY2lzaW9uLXRyZWUvOlxuICAgICAqIGltYWdlIGNvbnRyaWJ1dGVzIG1lYW5pbmcgdG8gdGhlIGN1cnJlbnQgcGFnZSBvciBjb250ZXh0IGFuZCBpdCBzaG93cyBjb250ZW50IHRoYXQgaXMgcmVkdW5kYW50IHRvIHJlYWwgdGV4dCBuZWFyYnlcbiAgICAgKi9cbiAgICBhbHQ9XCJcIlxuICAvPlxuKTtcbkdyYXZhdGFySW1nLmRpc3BsYXlOYW1lID0gJ0dyYXZhdGFySW1nJztcblxuY29uc3QgSW5pdGlhbHMgPSAocHJvcHM6IFRJbml0aWFsc1Byb3BzKSA9PiAoXG4gIDxkaXZcbiAgICBjc3M9e2Nzc2BcbiAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICAgIGZvbnQtc2l6ZTogJHthdmF0YXJTaXplc1twcm9wcy5zaXplXS5mb250U2l6ZX07XG4gICAgYH1cbiAgPlxuICAgIHtnZXRJbml0aWFsc0Zyb21OYW1lKHtcbiAgICAgIGZpcnN0TmFtZTogcHJvcHMuZmlyc3ROYW1lLFxuICAgICAgbGFzdE5hbWU6IHByb3BzLmxhc3ROYW1lLFxuICAgIH0pfVxuICA8L2Rpdj5cbik7XG5Jbml0aWFscy5kaXNwbGF5TmFtZSA9ICdJbml0aWFscyc7XG5cbmNvbnN0IEF2YXRhciA9IChwcm9wczogVEF2YXRhclByb3BzKSA9PiAoXG4gIDxkaXZcbiAgICBjc3M9e2Nzc2BcbiAgICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke2Rlc2lnblRva2Vucy5iYWNrZ3JvdW5kQ29sb3JGb3JBdmF0YXJ9O1xuICAgICAgYm9yZGVyLXJhZGl1czogMTAwJTtcbiAgICAgIGZvbnQtc2l6ZTogJHtkZXNpZ25Ub2tlbnMuZm9udFNpemVEZWZhdWx0fTtcbiAgICAgIGNvbG9yOiAke2Rlc2lnblRva2Vucy5jb2xvclN1cmZhY2V9O1xuICAgICAgZGlzcGxheTogZmxleDtcbiAgICAgIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICAgICAgb3ZlcmZsb3c6IGhpZGRlbjtcbiAgICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcblxuICAgICAgaGVpZ2h0OiAke2F2YXRhclNpemVzW3Byb3BzLnNpemVdLndpZHRofTtcbiAgICAgIHdpZHRoOiAke2F2YXRhclNpemVzW3Byb3BzLnNpemVdLndpZHRofTtcblxuICAgICAgJHtwcm9wcy5pc0hpZ2hsaWdodGVkXG4gICAgICAgID8gYGJhY2tncm91bmQtY29sb3I6ICR7ZGVzaWduVG9rZW5zLmJhY2tncm91bmRDb2xvckZvckF2YXRhcldoZW5IaWdobGlnaHRlZH07YFxuICAgICAgICA6ICcnfVxuICAgIGB9XG4gICAgey4uLmZpbHRlckRhdGFBdHRyaWJ1dGVzKHByb3BzKX1cbiAgPlxuICAgIDxHcmF2YXRhckltZ1xuICAgICAgZ3JhdmF0YXJIYXNoPXtwcm9wcy5ncmF2YXRhckhhc2h9XG4gICAgICBzaXplPXtwcm9wcy5zaXplfVxuICAgICAgaXNIaWdobGlnaHRlZD17cHJvcHMuaXNIaWdobGlnaHRlZH1cbiAgICAvPlxuICAgIDxJbml0aWFsc1xuICAgICAgc2l6ZT17cHJvcHMuc2l6ZX1cbiAgICAgIGZpcnN0TmFtZT17cHJvcHMuZmlyc3ROYW1lfVxuICAgICAgbGFzdE5hbWU9e3Byb3BzLmxhc3ROYW1lfVxuICAgIC8+XG4gIDwvZGl2PlxuKTtcblxuQXZhdGFyLmRpc3BsYXlOYW1lID0gJ0F2YXRhcic7XG5BdmF0YXIuZGVmYXVsdFByb3BzID0gZGVmYXVsdFByb3BzO1xuXG5leHBvcnQgZGVmYXVsdCBBdmF0YXI7XG4iXX0= */"),
-  children: getInitialsFromName({
+const Initials = props => {
+  const initialsFromName = getInitialsFromName({
     firstName: props.firstName,
     lastName: props.lastName
-  })
-});
+  });
+  return jsx("div", {
+    css: /*#__PURE__*/css("position:absolute;font-size:", getFontSize(initialsFromName, props.size), ";" + (process.env.NODE_ENV === "production" ? "" : ";label:Initials;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImF2YXRhci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBc0hjIiwiZmlsZSI6ImF2YXRhci50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBSZWFjdEVsZW1lbnQsIGNsb25lRWxlbWVudCB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IGZpbHRlckRhdGFBdHRyaWJ1dGVzIH0gZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvdXRpbHMnO1xuaW1wb3J0IHtcbiAgZ2V0QXZhdGFyU3R5bGVzLFxuICBnZXRGb250U2l6ZSxcbiAgZ2V0Rm9yZWdyb3VuZENvbG9yLFxuICBnZXRXaWR0aFNpemUsXG59IGZyb20gJy4vYXZhdGFyLnN0eWxlcyc7XG5cbmV4cG9ydCB0eXBlIFRBdmF0YXJQcm9wcyA9IHtcbiAgLyoqXG4gICAqIFRoZSBmaXJzdCBuYW1lIG9mIHRoZSB1c2VyLlxuICAgKi9cbiAgZmlyc3ROYW1lPzogc3RyaW5nO1xuICAvKipcbiAgICogVGhlIGxhc3QgbmFtZSBvZiB0aGUgdXNlci5cbiAgICovXG4gIGxhc3ROYW1lPzogc3RyaW5nO1xuICAvKipcbiAgICogVGhlIGhhc2hlZCBzdHJpbmcgb2YgdGhlIHVzZXIgZ3JhdmF0YXIuXG4gICAqL1xuICBncmF2YXRhckhhc2g6IHN0cmluZztcbiAgLyoqXG4gICAqIEVuaGFuY2VzIHRoZSBhcHBlYXJhbmNlIG9mIHRoZSBhdmF0YXIuXG4gICAqL1xuICBpc0hpZ2hsaWdodGVkPzogYm9vbGVhbjtcbiAgLyoqXG4gICAqIFRoZSBzaXplIG9mIHRoZSByZW5kZXJlZCBhdmF0YXIuXG4gICAqL1xuICBzaXplOiAncycgfCAnbScgfCAnbCc7XG4gIC8qKlxuICAgKiBUaGUgY29sb3Igb2YgdGhlIGF2YXRhci5cbiAgICovXG4gIGNvbG9yPzogJ2FjY2VudCcgfCAncHVycGxlJyB8ICd0dXJxdW9pc2UnIHwgJ2Jyb3duJztcbiAgLyoqIGFuIDxJY29uIC8+IGNvbXBvbmVudFxuICAgKi9cbiAgaWNvbj86IFJlYWN0RWxlbWVudDtcbn07XG5cbmV4cG9ydCB0eXBlIFRHcmF2YXRhckltZ1Byb3BzID0gUGljazxcbiAgVEF2YXRhclByb3BzLFxuICAnZ3JhdmF0YXJIYXNoJyB8ICdpc0hpZ2hsaWdodGVkJyB8ICdzaXplJ1xuPjtcblxuZXhwb3J0IHR5cGUgVEluaXRpYWxzUHJvcHMgPSBQaWNrPFxuICBUQXZhdGFyUHJvcHMsXG4gICdmaXJzdE5hbWUnIHwgJ2xhc3ROYW1lJyB8ICdzaXplJ1xuPjtcblxuY29uc3QgZGVmYXVsdFByb3BzOiBQaWNrPFxuICBUQXZhdGFyUHJvcHMsXG4gICdmaXJzdE5hbWUnIHwgJ2xhc3ROYW1lJyB8ICdpc0hpZ2hsaWdodGVkJyB8ICdzaXplJyB8ICdjb2xvcidcbj4gPSB7XG4gIGZpcnN0TmFtZTogJycsXG4gIGxhc3ROYW1lOiAnJyxcbiAgaXNIaWdobGlnaHRlZDogZmFsc2UsXG4gIHNpemU6ICdzJyxcbiAgY29sb3I6ICdhY2NlbnQnLFxufTtcblxuY29uc3QgZ2V0Rmlyc3RDaGFyID0gKHN0cjogc3RyaW5nKSA9PlxuICB0eXBlb2Ygc3RyID09PSAnc3RyaW5nJyA/IHN0ci50cmltKCkuc2xpY2UoMCwgMSkudG9VcHBlckNhc2UoKSA6ICcnO1xuXG5jb25zdCBnZXRJbml0aWFsc0Zyb21OYW1lID0gKHtcbiAgZmlyc3ROYW1lID0gJycsXG4gIGxhc3ROYW1lID0gJycsXG59OiBQaWNrPFRBdmF0YXJQcm9wcywgJ2ZpcnN0TmFtZScgfCAnbGFzdE5hbWUnPikgPT5cbiAgYCR7Z2V0Rmlyc3RDaGFyKGZpcnN0TmFtZSl9JHtnZXRGaXJzdENoYXIobGFzdE5hbWUpfWA7XG4vKipcbiAqIGBzYCAtIGRlZmluZXMgdGhlIHNpemUuIFdlIHdhbnQgYSBiaWdnZXIgb25lIGlmIHRoZSB1c2VyIGlzIG9uIGEgcmV0aW5hLWRpc3BsYXlcbiAqIGBkYCAtIGRlZmluZXMgdGhlIGRlZmF1bHQgaWYgdGhlIHVzZXIgaXMgbm90IGtub3duIHRvIEdyYXZhdGFyLiBJdCByZXR1cm5zIGEgYmxhbmsgaW1hZ2UsXG4gKiAgICAgICAgd2hpY2ggbGV0IHRoZSBpbml0aWFscyB1bmRlcm5lYXRoIHNoaW5lIHRocm91Z2hcbiAqXG4gKiBAc2VlOiBodHRwczovL2RlLmdyYXZhdGFyLmNvbS9zaXRlL2ltcGxlbWVudC9pbWFnZXMvXG4gKi9cbmNvbnN0IGNyZWF0ZUdyYXZhdGFySW1nVXJsID0gKFxuICBtZDVIYXNoOiBUQXZhdGFyUHJvcHNbJ2dyYXZhdGFySGFzaCddLFxuICBzaXplOiBUQXZhdGFyUHJvcHNbJ3NpemUnXSxcbiAgbXVsdGlwbHlCeTogbnVtYmVyID0gMVxuKSA9PiB7XG4gIGNvbnN0IGltYWdlU2l6ZSA9IGdldFdpZHRoU2l6ZShzaXplKTtcbiAgY29uc3Qgc2l6ZUFzSW50ID0gcGFyc2VJbnQoaW1hZ2VTaXplLnJlcGxhY2UoL3B4JC8sICcnKSwgMTApO1xuICBjb25zdCBncmF2YXRhclNpemUgPSBzaXplQXNJbnQgKiBtdWx0aXBseUJ5O1xuICByZXR1cm4gYGh0dHBzOi8vd3d3LmdyYXZhdGFyLmNvbS9hdmF0YXIvJHttZDVIYXNofT9zPSR7Z3JhdmF0YXJTaXplfSZkPWJsYW5rYDtcbn07XG5cbmNvbnN0IEdyYXZhdGFySW1nID0gKHByb3BzOiBUR3JhdmF0YXJJbWdQcm9wcykgPT4gKFxuICA8aW1nXG4gICAgY3NzPXtjc3NgXG4gICAgICBiYWNrZ3JvdW5kLXBvc2l0aW9uOiBjZW50ZXIgY2VudGVyO1xuICAgICAgYmFja2dyb3VuZC1zaXplOiBjb250YWluO1xuICAgICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgICAgei1pbmRleDogMTA7XG5cbiAgICAgICR7cHJvcHMuaXNIaWdobGlnaHRlZCA/ICdvcGFjaXR5OiAwLjc7JyA6ICcnfVxuICAgIGB9XG4gICAgc3JjPXtjcmVhdGVHcmF2YXRhckltZ1VybChwcm9wcy5ncmF2YXRhckhhc2gsIHByb3BzLnNpemUpfVxuICAgIHNyY1NldD17W1xuICAgICAgYCR7Y3JlYXRlR3JhdmF0YXJJbWdVcmwocHJvcHMuZ3JhdmF0YXJIYXNoLCBwcm9wcy5zaXplKX0gMXhgLFxuICAgICAgYCR7Y3JlYXRlR3JhdmF0YXJJbWdVcmwocHJvcHMuZ3JhdmF0YXJIYXNoLCBwcm9wcy5zaXplLCAyKX0gMnhgLFxuICAgIF0uam9pbignLCcpfVxuICAgIC8qKlxuICAgICAqIEJhc2VkIG9uIGh0dHBzOi8vd3d3LnczLm9yZy9XQUkvdHV0b3JpYWxzL2ltYWdlcy9kZWNpc2lvbi10cmVlLzpcbiAgICAgKiBpbWFnZSBjb250cmlidXRlcyBtZWFuaW5nIHRvIHRoZSBjdXJyZW50IHBhZ2Ugb3IgY29udGV4dCBhbmQgaXQgc2hvd3MgY29udGVudCB0aGF0IGlzIHJlZHVuZGFudCB0byByZWFsIHRleHQgbmVhcmJ5XG4gICAgICovXG4gICAgYWx0PVwiXCJcbiAgLz5cbik7XG5HcmF2YXRhckltZy5kaXNwbGF5TmFtZSA9ICdHcmF2YXRhckltZyc7XG5cbmNvbnN0IEluaXRpYWxzID0gKHByb3BzOiBUSW5pdGlhbHNQcm9wcykgPT4ge1xuICBjb25zdCBpbml0aWFsc0Zyb21OYW1lID0gZ2V0SW5pdGlhbHNGcm9tTmFtZSh7XG4gICAgZmlyc3ROYW1lOiBwcm9wcy5maXJzdE5hbWUsXG4gICAgbGFzdE5hbWU6IHByb3BzLmxhc3ROYW1lLFxuICB9KTtcbiAgcmV0dXJuIChcbiAgICA8ZGl2XG4gICAgICBjc3M9e2Nzc2BcbiAgICAgICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgICAgICBmb250LXNpemU6ICR7Z2V0Rm9udFNpemUoaW5pdGlhbHNGcm9tTmFtZSwgcHJvcHMuc2l6ZSl9O1xuICAgICAgYH1cbiAgICA+XG4gICAgICB7aW5pdGlhbHNGcm9tTmFtZX1cbiAgICA8L2Rpdj5cbiAgKTtcbn07XG5Jbml0aWFscy5kaXNwbGF5TmFtZSA9ICdJbml0aWFscyc7XG5cbmNvbnN0IEF2YXRhciA9IChwcm9wczogVEF2YXRhclByb3BzKSA9PiB7XG4gIGNvbnN0IGF2YXRhclNpemUgPSBnZXRXaWR0aFNpemUocHJvcHMuc2l6ZSk7XG4gIGNvbnN0IGZvcmVncm91bmRDb2xvciA9IGdldEZvcmVncm91bmRDb2xvcihwcm9wcy5jb2xvcik7XG4gIHJldHVybiAoXG4gICAgPGRpdiBjc3M9e2dldEF2YXRhclN0eWxlcyhwcm9wcyl9IHsuLi5maWx0ZXJEYXRhQXR0cmlidXRlcyhwcm9wcyl9PlxuICAgICAge3Byb3BzPy5pY29uID8gKFxuICAgICAgICA8ZGl2XG4gICAgICAgICAgY3NzPXtjc3NgXG4gICAgICAgICAgICBoZWlnaHQ6IGNhbGMoJHthdmF0YXJTaXplfSAtIDQ1JSk7XG4gICAgICAgICAgICB3aWR0aDogY2FsYygke2F2YXRhclNpemV9IC0gNDUlKTtcbiAgICAgICAgICBgfVxuICAgICAgICA+XG4gICAgICAgICAge2Nsb25lRWxlbWVudChwcm9wcz8uaWNvbiwge1xuICAgICAgICAgICAgc2l6ZTogJ3NjYWxlJyxcbiAgICAgICAgICAgIGNvbG9yOiBmb3JlZ3JvdW5kQ29sb3IsXG4gICAgICAgICAgICBiYWNrZ3JvdW5kY29sb3I6IGZvcmVncm91bmRDb2xvcixcbiAgICAgICAgICB9KX1cbiAgICAgICAgPC9kaXY+XG4gICAgICApIDogKFxuICAgICAgICA8PlxuICAgICAgICAgIDxHcmF2YXRhckltZ1xuICAgICAgICAgICAgZ3JhdmF0YXJIYXNoPXtwcm9wcy5ncmF2YXRhckhhc2h9XG4gICAgICAgICAgICBzaXplPXtwcm9wcy5zaXplfVxuICAgICAgICAgICAgaXNIaWdobGlnaHRlZD17cHJvcHMuaXNIaWdobGlnaHRlZH1cbiAgICAgICAgICAvPlxuICAgICAgICAgIDxJbml0aWFsc1xuICAgICAgICAgICAgc2l6ZT17cHJvcHMuc2l6ZX1cbiAgICAgICAgICAgIGZpcnN0TmFtZT17cHJvcHMuZmlyc3ROYW1lfVxuICAgICAgICAgICAgbGFzdE5hbWU9e3Byb3BzLmxhc3ROYW1lfVxuICAgICAgICAgIC8+XG4gICAgICAgIDwvPlxuICAgICAgKX1cbiAgICA8L2Rpdj5cbiAgKTtcbn07XG5BdmF0YXIuZGlzcGxheU5hbWUgPSAnQXZhdGFyJztcbkF2YXRhci5kZWZhdWx0UHJvcHMgPSBkZWZhdWx0UHJvcHM7XG5cbmV4cG9ydCBkZWZhdWx0IEF2YXRhcjtcbiJdfQ== */"),
+    children: initialsFromName
+  });
+};
 Initials.displayName = 'Initials';
-const Avatar = props => jsxs("div", _objectSpread(_objectSpread({
-  css: /*#__PURE__*/css("align-items:center;background-color:", designTokens.backgroundColorForAvatar, ";border-radius:100%;font-size:", designTokens.fontSizeDefault, ";color:", designTokens.colorSurface, ";display:flex;justify-content:center;overflow:hidden;position:relative;height:", avatarSizes[props.size].width, ";width:", avatarSizes[props.size].width, ";", props.isHighlighted ? "background-color: ".concat(designTokens.backgroundColorForAvatarWhenHighlighted, ";") : '', ";" + (process.env.NODE_ENV === "production" ? "" : ";label:Avatar;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImF2YXRhci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBaUlZIiwiZmlsZSI6ImF2YXRhci50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgeyBkZXNpZ25Ub2tlbnMgfSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9kZXNpZ24tc3lzdGVtJztcbmltcG9ydCB7IGZpbHRlckRhdGFBdHRyaWJ1dGVzIH0gZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvdXRpbHMnO1xuXG5leHBvcnQgdHlwZSBUQXZhdGFyUHJvcHMgPSB7XG4gIC8qKlxuICAgKiBUaGUgZmlyc3QgbmFtZSBvZiB0aGUgdXNlci5cbiAgICovXG4gIGZpcnN0TmFtZT86IHN0cmluZztcbiAgLyoqXG4gICAqIFRoZSBsYXN0IG5hbWUgb2YgdGhlIHVzZXIuXG4gICAqL1xuICBsYXN0TmFtZT86IHN0cmluZztcbiAgLyoqXG4gICAqIFRoZSBoYXNoZWQgc3RyaW5nIG9mIHRoZSB1c2VyIGdyYXZhdGFyLlxuICAgKi9cbiAgZ3JhdmF0YXJIYXNoOiBzdHJpbmc7XG4gIC8qKlxuICAgKiBFbmhhbmNlcyB0aGUgYXBwZWFyYW5jZSBvZiB0aGUgYXZhdGFyLlxuICAgKi9cbiAgaXNIaWdobGlnaHRlZD86IGJvb2xlYW47XG4gIC8qKlxuICAgKiBUaGUgc2l6ZSBvZiB0aGUgcmVuZGVyZWQgYXZhdGFyLlxuICAgKi9cbiAgc2l6ZTogJ3MnIHwgJ20nIHwgJ2wnO1xufTtcblxuZXhwb3J0IHR5cGUgVEdyYXZhdGFySW1nUHJvcHMgPSBQaWNrPFxuICBUQXZhdGFyUHJvcHMsXG4gICdncmF2YXRhckhhc2gnIHwgJ2lzSGlnaGxpZ2h0ZWQnIHwgJ3NpemUnXG4+O1xuXG5leHBvcnQgdHlwZSBUSW5pdGlhbHNQcm9wcyA9IFBpY2s8XG4gIFRBdmF0YXJQcm9wcyxcbiAgJ2ZpcnN0TmFtZScgfCAnbGFzdE5hbWUnIHwgJ3NpemUnXG4+O1xuXG5jb25zdCBhdmF0YXJTaXplcyA9IHtcbiAgczoge1xuICAgIHdpZHRoOiAnMjZweCcsXG4gICAgZm9udFNpemU6IGRlc2lnblRva2Vucy5mb250U2l6ZUZvckF2YXRhckFzU21hbGwsXG4gIH0sXG4gIG06IHtcbiAgICB3aWR0aDogZGVzaWduVG9rZW5zLndpZHRoRm9yQXZhdGFyQXNNZWRpdW0sXG4gICAgZm9udFNpemU6IGRlc2lnblRva2Vucy5mb250U2l6ZUZvckF2YXRhckFzTWVkaXVtLFxuICB9LFxuICBsOiB7XG4gICAgd2lkdGg6ICcxMDBweCcsXG4gICAgZm9udFNpemU6IGRlc2lnblRva2Vucy5mb250U2l6ZUZvckF2YXRhckFzQmlnLFxuICB9LFxufTtcblxuY29uc3QgZGVmYXVsdFByb3BzOiBQaWNrPFxuICBUQXZhdGFyUHJvcHMsXG4gICdmaXJzdE5hbWUnIHwgJ2xhc3ROYW1lJyB8ICdpc0hpZ2hsaWdodGVkJyB8ICdzaXplJ1xuPiA9IHtcbiAgZmlyc3ROYW1lOiAnJyxcbiAgbGFzdE5hbWU6ICcnLFxuICBpc0hpZ2hsaWdodGVkOiBmYWxzZSxcbiAgc2l6ZTogJ3MnLFxufTtcblxuY29uc3QgZ2V0Rmlyc3RDaGFyID0gKHN0cjogc3RyaW5nKSA9PlxuICB0eXBlb2Ygc3RyID09PSAnc3RyaW5nJyA/IHN0ci50cmltKCkuc2xpY2UoMCwgMSkudG9VcHBlckNhc2UoKSA6ICcnO1xuXG5jb25zdCBnZXRJbml0aWFsc0Zyb21OYW1lID0gKHtcbiAgZmlyc3ROYW1lID0gJycsXG4gIGxhc3ROYW1lID0gJycsXG59OiBQaWNrPFRBdmF0YXJQcm9wcywgJ2ZpcnN0TmFtZScgfCAnbGFzdE5hbWUnPikgPT5cbiAgYCR7Z2V0Rmlyc3RDaGFyKGZpcnN0TmFtZSl9JHtnZXRGaXJzdENoYXIobGFzdE5hbWUpfWA7XG5cbi8qKlxuICogYHNgIC0gZGVmaW5lcyB0aGUgc2l6ZS4gV2Ugd2FudCBhIGJpZ2dlciBvbmUgaWYgdGhlIHVzZXIgaXMgb24gYSByZXRpbmEtZGlzcGxheVxuICogYGRgIC0gZGVmaW5lcyB0aGUgZGVmYXVsdCBpZiB0aGUgdXNlciBpcyBub3Qga25vd24gdG8gR3JhdmF0YXIuIEl0IHJldHVybnMgYSBibGFuayBpbWFnZSxcbiAqICAgICAgICB3aGljaCBsZXQgdGhlIGluaXRpYWxzIHVuZGVybmVhdGggc2hpbmUgdGhyb3VnaFxuICpcbiAqIEBzZWU6IGh0dHBzOi8vZGUuZ3JhdmF0YXIuY29tL3NpdGUvaW1wbGVtZW50L2ltYWdlcy9cbiAqL1xuY29uc3QgY3JlYXRlR3JhdmF0YXJJbWdVcmwgPSAoXG4gIG1kNUhhc2g6IFRBdmF0YXJQcm9wc1snZ3JhdmF0YXJIYXNoJ10sXG4gIHNpemU6IFRBdmF0YXJQcm9wc1snc2l6ZSddLFxuICBtdWx0aXBseUJ5OiBudW1iZXIgPSAxXG4pID0+IHtcbiAgY29uc3Qgc2l6ZUFzSW50ID0gcGFyc2VJbnQoYXZhdGFyU2l6ZXNbc2l6ZV0ud2lkdGgucmVwbGFjZSgvcHgkLywgJycpLCAxMCk7XG4gIGNvbnN0IGdyYXZhdGFyU2l6ZSA9IHNpemVBc0ludCAqIG11bHRpcGx5Qnk7XG4gIHJldHVybiBgaHR0cHM6Ly93d3cuZ3JhdmF0YXIuY29tL2F2YXRhci8ke21kNUhhc2h9P3M9JHtncmF2YXRhclNpemV9JmQ9YmxhbmtgO1xufTtcblxuY29uc3QgR3JhdmF0YXJJbWcgPSAocHJvcHM6IFRHcmF2YXRhckltZ1Byb3BzKSA9PiAoXG4gIDxpbWdcbiAgICBjc3M9e2Nzc2BcbiAgICAgIGJhY2tncm91bmQtcG9zaXRpb246IGNlbnRlciBjZW50ZXI7XG4gICAgICBiYWNrZ3JvdW5kLXNpemU6IGNvbnRhaW47XG4gICAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gICAgICB6LWluZGV4OiAxMDtcblxuICAgICAgJHtwcm9wcy5pc0hpZ2hsaWdodGVkID8gJ29wYWNpdHk6IDAuNzsnIDogJyd9XG4gICAgYH1cbiAgICBzcmM9e2NyZWF0ZUdyYXZhdGFySW1nVXJsKHByb3BzLmdyYXZhdGFySGFzaCwgcHJvcHMuc2l6ZSl9XG4gICAgc3JjU2V0PXtbXG4gICAgICBgJHtjcmVhdGVHcmF2YXRhckltZ1VybChwcm9wcy5ncmF2YXRhckhhc2gsIHByb3BzLnNpemUpfSAxeGAsXG4gICAgICBgJHtjcmVhdGVHcmF2YXRhckltZ1VybChwcm9wcy5ncmF2YXRhckhhc2gsIHByb3BzLnNpemUsIDIpfSAyeGAsXG4gICAgXS5qb2luKCcsJyl9XG4gICAgLyoqXG4gICAgICogQmFzZWQgb24gaHR0cHM6Ly93d3cudzMub3JnL1dBSS90dXRvcmlhbHMvaW1hZ2VzL2RlY2lzaW9uLXRyZWUvOlxuICAgICAqIGltYWdlIGNvbnRyaWJ1dGVzIG1lYW5pbmcgdG8gdGhlIGN1cnJlbnQgcGFnZSBvciBjb250ZXh0IGFuZCBpdCBzaG93cyBjb250ZW50IHRoYXQgaXMgcmVkdW5kYW50IHRvIHJlYWwgdGV4dCBuZWFyYnlcbiAgICAgKi9cbiAgICBhbHQ9XCJcIlxuICAvPlxuKTtcbkdyYXZhdGFySW1nLmRpc3BsYXlOYW1lID0gJ0dyYXZhdGFySW1nJztcblxuY29uc3QgSW5pdGlhbHMgPSAocHJvcHM6IFRJbml0aWFsc1Byb3BzKSA9PiAoXG4gIDxkaXZcbiAgICBjc3M9e2Nzc2BcbiAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICAgIGZvbnQtc2l6ZTogJHthdmF0YXJTaXplc1twcm9wcy5zaXplXS5mb250U2l6ZX07XG4gICAgYH1cbiAgPlxuICAgIHtnZXRJbml0aWFsc0Zyb21OYW1lKHtcbiAgICAgIGZpcnN0TmFtZTogcHJvcHMuZmlyc3ROYW1lLFxuICAgICAgbGFzdE5hbWU6IHByb3BzLmxhc3ROYW1lLFxuICAgIH0pfVxuICA8L2Rpdj5cbik7XG5Jbml0aWFscy5kaXNwbGF5TmFtZSA9ICdJbml0aWFscyc7XG5cbmNvbnN0IEF2YXRhciA9IChwcm9wczogVEF2YXRhclByb3BzKSA9PiAoXG4gIDxkaXZcbiAgICBjc3M9e2Nzc2BcbiAgICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke2Rlc2lnblRva2Vucy5iYWNrZ3JvdW5kQ29sb3JGb3JBdmF0YXJ9O1xuICAgICAgYm9yZGVyLXJhZGl1czogMTAwJTtcbiAgICAgIGZvbnQtc2l6ZTogJHtkZXNpZ25Ub2tlbnMuZm9udFNpemVEZWZhdWx0fTtcbiAgICAgIGNvbG9yOiAke2Rlc2lnblRva2Vucy5jb2xvclN1cmZhY2V9O1xuICAgICAgZGlzcGxheTogZmxleDtcbiAgICAgIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICAgICAgb3ZlcmZsb3c6IGhpZGRlbjtcbiAgICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcblxuICAgICAgaGVpZ2h0OiAke2F2YXRhclNpemVzW3Byb3BzLnNpemVdLndpZHRofTtcbiAgICAgIHdpZHRoOiAke2F2YXRhclNpemVzW3Byb3BzLnNpemVdLndpZHRofTtcblxuICAgICAgJHtwcm9wcy5pc0hpZ2hsaWdodGVkXG4gICAgICAgID8gYGJhY2tncm91bmQtY29sb3I6ICR7ZGVzaWduVG9rZW5zLmJhY2tncm91bmRDb2xvckZvckF2YXRhcldoZW5IaWdobGlnaHRlZH07YFxuICAgICAgICA6ICcnfVxuICAgIGB9XG4gICAgey4uLmZpbHRlckRhdGFBdHRyaWJ1dGVzKHByb3BzKX1cbiAgPlxuICAgIDxHcmF2YXRhckltZ1xuICAgICAgZ3JhdmF0YXJIYXNoPXtwcm9wcy5ncmF2YXRhckhhc2h9XG4gICAgICBzaXplPXtwcm9wcy5zaXplfVxuICAgICAgaXNIaWdobGlnaHRlZD17cHJvcHMuaXNIaWdobGlnaHRlZH1cbiAgICAvPlxuICAgIDxJbml0aWFsc1xuICAgICAgc2l6ZT17cHJvcHMuc2l6ZX1cbiAgICAgIGZpcnN0TmFtZT17cHJvcHMuZmlyc3ROYW1lfVxuICAgICAgbGFzdE5hbWU9e3Byb3BzLmxhc3ROYW1lfVxuICAgIC8+XG4gIDwvZGl2PlxuKTtcblxuQXZhdGFyLmRpc3BsYXlOYW1lID0gJ0F2YXRhcic7XG5BdmF0YXIuZGVmYXVsdFByb3BzID0gZGVmYXVsdFByb3BzO1xuXG5leHBvcnQgZGVmYXVsdCBBdmF0YXI7XG4iXX0= */")
-}, filterDataAttributes(props)), {}, {
-  children: [jsx(GravatarImg, {
-    gravatarHash: props.gravatarHash,
-    size: props.size,
-    isHighlighted: props.isHighlighted
-  }), jsx(Initials, {
-    size: props.size,
-    firstName: props.firstName,
-    lastName: props.lastName
-  })]
-}));
+const Avatar = props => {
+  const avatarSize = getWidthSize(props.size);
+  const foregroundColor = getForegroundColor(props.color);
+  return jsx("div", _objectSpread(_objectSpread({
+    css: getAvatarStyles(props)
+  }, filterDataAttributes(props)), {}, {
+    children: props !== null && props !== void 0 && props.icon ? jsx("div", {
+      css: /*#__PURE__*/css("height:calc(", avatarSize, " - 45%);width:calc(", avatarSize, " - 45%);" + (process.env.NODE_ENV === "production" ? "" : ";label:Avatar;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImF2YXRhci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBd0lrQiIsImZpbGUiOiJhdmF0YXIudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgUmVhY3RFbGVtZW50LCBjbG9uZUVsZW1lbnQgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgeyBmaWx0ZXJEYXRhQXR0cmlidXRlcyB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L3V0aWxzJztcbmltcG9ydCB7XG4gIGdldEF2YXRhclN0eWxlcyxcbiAgZ2V0Rm9udFNpemUsXG4gIGdldEZvcmVncm91bmRDb2xvcixcbiAgZ2V0V2lkdGhTaXplLFxufSBmcm9tICcuL2F2YXRhci5zdHlsZXMnO1xuXG5leHBvcnQgdHlwZSBUQXZhdGFyUHJvcHMgPSB7XG4gIC8qKlxuICAgKiBUaGUgZmlyc3QgbmFtZSBvZiB0aGUgdXNlci5cbiAgICovXG4gIGZpcnN0TmFtZT86IHN0cmluZztcbiAgLyoqXG4gICAqIFRoZSBsYXN0IG5hbWUgb2YgdGhlIHVzZXIuXG4gICAqL1xuICBsYXN0TmFtZT86IHN0cmluZztcbiAgLyoqXG4gICAqIFRoZSBoYXNoZWQgc3RyaW5nIG9mIHRoZSB1c2VyIGdyYXZhdGFyLlxuICAgKi9cbiAgZ3JhdmF0YXJIYXNoOiBzdHJpbmc7XG4gIC8qKlxuICAgKiBFbmhhbmNlcyB0aGUgYXBwZWFyYW5jZSBvZiB0aGUgYXZhdGFyLlxuICAgKi9cbiAgaXNIaWdobGlnaHRlZD86IGJvb2xlYW47XG4gIC8qKlxuICAgKiBUaGUgc2l6ZSBvZiB0aGUgcmVuZGVyZWQgYXZhdGFyLlxuICAgKi9cbiAgc2l6ZTogJ3MnIHwgJ20nIHwgJ2wnO1xuICAvKipcbiAgICogVGhlIGNvbG9yIG9mIHRoZSBhdmF0YXIuXG4gICAqL1xuICBjb2xvcj86ICdhY2NlbnQnIHwgJ3B1cnBsZScgfCAndHVycXVvaXNlJyB8ICdicm93bic7XG4gIC8qKiBhbiA8SWNvbiAvPiBjb21wb25lbnRcbiAgICovXG4gIGljb24/OiBSZWFjdEVsZW1lbnQ7XG59O1xuXG5leHBvcnQgdHlwZSBUR3JhdmF0YXJJbWdQcm9wcyA9IFBpY2s8XG4gIFRBdmF0YXJQcm9wcyxcbiAgJ2dyYXZhdGFySGFzaCcgfCAnaXNIaWdobGlnaHRlZCcgfCAnc2l6ZSdcbj47XG5cbmV4cG9ydCB0eXBlIFRJbml0aWFsc1Byb3BzID0gUGljazxcbiAgVEF2YXRhclByb3BzLFxuICAnZmlyc3ROYW1lJyB8ICdsYXN0TmFtZScgfCAnc2l6ZSdcbj47XG5cbmNvbnN0IGRlZmF1bHRQcm9wczogUGljazxcbiAgVEF2YXRhclByb3BzLFxuICAnZmlyc3ROYW1lJyB8ICdsYXN0TmFtZScgfCAnaXNIaWdobGlnaHRlZCcgfCAnc2l6ZScgfCAnY29sb3InXG4+ID0ge1xuICBmaXJzdE5hbWU6ICcnLFxuICBsYXN0TmFtZTogJycsXG4gIGlzSGlnaGxpZ2h0ZWQ6IGZhbHNlLFxuICBzaXplOiAncycsXG4gIGNvbG9yOiAnYWNjZW50Jyxcbn07XG5cbmNvbnN0IGdldEZpcnN0Q2hhciA9IChzdHI6IHN0cmluZykgPT5cbiAgdHlwZW9mIHN0ciA9PT0gJ3N0cmluZycgPyBzdHIudHJpbSgpLnNsaWNlKDAsIDEpLnRvVXBwZXJDYXNlKCkgOiAnJztcblxuY29uc3QgZ2V0SW5pdGlhbHNGcm9tTmFtZSA9ICh7XG4gIGZpcnN0TmFtZSA9ICcnLFxuICBsYXN0TmFtZSA9ICcnLFxufTogUGljazxUQXZhdGFyUHJvcHMsICdmaXJzdE5hbWUnIHwgJ2xhc3ROYW1lJz4pID0+XG4gIGAke2dldEZpcnN0Q2hhcihmaXJzdE5hbWUpfSR7Z2V0Rmlyc3RDaGFyKGxhc3ROYW1lKX1gO1xuLyoqXG4gKiBgc2AgLSBkZWZpbmVzIHRoZSBzaXplLiBXZSB3YW50IGEgYmlnZ2VyIG9uZSBpZiB0aGUgdXNlciBpcyBvbiBhIHJldGluYS1kaXNwbGF5XG4gKiBgZGAgLSBkZWZpbmVzIHRoZSBkZWZhdWx0IGlmIHRoZSB1c2VyIGlzIG5vdCBrbm93biB0byBHcmF2YXRhci4gSXQgcmV0dXJucyBhIGJsYW5rIGltYWdlLFxuICogICAgICAgIHdoaWNoIGxldCB0aGUgaW5pdGlhbHMgdW5kZXJuZWF0aCBzaGluZSB0aHJvdWdoXG4gKlxuICogQHNlZTogaHR0cHM6Ly9kZS5ncmF2YXRhci5jb20vc2l0ZS9pbXBsZW1lbnQvaW1hZ2VzL1xuICovXG5jb25zdCBjcmVhdGVHcmF2YXRhckltZ1VybCA9IChcbiAgbWQ1SGFzaDogVEF2YXRhclByb3BzWydncmF2YXRhckhhc2gnXSxcbiAgc2l6ZTogVEF2YXRhclByb3BzWydzaXplJ10sXG4gIG11bHRpcGx5Qnk6IG51bWJlciA9IDFcbikgPT4ge1xuICBjb25zdCBpbWFnZVNpemUgPSBnZXRXaWR0aFNpemUoc2l6ZSk7XG4gIGNvbnN0IHNpemVBc0ludCA9IHBhcnNlSW50KGltYWdlU2l6ZS5yZXBsYWNlKC9weCQvLCAnJyksIDEwKTtcbiAgY29uc3QgZ3JhdmF0YXJTaXplID0gc2l6ZUFzSW50ICogbXVsdGlwbHlCeTtcbiAgcmV0dXJuIGBodHRwczovL3d3dy5ncmF2YXRhci5jb20vYXZhdGFyLyR7bWQ1SGFzaH0/cz0ke2dyYXZhdGFyU2l6ZX0mZD1ibGFua2A7XG59O1xuXG5jb25zdCBHcmF2YXRhckltZyA9IChwcm9wczogVEdyYXZhdGFySW1nUHJvcHMpID0+IChcbiAgPGltZ1xuICAgIGNzcz17Y3NzYFxuICAgICAgYmFja2dyb3VuZC1wb3NpdGlvbjogY2VudGVyIGNlbnRlcjtcbiAgICAgIGJhY2tncm91bmQtc2l6ZTogY29udGFpbjtcbiAgICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICAgIHotaW5kZXg6IDEwO1xuXG4gICAgICAke3Byb3BzLmlzSGlnaGxpZ2h0ZWQgPyAnb3BhY2l0eTogMC43OycgOiAnJ31cbiAgICBgfVxuICAgIHNyYz17Y3JlYXRlR3JhdmF0YXJJbWdVcmwocHJvcHMuZ3JhdmF0YXJIYXNoLCBwcm9wcy5zaXplKX1cbiAgICBzcmNTZXQ9e1tcbiAgICAgIGAke2NyZWF0ZUdyYXZhdGFySW1nVXJsKHByb3BzLmdyYXZhdGFySGFzaCwgcHJvcHMuc2l6ZSl9IDF4YCxcbiAgICAgIGAke2NyZWF0ZUdyYXZhdGFySW1nVXJsKHByb3BzLmdyYXZhdGFySGFzaCwgcHJvcHMuc2l6ZSwgMil9IDJ4YCxcbiAgICBdLmpvaW4oJywnKX1cbiAgICAvKipcbiAgICAgKiBCYXNlZCBvbiBodHRwczovL3d3dy53My5vcmcvV0FJL3R1dG9yaWFscy9pbWFnZXMvZGVjaXNpb24tdHJlZS86XG4gICAgICogaW1hZ2UgY29udHJpYnV0ZXMgbWVhbmluZyB0byB0aGUgY3VycmVudCBwYWdlIG9yIGNvbnRleHQgYW5kIGl0IHNob3dzIGNvbnRlbnQgdGhhdCBpcyByZWR1bmRhbnQgdG8gcmVhbCB0ZXh0IG5lYXJieVxuICAgICAqL1xuICAgIGFsdD1cIlwiXG4gIC8+XG4pO1xuR3JhdmF0YXJJbWcuZGlzcGxheU5hbWUgPSAnR3JhdmF0YXJJbWcnO1xuXG5jb25zdCBJbml0aWFscyA9IChwcm9wczogVEluaXRpYWxzUHJvcHMpID0+IHtcbiAgY29uc3QgaW5pdGlhbHNGcm9tTmFtZSA9IGdldEluaXRpYWxzRnJvbU5hbWUoe1xuICAgIGZpcnN0TmFtZTogcHJvcHMuZmlyc3ROYW1lLFxuICAgIGxhc3ROYW1lOiBwcm9wcy5sYXN0TmFtZSxcbiAgfSk7XG4gIHJldHVybiAoXG4gICAgPGRpdlxuICAgICAgY3NzPXtjc3NgXG4gICAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICAgICAgZm9udC1zaXplOiAke2dldEZvbnRTaXplKGluaXRpYWxzRnJvbU5hbWUsIHByb3BzLnNpemUpfTtcbiAgICAgIGB9XG4gICAgPlxuICAgICAge2luaXRpYWxzRnJvbU5hbWV9XG4gICAgPC9kaXY+XG4gICk7XG59O1xuSW5pdGlhbHMuZGlzcGxheU5hbWUgPSAnSW5pdGlhbHMnO1xuXG5jb25zdCBBdmF0YXIgPSAocHJvcHM6IFRBdmF0YXJQcm9wcykgPT4ge1xuICBjb25zdCBhdmF0YXJTaXplID0gZ2V0V2lkdGhTaXplKHByb3BzLnNpemUpO1xuICBjb25zdCBmb3JlZ3JvdW5kQ29sb3IgPSBnZXRGb3JlZ3JvdW5kQ29sb3IocHJvcHMuY29sb3IpO1xuICByZXR1cm4gKFxuICAgIDxkaXYgY3NzPXtnZXRBdmF0YXJTdHlsZXMocHJvcHMpfSB7Li4uZmlsdGVyRGF0YUF0dHJpYnV0ZXMocHJvcHMpfT5cbiAgICAgIHtwcm9wcz8uaWNvbiA/IChcbiAgICAgICAgPGRpdlxuICAgICAgICAgIGNzcz17Y3NzYFxuICAgICAgICAgICAgaGVpZ2h0OiBjYWxjKCR7YXZhdGFyU2l6ZX0gLSA0NSUpO1xuICAgICAgICAgICAgd2lkdGg6IGNhbGMoJHthdmF0YXJTaXplfSAtIDQ1JSk7XG4gICAgICAgICAgYH1cbiAgICAgICAgPlxuICAgICAgICAgIHtjbG9uZUVsZW1lbnQocHJvcHM/Lmljb24sIHtcbiAgICAgICAgICAgIHNpemU6ICdzY2FsZScsXG4gICAgICAgICAgICBjb2xvcjogZm9yZWdyb3VuZENvbG9yLFxuICAgICAgICAgICAgYmFja2dyb3VuZGNvbG9yOiBmb3JlZ3JvdW5kQ29sb3IsXG4gICAgICAgICAgfSl9XG4gICAgICAgIDwvZGl2PlxuICAgICAgKSA6IChcbiAgICAgICAgPD5cbiAgICAgICAgICA8R3JhdmF0YXJJbWdcbiAgICAgICAgICAgIGdyYXZhdGFySGFzaD17cHJvcHMuZ3JhdmF0YXJIYXNofVxuICAgICAgICAgICAgc2l6ZT17cHJvcHMuc2l6ZX1cbiAgICAgICAgICAgIGlzSGlnaGxpZ2h0ZWQ9e3Byb3BzLmlzSGlnaGxpZ2h0ZWR9XG4gICAgICAgICAgLz5cbiAgICAgICAgICA8SW5pdGlhbHNcbiAgICAgICAgICAgIHNpemU9e3Byb3BzLnNpemV9XG4gICAgICAgICAgICBmaXJzdE5hbWU9e3Byb3BzLmZpcnN0TmFtZX1cbiAgICAgICAgICAgIGxhc3ROYW1lPXtwcm9wcy5sYXN0TmFtZX1cbiAgICAgICAgICAvPlxuICAgICAgICA8Lz5cbiAgICAgICl9XG4gICAgPC9kaXY+XG4gICk7XG59O1xuQXZhdGFyLmRpc3BsYXlOYW1lID0gJ0F2YXRhcic7XG5BdmF0YXIuZGVmYXVsdFByb3BzID0gZGVmYXVsdFByb3BzO1xuXG5leHBvcnQgZGVmYXVsdCBBdmF0YXI7XG4iXX0= */"),
+      children: /*#__PURE__*/cloneElement(props === null || props === void 0 ? void 0 : props.icon, {
+        size: 'scale',
+        color: foregroundColor,
+        backgroundcolor: foregroundColor
+      })
+    }) : jsxs(Fragment, {
+      children: [jsx(GravatarImg, {
+        gravatarHash: props.gravatarHash,
+        size: props.size,
+        isHighlighted: props.isHighlighted
+      }), jsx(Initials, {
+        size: props.size,
+        firstName: props.firstName,
+        lastName: props.lastName
+      })]
+    })
+  }));
+};
+Avatar.propTypes = process.env.NODE_ENV !== "production" ? {
+  firstName: _pt.string,
+  lastName: _pt.string,
+  gravatarHash: _pt.string.isRequired,
+  isHighlighted: _pt.bool,
+  size: _pt.oneOf(['s', 'm', 'l']).isRequired,
+  color: _pt.oneOf(['accent', 'purple', 'turquoise', 'brown']),
+  icon: _pt.element
+} : {};
 Avatar.displayName = 'Avatar';
 Avatar.defaultProps = defaultProps;
 var Avatar$1 = Avatar;
 // NOTE: This string will be replaced on build time with the package version.
-var version = "16.7.5";
+var version = "16.9.0";
 export { Avatar$1 as default, version };

package/dist/declarations/src/avatar.d.ts CHANGED Viewed

@@ -1,15 +1,18 @@
+import { ReactElement } from 'react';
 export type TAvatarProps = {
     firstName?: string;
     lastName?: string;
     gravatarHash: string;
     isHighlighted?: boolean;
     size: 's' | 'm' | 'l';
+    color?: 'accent' | 'purple' | 'turquoise' | 'brown';
+    icon?: ReactElement;
 };
 export type TGravatarImgProps = Pick<TAvatarProps, 'gravatarHash' | 'isHighlighted' | 'size'>;
 export type TInitialsProps = Pick<TAvatarProps, 'firstName' | 'lastName' | 'size'>;
 declare const Avatar: {
     (props: TAvatarProps): import("@emotion/react/jsx-runtime").JSX.Element;
     displayName: string;
-    defaultProps: Pick<TAvatarProps, "isHighlighted" | "size" | "firstName" | "lastName">;
+    defaultProps: Pick<TAvatarProps, "color" | "size" | "isHighlighted" | "firstName" | "lastName">;
 };
 export default Avatar;

package/dist/declarations/src/avatar.styles.d.ts ADDED Viewed

@@ -0,0 +1,6 @@
+import { TAvatarProps } from './avatar';
+export declare const getFontSize: (avatarInitials: string, avatarSize: TAvatarProps['size']) => "var(--font-size-10, 0.75rem)" | "var(--font-size-30, 1rem)" | "var(--font-size-50, 1.25rem)" | "var(--font-size-80, 2.5rem)" | "var(--font-size-90, 3rem)";
+export declare const getWidthSize: (avatarSize: TAvatarProps['size']) => string;
+export declare const getBackgroundColor: (avatarColor: TAvatarProps['color'], isHighlighted: TAvatarProps['isHighlighted']) => "var(--color-accent-90, hsl(195, 35.2941176471%, 90%))" | "var(--color-accent-95, hsl(195, 35.2941176471%, 95%))" | "var(--color-brown-90, hsl(35, 90%, 90%))" | "var(--color-brown-95, hsl(35, 80%, 95%))" | "var(--color-purple-90, hsl(248, 50%, 90%))" | "var(--color-purple-95, hsl(248, 80%, 95%))" | "var(--color-turquoise-90, hsl(180, 40%, 90%))" | "var(--color-turquoise-95, hsl(180, 80%, 95%))";
+export declare const getForegroundColor: (avatarColor: TAvatarProps['color']) => "var(--color-primary, hsl(175, 55%, 45%))" | "var(--color-primary-20, hsl(175, 55%, 20%))" | "var(--color-primary-25, hsl(175, 55%, 25%))" | "var(--color-primary-30, hsl(175, 55%, 30%))" | "var(--color-primary-40, hsl(175, 55%, 40%))" | "var(--color-primary-85, hsl(175, 70%, 85%))" | "var(--color-primary-90, hsl(175, 70%, 90%))" | "var(--color-primary-95, hsl(175, 90%, 95%))" | "var(--color-accent, #213c45)" | "var(--color-accent-10, hsl(195, 35.2941176471%, 10%))" | "var(--color-accent-20, hsl(195, 35.2941176471%, 20%))" | "var(--color-accent-30, hsl(195, 35.2941176471%, 30%))" | "var(--color-accent-40, hsl(195, 35.2941176471%, 40%))" | "var(--color-accent-50, hsl(195, 35%, 50%))" | "var(--color-accent-60, hsl(195, 35.2941176471%, 60%))" | "var(--color-accent-85, hsl(195, 35%, 85%))" | "var(--color-accent-90, hsl(195, 35.2941176471%, 90%))" | "var(--color-accent-95, hsl(195, 35.2941176471%, 95%))" | "var(--color-accent-98, hsl(195, 35.2941176471%, 98%))" | "var(--color-brown-10, hsl(35, 90%, 10%))" | "var(--color-brown-20, hsl(35, 50%, 20%))" | "var(--color-brown-35, hsl(35, 25%, 35%))" | "var(--color-brown-50, hsl(35, 30%, 50%))" | "var(--color-brown-70, hsl(35, 40%, 70%))" | "var(--color-brown-85, hsl(35, 60%, 85%))" | "var(--color-brown-90, hsl(35, 90%, 90%))" | "var(--color-brown-95, hsl(35, 80%, 95%))" | "var(--color-brown-98, hsl(35, 90%, 98%))" | "var(--color-purple-10, hsl(248, 90%, 10%))" | "var(--color-purple-20, hsl(248, 50%, 20%))" | "var(--color-purple-35, hsl(248, 25%, 35%))" | "var(--color-purple-50, hsl(248, 30%,50%))" | "var(--color-purple-70, hsl(248, 40%, 70%))" | "var(--color-purple-85, hsl(248, 60%, 85%))" | "var(--color-purple-90, hsl(248, 50%, 90%))" | "var(--color-purple-95, hsl(248, 80%, 95%))" | "var(--color-purple-98, hsl(248, 90%, 98%))" | "var(--color-turquoise-10, hsl(180, 90%, 10%))" | "var(--color-turquoise-20, hsl(180, 50%, 20%))" | "var(--color-turquoise-35, hsl(180, 25%, 35%))" | "var(--color-turquoise-50, hsl(180, 30%, 45%))" | "var(--color-turquoise-70, hsl(180, 40%, 70%))" | "var(--color-turquoise-85, hsl(180, 60%, 85%))" | "var(--color-turquoise-90, hsl(180, 40%, 90%))" | "var(--color-turquoise-95, hsl(180, 80%, 95%))" | "var(--color-turquoise-98, hsl(180, 90%, 98%))" | "var(--color-neutral, hsl(232, 18%, 80%))" | "var(--color-neutral-05, hsl(0deg 0% 80% / 5%))" | "var(--color-neutral-10, hsl(0deg 0% 80% / 10%))" | "var(--color-neutral-40, hsl(232, 18%, 40%))" | "var(--color-neutral-60, hsl(232, 18%, 60%))" | "var(--color-neutral-85, hsl(232, 18%, 85%))" | "var(--color-neutral-90, hsl(232, 18%, 90%))" | "var(--color-neutral-95, hsl(232, 18%, 95%))" | "var(--color-neutral-98, hsl(232, 18%, 98%))" | "var(--color-info, #078cdf)" | "var(--color-info-40, hsl(203.05555555555554, 93.9130434783%, 40%))" | "var(--color-info-85, hsl(203.05555555555554, 93.9130434783%, 85%))" | "var(--color-info-90, #CEEBFD)" | "var(--color-info-95, hsl(203.05555555555554, 93.9130434783%, 95%))" | "var(--color-warning, #f16d0e)" | "var(--color-warning-25, hsl(25.110132158590307, 89.0196078431%, 25%))" | "var(--color-warning-40, hsl(25.110132158590307, 89.0196078431%, 40%))" | "var(--color-warning-85, hsl(25.110132158590307, 89.0196078431%, 85%))" | "var(--color-warning-95, hsl(25.110132158590307, 89.0196078431%, 95%))" | "var(--color-error, #e60050)" | "var(--color-error-25, hsl(339.1304347826087, 100%, 25%))" | "var(--color-error-40, hsl(339.1304347826087, 100%, 40%))" | "var(--color-error-85, hsl(339.1304347826087, 100%, 85%))" | "var(--color-error-95, hsl(339.1304347826087, 100%, 95%))" | "var(--color-solid, #1a1a1a)" | "var(--color-solid-05, hsl(0deg 0% 10% / 5%))" | "var(--color-solid-10, hsl(0deg 0% 10% / 10%))" | "var(--color-surface, #fff)" | "var(--border-radius-1, 1px)" | "var(--border-radius-2, 2px)" | "var(--border-radius-4, 4px)" | "var(--border-radius-6, 6px)" | "var(--border-radius-8, 8px)" | "var(--border-radius-20, 20px)" | "var(--border-width-1, 1px)" | "var(--border-width-2, 2px)" | "var(--font-family, 'Inter', system-ui)" | "var(--font-size-10, 0.75rem)" | "var(--font-size-12, 0.8rem)" | "var(--font-size-20, 0.875rem)" | "var(--font-size-30, 1rem)" | "var(--font-size-40, 1.125rem)" | "var(--font-size-50, 1.25rem)" | "var(--font-size-60, 1.5rem)" | "var(--font-size-70, 2rem)" | "var(--font-size-80, 2.5rem)" | "var(--font-size-90, 3rem)" | "var(--font-size-15, 0.9231rem)" | "var(--font-size-35, 1.0769rem)" | "var(--font-size-45, 1.2308rem)" | "var(--font-size-63, 1.5385rem)" | "var(--font-size-66, 1.8462rem)" | "var(--font-size-69, 2.4615rem)" | "var(--font-size-78, 3rem)" | "var(--font-weight-300, 300)" | "var(--font-weight-400, 400)" | "var(--font-weight-500, 500)" | "var(--font-weight-600, 600)" | "var(--font-weight-700, 700)" | "var(--line-height-05, 1.125rem)" | "var(--line-height-10, 1.25rem)" | "var(--line-height-18, 1.3rem)" | "var(--line-height-20, 1.375rem)" | "var(--line-height-30, 1.5rem)" | "var(--line-height-40, 1.625rem)" | "var(--line-height-50, 1.75rem)" | "var(--line-height-60, 2.125rem)" | "var(--shadow-0, none)" | "var(--shadow-1, 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24))" | "var(--shadow-2, 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23))" | "var(--shadow-3, 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23))" | "var(--shadow-4, 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22))" | "var(--shadow-5, 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22))" | "var(--shadow-6, 0 -1px 2px 0 rgba(0, 0, 0, 0.2))" | "var(--shadow-7, 0 -1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24))" | "var(--shadow-8, 0 1px 9.5px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24))" | "var(--shadow-9, inset 0 -1px 3px 0 rgba(0, 0, 0, 0.1), inset 0 1px 1.5px 0 rgba(0, 0, 0, 0.2), inset 0 1px 1.5px 0 rgba(0, 0, 0, 0.25))" | "var(--shadow-10, 0 0 0 1px rgba(224, 230, 237, 0.5))" | "var(--shadow-11, 0 1px 0.5px rgba(0, 0, 0, 0.24), 0 -1px 0.75px rgba(0, 0, 0, 0.12))" | "var(--shadow-12, 0 0 1px rgba(0, 0, 0, 0.25))" | "var(--shadow-13, 0 0 1px rgba(0, 0, 0, 0.25))" | "var(--shadow-14, 0 0 0.5px rgba(0, 0, 0, 0.1))" | "var(--shadow-15, 0 2px 2px rgba(0, 0, 0, 0.24), 0 1px 4.75px rgba(0, 0, 0, 0.12))" | "var(--shadow-16, 0.5px 1.5px 4px 1px rgba(0, 0, 0, 0.25), -0.5px -0.5px 4px 1px rgba(0, 0, 0, 0.25))" | "var(--shadow-17, 0 1px 5px 0 rgba(0, 0, 0, 0.05))" | "var(--constraint-scale, 100%)" | "var(--constraint-1, 42px)" | "var(--constraint-2, 84px)" | "var(--constraint-3, 142px)" | "var(--constraint-4, 184px)" | "var(--constraint-5, 242px)" | "var(--constraint-6, 284px)" | "var(--constraint-7, 342px)" | "var(--constraint-8, 384px)" | "var(--constraint-9, 442px)" | "var(--constraint-10, 484px)" | "var(--constraint-11, 542px)" | "var(--constraint-12, 584px)" | "var(--constraint-13, 642px)" | "var(--constraint-14, 684px)" | "var(--constraint-15, 742px)" | "var(--constraint-16, 784px)" | "var(--spacing-xs, 4px)" | "var(--spacing-s, 8px)" | "var(--spacing-m, 16px)" | "var(--spacing-l, 24px)" | "var(--spacing-xl, 32px)" | "var(--spacing-05, 2px)" | "var(--spacing-10, 4px)" | "var(--spacing-20, 8px)" | "var(--spacing-25, 12px)" | "var(--spacing-30, 16px)" | "var(--spacing-40, 24px)" | "var(--spacing-50, 32px)" | "var(--spacing-60, 48px)" | "var(--spacing-70, 64px)" | "var(--transition-linear-80-ms, 80ms linear)" | "var(--transition-easeinout-150-ms, 150ms ease-in-out)" | "var(--transition-standard, 200ms ease)" | "var(--break-point-mobile, 768px)" | "var(--break-point-desktop, 1024px)" | "var(--break-point-biggerdesktop, 1280px)" | "var(--break-point-giantdesktop, 1680px)" | "var(--break-point-jumbodesktop, 1920px)" | "var(--align-items-for-select-input-tag, center)" | "var(--background-color-for-button-when-active, hsl(0deg 0% 10% / 10%))" | "var(--background-color-for-button-when-hovered, hsl(0deg 0% 10% / 5%))" | "var(--background-color-for-button-as-primary-when-active, #15A390)" | "var(--background-color-for-button-as-primary-when-hovered, #17AB97)" | "var(--background-color-for-button-as-icon-as-primary-when-active, #15A390)" | "var(--background-color-for-button-as-icon-as-primary-when-hovered, hsl(175, 55%, 45%))" | "var(--background-color-for-button-as-icon-as-info-when-active, #057FCC)" | "var(--background-color-for-button-as-icon-as-info-when-hovered, #078cdf)" | "var(--background-color-for-button-as-urgent-when-active, #DC630A)" | "var(--background-color-for-button-as-urgent-when-hovered, #E7680D)" | "var(--background-color-for-button-as-critical-when-active, #B3003E)" | "var(--background-color-for-button-as-critical-when-hovered, #CC0047)" | "var(--background-color-for-button-when-disabled, hsl(195, 35.2941176471%, 95%))" | "var(--background-color-for-input, #fff)" | "var(--background-color-for-input-when-selected, hsl(195, 35.2941176471%, 95%))" | "var(--background-color-for-input-when-disabled, hsl(232, 18%, 95%))" | "var(--background-color-for-input-when-hovered, hsl(232, 18%, 98%))" | "var(--background-color-for-input-when-focused, #fff)" | "var(--background-color-for-input-when-readonly, hsl(232, 18%, 95%))" | "var(--background-color-for-input-when-active, hsl(203.05555555555554, 93.9130434783%, 95%))" | "var(--background-color-for-table-cell-when-hovered, hsl(232, 18%, 98%))" | "var(--background-color-for-table-header, hsl(232, 18%, 98%))" | "var(--background-color-for-tag, hsl(232, 18%, 95%))" | "var(--background-color-for-tag-warning, hsl(25.110132158590307, 89.0196078431%, 95%))" | "var(--background-color-for-tag-when-hovered, hsl(232, 18%, 90%))" | "var(--background-color-for-collapsible-panel-header-icon-when-disabled, #fff)" | "var(--background-color-for-select-input-option-when-hovered, hsl(232, 18%, 98%))" | "var(--background-color-for-stamp-as-positive, hsl(175, 70%, 90%))" | "var(--background-color-for-stamp-as-primary, hsl(175, 70%, 90%))" | "var(--background-color-for-localized-input-label, #fff)" | "var(--background-color-for-localized-input-label-when-readonly, hsl(232, 18%, 95%))" | "var(--background-color-for-localized-input-label-when-disabled, hsl(232, 18%, 95%))" | "var(--background-color-for-localized-rich-text-body-button-when-active, hsl(195, 35.2941176471%, 20%))" | "var(--background-color-for-localized-rich-text-body-button, hsl(232, 18%, 95%))" | "var(--background-color-for-rich-text-dropdown-when-hovered, hsl(232, 18%, 95%))" | "var(--background-color-for-rich-text-more-styles-dropdown-when-hovered, hsl(203.05555555555554, 93.9130434783%, 95%))" | "var(--background-color-for-rich-text-button, hsl(195, 35.2941176471%, 20%))" | "var(--background-color-for-tooltip, hsl(195, 35.2941176471%, 10%))" | "var(--background-color-for-view-switcher, #fff)" | "var(--background-color-for-view-switcher-when-disabled, #fff)" | "var(--background-color-for-view-switcher-when-selected, hsl(232, 18%, 95%))" | "var(--background-color-for-view-switcher-when-hovered, hsl(232, 18%, 95%))" | "var(--background-color-for-content-notification-when-error, hsl(339.1304347826087, 100%, 95%))" | "var(--background-color-for-content-notification-when-info, hsl(203.05555555555554, 93.9130434783%, 95%))" | "var(--background-color-for-content-notification-when-warning, hsl(25.110132158590307, 89.0196078431%, 95%))" | "var(--background-color-for-content-notification-when-success, hsl(175, 90%, 95%))" | "var(--background-color-for-checkbox-input-icon, hsl(175, 55%, 45%))" | "var(--background-color-for-checkbox-input-icon-when-disabled, hsl(232, 18%, 80%))" | "var(--background-color-for-checkbox-input-icon-when-readonly, hsl(232, 18%, 60%))" | "var(--background-color-for-checkbox-input-icon-when-error, #e60050)" | "var(--background-color-for-checkbox-input-icon-when-hovered, hsl(232, 18%, 90%))" | "var(--background-color-for-primary-action-dropdown-when-active, hsl(232, 18%, 90%))" | "var(--background-color-for-primary-action-dropdown-when-disabled, hsl(232, 18%, 95%))" | "var(--background-color-for-toggle-input-track, hsl(232, 18%, 80%))" | "var(--background-color-for-toggle-input-track-when-disabled, hsl(232, 18%, 90%))" | "var(--background-color-for-toggle-input-thumb-when-disabled, hsl(232, 18%, 60%))" | "var(--background-color-for-toggle-input-track-when-checked, hsl(175, 55%, 40%))" | "var(--background-color-for-toggle-input-thumb-when-checked, hsl(175, 55%, 25%))" | "var(--background-color-for-toggle-input-track-when-checked-and-disabled, hsl(195, 35.2941176471%, 90%))" | "var(--background-color-for-toggle-input-thumb-when-checked-and-disabled, hsl(195, 35.2941176471%, 60%))" | "var(--background-color-for-button-as-secondary-when-info, hsl(203.05555555555554, 93.9130434783%, 95%))" | "var(--background-color-for-button-as-secondary-when-info-and-hovered, #CEEBFD)" | "var(--background-color-for-button-as-secondary-when-info-and-active, hsl(203.05555555555554, 93.9130434783%, 85%))" | "var(--border-for-button-as-secondary, 1px solid var(--color-neutral))" | "var(--border-for-button-as-secondary-when-hovered, 1px solid var(--color-neutral))" | "var(--border-for-button-as-secondary-when-active, 1px solid var(--color-neutral))" | "var(--border-for-card-when-raised, 1px solid var(--color-neutral-90))" | "var(--border-for-collapsible-panel-header-icon-when-disabled, none)" | "var(--border-for-view-switcher, 1px solid var(--color-neutral))" | "var(--border-for-select-input-tag, 1px solid var(--color-neutral-85))" | "var(--border-for-radio-input-option, 2px)" | "var(--border-for-calendar-menu-when-focused, none)" | "var(--border-color-for-input, hsl(232, 18%, 80%))" | "var(--border-color-for-input-when-focused, hsl(175, 55%, 45%))" | "var(--border-color-for-input-when-disabled, hsl(232, 18%, 80%))" | "var(--border-color-for-input-when-readonly, #fff)" | "var(--border-color-for-input-when-error, #e60050)" | "var(--border-color-for-input-when-warning, #f16d0e)" | "var(--border-color-for-input-when-hovered, hsl(232, 18%, 80%))" | "var(--border-color-for-tag, hsl(232, 18%, 80%))" | "var(--border-color-for-tag-warning, #f16d0e)" | "var(--border-color-for-tag-when-focused, hsl(232, 18%, 80%))" | "var(--border-color-for-tag-when-hovered, hsl(232, 18%, 80%))" | "var(--border-color-for-button-as-icon, hsl(232, 18%, 80%))" | "var(--border-color-for-button-as-icon-as-info, hsl(232, 18%, 80%))" | "var(--border-color-for-button-as-icon-as-primary, hsl(232, 18%, 80%))" | "var(--border-color-for-button-as-icon-when-disabled, #fff)" | "var(--border-color-for-table-header, #fff)" | "var(--border-color-for-table-header-as-bottom, hsl(232, 18%, 95%))" | "var(--border-color-for-table-manager-droppable-list, hsl(232, 18%, 80%))" | "var(--border-color-for-collapsible-panel-header, hsl(232, 18%, 90%))" | "var(--border-color-for-stamp-when-error, hsl(339.1304347826087, 100%, 85%))" | "var(--border-color-for-stamp-when-warning, hsl(25.110132158590307, 89.0196078431%, 85%))" | "var(--border-color-for-stamp-as-positive, hsl(175, 70%, 85%))" | "var(--border-color-for-stamp-as-information, hsl(203.05555555555554, 93.9130434783%, 85%))" | "var(--border-color-for-stamp-as-primary, hsl(175, 70%, 85%))" | "var(--border-color-for-stamp-as-secondary, hsl(232, 18%, 85%))" | "var(--border-color-for-localized-input-label, hsl(232, 18%, 80%))" | "var(--border-color-for-localized-input-label-when-readonly, #fff)" | "var(--border-color-for-content-notification-when-error, hsl(339.1304347826087, 100%, 85%))" | "var(--border-color-for-content-notification-when-info, hsl(203.05555555555554, 93.9130434783%, 85%))" | "var(--border-color-for-content-notification-when-warning, hsl(25.110132158590307, 89.0196078431%, 85%))" | "var(--border-color-for-content-notification-when-success, hsl(175, 70%, 85%))" | "var(--border-color-for-group-heading-select-input-options, hsl(232, 18%, 90%))" | "var(--border-color-for-select-input-menu, #fff)" | "var(--border-color-for-select-input-when-readonly, hsl(232, 18%, 95%))" | "var(--border-color-for-select-input-menu-when-warning, #fff)" | "var(--border-color-for-select-input-menu-when-error, #fff)" | "var(--border-color-for-checkbox-input-icon, hsl(175, 55%, 45%))" | "var(--border-color-for-checkbox-input-icon-when-disabled, hsl(232, 18%, 80%))" | "var(--border-color-for-checkbox-input-icon-when-readonly, hsl(232, 18%, 60%))" | "var(--border-color-for-checkbox-input-icon-when-error, #e60050)" | "var(--border-color-for-radio-input, hsl(232, 18%, 60%))" | "var(--border-color-for-radio-input-when-disabled, hsl(232, 18%, 80%))" | "var(--border-color-for-radio-input-when-readonly, hsl(232, 18%, 60%))" | "var(--border-color-for-radio-input-when-checked, hsl(175, 55%, 45%))" | "var(--border-color-for-radio-input-when-focused, hsl(232, 18%, 60%))" | "var(--border-color-for-primary-action-dropdown-menu, #fff)" | "var(--border-color-for-button-as-secondary-when-info, hsl(203.05555555555554, 93.9130434783%, 85%))" | "var(--border-radius-for-button-as-big, 4px)" | "var(--border-radius-for-button-as-medium, 4px)" | "var(--border-radius-for-button-as-icon-as-big, 4px)" | "var(--border-radius-for-button-as-icon-as-medium, 4px)" | "var(--border-radius-for-button-as-icon-as-small, 2px)" | "var(--border-radius-for-input, 4px)" | "var(--border-radius-for-tag, 2px)" | "var(--border-radius-for-card, 4px)" | "var(--border-radius-for-table-manager-droppable-list, 4px)" | "var(--border-radius-for-stamp, 4px)" | "var(--border-radius-for-stamp-as-condensed, 2px)" | "var(--border-radius-for-view-switcher, 4px)" | "var(--border-radius-for-content-notification, 4px)" | "var(--border-radius-for-primary-action-dropdown, var(--border-radius-4) 0 0 var(--border-radius-4))" | "var(--border-radius-for-primary-action-dropdown-icon, 0 var(--border-radius-4) var(--border-radius-4) 0)" | "var(--border-radius-for-primary-action-dropdown-menu, 4px)" | "var(--border-width-for-input, 1px)" | "var(--border-width-for-input-when-warning, 1px)" | "var(--border-width-for-input-when-error, 1px)" | "var(--border-width-for-input-when-focused, 1px)" | "var(--border-width-for-tag, 1px 1px 1px 0)" | "var(--border-width-for-select-input, 2px)" | "var(--border-left-width-for-content-notification, 0px)" | "var(--border-width-for-checkbox-input-icon, 2px)" | "var(--border-for-primary-action-dropdown-icon, 1px 1px 1px 0px)" | "var(--box-shadow-for-datetime-input-when-hovered, inset 0 0 0 1px)" | "var(--box-shadow-for-view-switcher, none)" | "var(--box-shadow-for-view-switcher-when-selected, none)" | "var(--box-shadow-for-select-input-when-focused, inset 0 0 0 1px)" | "var(--box-shadow-for-calendar-menu-when-focused, 0 2px 5px 0px rgba(0, 0, 0, 0.15))" | "var(--box-shadow-for-table, 0 1px 5px 0 rgba(0, 0, 0, 0.05))" | "var(--font-color-for-text, #1a1a1a)" | "var(--font-color-for-text-when-disabled, hsl(232, 18%, 60%))" | "var(--font-color-for-input, #1a1a1a)" | "var(--font-color-for-input-when-disabled, hsl(232, 18%, 60%))" | "var(--font-color-for-input-when-error, #e60050)" | "var(--font-color-for-input-when-readonly, hsl(232, 18%, 40%))" | "var(--font-color-for-input-when-warning, #f16d0e)" | "var(--font-color-for-tag, #1a1a1a)" | "var(--font-color-for-tag-remove-icon, hsl(232, 18%, 40%))" | "var(--font-color-for-tag-drag-icon, hsl(232, 18%, 40%))" | "var(--font-color-for-tag-remove-icon-when-hovered, #e60050)" | "var(--font-color-for-tag-when-disabled, hsl(232, 18%, 60%))" | "var(--font-color-for-text-when-inverted, #fff)" | "var(--font-color-for-link-as-inverted, #fff)" | "var(--font-color-for-link-as-primary, hsl(175, 55%, 25%))" | "var(--font-color-for-link-as-secondary, #1a1a1a)" | "var(--font-color-for-link-as-primary-when-active, hsl(175, 55%, 45%))" | "var(--font-color-for-link-as-secondary-when-active, hsl(175, 55%, 45%))" | "var(--font-color-for-table-header, hsl(232, 18%, 40%))" | "var(--font-color-for-localized-input-label, hsl(232, 18%, 60%))" | "var(--font-color-for-view-switcher, hsl(232, 18%, 40%))" | "var(--font-color-for-view-switcher-when-disabled, hsl(232, 18%, 60%))" | "var(--font-color-for-view-switcher-when-selected, #1a1a1a)" | "var(--font-color-for-clear-input-icon, hsl(232, 18%, 40%))" | "var(--font-color-for-clear-input-icon-when-hovered, #e60050)" | "var(--font-color-for-content-notification, #1a1a1a)" | "var(--font-color-for-content-notification-icon-when-error, #e60050)" | "var(--font-color-for-content-notification-icon-when-warning, #f16d0e)" | "var(--font-color-for-content-notification-icon-when-success, hsl(175, 55%, 45%))" | "var(--font-color-for-content-notification-icon-when-info, #078cdf)" | "var(--font-color-for-search-input-icon, hsl(232, 18%, 60%))" | "var(--font-color-for-search-input-icon-when-hovered, hsl(175, 55%, 45%))" | "var(--font-color-for-select-input-icon, hsl(232, 18%, 60%))" | "var(--font-color-for-select-input-when-error, #e60050)" | "var(--font-color-for-select-input-when-warning, #f16d0e)" | "var(--font-color-for-select-input-icon-when-error, #e60050)" | "var(--font-color-for-select-input-icon-when-warning, #f16d0e)" | "var(--font-color-for-money-input-currency-dropdown-indicator, hsl(232, 18%, 40%))" | "var(--font-color-for-search-input-icon-when-readonly, hsl(232, 18%, 60%))" | "var(--font-color-for-checkbox-input-label, #1a1a1a)" | "var(--font-color-for-checkbox-input-label-when-error, #e60050)" | "var(--font-color-for-checkbox-input-label-when-disabled, hsl(232, 18%, 60%))" | "var(--font-color-for-checkbox-input-label-when-readonly, hsl(232, 18%, 40%))" | "var(--font-color-for-radio-input-when-disabled, hsl(232, 18%, 60%))" | "var(--font-color-for-radio-input-when-error, #e60050)" | "var(--font-color-for-radio-input-when-readonly, hsl(232, 18%, 60%))" | "var(--font-color-for-radio-input-when-warning, #f16d0e)" | "var(--font-color-for-flat-button-as-primary, hsl(175, 55%, 25%))" | "var(--font-color-for-flat-button-as-primary-when-hovered, hsl(175, 55%, 45%))" | "var(--font-color-for-flat-button-as-critical, #e60050)" | "var(--font-color-for-flat-button-as-critical-when-hovered, hsl(339.1304347826087, 100%, 25%))" | "var(--font-color-for-flat-button-as-secondary, #1a1a1a)" | "var(--font-color-for-flat-button-as-inverted, #fff)" | "var(--font-color-for-flat-button-icon-when-disabled, hsl(232, 18%, 60%))" | "var(--font-color-for-secondary-icon-button-as-primary, hsl(175, 55%, 25%))" | "var(--font-color-for-secondary-icon-button-as-primary-when-hovered, hsl(175, 55%, 45%))" | "var(--height-for-button-as-big, 40px)" | "var(--height-for-button-as-medium, 32px)" | "var(--height-for-button-as-icon-as-big, 40px)" | "var(--height-for-button-as-icon-as-medium, 32px)" | "var(--height-for-button-as-icon-as-small, 16px)" | "var(--height-for-input, 40px)" | "var(--height-for-view-switcher, 40px)" | "var(--height-for-view-switcher-when-condensed, 32px)" | "var(--height-for-select-input-tag, 32px)" | "var(--height-for-radio-input-option, 18px)" | "var(--height-for-radio-input-option-when-checked, 10px)" | "var(--height-for-primary-action-dropdown, 40px)" | "var(--width-for-avatar-as-medium, 40px)" | "var(--min-width-for-money-input-currency-dropdown, 80px)" | "var(--placeholder-font-color-for-input, hsl(232, 18%, 60%))" | "var(--font-size-for-button, 0.875rem)" | "var(--font-size-for-input, 1rem)" | "var(--font-size-for-text-as-h-1, 1.5rem)" | "var(--font-size-for-text-as-h-2, 1.25rem)" | "var(--font-size-for-text-as-h-3, 1.125rem)" | "var(--font-size-for-text-as-h-4, 1rem)" | "var(--font-size-for-text-as-h-5, 1rem)" | "var(--font-size-for-text-as-body, 1rem)" | "var(--font-size-for-text-as-caption, 0.75rem)" | "var(--font-size-for-text-as-detail, 0.875rem)" | "var(--font-size-for-body, 16px)" | "var(--font-size-for-link, 1rem)" | "var(--font-size-for-view-switcher, 0.875rem)" | "var(--font-size-for-table, 0.875rem)" | "var(--font-size-for-localized-input-label, 1rem)" | "var(--font-size-for-content-notification, 1rem)" | "var(--font-size-for-select-input-tag, 1rem)" | "var(--icon-color-for-datetime-input-icon, hsl(232, 18%, 40%))" | "var(--icon-color-for-datetime-input-icon-when-hovered, #e60050)" | "var(--line-height-for-text-as-h-1, 2.125rem)" | "var(--line-height-for-text-as-h-2, 1.75rem)" | "var(--line-height-for-text-as-h-3, 1.5rem)" | "var(--line-height-for-text-as-h-4, 1.375rem)" | "var(--line-height-for-text-as-h-5, 1.375rem)" | "var(--line-height-for-text-as-body, 1.625rem)" | "var(--line-height-for-text-as-caption, 1.125rem)" | "var(--line-height-for-text-as-detail, 1.375rem)" | "var(--line-height-for-select-input-options, 1.625rem)" | "var(--line-height-for-table-header, 26px)" | "var(--font-weight-for-text-as-h-1, 600)" | "var(--font-weight-for-text-as-h-2, 500)" | "var(--font-weight-for-text-as-h-3, 500)" | "var(--font-weight-for-text-as-h-4, 500)" | "var(--font-weight-for-text-as-h-5, 500)" | "var(--font-weight-for-text-as-body, 400)" | "var(--font-weight-for-text-as-caption, 400)" | "var(--font-weight-for-text-as-detail, 400)" | "var(--font-weight-for-button, 500)" | "var(--font-weight-for-table-header, 500)" | "var(--font-weight-for-text-as-bold, 600)" | "var(--margin-for-table-header, 8px)" | "var(--margin-for-table-cell-as-condensed, 8px)" | "var(--margin-for-view-switcher-icon, 0 var(--spacing-20) 0 0)" | "var(--margin-for-group-heading-select-input-options, 8px)" | "var(--margin-for-select-input-icon, 8px)" | "var(--margin-left-for-select-input-icon, 8px)" | "var(--margin-right-for-money-input-precision-badge, 12px)" | "var(--margin-right-for-search-input-icon, 12px)" | "var(--margin-right-for-clear-input-icon, 8px)" | "var(--margin-left-for-radio-input-label, 4px)" | "var(--margin-right-for-primary-action-dropdown, 8px)" | "var(--margin-top-for-primary-action-dropdown, 8px)" | "var(--margin-for-localized-rich-text-body-button, 0 2px var(--spacing-20) 2px)" | "var(--margin-for-rich-text-divider, var(--spacing-10) 2px)" | "var(--margin-for-rich-text-dropdown-item-label, 0 0 0 var(--spacing-20))" | "var(--margin-for-tag-list, 0 var(--spacing-20) var(--spacing-20) 0)" | "var(--padding-for-stamp, 4px 12px)" | "var(--padding-for-stamp-as-condensed, var(--spacing-05) var(--spacing-10))" | "var(--padding-for-tag, 2px 12px)" | "var(--padding-for-table-header, 24px)" | "var(--padding-for-table-header-as-condensed, 24px)" | "var(--padding-for-table-cell, var(--spacing-30) var(--spacing-40))" | "var(--padding-for-table-cell-as-condensed, var(--spacing-20) var(--spacing-40))" | "var(--padding-for-table-manager-droppable-list, 16px)" | "var(--padding-for-table-manager-settings-panel, var(--spacing-40) var(--spacing-50))" | "var(--padding-for-table-manager-draggable-tag, var(--spacing-10) 0)" | "var(--padding-for-collapsible-panel-header, var(--spacing-30) 0)" | "var(--padding-for-collapsible-panel-header-as-condensed, var(--spacing-20) 0)" | "var(--padding-for-collapsible-panel-section-wrapper, var(--spacing-50) 0 0 calc(var(--spacing-30) + var(--spacing-10)))" | "var(--padding-for-collapsible-panel-section-wrapper-as-condensed, var(--spacing-40) 0 0 calc(var(--spacing-30) + var(--spacing-10)))" | "var(--padding-for-collapsible-panel-section-description, 0 0 var(--spacing-40))" | "var(--padding-for-collapsible-panel-section-description-as-condensed, 0 0 var(--spacing-40))" | "var(--padding-for-input, 16px)" | "var(--padding-for-multiline-input, 8px)" | "var(--padding-for-localized-rich-text-input-label, var(--spacing-20) 12px)" | "var(--padding-for-localized-rich-text-dropdown-button, 5px var(--spacing-20))" | "var(--padding-for-localized-rich-text-dropdown-item, var(--spacing-20) var(--spacing-30))" | "var(--padding-for-localized-rich-text-body-button, var(--spacing-20))" | "var(--padding-for-localized-input-label, 0 12px)" | "var(--padding-for-rich-text-input, var(--spacing-20) var(--spacing-30))" | "var(--padding-for-rich-text-toolbar, none)" | "var(--padding-left-for-rich-text-toolbar, none)" | "var(--padding-for-rich-text-editor-container, var(--spacing-20) 0 0)" | "var(--padding-for-localized-multiline-text-input-label, 0 var(--spacing-20))" | "var(--padding-for-tag-remove-icon, 0 12px)" | "var(--padding-for-tooltip, var(--spacing-20) 12px)" | "var(--padding-for-view-switcher, 0 var(--spacing-30) 0 var(--spacing-30))" | "var(--padding-for-view-switcher-when-condensed, 0 12px 0 12px)" | "var(--padding-for-content-notification, var(--spacing-20) var(--spacing-30))" | "var(--padding-for-content-notification-message, 0 var(--spacing-30) 0 var(--spacing-20))" | "var(--padding-left-for-select-input-options, 16px)" | "var(--padding-right-for-select-input-options, 16px)" | "var(--padding-top-for-select-input-options, 8px)" | "var(--padding-bottom-for-select-input-options, 8px)" | "var(--padding-for-group-heading-select-input-options, 16px)" | "var(--padding-for-select-input-menu, var(--spacing-10) 0)" | "var(--padding-for-money-input-currency-dropdown, 0 12px)" | "var(--padding-for-selectable-search-input-dropdown, 0 12px)" | "var(--padding-for-primary-action-dropdown, 0 var(--spacing-30))" | "var(--padding-for-primary-action-dropdown-icon, 0 var(--spacing-20))" | "var(--padding-for-button-as-medium, 0 var(--spacing-30))" | "var(--padding-for-button-as-big, 0 var(--spacing-30))" | "var(--shadow-box-tag-when-hovered, 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24))" | "var(--shadow-for-button, none)" | "var(--shadow-for-button-when-focused, none)" | "var(--shadow-for-button-when-hovered, none)" | "var(--shadow-for-button-when-active, none)" | "var(--shadow-for-button-when-disabled, none)" | "var(--shadow-for-card-when-raised, 0 1px 5px 0 rgba(0, 0, 0, 0.05))" | "var(--shadow-for-input, none)" | "var(--shadow-for-input-when-focused, inset 0 0 0 1px var(--color-primary))" | "var(--shadow-for-input-when-error, inset 0 0 0 1px var(--color-error))" | "var(--shadow-for-input-when-warning, inset 0 0 0 1px var(--color-warning))" | "var(--shadow-for-tooltip, 0px 1px 2px 0px rgba(0, 0, 0, 0.25))" | "var(--shadow-for-select-input-menu, 0 2px 5px 0px rgba(0, 0, 0, 0.15))" | "var(--shadow-for-primary-action-dropdown, none)" | "var(--shadow-for-primary-action-dropdown-when-hovered, none)" | "var(--shadow-for-primary-action-dropdown-when-active, none)" | "var(--shadow-for-primary-action-dropdown-menu, 0 2px 5px 0px rgba(0, 0, 0, 0.15))" | "var(--shadow-for-toggle-input-thumb, 0px 1px 5px rgba(0, 0, 0, 0.2))" | "var(--shadow-for-tag-when-hovered, none)" | "var(--font-size-m, 1rem)" | "var(--big-button-height, 32px)" | "var(--small-button-height, 24px)" | "var(--size-height-input, 32px)" | "var(--font-family-default, 'Open Sans', sans-serif)" | "var(--font-size-default, 1rem)" | "var(--font-size-small, 0.9231rem)" | "var(--shadow-box-tag-hover, 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24))" | "var(--size-height-tag, 26px)";
+export declare const getAvatarStyles: (avatarProps: TAvatarProps) => import("@emotion/utils").SerializedStyles;

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "@commercetools-uikit/avatar",
   "description": "A component for rendering profile images",
-  "version": "16.7.5",
+  "version": "16.9.0",
   "bugs": "https://github.com/commercetools/ui-kit/issues",
   "repository": {
     "type": "git",
@@ -21,10 +21,11 @@
   "dependencies": {
     "@babel/runtime": "^7.20.13",
     "@babel/runtime-corejs3": "^7.20.13",
-    "@commercetools-uikit/design-system": "16.7.5",
-    "@commercetools-uikit/utils": "16.7.5",
+    "@commercetools-uikit/design-system": "16.9.0",
+    "@commercetools-uikit/utils": "16.9.0",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
+    "lodash": "4.17.21",
     "prop-types": "15.8.1"
   },
   "devDependencies": {