@drivenets/design-system 0.0.3 → 0.0.4

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

@@ -3,6 +3,7 @@ import "../ds-icon/index.js";
 import ds_typography_default from "../ds-typography/ds-typography.js";
 import "../ds-typography/index.js";
 import ds_chip_module_default from "./ds-chip.module.js";
+import { c } from "react/compiler-runtime";
 import classNames from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
 
@@ -10,36 +11,73 @@ import { jsx, jsxs } from "react/jsx-runtime";
 /**
 * Design system Chip component
 */
-const DsChip = ({ ref, label, className, style = {}, onClick, onDelete, size = "medium", deleteIcon, selected = false }) => {
-	const chipClass = classNames(ds_chip_module_default.chip, {
-		[ds_chip_module_default.clickable]: onClick !== void 0,
-		[ds_chip_module_default.small]: size === "small"
-	}, className);
-	const handleDeleteClick = (event) => {
-		event.stopPropagation();
-		onDelete?.(event);
-	};
-	const handleKeyDown = (event) => {
-		if (onDelete && (event.key === "Backspace" || event.key === "Delete")) {
-			event.preventDefault();
-			onDelete(event);
-		}
-	};
-	return /* @__PURE__ */ jsxs("div", {
-		ref,
-		className: chipClass,
-		style,
-		onClick,
-		onKeyDown: handleKeyDown,
-		role: onClick || onDelete ? "button" : void 0,
-		tabIndex: onClick || onDelete ? 0 : void 0,
-		"aria-label": label,
-		"aria-pressed": onClick && selected ? "true" : void 0,
-		children: [/* @__PURE__ */ jsx(ds_typography_default, {
-			variant: size === "small" ? "body-xs-reg" : "body-sm-reg",
+const DsChip = (t0) => {
+	const $ = c(29);
+	const { ref, label, className, style: t1, onClick, onDelete, size: t2, deleteIcon, selected: t3 } = t0;
+	let t4;
+	if ($[0] !== t1) {
+		t4 = t1 === void 0 ? {} : t1;
+		$[0] = t1;
+		$[1] = t4;
+	} else t4 = $[1];
+	const style = t4;
+	const size = t2 === void 0 ? "medium" : t2;
+	const selected = t3 === void 0 ? false : t3;
+	const t5 = onClick !== void 0;
+	const t6 = size === "small";
+	let t7;
+	if ($[2] !== className || $[3] !== t5 || $[4] !== t6) {
+		t7 = classNames(ds_chip_module_default.chip, {
+			[ds_chip_module_default.clickable]: t5,
+			[ds_chip_module_default.small]: t6
+		}, className);
+		$[2] = className;
+		$[3] = t5;
+		$[4] = t6;
+		$[5] = t7;
+	} else t7 = $[5];
+	const chipClass = t7;
+	let t8;
+	if ($[6] !== onDelete) {
+		t8 = (event) => {
+			event.stopPropagation();
+			onDelete?.(event);
+		};
+		$[6] = onDelete;
+		$[7] = t8;
+	} else t8 = $[7];
+	const handleDeleteClick = t8;
+	let t9;
+	if ($[8] !== onDelete) {
+		t9 = (event_0) => {
+			if (onDelete && (event_0.key === "Backspace" || event_0.key === "Delete")) {
+				event_0.preventDefault();
+				onDelete(event_0);
+			}
+		};
+		$[8] = onDelete;
+		$[9] = t9;
+	} else t9 = $[9];
+	const handleKeyDown = t9;
+	const t10 = ref;
+	const t11 = onClick || onDelete ? "button" : void 0;
+	const t12 = onClick || onDelete ? 0 : void 0;
+	const t13 = onClick && selected ? "true" : void 0;
+	const t14 = size === "small" ? "body-xs-reg" : "body-sm-reg";
+	let t15;
+	if ($[10] !== label || $[11] !== t14) {
+		t15 = /* @__PURE__ */ jsx(ds_typography_default, {
+			variant: t14,
 			className: ds_chip_module_default.label,
 			children: label
-		}), onDelete && /* @__PURE__ */ jsx("button", {
+		});
+		$[10] = label;
+		$[11] = t14;
+		$[12] = t15;
+	} else t15 = $[12];
+	let t16;
+	if ($[13] !== deleteIcon || $[14] !== handleDeleteClick || $[15] !== onDelete) {
+		t16 = onDelete && /* @__PURE__ */ jsx("button", {
 			type: "button",
 			className: ds_chip_module_default.deleteButton,
 			onClick: handleDeleteClick,
@@ -49,8 +87,40 @@ const DsChip = ({ ref, label, className, style = {}, onClick, onDelete, size = "
 				icon: deleteIcon || "cancel",
 				size: "tiny"
 			})
-		})]
-	});
+		});
+		$[13] = deleteIcon;
+		$[14] = handleDeleteClick;
+		$[15] = onDelete;
+		$[16] = t16;
+	} else t16 = $[16];
+	let t17;
+	if ($[17] !== chipClass || $[18] !== handleKeyDown || $[19] !== label || $[20] !== onClick || $[21] !== style || $[22] !== t10 || $[23] !== t11 || $[24] !== t12 || $[25] !== t13 || $[26] !== t15 || $[27] !== t16) {
+		t17 = /* @__PURE__ */ jsxs("div", {
+			ref: t10,
+			className: chipClass,
+			style,
+			onClick,
+			onKeyDown: handleKeyDown,
+			role: t11,
+			tabIndex: t12,
+			"aria-label": label,
+			"aria-pressed": t13,
+			children: [t15, t16]
+		});
+		$[17] = chipClass;
+		$[18] = handleKeyDown;
+		$[19] = label;
+		$[20] = onClick;
+		$[21] = style;
+		$[22] = t10;
+		$[23] = t11;
+		$[24] = t12;
+		$[25] = t13;
+		$[26] = t15;
+		$[27] = t16;
+		$[28] = t17;
+	} else t17 = $[28];
+	return t17;
 };
 var ds_chip_default = DsChip;
 

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

@@ -1 +1 @@
-{"version":3,"file":"ds-chip.js","names":["DsChip: React.FC<DsChipProps>","styles","DsTypography","DsIcon"],"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":";;;;;;;;;;;;AAUA,MAAMA,UAAiC,EACtC,KACA,OACA,WACA,QAAQ,EAAE,EACV,SACA,UACA,OAAO,UACP,YACA,WAAW,YACN;CACL,MAAM,YAAY,WACjBC,uBAAO,MACP;GACEA,uBAAO,YAAY,YAAY;GAC/BA,uBAAO,QAAQ,SAAS;EACzB,EACD,UACA;CAED,MAAM,qBAAqB,UAAyC;AACnE,QAAM,iBAAiB;AACvB,aAAW,MAAM;;CAGlB,MAAM,iBAAiB,UAA4C;AAClE,MAAI,aAAa,MAAM,QAAQ,eAAe,MAAM,QAAQ,WAAW;AACtE,SAAM,gBAAgB;AACtB,YAAS,MAAM;;;AAIjB,QACC,qBAAC;EACK;EACL,WAAW;EACJ;EACE;EACT,WAAW;EACX,MAAM,WAAW,WAAW,WAAW;EACvC,UAAU,WAAW,WAAW,IAAI;EACpC,cAAY;EACZ,gBAAc,WAAW,WAAW,SAAS;aAE7C,oBAACC;GAAa,SAAS,SAAS,UAAU,gBAAgB;GAAe,WAAWD,uBAAO;aACzF;IACa,EACd,YACA,oBAAC;GACA,MAAK;GACL,WAAWA,uBAAO;GAClB,SAAS;GACT,cAAW;GACX,UAAU;aAEV,oBAACE;IAAO,MAAM,cAAc;IAAU,MAAK;KAAS;IAC5C;GAEL;;AAIR,sBAAe"}
+{"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":";;;;;;;;;;;;;AAUA,MAAMM,UAAgCE,OAAA;CAAA,MAAAC,IAAAC,EAAA,GAAA;CAAC,MAAA,EAAAC,KAAAC,OAAAC,WAAAC,OAAAC,IAAAC,SAAAC,UAAAC,MAAAC,IAAAC,YAAAC,UAAAC,OAAAd;CAUtC,IAAAe;AAAA,KAAAd,EAAA,OAAAM,IAAA;AANAQ,OAAAR,OAAAS,SAAA,EAAU,GAAVT;AAAUN,IAAA,KAAAM;AAAAN,IAAA,KAAAc;OAAAA,MAAAd,EAAA;CAAV,MAAAK,QAAAS;CAGA,MAAAL,OAAAC,OAAAK,SAAA,WAAAL;CAEA,MAAAE,WAAAC,OAAAE,SAAA,QAAAF;CAKsB,MAAAG,KAAAT,YAAYQ;CAChB,MAAAE,KAAAR,SAAS;CAAO,IAAAS;AAAA,KAAAlB,EAAA,OAAAI,aAAAJ,EAAA,OAAAgB,MAAAhB,EAAA,OAAAiB,IAAA;AAJhBC,OAAA1B,WACjBC,uBAAM0B,MACN;IACE1B,uBAAM2B,YAAaJ;IACnBvB,uBAAM4B,QAASJ;GAChB,EACDb,UACA;AAAAJ,IAAA,KAAAI;AAAAJ,IAAA,KAAAgB;AAAAhB,IAAA,KAAAiB;AAAAjB,IAAA,KAAAkB;OAAAA,MAAAlB,EAAA;CAPD,MAAAsB,YAAkBJ;CAOhB,IAAAK;AAAA,KAAAvB,EAAA,OAAAQ,UAAA;AAEwBe,QAAAC,UAAA;AACzBA,SAAKC,iBAAkB;AACvBjB,cAAWgB,MAAM;;AACjBxB,IAAA,KAAAQ;AAAAR,IAAA,KAAAuB;OAAAA,MAAAvB,EAAA;CAHD,MAAA0B,oBAA0BH;CAGxB,IAAAI;AAAA,KAAA3B,EAAA,OAAAQ,UAAA;AAEoBmB,QAAAC,YAAA;AACrB,OAAIpB,aAAagB,QAAKK,QAAS,eAAeL,QAAKK,QAAS,WAAS;AACpEL,YAAKM,gBAAiB;AACtBtB,aAASgB,QAAM;;;AAEhBxB,IAAA,KAAAQ;AAAAR,IAAA,KAAA2B;OAAAA,MAAA3B,EAAA;CALD,MAAA+B,gBAAsBJ;CASf,MAAAK,MAAA9B;CAKC,MAAAiC,MAAA5B,WAAAC,WAAA,WAAAO;CACI,MAAAqB,MAAA7B,WAAAC,WAAA,IAAAO;CAEI,MAAAsB,MAAA9B,WAAAK,WAAA,SAAAG;CAES,MAAAuB,MAAA7B,SAAS,UAAT,gBAAA;CAAgD,IAAA8B;AAAA,KAAAvC,EAAA,QAAAG,SAAAH,EAAA,QAAAsC,KAAA;AAAvEC,QAAA,oBAAC;GAAsB,SAAAD;GAA6D,WAAA7C,uBAAMU;aACxFA;IACa;AAAAH,IAAA,MAAAG;AAAAH,IAAA,MAAAsC;AAAAtC,IAAA,MAAAuC;OAAAA,OAAAvC,EAAA;CAAA,IAAAwC;AAAA,KAAAxC,EAAA,QAAAW,cAAAX,EAAA,QAAA0B,qBAAA1B,EAAA,QAAAQ,UAAA;AACdgC,QAAAhC,YACA,oBAAA;GACM,MAAA;GACM,WAAAf,uBAAMgD;GACRf,SAAAA;GACE,cAAA;GACD,UAAA;aAEV,oBAAC;IAAa,MAAAf,cAAA;IAA6B,MAAA;KAC5C;IACA;AAAAX,IAAA,MAAAW;AAAAX,IAAA,MAAA0B;AAAA1B,IAAA,MAAAQ;AAAAR,IAAA,MAAAwC;OAAAA,OAAAxC,EAAA;CAAA,IAAA0C;AAAA,KAAA1C,EAAA,QAAAsB,aAAAtB,EAAA,QAAA+B,iBAAA/B,EAAA,QAAAG,SAAAH,EAAA,QAAAO,WAAAP,EAAA,QAAAK,SAAAL,EAAA,QAAAgC,OAAAhC,EAAA,QAAAmC,OAAAnC,EAAA,QAAAoC,OAAApC,EAAA,QAAAqC,OAAArC,EAAA,QAAAuC,OAAAvC,EAAA,QAAAwC,KAAA;AAxBFE,QAAA,qBAAA;GACM,KAAAV;GACMV,WAAAA;GACJjB;GACEE;GACEwB,WAAAA;GACL,MAAAI;GACI,UAAAC;GACEjC,cAAAA;GACE,gBAAAkC;cAEdE,KAGCC;IAWI;AAAAxC,IAAA,MAAAsB;AAAAtB,IAAA,MAAA+B;AAAA/B,IAAA,MAAAG;AAAAH,IAAA,MAAAO;AAAAP,IAAA,MAAAK;AAAAL,IAAA,MAAAgC;AAAAhC,IAAA,MAAAmC;AAAAnC,IAAA,MAAAoC;AAAApC,IAAA,MAAAqC;AAAArC,IAAA,MAAAuC;AAAAvC,IAAA,MAAAwC;AAAAxC,IAAA,MAAA0C;OAAAA,OAAA1C,EAAA;AAAA,QAzBN0C;;AA6BF,sBAAe7C"}

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

@@ -87,15 +87,15 @@ const DsChipGroup = ({ items, label = "Filtered by:", onClearAll, onItemDelete,
 					className: require_ds_chip_group_module.default.dialog,
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 						className: require_ds_chip_group_module.default.dialogContent,
-						children: items.filter((item, index) => index >= visibleCount).map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						children: items.filter((item_0, index_0) => index_0 >= visibleCount).map((item_1) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 							className: require_ds_chip_group_module.default.itemCheckbox,
 							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_checkbox.default, {
-								id: `chip-${item.id}`,
-								checked: item.selected,
-								onCheckedChange: () => onItemSelect?.(item),
-								label: item.label
+								id: `chip-${item_1.id}`,
+								checked: item_1.selected,
+								onCheckedChange: () => onItemSelect?.(item_1),
+								label: item_1.label
 							})
-						}, item.id))
+						}, item_1.id))
 					})
 				}) })]
 			})

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

