useblocks 1.1.85-dev.10 → 1.1.85-dev.11

package/vendor/antd/es/modal/Modal.js

@@ -1,17 +1,19 @@
 "use client";
 import { composeRef } from "../../../@rc-component/util/es/ref.js";
+import "../../../@rc-component/util/es/index.js";
 import { clsx } from "../../../clsx/dist/clsx.js";
 import { ConfigContext, useComponentConfig } from "../config-provider/context.js";
 import RefIcon from "../../../@ant-design/icons/es/icons/CloseOutlined.js";
+import { isNonNullable, isNumber, isPlainObject } from "../_util/is.js";
+import { useMergeSemantic } from "../_util/hooks/useMergeSemantic/index.js";
 import "../_util/warning.js";
+import useCSSVarCls from "../config-provider/hooks/useCSSVarCls.js";
+import "../config-provider/index.js";
 import { pickClosable, useClosable } from "../_util/hooks/useClosable.js";
 import { useMergedMask } from "../_util/hooks/useMergedMask.js";
-import { useMergeSemantic } from "../_util/hooks/useMergeSemantic.js";
 import ZIndexContext from "../_util/zindexContext.js";
 import { useZIndex } from "../_util/hooks/useZIndex.js";
 import "../_util/hooks/index.js";
-import useCSSVarCls from "../config-provider/hooks/useCSSVarCls.js";
-import "../config-provider/index.js";
 import { getTransitionName } from "../_util/motion.js";
 import es_default from "../../../@rc-component/dialog/es/index.js";
 import ContextIsolator from "../_util/ContextIsolator.js";
