@drivenets/design-system 0.17.0 → 0.18.1

package/dist/index.cjs

@@ -53,6 +53,7 @@ let _radix_ui_react_collapsible = require("@radix-ui/react-collapsible");
 _radix_ui_react_collapsible = __toESM(_radix_ui_react_collapsible, 1);
 let _ark_ui_react_radio_group = require("@ark-ui/react/radio-group");
 let _ark_ui_react_segment_group = require("@ark-ui/react/segment-group");
+let _ark_ui_react_slider = require("@ark-ui/react/slider");
 let _zag_js_steps = require("@zag-js/steps");
 _zag_js_steps = __toESM(_zag_js_steps, 1);
 let _zag_js_react = require("@zag-js/react");
@@ -3583,110 +3584,122 @@ var ds_autocomplete_module_default = {
 	"itemGroup": "pgg73q_itemGroup",
 	"itemIcon": "pgg73q_itemIcon",
 	"itemText": "pgg73q_itemText",
+	"large": "pgg73q_large",
 	"loading": "pgg73q_loading",
 	"noMatches": "pgg73q_noMatches",
 	"positioner": "pgg73q_positioner",
 	"root": "pgg73q_root",
+	"small": "pgg73q_small",
 	"startAdornment": "pgg73q_startAdornment",
 	"trigger": "pgg73q_trigger"
 };
 //#endregion
 //#region src/components/ds-autocomplete/ds-autocomplete.tsx
 const DsAutocomplete = (t0) => {
-	const $ = (0, react_compiler_runtime.c)(53);
-	const { id, options: t1, loading: t2, style, className, placeholder: t3, disabled: t4, invalid: t5, onValueChange, onInputValueChange, onOpenChange, locale: t6, highlightMatch: t7, showTrigger: t8, startAdornment } = t0;
+	const $ = (0, react_compiler_runtime.c)(58);
+	const { id, options: t1, loading: t2, size: t3, style, className, placeholder: t4, disabled: t5, invalid: t6, onValueChange, onInputValueChange, onOpenChange, locale: t7, highlightMatch: t8, showTrigger: t9, startAdornment } = t0;
 	const options = t1 === void 0 ? [] : t1;
 	const loading = t2 === void 0 ? false : t2;
-	const placeholder = t3 === void 0 ? "Start typing to search..." : t3;
-	const disabled = t4 === void 0 ? false : t4;
-	const invalid = t5 === void 0 ? false : t5;
-	let t9;
-	if ($[0] !== t6) {
-		t9 = t6 === void 0 ? {} : t6;
-		$[0] = t6;
-		$[1] = t9;
-	} else t9 = $[1];
-	const { loading: t10, noMatches: t11 } = t9;
-	const loadingMessage = t10 === void 0 ? "Loading..." : t10;
-	const noMatchesMessage = t11 === void 0 ? "No matches found" : t11;
-	const highlightMatch = t7 === void 0 ? true : t7;
-	const showTrigger = t8 === void 0 ? true : t8;
+	const size = t3 === void 0 ? "default" : t3;
+	const placeholder = t4 === void 0 ? "Start typing to search..." : t4;
+	const disabled = t5 === void 0 ? false : t5;
+	const invalid = t6 === void 0 ? false : t6;
+	let t10;
+	if ($[0] !== t7) {
+		t10 = t7 === void 0 ? {} : t7;
+		$[0] = t7;
+		$[1] = t10;
+	} else t10 = $[1];
+	const { loading: t11, noMatches: t12 } = t10;
+	const loadingMessage = t11 === void 0 ? "Loading..." : t11;
+	const noMatchesMessage = t12 === void 0 ? "No matches found" : t12;
+	const highlightMatch = t8 === void 0 ? true : t8;
+	const showTrigger = t9 === void 0 ? true : t9;
 	const [filterText, setFilterText] = (0, react.useState)("");
-	let t12;
+	let t13;
 	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
-		t12 = { sensitivity: "base" };
-		$[2] = t12;
-	} else t12 = $[2];
-	const filterUtils = (0, _ark_ui_react_locale.useFilter)(t12);
+		t13 = { sensitivity: "base" };
+		$[2] = t13;
+	} else t13 = $[2];
+	const filterUtils = (0, _ark_ui_react_locale.useFilter)(t13);
 	const collection = (0, _ark_ui_react_combobox.createListCollection)({
 		items: filterText ? options.filter((opt) => filterUtils.contains(opt.label, filterText)) : options,
-		itemToString: _temp$17,
+		itemToString: _temp$18,
 		itemToValue: _temp2$9
 	});
-	let t13;
+	let t14;
 	if ($[3] !== onInputValueChange) {
-		t13 = (details) => {
+		t14 = (details) => {
 			setFilterText(details.inputValue);
 			onInputValueChange?.(details.inputValue);
 		};
 		$[3] = onInputValueChange;
-		$[4] = t13;
-	} else t13 = $[4];
-	const handleInputValueChange = t13;
-	let t14;
+		$[4] = t14;
+	} else t14 = $[4];
+	const handleInputValueChange = t14;
+	let t15;
 	if ($[5] !== onValueChange) {
-		t14 = (details_0) => {
+		t15 = (details_0) => {
 			const selectedItem = details_0.items[0];
 			onValueChange?.(selectedItem?.value ?? "");
 		};
 		$[5] = onValueChange;
-		$[6] = t14;
-	} else t14 = $[6];
-	const handleValueChange = t14;
-	let t15;
+		$[6] = t15;
+	} else t15 = $[6];
+	const handleValueChange = t15;
+	let t16;
 	if ($[7] !== onOpenChange) {
-		t15 = (details_1) => {
+		t16 = (details_1) => {
 			onOpenChange?.(details_1.open);
 		};
 		$[7] = onOpenChange;
-		$[8] = t15;
-	} else t15 = $[8];
-	const handleOpenChange = t15;
-	let t16;
+		$[8] = t16;
+	} else t16 = $[8];
+	const handleOpenChange = t16;
+	let t17;
 	if ($[9] !== className || $[10] !== disabled || $[11] !== invalid) {
-		t16 = (0, classnames.default)(ds_autocomplete_module_default.root, {
+		t17 = (0, classnames.default)(ds_autocomplete_module_default.root, {
 			[ds_autocomplete_module_default.disabled]: disabled,
 			[ds_autocomplete_module_default.invalid]: invalid
 		}, className);
 		$[9] = className;
 		$[10] = disabled;
 		$[11] = invalid;
-		$[12] = t16;
-	} else t16 = $[12];
-	const rootClass = t16;
-	const t17 = _ark_ui_react_combobox.Combobox;
-	const t18 = true;
-	let t19;
-	if ($[13] !== startAdornment) {
-		t19 = startAdornment && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		$[12] = t17;
+	} else t17 = $[12];
+	const rootClass = t17;
+	const t18 = _ark_ui_react_combobox.Combobox;
+	const t19 = true;
+	const t20 = size === "small" && ds_autocomplete_module_default.small;
+	const t21 = size === "large" && ds_autocomplete_module_default.large;
+	let t22;
+	if ($[13] !== t20 || $[14] !== t21) {
+		t22 = (0, classnames.default)(ds_autocomplete_module_default.control, t20, t21);
+		$[13] = t20;
+		$[14] = t21;
+		$[15] = t22;
+	} else t22 = $[15];
+	let t23;
+	if ($[16] !== startAdornment) {
+		t23 = startAdornment && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 			className: ds_autocomplete_module_default.startAdornment,
 			children: startAdornment
 		});
-		$[13] = startAdornment;
-		$[14] = t19;
-	} else t19 = $[14];
-	let t20;
-	if ($[15] !== placeholder) {
-		t20 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react_combobox.Combobox.Input, {
+		$[16] = startAdornment;
+		$[17] = t23;
+	} else t23 = $[17];
+	let t24;
+	if ($[18] !== placeholder) {
+		t24 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react_combobox.Combobox.Input, {
 			className: ds_autocomplete_module_default.input,
 			placeholder
 		});
-		$[15] = placeholder;
-		$[16] = t20;
-	} else t20 = $[16];
-	let t21;
-	if ($[17] !== disabled || $[18] !== showTrigger) {
-		t21 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react_combobox.Combobox.Context, { children: (combobox) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		$[18] = placeholder;
+		$[19] = t24;
+	} else t24 = $[19];
+	let t25;
+	if ($[20] !== disabled || $[21] !== showTrigger || $[22] !== size) {
+		t25 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react_combobox.Combobox.Context, { children: (combobox) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: ds_autocomplete_module_default.iconContainer,
 			children: [combobox.inputValue && !disabled && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 				type: "button",
@@ -3698,56 +3711,58 @@ const DsAutocomplete = (t0) => {
 				},
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsIcon, {
 					icon: "close",
-					size: "medium"
+					size: size === "small" ? "small" : "medium"
 				})
 			}), showTrigger && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react_combobox.Combobox.Trigger, {
 				className: ds_autocomplete_module_default.trigger,
 				"aria-label": "Toggle dropdown",
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsIcon, {
 					icon: "keyboard_arrow_down",
-					size: "medium"
+					size: size === "small" ? "small" : "medium"
 				})
 			})]
 		}) });
-		$[17] = disabled;
-		$[18] = showTrigger;
-		$[19] = t21;
-	} else t21 = $[19];
-	let t22;
-	if ($[20] !== t19 || $[21] !== t20 || $[22] !== t21) {
-		t22 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_ark_ui_react_combobox.Combobox.Control, {
-			className: ds_autocomplete_module_default.control,
+		$[20] = disabled;
+		$[21] = showTrigger;
+		$[22] = size;
+		$[23] = t25;
+	} else t25 = $[23];
+	let t26;
+	if ($[24] !== t22 || $[25] !== t23 || $[26] !== t24 || $[27] !== t25) {
+		t26 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_ark_ui_react_combobox.Combobox.Control, {
+			className: t22,
 			children: [
-				t19,
-				t20,
-				t21
+				t23,
+				t24,
+				t25
 			]
 		});
-		$[20] = t19;
-		$[21] = t20;
-		$[22] = t21;
-		$[23] = t22;
-	} else t22 = $[23];
+		$[24] = t22;
+		$[25] = t23;
+		$[26] = t24;
+		$[27] = t25;
+		$[28] = t26;
+	} else t26 = $[28];
 	const T0 = _ark_ui_react_portal.Portal;
-	const t23 = _ark_ui_react_combobox.Combobox;
-	const t24 = ds_autocomplete_module_default;
-	const t25 = _ark_ui_react_combobox.Combobox;
-	const t26 = ds_autocomplete_module_default;
-	let t27;
-	if ($[24] !== loading || $[25] !== loadingMessage) {
-		t27 = loading && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	const t27 = _ark_ui_react_combobox.Combobox;
+	const t28 = ds_autocomplete_module_default;
+	const t29 = _ark_ui_react_combobox.Combobox;
+	const t30 = ds_autocomplete_module_default;
+	let t31;
+	if ($[29] !== loading || $[30] !== loadingMessage) {
+		t31 = loading && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: ds_autocomplete_module_default.loading,
 			children: loadingMessage
 		});
-		$[24] = loading;
-		$[25] = loadingMessage;
-		$[26] = t27;
-	} else t27 = $[26];
-	const t28 = !loading && collection.items.length === 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		$[29] = loading;
+		$[30] = loadingMessage;
+		$[31] = t31;
+	} else t31 = $[31];
+	const t32 = !loading && collection.items.length === 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: ds_autocomplete_module_default.noMatches,
 		children: noMatchesMessage
 	});
-	const t29 = !loading && collection.items.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react_combobox.Combobox.ItemGroup, {
+	const t33 = !loading && collection.items.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react_combobox.Combobox.ItemGroup, {
 		className: ds_autocomplete_module_default.itemGroup,
 		children: collection.items.map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_ark_ui_react_combobox.Combobox.Item, {
 			item: option,
@@ -3766,44 +3781,44 @@ const DsAutocomplete = (t0) => {
 			})]
 		}, option.value))
 	});
