@veracity/vui 5.0.0-alpha.1 → 5.0.0-alpha.3

package/dist/notification/consts.js.map

@@ -1 +1 @@
-{"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"}
+{"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\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":";;;;AAKA,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__ = "5.0.0-alpha.0"
+globalThis.__vuiVersion__ = "5.0.0-alpha.3"
 //# sourceMappingURL=context.js.map

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

@@ -1 +1 @@
-{"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"}
+{"version":3,"file":"notification.d.ts","names":[],"sources":["../../src/notification/notification.tsx"],"mappings":";;;;;;;;;;;;AAuDA;cAAa,YAAA,EAmGP,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

@@ -1,13 +1,14 @@
 import { isReactText, isString } from "../utils/assertion.js";
 import { filterUndefined } from "../utils/object.js";
 import { cs } from "../utils/styles.js";
+import shadows_default from "../theme/foundations/shadows.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 { DismissButton } from "../button/buttons.js";
-import { LOADING_ICON_PROPS, notificationStatusMapping } from "./consts.js";
+import { INTENT_ICON_MAP, LOADING_ICON_PROPS, notificationStatusMapping } from "./consts.js";
 import NotificationAction from "./notificationAction.js";
 import NotificationIcon from "./notificationIcon.js";
 import NotificationText from "./notificationText.js";
@@ -18,6 +19,34 @@ import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/notification/notification.tsx
 const NotificationContainer = styled(Box)`
   ${({ $dismissFg }) => $dismissFg && `--vui-dismiss-fg: ${$dismissFg};`}
+  ${`
+  @keyframes linkSwipe {
+    from {
+      background-size: 0 1px;
+    }
+    to {
+      background-size: 100% 1px;
+    }
+  }
+`}
+  .vui-notificationText a {
+    text-decoration: none;
+    background: linear-gradient(to right, currentColor, currentColor);
+    background-size: 100% 1px;
+    background-position: 0 100%;
+    background-repeat: no-repeat;
+    padding-bottom: 2px;
+  }
+  .vui-notificationText a:hover {
+    animation: linkSwipe 0.5s ease forwards;
+    background-size: 100% 1px;
+  }
+  ${({ $isBanner }) => $isBanner && `
+    box-shadow: ${shadows_default.md};
+    position: relative;
+    width: 100%;
+    border: none;
+  `}
 `;
 /**
 * Displays informational content, like text and icon with optional action buttons.
@@ -38,8 +67,9 @@ const Notification = vui((props, ref) => {
 		variant: themeKey,
 		size
 	});
-	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 autoIconProps = resolvedIsLoading ? LOADING_ICON_PROPS : statuses[status ?? ""]?.iconProps ?? (resolvedIntent ? INTENT_ICON_MAP[resolvedIntent] : void 0);
+	const showIcon = icon !== "";
+	const iconName = showIcon ? isString(icon) ? icon : !children && autoIconProps?.name || void 0 : void 0;
 	const context = filterUndefined({
 		size,
 		status,
@@ -48,12 +78,7 @@ const Notification = vui((props, ref) => {
 		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(NotificationContainer, {
@@ -61,31 +86,26 @@ const Notification = vui((props, ref) => {
 			borderWidth: 1,
 			className: cs("vui-notification", className),
 			ref,
-			role: "mark",
+			role: "status",
 			w: "fit-content",
 			$dismissFg: styles.container?.["--vui-dismiss-fg"],
+			$isBanner: isBanner,
 			...styles.container,
-			...bannerOverrides,
 			...rest,
 			children: [
 				iconName ? /* @__PURE__ */ jsx(NotificationIcon, {
 					alignSelf,
-					name: iconName,
-					...resolvedIconProps
-				}) : icon,
+					...autoIconProps,
+					name: iconName
+				}) : showIcon ? icon : null,
 				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,
-							" ",
+							title ? isReactText(title) ? /* @__PURE__ */ jsx(NotificationTitle, { text: title }) : title : null,
+							title ? text && alignSelf === "center" ? " " : /* @__PURE__ */ jsx("br", {}) : null,
 							text
 						]
 					}), action ? /* @__PURE__ */ jsx(NotificationAction, { children: action }) : null]
@@ -94,7 +114,7 @@ const Notification = vui((props, ref) => {
 					alignSelf,
 					"aria-label": "Close",
 					size: "md",
-					onClick: onClose || (() => console.log("Notification dismissed")),
+					onClick: onClose || (() => {}),
 					...styles.button,
 					mt: alignSelf === "center" ? 0 : styles.button?.mt
 				})
@@ -110,5 +130,5 @@ Notification.displayName = "Notification";
 
 //#endregion
 export { Notification as default };
-globalThis.__vuiVersion__ = "5.0.0-alpha.0"
+globalThis.__vuiVersion__ = "5.0.0-alpha.3"
 //# 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 { 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"}
