@drivenets/design-system 0.0.5 → 0.2.0

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;

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

@@ -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
+export { ds_avatar_group_module_default as default };
+//# sourceMappingURL=ds-avatar-group.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-avatar-group.module.js","names":[],"sources":["../../../file:/home/runner/work/design-system/design-system/packages/design-system/src/components/ds-avatar-group/ds-avatar-group.module.scss","../../../file:/home/runner/work/design-system/design-system/packages/design-system/src/components/ds-avatar/_mixins.scss"],"sourcesContent":["@import '../ds-avatar/mixins';\n\n.avatarGroup {\n\tdisplay: flex;\n\talign-items: center;\n\n\t.avatarItem {\n\t\tborder: $avatar-border-width solid var(--color-background);\n\n\t\t&:not(:first-child) {\n\t\t\tmargin-left: $avatar-overlap-default;\n\t\t}\n\n\t\t&.xsm:not(:first-child) {\n\t\t\tmargin-left: $avatar-overlap-xsm;\n\t\t}\n\n\t\t&.sm:not(:first-child) {\n\t\t\tmargin-left: $avatar-overlap-sm;\n\t\t}\n\t}\n\n\t.moreAvatar {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tbackground-color: var(--color-background);\n\t\tcolor: var(--color-font-action);\n\t\tborder: $avatar-border-width solid var(--color-background);\n\t\tmargin-left: $avatar-overlap-default;\n\t\tfont-weight: var(--font-weight-medium);\n\t\tz-index: 1;\n\t\tcursor: default;\n\t\tflex-shrink: 0;\n\n\t\t&.circle {\n\t\t\tborder-radius: 50%;\n\t\t}\n\n\t\t&.rounded {\n\t\t\t&.xsm,\n\t\t\t&.sm {\n\t\t\t\tborder-radius: $avatar-border-radius-small;\n\t\t\t}\n\t\t\t&.regular,\n\t\t\t&.md,\n\t\t\t&.lg,\n\t\t\t&.xl {\n\t\t\t\tborder-radius: $avatar-border-radius-large;\n\t\t\t}\n\t\t}\n\n\t\t@include avatar-sizes;\n\n\t\t&.xsm {\n\t\t\tmargin-left: $avatar-overlap-xsm;\n\t\t}\n\n\t\t&.sm {\n\t\t\tmargin-left: $avatar-overlap-sm;\n\t\t}\n\t}\n\n\t.tooltipList {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: var(--spacing-3xs);\n\t\tpadding: var(--spacing-3xs) 0;\n\t}\n}\n"],"mappings":""}

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

@@ -0,0 +1,31 @@
+import { DsAvatarProps, DsAvatarSize, DsAvatarType } from "../ds-avatar/ds-avatar.types.cjs";
+
+//#region src/components/ds-avatar-group/ds-avatar-group.types.d.ts
+interface DsAvatarGroupProps {
+  /**
+   * Array of avatar items
+   */
+  avatars: Omit<DsAvatarProps, 'size' | 'type'>[];
+  /**
+   * Size of the avatars in the group
+   * @default 'regular'
+   */
+  size?: DsAvatarSize;
+  /**
+   * Shape of the avatars in the group
+   * @default 'circle'
+   */
+  type?: DsAvatarType;
+  /**
+   * Maximum number of avatars to show before collapsing
+   * @default 5
+   */
+  max?: number;
+  /**
+   * Custom class name
+   */
+  className?: string;
+}
+//#endregion
+export { DsAvatarGroupProps };
+//# sourceMappingURL=ds-avatar-group.types.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-avatar-group.types.d.cts","names":[],"sources":["../../../src/components/ds-avatar-group/ds-avatar-group.types.ts"],"sourcesContent":[],"mappings":";;;UAEiB,kBAAA;;AAAjB;;EAIU,OAAA,EAAA,IAAA,CAAK,aAAL,EAAA,MAAA,GAAA,MAAA,CAAA,EAAA;EAKF;;;;SAAA;;;;;SAKA"}

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

@@ -0,0 +1,32 @@
+import { DsAvatarProps, DsAvatarSize, DsAvatarType } from "../ds-avatar/ds-avatar.types.js";
+import "../ds-avatar/index.js";
+
+//#region src/components/ds-avatar-group/ds-avatar-group.types.d.ts
+interface DsAvatarGroupProps {
+  /**
+   * Array of avatar items
+   */
+  avatars: Omit<DsAvatarProps, 'size' | 'type'>[];
+  /**
+   * Size of the avatars in the group
+   * @default 'regular'
+   */
+  size?: DsAvatarSize;
+  /**
+   * Shape of the avatars in the group
+   * @default 'circle'
+   */
+  type?: DsAvatarType;
+  /**
+   * Maximum number of avatars to show before collapsing
+   * @default 5
+   */
+  max?: number;
+  /**
+   * Custom class name
+   */
+  className?: string;
+}
+//#endregion
+export { DsAvatarGroupProps };
+//# sourceMappingURL=ds-avatar-group.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-avatar-group.types.d.ts","names":[],"sources":["../../../src/components/ds-avatar-group/ds-avatar-group.types.ts"],"sourcesContent":[],"mappings":";;;;UAEiB,kBAAA;;;AAAjB;EAIe,OAAA,EAAL,IAAK,CAAA,aAAA,EAAA,MAAA,GAAA,MAAA,CAAA,EAAA;EAAL;;;;SAKF;;;;;SAKA"}

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

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

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

@@ -0,0 +1,2 @@
+import { DsAvatarGroupProps } from "./ds-avatar-group.types.js";
+import { DsAvatarGroup } from "./ds-avatar-group.js";

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

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

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

@@ -1,8 +1,8 @@
 import { DsButtonUnifiedProps } from "./ds-button.types.cjs";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react_jsx_runtime3 from "react/jsx-runtime";
 
 //#region src/components/ds-button/ds-button.d.ts
-declare const DsButton: (props: DsButtonUnifiedProps) => react_jsx_runtime0.JSX.Element;
+declare const DsButton: (props: DsButtonUnifiedProps) => react_jsx_runtime3.JSX.Element;
 //#endregion
 export { DsButton };
 //# sourceMappingURL=ds-button.d.cts.map

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

@@ -1,8 +1,8 @@
 import { DsButtonUnifiedProps } from "./ds-button.types.js";
-import * as react_jsx_runtime3 from "react/jsx-runtime";
+import * as react_jsx_runtime18 from "react/jsx-runtime";
 
 //#region src/components/ds-button/ds-button.d.ts
-declare const DsButton: (props: DsButtonUnifiedProps) => react_jsx_runtime3.JSX.Element;
+declare const DsButton: (props: DsButtonUnifiedProps) => react_jsx_runtime18.JSX.Element;
 //#endregion
 export { DsButton };
 //# sourceMappingURL=ds-button.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ds-button.d.ts","names":[],"sources":["../../../src/components/ds-button/ds-button.tsx"],"sourcesContent":[],"mappings":";;;;cAIM,kBAAmB,yBAAoB,kBAAA,CAAA,GAAA,CAAA"}
+{"version":3,"file":"ds-button.d.ts","names":[],"sources":["../../../src/components/ds-button/ds-button.tsx"],"sourcesContent":[],"mappings":";;;;cAIM,kBAAmB,yBAAoB,mBAAA,CAAA,GAAA,CAAA"}

package/dist/components/ds-button/versions/ds-button-new/ds-button-new.module.cjs

