@synerise/ds-avatar 1.2.5 → 1.3.0

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.3.0](https://github.com/synerise/synerise-design/compare/@synerise/ds-avatar@1.2.5...@synerise/ds-avatar@1.3.0) (2026-02-16)
+
+### Features
+
+- **avatar:** add deterministic default SVG avatars based on avatarId ([cbba546](https://github.com/synerise/synerise-design/commit/cbba54646bfea3ba020a5ea3a9b47a5f08078f1e))
+
 ## [1.2.5](https://github.com/synerise/synerise-design/compare/@synerise/ds-avatar@1.2.4...@synerise/ds-avatar@1.2.5) (2026-02-12)
 
 **Note:** Version bump only for package @synerise/ds-avatar

package/dist/Avatar.types.d.ts

@@ -69,6 +69,7 @@ export type UserAvatar = {
     lastName?: string | null;
     email?: string | null;
     avatar?: string | null;
+    avatarId?: string | number;
 };
 export type UserAvatarProps = DefinedAvatarProps & {
     user?: UserAvatar;

package/dist/DefaultAvatarIcon.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { TOTAL_DEFAULT_AVATARS } from './defaultAvatars';
+export { TOTAL_DEFAULT_AVATARS };
+type DefaultAvatarIconProps = {
+    index: number;
+};
+declare const DefaultAvatarIcon: React.FC<DefaultAvatarIconProps>;
+export default DefaultAvatarIcon;

package/dist/DefaultAvatarIcon.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { DEFAULT_AVATARS, TOTAL_DEFAULT_AVATARS } from './defaultAvatars';
+export { TOTAL_DEFAULT_AVATARS };
+var DefaultAvatarIcon = function DefaultAvatarIcon(_ref) {
+  var index = _ref.index;
+  var total = TOTAL_DEFAULT_AVATARS;
+  if (total === 0) {
+    return null;
+  }
+  var safeIndex = (index % total + total) % total;
+  var SvgComponent = DEFAULT_AVATARS[safeIndex];
+  if (!SvgComponent) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(SvgComponent, {
+    width: "100%",
+    height: "100%",
+    style: {
+      display: 'block'
+    }
+  });
+};
+export default DefaultAvatarIcon;

package/dist/UserAvatar/UserAvatar.js

@@ -6,7 +6,8 @@ import Badge from '@synerise/ds-badge';
 import { useTheme } from '@synerise/ds-core';
 import Icon, { UserM, UserS } from '@synerise/ds-icon';
 import Avatar from '../Avatar';
-import { addIconColor, getColorByText, getUserText } from '../utils';
+import DefaultAvatarIcon, { TOTAL_DEFAULT_AVATARS } from '../DefaultAvatarIcon';
+import { addIconColor, getColorByText, getDefaultAvatarIndex, getUserText } from '../utils';
 export var DEFAULT_COLOR = 'grey';
 export var DEFAULT_COLOR_HUE = '500';
 var UserAvatar = function UserAvatar(_ref) {
@@ -31,8 +32,12 @@ var UserAvatar = function UserAvatar(_ref) {
     lastName = _ref2$lastName === void 0 ? '' : _ref2$lastName,
     _ref2$email = _ref2.email,
     email = _ref2$email === void 0 ? '' : _ref2$email,
-    avatar = _ref2.avatar;
-  var avatarText = getUserText(user, src, text);
+    avatar = _ref2.avatar,
+    avatarId = _ref2.avatarId;
+  var hasPhoto = !!(avatar || src);
+  var hasNameInitials = !!(firstName || lastName) || !!text;
+  var useDefaultSvg = avatarId !== undefined && !hasNameInitials && !hasPhoto && TOTAL_DEFAULT_AVATARS > 0;
+  var avatarText = useDefaultSvg ? null : getUserText(user, src, text);
   var defaultTooltip = {
     title: ((firstName || '') + " " + (lastName || '')).trim(),
     description: email || ''
@@ -40,24 +45,36 @@ var UserAvatar = function UserAvatar(_ref) {
   var avatarTooltip = (tooltip === undefined || tooltip === true) && (defaultTooltip.title || defaultTooltip.description) ? defaultTooltip : tooltip;
   var iconColor = theme.palette[DEFAULT_COLOR + "-" + DEFAULT_COLOR_HUE];
   var iconElement = addIconColor(iconComponent, iconColor);
-  var icon = !avatarText ? iconElement || /*#__PURE__*/React.createElement(Icon, {
-    component: size === 'small' ? /*#__PURE__*/React.createElement(UserS, null) : /*#__PURE__*/React.createElement(UserM, null),
-    color: theme.palette['grey-500']
-  }) : null;
-  var _getColorByText = getColorByText(avatarText, backgroundColor),
+  var icon = null;
+  if (useDefaultSvg) {
+    var avatarIndex = getDefaultAvatarIndex(avatarId, TOTAL_DEFAULT_AVATARS);
+    icon = /*#__PURE__*/React.createElement(DefaultAvatarIcon, {
+      index: avatarIndex
+    });
+  } else if (!avatarText) {
+    icon = iconElement || /*#__PURE__*/React.createElement(Icon, {
+      component: size === 'small' ? /*#__PURE__*/React.createElement(UserS, null) : /*#__PURE__*/React.createElement(UserM, null),
+      color: theme.palette['grey-500']
+    });
+  }
+  var _getColorByText = getColorByText(avatarText, useDefaultSvg ? undefined : backgroundColor),
     avatarBackgroundColor = _getColorByText[0],
     avatarBackgroundHue = _getColorByText[1];
   var avatarRender = /*#__PURE__*/React.createElement(Avatar, _extends({
     iconComponent: icon,
+    iconScale: !useDefaultSvg,
     shape: "circle",
     hasStatus: disabled === true ? false : !!badgeStatus,
-    backgroundColor: avatarBackgroundColor,
-    backgroundColorHue: avatarBackgroundHue,
+    backgroundColor: useDefaultSvg ? undefined : avatarBackgroundColor,
+    backgroundColorHue: useDefaultSvg ? undefined : avatarBackgroundHue,
     size: size,
     src: avatar || src,
     tooltip: avatarTooltip,
     disabled: disabled,
-    style: badgeStatus ? {} : style
+    style: _extends({}, badgeStatus ? {} : style, useDefaultSvg ? {
+      background: 'transparent',
+      overflow: 'hidden'
+    } : {})
   }, restProps), children || avatarText);
   return badgeStatus ? /*#__PURE__*/React.createElement("span", {
     style: style

package/dist/defaultAvatars/Icon0001.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const Icon0001: (props: React.SVGProps<SVGSVGElement>) => JSX.Element;
+export default Icon0001;

package/dist/defaultAvatars/Icon0001.js

@@ -0,0 +1,81 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+var Icon0001 = function Icon0001(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    xmlnsXlink: "http://www.w3.org/1999/xlink",
+    viewBox: "0 0 240 240",
+    className: "icon_0001 ds-default-avatar"
+  }, props), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
+    id: "svg-4062376346t1g1",
+    x1: 319.21,
+    y1: 40.79,
+    x2: 79.21,
+    y2: 40.79,
+    gradientTransform: "translate(79.21 319.21) rotate(-90)",
+    gradientUnits: "userSpaceOnUse"
+  }, /*#__PURE__*/React.createElement("stop", {
+    offset: 0,
+    stopColor: "#e1c0af"
+  }), /*#__PURE__*/React.createElement("stop", {
+    offset: 1,
+    stopColor: "#e67674"
+  })), /*#__PURE__*/React.createElement("linearGradient", {
+    id: "svg-4062376346t1g2",
+    x1: 46.04,
+    y1: 88.47,
+    x2: 93.44,
+    y2: 88.47,
+    gradientUnits: "userSpaceOnUse"
+  }, /*#__PURE__*/React.createElement("stop", {
+    offset: 0,
+    stopColor: "#ddb128"
+  }), /*#__PURE__*/React.createElement("stop", {
+    offset: 1,
+    stopColor: "#ecdfd6"
+  }))), /*#__PURE__*/React.createElement("rect", {
+    fill: "url(#svg-4062376346t1g1)",
+    width: 240,
+    height: 240
+  }), /*#__PURE__*/React.createElement("rect", {
+    fill: "#ecdfd6",
+    x: 136.88,
+    y: 50.91,
+    width: 69.11,
+    height: 69.11
+  }), /*#__PURE__*/React.createElement("circle", {
+    fill: "#09110f",
+    cx: 168.72,
+    cy: 92.75,
+    r: 8.71
+  }), /*#__PURE__*/React.createElement("rect", {
+    fill: "#cd3b9f",
+    x: 110.19,
+    y: 64.77,
+    width: 26.69,
+    height: 92.24
+  }), /*#__PURE__*/React.createElement("circle", {
+    fill: "url(#svg-4062376346t1g2)",
+    cx: 69.74,
+    cy: 88.47,
+    r: 23.7
+  }), /*#__PURE__*/React.createElement("circle", {
+    fill: "#09110f",
+    cx: 72.29,
+    cy: 92.75,
+    r: 8.71
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "none",
+    stroke: "#09110f",
+    strokeMiterlimit: 10,
+    strokeWidth: 10,
+    d: "M84.32,185.29c32.87,15.7,55.2,6.95,79.18-17.31"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "none",
+    stroke: "#09110f",
+    strokeMiterlimit: 10,
+    strokeWidth: 10,
+    d: "M99.48,54.91l-58.31-8.27"
+  }));
+};
+export default Icon0001;

package/dist/defaultAvatars/Icon0003.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const Icon0003: (props: React.SVGProps<SVGSVGElement>) => JSX.Element;
+export default Icon0003;

package/dist/defaultAvatars/Icon0003.js

@@ -0,0 +1,53 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+var Icon0003 = function Icon0003(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 240 240",
+    className: "icon_0003 ds-default-avatar"
+  }, props), /*#__PURE__*/React.createElement("rect", {
+    fill: "#bba5ca",
+    x: 0.23,
+    y: 0.15,
+    width: 239.54,
+    height: 239.7
+  }), /*#__PURE__*/React.createElement("rect", {
+    fill: "#d6c2e0",
+    x: 0.46,
+    y: 0.3,
+    width: 113.73,
+    height: 115.36
+  }), /*#__PURE__*/React.createElement("polygon", {
+    fill: "#9c85ad",
+    points: "114.19 47.43 134.24 148.5 106.04 153.62 114.19 47.43"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "none",
+    stroke: "#080808",
+    strokeMiterlimit: 10,
+    strokeWidth: 10,
+    d: "M134.24,148.5c-11.41,6.02-28.2,5.07-28.2,5.07l8.87-106.14"
+  }), /*#__PURE__*/React.createElement("circle", {
+    fill: "#080808",
+    cx: 61.28,
+    cy: 72.06,
+    r: 11
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "#d6c2e0",
+    d: "M157.13,67.52s9.61-14.63,27.96-15.28c18.35-.65,31.45,11.7,31.45,11.7,0,0-7.28,12.35-29.7,13.98-22.42,1.63-29.7-10.4-29.7-10.4Z"
+  }), /*#__PURE__*/React.createElement("circle", {
+    fill: "#080808",
+    cx: 185.73,
+    cy: 67.07,
+    r: 11
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "#f042ac",
+    d: "M116.82,184.28s9.19,23,39.6,17.34c30.42-5.66,29.31-34.58,29.31-34.58l-68.91,17.24Z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "none",
+    stroke: "#080808",
+    strokeMiterlimit: 10,
+    strokeWidth: 10,
+    d: "M110.16,183.67s21.86.95,43.09-4.12,34.85-13.62,34.85-13.62"
+  }));
+};
+export default Icon0003;

package/dist/defaultAvatars/Icon0004.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const Icon0004: (props: React.SVGProps<SVGSVGElement>) => JSX.Element;
+export default Icon0004;

package/dist/defaultAvatars/Icon0004.js

@@ -0,0 +1,53 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+var Icon0004 = function Icon0004(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 240 240",
+    className: "icon_0004 ds-default-avatar"
+  }, props), /*#__PURE__*/React.createElement("rect", {
+    fill: "#d2ffff",
+    x: 0.23,
+    y: 0.15,
+    width: 239.54,
+    height: 239.7
+  }), /*#__PURE__*/React.createElement("rect", {
+    fill: "#ffffff",
+    x: 0.46,
+    y: 0.3,
+    width: 113.73,
+    height: 115.36
+  }), /*#__PURE__*/React.createElement("polygon", {
+    fill: "#8dffff",
+    points: "114.19 47.43 134.24 148.5 106.04 153.62 114.19 47.43"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "none",
+    stroke: "#000000",
+    strokeMiterlimit: 10,
+    strokeWidth: 10,
+    d: "M134.24,148.5c-11.41,6.02-28.2,5.07-28.2,5.07l8.87-106.14"
+  }), /*#__PURE__*/React.createElement("circle", {
+    fill: "#000000",
+    cx: 61.28,
+    cy: 72.06,
+    r: 11
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "#ffffff",
+    d: "M157.13,67.52s9.61-14.63,27.96-15.28c18.35-.65,31.45,11.7,31.45,11.7,0,0-7.28,12.35-29.7,13.98-22.42,1.63-29.7-10.4-29.7-10.4Z"
+  }), /*#__PURE__*/React.createElement("circle", {
+    fill: "#000000",
+    cx: 185.73,
+    cy: 67.07,
+    r: 11
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "#ff77ff",
+    d: "M116.82,184.28s9.19,23,39.6,17.34c30.42-5.66,29.31-34.58,29.31-34.58l-68.91,17.24Z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "none",
+    stroke: "#000000",
+    strokeMiterlimit: 10,
+    strokeWidth: 10,
+    d: "M110.16,183.67s21.86.95,43.09-4.12,34.85-13.62,34.85-13.62"
+  }));
+};
+export default Icon0004;

