@drivenets/design-system 0.12.1 → 0.14.0

package/dist/index.cjs

@@ -52,8 +52,6 @@ let _ark_ui_react_popover = require("@ark-ui/react/popover");
 let _ark_ui_react_select = require("@ark-ui/react/select");
 let _radix_ui_react_collapsible = require("@radix-ui/react-collapsible");
 _radix_ui_react_collapsible = __toESM(_radix_ui_react_collapsible);
-let _radix_ui_react_popover = require("@radix-ui/react-popover");
-_radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 let _ark_ui_react_radio_group = require("@ark-ui/react/radio-group");
 let _ark_ui_react_segment_group = require("@ark-ui/react/segment-group");
 let _zag_js_steps = require("@zag-js/steps");
@@ -3225,7 +3223,7 @@ const Title$2 = (t0) => {
 	} else t2 = $[5];
 	return t2;
 };
-const Body$4 = (t0) => {
+const Body$5 = (t0) => {
 	const $ = (0, react_compiler_runtime.c)(6);
 	const { style, className, children } = t0;
 	let t1;
@@ -3273,7 +3271,7 @@ const Actions$3 = (t0) => {
 	return t2;
 };
 DsAlertBanner.Title = Title$2;
-DsAlertBanner.Body = Body$4;
+DsAlertBanner.Body = Body$5;
 DsAlertBanner.Actions = Actions$3;
 //#endregion
 //#region src/components/ds-alert-banner/ds-alert-banner.types.ts
@@ -5549,7 +5547,7 @@ const Header$4 = (t0) => {
 /**
 * Card body - main content area.
 */
-const Body$3 = (t0) => {
+const Body$4 = (t0) => {
 	const $ = (0, react_compiler_runtime.c)(12);
 	let children;
 	let className;
@@ -5637,7 +5635,7 @@ const Footer$3 = (t0) => {
 const DsCard = {
 	Root: Root$2,
 	Header: Header$4,
-	Body: Body$3,
+	Body: Body$4,
 	Footer: Footer$3
 };
 //#endregion
@@ -5675,7 +5673,7 @@ const useDsCatalogLayoutContext = () => {
 };
 //#endregion
 //#region src/components/ds-catalog-layout/ds-catalog-layout.tsx
-const DEFAULT_LOCALE = Object.freeze({
+const DEFAULT_LOCALE$1 = Object.freeze({
 	pinButtonLabel: "Pin side menu",
 	unpinButtonLabel: "Unpin side menu"
 });
@@ -5780,7 +5778,7 @@ const Header$3 = (t0) => {
 	} else t2 = $[7];
 	return t2;
 };
-const Body$2 = (t0) => {
+const Body$3 = (t0) => {
 	const $ = (0, react_compiler_runtime.c)(8);
 	let className;
 	let rest;
@@ -5811,7 +5809,7 @@ const Body$2 = (t0) => {
 	} else t2 = $[7];
 	return t2;
 };
-const SideMenu = (t0) => {
+const SideMenu$1 = (t0) => {
 	const $ = (0, react_compiler_runtime.c)(32);
 	let children;
 	let className;
@@ -5857,7 +5855,7 @@ const SideMenu = (t0) => {
 	}
 	(0, react.useEffect)(t2, t3);
 	const isExpanded = pinned || isHovering;
-	const ariaLabel = pinned ? locale?.unpinButtonLabel ?? DEFAULT_LOCALE.unpinButtonLabel : locale?.pinButtonLabel ?? DEFAULT_LOCALE.pinButtonLabel;
+	const ariaLabel = pinned ? locale?.unpinButtonLabel ?? DEFAULT_LOCALE$1.unpinButtonLabel : locale?.pinButtonLabel ?? DEFAULT_LOCALE$1.pinButtonLabel;
 	let t4;
 	if ($[11] !== className) {
 		t4 = (0, classnames.default)(ds_catalog_layout_module_default.sideMenu, className);
@@ -6050,8 +6048,8 @@ const ContentHeader = (t0) => {
 	return t6;
 };
 DsCatalogLayout.Header = Header$3;
-DsCatalogLayout.Body = Body$2;
-DsCatalogLayout.SideMenu = SideMenu;
+DsCatalogLayout.Body = Body$3;
+DsCatalogLayout.SideMenu = SideMenu$1;
 DsCatalogLayout.Content = Content$1;
 DsCatalogLayout.ContentHeader = ContentHeader;
 //#endregion
@@ -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
@@ -8278,6 +8363,78 @@ var ds_drawer_module_default = {
 	"toolbar": "MWmQHa_toolbar"
 };
 //#endregion
+//#region src/utils/restore-document-body-modal-styles.ts
+const SCROLL_LOCK_ATTRIBUTE = "data-scroll-lock";
+const INERT_ATTRIBUTE = "data-inert";
+const ARIA_HIDDEN_MARKER = "data-aria-hidden";
+/**
+* Clears document body styles and attributes left by Zag dialog modal effects when a
+* dialog instance tears down without a normal close transition.
+*
+* No-op unless a leak sentinel is present: in the common case Zag restores the body on
+* unmount itself, and we must not clobber styles the host app owns.
+*/
+const restoreDocumentBodyModalStyles = (doc = document) => {
+	const { body, documentElement } = doc;
+	if (!(body.hasAttribute(SCROLL_LOCK_ATTRIBUTE) || body.hasAttribute(INERT_ATTRIBUTE) || body.style.pointerEvents === "none")) return;
+	body.removeAttribute(SCROLL_LOCK_ATTRIBUTE);
+	body.removeAttribute(INERT_ATTRIBUTE);
+	body.removeAttribute(ARIA_HIDDEN_MARKER);
+	if (body.getAttribute("aria-hidden") === "true") body.removeAttribute("aria-hidden");
+	body.style.removeProperty("overflow");
+	body.style.removeProperty("pointer-events");
+	body.style.removeProperty("position");
+	body.style.removeProperty("top");
+	body.style.removeProperty("left");
+	body.style.removeProperty("right");
+	if (body.style.length === 0) body.removeAttribute("style");
+	documentElement.style.removeProperty("--scrollbar-width");
+};
+//#endregion
+//#region src/utils/use-ark-dialog-body-lock-cleanup.ts
+const activeBodyLockInstances = /* @__PURE__ */ new Set();
+const scheduleBodyLockRestoreIfIdle = () => {
+	queueMicrotask(() => {
+		if (activeBodyLockInstances.size > 0) return;
+		restoreDocumentBodyModalStyles();
+	});
+};
+/**
+* Ensures Zag dialog body scroll-lock and modal pointer blocking are released when
+* an Ark dialog unmounts while still open (e.g. close + conditional unmount + navigate).
+*/
+const useArkDialogBodyLockCleanup = (open, enabled) => {
+	const $ = (0, react_compiler_runtime.c)(5);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = Symbol("ark-dialog-body-lock");
+		$[0] = t0;
+	} else t0 = $[0];
+	const instanceIdRef = (0, react.useRef)(t0);
+	let t1;
+	let t2;
+	if ($[1] !== enabled || $[2] !== open) {
+		t1 = () => {
+			if (!open || !enabled) return;
+			const instanceId = instanceIdRef.current;
+			activeBodyLockInstances.add(instanceId);
+			return () => {
+				activeBodyLockInstances.delete(instanceId);
+				scheduleBodyLockRestoreIfIdle();
+			};
+		};
+		t2 = [open, enabled];
+		$[1] = enabled;
+		$[2] = open;
+		$[3] = t1;
+		$[4] = t2;
+	} else {
+		t1 = $[3];
+		t2 = $[4];
+	}
+	(0, react.useLayoutEffect)(t1, t2);
+};
+//#endregion
 //#region src/components/ds-drawer/ds-drawer.tsx
 const DsDrawer = (t0) => {
 	const $ = (0, react_compiler_runtime.c)(25);
@@ -8289,6 +8446,7 @@ const DsDrawer = (t0) => {
 	const closeOnInteractOutside = t5 === void 0 ? false : t5;
 	const portal = t6 === void 0 ? false : t6;
 	const resolvedColumns = useResponsiveValue(columns);
+	useArkDialogBodyLockCleanup(open, backdrop);
 	let t7;
 	if ($[0] !== onOpenChange) {
 		t7 = (details) => {
@@ -8477,7 +8635,7 @@ const Toolbar = (t0) => {
 	} else t2 = $[5];
 	return t2;
 };
-const Body$1 = (t0) => {
+const Body$2 = (t0) => {
 	const $ = (0, react_compiler_runtime.c)(6);
 	const { style, className, children } = t0;
 	let t1;
@@ -8550,7 +8708,7 @@ DsDrawer.Header = Header$2;
 DsDrawer.Title = Title$1;
 DsDrawer.CloseTrigger = CloseTrigger$1;
 DsDrawer.Toolbar = Toolbar;
-DsDrawer.Body = Body$1;
+DsDrawer.Body = Body$2;
 DsDrawer.Footer = Footer$2;
 DsDrawer.Actions = Actions$1;
 //#endregion
@@ -8760,87 +8918,86 @@ const DsTagFilter = (t0) => {
 	if (items.length === 0) return null;
 	let t9;
 	if ($[9] !== onItemDelete || $[10] !== onItemSelect) {
-		t9 = (item) => {
-			return /* @__PURE__ */ (0, react.createElement)(DsTag, {
-				...item.slotProps?.tag || {},
-				key: item.id,
-				label: item.label,
-				selected: item.selected,
-				onClick: onItemSelect ? () => onItemSelect(item) : void 0,
-				onDelete: onItemDelete ? () => onItemDelete(item) : void 0
-			});
-		};
+		t9 = (item) => ({
+			...item.slotProps?.tag,
+			label: item.label,
+			selected: item.selected,
+			onClick: onItemSelect ? () => onItemSelect(item) : void 0,
+			onDelete: onItemDelete ? () => onItemDelete(item) : void 0
+		});
 		$[9] = onItemDelete;
 		$[10] = onItemSelect;
 		$[11] = t9;
 	} else t9 = $[11];
-	const renderTag = t9;
+	const buildTagProps = t9;
 	let t10;
-	if ($[12] !== expanded || $[13] !== onExpand) {
-		t10 = () => {
+	if ($[12] !== buildTagProps) {
+		t10 = (item_0) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTag, { ...buildTagProps(item_0) }, item_0.id);
+		$[12] = buildTagProps;
+		$[13] = t10;
+	} else t10 = $[13];
+	const renderTag = t10;
+	let t11;
+	if ($[14] !== expanded || $[15] !== onExpand) {
+		t11 = () => {
 			const newExpanded = !expanded;
 			setExpanded(newExpanded);
 			onExpand?.(newExpanded);
 		};
-		$[12] = expanded;
-		$[13] = onExpand;
-		$[14] = t10;
-	} else t10 = $[14];
-	const handleExpandToggle = t10;
-	let t11;
-	if ($[15] !== items || $[16] !== onItemDelete || $[17] !== onItemSelect) {
-		let t12;
-		if ($[19] !== onItemDelete || $[20] !== onItemSelect) {
-			t12 = (item_0) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTag, {
-				"data-measure-tag": "",
-				label: item_0.label,
-				selected: item_0.selected,
-				onClick: onItemSelect ? () => onItemSelect(item_0) : void 0,
-				onDelete: onItemDelete ? () => onItemDelete(item_0) : void 0
-			}, item_0.id);
-			$[19] = onItemDelete;
-			$[20] = onItemSelect;
-			$[21] = t12;
-		} else t12 = $[21];
-		t11 = items.map(t12);
-		$[15] = items;
-		$[16] = onItemDelete;
-		$[17] = onItemSelect;
-		$[18] = t11;
-	} else t11 = $[18];
+		$[14] = expanded;
+		$[15] = onExpand;
+		$[16] = t11;
+	} else t11 = $[16];
+	const handleExpandToggle = t11;
 	let t12;
-	if ($[22] !== t11) {
-		t12 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	if ($[17] !== buildTagProps || $[18] !== items) {
+		let t13;
+		if ($[20] !== buildTagProps) {
+			t13 = (item_1) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTag, {
+				"data-measure-tag": "",
+				...buildTagProps(item_1)
+			}, item_1.id);
+			$[20] = buildTagProps;
+			$[21] = t13;
+		} else t13 = $[21];
+		t12 = items.map(t13);
+		$[17] = buildTagProps;
+		$[18] = items;
+		$[19] = t12;
+	} else t12 = $[19];
+	let t13;
+	if ($[22] !== t12) {
+		t13 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			ref: measurementRef,
 			className: ds_tag_filter_module_default.measurementContainer,
 			"aria-hidden": "true",
-			children: t11
+			children: t12
 		});
-		$[22] = t11;
-		$[23] = t12;
-	} else t12 = $[23];
-	const measurementContainer = t12;
-	const t13 = expanded && ds_tag_filter_module_default.expanded;
-	let t14;
-	if ($[24] !== className || $[25] !== t13) {
-		t14 = (0, classnames.default)(ds_tag_filter_module_default.container, t13, className);
-		$[24] = className;
-		$[25] = t13;
-		$[26] = t14;
-	} else t14 = $[26];
+		$[22] = t12;
+		$[23] = t13;
+	} else t13 = $[23];
+	const measurementContainer = t13;
+	const t14 = expanded && ds_tag_filter_module_default.expanded;
 	let t15;
+	if ($[24] !== className || $[25] !== t14) {
+		t15 = (0, classnames.default)(ds_tag_filter_module_default.container, t14, className);
+		$[24] = className;
+		$[25] = t14;
+		$[26] = t15;
+	} else t15 = $[26];
+	let t16;
 	if ($[27] !== label) {
-		t15 = label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTypography, {
+		t16 = label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTypography, {
 			variant: "body-sm-reg",
 			className: ds_tag_filter_module_default.label,
 			children: label
 		});
 		$[27] = label;
-		$[28] = t15;
-	} else t15 = $[28];
-	let t16;
+		$[28] = t16;
+	} else t16 = $[28];
+	let t17;
 	if ($[29] !== expanded || $[30] !== handleExpandToggle || $[31] !== hasOverflow || $[32] !== hiddenCount || $[33] !== showLess || $[34] !== showMore) {
-		t16 = hasOverflow && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DsButton, {
+		t17 = hasOverflow && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DsButton, {
 			design: "v1.2",
 			buttonType: "tertiary",
 			variant: "ghost",
@@ -8856,11 +9013,11 @@ const DsTagFilter = (t0) => {
 		$[32] = hiddenCount;
 		$[33] = showLess;
 		$[34] = showMore;
-		$[35] = t16;
-	} else t16 = $[35];
-	let t17;
+		$[35] = t17;
+	} else t17 = $[35];
+	let t18;
 	if ($[36] !== clearButton || $[37] !== onClearAll) {
-		t17 = onClearAll && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DsButton, {
+		t18 = onClearAll && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DsButton, {
 			design: "v1.2",
 			buttonType: "tertiary",
 			variant: "ghost",
@@ -8872,78 +9029,78 @@ const DsTagFilter = (t0) => {
 		});
 		$[36] = clearButton;
 		$[37] = onClearAll;
-		$[38] = t17;
-	} else t17 = $[38];
-	let t18;
-	if ($[39] !== t16 || $[40] !== t17) {
-		t18 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: ds_tag_filter_module_default.headerActions,
-			children: [t16, t17]
-		});
-		$[39] = t16;
-		$[40] = t17;
-		$[41] = t18;
-	} else t18 = $[41];
+		$[38] = t18;
+	} else t18 = $[38];
 	let t19;
-	if ($[42] !== t15 || $[43] !== t18) {
+	if ($[39] !== t17 || $[40] !== t18) {
 		t19 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: ds_tag_filter_module_default.header,
-			children: [t15, t18]
+			className: ds_tag_filter_module_default.headerActions,
+			children: [t17, t18]
 		});
-		$[42] = t15;
-		$[43] = t18;
-		$[44] = t19;
-	} else t19 = $[44];
+		$[39] = t17;
+		$[40] = t18;
+		$[41] = t19;
+	} else t19 = $[41];
 	let t20;
+	if ($[42] !== t16 || $[43] !== t19) {
+		t20 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: ds_tag_filter_module_default.header,
+			children: [t16, t19]
+		});
+		$[42] = t16;
+		$[43] = t19;
+		$[44] = t20;
+	} else t20 = $[44];
+	let t21;
 	if ($[45] !== renderTag || $[46] !== visibleTags) {
-		let t21;
+		let t22;
 		if ($[48] !== renderTag) {
-			t21 = (item_1) => renderTag(item_1);
+			t22 = (item_2) => renderTag(item_2);
 			$[48] = renderTag;
-			$[49] = t21;
-		} else t21 = $[49];
-		t20 = visibleTags.map(t21);
+			$[49] = t22;
+		} else t22 = $[49];
+		t21 = visibleTags.map(t22);
 		$[45] = renderTag;
 		$[46] = visibleTags;
-		$[47] = t20;
-	} else t20 = $[47];
-	let t21;
-	if ($[50] !== t20) {
-		t21 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		$[47] = t21;
+	} else t21 = $[47];
+	let t22;
+	if ($[50] !== t21) {
+		t22 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: ds_tag_filter_module_default.tagsArea,
-			children: t20
+			children: t21
 		});
-		$[50] = t20;
-		$[51] = t21;
-	} else t21 = $[51];
-	let t22;
-	if ($[52] !== style || $[53] !== t14 || $[54] !== t19 || $[55] !== t21) {
-		t22 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		$[50] = t21;
+		$[51] = t22;
+	} else t22 = $[51];
+	let t23;
+	if ($[52] !== style || $[53] !== t15 || $[54] !== t20 || $[55] !== t22) {
+		t23 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			ref: containerRef,
-			className: t14,
+			className: t15,
 			style,
-			children: [t19, t21]
+			children: [t20, t22]
 		});
 		$[52] = style;
-		$[53] = t14;
-		$[54] = t19;
-		$[55] = t21;
-		$[56] = t22;
-	} else t22 = $[56];
-	let t23;
+		$[53] = t15;
+		$[54] = t20;
+		$[55] = t22;
+		$[56] = t23;
+	} else t23 = $[56];
+	let t24;
 	if ($[57] !== measurementContainer) {
-		t23 = (0, react_dom.createPortal)(measurementContainer, document.body);
+		t24 = (0, react_dom.createPortal)(measurementContainer, document.body);
 		$[57] = measurementContainer;
-		$[58] = t23;
-	} else t23 = $[58];
-	let t24;
-	if ($[59] !== t22 || $[60] !== t23) {
-		t24 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [t22, t23] });
-		$[59] = t22;
-		$[60] = t23;
-		$[61] = t24;
-	} else t24 = $[61];
-	return t24;
+		$[58] = t24;
+	} else t24 = $[58];
+	let t25;
+	if ($[59] !== t23 || $[60] !== t24) {
+		t25 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [t23, t24] });
+		$[59] = t23;
+		$[60] = t24;
+		$[61] = t25;
+	} else t25 = $[61];
+	return t25;
 };
 //#endregion
 //#region src/components/ds-comments-drawer/comments-filters.ts