-	let t30;
-	if ($[27] !== t25.Content || $[28] !== t26.content || $[29] !== t27 || $[30] !== t28 || $[31] !== t29) {
-		t30 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(t25.Content, {
-			className: t26.content,
+	let t34;
+	if ($[32] !== t29.Content || $[33] !== t30.content || $[34] !== t31 || $[35] !== t32 || $[36] !== t33) {
+		t34 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(t29.Content, {
+			className: t30.content,
 			children: [
-				t27,
-				t28,
-				t29
+				t31,
+				t32,
+				t33
 			]
 		});
-		$[27] = t25.Content;
-		$[28] = t26.content;
-		$[29] = t27;
-		$[30] = t28;
-		$[31] = t29;
-		$[32] = t30;
-	} else t30 = $[32];
-	let t31;
-	if ($[33] !== t23.Positioner || $[34] !== t24.positioner || $[35] !== t30) {
-		t31 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(t23.Positioner, {
-			className: t24.positioner,
-			children: t30
-		});
-		$[33] = t23.Positioner;
-		$[34] = t24.positioner;
-		$[35] = t30;
-		$[36] = t31;
-	} else t31 = $[36];
-	let t32;
-	if ($[37] !== T0 || $[38] !== t31) {
-		t32 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(T0, { children: t31 });
-		$[37] = T0;
-		$[38] = t31;
-		$[39] = t32;
-	} else t32 = $[39];
-	let t33;
-	if ($[40] !== collection || $[41] !== disabled || $[42] !== handleInputValueChange || $[43] !== handleOpenChange || $[44] !== handleValueChange || $[45] !== id || $[46] !== invalid || $[47] !== rootClass || $[48] !== style || $[49] !== t17.Root || $[50] !== t22 || $[51] !== t32) {
-		t33 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(t17.Root, {
+		$[32] = t29.Content;
+		$[33] = t30.content;
+		$[34] = t31;
+		$[35] = t32;
+		$[36] = t33;
+		$[37] = t34;
+	} else t34 = $[37];
+	let t35;
+	if ($[38] !== t27.Positioner || $[39] !== t28.positioner || $[40] !== t34) {
+		t35 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(t27.Positioner, {
+			className: t28.positioner,
+			children: t34
+		});
+		$[38] = t27.Positioner;
+		$[39] = t28.positioner;
+		$[40] = t34;
+		$[41] = t35;
+	} else t35 = $[41];
+	let t36;
+	if ($[42] !== T0 || $[43] !== t35) {
+		t36 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(T0, { children: t35 });
+		$[42] = T0;
+		$[43] = t35;
+		$[44] = t36;
+	} else t36 = $[44];
+	let t37;
+	if ($[45] !== collection || $[46] !== disabled || $[47] !== handleInputValueChange || $[48] !== handleOpenChange || $[49] !== handleValueChange || $[50] !== id || $[51] !== invalid || $[52] !== rootClass || $[53] !== style || $[54] !== t18.Root || $[55] !== t26 || $[56] !== t36) {
+		t37 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(t18.Root, {
 			id,
 			collection,
 			className: rootClass,
@@ -3813,33 +3828,40 @@ const DsAutocomplete = (t0) => {
 			onInputValueChange: handleInputValueChange,
 			onValueChange: handleValueChange,
 			onOpenChange: handleOpenChange,
-			closeOnSelect: t18,
-			children: [t22, t32]
-		});
-		$[40] = collection;
-		$[41] = disabled;
-		$[42] = handleInputValueChange;
-		$[43] = handleOpenChange;
-		$[44] = handleValueChange;
-		$[45] = id;
-		$[46] = invalid;
-		$[47] = rootClass;
-		$[48] = style;
-		$[49] = t17.Root;
-		$[50] = t22;
-		$[51] = t32;
-		$[52] = t33;
-	} else t33 = $[52];
-	return t33;
+			closeOnSelect: t19,
+			children: [t26, t36]
+		});
+		$[45] = collection;
+		$[46] = disabled;
+		$[47] = handleInputValueChange;
+		$[48] = handleOpenChange;
+		$[49] = handleValueChange;
+		$[50] = id;
+		$[51] = invalid;
+		$[52] = rootClass;
+		$[53] = style;
+		$[54] = t18.Root;
+		$[55] = t26;
+		$[56] = t36;
+		$[57] = t37;
+	} else t37 = $[57];
+	return t37;
 };
 DsAutocomplete.displayName = "DsAutocomplete";
-function _temp$17(item) {
+function _temp$18(item) {
 	return item.label;
 }
 function _temp2$9(item_0) {
 	return item_0.value;
 }
 //#endregion
+//#region src/components/ds-autocomplete/ds-autocomplete.types.ts
+const autocompleteSizes = [
+	"small",
+	"default",
+	"large"
+];
+//#endregion
 //#region src/components/ds-avatar/ds-avatar.module.scss
 var ds_avatar_module_default = {
 	"avatar": "VcKEMW_avatar",
@@ -3938,11 +3960,11 @@ const DsAvatar = (t0) => {
 	return t11;
 };
 DsAvatar.displayName = "DsAvatar";
-function _temp$16(w) {
+function _temp$17(w) {
 	return w[0];
 }
 function _temp2$8(name_0) {
-	return name_0.trim().split(" ").map(_temp$16).join("");
+	return name_0.trim().split(" ").map(_temp$17).join("");
 }
 //#endregion
 //#region src/components/ds-avatar/ds-avatar.types.ts
@@ -4014,7 +4036,7 @@ const DsAvatarGroup = (t0) => {
 		t6 = remainingCount > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTooltip, {
 			content: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: ds_avatar_group_module_default.tooltipList,
-				children: hiddenAvatars.map(_temp$15)
+				children: hiddenAvatars.map(_temp$16)
 			}),
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: (0, classnames.default)(ds_avatar_group_module_default.moreAvatar, ds_avatar_group_module_default[size], ds_avatar_group_module_default[type]),
@@ -4048,7 +4070,7 @@ const DsAvatarGroup = (t0) => {
 	return t7;
 };
 DsAvatarGroup.displayName = "DsAvatarGroup";
-function _temp$15(avatar_0, index_0) {
+function _temp$16(avatar_0, index_0) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTypography, {
 		variant: "body-xs-reg",
 		children: avatar_0.name
@@ -4102,6 +4124,7 @@ var ds_text_input_module_default = {
 	"iconButton": "zbxt3W_iconButton",
 	"indicator": "zbxt3W_indicator",
 	"input": "zbxt3W_input",
+	"large": "zbxt3W_large",
 	"small": "zbxt3W_small",
 	"textInputContainer": "zbxt3W_textInputContainer",
 	"trigger": "zbxt3W_trigger"
@@ -4109,7 +4132,7 @@ var ds_text_input_module_default = {
 //#endregion
 //#region src/components/ds-text-input/ds-text-input.tsx
 const DsTextInput = (t0) => {
-	const $ = (0, react_compiler_runtime.c)(42);
+	const $ = (0, react_compiler_runtime.c)(43);
 	const { id, ref, name, size: t1, type: t2, onFocus, onBlur, onKeyDown, onChange, onValueChange, className, style: t3, value, defaultValue, min, max, minLength, maxLength, placeholder, disabled: t4, readOnly: t5, tabIndex, slots } = t0;
 	const size = t1 === void 0 ? "default" : t1;
 	const type = t2 === void 0 ? "text" : t2;
@@ -4125,51 +4148,54 @@ const DsTextInput = (t0) => {
 	const InputWrapper = slots?.inputWrapper ?? react.Fragment;
 	const t7 = size === "small";
 	const t8 = size === "default";
-	let t9;
-	if ($[2] !== className || $[3] !== t7 || $[4] !== t8) {
-		t9 = (0, classnames.default)(ds_text_input_module_default.textInputContainer, {
+	const t9 = size === "large";
+	let t10;
+	if ($[2] !== className || $[3] !== t7 || $[4] !== t8 || $[5] !== t9) {
+		t10 = (0, classnames.default)(ds_text_input_module_default.textInputContainer, {
 			[ds_text_input_module_default.small]: t7,
-			[ds_text_input_module_default.default]: t8
+			[ds_text_input_module_default.default]: t8,
+			[ds_text_input_module_default.large]: t9
 		}, className);
 		$[2] = className;
 		$[3] = t7;
 		$[4] = t8;
 		$[5] = t9;
-	} else t9 = $[5];
-	const containerClass = t9;
-	let t10;
-	if ($[6] !== onChange || $[7] !== onValueChange) {
-		t10 = (event) => {
+		$[6] = t10;
+	} else t10 = $[6];
+	const containerClass = t10;
+	let t11;
+	if ($[7] !== onChange || $[8] !== onValueChange) {
+		t11 = (event) => {
 			const newValue = event.target.value;
 			onChange?.(event);
 			onValueChange?.(newValue);
 		};
-		$[6] = onChange;
-		$[7] = onValueChange;
-		$[8] = t10;
-	} else t10 = $[8];
-	const handleChange = t10;
-	let t11;
-	if ($[9] !== slots) {
-		t11 = slots?.startAdornment && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		$[7] = onChange;
+		$[8] = onValueChange;
+		$[9] = t11;
+	} else t11 = $[9];
+	const handleChange = t11;
+	let t12;
+	if ($[10] !== slots) {
+		t12 = slots?.startAdornment && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: ds_text_input_module_default.adornment,
 			children: slots.startAdornment
 		});
-		$[9] = slots;
-		$[10] = t11;
-	} else t11 = $[10];
-	let t12;
-	if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
-		t12 = (0, classnames.default)(ds_text_input_module_default.input);
+		$[10] = slots;
 		$[11] = t12;
 	} else t12 = $[11];
 	let t13;
-	if ($[12] !== defaultValue || $[13] !== disabled || $[14] !== handleChange || $[15] !== id || $[16] !== max || $[17] !== maxLength || $[18] !== min || $[19] !== minLength || $[20] !== name || $[21] !== onBlur || $[22] !== onFocus || $[23] !== onKeyDown || $[24] !== placeholder || $[25] !== readOnly || $[26] !== ref || $[27] !== tabIndex || $[28] !== type || $[29] !== value) {
-		t13 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+	if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+		t13 = (0, classnames.default)(ds_text_input_module_default.input);
+		$[12] = t13;
+	} else t13 = $[12];
+	let t14;
+	if ($[13] !== defaultValue || $[14] !== disabled || $[15] !== handleChange || $[16] !== id || $[17] !== max || $[18] !== maxLength || $[19] !== min || $[20] !== minLength || $[21] !== name || $[22] !== onBlur || $[23] !== onFocus || $[24] !== onKeyDown || $[25] !== placeholder || $[26] !== readOnly || $[27] !== ref || $[28] !== tabIndex || $[29] !== type || $[30] !== value) {
+		t14 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 			id,
 			ref,
 			name,
-			className: t12,
+			className: t13,
 			type,
 			value,
 			defaultValue,
@@ -4186,66 +4212,70 @@ const DsTextInput = (t0) => {
 			onChange: handleChange,
 			tabIndex
 		});
-		$[12] = defaultValue;
-		$[13] = disabled;
-		$[14] = handleChange;
-		$[15] = id;
-		$[16] = max;
-		$[17] = maxLength;
-		$[18] = min;
-		$[19] = minLength;
-		$[20] = name;
-		$[21] = onBlur;
-		$[22] = onFocus;
-		$[23] = onKeyDown;
-		$[24] = placeholder;
-		$[25] = readOnly;
-		$[26] = ref;
-		$[27] = tabIndex;
-		$[28] = type;
-		$[29] = value;
-		$[30] = t13;
-	} else t13 = $[30];
-	let t14;
-	if ($[31] !== InputWrapper || $[32] !== t13) {
-		t14 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InputWrapper, { children: t13 });
-		$[31] = InputWrapper;
-		$[32] = t13;
-		$[33] = t14;
-	} else t14 = $[33];
+		$[13] = defaultValue;
+		$[14] = disabled;
+		$[15] = handleChange;
+		$[16] = id;
+		$[17] = max;
+		$[18] = maxLength;
+		$[19] = min;
+		$[20] = minLength;
+		$[21] = name;
+		$[22] = onBlur;
+		$[23] = onFocus;
+		$[24] = onKeyDown;
+		$[25] = placeholder;
+		$[26] = readOnly;
+		$[27] = ref;
+		$[28] = tabIndex;
+		$[29] = type;
+		$[30] = value;
+		$[31] = t14;
+	} else t14 = $[31];
 	let t15;
-	if ($[34] !== slots) {
-		t15 = slots?.endAdornment && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	if ($[32] !== InputWrapper || $[33] !== t14) {
+		t15 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InputWrapper, { children: t14 });
+		$[32] = InputWrapper;
+		$[33] = t14;
+		$[34] = t15;
+	} else t15 = $[34];
+	let t16;
+	if ($[35] !== slots) {
+		t16 = slots?.endAdornment && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: ds_text_input_module_default.adornment,
 			children: slots.endAdornment
 		});
-		$[34] = slots;
-		$[35] = t15;
-	} else t15 = $[35];
-	let t16;
-	if ($[36] !== containerClass || $[37] !== style || $[38] !== t11 || $[39] !== t14 || $[40] !== t15) {
-		t16 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		$[35] = slots;
+		$[36] = t16;
+	} else t16 = $[36];
+	let t17;
+	if ($[37] !== containerClass || $[38] !== style || $[39] !== t12 || $[40] !== t15 || $[41] !== t16) {
+		t17 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: containerClass,
 			style,
 			children: [
-				t11,
-				t14,
-				t15
+				t12,
+				t15,
+				t16
 			]
 		});
-		$[36] = containerClass;
-		$[37] = style;
-		$[38] = t11;
-		$[39] = t14;
+		$[37] = containerClass;
+		$[38] = style;
+		$[39] = t12;
 		$[40] = t15;
 		$[41] = t16;
-	} else t16 = $[41];
-	return t16;
+		$[42] = t17;
+	} else t17 = $[42];
+	return t17;
 };
 DsTextInput.displayName = "DsTextInput";
 //#endregion
 //#region src/components/ds-text-input/ds-text-input.types.ts
-const textInputSizes = ["small", "default"];
+const textInputSizes = [
+	"small",
+	"default",
+	"large"
+];
 //#endregion
 //#region src/components/ds-dropdown-menu/ds-dropdown-menu.tsx
 const GroupContext = (0, react.createContext)(null);
@@ -4609,7 +4639,7 @@ const ItemGroupLabel = (t0) => {
 				className: t1,
 				style,
 				onClick: toggle,
-				onKeyDown: _temp$14,
+				onKeyDown: _temp$15,
 				children: [t2, t5]
 			})
 		});
@@ -4924,7 +4954,7 @@ DsDropdownMenu.ItemGroupLabel.displayName = "DsDropdownMenu.ItemGroupLabel";
 DsDropdownMenu.ItemGroupContent.displayName = "DsDropdownMenu.ItemGroupContent";
 DsDropdownMenu.Separator.displayName = "DsDropdownMenu.Separator";
 DsDropdownMenuLegacy.displayName = "DsDropdownMenuLegacy";