@@ -1,24 +1,24 @@
 
 //#region src/components/ds-button/versions/ds-button-new/ds-button-new.module.scss
 var ds_button_new_module_default = {
-	"button": "_button_1a5ak_1",
-	"content": "_content_1a5ak_1",
-	"small": "_small_1a5ak_1",
-	"medium": "_medium_1a5ak_1",
-	"large": "_large_1a5ak_1",
-	"iconButton": "_iconButton_1a5ak_1",
-	"primary-filled": "_primary-filled_1a5ak_1",
-	"secondary-filled": "_secondary-filled_1a5ak_1",
-	"tertiary-filled": "_tertiary-filled_1a5ak_1",
-	"secondary-ghost": "_secondary-ghost_1a5ak_1",
-	"tertiary-ghost": "_tertiary-ghost_1a5ak_1",
-	"primary-danger": "_primary-danger_1a5ak_1",
-	"secondary-danger": "_secondary-danger_1a5ak_1",
-	"tertiary-danger": "_tertiary-danger_1a5ak_1",
-	"primary-dark": "_primary-dark_1a5ak_1",
-	"secondary-dark": "_secondary-dark_1a5ak_1",
-	"secondary-light-dark": "_secondary-light-dark_1a5ak_1",
-	"tertiary-dark": "_tertiary-dark_1a5ak_1"
+	"button": "_button_1fx5c_1",
+	"content": "_content_1fx5c_1",
+	"small": "_small_1fx5c_1",
+	"medium": "_medium_1fx5c_1",
+	"large": "_large_1fx5c_1",
+	"iconButton": "_iconButton_1fx5c_1",
+	"primary-filled": "_primary-filled_1fx5c_1",
+	"secondary-filled": "_secondary-filled_1fx5c_1",
+	"tertiary-filled": "_tertiary-filled_1fx5c_1",
+	"secondary-ghost": "_secondary-ghost_1fx5c_1",
+	"tertiary-ghost": "_tertiary-ghost_1fx5c_1",
+	"primary-danger": "_primary-danger_1fx5c_1",
+	"secondary-danger": "_secondary-danger_1fx5c_1",
+	"tertiary-danger": "_tertiary-danger_1fx5c_1",
+	"primary-dark": "_primary-dark_1fx5c_1",
+	"secondary-dark": "_secondary-dark_1fx5c_1",
+	"secondary-light-dark": "_secondary-light-dark_1fx5c_1",
+	"tertiary-dark": "_tertiary-dark_1fx5c_1"
 };
 
 //#endregion

package/dist/components/ds-button/versions/ds-button-new/ds-button-new.module.js

@@ -1,23 +1,23 @@
 //#region src/components/ds-button/versions/ds-button-new/ds-button-new.module.scss
 var ds_button_new_module_default = {
-	"button": "_button_1a5ak_1",
-	"content": "_content_1a5ak_1",
-	"small": "_small_1a5ak_1",
-	"medium": "_medium_1a5ak_1",
-	"large": "_large_1a5ak_1",
-	"iconButton": "_iconButton_1a5ak_1",
-	"primary-filled": "_primary-filled_1a5ak_1",
-	"secondary-filled": "_secondary-filled_1a5ak_1",
-	"tertiary-filled": "_tertiary-filled_1a5ak_1",
-	"secondary-ghost": "_secondary-ghost_1a5ak_1",
-	"tertiary-ghost": "_tertiary-ghost_1a5ak_1",
-	"primary-danger": "_primary-danger_1a5ak_1",
-	"secondary-danger": "_secondary-danger_1a5ak_1",
-	"tertiary-danger": "_tertiary-danger_1a5ak_1",
-	"primary-dark": "_primary-dark_1a5ak_1",
-	"secondary-dark": "_secondary-dark_1a5ak_1",
-	"secondary-light-dark": "_secondary-light-dark_1a5ak_1",
-	"tertiary-dark": "_tertiary-dark_1a5ak_1"
+	"button": "_button_1fx5c_1",
+	"content": "_content_1fx5c_1",
+	"small": "_small_1fx5c_1",
+	"medium": "_medium_1fx5c_1",
+	"large": "_large_1fx5c_1",
+	"iconButton": "_iconButton_1fx5c_1",
+	"primary-filled": "_primary-filled_1fx5c_1",
+	"secondary-filled": "_secondary-filled_1fx5c_1",
+	"tertiary-filled": "_tertiary-filled_1fx5c_1",
+	"secondary-ghost": "_secondary-ghost_1fx5c_1",
+	"tertiary-ghost": "_tertiary-ghost_1fx5c_1",
+	"primary-danger": "_primary-danger_1fx5c_1",
+	"secondary-danger": "_secondary-danger_1fx5c_1",
+	"tertiary-danger": "_tertiary-danger_1fx5c_1",
+	"primary-dark": "_primary-dark_1fx5c_1",
+	"secondary-dark": "_secondary-dark_1fx5c_1",
+	"secondary-light-dark": "_secondary-light-dark_1fx5c_1",
+	"tertiary-dark": "_tertiary-dark_1fx5c_1"
 };
 
 //#endregion

