@alepha/ui 0.18.3 → 0.19.1

package/dist/admin/{core-CYaRQ8O-.js → core-CJCEx18C.js}

@@ -1,9 +1,9 @@
-import { $atom, $context, $inject, $module, Alepha, AlephaError, TypeBoxError, t } from "alepha";
-import { AlephaReactForm, FormValidationError, useFieldValue, useForm, useFormState } from "alepha/react/form";
+import { $atom, $inject, $module, Alepha, AlephaError, TypeBoxError, t } from "alepha";
+import { AlephaReactForm, FormModel, FormValidationError, useFieldValue, useForm, useFormState } from "alepha/react/form";
 import { $head, AlephaReactHead, BrowserHeadProvider } from "alepha/react/head";
 import { AlephaReactI18n, useI18n } from "alepha/react/i18n";
 import { $cookie } from "alepha/server/cookies";
-import { ActionIcon, Anchor, AppShell, Autocomplete, Badge, Burger, Button, Card, Checkbox, ColorInput, ColorSchemeScript, ColorSwatch, Container, CopyButton, Divider, Drawer, Fieldset, FileInput, Flex, Grid, Image, Input, Kbd, Loader, MantineProvider, Menu, MultiSelect, NumberInput, Pagination, Paper, PasswordInput, Popover, ScrollArea, SegmentedControl, Select, SimpleGrid, Slider, Switch, Table, Tabs, TagsInput, Text, TextInput, Textarea, Tooltip, UnstyledButton, useMantineColorScheme, useMantineTheme } from "@mantine/core";
+import { ActionIcon, Anchor, AppShell, Autocomplete, Badge, Burger, Button, Card, Checkbox, Collapse, ColorInput, ColorSchemeScript, ColorSwatch, Container, CopyButton, Divider, Drawer, Fieldset, FileInput, Flex, Grid, Image, Input, Kbd, Loader, MantineProvider, Menu, MultiSelect, NumberInput, Pagination, Paper, PasswordInput, Popover, ScrollArea, SegmentedControl, Select, SimpleGrid, Slider, Switch, Table, TagsInput, Text, TextInput, Textarea, Title, Tooltip, UnstyledButton, useMantineColorScheme, useMantineTheme } from "@mantine/core";
 import { ModalsProvider, modals } from "@mantine/modals";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Children, Fragment as Fragment$1, createElement, forwardRef, isValidElement, useCallback, useEffect, useMemo, useRef, useState } from "react";
@@ -18,7 +18,6 @@ import { useOs } from "@mantine/hooks";
 import { DateInput, DateTimePicker, TimeInput } from "@mantine/dates";
 import { parseQueryString } from "alepha/orm";
 import { DateTimeProvider } from "alepha/datetime";