+{"version":3,"file":"notification.js","names":["shadows"],"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 shadows from '../theme/foundations/shadows'\nimport { cs, filterUndefined, isReactText, isString } from '../utils'\nimport { INTENT_ICON_MAP, 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 linkSwipeAnimation = `\n  @keyframes linkSwipe {\n    from {\n      background-size: 0 1px;\n    }\n    to {\n      background-size: 100% 1px;\n    }\n  }\n`\n\nconst NotificationContainer = styled(Box)<{ $dismissFg?: string; $isBanner?: boolean }>`\n  ${({ $dismissFg }) => $dismissFg && `--vui-dismiss-fg: ${$dismissFg};`}\n  ${linkSwipeAnimation}\n  .vui-notificationText a {\n    text-decoration: none;\n    background: linear-gradient(to right, currentColor, currentColor);\n    background-size: 100% 1px;\n    background-position: 0 100%;\n    background-repeat: no-repeat;\n    padding-bottom: 2px;\n  }\n  .vui-notificationText a:hover {\n    animation: linkSwipe 0.5s ease forwards;\n    background-size: 100% 1px;\n  }\n  ${({ $isBanner }) =>\n    $isBanner &&\n    `\n    box-shadow: ${shadows.md};\n    position: relative;\n    width: 100%;\n    border: none;\n  `}\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  // Priority: explicit icon → loading → status mapping → intent mapping\n  const autoIconProps = resolvedIsLoading\n    ? LOADING_ICON_PROPS\n    : (statuses[status ?? '']?.iconProps ?? (resolvedIntent ? INTENT_ICON_MAP[resolvedIntent] : undefined))\n\n  const showIcon = icon !== ''\n  const iconName = showIcon ? (isString(icon) ? icon : (!children && autoIconProps?.name) || undefined) : undefined\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 alignSelf = verticalAlign === 'center' ? 'center' : 'flex-start'\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=\"status\"\n        w=\"fit-content\"\n        $dismissFg={styles.container?.['--vui-dismiss-fg']}\n        $isBanner={isBanner}\n        {...styles.container}\n        {...rest}\n      >\n        {iconName ? (\n          <NotificationIcon alignSelf={alignSelf} {...autoIconProps} name={iconName} />\n        ) : showIcon ? (\n          icon\n        ) : null}\n\n        {children ?? (\n          <Box column={alignSelf !== 'center'} flex={1}>\n            <NotificationText mb={action ? 0 : styles.text?.my}>\n              {title ? isReactText(title) ? <NotificationTitle text={title} /> : title : null}\n              {title ? text && alignSelf === 'center' ? ' ' : <br /> : null}\n              {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 || (() => {})}\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":";;;;;;;;;;;;;;;;;;;AA0BA,MAAM,wBAAwB,OAAO,IAAI,AAA8C;KAClF,EAAE,iBAAiB,cAAc,qBAAqB,WAAW,GAAG;IAZ9C;;;;;;;;;EAaJ;;;;;;;;;;;;;KAalB,EAAE,gBACH,aACA;kBACcA,gBAAQ,GAAG;;;;IAIzB;;;;;;AAOJ,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;CAM1E,MAAM,gBAAgB,oBAClB,qBACC,SAAS,UAAU,KAAK,cAAc,iBAAiB,gBAAgB,kBAAkB;CAE9F,MAAM,WAAW,SAAS;CAC1B,MAAM,WAAW,WAAY,SAAS,KAAK,GAAG,OAAQ,CAAC,YAAY,eAAe,QAAS,SAAa;CAExG,MAAM,UAAU,gBAAmC;EACjD;EACA;EACA;EACA,SAAS;EACT,QAAQ;EACR,WAAW;EACZ,CAAC;CAEF,MAAM,YAAY,kBAAkB,WAAW,WAAW;AAE1D,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,WAAW;GACX,GAAI,OAAO;GACX,GAAI;;IAEH,WACC,oBAAC;KAA4B;KAAW,GAAI;KAAe,MAAM;MAAY,GAC3E,WACF,OACE;IAEH,YACC,qBAAC;KAAI,QAAQ,cAAc;KAAU,MAAM;gBACzC,qBAAC;MAAiB,IAAI,SAAS,IAAI,OAAO,MAAM;;OAC7C,QAAQ,YAAY,MAAM,GAAG,oBAAC,qBAAkB,MAAM,QAAS,GAAG,QAAQ;OAC1E,QAAQ,QAAQ,cAAc,WAAW,MAAM,oBAAC,SAAK,GAAG;OACxD;;OACgB,EAClB,SAAS,oBAAC,gCAAoB,SAA4B,GAAG;MAC1D;IAGP,qBACC,oBAAC;KACY;KACX,cAAW;KACX,MAAK;KACL,SAAS,kBAAkB;KAC3B,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

@@ -9,17 +9,18 @@ import { JSX, ReactNode } from "react";
 //#region src/notification/notification.types.d.ts
 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; /** Semantic colour intent — drives variant colour and auto-injects the matching icon. */
+  colorScheme?: 'blue' | 'green' | 'red' | 'yellow'; /** Socket displaying an icon on the left. Set to `''` to suppress auto-injected icons. @deprecated Icons are now auto-injected based on `intent`. */
+  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. */
+  status?: NotificationStatus; /** Object definition of styles and content for each status. @deprecated Use `variant` + `intent` instead. */
   statusMapping?: NotificationStatusMapping; /** Socket displaying text in the middle. */
   text?: ReactNode; /** Socket displaying title in the middle. */
   title?: ReactNode; /** The notification display style, or a legacy compound variant string. */
-  variant?: NotificationVariantHierarchy | NotificationVariantLegacy | (string & {});
+  variant?: NotificationVariantHierarchy | NotificationVariantLegacy | (string & {}); /** Vertical alignment of icon and dismiss button. Use `'center'` for single-line notifications. */
+  verticalAlign?: 'center' | 'flex-start';
 };
 /** Semantic colour intents for the two-prop API. */
 type NotificationIntent = 'info' | 'success' | 'danger' | 'warning';

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,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"}
+{"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,kBAzBR;EA2BjC,aAAA;AAAA;;KAIQ,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.map

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

package/dist/notification/notificationAction.js

@@ -3,7 +3,6 @@ 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
@@ -11,28 +10,17 @@ import { jsx } from "react/jsx-runtime";
 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
+		children
 	});
 });
 NotificationAction.displayName = "NotificationAction";
 
 //#endregion
 export { NotificationAction as default };
-globalThis.__vuiVersion__ = "5.0.0-alpha.0"
+globalThis.__vuiVersion__ = "5.0.0-alpha.3"
 //# sourceMappingURL=notificationAction.js.map

package/dist/notification/notificationAction.js.map

@@ -1 +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"}
+{"version":3,"file":"notificationAction.js","names":[],"sources":["../../src/notification/notificationAction.tsx"],"sourcesContent":["import 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  return (\n    <Box className={cs('vui-notificationAction', className)} ref={ref} {...styles.actionBox} {...rest}>\n      {children}\n    </Box>\n  )\n})\n\nNotificationAction.displayName = 'NotificationAction'\nexport default NotificationAction\n"],"mappings":";;;;;;;;;AAOA,MAAa,qBAAqB,KAAsB,OAAO,QAAQ;CACrE,MAAM,EAAE,UAAU,WAAW,GAAG,SAAS;CACzC,MAAM,SAAS,eAAe,gBAAgB,wBAAwB,CAAC;AAEvE,QACE,oBAAC;EAAI,WAAW,GAAG,0BAA0B,UAAU;EAAO;EAAK,GAAI,OAAO;EAAW,GAAI;EAC1F;GACG;EAER;AAEF,mBAAmB,cAAc"}

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