@@ -9098,6 +9255,7 @@ const DsModal = (t0) => {
 	const dividers = t2 === void 0 ? false : t2;
 	const modal = t3 === void 0 ? true : t3;
 	const closeOnInteractOutside = t4 === void 0 ? false : t4;
+	useArkDialogBodyLockCleanup(open, modal);
 	let t5;
 	if ($[0] !== onOpenChange) {
 		t5 = (details) => {
@@ -9244,7 +9402,7 @@ const CloseTrigger = (t0) => {
 	} else t2 = $[3];
 	return t2;
 };
-const Body = (t0) => {
+const Body$1 = (t0) => {
 	const $ = (0, react_compiler_runtime.c)(6);
 	const { style, className, children } = t0;
 	let t1;
@@ -9316,7 +9474,7 @@ const Actions = (t0) => {
 DsModal.Header = Header$1;
 DsModal.Title = Title;
 DsModal.CloseTrigger = CloseTrigger;
-DsModal.Body = Body;
+DsModal.Body = Body$1;
 DsModal.Footer = Footer$1;
 DsModal.Actions = Actions;
 //#endregion
@@ -13160,66 +13318,50 @@ const DsFormControlDescription = (t0) => {
 	return t2;
 };
 const DsFormControl = (t0) => {
-	const $ = (0, react_compiler_runtime.c)(28);
-	const { id, status, label, required: t1, slots, message, messageIcon: t2, className, style, children } = t0;
-	const required = t1 === void 0 ? false : t1;
-	const messageIcon = t2 === void 0 ? "info" : t2;
+	const $ = (0, react_compiler_runtime.c)(23);
+	const { id, status, label, hideLabel: t1, required: t2, slots, message, messageIcon: t3, className, style, children } = t0;
+	const hideLabel = t1 === void 0 ? false : t1;
+	const required = t2 === void 0 ? false : t2;
+	const messageIcon = t3 === void 0 ? "info" : t3;
 	const generatedId = (0, react.useId)();
 	const controlId = id || generatedId;
-	let t3;
+	let t4;
 	if ($[0] !== controlId) {
-		t3 = { controlId };
+		t4 = { controlId };
 		$[0] = controlId;
-		$[1] = t3;
-	} else t3 = $[1];
-	const t4 = status && message && ds_form_control_module_default[status];
-	let t5;
-	if ($[2] !== className || $[3] !== t4) {
-		t5 = (0, classnames.default)(ds_form_control_module_default.container, className, t4);
+		$[1] = t4;
+	} else t4 = $[1];
+	const t5 = status && message && ds_form_control_module_default[status];
+	let t6;
+	if ($[2] !== className || $[3] !== t5) {
+		t6 = (0, classnames.default)(ds_form_control_module_default.container, className, t5);
 		$[2] = className;
-		$[3] = t4;
-		$[4] = t5;
-	} else t5 = $[4];
-	let t6;
-	if ($[5] !== required) {
-		t6 = (0, classnames.default)(ds_form_control_module_default.label, { [ds_form_control_module_default.required]: required });
-		$[5] = required;
-		$[6] = t6;
-	} else t6 = $[6];
+		$[3] = t5;
+		$[4] = t6;
+	} else t6 = $[4];
 	let t7;
-	if ($[7] !== controlId || $[8] !== label || $[9] !== t6) {
-		t7 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
-			htmlFor: controlId,
-			className: t6,
-			children: label
+	if ($[5] !== controlId || $[6] !== hideLabel || $[7] !== label || $[8] !== required || $[9] !== slots) {
+		t7 = !hideLabel && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: ds_form_control_module_default.labelContainer,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+				htmlFor: controlId,
+				className: (0, classnames.default)(ds_form_control_module_default.label, { [ds_form_control_module_default.required]: required }),
+				children: label
+			}), slots?.endAdornment && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: ds_form_control_module_default.endAdornment,
+				children: slots.endAdornment
+			})]
 		});
-		$[7] = controlId;
-		$[8] = label;
-		$[9] = t6;
+		$[5] = controlId;
+		$[6] = hideLabel;
+		$[7] = label;
+		$[8] = required;
+		$[9] = slots;
 		$[10] = t7;
 	} else t7 = $[10];
 	let t8;
-	if ($[11] !== slots) {
-		t8 = slots?.endAdornment && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: ds_form_control_module_default.endAdornment,
-			children: slots.endAdornment
-		});
-		$[11] = slots;
-		$[12] = t8;
-	} else t8 = $[12];
-	let t9;
-	if ($[13] !== t7 || $[14] !== t8) {
-		t9 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: ds_form_control_module_default.labelContainer,
-			children: [t7, t8]
-		});
-		$[13] = t7;
-		$[14] = t8;
-		$[15] = t9;
-	} else t9 = $[15];
-	let t10;
-	if ($[16] !== message || $[17] !== messageIcon) {
-		t10 = message && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+	if ($[11] !== message || $[12] !== messageIcon) {
+		t8 = message && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: ds_form_control_module_default.message,
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsIcon, {
 				icon: messageIcon,
@@ -13227,39 +13369,39 @@ const DsFormControl = (t0) => {
 				filled: true
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: message })]
 		});
-		$[16] = message;
-		$[17] = messageIcon;
-		$[18] = t10;
-	} else t10 = $[18];
-	let t11;
-	if ($[19] !== children || $[20] !== style || $[21] !== t10 || $[22] !== t5 || $[23] !== t9) {
-		t11 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: t5,
+		$[11] = message;
+		$[12] = messageIcon;
+		$[13] = t8;
+	} else t8 = $[13];
+	let t9;
+	if ($[14] !== children || $[15] !== style || $[16] !== t6 || $[17] !== t7 || $[18] !== t8) {
+		t9 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: t6,
 			style,
 			children: [
-				t9,
+				t7,
 				children,
-				t10
+				t8
 			]
 		});
-		$[19] = children;
-		$[20] = style;
-		$[21] = t10;
-		$[22] = t5;
-		$[23] = t9;
-		$[24] = t11;
-	} else t11 = $[24];
-	let t12;
-	if ($[25] !== t11 || $[26] !== t3) {
-		t12 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FormControlContext.Provider, {
-			value: t3,
-			children: t11
+		$[14] = children;
+		$[15] = style;
+		$[16] = t6;
+		$[17] = t7;
+		$[18] = t8;
+		$[19] = t9;
+	} else t9 = $[19];
+	let t10;
+	if ($[20] !== t4 || $[21] !== t9) {
+		t10 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FormControlContext.Provider, {
+			value: t4,
+			children: t9
 		});
-		$[25] = t11;
-		$[26] = t3;
-		$[27] = t12;
-	} else t12 = $[27];
-	return t12;
+		$[20] = t4;
+		$[21] = t9;
+		$[22] = t10;
+	} else t10 = $[22];
+	return t10;
 };
 DsFormControl.TextInput = controlify(DsTextInput);
 DsFormControl.NumberInput = controlify(DsNumberInput);
@@ -15429,155 +15571,428 @@ const DsPanel = withResponsiveProps(DsPanelBase, ["width"]);
 //#endregion
 //#region src/components/ds-popover/ds-popover.module.scss
 var ds_popover_module_default = {
-	"arrow": "Xt6oSq_arrow",
-	"content": "Xt6oSq_content"
+	"content": "Xt6oSq_content",
+	"ds-popover-in": "Xt6oSq_ds-popover-in",
+	"footer": "Xt6oSq_footer",
+	"header": "Xt6oSq_header",
+	"headerIcon": "Xt6oSq_headerIcon",
+	"panel": "Xt6oSq_panel",
+	"title": "Xt6oSq_title"
 };
 //#endregion
 //#region src/components/ds-popover/ds-popover.tsx
-const DsPopover = (t0) => {
-	const $ = (0, react_compiler_runtime.c)(13);
-	const { trigger, children, className, align: t1, side: t2 } = t0;
-	const align = t1 === void 0 ? "center" : t1;
-	const side = t2 === void 0 ? "top" : t2;
-	let t3;
-	if ($[0] !== trigger) {
-		t3 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_popover.Trigger, {
-			asChild: true,
-			children: trigger
-		});
-		$[0] = trigger;
-		$[1] = t3;
-	} else t3 = $[1];
-	let t4;
-	if ($[2] !== className) {
-		t4 = (0, classnames.default)(ds_popover_module_default.content, className);
-		$[2] = className;
-		$[3] = t4;
-	} else t4 = $[3];
+const DEFAULT_PANEL_WIDTH = 400;
+const toPlacement = (side, align) => align === "center" ? side : `${side}-${align}`;
+const DsPopoverRoot = (t0) => {
+	const $ = (0, react_compiler_runtime.c)(15);
+	const { open, defaultOpen, side: t1, align: t2, gutter: t3, modal: t4, children, onOpenChange } = t0;
+	const side = t1 === void 0 ? "bottom" : t1;
+	const align = t2 === void 0 ? "center" : t2;
+	const gutter = t3 === void 0 ? 8 : t3;
+	const modal = t4 === void 0 ? false : t4;
 	let t5;
-	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
-		t5 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_popover.Arrow, { className: ds_popover_module_default.arrow });
-		$[4] = t5;
-	} else t5 = $[4];
+	if ($[0] !== align || $[1] !== side) {
+		t5 = toPlacement(side, align);
+		$[0] = align;
+		$[1] = side;
+		$[2] = t5;
+	} else t5 = $[2];
 	let t6;
-	if ($[5] !== align || $[6] !== children || $[7] !== side || $[8] !== t4) {
-		t6 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_popover.Portal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_radix_ui_react_popover.Content, {
-			side,
-			align,
-			sideOffset: 8,
-			collisionPadding: 16,
-			className: t4,
-			children: [children, t5]
-		}) });
-		$[5] = align;
-		$[6] = children;
-		$[7] = side;
-		$[8] = t4;
-		$[9] = t6;
-	} else t6 = $[9];
+	if ($[3] !== gutter || $[4] !== t5) {
+		t6 = {
+			placement: t5,
+			gutter
+		};
+		$[3] = gutter;
+		$[4] = t5;
+		$[5] = t6;
+	} else t6 = $[5];
 	let t7;