-
 //#region ../../src/core/atoms/alephaSidebarAtom.ts
 const alephaSidebarAtom = $atom({
 	name: "alepha.ui.sidebar",
@@ -35,7 +34,6 @@ const alephaSidebarAtom = $atom({
 		collapsedWidth: 72
 	}
 });
-
 //#endregion
 //#region ../../src/core/atoms/alephaThemeAtom.ts
 const alephaThemeAtom = $atom({
@@ -43,7 +41,6 @@ const alephaThemeAtom = $atom({
 	schema: t.object({ index: t.integer() }),
 	default: { index: 0 }
 });
-
 //#endregion
 //#region ../../src/core/atoms/alephaThemeOverridesAtom.ts
 const alephaThemeOverridesAtom = $atom({
@@ -57,14 +54,12 @@ const alephaThemeOverridesAtom = $atom({
 	}),
 	default: {}
 });
-
 //#endregion
 //#region ../../src/core/atoms/themes/default.ts
 const defaultTheme = {
 	name: "Default",
 	description: "Default Alepha Theme"
 };
-
 //#endregion
 //#region ../../src/core/atoms/themes/editorial.ts
 /**
@@ -219,7 +214,6 @@ const editorialTheme = {
 		})
 	}
 };
-
 //#endregion
 //#region ../../src/core/atoms/themes/midnight.ts
 const midnightTheme = {
@@ -334,7 +328,6 @@ const midnightTheme = {
 		]
 	}
 };
-
 //#endregion
 //#region ../../src/core/atoms/themes/monochrome.ts
 /**
@@ -502,7 +495,6 @@ const monochromeTheme = {
 		})
 	}
 };
-
 //#endregion
 //#region ../../src/core/atoms/themes/rosePine.ts
 /**
@@ -674,7 +666,6 @@ const rosePineTheme = {
 		Badge: Badge.extend({ defaultProps: { fw: 500 } })
 	}
 };
-
 //#endregion
 //#region ../../src/core/atoms/themes/softBrutalism.ts
 /**
@@ -861,7 +852,6 @@ const softBrutalismTheme = {
 		})
 	}
 };
-
 //#endregion
 //#region ../../src/core/atoms/themes/terminal.ts
 /**
@@ -1017,7 +1007,6 @@ const terminalTheme = {
 		})
 	}
 };
-
 //#endregion
 //#region ../../src/core/atoms/alephaThemeListAtom.ts
 const alephaThemeListAtom = $atom({
@@ -1033,7 +1022,6 @@ const alephaThemeListAtom = $atom({
 		monochromeTheme
 	]
 });
-
 //#endregion
 //#region ../../src/core/providers/ThemeProvider.ts
 var ThemeProvider = class ThemeProvider {
@@ -1131,7 +1119,6 @@ var ThemeProvider = class ThemeProvider {
 		}
 	}
 };
-
 //#endregion
 //#region ../../src/core/components/dialogs/AlertDialog.tsx
 const AlertDialog = ({ options, onClose }) => /* @__PURE__ */ jsxs(Fragment, { children: [options?.message && /* @__PURE__ */ jsx(Text, {
@@ -1144,7 +1131,6 @@ const AlertDialog = ({ options, onClose }) => /* @__PURE__ */ jsxs(Fragment, { c
 		children: options?.okLabel || "OK"
 	})
 })] });
-
 //#endregion
 //#region ../../src/core/components/dialogs/ConfirmDialog.tsx
 const ConfirmDialog = ({ options, onConfirm }) => /* @__PURE__ */ jsxs(Fragment, { children: [options?.message && /* @__PURE__ */ jsx(Text, {
@@ -1162,7 +1148,6 @@ const ConfirmDialog = ({ options, onConfirm }) => /* @__PURE__ */ jsxs(Fragment,
 		children: options?.confirmLabel || "Confirm"
 	})]
 })] });
-
 //#endregion
 //#region ../../src/core/components/dialogs/PromptDialog.tsx
 const PromptDialog = ({ options, onSubmit }) => {
@@ -1194,6 +1179,7 @@ const PromptDialog = ({ options, onSubmit }) => {
 		}),
 		/* @__PURE__ */ jsxs(Flex, {
 			justify: "flex-end",
+			gap: "xs",
 			children: [/* @__PURE__ */ jsx(Button, {
 				variant: "subtle",
 				onClick: () => onSubmit(null),
@@ -1206,7 +1192,6 @@ const PromptDialog = ({ options, onSubmit }) => {
 		})
 	] });
 };
-
 //#endregion
 //#region ../../src/core/services/DialogService.tsx
 var DialogService = class {
@@ -1268,8 +1253,8 @@ var DialogService = class {
 				content: /* @__PURE__ */ jsx(ConfirmDialog, {
 					options,
 					onConfirm: (confirmed) => {
-						this.close(modalId);
 						done(confirmed);
+						this.close(modalId);
 					}
 				})
 			});
@@ -1295,8 +1280,8 @@ var DialogService = class {
 				content: /* @__PURE__ */ jsx(PromptDialog, {
 					options,
 					onSubmit: (value) => {
-						this.close(modalId);
 						done(value);
+						this.close(modalId);
 					}
 				})
 			});
@@ -1320,7 +1305,6 @@ var DialogService = class {
 		else modals.closeAll();
 	}
 };
-
 //#endregion
 //#region ../../src/core/services/ToastService.tsx
 var ToastService = class {
@@ -1379,7 +1363,6 @@ var ToastService = class {
 		});
 	}
 };
