@drivenets/design-system 0.12.1 → 0.13.0

package/dist/index.cjs

@@ -3225,7 +3225,7 @@ const Title$2 = (t0) => {
 	} else t2 = $[5];
 	return t2;
 };
-const Body$4 = (t0) => {
+const Body$5 = (t0) => {
 	const $ = (0, react_compiler_runtime.c)(6);
 	const { style, className, children } = t0;
 	let t1;
@@ -3273,7 +3273,7 @@ const Actions$3 = (t0) => {
 	return t2;
 };
 DsAlertBanner.Title = Title$2;
-DsAlertBanner.Body = Body$4;
+DsAlertBanner.Body = Body$5;
 DsAlertBanner.Actions = Actions$3;
 //#endregion
 //#region src/components/ds-alert-banner/ds-alert-banner.types.ts
@@ -5549,7 +5549,7 @@ const Header$4 = (t0) => {
 /**
 * Card body - main content area.
 */
-const Body$3 = (t0) => {
+const Body$4 = (t0) => {
 	const $ = (0, react_compiler_runtime.c)(12);
 	let children;
 	let className;
@@ -5637,7 +5637,7 @@ const Footer$3 = (t0) => {
 const DsCard = {
 	Root: Root$2,
 	Header: Header$4,
-	Body: Body$3,
+	Body: Body$4,
 	Footer: Footer$3
 };
 //#endregion
@@ -5675,7 +5675,7 @@ const useDsCatalogLayoutContext = () => {
 };
 //#endregion
 //#region src/components/ds-catalog-layout/ds-catalog-layout.tsx
-const DEFAULT_LOCALE = Object.freeze({
+const DEFAULT_LOCALE$1 = Object.freeze({
 	pinButtonLabel: "Pin side menu",
 	unpinButtonLabel: "Unpin side menu"
 });
@@ -5780,7 +5780,7 @@ const Header$3 = (t0) => {
 	} else t2 = $[7];
 	return t2;
 };
-const Body$2 = (t0) => {
+const Body$3 = (t0) => {
 	const $ = (0, react_compiler_runtime.c)(8);
 	let className;
 	let rest;
@@ -5811,7 +5811,7 @@ const Body$2 = (t0) => {
 	} else t2 = $[7];
 	return t2;
 };
-const SideMenu = (t0) => {
+const SideMenu$1 = (t0) => {
 	const $ = (0, react_compiler_runtime.c)(32);
 	let children;
 	let className;
@@ -5857,7 +5857,7 @@ const SideMenu = (t0) => {
 	}
 	(0, react.useEffect)(t2, t3);
 	const isExpanded = pinned || isHovering;
-	const ariaLabel = pinned ? locale?.unpinButtonLabel ?? DEFAULT_LOCALE.unpinButtonLabel : locale?.pinButtonLabel ?? DEFAULT_LOCALE.pinButtonLabel;
+	const ariaLabel = pinned ? locale?.unpinButtonLabel ?? DEFAULT_LOCALE$1.unpinButtonLabel : locale?.pinButtonLabel ?? DEFAULT_LOCALE$1.pinButtonLabel;
 	let t4;
 	if ($[11] !== className) {
 		t4 = (0, classnames.default)(ds_catalog_layout_module_default.sideMenu, className);
@@ -6050,8 +6050,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
@@ -8278,6 +8278,78 @@ var ds_drawer_module_default = {
 	"toolbar": "MWmQHa_toolbar"
 };
 //#endregion
+//#region src/utils/restore-document-body-modal-styles.ts
+const SCROLL_LOCK_ATTRIBUTE = "data-scroll-lock";
+const INERT_ATTRIBUTE = "data-inert";
+const ARIA_HIDDEN_MARKER = "data-aria-hidden";
+/**
+* Clears document body styles and attributes left by Zag dialog modal effects when a
+* dialog instance tears down without a normal close transition.
+*
+* No-op unless a leak sentinel is present: in the common case Zag restores the body on
+* unmount itself, and we must not clobber styles the host app owns.
+*/
+const restoreDocumentBodyModalStyles = (doc = document) => {
+	const { body, documentElement } = doc;
+	if (!(body.hasAttribute(SCROLL_LOCK_ATTRIBUTE) || body.hasAttribute(INERT_ATTRIBUTE) || body.style.pointerEvents === "none")) return;
+	body.removeAttribute(SCROLL_LOCK_ATTRIBUTE);
+	body.removeAttribute(INERT_ATTRIBUTE);
+	body.removeAttribute(ARIA_HIDDEN_MARKER);
+	if (body.getAttribute("aria-hidden") === "true") body.removeAttribute("aria-hidden");
+	body.style.removeProperty("overflow");
+	body.style.removeProperty("pointer-events");
+	body.style.removeProperty("position");
+	body.style.removeProperty("top");
+	body.style.removeProperty("left");
+	body.style.removeProperty("right");
+	if (body.style.length === 0) body.removeAttribute("style");
+	documentElement.style.removeProperty("--scrollbar-width");
+};
+//#endregion
+//#region src/utils/use-ark-dialog-body-lock-cleanup.ts
+const activeBodyLockInstances = /* @__PURE__ */ new Set();
+const scheduleBodyLockRestoreIfIdle = () => {
+	queueMicrotask(() => {
+		if (activeBodyLockInstances.size > 0) return;
+		restoreDocumentBodyModalStyles();
+	});
+};
+/**
+* Ensures Zag dialog body scroll-lock and modal pointer blocking are released when
+* an Ark dialog unmounts while still open (e.g. close + conditional unmount + navigate).
+*/
+const useArkDialogBodyLockCleanup = (open, enabled) => {
+	const $ = (0, react_compiler_runtime.c)(5);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = Symbol("ark-dialog-body-lock");
+		$[0] = t0;
+	} else t0 = $[0];
+	const instanceIdRef = (0, react.useRef)(t0);
+	let t1;
+	let t2;
+	if ($[1] !== enabled || $[2] !== open) {
+		t1 = () => {
+			if (!open || !enabled) return;
+			const instanceId = instanceIdRef.current;
+			activeBodyLockInstances.add(instanceId);
+			return () => {
+				activeBodyLockInstances.delete(instanceId);
+				scheduleBodyLockRestoreIfIdle();
+			};
+		};
+		t2 = [open, enabled];
+		$[1] = enabled;
+		$[2] = open;
+		$[3] = t1;
+		$[4] = t2;
+	} else {
+		t1 = $[3];
+		t2 = $[4];
+	}
+	(0, react.useLayoutEffect)(t1, t2);
+};
+//#endregion
 //#region src/components/ds-drawer/ds-drawer.tsx
 const DsDrawer = (t0) => {
 	const $ = (0, react_compiler_runtime.c)(25);
@@ -8289,6 +8361,7 @@ const DsDrawer = (t0) => {
 	const closeOnInteractOutside = t5 === void 0 ? false : t5;
 	const portal = t6 === void 0 ? false : t6;
 	const resolvedColumns = useResponsiveValue(columns);
+	useArkDialogBodyLockCleanup(open, backdrop);
 	let t7;
 	if ($[0] !== onOpenChange) {
 		t7 = (details) => {
@@ -8477,7 +8550,7 @@ const Toolbar = (t0) => {
 	} else t2 = $[5];
 	return t2;
 };
-const Body$1 = (t0) => {
+const Body$2 = (t0) => {
 	const $ = (0, react_compiler_runtime.c)(6);
 	const { style, className, children } = t0;
 	let t1;
@@ -8550,7 +8623,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
@@ -9098,6 +9171,7 @@ const DsModal = (t0) => {
 	const dividers = t2 === void 0 ? false : t2;
 	const modal = t3 === void 0 ? true : t3;
 	const closeOnInteractOutside = t4 === void 0 ? false : t4;
+	useArkDialogBodyLockCleanup(open, modal);
 	let t5;
 	if ($[0] !== onOpenChange) {
 		t5 = (details) => {
@@ -9244,7 +9318,7 @@ const CloseTrigger = (t0) => {
 	} else t2 = $[3];
 	return t2;
 };
-const Body = (t0) => {
+const Body$1 = (t0) => {
 	const $ = (0, react_compiler_runtime.c)(6);
 	const { style, className, children } = t0;
 	let t1;
@@ -9316,7 +9390,7 @@ const Actions = (t0) => {
 DsModal.Header = Header$1;
 DsModal.Title = Title;
 DsModal.CloseTrigger = CloseTrigger;
-DsModal.Body = Body;
+DsModal.Body = Body$1;
 DsModal.Footer = Footer$1;
 DsModal.Actions = Actions;
 //#endregion
@@ -13160,66 +13234,50 @@ const DsFormControlDescription = (t0) => {
 	return t2;
 };
 const DsFormControl = (t0) => {
-	const $ = (0, react_compiler_runtime.c)(28);
-	const { id, status, label, required: t1, slots, message, messageIcon: t2, className, style, children } = t0;
-	const required = t1 === void 0 ? false : t1;
-	const messageIcon = t2 === void 0 ? "info" : t2;
+	const $ = (0, react_compiler_runtime.c)(23);
+	const { id, status, label, hideLabel: t1, required: t2, slots, message, messageIcon: t3, className, style, children } = t0;
+	const hideLabel = t1 === void 0 ? false : t1;
+	const required = t2 === void 0 ? false : t2;
+	const messageIcon = t3 === void 0 ? "info" : t3;
 	const generatedId = (0, react.useId)();
 	const controlId = id || generatedId;
-	let t3;
+	let t4;
 	if ($[0] !== controlId) {
-		t3 = { controlId };
+		t4 = { controlId };
 		$[0] = controlId;
-		$[1] = t3;
-	} else t3 = $[1];
-	const t4 = status && message && ds_form_control_module_default[status];
-	let t5;
-	if ($[2] !== className || $[3] !== t4) {
-		t5 = (0, classnames.default)(ds_form_control_module_default.container, className, t4);
-		$[2] = className;
-		$[3] = t4;
-		$[4] = t5;
-	} else t5 = $[4];
+		$[1] = t4;
+	} else t4 = $[1];
+	const t5 = status && message && ds_form_control_module_default[status];
 	let t6;
-	if ($[5] !== required) {
-		t6 = (0, classnames.default)(ds_form_control_module_default.label, { [ds_form_control_module_default.required]: required });
-		$[5] = required;
-		$[6] = t6;
-	} else t6 = $[6];
+	if ($[2] !== className || $[3] !== t5) {
+		t6 = (0, classnames.default)(ds_form_control_module_default.container, className, t5);
+		$[2] = className;
+		$[3] = t5;
+		$[4] = t6;
+	} else t6 = $[4];
 	let t7;
-	if ($[7] !== controlId || $[8] !== label || $[9] !== t6) {
-		t7 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
-			htmlFor: controlId,
-			className: t6,
-			children: label
+	if ($[5] !== controlId || $[6] !== hideLabel || $[7] !== label || $[8] !== required || $[9] !== slots) {
+		t7 = !hideLabel && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: ds_form_control_module_default.labelContainer,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+				htmlFor: controlId,
+				className: (0, classnames.default)(ds_form_control_module_default.label, { [ds_form_control_module_default.required]: required }),
+				children: label
+			}), slots?.endAdornment && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: ds_form_control_module_default.endAdornment,
+				children: slots.endAdornment
+			})]
 		});
-		$[7] = controlId;
-		$[8] = label;
-		$[9] = t6;
+		$[5] = controlId;
+		$[6] = hideLabel;
+		$[7] = label;
+		$[8] = required;
+		$[9] = slots;
 		$[10] = t7;
 	} else t7 = $[10];
 	let t8;
-	if ($[11] !== slots) {
-		t8 = slots?.endAdornment && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: ds_form_control_module_default.endAdornment,
-			children: slots.endAdornment
-		});
-		$[11] = slots;
-		$[12] = t8;
-	} else t8 = $[12];
-	let t9;
-	if ($[13] !== t7 || $[14] !== t8) {
-		t9 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: ds_form_control_module_default.labelContainer,
-			children: [t7, t8]
-		});
-		$[13] = t7;
-		$[14] = t8;
-		$[15] = t9;
-	} else t9 = $[15];
-	let t10;
-	if ($[16] !== message || $[17] !== messageIcon) {
-		t10 = message && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+	if ($[11] !== message || $[12] !== messageIcon) {
+		t8 = message && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: ds_form_control_module_default.message,
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsIcon, {
 				icon: messageIcon,
@@ -13227,39 +13285,39 @@ const DsFormControl = (t0) => {
 				filled: true
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: message })]
 		});
-		$[16] = message;
-		$[17] = messageIcon;
-		$[18] = t10;
-	} else t10 = $[18];
-	let t11;
-	if ($[19] !== children || $[20] !== style || $[21] !== t10 || $[22] !== t5 || $[23] !== t9) {
-		t11 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: t5,
+		$[11] = message;
+		$[12] = messageIcon;
+		$[13] = t8;
+	} else t8 = $[13];
+	let t9;
+	if ($[14] !== children || $[15] !== style || $[16] !== t6 || $[17] !== t7 || $[18] !== t8) {
+		t9 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: t6,
 			style,
 			children: [
-				t9,
+				t7,
 				children,
-				t10
+				t8
 			]
 		});
-		$[19] = children;
-		$[20] = style;
-		$[21] = t10;
-		$[22] = t5;
-		$[23] = t9;
-		$[24] = t11;
-	} else t11 = $[24];
-	let t12;
-	if ($[25] !== t11 || $[26] !== t3) {
-		t12 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FormControlContext.Provider, {
-			value: t3,
-			children: t11
+		$[14] = children;
+		$[15] = style;
+		$[16] = t6;
+		$[17] = t7;
+		$[18] = t8;
+		$[19] = t9;
+	} else t9 = $[19];
+	let t10;
+	if ($[20] !== t4 || $[21] !== t9) {
+		t10 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FormControlContext.Provider, {
+			value: t4,
+			children: t9
 		});
-		$[25] = t11;
-		$[26] = t3;
-		$[27] = t12;
-	} else t12 = $[27];
-	return t12;
+		$[20] = t4;
+		$[21] = t9;
+		$[22] = t10;
+	} else t10 = $[22];
+	return t10;
 };
 DsFormControl.TextInput = controlify(DsTextInput);
 DsFormControl.NumberInput = controlify(DsNumberInput);
@@ -18137,68 +18195,9 @@ const systemStatuses = [
 //#endregion
 //#region src/components/ds-table/filters/adapters/create-filter-adapter.ts
 /**
-* Base factory function to create a filter adapter
-*
-* This is the core function that all specialized filter adapters use internally.
-* Use this when checkbox or dual-range adapters don't fit your requirements.
-*
-* ## When to use directly:
-* - Complex filtering logic (e.g., editor + date range)
-* - Unique UI that doesn't fit generic patterns
-* - Combining multiple sub-filters
-* - Special chip generation requirements
-*
-* ## When to use specialized helpers instead:
-* - **Checkbox filters**: Use `createCheckboxFilterAdapter` for multi-select
-* - **Range filters**: Use `createDualRangeFilterAdapter` for numeric ranges
-*
-* ## Example:
-* ```typescript
-* interface MyFilterValue {
-*   users: string[];
-*   dateRange: { from?: Date; to?: Date };
-* }
-*
-* const myFilter = createFilterAdapter<DataType, MyFilterValue>({
-*   id: 'myColumn',
-*   label: 'My Filter',
-*   initialValue: { users: [], dateRange: {} },
-*
-*   filterFn: (row, columnId, filterValue) => {
-*     // Your custom logic
-*     return matchesUsers && matchesDateRange;
-*   },
-*
-*   toChips: (value) => {
-*     // Generate chips from your filter value
-*     return chips;
-*   },
-*
-*   fromChip: (chip, currentValue) => {
-*     // Remove chip's effect from value
-*     return updatedValue;
-*   },
-*
-*   getActiveFiltersCount: (value) => {
-*     // Count active filters (0 means none active)
-*     return count;
-*   },
-*
-*   renderFilter: (value, onChange) => (
-*     <YourCustomFilterComponent
-*       value={value}
-*       onChange={onChange}
-*     />
-*   ),
-* });
-* ```
-*
-* ## Reference Implementation:
-* See `workflow-filters.config.tsx` for a complete example (lastEditedFilterAdapter).
-*
-* ## Note:
-* Most use cases are covered by `createCheckboxFilterAdapter` or `createDualRangeFilterAdapter`.
-* Only use this base function directly when you need completely custom filter logic.
+* Base factory used by every specialized adapter. Reach for it only when
+* `createCheckboxFilterAdapter` / `createDualRangeFilterAdapter` don't fit
+* (custom UI, mixed sub-filters, bespoke chip logic).
 */
 function createFilterAdapter(config) {
 	return {
@@ -18215,31 +18214,78 @@ function createFilterAdapter(config) {
 	};
 }
 //#endregion
+//#region src/components/ds-table/filters/components/checkbox-filter/checkbox-filter.module.scss
+var checkbox_filter_module_default = {
+	"checkboxItem": "H6sVkG_checkboxItem",
+	"empty": "H6sVkG_empty",
+	"list": "H6sVkG_list",
+	"root": "H6sVkG_root"
+};
+//#endregion
 //#region src/components/ds-table/filters/components/checkbox-filter/checkbox-filter.tsx
-const CheckboxFilter = ({ items, renderer, selectedItems, onSelectionChange }) => {
+const CheckboxFilter = ({ items, renderer, selectedItems, onSelectionChange, searchable = false, selectAll = false, locale, className }) => {
+	const { allLabel = "All", searchPlaceholder = "Search", noMatchesLabel = "No matches" } = locale ?? {};
+	const [query, setQuery] = (0, react.useState)("");
+	const visibleItems = searchable ? items.filter((item) => item.label.toLowerCase().includes(query.trim().toLowerCase())) : items;
 	const handleCheckedChange = (selected, checked) => {
 		if (checked) onSelectionChange([...selectedItems, selected]);
 		else onSelectionChange(selectedItems.filter((item) => item.value !== selected.value));
 	};
-	return items.map((item) => {
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsCheckbox, {
-			label: renderer ? renderer(item) : item.label,
-			checked: selectedItems.findIndex((selectedItem) => selectedItem.value === item.value) > -1,
-			onCheckedChange: (newState) => handleCheckedChange(item, newState === true)
-		}, JSON.stringify(item.value));
+	const visibleSelectedCount = visibleItems.filter((item) => selectedItems.some((selected) => selected.value === item.value)).length;
+	const allVisibleSelected = visibleItems.length > 0 && visibleSelectedCount === visibleItems.length;
+	const someVisibleSelected = visibleSelectedCount > 0 && !allVisibleSelected;
+	const handleSelectAllChange = (next) => {
+		const shouldSelect = next === true;
+		const visibleValues = new Set(visibleItems.map((item) => item.value));
+		const withoutVisible = selectedItems.filter((item) => !visibleValues.has(item.value));
+		onSelectionChange(shouldSelect ? [...withoutVisible, ...visibleItems] : withoutVisible);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, classnames.default)(checkbox_filter_module_default.root, className),
+		children: [searchable && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTextInput, {
+			value: query,
+			placeholder: searchPlaceholder,
+			onValueChange: setQuery,
+			slots: { startAdornment: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsIcon, {
+				icon: "search",
+				size: "tiny"
+			}) }
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: checkbox_filter_module_default.list,
+			role: "group",
+			children: [
+				selectAll && visibleItems.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsCheckbox, {
+					className: checkbox_filter_module_default.checkboxItem,
+					label: allLabel,
+					checked: allVisibleSelected ? true : someVisibleSelected ? "indeterminate" : false,
+					onCheckedChange: handleSelectAllChange
+				}),
+				visibleItems.length === 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: checkbox_filter_module_default.empty,
+					children: noMatchesLabel
+				}),
+				visibleItems.map((item) => {
+					const label = renderer ? renderer(item) : item.label;
+					const checked = selectedItems.some((selected) => selected.value === item.value);
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsCheckbox, {
+						className: checkbox_filter_module_default.checkboxItem,
+						label,
+						checked,
+						onCheckedChange: (next) => handleCheckedChange(item, next === true)
+					}, JSON.stringify(item.value));
+				})
+			]
+		})]
 	});
 };
 //#endregion
 //#region src/components/ds-table/filters/adapters/create-checkbox-filter-adapter.tsx
 /**
-* Factory function to create a checkbox filter adapter
-*
-* Handles multi-select checkbox filtering with inclusion model:
-* - Empty selection = show all data (no filter active)
-* - Selected items = show only those items
+* Multi-select inclusion filter: empty selection shows every row, selected
+* items show only those rows.
 */
 function createCheckboxFilterAdapter(config) {
-	const { id, label, items, renderer, chipLabelTemplate = (item) => `${label}: ${item.label}`, cellRenderer, getRowValue = (row) => row.getValue(id) } = config;
+	const { id, label, items, renderer, chipLabelTemplate = (item) => `${label}: ${item.label}`, cellRenderer, getRowValue = (row) => row.getValue(id), searchable = false, selectAll = false, locale } = config;
 	return createFilterAdapter({
 		id,
 		label,
@@ -18271,7 +18317,10 @@ function createCheckboxFilterAdapter(config) {
 				items,
 				renderer,
 				selectedItems: value,
-				onSelectionChange: onChange
+				onSelectionChange: onChange,
+				searchable,
+				selectAll,
+				locale
 			});
 		}
 	});
