@drivenets/design-system 0.13.0 → 0.14.0

package/dist/index.cjs

@@ -52,8 +52,6 @@ let _ark_ui_react_popover = require("@ark-ui/react/popover");
 let _ark_ui_react_select = require("@ark-ui/react/select");
 let _radix_ui_react_collapsible = require("@radix-ui/react-collapsible");
 _radix_ui_react_collapsible = __toESM(_radix_ui_react_collapsible);
-let _radix_ui_react_popover = require("@radix-ui/react-popover");
-_radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 let _ark_ui_react_radio_group = require("@ark-ui/react/radio-group");
 let _ark_ui_react_segment_group = require("@ark-ui/react/segment-group");
 let _zag_js_steps = require("@zag-js/steps");
@@ -7184,18 +7182,86 @@ var ds_tag_module_default = {
 	"exclude": "UdH7Tq_exclude",
 	"icon": "UdH7Tq_icon",
 	"include": "UdH7Tq_include",
+	"key": "UdH7Tq_key",
+	"keyValue": "UdH7Tq_keyValue",
 	"label": "UdH7Tq_label",
 	"selected": "UdH7Tq_selected",
 	"tag": "UdH7Tq_tag",
+	"value": "UdH7Tq_value",
 	"variantIcon": "UdH7Tq_variantIcon"
 };
 //#endregion