@@ -84,15 +84,15 @@ const DsChipGroup = ({ items, label = "Filtered by:", onClearAll, onItemDelete,
 					className: ds_chip_group_module_default.dialog,
 					children: /* @__PURE__ */ jsx("div", {
 						className: ds_chip_group_module_default.dialogContent,
-						children: items.filter((item, index) => index >= visibleCount).map((item) => /* @__PURE__ */ jsx("div", {
+						children: items.filter((item_0, index_0) => index_0 >= visibleCount).map((item_1) => /* @__PURE__ */ jsx("div", {
 							className: ds_chip_group_module_default.itemCheckbox,
 							children: /* @__PURE__ */ jsx(ds_checkbox_default, {
-								id: `chip-${item.id}`,
-								checked: item.selected,
-								onCheckedChange: () => onItemSelect?.(item),
-								label: item.label
+								id: `chip-${item_1.id}`,
+								checked: item_1.selected,
+								onCheckedChange: () => onItemSelect?.(item_1),
+								label: item_1.label
 							})
-						}, item.id))
+						}, item_1.id))
 					})
 				}) })]
 			})

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

@@ -1 +1 @@
-{"version":3,"file":"ds-chip-group.js","names":["DsChipGroup: React.FC<DsChipGroupProps>","dialogStyle: React.CSSProperties","styles","DsTypography","DsChip","DsButton","DsIcon","VisuallyHidden","DsCheckbox"],"sources":["../../../src/components/ds-chip-group/ds-chip-group.tsx"],"sourcesContent":["import type React from 'react';\nimport { useRef, useState } from 'react';\nimport * as RadixDialog from '@radix-ui/react-dialog';\nimport { Root as VisuallyHidden } from '@radix-ui/react-visually-hidden';\nimport classNames from 'classnames';\nimport styles from './ds-chip-group.module.scss';\nimport type { DsChipGroupProps } from './ds-chip-group.types';\nimport { useChipRowCalculation } from './hooks/use-chip-row-calculation';\nimport { DsTypography } from '../ds-typography';\nimport DsChip from '../ds-chip/ds-chip';\nimport { DsCheckbox } from '../ds-checkbox';\nimport { DsButton } from '../ds-button';\nimport { DsIcon } from '../ds-icon';\n\n/**\n * Design system chip group component displays a collection of chips with overflow handling\n * Used for displaying filters, selected items, tags, etc.\n */\nconst DsChipGroup: React.FC<DsChipGroupProps> = ({\n\titems,\n\tlabel = 'Filtered by:',\n\tonClearAll,\n\tonItemDelete,\n\tonItemSelect,\n\tclassName,\n\tstyle,\n}) => {\n\tconst [dialogOpen, setDialogOpen] = useState(false);\n\tconst showAllChipsRef = useRef<HTMLDivElement>(null);\n\tconst chipsWrapperRef = useRef<HTMLDivElement>(null);\n\tconst visibleCount = useChipRowCalculation({\n\t\tchipsWrapperRef,\n\t\ttotalFilters: items.length,\n\t});\n\n\tif (items.length === 0) {\n\t\treturn null;\n\t}\n\n\tconst hiddenCount = items.length - visibleCount;\n\tconst showExpandButton = hiddenCount > 0;\n\n\tconst handleOpenDialog = () => {\n\t\tsetDialogOpen(true);\n\t};\n\n\tlet dialogStyle: React.CSSProperties = {};\n\tif (showExpandButton && showAllChipsRef.current) {\n\t\tconst rect = showAllChipsRef.current.getBoundingClientRect();\n\t\tdialogStyle = {\n\t\t\tposition: 'fixed',\n\t\t\ttop: rect.bottom + 4,\n\t\t\tleft: rect.left,\n\t\t};\n\t}\n\n\treturn (\n\t\t<div className={classNames(styles.container, className)} style={style}>\n\t\t\t{label && (\n\t\t\t\t<DsTypography variant=\"body-sm-reg\" className={styles.label}>\n\t\t\t\t\t{label}\n\t\t\t\t</DsTypography>\n\t\t\t)}\n\n\t\t\t<div ref={chipsWrapperRef} className={styles.chipsWrapper}>\n\t\t\t\t{items.map((item, index) => (\n\t\t\t\t\t<DsChip\n\t\t\t\t\t\tkey={item.id}\n\t\t\t\t\t\tlabel={item.label}\n\t\t\t\t\t\tselected={item.selected}\n\t\t\t\t\t\tonClick={() => onItemSelect?.(item)}\n\t\t\t\t\t\tonDelete={() => onItemDelete?.(item)}\n\t\t\t\t\t\tclassName={classNames({\n\t\t\t\t\t\t\t[styles.hidden]: index >= visibleCount,\n\t\t\t\t\t\t})}\n\t\t\t\t\t/>\n\t\t\t\t))}\n\t\t\t\t{showExpandButton && (\n\t\t\t\t\t<DsChip\n\t\t\t\t\t\tref={showAllChipsRef}\n\t\t\t\t\t\tlabel={`+${String(hiddenCount)} ${hiddenCount === 1 ? 'item' : 'items'} show all`}\n\t\t\t\t\t\tonClick={handleOpenDialog}\n\t\t\t\t\t\tclassName={styles.expandChip}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</div>\n\n\t\t\t{onClearAll && (\n\t\t\t\t<DsButton design=\"v1.2\" buttonType=\"tertiary\" variant=\"ghost\" size=\"small\" onClick={onClearAll}>\n\t\t\t\t\t<DsIcon icon=\"close\" />\n\t\t\t\t\tClear all\n\t\t\t\t</DsButton>\n\t\t\t)}\n\n\t\t\t<RadixDialog.Root open={dialogOpen} onOpenChange={setDialogOpen}>\n\t\t\t\t<VisuallyHidden>\n\t\t\t\t\t<RadixDialog.Title />\n\t\t\t\t</VisuallyHidden>\n\t\t\t\t<RadixDialog.Portal>\n\t\t\t\t\t<RadixDialog.Content style={dialogStyle} className={styles.dialog}>\n\t\t\t\t\t\t<div className={styles.dialogContent}>\n\t\t\t\t\t\t\t{items\n\t\t\t\t\t\t\t\t.filter((item, index) => index >= visibleCount)\n\t\t\t\t\t\t\t\t.map((item) => (\n\t\t\t\t\t\t\t\t\t<div key={item.id} className={styles.itemCheckbox}>\n\t\t\t\t\t\t\t\t\t\t<DsCheckbox\n\t\t\t\t\t\t\t\t\t\t\tid={`chip-${item.id}`}\n\t\t\t\t\t\t\t\t\t\t\tchecked={item.selected}\n\t\t\t\t\t\t\t\t\t\t\tonCheckedChange={() => onItemSelect?.(item)}\n\t\t\t\t\t\t\t\t\t\t\tlabel={item.label}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</RadixDialog.Content>\n\t\t\t\t</RadixDialog.Portal>\n\t\t\t</RadixDialog.Root>\n\t\t</div>\n\t);\n};\n\nexport default DsChipGroup;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAkBA,MAAMA,eAA2C,EAChD,OACA,QAAQ,gBACR,YACA,cACA,cACA,WACA,YACK;CACL,MAAM,CAAC,YAAY,iBAAiB,SAAS,MAAM;CACnD,MAAM,kBAAkB,OAAuB,KAAK;CACpD,MAAM,kBAAkB,OAAuB,KAAK;CACpD,MAAM,eAAe,sBAAsB;EAC1C;EACA,cAAc,MAAM;EACpB,CAAC;AAEF,KAAI,MAAM,WAAW,EACpB,QAAO;CAGR,MAAM,cAAc,MAAM,SAAS;CACnC,MAAM,mBAAmB,cAAc;CAEvC,MAAM,yBAAyB;AAC9B,gBAAc,KAAK;;CAGpB,IAAIC,cAAmC,EAAE;AACzC,KAAI,oBAAoB,gBAAgB,SAAS;EAChD,MAAM,OAAO,gBAAgB,QAAQ,uBAAuB;AAC5D,gBAAc;GACb,UAAU;GACV,KAAK,KAAK,SAAS;GACnB,MAAM,KAAK;GACX;;AAGF,QACC,qBAAC;EAAI,WAAW,WAAWC,6BAAO,WAAW,UAAU;EAAS;;GAC9D,SACA,oBAACC;IAAa,SAAQ;IAAc,WAAWD,6BAAO;cACpD;KACa;GAGhB,qBAAC;IAAI,KAAK;IAAiB,WAAWA,6BAAO;eAC3C,MAAM,KAAK,MAAM,UACjB,oBAACE;KAEA,OAAO,KAAK;KACZ,UAAU,KAAK;KACf,eAAe,eAAe,KAAK;KACnC,gBAAgB,eAAe,KAAK;KACpC,WAAW,WAAW,GACpBF,6BAAO,SAAS,SAAS,cAC1B,CAAC;OAPG,KAAK,GAQT,CACD,EACD,oBACA,oBAACE;KACA,KAAK;KACL,OAAO,IAAI,OAAO,YAAY,CAAC,GAAG,gBAAgB,IAAI,SAAS,QAAQ;KACvE,SAAS;KACT,WAAWF,6BAAO;MACjB;KAEE;GAEL,cACA,qBAACG;IAAS,QAAO;IAAO,YAAW;IAAW,SAAQ;IAAQ,MAAK;IAAQ,SAAS;eACnF,oBAACC,mBAAO,MAAK,UAAU;KAEb;GAGZ,qBAAC,YAAY;IAAK,MAAM;IAAY,cAAc;eACjD,oBAACC,kBACA,oBAAC,YAAY,UAAQ,GACL,EACjB,oBAAC,YAAY,oBACZ,oBAAC,YAAY;KAAQ,OAAO;KAAa,WAAWL,6BAAO;eAC1D,oBAAC;MAAI,WAAWA,6BAAO;gBACrB,MACC,QAAQ,MAAM,UAAU,SAAS,aAAa,CAC9C,KAAK,SACL,oBAAC;OAAkB,WAAWA,6BAAO;iBACpC,oBAACM;QACA,IAAI,QAAQ,KAAK;QACjB,SAAS,KAAK;QACd,uBAAuB,eAAe,KAAK;QAC3C,OAAO,KAAK;SACX;SANO,KAAK,GAOT,CACL;OACE;MACe,GACF;KACH;;GACd;;AAIR,4BAAe"}
+{"version":3,"file":"ds-chip-group.js","names":["React","useRef","useState","RadixDialog","Root","VisuallyHidden","classNames","styles","DsChipGroupProps","useChipRowCalculation","DsTypography","DsChip","DsCheckbox","DsButton","DsIcon","DsChipGroup","FC","items","label","onClearAll","onItemDelete","onItemSelect","className","style","dialogOpen","setDialogOpen","showAllChipsRef","HTMLDivElement","chipsWrapperRef","visibleCount","totalFilters","length","hiddenCount","showExpandButton","handleOpenDialog","dialogStyle","CSSProperties","current","rect","getBoundingClientRect","position","top","bottom","left","container","chipsWrapper","map","item","index","id","selected","hidden","String","expandChip","dialog","dialogContent","filter","itemCheckbox"],"sources":["../../../src/components/ds-chip-group/ds-chip-group.tsx"],"sourcesContent":["import type React from 'react';\nimport { useRef, useState } from 'react';\nimport * as RadixDialog from '@radix-ui/react-dialog';\nimport { Root as VisuallyHidden } from '@radix-ui/react-visually-hidden';\nimport classNames from 'classnames';\nimport styles from './ds-chip-group.module.scss';\nimport type { DsChipGroupProps } from './ds-chip-group.types';\nimport { useChipRowCalculation } from './hooks/use-chip-row-calculation';\nimport { DsTypography } from '../ds-typography';\nimport DsChip from '../ds-chip/ds-chip';\nimport { DsCheckbox } from '../ds-checkbox';\nimport { DsButton } from '../ds-button';\nimport { DsIcon } from '../ds-icon';\n\n/**\n * Design system chip group component displays a collection of chips with overflow handling\n * Used for displaying filters, selected items, tags, etc.\n */\nconst DsChipGroup: React.FC<DsChipGroupProps> = ({\n\titems,\n\tlabel = 'Filtered by:',\n\tonClearAll,\n\tonItemDelete,\n\tonItemSelect,\n\tclassName,\n\tstyle,\n}) => {\n\tconst [dialogOpen, setDialogOpen] = useState(false);\n\tconst showAllChipsRef = useRef<HTMLDivElement>(null);\n\tconst chipsWrapperRef = useRef<HTMLDivElement>(null);\n\tconst visibleCount = useChipRowCalculation({\n\t\tchipsWrapperRef,\n\t\ttotalFilters: items.length,\n\t});\n\n\tif (items.length === 0) {\n\t\treturn null;\n\t}\n\n\tconst hiddenCount = items.length - visibleCount;\n\tconst showExpandButton = hiddenCount > 0;\n\n\tconst handleOpenDialog = () => {\n\t\tsetDialogOpen(true);\n\t};\n\n\tlet dialogStyle: React.CSSProperties = {};\n\tif (showExpandButton && showAllChipsRef.current) {\n\t\tconst rect = showAllChipsRef.current.getBoundingClientRect();\n\t\tdialogStyle = {\n\t\t\tposition: 'fixed',\n\t\t\ttop: rect.bottom + 4,\n\t\t\tleft: rect.left,\n\t\t};\n\t}\n\n\treturn (\n\t\t<div className={classNames(styles.container, className)} style={style}>\n\t\t\t{label && (\n\t\t\t\t<DsTypography variant=\"body-sm-reg\" className={styles.label}>\n\t\t\t\t\t{label}\n\t\t\t\t</DsTypography>\n\t\t\t)}\n\n\t\t\t<div ref={chipsWrapperRef} className={styles.chipsWrapper}>\n\t\t\t\t{items.map((item, index) => (\n\t\t\t\t\t<DsChip\n\t\t\t\t\t\tkey={item.id}\n\t\t\t\t\t\tlabel={item.label}\n\t\t\t\t\t\tselected={item.selected}\n\t\t\t\t\t\tonClick={() => onItemSelect?.(item)}\n\t\t\t\t\t\tonDelete={() => onItemDelete?.(item)}\n\t\t\t\t\t\tclassName={classNames({\n\t\t\t\t\t\t\t[styles.hidden]: index >= visibleCount,\n\t\t\t\t\t\t})}\n\t\t\t\t\t/>\n\t\t\t\t))}\n\t\t\t\t{showExpandButton && (\n\t\t\t\t\t<DsChip\n\t\t\t\t\t\tref={showAllChipsRef}\n\t\t\t\t\t\tlabel={`+${String(hiddenCount)} ${hiddenCount === 1 ? 'item' : 'items'} show all`}\n\t\t\t\t\t\tonClick={handleOpenDialog}\n\t\t\t\t\t\tclassName={styles.expandChip}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</div>\n\n\t\t\t{onClearAll && (\n\t\t\t\t<DsButton design=\"v1.2\" buttonType=\"tertiary\" variant=\"ghost\" size=\"small\" onClick={onClearAll}>\n\t\t\t\t\t<DsIcon icon=\"close\" />\n\t\t\t\t\tClear all\n\t\t\t\t</DsButton>\n\t\t\t)}\n\n\t\t\t<RadixDialog.Root open={dialogOpen} onOpenChange={setDialogOpen}>\n\t\t\t\t<VisuallyHidden>\n\t\t\t\t\t<RadixDialog.Title />\n\t\t\t\t</VisuallyHidden>\n\t\t\t\t<RadixDialog.Portal>\n\t\t\t\t\t<RadixDialog.Content style={dialogStyle} className={styles.dialog}>\n\t\t\t\t\t\t<div className={styles.dialogContent}>\n\t\t\t\t\t\t\t{items\n\t\t\t\t\t\t\t\t.filter((item, index) => index >= visibleCount)\n\t\t\t\t\t\t\t\t.map((item) => (\n\t\t\t\t\t\t\t\t\t<div key={item.id} className={styles.itemCheckbox}>\n\t\t\t\t\t\t\t\t\t\t<DsCheckbox\n\t\t\t\t\t\t\t\t\t\t\tid={`chip-${item.id}`}\n\t\t\t\t\t\t\t\t\t\t\tchecked={item.selected}\n\t\t\t\t\t\t\t\t\t\t\tonCheckedChange={() => onItemSelect?.(item)}\n\t\t\t\t\t\t\t\t\t\t\tlabel={item.label}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</RadixDialog.Content>\n\t\t\t\t</RadixDialog.Portal>\n\t\t\t</RadixDialog.Root>\n\t\t</div>\n\t);\n};\n\nexport default DsChipGroup;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAkBA,MAAMe,eAA2C,EAChDE,OACAC,QAAQ,gBACRC,YACAC,cACAC,cACAC,WACAC,YACK;CACL,MAAM,CAACC,YAAYC,iBAAiBvB,SAAS,MAAM;CACnD,MAAMwB,kBAAkBzB,OAAuB,KAAK;CACpD,MAAM2B,kBAAkB3B,OAAuB,KAAK;CACpD,MAAM4B,eAAepB,sBAAsB;EAC1CmB;EACAE,cAAcb,MAAMc;EACpB,CAAC;AAEF,KAAId,MAAMc,WAAW,EACpB,QAAO;CAGR,MAAMC,cAAcf,MAAMc,SAASF;CACnC,MAAMI,mBAAmBD,cAAc;CAEvC,MAAME,yBAAyB;AAC9BT,gBAAc,KAAK;;CAGpB,IAAIU,cAAmC,EAAE;AACzC,KAAIF,oBAAoBP,gBAAgBW,SAAS;EAChD,MAAMC,OAAOZ,gBAAgBW,QAAQE,uBAAuB;AAC5DJ,gBAAc;GACbK,UAAU;GACVC,KAAKH,KAAKI,SAAS;GACnBC,MAAML,KAAKK;GACX;;AAGF,QACC,qBAAC;EAAI,WAAWrC,WAAWC,6BAAOqC,WAAWtB,UAAU;EAASC;;GAC9DL,SACA,oBAAC;IAAa,SAAQ;IAAc,WAAWX,6BAAOW;cACpDA;KAEF;GAED,qBAAC;IAAI,KAAKU;IAAiB,WAAWrB,6BAAOsC;eAC3C5B,MAAM6B,KAAKC,MAAMC,UACjB,oBAAC;KAEA,OAAOD,KAAK7B;KACZ,UAAU6B,KAAKG;KACf,eAAe7B,eAAe0B,KAAK;KACnC,gBAAgB3B,eAAe2B,KAAK;KACpC,WAAWzC,WAAW,GACpBC,6BAAO4C,SAASH,SAASnB,cAC1B,CAAC;OAPGkB,KAAKE,GASX,CAAC,EACDhB,oBACA,oBAAC;KACA,KAAKP;KACL,OAAO,IAAI0B,OAAOpB,YAAY,CAAA,GAAIA,gBAAgB,IAAI,SAAS,QAAO;KACtE,SAASE;KACT,WAAW3B,6BAAO8C;MAEnB;KACG;GAEJlC,cACA,qBAAC;IAAS,QAAO;IAAO,YAAW;IAAW,SAAQ;IAAQ,MAAK;IAAQ,SAASA;eACnF,oBAAC,mBAAO,MAAK,UAAO;KAGrB;GAED,qBAAC,YAAY;IAAK,MAAMK;IAAY,cAAcC;eACjD,oBAAC,kBACA,oBAAC,YAAY,UAAK,GACH,EAChB,oBAAC,YAAY,oBACZ,oBAAC,YAAY;KAAQ,OAAOU;KAAa,WAAW5B,6BAAO+C;eAC1D,oBAAC;MAAI,WAAW/C,6BAAOgD;gBACrBtC,MACCuC,QAAQT,QAAMC,YAAUA,WAASnB,aAAa,CAC9CiB,KAAKC,WACL,oBAAC;OAAkB,WAAWxC,6BAAOkD;iBACpC,oBAAC;QACA,IAAI,QAAQV,OAAKE;QACjB,SAASF,OAAKG;QACd,uBAAuB7B,eAAe0B,OAAK;QAC3C,OAAOA,OAAK7B;SAAM;SALV6B,OAAKE,GAQf,CAAC;OACC;MACe,GACF;KACH;;GACb;;AAIR,4BAAelC"}

package/dist/components/ds-chip-group/hooks/use-chip-row-calculation.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-chip-row-calculation.js","names":[],"sources":["../../../../src/components/ds-chip-group/hooks/use-chip-row-calculation.ts"],"sourcesContent":["import { type RefObject, useLayoutEffect, useState } from 'react';\n\ninterface UseChipRowCalculationProps {\n\tchipsWrapperRef: RefObject<HTMLDivElement | null>;\n\ttotalFilters: number;\n}\n\n/**\n * Custom hook to calculate how many chips can fit in 2 rows\n * Uses a simple approach: render all, measure positions, hide overflow\n */\nexport const useChipRowCalculation = ({ chipsWrapperRef, totalFilters }: UseChipRowCalculationProps) => {\n\tconst [visibleCount, setVisibleCount] = useState(totalFilters);\n\n\tuseLayoutEffect(() => {\n\t\tconst calculateVisibleChips = () => {\n\t\t\tif (!chipsWrapperRef.current) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst wrapper = chipsWrapperRef.current;\n\t\t\tconst children = Array.from(wrapper.children) as HTMLElement[];\n\n\t\t\tif (children.length === 0) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst cs = getComputedStyle(wrapper);\n\t\t\tconst gap = parseFloat(cs.columnGap || cs.gap || '0') || 8;\n\t\t\tlet index;\n\t\t\tlet line = 0;\n\t\t\tlet total = 0;\n\n\t\t\tfor (index = 0; index < children.length; index++) {\n\t\t\t\tconst current = children[index];\n\t\t\t\tconst offset = current.offsetWidth === wrapper.clientWidth ? 0 : gap;\n\t\t\t\tconst next = offset + current.offsetWidth;\n\n\t\t\t\tif (total + next >= wrapper.clientWidth) {\n\t\t\t\t\tline++;\n\t\t\t\t\tif (line >= 2) {\n\t\t\t\t\t\tbreak;\n\t\t\t\t\t}\n\t\t\t\t\ttotal = next;\n\t\t\t\t} else {\n\t\t\t\t\ttotal += next;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tconst result = Math.max(1, line < 2 ? index : index - 1);\n\t\t\tsetVisibleCount(result);\n\t\t};\n\n\t\t// Use requestAnimationFrame to ensure DOM is fully laid out\n\t\tconst rafId = requestAnimationFrame(() => {\n\t\t\tcalculateVisibleChips();\n\t\t});\n\n\t\tconst resizeObserver = new ResizeObserver(() => {\n\t\t\trequestAnimationFrame(() => {\n\t\t\t\tcalculateVisibleChips();\n\t\t\t});\n\t\t});\n\n\t\tif (chipsWrapperRef.current) {\n\t\t\tresizeObserver.observe(chipsWrapperRef.current);\n\t\t}\n\n\t\treturn () => {\n\t\t\tcancelAnimationFrame(rafId);\n\t\t\tresizeObserver.disconnect();\n\t\t};\n\t}, [chipsWrapperRef, totalFilters]);\n\n\treturn visibleCount;\n};\n"],"mappings":";;;;;;;AAWA,MAAa,yBAAyB,EAAE,iBAAiB,mBAA+C;CACvG,MAAM,CAAC,cAAc,mBAAmB,SAAS,aAAa;AAE9D,uBAAsB;EACrB,MAAM,8BAA8B;AACnC,OAAI,CAAC,gBAAgB,QACpB;GAGD,MAAM,UAAU,gBAAgB;GAChC,MAAM,WAAW,MAAM,KAAK,QAAQ,SAAS;AAE7C,OAAI,SAAS,WAAW,EACvB;GAGD,MAAM,KAAK,iBAAiB,QAAQ;GACpC,MAAM,MAAM,WAAW,GAAG,aAAa,GAAG,OAAO,IAAI,IAAI;GACzD,IAAI;GACJ,IAAI,OAAO;GACX,IAAI,QAAQ;AAEZ,QAAK,QAAQ,GAAG,QAAQ,SAAS,QAAQ,SAAS;IACjD,MAAM,UAAU,SAAS;IAEzB,MAAM,QADS,QAAQ,gBAAgB,QAAQ,cAAc,IAAI,OAC3C,QAAQ;AAE9B,QAAI,QAAQ,QAAQ,QAAQ,aAAa;AACxC;AACA,SAAI,QAAQ,EACX;AAED,aAAQ;UAER,UAAS;;AAKX,mBADe,KAAK,IAAI,GAAG,OAAO,IAAI,QAAQ,QAAQ,EAAE,CACjC;;EAIxB,MAAM,QAAQ,4BAA4B;AACzC,0BAAuB;IACtB;EAEF,MAAM,iBAAiB,IAAI,qBAAqB;AAC/C,+BAA4B;AAC3B,2BAAuB;KACtB;IACD;AAEF,MAAI,gBAAgB,QACnB,gBAAe,QAAQ,gBAAgB,QAAQ;AAGhD,eAAa;AACZ,wBAAqB,MAAM;AAC3B,kBAAe,YAAY;;IAE1B,CAAC,iBAAiB,aAAa,CAAC;AAEnC,QAAO"}
+{"version":3,"file":"use-chip-row-calculation.js","names":["RefObject","useLayoutEffect","useState","UseChipRowCalculationProps","chipsWrapperRef","HTMLDivElement","totalFilters","useChipRowCalculation","visibleCount","setVisibleCount","calculateVisibleChips","current","wrapper","children","Array","from","HTMLElement","length","cs","getComputedStyle","gap","parseFloat","columnGap","index","line","total","offset","offsetWidth","clientWidth","next","result","Math","max","rafId","requestAnimationFrame","resizeObserver","ResizeObserver","observe","cancelAnimationFrame","disconnect"],"sources":["../../../../src/components/ds-chip-group/hooks/use-chip-row-calculation.ts"],"sourcesContent":["import { type RefObject, useLayoutEffect, useState } from 'react';\n\ninterface UseChipRowCalculationProps {\n\tchipsWrapperRef: RefObject<HTMLDivElement | null>;\n\ttotalFilters: number;\n}\n\n/**\n * Custom hook to calculate how many chips can fit in 2 rows\n * Uses a simple approach: render all, measure positions, hide overflow\n */\nexport const useChipRowCalculation = ({ chipsWrapperRef, totalFilters }: UseChipRowCalculationProps) => {\n\tconst [visibleCount, setVisibleCount] = useState(totalFilters);\n\n\tuseLayoutEffect(() => {\n\t\tconst calculateVisibleChips = () => {\n\t\t\tif (!chipsWrapperRef.current) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst wrapper = chipsWrapperRef.current;\n\t\t\tconst children = Array.from(wrapper.children) as HTMLElement[];\n\n\t\t\tif (children.length === 0) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst cs = getComputedStyle(wrapper);\n\t\t\tconst gap = parseFloat(cs.columnGap || cs.gap || '0') || 8;\n\t\t\tlet index;\n\t\t\tlet line = 0;\n\t\t\tlet total = 0;\n\n\t\t\tfor (index = 0; index < children.length; index++) {\n\t\t\t\tconst current = children[index];\n\t\t\t\tconst offset = current.offsetWidth === wrapper.clientWidth ? 0 : gap;\n\t\t\t\tconst next = offset + current.offsetWidth;\n\n\t\t\t\tif (total + next >= wrapper.clientWidth) {\n\t\t\t\t\tline++;\n\t\t\t\t\tif (line >= 2) {\n\t\t\t\t\t\tbreak;\n\t\t\t\t\t}\n\t\t\t\t\ttotal = next;\n\t\t\t\t} else {\n\t\t\t\t\ttotal += next;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tconst result = Math.max(1, line < 2 ? index : index - 1);\n\t\t\tsetVisibleCount(result);\n\t\t};\n\n\t\t// Use requestAnimationFrame to ensure DOM is fully laid out\n\t\tconst rafId = requestAnimationFrame(() => {\n\t\t\tcalculateVisibleChips();\n\t\t});\n\n\t\tconst resizeObserver = new ResizeObserver(() => {\n\t\t\trequestAnimationFrame(() => {\n\t\t\t\tcalculateVisibleChips();\n\t\t\t});\n\t\t});\n\n\t\tif (chipsWrapperRef.current) {\n\t\t\tresizeObserver.observe(chipsWrapperRef.current);\n\t\t}\n\n\t\treturn () => {\n\t\t\tcancelAnimationFrame(rafId);\n\t\t\tresizeObserver.disconnect();\n\t\t};\n\t}, [chipsWrapperRef, totalFilters]);\n\n\treturn visibleCount;\n};\n"],"mappings":";;;;;;;AAWA,MAAaO,yBAAyB,EAAEH,iBAAiBE,mBAA+C;CACvG,MAAM,CAACE,cAAcC,mBAAmBP,SAASI,aAAa;AAE9DL,uBAAsB;EACrB,MAAMS,8BAA8B;AACnC,OAAI,CAACN,gBAAgBO,QACpB;GAGD,MAAMC,UAAUR,gBAAgBO;GAChC,MAAME,WAAWC,MAAMC,KAAKH,QAAQC,SAAS;AAE7C,OAAIA,SAASI,WAAW,EACvB;GAGD,MAAMC,KAAKC,iBAAiBP,QAAQ;GACpC,MAAMQ,MAAMC,WAAWH,GAAGI,aAAaJ,GAAGE,OAAO,IAAI,IAAI;GACzD,IAAIG;GACJ,IAAIC,OAAO;GACX,IAAIC,QAAQ;AAEZ,QAAKF,QAAQ,GAAGA,QAAQV,SAASI,QAAQM,SAAS;IACjD,MAAMZ,UAAUE,SAASU;IAEzB,MAAMM,QADSlB,QAAQgB,gBAAgBf,QAAQgB,cAAc,IAAIR,OAC3CT,QAAQgB;AAE9B,QAAIF,QAAQI,QAAQjB,QAAQgB,aAAa;AACxCJ;AACA,SAAIA,QAAQ,EACX;AAEDC,aAAQI;UAERJ,UAASI;;AAKXpB,mBADesB,KAAKC,IAAI,GAAGR,OAAO,IAAID,QAAQA,QAAQ,EAAE,CACjC;;EAIxB,MAAMU,QAAQC,4BAA4B;AACzCxB,0BAAuB;IACtB;EAEF,MAAMyB,iBAAiB,IAAIC,qBAAqB;AAC/CF,+BAA4B;AAC3BxB,2BAAuB;KACtB;IACD;AAEF,MAAIN,gBAAgBO,QACnBwB,gBAAeE,QAAQjC,gBAAgBO,QAAQ;AAGhD,eAAa;AACZ2B,wBAAqBL,MAAM;AAC3BE,kBAAeI,YAAY;;IAE1B,CAACnC,iBAAiBE,aAAa,CAAC;AAEnC,QAAOE"}

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

@@ -3,6 +3,7 @@ const require_ds_icon = require('../ds-icon/ds-icon.cjs');
 require('../ds-icon/index.cjs');
 const require_ds_typography = require('../ds-typography/ds-typography.cjs');
 const require_ds_confirmation_module = require('./ds-confirmation.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");
@@ -13,63 +14,216 @@ let __ark_ui_react_dialog = require("@ark-ui/react/dialog");
 /**
 * Composable confirmation modal dialog.
 */
-const DsConfirmation = ({ open, onOpenChange, style, className, children }) => {
-	const handleOpenChange = (details) => {
-		onOpenChange(details.open);
-	};
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_dialog.Dialog.Root, {
-		open,
-		onOpenChange: handleOpenChange,
-		modal: true,
-		closeOnEscape: true,
-		closeOnInteractOutside: true,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__ark_ui_react_portal.Portal, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_dialog.Dialog.Backdrop, { className: require_ds_confirmation_module.default.overlay }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_dialog.Dialog.Positioner, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_dialog.Dialog.Content, {
-			className: (0, classnames.default)(require_ds_confirmation_module.default.modal, className),
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				style,
-				className: require_ds_confirmation_module.default.content,
-				children
-			})
-		}) })] })
-	});
+const DsConfirmation = (t0) => {
+	const $ = (0, react_compiler_runtime.c)(15);
+	const { open, onOpenChange, style, className, children } = t0;
+	let t1;
+	if ($[0] !== onOpenChange) {
+		t1 = (details) => {
+			onOpenChange(details.open);
+		};
+		$[0] = onOpenChange;
+		$[1] = t1;
+	} else t1 = $[1];
+	const handleOpenChange = t1;
+	let t2;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_dialog.Dialog.Backdrop, { className: require_ds_confirmation_module.default.overlay });
+		$[2] = t2;
+	} else t2 = $[2];
+	let t3;
+	if ($[3] !== className) {
+		t3 = (0, classnames.default)(require_ds_confirmation_module.default.modal, className);
+		$[3] = className;
+		$[4] = t3;
+	} else t3 = $[4];
+	let t4;
+	if ($[5] !== children || $[6] !== style) {
+		t4 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			style,
+			className: require_ds_confirmation_module.default.content,
+			children
+		});
+		$[5] = children;
+		$[6] = style;
+		$[7] = t4;
+	} else t4 = $[7];
+	let t5;
+	if ($[8] !== t3 || $[9] !== t4) {
+		t5 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__ark_ui_react_portal.Portal, { children: [t2, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_dialog.Dialog.Positioner, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_dialog.Dialog.Content, {
+			className: t3,
+			children: t4
+		}) })] });
+		$[8] = t3;
+		$[9] = t4;
+		$[10] = t5;
+	} else t5 = $[10];
+	let t6;
+	if ($[11] !== handleOpenChange || $[12] !== open || $[13] !== t5) {
+		t6 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_dialog.Dialog.Root, {
+			open,
+			onOpenChange: handleOpenChange,
+			modal: true,
+			closeOnEscape: true,
+			closeOnInteractOutside: true,
+			children: t5
+		});
+		$[11] = handleOpenChange;
+		$[12] = open;
+		$[13] = t5;
+		$[14] = t6;
+	} else t6 = $[14];
+	return t6;
+};
+const Header = (t0) => {
+	const $ = (0, react_compiler_runtime.c)(6);
+	const { style, className, children } = t0;
+	let t1;
+	if ($[0] !== className) {
+		t1 = (0, classnames.default)(require_ds_confirmation_module.default.header, className);
+		$[0] = className;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== children || $[3] !== style || $[4] !== t1) {
+		t2 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			style,
+			className: t1,
+			children
+		});
+		$[2] = children;
+		$[3] = style;
+		$[4] = t1;
+		$[5] = t2;
+	} else t2 = $[5];
+	return t2;
+};
+const Title = (t0) => {
+	const $ = (0, react_compiler_runtime.c)(8);
+	const { style, className, children } = t0;
+	let t1;
+	if ($[0] !== className) {
+		t1 = (0, classnames.default)(require_ds_confirmation_module.default.title, className);
+		$[0] = className;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== children) {
+		t2 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_typography.default, {
+			variant: "heading4",
+			children
+		});
+		$[2] = children;
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] !== style || $[5] !== t1 || $[6] !== t2) {
+		t3 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_dialog.Dialog.Title, {
+			className: t1,
+			style,
+			asChild: true,
+			children: t2
+		});
+		$[4] = style;
+		$[5] = t1;
+		$[6] = t2;
+		$[7] = t3;
+	} else t3 = $[7];
+	return t3;
+};
+const CloseTrigger = (t0) => {
+	const $ = (0, react_compiler_runtime.c)(4);
+	const { style, className } = t0;
+	let t1;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_icon.default, {
+			icon: "close",
+			size: "small"
+		});
+		$[0] = t1;
+	} else t1 = $[0];
+	let t2;
+	if ($[1] !== className || $[2] !== style) {
+		t2 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_dialog.Dialog.CloseTrigger, {
+			style,
+			className,
+			children: t1
+		});
+		$[1] = className;
+		$[2] = style;
+		$[3] = t2;
+	} else t2 = $[3];
+	return t2;
+};
+const Body = (t0) => {
+	const $ = (0, react_compiler_runtime.c)(6);
+	const { style, className, children } = t0;
+	let t1;
+	if ($[0] !== className) {
+		t1 = (0, classnames.default)(require_ds_confirmation_module.default.body, className);
+		$[0] = className;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== children || $[3] !== style || $[4] !== t1) {
+		t2 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			style,
+			className: t1,
+			children
+		});
+		$[2] = children;
+		$[3] = style;
+		$[4] = t1;
+		$[5] = t2;
+	} else t2 = $[5];
+	return t2;
+};
+const Footer = (t0) => {
+	const $ = (0, react_compiler_runtime.c)(6);
+	const { style, className, children } = t0;
+	let t1;
+	if ($[0] !== className) {
+		t1 = (0, classnames.default)(require_ds_confirmation_module.default.footer, className);
+		$[0] = className;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== children || $[3] !== style || $[4] !== t1) {
+		t2 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			style,
+			className: t1,
+			children
+		});
+		$[2] = children;
+		$[3] = style;
+		$[4] = t1;
+		$[5] = t2;
+	} else t2 = $[5];
+	return t2;
+};
+const Actions = (t0) => {
+	const $ = (0, react_compiler_runtime.c)(6);
+	const { style, className, children } = t0;
+	let t1;
+	if ($[0] !== className) {
+		t1 = (0, classnames.default)(require_ds_confirmation_module.default.actions, className);
+		$[0] = className;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== children || $[3] !== style || $[4] !== t1) {
+		t2 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			style,
+			className: t1,
+			children
+		});
+		$[2] = children;
+		$[3] = style;
+		$[4] = t1;
+		$[5] = t2;
+	} else t2 = $[5];
+	return t2;
 };
