@veracity/vui 4.0.2 → 4.0.3-alpha.375407.2603101342

package/dist/link/link.js

@@ -55,12 +55,13 @@ const Link = vui((props, ref) => {
 		size,
 		variant
 	}), [size, variant]);
+	const iconPadding = size === "xs" ? "1.2rem" : "1.5rem";
 	const aliasedProps = filterUndefined({
 		fontWeight: weight || fontWeight,
 		rel: isExternal ? "noopener" : void 0,
 		target: isExternal ? "_blank" : void 0,
-		pl: iconLeft ? "1.5rem" : void 0,
-		pr: iconRight ? "1.5rem" : void 0
+		pl: iconLeft ? iconPadding : void 0,
+		pr: iconRight ? iconPadding : void 0
 	});
 	return /* @__PURE__ */ jsx(LinkProvider, {
 		value: context,
@@ -99,5 +100,5 @@ Link.displayName = "Link";
 
 //#endregion
 export { LinkBase, Link as default };
-globalThis.__vuiVersion__ = "4.0.2"
+globalThis.__vuiVersion__ = "4.0.3"
 //# sourceMappingURL=link.js.map

package/dist/link/link.js.map

@@ -1 +1 @@
-{"version":3,"file":"link.js","names":[],"sources":["../../src/link/link.tsx"],"sourcesContent":["import { useMemo } from 'react'\n\nimport type { VuiComponent } from '../core'\nimport { styled, useStyleConfig, vui } from '../core'\nimport T from '../t'\nimport { cs, filterUndefined, isReactText, isString } from '../utils'\nimport { LinkProvider } from './context'\nimport type { LinkProps } from './link.types'\nimport LinkIcon from './linkIcon'\nimport LinkText from './linkText'\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\nexport const LinkBase = styled.aBox.attrs((props: LinkProps) => ({\n  isUnderlined: props.isUnderlined || false,\n}))`\n  ${linkSwipeAnimation}\n  display: inline;\n  cursor: pointer;\n  position: relative;\n  line-height: 1.5;\n  outline: none;\n  width: fit-content;\n  text-decoration: none;\n\n  &:not(.vui-linkNoUnderline) > .vui-t {\n    position: relative;\n    background: linear-gradient(to right, currentcolor, currentcolor);\n    background-size: ${({ isUnderlined }) => (isUnderlined ? '100% 1px' : '0 1px')};\n    background-position: 0 100%;\n    background-repeat: no-repeat;\n    text-decoration: none;\n    padding-bottom: 2px;\n    line-height: 1.2;\n  }\n\n  &:hover > .vui-t {\n    animation: ${({ isUnderlined }) =>\n      isUnderlined ? 'linkSwipe 0.5s ease forwards' : 'linkSwipe 0.3s ease forwards'};\n    background-size: 100% 1px;\n  }\n`\n\nexport const Link = vui<'a', LinkProps>((props, ref) => {\n  const {\n    children,\n    className,\n    fontWeight,\n    iconLeft,\n    iconRight,\n    isExternal,\n    isUnderlined,\n    size,\n    text,\n    variant,\n    weight,\n    ...rest\n  } = props\n\n  const styles = useStyleConfig('Link', props)\n  const context = useMemo(() => filterUndefined({ size, variant }), [size, variant])\n\n  const aliasedProps = filterUndefined({\n    fontWeight: weight || fontWeight,\n    rel: isExternal ? 'noopener' : undefined,\n    target: isExternal ? '_blank' : undefined,\n    pl: iconLeft ? '1.5rem' : undefined,\n    pr: iconRight ? '1.5rem' : undefined,\n  })\n\n  return (\n    <LinkProvider value={context} data-size={context.size} data-variant={context.variant}>\n      <LinkBase\n        className={cs('vui-link', className)}\n        focusRing={2}\n        isUnderlined={isUnderlined}\n        ref={ref}\n        {...styles.container}\n        {...aliasedProps}\n        {...rest}\n      >\n        {isString(iconLeft) ? <LinkIcon mr={1} left={0} name={iconLeft} /> : iconLeft}\n        {children ? <T fontSize={'inherit'}>{children}</T> : isReactText(text) && <LinkText text={text} />}\n        {isString(iconRight) ? <LinkIcon ml={1} right={0} name={iconRight} /> : iconRight}\n      </LinkBase>\n    </LinkProvider>\n  )\n}) as VuiComponent<'a', LinkProps> & {\n  Icon: typeof LinkIcon\n  Text: typeof LinkText\n}\n\nLink.Icon = LinkIcon\nLink.Text = LinkText\nLink.displayName = 'Link'\n\nexport default Link\n"],"mappings":";;;;;;;;;;;;;;AAWA,MAAM,qBAAqB;;;;;;;;;;AAW3B,MAAa,WAAW,OAAO,KAAK,OAAO,WAAsB,EAC/D,cAAc,MAAM,gBAAgB,OACrC,EAAE;IACC,mBAAmB;;;;;;;;;;;;wBAYC,EAAE,mBAAoB,eAAe,aAAa,QAAS;;;;;;;;;kBASjE,EAAE,mBACd,eAAe,iCAAiC,+BAA+B;;;;AAKrF,MAAa,OAAO,KAAqB,OAAO,QAAQ;CACtD,MAAM,EACJ,UACA,WACA,YACA,UACA,WACA,YACA,cACA,MACA,MACA,SACA,QACA,GAAG,SACD;CAEJ,MAAM,SAAS,eAAe,QAAQ,MAAM;CAC5C,MAAM,UAAU,cAAc,gBAAgB;EAAE;EAAM;EAAS,CAAC,EAAE,CAAC,MAAM,QAAQ,CAAC;CAElF,MAAM,eAAe,gBAAgB;EACnC,YAAY,UAAU;EACtB,KAAK,aAAa,aAAa;EAC/B,QAAQ,aAAa,WAAW;EAChC,IAAI,WAAW,WAAW;EAC1B,IAAI,YAAY,WAAW;EAC5B,CAAC;AAEF,QACE,oBAAC;EAAa,OAAO;EAAS,aAAW,QAAQ;EAAM,gBAAc,QAAQ;YAC3E,qBAAC;GACC,WAAW,GAAG,YAAY,UAAU;GACpC,WAAW;GACG;GACT;GACL,GAAI,OAAO;GACX,GAAI;GACJ,GAAI;;IAEH,SAAS,SAAS,GAAG,oBAAC;KAAS,IAAI;KAAG,MAAM;KAAG,MAAM;MAAY,GAAG;IACpE,WAAW,oBAAC;KAAE,UAAU;KAAY;MAAa,GAAG,YAAY,KAAK,IAAI,oBAAC,YAAe,OAAQ;IACjG,SAAS,UAAU,GAAG,oBAAC;KAAS,IAAI;KAAG,OAAO;KAAG,MAAM;MAAa,GAAG;;IAC/D;GACE;EAEjB;AAKF,KAAK,OAAO;AACZ,KAAK,OAAO;AACZ,KAAK,cAAc"}
+{"version":3,"file":"link.js","names":[],"sources":["../../src/link/link.tsx"],"sourcesContent":["import { useMemo } from 'react'\n\nimport type { VuiComponent } from '../core'\nimport { styled, useStyleConfig, vui } from '../core'\nimport T from '../t'\nimport { cs, filterUndefined, isReactText, isString } from '../utils'\nimport { LinkProvider } from './context'\nimport type { LinkProps } from './link.types'\nimport LinkIcon from './linkIcon'\nimport LinkText from './linkText'\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\nexport const LinkBase = styled.aBox.attrs((props: LinkProps) => ({\n  isUnderlined: props.isUnderlined || false,\n}))`\n  ${linkSwipeAnimation}\n  display: inline;\n  cursor: pointer;\n  position: relative;\n  line-height: 1.5;\n  outline: none;\n  width: fit-content;\n  text-decoration: none;\n\n  &:not(.vui-linkNoUnderline) > .vui-t {\n    position: relative;\n    background: linear-gradient(to right, currentcolor, currentcolor);\n    background-size: ${({ isUnderlined }) => (isUnderlined ? '100% 1px' : '0 1px')};\n    background-position: 0 100%;\n    background-repeat: no-repeat;\n    text-decoration: none;\n    padding-bottom: 2px;\n    line-height: 1.2;\n  }\n\n  &:hover > .vui-t {\n    animation: ${({ isUnderlined }) =>\n      isUnderlined ? 'linkSwipe 0.5s ease forwards' : 'linkSwipe 0.3s ease forwards'};\n    background-size: 100% 1px;\n  }\n`\n\nexport const Link = vui<'a', LinkProps>((props, ref) => {\n  const {\n    children,\n    className,\n    fontWeight,\n    iconLeft,\n    iconRight,\n    isExternal,\n    isUnderlined,\n    size,\n    text,\n    variant,\n    weight,\n    ...rest\n  } = props\n\n  const styles = useStyleConfig('Link', props)\n  const context = useMemo(() => filterUndefined({ size, variant }), [size, variant])\n  const iconPadding = size === 'xs' ? '1.2rem' : '1.5rem'\n\n  const aliasedProps = filterUndefined({\n    fontWeight: weight || fontWeight,\n    rel: isExternal ? 'noopener' : undefined,\n    target: isExternal ? '_blank' : undefined,\n    pl: iconLeft ? iconPadding : undefined,\n    pr: iconRight ? iconPadding : undefined,\n  })\n\n  return (\n    <LinkProvider value={context} data-size={context.size} data-variant={context.variant}>\n      <LinkBase\n        className={cs('vui-link', className)}\n        focusRing={2}\n        isUnderlined={isUnderlined}\n        ref={ref}\n        {...styles.container}\n        {...aliasedProps}\n        {...rest}\n      >\n        {isString(iconLeft) ? <LinkIcon mr={1} left={0} name={iconLeft} /> : iconLeft}\n        {children ? <T fontSize={'inherit'}>{children}</T> : isReactText(text) && <LinkText text={text} />}\n        {isString(iconRight) ? <LinkIcon ml={1} right={0} name={iconRight} /> : iconRight}\n      </LinkBase>\n    </LinkProvider>\n  )\n}) as VuiComponent<'a', LinkProps> & {\n  Icon: typeof LinkIcon\n  Text: typeof LinkText\n}\n\nLink.Icon = LinkIcon\nLink.Text = LinkText\nLink.displayName = 'Link'\n\nexport default Link\n"],"mappings":";;;;;;;;;;;;;;AAWA,MAAM,qBAAqB;;;;;;;;;;AAW3B,MAAa,WAAW,OAAO,KAAK,OAAO,WAAsB,EAC/D,cAAc,MAAM,gBAAgB,OACrC,EAAE;IACC,mBAAmB;;;;;;;;;;;;wBAYC,EAAE,mBAAoB,eAAe,aAAa,QAAS;;;;;;;;;kBASjE,EAAE,mBACd,eAAe,iCAAiC,+BAA+B;;;;AAKrF,MAAa,OAAO,KAAqB,OAAO,QAAQ;CACtD,MAAM,EACJ,UACA,WACA,YACA,UACA,WACA,YACA,cACA,MACA,MACA,SACA,QACA,GAAG,SACD;CAEJ,MAAM,SAAS,eAAe,QAAQ,MAAM;CAC5C,MAAM,UAAU,cAAc,gBAAgB;EAAE;EAAM;EAAS,CAAC,EAAE,CAAC,MAAM,QAAQ,CAAC;CAClF,MAAM,cAAc,SAAS,OAAO,WAAW;CAE/C,MAAM,eAAe,gBAAgB;EACnC,YAAY,UAAU;EACtB,KAAK,aAAa,aAAa;EAC/B,QAAQ,aAAa,WAAW;EAChC,IAAI,WAAW,cAAc;EAC7B,IAAI,YAAY,cAAc;EAC/B,CAAC;AAEF,QACE,oBAAC;EAAa,OAAO;EAAS,aAAW,QAAQ;EAAM,gBAAc,QAAQ;YAC3E,qBAAC;GACC,WAAW,GAAG,YAAY,UAAU;GACpC,WAAW;GACG;GACT;GACL,GAAI,OAAO;GACX,GAAI;GACJ,GAAI;;IAEH,SAAS,SAAS,GAAG,oBAAC;KAAS,IAAI;KAAG,MAAM;KAAG,MAAM;MAAY,GAAG;IACpE,WAAW,oBAAC;KAAE,UAAU;KAAY;MAAa,GAAG,YAAY,KAAK,IAAI,oBAAC,YAAe,OAAQ;IACjG,SAAS,UAAU,GAAG,oBAAC;KAAS,IAAI;KAAG,OAAO;KAAG,MAAM;MAAa,GAAG;;IAC/D;GACE;EAEjB;AAKF,KAAK,OAAO;AACZ,KAAK,OAAO;AACZ,KAAK,cAAc"}

package/dist/link/link.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/link/link.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"link.types.d.ts","names":[],"sources":["../../src/link/link.types.ts"],"mappings":";;;;;;;;;KAMY,SAAA,GAAY,WAAA,GACtB,YAAA;6DAEE,WAAA;EAEA,UAAA,GAAa,eAAA,oBALL;EAOR,eAAA,GAAkB,eAAA;EAElB,IAAA,WARF;EAUE,QAAA,GAAW,QAAA,GAAW,GAAA,CAAI,OAAA,EAJR;EAMlB,SAAA,GAAY,QAAA,GAAW,GAAA,CAAI,OAAA,EAFL;EAItB,UAAA,YAFuB;EAIvB,YAAA,YAIS;EAFT,IAAA,qBAAyB,GAAA,CAAI,OAAA,EAEL;EAAxB,MAAA,GAAS,eAAA;AAAA"}
+{"version":3,"file":"link.types.d.ts","names":[],"sources":["../../src/link/link.types.ts"],"mappings":";;;;;;;;;;KAMY,SAAA,GAAY,WAAA,GACtB,YAAA;6DAEE,WAAA;EAEA,UAAA,GAAa,eAAA;EAEb,eAAA,GAAkB,eAAA,oBAPD;EASjB,IAAA,WAToB;EAWpB,QAAA,GAAW,QAAA,GAAW,GAAA,CAAI,OAAA,EANb;EAQb,SAAA,GAAY,QAAA,GAAW,GAAA,CAAI,OAAA,EAFhB;EAIX,UAAA,YAFY;EAIZ,YAAA,YAEyB;EAAzB,IAAA,qBAAyB,GAAA,CAAI,OAAA,EAEL;EAAxB,MAAA,GAAS,eAAA;AAAA"}

package/dist/link/linkIcon.js

@@ -21,5 +21,5 @@ LinkIcon.displayName = "LinkIcon";
 
 //#endregion
 export { LinkIcon as default };
-globalThis.__vuiVersion__ = "4.0.2"
+globalThis.__vuiVersion__ = "4.0.3"
 //# sourceMappingURL=linkIcon.js.map

package/dist/link/linkText.js

@@ -23,5 +23,5 @@ LinkText.displayName = "LinkText";
 
 //#endregion
 export { LinkText as default };
-globalThis.__vuiVersion__ = "4.0.2"
+globalThis.__vuiVersion__ = "4.0.3"
 //# sourceMappingURL=linkText.js.map

package/dist/link/theme.js

@@ -55,5 +55,5 @@ var theme_default = {
 
 //#endregion
 export { theme_default as default };
-globalThis.__vuiVersion__ = "4.0.2"
+globalThis.__vuiVersion__ = "4.0.3"
 //# sourceMappingURL=theme.js.map

package/dist/list/context.js

@@ -5,5 +5,5 @@ const [ListProvider, useListContext] = createContext({ isOptional: true });
 
 //#endregion
 export { ListProvider, useListContext };
-globalThis.__vuiVersion__ = "4.0.2"
+globalThis.__vuiVersion__ = "4.0.3"
 //# sourceMappingURL=context.js.map

package/dist/list/list.js

@@ -83,5 +83,5 @@ List.displayName = "List";
 
 //#endregion
 export { ListBase, List as default };
-globalThis.__vuiVersion__ = "4.0.2"
+globalThis.__vuiVersion__ = "4.0.3"
 //# sourceMappingURL=list.js.map

package/dist/list/list.types.d.ts

@@ -1,6 +1,7 @@
 import { PropsOf } from "../utils/types.js";
 import "../utils/index.js";
 import { ThemingProps } from "../theme/types.js";
+import "../theme/index.js";
 import { SystemProps } from "../system/system.js";
 import "../system/index.js";
 import { IconProp } from "../icon/icon.types.js";

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

@@ -1 +1 @@
-{"version":3,"file":"list.types.d.ts","names":[],"sources":["../../src/list/list.types.ts"],"mappings":";;;;;;;;;;;;KAQY,SAAA,GAAY,WAAA,GACtB,YAAA;iCAEE,WAAA;EAEA,OAAA,GAAU,KAAA,CAAM,SAAA;EAEhB,aAAA,YAPiB;EASjB,KAAA,GAAQ,OAAA,OAAc,aAAA,MAAmB,GAAA,CAAI,OAAA,EATzB;EAWpB,OAAA;AAAA;AAAA,KAGQ,iBAAA,GAAoB,OAAA,MAAa,SAAA;AAAA,KAEjC,aAAA,GAAgB,WAAA,GAC1B,YAAA;EAR2C,mEAUzC,MAAA,YAVoD;EAYpD,OAAA,YApBF;EAsBE,OAAA,YAlBA;EAoBA,WAAA,oBApBgB;EAsBhB,MAAA,YAlBA;EAoBA,QAAA,YApBsB;EAsBtB,QAAA,GAAW,QAAA,GAAW,GAAA,CAAI,OAAA,EAtBmB;EAwB7C,SAAA,GAAY,QAAA,GAAW,GAAA,CAAI,OAAA,EAtBpB;EAwBP,aAAA,YArBQ;EAuBR,UAAA;EAEA,QAAA,GAAW,SAAA,EAzBuC;EA2BlD,SAAA,GAAY,SAAA,EAzBS;EA2BrB,aAAA,YA3BwB;EA6BxB,SAAA,GAAY,iBAAA,EAdD;EAgBX,IAAA,GAAO,SAAA;AAAA"}
+{"version":3,"file":"list.types.d.ts","names":[],"sources":["../../src/list/list.types.ts"],"mappings":";;;;;;;;;;;;;KAQY,SAAA,GAAY,WAAA,GACtB,YAAA;iCAEE,WAAA;EAEA,OAAA,GAAU,KAAA,CAAM,SAAA;EAEhB,aAAA,YAPQ;EASR,KAAA,GAAQ,OAAA,OAAc,aAAA,MAAmB,GAAA,CAAI,OAAA;EAE7C,OAAA;AAAA;AAAA,KAGQ,iBAAA,GAAoB,OAAA,MAAa,SAAA;AAAA,KAEjC,aAAA,GAAgB,WAAA,GAC1B,YAAA;EARU,mEAUR,MAAA,YAVoD;EAYpD,OAAA,YArBoB;EAuBpB,OAAA,YApBA;EAsBA,WAAA,oBApBU;EAsBV,MAAA,YApBA;EAsBA,QAAA,YApBQ;EAsBR,QAAA,GAAW,QAAA,GAAW,GAAA,CAAI,OAAA,EAtBe;EAwBzC,SAAA,GAAY,QAAA,GAAW,GAAA,CAAI,OAAA,EAtB3B;EAwBA,aAAA,YAxBO;EA0BP,UAAA,YAvByB;EAyBzB,QAAA,GAAW,SAAA,EAzBiB;EA2B5B,SAAA,GAAY,SAAA,EAzBJ;EA2BR,aAAA;EAEA,SAAA,GAAY,iBAAA,EA5Bd;EA8BE,IAAA,GAAO,SAAA;AAAA"}

package/dist/list/listDivider.js

@@ -22,5 +22,5 @@ ListDivider.displayName = "ListDivider";
 
 //#endregion
 export { ListDivider as default };
-globalThis.__vuiVersion__ = "4.0.2"
+globalThis.__vuiVersion__ = "4.0.3"
 //# sourceMappingURL=listDivider.js.map

package/dist/list/listHeading.js

@@ -27,5 +27,5 @@ ListHeading.displayName = "ListHeading";
 
 //#endregion
 export { ListHeading as default };
-globalThis.__vuiVersion__ = "4.0.2"
+globalThis.__vuiVersion__ = "4.0.3"
 //# sourceMappingURL=listHeading.js.map

package/dist/list/listIcon.js

@@ -21,5 +21,5 @@ ListIcon.displayName = "ListIcon";
 
 //#endregion
 export { ListIcon as default };
-globalThis.__vuiVersion__ = "4.0.2"
+globalThis.__vuiVersion__ = "4.0.3"
 //# sourceMappingURL=listIcon.js.map

package/dist/list/listItem.js

@@ -112,5 +112,5 @@ ListItem.displayName = "ListItem";
 
 //#endregion
 export { ListItemBase, ListItem as default };
-globalThis.__vuiVersion__ = "4.0.2"
+globalThis.__vuiVersion__ = "4.0.3"
 //# sourceMappingURL=listItem.js.map

package/dist/list/listText.js

@@ -23,5 +23,5 @@ ListText.displayName = "ListText";
 
 //#endregion
 export { ListText as default };
-globalThis.__vuiVersion__ = "4.0.2"
+globalThis.__vuiVersion__ = "4.0.3"
 //# sourceMappingURL=listText.js.map

package/dist/list/theme.js

@@ -100,5 +100,5 @@ var theme_default = {
 
 //#endregion
 export { theme_default as default };
-globalThis.__vuiVersion__ = "4.0.2"
+globalThis.__vuiVersion__ = "4.0.3"
 //# sourceMappingURL=theme.js.map

package/dist/logo/Logo.js

@@ -48,5 +48,5 @@ Logo.displayName = "Logo";
 
 //#endregion
 export { Logo as default };
-globalThis.__vuiVersion__ = "4.0.2"
+globalThis.__vuiVersion__ = "4.0.3"
 //# sourceMappingURL=Logo.js.map

package/dist/menu/context.js

@@ -5,5 +5,5 @@ const [MenuProvider, useMenuContext] = createContext({ isOptional: true });
 
 //#endregion
 export { MenuProvider, useMenuContext };
-globalThis.__vuiVersion__ = "4.0.2"
+globalThis.__vuiVersion__ = "4.0.3"
 //# sourceMappingURL=context.js.map

package/dist/menu/menu.js

@@ -31,5 +31,5 @@ Menu.displayName = "Menu";
 
 //#endregion
 export { Menu as default };
-globalThis.__vuiVersion__ = "4.0.2"
+globalThis.__vuiVersion__ = "4.0.3"
 //# sourceMappingURL=menu.js.map

package/dist/menu/menu.types.d.ts

@@ -1,4 +1,5 @@
 import { ThemingProps } from "../theme/types.js";
+import "../theme/index.js";
 import { ListProps } from "../list/list.types.js";
 import "../list/index.js";
 import { PopoverContentProps, PopoverProps } from "../popover/popover.types.js";

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

@@ -1 +1 @@
-{"version":3,"file":"menu.types.d.ts","names":[],"sources":["../../src/menu/menu.types.ts"],"mappings":";;;;;;;;KAMY,aAAA,GAAgB,SAAA;yDAE1B,YAAA,GAAe,mBAAA;EAEf,UAAA,GAAa,SAAA,CAAU,cAAA,GAJA;EAMvB,IAAA,WAN0B;EAQ1B,UAAA,GAAa,SAAA,EAJU;EAMvB,OAAA,GAAU,SAAA;AAAA;AAAA,KAGA,SAAA,GAAY,YAAA,WACtB,YAAA;EAJmB,mDAMjB,aAAA;AAAA"}
+{"version":3,"file":"menu.types.d.ts","names":[],"sources":["../../src/menu/menu.types.ts"],"mappings":";;;;;;;;;KAMY,aAAA,GAAgB,SAAA;yDAE1B,YAAA,GAAe,mBAAA;EAEf,UAAA,GAAa,SAAA,CAAU,cAAA,GAJb;EAMV,IAAA;EAEA,UAAA,GAAa,SAAA,EANE;EAQf,OAAA,GAAU,SAAA;AAAA;AAAA,KAGA,SAAA,GAAY,YAAA,WACtB,YAAA;EAJU,mDAMR,aAAA;AAAA"}

package/dist/menu/menuButton.js

@@ -23,5 +23,5 @@ MenuButton.displayName = "MenuButton";
 
 //#endregion
 export { MenuButton as default };
-globalThis.__vuiVersion__ = "4.0.2"
+globalThis.__vuiVersion__ = "4.0.3"
 //# sourceMappingURL=menuButton.js.map

package/dist/menu/menuItem.js

@@ -33,5 +33,5 @@ MenuItem.displayName = "MenuItem";
 
 //#endregion
 export { MenuItem as default };
-globalThis.__vuiVersion__ = "4.0.2"
+globalThis.__vuiVersion__ = "4.0.3"
 //# sourceMappingURL=menuItem.js.map

package/dist/menu/menuList.js

@@ -44,5 +44,5 @@ MenuList.displayName = "MenuList";
 
 //#endregion
 export { MenuList as default };
-globalThis.__vuiVersion__ = "4.0.2"
+globalThis.__vuiVersion__ = "4.0.3"
 //# sourceMappingURL=menuList.js.map

package/dist/menu/theme.js

@@ -34,5 +34,5 @@ var theme_default = {
 
 //#endregion
 export { theme_default as default };
-globalThis.__vuiVersion__ = "4.0.2"
+globalThis.__vuiVersion__ = "4.0.3"
 //# sourceMappingURL=theme.js.map

package/dist/message/consts.js

@@ -1,9 +1,9 @@
 //#region src/message/consts.ts
 const iconDictionary = {
-	info: "falInfoCircle",
-	warning: "falExclamationTriangle",
-	error: "falExclamationTriangle",
-	success: "falCheckCircle"
+	info: "uiInfoCircle",
+	warning: "uiExclamationTriangle",
+	error: "uiExclamationTriangle",
+	success: "uiCheckCircle"
 };
 const spacingDictionary = {
 	sm: 6,
@@ -23,5 +23,5 @@ const avatarStyles = {
 
 //#endregion
 export { avatarStyles, iconDictionary, messageColors, spacingDictionary };
-globalThis.__vuiVersion__ = "4.0.2"
+globalThis.__vuiVersion__ = "4.0.3"
 //# sourceMappingURL=consts.js.map

package/dist/message/consts.js.map

@@ -1 +1 @@
-{"version":3,"file":"consts.js","names":[],"sources":["../../src/message/consts.ts"],"sourcesContent":["export const iconDictionary = {\n  info: 'falInfoCircle',\n  warning: 'falExclamationTriangle',\n  error: 'falExclamationTriangle',\n  success: 'falCheckCircle',\n}\n\nexport const spacingDictionary = {\n  sm: 6,\n  md: 8,\n  lg: 10,\n}\n\nexport const messageColors = {\n  info: 'seaBlue.main',\n  warning: 'terracotta.30',\n  error: 'energyRed.45',\n  success: 'landGreen.35',\n}\n\nexport const avatarStyles = {\n  mt: '4px',\n  color: 'black',\n}\n"],"mappings":";AAAA,MAAa,iBAAiB;CAC5B,MAAM;CACN,SAAS;CACT,OAAO;CACP,SAAS;CACV;AAED,MAAa,oBAAoB;CAC/B,IAAI;CACJ,IAAI;CACJ,IAAI;CACL;AAED,MAAa,gBAAgB;CAC3B,MAAM;CACN,SAAS;CACT,OAAO;CACP,SAAS;CACV;AAED,MAAa,eAAe;CAC1B,IAAI;CACJ,OAAO;CACR"}
+{"version":3,"file":"consts.js","names":[],"sources":["../../src/message/consts.ts"],"sourcesContent":["export const iconDictionary = {\n  info: 'uiInfoCircle',\n  warning: 'uiExclamationTriangle',\n  error: 'uiExclamationTriangle',\n  success: 'uiCheckCircle',\n}\n\nexport const spacingDictionary = {\n  sm: 6,\n  md: 8,\n  lg: 10,\n}\n\nexport const messageColors = {\n  info: 'seaBlue.main',\n  warning: 'terracotta.30',\n  error: 'energyRed.45',\n  success: 'landGreen.35',\n}\n\nexport const avatarStyles = {\n  mt: '4px',\n  color: 'black',\n}\n"],"mappings":";AAAA,MAAa,iBAAiB;CAC5B,MAAM;CACN,SAAS;CACT,OAAO;CACP,SAAS;CACV;AAED,MAAa,oBAAoB;CAC/B,IAAI;CACJ,IAAI;CACJ,IAAI;CACL;AAED,MAAa,gBAAgB;CAC3B,MAAM;CACN,SAAS;CACT,OAAO;CACP,SAAS;CACV;AAED,MAAa,eAAe;CAC1B,IAAI;CACJ,OAAO;CACR"}

package/dist/message/message.js

@@ -40,5 +40,5 @@ Message.displayName = "Message";
 
 //#endregion
 export { MessageBase, Message as default };
-globalThis.__vuiVersion__ = "4.0.2"
+globalThis.__vuiVersion__ = "4.0.3"
 //# sourceMappingURL=message.js.map

package/dist/message/message.types.d.ts

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

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

@@ -1 +1 @@
-{"version":3,"file":"message.types.d.ts","names":[],"sources":["../../src/message/message.types.ts"],"mappings":";;;;;;;;KAMY,YAAA,GAAe,WAAA,GACzB,YAAA;yDAEE,IAAA,GAAO,SAAA;EAEP,MAAA,GAAS,WAAA;AAAA"}
+{"version":3,"file":"message.types.d.ts","names":[],"sources":["../../src/message/message.types.ts"],"mappings":";;;;;;;;;KAMY,YAAA,GAAe,WAAA,GACzB,YAAA;yDAEE,IAAA,GAAO,SAAA;EAEP,MAAA,GAAS,WAAA;AAAA"}

package/dist/message/theme.js

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

package/dist/modal/context.js

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

package/dist/modal/modal.js

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

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

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

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

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

package/dist/modal/modalBackdrop.js

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

package/dist/modal/modalContent.js

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

package/dist/modal/modalManager.js

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

package/dist/modal/theme.js

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

package/dist/notification/consts.js

@@ -1,7 +1,6 @@
 import { iconDictionary } from "../message/consts.js";
 
 //#region src/notification/consts.ts
-const bannerNotificationElevation = 2;
 const notificationStatusMapping = {
 	error: {
 		iconProps: { name: iconDictionary.error },
@@ -13,7 +12,7 @@ const notificationStatusMapping = {
 	},
 	loading: {
 		iconProps: {
-			name: "fadSpinnerThird",
+			name: "uiSpinnerThird",
 			pathFill: ["blue.40", "blue.60"],
 			variant: "spinning"
 		},
@@ -37,7 +36,7 @@ const notificationStatusMapping = {
 	},
 	bannerLoading: {
 		iconProps: {
-			name: "fadSpinnerThird",
+			name: "uiSpinnerThird",
 			pathFill: ["blue.40", "blue.60"],
 			variant: "spinning"
 		},
@@ -52,18 +51,8 @@ const notificationStatusMapping = {
 		variant: "bannerYellow"
 	}
 };
-const closeButtonVariantMapping = {
-	subtleRed: "subtleRed",
-	subtleBlue: "subtleBlue",
-	subtleGreen: "subtleGreen",
-	subtleYellow: "subtleYellow",
-	bannerRed: "subtleRed",
-	bannerBlue: "subtleBlue",
-	bannerGreen: "subtleGreen",
-	bannerYellow: "subtleYellow"
-};
 
 //#endregion
-export { bannerNotificationElevation, closeButtonVariantMapping, notificationStatusMapping };
-globalThis.__vuiVersion__ = "4.0.2"
+export { notificationStatusMapping };
+globalThis.__vuiVersion__ = "4.0.3"
 //# sourceMappingURL=consts.js.map

package/dist/notification/consts.js.map

@@ -1 +1 @@
-{"version":3,"file":"consts.js","names":[],"sources":["../../src/notification/consts.ts"],"sourcesContent":["import { iconDictionary } from '../message/consts'\nimport type { NotificationStatusMapping } from './notification.types'\n\nexport const bannerNotificationElevation = 2\n\nexport const notificationStatusMapping: NotificationStatusMapping = {\n  error: {\n    iconProps: {\n      name: iconDictionary.error,\n    },\n    variant: 'subtleRed',\n  },\n  info: {\n    iconProps: {\n      name: iconDictionary.info,\n    },\n    variant: 'subtleBlue',\n  },\n  loading: {\n    iconProps: {\n      name: 'fadSpinnerThird',\n      pathFill: ['blue.40', 'blue.60'],\n      variant: 'spinning',\n    },\n    variant: 'subtleBlue',\n  },\n  success: {\n    iconProps: {\n      name: iconDictionary.success,\n    },\n    variant: 'subtleGreen',\n  },\n  warning: {\n    iconProps: {\n      name: iconDictionary.warning,\n    },\n    variant: 'subtleYellow',\n  },\n  bannerError: {\n    iconProps: {\n      name: iconDictionary.error,\n    },\n    variant: 'bannerRed',\n  },\n  bannerInfo: {\n    iconProps: {\n      name: iconDictionary.info,\n    },\n    variant: 'bannerBlue',\n  },\n  bannerLoading: {\n    iconProps: {\n      name: 'fadSpinnerThird',\n      pathFill: ['blue.40', 'blue.60'],\n      variant: 'spinning',\n    },\n    variant: 'bannerBlue',\n  },\n  bannerSuccess: {\n    iconProps: {\n      name: iconDictionary.success,\n    },\n    variant: 'bannerGreen',\n  },\n  bannerWarning: {\n    iconProps: {\n      name: iconDictionary.warning,\n    },\n    variant: 'bannerYellow',\n  },\n}\n\nexport const closeButtonVariantMapping = {\n  subtleRed: 'subtleRed',\n  subtleBlue: 'subtleBlue',\n  subtleGreen: 'subtleGreen',\n  subtleYellow: 'subtleYellow',\n  bannerRed: 'subtleRed',\n  bannerBlue: 'subtleBlue',\n  bannerGreen: 'subtleGreen',\n  bannerYellow: 'subtleYellow',\n}\n"],"mappings":";;;AAGA,MAAa,8BAA8B;AAE3C,MAAa,4BAAuD;CAClE,OAAO;EACL,WAAW,EACT,MAAM,eAAe,OACtB;EACD,SAAS;EACV;CACD,MAAM;EACJ,WAAW,EACT,MAAM,eAAe,MACtB;EACD,SAAS;EACV;CACD,SAAS;EACP,WAAW;GACT,MAAM;GACN,UAAU,CAAC,WAAW,UAAU;GAChC,SAAS;GACV;EACD,SAAS;EACV;CACD,SAAS;EACP,WAAW,EACT,MAAM,eAAe,SACtB;EACD,SAAS;EACV;CACD,SAAS;EACP,WAAW,EACT,MAAM,eAAe,SACtB;EACD,SAAS;EACV;CACD,aAAa;EACX,WAAW,EACT,MAAM,eAAe,OACtB;EACD,SAAS;EACV;CACD,YAAY;EACV,WAAW,EACT,MAAM,eAAe,MACtB;EACD,SAAS;EACV;CACD,eAAe;EACb,WAAW;GACT,MAAM;GACN,UAAU,CAAC,WAAW,UAAU;GAChC,SAAS;GACV;EACD,SAAS;EACV;CACD,eAAe;EACb,WAAW,EACT,MAAM,eAAe,SACtB;EACD,SAAS;EACV;CACD,eAAe;EACb,WAAW,EACT,MAAM,eAAe,SACtB;EACD,SAAS;EACV;CACF;AAED,MAAa,4BAA4B;CACvC,WAAW;CACX,YAAY;CACZ,aAAa;CACb,cAAc;CACd,WAAW;CACX,YAAY;CACZ,aAAa;CACb,cAAc;CACf"}
+{"version":3,"file":"consts.js","names":[],"sources":["../../src/notification/consts.ts"],"sourcesContent":["import { iconDictionary } from '../message/consts'\nimport type { NotificationStatusMapping } from './notification.types'\n\nexport const bannerNotificationElevation = 2\n\nexport const notificationStatusMapping: NotificationStatusMapping = {\n  error: {\n    iconProps: {\n      name: iconDictionary.error,\n    },\n    variant: 'subtleRed',\n  },\n  info: {\n    iconProps: {\n      name: iconDictionary.info,\n    },\n    variant: 'subtleBlue',\n  },\n  loading: {\n    iconProps: {\n      name: 'uiSpinnerThird',\n      pathFill: ['blue.40', 'blue.60'],\n      variant: 'spinning',\n    },\n    variant: 'subtleBlue',\n  },\n  success: {\n    iconProps: {\n      name: iconDictionary.success,\n    },\n    variant: 'subtleGreen',\n  },\n  warning: {\n    iconProps: {\n      name: iconDictionary.warning,\n    },\n    variant: 'subtleYellow',\n  },\n  bannerError: {\n    iconProps: {\n      name: iconDictionary.error,\n    },\n    variant: 'bannerRed',\n  },\n  bannerInfo: {\n    iconProps: {\n      name: iconDictionary.info,\n    },\n    variant: 'bannerBlue',\n  },\n  bannerLoading: {\n    iconProps: {\n      name: 'uiSpinnerThird',\n      pathFill: ['blue.40', 'blue.60'],\n      variant: 'spinning',\n    },\n    variant: 'bannerBlue',\n  },\n  bannerSuccess: {\n    iconProps: {\n      name: iconDictionary.success,\n    },\n    variant: 'bannerGreen',\n  },\n  bannerWarning: {\n    iconProps: {\n      name: iconDictionary.warning,\n    },\n    variant: 'bannerYellow',\n  },\n}\n"],"mappings":";;;AAKA,MAAa,4BAAuD;CAClE,OAAO;EACL,WAAW,EACT,MAAM,eAAe,OACtB;EACD,SAAS;EACV;CACD,MAAM;EACJ,WAAW,EACT,MAAM,eAAe,MACtB;EACD,SAAS;EACV;CACD,SAAS;EACP,WAAW;GACT,MAAM;GACN,UAAU,CAAC,WAAW,UAAU;GAChC,SAAS;GACV;EACD,SAAS;EACV;CACD,SAAS;EACP,WAAW,EACT,MAAM,eAAe,SACtB;EACD,SAAS;EACV;CACD,SAAS;EACP,WAAW,EACT,MAAM,eAAe,SACtB;EACD,SAAS;EACV;CACD,aAAa;EACX,WAAW,EACT,MAAM,eAAe,OACtB;EACD,SAAS;EACV;CACD,YAAY;EACV,WAAW,EACT,MAAM,eAAe,MACtB;EACD,SAAS;EACV;CACD,eAAe;EACb,WAAW;GACT,MAAM;GACN,UAAU,CAAC,WAAW,UAAU;GAChC,SAAS;GACV;EACD,SAAS;EACV;CACD,eAAe;EACb,WAAW,EACT,MAAM,eAAe,SACtB;EACD,SAAS;EACV;CACD,eAAe;EACb,WAAW,EACT,MAAM,eAAe,SACtB;EACD,SAAS;EACV;CACF"}

package/dist/notification/context.js

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

package/dist/notification/index.d.ts

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

package/dist/notification/notification.d.ts

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

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

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

package/dist/notification/notification.js

@@ -5,7 +5,8 @@ import { useStyleConfig } from "../core/theme.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 { notificationStatusMapping } from "./consts.js";
+import NotificationAction from "./notificationAction.js";
 import NotificationButton from "./notificationButton.js";
 import NotificationIcon from "./notificationIcon.js";
 import NotificationText from "./notificationText.js";
@@ -24,28 +25,35 @@ 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, {
 			borderRadius: "md",
 			borderWidth: 1,
 			className: cs("vui-notification", className),
-			elevation: variant.includes("banner") ? bannerNotificationElevation : void 0,
 			ref,
 			role: "mark",
 			w: "fit-content",
 			...styles.container,
+			...bannerOverrides,
 			...rest,
 			children: [
 				iconName ? /* @__PURE__ */ jsx(NotificationIcon, {
@@ -63,19 +71,19 @@ const Notification = vui((props, ref) => {
 						text
 					]
 				}),
-				action,
-				onClose && /* @__PURE__ */ jsx(NotificationButton, {
+				action ? /* @__PURE__ */ jsx(NotificationAction, { children: action }) : null,
+				onClose ? /* @__PURE__ */ jsx(NotificationButton, {
 					alignSelf,
 					"aria-label": "close",
 					icon: "uiTimes",
 					onClick: onClose,
-					variant: closeButtonVariantMapping?.[variant] ?? variant,
-					w: "32px"
-				})
+					w: 4
+				}) : null
 			]
 		})
 	});
 });
+Notification.Action = NotificationAction;
 Notification.Button = NotificationButton;
 Notification.Icon = NotificationIcon;
 Notification.Text = NotificationText;
@@ -84,5 +92,5 @@ Notification.displayName = "Notification";
 
 //#endregion
 export { Notification as default };
-globalThis.__vuiVersion__ = "4.0.2"
+globalThis.__vuiVersion__ = "4.0.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 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 type { VuiComponent } from '../core'\nimport { useStyleConfig, vui } from '../core'\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 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\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      <Box\n        borderRadius=\"md\"\n        borderWidth={1}\n        className={cs('vui-notification', className)}\n        ref={ref}\n        role=\"mark\"\n        w=\"fit-content\"\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          <NotificationButton alignSelf={alignSelf} aria-label=\"close\" icon=\"uiTimes\" onClick={onClose} w={4} />\n        ) : null}\n      </Box>\n    </NotificationProvider>\n  )\n}) as VuiComponent<'div', NotificationProps> & {\n  Action: typeof NotificationAction\n  Button: typeof NotificationButton\n  Icon: typeof NotificationIcon\n  Text: typeof NotificationText\n  Title: typeof NotificationTitle\n}\n\nNotification.Action = NotificationAction\nNotification.Button = NotificationButton\nNotification.Icon = NotificationIcon\nNotification.Text = NotificationText\nNotification.Title = NotificationTitle\nNotification.displayName = 'Notification'\n\nexport default Notification\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAiBA,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,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;KAA8B;KAAW,cAAW;KAAQ,MAAK;KAAU,SAAS;KAAS,GAAG;MAAK,GACpG;;IACA;GACe;EAEzB;AAQF,aAAa,SAAS;AACtB,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"}