+//#region src/components/ds-stack/ds-stack.module.scss
+var ds_stack_module_default = { "root": "efmmNG_root" };
+//#endregion
+//#region src/components/ds-stack/ds-stack.tsx
+const DsStack$1 = (t0) => {
+	const $ = (0, react_compiler_runtime.c)(16);
+	const { direction, gap, alignItems, justifyContent, flex, flexWrap, width, children, className, style, ref } = t0;
+	let t1;
+	if ($[0] !== alignItems || $[1] !== direction || $[2] !== flex || $[3] !== flexWrap || $[4] !== gap || $[5] !== justifyContent || $[6] !== style || $[7] !== width) {
+		t1 = {
+			flexDirection: direction,
+			gap,
+			alignItems,
+			justifyContent,
+			flex,
+			flexWrap,
+			width,
+			...style
+		};
+		$[0] = alignItems;
+		$[1] = direction;
+		$[2] = flex;
+		$[3] = flexWrap;
+		$[4] = gap;
+		$[5] = justifyContent;
+		$[6] = style;
+		$[7] = width;
+		$[8] = t1;
+	} else t1 = $[8];
+	const layoutStyle = t1;
+	let t2;
+	if ($[9] !== className) {
+		t2 = (0, classnames.default)(ds_stack_module_default.root, className);
+		$[9] = className;
+		$[10] = t2;
+	} else t2 = $[10];
+	let t3;
+	if ($[11] !== children || $[12] !== layoutStyle || $[13] !== ref || $[14] !== t2) {
+		t3 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			ref,
+			className: t2,
+			style: layoutStyle,
+			children
+		});
+		$[11] = children;
+		$[12] = layoutStyle;
+		$[13] = ref;
+		$[14] = t2;
+		$[15] = t3;
+	} else t3 = $[15];
+	return t3;
+};
+//#endregion
+//#region src/components/ds-stack/index.ts
+const DsStack = withResponsiveProps(DsStack$1, [
+	"direction",
+	"gap",
+	"alignItems",
+	"justifyContent",
+	"flex",
+	"flexWrap",
+	"width"
+]);
+DsStack.displayName = "DsStack";
+//#endregion
 //#region src/components/ds-tag/ds-tag.tsx
 /**
 * Design system Tag component
 */
 const DsTag = (t0) => {
-	const $ = (0, react_compiler_runtime.c)(61);
+	const $ = (0, react_compiler_runtime.c)(64);
 	let className;
 	let label;
 	let onClick;
@@ -7209,8 +7275,9 @@ const DsTag = (t0) => {
 	let t4;
 	let t5;
 	let t6;
+	let value;
 	if ($[0] !== t0) {
-		({ref, label, className, style: t1, size: t2, selected: t3, variant: t4, disabled: t5, locale: t6, onClick, onDelete, slots, ...rest} = t0);
+		({ref, label, value, className, style: t1, size: t2, selected: t3, variant: t4, disabled: t5, locale: t6, onClick, onDelete, slots, ...rest} = t0);
 		$[0] = t0;
 		$[1] = className;
 		$[2] = label;
@@ -7225,6 +7292,7 @@ const DsTag = (t0) => {
 		$[11] = t4;
 		$[12] = t5;
 		$[13] = t6;
+		$[14] = value;
 	} else {
 		className = $[1];
 		label = $[2];
@@ -7239,31 +7307,32 @@ const DsTag = (t0) => {
 		t4 = $[11];
 		t5 = $[12];
 		t6 = $[13];
+		value = $[14];
 	}
 	let t7;
-	if ($[14] !== t1) {
+	if ($[15] !== t1) {
 		t7 = t1 === void 0 ? {} : t1;
-		$[14] = t1;
-		$[15] = t7;
-	} else t7 = $[15];
+		$[15] = t1;
+		$[16] = t7;
+	} else t7 = $[16];
 	const style = t7;
 	const size = t2 === void 0 ? "medium" : t2;
 	const selected = t3 === void 0 ? false : t3;
 	const variant = t4 === void 0 ? "default" : t4;
 	const disabled = t5 === void 0 ? false : t5;
 	let t8;
-	if ($[16] !== t6) {
+	if ($[17] !== t6) {
 		t8 = t6 === void 0 ? {} : t6;
-		$[16] = t6;
-		$[17] = t8;
-	} else t8 = $[17];
+		$[17] = t6;
+		$[18] = t8;
+	} else t8 = $[18];
 	const locale = t8;
 	const t9 = onClick !== void 0 && !disabled;
 	const t10 = selected && !disabled;
 	const t11 = variant === "include";
 	const t12 = variant === "exclude";
 	let t13;
-	if ($[18] !== className || $[19] !== disabled || $[20] !== t10 || $[21] !== t11 || $[22] !== t12 || $[23] !== t9) {
+	if ($[19] !== className || $[20] !== disabled || $[21] !== t10 || $[22] !== t11 || $[23] !== t12 || $[24] !== t9) {
 		t13 = (0, classnames.default)(ds_tag_module_default.tag, {
 			[ds_tag_module_default.clickable]: t9,
 			[ds_tag_module_default.selected]: t10,
@@ -7271,27 +7340,27 @@ const DsTag = (t0) => {
 			[ds_tag_module_default.exclude]: t12,
 			[ds_tag_module_default.disabled]: disabled
 		}, className);
-		$[18] = className;
-		$[19] = disabled;
-		$[20] = t10;
-		$[21] = t11;
-		$[22] = t12;
-		$[23] = t9;
-		$[24] = t13;
-	} else t13 = $[24];
+		$[19] = className;
+		$[20] = disabled;
+		$[21] = t10;
+		$[22] = t11;
+		$[23] = t12;
+		$[24] = t9;
+		$[25] = t13;
+	} else t13 = $[25];
 	const tagClass = t13;
 	let t14;
-	if ($[25] !== onDelete) {
+	if ($[26] !== onDelete) {
 		t14 = (event) => {
 			event.stopPropagation();
 			onDelete?.(event);
 		};
-		$[25] = onDelete;
-		$[26] = t14;
-	} else t14 = $[26];
+		$[26] = onDelete;
+		$[27] = t14;
+	} else t14 = $[27];
 	const handleDeleteClick = t14;
 	let t15;
-	if ($[27] !== onClick || $[28] !== onDelete) {
+	if ($[28] !== onClick || $[29] !== onDelete) {
 		t15 = (event_0) => {
 			if (onClick && (event_0.key === "Enter" || event_0.key === " ")) {
 				event_0.preventDefault();
@@ -7303,13 +7372,13 @@ const DsTag = (t0) => {
 				onDelete(event_0);
 			}
 		};
-		$[27] = onClick;
-		$[28] = onDelete;
-		$[29] = t15;
-	} else t15 = $[29];
+		$[28] = onClick;
+		$[29] = onDelete;
+		$[30] = t15;
+	} else t15 = $[30];
 	const handleKeyDownTag = t15;
 	let t16;
-	if ($[30] !== onDelete) {
+	if ($[31] !== onDelete) {
 		t16 = (event_1) => {
 			event_1.stopPropagation();
 			if (onDelete && (event_1.key === "Enter" || event_1.key === " ")) {
@@ -7317,21 +7386,21 @@ const DsTag = (t0) => {
 				onDelete(event_1);
 			}
 		};
-		$[30] = onDelete;
-		$[31] = t16;
-	} else t16 = $[31];
+		$[31] = onDelete;
+		$[32] = t16;
+	} else t16 = $[32];
 	const handleKeyDownDelete = t16;
 	let t17;
-	if ($[32] !== onClick) {
+	if ($[33] !== onClick) {
 		t17 = (event_2) => {
 			if (onClick) {
 				event_2.preventDefault();
 				onClick(event_2);
 			}
 		};
-		$[32] = onClick;
-		$[33] = t17;
-	} else t17 = $[33];
+		$[33] = onClick;
+		$[34] = t17;
+	} else t17 = $[34];
 	const handleClick = t17;
 	let iconVariant = null;
 	if (variant === "include") iconVariant = "check_circle";
@@ -7344,7 +7413,7 @@ const DsTag = (t0) => {
 	const t23 = typeof label === "string" ? label : void 0;
 	const t24 = onClick && selected && !disabled ? "true" : void 0;
 	let t25;
-	if ($[34] !== iconVariant || $[35] !== slots?.icon) {
+	if ($[35] !== iconVariant || $[36] !== slots?.icon) {
 		t25 = (slots?.icon || iconVariant) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 			className: (0, classnames.default)(ds_tag_module_default.icon),
 			children: slots?.icon ?? (iconVariant && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsIcon, {
@@ -7353,25 +7422,40 @@ const DsTag = (t0) => {
 				className: (0, classnames.default)(ds_tag_module_default.variantIcon)
 			}))
 		});
-		$[34] = iconVariant;
-		$[35] = slots?.icon;
-		$[36] = t25;
-	} else t25 = $[36];
-	const t26 = size === "small" ? "body-xs-reg" : "body-sm-reg";
-	let t27;
-	if ($[37] !== label || $[38] !== t26) {
-		t27 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTypography, {
-			variant: t26,
+		$[35] = iconVariant;
+		$[36] = slots?.icon;
+		$[37] = t25;
+	} else t25 = $[37];
+	let t26;
+	if ($[38] !== label || $[39] !== size || $[40] !== value || $[41] !== variant) {
+		t26 = variant === "key-value" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DsStack, {
+			direction: "row",
+			alignItems: "center",
+			gap: "var(--3xs)",
+			className: ds_tag_module_default.keyValue,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTypography, {
+				variant: size === "small" ? "body-xs-md" : "body-sm-md",
+				className: ds_tag_module_default.key,
+				children: label
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTypography, {
+				variant: size === "small" ? "body-xs-reg" : "body-sm-reg",
+				className: ds_tag_module_default.value,
+				children: value
+			})]
+		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTypography, {
+			variant: size === "small" ? "body-xs-reg" : "body-sm-reg",
 			className: ds_tag_module_default.label,
 			children: label
 		});
-		$[37] = label;
-		$[38] = t26;
-		$[39] = t27;
-	} else t27 = $[39];
-	let t28;
-	if ($[40] !== disabled || $[41] !== handleDeleteClick || $[42] !== handleKeyDownDelete || $[43] !== locale || $[44] !== onDelete) {
-		t28 = onDelete && !disabled && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		$[38] = label;
+		$[39] = size;
+		$[40] = value;
+		$[41] = variant;
+		$[42] = t26;
+	} else t26 = $[42];
+	let t27;
+	if ($[43] !== disabled || $[44] !== handleDeleteClick || $[45] !== handleKeyDownDelete || $[46] !== locale || $[47] !== onDelete) {
+		t27 = onDelete && !disabled && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 			type: "button",
 			className: ds_tag_module_default.deleteButton,
 			onClick: handleDeleteClick,
@@ -7383,16 +7467,16 @@ const DsTag = (t0) => {
 				size: "tiny"
 			})
 		});
-		$[40] = disabled;
-		$[41] = handleDeleteClick;
-		$[42] = handleKeyDownDelete;
-		$[43] = locale;
-		$[44] = onDelete;
-		$[45] = t28;
-	} else t28 = $[45];
-	let t29;
-	if ($[46] !== disabled || $[47] !== rest || $[48] !== style || $[49] !== t18 || $[50] !== t19 || $[51] !== t20 || $[52] !== t21 || $[53] !== t22 || $[54] !== t23 || $[55] !== t24 || $[56] !== t25 || $[57] !== t27 || $[58] !== t28 || $[59] !== tagClass) {
-		t29 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		$[43] = disabled;
+		$[44] = handleDeleteClick;
+		$[45] = handleKeyDownDelete;
+		$[46] = locale;
+		$[47] = onDelete;
+		$[48] = t27;
+	} else t27 = $[48];
+	let t28;
+	if ($[49] !== disabled || $[50] !== rest || $[51] !== style || $[52] !== t18 || $[53] !== t19 || $[54] !== t20 || $[55] !== t21 || $[56] !== t22 || $[57] !== t23 || $[58] !== t24 || $[59] !== t25 || $[60] !== t26 || $[61] !== t27 || $[62] !== tagClass) {
+		t28 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			ref: t18,
 			className: tagClass,
 			style,
@@ -7406,27 +7490,27 @@ const DsTag = (t0) => {
 			...rest,
 			children: [
 				t25,
-				t27,
-				t28
+				t26,
+				t27
 			]
 		});
-		$[46] = disabled;
-		$[47] = rest;
-		$[48] = style;
-		$[49] = t18;
-		$[50] = t19;
-		$[51] = t20;
-		$[52] = t21;
-		$[53] = t22;
-		$[54] = t23;
-		$[55] = t24;
-		$[56] = t25;
-		$[57] = t27;
-		$[58] = t28;
-		$[59] = tagClass;
-		$[60] = t29;
-	} else t29 = $[60];
-	return t29;
+		$[49] = disabled;
+		$[50] = rest;
+		$[51] = style;
+		$[52] = t18;
+		$[53] = t19;
+		$[54] = t20;
+		$[55] = t21;
+		$[56] = t22;
+		$[57] = t23;
+		$[58] = t24;
+		$[59] = t25;
+		$[60] = t26;
+		$[61] = t27;
+		$[62] = tagClass;
+		$[63] = t28;
+	} else t28 = $[63];
+	return t28;
 };
 //#endregion
 //#region src/components/ds-tag/ds-tag.types.ts
@@ -7434,7 +7518,8 @@ const tagSizes = ["medium", "small"];
 const tagVariants = [
 	"default",
 	"include",
-	"exclude"
+	"exclude",
+	"key-value"
 ];
 //#endregion
 //#region src/utils/merge-refs.ts
@@ -8833,87 +8918,86 @@ const DsTagFilter = (t0) => {
 	if (items.length === 0) return null;
 	let t9;
 	if ($[9] !== onItemDelete || $[10] !== onItemSelect) {
-		t9 = (item) => {
-			return /* @__PURE__ */ (0, react.createElement)(DsTag, {
-				...item.slotProps?.tag || {},
-				key: item.id,
-				label: item.label,
-				selected: item.selected,
-				onClick: onItemSelect ? () => onItemSelect(item) : void 0,
-				onDelete: onItemDelete ? () => onItemDelete(item) : void 0
-			});
-		};
+		t9 = (item) => ({
+			...item.slotProps?.tag,
+			label: item.label,
+			selected: item.selected,
+			onClick: onItemSelect ? () => onItemSelect(item) : void 0,
+			onDelete: onItemDelete ? () => onItemDelete(item) : void 0
+		});
 		$[9] = onItemDelete;
 		$[10] = onItemSelect;
 		$[11] = t9;
 	} else t9 = $[11];
-	const renderTag = t9;
+	const buildTagProps = t9;
 	let t10;
-	if ($[12] !== expanded || $[13] !== onExpand) {
-		t10 = () => {
+	if ($[12] !== buildTagProps) {
+		t10 = (item_0) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTag, { ...buildTagProps(item_0) }, item_0.id);
+		$[12] = buildTagProps;
+		$[13] = t10;
+	} else t10 = $[13];
+	const renderTag = t10;
+	let t11;
+	if ($[14] !== expanded || $[15] !== onExpand) {
+		t11 = () => {
 			const newExpanded = !expanded;
 			setExpanded(newExpanded);
 			onExpand?.(newExpanded);
 		};
-		$[12] = expanded;
-		$[13] = onExpand;
-		$[14] = t10;
-	} else t10 = $[14];
-	const handleExpandToggle = t10;
-	let t11;
-	if ($[15] !== items || $[16] !== onItemDelete || $[17] !== onItemSelect) {
-		let t12;
-		if ($[19] !== onItemDelete || $[20] !== onItemSelect) {
-			t12 = (item_0) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTag, {
-				"data-measure-tag": "",
-				label: item_0.label,
-				selected: item_0.selected,
-				onClick: onItemSelect ? () => onItemSelect(item_0) : void 0,
-				onDelete: onItemDelete ? () => onItemDelete(item_0) : void 0
-			}, item_0.id);
-			$[19] = onItemDelete;
-			$[20] = onItemSelect;
-			$[21] = t12;
-		} else t12 = $[21];
-		t11 = items.map(t12);
-		$[15] = items;
-		$[16] = onItemDelete;
-		$[17] = onItemSelect;
-		$[18] = t11;
-	} else t11 = $[18];
+		$[14] = expanded;
+		$[15] = onExpand;
+		$[16] = t11;
+	} else t11 = $[16];
+	const handleExpandToggle = t11;
 	let t12;
-	if ($[22] !== t11) {
-		t12 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	if ($[17] !== buildTagProps || $[18] !== items) {
+		let t13;
+		if ($[20] !== buildTagProps) {
+			t13 = (item_1) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTag, {
+				"data-measure-tag": "",
+				...buildTagProps(item_1)
+			}, item_1.id);
+			$[20] = buildTagProps;
+			$[21] = t13;
+		} else t13 = $[21];
+		t12 = items.map(t13);
+		$[17] = buildTagProps;
+		$[18] = items;
+		$[19] = t12;
+	} else t12 = $[19];
+	let t13;
+	if ($[22] !== t12) {
+		t13 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			ref: measurementRef,
 			className: ds_tag_filter_module_default.measurementContainer,
 			"aria-hidden": "true",
-			children: t11
+			children: t12
 		});