-const Header = ({ style, className, children }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-	style,
-	className: (0, classnames.default)(require_ds_confirmation_module.default.header, className),
-	children
-});
-const Title = ({ style, className, children }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_dialog.Dialog.Title, {
-	className: (0, classnames.default)(require_ds_confirmation_module.default.title, className),
-	style,
-	asChild: true,
-	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_typography.default, {
-		variant: "heading4",
-		children
-	})
-});
-const CloseTrigger = ({ style, className }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_dialog.Dialog.CloseTrigger, {
-	style,
-	className,
-	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_icon.default, {
-		icon: "close",
-		size: "small"
-	})
-});
-const Body = ({ style, className, children }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-	style,
-	className: (0, classnames.default)(require_ds_confirmation_module.default.body, className),
-	children
-});
-const Footer = ({ style, className, children }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-	style,
-	className: (0, classnames.default)(require_ds_confirmation_module.default.footer, className),
-	children
-});
-const Actions = ({ style, className, children }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-	style,
-	className: (0, classnames.default)(require_ds_confirmation_module.default.actions, className),
-	children
-});
 DsConfirmation.Header = Header;
 DsConfirmation.Title = Title;
 DsConfirmation.CloseTrigger = CloseTrigger;

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

@@ -1,5 +1,5 @@
 import { DsConfirmationProps } from "./ds-confirmation.types.cjs";
