@veracity/vui 4.1.0 → 4.2.0-alpha.manual.2603301258

package/dist/notification/notification.js

@@ -2,17 +2,22 @@ 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 { 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 { 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.
@@ -24,28 +29,36 @@ const Notification = vui((props, ref) => {
 		...statusMapping
 	};
 	const { variant = variantProp } = statuses[status ?? ""] ?? {};
+	const isBanner = variant?.startsWith("banner");
+	const baseVariant = isBanner ? variant.replace("banner", "subtle") : variant;
 	const styles = useStyleConfig("Notification", {
-		variant,
-		...props
+		variant: baseVariant,
+		size
 	});
 	const iconName = isString(icon) ? icon : statuses[status ?? ""]?.iconProps?.name;
 	const context = filterUndefined({
 		size,
-		status
+		status,
+		variant: baseVariant
 	});
 	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, {
@@ -63,20 +76,20 @@ const Notification = vui((props, ref) => {
 						text
 					]
 				}),
-				action,
-				onClose && /* @__PURE__ */ jsx(NotificationButton, {
+				action ? /* @__PURE__ */ jsx(NotificationAction, { children: action }) : null,
+				onClose ? /* @__PURE__ */ jsx(DismissButton, {
 					alignSelf,
-					"aria-label": "close",
-					icon: "uiTimes",
+					"aria-label": "Close",
+					size: "md",
 					onClick: onClose,
-					variant: closeButtonVariantMapping?.[variant] ?? variant,
-					w: "32px"
-				})
+					...styles.button,
+					mt: alignSelf === "center" ? 0 : styles.button?.mt
+				}) : null
 			]
 		})
 	});
 });
-Notification.Button = NotificationButton;
+Notification.Action = NotificationAction;
 Notification.Icon = NotificationIcon;
 Notification.Text = NotificationText;
 Notification.Title = NotificationTitle;
@@ -84,5 +97,5 @@ Notification.displayName = "Notification";
 
 //#endregion
 export { Notification as default };
-globalThis.__vuiVersion__ = "4.1.0"
+globalThis.__vuiVersion__ = "4.2.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'\n\nconst NotificationContainer = styled(Box)<{ $dismissFg?: string }>`\n  ${({ $dismissFg }) => $dismissFg && `--vui-dismiss-fg: ${$dismissFg};`}\n`\nimport { cs, filterUndefined, isReactText, isString } from '../utils'\nimport { notificationStatusMapping } 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'\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\n  const statuses = { ...notificationStatusMapping, ...statusMapping }\n  const { variant = variantProp } = statuses[status ?? ''] ?? {}\n\n  // Map banner variants to their subtle counterparts\n  const isBanner = variant?.startsWith('banner')\n  const baseVariant = isBanner ? (variant.replace('banner', 'subtle') as any) : variant\n\n  const styles = useStyleConfig('Notification', { variant: baseVariant, size })\n\n  const iconName = isString(icon) ? icon : statuses[status ?? '']?.iconProps?.name\n\n  const context = filterUndefined<NotificationProps>({ size, status, variant: baseVariant })\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} /> : icon}\n\n        {children ?? (\n          <NotificationText alignSelf={alignSelf}>\n            {isReactText(title) ? <NotificationTitle display={titleDisplay} text={title} /> : title} {text}\n          </NotificationText>\n        )}\n        {action ? <NotificationAction>{action}</NotificationAction> : null}\n\n        {onClose ? (\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        ) : null}\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":";;;;;;;;;;;;;;;;;AAKA,MAAM,wBAAwB,OAAO,IAAI,AAAyB;KAC7D,EAAE,iBAAiB,cAAc,qBAAqB,WAAW,GAAG;;;;;;AAezE,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;CAEJ,MAAM,WAAW;EAAE,GAAG;EAA2B,GAAG;EAAe;CACnE,MAAM,EAAE,UAAU,gBAAgB,SAAS,UAAU,OAAO,EAAE;CAG9D,MAAM,WAAW,SAAS,WAAW,SAAS;CAC9C,MAAM,cAAc,WAAY,QAAQ,QAAQ,UAAU,SAAS,GAAW;CAE9E,MAAM,SAAS,eAAe,gBAAgB;EAAE,SAAS;EAAa;EAAM,CAAC;CAE7E,MAAM,WAAW,SAAS,KAAK,GAAG,OAAO,SAAS,UAAU,KAAK,WAAW;CAE5E,MAAM,UAAU,gBAAmC;EAAE;EAAM;EAAQ,SAAS;EAAa,CAAC;CAE1F,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;MAAY,GAAG;IAExE,YACC,qBAAC;KAA4B;;MAC1B,YAAY,MAAM,GAAG,oBAAC;OAAkB,SAAS;OAAc,MAAM;QAAS,GAAG;MAAM;MAAE;;MACzE;IAEpB,SAAS,oBAAC,gCAAoB,SAA4B,GAAG;IAE7D,UACC,oBAAC;KACY;KACX,cAAW;KACX,MAAK;KACL,SAAS;KACT,GAAI,OAAO;KACX,IAAI,cAAc,WAAW,IAAI,OAAO,QAAQ;MAChD,GACA;;IACkB;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,7 +7,7 @@ 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. */
@@ -14,13 +15,14 @@ type NotificationProps = Omit<BoxProps, 'size' | 'variant'> & ThemingProps<'Noti
   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 variant. */