-		$[22] = t11;
-		$[23] = t12;
-	} else t12 = $[23];
-	const measurementContainer = t12;
-	const t13 = expanded && ds_tag_filter_module_default.expanded;
-	let t14;
-	if ($[24] !== className || $[25] !== t13) {
-		t14 = (0, classnames.default)(ds_tag_filter_module_default.container, t13, className);
-		$[24] = className;
-		$[25] = t13;
-		$[26] = t14;
-	} else t14 = $[26];
+		$[22] = t12;
+		$[23] = t13;
+	} else t13 = $[23];
+	const measurementContainer = t13;
+	const t14 = expanded && ds_tag_filter_module_default.expanded;
 	let t15;
+	if ($[24] !== className || $[25] !== t14) {
+		t15 = (0, classnames.default)(ds_tag_filter_module_default.container, t14, className);
+		$[24] = className;
+		$[25] = t14;
+		$[26] = t15;
+	} else t15 = $[26];
+	let t16;
 	if ($[27] !== label) {
-		t15 = label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTypography, {
+		t16 = label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTypography, {
 			variant: "body-sm-reg",
 			className: ds_tag_filter_module_default.label,
 			children: label
 		});
 		$[27] = label;
-		$[28] = t15;
-	} else t15 = $[28];
-	let t16;
+		$[28] = t16;
+	} else t16 = $[28];
+	let t17;
 	if ($[29] !== expanded || $[30] !== handleExpandToggle || $[31] !== hasOverflow || $[32] !== hiddenCount || $[33] !== showLess || $[34] !== showMore) {
-		t16 = hasOverflow && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DsButton, {
+		t17 = hasOverflow && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DsButton, {
 			design: "v1.2",
 			buttonType: "tertiary",
 			variant: "ghost",
@@ -8929,11 +9013,11 @@ const DsTagFilter = (t0) => {
 		$[32] = hiddenCount;
 		$[33] = showLess;
 		$[34] = showMore;
-		$[35] = t16;
-	} else t16 = $[35];
-	let t17;
+		$[35] = t17;
+	} else t17 = $[35];
+	let t18;
 	if ($[36] !== clearButton || $[37] !== onClearAll) {
-		t17 = onClearAll && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DsButton, {
+		t18 = onClearAll && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DsButton, {
 			design: "v1.2",
 			buttonType: "tertiary",
 			variant: "ghost",
@@ -8945,78 +9029,78 @@ const DsTagFilter = (t0) => {
 		});
 		$[36] = clearButton;
 		$[37] = onClearAll;
-		$[38] = t17;
-	} else t17 = $[38];
-	let t18;
-	if ($[39] !== t16 || $[40] !== t17) {
-		t18 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: ds_tag_filter_module_default.headerActions,
-			children: [t16, t17]
-		});
-		$[39] = t16;
-		$[40] = t17;
-		$[41] = t18;
-	} else t18 = $[41];
+		$[38] = t18;
+	} else t18 = $[38];
 	let t19;
-	if ($[42] !== t15 || $[43] !== t18) {
+	if ($[39] !== t17 || $[40] !== t18) {
 		t19 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: ds_tag_filter_module_default.header,
-			children: [t15, t18]
+			className: ds_tag_filter_module_default.headerActions,
+			children: [t17, t18]
 		});
