@mantine-vue/core 2.3.0 → 2.4.0

package/cjs/index.cjs

@@ -4038,7 +4038,7 @@ var Badge = withBoxProps((0, vue.defineComponent)({
 		const renderSection = (section, position) => hasNode(section) ? (0, vue.h)("span", {
 			...getStyles("section"),
 			"data-position": position
-		}, () => section) : null;
+		}, section) : null;
 		return () => {
 			const children = slots.default?.() ?? [];
 			const leftSection = resolveNode(props.leftSection, slots.leftSection);
@@ -5108,7 +5108,7 @@ var varsResolver$70 = createVarsResolver((theme, { radius, color, gradient, vari
 		"--button-hover-color": color || variant ? colors.hoverColor : void 0
 	} };
 });
-function renderContent$5(content) {
+function renderContent$4(content) {
 	return typeof content === "function" ? content() : content;
 }
 var ButtonBase = (0, vue.defineComponent)({
@@ -5237,7 +5237,7 @@ var ButtonBase = (0, vue.defineComponent)({
 			component: "span",
 			...getStyles("section"),
 			mod: { position }
-		}, () => renderContent$5(content)) : null;
+		}, () => renderContent$4(content)) : null;
 		return () => {
 			const leftSection = resolveNode(props.leftSection, slots.leftSection);
 			const rightSection = resolveNode(props.rightSection, slots.rightSection);
@@ -8017,13 +8017,13 @@ var ScrollAreaViewport = withBoxProps((0, vue.defineComponent)({
 	}
 }));
 var ScrollArea_module_default = {
-	root: "_root_kwra0_1",
-	content: "_content_kwra0_7",
-	viewport: "_viewport_kwra0_12",
-	viewportInner: "_viewportInner_kwra0_59",
-	scrollbar: "_scrollbar_kwra0_64",
-	thumb: "_thumb_kwra0_81",
-	corner: "_corner_kwra0_144"
+	root: "_root_1sy9q_1",
+	content: "_content_1sy9q_7",
+	viewport: "_viewport_1sy9q_12",
+	viewportInner: "_viewportInner_1sy9q_71",
+	scrollbar: "_scrollbar_1sy9q_76",
+	thumb: "_thumb_1sy9q_93",
+	corner: "_corner_1sy9q_182"
 };
 //#endregion
 //#region src/components/ScrollArea/ScrollArea.ts
@@ -8099,6 +8099,10 @@ var ScrollAreaBase = (0, vue.defineComponent)({
 			type: Object,
 			default: void 0
 		},
+		verticalScrollbarPosition: {
+			type: String,
+			default: void 0
+		},
 		classNames: {
 			type: [Object, Function],
 			default: void 0
@@ -8257,11 +8261,13 @@ var ScrollAreaBase = (0, vue.defineComponent)({
 				},
 				"data-offset-scrollbars": toOffsetScrollbars(props.offsetScrollbars),
 				"data-scrollbars": props.scrollbars || void 0,
+				"data-vertical-scrollbar-position": props.verticalScrollbarPosition,
 				onScroll: handleScroll
 			}, () => slots.default?.()),
 			(props.scrollbars === "xy" || props.scrollbars === "x") && (0, vue.h)(ScrollAreaScrollbar, {
 				...getStyles("scrollbar"),
 				orientation: "horizontal",
+				"data-vertical-scrollbar-position": props.verticalScrollbarPosition,
 				"data-hidden": props.type === "never" ? true : void 0,
 				"data-state": getScrollbarState("horizontal"),
 				forceMount: true
@@ -8269,12 +8275,14 @@ var ScrollAreaBase = (0, vue.defineComponent)({
 			(props.scrollbars === "xy" || props.scrollbars === "y") && (0, vue.h)(ScrollAreaScrollbar, {
 				...getStyles("scrollbar"),
 				orientation: "vertical",
+				"data-vertical-scrollbar-position": props.verticalScrollbarPosition,
 				"data-hidden": props.type === "never" ? true : void 0,
 				"data-state": getScrollbarState("vertical"),
 				forceMount: true
 			}, () => (0, vue.h)(ScrollAreaThumb, getStyles("thumb"))),
 			(0, vue.h)(ScrollAreaCorner, {
 				...getStyles("corner"),
+				"data-vertical-scrollbar-position": props.verticalScrollbarPosition,
 				"data-hidden": props.type === "never" ? true : void 0
 			})
 		]);
@@ -8595,6 +8603,7 @@ var defaultProps$35 = {
 	multiple: false,
 	loop: true,
 	disableChevronRotation: false,
+	disableCollapse: false,
 	chevronPosition: "right",
 	variant: "default",
 	chevronSize: "auto",
@@ -8606,7 +8615,7 @@ function getSafeId$2(prefix) {
 		return `${prefix}-${value}`;
 	};
 }
-function renderContent$4(content) {
+function renderContent$3(content) {
 	return typeof content === "function" ? content() : content;
 }
 var varsResolver$57 = createVarsResolver((_, { transitionDuration, chevronSize, radius }) => ({ root: {
@@ -8617,6 +8626,7 @@ var varsResolver$57 = createVarsResolver((_, { transitionDuration, chevronSize,
 var AccordionBase = (0, vue.defineComponent)({
 	name: "Accordion",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		multiple: {
 			type: Boolean,
@@ -8650,6 +8660,10 @@ var AccordionBase = (0, vue.defineComponent)({
 			type: Boolean,
 			default: void 0
 		},
+		disableCollapse: {
+			type: Boolean,
+			default: void 0
+		},
 		chevronPosition: {
 			type: String,
 			default: void 0
@@ -8729,6 +8743,7 @@ var AccordionBase = (0, vue.defineComponent)({
 		const isItemActive = (itemValue) => Array.isArray(currentValue.value) ? currentValue.value.includes(itemValue) : itemValue === currentValue.value;
 		const handleItemChange = (itemValue) => {
 			const value = currentValue.value;
+			if (!Array.isArray(value) && props.disableCollapse && itemValue === value) return;
 			setCurrentValue(Array.isArray(value) ? value.includes(itemValue) ? value.filter((selectedValue) => selectedValue !== itemValue) : [...value, itemValue] : itemValue === value ? null : itemValue);
 		};
 		provideAccordionContext((0, vue.reactive)({
@@ -8748,7 +8763,8 @@ var AccordionBase = (0, vue.defineComponent)({
 				return props.order;
 			},
 			get chevron() {
-				return props.chevron === null ? null : props.chevron ?? (() => (0, vue.h)(AccordionChevron, { size: props.chevronIconSize }));
+				if (props.chevron === null) return null;
+				return props.chevron ?? slots.chevron ?? (() => (0, vue.h)(AccordionChevron, { size: props.chevronIconSize }));
 			},
 			onChange: handleItemChange,
 			isItemActive,
@@ -8778,7 +8794,7 @@ var AccordionBase = (0, vue.defineComponent)({
 			id: uid.value,
 			variant: props.variant,
 			"data-accordion": true
-		}, () => renderContent$4(slots.default));
+		}, () => renderContent$3(slots.default));
 	}
 });
 var Accordion = Object.assign(AccordionBase, {
@@ -8806,12 +8822,10 @@ var varsResolver$56 = createVarsResolver((theme, { controlSize, edgeGradientColo
 	"--scroller-control-size": controlSize === void 0 ? void 0 : rem(controlSize),
 	"--scroller-background-color": edgeGradientColor ? getThemeColor(edgeGradientColor, theme) : void 0
 } }));
-function renderContent$3(content) {
-	return typeof content === "function" ? content() : content;
-}
 var Scroller = withBoxProps((0, vue.defineComponent)({
 	name: "Scroller",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		scrollAmount: {
 			type: Number,
@@ -8916,7 +8930,7 @@ var Scroller = withBoxProps((0, vue.defineComponent)({
 					"data-hidden": !showStart || void 0,
 					"aria-label": "Scroll left",
 					tabindex: showStart ? 0 : -1
-				}, () => renderContent$3(props.startControlIcon) || (0, vue.h)(AccordionChevron, getStyles("chevron"))),
+				}, () => resolveNode(props.startControlIcon, slots.startControlIcon) || (0, vue.h)(AccordionChevron, getStyles("chevron"))),
 				(0, vue.h)("div", {
 					...getStyles("container"),
 					ref: scroller.ref,
@@ -8932,7 +8946,7 @@ var Scroller = withBoxProps((0, vue.defineComponent)({
 					"data-hidden": !showEnd || void 0,
 					"aria-label": "Scroll right",
 					tabindex: showEnd ? 0 : -1
-				}, () => renderContent$3(props.endControlIcon) || (0, vue.h)(AccordionChevron, getStyles("chevron")))
+				}, () => resolveNode(props.endControlIcon, slots.endControlIcon) || (0, vue.h)(AccordionChevron, getStyles("chevron")))
 			]);
 		};
 	}
@@ -9911,8 +9925,9 @@ function getDigitParts({ value, decimalScale, fixedDecimalScale }) {
 	const dotIdx = str.indexOf(".");
 	const intStr = dotIdx >= 0 ? str.slice(0, dotIdx) : str;
 	const fracStr = dotIdx >= 0 ? str.slice(dotIdx + 1) : "";
+	const roundedToZero = !/[1-9]/.test(str);
 	return {
-		negative: value < 0,
+		negative: value < 0 && !roundedToZero,
 		intDigits: intStr.split(""),
 		fracDigits: fracStr ? fracStr.split("") : [],
 		hasDecimal: dotIdx >= 0
@@ -10258,11 +10273,12 @@ Object.assign(RollingNumber, {
 //#region src/components/Timeline/Timeline.context.ts
 var [provideTimelineContext, useTimelineContext] = createSafeContext("Timeline component was not found in tree");
 var Timeline_module_default = {
-	root: "_root_x5q16_1",
-	itemTitle: "_itemTitle_x5q16_17",
-	item: "_item_x5q16_17",
-	itemBullet: "_itemBullet_x5q16_84",
-	itemBody: "_itemBody_x5q16_139"
+	root: "_root_1p5xp_1",
+	itemTitle: "_itemTitle_1p5xp_19",
+	item: "_item_1p5xp_19",
+	itemBullet: "_itemBullet_1p5xp_96",
+	itemBody: "_itemBody_1p5xp_159",
+	itemOpposite: "_itemOpposite_1p5xp_199"
 };
 //#endregion
 //#region src/components/Timeline/TimelineItem/TimelineItem.ts
@@ -10299,6 +10315,14 @@ var TimelineItem = withBoxProps((0, vue.defineComponent)({
 			type: null,
 			default: void 0
 		},
+		opposite: {
+			type: null,
+			default: void 0
+		},
+		alternate: {
+			type: Boolean,
+			default: false
+		},
 		radius: {
 			type: [String, Number],
 			default: void 0
@@ -10349,6 +10373,7 @@ var TimelineItem = withBoxProps((0, vue.defineComponent)({
 			const lineActive = props.lineActive ?? props.__lineActive;
 			const bullet = resolveNode(props.bullet, slots.bullet);
 			const title = resolveNode(props.title, slots.title);
+			const opposite = resolveNode(props.opposite, slots.opposite);
 			const stylesApiProps = {
 				className: props.className ?? attrs.class,
 				props
@@ -10357,7 +10382,8 @@ var TimelineItem = withBoxProps((0, vue.defineComponent)({
 				...attrs,
 				mod: [{
 					lineActive,
-					active
+					active,
+					alternate: props.alternate
 				}, props.mod],
 				...ctx.getStyles("item", {
 					...stylesApiProps,
@@ -10369,14 +10395,18 @@ var TimelineItem = withBoxProps((0, vue.defineComponent)({
 						...attrs.style
 					}
 				})
-			}, () => [(0, vue.h)(Box, {
-				...ctx.getStyles("itemBullet", { props }),
-				mod: {
-					withChild: hasNode(bullet),
-					align: props.__align,
-					active
-				}
-			}, () => bullet), (0, vue.h)("div", ctx.getStyles("itemBody", { props }), [hasNode(title) ? (0, vue.h)("div", ctx.getStyles("itemTitle", { props }), title) : null, (0, vue.h)("div", ctx.getStyles("itemContent", { props }), slots.default?.())])]);
+			}, () => [
+				(0, vue.h)(Box, {
+					...ctx.getStyles("itemBullet", { props }),
+					mod: {
+						withChild: hasNode(bullet),
+						align: props.__align,
+						active
+					}
+				}, () => bullet),
+				hasNode(opposite) ? (0, vue.h)("div", ctx.getStyles("itemOpposite", { props }), opposite) : null,
+				(0, vue.h)("div", ctx.getStyles("itemBody", { props }), [hasNode(title) ? (0, vue.h)("div", ctx.getStyles("itemTitle", { props }), title) : null, (0, vue.h)("div", ctx.getStyles("itemContent", { props }), slots.default?.())])
+			]);
 		};
 	}
 }));
@@ -10472,6 +10502,10 @@ var TimelineBase = (0, vue.defineComponent)({
 		provideTimelineContext({ getStyles });
 		return () => {
 			const children = (slots.default?.() ?? []).filter(Boolean);
+			const hasOpposite = children.some((item) => {
+				const childSlots = item.children;
+				return item.props?.opposite != null || childSlots?.opposite != null;
+			});
 			const active = props.active ?? defaultProps$28.active;
 			const items = children.map((item, index) => (0, vue.cloneVNode)(item, {
 				unstyled: props.unstyled,
@@ -10481,7 +10515,10 @@ var TimelineBase = (0, vue.defineComponent)({
 			}, true));
 			return (0, vue.h)(Box, {
 				...attrs,
-				mod: [{ align: props.align }, props.mod],
+				mod: [{
+					align: props.align,
+					opposite: hasOpposite
+				}, props.mod],
 				...getStyles("root", {
 					className: attrs.class,
 					style: attrs.style
@@ -16265,7 +16302,6 @@ var Tabs_module_default = {
 var VALUE_ERROR = "Tabs.Tab or Tabs.Panel component was rendered with invalid value or without value";
 var defaultProps$13 = {
 	keepMounted: true,
-	keepMountedMode: "activity",
 	orientation: "horizontal",
 	loop: true,
 	activateTabWithKeyboard: true,
@@ -16347,10 +16383,6 @@ var TabsBase = (0, vue.defineComponent)({
 			type: Boolean,
 			default: void 0
 		},
-		keepMountedMode: {
-			type: String,
-			default: void 0
-		},
 		autoContrast: {
 			type: Boolean,
 			default: void 0
@@ -16426,9 +16458,6 @@ var TabsBase = (0, vue.defineComponent)({
 			get keepMounted() {
 				return props.keepMounted;
 			},
-			get keepMountedMode() {
-				return props.keepMountedMode;
-			},
 			get placement() {
 				return props.placement;
 			},
@@ -16640,6 +16669,7 @@ var TextareaAutosize = (0, vue.defineComponent)({
 var Textarea = (0, vue.defineComponent)({
 	name: "Textarea",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		autosize: {
 			type: Boolean,
@@ -16688,7 +16718,7 @@ var Textarea = (0, vue.defineComponent)({
 				__staticSelector: props.__staticSelector || "Textarea",
 				multiline: true,
 				"data-no-overflow": shouldAutosize && props.maxRows === void 0 ? true : void 0,
-				__bottomSection: props.bottomSection,
+				__bottomSection: resolveNode(props.bottomSection, slots.bottomSection),
 				__bottomSectionProps: props.bottomSectionProps,
 				style: [{ "--input-resize": props.resize }, attrs.style],
 				...autosizeProps
@@ -17071,7 +17101,11 @@ var PasswordInput = (0, vue.defineComponent)({
 			const hasError = props.error !== void 0 ? Boolean(props.error) && typeof props.error !== "boolean" : Boolean(slots.error);
 			const hasDescription = props.description !== void 0 ? props.description !== null : Boolean(slots.description);
 			const describedBy = `${hasError ? errorId : ""} ${hasDescription ? descriptionId : ""}`.trim() || void 0;
-			const VisibilityToggleIcon = props.visibilityToggleIcon || PasswordToggleIcon;
+			const renderVisibilityToggleIcon = () => {
+				if (props.visibilityToggleIcon) return (0, vue.h)(props.visibilityToggleIcon, { reveal: visible.value });
+				if (slots.visibilityToggleIcon) return slots.visibilityToggleIcon({ reveal: visible.value });
+				return (0, vue.h)(PasswordToggleIcon, { reveal: visible.value });
+			};
 			const visibilityToggleButton = (0, vue.h)(ActionIcon, {
 				...getStyles("visibilityToggle"),
 				...props.visibilityToggleButtonProps,
@@ -17100,7 +17134,7 @@ var PasswordInput = (0, vue.defineComponent)({
 						toggleVisibility();
 					}
 				}
-			}, () => (0, vue.h)(VisibilityToggleIcon, { reveal: visible.value }));
+			}, renderVisibilityToggleIcon);
 			return (0, vue.h)(Input.Wrapper, {
 				...props.wrapperProps,
 				id,
@@ -20275,16 +20309,17 @@ var StepperBase = (0, vue.defineComponent)({
 			const items = [];
 			steps.forEach((item, index) => {
 				const itemProps = item.props ?? {};
+				const itemSlots = item.children ?? {};
 				const state = props.active === index ? "stepProgress" : props.active > index ? "stepCompleted" : "stepInactive";
 				const selectable = typeof props.onStepClick === "function" && (typeof itemProps.allowStepSelect === "boolean" ? itemProps.allowStepSelect : state === "stepCompleted" || props.allowNextStepsSelect);
 				items.push((0, vue.cloneVNode)(item, {
-					icon: itemProps.icon ?? props.icon ?? (slots.icon ? (payload) => slots.icon(payload) : index + 1),
+					icon: itemSlots.icon ? itemProps.icon : itemProps.icon ?? props.icon ?? (slots.icon ? (payload) => slots.icon(payload) : index + 1),
 					step: index,
 					state,
 					onClick: () => selectable && props.onStepClick?.(index),
 					allowStepClick: selectable,
-					completedIcon: itemProps.completedIcon ?? props.completedIcon ?? (slots.completedIcon ? (payload) => slots.completedIcon(payload) : void 0),
-					progressIcon: itemProps.progressIcon ?? props.progressIcon ?? (slots.progressIcon ? (payload) => slots.progressIcon(payload) : void 0),
+					completedIcon: itemSlots.completedIcon ? itemProps.completedIcon : itemProps.completedIcon ?? props.completedIcon ?? (slots.completedIcon ? (payload) => slots.completedIcon(payload) : void 0),
+					progressIcon: itemSlots.progressIcon ? itemProps.progressIcon : itemProps.progressIcon ?? props.progressIcon ?? (slots.progressIcon ? (payload) => slots.progressIcon(payload) : void 0),
 					color: itemProps.color ?? props.color,
 					iconSize: props.iconSize,
 					iconPosition: itemProps.iconPosition ?? props.iconPosition,
@@ -20740,9 +20775,154 @@ Object.assign(TableOfContents, {
 	classes: TableOfContents_module_default,
 	varsResolver: varsResolver$14
 });
-var FloatingWindow_module_default = { root: "_root_kejg3_1" };
+//#endregion
+//#region src/components/FloatingWindow/FloatingWindow.context.ts
+var [provideFloatingWindowContext, useFloatingWindowContext] = createSafeContext("FloatingWindow.ResizeHandle must be used within FloatingWindow");
+//#endregion
+//#region src/components/FloatingWindow/FloatingWindowResizeHandle.ts
+var KEYBOARD_STEP = 10;
+function clampDimension$1(value, min, max, viewportMax) {
+	let result = value;
+	if (min != null) result = Math.max(result, min);
+	if (max != null) result = Math.min(result, max);
+	if (viewportMax != null) result = Math.min(result, viewportMax);
+	return result;
+}
+var FloatingWindowResizeHandle = withBoxProps((0, vue.defineComponent)({
+	name: "FloatingWindowResizeHandle",
+	inheritAttrs: false,
+	props: {
+		ariaLabel: {
+			type: String,
+			default: "Resize window"
+		},
+		tabindex: {
+			type: Number,
+			default: 0
+		},
+		onKeydown: Function
+	},
+	setup(props, { attrs, slots }) {
+		const ctx = useFloatingWindowContext();
+		let handle = null;
+		let isResizing = false;
+		let startX = 0;
+		let startY = 0;
+		let startWidth = 0;
+		let startHeight = 0;
+		const hasWidth = () => ctx.dimensions?.initialWidth != null || ctx.dimensions?.minWidth != null || ctx.dimensions?.maxWidth != null;
+		const hasHeight = () => ctx.dimensions?.initialHeight != null || ctx.dimensions?.minHeight != null || ctx.dimensions?.maxHeight != null;
+		const applySize = (width, height) => {
+			const root = ctx.rootRef.value;
+			if (!root || width === null && height === null) return;
+			const rect = root.getBoundingClientRect();
+			const offset = ctx.constrainOffset ?? 0;
+			const maxViewportWidth = ctx.constrainToViewport ? window.innerWidth - rect.left - offset : void 0;
+			const maxViewportHeight = ctx.constrainToViewport ? window.innerHeight - rect.top - offset : void 0;
+			if (width !== null) root.style.width = `${clampDimension$1(width, ctx.dimensions?.minWidth, ctx.dimensions?.maxWidth, maxViewportWidth)}px`;
+			if (height !== null) root.style.height = `${clampDimension$1(height, ctx.dimensions?.minHeight, ctx.dimensions?.maxHeight, maxViewportHeight)}px`;
+			const resized = root.getBoundingClientRect();
+			if (width !== null) handle?.setAttribute("aria-valuenow", String(Math.round(resized.width)));
+			ctx.onSizeChange?.({
+				width: resized.width,
+				height: resized.height
+			});
+		};
+		const end = () => {
+			if (!isResizing) return;
+			isResizing = false;
+			document.body.style.userSelect = "";
+			document.body.style.webkitUserSelect = "";
+			ctx.onResizeEnd?.();
+			document.removeEventListener("mousemove", move);
+			document.removeEventListener("mouseup", end);
+			document.removeEventListener("touchmove", move);
+			document.removeEventListener("touchend", end);
+			document.removeEventListener("touchcancel", end);
+		};
+		const move = (event) => {
+			if (!isResizing) return;
+			event.preventDefault();
+			const point = "touches" in event ? event.touches[0] : event;
+			applySize(hasWidth() ? startWidth + point.clientX - startX : null, hasHeight() ? startHeight + point.clientY - startY : null);
+		};
+		const start = (event) => {
+			if ("button" in event && event.button !== 0) return;
+			event.stopPropagation();
+			event.preventDefault();
+			if (!hasWidth() && !hasHeight()) return;
+			const root = ctx.rootRef.value;
+			if (!root) return;
+			const point = "touches" in event ? event.touches[0] : event;
+			const rect = root.getBoundingClientRect();
+			startX = point.clientX;
+			startY = point.clientY;
+			startWidth = rect.width;
+			startHeight = rect.height;
+			isResizing = true;
+			document.body.style.userSelect = "none";
+			document.body.style.webkitUserSelect = "none";
+			ctx.onResizeStart?.();
+			document.addEventListener("mousemove", move);
+			document.addEventListener("mouseup", end);
+			document.addEventListener("touchmove", move, { passive: false });
+			document.addEventListener("touchend", end);
+			document.addEventListener("touchcancel", end);
+		};
+		const onKeydown = (event) => {
+			props.onKeydown?.(event);
+			if (event.defaultPrevented) return;
+			const root = ctx.rootRef.value;
+			if (!root) return;
+			const rect = root.getBoundingClientRect();
+			let width = null;
+			let height = null;
+			if (event.key === "ArrowRight" && hasWidth()) width = rect.width + KEYBOARD_STEP;
+			else if (event.key === "ArrowLeft" && hasWidth()) width = rect.width - KEYBOARD_STEP;
+			else if (event.key === "ArrowDown" && hasHeight()) height = rect.height + KEYBOARD_STEP;
+			else if (event.key === "ArrowUp" && hasHeight()) height = rect.height - KEYBOARD_STEP;
+			else if (event.key === "Home") {
+				if (hasWidth()) width = ctx.dimensions?.minWidth ?? rect.width;
+				if (hasHeight()) height = ctx.dimensions?.minHeight ?? rect.height;
+			} else if (event.key === "End") {
+				if (hasWidth()) width = ctx.dimensions?.maxWidth ?? rect.width;
+				if (hasHeight()) height = ctx.dimensions?.maxHeight ?? rect.height;
+			}
+			if (width !== null || height !== null) {
+				event.preventDefault();
+				applySize(width, height);
+			}
+		};
+		(0, vue.onMounted)(() => {
+			if (hasWidth() && ctx.dimensions?.initialWidth != null) handle?.setAttribute("aria-valuenow", String(Math.round(clampDimension$1(ctx.dimensions.initialWidth, ctx.dimensions.minWidth, ctx.dimensions.maxWidth, void 0))));
+		});
+		(0, vue.onBeforeUnmount)(end);
+		return () => (0, vue.h)(Box, {
+			...attrs,
+			ref: (node) => {
+				handle = node?.$el ?? node;
+			},
+			role: "separator",
+			"aria-label": attrs["aria-label"] ?? props.ariaLabel,
+			"aria-valuemin": ctx.dimensions?.minWidth,
+			"aria-valuemax": ctx.dimensions?.maxWidth,
+			tabindex: props.tabindex,
+			style: [{ touchAction: "none" }, attrs.style],
+			onMousedown: start,
+			onTouchstart: start,
+			onKeydown
+		}, () => slots.default?.());
+	}
+}));
+var FloatingWindow_module_default = { root: "_root_mstr0_1" };
 //#endregion
 //#region src/components/FloatingWindow/FloatingWindow.ts
+function clampDimension(value, min, max) {
+	let result = value;
+	if (min != null) result = Math.max(result, min);
+	if (max != null) result = Math.min(result, max);
+	return result;
+}
 var defaultProps$7 = {
 	constrainToViewport: true,
 	withinPortal: true,
@@ -20808,6 +20988,22 @@ var FloatingWindow = (0, vue.defineComponent)({
 			type: [String, Number],
 			default: void 0
 		},
+		dimensions: {
+			type: Object,
+			default: void 0
+		},
+		onSizeChange: {
+			type: Function,
+			default: void 0
+		},
+		onResizeStart: {
+			type: Function,
+			default: void 0
+		},
+		onResizeEnd: {
+			type: Function,
+			default: void 0
+		},
 		shadow: {
 			type: String,
 			default: void 0
@@ -20844,6 +21040,7 @@ var FloatingWindow = (0, vue.defineComponent)({
 	setup(rawProps, { attrs, slots, expose }) {
 		const props = useProps("FloatingWindow", defaultProps$7, rawProps);
 		const floating = (0, _mantine_vue_hooks.useFloatingWindow)(props);
+		const rootRef = (0, vue.ref)(null);
 		(0, _mantine_vue_hooks.assignRef)(props.setPositionRef, floating.setPosition);
 		expose({ setPosition: floating.setPosition });
 		const getStyles = useStyles({
@@ -20857,12 +21054,37 @@ var FloatingWindow = (0, vue.defineComponent)({
 			vars: props.vars,
 			unstyled: props.unstyled
 		});
+		provideFloatingWindowContext({
+			rootRef,
+			get dimensions() {
+				return props.dimensions;
+			},
+			get constrainToViewport() {
+				return props.constrainToViewport;
+			},
+			get constrainOffset() {
+				return props.constrainOffset;
+			},
+			get onSizeChange() {
+				return props.onSizeChange;
+			},
+			get onResizeStart() {
+				return props.onResizeStart;
+			},
+			get onResizeEnd() {
+				return props.onResizeEnd;
+			}
+		});
 		return () => (0, vue.h)(OptionalPortal, {
 			withinPortal: props.withinPortal,
 			...props.portalProps
 		}, () => (0, vue.h)(Paper, {
 			...attrs,
-			ref: ((value) => floating.ref(value?.$el ?? value)),
+			ref: ((value) => {
+				const node = value?.$el ?? value;
+				rootRef.value = node;
+				floating.ref(node);
+			}),
 			shadow: props.shadow,
 			radius: props.radius,
 			withBorder: props.withBorder,
@@ -20873,13 +21095,20 @@ var FloatingWindow = (0, vue.defineComponent)({
 			}),
 			style: [
 				getStyles("root").style,
-				{ "--floating-window-z-index": String(props.zIndex) },
+				{
+					"--floating-window-z-index": String(props.zIndex),
+					"--floating-window-width": props.dimensions?.initialWidth == null ? void 0 : `${clampDimension(props.dimensions.initialWidth, props.dimensions.minWidth, props.dimensions.maxWidth)}px`,
+					"--floating-window-height": props.dimensions?.initialHeight == null ? void 0 : `${clampDimension(props.dimensions.initialHeight, props.dimensions.minHeight, props.dimensions.maxHeight)}px`
+				},
 				attrs.style
 			]
 		}, () => slots.default?.()));
 	}
 });
-Object.assign(FloatingWindow, { classes: FloatingWindow_module_default });
+Object.assign(FloatingWindow, {
+	classes: FloatingWindow_module_default,
+	ResizeHandle: FloatingWindowResizeHandle
+});
 //#endregion
 //#region src/components/Slider/Slider.context.ts
 var [provideSliderContext, useSliderContext] = createSafeContext("SliderProvider was not found in tree");
@@ -21222,15 +21451,15 @@ var Track = (0, vue.defineComponent)({
 	}
 });
 var Slider_module_default = {
-	root: "_root_16d42_1",
-	label: "_label_16d42_39",
-	thumb: "_thumb_16d42_65",
-	trackContainer: "_trackContainer_16d42_131",
-	track: "_track_16d42_131",
-	bar: "_bar_16d42_187",
-	markWrapper: "_markWrapper_16d42_215",
-	mark: "_mark_16d42_215",
-	markLabel: "_markLabel_16d42_257"
+	root: "_root_1osrz_1",
+	label: "_label_1osrz_39",
+	thumb: "_thumb_1osrz_65",
+	trackContainer: "_trackContainer_1osrz_131",
+	track: "_track_1osrz_131",
+	bar: "_bar_1osrz_187",
+	markWrapper: "_markWrapper_1osrz_215",
+	mark: "_mark_1osrz_215",
+	markLabel: "_markLabel_1osrz_257"
 };
 //#endregion
 //#region src/components/Slider/Slider/Slider.ts
@@ -21467,7 +21696,7 @@ var Slider = withBoxProps((0, vue.defineComponent)({
 				max: domain.value[1]
 			});
 			const scaled = props.scale(current.value);
-			const label = slots.label ? slots.label({ value: scaled }) : typeof props.label === "function" ? props.label(scaled) : props.label;
+			const label = rawProps.label !== void 0 ? typeof props.label === "function" ? props.label(scaled) : props.label : slots.label?.({ value: scaled }) ?? (typeof props.label === "function" ? props.label(scaled) : props.label);
 			const start = typeof props.startPointValue === "number" && !props.inverted ? getPosition$1({
 				value: props.startPointValue,
 				min: domain.value[0],
@@ -21800,10 +22029,10 @@ var RangeSlider = (0, vue.defineComponent)({
 				value: props.scale(current.value[index]),
 				position: positions[index],
 				dragging: move.active.value && activeThumb.value === index,
-				label: slots.label ? slots.label({
+				label: rawProps.label !== void 0 ? typeof props.label === "function" ? props.label(props.scale(current.value[index])) : props.label : slots.label?.({
 					value: props.scale(current.value[index]),
 					index
-				}) : typeof props.label === "function" ? props.label(props.scale(current.value[index])) : props.label,
+				}) ?? (typeof props.label === "function" ? props.label(props.scale(current.value[index])) : props.label),
 				labelAlwaysOn: props.labelAlwaysOn,
 				thumbLabel: props.thumbLabel?.[index],
 				thumbValueText: props.thumbValueText,
@@ -21814,7 +22043,7 @@ var RangeSlider = (0, vue.defineComponent)({
 				onMousedown: () => activeThumb.value = index,
 				onFocus: () => focused.value = index,
 				onKeydown: (event) => keydown(index, event)
-			}, () => slots.thumbChildren ? slots.thumbChildren({ index }) : props.thumbChildren?.[index])) }), props.name ? [(0, vue.h)("input", {
+			}, () => props.thumbChildren !== void 0 ? props.thumbChildren[index] : slots.thumbChildren?.({ index }))) }), props.name ? [(0, vue.h)("input", {
 				type: "hidden",
 				name: `${props.name}_from`,
 				value: current.value[0],
@@ -24090,6 +24319,7 @@ function flattenChildren$1(children) {
 var SplitterBase = (0, vue.defineComponent)({
 	name: "Splitter",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		orientation: {
 			type: String,
@@ -24236,7 +24466,7 @@ var SplitterBase = (0, vue.defineComponent)({
 						...getStyles("thumb"),
 						"data-orientation": props.orientation,
 						"data-active": splitter.activeHandle === handleIndex || void 0
-					}, [props.handleIcon !== void 0 ? props.handleIcon : (0, vue.h)(props.orientation === "vertical" ? GripHorizontalIcon : GripVerticalIcon)]) : void 0));
+					}, [props.handleIcon !== void 0 || slots.handleIcon ? resolveNode(props.handleIcon, slots.handleIcon) : (0, vue.h)(props.orientation === "vertical" ? GripHorizontalIcon : GripVerticalIcon)]) : void 0));
 				}
 				items.push((0, vue.cloneVNode)(child, {
 					key: `pane-${index}`,
@@ -24496,7 +24726,10 @@ var TreeNode = (0, vue.defineComponent)({
 	},
 	setup(props) {
 		const element = (0, vue.ref)(null);
-		const hasChildren = () => Array.isArray(props.node.children) || !!props.node.hasChildren && !Array.isArray(props.node.children);
+		const hasChildren = () => {
+			const hasLoadedChildren = Array.isArray(props.node.children) && props.node.children.length > 0;
+			return hasLoadedChildren || !!props.node.hasChildren && !hasLoadedChildren;
+		};
 		const expanded = () => props.controller.expandedState.value[props.node.value] || false;
 		const dnd = useTreeNodeDragDrop({
 			nodeValue: props.node.value,
@@ -24512,13 +24745,20 @@ var TreeNode = (0, vue.defineComponent)({
 			if (event.code === "ArrowRight") {
 				event.stopPropagation();
 				event.preventDefault();
-				if (expanded()) element.value?.querySelector("[role=treeitem]")?.focus();
-				else if (hasChildren()) props.controller.expand(props.node.value);
+				if (expanded()) {
+					const nextNode = element.value?.querySelector("[role=treeitem]");
+					nextNode?.setAttribute("data-focus-ring", "true");
+					nextNode?.focus();
+				} else if (hasChildren()) props.controller.expand(props.node.value);
 			} else if (event.code === "ArrowLeft") {
 				event.stopPropagation();
 				event.preventDefault();
 				if (expanded() && hasChildren()) props.controller.collapse(props.node.value);
-				else if (props.isSubtree) element.value?.parentElement?.closest("[role=treeitem]")?.focus();
+				else if (props.isSubtree) {
+					const parentNode = element.value?.parentElement?.closest("[role=treeitem]");
+					parentNode?.setAttribute("data-focus-ring", "true");
+					parentNode?.focus();
+				}
 			} else if (event.code === "ArrowDown" || event.code === "ArrowUp") {
 				const root = element.value?.closest("[data-tree-root]");
 				if (!root || !element.value) return;
@@ -24527,6 +24767,7 @@ var TreeNode = (0, vue.defineComponent)({
 				const nodes = Array.from(root.querySelectorAll("[role=treeitem]")).filter((node) => visible(node, root));
 				const index = nodes.indexOf(element.value);
 				const next = nodes[event.code === "ArrowDown" ? index + 1 : index - 1];
+				next?.setAttribute("data-focus-ring", "true");
 				next?.focus();
 				if (event.shiftKey && next) props.controller.setSelectedState(getValuesRange(props.controller.anchorNode.value, next.dataset.value, props.flatValues));
 			} else if (event.code === "Space") {
@@ -24611,6 +24852,10 @@ var TreeNode = (0, vue.defineComponent)({
 				"data-level": props.level,
 				tabindex: props.rootIndex === 0 ? 0 : -1,
 				onKeydown,
+				onBlur: (event) => {
+					const currentTarget = event.currentTarget;
+					if (!currentTarget.contains(event.relatedTarget)) currentTarget.removeAttribute("data-focus-ring");
+				},
 				ref: element
 			}, [
 				label,
@@ -24871,12 +25116,12 @@ function useTree(input = {}) {
 	};
 }
 var Tree_module_default = {
-	root: "_root_42z3r_7",
-	subtree: "_subtree_42z3r_13",
-	node: "_node_42z3r_18",
-	label: "_label_42z3r_26",
-	flatLine: "_flatLine_42z3r_125",
-	flatLineClosing: "_flatLineClosing_42z3r_151"
+	root: "_root_ea12t_7",
+	subtree: "_subtree_ea12t_13",
+	node: "_node_ea12t_18",
+	label: "_label_ea12t_27",
+	flatLine: "_flatLine_ea12t_126",
+	flatLineClosing: "_flatLineClosing_ea12t_152"
 };
 //#endregion
 //#region src/components/Tree/Tree.ts
@@ -24887,6 +25132,7 @@ var varsResolver$8 = createVarsResolver((_, { levelOffset }) => ({ root: { "--le
 var Tree = withBoxProps((0, vue.defineComponent)({
 	name: "Tree",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		component: {
 			type: [
@@ -25002,7 +25248,7 @@ var Tree = withBoxProps((0, vue.defineComponent)({
 		(0, vue.onBeforeUnmount)(() => document.removeEventListener("mousedown", outside));
 		return () => {
 			const flatValues = getFlatValues(props.data);
-			const renderNode = props.renderNode || (slots.node ? (payload) => slots.node?.(payload) : void 0);
+			const renderNode = props.renderNode || (slots.renderNode ? (payload) => slots.renderNode?.(payload) : slots.node ? (payload) => slots.node?.(payload) : void 0);
 			const nodes = props.data.map((node, index) => (0, vue.h)(TreeNode, {
 				key: node.value,
 				node,
@@ -25289,7 +25535,7 @@ function filterTreeData(data, query, filter = defaultTreeNodeFilter) {
 function flattenTo$1(acc, data, state, parent, level, ancestorIsLast) {
 	data.forEach((node, index) => {
 		const isLast = index === data.length - 1;
-		const loaded = Array.isArray(node.children);
+		const loaded = Array.isArray(node.children) && node.children.length > 0;
 		const hasChildren = loaded || !!node.hasChildren && !loaded;
 		const expanded = state[node.value] || false;
 		const linesPath = [];
@@ -25783,6 +26029,10 @@ var ModalRoot = (0, vue.defineComponent)({
 			type: Function,
 			required: true
 		},
+		keepMounted: {
+			type: Boolean,
+			default: false
+		},
 		centered: Boolean,
 		fullScreen: Boolean,
 		radius: [String, Number],
@@ -25845,6 +26095,7 @@ var ModalRoot = (0, vue.defineComponent)({
 			...attrs,
 			opened: props.opened,
 			onClose: props.onClose,
+			keepMounted: props.keepMounted,
 			unstyled: props.unstyled,
 			...getStyles("root"),
 			mod: {
@@ -25899,6 +26150,10 @@ var ModalBaseComponent = (0, vue.defineComponent)({
 			type: Function,
 			required: true
 		},
+		keepMounted: {
+			type: Boolean,
+			default: false
+		},
 		title: {
 			type: null,
 			default: void 0
@@ -25921,7 +26176,8 @@ var ModalBaseComponent = (0, vue.defineComponent)({
 			return (0, vue.h)(ModalRoot, {
 				...attrs,
 				opened: props.opened,
-				onClose: props.onClose
+				onClose: props.onClose,
+				keepMounted: props.keepMounted
 			}, { default: () => [props.withOverlay && (0, vue.h)(ModalOverlay, props.overlayProps), (0, vue.h)(ModalContent, null, { default: () => [header && (0, vue.h)(ModalHeader, null, { default: () => [hasNode(title) && (0, vue.h)(ModalTitle, null, { default: () => title }), props.withCloseButton && (0, vue.h)(ModalCloseButton, props.closeButtonProps)] }), (0, vue.h)(ModalBody, null, { default: () => slots.default?.() })] })] });
 		};
 	}
@@ -26046,6 +26302,10 @@ var DrawerRoot = (0, vue.defineComponent)({
 			type: Function,
 			required: true
 		},
+		keepMounted: {
+			type: Boolean,
+			default: false
+		},
 		position: {
 			type: String,
 			default: "left"
@@ -26105,6 +26365,7 @@ var DrawerRoot = (0, vue.defineComponent)({
 			...attrs,
 			opened: props.opened,
 			onClose: props.onClose,
+			keepMounted: props.keepMounted,
 			unstyled: props.unstyled,
 			...getStyles("root"),
 			transitionProps: {
@@ -26163,6 +26424,10 @@ var DrawerBaseComponent = (0, vue.defineComponent)({
 			type: Function,
 			required: true
 		},
+		keepMounted: {
+			type: Boolean,
+			default: false
+		},
 		title: {
 			type: null,
 			default: void 0
@@ -26220,6 +26485,7 @@ var DrawerBaseComponent = (0, vue.defineComponent)({
 				...attrs,
 				opened: props.opened,
 				onClose: props.onClose,
+				keepMounted: props.keepMounted,
 				zIndex: resolvedZIndex.value,
 				...stackProps.value
 			}, { default: () => [props.withOverlay && (0, vue.h)(DrawerOverlay, {
@@ -26244,14 +26510,17 @@ var Drawer = Object.assign(DrawerBaseComponent, {
 });
 //#endregion
 //#region src/utils/Floating/FloatingArrow/get-arrow-position-styles.ts
+function px$1(value) {
+	return value === void 0 ? void 0 : `${value}px`;
+}
 function horizontalSide(placement, arrowY, offset, position) {
-	if (placement === "center" || position === "center") return { top: arrowY };
-	return placement === "end" ? { bottom: offset } : { top: offset };
+	if (placement === "center" || position === "center") return { top: px$1(arrowY) };
+	return placement === "end" ? { bottom: px$1(offset) } : { top: px$1(offset) };
 }
 function verticalSide(placement, arrowX, offset, position, dir) {
-	if (placement === "center" || position === "center") return { left: arrowX };
-	if (placement === "end") return { [dir === "ltr" ? "right" : "left"]: offset };
-	return { [dir === "ltr" ? "left" : "right"]: offset };
+	if (placement === "center" || position === "center") return { left: px$1(arrowX) };
+	if (placement === "end") return { [dir === "ltr" ? "right" : "left"]: px$1(offset) };
+	return { [dir === "ltr" ? "left" : "right"]: px$1(offset) };
 }
 var radiusBySide = {
 	bottom: "borderTopLeftRadius",
@@ -26272,15 +26541,15 @@ function mergeStyles(position, size, dir) {
 		const startShape = placement === "start" !== (dir === "rtl");
 		return {
 			...base,
-			[side === "bottom" ? "top" : "bottom"]: -size,
-			[physical]: 0,
+			[side === "bottom" ? "top" : "bottom"]: px$1(-size),
+			[physical]: px$1(0),
 			clipPath: side === "bottom" ? startShape ? "polygon(0% 0%, 0% 100%, 100% 100%)" : "polygon(100% 0%, 0% 100%, 100% 100%)" : startShape ? "polygon(0% 0%, 100% 0%, 0% 100%)" : "polygon(0% 0%, 100% 0%, 100% 100%)"
 		};
 	}
 	return {
 		...base,
-		[side === "left" ? "right" : "left"]: -size,
-		[placement === "start" ? "top" : "bottom"]: 0,
+		[side === "left" ? "right" : "left"]: px$1(-size),
+		[placement === "start" ? "top" : "bottom"]: px$1(0),
 		clipPath: side === "left" ? placement === "start" ? "polygon(0% 0%, 100% 0%, 0% 100%)" : "polygon(0% 0%, 0% 100%, 100% 100%)" : placement === "start" ? "polygon(0% 0%, 100% 0%, 100% 100%)" : "polygon(100% 0%, 0% 100%, 100% 100%)"
 	};
 }
@@ -26297,7 +26566,7 @@ function getArrowPositionStyles(input) {
 		position: "absolute",
 		[radiusBySide[side]]: `${input.arrowRadius}px`
 	};
-	const edge = -input.arrowSize / 2;
+	const edge = px$1(-input.arrowSize / 2);
 	if (side === "left") return {
 		...base,
 		...horizontalSide(placement, input.arrowY, input.arrowOffset, input.arrowPosition),
@@ -26373,6 +26642,7 @@ var FloatingArrow = (0, vue.defineComponent)({
 	setup(props, { attrs }) {
 		const { dir } = useDirection();
 		return () => props.visible ? (0, vue.h)("div", {
+			role: "presentation",
 			...attrs,
 			style: [attrs.style, getArrowPositionStyles({
 				...props,
@@ -26417,7 +26687,7 @@ function useDelayedHover(input) {
 }
 //#endregion
 //#region src/utils/Floating/use-context-menu-handlers.ts
-function call$3(handler, event) {
+function call$4(handler, event) {
 	if (Array.isArray(handler)) handler.forEach((item) => typeof item === "function" && item(event));
 	else if (typeof handler === "function") handler(event);
 }
@@ -26469,11 +26739,11 @@ function useContextMenuHandlers(options) {
 	});
 	return {
 		onMousedown: (event) => {
-			call$3(options.childProps.onMousedown ?? options.childProps.onMouseDown, event);
+			call$4(options.childProps.onMousedown ?? options.childProps.onMouseDown, event);
 			if (!options.disabled && event.button === 2) event.stopPropagation();
 		},
 		onContextmenu: (event) => {
-			call$3(options.childProps.onContextmenu ?? options.childProps.onContextMenu, event);
+			call$4(options.childProps.onContextmenu ?? options.childProps.onContextMenu, event);
 			if (options.disabled || event.defaultPrevented) return;
 			event.preventDefault();
 			if (gestureHandled.value) return;
@@ -26481,19 +26751,19 @@ function useContextMenuHandlers(options) {
 			if (touchActive.value) gestureHandled.value = true;
 		},
 		onTouchstart: (event) => {
-			call$3(options.childProps.onTouchstart ?? options.childProps.onTouchStart, event);
+			call$4(options.childProps.onTouchstart ?? options.childProps.onTouchStart, event);
 			longPress.onTouchstart?.(event);
 		},
 		onTouchend: (event) => {
-			call$3(options.childProps.onTouchend ?? options.childProps.onTouchEnd, event);
+			call$4(options.childProps.onTouchend ?? options.childProps.onTouchEnd, event);
 			longPress.onTouchend?.(event);
 		},
 		onTouchcancel: (event) => {
-			call$3(options.childProps.onTouchcancel ?? options.childProps.onTouchCancel, event);
+			call$4(options.childProps.onTouchcancel ?? options.childProps.onTouchCancel, event);
 			longPress.onTouchcancel?.(event);
 		},
 		onTouchmove: (event) => {
-			call$3(options.childProps.onTouchmove ?? options.childProps.onTouchMove, event);
+			call$4(options.childProps.onTouchmove ?? options.childProps.onTouchMove, event);
 			longPress.onTouchmove?.(event);
 		},
 		style: options.disabled ? options.childProps.style : {
@@ -26549,7 +26819,7 @@ function one$3(slots, name) {
 	if (children.length !== 1) throw new Error(`${name} component children should be a single element or component that accepts ref`);
 	return children[0];
 }
-function call$2(handler, event) {
+function call$3(handler, event) {
 	if (Array.isArray(handler)) handler.forEach((fn) => fn?.(event));
 	else handler?.(event);
 }
@@ -26589,7 +26859,7 @@ var PopoverTarget = (0, vue.defineComponent)({
 			});
 			if (!ctx.controlled) forwarded.onClick = (event) => {
 				ctx.onToggle();
-				call$2(childProps.onClick, event);
+				call$3(childProps.onClick, event);
 			};
 			return (0, vue.cloneVNode)(child, forwarded, true);
 		};
@@ -26665,7 +26935,7 @@ var PopoverDropdown = (0, vue.defineComponent)({
 			"data-position": ctx.placement,
 			"data-fixed": ctx.floatingStrategy === "fixed" || void 0,
 			onKeydownCapture: (event) => {
-				call$2(attrs.onKeydownCapture, event);
+				call$3(attrs.onKeydownCapture, event);
 				if (event.key === "Escape" && ctx.closeOnEscape) {
 					ctx.onClose();
 					ctx.onDismiss?.();
@@ -26819,7 +27089,11 @@ var PopoverBase = (0, vue.defineComponent)({
 					...shiftOptions
 				};
 			}));
-			result.push((0, _floating_ui_vue.arrow)({ element: arrowElement }));
+			if (props.middlewares?.inline) result.push((0, _floating_ui_vue.inline)(typeof props.middlewares.inline === "object" ? props.middlewares.inline : void 0));
+			result.push((0, _floating_ui_vue.arrow)({
+				element: arrowElement,
+				padding: props.arrowOffset
+			}));
 			if (props.middlewares?.size || props.width === "target") result.push((0, _floating_ui_vue.size)({
 				...typeof props.middlewares?.size === "object" ? props.middlewares.size : {},
 				apply: ({ rects, availableWidth, availableHeight, elements, ...rest }) => {
@@ -27497,7 +27771,7 @@ var Tooltip = Object.assign(TooltipBase, {
 var [provideHoverCardContext, useHoverCardContext] = createSafeContext("HoverCard component was not found in the tree");
 //#endregion
 //#region src/components/HoverCard/HoverCardDropdown/HoverCardDropdown.ts
-function call$1(handler, event) {
+function call$2(handler, event) {
 	if (Array.isArray(handler)) handler.forEach((fn) => fn?.(event));
 	else handler?.(event);
 }
@@ -27509,11 +27783,11 @@ var HoverCardDropdown = (0, vue.defineComponent)({
 		return () => (0, vue.h)(PopoverDropdown, {
 			...attrs,
 			onMouseenter: (event) => {
-				call$1(attrs.onMouseenter ?? attrs.onMouseEnter, event);
+				call$2(attrs.onMouseenter ?? attrs.onMouseEnter, event);
 				ctx.openDropdown();
 			},
 			onMouseleave: (event) => {
-				call$1(attrs.onMouseleave ?? attrs.onMouseLeave, event);
+				call$2(attrs.onMouseleave ?? attrs.onMouseLeave, event);
 				ctx.closeDropdown();
 			}
 		}, slots);
@@ -27716,7 +27990,7 @@ var Menu_module_default = {
 };
 //#endregion
 //#region src/components/Menu/Menu.ts
-function call(handler, event) {
+function call$1(handler, event) {
 	if (Array.isArray(handler)) handler.forEach((fn) => fn?.(event));
 	else handler?.(event);
 }
@@ -27837,6 +28111,9 @@ var MenuBase = (0, vue.defineComponent)({
 			get hasSearch() {
 				return searchCount.value > 0;
 			},
+			get withInitialFocusPlaceholder() {
+				return props.withInitialFocusPlaceholder;
+			},
 			registerSearch: () => {
 				searchCount.value += 1;
 				return () => {
@@ -27936,7 +28213,7 @@ var MenuDropdown = (0, vue.defineComponent)({
 			onMouseenter: ctx.trigger !== "click" ? ctx.openDropdown : void 0,
 			onMouseleave: ctx.trigger !== "click" ? ctx.closeDropdown : void 0,
 			onKeydown: (event) => {
-				call(attrs.onKeydown, event);
+				call$1(attrs.onKeydown, event);
 				if (event.defaultPrevented || ctx.hasSearch) return;
 				const root = event.currentTarget;
 				const active = document.activeElement;
@@ -27959,7 +28236,13 @@ var MenuDropdown = (0, vue.defineComponent)({
 					menuItems(root).find((item) => item.textContent?.trim().toLowerCase().startsWith(query))?.focus();
 				}
 			}
-		}, slots);
+		}, () => [ctx.withInitialFocusPlaceholder && !ctx.hasSearch ? (0, vue.h)("div", {
+			role: "presentation",
+			tabindex: -1,
+			"data-autofocus": true,
+			"data-mantine-stop-propagation": true,
+			style: { outline: 0 }
+		}) : null, slots.default?.()]);
 	}
 });
 var MenuItem = (0, vue.defineComponent)({
@@ -28018,7 +28301,7 @@ var MenuItem = (0, vue.defineComponent)({
 				}),
 				onMousedown: (event) => event.preventDefault(),
 				onClick: (event) => {
-					call(attrs.onClick, event);
+					call$1(attrs.onClick, event);
 					if (!props.disabled && !attrs["data-disabled"] && (props.closeMenuOnClick ?? ctx.closeOnItemClick)) ctx.closeDropdownImmediately();
 				}
 			}, () => [
@@ -28120,16 +28403,16 @@ var MenuSearch = (0, vue.defineComponent)({
 					}
 				},
 				onInput: (event) => {
-					call(attrs.onInput, event);
-					call(attrs.onChange, event);
+					call$1(attrs.onInput, event);
+					call$1(attrs.onChange, event);
 					clearActive(event.currentTarget.closest("[data-menu-dropdown]"));
 				},
 				onChange: (event) => {
-					call(attrs.onChange, event);
+					call$1(attrs.onChange, event);
 					clearActive(event.currentTarget.closest("[data-menu-dropdown]"));
 				},
 				onKeydown: (event) => {
-					call(attrs.onKeydown ?? attrs.onKeyDown, event);
+					call$1(attrs.onKeydown ?? attrs.onKeyDown, event);
 					if (event.defaultPrevented) return;
 					const root = event.currentTarget.closest("[data-menu-dropdown]");
 					const items = menuItems(root);
@@ -28402,13 +28685,13 @@ var MenuSubTarget = (0, vue.defineComponent)({
 			const childProps = child.props ?? {};
 			return (0, vue.cloneVNode)(child, {
 				onClick: (event) => {
-					call(childProps.onClick, event);
+					call$1(childProps.onClick, event);
 					ctx.toggleDropdown();
 				},
 				onMouseenter: ctx.openDropdown,
 				onMouseleave: ctx.closeDropdown,
 				onKeydown: (event) => {
-					call(childProps.onKeydown ?? childProps.onKeyDown, event);
+					call$1(childProps.onKeydown ?? childProps.onKeyDown, event);
 					if (event.defaultPrevented) return;
 					if (event.key === "ArrowRight") {
 						event.preventDefault();
@@ -28428,7 +28711,7 @@ var MenuSubDropdown = (0, vue.defineComponent)({
 		return () => (0, vue.h)(MenuDropdown, {
 			...attrs,
 			onKeydown: (event) => {
-				call(attrs.onKeydown, event);
+				call$1(attrs.onKeydown, event);
 				if (event.defaultPrevented) return;
 				const currentDropdown = event.currentTarget;
 				const focused = event.target;
@@ -29910,7 +30193,8 @@ var OptionsDropdown = (0, vue.defineComponent)({
 		return () => {
 			validateOptions(props.data);
 			const renderOption = props.renderOption ?? (slots.renderOption ? (input) => slots.renderOption(input) : void 0);
-			const nothingFound = props.nothingFoundMessage ?? (slots.nothingFound ? slots.nothingFound() : void 0);
+			const nothingFoundSlot = slots.nothingFoundMessage ?? slots.nothingFound;
+			const nothingFound = props.nothingFoundMessage ?? (nothingFoundSlot ? nothingFoundSlot() : void 0);
 			const data = typeof props.search === "string" ? (props.filter || defaultOptionsFilter)({
 				options: props.data,
 				search: props.filterOptions ? props.search : "",
@@ -30274,8 +30558,8 @@ var ComboboxPopoverBase = (0, vue.defineComponent)({
 			}
 			if (props.searchable) handleSearchChange("");
 		};
-		const resolveRenderOption = () => props.renderOption ?? (slots.option ? (input) => slots.option(input) : void 0);
-		const resolveNothingFound = () => resolveNode(props.nothingFoundMessage, slots.nothingFound);
+		const resolveRenderOption = () => props.renderOption ?? (slots.renderOption ?? slots.option ? (input) => (slots.renderOption ?? slots.option)(input) : void 0);
+		const resolveNothingFound = () => resolveNode(props.nothingFoundMessage, slots.nothingFoundMessage ?? slots.nothingFound);
 		const renderSearchableDropdown = () => {
 			const filteredData = (props.filter || defaultOptionsFilter)({
 				options: parsedData.value,
@@ -31127,7 +31411,7 @@ var Select = (0, vue.defineComponent)({
 				scrollAreaProps: props.scrollAreaProps
 			}, {
 				renderOption: slots.renderOption,
-				nothingFound: slots.nothingFound
+				nothingFound: slots.nothingFoundMessage ?? slots.nothingFound
 			})]), (0, vue.h)(Combobox.HiddenInput, {
 				value: current(),
 				name: attrs.name,
@@ -31489,12 +31773,13 @@ var MultiSelect = (0, vue.defineComponent)({
 						label: String(item)
 					};
 					const onRemove = () => remove(item);
-					return props.renderPill ? props.renderPill({
+					const renderPillInput = {
 						option,
 						value: item,
 						onRemove,
 						disabled
-					}) : (0, vue.h)(Pill, {
+					};
+					return props.renderPill ? props.renderPill(renderPillInput) : slots.renderPill ? slots.renderPill(renderPillInput) : (0, vue.h)(Pill, {
 						key: `${String(item)}-${index}`,
 						withRemoveButton: !readOnly && !option.disabled,
 						disabled,
@@ -31533,7 +31818,7 @@ var MultiSelect = (0, vue.defineComponent)({
 				filter: props.filter,
 				limit: props.limit,
 				filterOptions: props.searchable,
-				hiddenWhenEmpty: props.nothingFoundMessage == null && !slots.nothingFound,
+				hiddenWhenEmpty: props.nothingFoundMessage == null && !slots.nothingFoundMessage && !slots.nothingFound,
 				nothingFoundMessage: props.nothingFoundMessage,
 				value: values,
 				withCheckIcon: props.withCheckIcon,
@@ -31545,7 +31830,7 @@ var MultiSelect = (0, vue.defineComponent)({
 				scrollAreaProps: props.scrollAreaProps
 			}, {
 				renderOption: slots.renderOption,
-				nothingFound: slots.nothingFound
+				nothingFound: slots.nothingFoundMessage ?? slots.nothingFound
 			})]), (0, vue.h)(Combobox.HiddenInput, {
 				value: values,
 				valuesDivider: props.hiddenInputValuesDivider,
@@ -31764,17 +32049,17 @@ var TagsInput = (0, vue.defineComponent)({
 				rightSection: slots.rightSection,
 				default: () => (0, vue.h)(Pill.Group, null, () => [...current.map((item, index) => {
 					const onRemove = () => removeAt(index);
-					const option = lockup.value[item] ?? {
-						value: item,
-						label: item,
-						disabled: false
-					};
-					return props.renderPill ? props.renderPill({
-						option,
+					const renderPillInput = {
+						option: lockup.value[item] ?? {
+							value: item,
+							label: item,
+							disabled: false
+						},
 						value: item,
 						onRemove,
 						disabled
-					}) : (0, vue.h)(Pill, {
+					};
+					return props.renderPill ? props.renderPill(renderPillInput) : slots.renderPill ? slots.renderPill(renderPillInput) : (0, vue.h)(Pill, {
 						key: `${item}-${index}`,
 						withRemoveButton: !readOnly,
 						disabled,
@@ -31825,7 +32110,7 @@ var TagsInput = (0, vue.defineComponent)({
 				search: search(),
 				filter: props.filter,
 				limit: props.limit,
-				hiddenWhenEmpty: props.nothingFoundMessage == null && !slots.nothingFound,
+				hiddenWhenEmpty: props.nothingFoundMessage == null && !slots.nothingFoundMessage && !slots.nothingFound,
 				nothingFoundMessage: props.nothingFoundMessage,
 				withScrollArea: props.withScrollArea,
 				maxDropdownHeight: props.maxDropdownHeight,
@@ -31833,7 +32118,7 @@ var TagsInput = (0, vue.defineComponent)({
 				scrollAreaProps: props.scrollAreaProps
 			}, {
 				renderOption: slots.renderOption,
-				nothingFound: slots.nothingFound
+				nothingFound: slots.nothingFoundMessage ?? slots.nothingFound
 			})]), (0, vue.h)(Combobox.HiddenInput, {
 				value: current,
 				valuesDivider: props.hiddenInputValuesDivider,
@@ -31895,6 +32180,7 @@ var ColorInput_module_default = {
 var ColorInput = (0, vue.defineComponent)({
 	name: "ColorInput",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		modelValue: String,
 		value: String,
@@ -31989,7 +32275,7 @@ var ColorInput = (0, vue.defineComponent)({
 				class: ColorInput_module_default.eyeDropperButton,
 				"aria-label": "Pick color from screen",
 				onClick: useEyeDropper
-			}, () => props.eyeDropperIcon ?? (0, vue.h)(EyeDropperIcon, { class: ColorInput_module_default.eyeDropperIcon })) : void 0;
+			}, () => resolveNode(props.eyeDropperIcon, slots.eyeDropperIcon) ?? (0, vue.h)(EyeDropperIcon, { class: ColorInput_module_default.eyeDropperIcon })) : void 0;
 			return (0, vue.h)(Popover, {
 				position: "bottom-start",
 				offset: 5,
@@ -32072,7 +32358,7 @@ function flattenTo(acc, data, expandedSet, parent, level, parentGuides) {
 	for (let i = 0; i < data.length; i++) {
 		const node = data[i];
 		const isLast = i === data.length - 1;
-		const hasLoadedChildren = Array.isArray(node.children);
+		const hasLoadedChildren = Array.isArray(node.children) && node.children.length > 0;
 		const hasAsyncChildren = !!node.hasChildren && !hasLoadedChildren;
 		const hasChildren = hasLoadedChildren || hasAsyncChildren;
 		const expanded = expandedSet.has(node.value);
@@ -32185,6 +32471,11 @@ var TreeSelectOption = (0, vue.defineComponent)({
 			const paddingInlineStart = BASE_PADDING + (props.level - 1) * LEVEL_OFFSET + (props.withLines && props.level > 1 ? LINE_CONTENT_GAP : 0) + (!props.hasChildren ? OPTION_GAP : 0);
 			const isActive = props.selected || props.checked;
 			const ariaChecked = props.showCheckbox ? props.indeterminate && !props.checked ? "mixed" : props.checked : void 0;
+			const expand = (event) => {
+				event?.preventDefault();
+				event?.stopPropagation();
+				if (props.hasChildren) props.onToggleExpand?.(props.node.value);
+			};
 			const payload = {
 				node: props.node,
 				level: props.level,
@@ -32192,7 +32483,8 @@ var TreeSelectOption = (0, vue.defineComponent)({
 				hasChildren: props.hasChildren,
 				selected: props.selected,
 				checked: props.checked,
-				indeterminate: props.indeterminate
+				indeterminate: props.indeterminate,
+				expand
 			};
 			const lineElements = props.withLines && props.level > 1 ? [
 				...props.lineGuides.map((show, g) => show ? (0, vue.h)("span", {
@@ -32235,16 +32527,10 @@ var TreeSelectOption = (0, vue.defineComponent)({
 					"aria-label": props.expanded ? props.chevronAriaLabels?.collapse ?? "Collapse" : props.chevronAriaLabels?.expand ?? "Expand",
 					onMousedown: (event) => event.preventDefault(),
 					onClick: (event) => {
-						event.preventDefault();
-						event.stopPropagation();
-						props.onToggleExpand?.(props.node.value);
+						expand(event);
 					},
 					onKeydown: (event) => {
-						if (event.key === "Enter") {
-							event.preventDefault();
-							event.stopPropagation();
-							props.onToggleExpand?.(props.node.value);
-						}
+						if (event.key === "Enter") expand(event);
 					}
 				}, (0, vue.h)(AccordionChevron, { size: "80%" })) : null,
 				props.showCheckbox ? (0, vue.h)(CheckboxIndicator, {
@@ -32459,7 +32745,8 @@ var TreeSelect = (0, vue.defineComponent)({
 			const multiValues = selectedArray();
 			const hasValue = isMulti() ? multiValues.length > 0 : current() != null;
 			const canClear = props.clearable && hasValue && !disabled && !readOnly;
-			const nothingFound = props.nothingFoundMessage ?? (slots.nothingFound ? slots.nothingFound() : void 0);
+			const nothingFoundSlot = slots.nothingFoundMessage ?? slots.nothingFound;
+			const nothingFound = props.nothingFoundMessage ?? (nothingFoundSlot ? nothingFoundSlot() : void 0);
 			const renderNode = props.renderNode ?? (slots.renderNode ? (payload) => slots.renderNode(payload) : void 0);
 			const clear = (event) => {
 				event.stopPropagation();
@@ -32598,6 +32885,580 @@ Object.assign(TreeSelect, { classes: {
 	...Combobox.classes,
 	...TreeSelect_module_default
 } });
+var Cascader_module_default = {
+	columnsList: "_columnsList_1xc8g_1",
+	column: "_column_1xc8g_1",
+	columnScroll: "_columnScroll_1xc8g_21",
+	columnsOverflow: "_columnsOverflow_1xc8g_26",
+	columnOption: "_columnOption_1xc8g_78",
+	flatOption: "_flatOption_1xc8g_127",
+	columnOptionLabel: "_columnOptionLabel_1xc8g_134",
+	columnOptionIcon: "_columnOptionIcon_1xc8g_141",
+	columnOptionCheck: "_columnOptionCheck_1xc8g_160",
+	columnEmpty: "_columnEmpty_1xc8g_172"
+};
+//#endregion
+//#region src/components/Cascader/cascader-utils.ts
+function cascaderOptionHasChildren(option) {
+	return Array.isArray(option.children) && option.children.length > 0;
+}
+function getCascaderColumns(data, activePath) {
+	const columns = [data];
+	let level = data;
+	for (let index = 0; index < activePath.length; index++) {
+		const node = level.find((option) => option.value === activePath[index]);
+		if (!node) break;
+		if (cascaderOptionHasChildren(node) && index < activePath.length - 1) {
+			columns.push(node.children);
+			level = node.children;
+		} else break;
+	}
+	return columns;
+}
+function getCascaderPathOptions(data, value) {
+	if (!value?.length) return [];
+	const result = [];
+	let level = data;
+	for (const current of value) {
+		const option = level?.find((item) => item.value === current);
+		if (!option) break;
+		result.push(option);
+		level = option.children;
+	}
+	return result;
+}
+function flattenCascaderPaths(data) {
+	const result = [];
+	const walk = (nodes, parentPath, parentOptions, parentDisabled) => {
+		nodes.forEach((node) => {
+			const path = [...parentPath, node.value];
+			const options = [...parentOptions, node];
+			const disabled = parentDisabled || !!node.disabled;
+			const leaf = !cascaderOptionHasChildren(node);
+			result.push({
+				path,
+				options,
+				leaf,
+				disabled
+			});
+			if (!leaf) walk(node.children, path, options, disabled);
+		});
+	};
+	walk(data, [], [], false);
+	return result;
+}
+//#endregion
+//#region src/components/Cascader/Cascader.ts
+var optionLabelToString = (option) => typeof option.label === "string" || typeof option.label === "number" ? String(option.label) : option.value;
+var pathsEqual = (first, second) => !!first && !!second && first.length === second.length && first.every((item, index) => item === second[index]);
+var findEnabledIndex = (options, from, direction) => {
+	let index = from + direction;
+	while (index >= 0 && index < options.length) {
+		if (!options[index].disabled) return index;
+		index += direction;
+	}
+	return -1;
+};
+var call = (handler, event) => {
+	if (Array.isArray(handler)) handler.forEach((item) => item?.(event));
+	else if (typeof handler === "function") handler(event);
+};
+var Cascader = (0, vue.defineComponent)({
+	name: "Cascader",
+	inheritAttrs: false,
+	slots: Object,
+	props: {
+		data: {
+			type: Array,
+			required: true
+		},
+		modelValue: Array,
+		value: Array,
+		defaultValue: Array,
+		onChange: Function,
+		changeOnSelect: Boolean,
+		closeOnSelect: {
+			type: Boolean,
+			default: void 0
+		},
+		allowDeselect: {
+			type: Boolean,
+			default: true
+		},
+		withCheckIcon: {
+			type: Boolean,
+			default: true
+		},
+		checkIconPosition: {
+			type: String,
+			default: "right"
+		},
+		withColumns: {
+			type: Boolean,
+			default: true
+		},
+		expandTrigger: {
+			type: String,
+			default: "click"
+		},
+		searchable: Boolean,
+		searchValue: String,
+		defaultSearchValue: String,
+		onSearchChange: Function,
+		filter: Function,
+		renderSearchOption: Function,
+		formatValue: Function,
+		renderOption: Function,
+		separator: {
+			type: null,
+			default: void 0
+		},
+		columnWidth: {
+			type: [Number, String],
+			default: 200
+		},
+		maxDisplayedLevels: {
+			type: Number,
+			default: 3
+		},
+		previousLevelsControlLabel: {
+			type: String,
+			default: "Show previous levels"
+		},
+		nextLevelsControlLabel: {
+			type: String,
+			default: "Show next levels"
+		},
+		maxDropdownHeight: {
+			type: [Number, String],
+			default: 260
+		},
+		nothingFoundMessage: {
+			type: null,
+			default: void 0
+		},
+		clearable: Boolean,
+		clearSectionMode: {
+			type: String,
+			default: "both"
+		},
+		clearButtonProps: Object,
+		onClear: Function,
+		dropdownOpened: {
+			type: Boolean,
+			default: void 0
+		},
+		defaultDropdownOpened: Boolean,
+		onDropdownOpen: Function,
+		onDropdownClose: Function,
+		comboboxProps: Object,
+		scrollAreaProps: Object,
+		chevronColor: String,
+		hiddenInputProps: Object,
+		openOnFocus: {
+			type: Boolean,
+			default: true
+		},
+		readOnly: Boolean,
+		disabled: Boolean,
+		size: {
+			type: [String, Number],
+			default: "sm"
+		},
+		classNames: [Object, Function],
+		styles: [Object, Function],
+		unstyled: Boolean
+	},
+	emits: ["update:modelValue", "update:searchValue"],
+	setup(props, { attrs, emit, slots }) {
+		const id = (0, _mantine_vue_hooks.useId)(attrs.id);
+		const internalValue = (0, vue.ref)(props.defaultValue ?? null);
+		const currentValue = (0, vue.computed)(() => props.modelValue ?? props.value ?? internalValue.value);
+		const pathOptions = (0, vue.computed)(() => getCascaderPathOptions(props.data, currentValue.value));
+		const separatorString = (0, vue.computed)(() => typeof props.separator === "string" || typeof props.separator === "number" ? String(props.separator) : "/");
+		const separatorContent = () => resolveNode(props.separator, slots.separator) ?? "/";
+		const nothingFoundContent = () => resolveNode(props.nothingFoundMessage, slots.nothingFoundMessage ?? slots.nothingFound);
+		const displayString = (0, vue.computed)(() => {
+			if (!currentValue.value || pathOptions.value.length === 0) return "";
+			const formatted = props.formatValue?.({
+				value: currentValue.value,
+				options: pathOptions.value
+			});
+			if (typeof formatted === "string" || typeof formatted === "number") return String(formatted);
+			return pathOptions.value.map(optionLabelToString).join(` ${separatorString.value} `);
+		});
+		const internalSearch = (0, vue.ref)(props.defaultSearchValue ?? (props.searchable && props.defaultValue ? getCascaderPathOptions(props.data, props.defaultValue).map(optionLabelToString).join(` ${separatorString.value} `) : ""));
+		const search = (0, vue.computed)(() => props.searchValue ?? internalSearch.value);
+		const activePath = (0, vue.ref)(currentValue.value ? [...currentValue.value] : []);
+		const keyboardNav = (0, vue.ref)(false);
+		const windowOffset = (0, vue.ref)(0);
+		const canInteract = (0, vue.computed)(() => !props.readOnly && !props.disabled);
+		const shouldCloseOnSelect = (0, vue.computed)(() => props.closeOnSelect ?? !props.allowDeselect);
+		const setSearch = (value) => {
+			if (props.searchValue === void 0) internalSearch.value = value;
+			props.onSearchChange?.(value);
+			emit("update:searchValue", value);
+		};
+		const setValue = (value) => {
+			if (props.modelValue === void 0 && props.value === void 0) internalValue.value = value;
+			props.onChange?.(value, getCascaderPathOptions(props.data, value));
+			emit("update:modelValue", value);
+		};
+		const resetActivePath = () => {
+			activePath.value = currentValue.value ? [...currentValue.value] : [];
+		};
+		const combobox = useCombobox({
+			opened: () => props.dropdownOpened,
+			defaultOpened: props.defaultDropdownOpened,
+			onDropdownOpen: () => {
+				props.onDropdownOpen?.();
+				resetActivePath();
+			},
+			onDropdownClose: () => {
+				props.onDropdownClose?.();
+				if (props.searchable) setSearch(currentValue.value ? displayString.value : "");
+			}
+		});
+		(0, vue.watch)(currentValue, (value) => {
+			if (props.searchable) setSearch(value ? displayString.value : "");
+		}, { deep: true });
+		(0, vue.watch)(activePath, () => windowOffset.value = 0, { deep: true });
+		const selectPath = (path) => {
+			setValue(props.allowDeselect && pathsEqual(currentValue.value, path) ? null : path);
+		};
+		const expandOption = (level, option) => {
+			const optionPath = [...activePath.value.slice(0, level), option.value];
+			if (cascaderOptionHasChildren(option)) {
+				const first = findEnabledIndex(option.children, -1, 1);
+				activePath.value = first >= 0 ? [...optionPath, option.children[first].value] : optionPath;
+			} else activePath.value = optionPath;
+		};
+		const finishSelection = () => {
+			if (shouldCloseOnSelect.value) combobox.closeDropdown("mouse");
+		};
+		const handleOptionClick = (level, option) => {
+			if (option.disabled) return;
+			keyboardNav.value = false;
+			const path = [...activePath.value.slice(0, level), option.value];
+			if (cascaderOptionHasChildren(option)) {
+				if (props.changeOnSelect) {
+					selectPath(path);
+					finishSelection();
+				}
+				expandOption(level, option);
+			} else {
+				selectPath(path);
+				finishSelection();
+			}
+		};
+		const handleOptionMouseEnter = (level, option) => {
+			if (option.disabled) return;
+			keyboardNav.value = false;
+			if (props.expandTrigger !== "hover") return;
+			if (cascaderOptionHasChildren(option)) expandOption(level, option);
+			else activePath.value = [...activePath.value.slice(0, level), option.value];
+		};
+		const flatPaths = (0, vue.computed)(() => flattenCascaderPaths(props.data));
+		const isSearching = (0, vue.computed)(() => props.searchable && search.value.trim().length > 0 && search.value !== displayString.value);
+		const showFlatList = (0, vue.computed)(() => isSearching.value || !props.withColumns);
+		const flatListItems = (0, vue.computed)(() => {
+			const base = flatPaths.value.filter((path) => props.changeOnSelect || path.leaf);
+			if (!isSearching.value) return base;
+			return base.filter((path) => props.filter ? props.filter(search.value, path.options) : path.options.map(optionLabelToString).join(` ${separatorString.value} `).toLowerCase().includes(search.value.trim().toLowerCase()));
+		});
+		const renderSearchLabel = (options) => {
+			if (props.renderSearchOption) return props.renderSearchOption(search.value, options);
+			if (slots.renderSearchOption) return slots.renderSearchOption({
+				query: search.value,
+				options
+			});
+			return options.flatMap((option, index) => [index ? (0, vue.h)("span", { "data-cascader-separator": true }, [
+				" ",
+				separatorContent(),
+				" "
+			]) : null, option.label ?? option.value]);
+		};
+		const renderFlatList = () => (0, vue.h)(Combobox.Options, { "aria-label": typeof attrs.label === "string" ? attrs.label : void 0 }, () => [(0, vue.h)(ScrollArea.Autosize, {
+			mah: props.maxDropdownHeight,
+			type: "scroll",
+			scrollbarSize: "var(--combobox-padding)",
+			offsetScrollbars: "y",
+			...props.scrollAreaProps
+		}, () => flatListItems.value.map((item, index) => {
+			const selected = pathsEqual(currentValue.value, item.path);
+			return (0, vue.h)(Combobox.Option, {
+				value: index,
+				active: selected,
+				disabled: item.disabled
+			}, () => (0, vue.h)("span", { class: Cascader_module_default.flatOption }, [
+				selected && props.withCheckIcon && props.checkIconPosition === "left" ? (0, vue.h)(CheckIcon, { class: Cascader_module_default.columnOptionCheck }) : null,
+				(0, vue.h)("span", { class: Cascader_module_default.columnOptionLabel }, [renderSearchLabel(item.options)]),
+				selected && props.withCheckIcon && props.checkIconPosition !== "left" ? (0, vue.h)(CheckIcon, { class: Cascader_module_default.columnOptionCheck }) : null
+			]));
+		})), flatListItems.value.length === 0 && (props.nothingFoundMessage !== void 0 || slots.nothingFoundMessage || slots.nothingFound) ? (0, vue.h)(Combobox.Empty, {}, nothingFoundContent) : null]);
+		const optionId = (level, value) => id.value ? `${id.value}-cascader-list-${level}-${value}` : void 0;
+		const renderColumns = () => {
+			const allColumns = getCascaderColumns(props.data, activePath.value);
+			const totalColumns = allColumns.length;
+			const maxLevels = props.maxDisplayedLevels > 0 ? props.maxDisplayedLevels : totalColumns;
+			const maxOffset = Math.max(0, totalColumns - maxLevels);
+			const clampedOffset = Math.min(windowOffset.value, maxOffset);
+			const windowStart = Math.max(0, maxOffset - clampedOffset);
+			const windowEnd = Math.min(totalColumns, windowStart + maxLevels);
+			const visibleColumns = allColumns.slice(windowStart, windowEnd);
+			const hiddenBefore = windowStart;
+			const hiddenAfter = totalColumns - windowEnd;
+			const focusedLevel = activePath.value.length - 1;
+			const overflowControl = (position) => (0, vue.h)(UnstyledButton, {
+				class: Cascader_module_default.columnsOverflow,
+				"data-position": position,
+				tabindex: -1,
+				"aria-label": position === "start" ? props.previousLevelsControlLabel : props.nextLevelsControlLabel,
+				title: position === "start" ? props.previousLevelsControlLabel : props.nextLevelsControlLabel,
+				onMousedown: (event) => event.preventDefault(),
+				onClick: () => {
+					windowOffset.value = position === "start" ? Math.min(maxOffset, windowOffset.value + 1) : Math.max(0, windowOffset.value - 1);
+				}
+			}, () => (0, vue.h)(AccordionChevron));
+			return (0, vue.h)("div", {
+				class: Cascader_module_default.columnsList,
+				role: "presentation",
+				onMouseleave: () => {
+					if (props.expandTrigger === "hover") resetActivePath();
+				},
+				onMousemove: () => keyboardNav.value = false
+			}, [
+				hiddenBefore > 0 ? overflowControl("start") : null,
+				...visibleColumns.map((options, index) => {
+					const level = windowStart + index;
+					const isLast = index === visibleColumns.length - 1 && hiddenAfter === 0;
+					return (0, vue.h)("div", {
+						class: Cascader_module_default.column,
+						"data-last": isLast || void 0,
+						style: {
+							width: typeof props.columnWidth === "number" ? `${props.columnWidth}px` : props.columnWidth,
+							minWidth: typeof props.columnWidth === "number" ? `${props.columnWidth}px` : props.columnWidth
+						}
+					}, [(0, vue.h)(ScrollArea.Autosize, {
+						class: Cascader_module_default.columnScroll,
+						mah: props.maxDropdownHeight,
+						type: "scroll",
+						scrollbarSize: "var(--combobox-padding)",
+						role: "listbox",
+						...props.scrollAreaProps
+					}, () => options.length ? options.map((option) => {
+						const active = activePath.value[level] === option.value;
+						const current = active && level === focusedLevel && keyboardNav.value;
+						const inPath = active && level < focusedLevel;
+						const selected = !!currentValue.value && currentValue.value.length === level + 1 && currentValue.value[level] === option.value;
+						return (0, vue.h)(UnstyledButton, {
+							id: optionId(level, option.value),
+							class: Cascader_module_default.columnOption,
+							role: "option",
+							tabindex: -1,
+							"aria-selected": current || void 0,
+							"aria-disabled": option.disabled || void 0,
+							"data-active": current || void 0,
+							"data-in-path": inPath || void 0,
+							"data-selected": selected || void 0,
+							"data-disabled": option.disabled || void 0,
+							onMousedown: (event) => event.preventDefault(),
+							onClick: () => handleOptionClick(level, option),
+							onMouseenter: () => handleOptionMouseEnter(level, option)
+						}, () => [
+							selected && props.withCheckIcon && props.checkIconPosition === "left" ? (0, vue.h)(CheckIcon, { class: Cascader_module_default.columnOptionCheck }) : null,
+							(0, vue.h)("span", { class: Cascader_module_default.columnOptionLabel }, [props.renderOption ? props.renderOption(option, level) : slots.renderOption?.({
+								option,
+								level
+							}) ?? option.label ?? option.value]),
+							selected && props.withCheckIcon && props.checkIconPosition !== "left" ? (0, vue.h)(CheckIcon, { class: Cascader_module_default.columnOptionCheck }) : null,
+							cascaderOptionHasChildren(option) ? (0, vue.h)("span", { class: Cascader_module_default.columnOptionIcon }, (0, vue.h)(AccordionChevron)) : null
+						]);
+					}) : (0, vue.h)("div", { class: Cascader_module_default.columnEmpty }, [nothingFoundContent()]))]);
+				}),
+				hiddenAfter > 0 ? overflowControl("end") : null
+			]);
+		};
+		const handleColumnsKeyDown = (event) => {
+			keyboardNav.value = true;
+			const columns = getCascaderColumns(props.data, activePath.value);
+			const focusedLevel = Math.max(0, activePath.value.length - 1);
+			const currentColumn = columns[focusedLevel] ?? columns[0] ?? [];
+			const focusedIndex = currentColumn.findIndex((item) => item.value === activePath.value[focusedLevel]);
+			const focusedOption = focusedIndex >= 0 ? currentColumn[focusedIndex] : void 0;
+			if (event.key === "ArrowDown") {
+				const next = findEnabledIndex(currentColumn, focusedIndex, 1);
+				if (next >= 0) activePath.value = [...activePath.value.slice(0, focusedLevel), currentColumn[next].value];
+				return true;
+			}
+			if (event.key === "ArrowUp") {
+				const previous = findEnabledIndex(currentColumn, focusedIndex < 0 ? currentColumn.length : focusedIndex, -1);
+				if (previous >= 0) activePath.value = [...activePath.value.slice(0, focusedLevel), currentColumn[previous].value];
+				return true;
+			}
+			if (event.key === "ArrowRight") {
+				if (focusedOption && cascaderOptionHasChildren(focusedOption)) expandOption(focusedLevel, focusedOption);
+				return true;
+			}
+			if (event.key === "ArrowLeft") {
+				if (activePath.value.length > 1) activePath.value = activePath.value.slice(0, -1);
+				return true;
+			}
+			if (event.key === "Enter" && focusedOption) {
+				const path = [...activePath.value.slice(0, focusedLevel), focusedOption.value];
+				if (cascaderOptionHasChildren(focusedOption)) {
+					if (props.changeOnSelect) {
+						selectPath(path);
+						finishSelection();
+					}
+					expandOption(focusedLevel, focusedOption);
+				} else {
+					selectPath(path);
+					finishSelection();
+				}
+				return true;
+			}
+			return false;
+		};
+		const handleKeydown = (event) => {
+			call(attrs.onKeydown, event);
+			if (event.defaultPrevented) return;
+			if (event.key === "Escape") {
+				combobox.closeDropdown("keyboard");
+				return;
+			}
+			if (showFlatList.value || !canInteract.value) return;
+			if (!combobox.dropdownOpened) {
+				if ([
+					"ArrowDown",
+					"ArrowUp",
+					"ArrowRight",
+					"Enter"
+				].includes(event.key) || !props.searchable && event.key === " ") {
+					event.preventDefault();
+					keyboardNav.value = true;
+					combobox.openDropdown("keyboard");
+					if (!currentValue.value && (event.key === "ArrowDown" || event.key === "ArrowUp")) {
+						const rootIndex = event.key === "ArrowDown" ? findEnabledIndex(props.data, -1, 1) : findEnabledIndex(props.data, props.data.length, -1);
+						if (rootIndex >= 0) activePath.value = [props.data[rootIndex].value];
+					}
+				}
+				return;
+			}
+			if (handleColumnsKeyDown(event)) event.preventDefault();
+			else if (!props.searchable && event.key === " ") event.preventDefault();
+		};
+		return () => {
+			const inputAttrs = { ...attrs };
+			delete inputAttrs.name;
+			delete inputAttrs.onKeydown;
+			delete inputAttrs.onFocus;
+			delete inputAttrs.onBlur;
+			delete inputAttrs.onClick;
+			delete inputAttrs.onInput;
+			const clearButton = (0, vue.h)(Combobox.ClearButton, {
+				...props.clearButtonProps,
+				onMousedown: (event) => event.preventDefault(),
+				onClick: () => {
+					props.onClear?.();
+					setValue(null);
+					activePath.value = [];
+					setSearch("");
+					combobox.focusTarget();
+				}
+			});
+			const hasValue = !!currentValue.value?.length;
+			const listId = id.value ? `${id.value}-cascader-list` : void 0;
+			const focusedLevel = activePath.value.length - 1;
+			const activeDescendant = keyboardNav.value && focusedLevel >= 0 ? optionId(focusedLevel, activePath.value[focusedLevel]) : void 0;
+			return (0, vue.h)("div", { style: { display: "contents" } }, [(0, vue.h)(Combobox, {
+				store: combobox,
+				__staticSelector: "Cascader",
+				classNames: props.classNames,
+				styles: props.styles,
+				unstyled: props.unstyled,
+				readOnly: props.readOnly,
+				size: String(props.size),
+				width: showFlatList.value ? "target" : "max-content",
+				position: "bottom-start",
+				...props.comboboxProps,
+				onOptionSubmit: (raw) => {
+					const item = flatListItems.value[Number(raw)];
+					if (!item || item.disabled) return;
+					selectPath(item.path);
+					activePath.value = [...item.path];
+					finishSelection();
+				}
+			}, { default: () => [(0, vue.h)(Combobox.Target, {
+				targetType: props.searchable ? "input" : "button",
+				withKeyboardNavigation: showFlatList.value
+			}, () => (0, vue.h)(InputBase, {
+				...inputAttrs,
+				id: id.value,
+				__staticSelector: "Cascader",
+				size: props.size,
+				classNames: props.classNames,
+				styles: props.styles,
+				unstyled: props.unstyled,
+				disabled: props.disabled,
+				readonly: props.readOnly || !props.searchable,
+				pointer: !props.searchable,
+				value: props.searchable ? search.value : displayString.value,
+				"aria-controls": listId,
+				"aria-activedescendant": activeDescendant,
+				__defaultRightSection: (0, vue.h)(Combobox.Chevron, {
+					size: String(props.size),
+					color: props.chevronColor
+				}),
+				__clearSection: clearButton,
+				__clearable: props.clearable && hasValue && !props.disabled && !props.readOnly,
+				__clearSectionMode: props.clearSectionMode,
+				rightSectionPointerEvents: attrs.rightSectionPointerEvents || "none",
+				onInput: (event) => {
+					setSearch(event.target.value);
+					if (canInteract.value) combobox.openDropdown("keyboard");
+				},
+				onFocus: (event) => {
+					if (props.openOnFocus && props.searchable && canInteract.value) combobox.openDropdown("keyboard");
+					call(attrs.onFocus, event);
+				},
+				onBlur: (event) => {
+					combobox.closeDropdown("unknown");
+					call(attrs.onBlur, event);
+				},
+				onClick: (event) => {
+					if (canInteract.value) {
+						keyboardNav.value = false;
+						if (props.searchable) combobox.openDropdown("mouse");
+						else combobox.toggleDropdown("mouse");
+					}
+					call(attrs.onClick, event);
+				},
+				onKeydown: handleKeydown
+			}, {
+				label: slots.label,
+				description: slots.description,
+				error: slots.error,
+				leftSection: slots.leftSection,
+				rightSection: slots.rightSection
+			})), (0, vue.h)(Combobox.Dropdown, {
+				hidden: props.readOnly || props.disabled,
+				style: showFlatList.value ? void 0 : { padding: 0 }
+			}, () => showFlatList.value ? renderFlatList() : renderColumns())] }), (0, vue.h)(Combobox.HiddenInput, {
+				name: attrs.name,
+				form: attrs.form,
+				disabled: props.disabled,
+				value: currentValue.value,
+				...props.hiddenInputProps
+			})]);
+		};
+	}
+});
+Object.assign(Cascader, { classes: {
+	...InputBase.classes,
+	...Combobox.classes,
+	...Cascader_module_default
+} });
 //#endregion
 exports.Accordion = Accordion;
 exports.AccordionChevron = AccordionChevron;
@@ -32636,6 +33497,7 @@ exports.ButtonGroup = ButtonGroup;
 exports.ButtonGroupSection = ButtonGroupSection;
 exports.Card = Card;
 exports.CardSection = CardSection;
+exports.Cascader = Cascader;
 exports.Center = Center;
 exports.CheckIcon = CheckIcon;
 exports.Checkbox = Checkbox;
@@ -32705,6 +33567,7 @@ exports.FlatTreeNode = FlatTreeNode;
 exports.Flex = Flex;
 exports.FloatingIndicator = FloatingIndicator;
 exports.FloatingWindow = FloatingWindow;
+exports.FloatingWindowResizeHandle = FloatingWindowResizeHandle;
 exports.FocusTrap = FocusTrap;
 exports.FocusTrapInitialFocus = FocusTrapInitialFocus;
 exports.Grid = Grid;
@@ -32888,6 +33751,7 @@ exports.VisuallyHidden = VisuallyHidden;
 exports.alpha = alpha;
 exports.buildValue = buildValue;
 exports.camelToKebabCase = camelToKebabCase;
+exports.cascaderOptionHasChildren = cascaderOptionHasChildren;
 exports.colorsTuple = colorsTuple;
 exports.convertCssVariables = convertCssVariables;
 exports.convertHsvaTo = convertHsvaTo;
@@ -32910,6 +33774,7 @@ exports.factory = factory;
 exports.filterProps = filterProps;
 exports.filterTreeData = filterTreeData;
 exports.findClosestNumber = findClosestNumber;
+exports.flattenCascaderPaths = flattenCascaderPaths;
 exports.flattenTreeData = flattenTreeData;
 exports.foldAccents = foldAccents;
 exports.formatNumber = formatNumber;
@@ -32917,6 +33782,8 @@ exports.getAppShellVariables = getVariables;
 exports.getAutoContrastValue = getAutoContrastValue;
 exports.getBaseValue = getBaseValue;
 exports.getBreakpointValue = getBreakpointValue;
+exports.getCascaderColumns = getCascaderColumns;
+exports.getCascaderPathOptions = getCascaderPathOptions;
 exports.getContrastColor = getContrastColor;
 exports.getDefaultZIndex = getDefaultZIndex;
 exports.getDigitParts = getDigitParts;