-import * as react_jsx_runtime31 from "react/jsx-runtime";
+import * as react_jsx_runtime3 from "react/jsx-runtime";
 import { CSSProperties, ReactNode } from "react";
 
 //#region src/components/ds-confirmation/ds-confirmation.d.ts
@@ -13,7 +13,7 @@ declare const DsConfirmation: {
     style,
     className,
     children
-  }: DsConfirmationProps): react_jsx_runtime31.JSX.Element;
+  }: DsConfirmationProps): react_jsx_runtime3.JSX.Element;
   Header: ({
     style,
     className,
@@ -22,7 +22,7 @@ declare const DsConfirmation: {
     style?: CSSProperties;
     className?: string;
     children: ReactNode;
-  }) => react_jsx_runtime31.JSX.Element;
+  }) => react_jsx_runtime3.JSX.Element;
   Title: ({
     style,
     className,
@@ -31,14 +31,14 @@ declare const DsConfirmation: {
     style?: CSSProperties;
     className?: string;
     children: ReactNode;
-  }) => react_jsx_runtime31.JSX.Element;
+  }) => react_jsx_runtime3.JSX.Element;
   CloseTrigger: ({
     style,
     className
   }: {
     style?: CSSProperties;
     className?: string;
-  }) => react_jsx_runtime31.JSX.Element;
+  }) => react_jsx_runtime3.JSX.Element;
   Body: ({
     style,
     className,
@@ -47,7 +47,7 @@ declare const DsConfirmation: {
     style?: CSSProperties;
     className?: string;
     children: ReactNode;
-  }) => react_jsx_runtime31.JSX.Element;
+  }) => react_jsx_runtime3.JSX.Element;
   Footer: ({
     style,
     className,
@@ -56,7 +56,7 @@ declare const DsConfirmation: {
     style?: CSSProperties;
     className?: string;
     children: ReactNode;
-  }) => react_jsx_runtime31.JSX.Element;
+  }) => react_jsx_runtime3.JSX.Element;
   Actions: ({
     style,
     className,
@@ -65,7 +65,7 @@ declare const DsConfirmation: {
     style?: CSSProperties;
     className?: string;
     children: ReactNode;
-  }) => react_jsx_runtime31.JSX.Element;
+  }) => react_jsx_runtime3.JSX.Element;
 };
 //#endregion
 export { DsConfirmation };

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