package/dist/components/ds-button/versions/ds-button-new/ds-button-new.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"ds-button-new.module.js","names":[],"sources":["../../../../../file:/home/runner/work/design-system/design-system/packages/design-system/src/components/ds-button/versions/ds-button-new/ds-button-new.module.scss","../../../../../file:/home/runner/work/design-system/design-system/packages/design-system/src/styles/_typography.scss"],"sourcesContent":["@use '../../../../styles/typography';\n\n$button-size-small: 28px;\n$button-size-default: 32px;\n$button-size-large: 40px;\n\n.button {\n\t@include typography.body-sm-md;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\twhite-space: nowrap;\n\tcursor: pointer;\n\tbackground: none;\n\toutline: none;\n\tpadding-block: 0;\n\tpadding-inline: 0;\n\talign-self: stretch;\n\tborder: 2px solid transparent;\n\tborder-radius: var(--exo-spacing-2x-small);\n\n\t.content {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tgap: var(--exo-spacing-2x-small);\n\t\tpadding: 0 var(--spacing-sm);\n\t\tborder: 1px solid transparent;\n\t\tborder-radius: var(--exo-spacing-2x-small);\n\t\tflex-grow: 1;\n\t}\n\n\t&.small .content {\n\t\t@include typography.body-xs-md;\n\t\theight: $button-size-small;\n\t}\n\n\t&.medium .content {\n\t\theight: $button-size-default;\n\t}\n\n\t&.large .content {\n\t\t@include typography.body-md-md;\n\t\theight: $button-size-large;\n\t}\n\n\t&.iconButton {\n\t\taspect-ratio: 1 / 1;\n\t\talign-items: stretch;\n\n\t\t.content {\n\t\t\tflex: 1;\n\t\t\tpadding: 0;\n\t\t}\n\n\t\t&.large .content {\n\t\t\theight: $button-size-large;\n\t\t\twidth: $button-size-large;\n\t\t}\n\n\t\t&.medium .content {\n\t\t\theight: $button-size-default;\n\t\t\twidth: $button-size-default;\n\t\t}\n\n\t\t&.small .content {\n\t\t\theight: $button-size-small;\n\t\t\twidth: $button-size-small;\n\t\t}\n\t}\n\n\t&.primary-filled {\n\t\tborder: 2px solid transparent;\n\t\tcolor: var(--color-font-on-action);\n\n\t\t.content {\n\t\t\tbackground: var(--color-background-selected);\n\t\t}\n\n\t\t&:hover {\n\t\t\t.content {\n\t\t\t\tbackground: var(--color-background-selected-hover);\n\t\t\t}\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\tborder-color: var(--color-background-selected);\n\n\t\t\t.content {\n\t\t\t\tborder-color: var(--color-background);\n\t\t\t\tborder-radius: calc(var(--exo-spacing-2x-small) / 2);\n\t\t\t}\n\t\t}\n\n\t\t&:disabled {\n\t\t\tcursor: not-allowed;\n\n\t\t\t.content {\n\t\t\t\tbackground: var(--color-background-disable);\n\t\t\t\tborder-color: var(--color-background-disable);\n\t\t\t}\n\t\t}\n\t}\n\n\t&.secondary-filled {\n\t\tbackground: transparent;\n\t\tborder: 2px solid transparent;\n\t\tcolor: var(--color-background-action);\n\n\t\t.content {\n\t\t\tbackground: var(--color-background);\n\t\t\tborder-color: var(--color-border);\n\t\t}\n\n\t\t&:hover {\n\t\t\t&:not(:disabled) {\n\t\t\t\t.content {\n\t\t\t\t\tborder-color: var(--color-background-action-hover);\n\t\t\t\t\tbackground: var(--color-background-action-hover-weak);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&:focus-visible {\n\t\t\t\tbackground: var(--color-background);\n\n\t\t\t\t.content {\n\t\t\t\t\tborder-color: var(--color-background-action-secondary);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\tbackground: var(--color-background);\n\t\t\tborder-color: var(--color-background-action-hover);\n\n\t\t\t.content {\n\t\t\t\tborder-color: var(--color-background);\n\t\t\t\tbackground: var(--color-background-action-hover-weak);\n\t\t\t}\n\t\t}\n\n\t\t&:disabled {\n\t\t\tcursor: not-allowed;\n\t\t\tcolor: var(--color-background-disable);\n\n\t\t\t.content {\n\t\t\t\tborder-color: var(--color-background-disable);\n\t\t\t}\n\t\t}\n\t}\n\n\t&.tertiary-filled {\n\t\tbackground: transparent;\n\t\tborder: 2px solid transparent;\n\t\tcolor: var(--color-background-action);\n\n\t\t.content {\n\t\t\tbackground: var(--color-background);\n\t\t\tborder-color: transparent;\n\t\t}\n\n\t\t&:hover:not(:disabled) {\n\t\t\t.content {\n\t\t\t\tborder-color: var(--color-border);\n\t\t\t\tbackground: var(--color-background-action-hover-weak);\n\t\t\t}\n\t\t}\n\n\t\t&:active {\n\t\t\t.content {\n\t\t\t\tborder-color: var(--color-border);\n\t\t\t}\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\tbackground: var(--color-background);\n\t\t\tborder-color: var(--color-background-action-hover);\n\n\t\t\t.content {\n\t\t\t\tborder-color: var(--color-background);\n\t\t\t\tbackground: var(--color-background-action-hover-weak);\n\t\t\t\tborder-radius: calc(var(--exo-spacing-2x-small) / 2);\n\t\t\t}\n\t\t}\n\n\t\t&:disabled {\n\t\t\tcursor: not-allowed;\n\t\t\tcolor: var(--color-background-disable);\n\t\t}\n\t}\n\n\t&.secondary-ghost {\n\t\tbackground: transparent;\n\t\tborder: 2px solid transparent;\n\t\tcolor: var(--color-background-selected);\n\n\t\t.content {\n\t\t\tbackground: var(--color-background-action-secondary);\n\t\t\tborder-color: var(--color-background-selected);\n\t\t}\n\n\t\t&:hover {\n\t\t\t&:not(:disabled) {\n\t\t\t\t.content {\n\t\t\t\t\tbackground: var(--color-background-action-secondary-hover);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&:focus-visible {\n\t\t\t\t.content {\n\t\t\t\t\tborder-color: var(--color-background-action-secondary);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\tbackground: var(--color-background);\n\t\t\tborder-color: var(--color-background-selected);\n\n\t\t\t.content {\n\t\t\t\tborder-color: var(--color-background);\n\t\t\t\tbackground: var(--color-background-action-secondary-hover);\n\t\t\t}\n\t\t}\n\n\t\t&:disabled {\n\t\t\tcursor: not-allowed;\n\t\t\tcolor: var(--color-background-disable);\n\n\t\t\t.content {\n\t\t\t\tborder-color: var(--color-background-disable);\n\t\t\t}\n\t\t}\n\t}\n\n\t&.tertiary-ghost {\n\t\tbackground: transparent;\n\t\tborder: 2px solid transparent;\n\t\tcolor: var(--color-background-selected);\n\n\t\t.content {\n\t\t\tbackground: var(--color-background);\n\t\t\tborder-color: transparent;\n\t\t}\n\n\t\t&:hover:not(:disabled) {\n\t\t\t.content {\n\t\t\t\tbackground: var(--color-background-action-secondary-hover);\n\t\t\t}\n\t\t}\n\n\t\t&:active {\n\t\t\t.content {\n\t\t\t\tborder-color: var(--color-border);\n\t\t\t}\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\tbackground: var(--color-background);\n\t\t\tborder-color: var(--color-background-selected);\n\n\t\t\t.content {\n\t\t\t\tborder-color: var(--color-background);\n\t\t\t\tbackground: var(--color-background-action-secondary-hover);\n\t\t\t}\n\t\t}\n\n\t\t&:disabled {\n\t\t\tcursor: not-allowed;\n\t\t\tcolor: var(--color-background-disable);\n\n\t\t\t.content {\n\t\t\t\tborder-color: var(--color-background);\n\t\t\t}\n\t\t}\n\t}\n\n\t&.primary-danger {\n\t\tborder: 2px solid transparent;\n\t\tcolor: var(--color-font-on-action);\n\n\t\t.content {\n\t\t\tbackground: var(--color-background-danger-strong);\n\t\t}\n\n\t\t&:hover {\n\t\t\t.content {\n\t\t\t\tbackground: var(--color-background-danger-strong-hover);\n\t\t\t}\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\tborder-color: var(--color-background-danger-strong);\n\n\t\t\t.content {\n\t\t\t\tborder-color: var(--color-background);\n\t\t\t\tborder-radius: calc(var(--exo-spacing-2x-small) / 2);\n\t\t\t}\n\t\t}\n\n\t\t&:disabled {\n\t\t\tcursor: not-allowed;\n\n\t\t\t.content {\n\t\t\t\tbackground: var(--color-background-disable);\n\t\t\t\tborder-color: var(--color-background-disable);\n\t\t\t}\n\t\t}\n\t}\n\n\t&.secondary-danger {\n\t\tbackground: transparent;\n\t\tborder: 2px solid transparent;\n\t\tcolor: var(--color-background-danger-strong);\n\n\t\t.content {\n\t\t\tbackground: var(--color-background);\n\t\t\tborder-color: var(--color-background-danger-strong);\n\t\t}\n\n\t\t&:hover {\n\t\t\t&:not(:disabled) {\n\t\t\t\tcolor: var(--color-background-danger-strong-hover);\n\n\t\t\t\t.content {\n\t\t\t\t\tborder-color: var(--color-background-danger-strong-hover);\n\t\t\t\t\tbackground: var(--color-background-danger-weak);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&:focus-visible {\n\t\t\t\t.content {\n\t\t\t\t\tborder-color: var(--color-background-action-secondary);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\tbackground: var(--color-background);\n\t\t\tborder-color: var(--color-background-danger-strong);\n\n\t\t\t.content {\n\t\t\t\tcolor: var(--color-background-danger-strong-hover);\n\t\t\t\tborder-color: var(--color-background);\n\t\t\t\tbackground: var(--color-background-danger-weak);\n\t\t\t}\n\t\t}\n\n\t\t&:disabled {\n\t\t\tcursor: not-allowed;\n\t\t\tcolor: var(--color-background-disable);\n\n\t\t\t.content {\n\t\t\t\tborder-color: var(--color-background-disable);\n\t\t\t}\n\t\t}\n\t}\n\n\t&.tertiary-danger {\n\t\tbackground: transparent;\n\t\tborder: 2px solid transparent;\n\t\tcolor: var(--color-background-danger-strong);\n\n\t\t.content {\n\t\t\tbackground: var(--color-background);\n\t\t\tborder-color: transparent;\n\t\t}\n\n\t\t&:hover:not(:disabled) {\n\t\t\t.content {\n\t\t\t\tborder-color: var(--color-background-danger-strong-hover);\n\t\t\t\tbackground: var(--color-background-danger-weak);\n\t\t\t}\n\n\t\t\t&:focus-visible {\n\t\t\t\tbackground: var(--color-background);\n\n\t\t\t\t.content {\n\t\t\t\t\tborder-color: var(--color-background);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\tbackground: var(--color-background);\n\t\t\tborder-color: var(--color-background-danger-strong);\n\n\t\t\t.content {\n\t\t\t\tborder-color: var(--color-background);\n\t\t\t\tbackground: var(--color-background-danger-weak);\n\t\t\t}\n\t\t}\n\n\t\t&:disabled {\n\t\t\tcursor: not-allowed;\n\t\t\tbackground: var(--color-background);\n\t\t\tcolor: var(--color-background-disable);\n\t\t}\n\t}\n\n\t&.primary-dark {\n\t\tborder: 2px solid transparent;\n\t\tcolor: var(--color-font-on-action);\n\n\t\t.content {\n\t\t\tbackground: var(--color-dark-buttons-primary);\n\t\t}\n\n\t\t&:hover:not(:disabled) {\n\t\t\t.content {\n\t\t\t\tbackground: var(--color-dark-buttons-primary-hover);\n\t\t\t}\n\t\t}\n\n\t\t&:active:not(:disabled) {\n\t\t\t.content {\n\t\t\t\tbackground: var(--color-dark-buttons-primary-hover);\n\t\t\t}\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\tbackground: var(--color-background-brand);\n\t\t\tborder-color: var(--color-dark-buttons-primary);\n\n\t\t\t.content {\n\t\t\t\tborder-color: var(--color-font-on-action);\n\t\t\t\tborder-radius: calc(var(--exo-spacing-2x-small) / 2);\n\t\t\t}\n\t\t}\n\n\t\t&:disabled {\n\t\t\tcursor: not-allowed;\n\n\t\t\t.content {\n\t\t\t\tbackground: var(--color-background-action-inverse);\n\t\t\t\tcolor: var(--color-background-deselected);\n\t\t\t}\n\t\t}\n\t}\n\n\t&.secondary-dark {\n\t\tbackground: transparent;\n\t\tborder: 2px solid transparent;\n\t\tcolor: var(--color-dark-buttons-primary-hover);\n\n\t\t.content {\n\t\t\tbackground: transparent;\n\t\t\tborder-color: var(--color-dark-buttons-primary-hover);\n\t\t}\n\n\t\t&:hover:not(:disabled) {\n\t\t\t.content {\n\t\t\t\tbackground: var(--color-dark-buttons-secondary-background);\n\t\t\t\tborder-color: var(--color-dark-buttons-secondary-hover);\n\t\t\t\tcolor: var(--color-dark-buttons-secondary-hover);\n\t\t\t}\n\t\t}\n\n\t\t&:active:not(:disabled) {\n\t\t\t.content {\n\t\t\t\tbackground: transparent;\n\t\t\t\tborder-color: var(--color-dark-buttons-secondary-hover);\n\t\t\t\tcolor: var(--color-dark-buttons-secondary-hover);\n\t\t\t}\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\tbackground: transparent;\n\t\t\tborder-color: var(--color-dark-buttons-secondary-hover);\n\n\t\t\t.content {\n\t\t\t\tborder-color: transparent;\n\t\t\t\tbackground: var(--color-dark-buttons-secondary-background);\n\t\t\t\tcolor: var(--color-dark-buttons-secondary-hover);\n\t\t\t\tborder-radius: calc(var(--exo-spacing-2x-small) / 2);\n\t\t\t}\n\t\t}\n\n\t\t&:disabled {\n\t\t\tcursor: not-allowed;\n\t\t\tcolor: var(--color-background-deselected);\n\n\t\t\t.content {\n\t\t\t\tborder-color: var(--color-background-deselected);\n\t\t\t}\n\t\t}\n\t}\n\n\t&.secondary-light-dark {\n\t\tbackground: transparent;\n\t\tborder: 2px solid transparent;\n\t\tcolor: var(--color-dark-buttons-secondary-light);\n\n\t\t.content {\n\t\t\tbackground: transparent;\n\t\t\tborder-color: var(--color-dark-buttons-secondary-light);\n\t\t}\n\n\t\t&:hover:not(:disabled) {\n\t\t\t.content {\n\t\t\t\tbackground: var(--color-dark-buttons-secondary-light-hover-background);\n\t\t\t\tborder-color: var(--color-border);\n\t\t\t\tcolor: var(--color-dark-buttons-tertiary);\n\t\t\t}\n\t\t}\n\n\t\t&:active:not(:disabled) {\n\t\t\t.content {\n\t\t\t\tbackground: transparent;\n\t\t\t\tborder-color: var(--color-background-secondary);\n\t\t\t\tcolor: var(--color-font-on-action);\n\t\t\t}\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\tbackground: transparent;\n\t\t\tborder-color: var(--color-dark-buttons-tertiary);\n\t\t\tborder-radius: var(--spacing-2xs);\n\n\t\t\t.content {\n\t\t\t\tbackground: var(--Dark-Buttons-secondary-light-hover-background);\n\t\t\t\tcolor: var(--color-dark-buttons-tertiary);\n\t\t\t\tborder-radius: var(--exo-spacing-2x-small);\n\t\t\t}\n\t\t}\n\n\t\t&:disabled {\n\t\t\tcursor: not-allowed;\n\t\t\tcolor: var(--color-background-deselected);\n\n\t\t\t.content {\n\t\t\t\tborder-color: var(--color-background-deselected);\n\t\t\t}\n\t\t}\n\t}\n\n\t&.tertiary-dark {\n\t\tbackground: transparent;\n\t\tborder: 2px solid transparent;\n\t\tcolor: var(--color-dark-buttons-tertiary);\n\n\t\t.content {\n\t\t\tbackground: transparent;\n\t\t\tborder-color: transparent;\n\t\t}\n\n\t\t&:hover:not(:disabled) {\n\t\t\t.content {\n\t\t\t\tbackground: var(--color-dark-buttons-secondary-light-hover-background);\n\t\t\t\tborder-color: var(--color-border);\n\t\t\t\tcolor: var(--color-dark-buttons-tertiary);\n\t\t\t}\n\t\t}\n\n\t\t&:active:not(:disabled) {\n\t\t\t.content {\n\t\t\t\tbackground: transparent;\n\t\t\t\tborder-color: var(--color-background-secondary);\n\t\t\t\tcolor: var(--color-font-on-action);\n\t\t\t}\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\tbackground: transparent;\n\t\t\tborder-color: var(--color-dark-buttons-tertiary);\n\t\t\tborder-radius: var(--spacing-2xs);\n\n\t\t\t.content {\n\t\t\t\tbackground: var(--Dark-Buttons-secondary-light-hover-background);\n\t\t\t\tcolor: var(--color-dark-buttons-tertiary);\n\t\t\t\tborder-radius: var(--exo-spacing-2x-small);\n\t\t\t}\n\t\t}\n\n\t\t&:disabled {\n\t\t\tcursor: not-allowed;\n\t\t\tcolor: var(--color-background-deselected);\n\t\t}\n\t}\n}\n"],"mappings":""}
+{"version":3,"file":"ds-button-new.module.js","names":[],"sources":["../../../../../file:/home/runner/work/design-system/design-system/packages/design-system/src/components/ds-button/versions/ds-button-new/ds-button-new.module.scss","../../../../../file:/home/runner/work/design-system/design-system/packages/design-system/src/styles/_typography.scss"],"sourcesContent":["@use '../../../../styles/typography';\n\n$button-size-small: 28px;\n$button-size-default: 32px;\n$button-size-large: 40px;\n\n.button {\n\t@include typography.body-sm-md;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\twhite-space: nowrap;\n\tcursor: pointer;\n\tbackground: none;\n\toutline: none;\n\tpadding-block: 0;\n\tpadding-inline: 0;\n\tborder: 2px solid transparent;\n\tborder-radius: var(--exo-spacing-2x-small);\n\n\t.content {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tgap: var(--exo-spacing-2x-small);\n\t\tpadding: 0 var(--spacing-sm);\n\t\tborder: 1px solid transparent;\n\t\tborder-radius: var(--exo-spacing-2x-small);\n\t\tflex-grow: 1;\n\t}\n\n\t&.small .content {\n\t\t@include typography.body-xs-md;\n\t\theight: $button-size-small;\n\t}\n\n\t&.medium .content {\n\t\theight: $button-size-default;\n\t}\n\n\t&.large .content {\n\t\t@include typography.body-md-md;\n\t\theight: $button-size-large;\n\t}\n\n\t&.iconButton {\n\t\taspect-ratio: 1 / 1;\n\t\talign-items: stretch;\n\n\t\t.content {\n\t\t\tflex: 1;\n\t\t\tpadding: 0;\n\t\t}\n\n\t\t&.large .content {\n\t\t\theight: $button-size-large;\n\t\t\twidth: $button-size-large;\n\t\t}\n\n\t\t&.medium .content {\n\t\t\theight: $button-size-default;\n\t\t\twidth: $button-size-default;\n\t\t}\n\n\t\t&.small .content {\n\t\t\theight: $button-size-small;\n\t\t\twidth: $button-size-small;\n\t\t}\n\t}\n\n\t&.primary-filled {\n\t\tborder: 2px solid transparent;\n\t\tcolor: var(--color-font-on-action);\n\n\t\t.content {\n\t\t\tbackground: var(--color-background-selected);\n\t\t}\n\n\t\t&:hover {\n\t\t\t.content {\n\t\t\t\tbackground: var(--color-background-selected-hover);\n\t\t\t}\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\tborder-color: var(--color-background-selected);\n\n\t\t\t.content {\n\t\t\t\tborder-color: var(--color-background);\n\t\t\t\tborder-radius: calc(var(--exo-spacing-2x-small) / 2);\n\t\t\t}\n\t\t}\n\n\t\t&:disabled {\n\t\t\tcursor: not-allowed;\n\n\t\t\t.content {\n\t\t\t\tbackground: var(--color-background-disable);\n\t\t\t\tborder-color: var(--color-background-disable);\n\t\t\t}\n\t\t}\n\t}\n\n\t&.secondary-filled {\n\t\tbackground: transparent;\n\t\tborder: 2px solid transparent;\n\t\tcolor: var(--color-background-action);\n\n\t\t.content {\n\t\t\tbackground: var(--color-background);\n\t\t\tborder-color: var(--color-border);\n\t\t}\n\n\t\t&:hover {\n\t\t\t&:not(:disabled) {\n\t\t\t\t.content {\n\t\t\t\t\tborder-color: var(--color-background-action-hover);\n\t\t\t\t\tbackground: var(--color-background-action-hover-weak);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&:focus-visible {\n\t\t\t\tbackground: var(--color-background);\n\n\t\t\t\t.content {\n\t\t\t\t\tborder-color: var(--color-background-action-secondary);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\tbackground: var(--color-background);\n\t\t\tborder-color: var(--color-background-action-hover);\n\n\t\t\t.content {\n\t\t\t\tborder-color: var(--color-background);\n\t\t\t\tbackground: var(--color-background-action-hover-weak);\n\t\t\t}\n\t\t}\n\n\t\t&:disabled {\n\t\t\tcursor: not-allowed;\n\t\t\tcolor: var(--color-background-disable);\n\n\t\t\t.content {\n\t\t\t\tborder-color: var(--color-background-disable);\n\t\t\t}\n\t\t}\n\t}\n\n\t&.tertiary-filled {\n\t\tbackground: transparent;\n\t\tborder: 2px solid transparent;\n\t\tcolor: var(--color-background-action);\n\n\t\t.content {\n\t\t\tbackground: var(--color-background);\n\t\t\tborder-color: transparent;\n\t\t}\n\n\t\t&:hover:not(:disabled) {\n\t\t\t.content {\n\t\t\t\tborder-color: var(--color-border);\n\t\t\t\tbackground: var(--color-background-action-hover-weak);\n\t\t\t}\n\t\t}\n\n\t\t&:active {\n\t\t\t.content {\n\t\t\t\tborder-color: var(--color-border);\n\t\t\t}\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\tbackground: var(--color-background);\n\t\t\tborder-color: var(--color-background-action-hover);\n\n\t\t\t.content {\n\t\t\t\tborder-color: var(--color-background);\n\t\t\t\tbackground: var(--color-background-action-hover-weak);\n\t\t\t\tborder-radius: calc(var(--exo-spacing-2x-small) / 2);\n\t\t\t}\n\t\t}\n\n\t\t&:disabled {\n\t\t\tcursor: not-allowed;\n\t\t\tcolor: var(--color-background-disable);\n\t\t}\n\t}\n\n\t&.secondary-ghost {\n\t\tbackground: transparent;\n\t\tborder: 2px solid transparent;\n\t\tcolor: var(--color-background-selected);\n\n\t\t.content {\n\t\t\tbackground: var(--color-background-action-secondary);\n\t\t\tborder-color: var(--color-background-selected);\n\t\t}\n\n\t\t&:hover {\n\t\t\t&:not(:disabled) {\n\t\t\t\t.content {\n\t\t\t\t\tbackground: var(--color-background-action-secondary-hover);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&:focus-visible {\n\t\t\t\t.content {\n\t\t\t\t\tborder-color: var(--color-background-action-secondary);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\tbackground: var(--color-background);\n\t\t\tborder-color: var(--color-background-selected);\n\n\t\t\t.content {\n\t\t\t\tborder-color: var(--color-background);\n\t\t\t\tbackground: var(--color-background-action-secondary-hover);\n\t\t\t}\n\t\t}\n\n\t\t&:disabled {\n\t\t\tcursor: not-allowed;\n\t\t\tcolor: var(--color-background-disable);\n\n\t\t\t.content {\n\t\t\t\tborder-color: var(--color-background-disable);\n\t\t\t}\n\t\t}\n\t}\n\n\t&.tertiary-ghost {\n\t\tbackground: transparent;\n\t\tborder: 2px solid transparent;\n\t\tcolor: var(--color-background-selected);\n\n\t\t.content {\n\t\t\tbackground: var(--color-background);\n\t\t\tborder-color: transparent;\n\t\t}\n\n\t\t&:hover:not(:disabled) {\n\t\t\t.content {\n\t\t\t\tbackground: var(--color-background-action-secondary-hover);\n\t\t\t}\n\t\t}\n\n\t\t&:active {\n\t\t\t.content {\n\t\t\t\tborder-color: var(--color-border);\n\t\t\t}\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\tbackground: var(--color-background);\n\t\t\tborder-color: var(--color-background-selected);\n\n\t\t\t.content {\n\t\t\t\tborder-color: var(--color-background);\n\t\t\t\tbackground: var(--color-background-action-secondary-hover);\n\t\t\t}\n\t\t}\n\n\t\t&:disabled {\n\t\t\tcursor: not-allowed;\n\t\t\tcolor: var(--color-background-disable);\n\n\t\t\t.content {\n\t\t\t\tborder-color: var(--color-background);\n\t\t\t}\n\t\t}\n\t}\n\n\t&.primary-danger {\n\t\tborder: 2px solid transparent;\n\t\tcolor: var(--color-font-on-action);\n\n\t\t.content {\n\t\t\tbackground: var(--color-background-danger-strong);\n\t\t}\n\n\t\t&:hover {\n\t\t\t.content {\n\t\t\t\tbackground: var(--color-background-danger-strong-hover);\n\t\t\t}\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\tborder-color: var(--color-background-danger-strong);\n\n\t\t\t.content {\n\t\t\t\tborder-color: var(--color-background);\n\t\t\t\tborder-radius: calc(var(--exo-spacing-2x-small) / 2);\n\t\t\t}\n\t\t}\n\n\t\t&:disabled {\n\t\t\tcursor: not-allowed;\n\n\t\t\t.content {\n\t\t\t\tbackground: var(--color-background-disable);\n\t\t\t\tborder-color: var(--color-background-disable);\n\t\t\t}\n\t\t}\n\t}\n\n\t&.secondary-danger {\n\t\tbackground: transparent;\n\t\tborder: 2px solid transparent;\n\t\tcolor: var(--color-background-danger-strong);\n\n\t\t.content {\n\t\t\tbackground: var(--color-background);\n\t\t\tborder-color: var(--color-background-danger-strong);\n\t\t}\n\n\t\t&:hover {\n\t\t\t&:not(:disabled) {\n\t\t\t\tcolor: var(--color-background-danger-strong-hover);\n\n\t\t\t\t.content {\n\t\t\t\t\tborder-color: var(--color-background-danger-strong-hover);\n\t\t\t\t\tbackground: var(--color-background-danger-weak);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&:focus-visible {\n\t\t\t\t.content {\n\t\t\t\t\tborder-color: var(--color-background-action-secondary);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\tbackground: var(--color-background);\n\t\t\tborder-color: var(--color-background-danger-strong);\n\n\t\t\t.content {\n\t\t\t\tcolor: var(--color-background-danger-strong-hover);\n\t\t\t\tborder-color: var(--color-background);\n\t\t\t\tbackground: var(--color-background-danger-weak);\n\t\t\t}\n\t\t}\n\n\t\t&:disabled {\n\t\t\tcursor: not-allowed;\n\t\t\tcolor: var(--color-background-disable);\n\n\t\t\t.content {\n\t\t\t\tborder-color: var(--color-background-disable);\n\t\t\t}\n\t\t}\n\t}\n\n\t&.tertiary-danger {\n\t\tbackground: transparent;\n\t\tborder: 2px solid transparent;\n\t\tcolor: var(--color-background-danger-strong);\n\n\t\t.content {\n\t\t\tbackground: var(--color-background);\n\t\t\tborder-color: transparent;\n\t\t}\n\n\t\t&:hover:not(:disabled) {\n\t\t\t.content {\n\t\t\t\tborder-color: var(--color-background-danger-strong-hover);\n\t\t\t\tbackground: var(--color-background-danger-weak);\n\t\t\t}\n\n\t\t\t&:focus-visible {\n\t\t\t\tbackground: var(--color-background);\n\n\t\t\t\t.content {\n\t\t\t\t\tborder-color: var(--color-background);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\tbackground: var(--color-background);\n\t\t\tborder-color: var(--color-background-danger-strong);\n\n\t\t\t.content {\n\t\t\t\tborder-color: var(--color-background);\n\t\t\t\tbackground: var(--color-background-danger-weak);\n\t\t\t}\n\t\t}\n\n\t\t&:disabled {\n\t\t\tcursor: not-allowed;\n\t\t\tbackground: var(--color-background);\n\t\t\tcolor: var(--color-background-disable);\n\t\t}\n\t}\n\n\t&.primary-dark {\n\t\tborder: 2px solid transparent;\n\t\tcolor: var(--color-font-on-action);\n\n\t\t.content {\n\t\t\tbackground: var(--color-dark-buttons-primary);\n\t\t}\n\n\t\t&:hover:not(:disabled) {\n\t\t\t.content {\n\t\t\t\tbackground: var(--color-dark-buttons-primary-hover);\n\t\t\t}\n\t\t}\n\n\t\t&:active:not(:disabled) {\n\t\t\t.content {\n\t\t\t\tbackground: var(--color-dark-buttons-primary-hover);\n\t\t\t}\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\tbackground: var(--color-background-brand);\n\t\t\tborder-color: var(--color-dark-buttons-primary);\n\n\t\t\t.content {\n\t\t\t\tborder-color: var(--color-font-on-action);\n\t\t\t\tborder-radius: calc(var(--exo-spacing-2x-small) / 2);\n\t\t\t}\n\t\t}\n\n\t\t&:disabled {\n\t\t\tcursor: not-allowed;\n\n\t\t\t.content {\n\t\t\t\tbackground: var(--color-background-action-inverse);\n\t\t\t\tcolor: var(--color-background-deselected);\n\t\t\t}\n\t\t}\n\t}\n\n\t&.secondary-dark {\n\t\tbackground: transparent;\n\t\tborder: 2px solid transparent;\n\t\tcolor: var(--color-dark-buttons-primary-hover);\n\n\t\t.content {\n\t\t\tbackground: transparent;\n\t\t\tborder-color: var(--color-dark-buttons-primary-hover);\n\t\t}\n\n\t\t&:hover:not(:disabled) {\n\t\t\t.content {\n\t\t\t\tbackground: var(--color-dark-buttons-secondary-background);\n\t\t\t\tborder-color: var(--color-dark-buttons-secondary-hover);\n\t\t\t\tcolor: var(--color-dark-buttons-secondary-hover);\n\t\t\t}\n\t\t}\n\n\t\t&:active:not(:disabled) {\n\t\t\t.content {\n\t\t\t\tbackground: transparent;\n\t\t\t\tborder-color: var(--color-dark-buttons-secondary-hover);\n\t\t\t\tcolor: var(--color-dark-buttons-secondary-hover);\n\t\t\t}\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\tbackground: transparent;\n\t\t\tborder-color: var(--color-dark-buttons-secondary-hover);\n\n\t\t\t.content {\n\t\t\t\tborder-color: transparent;\n\t\t\t\tbackground: var(--color-dark-buttons-secondary-background);\n\t\t\t\tcolor: var(--color-dark-buttons-secondary-hover);\n\t\t\t\tborder-radius: calc(var(--exo-spacing-2x-small) / 2);\n\t\t\t}\n\t\t}\n\n\t\t&:disabled {\n\t\t\tcursor: not-allowed;\n\t\t\tcolor: var(--color-background-deselected);\n\n\t\t\t.content {\n\t\t\t\tborder-color: var(--color-background-deselected);\n\t\t\t}\n\t\t}\n\t}\n\n\t&.secondary-light-dark {\n\t\tbackground: transparent;\n\t\tborder: 2px solid transparent;\n\t\tcolor: var(--color-dark-buttons-secondary-light);\n\n\t\t.content {\n\t\t\tbackground: transparent;\n\t\t\tborder-color: var(--color-dark-buttons-secondary-light);\n\t\t}\n\n\t\t&:hover:not(:disabled) {\n\t\t\t.content {\n\t\t\t\tbackground: var(--color-dark-buttons-secondary-light-hover-background);\n\t\t\t\tborder-color: var(--color-border);\n\t\t\t\tcolor: var(--color-dark-buttons-tertiary);\n\t\t\t}\n\t\t}\n\n\t\t&:active:not(:disabled) {\n\t\t\t.content {\n\t\t\t\tbackground: transparent;\n\t\t\t\tborder-color: var(--color-background-secondary);\n\t\t\t\tcolor: var(--color-font-on-action);\n\t\t\t}\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\tbackground: transparent;\n\t\t\tborder-color: var(--color-dark-buttons-tertiary);\n\t\t\tborder-radius: var(--spacing-2xs);\n\n\t\t\t.content {\n\t\t\t\tbackground: var(--Dark-Buttons-secondary-light-hover-background);\n\t\t\t\tcolor: var(--color-dark-buttons-tertiary);\n\t\t\t\tborder-radius: var(--exo-spacing-2x-small);\n\t\t\t}\n\t\t}\n\n\t\t&:disabled {\n\t\t\tcursor: not-allowed;\n\t\t\tcolor: var(--color-background-deselected);\n\n\t\t\t.content {\n\t\t\t\tborder-color: var(--color-background-deselected);\n\t\t\t}\n\t\t}\n\t}\n\n\t&.tertiary-dark {\n\t\tbackground: transparent;\n\t\tborder: 2px solid transparent;\n\t\tcolor: var(--color-dark-buttons-tertiary);\n\n\t\t.content {\n\t\t\tbackground: transparent;\n\t\t\tborder-color: transparent;\n\t\t}\n\n\t\t&:hover:not(:disabled) {\n\t\t\t.content {\n\t\t\t\tbackground: var(--color-dark-buttons-secondary-light-hover-background);\n\t\t\t\tborder-color: var(--color-border);\n\t\t\t\tcolor: var(--color-dark-buttons-tertiary);\n\t\t\t}\n\t\t}\n\n\t\t&:active:not(:disabled) {\n\t\t\t.content {\n\t\t\t\tbackground: transparent;\n\t\t\t\tborder-color: var(--color-background-secondary);\n\t\t\t\tcolor: var(--color-font-on-action);\n\t\t\t}\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\tbackground: transparent;\n\t\t\tborder-color: var(--color-dark-buttons-tertiary);\n\t\t\tborder-radius: var(--spacing-2xs);\n\n\t\t\t.content {\n\t\t\t\tbackground: var(--Dark-Buttons-secondary-light-hover-background);\n\t\t\t\tcolor: var(--color-dark-buttons-tertiary);\n\t\t\t\tborder-radius: var(--exo-spacing-2x-small);\n\t\t\t}\n\t\t}\n\n\t\t&:disabled {\n\t\t\tcursor: not-allowed;\n\t\t\tcolor: var(--color-background-deselected);\n\t\t}\n\t}\n}\n"],"mappings":""}

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

