@veracity/vui 4.1.0 → 5.0.0-alpha.0

package/dist/modal/context.js

@@ -5,5 +5,5 @@ const [ModalProvider, useModalContext] = createContext({ isOptional: true });
 
 //#endregion
 export { ModalProvider, useModalContext };
-globalThis.__vuiVersion__ = "4.1.0"
+globalThis.__vuiVersion__ = "5.0.0-alpha.0"
 //# sourceMappingURL=context.js.map

package/dist/modal/modal.js

@@ -87,5 +87,5 @@ Modal.displayName = "Modal";
 
 //#endregion
 export { Modal as default };
-globalThis.__vuiVersion__ = "4.1.0"
+globalThis.__vuiVersion__ = "5.0.0-alpha.0"
 //# sourceMappingURL=modal.js.map

package/dist/modal/modal.types.d.ts

@@ -1,6 +1,7 @@
 import { MouseEvent } from "../utils/types.js";
 import "../utils/index.js";
 import { ThemingProps } from "../theme/types.js";
+import "../theme/index.js";
 import { AnimationProp } from "../system/animations.js";
 import { SystemProps } from "../system/system.js";
 import "../system/index.js";

package/dist/modal/modal.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modal.types.d.ts","names":[],"sources":["../../src/modal/modal.types.ts"],"mappings":";;;;;;;;;;KAOY,kBAAA,GAAqB,WAAA;AAAA,KAErB,iBAAA,GAAoB,WAAA;AAAA,KAEpB,YAAA,GAAe,IAAA,CAAK,UAAA;AAAA,KAEpB,UAAA,GAAa,WAAA,GACvB,YAAA;kFAEE,cAAA,YAT0B;EAW1B,SAAA,GAAY,aAAA,EAXiB;EAa7B,QAAA,EAAU,YAAA,EAXF;EAaR,YAAA,GAAe,iBAAA;EAEf,gBAAA,YAfuC;EAiBvC,oBAAA,YAfoB;EAiBpB,eAAA,YAjBuB;EAmBvB,aAAA,YAjBQ;EAmBR,kBAAA;EAEA,iBAAA,YApBF;EAsBE,gBAAA,YAhBU;EAkBV,aAAA,GAAgB,KAAA,CAAM,SAAA,CAAU,gBAAA,GAAA;EAEhC,YAAA,YAEkC;EAAlC,eAAA,GAAkB,KAAA,CAAM,SAAA,CAAU,gBAAA,GAIZ;EAFtB,MAAA,YAEgC;EAAhC,eAAA,IAAmB,CAAA,EAAG,UAAA,WAhCxB;EAkCE,OAAA,eA9BA;EAgCA,KAAA,eA9BA;EAgCA,iBAAA;AAAA"}
+{"version":3,"file":"modal.types.d.ts","names":[],"sources":["../../src/modal/modal.types.ts"],"mappings":";;;;;;;;;;;KAOY,kBAAA,GAAqB,WAAA;AAAA,KAErB,iBAAA,GAAoB,WAAA;AAAA,KAEpB,YAAA,GAAe,IAAA,CAAK,UAAA;AAAA,KAEpB,UAAA,GAAa,WAAA,GACvB,YAAA;kFAEE,cAAA,YATQ;EAWR,SAAA,GAAY,aAAA;EAEZ,QAAA,EAAU,YAAA,EAb8B;EAexC,YAAA,GAAe,iBAAA,EAbU;EAezB,gBAAA,YAf4B;EAiB5B,oBAAA,YAfQ;EAiBR,eAAA;EAEA,aAAA,YAnBsC;EAqBtC,kBAAA,YAnBkB;EAqBlB,iBAAA,YArBqB;EAuBrB,gBAAA,YAlBY;EAoBZ,aAAA,GAAgB,KAAA,CAAM,SAAA,CAAU,gBAAA,GAhBjB;EAkBf,YAAA,YAFgB;EAIhB,eAAA,GAAkB,KAAA,CAAM,SAAA,CAAU,gBAAA,GAAhB;EAElB,MAAA,YAEgC;EAAhC,eAAA,IAAmB,CAAA,EAAG,UAAA,WAjCD;EAmCrB,OAAA,eAhCA;EAkCA,KAAA,eAhCY;EAkCZ,iBAAA;AAAA"}

package/dist/modal/modalBackdrop.js

@@ -31,5 +31,5 @@ ModalBackdrop.displayName = "ModalBackdrop";
 
 //#endregion
 export { ModalBackdropBase, ModalBackdrop as default };
-globalThis.__vuiVersion__ = "4.1.0"
+globalThis.__vuiVersion__ = "5.0.0-alpha.0"
 //# sourceMappingURL=modalBackdrop.js.map

package/dist/modal/modalContent.js

@@ -31,5 +31,5 @@ ModalContent.displayName = "ModalContent";
 
 //#endregion
 export { ModalContentBase, ModalContent as default };
-globalThis.__vuiVersion__ = "4.1.0"
+globalThis.__vuiVersion__ = "5.0.0-alpha.0"
 //# sourceMappingURL=modalContent.js.map

package/dist/modal/modalManager.js

