@drivenets/design-system 0.1.0 → 0.2.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @drivenets/design-system
 
+## 0.2.0
+
+### Minor Changes
+
+- 9bd668b: Add 'DsAvatar' component
+- 1881953: - Added `DsTag` component
+  - Added `DsTagFilter` component
+  - Deprecated `DsChip` component
+  - Deprecated `DsChipGroup` component
+
 ## 0.1.0
 
 ### Minor Changes

package/dist/components/ds-avatar/ds-avatar.cjs

@@ -0,0 +1,98 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_ds_avatar_module = require('./ds-avatar.module.cjs');
+const require_ds_tooltip = require('../ds-tooltip/ds-tooltip.cjs');
+require('../ds-tooltip/index.cjs');
+let react_compiler_runtime = require("react/compiler-runtime");
+let classnames = require("classnames");
+classnames = require_rolldown_runtime.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
+let __ark_ui_react_avatar = require("@ark-ui/react/avatar");
+
+//#region src/components/ds-avatar/ds-avatar.tsx
+/**
+* DsAvatar component for displaying user profile pictures or initials
+*/
+const DsAvatar = (t0) => {
+	const $ = (0, react_compiler_runtime.c)(23);
+	const { src, alt, name, size: t1, type: t2, className, style, onStatusChange } = t0;
+	const size = t1 === void 0 ? "regular" : t1;
+	const type = t2 === void 0 ? "circle" : t2;
+	const getInitials = _temp2;
+	let t3;
+	if ($[0] !== onStatusChange) {
+		t3 = (details) => onStatusChange?.(details.status);
+		$[0] = onStatusChange;
+		$[1] = t3;
+	} else t3 = $[1];
+	const t4 = require_ds_avatar_module.default[size];
+	const t5 = require_ds_avatar_module.default[type];
+	let t6;
+	if ($[2] !== className || $[3] !== t4 || $[4] !== t5) {
+		t6 = (0, classnames.default)(require_ds_avatar_module.default.avatar, t4, t5, className);
+		$[2] = className;
+		$[3] = t4;
+		$[4] = t5;
+		$[5] = t6;
+	} else t6 = $[5];
+	let t7;
+	if ($[6] !== name) {
+		t7 = getInitials(name);
+		$[6] = name;
+		$[7] = t7;
+	} else t7 = $[7];
+	let t8;
+	if ($[8] !== t7) {
+		t8 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_avatar.Avatar.Fallback, {
+			className: require_ds_avatar_module.default.fallback,
+			children: t7
+		});
+		$[8] = t7;
+		$[9] = t8;
+	} else t8 = $[9];
+	let t9;
+	if ($[10] !== alt || $[11] !== name || $[12] !== src) {
+		t9 = src && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_avatar.Avatar.Image, {
+			src,
+			alt: alt || name
+		});
+		$[10] = alt;
+		$[11] = name;
+		$[12] = src;
+		$[13] = t9;
+	} else t9 = $[13];
+	let t10;
+	if ($[14] !== style || $[15] !== t3 || $[16] !== t6 || $[17] !== t8 || $[18] !== t9) {
+		t10 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__ark_ui_react_avatar.Avatar.Root, {
+			onStatusChange: t3,
+			className: t6,
+			style,
+			children: [t8, t9]
+		});
+		$[14] = style;
+		$[15] = t3;
+		$[16] = t6;
+		$[17] = t8;
+		$[18] = t9;
+		$[19] = t10;
+	} else t10 = $[19];
+	let t11;
+	if ($[20] !== name || $[21] !== t10) {
+		t11 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_tooltip.default, {
+			content: name,
+			children: t10
+		});
+		$[20] = name;
+		$[21] = t10;
+		$[22] = t11;
+	} else t11 = $[22];
+	return t11;
+};
+function _temp(w) {
+	return w[0];
+}
+function _temp2(name_0) {
+	return name_0.trim().split(" ").map(_temp).join("");
+}
+
+//#endregion
+exports.DsAvatar = DsAvatar;

package/dist/components/ds-avatar/ds-avatar.d.cts

@@ -0,0 +1,12 @@
+import { DsAvatarProps } from "./ds-avatar.types.cjs";
+import { FC } from "react";
+
+//#region src/components/ds-avatar/ds-avatar.d.ts
+
+/**
+ * DsAvatar component for displaying user profile pictures or initials
+ */
+declare const DsAvatar: FC<DsAvatarProps>;
+//#endregion
+export { DsAvatar };
+//# sourceMappingURL=ds-avatar.d.cts.map

package/dist/components/ds-avatar/ds-avatar.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-avatar.d.cts","names":[],"sources":["../../../src/components/ds-avatar/ds-avatar.tsx"],"sourcesContent":[],"mappings":";;;;;;;AAUA;cAAa,UAAU,GAAG"}

package/dist/components/ds-avatar/ds-avatar.d.ts