package/dist/defaultAvatars/Icon0007.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const Icon0007: (props: React.SVGProps<SVGSVGElement>) => JSX.Element;
+export default Icon0007;

package/dist/defaultAvatars/Icon0007.js

@@ -0,0 +1,89 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+var Icon0007 = function Icon0007(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    xmlnsXlink: "http://www.w3.org/1999/xlink",
+    viewBox: "0 0 240 240",
+    className: "icon_0007 ds-default-avatar"
+  }, props), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
+    id: "svg-500633052t3g1",
+    x1: -392.62,
+    y1: 633,
+    x2: -392.38,
+    y2: 633,
+    gradientTransform: "translate(648311 -401801) rotate(-90) scale(1024 -1024)",
+    gradientUnits: "userSpaceOnUse"
+  }, /*#__PURE__*/React.createElement("stop", {
+    offset: 0,
+    stopColor: "#4d9dff"
+  }), /*#__PURE__*/React.createElement("stop", {
+    offset: 1,
+    stopColor: "#008aff"
+  })), /*#__PURE__*/React.createElement("linearGradient", {
+    id: "svg-500633052t3g2",
+    x1: 120,
+    y1: 113.37,
+    x2: 120,
+    y2: 238.56,
+    gradientTransform: "translate(0 240) scale(1 -1)",
+    gradientUnits: "userSpaceOnUse"
+  }, /*#__PURE__*/React.createElement("stop", {
+    offset: 0,
+    stopColor: "#d5ffff"
+  }), /*#__PURE__*/React.createElement("stop", {
+    offset: 1,
+    stopColor: "#19aaff"
+  }))), /*#__PURE__*/React.createElement("rect", {
+    fill: "url(#svg-500633052t3g1)",
+    width: 239.77,
+    height: 239.85
+  }), /*#__PURE__*/React.createElement("rect", {
+    fill: "url(#svg-500633052t3g2)",
+    y: 1.44,
+    width: 240,
+    height: 125.19,
+    opacity: 0.4
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "#d5ffff",
+    opacity: 0.59,
+    d: "M178.21,67h0c-18.1,0-32.92,14.73-32.92,32.73v20.55c0,18,14.81,32.73,32.92,32.73h0c18.1,0,32.92-14.73,32.92-32.73v-20.55c0-18-14.81-32.73-32.92-32.73Z"
+  }), /*#__PURE__*/React.createElement("ellipse", {
+    fill: "#000000",
+    cx: 180.15,
+    cy: 91.39,
+    rx: 8.82,
+    ry: 8.77
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "none",
+    stroke: "#000000",
+    strokeMiterlimit: 10,
+    strokeWidth: 10,
+    d: "M97.58,65.44l-58.31-8.27"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "none",
+    stroke: "#000000",
+    strokeMiterlimit: 10,
+    strokeWidth: 10,
+    d: "M207.13,50.46l-60.62,5.7"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "none",
+    stroke: "#000000",
+    strokeMiterlimit: 10,
+    strokeWidth: 10,
+    d: "M92.03,155.13h41.87l-17.89-87.67"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "none",
+    stroke: "#000000",
+    strokeMiterlimit: 10,
+    strokeWidth: 10,
+    d: "M83.48,194.24s20.02,8.89,39.74,5.22,33.62-17.88,33.62-17.88"
+  }), /*#__PURE__*/React.createElement("ellipse", {
+    fill: "#000000",
+    cx: 60.69,
+    cy: 91.39,
+    rx: 8.82,
+    ry: 8.77
+  }));
+};
+export default Icon0007;

