@drivenets/design-system 0.12.1 → 0.13.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";
@@ -3195,7 +3195,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 +3243,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 +5519,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 +5607,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 +5645,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 +5750,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 +5781,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 +5827,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 +6020,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
@@ -8248,6 +8248,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 +8331,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 +8520,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 +8593,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
@@ -9068,6 +9141,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 +9288,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 +9360,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 +13204,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);
-		$[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 = classNames(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 = classNames(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__ */ 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 +13255,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);
@@ -18107,68 +18165,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 +18184,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 +18287,10 @@ function createCheckboxFilterAdapter(config) {
 				items,
 				renderer,
 				selectedItems: value,
-				onSelectionChange: onChange
+				onSelectionChange: onChange,
+				searchable,
+				selectAll,
+				locale
 			});
 		}
 	});
@@ -18326,10 +18375,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 +18454,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 +18498,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 +18540,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 +18576,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 +18595,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 +18819,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",
@@ -18697,18 +18856,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.
@@ -18732,33 +18956,49 @@ 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);
+				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__ */ 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),
 					onClick: header.column.getToggleSortingHandler(),
 					style: headerStyle,
 					children: header.isPlaceholder ? null : /* @__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 +19013,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 +19142,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,13 +19205,32 @@ const DsTableCell = ({ row, cell, primaryRowActions = [], secondaryRowActions =
 			})]
 		});
 	}
-	return /* @__PURE__ */ jsx(DsDefaultTableCell, { cell });
+	return /* @__PURE__ */ jsx(CellContent, {
+		cell,
+		isCellBeingEdited
+	});
 };
-//#endregion
+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",
@@ -18937,7 +19299,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, typeof cell.column.columnDef.editCell === "function" && ds_table_row_module_default.editableCell),
 				style: cellStyle,
 				children: isLastColumn ? /* @__PURE__ */ jsx(DsTableCell, {
 					row,
@@ -19057,13 +19419,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",
@@ -19103,8 +19468,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, typeof cell.column.columnDef.editCell === "function" && ds_table_row_virtualized_module_default.editableCell),
 				children: isLastColumn ? /* @__PURE__ */ jsx(DsTableCell, {
 					row,
 					cell,
@@ -19149,9 +19514,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 +19527,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 +19567,7 @@ const DsTableBodyVirtualized = ({ table, tableContainerRef, emptyState, estimate
 		rowVirtualizer.measure();
 	}, [table.getState()]);
 	return /* @__PURE__ */ jsx(DsTableBody, {
+		ref: tbodyRef,
 		rowsMapRef,
 		rowHeightsMapRef,
 		rowVirtualizer,
@@ -19209,12 +19576,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__ */ jsx(TableBody, {
+	const totalSize = rowVirtualizer.getTotalSize();
+	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, {
@@ -19229,7 +19597,12 @@ function DsTableBody({ rowVirtualizer, rowsMapRef, rowHeightsMapRef, rowsAndExpa
 		}) : /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, {
 			className: ds_table_body_virtualized_module_default.emptyState,
 			children: emptyState || "No results."
-		}) })
+		}) }), /* @__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 +19615,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$1.useState(tableData);
 	const [sorting, setSorting] = React$1.useState([]);
 	const [internalColumnFilters, setInternalColumnFilters] = React$1.useState([]);
@@ -19408,18 +19781,19 @@ const DsTable = ({ ref, columns: columnsProp, data: tableData, virtualized = fal
 		secondaryRowActions,
 		renderExpandedRow,
 		virtualized,
-		activeRowId
+		activeRowId,
+		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 +19804,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 +20935,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 +20981,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 +21049,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 +21080,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 +21096,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 +21145,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 +21161,7 @@ const Content = (t0) => {
 	} else t2 = $[7];
 	return t2;
 };
-const Footer = (t0) => {
+const Body = (t0) => {
 	const $ = c(8);
 	let className;
 	let rest;
@@ -20555,15 +21174,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 +21193,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, dropdownMenuItemVariants, dsKeyValuePairOrientations, filterStatuses, formatTime, iconColors, iconSizes, iconVariants, isCustomIcon, isResponsiveValue, loaderVariants, progressArcSizes, progressArcVariants, progressDonutSizes, progressDonutVariants, progressLinearSizes, progressLinearVariants, resolveResponsiveValue, skeletonColorVariants, skeletonRadiusVariants, spinnerSizes, splitButtonSizes, statusBadgeV2Phases, statusBadgeV2Sizes, statusBadgeV2Variants, systemStatuses, tagSizes, tagVariants, textInputSizes, useBreakpoint, useCellEditor, useCheckboxSelectAll, useFileUpload, useResponsiveValue, useTableFilters, useToaster, withResponsiveProps };
 
 //# sourceMappingURL=index.js.map