@@ -18356,10 +18405,7 @@ const RangeFilter = ({ label, value, onChange, onClear }) => {
 };
 //#endregion
 //#region src/components/ds-table/filters/adapters/create-dual-range-filter-adapter.tsx
-/**
-* Factory function to create a dual-range filter adapter
-* Handles filtering on multiple numeric ranges within a single column
-*/
+/** Filter over multiple numeric ranges within one column (AND across fields). */
 function createDualRangeFilterAdapter(config) {
 	const { id, label, fields, formatNumber = (num) => num.toLocaleString("en-US"), getRowValue = (row) => row.getValue(id) } = config;
 	const initialValue = {};
@@ -18438,28 +18484,16 @@ function createDualRangeFilterAdapter(config) {
 }
 //#endregion
 //#region src/components/ds-table/filters/hooks/use-table-filters.ts
+const resolveColumnAdapterId = (meta) => {
+	if (!meta) return;
+	if ("render" in meta) return meta.filterId;
+	if (meta.adapter) return meta.adapter.id;
+	return meta.adapterId;
+};
 /**
-* Hook to orchestrate table filtering with adapters.
-* Manages filter state, generates chips, and handles column definitions.
-*
-* **Uncontrolled mode** (default): Filters are managed internally.
-* **Controlled mode**: Filters are managed externally via appliedFilters/onFiltersChange.
-*
-* @example
-* // Uncontrolled mode
-* const { filterChips, handlers } = useTableFilters({
-*   filterAdapters: adapters,
-*   baseColumns: columns,
-* });
-*
-* @example
-* // Controlled mode (e.g., URL-driven filtering)
-* const { filterChips, handlers } = useTableFilters({
-*   filterAdapters: adapters,
-*   baseColumns: columns,
-*   appliedFilters: filtersFromUrl,
-*   onFiltersChange: (filters) => updateUrlAndRefetch(filters),
-* });
+* Orchestrates table filtering: drafts → applied state, chips, nav counts, and
+* column wiring. Uncontrolled by default; pass `appliedFilters` +
+* `onFiltersChange` for URL-driven / external state.
 */
 function useTableFilters({ filterAdapters, baseColumns, appliedFilters: externalAppliedFilters, onFiltersChange: setExternalAppliedFilters }) {
 	const _filterAdapters = filterAdapters;
@@ -18494,13 +18528,28 @@ function useTableFilters({ filterAdapters, baseColumns, appliedFilters: external
 		count: adapter.getActiveFiltersCount(draftFilters[adapter.id])
 	}));
 	const enhancedColumns = !baseColumns ? [] : baseColumns.map((col) => {
-		const adapter = _filterAdapters.find((a) => a.id === col.id);
+		const metaFilter = col.meta?.filter;
+		const adapterIdFromMeta = resolveColumnAdapterId(metaFilter);
+		const adapter = adapterIdFromMeta && _filterAdapters.find((a) => a.id === adapterIdFromMeta) || _filterAdapters.find((a) => a.id === col.id);
 		if (!adapter) return col;
 		const cellRenderer = adapter.cellRenderer;
+		const appliedValue = appliedFilters[adapter.id];
+		const resolvedFilter = metaFilter ? {
+			filterId: adapter.id,
+			hasActiveFilter: appliedValue !== void 0 && adapter.getActiveFiltersCount(appliedValue) > 0,
+			render: () => renderForId(adapter.id),
+			onApply: () => applyColumnFilter(adapter.id),
+			onClear: () => clearColumnFilter(adapter.id),
+			onCancel: () => cancelColumnFilter(adapter.id)
+		} : void 0;
 		return {
 			...col,
 			filterFn: adapter.columnFilterFn,
-			...cellRenderer && { cell: (info) => cellRenderer(info.getValue()) }
+			...cellRenderer && { cell: (info) => cellRenderer(info.getValue()) },
+			...resolvedFilter && { meta: {
+				...col.meta,
+				filter: resolvedFilter
+			} }
 		};
 	});
 	const updateFilter = (filterId, value) => {
@@ -18521,6 +18570,29 @@ function useTableFilters({ filterAdapters, baseColumns, appliedFilters: external
 		setPendingFilters({});
 		setAppliedFilters({});
 	};
+	const omitKey = (source, filterId) => Object.fromEntries(Object.entries(source).filter(([key]) => key !== filterId));
+	const applyColumnFilter = (filterId) => {
+		const adapter = _filterAdapters.find((a) => a.id === filterId);
+		if (!adapter) return;
+		const draftValue = draftFilters[filterId];
+		setAppliedFilters(adapter.getActiveFiltersCount(draftValue) > 0 ? {
+			...appliedFilters,
+			[filterId]: draftValue
+		} : omitKey(appliedFilters, filterId));
+		setPendingFilters((prev) => omitKey(prev, filterId));
+	};
+	const cancelColumnFilter = (filterId) => {
+		setPendingFilters((prev) => omitKey(prev, filterId));
+	};
+	const clearColumnFilter = (filterId) => {
+		const adapter = _filterAdapters.find((a) => a.id === filterId);
+		if (!adapter) return;
+		setPendingFilters((prev) => ({
+			...omitKey(prev, filterId),
+			[filterId]: adapter.initialValue
+		}));
+		if (appliedFilters[filterId] !== void 0) setAppliedFilters(omitKey(appliedFilters, filterId));
+	};
 	const deleteChip = (chip) => {
 		const filterKey = typeof chip.metadata?.key === "string" ? chip.metadata.key : void 0;
 		if (!filterKey) return;
@@ -18534,13 +18606,15 @@ function useTableFilters({ filterAdapters, baseColumns, appliedFilters: external
 			[filterKey]: newValue
 		});
 	};
-	const renderFilterContent = (selectedFilter) => {
-		const adapter = _filterAdapters.find((a) => a.id === selectedFilter.id);
+	const renderForId = (filterId) => {
+		const adapter = _filterAdapters.find((a) => a.id === filterId);
 		if (!adapter) return null;
 		const value = draftFilters[adapter.id];
 		const onChange = (newValue) => updateFilter(adapter.id, newValue);
 		return adapter.renderFilter(value, onChange);
 	};
+	const renderFilterContent = (selectedFilter) => renderForId(selectedFilter.id);
+	const renderColumnFilter = (filterId) => renderForId(filterId);
 	return {
 		filterState: draftFilters,
 		columnFilters,
@@ -18551,12 +18625,94 @@ function useTableFilters({ filterAdapters, baseColumns, appliedFilters: external
 			updateFilter,
 			applyFilters,
 			clearAll,
-			deleteChip
+			deleteChip,
+			applyColumnFilter,
+			cancelColumnFilter,
+			clearColumnFilter
 		},
-		renderFilterContent
+		renderFilterContent,
+		renderColumnFilter
 	};
 }
 //#endregion
+//#region src/components/ds-table/filters/components/column-filter-popover/column-filter-popover.module.scss
+var column_filter_popover_module_default = {
+	"body": "_0oV9a_body",
+	"content": "_0oV9a_content",
+	"footer": "_0oV9a_footer",
+	"trigger": "_0oV9a_trigger",
+	"triggerActive": "_0oV9a_triggerActive",
+	"triggerOpen": "_0oV9a_triggerOpen"
+};
+//#endregion
+//#region src/components/ds-table/filters/components/column-filter-popover/column-filter-popover.tsx
+const stopPropagation = (event) => event.stopPropagation();
+/**
+* Per-column filter popover anchored to a header cell: funnel trigger,
+* adapter UI as the body, Clear / Save footer wired to `useTableFilters`.
+*/
+const DsTableColumnFilterPopover = ({ children, hasActiveFilter, onApply, onClear, onCancel, locale, className }) => {
+	const { triggerAriaLabel = "Filter column", clearLabel = "Clear", saveLabel = "Save" } = locale ?? {};
+	const [open, setOpen] = (0, react.useState)(false);
+	const handleOpenChange = (details) => {
+		if (open && !details.open) onCancel();
+		setOpen(details.open);
+	};
+	const handleSave = () => {
+		onApply();
+		setOpen(false);
+	};
+	const handleClear = () => {
+		onClear();
+		setOpen(false);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_ark_ui_react_popover.Popover.Root, {
+		open,
+		onOpenChange: handleOpenChange,
+		positioning: {
+			placement: "bottom-end",
+			gutter: 4
+		},
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react_popover.Popover.Trigger, {
+			asChild: true,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsButtonV3, {
+				variant: "tertiary",
+				size: "tiny",
+				className: (0, classnames.default)(column_filter_popover_module_default.trigger, hasActiveFilter && column_filter_popover_module_default.triggerActive, open && column_filter_popover_module_default.triggerOpen),
+				"aria-label": triggerAriaLabel,
+				"data-active": hasActiveFilter ? "true" : void 0,
+				onClick: (event) => event.stopPropagation(),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsIcon, {
+					icon: "filter_alt",
+					variant: "outlined",
+					filled: hasActiveFilter,
+					size: "tiny"
+				})
+			})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react_portal.Portal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react_popover.Popover.Positioner, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_ark_ui_react_popover.Popover.Content, {
+			className: (0, classnames.default)(column_filter_popover_module_default.content, className),
+			onClick: stopPropagation,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: column_filter_popover_module_default.body,
+				children
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: column_filter_popover_module_default.footer,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsButtonV3, {
+					variant: "secondary",
+					size: "small",
+					onClick: handleClear,
+					children: clearLabel
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsButtonV3, {
+					variant: "primary",
+					size: "small",
+					onClick: handleSave,
+					children: saveLabel
+				})]
+			})]
+		}) }) })]
+	});
+};
+//#endregion
 //#region src/components/ds-table/components/core-table/core-table.module.scss
 var core_table_module_default = {
 	"table": "JP3Vta_table",
@@ -18693,6 +18849,9 @@ 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",
 	"headerCell": "-2rCNG_headerCell",
 	"headerRow": "-2rCNG_headerRow",
 	"headerRowNoBorder": "-2rCNG_headerRowNoBorder",
@@ -18727,18 +18886,83 @@ const useDsTableContext = () => {
 	if (!context) throw new Error("useDsTableContext must be used within DsTable");
 	return context;
 };
+/**
+* Hoisted editing state for single-cell-at-a-time inline editing.
+* Lives on {@link DsTableContext} so cell renderers and editors share one provider.
+*/
+const useEditingState = (onCellEdit, onCellValidate) => {
+	const [editing, setEditing] = (0, react.useState)(null);
+	const onCellEditRef = (0, react.useRef)(onCellEdit);
+	onCellEditRef.current = onCellEdit;
+	const onCellValidateRef = (0, react.useRef)(onCellValidate);
+	onCellValidateRef.current = onCellValidate;
+	const editingRef = (0, react.useRef)(editing);
+	editingRef.current = editing;
+	return {
+		editing,
+		beginEdit: (0, react.useCallback)((cell) => {
+			const current = editingRef.current;
+			if (current) {
+				if (current.cell.row.id === cell.row.id && current.cell.column.id === cell.column.id) return;
+			}
+			setEditing({
+				cell,
+				draftValue: cell.getValue(),
+				error: null
+			});
+		}, []),
+		setDraft: (0, react.useCallback)((value) => {
+			const current = editingRef.current;
+			if (!current) return;
+			setEditing({
+				...current,
+				draftValue: value,
+				error: null
+			});
+		}, []),
+		commit: (0, react.useCallback)((overrideValue) => {
+			const current = editingRef.current;
+			if (!current) return;
+			const valueToCommit = overrideValue !== void 0 ? overrideValue : current.draftValue;
+			const error = onCellValidateRef.current?.(current.cell.row.original, current.cell.column.id, valueToCommit) ?? null;
+			if (error !== null) {
+				setEditing({
+					...current,
+					draftValue: valueToCommit,
+					error
+				});
+				return;
+			}
+			onCellEditRef.current?.(current.cell.row.original, current.cell.column.id, valueToCommit);
+			setEditing(null);
+		}, []),
+		cancel: (0, react.useCallback)(() => {
+			setEditing(null);
+		}, [])
+	};
+};
 //#endregion
 //#region src/components/ds-table/utils/column-size.ts
 /**
-* Generates the appropriate style object for a table column/cell based on its size and virtualization state
+* Generates the appropriate style object for a table column/cell based on its size
+*
+* Custom-sized columns get a fixed `width` plus `minWidth` and `flexShrink: 0` so
+* they enforce horizontal overflow on the table container. Default-sized columns
+* grow to fill the row evenly via `flex: 1`.
 *
 * @param columnSize - The size of the column
-* @param virtualized - Whether the table is virtualized
-* @returns Style object or undefined if no custom styling is needed
+* @returns Style object for the column/cell
 */
-const getColumnSizeStyle = (columnSize, virtualized) => {
-	if (columnSize !== _tanstack_react_table.defaultColumnSizing.size) return { width: columnSize };
-	if (virtualized) return { flex: 1 };
+const getColumnSizeStyle = (columnSize) => {
+	if (columnSize !== _tanstack_react_table.defaultColumnSizing.size) return {
+		width: columnSize,
+		minWidth: columnSize,
+		flexShrink: 0
+	};
+	return {
+		flex: 1,
+		minWidth: 0
+	};
 };
 /**
 * Column id used for the synthetic expander column injected when `expandable` is set.
@@ -18762,33 +18986,49 @@ const DsTableHeader = ({ table }) => {
 		children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableRow, {
 			className: (0, classnames.default)(ds_table_header_module_default.headerRow, !bordered && ds_table_header_module_default.headerRowNoBorder, virtualized && ds_table_header_module_default.headerRowVirtualized),
 			children: headerGroup.headers.map((header) => {
-				const headerStyle = getColumnSizeStyle(header.column.getSize(), virtualized);
+				const headerStyle = getColumnSizeStyle(header.column.getSize());
 				const canSort = header.column.getCanSort();
 				const isSelectColumn = header.column.id === SELECT_COLUMN_ID;
+				const metaFilter = header.column.columnDef.meta?.filter;
+				const resolvedFilter = metaFilter && "render" in metaFilter ? metaFilter : void 0;
+				const hasActiveColumnFilter = resolvedFilter?.hasActiveFilter ?? false;
 				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableHead, {
-					className: (0, classnames.default)(ds_table_header_module_default.headerCell, canSort && ds_table_header_module_default.sortableHeader, isSelectColumn && ds_table_header_module_default.selectHeaderCell),
+					className: (0, classnames.default)(ds_table_header_module_default.headerCell, canSort && ds_table_header_module_default.sortableHeader, isSelectColumn && ds_table_header_module_default.selectHeaderCell, resolvedFilter && ds_table_header_module_default.filterableHeader, hasActiveColumnFilter && ds_table_header_module_default.filterActive),
 					onClick: header.column.getToggleSortingHandler(),
 					style: headerStyle,
 					children: header.isPlaceholder ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: ds_table_header_module_default.headerSortContainer,
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsStack, {
-							direction: "column",
-							justifyContent: "center",
-							width: "100%",
-							children: (0, _tanstack_react_table.flexRender)(header.column.columnDef.header, header.getContext())
-						}), canSort && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: ds_table_header_module_default.pageButtonIconContainer,
-							children: {
-								asc: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsIcon, {
-									icon: "arrow_drop_up",
-									className: (0, classnames.default)(ds_table_header_module_default.pageButtonIcon, ds_table_shared_module_default.pageButtonIcon)
-								}),
-								desc: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsIcon, {
-									icon: "arrow_drop_down",
-									className: (0, classnames.default)(ds_table_header_module_default.pageButtonIcon, ds_table_shared_module_default.pageButtonIcon)
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsStack, {
+								direction: "column",
+								justifyContent: "center",
+								width: "100%",
+								children: (0, _tanstack_react_table.flexRender)(header.column.columnDef.header, header.getContext())
+							}),
+							canSort && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: ds_table_header_module_default.pageButtonIconContainer,
+								children: {
+									asc: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsIcon, {
+										icon: "arrow_drop_up",
+										className: (0, classnames.default)(ds_table_header_module_default.pageButtonIcon, ds_table_shared_module_default.pageButtonIcon)
+									}),
+									desc: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsIcon, {
+										icon: "arrow_drop_down",
+										className: (0, classnames.default)(ds_table_header_module_default.pageButtonIcon, ds_table_shared_module_default.pageButtonIcon)
+									})
+								}[header.column.getIsSorted()] ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: (0, classnames.default)(ds_table_header_module_default.pageButtonIcon, ds_table_shared_module_default.pageButtonIcon) })
+							}),
+							resolvedFilter && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: ds_table_header_module_default.filterTriggerContainer,
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTableColumnFilterPopover, {
+									hasActiveFilter: resolvedFilter.hasActiveFilter,
+									onApply: resolvedFilter.onApply,
+									onClear: resolvedFilter.onClear,
+									onCancel: resolvedFilter.onCancel,
+									children: resolvedFilter.render()
 								})
-							}[header.column.getIsSorted()] ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: (0, classnames.default)(ds_table_header_module_default.pageButtonIcon, ds_table_shared_module_default.pageButtonIcon) })
-						})]
+							})
+						]
 					})
 				}, header.id);
 			})
@@ -18803,20 +19043,124 @@ var ds_table_module_default = {
 	"dataTableContainer": "iL9mtW_dataTableContainer",
 	"emptyState": "iL9mtW_emptyState",
 	"fullWidth": "iL9mtW_fullWidth",
-	"rotate": "iL9mtW_rotate",
-	"rotate-135": "iL9mtW_rotate-135",
-	"rotate-180": "iL9mtW_rotate-180",
-	"rotate-225": "iL9mtW_rotate-225",
-	"rotate-270": "iL9mtW_rotate-270",
-	"rotate-315": "iL9mtW_rotate-315",
-	"rotate-45": "iL9mtW_rotate-45",
-	"rotate-90": "iL9mtW_rotate-90",
+	"scrollbar-thin": "iL9mtW_scrollbar-thin",
 	"table": "iL9mtW_table",
 	"tableNoBorder": "iL9mtW_tableNoBorder",
-	"virtualized": "iL9mtW_virtualized",
 	"virtualizedContainer": "iL9mtW_virtualizedContainer"
 };
 //#endregion
+//#region src/components/ds-table/components/edit/ds-table-editable-cell/ds-table-editable-cell.module.scss
+var ds_table_editable_cell_module_default = {
+	"editButton": "g5FEoW_editButton",
+	"root": "g5FEoW_root"
+};
+//#endregion
+//#region src/components/ds-table/components/edit/ds-table-editable-cell/ds-table-editable-cell.tsx
+const DsTableEditableCell = ({ cell, children }) => {
+	const { beginEdit, editing } = useDsTableContext();
+	const isEditing = editing !== null && editing.cell.row.id === cell.row.id && editing.cell.column.id === cell.column.id;
+	const handleEdit = (event) => {
+		event.stopPropagation();
+		beginEdit(cell);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: ds_table_editable_cell_module_default.root,
+		"data-active": isEditing ? "" : void 0,
+		onDoubleClick: handleEdit,
+		tabIndex: 0,
+		role: "button",
+		"aria-label": "Double-click to edit",
+		children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsButtonV3, {
+			className: ds_table_editable_cell_module_default.editButton,
+			variant: "tertiary",
+			size: "small",
+			icon: "edit",
+			"aria-label": "Edit cell",
+			onClick: handleEdit
+		})]
+	});
+};
+//#endregion
+//#region src/components/ds-table/components/edit/ds-table-editing-cell/ds-table-editing-cell.module.scss
+var ds_table_editing_cell_module_default = {
+	"actions": "-EpLaa_actions",
+	"editAnchor": "-EpLaa_editAnchor",
+	"overlay": "-EpLaa_overlay",
+	"row": "-EpLaa_row",
+	"slot": "-EpLaa_slot"
+};
+//#endregion
+//#region src/components/ds-table/components/edit/ds-table-editing-cell/ds-table-editing-cell.tsx
+const DsTableEditingCell = ({ cell }) => {
+	const { commit, cancel } = useDsTableContext();
+	const columnDef = cell.column.columnDef;
+	const editAnchorRef = (0, react.useRef)(null);
+	const handleSubmit = (event) => {
+		event.preventDefault();
+		event.stopPropagation();
+		commit();
+	};
+	(0, react.useEffect)(() => {
+		const handleKeyDown = (event) => {
+			if (event.key !== "Escape") return;
+			if (!editAnchorRef.current?.contains(document.activeElement)) return;
+			event.preventDefault();
+			event.stopPropagation();
+			cancel();
+		};
+		document.addEventListener("keydown", handleKeyDown);
+		return () => {
+			document.removeEventListener("keydown", handleKeyDown);
+		};
+	}, [cancel]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref: editAnchorRef,
+		className: ds_table_editing_cell_module_default.editAnchor,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("form", {
+			className: ds_table_editing_cell_module_default.overlay,
+			onSubmit: handleSubmit,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DsStack, {
+				direction: "row",
+				gap: "var(--3xs)",
+				alignItems: "flex-start",
+				width: "100%",
+				className: ds_table_editing_cell_module_default.row,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsStack, {
+					flex: "1 1 auto",
+					className: ds_table_editing_cell_module_default.slot,
+					children: columnDef.editCell ? (0, _tanstack_react_table.flexRender)(columnDef.editCell, cell.getContext()) : null
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DsStack, {
+					direction: "row",
+					gap: "var(--3xs)",
+					className: ds_table_editing_cell_module_default.actions,
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsButtonV3, {
+						type: "button",
+						variant: "tertiary",
+						size: "small",
+						icon: "close",
+						"aria-label": "Cancel edit",
+						onClick: (event) => {
+							event.stopPropagation();
+							cancel();
+						},
+						style: { color: "var(--icon-error)" }
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsButtonV3, {
+						type: "submit",
+						variant: "tertiary",
+						size: "small",
+						icon: "check",
+						"aria-label": "Confirm edit",
+						onClick: (event) => {
+							event.stopPropagation();
+						},
+						style: { color: "var(--icon-success)" }
+					})]
+				})]
+			})
+		})
+	});
+};
+//#endregion
 //#region src/components/ds-table/components/ds-table-cell/ds-table-cell.module.scss
 var ds_table_cell_module_default = {
 	"cellActions": "UprPSq_cellActions",
@@ -18828,20 +19172,19 @@ var ds_table_cell_module_default = {
 };
 //#endregion
 //#region src/components/ds-table/components/ds-table-cell/ds-table-cell.tsx
-const DsDefaultTableCell = ({ cell }) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: ds_table_cell_module_default.tableCellEllipsis,
-		children: (0, _tanstack_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext())
-	});
-};
 const DsTableCell = ({ row, cell, primaryRowActions = [], secondaryRowActions = [] }) => {
+	const { editing } = useDsTableContext();
+	const isCellBeingEdited = editing !== null && editing.cell.row.id === row.id && editing.cell.column.id === cell.column.id;
 	const visiblePrimary = primaryRowActions.filter((action) => !action.hidden?.(row.original));
 	const visibleSecondary = secondaryRowActions.filter((action) => !action.hidden?.(row.original));
-	if (visiblePrimary.length || visibleSecondary.length) {
+	if (!isCellBeingEdited && (visiblePrimary.length || visibleSecondary.length)) {
 		const hasSecondaryRowActions = visibleSecondary.length > 0;
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: ds_table_cell_module_default.lastCell,
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsDefaultTableCell, { cell }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CellContent, {
+				cell,
+				isCellBeingEdited
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: ds_table_cell_module_default.cellActions,
 				children: [visiblePrimary.map((action, i) => {
 					const isDisabled = action.disabled?.(row.original);
@@ -18892,13 +19235,32 @@ const DsTableCell = ({ row, cell, primaryRowActions = [], secondaryRowActions =
 			})]
 		});
 	}
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsDefaultTableCell, { cell });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CellContent, {
+		cell,
+		isCellBeingEdited
+	});
 };
-//#endregion
+const CellContent = ({ cell, isCellBeingEdited }) => {
+	const isEditable = typeof cell.column.columnDef.editCell === "function";
+	if (isCellBeingEdited) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTableEditingCell, { cell });
+	if (isEditable) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTableEditableCell, {
+		cell,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: ds_table_cell_module_default.tableCellEllipsis,
+			children: (0, _tanstack_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext())
+		})
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: ds_table_cell_module_default.tableCellEllipsis,
+		children: (0, _tanstack_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext())
+	});
+};
+//#endregion
 //#region src/components/ds-table/components/ds-table-row/ds-table-row.module.scss
 var ds_table_row_module_default = {
 	"cellReorder": "t8OZCq_cellReorder",
 	"clickableRow": "t8OZCq_clickableRow",
+	"editableCell": "t8OZCq_editableCell",
 	"expandableCell": "t8OZCq_expandableCell",
 	"expanded": "t8OZCq_expanded",
 	"expandedRow": "t8OZCq_expandedRow",
@@ -18967,7 +19329,7 @@ const DsTableRow = ({ ref, row, isSelected }) => {
 			}, cell.id);
 			const isLastColumn = idx === row.getVisibleCells().length - 1;
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableCell, {
-				className: (0, classnames.default)(ds_table_row_module_default.tableCell, cell.column.id === "expander" && ds_table_row_module_default.expandableCell, cell.column.id === "select" && ds_table_row_module_default.selectableCell),
+				className: (0, classnames.default)(ds_table_row_module_default.tableCell, cell.column.id === "expander" && ds_table_row_module_default.expandableCell, cell.column.id === "select" && ds_table_row_module_default.selectableCell, typeof cell.column.columnDef.editCell === "function" && ds_table_row_module_default.editableCell),
 				style: cellStyle,
 				children: isLastColumn ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTableCell, {
 					row,
@@ -19087,13 +19449,16 @@ 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",
@@ -19133,8 +19498,8 @@ const DsTableRowVirtualized = ({ row, isSelected, rowsMapRef, rowHeightsMapRef,
 		children: isExpandedRowContent ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableCell, { children: renderExpandedRow?.(row.original) }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: row.getVisibleCells().map((cell, idx) => {
 			const isLastColumn = idx === row.getVisibleCells().length - 1;
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableCell, {
-				style: getColumnSizeStyle(cell.column.getSize(), true),
-				className: (0, classnames.default)(ds_table_row_virtualized_module_default.cell, cell.column.id === "expander" && ds_table_row_virtualized_module_default.expandableCell, cell.column.id === "select" && ds_table_row_virtualized_module_default.selectableCell),
+				style: getColumnSizeStyle(cell.column.getSize()),
+				className: (0, classnames.default)(ds_table_row_virtualized_module_default.cell, cell.column.id === "expander" && ds_table_row_virtualized_module_default.expandableCell, cell.column.id === "select" && ds_table_row_virtualized_module_default.selectableCell, typeof cell.column.columnDef.editCell === "function" && ds_table_row_virtualized_module_default.editableCell),
 				children: isLastColumn ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTableCell, {
 					row,
 					cell,
@@ -19179,9 +19544,10 @@ const useInfiniteScroll = (scrollElementRef, rowCount, config) => {
 };
 //#endregion
 //#region src/components/ds-table/components/ds-table-body-virtualized/ds-table-body-virtualized.tsx
-const DsTableBodyVirtualized = ({ table, tableContainerRef, emptyState, estimateSize, overscan, onScroll, rowSelection, infiniteScroll }) => {
+const DsTableBodyVirtualized = ({ table, emptyState, estimateSize, overscan, onScroll, rowSelection, infiniteScroll }) => {
 	const rowsMapRef = (0, react.useRef)(/* @__PURE__ */ new Map());
 	const rowHeightsMapRef = (0, react.useRef)(/* @__PURE__ */ new Map());
+	const tbodyRef = (0, react.useRef)(null);
 	const { rows } = table.getRowModel();
 	const rowsAndExpandedRowContent = rows.flatMap((row) => row.getIsExpanded() ? [{ row }, {
 		row,
@@ -19191,14 +19557,14 @@ const DsTableBodyVirtualized = ({ table, tableContainerRef, emptyState, estimate
 		const item = rowsAndExpandedRowContent[index];
 		return item ? `${item.row.id}${item.isExpandedRowContent ? "-expanded-content" : ""}` : String(index);
 	};
-	const { loadDataIfNeeded } = useInfiniteScroll(tableContainerRef, rows.length, infiniteScroll);
+	const { loadDataIfNeeded } = useInfiniteScroll(tbodyRef, rows.length, infiniteScroll);
 	const rowVirtualizer = (0, _tanstack_react_virtual.useVirtualizer)({
 		count: rowsAndExpandedRowContent.length,
 		estimateSize: (index) => {
 			return rowHeightsMapRef.current.get(getItemKey(index)) || estimateSize;
 		},
 		getItemKey,
-		getScrollElement: () => tableContainerRef.current,
+		getScrollElement: () => tbodyRef.current,
 		measureElement: typeof window !== "undefined" && navigator.userAgent.indexOf("Firefox") === -1 ? (element) => element.getBoundingClientRect().height : void 0,
 		overscan: overscan ?? 5,
 		onChange: (instance, sync) => {
@@ -19231,6 +19597,7 @@ const DsTableBodyVirtualized = ({ table, tableContainerRef, emptyState, estimate
 		rowVirtualizer.measure();
 	}, [table.getState()]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTableBody, {
+		ref: tbodyRef,
 		rowsMapRef,
 		rowHeightsMapRef,
 		rowVirtualizer,
@@ -19239,12 +19606,13 @@ const DsTableBodyVirtualized = ({ table, tableContainerRef, emptyState, estimate
 		rowSelection
 	});
 };
-function DsTableBody({ rowVirtualizer, rowsMapRef, rowHeightsMapRef, rowsAndExpandedRowContent, emptyState, rowSelection }) {
+function DsTableBody({ ref, rowVirtualizer, rowsMapRef, rowHeightsMapRef, rowsAndExpandedRowContent, emptyState, rowSelection }) {
 	const virtualRows = rowVirtualizer.getVirtualItems();
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableBody, {
+	const totalSize = rowVirtualizer.getTotalSize();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(TableBody, {
+		ref,
 		className: ds_table_body_virtualized_module_default.body,
-		style: { height: `${rowVirtualizer.getTotalSize().toString()}px` },
-		children: virtualRows.length > 0 ? virtualRows.map((virtualRow) => {
+		children: [virtualRows.length > 0 ? virtualRows.map((virtualRow) => {
 			const row = rowsAndExpandedRowContent[virtualRow.index];
 			if (!row) return null;
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTableRowVirtualized, {
@@ -19259,7 +19627,12 @@ function DsTableBody({ rowVirtualizer, rowsMapRef, rowHeightsMapRef, rowsAndExpa
 		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableRow, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableCell, {
 			className: ds_table_body_virtualized_module_default.emptyState,
 			children: emptyState || "No results."
-		}) })
+		}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tr", {
+			"aria-hidden": true,
+			className: ds_table_body_virtualized_module_default.sentinel,
+			style: { top: `${totalSize.toString()}px` },
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {})
+		})]
 	});
 }
 //#endregion
@@ -19272,7 +19645,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, activeRowId, infiniteScroll, onCellEdit, onCellValidate }) => {
 	const [data, setData] = react.useState(tableData);
 	const [sorting, setSorting] = react.useState([]);
 	const [internalColumnFilters, setInternalColumnFilters] = react.useState([]);
@@ -19438,18 +19811,19 @@ const DsTable = ({ ref, columns: columnsProp, data: tableData, virtualized = fal
 		secondaryRowActions,
 		renderExpandedRow,
 		virtualized,
-		activeRowId
+		activeRowId,
+		onCellEdit,
+		...useEditingState(onCellEdit, onCellValidate)
 	};
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DsTableContext.Provider, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTableContext.Provider, {
 		value: contextValue,
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			ref: tableContainerRef,
 			className: (0, classnames.default)(ds_table_module_default.container, !virtualized && ds_table_module_default.dataTableContainer, virtualized && ds_table_module_default.virtualizedContainer, isBulkActionsVisible && ds_table_module_default.bulkActionsVisible, className),
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DragWrapper, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Table, {
-				className: (0, classnames.default)(fullWidth && ds_table_module_default.fullWidth, !bordered && ds_table_module_default.tableNoBorder, virtualized && ds_table_module_default.virtualized),
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DragWrapper, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Table, {
+				className: (0, classnames.default)(fullWidth && ds_table_module_default.fullWidth, !bordered && ds_table_module_default.tableNoBorder),
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTableHeader, { table }), virtualized ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTableBodyVirtualized, {
 					table,
-					tableContainerRef,
 					emptyState,
 					estimateSize: virtualizedOptions?.estimateSize || ROW_SIZE_HEIGHT_MAP[rowSize],
 					overscan: virtualizedOptions?.overscan,
@@ -19460,15 +19834,175 @@ const DsTable = ({ ref, columns: columnsProp, data: tableData, virtualized = fal
 					row,
 					isSelected: !!rowSelection[row.id]
 				}, row.id)) : renderEmptyState() }) })]
-			}) })
-		}), selectable && actions.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTableBulkActions, {
-			numSelectedRows: selectedRows.length,
-			actions: actions.map((action) => ({
-				...action,
-				onClick: () => action.onClick(selectedRows)
-			})),
-			onClearSelection: table.resetRowSelection
-		})]
+			}) }), selectable && actions.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTableBulkActions, {
+				numSelectedRows: selectedRows.length,
+				actions: actions.map((action) => ({
+					...action,
+					onClick: () => action.onClick(selectedRows)
+				})),
+				onClearSelection: table.resetRowSelection
+			})]
+		})
+	});
+};
+//#endregion
+//#region src/components/ds-table/hooks/use-cell-editor.ts
+/**
+* Wires a TanStack Table `editCell` renderer into DsTable's hoisted editing state.
+* Only mount this hook inside `ColumnDef.editCell` — the table cell layer handles
+* entering edit mode on double-click.
+*/
+const useCellEditor = ({ cellContext }) => {
+	const ctx = useDsTableContext();
+	const { row, column, getValue } = cellContext;
+	const isActiveCell = ctx.editing !== null && ctx.editing.cell.row.id === row.id && ctx.editing.cell.column.id === column.id;
+	const value = isActiveCell && ctx.editing ? ctx.editing.draftValue : getValue();
+	const error = isActiveCell && ctx.editing ? ctx.editing.error : null;
+	const setValue = (next) => {
+		ctx.setDraft(next);
+	};
+	const commit = (overrideValue) => {
+		ctx.commit(overrideValue);
+	};
+	const cancel = () => {
+		ctx.cancel();
+	};
+	const stopPropagation = (event) => {
+		event.stopPropagation();
+	};
+	return {
+		value,
+		error,
+		setValue,
+		commit,
+		cancel,
+		stopPropagation,
+		editorContainerProps: {
+			onKeyDown: () => {},
+			onClick: stopPropagation,
+			onDoubleClick: stopPropagation
+		}
+	};
+};
+//#endregion
+//#region src/components/ds-table/components/edit/cell-editors/cell-editors.module.scss
+var cell_editors_module_default = { "fullWidth": "m8hPaq_fullWidth" };
+//#endregion
+//#region src/components/ds-table/components/edit/cell-editors/table-edit-form-control.tsx
+const TableEditFormControl = ({ cellContext, error, children }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsFormControl, {
+		hideLabel: true,
+		label: String(cellContext.column.columnDef.header ?? cellContext.column.id),
+		className: cell_editors_module_default.fullWidth,
+		status: error ? "error" : void 0,
+		message: error ?? void 0,
+		messageIcon: "cancel",
+		children
+	});
+};
+//#endregion
+//#region src/components/ds-table/components/edit/cell-editors/ds-table-edit-cell-text.tsx
+/** Text input editor for table cells. Render via `ColumnDef.editCell`. */
+const DsTableEditCellText = ({ cellContext, placeholder, maxLength }) => {
+	const { value, setValue, error } = useCellEditor({ cellContext });
+	const inputRef = (0, react.useRef)(null);
+	(0, react.useEffect)(() => {
+		const input = inputRef.current;
+		if (!input) return;
+		input.focus();
+		input.select();
+	}, []);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableEditFormControl, {
+		cellContext,
+		error,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsFormControl.TextInput, {
+			ref: inputRef,
+			className: cell_editors_module_default.fullWidth,
+			value,
+			placeholder,
+			maxLength,
+			onValueChange: setValue,
+			slots: error ? { endAdornment: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsIcon, {
+				icon: "error",
+				size: "tiny"
+			}) } : void 0
+		})
+	});
+};
+//#endregion
+//#region src/components/ds-table/components/edit/cell-editors/ds-table-edit-cell-number.tsx
+/** Number input editor for table cells. Render via `ColumnDef.editCell`. */
+const DsTableEditCellNumber = ({ cellContext, min, max, step }) => {
+	const { value, setValue, error } = useCellEditor({ cellContext });
+	const inputRef = (0, react.useRef)(null);
+	(0, react.useEffect)(() => {
+		const input = inputRef.current;
+		if (!input) return;
+		input.focus();
+		input.select();
+	}, []);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableEditFormControl, {
+		cellContext,
+		error,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsFormControl.NumberInput, {
+			ref: inputRef,
+			className: cell_editors_module_default.fullWidth,
+			value,
+			min,
+			max,
+			step,
+			onValueChange: setValue
+		})
+	});
+};
+//#endregion
+//#region src/components/ds-table/components/edit/cell-editors/ds-table-edit-cell-select.tsx
+/** Select editor for table cells. Render via `ColumnDef.editCell`. */
+const DsTableEditCellSelect = ({ cellContext, options, placeholder }) => {
+	const { value, setValue, error } = useCellEditor({ cellContext });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableEditFormControl, {
+		cellContext,
+		error,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsFormControl.Select, {
+			className: cell_editors_module_default.fullWidth,
+			value,
+			options,
+			placeholder,
+			onValueChange: setValue
+		})
+	});
+};
+//#endregion
+//#region src/components/ds-table/components/edit/cell-editors/ds-table-edit-cell-date.tsx
+/** Date picker editor for table cells. Render via `ColumnDef.editCell`. */
+const DsTableEditCellDate = ({ cellContext, min, max, placeholder }) => {
+	const { value, setValue, error } = useCellEditor({ cellContext });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableEditFormControl, {
+		cellContext,
+		error,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsFormControl.DatePicker, {
+			className: cell_editors_module_default.fullWidth,
+			value,
+			min,
+			max,
+			placeholder,
+			onChange: setValue,
+			slotProps: error ? { input: { slots: { endAdornment: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsIcon, {
+				icon: "error",
+				size: "tiny"
+			}) } } } : void 0
+		})
+	});
+};
+//#endregion
+//#region src/components/ds-table/components/edit/cell-editors/ds-table-edit-cell-checkbox.tsx
+/** Checkbox editor for table cells. Render via `ColumnDef.editCell`. */
+const DsTableEditCellCheckbox = ({ cellContext, disabled }) => {
+	const { value, setValue } = useCellEditor({ cellContext });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsCheckbox, {
+		checked: value,
+		disabled,
+		onCheckedChange: (checked) => setValue(checked === true)
 	});
 };
 //#endregion