@@ -0,0 +1,12 @@
+import { DsAvatarProps } from "./ds-avatar.types.js";
+import { FC } from "react";
+
+//#region src/components/ds-avatar/ds-avatar.d.ts
+
+/**
+ * DsAvatar component for displaying user profile pictures or initials
+ */
+declare const DsAvatar: FC<DsAvatarProps>;
+//#endregion
+export { DsAvatar };
+//# sourceMappingURL=ds-avatar.d.ts.map

package/dist/components/ds-avatar/ds-avatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-avatar.d.ts","names":[],"sources":["../../../src/components/ds-avatar/ds-avatar.tsx"],"sourcesContent":[],"mappings":";;;;;;;AAUA;cAAa,UAAU,GAAG"}

package/dist/components/ds-avatar/ds-avatar.js

@@ -0,0 +1,97 @@
+import ds_avatar_module_default from "./ds-avatar.module.js";
+import ds_tooltip_default from "../ds-tooltip/ds-tooltip.js";
+import "../ds-tooltip/index.js";
+import { c } from "react/compiler-runtime";
+import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Avatar } from "@ark-ui/react/avatar";
+
+//#region src/components/ds-avatar/ds-avatar.tsx
+/**
+* DsAvatar component for displaying user profile pictures or initials
+*/
+const DsAvatar = (t0) => {
+	const $ = c(23);
+	const { src, alt, name, size: t1, type: t2, className, style, onStatusChange } = t0;
+	const size = t1 === void 0 ? "regular" : t1;
+	const type = t2 === void 0 ? "circle" : t2;
+	const getInitials = _temp2;
+	let t3;
+	if ($[0] !== onStatusChange) {
+		t3 = (details) => onStatusChange?.(details.status);
+		$[0] = onStatusChange;
+		$[1] = t3;
+	} else t3 = $[1];
+	const t4 = ds_avatar_module_default[size];
+	const t5 = ds_avatar_module_default[type];
+	let t6;
+	if ($[2] !== className || $[3] !== t4 || $[4] !== t5) {
+		t6 = classNames(ds_avatar_module_default.avatar, t4, t5, className);
+		$[2] = className;
+		$[3] = t4;
+		$[4] = t5;
+		$[5] = t6;
+	} else t6 = $[5];
+	let t7;
+	if ($[6] !== name) {
+		t7 = getInitials(name);
+		$[6] = name;
+		$[7] = t7;
+	} else t7 = $[7];
+	let t8;
+	if ($[8] !== t7) {
+		t8 = /* @__PURE__ */ jsx(Avatar.Fallback, {
+			className: ds_avatar_module_default.fallback,
+			children: t7
+		});
+		$[8] = t7;
+		$[9] = t8;
+	} else t8 = $[9];
+	let t9;
+	if ($[10] !== alt || $[11] !== name || $[12] !== src) {
+		t9 = src && /* @__PURE__ */ jsx(Avatar.Image, {
+			src,
+			alt: alt || name
+		});
+		$[10] = alt;
+		$[11] = name;
+		$[12] = src;
+		$[13] = t9;
+	} else t9 = $[13];
+	let t10;
+	if ($[14] !== style || $[15] !== t3 || $[16] !== t6 || $[17] !== t8 || $[18] !== t9) {
+		t10 = /* @__PURE__ */ jsxs(Avatar.Root, {
+			onStatusChange: t3,
+			className: t6,
+			style,
+			children: [t8, t9]
+		});
+		$[14] = style;
+		$[15] = t3;
+		$[16] = t6;
+		$[17] = t8;
+		$[18] = t9;
+		$[19] = t10;
+	} else t10 = $[19];
+	let t11;
+	if ($[20] !== name || $[21] !== t10) {
+		t11 = /* @__PURE__ */ jsx(ds_tooltip_default, {
+			content: name,
+			children: t10
+		});
+		$[20] = name;
+		$[21] = t10;
+		$[22] = t11;
+	} else t11 = $[22];
+	return t11;
+};
+function _temp(w) {
+	return w[0];
+}
+function _temp2(name_0) {
+	return name_0.trim().split(" ").map(_temp).join("");
+}
+
+//#endregion
+export { DsAvatar };
+//# sourceMappingURL=ds-avatar.js.map

