@drivenets/design-system 0.13.0 → 0.14.0

package/dist/index.js

@@ -24,7 +24,6 @@ import { CalendarDate, fromDate, getLocalTimeZone, parseDate } from "@internatio
 import { Popover } from "@ark-ui/react/popover";
 import { Select, createListCollection as createListCollection$1, useSelect, useSelectContext } from "@ark-ui/react/select";
 import * as Collapsible from "@radix-ui/react-collapsible";
-import * as Popover$1 from "@radix-ui/react-popover";
 import { RadioGroup } from "@ark-ui/react/radio-group";
 import { SegmentGroup } from "@ark-ui/react/segment-group";
 import * as steps from "@zag-js/steps";
@@ -7154,18 +7153,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 $ = 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 = classNames(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__ */ 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 $ = c(61);
+	const $ = c(64);
 	let className;
 	let label;
 	let onClick;
@@ -7179,8 +7246,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;
@@ -7195,6 +7263,7 @@ const DsTag = (t0) => {
 		$[11] = t4;
 		$[12] = t5;
 		$[13] = t6;
+		$[14] = value;
 	} else {
 		className = $[1];
 		label = $[2];
@@ -7209,31 +7278,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 = classNames(ds_tag_module_default.tag, {
 			[ds_tag_module_default.clickable]: t9,
 			[ds_tag_module_default.selected]: t10,
@@ -7241,27 +7311,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();
@@ -7273,13 +7343,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 === " ")) {
@@ -7287,21 +7357,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";
@@ -7314,7 +7384,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__ */ jsx("span", {
 			className: classNames(ds_tag_module_default.icon),
 			children: slots?.icon ?? (iconVariant && /* @__PURE__ */ jsx(DsIcon, {
@@ -7323,25 +7393,40 @@ const DsTag = (t0) => {
 				className: classNames(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__ */ 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__ */ jsxs(DsStack, {
+			direction: "row",
+			alignItems: "center",
+			gap: "var(--3xs)",
+			className: ds_tag_module_default.keyValue,
+			children: [/* @__PURE__ */ jsx(DsTypography, {
+				variant: size === "small" ? "body-xs-md" : "body-sm-md",
+				className: ds_tag_module_default.key,
+				children: label
+			}), /* @__PURE__ */ jsx(DsTypography, {
+				variant: size === "small" ? "body-xs-reg" : "body-sm-reg",
+				className: ds_tag_module_default.value,
+				children: value
+			})]
+		}) : /* @__PURE__ */ 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__ */ 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__ */ jsx("button", {
 			type: "button",
 			className: ds_tag_module_default.deleteButton,
 			onClick: handleDeleteClick,
@@ -7353,16 +7438,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__ */ 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__ */ jsxs("div", {
 			ref: t18,
 			className: tagClass,
 			style,
@@ -7376,27 +7461,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
@@ -7404,7 +7489,8 @@ const tagSizes = ["medium", "small"];
 const tagVariants = [
 	"default",
 	"include",
-	"exclude"
+	"exclude",
+	"key-value"
 ];
 //#endregion
 //#region src/utils/merge-refs.ts
@@ -8803,87 +8889,86 @@ const DsTagFilter = (t0) => {
 	if (items.length === 0) return null;
 	let t9;
 	if ($[9] !== onItemDelete || $[10] !== onItemSelect) {
-		t9 = (item) => {
-			return /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsx("div", {
+	if ($[17] !== buildTagProps || $[18] !== items) {
+		let t13;
+		if ($[20] !== buildTagProps) {
+			t13 = (item_1) => /* @__PURE__ */ 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__ */ 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 = classNames(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 = classNames(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__ */ jsx(DsTypography, {
+		t16 = label && /* @__PURE__ */ 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__ */ jsxs(DsButton, {
+		t17 = hasOverflow && /* @__PURE__ */ jsxs(DsButton, {
 			design: "v1.2",
 			buttonType: "tertiary",
 			variant: "ghost",
@@ -8899,11 +8984,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__ */ jsxs(DsButton, {
+		t18 = onClearAll && /* @__PURE__ */ jsxs(DsButton, {
 			design: "v1.2",
 			buttonType: "tertiary",
 			variant: "ghost",
@@ -8915,78 +9000,78 @@ const DsTagFilter = (t0) => {
 		});
 		$[36] = clearButton;
 		$[37] = onClearAll;
-		$[38] = t17;
-	} else t17 = $[38];
-	let t18;
-	if ($[39] !== t16 || $[40] !== t17) {
-		t18 = /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsx("div", {
+		$[47] = t21;
+	} else t21 = $[47];
+	let t22;
+	if ($[50] !== t21) {
+		t22 = /* @__PURE__ */ 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__ */ jsxs("div", {
+		$[50] = t21;
+		$[51] = t22;
+	} else t22 = $[51];
+	let t23;
+	if ($[52] !== style || $[53] !== t15 || $[54] !== t20 || $[55] !== t22) {
+		t23 = /* @__PURE__ */ 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 = createPortal(measurementContainer, document.body);
+		t24 = createPortal(measurementContainer, document.body);
 		$[57] = measurementContainer;
-		$[58] = t23;
-	} else t23 = $[58];
-	let t24;
-	if ($[59] !== t22 || $[60] !== t23) {
-		t24 = /* @__PURE__ */ jsxs(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__ */ jsxs(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
@@ -15457,62 +15542,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 $ = 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__ */ jsx(Popover$1.Trigger, {
-			asChild: true,
-			children: trigger
-		});
-		$[0] = trigger;
-		$[1] = t3;
-	} else t3 = $[1];
-	let t4;
-	if ($[2] !== className) {
-		t4 = classNames(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 $ = 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__ */ jsx(Popover$1.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__ */ jsx(Popover$1.Portal, { children: /* @__PURE__ */ jsxs(Popover$1.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__ */ jsxs(Popover$1.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__ */ jsx(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 $ = c(3);
+	const { children, className } = t0;
+	let t1;
+	if ($[0] !== children || $[1] !== className) {
+		t1 = /* @__PURE__ */ jsx(Popover.Trigger, {
+			asChild: true,
+			className,
+			children
+		});
+		$[0] = children;
+		$[1] = className;
+		$[2] = t1;
+	} else t1 = $[2];
+	return t1;
+};
+const DsPopoverPanel = (t0) => {
+	const $ = 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 = classNames(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__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Popover.Positioner, { children: /* @__PURE__ */ jsx(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 $ = c(11);
+	const { icon, className, style, children } = t0;
+	let t1;
+	if ($[0] !== className) {
+		t1 = classNames(ds_popover_module_default.header, className);
+		$[0] = className;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== icon) {
+		t2 = icon && /* @__PURE__ */ jsx("span", {
+			className: ds_popover_module_default.headerIcon,
+			children: icon
+		});
+		$[2] = icon;
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] !== children) {
+		t3 = /* @__PURE__ */ jsx(Popover.Title, {
+			className: ds_popover_module_default.title,
+			asChild: true,
+			children: /* @__PURE__ */ 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__ */ 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 $ = c(6);
+	const { className, style, children } = t0;
+	let t1;
+	if ($[0] !== className) {
+		t1 = classNames(ds_popover_module_default.content, className);
+		$[0] = className;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== children || $[3] !== style || $[4] !== t1) {
+		t2 = /* @__PURE__ */ jsx("div", {
+			className: t1,
+			style,
+			children
+		});
+		$[2] = children;
+		$[3] = style;
+		$[4] = t1;
+		$[5] = t2;
+	} else t2 = $[5];
+	return t2;
+};
+const DsPopoverContentItem = (t0) => {
+	const $ = 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__ */ jsxs(DsStack, {
+			direction: "row",
+			alignItems: "center",
+			gap: "var(--xs)",
+			children: [status, headline && /* @__PURE__ */ 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__ */ jsx(DsTypography, {
+			variant: "body-sm-reg",
+			color: "main",
+			asChild: true,
+			children: /* @__PURE__ */ 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__ */ 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 $ = c(6);
+	const { className, style, children } = t0;
+	let t1;
+	if ($[0] !== className) {
+		t1 = classNames(ds_popover_module_default.footer, className);
+		$[0] = className;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== children || $[3] !== style || $[4] !== t1) {
+		t2 = /* @__PURE__ */ 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 $ = 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__ */ jsx(DsPopoverTrigger, { children: trigger });
+		$[0] = trigger;
+		$[1] = t3;
+	} else t3 = $[1];
+	let t4;
+	if ($[2] !== children || $[3] !== className) {
+		t4 = /* @__PURE__ */ 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__ */ 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",
@@ -17281,71 +17639,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 $ = 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 = classNames(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__ */ 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",
@@ -18822,6 +19115,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",
@@ -18948,6 +19242,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 !== 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: 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__ */ jsx(TableHead, {
+		className: ds_table_group_header_cell_module_default.groupHeaderCell,
+		style: groupStyle,
+		colSpan: header.colSpan,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: ds_table_group_header_cell_module_default.groupHeaderContent,
+			children: [/* @__PURE__ */ jsx("span", {
+				className: ds_table_group_header_cell_module_default.groupLabel,
+				children: flexRender(header.column.columnDef.header, header.getContext())
+			}), isCollapsible && /* @__PURE__ */ 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();
@@ -18956,17 +19398,23 @@ const DsTableHeader = ({ table }) => {
 		children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableRow, {
 			className: classNames(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__ */ jsx(TableHead, {
+					className: ds_table_header_module_default.headerCell,
+					style: getColumnSizeStyle(header.getSize())
+				}, header.id);
+				if (header.subHeaders.length > 0) return /* @__PURE__ */ 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__ */ jsx(TableHead, {
-					className: classNames(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: classNames(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__ */ jsxs("div", {
+					children: /* @__PURE__ */ jsxs("div", {
 						className: ds_table_header_module_default.headerSortContainer,
 						children: [
 							/* @__PURE__ */ jsx(DsStack, {
@@ -19234,6 +19682,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",
@@ -19299,7 +19748,7 @@ const DsTableRow = ({ ref, row, isSelected }) => {
 			}, cell.id);
 			const isLastColumn = idx === row.getVisibleCells().length - 1;
 			return /* @__PURE__ */ jsx(TableCell, {
-				className: classNames(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: classNames(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__ */ jsx(DsTableCell, {
 					row,
@@ -19433,6 +19882,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",
@@ -19469,7 +19919,7 @@ const DsTableRowVirtualized = ({ row, isSelected, rowsMapRef, rowHeightsMapRef,
 			const isLastColumn = idx === row.getVisibleCells().length - 1;
 			return /* @__PURE__ */ jsx(TableCell, {
 				style: getColumnSizeStyle(cell.column.getSize()),
-				className: classNames(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: classNames(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__ */ jsx(DsTableCell, {
 					row,
 					cell,
@@ -19579,6 +20029,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__ */ jsxs(TableBody, {
 		ref,
 		className: ds_table_body_virtualized_module_default.body,
@@ -19594,10 +20045,10 @@ function DsTableBody({ ref, rowVirtualizer, rowsMapRef, rowHeightsMapRef, rowsAn
 				rowVirtualizer,
 				virtualRow
 			}, virtualRow.key);
-		}) : /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, {
+		}) : hasNoData ? /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, {
 			className: ds_table_body_virtualized_module_default.emptyState,
 			children: emptyState || "No results."
-		}) }), /* @__PURE__ */ jsx("tr", {
+		}) }) : null, /* @__PURE__ */ jsx("tr", {
 			"aria-hidden": true,
 			className: ds_table_body_virtualized_module_default.sentinel,
 			style: { top: `${totalSize.toString()}px` },
@@ -19615,7 +20066,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$1.useState(tableData);
 	const [sorting, setSorting] = React$1.useState([]);
 	const [internalColumnFilters, setInternalColumnFilters] = React$1.useState([]);
@@ -19636,12 +20087,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 = useMemo(() => ({
+		...baseColumnVisibility,
+		...collapsedVisibility
+	}), [baseColumnVisibility, collapsedVisibility]);
 	const handleSortingChange = (updaterOrValue) => {
 		const newSorting = typeof updaterOrValue === "function" ? updaterOrValue(sorting) : updaterOrValue;
 		setSorting(newSorting);
@@ -19782,6 +20242,9 @@ const DsTable = ({ ref, columns: columnsProp, data: tableData, virtualized = fal
 		renderExpandedRow,
 		virtualized,
 		activeRowId,
+		collapsedColumnGroups,
+		onToggleColumnGroup: toggleColumnGroup,
+		locale,
 		onCellEdit,
 		...useEditingState(onCellEdit, onCellValidate)
 	};
@@ -21358,6 +21821,6 @@ DsWorkspaceLayout.Body = Body;
 DsWorkspaceLayout.SideMenu = SideMenu;
 DsWorkspaceLayout.LeftPanel = LeftPanel;
 //#endregion
-export { BREAKPOINT_LG, DsAlertBanner, DsAutocomplete, DsAvatar, DsAvatarGroup, DsBreadcrumb, DsButton, DsButtonV3, DsCard, DsCatalogLayout, DsCheckbox, DsCheckboxGroup, DsChip, DsChipGroup, DsCommentBubble, DsCommentCard, DsCommentIndicator, DsCommentThread, DsCommentsDrawer, DsConfirmation, DsDateInput, DsDatePicker, DsDateRangePicker, DsDialog, DsDivider, DsDrawer, DsDropdownMenu, DsDropdownMenuLegacy, DsExpandableTextInput, DsFileUpload, DsFilterStatusIcon, DsFormControl, DsGrid, DsGridItem, DsIcon, DsKeyValuePair, DsLoader, DsModal, DsNextStepButton, DsNumberInput, DsPanel, DsPasswordInput, DsPopover, DsProgressArc, DsProgressDonut, DsProgressLinear, DsRadioGroup, DsRadioGroupLegacy, DsSegmentGroup, DsSelect, ds_skeleton_default as DsSkeleton, DsSkeletonCircle, DsSkeletonRect, DsSkeletonText, DsSmartTabs, DsSpinner, DsSplitButton, DsStack, DsStatusBadge, DsStatusBadgeV2, DsStep, DsStepContent, DsStepper, DsSystemStatus, DsTable, DsTableColumnFilterPopover, DsTableEditCellCheckbox, DsTableEditCellDate, DsTableEditCellNumber, DsTableEditCellSelect, DsTableEditCellText, DsTableEditableCell, DsTableEditingCell, DsTabs, DsTag, DsTagFilter, DsTextInput, DsTextarea, DsThreadItem, DsTimePicker, DsToastProvider, DsToggle, DsTooltip, DsTree, DsTypography, DsVerticalTabs, DsWorkspaceLayout, FatalFileUploadError, FileUpload, FileUploadError, RetryableFileUploadError, alertBannerVariants, breakpoints, buttonV3Colors, buttonV3Sizes, buttonV3Variants, cardSizes, checkboxVariants, colors, controlStatuses, createCheckboxFilterAdapter, createDsTreeCollection, createDualRangeFilterAdapter, createFilterAdapter, customIcons, dropdownMenuItemVariants, dsKeyValuePairOrientations, filterStatuses, formatTime, iconColors, iconSizes, iconVariants, isCustomIcon, isResponsiveValue, loaderVariants, progressArcSizes, progressArcVariants, progressDonutSizes, progressDonutVariants, progressLinearSizes, progressLinearVariants, resolveResponsiveValue, skeletonColorVariants, skeletonRadiusVariants, spinnerSizes, splitButtonSizes, statusBadgeV2Phases, statusBadgeV2Sizes, statusBadgeV2Variants, systemStatuses, tagSizes, tagVariants, textInputSizes, useBreakpoint, useCellEditor, useCheckboxSelectAll, useFileUpload, useResponsiveValue, useTableFilters, useToaster, withResponsiveProps };
+export { BREAKPOINT_LG, DsAlertBanner, DsAutocomplete, DsAvatar, DsAvatarGroup, DsBreadcrumb, DsButton, DsButtonV3, DsCard, DsCatalogLayout, DsCheckbox, DsCheckboxGroup, DsChip, DsChipGroup, DsCommentBubble, DsCommentCard, DsCommentIndicator, DsCommentThread, DsCommentsDrawer, DsConfirmation, DsDateInput, DsDatePicker, DsDateRangePicker, DsDialog, DsDivider, DsDrawer, DsDropdownMenu, DsDropdownMenuLegacy, DsExpandableTextInput, DsFileUpload, DsFilterStatusIcon, DsFormControl, DsGrid, DsGridItem, DsIcon, DsKeyValuePair, DsLoader, DsModal, DsNextStepButton, DsNumberInput, DsPanel, DsPasswordInput, DsPopover, DsProgressArc, DsProgressDonut, DsProgressLinear, DsRadioGroup, DsRadioGroupLegacy, DsSegmentGroup, DsSelect, ds_skeleton_default as DsSkeleton, DsSkeletonCircle, DsSkeletonRect, DsSkeletonText, DsSmartTabs, DsSpinner, DsSplitButton, DsStack, DsStatusBadge, DsStatusBadgeV2, DsStep, DsStepContent, DsStepper, DsSystemStatus, DsTable, DsTableColumnFilterPopover, DsTableEditCellCheckbox, DsTableEditCellDate, DsTableEditCellNumber, DsTableEditCellSelect, DsTableEditCellText, DsTableEditableCell, DsTableEditingCell, DsTabs, DsTag, DsTagFilter, DsTextInput, DsTextarea, DsThreadItem, DsTimePicker, DsToastProvider, DsToggle, DsTooltip, DsTree, DsTypography, DsVerticalTabs, DsWorkspaceLayout, FatalFileUploadError, FileUpload, FileUploadError, RetryableFileUploadError, alertBannerVariants, breakpoints, buttonV3Colors, buttonV3Sizes, buttonV3Variants, cardSizes, checkboxVariants, colors, controlStatuses, createCheckboxFilterAdapter, createDsTreeCollection, createDualRangeFilterAdapter, createFilterAdapter, customIcons, defaultDsTableLocale, dropdownMenuItemVariants, dsKeyValuePairOrientations, filterStatuses, formatTime, iconColors, iconSizes, iconVariants, isCustomIcon, isResponsiveValue, loaderVariants, popoverAligns, popoverSides, progressArcSizes, progressArcVariants, progressDonutSizes, progressDonutVariants, progressLinearSizes, progressLinearVariants, resolveResponsiveValue, skeletonColorVariants, skeletonRadiusVariants, spinnerSizes, splitButtonSizes, statusBadgeV2Phases, statusBadgeV2Sizes, statusBadgeV2Variants, systemStatuses, tagSizes, tagVariants, textInputSizes, useBreakpoint, useCellEditor, useCheckboxSelectAll, useFileUpload, useResponsiveValue, useTableFilters, useToaster, withResponsiveProps };
 
 //# sourceMappingURL=index.js.map