-	if ($[10] !== t3 || $[11] !== t6) {
-		t7 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_radix_ui_react_popover.Root, { children: [t3, t6] });
-		$[10] = t3;
-		$[11] = t6;
-		$[12] = t7;
-	} else t7 = $[12];
-	return t7;
-};
-//#endregion
-//#region src/components/ds-progress-arc/ds-progress-arc.module.scss
-var ds_progress_arc_module_default = {
-	"center": "GIMU2W_center",
-	"default": "GIMU2W_default",
-	"error": "GIMU2W_error",
-	"iconError": "GIMU2W_iconError",
-	"iconMediumSize": "GIMU2W_iconMediumSize",
-	"iconSuccess": "GIMU2W_iconSuccess",
-	"progress": "GIMU2W_progress",
-	"root": "GIMU2W_root",
-	"success": "GIMU2W_success",
-	"svg": "GIMU2W_svg",
-	"track": "GIMU2W_track"
+	if ($[6] !== onOpenChange) {
+		t7 = (details) => onOpenChange?.(details.open);
+		$[6] = onOpenChange;
+		$[7] = t7;
+	} else t7 = $[7];
+	let t8;
+	if ($[8] !== children || $[9] !== defaultOpen || $[10] !== modal || $[11] !== open || $[12] !== t6 || $[13] !== t7) {
+		t8 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react_popover.Popover.Root, {
+			open,
+			defaultOpen,
+			modal,
+			positioning: t6,
+			onOpenChange: t7,
+			children
+		});
+		$[8] = children;
+		$[9] = defaultOpen;
+		$[10] = modal;
+		$[11] = open;
+		$[12] = t6;
+		$[13] = t7;
+		$[14] = t8;
+	} else t8 = $[14];
+	return t8;
 };
-//#endregion
-//#region src/utils/numbers.ts
-const clampValue = (value) => Math.min(100, Math.max(0, value));
-//#endregion
-//#region src/components/ds-progress-arc/utils.ts
-const ARC_DEGREES = 270;
-const FULL_CIRCLE = 360;
-const START_ROTATION = 135;
-const ARC_RATIO = ARC_DEGREES / FULL_CIRCLE;
-const containerSizeMap = Object.freeze({
-	small: 80,
-	medium: 120
-});
-const strokeWidthMap = Object.freeze({
-	small: 4,
-	medium: 6
-});
-const getArcGeometry = (size) => {
-	const containerSize = containerSizeMap[size];
-	const strokeWidth = strokeWidthMap[size];
-	const radius = (containerSize - strokeWidth) / 2;
-	const circumference = 2 * Math.PI * radius;
-	return {
-		containerSize,
-		strokeWidth,
-		radius,
-		circumference,
-		arcLength: ARC_RATIO * circumference,
-		center: containerSize / 2,
-		startRotation: START_ROTATION
-	};
+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 getTrackDasharray = (arcLength, circumference) => `${String(arcLength)} ${String(circumference)}`;
-const getProgressDasharray = (effectiveValue, arcLength, circumference) => {
-	const progressLength = effectiveValue / 100 * arcLength;
-	return `${String(progressLength)} ${String(circumference)}`;
+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;
 };
-//#endregion
-//#region src/components/ds-progress-arc/ds-progress-arc.tsx
-const variantStyleMap$1 = Object.freeze({
-	default: ds_progress_arc_module_default.default,
-	success: ds_progress_arc_module_default.success,
-	error: ds_progress_arc_module_default.error
-});
-const DsProgressArc = (t0) => {
-	const $ = (0, react_compiler_runtime.c)(65);
-	let children;
-	let className;
-	let props;
-	let ref;
-	let style;
+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 ($[0] !== t0) {
-		({value: t1, size: t2, variant: t3, children, className, style, ref, ...props} = t0);
-		$[0] = t0;
-		$[1] = children;
-		$[2] = className;
-		$[3] = props;
-		$[4] = ref;
-		$[5] = style;
-		$[6] = t1;
-		$[7] = t2;
-		$[8] = t3;
-	} else {
-		children = $[1];
-		className = $[2];
-		props = $[3];
-		ref = $[4];
-		style = $[5];
-		t1 = $[6];
-		t2 = $[7];
-		t3 = $[8];
-	}
-	const value = t1 === void 0 ? 0 : t1;
-	const size = t2 === void 0 ? "medium" : t2;
-	const variant = t3 === void 0 ? "default" : t3;
-	let center;
+	if ($[4] !== children) {
+		t3 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react_popover.Popover.Title, {
+			className: ds_popover_module_default.title,
+			asChild: true,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTypography, {
+				variant: "heading3",
+				color: "main",
+				children
+			})
+		});
+		$[4] = children;
+		$[5] = t3;
+	} else t3 = $[5];
+	let t4;
+	if ($[6] !== style || $[7] !== t1 || $[8] !== t2 || $[9] !== t3) {
+		t4 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: t1,
+			style,
+			children: [t2, t3]
+		});
+		$[6] = style;
+		$[7] = t1;
+		$[8] = t2;
+		$[9] = t3;
+		$[10] = t4;
+	} else t4 = $[10];
+	return t4;
+};
+const DsPopoverContent = (t0) => {
+	const $ = (0, react_compiler_runtime.c)(6);
+	const { className, style, children } = t0;
+	let t1;
+	if ($[0] !== className) {
+		t1 = (0, classnames.default)(ds_popover_module_default.content, className);
+		$[0] = className;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== children || $[3] !== style || $[4] !== t1) {
+		t2 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: t1,
+			style,
+			children
+		});
+		$[2] = children;
+		$[3] = style;
+		$[4] = t1;
+		$[5] = t2;
+	} else t2 = $[5];
+	return t2;
+};
+const DsPopoverContentItem = (t0) => {
+	const $ = (0, react_compiler_runtime.c)(11);
+	const { status, headline, className, style, children } = t0;
+	const hasHeader = Boolean(status) || Boolean(headline);
+	let t1;
+	if ($[0] !== hasHeader || $[1] !== headline || $[2] !== status) {
+		t1 = hasHeader && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DsStack, {
+			direction: "row",
+			alignItems: "center",
+			gap: "var(--xs)",
+			children: [status, headline && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTypography, {
+				variant: "body-sm-semi-bold",
+				color: "main",
+				children: headline
+			})]
+		});
+		$[0] = hasHeader;
+		$[1] = headline;
+		$[2] = status;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== children) {
+		t2 = children && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTypography, {
+			variant: "body-sm-reg",
+			color: "main",
+			asChild: true,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsStack, {
+				direction: "row",
+				alignItems: "center",
+				gap: "var(--xs)",
+				children
+			})
+		});
+		$[4] = children;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== className || $[7] !== style || $[8] !== t1 || $[9] !== t2) {
+		t3 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DsStack, {
+			direction: "column",
+			gap: "var(--xs)",
+			className,
+			style,
+			children: [t1, t2]
+		});
+		$[6] = className;
+		$[7] = style;
+		$[8] = t1;
+		$[9] = t2;
+		$[10] = t3;
+	} else t3 = $[10];
+	return t3;
+};
+const DsPopoverFooter = (t0) => {
+	const $ = (0, react_compiler_runtime.c)(6);
+	const { className, style, children } = t0;
+	let t1;
+	if ($[0] !== className) {
+		t1 = (0, classnames.default)(ds_popover_module_default.footer, className);
+		$[0] = className;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== children || $[3] !== style || $[4] !== t1) {
+		t2 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: t1,
+			style,
+			children
+		});
+		$[2] = children;
+		$[3] = style;
+		$[4] = t1;
+		$[5] = t2;
+	} else t2 = $[5];
+	return t2;
+};
+/**
+* Legacy single-element form. Keeps the old call signature and `side` default
+* ('top') compiling and opening, but now renders the new fixed-width panel —
+* styling differs from the old Radix popover and the Radix `Popover.Close`
+* context is no longer wired.
+* @deprecated Migrate to the compound API (`DsPopover.Root` / `.Trigger` / `.Panel`).
+*/
+const DsPopoverLegacy = (t0) => {
+	const $ = (0, react_compiler_runtime.c)(10);
+	const { trigger, children, className, side: t1, align: t2 } = t0;
+	const side = t1 === void 0 ? "top" : t1;
+	const align = t2 === void 0 ? "center" : t2;
+	let t3;
+	if ($[0] !== trigger) {
+		t3 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsPopoverTrigger, { children: trigger });
+		$[0] = trigger;
+		$[1] = t3;
+	} else t3 = $[1];
+	let t4;
+	if ($[2] !== children || $[3] !== className) {
+		t4 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsPopoverPanel, {
+			className,
+			children
+		});
+		$[2] = children;
+		$[3] = className;
+		$[4] = t4;
+	} else t4 = $[4];
+	let t5;
+	if ($[5] !== align || $[6] !== side || $[7] !== t3 || $[8] !== t4) {
+		t5 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DsPopoverRoot, {
+			side,
+			align,
+			children: [t3, t4]
+		});
+		$[5] = align;
+		$[6] = side;
+		$[7] = t3;
+		$[8] = t4;
+		$[9] = t5;
+	} else t5 = $[9];
+	return t5;
+};
+const DsPopover = Object.assign(DsPopoverLegacy, {
+	Root: DsPopoverRoot,
+	Trigger: DsPopoverTrigger,
+	Panel: DsPopoverPanel,
+	Header: DsPopoverHeader,
+	Content: DsPopoverContent,
+	ContentItem: DsPopoverContentItem,
+	Footer: DsPopoverFooter
+});
+//#endregion
+//#region src/components/ds-popover/ds-popover.types.ts
+const popoverSides = [
+	"top",
+	"right",
+	"bottom",
+	"left"
+];
+const popoverAligns = [
+	"start",
+	"center",
+	"end"
+];
+//#endregion
+//#region src/components/ds-progress-arc/ds-progress-arc.module.scss
+var ds_progress_arc_module_default = {
+	"center": "GIMU2W_center",
+	"default": "GIMU2W_default",
+	"error": "GIMU2W_error",
+	"iconError": "GIMU2W_iconError",
+	"iconMediumSize": "GIMU2W_iconMediumSize",
+	"iconSuccess": "GIMU2W_iconSuccess",
+	"progress": "GIMU2W_progress",
+	"root": "GIMU2W_root",
+	"success": "GIMU2W_success",
+	"svg": "GIMU2W_svg",
+	"track": "GIMU2W_track"
+};
+//#endregion
+//#region src/utils/numbers.ts
+const clampValue = (value) => Math.min(100, Math.max(0, value));
+//#endregion
+//#region src/components/ds-progress-arc/utils.ts
+const ARC_DEGREES = 270;
+const FULL_CIRCLE = 360;
+const START_ROTATION = 135;
+const ARC_RATIO = ARC_DEGREES / FULL_CIRCLE;
+const containerSizeMap = Object.freeze({
+	small: 80,
+	medium: 120
+});
+const strokeWidthMap = Object.freeze({
+	small: 4,
+	medium: 6
+});
+const getArcGeometry = (size) => {
+	const containerSize = containerSizeMap[size];
+	const strokeWidth = strokeWidthMap[size];
+	const radius = (containerSize - strokeWidth) / 2;
+	const circumference = 2 * Math.PI * radius;
+	return {
+		containerSize,
+		strokeWidth,
+		radius,
+		circumference,
+		arcLength: ARC_RATIO * circumference,
+		center: containerSize / 2,
+		startRotation: START_ROTATION
+	};
+};
+const getTrackDasharray = (arcLength, circumference) => `${String(arcLength)} ${String(circumference)}`;
+const getProgressDasharray = (effectiveValue, arcLength, circumference) => {
+	const progressLength = effectiveValue / 100 * arcLength;
+	return `${String(progressLength)} ${String(circumference)}`;
+};
+//#endregion
+//#region src/components/ds-progress-arc/ds-progress-arc.tsx
+const variantStyleMap$1 = Object.freeze({
+	default: ds_progress_arc_module_default.default,
+	success: ds_progress_arc_module_default.success,
+	error: ds_progress_arc_module_default.error
+});
+const DsProgressArc = (t0) => {
+	const $ = (0, react_compiler_runtime.c)(65);
+	let children;
+	let className;
+	let props;
+	let ref;
+	let style;
+	let t1;
+	let t2;
+	let t3;
+	if ($[0] !== t0) {
+		({value: t1, size: t2, variant: t3, children, className, style, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = props;
+		$[4] = ref;
+		$[5] = style;
+		$[6] = t1;
+		$[7] = t2;
+		$[8] = t3;
+	} else {
+		children = $[1];
+		className = $[2];
+		props = $[3];
+		ref = $[4];
+		style = $[5];
+		t1 = $[6];
+		t2 = $[7];
+		t3 = $[8];
+	}
+	const value = t1 === void 0 ? 0 : t1;
+	const size = t2 === void 0 ? "medium" : t2;
+	const variant = t3 === void 0 ? "default" : t3;
+	let center;
 	let containerSize;
 	let effectiveValue;
 	let radius;
@@ -17253,91 +17668,26 @@ 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" };
+//#region src/components/ds-status-badge/ds-status-badge.module.scss
+var ds_status_badge_module_default = {
+	"active": "U5k6UG_active",
+	"container": "U5k6UG_container",
+	"draft": "U5k6UG_draft",
+	"failed": "U5k6UG_failed",
+	"ghost": "U5k6UG_ghost",
+	"inactive": "U5k6UG_inactive",
+	"label": "U5k6UG_label",
+	"pending": "U5k6UG_pending",
+	"running": "U5k6UG_running",
+	"small": "U5k6UG_small",
+	"warning": "U5k6UG_warning"
+};
 //#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",
-	"container": "U5k6UG_container",
-	"draft": "U5k6UG_draft",
-	"failed": "U5k6UG_failed",
-	"ghost": "U5k6UG_ghost",
-	"inactive": "U5k6UG_inactive",
-	"label": "U5k6UG_label",
-	"pending": "U5k6UG_pending",
-	"running": "U5k6UG_running",
-	"small": "U5k6UG_small",
-	"warning": "U5k6UG_warning"
-};
-//#endregion
-//#region src/components/ds-status-badge/ds-status-badge.tsx
-/**
-* Design system StatusBadge component
-*/
-const DsStatusBadge = (t0) => {
+//#region src/components/ds-status-badge/ds-status-badge.tsx
+/**
+* Design system StatusBadge component
+*/
+const DsStatusBadge = (t0) => {
 	const $ = (0, react_compiler_runtime.c)(16);
 	const { icon, status, label: t1, className, style, ghost: t2, size: t3, "aria-label": t4 } = t0;
 	const label = t1 === void 0 ? status : t1;
@@ -18137,68 +18487,9 @@ const systemStatuses = [
 //#endregion
 //#region src/components/ds-table/filters/adapters/create-filter-adapter.ts
 /**
-* Base factory function to create a filter adapter
-*
-* This is the core function that all specialized filter adapters use internally.
-* Use this when checkbox or dual-range adapters don't fit your requirements.
-*
-* ## When to use directly:
-* - Complex filtering logic (e.g., editor + date range)
-* - Unique UI that doesn't fit generic patterns
-* - Combining multiple sub-filters
-* - Special chip generation requirements
-*
-* ## When to use specialized helpers instead:
-* - **Checkbox filters**: Use `createCheckboxFilterAdapter` for multi-select
-* - **Range filters**: Use `createDualRangeFilterAdapter` for numeric ranges
-*
-* ## Example:
-* ```typescript
-* interface MyFilterValue {
-*   users: string[];
-*   dateRange: { from?: Date; to?: Date };
-* }
-*
-* const myFilter = createFilterAdapter<DataType, MyFilterValue>({
-*   id: 'myColumn',
-*   label: 'My Filter',
-*   initialValue: { users: [], dateRange: {} },
-*
-*   filterFn: (row, columnId, filterValue) => {
-*     // Your custom logic
-*     return matchesUsers && matchesDateRange;
-*   },
-*
-*   toChips: (value) => {
-*     // Generate chips from your filter value
-*     return chips;
-*   },
-*
-*   fromChip: (chip, currentValue) => {
-*     // Remove chip's effect from value
-*     return updatedValue;
-*   },
-*
-*   getActiveFiltersCount: (value) => {
-*     // Count active filters (0 means none active)
-*     return count;
-*   },
-*
-*   renderFilter: (value, onChange) => (
-*     <YourCustomFilterComponent
-*       value={value}
-*       onChange={onChange}
-*     />
-*   ),
-* });
-* ```
-*
-* ## Reference Implementation:
-* See `workflow-filters.config.tsx` for a complete example (lastEditedFilterAdapter).
-*
-* ## Note:
-* Most use cases are covered by `createCheckboxFilterAdapter` or `createDualRangeFilterAdapter`.
-* Only use this base function directly when you need completely custom filter logic.
+* Base factory used by every specialized adapter. Reach for it only when
+* `createCheckboxFilterAdapter` / `createDualRangeFilterAdapter` don't fit
+* (custom UI, mixed sub-filters, bespoke chip logic).
 */
 function createFilterAdapter(config) {
 	return {
@@ -18215,31 +18506,78 @@ function createFilterAdapter(config) {
 	};
 }
 //#endregion
+//#region src/components/ds-table/filters/components/checkbox-filter/checkbox-filter.module.scss
+var checkbox_filter_module_default = {
+	"checkboxItem": "H6sVkG_checkboxItem",
+	"empty": "H6sVkG_empty",
+	"list": "H6sVkG_list",
+	"root": "H6sVkG_root"
+};
+//#endregion
 //#region src/components/ds-table/filters/components/checkbox-filter/checkbox-filter.tsx
-const CheckboxFilter = ({ items, renderer, selectedItems, onSelectionChange }) => {
+const CheckboxFilter = ({ items, renderer, selectedItems, onSelectionChange, searchable = false, selectAll = false, locale, className }) => {
+	const { allLabel = "All", searchPlaceholder = "Search", noMatchesLabel = "No matches" } = locale ?? {};
+	const [query, setQuery] = (0, react.useState)("");
+	const visibleItems = searchable ? items.filter((item) => item.label.toLowerCase().includes(query.trim().toLowerCase())) : items;
 	const handleCheckedChange = (selected, checked) => {
 		if (checked) onSelectionChange([...selectedItems, selected]);
 		else onSelectionChange(selectedItems.filter((item) => item.value !== selected.value));
 	};
-	return items.map((item) => {
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsCheckbox, {
-			label: renderer ? renderer(item) : item.label,
-			checked: selectedItems.findIndex((selectedItem) => selectedItem.value === item.value) > -1,
-			onCheckedChange: (newState) => handleCheckedChange(item, newState === true)
-		}, JSON.stringify(item.value));
+	const visibleSelectedCount = visibleItems.filter((item) => selectedItems.some((selected) => selected.value === item.value)).length;
+	const allVisibleSelected = visibleItems.length > 0 && visibleSelectedCount === visibleItems.length;
+	const someVisibleSelected = visibleSelectedCount > 0 && !allVisibleSelected;
+	const handleSelectAllChange = (next) => {
+		const shouldSelect = next === true;
+		const visibleValues = new Set(visibleItems.map((item) => item.value));
+		const withoutVisible = selectedItems.filter((item) => !visibleValues.has(item.value));
+		onSelectionChange(shouldSelect ? [...withoutVisible, ...visibleItems] : withoutVisible);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, classnames.default)(checkbox_filter_module_default.root, className),
+		children: [searchable && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTextInput, {
+			value: query,
+			placeholder: searchPlaceholder,
+			onValueChange: setQuery,
+			slots: { startAdornment: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsIcon, {
+				icon: "search",
+				size: "tiny"
+			}) }
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: checkbox_filter_module_default.list,
+			role: "group",
+			children: [
+				selectAll && visibleItems.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsCheckbox, {
+					className: checkbox_filter_module_default.checkboxItem,
+					label: allLabel,
+					checked: allVisibleSelected ? true : someVisibleSelected ? "indeterminate" : false,
+					onCheckedChange: handleSelectAllChange
+				}),
+				visibleItems.length === 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: checkbox_filter_module_default.empty,
+					children: noMatchesLabel
+				}),
+				visibleItems.map((item) => {
+					const label = renderer ? renderer(item) : item.label;
+					const checked = selectedItems.some((selected) => selected.value === item.value);
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsCheckbox, {
+						className: checkbox_filter_module_default.checkboxItem,
+						label,
+						checked,
+						onCheckedChange: (next) => handleCheckedChange(item, next === true)
+					}, JSON.stringify(item.value));
+				})
+			]
+		})]
 	});
 };
 //#endregion
 //#region src/components/ds-table/filters/adapters/create-checkbox-filter-adapter.tsx
 /**
-* Factory function to create a checkbox filter adapter
-*
-* Handles multi-select checkbox filtering with inclusion model:
-* - Empty selection = show all data (no filter active)
-* - Selected items = show only those items
+* Multi-select inclusion filter: empty selection shows every row, selected
+* items show only those rows.
 */
 function createCheckboxFilterAdapter(config) {
-	const { id, label, items, renderer, chipLabelTemplate = (item) => `${label}: ${item.label}`, cellRenderer, getRowValue = (row) => row.getValue(id) } = config;
+	const { id, label, items, renderer, chipLabelTemplate = (item) => `${label}: ${item.label}`, cellRenderer, getRowValue = (row) => row.getValue(id), searchable = false, selectAll = false, locale } = config;
 	return createFilterAdapter({
 		id,
 		label,
@@ -18271,7 +18609,10 @@ function createCheckboxFilterAdapter(config) {
 				items,
 				renderer,
 				selectedItems: value,
-				onSelectionChange: onChange
+				onSelectionChange: onChange,
+				searchable,
+				selectAll,
+				locale
 			});
 		}
 	});