@@ -20431,19 +20965,37 @@ DsVerticalTabs.List = DsVerticalTabsList;
 DsVerticalTabs.Tab = DsVerticalTabsTab;
 DsVerticalTabs.Content = DsVerticalTabsContent;
 //#endregion
-//#region src/components/ds-workspace/ds-workspace.module.scss
-var ds_workspace_module_default = {
-	"content": "XEdo8q_content",
-	"fillParent": "XEdo8q_fillParent",
-	"footer": "XEdo8q_footer",
-	"header": "XEdo8q_header",
-	"root": "XEdo8q_root",
-	"subHeader": "XEdo8q_subHeader"
+//#region src/components/ds-workspace-layout/ds-workspace-layout.module.scss
+var ds_workspace_layout_module_default = {
+	"body": "pc7Upa_body",
+	"content": "pc7Upa_content",
+	"contentWithLeftPanel": "pc7Upa_contentWithLeftPanel",
+	"fillParent": "pc7Upa_fillParent",
+	"footer": "pc7Upa_footer",
+	"header": "pc7Upa_header",
+	"leftPanel": "pc7Upa_leftPanel",
+	"root": "pc7Upa_root",
+	"sideMenu": "pc7Upa_sideMenu",
+	"sideMenuPanel": "pc7Upa_sideMenuPanel",
+	"sideMenuPinButton": "pc7Upa_sideMenuPinButton",
+	"subHeader": "pc7Upa_subHeader"
+};
+//#endregion
+//#region src/components/ds-workspace-layout/ds-workspace-layout.context.ts
+const DsWorkspaceLayoutContext = (0, react.createContext)(null);
+const useDsWorkspaceLayoutContext = () => {
+	const context = (0, react.useContext)(DsWorkspaceLayoutContext);
+	if (!context) throw new Error("DsWorkspaceLayout compound components must be used within DsWorkspaceLayout");
+	return context;
 };
 //#endregion
-//#region src/components/ds-workspace/ds-workspace.tsx
-const DsWorkspace = (t0) => {
-	const $ = (0, react_compiler_runtime.c)(10);
+//#region src/components/ds-workspace-layout/ds-workspace-layout.tsx
+const DEFAULT_LOCALE = Object.freeze({
+	pinButtonLabel: "Pin side menu",
+	unpinButtonLabel: "Unpin side menu"
+});
+const DsWorkspaceLayout = (t0) => {
+	const $ = (0, react_compiler_runtime.c)(17);
 	let className;
 	let rest;
 	let t1;
@@ -20459,24 +21011,58 @@ const DsWorkspace = (t0) => {
 		t1 = $[3];
 	}
 	const fillParent = t1 === void 0 ? false : t1;
+	const [hasLeftSidePanel, setHasLeftSidePanel] = (0, react.useState)(false);
 	let t2;
-	if ($[4] !== className || $[5] !== fillParent) {
-		t2 = (0, classnames.default)(ds_workspace_module_default.root, { [ds_workspace_module_default.fillParent]: fillParent }, className);
-		$[4] = className;
-		$[5] = fillParent;
-		$[6] = t2;
-	} else t2 = $[6];
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = () => setHasLeftSidePanel(true);
+		$[4] = t2;
+	} else t2 = $[4];
+	const registerLeftSidePanel = t2;
 	let t3;
-	if ($[7] !== rest || $[8] !== t2) {
-		t3 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = () => setHasLeftSidePanel(false);
+		$[5] = t3;
+	} else t3 = $[5];
+	const unregisterLeftSidePanel = t3;
+	let t4;
+	if ($[6] !== hasLeftSidePanel) {
+		t4 = {
+			hasLeftSidePanel,
+			registerLeftSidePanel,
+			unregisterLeftSidePanel
+		};
+		$[6] = hasLeftSidePanel;
+		$[7] = t4;
+	} else t4 = $[7];
+	const contextValue = t4;
+	let t5;
+	if ($[8] !== className || $[9] !== fillParent) {
+		t5 = (0, classnames.default)(ds_workspace_layout_module_default.root, { [ds_workspace_layout_module_default.fillParent]: fillParent }, className);
+		$[8] = className;
+		$[9] = fillParent;
+		$[10] = t5;
+	} else t5 = $[10];
+	let t6;
+	if ($[11] !== rest || $[12] !== t5) {
+		t6 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			...rest,
-			className: t2
+			className: t5
 		});
-		$[7] = rest;
-		$[8] = t2;
-		$[9] = t3;
-	} else t3 = $[9];
-	return t3;
+		$[11] = rest;
+		$[12] = t5;
+		$[13] = t6;
+	} else t6 = $[13];
+	let t7;
+	if ($[14] !== contextValue || $[15] !== t6) {
+		t7 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsWorkspaceLayoutContext.Provider, {
+			value: contextValue,
+			children: t6
+		});
+		$[14] = contextValue;
+		$[15] = t6;
+		$[16] = t7;
+	} else t7 = $[16];
+	return t7;
 };
 const Header = (t0) => {
 	const $ = (0, react_compiler_runtime.c)(8);
@@ -20493,7 +21079,7 @@ const Header = (t0) => {
 	}
 	let t1;
 	if ($[3] !== className) {
-		t1 = (0, classnames.default)(ds_workspace_module_default.header, className);
+		t1 = (0, classnames.default)(ds_workspace_layout_module_default.header, className);
 		$[3] = className;
 		$[4] = t1;
 	} else t1 = $[4];
@@ -20524,7 +21110,7 @@ const SubHeader = (t0) => {
 	}
 	let t1;
 	if ($[3] !== className) {
-		t1 = (0, classnames.default)(ds_workspace_module_default.subHeader, className);
+		t1 = (0, classnames.default)(ds_workspace_layout_module_default.subHeader, className);
 		$[3] = className;
 		$[4] = t1;
 	} else t1 = $[4];
@@ -20540,8 +21126,41 @@ const SubHeader = (t0) => {
 	} else t2 = $[7];
 	return t2;
 };