-function _temp$14(e) {
+function _temp$15(e) {
 	return e.stopPropagation();
 }
 function _temp2$7(e) {
@@ -4990,7 +5020,7 @@ const DsBreadcrumb = (t0) => {
 							placeholder: "Search",
 							value: search,
 							onValueChange: setSearch,
-							onKeyDown: _temp$13,
+							onKeyDown: _temp$14,
 							slots: { startAdornment: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsIcon, {
 								icon: "search",
 								size: "tiny"
@@ -5047,7 +5077,7 @@ const DsBreadcrumb = (t0) => {
 	return t4;
 };
 DsBreadcrumb.displayName = "DsBreadcrumb";
-function _temp$13(e) {
+function _temp$14(e) {
 	return e.stopPropagation();
 }
 //#endregion
@@ -5503,7 +5533,7 @@ const iconSizeMap = Object.freeze({
 * @summary action button with color/variant/size, icon-only, loading and selected states
 */
 const DsButtonV3$1 = (t0) => {
-	const $ = (0, react_compiler_runtime.c)(37);
+	const $ = (0, react_compiler_runtime.c)(39);
 	let children;
 	let className;
 	let disabled;
@@ -5517,8 +5547,9 @@ const DsButtonV3$1 = (t0) => {
 	let t4;
 	let t5;
 	let t6;
+	let t7;
 	if ($[0] !== t0) {
-		({ref, className, style, children, icon, disabled, loading: t1, color: t2, variant: t3, size: t4, selected: t5, type: t6, ...rest} = t0);
+		({ref, className, style, children, icon, disabled, loading: t1, color: t2, variant: t3, size: t4, selected: t5, highEmphasis: t6, type: t7, ...rest} = t0);
 		$[0] = t0;
 		$[1] = children;
 		$[2] = className;
@@ -5533,6 +5564,7 @@ const DsButtonV3$1 = (t0) => {
 		$[11] = t4;
 		$[12] = t5;
 		$[13] = t6;
+		$[14] = t7;
 	} else {
 		children = $[1];
 		className = $[2];
@@ -5547,80 +5579,86 @@ const DsButtonV3$1 = (t0) => {
 		t4 = $[11];
 		t5 = $[12];
 		t6 = $[13];
+		t7 = $[14];
 	}
 	const loading = t1 === void 0 ? false : t1;
 	const color = t2 === void 0 ? "default" : t2;
 	const variant = t3 === void 0 ? "primary" : t3;
 	const size = t4 === void 0 ? "medium" : t4;
 	const selected = t5 === void 0 ? false : t5;
-	const type = t6 === void 0 ? "button" : t6;
+	const highEmphasis = t6 === void 0 ? false : t6;
+	const type = t7 === void 0 ? "button" : t7;
 	const isIconOnly = icon !== void 0 && !children;
-	const t7 = disabled || loading;
-	const t8 = loading || void 0;
-	let t9;
-	if ($[14] !== className) {
-		t9 = (0, classnames.default)(ds_button_v3_module_default.root, className);
-		$[14] = className;
-		$[15] = t9;
-	} else t9 = $[15];
-	const t10 = selected ? "true" : void 0;
-	const t11 = isIconOnly || void 0;
-	const t12 = loading && !disabled ? "" : void 0;
-	let t13;
-	if ($[16] !== icon || $[17] !== loading || $[18] !== size) {
-		t13 = loading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsSpinner, {}) : icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsIcon, {
+	const t8 = disabled || loading;
+	const t9 = loading || void 0;
+	let t10;
+	if ($[15] !== className) {
+		t10 = (0, classnames.default)(ds_button_v3_module_default.root, className);
+		$[15] = className;
+		$[16] = t10;
+	} else t10 = $[16];
+	const t11 = selected ? "true" : void 0;
+	const t12 = highEmphasis ? "true" : void 0;
+	const t13 = isIconOnly || void 0;
+	const t14 = loading && !disabled ? "" : void 0;
+	let t15;
+	if ($[17] !== icon || $[18] !== loading || $[19] !== size) {
+		t15 = loading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsSpinner, {}) : icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsIcon, {
 			icon,
 			size: iconSizeMap[size],
 			"aria-hidden": true
 		});
-		$[16] = icon;
-		$[17] = loading;
-		$[18] = size;
-		$[19] = t13;
-	} else t13 = $[19];
-	let t14;
-	if ($[20] !== children || $[21] !== color || $[22] !== ref || $[23] !== rest || $[24] !== selected || $[25] !== size || $[26] !== style || $[27] !== t10 || $[28] !== t11 || $[29] !== t12 || $[30] !== t13 || $[31] !== t7 || $[32] !== t8 || $[33] !== t9 || $[34] !== type || $[35] !== variant) {
-		t14 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+		$[17] = icon;
+		$[18] = loading;
+		$[19] = size;
+		$[20] = t15;
+	} else t15 = $[20];
+	let t16;
+	if ($[21] !== children || $[22] !== color || $[23] !== ref || $[24] !== rest || $[25] !== selected || $[26] !== size || $[27] !== style || $[28] !== t10 || $[29] !== t11 || $[30] !== t12 || $[31] !== t13 || $[32] !== t14 || $[33] !== t15 || $[34] !== t8 || $[35] !== t9 || $[36] !== type || $[37] !== variant) {
+		t16 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 			ref,
 			type,
-			disabled: t7,
-			"aria-busy": t8,
+			disabled: t8,
+			"aria-busy": t9,
 			"aria-pressed": selected,
-			className: t9,
+			className: t10,
 			style,
 			"data-color": color,
 			"data-variant": variant,
 			"data-size": size,
-			"data-selected": t10,
-			"data-icon-only": t11,
-			"data-loading": t12,
+			"data-selected": t11,
+			"data-high-emphasis": t12,
+			"data-icon-only": t13,
+			"data-loading": t14,
 			...rest,
-			children: [t13, children]
-		});
-		$[20] = children;
-		$[21] = color;
-		$[22] = ref;
-		$[23] = rest;
-		$[24] = selected;
-		$[25] = size;
-		$[26] = style;
-		$[27] = t10;
-		$[28] = t11;
-		$[29] = t12;
-		$[30] = t13;
-		$[31] = t7;
-		$[32] = t8;
-		$[33] = t9;
-		$[34] = type;
-		$[35] = variant;
-		$[36] = t14;
-	} else t14 = $[36];
-	return t14;
+			children: [t15, children]
+		});
+		$[21] = children;
+		$[22] = color;
+		$[23] = ref;
+		$[24] = rest;
+		$[25] = selected;
+		$[26] = size;
+		$[27] = style;
+		$[28] = t10;
+		$[29] = t11;
+		$[30] = t12;
+		$[31] = t13;
+		$[32] = t14;
+		$[33] = t15;
+		$[34] = t8;
+		$[35] = t9;
+		$[36] = type;
+		$[37] = variant;
+		$[38] = t16;
+	} else t16 = $[38];
+	return t16;
 };
 //#endregion
 //#region src/components/ds-button-v3/ds-button-v3.types.ts
 const buttonV3Variants = [
 	"primary",
+	"primary-subtle",
 	"secondary",
 	"tertiary"
 ];
@@ -7317,7 +7355,7 @@ const DsCommentThread = (t0) => {
 	const bottomRef = (0, react.useRef)(null);
 	let t1;
 	if ($[0] !== messages) {
-		t1 = messages.find(_temp$12) || messages[0];
+		t1 = messages.find(_temp$13) || messages[0];
 		$[0] = messages;
 		$[1] = t1;
 	} else t1 = $[1];
@@ -7458,7 +7496,7 @@ const DsCommentThread = (t0) => {
 	return t22;
 };
 DsCommentThread.displayName = "DsCommentThread";
-function _temp$12(m) {
+function _temp$13(m) {
 	return m.isInitialMessage;
 }
 //#endregion
@@ -8182,7 +8220,7 @@ const DsCommentCard = (t0) => {
 	const { numericId, author, createdAt, messages, referenceTag, isActionRequired } = comment;
 	let t4;
 	if ($[0] !== messages) {
-		t4 = messages.find(_temp$11) || messages[0];
+		t4 = messages.find(_temp$12) || messages[0];
 		$[0] = messages;
 		$[1] = t4;
 	} else t4 = $[1];
@@ -8507,7 +8545,7 @@ const DsCommentCard = (t0) => {
 	return t34;
 };
 DsCommentCard.displayName = "DsCommentCard";
-function _temp$11(m) {
+function _temp$12(m) {
 	return m.isInitialMessage;
 }
 function _temp2$6(m_0) {
@@ -9020,13 +9058,8 @@ const DsDrawer = Object.assign(DsDrawerRoot, {
 //#region src/components/ds-tag-filter/ds-tag-filter.module.scss
 var ds_tag_filter_module_default = {
 	"actionButton": "pHs_ea_actionButton",
+	"actions": "pHs_ea_actions",
 	"container": "pHs_ea_container",
-	"expanded": "pHs_ea_expanded",
-	"ghostButtonContent": "pHs_ea_ghostButtonContent",
-	"header": "pHs_ea_header",
-	"headerActions": "pHs_ea_headerActions",
-	"itemCheckbox": "pHs_ea_itemCheckbox",
-	"label": "pHs_ea_label",
 	"measurementContainer": "pHs_ea_measurementContainer",
 	"tagsArea": "pHs_ea_tagsArea"
 };
@@ -9076,14 +9109,11 @@ function getElementMeasurements(measurementContainer) {
 //#endregion
 //#region src/components/ds-tag-filter/hooks/use-tag-overflow-calculation.ts
 /**
-* Custom hook to calculate how many tags fit in the available container width.
-*
-* Tags occupy the full container width. Non-tag elements (label, clear button,
-* expand control) live in a separate header row and don't affect the calculation.
+* Custom hook to calculate how many tags fit on the first row of the tags-area.
 */
 const useTagOverflowCalculation = (t0) => {
 	const $ = (0, react_compiler_runtime.c)(15);
-	const { containerRef, measurementRef, totalItems, expanded } = t0;
+	const { tagsAreaRef, measurementRef, totalItems, expanded } = t0;
 	let t1;
 	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
 		t1 = {
@@ -9094,10 +9124,10 @@ const useTagOverflowCalculation = (t0) => {
 	} else t1 = $[0];
 	const [state, setState] = (0, react.useState)(t1);
 	let t2;
-	if ($[1] !== containerRef || $[2] !== measurementRef) {
+	if ($[1] !== measurementRef || $[2] !== tagsAreaRef) {
 		t2 = () => {
-			if (!containerRef.current || !measurementRef.current) return;
-			const container = containerRef.current;
+			if (!tagsAreaRef.current || !measurementRef.current) return;
+			const tagsArea = tagsAreaRef.current;
 			const measurementContainer = measurementRef.current;
 			const { tagWidths, gap } = getElementMeasurements(measurementContainer);
 			if (tagWidths.length === 0) {
@@ -9107,20 +9137,20 @@ const useTagOverflowCalculation = (t0) => {
 				});
 				return;
 			}
-			const { count } = fitTagsInRow(tagWidths, getContainerAvailableWidth(container), gap);
+			const { count } = fitTagsInRow(tagWidths, getContainerAvailableWidth(tagsArea), gap);
 			const hasOverflow = count < tagWidths.length;
 			setState({
 				visibleTagCount: count,
 				hasOverflow
 			});
 		};
-		$[1] = containerRef;
-		$[2] = measurementRef;
+		$[1] = measurementRef;
+		$[2] = tagsAreaRef;
 		$[3] = t2;
 	} else t2 = $[3];
 	const calculateLayout = t2;
 	let t3;
-	if ($[4] !== calculateLayout || $[5] !== containerRef) {
+	if ($[4] !== calculateLayout || $[5] !== tagsAreaRef) {
 		t3 = () => {
 			const rafId = requestAnimationFrame(() => {
 				calculateLayout();
@@ -9130,41 +9160,41 @@ const useTagOverflowCalculation = (t0) => {
 					calculateLayout();
 				});
 			});
-			if (containerRef.current) resizeObserver.observe(containerRef.current);
+			if (tagsAreaRef.current) resizeObserver.observe(tagsAreaRef.current);
 			return () => {
 				cancelAnimationFrame(rafId);
 				resizeObserver.disconnect();
 			};
 		};
 		$[4] = calculateLayout;
-		$[5] = containerRef;
+		$[5] = tagsAreaRef;
 		$[6] = t3;
 	} else t3 = $[6];
 	let t4;
-	if ($[7] !== calculateLayout || $[8] !== containerRef || $[9] !== expanded || $[10] !== measurementRef || $[11] !== totalItems) {
+	if ($[7] !== calculateLayout || $[8] !== expanded || $[9] !== measurementRef || $[10] !== tagsAreaRef || $[11] !== totalItems) {
 		t4 = [
-			containerRef,
+			tagsAreaRef,
 			measurementRef,
 			totalItems,
 			expanded,
 			calculateLayout
 		];
 		$[7] = calculateLayout;
-		$[8] = containerRef;
-		$[9] = expanded;
-		$[10] = measurementRef;
+		$[8] = expanded;
+		$[9] = measurementRef;
+		$[10] = tagsAreaRef;
 		$[11] = totalItems;
 		$[12] = t4;
 	} else t4 = $[12];
 	(0, react.useLayoutEffect)(t3, t4);
 	if (expanded) {
 		let t5;
-		if ($[13] !== totalItems) {
+		if ($[13] !== state) {
 			t5 = {
-				visibleTagCount: totalItems,
+				...state,
 				hasOverflow: true
 			};
-			$[13] = totalItems;
+			$[13] = state;
 			$[14] = t5;
 		} else t5 = $[14];
 		return t5;
@@ -9175,13 +9205,9 @@ const useTagOverflowCalculation = (t0) => {
 //#region src/components/ds-tag-filter/ds-tag-filter.tsx
 /**
 * Design system TagFilter component
-*
-* A component for displaying active filters as tags with overflow handling.
-* Non-tag elements (label, expand/collapse, clear) sit in a header row.
-* Tags occupy the full width below, wrapping as needed.
 */
 const DsTagFilter = (t0) => {
-	const $ = (0, react_compiler_runtime.c)(62);
+	const $ = (0, react_compiler_runtime.c)(55);
 	const { items, locale: t1, className, style, onClearAll, onItemDelete, onItemSelect, onExpand } = t0;
 	let t2;
 	if ($[0] !== t1) {
@@ -9191,12 +9217,12 @@ const DsTagFilter = (t0) => {
 	} else t2 = $[1];
 	const locale = t2;
 	const [expanded, setExpanded] = (0, react.useState)(false);
-	const containerRef = (0, react.useRef)(null);
+	const tagsAreaRef = (0, react.useRef)(null);
 	const measurementRef = (0, react.useRef)(null);
 	let t3;
 	if ($[2] !== expanded || $[3] !== items.length) {
 		t3 = {
-			containerRef,
+			tagsAreaRef,
 			measurementRef,
 			totalItems: items.length,
 			expanded
@@ -9206,25 +9232,24 @@ const DsTagFilter = (t0) => {
 		$[4] = t3;
 	} else t3 = $[4];
 	const { visibleTagCount, hasOverflow } = useTagOverflowCalculation(t3);
-	const { label: t4, clearButton: t5, showMore: t6, showLess: t7 } = locale;
-	const label = t4 === void 0 ? "Filtered by:" : t4;
-	const clearButton = t5 === void 0 ? "Clear all filters" : t5;
-	const showMore = t6 === void 0 ? "Show more" : t6;
-	const showLess = t7 === void 0 ? "Show less" : t7;
-	let t8;
+	const { clearButton: t4, showMore: t5, showLess: t6 } = locale;
+	const clearButton = t4 === void 0 ? "Clear all filters" : t4;
+	const showMore = t5 === void 0 ? "Show more" : t5;
+	const showLess = t6 === void 0 ? "Show less" : t6;
+	let t7;
 	if ($[5] !== expanded || $[6] !== items || $[7] !== visibleTagCount) {
-		t8 = expanded ? items : items.slice(0, visibleTagCount);
+		t7 = expanded ? items : items.slice(0, visibleTagCount);
 		$[5] = expanded;
 		$[6] = items;
 		$[7] = visibleTagCount;
-		$[8] = t8;
-	} else t8 = $[8];
-	const visibleTags = t8;
+		$[8] = t7;
+	} else t7 = $[8];
+	const visibleTags = t7;
 	const hiddenCount = items.length - visibleTagCount;
 	if (items.length === 0) return null;
-	let t9;
+	let t8;
 	if ($[9] !== onItemDelete || $[10] !== onItemSelect) {
-		t9 = (item) => ({
+		t8 = (item) => ({
 			...item.slotProps?.tag,
 			label: item.label,
 			selected: item.selected,
@@ -9233,180 +9258,159 @@ const DsTagFilter = (t0) => {
 		});
 		$[9] = onItemDelete;
 		$[10] = onItemSelect;
-		$[11] = t9;
-	} else t9 = $[11];
-	const buildTagProps = t9;
-	let t10;
+		$[11] = t8;
+	} else t8 = $[11];
+	const buildTagProps = t8;
+	let t9;
 	if ($[12] !== buildTagProps) {
-		t10 = (item_0) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTag, { ...buildTagProps(item_0) }, item_0.id);
+		t9 = (item_0) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTag, { ...buildTagProps(item_0) }, item_0.id);
 		$[12] = buildTagProps;
-		$[13] = t10;
-	} else t10 = $[13];
-	const renderTag = t10;
-	let t11;
+		$[13] = t9;
+	} else t9 = $[13];
+	const renderTag = t9;
+	let t10;
 	if ($[14] !== expanded || $[15] !== onExpand) {
-		t11 = () => {
+		t10 = () => {
 			const newExpanded = !expanded;
 			setExpanded(newExpanded);
 			onExpand?.(newExpanded);
 		};
 		$[14] = expanded;
 		$[15] = onExpand;
-		$[16] = t11;
-	} else t11 = $[16];
-	const handleExpandToggle = t11;
-	let t12;
+		$[16] = t10;
+	} else t10 = $[16];
+	const handleExpandToggle = t10;
+	let t11;
 	if ($[17] !== buildTagProps || $[18] !== items) {
-		let t13;
+		let t12;
 		if ($[20] !== buildTagProps) {
-			t13 = (item_1) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTag, {
+			t12 = (item_1) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTag, {
 				"data-measure-tag": "",
 				...buildTagProps(item_1)
 			}, item_1.id);
 			$[20] = buildTagProps;
-			$[21] = t13;
-		} else t13 = $[21];
-		t12 = items.map(t13);
+			$[21] = t12;
+		} else t12 = $[21];
+		t11 = items.map(t12);
 		$[17] = buildTagProps;
 		$[18] = items;
-		$[19] = t12;
-	} else t12 = $[19];
-	let t13;
-	if ($[22] !== t12) {
-		t13 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		$[19] = t11;
+	} else t11 = $[19];
+	let t12;
+	if ($[22] !== t11) {
+		t12 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			ref: measurementRef,
 			className: ds_tag_filter_module_default.measurementContainer,
 			"aria-hidden": "true",
-			children: t12
+			children: t11
 		});
-		$[22] = t12;
-		$[23] = t13;
-	} else t13 = $[23];
-	const measurementContainer = t13;
-	const t14 = expanded && ds_tag_filter_module_default.expanded;
-	let t15;
-	if ($[24] !== className || $[25] !== t14) {
-		t15 = (0, classnames.default)(ds_tag_filter_module_default.container, t14, className);
+		$[22] = t11;
+		$[23] = t12;
+	} else t12 = $[23];
+	const measurementContainer = t12;
+	const toggleLabel = expanded ? showLess : showMore;
+	let t13;
+	if ($[24] !== className) {
+		t13 = (0, classnames.default)(ds_tag_filter_module_default.container, className);
 		$[24] = className;
-		$[25] = t14;
-		$[26] = t15;
-	} else t15 = $[26];
+		$[25] = t13;
+	} else t13 = $[25];
+	let t14;
+	if ($[26] !== renderTag || $[27] !== visibleTags) {
+		let t15;
+		if ($[29] !== renderTag) {
+			t15 = (item_2) => renderTag(item_2);
+			$[29] = renderTag;
+			$[30] = t15;
+		} else t15 = $[30];
+		t14 = visibleTags.map(t15);
+		$[26] = renderTag;
+		$[27] = visibleTags;
+		$[28] = t14;
+	} else t14 = $[28];
+	let t15;
+	if ($[31] !== t14) {
+		t15 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			ref: tagsAreaRef,
+			className: ds_tag_filter_module_default.tagsArea,
+			"aria-live": "polite",
+			children: t14
+		});
+		$[31] = t14;
+		$[32] = t15;
+	} else t15 = $[32];
 	let t16;
-	if ($[27] !== label) {
-		t16 = label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTypography, {
-			variant: "body-sm-reg",
-			className: ds_tag_filter_module_default.label,
-			children: label
+	if ($[33] !== expanded || $[34] !== handleExpandToggle || $[35] !== hasOverflow || $[36] !== hiddenCount || $[37] !== toggleLabel) {
+		t16 = hasOverflow && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DsButtonV3, {
+			variant: "tertiary",
+			size: "small",
+			className: ds_tag_filter_module_default.actionButton,
+			"aria-expanded": expanded,
+			onClick: handleExpandToggle,
+			children: [`${toggleLabel} (${String(hiddenCount)})`, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsIcon, {
+				icon: expanded ? "keyboard_arrow_up" : "keyboard_arrow_down",
+				size: "tiny",
+				"aria-hidden": true
+			})]
 		});
-		$[27] = label;
-		$[28] = t16;
-	} else t16 = $[28];
+		$[33] = expanded;
+		$[34] = handleExpandToggle;
+		$[35] = hasOverflow;
+		$[36] = hiddenCount;
+		$[37] = toggleLabel;
+		$[38] = t16;
+	} else t16 = $[38];
 	let t17;
-	if ($[29] !== expanded || $[30] !== handleExpandToggle || $[31] !== hasOverflow || $[32] !== hiddenCount || $[33] !== showLess || $[34] !== showMore) {
-		t17 = hasOverflow && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DsButton, {
-			design: "v1.2",
-			buttonType: "tertiary",
-			variant: "ghost",
-			className: ds_tag_filter_module_default.actionButton,
-			contentClassName: ds_tag_filter_module_default.ghostButtonContent,
+	if ($[39] !== clearButton || $[40] !== onClearAll) {
+		t17 = onClearAll && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsButtonV3, {
+			variant: "tertiary",
 			size: "small",
-			onClick: handleExpandToggle,
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsIcon, { icon: expanded ? "keyboard_arrow_up" : "keyboard_arrow_down" }), expanded ? showLess : `${showMore} (${String(hiddenCount)})`]
-		});
-		$[29] = expanded;
-		$[30] = handleExpandToggle;
-		$[31] = hasOverflow;
-		$[32] = hiddenCount;
-		$[33] = showLess;
-		$[34] = showMore;
-		$[35] = t17;
-	} else t17 = $[35];
-	let t18;
-	if ($[36] !== clearButton || $[37] !== onClearAll) {
-		t18 = onClearAll && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DsButton, {
-			design: "v1.2",
-			buttonType: "tertiary",
-			variant: "ghost",
+			icon: "close",
 			className: ds_tag_filter_module_default.actionButton,
-			contentClassName: ds_tag_filter_module_default.ghostButtonContent,
-			size: "small",
 			onClick: onClearAll,
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsIcon, { icon: "close" }), clearButton]
+			children: clearButton
+		});
+		$[39] = clearButton;
+		$[40] = onClearAll;
+		$[41] = t17;
+	} else t17 = $[41];
+	let t18;
+	if ($[42] !== t16 || $[43] !== t17) {
+		t18 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: ds_tag_filter_module_default.actions,
+			children: [t16, t17]
 		});
-		$[36] = clearButton;
-		$[37] = onClearAll;
-		$[38] = t18;
-	} else t18 = $[38];
+		$[42] = t16;
+		$[43] = t17;
+		$[44] = t18;
+	} else t18 = $[44];
 	let t19;
-	if ($[39] !== t17 || $[40] !== t18) {
+	if ($[45] !== style || $[46] !== t13 || $[47] !== t15 || $[48] !== t18) {
 		t19 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: ds_tag_filter_module_default.headerActions,
-			children: [t17, t18]
+			className: t13,
+			style,
+			children: [t15, t18]
 		});
-		$[39] = t17;
-		$[40] = t18;
-		$[41] = t19;
-	} else t19 = $[41];
+		$[45] = style;
+		$[46] = t13;
+		$[47] = t15;
+		$[48] = t18;
+		$[49] = t19;
+	} else t19 = $[49];
 	let t20;
-	if ($[42] !== t16 || $[43] !== t19) {
-		t20 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: ds_tag_filter_module_default.header,
-			children: [t16, t19]
-		});
-		$[42] = t16;
-		$[43] = t19;
-		$[44] = t20;
-	} else t20 = $[44];
+	if ($[50] !== measurementContainer) {
+		t20 = (0, react_dom.createPortal)(measurementContainer, document.body);
+		$[50] = measurementContainer;
+		$[51] = t20;
+	} else t20 = $[51];
 	let t21;
-	if ($[45] !== renderTag || $[46] !== visibleTags) {
-		let t22;
-		if ($[48] !== renderTag) {
-			t22 = (item_2) => renderTag(item_2);
-			$[48] = renderTag;
-			$[49] = t22;
-		} else t22 = $[49];
-		t21 = visibleTags.map(t22);
-		$[45] = renderTag;
-		$[46] = visibleTags;
-		$[47] = t21;
-	} else t21 = $[47];
-	let t22;
-	if ($[50] !== t21) {
-		t22 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: ds_tag_filter_module_default.tagsArea,
-			children: t21
-		});
-		$[50] = t21;
-		$[51] = t22;
-	} else t22 = $[51];
-	let t23;
-	if ($[52] !== style || $[53] !== t15 || $[54] !== t20 || $[55] !== t22) {
-		t23 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			ref: containerRef,
-			className: t15,
-			style,
-			children: [t20, t22]
-		});
-		$[52] = style;
-		$[53] = t15;
-		$[54] = t20;
-		$[55] = t22;
-		$[56] = t23;
-	} else t23 = $[56];
-	let t24;
-	if ($[57] !== measurementContainer) {
-		t24 = (0, react_dom.createPortal)(measurementContainer, document.body);
-		$[57] = measurementContainer;
-		$[58] = t24;
-	} else t24 = $[58];
-	let t25;
-	if ($[59] !== t23 || $[60] !== t24) {
-		t25 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [t23, t24] });
-		$[59] = t23;
-		$[60] = t24;
-		$[61] = t25;
-	} else t25 = $[61];
-	return t25;
+	if ($[52] !== t19 || $[53] !== t20) {
+		t21 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [t19, t20] });
+		$[52] = t19;
+		$[53] = t20;
+		$[54] = t21;
+	} else t21 = $[54];
+	return t21;
 };
 DsTagFilter.displayName = "DsTagFilter";
 //#endregion
@@ -9955,7 +9959,7 @@ const DsTabsTab = (t0) => {
 				})
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsDropdownMenu.Content, {
 				className: ds_tabs_tab_module_default.menuContent,
-				children: menuActionItems.map(_temp$10)
+				children: menuActionItems.map(_temp$11)
 			})]
 		});
 		$[17] = handleMenuActionSelect;
@@ -9994,7 +9998,7 @@ const DsTabsTab = (t0) => {
 	return t6;
 };
 DsTabsTab.displayName = "DsTabs.Tab";