@@ -18356,10 +18697,7 @@ const RangeFilter = ({ label, value, onChange, onClear }) => {
 };
 //#endregion
 //#region src/components/ds-table/filters/adapters/create-dual-range-filter-adapter.tsx
-/**
-* Factory function to create a dual-range filter adapter
-* Handles filtering on multiple numeric ranges within a single column
-*/
+/** Filter over multiple numeric ranges within one column (AND across fields). */
 function createDualRangeFilterAdapter(config) {
 	const { id, label, fields, formatNumber = (num) => num.toLocaleString("en-US"), getRowValue = (row) => row.getValue(id) } = config;
 	const initialValue = {};
@@ -18438,28 +18776,16 @@ function createDualRangeFilterAdapter(config) {
 }
 //#endregion
 //#region src/components/ds-table/filters/hooks/use-table-filters.ts
+const resolveColumnAdapterId = (meta) => {
+	if (!meta) return;
+	if ("render" in meta) return meta.filterId;
+	if (meta.adapter) return meta.adapter.id;
+	return meta.adapterId;
+};
 /**
-* Hook to orchestrate table filtering with adapters.
-* Manages filter state, generates chips, and handles column definitions.
-*
-* **Uncontrolled mode** (default): Filters are managed internally.
-* **Controlled mode**: Filters are managed externally via appliedFilters/onFiltersChange.
-*
-* @example
-* // Uncontrolled mode
-* const { filterChips, handlers } = useTableFilters({
-*   filterAdapters: adapters,
-*   baseColumns: columns,
-* });
-*
-* @example
-* // Controlled mode (e.g., URL-driven filtering)
-* const { filterChips, handlers } = useTableFilters({
-*   filterAdapters: adapters,
-*   baseColumns: columns,
-*   appliedFilters: filtersFromUrl,
-*   onFiltersChange: (filters) => updateUrlAndRefetch(filters),
-* });
+* Orchestrates table filtering: drafts → applied state, chips, nav counts, and
+* column wiring. Uncontrolled by default; pass `appliedFilters` +
+* `onFiltersChange` for URL-driven / external state.
 */
 function useTableFilters({ filterAdapters, baseColumns, appliedFilters: externalAppliedFilters, onFiltersChange: setExternalAppliedFilters }) {
 	const _filterAdapters = filterAdapters;
@@ -18494,13 +18820,28 @@ function useTableFilters({ filterAdapters, baseColumns, appliedFilters: external
 		count: adapter.getActiveFiltersCount(draftFilters[adapter.id])
 	}));
 	const enhancedColumns = !baseColumns ? [] : baseColumns.map((col) => {
-		const adapter = _filterAdapters.find((a) => a.id === col.id);
+		const metaFilter = col.meta?.filter;
+		const adapterIdFromMeta = resolveColumnAdapterId(metaFilter);
+		const adapter = adapterIdFromMeta && _filterAdapters.find((a) => a.id === adapterIdFromMeta) || _filterAdapters.find((a) => a.id === col.id);
 		if (!adapter) return col;
 		const cellRenderer = adapter.cellRenderer;
+		const appliedValue = appliedFilters[adapter.id];
+		const resolvedFilter = metaFilter ? {
+			filterId: adapter.id,
+			hasActiveFilter: appliedValue !== void 0 && adapter.getActiveFiltersCount(appliedValue) > 0,
+			render: () => renderForId(adapter.id),
+			onApply: () => applyColumnFilter(adapter.id),
+			onClear: () => clearColumnFilter(adapter.id),
+			onCancel: () => cancelColumnFilter(adapter.id)
+		} : void 0;
 		return {
 			...col,
 			filterFn: adapter.columnFilterFn,
-			...cellRenderer && { cell: (info) => cellRenderer(info.getValue()) }
+			...cellRenderer && { cell: (info) => cellRenderer(info.getValue()) },
+			...resolvedFilter && { meta: {
+				...col.meta,
+				filter: resolvedFilter
+			} }
 		};
 	});
 	const updateFilter = (filterId, value) => {
@@ -18521,6 +18862,29 @@ function useTableFilters({ filterAdapters, baseColumns, appliedFilters: external
 		setPendingFilters({});
 		setAppliedFilters({});
 	};
+	const omitKey = (source, filterId) => Object.fromEntries(Object.entries(source).filter(([key]) => key !== filterId));
+	const applyColumnFilter = (filterId) => {
+		const adapter = _filterAdapters.find((a) => a.id === filterId);
+		if (!adapter) return;
+		const draftValue = draftFilters[filterId];
+		setAppliedFilters(adapter.getActiveFiltersCount(draftValue) > 0 ? {
+			...appliedFilters,
+			[filterId]: draftValue
+		} : omitKey(appliedFilters, filterId));
+		setPendingFilters((prev) => omitKey(prev, filterId));
+	};
+	const cancelColumnFilter = (filterId) => {
+		setPendingFilters((prev) => omitKey(prev, filterId));
+	};
+	const clearColumnFilter = (filterId) => {
+		const adapter = _filterAdapters.find((a) => a.id === filterId);
+		if (!adapter) return;
+		setPendingFilters((prev) => ({
+			...omitKey(prev, filterId),
+			[filterId]: adapter.initialValue
+		}));
+		if (appliedFilters[filterId] !== void 0) setAppliedFilters(omitKey(appliedFilters, filterId));
+	};
 	const deleteChip = (chip) => {
 		const filterKey = typeof chip.metadata?.key === "string" ? chip.metadata.key : void 0;
 		if (!filterKey) return;
@@ -18534,13 +18898,15 @@ function useTableFilters({ filterAdapters, baseColumns, appliedFilters: external
 			[filterKey]: newValue
 		});
 	};
-	const renderFilterContent = (selectedFilter) => {
-		const adapter = _filterAdapters.find((a) => a.id === selectedFilter.id);
+	const renderForId = (filterId) => {
+		const adapter = _filterAdapters.find((a) => a.id === filterId);
 		if (!adapter) return null;
 		const value = draftFilters[adapter.id];
 		const onChange = (newValue) => updateFilter(adapter.id, newValue);
 		return adapter.renderFilter(value, onChange);
 	};
+	const renderFilterContent = (selectedFilter) => renderForId(selectedFilter.id);
+	const renderColumnFilter = (filterId) => renderForId(filterId);
 	return {
 		filterState: draftFilters,
 		columnFilters,
@@ -18551,12 +18917,94 @@ function useTableFilters({ filterAdapters, baseColumns, appliedFilters: external
 			updateFilter,
 			applyFilters,
 			clearAll,
-			deleteChip
+			deleteChip,
+			applyColumnFilter,
+			cancelColumnFilter,
+			clearColumnFilter
 		},
-		renderFilterContent
+		renderFilterContent,
+		renderColumnFilter
 	};
 }
 //#endregion
+//#region src/components/ds-table/filters/components/column-filter-popover/column-filter-popover.module.scss
+var column_filter_popover_module_default = {
+	"body": "_0oV9a_body",
+	"content": "_0oV9a_content",
+	"footer": "_0oV9a_footer",
+	"trigger": "_0oV9a_trigger",
+	"triggerActive": "_0oV9a_triggerActive",
+	"triggerOpen": "_0oV9a_triggerOpen"
+};
+//#endregion
+//#region src/components/ds-table/filters/components/column-filter-popover/column-filter-popover.tsx
+const stopPropagation = (event) => event.stopPropagation();
+/**
+* Per-column filter popover anchored to a header cell: funnel trigger,
+* adapter UI as the body, Clear / Save footer wired to `useTableFilters`.
+*/
+const DsTableColumnFilterPopover = ({ children, hasActiveFilter, onApply, onClear, onCancel, locale, className }) => {
+	const { triggerAriaLabel = "Filter column", clearLabel = "Clear", saveLabel = "Save" } = locale ?? {};
+	const [open, setOpen] = (0, react.useState)(false);
+	const handleOpenChange = (details) => {
+		if (open && !details.open) onCancel();
+		setOpen(details.open);
+	};
+	const handleSave = () => {
+		onApply();
+		setOpen(false);
+	};
+	const handleClear = () => {
+		onClear();
+		setOpen(false);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_ark_ui_react_popover.Popover.Root, {
+		open,
+		onOpenChange: handleOpenChange,
+		positioning: {
+			placement: "bottom-end",
+			gutter: 4
+		},
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react_popover.Popover.Trigger, {
+			asChild: true,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsButtonV3, {
+				variant: "tertiary",
+				size: "tiny",
+				className: (0, classnames.default)(column_filter_popover_module_default.trigger, hasActiveFilter && column_filter_popover_module_default.triggerActive, open && column_filter_popover_module_default.triggerOpen),
+				"aria-label": triggerAriaLabel,
+				"data-active": hasActiveFilter ? "true" : void 0,
+				onClick: (event) => event.stopPropagation(),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsIcon, {
+					icon: "filter_alt",
+					variant: "outlined",
+					filled: hasActiveFilter,
+					size: "tiny"
+				})
+			})
+		}), /* @__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.jsxs)(_ark_ui_react_popover.Popover.Content, {
+			className: (0, classnames.default)(column_filter_popover_module_default.content, className),
+			onClick: stopPropagation,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: column_filter_popover_module_default.body,
+				children
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: column_filter_popover_module_default.footer,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsButtonV3, {
+					variant: "secondary",
+					size: "small",
+					onClick: handleClear,
+					children: clearLabel
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsButtonV3, {
+					variant: "primary",
+					size: "small",
+					onClick: handleSave,
+					children: saveLabel
+				})]
+			})]
+		}) }) })]
+	});
+};
+//#endregion
 //#region src/components/ds-table/components/core-table/core-table.module.scss
 var core_table_module_default = {
 	"table": "JP3Vta_table",
@@ -18693,6 +19141,10 @@ const DsTableBulkActions = ({ numSelectedRows, actions, onClearSelection }) => {
 //#endregion
 //#region src/components/ds-table/components/ds-table-header/ds-table-header.module.scss
 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",
@@ -18727,18 +19179,83 @@ const useDsTableContext = () => {
 	if (!context) throw new Error("useDsTableContext must be used within DsTable");
 	return context;
 };
+/**
+* Hoisted editing state for single-cell-at-a-time inline editing.
+* Lives on {@link DsTableContext} so cell renderers and editors share one provider.
+*/
+const useEditingState = (onCellEdit, onCellValidate) => {
+	const [editing, setEditing] = (0, react.useState)(null);
+	const onCellEditRef = (0, react.useRef)(onCellEdit);
+	onCellEditRef.current = onCellEdit;
+	const onCellValidateRef = (0, react.useRef)(onCellValidate);
+	onCellValidateRef.current = onCellValidate;
+	const editingRef = (0, react.useRef)(editing);
+	editingRef.current = editing;
+	return {
+		editing,
+		beginEdit: (0, react.useCallback)((cell) => {
+			const current = editingRef.current;
+			if (current) {
+				if (current.cell.row.id === cell.row.id && current.cell.column.id === cell.column.id) return;
+			}
+			setEditing({
+				cell,
+				draftValue: cell.getValue(),
+				error: null
+			});
+		}, []),
+		setDraft: (0, react.useCallback)((value) => {
+			const current = editingRef.current;
+			if (!current) return;
+			setEditing({
+				...current,
+				draftValue: value,
+				error: null
+			});
+		}, []),
+		commit: (0, react.useCallback)((overrideValue) => {
+			const current = editingRef.current;
+			if (!current) return;
+			const valueToCommit = overrideValue !== void 0 ? overrideValue : current.draftValue;
+			const error = onCellValidateRef.current?.(current.cell.row.original, current.cell.column.id, valueToCommit) ?? null;
+			if (error !== null) {
+				setEditing({
+					...current,
+					draftValue: valueToCommit,
+					error
+				});
+				return;
+			}
+			onCellEditRef.current?.(current.cell.row.original, current.cell.column.id, valueToCommit);
+			setEditing(null);
+		}, []),
+		cancel: (0, react.useCallback)(() => {
+			setEditing(null);
+		}, [])
+	};
+};
 //#endregion
 //#region src/components/ds-table/utils/column-size.ts
 /**
-* Generates the appropriate style object for a table column/cell based on its size and virtualization state
+* Generates the appropriate style object for a table column/cell based on its size
+*
+* Custom-sized columns get a fixed `width` plus `minWidth` and `flexShrink: 0` so
+* they enforce horizontal overflow on the table container. Default-sized columns
+* grow to fill the row evenly via `flex: 1`.
 *
 * @param columnSize - The size of the column
-* @param virtualized - Whether the table is virtualized
-* @returns Style object or undefined if no custom styling is needed
+* @returns Style object for the column/cell
 */
-const getColumnSizeStyle = (columnSize, virtualized) => {
-	if (columnSize !== _tanstack_react_table.defaultColumnSizing.size) return { width: columnSize };
-	if (virtualized) return { flex: 1 };
+const getColumnSizeStyle = (columnSize) => {
+	if (columnSize !== _tanstack_react_table.defaultColumnSizing.size) return {
+		width: columnSize,
+		minWidth: columnSize,
+		flexShrink: 0
+	};
+	return {
+		flex: 1,
+		minWidth: 0
+	};
 };
 /**
 * Column id used for the synthetic expander column injected when `expandable` is set.
@@ -18754,6 +19271,154 @@ const SELECT_COLUMN_ID = "select";
 */
 const REORDER_COLUMN_ID = "reorder";
 //#endregion
+//#region src/components/ds-table/grouping/utils/column-group.ts
+/**
+* Builds the flex style for a group header cell so it lines up with the combined
+* width of its visible leaf columns.
+*
+* Fixed-width leaves contribute to `flexBasis`; default-sized leaves each add one
+* unit of `flexGrow`, mirroring how {@link getColumnSizeStyle} sizes leaf cells so
+* both header rows distribute free space identically.
+*/
+const getGroupColumnSizeStyle = (leafColumns) => {
+	let fixedWidth = 0;
+	let flexCount = 0;
+	for (const leaf of leafColumns) {
+		const size = leaf.getSize();
+		if (size !== _tanstack_react_table.defaultColumnSizing.size) fixedWidth += size;
+		else flexCount += 1;
+	}
+	if (flexCount === 0) return {
+		width: fixedWidth,
+		minWidth: fixedWidth,
+		flexShrink: 0
+	};
+	return {
+		flexGrow: flexCount,
+		flexShrink: 0,
+		flexBasis: fixedWidth,
+		minWidth: fixedWidth
+	};
+};
+/**
+* Whether a column is the first visible leaf of its parent group. Used to draw a
+* single side border at the start of each group in both the header and body.
+*/
+const isFirstLeafColumnOfGroup = (column) => {
+	const parent = column.parent;
+	if (!parent) return false;
+	return parent.getLeafColumns().filter((leaf) => leaf.getIsVisible())[0]?.id === column.id;
+};
+const getLeafColumnId = (def) => def.id ?? def.accessorKey;
+/**
+* Collects the ids of groups declared with `meta.group.defaultCollapsed`, used to
+* seed the uncontrolled collapse state.
+*/
+const getInitialCollapsedGroups = (columns) => {
+	const collapsed = [];
+	const visit = (defs) => {
+		for (const def of defs) if (def.columns) {
+			if (def.id && def.meta?.group?.defaultCollapsed) collapsed.push(def.id);
+			visit(def.columns);
+		}
+	};
+	visit(columns);
+	return collapsed;
+};
+/**
+* Maps collapsed groups to a {@link VisibilityState} that hides every leaf column
+* inside a collapsed group except those flagged `meta.keepVisibleWhenCollapsed`.
+* Layered on top of the consumer's own visibility so collapse never mutates it.
+*/
+const getCollapsedColumnVisibility = (columns, collapsedGroupIds) => {
+	const visibility = {};
+	const visit = (defs, isInsideCollapsedGroup) => {
+		for (const def of defs) {
+			if (def.columns) {
+				const isGroupCollapsed = isInsideCollapsedGroup || !!def.id && collapsedGroupIds.includes(def.id);
+				visit(def.columns, isGroupCollapsed);
+				continue;
+			}
+			if (!isInsideCollapsedGroup || def.meta?.keepVisibleWhenCollapsed) continue;
+			const columnId = getLeafColumnId(def);
+			if (columnId) visibility[columnId] = false;
+		}
+	};
+	visit(columns, false);
+	return visibility;
+};
+//#endregion
+//#region src/components/ds-table/grouping/hooks/use-column-groups.ts
+/**
+* Manages column-group collapse state. Supports both controlled
+* (`collapsedColumnGroups` + `onCollapsedColumnGroupsChange`) and uncontrolled
+* usage (seeded from `meta.group.defaultCollapsed`).
+*/
+const useColumnGroups = ({ columns, collapsedColumnGroups, onCollapsedColumnGroupsChange }) => {
+	const [collapsed, setCollapsed] = useControlled(collapsedColumnGroups, onCollapsedColumnGroupsChange, getInitialCollapsedGroups(columns));
+	const toggleColumnGroup = (groupId) => {
+		setCollapsed(collapsed.includes(groupId) ? collapsed.filter((id) => id !== groupId) : [...collapsed, groupId]);
+	};
+	return {
+		collapsedColumnGroups: collapsed,
+		toggleColumnGroup,
+		collapsedVisibility: (0, react.useMemo)(() => getCollapsedColumnVisibility(columns, collapsed), [columns, collapsed])
+	};
+};
+//#endregion
+//#region src/components/ds-table/ds-table.types.ts
+/**
+* Default English strings for {@link DsTableLocale}.
+*/
+const defaultDsTableLocale = Object.freeze({
+	collapseColumnGroup: "Collapse column group",
+	expandColumnGroup: "Expand column group"
+});
+//#endregion
+//#region src/components/ds-table/components/ds-table-group-header-cell/ds-table-group-header-cell.module.scss
+var ds_table_group_header_cell_module_default = {
+	"collapseToggle": "HuJ4KG_collapseToggle",
+	"groupHeaderCell": "HuJ4KG_groupHeaderCell",
+	"groupHeaderContent": "HuJ4KG_groupHeaderContent",
+	"groupLabel": "HuJ4KG_groupLabel"
+};
+//#endregion
+//#region src/components/ds-table/components/ds-table-group-header-cell/ds-table-group-header-cell.tsx
+const DsTableGroupHeaderCell = ({ header }) => {
+	const { collapsedColumnGroups, onToggleColumnGroup, locale } = useDsTableContext();
+	const groupId = header.column.id;
+	const groupStyle = getGroupColumnSizeStyle(header.column.getLeafColumns().filter((leaf) => leaf.getIsVisible()));
+	const isCollapsible = header.column.columnDef.meta?.group?.collapsible ?? false;
+	const isCollapsed = collapsedColumnGroups?.includes(groupId) ?? false;
+	const mergedLocale = {
+		...defaultDsTableLocale,
+		...locale
+	};
+	const toggleLabel = isCollapsed ? mergedLocale.expandColumnGroup : mergedLocale.collapseColumnGroup;
+	const handleToggle = () => onToggleColumnGroup?.(groupId);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableHead, {
+		className: ds_table_group_header_cell_module_default.groupHeaderCell,
+		style: groupStyle,
+		colSpan: header.colSpan,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: ds_table_group_header_cell_module_default.groupHeaderContent,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: ds_table_group_header_cell_module_default.groupLabel,
+				children: (0, _tanstack_react_table.flexRender)(header.column.columnDef.header, header.getContext())
+			}), isCollapsible && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsButtonV3, {
+				variant: "secondary",
+				size: "tiny",
+				icon: isCollapsed ? "chevron_right" : "chevron_left",
+				className: ds_table_group_header_cell_module_default.collapseToggle,
+				"aria-label": toggleLabel,
+				"aria-expanded": !isCollapsed,
+				title: toggleLabel,
+				onClick: handleToggle
+			})]
+		})
+	});
+};
+//#endregion
 //#region src/components/ds-table/components/ds-table-header/ds-table-header.tsx
 const DsTableHeader = ({ table }) => {
 	const { stickyHeader, bordered, virtualized } = useDsTableContext();
@@ -18762,33 +19427,55 @@ 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) => {
-				const headerStyle = getColumnSizeStyle(header.column.getSize(), virtualized);
+				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),
+					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, {
-							direction: "column",
-							justifyContent: "center",
-							width: "100%",
-							children: (0, _tanstack_react_table.flexRender)(header.column.columnDef.header, header.getContext())
-						}), canSort && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: ds_table_header_module_default.pageButtonIconContainer,
-							children: {
-								asc: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsIcon, {
-									icon: "arrow_drop_up",
-									className: (0, classnames.default)(ds_table_header_module_default.pageButtonIcon, ds_table_shared_module_default.pageButtonIcon)
-								}),
-								desc: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsIcon, {
-									icon: "arrow_drop_down",
-									className: (0, classnames.default)(ds_table_header_module_default.pageButtonIcon, ds_table_shared_module_default.pageButtonIcon)
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsStack, {
+								direction: "column",
+								justifyContent: "center",
+								width: "100%",
+								children: (0, _tanstack_react_table.flexRender)(header.column.columnDef.header, header.getContext())
+							}),
+							canSort && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: ds_table_header_module_default.pageButtonIconContainer,
+								children: {
+									asc: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsIcon, {
+										icon: "arrow_drop_up",
+										className: (0, classnames.default)(ds_table_header_module_default.pageButtonIcon, ds_table_shared_module_default.pageButtonIcon)
+									}),
+									desc: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsIcon, {
+										icon: "arrow_drop_down",
+										className: (0, classnames.default)(ds_table_header_module_default.pageButtonIcon, ds_table_shared_module_default.pageButtonIcon)
+									})
+								}[header.column.getIsSorted()] ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: (0, classnames.default)(ds_table_header_module_default.pageButtonIcon, ds_table_shared_module_default.pageButtonIcon) })
+							}),
+							resolvedFilter && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: ds_table_header_module_default.filterTriggerContainer,
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTableColumnFilterPopover, {
+									hasActiveFilter: resolvedFilter.hasActiveFilter,
+									onApply: resolvedFilter.onApply,
+									onClear: resolvedFilter.onClear,
+									onCancel: resolvedFilter.onCancel,
+									children: resolvedFilter.render()
 								})