package/dist/defaultAvatars/Icon0011.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const Icon0011: (props: React.SVGProps<SVGSVGElement>) => JSX.Element;
+export default Icon0011;

package/dist/defaultAvatars/Icon0011.js

@@ -0,0 +1,40 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+var Icon0011 = function Icon0011(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 240 240",
+    className: "icon_0011 ds-default-avatar"
+  }, props), /*#__PURE__*/React.createElement("rect", {
+    fill: "#a355a7",
+    width: 240,
+    height: 240
+  }), /*#__PURE__*/React.createElement("rect", {
+    fill: "#c2a4d3",
+    width: 240,
+    height: 175.98
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "none",
+    stroke: "#181818",
+    strokeMiterlimit: 10,
+    strokeWidth: 10,
+    d: "M114.6,44.89l32.95,100.44-55.76,7.92"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "none",
+    stroke: "#181818",
+    strokeMiterlimit: 10,
+    strokeWidth: 10,
+    d: "M93.49,190h54.06"
+  }), /*#__PURE__*/React.createElement("circle", {
+    fill: "#181818",
+    cx: 64.19,
+    cy: 75.95,
+    r: 11.17
+  }), /*#__PURE__*/React.createElement("circle", {
+    fill: "#181818",
+    cx: 181.66,
+    cy: 68.18,
+    r: 11.17
+  }));
+};
+export default Icon0011;

