@drivenets/design-system 0.12.1 → 0.14.0

package/dist/index.js

@@ -2,7 +2,7 @@ import { c } from "react/compiler-runtime";
 import classNames from "classnames";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React$1 from "react";
-import React, { Children, Fragment as Fragment$1, createContext, createElement, isValidElement, useContext, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import React, { Children, Fragment as Fragment$1, createContext, createElement, isValidElement, useCallback, useContext, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { FileUpload as FileUpload$1, NumberInput, PasswordInput, Progress, Toast, Toaster, ark, createToaster } from "@ark-ui/react";
 import { Combobox, createListCollection } from "@ark-ui/react/combobox";
 import { useFilter } from "@ark-ui/react/locale";
@@ -24,7 +24,6 @@ import { CalendarDate, fromDate, getLocalTimeZone, parseDate } from "@internatio
 import { Popover } from "@ark-ui/react/popover";
 import { Select, createListCollection as createListCollection$1, useSelect, useSelectContext } from "@ark-ui/react/select";
 import * as Collapsible from "@radix-ui/react-collapsible";
-import * as Popover$1 from "@radix-ui/react-popover";
 import { RadioGroup } from "@ark-ui/react/radio-group";
 import { SegmentGroup } from "@ark-ui/react/segment-group";
 import * as steps from "@zag-js/steps";
@@ -3195,7 +3194,7 @@ const Title$2 = (t0) => {
 	} else t2 = $[5];
 	return t2;
 };
-const Body$4 = (t0) => {
+const Body$5 = (t0) => {
 	const $ = c(6);
 	const { style, className, children } = t0;
 	let t1;
@@ -3243,7 +3242,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
@@ -5519,7 +5518,7 @@ const Header$4 = (t0) => {
 /**
 * Card body - main content area.
 */
-const Body$3 = (t0) => {
+const Body$4 = (t0) => {
 	const $ = c(12);
 	let children;
 	let className;
@@ -5607,7 +5606,7 @@ const Footer$3 = (t0) => {
 const DsCard = {
 	Root: Root$3,
 	Header: Header$4,
-	Body: Body$3,
+	Body: Body$4,
 	Footer: Footer$3
 };
 //#endregion
@@ -5645,7 +5644,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"
 });
@@ -5750,7 +5749,7 @@ const Header$3 = (t0) => {
 	} else t2 = $[7];
 	return t2;
 };
-const Body$2 = (t0) => {
+const Body$3 = (t0) => {
 	const $ = c(8);
 	let className;
 	let rest;
@@ -5781,7 +5780,7 @@ const Body$2 = (t0) => {
 	} else t2 = $[7];
 	return t2;
 };
-const SideMenu = (t0) => {
+const SideMenu$1 = (t0) => {
 	const $ = c(32);
 	let children;
 	let className;
@@ -5827,7 +5826,7 @@ const SideMenu = (t0) => {
 	}
 	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 = classNames(ds_catalog_layout_module_default.sideMenu, className);
@@ -6020,8 +6019,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
@@ -7154,18 +7153,86 @@ var ds_tag_module_default = {
 	"exclude": "UdH7Tq_exclude",
 	"icon": "UdH7Tq_icon",
 	"include": "UdH7Tq_include",
+	"key": "UdH7Tq_key",
+	"keyValue": "UdH7Tq_keyValue",
 	"label": "UdH7Tq_label",
 	"selected": "UdH7Tq_selected",
 	"tag": "UdH7Tq_tag",
+	"value": "UdH7Tq_value",
 	"variantIcon": "UdH7Tq_variantIcon"
 };
 //#endregion
+//#region src/components/ds-stack/ds-stack.module.scss
+var ds_stack_module_default = { "root": "efmmNG_root" };
+//#endregion
+//#region src/components/ds-stack/ds-stack.tsx
+const DsStack$1 = (t0) => {
+	const $ = c(16);
+	const { direction, gap, alignItems, justifyContent, flex, flexWrap, width, children, className, style, ref } = t0;
+	let t1;
+	if ($[0] !== alignItems || $[1] !== direction || $[2] !== flex || $[3] !== flexWrap || $[4] !== gap || $[5] !== justifyContent || $[6] !== style || $[7] !== width) {
+		t1 = {
+			flexDirection: direction,
+			gap,
+			alignItems,
+			justifyContent,
+			flex,
+			flexWrap,
+			width,
+			...style
+		};
+		$[0] = alignItems;
+		$[1] = direction;
+		$[2] = flex;
+		$[3] = flexWrap;
+		$[4] = gap;
+		$[5] = justifyContent;
+		$[6] = style;
+		$[7] = width;
+		$[8] = t1;
+	} else t1 = $[8];
+	const layoutStyle = t1;
+	let t2;
+	if ($[9] !== className) {
+		t2 = classNames(ds_stack_module_default.root, className);
+		$[9] = className;
+		$[10] = t2;
+	} else t2 = $[10];
+	let t3;
+	if ($[11] !== children || $[12] !== layoutStyle || $[13] !== ref || $[14] !== t2) {
+		t3 = /* @__PURE__ */ jsx("div", {
+			ref,
+			className: t2,
+			style: layoutStyle,
+			children
+		});
+		$[11] = children;
+		$[12] = layoutStyle;
+		$[13] = ref;
+		$[14] = t2;
+		$[15] = t3;
+	} else t3 = $[15];
+	return t3;
+};
+//#endregion
+//#region src/components/ds-stack/index.ts
+const DsStack = withResponsiveProps(DsStack$1, [
+	"direction",
+	"gap",
+	"alignItems",
+	"justifyContent",
+	"flex",
+	"flexWrap",
+	"width"
+]);
+DsStack.displayName = "DsStack";
+//#endregion
 //#region src/components/ds-tag/ds-tag.tsx
 /**
 * Design system Tag component
 */
 const DsTag = (t0) => {
-	const $ = c(61);
+	const $ = c(64);
 	let className;
 	let label;
 	let onClick;
@@ -7179,8 +7246,9 @@ const DsTag = (t0) => {
 	let t4;
 	let t5;
 	let t6;
+	let value;
 	if ($[0] !== t0) {
-		({ref, label, className, style: t1, size: t2, selected: t3, variant: t4, disabled: t5, locale: t6, onClick, onDelete, slots, ...rest} = t0);
+		({ref, label, value, className, style: t1, size: t2, selected: t3, variant: t4, disabled: t5, locale: t6, onClick, onDelete, slots, ...rest} = t0);
 		$[0] = t0;
 		$[1] = className;
 		$[2] = label;
@@ -7195,6 +7263,7 @@ const DsTag = (t0) => {
 		$[11] = t4;
 		$[12] = t5;
 		$[13] = t6;
+		$[14] = value;
 	} else {
 		className = $[1];
 		label = $[2];
@@ -7209,31 +7278,32 @@ const DsTag = (t0) => {
 		t4 = $[11];
 		t5 = $[12];
 		t6 = $[13];
+		value = $[14];
 	}
 	let t7;
-	if ($[14] !== t1) {
+	if ($[15] !== t1) {
 		t7 = t1 === void 0 ? {} : t1;
-		$[14] = t1;
-		$[15] = t7;
-	} else t7 = $[15];
+		$[15] = t1;
+		$[16] = t7;
+	} else t7 = $[16];
 	const style = t7;
 	const size = t2 === void 0 ? "medium" : t2;
 	const selected = t3 === void 0 ? false : t3;
 	const variant = t4 === void 0 ? "default" : t4;
 	const disabled = t5 === void 0 ? false : t5;
 	let t8;
-	if ($[16] !== t6) {
+	if ($[17] !== t6) {
 		t8 = t6 === void 0 ? {} : t6;
-		$[16] = t6;
-		$[17] = t8;
-	} else t8 = $[17];
+		$[17] = t6;
+		$[18] = t8;
+	} else t8 = $[18];
 	const locale = t8;
 	const t9 = onClick !== void 0 && !disabled;
 	const t10 = selected && !disabled;
 	const t11 = variant === "include";
 	const t12 = variant === "exclude";
 	let t13;
-	if ($[18] !== className || $[19] !== disabled || $[20] !== t10 || $[21] !== t11 || $[22] !== t12 || $[23] !== t9) {
+	if ($[19] !== className || $[20] !== disabled || $[21] !== t10 || $[22] !== t11 || $[23] !== t12 || $[24] !== t9) {
 		t13 = classNames(ds_tag_module_default.tag, {
 			[ds_tag_module_default.clickable]: t9,
 			[ds_tag_module_default.selected]: t10,
@@ -7241,27 +7311,27 @@ const DsTag = (t0) => {
 			[ds_tag_module_default.exclude]: t12,
 			[ds_tag_module_default.disabled]: disabled
 		}, className);
-		$[18] = className;
-		$[19] = disabled;
-		$[20] = t10;
-		$[21] = t11;
-		$[22] = t12;
-		$[23] = t9;
-		$[24] = t13;
-	} else t13 = $[24];
+		$[19] = className;
+		$[20] = disabled;
+		$[21] = t10;
+		$[22] = t11;
+		$[23] = t12;
+		$[24] = t9;
+		$[25] = t13;
+	} else t13 = $[25];
 	const tagClass = t13;
 	let t14;
-	if ($[25] !== onDelete) {
+	if ($[26] !== onDelete) {
 		t14 = (event) => {
 			event.stopPropagation();
 			onDelete?.(event);
 		};
-		$[25] = onDelete;
-		$[26] = t14;
-	} else t14 = $[26];
+		$[26] = onDelete;
+		$[27] = t14;
+	} else t14 = $[27];
 	const handleDeleteClick = t14;
 	let t15;
-	if ($[27] !== onClick || $[28] !== onDelete) {
+	if ($[28] !== onClick || $[29] !== onDelete) {
 		t15 = (event_0) => {
 			if (onClick && (event_0.key === "Enter" || event_0.key === " ")) {
 				event_0.preventDefault();
@@ -7273,13 +7343,13 @@ const DsTag = (t0) => {
 				onDelete(event_0);
 			}
 		};
-		$[27] = onClick;
-		$[28] = onDelete;
-		$[29] = t15;
-	} else t15 = $[29];
+		$[28] = onClick;
+		$[29] = onDelete;
+		$[30] = t15;
+	} else t15 = $[30];
 	const handleKeyDownTag = t15;
 	let t16;
-	if ($[30] !== onDelete) {
+	if ($[31] !== onDelete) {
 		t16 = (event_1) => {
 			event_1.stopPropagation();
 			if (onDelete && (event_1.key === "Enter" || event_1.key === " ")) {
@@ -7287,21 +7357,21 @@ const DsTag = (t0) => {
 				onDelete(event_1);
 			}
 		};
-		$[30] = onDelete;
-		$[31] = t16;
-	} else t16 = $[31];
+		$[31] = onDelete;
+		$[32] = t16;
+	} else t16 = $[32];
 	const handleKeyDownDelete = t16;
 	let t17;
-	if ($[32] !== onClick) {
+	if ($[33] !== onClick) {
 		t17 = (event_2) => {
 			if (onClick) {
 				event_2.preventDefault();
 				onClick(event_2);
 			}
 		};
-		$[32] = onClick;
-		$[33] = t17;
-	} else t17 = $[33];
+		$[33] = onClick;
+		$[34] = t17;
+	} else t17 = $[34];
 	const handleClick = t17;
 	let iconVariant = null;
 	if (variant === "include") iconVariant = "check_circle";
@@ -7314,7 +7384,7 @@ const DsTag = (t0) => {
 	const t23 = typeof label === "string" ? label : void 0;
 	const t24 = onClick && selected && !disabled ? "true" : void 0;
 	let t25;
-	if ($[34] !== iconVariant || $[35] !== slots?.icon) {
+	if ($[35] !== iconVariant || $[36] !== slots?.icon) {
 		t25 = (slots?.icon || iconVariant) && /* @__PURE__ */ jsx("span", {
 			className: classNames(ds_tag_module_default.icon),
 			children: slots?.icon ?? (iconVariant && /* @__PURE__ */ jsx(DsIcon, {
@@ -7323,25 +7393,40 @@ const DsTag = (t0) => {
 				className: classNames(ds_tag_module_default.variantIcon)
 			}))
 		});
-		$[34] = iconVariant;
-		$[35] = slots?.icon;
-		$[36] = t25;
-	} else t25 = $[36];
-	const t26 = size === "small" ? "body-xs-reg" : "body-sm-reg";
-	let t27;
-	if ($[37] !== label || $[38] !== t26) {
-		t27 = /* @__PURE__ */ jsx(DsTypography, {
-			variant: t26,
+		$[35] = iconVariant;
+		$[36] = slots?.icon;
+		$[37] = t25;
+	} else t25 = $[37];
+	let t26;
+	if ($[38] !== label || $[39] !== size || $[40] !== value || $[41] !== variant) {
+		t26 = variant === "key-value" ? /* @__PURE__ */ jsxs(DsStack, {
+			direction: "row",
+			alignItems: "center",
+			gap: "var(--3xs)",
+			className: ds_tag_module_default.keyValue,
+			children: [/* @__PURE__ */ jsx(DsTypography, {
+				variant: size === "small" ? "body-xs-md" : "body-sm-md",
+				className: ds_tag_module_default.key,
+				children: label
+			}), /* @__PURE__ */ jsx(DsTypography, {
+				variant: size === "small" ? "body-xs-reg" : "body-sm-reg",
+				className: ds_tag_module_default.value,
+				children: value
+			})]
+		}) : /* @__PURE__ */ jsx(DsTypography, {
+			variant: size === "small" ? "body-xs-reg" : "body-sm-reg",
 			className: ds_tag_module_default.label,
 			children: label
 		});
-		$[37] = label;
-		$[38] = t26;
-		$[39] = t27;
-	} else t27 = $[39];
-	let t28;
-	if ($[40] !== disabled || $[41] !== handleDeleteClick || $[42] !== handleKeyDownDelete || $[43] !== locale || $[44] !== onDelete) {
-		t28 = onDelete && !disabled && /* @__PURE__ */ jsx("button", {
+		$[38] = label;
+		$[39] = size;
+		$[40] = value;
+		$[41] = variant;
+		$[42] = t26;
+	} else t26 = $[42];
+	let t27;
+	if ($[43] !== disabled || $[44] !== handleDeleteClick || $[45] !== handleKeyDownDelete || $[46] !== locale || $[47] !== onDelete) {
+		t27 = onDelete && !disabled && /* @__PURE__ */ jsx("button", {
 			type: "button",
 			className: ds_tag_module_default.deleteButton,
 			onClick: handleDeleteClick,
@@ -7353,16 +7438,16 @@ const DsTag = (t0) => {
 				size: "tiny"
 			})
 		});
-		$[40] = disabled;
-		$[41] = handleDeleteClick;
-		$[42] = handleKeyDownDelete;
-		$[43] = locale;
-		$[44] = onDelete;
-		$[45] = t28;
-	} else t28 = $[45];
-	let t29;
-	if ($[46] !== disabled || $[47] !== rest || $[48] !== style || $[49] !== t18 || $[50] !== t19 || $[51] !== t20 || $[52] !== t21 || $[53] !== t22 || $[54] !== t23 || $[55] !== t24 || $[56] !== t25 || $[57] !== t27 || $[58] !== t28 || $[59] !== tagClass) {
-		t29 = /* @__PURE__ */ jsxs("div", {
+		$[43] = disabled;
+		$[44] = handleDeleteClick;
+		$[45] = handleKeyDownDelete;
+		$[46] = locale;
+		$[47] = onDelete;
+		$[48] = t27;
+	} else t27 = $[48];
+	let t28;
+	if ($[49] !== disabled || $[50] !== rest || $[51] !== style || $[52] !== t18 || $[53] !== t19 || $[54] !== t20 || $[55] !== t21 || $[56] !== t22 || $[57] !== t23 || $[58] !== t24 || $[59] !== t25 || $[60] !== t26 || $[61] !== t27 || $[62] !== tagClass) {
+		t28 = /* @__PURE__ */ jsxs("div", {
 			ref: t18,
 			className: tagClass,
 			style,
@@ -7376,27 +7461,27 @@ const DsTag = (t0) => {
 			...rest,
 			children: [
 				t25,
-				t27,
-				t28
+				t26,
+				t27
 			]
 		});
-		$[46] = disabled;
-		$[47] = rest;
-		$[48] = style;
-		$[49] = t18;
-		$[50] = t19;
-		$[51] = t20;
-		$[52] = t21;
-		$[53] = t22;
-		$[54] = t23;
-		$[55] = t24;
-		$[56] = t25;
-		$[57] = t27;
-		$[58] = t28;
-		$[59] = tagClass;
-		$[60] = t29;
-	} else t29 = $[60];
-	return t29;
+		$[49] = disabled;
+		$[50] = rest;
+		$[51] = style;
+		$[52] = t18;
+		$[53] = t19;
+		$[54] = t20;
+		$[55] = t21;
+		$[56] = t22;
+		$[57] = t23;
+		$[58] = t24;
+		$[59] = t25;
+		$[60] = t26;
+		$[61] = t27;
+		$[62] = tagClass;
+		$[63] = t28;
+	} else t28 = $[63];
+	return t28;
 };
 //#endregion
 //#region src/components/ds-tag/ds-tag.types.ts
@@ -7404,7 +7489,8 @@ const tagSizes = ["medium", "small"];
 const tagVariants = [
 	"default",
 	"include",
-	"exclude"
+	"exclude",
+	"key-value"
 ];
 //#endregion
 //#region src/utils/merge-refs.ts
@@ -8248,6 +8334,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 $ = 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 = 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];
+	}
+	useLayoutEffect(t1, t2);
+};
+//#endregion
 //#region src/components/ds-drawer/ds-drawer.tsx
 const DsDrawer = (t0) => {
 	const $ = c(25);
@@ -8259,6 +8417,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) => {
@@ -8447,7 +8606,7 @@ const Toolbar = (t0) => {
 	} else t2 = $[5];
 	return t2;
 };
-const Body$1 = (t0) => {
+const Body$2 = (t0) => {
 	const $ = c(6);
 	const { style, className, children } = t0;
 	let t1;
@@ -8520,7 +8679,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
@@ -8730,87 +8889,86 @@ const DsTagFilter = (t0) => {
 	if (items.length === 0) return null;
 	let t9;
 	if ($[9] !== onItemDelete || $[10] !== onItemSelect) {
-		t9 = (item) => {
-			return /* @__PURE__ */ createElement(DsTag, {
-				...item.slotProps?.tag || {},
-				key: item.id,
-				label: item.label,
-				selected: item.selected,
-				onClick: onItemSelect ? () => onItemSelect(item) : void 0,
-				onDelete: onItemDelete ? () => onItemDelete(item) : void 0
-			});
-		};
+		t9 = (item) => ({
+			...item.slotProps?.tag,
+			label: item.label,
+			selected: item.selected,
+			onClick: onItemSelect ? () => onItemSelect(item) : void 0,
+			onDelete: onItemDelete ? () => onItemDelete(item) : void 0
+		});
 		$[9] = onItemDelete;
 		$[10] = onItemSelect;
 		$[11] = t9;
 	} else t9 = $[11];
-	const renderTag = t9;
+	const buildTagProps = t9;
 	let t10;
-	if ($[12] !== expanded || $[13] !== onExpand) {
-		t10 = () => {
+	if ($[12] !== buildTagProps) {
+		t10 = (item_0) => /* @__PURE__ */ jsx(DsTag, { ...buildTagProps(item_0) }, item_0.id);
+		$[12] = buildTagProps;
+		$[13] = t10;
+	} else t10 = $[13];
+	const renderTag = t10;
+	let t11;
+	if ($[14] !== expanded || $[15] !== onExpand) {
+		t11 = () => {
 			const newExpanded = !expanded;
 			setExpanded(newExpanded);
 			onExpand?.(newExpanded);
 		};
-		$[12] = expanded;
-		$[13] = onExpand;
-		$[14] = t10;
-	} else t10 = $[14];
-	const handleExpandToggle = t10;
-	let t11;
-	if ($[15] !== items || $[16] !== onItemDelete || $[17] !== onItemSelect) {
-		let t12;
-		if ($[19] !== onItemDelete || $[20] !== onItemSelect) {
-			t12 = (item_0) => /* @__PURE__ */ jsx(DsTag, {
-				"data-measure-tag": "",
-				label: item_0.label,
-				selected: item_0.selected,
-				onClick: onItemSelect ? () => onItemSelect(item_0) : void 0,
-				onDelete: onItemDelete ? () => onItemDelete(item_0) : void 0
-			}, item_0.id);
-			$[19] = onItemDelete;
-			$[20] = onItemSelect;
-			$[21] = t12;
-		} else t12 = $[21];
-		t11 = items.map(t12);
-		$[15] = items;
-		$[16] = onItemDelete;
-		$[17] = onItemSelect;
-		$[18] = t11;
-	} else t11 = $[18];
+		$[14] = expanded;
+		$[15] = onExpand;
+		$[16] = t11;
+	} else t11 = $[16];
+	const handleExpandToggle = t11;
 	let t12;
-	if ($[22] !== t11) {
-		t12 = /* @__PURE__ */ jsx("div", {
+	if ($[17] !== buildTagProps || $[18] !== items) {
+		let t13;
+		if ($[20] !== buildTagProps) {
+			t13 = (item_1) => /* @__PURE__ */ jsx(DsTag, {
+				"data-measure-tag": "",
+				...buildTagProps(item_1)
+			}, item_1.id);
+			$[20] = buildTagProps;
+			$[21] = t13;
+		} else t13 = $[21];
+		t12 = items.map(t13);
+		$[17] = buildTagProps;
+		$[18] = items;
+		$[19] = t12;
+	} else t12 = $[19];
+	let t13;
+	if ($[22] !== t12) {
+		t13 = /* @__PURE__ */ jsx("div", {
 			ref: measurementRef,
 			className: ds_tag_filter_module_default.measurementContainer,
 			"aria-hidden": "true",
-			children: t11
+			children: t12
 		});
-		$[22] = t11;
-		$[23] = t12;
-	} else t12 = $[23];
-	const measurementContainer = t12;
-	const t13 = expanded && ds_tag_filter_module_default.expanded;
-	let t14;
-	if ($[24] !== className || $[25] !== t13) {
-		t14 = classNames(ds_tag_filter_module_default.container, t13, className);
-		$[24] = className;
-		$[25] = t13;
-		$[26] = t14;
-	} else t14 = $[26];
+		$[22] = t12;
+		$[23] = t13;
+	} else t13 = $[23];
+	const measurementContainer = t13;
+	const t14 = expanded && ds_tag_filter_module_default.expanded;
 	let t15;
+	if ($[24] !== className || $[25] !== t14) {
+		t15 = classNames(ds_tag_filter_module_default.container, t14, className);
+		$[24] = className;
+		$[25] = t14;
+		$[26] = t15;
+	} else t15 = $[26];
+	let t16;
 	if ($[27] !== label) {
-		t15 = label && /* @__PURE__ */ jsx(DsTypography, {
+		t16 = label && /* @__PURE__ */ jsx(DsTypography, {
 			variant: "body-sm-reg",
 			className: ds_tag_filter_module_default.label,
 			children: label
 		});
 		$[27] = label;
-		$[28] = t15;
-	} else t15 = $[28];
-	let t16;
+		$[28] = t16;
+	} else t16 = $[28];
+	let t17;
 	if ($[29] !== expanded || $[30] !== handleExpandToggle || $[31] !== hasOverflow || $[32] !== hiddenCount || $[33] !== showLess || $[34] !== showMore) {
-		t16 = hasOverflow && /* @__PURE__ */ jsxs(DsButton, {
+		t17 = hasOverflow && /* @__PURE__ */ jsxs(DsButton, {
 			design: "v1.2",
 			buttonType: "tertiary",
 			variant: "ghost",
@@ -8826,11 +8984,11 @@ const DsTagFilter = (t0) => {
 		$[32] = hiddenCount;
 		$[33] = showLess;
 		$[34] = showMore;
-		$[35] = t16;
-	} else t16 = $[35];
-	let t17;
+		$[35] = t17;
+	} else t17 = $[35];
+	let t18;
 	if ($[36] !== clearButton || $[37] !== onClearAll) {
-		t17 = onClearAll && /* @__PURE__ */ jsxs(DsButton, {
+		t18 = onClearAll && /* @__PURE__ */ jsxs(DsButton, {
 			design: "v1.2",
 			buttonType: "tertiary",
 			variant: "ghost",
@@ -8842,78 +9000,78 @@ const DsTagFilter = (t0) => {
 		});
 		$[36] = clearButton;
 		$[37] = onClearAll;
-		$[38] = t17;
-	} else t17 = $[38];
-	let t18;
-	if ($[39] !== t16 || $[40] !== t17) {
-		t18 = /* @__PURE__ */ jsxs("div", {
-			className: ds_tag_filter_module_default.headerActions,
-			children: [t16, t17]
-		});
-		$[39] = t16;
-		$[40] = t17;
-		$[41] = t18;
-	} else t18 = $[41];
+		$[38] = t18;
+	} else t18 = $[38];
 	let t19;
-	if ($[42] !== t15 || $[43] !== t18) {
+	if ($[39] !== t17 || $[40] !== t18) {
 		t19 = /* @__PURE__ */ jsxs("div", {
-			className: ds_tag_filter_module_default.header,
-			children: [t15, t18]
+			className: ds_tag_filter_module_default.headerActions,
+			children: [t17, t18]
 		});
-		$[42] = t15;
-		$[43] = t18;
-		$[44] = t19;
-	} else t19 = $[44];
+		$[39] = t17;
+		$[40] = t18;
+		$[41] = t19;
+	} else t19 = $[41];
 	let t20;
+	if ($[42] !== t16 || $[43] !== t19) {
+		t20 = /* @__PURE__ */ jsxs("div", {
+			className: ds_tag_filter_module_default.header,
+			children: [t16, t19]
+		});
+		$[42] = t16;
+		$[43] = t19;
+		$[44] = t20;
+	} else t20 = $[44];
+	let t21;
 	if ($[45] !== renderTag || $[46] !== visibleTags) {
-		let t21;
+		let t22;
 		if ($[48] !== renderTag) {
-			t21 = (item_1) => renderTag(item_1);
+			t22 = (item_2) => renderTag(item_2);
 			$[48] = renderTag;
-			$[49] = t21;
-		} else t21 = $[49];
-		t20 = visibleTags.map(t21);
+			$[49] = t22;
+		} else t22 = $[49];
+		t21 = visibleTags.map(t22);
 		$[45] = renderTag;
 		$[46] = visibleTags;
-		$[47] = t20;
-	} else t20 = $[47];
-	let t21;
-	if ($[50] !== t20) {
-		t21 = /* @__PURE__ */ jsx("div", {
+		$[47] = t21;
+	} else t21 = $[47];
+	let t22;
+	if ($[50] !== t21) {
+		t22 = /* @__PURE__ */ jsx("div", {
 			className: ds_tag_filter_module_default.tagsArea,
-			children: t20
+			children: t21
 		});
-		$[50] = t20;
-		$[51] = t21;
-	} else t21 = $[51];
-	let t22;
-	if ($[52] !== style || $[53] !== t14 || $[54] !== t19 || $[55] !== t21) {
-		t22 = /* @__PURE__ */ jsxs("div", {
+		$[50] = t21;
+		$[51] = t22;
+	} else t22 = $[51];
+	let t23;
+	if ($[52] !== style || $[53] !== t15 || $[54] !== t20 || $[55] !== t22) {
+		t23 = /* @__PURE__ */ jsxs("div", {
 			ref: containerRef,
-			className: t14,
+			className: t15,
 			style,
-			children: [t19, t21]
+			children: [t20, t22]
 		});
 		$[52] = style;
-		$[53] = t14;
-		$[54] = t19;
-		$[55] = t21;
-		$[56] = t22;
-	} else t22 = $[56];
-	let t23;
+		$[53] = t15;
+		$[54] = t20;
+		$[55] = t22;
+		$[56] = t23;
+	} else t23 = $[56];
+	let t24;
 	if ($[57] !== measurementContainer) {
-		t23 = createPortal(measurementContainer, document.body);
+		t24 = createPortal(measurementContainer, document.body);
 		$[57] = measurementContainer;
-		$[58] = t23;
-	} else t23 = $[58];
-	let t24;
-	if ($[59] !== t22 || $[60] !== t23) {
-		t24 = /* @__PURE__ */ jsxs(Fragment, { children: [t22, t23] });
-		$[59] = t22;
-		$[60] = t23;
-		$[61] = t24;
-	} else t24 = $[61];
-	return t24;
+		$[58] = t24;
+	} else t24 = $[58];
+	let t25;
+	if ($[59] !== t23 || $[60] !== t24) {
+		t25 = /* @__PURE__ */ jsxs(Fragment, { children: [t23, t24] });
+		$[59] = t23;
+		$[60] = t24;
+		$[61] = t25;
+	} else t25 = $[61];
+	return t25;
 };
 //#endregion
 //#region src/components/ds-comments-drawer/comments-filters.ts
@@ -9068,6 +9226,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) => {
@@ -9214,7 +9373,7 @@ const CloseTrigger = (t0) => {
 	} else t2 = $[3];
 	return t2;
 };
-const Body = (t0) => {
+const Body$1 = (t0) => {
 	const $ = c(6);
 	const { style, className, children } = t0;
 	let t1;
@@ -9286,7 +9445,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
@@ -13130,66 +13289,50 @@ const DsFormControlDescription = (t0) => {
 	return t2;
 };
 const DsFormControl = (t0) => {
-	const $ = 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 $ = 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 = 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 = classNames(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 = classNames(ds_form_control_module_default.container, className, t5);
 		$[2] = className;
-		$[3] = t4;
-		$[4] = t5;
-	} else t5 = $[4];
-	let t6;
-	if ($[5] !== required) {
-		t6 = classNames(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__ */ jsx("label", {
-			htmlFor: controlId,
-			className: t6,
-			children: label
+	if ($[5] !== controlId || $[6] !== hideLabel || $[7] !== label || $[8] !== required || $[9] !== slots) {
+		t7 = !hideLabel && /* @__PURE__ */ jsxs("div", {
+			className: ds_form_control_module_default.labelContainer,
+			children: [/* @__PURE__ */ jsx("label", {
+				htmlFor: controlId,
+				className: classNames(ds_form_control_module_default.label, { [ds_form_control_module_default.required]: required }),
+				children: label
+			}), slots?.endAdornment && /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsxs("div", {
+	if ($[11] !== message || $[12] !== messageIcon) {
+		t8 = message && /* @__PURE__ */ jsxs("div", {
 			className: ds_form_control_module_default.message,
 			children: [/* @__PURE__ */ jsx(DsIcon, {
 				icon: messageIcon,
@@ -13197,39 +13340,39 @@ const DsFormControl = (t0) => {
 				filled: true
 			}), /* @__PURE__ */ 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__ */ 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__ */ 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__ */ 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__ */ 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);
@@ -15399,155 +15542,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 $ = c(13);
-	const { trigger, children, className, align: t1, side: t2 } = t0;
-	const align = t1 === void 0 ? "center" : t1;
-	const side = t2 === void 0 ? "top" : t2;
-	let t3;
-	if ($[0] !== trigger) {
-		t3 = /* @__PURE__ */ jsx(Popover$1.Trigger, {
-			asChild: true,
-			children: trigger
-		});
-		$[0] = trigger;
-		$[1] = t3;
-	} else t3 = $[1];
-	let t4;
-	if ($[2] !== className) {
-		t4 = classNames(ds_popover_module_default.content, className);
-		$[2] = className;
-		$[3] = t4;
-	} else t4 = $[3];
+const DEFAULT_PANEL_WIDTH = 400;
+const toPlacement = (side, align) => align === "center" ? side : `${side}-${align}`;
+const DsPopoverRoot = (t0) => {
+	const $ = c(15);
+	const { open, defaultOpen, side: t1, align: t2, gutter: t3, modal: t4, children, onOpenChange } = t0;
+	const side = t1 === void 0 ? "bottom" : t1;
+	const align = t2 === void 0 ? "center" : t2;
+	const gutter = t3 === void 0 ? 8 : t3;
+	const modal = t4 === void 0 ? false : t4;
 	let t5;
-	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
-		t5 = /* @__PURE__ */ jsx(Popover$1.Arrow, { className: ds_popover_module_default.arrow });
-		$[4] = t5;
-	} else t5 = $[4];
+	if ($[0] !== align || $[1] !== side) {
+		t5 = toPlacement(side, align);
+		$[0] = align;
+		$[1] = side;
+		$[2] = t5;
+	} else t5 = $[2];
 	let t6;
-	if ($[5] !== align || $[6] !== children || $[7] !== side || $[8] !== t4) {
-		t6 = /* @__PURE__ */ jsx(Popover$1.Portal, { children: /* @__PURE__ */ jsxs(Popover$1.Content, {
-			side,
-			align,
-			sideOffset: 8,
-			collisionPadding: 16,
-			className: t4,
-			children: [children, t5]
-		}) });
-		$[5] = align;
-		$[6] = children;
-		$[7] = side;
-		$[8] = t4;
-		$[9] = t6;
-	} else t6 = $[9];
+	if ($[3] !== gutter || $[4] !== t5) {
+		t6 = {
+			placement: t5,
+			gutter
+		};
+		$[3] = gutter;
+		$[4] = t5;
+		$[5] = t6;
+	} else t6 = $[5];
 	let t7;
-	if ($[10] !== t3 || $[11] !== t6) {
-		t7 = /* @__PURE__ */ jsxs(Popover$1.Root, { children: [t3, t6] });
-		$[10] = t3;
-		$[11] = t6;
-		$[12] = t7;
-	} else t7 = $[12];
-	return t7;
-};
-//#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__ */ jsx(Popover.Root, {
+			open,
+			defaultOpen,
+			modal,
+			positioning: t6,
+			onOpenChange: t7,
+			children
+		});
+		$[8] = children;
+		$[9] = defaultOpen;
+		$[10] = modal;
+		$[11] = open;
+		$[12] = t6;
+		$[13] = t7;
+		$[14] = t8;
+	} else t8 = $[14];
+	return t8;
 };
-//#endregion
-//#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 $ = c(3);
+	const { children, className } = t0;
+	let t1;
+	if ($[0] !== children || $[1] !== className) {
+		t1 = /* @__PURE__ */ jsx(Popover.Trigger, {
+			asChild: true,
+			className,
+			children
+		});
+		$[0] = children;
+		$[1] = className;
+		$[2] = t1;
+	} else t1 = $[2];
+	return t1;
 };
-const 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 $ = c(11);
+	const { width: t1, className, style, children, ref, "aria-label": ariaLabel } = t0;
+	const width = t1 === void 0 ? DEFAULT_PANEL_WIDTH : t1;
+	let t2;
+	if ($[0] !== className) {
+		t2 = classNames(ds_popover_module_default.panel, className);
+		$[0] = className;
+		$[1] = t2;
+	} else t2 = $[1];
+	let t3;
+	if ($[2] !== style || $[3] !== width) {
+		t3 = {
+			...style,
+			width
+		};
+		$[2] = style;
+		$[3] = width;
+		$[4] = t3;
+	} else t3 = $[4];
+	let t4;
+	if ($[5] !== ariaLabel || $[6] !== children || $[7] !== ref || $[8] !== t2 || $[9] !== t3) {
+		t4 = /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Popover.Positioner, { children: /* @__PURE__ */ jsx(Popover.Content, {
+			ref,
+			"aria-label": ariaLabel,
+			className: t2,
+			style: t3,
+			children
+		}) }) });
+		$[5] = ariaLabel;
+		$[6] = children;
+		$[7] = ref;
+		$[8] = t2;
+		$[9] = t3;
+		$[10] = t4;
+	} else t4 = $[10];
+	return t4;
 };
-//#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 $ = c(65);
-	let children;
-	let className;
-	let props;
-	let ref;
-	let style;
+const DsPopoverHeader = (t0) => {
+	const $ = c(11);
+	const { icon, className, style, children } = t0;
 	let t1;
+	if ($[0] !== className) {
+		t1 = classNames(ds_popover_module_default.header, className);
+		$[0] = className;
+		$[1] = t1;
+	} else t1 = $[1];
 	let t2;
+	if ($[2] !== icon) {
+		t2 = icon && /* @__PURE__ */ jsx("span", {
+			className: ds_popover_module_default.headerIcon,
+			children: icon
+		});
+		$[2] = icon;
+		$[3] = t2;
+	} else t2 = $[3];
 	let t3;
-	if ($[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__ */ jsx(Popover.Title, {
+			className: ds_popover_module_default.title,
+			asChild: true,
+			children: /* @__PURE__ */ jsx(DsTypography, {
+				variant: "heading3",
+				color: "main",
+				children
+			})
+		});
+		$[4] = children;
+		$[5] = t3;
+	} else t3 = $[5];
+	let t4;
+	if ($[6] !== style || $[7] !== t1 || $[8] !== t2 || $[9] !== t3) {
+		t4 = /* @__PURE__ */ jsxs("div", {
+			className: t1,
+			style,
+			children: [t2, t3]
+		});
+		$[6] = style;
+		$[7] = t1;
+		$[8] = t2;
+		$[9] = t3;
+		$[10] = t4;
+	} else t4 = $[10];
+	return t4;
+};
+const DsPopoverContent = (t0) => {
+	const $ = c(6);
+	const { className, style, children } = t0;
+	let t1;
+	if ($[0] !== className) {
+		t1 = classNames(ds_popover_module_default.content, className);
+		$[0] = className;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== children || $[3] !== style || $[4] !== t1) {
+		t2 = /* @__PURE__ */ jsx("div", {
+			className: t1,
+			style,
+			children
+		});
+		$[2] = children;
+		$[3] = style;
+		$[4] = t1;
+		$[5] = t2;
+	} else t2 = $[5];
+	return t2;
+};
+const DsPopoverContentItem = (t0) => {
+	const $ = c(11);
+	const { status, headline, className, style, children } = t0;
+	const hasHeader = Boolean(status) || Boolean(headline);
+	let t1;
+	if ($[0] !== hasHeader || $[1] !== headline || $[2] !== status) {
+		t1 = hasHeader && /* @__PURE__ */ jsxs(DsStack, {
+			direction: "row",
+			alignItems: "center",
+			gap: "var(--xs)",
+			children: [status, headline && /* @__PURE__ */ jsx(DsTypography, {
+				variant: "body-sm-semi-bold",
+				color: "main",
+				children: headline
+			})]
+		});
+		$[0] = hasHeader;
+		$[1] = headline;
+		$[2] = status;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== children) {
+		t2 = children && /* @__PURE__ */ jsx(DsTypography, {
+			variant: "body-sm-reg",
+			color: "main",
+			asChild: true,
+			children: /* @__PURE__ */ jsx(DsStack, {
+				direction: "row",
+				alignItems: "center",
+				gap: "var(--xs)",
+				children
+			})
+		});
+		$[4] = children;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== className || $[7] !== style || $[8] !== t1 || $[9] !== t2) {
+		t3 = /* @__PURE__ */ jsxs(DsStack, {
+			direction: "column",
+			gap: "var(--xs)",
+			className,
+			style,
+			children: [t1, t2]
+		});
+		$[6] = className;
+		$[7] = style;
+		$[8] = t1;
+		$[9] = t2;
+		$[10] = t3;
+	} else t3 = $[10];
+	return t3;
+};
+const DsPopoverFooter = (t0) => {
+	const $ = c(6);
+	const { className, style, children } = t0;
+	let t1;
+	if ($[0] !== className) {
+		t1 = classNames(ds_popover_module_default.footer, className);
+		$[0] = className;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== children || $[3] !== style || $[4] !== t1) {
+		t2 = /* @__PURE__ */ jsx("div", {
+			className: t1,
+			style,
+			children
+		});
+		$[2] = children;
+		$[3] = style;
+		$[4] = t1;
+		$[5] = t2;
+	} else t2 = $[5];
+	return t2;
+};
+/**
+* Legacy single-element form. Keeps the old call signature and `side` default
+* ('top') compiling and opening, but now renders the new fixed-width panel —
+* styling differs from the old Radix popover and the Radix `Popover.Close`
+* context is no longer wired.
+* @deprecated Migrate to the compound API (`DsPopover.Root` / `.Trigger` / `.Panel`).
+*/
+const DsPopoverLegacy = (t0) => {
+	const $ = c(10);
+	const { trigger, children, className, side: t1, align: t2 } = t0;
+	const side = t1 === void 0 ? "top" : t1;
+	const align = t2 === void 0 ? "center" : t2;
+	let t3;
+	if ($[0] !== trigger) {
+		t3 = /* @__PURE__ */ jsx(DsPopoverTrigger, { children: trigger });
+		$[0] = trigger;
+		$[1] = t3;
+	} else t3 = $[1];
+	let t4;
+	if ($[2] !== children || $[3] !== className) {
+		t4 = /* @__PURE__ */ jsx(DsPopoverPanel, {
+			className,
+			children
+		});
+		$[2] = children;
+		$[3] = className;
+		$[4] = t4;
+	} else t4 = $[4];
+	let t5;
+	if ($[5] !== align || $[6] !== side || $[7] !== t3 || $[8] !== t4) {
+		t5 = /* @__PURE__ */ jsxs(DsPopoverRoot, {
+			side,
+			align,
+			children: [t3, t4]
+		});
+		$[5] = align;
+		$[6] = side;
+		$[7] = t3;
+		$[8] = t4;
+		$[9] = t5;
+	} else t5 = $[9];
+	return t5;
+};
+const DsPopover = Object.assign(DsPopoverLegacy, {
+	Root: DsPopoverRoot,
+	Trigger: DsPopoverTrigger,
+	Panel: DsPopoverPanel,
+	Header: DsPopoverHeader,
+	Content: DsPopoverContent,
+	ContentItem: DsPopoverContentItem,
+	Footer: DsPopoverFooter
+});
+//#endregion
+//#region src/components/ds-popover/ds-popover.types.ts
+const popoverSides = [
+	"top",
+	"right",
+	"bottom",
+	"left"
+];
+const popoverAligns = [
+	"start",
+	"center",
+	"end"
+];
+//#endregion
+//#region src/components/ds-progress-arc/ds-progress-arc.module.scss
+var ds_progress_arc_module_default = {
+	"center": "GIMU2W_center",
+	"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 $ = 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;
@@ -17223,91 +17639,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 $ = c(16);
-	const { direction, gap, alignItems, justifyContent, flex, flexWrap, width, children, className, style, ref } = t0;
-	let t1;
-	if ($[0] !== alignItems || $[1] !== direction || $[2] !== flex || $[3] !== flexWrap || $[4] !== gap || $[5] !== justifyContent || $[6] !== style || $[7] !== width) {
-		t1 = {
-			flexDirection: direction,
-			gap,
-			alignItems,
-			justifyContent,
-			flex,
-			flexWrap,
-			width,
-			...style
-		};
-		$[0] = alignItems;
-		$[1] = direction;
-		$[2] = flex;
-		$[3] = flexWrap;
-		$[4] = gap;
-		$[5] = justifyContent;
-		$[6] = style;
-		$[7] = width;
-		$[8] = t1;
-	} else t1 = $[8];
-	const layoutStyle = t1;
-	let t2;
-	if ($[9] !== className) {
-		t2 = classNames(ds_stack_module_default.root, className);
-		$[9] = className;
-		$[10] = t2;
-	} else t2 = $[10];
-	let t3;
-	if ($[11] !== children || $[12] !== layoutStyle || $[13] !== ref || $[14] !== t2) {
-		t3 = /* @__PURE__ */ jsx("div", {
-			ref,
-			className: t2,
-			style: layoutStyle,
-			children
-		});
-		$[11] = children;
-		$[12] = layoutStyle;
-		$[13] = ref;
-		$[14] = t2;
-		$[15] = t3;
-	} else t3 = $[15];
-	return t3;
-};
-//#endregion
-//#region src/components/ds-stack/index.ts
-const DsStack = withResponsiveProps(DsStack$1, [
-	"direction",
-	"gap",
-	"alignItems",
-	"justifyContent",
-	"flex",
-	"flexWrap",
-	"width"
-]);
-DsStack.displayName = "DsStack";
-//#endregion
-//#region src/components/ds-status-badge/ds-status-badge.module.scss
-var ds_status_badge_module_default = {
-	"active": "U5k6UG_active",
-	"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 $ = c(16);
 	const { icon, status, label: t1, className, style, ghost: t2, size: t3, "aria-label": t4 } = t0;
 	const label = t1 === void 0 ? status : t1;
@@ -18107,68 +18458,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 {
@@ -18185,31 +18477,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] = 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__ */ 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__ */ jsxs("div", {
+		className: classNames(checkbox_filter_module_default.root, className),
+		children: [searchable && /* @__PURE__ */ jsx(DsTextInput, {
+			value: query,
+			placeholder: searchPlaceholder,
+			onValueChange: setQuery,
+			slots: { startAdornment: /* @__PURE__ */ jsx(DsIcon, {
+				icon: "search",
+				size: "tiny"
+			}) }
+		}), /* @__PURE__ */ jsxs("div", {
+			className: checkbox_filter_module_default.list,
+			role: "group",
+			children: [
+				selectAll && visibleItems.length > 0 && /* @__PURE__ */ jsx(DsCheckbox, {
+					className: checkbox_filter_module_default.checkboxItem,
+					label: allLabel,
+					checked: allVisibleSelected ? true : someVisibleSelected ? "indeterminate" : false,
+					onCheckedChange: handleSelectAllChange
+				}),
+				visibleItems.length === 0 && /* @__PURE__ */ 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__ */ 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,
@@ -18241,7 +18580,10 @@ function createCheckboxFilterAdapter(config) {
 				items,
 				renderer,
 				selectedItems: value,
-				onSelectionChange: onChange
+				onSelectionChange: onChange,
+				searchable,
+				selectAll,
+				locale
 			});
 		}
 	});
@@ -18326,10 +18668,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 = {};
@@ -18408,28 +18747,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;
@@ -18464,13 +18791,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) => {
@@ -18491,6 +18833,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;
@@ -18504,13 +18869,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,
@@ -18521,12 +18888,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] = 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__ */ jsxs(Popover.Root, {
+		open,
+		onOpenChange: handleOpenChange,
+		positioning: {
+			placement: "bottom-end",
+			gutter: 4
+		},
+		children: [/* @__PURE__ */ jsx(Popover.Trigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx(DsButtonV3, {
+				variant: "tertiary",
+				size: "tiny",
+				className: classNames(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__ */ jsx(DsIcon, {
+					icon: "filter_alt",
+					variant: "outlined",
+					filled: hasActiveFilter,
+					size: "tiny"
+				})
+			})
+		}), /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Popover.Positioner, { children: /* @__PURE__ */ jsxs(Popover.Content, {
+			className: classNames(column_filter_popover_module_default.content, className),
+			onClick: stopPropagation,
+			children: [/* @__PURE__ */ jsx("div", {
+				className: column_filter_popover_module_default.body,
+				children
+			}), /* @__PURE__ */ jsxs("div", {
+				className: column_filter_popover_module_default.footer,
+				children: [/* @__PURE__ */ jsx(DsButtonV3, {
+					variant: "secondary",
+					size: "small",
+					onClick: handleClear,
+					children: clearLabel
+				}), /* @__PURE__ */ 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",
@@ -18663,6 +19112,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",
@@ -18697,18 +19150,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] = useState(null);
+	const onCellEditRef = useRef(onCellEdit);
+	onCellEditRef.current = onCellEdit;
+	const onCellValidateRef = useRef(onCellValidate);
+	onCellValidateRef.current = onCellValidate;
+	const editingRef = useRef(editing);
+	editingRef.current = editing;
+	return {
+		editing,
+		beginEdit: 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: useCallback((value) => {
+			const current = editingRef.current;
+			if (!current) return;
+			setEditing({
+				...current,
+				draftValue: value,
+				error: null
+			});
+		}, []),
+		commit: 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: 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 !== defaultColumnSizing.size) return { width: columnSize };
-	if (virtualized) return { flex: 1 };
+const getColumnSizeStyle = (columnSize) => {
+	if (columnSize !== 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.
@@ -18724,6 +19242,154 @@ const SELECT_COLUMN_ID = "select";
 */
 const REORDER_COLUMN_ID = "reorder";
 //#endregion
+//#region src/components/ds-table/grouping/utils/column-group.ts
+/**
+* Builds the flex style for a group header cell so it lines up with the combined
+* width of its visible leaf columns.
+*
+* Fixed-width leaves contribute to `flexBasis`; default-sized leaves each add one
+* unit of `flexGrow`, mirroring how {@link getColumnSizeStyle} sizes leaf cells so
+* both header rows distribute free space identically.
+*/
+const getGroupColumnSizeStyle = (leafColumns) => {
+	let fixedWidth = 0;
+	let flexCount = 0;
+	for (const leaf of leafColumns) {
+		const size = leaf.getSize();
+		if (size !== defaultColumnSizing.size) fixedWidth += size;
+		else flexCount += 1;
+	}
+	if (flexCount === 0) return {
+		width: fixedWidth,
+		minWidth: fixedWidth,
+		flexShrink: 0
+	};
+	return {
+		flexGrow: flexCount,
+		flexShrink: 0,
+		flexBasis: fixedWidth,
+		minWidth: fixedWidth
+	};
+};
+/**
+* Whether a column is the first visible leaf of its parent group. Used to draw a
+* single side border at the start of each group in both the header and body.
+*/
+const isFirstLeafColumnOfGroup = (column) => {
+	const parent = column.parent;
+	if (!parent) return false;
+	return parent.getLeafColumns().filter((leaf) => leaf.getIsVisible())[0]?.id === column.id;
+};
+const getLeafColumnId = (def) => def.id ?? def.accessorKey;
+/**
+* Collects the ids of groups declared with `meta.group.defaultCollapsed`, used to
+* seed the uncontrolled collapse state.
+*/
+const getInitialCollapsedGroups = (columns) => {
+	const collapsed = [];
+	const visit = (defs) => {
+		for (const def of defs) if (def.columns) {
+			if (def.id && def.meta?.group?.defaultCollapsed) collapsed.push(def.id);
+			visit(def.columns);
+		}
+	};
+	visit(columns);
+	return collapsed;
+};
+/**
+* Maps collapsed groups to a {@link VisibilityState} that hides every leaf column
+* inside a collapsed group except those flagged `meta.keepVisibleWhenCollapsed`.
+* Layered on top of the consumer's own visibility so collapse never mutates it.
+*/
+const getCollapsedColumnVisibility = (columns, collapsedGroupIds) => {
+	const visibility = {};
+	const visit = (defs, isInsideCollapsedGroup) => {
+		for (const def of defs) {
+			if (def.columns) {
+				const isGroupCollapsed = isInsideCollapsedGroup || !!def.id && collapsedGroupIds.includes(def.id);
+				visit(def.columns, isGroupCollapsed);
+				continue;
+			}
+			if (!isInsideCollapsedGroup || def.meta?.keepVisibleWhenCollapsed) continue;
+			const columnId = getLeafColumnId(def);
+			if (columnId) visibility[columnId] = false;
+		}
+	};
+	visit(columns, false);
+	return visibility;
+};
+//#endregion
+//#region src/components/ds-table/grouping/hooks/use-column-groups.ts
+/**
+* Manages column-group collapse state. Supports both controlled
+* (`collapsedColumnGroups` + `onCollapsedColumnGroupsChange`) and uncontrolled
+* usage (seeded from `meta.group.defaultCollapsed`).
+*/
+const useColumnGroups = ({ columns, collapsedColumnGroups, onCollapsedColumnGroupsChange }) => {
+	const [collapsed, setCollapsed] = useControlled(collapsedColumnGroups, onCollapsedColumnGroupsChange, getInitialCollapsedGroups(columns));
+	const toggleColumnGroup = (groupId) => {
+		setCollapsed(collapsed.includes(groupId) ? collapsed.filter((id) => id !== groupId) : [...collapsed, groupId]);
+	};
+	return {
+		collapsedColumnGroups: collapsed,
+		toggleColumnGroup,
+		collapsedVisibility: useMemo(() => getCollapsedColumnVisibility(columns, collapsed), [columns, collapsed])
+	};
+};
+//#endregion
+//#region src/components/ds-table/ds-table.types.ts
+/**
+* Default English strings for {@link DsTableLocale}.
+*/
+const defaultDsTableLocale = Object.freeze({
+	collapseColumnGroup: "Collapse column group",
+	expandColumnGroup: "Expand column group"
+});
+//#endregion
+//#region src/components/ds-table/components/ds-table-group-header-cell/ds-table-group-header-cell.module.scss
+var ds_table_group_header_cell_module_default = {
+	"collapseToggle": "HuJ4KG_collapseToggle",
+	"groupHeaderCell": "HuJ4KG_groupHeaderCell",
+	"groupHeaderContent": "HuJ4KG_groupHeaderContent",
+	"groupLabel": "HuJ4KG_groupLabel"
+};
+//#endregion
+//#region src/components/ds-table/components/ds-table-group-header-cell/ds-table-group-header-cell.tsx
+const DsTableGroupHeaderCell = ({ header }) => {
+	const { collapsedColumnGroups, onToggleColumnGroup, locale } = useDsTableContext();
+	const groupId = header.column.id;
+	const groupStyle = getGroupColumnSizeStyle(header.column.getLeafColumns().filter((leaf) => leaf.getIsVisible()));
+	const isCollapsible = header.column.columnDef.meta?.group?.collapsible ?? false;
+	const isCollapsed = collapsedColumnGroups?.includes(groupId) ?? false;
+	const mergedLocale = {
+		...defaultDsTableLocale,
+		...locale
+	};
+	const toggleLabel = isCollapsed ? mergedLocale.expandColumnGroup : mergedLocale.collapseColumnGroup;
+	const handleToggle = () => onToggleColumnGroup?.(groupId);
+	return /* @__PURE__ */ jsx(TableHead, {
+		className: ds_table_group_header_cell_module_default.groupHeaderCell,
+		style: groupStyle,
+		colSpan: header.colSpan,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: ds_table_group_header_cell_module_default.groupHeaderContent,
+			children: [/* @__PURE__ */ jsx("span", {
+				className: ds_table_group_header_cell_module_default.groupLabel,
+				children: flexRender(header.column.columnDef.header, header.getContext())
+			}), isCollapsible && /* @__PURE__ */ jsx(DsButtonV3, {
+				variant: "secondary",
+				size: "tiny",
+				icon: isCollapsed ? "chevron_right" : "chevron_left",
+				className: ds_table_group_header_cell_module_default.collapseToggle,
+				"aria-label": toggleLabel,
+				"aria-expanded": !isCollapsed,
+				title: toggleLabel,
+				onClick: handleToggle
+			})]
+		})
+	});
+};
+//#endregion
 //#region src/components/ds-table/components/ds-table-header/ds-table-header.tsx
 const DsTableHeader = ({ table }) => {
 	const { stickyHeader, bordered, virtualized } = useDsTableContext();
@@ -18732,33 +19398,55 @@ const DsTableHeader = ({ table }) => {
 		children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableRow, {
 			className: classNames(ds_table_header_module_default.headerRow, !bordered && ds_table_header_module_default.headerRowNoBorder, virtualized && ds_table_header_module_default.headerRowVirtualized),
 			children: headerGroup.headers.map((header) => {
-				const headerStyle = getColumnSizeStyle(header.column.getSize(), virtualized);
+				if (header.isPlaceholder) return /* @__PURE__ */ jsx(TableHead, {
+					className: ds_table_header_module_default.headerCell,
+					style: getColumnSizeStyle(header.getSize())
+				}, header.id);
+				if (header.subHeaders.length > 0) return /* @__PURE__ */ jsx(DsTableGroupHeaderCell, { header }, header.id);
+				const headerStyle = getColumnSizeStyle(header.column.getSize());
 				const canSort = header.column.getCanSort();
 				const isSelectColumn = header.column.id === SELECT_COLUMN_ID;
+				const isGroupStart = isFirstLeafColumnOfGroup(header.column);
+				const metaFilter = header.column.columnDef.meta?.filter;
+				const resolvedFilter = metaFilter && "render" in metaFilter ? metaFilter : void 0;
+				const hasActiveColumnFilter = resolvedFilter?.hasActiveFilter ?? false;
 				return /* @__PURE__ */ jsx(TableHead, {
-					className: classNames(ds_table_header_module_default.headerCell, canSort && ds_table_header_module_default.sortableHeader, isSelectColumn && ds_table_header_module_default.selectHeaderCell),
+					className: classNames(ds_table_header_module_default.headerCell, canSort && ds_table_header_module_default.sortableHeader, isSelectColumn && ds_table_header_module_default.selectHeaderCell, resolvedFilter && ds_table_header_module_default.filterableHeader, hasActiveColumnFilter && ds_table_header_module_default.filterActive, isGroupStart && ds_table_header_module_default.groupStart),
 					onClick: header.column.getToggleSortingHandler(),
 					style: headerStyle,
-					children: header.isPlaceholder ? null : /* @__PURE__ */ jsxs("div", {
+					children: /* @__PURE__ */ jsxs("div", {
 						className: ds_table_header_module_default.headerSortContainer,
-						children: [/* @__PURE__ */ jsx(DsStack, {
-							direction: "column",
-							justifyContent: "center",
-							width: "100%",
-							children: flexRender(header.column.columnDef.header, header.getContext())
-						}), canSort && /* @__PURE__ */ jsx("div", {
-							className: ds_table_header_module_default.pageButtonIconContainer,
-							children: {
-								asc: /* @__PURE__ */ jsx(DsIcon, {
-									icon: "arrow_drop_up",
-									className: classNames(ds_table_header_module_default.pageButtonIcon, ds_table_shared_module_default.pageButtonIcon)
-								}),
-								desc: /* @__PURE__ */ jsx(DsIcon, {
-									icon: "arrow_drop_down",
-									className: classNames(ds_table_header_module_default.pageButtonIcon, ds_table_shared_module_default.pageButtonIcon)
+						children: [
+							/* @__PURE__ */ jsx(DsStack, {
+								direction: "column",
+								justifyContent: "center",
+								width: "100%",
+								children: flexRender(header.column.columnDef.header, header.getContext())
+							}),
+							canSort && /* @__PURE__ */ jsx("div", {
+								className: ds_table_header_module_default.pageButtonIconContainer,
+								children: {
+									asc: /* @__PURE__ */ jsx(DsIcon, {
+										icon: "arrow_drop_up",
+										className: classNames(ds_table_header_module_default.pageButtonIcon, ds_table_shared_module_default.pageButtonIcon)
+									}),
+									desc: /* @__PURE__ */ jsx(DsIcon, {
+										icon: "arrow_drop_down",
+										className: classNames(ds_table_header_module_default.pageButtonIcon, ds_table_shared_module_default.pageButtonIcon)
+									})
+								}[header.column.getIsSorted()] ?? /* @__PURE__ */ jsx("div", { className: classNames(ds_table_header_module_default.pageButtonIcon, ds_table_shared_module_default.pageButtonIcon) })
+							}),
+							resolvedFilter && /* @__PURE__ */ jsx("div", {
+								className: ds_table_header_module_default.filterTriggerContainer,
+								children: /* @__PURE__ */ jsx(DsTableColumnFilterPopover, {
+									hasActiveFilter: resolvedFilter.hasActiveFilter,
+									onApply: resolvedFilter.onApply,
+									onClear: resolvedFilter.onClear,
+									onCancel: resolvedFilter.onCancel,
+									children: resolvedFilter.render()
 								})
-							}[header.column.getIsSorted()] ?? /* @__PURE__ */ jsx("div", { className: classNames(ds_table_header_module_default.pageButtonIcon, ds_table_shared_module_default.pageButtonIcon) })
-						})]
+							})
+						]
 					})
 				}, header.id);
 			})
@@ -18773,20 +19461,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__ */ 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__ */ 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 = useRef(null);
+	const handleSubmit = (event) => {
+		event.preventDefault();
+		event.stopPropagation();
+		commit();
+	};
+	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__ */ jsx("div", {
+		ref: editAnchorRef,
+		className: ds_table_editing_cell_module_default.editAnchor,
+		children: /* @__PURE__ */ jsx("form", {
+			className: ds_table_editing_cell_module_default.overlay,
+			onSubmit: handleSubmit,
+			children: /* @__PURE__ */ jsxs(DsStack, {
+				direction: "row",
+				gap: "var(--3xs)",
+				alignItems: "flex-start",
+				width: "100%",
+				className: ds_table_editing_cell_module_default.row,
+				children: [/* @__PURE__ */ jsx(DsStack, {
+					flex: "1 1 auto",
+					className: ds_table_editing_cell_module_default.slot,
+					children: columnDef.editCell ? flexRender(columnDef.editCell, cell.getContext()) : null
+				}), /* @__PURE__ */ jsxs(DsStack, {
+					direction: "row",
+					gap: "var(--3xs)",
+					className: ds_table_editing_cell_module_default.actions,
+					children: [/* @__PURE__ */ 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__ */ 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",
@@ -18798,20 +19590,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__ */ jsx("div", {
-		className: ds_table_cell_module_default.tableCellEllipsis,
-		children: 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__ */ jsxs("div", {
 			className: ds_table_cell_module_default.lastCell,
-			children: [/* @__PURE__ */ jsx(DsDefaultTableCell, { cell }), /* @__PURE__ */ jsxs("div", {
+			children: [/* @__PURE__ */ jsx(CellContent, {
+				cell,
+				isCellBeingEdited
+			}), /* @__PURE__ */ jsxs("div", {
 				className: ds_table_cell_module_default.cellActions,
 				children: [visiblePrimary.map((action, i) => {
 					const isDisabled = action.disabled?.(row.original);
@@ -18862,16 +19653,36 @@ const DsTableCell = ({ row, cell, primaryRowActions = [], secondaryRowActions =
 			})]
 		});
 	}
-	return /* @__PURE__ */ jsx(DsDefaultTableCell, { cell });
+	return /* @__PURE__ */ jsx(CellContent, {
+		cell,
+		isCellBeingEdited
+	});
+};
+const CellContent = ({ cell, isCellBeingEdited }) => {
+	const isEditable = typeof cell.column.columnDef.editCell === "function";
+	if (isCellBeingEdited) return /* @__PURE__ */ jsx(DsTableEditingCell, { cell });
+	if (isEditable) return /* @__PURE__ */ jsx(DsTableEditableCell, {
+		cell,
+		children: /* @__PURE__ */ jsx("div", {
+			className: ds_table_cell_module_default.tableCellEllipsis,
+			children: flexRender(cell.column.columnDef.cell, cell.getContext())
+		})
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: ds_table_cell_module_default.tableCellEllipsis,
+		children: 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",
@@ -18937,7 +19748,7 @@ const DsTableRow = ({ ref, row, isSelected }) => {
 			}, cell.id);
 			const isLastColumn = idx === row.getVisibleCells().length - 1;
 			return /* @__PURE__ */ jsx(TableCell, {
-				className: classNames(ds_table_row_module_default.tableCell, cell.column.id === "expander" && ds_table_row_module_default.expandableCell, cell.column.id === "select" && ds_table_row_module_default.selectableCell),
+				className: classNames(ds_table_row_module_default.tableCell, cell.column.id === "expander" && ds_table_row_module_default.expandableCell, cell.column.id === "select" && ds_table_row_module_default.selectableCell, isFirstLeafColumnOfGroup(cell.column) && ds_table_row_module_default.groupStart, typeof cell.column.columnDef.editCell === "function" && ds_table_row_module_default.editableCell),
 				style: cellStyle,
 				children: isLastColumn ? /* @__PURE__ */ jsx(DsTableCell, {
 					row,
@@ -19057,17 +19868,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",
@@ -19103,8 +19918,8 @@ const DsTableRowVirtualized = ({ row, isSelected, rowsMapRef, rowHeightsMapRef,
 		children: isExpandedRowContent ? /* @__PURE__ */ jsx(TableCell, { children: renderExpandedRow?.(row.original) }) : /* @__PURE__ */ jsx(Fragment, { children: row.getVisibleCells().map((cell, idx) => {
 			const isLastColumn = idx === row.getVisibleCells().length - 1;
 			return /* @__PURE__ */ jsx(TableCell, {
-				style: getColumnSizeStyle(cell.column.getSize(), true),
-				className: classNames(ds_table_row_virtualized_module_default.cell, cell.column.id === "expander" && ds_table_row_virtualized_module_default.expandableCell, cell.column.id === "select" && ds_table_row_virtualized_module_default.selectableCell),
+				style: getColumnSizeStyle(cell.column.getSize()),
+				className: classNames(ds_table_row_virtualized_module_default.cell, cell.column.id === "expander" && ds_table_row_virtualized_module_default.expandableCell, cell.column.id === "select" && ds_table_row_virtualized_module_default.selectableCell, isFirstLeafColumnOfGroup(cell.column) && ds_table_row_virtualized_module_default.groupStart, typeof cell.column.columnDef.editCell === "function" && ds_table_row_virtualized_module_default.editableCell),
 				children: isLastColumn ? /* @__PURE__ */ jsx(DsTableCell, {
 					row,
 					cell,
@@ -19149,9 +19964,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 = useRef(/* @__PURE__ */ new Map());
 	const rowHeightsMapRef = useRef(/* @__PURE__ */ new Map());
+	const tbodyRef = useRef(null);
 	const { rows } = table.getRowModel();
 	const rowsAndExpandedRowContent = rows.flatMap((row) => row.getIsExpanded() ? [{ row }, {
 		row,
@@ -19161,14 +19977,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 = 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) => {
@@ -19201,6 +20017,7 @@ const DsTableBodyVirtualized = ({ table, tableContainerRef, emptyState, estimate
 		rowVirtualizer.measure();
 	}, [table.getState()]);
 	return /* @__PURE__ */ jsx(DsTableBody, {
+		ref: tbodyRef,
 		rowsMapRef,
 		rowHeightsMapRef,
 		rowVirtualizer,
@@ -19209,12 +20026,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__ */ jsx(TableBody, {
+	const totalSize = rowVirtualizer.getTotalSize();
+	const hasNoData = rowsAndExpandedRowContent.length === 0;
+	return /* @__PURE__ */ 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__ */ jsx(DsTableRowVirtualized, {
@@ -19226,10 +20045,15 @@ function DsTableBody({ rowVirtualizer, rowsMapRef, rowHeightsMapRef, rowsAndExpa
 				rowVirtualizer,
 				virtualRow
 			}, virtualRow.key);
-		}) : /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, {
+		}) : hasNoData ? /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, {
 			className: ds_table_body_virtualized_module_default.emptyState,
 			children: emptyState || "No results."
-		}) })
+		}) }) : null, /* @__PURE__ */ jsx("tr", {
+			"aria-hidden": true,
+			className: ds_table_body_virtualized_module_default.sentinel,
+			style: { top: `${totalSize.toString()}px` },
+			children: /* @__PURE__ */ jsx("td", {})
+		})]
 	});
 }
 //#endregion
@@ -19242,7 +20066,7 @@ const ROW_SIZE_HEIGHT_MAP = {
 /**
 * Design system Table component
 */
-const DsTable = ({ ref, columns: columnsProp, data: tableData, virtualized = false, virtualizedOptions, className, onRowClick, emptyState, stickyHeader = true, bordered = true, fullWidth = true, rowSize = "medium", expandable = false, renderExpandedRow, selectable = false, showSelectAllCheckbox = true, onSelectionChange, onSortingChange, onScroll, actions = [], onRowDoubleClick, primaryRowActions = [], secondaryRowActions, reorderable = false, onOrderChange, columnFilters: externalColumnFilters, onColumnFiltersChange, columnVisibility: externalColumnVisibility, onColumnVisibilityChange, activeRowId, infiniteScroll }) => {
+const DsTable = ({ ref, columns: columnsProp, data: tableData, virtualized = false, virtualizedOptions, className, onRowClick, emptyState, stickyHeader = true, bordered = true, fullWidth = true, rowSize = "medium", expandable = false, renderExpandedRow, selectable = false, showSelectAllCheckbox = true, onSelectionChange, onSortingChange, onScroll, actions = [], onRowDoubleClick, primaryRowActions = [], secondaryRowActions, reorderable = false, onOrderChange, columnFilters: externalColumnFilters, onColumnFiltersChange, columnVisibility: externalColumnVisibility, onColumnVisibilityChange, collapsedColumnGroups: externalCollapsedColumnGroups, onCollapsedColumnGroupsChange, locale, activeRowId, infiniteScroll, onCellEdit, onCellValidate }) => {
 	const [data, setData] = React$1.useState(tableData);
 	const [sorting, setSorting] = React$1.useState([]);
 	const [internalColumnFilters, setInternalColumnFilters] = React$1.useState([]);
@@ -19263,12 +20087,21 @@ const DsTable = ({ ref, columns: columnsProp, data: tableData, virtualized = fal
 		if (onColumnFiltersChange) onColumnFiltersChange(newFilters);
 		else setInternalColumnFilters(newFilters);
 	};
-	const columnVisibility = externalColumnVisibility ?? internalColumnVisibility;
+	const baseColumnVisibility = externalColumnVisibility ?? internalColumnVisibility;
 	const handleColumnVisibilityChange = (updaterOrValue) => {
-		const newVisibility = typeof updaterOrValue === "function" ? updaterOrValue(columnVisibility) : updaterOrValue;
+		const newVisibility = typeof updaterOrValue === "function" ? updaterOrValue(baseColumnVisibility) : updaterOrValue;
 		if (onColumnVisibilityChange) onColumnVisibilityChange(newVisibility);
 		else setInternalColumnVisibility(newVisibility);
 	};
+	const { collapsedColumnGroups, toggleColumnGroup, collapsedVisibility } = useColumnGroups({
+		columns: columnsProp,
+		collapsedColumnGroups: externalCollapsedColumnGroups,
+		onCollapsedColumnGroupsChange
+	});
+	const columnVisibility = useMemo(() => ({
+		...baseColumnVisibility,
+		...collapsedVisibility
+	}), [baseColumnVisibility, collapsedVisibility]);
 	const handleSortingChange = (updaterOrValue) => {
 		const newSorting = typeof updaterOrValue === "function" ? updaterOrValue(sorting) : updaterOrValue;
 		setSorting(newSorting);
@@ -19408,18 +20241,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__ */ jsxs(DsTableContext.Provider, {
+	return /* @__PURE__ */ jsx(DsTableContext.Provider, {
 		value: contextValue,
-		children: [/* @__PURE__ */ jsx("div", {
+		children: /* @__PURE__ */ jsxs("div", {
 			ref: tableContainerRef,
 			className: classNames(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__ */ jsx(DragWrapper, { children: /* @__PURE__ */ jsxs(Table$1, {
-				className: classNames(fullWidth && ds_table_module_default.fullWidth, !bordered && ds_table_module_default.tableNoBorder, virtualized && ds_table_module_default.virtualized),
+			children: [/* @__PURE__ */ jsx(DragWrapper, { children: /* @__PURE__ */ jsxs(Table$1, {
+				className: classNames(fullWidth && ds_table_module_default.fullWidth, !bordered && ds_table_module_default.tableNoBorder),
 				children: [/* @__PURE__ */ jsx(DsTableHeader, { table }), virtualized ? /* @__PURE__ */ jsx(DsTableBodyVirtualized, {
 					table,
-					tableContainerRef,
 					emptyState,
 					estimateSize: virtualizedOptions?.estimateSize || ROW_SIZE_HEIGHT_MAP[rowSize],
 					overscan: virtualizedOptions?.overscan,
@@ -19430,15 +20267,175 @@ const DsTable = ({ ref, columns: columnsProp, data: tableData, virtualized = fal
 					row,
 					isSelected: !!rowSelection[row.id]
 				}, row.id)) : renderEmptyState() }) })]
-			}) })
-		}), selectable && actions.length > 0 && /* @__PURE__ */ jsx(DsTableBulkActions, {
-			numSelectedRows: selectedRows.length,
-			actions: actions.map((action) => ({
-				...action,
-				onClick: () => action.onClick(selectedRows)
-			})),
-			onClearSelection: table.resetRowSelection
-		})]
+			}) }), selectable && actions.length > 0 && /* @__PURE__ */ 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__ */ 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 = useRef(null);
+	useEffect(() => {
+		const input = inputRef.current;
+		if (!input) return;
+		input.focus();
+		input.select();
+	}, []);
+	return /* @__PURE__ */ jsx(TableEditFormControl, {
+		cellContext,
+		error,
+		children: /* @__PURE__ */ jsx(DsFormControl.TextInput, {
+			ref: inputRef,
+			className: cell_editors_module_default.fullWidth,
+			value,
+			placeholder,
+			maxLength,
+			onValueChange: setValue,
+			slots: error ? { endAdornment: /* @__PURE__ */ 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 = useRef(null);
+	useEffect(() => {
+		const input = inputRef.current;
+		if (!input) return;
+		input.focus();
+		input.select();
+	}, []);
+	return /* @__PURE__ */ jsx(TableEditFormControl, {
+		cellContext,
+		error,
+		children: /* @__PURE__ */ 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__ */ jsx(TableEditFormControl, {
+		cellContext,
+		error,
+		children: /* @__PURE__ */ 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__ */ jsx(TableEditFormControl, {
+		cellContext,
+		error,
+		children: /* @__PURE__ */ jsx(DsFormControl.DatePicker, {
+			className: cell_editors_module_default.fullWidth,
+			value,
+			min,
+			max,
+			placeholder,
+			onChange: setValue,
+			slotProps: error ? { input: { slots: { endAdornment: /* @__PURE__ */ 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__ */ jsx(DsCheckbox, {
+		checked: value,
+		disabled,
+		onCheckedChange: (checked) => setValue(checked === true)
 	});
 };
 //#endregion
@@ -20401,19 +21398,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 = createContext(null);
+const useDsWorkspaceLayoutContext = () => {
+	const context = 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 $ = 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 $ = c(17);
 	let className;
 	let rest;
 	let t1;
@@ -20429,24 +21444,58 @@ const DsWorkspace = (t0) => {
 		t1 = $[3];
 	}
 	const fillParent = t1 === void 0 ? false : t1;
+	const [hasLeftSidePanel, setHasLeftSidePanel] = useState(false);
 	let t2;
-	if ($[4] !== className || $[5] !== fillParent) {
-		t2 = classNames(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__ */ 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 = classNames(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__ */ 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__ */ jsx(DsWorkspaceLayoutContext.Provider, {
+			value: contextValue,
+			children: t6
+		});
+		$[14] = contextValue;
+		$[15] = t6;
+		$[16] = t7;
+	} else t7 = $[16];
+	return t7;
 };
 const Header = (t0) => {
 	const $ = c(8);
@@ -20463,7 +21512,7 @@ const Header = (t0) => {
 	}
 	let t1;
 	if ($[3] !== className) {
-		t1 = classNames(ds_workspace_module_default.header, className);
+		t1 = classNames(ds_workspace_layout_module_default.header, className);
 		$[3] = className;
 		$[4] = t1;
 	} else t1 = $[4];
@@ -20494,7 +21543,7 @@ const SubHeader = (t0) => {
 	}
 	let t1;
 	if ($[3] !== className) {
-		t1 = classNames(ds_workspace_module_default.subHeader, className);
+		t1 = classNames(ds_workspace_layout_module_default.subHeader, className);
 		$[3] = className;
 		$[4] = t1;
 	} else t1 = $[4];
@@ -20510,8 +21559,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 $ = 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 = classNames(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__ */ jsx("div", {
+			...rest,
+			className: t1
+		});
+		$[6] = rest;
+		$[7] = t1;
+		$[8] = t2;
+	} else t2 = $[8];
+	return t2;
+};
+const Footer = (t0) => {
 	const $ = c(8);
 	let className;
 	let rest;
@@ -20526,13 +21608,13 @@ const Content = (t0) => {
 	}
 	let t1;
 	if ($[3] !== className) {
-		t1 = classNames(ds_workspace_module_default.content, className);
+		t1 = classNames(ds_workspace_layout_module_default.footer, className);
 		$[3] = className;
 		$[4] = t1;
 	} else t1 = $[4];
 	let t2;
 	if ($[5] !== rest || $[6] !== t1) {
-		t2 = /* @__PURE__ */ jsx("div", {
+		t2 = /* @__PURE__ */ jsx("footer", {
 			...rest,
 			className: t1
 		});
@@ -20542,7 +21624,7 @@ const Content = (t0) => {
 	} else t2 = $[7];
 	return t2;
 };
-const Footer = (t0) => {
+const Body = (t0) => {
 	const $ = c(8);
 	let className;
 	let rest;
@@ -20555,15 +21637,16 @@ const Footer = (t0) => {
 		className = $[1];
 		rest = $[2];
 	}
+	useDsWorkspaceLayoutContext();
 	let t1;
 	if ($[3] !== className) {
-		t1 = classNames(ds_workspace_module_default.footer, className);
+		t1 = classNames(ds_workspace_layout_module_default.body, className);
 		$[3] = className;
 		$[4] = t1;
 	} else t1 = $[4];
 	let t2;
 	if ($[5] !== rest || $[6] !== t1) {
-		t2 = /* @__PURE__ */ jsx("footer", {
+		t2 = /* @__PURE__ */ jsx("div", {
 			...rest,
 			className: t1
 		});
@@ -20573,11 +21656,171 @@ const Footer = (t0) => {
 	} else t2 = $[7];
 	return t2;
 };
-DsWorkspace.Header = Header;
-DsWorkspace.SubHeader = SubHeader;
-DsWorkspace.Content = Content;
-DsWorkspace.Footer = Footer;
+const SideMenu = (t0) => {
+	const $ = 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] = 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 = classNames(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__ */ jsx("button", {
+			type: "button",
+			className: ds_workspace_layout_module_default.sideMenuPinButton,
+			onClick: () => onPinnedChange(!pinned),
+			"aria-label": ariaLabel,
+			"aria-pressed": pinned,
+			children: /* @__PURE__ */ 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__ */ 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__ */ 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 $ = 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];
+	}
+	useEffect(t1, t2);
+	let t3;
+	if ($[7] !== className) {
+		t3 = classNames(ds_workspace_layout_module_default.leftPanel, className);
+		$[7] = className;
+		$[8] = t3;
+	} else t3 = $[8];
+	let t4;
+	if ($[9] !== rest || $[10] !== t3) {
+		t4 = /* @__PURE__ */ 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
-export { BREAKPOINT_LG, DsAlertBanner, DsAutocomplete, DsAvatar, DsAvatarGroup, DsBreadcrumb, DsButton, DsButtonV3, DsCard, DsCatalogLayout, DsCheckbox, DsCheckboxGroup, DsChip, DsChipGroup, DsCommentBubble, DsCommentCard, DsCommentIndicator, DsCommentThread, DsCommentsDrawer, DsConfirmation, DsDateInput, DsDatePicker, DsDateRangePicker, DsDialog, DsDivider, DsDrawer, DsDropdownMenu, DsDropdownMenuLegacy, DsExpandableTextInput, DsFileUpload, DsFilterStatusIcon, DsFormControl, DsGrid, DsGridItem, DsIcon, DsKeyValuePair, DsLoader, DsModal, DsNextStepButton, DsNumberInput, DsPanel, DsPasswordInput, DsPopover, DsProgressArc, DsProgressDonut, DsProgressLinear, DsRadioGroup, DsRadioGroupLegacy, DsSegmentGroup, DsSelect, ds_skeleton_default as DsSkeleton, DsSkeletonCircle, DsSkeletonRect, DsSkeletonText, DsSmartTabs, DsSpinner, DsSplitButton, DsStack, DsStatusBadge, DsStatusBadgeV2, DsStep, DsStepContent, DsStepper, DsSystemStatus, DsTable, DsTabs, DsTag, DsTagFilter, DsTextInput, DsTextarea, DsThreadItem, DsTimePicker, DsToastProvider, DsToggle, DsTooltip, DsTree, DsTypography, DsVerticalTabs, DsWorkspace, FatalFileUploadError, FileUpload, FileUploadError, RetryableFileUploadError, alertBannerVariants, breakpoints, buttonV3Colors, buttonV3Sizes, buttonV3Variants, cardSizes, checkboxVariants, colors, controlStatuses, createCheckboxFilterAdapter, createDsTreeCollection, createDualRangeFilterAdapter, createFilterAdapter, customIcons, dropdownMenuItemVariants, dsKeyValuePairOrientations, filterStatuses, formatTime, iconColors, iconSizes, iconVariants, isCustomIcon, isResponsiveValue, loaderVariants, progressArcSizes, progressArcVariants, progressDonutSizes, progressDonutVariants, progressLinearSizes, progressLinearVariants, resolveResponsiveValue, skeletonColorVariants, skeletonRadiusVariants, spinnerSizes, splitButtonSizes, statusBadgeV2Phases, statusBadgeV2Sizes, statusBadgeV2Variants, systemStatuses, tagSizes, tagVariants, textInputSizes, useBreakpoint, useCheckboxSelectAll, useFileUpload, useResponsiveValue, useTableFilters, useToaster, withResponsiveProps };
+export { BREAKPOINT_LG, DsAlertBanner, DsAutocomplete, DsAvatar, DsAvatarGroup, DsBreadcrumb, DsButton, DsButtonV3, DsCard, DsCatalogLayout, DsCheckbox, DsCheckboxGroup, DsChip, DsChipGroup, DsCommentBubble, DsCommentCard, DsCommentIndicator, DsCommentThread, DsCommentsDrawer, DsConfirmation, DsDateInput, DsDatePicker, DsDateRangePicker, DsDialog, DsDivider, DsDrawer, DsDropdownMenu, DsDropdownMenuLegacy, DsExpandableTextInput, DsFileUpload, DsFilterStatusIcon, DsFormControl, DsGrid, DsGridItem, DsIcon, DsKeyValuePair, DsLoader, DsModal, DsNextStepButton, DsNumberInput, DsPanel, DsPasswordInput, DsPopover, DsProgressArc, DsProgressDonut, DsProgressLinear, DsRadioGroup, DsRadioGroupLegacy, DsSegmentGroup, DsSelect, ds_skeleton_default as DsSkeleton, DsSkeletonCircle, DsSkeletonRect, DsSkeletonText, DsSmartTabs, DsSpinner, DsSplitButton, DsStack, DsStatusBadge, DsStatusBadgeV2, DsStep, DsStepContent, DsStepper, DsSystemStatus, DsTable, DsTableColumnFilterPopover, DsTableEditCellCheckbox, DsTableEditCellDate, DsTableEditCellNumber, DsTableEditCellSelect, DsTableEditCellText, DsTableEditableCell, DsTableEditingCell, DsTabs, DsTag, DsTagFilter, DsTextInput, DsTextarea, DsThreadItem, DsTimePicker, DsToastProvider, DsToggle, DsTooltip, DsTree, DsTypography, DsVerticalTabs, DsWorkspaceLayout, FatalFileUploadError, FileUpload, FileUploadError, RetryableFileUploadError, alertBannerVariants, breakpoints, buttonV3Colors, buttonV3Sizes, buttonV3Variants, cardSizes, checkboxVariants, colors, controlStatuses, createCheckboxFilterAdapter, createDsTreeCollection, createDualRangeFilterAdapter, createFilterAdapter, customIcons, defaultDsTableLocale, dropdownMenuItemVariants, dsKeyValuePairOrientations, filterStatuses, formatTime, iconColors, iconSizes, iconVariants, isCustomIcon, isResponsiveValue, loaderVariants, popoverAligns, popoverSides, progressArcSizes, progressArcVariants, progressDonutSizes, progressDonutVariants, progressLinearSizes, progressLinearVariants, resolveResponsiveValue, skeletonColorVariants, skeletonRadiusVariants, spinnerSizes, splitButtonSizes, statusBadgeV2Phases, statusBadgeV2Sizes, statusBadgeV2Variants, systemStatuses, tagSizes, tagVariants, textInputSizes, useBreakpoint, useCellEditor, useCheckboxSelectAll, useFileUpload, useResponsiveValue, useTableFilters, useToaster, withResponsiveProps };
 
 //# sourceMappingURL=index.js.map