@drivenets/design-system 0.9.1 → 0.11.0

package/dist/index.js

@@ -2,8 +2,8 @@ import { c } from "react/compiler-runtime";
 import classNames from "classnames";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React$1 from "react";
-import React, { Children, Fragment as Fragment$1, createContext, createElement, isValidElement, useContext, useEffect, useId, useImperativeHandle, useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
-import { Slot } from "@radix-ui/react-slot";
+import React, { Children, Fragment as Fragment$1, createContext, createElement, isValidElement, useContext, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { FileUpload as FileUpload$1, NumberInput, PasswordInput, Progress, Toast, Toaster, ark, createToaster } from "@ark-ui/react";
 import { Combobox, createListCollection } from "@ark-ui/react/combobox";
 import { useFilter } from "@ark-ui/react/locale";
 import { Highlight } from "@ark-ui/react/highlight";
@@ -13,9 +13,9 @@ import * as Tooltip from "@radix-ui/react-tooltip";
 import { Link, useLocation } from "@tanstack/react-router";
 import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
 import { Menu } from "@ark-ui/react/menu";
-import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { Checkbox } from "@ark-ui/react/checkbox";
 import * as RadixDialog from "@radix-ui/react-dialog";
-import { Root as Root$1 } from "@radix-ui/react-visually-hidden";
+import { Root } from "@radix-ui/react-visually-hidden";
 import { Dialog } from "@ark-ui/react/dialog";
 import { createPortal } from "react-dom";
 import { Tabs } from "@ark-ui/react/tabs";
@@ -23,15 +23,13 @@ import { DatePicker } from "@ark-ui/react/date-picker";
 import { CalendarDate, fromDate, getLocalTimeZone, parseDate } from "@internationalized/date";
 import { Popover } from "@ark-ui/react/popover";
 import { Select, createListCollection as createListCollection$1, useSelect, useSelectContext } from "@ark-ui/react/select";
-import { FileUpload as FileUpload$1, NumberInput, PasswordInput, Progress, Toast, Toaster, createToaster } from "@ark-ui/react";
 import * as Collapsible from "@radix-ui/react-collapsible";
 import * as Popover$1 from "@radix-ui/react-popover";
-import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
 import { RadioGroup } from "@ark-ui/react/radio-group";
 import { SegmentGroup } from "@ark-ui/react/segment-group";
 import * as steps from "@zag-js/steps";
 import { normalizeProps, useMachine } from "@zag-js/react";
-import { defaultColumnSizing, flexRender, getCoreRowModel, getFilteredRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
+import { defaultColumnSizing, flexRender, getCoreRowModel, getExpandedRowModel, getFilteredRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
 import { SortableContext, arrayMove, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import { DndContext, KeyboardSensor, MouseSensor, TouchSensor, closestCenter, useSensor, useSensors } from "@dnd-kit/core";
@@ -69,6 +67,37 @@ var ds_icon_module_default = {
 	"tiny": "BWBvDq_tiny"
 };
 //#endregion
+//#region src/components/ds-icon/ds-icon.types.ts
+const iconSizes = [
+	"tiny",
+	"small",
+	"medium",
+	"large",
+	"extra-large"
+];
+const iconVariants = ["outlined", "rounded"];
+const iconColors = [
+	"action",
+	"action-hover",
+	"action-secondary",
+	"disabled",
+	"error",
+	"execution",
+	"information-main",
+	"information-secondary",
+	"inverse",
+	"main",
+	"on-button",
+	"on-dark-disabled",
+	"pause",
+	"pending",
+	"secondary",
+	"success",
+	"success-light",
+	"warning",
+	"warning-light"
+];
+//#endregion
 //#region src/components/ds-icon/custom-icons/special-market.tsx
 /**
 * Special Market icon - represents a market/city location
@@ -1979,6 +2008,33 @@ const SpecialHome = (props) => {
 	return t1;
 };
 //#endregion
+//#region src/components/ds-icon/custom-icons/special-leading-icon.tsx
+/** Leading / input-adjacent building icon from design (AR-58177). */
+const SpecialLeadingIcon = (props) => {
+	const $ = c(3);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /* @__PURE__ */ jsx("path", {
+			d: "M7.2 4.81737H7.8C7.95913 4.81737 8.11174 4.75164 8.22426 4.63464C8.33679 4.51765 8.4 4.35896 8.4 4.1935C8.4 4.02804 8.33679 3.86936 8.22426 3.75237C8.11174 3.63537 7.95913 3.56964 7.8 3.56964H7.2C7.04087 3.56964 6.88826 3.63537 6.77574 3.75237C6.66321 3.86936 6.6 4.02804 6.6 4.1935C6.6 4.35896 6.66321 4.51765 6.77574 4.63464C6.88826 4.75164 7.04087 4.81737 7.2 4.81737ZM7.2 7.31283H7.8C7.95913 7.31283 8.11174 7.24711 8.22426 7.13011C8.33679 7.01311 8.4 6.85443 8.4 6.68897C8.4 6.52351 8.33679 6.36483 8.22426 6.24783C8.11174 6.13083 7.95913 6.0651 7.8 6.0651H7.2C7.04087 6.0651 6.88826 6.13083 6.77574 6.24783C6.66321 6.36483 6.6 6.52351 6.6 6.68897C6.6 6.85443 6.66321 7.01311 6.77574 7.13011C6.88826 7.24711 7.04087 7.31283 7.2 7.31283ZM4.2 4.81737H4.8C4.95913 4.81737 5.11174 4.75164 5.22426 4.63464C5.33679 4.51765 5.4 4.35896 5.4 4.1935C5.4 4.02804 5.33679 3.86936 5.22426 3.75237C5.11174 3.63537 4.95913 3.56964 4.8 3.56964H4.2C4.04087 3.56964 3.88826 3.63537 3.77574 3.75237C3.66321 3.86936 3.6 4.02804 3.6 4.1935C3.6 4.35896 3.66321 4.51765 3.77574 4.63464C3.88826 4.75164 4.04087 4.81737 4.2 4.81737ZM4.2 7.31283H4.8C4.95913 7.31283 5.11174 7.24711 5.22426 7.13011C5.33679 7.01311 5.4 6.85443 5.4 6.68897C5.4 6.52351 5.33679 6.36483 5.22426 6.24783C5.11174 6.13083 4.95913 6.0651 4.8 6.0651H4.2C4.04087 6.0651 3.88826 6.13083 3.77574 6.24783C3.66321 6.36483 3.6 6.52351 3.6 6.68897C3.6 6.85443 3.66321 7.01311 3.77574 7.13011C3.88826 7.24711 4.04087 7.31283 4.2 7.31283ZM11.4 11.264H10.8V1.13558C10.8 0.97012 10.7368 0.811436 10.6243 0.694439C10.5117 0.577441 10.3591 0.511713 10.2 0.511713H1.8C1.64087 0.511713 1.48826 0.577441 1.37574 0.694439C1.26321 0.811436 1.2 0.97012 1.2 1.13558V11.264H0.6C0.44087 11.264 0.288258 11.3297 0.175736 11.4467C0.0632141 11.5637 0 11.7224 0 11.8879C0 12.0533 0.0632141 12.212 0.175736 12.329C0.288258 12.446 0.44087 12.5117 0.6 12.5117H11.4C11.5591 12.5117 11.7117 12.446 11.8243 12.329C11.9368 12.212 12 12.0533 12 11.8879C12 11.7224 11.9368 11.5637 11.8243 11.4467C11.7117 11.3297 11.5591 11.264 11.4 11.264ZM6.6 12.5117H5.4V9.91228H6.6V12.5117ZM9.6 11.264H7.8V9.28841C7.8 9.12295 7.73679 8.96426 7.62426 8.84727C7.51174 8.73027 7.35913 8.66454 7.2 8.66454H4.8C4.64087 8.66454 4.48826 8.73027 4.37574 8.84727C4.26321 8.96426 4.2 9.12295 4.2 9.28841V11.264H2.4V1.75945H9.6V11.264Z",
+			fill: "currentColor"
+		});
+		$[0] = t0;
+	} else t0 = $[0];
+	let t1;
+	if ($[1] !== props) {
+		t1 = /* @__PURE__ */ jsx("svg", {
+			xmlns: "http://www.w3.org/2000/svg",
+			viewBox: "0 0 12 13",
+			fill: "none",
+			...props,
+			children: t0
+		});
+		$[1] = props;
+		$[2] = t1;
+	} else t1 = $[2];
+	return t1;
+};
+//#endregion
 //#region src/components/ds-icon/custom-icons/special-lego.tsx
 /**
 * Special Lego icon
@@ -2666,6 +2722,7 @@ const customIcons = {
 	"special-webhook": SpecialWebhook,
 	"special-map-view": SpecialMapView,
 	"special-home": SpecialHome,
+	"special-leading-icon": SpecialLeadingIcon,
 	"special-lego": SpecialLego,
 	"special-scheme": SpecialScheme,
 	"special-book": SpecialBook,
@@ -2686,11 +2743,14 @@ const isCustomIcon = (icon) => {
 };
 //#endregion
 //#region src/components/ds-icon/ds-icon.tsx
+const iconColorSet = new Set(iconColors);
+const resolveColor$1 = (color) => iconColorSet.has(color) ? `var(--icon-${color})` : color;
 /**
 * Design system Icon component that renders Google Material Icons, custom SVG icons, or inline SVGs
 */
 const DsIcon = (t0) => {
-	const $ = c(24);
+	const $ = c(30);
+	let color;
 	let filled;
 	let icon;
 	let rest;
@@ -2699,44 +2759,58 @@ const DsIcon = (t0) => {
 	let t3;
 	let t4;
 	if ($[0] !== t0) {
-		({icon, size: t1, variant: t2, filled, className: t3, style: t4, ...rest} = t0);
+		({icon, size: t1, variant: t2, filled, color, className: t3, style: t4, ...rest} = t0);
 		$[0] = t0;
-		$[1] = filled;
-		$[2] = icon;
-		$[3] = rest;
-		$[4] = t1;
-		$[5] = t2;
-		$[6] = t3;
-		$[7] = t4;
+		$[1] = color;
+		$[2] = filled;
+		$[3] = icon;
+		$[4] = rest;
+		$[5] = t1;
+		$[6] = t2;
+		$[7] = t3;
+		$[8] = t4;
 	} else {
-		filled = $[1];
-		icon = $[2];
-		rest = $[3];
-		t1 = $[4];
-		t2 = $[5];
-		t3 = $[6];
-		t4 = $[7];
+		color = $[1];
+		filled = $[2];
+		icon = $[3];
+		rest = $[4];
+		t1 = $[5];
+		t2 = $[6];
+		t3 = $[7];
+		t4 = $[8];
 	}
 	const size = t1 === void 0 ? "medium" : t1;
 	const variant = t2 === void 0 ? "outlined" : t2;
 	const className = t3 === void 0 ? "" : t3;
 	let t5;
-	if ($[8] !== t4) {
+	if ($[9] !== t4) {
 		t5 = t4 === void 0 ? {} : t4;
-		$[8] = t4;
-		$[9] = t5;
-	} else t5 = $[9];
+		$[9] = t4;
+		$[10] = t5;
+	} else t5 = $[10];
 	const style = t5;
+	let mergedStyle;
 	let t6;
 	let t7;
-	if ($[10] !== className || $[11] !== filled || $[12] !== icon || $[13] !== rest || $[14] !== size || $[15] !== style || $[16] !== variant) {
+	if ($[11] !== className || $[12] !== color || $[13] !== filled || $[14] !== icon || $[15] !== rest || $[16] !== size || $[17] !== style || $[18] !== variant) {
 		t7 = Symbol.for("react.early_return_sentinel");
 		bb0: {
 			const iconClass = classNames(ds_icon_module_default.icon, ds_icon_module_default[size], { [ds_icon_module_default.filled]: filled }, className);
+			let t8;
+			if ($[22] !== color || $[23] !== style) {
+				t8 = color ? {
+					color: resolveColor$1(color),
+					...style
+				} : style;
+				$[22] = color;
+				$[23] = style;
+				$[24] = t8;
+			} else t8 = $[24];
+			mergedStyle = t8;
 			if (typeof icon === "function") {
 				t7 = /* @__PURE__ */ jsx(icon, {
 					className: iconClass,
-					style,
+					style: mergedStyle,
 					...rest
 				});
 				break bb0;
@@ -2745,80 +2819,161 @@ const DsIcon = (t0) => {
 				const SvgComponent_0 = customIcons[icon];
 				t7 = /* @__PURE__ */ jsx(SvgComponent_0, {
 					className: iconClass,
-					style,
+					style: mergedStyle,
 					...rest
 				});
 				break bb0;
 			}
 			t6 = classNames(iconClass, `material-symbols-${variant}`);
 		}
-		$[10] = className;
-		$[11] = filled;
-		$[12] = icon;
-		$[13] = rest;
-		$[14] = size;
-		$[15] = style;
-		$[16] = variant;
-		$[17] = t6;
-		$[18] = t7;
+		$[11] = className;
+		$[12] = color;
+		$[13] = filled;
+		$[14] = icon;
+		$[15] = rest;
+		$[16] = size;
+		$[17] = style;
+		$[18] = variant;
+		$[19] = mergedStyle;
+		$[20] = t6;
+		$[21] = t7;
 	} else {
-		t6 = $[17];
-		t7 = $[18];
+		mergedStyle = $[19];
+		t6 = $[20];
+		t7 = $[21];
 	}
 	if (t7 !== Symbol.for("react.early_return_sentinel")) return t7;
 	let t8;
-	if ($[19] !== icon || $[20] !== rest || $[21] !== style || $[22] !== t6) {
+	if ($[25] !== icon || $[26] !== mergedStyle || $[27] !== rest || $[28] !== t6) {
 		t8 = /* @__PURE__ */ jsx("span", {
 			className: t6,
-			style,
+			style: mergedStyle,
 			...rest,
 			children: icon
 		});
-		$[19] = icon;
-		$[20] = rest;
-		$[21] = style;
-		$[22] = t6;
-		$[23] = t8;
-	} else t8 = $[23];
+		$[25] = icon;
+		$[26] = mergedStyle;
+		$[27] = rest;
+		$[28] = t6;
+		$[29] = t8;
+	} else t8 = $[29];
 	return t8;
 };
 //#endregion
-//#region src/components/ds-icon/ds-icon.types.ts
-const iconSizes = [
-	"tiny",
-	"small",
-	"medium",
-	"large",
-	"extra-large"
-];
-const iconVariants = ["outlined", "rounded"];
-//#endregion
 //#region src/components/ds-typography/ds-typography.config.ts
-const semanticElementMap = {
-	"body-md-reg": "p",
-	"body-md-md": "p",
-	"body-md-semi-bold": "p",
-	"body-md-bold": "p",
-	"body-md-link": "a",
-	"body-sm-reg": "span",
-	"body-sm-md": "span",
-	"body-sm-semi-bold": "span",
-	"body-sm-bold": "span",
-	"body-sm-link": "a",
-	"body-xs-reg": "span",
-	"body-xs-md": "span",
-	"body-xs-semi-bold": "span",
-	"body-xs-bold": "span",
-	"body-xs-link": "a",
-	"code-sm-reg": "code",
-	"code-sm-semi-bold": "code",
-	"code-xs-reg": "code",
-	"code-xs-semi-bold": "code",
-	heading1: "h1",
-	heading2: "h2",
-	heading3: "h3",
-	heading4: "h4"
+const typographyVariantConfig = {
+	"body-md-reg": {
+		element: "p",
+		component: ark.p
+	},
+	"body-md-md": {
+		element: "p",
+		component: ark.p
+	},
+	"body-md-semi-bold": {
+		element: "p",
+		component: ark.p
+	},
+	"body-md-bold": {
+		element: "p",
+		component: ark.p
+	},
+	"body-md-link": {
+		element: "a",
+		component: ark.a
+	},
+	"body-sm-reg": {
+		element: "span",
+		component: ark.span
+	},
+	"body-sm-md": {
+		element: "span",
+		component: ark.span
+	},
+	"body-sm-semi-bold": {
+		element: "span",
+		component: ark.span
+	},
+	"body-sm-bold": {
+		element: "span",
+		component: ark.span
+	},
+	"body-sm-link": {
+		element: "a",
+		component: ark.a
+	},
+	"body-xs-reg": {
+		element: "span",
+		component: ark.span
+	},
+	"body-xs-md": {
+		element: "span",
+		component: ark.span
+	},
+	"body-xs-semi-bold": {
+		element: "span",
+		component: ark.span
+	},
+	"body-xs-bold": {
+		element: "span",
+		component: ark.span
+	},
+	"body-xs-link": {
+		element: "a",
+		component: ark.a
+	},
+	"code-sm-reg": {
+		element: "code",
+		component: ark.code
+	},
+	"code-sm-semi-bold": {
+		element: "code",
+		component: ark.code
+	},
+	"code-xs-reg": {
+		element: "code",
+		component: ark.code
+	},
+	"code-xs-semi-bold": {
+		element: "code",
+		component: ark.code
+	},
+	heading1: {
+		element: "h1",
+		component: ark.h1
+	},
+	heading2: {
+		element: "h2",
+		component: ark.h2
+	},
+	heading3: {
+		element: "h3",
+		component: ark.h3
+	},
+	heading4: {
+		element: "h4",
+		component: ark.h4
+	}
 };
+/** Semantic text colors backed by `--font-*` tokens in `_root_new.scss`. */
+const typographyColors = [
+	"main",
+	"secondary",
+	"action",
+	"action-hover",
+	"action-secondary",
+	"action-secondary-hover",
+	"disabled",
+	"light-disabled",
+	"on-action",
+	"on-disabled",
+	"placeholder",
+	"highlight",
+	"success",
+	"warning",
+	"error",
+	"code"
+];
 //#endregion
 //#region src/components/ds-typography/ds-typography.module.scss
 var ds_typography_module_default = {
@@ -2848,56 +3003,79 @@ var ds_typography_module_default = {
 };
 //#endregion
 //#region src/components/ds-typography/ds-typography.tsx
+const semanticColorSet = new Set(typographyColors);
+const resolveColor = (color) => semanticColorSet.has(color) ? `var(--font-${color})` : color;
 const DsTypography = (t0) => {
-	const $ = c(16);
+	const $ = c(23);
 	let children;
 	let className;
+	let color;
 	let props;
 	let ref;
+	let style;
 	let t1;
 	let variant;
 	if ($[0] !== t0) {
-		({ref, variant, asChild: t1, className, children, ...props} = t0);
+		({ref, variant, asChild: t1, className, style, color, children, ...props} = t0);
 		$[0] = t0;
 		$[1] = children;
 		$[2] = className;
-		$[3] = props;
-		$[4] = ref;
-		$[5] = t1;
-		$[6] = variant;
+		$[3] = color;
+		$[4] = props;
+		$[5] = ref;
+		$[6] = style;
+		$[7] = t1;
+		$[8] = variant;
 	} else {
 		children = $[1];
 		className = $[2];
-		props = $[3];
-		ref = $[4];
-		t1 = $[5];
-		variant = $[6];
+		color = $[3];
+		props = $[4];
+		ref = $[5];
+		style = $[6];
+		t1 = $[7];
+		variant = $[8];
 	}
-	const Component = (t1 === void 0 ? false : t1) ? Slot : semanticElementMap[variant];
+	const asChild = t1 === void 0 ? false : t1;
+	const Component = typographyVariantConfig[variant].component;
 	const t2 = ds_typography_module_default[variant];
 	let t3;
-	if ($[7] !== className || $[8] !== t2) {
+	if ($[9] !== className || $[10] !== t2) {
 		t3 = classNames(t2, className);
-		$[7] = className;
-		$[8] = t2;
-		$[9] = t3;
-	} else t3 = $[9];
+		$[9] = className;
+		$[10] = t2;
+		$[11] = t3;
+	} else t3 = $[11];
 	let t4;
-	if ($[10] !== Component || $[11] !== children || $[12] !== props || $[13] !== ref || $[14] !== t3) {
-		t4 = /* @__PURE__ */ jsx(Component, {
+	if ($[12] !== color || $[13] !== style) {
+		t4 = color ? {
+			color: resolveColor(color),
+			...style
+		} : style;
+		$[12] = color;
+		$[13] = style;
+		$[14] = t4;
+	} else t4 = $[14];
+	let t5;
+	if ($[15] !== Component || $[16] !== asChild || $[17] !== children || $[18] !== props || $[19] !== ref || $[20] !== t3 || $[21] !== t4) {
+		t5 = /* @__PURE__ */ jsx(Component, {
 			ref,
+			asChild,
 			className: t3,
+			style: t4,
 			...props,
 			children
 		});
-		$[10] = Component;
-		$[11] = children;
-		$[12] = props;
-		$[13] = ref;
-		$[14] = t3;
-		$[15] = t4;
-	} else t4 = $[15];
-	return t4;
+		$[15] = Component;
+		$[16] = asChild;
+		$[17] = children;
+		$[18] = props;
+		$[19] = ref;
+		$[20] = t3;
+		$[21] = t4;
+		$[22] = t5;
+	} else t5 = $[22];
+	return t5;
 };
 //#endregion
 //#region src/components/ds-alert-banner/ds-alert-banner.tsx
@@ -3648,6 +3826,7 @@ var ds_dropdown_menu_module_default = {
 	"separator": "AkHUyG_separator",
 	"triggerItem": "AkHUyG_triggerItem",
 	"triggerItemIcon": "AkHUyG_triggerItemIcon",
+	"variant-error": "AkHUyG_variant-error",
 	"viewportLegacy": "AkHUyG_viewportLegacy"
 };
 //#endregion
@@ -3811,7 +3990,7 @@ const DEFAULT_POSITIONING = {
 /**
 * Root component - manages dropdown state
 */
-const Root$5 = (t0) => {
+const Root$4 = (t0) => {
 	const $ = c(16);
 	const { open, onOpenChange, onSelect, onHighlightChange, positioning: customPositioning, preventCloseOnSelect: t1, children } = t0;
 	const preventCloseOnSelect = t1 === void 0 ? false : t1;
@@ -3873,7 +4052,7 @@ const Trigger = Menu.Trigger;
 /**
 * Content component - wraps the dropdown content
 */
-const Content = (t0) => {
+const Content$1 = (t0) => {
 	const $ = c(9);
 	const { disablePortal: t1, children, className, style } = t0;
 	const Wrapper = (t1 === void 0 ? false : t1) ? Fragment$1 : Portal;
@@ -3908,20 +4087,22 @@ const Content = (t0) => {
 * Item component - renders a menu item
 */
 const Item$2 = (t0) => {
-	const $ = c(12);
-	const { disabled, selected, value, asChild, onClick, onSelect, children, className, style } = t0;
-	let t1;
-	if ($[0] !== className || $[1] !== selected) {
-		t1 = classNames(ds_dropdown_menu_module_default.item, { [ds_dropdown_menu_module_default.selected]: selected }, className);
+	const $ = c(13);
+	const { disabled, selected, variant: t1, value, asChild, onClick, onSelect, children, className, style } = t0;
+	const variant = t1 === void 0 ? "default" : t1;
+	let t2;
+	if ($[0] !== className || $[1] !== selected || $[2] !== variant) {
+		t2 = classNames(ds_dropdown_menu_module_default.item, { [ds_dropdown_menu_module_default.selected]: selected }, variant === "error" && ds_dropdown_menu_module_default["variant-error"], className);
 		$[0] = className;
 		$[1] = selected;
-		$[2] = t1;
-	} else t1 = $[2];
-	let t2;
-	if ($[3] !== asChild || $[4] !== children || $[5] !== disabled || $[6] !== onClick || $[7] !== onSelect || $[8] !== style || $[9] !== t1 || $[10] !== value) {
-		t2 = /* @__PURE__ */ jsx(Menu.Item, {
+		$[2] = variant;
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] !== asChild || $[5] !== children || $[6] !== disabled || $[7] !== onClick || $[8] !== onSelect || $[9] !== style || $[10] !== t2 || $[11] !== value) {
+		t3 = /* @__PURE__ */ jsx(Menu.Item, {
 			disabled,
-			className: t1,
+			className: t2,
 			style,
 			value,
 			asChild,
@@ -3929,17 +4110,17 @@ const Item$2 = (t0) => {
 			onSelect,
 			children
 		});
-		$[3] = asChild;
-		$[4] = children;
-		$[5] = disabled;
-		$[6] = onClick;
-		$[7] = onSelect;
-		$[8] = style;
-		$[9] = t1;
-		$[10] = value;
-		$[11] = t2;
-	} else t2 = $[11];
-	return t2;
+		$[4] = asChild;
+		$[5] = children;
+		$[6] = disabled;
+		$[7] = onClick;
+		$[8] = onSelect;
+		$[9] = style;
+		$[10] = t2;
+		$[11] = value;
+		$[12] = t3;
+	} else t3 = $[12];
+	return t3;
 };
 /**
 * ItemIndicator component - renders a selection indicator (check icon by default)
@@ -3976,7 +4157,7 @@ const ItemIndicator = (t0) => {
 /**
 * Header component - sticky header container for search, filters, or other controls
 */
-const Header$3 = (t0) => {
+const Header$4 = (t0) => {
 	const $ = c(6);
 	const { children, className, style } = t0;
 	let t1;
@@ -4450,13 +4631,13 @@ const DsDropdownMenuLegacy = (t0) => {
 * </DsDropdownMenu.Root>
 */
 const DsDropdownMenu = {
-	Root: Root$5,
+	Root: Root$4,
 	Trigger,
-	Content,
+	Content: Content$1,
 	Item: Item$2,
 	ItemIndicator,
 	TriggerItem,
-	Header: Header$3,
+	Header: Header$4,
 	Actions: Actions$2,
 	ItemGroup,
 	ItemGroupLabel,
@@ -4470,6 +4651,9 @@ function _temp2$7(e) {
 	return e.stopPropagation();
 }
 //#endregion
+//#region src/components/ds-dropdown-menu/ds-dropdown-menu.types.ts
+const dropdownMenuItemVariants = ["default", "error"];
+//#endregion
 //#region src/components/ds-breadcrumb/ds-breadcrumb.tsx
 /**
 * Design system Breadcrumb component
@@ -5178,7 +5362,7 @@ var ds_card_module_default = {
 * Card root component - container with optional selectable behavior.
 * Use composition with DsCard.Header, DsCard.Body, DsCard.Footer for full flexibility.
 */
-const Root$4 = (t0) => {
+const Root$3 = (t0) => {
 	const $ = c(33);
 	let children;
 	let className;
@@ -5291,7 +5475,7 @@ const Root$4 = (t0) => {
 * Use with DsCard.Title and DsCard.Extra for standard layout,
 * or provide custom children for full flexibility.
 */
-const Header$2 = (t0) => {
+const Header$3 = (t0) => {
 	const $ = c(12);
 	let children;
 	let className;
@@ -5379,7 +5563,7 @@ const Body$2 = (t0) => {
 /**
 * Card footer - bottom section for actions or additional info.
 */
-const Footer$2 = (t0) => {
+const Footer$3 = (t0) => {
 	const $ = c(12);
 	let children;
 	let className;
@@ -5421,10 +5605,10 @@ const Footer$2 = (t0) => {
 	return t2;
 };
 const DsCard = {
-	Root: Root$4,
-	Header: Header$2,
+	Root: Root$3,
+	Header: Header$3,
 	Body: Body$2,
-	Footer: Footer$2
+	Footer: Footer$3
 };
 //#endregion
 //#region src/components/ds-card/ds-card.types.ts
@@ -5436,13 +5620,13 @@ const cardSizes = [
 //#endregion
 //#region src/components/ds-checkbox/ds-checkbox.module.scss
 var ds_checkbox_module_default = {
-	"checkboxIndicator": "-9VV7a_checkboxIndicator",
-	"checkboxRoot": "-9VV7a_checkboxRoot",
-	"checkboxWrapper": "-9VV7a_checkboxWrapper",
-	"container": "-9VV7a_container",
-	"default": "-9VV7a_default",
+	"control": "-9VV7a_control",
+	"hiddenInput": "-9VV7a_hiddenInput",
+	"indicator": "-9VV7a_indicator",
 	"label": "-9VV7a_label",
+	"labelColumn": "-9VV7a_labelColumn",
 	"labelInfo": "-9VV7a_labelInfo",
+	"root": "-9VV7a_root",
 	"warning": "-9VV7a_warning"
 };
 //#endregion
@@ -5451,118 +5635,202 @@ var ds_checkbox_module_default = {
 * Design system Checkbox component
 */
 const DsCheckbox = (t0) => {
-	const $ = c(30);
-	let checked;
+	const $ = c(25);
 	let className;
-	let defaultChecked;
-	let id;
 	let label;
 	let labelInfo;
 	let onCheckedChange;
 	let props;
 	let t1;
+	let value;
 	if ($[0] !== t0) {
-		({id, variant: t1, label, labelInfo, className, checked, defaultChecked, onCheckedChange, ...props} = t0);
+		({variant: t1, label, labelInfo, className, onCheckedChange, value, ...props} = t0);
 		$[0] = t0;
-		$[1] = checked;
-		$[2] = className;
-		$[3] = defaultChecked;
-		$[4] = id;
-		$[5] = label;
-		$[6] = labelInfo;
-		$[7] = onCheckedChange;
-		$[8] = props;
-		$[9] = t1;
+		$[1] = className;
+		$[2] = label;
+		$[3] = labelInfo;
+		$[4] = onCheckedChange;
+		$[5] = props;
+		$[6] = t1;
+		$[7] = value;
 	} else {
-		checked = $[1];
-		className = $[2];
-		defaultChecked = $[3];
-		id = $[4];
-		label = $[5];
-		labelInfo = $[6];
-		onCheckedChange = $[7];
-		props = $[8];
-		t1 = $[9];
+		className = $[1];
+		label = $[2];
+		labelInfo = $[3];
+		onCheckedChange = $[4];
+		props = $[5];
+		t1 = $[6];
+		value = $[7];
 	}
-	const variant = t1 === void 0 ? "default" : t1;
-	const generatedId = useId();
-	const checkboxId = id || generatedId;
-	const t2 = ds_checkbox_module_default[variant];
+	const t2 = (t1 === void 0 ? "default" : t1) === "warning" && ds_checkbox_module_default.warning;
 	let t3;
-	if ($[10] !== className || $[11] !== t2) {
-		t3 = classNames(ds_checkbox_module_default.container, t2, className);
-		$[10] = className;
-		$[11] = t2;
-		$[12] = t3;
-	} else t3 = $[12];
-	const t4 = checked === "indeterminate" ? "check_indeterminate_small" : "check_small";
-	let t5;
-	if ($[13] !== t4) {
-		t5 = /* @__PURE__ */ jsx("div", {
-			className: ds_checkbox_module_default.checkboxWrapper,
-			children: /* @__PURE__ */ jsx(CheckboxPrimitive.Indicator, {
-				className: ds_checkbox_module_default.checkboxIndicator,
-				children: /* @__PURE__ */ jsx(DsIcon, {
-					icon: t4,
-					size: "small",
-					variant: "outlined"
-				})
-			})
-		});
-		$[13] = t4;
-		$[14] = t5;
-	} else t5 = $[14];
+	if ($[8] !== className || $[9] !== t2) {
+		t3 = classNames(ds_checkbox_module_default.root, t2, className);
+		$[8] = className;
+		$[9] = t2;
+		$[10] = t3;
+	} else t3 = $[10];
+	let t4;
+	if ($[11] !== onCheckedChange) {
+		t4 = (details) => onCheckedChange?.(details.checked);
+		$[11] = onCheckedChange;
+		$[12] = t4;
+	} else t4 = $[12];
+	const t5 = value === void 0 ? void 0 : String(value);
 	let t6;
-	if ($[15] !== checkboxId || $[16] !== checked || $[17] !== defaultChecked || $[18] !== onCheckedChange || $[19] !== props || $[20] !== t5) {
-		t6 = /* @__PURE__ */ jsx(CheckboxPrimitive.Root, {
-			className: ds_checkbox_module_default.checkboxRoot,
-			id: checkboxId,
-			checked,
-			defaultChecked,
-			onCheckedChange,
-			...props,
-			children: t5
+	if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = /* @__PURE__ */ jsx(Checkbox.Indicator, {
+			className: ds_checkbox_module_default.indicator,
+			children: /* @__PURE__ */ jsx(DsIcon, {
+				icon: "check_small",
+				size: "tiny",
+				variant: "rounded"
+			})
 		});
-		$[15] = checkboxId;
-		$[16] = checked;
-		$[17] = defaultChecked;
-		$[18] = onCheckedChange;
-		$[19] = props;
-		$[20] = t5;
-		$[21] = t6;
-	} else t6 = $[21];
+		$[13] = t6;
+	} else t6 = $[13];
 	let t7;
-	if ($[22] !== checkboxId || $[23] !== label || $[24] !== labelInfo) {
-		t7 = label && /* @__PURE__ */ jsxs("label", {
-			className: ds_checkbox_module_default.label,
-			htmlFor: checkboxId,
-			children: [label, labelInfo && /* @__PURE__ */ jsx("div", {
+	let t8;
+	if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = /* @__PURE__ */ jsxs(Checkbox.Control, {
+			className: ds_checkbox_module_default.control,
+			children: [t6, /* @__PURE__ */ jsx(Checkbox.Indicator, {
+				className: ds_checkbox_module_default.indicator,
+				indeterminate: true,
+				children: /* @__PURE__ */ jsx(DsIcon, {
+					icon: "check_indeterminate_small",
+					size: "tiny",
+					variant: "rounded"
+				})
+			})]
+		});
+		t8 = /* @__PURE__ */ jsx(Checkbox.HiddenInput, { className: ds_checkbox_module_default.hiddenInput });
+		$[14] = t7;
+		$[15] = t8;
+	} else {
+		t7 = $[14];
+		t8 = $[15];
+	}
+	let t9;
+	if ($[16] !== label || $[17] !== labelInfo) {
+		t9 = (label || labelInfo) && /* @__PURE__ */ jsxs("div", {
+			className: ds_checkbox_module_default.labelColumn,
+			children: [label && /* @__PURE__ */ jsx(Checkbox.Label, {
+				className: ds_checkbox_module_default.label,
+				children: label
+			}), labelInfo && /* @__PURE__ */ jsx("div", {
 				className: ds_checkbox_module_default.labelInfo,
 				children: labelInfo
 			})]
 		});
-		$[22] = checkboxId;
-		$[23] = label;
-		$[24] = labelInfo;
-		$[25] = t7;
-	} else t7 = $[25];
-	let t8;
-	if ($[26] !== t3 || $[27] !== t6 || $[28] !== t7) {
-		t8 = /* @__PURE__ */ jsxs("div", {
+		$[16] = label;
+		$[17] = labelInfo;
+		$[18] = t9;
+	} else t9 = $[18];
+	let t10;
+	if ($[19] !== props || $[20] !== t3 || $[21] !== t4 || $[22] !== t5 || $[23] !== t9) {
+		t10 = /* @__PURE__ */ jsxs(Checkbox.Root, {
 			className: t3,
-			children: [t6, t7]
+			onCheckedChange: t4,
+			...props,
+			value: t5,
+			children: [
+				t7,
+				t8,
+				t9
+			]
 		});
-		$[26] = t3;
-		$[27] = t6;
-		$[28] = t7;
-		$[29] = t8;
-	} else t8 = $[29];
-	return t8;
+		$[19] = props;
+		$[20] = t3;
+		$[21] = t4;
+		$[22] = t5;
+		$[23] = t9;
+		$[24] = t10;
+	} else t10 = $[24];
+	return t10;
 };
 //#endregion
 //#region src/components/ds-checkbox/ds-checkbox.types.ts
 const checkboxVariants = ["default", "warning"];
 //#endregion
+//#region src/components/ds-checkbox-group/ds-checkbox-group.module.scss
+var ds_checkbox_group_module_default = {
+	"horizontal": "f9-vsG_horizontal",
+	"root": "f9-vsG_root",
+	"vertical": "f9-vsG_vertical"
+};
+//#endregion
+//#region src/components/ds-checkbox-group/ds-checkbox-group.tsx
+const DsCheckboxGroup = (t0) => {
+	const $ = c(12);
+	let children;
+	let className;
+	let props;
+	let t1;
+	if ($[0] !== t0) {
+		({orientation: t1, className, children, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = props;
+		$[4] = t1;
+	} else {
+		children = $[1];
+		className = $[2];
+		props = $[3];
+		t1 = $[4];
+	}
+	const t2 = ds_checkbox_group_module_default[t1 === void 0 ? "vertical" : t1];
+	let t3;
+	if ($[5] !== className || $[6] !== t2) {
+		t3 = classNames(ds_checkbox_group_module_default.root, t2, className);
+		$[5] = className;
+		$[6] = t2;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== children || $[9] !== props || $[10] !== t3) {
+		t4 = /* @__PURE__ */ jsx(Checkbox.Group, {
+			className: t3,
+			...props,
+			children
+		});
+		$[8] = children;
+		$[9] = props;
+		$[10] = t3;
+		$[11] = t4;
+	} else t4 = $[11];
+	return t4;
+};
+//#endregion
+//#region src/components/ds-checkbox-group/hooks/use-checkbox-select-all.ts
+/**
+* Headless helper for a "select all" checkbox bound to a checkbox group.
+*
+* - Derives tri-state (`true` / `false` / `'indeterminate'`) from current selection.
+* - Toggling selects or clears only selectable values; preserves any already-selected
+*   non-selectable values so bulk actions don't silently mutate protected items.
+*/
+function useCheckboxSelectAll({ value, allValues, onValueChange, isSelectable }) {
+	const selectableValues = isSelectable ? allValues.filter(isSelectable) : [...allValues];
+	const selectableSet = new Set(selectableValues);
+	const selectedCount = value.reduce((count, v) => selectableSet.has(v) ? count + 1 : count, 0);
+	const selectableCount = selectableValues.length;
+	let selectAllState = "indeterminate";
+	if (selectableCount === 0 || selectedCount === 0) selectAllState = false;
+	else if (selectedCount === selectableCount) selectAllState = true;
+	const onSelectAllChange = (checked) => {
+		const preserved = value.filter((v) => !selectableSet.has(v));
+		onValueChange(checked === true ? [...preserved, ...selectableValues] : preserved);
+	};
+	return {
+		selectAllState,
+		selectedCount,
+		selectableCount,
+		onSelectAllChange
+	};
+}
+//#endregion
 //#region src/components/ds-chip/ds-chip.module.scss
 var ds_chip_module_default = {
 	"chip": "w6Idwa_chip",
@@ -5812,7 +6080,7 @@ const DsChipGroup = ({ items, label = "Filtered by:", onClearAll, onItemDelete,
 			/* @__PURE__ */ jsxs(RadixDialog.Root, {
 				open: dialogOpen,
 				onOpenChange: setDialogOpen,
-				children: [/* @__PURE__ */ jsx(Root$1, { children: /* @__PURE__ */ jsx(RadixDialog.Title, {}) }), /* @__PURE__ */ jsx(RadixDialog.Portal, { children: /* @__PURE__ */ jsx(RadixDialog.Content, {
+				children: [/* @__PURE__ */ jsx(Root, { children: /* @__PURE__ */ jsx(RadixDialog.Title, {}) }), /* @__PURE__ */ jsx(RadixDialog.Portal, { children: /* @__PURE__ */ jsx(RadixDialog.Content, {
 					style: dialogStyle,
 					className: ds_chip_group_module_default.dialog,
 					children: /* @__PURE__ */ jsx("div", {
@@ -7663,7 +7931,7 @@ const DsDrawer = (t0) => {
 	} else t15 = $[24];
 	return t15;
 };
-const Header$1 = (t0) => {
+const Header$2 = (t0) => {
 	const $ = c(6);
 	const { style, className, children } = t0;
 	let t1;
@@ -7795,7 +8063,7 @@ const Body$1 = (t0) => {
 	} else t2 = $[5];
 	return t2;
 };
-const Footer$1 = (t0) => {
+const Footer$2 = (t0) => {
 	const $ = c(6);
 	const { style, className, children } = t0;
 	let t1;
@@ -7841,12 +8109,12 @@ const Actions$1 = (t0) => {
 	} else t2 = $[5];
 	return t2;
 };
-DsDrawer.Header = Header$1;
+DsDrawer.Header = Header$2;
 DsDrawer.Title = Title$1;
 DsDrawer.CloseTrigger = CloseTrigger$1;
 DsDrawer.Toolbar = Toolbar;
 DsDrawer.Body = Body$1;
-DsDrawer.Footer = Footer$1;
+DsDrawer.Footer = Footer$2;
 DsDrawer.Actions = Actions$1;
 //#endregion
 //#region src/components/ds-tag-filter/ds-tag-filter.module.scss
@@ -8459,7 +8727,7 @@ const DsModal = (t0) => {
 	} else t12 = $[19];
 	return t12;
 };
-const Header = (t0) => {
+const Header$1 = (t0) => {
 	const $ = c(6);
 	const { style, className, children } = t0;
 	let t1;
@@ -8562,7 +8830,7 @@ const Body = (t0) => {
 	} else t2 = $[5];
 	return t2;
 };
-const Footer = (t0) => {
+const Footer$1 = (t0) => {
 	const $ = c(6);
 	const { style, className, children } = t0;
 	let t1;
@@ -8608,11 +8876,11 @@ const Actions = (t0) => {
 	} else t2 = $[5];
 	return t2;
 };
-DsModal.Header = Header;
+DsModal.Header = Header$1;
 DsModal.Title = Title;
 DsModal.CloseTrigger = CloseTrigger;
 DsModal.Body = Body;
-DsModal.Footer = Footer;
+DsModal.Footer = Footer$1;
 DsModal.Actions = Actions;
 //#endregion
 //#region src/components/ds-tabs/components/ds-tabs-list/ds-tabs-list.module.scss
@@ -10778,13 +11046,16 @@ const useControlled = (value, setValue, defaultValue) => {
 //#region src/components/ds-time-picker/ds-time-picker.module.scss
 var ds_time_picker_module_default = {
 	"clearTrigger": "qkvYYW_clearTrigger",
+	"collapse": "qkvYYW_collapse",
+	"content": "qkvYYW_content",
+	"expand": "qkvYYW_expand",
 	"root": "qkvYYW_root"
 };
 //#endregion
 //#region src/components/ds-time-picker/ds-time-picker.tsx
 const DsTimePicker = (props) => {
-	const $ = c(68);
-	const { id, ref, className, placeholder, min, max, disabled, readOnly, hideClearButton: t0, disablePortal: t1, locale, slotProps } = props;
+	const $ = c(72);
+	const { id, ref, className, placeholder, min, max, disabled, readOnly, hideClearButton: t0, disablePortal: t1, locale, slotProps, onBlur } = props;
 	const hideClearButton = t0 === void 0 ? false : t0;
 	const disablePortal = t1 === void 0 ? false : t1;
 	const [value, setValue] = useControlled(props.value, props.onChange, props.defaultValue ?? null);
@@ -10857,12 +11128,13 @@ const DsTimePicker = (props) => {
 	} else t7 = $[12];
 	const resetInput = t7;
 	let t8;
-	if ($[13] !== resetInput || $[14] !== setValue || $[15] !== value) {
+	if ($[13] !== onBlur || $[14] !== resetInput || $[15] !== setValue || $[16] !== value) {
 		t8 = () => {
 			setIsFocused(false);
 			const inputVal_0 = inputRef.current?.value ?? "";
 			if (!inputVal_0) {
 				setValue(null);
+				onBlur?.();
 				return;
 			}
 			const parsed_0 = parseTime(inputVal_0);
@@ -10871,45 +11143,47 @@ const DsTimePicker = (props) => {
 				newDate_0.setHours(parsed_0.hours, parsed_0.minutes, 0, 0);
 				setValue(newDate_0);
 			} else resetInput();
+			onBlur?.();
 		};
-		$[13] = resetInput;
-		$[14] = setValue;
-		$[15] = value;
-		$[16] = t8;
-	} else t8 = $[16];
+		$[13] = onBlur;
+		$[14] = resetInput;
+		$[15] = setValue;
+		$[16] = value;
+		$[17] = t8;
+	} else t8 = $[17];
 	const handleBlur = t8;
 	let t9;
-	if ($[17] !== disabled || $[18] !== readOnly || $[19] !== setIsOpen) {
+	if ($[18] !== disabled || $[19] !== readOnly || $[20] !== setIsOpen) {
 		t9 = (details) => {
 			if (disabled || readOnly) return;
 			setIsOpen(details.open);
 		};
-		$[17] = disabled;
-		$[18] = readOnly;
-		$[19] = setIsOpen;
-		$[20] = t9;
-	} else t9 = $[20];
+		$[18] = disabled;
+		$[19] = readOnly;
+		$[20] = setIsOpen;
+		$[21] = t9;
+	} else t9 = $[21];
 	const handleOpenChange = t9;
 	const showClearButton = !hideClearButton && !disabled && !readOnly && !!value;
 	const Wrapper = disablePortal ? Fragment$1 : Portal;
 	let t10;
-	if ($[21] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[22] === Symbol.for("react.memo_cache_sentinel")) {
 		t10 = {
 			placement: "bottom-start",
 			gutter: 4
 		};
-		$[21] = t10;
-	} else t10 = $[21];
+		$[22] = t10;
+	} else t10 = $[22];
 	let t11;
-	if ($[22] !== className) {
+	if ($[23] !== className) {
 		t11 = classNames(ds_time_picker_module_default.root, className);
-		$[22] = className;
-		$[23] = t11;
-	} else t11 = $[23];
+		$[23] = className;
+		$[24] = t11;
+	} else t11 = $[24];
 	const t12 = placeholder ?? "hh:mm AM/PM";
 	const t13 = slotProps?.input;
 	let t14;
-	if ($[24] !== disabled || $[25] !== locale?.clearLabel || $[26] !== locale?.openLabel || $[27] !== readOnly || $[28] !== setValue || $[29] !== showClearButton || $[30] !== slotProps?.input?.slots?.endAdornment) {
+	if ($[25] !== disabled || $[26] !== locale?.clearLabel || $[27] !== locale?.openLabel || $[28] !== readOnly || $[29] !== setValue || $[30] !== showClearButton || $[31] !== slotProps?.input?.slots?.endAdornment) {
 		t14 = slotProps?.input?.slots?.endAdornment ?? /* @__PURE__ */ jsxs(Fragment, { children: [showClearButton && /* @__PURE__ */ jsx(DsButton, {
 			className: ds_time_picker_module_default.clearTrigger,
 			design: "v1.2",
@@ -10937,28 +11211,28 @@ const DsTimePicker = (props) => {
 				})
 			})
 		})] });
-		$[24] = disabled;
-		$[25] = locale?.clearLabel;
-		$[26] = locale?.openLabel;
-		$[27] = readOnly;
-		$[28] = setValue;
-		$[29] = showClearButton;
-		$[30] = slotProps?.input?.slots?.endAdornment;
-		$[31] = t14;
-	} else t14 = $[31];
+		$[25] = disabled;
+		$[26] = locale?.clearLabel;
+		$[27] = locale?.openLabel;
+		$[28] = readOnly;
+		$[29] = setValue;
+		$[30] = showClearButton;
+		$[31] = slotProps?.input?.slots?.endAdornment;
+		$[32] = t14;
+	} else t14 = $[32];
 	const t15 = slotProps?.input?.slots;
 	let t16;
-	if ($[32] !== t14 || $[33] !== t15) {
+	if ($[33] !== t14 || $[34] !== t15) {
 		t16 = {
 			endAdornment: t14,
 			...t15
 		};
-		$[32] = t14;
-		$[33] = t15;
-		$[34] = t16;
-	} else t16 = $[34];
+		$[33] = t14;
+		$[34] = t15;
+		$[35] = t16;
+	} else t16 = $[35];
 	let t17;
-	if ($[35] !== disabled || $[36] !== formattedValue || $[37] !== handleBlur || $[38] !== handleInputChange || $[39] !== id || $[40] !== readOnly || $[41] !== t12 || $[42] !== t13 || $[43] !== t16) {
+	if ($[36] !== disabled || $[37] !== formattedValue || $[38] !== handleBlur || $[39] !== handleInputChange || $[40] !== id || $[41] !== readOnly || $[42] !== t12 || $[43] !== t13 || $[44] !== t16) {
 		t17 = /* @__PURE__ */ jsx(DsTextInput, {
 			ref: inputRef,
 			id,
@@ -10972,19 +11246,19 @@ const DsTimePicker = (props) => {
 			...t13,
 			slots: t16
 		});
-		$[35] = disabled;
-		$[36] = formattedValue;
-		$[37] = handleBlur;
-		$[38] = handleInputChange;
-		$[39] = id;
-		$[40] = readOnly;
-		$[41] = t12;
-		$[42] = t13;
-		$[43] = t16;
-		$[44] = t17;
-	} else t17 = $[44];
+		$[36] = disabled;
+		$[37] = formattedValue;
+		$[38] = handleBlur;
+		$[39] = handleInputChange;
+		$[40] = id;
+		$[41] = readOnly;
+		$[42] = t12;
+		$[43] = t13;
+		$[44] = t16;
+		$[45] = t17;
+	} else t17 = $[45];
 	let t18;
-	if ($[45] !== ref || $[46] !== t11 || $[47] !== t17) {
+	if ($[46] !== ref || $[47] !== t11 || $[48] !== t17) {
 		t18 = /* @__PURE__ */ jsx(Popover.Anchor, {
 			asChild: true,
 			children: /* @__PURE__ */ jsx("div", {
@@ -10993,63 +11267,72 @@ const DsTimePicker = (props) => {
 				children: t17
 			})
 		});
-		$[45] = ref;
-		$[46] = t11;
-		$[47] = t17;
-		$[48] = t18;
-	} else t18 = $[48];
+		$[46] = ref;
+		$[47] = t11;
+		$[48] = t17;
+		$[49] = t18;
+	} else t18 = $[49];
 	const t19 = slotProps?.popover;
-	let t20;
-	if ($[49] !== max || $[50] !== min || $[51] !== setValue || $[52] !== value) {
-		t20 = timeScrollerAdapter(value, setValue, min, max);
-		$[49] = max;
-		$[50] = min;
-		$[51] = setValue;
-		$[52] = value;
-		$[53] = t20;
-	} else t20 = $[53];
+	const t20 = slotProps?.popover?.className;
 	let t21;
-	if ($[54] !== isOpen || $[55] !== t20) {
-		t21 = /* @__PURE__ */ jsx(TimeScroller, {
+	if ($[50] !== t20) {
+		t21 = classNames(ds_time_picker_module_default.content, t20);
+		$[50] = t20;
+		$[51] = t21;
+	} else t21 = $[51];
+	let t22;
+	if ($[52] !== max || $[53] !== min || $[54] !== setValue || $[55] !== value) {
+		t22 = timeScrollerAdapter(value, setValue, min, max);
+		$[52] = max;
+		$[53] = min;
+		$[54] = setValue;
+		$[55] = value;
+		$[56] = t22;
+	} else t22 = $[56];
+	let t23;
+	if ($[57] !== isOpen || $[58] !== t22) {
+		t23 = /* @__PURE__ */ jsx(TimeScroller, {
 			open: isOpen,
-			...t20
+			...t22
 		});
-		$[54] = isOpen;
-		$[55] = t20;
-		$[56] = t21;
-	} else t21 = $[56];
-	let t22;
-	if ($[57] !== t19 || $[58] !== t21) {
-		t22 = /* @__PURE__ */ jsx(Popover.Positioner, { children: /* @__PURE__ */ jsx(Popover.Content, {
+		$[57] = isOpen;
+		$[58] = t22;
+		$[59] = t23;
+	} else t23 = $[59];
+	let t24;
+	if ($[60] !== t19 || $[61] !== t21 || $[62] !== t23) {
+		t24 = /* @__PURE__ */ jsx(Popover.Positioner, { children: /* @__PURE__ */ jsx(Popover.Content, {
 			...t19,
-			children: t21
+			className: t21,
+			children: t23
 		}) });
-		$[57] = t19;
-		$[58] = t21;
-		$[59] = t22;
-	} else t22 = $[59];
-	let t23;
-	if ($[60] !== Wrapper || $[61] !== t22) {
-		t23 = /* @__PURE__ */ jsx(Wrapper, { children: t22 });
-		$[60] = Wrapper;
-		$[61] = t22;
+		$[60] = t19;
+		$[61] = t21;
 		$[62] = t23;
-	} else t23 = $[62];
-	let t24;
-	if ($[63] !== handleOpenChange || $[64] !== isOpen || $[65] !== t18 || $[66] !== t23) {
-		t24 = /* @__PURE__ */ jsxs(Popover.Root, {
+		$[63] = t24;
+	} else t24 = $[63];
+	let t25;
+	if ($[64] !== Wrapper || $[65] !== t24) {
+		t25 = /* @__PURE__ */ jsx(Wrapper, { children: t24 });
+		$[64] = Wrapper;
+		$[65] = t24;
+		$[66] = t25;
+	} else t25 = $[66];
+	let t26;
+	if ($[67] !== handleOpenChange || $[68] !== isOpen || $[69] !== t18 || $[70] !== t25) {
+		t26 = /* @__PURE__ */ jsxs(Popover.Root, {
 			open: isOpen,
 			onOpenChange: handleOpenChange,
 			positioning: t10,
-			children: [t18, t23]
-		});
-		$[63] = handleOpenChange;
-		$[64] = isOpen;
-		$[65] = t18;
-		$[66] = t23;
-		$[67] = t24;
-	} else t24 = $[67];
-	return t24;
+			children: [t18, t25]
+		});
+		$[67] = handleOpenChange;
+		$[68] = isOpen;
+		$[69] = t18;
+		$[70] = t25;
+		$[71] = t26;
+	} else t26 = $[71];
+	return t26;
 };
 //#endregion
 //#region src/components/ds-date-picker/ds-date-picker.module.scss
@@ -11285,7 +11568,7 @@ function _temp3$1(datePicker) {
 //#endregion
 //#region src/components/ds-date-picker/ds-date-picker.tsx
 const DsDatePicker = (t0) => {
-	const $ = c(121);
+	const $ = c(123);
 	let _defaultValue;
 	let _max;
 	let _min;
@@ -11294,6 +11577,7 @@ const DsDatePicker = (t0) => {
 	let disabled;
 	let id;
 	let locale;
+	let onBlur;
 	let onChange;
 	let onOpenChange;
 	let placeholder;
@@ -11305,7 +11589,7 @@ const DsDatePicker = (t0) => {
 	let t3;
 	let t4;
 	if ($[0] !== t0) {
-		({placeholder, className, withTime: t1, closeOnSelect: t2, disablePortal: t3, hideClearButton: t4, locale, slotProps, onChange, onOpenChange, value: _value, defaultValue: _defaultValue, min: _min, max: _max, disabled, readOnly, id, ...restProps} = t0);
+		({placeholder, className, withTime: t1, closeOnSelect: t2, disablePortal: t3, hideClearButton: t4, locale, slotProps, onChange, onOpenChange, onBlur, value: _value, defaultValue: _defaultValue, min: _min, max: _max, disabled, readOnly, id, ...restProps} = t0);
 		$[0] = t0;
 		$[1] = _defaultValue;
 		$[2] = _max;
@@ -11315,16 +11599,17 @@ const DsDatePicker = (t0) => {
 		$[6] = disabled;
 		$[7] = id;
 		$[8] = locale;
-		$[9] = onChange;
-		$[10] = onOpenChange;
-		$[11] = placeholder;
-		$[12] = readOnly;
-		$[13] = restProps;
-		$[14] = slotProps;
-		$[15] = t1;
-		$[16] = t2;
-		$[17] = t3;
-		$[18] = t4;
+		$[9] = onBlur;
+		$[10] = onChange;
+		$[11] = onOpenChange;
+		$[12] = placeholder;
+		$[13] = readOnly;
+		$[14] = restProps;
+		$[15] = slotProps;
+		$[16] = t1;
+		$[17] = t2;
+		$[18] = t3;
+		$[19] = t4;
 	} else {
 		_defaultValue = $[1];
 		_max = $[2];
@@ -11334,84 +11619,85 @@ const DsDatePicker = (t0) => {
 		disabled = $[6];
 		id = $[7];
 		locale = $[8];
-		onChange = $[9];
-		onOpenChange = $[10];
-		placeholder = $[11];
-		readOnly = $[12];
-		restProps = $[13];
-		slotProps = $[14];
-		t1 = $[15];
-		t2 = $[16];
-		t3 = $[17];
-		t4 = $[18];
+		onBlur = $[9];
+		onChange = $[10];
+		onOpenChange = $[11];
+		placeholder = $[12];
+		readOnly = $[13];
+		restProps = $[14];
+		slotProps = $[15];
+		t1 = $[16];
+		t2 = $[17];
+		t3 = $[18];
+		t4 = $[19];
 	}
 	const withTime = t1 === void 0 ? false : t1;
 	const closeOnSelect = t2 === void 0 ? true : t2;
 	const disablePortal = t3 === void 0 ? false : t3;
 	const hideClearButton = t4 === void 0 ? false : t4;
 	let t5;
-	if ($[19] !== _defaultValue) {
+	if ($[20] !== _defaultValue) {
 		t5 = toIntlDate(_defaultValue);
-		$[19] = _defaultValue;
-		$[20] = t5;
-	} else t5 = $[20];
+		$[20] = _defaultValue;
+		$[21] = t5;
+	} else t5 = $[21];
 	const defaultValue = t5;
 	let t6;
-	if ($[21] !== _value) {
+	if ($[22] !== _value) {
 		t6 = toIntlDate(_value);
-		$[21] = _value;
-		$[22] = t6;
-	} else t6 = $[22];
+		$[22] = _value;
+		$[23] = t6;
+	} else t6 = $[23];
 	let t7;
-	if ($[23] !== onChange) {
+	if ($[24] !== onChange) {
 		t7 = onChange ? (v) => onChange(fromIntlDate(v)) : void 0;
-		$[23] = onChange;
-		$[24] = t7;
-	} else t7 = $[24];
+		$[24] = onChange;
+		$[25] = t7;
+	} else t7 = $[25];
 	const [value, setValue] = useControlled(t6, t7, defaultValue ?? null);
 	let t8;
-	if ($[25] !== _min) {
+	if ($[26] !== _min) {
 		t8 = toIntlDate(_min);
-		$[25] = _min;
-		$[26] = t8;
-	} else t8 = $[26];
+		$[26] = _min;
+		$[27] = t8;
+	} else t8 = $[27];
 	const min = t8;
 	let t9;
-	if ($[27] !== _max) {
+	if ($[28] !== _max) {
 		t9 = toIntlDate(_max);
-		$[27] = _max;
-		$[28] = t9;
-	} else t9 = $[28];
+		$[28] = _max;
+		$[29] = t9;
+	} else t9 = $[29];
 	const max = t9;
 	const [isFocused, setIsFocused] = useState(false);
 	const [isOpen, setIsOpen] = useState(false);
 	const inputRef = useRef(null);
 	let t10;
-	if ($[29] !== value || $[30] !== withTime) {
+	if ($[30] !== value || $[31] !== withTime) {
 		t10 = formatDate(value, withTime);
-		$[29] = value;
-		$[30] = withTime;
-		$[31] = t10;
-	} else t10 = $[31];
+		$[30] = value;
+		$[31] = withTime;
+		$[32] = t10;
+	} else t10 = $[32];
 	const formattedValue = t10;
 	let t11;
 	let t12;
-	if ($[32] !== formattedValue || $[33] !== isFocused) {
+	if ($[33] !== formattedValue || $[34] !== isFocused) {
 		t11 = () => {
 			if (!isFocused && inputRef.current) inputRef.current.value = formattedValue;
 		};
 		t12 = [isFocused, formattedValue];
-		$[32] = formattedValue;
-		$[33] = isFocused;
-		$[34] = t11;
-		$[35] = t12;
+		$[33] = formattedValue;
+		$[34] = isFocused;
+		$[35] = t11;
+		$[36] = t12;
 	} else {
-		t11 = $[34];
-		t12 = $[35];
+		t11 = $[35];
+		t12 = $[36];
 	}
 	useEffect(t11, t12);
 	let t13;
-	if ($[36] !== max || $[37] !== min || $[38] !== setValue || $[39] !== withTime) {
+	if ($[37] !== max || $[38] !== min || $[39] !== setValue || $[40] !== withTime) {
 		t13 = (e) => {
 			const text = e.target.value;
 			if (validateDateString({
@@ -11421,33 +11707,33 @@ const DsDatePicker = (t0) => {
 				withTime
 			})) setValue(parseDate$1(text));
 		};
-		$[36] = max;
-		$[37] = min;
-		$[38] = setValue;
-		$[39] = withTime;
-		$[40] = t13;
-	} else t13 = $[40];
+		$[37] = max;
+		$[38] = min;
+		$[39] = setValue;
+		$[40] = withTime;
+		$[41] = t13;
+	} else t13 = $[41];
 	const handleInputChange = t13;
 	let t14;
-	if ($[41] !== formattedValue || $[42] !== value) {
+	if ($[42] !== formattedValue || $[43] !== value) {
 		t14 = () => {
 			if (inputRef.current) inputRef.current.value = value ? formattedValue : "";
 		};
-		$[41] = formattedValue;
-		$[42] = value;
-		$[43] = t14;
-	} else t14 = $[43];
+		$[42] = formattedValue;
+		$[43] = value;
+		$[44] = t14;
+	} else t14 = $[44];
 	const resetInput = t14;
 	let t15;
-	if ($[44] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[45] === Symbol.for("react.memo_cache_sentinel")) {
 		t15 = () => {
 			setIsFocused(true);
 		};
-		$[44] = t15;
-	} else t15 = $[44];
+		$[45] = t15;
+	} else t15 = $[45];
 	const handleFocus = t15;
 	let t16;
-	if ($[45] !== max || $[46] !== min || $[47] !== resetInput || $[48] !== setValue || $[49] !== withTime) {
+	if ($[46] !== max || $[47] !== min || $[48] !== onBlur || $[49] !== resetInput || $[50] !== setValue || $[51] !== withTime) {
 		t16 = () => {
 			setIsFocused(false);
 			const text_0 = inputRef.current?.value || "";
@@ -11458,63 +11744,65 @@ const DsDatePicker = (t0) => {
 				withTime
 			})) setValue(parseDate$1(text_0));
 			else resetInput();
+			onBlur?.();
 		};
-		$[45] = max;
-		$[46] = min;
-		$[47] = resetInput;
-		$[48] = setValue;
-		$[49] = withTime;
-		$[50] = t16;
-	} else t16 = $[50];
+		$[46] = max;
+		$[47] = min;
+		$[48] = onBlur;
+		$[49] = resetInput;
+		$[50] = setValue;
+		$[51] = withTime;
+		$[52] = t16;
+	} else t16 = $[52];
 	const handleBlur = t16;
 	const showClearButton = !hideClearButton && !disabled && !readOnly && !!value;
 	const Wrapper = disablePortal ? Fragment$1 : Portal;
 	let t17;
-	if ($[51] !== value) {
+	if ($[53] !== value) {
 		t17 = value ? [value] : void 0;
-		$[51] = value;
-		$[52] = t17;
-	} else t17 = $[52];
+		$[53] = value;
+		$[54] = t17;
+	} else t17 = $[54];
 	let t18;
-	if ($[53] !== defaultValue) {
+	if ($[55] !== defaultValue) {
 		t18 = defaultValue ? [defaultValue] : void 0;
-		$[53] = defaultValue;
-		$[54] = t18;
-	} else t18 = $[54];
+		$[55] = defaultValue;
+		$[56] = t18;
+	} else t18 = $[56];
 	let t19;
-	if ($[55] !== setValue) {
+	if ($[57] !== setValue) {
 		t19 = (details) => {
 			setValue(details.value[0] ?? null);
 		};
-		$[55] = setValue;
-		$[56] = t19;
-	} else t19 = $[56];
+		$[57] = setValue;
+		$[58] = t19;
+	} else t19 = $[58];
 	let t20;
-	if ($[57] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[59] === Symbol.for("react.memo_cache_sentinel")) {
 		t20 = {
 			placement: "bottom-start",
 			gutter: 4
 		};
-		$[57] = t20;
-	} else t20 = $[57];
+		$[59] = t20;
+	} else t20 = $[59];
 	const t21 = withTime ? false : closeOnSelect;
 	let t22;
-	if ($[58] !== isFocused || $[59] !== onOpenChange) {
+	if ($[60] !== isFocused || $[61] !== onOpenChange) {
 		t22 = (details_0) => {
 			if (!isFocused) {
 				setIsOpen(details_0.open);
 				onOpenChange?.(details_0.open);
 			}
 		};
-		$[58] = isFocused;
-		$[59] = onOpenChange;
-		$[60] = t22;
-	} else t22 = $[60];
+		$[60] = isFocused;
+		$[61] = onOpenChange;
+		$[62] = t22;
+	} else t22 = $[62];
 	const t23 = placeholder ?? (withTime ? "mm/dd/yyyy, hh:mm AM/PM" : "mm/dd/yyyy");
 	const t24 = slotProps?.input;
 	const t25 = slotProps?.input?.slots;
 	let t26;
-	if ($[61] !== disabled || $[62] !== locale?.clearLabel || $[63] !== setValue || $[64] !== showClearButton) {
+	if ($[63] !== disabled || $[64] !== locale?.clearLabel || $[65] !== setValue || $[66] !== showClearButton) {
 		t26 = showClearButton && /* @__PURE__ */ jsx(DatePicker.ClearTrigger, {
 			asChild: true,
 			onClick: () => setValue(null),
@@ -11531,23 +11819,23 @@ const DsDatePicker = (t0) => {
 				})
 			})
 		});
-		$[61] = disabled;
-		$[62] = locale?.clearLabel;
-		$[63] = setValue;
-		$[64] = showClearButton;
-		$[65] = t26;
-	} else t26 = $[65];
+		$[63] = disabled;
+		$[64] = locale?.clearLabel;
+		$[65] = setValue;
+		$[66] = showClearButton;
+		$[67] = t26;
+	} else t26 = $[67];
 	const t27 = locale?.openCalendarLabel ?? "Open calendar";
 	let t28;
-	if ($[66] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[68] === Symbol.for("react.memo_cache_sentinel")) {
 		t28 = /* @__PURE__ */ jsx(DsIcon, {
 			icon: "calendar_today",
 			size: "tiny"
 		});
-		$[66] = t28;
-	} else t28 = $[66];
+		$[68] = t28;
+	} else t28 = $[68];
 	let t29;
-	if ($[67] !== disabled || $[68] !== t27) {
+	if ($[69] !== disabled || $[70] !== t27) {
 		t29 = /* @__PURE__ */ jsx(DatePicker.Trigger, {
 			asChild: true,
 			children: /* @__PURE__ */ jsx(DsButton, {
@@ -11559,29 +11847,29 @@ const DsDatePicker = (t0) => {
 				children: t28
 			})
 		});
-		$[67] = disabled;
-		$[68] = t27;
-		$[69] = t29;
-	} else t29 = $[69];
+		$[69] = disabled;
+		$[70] = t27;
+		$[71] = t29;
+	} else t29 = $[71];
 	let t30;
-	if ($[70] !== t26 || $[71] !== t29) {
+	if ($[72] !== t26 || $[73] !== t29) {
 		t30 = /* @__PURE__ */ jsxs(Fragment, { children: [t26, t29] });
-		$[70] = t26;
-		$[71] = t29;
-		$[72] = t30;
-	} else t30 = $[72];
+		$[72] = t26;
+		$[73] = t29;
+		$[74] = t30;
+	} else t30 = $[74];
 	let t31;
-	if ($[73] !== t25 || $[74] !== t30) {
+	if ($[75] !== t25 || $[76] !== t30) {
 		t31 = {
 			...t25,
 			endAdornment: t30
 		};
-		$[73] = t25;
-		$[74] = t30;
-		$[75] = t31;
-	} else t31 = $[75];
+		$[75] = t25;
+		$[76] = t30;
+		$[77] = t31;
+	} else t31 = $[77];
 	let t32;
-	if ($[76] !== disabled || $[77] !== formattedValue || $[78] !== handleBlur || $[79] !== handleInputChange || $[80] !== id || $[81] !== readOnly || $[82] !== t23 || $[83] !== t24 || $[84] !== t31) {
+	if ($[78] !== disabled || $[79] !== formattedValue || $[80] !== handleBlur || $[81] !== handleInputChange || $[82] !== id || $[83] !== readOnly || $[84] !== t23 || $[85] !== t24 || $[86] !== t31) {
 		t32 = /* @__PURE__ */ jsx(DatePicker.Control, {
 			className: ds_date_picker_module_default.control,
 			children: /* @__PURE__ */ jsx(DsTextInput, {
@@ -11598,19 +11886,19 @@ const DsDatePicker = (t0) => {
 				slots: t31
 			})
 		});
-		$[76] = disabled;
-		$[77] = formattedValue;
-		$[78] = handleBlur;
-		$[79] = handleInputChange;
-		$[80] = id;
-		$[81] = readOnly;
-		$[82] = t23;
-		$[83] = t24;
-		$[84] = t31;
-		$[85] = t32;
-	} else t32 = $[85];
+		$[78] = disabled;
+		$[79] = formattedValue;
+		$[80] = handleBlur;
+		$[81] = handleInputChange;
+		$[82] = id;
+		$[83] = readOnly;
+		$[84] = t23;
+		$[85] = t24;
+		$[86] = t31;
+		$[87] = t32;
+	} else t32 = $[87];
 	let t33;
-	if ($[86] !== _max || $[87] !== _min || $[88] !== disabled || $[89] !== max || $[90] !== min || $[91] !== readOnly || $[92] !== setValue || $[93] !== slotProps?.timePicker || $[94] !== value || $[95] !== withTime) {
+	if ($[88] !== _max || $[89] !== _min || $[90] !== disabled || $[91] !== max || $[92] !== min || $[93] !== readOnly || $[94] !== setValue || $[95] !== slotProps?.timePicker || $[96] !== value || $[97] !== withTime) {
 		t33 = withTime && /* @__PURE__ */ jsx(DsTimePicker, {
 			value: fromIntlDate(value),
 			onChange: (v_0) => {
@@ -11630,37 +11918,37 @@ const DsDatePicker = (t0) => {
 				...slotProps?.timePicker?.slotProps
 			}
 		});
-		$[86] = _max;
-		$[87] = _min;
-		$[88] = disabled;
-		$[89] = max;
-		$[90] = min;
-		$[91] = readOnly;
-		$[92] = setValue;
-		$[93] = slotProps?.timePicker;
-		$[94] = value;
-		$[95] = withTime;
-		$[96] = t33;
-	} else t33 = $[96];
+		$[88] = _max;
+		$[89] = _min;
+		$[90] = disabled;
+		$[91] = max;
+		$[92] = min;
+		$[93] = readOnly;
+		$[94] = setValue;
+		$[95] = slotProps?.timePicker;
+		$[96] = value;
+		$[97] = withTime;
+		$[98] = t33;
+	} else t33 = $[98];
 	let t34;
-	if ($[97] !== t33) {
+	if ($[99] !== t33) {
 		t34 = /* @__PURE__ */ jsx(DayView, { children: t33 });
-		$[97] = t33;
-		$[98] = t34;
-	} else t34 = $[98];
+		$[99] = t33;
+		$[100] = t34;
+	} else t34 = $[100];
 	let t35;
 	let t36;
-	if ($[99] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[101] === Symbol.for("react.memo_cache_sentinel")) {
 		t35 = /* @__PURE__ */ jsx(MonthView, {});
 		t36 = /* @__PURE__ */ jsx(YearView, {});
-		$[99] = t35;
-		$[100] = t36;
+		$[101] = t35;
+		$[102] = t36;
 	} else {
-		t35 = $[99];
-		t36 = $[100];
+		t35 = $[101];
+		t36 = $[102];
 	}
 	let t37;
-	if ($[101] !== t34) {
+	if ($[103] !== t34) {
 		t37 = /* @__PURE__ */ jsx(DatePicker.Positioner, {
 			className: ds_date_picker_module_default.positioner,
 			children: /* @__PURE__ */ jsxs(DatePicker.Content, {
@@ -11672,18 +11960,18 @@ const DsDatePicker = (t0) => {
 				]
 			})
 		});
-		$[101] = t34;
-		$[102] = t37;
-	} else t37 = $[102];
+		$[103] = t34;
+		$[104] = t37;
+	} else t37 = $[104];
 	let t38;
-	if ($[103] !== Wrapper || $[104] !== t37) {
+	if ($[105] !== Wrapper || $[106] !== t37) {
 		t38 = /* @__PURE__ */ jsx(Wrapper, { children: t37 });
-		$[103] = Wrapper;
-		$[104] = t37;
-		$[105] = t38;
-	} else t38 = $[105];
+		$[105] = Wrapper;
+		$[106] = t37;
+		$[107] = t38;
+	} else t38 = $[107];
 	let t39;
-	if ($[106] !== className || $[107] !== disabled || $[108] !== isOpen || $[109] !== max || $[110] !== min || $[111] !== readOnly || $[112] !== restProps || $[113] !== t17 || $[114] !== t18 || $[115] !== t19 || $[116] !== t21 || $[117] !== t22 || $[118] !== t32 || $[119] !== t38) {
+	if ($[108] !== className || $[109] !== disabled || $[110] !== isOpen || $[111] !== max || $[112] !== min || $[113] !== readOnly || $[114] !== restProps || $[115] !== t17 || $[116] !== t18 || $[117] !== t19 || $[118] !== t21 || $[119] !== t22 || $[120] !== t32 || $[121] !== t38) {
 		t39 = /* @__PURE__ */ jsxs(DatePicker.Root, {
 			className,
 			value: t17,
@@ -11701,22 +11989,22 @@ const DsDatePicker = (t0) => {
 			...restProps,
 			children: [t32, t38]
 		});
-		$[106] = className;
-		$[107] = disabled;
-		$[108] = isOpen;
-		$[109] = max;
-		$[110] = min;
-		$[111] = readOnly;
-		$[112] = restProps;
-		$[113] = t17;
-		$[114] = t18;
-		$[115] = t19;
-		$[116] = t21;
-		$[117] = t22;
-		$[118] = t32;
-		$[119] = t38;
-		$[120] = t39;
-	} else t39 = $[120];
+		$[108] = className;
+		$[109] = disabled;
+		$[110] = isOpen;
+		$[111] = max;
+		$[112] = min;
+		$[113] = readOnly;
+		$[114] = restProps;
+		$[115] = t17;
+		$[116] = t18;
+		$[117] = t19;
+		$[118] = t21;
+		$[119] = t22;
+		$[120] = t32;
+		$[121] = t38;
+		$[122] = t39;
+	} else t39 = $[122];
 	return t39;
 };
 //#endregion
@@ -12814,7 +13102,7 @@ const DsDialog = ({ open, onOpenChange, title, hideTitle, description, hideDescr
 			children: [
 				/* @__PURE__ */ jsx(RadixDialog.Title, {
 					asChild: true,
-					children: hideTitle ? /* @__PURE__ */ jsx(Root$1, { children: /* @__PURE__ */ jsx(RadixDialog.Title, {
+					children: hideTitle ? /* @__PURE__ */ jsx(Root, { children: /* @__PURE__ */ jsx(RadixDialog.Title, {
 						className: ds_dialog_module_default.title,
 						children: title
 					}) }) : /* @__PURE__ */ jsx(RadixDialog.Title, {
@@ -12824,7 +13112,7 @@ const DsDialog = ({ open, onOpenChange, title, hideTitle, description, hideDescr
 				}),
 				description && /* @__PURE__ */ jsx(RadixDialog.Description, {
 					asChild: true,
-					children: hideDescription ? /* @__PURE__ */ jsx(Root$1, { children: /* @__PURE__ */ jsx(RadixDialog.Description, {
+					children: hideDescription ? /* @__PURE__ */ jsx(Root, { children: /* @__PURE__ */ jsx(RadixDialog.Description, {
 						className: ds_dialog_module_default.description,
 						children: description
 					}) }) : /* @__PURE__ */ jsx(RadixDialog.Description, {
@@ -14185,22 +14473,24 @@ const filterStatuses = [
 ];
 //#endregion
 //#region src/components/ds-grid/ds-grid.tsx
-/**
-* Design system Grid component
-*/
-const DsGrid = ({ children, columns, rows, className }) => {
+const DsGridBase = ({ children, columns, rows, gutter, margin, className, style }) => {
+	const gridClass = classNames("ds-grid", {
+		[`ds-grid-cols-${String(columns)}`]: columns,
+		[`ds-grid-rows-${String(rows)}`]: rows
+	}, className);
+	const cssVars = {};
+	if (gutter !== void 0) cssVars["--ds-grid-gutter"] = typeof gutter === "number" ? `${String(gutter)}px` : gutter;
+	if (margin !== void 0) cssVars["--ds-grid-margin"] = typeof margin === "number" ? `${String(margin)}px` : margin;
 	return /* @__PURE__ */ jsx("div", {
-		className: classNames("ds-grid", {
-			[`ds-grid-cols-${String(columns)}`]: columns,
-			[`ds-grid-rows-${String(rows)}`]: rows
-		}, className),
+		className: gridClass,
+		style: {
+			...style,
+			...cssVars
+		},
 		children
 	});
 };
-/**
-* Design system GridItem component
-*/
-const DsGridItem = ({ children, colSpan, colStart, rowSpan, rowStart, className }) => {
+const DsGridItemBase = ({ children, colSpan, colStart, rowSpan, rowStart, className }) => {
 	return /* @__PURE__ */ jsx("div", {
 		className: classNames({
 			[`ds-grid-col-span-${String(colSpan)}`]: colSpan,
@@ -14212,6 +14502,10 @@ const DsGridItem = ({ children, colSpan, colStart, rowSpan, rowStart, className
 	});
 };
 //#endregion
+//#region src/components/ds-grid/index.ts
+const DsGrid = withResponsiveProps(DsGridBase, ["gutter", "margin"]);
+const DsGridItem = withResponsiveProps(DsGridItemBase, ["colSpan", "rowSpan"]);
+//#endregion
 //#region src/components/ds-key-value-pair/ds-key-value-pair.module.scss
 var ds_key_value_pair_module_default = {
 	"editorSlot": "_6K_oIW_editorSlot",
@@ -15408,7 +15702,7 @@ var ds_radio_group_module_default = {
 /**
 * Root component - provides radio group context
 */
-const Root$3 = (t0) => {
+const Root$2 = (t0) => {
 	const $ = c(14);
 	let children;
 	let className;
@@ -15459,7 +15753,7 @@ const Root$3 = (t0) => {
 * Item component - renders a single radio button with optional label
 */
 const Item$1 = (t0) => {
-	const $ = c(22);
+	const $ = c(24);
 	let children;
 	let className;
 	let label;
@@ -15513,22 +15807,28 @@ const Item$1 = (t0) => {
 		t3 = $[11];
 	}
 	let t4;
-	if ($[12] !== children || $[13] !== label || $[14] !== labelInfo) {
-		t4 = label ? /* @__PURE__ */ jsxs(RadioGroup.ItemText, {
+	if ($[12] !== children || $[13] !== label) {
+		t4 = label ? /* @__PURE__ */ jsx(RadioGroup.ItemText, {
 			className: ds_radio_group_module_default.radioLabel,
-			children: [label, labelInfo && /* @__PURE__ */ jsx("div", {
-				className: ds_radio_group_module_default.labelInfo,
-				children: labelInfo
-			})]
+			children: label
 		}) : children;
 		$[12] = children;
 		$[13] = label;
-		$[14] = labelInfo;
-		$[15] = t4;
-	} else t4 = $[15];
+		$[14] = t4;
+	} else t4 = $[14];
 	let t5;
-	if ($[16] !== props || $[17] !== style || $[18] !== t1 || $[19] !== t4 || $[20] !== value) {
-		t5 = /* @__PURE__ */ jsxs(RadioGroup.Item, {
+	if ($[15] !== labelInfo) {
+		t5 = !!labelInfo && /* @__PURE__ */ jsx(DsTypography, {
+			variant: "body-xs-reg",
+			className: ds_radio_group_module_default.labelInfo,
+			children: labelInfo
+		});
+		$[15] = labelInfo;
+		$[16] = t5;
+	} else t5 = $[16];
+	let t6;
+	if ($[17] !== props || $[18] !== style || $[19] !== t1 || $[20] !== t4 || $[21] !== t5 || $[22] !== value) {
+		t6 = /* @__PURE__ */ jsxs(RadioGroup.Item, {
 			value,
 			className: t1,
 			style,
@@ -15536,17 +15836,19 @@ const Item$1 = (t0) => {
 			children: [
 				t2,
 				t3,
-				t4
+				t4,
+				t5
 			]
 		});
-		$[16] = props;
-		$[17] = style;
-		$[18] = t1;
-		$[19] = t4;
-		$[20] = value;
+		$[17] = props;
+		$[18] = style;
+		$[19] = t1;
+		$[20] = t4;
 		$[21] = t5;
-	} else t5 = $[21];
-	return t5;
+		$[22] = value;
+		$[23] = t6;
+	} else t6 = $[23];
+	return t6;
 };
 /**
 * DEPRECATED: Legacy DsRadioGroup component with options array
@@ -15555,61 +15857,50 @@ const Item$1 = (t0) => {
 */
 /* c8 ignore start */
 const DsRadioGroupLegacy = (t0) => {
-	const $ = c(18);
-	let className;
-	let defaultValue;
-	let onValueChange;
-	let options;
-	let props;
-	let value;
-	if ($[0] !== t0) {
-		({options, value, defaultValue, onValueChange, className, ...props} = t0);
-		$[0] = t0;
-		$[1] = className;
-		$[2] = defaultValue;
-		$[3] = onValueChange;
-		$[4] = options;
-		$[5] = props;
-		$[6] = value;
-	} else {
-		className = $[1];
-		defaultValue = $[2];
-		onValueChange = $[3];
-		options = $[4];
-		props = $[5];
-		value = $[6];
-	}
+	const $ = c(14);
+	const { options, value, defaultValue, onValueChange, disabled, className, style } = t0;
 	let t1;
-	if ($[7] !== className) {
+	if ($[0] !== className) {
 		t1 = classNames(ds_radio_group_module_default.radioGroupRoot, className);
-		$[7] = className;
-		$[8] = t1;
-	} else t1 = $[8];
-	let t2;
-	if ($[9] !== options) {
-		t2 = options.map(_temp$1);
-		$[9] = options;
-		$[10] = t2;
-	} else t2 = $[10];
+		$[0] = className;
+		$[1] = t1;
+	} else t1 = $[1];
+	const t2 = value ?? void 0;
 	let t3;
-	if ($[11] !== defaultValue || $[12] !== onValueChange || $[13] !== props || $[14] !== t1 || $[15] !== t2 || $[16] !== value) {
-		t3 = /* @__PURE__ */ jsx(RadioGroupPrimitive.Root, {
+	if ($[2] !== onValueChange) {
+		t3 = (details) => {
+			if (details.value !== null) onValueChange?.(details.value);
+		};
+		$[2] = onValueChange;
+		$[3] = t3;
+	} else t3 = $[3];
+	let t4;
+	if ($[4] !== options) {
+		t4 = options.map(_temp$1);
+		$[4] = options;
+		$[5] = t4;
+	} else t4 = $[5];
+	let t5;
+	if ($[6] !== defaultValue || $[7] !== disabled || $[8] !== style || $[9] !== t1 || $[10] !== t2 || $[11] !== t3 || $[12] !== t4) {
+		t5 = /* @__PURE__ */ jsx(RadioGroup.Root, {
 			className: t1,
-			value,
+			style,
+			value: t2,
 			defaultValue,
-			onValueChange,
-			...props,
-			children: t2
+			disabled,
+			onValueChange: t3,
+			children: t4
 		});
-		$[11] = defaultValue;
-		$[12] = onValueChange;
-		$[13] = props;
-		$[14] = t1;
-		$[15] = t2;
-		$[16] = value;
-		$[17] = t3;
-	} else t3 = $[17];
-	return t3;
+		$[6] = defaultValue;
+		$[7] = disabled;
+		$[8] = style;
+		$[9] = t1;
+		$[10] = t2;
+		$[11] = t3;
+		$[12] = t4;
+		$[13] = t5;
+	} else t5 = $[13];
+	return t5;
 };
 /* c8 ignore stop */
 /**
@@ -15622,29 +15913,36 @@ const DsRadioGroupLegacy = (t0) => {
 * </DsRadioGroup.Root>
 */
 const DsRadioGroup = {
-	Root: Root$3,
+	Root: Root$2,
 	Item: Item$1
 };
 function _temp$1(option) {
-	return /* @__PURE__ */ jsxs("div", {
+	return /* @__PURE__ */ jsxs(RadioGroup.Item, {
+		value: option.value,
+		disabled: option.disabled,
 		className: ds_radio_group_module_default.radioItemContainer,
-		children: [/* @__PURE__ */ jsx(RadioGroupPrimitive.Item, {
-			className: ds_radio_group_module_default.radioItem,
-			value: option.value,
-			disabled: option.disabled,
-			id: option.value,
-			children: /* @__PURE__ */ jsx("div", {
-				className: ds_radio_group_module_default.radioItemWrapper,
-				children: /* @__PURE__ */ jsx(RadioGroupPrimitive.Indicator, { className: ds_radio_group_module_default.radioIndicator })
-			})
-		}), /* @__PURE__ */ jsxs("label", {
-			className: ds_radio_group_module_default.radioLabel,
-			htmlFor: option.value,
-			children: [option.label, option.labelInfo && /* @__PURE__ */ jsx("div", {
+		children: [
+			/* @__PURE__ */ jsx(RadioGroup.ItemControl, {
+				className: ds_radio_group_module_default.radioItem,
+				children: /* @__PURE__ */ jsx("div", {
+					className: ds_radio_group_module_default.radioItemWrapper,
+					children: /* @__PURE__ */ jsx("div", {
+						className: ds_radio_group_module_default.radioIndicator,
+						"data-part": "indicator"
+					})
+				})
+			}),
+			/* @__PURE__ */ jsx(RadioGroup.ItemHiddenInput, {}),
+			/* @__PURE__ */ jsx(RadioGroup.ItemText, {
+				className: ds_radio_group_module_default.radioLabel,
+				children: option.label
+			}),
+			!!option.labelInfo && /* @__PURE__ */ jsx(DsTypography, {
+				variant: "body-xs-reg",
 				className: ds_radio_group_module_default.labelInfo,
 				children: option.labelInfo
-			})]
-		})]
+			})
+		]
 	}, option.value);
 }
 //#endregion
@@ -15661,7 +15959,7 @@ var ds_segment_group_module_default = {
 /**
 * Root component - provides segment group context
 */
-const Root$2 = (t0) => {
+const Root$1 = (t0) => {
 	const $ = c(17);
 	let children;
 	let className;
@@ -15855,7 +16153,7 @@ const ItemText = (t0) => {
 * </DsSegmentGroup.Root>
 */
 const DsSegmentGroup = {
-	Root: Root$2,
+	Root: Root$1,
 	Item,
 	ItemText
 };
@@ -16127,15 +16425,15 @@ var ds_smart_tabs_module_default = {
 //#endregion
 //#region src/components/ds-smart-tabs/ds-smart-tabs.tsx
 const colorMap = {
-	"dark-blue": "var(--color-background-info-strong)",
-	"light-blue": "var(--color-background-active-moderate)",
-	"dark-gray": "var(--color-background-brand)",
-	green: "var(--color-background-success-strong)",
-	fuchsia: "var(--color-data-fuchsia)",
-	blue: "var(--color-icon-information-secondary)",
-	gray: "var(--color-icon-information-main)",
-	red: "var(--color-icon-warning)",
-	amber: "var(--color-data-amber)"
+	"dark-blue": "var(--background-info-strong)",
+	"light-blue": "var(--background-active-moderate)",
+	"dark-gray": "var(--background-brand)",
+	green: "var(--background-success-strong)",
+	fuchsia: "var(--color-dap-data-fuchsia)",
+	blue: "var(--icon-information-secondary)",
+	gray: "var(--icon-information-main)",
+	red: "var(--icon-warning)",
+	amber: "var(--color-dap-data-amber)"
 };
 const SmartTabsContext = createContext(null);
 const useSmartTabsContext = () => {
@@ -17797,7 +18095,6 @@ const DsTableBulkActions = ({ numSelectedRows, actions, onClearSelection }) => {
 //#endregion
 //#region src/components/ds-table/components/ds-table-header/ds-table-header.module.scss
 var ds_table_header_module_default = {
-	"expandColumn": "-2rCNG_expandColumn",
 	"headerCell": "-2rCNG_headerCell",
 	"headerRow": "-2rCNG_headerRow",
 	"headerRowNoBorder": "-2rCNG_headerRowNoBorder",
@@ -17849,7 +18146,7 @@ const getColumnSizeStyle = (columnSize, virtualized) => {
 //#endregion
 //#region src/components/ds-table/components/ds-table-header/ds-table-header.tsx
 const DsTableHeader = ({ table }) => {
-	const { stickyHeader, bordered, expandable, selectable, reorderable, showSelectAllCheckbox, virtualized } = useDsTableContext();
+	const { stickyHeader, bordered, selectable, reorderable, showSelectAllCheckbox, virtualized } = useDsTableContext();
 	return /* @__PURE__ */ jsx(TableHeader, {
 		className: classNames(stickyHeader && ds_table_header_module_default.stickyHeader, virtualized && ds_table_header_module_default.virtualizedHeader),
 		children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsxs(TableRow, {
@@ -17860,26 +18157,24 @@ const DsTableHeader = ({ table }) => {
 					children: showSelectAllCheckbox && /* @__PURE__ */ jsx(DsCheckbox, {
 						className: ds_table_shared_module_default.checkboxContainer,
 						checked: table.getIsAllRowsSelected() ? true : table.getIsSomeRowsSelected() ? "indeterminate" : false,
-						onClick: (e) => {
-							e.stopPropagation();
-							table.getToggleAllRowsSelectedHandler()(e);
-						}
+						onCheckedChange: (checked) => table.toggleAllRowsSelected(!!checked),
+						onClick: (e) => e.stopPropagation()
 					})
 				}),
-				expandable && /* @__PURE__ */ jsx(TableHead, { className: classNames(ds_table_header_module_default.headerCell, ds_table_header_module_default.expandColumn) }),
 				reorderable && /* @__PURE__ */ jsx(TableHead, {
 					className: classNames(ds_table_header_module_default.headerCell, ds_table_header_module_default.reorderColumn),
 					children: "Order"
 				}),
 				headerGroup.headers.map((header) => {
 					const headerStyle = getColumnSizeStyle(header.column.getSize(), virtualized);
+					const canSort = header.column.getCanSort();
 					return /* @__PURE__ */ jsx(TableHead, {
-						className: classNames(ds_table_header_module_default.headerCell, header.column.getCanSort() && ds_table_header_module_default.sortableHeader),
+						className: classNames(ds_table_header_module_default.headerCell, canSort && ds_table_header_module_default.sortableHeader),
 						onClick: header.column.getToggleSortingHandler(),
 						style: headerStyle,
 						children: header.isPlaceholder ? null : /* @__PURE__ */ jsxs("div", {
 							className: ds_table_header_module_default.headerSortContainer,
-							children: [/* @__PURE__ */ jsx("div", { children: flexRender(header.column.columnDef.header, header.getContext()) }), header.column.getCanSort() && /* @__PURE__ */ jsx("div", {
+							children: [/* @__PURE__ */ jsx("div", { children: flexRender(header.column.columnDef.header, header.getContext()) }), canSort && /* @__PURE__ */ jsx("div", {
 								className: ds_table_header_module_default.pageButtonIconContainer,
 								children: {
 									asc: /* @__PURE__ */ jsx(DsIcon, {
@@ -18010,47 +18305,9 @@ const DsTableRowSelectableCell = ({ row, isSelected, className }) => {
 			className: ds_table_shared_module_default.checkboxContainer,
 			checked: isSelected,
 			disabled: !row.getCanSelect(),
-			onClick: (e) => {
-				e.stopPropagation();
-				row.getToggleSelectedHandler()(e);
-			},
-			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",
-	"cell": "enUIjW_cell"
-};
-//#endregion
-//#region src/components/ds-table/components/ds-table-row-expandable-cell/ds-table-row-expandable-cell.tsx
-const DsTableRowExpandableCell = ({ row, className, buttonClassName }) => {
-	const { expandable } = useDsTableContext();
-	const isExpanded = row.getIsExpanded();
-	const isExpandable = typeof expandable === "function" ? expandable(row.original) : expandable;
-	return /* @__PURE__ */ jsx(TableCell, {
-		className: classNames(ds_table_row_expandable_cell_module_default.cell, className),
-		children: isExpandable && /* @__PURE__ */ jsx(DsButton, {
-			design: "v1.2",
-			buttonType: "tertiary",
-			size: "small",
-			className: classNames(ds_table_row_expandable_cell_module_default.button, buttonClassName),
-			onClick: (e) => {
-				e.stopPropagation();
-				row.toggleExpanded();
-			},
-			onDoubleClick: (e) => {
-				e.stopPropagation();
-			},
-			children: /* @__PURE__ */ jsx(DsIcon, {
-				icon: "chevron_right",
-				size: "small",
-				className: classNames(ds_table_shared_module_default.pageButtonIcon, isExpanded && "rotate-90")
-			})
+			onCheckedChange: (checked) => row.toggleSelected(!!checked),
+			onClick: (e) => e.stopPropagation(),
+			onDoubleClick: (e) => e.stopPropagation()
 		})
 	});
 };
@@ -18062,7 +18319,6 @@ var ds_table_row_module_default = {
 	"expandableCell": "t8OZCq_expandableCell",
 	"expanded": "t8OZCq_expanded",
 	"expandedRow": "t8OZCq_expandedRow",
-	"expandToggleButton": "t8OZCq_expandToggleButton",
 	"isDragging": "t8OZCq_isDragging",
 	"rowDragHandle": "t8OZCq_rowDragHandle",
 	"rowNoBorder": "t8OZCq_rowNoBorder",
@@ -18073,6 +18329,10 @@ var ds_table_row_module_default = {
 	"tableCell": "t8OZCq_tableCell",
 	"tableRow": "t8OZCq_tableRow"
 };
+/**
+* Column id used for the synthetic expander column injected when `expandable` is set.
+*/
+const EXPANDER_COLUMN_ID = "expander";
 //#endregion
 //#region src/components/ds-table/components/ds-table-row/ds-table-row.tsx
 const DsRowDragHandle = ({ isDragging, attributes, listeners }) => {
@@ -18089,9 +18349,8 @@ const DsRowDragHandle = ({ isDragging, attributes, listeners }) => {
 	});
 };
 const DsTableRow = ({ ref, row, isSelected }) => {
-	const { expandable, selectable, reorderable, onRowClick, onRowDoubleClick, renderExpandedRow, bordered, rowSize, primaryRowActions, secondaryRowActions, activeRowId } = useDsTableContext();
+	const { selectable, reorderable, onRowClick, onRowDoubleClick, renderExpandedRow, bordered, rowSize, primaryRowActions, secondaryRowActions, activeRowId } = useDsTableContext();
 	const isExpanded = row.getIsExpanded();
-	const isExpandable = typeof expandable === "function" ? expandable(row.original) : expandable;
 	const isActive = activeRowId === row.id;
 	const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
 		id: row.id,
@@ -18101,7 +18360,7 @@ const DsTableRow = ({ ref, row, isSelected }) => {
 		transform: CSS.Transform.toString(transform),
 		transition,
 		...isDragging ? {
-			background: "var(--action-active-light)",
+			background: "var(--color-dap-purple-200)",
 			boxShadow: "0 0 12px 0 rgba(0, 102, 250, 0.60)",
 			zIndex: 1
 		} : {},
@@ -18124,11 +18383,6 @@ const DsTableRow = ({ ref, row, isSelected }) => {
 				isSelected,
 				className: ds_table_row_module_default.selectableCell
 			}),
-			expandable && /* @__PURE__ */ jsx(DsTableRowExpandableCell, {
-				row,
-				className: ds_table_row_module_default.expandableCell,
-				buttonClassName: ds_table_row_module_default.expandToggleButton
-			}),
 			reorderable && /* @__PURE__ */ jsx(DsRowDragHandle, {
 				isDragging,
 				attributes,
@@ -18138,7 +18392,7 @@ const DsTableRow = ({ ref, row, isSelected }) => {
 				const isLastColumn = idx === row.getVisibleCells().length - 1;
 				const cellStyle = getColumnSizeStyle(cell.column.getSize());
 				return /* @__PURE__ */ jsx(TableCell, {
-					className: ds_table_row_module_default.tableCell,
+					className: classNames(ds_table_row_module_default.tableCell, cell.column.id === "expander" && ds_table_row_module_default.expandableCell),
 					style: cellStyle,
 					children: isLastColumn ? /* @__PURE__ */ jsx(DsTableCell, {
 						row,
@@ -18155,13 +18409,39 @@ const DsTableRow = ({ ref, row, isSelected }) => {
 	}), isExpanded && renderExpandedRow && /* @__PURE__ */ jsx(TableRow, {
 		className: ds_table_row_module_default.expandedRow,
 		children: /* @__PURE__ */ jsx(TableCell, {
-			colSpan: row.getVisibleCells().length + (selectable ? 1 : 0) + (isExpandable ? 1 : 0) + (reorderable ? 1 : 0),
+			colSpan: row.getVisibleCells().length + (selectable ? 1 : 0) + (reorderable ? 1 : 0),
 			className: ds_table_row_module_default.tableCell,
 			children: renderExpandedRow(row.original)
 		})
 	})] });
 };
 //#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__ */ jsx(DsButton, {
+		design: "v1.2",
+		buttonType: "tertiary",
+		size: "small",
+		className: classNames(ds_table_row_expandable_cell_module_default.button, buttonClassName),
+		onClick: (e) => {
+			e.stopPropagation();
+			row.toggleExpanded();
+		},
+		onDoubleClick: (e) => {
+			e.stopPropagation();
+		},
+		children: /* @__PURE__ */ jsx(DsIcon, {
+			icon: "chevron_right",
+			size: "small",
+			className: classNames(ds_table_shared_module_default.pageButtonIcon, isExpanded && "rotate-90")
+		})
+	});
+};
+//#endregion
 //#region src/components/ds-table/hooks/use-drag-and-drop.tsx
 const DragWrapper = ({ children, onDragEnd, sensors }) => /* @__PURE__ */ jsx(DndContext, {
 	collisionDetection: closestCenter,
@@ -18230,7 +18510,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 { selectable, expandable, bordered, rowSize, activeRowId, primaryRowActions, secondaryRowActions, renderExpandedRow, onRowClick, onRowDoubleClick } = useDsTableContext();
+	const { selectable, bordered, rowSize, activeRowId, primaryRowActions, secondaryRowActions, renderExpandedRow, onRowClick, onRowDoubleClick } = useDsTableContext();
 	const isExpanded = row.getIsExpanded();
 	const isActive = activeRowId === row.id;
 	return /* @__PURE__ */ jsx(TableRow, {
@@ -18252,33 +18532,26 @@ const DsTableRowVirtualized = ({ row, isSelected, rowsMapRef, rowHeightsMapRef,
 		}, isExpandedRowContent && ds_table_row_virtualized_module_default.expandedRowContent, onRowClick && ds_table_row_virtualized_module_default.clickableRow, !bordered && ds_table_row_virtualized_module_default.rowNoBorder, isExpanded && ds_table_row_virtualized_module_default.expanded),
 		onClick: isExpandedRowContent ? void 0 : () => onRowClick?.(row.original),
 		onDoubleClick: isExpandedRowContent ? void 0 : () => onRowDoubleClick?.(row.original),
-		children: isExpandedRowContent ? /* @__PURE__ */ jsx(TableCell, { children: renderExpandedRow?.(row.original) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-			selectable && /* @__PURE__ */ jsx(DsTableRowSelectableCell, {
-				row,
-				isSelected,
-				className: ds_table_row_virtualized_module_default.selectableCell
-			}),
-			expandable && /* @__PURE__ */ jsx(DsTableRowExpandableCell, {
-				row,
-				className: ds_table_row_virtualized_module_default.expandableCell
-			}),
-			row.getVisibleCells().map((cell, idx) => {
-				const isLastColumn = idx === row.getVisibleCells().length - 1;
-				return /* @__PURE__ */ jsx(TableCell, {
-					style: getColumnSizeStyle(cell.column.getSize(), true),
-					className: ds_table_row_virtualized_module_default.cell,
-					children: isLastColumn ? /* @__PURE__ */ jsx(DsTableCell, {
-						row,
-						cell,
-						primaryRowActions,
-						secondaryRowActions
-					}) : /* @__PURE__ */ jsx(DsTableCell, {
-						row,
-						cell
-					})
-				}, cell.id);
-			})
-		] })
+		children: isExpandedRowContent ? /* @__PURE__ */ jsx(TableCell, { children: renderExpandedRow?.(row.original) }) : /* @__PURE__ */ jsxs(Fragment, { children: [selectable && /* @__PURE__ */ jsx(DsTableRowSelectableCell, {
+			row,
+			isSelected,
+			className: ds_table_row_virtualized_module_default.selectableCell
+		}), row.getVisibleCells().map((cell, idx) => {
+			const isLastColumn = idx === row.getVisibleCells().length - 1;
+			return /* @__PURE__ */ jsx(TableCell, {
+				style: getColumnSizeStyle(cell.column.getSize(), true),
+				className: classNames(ds_table_row_virtualized_module_default.cell, cell.column.id === "expander" && ds_table_row_virtualized_module_default.expandableCell),
+				children: isLastColumn ? /* @__PURE__ */ jsx(DsTableCell, {
+					row,
+					cell,
+					primaryRowActions,
+					secondaryRowActions
+				}) : /* @__PURE__ */ jsx(DsTableCell, {
+					row,
+					cell
+				})
+			}, cell.id);
+		})] })
 	});
 };
 //#endregion
@@ -18372,7 +18645,7 @@ const ROW_SIZE_HEIGHT_MAP = {
 /**
 * Design system Table component
 */
-const DsTable = ({ ref, columns, data: tableData, virtualized = false, virtualizedOptions, className, onRowClick, emptyState, stickyHeader = true, bordered = true, fullWidth = true, rowSize = "medium", expandable = false, renderExpandedRow, selectable = false, showSelectAllCheckbox = true, onSelectionChange, onSortingChange, onScroll, actions = [], onRowDoubleClick, primaryRowActions = [], secondaryRowActions, reorderable = false, onOrderChange, columnFilters: externalColumnFilters, onColumnFiltersChange, columnVisibility: externalColumnVisibility, onColumnVisibilityChange, activeRowId }) => {
+const DsTable = ({ ref, columns: columnsProp, data: tableData, virtualized = false, virtualizedOptions, className, onRowClick, emptyState, stickyHeader = true, bordered = true, fullWidth = true, rowSize = "medium", expandable = false, renderExpandedRow, selectable = false, showSelectAllCheckbox = true, onSelectionChange, onSortingChange, onScroll, actions = [], onRowDoubleClick, primaryRowActions = [], secondaryRowActions, reorderable = false, onOrderChange, columnFilters: externalColumnFilters, onColumnFiltersChange, columnVisibility: externalColumnVisibility, onColumnVisibilityChange, activeRowId }) => {
 	const [data, setData] = React$1.useState(tableData);
 	const [sorting, setSorting] = React$1.useState([]);
 	const [internalColumnFilters, setInternalColumnFilters] = React$1.useState([]);
@@ -18409,6 +18682,17 @@ const DsTable = ({ ref, columns, data: tableData, virtualized = false, virtualiz
 		setRowSelection(newRowSelection);
 		onSelectionChange?.(newRowSelection);
 	};
+	const columns = useMemo(() => {
+		if (!expandable) return columnsProp;
+		return [{
+			id: EXPANDER_COLUMN_ID,
+			size: 36,
+			enableSorting: false,
+			enableResizing: false,
+			header: () => null,
+			cell: ({ row }) => row.getCanExpand() ? /* @__PURE__ */ jsx(DsTableRowExpandableCell, { row }) : null
+		}, ...columnsProp];
+	}, [columnsProp, expandable]);
 	const table = useReactTable({
 		data: reorderable ? data : tableData,
 		columns,
@@ -18420,6 +18704,8 @@ const DsTable = ({ ref, columns, data: tableData, virtualized = false, virtualiz
 		onColumnVisibilityChange: handleColumnVisibilityChange,
 		onRowSelectionChange: handleRowSelectionChange,
 		getRowId: (row) => row.id,
+		getExpandedRowModel: getExpandedRowModel(),
+		getRowCanExpand: typeof expandable === "function" ? (row) => expandable(row.original) : () => expandable,
 		state: {
 			sorting,
 			columnFilters,
@@ -18469,7 +18755,7 @@ const DsTable = ({ ref, columns, data: tableData, virtualized = false, virtualiz
 	}), [table]);
 	const { rows, rowsById } = table.getRowModel();
 	const renderEmptyState = () => /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, {
-		colSpan: columns.length + (expandable ? 1 : 0) + (selectable ? 1 : 0),
+		colSpan: columns.length + (selectable ? 1 : 0) + (reorderable ? 1 : 0),
 		className: ds_table_module_default.emptyState,
 		children: emptyState || "No results."
 	}) });
@@ -19482,6 +19768,183 @@ DsVerticalTabs.List = DsVerticalTabsList;
 DsVerticalTabs.Tab = DsVerticalTabsTab;
 DsVerticalTabs.Content = DsVerticalTabsContent;
 //#endregion
-export { BREAKPOINT_LG, DsAlertBanner, DsAutocomplete, DsAvatar, DsAvatarGroup, DsBreadcrumb, DsButton, DsButtonV3, DsCard, DsCheckbox, DsChip, DsChipGroup, DsCommentBubble, DsCommentCard, DsCommentIndicator, DsCommentThread, DsCommentsDrawer, DsConfirmation, DsDateInput, DsDatePicker, DsDateRangePicker, DsDialog, DsDivider, DsDrawer, DsDropdownMenu, DsDropdownMenuLegacy, DsExpandableTextInput, DsFileUpload, DsFilterStatusIcon, DsFormControl, DsGrid, DsGridItem, DsIcon, DsKeyValuePair, DsLoader, DsModal, DsNextStepButton, DsNumberInput, DsPanel, DsPasswordInput, DsPopover, DsProgressArc, DsProgressDonut, DsProgressLinear, DsRadioGroup, DsRadioGroupLegacy, DsSegmentGroup, DsSelect, ds_skeleton_default as DsSkeleton, DsSkeletonCircle, DsSkeletonRect, DsSkeletonText, DsSmartTabs, DsSpinner, DsSplitButton, DsStack, DsStatusBadge, DsStep, DsStepContent, DsStepper, DsSystemStatus, DsTable, DsTabs, DsTag, DsTagFilter, DsTextInput, DsTextarea, DsThreadItem, DsTimePicker, DsToastProvider, DsToggle, DsTooltip, DsTree, DsTypography, DsVerticalTabs, FatalFileUploadError, FileUpload, FileUploadError, RetryableFileUploadError, alertBannerVariants, breakpoints, buttonV3Colors, buttonV3Sizes, buttonV3Variants, cardSizes, checkboxVariants, colors, controlStatuses, createCheckboxFilterAdapter, createDsTreeCollection, createDualRangeFilterAdapter, createFilterAdapter, customIcons, dsKeyValuePairOrientations, filterStatuses, formatTime, iconSizes, iconVariants, isCustomIcon, isResponsiveValue, loaderVariants, progressArcSizes, progressArcVariants, progressDonutSizes, progressDonutVariants, progressLinearSizes, progressLinearVariants, resolveResponsiveValue, skeletonColorVariants, skeletonRadiusVariants, spinnerSizes, splitButtonSizes, systemStatuses, tagSizes, tagVariants, textInputSizes, useBreakpoint, useFileUpload, useResponsiveValue, useTableFilters, useToaster, withResponsiveProps };
+//#region src/components/ds-workspace/ds-workspace.module.scss
+var ds_workspace_module_default = {
+	"content": "XEdo8q_content",
+	"fillParent": "XEdo8q_fillParent",
+	"footer": "XEdo8q_footer",
+	"header": "XEdo8q_header",
+	"root": "XEdo8q_root",
+	"subHeader": "XEdo8q_subHeader"
+};
+//#endregion
+//#region src/components/ds-workspace/ds-workspace.tsx
+const DsWorkspace = (t0) => {
+	const $ = c(10);
+	let className;
+	let rest;
+	let t1;
+	if ($[0] !== t0) {
+		({className, fillParent: t1, ...rest} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = rest;
+		$[3] = t1;
+	} else {
+		className = $[1];
+		rest = $[2];
+		t1 = $[3];
+	}
+	const fillParent = t1 === void 0 ? false : t1;
+	let t2;
+	if ($[4] !== className || $[5] !== fillParent) {
+		t2 = classNames(ds_workspace_module_default.root, { [ds_workspace_module_default.fillParent]: fillParent }, className);
+		$[4] = className;
+		$[5] = fillParent;
+		$[6] = t2;
+	} else t2 = $[6];
+	let t3;
+	if ($[7] !== rest || $[8] !== t2) {
+		t3 = /* @__PURE__ */ jsx("div", {
+			...rest,
+			className: t2
+		});
+		$[7] = rest;
+		$[8] = t2;
+		$[9] = t3;
+	} else t3 = $[9];
+	return t3;
+};
+const Header = (t0) => {
+	const $ = c(8);
+	let className;
+	let rest;
+	if ($[0] !== t0) {
+		({className, ...rest} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = rest;
+	} else {
+		className = $[1];
+		rest = $[2];
+	}
+	let t1;
+	if ($[3] !== className) {
+		t1 = classNames(ds_workspace_module_default.header, className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== rest || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx("header", {
+			...rest,
+			className: t1
+		});
+		$[5] = rest;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+};
+const SubHeader = (t0) => {
+	const $ = c(8);
+	let className;
+	let rest;
+	if ($[0] !== t0) {
+		({className, ...rest} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = rest;
+	} else {
+		className = $[1];
+		rest = $[2];
+	}
+	let t1;
+	if ($[3] !== className) {
+		t1 = classNames(ds_workspace_module_default.subHeader, className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== rest || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx("div", {
+			...rest,
+			className: t1
+		});
+		$[5] = rest;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+};
+/** Stacking context for non-portal drawer containment. */
+const Content = (t0) => {
+	const $ = c(8);
+	let className;
+	let rest;
+	if ($[0] !== t0) {
+		({className, ...rest} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = rest;
+	} else {
+		className = $[1];
+		rest = $[2];
+	}
+	let t1;
+	if ($[3] !== className) {
+		t1 = classNames(ds_workspace_module_default.content, className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== rest || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx("div", {
+			...rest,
+			className: t1
+		});
+		$[5] = rest;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+};
+const Footer = (t0) => {
+	const $ = c(8);
+	let className;
+	let rest;
+	if ($[0] !== t0) {
+		({className, ...rest} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = rest;
+	} else {
+		className = $[1];
+		rest = $[2];
+	}
+	let t1;
+	if ($[3] !== className) {
+		t1 = classNames(ds_workspace_module_default.footer, className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== rest || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx("footer", {
+			...rest,
+			className: t1
+		});
+		$[5] = rest;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+};
+DsWorkspace.Header = Header;
+DsWorkspace.SubHeader = SubHeader;
+DsWorkspace.Content = Content;
+DsWorkspace.Footer = Footer;
+//#endregion
+export { BREAKPOINT_LG, DsAlertBanner, DsAutocomplete, DsAvatar, DsAvatarGroup, DsBreadcrumb, DsButton, DsButtonV3, DsCard, DsCheckbox, DsCheckboxGroup, DsChip, DsChipGroup, DsCommentBubble, DsCommentCard, DsCommentIndicator, DsCommentThread, DsCommentsDrawer, DsConfirmation, DsDateInput, DsDatePicker, DsDateRangePicker, DsDialog, DsDivider, DsDrawer, DsDropdownMenu, DsDropdownMenuLegacy, DsExpandableTextInput, DsFileUpload, DsFilterStatusIcon, DsFormControl, DsGrid, DsGridItem, DsIcon, DsKeyValuePair, DsLoader, DsModal, DsNextStepButton, DsNumberInput, DsPanel, DsPasswordInput, DsPopover, DsProgressArc, DsProgressDonut, DsProgressLinear, DsRadioGroup, DsRadioGroupLegacy, DsSegmentGroup, DsSelect, ds_skeleton_default as DsSkeleton, DsSkeletonCircle, DsSkeletonRect, DsSkeletonText, DsSmartTabs, DsSpinner, DsSplitButton, DsStack, DsStatusBadge, DsStep, DsStepContent, DsStepper, DsSystemStatus, DsTable, DsTabs, DsTag, DsTagFilter, DsTextInput, DsTextarea, DsThreadItem, DsTimePicker, DsToastProvider, DsToggle, DsTooltip, DsTree, DsTypography, DsVerticalTabs, DsWorkspace, FatalFileUploadError, FileUpload, FileUploadError, RetryableFileUploadError, alertBannerVariants, breakpoints, buttonV3Colors, buttonV3Sizes, buttonV3Variants, cardSizes, checkboxVariants, colors, controlStatuses, createCheckboxFilterAdapter, createDsTreeCollection, createDualRangeFilterAdapter, createFilterAdapter, customIcons, dropdownMenuItemVariants, dsKeyValuePairOrientations, filterStatuses, formatTime, iconColors, iconSizes, iconVariants, isCustomIcon, isResponsiveValue, loaderVariants, progressArcSizes, progressArcVariants, progressDonutSizes, progressDonutVariants, progressLinearSizes, progressLinearVariants, resolveResponsiveValue, skeletonColorVariants, skeletonRadiusVariants, spinnerSizes, splitButtonSizes, systemStatuses, tagSizes, tagVariants, textInputSizes, useBreakpoint, useCheckboxSelectAll, useFileUpload, useResponsiveValue, useTableFilters, useToaster, withResponsiveProps };
 
 //# sourceMappingURL=index.js.map