-
 //#endregion
 //#region ../../src/core/UiRouter.ts
 /**
@@ -1394,7 +1377,6 @@ var UiRouter = class {
 		component: AlephaMantineProvider
 	});
 };
-
 //#endregion
 //#region ../../src/core/hooks/useTheme.ts
 /**
@@ -1429,7 +1411,6 @@ const useTheme = () => {
 		}
 	];
 };
-
 //#endregion
 //#region ../../src/core/hooks/useToast.ts
 /**
@@ -1445,7 +1426,6 @@ const useTheme = () => {
 const useToast = () => {
 	return useInject(ToastService);
 };
-
 //#endregion
 //#region ../../src/core/components/layout/Omnibar.tsx
 const Omnibar = (props) => {
@@ -1477,7 +1457,6 @@ const Omnibar = (props) => {
 		nothingFound
 	});
 };
-
 //#endregion
 //#region ../../src/core/components/AlephaMantineProvider.tsx
 const AlephaMantineProvider = (props) => {
@@ -1519,7 +1498,6 @@ const AlephaMantineProvider = (props) => {
 		]
 	})] });
 };
-
 //#endregion
 //#region ../../src/core/constants/ui.ts
 const ui = {
@@ -1538,14 +1516,12 @@ const ui = {
 		xl: 32
 	} }
 };
-
 //#endregion
 //#region ../../src/core/helpers/isComponentType.ts
 function isComponentType(param) {
 	if (isValidElement(param)) return false;
 	return typeof param === "function" || typeof param === "object" && param !== null && "$$typeof" in param;
 }
-
 //#endregion
 //#region ../../src/core/components/buttons/ActionButton.tsx
 const ActionButton = (_props) => {
@@ -1826,7 +1802,6 @@ const ActionMenuItem = (props) => {
 		children: item.label
 	}, index);
 };
-
 //#endregion
 //#region ../../src/core/components/buttons/BurgerButton.tsx
 const BurgerButton = (props) => {
@@ -1842,7 +1817,6 @@ const BurgerButton = (props) => {
 		...props
 	});
 };
-
 //#endregion
 //#region ../../src/core/components/buttons/ClipboardButton.tsx
 const ClipboardButton = (props) => {
@@ -1863,7 +1837,6 @@ const ClipboardButton = (props) => {
 		})
 	});
 };
-
 //#endregion
 //#region ../../src/core/components/buttons/DarkModeButton.tsx
 /**
@@ -1895,7 +1868,6 @@ const DarkModeButton = (props) => {
 		...props
 	});
 };
-
 //#endregion
 //#region ../../src/core/components/buttons/LanguageButton.tsx
 const LanguageButton = (props) => {
@@ -1911,7 +1883,6 @@ const LanguageButton = (props) => {
 		...props
 	});
 };
-
 //#endregion
 //#region ../../src/core/components/buttons/OmnibarButton.tsx
 const OmnibarButton = (props) => {
@@ -1956,7 +1927,6 @@ const OmnibarButton = (props) => {
 		})
 	});
 };
-
 //#endregion
 //#region ../../src/core/hooks/useDialog.ts
 /**
@@ -1973,7 +1943,6 @@ const OmnibarButton = (props) => {
 const useDialog = () => {
 	return useInject(DialogService);
 };
-
 //#endregion
 //#region ../../src/core/components/buttons/ThemeExpertModal.tsx
 const MANTINE_COLORS = [
@@ -2182,7 +2151,6 @@ const ThemeExpertModal = () => {
 		]
 	});
 };
-
 //#endregion
 //#region ../../src/core/components/buttons/ThemeButton.tsx
 const ThemeButton = (props) => {
@@ -2211,7 +2179,6 @@ const ThemeButton = (props) => {
 		...actionProps
 	});
 };
-
 //#endregion
 //#region ../../src/core/components/buttons/ToggleSidebarButton.tsx
 const ToggleSidebarButton = (props) => {
@@ -2233,7 +2200,6 @@ const ToggleSidebarButton = (props) => {
 		...props
 	});
 };
-
 //#endregion
 //#region ../../src/core/components/data/DetailList.tsx
 const DetailList = (props) => {
@@ -2276,7 +2242,6 @@ const DetailList = (props) => {
 		}, item.label))
 	});
 };
-
 //#endregion
 //#region ../../src/core/components/data/StatCards.tsx
 const StatCards = ({ items }) => /* @__PURE__ */ jsx(Flex, {
@@ -2312,11 +2277,10 @@ const StatCards = ({ items }) => /* @__PURE__ */ jsx(Flex, {
 		}, item.label);
 	})
 });