-		$[42] = t15;
-		$[43] = t18;
-		$[44] = t19;
-	} else t19 = $[44];
+		$[39] = t17;
+		$[40] = t18;
+		$[41] = t19;
+	} else t19 = $[41];
 	let t20;
+	if ($[42] !== t16 || $[43] !== t19) {
+		t20 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: ds_tag_filter_module_default.header,
+			children: [t16, t19]
+		});
+		$[42] = t16;
+		$[43] = t19;
+		$[44] = t20;
+	} else t20 = $[44];
+	let t21;
 	if ($[45] !== renderTag || $[46] !== visibleTags) {
-		let t21;
+		let t22;
 		if ($[48] !== renderTag) {
-			t21 = (item_1) => renderTag(item_1);
+			t22 = (item_2) => renderTag(item_2);
 			$[48] = renderTag;
-			$[49] = t21;
-		} else t21 = $[49];
-		t20 = visibleTags.map(t21);
+			$[49] = t22;
+		} else t22 = $[49];
+		t21 = visibleTags.map(t22);
 		$[45] = renderTag;
 		$[46] = visibleTags;
-		$[47] = t20;
-	} else t20 = $[47];
-	let t21;
-	if ($[50] !== t20) {
-		t21 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		$[47] = t21;
+	} else t21 = $[47];
+	let t22;
+	if ($[50] !== t21) {
+		t22 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: ds_tag_filter_module_default.tagsArea,
-			children: t20
+			children: t21
 		});
-		$[50] = t20;
-		$[51] = t21;
-	} else t21 = $[51];
-	let t22;
-	if ($[52] !== style || $[53] !== t14 || $[54] !== t19 || $[55] !== t21) {
-		t22 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		$[50] = t21;
+		$[51] = t22;
+	} else t22 = $[51];
+	let t23;
+	if ($[52] !== style || $[53] !== t15 || $[54] !== t20 || $[55] !== t22) {
+		t23 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			ref: containerRef,
-			className: t14,
+			className: t15,
 			style,
-			children: [t19, t21]
+			children: [t20, t22]
 		});
 		$[52] = style;
-		$[53] = t14;
-		$[54] = t19;
-		$[55] = t21;
-		$[56] = t22;
-	} else t22 = $[56];
-	let t23;
+		$[53] = t15;
+		$[54] = t20;
+		$[55] = t22;
+		$[56] = t23;
+	} else t23 = $[56];
+	let t24;
 	if ($[57] !== measurementContainer) {
-		t23 = (0, react_dom.createPortal)(measurementContainer, document.body);
+		t24 = (0, react_dom.createPortal)(measurementContainer, document.body);
 		$[57] = measurementContainer;
-		$[58] = t23;
-	} else t23 = $[58];
-	let t24;
-	if ($[59] !== t22 || $[60] !== t23) {
-		t24 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [t22, t23] });
-		$[59] = t22;
-		$[60] = t23;
-		$[61] = t24;
-	} else t24 = $[61];
-	return t24;
+		$[58] = t24;
+	} else t24 = $[58];
+	let t25;
+	if ($[59] !== t23 || $[60] !== t24) {
+		t25 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [t23, t24] });
+		$[59] = t23;
+		$[60] = t24;
+		$[61] = t25;
+	} else t25 = $[61];
+	return t25;
 };
 //#endregion
 //#region src/components/ds-comments-drawer/comments-filters.ts
@@ -15487,62 +15571,335 @@ const DsPanel = withResponsiveProps(DsPanelBase, ["width"]);
 //#endregion
 //#region src/components/ds-popover/ds-popover.module.scss
 var ds_popover_module_default = {
-	"arrow": "Xt6oSq_arrow",
-	"content": "Xt6oSq_content"
+	"content": "Xt6oSq_content",
+	"ds-popover-in": "Xt6oSq_ds-popover-in",
+	"footer": "Xt6oSq_footer",
+	"header": "Xt6oSq_header",
+	"headerIcon": "Xt6oSq_headerIcon",
+	"panel": "Xt6oSq_panel",
+	"title": "Xt6oSq_title"
 };
 //#endregion
 //#region src/components/ds-popover/ds-popover.tsx
-const DsPopover = (t0) => {
-	const $ = (0, react_compiler_runtime.c)(13);
-	const { trigger, children, className, align: t1, side: t2 } = t0;
-	const align = t1 === void 0 ? "center" : t1;
-	const side = t2 === void 0 ? "top" : t2;
-	let t3;
-	if ($[0] !== trigger) {
-		t3 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_popover.Trigger, {
-			asChild: true,
-			children: trigger
-		});
-		$[0] = trigger;
-		$[1] = t3;
-	} else t3 = $[1];
-	let t4;
-	if ($[2] !== className) {
-		t4 = (0, classnames.default)(ds_popover_module_default.content, className);
-		$[2] = className;
-		$[3] = t4;
-	} else t4 = $[3];
+const DEFAULT_PANEL_WIDTH = 400;
+const toPlacement = (side, align) => align === "center" ? side : `${side}-${align}`;
+const DsPopoverRoot = (t0) => {
+	const $ = (0, react_compiler_runtime.c)(15);
+	const { open, defaultOpen, side: t1, align: t2, gutter: t3, modal: t4, children, onOpenChange } = t0;
+	const side = t1 === void 0 ? "bottom" : t1;
+	const align = t2 === void 0 ? "center" : t2;
+	const gutter = t3 === void 0 ? 8 : t3;
+	const modal = t4 === void 0 ? false : t4;
 	let t5;
-	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
-		t5 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_popover.Arrow, { className: ds_popover_module_default.arrow });
-		$[4] = t5;
-	} else t5 = $[4];
+	if ($[0] !== align || $[1] !== side) {
+		t5 = toPlacement(side, align);
+		$[0] = align;
+		$[1] = side;
+		$[2] = t5;
+	} else t5 = $[2];
 	let t6;
-	if ($[5] !== align || $[6] !== children || $[7] !== side || $[8] !== t4) {
-		t6 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_popover.Portal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_radix_ui_react_popover.Content, {
-			side,
-			align,
-			sideOffset: 8,
-			collisionPadding: 16,
-			className: t4,
-			children: [children, t5]
-		}) });
-		$[5] = align;
-		$[6] = children;
-		$[7] = side;
-		$[8] = t4;
-		$[9] = t6;
-	} else t6 = $[9];
+	if ($[3] !== gutter || $[4] !== t5) {
+		t6 = {
+			placement: t5,
+			gutter
+		};
+		$[3] = gutter;
+		$[4] = t5;
+		$[5] = t6;
+	} else t6 = $[5];
 	let t7;
-	if ($[10] !== t3 || $[11] !== t6) {
-		t7 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_radix_ui_react_popover.Root, { children: [t3, t6] });
-		$[10] = t3;
-		$[11] = t6;
-		$[12] = t7;
-	} else t7 = $[12];
-	return t7;
+	if ($[6] !== onOpenChange) {
+		t7 = (details) => onOpenChange?.(details.open);
+		$[6] = onOpenChange;
+		$[7] = t7;
+	} else t7 = $[7];
+	let t8;
+	if ($[8] !== children || $[9] !== defaultOpen || $[10] !== modal || $[11] !== open || $[12] !== t6 || $[13] !== t7) {
+		t8 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react_popover.Popover.Root, {
+			open,
+			defaultOpen,
+			modal,
+			positioning: t6,
+			onOpenChange: t7,
+			children
+		});
+		$[8] = children;
+		$[9] = defaultOpen;
+		$[10] = modal;
+		$[11] = open;
+		$[12] = t6;
+		$[13] = t7;
+		$[14] = t8;
+	} else t8 = $[14];
+	return t8;
 };
