@drivenets/design-system 0.13.0 → 0.15.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
@@ -8352,8 +8437,8 @@ const useArkDialogBodyLockCleanup = (open, enabled) => {
 //#endregion
 //#region src/components/ds-drawer/ds-drawer.tsx
 const DsDrawer = (t0) => {
-	const $ = (0, react_compiler_runtime.c)(25);
-	const { open, onOpenChange, columns: t1, position: t2, backdrop: t3, closeOnEscape: t4, closeOnInteractOutside: t5, portal: t6, style, className, children } = t0;
+	const $ = (0, react_compiler_runtime.c)(28);
+	const { open, onOpenChange, onOpenAutoFocus, columns: t1, position: t2, backdrop: t3, closeOnEscape: t4, closeOnInteractOutside: t5, portal: t6, style, className, children } = t0;
 	const columns = t1 === void 0 ? 4 : t1;
 	const position = t2 === void 0 ? "end" : t2;
 	const backdrop = t3 === void 0 ? false : t3;
@@ -8371,75 +8456,88 @@ const DsDrawer = (t0) => {
 		$[1] = t7;
 	} else t7 = $[1];
 	const handleOpenChange = t7;
-	const Wrapper = portal ? _ark_ui_react_portal.Portal : react.Fragment;
 	let t8;
-	if ($[2] !== backdrop) {
-		t8 = backdrop && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react_dialog.Dialog.Backdrop, { className: ds_drawer_module_default.backdrop });
-		$[2] = backdrop;
+	if ($[2] !== onOpenAutoFocus) {
+		t8 = onOpenAutoFocus ? () => {
+			const event = new Event("openAutoFocus", { cancelable: true });
+			onOpenAutoFocus(event);
+			return event.defaultPrevented ? document.activeElement : void 0;
+		} : void 0;
+		$[2] = onOpenAutoFocus;
 		$[3] = t8;
 	} else t8 = $[3];
-	const t9 = ds_drawer_module_default[`position-${position}`];
-	const t10 = ds_drawer_module_default[`cols-${resolvedColumns}`];
-	let t11;
-	if ($[4] !== className || $[5] !== t10 || $[6] !== t9) {
-		t11 = (0, classnames.default)(ds_drawer_module_default.drawer, t9, className, t10);
-		$[4] = className;
-		$[5] = t10;
-		$[6] = t9;
-		$[7] = t11;
-	} else t11 = $[7];
+	const initialFocusEl = t8;
+	const Wrapper = portal ? _ark_ui_react_portal.Portal : react.Fragment;
+	let t9;
+	if ($[4] !== backdrop) {
+		t9 = backdrop && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react_dialog.Dialog.Backdrop, { className: ds_drawer_module_default.backdrop });
+		$[4] = backdrop;
+		$[5] = t9;
+	} else t9 = $[5];
+	const t10 = ds_drawer_module_default[`position-${position}`];
+	const t11 = ds_drawer_module_default[`cols-${resolvedColumns}`];
 	let t12;
-	if ($[8] !== children) {
-		t12 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: ds_drawer_module_default.content,
-			children
-		});
-		$[8] = children;
+	if ($[6] !== className || $[7] !== t10 || $[8] !== t11) {
+		t12 = (0, classnames.default)(ds_drawer_module_default.drawer, t10, className, t11);
+		$[6] = className;
+		$[7] = t10;
+		$[8] = t11;
 		$[9] = t12;
 	} else t12 = $[9];
 	let t13;
-	if ($[10] !== style || $[11] !== t11 || $[12] !== t12) {
-		t13 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react_dialog.Dialog.Positioner, {
+	if ($[10] !== children) {
+		t13 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: ds_drawer_module_default.content,
+			children
+		});
+		$[10] = children;
+		$[11] = t13;
+	} else t13 = $[11];
+	let t14;
+	if ($[12] !== style || $[13] !== t12 || $[14] !== t13) {
+		t14 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react_dialog.Dialog.Positioner, {
 			className: ds_drawer_module_default.positioner,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react_dialog.Dialog.Content, {
 				style,
-				className: t11,
-				children: t12
+				className: t12,
+				children: t13
 			})
 		});