-
 //#endregion
 //#region ../../src/core/components/Flex.tsx
 const Flex$1 = forwardRef((props, ref) => {
-	const { fill, center, centerX, centerY, col, ground, surface, elevated, rounded, bordered, borderedTop, borderedBottom, shadowed, overflow, ...rest } = props;
+	const { fill, center, centerX, centerY, col, ground, surface, elevated, rounded, bordered, borderedTop, borderedBottom, shadowed, overflow, form, ...rest } = props;
 	if (fill) rest.flex ??= 1;
 	if (col) rest.direction ??= "column";
 	if (center) {
@@ -2340,13 +2304,22 @@ const Flex$1 = forwardRef((props, ref) => {
 	};
 	if (shadowed) rest.className = `${rest.className ?? ""} shadow-${shadowed === true ? "md" : shadowed}`.trim();
 	if (overflow) rest.className = `${rest.className ?? ""} overflow-auto`.trim();
+	if (form) {
+		let formProps = typeof form === "object" ? form : {};
+		if (formProps instanceof FormModel) formProps = formProps.props;
+		return /* @__PURE__ */ jsx(Flex, {
+			ref,
+			component: "form",
+			...formProps,
+			...rest
+		});
+	}
 	return /* @__PURE__ */ jsx(Flex, {
 		ref,
 		...rest
 	});
 });
 Flex$1.displayName = "Flex";
-
 //#endregion
 //#region ../../src/core/components/layout/AppBar.tsx
 const AppBar = (props) => {
@@ -2461,7 +2434,6 @@ const AppBar = (props) => {
 	});
 	return content;
 };
-
 //#endregion
 //#region ../../src/core/components/layout/Breadcrumb.tsx
 /**
@@ -2471,7 +2443,7 @@ const AppBar = (props) => {
 * Pages should define a `label` in their `$page()` options for best results.
 * Falls back to the page name converted to Title Case.
 */
-const Breadcrumb = (props) => {
+const Breadcrumbs = (props) => {
 	const { home = "Home", separator, size = "sm", ...groupProps } = props;
 	const state = useRouterState();
 	const router = useRouter();
@@ -2516,7 +2488,6 @@ const Breadcrumb = (props) => {
 		}, crumb.href))
 	});
 };
-
 //#endregion
 //#region ../../src/core/components/layout/Container.tsx
 const Container$1 = forwardRef((props, ref) => {
@@ -2526,7 +2497,6 @@ const Container$1 = forwardRef((props, ref) => {
 	});
 });
 Container$1.displayName = "Container";
-
 //#endregion
 //#region ../../src/core/helpers/renderIcon.tsx
 const renderIcon = (icon, size) => {
@@ -2535,7 +2505,6 @@ const renderIcon = (icon, size) => {
 	if (isComponentType(icon)) return /* @__PURE__ */ jsx(icon, { size: size ?? ui.sizes.icon.md });
 	return icon;
 };
-
 //#endregion
 //#region ../../src/core/components/Text.tsx
 const INTENT_COLORS = {
@@ -2564,7 +2533,6 @@ const Text$1 = forwardRef((props, ref) => {
 	});
 });
 Text$1.displayName = "Text";
-
 //#endregion
 //#region ../../src/core/components/layout/SidebarCollapsedItem.tsx
 const SidebarCollapsedItem = (props) => {
@@ -2614,7 +2582,6 @@ const SidebarCollapsedItem = (props) => {
 		})
 	});
 };
-
 //#endregion
 //#region ../../src/core/components/layout/SidebarItem.tsx
 const SidebarItem = (props) => {
@@ -2691,7 +2658,6 @@ const SidebarItem = (props) => {
 		})]
 	});
 };
-
 //#endregion
 //#region ../../src/core/components/layout/Sidebar.tsx
 const Sidebar = (props) => {
@@ -2815,7 +2781,6 @@ const Sidebar = (props) => {
 	})] });
 	return renderSidebar(false);
 };