@@ -1 +1 @@
-{"version":3,"file":"notificationIcon.d.ts","names":[],"sources":["../../src/notification/notificationIcon.tsx"],"mappings":";;;;;;;cAQa,gBAAA,EAAgB,YAAA,QAAA,SAAA"}
+{"version":3,"file":"notificationIcon.d.ts","names":[],"sources":["../../src/notification/notificationIcon.tsx"],"mappings":";;;;;;;cASa,gBAAA,EAAgB,YAAA,QAAA,SAAA"}

package/dist/notification/notificationIcon.js

@@ -36,5 +36,5 @@ NotificationIcon.displayName = "NotificationIcon";
 
 //#endregion
 export { NotificationIcon as default };
-globalThis.__vuiVersion__ = "5.0.0-alpha.0"
+globalThis.__vuiVersion__ = "5.0.0-alpha.3"
 //# sourceMappingURL=notificationIcon.js.map

package/dist/notification/notificationIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"notificationIcon.js","names":[],"sources":["../../src/notification/notificationIcon.tsx"],"sourcesContent":["import { useStyleConfig, vui } from '../core'\nimport type { IconProps } from '../icon'\nimport Icon from '../icon'\nimport { cs } from '../utils'\nimport { notificationStatusMapping, INTENT_ICON_MAP, LOADING_ICON_PROPS } from './consts'\nimport { useNotificationContext } from './context'\n\n/** Displays an icon based on the status or intent within the Notification. */\nexport const NotificationIcon = vui<'svg', IconProps>((props, ref) => {\n  const { className, alignSelf, ...rest } = props\n  const mergedProps = { ...useNotificationContext(), ...props }\n  const styles = useStyleConfig('Notification', useNotificationContext())\n\n  const { status = '', statusMapping, intent, isLoading } = mergedProps\n\n  const resolvedIconProps = isLoading\n    ? LOADING_ICON_PROPS\n    : ({ ...notificationStatusMapping, ...statusMapping }[status]?.iconProps ??\n      (intent ? INTENT_ICON_MAP[intent] : undefined))\n\n  return (\n    <Icon\n      alignSelf={alignSelf}\n      className={cs('vui-notificationIcon', className)}\n      ref={ref}\n      size=\"md\"\n      variant=\"loading\"\n      {...styles.icon}\n      mt={alignSelf === 'center' ? 0 : styles.icon?.mt}\n      {...resolvedIconProps}\n      {...rest}\n    />\n  )\n})\n\nNotificationIcon.displayName = 'NotificationIcon'\n\nexport default NotificationIcon\n"],"mappings":";;;;;;;;;;AAQA,MAAa,mBAAmB,KAAuB,OAAO,QAAQ;CACpE,MAAM,EAAE,WAAW,WAAW,GAAG,SAAS;CAC1C,MAAM,cAAc;EAAE,GAAG,wBAAwB;EAAE,GAAG;EAAO;CAC7D,MAAM,SAAS,eAAe,gBAAgB,wBAAwB,CAAC;CAEvE,MAAM,EAAE,SAAS,IAAI,eAAe,QAAQ,cAAc;CAE1D,MAAM,oBAAoB,YACtB,qBACC;EAAE,GAAG;EAA2B,GAAG;EAAe,CAAC,SAAS,cAC5D,SAAS,gBAAgB,UAAU;AAExC,QACE,oBAAC;EACY;EACX,WAAW,GAAG,wBAAwB,UAAU;EAC3C;EACL,MAAK;EACL,SAAQ;EACR,GAAI,OAAO;EACX,IAAI,cAAc,WAAW,IAAI,OAAO,MAAM;EAC9C,GAAI;EACJ,GAAI;GACJ;EAEJ;AAEF,iBAAiB,cAAc"}
+{"version":3,"file":"notificationIcon.js","names":[],"sources":["../../src/notification/notificationIcon.tsx"],"sourcesContent":["import { useStyleConfig, vui } from '../core'\nimport type { IconProps } from '../icon'\nimport Icon from '../icon'\nimport { cs } from '../utils'\nimport { notificationStatusMapping, INTENT_ICON_MAP, LOADING_ICON_PROPS } from './consts'\nimport { useNotificationContext } from './context'\nimport type { NotificationIntent } from './notification.types'\n\n/** Displays an icon based on the status or intent within the Notification. */\nexport const NotificationIcon = vui<'svg', IconProps>((props, ref) => {\n  const { className, alignSelf, ...rest } = props\n  const mergedProps = { ...useNotificationContext(), ...props }\n  const styles = useStyleConfig('Notification', useNotificationContext())\n\n  const { status = '', statusMapping, intent, isLoading } = mergedProps\n\n  const resolvedIconProps = isLoading\n    ? LOADING_ICON_PROPS\n    : ({ ...notificationStatusMapping, ...statusMapping }[status]?.iconProps ??\n      (intent ? INTENT_ICON_MAP[intent as NotificationIntent] : undefined))\n\n  return (\n    <Icon\n      alignSelf={alignSelf}\n      className={cs('vui-notificationIcon', className)}\n      ref={ref}\n      size=\"md\"\n      variant=\"loading\"\n      {...styles.icon}\n      mt={alignSelf === 'center' ? 0 : styles.icon?.mt}\n      {...resolvedIconProps}\n      {...rest}\n    />\n  )\n})\n\nNotificationIcon.displayName = 'NotificationIcon'\n\nexport default NotificationIcon\n"],"mappings":";;;;;;;;;;AASA,MAAa,mBAAmB,KAAuB,OAAO,QAAQ;CACpE,MAAM,EAAE,WAAW,WAAW,GAAG,SAAS;CAC1C,MAAM,cAAc;EAAE,GAAG,wBAAwB;EAAE,GAAG;EAAO;CAC7D,MAAM,SAAS,eAAe,gBAAgB,wBAAwB,CAAC;CAEvE,MAAM,EAAE,SAAS,IAAI,eAAe,QAAQ,cAAc;CAE1D,MAAM,oBAAoB,YACtB,qBACC;EAAE,GAAG;EAA2B,GAAG;EAAe,CAAC,SAAS,cAC5D,SAAS,gBAAgB,UAAgC;AAE9D,QACE,oBAAC;EACY;EACX,WAAW,GAAG,wBAAwB,UAAU;EAC3C;EACL,MAAK;EACL,SAAQ;EACR,GAAI,OAAO;EACX,IAAI,cAAc,WAAW,IAAI,OAAO,MAAM;EAC9C,GAAI;EACJ,GAAI;GACJ;EAEJ;AAEF,iBAAiB,cAAc"}