-		$[10] = style;
-		$[11] = t11;
-		$[12] = t12;
-		$[13] = t13;
-	} else t13 = $[13];
-	let t14;
-	if ($[14] !== Wrapper || $[15] !== t13 || $[16] !== t8) {
-		t14 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Wrapper, { children: [t8, t13] });
-		$[14] = Wrapper;
-		$[15] = t13;
-		$[16] = t8;
-		$[17] = t14;
-	} else t14 = $[17];
+		$[12] = style;
+		$[13] = t12;
+		$[14] = t13;
+		$[15] = t14;
+	} else t14 = $[15];
 	let t15;
-	if ($[18] !== backdrop || $[19] !== closeOnEscape || $[20] !== closeOnInteractOutside || $[21] !== handleOpenChange || $[22] !== open || $[23] !== t14) {
-		t15 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react_dialog.Dialog.Root, {
+	if ($[16] !== Wrapper || $[17] !== t14 || $[18] !== t9) {
+		t15 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Wrapper, { children: [t9, t14] });
+		$[16] = Wrapper;
+		$[17] = t14;
+		$[18] = t9;
+		$[19] = t15;
+	} else t15 = $[19];
+	let t16;
+	if ($[20] !== backdrop || $[21] !== closeOnEscape || $[22] !== closeOnInteractOutside || $[23] !== handleOpenChange || $[24] !== initialFocusEl || $[25] !== open || $[26] !== t15) {
+		t16 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react_dialog.Dialog.Root, {
 			open,
 			onOpenChange: handleOpenChange,
 			modal: backdrop,
 			closeOnEscape,
 			closeOnInteractOutside,
 			preventScroll: backdrop,
-			children: t14
-		});
-		$[18] = backdrop;
-		$[19] = closeOnEscape;
-		$[20] = closeOnInteractOutside;
-		$[21] = handleOpenChange;
-		$[22] = open;
-		$[23] = t14;
-		$[24] = t15;
-	} else t15 = $[24];
-	return t15;
+			initialFocusEl,
+			children: t15
+		});
+		$[20] = backdrop;
+		$[21] = closeOnEscape;
+		$[22] = closeOnInteractOutside;
+		$[23] = handleOpenChange;
+		$[24] = initialFocusEl;
+		$[25] = open;
+		$[26] = t15;
+		$[27] = t16;
+	} else t16 = $[27];
+	return t16;
 };
 const Header$2 = (t0) => {
 	const $ = (0, react_compiler_runtime.c)(6);
@@ -8833,87 +8931,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 +9026,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 +9042,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
@@ -14704,6 +14801,7 @@ function useFileUpload({ adapter, autoUpload = true, maxConcurrent = 3, maxFiles
 			updateFileProgress(fileId_2, 100);
 			onFileUploadComplete?.(fileId_2, result);
 		} catch (error_0) {
+			if (abortController.signal.aborted) return;
 			const errorMessage = error_0 instanceof Error ? error_0.message : "Upload failed";
 			let status_0 = "interrupted";
 			if (error_0 instanceof FileUploadError) status_0 = error_0.isRetryable ? "interrupted" : "error";
@@ -15487,61 +15585,334 @@ 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;
+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 ($[0] !== align || $[1] !== side) {
+		t5 = toPlacement(side, align);
+		$[0] = align;
+		$[1] = side;
+		$[2] = t5;
+	} else t5 = $[2];
+	let t6;
+	if ($[3] !== gutter || $[4] !== t5) {
+		t6 = {
+			placement: t5,
+			gutter
+		};
+		$[3] = gutter;
+		$[4] = t5;
+		$[5] = t6;
+	} else t6 = $[5];
+	let 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;
+};
+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] !== className) {
-		t4 = (0, classnames.default)(ds_popover_module_default.content, className);
-		$[2] = className;
-		$[3] = t4;
-	} else t4 = $[3];
+	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 ($[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];
-	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, {
+	if ($[5] !== align || $[6] !== side || $[7] !== t3 || $[8] !== t4) {
+		t5 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DsPopoverRoot, {
 			side,
 			align,
-			sideOffset: 8,
-			collisionPadding: 16,
-			className: t4,
-			children: [children, t5]
-		}) });
+			children: [t3, t4]
+		});
 		$[5] = align;