-
 //#endregion
 //#region ../../src/core/components/layout/DashboardShell.tsx
 const DashboardShell = (props) => {
@@ -2915,7 +2880,112 @@ const DashboardShell = (props) => {
 		]
 	});
 };
-
+//#endregion
+//#region ../../src/core/components/SectionHeader.tsx
+const TITLE_ORDER = {
+	sm: 5,
+	md: 4,
+	lg: 3
+};
+const ICON_SIZE = {
+	sm: ui.sizes.icon.xs,
+	md: ui.sizes.icon.sm,
+	lg: ui.sizes.icon.md
+};
+const SectionHeader = (props) => {
+	const { icon, title, tag, subtitle, actions, size = "md", extra } = props;
+	const iconSize = ICON_SIZE[size];
+	const titleOrder = TITLE_ORDER[size];
+	return /* @__PURE__ */ jsxs(Flex$1, {
+		col: true,
+		gap: 2,
+		children: [/* @__PURE__ */ jsxs(Flex$1, {
+			centerY: true,
+			gap: "xs",
+			children: [
+				icon && /* @__PURE__ */ jsx(Flex$1, {
+					centerY: true,
+					style: { flexShrink: 0 },
+					children: renderIcon(icon, iconSize)
+				}),
+				/* @__PURE__ */ jsx(Title, {
+					order: titleOrder,
+					lh: 1.2,
+					children: title
+				}),
+				tag,
+				/* @__PURE__ */ jsx(Flex$1, { fill: true }),
+				actions && actions.length > 0 && /* @__PURE__ */ jsx(Flex$1, {
+					gap: "xs",
+					centerY: true,
+					style: { flexShrink: 0 },
+					children: actions.map((actionProps, index) => /* @__PURE__ */ jsx(ActionButton, {
+						size: "xs",
+						variant: "default",
+						...actionProps
+					}, index))
+				}),
+				extra
+			]
+		}), subtitle && /* @__PURE__ */ jsx(Text$1, {
+			muted: true,
+			small: true,
+			children: subtitle
+		})]
+	});
+};
+//#endregion
+//#region ../../src/core/components/Section.tsx
+const Section = (props) => {
+	const { children, collapsible, defaultCollapsed = false, title, icon, tag, subtitle, actions, p = "md", ...rest } = props;
+	const [collapsed, setCollapsed] = useState(collapsible ? defaultCollapsed : false);
+	const hasHeader = !!title;
+	const headerActions = [...actions ?? []];
+	const chevronExtra = collapsible ? /* @__PURE__ */ jsx(Flex$1, {
+		centerY: true,
+		style: {
+			cursor: "pointer",
+			flexShrink: 0
+		},
+		onClick: () => setCollapsed((v) => !v),
+		children: collapsed ? /* @__PURE__ */ jsx(IconChevronRight, { size: ui.sizes.icon.sm }) : /* @__PURE__ */ jsx(IconChevronDown, { size: ui.sizes.icon.sm })
+	}) : void 0;
+	return /* @__PURE__ */ jsxs(Flex$1, {
+		col: true,
+		surface: true,
+		rounded: true,
+		bordered: true,
+		...rest,
+		children: [hasHeader && /* @__PURE__ */ jsx(Flex$1, {
+			p: "sm",
+			px: "md",
+			style: { cursor: collapsible ? "pointer" : void 0 },
+			onClick: collapsible ? () => setCollapsed((v) => !v) : void 0,
+			children: /* @__PURE__ */ jsx(SectionHeader, {
+				icon,
+				title,
+				tag,
+				subtitle,
+				actions: headerActions,
+				size: "sm",
+				extra: chevronExtra
+			})
+		}), collapsible ? /* @__PURE__ */ jsx(Collapse, {
+			in: !collapsed,
+			children: /* @__PURE__ */ jsx(Flex$1, {
+				col: true,
+				p,
+				...hasHeader ? { borderedTop: true } : {},
+				children
+			})
+		}) : /* @__PURE__ */ jsx(Flex$1, {
+			col: true,
+			p,
+			...hasHeader ? { borderedTop: true } : {},
+			children
+		})]
+	});
+};
 //#endregion
 //#region ../../src/core/form/utils/parseInput.ts
 const parseInput = (props, form) => {
@@ -2956,7 +3026,6 @@ const parseInput = (props, form) => {
 		inputProps
 	};
 };