package/dist/defaultAvatars/Icon0012.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const Icon0012: (props: React.SVGProps<SVGSVGElement>) => JSX.Element;
+export default Icon0012;

package/dist/defaultAvatars/Icon0012.js

@@ -0,0 +1,65 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+var Icon0012 = function Icon0012(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 240 240",
+    className: "icon_0012 ds-default-avatar"
+  }, props), /*#__PURE__*/React.createElement("rect", {
+    fill: "#d4ff10",
+    width: 86.89,
+    height: 239.85
+  }), /*#__PURE__*/React.createElement("rect", {
+    fill: "#fcff10",
+    x: 86.89,
+    width: 152.88,
+    height: 239.85
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "none",
+    stroke: "#2a2610",
+    strokeMiterlimit: 10,
+    strokeWidth: 11,
+    d: "M118.64,48.26v104.53h21.48"
+  }), /*#__PURE__*/React.createElement("polyline", {
+    fill: "#2a2610",
+    points: "46.65 69.7 79.18 69.7 79.18 57.99 46.65 57.99"
+  }), /*#__PURE__*/React.createElement("circle", {
+    fill: "#2a2610",
+    cx: 59.34,
+    cy: 86.66,
+    r: 8.29
+  }), /*#__PURE__*/React.createElement("ellipse", {
+    fill: "#ffaa26",
+    cx: 55.64,
+    cy: 135.15,
+    rx: 15.22,
+    ry: 15.22
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "#f4ffd4",
+    d: "M83.05,57.93c-3.43-10.55-13.34-18.18-25.03-18.18s-21.6,7.63-25.03,18.18h50.05Z"
+  }), /*#__PURE__*/React.createElement("polyline", {
+    fill: "#2a2610",
+    points: "194.51 57.99 161.98 57.99 161.98 69.7 194.51 69.7"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "none",
+    stroke: "#2a2610",
+    strokeMiterlimit: 10,
+    strokeWidth: 11,
+    d: "M146.77,187.58h-53.77"
+  }), /*#__PURE__*/React.createElement("circle", {
+    fill: "#2a2610",
+    cx: 181.81,
+    cy: 86.66,
+    r: 8.29
+  }), /*#__PURE__*/React.createElement("ellipse", {
+    fill: "#ffaa26",
+    cx: 185.52,
+    cy: 135.15,
+    rx: 15.22,
+    ry: 15.22
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "#f4ffd4",
+    d: "M158.11,57.93c3.43-10.55,13.34-18.18,25.03-18.18s21.6,7.63,25.03,18.18h-50.05Z"
+  }));
+};
+export default Icon0012;