-		$[6] = children;
-		$[7] = side;
+		$[6] = side;
+		$[7] = t3;
 		$[8] = t4;
-		$[9] = t6;
-	} else t6 = $[9];
-	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;
+		$[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 = {
@@ -16182,6 +16553,263 @@ const progressLinearSizes = [
 	"large"
 ];
 //#endregion
+//#region src/components/ds-progress-task-bar/ds-progress-task-bar.module.scss
+var ds_progress_task_bar_module_default = {
+	"bar": "SN3VFW_bar",
+	"segment": "SN3VFW_segment",
+	"segmentCompleted": "SN3VFW_segmentCompleted",
+	"segmentFailed": "SN3VFW_segmentFailed",
+	"segmentRunning": "SN3VFW_segmentRunning",
+	"statusIcon": "SN3VFW_statusIcon",
+	"total": "SN3VFW_total"
+};
+//#endregion
+//#region src/components/ds-progress-task-bar/ds-progress-task-bar.types.ts
+const taskBarStatuses = [
+	"completed",
+	"running",
+	"failed"
+];
+//#endregion
+//#region src/components/ds-progress-task-bar/utils.ts
+const COUNT_UNITS = [
+	{
+		value: 1e9,
+		suffix: "B"
+	},
+	{
+		value: 1e6,
+		suffix: "M"
+	},
+	{
+		value: 1e3,
+		suffix: "K"
+	}
+];
+const ABBREVIATION_FLOOR = 1e3;
+const DECIMAL_THRESHOLD = 10;
+const stripTrailingZero = (value) => value % 1 === 0 ? String(value) : value.toFixed(1);
+/**
+* Format a task count for the legend, following the design's abbreviation rules:
+* - `< 1000` → exact number (e.g. `999`)
+* - single-digit unit → one decimal (e.g. `1.1K`, `1.2M`)
+* - multi-digit unit → whole number, truncated so `999,999 → 999K`
+*/
+const formatCount = (count) => {
+	if (!Number.isFinite(count)) return "0";
+	const rounded = Math.max(0, Math.round(count));
+	if (rounded < ABBREVIATION_FLOOR) return String(rounded);
+	const unit = COUNT_UNITS.find(({ value }) => rounded >= value);
+	if (unit === void 0) return String(rounded);
+	const scaled = rounded / unit.value;
+	if (scaled < DECIMAL_THRESHOLD) return `${stripTrailingZero(Math.round(scaled * 10) / 10)}${unit.suffix}`;
+	return `${String(Math.floor(scaled))}${unit.suffix}`;
+};
+//#endregion
+//#region src/components/ds-progress-task-bar/ds-progress-task-bar.tsx
+const statusIcon = Object.freeze({
+	completed: "check_circle",
+	running: "play_circle",
+	failed: "cancel"
+});
+const statusIconColor = Object.freeze({
+	completed: "success",
+	running: "action",
+	failed: "error"
+});
+const statusTextColor = Object.freeze({
+	completed: "success",
+	running: "action",
+	failed: "error"
+});
+const statusSegmentClass = Object.freeze({
+	completed: ds_progress_task_bar_module_default.segmentCompleted,
+	running: ds_progress_task_bar_module_default.segmentRunning,
+	failed: ds_progress_task_bar_module_default.segmentFailed
+});
+const defaultLocale = Object.freeze({
+	completed: "Completed",
+	running: "Running",
+	failed: "Failed",
+	total: (total) => `of ${total}`
+});
+const DsProgressTaskBar = (t0) => {
+	const $ = (0, react_compiler_runtime.c)(39);
+	const { completed: t1, running: t2, failed: t3, total, locale, className, style, ref } = t0;
+	const completed = t1 === void 0 ? 0 : t1;
+	const running = t2 === void 0 ? 0 : t2;
+	const failed = t3 === void 0 ? 0 : t3;
+	const t4 = Math.max(0, completed);
+	const t5 = Math.max(0, running);
+	const t6 = Math.max(0, failed);
+	let T0;
+	let t10;
+	let t11;
+	let t12;
+	let t13;
+	let t14;
+	let t15;
+	let t16;
+	let t17;
+	let t18;
+	let t19;
+	let t7;
+	let t8;
+	let t9;
+	if ($[0] !== className || $[1] !== locale || $[2] !== ref || $[3] !== style || $[4] !== t4 || $[5] !== t5 || $[6] !== t6 || $[7] !== total) {
+		const counts = {
+			completed: t4,
+			running: t5,
+			failed: t6
+		};
+		const sum = counts.completed + counts.running + counts.failed;
+		const denominator = Math.max(total ?? sum, sum);
+		const mergedLocale = {
+			...defaultLocale,
+			...locale
+		};
+		const activeStatuses = taskBarStatuses.filter((status) => counts[status] > 0);
+		const segmentWidth = (status_0) => denominator > 0 ? `${String(counts[status_0] / denominator * 100)}%` : "0%";
+		T0 = DsStack;
+		t13 = ref;
+		t14 = "column";
+		t15 = "var(--xs)";
+		t16 = "100%";
+		t17 = className;
+		t18 = style;
+		t19 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DsStack, {
+			direction: "row",
+			alignItems: "center",
+			justifyContent: "space-between",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsStack, {
+				direction: "row",
+				alignItems: "center",
+				gap: "var(--3xs)",
+				children: activeStatuses.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTypography, {
+					variant: "body-xs-reg",
+					color: "secondary",
+					children: "0"
+				}) : activeStatuses.map((status_1) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DsStack, {
+					direction: "row",
+					alignItems: "center",
+					gap: "var(--4xs)",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTooltip, {
+						content: mergedLocale[status_1],
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: ds_progress_task_bar_module_default.statusIcon,
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsIcon, {
+								icon: statusIcon[status_1],
+								size: "tiny",
+								color: statusIconColor[status_1],
+								filled: true
+							})
+						})
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTypography, {
+						variant: "body-xs-reg",
+						color: statusTextColor[status_1],
+						children: formatCount(counts[status_1])
+					})]
+				}, status_1))
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTypography, {
+				variant: "body-xs-reg",
+				color: "secondary",
+				className: ds_progress_task_bar_module_default.total,
+				children: mergedLocale.total(formatCount(denominator))
+			})]
+		});
+		t7 = ds_progress_task_bar_module_default.bar;
+		t8 = "progressbar";
+		t9 = 0;
+		t10 = denominator;
+		t11 = sum;
+		t12 = activeStatuses.map((status_2) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTooltip, {
+			content: mergedLocale[status_2],
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: (0, classnames.default)(ds_progress_task_bar_module_default.segment, statusSegmentClass[status_2]),
+				style: { width: segmentWidth(status_2) }
+			})
+		}, status_2));
+		$[0] = className;
+		$[1] = locale;
+		$[2] = ref;
+		$[3] = style;
+		$[4] = t4;
+		$[5] = t5;
+		$[6] = t6;
+		$[7] = total;
+		$[8] = T0;
+		$[9] = t10;
+		$[10] = t11;
+		$[11] = t12;
+		$[12] = t13;
+		$[13] = t14;
+		$[14] = t15;
+		$[15] = t16;
+		$[16] = t17;
+		$[17] = t18;
+		$[18] = t19;
+		$[19] = t7;
+		$[20] = t8;
+		$[21] = t9;
+	} else {
+		T0 = $[8];
+		t10 = $[9];
+		t11 = $[10];
+		t12 = $[11];
+		t13 = $[12];
+		t14 = $[13];
+		t15 = $[14];
+		t16 = $[15];
+		t17 = $[16];
+		t18 = $[17];
+		t19 = $[18];
+		t7 = $[19];
+		t8 = $[20];
+		t9 = $[21];
+	}
+	let t20;
+	if ($[22] !== t10 || $[23] !== t11 || $[24] !== t12 || $[25] !== t7 || $[26] !== t8 || $[27] !== t9) {
+		t20 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: t7,
+			role: t8,
+			"aria-valuemin": t9,
+			"aria-valuemax": t10,
+			"aria-valuenow": t11,
+			children: t12
+		});
+		$[22] = t10;
+		$[23] = t11;
+		$[24] = t12;
+		$[25] = t7;
+		$[26] = t8;
+		$[27] = t9;
+		$[28] = t20;
+	} else t20 = $[28];
+	let t21;
+	if ($[29] !== T0 || $[30] !== t13 || $[31] !== t14 || $[32] !== t15 || $[33] !== t16 || $[34] !== t17 || $[35] !== t18 || $[36] !== t19 || $[37] !== t20) {
+		t21 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(T0, {
+			ref: t13,
+			direction: t14,
+			gap: t15,
+			width: t16,
+			className: t17,
+			style: t18,
+			children: [t19, t20]
+		});
+		$[29] = T0;
+		$[30] = t13;
+		$[31] = t14;
+		$[32] = t15;
+		$[33] = t16;
+		$[34] = t17;
+		$[35] = t18;
+		$[36] = t19;
+		$[37] = t20;
+		$[38] = t21;
+	} else t21 = $[38];
+	return t21;
+};
+//#endregion
 //#region src/components/ds-radio-group/ds-radio-group.module.scss
 var ds_radio_group_module_default = {
 	"labelInfo": "gJbMxW_labelInfo",
@@ -17311,71 +17939,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 +19415,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 +19542,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 +19698,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, {
@@ -19052,6 +19770,7 @@ var ds_table_module_default = {
 //#region src/components/ds-table/components/edit/ds-table-editable-cell/ds-table-editable-cell.module.scss
 var ds_table_editable_cell_module_default = {
 	"editButton": "g5FEoW_editButton",
+	"lockIcon": "g5FEoW_lockIcon",
 	"root": "g5FEoW_root"
 };
 //#endregion
@@ -19063,6 +19782,26 @@ const DsTableEditableCell = ({ cell, children }) => {
 		event.stopPropagation();
 		beginEdit(cell);
 	};
+	const editDisabled = cell.column.columnDef.editDisabled?.(cell.getContext());
+	const locked = editDisabled === true || typeof editDisabled === "object";
+	const reason = typeof editDisabled === "object" ? editDisabled.reason : void 0;
+	if (locked) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: ds_table_editable_cell_module_default.root,
+		"data-locked": "",
+		children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTooltip, {
+			content: reason,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: ds_table_editable_cell_module_default.lockIcon,
+				"aria-label": "Editing disabled",
+				role: "img",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsIcon, {
+					icon: "lock",
+					size: "small",
+					color: "secondary"
+				})
+			})
+		})]
+	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: ds_table_editable_cell_module_default.root,
 		"data-active": isEditing ? "" : void 0,