package/dist/components/ds-avatar/ds-avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-avatar.js","names":["FC","Avatar","classNames","styles","DsAvatarProps","DsTooltip","DsAvatar","t0","$","_c","src","alt","name","size","t1","type","t2","className","style","onStatusChange","undefined","getInitials","_temp2","t3","details","status","t4","t5","t6","avatar","t7","t8","fallback","t9","t10","t11","_temp","w","name_0","trim","split","map","join"],"sources":["../../../src/components/ds-avatar/ds-avatar.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport { Avatar } from '@ark-ui/react/avatar';\nimport classNames from 'classnames';\nimport styles from './ds-avatar.module.scss';\nimport type { DsAvatarProps } from './ds-avatar.types';\nimport { DsTooltip } from '../ds-tooltip';\n\n/**\n * DsAvatar component for displaying user profile pictures or initials\n */\nexport const DsAvatar: FC<DsAvatarProps> = ({\n\tsrc,\n\talt,\n\tname,\n\tsize = 'regular',\n\ttype = 'circle',\n\tclassName,\n\tstyle,\n\tonStatusChange,\n}) => {\n\tconst getInitials = (name: string) =>\n\t\tname\n\t\t\t.trim()\n\t\t\t.split(' ')\n\t\t\t.map((w) => w[0])\n\t\t\t.join('');\n\n\treturn (\n\t\t<DsTooltip content={name}>\n\t\t\t{\n\t\t\t\t<Avatar.Root\n\t\t\t\t\tonStatusChange={(details) => onStatusChange?.(details.status)}\n\t\t\t\t\tclassName={classNames(styles.avatar, styles[size], styles[type], className)}\n\t\t\t\t\tstyle={style}\n\t\t\t\t>\n\t\t\t\t\t<Avatar.Fallback className={styles.fallback}>{getInitials(name)}</Avatar.Fallback>\n\t\t\t\t\t{src && <Avatar.Image src={src} alt={alt || name} />}\n\t\t\t\t</Avatar.Root>\n\t\t\t}\n\t\t</DsTooltip>\n\t);\n};\n"],"mappings":";;;;;;;;;;;;AAUA,MAAaM,YAA8BC,OAAA;CAAA,MAAAC,IAAAC,EAAA,GAAA;CAAC,MAAA,EAAAC,KAAAC,KAAAC,MAAAC,MAAAC,IAAAC,MAAAC,IAAAC,WAAAC,OAAAC,mBAAAZ;CAI3C,MAAAM,OAAAC,OAAAM,SAAA,YAAAN;CACA,MAAAC,OAAAC,OAAAI,SAAA,WAAAJ;CAKA,MAAAK,cAAoBC;CAKR,IAAAC;AAAA,KAAAf,EAAA,OAAAW,gBAAA;AAMQI,QAAAC,YAAaL,iBAAiBK,QAAOC,OAAQ;AAAAjB,IAAA,KAAAW;AAAAX,IAAA,KAAAe;OAAAA,MAAAf,EAAA;CACxB,MAAAkB,KAAAvB,yBAAOU;CAAO,MAAAc,KAAAxB,yBAAOY;CAAK,IAAAa;AAAA,KAAApB,EAAA,OAAAS,aAAAT,EAAA,OAAAkB,MAAAlB,EAAA,OAAAmB,IAAA;AAApDC,OAAA1B,WAAWC,yBAAM0B,QAASH,IAAcC,IAAcV,UAAU;AAAAT,IAAA,KAAAS;AAAAT,IAAA,KAAAkB;AAAAlB,IAAA,KAAAmB;AAAAnB,IAAA,KAAAoB;OAAAA,MAAApB,EAAA;CAAA,IAAAsB;AAAA,KAAAtB,EAAA,OAAAI,MAAA;AAG7BkB,OAAAT,YAAYT,KAAK;AAAAJ,IAAA,KAAAI;AAAAJ,IAAA,KAAAsB;OAAAA,MAAAtB,EAAA;CAAA,IAAAuB;AAAA,KAAAvB,EAAA,OAAAsB,IAAA;AAA/DC,OAAA,oBAAA,OAAA;GAA4B,WAAA5B,yBAAM6B;aAAYF;IAAoC;AAAAtB,IAAA,KAAAsB;AAAAtB,IAAA,KAAAuB;OAAAA,MAAAvB,EAAA;CAAA,IAAAyB;AAAA,KAAAzB,EAAA,QAAAG,OAAAH,EAAA,QAAAI,QAAAJ,EAAA,QAAAE,KAAA;AACjFuB,OAAAvB,OAAO,oBAAA,OAAA;GAAmBA;GAAU,KAAAC,OAAAC;IAAe;AAAAJ,IAAA,MAAAG;AAAAH,IAAA,MAAAI;AAAAJ,IAAA,MAAAE;AAAAF,IAAA,MAAAyB;OAAAA,MAAAzB,EAAA;CAAA,IAAA0B;AAAA,KAAA1B,EAAA,QAAAU,SAAAV,EAAA,QAAAe,MAAAf,EAAA,QAAAoB,MAAApB,EAAA,QAAAuB,MAAAvB,EAAA,QAAAyB,IAAA;AANrDC,QAAA,qBAAA,OAAA;GACiB,gBAAAX;GACL,WAAAK;GACJV;cAEPa,IACCE;IACY;AAAAzB,IAAA,MAAAU;AAAAV,IAAA,MAAAe;AAAAf,IAAA,MAAAoB;AAAApB,IAAA,MAAAuB;AAAAvB,IAAA,MAAAyB;AAAAzB,IAAA,MAAA0B;OAAAA,OAAA1B,EAAA;CAAA,IAAA2B;AAAA,KAAA3B,EAAA,QAAAI,QAAAJ,EAAA,QAAA0B,KAAA;AAThBC,QAAA,oBAAC;GAAmBvB,SAAAA;aAElBsB;IASU;AAAA1B,IAAA,MAAAI;AAAAJ,IAAA,MAAA0B;AAAA1B,IAAA,MAAA2B;OAAAA,OAAA3B,EAAA;AAAA,QAXZ2B;;AAlByC,SAAAC,MAAAC,GAAA;AAAA,QAc5BA,EAAC;;AAd2B,SAAAf,OAAAgB,QAAA;AAAA,QAWzC1B,OAAI2B,MACI,CAAAC,MACA,IAAI,CAAAC,IACNL,MAAY,CAAAM,KACX,GAAG"}