-							}[header.column.getIsSorted()] ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: (0, classnames.default)(ds_table_header_module_default.pageButtonIcon, ds_table_shared_module_default.pageButtonIcon) })
-						})]
+							})
+						]
 					})
 				}, header.id);
 			})
@@ -18803,20 +19490,124 @@ var ds_table_module_default = {
 	"dataTableContainer": "iL9mtW_dataTableContainer",
 	"emptyState": "iL9mtW_emptyState",
 	"fullWidth": "iL9mtW_fullWidth",
-	"rotate": "iL9mtW_rotate",
-	"rotate-135": "iL9mtW_rotate-135",
-	"rotate-180": "iL9mtW_rotate-180",
-	"rotate-225": "iL9mtW_rotate-225",
-	"rotate-270": "iL9mtW_rotate-270",
-	"rotate-315": "iL9mtW_rotate-315",
-	"rotate-45": "iL9mtW_rotate-45",
-	"rotate-90": "iL9mtW_rotate-90",
+	"scrollbar-thin": "iL9mtW_scrollbar-thin",
 	"table": "iL9mtW_table",
 	"tableNoBorder": "iL9mtW_tableNoBorder",
-	"virtualized": "iL9mtW_virtualized",
 	"virtualizedContainer": "iL9mtW_virtualizedContainer"
 };
 //#endregion
