@mantine-vue/core 1.1.4 → 2.0.1

package/cjs/index.cjs

@@ -2142,6 +2142,16 @@ var DirectionProvider = (0, vue.defineComponent)({
 		return () => slots.default?.();
 	}
 });
+//#endregion
+//#region src/core/renderable-node.ts
+/** Prop content takes precedence over slot content. Explicit null is preserved. */
+function resolveNode(prop, slot) {
+	if (prop !== void 0) return typeof prop === "function" ? prop() : prop;
+	return slot?.();
+}
+function hasNode(node) {
+	return node !== null && node !== void 0 && node !== false;
+}
 var VisuallyHidden_module_default = { root: "_root_5rq9d_1" };
 //#endregion
 //#region src/components/VisuallyHidden/VisuallyHidden.ts
@@ -2867,6 +2877,7 @@ var varsResolver$87 = createVarsResolver((theme, { color, variant, size }) => ({
 var Divider = withBoxProps((0, vue.defineComponent)({
 	name: "Divider",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		color: {
 			type: String,
@@ -2874,12 +2885,7 @@ var Divider = withBoxProps((0, vue.defineComponent)({
 		},
 		size: [String, Number],
 		label: {
-			type: [
-				String,
-				Number,
-				Object,
-				Function
-			],
+			type: null,
 			default: void 0
 		},
 		labelPosition: {
@@ -2926,16 +2932,16 @@ var Divider = withBoxProps((0, vue.defineComponent)({
 			unstyled: props.unstyled
 		});
 		return () => {
-			const label = slots.default?.() ?? props.label;
+			const label = resolveNode(props.label, slots.label ?? slots.default);
 			return (0, vue.h)(Box, {
 				...attrs,
 				role: "separator",
 				...getStyles("root"),
 				mod: {
 					orientation: props.orientation,
-					withLabel: Boolean(label)
+					withLabel: hasNode(label)
 				}
-			}, () => label ? (0, vue.h)(Box, {
+			}, () => hasNode(label) ? (0, vue.h)(Box, {
 				component: "span",
 				...getStyles("label"),
 				mod: { position: props.labelPosition }
@@ -3908,6 +3914,7 @@ var varsResolver$76 = createVarsResolver((theme, { radius, color, gradient, vari
 var Badge = withBoxProps((0, vue.defineComponent)({
 	name: "Badge",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		component: {
 			type: String,
@@ -3928,21 +3935,11 @@ var Badge = withBoxProps((0, vue.defineComponent)({
 			default: void 0
 		},
 		leftSection: {
-			type: [
-				String,
-				Number,
-				Object,
-				Function
-			],
+			type: null,
 			default: void 0
 		},
 		rightSection: {
-			type: [
-				String,
-				Number,
-				Object,
-				Function
-			],
+			type: null,
 			default: void 0
 		},
 		fullWidth: {
@@ -3988,12 +3985,14 @@ var Badge = withBoxProps((0, vue.defineComponent)({
 			varsResolver: varsResolver$76,
 			unstyled: props.unstyled
 		});
-		const renderSection = (section, position) => section ? (0, vue.h)("span", {
+		const renderSection = (section, position) => hasNode(section) ? (0, vue.h)("span", {
 			...getStyles("section"),
 			"data-position": position
-		}, typeof section === "function" ? section() : section) : null;
+		}, () => section) : null;
 		return () => {
-			const children = slots.default?.();
+			const children = slots.default?.() ?? [];
+			const leftSection = resolveNode(props.leftSection, slots.leftSection);
+			const rightSection = resolveNode(props.rightSection, slots.rightSection);
 			return (0, vue.h)(Box, {
 				...attrs,
 				...getStyles("root"),
@@ -4002,13 +4001,13 @@ var Badge = withBoxProps((0, vue.defineComponent)({
 				mod: {
 					block: props.fullWidth,
 					circle: props.circle,
-					withRightSection: Boolean(props.rightSection),
-					withLeftSection: Boolean(props.leftSection)
+					withRightSection: hasNode(rightSection),
+					withLeftSection: hasNode(leftSection)
 				}
 			}, () => [
-				renderSection(props.leftSection, "left"),
+				renderSection(leftSection, "left"),
 				(0, vue.h)("span", getStyles("label"), children),
-				renderSection(props.rightSection, "right")
+				renderSection(rightSection, "right")
 			]);
 		};
 	}
@@ -4811,6 +4810,7 @@ var varsResolver$71 = createVarsResolver((_, { size, radius, iconSize }) => ({ r
 var CloseButton = (0, vue.defineComponent)({
 	name: "CloseButton",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		component: {
 			type: String,
@@ -4824,11 +4824,7 @@ var CloseButton = (0, vue.defineComponent)({
 		},
 		iconSize: [String, Number],
 		icon: {
-			type: [
-				String,
-				Object,
-				Function
-			],
+			type: null,
 			default: void 0
 		},
 		variant: {
@@ -4870,15 +4866,18 @@ var CloseButton = (0, vue.defineComponent)({
 			vars: props.vars,
 			varsResolver: varsResolver$71
 		});
-		return () => (0, vue.h)(UnstyledButton, {
-			...attrs,
-			...getStyles("root"),
-			component: props.component,
-			unstyled: props.unstyled,
-			variant: props.variant,
-			disabled: props.disabled,
-			mod: { disabled: props.disabled }
-		}, () => [props.icon ? props.icon : (0, vue.h)(CloseIcon), slots.default?.()]);
+		return () => {
+			const icon = resolveNode(props.icon, slots.icon);
+			return (0, vue.h)(UnstyledButton, {
+				...attrs,
+				...getStyles("root"),
+				component: props.component,
+				unstyled: props.unstyled,
+				variant: props.variant,
+				disabled: props.disabled,
+				mod: { disabled: props.disabled }
+			}, () => [hasNode(icon) ? icon : (0, vue.h)(CloseIcon), slots.default?.()]);
+		};
 	}
 });
 var Button_module_default = {
@@ -5059,7 +5058,7 @@ var varsResolver$68 = createVarsResolver((theme, { radius, color, gradient, vari
 		"--button-hover-color": color || variant ? colors.hoverColor : void 0
 	} };
 });
-function renderContent$13(content) {
+function renderContent$5(content) {
 	return typeof content === "function" ? content() : content;
 }
 var ButtonBase = (0, vue.defineComponent)({
@@ -5184,14 +5183,14 @@ var ButtonBase = (0, vue.defineComponent)({
 			},
 			varsResolver: varsResolver$68
 		});
-		const renderSection = (content, position) => content ? (0, vue.h)(Box, {
+		const renderSection = (content, position) => hasNode(content) ? (0, vue.h)(Box, {
 			component: "span",
 			...getStyles("section"),
 			mod: { position }
-		}, () => renderContent$13(content)) : null;
+		}, () => renderContent$5(content)) : null;
 		return () => {
-			const leftSection = props.leftSection ?? slots.leftSection?.();
-			const rightSection = props.rightSection ?? slots.rightSection?.();
+			const leftSection = resolveNode(props.leftSection, slots.leftSection);
+			const rightSection = resolveNode(props.rightSection, slots.rightSection);
 			const disabled = props.disabled || props.loading;
 			const dataDisabled = disabled || props["data-disabled"] || props.dataDisabled || attrs["data-disabled"];
 			return (0, vue.h)(UnstyledButton, {
@@ -5205,8 +5204,8 @@ var ButtonBase = (0, vue.defineComponent)({
 					disabled: dataDisabled,
 					loading: props.loading,
 					block: props.fullWidth,
-					withLeftSection: Boolean(leftSection),
-					withRightSection: Boolean(rightSection)
+					withLeftSection: hasNode(leftSection),
+					withRightSection: hasNode(rightSection)
 				}, props.mod],
 				ref: elementRef
 			}, () => [(0, vue.h)(Transition, {
@@ -5744,12 +5743,10 @@ var varsResolver$64 = createVarsResolver((theme, { radius, color, variant, autoC
 		"--alert-bd": color || variant ? colors.border : void 0
 	} };
 });
-function renderContent$12(content) {
-	return typeof content === "function" ? content() : content;
-}
 var Alert = withBoxProps((0, vue.defineComponent)({
 	name: "Alert",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		id: {
 			type: String,
@@ -5761,21 +5758,11 @@ var Alert = withBoxProps((0, vue.defineComponent)({
 			default: void 0
 		},
 		title: {
-			type: [
-				String,
-				Number,
-				Object,
-				Function
-			],
+			type: null,
 			default: void 0
 		},
 		icon: {
-			type: [
-				String,
-				Number,
-				Object,
-				Function
-			],
+			type: null,
 			default: void 0
 		},
 		withCloseButton: {
@@ -5835,11 +5822,11 @@ var Alert = withBoxProps((0, vue.defineComponent)({
 			unstyled: props.unstyled
 		});
 		return () => {
-			const title = props.title ?? slots.title?.();
-			const icon = props.icon ?? slots.icon?.();
+			const title = resolveNode(props.title, slots.title);
+			const icon = resolveNode(props.icon, slots.icon);
 			const message = slots.default?.();
 			const id = rootId.value || void 0;
-			const titleId = title && id ? `${id}-title` : void 0;
+			const titleId = hasNode(title) && id ? `${id}-title` : void 0;
 			const bodyId = id ? `${id}-body` : void 0;
 			return (0, vue.h)(Box, {
 				...attrs,
@@ -5847,17 +5834,17 @@ var Alert = withBoxProps((0, vue.defineComponent)({
 				id,
 				variant: props.variant,
 				role: props.role || "alert",
-				"aria-describedby": message ? bodyId : void 0,
-				"aria-labelledby": title ? titleId : void 0
+				"aria-describedby": hasNode(message) ? bodyId : void 0,
+				"aria-labelledby": hasNode(title) ? titleId : void 0
 			}, () => (0, vue.h)("div", getStyles("wrapper"), [
-				icon ? (0, vue.h)("div", getStyles("icon"), renderContent$12(icon)) : null,
-				(0, vue.h)("div", getStyles("body"), [title ? (0, vue.h)("div", {
+				hasNode(icon) ? (0, vue.h)("div", getStyles("icon"), icon) : null,
+				(0, vue.h)("div", getStyles("body"), [hasNode(title) ? (0, vue.h)("div", {
 					...getStyles("title"),
 					"data-with-close-button": props.withCloseButton ? "" : void 0
 				}, [(0, vue.h)("span", {
 					id: titleId,
 					...getStyles("label")
-				}, renderContent$12(title))]) : null, message ? (0, vue.h)("div", {
+				}, title)]) : null, hasNode(message) ? (0, vue.h)("div", {
 					id: bodyId,
 					...getStyles("message"),
 					"data-variant": props.variant
@@ -5902,20 +5889,13 @@ var varsResolver$63 = createVarsResolver((theme, { color, iconSize, radius, text
 		"--bq-text-wrap": textWrap
 	} };
 });
-function renderContent$11(content) {
-	return typeof content === "function" ? content() : content;
-}
 var Blockquote = withBoxProps((0, vue.defineComponent)({
 	name: "Blockquote",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		icon: {
-			type: [
-				String,
-				Number,
-				Object,
-				Function
-			],
+			type: null,
 			default: void 0
 		},
 		iconSize: [String, Number],
@@ -5925,12 +5905,7 @@ var Blockquote = withBoxProps((0, vue.defineComponent)({
 		},
 		radius: [String, Number],
 		cite: {
-			type: [
-				String,
-				Number,
-				Object,
-				Function
-			],
+			type: null,
 			default: void 0
 		},
 		textWrap: {
@@ -5969,16 +5944,16 @@ var Blockquote = withBoxProps((0, vue.defineComponent)({
 			unstyled: props.unstyled
 		});
 		return () => {
-			const icon = props.icon ?? slots.icon?.();
-			const cite = props.cite ?? slots.cite?.();
+			const icon = resolveNode(props.icon, slots.icon);
+			const cite = resolveNode(props.cite, slots.cite);
 			return (0, vue.h)(Box, {
 				...attrs,
 				...getStyles("root"),
 				component: "blockquote"
 			}, () => [
-				icon ? (0, vue.h)("span", getStyles("icon"), renderContent$11(icon)) : null,
+				hasNode(icon) ? (0, vue.h)("span", getStyles("icon"), icon) : null,
 				slots.default?.(),
-				cite ? (0, vue.h)("cite", getStyles("cite"), renderContent$11(cite)) : null
+				hasNode(cite) ? (0, vue.h)("cite", getStyles("cite"), cite) : null
 			]);
 		};
 	}
@@ -5992,23 +5967,16 @@ var Breadcrumbs_module_default = {
 //#region src/components/Breadcrumbs/Breadcrumbs.ts
 var defaultProps$38 = { separator: "/" };
 var varsResolver$62 = createVarsResolver((_, { separatorMargin }) => ({ root: { "--bc-separator-margin": getSpacing(separatorMargin) } }));
-function renderContent$10(content) {
-	return typeof content === "function" ? content() : content;
-}
 function flattenChildren$2(children) {
 	return children.flatMap((child) => child.type === vue.Fragment && Array.isArray(child.children) ? flattenChildren$2(child.children) : child.type === vue.Comment ? [] : [child]);
 }
 var Breadcrumbs = withBoxProps((0, vue.defineComponent)({
 	name: "Breadcrumbs",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		separator: {
-			type: [
-				String,
-				Number,
-				Object,
-				Function
-			],
+			type: null,
 			default: void 0
 		},
 		separatorMargin: [String, Number],
@@ -6051,7 +6019,7 @@ var Breadcrumbs = withBoxProps((0, vue.defineComponent)({
 				if (index !== children.length - 1) acc.push((0, vue.h)(Box, {
 					...getStyles("separator"),
 					key: `separator-${index}`
-				}, () => renderContent$10(props.separator)));
+				}, () => resolveNode(props.separator, slots.separator)));
 				return acc;
 			}, []);
 			return (0, vue.h)(Box, {
@@ -6073,14 +6041,10 @@ function renderListIcon(icon) {
 var ListItem = withBoxProps((0, vue.defineComponent)({
 	name: "ListItem",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		icon: {
-			type: [
-				String,
-				Number,
-				Object,
-				Function
-			],
+			type: null,
 			default: void 0
 		},
 		mod: {
@@ -6104,7 +6068,8 @@ var ListItem = withBoxProps((0, vue.defineComponent)({
 		const props = useProps("ListItem", null, rawProps);
 		const ctx = useListContext();
 		return () => {
-			const icon = props.icon ?? ctx.icon;
+			const ownIcon = resolveNode(props.icon, slots.icon);
+			const icon = hasNode(ownIcon) ? ownIcon : renderListIcon(ctx.icon);
 			return (0, vue.h)(Box, {
 				...attrs,
 				...ctx.getStyles("item", {
@@ -6113,10 +6078,10 @@ var ListItem = withBoxProps((0, vue.defineComponent)({
 				}),
 				component: "li",
 				mod: [{
-					withIcon: Boolean(icon),
+					withIcon: hasNode(icon),
 					centered: ctx.center
 				}, props.mod]
-			}, () => (0, vue.h)("div", ctx.getStyles("itemWrapper"), [icon ? (0, vue.h)("span", ctx.getStyles("itemIcon"), renderListIcon(icon)) : null, (0, vue.h)("span", ctx.getStyles("itemLabel"), slots.default?.())]));
+			}, () => (0, vue.h)("div", ctx.getStyles("itemWrapper"), [hasNode(icon) ? (0, vue.h)("span", ctx.getStyles("itemIcon"), icon) : null, (0, vue.h)("span", ctx.getStyles("itemLabel"), slots.default?.())]));
 		};
 	}
 }));
@@ -6137,6 +6102,7 @@ var varsResolver$61 = createVarsResolver((_, { size, spacing }) => ({ root: {
 var ListBase = (0, vue.defineComponent)({
 	name: "List",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		type: {
 			type: String,
@@ -6151,12 +6117,7 @@ var ListBase = (0, vue.defineComponent)({
 			default: void 0
 		},
 		icon: {
-			type: [
-				String,
-				Number,
-				Object,
-				Function
-			],
+			type: null,
 			default: void 0
 		},
 		spacing: [String, Number],
@@ -6214,19 +6175,24 @@ var ListBase = (0, vue.defineComponent)({
 		provideListContext({
 			getStyles,
 			center: props.center,
-			icon: props.icon
+			get icon() {
+				return resolveNode(props.icon, slots.icon);
+			}
 		});
-		return () => (0, vue.h)(Box, {
-			...attrs,
-			...getStyles("root", { style: { listStyleType: props.listStyleType } }),
-			component: props.type === "unordered" ? "ul" : "ol",
-			start: props.type === "ordered" ? props.start : void 0,
-			reversed: props.type === "ordered" && props.reversed ? "" : void 0,
-			mod: [{
-				withPadding: props.withPadding,
-				type: props.icon ? "none" : props.listStyleType
-			}, props.mod]
-		}, () => slots.default?.());
+		return () => {
+			const icon = resolveNode(props.icon, slots.icon);
+			return (0, vue.h)(Box, {
+				...attrs,
+				...getStyles("root", { style: { listStyleType: props.listStyleType } }),
+				component: props.type === "unordered" ? "ul" : "ol",
+				start: props.type === "ordered" ? props.start : void 0,
+				reversed: props.type === "ordered" && props.reversed ? "" : void 0,
+				mod: [{
+					withPadding: props.withPadding,
+					type: hasNode(icon) ? "none" : props.listStyleType
+				}, props.mod]
+			}, () => slots.default?.());
+		};
 	}
 });
 var List = withBoxProps(Object.assign(ListBase, { Item: ListItem }));
@@ -6295,12 +6261,10 @@ var varsResolver$60 = createVarsResolver((theme, { color, position, offset, size
 	"--indicator-z-index": zIndex?.toString(),
 	...getPositionVariables(position, offset)
 } }));
-function renderContent$9(content) {
-	return typeof content === "function" ? content() : content;
-}
 var Indicator = withBoxProps((0, vue.defineComponent)({
 	name: "Indicator",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		position: {
 			type: String,
@@ -6316,12 +6280,7 @@ var Indicator = withBoxProps((0, vue.defineComponent)({
 		},
 		size: [String, Number],
 		label: {
-			type: [
-				String,
-				Number,
-				Object,
-				Function
-			],
+			type: null,
 			default: void 0
 		},
 		radius: [String, Number],
@@ -6390,8 +6349,9 @@ var Indicator = withBoxProps((0, vue.defineComponent)({
 			unstyled: props.unstyled
 		});
 		return () => {
+			const labelContent = resolveNode(props.label, slots.label);
 			const shouldHideZero = !props.showZero && (props.label === 0 || props.label === "0");
-			const formattedLabel = props.maxValue !== void 0 && typeof props.label === "number" && props.label > props.maxValue ? `${props.maxValue}+` : props.label;
+			const formattedLabel = props.maxValue !== void 0 && typeof props.label === "number" && props.label > props.maxValue ? `${props.maxValue}+` : labelContent;
 			return (0, vue.h)(Box, {
 				...attrs,
 				...getStyles("root"),
@@ -6399,11 +6359,11 @@ var Indicator = withBoxProps((0, vue.defineComponent)({
 			}, () => [!props.disabled && !shouldHideZero ? (0, vue.h)(Box, {
 				...getStyles("indicator"),
 				mod: {
-					withLabel: Boolean(props.label),
+					withLabel: hasNode(labelContent),
 					withBorder: props.withBorder,
 					processing: props.processing
 				}
-			}, () => renderContent$9(formattedLabel)) : null, slots.default?.()]);
+			}, () => formattedLabel) : null, slots.default?.()]);
 		};
 	}
 }));
@@ -8334,9 +8294,6 @@ var AccordionChevron = (0, vue.defineComponent)({
 var [provideAccordionItemContext, useAccordionItemContext] = createSafeContext("Accordion.Item component was not found in the tree");
 //#endregion
 //#region src/components/Accordion/AccordionControl/AccordionControl.ts
-function renderContent$8(content) {
-	return typeof content === "function" ? content() : content;
-}
 function createAccordionKeydownHandler(loop, onKeydown) {
 	return (event) => {
 		onKeydown?.(event);
@@ -8355,28 +8312,18 @@ function createAccordionKeydownHandler(loop, onKeydown) {
 var AccordionControl = withBoxProps((0, vue.defineComponent)({
 	name: "AccordionControl",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		disabled: {
 			type: Boolean,
 			default: false
 		},
 		chevron: {
-			type: [
-				String,
-				Number,
-				Object,
-				Function,
-				null
-			],
+			type: null,
 			default: void 0
 		},
 		icon: {
-			type: [
-				String,
-				Number,
-				Object,
-				Function
-			],
+			type: null,
 			default: void 0
 		},
 		onClick: {
@@ -8409,6 +8356,8 @@ var AccordionControl = withBoxProps((0, vue.defineComponent)({
 		const ctx = useAccordionContext();
 		const renderControl = () => {
 			const isActive = ctx.isItemActive(value);
+			const chevron = props.chevron !== void 0 || slots.chevron ? resolveNode(props.chevron, slots.chevron) : typeof ctx.chevron === "function" ? ctx.chevron() : ctx.chevron;
+			const icon = resolveNode(props.icon, slots.icon);
 			return (0, vue.h)(UnstyledButton, {
 				...attrs,
 				...ctx.getStyles("control", {
@@ -8449,13 +8398,13 @@ var AccordionControl = withBoxProps((0, vue.defineComponent)({
 						styles: props.styles,
 						props
 					})
-				}, () => renderContent$8(props.chevron === void 0 ? ctx.chevron : props.chevron)),
+				}, () => chevron),
 				(0, vue.h)("span", ctx.getStyles("label", {
 					classNames: props.classNames,
 					styles: props.styles,
 					props
 				}), slots.default?.()),
-				props.icon ? (0, vue.h)(Box, {
+				hasNode(icon) ? (0, vue.h)(Box, {
 					component: "span",
 					mod: { chevronPosition: ctx.chevronPosition },
 					...ctx.getStyles("icon", {
@@ -8463,7 +8412,7 @@ var AccordionControl = withBoxProps((0, vue.defineComponent)({
 						styles: props.styles,
 						props
 					})
-				}, () => renderContent$8(props.icon)) : null
+				}, () => icon) : null
 			]);
 		};
 		return () => typeof ctx.order === "number" ? (0, vue.h)(`h${ctx.order}`, ctx.getStyles("itemTitle", {
@@ -8606,7 +8555,7 @@ function getSafeId$2(prefix) {
 		return `${prefix}-${value}`;
 	};
 }
-function renderContent$7(content) {
+function renderContent$4(content) {
 	return typeof content === "function" ? content() : content;
 }
 var varsResolver$55 = createVarsResolver((_, { transitionDuration, chevronSize, radius }) => ({ root: {
@@ -8778,7 +8727,7 @@ var AccordionBase = (0, vue.defineComponent)({
 			id: uid.value,
 			variant: props.variant,
 			"data-accordion": true
-		}, () => renderContent$7(slots.default));
+		}, () => renderContent$4(slots.default));
 	}
 });
 var Accordion = Object.assign(AccordionBase, {
@@ -8806,7 +8755,7 @@ var varsResolver$54 = 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$6(content) {
+function renderContent$3(content) {
 	return typeof content === "function" ? content() : content;
 }
 var Scroller = withBoxProps((0, vue.defineComponent)({
@@ -8916,7 +8865,7 @@ var Scroller = withBoxProps((0, vue.defineComponent)({
 					"data-hidden": !showStart || void 0,
 					"aria-label": "Scroll left",
 					tabindex: showStart ? 0 : -1
-				}, () => renderContent$6(props.startControlIcon) || (0, vue.h)(AccordionChevron, getStyles("chevron"))),
+				}, () => renderContent$3(props.startControlIcon) || (0, vue.h)(AccordionChevron, getStyles("chevron"))),
 				(0, vue.h)("div", {
 					...getStyles("container"),
 					ref: scroller.ref,
@@ -8932,7 +8881,7 @@ var Scroller = withBoxProps((0, vue.defineComponent)({
 					"data-hidden": !showEnd || void 0,
 					"aria-label": "Scroll right",
 					tabindex: showEnd ? 0 : -1
-				}, () => renderContent$6(props.endControlIcon) || (0, vue.h)(AccordionChevron, getStyles("chevron")))
+				}, () => renderContent$3(props.endControlIcon) || (0, vue.h)(AccordionChevron, getStyles("chevron")))
 			]);
 		};
 	}
@@ -10269,6 +10218,7 @@ var Timeline_module_default = {
 var TimelineItem = withBoxProps((0, vue.defineComponent)({
 	name: "TimelineItem",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		__active: {
 			type: Boolean,
@@ -10291,21 +10241,11 @@ var TimelineItem = withBoxProps((0, vue.defineComponent)({
 			default: void 0
 		},
 		title: {
-			type: [
-				String,
-				Number,
-				Object,
-				Function
-			],
+			type: null,
 			default: void 0
 		},
 		bullet: {
-			type: [
-				String,
-				Number,
-				Object,
-				Function
-			],
+			type: null,
 			default: void 0
 		},
 		radius: {
@@ -10353,10 +10293,11 @@ var TimelineItem = withBoxProps((0, vue.defineComponent)({
 		const props = useProps("TimelineItem", null, rawProps);
 		const ctx = useTimelineContext();
 		const theme = useMantineTheme();
-		const renderContent = (value) => typeof value === "function" ? value() : value;
 		return () => {
 			const active = props.active ?? props.__active;
 			const lineActive = props.lineActive ?? props.__lineActive;
+			const bullet = resolveNode(props.bullet, slots.bullet);
+			const title = resolveNode(props.title, slots.title);
 			const stylesApiProps = {
 				className: props.className ?? attrs.class,
 				props
@@ -10380,11 +10321,11 @@ var TimelineItem = withBoxProps((0, vue.defineComponent)({
 			}, () => [(0, vue.h)(Box, {
 				...ctx.getStyles("itemBullet", { props }),
 				mod: {
-					withChild: Boolean(props.bullet),
+					withChild: hasNode(bullet),
 					align: props.__align,
 					active
 				}
-			}, () => renderContent(props.bullet)), (0, vue.h)("div", ctx.getStyles("itemBody", { props }), [props.title ? (0, vue.h)("div", ctx.getStyles("itemTitle", { props }), renderContent(props.title)) : null, (0, vue.h)("div", ctx.getStyles("itemContent", { props }), slots.default?.())])]);
+			}, () => 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?.())])]);
 		};
 	}
 }));
@@ -10760,6 +10701,7 @@ var varsResolver$47 = createVarsResolver((theme, { filledSegmentColor, emptySegm
 var SemiCircleProgress = withBoxProps((0, vue.defineComponent)({
 	name: "SemiCircleProgress",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		value: {
 			type: Number,
@@ -10794,12 +10736,7 @@ var SemiCircleProgress = withBoxProps((0, vue.defineComponent)({
 			default: void 0
 		},
 		label: {
-			type: [
-				String,
-				Number,
-				Object,
-				Function
-			],
+			type: null,
 			default: void 0
 		},
 		labelPosition: {
@@ -10837,7 +10774,6 @@ var SemiCircleProgress = withBoxProps((0, vue.defineComponent)({
 			vars: props.vars,
 			varsResolver: varsResolver$47
 		});
-		const renderContent = (value) => typeof value === "function" ? value() : value;
 		return () => {
 			const size = props.size ?? defaultProps$21.size;
 			const thickness = props.thickness ?? defaultProps$21.thickness;
@@ -10845,7 +10781,7 @@ var SemiCircleProgress = withBoxProps((0, vue.defineComponent)({
 			const radius = (size - 2 * thickness) / 2;
 			const circumference = Math.PI * radius;
 			const semiCirclePercentage = clamp$4(props.value, 0, 100) * (circumference / 100);
-			const label = props.label ?? slots.label?.();
+			const label = resolveNode(props.label, slots.label);
 			return (0, vue.h)(Box, {
 				...attrs,
 				w: size,
@@ -10853,11 +10789,11 @@ var SemiCircleProgress = withBoxProps((0, vue.defineComponent)({
 					className: attrs.class,
 					style: attrs.style
 				})
-			}, () => [label ? (0, vue.h)("div", {
+			}, () => [hasNode(label) ? (0, vue.h)("div", {
 				...getStyles("label"),
 				"data-position": props.labelPosition,
 				"data-orientation": props.orientation
-			}, renderContent(label)) : null, (0, vue.h)("svg", {
+			}, label) : null, (0, vue.h)("svg", {
 				width: size,
 				height: size / 2,
 				viewBox: `0 0 ${size} ${size / 2}`,
@@ -10903,28 +10839,19 @@ var varsResolver$46 = createVarsResolver((_, { transitionDuration }) => ({ root:
 var Spoiler = withBoxProps((0, vue.defineComponent)({
 	name: "Spoiler",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		maxHeight: {
 			type: Number,
 			default: void 0
 		},
 		showLabel: {
-			type: [
-				String,
-				Number,
-				Object,
-				Function
-			],
-			required: true
+			type: null,
+			default: void 0
 		},
 		hideLabel: {
-			type: [
-				String,
-				Number,
-				Object,
-				Function
-			],
-			required: true
+			type: null,
+			default: void 0
 		},
 		defaultExpanded: {
 			type: Boolean,
@@ -10993,12 +10920,11 @@ var Spoiler = withBoxProps((0, vue.defineComponent)({
 			onChange: (value) => props.onExpandedChange?.(value)
 		});
 		const { ref: contentRef, height } = (0, _mantine_vue_hooks.useElementSize)();
-		const renderContent = (value) => typeof value === "function" ? value() : value;
 		return () => {
 			const regionId = `${id.value}-region`;
-			const currentLabel = show.value ? props.hideLabel : props.showLabel;
+			const currentLabel = show.value ? resolveNode(props.hideLabel, slots.hideLabel) : resolveNode(props.showLabel, slots.showLabel);
 			const maxHeight = props.maxHeight ?? defaultProps$20.maxHeight;
-			const hasSpoiler = currentLabel !== null && maxHeight < height.value;
+			const hasSpoiler = hasNode(currentLabel) && maxHeight < height.value;
 			const ariaLabel = show.value ? props.hideAriaLabel : props.showAriaLabel;
 			return (0, vue.h)(Box, {
 				...attrs,
@@ -11016,7 +10942,7 @@ var Spoiler = withBoxProps((0, vue.defineComponent)({
 				"aria-controls": regionId,
 				"aria-label": ariaLabel,
 				...getStyles("control")
-			}, () => renderContent(currentLabel)) : null, (0, vue.h)("div", {
+			}, () => currentLabel) : null, (0, vue.h)("div", {
 				...getStyles("content", { style: { maxHeight: !show.value ? rem(maxHeight) : height.value ? rem(height.value) : void 0 } }),
 				"data-reduce-motion": "",
 				role: "region",
@@ -11040,14 +10966,10 @@ var varsResolver$45 = createVarsResolver((_, { radius }) => ({ root: { "--fields
 var Fieldset = withBoxProps((0, vue.defineComponent)({
 	name: "Fieldset",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		legend: {
-			type: [
-				String,
-				Number,
-				Object,
-				Function
-			],
+			type: null,
 			default: void 0
 		},
 		radius: {
@@ -11089,16 +11011,18 @@ var Fieldset = withBoxProps((0, vue.defineComponent)({
 			vars: props.vars,
 			varsResolver: varsResolver$45
 		});
-		const renderContent = (value) => typeof value === "function" ? value() : value;
-		return () => (0, vue.h)(Box, {
-			...attrs,
-			component: "fieldset",
-			variant: props.variant,
-			...getStyles("root", {
-				className: attrs.class,
-				style: attrs.style
-			})
-		}, () => [props.legend ? (0, vue.h)("legend", getStyles("legend"), renderContent(props.legend)) : null, slots.default?.()]);
+		return () => {
+			const legend = resolveNode(props.legend, slots.legend);
+			return (0, vue.h)(Box, {
+				...attrs,
+				component: "fieldset",
+				variant: props.variant,
+				...getStyles("root", {
+					className: attrs.class,
+					style: attrs.style
+				})
+			}, () => [hasNode(legend) ? (0, vue.h)("legend", getStyles("legend"), legend) : null, slots.default?.()]);
+		};
 	}
 }));
 Object.assign(Fieldset, {
@@ -11245,13 +11169,13 @@ var clearSectionOffset = {
 	lg: 12,
 	xl: 15
 };
-function renderContent$5(content) {
+function renderContent$2(content) {
 	return typeof content === "function" ? content() : content;
 }
 function InputClearSection({ __clearable, __clearSection, rightSection, __defaultRightSection, size = "sm", __clearSectionMode = "both" }) {
 	const clearSection = __clearable && __clearSection;
-	if (__clearSectionMode === "rightSection") return rightSection === null ? null : renderContent$5(rightSection || __defaultRightSection);
-	if (__clearSectionMode === "clear") return rightSection === null ? null : renderContent$5(clearSection || __defaultRightSection);
+	if (__clearSectionMode === "rightSection") return rightSection === null ? null : renderContent$2(rightSection || __defaultRightSection);
+	if (__clearSectionMode === "clear") return rightSection === null ? null : renderContent$2(clearSection || __defaultRightSection);
 	if (clearSection && (rightSection || __defaultRightSection)) return (0, vue.h)("div", {
 		"data-combined-clear-section": true,
 		style: {
@@ -11260,8 +11184,8 @@ function InputClearSection({ __clearable, __clearSection, rightSection, __defaul
 			alignItems: "center",
 			paddingInlineEnd: `${clearSectionOffset[String(size)] ?? clearSectionOffset.sm}px`
 		}
-	}, [renderContent$5(clearSection), renderContent$5(rightSection || __defaultRightSection)]);
-	return rightSection === null ? null : renderContent$5(rightSection || clearSection || __defaultRightSection);
+	}, [renderContent$2(clearSection), renderContent$2(rightSection || __defaultRightSection)]);
+	return rightSection === null ? null : renderContent$2(rightSection || clearSection || __defaultRightSection);
 }
 //#endregion
 //#region src/components/Input/InputWrapper.context.ts
@@ -11580,6 +11504,15 @@ var defaultOrder = [
 	"input",
 	"error"
 ];
+/**
+* Determines whether renderable content is present, honouring prop-over-slot precedence.
+* Uses truthiness for the prop (matching the original `Boolean(...)` checks) so that an
+* empty string or `false` is treated as "no content".
+*/
+function nodePresent(prop, slot) {
+	if (prop !== void 0) return Boolean(prop);
+	return Boolean(slot);
+}
 var varsResolver$41 = createVarsResolver((_, { size }) => ({
 	label: {
 		"--input-label-size": getFontSize(size),
@@ -11588,39 +11521,21 @@ var varsResolver$41 = createVarsResolver((_, { size }) => ({
 	error: { "--input-error-size": size === void 0 ? void 0 : `calc(${getFontSize(size)} - ${rem(2)})` },
 	description: { "--input-description-size": size === void 0 ? void 0 : `calc(${getFontSize(size)} - ${rem(2)})` }
 }));
-function renderContent$4(content) {
-	return typeof content === "function" ? content() : content;
-}
 var InputWrapper = (0, vue.defineComponent)({
 	name: "InputWrapper",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		label: {
-			type: [
-				String,
-				Number,
-				Object,
-				Function
-			],
+			type: null,
 			default: void 0
 		},
 		description: {
-			type: [
-				String,
-				Number,
-				Object,
-				Function
-			],
+			type: null,
 			default: void 0
 		},
 		error: {
-			type: [
-				String,
-				Number,
-				Object,
-				Function,
-				Boolean
-			],
+			type: null,
 			default: void 0
 		},
 		required: {
@@ -11705,8 +11620,8 @@ var InputWrapper = (0, vue.defineComponent)({
 		const ids = (0, vue.computed)(() => {
 			const errorId = props.errorProps?.id || `${idBase.value}-error`;
 			const descriptionId = props.descriptionProps?.id || `${idBase.value}-description`;
-			const hasError = Boolean(props.error) && typeof props.error !== "boolean";
-			const hasDescription = Boolean(props.description);
+			const hasError = props.error !== void 0 ? Boolean(props.error) && typeof props.error !== "boolean" : Boolean(slots.error);
+			const hasDescription = nodePresent(props.description, slots.description);
 			const describedBy = `${hasError ? errorId : ""} ${hasDescription ? descriptionId : ""}`.trim();
 			return {
 				errorId,
@@ -11749,7 +11664,10 @@ var InputWrapper = (0, vue.defineComponent)({
 				size: props.size,
 				variant: props.variant
 			};
-			const label = props.label ? (0, vue.h)(InputLabel, {
+			const labelContent = resolveNode(props.label, slots.label);
+			const descriptionContent = resolveNode(props.description, slots.description);
+			const errorContent = resolveNode(props.error, slots.error);
+			const label = labelContent ? (0, vue.h)(InputLabel, {
 				key: "label",
 				labelElement: props.labelElement,
 				id: ids.value.labelId,
@@ -11757,14 +11675,14 @@ var InputWrapper = (0, vue.defineComponent)({
 				required: isRequired,
 				...sharedProps,
 				...props.labelProps
-			}, () => renderContent$4(props.label)) : null;
+			}, () => labelContent) : null;
 			const description = ids.value.hasDescription ? (0, vue.h)(InputDescription, {
 				key: "description",
 				...props.descriptionProps,
 				...sharedProps,
 				size: props.descriptionProps?.size || props.size,
 				id: props.descriptionProps?.id || ids.value.descriptionId
-			}, () => renderContent$4(props.description)) : null;
+			}, () => descriptionContent) : null;
 			const input = props.inputContainer ? props.inputContainer(slots.default?.()) : slots.default?.();
 			const error = ids.value.hasError ? (0, vue.h)(InputError, {
 				key: "error",
@@ -11772,7 +11690,7 @@ var InputWrapper = (0, vue.defineComponent)({
 				...sharedProps,
 				size: props.errorProps?.size || props.size,
 				id: props.errorProps?.id || ids.value.errorId
-			}, () => renderContent$4(props.error)) : null;
+			}, () => errorContent) : null;
 			const content = order.map((part) => {
 				if (part === "label") return label;
 				if (part === "description") return description;
@@ -11783,7 +11701,7 @@ var InputWrapper = (0, vue.defineComponent)({
 				...attrs,
 				variant: props.variant,
 				"data-size": props.size,
-				mod: [{ error: Boolean(props.error) }, props.mod],
+				mod: [{ error: nodePresent(props.error, slots.error) }, props.mod],
 				id: props.labelElement === "label" ? void 0 : props.id,
 				...getStyles("root", {
 					className: attrs.class,
@@ -11811,12 +11729,13 @@ var varsResolver$40 = createVarsResolver((_, props, ctx) => ({ wrapper: {
 	"--input-left-section-pointer-events": props.leftSectionPointerEvents,
 	"--input-right-section-pointer-events": props.rightSectionPointerEvents
 } }));
-function renderContent$3(content) {
+function renderContent$1(content) {
 	return typeof content === "function" ? content() : content;
 }
 var InputBase$1 = (0, vue.defineComponent)({
 	name: "Input",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		component: {
 			type: [
@@ -11835,12 +11754,7 @@ var InputBase$1 = (0, vue.defineComponent)({
 			default: void 0
 		},
 		leftSection: {
-			type: [
-				String,
-				Number,
-				Object,
-				Function
-			],
+			type: null,
 			default: void 0
 		},
 		leftSectionWidth: {
@@ -11856,13 +11770,7 @@ var InputBase$1 = (0, vue.defineComponent)({
 			default: "none"
 		},
 		rightSection: {
-			type: [
-				String,
-				Number,
-				Object,
-				Function,
-				null
-			],
+			type: null,
 			default: void 0
 		},
 		rightSectionWidth: {
@@ -12031,11 +11939,13 @@ var InputBase$1 = (0, vue.defineComponent)({
 			stylesCtx.offsetBottom = wrapperCtx.offsetBottom;
 			stylesCtx.offsetTop = wrapperCtx.offsetTop;
 			const loadingIndicator = props.loading ? (0, vue.h)(Loader, { size: props.loadingPosition === "left" ? "calc(var(--input-left-section-size) / 2)" : "calc(var(--input-right-section-size) / 2)" }) : null;
-			const leftSection = props.loading && props.loadingPosition === "left" ? loadingIndicator : props.leftSection;
+			const resolvedLeftSection = resolveNode(props.leftSection, slots.leftSection);
+			const resolvedRightSection = resolveNode(props.rightSection, slots.rightSection);
+			const leftSection = props.loading && props.loadingPosition === "left" ? loadingIndicator : resolvedLeftSection;
 			const rightSection = InputClearSection({
 				__clearable: props.__clearable,
 				__clearSection: props.__clearSection,
-				rightSection: props.loading && props.loadingPosition === "right" ? loadingIndicator : props.rightSection,
+				rightSection: props.loading && props.loadingPosition === "right" ? loadingIndicator : resolvedRightSection,
 				__defaultRightSection: props.__defaultRightSection,
 				size: props.size,
 				__clearSectionMode: props.__clearSectionMode
@@ -12070,7 +11980,7 @@ var InputBase$1 = (0, vue.defineComponent)({
 						className: props.leftSectionProps?.class,
 						style: props.leftSectionProps?.style
 					})
-				}, renderContent$3(leftSection)) : null,
+				}, renderContent$1(leftSection)) : null,
 				(0, vue.h)(Box, {
 					...attrs,
 					...ariaAttributes,
@@ -12091,7 +12001,7 @@ var InputBase$1 = (0, vue.defineComponent)({
 						className: props.__bottomSectionProps?.class,
 						style: props.__bottomSectionProps?.style
 					})
-				}, renderContent$3(props.__bottomSection)) : null,
+				}, renderContent$1(props.__bottomSection)) : null,
 				rightSection ? (0, vue.h)("div", {
 					...props.rightSectionProps,
 					"data-position": "right",
@@ -12099,7 +12009,7 @@ var InputBase$1 = (0, vue.defineComponent)({
 						className: props.rightSectionProps?.class,
 						style: props.rightSectionProps?.style
 					})
-				}, renderContent$3(rightSection)) : null
+				}, renderContent$1(rightSection)) : null
 			]);
 		};
 	}
@@ -12119,6 +12029,7 @@ var Input = withBoxProps(Object.assign(InputBase$1, {
 var InputBase = withBoxProps((0, vue.defineComponent)({
 	name: "InputBase",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		component: {
 			type: [
@@ -12137,31 +12048,15 @@ var InputBase = withBoxProps((0, vue.defineComponent)({
 			default: void 0
 		},
 		label: {
-			type: [
-				String,
-				Number,
-				Object,
-				Function
-			],
+			type: null,
 			default: void 0
 		},
 		description: {
-			type: [
-				String,
-				Number,
-				Object,
-				Function
-			],
+			type: null,
 			default: void 0
 		},
 		error: {
-			type: [
-				String,
-				Number,
-				Object,
-				Function,
-				Boolean
-			],
+			type: null,
 			default: void 0
 		},
 		required: {
@@ -12258,13 +12153,7 @@ var InputBase = withBoxProps((0, vue.defineComponent)({
 			default: void 0
 		},
 		rightSection: {
-			type: [
-				String,
-				Number,
-				Object,
-				Function,
-				null
-			],
+			type: null,
 			default: void 0
 		},
 		rightSectionWidth: {
@@ -12377,45 +12266,54 @@ var InputBase = withBoxProps((0, vue.defineComponent)({
 			vars: props.vars,
 			unstyled: props.unstyled,
 			mod: props.mod
-		}, () => (0, vue.h)(Input, {
-			...attrs,
-			component: props.component,
-			__staticSelector: props.__staticSelector,
-			__stylesApiProps: props.__stylesApiProps ?? props,
-			error: props.error,
-			required: props.required,
-			id: props.id,
-			size: props.size,
-			variant: props.variant,
-			multiline: props.multiline,
-			withAria: props.withAria,
-			classNames: props.classNames,
-			styles: props.styles,
-			vars: props.vars,
-			unstyled: props.unstyled,
-			leftSection: props.leftSection,
-			leftSectionWidth: props.leftSectionWidth,
-			leftSectionProps: props.leftSectionProps,
-			leftSectionPointerEvents: props.leftSectionPointerEvents,
-			rightSection: props.rightSection,
-			rightSectionWidth: props.rightSectionWidth,
-			rightSectionProps: props.rightSectionProps,
-			rightSectionPointerEvents: props.rightSectionPointerEvents,
-			__clearSection: props.__clearSection,
-			__clearable: props.__clearable,
-			__clearSectionMode: props.__clearSectionMode,
-			__defaultRightSection: props.__defaultRightSection,
-			radius: props.radius,
-			disabled: props.disabled,
-			pointer: props.pointer,
-			withErrorStyles: props.withErrorStyles,
-			inputSize: props.inputSize,
-			loading: props.loading,
-			loadingPosition: props.loadingPosition,
-			__bottomSection: props.__bottomSection,
-			__bottomSectionProps: props.__bottomSectionProps,
-			rootRef: props.rootRef
-		}, () => slots.default?.()));
+		}, {
+			label: slots.label,
+			description: slots.description,
+			error: slots.error,
+			default: () => (0, vue.h)(Input, {
+				...attrs,
+				component: props.component,
+				__staticSelector: props.__staticSelector,
+				__stylesApiProps: props.__stylesApiProps ?? props,
+				error: props.error ?? (slots.error ? true : void 0),
+				required: props.required,
+				id: props.id,
+				size: props.size,
+				variant: props.variant,
+				multiline: props.multiline,
+				withAria: props.withAria,
+				classNames: props.classNames,
+				styles: props.styles,
+				vars: props.vars,
+				unstyled: props.unstyled,
+				leftSection: props.leftSection,
+				leftSectionWidth: props.leftSectionWidth,
+				leftSectionProps: props.leftSectionProps,
+				leftSectionPointerEvents: props.leftSectionPointerEvents,
+				rightSection: props.rightSection,
+				rightSectionWidth: props.rightSectionWidth,
+				rightSectionProps: props.rightSectionProps,
+				rightSectionPointerEvents: props.rightSectionPointerEvents,
+				__clearSection: props.__clearSection,
+				__clearable: props.__clearable,
+				__clearSectionMode: props.__clearSectionMode,
+				__defaultRightSection: props.__defaultRightSection,
+				radius: props.radius,
+				disabled: props.disabled,
+				pointer: props.pointer,
+				withErrorStyles: props.withErrorStyles,
+				inputSize: props.inputSize,
+				loading: props.loading,
+				loadingPosition: props.loadingPosition,
+				__bottomSection: props.__bottomSection,
+				__bottomSectionProps: props.__bottomSectionProps,
+				rootRef: props.rootRef
+			}, {
+				default: () => slots.default?.(),
+				leftSection: slots.leftSection,
+				rightSection: slots.rightSection
+			})
+		});
 	}
 }));
 Object.assign(InputBase, { classes: Input.classes });
@@ -12431,6 +12329,7 @@ function defaultValueComponent(value) {
 var FileInput = (0, vue.defineComponent)({
 	name: "FileInput",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		component: {
 			type: String,
@@ -12501,12 +12400,7 @@ var FileInput = (0, vue.defineComponent)({
 			default: void 0
 		},
 		placeholder: {
-			type: [
-				String,
-				Number,
-				Object,
-				Function
-			],
+			type: null,
 			default: void 0
 		},
 		resetRef: {
@@ -12514,13 +12408,7 @@ var FileInput = (0, vue.defineComponent)({
 			default: void 0
 		},
 		rightSection: {
-			type: [
-				String,
-				Number,
-				Object,
-				Function,
-				null
-			],
+			type: null,
 			default: void 0
 		},
 		size: {
@@ -12528,31 +12416,15 @@ var FileInput = (0, vue.defineComponent)({
 			default: "sm"
 		},
 		label: {
-			type: [
-				String,
-				Number,
-				Object,
-				Function
-			],
+			type: null,
 			default: void 0
 		},
 		description: {
-			type: [
-				String,
-				Number,
-				Object,
-				Function
-			],
+			type: null,
 			default: void 0
 		},
 		error: {
-			type: [
-				String,
-				Number,
-				Object,
-				Function,
-				Boolean
-			],
+			type: null,
 			default: void 0
 		},
 		required: {
@@ -12584,7 +12456,7 @@ var FileInput = (0, vue.defineComponent)({
 			default: false
 		}
 	},
-	setup(props, { attrs }) {
+	setup(props, { attrs, slots }) {
 		const resetRef = (0, vue.ref)(null);
 		const [value, setValue] = (0, _mantine_vue_hooks.useUncontrolled)({
 			value: () => props.value,
@@ -12643,7 +12515,18 @@ var FileInput = (0, vue.defineComponent)({
 				classNames: props.classNames,
 				styles: props.styles,
 				vars: props.vars
-			}, () => !hasValue.value ? (0, vue.h)(Input.Placeholder, { __staticSelector: "FileInput" }, () => props.placeholder) : props.valueComponent(value.value)) });
+			}, {
+				default: () => {
+					if (hasValue.value) return props.valueComponent(value.value);
+					const placeholder = resolveNode(props.placeholder, slots.placeholder);
+					return hasNode(placeholder) ? (0, vue.h)(Input.Placeholder, { __staticSelector: "FileInput" }, () => placeholder) : null;
+				},
+				label: slots.label,
+				description: slots.description,
+				error: slots.error,
+				leftSection: slots.leftSection,
+				rightSection: slots.rightSection
+			}) });
 		};
 	}
 });
@@ -12667,6 +12550,7 @@ var varsResolver$39 = createVarsResolver((theme, { radius, color }) => ({ root:
 var Notification = withBoxProps((0, vue.defineComponent)({
 	name: "Notification",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		onClose: {
 			type: Function,
@@ -12681,21 +12565,11 @@ var Notification = withBoxProps((0, vue.defineComponent)({
 			default: void 0
 		},
 		icon: {
-			type: [
-				String,
-				Number,
-				Object,
-				Function
-			],
+			type: null,
 			default: void 0
 		},
 		title: {
-			type: [
-				String,
-				Number,
-				Object,
-				Function
-			],
+			type: null,
 			default: void 0
 		},
 		loading: {
@@ -12753,43 +12627,46 @@ var Notification = withBoxProps((0, vue.defineComponent)({
 			vars: props.vars,
 			varsResolver: varsResolver$39
 		});
-		const renderContent = (value) => typeof value === "function" ? value() : value;
-		return () => (0, vue.h)(Box, {
-			...attrs,
-			role: attrs.role || "alert",
-			mod: [{
-				withIcon: Boolean(props.icon) || props.loading,
-				withBorder: props.withBorder
-			}, props.mod],
-			...getStyles("root", {
-				className: attrs.class,
-				style: attrs.style
-			})
-		}, () => [
-			props.icon && !props.loading ? (0, vue.h)("div", getStyles("icon"), renderContent(props.icon)) : null,
-			props.loading ? (0, vue.h)(Loader, {
-				size: 28,
-				color: props.color,
-				...getStyles("loader"),
-				...props.loaderProps
-			}) : null,
-			(0, vue.h)("div", getStyles("body"), [props.title ? (0, vue.h)("div", getStyles("title"), renderContent(props.title)) : null, (0, vue.h)(Box, {
-				...getStyles("description"),
-				mod: { withTitle: Boolean(props.title) }
-			}, () => slots.default?.())]),
-			props.withCloseButton ? (0, vue.h)(CloseButton, {
-				iconSize: 16,
-				color: "gray",
-				__staticSelector: "Notification",
-				unstyled: props.unstyled,
-				...props.closeButtonProps,
-				...getStyles("closeButton"),
-				onClick: (event) => {
-					props.closeButtonProps?.onClick?.(event);
-					props.onClose?.();
-				}
-			}) : null
-		]);
+		return () => {
+			const icon = resolveNode(props.icon, slots.icon);
+			const title = resolveNode(props.title, slots.title);
+			return (0, vue.h)(Box, {
+				...attrs,
+				role: attrs.role || "alert",
+				mod: [{
+					withIcon: hasNode(icon) || props.loading,
+					withBorder: props.withBorder
+				}, props.mod],
+				...getStyles("root", {
+					className: attrs.class,
+					style: attrs.style
+				})
+			}, () => [
+				hasNode(icon) && !props.loading ? (0, vue.h)("div", getStyles("icon"), icon) : null,
+				props.loading ? (0, vue.h)(Loader, {
+					size: 28,
+					color: props.color,
+					...getStyles("loader"),
+					...props.loaderProps
+				}) : null,
+				(0, vue.h)("div", getStyles("body"), [hasNode(title) ? (0, vue.h)("div", getStyles("title"), title) : null, (0, vue.h)(Box, {
+					...getStyles("description"),
+					mod: { withTitle: hasNode(title) }
+				}, () => slots.default?.())]),
+				props.withCloseButton ? (0, vue.h)(CloseButton, {
+					iconSize: 16,
+					color: "gray",
+					__staticSelector: "Notification",
+					unstyled: props.unstyled,
+					...props.closeButtonProps,
+					...getStyles("closeButton"),
+					onClick: (event) => {
+						props.closeButtonProps?.onClick?.(event);
+						props.onClose?.();
+					}
+				}) : null
+			]);
+		};
 	}
 }));
 Object.assign(Notification, {
@@ -13043,6 +12920,7 @@ function getDecimalPlaces(value) {
 var NumberInput = (0, vue.defineComponent)({
 	name: "NumberInput",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		value: {
 			type: [
@@ -13181,13 +13059,7 @@ var NumberInput = (0, vue.defineComponent)({
 			default: false
 		},
 		rightSection: {
-			type: [
-				String,
-				Number,
-				Object,
-				Function,
-				null
-			],
+			type: null,
 			default: void 0
 		},
 		rightSectionWidth: {
@@ -13199,31 +13071,15 @@ var NumberInput = (0, vue.defineComponent)({
 			default: void 0
 		},
 		label: {
-			type: [
-				String,
-				Number,
-				Object,
-				Function
-			],
+			type: null,
 			default: void 0
 		},
 		description: {
-			type: [
-				String,
-				Number,
-				Object,
-				Function
-			],
+			type: null,
 			default: void 0
 		},
 		error: {
-			type: [
-				String,
-				Number,
-				Object,
-				Function,
-				Boolean
-			],
+			type: null,
 			default: void 0
 		},
 		required: {
@@ -13255,7 +13111,7 @@ var NumberInput = (0, vue.defineComponent)({
 			default: false
 		}
 	},
-	setup(props, { attrs }) {
+	setup(props, { attrs, slots }) {
 		const inputRef = (0, vue.ref)(null);
 		const isEditing = (0, vue.ref)(false);
 		const isBigIntMode = (0, vue.computed)(() => typeof props.value === "bigint" || typeof props.defaultValue === "bigint");
@@ -13436,7 +13292,7 @@ var NumberInput = (0, vue.defineComponent)({
 			styles: props.styles,
 			vars: props.vars,
 			unstyled: props.unstyled,
-			rightSection: props.hideControls || props.readOnly ? props.rightSection : props.rightSection || controls,
+			rightSection: props.hideControls || props.readOnly ? props.rightSection : props.rightSection !== void 0 || slots.rightSection ? props.rightSection : controls,
 			rightSectionPointerEvents: props.rightSectionPointerEvents ?? (props.disabled ? "none" : void 0),
 			rightSectionWidth: props.rightSectionWidth ?? `var(--ni-right-section-width-${props.size || "sm"})`,
 			class: [NumberInput_module_default.root, attrs.class],
@@ -13490,7 +13346,7 @@ var NumberInput = (0, vue.defineComponent)({
 			rootRef: (node) => {
 				inputRef.value = node?.querySelector?.("input") ?? node;
 			}
-		});
+		}, slots);
 	}
 });
 Object.assign(NumberInput, {
@@ -14040,6 +13896,7 @@ function NativeSelectChevron() {
 var NativeSelect = (0, vue.defineComponent)({
 	name: "NativeSelect",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		data: {
 			type: Array,
@@ -14050,23 +13907,11 @@ var NativeSelect = (0, vue.defineComponent)({
 			default: void 0
 		},
 		error: {
-			type: [
-				String,
-				Number,
-				Object,
-				Function,
-				Boolean
-			],
+			type: null,
 			default: void 0
 		},
 		rightSection: {
-			type: [
-				String,
-				Number,
-				Object,
-				Function,
-				null
-			],
+			type: null,
 			default: void 0
 		},
 		rightSectionPointerEvents: {
@@ -14074,21 +13919,11 @@ var NativeSelect = (0, vue.defineComponent)({
 			default: void 0
 		},
 		label: {
-			type: [
-				String,
-				Number,
-				Object,
-				Function
-			],
+			type: null,
 			default: void 0
 		},
 		description: {
-			type: [
-				String,
-				Number,
-				Object,
-				Function
-			],
+			type: null,
 			default: void 0
 		},
 		required: {
@@ -14163,7 +13998,7 @@ var NativeSelect = (0, vue.defineComponent)({
 				pointer: true,
 				error: props.error,
 				unstyled: props.unstyled,
-				rightSection: props.rightSection ?? NativeSelectChevron,
+				rightSection: props.rightSection !== void 0 || slots.rightSection ? props.rightSection : NativeSelectChevron,
 				rightSectionPointerEvents: props.rightSectionPointerEvents,
 				label: props.label,
 				description: props.description,
@@ -14180,7 +14015,14 @@ var NativeSelect = (0, vue.defineComponent)({
 				classNames: props.classNames,
 				styles: props.styles,
 				vars: props.vars
-			}, () => slots.default?.() ?? parsedOptions);
+			}, {
+				default: () => slots.default?.() ?? parsedOptions,
+				label: slots.label,
+				description: slots.description,
+				error: slots.error,
+				leftSection: slots.leftSection,
+				rightSection: slots.rightSection
+			});
 		};
 	}
 });
@@ -14212,7 +14054,7 @@ var varsResolver$35 = createVarsResolver((theme, { variant, color, childrenOffse
 		children: { "--nl-offset": getSpacing(childrenOffset) }
 	};
 });
-function renderContent$2(content) {
+function renderContent(content) {
 	return typeof content === "function" ? content() : content;
 }
 function callHandler$8(handler, event) {
@@ -14222,6 +14064,7 @@ function callHandler$8(handler, event) {
 var NavLink = withBoxProps((0, vue.defineComponent)({
 	name: "NavLink",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		component: {
 			type: String,
@@ -14237,12 +14080,7 @@ var NavLink = withBoxProps((0, vue.defineComponent)({
 			default: void 0
 		},
 		description: {
-			type: [
-				String,
-				Number,
-				Object,
-				Function
-			],
+			type: null,
 			default: void 0
 		},
 		leftSection: {
@@ -14255,13 +14093,7 @@ var NavLink = withBoxProps((0, vue.defineComponent)({
 			default: void 0
 		},
 		rightSection: {
-			type: [
-				String,
-				Number,
-				Object,
-				Function,
-				null
-			],
+			type: null,
 			default: void 0
 		},
 		active: {
@@ -14353,10 +14185,10 @@ var NavLink = withBoxProps((0, vue.defineComponent)({
 			varsResolver: varsResolver$35
 		});
 		return () => {
-			const children = slots.default?.();
-			const withChildren = Boolean(children && children.length > 0);
-			const rightSection = props.rightSection ?? slots.rightSection?.();
-			const leftSection = props.leftSection ?? slots.leftSection?.();
+			const children = slots.default?.() ?? [];
+			const withChildren = hasNode(children);
+			const rightSection = resolveNode(props.rightSection, slots.rightSection);
+			const leftSection = resolveNode(props.leftSection, slots.leftSection);
 			const toggle = (event) => {
 				if (withChildren) {
 					event.preventDefault();
@@ -14386,30 +14218,30 @@ var NavLink = withBoxProps((0, vue.defineComponent)({
 					if (event.code === "Space" && withChildren) toggle(event);
 				}
 			}, () => [
-				leftSection ? (0, vue.h)(Box, {
+				hasNode(leftSection) ? (0, vue.h)(Box, {
 					component: "span",
 					...getStyles("section"),
 					mod: { position: "left" }
-				}, () => renderContent$2(leftSection)) : null,
+				}, () => renderContent(leftSection)) : null,
 				(0, vue.h)(Box, {
 					...getStyles("body"),
 					mod: { "no-wrap": props.noWrap }
 				}, () => [(0, vue.h)(Box, {
 					component: "span",
 					...getStyles("label")
-				}, () => renderContent$2(props.label ?? slots.label?.())), props.description || slots.description ? (0, vue.h)(Box, {
+				}, () => renderContent(props.label ?? slots.label?.())), props.description || slots.description ? (0, vue.h)(Box, {
 					component: "span",
 					mod: { active: props.active },
 					...getStyles("description")
-				}, () => renderContent$2(props.description ?? slots.description?.())) : null]),
-				withChildren || rightSection !== void 0 ? (0, vue.h)(Box, {
+				}, () => renderContent(props.description ?? slots.description?.())) : null]),
+				withChildren || hasNode(rightSection) ? (0, vue.h)(Box, {
 					...getStyles("section"),
 					component: "span",
 					mod: {
 						rotate: opened.value && !props.disableRightSectionRotation,
 						position: "right"
 					}
-				}, () => withChildren ? rightSection !== void 0 ? renderContent$2(rightSection) : (0, vue.h)(AccordionChevron, getStyles("chevron")) : renderContent$2(rightSection)) : null
+				}, () => withChildren ? hasNode(rightSection) ? renderContent(rightSection) : (0, vue.h)(AccordionChevron, getStyles("chevron")) : renderContent(rightSection)) : null
 			]), withChildren ? (0, vue.h)(Collapse, {
 				expanded: opened.value,
 				keepMounted: props.keepMounted,
@@ -14945,6 +14777,7 @@ var varsResolver$31 = createVarsResolver((theme, { size, color }) => ({ root: {
 var Rating = withBoxProps((0, vue.defineComponent)({
 	name: "Rating",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		defaultValue: {
 			type: Number,
@@ -14959,21 +14792,11 @@ var Rating = withBoxProps((0, vue.defineComponent)({
 			default: void 0
 		},
 		emptySymbol: {
-			type: [
-				String,
-				Number,
-				Object,
-				Function
-			],
+			type: null,
 			default: void 0
 		},
 		fullSymbol: {
-			type: [
-				String,
-				Number,
-				Object,
-				Function
-			],
+			type: null,
 			default: void 0
 		},
 		fractions: {
@@ -15037,7 +14860,7 @@ var Rating = withBoxProps((0, vue.defineComponent)({
 			default: false
 		}
 	},
-	setup(rawProps, { attrs }) {
+	setup(rawProps, { attrs, slots }) {
 		const props = useProps("Rating", defaultProps$11, rawProps);
 		const rootRef = (0, vue.ref)(null);
 		const hovered = (0, vue.ref)(-1);
@@ -15071,6 +14894,8 @@ var Rating = withBoxProps((0, vue.defineComponent)({
 			return clamp$2(roundValueTo((dir.value === "rtl" ? right - x : x - left) / symbolWidth + decimalUnit / 2, decimalUnit), decimalUnit, count);
 		};
 		return () => {
+			const emptySymbol = props.emptySymbol ?? (slots.emptySymbol ? (value) => slots.emptySymbol({ value }) : void 0);
+			const fullSymbol = props.fullSymbol ?? (slots.fullSymbol ? (value) => slots.fullSymbol({ value }) : void 0);
 			const count = Math.max(0, Math.floor(props.count ?? defaultProps$11.count));
 			const fractions = Math.floor(props.fractions ?? defaultProps$11.fractions);
 			if (fractions < 0) throw new Error("Rating fractions cannot be negative");
@@ -15090,8 +14915,8 @@ var Rating = withBoxProps((0, vue.defineComponent)({
 					return (0, vue.h)(RatingItem, {
 						key: `${integerValue}-${symbolValue}`,
 						getSymbolLabel: props.getSymbolLabel,
-						emptyIcon: props.emptySymbol,
-						fullIcon: props.fullSymbol,
+						emptyIcon: emptySymbol,
+						fullIcon: fullSymbol,
 						full: props.highlightSelectedOnly ? symbolValue === finalValue : symbolValue <= finalValue,
 						active: symbolValue === finalValue,
 						checked: symbolValue === stableValueRounded,
@@ -15684,6 +15509,7 @@ function createEdge(name, icon, label, getDisabled, getAction) {
 	return (0, vue.defineComponent)({
 		name,
 		inheritAttrs: false,
+		slots: Object,
 		props: {
 			icon: {
 				type: [Object, Function],
@@ -15694,7 +15520,7 @@ function createEdge(name, icon, label, getDisabled, getAction) {
 				default: false
 			}
 		},
-		setup(props, { attrs }) {
+		setup(props, { attrs, slots }) {
 			const ctx = usePaginationContext();
 			return () => {
 				const Icon = props.icon ?? icon;
@@ -15705,7 +15531,7 @@ function createEdge(name, icon, label, getDisabled, getAction) {
 					withPadding: false,
 					"aria-label": attrs["aria-label"] ?? label,
 					onClick: disabled ? void 0 : getAction(ctx)
-				}, () => (0, vue.h)(Icon, { class: "mantine-rotate-rtl" }));
+				}, () => slots.icon ? slots.icon() : (0, vue.h)(Icon, { class: "mantine-rotate-rtl" }));
 			};
 		}
 	});
@@ -15719,11 +15545,12 @@ var PaginationLast = withBoxProps(createEdge("PaginationLast", PaginationLastIco
 var PaginationDots = withBoxProps((0, vue.defineComponent)({
 	name: "PaginationDots",
 	inheritAttrs: false,
+	slots: Object,
 	props: { icon: {
 		type: [Object, Function],
 		default: void 0
 	} },
-	setup(props, { attrs }) {
+	setup(props, { attrs, slots }) {
 		const ctx = usePaginationContext();
 		return () => {
 			const Icon = props.icon ?? PaginationDotsIcon;
@@ -15734,7 +15561,7 @@ var PaginationDots = withBoxProps((0, vue.defineComponent)({
 					className: attrs.class,
 					style: attrs.style
 				})
-			}, () => (0, vue.h)(Icon));
+			}, () => slots.icon ? slots.icon() : (0, vue.h)(Icon));
 		};
 	}
 }));
@@ -16216,9 +16043,6 @@ var TabsPanel = withBoxProps((0, vue.defineComponent)({
 }));
 //#endregion
 //#region src/components/Tabs/TabsTab/TabsTab.ts
-function renderContent$1(content) {
-	return typeof content === "function" ? content() : content;
-}
 function getTabs(event, selector) {
 	const parent = event.currentTarget.closest("[role=\"tablist\"]");
 	return Array.from(parent?.querySelectorAll(selector) ?? []).filter((item) => !item.hasAttribute("disabled") && item.getAttribute("aria-disabled") !== "true");
@@ -16251,27 +16075,18 @@ function createTabsKeydownHandler({ orientation, dir, loop, activateOnFocus, onK
 var TabsTab = (0, vue.defineComponent)({
 	name: "TabsTab",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		value: {
 			type: String,
 			required: true
 		},
 		rightSection: {
-			type: [
-				String,
-				Number,
-				Object,
-				Function
-			],
+			type: null,
 			default: void 0
 		},
 		leftSection: {
-			type: [
-				String,
-				Number,
-				Object,
-				Function
-			],
+			type: null,
 			default: void 0
 		},
 		color: {
@@ -16317,6 +16132,8 @@ var TabsTab = (0, vue.defineComponent)({
 		const ctx = useTabsContext();
 		return () => {
 			const active = props.value === ctx.value;
+			const leftSection = resolveNode(props.leftSection, slots.leftSection);
+			const rightSection = resolveNode(props.rightSection, slots.rightSection);
 			const stylesApiProps = {
 				classNames: props.classNames,
 				styles: props.styles,
@@ -16361,20 +16178,20 @@ var TabsTab = (0, vue.defineComponent)({
 					onKeydown: props.onKeydown ?? props.onKeyDown
 				})
 			}, () => [
-				props.leftSection ? (0, vue.h)(Box, {
+				hasNode(leftSection) ? (0, vue.h)(Box, {
 					component: "span",
 					...ctx.getStyles("tabSection", stylesApiProps),
 					"data-position": "left"
-				}, () => renderContent$1(props.leftSection)) : null,
+				}, () => leftSection) : null,
 				slots.default ? (0, vue.h)(Box, {
 					component: "span",
 					...ctx.getStyles("tabLabel", stylesApiProps)
 				}, () => slots.default?.()) : null,
-				props.rightSection ? (0, vue.h)(Box, {
+				hasNode(rightSection) ? (0, vue.h)(Box, {
 					component: "span",
 					...ctx.getStyles("tabSection", stylesApiProps),
 					"data-position": "right"
-				}, () => renderContent$1(props.rightSection)) : null
+				}, () => rightSection) : null
 			]);
 		};
 	}
@@ -16807,7 +16624,7 @@ var Textarea = (0, vue.defineComponent)({
 			default: void 0
 		}
 	},
-	setup(props, { attrs }) {
+	setup(props, { attrs, slots }) {
 		return () => {
 			const shouldAutosize = props.autosize;
 			const autosizeProps = shouldAutosize ? {
@@ -16824,7 +16641,7 @@ var Textarea = (0, vue.defineComponent)({
 				__bottomSectionProps: props.bottomSectionProps,
 				style: [{ "--input-resize": props.resize }, attrs.style],
 				...autosizeProps
-			});
+			}, slots);
 		};
 	}
 });
@@ -16903,7 +16720,7 @@ var JsonInput = (0, vue.defineComponent)({
 			default: void 0
 		}
 	},
-	setup(props, { attrs }) {
+	setup(props, { attrs, slots }) {
 		const [value, setValue] = (0, _mantine_vue_hooks.useUncontrolled)({
 			value: () => props.value,
 			defaultValue: props.defaultValue,
@@ -16934,7 +16751,7 @@ var JsonInput = (0, vue.defineComponent)({
 				if (props.formatOnBlur && !props.readOnly && isValid && target.value.trim() !== "") setValue(props.serialize(props.deserialize(target.value), null, props.indentSpaces));
 				valid.value = isValid;
 			}
-		});
+		}, slots);
 	}
 });
 Object.assign(JsonInput, { classes: InputBase.classes });
@@ -16943,13 +16760,13 @@ Object.assign(JsonInput, { classes: InputBase.classes });
 var TextInput = (0, vue.defineComponent)({
 	name: "TextInput",
 	inheritAttrs: false,
-	setup(_, { attrs }) {
+	setup(_, { attrs, slots }) {
 		return () => (0, vue.h)(InputBase, {
 			...attrs,
 			component: "input",
 			__staticSelector: "TextInput",
 			__stylesApiProps: attrs
-		});
+		}, slots);
 	}
 });
 Object.assign(TextInput, { classes: InputBase.classes });
@@ -17035,6 +16852,7 @@ var mergedClasses$3 = {
 var PasswordInput = (0, vue.defineComponent)({
 	name: "PasswordInput",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		visibilityToggleIcon: {
 			type: [Object, Function],
@@ -17057,31 +16875,15 @@ var PasswordInput = (0, vue.defineComponent)({
 			default: void 0
 		},
 		label: {
-			type: [
-				String,
-				Number,
-				Object,
-				Function
-			],
+			type: null,
 			default: void 0
 		},
 		description: {
-			type: [
-				String,
-				Number,
-				Object,
-				Function
-			],
+			type: null,
 			default: void 0
 		},
 		error: {
-			type: [
-				String,
-				Number,
-				Object,
-				Function,
-				Boolean
-			],
+			type: null,
 			default: void 0
 		},
 		required: {
@@ -17137,12 +16939,7 @@ var PasswordInput = (0, vue.defineComponent)({
 			default: false
 		},
 		leftSection: {
-			type: [
-				String,
-				Number,
-				Object,
-				Function
-			],
+			type: null,
 			default: void 0
 		},
 		leftSectionWidth: {
@@ -17158,13 +16955,7 @@ var PasswordInput = (0, vue.defineComponent)({
 			default: void 0
 		},
 		rightSection: {
-			type: [
-				String,
-				Number,
-				Object,
-				Function,
-				null
-			],
+			type: null,
 			default: void 0
 		},
 		rightSectionWidth: {
@@ -17200,7 +16991,7 @@ var PasswordInput = (0, vue.defineComponent)({
 			default: false
 		}
 	},
-	setup(props, { attrs }) {
+	setup(props, { attrs, slots }) {
 		const uuid = (0, _mantine_vue_hooks.useId)(props.id);
 		const fallbackId = (0, vue.ref)(`password-input-${Math.random().toString(36).slice(2)}`);
 		const [visible, setVisible] = (0, _mantine_vue_hooks.useUncontrolled)({
@@ -17226,8 +17017,8 @@ var PasswordInput = (0, vue.defineComponent)({
 			const id = uuid.value || fallbackId.value;
 			const errorId = props.errorProps?.id || `${id}-error`;
 			const descriptionId = props.descriptionProps?.id || `${id}-description`;
-			const hasError = Boolean(props.error) && typeof props.error !== "boolean";
-			const hasDescription = Boolean(props.description);
+			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 visibilityToggleButton = (0, vue.h)(ActionIcon, {
@@ -17291,43 +17082,52 @@ var PasswordInput = (0, vue.defineComponent)({
 					className: attrs.class,
 					style: attrs.style
 				})
-			}, () => (0, vue.h)(Input, {
-				component: "div",
-				error: props.error,
-				leftSection: props.leftSection,
-				size: props.size,
-				classNames: {
-					...props.classNames,
-					input: [PasswordInput_module_default.input, props.classNames?.input]
-				},
-				styles: props.styles,
-				radius: props.radius,
-				disabled: props.disabled,
-				__staticSelector: "PasswordInput",
-				__stylesApiProps: props,
-				rightSectionWidth: props.rightSectionWidth,
-				rightSection: props.rightSection ?? visibilityToggleButton,
-				variant: props.variant,
-				unstyled: props.unstyled,
-				leftSectionWidth: props.leftSectionWidth,
-				rightSectionPointerEvents: props.rightSectionPointerEvents || "all",
-				rightSectionProps: props.rightSectionProps,
-				leftSectionProps: props.leftSectionProps,
-				leftSectionPointerEvents: props.leftSectionPointerEvents,
-				withAria: false,
-				withErrorStyles: props.withErrorStyles
-			}, () => (0, vue.h)("input", {
-				...attrs,
-				...getStyles("innerInput"),
-				required: props.required,
-				"data-invalid": props.error ? true : void 0,
-				"data-with-left-section": props.leftSection ? true : void 0,
-				disabled: props.disabled,
-				id,
-				"aria-describedby": describedBy,
-				autocomplete: attrs.autocomplete || "off",
-				type: visible.value ? "text" : "password"
-			})));
+			}, {
+				label: slots.label,
+				description: slots.description,
+				error: slots.error,
+				default: () => (0, vue.h)(Input, {
+					component: "div",
+					error: props.error ?? (slots.error ? true : void 0),
+					leftSection: props.leftSection,
+					size: props.size,
+					classNames: {
+						...props.classNames,
+						input: [PasswordInput_module_default.input, props.classNames?.input]
+					},
+					styles: props.styles,
+					radius: props.radius,
+					disabled: props.disabled,
+					__staticSelector: "PasswordInput",
+					__stylesApiProps: props,
+					rightSectionWidth: props.rightSectionWidth,
+					rightSection: props.rightSection !== void 0 || slots.rightSection ? props.rightSection : visibilityToggleButton,
+					variant: props.variant,
+					unstyled: props.unstyled,
+					leftSectionWidth: props.leftSectionWidth,
+					rightSectionPointerEvents: props.rightSectionPointerEvents || "all",
+					rightSectionProps: props.rightSectionProps,
+					leftSectionProps: props.leftSectionProps,
+					leftSectionPointerEvents: props.leftSectionPointerEvents,
+					withAria: false,
+					withErrorStyles: props.withErrorStyles
+				}, {
+					default: () => (0, vue.h)("input", {
+						...attrs,
+						...getStyles("innerInput"),
+						required: props.required,
+						"data-invalid": props.error || slots.error ? true : void 0,
+						"data-with-left-section": props.leftSection !== void 0 || slots.leftSection ? true : void 0,
+						disabled: props.disabled,
+						id,
+						"aria-describedby": describedBy,
+						autocomplete: attrs.autocomplete || "off",
+						type: visible.value ? "text" : "password"
+					}),
+					leftSection: slots.leftSection,
+					rightSection: slots.rightSection
+				})
+			});
 		};
 	}
 });
@@ -17566,6 +17366,7 @@ function useCheckboxGroupContext() {
 var CheckboxGroup = (0, vue.defineComponent)({
 	name: "CheckboxGroup",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		value: {
 			type: Array,
@@ -17612,31 +17413,15 @@ var CheckboxGroup = (0, vue.defineComponent)({
 			default: false
 		},
 		label: {
-			type: [
-				String,
-				Number,
-				Object,
-				Function
-			],
+			type: null,
 			default: void 0
 		},
 		description: {
-			type: [
-				String,
-				Number,
-				Object,
-				Function
-			],
+			type: null,
 			default: void 0
 		},
 		error: {
-			type: [
-				String,
-				Number,
-				Object,
-				Function,
-				Boolean
-			],
+			type: null,
 			default: void 0
 		},
 		classNames: {
@@ -17693,9 +17478,9 @@ var CheckboxGroup = (0, vue.defineComponent)({
 				size: props.size,
 				...props.wrapperProps,
 				...attrs,
-				label: props.label,
-				description: props.description,
-				error: props.error,
+				label: resolveNode(props.label, slots.label),
+				description: resolveNode(props.description, slots.description),
+				error: resolveNode(props.error, slots.error),
 				classNames: props.classNames,
 				styles: props.styles,
 				vars: props.vars,
@@ -17837,6 +17622,7 @@ var varsResolver$24 = createVarsResolver((theme, { radius, color, size, iconColo
 var CheckboxIndicator = withBoxProps((0, vue.defineComponent)({
 	name: "CheckboxIndicator",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		color: {
 			type: String,
@@ -17899,7 +17685,7 @@ var CheckboxIndicator = withBoxProps((0, vue.defineComponent)({
 			default: false
 		}
 	},
-	setup(props, { attrs }) {
+	setup(props, { attrs, slots }) {
 		const cardContext = useCheckboxCardContext();
 		const getStyles = useStyles({
 			name: "CheckboxIndicator",
@@ -17914,6 +17700,7 @@ var CheckboxIndicator = withBoxProps((0, vue.defineComponent)({
 			varsResolver: varsResolver$24
 		});
 		return () => {
+			const iconStyles = getStyles("icon");
 			const Icon = props.icon || CheckboxIcon;
 			const checked = typeof props.checked === "boolean" || props.indeterminate ? props.checked || props.indeterminate : cardContext?.checked || false;
 			return (0, vue.h)(Box, {
@@ -17928,9 +17715,12 @@ var CheckboxIndicator = withBoxProps((0, vue.defineComponent)({
 					indeterminate: props.indeterminate,
 					disabled: props.disabled
 				}, props.mod]
-			}, () => (0, vue.h)(Icon, {
+			}, () => slots.icon ? slots.icon({
 				indeterminate: props.indeterminate,
-				...getStyles("icon")
+				...iconStyles
+			}) : (0, vue.h)(Icon, {
+				indeterminate: props.indeterminate,
+				...iconStyles
 			}));
 		};
 	}
@@ -17968,18 +17758,14 @@ function callHandler$6(handler, event) {
 var CheckboxBase = (0, vue.defineComponent)({
 	name: "Checkbox",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		id: {
 			type: String,
 			default: void 0
 		},
 		label: {
-			type: [
-				String,
-				Number,
-				Object,
-				Function
-			],
+			type: null,
 			default: void 0
 		},
 		color: {
@@ -18003,22 +17789,11 @@ var CheckboxBase = (0, vue.defineComponent)({
 			default: "right"
 		},
 		description: {
-			type: [
-				String,
-				Number,
-				Object,
-				Function
-			],
+			type: null,
 			default: void 0
 		},
 		error: {
-			type: [
-				String,
-				Number,
-				Object,
-				Function,
-				Boolean
-			],
+			type: null,
 			default: void 0
 		},
 		indeterminate: {
@@ -18082,7 +17857,7 @@ var CheckboxBase = (0, vue.defineComponent)({
 			default: false
 		}
 	},
-	setup(props, { attrs }) {
+	setup(props, { attrs, slots }) {
 		const uuid = (0, _mantine_vue_hooks.useId)(props.id);
 		const groupContext = useCheckboxGroupContext();
 		const getStyles = useStyles({
@@ -18099,11 +17874,19 @@ var CheckboxBase = (0, vue.defineComponent)({
 		});
 		return () => {
 			const id = uuid.value || props.id || "";
+			const label = resolveNode(props.label, slots.label);
+			const description = resolveNode(props.description, slots.description);
+			const error = resolveNode(props.error, slots.error);
 			const describedBy = [
-				props.description ? `${id}-description` : void 0,
-				props.error && typeof props.error !== "boolean" ? `${id}-error` : void 0,
+				description ? `${id}-description` : void 0,
+				error && typeof error !== "boolean" ? `${id}-error` : void 0,
 				attrs["aria-describedby"]
 			].filter(Boolean).join(" ") || void 0;
+			const iconStyles = getStyles("icon");
+			const iconSlotProps = {
+				indeterminate: props.indeterminate,
+				...iconStyles
+			};
 			const Icon = props.icon || CheckboxIcon;
 			const value = String(attrs.value ?? "");
 			const checked = groupContext ? groupContext.value.includes(value) : props.checked;
@@ -18120,9 +17903,9 @@ var CheckboxBase = (0, vue.defineComponent)({
 				id,
 				size,
 				labelPosition: props.labelPosition,
-				label: props.label,
-				description: props.description,
-				error: props.error,
+				label,
+				description,
+				error,
 				disabled,
 				classNames: props.classNames,
 				styles: props.styles,
@@ -18146,7 +17929,7 @@ var CheckboxBase = (0, vue.defineComponent)({
 				"aria-describedby": describedBy,
 				"data-indeterminate": props.indeterminate || void 0,
 				mod: {
-					error: Boolean(props.error),
+					error: Boolean(error),
 					withErrorStyles: props.withErrorStyles
 				},
 				variant: props.variant,
@@ -18158,9 +17941,9 @@ var CheckboxBase = (0, vue.defineComponent)({
 					callHandler$6(attrs.onChange, event);
 					groupContext?.onChange(event);
 				}
-			}), (0, vue.h)(Icon, {
+			}), slots.icon ? slots.icon(iconSlotProps) : (0, vue.h)(Icon, {
 				indeterminate: props.indeterminate,
-				...getStyles("icon")
+				...iconStyles
 			})]));
 		};
 	}
@@ -18752,6 +18535,7 @@ Object.assign(PillsInputField, { classes: PillsInput_module_default });
 var PillsInputBase = (0, vue.defineComponent)({
 	name: "PillsInput",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		size: {
 			type: [String, Number],
@@ -18762,13 +18546,7 @@ var PillsInputBase = (0, vue.defineComponent)({
 			default: false
 		},
 		error: {
-			type: [
-				String,
-				Number,
-				Object,
-				Function,
-				Boolean
-			],
+			type: null,
 			default: void 0
 		},
 		variant: {
@@ -18784,21 +18562,11 @@ var PillsInputBase = (0, vue.defineComponent)({
 			default: void 0
 		},
 		label: {
-			type: [
-				String,
-				Number,
-				Object,
-				Function
-			],
-			default: void 0
-		},
-		description: {
-			type: [
-				String,
-				Number,
-				Object,
-				Function
-			],
+			type: null,
+			default: void 0
+		},
+		description: {
+			type: null,
 			default: void 0
 		},
 		required: {
@@ -18895,7 +18663,14 @@ var PillsInputBase = (0, vue.defineComponent)({
 					else handler?.(event);
 				}
 			}
-		}, () => slots.default?.());
+		}, {
+			default: () => slots.default?.(),
+			label: slots.label,
+			description: slots.description,
+			error: slots.error,
+			leftSection: slots.leftSection,
+			rightSection: slots.rightSection
+		});
 	}
 });
 var PillsInput = Object.assign(PillsInputBase, {
@@ -18911,6 +18686,7 @@ function useRadioGroupContext() {
 var RadioGroup = (0, vue.defineComponent)({
 	name: "RadioGroup",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		value: {
 			type: String,
@@ -18945,31 +18721,15 @@ var RadioGroup = (0, vue.defineComponent)({
 			default: false
 		},
 		label: {
-			type: [
-				String,
-				Number,
-				Object,
-				Function
-			],
+			type: null,
 			default: void 0
 		},
 		description: {
-			type: [
-				String,
-				Number,
-				Object,
-				Function
-			],
+			type: null,
 			default: void 0
 		},
 		error: {
-			type: [
-				String,
-				Number,
-				Object,
-				Function,
-				Boolean
-			],
+			type: null,
 			default: void 0
 		},
 		classNames: {
@@ -19020,9 +18780,9 @@ var RadioGroup = (0, vue.defineComponent)({
 			size: props.size,
 			...props.wrapperProps,
 			...attrs,
-			label: props.label,
-			description: props.description,
-			error: props.error,
+			label: resolveNode(props.label, slots.label),
+			description: resolveNode(props.description, slots.description),
+			error: resolveNode(props.error, slots.error),
 			classNames: props.classNames,
 			styles: props.styles,
 			vars: props.vars,
@@ -19178,6 +18938,7 @@ var varsResolver$18 = createVarsResolver((theme, { radius, color, size, iconColo
 var RadioIndicator = withBoxProps((0, vue.defineComponent)({
 	name: "RadioIndicator",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		color: {
 			type: String,
@@ -19236,7 +18997,7 @@ var RadioIndicator = withBoxProps((0, vue.defineComponent)({
 			default: false
 		}
 	},
-	setup(props, { attrs }) {
+	setup(props, { attrs, slots }) {
 		const cardContext = useRadioCardContext();
 		const getStyles = useStyles({
 			name: "RadioIndicator",
@@ -19251,6 +19012,7 @@ var RadioIndicator = withBoxProps((0, vue.defineComponent)({
 			varsResolver: varsResolver$18
 		});
 		return () => {
+			const iconStyles = getStyles("icon");
 			const Icon = props.icon || RadioIcon;
 			const checked = typeof props.checked === "boolean" ? props.checked : cardContext?.checked || false;
 			return (0, vue.h)(Box, {
@@ -19264,7 +19026,7 @@ var RadioIndicator = withBoxProps((0, vue.defineComponent)({
 					checked,
 					disabled: props.disabled
 				}, props.mod]
-			}, () => (0, vue.h)(Icon, getStyles("icon")));
+			}, () => slots.icon ? slots.icon(iconStyles) : (0, vue.h)(Icon, iconStyles));
 		};
 	}
 }));
@@ -19302,18 +19064,14 @@ function callHandler$2(handler, event) {
 var RadioBase = (0, vue.defineComponent)({
 	name: "Radio",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		id: {
 			type: String,
 			default: void 0
 		},
 		label: {
-			type: [
-				String,
-				Number,
-				Object,
-				Function
-			],
+			type: null,
 			default: void 0
 		},
 		color: {
@@ -19337,22 +19095,11 @@ var RadioBase = (0, vue.defineComponent)({
 			default: "right"
 		},
 		description: {
-			type: [
-				String,
-				Number,
-				Object,
-				Function
-			],
+			type: null,
 			default: void 0
 		},
 		error: {
-			type: [
-				String,
-				Number,
-				Object,
-				Function,
-				Boolean
-			],
+			type: null,
 			default: void 0
 		},
 		radius: {
@@ -19408,7 +19155,7 @@ var RadioBase = (0, vue.defineComponent)({
 			default: false
 		}
 	},
-	setup(props, { attrs }) {
+	setup(props, { attrs, slots }) {
 		const uuid = (0, _mantine_vue_hooks.useId)(props.id);
 		const groupContext = useRadioGroupContext();
 		const getStyles = useStyles({
@@ -19425,11 +19172,15 @@ var RadioBase = (0, vue.defineComponent)({
 		});
 		return () => {
 			const id = uuid.value || props.id || "";
+			const label = resolveNode(props.label, slots.label);
+			const description = resolveNode(props.description, slots.description);
+			const error = resolveNode(props.error, slots.error);
 			const describedBy = [
-				props.description ? `${id}-description` : void 0,
-				props.error && typeof props.error !== "boolean" ? `${id}-error` : void 0,
+				description ? `${id}-description` : void 0,
+				error && typeof error !== "boolean" ? `${id}-error` : void 0,
 				attrs["aria-describedby"]
 			].filter(Boolean).join(" ") || void 0;
+			const iconStyles = getStyles("icon");
 			const Icon = props.icon || RadioIcon;
 			const value = String(attrs.value ?? "");
 			const checked = groupContext ? groupContext.value === value : props.checked;
@@ -19447,9 +19198,9 @@ var RadioBase = (0, vue.defineComponent)({
 				id,
 				size,
 				labelPosition: props.labelPosition,
-				label: props.label,
-				description: props.description,
-				error: props.error,
+				label,
+				description,
+				error,
 				disabled,
 				classNames: props.classNames,
 				styles: props.styles,
@@ -19472,7 +19223,7 @@ var RadioBase = (0, vue.defineComponent)({
 				type: "radio",
 				"aria-describedby": describedBy,
 				mod: {
-					error: Boolean(props.error),
+					error: Boolean(error),
 					withErrorStyles: props.withErrorStyles
 				},
 				variant: props.variant,
@@ -19480,7 +19231,7 @@ var RadioBase = (0, vue.defineComponent)({
 					callHandler$2(attrs.onChange, event);
 					groupContext?.onChange(event);
 				}
-			}), (0, vue.h)(Icon, getStyles("icon"))]));
+			}), slots.icon ? slots.icon(iconStyles) : (0, vue.h)(Icon, iconStyles)]));
 		};
 	}
 });
@@ -19500,6 +19251,7 @@ function useSwitchGroupContext() {
 var SwitchGroup = (0, vue.defineComponent)({
 	name: "SwitchGroup",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		value: {
 			type: Array,
@@ -19546,31 +19298,15 @@ var SwitchGroup = (0, vue.defineComponent)({
 			default: false
 		},
 		label: {
-			type: [
-				String,
-				Number,
-				Object,
-				Function
-			],
+			type: null,
 			default: void 0
 		},
 		description: {
-			type: [
-				String,
-				Number,
-				Object,
-				Function
-			],
+			type: null,
 			default: void 0
 		},
 		error: {
-			type: [
-				String,
-				Number,
-				Object,
-				Function,
-				Boolean
-			],
+			type: null,
 			default: void 0
 		},
 		classNames: {
@@ -19625,9 +19361,9 @@ var SwitchGroup = (0, vue.defineComponent)({
 			size: props.size,
 			...props.wrapperProps,
 			...attrs,
-			label: props.label,
-			description: props.description,
-			error: props.error,
+			label: resolveNode(props.label, slots.label),
+			description: resolveNode(props.description, slots.description),
+			error: resolveNode(props.error, slots.error),
 			classNames: props.classNames,
 			styles: props.styles,
 			vars: props.vars,
@@ -19665,9 +19401,6 @@ var varsResolver$16 = createVarsResolver((theme, { radius, color, size }) => ({
 	"--switch-track-label-padding": getSize(size, "switch-track-label-padding"),
 	"--switch-color": color ? getThemeColor(color, theme) : void 0
 } }));
-function renderContent(content) {
-	return typeof content === "function" ? content() : content;
-}
 function callHandler$1(handler, event) {
 	if (Array.isArray(handler)) handler.forEach((item) => item?.(event));
 	else handler?.(event);
@@ -19675,36 +19408,22 @@ function callHandler$1(handler, event) {
 var SwitchBase = (0, vue.defineComponent)({
 	name: "Switch",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		id: {
 			type: String,
 			default: void 0
 		},
 		label: {
-			type: [
-				String,
-				Number,
-				Object,
-				Function
-			],
+			type: null,
 			default: void 0
 		},
 		offLabel: {
-			type: [
-				String,
-				Number,
-				Object,
-				Function
-			],
+			type: null,
 			default: void 0
 		},
 		onLabel: {
-			type: [
-				String,
-				Number,
-				Object,
-				Function
-			],
+			type: null,
 			default: void 0
 		},
 		color: {
@@ -19724,12 +19443,7 @@ var SwitchBase = (0, vue.defineComponent)({
 			default: void 0
 		},
 		thumbIcon: {
-			type: [
-				String,
-				Number,
-				Object,
-				Function
-			],
+			type: null,
 			default: void 0
 		},
 		labelPosition: {
@@ -19737,22 +19451,11 @@ var SwitchBase = (0, vue.defineComponent)({
 			default: "right"
 		},
 		description: {
-			type: [
-				String,
-				Number,
-				Object,
-				Function
-			],
+			type: null,
 			default: void 0
 		},
 		error: {
-			type: [
-				String,
-				Number,
-				Object,
-				Function,
-				Boolean
-			],
+			type: null,
 			default: void 0
 		},
 		rootRef: {
@@ -19804,7 +19507,7 @@ var SwitchBase = (0, vue.defineComponent)({
 			default: false
 		}
 	},
-	setup(props, { attrs }) {
+	setup(props, { attrs, slots }) {
 		const uuid = (0, _mantine_vue_hooks.useId)(props.id);
 		const groupContext = useSwitchGroupContext();
 		const internalChecked = (0, vue.ref)(false);
@@ -19830,9 +19533,15 @@ var SwitchBase = (0, vue.defineComponent)({
 		});
 		return () => {
 			const id = uuid.value || props.id || "";
+			const label = resolveNode(props.label, slots.label);
+			const description = resolveNode(props.description, slots.description);
+			const error = resolveNode(props.error, slots.error);
+			const thumbIcon = resolveNode(props.thumbIcon, slots.thumbIcon);
+			const onLabel = resolveNode(props.onLabel, slots.onLabel);
+			const offLabel = resolveNode(props.offLabel, slots.offLabel);
 			const describedBy = [
-				props.description ? `${id}-description` : void 0,
-				props.error && typeof props.error !== "boolean" ? `${id}-error` : void 0,
+				description ? `${id}-description` : void 0,
+				error && typeof error !== "boolean" ? `${id}-error` : void 0,
 				attrs["aria-describedby"]
 			].filter(Boolean).join(" ") || void 0;
 			const value = String(attrs.value ?? "");
@@ -19850,9 +19559,9 @@ var SwitchBase = (0, vue.defineComponent)({
 				id,
 				size,
 				labelPosition: props.labelPosition,
-				label: props.label,
-				description: props.description,
-				error: props.error,
+				label,
+				description,
+				error,
 				disabled,
 				bodyElement: "label",
 				labelElement: "span",
@@ -19882,16 +19591,16 @@ var SwitchBase = (0, vue.defineComponent)({
 				component: "span",
 				"aria-hidden": "true",
 				mod: {
-					error: Boolean(props.error),
+					error: Boolean(error),
 					labelPosition: props.labelPosition,
-					withoutLabels: !props.onLabel && !props.offLabel
+					withoutLabels: !onLabel && !offLabel
 				},
 				...getStyles("track")
 			}, () => [(0, vue.h)(Box, {
 				component: "span",
-				mod: { withThumbIndicator: props.withThumbIndicator && !props.thumbIcon },
+				mod: { withThumbIndicator: props.withThumbIndicator && !thumbIcon },
 				...getStyles("thumb")
-			}, () => renderContent(props.thumbIcon)), (0, vue.h)("span", getStyles("trackLabel"), renderContent(currentChecked ? props.onLabel : props.offLabel))])]);
+			}, () => thumbIcon), (0, vue.h)("span", getStyles("trackLabel"), currentChecked ? onLabel : offLabel)])]);
 		};
 	}
 });
@@ -20144,6 +19853,11 @@ function renderFragment(fragment, step = 0) {
 	if (typeof fragment === "function") return fragment({ step });
 	return (0, vue.isVNode)(fragment) ? fragment : fragment;
 }
+/** Resolve a Stepper fragment, honouring prop-over-slot precedence and passing `{ step }`. */
+function resolveFragment(prop, slot, step) {
+	if (prop !== void 0) return renderFragment(prop, step);
+	return slot ? slot({ step }) : void 0;
+}
 var defaultProps$6 = {
 	withIcon: true,
 	allowStepClick: true,
@@ -20152,6 +19866,7 @@ var defaultProps$6 = {
 var StepperStep = withBoxProps((0, vue.defineComponent)({
 	name: "StepperStep",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		step: {
 			type: Number,
@@ -20267,7 +19982,7 @@ var StepperStep = withBoxProps((0, vue.defineComponent)({
 			default: void 0
 		}
 	},
-	setup(rawProps, { attrs }) {
+	setup(rawProps, { attrs, slots }) {
 		const props = useProps("StepperStep", defaultProps$6, rawProps);
 		const ctx = useStepperContext();
 		const theme = useMantineTheme();
@@ -20276,17 +19991,24 @@ var StepperStep = withBoxProps((0, vue.defineComponent)({
 				"data-progress": props.state === "stepProgress" || void 0,
 				"data-completed": props.state === "stepCompleted" || void 0
 			};
+			const step = props.step ?? 0;
 			const iconPosition = props.iconPosition ?? ctx.iconPosition;
 			const stylesApi = {
 				classNames: props.classNames,
 				styles: props.styles,
 				props
 			};
-			const currentIcon = props.state === "stepProgress" ? props.progressIcon ?? props.icon : props.icon;
-			const completed = props.completedIcon ? renderFragment(props.completedIcon, props.step) : (0, vue.h)(CheckIcon, {
+			const iconNode = resolveFragment(props.icon, slots.icon, step);
+			const progressIconNode = props.progressIcon !== void 0 || slots.progressIcon ? resolveFragment(props.progressIcon, slots.progressIcon, step) : void 0;
+			const currentIcon = props.state === "stepProgress" ? progressIconNode ?? iconNode : iconNode;
+			const completed = props.completedIcon !== void 0 || !!slots.completedIcon ? resolveFragment(props.completedIcon, slots.completedIcon, step) : (0, vue.h)(CheckIcon, {
 				width: "60%",
 				height: "60%"
 			});
+			const labelPresent = props.label !== void 0 || !!slots.label;
+			const descriptionPresent = props.description !== void 0 || !!slots.description;
+			const labelNode = resolveFragment(props.label, slots.label, step);
+			const descriptionNode = resolveFragment(props.description, slots.description, step);
 			const stepStyles = ctx.getStyles("step", {
 				className: [props.className ?? attrs.class, Stepper_module_default[`step--${ctx.orientation}`]],
 				style: props.style ?? attrs.style,
@@ -20325,14 +20047,14 @@ var StepperStep = withBoxProps((0, vue.defineComponent)({
 				size: "calc(var(--stepper-icon-size) / 2)",
 				color: props.color,
 				...ctx.getStyles("stepLoader", stylesApi)
-			}) : renderFragment(currentIcon, props.step)) : null]), props.orientation === "vertical" ? (0, vue.h)("span", {
+			}) : currentIcon) : null]), props.orientation === "vertical" ? (0, vue.h)("span", {
 				...ctx.getStyles("verticalSeparator", stylesApi),
 				"data-active": props.state === "stepCompleted" || void 0
-			}) : null]) : null, props.label !== void 0 || props.description !== void 0 ? (0, vue.h)("span", {
+			}) : null]) : null, labelPresent || descriptionPresent ? (0, vue.h)("span", {
 				...ctx.getStyles("stepBody", stylesApi),
 				"data-orientation": ctx.orientation,
 				"data-icon-position": iconPosition
-			}, [props.label !== void 0 ? (0, vue.h)("span", ctx.getStyles("stepLabel", stylesApi), renderFragment(props.label, props.step)) : null, props.description !== void 0 ? (0, vue.h)("span", ctx.getStyles("stepDescription", stylesApi), renderFragment(props.description, props.step)) : null]) : null]);
+			}, [labelPresent ? (0, vue.h)("span", ctx.getStyles("stepLabel", stylesApi), labelNode) : null, descriptionPresent ? (0, vue.h)("span", ctx.getStyles("stepDescription", stylesApi), descriptionNode) : null]) : null]);
 		};
 	}
 }));
@@ -20368,6 +20090,7 @@ function flattenChildren$1(children) {
 var StepperBase = (0, vue.defineComponent)({
 	name: "Stepper",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		active: {
 			type: Number,
@@ -20502,13 +20225,13 @@ var StepperBase = (0, vue.defineComponent)({
 				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 ?? index + 1,
+					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,
-					progressIcon: itemProps.progressIcon ?? props.progressIcon,
+					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),
 					color: itemProps.color ?? props.color,
 					iconSize: props.iconSize,
 					iconPosition: itemProps.iconPosition ?? props.iconPosition,
@@ -21480,6 +21203,7 @@ var varsResolver$11 = createVarsResolver((theme, { size, color, thumbSize, radiu
 var Slider = withBoxProps((0, vue.defineComponent)({
 	name: "Slider",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		color: {
 			type: String,
@@ -21628,7 +21352,7 @@ var Slider = withBoxProps((0, vue.defineComponent)({
 			default: false
 		}
 	},
-	setup(rawProps, { attrs }) {
+	setup(rawProps, { attrs, slots }) {
 		const props = useProps("Slider", defaultProps$1, rawProps);
 		const direction = useDirection();
 		const hovered = (0, vue.ref)(false);
@@ -21690,7 +21414,7 @@ var Slider = withBoxProps((0, vue.defineComponent)({
 				max: domain.value[1]
 			});
 			const scaled = props.scale(current.value);
-			const label = typeof props.label === "function" ? props.label(scaled) : props.label;
+			const label = slots.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],
@@ -21734,7 +21458,7 @@ var Slider = withBoxProps((0, vue.defineComponent)({
 				disabled: props.disabled,
 				orientation: props.orientation,
 				onKeydown: keydown
-			}, () => props.thumbChildren) }), props.name ? (0, vue.h)("input", {
+			}, () => resolveNode(props.thumbChildren, slots.thumbChildren)) }), props.name ? (0, vue.h)("input", {
 				type: "hidden",
 				name: props.name,
 				value: current.value,
@@ -21773,6 +21497,7 @@ var varsResolver$10 = createVarsResolver((theme, { size, color, thumbSize, radiu
 var RangeSlider = (0, vue.defineComponent)({
 	name: "RangeSlider",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		value: {
 			type: Array,
@@ -21920,7 +21645,7 @@ var RangeSlider = (0, vue.defineComponent)({
 			default: false
 		}
 	},
-	setup(rawProps, { attrs }) {
+	setup(rawProps, { attrs, slots }) {
 		const props = useProps("RangeSlider", defaults$5, rawProps);
 		const direction = useDirection();
 		const activeThumb = (0, vue.ref)(0);
@@ -22022,7 +21747,10 @@ var RangeSlider = (0, vue.defineComponent)({
 				value: props.scale(current.value[index]),
 				position: positions[index],
 				dragging: move.active.value && activeThumb.value === index,
-				label: typeof props.label === "function" ? props.label(props.scale(current.value[index])) : props.label,
+				label: slots.label ? slots.label({
+					value: props.scale(current.value[index]),
+					index
+				}) : typeof props.label === "function" ? props.label(props.scale(current.value[index])) : props.label,
 				labelAlwaysOn: props.labelAlwaysOn,
 				thumbLabel: props.thumbLabel?.[index],
 				thumbValueText: props.thumbValueText,
@@ -22033,7 +21761,7 @@ var RangeSlider = (0, vue.defineComponent)({
 				onMousedown: () => activeThumb.value = index,
 				onFocus: () => focused.value = index,
 				onKeydown: (event) => keydown(index, event)
-			}, () => props.thumbChildren?.[index])) }), props.name ? [(0, vue.h)("input", {
+			}, () => slots.thumbChildren ? slots.thumbChildren({ index }) : props.thumbChildren?.[index])) }), props.name ? [(0, vue.h)("input", {
 				type: "hidden",
 				name: `${props.name}_from`,
 				value: current.value[0],
@@ -23655,7 +23383,7 @@ var MaskInput = (0, vue.defineComponent)({
 			default: void 0
 		}
 	},
-	setup(props, { attrs }) {
+	setup(props, { attrs, slots }) {
 		const input = (0, vue.ref)(null);
 		const processed = (0, vue.ref)("");
 		const rawValue = (0, vue.ref)("");
@@ -23858,7 +23586,7 @@ var MaskInput = (0, vue.defineComponent)({
 				onBlur: handleBlur,
 				onKeydown: handleKeydown,
 				onPaste: handlePaste
-			});
+			}, slots);
 		};
 	}
 });
@@ -26108,6 +25836,7 @@ var ModalContent = compound$1("ModalContent", ModalBaseContent, "content", (ctx)
 var ModalBaseComponent = (0, vue.defineComponent)({
 	name: "Modal",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		opened: {
 			type: Boolean,
@@ -26118,11 +25847,7 @@ var ModalBaseComponent = (0, vue.defineComponent)({
 			required: true
 		},
 		title: {
-			type: [
-				String,
-				Object,
-				Function
-			],
+			type: null,
 			default: void 0
 		},
 		withOverlay: {
@@ -26138,13 +25863,13 @@ var ModalBaseComponent = (0, vue.defineComponent)({
 	},
 	setup(props, { attrs, slots }) {
 		return () => {
-			const title = typeof props.title === "function" ? props.title() : props.title;
-			const header = title != null || props.withCloseButton;
+			const title = resolveNode(props.title, slots.title);
+			const header = hasNode(title) || props.withCloseButton;
 			return (0, vue.h)(ModalRoot, {
 				...attrs,
 				opened: props.opened,
 				onClose: props.onClose
-			}, { default: () => [props.withOverlay && (0, vue.h)(ModalOverlay, props.overlayProps), (0, vue.h)(ModalContent, null, { default: () => [header && (0, vue.h)(ModalHeader, null, { default: () => [title != null && (0, vue.h)(ModalTitle, null, { default: () => title }), props.withCloseButton && (0, vue.h)(ModalCloseButton, props.closeButtonProps)] }), (0, vue.h)(ModalBody, null, slots)] })] });
+			}, { 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?.() })] })] });
 		};
 	}
 });
@@ -26375,6 +26100,7 @@ var DrawerContent = compound("DrawerContent", ModalBaseContent, "content", (ctx)
 var DrawerBaseComponent = (0, vue.defineComponent)({
 	name: "Drawer",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		opened: {
 			type: Boolean,
@@ -26385,11 +26111,7 @@ var DrawerBaseComponent = (0, vue.defineComponent)({
 			required: true
 		},
 		title: {
-			type: [
-				String,
-				Object,
-				Function
-			],
+			type: null,
 			default: void 0
 		},
 		withOverlay: {
@@ -26439,8 +26161,8 @@ var DrawerBaseComponent = (0, vue.defineComponent)({
 			return false;
 		});
 		return () => {
-			const title = typeof props.title === "function" ? props.title() : props.title;
-			const header = title != null || props.withCloseButton;
+			const title = resolveNode(props.title, slots.title);
+			const header = hasNode(title) || props.withCloseButton;
 			return (0, vue.h)(DrawerRoot, {
 				...attrs,
 				opened: props.opened,
@@ -26451,7 +26173,7 @@ var DrawerBaseComponent = (0, vue.defineComponent)({
 				visible: overlayVisible.value,
 				transitionProps: stackCtx && props.stackId ? { duration: 0 } : void 0,
 				...props.overlayProps
-			}), (0, vue.h)(DrawerContent, { __hidden: contentHidden.value }, { default: () => [header && (0, vue.h)(DrawerHeader, null, { default: () => [title != null && (0, vue.h)(DrawerTitle, null, { default: () => title }), props.withCloseButton && (0, vue.h)(DrawerCloseButton, props.closeButtonProps)] }), (0, vue.h)(DrawerBody, null, slots)] })] });
+			}), (0, vue.h)(DrawerContent, { __hidden: contentHidden.value }, { default: () => [header && (0, vue.h)(DrawerHeader, null, { default: () => [hasNode(title) && (0, vue.h)(DrawerTitle, null, { default: () => title }), props.withCloseButton && (0, vue.h)(DrawerCloseButton, props.closeButtonProps)] }), (0, vue.h)(DrawerBody, null, { default: () => slots.default?.() })] })] });
 		};
 	}
 });
@@ -28155,6 +27877,7 @@ var MenuDropdown = (0, vue.defineComponent)({
 var MenuItem = (0, vue.defineComponent)({
 	name: "MenuItem",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		component: {
 			type: [
@@ -28188,6 +27911,8 @@ var MenuItem = (0, vue.defineComponent)({
 		const ctx = useMenuContext();
 		return () => {
 			const indicator = ctx.alignItemsLabels === "all" || props.reserveIndicator;
+			const leftSection = resolveNode(props.leftSection, slots.leftSection);
+			const rightSection = resolveNode(props.rightSection, slots.rightSection);
 			return (0, vue.h)(UnstyledButton, {
 				...attrs,
 				component: props.component,
@@ -28210,15 +27935,15 @@ var MenuItem = (0, vue.defineComponent)({
 				}
 			}, () => [
 				indicator && (0, vue.h)("span", ctx.getStyles("itemIndicator"), props.indicator),
-				props.leftSection != null && (0, vue.h)("span", {
+				hasNode(leftSection) && (0, vue.h)("span", {
 					...ctx.getStyles("itemSection"),
 					"data-position": "left"
-				}, props.leftSection),
+				}, leftSection),
 				(0, vue.h)("span", ctx.getStyles("itemLabel"), slots),
-				props.rightSection != null && (0, vue.h)("span", {
+				hasNode(rightSection) && (0, vue.h)("span", {
 					...ctx.getStyles("itemSection"),
 					"data-position": "right"
-				}, props.rightSection)
+				}, rightSection)
 			]);
 		};
 	}
@@ -28394,6 +28119,7 @@ var MenuRadioGroup = group$1(RadioGroupKey, false);
 var MenuCheckboxItem = (0, vue.defineComponent)({
 	name: "MenuCheckboxItem",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		value: String,
 		checked: {
@@ -28423,21 +28149,24 @@ var MenuCheckboxItem = (0, vue.defineComponent)({
 				else if (props.checked === void 0) local.value = next;
 				props.onChange?.(next);
 			};
+			const checkIcon = props.checkIcon !== void 0 ? typeof props.checkIcon === "function" ? props.checkIcon() : props.checkIcon : slots.checkIcon ? slots.checkIcon({ checked: !!checked }) : menu.checkIcon ?? "✓";
+			const { checkIcon: _checkIconSlot, ...forwardedSlots } = slots;
 			return (0, vue.h)(MenuItem, {
 				...attrs,
 				role: "menuitemcheckbox",
 				"aria-checked": checked,
 				reserveIndicator: menu.alignItemsLabels !== "none" || checked,
-				indicator: checked ? props.checkIcon ?? menu.checkIcon ?? "✓" : void 0,
+				indicator: checked ? checkIcon : void 0,
 				closeMenuOnClick: props.closeMenuOnClick,
 				onClick: toggle
-			}, slots);
+			}, forwardedSlots);
 		};
 	}
 });
 var MenuRadioItem = (0, vue.defineComponent)({
 	name: "MenuRadioItem",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		value: {
 			type: String,
@@ -28448,6 +28177,10 @@ var MenuRadioItem = (0, vue.defineComponent)({
 			default: void 0
 		},
 		onChange: Function,
+		checkIcon: {
+			type: null,
+			default: void 0
+		},
 		closeMenuOnClick: {
 			type: Boolean,
 			default: false
@@ -28462,15 +28195,17 @@ var MenuRadioItem = (0, vue.defineComponent)({
 				group?.setValue(props.value);
 				props.onChange?.(props.value);
 			};
+			const checkIcon = props.checkIcon !== void 0 ? typeof props.checkIcon === "function" ? props.checkIcon() : props.checkIcon : slots.checkIcon ? slots.checkIcon({ checked: !!checked }) : menu.checkIcon ?? "✓";
+			const { checkIcon: _checkIconSlot, ...forwardedSlots } = slots;
 			return (0, vue.h)(MenuItem, {
 				...attrs,
 				role: "menuitemradio",
 				"aria-checked": checked,
 				reserveIndicator: menu.alignItemsLabels !== "none" || checked,
-				indicator: checked ? menu.checkIcon ?? "✓" : void 0,
+				indicator: checked ? checkIcon : void 0,
 				closeMenuOnClick: props.closeMenuOnClick,
 				onClick: select
-			}, slots);
+			}, forwardedSlots);
 		};
 	}
 });
@@ -29411,6 +29146,7 @@ function renderItem(item, props) {
 var OptionsDropdown = (0, vue.defineComponent)({
 	name: "OptionsDropdown",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		data: {
 			type: Array,
@@ -29456,17 +29192,22 @@ var OptionsDropdown = (0, vue.defineComponent)({
 		renderOption: Function,
 		scrollAreaProps: Object
 	},
-	setup(props) {
+	setup(props, { slots }) {
 		const ctx = useComboboxContext();
 		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 data = typeof props.search === "string" ? (props.filter || defaultOptionsFilter)({
 				options: props.data,
 				search: props.filterOptions ? props.search : "",
 				limit: props.limit ?? Infinity
 			}) : props.data;
 			const empty = isEmptyComboboxData(data);
-			const options = data.map((item) => renderItem(item, props));
+			const options = data.map((item) => renderItem(item, {
+				...props,
+				renderOption
+			}));
 			const content = props.withScrollArea ? (0, vue.h)(ScrollAreaAutosize, {
 				mah: (props.floatingHeight ?? ctx.floatingHeight) === "viewport" ? "var(--combobox-floating-options-max-height)" : props.maxDropdownHeight ?? 220,
 				type: "scroll",
@@ -29480,7 +29221,7 @@ var OptionsDropdown = (0, vue.defineComponent)({
 			}, () => (0, vue.h)(Combobox.Options, {
 				labelledBy: props.labelId,
 				"aria-label": props.ariaLabel
-			}, () => [content, empty && props.nothingFoundMessage != null && (0, vue.h)(Combobox.Empty, null, () => props.nothingFoundMessage)]));
+			}, () => [content, empty && nothingFound != null && (0, vue.h)(Combobox.Empty, null, () => nothingFound)]));
 		};
 	}
 });
@@ -29548,6 +29289,7 @@ function usePillsReorder(input) {
 var Select = (0, vue.defineComponent)({
 	name: "Select",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		modelValue: {
 			type: null,
@@ -29628,7 +29370,7 @@ var Select = (0, vue.defineComponent)({
 		}
 	},
 	emits: ["update:modelValue", "update:searchValue"],
-	setup(props, { attrs, emit }) {
+	setup(props, { attrs, emit, slots }) {
 		const parsed = (0, vue.computed)(() => getParsedComboboxData(props.data));
 		const lockup = (0, vue.computed)(() => getOptionsLockup(parsed.value));
 		const retained = {};
@@ -29749,13 +29491,13 @@ var Select = (0, vue.defineComponent)({
 					else combobox.toggleDropdown();
 					attrs.onClick?.(event);
 				}
-			})), (0, vue.h)(OptionsDropdown, {
+			}, slots)), (0, vue.h)(OptionsDropdown, {
 				data: parsed.value,
 				hidden: readOnly || disabled,
 				filter: props.filter,
 				search: search(),
 				limit: props.limit,
-				hiddenWhenEmpty: !props.nothingFoundMessage,
+				hiddenWhenEmpty: !props.nothingFoundMessage && !slots.nothingFound,
 				withScrollArea: props.withScrollArea,
 				maxDropdownHeight: props.maxDropdownHeight,
 				filterOptions: !!props.searchable && selected.value?.label !== search(),
@@ -29767,6 +29509,9 @@ var Select = (0, vue.defineComponent)({
 				labelId: attrs.label ? `${id.value}-label` : void 0,
 				renderOption: props.renderOption,
 				scrollAreaProps: props.scrollAreaProps
+			}, {
+				renderOption: slots.renderOption,
+				nothingFound: slots.nothingFound
 			})]), (0, vue.h)(Combobox.HiddenInput, {
 				value: current(),
 				name: attrs.name,
@@ -29786,6 +29531,7 @@ Object.assign(Select, { classes: {
 var Autocomplete = (0, vue.defineComponent)({
 	name: "Autocomplete",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		modelValue: {
 			type: String,
@@ -29833,7 +29579,7 @@ var Autocomplete = (0, vue.defineComponent)({
 		}
 	},
 	emits: { "update:modelValue": (value) => typeof value === "string" },
-	setup(props, { attrs, emit }) {
+	setup(props, { attrs, emit, slots }) {
 		const internal = (0, vue.ref)(props.defaultValue);
 		const current = () => props.modelValue ?? props.value ?? internal.value;
 		const controlled = () => props.modelValue !== void 0 || props.value !== void 0;
@@ -29920,18 +29666,21 @@ var Autocomplete = (0, vue.defineComponent)({
 					combobox.openDropdown();
 					attrs.onClick?.(event);
 				}
-			})), (0, vue.h)(OptionsDropdown, {
+			}, slots)), (0, vue.h)(OptionsDropdown, {
 				data: parsed.value,
 				hidden: readOnly || disabled,
 				filter: props.filter,
 				search: current(),
 				limit: props.limit,
-				hiddenWhenEmpty: true,
+				hiddenWhenEmpty: !slots.nothingFound,
 				withScrollArea: props.withScrollArea,
 				maxDropdownHeight: props.maxDropdownHeight,
 				labelId: attrs.label ? `${id.value}-label` : void 0,
 				renderOption: props.renderOption,
 				scrollAreaProps: props.scrollAreaProps
+			}, {
+				renderOption: slots.renderOption,
+				nothingFound: slots.nothingFound
 			})]);
 		};
 	}
@@ -29951,6 +29700,7 @@ function filterPicked(data, values) {
 var MultiSelect = (0, vue.defineComponent)({
 	name: "MultiSelect",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		modelValue: Array,
 		value: Array,
@@ -30024,7 +29774,7 @@ var MultiSelect = (0, vue.defineComponent)({
 		selectFirstOptionOnDropdownOpen: Boolean
 	},
 	emits: ["update:modelValue", "update:searchValue"],
-	setup(props, { attrs, emit }) {
+	setup(props, { attrs, emit, slots }) {
 		const parsed = (0, vue.computed)(() => getParsedComboboxData(props.data));
 		const lockup = (0, vue.computed)(() => getOptionsLockup(parsed.value));
 		const retained = {};
@@ -30111,56 +29861,63 @@ var MultiSelect = (0, vue.defineComponent)({
 				rightSection,
 				rightSectionPointerEvents: canClear ? "all" : "none",
 				onClick: () => props.searchable ? combobox.openDropdown() : combobox.toggleDropdown()
-			}, () => (0, vue.h)(Pill.Group, null, () => [...values.map((item, index) => {
-				const option = lockup.value[String(item)] ?? retained[String(item)] ?? {
-					value: item,
-					label: String(item)
-				};
-				const onRemove = () => remove(item);
-				return props.renderPill ? props.renderPill({
-					option,
-					value: item,
-					onRemove,
-					disabled
-				}) : (0, vue.h)(Pill, {
-					key: `${String(item)}-${index}`,
-					withRemoveButton: !readOnly && !option.disabled,
+			}, {
+				label: slots.label,
+				description: slots.description,
+				error: slots.error,
+				leftSection: slots.leftSection,
+				rightSection: slots.rightSection,
+				default: () => (0, vue.h)(Pill.Group, null, () => [...values.map((item, index) => {
+					const option = lockup.value[String(item)] ?? retained[String(item)] ?? {
+						value: item,
+						label: String(item)
+					};
+					const onRemove = () => remove(item);
+					return props.renderPill ? props.renderPill({
+						option,
+						value: item,
+						onRemove,
+						disabled
+					}) : (0, vue.h)(Pill, {
+						key: `${String(item)}-${index}`,
+						withRemoveButton: !readOnly && !option.disabled,
+						disabled,
+						onRemove
+					}, () => option.label);
+				}), (0, vue.h)(Combobox.EventsTarget, { withExpandedAttribute: true }, () => (0, vue.h)(PillsInput.Field, {
+					value: search(),
+					readonly: !props.searchable || readOnly,
 					disabled,
-					onRemove
-				}, () => option.label);
-			}), (0, vue.h)(Combobox.EventsTarget, { withExpandedAttribute: true }, () => (0, vue.h)(PillsInput.Field, {
-				value: search(),
-				readonly: !props.searchable || readOnly,
-				disabled,
-				placeholder: values.length === 0 ? attrs.placeholder : void 0,
-				onInput: (event) => {
-					setSearch(event.target.value);
-					combobox.openDropdown();
-				},
-				onFocus: (event) => {
-					if (props.openOnFocus && props.searchable) combobox.openDropdown();
-					attrs.onFocus?.(event);
-				},
-				onBlur: (event) => {
-					combobox.closeDropdown();
-					attrs.onBlur?.(event);
-				},
-				onKeydown: (event) => {
-					if (event.key === " " && !props.searchable) {
-						event.preventDefault();
-						combobox.toggleDropdown();
+					placeholder: values.length === 0 ? attrs.placeholder : void 0,
+					onInput: (event) => {
+						setSearch(event.target.value);
+						combobox.openDropdown();
+					},
+					onFocus: (event) => {
+						if (props.openOnFocus && props.searchable) combobox.openDropdown();
+						attrs.onFocus?.(event);
+					},
+					onBlur: (event) => {
+						combobox.closeDropdown();
+						attrs.onBlur?.(event);
+					},
+					onKeydown: (event) => {
+						if (event.key === " " && !props.searchable) {
+							event.preventDefault();
+							combobox.toggleDropdown();
+						}
+						if (event.key === "Backspace" && !search() && values.length && !readOnly) remove(values[values.length - 1]);
+						attrs.onKeydown?.(event);
 					}
-					if (event.key === "Backspace" && !search() && values.length && !readOnly) remove(values[values.length - 1]);
-					attrs.onKeydown?.(event);
-				}
-			}))]))), (0, vue.h)(OptionsDropdown, {
+				}))])
+			})), (0, vue.h)(OptionsDropdown, {
 				data: options,
 				hidden: disabled || readOnly,
 				search: search(),
 				filter: props.filter,
 				limit: props.limit,
 				filterOptions: props.searchable,
-				hiddenWhenEmpty: props.nothingFoundMessage == null,
+				hiddenWhenEmpty: props.nothingFoundMessage == null && !slots.nothingFound,
 				nothingFoundMessage: props.nothingFoundMessage,
 				value: values,
 				withCheckIcon: props.withCheckIcon,
@@ -30170,6 +29927,9 @@ var MultiSelect = (0, vue.defineComponent)({
 				maxDropdownHeight: props.maxDropdownHeight,
 				renderOption: props.renderOption,
 				scrollAreaProps: props.scrollAreaProps
+			}, {
+				renderOption: slots.renderOption,
+				nothingFound: slots.nothingFound
 			})]), (0, vue.h)(Combobox.HiddenInput, {
 				value: values,
 				valuesDivider: props.hiddenInputValuesDivider,
@@ -30202,6 +29962,7 @@ function getSplittedTags({ value, splitChars = [","], currentTags = [], allowDup
 var TagsInput = (0, vue.defineComponent)({
 	name: "TagsInput",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		modelValue: Array,
 		value: Array,
@@ -30271,7 +30032,7 @@ var TagsInput = (0, vue.defineComponent)({
 		selectFirstOptionOnDropdownOpen: Boolean
 	},
 	emits: ["update:modelValue", "update:searchValue"],
-	setup(props, { attrs, emit }) {
+	setup(props, { attrs, emit, slots }) {
 		const parsed = (0, vue.computed)(() => getParsedComboboxData(props.data));
 		const lockup = (0, vue.computed)(() => getOptionsLockup(parsed.value));
 		const internal = (0, vue.ref)([...props.defaultValue]);
@@ -30379,74 +30140,84 @@ var TagsInput = (0, vue.defineComponent)({
 				disabled,
 				rightSection,
 				rightSectionPointerEvents: canClear ? "all" : void 0
-			}, () => (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,
-					value: item,
-					onRemove,
-					disabled
-				}) : (0, vue.h)(Pill, {
-					key: `${item}-${index}`,
-					withRemoveButton: !readOnly,
+			}, {
+				label: slots.label,
+				description: slots.description,
+				error: slots.error,
+				leftSection: slots.leftSection,
+				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,
+						value: item,
+						onRemove,
+						disabled
+					}) : (0, vue.h)(Pill, {
+						key: `${item}-${index}`,
+						withRemoveButton: !readOnly,
+						disabled,
+						onRemove
+					}, () => item);
+				}), (0, vue.h)(PillsInput.Field, {
+					value: search(),
+					readonly: readOnly,
 					disabled,
-					onRemove
-				}, () => item);
-			}), (0, vue.h)(PillsInput.Field, {
-				value: search(),
-				readonly: readOnly,
-				disabled,
-				placeholder: current.length === 0 ? attrs.placeholder : void 0,
-				onInput: (event) => {
-					const input = event.target.value;
-					if (props.splitChars.some((char) => input.includes(char))) split(input);
-					else setSearch(input);
-					combobox.openDropdown();
-				},
-				onPaste: (event) => {
-					if (!event.clipboardData) return;
-					event.preventDefault();
-					split(`${search()}${event.clipboardData.getData("text/plain")}`);
-					attrs.onPaste?.(event);
-				},
-				onFocus: (event) => {
-					if (props.openOnFocus) combobox.openDropdown();
-					attrs.onFocus?.(event);
-				},
-				onBlur: (event) => {
-					if (props.acceptValueOnBlur) submit(search());
-					combobox.closeDropdown();
-					attrs.onBlur?.(event);
-				},
-				onClick: () => combobox.openDropdown(),
-				onKeydown: (event) => {
-					if (event.isComposing) return;
-					if (event.key === "Enter" && search().trim()) {
-						event.preventDefault();
-						submit(search());
-					} else if (props.splitChars.includes(event.key) && search().trim()) {
+					placeholder: current.length === 0 ? attrs.placeholder : void 0,
+					onInput: (event) => {
+						const input = event.target.value;
+						if (props.splitChars.some((char) => input.includes(char))) split(input);
+						else setSearch(input);
+						combobox.openDropdown();
+					},
+					onPaste: (event) => {
+						if (!event.clipboardData) return;
 						event.preventDefault();
-						split(search());
-					} else if (event.key === "Backspace" && !search() && current.length && !readOnly) removeAt(current.length - 1);
-					attrs.onKeydown?.(event);
-				}
-			})]))), (0, vue.h)(OptionsDropdown, {
+						split(`${search()}${event.clipboardData.getData("text/plain")}`);
+						attrs.onPaste?.(event);
+					},
+					onFocus: (event) => {
+						if (props.openOnFocus) combobox.openDropdown();
+						attrs.onFocus?.(event);
+					},
+					onBlur: (event) => {
+						if (props.acceptValueOnBlur) submit(search());
+						combobox.closeDropdown();
+						attrs.onBlur?.(event);
+					},
+					onClick: () => combobox.openDropdown(),
+					onKeydown: (event) => {
+						if (event.isComposing) return;
+						if (event.key === "Enter" && search().trim()) {
+							event.preventDefault();
+							submit(search());
+						} else if (props.splitChars.includes(event.key) && search().trim()) {
+							event.preventDefault();
+							split(search());
+						} else if (event.key === "Backspace" && !search() && current.length && !readOnly) removeAt(current.length - 1);
+						attrs.onKeydown?.(event);
+					}
+				})])
+			})), (0, vue.h)(OptionsDropdown, {
 				data: parsed.value,
 				hidden: disabled || readOnly,
 				search: search(),
 				filter: props.filter,
 				limit: props.limit,
-				hiddenWhenEmpty: props.nothingFoundMessage == null,
+				hiddenWhenEmpty: props.nothingFoundMessage == null && !slots.nothingFound,
 				nothingFoundMessage: props.nothingFoundMessage,
 				withScrollArea: props.withScrollArea,
 				maxDropdownHeight: props.maxDropdownHeight,
 				renderOption: props.renderOption,
 				scrollAreaProps: props.scrollAreaProps
+			}, {
+				renderOption: slots.renderOption,
+				nothingFound: slots.nothingFound
 			})]), (0, vue.h)(Combobox.HiddenInput, {
 				value: current,
 				valuesDivider: props.hiddenInputValuesDivider,
@@ -30552,7 +30323,7 @@ var ColorInput = (0, vue.defineComponent)({
 		}
 	},
 	emits: ["update:modelValue"],
-	setup(props, { attrs, emit }) {
+	setup(props, { attrs, emit, slots }) {
 		const internal = (0, vue.ref)(props.defaultValue);
 		const current = () => props.modelValue ?? props.value ?? internal.value;
 		const controlled = () => props.modelValue !== void 0 || props.value !== void 0;
@@ -30622,8 +30393,8 @@ var ColorInput = (0, vue.defineComponent)({
 				readonly: props.disallowInput || readOnly,
 				pointer: props.disallowInput,
 				value,
-				leftSection: attrs.leftSection ?? preview,
-				rightSection: attrs.rightSection ?? eye,
+				leftSection: attrs.leftSection !== void 0 || slots.leftSection ? attrs.leftSection : preview,
+				rightSection: attrs.rightSection !== void 0 || slots.rightSection ? attrs.rightSection : eye,
 				onInput: (event) => setValue(event.target.value, true),
 				onFocus: (event) => {
 					opened.value = true;
@@ -30638,7 +30409,7 @@ var ColorInput = (0, vue.defineComponent)({
 					opened.value = false;
 					attrs.onBlur?.(event);
 				}
-			})), (0, vue.h)(Popover.Dropdown, {
+			}, slots)), (0, vue.h)(Popover.Dropdown, {
 				class: ColorInput_module_default.dropdown,
 				onMousedown: (event) => event.preventDefault()
 			}, () => (0, vue.h)(ColorPicker, {
@@ -30874,6 +30645,7 @@ var TreeSelectOption = (0, vue.defineComponent)({
 var TreeSelect = (0, vue.defineComponent)({
 	name: "TreeSelect",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		data: {
 			type: Array,
@@ -30969,7 +30741,7 @@ var TreeSelect = (0, vue.defineComponent)({
 		chevronAriaLabels: Object
 	},
 	emits: ["update:modelValue", "update:searchValue"],
-	setup(props, { attrs, emit }) {
+	setup(props, { attrs, emit, slots }) {
 		const isMulti = () => props.mode !== "single";
 		const internal = (0, vue.ref)(props.defaultValue !== void 0 ? props.defaultValue : isMulti() ? [] : null);
 		const current = () => props.modelValue ?? props.value ?? internal.value;
@@ -31071,6 +30843,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 renderNode = props.renderNode ?? (slots.renderNode ? (payload) => slots.renderNode(payload) : void 0);
 			const clear = (event) => {
 				event.stopPropagation();
 				setValue(isMulti() ? [] : null);
@@ -31080,7 +30854,7 @@ var TreeSelect = (0, vue.defineComponent)({
 			const rightSection = canClear ? (0, vue.h)(Combobox.ClearButton, {
 				...attrs.clearButtonProps,
 				onClick: clear
-			}) : attrs.rightSection ?? (0, vue.h)(Combobox.Chevron, {
+			}) : attrs.rightSection !== void 0 || slots.rightSection ? attrs.rightSection : (0, vue.h)(Combobox.Chevron, {
 				size: attrs.size ?? "sm",
 				error: attrs.error
 			});
@@ -31148,7 +30922,7 @@ var TreeSelect = (0, vue.defineComponent)({
 					combobox.closeDropdown();
 					setSearch(current() ? String(nodes.value[current()]?.label ?? "") : "");
 				}
-			});
+			}, slots);
 			const treeOptions = flat.value.map((flatNode) => {
 				const { node, level, hasChildren, expanded: nodeExpanded, isLastChild, lineGuides } = flatNode;
 				const vals = selectedArray();
@@ -31170,7 +30944,7 @@ var TreeSelect = (0, vue.defineComponent)({
 					lineGuides,
 					withLines: props.withLines,
 					onToggleExpand: toggleExpand,
-					renderNode: props.renderNode,
+					renderNode,
 					chevronAriaLabels: props.chevronAriaLabels
 				});
 			});
@@ -31181,7 +30955,7 @@ var TreeSelect = (0, vue.defineComponent)({
 					maxHeight: typeof props.maxDropdownHeight === "number" ? `${props.maxDropdownHeight}px` : props.maxDropdownHeight,
 					overflowY: "auto"
 				}, props.scrollAreaProps?.style]
-			}, treeOptions) : props.nothingFoundMessage != null ? (0, vue.h)(Combobox.Empty, null, () => props.nothingFoundMessage) : null;
+			}, treeOptions) : nothingFound != null ? (0, vue.h)(Combobox.Empty, null, () => nothingFound) : null;
 			return [(0, vue.h)(Combobox, {
 				store: combobox,
 				readOnly,
@@ -31539,6 +31313,7 @@ exports.getSplittedTags = getSplittedTags;
 exports.getThemeColor = getThemeColor;
 exports.getTitleSize = getTitleSize;
 exports.getTreeExpandedState = getTreeExpandedState;
+exports.hasNode = hasNode;
 exports.hashStyleProps = hashStyleProps;
 exports.highlighter = highlighter;
 exports.hsvaToHex = hsvaToHex;
@@ -31581,6 +31356,7 @@ exports.px = px;
 exports.rem = rem;
 exports.renderPolymorphic = renderPolymorphic;
 exports.resolveColorScheme = resolveColorScheme;
+exports.resolveNode = resolveNode;
 exports.rgba = rgba;
 exports.round = round;
 exports.toRgba = toRgba;