@@ -11,7 +11,8 @@ let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/components/ds-chip/ds-chip.tsx
 /**
-* Design system Chip component
+* @deprecated This component is deprecated. Use `DsTag` instead.
+* @see {@link ../ds-tag} for the replacement component.
 */
 const DsChip = (t0) => {
 	const $ = (0, react_compiler_runtime.c)(29);

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

@@ -4,7 +4,8 @@ import React from "react";
 //#region src/components/ds-chip/ds-chip.d.ts
 
 /**
- * Design system Chip component
+ * @deprecated This component is deprecated. Use `DsTag` instead.
+ * @see {@link ../ds-tag} for the replacement component.
  */
 declare const DsChip: React.FC<DsChipProps>;
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"ds-chip.d.cts","names":[],"sources":["../../../src/components/ds-chip/ds-chip.tsx"],"sourcesContent":[],"mappings":";;;;;;;AAGmD;cAO7C,QAAQ,KAAA,CAAM,GAAG"}
+{"version":3,"file":"ds-chip.d.cts","names":[],"sources":["../../../src/components/ds-chip/ds-chip.tsx"],"sourcesContent":[],"mappings":";;;;;;;AAGmD;;cAQ7C,QAAQ,KAAA,CAAM,GAAG"}

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

@@ -4,7 +4,8 @@ import React from "react";
 //#region src/components/ds-chip/ds-chip.d.ts
 
 /**
- * Design system Chip component
+ * @deprecated This component is deprecated. Use `DsTag` instead.
+ * @see {@link ../ds-tag} for the replacement component.
  */
 declare const DsChip: React.FC<DsChipProps>;
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"ds-chip.d.ts","names":[],"sources":["../../../src/components/ds-chip/ds-chip.tsx"],"sourcesContent":[],"mappings":";;;;;;;AAGmD;cAO7C,QAAQ,KAAA,CAAM,GAAG"}
+{"version":3,"file":"ds-chip.d.ts","names":[],"sources":["../../../src/components/ds-chip/ds-chip.tsx"],"sourcesContent":[],"mappings":";;;;;;;AAGmD;;cAQ7C,QAAQ,KAAA,CAAM,GAAG"}

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