+//#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",
+	"root": "g5FEoW_root"
+};
+//#endregion
+//#region src/components/ds-table/components/edit/ds-table-editable-cell/ds-table-editable-cell.tsx
+const DsTableEditableCell = ({ cell, children }) => {
+	const { beginEdit, editing } = useDsTableContext();
+	const isEditing = editing !== null && editing.cell.row.id === cell.row.id && editing.cell.column.id === cell.column.id;
+	const handleEdit = (event) => {
+		event.stopPropagation();
+		beginEdit(cell);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: ds_table_editable_cell_module_default.root,
+		"data-active": isEditing ? "" : void 0,
+		onDoubleClick: handleEdit,
+		tabIndex: 0,
+		role: "button",
+		"aria-label": "Double-click to edit",
+		children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsButtonV3, {
+			className: ds_table_editable_cell_module_default.editButton,
+			variant: "tertiary",
+			size: "small",
+			icon: "edit",
+			"aria-label": "Edit cell",
+			onClick: handleEdit
+		})]
+	});
+};
+//#endregion
+//#region src/components/ds-table/components/edit/ds-table-editing-cell/ds-table-editing-cell.module.scss
+var ds_table_editing_cell_module_default = {
+	"actions": "-EpLaa_actions",
+	"editAnchor": "-EpLaa_editAnchor",
+	"overlay": "-EpLaa_overlay",
+	"row": "-EpLaa_row",
+	"slot": "-EpLaa_slot"
+};
+//#endregion
+//#region src/components/ds-table/components/edit/ds-table-editing-cell/ds-table-editing-cell.tsx
+const DsTableEditingCell = ({ cell }) => {
+	const { commit, cancel } = useDsTableContext();
+	const columnDef = cell.column.columnDef;
+	const editAnchorRef = (0, react.useRef)(null);
+	const handleSubmit = (event) => {
+		event.preventDefault();
+		event.stopPropagation();
+		commit();
+	};
+	(0, react.useEffect)(() => {
+		const handleKeyDown = (event) => {
+			if (event.key !== "Escape") return;
+			if (!editAnchorRef.current?.contains(document.activeElement)) return;
+			event.preventDefault();
+			event.stopPropagation();
+			cancel();
+		};
+		document.addEventListener("keydown", handleKeyDown);
+		return () => {
+			document.removeEventListener("keydown", handleKeyDown);
+		};
+	}, [cancel]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref: editAnchorRef,
+		className: ds_table_editing_cell_module_default.editAnchor,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("form", {
+			className: ds_table_editing_cell_module_default.overlay,
+			onSubmit: handleSubmit,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DsStack, {
+				direction: "row",
+				gap: "var(--3xs)",
+				alignItems: "flex-start",
+				width: "100%",
+				className: ds_table_editing_cell_module_default.row,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsStack, {
+					flex: "1 1 auto",
+					className: ds_table_editing_cell_module_default.slot,
+					children: columnDef.editCell ? (0, _tanstack_react_table.flexRender)(columnDef.editCell, cell.getContext()) : null
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DsStack, {
+					direction: "row",
+					gap: "var(--3xs)",
+					className: ds_table_editing_cell_module_default.actions,
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsButtonV3, {
+						type: "button",
+						variant: "tertiary",
+						size: "small",
+						icon: "close",
+						"aria-label": "Cancel edit",
+						onClick: (event) => {
+							event.stopPropagation();
+							cancel();
+						},
+						style: { color: "var(--icon-error)" }
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsButtonV3, {
+						type: "submit",
+						variant: "tertiary",
+						size: "small",
+						icon: "check",
+						"aria-label": "Confirm edit",
+						onClick: (event) => {
+							event.stopPropagation();
+						},
+						style: { color: "var(--icon-success)" }
+					})]
+				})]
+			})
+		})
+	});
+};
+//#endregion
 //#region src/components/ds-table/components/ds-table-cell/ds-table-cell.module.scss
 var ds_table_cell_module_default = {
 	"cellActions": "UprPSq_cellActions",
@@ -18828,20 +19619,19 @@ var ds_table_cell_module_default = {
 };
 //#endregion
 //#region src/components/ds-table/components/ds-table-cell/ds-table-cell.tsx
-const DsDefaultTableCell = ({ cell }) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: ds_table_cell_module_default.tableCellEllipsis,
-		children: (0, _tanstack_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext())
-	});
-};
 const DsTableCell = ({ row, cell, primaryRowActions = [], secondaryRowActions = [] }) => {
+	const { editing } = useDsTableContext();
+	const isCellBeingEdited = editing !== null && editing.cell.row.id === row.id && editing.cell.column.id === cell.column.id;
 	const visiblePrimary = primaryRowActions.filter((action) => !action.hidden?.(row.original));
 	const visibleSecondary = secondaryRowActions.filter((action) => !action.hidden?.(row.original));
-	if (visiblePrimary.length || visibleSecondary.length) {
+	if (!isCellBeingEdited && (visiblePrimary.length || visibleSecondary.length)) {
 		const hasSecondaryRowActions = visibleSecondary.length > 0;
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: ds_table_cell_module_default.lastCell,
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsDefaultTableCell, { cell }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CellContent, {
+				cell,
+				isCellBeingEdited
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: ds_table_cell_module_default.cellActions,
 				children: [visiblePrimary.map((action, i) => {
 					const isDisabled = action.disabled?.(row.original);
@@ -18892,16 +19682,36 @@ const DsTableCell = ({ row, cell, primaryRowActions = [], secondaryRowActions =
 			})]
 		});
 	}
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsDefaultTableCell, { cell });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CellContent, {
+		cell,
+		isCellBeingEdited
+	});
+};
+const CellContent = ({ cell, isCellBeingEdited }) => {
+	const isEditable = typeof cell.column.columnDef.editCell === "function";
+	if (isCellBeingEdited) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTableEditingCell, { cell });
+	if (isEditable) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTableEditableCell, {
+		cell,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: ds_table_cell_module_default.tableCellEllipsis,
+			children: (0, _tanstack_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext())
+		})
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: ds_table_cell_module_default.tableCellEllipsis,
+		children: (0, _tanstack_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext())
+	});
 };
 //#endregion
 //#region src/components/ds-table/components/ds-table-row/ds-table-row.module.scss
 var ds_table_row_module_default = {
 	"cellReorder": "t8OZCq_cellReorder",
 	"clickableRow": "t8OZCq_clickableRow",
+	"editableCell": "t8OZCq_editableCell",
 	"expandableCell": "t8OZCq_expandableCell",
 	"expanded": "t8OZCq_expanded",
 	"expandedRow": "t8OZCq_expandedRow",
+	"groupStart": "t8OZCq_groupStart",
 	"isDragging": "t8OZCq_isDragging",
 	"rowDragHandle": "t8OZCq_rowDragHandle",
 	"rowNoBorder": "t8OZCq_rowNoBorder",
@@ -18967,7 +19777,7 @@ const DsTableRow = ({ ref, row, isSelected }) => {
 			}, cell.id);
 			const isLastColumn = idx === row.getVisibleCells().length - 1;
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableCell, {
-				className: (0, classnames.default)(ds_table_row_module_default.tableCell, cell.column.id === "expander" && ds_table_row_module_default.expandableCell, cell.column.id === "select" && ds_table_row_module_default.selectableCell),
+				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,
@@ -19087,17 +19897,21 @@ function useDragAndDrop({ isDragEnabled, onOrderChange, items }) {
 //#region src/components/ds-table/components/ds-table-body-virtualized/ds-table-body-virtualized.module.scss
 var ds_table_body_virtualized_module_default = {
 	"body": "vRRk8q_body",
-	"emptyState": "vRRk8q_emptyState"
+	"emptyState": "vRRk8q_emptyState",
+	"scrollbar-thin": "vRRk8q_scrollbar-thin",
+	"sentinel": "vRRk8q_sentinel"
 };
 //#endregion
 //#region src/components/ds-table/components/ds-table-row-virtualized/ds-table-row-virtualized.module.scss
 var ds_table_row_virtualized_module_default = {
 	"cell": "NcME7q_cell",
 	"clickableRow": "NcME7q_clickableRow",
+	"editableCell": "NcME7q_editableCell",
 	"expandableCell": "NcME7q_expandableCell",
 	"expanded": "NcME7q_expanded",
 	"expandedRow": "NcME7q_expandedRow",
 	"expandedRowContent": "NcME7q_expandedRowContent",
+	"groupStart": "NcME7q_groupStart",
 	"row": "NcME7q_row",
 	"rowNoBorder": "NcME7q_rowNoBorder",
 	"selectableCell": "NcME7q_selectableCell",
@@ -19133,8 +19947,8 @@ const DsTableRowVirtualized = ({ row, isSelected, rowsMapRef, rowHeightsMapRef,
 		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(), true),
-				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),
+				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, 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,
@@ -19179,9 +19993,10 @@ const useInfiniteScroll = (scrollElementRef, rowCount, config) => {
 };
 //#endregion
 //#region src/components/ds-table/components/ds-table-body-virtualized/ds-table-body-virtualized.tsx
-const DsTableBodyVirtualized = ({ table, tableContainerRef, emptyState, estimateSize, overscan, onScroll, rowSelection, infiniteScroll }) => {
+const DsTableBodyVirtualized = ({ table, emptyState, estimateSize, overscan, onScroll, rowSelection, infiniteScroll }) => {
 	const rowsMapRef = (0, react.useRef)(/* @__PURE__ */ new Map());
 	const rowHeightsMapRef = (0, react.useRef)(/* @__PURE__ */ new Map());
+	const tbodyRef = (0, react.useRef)(null);
 	const { rows } = table.getRowModel();
 	const rowsAndExpandedRowContent = rows.flatMap((row) => row.getIsExpanded() ? [{ row }, {
 		row,
@@ -19191,14 +20006,14 @@ const DsTableBodyVirtualized = ({ table, tableContainerRef, emptyState, estimate
 		const item = rowsAndExpandedRowContent[index];
 		return item ? `${item.row.id}${item.isExpandedRowContent ? "-expanded-content" : ""}` : String(index);
 	};
-	const { loadDataIfNeeded } = useInfiniteScroll(tableContainerRef, rows.length, infiniteScroll);
+	const { loadDataIfNeeded } = useInfiniteScroll(tbodyRef, rows.length, infiniteScroll);
 	const rowVirtualizer = (0, _tanstack_react_virtual.useVirtualizer)({
 		count: rowsAndExpandedRowContent.length,
 		estimateSize: (index) => {
 			return rowHeightsMapRef.current.get(getItemKey(index)) || estimateSize;
 		},
 		getItemKey,
-		getScrollElement: () => tableContainerRef.current,
+		getScrollElement: () => tbodyRef.current,
 		measureElement: typeof window !== "undefined" && navigator.userAgent.indexOf("Firefox") === -1 ? (element) => element.getBoundingClientRect().height : void 0,
 		overscan: overscan ?? 5,
 		onChange: (instance, sync) => {
@@ -19231,6 +20046,7 @@ const DsTableBodyVirtualized = ({ table, tableContainerRef, emptyState, estimate
 		rowVirtualizer.measure();
 	}, [table.getState()]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTableBody, {
+		ref: tbodyRef,
 		rowsMapRef,
 		rowHeightsMapRef,
 		rowVirtualizer,
@@ -19239,12 +20055,14 @@ const DsTableBodyVirtualized = ({ table, tableContainerRef, emptyState, estimate
 		rowSelection
 	});
 };
-function DsTableBody({ rowVirtualizer, rowsMapRef, rowHeightsMapRef, rowsAndExpandedRowContent, emptyState, rowSelection }) {
+function DsTableBody({ ref, rowVirtualizer, rowsMapRef, rowHeightsMapRef, rowsAndExpandedRowContent, emptyState, rowSelection }) {
 	const virtualRows = rowVirtualizer.getVirtualItems();
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableBody, {
+	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,
-		style: { height: `${rowVirtualizer.getTotalSize().toString()}px` },
-		children: virtualRows.length > 0 ? virtualRows.map((virtualRow) => {
+		children: [virtualRows.length > 0 ? virtualRows.map((virtualRow) => {
 			const row = rowsAndExpandedRowContent[virtualRow.index];
 			if (!row) return null;
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTableRowVirtualized, {
@@ -19256,10 +20074,15 @@ function DsTableBody({ rowVirtualizer, rowsMapRef, rowHeightsMapRef, rowsAndExpa
 				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."
-		}) })
+		}) }) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tr", {
+			"aria-hidden": true,
+			className: ds_table_body_virtualized_module_default.sentinel,
+			style: { top: `${totalSize.toString()}px` },
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {})
+		})]
 	});
 }
 //#endregion
@@ -19272,7 +20095,7 @@ const ROW_SIZE_HEIGHT_MAP = {
 /**
 * Design system Table component
 */
-const DsTable = ({ ref, columns: columnsProp, data: tableData, virtualized = false, virtualizedOptions, className, onRowClick, emptyState, stickyHeader = true, bordered = true, fullWidth = true, rowSize = "medium", expandable = false, renderExpandedRow, selectable = false, showSelectAllCheckbox = true, onSelectionChange, onSortingChange, onScroll, actions = [], onRowDoubleClick, primaryRowActions = [], secondaryRowActions, reorderable = false, onOrderChange, columnFilters: externalColumnFilters, onColumnFiltersChange, columnVisibility: externalColumnVisibility, onColumnVisibilityChange, activeRowId, infiniteScroll }) => {
+const DsTable = ({ ref, columns: columnsProp, data: tableData, virtualized = false, virtualizedOptions, className, onRowClick, emptyState, stickyHeader = true, bordered = true, fullWidth = true, rowSize = "medium", expandable = false, renderExpandedRow, selectable = false, showSelectAllCheckbox = true, onSelectionChange, onSortingChange, onScroll, actions = [], onRowDoubleClick, primaryRowActions = [], secondaryRowActions, reorderable = false, onOrderChange, columnFilters: externalColumnFilters, onColumnFiltersChange, columnVisibility: externalColumnVisibility, onColumnVisibilityChange, collapsedColumnGroups: externalCollapsedColumnGroups, onCollapsedColumnGroupsChange, locale, activeRowId, infiniteScroll, onCellEdit, onCellValidate }) => {
 	const [data, setData] = react.useState(tableData);
 	const [sorting, setSorting] = react.useState([]);
 	const [internalColumnFilters, setInternalColumnFilters] = react.useState([]);
@@ -19293,12 +20116,21 @@ const DsTable = ({ ref, columns: columnsProp, data: tableData, virtualized = fal
 		if (onColumnFiltersChange) onColumnFiltersChange(newFilters);
 		else setInternalColumnFilters(newFilters);
 	};
-	const columnVisibility = externalColumnVisibility ?? internalColumnVisibility;
+	const baseColumnVisibility = externalColumnVisibility ?? internalColumnVisibility;
 	const handleColumnVisibilityChange = (updaterOrValue) => {
-		const newVisibility = typeof updaterOrValue === "function" ? updaterOrValue(columnVisibility) : updaterOrValue;
+		const newVisibility = typeof updaterOrValue === "function" ? updaterOrValue(baseColumnVisibility) : updaterOrValue;
 		if (onColumnVisibilityChange) onColumnVisibilityChange(newVisibility);
 		else setInternalColumnVisibility(newVisibility);
 	};
+	const { collapsedColumnGroups, toggleColumnGroup, collapsedVisibility } = useColumnGroups({
+		columns: columnsProp,
+		collapsedColumnGroups: externalCollapsedColumnGroups,
+		onCollapsedColumnGroupsChange
+	});
+	const columnVisibility = (0, react.useMemo)(() => ({
+		...baseColumnVisibility,
+		...collapsedVisibility
+	}), [baseColumnVisibility, collapsedVisibility]);
 	const handleSortingChange = (updaterOrValue) => {
 		const newSorting = typeof updaterOrValue === "function" ? updaterOrValue(sorting) : updaterOrValue;
 		setSorting(newSorting);
@@ -19438,18 +20270,22 @@ const DsTable = ({ ref, columns: columnsProp, data: tableData, virtualized = fal
 		secondaryRowActions,
 		renderExpandedRow,
 		virtualized,
-		activeRowId
+		activeRowId,
+		collapsedColumnGroups,
+		onToggleColumnGroup: toggleColumnGroup,
+		locale,
+		onCellEdit,
+		...useEditingState(onCellEdit, onCellValidate)
 	};
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DsTableContext.Provider, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTableContext.Provider, {
 		value: contextValue,
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			ref: tableContainerRef,
 			className: (0, classnames.default)(ds_table_module_default.container, !virtualized && ds_table_module_default.dataTableContainer, virtualized && ds_table_module_default.virtualizedContainer, isBulkActionsVisible && ds_table_module_default.bulkActionsVisible, className),
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DragWrapper, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Table, {
-				className: (0, classnames.default)(fullWidth && ds_table_module_default.fullWidth, !bordered && ds_table_module_default.tableNoBorder, virtualized && ds_table_module_default.virtualized),
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DragWrapper, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Table, {
+				className: (0, classnames.default)(fullWidth && ds_table_module_default.fullWidth, !bordered && ds_table_module_default.tableNoBorder),
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTableHeader, { table }), virtualized ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTableBodyVirtualized, {
 					table,
-					tableContainerRef,
 					emptyState,
 					estimateSize: virtualizedOptions?.estimateSize || ROW_SIZE_HEIGHT_MAP[rowSize],
 					overscan: virtualizedOptions?.overscan,
@@ -19460,15 +20296,175 @@ const DsTable = ({ ref, columns: columnsProp, data: tableData, virtualized = fal
 					row,
 					isSelected: !!rowSelection[row.id]
 				}, row.id)) : renderEmptyState() }) })]
-			}) })
-		}), selectable && actions.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTableBulkActions, {
-			numSelectedRows: selectedRows.length,
-			actions: actions.map((action) => ({
-				...action,
-				onClick: () => action.onClick(selectedRows)
-			})),
-			onClearSelection: table.resetRowSelection
-		})]
+			}) }), selectable && actions.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTableBulkActions, {
+				numSelectedRows: selectedRows.length,
+				actions: actions.map((action) => ({
+					...action,
+					onClick: () => action.onClick(selectedRows)
+				})),
+				onClearSelection: table.resetRowSelection
+			})]
+		})
+	});
+};
+//#endregion
+//#region src/components/ds-table/hooks/use-cell-editor.ts
+/**
+* Wires a TanStack Table `editCell` renderer into DsTable's hoisted editing state.
+* Only mount this hook inside `ColumnDef.editCell` — the table cell layer handles
+* entering edit mode on double-click.
+*/
+const useCellEditor = ({ cellContext }) => {
+	const ctx = useDsTableContext();
+	const { row, column, getValue } = cellContext;
+	const isActiveCell = ctx.editing !== null && ctx.editing.cell.row.id === row.id && ctx.editing.cell.column.id === column.id;
+	const value = isActiveCell && ctx.editing ? ctx.editing.draftValue : getValue();
+	const error = isActiveCell && ctx.editing ? ctx.editing.error : null;
+	const setValue = (next) => {
+		ctx.setDraft(next);
+	};
+	const commit = (overrideValue) => {
+		ctx.commit(overrideValue);
+	};
+	const cancel = () => {
+		ctx.cancel();
+	};
+	const stopPropagation = (event) => {
+		event.stopPropagation();
+	};
+	return {
+		value,
+		error,
+		setValue,
+		commit,
+		cancel,
+		stopPropagation,
+		editorContainerProps: {
+			onKeyDown: () => {},
+			onClick: stopPropagation,
+			onDoubleClick: stopPropagation
+		}
+	};
+};
+//#endregion
+//#region src/components/ds-table/components/edit/cell-editors/cell-editors.module.scss
+var cell_editors_module_default = { "fullWidth": "m8hPaq_fullWidth" };
+//#endregion
+//#region src/components/ds-table/components/edit/cell-editors/table-edit-form-control.tsx
+const TableEditFormControl = ({ cellContext, error, children }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsFormControl, {
+		hideLabel: true,
+		label: String(cellContext.column.columnDef.header ?? cellContext.column.id),
+		className: cell_editors_module_default.fullWidth,
+		status: error ? "error" : void 0,
+		message: error ?? void 0,
+		messageIcon: "cancel",
+		children
+	});
+};
+//#endregion
+//#region src/components/ds-table/components/edit/cell-editors/ds-table-edit-cell-text.tsx
+/** Text input editor for table cells. Render via `ColumnDef.editCell`. */
+const DsTableEditCellText = ({ cellContext, placeholder, maxLength }) => {
+	const { value, setValue, error } = useCellEditor({ cellContext });
+	const inputRef = (0, react.useRef)(null);
+	(0, react.useEffect)(() => {
+		const input = inputRef.current;
+		if (!input) return;
+		input.focus();
+		input.select();
+	}, []);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableEditFormControl, {
+		cellContext,
+		error,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsFormControl.TextInput, {
+			ref: inputRef,
+			className: cell_editors_module_default.fullWidth,
+			value,
+			placeholder,
+			maxLength,
+			onValueChange: setValue,
+			slots: error ? { endAdornment: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsIcon, {
+				icon: "error",
+				size: "tiny"
+			}) } : void 0
+		})
+	});
+};
+//#endregion
+//#region src/components/ds-table/components/edit/cell-editors/ds-table-edit-cell-number.tsx
+/** Number input editor for table cells. Render via `ColumnDef.editCell`. */
+const DsTableEditCellNumber = ({ cellContext, min, max, step }) => {
+	const { value, setValue, error } = useCellEditor({ cellContext });
+	const inputRef = (0, react.useRef)(null);
+	(0, react.useEffect)(() => {
+		const input = inputRef.current;
+		if (!input) return;
+		input.focus();
+		input.select();
+	}, []);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableEditFormControl, {
+		cellContext,
+		error,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsFormControl.NumberInput, {
+			ref: inputRef,
+			className: cell_editors_module_default.fullWidth,
+			value,
+			min,
+			max,
+			step,
+			onValueChange: setValue
+		})
+	});
+};
+//#endregion
+//#region src/components/ds-table/components/edit/cell-editors/ds-table-edit-cell-select.tsx
+/** Select editor for table cells. Render via `ColumnDef.editCell`. */
+const DsTableEditCellSelect = ({ cellContext, options, placeholder }) => {
+	const { value, setValue, error } = useCellEditor({ cellContext });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableEditFormControl, {
+		cellContext,
+		error,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsFormControl.Select, {
+			className: cell_editors_module_default.fullWidth,
+			value,
+			options,
+			placeholder,
+			onValueChange: setValue
+		})
+	});
+};
+//#endregion
+//#region src/components/ds-table/components/edit/cell-editors/ds-table-edit-cell-date.tsx
+/** Date picker editor for table cells. Render via `ColumnDef.editCell`. */
+const DsTableEditCellDate = ({ cellContext, min, max, placeholder }) => {
+	const { value, setValue, error } = useCellEditor({ cellContext });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableEditFormControl, {
+		cellContext,
+		error,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsFormControl.DatePicker, {
+			className: cell_editors_module_default.fullWidth,
+			value,
+			min,
+			max,
+			placeholder,
+			onChange: setValue,
+			slotProps: error ? { input: { slots: { endAdornment: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsIcon, {
+				icon: "error",
+				size: "tiny"
+			}) } } } : void 0
+		})
+	});
+};
+//#endregion
+//#region src/components/ds-table/components/edit/cell-editors/ds-table-edit-cell-checkbox.tsx
+/** Checkbox editor for table cells. Render via `ColumnDef.editCell`. */
+const DsTableEditCellCheckbox = ({ cellContext, disabled }) => {
+	const { value, setValue } = useCellEditor({ cellContext });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsCheckbox, {
+		checked: value,
+		disabled,
+		onCheckedChange: (checked) => setValue(checked === true)
 	});
 };
 //#endregion