-
 //#endregion
 //#region ../../src/core/form/components/ControlArray.tsx
 /**
@@ -3246,7 +3315,6 @@ const ControlArray = (props) => {
 		})
 	});
 };
-
 //#endregion
 //#region ../../src/core/form/components/ControlDate.tsx
 /**
@@ -3299,7 +3367,6 @@ const ControlDate = (props) => {
 	}
 	return null;
 };
-
 //#endregion
 //#region ../../src/core/form/components/ControlNumber.tsx
 /**
@@ -3344,7 +3411,6 @@ const ControlNumber = (props) => {
 		}
 	});
 };
-
 //#endregion
 //#region ../../src/core/form/components/ControlObject.tsx
 /**
@@ -3421,7 +3487,6 @@ const ControlObject = (props) => {
 		})
 	});
 };
-
 //#endregion
 //#region ../../src/core/form/components/ControlQueryBuilderHelp.tsx
 const ControlQueryBuilderHelp = (props) => {
@@ -3589,7 +3654,6 @@ const ControlQueryBuilderHelp = (props) => {
 		]
 	});
 };
-
 //#endregion
 //#region ../../src/core/form/components/ControlQueryBuilder.tsx
 /**
@@ -3677,7 +3741,6 @@ const ControlQueryBuilder = (props) => {
 		})]
 	});
 };
-
 //#endregion
 //#region ../../src/core/form/components/ControlSelect.tsx
 /**
@@ -3896,7 +3959,6 @@ const useAsyncLoader = (loader, threshold, debounceMs, defaultValue) => {
 		])
 	};
 };
-
 //#endregion
 //#region ../../src/core/form/components/Control.tsx
 /**
@@ -4113,7 +4175,6 @@ const Control = (_props) => {
 		...textInputProps
 	});
 };
-
 //#endregion
 //#region ../../src/core/form/components/TypeForm.tsx
 /**
@@ -4245,11 +4306,6 @@ const TypeForm = (props) => {
 		children: content
 	});
 };
-
-//#endregion
-//#region ../../src/core/table/interfaces/types.ts
-const DEFAULT_MAX_VISIBLE_COLUMNS = 8;
-
 //#endregion
 //#region ../../src/core/table/components/DataTableFilters.tsx
 const DataTableFilters = (props) => {
@@ -4287,7 +4343,6 @@ const DataTableFilters = (props) => {
 		})
 	});
 };
-
 //#endregion
 //#region ../../src/core/table/components/DataTablePagination.tsx
 const DataTablePagination = ({ page, size, totalPages, totalElements, isFirst, isLast, offset, numberOfElements, onPageChange, onSizeChange }) => {
@@ -4350,7 +4405,6 @@ const DataTablePagination = ({ page, size, totalPages, totalElements, isFirst, i
 		})]
 	});
 };
-
 //#endregion
 //#region ../../src/core/table/components/ColumnPicker.tsx
 const ColumnPicker = ({ columns, visibility, onVisibilityChange }) => {
@@ -4366,7 +4420,7 @@ const ColumnPicker = ({ columns, visibility, onVisibilityChange }) => {
 		let count = 0;
 		onVisibilityChange(columnEntries.reduce((acc, [key, col]) => {
 			if (col.defaultHidden) acc[key] = false;
-			else if (count < DEFAULT_MAX_VISIBLE_COLUMNS) {
+			else if (count < 8) {
 				acc[key] = true;
 				count++;
 			} else acc[key] = false;
@@ -4451,7 +4505,6 @@ const ColumnPicker = ({ columns, visibility, onVisibilityChange }) => {
 		})]
 	});
 };
-
 //#endregion
 //#region ../../src/core/table/components/FilterPicker.tsx
 const getFieldLabel = (schema, key) => {
@@ -4552,7 +4605,6 @@ const FilterPicker = ({ schema, visibility, onVisibilityChange }) => {
 		})]
 	});
 };
-
 //#endregion
 //#region ../../src/core/table/components/DataTableToolbar.tsx
 const escapeCsvField = (value) => {
@@ -4679,7 +4731,6 @@ const DataTableToolbar = ({ columns, filters, columnVisibility, filterVisibility
 		]
 	});
 };
-
 //#endregion
 //#region ../../src/core/table/components/useTableSelection.ts
 const useTableSelection = (items, getItemKey, enabled) => {
@@ -4742,7 +4793,6 @@ const useTableSelection = (items, getItemKey, enabled) => {
 		isSelected: useCallback((item) => selectedKeys.has(getItemKey(item)), [selectedKeys, getItemKey])
 	};
 };
-
 //#endregion
 //#region ../../src/core/table/components/DataTable.tsx
 /**
@@ -4776,7 +4826,8 @@ const toAriaSort = (dir) => {
 };
 const FIT_STYLE = {
 	width: 1,
-	whiteSpace: "nowrap"
+	whiteSpace: "nowrap",
+	minWidth: "fit-content"
 };
 const DataTable = (props) => {
 	const [items, setItems] = useState(typeof props.items === "function" ? { content: [] } : props.items);
@@ -4795,7 +4846,7 @@ const DataTable = (props) => {
 		let visibleCount = 0;
 		return entries.reduce((acc, [key, col]) => {
 			if (col.defaultHidden) acc[key] = false;
-			else if (visibleCount < DEFAULT_MAX_VISIBLE_COLUMNS) {
+			else if (visibleCount < 8) {
 				acc[key] = true;
 				visibleCount++;
 			} else acc[key] = false;
@@ -5148,8 +5199,7 @@ const DataTable = (props) => {
 							style: {
 								position: "sticky",
 								top: 0,
-								zIndex: 1,
-								backgroundColor: "var(--alepha-elevated)"
+								zIndex: 1
 							},
 							children: /* @__PURE__ */ jsxs(Table.Tr, { children: [
 								panelConfig && /* @__PURE__ */ jsx(Table.Th, { style: { width: 36 } }),
@@ -5211,7 +5261,6 @@ const DataTable = (props) => {
 		})]
 	});
 };