package/dist/defaultAvatars/Icon0014.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const Icon0014: (props: React.SVGProps<SVGSVGElement>) => JSX.Element;
+export default Icon0014;

package/dist/defaultAvatars/Icon0014.js

@@ -0,0 +1,40 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+var Icon0014 = function Icon0014(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 240 240",
+    className: "icon_0014 ds-default-avatar"
+  }, props), /*#__PURE__*/React.createElement("rect", {
+    fill: "#2add81",
+    width: 240,
+    height: 240
+  }), /*#__PURE__*/React.createElement("rect", {
+    fill: "#a5dda8",
+    width: 240,
+    height: 175.98
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "none",
+    stroke: "#000000",
+    strokeMiterlimit: 10,
+    strokeWidth: 10,
+    d: "M114.6,44.89l32.95,100.44-55.76,7.92"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "none",
+    stroke: "#000000",
+    strokeMiterlimit: 10,
+    strokeWidth: 10,
+    d: "M93.49,190h54.06"
+  }), /*#__PURE__*/React.createElement("circle", {
+    fill: "#000000",
+    cx: 64.19,
+    cy: 75.95,
+    r: 11.17
+  }), /*#__PURE__*/React.createElement("circle", {
+    fill: "#000000",
+    cx: 181.66,
+    cy: 68.18,
+    r: 11.17
+  }));
+};
+export default Icon0014;

