@drivenets/design-system 0.16.0 → 0.17.0

package/dist/index.cjs

@@ -3388,7 +3388,7 @@ DsTypography.displayName = "DsTypography";
 * severity variants, an optional icon, and an optional close button. Compose the
 * content with `DsAlertBanner.Title`, `DsAlertBanner.Body`, and `DsAlertBanner.Actions`.
 */
-const DsAlertBanner = (t0) => {
+const DsAlertBannerRoot = (t0) => {
 	const $ = (0, react_compiler_runtime.c)(20);
 	const { open, onOpenChange, inline: t1, variant: t2, icon, closable: t3, className, style: t4, children } = t0;
 	const inline = t1 === void 0 ? false : t1;
@@ -3550,10 +3550,12 @@ const Actions$3 = (t0) => {
 Title$2.displayName = "DsAlertBanner.Title";
 Body$5.displayName = "DsAlertBanner.Body";
 Actions$3.displayName = "DsAlertBanner.Actions";
-DsAlertBanner.Title = Title$2;
-DsAlertBanner.Body = Body$5;
-DsAlertBanner.Actions = Actions$3;
-DsAlertBanner.displayName = "DsAlertBanner";
+const DsAlertBanner = Object.assign(DsAlertBannerRoot, {
+	displayName: "DsAlertBanner",
+	Title: Title$2,
+	Body: Body$5,
+	Actions: Actions$3
+});
 //#endregion
 //#region src/components/ds-alert-banner/ds-alert-banner.types.ts
 const alertBannerVariants = [
@@ -5941,7 +5943,7 @@ const DEFAULT_LOCALE$1 = Object.freeze({
 	pinButtonLabel: "Pin side menu",
 	unpinButtonLabel: "Unpin side menu"
 });
-const DsCatalogLayout = (t0) => {
+const DsCatalogLayoutRoot = (t0) => {
 	const $ = (0, react_compiler_runtime.c)(17);
 	let className;
 	let rest;
@@ -6316,12 +6318,14 @@ Body$3.displayName = "DsCatalogLayout.Body";
 SideMenu$1.displayName = "DsCatalogLayout.SideMenu";
 Content$1.displayName = "DsCatalogLayout.Content";
 ContentHeader.displayName = "DsCatalogLayout.ContentHeader";
-DsCatalogLayout.Header = Header$3;
-DsCatalogLayout.Body = Body$3;
-DsCatalogLayout.SideMenu = SideMenu$1;
-DsCatalogLayout.Content = Content$1;
-DsCatalogLayout.ContentHeader = ContentHeader;
-DsCatalogLayout.displayName = "DsCatalogLayout";
+const DsCatalogLayout = Object.assign(DsCatalogLayoutRoot, {
+	displayName: "DsCatalogLayout",
+	Header: Header$3,
+	Body: Body$3,
+	SideMenu: SideMenu$1,
+	Content: Content$1,
+	ContentHeader
+});
 //#endregion
 //#region src/components/ds-checkbox/ds-checkbox.module.scss
 var ds_checkbox_module_default = {
@@ -8714,7 +8718,7 @@ const useArkDialogBodyLockCleanup = (open, enabled) => {
 };
 //#endregion
 //#region src/components/ds-drawer/ds-drawer.tsx
-const DsDrawer = (t0) => {
+const DsDrawerRoot = (t0) => {
 	const $ = (0, react_compiler_runtime.c)(28);
 	const { open, onOpenChange, onOpenAutoFocus, columns: t1, position: t2, backdrop: t3, closeOnEscape: t4, closeOnInteractOutside: t5, portal: t6, style, className, children } = t0;
 	const columns = t1 === void 0 ? 4 : t1;
@@ -9002,14 +9006,16 @@ Toolbar.displayName = "DsDrawer.Toolbar";
 Body$2.displayName = "DsDrawer.Body";
 Footer$2.displayName = "DsDrawer.Footer";
 Actions$1.displayName = "DsDrawer.Actions";
-DsDrawer.Header = Header$2;
-DsDrawer.Title = Title$1;
-DsDrawer.CloseTrigger = CloseTrigger$1;
-DsDrawer.Toolbar = Toolbar;
-DsDrawer.Body = Body$2;
-DsDrawer.Footer = Footer$2;
-DsDrawer.Actions = Actions$1;
-DsDrawer.displayName = "DsDrawer";
+const DsDrawer = Object.assign(DsDrawerRoot, {
+	displayName: "DsDrawer",
+	Header: Header$2,
+	Title: Title$1,
+	CloseTrigger: CloseTrigger$1,
+	Toolbar,
+	Body: Body$2,
+	Footer: Footer$2,
+	Actions: Actions$1
+});
 //#endregion
 //#region src/components/ds-tag-filter/ds-tag-filter.module.scss
 var ds_tag_filter_module_default = {
@@ -9549,7 +9555,7 @@ var ds_modal_module_default = {
 * Supports custom header, footer, and body content with grid-based sizing.
 * Use columns prop to control modal width (1-12 grid columns).
 */
-const DsModal = (t0) => {
+const DsModalRoot = (t0) => {
 	const $ = (0, react_compiler_runtime.c)(20);
 	const { open, columns: t1, dividers: t2, style, className, modal: t3, closeOnEscape, closeOnInteractOutside: t4, children, onOpenChange } = t0;
 	const columns = t1 === void 0 ? 6 : t1;
@@ -9778,13 +9784,15 @@ CloseTrigger.displayName = "DsModal.CloseTrigger";
 Body$1.displayName = "DsModal.Body";
 Footer$1.displayName = "DsModal.Footer";
 Actions.displayName = "DsModal.Actions";
-DsModal.Header = Header$1;
-DsModal.Title = Title;
-DsModal.CloseTrigger = CloseTrigger;
-DsModal.Body = Body$1;
-DsModal.Footer = Footer$1;
-DsModal.Actions = Actions;
-DsModal.displayName = "DsModal";
+const DsModal = Object.assign(DsModalRoot, {
+	displayName: "DsModal",
+	Header: Header$1,
+	Title,
+	CloseTrigger,
+	Body: Body$1,
+	Footer: Footer$1,
+	Actions
+});
 //#endregion
 //#region src/components/ds-tabs/components/ds-tabs-list/ds-tabs-list.module.scss
 var ds_tabs_list_module_default = { "tabList": "vT68YW_tabList" };
@@ -11565,11 +11573,7 @@ function _temp5$1(c_1) {
 }
 //#endregion
 //#region src/components/ds-confirmation/ds-confirmation.tsx
-/**
-* @deprecated DsConfirmation is deprecated. Use DsModal instead.
-* @see {@link ../ds-modal} for the replacement component.
-*/
-const DsConfirmation = (props) => {
+const DsConfirmationRoot = (props) => {
 	const $ = (0, react_compiler_runtime.c)(2);
 	let t0;
 	if ($[0] !== props) {
@@ -11584,13 +11588,19 @@ const DsConfirmation = (props) => {
 	} else t0 = $[1];
 	return t0;
 };
-DsConfirmation.Header = DsModal.Header;
-DsConfirmation.Title = DsModal.Title;
-DsConfirmation.CloseTrigger = DsModal.CloseTrigger;
-DsConfirmation.Body = DsModal.Body;
-DsConfirmation.Footer = DsModal.Footer;
-DsConfirmation.Actions = DsModal.Actions;
-DsConfirmation.displayName = "DsConfirmation";
+/**
+* @deprecated DsConfirmation is deprecated. Use DsModal instead.
+* @see {@link ../ds-modal} for the replacement component.
+*/
+const DsConfirmation = Object.assign(DsConfirmationRoot, {
+	displayName: "DsConfirmation",
+	Header: DsModal.Header,
+	Title: DsModal.Title,
+	CloseTrigger: DsModal.CloseTrigger,
+	Body: DsModal.Body,
+	Footer: DsModal.Footer,
+	Actions: DsModal.Actions
+});
 //#endregion
 //#region src/components/ds-date-picker/ds-date-picker.utils.ts
 const toIntlDate = (date) => date ? (0, _internationalized_date.fromDate)(date, (0, _internationalized_date.getLocalTimeZone)()) : date;
@@ -13317,7 +13327,7 @@ var ds_number_input_module_default = {
 //#endregion
 //#region src/components/ds-number-input/ds-number-input.tsx
 const DsNumberInput = (t0) => {
-	const $ = (0, react_compiler_runtime.c)(33);
+	const $ = (0, react_compiler_runtime.c)(36);
 	const { id, ref, name, size: t1, onBlur, onChange, onValueChange, className, style: t2, placeholder, disabled: t3, min, max, step, value, defaultValue } = t0;
 	const size = t1 === void 0 ? "default" : t1;
 	let t4;
@@ -13342,26 +13352,32 @@ const DsNumberInput = (t0) => {
 		$[5] = t7;
 	} else t7 = $[5];
 	const containerClass = t7;
-	const t8 = typeof value !== "undefined" ? String(value) : void 0;
-	const t9 = typeof defaultValue !== "undefined" ? String(defaultValue) : void 0;
-	let t10;
-	if ($[6] !== onValueChange) {
-		t10 = (details) => onValueChange?.(details.valueAsNumber);
-		$[6] = onValueChange;
-		$[7] = t10;
-	} else t10 = $[7];
+	let t8;
+	if ($[6] !== id) {
+		t8 = { input: id };
+		$[6] = id;
+		$[7] = t8;
+	} else t8 = $[7];
+	const t9 = typeof value !== "undefined" ? String(value) : void 0;
+	const t10 = typeof defaultValue !== "undefined" ? String(defaultValue) : void 0;
 	let t11;
-	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
-		t11 = (0, classnames.default)(ds_number_input_module_default.iconButton);
-		$[8] = t11;
-	} else t11 = $[8];
+	if ($[8] !== onValueChange) {
+		t11 = (details) => onValueChange?.(details.valueAsNumber);
+		$[8] = onValueChange;
+		$[9] = t11;
+	} else t11 = $[9];
 	let t12;
-	if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
-		t12 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react.NumberInput.DecrementTrigger, {
+	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+		t12 = (0, classnames.default)(ds_number_input_module_default.iconButton);
+		$[10] = t12;
+	} else t12 = $[10];
+	let t13;
+	if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+		t13 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react.NumberInput.DecrementTrigger, {
 			asChild: true,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 				type: "button",
-				className: t11,
+				className: t12,
 				"aria-label": "Decrease value",
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsIcon, {
 					icon: "remove",
@@ -13369,42 +13385,42 @@ const DsNumberInput = (t0) => {
 				})
 			})
 		});
-		$[9] = t12;
-	} else t12 = $[9];
-	let t13;
-	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
-		t13 = (0, classnames.default)(ds_number_input_module_default.input);
-		$[10] = t13;
-	} else t13 = $[10];
+		$[11] = t13;
+	} else t13 = $[11];
 	let t14;
-	if ($[11] !== name || $[12] !== onBlur || $[13] !== onChange || $[14] !== placeholder || $[15] !== ref) {
-		t14 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react.NumberInput.Input, {
+	if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+		t14 = (0, classnames.default)(ds_number_input_module_default.input);
+		$[12] = t14;
+	} else t14 = $[12];
+	let t15;
+	if ($[13] !== name || $[14] !== onBlur || $[15] !== onChange || $[16] !== placeholder || $[17] !== ref) {
+		t15 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react.NumberInput.Input, {
 			ref,
 			name,
-			className: t13,
+			className: t14,
 			placeholder,
 			onBlur,
 			onChange
 		});
-		$[11] = name;
-		$[12] = onBlur;
-		$[13] = onChange;
-		$[14] = placeholder;
-		$[15] = ref;
-		$[16] = t14;
-	} else t14 = $[16];
-	let t15;
-	if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
-		t15 = (0, classnames.default)(ds_number_input_module_default.iconButton);
-		$[17] = t15;
-	} else t15 = $[17];
+		$[13] = name;
+		$[14] = onBlur;
+		$[15] = onChange;
+		$[16] = placeholder;
+		$[17] = ref;
+		$[18] = t15;
+	} else t15 = $[18];
 	let t16;
-	if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
-		t16 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react.NumberInput.IncrementTrigger, {
+	if ($[19] === Symbol.for("react.memo_cache_sentinel")) {
+		t16 = (0, classnames.default)(ds_number_input_module_default.iconButton);
+		$[19] = t16;
+	} else t16 = $[19];
+	let t17;
+	if ($[20] === Symbol.for("react.memo_cache_sentinel")) {
+		t17 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react.NumberInput.IncrementTrigger, {
 			asChild: true,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 				type: "button",
-				className: t15,
+				className: t16,
 				"aria-label": "Increase value",
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsIcon, {
 					icon: "add",
@@ -13412,52 +13428,54 @@ const DsNumberInput = (t0) => {
 				})
 			})
 		});
-		$[18] = t16;
-	} else t16 = $[18];
-	let t17;
-	if ($[19] !== containerClass || $[20] !== style || $[21] !== t14) {
-		t17 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react.NumberInput.Control, {
+		$[20] = t17;
+	} else t17 = $[20];
+	let t18;
+	if ($[21] !== containerClass || $[22] !== style || $[23] !== t15) {
+		t18 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react.NumberInput.Control, {
 			asChild: true,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: containerClass,
 				style,
 				children: [
-					t12,
-					t14,
-					t16
+					t13,
+					t15,
+					t17
 				]
 			})
 		});
-		$[19] = containerClass;
-		$[20] = style;
-		$[21] = t14;
-		$[22] = t17;
-	} else t17 = $[22];
-	let t18;
-	if ($[23] !== disabled || $[24] !== id || $[25] !== max || $[26] !== min || $[27] !== step || $[28] !== t10 || $[29] !== t17 || $[30] !== t8 || $[31] !== t9) {
-		t18 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react.NumberInput.Root, {
+		$[21] = containerClass;
+		$[22] = style;
+		$[23] = t15;
+		$[24] = t18;
+	} else t18 = $[24];
+	let t19;
+	if ($[25] !== disabled || $[26] !== id || $[27] !== max || $[28] !== min || $[29] !== step || $[30] !== t10 || $[31] !== t11 || $[32] !== t18 || $[33] !== t8 || $[34] !== t9) {
+		t19 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react.NumberInput.Root, {
 			id,
+			ids: t8,
 			min,
 			max,
 			step,
 			disabled,
-			value: t8,
-			defaultValue: t9,
-			onValueChange: t10,
-			children: t17
+			value: t9,
+			defaultValue: t10,
+			onValueChange: t11,
+			children: t18
 		});
-		$[23] = disabled;
-		$[24] = id;
-		$[25] = max;
-		$[26] = min;
-		$[27] = step;
-		$[28] = t10;
-		$[29] = t17;
-		$[30] = t8;
-		$[31] = t9;
+		$[25] = disabled;
+		$[26] = id;
+		$[27] = max;
+		$[28] = min;
+		$[29] = step;
+		$[30] = t10;
+		$[31] = t11;
 		$[32] = t18;
-	} else t18 = $[32];
-	return t18;
+		$[33] = t8;
+		$[34] = t9;
+		$[35] = t19;
+	} else t19 = $[35];
+	return t19;
 };
 DsNumberInput.displayName = "DsNumberInput";
 //#endregion
@@ -13650,7 +13668,7 @@ const DsFormControlDescription = (t0) => {
 	} else t2 = $[4];
 	return t2;
 };
-const DsFormControl = (t0) => {
+const DsFormControlRoot = (t0) => {
 	const $ = (0, react_compiler_runtime.c)(23);
 	const { id, status, label, hideLabel: t1, required: t2, slots, message, messageIcon: t3, className, style, children } = t0;
 	const hideLabel = t1 === void 0 ? false : t1;
@@ -13736,18 +13754,20 @@ const DsFormControl = (t0) => {
 	} else t10 = $[22];
 	return t10;
 };
-DsFormControl.TextInput = controlify(DsTextInput);
-DsFormControl.NumberInput = controlify(DsNumberInput);
-DsFormControl.PasswordInput = controlify(DsPasswordInput);
-/** @deprecated DsDateInput is deprecated. Use DsDatePicker or DsDateRangePicker instead. */
-DsFormControl.DateInput = controlify(DsDateInput);
-DsFormControl.DatePicker = controlify(DsDatePicker);
-DsFormControl.TimePicker = controlify(DsTimePicker);
-DsFormControl.Textarea = controlify(DsTextarea);
-DsFormControl.Select = controlify(DsSelect);
-DsFormControl.Description = DsFormControlDescription;
-DsFormControl.displayName = "DsFormControl";
-DsFormControl.Description.displayName = "DsFormControl.Description";
+DsFormControlDescription.displayName = "DsFormControl.Description";
+const DsFormControl = Object.assign(DsFormControlRoot, {
+	displayName: "DsFormControl",
+	TextInput: controlify(DsTextInput),
+	NumberInput: controlify(DsNumberInput),
+	PasswordInput: controlify(DsPasswordInput),
+	/** @deprecated DsDateInput is deprecated. Use DsDatePicker or DsDateRangePicker instead. */
+	DateInput: controlify(DsDateInput),
+	DatePicker: controlify(DsDatePicker),
+	TimePicker: controlify(DsTimePicker),
+	Textarea: controlify(DsTextarea),
+	Select: controlify(DsSelect),
+	Description: DsFormControlDescription
+});
 //#endregion
 //#region src/components/ds-form-control/ds-form-control.types.ts
 const controlStatuses = [
@@ -18221,7 +18241,7 @@ const DsSmartTab = (t0) => {
 /**
 * Design system SmartTabs component
 */
-const DsSmartTabs = (t0) => {
+const DsSmartTabsRoot = (t0) => {
 	const $ = (0, react_compiler_runtime.c)(22);
 	let activeTab;
 	let children;
@@ -18297,8 +18317,10 @@ const DsSmartTabs = (t0) => {
 	return t6;
 };
 DsSmartTab.displayName = "DsSmartTabs.Tab";
-DsSmartTabs.Tab = DsSmartTab;
-DsSmartTabs.displayName = "DsSmartTabs";
+const DsSmartTabs = Object.assign(DsSmartTabsRoot, {
+	displayName: "DsSmartTabs",
+	Tab: DsSmartTab
+});
 //#endregion
 //#region src/components/ds-smart-tabs/ds-smart-tabs.types.ts
 const colors = [
@@ -19947,6 +19969,7 @@ var ds_table_header_module_default = {
 	"filterActive": "-2rCNG_filterActive",
 	"filterTriggerContainer": "-2rCNG_filterTriggerContainer",
 	"groupStart": "-2rCNG_groupStart",
+	"header": "-2rCNG_header",
 	"headerCell": "-2rCNG_headerCell",
 	"headerRow": "-2rCNG_headerRow",
 	"headerRowNoBorder": "-2rCNG_headerRowNoBorder",
@@ -19956,7 +19979,6 @@ var ds_table_header_module_default = {
 	"pageButtonIconContainer": "-2rCNG_pageButtonIconContainer",
 	"selectHeaderCell": "-2rCNG_selectHeaderCell",
 	"sortableHeader": "-2rCNG_sortableHeader",
-	"stickyHeader": "-2rCNG_stickyHeader",
 	"virtualizedHeader": "-2rCNG_virtualizedHeader"
 };
 //#endregion
@@ -20224,9 +20246,9 @@ const DsTableGroupHeaderCell = ({ header }) => {
 //#endregion
 //#region src/components/ds-table/components/ds-table-header/ds-table-header.tsx
 const DsTableHeader = ({ table }) => {
-	const { stickyHeader, bordered, virtualized } = useDsTableContext();
+	const { bordered, virtualized } = useDsTableContext();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableHeader, {
-		className: (0, classnames.default)(stickyHeader && ds_table_header_module_default.stickyHeader, virtualized && ds_table_header_module_default.virtualizedHeader),
+		className: (0, classnames.default)(ds_table_header_module_default.header, virtualized && ds_table_header_module_default.virtualizedHeader),
 		children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableRow, {
 			className: (0, classnames.default)(ds_table_header_module_default.headerRow, !bordered && ds_table_header_module_default.headerRowNoBorder, virtualized && ds_table_header_module_default.headerRowVirtualized),
 			children: headerGroup.headers.map((header) => {
@@ -20290,6 +20312,7 @@ const DsTableHeader = ({ table }) => {
 var ds_table_module_default = {
 	"bulkActionsVisible": "iL9mtW_bulkActionsVisible",
 	"container": "iL9mtW_container",
+	"controls": "iL9mtW_controls",
 	"dataTableContainer": "iL9mtW_dataTableContainer",
 	"emptyState": "iL9mtW_emptyState",
 	"fullWidth": "iL9mtW_fullWidth",
@@ -20923,7 +20946,7 @@ const ROW_SIZE_HEIGHT_MAP = {
 /**
 * Design system Table component
 */
-const DsTable = ({ ref, columns: columnsProp, data: tableData, virtualized = false, virtualizedOptions, className, onRowClick, emptyState, stickyHeader = true, bordered = true, fullWidth = true, rowSize = "medium", loading = false, expandable = false, renderExpandedRow, selectable = false, showSelectAllCheckbox = true, onSelectionChange, onSortingChange, onScroll, actions = [], onRowDoubleClick, primaryRowActions = [], secondaryRowActions, reorderable = false, onOrderChange, columnFilters: externalColumnFilters, onColumnFiltersChange, columnVisibility: externalColumnVisibility, onColumnVisibilityChange, collapsedColumnGroups: externalCollapsedColumnGroups, onCollapsedColumnGroupsChange, locale, activeRowId, infiniteScroll, onCellEdit, onCellValidate }) => {
+const DsTable = ({ ref, columns: columnsProp, data: tableData, controls, virtualized = false, virtualizedOptions, className, onRowClick, emptyState, stickyHeader = true, bordered = true, fullWidth = true, rowSize = "medium", loading = false, expandable = false, renderExpandedRow, selectable = false, showSelectAllCheckbox = true, onSelectionChange, onSortingChange, onScroll, actions = [], onRowDoubleClick, primaryRowActions = [], secondaryRowActions, reorderable = false, onOrderChange, columnFilters: externalColumnFilters, onColumnFiltersChange, columnVisibility: externalColumnVisibility, onColumnVisibilityChange, collapsedColumnGroups: externalCollapsedColumnGroups, onCollapsedColumnGroupsChange, locale, activeRowId, infiniteScroll, onCellEdit, onCellValidate }) => {
 	const [data, setData] = react.useState(tableData);
 	const [sorting, setSorting] = react.useState([]);
 	const [internalColumnFilters, setInternalColumnFilters] = react.useState([]);
@@ -21121,30 +21144,40 @@ const DsTable = ({ ref, columns: columnsProp, data: tableData, virtualized = fal
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTableContext.Provider, {
 		value: contextValue,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			ref: tableContainerRef,
-			className: (0, classnames.default)(ds_table_module_default.container, !virtualized && ds_table_module_default.dataTableContainer, virtualized && ds_table_module_default.virtualizedContainer, isBulkActionsVisible && ds_table_module_default.bulkActionsVisible, className),
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DragWrapper, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Table, {
-				className: (0, classnames.default)(fullWidth && ds_table_module_default.fullWidth, !bordered && ds_table_module_default.tableNoBorder),
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTableHeader, { table }), virtualized ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTableBodyVirtualized, {
-					table,
-					emptyState,
-					estimateSize: virtualizedOptions?.estimateSize || ROW_SIZE_HEIGHT_MAP[rowSize],
-					overscan: virtualizedOptions?.overscan,
-					onScroll,
-					rowSelection,
-					infiniteScroll
-				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableBody, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SortableWrapper, { children: rows.length ? rows.map((row) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTableRow, {
-					row,
-					isSelected: !!rowSelection[row.id]
-				}, row.id)) : renderEmptyState() }) })]
-			}) }), selectable && actions.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTableBulkActions, {
-				numSelectedRows: selectedRows.length,
-				actions: actions.map((action) => ({
-					...action,
-					onClick: () => action.onClick(selectedRows)
-				})),
-				onClearSelection: table.resetRowSelection
-			})]
+			className: (0, classnames.default)(ds_table_module_default.container, isBulkActionsVisible && ds_table_module_default.bulkActionsVisible, className),
+			children: [
+				controls && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: ds_table_module_default.controls,
+					children: controls
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					ref: tableContainerRef,
+					className: (0, classnames.default)(!virtualized && ds_table_module_default.dataTableContainer, virtualized && ds_table_module_default.virtualizedContainer),
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DragWrapper, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Table, {
+						className: (0, classnames.default)(fullWidth && ds_table_module_default.fullWidth, !bordered && ds_table_module_default.tableNoBorder),
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTableHeader, { table }), virtualized ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTableBodyVirtualized, {
+							table,
+							emptyState,
+							estimateSize: virtualizedOptions?.estimateSize || ROW_SIZE_HEIGHT_MAP[rowSize],
+							overscan: virtualizedOptions?.overscan,
+							onScroll,
+							rowSelection,
+							infiniteScroll
+						}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableBody, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SortableWrapper, { children: rows.length ? rows.map((row) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTableRow, {
+							row,
+							isSelected: !!rowSelection[row.id]
+						}, row.id)) : renderEmptyState() }) })]
+					}) })
+				}),
+				selectable && actions.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTableBulkActions, {
+					numSelectedRows: selectedRows.length,
+					actions: actions.map((action) => ({
+						...action,
+						onClick: () => action.onClick(selectedRows)
+					})),
+					onClearSelection: table.resetRowSelection
+				})
+			]
 		})
 	});
 };