-
 //#endregion
 //#region ../../src/core/utils/extractSchemaFields.ts
 /**
@@ -5300,7 +5349,6 @@ const OPERATOR_INFO = {
 		example: "status=[active,pending]"
 	}
 };
-
 //#endregion
 //#region ../../src/core/utils/icons.tsx
 /**
@@ -5342,7 +5390,6 @@ const getDefaultIcon = (params) => {
 	}
 	return /* @__PURE__ */ jsx(IconAt, { size: iconSize });
 };
-
 //#endregion
 //#region ../../src/core/utils/string.ts
 /**
@@ -5380,7 +5427,6 @@ const prettyName = (name) => {
 	const segments = name.split("/").filter((s) => s && !/^\d+$/.test(s));
 	return toTitleCase(segments[segments.length - 1] || name.replaceAll("/", ""));
 };
-
 //#endregion
 //#region ../../src/core/index.ts
 /**
@@ -5419,7 +5465,7 @@ const AlephaUI = $module({
 		alepha.with(ToastService);
 	}
 });
-
 //#endregion
-export { ActionButton as _, Control as a, useToast as b, Breadcrumb as c, DetailList as d, ToggleSidebarButton as f, ClipboardButton as g, LanguageButton as h, TypeForm as i, Flex$1 as l, useDialog as m, capitalize as n, DashboardShell as o, ThemeButton as p, DataTable as r, Text$1 as s, AlephaUI as t, StatCards as u, ui as v, alephaSidebarAtom as x, AlephaMantineProvider as y };
-//# sourceMappingURL=core-CYaRQ8O-.js.map
+export { alephaSidebarAtom as S, ClipboardButton as _, Control as a, AlephaMantineProvider as b, Text$1 as c, StatCards as d, DetailList as f, LanguageButton as g, useDialog as h, TypeForm as i, Breadcrumbs as l, ThemeButton as m, capitalize as n, Section as o, ToggleSidebarButton as p, DataTable as r, DashboardShell as s, AlephaUI as t, Flex$1 as u, ActionButton as v, useToast as x, ui as y };
+
+//# sourceMappingURL=core-CJCEx18C.js.map