@@ -20431,19 +21427,37 @@ DsVerticalTabs.List = DsVerticalTabsList;
 DsVerticalTabs.Tab = DsVerticalTabsTab;
 DsVerticalTabs.Content = DsVerticalTabsContent;
 //#endregion
-//#region src/components/ds-workspace/ds-workspace.module.scss
-var ds_workspace_module_default = {
-	"content": "XEdo8q_content",
-	"fillParent": "XEdo8q_fillParent",
-	"footer": "XEdo8q_footer",
-	"header": "XEdo8q_header",
-	"root": "XEdo8q_root",
-	"subHeader": "XEdo8q_subHeader"
+//#region src/components/ds-workspace-layout/ds-workspace-layout.module.scss
+var ds_workspace_layout_module_default = {
+	"body": "pc7Upa_body",
+	"content": "pc7Upa_content",
+	"contentWithLeftPanel": "pc7Upa_contentWithLeftPanel",
+	"fillParent": "pc7Upa_fillParent",
+	"footer": "pc7Upa_footer",
+	"header": "pc7Upa_header",
+	"leftPanel": "pc7Upa_leftPanel",
+	"root": "pc7Upa_root",
+	"sideMenu": "pc7Upa_sideMenu",
+	"sideMenuPanel": "pc7Upa_sideMenuPanel",
+	"sideMenuPinButton": "pc7Upa_sideMenuPinButton",
+	"subHeader": "pc7Upa_subHeader"
+};
+//#endregion
+//#region src/components/ds-workspace-layout/ds-workspace-layout.context.ts
+const DsWorkspaceLayoutContext = (0, react.createContext)(null);
+const useDsWorkspaceLayoutContext = () => {
+	const context = (0, react.useContext)(DsWorkspaceLayoutContext);
+	if (!context) throw new Error("DsWorkspaceLayout compound components must be used within DsWorkspaceLayout");
+	return context;
 };
 //#endregion
-//#region src/components/ds-workspace/ds-workspace.tsx
-const DsWorkspace = (t0) => {
-	const $ = (0, react_compiler_runtime.c)(10);
+//#region src/components/ds-workspace-layout/ds-workspace-layout.tsx
+const DEFAULT_LOCALE = Object.freeze({
+	pinButtonLabel: "Pin side menu",
+	unpinButtonLabel: "Unpin side menu"
+});
+const DsWorkspaceLayout = (t0) => {
+	const $ = (0, react_compiler_runtime.c)(17);
 	let className;
 	let rest;
 	let t1;
@@ -20459,24 +21473,58 @@ const DsWorkspace = (t0) => {
 		t1 = $[3];
 	}
 	const fillParent = t1 === void 0 ? false : t1;
+	const [hasLeftSidePanel, setHasLeftSidePanel] = (0, react.useState)(false);
 	let t2;
-	if ($[4] !== className || $[5] !== fillParent) {
-		t2 = (0, classnames.default)(ds_workspace_module_default.root, { [ds_workspace_module_default.fillParent]: fillParent }, className);
-		$[4] = className;
-		$[5] = fillParent;
-		$[6] = t2;
-	} else t2 = $[6];
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = () => setHasLeftSidePanel(true);
+		$[4] = t2;
+	} else t2 = $[4];
+	const registerLeftSidePanel = t2;
 	let t3;
-	if ($[7] !== rest || $[8] !== t2) {
-		t3 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = () => setHasLeftSidePanel(false);
+		$[5] = t3;
+	} else t3 = $[5];
+	const unregisterLeftSidePanel = t3;
+	let t4;
+	if ($[6] !== hasLeftSidePanel) {
+		t4 = {
+			hasLeftSidePanel,
+			registerLeftSidePanel,
+			unregisterLeftSidePanel
+		};
+		$[6] = hasLeftSidePanel;
+		$[7] = t4;
+	} else t4 = $[7];
+	const contextValue = t4;
+	let t5;
+	if ($[8] !== className || $[9] !== fillParent) {
+		t5 = (0, classnames.default)(ds_workspace_layout_module_default.root, { [ds_workspace_layout_module_default.fillParent]: fillParent }, className);
+		$[8] = className;
+		$[9] = fillParent;
+		$[10] = t5;
+	} else t5 = $[10];
+	let t6;
+	if ($[11] !== rest || $[12] !== t5) {
+		t6 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			...rest,
-			className: t2
+			className: t5
 		});
-		$[7] = rest;
-		$[8] = t2;
-		$[9] = t3;
-	} else t3 = $[9];
-	return t3;
+		$[11] = rest;
+		$[12] = t5;
+		$[13] = t6;
+	} else t6 = $[13];
+	let t7;
+	if ($[14] !== contextValue || $[15] !== t6) {
+		t7 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsWorkspaceLayoutContext.Provider, {
+			value: contextValue,
+			children: t6
+		});
+		$[14] = contextValue;
+		$[15] = t6;
+		$[16] = t7;
+	} else t7 = $[16];
+	return t7;
 };
 const Header = (t0) => {
 	const $ = (0, react_compiler_runtime.c)(8);
@@ -20493,7 +21541,7 @@ const Header = (t0) => {
 	}
 	let t1;
 	if ($[3] !== className) {
-		t1 = (0, classnames.default)(ds_workspace_module_default.header, className);
+		t1 = (0, classnames.default)(ds_workspace_layout_module_default.header, className);
 		$[3] = className;
 		$[4] = t1;
 	} else t1 = $[4];
@@ -20524,7 +21572,7 @@ const SubHeader = (t0) => {
 	}
 	let t1;
 	if ($[3] !== className) {
-		t1 = (0, classnames.default)(ds_workspace_module_default.subHeader, className);
+		t1 = (0, classnames.default)(ds_workspace_layout_module_default.subHeader, className);
 		$[3] = className;
 		$[4] = t1;
 	} else t1 = $[4];
@@ -20540,8 +21588,41 @@ const SubHeader = (t0) => {
 	} else t2 = $[7];
 	return t2;
 };