package/dist/components/ds-avatar/ds-avatar.module.cjs

@@ -0,0 +1,17 @@
+
+//#region src/components/ds-avatar/ds-avatar.module.scss
+var ds_avatar_module_default = {
+	"avatar": "_avatar_1pkly_1",
+	"circle": "_circle_1pkly_1",
+	"rounded": "_rounded_1pkly_1",
+	"xsm": "_xsm_1pkly_1",
+	"sm": "_sm_1pkly_1",
+	"regular": "_regular_1pkly_1",
+	"md": "_md_1pkly_1",
+	"lg": "_lg_1pkly_1",
+	"xl": "_xl_1pkly_1",
+	"fallback": "_fallback_1pkly_1"
+};
+
+//#endregion
+exports.default = ds_avatar_module_default;

package/dist/components/ds-avatar/ds-avatar.module.js

@@ -0,0 +1,17 @@
+//#region src/components/ds-avatar/ds-avatar.module.scss
+var ds_avatar_module_default = {
+	"avatar": "_avatar_1pkly_1",
+	"circle": "_circle_1pkly_1",
+	"rounded": "_rounded_1pkly_1",
+	"xsm": "_xsm_1pkly_1",
+	"sm": "_sm_1pkly_1",
+	"regular": "_regular_1pkly_1",
+	"md": "_md_1pkly_1",
+	"lg": "_lg_1pkly_1",
+	"xl": "_xl_1pkly_1",
+	"fallback": "_fallback_1pkly_1"
+};
+
+//#endregion
+export { ds_avatar_module_default as default };
+//# sourceMappingURL=ds-avatar.module.js.map

package/dist/components/ds-avatar/ds-avatar.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-avatar.module.js","names":[],"sources":["../../../file:/home/runner/work/design-system/design-system/packages/design-system/src/components/ds-avatar/ds-avatar.module.scss","../../../file:/home/runner/work/design-system/design-system/packages/design-system/src/components/ds-avatar/_mixins.scss"],"sourcesContent":["@import './mixins';\n\n.avatar {\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n\tposition: relative;\n\toverflow: hidden;\n\tbackground-color: var(--color-background-deselected);\n\tcolor: var(--color-font-on-action);\n\tflex-shrink: 0;\n\tuser-select: none;\n\n\t&.circle {\n\t\tborder-radius: 50%;\n\t}\n\n\t&.rounded {\n\t\t&.xsm,\n\t\t&.sm {\n\t\t\tborder-radius: $avatar-border-radius-small;\n\t\t}\n\t\t&.regular,\n\t\t&.md,\n\t\t&.lg,\n\t\t&.xl {\n\t\t\tborder-radius: $avatar-border-radius-large;\n\t\t}\n\t}\n\n\t@include avatar-sizes;\n\n\timg {\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tobject-fit: cover;\n\t\tdisplay: block;\n\t}\n\n\t.fallback {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tfont-weight: var(--font-weight-medium);\n\t\ttext-transform: uppercase;\n\t}\n}\n"],"mappings":""}

package/dist/components/ds-avatar/ds-avatar.types.d.cts

@@ -0,0 +1,44 @@
+import { CSSProperties } from "react";
+
+//#region src/components/ds-avatar/ds-avatar.types.d.ts
+type DsAvatarSize = 'xsm' | 'sm' | 'regular' | 'md' | 'lg' | 'xl';
+type DsAvatarType = 'circle' | 'rounded';
+interface DsAvatarProps {
+  /**
+   * Image source URL
+   */
+  src?: string;
+  /**
+   * Alt text for the image
+   */
+  alt?: string;
+  /**
+   * Name to display in tooltip and as initials if image fails
+   */
+  name: string;
+  /**
+   * Size of the avatar
+   * @default 'regular'
+   */
+  size?: DsAvatarSize;
+  /**
+   * Shape of the avatar
+   * @default 'circle'
+   */
+  type?: DsAvatarType;
+  /**
+   * Custom class name
+   */
+  className?: string;
+  /**
+   * Custom inline styles
+   */
+  style?: CSSProperties;
+  /**
+   * Callback when the status of the image changes
+   */
+  onStatusChange?: (status: 'error' | 'loaded') => void;
+}
+//#endregion
+export { DsAvatarProps, DsAvatarSize, DsAvatarType };
+//# sourceMappingURL=ds-avatar.types.d.cts.map

