@mantine-vue/notifications 3.0.0 → 3.2.0

package/esm/index.mjs

@@ -1,21 +1,28 @@
 import { createStore } from "@mantine-vue/store";
-import { TransitionGroup, computed, defineComponent, h, onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { Fragment, TransitionGroup, cloneVNode, computed, createBlock, createElementBlock, createVNode, defineComponent, isVNode, mergeProps, onBeforeUnmount, onMounted, openBlock, ref, renderList, resolveDynamicComponent, unref, useAttrs, watch, withCtx } from "vue";
 import { Box, Notification, OptionalPortal, createVarsResolver, getDefaultZIndex, rem, useMantineTheme, useProps, useStyles } from "@mantine-vue/core";
 import { useReducedMotion } from "@mantine-vue/hooks";
 //#region src/notifications.store.ts
 function randomId() {
 	return `mantine-${Math.random().toString(36).slice(2, 11)}`;
 }
+var notificationSequence = 0;
 function getDistributedNotifications(data, defaultPosition, limit) {
 	const queue = [];
 	const notifications = [];
-	const count = {};
+	const groups = /* @__PURE__ */ new Map();
 	for (const item of data) {
 		const position = item.position || defaultPosition;
-		count[position] = count[position] || 0;
-		count[position] += 1;
-		if (count[position] <= limit) notifications.push(item);
-		else queue.push(item);
+		const group = groups.get(position);
+		if (group) group.push(item);
+		else groups.set(position, [item]);
+	}
+	for (const group of groups.values()) {
+		group.sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0) || (a.__sequence ?? 0) - (b.__sequence ?? 0));
+		group.forEach((item, index) => {
+			if (index < limit) notifications.push(item);
+			else queue.push(item);
+		});
 	}
 	return {
 		notifications,
@@ -32,7 +39,12 @@ var notificationsStore = createNotificationsStore();
 var useNotifications = (store = notificationsStore) => store.value;
 function updateNotificationsState(store, update) {
 	const state = store.getState();
-	const updated = getDistributedNotifications(update([...state.notifications, ...state.queue]), state.defaultPosition, state.limit);
+	const notifications = update([...state.notifications, ...state.queue]);
+	for (const item of notifications) if (item.__sequence === void 0) {
+		item.__sequence = notificationSequence;
+		notificationSequence += 1;
+	}
+	const updated = getDistributedNotifications(notifications, state.defaultPosition, state.limit);
 	store.setState({
 		notifications: updated.notifications,
 		queue: updated.queue,
@@ -72,7 +84,8 @@ function cleanNotifications(store = notificationsStore) {
 	updateNotificationsState(store, () => []);
 }
 function cleanNotificationsQueue(store = notificationsStore) {
-	updateNotificationsState(store, (notifications) => notifications.slice(0, store.getState().limit));
+	const { defaultPosition, limit } = store.getState();
+	updateNotificationsState(store, (notifications) => getDistributedNotifications(notifications, defaultPosition, limit).notifications);
 }
 var notifications = {
 	show: showNotification,
@@ -83,73 +96,6 @@ var notifications = {
 	updateState: updateNotificationsState
 };
 //#endregion
-//#region src/get-grouped-notifications/get-grouped-notifications.ts
-var positions = [
-	"bottom-center",
-	"bottom-left",
-	"bottom-right",
-	"top-center",
-	"top-left",
-	"top-right"
-];
-function getGroupedNotifications(notifications, defaultPosition) {
-	return notifications.reduce((acc, notification) => {
-		acc[notification.position || defaultPosition].push(notification);
-		return acc;
-	}, positions.reduce((acc, item) => {
-		acc[item] = [];
-		return acc;
-	}, {}));
-}
-//#endregion
-//#region src/get-notification-state-styles.ts
-var transforms = {
-	left: "translateX(-100%)",
-	right: "translateX(100%)",
-	"top-center": "translateY(-100%)",
-	"bottom-center": "translateY(100%)"
-};
-var noTransform = {
-	left: "translateX(0)",
-	right: "translateX(0)",
-	"top-center": "translateY(0)",
-	"bottom-center": "translateY(0)"
-};
-function toCssLength(value) {
-	return typeof value === "number" ? `${value}px` : value;
-}
-function getNotificationStateStyles({ state, maxHeight, position, transitionDuration }) {
-	const [vertical, horizontal] = position.split("-");
-	const property = horizontal === "center" ? `${vertical}-center` : horizontal;
-	const commonStyles = {
-		opacity: 0,
-		maxHeight: toCssLength(maxHeight),
-		transform: transforms[property],
-		transitionDuration: `${transitionDuration}ms, ${transitionDuration}ms, ${transitionDuration}ms`,
-		transitionTimingFunction: "cubic-bezier(.51,.3,0,1.21), cubic-bezier(.51,.3,0,1.21), linear",
-		transitionProperty: "opacity, transform, max-height"
-	};
-	const inState = {
-		opacity: 1,
-		transform: noTransform[property]
-	};
-	const outState = {
-		opacity: 0,
-		maxHeight: toCssLength(0),
-		transform: transforms[property]
-	};
-	const transitionStyles = {
-		entering: inState,
-		entered: inState,
-		exiting: outState,
-		exited: outState
-	};
-	return {
-		...commonStyles,
-		...transitionStyles[state]
-	};
-}
-//#endregion
 //#region src/get-auto-close/get-auto-close.ts
 function getAutoClose(autoClose, notificationAutoClose) {
 	if (typeof notificationAutoClose === "number") return notificationAutoClose;
@@ -157,75 +103,31 @@ function getAutoClose(autoClose, notificationAutoClose) {
 	return autoClose;
 }
 //#endregion
-//#region src/NotificationContainer.ts
+//#region src/components/NotificationContainer/NotificationContainer.vue?vue&type=script&setup=true&lang.ts
 var SCROLL_DISMISS_RESET_TIMEOUT = 120;
-function normalizeStyle(style) {
-	if (!style) return {};
-	if (Array.isArray(style)) return style.reduce((acc, item) => Object.assign(acc, normalizeStyle(item)), {});
-	return typeof style === "object" ? style : {};
-}
-function renderContent(value) {
-	return typeof value === "function" ? value() : value;
-}
-function getNotificationProps(data) {
-	const omittedKeys = new Set([
-		"autoClose",
-		"message",
-		"allowClose",
-		"position",
-		"style",
-		"withCloseButton",
-		"onOpen",
-		"onClose",
-		"id"
-	]);
-	return Object.entries(data).reduce((acc, [key, value]) => {
-		if (!omittedKeys.has(key)) acc[key] = value;
-		return acc;
-	}, {});
-}
-var NotificationContainer = defineComponent({
+//#endregion
+//#region src/components/NotificationContainer/NotificationContainer.vue
+var NotificationContainer_default = /* @__PURE__ */ defineComponent({
 	name: "NotificationContainer",
 	inheritAttrs: false,
+	__name: "NotificationContainer",
 	props: {
-		data: {
-			type: Object,
-			required: true
-		},
-		autoClose: {
-			type: [Boolean, Number],
-			required: true
-		},
-		transitionDuration: {
-			type: Number,
-			required: true
-		},
-		allowDragDismiss: {
-			type: Boolean,
-			required: true
-		},
-		allowScrollDismiss: {
-			type: Boolean,
-			required: true
-		},
-		paused: {
-			type: Boolean,
-			required: true
-		},
-		onHide: {
-			type: Function,
-			required: true
-		},
-		onHoverStart: {
-			type: Function,
-			default: void 0
-		},
-		onHoverEnd: {
-			type: Function,
-			default: void 0
-		}
+		data: {},
+		autoClose: { type: [Number, Boolean] },
+		transitionDuration: {},
+		allowDragDismiss: { type: Boolean },
+		allowScrollDismiss: { type: Boolean },
+		paused: { type: Boolean }
 	},
-	setup(props, { attrs }) {
+	emits: [
+		"hide",
+		"hoverStart",
+		"hoverEnd"
+	],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const attrs = useAttrs();
 		const notificationRef = ref(null);
 		const offset = ref(0);
 		const dismissed = ref(false);
@@ -240,83 +142,122 @@ var NotificationContainer = defineComponent({
 		let scrollDismissTimeout = -1;
 		const autoCloseDuration = computed(() => getAutoClose(props.autoClose, props.data.autoClose));
 		const isCloseDisabled = computed(() => props.data.allowClose === false);
+		function normalizeStyle(style) {
+			if (!style) return {};
+			if (Array.isArray(style)) return style.reduce((accumulator, item) => Object.assign(accumulator, normalizeStyle(item)), {});
+			return typeof style === "object" ? style : {};
+		}
+		function getNotificationProps() {
+			const omittedKeys = new Set([
+				"autoClose",
+				"message",
+				"allowClose",
+				"position",
+				"style",
+				"withCloseButton",
+				"onOpen",
+				"onClose",
+				"id"
+			]);
+			return Object.fromEntries(Object.entries(props.data).filter(([key]) => !omittedKeys.has(key)).map(([key, value]) => [key, cloneRenderable(value)]));
+		}
+		function cloneRenderable(value) {
+			if (isVNode(value)) return cloneVNode(value);
+			if (Array.isArray(value)) return value.map(cloneRenderable);
+			return value;
+		}
+		const renderMessage = () => cloneRenderable(typeof props.data.message === "function" ? props.data.message() : props.data.message);
+		const notificationStyle = computed(() => {
+			const baseStyle = {
+				...normalizeStyle(attrs.style),
+				...normalizeStyle(props.data.style)
+			};
+			const baseOpacity = typeof baseStyle.opacity === "number" ? baseStyle.opacity : 1;
+			const swipeOpacity = dismissed.value ? 0 : 1 - Math.min(Math.abs(offset.value) / 200, 1) * .6;
+			const transitionDuration = baseStyle.transitionDuration ?? `${props.transitionDuration}ms, ${props.transitionDuration}ms, ${props.transitionDuration}ms`;
+			return {
+				...baseStyle,
+				"--notifications-state-transform": typeof baseStyle.transform === "string" ? baseStyle.transform : "translateX(0)",
+				"--notifications-state-opacity": String(baseOpacity),
+				"--notifications-swipe-offset": `${offset.value}px`,
+				"--notifications-swipe-opacity": String(swipeOpacity),
+				transform: "var(--notifications-state-transform) translate3d(var(--notifications-swipe-offset), 0, 0)",
+				opacity: "calc(var(--notifications-state-opacity) * var(--notifications-swipe-opacity))",
+				transitionDuration: active.value || scrollDismissActive.value ? "0ms, 0ms, 0ms" : transitionDuration,
+				cursor: "default",
+				touchAction: "pan-y"
+			};
+		});
 		const cancelAutoClose = () => window.clearTimeout(autoCloseTimeout);
 		const cancelHide = () => window.clearTimeout(hideTimeout);
 		const cancelScrollDismissReset = () => window.clearTimeout(scrollDismissTimeout);
-		const setSwipeOffset = (value) => {
-			offset.value = value;
-		};
-		const handleHide = () => {
-			props.onHide(props.data.id);
+		function handleHide() {
+			emit("hide", props.data.id);
 			cancelAutoClose();
 			cancelHide();
 			cancelScrollDismissReset();
-		};
-		const handleAutoClose = () => {
+		}
+		function handleAutoClose() {
 			if (typeof window === "undefined" || dismissed.value || active.value || props.paused || hovered.value || typeof autoCloseDuration.value !== "number") return;
 			cancelAutoClose();
 			autoCloseTimeout = window.setTimeout(handleHide, autoCloseDuration.value);
-		};
-		const getExitOffset = (direction) => {
+		}
+		function getExitOffset(direction) {
 			return direction * ((notificationRef.value?.offsetWidth ?? 440) + 40);
-		};
-		const shouldDismiss = (movement, velocity) => {
-			const width = notificationRef.value?.offsetWidth ?? 440;
-			return Math.abs(movement) > width * .35 || velocity > .5;
-		};
-		const resetSwipe = () => {
+		}
+		function shouldDismiss(movement, velocity) {
+			return Math.abs(movement) > (notificationRef.value?.offsetWidth ?? 440) * .35 || velocity > .5;
+		}
+		function resetSwipe() {
 			cancelScrollDismissReset();
 			scrollDismissActive.value = false;
-			setSwipeOffset(0);
-		};
-		const dismissNotification = (direction) => {
+			offset.value = 0;
+		}
+		function dismissNotification(direction) {
 			dismissDirection.value = direction;
 			dismissed.value = true;
 			scrollDismissActive.value = false;
-			setSwipeOffset(getExitOffset(direction));
+			offset.value = getExitOffset(direction);
 			cancelAutoClose();
 			cancelHide();
 			cancelScrollDismissReset();
 			hideTimeout = window.setTimeout(handleHide, props.transitionDuration);
-		};
-		const scheduleScrollDismissReset = () => {
+		}
+		function scheduleScrollDismissReset() {
 			cancelScrollDismissReset();
 			scrollDismissTimeout = window.setTimeout(() => {
 				scrollDismissActive.value = false;
-				setSwipeOffset(0);
+				offset.value = 0;
 				handleAutoClose();
 			}, SCROLL_DISMISS_RESET_TIMEOUT);
-		};
-		const handlePointerMove = (event) => {
-			if (!active.value || dismissed.value) return;
-			setSwipeOffset(event.clientX - startX.value);
-		};
-		const finishPointerDrag = (event) => {
+		}
+		function handlePointerMove(event) {
+			if (active.value && !dismissed.value) offset.value = event.clientX - startX.value;
+		}
+		function finishPointerDrag(event) {
 			if (!active.value) return;
 			active.value = false;
-			window.removeEventListener("pointermove", handlePointerMove);
-			window.removeEventListener("pointerup", finishPointerDrag);
-			window.removeEventListener("pointercancel", cancelPointerDragEvent);
+			removePointerListeners();
 			const movement = event.clientX - startX.value;
-			const elapsed = Math.max(Date.now() - startTime.value, 1);
-			const velocity = Math.abs(movement) / elapsed;
-			const direction = movement === 0 ? 1 : movement > 0 ? 1 : -1;
-			if (shouldDismiss(movement, velocity)) dismissNotification(direction);
+			if (shouldDismiss(movement, Math.abs(movement) / Math.max(Date.now() - startTime.value, 1))) dismissNotification(movement >= 0 ? 1 : -1);
 			else {
-				setSwipeOffset(0);
+				offset.value = 0;
 				handleAutoClose();
 			}
-		};
-		function cancelPointerDrag(shouldRestartAutoClose = true) {
-			active.value = false;
+		}
+		function removePointerListeners() {
 			window.removeEventListener("pointermove", handlePointerMove);
 			window.removeEventListener("pointerup", finishPointerDrag);
 			window.removeEventListener("pointercancel", cancelPointerDragEvent);
-			setSwipeOffset(0);
-			if (shouldRestartAutoClose) handleAutoClose();
+		}
+		function cancelPointerDrag(restartAutoClose = true) {
+			active.value = false;
+			removePointerListeners();
+			offset.value = 0;
+			if (restartAutoClose) handleAutoClose();
 		}
 		const cancelPointerDragEvent = () => cancelPointerDrag();
-		const handlePointerDown = (event) => {
+		function handlePointerDown(event) {
 			if (!props.allowDragDismiss || isCloseDisabled.value || dismissed.value || event.button !== 0) return;
 			cancelAutoClose();
 			active.value = true;
@@ -325,47 +266,40 @@ var NotificationContainer = defineComponent({
 			window.addEventListener("pointermove", handlePointerMove);
 			window.addEventListener("pointerup", finishPointerDrag);
 			window.addEventListener("pointercancel", cancelPointerDragEvent);
-		};
-		const handleWheel = (event) => {
+		}
+		function handleWheel(event) {
 			if (dismissed.value || active.value) return;
-			const isDocumentEvent = event.currentTarget === document;
-			if (!isDocumentEvent && !hovered.value) return;
-			const { deltaX, deltaY } = event;
-			if (Math.abs(deltaX) <= Math.abs(deltaY) || deltaX === 0) return;
+			const documentEvent = event.currentTarget === document;
+			if (!documentEvent && !hovered.value || Math.abs(event.deltaX) <= Math.abs(event.deltaY)) return;
 			if (!props.allowScrollDismiss || isCloseDisabled.value) return;
-			if (!isDocumentEvent) {
+			if (!documentEvent) {
 				event.preventDefault();
 				event.stopPropagation();
 			}
 			cancelAutoClose();
 			scrollDismissActive.value = true;
-			const nextOffset = offset.value - deltaX;
-			const direction = nextOffset > 0 ? 1 : -1;
-			if (shouldDismiss(nextOffset, 0)) {
-				dismissNotification(direction);
-				return;
+			const nextOffset = offset.value - event.deltaX;
+			if (shouldDismiss(nextOffset, 0)) dismissNotification(nextOffset > 0 ? 1 : -1);
+			else {
+				offset.value = nextOffset;
+				scheduleScrollDismissReset();
 			}
-			setSwipeOffset(nextOffset);
-			scheduleScrollDismissReset();
-		};
-		const handleMouseEnter = () => {
+		}
+		function handleMouseEnter() {
 			hovered.value = true;
 			cancelAutoClose();
-			props.onHoverStart?.();
-		};
-		const handleMouseLeave = () => {
+			emit("hoverStart");
+		}
+		function handleMouseLeave() {
 			hovered.value = false;
 			if (!scrollDismissActive.value) {
 				resetSwipe();
 				handleAutoClose();
 			}
-			props.onHoverEnd?.();
-		};
-		const handleResize = () => {
-			if (dismissed.value) setSwipeOffset(getExitOffset(dismissDirection.value));
-		};
-		watch(() => scrollDismissActive.value, (value, _, onCleanup) => {
-			if (!value) return;
+			emit("hoverEnd");
+		}
+		watch(scrollDismissActive, (enabled, _, onCleanup) => {
+			if (!enabled) return;
 			document.addEventListener("wheel", handleWheel, { passive: false });
 			onCleanup(() => document.removeEventListener("wheel", handleWheel));
 		});
@@ -383,7 +317,11 @@ var NotificationContainer = defineComponent({
 			notificationRef.value?.addEventListener("wheel", handleWheel, { passive: false });
 			window.addEventListener("resize", handleResize);
 		});
+		function handleResize() {
+			if (dismissed.value) offset.value = getExitOffset(dismissDirection.value);
+		}
 		onBeforeUnmount(() => {
+			if (hovered.value) emit("hoverEnd");
 			cancelAutoClose();
 			cancelHide();
 			cancelScrollDismissReset();
@@ -391,157 +329,149 @@ var NotificationContainer = defineComponent({
 			notificationRef.value?.removeEventListener("wheel", handleWheel);
 			window.removeEventListener("resize", handleResize);
 		});
-		return () => {
-			const resolvedAttrsStyle = normalizeStyle(attrs.style);
-			const resolvedDataStyle = normalizeStyle(props.data.style);
-			const baseStyle = {
-				...resolvedAttrsStyle,
-				...resolvedDataStyle
-			};
-			const baseOpacity = typeof baseStyle.opacity === "number" ? baseStyle.opacity : 1;
-			const swipeOpacity = dismissed.value ? 0 : 1 - Math.min(Math.abs(offset.value) / 200, 1) * .6;
-			const resolvedTransitionDuration = baseStyle.transitionDuration ?? `${props.transitionDuration}ms, ${props.transitionDuration}ms, ${props.transitionDuration}ms`;
-			const notificationStyle = {
-				...baseStyle,
-				"--notifications-state-transform": typeof baseStyle.transform === "string" ? baseStyle.transform : "translateX(0)",
-				"--notifications-state-opacity": String(baseOpacity),
-				"--notifications-swipe-offset": `${offset.value}px`,
-				"--notifications-swipe-opacity": String(swipeOpacity),
-				transform: "var(--notifications-state-transform) translate3d(var(--notifications-swipe-offset), 0, 0)",
-				opacity: "calc(var(--notifications-state-opacity) * var(--notifications-swipe-opacity))",
-				transitionDuration: active.value || scrollDismissActive.value ? "0ms, 0ms, 0ms" : resolvedTransitionDuration,
-				cursor: "default",
-				touchAction: "pan-y"
-			};
-			return h(Notification, {
-				...attrs,
-				...getNotificationProps(props.data),
-				ref: (node) => {
-					notificationRef.value = node?.$el ?? node;
-				},
-				style: notificationStyle,
-				withCloseButton: isCloseDisabled.value ? false : props.data.withCloseButton,
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Notification), mergeProps({
+				...unref(attrs),
+				...getNotificationProps()
+			}, {
+				ref: (node) => notificationRef.value = node?.$el ?? node,
+				style: notificationStyle.value,
+				"with-close-button": isCloseDisabled.value ? false : props.data.withCloseButton,
 				onClose: handleHide,
 				onMouseenter: handleMouseEnter,
 				onMouseleave: handleMouseLeave,
 				onPointerdown: handlePointerDown
-			}, () => renderContent(props.data.message));
+			}), {
+				default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(renderMessage)))]),
+				_: 1
+			}, 16, ["style", "with-close-button"]);
 		};
 	}
 });
+//#endregion
+//#region src/get-grouped-notifications/get-grouped-notifications.ts
+var positions = [
+	"bottom-center",
+	"bottom-left",
+	"bottom-right",
+	"top-center",
+	"top-left",
+	"top-right"
+];
+function getGroupedNotifications(notifications, defaultPosition) {
+	return notifications.reduce((acc, notification) => {
+		acc[notification.position || defaultPosition].push(notification);
+		return acc;
+	}, positions.reduce((acc, item) => {
+		acc[item] = [];
+		return acc;
+	}, {}));
+}
+//#endregion
+//#region src/get-notification-state-styles.ts
+var transforms = {
+	left: "translateX(-100%)",
+	right: "translateX(100%)",
+	"top-center": "translateY(-100%)",
+	"bottom-center": "translateY(100%)"
+};
+var noTransform = {
+	left: "translateX(0)",
+	right: "translateX(0)",
+	"top-center": "translateY(0)",
+	"bottom-center": "translateY(0)"
+};
+function toCssLength(value) {
+	return typeof value === "number" ? `${value}px` : value;
+}
+function getNotificationStateStyles({ state, maxHeight, position, transitionDuration }) {
+	const [vertical, horizontal] = position.split("-");
+	const property = horizontal === "center" ? `${vertical}-center` : horizontal;
+	const commonStyles = {
+		opacity: 0,
+		maxHeight: toCssLength(maxHeight),
+		transform: transforms[property],
+		transitionDuration: `${transitionDuration}ms, ${transitionDuration}ms, ${transitionDuration}ms`,
+		transitionTimingFunction: "cubic-bezier(.51,.3,0,1.21), cubic-bezier(.51,.3,0,1.21), linear",
+		transitionProperty: "opacity, transform, max-height"
+	};
+	const inState = {
+		opacity: 1,
+		transform: noTransform[property]
+	};
+	const outState = {
+		opacity: 0,
+		maxHeight: toCssLength(0),
+		transform: transforms[property]
+	};
+	const transitionStyles = {
+		entering: inState,
+		entered: inState,
+		exiting: outState,
+		exited: outState
+	};
+	return {
+		...commonStyles,
+		...transitionStyles[state]
+	};
+}
 var Notifications_module_default = {
 	root: "_root_1izcx_1",
 	notification: "_notification_1izcx_40"
 };
 //#endregion
-//#region src/Notifications.ts
-var defaultProps = {
-	position: "bottom-right",
-	autoClose: 4e3,
-	transitionDuration: 250,
-	allowDragDismiss: true,
-	allowScrollDismiss: true,
-	containerWidth: 440,
-	notificationMaxHeight: 200,
-	limit: 5,
-	zIndex: getDefaultZIndex("overlay"),
-	store: notificationsStore,
-	withinPortal: true,
-	pauseResetOnHover: "all"
-};
+//#region src/components/Notifications/Notifications.vue?vue&type=script&setup=true&lang.ts
 var varsResolver = createVarsResolver((_, { zIndex, containerWidth }) => ({ root: {
 	"--notifications-z-index": zIndex?.toString(),
 	"--notifications-container-width": rem(containerWidth)
 } }));
-function applyTransitionStyles(element, state, position, transitionDuration, maxHeight) {
-	Object.assign(element.style, getNotificationStateStyles({
-		state,
-		position,
-		transitionDuration,
-		maxHeight
-	}));
-}
-var NotificationsBase = defineComponent({
+//#endregion
+//#region src/components/Notifications/Notifications.ts
+var Notifications = Object.assign(/* @__PURE__ */ defineComponent({
 	name: "Notifications",
 	inheritAttrs: false,
+	__name: "Notifications",
 	props: {
-		position: {
-			type: String,
-			default: void 0
-		},
+		position: { default: "bottom-right" },
 		autoClose: {
 			type: [Number, Boolean],
-			default: void 0
-		},
-		transitionDuration: {
-			type: Number,
-			default: void 0
+			default: 4e3
 		},
+		transitionDuration: { default: 250 },
 		allowDragDismiss: {
 			type: Boolean,
-			default: void 0
+			default: true
 		},
 		allowScrollDismiss: {
 			type: Boolean,
-			default: void 0
-		},
-		containerWidth: {
-			type: [Number, String],
-			default: void 0
-		},
-		notificationMaxHeight: {
-			type: [Number, String],
-			default: void 0
-		},
-		limit: {
-			type: Number,
-			default: void 0
-		},
-		zIndex: {
-			type: [Number, String],
-			default: void 0
-		},
-		portalProps: {
-			type: Object,
-			default: void 0
-		},
-		store: {
-			type: Object,
-			default: void 0
+			default: true
 		},
+		containerWidth: { default: 440 },
+		notificationMaxHeight: { default: 200 },
+		limit: { default: 5 },
+		zIndex: { default: () => getDefaultZIndex("overlay") },
+		portalProps: {},
+		store: { default: () => notificationsStore },
 		withinPortal: {
 			type: Boolean,
-			default: void 0
-		},
-		pauseResetOnHover: {
-			type: String,
-			default: void 0
-		},
-		classNames: {
-			type: [Object, Function],
-			default: void 0
-		},
-		styles: {
-			type: [Object, Function],
-			default: void 0
+			default: true
 		},
-		vars: {
-			type: [Object, Function],
-			default: void 0
-		},
-		unstyled: {
-			type: Boolean,
-			default: false
-		}
+		pauseResetOnHover: { default: "all" },
+		classNames: {},
+		styles: {},
+		vars: {},
+		unstyled: { type: Boolean }
 	},
-	setup(rawProps, { attrs }) {
-		const props = useProps("Notifications", defaultProps, rawProps);
+	setup(__props) {
+		const rawProps = __props;
+		const attrs = useAttrs();
+		const props = useProps("Notifications", null, rawProps);
 		const theme = useMantineTheme();
 		const shouldReduceMotion = useReducedMotion();
 		const hoveredCount = ref(0);
 		const data = useNotifications(props.store);
-		const reduceMotion = computed(() => theme.value.respectReducedMotion ? shouldReduceMotion.value : false);
-		const duration = computed(() => reduceMotion.value ? 1 : props.transitionDuration);
+		const duration = computed(() => theme.value.respectReducedMotion && shouldReduceMotion.value ? 1 : props.transitionDuration);
+		const grouped = computed(() => getGroupedNotifications(data.value.notifications, props.position));
 		const getStyles = useStyles({
 			name: "Notifications",
 			classes: Notifications_module_default,
@@ -559,58 +489,81 @@ var NotificationsBase = defineComponent({
 			props.position,
 			props.store
 		], () => {
-			props.store?.setState((current) => ({
+			props.store.setState((current) => ({
 				...current,
 				limit: props.limit || 5,
 				defaultPosition: props.position
 			}));
 		}, { immediate: true });
-		const handleHoverStart = () => {
-			hoveredCount.value += 1;
-		};
-		const handleHoverEnd = () => {
-			hoveredCount.value = Math.max(0, hoveredCount.value - 1);
-		};
-		return () => {
-			const grouped = getGroupedNotifications(data.value.notifications, props.position);
-			const rootProps = (position) => ({
-				...attrs,
-				...getStyles("root"),
-				"data-position": position
-			});
-			const renderGroup = (position) => h(Box, rootProps(position), () => h(TransitionGroup, {
-				css: false,
-				onBeforeEnter: (el) => applyTransitionStyles(el, "exited", position, duration.value, props.notificationMaxHeight),
-				onEnter: (el, done) => {
-					el.offsetHeight;
-					applyTransitionStyles(el, "entered", position, duration.value, props.notificationMaxHeight);
-					window.setTimeout(done, duration.value);
-				},
-				onLeave: (el, done) => {
-					applyTransitionStyles(el, "exiting", position, duration.value, props.notificationMaxHeight);
-					window.setTimeout(done, duration.value);
-				}
-			}, () => grouped[position].map(({ style: notificationStyle, ...notification }) => h(NotificationContainer, {
-				key: notification.id,
-				data: notification,
-				onHide: (id) => hideNotification(id, props.store),
-				autoClose: props.autoClose,
+		function applyTransitionStyles(element, state, position) {
+			Object.assign(element.style, getNotificationStateStyles({
+				state,
+				position,
 				transitionDuration: duration.value,
-				allowDragDismiss: props.allowDragDismiss,
-				allowScrollDismiss: props.allowScrollDismiss,
-				paused: props.pauseResetOnHover === "all" ? hoveredCount.value > 0 : false,
-				onHoverStart: handleHoverStart,
-				onHoverEnd: handleHoverEnd,
-				...getStyles("notification", { style: notificationStyle })
-			}))));
-			return h(OptionalPortal, {
-				withinPortal: props.withinPortal,
-				...props.portalProps
-			}, () => positions.map((position) => renderGroup(position)));
+				maxHeight: props.notificationMaxHeight
+			}));
+		}
+		function enter(element, done, position) {
+			element.offsetHeight;
+			applyTransitionStyles(element, "entered", position);
+			window.setTimeout(done, duration.value);
+		}
+		function leave(element, done, position) {
+			applyTransitionStyles(element, "exiting", position);
+			window.setTimeout(done, duration.value);
+		}
+		function notificationData(notification) {
+			const data = { ...notification };
+			delete data.style;
+			return data;
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(OptionalPortal), mergeProps(unref(props).portalProps, { "within-portal": unref(props).withinPortal }), {
+				default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(positions), (position) => {
+					return openBlock(), createBlock(unref(Box), mergeProps({ key: position }, { ref_for: true }, {
+						...unref(attrs),
+						...unref(getStyles)("root")
+					}, { "data-position": position }), {
+						default: withCtx(() => [createVNode(TransitionGroup, {
+							css: false,
+							onBeforeEnter: (element) => applyTransitionStyles(element, "exited", position),
+							onEnter: (element, done) => enter(element, done, position),
+							onLeave: (element, done) => leave(element, done, position)
+						}, {
+							default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(grouped.value[position], (notification) => {
+								return openBlock(), createBlock(NotificationContainer_default, mergeProps({ key: notification.id }, { ref_for: true }, unref(getStyles)("notification", { style: notification.style }), {
+									data: notificationData(notification),
+									"auto-close": unref(props).autoClose,
+									"transition-duration": duration.value,
+									"allow-drag-dismiss": unref(props).allowDragDismiss,
+									"allow-scroll-dismiss": unref(props).allowScrollDismiss,
+									paused: unref(props).pauseResetOnHover === "all" && hoveredCount.value > 0,
+									onHide: _cache[0] || (_cache[0] = (id) => unref(hideNotification)(id, unref(props).store)),
+									onHoverStart: _cache[1] || (_cache[1] = ($event) => hoveredCount.value += 1),
+									onHoverEnd: _cache[2] || (_cache[2] = ($event) => hoveredCount.value = Math.max(0, hoveredCount.value - 1))
+								}), null, 16, [
+									"data",
+									"auto-close",
+									"transition-duration",
+									"allow-drag-dismiss",
+									"allow-scroll-dismiss",
+									"paused"
+								]);
+							}), 128))]),
+							_: 2
+						}, 1032, [
+							"onBeforeEnter",
+							"onEnter",
+							"onLeave"
+						])]),
+						_: 2
+					}, 1040, ["data-position"]);
+				}), 128))]),
+				_: 1
+			}, 16, ["within-portal"]);
 		};
 	}
-});
-var Notifications = Object.assign(NotificationsBase, {
+}), {
 	classes: Notifications_module_default,
 	varsResolver,
 	show: notifications.show,