-function _temp$10(item) {
+function _temp$11(item) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsDropdownMenu.Item, {
 		value: item.value,
 		disabled: item.disabled,
@@ -10521,7 +10525,7 @@ const YearView$1 = () => {
 	return t0;
 };
 DsDateInput.displayName = "DsDateInput";
-function _temp$9(weekDay, id) {
+function _temp$10(weekDay, id) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react_date_picker.DatePicker.TableHeader, {
 		className: ds_date_input_module_default.tableHeader,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTypography, {
@@ -10556,7 +10560,7 @@ function _temp4$2(datePicker) {
 			className: ds_date_input_module_default.tableHead,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react_date_picker.DatePicker.TableRow, {
 				className: ds_date_input_module_default.tableRow,
-				children: datePicker.weekDays.map(_temp$9)
+				children: datePicker.weekDays.map(_temp$10)
 			})
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react_date_picker.DatePicker.TableBody, {
 			className: ds_date_input_module_default.tableBody,
@@ -11199,7 +11203,7 @@ const DsCommentsDrawer = (t0) => {
 			authorsMap.set(comment.author.id, comment.author.name);
 			comment.labels?.forEach((label) => labelsSet.add(label));
 		});
-		availableAuthors = Array.from(authorsMap.entries()).map(_temp$8);
+		availableAuthors = Array.from(authorsMap.entries()).map(_temp$9);
 		availableLabels = Array.from(labelsSet);
 		let filteredComments = comments;
 		if (!showResolved) filteredComments = filteredComments.filter(_temp2$4);
@@ -11552,7 +11556,7 @@ const DsCommentsDrawer = (t0) => {
 	return t18;
 };
 DsCommentsDrawer.displayName = "DsCommentsDrawer";
-function _temp$8(t0) {
+function _temp$9(t0) {
 	const [id, name] = t0;
 	return {
 		id,
@@ -12356,7 +12360,7 @@ const DayView = (t0) => {
 						className: calendar_table_module_default.table,
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react_date_picker.DatePicker.TableHead, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react_date_picker.DatePicker.TableRow, {
 							className: calendar_table_module_default.tableRow,
-							children: datePicker.weekDays.map(_temp$7)
+							children: datePicker.weekDays.map(_temp$8)
 						}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react_date_picker.DatePicker.TableBody, {
 							className: calendar_table_module_default.tableBody,
 							children: datePicker.weeks.map(_temp3$3)
@@ -12371,7 +12375,7 @@ const DayView = (t0) => {
 	} else t1 = $[1];
 	return t1;
 };
-function _temp$7(weekDay, idx) {
+function _temp$8(weekDay, idx) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react_date_picker.DatePicker.TableHeader, {
 		className: calendar_table_module_default.tableHeader,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTypography, {
@@ -12415,7 +12419,7 @@ const MonthView = () => {
 	} else t0 = $[0];
 	return t0;
 };
-function _temp$6(month, monthIdx) {
+function _temp$7(month, monthIdx) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react_date_picker.DatePicker.TableCell, {
 		value: month.value,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react_date_picker.DatePicker.TableCellTrigger, {
@@ -12430,7 +12434,7 @@ function _temp$6(month, monthIdx) {
 function _temp2$2(months, rowIdx) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react_date_picker.DatePicker.TableRow, {
 		className: calendar_table_module_default.tableRow,
-		children: months.map(_temp$6)
+		children: months.map(_temp$7)
 	}, rowIdx);
 }
 function _temp3$2(datePicker) {
@@ -12462,7 +12466,7 @@ const YearView = () => {
 	} else t0 = $[0];
 	return t0;
 };
-function _temp$5(year, yearIdx) {
+function _temp$6(year, yearIdx) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react_date_picker.DatePicker.TableCell, {
 		value: year.value,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react_date_picker.DatePicker.TableCellTrigger, {
@@ -12477,7 +12481,7 @@ function _temp$5(year, yearIdx) {
 function _temp2$1(years, rowIdx) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react_date_picker.DatePicker.TableRow, {
 		className: calendar_table_module_default.tableRow,
-		children: years.map(_temp$5)
+		children: years.map(_temp$6)
 	}, rowIdx);
 }
 function _temp3$1(datePicker) {
@@ -12953,6 +12957,7 @@ var ds_select_module_default = {
 	"item": "KdTZ_G_item",
 	"itemIcon": "KdTZ_G_itemIcon",
 	"itemValue": "KdTZ_G_itemValue",
+	"large": "KdTZ_G_large",
 	"multiSelectItemsContainer": "KdTZ_G_multiSelectItemsContainer",
 	"searchIcon": "KdTZ_G_searchIcon",
 	"searchInput": "KdTZ_G_searchInput",
@@ -13064,7 +13069,7 @@ const SELECT_ALL_OPTION = {
 	value: SELECT_ALL_VALUE
 };
 const DsSelect = (t0) => {
-	const $ = (0, react_compiler_runtime.c)(29);
+	const $ = (0, react_compiler_runtime.c)(30);
 	const { id, options: userOptions, value, style, size, clearable, onClear, onBlur, className, placeholder: t1, disabled, renderOption, ...multiselectProps } = t0;
 	const placeholder = t1 === void 0 ? "Click to select a value" : t1;
 	const [searchTerm, setSearchTerm] = (0, react.useState)("");
@@ -13072,7 +13077,7 @@ const DsSelect = (t0) => {
 	const internalOptions = multiselectProps.multiple ? [SELECT_ALL_OPTION, ...userOptions] : userOptions;
 	const collection = (0, _ark_ui_react_select.createListCollection)({
 		items: internalOptions,
-		itemToValue: _temp$4
+		itemToValue: _temp$5
 	});
 	let t2;
 	if ($[0] !== searchTerm) {
@@ -13134,29 +13139,31 @@ const DsSelect = (t0) => {
 		});
 	};
 	const t4 = size === "small" && ds_select_module_default.small;
-	let t5;
-	if ($[3] !== className || $[4] !== t4) {
-		t5 = (0, classnames.default)(ds_select_module_default.control, t4, className);
+	const t5 = size === "large" && ds_select_module_default.large;
+	let t6;
+	if ($[3] !== className || $[4] !== t4 || $[5] !== t5) {
+		t6 = (0, classnames.default)(ds_select_module_default.control, t4, t5, className);
 		$[3] = className;
 		$[4] = t4;
 		$[5] = t5;
-	} else t5 = $[5];
-	const t6 = size === "small" ? "small" : "medium";
-	let t7;
-	if ($[6] !== t6) {
-		t7 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react_select.Select.Indicator, {
+		$[6] = t6;
+	} else t6 = $[6];
+	const t7 = size === "small" ? "small" : "medium";
+	let t8;
+	if ($[7] !== t7) {
+		t8 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react_select.Select.Indicator, {
 			className: ds_select_module_default.triggerIcon,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsIcon, {
 				icon: "keyboard_arrow_down",
-				size: t6
+				size: t7
 			})
 		});
-		$[6] = t6;
 		$[7] = t7;
-	} else t7 = $[7];
-	let t8;
-	if ($[8] !== clearable || $[9] !== onClear || $[10] !== size) {
-		t8 = clearable && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react_select.Select.ClearTrigger, {
+		$[8] = t8;
+	} else t8 = $[8];
+	let t9;
+	if ($[9] !== clearable || $[10] !== onClear || $[11] !== size) {
+		t9 = clearable && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react_select.Select.ClearTrigger, {
 			className: ds_select_module_default.clearIcon,
 			onClick: onClear,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsIcon, {
@@ -13164,19 +13171,19 @@ const DsSelect = (t0) => {
 				size: size === "small" ? "small" : "medium"
 			})
 		});
-		$[8] = clearable;
-		$[9] = onClear;
-		$[10] = size;
-		$[11] = t8;
-	} else t8 = $[11];
+		$[9] = clearable;
+		$[10] = onClear;
+		$[11] = size;
+		$[12] = t9;
+	} else t9 = $[12];
 	const T0 = _ark_ui_react_portal.Portal;
-	const t9 = _ark_ui_react_select.Select;
-	const t10 = ds_select_module_default;
-	const t11 = _ark_ui_react_select.Select;
-	const t12 = ds_select_module_default;
-	let t13;
-	if ($[12] !== searchTerm || $[13] !== userOptions.length) {
-		t13 = userOptions.length > SEARCH_THRESHOLD && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	const t10 = _ark_ui_react_select.Select;
+	const t11 = ds_select_module_default;
+	const t12 = _ark_ui_react_select.Select;
+	const t13 = ds_select_module_default;
+	let t14;
+	if ($[13] !== searchTerm || $[14] !== userOptions.length) {
+		t14 = userOptions.length > SEARCH_THRESHOLD && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: ds_select_module_default.searchInput,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTextInput, {
 				placeholder: "Search",
@@ -13189,17 +13196,17 @@ const DsSelect = (t0) => {
 				}) }
 			})
 		});
-		$[12] = searchTerm;
-		$[13] = userOptions.length;
-		$[14] = t13;
-	} else t13 = $[14];
-	const t14 = multiselectProps.multiple && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectItemsChips, {
+		$[13] = searchTerm;
+		$[14] = userOptions.length;
+		$[15] = t14;
+	} else t14 = $[15];
+	const t15 = multiselectProps.multiple && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectItemsChips, {
 		onValueChange: multiselectProps.onValueChange,
 		showAll: showAllItems,
 		onShowAll: () => setShowAllItems(true),
 		count: 6
 	});
-	const t15 = filteredOptions.map((item_0) => {
+	const t16 = filteredOptions.map((item_0) => {
 		const checked = getItemCheckedState({
 			item: item_0,
 			select,
@@ -13223,52 +13230,52 @@ const DsSelect = (t0) => {
 			})
 		}, collection.getItemValue(item_0));
 	});
-	let t16;
-	if ($[15] !== t11.Content || $[16] !== t12.content || $[17] !== t13 || $[18] !== t14 || $[19] !== t15) {
-		t16 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(t11.Content, {
-			className: t12.content,
+	let t17;
+	if ($[16] !== t12.Content || $[17] !== t13.content || $[18] !== t14 || $[19] !== t15 || $[20] !== t16) {
+		t17 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(t12.Content, {
+			className: t13.content,
 			children: [
-				t13,
 				t14,
-				t15
+				t15,
+				t16
 			]
 		});
-		$[15] = t11.Content;
-		$[16] = t12.content;
-		$[17] = t13;
+		$[16] = t12.Content;
+		$[17] = t13.content;
 		$[18] = t14;
 		$[19] = t15;
 		$[20] = t16;
-	} else t16 = $[20];
-	let t17;
-	if ($[21] !== t10.viewport || $[22] !== t16 || $[23] !== t9.Positioner) {
-		t17 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(t9.Positioner, {
-			className: t10.viewport,
-			children: t16
+		$[21] = t17;
+	} else t17 = $[21];
+	let t18;
+	if ($[22] !== t10.Positioner || $[23] !== t11.viewport || $[24] !== t17) {
+		t18 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(t10.Positioner, {
+			className: t11.viewport,
+			children: t17
 		});
-		$[21] = t10.viewport;
-		$[22] = t16;
-		$[23] = t9.Positioner;
+		$[22] = t10.Positioner;
+		$[23] = t11.viewport;
 		$[24] = t17;
-	} else t17 = $[24];
-	let t18;
-	if ($[25] !== T0 || $[26] !== t17) {
-		t18 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(T0, { children: t17 });
-		$[25] = T0;
-		$[26] = t17;
-		$[27] = t18;
-	} else t18 = $[27];
+		$[25] = t18;
+	} else t18 = $[25];
 	let t19;
-	if ($[28] === Symbol.for("react.memo_cache_sentinel")) {
-		t19 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react_select.Select.HiddenSelect, { style: { display: "none" } });
+	if ($[26] !== T0 || $[27] !== t18) {
+		t19 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(T0, { children: t18 });
+		$[26] = T0;
+		$[27] = t18;
 		$[28] = t19;
 	} else t19 = $[28];
+	let t20;
+	if ($[29] === Symbol.for("react.memo_cache_sentinel")) {
+		t20 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react_select.Select.HiddenSelect, { style: { display: "none" } });
+		$[29] = t20;
+	} else t20 = $[29];
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_ark_ui_react_select.Select.RootProvider, {
 		value: select,
 		lazyMount: true,
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_ark_ui_react_select.Select.Control, {
-				className: t5,
+				className: t6,
 				style,
 				onBlur,
 				onKeyDown: (e) => {
@@ -13284,11 +13291,11 @@ const DsSelect = (t0) => {
 					id,
 					className: ds_select_module_default.trigger,
 					"aria-labelledby": null,
-					children: [renderTriggerValue(), t7]
-				}), t8]
+					children: [renderTriggerValue(), t8]
+				}), t9]
 			}),
-			t18,
-			t19
+			t19,
+			t20
 		]
 	});
 };
@@ -13298,7 +13305,7 @@ function getItemCheckedState({ item, select, options }) {
 	return select.hasSelectedItems ? "indeterminate" : false;
 }
 DsSelect.displayName = "DsSelect";
-function _temp$4(item) {
+function _temp$5(item) {
 	return item.value;
 }
 function _temp2(value_0) {
@@ -13320,6 +13327,7 @@ var ds_number_input_module_default = {
 	"iconButton": "XMQUTG_iconButton",
 	"indicator": "XMQUTG_indicator",
 	"input": "XMQUTG_input",
+	"large": "XMQUTG_large",
 	"small": "XMQUTG_small",
 	"textInputContainer": "XMQUTG_textInputContainer",
 	"trigger": "XMQUTG_trigger"
@@ -13485,6 +13493,7 @@ var ds_password_input_module_default = {
 	"iconButton": "v5YZUq_iconButton",
 	"indicator": "v5YZUq_indicator",
 	"input": "v5YZUq_input",
+	"large": "v5YZUq_large",
 	"small": "v5YZUq_small",
 	"textInputContainer": "v5YZUq_textInputContainer",
 	"trigger": "v5YZUq_trigger"
@@ -14554,7 +14563,7 @@ const FileUploadItem = (t0) => {
 	} else t20 = $[46];
 	let t21;
 	if ($[47] !== errors || $[48] !== status) {
-		t21 = status === "error" && errors?.length && errors.map(_temp$3);
+		t21 = status === "error" && errors?.length && errors.map(_temp$4);
 		$[47] = errors;
 		$[48] = status;
 		$[49] = t21;
@@ -14597,7 +14606,7 @@ const FileUploadItem = (t0) => {
 	} else t23 = $[60];
 	return t23;
 };
-function _temp$3(error) {
+function _temp$4(error) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: file_upload_item_module_default.errorMessage,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsIcon, {
@@ -17374,7 +17383,7 @@ const DsRadioGroupLegacy = (t0) => {
 	} else t3 = $[3];
 	let t4;
 	if ($[4] !== options) {
-		t4 = options.map(_temp$2);
+		t4 = options.map(_temp$3);
 		$[4] = options;
 		$[5] = t4;
 	} else t4 = $[5];
@@ -17417,7 +17426,7 @@ const DsRadioGroup = {
 DsRadioGroup.Root.displayName = "DsRadioGroup.Root";
 DsRadioGroup.Item.displayName = "DsRadioGroup.Item";
 DsRadioGroupLegacy.displayName = "DsRadioGroupLegacy";
-function _temp$2(option) {
+function _temp$3(option) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_ark_ui_react_radio_group.RadioGroup.Item, {
 		value: option.value,
 		disabled: option.disabled,
@@ -17677,7 +17686,7 @@ const useIsOverflowing = (text) => {
 			const observer = new ResizeObserver(measure);
 			observer.observe(element);
 			const frame = requestAnimationFrame(measure);
-			document.fonts.ready.then(measure).catch(_temp$1);
+			document.fonts.ready.then(measure).catch(_temp$2);
 			document.fonts.addEventListener("loadingdone", measure);
 			return () => {
 				cancelAnimationFrame(frame);
@@ -17705,7 +17714,7 @@ const useIsOverflowing = (text) => {
 	} else t2 = $[4];
 	return t2;
 };
-function _temp$1() {}
+function _temp$2() {}
 //#endregion
 //#region src/components/ds-site-node/ds-site-node.module.scss
 var ds_site_node_module_default = {
@@ -18067,6 +18076,254 @@ DsSkeleton.Text.displayName = "DsSkeleton.Text";
 DsSkeleton.Circle.displayName = "DsSkeleton.Circle";
 DsSkeleton.Rect.displayName = "DsSkeleton.Rect";
 //#endregion
+//#region src/components/ds-slider/ds-slider.utils.ts
+/**
+* Normalizes the public value (a number or a `[min, max]` tuple) into the
+* `number[]` shape Ark's slider works with. Returns `undefined` when no value
+* is provided so controlled/uncontrolled detection stays intact.
+*/
+const toArray = (value) => {
+	if (value === void 0) return;
+	return Array.isArray(value) ? value : [value];
+};
+//#endregion
+//#region src/components/ds-slider/ds-slider.module.scss
+var ds_slider_module_default = {
+	"control": "_7ZtIQW_control",
+	"header": "_7ZtIQW_header",
+	"large": "_7ZtIQW_large",
+	"range": "_7ZtIQW_range",
+	"root": "_7ZtIQW_root",
+	"small": "_7ZtIQW_small",
+	"thumb": "_7ZtIQW_thumb",
+	"track": "_7ZtIQW_track",
+	"valueText": "_7ZtIQW_valueText"
+};
+//#endregion
+//#region src/components/ds-slider/ds-slider.tsx
+/**
+* @summary Selects a numeric value or a numeric interval by dragging thumbs along a track.
+*
+* Use for picking a number or interval from a known continuous range where visual
+* adjustment beats typing (filter ranges, thresholds, capacity limits). For exact
+* numeric entry use DsNumberInput; for a few discrete options use DsSegmentGroup.
+*/
+const DsSlider$1 = (t0) => {
+	const $ = (0, react_compiler_runtime.c)(69);
+	const { ref, className, style, label, type: t1, size: t2, min: t3, max: t4, step: t5, value, defaultValue, name, disabled: t6, thumbLabels, formatValue: t7, onValueChange, onValueChangeEnd } = t0;
+	const type = t1 === void 0 ? "value" : t1;
+	const size = t2 === void 0 ? "medium" : t2;
+	const min = t3 === void 0 ? 0 : t3;
+	const max = t4 === void 0 ? 100 : t4;
+	const step = t5 === void 0 ? 1 : t5;
+	const disabled = t6 === void 0 ? false : t6;
+	const formatValue = t7 === void 0 ? String : t7;
+	const isRange = type === "range";
+	let t8;
+	if ($[0] !== value) {
+		t8 = toArray(value);
+		$[0] = value;
+		$[1] = t8;
+	} else t8 = $[1];
+	const controlledValue = t8;
+	let t9;
+	if ($[2] !== isRange || $[3] !== max || $[4] !== min) {
+		t9 = isRange ? [min, max] : [min];
+		$[2] = isRange;
+		$[3] = max;
+		$[4] = min;
+		$[5] = t9;
+	} else t9 = $[5];
+	const fallbackValue = t9;
+	let t10;
+	if ($[6] !== isRange || $[7] !== max || $[8] !== min) {
+		t10 = (next) => isRange ? [next[0] ?? min, next[1] ?? max] : next[0] ?? min;
+		$[6] = isRange;
+		$[7] = max;
+		$[8] = min;
+		$[9] = t10;
+	} else t10 = $[9];
+	const toPublicValue = t10;
+	let t11;
+	if ($[10] !== controlledValue || $[11] !== onValueChange || $[12] !== toPublicValue) {
+		t11 = controlledValue !== void 0 ? (next_0) => onValueChange?.(toPublicValue(next_0)) : void 0;
+		$[10] = controlledValue;
+		$[11] = onValueChange;
+		$[12] = toPublicValue;
+		$[13] = t11;
+	} else t11 = $[13];
+	let t12;
+	if ($[14] !== defaultValue || $[15] !== fallbackValue) {
+		t12 = toArray(defaultValue) ?? fallbackValue;
+		$[14] = defaultValue;
+		$[15] = fallbackValue;
+		$[16] = t12;
+	} else t12 = $[16];
+	const [values, setValues] = useControlled(controlledValue, t11, t12);
+	let t13;
+	if ($[17] !== controlledValue || $[18] !== onValueChange || $[19] !== setValues || $[20] !== toPublicValue) {
+		t13 = (details) => {
+			setValues(details.value);
+			if (controlledValue === void 0) onValueChange?.(toPublicValue(details.value));
+		};
+		$[17] = controlledValue;
+		$[18] = onValueChange;
+		$[19] = setValues;
+		$[20] = toPublicValue;
+		$[21] = t13;
+	} else t13 = $[21];
+	const handleValueChange = t13;
+	let t14;
+	if ($[22] !== formatValue || $[23] !== isRange || $[24] !== max || $[25] !== min || $[26] !== values[0] || $[27] !== values[1]) {
+		t14 = isRange ? `${formatValue(values[0] ?? min)}-${formatValue(values[1] ?? max)}` : formatValue(values[0] ?? min);
+		$[22] = formatValue;
+		$[23] = isRange;
+		$[24] = max;
+		$[25] = min;
+		$[26] = values[0];
+		$[27] = values[1];
+		$[28] = t14;
+	} else t14 = $[28];
+	const valueText = t14;
+	const textColor = disabled ? "disabled" : "main";
+	let t15;
+	if ($[29] !== isRange || $[30] !== label || $[31] !== thumbLabels) {
+		t15 = isRange ? thumbLabels : label ? [label] : thumbLabels;
+		$[29] = isRange;
+		$[30] = label;
+		$[31] = thumbLabels;
+		$[32] = t15;
+	} else t15 = $[32];
+	const thumbAriaLabels = t15;
+	const t16 = size === "small";
+	const t17 = size === "large";
+	let t18;
+	if ($[33] !== className || $[34] !== t16 || $[35] !== t17) {
+		t18 = (0, classnames.default)(ds_slider_module_default.root, {
+			[ds_slider_module_default.small]: t16,
+			[ds_slider_module_default.large]: t17
+		}, className);
+		$[33] = className;
+		$[34] = t16;
+		$[35] = t17;
+		$[36] = t18;
+	} else t18 = $[36];
+	const rootClass = t18;
+	let t19;
+	if ($[37] !== onValueChangeEnd || $[38] !== toPublicValue) {
+		t19 = (details_0) => onValueChangeEnd?.(toPublicValue(details_0.value));
+		$[37] = onValueChangeEnd;
+		$[38] = toPublicValue;
+		$[39] = t19;
+	} else t19 = $[39];
+	let t20;
+	if ($[40] !== label || $[41] !== textColor) {
+		t20 = label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTypography, {
+			variant: "body-sm-md",
+			color: textColor,
+			children: label
+		});
+		$[40] = label;
+		$[41] = textColor;
+		$[42] = t20;
+	} else t20 = $[42];
+	let t21;
+	if ($[43] !== textColor || $[44] !== valueText) {
+		t21 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTypography, {
+			variant: "body-sm-md",
+			color: textColor,
+			className: ds_slider_module_default.valueText,
+			children: valueText
+		});
+		$[43] = textColor;
+		$[44] = valueText;
+		$[45] = t21;
+	} else t21 = $[45];
+	let t22;
+	if ($[46] !== t20 || $[47] !== t21) {
+		t22 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: ds_slider_module_default.header,
+			children: [t20, t21]
+		});
+		$[46] = t20;
+		$[47] = t21;
+		$[48] = t22;
+	} else t22 = $[48];
+	let t23;
+	if ($[49] === Symbol.for("react.memo_cache_sentinel")) {
+		t23 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react_slider.Slider.Track, {
+			className: ds_slider_module_default.track,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react_slider.Slider.Range, { className: ds_slider_module_default.range })
+		});
+		$[49] = t23;
+	} else t23 = $[49];
+	let t24;
+	if ($[50] !== values) {
+		t24 = values.map(_temp$1);
+		$[50] = values;
+		$[51] = t24;
+	} else t24 = $[51];
+	let t25;
+	if ($[52] !== t24) {
+		t25 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_ark_ui_react_slider.Slider.Control, {
+			className: ds_slider_module_default.control,
+			children: [t23, t24]
+		});
+		$[52] = t24;
+		$[53] = t25;
+	} else t25 = $[53];
+	let t26;
+	if ($[54] !== disabled || $[55] !== handleValueChange || $[56] !== max || $[57] !== min || $[58] !== name || $[59] !== ref || $[60] !== rootClass || $[61] !== step || $[62] !== style || $[63] !== t19 || $[64] !== t22 || $[65] !== t25 || $[66] !== thumbAriaLabels || $[67] !== values) {
+		t26 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_ark_ui_react_slider.Slider.Root, {
+			ref,
+			className: rootClass,
+			style,
+			value: values,
+			min,
+			max,
+			step,
+			name,
+			disabled,
+			"aria-label": thumbAriaLabels,
+			onValueChange: handleValueChange,
+			onValueChangeEnd: t19,
+			children: [t22, t25]
+		});
+		$[54] = disabled;
+		$[55] = handleValueChange;
+		$[56] = max;
+		$[57] = min;
+		$[58] = name;
+		$[59] = ref;
+		$[60] = rootClass;
+		$[61] = step;
+		$[62] = style;
+		$[63] = t19;
+		$[64] = t22;
+		$[65] = t25;
+		$[66] = thumbAriaLabels;
+		$[67] = values;
+		$[68] = t26;
+	} else t26 = $[68];
+	return t26;
+};
+DsSlider$1.displayName = "DsSlider";
+function _temp$1(_, index) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react_slider.Slider.Thumb, {
+		index,
+		className: ds_slider_module_default.thumb,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react_slider.Slider.HiddenInput, {})
+	}, index);
+}
+//#endregion
+//#region src/components/ds-slider/index.ts
+const DsSlider = withResponsiveProps(DsSlider$1, [
+	"size",
+	"step",
+	"thumbLabels"
+]);
+DsSlider.displayName = "DsSlider";
+//#endregion
 //#region src/components/ds-smart-tabs/ds-smart-tabs.module.scss
 var ds_smart_tabs_module_default = {
 	"active": "yjt8Lq_active",
@@ -19971,6 +20228,8 @@ var ds_table_header_module_default = {
 	"groupStart": "-2rCNG_groupStart",
 	"header": "-2rCNG_header",
 	"headerCell": "-2rCNG_headerCell",
+	"headerLabel": "-2rCNG_headerLabel",
+	"headerLabelStack": "-2rCNG_headerLabelStack",
 	"headerRow": "-2rCNG_headerRow",
 	"headerRowNoBorder": "-2rCNG_headerRowNoBorder",
 	"headerRowVirtualized": "-2rCNG_headerRowVirtualized",
@@ -19996,16 +20255,15 @@ var ds_table_shared_module_default = {
 	"rotate-90": "WQ6Axa_rotate-90"
 };
 //#endregion
-//#region src/components/ds-table/context/ds-table-context.ts
-const DsTableContext = (0, react.createContext)(null);
-const useDsTableContext = () => {
-	const context = (0, react.useContext)(DsTableContext);
-	if (!context) throw new Error("useDsTableContext must be used within DsTable");
-	return context;
-};
+//#region src/components/ds-table/hooks/use-editing-state.ts
+/** Shown when an async `onCellEdit` commit rejects with a non-`Error` reason. */
+const EDIT_FALLBACK_ERROR = "Save failed";
+const isThenable = (value) => typeof value === "object" && value !== null && typeof value.then === "function";
+/** Prefer a thrown `Error`'s message; fall back to a generic string otherwise. */
+const extractErrorMessage = (reason, fallback) => reason instanceof Error && reason.message ? reason.message : fallback;
 /**
 * Hoisted editing state for single-cell-at-a-time inline editing.
-* Lives on {@link DsTableContext} so cell renderers and editors share one provider.
+* Surfaced on DsTableContext so cell renderers and editors share one provider.
 */
 const useEditingState = (onCellEdit, onCellValidate) => {
 	const [editing, setEditing] = (0, react.useState)(null);
@@ -20015,6 +20273,12 @@ const useEditingState = (onCellEdit, onCellValidate) => {
 	onCellValidateRef.current = onCellValidate;
 	const editingRef = (0, react.useRef)(editing);
 	editingRef.current = editing;
+	const generationRef = (0, react.useRef)(0);
+	const abortRef = (0, react.useRef)(null);
+	const abortPending = (0, react.useCallback)(() => {
+		abortRef.current?.abort();
+		abortRef.current = null;
+	}, []);
 	return {
 		editing,
 		beginEdit: (0, react.useCallback)((cell) => {
@@ -20022,56 +20286,230 @@ const useEditingState = (onCellEdit, onCellValidate) => {
 			if (current) {
 				if (current.cell.row.id === cell.row.id && current.cell.column.id === cell.column.id) return;
 			}
+			abortPending();
+			generationRef.current += 1;
 			setEditing({
 				cell,
 				draftValue: cell.getValue(),
-				error: null
+				error: null,
+				pending: false
 			});
-		}, []),
+		}, [abortPending]),
 		setDraft: (0, react.useCallback)((value) => {
 			const current = editingRef.current;
 			if (!current) return;
+			const error = onCellValidateRef.current?.(current.cell.row.original, current.cell.column.id, value) ?? null;
 			setEditing({
 				...current,
 				draftValue: value,
-				error: null
+				error
 			});
 		}, []),
 		commit: (0, react.useCallback)((overrideValue) => {
 			const current = editingRef.current;
-			if (!current) return;
+			if (!current || current.pending) 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) {
+			const validationError = onCellValidateRef.current?.(current.cell.row.original, current.cell.column.id, valueToCommit) ?? null;
+			if (validationError !== null) {
 				setEditing({
 					...current,
 					draftValue: valueToCommit,
-					error
+					error: validationError,
+					pending: false
 				});
 				return;
 			}
-			onCellEditRef.current?.(current.cell.row.original, current.cell.column.id, valueToCommit);
-			setEditing(null);
-		}, []),
+			generationRef.current += 1;
+			const token = generationRef.current;
+			abortPending();
+			const controller = new AbortController();
+			abortRef.current = controller;
+			const { signal } = controller;
+			const isStale = () => generationRef.current !== token;
+			const settle = () => {
+				if (abortRef.current === controller) abortRef.current = null;
+			};
+			const showError = (error) => {
+				settle();
+				if (isStale()) return;
+				const live = editingRef.current;
+				setEditing(live ? {
+					...live,
+					draftValue: valueToCommit,
+					error,
+					pending: false
+				} : null);
+			};
+			const editResult = onCellEditRef.current?.(current.cell.row.original, current.cell.column.id, valueToCommit, signal);
+			const applyEditResult = (error) => {
+				if (error !== null) {
+					showError(error);
+					return;
+				}
+				settle();
+				if (isStale()) return;
+				setEditing(null);
+			};
+			if (!isThenable(editResult)) {
+				applyEditResult(editResult ?? null);
+				return;
+			}
+			setEditing({
+				...current,
+				draftValue: valueToCommit,
+				error: null,
+				pending: true
+			});
+			editResult.then((value) => {
+				applyEditResult(value ?? null);
+			}, (reason) => {
+				applyEditResult(extractErrorMessage(reason, EDIT_FALLBACK_ERROR));
+			});
+		}, [abortPending]),
 		cancel: (0, react.useCallback)(() => {
+			abortPending();
+			generationRef.current += 1;
 			setEditing(null);
-		}, [])
+		}, [abortPending])
 	};
 };
 //#endregion
+//#region src/components/ds-table/context/ds-table-context.tsx
+const DsTableContext = (0, react.createContext)(null);
+const useDsTableContext = () => {
+	const context = (0, react.useContext)(DsTableContext);
+	if (!context) throw new Error("useDsTableContext must be used within DsTable");
+	return context;
+};
+/**
+* Assembles {@link DsTableContext} from public table props plus derived grouping
+* and resize slices. Owns inline-edit state. Picks context fields from
+* `tableProps` and ignores the rest (`columns`, `data`, etc.).
+*/
+const DsTableContextProvider = ({ tableProps, derived, children }) => {
+	const { stickyHeader, bordered, fullWidth, rowSize, expandable, selectable, reorderable, showSelectAllCheckbox, loading, onRowClick, onRowDoubleClick, primaryRowActions, secondaryRowActions, renderExpandedRow, virtualized, activeRowId, locale, onCellEdit, onCellValidate } = tableProps;
+	const { collapsedColumnGroups, onToggleColumnGroup } = derived.grouping;
+	const { resizableColumns, resizeSizingReady, resizeContainerRef, onResizeHover, onResizeDragStart, onResizeReset, onResizeKeyboardNudge } = derived.resize;
+	const { editing, beginEdit, setDraft, commit, cancel } = useEditingState(onCellEdit, onCellValidate);
+	const contextValue = (0, react.useMemo)(() => ({
+		stickyHeader,
+		bordered,
+		fullWidth,
+		rowSize,
+		expandable,
+		selectable,
+		reorderable,
+		showSelectAllCheckbox,
+		loading,
+		onRowClick: loading ? void 0 : onRowClick,
+		onRowDoubleClick: loading ? void 0 : onRowDoubleClick,
+		primaryRowActions,
+		secondaryRowActions,
+		renderExpandedRow,
+		virtualized,
+		activeRowId,
+		collapsedColumnGroups,
+		onToggleColumnGroup,
+		locale,
+		onCellEdit,
+		resizableColumns,
+		resizeSizingReady,
+		resizeContainerRef,
+		onResizeHover,
+		onResizeDragStart,
+		onResizeReset,
+		onResizeKeyboardNudge,
+		editing,
+		beginEdit,
+		setDraft,
+		commit,
+		cancel
+	}), [
+		stickyHeader,
+		bordered,
+		fullWidth,
+		rowSize,
+		expandable,
+		selectable,
+		reorderable,
+		showSelectAllCheckbox,
+		loading,
+		onRowClick,
+		onRowDoubleClick,
+		primaryRowActions,
+		secondaryRowActions,
+		renderExpandedRow,
+		virtualized,
+		activeRowId,
+		collapsedColumnGroups,
+		onToggleColumnGroup,
+		locale,
+		onCellEdit,
+		resizableColumns,
+		resizeSizingReady,
+		resizeContainerRef,
+		onResizeHover,
+		onResizeDragStart,
+		onResizeReset,
+		onResizeKeyboardNudge,
+		editing,
+		beginEdit,
+		setDraft,
+		commit,
+		cancel
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTableContext.Provider, {
+		value: contextValue,
+		children
+	});
+};
+DsTableContextProvider.displayName = "DsTableContextProvider";
+/**
+* Column id used for the synthetic expander column injected when `expandable` is set.
+*/
+const EXPANDER_COLUMN_ID = "expander";
+/**
+* Column id used for the synthetic selection column injected when `selectable` is set.
+*/
+const SELECT_COLUMN_ID = "select";
+/**
+* Column id used for the synthetic reorder column injected when `reorderable` is set
+* (non-virtualized tables only).
+*/
+const REORDER_COLUMN_ID = "reorder";
+/**
+* Injected utility leaf ids (`select`, `expander`, `reorder`). Present in internal
+* sizing for layout; omitted from the public `onColumnSizingChange` payload.
+*/
+const BUILTIN_COLUMN_IDS = Object.freeze(/* @__PURE__ */ new Set([
+	SELECT_COLUMN_ID,
+	EXPANDER_COLUMN_ID,
+	REORDER_COLUMN_ID
+]));
+//#endregion
 //#region src/components/ds-table/utils/column-size.ts
+const DEFAULT_MAX_COLUMN_SIZE = Number.MAX_SAFE_INTEGER;
 /**
-* Generates the appropriate style object for a table column/cell based on its size
+* Whether a column should use a fixed width rather than fill (`flex: 1`).
 *
-* 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`.
+* True when the user has resized it (`columnSizing` entry), or when the raw
+* column def authored `size` (`meta.hasExplicitSize`). TanStack merges a
+* default size of 150 onto every column, so `columnDef.size` alone cannot
+* tell authored 150px from an unsized fill column.
+*/
+const isExplicitColumnWidth = (column, columnSizing) => {
+	if (columnSizing[column.id] !== void 0) return true;
+	return column.columnDef.meta?.hasExplicitSize === true;
+};
+/**
+* Style for a table column/cell based on its size and whether that size is explicit.
 *
-* @param columnSize - The size of the column
-* @returns Style object for the column/cell
+* Explicit columns get a fixed `width` plus `minWidth` and `flexShrink: 0` so they
+* enforce horizontal overflow on the table container. Fill columns grow evenly via
+* `flex: 1`.
 */
-const getColumnSizeStyle = (columnSize) => {
-	if (columnSize !== _tanstack_react_table.defaultColumnSizing.size) return {
+const getColumnSizeStyle = (columnSize, isExplicit) => {
+	if (isExplicit) return {
 		width: columnSize,
 		minWidth: columnSize,
 		flexShrink: 0
@@ -20081,35 +20519,116 @@ const getColumnSizeStyle = (columnSize) => {
 		minWidth: 0
 	};
 };
+const getHeaderSizeCssVar = (headerId) => `--header-${headerId}-size`;
+const getColumnSizeCssVar = (columnId) => `--col-${columnId}-size`;
 /**
-* Column id used for the synthetic expander column injected when `expandable` is set.
+* Pixel width via a CSS variable on an ancestor, so frozen (memoized) cells still
+* track live resize without React reconciling each row.
 */
-const EXPANDER_COLUMN_ID = "expander";
+const getResizableHeaderStyle = (headerId) => ({
+	width: `calc(var(${getHeaderSizeCssVar(headerId)}) * 1px)`,
+	minWidth: `calc(var(${getHeaderSizeCssVar(headerId)}) * 1px)`,
+	flexShrink: 0
+});
+const getResizableColumnStyle = (columnId) => ({
+	width: `calc(var(${getColumnSizeCssVar(columnId)}) * 1px)`,
+	minWidth: `calc(var(${getColumnSizeCssVar(columnId)}) * 1px)`,
+	flexShrink: 0
+});
+const getHeaderCellSizeStyle = (headerId, columnSize, isExplicit, resizeSizingReady) => {
+	if (resizeSizingReady) return getResizableHeaderStyle(headerId);
+	return getColumnSizeStyle(columnSize, isExplicit);
+};
+const getBodyCellSizeStyle = (columnId, columnSize, isExplicit, resizeSizingReady) => {
+	if (resizeSizingReady) return getResizableColumnStyle(columnId);
+	return getColumnSizeStyle(columnSize, isExplicit);
+};
 /**
-* Column id used for the synthetic selection column injected when `selectable` is set.
+* TanStack v8 performant-resize map: header ids for header cells, column ids for
+* body cells. Values are unitless px; consumers use `calc(var(...) * 1px)`.
 */
-const SELECT_COLUMN_ID = "select";
+const getColumnSizeCssVars = (headers) => {
+	const colSizes = {};
+	for (const header of headers) {
+		colSizes[getHeaderSizeCssVar(header.id)] = header.getSize();
+		colSizes[getColumnSizeCssVar(header.column.id)] = header.column.getSize();
+	}
+	return colSizes;
+};
 /**
-* Column id used for the synthetic reorder column injected when `reorderable` is set
-* (non-virtualized tables only).
+* TanStack `getSize()` formula: `min(max(minSize, width), maxSize)`. Defaults
+* match DsTable (`RESIZE_MIN_COLUMN_WIDTH`, unlimited max).
 */
-const REORDER_COLUMN_ID = "reorder";
+const clampColumnSize = (width, minSize = 52, maxSize = DEFAULT_MAX_COLUMN_SIZE) => Math.min(Math.max(minSize, width), maxSize);
+/**
+* Clamps every finite entry in `sizing` to that leaf's `minSize` / `maxSize`.
+* Non-finite widths are omitted so they do not poison state. Ids missing from
+* `columns` use the table defaults.
+*/
+const clampColumnSizing = (sizing, columns) => {
+	const boundsById = new Map(columns.map((column) => [column.id, column.columnDef]));
+	const next = {};
+	for (const [id, width] of Object.entries(sizing)) {
+		if (!Number.isFinite(width)) continue;
+		const bounds = boundsById.get(id);
+		next[id] = clampColumnSize(width, bounds?.minSize ?? 52, bounds?.maxSize ?? DEFAULT_MAX_COLUMN_SIZE);
+	}
+	return next;
+};
+/**
+* Width to restore on double-click: explicit `columnDef.size`, otherwise the
+* snapshotted measured width.
+*/
+const getResizeOriginSize = (column, measuredWidth) => {
+	if (isExplicitColumnWidth(column, {})) return column.columnDef.size;
+	return measuredWidth;
+};
+/**
+* Measured leaf header widths keyed by column id. Group header cells share
+* `data-column-id` with a different id, so only `leafColumnIds` are read.
+*/
+const measureLeafHeaderWidths = (tableEl, leafColumnIds) => {
+	const widths = {};
+	for (const id of leafColumnIds) {
+		const cell = tableEl.querySelector(`thead th[data-column-id="${CSS.escape(id)}"]`);
+		if (cell instanceof HTMLElement) widths[id] = cell.getBoundingClientRect().width;
+	}
+	return widths;
+};
+/**
+* Sizing entries for leaves that are not yet in `existing`. Does not overwrite
+* user-resized (or previously snapshotted) ids.
+*/
+const collectMissingLeafSizing = (measured, existing) => {
+	const next = {};
+	for (const [id, width] of Object.entries(measured)) if (existing[id] === void 0) next[id] = Math.round(width);
+	return next;
+};
+/**
+* Copy of `columnSizing` without injected utility leaves. Use at the public
+* `onColumnSizingChange` boundary so consumers persist only their own columns.
+*/
+const omitBuiltinColumnSizing = (columnSizing) => {
+	const next = {};
+	for (const [id, size] of Object.entries(columnSizing)) if (!BUILTIN_COLUMN_IDS.has(id)) next[id] = size;
+	return next;
+};
 //#endregion
 //#region src/components/ds-table/grouping/utils/column-group.ts
 /**
 * Builds the flex style for a group header cell so it lines up with the combined
 * width of its visible leaf columns.
 *
-* Fixed-width leaves contribute to `flexBasis`; default-sized leaves each add one
-* unit of `flexGrow`, mirroring how {@link getColumnSizeStyle} sizes leaf cells so
-* both header rows distribute free space identically.
+* Fixed-width leaves contribute to `flexBasis`; fill leaves each add one unit of
+* `flexGrow`, mirroring how {@link getColumnSizeStyle} sizes leaf cells so both
+* header rows distribute free space identically.
 */
-const getGroupColumnSizeStyle = (leafColumns) => {
+const getGroupColumnSizeStyle = (leafColumns, columnSizing) => {
 	let fixedWidth = 0;
 	let flexCount = 0;
 	for (const leaf of leafColumns) {
 		const size = leaf.getSize();
-		if (size !== _tanstack_react_table.defaultColumnSizing.size) fixedWidth += size;
+		if (isExplicitColumnWidth(leaf, columnSizing)) fixedWidth += size;
 		else flexCount += 1;
 	}
 	if (flexCount === 0) return {
@@ -20197,12 +20716,156 @@ const useColumnGroups = ({ columns, collapsedColumnGroups, onCollapsedColumnGrou
 */
 const defaultDsTableLocale = Object.freeze({
 	collapseColumnGroup: "Collapse column group",
-	expandColumnGroup: "Expand column group"
+	expandColumnGroup: "Expand column group",
+	resizeColumn: "Resize column"
 });
 //#endregion
-//#region src/components/ds-table/components/ds-table-group-header-cell/ds-table-group-header-cell.module.scss
-var ds_table_group_header_cell_module_default = {
-	"collapseToggle": "HuJ4KG_collapseToggle",
+//#region src/components/ds-table/components/ds-table-resize-handle/ds-table-resize-handle.module.scss
+var ds_table_resize_handle_module_default = { "resizeHandle": "vDdhQW_resizeHandle" };
+//#endregion
+//#region src/components/ds-table/components/ds-table-resize-handle/ds-table-resize-handle.tsx
+const clientPointFromEvent = (event) => {
+	if (event instanceof MouseEvent) return {
+		x: event.clientX,
+		y: event.clientY
+	};
+	if (typeof TouchEvent !== "undefined" && event instanceof TouchEvent) {
+		const touch = event.changedTouches[0];
+		return touch ? {
+			x: touch.clientX,
+			y: touch.clientY
+		} : null;
+	}
+	return null;
+};
+/**
+* Handle straddling the right edge of a resizable header cell.
+*
+* Drag is TanStack v8 `header.getResizeHandler()`. Hover drives the full-height
+* overlay; double-click restores snapshot origin widths for this header's
+* leaves. As a focusable `separator`, Arrow keys nudge the width (Shift for a
+* larger step) for keyboard operability (WCAG 2.1.1).
+*/
+const DsTableResizeHandle = ({ header }) => {
+	const { resizeContainerRef, onResizeHover, onResizeDragStart, onResizeReset, onResizeKeyboardNudge, locale } = useDsTableContext();
+	const handleRef = (0, react.useRef)(null);
+	const isPointerOverRef = (0, react.useRef)(false);
+	const detachDragEndRef = (0, react.useRef)(null);
+	(0, react.useEffect)(() => () => {
+		detachDragEndRef.current?.();
+	}, []);
+	const label = {
+		...defaultDsTableLocale,
+		...locale
+	}.resizeColumn;
+	const measureCellRightOffset = () => {
+		const containerEl = resizeContainerRef?.current;
+		const cellEl = handleRef.current?.closest("th");
+		if (!containerEl || !cellEl) return null;
+		return cellEl.getBoundingClientRect().right - containerEl.getBoundingClientRect().left + containerEl.scrollLeft;
+	};
+	const reportHover = () => {
+		const offset = measureCellRightOffset();
+		if (offset === null) return;
+		onResizeHover?.(header.column.id, offset);
+	};
+	const clearHover = () => {
+		isPointerOverRef.current = false;
+		onResizeHover?.(null, null);
+	};
+	const syncHoverAtPoint = (clientX, clientY) => {
+		const handleEl = handleRef.current;
+		const hit = (handleEl?.ownerDocument ?? document).elementFromPoint(clientX, clientY);
+		if (handleEl && hit && (hit === handleEl || handleEl.contains(hit))) {
+			isPointerOverRef.current = true;
+			reportHover();
+			return;
+		}
+		clearHover();
+	};
+	const attachDragEndListeners = () => {
+		detachDragEndRef.current?.();
+		const doc = handleRef.current?.ownerDocument ?? document;
+		const onDragEnd = (event) => {
+			detachDragEndRef.current?.();
+			detachDragEndRef.current = null;
+			const point = clientPointFromEvent(event);
+			clearHover();
+			(handleRef.current?.ownerDocument.defaultView ?? window).requestAnimationFrame(() => {
+				if (!point) return;
+				syncHoverAtPoint(point.x, point.y);
+			});
+		};
+		doc.addEventListener("mouseup", onDragEnd);
+		doc.addEventListener("touchend", onDragEnd);
+		detachDragEndRef.current = () => {
+			doc.removeEventListener("mouseup", onDragEnd);
+			doc.removeEventListener("touchend", onDragEnd);
+		};
+	};
+	const handlePointerEnter = () => {
+		isPointerOverRef.current = true;
+		reportHover();
+	};
+	const handlePointerLeave = () => {
+		clearHover();
+	};
+	const startDrag = () => {
+		const offset = measureCellRightOffset();
+		if (offset !== null) onResizeDragStart?.(offset);
+	};
+	const handlePointerDown = (event) => {
+		if (event.pointerType === "touch") return;
+		event.stopPropagation();
+		startDrag();
+		header.getResizeHandler(handleRef.current?.ownerDocument ?? document)(event);
+		attachDragEndListeners();
+	};
+	const handleTouchStart = (event) => {
+		event.stopPropagation();
+		startDrag();
+		header.getResizeHandler(handleRef.current?.ownerDocument ?? document)(event);
+		attachDragEndListeners();
+	};
+	const handleReset = (event) => {
+		event.preventDefault();
+		event.stopPropagation();
+		const leafIds = header.column.getLeafColumns().map((column) => column.id);
+		onResizeReset?.(leafIds);
+		if (isPointerOverRef.current) reportHover();
+		else clearHover();
+	};
+	const handleKeyDown = (event) => {
+		if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") return;
+		event.preventDefault();
+		event.stopPropagation();
+		const step = event.shiftKey ? 40 : 10;
+		const delta = event.key === "ArrowRight" ? step : -step;
+		onResizeKeyboardNudge?.(header.column.id, delta);
+	};
+	const isLeaf = header.subHeaders.length === 0;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref: handleRef,
+		role: "separator",
+		"aria-orientation": "vertical",
+		"aria-label": label,
+		tabIndex: 0,
+		"aria-valuenow": Math.round(header.getSize()),
+		"aria-valuemin": isLeaf ? header.column.columnDef.minSize ?? 52 : void 0,
+		className: ds_table_resize_handle_module_default.resizeHandle,
+		onPointerDown: handlePointerDown,
+		onPointerEnter: handlePointerEnter,
+		onPointerLeave: handlePointerLeave,
+		onTouchStart: handleTouchStart,
+		onClick: (event) => event.stopPropagation(),
+		onDoubleClick: handleReset,
+		onKeyDown: handleKeyDown
+	});
+};
+//#endregion
+//#region src/components/ds-table/components/ds-table-group-header-cell/ds-table-group-header-cell.module.scss
+var ds_table_group_header_cell_module_default = {
+	"collapseToggle": "HuJ4KG_collapseToggle",
 	"groupHeaderCell": "HuJ4KG_groupHeaderCell",
 	"groupHeaderContent": "HuJ4KG_groupHeaderContent",
 	"groupLabel": "HuJ4KG_groupLabel"
@@ -20210,22 +20873,25 @@ var ds_table_group_header_cell_module_default = {
 //#endregion
 //#region src/components/ds-table/components/ds-table-group-header-cell/ds-table-group-header-cell.tsx
 const DsTableGroupHeaderCell = ({ header }) => {
-	const { collapsedColumnGroups, onToggleColumnGroup, locale } = useDsTableContext();
+	const { collapsedColumnGroups, onToggleColumnGroup, locale, resizableColumns, resizeSizingReady } = useDsTableContext();
 	const groupId = header.column.id;
-	const groupStyle = getGroupColumnSizeStyle(header.column.getLeafColumns().filter((leaf) => leaf.getIsVisible()));
+	const visibleLeafColumns = header.column.getLeafColumns().filter((leaf) => leaf.getIsVisible());
+	const groupStyle = resizeSizingReady ? getResizableHeaderStyle(header.id) : getGroupColumnSizeStyle(visibleLeafColumns, {});
 	const isCollapsible = header.column.columnDef.meta?.group?.collapsible ?? false;
 	const isCollapsed = collapsedColumnGroups?.includes(groupId) ?? false;
+	const canResize = resizableColumns && !isCollapsed && header.column.getCanResize();
 	const mergedLocale = {
 		...defaultDsTableLocale,
 		...locale
 	};
 	const toggleLabel = isCollapsed ? mergedLocale.expandColumnGroup : mergedLocale.collapseColumnGroup;
 	const handleToggle = () => onToggleColumnGroup?.(groupId);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableHead, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(TableHead, {
+		"data-column-id": groupId,
 		className: ds_table_group_header_cell_module_default.groupHeaderCell,
 		style: groupStyle,
 		colSpan: header.colSpan,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: ds_table_group_header_cell_module_default.groupHeaderContent,
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 				className: ds_table_group_header_cell_module_default.groupLabel,
@@ -20240,42 +20906,49 @@ const DsTableGroupHeaderCell = ({ header }) => {
 				title: toggleLabel,
 				onClick: handleToggle
 			})]
-		})
+		}), canResize && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTableResizeHandle, { header })]
 	});
 };
 //#endregion
 //#region src/components/ds-table/components/ds-table-header/ds-table-header.tsx
 const DsTableHeader = ({ table }) => {
-	const { bordered, virtualized } = useDsTableContext();
+	const { bordered, virtualized, resizableColumns, resizeSizingReady } = useDsTableContext();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableHeader, {
 		className: (0, classnames.default)(ds_table_header_module_default.header, virtualized && ds_table_header_module_default.virtualizedHeader),
 		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 columnSizing = table.getState().columnSizing;
 				if (header.isPlaceholder) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableHead, {
 					className: ds_table_header_module_default.headerCell,
-					style: getColumnSizeStyle(header.getSize())
+					style: getHeaderCellSizeStyle(header.id, header.getSize(), isExplicitColumnWidth(header.column, resizeSizingReady ? columnSizing : {}), !!resizeSizingReady)
 				}, header.id);
 				if (header.subHeaders.length > 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTableGroupHeaderCell, { header }, header.id);
-				const headerStyle = getColumnSizeStyle(header.column.getSize());
+				const headerStyle = getHeaderCellSizeStyle(header.id, header.column.getSize(), isExplicitColumnWidth(header.column, resizeSizingReady ? columnSizing : {}), !!resizeSizingReady);
 				const canSort = header.column.getCanSort();
+				const canResize = resizableColumns && header.column.getCanResize();
 				const isSelectColumn = header.column.id === SELECT_COLUMN_ID;
 				const isGroupStart = isFirstLeafColumnOfGroup(header.column);
 				const metaFilter = header.column.columnDef.meta?.filter;
 				const resolvedFilter = metaFilter && "render" in metaFilter ? metaFilter : void 0;
 				const hasActiveColumnFilter = resolvedFilter?.hasActiveFilter ?? false;
-				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableHead, {
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(TableHead, {
+					"data-column-id": header.column.id,
 					className: (0, classnames.default)(ds_table_header_module_default.headerCell, canSort && ds_table_header_module_default.sortableHeader, isSelectColumn && ds_table_header_module_default.selectHeaderCell, resolvedFilter && ds_table_header_module_default.filterableHeader, hasActiveColumnFilter && ds_table_header_module_default.filterActive, isGroupStart && ds_table_header_module_default.groupStart),
 					onClick: header.column.getToggleSortingHandler(),
 					style: headerStyle,
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: ds_table_header_module_default.headerSortContainer,
 						children: [
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsStack, {
 								direction: "column",
 								justifyContent: "center",
 								width: "100%",
-								children: (0, _tanstack_react_table.flexRender)(header.column.columnDef.header, header.getContext())
+								className: ds_table_header_module_default.headerLabelStack,
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: ds_table_header_module_default.headerLabel,
+									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,
@@ -20301,13 +20974,29 @@ const DsTableHeader = ({ table }) => {
 								})
 							})
 						]
-					})
+					}), canResize && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTableResizeHandle, { header })]
 				}, header.id);
 			})
 		}, headerGroup.id))
 	});
 };
 //#endregion