-//#endregion
+const DsPopoverTrigger = (t0) => {
+	const $ = (0, react_compiler_runtime.c)(3);
+	const { children, className } = t0;
+	let t1;
+	if ($[0] !== children || $[1] !== className) {
+		t1 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react_popover.Popover.Trigger, {
+			asChild: true,
+			className,
+			children
+		});
+		$[0] = children;
+		$[1] = className;
+		$[2] = t1;
+	} else t1 = $[2];
+	return t1;
+};
+const DsPopoverPanel = (t0) => {
+	const $ = (0, react_compiler_runtime.c)(11);
+	const { width: t1, className, style, children, ref, "aria-label": ariaLabel } = t0;
+	const width = t1 === void 0 ? DEFAULT_PANEL_WIDTH : t1;
+	let t2;
+	if ($[0] !== className) {
+		t2 = (0, classnames.default)(ds_popover_module_default.panel, className);
+		$[0] = className;
+		$[1] = t2;
+	} else t2 = $[1];
+	let t3;
+	if ($[2] !== style || $[3] !== width) {
+		t3 = {
+			...style,
+			width
+		};
+		$[2] = style;
+		$[3] = width;
+		$[4] = t3;
+	} else t3 = $[4];
+	let t4;
+	if ($[5] !== ariaLabel || $[6] !== children || $[7] !== ref || $[8] !== t2 || $[9] !== t3) {
+		t4 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react_portal.Portal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react_popover.Popover.Positioner, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react_popover.Popover.Content, {
+			ref,
+			"aria-label": ariaLabel,
+			className: t2,
+			style: t3,
+			children
+		}) }) });
+		$[5] = ariaLabel;
+		$[6] = children;
+		$[7] = ref;
+		$[8] = t2;
+		$[9] = t3;
+		$[10] = t4;
+	} else t4 = $[10];
+	return t4;
+};
+const DsPopoverHeader = (t0) => {
+	const $ = (0, react_compiler_runtime.c)(11);
+	const { icon, className, style, children } = t0;
+	let t1;
+	if ($[0] !== className) {
+		t1 = (0, classnames.default)(ds_popover_module_default.header, className);
+		$[0] = className;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== icon) {
+		t2 = icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: ds_popover_module_default.headerIcon,
+			children: icon
+		});
+		$[2] = icon;
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] !== children) {
+		t3 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react_popover.Popover.Title, {
+			className: ds_popover_module_default.title,
+			asChild: true,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTypography, {
+				variant: "heading3",
+				color: "main",
+				children
+			})
+		});
+		$[4] = children;
+		$[5] = t3;
+	} else t3 = $[5];
+	let t4;
+	if ($[6] !== style || $[7] !== t1 || $[8] !== t2 || $[9] !== t3) {
+		t4 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: t1,
+			style,
+			children: [t2, t3]
+		});
+		$[6] = style;
+		$[7] = t1;
+		$[8] = t2;
+		$[9] = t3;
+		$[10] = t4;
+	} else t4 = $[10];
+	return t4;
+};
+const DsPopoverContent = (t0) => {
+	const $ = (0, react_compiler_runtime.c)(6);
+	const { className, style, children } = t0;
+	let t1;
+	if ($[0] !== className) {
+		t1 = (0, classnames.default)(ds_popover_module_default.content, 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", {
+			className: t1,
+			style,
+			children
+		});
+		$[2] = children;
+		$[3] = style;
+		$[4] = t1;
+		$[5] = t2;
+	} else t2 = $[5];
+	return t2;
+};
+const DsPopoverContentItem = (t0) => {
+	const $ = (0, react_compiler_runtime.c)(11);
+	const { status, headline, className, style, children } = t0;
+	const hasHeader = Boolean(status) || Boolean(headline);
+	let t1;
+	if ($[0] !== hasHeader || $[1] !== headline || $[2] !== status) {
+		t1 = hasHeader && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DsStack, {
+			direction: "row",
+			alignItems: "center",
+			gap: "var(--xs)",
+			children: [status, headline && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTypography, {
+				variant: "body-sm-semi-bold",
+				color: "main",
+				children: headline
+			})]
+		});
+		$[0] = hasHeader;
+		$[1] = headline;
+		$[2] = status;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== children) {
+		t2 = children && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTypography, {
+			variant: "body-sm-reg",
+			color: "main",
+			asChild: true,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsStack, {
+				direction: "row",
+				alignItems: "center",
+				gap: "var(--xs)",
+				children
+			})
+		});
+		$[4] = children;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== className || $[7] !== style || $[8] !== t1 || $[9] !== t2) {
+		t3 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DsStack, {
+			direction: "column",
+			gap: "var(--xs)",
+			className,
+			style,
+			children: [t1, t2]
+		});
+		$[6] = className;
+		$[7] = style;
+		$[8] = t1;
+		$[9] = t2;
+		$[10] = t3;
+	} else t3 = $[10];
+	return t3;
+};
+const DsPopoverFooter = (t0) => {
+	const $ = (0, react_compiler_runtime.c)(6);
+	const { className, style, children } = t0;
+	let t1;
+	if ($[0] !== className) {
+		t1 = (0, classnames.default)(ds_popover_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", {
+			className: t1,
+			style,
+			children
+		});
+		$[2] = children;
+		$[3] = style;
+		$[4] = t1;
+		$[5] = t2;
+	} else t2 = $[5];
+	return t2;
+};
+/**
+* Legacy single-element form. Keeps the old call signature and `side` default
+* ('top') compiling and opening, but now renders the new fixed-width panel —
+* styling differs from the old Radix popover and the Radix `Popover.Close`
+* context is no longer wired.
+* @deprecated Migrate to the compound API (`DsPopover.Root` / `.Trigger` / `.Panel`).
+*/
+const DsPopoverLegacy = (t0) => {
+	const $ = (0, react_compiler_runtime.c)(10);
+	const { trigger, children, className, side: t1, align: t2 } = t0;
+	const side = t1 === void 0 ? "top" : t1;
+	const align = t2 === void 0 ? "center" : t2;
+	let t3;
+	if ($[0] !== trigger) {
+		t3 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsPopoverTrigger, { children: trigger });
+		$[0] = trigger;
+		$[1] = t3;
+	} else t3 = $[1];
+	let t4;
+	if ($[2] !== children || $[3] !== className) {
+		t4 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsPopoverPanel, {
+			className,
+			children
+		});
+		$[2] = children;
+		$[3] = className;
+		$[4] = t4;
+	} else t4 = $[4];
+	let t5;
+	if ($[5] !== align || $[6] !== side || $[7] !== t3 || $[8] !== t4) {
+		t5 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DsPopoverRoot, {
+			side,
+			align,
+			children: [t3, t4]
+		});
+		$[5] = align;
+		$[6] = side;
+		$[7] = t3;
+		$[8] = t4;
+		$[9] = t5;
+	} else t5 = $[9];
+	return t5;
+};
+const DsPopover = Object.assign(DsPopoverLegacy, {
+	Root: DsPopoverRoot,
+	Trigger: DsPopoverTrigger,
+	Panel: DsPopoverPanel,
+	Header: DsPopoverHeader,
+	Content: DsPopoverContent,
+	ContentItem: DsPopoverContentItem,
+	Footer: DsPopoverFooter
+});
+//#endregion
+//#region src/components/ds-popover/ds-popover.types.ts
+const popoverSides = [
+	"top",
+	"right",
+	"bottom",
+	"left"
+];
+const popoverAligns = [
+	"start",
+	"center",
+	"end"
+];
+//#endregion
 //#region src/components/ds-progress-arc/ds-progress-arc.module.scss
 var ds_progress_arc_module_default = {
 	"center": "GIMU2W_center",
@@ -17311,71 +17668,6 @@ const splitButtonSizes = ["medium", "small"];
 const DsSplitButton = withResponsiveProps(DsSplitButton$1, ["size"]);
 DsSplitButton.displayName = "DsSplitButton";
 //#endregion
-//#region src/components/ds-stack/ds-stack.module.scss
-var ds_stack_module_default = { "root": "efmmNG_root" };
-//#endregion
-//#region src/components/ds-stack/ds-stack.tsx
-const DsStack$1 = (t0) => {
-	const $ = (0, react_compiler_runtime.c)(16);
-	const { direction, gap, alignItems, justifyContent, flex, flexWrap, width, children, className, style, ref } = t0;
-	let t1;
-	if ($[0] !== alignItems || $[1] !== direction || $[2] !== flex || $[3] !== flexWrap || $[4] !== gap || $[5] !== justifyContent || $[6] !== style || $[7] !== width) {
-		t1 = {
-			flexDirection: direction,
-			gap,
-			alignItems,
-			justifyContent,
-			flex,
-			flexWrap,
-			width,
-			...style
-		};
-		$[0] = alignItems;
-		$[1] = direction;
-		$[2] = flex;
-		$[3] = flexWrap;
-		$[4] = gap;
-		$[5] = justifyContent;
-		$[6] = style;
-		$[7] = width;
-		$[8] = t1;
-	} else t1 = $[8];
-	const layoutStyle = t1;
-	let t2;
-	if ($[9] !== className) {
-		t2 = (0, classnames.default)(ds_stack_module_default.root, className);
-		$[9] = className;
-		$[10] = t2;
-	} else t2 = $[10];
-	let t3;
-	if ($[11] !== children || $[12] !== layoutStyle || $[13] !== ref || $[14] !== t2) {
-		t3 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			ref,
-			className: t2,
-			style: layoutStyle,
-			children
-		});
-		$[11] = children;
-		$[12] = layoutStyle;
-		$[13] = ref;
-		$[14] = t2;
-		$[15] = t3;
-	} else t3 = $[15];
-	return t3;
-};
-//#endregion
-//#region src/components/ds-stack/index.ts
-const DsStack = withResponsiveProps(DsStack$1, [
-	"direction",
-	"gap",
-	"alignItems",
-	"justifyContent",
-	"flex",
-	"flexWrap",
-	"width"
-]);
-DsStack.displayName = "DsStack";
-//#endregion
 //#region src/components/ds-status-badge/ds-status-badge.module.scss
 var ds_status_badge_module_default = {
 	"active": "U5k6UG_active",
@@ -18852,6 +19144,7 @@ var ds_table_header_module_default = {
 	"filterableHeader": "-2rCNG_filterableHeader",
 	"filterActive": "-2rCNG_filterActive",
 	"filterTriggerContainer": "-2rCNG_filterTriggerContainer",
+	"groupStart": "-2rCNG_groupStart",
 	"headerCell": "-2rCNG_headerCell",
 	"headerRow": "-2rCNG_headerRow",
 	"headerRowNoBorder": "-2rCNG_headerRowNoBorder",
@@ -18978,6 +19271,154 @@ const SELECT_COLUMN_ID = "select";
 */
 const REORDER_COLUMN_ID = "reorder";
 //#endregion
+//#region src/components/ds-table/grouping/utils/column-group.ts
+/**
+* Builds the flex style for a group header cell so it lines up with the combined
+* width of its visible leaf columns.
+*
+* Fixed-width leaves contribute to `flexBasis`; default-sized leaves each add one
+* unit of `flexGrow`, mirroring how {@link getColumnSizeStyle} sizes leaf cells so
+* both header rows distribute free space identically.
+*/
+const getGroupColumnSizeStyle = (leafColumns) => {
+	let fixedWidth = 0;
+	let flexCount = 0;
+	for (const leaf of leafColumns) {
+		const size = leaf.getSize();
+		if (size !== _tanstack_react_table.defaultColumnSizing.size) fixedWidth += size;
+		else flexCount += 1;
+	}
+	if (flexCount === 0) return {
+		width: fixedWidth,
+		minWidth: fixedWidth,
+		flexShrink: 0
+	};
+	return {
+		flexGrow: flexCount,
+		flexShrink: 0,
+		flexBasis: fixedWidth,
+		minWidth: fixedWidth
+	};
+};
+/**
+* Whether a column is the first visible leaf of its parent group. Used to draw a
+* single side border at the start of each group in both the header and body.
+*/
+const isFirstLeafColumnOfGroup = (column) => {
+	const parent = column.parent;
+	if (!parent) return false;
+	return parent.getLeafColumns().filter((leaf) => leaf.getIsVisible())[0]?.id === column.id;
+};
+const getLeafColumnId = (def) => def.id ?? def.accessorKey;
+/**
+* Collects the ids of groups declared with `meta.group.defaultCollapsed`, used to
+* seed the uncontrolled collapse state.
+*/
+const getInitialCollapsedGroups = (columns) => {
+	const collapsed = [];
+	const visit = (defs) => {
+		for (const def of defs) if (def.columns) {
+			if (def.id && def.meta?.group?.defaultCollapsed) collapsed.push(def.id);
+			visit(def.columns);
+		}
+	};
+	visit(columns);
+	return collapsed;
+};
+/**
+* Maps collapsed groups to a {@link VisibilityState} that hides every leaf column
+* inside a collapsed group except those flagged `meta.keepVisibleWhenCollapsed`.
+* Layered on top of the consumer's own visibility so collapse never mutates it.
+*/
+const getCollapsedColumnVisibility = (columns, collapsedGroupIds) => {
+	const visibility = {};
+	const visit = (defs, isInsideCollapsedGroup) => {
+		for (const def of defs) {
+			if (def.columns) {
+				const isGroupCollapsed = isInsideCollapsedGroup || !!def.id && collapsedGroupIds.includes(def.id);
+				visit(def.columns, isGroupCollapsed);
+				continue;
+			}
+			if (!isInsideCollapsedGroup || def.meta?.keepVisibleWhenCollapsed) continue;
+			const columnId = getLeafColumnId(def);
+			if (columnId) visibility[columnId] = false;
+		}
+	};
+	visit(columns, false);
+	return visibility;
+};
+//#endregion
+//#region src/components/ds-table/grouping/hooks/use-column-groups.ts
+/**
+* Manages column-group collapse state. Supports both controlled
+* (`collapsedColumnGroups` + `onCollapsedColumnGroupsChange`) and uncontrolled
+* usage (seeded from `meta.group.defaultCollapsed`).
+*/
+const useColumnGroups = ({ columns, collapsedColumnGroups, onCollapsedColumnGroupsChange }) => {
+	const [collapsed, setCollapsed] = useControlled(collapsedColumnGroups, onCollapsedColumnGroupsChange, getInitialCollapsedGroups(columns));
+	const toggleColumnGroup = (groupId) => {
+		setCollapsed(collapsed.includes(groupId) ? collapsed.filter((id) => id !== groupId) : [...collapsed, groupId]);
+	};
+	return {
+		collapsedColumnGroups: collapsed,
+		toggleColumnGroup,
+		collapsedVisibility: (0, react.useMemo)(() => getCollapsedColumnVisibility(columns, collapsed), [columns, collapsed])
+	};
+};
+//#endregion
+//#region src/components/ds-table/ds-table.types.ts
+/**
+* Default English strings for {@link DsTableLocale}.
+*/
+const defaultDsTableLocale = Object.freeze({
+	collapseColumnGroup: "Collapse column group",
+	expandColumnGroup: "Expand column group"
+});
+//#endregion
+//#region src/components/ds-table/components/ds-table-group-header-cell/ds-table-group-header-cell.module.scss
+var ds_table_group_header_cell_module_default = {
+	"collapseToggle": "HuJ4KG_collapseToggle",
+	"groupHeaderCell": "HuJ4KG_groupHeaderCell",
+	"groupHeaderContent": "HuJ4KG_groupHeaderContent",
+	"groupLabel": "HuJ4KG_groupLabel"
+};
+//#endregion
+//#region src/components/ds-table/components/ds-table-group-header-cell/ds-table-group-header-cell.tsx
+const DsTableGroupHeaderCell = ({ header }) => {
+	const { collapsedColumnGroups, onToggleColumnGroup, locale } = useDsTableContext();
+	const groupId = header.column.id;
+	const groupStyle = getGroupColumnSizeStyle(header.column.getLeafColumns().filter((leaf) => leaf.getIsVisible()));
+	const isCollapsible = header.column.columnDef.meta?.group?.collapsible ?? false;
+	const isCollapsed = collapsedColumnGroups?.includes(groupId) ?? false;
+	const mergedLocale = {
+		...defaultDsTableLocale,
+		...locale
+	};
+	const toggleLabel = isCollapsed ? mergedLocale.expandColumnGroup : mergedLocale.collapseColumnGroup;
+	const handleToggle = () => onToggleColumnGroup?.(groupId);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableHead, {
+		className: ds_table_group_header_cell_module_default.groupHeaderCell,
+		style: groupStyle,
+		colSpan: header.colSpan,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: ds_table_group_header_cell_module_default.groupHeaderContent,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: ds_table_group_header_cell_module_default.groupLabel,
+				children: (0, _tanstack_react_table.flexRender)(header.column.columnDef.header, header.getContext())
+			}), isCollapsible && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsButtonV3, {
+				variant: "secondary",
+				size: "tiny",
+				icon: isCollapsed ? "chevron_right" : "chevron_left",
+				className: ds_table_group_header_cell_module_default.collapseToggle,
+				"aria-label": toggleLabel,
+				"aria-expanded": !isCollapsed,
+				title: toggleLabel,
+				onClick: handleToggle
+			})]
+		})
+	});
+};
+//#endregion
 //#region src/components/ds-table/components/ds-table-header/ds-table-header.tsx
 const DsTableHeader = ({ table }) => {
 	const { stickyHeader, bordered, virtualized } = useDsTableContext();
@@ -18986,17 +19427,23 @@ const DsTableHeader = ({ table }) => {
 		children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableRow, {
 			className: (0, classnames.default)(ds_table_header_module_default.headerRow, !bordered && ds_table_header_module_default.headerRowNoBorder, virtualized && ds_table_header_module_default.headerRowVirtualized),
 			children: headerGroup.headers.map((header) => {
+				if (header.isPlaceholder) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableHead, {
+					className: ds_table_header_module_default.headerCell,
+					style: getColumnSizeStyle(header.getSize())
+				}, header.id);
+				if (header.subHeaders.length > 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTableGroupHeaderCell, { header }, header.id);
 				const headerStyle = getColumnSizeStyle(header.column.getSize());
 				const canSort = header.column.getCanSort();
 				const isSelectColumn = header.column.id === SELECT_COLUMN_ID;
+				const isGroupStart = isFirstLeafColumnOfGroup(header.column);
 				const metaFilter = header.column.columnDef.meta?.filter;
 				const resolvedFilter = metaFilter && "render" in metaFilter ? metaFilter : void 0;
 				const hasActiveColumnFilter = resolvedFilter?.hasActiveFilter ?? false;
 				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableHead, {
-					className: (0, classnames.default)(ds_table_header_module_default.headerCell, canSort && ds_table_header_module_default.sortableHeader, isSelectColumn && ds_table_header_module_default.selectHeaderCell, resolvedFilter && ds_table_header_module_default.filterableHeader, hasActiveColumnFilter && ds_table_header_module_default.filterActive),
+					className: (0, classnames.default)(ds_table_header_module_default.headerCell, canSort && ds_table_header_module_default.sortableHeader, isSelectColumn && ds_table_header_module_default.selectHeaderCell, resolvedFilter && ds_table_header_module_default.filterableHeader, hasActiveColumnFilter && ds_table_header_module_default.filterActive, isGroupStart && ds_table_header_module_default.groupStart),
 					onClick: header.column.getToggleSortingHandler(),
 					style: headerStyle,
-					children: header.isPlaceholder ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: ds_table_header_module_default.headerSortContainer,
 						children: [
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsStack, {
@@ -19264,6 +19711,7 @@ var ds_table_row_module_default = {
 	"expandableCell": "t8OZCq_expandableCell",
 	"expanded": "t8OZCq_expanded",
 	"expandedRow": "t8OZCq_expandedRow",
+	"groupStart": "t8OZCq_groupStart",
 	"isDragging": "t8OZCq_isDragging",
 	"rowDragHandle": "t8OZCq_rowDragHandle",
 	"rowNoBorder": "t8OZCq_rowNoBorder",
@@ -19329,7 +19777,7 @@ const DsTableRow = ({ ref, row, isSelected }) => {
 			}, cell.id);
 			const isLastColumn = idx === row.getVisibleCells().length - 1;
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableCell, {
-				className: (0, classnames.default)(ds_table_row_module_default.tableCell, cell.column.id === "expander" && ds_table_row_module_default.expandableCell, cell.column.id === "select" && ds_table_row_module_default.selectableCell, typeof cell.column.columnDef.editCell === "function" && ds_table_row_module_default.editableCell),
+				className: (0, classnames.default)(ds_table_row_module_default.tableCell, cell.column.id === "expander" && ds_table_row_module_default.expandableCell, cell.column.id === "select" && ds_table_row_module_default.selectableCell, isFirstLeafColumnOfGroup(cell.column) && ds_table_row_module_default.groupStart, typeof cell.column.columnDef.editCell === "function" && ds_table_row_module_default.editableCell),
 				style: cellStyle,
 				children: isLastColumn ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTableCell, {
 					row,
@@ -19463,6 +19911,7 @@ var ds_table_row_virtualized_module_default = {
 	"expanded": "NcME7q_expanded",
 	"expandedRow": "NcME7q_expandedRow",
 	"expandedRowContent": "NcME7q_expandedRowContent",
+	"groupStart": "NcME7q_groupStart",
 	"row": "NcME7q_row",
 	"rowNoBorder": "NcME7q_rowNoBorder",
 	"selectableCell": "NcME7q_selectableCell",
@@ -19499,7 +19948,7 @@ const DsTableRowVirtualized = ({ row, isSelected, rowsMapRef, rowHeightsMapRef,
 			const isLastColumn = idx === row.getVisibleCells().length - 1;
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableCell, {
 				style: getColumnSizeStyle(cell.column.getSize()),
-				className: (0, classnames.default)(ds_table_row_virtualized_module_default.cell, cell.column.id === "expander" && ds_table_row_virtualized_module_default.expandableCell, cell.column.id === "select" && ds_table_row_virtualized_module_default.selectableCell, typeof cell.column.columnDef.editCell === "function" && ds_table_row_virtualized_module_default.editableCell),
+				className: (0, classnames.default)(ds_table_row_virtualized_module_default.cell, cell.column.id === "expander" && ds_table_row_virtualized_module_default.expandableCell, cell.column.id === "select" && ds_table_row_virtualized_module_default.selectableCell, isFirstLeafColumnOfGroup(cell.column) && ds_table_row_virtualized_module_default.groupStart, typeof cell.column.columnDef.editCell === "function" && ds_table_row_virtualized_module_default.editableCell),
 				children: isLastColumn ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTableCell, {
 					row,
 					cell,
@@ -19609,6 +20058,7 @@ const DsTableBodyVirtualized = ({ table, emptyState, estimateSize, overscan, onS
 function DsTableBody({ ref, rowVirtualizer, rowsMapRef, rowHeightsMapRef, rowsAndExpandedRowContent, emptyState, rowSelection }) {
 	const virtualRows = rowVirtualizer.getVirtualItems();
 	const totalSize = rowVirtualizer.getTotalSize();
+	const hasNoData = rowsAndExpandedRowContent.length === 0;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(TableBody, {
 		ref,
 		className: ds_table_body_virtualized_module_default.body,
@@ -19624,10 +20074,10 @@ function DsTableBody({ ref, rowVirtualizer, rowsMapRef, rowHeightsMapRef, rowsAn
 				rowVirtualizer,
 				virtualRow
 			}, virtualRow.key);
-		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableRow, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableCell, {
+		}) : hasNoData ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableRow, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableCell, {
 			className: ds_table_body_virtualized_module_default.emptyState,
 			children: emptyState || "No results."
-		}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tr", {
+		}) }) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tr", {
 			"aria-hidden": true,
 			className: ds_table_body_virtualized_module_default.sentinel,
 			style: { top: `${totalSize.toString()}px` },
@@ -19645,7 +20095,7 @@ const ROW_SIZE_HEIGHT_MAP = {
 /**
 * Design system Table component
 */
-const DsTable = ({ ref, columns: columnsProp, data: tableData, virtualized = false, virtualizedOptions, className, onRowClick, emptyState, stickyHeader = true, bordered = true, fullWidth = true, rowSize = "medium", expandable = false, renderExpandedRow, selectable = false, showSelectAllCheckbox = true, onSelectionChange, onSortingChange, onScroll, actions = [], onRowDoubleClick, primaryRowActions = [], secondaryRowActions, reorderable = false, onOrderChange, columnFilters: externalColumnFilters, onColumnFiltersChange, columnVisibility: externalColumnVisibility, onColumnVisibilityChange, activeRowId, infiniteScroll, onCellEdit, onCellValidate }) => {
+const DsTable = ({ ref, columns: columnsProp, data: tableData, virtualized = false, virtualizedOptions, className, onRowClick, emptyState, stickyHeader = true, bordered = true, fullWidth = true, rowSize = "medium", expandable = false, renderExpandedRow, selectable = false, showSelectAllCheckbox = true, onSelectionChange, onSortingChange, onScroll, actions = [], onRowDoubleClick, primaryRowActions = [], secondaryRowActions, reorderable = false, onOrderChange, columnFilters: externalColumnFilters, onColumnFiltersChange, columnVisibility: externalColumnVisibility, onColumnVisibilityChange, collapsedColumnGroups: externalCollapsedColumnGroups, onCollapsedColumnGroupsChange, locale, activeRowId, infiniteScroll, onCellEdit, onCellValidate }) => {
 	const [data, setData] = react.useState(tableData);
 	const [sorting, setSorting] = react.useState([]);
 	const [internalColumnFilters, setInternalColumnFilters] = react.useState([]);
@@ -19666,12 +20116,21 @@ const DsTable = ({ ref, columns: columnsProp, data: tableData, virtualized = fal
 		if (onColumnFiltersChange) onColumnFiltersChange(newFilters);
 		else setInternalColumnFilters(newFilters);
 	};
-	const columnVisibility = externalColumnVisibility ?? internalColumnVisibility;
+	const baseColumnVisibility = externalColumnVisibility ?? internalColumnVisibility;
 	const handleColumnVisibilityChange = (updaterOrValue) => {
-		const newVisibility = typeof updaterOrValue === "function" ? updaterOrValue(columnVisibility) : updaterOrValue;
+		const newVisibility = typeof updaterOrValue === "function" ? updaterOrValue(baseColumnVisibility) : updaterOrValue;
 		if (onColumnVisibilityChange) onColumnVisibilityChange(newVisibility);
 		else setInternalColumnVisibility(newVisibility);
 	};
+	const { collapsedColumnGroups, toggleColumnGroup, collapsedVisibility } = useColumnGroups({
+		columns: columnsProp,
+		collapsedColumnGroups: externalCollapsedColumnGroups,
+		onCollapsedColumnGroupsChange
+	});
+	const columnVisibility = (0, react.useMemo)(() => ({
+		...baseColumnVisibility,
+		...collapsedVisibility
+	}), [baseColumnVisibility, collapsedVisibility]);
 	const handleSortingChange = (updaterOrValue) => {
 		const newSorting = typeof updaterOrValue === "function" ? updaterOrValue(sorting) : updaterOrValue;
 		setSorting(newSorting);
@@ -19812,6 +20271,9 @@ const DsTable = ({ ref, columns: columnsProp, data: tableData, virtualized = fal
 		renderExpandedRow,
 		virtualized,
 		activeRowId,
+		collapsedColumnGroups,
+		onToggleColumnGroup: toggleColumnGroup,
+		locale,
 		onCellEdit,
 		...useEditingState(onCellEdit, onCellValidate)
 	};
@@ -21493,6 +21955,7 @@ exports.createDsTreeCollection = createDsTreeCollection;
 exports.createDualRangeFilterAdapter = createDualRangeFilterAdapter;
 exports.createFilterAdapter = createFilterAdapter;
 exports.customIcons = customIcons;
+exports.defaultDsTableLocale = defaultDsTableLocale;
 exports.dropdownMenuItemVariants = dropdownMenuItemVariants;
 exports.dsKeyValuePairOrientations = dsKeyValuePairOrientations;
 exports.filterStatuses = filterStatuses;
@@ -21503,6 +21966,8 @@ exports.iconVariants = iconVariants;
 exports.isCustomIcon = isCustomIcon;
 exports.isResponsiveValue = isResponsiveValue;
 exports.loaderVariants = loaderVariants;
+exports.popoverAligns = popoverAligns;
+exports.popoverSides = popoverSides;
 exports.progressArcSizes = progressArcSizes;
 exports.progressArcVariants = progressArcVariants;
 exports.progressDonutSizes = progressDonutSizes;