package/dist/components/ds-avatar/ds-avatar.types.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-avatar.types.d.cts","names":[],"sources":["../../../src/components/ds-avatar/ds-avatar.types.ts"],"sourcesContent":[],"mappings":";;;KAEY,YAAA;KACA,YAAA;AADA,UAGK,aAAA,CAHO;EACZ;AAEZ;;EAsBQ,GAAA,CAAA,EAAA,MAAA;EAQC;;;;;;;;;;;;SAbD;;;;;SAKA;;;;;;;;UAQC"}

package/dist/components/ds-avatar/ds-avatar.types.d.ts

@@ -0,0 +1,44 @@
+import { CSSProperties } from "react";
+
+//#region src/components/ds-avatar/ds-avatar.types.d.ts
+type DsAvatarSize = 'xsm' | 'sm' | 'regular' | 'md' | 'lg' | 'xl';
+type DsAvatarType = 'circle' | 'rounded';
+interface DsAvatarProps {
+  /**
+   * Image source URL
+   */
+  src?: string;
+  /**
+   * Alt text for the image
+   */
+  alt?: string;
+  /**
+   * Name to display in tooltip and as initials if image fails
+   */
+  name: string;
+  /**
+   * Size of the avatar
+   * @default 'regular'
+   */
+  size?: DsAvatarSize;
+  /**
+   * Shape of the avatar
+   * @default 'circle'
+   */
+  type?: DsAvatarType;
+  /**
+   * Custom class name
+   */
+  className?: string;
+  /**
+   * Custom inline styles
+   */
+  style?: CSSProperties;
+  /**
+   * Callback when the status of the image changes
+   */
+  onStatusChange?: (status: 'error' | 'loaded') => void;
+}
+//#endregion
+export { DsAvatarProps, DsAvatarSize, DsAvatarType };
+//# sourceMappingURL=ds-avatar.types.d.ts.map

package/dist/components/ds-avatar/ds-avatar.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-avatar.types.d.ts","names":[],"sources":["../../../src/components/ds-avatar/ds-avatar.types.ts"],"sourcesContent":[],"mappings":";;;KAEY,YAAA;KACA,YAAA;AADA,UAGK,aAAA,CAHO;EACZ;AAEZ;;EAsBQ,GAAA,CAAA,EAAA,MAAA;EAQC;;;;;;;;;;;;SAbD;;;;;SAKA;;;;;;;;UAQC"}

package/dist/components/ds-avatar/index.cjs

@@ -0,0 +1 @@
+const require_ds_avatar = require('./ds-avatar.cjs');

package/dist/components/ds-avatar/index.d.ts

@@ -0,0 +1,2 @@
+import { DsAvatarProps, DsAvatarSize, DsAvatarType } from "./ds-avatar.types.js";
+import { DsAvatar } from "./ds-avatar.js";

package/dist/components/ds-avatar/index.js

@@ -0,0 +1 @@
+import { DsAvatar } from "./ds-avatar.js";

package/dist/components/ds-avatar-group/ds-avatar-group.cjs

@@ -0,0 +1,93 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_ds_typography = require('../ds-typography/ds-typography.cjs');
+require('../ds-typography/index.cjs');
+const require_ds_tooltip = require('../ds-tooltip/ds-tooltip.cjs');
+require('../ds-tooltip/index.cjs');
+const require_ds_avatar = require('../ds-avatar/ds-avatar.cjs');
+require('../ds-avatar/index.cjs');
+const require_ds_avatar_group_module = require('./ds-avatar-group.module.cjs');
+let react_compiler_runtime = require("react/compiler-runtime");
+let classnames = require("classnames");
+classnames = require_rolldown_runtime.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/ds-avatar-group/ds-avatar-group.tsx
+/**
+* DsAvatarGroup component for displaying a list of avatars with overlap
+*/
+const DsAvatarGroup = (t0) => {
+	const $ = (0, react_compiler_runtime.c)(17);
+	const { avatars, size: t1, type: t2, max: t3, className } = t0;
+	const size = t1 === void 0 ? "regular" : t1;
+	const type = t2 === void 0 ? "circle" : t2;
+	const max = t3 === void 0 ? 5 : t3;
+	let t4;
+	let t5;
+	let t6;
+	if ($[0] !== avatars || $[1] !== className || $[2] !== max || $[3] !== size || $[4] !== type) {
+		const visibleAvatars = avatars.slice(0, max);
+		const hiddenAvatars = avatars.slice(max);
+		const remainingCount = avatars.length - max;
+		if ($[8] !== className) {
+			t4 = (0, classnames.default)(require_ds_avatar_group_module.default.avatarGroup, className);
+			$[8] = className;
+			$[9] = t4;
+		} else t4 = $[9];
+		let t7$1;
+		if ($[10] !== size || $[11] !== type) {
+			t7$1 = (avatar, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_avatar.DsAvatar, {
+				...avatar,
+				size,
+				type,
+				className: require_ds_avatar_group_module.default.avatarItem
+			}, `${avatar.name}-${String(index)}`);
+			$[10] = size;
+			$[11] = type;
+			$[12] = t7$1;
+		} else t7$1 = $[12];
+		t5 = visibleAvatars.map(t7$1);
+		t6 = remainingCount > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_tooltip.default, {
+			content: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: require_ds_avatar_group_module.default.tooltipList,
+				children: hiddenAvatars.map(_temp)
+			}),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: (0, classnames.default)(require_ds_avatar_group_module.default.moreAvatar, require_ds_avatar_group_module.default[size], require_ds_avatar_group_module.default[type]),
+				children: ["+", remainingCount]
+			})
+		});
+		$[0] = avatars;
+		$[1] = className;
+		$[2] = max;
+		$[3] = size;
+		$[4] = type;
+		$[5] = t4;
+		$[6] = t5;
+		$[7] = t6;
+	} else {
+		t4 = $[5];
+		t5 = $[6];
+		t6 = $[7];
+	}
+	let t7;
+	if ($[13] !== t4 || $[14] !== t5 || $[15] !== t6) {
+		t7 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: t4,
+			children: [t5, t6]
+		});
+		$[13] = t4;
+		$[14] = t5;
+		$[15] = t6;
+		$[16] = t7;
+	} else t7 = $[16];
+	return t7;
+};
+function _temp(avatar_0, index_0) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_typography.default, {
+		variant: "body-xs-reg",
+		children: avatar_0.name
+	}) }, `${avatar_0.name}-${String(index_0)}`);
+}
+
+//#endregion
+exports.DsAvatarGroup = DsAvatarGroup;