package/dist/defaultAvatars/Icon0015.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const Icon0015: (props: React.SVGProps<SVGSVGElement>) => JSX.Element;
+export default Icon0015;

package/dist/defaultAvatars/Icon0015.js

@@ -0,0 +1,53 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+var Icon0015 = function Icon0015(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 240 240",
+    className: "icon_0015 ds-default-avatar"
+  }, props), /*#__PURE__*/React.createElement("rect", {
+    fill: "#9353ae",
+    x: 0.23,
+    y: 0.15,
+    width: 239.54,
+    height: 239.7
+  }), /*#__PURE__*/React.createElement("rect", {
+    fill: "#a27caa",
+    x: 0.46,
+    y: 0.3,
+    width: 113.73,
+    height: 115.36
+  }), /*#__PURE__*/React.createElement("polygon", {
+    fill: "#8427ae",
+    points: "114.19 47.43 134.24 148.5 106.04 153.62 114.19 47.43"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "none",
+    stroke: "#0c0c0c",
+    strokeMiterlimit: 10,
+    strokeWidth: 10,
+    d: "M134.24,148.5c-11.41,6.02-28.2,5.07-28.2,5.07l8.87-106.14"
+  }), /*#__PURE__*/React.createElement("circle", {
+    fill: "#0c0c0c",
+    cx: 61.28,
+    cy: 72.06,
+    r: 11
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "#a27caa",
+    d: "M157.13,67.52s9.61-14.63,27.96-15.28c18.35-.65,31.45,11.7,31.45,11.7,0,0-7.28,12.35-29.7,13.98-22.42,1.63-29.7-10.4-29.7-10.4Z"
+  }), /*#__PURE__*/React.createElement("circle", {
+    fill: "#0c0c0c",
+    cx: 185.73,
+    cy: 67.07,
+    r: 11
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "#878b54",
+    d: "M116.82,184.28s9.19,23,39.6,17.34c30.42-5.66,29.31-34.58,29.31-34.58l-68.91,17.24Z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "none",
+    stroke: "#0c0c0c",
+    strokeMiterlimit: 10,
+    strokeWidth: 10,
+    d: "M110.16,183.67s21.86.95,43.09-4.12,34.85-13.62,34.85-13.62"
+  }));
+};
+export default Icon0015;

package/dist/defaultAvatars/Icon0022.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const Icon0022: (props: React.SVGProps<SVGSVGElement>) => JSX.Element;
+export default Icon0022;