+//#region src/components/ds-table/components/ds-table-resize-overlay/ds-table-resize-overlay.module.scss
+var ds_table_resize_overlay_module_default = { "resizeOverlay": "DO-LLa_resizeOverlay" };
+//#endregion
+//#region src/components/ds-table/components/ds-table-resize-overlay/ds-table-resize-overlay.tsx
+/**
+* Full-height divider that tracks the active column's right edge during hover
+* and drag resize.
+*/
+const DsTableResizeOverlay = ({ offset, phase }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	className: ds_table_resize_overlay_module_default.resizeOverlay,
+	style: { left: offset },
+	"data-resize-overlay": true,
+	"data-resize-phase": phase,
+	"aria-hidden": true
+});
+//#endregion
 //#region src/components/ds-table/ds-table.module.scss
 var ds_table_module_default = {
 	"bulkActionsVisible": "iL9mtW_bulkActionsVisible",
@@ -20322,6 +21011,28 @@ var ds_table_module_default = {
 	"virtualizedContainer": "iL9mtW_virtualizedContainer"
 };
 //#endregion
+//#region src/components/ds-table/ds-table-defaults.ts
+/**
+* Applies the documented `DsTable` prop defaults. Call once at the table
+* boundary so orchestration and context see the same resolved values.
+*/
+const applyDsTableDefaults = (props) => ({
+	...props,
+	virtualized: props.virtualized ?? false,
+	stickyHeader: props.stickyHeader ?? true,
+	bordered: props.bordered ?? true,
+	fullWidth: props.fullWidth ?? true,
+	rowSize: props.rowSize ?? "medium",
+	loading: props.loading ?? false,
+	expandable: props.expandable ?? false,
+	selectable: props.selectable ?? false,
+	showSelectAllCheckbox: props.showSelectAllCheckbox ?? true,
+	primaryRowActions: props.primaryRowActions ?? [],
+	actions: props.actions ?? [],
+	reorderable: props.reorderable ?? false,
+	resizableColumns: props.resizableColumns ?? false
+});
+//#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",
@@ -20387,12 +21098,16 @@ var ds_table_editing_cell_module_default = {
 //#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 { commit, cancel, editing } = useDsTableContext();
 	const columnDef = cell.column.columnDef;
 	const editAnchorRef = (0, react.useRef)(null);
+	const isActiveCell = editing?.cell.id === cell.id;
+	const isPending = isActiveCell && editing.pending;
+	const hasError = isActiveCell && editing.error !== null;
 	const handleSubmit = (event) => {
 		event.preventDefault();
 		event.stopPropagation();
+		if (isPending || hasError) return;
 		commit();
 	};
 	(0, react.useEffect)(() => {
@@ -20444,6 +21159,8 @@ const DsTableEditingCell = ({ cell }) => {
 						variant: "tertiary",
 						size: "small",
 						icon: "check",
+						loading: isPending,
+						disabled: hasError,
 						"aria-label": "Confirm edit",
 						onClick: (event) => {
 							event.stopPropagation();
@@ -20589,7 +21306,7 @@ const DsRowDragHandle = ({ isDragging, attributes, listeners, style }) => {
 	});
 };
 const DsTableRow = ({ ref, row, isSelected }) => {
-	const { reorderable, onRowClick, onRowDoubleClick, renderExpandedRow, bordered, rowSize, primaryRowActions, secondaryRowActions, activeRowId, loading } = useDsTableContext();
+	const { reorderable, onRowClick, onRowDoubleClick, renderExpandedRow, bordered, rowSize, primaryRowActions, secondaryRowActions, activeRowId, loading, resizeSizingReady } = useDsTableContext();
 	const isExpanded = row.getIsExpanded();
 	const isActive = activeRowId === row.id;
 	const { attributes, listeners, setNodeRef, transform, transition, isDragging } = (0, _dnd_kit_sortable.useSortable)({
@@ -20618,7 +21335,8 @@ const DsTableRow = ({ ref, row, isSelected }) => {
 		onClick: () => onRowClick?.(row.original),
 		onDoubleClick: () => onRowDoubleClick?.(row.original),
 		children: row.getVisibleCells().map((cell, idx) => {
-			const cellStyle = getColumnSizeStyle(cell.column.getSize());
+			const columnSizing = cell.getContext().table.getState().columnSizing;
+			const cellStyle = getBodyCellSizeStyle(cell.column.id, cell.column.getSize(), isExplicitColumnWidth(cell.column, resizeSizingReady ? columnSizing : {}), !!resizeSizingReady);
 			if (cell.column.id === "reorder") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsRowDragHandle, {
 				isDragging,
 				attributes,
@@ -20650,56 +21368,6 @@ const DsTableRow = ({ ref, row, isSelected }) => {
 	})] });
 };
 //#endregion
-//#region src/components/ds-table/components/ds-table-row-expandable-cell/ds-table-row-expandable-cell.module.scss
-var ds_table_row_expandable_cell_module_default = { "button": "enUIjW_button" };
-//#endregion
-//#region src/components/ds-table/components/ds-table-row-expandable-cell/ds-table-row-expandable-cell.tsx
-const DsTableRowExpandableCell = ({ row, buttonClassName }) => {
-	const isExpanded = row.getIsExpanded();
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsButton, {
-		design: "v1.2",
-		buttonType: "tertiary",
-		size: "small",
-		className: (0, classnames.default)(ds_table_row_expandable_cell_module_default.button, buttonClassName),
-		onClick: (e) => {
-			e.stopPropagation();
-			row.toggleExpanded();
-		},
-		onDoubleClick: (e) => {
-			e.stopPropagation();
-		},
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsIcon, {
-			icon: "chevron_right",
-			size: "small",
-			className: (0, classnames.default)(ds_table_shared_module_default.pageButtonIcon, isExpanded && "rotate-90")
-		})
-	});
-};
-//#endregion
-//#region src/components/ds-table/components/ds-table-row-selectable-cell/ds-table-row-selectable-cell.tsx
-const DsTableRowSelectableCell = ({ row }) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsCheckbox, {
-		className: ds_table_shared_module_default.checkboxContainer,
-		checked: row.getIsSelected(),
-		disabled: !row.getCanSelect(),
-		onCheckedChange: (checked) => row.toggleSelected(!!checked),
-		onClick: (e) => e.stopPropagation(),
-		onDoubleClick: (e) => e.stopPropagation()
-	});
-};
-//#endregion
-//#region src/components/ds-table/components/ds-table-header-selectable-cell/ds-table-header-selectable-cell.tsx
-const DsTableHeaderSelectableCell = ({ table }) => {
-	const checked = table.getIsAllRowsSelected() ? true : table.getIsSomeRowsSelected() ? "indeterminate" : false;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsCheckbox, {
-		className: ds_table_shared_module_default.checkboxContainer,
-		checked,
-		onCheckedChange: (nextChecked) => table.toggleAllRowsSelected(!!nextChecked),
-		onClick: (e) => e.stopPropagation(),
-		onDoubleClick: (e) => e.stopPropagation()
-	});
-};
-//#endregion
 //#region src/components/ds-table/hooks/use-drag-and-drop.tsx
 const DragWrapper = ({ children, onDragEnd, sensors }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_dnd_kit_core.DndContext, {
 	collisionDetection: _dnd_kit_core.closestCenter,
@@ -20744,6 +21412,201 @@ function useDragAndDrop({ isDragEnabled, onOrderChange, items }) {
 	};
 }
 //#endregion
+//#region src/components/ds-table/hooks/use-column-resize.ts
+const INITIAL_COLUMN_SIZING_INFO = {
+	startOffset: null,
+	startSize: null,
+	deltaOffset: null,
+	deltaPercentage: null,
+	isResizingColumn: false,
+	columnSizingStart: []
+};
+/**
+* Owns column-resize state, TanStack sizing handlers, origin snapshots, seed
+* measurement, hover/drag overlay model, and the context slice consumed by
+* resize handles.
+*
+* Call before `useReactTable`, spread `tableOptions` / `state` into it, then
+* `bind(table)` during render for CSS vars, overlay, and context.
+*/
+const useColumnResize = ({ enabled, columnSizing: columnSizingProp, onColumnSizingChange, columns, columnVisibility }) => {
+	const [columnResizeState, setColumnResizeState] = (0, react.useState)({
+		columnSizing: {},
+		columnSizingInfo: INITIAL_COLUMN_SIZING_INFO
+	});
+	const { columnSizing: internalColumnSizing, columnSizingInfo } = columnResizeState;
+	const columnSizing = (0, react.useMemo)(() => columnSizingProp ? {
+		...columnSizingProp,
+		...internalColumnSizing
+	} : internalColumnSizing, [columnSizingProp, internalColumnSizing]);
+	const [resizeHover, setResizeHover] = (0, react.useState)(null);
+	const dragStartOffsetRef = (0, react.useRef)(null);
+	const resizeOriginSizingRef = (0, react.useRef)({});
+	const containerRef = (0, react.useRef)(null);
+	const tableRef = (0, react.useRef)(null);
+	const columnSizingRef = (0, react.useRef)(columnSizing);
+	columnSizingRef.current = columnSizing;
+	const columnSizingInfoRef = (0, react.useRef)(columnSizingInfo);
+	columnSizingInfoRef.current = columnSizingInfo;
+	const onColumnSizingChangeRef = (0, react.useRef)(onColumnSizingChange);
+	onColumnSizingChangeRef.current = onColumnSizingChange;
+	const leafSizeBoundsRef = (0, react.useRef)([]);
+	const handleColumnSizingChange = (0, react.useCallback)((updaterOrValue) => {
+		const clamped = clampColumnSizing(typeof updaterOrValue === "function" ? updaterOrValue(columnSizingRef.current) : updaterOrValue, leafSizeBoundsRef.current);
+		columnSizingRef.current = clamped;
+		setColumnResizeState((prev) => ({
+			...prev,
+			columnSizing: clamped
+		}));
+	}, []);
+	const handleColumnSizingInfoChange = (0, react.useCallback)((updaterOrValue) => {
+		const prevInfo = columnSizingInfoRef.current;
+		const nextInfo = typeof updaterOrValue === "function" ? updaterOrValue(prevInfo) : updaterOrValue;
+		const ended = Boolean(prevInfo.isResizingColumn) && nextInfo.isResizingColumn === false;
+		columnSizingInfoRef.current = nextInfo;
+		setColumnResizeState((prev) => ({
+			...prev,
+			columnSizingInfo: nextInfo
+		}));
+		if (ended) onColumnSizingChangeRef.current?.(omitBuiltinColumnSizing(columnSizingRef.current));
+	}, []);
+	const handleResizeHover = (0, react.useCallback)((columnId, offset) => {
+		setResizeHover(columnId === null || offset === null ? null : {
+			columnId,
+			offset
+		});
+	}, []);
+	const handleResizeDragStart = (0, react.useCallback)((offset) => {
+		dragStartOffsetRef.current = offset;
+	}, []);
+	const handleResizeReset = (0, react.useCallback)((columnIds) => {
+		const next = { ...columnSizingRef.current };
+		for (const id of columnIds) {
+			const origin = resizeOriginSizingRef.current[id];
+			if (origin !== void 0) next[id] = origin;
+		}
+		const clamped = clampColumnSizing(next, leafSizeBoundsRef.current);
+		handleColumnSizingChange(clamped);
+		onColumnSizingChangeRef.current?.(omitBuiltinColumnSizing(clamped));
+	}, [handleColumnSizingChange]);
+	const handleResizeKeyboardNudge = (0, react.useCallback)((columnId, delta) => {
+		const table = tableRef.current;
+		const column = table?.getColumn(columnId);
+		if (!table || !column) return;
+		const leaves = column.getLeafColumns().filter((leaf) => leaf.getIsVisible() && leaf.getCanResize());
+		const totalSize = leaves.reduce((sum, leaf) => sum + leaf.getSize(), 0);
+		if (leaves.length === 0 || totalSize <= 0) return;
+		const next = { ...columnSizingRef.current };
+		for (const leaf of leaves) {
+			const size = leaf.getSize();
+			next[leaf.id] = Math.round(size + delta * (size / totalSize));
+		}
+		const clamped = clampColumnSizing(next, leafSizeBoundsRef.current);
+		handleColumnSizingChange(clamped);
+		onColumnSizingChangeRef.current?.(omitBuiltinColumnSizing(clamped));
+	}, [handleColumnSizingChange]);
+	(0, react.useLayoutEffect)(() => {
+		if (!enabled) return;
+		const container = containerRef.current;
+		const table = tableRef.current;
+		if (!container || !table) return;
+		const seedMissingLeaves = () => {
+			if (container.getBoundingClientRect().width === 0) return false;
+			const tableEl = container.querySelector("table");
+			if (!(tableEl instanceof HTMLElement)) return false;
+			const leaves = table.getVisibleLeafColumns();
+			const measured = measureLeafHeaderWidths(tableEl, leaves.map((column) => column.id));
+			for (const column of leaves) {
+				const measuredWidth = measured[column.id];
+				if (measuredWidth === void 0 || resizeOriginSizingRef.current[column.id] !== void 0) continue;
+				resizeOriginSizingRef.current[column.id] = getResizeOriginSize(column, Math.round(measuredWidth));
+			}
+			const missing = collectMissingLeafSizing(measured, columnSizingRef.current);
+			if (Object.keys(missing).length > 0) handleColumnSizingChange((prev) => ({
+				...clampColumnSizing(missing, leafSizeBoundsRef.current),
+				...prev
+			}));
+			return true;
+		};
+		if (seedMissingLeaves()) return;
+		const observer = new ResizeObserver(() => {
+			if (seedMissingLeaves()) observer.disconnect();
+		});
+		observer.observe(container);
+		return () => observer.disconnect();
+	}, [
+		enabled,
+		columns,
+		columnVisibility,
+		handleColumnSizingChange
+	]);
+	const tableOptions = (0, react.useMemo)(() => ({
+		enableColumnResizing: enabled,
+		columnResizeMode: "onChange",
+		...enabled ? { defaultColumn: { minSize: 52 } } : {},
+		onColumnSizingChange: handleColumnSizingChange,
+		onColumnSizingInfoChange: handleColumnSizingInfoChange
+	}), [
+		enabled,
+		handleColumnSizingChange,
+		handleColumnSizingInfoChange
+	]);
+	const bind = (table) => {
+		tableRef.current = table;
+		leafSizeBoundsRef.current = table.getAllLeafColumns();
+		const visibleLeafIds = table.getVisibleLeafColumns().map((column) => column.id);
+		const resizeSizingReady = enabled && visibleLeafIds.length > 0 && visibleLeafIds.every((id) => columnSizing[id] !== void 0);
+		const columnSizeVars = resizeSizingReady ? {
+			...getColumnSizeCssVars(table.getFlatHeaders()),
+			width: table.getTotalSize()
+		} : void 0;
+		if (!enabled) return {
+			columnSizeVars: void 0,
+			activeResize: null,
+			context: {
+				resizableColumns: false,
+				resizeSizingReady: false,
+				resizeContainerRef: containerRef,
+				onResizeHover: handleResizeHover,
+				onResizeDragStart: handleResizeDragStart,
+				onResizeReset: handleResizeReset,
+				onResizeKeyboardNudge: handleResizeKeyboardNudge
+			}
+		};
+		const isResizingColumn = columnSizingInfo.isResizingColumn;
+		const resizingHeader = typeof isResizingColumn === "string" ? table.getFlatHeaders().find((header) => header.column.id === isResizingColumn) : void 0;
+		const startSize = columnSizingInfo.startSize;
+		const clampedResizeDelta = resizingHeader && startSize !== null ? resizingHeader.getSize() - startSize : columnSizingInfo.deltaOffset ?? 0;
+		return {
+			columnSizeVars,
+			activeResize: isResizingColumn && dragStartOffsetRef.current !== null ? {
+				offset: dragStartOffsetRef.current + clampedResizeDelta,
+				phase: "dragging"
+			} : resizeHover ? {
+				offset: resizeHover.offset,
+				phase: "hover"
+			} : null,
+			context: {
+				resizableColumns: enabled,
+				resizeSizingReady,
+				resizeContainerRef: containerRef,
+				onResizeHover: handleResizeHover,
+				onResizeDragStart: handleResizeDragStart,
+				onResizeReset: handleResizeReset,
+				onResizeKeyboardNudge: handleResizeKeyboardNudge
+			}
+		};
+	};
+	return {
+		tableOptions,
+		state: {
+			columnSizing,
+			columnSizingInfo
+		},
+		bind
+	};
+};
+//#endregion
 //#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",
@@ -20773,7 +21636,7 @@ var ds_table_row_virtualized_module_default = {
 //#endregion
 //#region src/components/ds-table/components/ds-table-row-virtualized/ds-table-row-virtualized.tsx
 const DsTableRowVirtualized = ({ row, isSelected, rowsMapRef, rowHeightsMapRef, rowVirtualizer, virtualRow, isExpandedRowContent }) => {
-	const { bordered, rowSize, activeRowId, primaryRowActions, secondaryRowActions, renderExpandedRow, onRowClick, onRowDoubleClick, loading } = useDsTableContext();
+	const { bordered, rowSize, activeRowId, primaryRowActions, secondaryRowActions, renderExpandedRow, onRowClick, onRowDoubleClick, loading, resizeSizingReady } = useDsTableContext();
 	const isExpanded = row.getIsExpanded();
 	const isActive = activeRowId === row.id;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableRow, {
@@ -20797,8 +21660,9 @@ const DsTableRowVirtualized = ({ row, isSelected, rowsMapRef, rowHeightsMapRef,
 		onDoubleClick: isExpandedRowContent ? void 0 : () => onRowDoubleClick?.(row.original),
 		children: isExpandedRowContent ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableCell, { children: renderExpandedRow?.(row.original) }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: row.getVisibleCells().map((cell, idx) => {
 			const isLastColumn = idx === row.getVisibleCells().length - 1;
+			const columnSizing = cell.getContext().table.getState().columnSizing;
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableCell, {
-				style: getColumnSizeStyle(cell.column.getSize()),
+				style: getBodyCellSizeStyle(cell.column.id, cell.column.getSize(), isExplicitColumnWidth(cell.column, resizeSizingReady ? columnSizing : {}), !!resizeSizingReady),
 				className: (0, classnames.default)(ds_table_row_virtualized_module_default.cell, cell.column.id === "expander" && ds_table_row_virtualized_module_default.expandableCell, cell.column.id === "select" && ds_table_row_virtualized_module_default.selectableCell, isFirstLeafColumnOfGroup(cell.column) && ds_table_row_virtualized_module_default.groupStart, typeof cell.column.columnDef.editCell === "function" && ds_table_row_virtualized_module_default.editableCell),
 				children: isLastColumn ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTableCell, {
 					row,
@@ -20937,6 +21801,194 @@ function DsTableBody({ ref, rowVirtualizer, rowsMapRef, rowHeightsMapRef, rowsAn
 	});
 }
 //#endregion
+//#region src/components/ds-table/components/ds-table-header-selectable-cell/ds-table-header-selectable-cell.tsx
+const DsTableHeaderSelectableCell = ({ table }) => {
+	const checked = table.getIsAllRowsSelected() ? true : table.getIsSomeRowsSelected() ? "indeterminate" : false;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsCheckbox, {
+		className: ds_table_shared_module_default.checkboxContainer,
+		checked,
+		onCheckedChange: (nextChecked) => table.toggleAllRowsSelected(!!nextChecked),
+		onClick: (e) => e.stopPropagation(),
+		onDoubleClick: (e) => e.stopPropagation()
+	});
+};
+//#endregion
+//#region src/components/ds-table/components/ds-table-row-expandable-cell/ds-table-row-expandable-cell.module.scss
+var ds_table_row_expandable_cell_module_default = { "button": "enUIjW_button" };
+//#endregion
+//#region src/components/ds-table/components/ds-table-row-expandable-cell/ds-table-row-expandable-cell.tsx
+const DsTableRowExpandableCell = ({ row, buttonClassName }) => {
+	const isExpanded = row.getIsExpanded();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsButton, {
+		design: "v1.2",
+		buttonType: "tertiary",
+		size: "small",
+		className: (0, classnames.default)(ds_table_row_expandable_cell_module_default.button, buttonClassName),
+		onClick: (e) => {
+			e.stopPropagation();
+			row.toggleExpanded();
+		},
+		onDoubleClick: (e) => {
+			e.stopPropagation();
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsIcon, {
+			icon: "chevron_right",
+			size: "small",
+			className: (0, classnames.default)(ds_table_shared_module_default.pageButtonIcon, isExpanded && "rotate-90")
+		})
+	});
+};
+//#endregion
+//#region src/components/ds-table/components/ds-table-row-selectable-cell/ds-table-row-selectable-cell.tsx
+const DsTableRowSelectableCell = ({ row }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsCheckbox, {
+		className: ds_table_shared_module_default.checkboxContainer,
+		checked: row.getIsSelected(),
+		disabled: !row.getCanSelect(),
+		onCheckedChange: (checked) => row.toggleSelected(!!checked),
+		onClick: (e) => e.stopPropagation(),
+		onDoubleClick: (e) => e.stopPropagation()
+	});
+};
+//#endregion
+//#region src/components/ds-table/utils/table-columns.tsx
+const EXPLICIT_SIZE_META = { hasExplicitSize: true };
+/**
+* Clones leaf defs that authored `size` so `meta.hasExplicitSize` survives
+* TanStack’s default-size merge. Group defs are cloned only to recurse;
+* unsized leaves are returned as-is.
+*/
+const stampExplicitSize = (columns) => columns.map((column) => {
+	if ("columns" in column && column.columns) return {
+		...column,
+		columns: stampExplicitSize(column.columns)
+	};
+	if (column.size === void 0) return column;
+	return {
+		...column,
+		meta: {
+			...column.meta,
+			...EXPLICIT_SIZE_META
+		}
+	};
+});
+/**
+* Prepends the builtin select / expander / reorder columns when those features
+* are on. Reorder is omitted for virtualized tables. Unshift order yields
+* visual order: reorder, expander, select, then consumer columns.
+*/
+const getAugmentedColumns = (columns, { selectable, expandable, reorderable, virtualized, showSelectAllCheckbox }) => {
+	const augmentedColumns = stampExplicitSize(columns);
+	if (selectable) augmentedColumns.unshift({
+		id: SELECT_COLUMN_ID,
+		size: 36,
+		minSize: 36,
+		maxSize: 36,
+		enableSorting: false,
+		enableResizing: false,
+		meta: EXPLICIT_SIZE_META,
+		header: ({ table }) => showSelectAllCheckbox ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTableHeaderSelectableCell, { table }) : null,
+		cell: ({ row }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTableRowSelectableCell, { row })
+	});
+	if (expandable) augmentedColumns.unshift({
+		id: EXPANDER_COLUMN_ID,
+		size: 36,
+		minSize: 36,
+		maxSize: 36,
+		enableSorting: false,
+		enableResizing: false,
+		meta: EXPLICIT_SIZE_META,
+		header: () => null,
+		cell: ({ row }) => row.getCanExpand() ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTableRowExpandableCell, { row }) : null
+	});
+	if (reorderable && !virtualized) augmentedColumns.unshift({
+		id: REORDER_COLUMN_ID,
+		size: 60,
+		minSize: 60,
+		maxSize: 60,
+		enableSorting: false,
+		enableResizing: false,
+		meta: EXPLICIT_SIZE_META,
+		header: "Order",
+		cell: () => null
+	});
+	return augmentedColumns;
+};
+/**
+* Replaces each leaf `cell` with `loadingCell` (or a default text skeleton).
+* Group columns are cloned with the same transform applied to their children.
+*/
+const toSkeletonColumns = (columns) => columns.map((column) => "columns" in column && column.columns ? {
+	...column,
+	columns: toSkeletonColumns(column.columns)
+} : {
+	...column,
+	cell: column.loadingCell ?? (() => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsSkeletonText, { width: "60%" }))
+});
+const createSkeletonRows = () => Array.from({ length: 5 }, (_, i) => ({ id: `ds-table-skeleton-${String(i)}` }));
+//#endregion
+//#region src/components/ds-table/utils/table-api.ts
+const createTableApi = (table) => ({
+	selectRow: (rowId) => {
+		table.getRow(rowId).toggleSelected(true);
+	},
+	deselectRow: (rowId) => {
+		table.getRow(rowId).toggleSelected(false);
+	},
+	selectAllRows: () => {
+		table.toggleAllRowsSelected(true);
+	},
+	deselectAllRows: () => {
+		table.toggleAllRowsSelected(false);
+	},
+	selectRows: (rowIds) => {
+		const selection = {};
+		rowIds.forEach((id) => selection[id] = true);
+		table.setRowSelection(selection);
+	},
+	getSelectedRows: () => {
+		return table.getFilteredSelectedRowModel().rows.map((r) => r.original);
+	},
+	expandRow: (rowId) => {
+		table.getRow(rowId).toggleExpanded(true);
+	},
+	collapseRow: (rowId) => {
+		table.getRow(rowId).toggleExpanded(false);
+	},
+	expandAllRows: () => {
+		table.toggleAllRowsExpanded(true);
+	},
+	collapseAllRows: () => {
+		table.toggleAllRowsExpanded(false);
+	},
+	expandRows: (rowIds) => {
+		const expansion = {};
+		rowIds.forEach((id) => expansion[id] = true);
+		table.setExpanded(expansion);
+	}
+});
+//#endregion
+//#region src/components/ds-table/utils/frozen-body.ts
+/**
+* `React.memo` comparator for the table body during a column-resize drag.
+*
+* While a column is being resized, sizing is applied through CSS variables on
+* the table element, so body rows do not need to re-render — freezing them keeps
+* dragging smooth. `table` is a stable mutable instance (ref-equal across
+* renders), so comparing it is meaningless and it is skipped; every other prop
+* must be referentially unchanged to freeze. That way parent-driven updates mid-
+* drag (`rowSelection`, `emptyState`, `onScroll`, `infiniteScroll`, ...) are not
+* dropped.
+*/
+const areBodiesFrozen = (prev, next) => {
+	if (!next.table.getState().columnSizingInfo.isResizingColumn) return false;
+	const prevProps = prev;
+	const nextProps = next;
+	const keys = /* @__PURE__ */ new Set([...Object.keys(prevProps), ...Object.keys(nextProps)]);
+	for (const key of keys) if (key !== "table" && prevProps[key] !== nextProps[key]) return false;
+	return true;
+};
+//#endregion
 //#region src/components/ds-table/ds-table.tsx
 const ROW_SIZE_HEIGHT_MAP = {
 	small: 36,
@@ -20946,7 +21998,9 @@ const ROW_SIZE_HEIGHT_MAP = {
 /**
 * Design system Table component
 */
-const DsTable = ({ ref, columns: columnsProp, data: tableData, controls, virtualized = false, virtualizedOptions, className, onRowClick, emptyState, stickyHeader = true, bordered = true, fullWidth = true, rowSize = "medium", loading = false, expandable = false, renderExpandedRow, selectable = false, showSelectAllCheckbox = true, onSelectionChange, onSortingChange, onScroll, actions = [], onRowDoubleClick, primaryRowActions = [], secondaryRowActions, reorderable = false, onOrderChange, columnFilters: externalColumnFilters, onColumnFiltersChange, columnVisibility: externalColumnVisibility, onColumnVisibilityChange, collapsedColumnGroups: externalCollapsedColumnGroups, onCollapsedColumnGroupsChange, locale, activeRowId, infiniteScroll, onCellEdit, onCellValidate }) => {
+const DsTable = (props) => {
+	const tableProps = applyDsTableDefaults(props);
+	const { ref, columns: columnsProp, data: tableData, controls, virtualized, virtualizedOptions, className, emptyState, bordered, fullWidth, rowSize, loading, expandable, selectable, showSelectAllCheckbox, onSelectionChange, onSortingChange, onScroll, actions, reorderable, onOrderChange, columnFilters: externalColumnFilters, onColumnFiltersChange, columnVisibility: externalColumnVisibility, onColumnVisibilityChange, collapsedColumnGroups: externalCollapsedColumnGroups, onCollapsedColumnGroupsChange, infiniteScroll, resizableColumns, columnSizing, onColumnSizingChange } = tableProps;
 	const [data, setData] = react.useState(tableData);
 	const [sorting, setSorting] = react.useState([]);
 	const [internalColumnFilters, setInternalColumnFilters] = react.useState([]);
@@ -20960,7 +22014,6 @@ const DsTable = ({ ref, columns: columnsProp, data: tableData, controls, virtual
 		},
 		items: data
 	});
-	const tableContainerRef = react.useRef(null);
 	const columnFilters = externalColumnFilters ?? internalColumnFilters;
 	const handleColumnFiltersChange = (updaterOrValue) => {
 		const newFilters = typeof updaterOrValue === "function" ? updaterOrValue(columnFilters) : updaterOrValue;
@@ -20992,63 +22045,31 @@ const DsTable = ({ ref, columns: columnsProp, data: tableData, controls, virtual
 		setRowSelection(newRowSelection);
 		onSelectionChange?.(newRowSelection);
 	};
-	const hasExpanderColumn = !!expandable;
-	const hasSelectColumn = !!selectable;
-	const hasReorderColumn = reorderable && !virtualized;
-	const columns = (0, react.useMemo)(() => {
-		const augmentedColumns = [...columnsProp];
-		if (hasSelectColumn) {
-			const selectColumn = {
-				id: SELECT_COLUMN_ID,
-				size: 36,
-				enableSorting: false,
-				enableResizing: false,
-				header: ({ table }) => showSelectAllCheckbox ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTableHeaderSelectableCell, { table }) : null,
-				cell: ({ row }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTableRowSelectableCell, { row })
-			};
-			augmentedColumns.unshift(selectColumn);
-		}
-		if (hasExpanderColumn) {
-			const expanderColumn = {
-				id: EXPANDER_COLUMN_ID,
-				size: 36,
-				enableSorting: false,
-				enableResizing: false,
-				header: () => null,
-				cell: ({ row }) => row.getCanExpand() ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTableRowExpandableCell, { row }) : null
-			};
-			augmentedColumns.unshift(expanderColumn);
-		}
-		if (hasReorderColumn) {
-			const reorderColumn = {
-				id: REORDER_COLUMN_ID,
-				size: 60,
-				enableSorting: false,
-				enableResizing: false,
-				header: "Order",
-				cell: () => null
-			};
-			augmentedColumns.unshift(reorderColumn);
-		}
-		return augmentedColumns;
-	}, [
+	const hasSelectColumn = Boolean(selectable);
+	const hasExpanderColumn = Boolean(expandable);
+	const columns = (0, react.useMemo)(() => getAugmentedColumns(columnsProp, {
+		selectable: hasSelectColumn,
+		expandable: hasExpanderColumn,
+		reorderable,
+		virtualized,
+		showSelectAllCheckbox
+	}), [
 		columnsProp,
-		hasExpanderColumn,
-		hasReorderColumn,
 		hasSelectColumn,
+		hasExpanderColumn,
+		reorderable,
+		virtualized,
 		showSelectAllCheckbox
 	]);
-	const skeletonColumns = (0, react.useMemo)(() => {
-		const toSkeleton = (cols) => cols.map((column) => "columns" in column && column.columns ? {
-			...column,
-			columns: toSkeleton(column.columns)
-		} : {
-			...column,
-			cell: column.loadingCell ?? (() => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsSkeletonText, { width: "60%" }))
-		});
-		return toSkeleton(columns);
-	}, [columns]);
-	const skeletonData = (0, react.useMemo)(() => Array.from({ length: 5 }, (_, i) => ({ id: `ds-table-skeleton-${String(i)}` })), []);
+	const skeletonColumns = (0, react.useMemo)(() => toSkeletonColumns(columns), [columns]);
+	const skeletonData = (0, react.useMemo)(() => createSkeletonRows(), []);
+	const resize = useColumnResize({
+		enabled: resizableColumns,
+		columnSizing,
+		onColumnSizingChange,
+		columns,
+		columnVisibility
+	});
 	const table = (0, _tanstack_react_table.useReactTable)({
 		data: loading ? skeletonData : reorderable ? data : tableData,
 		columns: loading ? skeletonColumns : columns,
@@ -21062,87 +22083,30 @@ const DsTable = ({ ref, columns: columnsProp, data: tableData, controls, virtual
 		getRowId: (row) => row.id,
 		getExpandedRowModel: (0, _tanstack_react_table.getExpandedRowModel)(),
 		getRowCanExpand: typeof expandable === "function" ? (row) => expandable(row.original) : () => expandable,
+		...resize.tableOptions,
 		state: {
 			sorting,
 			columnFilters,
 			columnVisibility,
-			rowSelection
+			rowSelection,
+			...resize.state
 		},
 		enableRowSelection: typeof selectable === "function" ? (row) => selectable(row.original) : selectable
 	});
-	(0, react.useImperativeHandle)(ref, () => ({
-		selectRow: (rowId) => {
-			table.getRow(rowId).toggleSelected(true);
-		},
-		deselectRow: (rowId) => {
-			table.getRow(rowId).toggleSelected(false);
-		},
-		selectAllRows: () => {
-			table.toggleAllRowsSelected(true);
-		},
-		deselectAllRows: () => {
-			table.toggleAllRowsSelected(false);
-		},
-		selectRows: (rowIds) => {
-			const selection = {};
-			rowIds.forEach((id) => selection[id] = true);
-			table.setRowSelection(selection);
-		},
-		getSelectedRows: () => {
-			return table.getFilteredSelectedRowModel().rows.map((r) => r.original);
-		},
-		expandRow: (rowId) => {
-			table.getRow(rowId).toggleExpanded(true);
-		},
-		collapseRow: (rowId) => {
-			table.getRow(rowId).toggleExpanded(false);
-		},
-		expandAllRows: () => {
-			table.toggleAllRowsExpanded(true);
-		},
-		collapseAllRows: () => {
-			table.toggleAllRowsExpanded(false);
-		},
-		expandRows: (rowIds) => {
-			const expansion = {};
-			rowIds.forEach((id) => expansion[id] = true);
-			table.setExpanded(expansion);
-		}
-	}), [table]);
-	const { rows, rowsById } = table.getRowModel();
-	const renderEmptyState = () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableRow, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableCell, {
-		colSpan: columns.length,
-		className: ds_table_module_default.emptyState,
-		children: emptyState || "No results."
-	}) });
+	const { columnSizeVars, activeResize, context: resizeContext } = resize.bind(table);
+	(0, react.useImperativeHandle)(ref, () => createTableApi(table), [table]);
+	const { rowsById } = table.getRowModel();
 	const selectedRows = Object.entries(rowSelection).filter(([, selected]) => selected).map(([key]) => rowsById[key]?.original).filter((v) => !!v);
 	const isBulkActionsVisible = selectable && actions.length > 0 && selectedRows.length > 0;
-	const editingState = useEditingState(onCellEdit, onCellValidate);
-	const contextValue = {
-		stickyHeader,
-		bordered,
-		fullWidth,
-		rowSize,
-		expandable,
-		selectable,
-		reorderable,
-		showSelectAllCheckbox,
-		loading,
-		onRowClick: loading ? void 0 : onRowClick,
-		onRowDoubleClick: loading ? void 0 : onRowDoubleClick,
-		primaryRowActions,
-		secondaryRowActions,
-		renderExpandedRow,
-		virtualized,
-		activeRowId,
-		collapsedColumnGroups,
-		onToggleColumnGroup: toggleColumnGroup,
-		locale,
-		onCellEdit,
-		...editingState
-	};
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTableContext.Provider, {
-		value: contextValue,
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTableContextProvider, {
+		tableProps,
+		derived: {
+			grouping: {
+				collapsedColumnGroups,
+				onToggleColumnGroup: toggleColumnGroup
+			},
+			resize: resizeContext
+		},
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: (0, classnames.default)(ds_table_module_default.container, isBulkActionsVisible && ds_table_module_default.bulkActionsVisible, className),
 			children: [
@@ -21150,12 +22114,13 @@ const DsTable = ({ ref, columns: columnsProp, data: tableData, controls, virtual
 					className: ds_table_module_default.controls,
 					children: controls
 				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					ref: tableContainerRef,
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					ref: resizeContext.resizeContainerRef,
 					className: (0, classnames.default)(!virtualized && ds_table_module_default.dataTableContainer, virtualized && ds_table_module_default.virtualizedContainer),
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DragWrapper, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Table, {
+					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, {
+						style: columnSizeVars,
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTableHeader, { table }), virtualized ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MemoizedDsTableBodyVirtualized, {
 							table,
 							emptyState,
 							estimateSize: virtualizedOptions?.estimateSize || ROW_SIZE_HEIGHT_MAP[rowSize],
@@ -21163,11 +22128,16 @@ const DsTable = ({ ref, columns: columnsProp, data: tableData, controls, virtual
 							onScroll,
 							rowSelection,
 							infiniteScroll
-						}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableBody, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SortableWrapper, { children: rows.length ? rows.map((row) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTableRow, {
-							row,
-							isSelected: !!rowSelection[row.id]
-						}, row.id)) : renderEmptyState() }) })]
-					}) })
+						}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MemoizedDsTableRowsBody, {
+							table,
+							rowSelection,
+							emptyState,
+							SortableWrapper
+						})]
+					}) }), activeResize ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTableResizeOverlay, {
+						offset: activeResize.offset,
+						phase: activeResize.phase
+					}) : null]
 				}),
 				selectable && actions.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTableBulkActions, {
 					numSelectedRows: selectedRows.length,
@@ -21181,6 +22151,20 @@ const DsTable = ({ ref, columns: columnsProp, data: tableData, controls, virtual
 		})
 	});
 };