package/dist/components/ds-avatar-group/ds-avatar-group.d.cts

@@ -0,0 +1,12 @@
+import { DsAvatarGroupProps } from "./ds-avatar-group.types.cjs";
+import { FC } from "react";
+
+//#region src/components/ds-avatar-group/ds-avatar-group.d.ts
+
+/**
+ * DsAvatarGroup component for displaying a list of avatars with overlap
+ */
+declare const DsAvatarGroup: FC<DsAvatarGroupProps>;
+//#endregion
+export { DsAvatarGroup };
+//# sourceMappingURL=ds-avatar-group.d.cts.map

package/dist/components/ds-avatar-group/ds-avatar-group.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-avatar-group.d.cts","names":[],"sources":["../../../src/components/ds-avatar-group/ds-avatar-group.tsx"],"sourcesContent":[],"mappings":";;;;;;;AAWA;cAAa,eAAe,GAAG"}

package/dist/components/ds-avatar-group/ds-avatar-group.d.ts

@@ -0,0 +1,12 @@
+import { DsAvatarGroupProps } from "./ds-avatar-group.types.js";
+import { FC } from "react";
+
+//#region src/components/ds-avatar-group/ds-avatar-group.d.ts
+
+/**
+ * DsAvatarGroup component for displaying a list of avatars with overlap
+ */
+declare const DsAvatarGroup: FC<DsAvatarGroupProps>;
+//#endregion
+export { DsAvatarGroup };
+//# sourceMappingURL=ds-avatar-group.d.ts.map

package/dist/components/ds-avatar-group/ds-avatar-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-avatar-group.d.ts","names":[],"sources":["../../../src/components/ds-avatar-group/ds-avatar-group.tsx"],"sourcesContent":[],"mappings":";;;;;;;AAWA;cAAa,eAAe,GAAG"}

package/dist/components/ds-avatar-group/ds-avatar-group.js