+  variant?: NotificationVariant;
 };
 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, {
   iconProps: IconProps;
-  variant?: NotificationProps['variant'];
+  variant?: NotificationVariant;
 }>;
 //#endregion
 export { NotificationProps, NotificationStatus, NotificationStatusMapping, NotificationVariant };

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,OAAA,eAT4B;EAW5B,MAAA,GAAS,kBAAA,EAVX;EAYE,aAAA,GAAgB,yBAAA,EANT;EAQP,IAAA,GAAO,SAAA,EAJE;EAMT,KAAA,GAAQ,SAAA,EAFD;EAIP,OAAA,GAAU,mBAAA;AAAA;AAAA,KAGF,kBAAA;AAAA,KAYA,mBAAA;AAAA,KAUA,yBAAA,GAA4B,MAAA;EAGpC,SAAA,EAAW,SAAA;EACX,OAAA,GAAU,mBAAA;AAAA"}

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__ = "4.2.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.js

@@ -2,8 +2,8 @@ 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 { notificationStatusMapping } from "./consts.js";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/notification/notificationIcon.tsx
@@ -21,7 +21,6 @@ const NotificationIcon = vui((props, ref) => {
 	return /* @__PURE__ */ jsx(Icon, {
 		alignSelf,
 		className: cs("vui-notificationIcon", className),
-		ml: "16px",
 		mt: marginTop,
 		ref,
 		size: "md",
@@ -35,5 +34,5 @@ NotificationIcon.displayName = "NotificationIcon";
 
 //#endregion
 export { NotificationIcon as default };
-globalThis.__vuiVersion__ = "4.1.0"
+globalThis.__vuiVersion__ = "4.2.0"
 //# 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 } from './consts'\nimport { useNotificationContext } from './context'\n\n/** Displays an icon based on the status 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 = '' } = mergedProps\n  const { iconProps } = notificationStatusMapping[status] ?? {}\n\n  const marginTop = alignSelf === 'center' ? '0' : '16px'\n\n  return (\n    <Icon\n      alignSelf={alignSelf}\n      className={cs('vui-notificationIcon', className)}\n      ml=\"16px\"\n      mt={marginTop}\n      ref={ref}\n      size=\"md\"\n      variant=\"loading\"\n      {...styles.icon}\n      {...iconProps}\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,OAAO;CACxB,MAAM,EAAE,cAAc,0BAA0B,WAAW,EAAE;CAE7D,MAAM,YAAY,cAAc,WAAW,MAAM;AAEjD,QACE,oBAAC;EACY;EACX,WAAW,GAAG,wBAAwB,UAAU;EAChD,IAAG;EACH,IAAI;EACC;EACL,MAAK;EACL,SAAQ;EACR,GAAI,OAAO;EACX,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 } from './consts'\nimport { useNotificationContext } from './context'\n\n/** Displays an icon based on the status 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 = '' } = mergedProps\n  const { iconProps } = notificationStatusMapping[status] ?? {}\n\n  const marginTop = alignSelf === 'center' ? '0' : '16px'\n\n  return (\n    <Icon\n      alignSelf={alignSelf}\n      className={cs('vui-notificationIcon', className)}\n      mt={marginTop}\n      ref={ref}\n      size=\"md\"\n      variant=\"loading\"\n      {...styles.icon}\n      {...iconProps}\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,OAAO;CACxB,MAAM,EAAE,cAAc,0BAA0B,WAAW,EAAE;CAE7D,MAAM,YAAY,cAAc,WAAW,MAAM;AAEjD,QACE,oBAAC;EACY;EACX,WAAW,GAAG,wBAAwB,UAAU;EAChD,IAAI;EACC;EACL,MAAK;EACL,SAAQ;EACR,GAAI,OAAO;EACX,GAAI;EACJ,GAAI;GACJ;EAEJ;AAEF,iBAAiB,cAAc"}

package/dist/notification/notificationText.js

@@ -12,11 +12,6 @@ const NotificationText = vui((props, ref) => {
 	const styles = useStyleConfig("Notification", useNotificationContext());
 	return /* @__PURE__ */ jsx(T, {
 		className: cs("vui-notificationText", className),
-		flex: "1",
-		lineHeight: "24px",
-		minW: 0,
-		mx: "16px",
-		my: "16px",
 		ref,
 		...styles.text,
 		...rest
@@ -26,5 +21,5 @@ NotificationText.displayName = "NotificationText";
 
 //#endregion
 export { NotificationText as default };
-globalThis.__vuiVersion__ = "4.1.0"
+globalThis.__vuiVersion__ = "4.2.0"
 //# sourceMappingURL=notificationText.js.map

package/dist/notification/notificationText.js.map

@@ -1 +1 @@
-{"version":3,"file":"notificationText.js","names":[],"sources":["../../src/notification/notificationText.tsx"],"sourcesContent":["import { useStyleConfig, vui } from '../core'\nimport type { TProps } from '../t'\nimport T from '../t'\nimport { cs } from '../utils'\nimport { useNotificationContext } from './context'\n\n/** Displays text within the Notification. */\nexport const NotificationText = vui<'p', TProps>((props, ref) => {\n  const { className, ...rest } = props\n  const styles = useStyleConfig('Notification', useNotificationContext())\n\n  return (\n    <T\n      className={cs('vui-notificationText', className)}\n      flex=\"1\"\n      lineHeight=\"24px\"\n      minW={0}\n      mx=\"16px\"\n      my=\"16px\"\n      ref={ref}\n      {...styles.text}\n      {...rest}\n    />\n  )\n})\n\nNotificationText.displayName = 'NotificationText'\nexport default NotificationText\n"],"mappings":";;;;;;;;;AAOA,MAAa,mBAAmB,KAAkB,OAAO,QAAQ;CAC/D,MAAM,EAAE,WAAW,GAAG,SAAS;CAC/B,MAAM,SAAS,eAAe,gBAAgB,wBAAwB,CAAC;AAEvE,QACE,oBAAC;EACC,WAAW,GAAG,wBAAwB,UAAU;EAChD,MAAK;EACL,YAAW;EACX,MAAM;EACN,IAAG;EACH,IAAG;EACE;EACL,GAAI,OAAO;EACX,GAAI;GACJ;EAEJ;AAEF,iBAAiB,cAAc"}
+{"version":3,"file":"notificationText.js","names":[],"sources":["../../src/notification/notificationText.tsx"],"sourcesContent":["import { useStyleConfig, vui } from '../core'\nimport type { TProps } from '../t'\nimport T from '../t'\nimport { cs } from '../utils'\nimport { useNotificationContext } from './context'\n\n/** Displays text within the Notification. */\nexport const NotificationText = vui<'p', TProps>((props, ref) => {\n  const { className, ...rest } = props\n  const styles = useStyleConfig('Notification', useNotificationContext())\n\n  return <T className={cs('vui-notificationText', className)} ref={ref} {...styles.text} {...rest} />\n})\n\nNotificationText.displayName = 'NotificationText'\nexport default NotificationText\n"],"mappings":";;;;;;;;;AAOA,MAAa,mBAAmB,KAAkB,OAAO,QAAQ;CAC/D,MAAM,EAAE,WAAW,GAAG,SAAS;CAC/B,MAAM,SAAS,eAAe,gBAAgB,wBAAwB,CAAC;AAEvE,QAAO,oBAAC;EAAE,WAAW,GAAG,wBAAwB,UAAU;EAAO;EAAK,GAAI,OAAO;EAAM,GAAI;GAAQ;EACnG;AAEF,iBAAiB,cAAc"}

package/dist/notification/notificationTitle.js

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

package/dist/notification/theme.js

@@ -1,65 +1,113 @@
 //#region src/notification/theme.ts
-const baseStyle = {};
-const defaultProps = { variant: "subtleBlue" };
+const baseStyle = {
+	container: {
+		borderRadius: "var(--vui-notification-border-radius, 0)",
+		borderWidth: "var(--vui-notification-border-width, 1px)",
+		bg: "var(--vui-feedback-neutral-subtle)",
+		borderColor: "var(--vui-feedback-neutral-solid)",
+		color: "var(--vui-feedback-neutral-solid)"
+	},
+	button: {
+		mt: "var(--vui-notification-button-margin-top, 8px)",
+		mr: "var(--vui-notification-button-margin-right, 8px)",
+		mb: "var(--vui-notification-button-margin-bottom, 0)",
+		ml: "var(--vui-notification-button-margin-left, 0)"
+	},
+	icon: { ml: "var(--vui-notification-icon-margin-left, 16px)" },
+	text: {
+		flex: "1",
+		lineHeight: "var(--vui-notification-text-line-height, 24px)",
+		minW: 0,
+		mx: "var(--vui-notification-text-margin-x, 16px)",
+		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)"
+	}
+};
 const parts = [
 	"container",
 	"button",
 	"icon",
 	"text",
-	"title"
+	"title",
+	"actionBox",
+	"action"
 ];
 const sizes = {};
 const variants = {
 	subtleBlue: {
 		container: {
-			bg: "skyBlue.95",
-			borderColor: "seaBlue.main",
-			color: "seaBlue.main"
+			bg: "var(--vui-feedback-info-subtle)",
+			borderColor: "var(--vui-feedback-info-solid)",
+			color: "var(--vui-feedback-info-solid)",
+			"--vui-dismiss-fg": "var(--vui-feedback-info-solid)"
 		},
-		button: { borderColor: "transparent" }
+		action: {
+			bg: "var(--vui-action-brand-solid)",
+			borderColor: "var(--vui-action-brand-solid)",
+			color: "var(--vui-action-brand-solid-inverse)",
+			hoverBg: "var(--vui-action-brand-solid-hover)",
+			hoverColor: "var(--vui-action-brand-solid-inverse)",
+			activeBg: "var(--vui-action-brand-solid-pressed)",
+			activeColor: "var(--vui-action-brand-solid-inverse)"
+		}
 	},
-	subtleRed: { container: {
-		bg: "energyRed.95",
-		borderColor: "energyRed.45",
-		color: "energyRed.45"
-	} },
-	subtleYellow: { container: {
-		bg: "sunflower.85",
-		borderColor: "sunflower.15",
-		color: "sunflower.15"
-	} },
-	subtleGreen: { container: {
-		bg: "landGreen.95",
-		borderColor: "landGreen.30",
-		color: "landGreen.30"
-	} },
-	bannerBlue: {
+	subtleRed: {
 		container: {
-			bg: "skyBlue.95",
-			borderColor: "skyBlue.95",
-			color: "seaBlue.main"
+			bg: "var(--vui-feedback-danger-subtle)",
+			borderColor: "var(--vui-feedback-danger-solid)",
+			color: "var(--vui-feedback-danger-solid)",
+			"--vui-dismiss-fg": "var(--vui-feedback-danger-solid)"
 		},
-		button: { borderColor: "transparent" }
+		action: {
+			bg: "var(--vui-action-danger-solid)",
+			borderColor: "var(--vui-action-danger-solid)",
+			color: "var(--vui-action-danger-solid-inverse)",
+			hoverBg: "var(--vui-action-danger-solid-hover)",
+			hoverColor: "var(--vui-action-danger-solid-inverse)",
+			activeBg: "var(--vui-action-danger-solid-pressed)",
+			activeColor: "var(--vui-action-danger-solid-inverse)"
+		}
 	},
-	bannerRed: { container: {
-		bg: "energyRed.95",
-		borderColor: "energyRed.95",
-		color: "energyRed.45"
-	} },
-	bannerYellow: { container: {
-		bg: "sunflower.85",
-		borderColor: "sunflower.85",
-		color: "sunflower.15"
-	} },
-	bannerGreen: { container: {
-		bg: "landGreen.95",
-		borderColor: "landGreen.95",
-		color: "landGreen.30"
-	} }
+	subtleYellow: {
+		container: {
+			bg: "var(--vui-feedback-warning-subtle)",
+			borderColor: "var(--vui-feedback-warning-solid)",
+			color: "var(--vui-feedback-warning-solid)",
+			"--vui-dismiss-fg": "var(--vui-feedback-warning-solid)"
+		},
+		action: {
+			bg: "var(--vui-action-yellow-solid)",
+			borderColor: "var(--vui-action-yellow-solid)",
+			color: "var(--vui-action-yellow-solid-inverse)",
+			hoverBg: "var(--vui-action-yellow-solid-hover)",
+			hoverColor: "var(--vui-action-yellow-solid-inverse)",
+			activeBg: "var(--vui-action-yellow-solid-pressed)",
+			activeColor: "var(--vui-action-yellow-solid-inverse)"
+		}
+	},
+	subtleGreen: {
+		container: {
+			bg: "var(--vui-feedback-success-subtle)",
+			borderColor: "var(--vui-feedback-success-solid)",
+			color: "var(--vui-feedback-success-solid)",
+			"--vui-dismiss-fg": "var(--vui-feedback-success-solid)"
+		},
+		action: {
+			bg: "var(--vui-action-success-solid)",
+			borderColor: "var(--vui-action-success-solid)",
+			color: "var(--vui-action-success-solid-inverse)",
+			hoverBg: "var(--vui-action-success-solid-hover)",
+			hoverColor: "var(--vui-action-success-solid-inverse)",
+			activeBg: "var(--vui-action-success-solid-pressed)",
+			activeColor: "var(--vui-action-success-solid-inverse)"
+		}
+	}
 };
 var theme_default = {
 	baseStyle,
-	defaultProps,
 	parts,
 	sizes,
 	variants
@@ -67,5 +115,5 @@ var theme_default = {
 
 //#endregion
 export { theme_default as default };
-globalThis.__vuiVersion__ = "4.1.0"
+globalThis.__vuiVersion__ = "4.2.0"
 //# sourceMappingURL=theme.js.map

package/dist/notification/theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme.js","names":[],"sources":["../../src/notification/theme.ts"],"sourcesContent":["const baseStyle = {}\n\nconst defaultProps = {\n  variant: 'subtleBlue',\n}\n\nconst parts = ['container', 'button', 'icon', 'text', 'title']\n\nconst sizes = {}\n\nconst variants = {\n  subtleBlue: {\n    container: {\n      bg: 'skyBlue.95',\n      borderColor: 'seaBlue.main',\n      color: 'seaBlue.main',\n    },\n    button: {\n      borderColor: 'transparent',\n    },\n  },\n  subtleRed: {\n    container: {\n      bg: 'energyRed.95',\n      borderColor: 'energyRed.45',\n      color: 'energyRed.45',\n    },\n  },\n  subtleYellow: {\n    container: {\n      bg: 'sunflower.85',\n      borderColor: 'sunflower.15',\n      color: 'sunflower.15',\n    },\n  },\n  subtleGreen: {\n    container: {\n      bg: 'landGreen.95',\n      borderColor: 'landGreen.30',\n      color: 'landGreen.30',\n    },\n  },\n  bannerBlue: {\n    container: {\n      bg: 'skyBlue.95',\n      borderColor: 'skyBlue.95',\n      color: 'seaBlue.main',\n    },\n    button: {\n      borderColor: 'transparent',\n    },\n  },\n  bannerRed: {\n    container: {\n      bg: 'energyRed.95',\n      borderColor: 'energyRed.95',\n      color: 'energyRed.45',\n    },\n  },\n  bannerYellow: {\n    container: {\n      bg: 'sunflower.85',\n      borderColor: 'sunflower.85',\n      color: 'sunflower.15',\n    },\n  },\n  bannerGreen: {\n    container: {\n      bg: 'landGreen.95',\n      borderColor: 'landGreen.95',\n      color: 'landGreen.30',\n    },\n  },\n}\n\nexport default {\n  baseStyle,\n  defaultProps,\n  parts,\n  sizes,\n  variants,\n}\n"],"mappings":";AAAA,MAAM,YAAY,EAAE;AAEpB,MAAM,eAAe,EACnB,SAAS,cACV;AAED,MAAM,QAAQ;CAAC;CAAa;CAAU;CAAQ;CAAQ;CAAQ;AAE9D,MAAM,QAAQ,EAAE;AAEhB,MAAM,WAAW;CACf,YAAY;EACV,WAAW;GACT,IAAI;GACJ,aAAa;GACb,OAAO;GACR;EACD,QAAQ,EACN,aAAa,eACd;EACF;CACD,WAAW,EACT,WAAW;EACT,IAAI;EACJ,aAAa;EACb,OAAO;EACR,EACF;CACD,cAAc,EACZ,WAAW;EACT,IAAI;EACJ,aAAa;EACb,OAAO;EACR,EACF;CACD,aAAa,EACX,WAAW;EACT,IAAI;EACJ,aAAa;EACb,OAAO;EACR,EACF;CACD,YAAY;EACV,WAAW;GACT,IAAI;GACJ,aAAa;GACb,OAAO;GACR;EACD,QAAQ,EACN,aAAa,eACd;EACF;CACD,WAAW,EACT,WAAW;EACT,IAAI;EACJ,aAAa;EACb,OAAO;EACR,EACF;CACD,cAAc,EACZ,WAAW;EACT,IAAI;EACJ,aAAa;EACb,OAAO;EACR,EACF;CACD,aAAa,EACX,WAAW;EACT,IAAI;EACJ,aAAa;EACb,OAAO;EACR,EACF;CACF;AAED,oBAAe;CACb;CACA;CACA;CACA;CACA;CACD"}
+{"version":3,"file":"theme.js","names":[],"sources":["../../src/notification/theme.ts"],"sourcesContent":["const 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  },\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\nconst subtleBlue = {\n  container: {\n    bg: 'var(--vui-feedback-info-subtle)',\n    borderColor: 'var(--vui-feedback-info-solid)',\n    color: 'var(--vui-feedback-info-solid)',\n    '--vui-dismiss-fg': 'var(--vui-feedback-info-solid)',\n  },\n  action: {\n    bg: 'var(--vui-action-brand-solid)',\n    borderColor: 'var(--vui-action-brand-solid)',\n    color: 'var(--vui-action-brand-solid-inverse)',\n    hoverBg: 'var(--vui-action-brand-solid-hover)',\n    hoverColor: 'var(--vui-action-brand-solid-inverse)',\n    activeBg: 'var(--vui-action-brand-solid-pressed)',\n    activeColor: 'var(--vui-action-brand-solid-inverse)',\n  },\n}\n\nconst subtleRed = {\n  container: {\n    bg: 'var(--vui-feedback-danger-subtle)',\n    borderColor: 'var(--vui-feedback-danger-solid)',\n    color: 'var(--vui-feedback-danger-solid)',\n    '--vui-dismiss-fg': 'var(--vui-feedback-danger-solid)',\n  },\n  action: {\n    bg: 'var(--vui-action-danger-solid)',\n    borderColor: 'var(--vui-action-danger-solid)',\n    color: 'var(--vui-action-danger-solid-inverse)',\n    hoverBg: 'var(--vui-action-danger-solid-hover)',\n    hoverColor: 'var(--vui-action-danger-solid-inverse)',\n    activeBg: 'var(--vui-action-danger-solid-pressed)',\n    activeColor: 'var(--vui-action-danger-solid-inverse)',\n  },\n}\n\nconst subtleYellow = {\n  container: {\n    bg: 'var(--vui-feedback-warning-subtle)',\n    borderColor: 'var(--vui-feedback-warning-solid)',\n    color: 'var(--vui-feedback-warning-solid)',\n    '--vui-dismiss-fg': 'var(--vui-feedback-warning-solid)',\n  },\n  action: {\n    bg: 'var(--vui-action-yellow-solid)',\n    borderColor: 'var(--vui-action-yellow-solid)',\n    color: 'var(--vui-action-yellow-solid-inverse)',\n    hoverBg: 'var(--vui-action-yellow-solid-hover)',\n    hoverColor: 'var(--vui-action-yellow-solid-inverse)',\n    activeBg: 'var(--vui-action-yellow-solid-pressed)',\n    activeColor: 'var(--vui-action-yellow-solid-inverse)',\n  },\n}\n\nconst subtleGreen = {\n  container: {\n    bg: 'var(--vui-feedback-success-subtle)',\n    borderColor: 'var(--vui-feedback-success-solid)',\n    color: 'var(--vui-feedback-success-solid)',\n    '--vui-dismiss-fg': 'var(--vui-feedback-success-solid)',\n  },\n  action: {\n    bg: 'var(--vui-action-success-solid)',\n    borderColor: 'var(--vui-action-success-solid)',\n    color: 'var(--vui-action-success-solid-inverse)',\n    hoverBg: 'var(--vui-action-success-solid-hover)',\n    hoverColor: 'var(--vui-action-success-solid-inverse)',\n    activeBg: 'var(--vui-action-success-solid-pressed)',\n    activeColor: 'var(--vui-action-success-solid-inverse)',\n  },\n}\n\nconst variants = {\n  subtleBlue,\n  subtleRed,\n  subtleYellow,\n  subtleGreen,\n}\n\nexport default {\n  baseStyle,\n  parts,\n  sizes,\n  variants,\n}\n"],"mappings":";AAAA,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,kDACL;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;AA0EhB,MAAM,WAAW;CACf,YAzEiB;EACjB,WAAW;GACT,IAAI;GACJ,aAAa;GACb,OAAO;GACP,oBAAoB;GACrB;EACD,QAAQ;GACN,IAAI;GACJ,aAAa;GACb,OAAO;GACP,SAAS;GACT,YAAY;GACZ,UAAU;GACV,aAAa;GACd;EACF;CA0DC,WAxDgB;EAChB,WAAW;GACT,IAAI;GACJ,aAAa;GACb,OAAO;GACP,oBAAoB;GACrB;EACD,QAAQ;GACN,IAAI;GACJ,aAAa;GACb,OAAO;GACP,SAAS;GACT,YAAY;GACZ,UAAU;GACV,aAAa;GACd;EACF;CAyCC,cAvCmB;EACnB,WAAW;GACT,IAAI;GACJ,aAAa;GACb,OAAO;GACP,oBAAoB;GACrB;EACD,QAAQ;GACN,IAAI;GACJ,aAAa;GACb,OAAO;GACP,SAAS;GACT,YAAY;GACZ,UAAU;GACV,aAAa;GACd;EACF;CAwBC,aAtBkB;EAClB,WAAW;GACT,IAAI;GACJ,aAAa;GACb,OAAO;GACP,oBAAoB;GACrB;EACD,QAAQ;GACN,IAAI;GACJ,aAAa;GACb,OAAO;GACP,SAAS;GACT,YAAY;GACZ,UAAU;GACV,aAAa;GACd;EACF;CAOA;AAED,oBAAe;CACb;CACA;CACA;CACA;CACD"}

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__ = "4.1.0"
+globalThis.__vuiVersion__ = "4.2.0"
 //# sourceMappingURL=button.js.map

package/dist/p/p.js

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

package/dist/p/p.types.d.ts

@@ -1,4 +1,5 @@
 import { ThemingProps } from "../theme/types.js";
+import "../theme/index.js";
 import { TypographyProps } from "../system/typography.js";
 import { SystemProps } from "../system/system.js";
 import "../system/index.js";

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

@@ -1 +1 @@
-{"version":3,"file":"p.types.d.ts","names":[],"sources":["../../src/p/p.types.ts"],"mappings":";;;;;;KAGY,MAAA,GAAS,WAAA,GACnB,YAAA;8CAEE,KAAA,GAAQ,eAAA;EAER,MAAA,GAAS,eAAA,mBALK;EAOd,UAAA,GAAa,eAAA,oBAPI;EASjB,IAAA,oBANQ;EAQR,MAAA,GAAS,eAAA;AAAA"}
+{"version":3,"file":"p.types.d.ts","names":[],"sources":["../../src/p/p.types.ts"],"mappings":";;;;;;;KAGY,MAAA,GAAS,WAAA,GACnB,YAAA;8CAEE,KAAA,GAAQ,eAAA;EAER,MAAA,GAAS,eAAA,mBALD;EAOR,UAAA,GAAa,eAAA;EAEb,IAAA,oBARF;EAUE,MAAA,GAAS,eAAA;AAAA"}

package/dist/p/theme.js

@@ -35,5 +35,5 @@ var theme_default = {
 
 //#endregion
 export { theme_default as default };
-globalThis.__vuiVersion__ = "4.1.0"
+globalThis.__vuiVersion__ = "4.2.0"
 //# 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__ = "4.1.0"
+globalThis.__vuiVersion__ = "4.2.0"
 //# sourceMappingURL=context.js.map

package/dist/pagination/helpers.js

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

package/dist/pagination/pagination.js

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

package/dist/pagination/pagination.types.d.ts

@@ -1,6 +1,7 @@
 import { RenderProps } from "../utils/types.js";
 import "../utils/index.js";
 import { ThemingProps } from "../theme/types.js";
+import "../theme/index.js";
 import { ButtonProps } from "../button/button.types.js";
 import "../button/index.js";
 import { BoxProps } from "../box/box.types.js";

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

@@ -1 +1 @@
-{"version":3,"file":"pagination.types.d.ts","names":[],"sources":["../../src/pagination/pagination.types.ts"],"mappings":";;;;;;;;;;;;KASY,qBAAA,GAAwB,WAAA;mEAElC,QAAA;EAEA,IAAA;AAAA;AAAA,KAGU,iBAAA,GAAoB,uBAAA,GAA0B,YAAA;AAAA,KAE9C,cAAA;AAAA,KAEA,uBAAA,GAA0B,WAAA;EAXF,sDAalC,SAAA;AAAA;AAAA,KAGU,eAAA,GAAkB,IAAA,CAAK,QAAA,wBACjC,YAAA,iBACA,kBAAA;EAdI,kEAgBF,QAAA,GAAW,WAAA,CAAY,iBAAA,GAbE;EAezB,QAAA,GAAW,GAAA,CAAI,OAAA,EAfa;EAiB5B,KAAA,GAAQ,cAAA,IAfA;EAiBR,UAAA,GAAa,GAAA,CAAI,OAAA;EAEjB,OAAA,GAAU,GAAA,CAAI,OAAA;AAAA"}
+{"version":3,"file":"pagination.types.d.ts","names":[],"sources":["../../src/pagination/pagination.types.ts"],"mappings":";;;;;;;;;;;;;KASY,qBAAA,GAAwB,WAAA;mEAElC,QAAA;EAEA,IAAA;AAAA;AAAA,KAGU,iBAAA,GAAoB,uBAAA,GAA0B,YAAA;AAAA,KAE9C,cAAA;AAAA,KAEA,uBAAA,GAA0B,WAAA;EAXS,sDAa7C,SAAA;AAAA;AAAA,KAGU,eAAA,GAAkB,IAAA,CAAK,QAAA,wBACjC,YAAA,iBACA,kBAAA;EAdI,kEAgBF,QAAA,GAAW,WAAA,CAAY,iBAAA,GAbf;EAeR,QAAA,GAAW,GAAA,CAAI,OAAA;EAEf,KAAA,GAAQ,cAAA,IAjB0D;EAmBlE,UAAA,GAAa,GAAA,CAAI,OAAA,EAjBK;EAmBtB,OAAA,GAAU,GAAA,CAAI,OAAA;AAAA"}

package/dist/pagination/paginationButton.js

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

package/dist/pagination/paginationEllipsis.js

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

package/dist/pagination/paginationGoToPage.js

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

package/dist/pagination/paginationNavigation.js

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

package/dist/pagination/paginationPrevNext.js

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