@@ -1 +1 @@
-{"version":3,"file":"ds-confirmation.d.cts","names":[],"sources":["../../../src/components/ds-confirmation/ds-confirmation.tsx"],"sourcesContent":[],"mappings":";;;;;;;;AAYa,cAAA,cAyBZ,EAAA;;;;;;;KAzBkF,sBAAmB,mBAAA,CAAA,GAAA,CAAA;;;;;EAAnB;YAgC1E;;cAEE;EAlCwE,CAAA,EAAA,GAmClF,mBAAA,CAAA,GAAA,CAAA,OAnCkF;EAAmB,KAAA,EAAA,CAAA;IAAA,KAAA;IAAA,SAAA;IAAA;EAgC7F,CAhC6F,EAAA;YA8C7F;;cAEE;EAhBF,CAAA,EAAA,GAiBR,mBAAA,CAAA,GAAA,CAAA,OAjBQ;EAEE,YAAA,EAAA,CAAA;IAAA,KAAA;IAAA;GAAA,EAAA;IACV,KAAA,CAAA,EAoBqD,aApBrD;;QAoBwF,mBAAA,CAAA,GAAA,CAAA;;;;;;IAThF,KAAA,CAAA,EAoBA,aApBA;IAEE,SAAA,CAAA,EAAA,MAAA;IACV,QAAA,EAmBU,SAnBV;QAoBA,mBAAA,CAAA,GAAA,CAAA;;;;;;IAdqD,KAAA,CAAA,EAyB7C,aAzB6C;IAAmC,SAAA,CAAA,EAAA,MAAA;cA2B9E;QACV,mBAAA,CAAA,GAAA,CAAA;;;;;;IAjBQ,KAAA,CAAA,EA4BA,aA5BA;IAEE,SAAA,CAAA,EAAA,MAAA;IACV,QAAA,EA2BU,SA3BV;QA4BA,mBAAA,CAAA,GAAA,CAAA"}
+{"version":3,"file":"ds-confirmation.d.cts","names":[],"sources":["../../../src/components/ds-confirmation/ds-confirmation.tsx"],"sourcesContent":[],"mappings":";;;;;;;;AAYa,cAAA,cAyBZ,EAAA;;;;;;;KAzBkF,sBAAmB,kBAAA,CAAA,GAAA,CAAA;;;;;EAAnB;YAgC1E;;cAEE;EAlCwE,CAAA,EAAA,GAmClF,kBAAA,CAAA,GAAA,CAAA,OAnCkF;EAAmB,KAAA,EAAA,CAAA;IAAA,KAAA;IAAA,SAAA;IAAA;EAgC7F,CAhC6F,EAAA;YA8C7F;;cAEE;EAhBF,CAAA,EAAA,GAiBR,kBAAA,CAAA,GAAA,CAAA,OAjBQ;EAEE,YAAA,EAAA,CAAA;IAAA,KAAA;IAAA;GAAA,EAAA;IACV,KAAA,CAAA,EAoBqD,aApBrD;;QAoBwF,kBAAA,CAAA,GAAA,CAAA;;;;;;IAThF,KAAA,CAAA,EAoBA,aApBA;IAEE,SAAA,CAAA,EAAA,MAAA;IACV,QAAA,EAmBU,SAnBV;QAoBA,kBAAA,CAAA,GAAA,CAAA;;;;;;IAdqD,KAAA,CAAA,EAyB7C,aAzB6C;IAAmC,SAAA,CAAA,EAAA,MAAA;cA2B9E;QACV,kBAAA,CAAA,GAAA,CAAA;;;;;;IAjBQ,KAAA,CAAA,EA4BA,aA5BA;IAEE,SAAA,CAAA,EAAA,MAAA;IACV,QAAA,EA2BU,SA3BV;QA4BA,kBAAA,CAAA,GAAA,CAAA"}