@@ -29,5 +29,5 @@ function useModalManager(ref, isOpen, disableScrollLock) {
 
 //#endregion
 export { manager, useModalManager };
-globalThis.__vuiVersion__ = "4.1.0"
+globalThis.__vuiVersion__ = "5.0.0-alpha.0"
 //# sourceMappingURL=modalManager.js.map

package/dist/modal/theme.js

@@ -18,5 +18,5 @@ var theme_default = {
 
 //#endregion
 export { theme_default as default };
-globalThis.__vuiVersion__ = "4.1.0"
+globalThis.__vuiVersion__ = "5.0.0-alpha.0"
 //# sourceMappingURL=theme.js.map

package/dist/notification/consts.js

@@ -1,69 +1,75 @@
 import { iconDictionary } from "../message/consts.js";
 
 //#region src/notification/consts.ts
-const bannerNotificationElevation = 2;
+/** Maps each intent to the icon props auto-injected when no explicit icon is provided. */
+const INTENT_ICON_MAP = {
+	info: { name: iconDictionary.info },
+	success: { name: iconDictionary.success },
+	danger: { name: iconDictionary.error },
+	warning: { name: iconDictionary.warning }
+};
+/** Icon props used when isLoading is true. */
+const LOADING_ICON_PROPS = {
+	name: "uiSpinnerThird",
+	pathFill: ["blue.40", "blue.60"],
+	variant: "spinning"
+};
 const notificationStatusMapping = {
 	error: {
 		iconProps: { name: iconDictionary.error },
-		variant: "subtleRed"
+		variant: "inline",
+		intent: "danger"
 	},
 	info: {
 		iconProps: { name: iconDictionary.info },
-		variant: "subtleBlue"
+		variant: "inline",
+		intent: "info"
 	},
 	loading: {
-		iconProps: {
-			name: "fadSpinnerThird",
-			pathFill: ["blue.40", "blue.60"],
-			variant: "spinning"
-		},
-		variant: "subtleBlue"
+		iconProps: LOADING_ICON_PROPS,
+		variant: "inline",
+		intent: "info",
+		isLoading: true
 	},
 	success: {
 		iconProps: { name: iconDictionary.success },
-		variant: "subtleGreen"
+		variant: "inline",
+		intent: "success"
 	},
 	warning: {
 		iconProps: { name: iconDictionary.warning },
-		variant: "subtleYellow"
+		variant: "inline",
+		intent: "warning"
 	},
 	bannerError: {
 		iconProps: { name: iconDictionary.error },
-		variant: "bannerRed"
+		variant: "banner",
+		intent: "danger"
 	},
 	bannerInfo: {
 		iconProps: { name: iconDictionary.info },
-		variant: "bannerBlue"
+		variant: "banner",
+		intent: "info"
 	},
 	bannerLoading: {
-		iconProps: {
-			name: "fadSpinnerThird",
-			pathFill: ["blue.40", "blue.60"],
-			variant: "spinning"
-		},
-		variant: "bannerBlue"
+		iconProps: LOADING_ICON_PROPS,
+		variant: "banner",
+		intent: "info",
+		isLoading: true
 	},
 	bannerSuccess: {
 		iconProps: { name: iconDictionary.success },
-		variant: "bannerGreen"
+		variant: "banner",
+		intent: "success"
 	},
 	bannerWarning: {
 		iconProps: { name: iconDictionary.warning },
-		variant: "bannerYellow"
+		variant: "banner",
+		intent: "warning"
 	}
 };
-const closeButtonVariantMapping = {
-	subtleRed: "subtleRed",
-	subtleBlue: "subtleBlue",
-	subtleGreen: "subtleGreen",
-	subtleYellow: "subtleYellow",
-	bannerRed: "subtleRed",
-	bannerBlue: "subtleBlue",
-	bannerGreen: "subtleGreen",
-	bannerYellow: "subtleYellow"
-};
 
 //#endregion
-export { bannerNotificationElevation, closeButtonVariantMapping, notificationStatusMapping };
-globalThis.__vuiVersion__ = "4.1.0"
+export { INTENT_ICON_MAP, LOADING_ICON_PROPS, notificationStatusMapping };
+globalThis.__vuiVersion__ = "5.0.0-alpha.0"
 //# sourceMappingURL=consts.js.map

package/dist/notification/consts.js.map

@@ -1 +1 @@
-{"version":3,"file":"consts.js","names":[],"sources":["../../src/notification/consts.ts"],"sourcesContent":["import { iconDictionary } from '../message/consts'\nimport type { NotificationStatusMapping } from './notification.types'\n\nexport const bannerNotificationElevation = 2\n\nexport const notificationStatusMapping: NotificationStatusMapping = {\n  error: {\n    iconProps: {\n      name: iconDictionary.error,\n    },\n    variant: 'subtleRed',\n  },\n  info: {\n    iconProps: {\n      name: iconDictionary.info,\n    },\n    variant: 'subtleBlue',\n  },\n  loading: {\n    iconProps: {\n      name: 'fadSpinnerThird',\n      pathFill: ['blue.40', 'blue.60'],\n      variant: 'spinning',\n    },\n    variant: 'subtleBlue',\n  },\n  success: {\n    iconProps: {\n      name: iconDictionary.success,\n    },\n    variant: 'subtleGreen',\n  },\n  warning: {\n    iconProps: {\n      name: iconDictionary.warning,\n    },\n    variant: 'subtleYellow',\n  },\n  bannerError: {\n    iconProps: {\n      name: iconDictionary.error,\n    },\n    variant: 'bannerRed',\n  },\n  bannerInfo: {\n    iconProps: {\n      name: iconDictionary.info,\n    },\n    variant: 'bannerBlue',\n  },\n  bannerLoading: {\n    iconProps: {\n      name: 'fadSpinnerThird',\n      pathFill: ['blue.40', 'blue.60'],\n      variant: 'spinning',\n    },\n    variant: 'bannerBlue',\n  },\n  bannerSuccess: {\n    iconProps: {\n      name: iconDictionary.success,\n    },\n    variant: 'bannerGreen',\n  },\n  bannerWarning: {\n    iconProps: {\n      name: iconDictionary.warning,\n    },\n    variant: 'bannerYellow',\n  },\n}\n\nexport const closeButtonVariantMapping = {\n  subtleRed: 'subtleRed',\n  subtleBlue: 'subtleBlue',\n  subtleGreen: 'subtleGreen',\n  subtleYellow: 'subtleYellow',\n  bannerRed: 'subtleRed',\n  bannerBlue: 'subtleBlue',\n  bannerGreen: 'subtleGreen',\n  bannerYellow: 'subtleYellow',\n}\n"],"mappings":";;;AAGA,MAAa,8BAA8B;AAE3C,MAAa,4BAAuD;CAClE,OAAO;EACL,WAAW,EACT,MAAM,eAAe,OACtB;EACD,SAAS;EACV;CACD,MAAM;EACJ,WAAW,EACT,MAAM,eAAe,MACtB;EACD,SAAS;EACV;CACD,SAAS;EACP,WAAW;GACT,MAAM;GACN,UAAU,CAAC,WAAW,UAAU;GAChC,SAAS;GACV;EACD,SAAS;EACV;CACD,SAAS;EACP,WAAW,EACT,MAAM,eAAe,SACtB;EACD,SAAS;EACV;CACD,SAAS;EACP,WAAW,EACT,MAAM,eAAe,SACtB;EACD,SAAS;EACV;CACD,aAAa;EACX,WAAW,EACT,MAAM,eAAe,OACtB;EACD,SAAS;EACV;CACD,YAAY;EACV,WAAW,EACT,MAAM,eAAe,MACtB;EACD,SAAS;EACV;CACD,eAAe;EACb,WAAW;GACT,MAAM;GACN,UAAU,CAAC,WAAW,UAAU;GAChC,SAAS;GACV;EACD,SAAS;EACV;CACD,eAAe;EACb,WAAW,EACT,MAAM,eAAe,SACtB;EACD,SAAS;EACV;CACD,eAAe;EACb,WAAW,EACT,MAAM,eAAe,SACtB;EACD,SAAS;EACV;CACF;AAED,MAAa,4BAA4B;CACvC,WAAW;CACX,YAAY;CACZ,aAAa;CACb,cAAc;CACd,WAAW;CACX,YAAY;CACZ,aAAa;CACb,cAAc;CACf"}
+{"version":3,"file":"consts.js","names":[],"sources":["../../src/notification/consts.ts"],"sourcesContent":["import type { IconProps } from '../icon'\nimport { iconDictionary } from '../message/consts'\nimport type { NotificationIntent, NotificationStatusMapping } from './notification.types'\n\nexport const bannerNotificationElevation = 2\n\n/** Maps each intent to the icon props auto-injected when no explicit icon is provided. */\nexport const INTENT_ICON_MAP: Record<NotificationIntent, IconProps> = {\n  info: { name: iconDictionary.info },\n  success: { name: iconDictionary.success },\n  danger: { name: iconDictionary.error },\n  warning: { name: iconDictionary.warning },\n}\n\n/** Icon props used when isLoading is true. */\nexport const LOADING_ICON_PROPS: IconProps = {\n  name: 'uiSpinnerThird',\n  pathFill: ['blue.40', 'blue.60'],\n  variant: 'spinning',\n}\n\nexport const notificationStatusMapping: NotificationStatusMapping = {\n  error: { iconProps: { name: iconDictionary.error }, variant: 'inline', intent: 'danger' },\n  info: { iconProps: { name: iconDictionary.info }, variant: 'inline', intent: 'info' },\n  loading: { iconProps: LOADING_ICON_PROPS, variant: 'inline', intent: 'info', isLoading: true },\n  success: { iconProps: { name: iconDictionary.success }, variant: 'inline', intent: 'success' },\n  warning: { iconProps: { name: iconDictionary.warning }, variant: 'inline', intent: 'warning' },\n  bannerError: { iconProps: { name: iconDictionary.error }, variant: 'banner', intent: 'danger' },\n  bannerInfo: { iconProps: { name: iconDictionary.info }, variant: 'banner', intent: 'info' },\n  bannerLoading: { iconProps: LOADING_ICON_PROPS, variant: 'banner', intent: 'info', isLoading: true },\n  bannerSuccess: { iconProps: { name: iconDictionary.success }, variant: 'banner', intent: 'success' },\n  bannerWarning: { iconProps: { name: iconDictionary.warning }, variant: 'banner', intent: 'warning' },\n}\n"],"mappings":";;;;AAOA,MAAa,kBAAyD;CACpE,MAAM,EAAE,MAAM,eAAe,MAAM;CACnC,SAAS,EAAE,MAAM,eAAe,SAAS;CACzC,QAAQ,EAAE,MAAM,eAAe,OAAO;CACtC,SAAS,EAAE,MAAM,eAAe,SAAS;CAC1C;;AAGD,MAAa,qBAAgC;CAC3C,MAAM;CACN,UAAU,CAAC,WAAW,UAAU;CAChC,SAAS;CACV;AAED,MAAa,4BAAuD;CAClE,OAAO;EAAE,WAAW,EAAE,MAAM,eAAe,OAAO;EAAE,SAAS;EAAU,QAAQ;EAAU;CACzF,MAAM;EAAE,WAAW,EAAE,MAAM,eAAe,MAAM;EAAE,SAAS;EAAU,QAAQ;EAAQ;CACrF,SAAS;EAAE,WAAW;EAAoB,SAAS;EAAU,QAAQ;EAAQ,WAAW;EAAM;CAC9F,SAAS;EAAE,WAAW,EAAE,MAAM,eAAe,SAAS;EAAE,SAAS;EAAU,QAAQ;EAAW;CAC9F,SAAS;EAAE,WAAW,EAAE,MAAM,eAAe,SAAS;EAAE,SAAS;EAAU,QAAQ;EAAW;CAC9F,aAAa;EAAE,WAAW,EAAE,MAAM,eAAe,OAAO;EAAE,SAAS;EAAU,QAAQ;EAAU;CAC/F,YAAY;EAAE,WAAW,EAAE,MAAM,eAAe,MAAM;EAAE,SAAS;EAAU,QAAQ;EAAQ;CAC3F,eAAe;EAAE,WAAW;EAAoB,SAAS;EAAU,QAAQ;EAAQ,WAAW;EAAM;CACpG,eAAe;EAAE,WAAW,EAAE,MAAM,eAAe,SAAS;EAAE,SAAS;EAAU,QAAQ;EAAW;CACpG,eAAe;EAAE,WAAW,EAAE,MAAM,eAAe,SAAS;EAAE,SAAS;EAAU,QAAQ;EAAW;CACrG"}

package/dist/notification/context.js

@@ -5,5 +5,5 @@ const [NotificationProvider, useNotificationContext] = createContext({ isOptiona
 
 //#endregion
 export { NotificationProvider, useNotificationContext };
-globalThis.__vuiVersion__ = "4.1.0"
+globalThis.__vuiVersion__ = "5.0.0-alpha.0"
 //# sourceMappingURL=context.js.map

package/dist/notification/index.d.ts

@@ -1,6 +1,6 @@
-import { NotificationProps, NotificationStatus, NotificationStatusMapping, NotificationVariant } from "./notification.types.js";
+import { NotificationIntent, NotificationProps, NotificationStatus, NotificationStatusEntry, NotificationStatusMapping, NotificationVariant, NotificationVariantHierarchy, NotificationVariantLegacy } from "./notification.types.js";
 import { NotificationProvider, useNotificationContext } from "./context.js";
-import { NotificationButton } from "./notificationButton.js";
+import { NotificationAction } from "./notificationAction.js";
 import { NotificationIcon } from "./notificationIcon.js";
 import { NotificationText } from "./notificationText.js";
 import { NotificationTitle } from "./notificationTitle.js";

package/dist/notification/notification.d.ts

@@ -1,7 +1,7 @@
 import { VuiComponent } from "../core/vui.js";
 import "../core/index.js";
 import { NotificationProps } from "./notification.types.js";
-import { NotificationButton } from "./notificationButton.js";
+import { NotificationAction } from "./notificationAction.js";
 import { NotificationIcon } from "./notificationIcon.js";
 import { NotificationText } from "./notificationText.js";
 import { NotificationTitle } from "./notificationTitle.js";
@@ -12,7 +12,7 @@ import { NotificationTitle } from "./notificationTitle.js";
  * Handles multiple states, like info, error or loading.
  */
 declare const Notification: VuiComponent<"div", NotificationProps> & {
-  Button: typeof NotificationButton;
+  Action: typeof NotificationAction;
   Icon: typeof NotificationIcon;
   Text: typeof NotificationText;
   Title: typeof NotificationTitle;

package/dist/notification/notification.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"notification.d.ts","names":[],"sources":["../../src/notification/notification.tsx"],"mappings":";;;;;;;;;;;;AAgBA;cAAa,YAAA,EAgEP,YAAA,QAAoB,iBAAA;EACxB,MAAA,SAAe,kBAAA;EACf,IAAA,SAAa,gBAAA;EACb,IAAA,SAAa,gBAAA;EACb,KAAA,SAAc,iBAAA;AAAA"}
+{"version":3,"file":"notification.d.ts","names":[],"sources":["../../src/notification/notification.tsx"],"mappings":";;;;;;;;;;;;AAsBA;cAAa,YAAA,EAuGP,YAAA,QAAoB,iBAAA;EACxB,MAAA,SAAe,kBAAA;EACf,IAAA,SAAa,gBAAA;EACb,IAAA,SAAa,gBAAA;EACb,KAAA,SAAc,iBAAA;AAAA"}

package/dist/notification/notification.js

@@ -2,81 +2,107 @@ import { isReactText, isString } from "../utils/assertion.js";
 import { filterUndefined } from "../utils/object.js";
 import { cs } from "../utils/styles.js";
 import { useStyleConfig } from "../core/theme.js";
+import styled from "../core/styled.js";
 import vui from "../core/vui.js";
 import Box from "../box/box.js";
 import { NotificationProvider } from "./context.js";
-import { bannerNotificationElevation, closeButtonVariantMapping, notificationStatusMapping } from "./consts.js";
-import NotificationButton from "./notificationButton.js";
+import { DismissButton } from "../button/buttons.js";
+import { LOADING_ICON_PROPS, notificationStatusMapping } from "./consts.js";
+import NotificationAction from "./notificationAction.js";
 import NotificationIcon from "./notificationIcon.js";
 import NotificationText from "./notificationText.js";
 import NotificationTitle from "./notificationTitle.js";
+import { DEFAULT_VARIANT, resolveNotificationVariant } from "./utils.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/notification/notification.tsx
+const NotificationContainer = styled(Box)`
+  ${({ $dismissFg }) => $dismissFg && `--vui-dismiss-fg: ${$dismissFg};`}
+`;
 /**
 * Displays informational content, like text and icon with optional action buttons.
 * Handles multiple states, like info, error or loading.
 */
 const Notification = vui((props, ref) => {
-	const { action, children, className, icon, onClose, size, status, statusMapping, text, title, variant: variantProp = "subtleBlue", verticalAlign, ...rest } = props;
+	const { action, children, className, icon, intent, isLoading, onClose, showDismissButton, size, status, statusMapping, text, title, variant: variantProp = DEFAULT_VARIANT, verticalAlign, ...rest } = props;
 	const statuses = {
 		...notificationStatusMapping,
 		...statusMapping
 	};
-	const { variant = variantProp } = statuses[status ?? ""] ?? {};
+	const statusProps = status ? statuses[status] : void 0;
+	const resolvedVariant = variantProp !== DEFAULT_VARIANT ? variantProp : statusProps?.variant ?? variantProp;
+	const resolvedIntent = intent ?? statusProps?.intent;
+	const resolvedIsLoading = isLoading ?? statusProps?.isLoading;
+	const { themeKey, isBanner } = resolveNotificationVariant(resolvedVariant, resolvedIntent);
 	const styles = useStyleConfig("Notification", {
-		variant,
-		...props
+		variant: themeKey,
+		size
 	});
-	const iconName = isString(icon) ? icon : statuses[status ?? ""]?.iconProps?.name;
+	const iconName = isString(icon) ? icon : !children && (resolvedIsLoading ? LOADING_ICON_PROPS.name : statuses[status ?? ""]?.iconProps?.name) || void 0;
+	const resolvedIconProps = resolvedIsLoading ? LOADING_ICON_PROPS : statuses[status ?? ""]?.iconProps;
 	const context = filterUndefined({
 		size,
-		status
+		status,
+		statusMapping,
+		variant: themeKey,
+		intent: resolvedIntent,
+		isLoading: resolvedIsLoading
 	});
 	const titleDisplay = action ? "block" : "inline";
 	const alignSelf = verticalAlign === "center" ? "center" : "flex-start";
+	const bannerOverrides = isBanner ? {
+		borderColor: styles.container?.bg,
+		elevation: 2
+	} : {};
 	return /* @__PURE__ */ jsx(NotificationProvider, {
 		value: context,
-		children: /* @__PURE__ */ jsxs(Box, {
+		children: /* @__PURE__ */ jsxs(NotificationContainer, {
 			borderRadius: "md",
 			borderWidth: 1,
 			className: cs("vui-notification", className),
-			elevation: variant.includes("banner") ? bannerNotificationElevation : void 0,
 			ref,
 			role: "mark",
 			w: "fit-content",
+			$dismissFg: styles.container?.["--vui-dismiss-fg"],
 			...styles.container,
+			...bannerOverrides,
 			...rest,
 			children: [
 				iconName ? /* @__PURE__ */ jsx(NotificationIcon, {
 					alignSelf,
-					name: iconName
+					name: iconName,
+					...resolvedIconProps
 				}) : icon,
-				children ?? /* @__PURE__ */ jsxs(NotificationText, {
-					alignSelf,
-					children: [
-						isReactText(title) ? /* @__PURE__ */ jsx(NotificationTitle, {
-							display: titleDisplay,
-							text: title
-						}) : title,
-						" ",
-						text
-					]
+				children ?? /* @__PURE__ */ jsxs(Box, {
+					column: alignSelf !== "center",
+					flex: 1,
+					children: [/* @__PURE__ */ jsxs(NotificationText, {
+						alignSelf,
+						mb: action ? 0 : styles.text?.my,
+						children: [
+							" ",
+							isReactText(title) ? /* @__PURE__ */ jsx(NotificationTitle, {
+								display: titleDisplay,
+								text: title
+							}) : title,
+							" ",
+							text
+						]
+					}), action ? /* @__PURE__ */ jsx(NotificationAction, { children: action }) : null]
 				}),
-				action,
-				onClose && /* @__PURE__ */ jsx(NotificationButton, {
+				showDismissButton && /* @__PURE__ */ jsx(DismissButton, {
 					alignSelf,
-					"aria-label": "close",
-					icon: "uiTimes",
-					onClick: onClose,
-					variant: closeButtonVariantMapping?.[variant] ?? variant,
-					w: "32px"
+					"aria-label": "Close",
+					size: "md",
+					onClick: onClose || (() => console.log("Notification dismissed")),
+					...styles.button,
+					mt: alignSelf === "center" ? 0 : styles.button?.mt
 				})
 			]
 		})
 	});
 });
-Notification.Button = NotificationButton;
+Notification.Action = NotificationAction;
 Notification.Icon = NotificationIcon;
 Notification.Text = NotificationText;
 Notification.Title = NotificationTitle;
@@ -84,5 +110,5 @@ Notification.displayName = "Notification";
 
 //#endregion
 export { Notification as default };
-globalThis.__vuiVersion__ = "4.1.0"
+globalThis.__vuiVersion__ = "5.0.0-alpha.0"
 //# sourceMappingURL=notification.js.map

package/dist/notification/notification.js.map

@@ -1 +1 @@
-{"version":3,"file":"notification.js","names":[],"sources":["../../src/notification/notification.tsx"],"sourcesContent":["import Box from '../box'\nimport type { VuiComponent } from '../core'\nimport { useStyleConfig, vui } from '../core'\nimport { cs, filterUndefined, isReactText, isString } from '../utils'\nimport { bannerNotificationElevation, closeButtonVariantMapping, notificationStatusMapping } from './consts'\nimport { NotificationProvider } from './context'\nimport type { NotificationProps } from './notification.types'\nimport NotificationButton from './notificationButton'\nimport NotificationIcon from './notificationIcon'\nimport NotificationText from './notificationText'\nimport NotificationTitle from './notificationTitle'\n\n/**\n * Displays informational content, like text and icon with optional action buttons.\n * Handles multiple states, like info, error or loading.\n */\nexport const Notification = vui<'div', NotificationProps>((props, ref) => {\n  const {\n    action,\n    children,\n    className,\n    icon,\n    onClose,\n    size,\n    status,\n    statusMapping,\n    text,\n    title,\n    variant: variantProp = 'subtleBlue',\n    verticalAlign,\n    ...rest\n  } = props\n  const statuses = { ...notificationStatusMapping, ...statusMapping }\n  const { variant = variantProp } = statuses[status ?? ''] ?? {}\n  const styles = useStyleConfig('Notification', { variant, ...props })\n\n  const iconName = isString(icon) ? icon : statuses[status ?? '']?.iconProps?.name\n\n  const context = filterUndefined<NotificationProps>({ size, status })\n\n  const titleDisplay = action ? 'block' : 'inline'\n\n  const alignSelf = verticalAlign === 'center' ? 'center' : 'flex-start'\n\n  return (\n    <NotificationProvider value={context}>\n      <Box\n        borderRadius=\"md\"\n        borderWidth={1}\n        className={cs('vui-notification', className)}\n        elevation={variant.includes('banner') ? bannerNotificationElevation : undefined}\n        ref={ref}\n        role=\"mark\"\n        w=\"fit-content\"\n        {...styles.container}\n        {...rest}\n      >\n        {iconName ? <NotificationIcon alignSelf={alignSelf} name={iconName} /> : icon}\n\n        {children ?? (\n          <NotificationText alignSelf={alignSelf}>\n            {isReactText(title) ? <NotificationTitle display={titleDisplay} text={title} /> : title} {text}\n          </NotificationText>\n        )}\n\n        {action}\n\n        {onClose && (\n          <NotificationButton\n            alignSelf={alignSelf}\n            aria-label=\"close\"\n            icon=\"uiTimes\"\n            onClick={onClose}\n            variant={closeButtonVariantMapping?.[variant] ?? variant}\n            w=\"32px\"\n          />\n        )}\n      </Box>\n    </NotificationProvider>\n  )\n}) as VuiComponent<'div', NotificationProps> & {\n  Button: typeof NotificationButton\n  Icon: typeof NotificationIcon\n  Text: typeof NotificationText\n  Title: typeof NotificationTitle\n}\n\nNotification.Button = NotificationButton\nNotification.Icon = NotificationIcon\nNotification.Text = NotificationText\nNotification.Title = NotificationTitle\nNotification.displayName = 'Notification'\n\nexport default Notification\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAgBA,MAAa,eAAe,KAA+B,OAAO,QAAQ;CACxE,MAAM,EACJ,QACA,UACA,WACA,MACA,SACA,MACA,QACA,eACA,MACA,OACA,SAAS,cAAc,cACvB,eACA,GAAG,SACD;CACJ,MAAM,WAAW;EAAE,GAAG;EAA2B,GAAG;EAAe;CACnE,MAAM,EAAE,UAAU,gBAAgB,SAAS,UAAU,OAAO,EAAE;CAC9D,MAAM,SAAS,eAAe,gBAAgB;EAAE;EAAS,GAAG;EAAO,CAAC;CAEpE,MAAM,WAAW,SAAS,KAAK,GAAG,OAAO,SAAS,UAAU,KAAK,WAAW;CAE5E,MAAM,UAAU,gBAAmC;EAAE;EAAM;EAAQ,CAAC;CAEpE,MAAM,eAAe,SAAS,UAAU;CAExC,MAAM,YAAY,kBAAkB,WAAW,WAAW;AAE1D,QACE,oBAAC;EAAqB,OAAO;YAC3B,qBAAC;GACC,cAAa;GACb,aAAa;GACb,WAAW,GAAG,oBAAoB,UAAU;GAC5C,WAAW,QAAQ,SAAS,SAAS,GAAG,8BAA8B;GACjE;GACL,MAAK;GACL,GAAE;GACF,GAAI,OAAO;GACX,GAAI;;IAEH,WAAW,oBAAC;KAA4B;KAAW,MAAM;MAAY,GAAG;IAExE,YACC,qBAAC;KAA4B;;MAC1B,YAAY,MAAM,GAAG,oBAAC;OAAkB,SAAS;OAAc,MAAM;QAAS,GAAG;MAAM;MAAE;;MACzE;IAGpB;IAEA,WACC,oBAAC;KACY;KACX,cAAW;KACX,MAAK;KACL,SAAS;KACT,SAAS,4BAA4B,YAAY;KACjD,GAAE;MACF;;IAEA;GACe;EAEzB;AAOF,aAAa,SAAS;AACtB,aAAa,OAAO;AACpB,aAAa,OAAO;AACpB,aAAa,QAAQ;AACrB,aAAa,cAAc"}
+{"version":3,"file":"notification.js","names":[],"sources":["../../src/notification/notification.tsx"],"sourcesContent":["import Box from '../box'\nimport { DismissButton } from '../button'\nimport type { VuiComponent } from '../core'\nimport { styled, useStyleConfig, vui } from '../core'\nimport { cs, filterUndefined, isReactText, isString } from '../utils'\nimport { notificationStatusMapping, LOADING_ICON_PROPS } from './consts'\nimport { NotificationProvider } from './context'\nimport type { NotificationProps } from './notification.types'\nimport NotificationAction from './notificationAction'\nimport NotificationIcon from './notificationIcon'\nimport NotificationText from './notificationText'\nimport NotificationTitle from './notificationTitle'\nimport { resolveNotificationVariant, DEFAULT_VARIANT } from './utils'\n\nconst NotificationContainer = styled(Box)<{ $dismissFg?: string }>`\n  ${({ $dismissFg }) => $dismissFg && `--vui-dismiss-fg: ${$dismissFg};`}\n`\n\n/**\n * Displays informational content, like text and icon with optional action buttons.\n * Handles multiple states, like info, error or loading.\n */\nexport const Notification = vui<'div', NotificationProps>((props, ref) => {\n  const {\n    action,\n    children,\n    className,\n    icon,\n    intent,\n    isLoading,\n    onClose,\n    showDismissButton,\n    size,\n    status,\n    statusMapping,\n    text,\n    title,\n    variant: variantProp = DEFAULT_VARIANT,\n    verticalAlign,\n    ...rest\n  } = props\n\n  const statuses = { ...notificationStatusMapping, ...statusMapping }\n\n  // Derive variant/intent/isLoading from deprecated status prop when not explicitly set.\n  // Explicit props always win; status is a convenience shorthand only.\n  const statusProps = status ? statuses[status] : undefined\n  const resolvedVariant = variantProp !== DEFAULT_VARIANT ? variantProp : (statusProps?.variant ?? variantProp)\n  const resolvedIntent = intent ?? statusProps?.intent\n  const resolvedIsLoading = isLoading ?? statusProps?.isLoading\n\n  const { themeKey, isBanner } = resolveNotificationVariant(resolvedVariant, resolvedIntent)\n\n  const styles = useStyleConfig('Notification', { variant: themeKey, size })\n\n  // Auto-inject icon only when using the default render path (no custom children).\n  // When children are provided, the consumer manages icons via <Notification.Icon>.\n  // An explicit string `icon` prop always wins regardless of children.\n  const iconName = isString(icon)\n    ? icon\n    : (!children && (resolvedIsLoading ? LOADING_ICON_PROPS.name : statuses[status ?? '']?.iconProps?.name)) ||\n      undefined\n\n  const resolvedIconProps = resolvedIsLoading ? LOADING_ICON_PROPS : statuses[status ?? '']?.iconProps\n\n  const context = filterUndefined<NotificationProps>({\n    size,\n    status,\n    statusMapping,\n    variant: themeKey,\n    intent: resolvedIntent,\n    isLoading: resolvedIsLoading,\n  })\n\n  const titleDisplay = action ? 'block' : 'inline'\n\n  const alignSelf = verticalAlign === 'center' ? 'center' : 'flex-start'\n\n  // Banner overrides: hide border and add elevation\n  const bannerOverrides = isBanner\n    ? {\n        borderColor: styles.container?.bg,\n        elevation: 2,\n      }\n    : {}\n\n  return (\n    <NotificationProvider value={context}>\n      <NotificationContainer\n        borderRadius=\"md\"\n        borderWidth={1}\n        className={cs('vui-notification', className)}\n        ref={ref}\n        role=\"mark\"\n        w=\"fit-content\"\n        $dismissFg={styles.container?.['--vui-dismiss-fg']}\n        {...styles.container}\n        {...bannerOverrides}\n        {...rest}\n      >\n        {iconName ? <NotificationIcon alignSelf={alignSelf} name={iconName} {...resolvedIconProps} /> : icon}\n\n        {children ?? (\n          <Box column={alignSelf !== 'center'} flex={1}>\n            <NotificationText alignSelf={alignSelf} mb={action ? 0 : styles.text?.my}>\n              {' '}\n              {isReactText(title) ? <NotificationTitle display={titleDisplay} text={title} /> : title} {text}\n            </NotificationText>\n            {action ? <NotificationAction>{action}</NotificationAction> : null}\n          </Box>\n        )}\n\n        {showDismissButton && (\n          <DismissButton\n            alignSelf={alignSelf}\n            aria-label=\"Close\"\n            size=\"md\"\n            onClick={onClose || (() => console.log('Notification dismissed'))}\n            {...styles.button}\n            mt={alignSelf === 'center' ? 0 : styles.button?.mt}\n          />\n        )}\n      </NotificationContainer>\n    </NotificationProvider>\n  )\n}) as VuiComponent<'div', NotificationProps> & {\n  Action: typeof NotificationAction\n  Icon: typeof NotificationIcon\n  Text: typeof NotificationText\n  Title: typeof NotificationTitle\n}\n\nNotification.Action = NotificationAction\nNotification.Icon = NotificationIcon\nNotification.Text = NotificationText\nNotification.Title = NotificationTitle\nNotification.displayName = 'Notification'\n\nexport default Notification\n"],"mappings":";;;;;;;;;;;;;;;;;;AAcA,MAAM,wBAAwB,OAAO,IAAI,AAAyB;KAC7D,EAAE,iBAAiB,cAAc,qBAAqB,WAAW,GAAG;;;;;;AAOzE,MAAa,eAAe,KAA+B,OAAO,QAAQ;CACxE,MAAM,EACJ,QACA,UACA,WACA,MACA,QACA,WACA,SACA,mBACA,MACA,QACA,eACA,MACA,OACA,SAAS,cAAc,iBACvB,eACA,GAAG,SACD;CAEJ,MAAM,WAAW;EAAE,GAAG;EAA2B,GAAG;EAAe;CAInE,MAAM,cAAc,SAAS,SAAS,UAAU;CAChD,MAAM,kBAAkB,gBAAgB,kBAAkB,cAAe,aAAa,WAAW;CACjG,MAAM,iBAAiB,UAAU,aAAa;CAC9C,MAAM,oBAAoB,aAAa,aAAa;CAEpD,MAAM,EAAE,UAAU,aAAa,2BAA2B,iBAAiB,eAAe;CAE1F,MAAM,SAAS,eAAe,gBAAgB;EAAE,SAAS;EAAU;EAAM,CAAC;CAK1E,MAAM,WAAW,SAAS,KAAK,GAC3B,OACC,CAAC,aAAa,oBAAoB,mBAAmB,OAAO,SAAS,UAAU,KAAK,WAAW,SAChG;CAEJ,MAAM,oBAAoB,oBAAoB,qBAAqB,SAAS,UAAU,KAAK;CAE3F,MAAM,UAAU,gBAAmC;EACjD;EACA;EACA;EACA,SAAS;EACT,QAAQ;EACR,WAAW;EACZ,CAAC;CAEF,MAAM,eAAe,SAAS,UAAU;CAExC,MAAM,YAAY,kBAAkB,WAAW,WAAW;CAG1D,MAAM,kBAAkB,WACpB;EACE,aAAa,OAAO,WAAW;EAC/B,WAAW;EACZ,GACD,EAAE;AAEN,QACE,oBAAC;EAAqB,OAAO;YAC3B,qBAAC;GACC,cAAa;GACb,aAAa;GACb,WAAW,GAAG,oBAAoB,UAAU;GACvC;GACL,MAAK;GACL,GAAE;GACF,YAAY,OAAO,YAAY;GAC/B,GAAI,OAAO;GACX,GAAI;GACJ,GAAI;;IAEH,WAAW,oBAAC;KAA4B;KAAW,MAAM;KAAU,GAAI;MAAqB,GAAG;IAE/F,YACC,qBAAC;KAAI,QAAQ,cAAc;KAAU,MAAM;gBACzC,qBAAC;MAA4B;MAAW,IAAI,SAAS,IAAI,OAAO,MAAM;;OACnE;OACA,YAAY,MAAM,GAAG,oBAAC;QAAkB,SAAS;QAAc,MAAM;SAAS,GAAG;OAAM;OAAE;;OACzE,EAClB,SAAS,oBAAC,gCAAoB,SAA4B,GAAG;MAC1D;IAGP,qBACC,oBAAC;KACY;KACX,cAAW;KACX,MAAK;KACL,SAAS,kBAAkB,QAAQ,IAAI,yBAAyB;KAChE,GAAI,OAAO;KACX,IAAI,cAAc,WAAW,IAAI,OAAO,QAAQ;MAChD;;IAEkB;GACH;EAEzB;AAOF,aAAa,SAAS;AACtB,aAAa,OAAO;AACpB,aAAa,OAAO;AACpB,aAAa,QAAQ;AACrB,aAAa,cAAc"}

package/dist/notification/notification.types.d.ts

@@ -1,4 +1,5 @@
 import { ThemingProps } from "../theme/types.js";
+import "../theme/index.js";
 import { IconProp, IconProps } from "../icon/icon.types.js";
 import "../icon/index.js";
 import { BoxProps } from "../box/box.types.js";
@@ -6,23 +7,44 @@ import "../box/index.js";
 import { JSX, ReactNode } from "react";
 
 //#region src/notification/notification.types.d.ts
-type NotificationProps = Omit<BoxProps, 'size' | 'variant'> & ThemingProps<'Notification'> & {
+type NotificationProps = Omit<BoxProps, 'size' | 'variant'> & Omit<ThemingProps<'Notification'>, 'variant'> & {
   /** Socket displaying a button on the right. */action?: ReactNode; /** Available theme colors for this component. @deprecated */
   colorScheme?: 'blue' | 'green' | 'red' | 'yellow'; /** Socket displaying an icon on the left. */
-  icon?: IconProp | JSX.Element; /** When provided, displays a close button with this function as the callback. */
-  onClose?: () => void; /** Modifies Notification style and content based on the given status. */
+  icon?: IconProp | JSX.Element; /** Semantic colour intent — drives variant colour and auto-injects the matching icon. */
+  intent?: NotificationIntent; /** When true, shows a loading spinner icon and suppresses intent-based icon injection. */
+  isLoading?: boolean; /** Callback function for the dismiss button. Only used when showDismissButton is true. */
+  onClose?: () => void; /** Controls dismiss button visibility. When true, shows the button. Provide onClose for custom handler or use default. */
+  showDismissButton?: boolean; /** Modifies Notification style and content based on the given status. @deprecated Use `variant` + `intent` instead. */
   status?: NotificationStatus; /** Object definition of styles and content for each status. */
   statusMapping?: NotificationStatusMapping; /** Socket displaying text in the middle. */
   text?: ReactNode; /** Socket displaying title in the middle. */
-  title?: ReactNode;
+  title?: ReactNode; /** The notification display style, or a legacy compound variant string. */
+  variant?: NotificationVariantHierarchy | NotificationVariantLegacy | (string & {});
 };
+/** Semantic colour intents for the two-prop API. */
+type NotificationIntent = 'info' | 'success' | 'danger' | 'warning';
+/** Display style hierarchy for the two-prop API. */
+type NotificationVariantHierarchy = 'inline' | 'banner';
+/**
+ * Legacy compound variant strings — kept for backward compatibility.
+ * Prefer `variant` + `intent` instead.
+ * @deprecated
+ */
+type NotificationVariantLegacy = 'subtleBlue' | 'subtleRed' | 'subtleYellow' | 'subtleGreen' | 'bannerBlue' | 'bannerRed' | 'bannerYellow' | 'bannerGreen';
+/**
+ * @deprecated Use `NotificationVariantHierarchy | NotificationVariantLegacy` instead.
+ * Kept as a convenience alias.
+ */
+type NotificationVariant = NotificationVariantHierarchy | NotificationVariantLegacy;
 type NotificationStatus = 'error' | 'info' | 'loading' | 'success' | 'warning' | 'bannerError' | 'bannerInfo' | 'bannerLoading' | 'bannerSuccess' | 'bannerWarning';
-type NotificationVariant = 'subtleBlue' | 'subtleRed' | 'subtleYellow' | 'subtleGreen' | 'bannerBlue' | 'bannerRed' | 'bannerYellow' | 'bannerGreen';
-type NotificationStatusMapping = Record<string, {
+type NotificationStatusEntry = {
   iconProps: IconProps;
-  variant?: NotificationProps['variant'];
-}>;
+  intent?: NotificationIntent;
+  isLoading?: boolean;
+  variant?: NotificationVariantHierarchy | NotificationVariantLegacy;
+};
+type NotificationStatusMapping = Record<string, NotificationStatusEntry>;
 //#endregion
-export { NotificationProps, NotificationStatus, NotificationStatusMapping, NotificationVariant };
+export { NotificationIntent, NotificationProps, NotificationStatus, NotificationStatusEntry, NotificationStatusMapping, NotificationVariant, NotificationVariantHierarchy, NotificationVariantLegacy };
 
 //# sourceMappingURL=notification.types.d.ts.map

package/dist/notification/notification.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"notification.types.d.ts","names":[],"sources":["../../src/notification/notification.types.ts"],"mappings":";;;;;;;;KAMY,iBAAA,GAAoB,IAAA,CAAK,QAAA,wBACnC,YAAA;iDAEE,MAAA,GAAS,SAAA;EAET,WAAA,wCALyB;EAOzB,IAAA,GAAO,QAAA,GAAW,GAAA,CAAI,OAAA,EAPW;EASjC,OAAA,eARF;EAUE,MAAA,GAAS,kBAAA,EAJF;EAMP,aAAA,GAAgB,yBAAA,EAFP;EAIT,IAAA,GAAO,SAAA,EAAA;EAEP,KAAA,GAAQ,SAAA;AAAA;AAAA,KAGA,kBAAA;AAAA,KAYA,mBAAA;AAAA,KAUA,yBAAA,GAA4B,MAAA;EAGpC,SAAA,EAAW,SAAA;EACX,OAAA,GAAU,iBAAA;AAAA"}
+{"version":3,"file":"notification.types.d.ts","names":[],"sources":["../../src/notification/notification.types.ts"],"mappings":";;;;;;;;;KAMY,iBAAA,GAAoB,IAAA,CAAK,QAAA,wBACnC,IAAA,CAAK,YAAA;iDAEH,MAAA,GAAS,SAAA;EAET,WAAA,wCALQ;EAOR,IAAA,GAAO,QAAA,GAAW,GAAA,CAAI,OAAA;EAEtB,MAAA,GAAS,kBAAA,EATmB;EAW5B,SAAA,YAVF;EAYE,OAAA,eANO;EAQP,iBAAA,YANS;EAQT,MAAA,GAAS,kBAAA,EAEO;EAAhB,aAAA,GAAgB,yBAAA,EAIR;EAFR,IAAA,GAAO,SAAA,EAIkC;EAFzC,KAAA,GAAQ,SAAA,EAE0D;EAAlE,OAAA,GAAU,4BAAA,GAA+B,yBAAA;AAAA;;KAIjC,kBAAA;;KAGA,4BAAA;;;;;;KAOA,yBAAA;;;;;KAcA,mBAAA,GAAsB,4BAAA,GAA+B,yBAAA;AAAA,KAErD,kBAAA;AAAA,KAYA,uBAAA;EACV,SAAA,EAAW,SAAA;EACX,MAAA,GAAS,kBAAA;EACT,SAAA;EACA,OAAA,GAAU,4BAAA,GAA+B,yBAAA;AAAA;AAAA,KAG/B,yBAAA,GAA4B,MAAA,SAAe,uBAAA"}

package/dist/notification/notificationAction.d.ts

@@ -0,0 +1,12 @@
+import { VuiComponent } from "../core/vui.js";
+import { BoxProps } from "../box/box.types.js";
+import "../box/index.js";
+import "../index.js";
+
+//#region src/notification/notificationAction.d.ts
+/** Displays an action button within the Notification. */
+declare const NotificationAction: VuiComponent<"div", BoxProps>;
+//#endregion
+export { NotificationAction };
+
+//# sourceMappingURL=notificationAction.d.ts.map

package/dist/notification/notificationAction.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"notificationAction.d.ts","names":[],"sources":["../../src/notification/notificationAction.tsx"],"mappings":";;;;;;;cASa,kBAAA,EAAkB,YAAA,QAAA,QAAA"}

package/dist/notification/notificationAction.js

@@ -0,0 +1,38 @@
+import { cs } from "../utils/styles.js";
+import { useStyleConfig } from "../core/theme.js";
+import vui from "../core/vui.js";
+import Box from "../box/box.js";
+import { useNotificationContext } from "./context.js";
+import { cloneElement, isValidElement } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/notification/notificationAction.tsx
+/** Displays an action button within the Notification. */
+const NotificationAction = vui((props, ref) => {
+	const { children, className, ...rest } = props;
+	const styles = useStyleConfig("Notification", useNotificationContext());
+	const enhancedChild = isValidElement(children) && typeof children.type !== "string" ? cloneElement(children, {
+		size: "md",
+		bg: styles.action?.bg,
+		borderColor: styles.action?.borderColor,
+		color: styles.action?.color,
+		hoverBg: styles.action?.hoverBg,
+		hoverColor: styles.action?.hoverColor,
+		activeBg: styles.action?.activeBg,
+		activeColor: styles.action?.activeColor,
+		...children.props
+	}) : children;
+	return /* @__PURE__ */ jsx(Box, {
+		className: cs("vui-notificationAction", className),
+		ref,
+		...styles.actionBox,
+		...rest,
+		children: enhancedChild
+	});
+});
+NotificationAction.displayName = "NotificationAction";
+
+//#endregion
+export { NotificationAction as default };
+globalThis.__vuiVersion__ = "5.0.0-alpha.0"
+//# sourceMappingURL=notificationAction.js.map

package/dist/notification/notificationAction.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"notificationAction.js","names":[],"sources":["../../src/notification/notificationAction.tsx"],"sourcesContent":["import { cloneElement, isValidElement } from 'react'\n\nimport Box from '../box'\nimport type { BoxProps } from '../box'\nimport { useStyleConfig, vui } from '../core'\nimport { cs } from '../utils'\nimport { useNotificationContext } from './context'\n\n/** Displays an action button within the Notification. */\nexport const NotificationAction = vui<'div', BoxProps>((props, ref) => {\n  const { children, className, ...rest } = props\n  const styles = useStyleConfig('Notification', useNotificationContext())\n\n  // Clone child and apply color overrides from notification theme\n  const enhancedChild =\n    isValidElement(children) && typeof children.type !== 'string'\n      ? cloneElement(children as any, {\n          size: 'md',\n          bg: styles.action?.bg,\n          borderColor: styles.action?.borderColor,\n          color: styles.action?.color,\n          hoverBg: styles.action?.hoverBg,\n          hoverColor: styles.action?.hoverColor,\n          activeBg: styles.action?.activeBg,\n          activeColor: styles.action?.activeColor,\n          ...(children.props as any),\n        })\n      : children\n\n  return (\n    <Box className={cs('vui-notificationAction', className)} ref={ref} {...styles.actionBox} {...rest}>\n      {enhancedChild}\n    </Box>\n  )\n})\n\nNotificationAction.displayName = 'NotificationAction'\nexport default NotificationAction\n"],"mappings":";;;;;;;;;;AASA,MAAa,qBAAqB,KAAsB,OAAO,QAAQ;CACrE,MAAM,EAAE,UAAU,WAAW,GAAG,SAAS;CACzC,MAAM,SAAS,eAAe,gBAAgB,wBAAwB,CAAC;CAGvE,MAAM,gBACJ,eAAe,SAAS,IAAI,OAAO,SAAS,SAAS,WACjD,aAAa,UAAiB;EAC5B,MAAM;EACN,IAAI,OAAO,QAAQ;EACnB,aAAa,OAAO,QAAQ;EAC5B,OAAO,OAAO,QAAQ;EACtB,SAAS,OAAO,QAAQ;EACxB,YAAY,OAAO,QAAQ;EAC3B,UAAU,OAAO,QAAQ;EACzB,aAAa,OAAO,QAAQ;EAC5B,GAAI,SAAS;EACd,CAAC,GACF;AAEN,QACE,oBAAC;EAAI,WAAW,GAAG,0BAA0B,UAAU;EAAO;EAAK,GAAI,OAAO;EAAW,GAAI;YAC1F;GACG;EAER;AAEF,mBAAmB,cAAc"}

package/dist/notification/notificationIcon.d.ts

@@ -4,7 +4,7 @@ import "../icon/index.js";
 import "../index.js";
 
 //#region src/notification/notificationIcon.d.ts
-/** Displays an icon based on the status within the Notification. */
+/** Displays an icon based on the status or intent within the Notification. */
 declare const NotificationIcon: VuiComponent<"svg", IconProps>;
 //#endregion
 export { NotificationIcon };

package/dist/notification/notificationIcon.js

@@ -2,12 +2,12 @@ import { cs } from "../utils/styles.js";
 import { useStyleConfig } from "../core/theme.js";
 import vui from "../core/vui.js";
 import { useNotificationContext } from "./context.js";
-import { notificationStatusMapping } from "./consts.js";
 import Icon from "../icon/icon.js";
+import { INTENT_ICON_MAP, LOADING_ICON_PROPS, notificationStatusMapping } from "./consts.js";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/notification/notificationIcon.tsx
-/** Displays an icon based on the status within the Notification. */
+/** Displays an icon based on the status or intent within the Notification. */
 const NotificationIcon = vui((props, ref) => {
 	const { className, alignSelf, ...rest } = props;
 	const mergedProps = {
@@ -15,19 +15,20 @@ const NotificationIcon = vui((props, ref) => {
 		...props
 	};
 	const styles = useStyleConfig("Notification", useNotificationContext());
-	const { status = "" } = mergedProps;
-	const { iconProps } = notificationStatusMapping[status] ?? {};
-	const marginTop = alignSelf === "center" ? "0" : "16px";
+	const { status = "", statusMapping, intent, isLoading } = mergedProps;
+	const resolvedIconProps = isLoading ? LOADING_ICON_PROPS : {
+		...notificationStatusMapping,
+		...statusMapping
+	}[status]?.iconProps ?? (intent ? INTENT_ICON_MAP[intent] : void 0);
 	return /* @__PURE__ */ jsx(Icon, {
 		alignSelf,
 		className: cs("vui-notificationIcon", className),
-		ml: "16px",
-		mt: marginTop,
 		ref,
 		size: "md",
 		variant: "loading",
 		...styles.icon,
-		...iconProps,
+		mt: alignSelf === "center" ? 0 : styles.icon?.mt,
+		...resolvedIconProps,
 		...rest
 	});
 });
@@ -35,5 +36,5 @@ NotificationIcon.displayName = "NotificationIcon";
 
 //#endregion
 export { NotificationIcon as default };
-globalThis.__vuiVersion__ = "4.1.0"
+globalThis.__vuiVersion__ = "5.0.0-alpha.0"
 //# sourceMappingURL=notificationIcon.js.map