@@ -0,0 +1,92 @@
+import ds_typography_default from "../ds-typography/ds-typography.js";
+import "../ds-typography/index.js";
+import ds_tooltip_default from "../ds-tooltip/ds-tooltip.js";
+import "../ds-tooltip/index.js";
+import { DsAvatar } from "../ds-avatar/ds-avatar.js";
+import "../ds-avatar/index.js";
+import ds_avatar_group_module_default from "./ds-avatar-group.module.js";
+import { c } from "react/compiler-runtime";
+import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/ds-avatar-group/ds-avatar-group.tsx
+/**
+* DsAvatarGroup component for displaying a list of avatars with overlap
+*/
+const DsAvatarGroup = (t0) => {
+	const $ = c(17);
+	const { avatars, size: t1, type: t2, max: t3, className } = t0;
+	const size = t1 === void 0 ? "regular" : t1;
+	const type = t2 === void 0 ? "circle" : t2;
+	const max = t3 === void 0 ? 5 : t3;
+	let t4;
+	let t5;
+	let t6;
+	if ($[0] !== avatars || $[1] !== className || $[2] !== max || $[3] !== size || $[4] !== type) {
+		const visibleAvatars = avatars.slice(0, max);
+		const hiddenAvatars = avatars.slice(max);
+		const remainingCount = avatars.length - max;
+		if ($[8] !== className) {
+			t4 = classNames(ds_avatar_group_module_default.avatarGroup, className);
+			$[8] = className;
+			$[9] = t4;
+		} else t4 = $[9];
+		let t7$1;
+		if ($[10] !== size || $[11] !== type) {
+			t7$1 = (avatar, index) => /* @__PURE__ */ jsx(DsAvatar, {
+				...avatar,
+				size,
+				type,
+				className: ds_avatar_group_module_default.avatarItem
+			}, `${avatar.name}-${String(index)}`);
+			$[10] = size;
+			$[11] = type;
+			$[12] = t7$1;
+		} else t7$1 = $[12];
+		t5 = visibleAvatars.map(t7$1);
+		t6 = remainingCount > 0 && /* @__PURE__ */ jsx(ds_tooltip_default, {
+			content: /* @__PURE__ */ jsx("div", {
+				className: ds_avatar_group_module_default.tooltipList,
+				children: hiddenAvatars.map(_temp)
+			}),
+			children: /* @__PURE__ */ jsxs("div", {
+				className: classNames(ds_avatar_group_module_default.moreAvatar, ds_avatar_group_module_default[size], ds_avatar_group_module_default[type]),
+				children: ["+", remainingCount]
+			})
+		});
+		$[0] = avatars;
+		$[1] = className;
+		$[2] = max;
+		$[3] = size;
+		$[4] = type;
+		$[5] = t4;
+		$[6] = t5;
+		$[7] = t6;
+	} else {
+		t4 = $[5];
+		t5 = $[6];
+		t6 = $[7];
+	}
+	let t7;
+	if ($[13] !== t4 || $[14] !== t5 || $[15] !== t6) {
+		t7 = /* @__PURE__ */ jsxs("div", {
+			className: t4,
+			children: [t5, t6]
+		});
+		$[13] = t4;
+		$[14] = t5;
+		$[15] = t6;
+		$[16] = t7;
+	} else t7 = $[16];
+	return t7;
+};
+function _temp(avatar_0, index_0) {
+	return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(ds_typography_default, {
+		variant: "body-xs-reg",
+		children: avatar_0.name
+	}) }, `${avatar_0.name}-${String(index_0)}`);
+}
+
+//#endregion
+export { DsAvatarGroup };
+//# sourceMappingURL=ds-avatar-group.js.map