-/** Stacking context for non-portal drawer containment. */
+/** Content area: column layout, 24px vertical margins, 16px gap, 40px horizontal margins (24px when LeftPanel is mounted). */
 const Content = (t0) => {
+	const $ = (0, react_compiler_runtime.c)(9);
+	let className;
+	let rest;
+	if ($[0] !== t0) {
+		({className, ...rest} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = rest;
+	} else {
+		className = $[1];
+		rest = $[2];
+	}
+	const { hasLeftSidePanel } = useDsWorkspaceLayoutContext();
+	let t1;
+	if ($[3] !== className || $[4] !== hasLeftSidePanel) {
+		t1 = (0, classnames.default)(ds_workspace_layout_module_default.content, { [ds_workspace_layout_module_default.contentWithLeftPanel]: hasLeftSidePanel }, className);
+		$[3] = className;
+		$[4] = hasLeftSidePanel;
+		$[5] = t1;
+	} else t1 = $[5];
+	let t2;
+	if ($[6] !== rest || $[7] !== t1) {
+		t2 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			...rest,
+			className: t1
+		});
+		$[6] = rest;
+		$[7] = t1;
+		$[8] = t2;
+	} else t2 = $[8];
+	return t2;
+};
+const Footer = (t0) => {
 	const $ = (0, react_compiler_runtime.c)(8);
 	let className;
 	let rest;
@@ -20556,13 +21637,13 @@ const Content = (t0) => {
 	}
 	let t1;
 	if ($[3] !== className) {
-		t1 = (0, classnames.default)(ds_workspace_module_default.content, className);
+		t1 = (0, classnames.default)(ds_workspace_layout_module_default.footer, className);
 		$[3] = className;
 		$[4] = t1;
 	} else t1 = $[4];
 	let t2;
 	if ($[5] !== rest || $[6] !== t1) {
-		t2 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		t2 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("footer", {
 			...rest,
 			className: t1
 		});
@@ -20572,7 +21653,7 @@ const Content = (t0) => {
 	} else t2 = $[7];
 	return t2;
 };
-const Footer = (t0) => {
+const Body = (t0) => {
 	const $ = (0, react_compiler_runtime.c)(8);
 	let className;
 	let rest;
@@ -20585,15 +21666,16 @@ const Footer = (t0) => {
 		className = $[1];
 		rest = $[2];
 	}
+	useDsWorkspaceLayoutContext();
 	let t1;
 	if ($[3] !== className) {
-		t1 = (0, classnames.default)(ds_workspace_module_default.footer, className);
+		t1 = (0, classnames.default)(ds_workspace_layout_module_default.body, className);
 		$[3] = className;
 		$[4] = t1;
 	} else t1 = $[4];
 	let t2;
 	if ($[5] !== rest || $[6] !== t1) {
-		t2 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("footer", {
+		t2 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			...rest,
 			className: t1
 		});
@@ -20603,10 +21685,170 @@ const Footer = (t0) => {
 	} else t2 = $[7];
 	return t2;
 };
-DsWorkspace.Header = Header;
-DsWorkspace.SubHeader = SubHeader;
-DsWorkspace.Content = Content;
-DsWorkspace.Footer = Footer;
+const SideMenu = (t0) => {
+	const $ = (0, react_compiler_runtime.c)(28);
+	let children;
+	let className;
+	let locale;
+	let onPinnedChange;
+	let rest;
+	let t1;
+	if ($[0] !== t0) {
+		({className, pinned: t1, onPinnedChange, locale, children, ...rest} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = locale;
+		$[4] = onPinnedChange;
+		$[5] = rest;
+		$[6] = t1;
+	} else {
+		children = $[1];
+		className = $[2];
+		locale = $[3];
+		onPinnedChange = $[4];
+		rest = $[5];
+		t1 = $[6];
+	}
+	const pinned = t1 === void 0 ? false : t1;
+	useDsWorkspaceLayoutContext();
+	const [isHovering, setIsHovering] = (0, react.useState)(false);
+	const isExpanded = pinned || isHovering;
+	const ariaLabel = pinned ? locale?.unpinButtonLabel ?? DEFAULT_LOCALE.unpinButtonLabel : locale?.pinButtonLabel ?? DEFAULT_LOCALE.pinButtonLabel;
+	let t2;
+	if ($[7] !== className) {
+		t2 = (0, classnames.default)(ds_workspace_layout_module_default.sideMenu, className);
+		$[7] = className;
+		$[8] = t2;
+	} else t2 = $[8];
+	let t3;
+	if ($[9] !== pinned) {
+		t3 = pinned ? { "data-pinned": "" } : {};
+		$[9] = pinned;
+		$[10] = t3;
+	} else t3 = $[10];
+	let t4;
+	if ($[11] !== isExpanded) {
+		t4 = isExpanded ? { "data-expanded": "" } : {};
+		$[11] = isExpanded;
+		$[12] = t4;
+	} else t4 = $[12];
+	let t5;
+	let t6;
+	if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = () => setIsHovering(true);
+		t6 = () => setIsHovering(false);
+		$[13] = t5;
+		$[14] = t6;
+	} else {
+		t5 = $[13];
+		t6 = $[14];
+	}
+	let t7;
+	if ($[15] !== ariaLabel || $[16] !== onPinnedChange || $[17] !== pinned) {
+		t7 = onPinnedChange ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+			type: "button",
+			className: ds_workspace_layout_module_default.sideMenuPinButton,
+			onClick: () => onPinnedChange(!pinned),
+			"aria-label": ariaLabel,
+			"aria-pressed": pinned,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsIcon, {
+				icon: "keep",
+				size: "small",
+				filled: pinned
+			})
+		}) : null;
+		$[15] = ariaLabel;
+		$[16] = onPinnedChange;
+		$[17] = pinned;
+		$[18] = t7;
+	} else t7 = $[18];
+	let t8;
+	if ($[19] !== children || $[20] !== t7) {
+		t8 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: ds_workspace_layout_module_default.sideMenuPanel,
+			onMouseEnter: t5,
+			onMouseLeave: t6,
+			children: [t7, children]
+		});
+		$[19] = children;
+		$[20] = t7;
+		$[21] = t8;
+	} else t8 = $[21];
+	let t9;
+	if ($[22] !== rest || $[23] !== t2 || $[24] !== t3 || $[25] !== t4 || $[26] !== t8) {
+		t9 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("aside", {
+			...rest,
+			className: t2,
+			...t3,
+			...t4,
+			children: t8
+		});
+		$[22] = rest;
+		$[23] = t2;
+		$[24] = t3;
+		$[25] = t4;
+		$[26] = t8;
+		$[27] = t9;
+	} else t9 = $[27];
+	return t9;
+};
+const LeftPanel = (t0) => {
+	const $ = (0, react_compiler_runtime.c)(12);
+	let className;
+	let rest;
+	if ($[0] !== t0) {
+		({className, ...rest} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = rest;
+	} else {
+		className = $[1];
+		rest = $[2];
+	}
+	const { registerLeftSidePanel, unregisterLeftSidePanel } = useDsWorkspaceLayoutContext();
+	let t1;
+	let t2;
+	if ($[3] !== registerLeftSidePanel || $[4] !== unregisterLeftSidePanel) {
+		t1 = () => {
+			registerLeftSidePanel();
+			return unregisterLeftSidePanel;
+		};
+		t2 = [registerLeftSidePanel, unregisterLeftSidePanel];
+		$[3] = registerLeftSidePanel;
+		$[4] = unregisterLeftSidePanel;
+		$[5] = t1;
+		$[6] = t2;
+	} else {
+		t1 = $[5];
+		t2 = $[6];
+	}
+	(0, react.useEffect)(t1, t2);
+	let t3;
+	if ($[7] !== className) {
+		t3 = (0, classnames.default)(ds_workspace_layout_module_default.leftPanel, className);
+		$[7] = className;
+		$[8] = t3;
+	} else t3 = $[8];
+	let t4;
+	if ($[9] !== rest || $[10] !== t3) {
+		t4 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("aside", {
+			...rest,
+			className: t3
+		});
+		$[9] = rest;
+		$[10] = t3;
+		$[11] = t4;
+	} else t4 = $[11];
+	return t4;
+};
+DsWorkspaceLayout.Header = Header;
+DsWorkspaceLayout.SubHeader = SubHeader;
+DsWorkspaceLayout.Content = Content;
+DsWorkspaceLayout.Footer = Footer;
+DsWorkspaceLayout.Body = Body;
+DsWorkspaceLayout.SideMenu = SideMenu;
+DsWorkspaceLayout.LeftPanel = LeftPanel;
 //#endregion
 exports.BREAKPOINT_LG = BREAKPOINT_LG;
 exports.DsAlertBanner = DsAlertBanner;
@@ -20673,6 +21915,14 @@ exports.DsStepContent = DsStepContent;
 exports.DsStepper = DsStepper;
 exports.DsSystemStatus = DsSystemStatus;
 exports.DsTable = DsTable;
+exports.DsTableColumnFilterPopover = DsTableColumnFilterPopover;
+exports.DsTableEditCellCheckbox = DsTableEditCellCheckbox;
+exports.DsTableEditCellDate = DsTableEditCellDate;
+exports.DsTableEditCellNumber = DsTableEditCellNumber;
+exports.DsTableEditCellSelect = DsTableEditCellSelect;
+exports.DsTableEditCellText = DsTableEditCellText;
+exports.DsTableEditableCell = DsTableEditableCell;
+exports.DsTableEditingCell = DsTableEditingCell;
 exports.DsTabs = DsTabs;
 exports.DsTag = DsTag;
 exports.DsTagFilter = DsTagFilter;
@@ -20686,7 +21936,7 @@ exports.DsTooltip = DsTooltip;
 exports.DsTree = DsTree;
 exports.DsTypography = DsTypography;
 exports.DsVerticalTabs = DsVerticalTabs;
-exports.DsWorkspace = DsWorkspace;
+exports.DsWorkspaceLayout = DsWorkspaceLayout;
 exports.FatalFileUploadError = FatalFileUploadError;
 exports.FileUpload = FileUpload;
 exports.FileUploadError = FileUploadError;
@@ -20705,6 +21955,7 @@ exports.createDsTreeCollection = createDsTreeCollection;
 exports.createDualRangeFilterAdapter = createDualRangeFilterAdapter;
 exports.createFilterAdapter = createFilterAdapter;
 exports.customIcons = customIcons;
+exports.defaultDsTableLocale = defaultDsTableLocale;
 exports.dropdownMenuItemVariants = dropdownMenuItemVariants;
 exports.dsKeyValuePairOrientations = dsKeyValuePairOrientations;
 exports.filterStatuses = filterStatuses;
@@ -20715,6 +21966,8 @@ exports.iconVariants = iconVariants;
 exports.isCustomIcon = isCustomIcon;
 exports.isResponsiveValue = isResponsiveValue;
 exports.loaderVariants = loaderVariants;
+exports.popoverAligns = popoverAligns;
+exports.popoverSides = popoverSides;
 exports.progressArcSizes = progressArcSizes;
 exports.progressArcVariants = progressArcVariants;
 exports.progressDonutSizes = progressDonutSizes;
@@ -20734,6 +21987,7 @@ exports.tagSizes = tagSizes;
 exports.tagVariants = tagVariants;
 exports.textInputSizes = textInputSizes;
 exports.useBreakpoint = useBreakpoint;
+exports.useCellEditor = useCellEditor;
 exports.useCheckboxSelectAll = useCheckboxSelectAll;
 exports.useFileUpload = useFileUpload;
 exports.useResponsiveValue = useResponsiveValue;