@@ -21733,8 +21766,8 @@ var ds_tree_module_default = {
 //#endregion
 //#region src/components/ds-tree/ds-tree.tsx
 const DsTreeRoot = (t0) => {
-	const $ = (0, react_compiler_runtime.c)(23);
-	const { collection, size: t1, ref, className, style, children, selectedValue, defaultSelectedValue, onSelectionChange, selectionMode: t2, expandedValue, defaultExpandedValue, onExpandedChange, expandOnClick: t3, checkedValue, defaultCheckedValue, onCheckedChange, typeahead: t4, lazyMount: t5, unmountOnExit } = t0;
+	const $ = (0, react_compiler_runtime.c)(26);
+	const { collection, size: t1, ref, className, style, children, selectedValue, defaultSelectedValue, onSelectionChange, selectionMode: t2, expandedValue, defaultExpandedValue, onExpandedChange, expandOnClick: t3, checkedValue, defaultCheckedValue, onCheckedChange, focusedValue, defaultFocusedValue, onFocusChange, typeahead: t4, lazyMount: t5, unmountOnExit } = t0;
 	const size = t1 === void 0 ? "medium" : t1;
 	const selectionMode = t2 === void 0 ? "single" : t2;
 	const expandOnClick = t3 === void 0 ? true : t3;
@@ -21747,7 +21780,7 @@ const DsTreeRoot = (t0) => {
 		$[1] = t6;
 	} else t6 = $[1];
 	let t7;
-	if ($[2] !== checkedValue || $[3] !== children || $[4] !== collection || $[5] !== defaultCheckedValue || $[6] !== defaultExpandedValue || $[7] !== defaultSelectedValue || $[8] !== expandOnClick || $[9] !== expandedValue || $[10] !== lazyMount || $[11] !== onCheckedChange || $[12] !== onExpandedChange || $[13] !== onSelectionChange || $[14] !== ref || $[15] !== selectedValue || $[16] !== selectionMode || $[17] !== size || $[18] !== style || $[19] !== t6 || $[20] !== typeahead || $[21] !== unmountOnExit) {
+	if ($[2] !== checkedValue || $[3] !== children || $[4] !== collection || $[5] !== defaultCheckedValue || $[6] !== defaultExpandedValue || $[7] !== defaultFocusedValue || $[8] !== defaultSelectedValue || $[9] !== expandOnClick || $[10] !== expandedValue || $[11] !== focusedValue || $[12] !== lazyMount || $[13] !== onCheckedChange || $[14] !== onExpandedChange || $[15] !== onFocusChange || $[16] !== onSelectionChange || $[17] !== ref || $[18] !== selectedValue || $[19] !== selectionMode || $[20] !== size || $[21] !== style || $[22] !== t6 || $[23] !== typeahead || $[24] !== unmountOnExit) {
 		t7 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react_tree_view.TreeView.Root, {
 			ref,
 			collection,
@@ -21762,6 +21795,9 @@ const DsTreeRoot = (t0) => {
 			checkedValue,
 			defaultCheckedValue,
 			onCheckedChange,
+			focusedValue,
+			defaultFocusedValue,
+			onFocusChange,
 			typeahead,
 			lazyMount,
 			unmountOnExit,
@@ -21775,23 +21811,26 @@ const DsTreeRoot = (t0) => {
 		$[4] = collection;
 		$[5] = defaultCheckedValue;
 		$[6] = defaultExpandedValue;
-		$[7] = defaultSelectedValue;
-		$[8] = expandOnClick;
-		$[9] = expandedValue;
-		$[10] = lazyMount;
-		$[11] = onCheckedChange;
-		$[12] = onExpandedChange;
-		$[13] = onSelectionChange;
-		$[14] = ref;
-		$[15] = selectedValue;
-		$[16] = selectionMode;
-		$[17] = size;
-		$[18] = style;
-		$[19] = t6;
-		$[20] = typeahead;
-		$[21] = unmountOnExit;
-		$[22] = t7;
-	} else t7 = $[22];
+		$[7] = defaultFocusedValue;
+		$[8] = defaultSelectedValue;
+		$[9] = expandOnClick;
+		$[10] = expandedValue;
+		$[11] = focusedValue;
+		$[12] = lazyMount;
+		$[13] = onCheckedChange;
+		$[14] = onExpandedChange;
+		$[15] = onFocusChange;
+		$[16] = onSelectionChange;
+		$[17] = ref;
+		$[18] = selectedValue;
+		$[19] = selectionMode;
+		$[20] = size;
+		$[21] = style;
+		$[22] = t6;
+		$[23] = typeahead;
+		$[24] = unmountOnExit;
+		$[25] = t7;
+	} else t7 = $[25];
 	return t7;
 };
 const DsTreeTree = (t0) => {
@@ -22270,7 +22309,7 @@ var ds_vertical_tabs_module_default = {
 * </DsVerticalTabs>
 * ```
 */
-const DsVerticalTabs = (t0) => {
+const DsVerticalTabsRoot = (t0) => {
 	const $ = (0, react_compiler_runtime.c)(8);
 	const { value, onValueChange, className, style, children } = t0;
 	let t1;
@@ -22376,10 +22415,12 @@ const DsVerticalTabsContent = (t0) => {
 DsVerticalTabsList.displayName = "DsVerticalTabs.List";
 DsVerticalTabsTab.displayName = "DsVerticalTabs.Tab";
 DsVerticalTabsContent.displayName = "DsVerticalTabs.Content";
-DsVerticalTabs.List = DsVerticalTabsList;
-DsVerticalTabs.Tab = DsVerticalTabsTab;
-DsVerticalTabs.Content = DsVerticalTabsContent;
-DsVerticalTabs.displayName = "DsVerticalTabs";
+const DsVerticalTabs = Object.assign(DsVerticalTabsRoot, {
+	displayName: "DsVerticalTabs",
+	List: DsVerticalTabsList,
+	Tab: DsVerticalTabsTab,
+	Content: DsVerticalTabsContent
+});
 //#endregion
 //#region src/components/ds-workspace-layout/ds-workspace-layout.module.scss
 var ds_workspace_layout_module_default = {
@@ -22410,7 +22451,7 @@ const DEFAULT_LOCALE = Object.freeze({
 	pinButtonLabel: "Pin side menu",
 	unpinButtonLabel: "Unpin side menu"
 });
-const DsWorkspaceLayout = (t0) => {
+const DsWorkspaceLayoutRoot = (t0) => {
 	const $ = (0, react_compiler_runtime.c)(17);
 	let className;
 	let rest;
@@ -22803,14 +22844,16 @@ Footer.displayName = "DsWorkspaceLayout.Footer";
 Body.displayName = "DsWorkspaceLayout.Body";
 SideMenu.displayName = "DsWorkspaceLayout.SideMenu";
 LeftPanel.displayName = "DsWorkspaceLayout.LeftPanel";
-DsWorkspaceLayout.Header = Header;
-DsWorkspaceLayout.SubHeader = SubHeader;
-DsWorkspaceLayout.Content = Content;
-DsWorkspaceLayout.Footer = Footer;
-DsWorkspaceLayout.Body = Body;
-DsWorkspaceLayout.SideMenu = SideMenu;
-DsWorkspaceLayout.LeftPanel = LeftPanel;
-DsWorkspaceLayout.displayName = "DsWorkspaceLayout";
+const DsWorkspaceLayout = Object.assign(DsWorkspaceLayoutRoot, {
+	displayName: "DsWorkspaceLayout",
+	Header,
+	SubHeader,
+	Content,
+	Footer,
+	Body,
+	SideMenu,
+	LeftPanel
+});
 //#endregion
 exports.BREAKPOINT_LG = BREAKPOINT_LG;
 exports.DsAlertBanner = DsAlertBanner;