package/dist/components/ds-avatar-group/ds-avatar-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-avatar-group.js","names":["FC","classNames","styles","DsAvatarGroupProps","DsAvatar","DsTooltip","DsTypography","DsAvatarGroup","t0","$","_c","avatars","size","t1","type","t2","max","t3","className","undefined","t4","t5","t6","visibleAvatars","slice","hiddenAvatars","remainingCount","length","avatarGroup","t7","avatar","index","name","String","avatarItem","map","tooltipList","_temp","moreAvatar","avatar_0","index_0"],"sources":["../../../src/components/ds-avatar-group/ds-avatar-group.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport classNames from 'classnames';\nimport styles from './ds-avatar-group.module.scss';\nimport type { DsAvatarGroupProps } from './ds-avatar-group.types';\nimport { DsAvatar } from '../ds-avatar';\nimport { DsTooltip } from '../ds-tooltip';\nimport { DsTypography } from '../ds-typography';\n\n/**\n * DsAvatarGroup component for displaying a list of avatars with overlap\n */\nexport const DsAvatarGroup: FC<DsAvatarGroupProps> = ({\n\tavatars,\n\tsize = 'regular',\n\ttype = 'circle',\n\tmax = 5,\n\tclassName,\n}) => {\n\tconst visibleAvatars = avatars.slice(0, max);\n\tconst hiddenAvatars = avatars.slice(max);\n\tconst remainingCount = avatars.length - max;\n\n\treturn (\n\t\t<div className={classNames(styles.avatarGroup, className)}>\n\t\t\t{visibleAvatars.map((avatar, index) => (\n\t\t\t\t<DsAvatar\n\t\t\t\t\tkey={`${avatar.name}-${String(index)}`}\n\t\t\t\t\t{...avatar}\n\t\t\t\t\tsize={size}\n\t\t\t\t\ttype={type}\n\t\t\t\t\tclassName={styles.avatarItem}\n\t\t\t\t/>\n\t\t\t))}\n\t\t\t{remainingCount > 0 && (\n\t\t\t\t<DsTooltip\n\t\t\t\t\tcontent={\n\t\t\t\t\t\t<div className={styles.tooltipList}>\n\t\t\t\t\t\t\t{hiddenAvatars.map((avatar, index) => (\n\t\t\t\t\t\t\t\t<div key={`${avatar.name}-${String(index)}`}>\n\t\t\t\t\t\t\t\t\t<DsTypography variant=\"body-xs-reg\">{avatar.name}</DsTypography>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t<div className={classNames(styles.moreAvatar, styles[size], styles[type])}>+{remainingCount}</div>\n\t\t\t\t</DsTooltip>\n\t\t\t)}\n\t\t</div>\n\t);\n};\n"],"mappings":";;;;;;;;;;;;;;;AAWA,MAAaO,iBAAwCC,OAAA;CAAA,MAAAC,IAAAC,EAAA,GAAA;CAAC,MAAA,EAAAC,SAAAC,MAAAC,IAAAC,MAAAC,IAAAC,KAAAC,IAAAC,cAAAV;CAErD,MAAAI,OAAAC,OAAAM,SAAA,YAAAN;CACA,MAAAC,OAAAC,OAAAI,SAAA,WAAAJ;CACA,MAAAC,MAAAC,OAAAE,SAAA,IAAAF;CAAO,IAAAG;CAAA,IAAAC;CAAA,IAAAC;AAAA,KAAAb,EAAA,OAAAE,WAAAF,EAAA,OAAAS,aAAAT,EAAA,OAAAO,OAAAP,EAAA,OAAAG,QAAAH,EAAA,OAAAK,MAAA;EAGP,MAAAS,iBAAuBZ,QAAOa,MAAO,GAAGR,IAAI;EAC5C,MAAAS,gBAAsBd,QAAOa,MAAOR,IAAI;EACxC,MAAAU,iBAAuBf,QAAOgB,SAAUX;AAAI,MAAAP,EAAA,OAAAS,WAAA;AAG3BE,QAAAnB,WAAWC,+BAAM0B,aAAcV,UAAU;AAAAT,KAAA,KAAAS;AAAAT,KAAA,KAAAW;QAAAA,MAAAX,EAAA;EAAA,IAAAoB;AAAA,MAAApB,EAAA,QAAAG,QAAAH,EAAA,QAAAK,MAAA;AACpCe,WAAAC,QAAAC,UACnB,oBAAC;IACsC,GAClCD;IACElB;IACAE;IACK,WAAAZ,+BAAMgC;MAJZ,GAAGJ,OAAME,KAAK,GAAIC,OAAOF,MAAM,GAMrC;AAAAtB,KAAA,MAAAG;AAAAH,KAAA,MAAAK;AAAAL,KAAA,MAAAoB;QAAAA,QAAApB,EAAA;AARAY,OAAAE,eAAcY,IAAKN,KAQlB;AACDP,OAAAI,iBAAiB,KACjB,oBAAC;GAEC,SAAA,oBAAA;IAAgB,WAAAxB,+BAAMkC;cACpBX,cAAaU,IAAKE,MAIlB;KACG;aAGN,qBAAA;IAAgB,WAAApC,WAAWC,+BAAMoC,YAAapC,+BAAOU,OAAOV,+BAAOY,MAAK;eAAG,KAAEY;KAC9E;IACA;AAAAjB,IAAA,KAAAE;AAAAF,IAAA,KAAAS;AAAAT,IAAA,KAAAO;AAAAP,IAAA,KAAAG;AAAAH,IAAA,KAAAK;AAAAL,IAAA,KAAAW;AAAAX,IAAA,KAAAY;AAAAZ,IAAA,KAAAa;QAAA;AAAAF,OAAAX,EAAA;AAAAY,OAAAZ,EAAA;AAAAa,OAAAb,EAAA;;CAAA,IAAAoB;AAAA,KAAApB,EAAA,QAAAW,MAAAX,EAAA,QAAAY,MAAAZ,EAAA,QAAAa,IAAA;AAxBFO,OAAA,qBAAA;GAAgB,WAAAT;cACdC,IASAC;IAeI;AAAAb,IAAA,MAAAW;AAAAX,IAAA,MAAAY;AAAAZ,IAAA,MAAAa;AAAAb,IAAA,MAAAoB;OAAAA,MAAApB,EAAA;AAAA,QAzBNoB;;AAZmD,SAAAQ,MAAAE,UAAAC,SAAA;AAAA,QA2B7C,oBAAA,mBACC,oBAAC;EAAqB,SAAA;YAAeV,SAAME;GAC5C,IAFU,GAAGF,SAAME,KAAK,GAAIC,OAAOF,QAAM,GAEnC"}

package/dist/components/ds-avatar-group/ds-avatar-group.module.cjs

@@ -0,0 +1,19 @@
+
+//#region src/components/ds-avatar-group/ds-avatar-group.module.scss
+var ds_avatar_group_module_default = {
+	"avatarGroup": "_avatarGroup_gp6iz_1",
+	"avatarItem": "_avatarItem_gp6iz_1",
+	"xsm": "_xsm_gp6iz_1",
+	"sm": "_sm_gp6iz_1",
+	"moreAvatar": "_moreAvatar_gp6iz_1",
+	"circle": "_circle_gp6iz_1",
+	"rounded": "_rounded_gp6iz_1",
+	"regular": "_regular_gp6iz_1",
+	"md": "_md_gp6iz_1",
+	"lg": "_lg_gp6iz_1",
+	"xl": "_xl_gp6iz_1",
+	"tooltipList": "_tooltipList_gp6iz_1"
+};
+
+//#endregion
+exports.default = ds_avatar_group_module_default;