package/dist/notification/notificationText.js

@@ -21,5 +21,5 @@ NotificationText.displayName = "NotificationText";
 
 //#endregion
 export { NotificationText as default };
-globalThis.__vuiVersion__ = "5.0.0-alpha.0"
+globalThis.__vuiVersion__ = "5.0.0-alpha.3"
 //# sourceMappingURL=notificationText.js.map

package/dist/notification/notificationTitle.js

@@ -22,5 +22,5 @@ NotificationTitle.displayName = "NotificationTitle";
 
 //#endregion
 export { NotificationTitle as default };
-globalThis.__vuiVersion__ = "5.0.0-alpha.0"
+globalThis.__vuiVersion__ = "5.0.0-alpha.3"
 //# sourceMappingURL=notificationTitle.js.map

package/dist/notification/theme.js

@@ -4,58 +4,31 @@ const intentTokens = {
 	info: {
 		feedbackSubtle: "var(--vui-feedback-info-subtle)",
 		feedbackSolid: "var(--vui-feedback-info-solid)",
-		dismissColor: "var(--vui-feedback-info-solid)",
-		actionSolid: "var(--vui-action-brand-solid)",
-		actionSolidInverse: "var(--vui-action-brand-solid-inverse)",
-		actionSolidHover: "var(--vui-action-brand-solid-hover)",
-		actionSolidPressed: "var(--vui-action-brand-solid-pressed)"
+		dismissColor: "var(--vui-feedback-info-solid)"
 	},
 	danger: {
 		feedbackSubtle: "var(--vui-feedback-danger-subtle)",
 		feedbackSolid: "var(--vui-feedback-danger-solid)",
-		dismissColor: "var(--vui-feedback-danger-solid)",
-		actionSolid: "var(--vui-action-danger-solid)",
-		actionSolidInverse: "var(--vui-action-danger-solid-inverse)",
-		actionSolidHover: "var(--vui-action-danger-solid-hover)",
-		actionSolidPressed: "var(--vui-action-danger-solid-pressed)"
+		dismissColor: "var(--vui-feedback-danger-solid)"
 	},
 	warning: {
 		feedbackSubtle: "var(--vui-feedback-warning-subtle)",
 		feedbackSolid: "var(--vui-feedback-warning-solid)",
-		dismissColor: "var(--vui-feedback-warning-solid)",
-		actionSolid: "var(--vui-action-yellow-solid)",
-		actionSolidInverse: "var(--vui-action-yellow-solid-inverse)",
-		actionSolidHover: "var(--vui-action-yellow-solid-hover)",
-		actionSolidPressed: "var(--vui-action-yellow-solid-pressed)"
+		dismissColor: "var(--vui-feedback-warning-solid)"
 	},
 	success: {
 		feedbackSubtle: "var(--vui-feedback-success-subtle)",
 		feedbackSolid: "var(--vui-feedback-success-solid)",
-		dismissColor: "var(--vui-action-success-subtle-inverse)",
-		actionSolid: "var(--vui-action-success-solid)",
-		actionSolidInverse: "var(--vui-action-success-solid-inverse)",
-		actionSolidHover: "var(--vui-action-success-solid-hover)",
-		actionSolidPressed: "var(--vui-action-success-solid-pressed)"
+		dismissColor: "var(--vui-action-success-subtle-inverse)"
 	}
 };
 /** Variant styles per visual hierarchy, composed from intent tokens. */