+const DsTableRowsBody = ({ table, rowSelection, emptyState, SortableWrapper }) => {
+	const { rows } = table.getRowModel();
+	const columnCount = table.getVisibleLeafColumns().length;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableBody, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SortableWrapper, { children: rows.length ? rows.map((row) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTableRow, {
+		row,
+		isSelected: !!rowSelection[row.id]
+	}, row.id)) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableRow, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableCell, {
+		colSpan: columnCount,
+		className: ds_table_module_default.emptyState,
+		children: emptyState || "No results."
+	}) }) }) });
+};
+const MemoizedDsTableRowsBody = react.memo(DsTableRowsBody, areBodiesFrozen);
+const MemoizedDsTableBodyVirtualized = react.memo(DsTableBodyVirtualized, areBodiesFrozen);
 DsTable.displayName = "DsTable";
 //#endregion
 //#region src/components/ds-table/hooks/use-cell-editor.ts
@@ -21195,6 +22179,7 @@ const useCellEditor = ({ 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 isPending = isActiveCell && ctx.editing ? ctx.editing.pending : false;
 	const setValue = (next) => {
 		ctx.setDraft(next);
 	};
@@ -21210,6 +22195,7 @@ const useCellEditor = ({ cellContext }) => {
 	return {
 		value,
 		error,
+		isPending,
 		setValue,
 		commit,
 		cancel,
@@ -21241,7 +22227,7 @@ const TableEditFormControl = ({ cellContext, error, children }) => {
 //#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 { value, setValue, error, isPending } = useCellEditor({ cellContext });
 	const inputRef = (0, react.useRef)(null);
 	(0, react.useEffect)(() => {
 		const input = inputRef.current;
@@ -21258,6 +22244,7 @@ const DsTableEditCellText = ({ cellContext, placeholder, maxLength }) => {
 			value,
 			placeholder,
 			maxLength,
+			disabled: isPending,
 			onValueChange: setValue,
 			slots: error ? { endAdornment: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsIcon, {
 				icon: "error",
@@ -21271,7 +22258,7 @@ DsTableEditCellText.displayName = "DsTableEditCellText";
 //#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 { value, setValue, error, isPending } = useCellEditor({ cellContext });
 	const inputRef = (0, react.useRef)(null);
 	(0, react.useEffect)(() => {
 		const input = inputRef.current;
@@ -21289,6 +22276,7 @@ const DsTableEditCellNumber = ({ cellContext, min, max, step }) => {
 			min,
 			max,
 			step,
+			disabled: isPending,
 			onValueChange: setValue
 		})
 	});
@@ -21298,7 +22286,7 @@ DsTableEditCellNumber.displayName = "DsTableEditCellNumber";
 //#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 });
+	const { value, setValue, error, isPending } = useCellEditor({ cellContext });
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableEditFormControl, {
 		cellContext,
 		error,
@@ -21307,6 +22295,7 @@ const DsTableEditCellSelect = ({ cellContext, options, placeholder }) => {
 			value,
 			options,
 			placeholder,
+			disabled: isPending,
 			onValueChange: setValue
 		})
 	});
@@ -21316,7 +22305,7 @@ DsTableEditCellSelect.displayName = "DsTableEditCellSelect";
 //#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 });
+	const { value, setValue, error, isPending } = useCellEditor({ cellContext });
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableEditFormControl, {
 		cellContext,
 		error,
@@ -21326,6 +22315,7 @@ const DsTableEditCellDate = ({ cellContext, min, max, placeholder }) => {
 			min,
 			max,
 			placeholder,
+			disabled: isPending,
 			onChange: setValue,
 			slotProps: error ? { input: { slots: { endAdornment: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsIcon, {
 				icon: "error",
@@ -21339,10 +22329,10 @@ DsTableEditCellDate.displayName = "DsTableEditCellDate";
 //#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 });
+	const { value, setValue, isPending } = useCellEditor({ cellContext });
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsCheckbox, {
 		checked: value,
-		disabled,
+		disabled: disabled || isPending,
 		onCheckedChange: (checked) => setValue(checked === true)
 	});
 };
@@ -22911,6 +23901,7 @@ exports.DsSkeleton = DsSkeleton;
 exports.DsSkeletonCircle = DsSkeletonCircle;
 exports.DsSkeletonRect = DsSkeletonRect;
 exports.DsSkeletonText = DsSkeletonText;
+exports.DsSlider = DsSlider;
 exports.DsSmartTabs = DsSmartTabs;
 exports.DsSpinner = DsSpinner;
 exports.DsSplitButton = DsSplitButton;
@@ -22950,6 +23941,7 @@ exports.FileUpload = FileUpload;
 exports.FileUploadError = FileUploadError;
 exports.RetryableFileUploadError = RetryableFileUploadError;
 exports.alertBannerVariants = alertBannerVariants;
+exports.autocompleteSizes = autocompleteSizes;
 exports.breakpoints = breakpoints;
 exports.buttonV3Colors = buttonV3Colors;
 exports.buttonV3Sizes = buttonV3Sizes;