@mantine-vue/core 1.1.4 → 2.0.1

package/esm/index.mjs

@@ -2141,6 +2141,16 @@ var DirectionProvider = 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
@@ -2866,6 +2876,7 @@ var varsResolver$87 = createVarsResolver((theme, { color, variant, size }) => ({
 var Divider = withBoxProps(defineComponent({
 	name: "Divider",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		color: {
 			type: String,
@@ -2873,12 +2884,7 @@ var Divider = withBoxProps(defineComponent({
 		},
 		size: [String, Number],
 		label: {
-			type: [
-				String,
-				Number,
-				Object,
-				Function
-			],
+			type: null,
 			default: void 0
 		},
 		labelPosition: {
@@ -2925,16 +2931,16 @@ var Divider = withBoxProps(defineComponent({
 			unstyled: props.unstyled
 		});
 		return () => {
-			const label = slots.default?.() ?? props.label;
+			const label = resolveNode(props.label, slots.label ?? slots.default);
 			return h(Box, {
 				...attrs,
 				role: "separator",
 				...getStyles("root"),
 				mod: {
 					orientation: props.orientation,
-					withLabel: Boolean(label)
+					withLabel: hasNode(label)
 				}
-			}, () => label ? h(Box, {
+			}, () => hasNode(label) ? h(Box, {
 				component: "span",
 				...getStyles("label"),
 				mod: { position: props.labelPosition }
@@ -3907,6 +3913,7 @@ var varsResolver$76 = createVarsResolver((theme, { radius, color, gradient, vari
 var Badge = withBoxProps(defineComponent({
 	name: "Badge",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		component: {
 			type: String,
@@ -3927,21 +3934,11 @@ var Badge = withBoxProps(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: {
@@ -3987,12 +3984,14 @@ var Badge = withBoxProps(defineComponent({
 			varsResolver: varsResolver$76,
 			unstyled: props.unstyled
 		});
-		const renderSection = (section, position) => section ? h("span", {
+		const renderSection = (section, position) => hasNode(section) ? 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 h(Box, {
 				...attrs,
 				...getStyles("root"),
@@ -4001,13 +4000,13 @@ var Badge = withBoxProps(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"),
 				h("span", getStyles("label"), children),
-				renderSection(props.rightSection, "right")
+				renderSection(rightSection, "right")
 			]);
 		};
 	}
@@ -4810,6 +4809,7 @@ var varsResolver$71 = createVarsResolver((_, { size, radius, iconSize }) => ({ r
 var CloseButton = defineComponent({
 	name: "CloseButton",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		component: {
 			type: String,
@@ -4823,11 +4823,7 @@ var CloseButton = defineComponent({
 		},
 		iconSize: [String, Number],
 		icon: {
-			type: [
-				String,
-				Object,
-				Function
-			],
+			type: null,
 			default: void 0
 		},
 		variant: {
@@ -4869,15 +4865,18 @@ var CloseButton = defineComponent({
 			vars: props.vars,
 			varsResolver: varsResolver$71
 		});
-		return () => 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 : h(CloseIcon), slots.default?.()]);
+		return () => {
+			const icon = resolveNode(props.icon, slots.icon);
+			return h(UnstyledButton, {
+				...attrs,
+				...getStyles("root"),
+				component: props.component,
+				unstyled: props.unstyled,
+				variant: props.variant,
+				disabled: props.disabled,
+				mod: { disabled: props.disabled }
+			}, () => [hasNode(icon) ? icon : h(CloseIcon), slots.default?.()]);
+		};
 	}
 });
 var Button_module_default = {
@@ -5058,7 +5057,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 = defineComponent({
@@ -5183,14 +5182,14 @@ var ButtonBase = defineComponent({
 			},
 			varsResolver: varsResolver$68
 		});
-		const renderSection = (content, position) => content ? h(Box, {
+		const renderSection = (content, position) => hasNode(content) ? 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 h(UnstyledButton, {
@@ -5204,8 +5203,8 @@ var ButtonBase = 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
 			}, () => [h(Transition, {
@@ -5743,12 +5742,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(defineComponent({
 	name: "Alert",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		id: {
 			type: String,
@@ -5760,21 +5757,11 @@ var Alert = withBoxProps(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: {
@@ -5834,11 +5821,11 @@ var Alert = withBoxProps(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 h(Box, {
 				...attrs,
@@ -5846,17 +5833,17 @@ var Alert = withBoxProps(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
 			}, () => h("div", getStyles("wrapper"), [
-				icon ? h("div", getStyles("icon"), renderContent$12(icon)) : null,
-				h("div", getStyles("body"), [title ? h("div", {
+				hasNode(icon) ? h("div", getStyles("icon"), icon) : null,
+				h("div", getStyles("body"), [hasNode(title) ? h("div", {
 					...getStyles("title"),
 					"data-with-close-button": props.withCloseButton ? "" : void 0
 				}, [h("span", {
 					id: titleId,
 					...getStyles("label")
-				}, renderContent$12(title))]) : null, message ? h("div", {
+				}, title)]) : null, hasNode(message) ? h("div", {
 					id: bodyId,
 					...getStyles("message"),
 					"data-variant": props.variant
@@ -5901,20 +5888,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(defineComponent({
 	name: "Blockquote",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		icon: {
-			type: [
-				String,
-				Number,
-				Object,
-				Function
-			],
+			type: null,
 			default: void 0
 		},
 		iconSize: [String, Number],
@@ -5924,12 +5904,7 @@ var Blockquote = withBoxProps(defineComponent({
 		},
 		radius: [String, Number],
 		cite: {
-			type: [
-				String,
-				Number,
-				Object,
-				Function
-			],
+			type: null,
 			default: void 0
 		},
 		textWrap: {
@@ -5968,16 +5943,16 @@ var Blockquote = withBoxProps(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 h(Box, {
 				...attrs,
 				...getStyles("root"),
 				component: "blockquote"
 			}, () => [
-				icon ? h("span", getStyles("icon"), renderContent$11(icon)) : null,
+				hasNode(icon) ? h("span", getStyles("icon"), icon) : null,
 				slots.default?.(),
-				cite ? h("cite", getStyles("cite"), renderContent$11(cite)) : null
+				hasNode(cite) ? h("cite", getStyles("cite"), cite) : null
 			]);
 		};
 	}
@@ -5991,23 +5966,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 === Fragment && Array.isArray(child.children) ? flattenChildren$2(child.children) : child.type === Comment ? [] : [child]);
 }
 var Breadcrumbs = withBoxProps(defineComponent({
 	name: "Breadcrumbs",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		separator: {
-			type: [
-				String,
-				Number,
-				Object,
-				Function
-			],
+			type: null,
 			default: void 0
 		},
 		separatorMargin: [String, Number],
@@ -6050,7 +6018,7 @@ var Breadcrumbs = withBoxProps(defineComponent({
 				if (index !== children.length - 1) acc.push(h(Box, {
 					...getStyles("separator"),
 					key: `separator-${index}`
-				}, () => renderContent$10(props.separator)));
+				}, () => resolveNode(props.separator, slots.separator)));
 				return acc;
 			}, []);
 			return h(Box, {
@@ -6072,14 +6040,10 @@ function renderListIcon(icon) {
 var ListItem = withBoxProps(defineComponent({
 	name: "ListItem",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		icon: {
-			type: [
-				String,
-				Number,
-				Object,
-				Function
-			],
+			type: null,
 			default: void 0
 		},
 		mod: {
@@ -6103,7 +6067,8 @@ var ListItem = withBoxProps(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 h(Box, {
 				...attrs,
 				...ctx.getStyles("item", {
@@ -6112,10 +6077,10 @@ var ListItem = withBoxProps(defineComponent({
 				}),
 				component: "li",
 				mod: [{
-					withIcon: Boolean(icon),
+					withIcon: hasNode(icon),
 					centered: ctx.center
 				}, props.mod]
-			}, () => h("div", ctx.getStyles("itemWrapper"), [icon ? h("span", ctx.getStyles("itemIcon"), renderListIcon(icon)) : null, h("span", ctx.getStyles("itemLabel"), slots.default?.())]));
+			}, () => h("div", ctx.getStyles("itemWrapper"), [hasNode(icon) ? h("span", ctx.getStyles("itemIcon"), icon) : null, h("span", ctx.getStyles("itemLabel"), slots.default?.())]));
 		};
 	}
 }));
@@ -6136,6 +6101,7 @@ var varsResolver$61 = createVarsResolver((_, { size, spacing }) => ({ root: {
 var ListBase = defineComponent({
 	name: "List",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		type: {
 			type: String,
@@ -6150,12 +6116,7 @@ var ListBase = defineComponent({
 			default: void 0
 		},
 		icon: {
-			type: [
-				String,
-				Number,
-				Object,
-				Function
-			],
+			type: null,
 			default: void 0
 		},
 		spacing: [String, Number],
@@ -6213,19 +6174,24 @@ var ListBase = defineComponent({
 		provideListContext({
 			getStyles,
 			center: props.center,
-			icon: props.icon
+			get icon() {
+				return resolveNode(props.icon, slots.icon);
+			}
 		});
-		return () => 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 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 }));
@@ -6294,12 +6260,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(defineComponent({
 	name: "Indicator",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		position: {
 			type: String,
@@ -6315,12 +6279,7 @@ var Indicator = withBoxProps(defineComponent({
 		},
 		size: [String, Number],
 		label: {
-			type: [
-				String,
-				Number,
-				Object,
-				Function
-			],
+			type: null,
 			default: void 0
 		},
 		radius: [String, Number],
@@ -6389,8 +6348,9 @@ var Indicator = withBoxProps(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 h(Box, {
 				...attrs,
 				...getStyles("root"),
@@ -6398,11 +6358,11 @@ var Indicator = withBoxProps(defineComponent({
 			}, () => [!props.disabled && !shouldHideZero ? 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?.()]);
 		};
 	}
 }));
@@ -8333,9 +8293,6 @@ var AccordionChevron = 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);
@@ -8354,28 +8311,18 @@ function createAccordionKeydownHandler(loop, onKeydown) {
 var AccordionControl = withBoxProps(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: {
@@ -8408,6 +8355,8 @@ var AccordionControl = withBoxProps(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 h(UnstyledButton, {
 				...attrs,
 				...ctx.getStyles("control", {
@@ -8448,13 +8397,13 @@ var AccordionControl = withBoxProps(defineComponent({
 						styles: props.styles,
 						props
 					})
-				}, () => renderContent$8(props.chevron === void 0 ? ctx.chevron : props.chevron)),
+				}, () => chevron),
 				h("span", ctx.getStyles("label", {
 					classNames: props.classNames,
 					styles: props.styles,
 					props
 				}), slots.default?.()),
-				props.icon ? h(Box, {
+				hasNode(icon) ? h(Box, {
 					component: "span",
 					mod: { chevronPosition: ctx.chevronPosition },
 					...ctx.getStyles("icon", {
@@ -8462,7 +8411,7 @@ var AccordionControl = withBoxProps(defineComponent({
 						styles: props.styles,
 						props
 					})
-				}, () => renderContent$8(props.icon)) : null
+				}, () => icon) : null
 			]);
 		};
 		return () => typeof ctx.order === "number" ? h(`h${ctx.order}`, ctx.getStyles("itemTitle", {
@@ -8605,7 +8554,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: {
@@ -8777,7 +8726,7 @@ var AccordionBase = defineComponent({
 			id: uid.value,
 			variant: props.variant,
 			"data-accordion": true
-		}, () => renderContent$7(slots.default));
+		}, () => renderContent$4(slots.default));
 	}
 });
 var Accordion = Object.assign(AccordionBase, {
@@ -8805,7 +8754,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(defineComponent({
@@ -8915,7 +8864,7 @@ var Scroller = withBoxProps(defineComponent({
 					"data-hidden": !showStart || void 0,
 					"aria-label": "Scroll left",
 					tabindex: showStart ? 0 : -1
-				}, () => renderContent$6(props.startControlIcon) || h(AccordionChevron, getStyles("chevron"))),
+				}, () => renderContent$3(props.startControlIcon) || h(AccordionChevron, getStyles("chevron"))),
 				h("div", {
 					...getStyles("container"),
 					ref: scroller.ref,
@@ -8931,7 +8880,7 @@ var Scroller = withBoxProps(defineComponent({
 					"data-hidden": !showEnd || void 0,
 					"aria-label": "Scroll right",
 					tabindex: showEnd ? 0 : -1
-				}, () => renderContent$6(props.endControlIcon) || h(AccordionChevron, getStyles("chevron")))
+				}, () => renderContent$3(props.endControlIcon) || h(AccordionChevron, getStyles("chevron")))
 			]);
 		};
 	}
@@ -10268,6 +10217,7 @@ var Timeline_module_default = {
 var TimelineItem = withBoxProps(defineComponent({
 	name: "TimelineItem",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		__active: {
 			type: Boolean,
@@ -10290,21 +10240,11 @@ var TimelineItem = withBoxProps(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: {
@@ -10352,10 +10292,11 @@ var TimelineItem = withBoxProps(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
@@ -10379,11 +10320,11 @@ var TimelineItem = withBoxProps(defineComponent({
 			}, () => [h(Box, {
 				...ctx.getStyles("itemBullet", { props }),
 				mod: {
-					withChild: Boolean(props.bullet),
+					withChild: hasNode(bullet),
 					align: props.__align,
 					active
 				}
-			}, () => renderContent(props.bullet)), h("div", ctx.getStyles("itemBody", { props }), [props.title ? h("div", ctx.getStyles("itemTitle", { props }), renderContent(props.title)) : null, h("div", ctx.getStyles("itemContent", { props }), slots.default?.())])]);
+			}, () => bullet), h("div", ctx.getStyles("itemBody", { props }), [hasNode(title) ? h("div", ctx.getStyles("itemTitle", { props }), title) : null, h("div", ctx.getStyles("itemContent", { props }), slots.default?.())])]);
 		};
 	}
 }));
@@ -10759,6 +10700,7 @@ var varsResolver$47 = createVarsResolver((theme, { filledSegmentColor, emptySegm
 var SemiCircleProgress = withBoxProps(defineComponent({
 	name: "SemiCircleProgress",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		value: {
 			type: Number,
@@ -10793,12 +10735,7 @@ var SemiCircleProgress = withBoxProps(defineComponent({
 			default: void 0
 		},
 		label: {
-			type: [
-				String,
-				Number,
-				Object,
-				Function
-			],
+			type: null,
 			default: void 0
 		},
 		labelPosition: {
@@ -10836,7 +10773,6 @@ var SemiCircleProgress = withBoxProps(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;
@@ -10844,7 +10780,7 @@ var SemiCircleProgress = withBoxProps(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 h(Box, {
 				...attrs,
 				w: size,
@@ -10852,11 +10788,11 @@ var SemiCircleProgress = withBoxProps(defineComponent({
 					className: attrs.class,
 					style: attrs.style
 				})
-			}, () => [label ? h("div", {
+			}, () => [hasNode(label) ? h("div", {
 				...getStyles("label"),
 				"data-position": props.labelPosition,
 				"data-orientation": props.orientation
-			}, renderContent(label)) : null, h("svg", {
+			}, label) : null, h("svg", {
 				width: size,
 				height: size / 2,
 				viewBox: `0 0 ${size} ${size / 2}`,
@@ -10902,28 +10838,19 @@ var varsResolver$46 = createVarsResolver((_, { transitionDuration }) => ({ root:
 var Spoiler = withBoxProps(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,
@@ -10992,12 +10919,11 @@ var Spoiler = withBoxProps(defineComponent({
 			onChange: (value) => props.onExpandedChange?.(value)
 		});
 		const { ref: contentRef, height } = 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 h(Box, {
 				...attrs,
@@ -11015,7 +10941,7 @@ var Spoiler = withBoxProps(defineComponent({
 				"aria-controls": regionId,
 				"aria-label": ariaLabel,
 				...getStyles("control")
-			}, () => renderContent(currentLabel)) : null, h("div", {
+			}, () => currentLabel) : null, h("div", {
 				...getStyles("content", { style: { maxHeight: !show.value ? rem(maxHeight) : height.value ? rem(height.value) : void 0 } }),
 				"data-reduce-motion": "",
 				role: "region",
@@ -11039,14 +10965,10 @@ var varsResolver$45 = createVarsResolver((_, { radius }) => ({ root: { "--fields
 var Fieldset = withBoxProps(defineComponent({
 	name: "Fieldset",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		legend: {
-			type: [
-				String,
-				Number,
-				Object,
-				Function
-			],
+			type: null,
 			default: void 0
 		},
 		radius: {
@@ -11088,16 +11010,18 @@ var Fieldset = withBoxProps(defineComponent({
 			vars: props.vars,
 			varsResolver: varsResolver$45
 		});
-		const renderContent = (value) => typeof value === "function" ? value() : value;
-		return () => h(Box, {
-			...attrs,
-			component: "fieldset",
-			variant: props.variant,
-			...getStyles("root", {
-				className: attrs.class,
-				style: attrs.style
-			})
-		}, () => [props.legend ? h("legend", getStyles("legend"), renderContent(props.legend)) : null, slots.default?.()]);
+		return () => {
+			const legend = resolveNode(props.legend, slots.legend);
+			return h(Box, {
+				...attrs,
+				component: "fieldset",
+				variant: props.variant,
+				...getStyles("root", {
+					className: attrs.class,
+					style: attrs.style
+				})
+			}, () => [hasNode(legend) ? h("legend", getStyles("legend"), legend) : null, slots.default?.()]);
+		};
 	}
 }));
 Object.assign(Fieldset, {
@@ -11244,13 +11168,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 h("div", {
 		"data-combined-clear-section": true,
 		style: {
@@ -11259,8 +11183,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
@@ -11579,6 +11503,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),
@@ -11587,39 +11520,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 = 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: {
@@ -11704,8 +11619,8 @@ var InputWrapper = defineComponent({
 		const ids = 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,
@@ -11748,7 +11663,10 @@ var InputWrapper = defineComponent({
 				size: props.size,
 				variant: props.variant
 			};
-			const label = props.label ? 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 ? h(InputLabel, {
 				key: "label",
 				labelElement: props.labelElement,
 				id: ids.value.labelId,
@@ -11756,14 +11674,14 @@ var InputWrapper = defineComponent({
 				required: isRequired,
 				...sharedProps,
 				...props.labelProps
-			}, () => renderContent$4(props.label)) : null;
+			}, () => labelContent) : null;
 			const description = ids.value.hasDescription ? 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 ? h(InputError, {
 				key: "error",
@@ -11771,7 +11689,7 @@ var InputWrapper = 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;
@@ -11782,7 +11700,7 @@ var InputWrapper = 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,
@@ -11810,12 +11728,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 = defineComponent({
 	name: "Input",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		component: {
 			type: [
@@ -11834,12 +11753,7 @@ var InputBase$1 = defineComponent({
 			default: void 0
 		},
 		leftSection: {
-			type: [
-				String,
-				Number,
-				Object,
-				Function
-			],
+			type: null,
 			default: void 0
 		},
 		leftSectionWidth: {
@@ -11855,13 +11769,7 @@ var InputBase$1 = defineComponent({
 			default: "none"
 		},
 		rightSection: {
-			type: [
-				String,
-				Number,
-				Object,
-				Function,
-				null
-			],
+			type: null,
 			default: void 0
 		},
 		rightSectionWidth: {
@@ -12030,11 +11938,13 @@ var InputBase$1 = defineComponent({
 			stylesCtx.offsetBottom = wrapperCtx.offsetBottom;
 			stylesCtx.offsetTop = wrapperCtx.offsetTop;
 			const loadingIndicator = props.loading ? 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
@@ -12069,7 +11979,7 @@ var InputBase$1 = defineComponent({
 						className: props.leftSectionProps?.class,
 						style: props.leftSectionProps?.style
 					})
-				}, renderContent$3(leftSection)) : null,
+				}, renderContent$1(leftSection)) : null,
 				h(Box, {
 					...attrs,
 					...ariaAttributes,
@@ -12090,7 +12000,7 @@ var InputBase$1 = defineComponent({
 						className: props.__bottomSectionProps?.class,
 						style: props.__bottomSectionProps?.style
 					})
-				}, renderContent$3(props.__bottomSection)) : null,
+				}, renderContent$1(props.__bottomSection)) : null,
 				rightSection ? h("div", {
 					...props.rightSectionProps,
 					"data-position": "right",
@@ -12098,7 +12008,7 @@ var InputBase$1 = defineComponent({
 						className: props.rightSectionProps?.class,
 						style: props.rightSectionProps?.style
 					})
-				}, renderContent$3(rightSection)) : null
+				}, renderContent$1(rightSection)) : null
 			]);
 		};
 	}
@@ -12118,6 +12028,7 @@ var Input = withBoxProps(Object.assign(InputBase$1, {
 var InputBase = withBoxProps(defineComponent({
 	name: "InputBase",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		component: {
 			type: [
@@ -12136,31 +12047,15 @@ var InputBase = withBoxProps(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: {
@@ -12257,13 +12152,7 @@ var InputBase = withBoxProps(defineComponent({
 			default: void 0
 		},
 		rightSection: {
-			type: [
-				String,
-				Number,
-				Object,
-				Function,
-				null
-			],
+			type: null,
 			default: void 0
 		},
 		rightSectionWidth: {
@@ -12376,45 +12265,54 @@ var InputBase = withBoxProps(defineComponent({
 			vars: props.vars,
 			unstyled: props.unstyled,
 			mod: props.mod
-		}, () => 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: () => 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 });
@@ -12430,6 +12328,7 @@ function defaultValueComponent(value) {
 var FileInput = defineComponent({
 	name: "FileInput",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		component: {
 			type: String,
@@ -12500,12 +12399,7 @@ var FileInput = defineComponent({
 			default: void 0
 		},
 		placeholder: {
-			type: [
-				String,
-				Number,
-				Object,
-				Function
-			],
+			type: null,
 			default: void 0
 		},
 		resetRef: {
@@ -12513,13 +12407,7 @@ var FileInput = defineComponent({
 			default: void 0
 		},
 		rightSection: {
-			type: [
-				String,
-				Number,
-				Object,
-				Function,
-				null
-			],
+			type: null,
 			default: void 0
 		},
 		size: {
@@ -12527,31 +12415,15 @@ var FileInput = 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: {
@@ -12583,7 +12455,7 @@ var FileInput = defineComponent({
 			default: false
 		}
 	},
-	setup(props, { attrs }) {
+	setup(props, { attrs, slots }) {
 		const resetRef = ref(null);
 		const [value, setValue] = useUncontrolled({
 			value: () => props.value,
@@ -12642,7 +12514,18 @@ var FileInput = defineComponent({
 				classNames: props.classNames,
 				styles: props.styles,
 				vars: props.vars
-			}, () => !hasValue.value ? 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) ? h(Input.Placeholder, { __staticSelector: "FileInput" }, () => placeholder) : null;
+				},
+				label: slots.label,
+				description: slots.description,
+				error: slots.error,
+				leftSection: slots.leftSection,
+				rightSection: slots.rightSection
+			}) });
 		};
 	}
 });
@@ -12666,6 +12549,7 @@ var varsResolver$39 = createVarsResolver((theme, { radius, color }) => ({ root:
 var Notification = withBoxProps(defineComponent({
 	name: "Notification",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		onClose: {
 			type: Function,
@@ -12680,21 +12564,11 @@ var Notification = withBoxProps(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: {
@@ -12752,43 +12626,46 @@ var Notification = withBoxProps(defineComponent({
 			vars: props.vars,
 			varsResolver: varsResolver$39
 		});
-		const renderContent = (value) => typeof value === "function" ? value() : value;
-		return () => 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 ? h("div", getStyles("icon"), renderContent(props.icon)) : null,
-			props.loading ? h(Loader, {
-				size: 28,
-				color: props.color,
-				...getStyles("loader"),
-				...props.loaderProps
-			}) : null,
-			h("div", getStyles("body"), [props.title ? h("div", getStyles("title"), renderContent(props.title)) : null, h(Box, {
-				...getStyles("description"),
-				mod: { withTitle: Boolean(props.title) }
-			}, () => slots.default?.())]),
-			props.withCloseButton ? 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 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 ? h("div", getStyles("icon"), icon) : null,
+				props.loading ? h(Loader, {
+					size: 28,
+					color: props.color,
+					...getStyles("loader"),
+					...props.loaderProps
+				}) : null,
+				h("div", getStyles("body"), [hasNode(title) ? h("div", getStyles("title"), title) : null, h(Box, {
+					...getStyles("description"),
+					mod: { withTitle: hasNode(title) }
+				}, () => slots.default?.())]),
+				props.withCloseButton ? 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, {
@@ -13042,6 +12919,7 @@ function getDecimalPlaces(value) {
 var NumberInput = defineComponent({
 	name: "NumberInput",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		value: {
 			type: [
@@ -13180,13 +13058,7 @@ var NumberInput = defineComponent({
 			default: false
 		},
 		rightSection: {
-			type: [
-				String,
-				Number,
-				Object,
-				Function,
-				null
-			],
+			type: null,
 			default: void 0
 		},
 		rightSectionWidth: {
@@ -13198,31 +13070,15 @@ var NumberInput = 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: {
@@ -13254,7 +13110,7 @@ var NumberInput = defineComponent({
 			default: false
 		}
 	},
-	setup(props, { attrs }) {
+	setup(props, { attrs, slots }) {
 		const inputRef = ref(null);
 		const isEditing = ref(false);
 		const isBigIntMode = computed(() => typeof props.value === "bigint" || typeof props.defaultValue === "bigint");
@@ -13435,7 +13291,7 @@ var NumberInput = 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],
@@ -13489,7 +13345,7 @@ var NumberInput = defineComponent({
 			rootRef: (node) => {
 				inputRef.value = node?.querySelector?.("input") ?? node;
 			}
-		});
+		}, slots);
 	}
 });
 Object.assign(NumberInput, {
@@ -14039,6 +13895,7 @@ function NativeSelectChevron() {
 var NativeSelect = defineComponent({
 	name: "NativeSelect",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		data: {
 			type: Array,
@@ -14049,23 +13906,11 @@ var NativeSelect = 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: {
@@ -14073,21 +13918,11 @@ var NativeSelect = 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: {
@@ -14162,7 +13997,7 @@ var NativeSelect = 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,
@@ -14179,7 +14014,14 @@ var NativeSelect = 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
+			});
 		};
 	}
 });
@@ -14211,7 +14053,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) {
@@ -14221,6 +14063,7 @@ function callHandler$8(handler, event) {
 var NavLink = withBoxProps(defineComponent({
 	name: "NavLink",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		component: {
 			type: String,
@@ -14236,12 +14079,7 @@ var NavLink = withBoxProps(defineComponent({
 			default: void 0
 		},
 		description: {
-			type: [
-				String,
-				Number,
-				Object,
-				Function
-			],
+			type: null,
 			default: void 0
 		},
 		leftSection: {
@@ -14254,13 +14092,7 @@ var NavLink = withBoxProps(defineComponent({
 			default: void 0
 		},
 		rightSection: {
-			type: [
-				String,
-				Number,
-				Object,
-				Function,
-				null
-			],
+			type: null,
 			default: void 0
 		},
 		active: {
@@ -14352,10 +14184,10 @@ var NavLink = withBoxProps(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();
@@ -14385,30 +14217,30 @@ var NavLink = withBoxProps(defineComponent({
 					if (event.code === "Space" && withChildren) toggle(event);
 				}
 			}, () => [
-				leftSection ? h(Box, {
+				hasNode(leftSection) ? h(Box, {
 					component: "span",
 					...getStyles("section"),
 					mod: { position: "left" }
-				}, () => renderContent$2(leftSection)) : null,
+				}, () => renderContent(leftSection)) : null,
 				h(Box, {
 					...getStyles("body"),
 					mod: { "no-wrap": props.noWrap }
 				}, () => [h(Box, {
 					component: "span",
 					...getStyles("label")
-				}, () => renderContent$2(props.label ?? slots.label?.())), props.description || slots.description ? h(Box, {
+				}, () => renderContent(props.label ?? slots.label?.())), props.description || slots.description ? h(Box, {
 					component: "span",
 					mod: { active: props.active },
 					...getStyles("description")
-				}, () => renderContent$2(props.description ?? slots.description?.())) : null]),
-				withChildren || rightSection !== void 0 ? h(Box, {
+				}, () => renderContent(props.description ?? slots.description?.())) : null]),
+				withChildren || hasNode(rightSection) ? h(Box, {
 					...getStyles("section"),
 					component: "span",
 					mod: {
 						rotate: opened.value && !props.disableRightSectionRotation,
 						position: "right"
 					}
-				}, () => withChildren ? rightSection !== void 0 ? renderContent$2(rightSection) : h(AccordionChevron, getStyles("chevron")) : renderContent$2(rightSection)) : null
+				}, () => withChildren ? hasNode(rightSection) ? renderContent(rightSection) : h(AccordionChevron, getStyles("chevron")) : renderContent(rightSection)) : null
 			]), withChildren ? h(Collapse, {
 				expanded: opened.value,
 				keepMounted: props.keepMounted,
@@ -14944,6 +14776,7 @@ var varsResolver$31 = createVarsResolver((theme, { size, color }) => ({ root: {
 var Rating = withBoxProps(defineComponent({
 	name: "Rating",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		defaultValue: {
 			type: Number,
@@ -14958,21 +14791,11 @@ var Rating = withBoxProps(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: {
@@ -15036,7 +14859,7 @@ var Rating = withBoxProps(defineComponent({
 			default: false
 		}
 	},
-	setup(rawProps, { attrs }) {
+	setup(rawProps, { attrs, slots }) {
 		const props = useProps("Rating", defaultProps$11, rawProps);
 		const rootRef = ref(null);
 		const hovered = ref(-1);
@@ -15070,6 +14893,8 @@ var Rating = withBoxProps(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");
@@ -15089,8 +14914,8 @@ var Rating = withBoxProps(defineComponent({
 					return 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,
@@ -15683,6 +15508,7 @@ function createEdge(name, icon, label, getDisabled, getAction) {
 	return defineComponent({
 		name,
 		inheritAttrs: false,
+		slots: Object,
 		props: {
 			icon: {
 				type: [Object, Function],
@@ -15693,7 +15519,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;
@@ -15704,7 +15530,7 @@ function createEdge(name, icon, label, getDisabled, getAction) {
 					withPadding: false,
 					"aria-label": attrs["aria-label"] ?? label,
 					onClick: disabled ? void 0 : getAction(ctx)
-				}, () => h(Icon, { class: "mantine-rotate-rtl" }));
+				}, () => slots.icon ? slots.icon() : h(Icon, { class: "mantine-rotate-rtl" }));
 			};
 		}
 	});
@@ -15718,11 +15544,12 @@ var PaginationLast = withBoxProps(createEdge("PaginationLast", PaginationLastIco
 var PaginationDots = withBoxProps(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;
@@ -15733,7 +15560,7 @@ var PaginationDots = withBoxProps(defineComponent({
 					className: attrs.class,
 					style: attrs.style
 				})
-			}, () => h(Icon));
+			}, () => slots.icon ? slots.icon() : h(Icon));
 		};
 	}
 }));
@@ -16215,9 +16042,6 @@ var TabsPanel = withBoxProps(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");
@@ -16250,27 +16074,18 @@ function createTabsKeydownHandler({ orientation, dir, loop, activateOnFocus, onK
 var TabsTab = 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: {
@@ -16316,6 +16131,8 @@ var TabsTab = 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,
@@ -16360,20 +16177,20 @@ var TabsTab = defineComponent({
 					onKeydown: props.onKeydown ?? props.onKeyDown
 				})
 			}, () => [
-				props.leftSection ? h(Box, {
+				hasNode(leftSection) ? h(Box, {
 					component: "span",
 					...ctx.getStyles("tabSection", stylesApiProps),
 					"data-position": "left"
-				}, () => renderContent$1(props.leftSection)) : null,
+				}, () => leftSection) : null,
 				slots.default ? h(Box, {
 					component: "span",
 					...ctx.getStyles("tabLabel", stylesApiProps)
 				}, () => slots.default?.()) : null,
-				props.rightSection ? h(Box, {
+				hasNode(rightSection) ? h(Box, {
 					component: "span",
 					...ctx.getStyles("tabSection", stylesApiProps),
 					"data-position": "right"
-				}, () => renderContent$1(props.rightSection)) : null
+				}, () => rightSection) : null
 			]);
 		};
 	}
@@ -16806,7 +16623,7 @@ var Textarea = defineComponent({
 			default: void 0
 		}
 	},
-	setup(props, { attrs }) {
+	setup(props, { attrs, slots }) {
 		return () => {
 			const shouldAutosize = props.autosize;
 			const autosizeProps = shouldAutosize ? {
@@ -16823,7 +16640,7 @@ var Textarea = defineComponent({
 				__bottomSectionProps: props.bottomSectionProps,
 				style: [{ "--input-resize": props.resize }, attrs.style],
 				...autosizeProps
-			});
+			}, slots);
 		};
 	}
 });
@@ -16902,7 +16719,7 @@ var JsonInput = defineComponent({
 			default: void 0
 		}
 	},
-	setup(props, { attrs }) {
+	setup(props, { attrs, slots }) {
 		const [value, setValue] = useUncontrolled({
 			value: () => props.value,
 			defaultValue: props.defaultValue,
@@ -16933,7 +16750,7 @@ var JsonInput = 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 });
@@ -16942,13 +16759,13 @@ Object.assign(JsonInput, { classes: InputBase.classes });
 var TextInput = defineComponent({
 	name: "TextInput",
 	inheritAttrs: false,
-	setup(_, { attrs }) {
+	setup(_, { attrs, slots }) {
 		return () => h(InputBase, {
 			...attrs,
 			component: "input",
 			__staticSelector: "TextInput",
 			__stylesApiProps: attrs
-		});
+		}, slots);
 	}
 });
 Object.assign(TextInput, { classes: InputBase.classes });
@@ -17034,6 +16851,7 @@ var mergedClasses$3 = {
 var PasswordInput = defineComponent({
 	name: "PasswordInput",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		visibilityToggleIcon: {
 			type: [Object, Function],
@@ -17056,31 +16874,15 @@ var PasswordInput = 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: {
@@ -17136,12 +16938,7 @@ var PasswordInput = defineComponent({
 			default: false
 		},
 		leftSection: {
-			type: [
-				String,
-				Number,
-				Object,
-				Function
-			],
+			type: null,
 			default: void 0
 		},
 		leftSectionWidth: {
@@ -17157,13 +16954,7 @@ var PasswordInput = defineComponent({
 			default: void 0
 		},
 		rightSection: {
-			type: [
-				String,
-				Number,
-				Object,
-				Function,
-				null
-			],
+			type: null,
 			default: void 0
 		},
 		rightSectionWidth: {
@@ -17199,7 +16990,7 @@ var PasswordInput = defineComponent({
 			default: false
 		}
 	},
-	setup(props, { attrs }) {
+	setup(props, { attrs, slots }) {
 		const uuid = useId(props.id);
 		const fallbackId = ref(`password-input-${Math.random().toString(36).slice(2)}`);
 		const [visible, setVisible] = useUncontrolled({
@@ -17225,8 +17016,8 @@ var PasswordInput = 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 = h(ActionIcon, {
@@ -17290,43 +17081,52 @@ var PasswordInput = defineComponent({
 					className: attrs.class,
 					style: attrs.style
 				})
-			}, () => 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
-			}, () => 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: () => 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: () => 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
+				})
+			});
 		};
 	}
 });
@@ -17565,6 +17365,7 @@ function useCheckboxGroupContext() {
 var CheckboxGroup = defineComponent({
 	name: "CheckboxGroup",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		value: {
 			type: Array,
@@ -17611,31 +17412,15 @@ var CheckboxGroup = 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: {
@@ -17692,9 +17477,9 @@ var CheckboxGroup = 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,
@@ -17836,6 +17621,7 @@ var varsResolver$24 = createVarsResolver((theme, { radius, color, size, iconColo
 var CheckboxIndicator = withBoxProps(defineComponent({
 	name: "CheckboxIndicator",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		color: {
 			type: String,
@@ -17898,7 +17684,7 @@ var CheckboxIndicator = withBoxProps(defineComponent({
 			default: false
 		}
 	},
-	setup(props, { attrs }) {
+	setup(props, { attrs, slots }) {
 		const cardContext = useCheckboxCardContext();
 		const getStyles = useStyles({
 			name: "CheckboxIndicator",
@@ -17913,6 +17699,7 @@ var CheckboxIndicator = withBoxProps(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 h(Box, {
@@ -17927,9 +17714,12 @@ var CheckboxIndicator = withBoxProps(defineComponent({
 					indeterminate: props.indeterminate,
 					disabled: props.disabled
 				}, props.mod]
-			}, () => h(Icon, {
+			}, () => slots.icon ? slots.icon({
 				indeterminate: props.indeterminate,
-				...getStyles("icon")
+				...iconStyles
+			}) : h(Icon, {
+				indeterminate: props.indeterminate,
+				...iconStyles
 			}));
 		};
 	}
@@ -17967,18 +17757,14 @@ function callHandler$6(handler, event) {
 var CheckboxBase = 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: {
@@ -18002,22 +17788,11 @@ var CheckboxBase = 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: {
@@ -18081,7 +17856,7 @@ var CheckboxBase = defineComponent({
 			default: false
 		}
 	},
-	setup(props, { attrs }) {
+	setup(props, { attrs, slots }) {
 		const uuid = useId(props.id);
 		const groupContext = useCheckboxGroupContext();
 		const getStyles = useStyles({
@@ -18098,11 +17873,19 @@ var CheckboxBase = 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;
@@ -18119,9 +17902,9 @@ var CheckboxBase = 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,
@@ -18145,7 +17928,7 @@ var CheckboxBase = defineComponent({
 				"aria-describedby": describedBy,
 				"data-indeterminate": props.indeterminate || void 0,
 				mod: {
-					error: Boolean(props.error),
+					error: Boolean(error),
 					withErrorStyles: props.withErrorStyles
 				},
 				variant: props.variant,
@@ -18157,9 +17940,9 @@ var CheckboxBase = defineComponent({
 					callHandler$6(attrs.onChange, event);
 					groupContext?.onChange(event);
 				}
-			}), h(Icon, {
+			}), slots.icon ? slots.icon(iconSlotProps) : h(Icon, {
 				indeterminate: props.indeterminate,
-				...getStyles("icon")
+				...iconStyles
 			})]));
 		};
 	}
@@ -18751,6 +18534,7 @@ Object.assign(PillsInputField, { classes: PillsInput_module_default });
 var PillsInputBase = defineComponent({
 	name: "PillsInput",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		size: {
 			type: [String, Number],
@@ -18761,13 +18545,7 @@ var PillsInputBase = defineComponent({
 			default: false
 		},
 		error: {
-			type: [
-				String,
-				Number,
-				Object,
-				Function,
-				Boolean
-			],
+			type: null,
 			default: void 0
 		},
 		variant: {
@@ -18783,21 +18561,11 @@ var PillsInputBase = 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: {
@@ -18894,7 +18662,14 @@ var PillsInputBase = 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, {
@@ -18910,6 +18685,7 @@ function useRadioGroupContext() {
 var RadioGroup = defineComponent({
 	name: "RadioGroup",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		value: {
 			type: String,
@@ -18944,31 +18720,15 @@ var RadioGroup = 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: {
@@ -19019,9 +18779,9 @@ var RadioGroup = 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,
@@ -19177,6 +18937,7 @@ var varsResolver$18 = createVarsResolver((theme, { radius, color, size, iconColo
 var RadioIndicator = withBoxProps(defineComponent({
 	name: "RadioIndicator",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		color: {
 			type: String,
@@ -19235,7 +18996,7 @@ var RadioIndicator = withBoxProps(defineComponent({
 			default: false
 		}
 	},
-	setup(props, { attrs }) {
+	setup(props, { attrs, slots }) {
 		const cardContext = useRadioCardContext();
 		const getStyles = useStyles({
 			name: "RadioIndicator",
@@ -19250,6 +19011,7 @@ var RadioIndicator = withBoxProps(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 h(Box, {
@@ -19263,7 +19025,7 @@ var RadioIndicator = withBoxProps(defineComponent({
 					checked,
 					disabled: props.disabled
 				}, props.mod]
-			}, () => h(Icon, getStyles("icon")));
+			}, () => slots.icon ? slots.icon(iconStyles) : h(Icon, iconStyles));
 		};
 	}
 }));
@@ -19301,18 +19063,14 @@ function callHandler$2(handler, event) {
 var RadioBase = 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: {
@@ -19336,22 +19094,11 @@ var RadioBase = 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: {
@@ -19407,7 +19154,7 @@ var RadioBase = defineComponent({
 			default: false
 		}
 	},
-	setup(props, { attrs }) {
+	setup(props, { attrs, slots }) {
 		const uuid = useId(props.id);
 		const groupContext = useRadioGroupContext();
 		const getStyles = useStyles({
@@ -19424,11 +19171,15 @@ var RadioBase = 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;
@@ -19446,9 +19197,9 @@ var RadioBase = 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,
@@ -19471,7 +19222,7 @@ var RadioBase = defineComponent({
 				type: "radio",
 				"aria-describedby": describedBy,
 				mod: {
-					error: Boolean(props.error),
+					error: Boolean(error),
 					withErrorStyles: props.withErrorStyles
 				},
 				variant: props.variant,
@@ -19479,7 +19230,7 @@ var RadioBase = defineComponent({
 					callHandler$2(attrs.onChange, event);
 					groupContext?.onChange(event);
 				}
-			}), h(Icon, getStyles("icon"))]));
+			}), slots.icon ? slots.icon(iconStyles) : h(Icon, iconStyles)]));
 		};
 	}
 });
@@ -19499,6 +19250,7 @@ function useSwitchGroupContext() {
 var SwitchGroup = defineComponent({
 	name: "SwitchGroup",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		value: {
 			type: Array,
@@ -19545,31 +19297,15 @@ var SwitchGroup = 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: {
@@ -19624,9 +19360,9 @@ var SwitchGroup = 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,
@@ -19664,9 +19400,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);
@@ -19674,36 +19407,22 @@ function callHandler$1(handler, event) {
 var SwitchBase = 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: {
@@ -19723,12 +19442,7 @@ var SwitchBase = defineComponent({
 			default: void 0
 		},
 		thumbIcon: {
-			type: [
-				String,
-				Number,
-				Object,
-				Function
-			],
+			type: null,
 			default: void 0
 		},
 		labelPosition: {
@@ -19736,22 +19450,11 @@ var SwitchBase = 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: {
@@ -19803,7 +19506,7 @@ var SwitchBase = defineComponent({
 			default: false
 		}
 	},
-	setup(props, { attrs }) {
+	setup(props, { attrs, slots }) {
 		const uuid = useId(props.id);
 		const groupContext = useSwitchGroupContext();
 		const internalChecked = ref(false);
@@ -19829,9 +19532,15 @@ var SwitchBase = 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 ?? "");
@@ -19849,9 +19558,9 @@ var SwitchBase = defineComponent({
 				id,
 				size,
 				labelPosition: props.labelPosition,
-				label: props.label,
-				description: props.description,
-				error: props.error,
+				label,
+				description,
+				error,
 				disabled,
 				bodyElement: "label",
 				labelElement: "span",
@@ -19881,16 +19590,16 @@ var SwitchBase = 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")
 			}, () => [h(Box, {
 				component: "span",
-				mod: { withThumbIndicator: props.withThumbIndicator && !props.thumbIcon },
+				mod: { withThumbIndicator: props.withThumbIndicator && !thumbIcon },
 				...getStyles("thumb")
-			}, () => renderContent(props.thumbIcon)), h("span", getStyles("trackLabel"), renderContent(currentChecked ? props.onLabel : props.offLabel))])]);
+			}, () => thumbIcon), h("span", getStyles("trackLabel"), currentChecked ? onLabel : offLabel)])]);
 		};
 	}
 });
@@ -20143,6 +19852,11 @@ function renderFragment(fragment, step = 0) {
 	if (typeof fragment === "function") return fragment({ step });
 	return 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,
@@ -20151,6 +19865,7 @@ var defaultProps$6 = {
 var StepperStep = withBoxProps(defineComponent({
 	name: "StepperStep",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		step: {
 			type: Number,
@@ -20266,7 +19981,7 @@ var StepperStep = withBoxProps(defineComponent({
 			default: void 0
 		}
 	},
-	setup(rawProps, { attrs }) {
+	setup(rawProps, { attrs, slots }) {
 		const props = useProps("StepperStep", defaultProps$6, rawProps);
 		const ctx = useStepperContext();
 		const theme = useMantineTheme();
@@ -20275,17 +19990,24 @@ var StepperStep = withBoxProps(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) : 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) : 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,
@@ -20324,14 +20046,14 @@ var StepperStep = withBoxProps(defineComponent({
 				size: "calc(var(--stepper-icon-size) / 2)",
 				color: props.color,
 				...ctx.getStyles("stepLoader", stylesApi)
-			}) : renderFragment(currentIcon, props.step)) : null]), props.orientation === "vertical" ? h("span", {
+			}) : currentIcon) : null]), props.orientation === "vertical" ? h("span", {
 				...ctx.getStyles("verticalSeparator", stylesApi),
 				"data-active": props.state === "stepCompleted" || void 0
-			}) : null]) : null, props.label !== void 0 || props.description !== void 0 ? h("span", {
+			}) : null]) : null, labelPresent || descriptionPresent ? h("span", {
 				...ctx.getStyles("stepBody", stylesApi),
 				"data-orientation": ctx.orientation,
 				"data-icon-position": iconPosition
-			}, [props.label !== void 0 ? h("span", ctx.getStyles("stepLabel", stylesApi), renderFragment(props.label, props.step)) : null, props.description !== void 0 ? h("span", ctx.getStyles("stepDescription", stylesApi), renderFragment(props.description, props.step)) : null]) : null]);
+			}, [labelPresent ? h("span", ctx.getStyles("stepLabel", stylesApi), labelNode) : null, descriptionPresent ? h("span", ctx.getStyles("stepDescription", stylesApi), descriptionNode) : null]) : null]);
 		};
 	}
 }));
@@ -20367,6 +20089,7 @@ function flattenChildren$1(children) {
 var StepperBase = defineComponent({
 	name: "Stepper",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		active: {
 			type: Number,
@@ -20501,13 +20224,13 @@ var StepperBase = 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(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,
@@ -21479,6 +21202,7 @@ var varsResolver$11 = createVarsResolver((theme, { size, color, thumbSize, radiu
 var Slider = withBoxProps(defineComponent({
 	name: "Slider",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		color: {
 			type: String,
@@ -21627,7 +21351,7 @@ var Slider = withBoxProps(defineComponent({
 			default: false
 		}
 	},
-	setup(rawProps, { attrs }) {
+	setup(rawProps, { attrs, slots }) {
 		const props = useProps("Slider", defaultProps$1, rawProps);
 		const direction = useDirection();
 		const hovered = ref(false);
@@ -21689,7 +21413,7 @@ var Slider = withBoxProps(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],
@@ -21733,7 +21457,7 @@ var Slider = withBoxProps(defineComponent({
 				disabled: props.disabled,
 				orientation: props.orientation,
 				onKeydown: keydown
-			}, () => props.thumbChildren) }), props.name ? h("input", {
+			}, () => resolveNode(props.thumbChildren, slots.thumbChildren)) }), props.name ? h("input", {
 				type: "hidden",
 				name: props.name,
 				value: current.value,
@@ -21772,6 +21496,7 @@ var varsResolver$10 = createVarsResolver((theme, { size, color, thumbSize, radiu
 var RangeSlider = defineComponent({
 	name: "RangeSlider",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		value: {
 			type: Array,
@@ -21919,7 +21644,7 @@ var RangeSlider = defineComponent({
 			default: false
 		}
 	},
-	setup(rawProps, { attrs }) {
+	setup(rawProps, { attrs, slots }) {
 		const props = useProps("RangeSlider", defaults$5, rawProps);
 		const direction = useDirection();
 		const activeThumb = ref(0);
@@ -22021,7 +21746,10 @@ var RangeSlider = 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,
@@ -22032,7 +21760,7 @@ var RangeSlider = defineComponent({
 				onMousedown: () => activeThumb.value = index,
 				onFocus: () => focused.value = index,
 				onKeydown: (event) => keydown(index, event)
-			}, () => props.thumbChildren?.[index])) }), props.name ? [h("input", {
+			}, () => slots.thumbChildren ? slots.thumbChildren({ index }) : props.thumbChildren?.[index])) }), props.name ? [h("input", {
 				type: "hidden",
 				name: `${props.name}_from`,
 				value: current.value[0],
@@ -23654,7 +23382,7 @@ var MaskInput = defineComponent({
 			default: void 0
 		}
 	},
-	setup(props, { attrs }) {
+	setup(props, { attrs, slots }) {
 		const input = ref(null);
 		const processed = ref("");
 		const rawValue = ref("");
@@ -23857,7 +23585,7 @@ var MaskInput = defineComponent({
 				onBlur: handleBlur,
 				onKeydown: handleKeydown,
 				onPaste: handlePaste
-			});
+			}, slots);
 		};
 	}
 });
@@ -26107,6 +25835,7 @@ var ModalContent = compound$1("ModalContent", ModalBaseContent, "content", (ctx)
 var ModalBaseComponent = defineComponent({
 	name: "Modal",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		opened: {
 			type: Boolean,
@@ -26117,11 +25846,7 @@ var ModalBaseComponent = defineComponent({
 			required: true
 		},
 		title: {
-			type: [
-				String,
-				Object,
-				Function
-			],
+			type: null,
 			default: void 0
 		},
 		withOverlay: {
@@ -26137,13 +25862,13 @@ var ModalBaseComponent = 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 h(ModalRoot, {
 				...attrs,
 				opened: props.opened,
 				onClose: props.onClose
-			}, { default: () => [props.withOverlay && h(ModalOverlay, props.overlayProps), h(ModalContent, null, { default: () => [header && h(ModalHeader, null, { default: () => [title != null && h(ModalTitle, null, { default: () => title }), props.withCloseButton && h(ModalCloseButton, props.closeButtonProps)] }), h(ModalBody, null, slots)] })] });
+			}, { default: () => [props.withOverlay && h(ModalOverlay, props.overlayProps), h(ModalContent, null, { default: () => [header && h(ModalHeader, null, { default: () => [hasNode(title) && h(ModalTitle, null, { default: () => title }), props.withCloseButton && h(ModalCloseButton, props.closeButtonProps)] }), h(ModalBody, null, { default: () => slots.default?.() })] })] });
 		};
 	}
 });
@@ -26374,6 +26099,7 @@ var DrawerContent = compound("DrawerContent", ModalBaseContent, "content", (ctx)
 var DrawerBaseComponent = defineComponent({
 	name: "Drawer",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		opened: {
 			type: Boolean,
@@ -26384,11 +26110,7 @@ var DrawerBaseComponent = defineComponent({
 			required: true
 		},
 		title: {
-			type: [
-				String,
-				Object,
-				Function
-			],
+			type: null,
 			default: void 0
 		},
 		withOverlay: {
@@ -26438,8 +26160,8 @@ var DrawerBaseComponent = 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 h(DrawerRoot, {
 				...attrs,
 				opened: props.opened,
@@ -26450,7 +26172,7 @@ var DrawerBaseComponent = defineComponent({
 				visible: overlayVisible.value,
 				transitionProps: stackCtx && props.stackId ? { duration: 0 } : void 0,
 				...props.overlayProps
-			}), h(DrawerContent, { __hidden: contentHidden.value }, { default: () => [header && h(DrawerHeader, null, { default: () => [title != null && h(DrawerTitle, null, { default: () => title }), props.withCloseButton && h(DrawerCloseButton, props.closeButtonProps)] }), h(DrawerBody, null, slots)] })] });
+			}), h(DrawerContent, { __hidden: contentHidden.value }, { default: () => [header && h(DrawerHeader, null, { default: () => [hasNode(title) && h(DrawerTitle, null, { default: () => title }), props.withCloseButton && h(DrawerCloseButton, props.closeButtonProps)] }), h(DrawerBody, null, { default: () => slots.default?.() })] })] });
 		};
 	}
 });
@@ -28154,6 +27876,7 @@ var MenuDropdown = defineComponent({
 var MenuItem = defineComponent({
 	name: "MenuItem",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		component: {
 			type: [
@@ -28187,6 +27910,8 @@ var MenuItem = 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 h(UnstyledButton, {
 				...attrs,
 				component: props.component,
@@ -28209,15 +27934,15 @@ var MenuItem = defineComponent({
 				}
 			}, () => [
 				indicator && h("span", ctx.getStyles("itemIndicator"), props.indicator),
-				props.leftSection != null && h("span", {
+				hasNode(leftSection) && h("span", {
 					...ctx.getStyles("itemSection"),
 					"data-position": "left"
-				}, props.leftSection),
+				}, leftSection),
 				h("span", ctx.getStyles("itemLabel"), slots),
-				props.rightSection != null && h("span", {
+				hasNode(rightSection) && h("span", {
 					...ctx.getStyles("itemSection"),
 					"data-position": "right"
-				}, props.rightSection)
+				}, rightSection)
 			]);
 		};
 	}
@@ -28393,6 +28118,7 @@ var MenuRadioGroup = group$1(RadioGroupKey, false);
 var MenuCheckboxItem = defineComponent({
 	name: "MenuCheckboxItem",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		value: String,
 		checked: {
@@ -28422,21 +28148,24 @@ var MenuCheckboxItem = 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 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 = defineComponent({
 	name: "MenuRadioItem",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		value: {
 			type: String,
@@ -28447,6 +28176,10 @@ var MenuRadioItem = defineComponent({
 			default: void 0
 		},
 		onChange: Function,
+		checkIcon: {
+			type: null,
+			default: void 0
+		},
 		closeMenuOnClick: {
 			type: Boolean,
 			default: false
@@ -28461,15 +28194,17 @@ var MenuRadioItem = 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 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);
 		};
 	}
 });
@@ -29410,6 +29145,7 @@ function renderItem(item, props) {
 var OptionsDropdown = defineComponent({
 	name: "OptionsDropdown",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		data: {
 			type: Array,
@@ -29455,17 +29191,22 @@ var OptionsDropdown = 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 ? h(ScrollAreaAutosize, {
 				mah: (props.floatingHeight ?? ctx.floatingHeight) === "viewport" ? "var(--combobox-floating-options-max-height)" : props.maxDropdownHeight ?? 220,
 				type: "scroll",
@@ -29479,7 +29220,7 @@ var OptionsDropdown = defineComponent({
 			}, () => h(Combobox.Options, {
 				labelledBy: props.labelId,
 				"aria-label": props.ariaLabel
-			}, () => [content, empty && props.nothingFoundMessage != null && h(Combobox.Empty, null, () => props.nothingFoundMessage)]));
+			}, () => [content, empty && nothingFound != null && h(Combobox.Empty, null, () => nothingFound)]));
 		};
 	}
 });
@@ -29547,6 +29288,7 @@ function usePillsReorder(input) {
 var Select = defineComponent({
 	name: "Select",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		modelValue: {
 			type: null,
@@ -29627,7 +29369,7 @@ var Select = defineComponent({
 		}
 	},
 	emits: ["update:modelValue", "update:searchValue"],
-	setup(props, { attrs, emit }) {
+	setup(props, { attrs, emit, slots }) {
 		const parsed = computed(() => getParsedComboboxData(props.data));
 		const lockup = computed(() => getOptionsLockup(parsed.value));
 		const retained = {};
@@ -29748,13 +29490,13 @@ var Select = defineComponent({
 					else combobox.toggleDropdown();
 					attrs.onClick?.(event);
 				}
-			})), h(OptionsDropdown, {
+			}, slots)), 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(),
@@ -29766,6 +29508,9 @@ var Select = defineComponent({
 				labelId: attrs.label ? `${id.value}-label` : void 0,
 				renderOption: props.renderOption,
 				scrollAreaProps: props.scrollAreaProps
+			}, {
+				renderOption: slots.renderOption,
+				nothingFound: slots.nothingFound
 			})]), h(Combobox.HiddenInput, {
 				value: current(),
 				name: attrs.name,
@@ -29785,6 +29530,7 @@ Object.assign(Select, { classes: {
 var Autocomplete = defineComponent({
 	name: "Autocomplete",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		modelValue: {
 			type: String,
@@ -29832,7 +29578,7 @@ var Autocomplete = defineComponent({
 		}
 	},
 	emits: { "update:modelValue": (value) => typeof value === "string" },
-	setup(props, { attrs, emit }) {
+	setup(props, { attrs, emit, slots }) {
 		const internal = ref(props.defaultValue);
 		const current = () => props.modelValue ?? props.value ?? internal.value;
 		const controlled = () => props.modelValue !== void 0 || props.value !== void 0;
@@ -29919,18 +29665,21 @@ var Autocomplete = defineComponent({
 					combobox.openDropdown();
 					attrs.onClick?.(event);
 				}
-			})), h(OptionsDropdown, {
+			}, slots)), 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
 			})]);
 		};
 	}
@@ -29950,6 +29699,7 @@ function filterPicked(data, values) {
 var MultiSelect = defineComponent({
 	name: "MultiSelect",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		modelValue: Array,
 		value: Array,
@@ -30023,7 +29773,7 @@ var MultiSelect = defineComponent({
 		selectFirstOptionOnDropdownOpen: Boolean
 	},
 	emits: ["update:modelValue", "update:searchValue"],
-	setup(props, { attrs, emit }) {
+	setup(props, { attrs, emit, slots }) {
 		const parsed = computed(() => getParsedComboboxData(props.data));
 		const lockup = computed(() => getOptionsLockup(parsed.value));
 		const retained = {};
@@ -30110,56 +29860,63 @@ var MultiSelect = defineComponent({
 				rightSection,
 				rightSectionPointerEvents: canClear ? "all" : "none",
 				onClick: () => props.searchable ? combobox.openDropdown() : combobox.toggleDropdown()
-			}, () => 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
-				}) : 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: () => 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
+					}) : h(Pill, {
+						key: `${String(item)}-${index}`,
+						withRemoveButton: !readOnly && !option.disabled,
+						disabled,
+						onRemove
+					}, () => option.label);
+				}), h(Combobox.EventsTarget, { withExpandedAttribute: true }, () => h(PillsInput.Field, {
+					value: search(),
+					readonly: !props.searchable || readOnly,
 					disabled,
-					onRemove
-				}, () => option.label);
-			}), h(Combobox.EventsTarget, { withExpandedAttribute: true }, () => 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);
-				}
-			}))]))), h(OptionsDropdown, {
+				}))])
+			})), 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,
@@ -30169,6 +29926,9 @@ var MultiSelect = defineComponent({
 				maxDropdownHeight: props.maxDropdownHeight,
 				renderOption: props.renderOption,
 				scrollAreaProps: props.scrollAreaProps
+			}, {
+				renderOption: slots.renderOption,
+				nothingFound: slots.nothingFound
 			})]), h(Combobox.HiddenInput, {
 				value: values,
 				valuesDivider: props.hiddenInputValuesDivider,
@@ -30201,6 +29961,7 @@ function getSplittedTags({ value, splitChars = [","], currentTags = [], allowDup
 var TagsInput = defineComponent({
 	name: "TagsInput",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		modelValue: Array,
 		value: Array,
@@ -30270,7 +30031,7 @@ var TagsInput = defineComponent({
 		selectFirstOptionOnDropdownOpen: Boolean
 	},
 	emits: ["update:modelValue", "update:searchValue"],
-	setup(props, { attrs, emit }) {
+	setup(props, { attrs, emit, slots }) {
 		const parsed = computed(() => getParsedComboboxData(props.data));
 		const lockup = computed(() => getOptionsLockup(parsed.value));
 		const internal = ref([...props.defaultValue]);
@@ -30378,74 +30139,84 @@ var TagsInput = defineComponent({
 				disabled,
 				rightSection,
 				rightSectionPointerEvents: canClear ? "all" : void 0
-			}, () => 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
-				}) : h(Pill, {
-					key: `${item}-${index}`,
-					withRemoveButton: !readOnly,
+			}, {
+				label: slots.label,
+				description: slots.description,
+				error: slots.error,
+				leftSection: slots.leftSection,
+				rightSection: slots.rightSection,
+				default: () => 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
+					}) : h(Pill, {
+						key: `${item}-${index}`,
+						withRemoveButton: !readOnly,
+						disabled,
+						onRemove
+					}, () => item);
+				}), h(PillsInput.Field, {
+					value: search(),
+					readonly: readOnly,
 					disabled,
-					onRemove
-				}, () => item);
-			}), 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);
-				}
-			})]))), 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);
+					}
+				})])
+			})), 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
 			})]), h(Combobox.HiddenInput, {
 				value: current,
 				valuesDivider: props.hiddenInputValuesDivider,
@@ -30551,7 +30322,7 @@ var ColorInput = defineComponent({
 		}
 	},
 	emits: ["update:modelValue"],
-	setup(props, { attrs, emit }) {
+	setup(props, { attrs, emit, slots }) {
 		const internal = ref(props.defaultValue);
 		const current = () => props.modelValue ?? props.value ?? internal.value;
 		const controlled = () => props.modelValue !== void 0 || props.value !== void 0;
@@ -30621,8 +30392,8 @@ var ColorInput = 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;
@@ -30637,7 +30408,7 @@ var ColorInput = defineComponent({
 					opened.value = false;
 					attrs.onBlur?.(event);
 				}
-			})), h(Popover.Dropdown, {
+			}, slots)), h(Popover.Dropdown, {
 				class: ColorInput_module_default.dropdown,
 				onMousedown: (event) => event.preventDefault()
 			}, () => h(ColorPicker, {
@@ -30873,6 +30644,7 @@ var TreeSelectOption = defineComponent({
 var TreeSelect = defineComponent({
 	name: "TreeSelect",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		data: {
 			type: Array,
@@ -30968,7 +30740,7 @@ var TreeSelect = defineComponent({
 		chevronAriaLabels: Object
 	},
 	emits: ["update:modelValue", "update:searchValue"],
-	setup(props, { attrs, emit }) {
+	setup(props, { attrs, emit, slots }) {
 		const isMulti = () => props.mode !== "single";
 		const internal = ref(props.defaultValue !== void 0 ? props.defaultValue : isMulti() ? [] : null);
 		const current = () => props.modelValue ?? props.value ?? internal.value;
@@ -31070,6 +30842,8 @@ var TreeSelect = 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);
@@ -31079,7 +30853,7 @@ var TreeSelect = defineComponent({
 			const rightSection = canClear ? h(Combobox.ClearButton, {
 				...attrs.clearButtonProps,
 				onClick: clear
-			}) : attrs.rightSection ?? h(Combobox.Chevron, {
+			}) : attrs.rightSection !== void 0 || slots.rightSection ? attrs.rightSection : h(Combobox.Chevron, {
 				size: attrs.size ?? "sm",
 				error: attrs.error
 			});
@@ -31147,7 +30921,7 @@ var TreeSelect = 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();
@@ -31169,7 +30943,7 @@ var TreeSelect = defineComponent({
 					lineGuides,
 					withLines: props.withLines,
 					onToggleExpand: toggleExpand,
-					renderNode: props.renderNode,
+					renderNode,
 					chevronAriaLabels: props.chevronAriaLabels
 				});
 			});
@@ -31180,7 +30954,7 @@ var TreeSelect = defineComponent({
 					maxHeight: typeof props.maxDropdownHeight === "number" ? `${props.maxDropdownHeight}px` : props.maxDropdownHeight,
 					overflowY: "auto"
 				}, props.scrollAreaProps?.style]
-			}, treeOptions) : props.nothingFoundMessage != null ? h(Combobox.Empty, null, () => props.nothingFoundMessage) : null;
+			}, treeOptions) : nothingFound != null ? h(Combobox.Empty, null, () => nothingFound) : null;
 			return [h(Combobox, {
 				store: combobox,
 				readOnly,
@@ -31208,6 +30982,6 @@ Object.assign(TreeSelect, { classes: {
 	...TreeSelect_module_default
 } });
 //#endregion
-export { Accordion, AccordionChevron, AccordionControl, AccordionItem, AccordionPanel, ActionIcon, ActionIconGroup, ActionIconGroupSection, Affix, Alert, AlphaSlider, Anchor, AngleSlider, AppShell, AppShellAside, AppShellFooter, AppShellHeader, AppShellMain, AppShellNavbar, AppShellSection, AspectRatio, Autocomplete, Avatar, AvatarGroup, AvatarGroupContextKey, BackgroundImage, Badge, Bars, Blockquote, Box, Breadcrumbs, Burger, Button, ButtonGroup, ButtonGroupSection, Card, CardSection, Center, CheckIcon, Checkbox, CheckboxCard, CheckboxGroup, CheckboxIcon, CheckboxIndicator, Chip, ChipGroup, CloseButton, CloseIcon, Code, Collapse, ColorInput, ColorPicker, ColorSlider, ColorSwatch, Combobox, ComboboxChevron, ComboboxClearButton, ComboboxDropdown, ComboboxDropdownTarget, ComboboxEmpty, ComboboxEventsTarget, ComboboxFooter, ComboboxGroup, ComboboxHeader, ComboboxHiddenInput, ComboboxOption, ComboboxOptions, ComboboxSearch, ComboboxTarget, Container, CopyButton, DEFAULT_COLORS, DEFAULT_THEME, Dialog, DirectionContextKey, DirectionProvider, Divider, Dots, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerHeader, DrawerOverlay, DrawerRoot, DrawerStack, DrawerTitle, FLEX_STYLE_PROPS_DATA, Fieldset, FileButton, FileInput, FlatTreeNode, Flex, FloatingIndicator, FloatingWindow, FocusTrap, FocusTrapInitialFocus, Grid, GridCol, Group, HeadlessMantineProvider, Highlight, HoverCard, HoverCardDropdown, HoverCardGroup, HoverCardTarget, HueSlider, INVALID_PRIMARY_COLOR_ERROR, INVALID_PRIMARY_SHADE_ERROR, Image, Indicator, InlineStyles, Input, InputBase, InputClearButton, InputClearSection, InputDescription, InputError, InputLabel, InputPlaceholder, InputWrapper, JsonInput, Kbd, List, ListItem, Loader, LoadingOverlay, MantineClasses, MantineContextKey, MantineCssVariables, MantineProvider, MantineThemeKey, MantineThemeProvider, Mark, Marquee, MaskInput, Menu, MenuCheckboxGroup, MenuCheckboxItem, MenuContextMenu, MenuDivider, MenuDropdown, MenuItem, MenuLabel, MenuRadioGroup, MenuRadioItem, MenuSearch, MenuSub, MenuSubDropdown, MenuSubItem, MenuSubTarget, MenuTarget, Modal, ModalBase, ModalBaseBody, ModalBaseCloseButton, ModalBaseContent, ModalBaseHeader, ModalBaseOverlay, ModalBaseTitle, ModalBody, ModalCloseButton, ModalContent, ModalHeader, ModalOverlay, ModalRoot, ModalTitle, MultiSelect, NativeScrollArea, NativeSelect, NativeSelectOption, NavLink, Notification, NumberFormatter, NumberInput, NumberInputChevron, OptionalPortal, OptionsDropdown, Oval, OverflowList, Overlay, Pagination, PaginationControl, PaginationDots, PaginationFirst, PaginationItems, PaginationItemsGroup, PaginationLabel, PaginationLast, PaginationNext, PaginationPrevious, PaginationRoot, Paper, PasswordInput, PasswordToggleIcon, Pill, PillGroup, PillsInput, PillsInputField, PinInput, Popover, PopoverContextMenu, PopoverDropdown, PopoverTarget, Portal, Progress, ProgressLabel, ProgressRoot, ProgressSection, Radio, RadioCard, RadioGroup, RadioIcon, RadioIndicator, RangeSlider, Rating, RingProgress, RollingNumber, STYLE_PROPS_DATA, ScrollArea, ScrollAreaAutosize, Scroller, SegmentedControl, Select, SemiCircleProgress, SimpleGrid, Skeleton, Slider, Space, Splitter, SplitterPane, Spoiler, Stack, Stepper, StepperCompleted, StepperStep, Switch, SwitchGroup, Table, TableCaption, TableDataRenderer, TableOfContents, TableScrollContainer, TableTbody, TableTd, TableTfoot, TableTh, TableThead, TableTr, Tabs, TabsList, TabsPanel, TabsTab, TagsInput, Text, TextInput, Textarea, ThemeIcon, Timeline, TimelineItem, Title, Tooltip, TooltipFloating, TooltipGroup, Transition, Tree, TreeSelect, TreeSelectOption, Typography, UnstyledButton, VisuallyHidden, alpha, buildValue, camelToKebabCase, colorsTuple, convertCssVariables, convertHsvaTo, createEventHandler, createProviderColorScheme, createSafeContext, createSafeInjectionContext, createVarsResolver, cssVariablesObjectToString, darken, deepMerge, defaultCssVariablesResolver, defaultLoaders, defaultOptionsFilter, defaultTreeNodeFilter, defaultVariantColorsResolver, em, factory, factory as polymorphicFactory, filterProps, filterTreeData, findClosestNumber, flattenTreeData, foldAccents, formatNumber, getVariables as getAppShellVariables, getAutoContrastValue, getBaseValue, getBreakpointValue, getContrastColor, getDefaultZIndex, getDigitParts, getFontSize, getGradient, getInitials, getInitialsColor, getLineHeight, getMarkColor, getMergedVariables, getOptionsLockup, getParsedComboboxData, getParsedNativeSelectData, getPositionVariables, getPrimaryContrastColor, getPrimaryShade, getRadius, getRenderSlots, getRenderSlotsFromValues, getSafeId, getShadow, getSize, getSortedBreakpoints, getSpacing, getSplittedTags, getThemeColor, getTitleSize, getTreeExpandedState, hashStyleProps, highlighter, hsvaToHex, hsvaToHexa, hsvaToHsl, hsvaToRgba, hsvaToRgbaObject, isColorValid, isEmptyComboboxData, isLightColor, isNumberLike, isOptionsGroup, isPrimitive, isVirtualColor, keys, lighten, luminance, memoize, mergeAsyncChildren, mergeMantineTheme, movePill, moveTreeNode, noop, parseColor, parseHex, parseHexa, parseHsla, parseHue, parseRgba, parseStyleProps, parseThemeColor, polymorphicProps, provideGridContext, provideListContext, provideMantineContext, provideMantineTheme, providePillsInputContext, px, rem, renderPolymorphic, resolveColorScheme, rgba, round, toRgba, useAccordionContext, useAccordionItemContext, useAppShellContext, useAvatarGroupContext, useCheckboxCardContext, useCheckboxGroupContext, useChipGroupContext, useCombobox, useComboboxContext, useComboboxTargetProps, useComputedColorScheme, useDirection, useDrawersStack, useFloatingIndicator, useForwardedRef, useGridContext, useHoverCardContext, useInputContext, useInputWrapperContext, useListContext, useMantineClassNamesPrefix, useMantineColorScheme, useMantineContext, useMantineCssVariablesResolver, useMantineDeduplicateInlineStyles, useMantineEnv, useMantineIsHeadless, useMantineStyleNonce, useMantineTheme, useMantineWithStaticClasses, useMenuContext, usePaginationContext, usePillGroupContext, usePillsInputContext, usePillsReorder, useProgressContext, useProps, useRadioCardContext, useRadioGroupContext, useRandomClassName, useSafeMantineTheme, useScrollAreaContext, useSplitterContext, useStepperContext, useStyles, useSwitchGroupContext, useTabsContext, useTree, useVirtualizedCombobox, validateJson, validateMantineTheme, validateOptions, virtualColor, withBoxProps };
+export { Accordion, AccordionChevron, AccordionControl, AccordionItem, AccordionPanel, ActionIcon, ActionIconGroup, ActionIconGroupSection, Affix, Alert, AlphaSlider, Anchor, AngleSlider, AppShell, AppShellAside, AppShellFooter, AppShellHeader, AppShellMain, AppShellNavbar, AppShellSection, AspectRatio, Autocomplete, Avatar, AvatarGroup, AvatarGroupContextKey, BackgroundImage, Badge, Bars, Blockquote, Box, Breadcrumbs, Burger, Button, ButtonGroup, ButtonGroupSection, Card, CardSection, Center, CheckIcon, Checkbox, CheckboxCard, CheckboxGroup, CheckboxIcon, CheckboxIndicator, Chip, ChipGroup, CloseButton, CloseIcon, Code, Collapse, ColorInput, ColorPicker, ColorSlider, ColorSwatch, Combobox, ComboboxChevron, ComboboxClearButton, ComboboxDropdown, ComboboxDropdownTarget, ComboboxEmpty, ComboboxEventsTarget, ComboboxFooter, ComboboxGroup, ComboboxHeader, ComboboxHiddenInput, ComboboxOption, ComboboxOptions, ComboboxSearch, ComboboxTarget, Container, CopyButton, DEFAULT_COLORS, DEFAULT_THEME, Dialog, DirectionContextKey, DirectionProvider, Divider, Dots, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerHeader, DrawerOverlay, DrawerRoot, DrawerStack, DrawerTitle, FLEX_STYLE_PROPS_DATA, Fieldset, FileButton, FileInput, FlatTreeNode, Flex, FloatingIndicator, FloatingWindow, FocusTrap, FocusTrapInitialFocus, Grid, GridCol, Group, HeadlessMantineProvider, Highlight, HoverCard, HoverCardDropdown, HoverCardGroup, HoverCardTarget, HueSlider, INVALID_PRIMARY_COLOR_ERROR, INVALID_PRIMARY_SHADE_ERROR, Image, Indicator, InlineStyles, Input, InputBase, InputClearButton, InputClearSection, InputDescription, InputError, InputLabel, InputPlaceholder, InputWrapper, JsonInput, Kbd, List, ListItem, Loader, LoadingOverlay, MantineClasses, MantineContextKey, MantineCssVariables, MantineProvider, MantineThemeKey, MantineThemeProvider, Mark, Marquee, MaskInput, Menu, MenuCheckboxGroup, MenuCheckboxItem, MenuContextMenu, MenuDivider, MenuDropdown, MenuItem, MenuLabel, MenuRadioGroup, MenuRadioItem, MenuSearch, MenuSub, MenuSubDropdown, MenuSubItem, MenuSubTarget, MenuTarget, Modal, ModalBase, ModalBaseBody, ModalBaseCloseButton, ModalBaseContent, ModalBaseHeader, ModalBaseOverlay, ModalBaseTitle, ModalBody, ModalCloseButton, ModalContent, ModalHeader, ModalOverlay, ModalRoot, ModalTitle, MultiSelect, NativeScrollArea, NativeSelect, NativeSelectOption, NavLink, Notification, NumberFormatter, NumberInput, NumberInputChevron, OptionalPortal, OptionsDropdown, Oval, OverflowList, Overlay, Pagination, PaginationControl, PaginationDots, PaginationFirst, PaginationItems, PaginationItemsGroup, PaginationLabel, PaginationLast, PaginationNext, PaginationPrevious, PaginationRoot, Paper, PasswordInput, PasswordToggleIcon, Pill, PillGroup, PillsInput, PillsInputField, PinInput, Popover, PopoverContextMenu, PopoverDropdown, PopoverTarget, Portal, Progress, ProgressLabel, ProgressRoot, ProgressSection, Radio, RadioCard, RadioGroup, RadioIcon, RadioIndicator, RangeSlider, Rating, RingProgress, RollingNumber, STYLE_PROPS_DATA, ScrollArea, ScrollAreaAutosize, Scroller, SegmentedControl, Select, SemiCircleProgress, SimpleGrid, Skeleton, Slider, Space, Splitter, SplitterPane, Spoiler, Stack, Stepper, StepperCompleted, StepperStep, Switch, SwitchGroup, Table, TableCaption, TableDataRenderer, TableOfContents, TableScrollContainer, TableTbody, TableTd, TableTfoot, TableTh, TableThead, TableTr, Tabs, TabsList, TabsPanel, TabsTab, TagsInput, Text, TextInput, Textarea, ThemeIcon, Timeline, TimelineItem, Title, Tooltip, TooltipFloating, TooltipGroup, Transition, Tree, TreeSelect, TreeSelectOption, Typography, UnstyledButton, VisuallyHidden, alpha, buildValue, camelToKebabCase, colorsTuple, convertCssVariables, convertHsvaTo, createEventHandler, createProviderColorScheme, createSafeContext, createSafeInjectionContext, createVarsResolver, cssVariablesObjectToString, darken, deepMerge, defaultCssVariablesResolver, defaultLoaders, defaultOptionsFilter, defaultTreeNodeFilter, defaultVariantColorsResolver, em, factory, factory as polymorphicFactory, filterProps, filterTreeData, findClosestNumber, flattenTreeData, foldAccents, formatNumber, getVariables as getAppShellVariables, getAutoContrastValue, getBaseValue, getBreakpointValue, getContrastColor, getDefaultZIndex, getDigitParts, getFontSize, getGradient, getInitials, getInitialsColor, getLineHeight, getMarkColor, getMergedVariables, getOptionsLockup, getParsedComboboxData, getParsedNativeSelectData, getPositionVariables, getPrimaryContrastColor, getPrimaryShade, getRadius, getRenderSlots, getRenderSlotsFromValues, getSafeId, getShadow, getSize, getSortedBreakpoints, getSpacing, getSplittedTags, getThemeColor, getTitleSize, getTreeExpandedState, hasNode, hashStyleProps, highlighter, hsvaToHex, hsvaToHexa, hsvaToHsl, hsvaToRgba, hsvaToRgbaObject, isColorValid, isEmptyComboboxData, isLightColor, isNumberLike, isOptionsGroup, isPrimitive, isVirtualColor, keys, lighten, luminance, memoize, mergeAsyncChildren, mergeMantineTheme, movePill, moveTreeNode, noop, parseColor, parseHex, parseHexa, parseHsla, parseHue, parseRgba, parseStyleProps, parseThemeColor, polymorphicProps, provideGridContext, provideListContext, provideMantineContext, provideMantineTheme, providePillsInputContext, px, rem, renderPolymorphic, resolveColorScheme, resolveNode, rgba, round, toRgba, useAccordionContext, useAccordionItemContext, useAppShellContext, useAvatarGroupContext, useCheckboxCardContext, useCheckboxGroupContext, useChipGroupContext, useCombobox, useComboboxContext, useComboboxTargetProps, useComputedColorScheme, useDirection, useDrawersStack, useFloatingIndicator, useForwardedRef, useGridContext, useHoverCardContext, useInputContext, useInputWrapperContext, useListContext, useMantineClassNamesPrefix, useMantineColorScheme, useMantineContext, useMantineCssVariablesResolver, useMantineDeduplicateInlineStyles, useMantineEnv, useMantineIsHeadless, useMantineStyleNonce, useMantineTheme, useMantineWithStaticClasses, useMenuContext, usePaginationContext, usePillGroupContext, usePillsInputContext, usePillsReorder, useProgressContext, useProps, useRadioCardContext, useRadioGroupContext, useRandomClassName, useSafeMantineTheme, useScrollAreaContext, useSplitterContext, useStepperContext, useStyles, useSwitchGroupContext, useTabsContext, useTree, useVirtualizedCombobox, validateJson, validateMantineTheme, validateOptions, virtualColor, withBoxProps };
 
 //# sourceMappingURL=index.mjs.map