-const hierarchyRules = { inline: (t) => ({
-	container: {
-		bg: t.feedbackSubtle,
-		borderColor: t.feedbackSolid,
-		color: t.feedbackSolid,
-		"--vui-dismiss-fg": t.dismissColor
-	},
-	action: {
-		bg: t.actionSolid,
-		borderColor: t.actionSolid,
-		color: t.actionSolidInverse,
-		hoverBg: t.actionSolidHover,
-		hoverColor: t.actionSolidInverse,
-		activeBg: t.actionSolidPressed,
-		activeColor: t.actionSolidInverse
-	}
-}) };
+const hierarchyRules = { inline: (t) => ({ container: {
+	bg: t.feedbackSubtle,
+	borderColor: t.feedbackSolid,
+	color: t.feedbackSolid,
+	"--vui-dismiss-fg": t.dismissColor
+} }) };
 const baseStyle = {
 	container: {
 		borderRadius: "var(--vui-notification-border-radius, 0)",
@@ -82,8 +55,8 @@ const baseStyle = {
 		my: "var(--vui-notification-text-margin-y, 16px)"
 	},
 	actionBox: {
-		my: "var(--vui-notification-action-margin-y, 8px)",
-		mx: "var(--vui-notification-action-margin-x, 8px)"
+		my: "var(--vui-notification-action-margin-y, 16px)",
+		mx: "var(--vui-notification-action-margin-x, 16px)"
 	}
 };
 const parts = [
@@ -92,8 +65,7 @@ const parts = [
 	"icon",
 	"text",
 	"title",
-	"actionBox",
-	"action"
+	"actionBox"
 ];
 const sizes = {};
 const generatedVariants = Object.fromEntries(Object.entries(intentTokens).flatMap(([intentKey, tokens]) => Object.entries(hierarchyRules).map(([hierarchyKey, buildVariant]) => [`${hierarchyKey}${intentKey.charAt(0).toUpperCase()}${intentKey.slice(1)}`, buildVariant(tokens)])));
@@ -113,5 +85,5 @@ var theme_default = {
 
 //#endregion
 export { theme_default as default };
-globalThis.__vuiVersion__ = "5.0.0-alpha.0"
+globalThis.__vuiVersion__ = "5.0.0-alpha.3"
 //# sourceMappingURL=theme.js.map

package/dist/notification/theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme.js","names":[],"sources":["../../src/notification/theme.ts"],"sourcesContent":["// ---------------------------------------------------------------------------\n// Generated variant approach — mirrors button/theme.ts\n//\n// Each intent defines its token references once.\n// Each hierarchy rule composes container/button/action styles from those tokens.\n// Canonical variants are produced via Object.fromEntries — no hand-written\n// duplication; adding a new intent or hierarchy is a 1-line change.\n// ---------------------------------------------------------------------------\n\ninterface IntentTokens {\n  feedbackSubtle: string // container background\n  feedbackSolid: string // container border + text color\n  dismissColor: string // dismiss button color (usually feedbackSolid; exception: success)\n  actionSolid: string // action button background + border\n  actionSolidInverse: string // action button text\n  actionSolidHover: string\n  actionSolidPressed: string\n}\n\n/** Token references per semantic intent. */\nconst intentTokens: Record<string, IntentTokens> = {\n  info: {\n    feedbackSubtle: 'var(--vui-feedback-info-subtle)',\n    feedbackSolid: 'var(--vui-feedback-info-solid)',\n    dismissColor: 'var(--vui-feedback-info-solid)',\n    actionSolid: 'var(--vui-action-brand-solid)',\n    actionSolidInverse: 'var(--vui-action-brand-solid-inverse)',\n    actionSolidHover: 'var(--vui-action-brand-solid-hover)',\n    actionSolidPressed: 'var(--vui-action-brand-solid-pressed)',\n  },\n  danger: {\n    feedbackSubtle: 'var(--vui-feedback-danger-subtle)',\n    feedbackSolid: 'var(--vui-feedback-danger-solid)',\n    dismissColor: 'var(--vui-feedback-danger-solid)',\n    actionSolid: 'var(--vui-action-danger-solid)',\n    actionSolidInverse: 'var(--vui-action-danger-solid-inverse)',\n    actionSolidHover: 'var(--vui-action-danger-solid-hover)',\n    actionSolidPressed: 'var(--vui-action-danger-solid-pressed)',\n  },\n  warning: {\n    feedbackSubtle: 'var(--vui-feedback-warning-subtle)',\n    feedbackSolid: 'var(--vui-feedback-warning-solid)',\n    dismissColor: 'var(--vui-feedback-warning-solid)',\n    actionSolid: 'var(--vui-action-yellow-solid)',\n    actionSolidInverse: 'var(--vui-action-yellow-solid-inverse)',\n    actionSolidHover: 'var(--vui-action-yellow-solid-hover)',\n    actionSolidPressed: 'var(--vui-action-yellow-solid-pressed)',\n  },\n  success: {\n    feedbackSubtle: 'var(--vui-feedback-success-subtle)',\n    feedbackSolid: 'var(--vui-feedback-success-solid)',\n    // success uses subtle-inverse for the dismiss button (design exception)\n    dismissColor: 'var(--vui-action-success-subtle-inverse)',\n    actionSolid: 'var(--vui-action-success-solid)',\n    actionSolidInverse: 'var(--vui-action-success-solid-inverse)',\n    actionSolidHover: 'var(--vui-action-success-solid-hover)',\n    actionSolidPressed: 'var(--vui-action-success-solid-pressed)',\n  },\n}\n\n/** Variant styles per visual hierarchy, composed from intent tokens. */\nconst hierarchyRules: Record<string, (t: IntentTokens) => object> = {\n  inline: t => ({\n    container: {\n      bg: t.feedbackSubtle,\n      borderColor: t.feedbackSolid,\n      color: t.feedbackSolid,\n      '--vui-dismiss-fg': t.dismissColor,\n    },\n    action: {\n      bg: t.actionSolid,\n      borderColor: t.actionSolid,\n      color: t.actionSolidInverse,\n      hoverBg: t.actionSolidHover,\n      hoverColor: t.actionSolidInverse,\n      activeBg: t.actionSolidPressed,\n      activeColor: t.actionSolidInverse,\n    },\n  }),\n}\n\n// ---------------------------------------------------------------------------\n\nconst baseStyle = {\n  container: {\n    borderRadius: 'var(--vui-notification-border-radius, 0)',\n    borderWidth: 'var(--vui-notification-border-width, 1px)',\n    bg: 'var(--vui-feedback-neutral-subtle)',\n    borderColor: 'var(--vui-feedback-neutral-solid)',\n    color: 'var(--vui-feedback-neutral-solid)',\n  },\n  button: {\n    mt: 'var(--vui-notification-button-margin-top, 8px)',\n    mr: 'var(--vui-notification-button-margin-right, 8px)',\n    mb: 'var(--vui-notification-button-margin-bottom, 0)',\n    ml: 'var(--vui-notification-button-margin-left, 0)',\n  },\n  icon: {\n    ml: 'var(--vui-notification-icon-margin-left, 16px)',\n    mt: 'var(--vui-notification-icon-margin-top, 16px)',\n  },\n  text: {\n    flex: '1',\n    lineHeight: 'var(--vui-notification-text-line-height, 24px)',\n    minW: 0,\n    mx: 'var(--vui-notification-text-margin-x, 16px)',\n    my: 'var(--vui-notification-text-margin-y, 16px)',\n  },\n  actionBox: {\n    my: 'var(--vui-notification-action-margin-y, 8px)',\n    mx: 'var(--vui-notification-action-margin-x, 8px)',\n  },\n}\n\nconst parts = ['container', 'button', 'icon', 'text', 'title', 'actionBox', 'action']\n\nconst sizes = {}\n\n// Generated: inlineInfo, inlineDanger, inlineWarning, inlineSuccess\n// Legacy aliases: subtleBlue, subtleRed, subtleYellow, subtleGreen → kept for backward compatibility\nconst generatedVariants = Object.fromEntries(\n  Object.entries(intentTokens).flatMap(([intentKey, tokens]) =>\n    Object.entries(hierarchyRules).map(([hierarchyKey, buildVariant]) => [\n      `${hierarchyKey}${intentKey.charAt(0).toUpperCase()}${intentKey.slice(1)}`,\n      buildVariant(tokens),\n    ]),\n  ),\n)\n\nconst variants = {\n  ...generatedVariants,\n  // Legacy aliases — kept for backward compatibility\n  subtleBlue: generatedVariants.inlineInfo,\n  subtleRed: generatedVariants.inlineDanger,\n  subtleYellow: generatedVariants.inlineWarning,\n  subtleGreen: generatedVariants.inlineSuccess,\n}\n\nexport default {\n  baseStyle,\n  parts,\n  sizes,\n  variants,\n}\n"],"mappings":";;AAoBA,MAAM,eAA6C;CACjD,MAAM;EACJ,gBAAgB;EAChB,eAAe;EACf,cAAc;EACd,aAAa;EACb,oBAAoB;EACpB,kBAAkB;EAClB,oBAAoB;EACrB;CACD,QAAQ;EACN,gBAAgB;EAChB,eAAe;EACf,cAAc;EACd,aAAa;EACb,oBAAoB;EACpB,kBAAkB;EAClB,oBAAoB;EACrB;CACD,SAAS;EACP,gBAAgB;EAChB,eAAe;EACf,cAAc;EACd,aAAa;EACb,oBAAoB;EACpB,kBAAkB;EAClB,oBAAoB;EACrB;CACD,SAAS;EACP,gBAAgB;EAChB,eAAe;EAEf,cAAc;EACd,aAAa;EACb,oBAAoB;EACpB,kBAAkB;EAClB,oBAAoB;EACrB;CACF;;AAGD,MAAM,iBAA8D,EAClE,SAAQ,OAAM;CACZ,WAAW;EACT,IAAI,EAAE;EACN,aAAa,EAAE;EACf,OAAO,EAAE;EACT,oBAAoB,EAAE;EACvB;CACD,QAAQ;EACN,IAAI,EAAE;EACN,aAAa,EAAE;EACf,OAAO,EAAE;EACT,SAAS,EAAE;EACX,YAAY,EAAE;EACd,UAAU,EAAE;EACZ,aAAa,EAAE;EAChB;CACF,GACF;AAID,MAAM,YAAY;CAChB,WAAW;EACT,cAAc;EACd,aAAa;EACb,IAAI;EACJ,aAAa;EACb,OAAO;EACR;CACD,QAAQ;EACN,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACL;CACD,MAAM;EACJ,IAAI;EACJ,IAAI;EACL;CACD,MAAM;EACJ,MAAM;EACN,YAAY;EACZ,MAAM;EACN,IAAI;EACJ,IAAI;EACL;CACD,WAAW;EACT,IAAI;EACJ,IAAI;EACL;CACF;AAED,MAAM,QAAQ;CAAC;CAAa;CAAU;CAAQ;CAAQ;CAAS;CAAa;CAAS;AAErF,MAAM,QAAQ,EAAE;AAIhB,MAAM,oBAAoB,OAAO,YAC/B,OAAO,QAAQ,aAAa,CAAC,SAAS,CAAC,WAAW,YAChD,OAAO,QAAQ,eAAe,CAAC,KAAK,CAAC,cAAc,kBAAkB,CACnE,GAAG,eAAe,UAAU,OAAO,EAAE,CAAC,aAAa,GAAG,UAAU,MAAM,EAAE,IACxE,aAAa,OAAO,CACrB,CAAC,CACH,CACF;AAED,MAAM,WAAW;CACf,GAAG;CAEH,YAAY,kBAAkB;CAC9B,WAAW,kBAAkB;CAC7B,cAAc,kBAAkB;CAChC,aAAa,kBAAkB;CAChC;AAED,oBAAe;CACb;CACA;CACA;CACA;CACD"}
+{"version":3,"file":"theme.js","names":[],"sources":["../../src/notification/theme.ts"],"sourcesContent":["// ---------------------------------------------------------------------------\n// Generated variant approach — mirrors button/theme.ts\n//\n// Each intent defines its token references once.\n// Each hierarchy rule composes container/button styles from those tokens.\n// Canonical variants are produced via Object.fromEntries — no hand-written\n// duplication; adding a new intent or hierarchy is a 1-line change.\n// ---------------------------------------------------------------------------\n\ninterface IntentTokens {\n  feedbackSubtle: string // container background\n  feedbackSolid: string // container border + text color\n  dismissColor: string // dismiss button color (usually feedbackSolid; exception: success)\n}\n\n/** Token references per semantic intent. */\nconst intentTokens: Record<string, IntentTokens> = {\n  info: {\n    feedbackSubtle: 'var(--vui-feedback-info-subtle)',\n    feedbackSolid: 'var(--vui-feedback-info-solid)',\n    dismissColor: 'var(--vui-feedback-info-solid)',\n  },\n  danger: {\n    feedbackSubtle: 'var(--vui-feedback-danger-subtle)',\n    feedbackSolid: 'var(--vui-feedback-danger-solid)',\n    dismissColor: 'var(--vui-feedback-danger-solid)',\n  },\n  warning: {\n    feedbackSubtle: 'var(--vui-feedback-warning-subtle)',\n    feedbackSolid: 'var(--vui-feedback-warning-solid)',\n    dismissColor: 'var(--vui-feedback-warning-solid)',\n  },\n  success: {\n    feedbackSubtle: 'var(--vui-feedback-success-subtle)',\n    feedbackSolid: 'var(--vui-feedback-success-solid)',\n    // success uses subtle-inverse for the dismiss button (design exception)\n    dismissColor: 'var(--vui-action-success-subtle-inverse)',\n  },\n}\n\n/** Variant styles per visual hierarchy, composed from intent tokens. */\nconst hierarchyRules: Record<string, (t: IntentTokens) => object> = {\n  inline: t => ({\n    container: {\n      bg: t.feedbackSubtle,\n      borderColor: t.feedbackSolid,\n      color: t.feedbackSolid,\n      '--vui-dismiss-fg': t.dismissColor,\n    },\n  }),\n}\n\n// ---------------------------------------------------------------------------\n\nconst baseStyle = {\n  container: {\n    borderRadius: 'var(--vui-notification-border-radius, 0)',\n    borderWidth: 'var(--vui-notification-border-width, 1px)',\n    bg: 'var(--vui-feedback-neutral-subtle)',\n    borderColor: 'var(--vui-feedback-neutral-solid)',\n    color: 'var(--vui-feedback-neutral-solid)',\n  },\n  button: {\n    mt: 'var(--vui-notification-button-margin-top, 8px)',\n    mr: 'var(--vui-notification-button-margin-right, 8px)',\n    mb: 'var(--vui-notification-button-margin-bottom, 0)',\n    ml: 'var(--vui-notification-button-margin-left, 0)',\n  },\n  icon: {\n    ml: 'var(--vui-notification-icon-margin-left, 16px)',\n    mt: 'var(--vui-notification-icon-margin-top, 16px)',\n  },\n  text: {\n    flex: '1',\n    lineHeight: 'var(--vui-notification-text-line-height, 24px)',\n    minW: 0,\n    mx: 'var(--vui-notification-text-margin-x, 16px)',\n    my: 'var(--vui-notification-text-margin-y, 16px)',\n  },\n  actionBox: {\n    my: 'var(--vui-notification-action-margin-y, 16px)',\n    mx: 'var(--vui-notification-action-margin-x, 16px)',\n  },\n}\n\nconst parts = ['container', 'button', 'icon', 'text', 'title', 'actionBox']\n\nconst sizes = {}\n\n// Generated: inlineInfo, inlineDanger, inlineWarning, inlineSuccess\n// Legacy aliases: subtleBlue, subtleRed, subtleYellow, subtleGreen → kept for backward compatibility\nconst generatedVariants = Object.fromEntries(\n  Object.entries(intentTokens).flatMap(([intentKey, tokens]) =>\n    Object.entries(hierarchyRules).map(([hierarchyKey, buildVariant]) => [\n      `${hierarchyKey}${intentKey.charAt(0).toUpperCase()}${intentKey.slice(1)}`,\n      buildVariant(tokens),\n    ]),\n  ),\n)\n\nconst variants = {\n  ...generatedVariants,\n  // Legacy aliases — kept for backward compatibility\n  subtleBlue: generatedVariants.inlineInfo,\n  subtleRed: generatedVariants.inlineDanger,\n  subtleYellow: generatedVariants.inlineWarning,\n  subtleGreen: generatedVariants.inlineSuccess,\n}\n\nexport default {\n  baseStyle,\n  parts,\n  sizes,\n  variants,\n}\n"],"mappings":";;AAgBA,MAAM,eAA6C;CACjD,MAAM;EACJ,gBAAgB;EAChB,eAAe;EACf,cAAc;EACf;CACD,QAAQ;EACN,gBAAgB;EAChB,eAAe;EACf,cAAc;EACf;CACD,SAAS;EACP,gBAAgB;EAChB,eAAe;EACf,cAAc;EACf;CACD,SAAS;EACP,gBAAgB;EAChB,eAAe;EAEf,cAAc;EACf;CACF;;AAGD,MAAM,iBAA8D,EAClE,SAAQ,OAAM,EACZ,WAAW;CACT,IAAI,EAAE;CACN,aAAa,EAAE;CACf,OAAO,EAAE;CACT,oBAAoB,EAAE;CACvB,EACF,GACF;AAID,MAAM,YAAY;CAChB,WAAW;EACT,cAAc;EACd,aAAa;EACb,IAAI;EACJ,aAAa;EACb,OAAO;EACR;CACD,QAAQ;EACN,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACL;CACD,MAAM;EACJ,IAAI;EACJ,IAAI;EACL;CACD,MAAM;EACJ,MAAM;EACN,YAAY;EACZ,MAAM;EACN,IAAI;EACJ,IAAI;EACL;CACD,WAAW;EACT,IAAI;EACJ,IAAI;EACL;CACF;AAED,MAAM,QAAQ;CAAC;CAAa;CAAU;CAAQ;CAAQ;CAAS;CAAY;AAE3E,MAAM,QAAQ,EAAE;AAIhB,MAAM,oBAAoB,OAAO,YAC/B,OAAO,QAAQ,aAAa,CAAC,SAAS,CAAC,WAAW,YAChD,OAAO,QAAQ,eAAe,CAAC,KAAK,CAAC,cAAc,kBAAkB,CACnE,GAAG,eAAe,UAAU,OAAO,EAAE,CAAC,aAAa,GAAG,UAAU,MAAM,EAAE,IACxE,aAAa,OAAO,CACrB,CAAC,CACH,CACF;AAED,MAAM,WAAW;CACf,GAAG;CAEH,YAAY,kBAAkB;CAC9B,WAAW,kBAAkB;CAC7B,cAAc,kBAAkB;CAChC,aAAa,kBAAkB;CAChC;AAED,oBAAe;CACb;CACA;CACA;CACA;CACD"}

package/dist/notification/utils.js

@@ -34,5 +34,5 @@ const resolveNotificationVariant = (variant = DEFAULT_VARIANT, intent = DEFAULT_
 
 //#endregion
 export { DEFAULT_VARIANT, resolveNotificationVariant };
-globalThis.__vuiVersion__ = "5.0.0-alpha.0"
+globalThis.__vuiVersion__ = "5.0.0-alpha.3"
 //# sourceMappingURL=utils.js.map

package/dist/onedesign-tokens/dist/js/rem/button.js

@@ -61,5 +61,5 @@ const buttonDisabledOpacity = "0.5";
 
 //#endregion
 export { buttonDisabledCursor, buttonDisabledOpacity, buttonTypePrimaryActiveBackgroundColorDark, buttonTypePrimaryActiveBackgroundColorLight, buttonTypePrimaryActiveBorderColorDark, buttonTypePrimaryActiveBorderColorLight, buttonTypePrimaryActiveTextColorDark, buttonTypePrimaryActiveTextColorLight, buttonTypePrimaryDefaultBackgroundColorDark, buttonTypePrimaryDefaultBackgroundColorLight, buttonTypePrimaryDefaultBorderColorDark, buttonTypePrimaryDefaultBorderColorLight, buttonTypePrimaryDefaultTextColorDark, buttonTypePrimaryDefaultTextColorLight, buttonTypePrimaryFocusOutline, buttonTypePrimaryHoverBackgroundColorDark, buttonTypePrimaryHoverBackgroundColorLight, buttonTypePrimaryHoverBorderColorDark, buttonTypePrimaryHoverBorderColorLight, buttonTypePrimaryHoverTextColorDark, buttonTypePrimaryHoverTextColorLight, buttonTypeSecondaryActiveBackgroundColorDark, buttonTypeSecondaryActiveBackgroundColorLight, buttonTypeSecondaryActiveBorderColorDark, buttonTypeSecondaryActiveBorderColorLight, buttonTypeSecondaryActiveTextColorDark, buttonTypeSecondaryActiveTextColorLight, buttonTypeSecondaryDefaultBackgroundColorDark, buttonTypeSecondaryDefaultBackgroundColorLight, buttonTypeSecondaryDefaultBorderColorDark, buttonTypeSecondaryDefaultBorderColorLight, buttonTypeSecondaryDefaultTextColorDark, buttonTypeSecondaryDefaultTextColorLight, buttonTypeSecondaryFocusOutline, buttonTypeSecondaryHoverBackgroundColorDark, buttonTypeSecondaryHoverBackgroundColorLight, buttonTypeSecondaryHoverBorderColorDark, buttonTypeSecondaryHoverBorderColorLight, buttonTypeSecondaryHoverTextColorDark, buttonTypeSecondaryHoverTextColorLight, buttonTypeTertiaryActiveBackgroundColorDark, buttonTypeTertiaryActiveBackgroundColorLight, buttonTypeTertiaryActiveBorderColorDark, buttonTypeTertiaryActiveBorderColorLight, buttonTypeTertiaryActiveTextColorDark, buttonTypeTertiaryActiveTextColorLight, buttonTypeTertiaryDefaultBackgroundColorDark, buttonTypeTertiaryDefaultBackgroundColorLight, buttonTypeTertiaryDefaultBorderColorDark, buttonTypeTertiaryDefaultBorderColorLight, buttonTypeTertiaryDefaultTextColorDark, buttonTypeTertiaryDefaultTextColorLight, buttonTypeTertiaryFocusOutline, buttonTypeTertiaryHoverBackgroundColorDark, buttonTypeTertiaryHoverBackgroundColorLight, buttonTypeTertiaryHoverBorderColorDark, buttonTypeTertiaryHoverBorderColorLight, buttonTypeTertiaryHoverTextColorDark, buttonTypeTertiaryHoverTextColorLight };
-globalThis.__vuiVersion__ = "5.0.0-alpha.0"
+globalThis.__vuiVersion__ = "5.0.0-alpha.3"
 //# sourceMappingURL=button.js.map

package/dist/p/p.js

@@ -36,5 +36,5 @@ P.displayName = "P";
 
 //#endregion
 export { PBase, P as default };
-globalThis.__vuiVersion__ = "5.0.0-alpha.0"
+globalThis.__vuiVersion__ = "5.0.0-alpha.3"
 //# sourceMappingURL=p.js.map

package/dist/p/theme.js

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

package/dist/pagination/context.js

@@ -5,5 +5,5 @@ const [PaginationProvider, usePaginationContext] = createContext({ isOptional: t
 
 //#endregion
 export { PaginationProvider, usePaginationContext };
-globalThis.__vuiVersion__ = "5.0.0-alpha.0"
+globalThis.__vuiVersion__ = "5.0.0-alpha.3"
 //# sourceMappingURL=context.js.map

package/dist/pagination/helpers.js

@@ -24,5 +24,5 @@ function getPaginationItems(page, pageCount) {
 
 //#endregion
 export { getPaginationItems };
-globalThis.__vuiVersion__ = "5.0.0-alpha.0"
+globalThis.__vuiVersion__ = "5.0.0-alpha.3"
 //# sourceMappingURL=helpers.js.map

package/dist/pagination/pagination.js

@@ -64,5 +64,5 @@ Pagination.displayName = "Pagination";
 
 //#endregion
 export { Pagination as default };
-globalThis.__vuiVersion__ = "5.0.0-alpha.0"
+globalThis.__vuiVersion__ = "5.0.0-alpha.3"
 //# sourceMappingURL=pagination.js.map

package/dist/pagination/paginationButton.js

@@ -28,5 +28,5 @@ PaginationButton.displayName = "PaginationButton";
 
 //#endregion
 export { PaginationButton as default };
-globalThis.__vuiVersion__ = "5.0.0-alpha.0"
+globalThis.__vuiVersion__ = "5.0.0-alpha.3"
 //# sourceMappingURL=paginationButton.js.map

package/dist/pagination/paginationEllipsis.js

@@ -24,5 +24,5 @@ PaginationEllipsis.displayName = "PaginationEllipsis";
 
 //#endregion
 export { PaginationEllipsis as default };
-globalThis.__vuiVersion__ = "5.0.0-alpha.0"
+globalThis.__vuiVersion__ = "5.0.0-alpha.3"
 //# sourceMappingURL=paginationEllipsis.js.map

package/dist/pagination/paginationGoToPage.js

@@ -53,5 +53,5 @@ PaginationGoToPage.displayName = "PaginationGoToPage";
 
 //#endregion
 export { PaginationGoToPage as default };
-globalThis.__vuiVersion__ = "5.0.0-alpha.0"
+globalThis.__vuiVersion__ = "5.0.0-alpha.3"
 //# sourceMappingURL=paginationGoToPage.js.map

package/dist/pagination/paginationNavigation.js

@@ -41,5 +41,5 @@ PaginationNavigation.displayName = "PaginationNavigation";
 
 //#endregion
 export { PaginationNavigation as default };
-globalThis.__vuiVersion__ = "5.0.0-alpha.0"
+globalThis.__vuiVersion__ = "5.0.0-alpha.3"
 //# sourceMappingURL=paginationNavigation.js.map

package/dist/pagination/paginationPrevNext.js

@@ -33,5 +33,5 @@ PaginationPrevNext.displayName = "PaginationPrevNext";
 
 //#endregion
 export { PaginationPrevNext as default };
-globalThis.__vuiVersion__ = "5.0.0-alpha.0"
+globalThis.__vuiVersion__ = "5.0.0-alpha.3"
 //# sourceMappingURL=paginationPrevNext.js.map

package/dist/pagination/paginationResults.js

@@ -25,5 +25,5 @@ PaginationResults.displayName = "PaginationResults";
 
 //#endregion
 export { PaginationResults as default };
-globalThis.__vuiVersion__ = "5.0.0-alpha.0"
+globalThis.__vuiVersion__ = "5.0.0-alpha.3"
 //# sourceMappingURL=paginationResults.js.map

package/dist/pagination/theme.js

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

package/dist/pagination/usePagination.js

@@ -39,5 +39,5 @@ function usePagination(props) {
 
 //#endregion
 export { usePagination as default };
-globalThis.__vuiVersion__ = "5.0.0-alpha.0"
+globalThis.__vuiVersion__ = "5.0.0-alpha.3"
 //# sourceMappingURL=usePagination.js.map

package/dist/panel/panel.js

@@ -25,5 +25,5 @@ Panel.displayName = "Panel";
 
 //#endregion
 export { Panel as default };
-globalThis.__vuiVersion__ = "5.0.0-alpha.0"
+globalThis.__vuiVersion__ = "5.0.0-alpha.3"
 //# sourceMappingURL=panel.js.map

package/dist/panel/theme.js

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

package/dist/popover/context.js

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