-/** Stacking context for non-portal drawer containment. */
+/** Content area: column layout, 24px vertical margins, 16px gap, 40px horizontal margins (24px when LeftPanel is mounted). */
 const Content = (t0) => {
+	const $ = (0, react_compiler_runtime.c)(9);
+	let className;
+	let rest;
+	if ($[0] !== t0) {
+		({className, ...rest} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = rest;
+	} else {
+		className = $[1];
+		rest = $[2];
+	}
+	const { hasLeftSidePanel } = useDsWorkspaceLayoutContext();
+	let t1;
+	if ($[3] !== className || $[4] !== hasLeftSidePanel) {
+		t1 = (0, classnames.default)(ds_workspace_layout_module_default.content, { [ds_workspace_layout_module_default.contentWithLeftPanel]: hasLeftSidePanel }, className);
+		$[3] = className;
+		$[4] = hasLeftSidePanel;
+		$[5] = t1;
+	} else t1 = $[5];
+	let t2;
+	if ($[6] !== rest || $[7] !== t1) {
+		t2 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			...rest,
+			className: t1
+		});
+		$[6] = rest;
+		$[7] = t1;
+		$[8] = t2;
+	} else t2 = $[8];
+	return t2;
+};
+const Footer = (t0) => {
 	const $ = (0, react_compiler_runtime.c)(8);
 	let className;
 	let rest;
@@ -20556,13 +21175,13 @@ const Content = (t0) => {
 	}
 	let t1;
 	if ($[3] !== className) {
-		t1 = (0, classnames.default)(ds_workspace_module_default.content, className);
+		t1 = (0, classnames.default)(ds_workspace_layout_module_default.footer, className);
 		$[3] = className;
 		$[4] = t1;
 	} else t1 = $[4];
 	let t2;
 	if ($[5] !== rest || $[6] !== t1) {
-		t2 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		t2 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("footer", {
 			...rest,
 			className: t1
 		});
@@ -20572,7 +21191,7 @@ const Content = (t0) => {
 	} else t2 = $[7];
 	return t2;
 };
-const Footer = (t0) => {
+const Body = (t0) => {
 	const $ = (0, react_compiler_runtime.c)(8);
 	let className;
 	let rest;
@@ -20585,15 +21204,16 @@ const Footer = (t0) => {
 		className = $[1];
 		rest = $[2];
 	}
+	useDsWorkspaceLayoutContext();
 	let t1;
 	if ($[3] !== className) {
-		t1 = (0, classnames.default)(ds_workspace_module_default.footer, className);
+		t1 = (0, classnames.default)(ds_workspace_layout_module_default.body, className);
 		$[3] = className;
 		$[4] = t1;
 	} else t1 = $[4];
 	let t2;
 	if ($[5] !== rest || $[6] !== t1) {
-		t2 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("footer", {
+		t2 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			...rest,
 			className: t1
 		});
@@ -20603,10 +21223,170 @@ const Footer = (t0) => {
 	} else t2 = $[7];
 	return t2;
 };
-DsWorkspace.Header = Header;
-DsWorkspace.SubHeader = SubHeader;
-DsWorkspace.Content = Content;
-DsWorkspace.Footer = Footer;
+const SideMenu = (t0) => {
+	const $ = (0, react_compiler_runtime.c)(28);
+	let children;
+	let className;
+	let locale;
+	let onPinnedChange;
+	let rest;
+	let t1;
+	if ($[0] !== t0) {
+		({className, pinned: t1, onPinnedChange, locale, children, ...rest} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = locale;
+		$[4] = onPinnedChange;
+		$[5] = rest;
+		$[6] = t1;
+	} else {
+		children = $[1];
+		className = $[2];
+		locale = $[3];
+		onPinnedChange = $[4];
+		rest = $[5];
+		t1 = $[6];
+	}
+	const pinned = t1 === void 0 ? false : t1;
+	useDsWorkspaceLayoutContext();
+	const [isHovering, setIsHovering] = (0, react.useState)(false);
+	const isExpanded = pinned || isHovering;
+	const ariaLabel = pinned ? locale?.unpinButtonLabel ?? DEFAULT_LOCALE.unpinButtonLabel : locale?.pinButtonLabel ?? DEFAULT_LOCALE.pinButtonLabel;
+	let t2;
+	if ($[7] !== className) {
+		t2 = (0, classnames.default)(ds_workspace_layout_module_default.sideMenu, className);
+		$[7] = className;
+		$[8] = t2;
+	} else t2 = $[8];
+	let t3;
+	if ($[9] !== pinned) {
+		t3 = pinned ? { "data-pinned": "" } : {};
+		$[9] = pinned;
+		$[10] = t3;
+	} else t3 = $[10];
+	let t4;
+	if ($[11] !== isExpanded) {
+		t4 = isExpanded ? { "data-expanded": "" } : {};
+		$[11] = isExpanded;
+		$[12] = t4;
+	} else t4 = $[12];
+	let t5;
+	let t6;
+	if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = () => setIsHovering(true);
+		t6 = () => setIsHovering(false);
+		$[13] = t5;
+		$[14] = t6;
+	} else {
+		t5 = $[13];
+		t6 = $[14];
+	}
+	let t7;
+	if ($[15] !== ariaLabel || $[16] !== onPinnedChange || $[17] !== pinned) {
+		t7 = onPinnedChange ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+			type: "button",
+			className: ds_workspace_layout_module_default.sideMenuPinButton,
+			onClick: () => onPinnedChange(!pinned),
+			"aria-label": ariaLabel,
+			"aria-pressed": pinned,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsIcon, {
+				icon: "keep",
+				size: "small",
+				filled: pinned
+			})
+		}) : null;
+		$[15] = ariaLabel;
+		$[16] = onPinnedChange;
+		$[17] = pinned;
+		$[18] = t7;
+	} else t7 = $[18];
+	let t8;
+	if ($[19] !== children || $[20] !== t7) {
+		t8 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: ds_workspace_layout_module_default.sideMenuPanel,
+			onMouseEnter: t5,
+			onMouseLeave: t6,
+			children: [t7, children]
+		});
+		$[19] = children;
+		$[20] = t7;
+		$[21] = t8;
+	} else t8 = $[21];
+	let t9;
+	if ($[22] !== rest || $[23] !== t2 || $[24] !== t3 || $[25] !== t4 || $[26] !== t8) {
+		t9 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("aside", {
+			...rest,
+			className: t2,
+			...t3,
+			...t4,
+			children: t8
+		});
+		$[22] = rest;
+		$[23] = t2;
+		$[24] = t3;
+		$[25] = t4;
+		$[26] = t8;
+		$[27] = t9;
+	} else t9 = $[27];
+	return t9;
+};
+const LeftPanel = (t0) => {
+	const $ = (0, react_compiler_runtime.c)(12);
+	let className;
+	let rest;
+	if ($[0] !== t0) {
+		({className, ...rest} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = rest;
+	} else {
+		className = $[1];
+		rest = $[2];
+	}
+	const { registerLeftSidePanel, unregisterLeftSidePanel } = useDsWorkspaceLayoutContext();
+	let t1;
+	let t2;
+	if ($[3] !== registerLeftSidePanel || $[4] !== unregisterLeftSidePanel) {
+		t1 = () => {
+			registerLeftSidePanel();
+			return unregisterLeftSidePanel;
+		};
+		t2 = [registerLeftSidePanel, unregisterLeftSidePanel];
+		$[3] = registerLeftSidePanel;
+		$[4] = unregisterLeftSidePanel;
+		$[5] = t1;
+		$[6] = t2;
+	} else {
+		t1 = $[5];
+		t2 = $[6];
+	}
+	(0, react.useEffect)(t1, t2);
+	let t3;
+	if ($[7] !== className) {
+		t3 = (0, classnames.default)(ds_workspace_layout_module_default.leftPanel, className);
+		$[7] = className;
+		$[8] = t3;
+	} else t3 = $[8];
+	let t4;
+	if ($[9] !== rest || $[10] !== t3) {
+		t4 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("aside", {
+			...rest,
+			className: t3
+		});
+		$[9] = rest;
+		$[10] = t3;
+		$[11] = t4;
+	} else t4 = $[11];
+	return t4;
+};
+DsWorkspaceLayout.Header = Header;
+DsWorkspaceLayout.SubHeader = SubHeader;
+DsWorkspaceLayout.Content = Content;
+DsWorkspaceLayout.Footer = Footer;
+DsWorkspaceLayout.Body = Body;
+DsWorkspaceLayout.SideMenu = SideMenu;
+DsWorkspaceLayout.LeftPanel = LeftPanel;
 //#endregion
 exports.BREAKPOINT_LG = BREAKPOINT_LG;
 exports.DsAlertBanner = DsAlertBanner;
@@ -20673,6 +21453,14 @@ exports.DsStepContent = DsStepContent;
 exports.DsStepper = DsStepper;
 exports.DsSystemStatus = DsSystemStatus;
 exports.DsTable = DsTable;
+exports.DsTableColumnFilterPopover = DsTableColumnFilterPopover;
+exports.DsTableEditCellCheckbox = DsTableEditCellCheckbox;
+exports.DsTableEditCellDate = DsTableEditCellDate;
+exports.DsTableEditCellNumber = DsTableEditCellNumber;
+exports.DsTableEditCellSelect = DsTableEditCellSelect;
+exports.DsTableEditCellText = DsTableEditCellText;
+exports.DsTableEditableCell = DsTableEditableCell;
+exports.DsTableEditingCell = DsTableEditingCell;
 exports.DsTabs = DsTabs;
 exports.DsTag = DsTag;
 exports.DsTagFilter = DsTagFilter;
@@ -20686,7 +21474,7 @@ exports.DsTooltip = DsTooltip;
 exports.DsTree = DsTree;
 exports.DsTypography = DsTypography;
 exports.DsVerticalTabs = DsVerticalTabs;
-exports.DsWorkspace = DsWorkspace;
+exports.DsWorkspaceLayout = DsWorkspaceLayout;
 exports.FatalFileUploadError = FatalFileUploadError;
 exports.FileUpload = FileUpload;
 exports.FileUploadError = FileUploadError;
@@ -20734,6 +21522,7 @@ exports.tagSizes = tagSizes;
 exports.tagVariants = tagVariants;
 exports.textInputSizes = textInputSizes;
 exports.useBreakpoint = useBreakpoint;
+exports.useCellEditor = useCellEditor;
 exports.useCheckboxSelectAll = useCheckboxSelectAll;
 exports.useFileUpload = useFileUpload;
 exports.useResponsiveValue = useResponsiveValue;