@veracity/vui 3.1.2 → 4.0.0-alpha.366771.2601090922

package/dist/modal/modalContent.js

@@ -1,8 +1,10 @@
 import { callAll } from "../utils/function.js";
 import { cs } from "../utils/styles.js";
+import "../utils/index.js";
 import { useStyleConfig } from "../core/theme.js";
 import { styled } from "../core/styled.js";
 import { vui } from "../core/vui.js";
+import "../core/index.js";
 import { useModalContext } from "./context.js";
 import { jsx } from "react/jsx-runtime";
 
@@ -15,7 +17,7 @@ const ModalContentBase = styled.divBox`
 `;
 /** Wraps the content provided to the Modal component. */
 const ModalContent = vui((props, ref) => {
-	const { className,...rest } = props;
+	const { className, ...rest } = props;
 	const { onBackdropClick } = useModalContext() ?? {};
 	const styles = useStyleConfig("Modal", useModalContext());
 	return /* @__PURE__ */ jsx(ModalContentBase, {
@@ -32,5 +34,5 @@ var modalContent_default = ModalContent;
 
 //#endregion
 export { ModalContent, ModalContentBase, modalContent_default as default };
-globalThis.__vuiVersion__ = "3.1.2"
+globalThis.__vuiVersion__ = "4.0.0-beta.1"
 //# sourceMappingURL=modalContent.js.map

package/dist/modal/modalContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"modalContent.js","names":[],"sources":["../../src/modal/modalContent.tsx"],"sourcesContent":["import { styled, useStyleConfig, vui } from '../core'\nimport { callAll, cs } from '../utils'\nimport { useModalContext } from './context'\nimport type { ModalContentProps } from './modal.types'\n\nexport const ModalContentBase = styled.divBox`\n  display: flex;\n  inset: 0px;\n  position: fixed;\n  z-index: modal;\n`\n\n/** Wraps the content provided to the Modal component. */\nexport const ModalContent = vui<'div', ModalContentProps>((props, ref) => {\n  const { className, ...rest } = props\n  const { onBackdropClick } = useModalContext() ?? {}\n  const styles = useStyleConfig('Modal', useModalContext())\n\n  return (\n    <ModalContentBase\n      className={cs('vui-modalContent', className)}\n      ref={ref}\n      tabIndex={-1}\n      {...styles.content}\n      {...rest}\n      onClick={callAll(props.onClick, onBackdropClick)}\n    />\n  )\n})\n\nModalContent.displayName = 'ModalContent'\n\nexport default ModalContent\n"],"mappings":";;;;;;;;;AAKA,MAAa,mBAAmB,OAAO,MAAM;;;;;;;AAQ7C,MAAa,eAAe,KAA+B,OAAO,QAAQ;CACxE,MAAM,EAAE,UAAW,GAAG,SAAS;CAC/B,MAAM,EAAE,oBAAoB,iBAAiB,IAAI,EAAE;CACnD,MAAM,SAAS,eAAe,SAAS,iBAAiB,CAAC;AAEzD,QACE,oBAAC;EACC,WAAW,GAAG,oBAAoB,UAAU;EACvC;EACL,UAAU;EACV,GAAI,OAAO;EACX,GAAI;EACJ,SAAS,QAAQ,MAAM,SAAS,gBAAgB;GAChD;EAEJ;AAEF,aAAa,cAAc;AAE3B,2BAAe"}
+{"version":3,"file":"modalContent.js","names":[],"sources":["../../src/modal/modalContent.tsx"],"sourcesContent":["import { styled, useStyleConfig, vui } from '../core'\nimport { callAll, cs } from '../utils'\nimport { useModalContext } from './context'\nimport type { ModalContentProps } from './modal.types'\n\nexport const ModalContentBase = styled.divBox`\n  display: flex;\n  inset: 0px;\n  position: fixed;\n  z-index: modal;\n`\n\n/** Wraps the content provided to the Modal component. */\nexport const ModalContent = vui<'div', ModalContentProps>((props, ref) => {\n  const { className, ...rest } = props\n  const { onBackdropClick } = useModalContext() ?? {}\n  const styles = useStyleConfig('Modal', useModalContext())\n\n  return (\n    <ModalContentBase\n      className={cs('vui-modalContent', className)}\n      ref={ref}\n      tabIndex={-1}\n      {...styles.content}\n      {...rest}\n      onClick={callAll(props.onClick, onBackdropClick)}\n    />\n  )\n})\n\nModalContent.displayName = 'ModalContent'\n\nexport default ModalContent\n"],"mappings":";;;;;;;;;;;AAKA,MAAa,mBAAmB,OAAO,MAAM;;;;;;;AAQ7C,MAAa,eAAe,KAA+B,OAAO,QAAQ;CACxE,MAAM,EAAE,WAAW,GAAG,SAAS;CAC/B,MAAM,EAAE,oBAAoB,iBAAiB,IAAI,EAAE;CACnD,MAAM,SAAS,eAAe,SAAS,iBAAiB,CAAC;AAEzD,QACE,oBAAC;EACC,WAAW,GAAG,oBAAoB,UAAU;EACvC;EACL,UAAU;EACV,GAAI,OAAO;EACX,GAAI;EACJ,SAAS,QAAQ,MAAM,SAAS,gBAAgB;GAChD;EAEJ;AAEF,aAAa,cAAc;AAE3B,2BAAe"}

package/dist/modal/modalManager.d.ts

@@ -13,4 +13,5 @@ declare const manager: ModalManager;
 declare function useModalManager(ref: Ref<any>, isOpen?: boolean, disableScrollLock?: boolean): void;
 //#endregion
 export { manager, useModalManager };
+
 //# sourceMappingURL=modalManager.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"modalManager.d.ts","names":[],"sources":["../../src/modal/modalManager.ts"],"sourcesContent":[],"mappings":";;;;cAMM,YAAA;EAAA,MAAA,CAAA,CAAA,GAAA,CAAA,CAAA;EAaO,GAAA,CAAA,CAAA,CAAA,KAA4B,CAAA,CAAA,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,MAArB;EAGJ,MAAA,CAAA,CAAA,CAAA,KAAA,CAAA,CAAA,GAAe,CAAA,CAAA,CAAA,CAAA,CAAA,GAAA,CAAA,CAAA;;;cAHlB,SAAO;;iBAGJ,eAAA,MAAqB"}
+{"version":3,"file":"modalManager.d.ts","names":[],"sources":["../../src/modal/modalManager.ts"],"sourcesContent":[],"mappings":";;;;cAMM,YAAA;EAAA,MAAA,EAAA,GAAA,EAAA;EAaO,GAAA,EAAA,CAAA,KAA4B,EAAA,GAAA,EAAA,GAAA,MAArB;EAGJ,MAAA,EAAA,CAAA,KAAA,EAAA,GAAe,EAAA,GAAA,GAAA,EAAA;;;cAHlB,SAAO;;iBAGJ,eAAA,MAAqB"}

package/dist/modal/modalManager.js

@@ -1,4 +1,5 @@
 import { useBodyScrollLock } from "../core/vuiProvider/useBodyScrollLock.js";
+import "../core/index.js";
 import { useEffect } from "react";
 
 //#region src/modal/modalManager.ts
@@ -29,5 +30,5 @@ function useModalManager(ref, isOpen, disableScrollLock) {
 
 //#endregion
 export { manager, useModalManager };
-globalThis.__vuiVersion__ = "3.1.2"
+globalThis.__vuiVersion__ = "4.0.0-beta.1"
 //# sourceMappingURL=modalManager.js.map

package/dist/modal/modalManager.js.map

@@ -1 +1 @@
-{"version":3,"file":"modalManager.js","names":[],"sources":["../../src/modal/modalManager.ts"],"sourcesContent":["import type { Ref } from 'react'\nimport { useEffect } from 'react'\n\nimport { useBodyScrollLock } from '../core'\n\n/** State management for nested modals. */\nclass ModalManager {\n  modals: any[] = []\n\n  add = (modal: any) => this.modals.push(modal)\n\n  remove = (modal: any) => (this.modals = this.modals.filter(m => m !== modal))\n\n  isTopModal = (modal: any) => {\n    const topmostModal = this.modals[this.modals.length - 1]\n    return topmostModal === modal\n  }\n}\n\nexport const manager = new ModalManager()\n\n/** Refs of new modals will be automatically added/removed from the state when rendering. */\nexport function useModalManager(ref: Ref<any>, isOpen?: boolean, disableScrollLock?: boolean) {\n  const { setIsScrollLocked } = useBodyScrollLock()\n  useEffect(() => {\n    if (isOpen) {\n      manager.add(ref)\n      if (!disableScrollLock) setIsScrollLocked(true)\n    }\n\n    return () => {\n      manager.remove(ref)\n      if (!disableScrollLock) setIsScrollLocked(false)\n    }\n  }, [isOpen, ref])\n}\n"],"mappings":";;;;;AAMA,IAAM,eAAN,MAAmB;CACjB,SAAgB,EAAE;CAElB,OAAO,UAAe,KAAK,OAAO,KAAK,MAAM;CAE7C,UAAU,UAAgB,KAAK,SAAS,KAAK,OAAO,QAAO,MAAK,MAAM,MAAM;CAE5E,cAAc,UAAe;AAE3B,SADqB,KAAK,OAAO,KAAK,OAAO,SAAS,OAC9B;;;AAI5B,MAAa,UAAU,IAAI,cAAc;;AAGzC,SAAgB,gBAAgB,KAAe,QAAkB,mBAA6B;CAC5F,MAAM,EAAE,sBAAsB,mBAAmB;AACjD,iBAAgB;AACd,MAAI,QAAQ;AACV,WAAQ,IAAI,IAAI;AAChB,OAAI,CAAC,kBAAmB,mBAAkB,KAAK;;AAGjD,eAAa;AACX,WAAQ,OAAO,IAAI;AACnB,OAAI,CAAC,kBAAmB,mBAAkB,MAAM;;IAEjD,CAAC,QAAQ,IAAI,CAAC"}
+{"version":3,"file":"modalManager.js","names":[],"sources":["../../src/modal/modalManager.ts"],"sourcesContent":["import type { Ref } from 'react'\nimport { useEffect } from 'react'\n\nimport { useBodyScrollLock } from '../core'\n\n/** State management for nested modals. */\nclass ModalManager {\n  modals: any[] = []\n\n  add = (modal: any) => this.modals.push(modal)\n\n  remove = (modal: any) => (this.modals = this.modals.filter(m => m !== modal))\n\n  isTopModal = (modal: any) => {\n    const topmostModal = this.modals[this.modals.length - 1]\n    return topmostModal === modal\n  }\n}\n\nexport const manager = new ModalManager()\n\n/** Refs of new modals will be automatically added/removed from the state when rendering. */\nexport function useModalManager(ref: Ref<any>, isOpen?: boolean, disableScrollLock?: boolean) {\n  const { setIsScrollLocked } = useBodyScrollLock()\n  useEffect(() => {\n    if (isOpen) {\n      manager.add(ref)\n      if (!disableScrollLock) setIsScrollLocked(true)\n    }\n\n    return () => {\n      manager.remove(ref)\n      if (!disableScrollLock) setIsScrollLocked(false)\n    }\n  }, [isOpen, ref])\n}\n"],"mappings":";;;;;;AAMA,IAAM,eAAN,MAAmB;CACjB,SAAgB,EAAE;CAElB,OAAO,UAAe,KAAK,OAAO,KAAK,MAAM;CAE7C,UAAU,UAAgB,KAAK,SAAS,KAAK,OAAO,QAAO,MAAK,MAAM,MAAM;CAE5E,cAAc,UAAe;AAE3B,SADqB,KAAK,OAAO,KAAK,OAAO,SAAS,OAC9B;;;AAI5B,MAAa,UAAU,IAAI,cAAc;;AAGzC,SAAgB,gBAAgB,KAAe,QAAkB,mBAA6B;CAC5F,MAAM,EAAE,sBAAsB,mBAAmB;AACjD,iBAAgB;AACd,MAAI,QAAQ;AACV,WAAQ,IAAI,IAAI;AAChB,OAAI,CAAC,kBAAmB,mBAAkB,KAAK;;AAGjD,eAAa;AACX,WAAQ,OAAO,IAAI;AACnB,OAAI,CAAC,kBAAmB,mBAAkB,MAAM;;IAEjD,CAAC,QAAQ,IAAI,CAAC"}

package/dist/modal/theme.js

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

package/dist/notification/consts.js

@@ -65,5 +65,5 @@ const closeButtonVariantMapping = {
 
 //#endregion
 export { bannerNotificationElevation, closeButtonVariantMapping, notificationStatusMapping };
-globalThis.__vuiVersion__ = "3.1.2"
+globalThis.__vuiVersion__ = "4.0.0-beta.1"
 //# sourceMappingURL=consts.js.map

package/dist/notification/context.d.ts

@@ -1,8 +1,9 @@
 import { NotificationProps } from "./notification.types.js";
-import * as react941 from "react";
+import * as react359 from "react";
 
 //#region src/notification/context.d.ts
-declare const NotificationProvider: react941.Provider<Partial<NotificationProps>>, useNotificationContext: () => Partial<NotificationProps>;
+declare const NotificationProvider: react359.Provider<Partial<NotificationProps>>, useNotificationContext: () => Partial<NotificationProps>;
 //#endregion
 export { NotificationProvider, useNotificationContext };
+
 //# sourceMappingURL=context.d.ts.map

package/dist/notification/context.js

@@ -1,9 +1,10 @@
 import { createContext } from "../utils/react.js";
+import "../utils/index.js";
 
 //#region src/notification/context.ts
 const [NotificationProvider, useNotificationContext] = createContext({ isOptional: true });
 
 //#endregion
 export { NotificationProvider, useNotificationContext };
-globalThis.__vuiVersion__ = "3.1.2"
+globalThis.__vuiVersion__ = "4.0.0-beta.1"
 //# sourceMappingURL=context.js.map

package/dist/notification/context.js.map

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../src/notification/context.ts"],"sourcesContent":["import { createContext } from '../utils'\nimport type { NotificationProps } from './notification.types'\n\nconst [NotificationProvider, useNotificationContext] = createContext<Partial<NotificationProps>>({ isOptional: true })\n\nexport { NotificationProvider, useNotificationContext }\n"],"mappings":";;;AAGA,MAAM,CAAC,sBAAsB,0BAA0B,cAA0C,EAAE,YAAY,MAAM,CAAC"}
+{"version":3,"file":"context.js","names":[],"sources":["../../src/notification/context.ts"],"sourcesContent":["import { createContext } from '../utils'\nimport type { NotificationProps } from './notification.types'\n\nconst [NotificationProvider, useNotificationContext] = createContext<Partial<NotificationProps>>({ isOptional: true })\n\nexport { NotificationProvider, useNotificationContext }\n"],"mappings":";;;;AAGA,MAAM,CAAC,sBAAsB,0BAA0B,cAA0C,EAAE,YAAY,MAAM,CAAC"}

package/dist/notification/index.d.ts

@@ -4,4 +4,4 @@ import { NotificationButton } from "./notificationButton.js";
 import { NotificationIcon } from "./notificationIcon.js";
 import { NotificationText } from "./notificationText.js";
 import { NotificationTitle } from "./notificationTitle.js";
-import { Notification } from "./notification.js";
+import { Notification } from "./notification.js";

package/dist/notification/index.js

@@ -0,0 +1,8 @@
+import { NotificationProvider, useNotificationContext } from "./context.js";
+import { NotificationButton } from "./notificationButton.js";
+import { NotificationIcon } from "./notificationIcon.js";
+import { NotificationText } from "./notificationText.js";
+import { NotificationTitle } from "./notificationTitle.js";
+import { Notification } from "./notification.js";
+
+globalThis.__vuiVersion__ = "4.0.0-beta.1"

package/dist/notification/notification.d.ts

@@ -1,10 +1,10 @@
+import { VuiComponent } from "../core/vui.js";
+import "../core/index.js";
 import { NotificationProps } from "./notification.types.js";
 import { NotificationButton } from "./notificationButton.js";
 import { NotificationIcon } from "./notificationIcon.js";
 import { NotificationText } from "./notificationText.js";
 import { NotificationTitle } from "./notificationTitle.js";
-import { VuiComponent } from "../core/vui.js";
-import "../core/index.js";
 
 //#region src/notification/notification.d.ts
 
@@ -20,4 +20,5 @@ declare const Notification: VuiComponent<"div", NotificationProps> & {
 };
 //#endregion
 export { Notification };
+
 //# sourceMappingURL=notification.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"notification.d.ts","names":[],"sources":["../../src/notification/notification.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;;;;;AAgBA,CAAA,CAAA;AAgE0B,OAAA,CAAA,KAAA,CAhEb,YAgEa,CAAA,CAApB,YAAoB,CAAA,CAAA,GAAA,CAAA,CAAA,CAAA,iBAAA,CAAA,CAAA,CAAA,CAAA;EAApB,MAAA,CAAA,CAAA,MAAA,CACW,kBADX;EACW,IAAA,CAAA,CAAA,MAAA,CACF,gBADE;EACF,IAAA,CAAA,CAAA,MAAA,CACA,gBADA;EACA,KAAA,CAAA,CAAA,MAAA,CACC,iBADD;CACC"}
+{"version":3,"file":"notification.d.ts","names":[],"sources":["../../src/notification/notification.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;;;;;AAgBA;AAgE0B,cAhEb,YAgEa,EAApB,YAAoB,CAAA,KAAA,EAAA,iBAAA,CAAA,GAAA;EAApB,MAAA,EAAA,OACW,kBADX;EACW,IAAA,EAAA,OACF,gBADE;EACF,IAAA,EAAA,OACA,gBADA;EACA,KAAA,EAAA,OACC,iBADD;CACC"}

package/dist/notification/notification.js

@@ -1,15 +1,18 @@
 import { isReactText, isString } from "../utils/assertion.js";
 import { filterUndefined } from "../utils/object.js";
 import { cs } from "../utils/styles.js";
+import "../utils/index.js";
 import { useStyleConfig } from "../core/theme.js";
 import { vui } from "../core/vui.js";
 import box_default from "../box/box.js";
+import "../box/index.js";
 import { NotificationProvider } from "./context.js";
 import { bannerNotificationElevation, closeButtonVariantMapping, notificationStatusMapping } from "./consts.js";
 import notificationButton_default from "./notificationButton.js";
 import notificationIcon_default from "./notificationIcon.js";
 import notificationText_default from "./notificationText.js";
 import notificationTitle_default from "./notificationTitle.js";
+import "../core/index.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/notification/notification.tsx
@@ -18,7 +21,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * Handles multiple states, like info, error or loading.
 */
 const Notification = vui((props, ref) => {
-	const { action, children, className, icon, onClose, size, status, statusMapping, text, title, variant: variantProp = "subtleBlue", verticalAlign,...rest } = props;
+	const { action, children, className, icon, onClose, size, status, statusMapping, text, title, variant: variantProp = "subtleBlue", verticalAlign, ...rest } = props;
 	const statuses = {
 		...notificationStatusMapping,
 		...statusMapping
@@ -84,5 +87,5 @@ Notification.displayName = "Notification";
 
 //#endregion
 export { Notification };
-globalThis.__vuiVersion__ = "3.1.2"
+globalThis.__vuiVersion__ = "4.0.0-beta.1"
 //# sourceMappingURL=notification.js.map

package/dist/notification/notification.js.map

@@ -1 +1 @@
-{"version":3,"file":"notification.js","names":["Box","NotificationIcon","NotificationText","NotificationTitle","NotificationButton"],"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,cACA,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,qBAACA;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,oBAACC;KAA4B;KAAW,MAAM;MAAY,GAAG;IAExE,YACC,qBAACC;KAA4B;;MAC1B,YAAY,MAAM,GAAG,oBAACC;OAAkB,SAAS;OAAc,MAAM;QAAS,GAAG;MAAM;MAAE;;MACzE;IAGpB;IAEA,WACC,oBAACC;KACY;KACX,cAAW;KACX,MAAK;KACL,SAAS;KACT,SAAS,4BAA4B,YAAY;KACjD,GAAE;MACF;;IAEA;GACe;EAEzB;AAOF,aAAa,SAASA;AACtB,aAAa,OAAOH;AACpB,aAAa,OAAOC;AACpB,aAAa,QAAQC;AACrB,aAAa,cAAc"}
+{"version":3,"file":"notification.js","names":["Box","NotificationIcon","NotificationText","NotificationTitle","NotificationButton"],"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,qBAACA;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,oBAACC;KAA4B;KAAW,MAAM;MAAY,GAAG;IAExE,YACC,qBAACC;KAA4B;;MAC1B,YAAY,MAAM,GAAG,oBAACC;OAAkB,SAAS;OAAc,MAAM;QAAS,GAAG;MAAM;MAAE;;MACzE;IAGpB;IAEA,WACC,oBAACC;KACY;KACX,cAAW;KACX,MAAK;KACL,SAAS;KACT,SAAS,4BAA4B,YAAY;KACjD,GAAE;MACF;;IAEA;GACe;EAEzB;AAOF,aAAa,SAASA;AACtB,aAAa,OAAOH;AACpB,aAAa,OAAOC;AACpB,aAAa,QAAQC;AACrB,aAAa,cAAc"}

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

@@ -1,9 +1,9 @@
 import { ThemingProps } from "../theme/types.js";
-import { BoxProps } from "../box/box.types.js";
-import "../box/index.js";
 import { IconProp, IconProps } from "../icon/icon.types.js";
 import "../icon/index.js";
-import { ReactNode } from "react";
+import { BoxProps } from "../box/box.types.js";
+import "../box/index.js";
+import { JSX, ReactNode } from "react";
 
 //#region src/notification/notification.types.d.ts
 type NotificationProps = Omit<BoxProps, 'size' | 'variant'> & ThemingProps<'Notification'> & {
@@ -32,4 +32,5 @@ type NotificationStatusMapping = Record<string, {
 }>;
 //#endregion
 export { NotificationProps, NotificationStatus, NotificationStatusMapping, NotificationVariant };
+
 //# sourceMappingURL=notification.types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"notification.types.d.ts","names":[],"sources":["../../src/notification/notification.types.ts"],"sourcesContent":[],"mappings":";;;;;;;;KAMY,iBAAA,CAAA,CAAA,CAAoB,KAAK,gCACnC;;WAEW;;EAHD,WAAA,CAAA,CAAA,CAAA,CAAA,IAAA,CAAiB,CAAA,CAAA,CAAA,CAAA,KAAA,CAAA,CAAA,CAAA,CAAA,CAAA,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,MAAA,CAAA;EAAQ,CAAA,CAAA,CAAA,CAAA,MAAA,CAAA,UAAA,CAAA,EAAA,CAAA,IAAA,CAAA,EAAA,CAAA,GAAA,CAAA,IAAA,CAAA,CAAA,CAAA;EAAL,IAAA,CAAA,CAAA,CAOrB,QAPqB,CAAA,CAAA,CAOV,GAAA,CAAI,OAPM;EAC9B,CAAA,CAAA,CAAA,CAAA,IAAA,CAAA,QAAA,CAAA,CAAA,QAAA,CAAA,CAAA,CAAA,KAAA,CAAA,MAAA,CAAA,IAAA,CAAA,IAAA,CAAA,QAAA,CAAA,EAAA,CAAA,GAAA,CAAA,QAAA,CAAA,CAAA,CAAA;EAEW,OAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,IAAA;EAIF,CAAA,CAAA,CAAA,CAAA,QAAA,CAAA,YAAA,CAAA,KAAA,CAAA,GAAA,CAAA,OAAA,CAAA,KAAA,CAAA,EAAA,CAAA,GAAA,CAAA,KAAA,CAAA,MAAA,CAAA,CAAA,CAAA;EAAW,MAAI,CAAA,CAAA,CAIb,kBAJa;EAIb,CAAA,CAAA,CAAA,CAAA,MAAA,CAAA,UAAA,CAAA,EAAA,CAAA,MAAA,CAAA,GAAA,CAAA,OAAA,CAAA,GAAA,CAAA,IAAA,CAAA,MAAA,CAAA,CAAA,CAAA;EAEO,aAAA,CAAA,CAAA,CAAA,yBAAA;EAET,CAAA,CAAA,CAAA,CAAA,MAAA,CAAA,UAAA,CAAA,IAAA,CAAA,EAAA,CAAA,GAAA,CAAA,MAAA,CAAA,CAAA,CAAA;EAEC,IAAA,CAAA,CAAA,CAFD,SAEC;EAAS,CAAA,CAAA,CAAA,CAAA,MAAA,CAAA,UAAA,CAAA,KAAA,CAAA,EAAA,CAAA,GAAA,CAAA,MAAA,CAAA,CAAA,CAAA;EAGT,KAAA,CAAA,CAAA,CAHA,SAGA;AAYZ,CAAA;AAUY,IAAA,CAtBA,kBAAA,CAAA,CAAA,CAsByB,CAAA,KAAA,CAAA,CAAA,CAAA,CAAA,CAAA,IAAA,CAAA,CAAA,CAAA,CAAA,CAAA,OAAA,CAAA,CAAA,CAAA,CAAA,CAAA,OAAA,CAAA,CAAA,CAAA,CAAA,CAAA,OAAA,CAAA,CAAA,CAAA,CAAA,CAAA,WAAA,CAAA,CAAA,CAAA,CAAA,CAAA,UAAA,CAAA,CAAA,CAAA,CAAA,CAAA,aAAA,CAAA,CAAA,CAAA,CAAA,CAAA,aAAA,CAAA,CAAA,CAAA,CAAA,CAAA,aAAA,CAAA;AAGtB,IAAA,CAbH,mBAAA,CAAA,CAAA,CAaG,CAAA,UAAA,CAAA,CAAA,CAAA,CAAA,CAAA,SAAA,CAAA,CAAA,CAAA,CAAA,CAAA,YAAA,CAAA,CAAA,CAAA,CAAA,CAAA,WAAA,CAAA,CAAA,CAAA,CAAA,CAAA,UAAA,CAAA,CAAA,CAAA,CAAA,CAAA,SAAA,CAAA,CAAA,CAAA,CAAA,CAAA,YAAA,CAAA,CAAA,CAAA,CAAA,CAAA,WAAA,CAAA;AACD,IAAA,CAJF,yBAAA,CAAA,CAAA,CAA4B,MAI1B,CAAA,MAAA,CAAA,CAAA;EAJ0B,SAAA,CAAA,CAGzB,SAHyB;EAAM,OAAA,CAAA,CAAA,CAIhC,iBAJgC,CAAA,CAAA,OAAA,CAAA,CAAA"}
+{"version":3,"file":"notification.types.d.ts","names":[],"sources":["../../src/notification/notification.types.ts"],"sourcesContent":[],"mappings":";;;;;;;;KAMY,iBAAA,GAAoB,KAAK,gCACnC;;WAEW;;EAHD,WAAA,CAAA,EAAA,MAAiB,GAAA,OAAA,GAAA,KAAA,GAAA,QAAA;EAAQ;EAAL,IAAA,CAAA,EAOrB,QAPqB,GAOV,GAAA,CAAI,OAPM;EAC9B;EAEW,OAAA,CAAA,EAAA,GAAA,GAAA,IAAA;EAIF;EAAW,MAAI,CAAA,EAIb,kBAJa;EAIb;EAEO,aAAA,CAAA,EAAA,yBAAA;EAET;EAEC,IAAA,CAAA,EAFD,SAEC;EAAS;EAGT,KAAA,CAAA,EAHA,SAGA;AAYZ,CAAA;AAUY,KAtBA,kBAAA,GAsByB,OAAA,GAAA,MAAA,GAAA,SAAA,GAAA,SAAA,GAAA,SAAA,GAAA,aAAA,GAAA,YAAA,GAAA,eAAA,GAAA,eAAA,GAAA,eAAA;AAGtB,KAbH,mBAAA,GAaG,YAAA,GAAA,WAAA,GAAA,cAAA,GAAA,aAAA,GAAA,YAAA,GAAA,WAAA,GAAA,cAAA,GAAA,aAAA;AACD,KAJF,yBAAA,GAA4B,MAI1B,CAAA,MAAA,EAAA;EAJ0B,SAAA,EAGzB,SAHyB;EAAM,OAAA,CAAA,EAIhC,iBAJgC,CAAA,SAAA,CAAA"}

package/dist/notification/notificationButton.d.ts

@@ -1,6 +1,6 @@
+import { VuiComponent } from "../core/vui.js";
 import { ButtonProps } from "../button/button.types.js";
 import "../button/index.js";
-import { VuiComponent } from "../core/vui.js";
 import "../index.js";
 
 //#region src/notification/notificationButton.d.ts
@@ -8,4 +8,5 @@ import "../index.js";
 declare const NotificationButton: VuiComponent<"button", ButtonProps>;
 //#endregion
 export { NotificationButton };
+
 //# sourceMappingURL=notificationButton.d.ts.map

package/dist/notification/notificationButton.js

@@ -1,15 +1,18 @@
 import { cs } from "../utils/styles.js";
+import "../utils/index.js";
 import { useStyleConfig } from "../core/theme.js";
 import { vui } from "../core/vui.js";
 import { useNotificationContext } from "./context.js";
 import { notificationStatusMapping } from "./consts.js";
 import button_default from "../button/button.js";
+import "../button/index.js";
+import "../core/index.js";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/notification/notificationButton.tsx
 /** Displays an action button within the Notification. */
 const NotificationButton = vui((props, ref) => {
-	const { className,...rest } = props;
+	const { className, ...rest } = props;
 	const mergedProps = {
 		...useNotificationContext(),
 		...props
@@ -36,5 +39,5 @@ var notificationButton_default = NotificationButton;
 
 //#endregion
 export { NotificationButton, notificationButton_default as default };
-globalThis.__vuiVersion__ = "3.1.2"
+globalThis.__vuiVersion__ = "4.0.0-beta.1"
 //# sourceMappingURL=notificationButton.js.map

package/dist/notification/notificationButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"notificationButton.js","names":["Button"],"sources":["../../src/notification/notificationButton.tsx"],"sourcesContent":["import type { ButtonProps } from '../button'\nimport Button from '../button'\nimport { useStyleConfig, vui } from '../core'\nimport { cs } from '../utils'\nimport { notificationStatusMapping } from './consts'\nimport { useNotificationContext } from './context'\n\n/** Displays an action button within the Notification. */\nexport const NotificationButton = vui<'button', ButtonProps>((props, ref) => {\n  const { className, ...rest } = props\n  const mergedProps = { ...useNotificationContext(), ...props }\n  const styles = useStyleConfig('Notification', useNotificationContext())\n\n  const { status = '' } = mergedProps\n  const { variant } = notificationStatusMapping[status] ?? {}\n\n  return (\n    <Button\n      className={cs('vui-notificationButton', className)}\n      ml=\"0px\"\n      mr=\"16px\"\n      my=\"16px\"\n      px=\"12px\"\n      py=\"6px\"\n      ref={ref}\n      size=\"md\"\n      {...styles.button}\n      variant={variant}\n      {...rest}\n    />\n  )\n})\n\nNotificationButton.displayName = 'NotificationButton'\nexport default NotificationButton\n"],"mappings":";;;;;;;;;;AAQA,MAAa,qBAAqB,KAA4B,OAAO,QAAQ;CAC3E,MAAM,EAAE,UAAW,GAAG,SAAS;CAC/B,MAAM,cAAc;EAAE,GAAG,wBAAwB;EAAE,GAAG;EAAO;CAC7D,MAAM,SAAS,eAAe,gBAAgB,wBAAwB,CAAC;CAEvE,MAAM,EAAE,SAAS,OAAO;CACxB,MAAM,EAAE,YAAY,0BAA0B,WAAW,EAAE;AAE3D,QACE,oBAACA;EACC,WAAW,GAAG,0BAA0B,UAAU;EAClD,IAAG;EACH,IAAG;EACH,IAAG;EACH,IAAG;EACH,IAAG;EACE;EACL,MAAK;EACL,GAAI,OAAO;EACF;EACT,GAAI;GACJ;EAEJ;AAEF,mBAAmB,cAAc;AACjC,iCAAe"}
+{"version":3,"file":"notificationButton.js","names":["Button"],"sources":["../../src/notification/notificationButton.tsx"],"sourcesContent":["import type { ButtonProps } from '../button'\nimport Button from '../button'\nimport { useStyleConfig, vui } from '../core'\nimport { cs } from '../utils'\nimport { notificationStatusMapping } from './consts'\nimport { useNotificationContext } from './context'\n\n/** Displays an action button within the Notification. */\nexport const NotificationButton = vui<'button', ButtonProps>((props, ref) => {\n  const { className, ...rest } = props\n  const mergedProps = { ...useNotificationContext(), ...props }\n  const styles = useStyleConfig('Notification', useNotificationContext())\n\n  const { status = '' } = mergedProps\n  const { variant } = notificationStatusMapping[status] ?? {}\n\n  return (\n    <Button\n      className={cs('vui-notificationButton', className)}\n      ml=\"0px\"\n      mr=\"16px\"\n      my=\"16px\"\n      px=\"12px\"\n      py=\"6px\"\n      ref={ref}\n      size=\"md\"\n      {...styles.button}\n      variant={variant}\n      {...rest}\n    />\n  )\n})\n\nNotificationButton.displayName = 'NotificationButton'\nexport default NotificationButton\n"],"mappings":";;;;;;;;;;;;;AAQA,MAAa,qBAAqB,KAA4B,OAAO,QAAQ;CAC3E,MAAM,EAAE,WAAW,GAAG,SAAS;CAC/B,MAAM,cAAc;EAAE,GAAG,wBAAwB;EAAE,GAAG;EAAO;CAC7D,MAAM,SAAS,eAAe,gBAAgB,wBAAwB,CAAC;CAEvE,MAAM,EAAE,SAAS,OAAO;CACxB,MAAM,EAAE,YAAY,0BAA0B,WAAW,EAAE;AAE3D,QACE,oBAACA;EACC,WAAW,GAAG,0BAA0B,UAAU;EAClD,IAAG;EACH,IAAG;EACH,IAAG;EACH,IAAG;EACH,IAAG;EACE;EACL,MAAK;EACL,GAAI,OAAO;EACF;EACT,GAAI;GACJ;EAEJ;AAEF,mBAAmB,cAAc;AACjC,iCAAe"}

package/dist/notification/notificationIcon.d.ts

@@ -1,6 +1,6 @@
+import { VuiComponent } from "../core/vui.js";
 import { IconProps } from "../icon/icon.types.js";
 import "../icon/index.js";
-import { VuiComponent } from "../core/vui.js";
 import "../index.js";
 
 //#region src/notification/notificationIcon.d.ts
@@ -8,4 +8,5 @@ import "../index.js";
 declare const NotificationIcon: VuiComponent<"svg", IconProps>;
 //#endregion
 export { NotificationIcon };
+
 //# sourceMappingURL=notificationIcon.d.ts.map

package/dist/notification/notificationIcon.js

@@ -1,15 +1,18 @@
 import { cs } from "../utils/styles.js";
+import "../utils/index.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_default from "../icon/icon.js";
+import "../icon/index.js";
+import "../core/index.js";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/notification/notificationIcon.tsx
 /** Displays an icon based on the status within the Notification. */
 const NotificationIcon = vui((props, ref) => {
-	const { className, alignSelf,...rest } = props;
+	const { className, alignSelf, ...rest } = props;
 	const mergedProps = {
 		...useNotificationContext(),
 		...props
@@ -36,5 +39,5 @@ var notificationIcon_default = NotificationIcon;
 
 //#endregion
 export { NotificationIcon, notificationIcon_default as default };
-globalThis.__vuiVersion__ = "3.1.2"
+globalThis.__vuiVersion__ = "4.0.0-beta.1"
 //# sourceMappingURL=notificationIcon.js.map

package/dist/notification/notificationIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"notificationIcon.js","names":["Icon"],"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,UAAW,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,oBAACA;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;AAE/B,+BAAe"}
+{"version":3,"file":"notificationIcon.js","names":["Icon"],"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,oBAACA;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;AAE/B,+BAAe"}

package/dist/notification/notificationText.d.ts

@@ -1,6 +1,6 @@
+import { VuiComponent } from "../core/vui.js";
 import { TProps } from "../t/t.types.js";
 import "../t/index.js";
-import { VuiComponent } from "../core/vui.js";
 import "../index.js";
 
 //#region src/notification/notificationText.d.ts
@@ -8,4 +8,5 @@ import "../index.js";
 declare const NotificationText: VuiComponent<"p", TProps>;
 //#endregion
 export { NotificationText };
+
 //# sourceMappingURL=notificationText.d.ts.map

package/dist/notification/notificationText.js

@@ -1,14 +1,17 @@
 import { cs } from "../utils/styles.js";
+import "../utils/index.js";
 import { useStyleConfig } from "../core/theme.js";
 import { vui } from "../core/vui.js";
 import { useNotificationContext } from "./context.js";
 import t_default from "../t/t.js";
+import "../t/index.js";
+import "../core/index.js";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/notification/notificationText.tsx
 /** Displays text within the Notification. */
 const NotificationText = vui((props, ref) => {
-	const { className,...rest } = props;
+	const { className, ...rest } = props;
 	const styles = useStyleConfig("Notification", useNotificationContext());
 	return /* @__PURE__ */ jsx(t_default, {
 		className: cs("vui-notificationText", className),
@@ -27,5 +30,5 @@ var notificationText_default = NotificationText;
 
 //#endregion
 export { NotificationText, notificationText_default as default };
-globalThis.__vuiVersion__ = "3.1.2"
+globalThis.__vuiVersion__ = "4.0.0-beta.1"
 //# sourceMappingURL=notificationText.js.map

package/dist/notification/notificationText.js.map

@@ -1 +1 @@
-{"version":3,"file":"notificationText.js","names":["T"],"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,UAAW,GAAG,SAAS;CAC/B,MAAM,SAAS,eAAe,gBAAgB,wBAAwB,CAAC;AAEvE,QACE,oBAACA;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;AAC/B,+BAAe"}
+{"version":3,"file":"notificationText.js","names":["T"],"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,oBAACA;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;AAC/B,+BAAe"}

package/dist/notification/notificationTitle.d.ts

@@ -1,6 +1,6 @@
+import { VuiComponent } from "../core/vui.js";
 import { TProps } from "../t/t.types.js";
 import "../t/index.js";
-import { VuiComponent } from "../core/vui.js";
 import "../index.js";
 
 //#region src/notification/notificationTitle.d.ts
@@ -8,4 +8,5 @@ import "../index.js";
 declare const NotificationTitle: VuiComponent<"span", TProps>;
 //#endregion
 export { NotificationTitle };
+
 //# sourceMappingURL=notificationTitle.d.ts.map

package/dist/notification/notificationTitle.js

@@ -1,14 +1,17 @@
 import { cs } from "../utils/styles.js";
+import "../utils/index.js";
 import { useStyleConfig } from "../core/theme.js";
 import { vui } from "../core/vui.js";
 import { useNotificationContext } from "./context.js";
 import { T } from "../t/t.js";
+import "../t/index.js";
+import "../core/index.js";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/notification/notificationTitle.tsx
 /** Displays a title within the Notification. */
 const NotificationTitle = vui((props, ref) => {
-	const { className,...rest } = props;
+	const { className, ...rest } = props;
 	const styles = useStyleConfig("Notification", useNotificationContext());
 	return /* @__PURE__ */ jsx(T, {
 		className: cs("vui-notificationTitle", className),
@@ -23,5 +26,5 @@ var notificationTitle_default = NotificationTitle;
 
 //#endregion
 export { NotificationTitle, notificationTitle_default as default };
-globalThis.__vuiVersion__ = "3.1.2"
+globalThis.__vuiVersion__ = "4.0.0-beta.1"
 //# sourceMappingURL=notificationTitle.js.map

package/dist/notification/notificationTitle.js.map

@@ -1 +1 @@
-{"version":3,"file":"notificationTitle.js","names":[],"sources":["../../src/notification/notificationTitle.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 a title within the Notification. */\nexport const NotificationTitle = vui<'span', TProps>((props, ref) => {\n  const { className, ...rest } = props\n  const styles = useStyleConfig('Notification', useNotificationContext())\n\n  return (\n    <T className={cs('vui-notificationTitle', className)} fontWeight=\"demi\" ref={ref} {...styles.title} {...rest} />\n  )\n})\n\nNotificationTitle.displayName = 'NotificationTitle'\nexport default NotificationTitle\n"],"mappings":";;;;;;;;;AAOA,MAAa,oBAAoB,KAAqB,OAAO,QAAQ;CACnE,MAAM,EAAE,UAAW,GAAG,SAAS;CAC/B,MAAM,SAAS,eAAe,gBAAgB,wBAAwB,CAAC;AAEvE,QACE,oBAAC;EAAE,WAAW,GAAG,yBAAyB,UAAU;EAAE,YAAW;EAAY;EAAK,GAAI,OAAO;EAAO,GAAI;GAAQ;EAElH;AAEF,kBAAkB,cAAc;AAChC,gCAAe"}
+{"version":3,"file":"notificationTitle.js","names":[],"sources":["../../src/notification/notificationTitle.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 a title within the Notification. */\nexport const NotificationTitle = vui<'span', TProps>((props, ref) => {\n  const { className, ...rest } = props\n  const styles = useStyleConfig('Notification', useNotificationContext())\n\n  return (\n    <T className={cs('vui-notificationTitle', className)} fontWeight=\"demi\" ref={ref} {...styles.title} {...rest} />\n  )\n})\n\nNotificationTitle.displayName = 'NotificationTitle'\nexport default NotificationTitle\n"],"mappings":";;;;;;;;;;;;AAOA,MAAa,oBAAoB,KAAqB,OAAO,QAAQ;CACnE,MAAM,EAAE,WAAW,GAAG,SAAS;CAC/B,MAAM,SAAS,eAAe,gBAAgB,wBAAwB,CAAC;AAEvE,QACE,oBAAC;EAAE,WAAW,GAAG,yBAAyB,UAAU;EAAE,YAAW;EAAY;EAAK,GAAI,OAAO;EAAO,GAAI;GAAQ;EAElH;AAEF,kBAAkB,cAAc;AAChC,gCAAe"}

package/dist/notification/theme.js

@@ -67,5 +67,5 @@ var theme_default = {
 
 //#endregion
 export { theme_default as default };
-globalThis.__vuiVersion__ = "3.1.2"
+globalThis.__vuiVersion__ = "4.0.0-beta.1"
 //# sourceMappingURL=theme.js.map

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

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

package/dist/p/index.d.ts

@@ -1,2 +1,2 @@
 import { PProps } from "./p.types.js";
-import { P, PBase } from "./p.js";
+import { P, PBase } from "./p.js";

package/dist/p/index.js

@@ -0,0 +1,3 @@
+import p_default, { P, PBase } from "./p.js";
+
+globalThis.__vuiVersion__ = "4.0.0-beta.1"

package/dist/p/p.d.ts

@@ -2,12 +2,13 @@ import { SystemProps } from "../system/system.js";
 import { VuiComponent } from "../core/vui.js";
 import { PProps } from "./p.types.js";
 import "../index.js";
-import * as styled_components400 from "styled-components";
+import * as styled_components405 from "styled-components";
 
 //#region src/p/p.d.ts
-declare const PBase: styled_components400.StyledComponent<"p", styled_components400.DefaultTheme, SystemProps, never>;
+declare const PBase: styled_components405.StyledComponent<"p", styled_components405.DefaultTheme, SystemProps, never>;
 /** Displays a paragraph of text. */
 declare const P: VuiComponent<"p", PProps>;
 //#endregion
 export { P, PBase };
+
 //# sourceMappingURL=p.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"p.d.ts","names":[],"sources":["../../src/p/p.tsx"],"sourcesContent":[],"mappings":";;;;;;;cAIa,OAAK,oBAAA,CAAA,qBAMjB,oBAAA,CANiB,YAAA,CAAA,CAAA,WAAA,CAAA;;cASL,GAAC,kBAAA"}
+{"version":3,"file":"p.d.ts","names":[],"sources":["../../src/p/p.tsx"],"sourcesContent":[],"mappings":";;;;;;;cAIa,OAAK,oBAAA,CAAA,qBAMjB,oBAAA,CANiB,YAAA,EAAA,WAAA;;cASL,GAAC,kBAAA"}

package/dist/p/p.js

@@ -1,8 +1,10 @@
 import { filterUndefined } from "../utils/object.js";
 import { cs } from "../utils/styles.js";
+import "../utils/index.js";
 import { omitThemingProps, useStyleConfig } from "../core/theme.js";
 import { styled } from "../core/styled.js";
 import { vui } from "../core/vui.js";
+import "../core/index.js";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/p/p.tsx
@@ -15,7 +17,7 @@ const PBase = styled.pBox`
 `;
 /** Displays a paragraph of text. */
 const P = vui((props, ref) => {
-	const { align, casing, children, className, decoration, text, weight,...rest } = omitThemingProps(props);
+	const { align, casing, children, className, decoration, text, weight, ...rest } = omitThemingProps(props);
 	const styles = useStyleConfig("P", props);
 	const aliasedProps = filterUndefined({
 		fontWeight: weight,
@@ -37,5 +39,5 @@ var p_default = P;
 
 //#endregion
 export { P, PBase, p_default as default };
-globalThis.__vuiVersion__ = "3.1.2"
+globalThis.__vuiVersion__ = "4.0.0-beta.1"
 //# sourceMappingURL=p.js.map

package/dist/p/p.js.map

@@ -1 +1 @@
-{"version":3,"file":"p.js","names":[],"sources":["../../src/p/p.tsx"],"sourcesContent":["import { omitThemingProps, styled, useStyleConfig, vui } from '../core'\nimport { cs, filterUndefined } from '../utils'\nimport type { PProps } from './p.types'\n\nexport const PBase = styled.pBox`\n  transition-duration: fast;\n\n  .vui-link {\n    line-height: inherit;\n  }\n`\n\n/** Displays a paragraph of text. */\nexport const P = vui<'p', PProps>((props, ref) => {\n  const { align, casing, children, className, decoration, text, weight, ...rest } = omitThemingProps(props)\n  const styles = useStyleConfig('P', props)\n\n  const aliasedProps = filterUndefined({\n    fontWeight: weight,\n    textAlign: align,\n    textDecoration: decoration,\n    textTransform: casing,\n  })\n\n  return (\n    <PBase className={cs('vui-p', className)} ref={ref} {...styles} {...aliasedProps} {...rest}>\n      {children ?? text}\n    </PBase>\n  )\n})\n\nP.displayName = 'P'\nexport default P\n"],"mappings":";;;;;;;;AAIA,MAAa,QAAQ,OAAO,IAAI;;;;;;;;AAShC,MAAa,IAAI,KAAkB,OAAO,QAAQ;CAChD,MAAM,EAAE,OAAO,QAAQ,UAAU,WAAW,YAAY,MAAM,OAAQ,GAAG,SAAS,iBAAiB,MAAM;CACzG,MAAM,SAAS,eAAe,KAAK,MAAM;CAEzC,MAAM,eAAe,gBAAgB;EACnC,YAAY;EACZ,WAAW;EACX,gBAAgB;EAChB,eAAe;EAChB,CAAC;AAEF,QACE,oBAAC;EAAM,WAAW,GAAG,SAAS,UAAU;EAAO;EAAK,GAAI;EAAQ,GAAI;EAAc,GAAI;YACnF,YAAY;GACP;EAEV;AAEF,EAAE,cAAc;AAChB,gBAAe"}
+{"version":3,"file":"p.js","names":[],"sources":["../../src/p/p.tsx"],"sourcesContent":["import { omitThemingProps, styled, useStyleConfig, vui } from '../core'\nimport { cs, filterUndefined } from '../utils'\nimport type { PProps } from './p.types'\n\nexport const PBase = styled.pBox`\n  transition-duration: fast;\n\n  .vui-link {\n    line-height: inherit;\n  }\n`\n\n/** Displays a paragraph of text. */\nexport const P = vui<'p', PProps>((props, ref) => {\n  const { align, casing, children, className, decoration, text, weight, ...rest } = omitThemingProps(props)\n  const styles = useStyleConfig('P', props)\n\n  const aliasedProps = filterUndefined({\n    fontWeight: weight,\n    textAlign: align,\n    textDecoration: decoration,\n    textTransform: casing,\n  })\n\n  return (\n    <PBase className={cs('vui-p', className)} ref={ref} {...styles} {...aliasedProps} {...rest}>\n      {children ?? text}\n    </PBase>\n  )\n})\n\nP.displayName = 'P'\nexport default P\n"],"mappings":";;;;;;;;;;AAIA,MAAa,QAAQ,OAAO,IAAI;;;;;;;;AAShC,MAAa,IAAI,KAAkB,OAAO,QAAQ;CAChD,MAAM,EAAE,OAAO,QAAQ,UAAU,WAAW,YAAY,MAAM,QAAQ,GAAG,SAAS,iBAAiB,MAAM;CACzG,MAAM,SAAS,eAAe,KAAK,MAAM;CAEzC,MAAM,eAAe,gBAAgB;EACnC,YAAY;EACZ,WAAW;EACX,gBAAgB;EAChB,eAAe;EAChB,CAAC;AAEF,QACE,oBAAC;EAAM,WAAW,GAAG,SAAS,UAAU;EAAO;EAAK,GAAI;EAAQ,GAAI;EAAc,GAAI;YACnF,YAAY;GACP;EAEV;AAEF,EAAE,cAAc;AAChB,gBAAe"}

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

@@ -18,4 +18,5 @@ type PProps = SystemProps & ThemingProps<'P'> & {
 };
 //#endregion
 export { PProps };
+
 //# sourceMappingURL=p.types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"p.types.d.ts","names":[],"sources":["../../src/p/p.types.ts"],"sourcesContent":[],"mappings":";;;;;;KAGY,MAAA,CAAA,CAAA,CAAS,cACnB;;UAEU;;EAHA,MAAA,CAAA,CAAA,CAKC,eALK,CAAA,CAAA,aAAA,CAAA,CAAA;EAAG,CAAA,CAAA,CAAA,CAAA,KAAA,CAAA,GAAA,CAAA,cAAA,CAAA,IAAA,CAAA,CAAA,CAAA,UAAA,CAAA,CAAA;EACnB,UAAA,CAAA,CAAA,CAMe,eANf,CAAA,CAAA,cAAA,CAAA,CAAA;EAEU,CAAA,CAAA,CAAA,CAAA,QAAA,CAAA,KAAA,CAAA,IAAA,CAAA,EAAA,CAAA,EAAA,CAAA,QAAA,CAAA,GAAA,CAAA,QAAA,CAAA,CAAA,CAAA;EAEC,IAAA,CAAA,CAAA,CAAA,MAAA,CAAA,CAAA,CAAA,MAAA;EAEI,CAAA,CAAA,CAAA,CAAA,KAAA,CAAA,GAAA,CAAA,UAAA,CAAA,IAAA,CAAA,CAAA,CAAA,UAAA,CAAA,CAAA;EAIJ,MAAA,CAAA,CAAA,CAAA,eAAA,CAAA,CAAA,UAAA,CAAA,CAAA;CAAe"}
+{"version":3,"file":"p.types.d.ts","names":[],"sources":["../../src/p/p.types.ts"],"sourcesContent":[],"mappings":";;;;;;KAGY,MAAA,GAAS,cACnB;;UAEU;;EAHA,MAAA,CAAA,EAKC,eALK,CAAA,eAAA,CAAA;EAAG;EACnB,UAAA,CAAA,EAMe,eANf,CAAA,gBAAA,CAAA;EAEU;EAEC,IAAA,CAAA,EAAA,MAAA,GAAA,MAAA;EAEI;EAIJ,MAAA,CAAA,EAAA,eAAA,CAAA,YAAA,CAAA;CAAe"}