@@ -9,7 +9,8 @@ import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/ds-chip/ds-chip.tsx
 /**
-* Design system Chip component
+* @deprecated This component is deprecated. Use `DsTag` instead.
+* @see {@link ../ds-tag} for the replacement component.
 */
 const DsChip = (t0) => {
 	const $ = c(29);

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

@@ -1 +1 @@
-{"version":3,"file":"ds-chip.js","names":["React","classNames","styles","DsChipProps","DsIcon","DsTypography","DsChip","FC","t0","$","_c","ref","label","className","style","t1","onClick","onDelete","size","t2","deleteIcon","selected","t3","t4","undefined","t5","t6","t7","chip","clickable","small","chipClass","t8","event","stopPropagation","handleDeleteClick","t9","event_0","key","preventDefault","handleKeyDown","t10","Ref","HTMLDivElement","t11","t12","t13","t14","t15","t16","deleteButton","t17"],"sources":["../../../src/components/ds-chip/ds-chip.tsx"],"sourcesContent":["import type React from 'react';\nimport classNames from 'classnames';\nimport styles from './ds-chip.module.scss';\nimport type { DsChipProps } from './ds-chip.types';\nimport { DsIcon } from '../ds-icon';\nimport { DsTypography } from '../ds-typography';\n\n/**\n * Design system Chip component\n */\nconst DsChip: React.FC<DsChipProps> = ({\n\tref,\n\tlabel,\n\tclassName,\n\tstyle = {},\n\tonClick,\n\tonDelete,\n\tsize = 'medium',\n\tdeleteIcon,\n\tselected = false,\n}) => {\n\tconst chipClass = classNames(\n\t\tstyles.chip,\n\t\t{\n\t\t\t[styles.clickable]: onClick !== undefined,\n\t\t\t[styles.small]: size === 'small',\n\t\t},\n\t\tclassName,\n\t);\n\n\tconst handleDeleteClick = (event: React.MouseEvent<HTMLElement>) => {\n\t\tevent.stopPropagation();\n\t\tonDelete?.(event);\n\t};\n\n\tconst handleKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {\n\t\tif (onDelete && (event.key === 'Backspace' || event.key === 'Delete')) {\n\t\t\tevent.preventDefault();\n\t\t\tonDelete(event);\n\t\t}\n\t};\n\n\treturn (\n\t\t<div\n\t\t\tref={ref as React.Ref<HTMLDivElement>}\n\t\t\tclassName={chipClass}\n\t\t\tstyle={style}\n\t\t\tonClick={onClick}\n\t\t\tonKeyDown={handleKeyDown}\n\t\t\trole={onClick || onDelete ? 'button' : undefined}\n\t\t\ttabIndex={onClick || onDelete ? 0 : undefined}\n\t\t\taria-label={label}\n\t\t\taria-pressed={onClick && selected ? 'true' : undefined}\n\t\t>\n\t\t\t<DsTypography variant={size === 'small' ? 'body-xs-reg' : 'body-sm-reg'} className={styles.label}>\n\t\t\t\t{label}\n\t\t\t</DsTypography>\n\t\t\t{onDelete && (\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tclassName={styles.deleteButton}\n\t\t\t\t\tonClick={handleDeleteClick}\n\t\t\t\t\taria-label=\"Delete chip\"\n\t\t\t\t\ttabIndex={-1}\n\t\t\t\t>\n\t\t\t\t\t<DsIcon icon={deleteIcon || 'cancel'} size=\"tiny\" />\n\t\t\t\t</button>\n\t\t\t)}\n\t\t</div>\n\t);\n};\n\nexport default DsChip;\n"],"mappings":"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"}
+{"version":3,"file":"ds-chip.js","names":["React","classNames","styles","DsChipProps","DsIcon","DsTypography","DsChip","FC","t0","$","_c","ref","label","className","style","t1","onClick","onDelete","size","t2","deleteIcon","selected","t3","t4","undefined","t5","t6","t7","chip","clickable","small","chipClass","t8","event","stopPropagation","handleDeleteClick","t9","event_0","key","preventDefault","handleKeyDown","t10","Ref","HTMLDivElement","t11","t12","t13","t14","t15","t16","deleteButton","t17"],"sources":["../../../src/components/ds-chip/ds-chip.tsx"],"sourcesContent":["import type React from 'react';\nimport classNames from 'classnames';\nimport styles from './ds-chip.module.scss';\nimport type { DsChipProps } from './ds-chip.types';\nimport { DsIcon } from '../ds-icon';\nimport { DsTypography } from '../ds-typography';\n\n/**\n * @deprecated This component is deprecated. Use `DsTag` instead.\n * @see {@link ../ds-tag} for the replacement component.\n */\nconst DsChip: React.FC<DsChipProps> = ({\n\tref,\n\tlabel,\n\tclassName,\n\tstyle = {},\n\tonClick,\n\tonDelete,\n\tsize = 'medium',\n\tdeleteIcon,\n\tselected = false,\n}) => {\n\tconst chipClass = classNames(\n\t\tstyles.chip,\n\t\t{\n\t\t\t[styles.clickable]: onClick !== undefined,\n\t\t\t[styles.small]: size === 'small',\n\t\t},\n\t\tclassName,\n\t);\n\n\tconst handleDeleteClick = (event: React.MouseEvent<HTMLElement>) => {\n\t\tevent.stopPropagation();\n\t\tonDelete?.(event);\n\t};\n\n\tconst handleKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {\n\t\tif (onDelete && (event.key === 'Backspace' || event.key === 'Delete')) {\n\t\t\tevent.preventDefault();\n\t\t\tonDelete(event);\n\t\t}\n\t};\n\n\treturn (\n\t\t<div\n\t\t\tref={ref as React.Ref<HTMLDivElement>}\n\t\t\tclassName={chipClass}\n\t\t\tstyle={style}\n\t\t\tonClick={onClick}\n\t\t\tonKeyDown={handleKeyDown}\n\t\t\trole={onClick || onDelete ? 'button' : undefined}\n\t\t\ttabIndex={onClick || onDelete ? 0 : undefined}\n\t\t\taria-label={label}\n\t\t\taria-pressed={onClick && selected ? 'true' : undefined}\n\t\t>\n\t\t\t<DsTypography variant={size === 'small' ? 'body-xs-reg' : 'body-sm-reg'} className={styles.label}>\n\t\t\t\t{label}\n\t\t\t</DsTypography>\n\t\t\t{onDelete && (\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tclassName={styles.deleteButton}\n\t\t\t\t\tonClick={handleDeleteClick}\n\t\t\t\t\taria-label=\"Delete chip\"\n\t\t\t\t\ttabIndex={-1}\n\t\t\t\t>\n\t\t\t\t\t<DsIcon icon={deleteIcon || 'cancel'} size=\"tiny\" />\n\t\t\t\t</button>\n\t\t\t)}\n\t\t</div>\n\t);\n};\n\nexport default DsChip;\n"],"mappings":"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"}

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

@@ -2,8 +2,21 @@ import { IconType } from "../ds-icon/ds-icon.types.cjs";
 import { CSSProperties, KeyboardEvent, MouseEvent, Ref } from "react";
 
 //#region src/components/ds-chip/ds-chip.types.d.ts
+
+/**
+ * @deprecated This type is deprecated. Use `DsTag` instead.
+ * @see {@link ../ds-tag} for the replacement component.
+ */
 declare const chipSizes: readonly ["medium", "small"];
+/**
+ * @deprecated This type is deprecated. Use `DsTag` instead.
+ * @see {@link ../ds-tag} for the replacement component.
+ */
 type ChipSize = (typeof chipSizes)[number];
+/**
+ * @deprecated This interface is deprecated. Use `DsTagProps` from `ds-tag` instead.
+ * @see {@link ../ds-tag/ds-tag.types} for the replacement interface.
+ */
 interface DsChipProps {
   /**
    * Ref to the chip element

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

@@ -1 +1 @@
-{"version":3,"file":"ds-chip.types.d.cts","names":[],"sources":["../../../src/components/ds-chip/ds-chip.types.tsx"],"sourcesContent":[],"mappings":";;;;cAGa;KACD,QAAA,WAAmB;AADlB,UAGI,WAAA,CAHoC;EACzC;AAEZ;;EAIO,GAAA,CAAA,EAAA,GAAA,CAAI,WAAJ,CAAA;EAYE;;;EAQsB,KAAA,EAAA,MAAA;EAAX;;;EAKZ,SAAA,CAAA,EAAA,MAAA;EAIM;;;UAjBL;;;;oBAIU,WAAW;;;;qBAIV,WAAW,eAAe,cAAc;;;;;SAKpD;;;;eAIM"}
+{"version":3,"file":"ds-chip.types.d.cts","names":[],"sources":["../../../src/components/ds-chip/ds-chip.types.tsx"],"sourcesContent":[],"mappings":";;;;;;;AAOA;AAMA;AAMiB,cAZJ,SAYe,EAAA,SAAA,CAAA,QAAA,EAAA,OAAA,CAAA;;;;;AAoBT,KA1BP,QAAA,GA0BO,CAAA,OA1BY,SA0BZ,CAAA,CAAA,MAAA,CAAA;;;;;AASX,UA7BS,WAAA,CA6BT;EAIM;;;QA7BP,IAAI;;;;;;;;;;;;UAYF;;;;oBAIU,WAAW;;;;qBAIV,WAAW,eAAe,cAAc;;;;;SAKpD;;;;eAIM"}

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

@@ -3,8 +3,21 @@ import "../ds-icon/index.js";
 import { CSSProperties, KeyboardEvent, MouseEvent, Ref } from "react";
 
 //#region src/components/ds-chip/ds-chip.types.d.ts
+
+/**
+ * @deprecated This type is deprecated. Use `DsTag` instead.
+ * @see {@link ../ds-tag} for the replacement component.
+ */
 declare const chipSizes: readonly ["medium", "small"];
+/**
+ * @deprecated This type is deprecated. Use `DsTag` instead.
+ * @see {@link ../ds-tag} for the replacement component.
+ */
 type ChipSize = (typeof chipSizes)[number];
+/**
+ * @deprecated This interface is deprecated. Use `DsTagProps` from `ds-tag` instead.
+ * @see {@link ../ds-tag/ds-tag.types} for the replacement interface.
+ */
 interface DsChipProps {
   /**
    * Ref to the chip element

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

@@ -1 +1 @@
-{"version":3,"file":"ds-chip.types.d.ts","names":[],"sources":["../../../src/components/ds-chip/ds-chip.types.tsx"],"sourcesContent":[],"mappings":";;;;;cAGa;KACD,QAAA,WAAmB;UAEd,WAAA;EAHJ;AACb;AAEA;EAIW,GAAA,CAAA,EAAJ,GAAI,CAAA,WAAA,CAAA;EAAJ;;;EAgBY,KAAA,EAAA,MAAA;EAIY;;;EAAe,SAAA,CAAA,EAAA,MAAA;EAKtC;;;UAbC;;;;oBAIU,WAAW;;;;qBAIV,WAAW,eAAe,cAAc;;;;;SAKpD;;;;eAIM"}
+{"version":3,"file":"ds-chip.types.d.ts","names":[],"sources":["../../../src/components/ds-chip/ds-chip.types.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;AAOA;AAMY,cANC,SAMkB,EAAA,SAAS,CAAA,QAAA,EAAA,OAAA,CAAA;AAMxC;;;;AAoB8B,KA1BlB,QAAA,GA0BkB,CAAA,OA1BC,SA0BD,CAAA,CAAA,MAAA,CAAA;;;;;AAIgB,UAxB7B,WAAA,CAwB6B;EAKtC;;;QAzBD,IAAI;;;;;;;;;;;;UAYF;;;;oBAIU,WAAW;;;;qBAIV,WAAW,eAAe,cAAc;;;;;SAKpD;;;;eAIM"}

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

@@ -20,8 +20,8 @@ let __radix_ui_react_visually_hidden = require("@radix-ui/react-visually-hidden"
 
 //#region src/components/ds-chip-group/ds-chip-group.tsx
 /**
-* Design system chip group component displays a collection of chips with overflow handling
-* Used for displaying filters, selected items, tags, etc.
+* @deprecated This component is deprecated. Use `DsTagFilter` instead.
+* @see {@link ../ds-tag-filter} for the replacement component.
 */
 const DsChipGroup = ({ items, label = "Filtered by:", onClearAll, onItemDelete, onItemSelect, className, style }) => {
 	const [dialogOpen, setDialogOpen] = (0, react.useState)(false);

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

@@ -4,8 +4,8 @@ import React from "react";
 //#region src/components/ds-chip-group/ds-chip-group.d.ts
 
 /**
- * Design system chip group component displays a collection of chips with overflow handling
- * Used for displaying filters, selected items, tags, etc.
+ * @deprecated This component is deprecated. Use `DsTagFilter` instead.
+ * @see {@link ../ds-tag-filter} for the replacement component.
  */
 declare const DsChipGroup: React.FC<DsChipGroupProps>;
 //#endregion

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

@@ -4,8 +4,8 @@ import React from "react";
 //#region src/components/ds-chip-group/ds-chip-group.d.ts
 
 /**
- * Design system chip group component displays a collection of chips with overflow handling
- * Used for displaying filters, selected items, tags, etc.
+ * @deprecated This component is deprecated. Use `DsTagFilter` instead.
+ * @see {@link ../ds-tag-filter} for the replacement component.
  */
 declare const DsChipGroup: React.FC<DsChipGroupProps>;
 //#endregion

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

@@ -17,8 +17,8 @@ import { Root } from "@radix-ui/react-visually-hidden";
 
 //#region src/components/ds-chip-group/ds-chip-group.tsx
 /**
-* Design system chip group component displays a collection of chips with overflow handling
-* Used for displaying filters, selected items, tags, etc.
+* @deprecated This component is deprecated. Use `DsTagFilter` instead.
+* @see {@link ../ds-tag-filter} for the replacement component.
 */
 const DsChipGroup = ({ items, label = "Filtered by:", onClearAll, onItemDelete, onItemSelect, className, style }) => {
 	const [dialogOpen, setDialogOpen] = useState(false);