@@ -19264,7 +20003,9 @@ var ds_table_row_module_default = {
 	"expandableCell": "t8OZCq_expandableCell",
 	"expanded": "t8OZCq_expanded",
 	"expandedRow": "t8OZCq_expandedRow",
+	"groupStart": "t8OZCq_groupStart",
 	"isDragging": "t8OZCq_isDragging",
+	"loadingRow": "t8OZCq_loadingRow",
 	"rowDragHandle": "t8OZCq_rowDragHandle",
 	"rowNoBorder": "t8OZCq_rowNoBorder",
 	"selectableCell": "t8OZCq_selectableCell",
@@ -19291,7 +20032,7 @@ const DsRowDragHandle = ({ isDragging, attributes, listeners, style }) => {
 	});
 };
 const DsTableRow = ({ ref, row, isSelected }) => {
-	const { reorderable, onRowClick, onRowDoubleClick, renderExpandedRow, bordered, rowSize, primaryRowActions, secondaryRowActions, activeRowId } = useDsTableContext();
+	const { reorderable, onRowClick, onRowDoubleClick, renderExpandedRow, bordered, rowSize, primaryRowActions, secondaryRowActions, activeRowId, loading } = useDsTableContext();
 	const isExpanded = row.getIsExpanded();
 	const isActive = activeRowId === row.id;
 	const { attributes, listeners, setNodeRef, transform, transition, isDragging } = (0, _dnd_kit_sortable.useSortable)({
@@ -19315,7 +20056,7 @@ const DsTableRow = ({ ref, row, isSelected }) => {
 			[ds_table_row_module_default.sizeSmall]: rowSize === "small",
 			[ds_table_row_module_default.sizeMedium]: rowSize === "medium",
 			[ds_table_row_module_default.sizeLarge]: rowSize === "large"
-		}, onRowClick && ds_table_row_module_default.clickableRow, !bordered && ds_table_row_module_default.rowNoBorder, isExpanded && ds_table_row_module_default.expanded),
+		}, onRowClick && ds_table_row_module_default.clickableRow, !bordered && ds_table_row_module_default.rowNoBorder, isExpanded && ds_table_row_module_default.expanded, loading && ds_table_row_module_default.loadingRow),
 		style: rowStyle,
 		onClick: () => onRowClick?.(row.original),
 		onDoubleClick: () => onRowDoubleClick?.(row.original),