@@ -36,7 +38,7 @@ const getClickPosition = (e) => {
 if (canUseDocElement()) document.documentElement.addEventListener("click", getClickPosition, true);
 const Modal = (props) => {
 	const { prefixCls: customizePrefixCls, className, rootClassName, open, wrapClassName, centered, getContainer, style, width = 520, footer, classNames, styles, children, loading, confirmLoading, zIndex: customizeZIndex, mousePosition: customizeMousePosition, onOk, onCancel, okButtonProps, cancelButtonProps, destroyOnHidden, destroyOnClose, panelRef = null, closable, mask: modalMask, modalRender, maskClosable, focusTriggerAfterClose, focusable, ...restProps } = props;
-	const { getPopupContainer: getContextPopupContainer, getPrefixCls, direction, className: contextClassName, style: contextStyle, classNames: contextClassNames, styles: contextStyles, centered: contextCentered, cancelButtonProps: contextCancelButtonProps, okButtonProps: contextOkButtonProps, mask: contextMask } = useComponentConfig("modal");
+	const { getPopupContainer: getContextPopupContainer, getPrefixCls, direction, className: contextClassName, style: contextStyle, classNames: contextClassNames, styles: contextStyles, centered: contextCentered, cancelButtonProps: contextCancelButtonProps, okButtonProps: contextOkButtonProps, mask: contextMask, focusable: contextFocusable } = useComponentConfig("modal");
 	const { modal: modalContext } = React$1.useContext(ConfigContext);
 	const [closableAfterClose, onClose] = React$1.useMemo(() => {
 		if (typeof closable === "boolean") return [void 0, void 0];
@@ -45,7 +47,10 @@ const Modal = (props) => {
 	const prefixCls = getPrefixCls("modal", customizePrefixCls);
 	const rootPrefixCls = getPrefixCls();
 	const [mergedMask, maskBlurClassName, mergeMaskClosable] = useMergedMask(modalMask, contextMask, prefixCls, maskClosable);
-	const mergedFocusable = useFocusable(focusable, mergedMask, focusTriggerAfterClose);
+	const mergedFocusable = useFocusable({
+		...contextFocusable,
+		...focusable
+	}, mergedMask, focusTriggerAfterClose);
 	const handleCancel = (e) => {
 		if (confirmLoading) return;
 		onCancel?.(e);
@@ -106,14 +111,14 @@ const Modal = (props) => {
 		maskBlurClassName
 	], [contextStyles, styles], { props: mergedProps });
 	const [numWidth, responsiveWidth] = React$1.useMemo(() => {
-		if (width && typeof width === "object") return [void 0, width];
+		if (isPlainObject(width)) return [void 0, width];
 		return [width, void 0];
 	}, [width]);
 	const responsiveWidthVars = React$1.useMemo(() => {
 		const vars = {};
 		if (responsiveWidth) Object.keys(responsiveWidth).forEach((breakpoint) => {
 			const breakpointWidth = responsiveWidth[breakpoint];
-			if (breakpointWidth !== void 0) vars[`--${prefixCls}-${breakpoint}-width`] = typeof breakpointWidth === "number" ? `${breakpointWidth}px` : breakpointWidth;
+			if (isNonNullable(breakpointWidth)) vars[`--${prefixCls}-${breakpoint}-width`] = isNumber(breakpointWidth) ? `${breakpointWidth}px` : breakpointWidth;
 		});
 		return vars;
 	}, [prefixCls, responsiveWidth]);

package/vendor/antd/es/modal/PurePanel.js

@@ -1,8 +1,7 @@
 "use client";
 import { clsx } from "../../../clsx/dist/clsx.js";
 import { ConfigContext, useComponentConfig } from "../config-provider/context.js";
-import { useMergeSemantic } from "../_util/hooks/useMergeSemantic.js";
-import "../_util/hooks/index.js";
+import { useMergeSemantic } from "../_util/hooks/useMergeSemantic/index.js";
 import useCSSVarCls from "../config-provider/hooks/useCSSVarCls.js";
 import "../config-provider/index.js";
 import Panel from "../../../@rc-component/dialog/es/Dialog/Content/Panel.js";

package/vendor/antd/es/modal/confirm.js

@@ -1,6 +1,7 @@
 "use client";
 import { render, unmount } from "../../../@rc-component/util/es/React/render.js";
 import { ConfigContext } from "../config-provider/context.js";
+import { isFunction } from "../_util/is.js";
 import "../_util/warning.js";
 import { getConfirmLocale } from "./locale.js";
 import ConfigProvider, { globalConfig } from "../config-provider/index.js";
@@ -64,7 +65,7 @@ function confirm(config) {
 				prefixCls: rootPrefixCls,
 				iconPrefixCls,
 				theme
-			}, typeof global.holderRender === "function" ? global.holderRender(dom) : dom), container);
+			}, isFunction(global.holderRender) ? global.holderRender(dom) : dom), container);
 		});
 	};
 	function close(...args) {
@@ -72,14 +73,14 @@ function confirm(config) {
 			...currentConfig,
 			open: false,
 			afterClose: () => {
-				if (typeof config.afterClose === "function") config.afterClose();
+				if (isFunction(config.afterClose)) config.afterClose();
 				destroy.apply(this, args);
 			}
 		};
 		scheduleRender(currentConfig);
 	}
 	function update(configUpdate) {
-		if (typeof configUpdate === "function") currentConfig = configUpdate(currentConfig);
+		if (isFunction(configUpdate)) currentConfig = configUpdate(currentConfig);
 		else currentConfig = {
 			...currentConfig,
 			...configUpdate

package/vendor/antd/es/modal/shared.js

@@ -1,5 +1,6 @@
 "use client";
 import RefIcon from "../../../@ant-design/icons/es/icons/CloseOutlined.js";
+import { isFunction } from "../_util/is.js";
 import { getConfirmLocale } from "./locale.js";
 import useLocale from "../locale/useLocale.js";
 import "../locale/index.js";
@@ -39,9 +40,9 @@ const Footer = (props) => {
 		onCancel
 	]);
 	let footerNode;
-	if (typeof footer === "function" || typeof footer === "undefined") {
+	if (isFunction(footer) || typeof footer === "undefined") {
 		footerNode = /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(NormalCancelBtn, null), /*#__PURE__*/ React.createElement(NormalOkBtn, null));
-		if (typeof footer === "function") footerNode = footer(footerNode, {
+		if (isFunction(footer)) footerNode = footer(footerNode, {
 			OkBtn: NormalOkBtn,
 			CancelBtn: NormalCancelBtn
 		});

package/vendor/antd/es/modal/useModal/HookModal.js

@@ -1,5 +1,6 @@
 "use client";
 import { ConfigContext } from "../../config-provider/context.js";
+import { isFunction } from "../../_util/is.js";
 import localeValues from "../../locale/en_US.js";
 import useLocale from "../../locale/useLocale.js";
 import "../../config-provider/index.js";
@@ -25,7 +26,7 @@ const HookModal = /*#__PURE__*/ React$1.forwardRef((props, ref) => {
 		destroy: close,
 		update: (newConfig) => {
 			setInnerConfig((originConfig) => {
-				const nextConfig = typeof newConfig === "function" ? newConfig(originConfig) : newConfig;
+				const nextConfig = isFunction(newConfig) ? newConfig(originConfig) : newConfig;
 				return {
 					...originConfig,
 					...nextConfig

package/vendor/antd/es/notification/PureList.js

@@ -0,0 +1,46 @@
+"use client";
+import { clsx } from "../../../clsx/dist/clsx.js";
+import { useComponentConfig } from "../config-provider/context.js";
+import useCSSVarCls from "../config-provider/hooks/useCSSVarCls.js";
+import NotificationList from "../../../@rc-component/notification/es/NotificationList/index.js";
+import "../../../@rc-component/notification/es/index.js";
+import style_default from "./style/index.js";
+import { TypeIcon, getCloseIcon } from "./PurePanel.js";
+import * as React$1 from "../../../react/index.js";
+//#region node_modules/antd/es/notification/PureList.js
+/** @private Internal Component. Do not use in your production. */
+const PureList = (props) => {
+	const { items, classNames, placement = "topRight", style } = props;
+	const { getPrefixCls } = useComponentConfig("notification");
+	const prefixCls = getPrefixCls("notification");
+	const rootCls = useCSSVarCls(prefixCls);
+	const [hashId, cssVarCls] = style_default(prefixCls, rootCls);
+	const noticePrefixCls = `${prefixCls}-notice`;
+	const configList = items.map((item) => {
+		const { actions, description, duration, key, showProgress, title, type } = item;
+		const typeIconCls = `${noticePrefixCls}-icon-${type}`;
+		return {
+			key,
+			actions,
+			closable: { closeIcon: getCloseIcon(noticePrefixCls) },
+			description,
+			duration,
+			icon: TypeIcon[type],
+			showProgress,
+			title,
+			className: `${noticePrefixCls}-${type}`,
+			classNames: { icon: typeIconCls }
+		};
+	});
+	return /*#__PURE__*/ React$1.createElement(NotificationList, {
+		prefixCls,
+		placement,
+		configList,
+		className: clsx(hashId, cssVarCls, rootCls),
+		classNames,
+		style,
+		stack: false
+	});
+};
+//#endregion
+export { PureList as default };

package/vendor/antd/es/notification/PurePanel.js

@@ -6,63 +6,45 @@ import RefIcon$1 from "../../../@ant-design/icons/es/icons/CloseCircleFilled.js"
 import RefIcon$2 from "../../../@ant-design/icons/es/icons/CloseOutlined.js";
 import RefIcon$3 from "../../../@ant-design/icons/es/icons/ExclamationCircleFilled.js";
 import RefIcon$4 from "../../../@ant-design/icons/es/icons/InfoCircleFilled.js";
+import { isNonNullable, isPlainObject } from "../_util/is.js";
+import { useMergeSemantic } from "../_util/hooks/useMergeSemantic/index.js";
 import "../_util/warning.js";
-import { pickClosable, useClosable } from "../_util/hooks/useClosable.js";
-import { useMergeSemantic } from "../_util/hooks/useMergeSemantic.js";
-import "../_util/hooks/index.js";
 import useCSSVarCls from "../config-provider/hooks/useCSSVarCls.js";
 import "../config-provider/index.js";
-import Notify from "../../../@rc-component/notification/es/Notice.js";
+import Notification from "../../../@rc-component/notification/es/Notification.js";
 import "../../../@rc-component/notification/es/index.js";
-import "../../../@ant-design/icons/es/icons/LoadingOutlined.js";
-import style_default from "./style/index.js";
-import pure_panel_default from "./style/pure-panel.js";
+import RefIcon$5 from "../../../@ant-design/icons/es/icons/LoadingOutlined.js";
+import { pickClosable, useClosable } from "../_util/hooks/useClosable.js";
+import "../_util/hooks/index.js";
+import style_default, { PurePanelStyle } from "./style/index.js";
 import * as React$1 from "../../../react/index.js";
+//#region node_modules/antd/es/notification/PurePanel.js
+const TypeIcon = {
+	info: /*#__PURE__*/ React$1.createElement(RefIcon$4, null),
+	success: /*#__PURE__*/ React$1.createElement(RefIcon, null),
+	error: /*#__PURE__*/ React$1.createElement(RefIcon$1, null),
+	warning: /*#__PURE__*/ React$1.createElement(RefIcon$3, null),
+	loading: /*#__PURE__*/ React$1.createElement(RefIcon$5, null)
+};
 function getCloseIcon(prefixCls, closeIcon) {
 	if (closeIcon === null || closeIcon === false) return null;
 	return closeIcon || /*#__PURE__*/ React$1.createElement(RefIcon$2, { className: `${prefixCls}-close-icon` });
 }
-const typeToIcon = {
-	success: RefIcon,
-	info: RefIcon$4,
-	error: RefIcon$1,
-	warning: RefIcon$3
-};
-const PureContent = (props) => {
-	const { prefixCls, icon, type, title, description, actions, role = "alert", styles, classNames: pureContentCls } = props;
-	let iconNode = null;
-	if (icon) iconNode = /*#__PURE__*/ React$1.createElement("span", {
-		className: clsx(`${prefixCls}-icon`, pureContentCls.icon),
-		style: styles.icon
-	}, icon);
-	else if (type) iconNode = /*#__PURE__*/ React$1.createElement(typeToIcon[type] || null, {
-		className: clsx(`${prefixCls}-icon`, pureContentCls.icon, `${prefixCls}-icon-${type}`),
-		style: styles.icon
-	});
-	return /*#__PURE__*/ React$1.createElement("div", {
-		className: clsx({ [`${prefixCls}-with-icon`]: iconNode }),
-		role
-	}, iconNode, /*#__PURE__*/ React$1.createElement("div", {
-		className: clsx(`${prefixCls}-title`, pureContentCls.title),
-		style: styles.title
-	}, title), description && /*#__PURE__*/ React$1.createElement("div", {
-		className: clsx(`${prefixCls}-description`, pureContentCls.description),
-		style: styles.description
-	}, description), actions && /*#__PURE__*/ React$1.createElement("div", {
-		className: clsx(`${prefixCls}-actions`, pureContentCls.actions),
-		style: styles.actions
-	}, actions));
-};
 /** @private Internal Component. Do not use in your production. */
 const PurePanel = (props) => {
-	const { prefixCls: staticPrefixCls, icon, type, message, title, description, btn, actions, closeIcon: _closeIcon, className: notificationClassName, style, styles, classNames: notificationClassNames, closable, ...restProps } = props;
+	const { prefixCls: staticPrefixCls, icon, type, message, title, description, btn, actions, closeIcon: _closeIcon, className: notificationClassName, style, styles, classNames: notificationClassNames, closable, role, ...restProps } = props;
 	const { getPrefixCls, className: contextClassName, style: contextStyle, classNames: contextClassNames, styles: contextStyles } = useComponentConfig("notification");
 	const [mergedClassNames, mergedStyles] = useMergeSemantic([contextClassNames, notificationClassNames], [contextStyles, styles], { props });
 	const { notification: notificationContext } = React$1.useContext(ConfigContext);
 	const mergedActions = actions ?? btn;
 	const mergedTitle = title ?? message;
+	const hasTitle = isNonNullable(mergedTitle) && mergedTitle !== false && mergedTitle !== "";
 	const prefixCls = staticPrefixCls || getPrefixCls("notification");
 	const noticePrefixCls = `${prefixCls}-notice`;
+	const iconNode = icon || (type ? TypeIcon[type] : null);
+	const typeIconCls = !icon && type ? `${noticePrefixCls}-icon-${type}` : void 0;
+	const { root: rootClassName, ...contentClassNames } = mergedClassNames;
+	const { root: rootStyle, ...contentStyles } = mergedStyles;
 	const rootCls = useCSSVarCls(prefixCls);
 	const [hashId, cssVarCls] = style_default(prefixCls, rootCls);
 	const [rawClosable, mergedCloseIcon, , ariaProps] = useClosable(pickClosable(props), pickClosable(notificationContext), {
@@ -71,35 +53,34 @@ const PurePanel = (props) => {
 		closeIconRender: (icon) => getCloseIcon(prefixCls, icon)
 	});
 	const mergedClosable = rawClosable ? {
-		onClose: closable && typeof closable === "object" ? closable?.onClose : void 0,
+		onClose: isPlainObject(closable) ? closable?.onClose : void 0,
 		closeIcon: mergedCloseIcon,
 		...ariaProps
 	} : false;
 	return /*#__PURE__*/ React$1.createElement("div", {
-		className: clsx(`${noticePrefixCls}-pure-panel`, hashId, notificationClassName, cssVarCls, rootCls, mergedClassNames.root),
-		style: mergedStyles.root
-	}, /*#__PURE__*/ React$1.createElement(pure_panel_default, { prefixCls }), /*#__PURE__*/ React$1.createElement(Notify, {
+		className: clsx(`${noticePrefixCls}-pure-panel`, hashId, notificationClassName, cssVarCls, rootCls, rootClassName),
+		style: rootStyle
+	}, /*#__PURE__*/ React$1.createElement(PurePanelStyle, { prefixCls }), /*#__PURE__*/ React$1.createElement(Notification, {
 		style: {
 			...contextStyle,
 			...style
 		},
 		...restProps,
 		prefixCls,
-		eventKey: "pure",
 		duration: null,
 		closable: mergedClosable,
-		className: clsx(notificationClassName, contextClassName),
-		content: /*#__PURE__*/ React$1.createElement(PureContent, {
-			classNames: mergedClassNames,
-			styles: mergedStyles,
-			prefixCls: noticePrefixCls,
-			icon,
-			type,
-			title: mergedTitle,
-			description,
-			actions: mergedActions
-		})
+		className: contextClassName,
+		title: hasTitle ? mergedTitle : null,
+		description,
+		icon: iconNode,
+		actions: mergedActions,
+		role,
+		classNames: {
+			...contentClassNames,
+			icon: clsx(typeIconCls, contentClassNames.icon)
+		},
+		styles: contentStyles
 	}));
 };
 //#endregion
-export { PureContent, PurePanel as default, getCloseIcon };
+export { TypeIcon, PurePanel as default, getCloseIcon };

package/vendor/antd/es/notification/hooks/useStackConfig.js

@@ -0,0 +1,13 @@
+import { isPlainObject } from "../../_util/is.js";
+import * as React$1 from "../../../../react/index.js";
+//#region node_modules/antd/es/notification/hooks/useStackConfig.js
+const useStackConfig = (stackConfig, defaultStackConfig) => React$1.useMemo(() => {
+	const mergedStackConfig = stackConfig ?? defaultStackConfig;
+	if (!mergedStackConfig) return false;
+	return {
+		...isPlainObject(defaultStackConfig) ? defaultStackConfig : {},
+		...isPlainObject(mergedStackConfig) ? mergedStackConfig : {}
+	};
+}, [stackConfig, defaultStackConfig]);
+//#endregion
+export { useStackConfig as default };

package/vendor/antd/es/notification/index.js

@@ -5,6 +5,7 @@ import ConfigProvider, { globalConfig } from "../config-provider/index.js";
 import PurePanel from "./PurePanel.js";
 import useNotification, { useInternalNotification } from "./useNotification.js";
 import { AppConfigContext } from "../app/context.js";
+import PureList from "./PureList.js";
 import React, { useContext } from "../../../react/index.js";
 //#region node_modules/antd/es/notification/index.js
 let notification = null;
@@ -143,7 +144,8 @@ const staticMethods = {
 	destroy,
 	config: setNotificationGlobalConfig,
 	useNotification,
-	_InternalPanelDoNotUseOrYouWillBeFired: PurePanel
+	_InternalPanelDoNotUseOrYouWillBeFired: PurePanel,
+	_InternalListDoNotUseOrYouWillBeFired: PureList
 };
 methods.forEach((type) => {
 	staticMethods[type] = (config) => open({

package/vendor/antd/es/notification/style/index.js

@@ -1,172 +1,16 @@
 import { unit } from "../../../../@ant-design/cssinjs/es/util/index.js";
-import Keyframe from "../../../../@ant-design/cssinjs/es/Keyframes.js";
 import "../../../../@ant-design/cssinjs/es/index.js";
 import { merge } from "../../../../@ant-design/cssinjs-utils/es/util/statistic.js";
-import { genFocusStyle, resetComponent } from "../../style/index.js";
-import { genStyleHooks } from "../../theme/util/genStyleUtils.js";
+import { resetComponent } from "../../style/index.js";
+import { genStyleHooks, genSubStyleComponent } from "../../theme/util/genStyleUtils.js";
 import "../../theme/internal.js";
 import { CONTAINER_MAX_OFFSET } from "../../_util/hooks/useZIndex.js";
 import "../../_util/hooks/index.js";
+import genNotificationStyle, { genPurePanelStyle } from "./notification.js";
 import genNotificationPlacementStyle from "./placement.js";
-import genStackStyle from "./stack.js";
 //#region node_modules/antd/es/notification/style/index.js
-const genNoticeStyle = (token) => {
-	const { iconCls, componentCls, boxShadow, fontSizeLG, notificationMarginBottom, borderRadiusLG, colorSuccess, colorInfo, colorWarning, colorError, colorTextHeading, notificationBg, notificationPadding, notificationMarginEdge, progressBg, notificationProgressHeight, fontSize, lineHeight, width, notificationIconSize, colorText, colorSuccessBg, colorErrorBg, colorInfoBg, colorWarningBg, motionDurationMid } = token;
-	const noticeCls = `${componentCls}-notice`;
-	return {
-		position: "relative",
-		marginBottom: notificationMarginBottom,
-		marginInlineStart: "auto",
-		background: notificationBg,
-		borderRadius: borderRadiusLG,
-		boxShadow,
-		[noticeCls]: {
-			padding: notificationPadding,
-			width,
-			maxWidth: `calc(100vw - ${unit(token.calc(notificationMarginEdge).mul(2).equal())})`,
-			lineHeight,
-			wordWrap: "break-word",
-			borderRadius: borderRadiusLG,
-			overflow: "hidden",
-			"&-success": colorSuccessBg ? { background: colorSuccessBg } : {},
-			"&-error": colorErrorBg ? { background: colorErrorBg } : {},
-			"&-info": colorInfoBg ? { background: colorInfoBg } : {},
-			"&-warning": colorWarningBg ? { background: colorWarningBg } : {}
-		},
-		[`${noticeCls}-title`]: {
-			marginBottom: token.marginXS,
-			color: colorTextHeading,
-			fontSize: fontSizeLG,
-			lineHeight: token.lineHeightLG
-		},
-		[`${noticeCls}-description`]: {
-			fontSize,
-			color: colorText,
-			marginTop: token.marginXS
-		},
-		[`${noticeCls}-closable ${noticeCls}-title`]: { paddingInlineEnd: token.paddingLG },
-		[`${noticeCls}-with-icon ${noticeCls}-title`]: {
-			marginBottom: token.marginXS,
-			marginInlineStart: token.calc(token.marginSM).add(notificationIconSize).equal(),
-			fontSize: fontSizeLG
-		},
-		[`${noticeCls}-with-icon ${noticeCls}-description`]: {
-			marginInlineStart: token.calc(token.marginSM).add(notificationIconSize).equal(),
-			fontSize
-		},
-		[`${noticeCls}-icon`]: {
-			position: "absolute",
-			fontSize: notificationIconSize,
-			lineHeight: 1,
-			[`&-success${iconCls}`]: { color: colorSuccess },
-			[`&-info${iconCls}`]: { color: colorInfo },
-			[`&-warning${iconCls}`]: { color: colorWarning },
-			[`&-error${iconCls}`]: { color: colorError }
-		},
-		[`${noticeCls}-close`]: {
-			position: "absolute",
-			top: token.notificationPaddingVertical,
-			insetInlineEnd: token.notificationPaddingHorizontal,
-			color: token.colorIcon,
-			outline: "none",
-			width: token.notificationCloseButtonSize,
-			height: token.notificationCloseButtonSize,
-			borderRadius: token.borderRadiusSM,
-			transition: ["color", "background-color"].map((prop) => `${prop} ${motionDurationMid}`).join(", "),
-			display: "flex",
-			alignItems: "center",
-			justifyContent: "center",
-			background: "none",
-			border: "none",
-			"&:hover": {
-				color: token.colorIconHover,
-				backgroundColor: token.colorBgTextHover
-			},
-			"&:active": { backgroundColor: token.colorBgTextActive },
-			...genFocusStyle(token)
-		},
-		[`${noticeCls}-progress`]: {
-			position: "absolute",
-			display: "block",
-			appearance: "none",
-			inlineSize: `calc(100% - ${unit(borderRadiusLG)} * 2)`,
-			left: {
-				_skip_check_: true,
-				value: borderRadiusLG
-			},
-			right: {
-				_skip_check_: true,
-				value: borderRadiusLG
-			},
-			bottom: 0,
-			blockSize: notificationProgressHeight,
-			border: 0,
-			"&, &::-webkit-progress-bar": {
-				borderRadius: borderRadiusLG,
-				backgroundColor: `rgba(0, 0, 0, 0.04)`
-			},
-			"&::-moz-progress-bar": { background: progressBg },
-			"&::-webkit-progress-value": {
-				borderRadius: borderRadiusLG,
-				background: progressBg
-			}
-		},
-		[`${noticeCls}-actions`]: {
-			float: "right",
-			marginTop: token.marginSM
-		}
-	};
-};
-const genNotificationStyle = (token) => {
-	const { componentCls, notificationMarginBottom, notificationMarginEdge, motionDurationMid, motionEaseInOut } = token;
-	const noticeCls = `${componentCls}-notice`;
-	const fadeOut = new Keyframe("antNotificationFadeOut", {
-		"0%": {
-			maxHeight: token.animationMaxHeight,
-			marginBottom: notificationMarginBottom
-		},
-		"100%": {
-			maxHeight: 0,
-			marginBottom: 0,
-			paddingTop: 0,
-			paddingBottom: 0,
-			opacity: 0
-		}
-	});
-	return [{ [componentCls]: {
-		...resetComponent(token),
-		position: "fixed",
-		zIndex: token.zIndexPopup,
-		marginRight: {
-			value: notificationMarginEdge,
-			_skip_check_: true
-		},
-		[`${componentCls}-hook-holder`]: { position: "relative" },
-		[`${componentCls}-fade-appear-prepare`]: { opacity: "0 !important" },
-		[`${componentCls}-fade-enter, ${componentCls}-fade-appear`]: {
-			animationDuration: token.motionDurationMid,
-			animationTimingFunction: motionEaseInOut,
-			animationFillMode: "both",
-			opacity: 0,
-			animationPlayState: "paused"
-		},
-		[`${componentCls}-fade-leave`]: {
-			animationTimingFunction: motionEaseInOut,
-			animationFillMode: "both",
-			animationDuration: motionDurationMid,
-			animationPlayState: "paused"
-		},
-		[`${componentCls}-fade-enter${componentCls}-fade-enter-active, ${componentCls}-fade-appear${componentCls}-fade-appear-active`]: { animationPlayState: "running" },
-		[`${componentCls}-fade-leave${componentCls}-fade-leave-active`]: {
-			animationName: fadeOut,
-			animationPlayState: "running"
-		},
-		"&-rtl": {
-			direction: "rtl",
-			[`${noticeCls}-actions`]: { float: "left" }
-		}
-	} }, { [componentCls]: { [`${noticeCls}-wrapper`]: genNoticeStyle(token) } }];
-};
+const DEFAULT_COLLAPSED_STACK_VISIBLE_COUNT = 3;
+/** Provide default public ComponentToken values for Notification. */
 const prepareComponentToken = (token) => ({
 	zIndexPopup: token.zIndexPopupBase + CONTAINER_MAX_OFFSET + 50,
 	width: 384,
@@ -176,6 +20,7 @@ const prepareComponentToken = (token) => ({
 	colorInfoBg: void 0,
 	colorWarningBg: void 0
 });
+/** Derive internal Notification style tokens from alias and component tokens. */
 const prepareNotificationToken = (token) => {
 	const notificationPaddingVertical = token.paddingMD;
 	const notificationPaddingHorizontal = token.paddingLG;
@@ -188,18 +33,106 @@ const prepareNotificationToken = (token) => {
 		notificationMarginBottom: token.margin,
 		notificationPadding: `${unit(token.paddingMD)} ${unit(token.paddingContentHorizontalLG)}`,
 		notificationMarginEdge: token.marginLG,
-		animationMaxHeight: 150,
-		notificationStackLayer: 3,
-		notificationProgressHeight: 2
+		notificationProgressHeight: 2,
+		notificationMotionOffset: 64
 	});
 };
-var style_default = genStyleHooks("Notification", (token) => {
-	const notificationToken = prepareNotificationToken(token);
+/** Build a clip-path inset that keeps stack shadows visible. */
+const getStackNoticeClipPath = (offset) => `inset(${offset} ${offset} ${offset} ${offset})`;
+/** Generate shared list content and motion base styles. */
+const genNotificationListContentStyle = (token) => {
+	const { componentCls, motionDurationMid, motionDurationSlow, motionEaseInOut } = token;
+	const listContentCls = `${`${componentCls}-list`}-content`;
+	return {
+		[listContentCls]: {
+			position: "relative",
+			display: "flex",
+			flexShrink: 0,
+			flexDirection: "column",
+			gap: token.notificationMarginBottom,
+			width: "100%",
+			willChange: "height, transform",
+			transition: "none",
+			[`&${listContentCls}-decrease`]: { transition: `height calc(${motionDurationSlow} * 2) ${motionEaseInOut} ${motionDurationMid}` }
+		},
+		[`${componentCls}-fade`]: {
+			backfaceVisibility: "hidden",
+			willChange: "transform, opacity"
+		}
+	};
+};
+/** Generate the root holder, list, stack, and RTL styles for notifications. */
+const genNotificationListStyle = (token, config) => {
+	const { componentCls, notificationMarginEdge } = token;
+	const notificationMarginEdgeVar = "--notification-margin-edge";
+	const noticeCls = `${componentCls}-notice`;
+	const listCls = `${componentCls}-list`;
+	const listWidth = config.listWidthKey ? token.calc(token[config.listWidthKey]).add(token.calc(notificationMarginEdge).mul(2)).equal() : "100%";
+	const noticeBeyondStackVisibleCountCls = `${noticeCls}:nth-last-child(n + ${(config.stackVisibleCount ?? DEFAULT_COLLAPSED_STACK_VISIBLE_COUNT) + 1})`;
+	const stackShadowClipOffset = unit(token.calc(token.marginXXL).mul(-1).equal());
+	const stackNoticeClipPath = getStackNoticeClipPath(stackShadowClipOffset);
+	return { [componentCls]: {
+		...resetComponent(token),
+		[notificationMarginEdgeVar]: unit(notificationMarginEdge),
+		position: "fixed",
+		zIndex: token.zIndexPopup,
+		width: listWidth,
+		maxWidth: "100vw",
+		height: "100vh",
+		overflow: "hidden",
+		overscrollBehavior: "contain",
+		[`${componentCls}-hook-holder`]: { position: "relative" },
+		[`&${listCls}`]: {
+			maxHeight: "100vh",
+			padding: `var(${notificationMarginEdgeVar})`,
+			overflowX: "hidden",
+			overflowY: "auto",
+			overscrollBehavior: "contain",
+			scrollbarWidth: "none",
+			msOverflowStyle: "none",
+			pointerEvents: "none",
+			"&::-webkit-scrollbar": {
+				display: "none",
+				width: 0,
+				height: 0
+			}
+		},
+		...genNotificationListContentStyle(token),
+		[`&${componentCls}-stack`]: {
+			[noticeCls]: { clipPath: stackNoticeClipPath },
+			[`&:not(${componentCls}-stack-expanded)`]: {
+				[noticeCls]: { "--notification-scale": "calc(1 - min(var(--notification-index, 0), 2) * 0.06)" },
+				[`${noticeCls}:not(${noticeCls}-stack-in-threshold)`]: {
+					opacity: 0,
+					pointerEvents: "none"
+				},
+				[noticeBeyondStackVisibleCountCls]: {
+					opacity: 0,
+					pointerEvents: "none"
+				}
+			}
+		},
+		"&-rtl": {
+			direction: "rtl",
+			[`${noticeCls}-actions`]: { float: "left" }
+		}
+	} };
+};
+/** Register the PurePanel sub-style component for Notification. */
+const PurePanelStyle = genSubStyleComponent(["Notification", "PurePanel"], (token) => genPurePanelStyle(prepareNotificationToken(token)), prepareComponentToken);
+/** Compose the shared list, item, and placement styles. */
+const sharedGenerateStyle = (token, config) => {
+	const itemStyle = config.itemStyle ?? genNotificationStyle;
 	return [
-		genNotificationStyle(notificationToken),
-		genNotificationPlacementStyle(notificationToken),
-		genStackStyle(notificationToken)
+		genNotificationListStyle(token, config),
+		itemStyle(token),
+		genNotificationPlacementStyle(token)
 	];
+};
+/** Register the main style hook for Notification. */
+var style_default = genStyleHooks("Notification", (token) => {
+	const notificationToken = prepareNotificationToken(token);
+	return sharedGenerateStyle(notificationToken, { listWidthKey: "width" });
 }, prepareComponentToken);
 //#endregion
-export { style_default as default, genNoticeStyle, prepareComponentToken, prepareNotificationToken };
+export { PurePanelStyle, style_default as default, prepareNotificationToken, sharedGenerateStyle };