@@ -19329,7 +20070,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 +20204,8 @@ var ds_table_row_virtualized_module_default = {
 	"expanded": "NcME7q_expanded",
 	"expandedRow": "NcME7q_expandedRow",
 	"expandedRowContent": "NcME7q_expandedRowContent",
+	"groupStart": "NcME7q_groupStart",
+	"loadingRow": "NcME7q_loadingRow",
 	"row": "NcME7q_row",
 	"rowNoBorder": "NcME7q_rowNoBorder",
 	"selectableCell": "NcME7q_selectableCell",
@@ -19473,7 +20216,7 @@ var ds_table_row_virtualized_module_default = {
 //#endregion
 //#region src/components/ds-table/components/ds-table-row-virtualized/ds-table-row-virtualized.tsx
 const DsTableRowVirtualized = ({ row, isSelected, rowsMapRef, rowHeightsMapRef, rowVirtualizer, virtualRow, isExpandedRowContent }) => {
-	const { bordered, rowSize, activeRowId, primaryRowActions, secondaryRowActions, renderExpandedRow, onRowClick, onRowDoubleClick } = useDsTableContext();
+	const { bordered, rowSize, activeRowId, primaryRowActions, secondaryRowActions, renderExpandedRow, onRowClick, onRowDoubleClick, loading } = useDsTableContext();
 	const isExpanded = row.getIsExpanded();
 	const isActive = activeRowId === row.id;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableRow, {
@@ -19492,14 +20235,14 @@ const DsTableRowVirtualized = ({ row, isSelected, rowsMapRef, rowHeightsMapRef,
 			[ds_table_row_virtualized_module_default.sizeSmall]: rowSize === "small",
 			[ds_table_row_virtualized_module_default.sizeMedium]: rowSize === "medium",
 			[ds_table_row_virtualized_module_default.sizeLarge]: rowSize === "large"
-		}, isExpandedRowContent && ds_table_row_virtualized_module_default.expandedRowContent, onRowClick && ds_table_row_virtualized_module_default.clickableRow, !bordered && ds_table_row_virtualized_module_default.rowNoBorder, isExpanded && ds_table_row_virtualized_module_default.expanded),
+		}, isExpandedRowContent && ds_table_row_virtualized_module_default.expandedRowContent, onRowClick && ds_table_row_virtualized_module_default.clickableRow, !bordered && ds_table_row_virtualized_module_default.rowNoBorder, isExpanded && ds_table_row_virtualized_module_default.expanded, loading && ds_table_row_virtualized_module_default.loadingRow),
 		onClick: isExpandedRowContent ? void 0 : () => onRowClick?.(row.original),
 		onDoubleClick: isExpandedRowContent ? void 0 : () => onRowDoubleClick?.(row.original),
 		children: isExpandedRowContent ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableCell, { children: renderExpandedRow?.(row.original) }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: row.getVisibleCells().map((cell, idx) => {
 			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 +20352,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 +20368,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 +20389,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", loading = false, 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 +20410,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);
@@ -19728,9 +20481,20 @@ const DsTable = ({ ref, columns: columnsProp, data: tableData, virtualized = fal
 		hasSelectColumn,
 		showSelectAllCheckbox
 	]);
+	const skeletonColumns = (0, react.useMemo)(() => {
+		const toSkeleton = (cols) => cols.map((column) => "columns" in column && column.columns ? {
+			...column,
+			columns: toSkeleton(column.columns)
+		} : {
+			...column,
+			cell: column.loadingCell ?? (() => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsSkeletonText, { width: "60%" }))
+		});
+		return toSkeleton(columns);
+	}, [columns]);
+	const skeletonData = (0, react.useMemo)(() => Array.from({ length: 5 }, (_, i) => ({ id: `ds-table-skeleton-${String(i)}` })), []);
 	const table = (0, _tanstack_react_table.useReactTable)({
-		data: reorderable ? data : tableData,
-		columns,
+		data: loading ? skeletonData : reorderable ? data : tableData,
+		columns: loading ? skeletonColumns : columns,
 		getCoreRowModel: (0, _tanstack_react_table.getCoreRowModel)(),
 		onSortingChange: handleSortingChange,
 		getSortedRowModel: (0, _tanstack_react_table.getSortedRowModel)(),
@@ -19796,6 +20560,7 @@ const DsTable = ({ ref, columns: columnsProp, data: tableData, virtualized = fal
 	}) });
 	const selectedRows = Object.entries(rowSelection).filter(([, selected]) => selected).map(([key]) => rowsById[key]?.original).filter((v) => !!v);
 	const isBulkActionsVisible = selectable && actions.length > 0 && selectedRows.length > 0;
+	const editingState = useEditingState(onCellEdit, onCellValidate);
 	const contextValue = {
 		stickyHeader,
 		bordered,
@@ -19805,15 +20570,19 @@ const DsTable = ({ ref, columns: columnsProp, data: tableData, virtualized = fal
 		selectable,
 		reorderable,
 		showSelectAllCheckbox,
-		onRowClick,
-		onRowDoubleClick,
+		loading,
+		onRowClick: loading ? void 0 : onRowClick,
+		onRowDoubleClick: loading ? void 0 : onRowDoubleClick,
 		primaryRowActions,
 		secondaryRowActions,
 		renderExpandedRow,
 		virtualized,
 		activeRowId,
+		collapsedColumnGroups,
+		onToggleColumnGroup: toggleColumnGroup,
+		locale,
 		onCellEdit,
-		...useEditingState(onCellEdit, onCellValidate)
+		...editingState
 	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTableContext.Provider, {
 		value: contextValue,
@@ -21434,6 +22203,7 @@ exports.DsPopover = DsPopover;
 exports.DsProgressArc = DsProgressArc;
 exports.DsProgressDonut = DsProgressDonut;
 exports.DsProgressLinear = DsProgressLinear;
+exports.DsProgressTaskBar = DsProgressTaskBar;
 exports.DsRadioGroup = DsRadioGroup;
 exports.DsRadioGroupLegacy = DsRadioGroupLegacy;
 exports.DsSegmentGroup = DsSegmentGroup;
@@ -21493,6 +22263,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 +22274,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;
@@ -21520,6 +22293,7 @@ exports.statusBadgeV2Variants = statusBadgeV2Variants;
 exports.systemStatuses = systemStatuses;
 exports.tagSizes = tagSizes;
 exports.tagVariants = tagVariants;
+exports.taskBarStatuses = taskBarStatuses;
 exports.textInputSizes = textInputSizes;
 exports.useBreakpoint = useBreakpoint;
 exports.useCellEditor = useCellEditor;