@veracity/vui 1.2.0-beta.1 → 1.2.0-beta.2

package/dist/cjs/core/vuiProvider/context.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+declare const VuiContextProvider: import("react").Provider<any>, useVuiContext: () => any;
+export { VuiContextProvider, useVuiContext };
+//# sourceMappingURL=context.d.ts.map

package/dist/cjs/core/vuiProvider/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../../src/core/vuiProvider/context.ts"],"names":[],"mappings":";AAEA,QAAA,MAAO,kBAAkB,iCAAE,aAAa,WAA4C,CAAA;AAEpF,OAAO,EAAE,kBAAkB,EAAE,aAAa,EAAE,CAAA"}

package/dist/cjs/core/vuiProvider/context.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useVuiContext = exports.VuiContextProvider = void 0;
+const utils_1 = require("../../utils");
+const [VuiContextProvider, useVuiContext] = (0, utils_1.createContext)({ isOptional: true });
+exports.VuiContextProvider = VuiContextProvider;
+exports.useVuiContext = useVuiContext;

package/dist/cjs/core/vuiProvider/index.d.ts

@@ -1,4 +1,5 @@
 export * from './animations';
+export * from './context';
 export { default as fontFaces } from './fontFaces';
 export { default as GlobalStyle } from './globalStyle';
 export { default as ResetCSS } from './resetCSS';

package/dist/cjs/core/vuiProvider/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/core/vuiProvider/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA;AAC5B,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAA;AAClD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAA;AACtD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAA;AAChD,OAAO,EAAE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/core/vuiProvider/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA;AAC5B,cAAc,WAAW,CAAA;AACzB,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAA;AAClD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAA;AACtD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAA;AAChD,OAAO,EAAE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAA"}

package/dist/cjs/core/vuiProvider/index.js

@@ -19,6 +19,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VuiProvider = exports.default = exports.ResetCSS = exports.GlobalStyle = exports.fontFaces = void 0;
 __exportStar(require("./animations"), exports);
+__exportStar(require("./context"), exports);
 var fontFaces_1 = require("./fontFaces");
 Object.defineProperty(exports, "fontFaces", { enumerable: true, get: function () { return __importDefault(fontFaces_1).default; } });
 var globalStyle_1 = require("./globalStyle");

package/dist/cjs/core/vuiProvider/reducers.d.ts

@@ -0,0 +1,10 @@
+import { ToastListItem } from '../../toast/toast.types';
+export declare function toastsReducer(state: {
+    list: ToastListItem[];
+}, action: {
+    type: 'add' | 'remove';
+    toast: ToastListItem;
+}): {
+    list: ToastListItem[];
+};
+//# sourceMappingURL=reducers.d.ts.map

package/dist/cjs/core/vuiProvider/reducers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"reducers.d.ts","sourceRoot":"","sources":["../../../../src/core/vuiProvider/reducers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAA;AAEvD,wBAAgB,aAAa,CAC3B,KAAK,EAAE;IAAE,IAAI,EAAE,aAAa,EAAE,CAAA;CAAE,EAChC,MAAM,EAAE;IAAE,IAAI,EAAE,KAAK,GAAG,QAAQ,CAAC;IAAC,KAAK,EAAE,aAAa,CAAA;CAAE;;EAazD"}

package/dist/cjs/core/vuiProvider/reducers.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toastsReducer = void 0;
+function toastsReducer(state, action) {
+    switch (action.type) {
+        case 'add': {
+            return { list: [action.toast, ...state.list] };
+        }
+        case 'remove': {
+            return { list: state.list.filter(t => t.id !== action.toast.id) };
+        }
+        default: {
+            throw new Error(`Unhandled action type: ${action.type}`);
+        }
+    }
+}
+exports.toastsReducer = toastsReducer;

package/dist/cjs/core/vuiProvider/vuiProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"vuiProvider.d.ts","sourceRoot":"","sources":["../../../../src/core/vuiProvider/vuiProvider.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAKjC,OAAqB,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAIvC,aAAK,gBAAgB,GAAG;IACtB,8CAA8C;IAC9C,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,wDAAwD;IACxD,KAAK,CAAC,EAAE,QAAQ,CAAA;CACjB,CAAA;AAED,oGAAoG;AACpG,QAAA,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,GAAG,YAAY,CAepD,CAAA;AAED,eAAe,WAAW,CAAA"}
+{"version":3,"file":"vuiProvider.d.ts","sourceRoot":"","sources":["../../../../src/core/vuiProvider/vuiProvider.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAc,MAAM,OAAO,CAAA;AAM7C,OAAqB,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AAGpD,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAMvC,aAAK,gBAAgB,GAAG;IACtB,8CAA8C;IAC9C,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,wDAAwD;IACxD,KAAK,CAAC,EAAE,QAAQ,CAAA;CACjB,CAAA;AAED,oGAAoG;AACpG,QAAA,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,GAAG,YAAY,CA6BpD,CAAA;AAED,eAAe,WAAW,CAAA"}

package/dist/cjs/core/vuiProvider/vuiProvider.js

@@ -1,21 +1,57 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const styled_components_1 = require("styled-components");
 const modalStyle_1 = __importDefault(require("../../modal/modalStyle"));
 const popoverStyle_1 = __importDefault(require("../../popover/popoverStyle"));
+const portal_1 = require("../../portal");
 const theme_1 = __importDefault(require("../../theme"));
+const toast_1 = require("../../toast");
+const context_1 = require("./context");
 const globalStyle_1 = __importDefault(require("./globalStyle"));
+const reducers_1 = require("./reducers");
 const resetCSS_1 = __importDefault(require("./resetCSS"));
 /** Provides theme to all wrapped components and by default includes CSS reset and global styles. */
-const VuiProvider = ({ children, globalStyle = true, resetCSS = true, theme = theme_1.default }) => (react_1.default.createElement(styled_components_1.ThemeProvider, { theme: theme },
-    react_1.default.createElement(react_1.default.Fragment, null,
-        resetCSS && react_1.default.createElement(resetCSS_1.default, null),
-        react_1.default.createElement(globalStyle_1.default, { globalStyle: globalStyle }),
-        react_1.default.createElement(modalStyle_1.default, null),
-        react_1.default.createElement(popoverStyle_1.default, null),
-        children)));
+const VuiProvider = ({ children, globalStyle = true, resetCSS = true, theme = theme_1.default }) => {
+    const [toasts, dispatch] = (0, react_1.useReducer)(reducers_1.toastsReducer, { list: [] });
+    const addToast = (toast) => dispatch({ type: 'add', toast });
+    const removeToast = (id) => dispatch({ type: 'remove', toast: { id } });
+    const context = { toasts, addToast, removeToast };
+    return (react_1.default.createElement(context_1.VuiContextProvider, { value: context },
+        react_1.default.createElement(styled_components_1.ThemeProvider, { theme: theme },
+            react_1.default.createElement(react_1.default.Fragment, null,
+                resetCSS && react_1.default.createElement(resetCSS_1.default, null),
+                react_1.default.createElement(globalStyle_1.default, { globalStyle: globalStyle }),
+                react_1.default.createElement(modalStyle_1.default, null),
+                react_1.default.createElement(popoverStyle_1.default, null),
+                children,
+                react_1.default.createElement(portal_1.Portal, null,
+                    react_1.default.createElement(toast_1.Toaster, null))))));
+};
 exports.default = VuiProvider;

package/dist/cjs/toast/Toaster.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+declare const _default: React.MemoExoticComponent<() => JSX.Element>;
+export default _default;
+//# sourceMappingURL=Toaster.d.ts.map

package/dist/cjs/toast/Toaster.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toaster.d.ts","sourceRoot":"","sources":["../../../src/toast/Toaster.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;;AA8BzB,wBAAkC"}

package/dist/cjs/toast/Toaster.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const box_1 = require("../box");
+const core_1 = require("../core");
+const theme_1 = require("../theme");
+const Toaster = () => {
+    var _a, _b;
+    const { toasts } = (0, core_1.useVuiContext)();
+    return (react_1.default.createElement(box_1.Box, { bottom: "1rem", display: "block", maxW: "100%", minW: { md: 600, sm: 600, xs: '100%' }, p: { md: '16px', sm: '4px', xs: '2px' }, position: "fixed", right: { md: '1rem', sm: 0, xs: 0 }, zIndex: theme_1.zIndices.toast }, (_b = (_a = toasts === null || toasts === void 0 ? void 0 : toasts.list) === null || _a === void 0 ? void 0 : _a.map) === null || _b === void 0 ? void 0 : _b.call(_a, (toast) => (react_1.default.createElement("div", { id: `toast_${toast.id}`, key: toast.id }, toast.component)))));
+};
+exports.default = react_1.default.memo(Toaster);

package/dist/cjs/toast/index.d.ts

@@ -1,2 +1,3 @@
-export * from './Toast';
+export { default as Toaster } from './Toaster';
+export * from './useToast';
 //# sourceMappingURL=index.d.ts.map

package/dist/cjs/toast/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/toast/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/toast/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAA;AAE9C,cAAc,YAAY,CAAA"}

package/dist/cjs/toast/index.js

@@ -13,5 +13,11 @@ var __createBinding = (this && this.__createBinding) || (Object.create ? (functi
 var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./Toast"), exports);
+exports.Toaster = void 0;
+var Toaster_1 = require("./Toaster");
+Object.defineProperty(exports, "Toaster", { enumerable: true, get: function () { return __importDefault(Toaster_1).default; } });
+__exportStar(require("./useToast"), exports);

package/dist/cjs/toast/toast.types.d.ts

@@ -2,7 +2,7 @@ import { ReactNode } from 'react';
 import { NotificationProps } from '../notification';
 export interface ToastListItem {
     id: string;
-    component: ReactNode;
+    component?: ReactNode;
 }
 export interface ToastSetup {
     options: ToastOptions;

package/dist/cjs/toast/toast.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toast.types.d.ts","sourceRoot":"","sources":["../../../src/toast/toast.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAA;AAEnD,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAA;IACV,SAAS,EAAE,SAAS,CAAA;CACrB;AAED,MAAM,WAAW,UAAU;IACzB,OAAO,EAAE,YAAY,CAAA;IACrB,aAAa,EAAE,aAAa,EAAE,CAAA;CAC/B;AAED,MAAM,WAAW,YAAa,SAAQ,iBAAiB;IACrD,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB"}
+{"version":3,"file":"toast.types.d.ts","sourceRoot":"","sources":["../../../src/toast/toast.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAA;AAEnD,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAA;IACV,SAAS,CAAC,EAAE,SAAS,CAAA;CACtB;AAED,MAAM,WAAW,UAAU;IACzB,OAAO,EAAE,YAAY,CAAA;IACrB,aAAa,EAAE,aAAa,EAAE,CAAA;CAC/B;AAED,MAAM,WAAW,YAAa,SAAQ,iBAAiB;IACrD,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB"}

package/dist/cjs/toast/useToast.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+import { ToastOptions } from './toast.types';
+export declare const useToast: () => {
+    showToast: (options?: ToastOptions | undefined) => void;
+    hideToast: (id: string) => any;
+    showInfo: (text: ReactNode) => void;
+    showSuccess: (text: ReactNode) => void;
+    showWarning: (text: ReactNode) => void;
+    showError: (text: ReactNode) => void;
+    showLoading: (text: ReactNode) => void;
+};
+//# sourceMappingURL=useToast.d.ts.map

package/dist/cjs/toast/useToast.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useToast.d.ts","sourceRoot":"","sources":["../../../src/toast/useToast.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAKxC,OAAO,EAAE,YAAY,EAAc,MAAM,eAAe,CAAA;AAUxD,eAAO,MAAM,QAAQ;uDAKyB,IAAI;oBAFzB,MAAM;qBAqCL,SAAS;wBACN,SAAS;wBACT,SAAS;sBACX,SAAS;wBACP,SAAS;CAGrC,CAAA"}

package/dist/cjs/toast/useToast.js

@@ -0,0 +1,46 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useToast = void 0;
+const react_1 = __importDefault(require("react"));
+const core_1 = require("../core");
+const notification_1 = require("../notification");
+const utils_1 = require("../utils");
+const setup = {
+    options: {
+        duration: 5000,
+        dismissible: true
+    },
+    componentList: []
+};
+const useToast = () => {
+    const { addToast, removeToast } = (0, core_1.useVuiContext)();
+    const hideToast = (id) => removeToast(id);
+    const showToast = (options) => {
+        const id = (options === null || options === void 0 ? void 0 : options.id) ? options.id : (0, utils_1.uid)('toast');
+        const { duration = setup.options.duration } = options || {};
+        const { dismissible = setup.options.dismissible } = options || {};
+        const { status = setup.options.duration } = options || {};
+        const { action } = options || {};
+        const { icon } = options || {};
+        const { text } = options || {};
+        const { title } = options || {};
+        const onClose = () => hideToast(id);
+        const toast = {
+            id,
+            component: (react_1.default.createElement(notification_1.Notification, { action: action, animation: "fadeDown", icon: icon, mt: { md: 1, sm: '4px', xs: '4px' }, onClose: dismissible ? onClose : undefined, shadow: 1, status: status, text: text, title: title, w: 1 }))
+        };
+        addToast(toast);
+        if (duration !== 0)
+            window.setTimeout(() => hideToast(id), duration);
+    };
+    const showInfo = (text) => showToast({ text, status: 'info' });
+    const showSuccess = (text) => showToast({ text, status: 'success' });
+    const showWarning = (text) => showToast({ text, status: 'warning' });
+    const showError = (text) => showToast({ text, status: 'error' });
+    const showLoading = (text) => showToast({ text, status: 'loading' });
+    return { showToast, hideToast, showInfo, showSuccess, showWarning, showError, showLoading };
+};
+exports.useToast = useToast;

package/dist/cjs/utils/react.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../../../src/utils/react.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EACZ,cAAc,EAEd,YAAY,EACZ,SAAS,EAMV,MAAM,OAAO,CAAA;AAKd,OAAO,EAAE,WAAW,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAA;AAEhF,aAAK,QAAQ,CAAC,CAAC,IAAI,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAA;AAEhF;;;GAGG;AACH,wBAAgB,SAAS,CAAC,CAAC,GAAG,GAAG,EAAE,GAAG,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,SAAS,EAAE,KAAK,EAAE,CAAC,QAcxE;AAED,sEAAsE;AACtE,wBAAgB,aAAa,CAAC,WAAW,EAAE,OAAO,GAAE,oBAAyB,oCAoB5E;AAED,2CAA2C;AAC3C,wBAAgB,SAAS,CAAC,CAAC,EAAE,GAAG,IAAI,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC,EAAE,UACjD,CAAC,GAAG,IAAI,UAGvB;AAGD,uFAAuF;AACvF,wBAAgB,cAAc,CAAC,CAAC,SAAS,WAAW,EAAE,QAAQ,CAAC,EAAE,CAAC,EAAE,IAAI,GAAE,cAAmB,KAM5F;AAKD;;;;;;GAMG;AACH,wBAAgB,eAAe,CAC7B,GAAG,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,GAAG,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EAAE,EACpE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,EACjC,MAAM,GAAE,MAAM,EAAkB,QAoBjC;AAED,oBAAY,kBAAkB,CAAC,CAAC,IAAI;IAClC,YAAY,CAAC,EAAE,CAAC,CAAA;IAChB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAA;IAC7B,KAAK,CAAC,EAAE,CAAC,CAAA;CACV,CAAA;AAGD,sFAAsF;AACtF,wBAAgB,aAAa,CAAC,CAAC,EAAE,KAAK,EAAE,kBAAkB,CAAC,CAAC,CAAC;kBAwBzC,OAAO;WAAS,MAAM,IAAI;GAE7C;AAED,4GAA4G;AAC5G,wBAAgB,MAAM,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,YAEpD;AAGD;;GAEG;AACH,wBAAgB,YAAY,kBAY3B;AAED,wEAAwE;AACxE,wBAAgB,cAAc,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,YAAY,QAQ/D"}
+{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../../../src/utils/react.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EACZ,cAAc,EAEd,YAAY,EACZ,SAAS,EAMV,MAAM,OAAO,CAAA;AAKd,OAAO,EAAE,WAAW,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAA;AAEhF,aAAK,QAAQ,CAAC,CAAC,IAAI,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAA;AAEhF;;;GAGG;AACH,wBAAgB,SAAS,CAAC,CAAC,GAAG,GAAG,EAAE,GAAG,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,SAAS,EAAE,KAAK,EAAE,CAAC,QAcxE;AAED,sEAAsE;AACtE,wBAAgB,aAAa,CAAC,WAAW,EAAE,OAAO,GAAE,oBAAyB,oCAoB5E;AAED,2CAA2C;AAC3C,wBAAgB,SAAS,CAAC,CAAC,EAAE,GAAG,IAAI,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC,EAAE,UACjD,CAAC,GAAG,IAAI,UAGvB;AAGD,uFAAuF;AACvF,wBAAgB,cAAc,CAAC,CAAC,SAAS,WAAW,EAAE,QAAQ,CAAC,EAAE,CAAC,EAAE,IAAI,GAAE,cAAmB,KAM5F;AAKD;;;;;;GAMG;AACH,wBAAgB,eAAe,CAC7B,GAAG,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,GAAG,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EAAE,EACpE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,EACjC,MAAM,GAAE,MAAM,EAAkB,QAoBjC;AAED,oBAAY,kBAAkB,CAAC,CAAC,IAAI;IAClC,YAAY,CAAC,EAAE,CAAC,CAAA;IAChB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAA;IAC7B,KAAK,CAAC,EAAE,CAAC,CAAA;CACV,CAAA;AAGD,sFAAsF;AACtF,wBAAgB,aAAa,CAAC,CAAC,EAAE,KAAK,EAAE,kBAAkB,CAAC,CAAC,CAAC;kBAwBzC,OAAO;WAAS,MAAM,IAAI;GAE7C;AAED,4GAA4G;AAC5G,wBAAgB,MAAM,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,YAEpD;AAGD;;GAEG;AACH,wBAAgB,YAAY,kBAY3B;AAED,wEAAwE;AACxE,wBAAgB,cAAc,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,YAAY,QAI/D"}

package/dist/cjs/utils/react.js

@@ -153,11 +153,6 @@ function reactDomRender(id, content) {
     const wrapper = document.getElementById(id);
     if (!wrapper)
         return;
-    try {
-        react_dom_1.default.render(content, wrapper);
-    }
-    catch (error) {
-        console.log(error);
-    }
+    react_dom_1.default.render(content, wrapper);
 }
 exports.reactDomRender = reactDomRender;

package/dist/esm/core/vuiProvider/context.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+declare const VuiContextProvider: import("react").Provider<any>, useVuiContext: () => any;
+export { VuiContextProvider, useVuiContext };
+//# sourceMappingURL=context.d.ts.map

package/dist/esm/core/vuiProvider/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../../src/core/vuiProvider/context.ts"],"names":[],"mappings":";AAEA,QAAA,MAAO,kBAAkB,iCAAE,aAAa,WAA4C,CAAA;AAEpF,OAAO,EAAE,kBAAkB,EAAE,aAAa,EAAE,CAAA"}

package/dist/esm/core/vuiProvider/context.js

@@ -0,0 +1,3 @@
+import { createContext } from '../../utils';
+const [VuiContextProvider, useVuiContext] = createContext({ isOptional: true });
+export { VuiContextProvider, useVuiContext };

package/dist/esm/core/vuiProvider/index.d.ts

@@ -1,4 +1,5 @@
 export * from './animations';
+export * from './context';
 export { default as fontFaces } from './fontFaces';
 export { default as GlobalStyle } from './globalStyle';
 export { default as ResetCSS } from './resetCSS';

package/dist/esm/core/vuiProvider/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/core/vuiProvider/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA;AAC5B,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAA;AAClD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAA;AACtD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAA;AAChD,OAAO,EAAE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/core/vuiProvider/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA;AAC5B,cAAc,WAAW,CAAA;AACzB,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAA;AAClD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAA;AACtD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAA;AAChD,OAAO,EAAE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAA"}

package/dist/esm/core/vuiProvider/index.js

@@ -1,4 +1,5 @@
 export * from './animations';
+export * from './context';
 export { default as fontFaces } from './fontFaces';
 export { default as GlobalStyle } from './globalStyle';
 export { default as ResetCSS } from './resetCSS';

package/dist/esm/core/vuiProvider/reducers.d.ts

@@ -0,0 +1,10 @@
+import { ToastListItem } from '../../toast/toast.types';
+export declare function toastsReducer(state: {
+    list: ToastListItem[];
+}, action: {
+    type: 'add' | 'remove';
+    toast: ToastListItem;
+}): {
+    list: ToastListItem[];
+};
+//# sourceMappingURL=reducers.d.ts.map

package/dist/esm/core/vuiProvider/reducers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"reducers.d.ts","sourceRoot":"","sources":["../../../../src/core/vuiProvider/reducers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAA;AAEvD,wBAAgB,aAAa,CAC3B,KAAK,EAAE;IAAE,IAAI,EAAE,aAAa,EAAE,CAAA;CAAE,EAChC,MAAM,EAAE;IAAE,IAAI,EAAE,KAAK,GAAG,QAAQ,CAAC;IAAC,KAAK,EAAE,aAAa,CAAA;CAAE;;EAazD"}

package/dist/esm/core/vuiProvider/reducers.js

@@ -0,0 +1,13 @@
+export function toastsReducer(state, action) {
+    switch (action.type) {
+        case 'add': {
+            return { list: [action.toast, ...state.list] };
+        }
+        case 'remove': {
+            return { list: state.list.filter(t => t.id !== action.toast.id) };
+        }
+        default: {
+            throw new Error(`Unhandled action type: ${action.type}`);
+        }
+    }
+}

package/dist/esm/core/vuiProvider/vuiProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"vuiProvider.d.ts","sourceRoot":"","sources":["../../../../src/core/vuiProvider/vuiProvider.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAKjC,OAAqB,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAIvC,aAAK,gBAAgB,GAAG;IACtB,8CAA8C;IAC9C,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,wDAAwD;IACxD,KAAK,CAAC,EAAE,QAAQ,CAAA;CACjB,CAAA;AAED,oGAAoG;AACpG,QAAA,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,GAAG,YAAY,CAepD,CAAA;AAED,eAAe,WAAW,CAAA"}
+{"version":3,"file":"vuiProvider.d.ts","sourceRoot":"","sources":["../../../../src/core/vuiProvider/vuiProvider.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAc,MAAM,OAAO,CAAA;AAM7C,OAAqB,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AAGpD,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAMvC,aAAK,gBAAgB,GAAG;IACtB,8CAA8C;IAC9C,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,wDAAwD;IACxD,KAAK,CAAC,EAAE,QAAQ,CAAA;CACjB,CAAA;AAED,oGAAoG;AACpG,QAAA,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,GAAG,YAAY,CA6BpD,CAAA;AAED,eAAe,WAAW,CAAA"}

package/dist/esm/core/vuiProvider/vuiProvider.js

@@ -1,16 +1,29 @@
-import React from 'react';
+import React, { useReducer } from 'react';
 import { ThemeProvider } from 'styled-components';
 import ModalStyle from '../../modal/modalStyle';
 import PopoverStyle from '../../popover/popoverStyle';
+import { Portal } from '../../portal';
 import defaultTheme from '../../theme';
+import { Toaster } from '../../toast';
+import { VuiContextProvider } from './context';
 import GlobalStyle from './globalStyle';
+import { toastsReducer } from './reducers';
 import ResetCSS from './resetCSS';
 /** Provides theme to all wrapped components and by default includes CSS reset and global styles. */
-const VuiProvider = ({ children, globalStyle = true, resetCSS = true, theme = defaultTheme }) => (React.createElement(ThemeProvider, { theme: theme },
-    React.createElement(React.Fragment, null,
-        resetCSS && React.createElement(ResetCSS, null),
-        React.createElement(GlobalStyle, { globalStyle: globalStyle }),
-        React.createElement(ModalStyle, null),
-        React.createElement(PopoverStyle, null),
-        children)));
+const VuiProvider = ({ children, globalStyle = true, resetCSS = true, theme = defaultTheme }) => {
+    const [toasts, dispatch] = useReducer(toastsReducer, { list: [] });
+    const addToast = (toast) => dispatch({ type: 'add', toast });
+    const removeToast = (id) => dispatch({ type: 'remove', toast: { id } });
+    const context = { toasts, addToast, removeToast };
+    return (React.createElement(VuiContextProvider, { value: context },
+        React.createElement(ThemeProvider, { theme: theme },
+            React.createElement(React.Fragment, null,
+                resetCSS && React.createElement(ResetCSS, null),
+                React.createElement(GlobalStyle, { globalStyle: globalStyle }),
+                React.createElement(ModalStyle, null),
+                React.createElement(PopoverStyle, null),
+                children,
+                React.createElement(Portal, null,
+                    React.createElement(Toaster, null))))));
+};
 export default VuiProvider;

package/dist/esm/toast/Toaster.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+declare const _default: React.MemoExoticComponent<() => JSX.Element>;
+export default _default;
+//# sourceMappingURL=Toaster.d.ts.map

package/dist/esm/toast/Toaster.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toaster.d.ts","sourceRoot":"","sources":["../../../src/toast/Toaster.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;;AA8BzB,wBAAkC"}

package/dist/esm/toast/Toaster.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { Box } from '../box';
+import { useVuiContext } from '../core';
+import { zIndices } from '../theme';
+const Toaster = () => {
+    const { toasts } = useVuiContext();
+    return (React.createElement(Box, { bottom: "1rem", display: "block", maxW: "100%", minW: { md: 600, sm: 600, xs: '100%' }, p: { md: '16px', sm: '4px', xs: '2px' }, position: "fixed", right: { md: '1rem', sm: 0, xs: 0 }, zIndex: zIndices.toast }, toasts?.list?.map?.((toast) => (React.createElement("div", { id: `toast_${toast.id}`, key: toast.id }, toast.component)))));
+};
+export default React.memo(Toaster);

package/dist/esm/toast/index.d.ts

@@ -1,2 +1,3 @@
-export * from './Toast';
+export { default as Toaster } from './Toaster';
+export * from './useToast';
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/toast/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/toast/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/toast/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAA;AAE9C,cAAc,YAAY,CAAA"}

package/dist/esm/toast/index.js

@@ -1 +1,2 @@
-export * from './Toast';
+export { default as Toaster } from './Toaster';
+export * from './useToast';

package/dist/esm/toast/toast.types.d.ts

@@ -2,7 +2,7 @@ import { ReactNode } from 'react';
 import { NotificationProps } from '../notification';
 export interface ToastListItem {
     id: string;
-    component: ReactNode;
+    component?: ReactNode;
 }
 export interface ToastSetup {
     options: ToastOptions;

package/dist/esm/toast/toast.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toast.types.d.ts","sourceRoot":"","sources":["../../../src/toast/toast.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAA;AAEnD,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAA;IACV,SAAS,EAAE,SAAS,CAAA;CACrB;AAED,MAAM,WAAW,UAAU;IACzB,OAAO,EAAE,YAAY,CAAA;IACrB,aAAa,EAAE,aAAa,EAAE,CAAA;CAC/B;AAED,MAAM,WAAW,YAAa,SAAQ,iBAAiB;IACrD,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB"}
+{"version":3,"file":"toast.types.d.ts","sourceRoot":"","sources":["../../../src/toast/toast.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAA;AAEnD,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAA;IACV,SAAS,CAAC,EAAE,SAAS,CAAA;CACtB;AAED,MAAM,WAAW,UAAU;IACzB,OAAO,EAAE,YAAY,CAAA;IACrB,aAAa,EAAE,aAAa,EAAE,CAAA;CAC/B;AAED,MAAM,WAAW,YAAa,SAAQ,iBAAiB;IACrD,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB"}

package/dist/esm/toast/useToast.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+import { ToastOptions } from './toast.types';
+export declare const useToast: () => {
+    showToast: (options?: ToastOptions | undefined) => void;
+    hideToast: (id: string) => any;
+    showInfo: (text: ReactNode) => void;
+    showSuccess: (text: ReactNode) => void;
+    showWarning: (text: ReactNode) => void;
+    showError: (text: ReactNode) => void;
+    showLoading: (text: ReactNode) => void;
+};
+//# sourceMappingURL=useToast.d.ts.map

package/dist/esm/toast/useToast.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useToast.d.ts","sourceRoot":"","sources":["../../../src/toast/useToast.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAKxC,OAAO,EAAE,YAAY,EAAc,MAAM,eAAe,CAAA;AAUxD,eAAO,MAAM,QAAQ;uDAKyB,IAAI;oBAFzB,MAAM;qBAqCL,SAAS;wBACN,SAAS;wBACT,SAAS;sBACX,SAAS;wBACP,SAAS;CAGrC,CAAA"}

package/dist/esm/toast/useToast.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { useVuiContext } from '../core';
+import { Notification } from '../notification';
+import { uid } from '../utils';
+const setup = {
+    options: {
+        duration: 5000,
+        dismissible: true
+    },
+    componentList: []
+};
+export const useToast = () => {
+    const { addToast, removeToast } = useVuiContext();
+    const hideToast = (id) => removeToast(id);
+    const showToast = (options) => {
+        const id = options?.id ? options.id : uid('toast');
+        const { duration = setup.options.duration } = options || {};
+        const { dismissible = setup.options.dismissible } = options || {};
+        const { status = setup.options.duration } = options || {};
+        const { action } = options || {};
+        const { icon } = options || {};
+        const { text } = options || {};
+        const { title } = options || {};
+        const onClose = () => hideToast(id);
+        const toast = {
+            id,
+            component: (React.createElement(Notification, { action: action, animation: "fadeDown", icon: icon, mt: { md: 1, sm: '4px', xs: '4px' }, onClose: dismissible ? onClose : undefined, shadow: 1, status: status, text: text, title: title, w: 1 }))
+        };
+        addToast(toast);
+        if (duration !== 0)
+            window.setTimeout(() => hideToast(id), duration);
+    };
+    const showInfo = (text) => showToast({ text, status: 'info' });
+    const showSuccess = (text) => showToast({ text, status: 'success' });
+    const showWarning = (text) => showToast({ text, status: 'warning' });
+    const showError = (text) => showToast({ text, status: 'error' });
+    const showLoading = (text) => showToast({ text, status: 'loading' });
+    return { showToast, hideToast, showInfo, showSuccess, showWarning, showError, showLoading };
+};

package/dist/esm/utils/react.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../../../src/utils/react.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EACZ,cAAc,EAEd,YAAY,EACZ,SAAS,EAMV,MAAM,OAAO,CAAA;AAKd,OAAO,EAAE,WAAW,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAA;AAEhF,aAAK,QAAQ,CAAC,CAAC,IAAI,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAA;AAEhF;;;GAGG;AACH,wBAAgB,SAAS,CAAC,CAAC,GAAG,GAAG,EAAE,GAAG,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,SAAS,EAAE,KAAK,EAAE,CAAC,QAcxE;AAED,sEAAsE;AACtE,wBAAgB,aAAa,CAAC,WAAW,EAAE,OAAO,GAAE,oBAAyB,oCAoB5E;AAED,2CAA2C;AAC3C,wBAAgB,SAAS,CAAC,CAAC,EAAE,GAAG,IAAI,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC,EAAE,UACjD,CAAC,GAAG,IAAI,UAGvB;AAGD,uFAAuF;AACvF,wBAAgB,cAAc,CAAC,CAAC,SAAS,WAAW,EAAE,QAAQ,CAAC,EAAE,CAAC,EAAE,IAAI,GAAE,cAAmB,KAM5F;AAKD;;;;;;GAMG;AACH,wBAAgB,eAAe,CAC7B,GAAG,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,GAAG,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EAAE,EACpE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,EACjC,MAAM,GAAE,MAAM,EAAkB,QAoBjC;AAED,oBAAY,kBAAkB,CAAC,CAAC,IAAI;IAClC,YAAY,CAAC,EAAE,CAAC,CAAA;IAChB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAA;IAC7B,KAAK,CAAC,EAAE,CAAC,CAAA;CACV,CAAA;AAGD,sFAAsF;AACtF,wBAAgB,aAAa,CAAC,CAAC,EAAE,KAAK,EAAE,kBAAkB,CAAC,CAAC,CAAC;kBAwBzC,OAAO;WAAS,MAAM,IAAI;GAE7C;AAED,4GAA4G;AAC5G,wBAAgB,MAAM,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,YAEpD;AAGD;;GAEG;AACH,wBAAgB,YAAY,kBAY3B;AAED,wEAAwE;AACxE,wBAAgB,cAAc,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,YAAY,QAQ/D"}
+{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../../../src/utils/react.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EACZ,cAAc,EAEd,YAAY,EACZ,SAAS,EAMV,MAAM,OAAO,CAAA;AAKd,OAAO,EAAE,WAAW,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAA;AAEhF,aAAK,QAAQ,CAAC,CAAC,IAAI,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAA;AAEhF;;;GAGG;AACH,wBAAgB,SAAS,CAAC,CAAC,GAAG,GAAG,EAAE,GAAG,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,SAAS,EAAE,KAAK,EAAE,CAAC,QAcxE;AAED,sEAAsE;AACtE,wBAAgB,aAAa,CAAC,WAAW,EAAE,OAAO,GAAE,oBAAyB,oCAoB5E;AAED,2CAA2C;AAC3C,wBAAgB,SAAS,CAAC,CAAC,EAAE,GAAG,IAAI,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC,EAAE,UACjD,CAAC,GAAG,IAAI,UAGvB;AAGD,uFAAuF;AACvF,wBAAgB,cAAc,CAAC,CAAC,SAAS,WAAW,EAAE,QAAQ,CAAC,EAAE,CAAC,EAAE,IAAI,GAAE,cAAmB,KAM5F;AAKD;;;;;;GAMG;AACH,wBAAgB,eAAe,CAC7B,GAAG,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,GAAG,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EAAE,EACpE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,EACjC,MAAM,GAAE,MAAM,EAAkB,QAoBjC;AAED,oBAAY,kBAAkB,CAAC,CAAC,IAAI;IAClC,YAAY,CAAC,EAAE,CAAC,CAAA;IAChB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAA;IAC7B,KAAK,CAAC,EAAE,CAAC,CAAA;CACV,CAAA;AAGD,sFAAsF;AACtF,wBAAgB,aAAa,CAAC,CAAC,EAAE,KAAK,EAAE,kBAAkB,CAAC,CAAC,CAAC;kBAwBzC,OAAO;WAAS,MAAM,IAAI;GAE7C;AAED,4GAA4G;AAC5G,wBAAgB,MAAM,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,YAEpD;AAGD;;GAEG;AACH,wBAAgB,YAAY,kBAY3B;AAED,wEAAwE;AACxE,wBAAgB,cAAc,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,YAAY,QAI/D"}

package/dist/esm/utils/react.js

@@ -116,10 +116,5 @@ export function reactDomRender(id, content) {
     const wrapper = document.getElementById(id);
     if (!wrapper)
         return;
-    try {
-        ReactDOM.render(content, wrapper);
-    }
-    catch (error) {
-        console.log(error);
-    }
+    ReactDOM.render(content, wrapper);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "1.2.0-beta.1",
+  "version": "1.2.0-beta.2",
   "description": "Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.",
   "module": "./dist/esm/index.js",
   "main": "./dist/cjs/index.js",

package/src/core/vuiProvider/context.ts

@@ -0,0 +1,5 @@
+import { createContext } from '../../utils'
+
+const [VuiContextProvider, useVuiContext] = createContext<any>({ isOptional: true })
+
+export { VuiContextProvider, useVuiContext }

package/src/core/vuiProvider/index.ts

@@ -1,4 +1,5 @@
 export * from './animations'
+export * from './context'
 export { default as fontFaces } from './fontFaces'
 export { default as GlobalStyle } from './globalStyle'
 export { default as ResetCSS } from './resetCSS'

package/src/core/vuiProvider/reducers.ts

@@ -0,0 +1,18 @@
+import { ToastListItem } from '../../toast/toast.types'
+
+export function toastsReducer(
+  state: { list: ToastListItem[] },
+  action: { type: 'add' | 'remove'; toast: ToastListItem }
+) {
+  switch (action.type) {
+    case 'add': {
+      return { list: [action.toast, ...state.list] }
+    }
+    case 'remove': {
+      return { list: state.list.filter(t => t.id !== action.toast.id) }
+    }
+    default: {
+      throw new Error(`Unhandled action type: ${action.type}`)
+    }
+  }
+}

package/src/core/vuiProvider/vuiProvider.tsx

@@ -1,11 +1,16 @@
-import React, { FC } from 'react'
+import React, { FC, useReducer } from 'react'
 import { ThemeProvider } from 'styled-components'
 
 import ModalStyle from '../../modal/modalStyle'
 import PopoverStyle from '../../popover/popoverStyle'
+import { Portal } from '../../portal'
 import defaultTheme, { VuiTheme } from '../../theme'
+import { Toaster } from '../../toast'
+import { ToastListItem } from '../../toast/toast.types'
 import { ChildrenProp } from '../types'
+import { VuiContextProvider } from './context'
 import GlobalStyle from './globalStyle'
+import { toastsReducer } from './reducers'
 import ResetCSS from './resetCSS'
 
 type VuiProviderProps = {
@@ -23,16 +28,30 @@ const VuiProvider: FC<VuiProviderProps & ChildrenProp> = ({
   globalStyle = true,
   resetCSS = true,
   theme = defaultTheme as VuiTheme
-}) => (
-  <ThemeProvider theme={theme}>
-    <>
-      {resetCSS && <ResetCSS />}
-      <GlobalStyle globalStyle={globalStyle} />
-      <ModalStyle />
-      <PopoverStyle />
-      {children}
-    </>
-  </ThemeProvider>
-)
+}) => {
+  const [toasts, dispatch] = useReducer(toastsReducer, { list: [] })
+
+  const addToast = (toast: ToastListItem) => dispatch({ type: 'add', toast })
+  const removeToast = (id: string) => dispatch({ type: 'remove', toast: { id } })
+
+  const context = { toasts, addToast, removeToast }
+
+  return (
+    <VuiContextProvider value={context}>
+      <ThemeProvider theme={theme}>
+        <>
+          {resetCSS && <ResetCSS />}
+          <GlobalStyle globalStyle={globalStyle} />
+          <ModalStyle />
+          <PopoverStyle />
+          {children}
+          <Portal>
+            <Toaster />
+          </Portal>
+        </>
+      </ThemeProvider>
+    </VuiContextProvider>
+  )
+}
 
 export default VuiProvider

package/src/toast/Toaster.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+
+import { Box } from '../box'
+import { useVuiContext } from '../core'
+import { zIndices } from '../theme'
+import { ToastListItem } from './toast.types'
+
+const Toaster = () => {
+  const { toasts } = useVuiContext()
+
+  return (
+    <Box
+      bottom="1rem"
+      display="block"
+      maxW="100%"
+      minW={{ md: 600, sm: 600, xs: '100%' }}
+      p={{ md: '16px', sm: '4px', xs: '2px' }}
+      position="fixed"
+      right={{ md: '1rem', sm: 0, xs: 0 }}
+      zIndex={zIndices.toast}
+    >
+      {toasts?.list?.map?.((toast: ToastListItem) => (
+        <div id={`toast_${toast.id}`} key={toast.id}>
+          {toast.component}
+        </div>
+      ))}
+    </Box>
+  )
+}
+
+export default React.memo(Toaster)

package/src/toast/index.ts

@@ -1 +1,3 @@
-export * from './Toast'
+export { default as Toaster } from './Toaster'
+
+export * from './useToast'

package/src/toast/toast.types.ts

@@ -4,7 +4,7 @@ import { NotificationProps } from '../notification'
 
 export interface ToastListItem {
   id: string
-  component: ReactNode
+  component?: ReactNode
 }
 
 export interface ToastSetup {

package/src/toast/useToast.tsx

@@ -0,0 +1,63 @@
+import React, { ReactNode } from 'react'
+
+import { useVuiContext } from '../core'
+import { Notification, NotificationStatus } from '../notification'
+import { uid } from '../utils'
+import { ToastOptions, ToastSetup } from './toast.types'
+
+const setup: ToastSetup = {
+  options: {
+    duration: 5000,
+    dismissible: true
+  },
+  componentList: []
+}
+
+export const useToast = () => {
+  const { addToast, removeToast } = useVuiContext()
+
+  const hideToast = (id: string) => removeToast(id)
+
+  const showToast = (options?: ToastOptions): void => {
+    const id = options?.id ? options.id : uid('toast')
+    const { duration = setup.options.duration } = options || {}
+    const { dismissible = setup.options.dismissible } = options || {}
+    const { status = setup.options.duration } = options || {}
+    const { action } = options || {}
+    const { icon } = options || {}
+    const { text } = options || {}
+    const { title } = options || {}
+
+    const onClose = () => hideToast(id)
+
+    const toast = {
+      id,
+      component: (
+        <Notification
+          action={action}
+          animation="fadeDown"
+          icon={icon}
+          mt={{ md: 1, sm: '4px', xs: '4px' }}
+          onClose={dismissible ? onClose : undefined}
+          shadow={1}
+          status={status as NotificationStatus}
+          text={text}
+          title={title}
+          w={1}
+        />
+      )
+    }
+
+    addToast(toast)
+
+    if (duration !== 0) window.setTimeout(() => hideToast(id), duration)
+  }
+
+  const showInfo = (text: ReactNode) => showToast({ text, status: 'info' })
+  const showSuccess = (text: ReactNode) => showToast({ text, status: 'success' })
+  const showWarning = (text: ReactNode) => showToast({ text, status: 'warning' })
+  const showError = (text: ReactNode) => showToast({ text, status: 'error' })
+  const showLoading = (text: ReactNode) => showToast({ text, status: 'loading' })
+
+  return { showToast, hideToast, showInfo, showSuccess, showWarning, showError, showLoading }
+}

package/src/utils/react.ts

@@ -177,9 +177,5 @@ export function useIsMounted() {
 export function reactDomRender(id: string, content: ReactElement) {
   const wrapper = document.getElementById(id)
   if (!wrapper) return
-  try {
-    ReactDOM.render(content, wrapper)
-  } catch (error) {
-    console.log(error)
-  }
+  ReactDOM.render(content, wrapper)
 }

package/dist/cjs/toast/Toast.d.ts

@@ -1,11 +0,0 @@
-import { ReactNode } from 'react';
-import { ToastOptions } from './toast.types';
-declare const hide: (id: string) => void;
-declare const show: (options?: ToastOptions | undefined) => void;
-declare const showInfo: (text: ReactNode) => void;
-declare const showSuccess: (text: ReactNode) => void;
-declare const showWarning: (text: ReactNode) => void;
-declare const showError: (text: ReactNode) => void;
-declare const showLoading: (text: ReactNode) => void;
-export { show as showToast, hide as hideToast, showInfo, showSuccess, showWarning, showError, showLoading };
-//# sourceMappingURL=Toast.d.ts.map

package/dist/cjs/toast/Toast.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../src/toast/Toast.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAOxC,OAAO,EAAE,YAAY,EAAc,MAAM,eAAe,CAAA;AAmCxD,QAAA,MAAM,IAAI,OAAQ,MAAM,KAAG,IAG1B,CAAA;AAED,QAAA,MAAM,IAAI,0CAA6B,IAqCtC,CAAA;AAED,QAAA,MAAM,QAAQ,SAAU,SAAS,SAAmC,CAAA;AACpE,QAAA,MAAM,WAAW,SAAU,SAAS,SAAsC,CAAA;AAC1E,QAAA,MAAM,WAAW,SAAU,SAAS,SAAsC,CAAA;AAC1E,QAAA,MAAM,SAAS,SAAU,SAAS,SAAoC,CAAA;AACtE,QAAA,MAAM,WAAW,SAAU,SAAS,SAAsC,CAAA;AAE1E,OAAO,EAAE,IAAI,IAAI,SAAS,EAAE,IAAI,IAAI,SAAS,EAAE,QAAQ,EAAE,WAAW,EAAE,WAAW,EAAE,SAAS,EAAE,WAAW,EAAE,CAAA"}

package/dist/cjs/toast/Toast.js

@@ -1,61 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.showLoading = exports.showError = exports.showWarning = exports.showSuccess = exports.showInfo = exports.hideToast = exports.showToast = void 0;
-const react_1 = __importDefault(require("react"));
-const box_1 = require("../box");
-const core_1 = require("../core");
-const notification_1 = require("../notification");
-const theme_1 = require("../theme");
-const utils_1 = require("../utils");
-const wrapperId = 'toastsWrapper';
-const setup = {
-    options: {
-        duration: 5000,
-        dismissible: true
-    },
-    componentList: []
-};
-const render = () => {
-    const content = (react_1.default.createElement(core_1.VuiProvider, null,
-        react_1.default.createElement(box_1.Box, { bottom: "1rem", display: "block", maxW: "100%", minW: { md: 600, sm: 600, xs: '100%' }, p: { md: '16px', sm: '4px', xs: '2px' }, position: "fixed", right: { md: '1rem', sm: 0, xs: 0 }, zIndex: theme_1.zIndices.toast }, setup.componentList.map(item => (react_1.default.createElement("div", { key: item.id }, item.component))))));
-    (0, utils_1.reactDomRender)(wrapperId, content);
-};
-const hide = (id) => {
-    setup.componentList = setup.componentList.filter(i => i.id !== id);
-    render();
-};
-exports.hideToast = hide;
-const show = (options) => {
-    const id = (options === null || options === void 0 ? void 0 : options.id) ? options.id : (0, utils_1.uid)('toast');
-    const { duration = setup.options.duration } = options || {};
-    const { dismissible = setup.options.dismissible } = options || {};
-    const { status = setup.options.duration } = options || {};
-    const { action } = options || {};
-    const { icon } = options || {};
-    const { text } = options || {};
-    const { title } = options || {};
-    (0, utils_1.addContainer)(wrapperId);
-    render();
-    const onClose = () => hide(id);
-    setup.componentList.unshift({
-        id,
-        component: (react_1.default.createElement(notification_1.Notification, { action: action, animation: "fadeDown", icon: icon, mt: { md: 1, sm: '4px', xs: '4px' }, onClose: dismissible ? onClose : undefined, shadow: 1, status: status, text: text, title: title, w: 1 }))
-    });
-    render();
-    if (duration !== 0)
-        window.setTimeout(() => hide(id), duration);
-};
-exports.showToast = show;
-const showInfo = (text) => show({ text, status: 'info' });
-exports.showInfo = showInfo;
-const showSuccess = (text) => show({ text, status: 'success' });
-exports.showSuccess = showSuccess;
-const showWarning = (text) => show({ text, status: 'warning' });
-exports.showWarning = showWarning;
-const showError = (text) => show({ text, status: 'error' });
-exports.showError = showError;
-const showLoading = (text) => show({ text, status: 'loading' });
-exports.showLoading = showLoading;

package/dist/esm/toast/Toast.d.ts

@@ -1,11 +0,0 @@
-import { ReactNode } from 'react';
-import { ToastOptions } from './toast.types';
-declare const hide: (id: string) => void;
-declare const show: (options?: ToastOptions | undefined) => void;
-declare const showInfo: (text: ReactNode) => void;
-declare const showSuccess: (text: ReactNode) => void;
-declare const showWarning: (text: ReactNode) => void;
-declare const showError: (text: ReactNode) => void;
-declare const showLoading: (text: ReactNode) => void;
-export { show as showToast, hide as hideToast, showInfo, showSuccess, showWarning, showError, showLoading };
-//# sourceMappingURL=Toast.d.ts.map

package/dist/esm/toast/Toast.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../src/toast/Toast.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAOxC,OAAO,EAAE,YAAY,EAAc,MAAM,eAAe,CAAA;AAmCxD,QAAA,MAAM,IAAI,OAAQ,MAAM,KAAG,IAG1B,CAAA;AAED,QAAA,MAAM,IAAI,0CAA6B,IAqCtC,CAAA;AAED,QAAA,MAAM,QAAQ,SAAU,SAAS,SAAmC,CAAA;AACpE,QAAA,MAAM,WAAW,SAAU,SAAS,SAAsC,CAAA;AAC1E,QAAA,MAAM,WAAW,SAAU,SAAS,SAAsC,CAAA;AAC1E,QAAA,MAAM,SAAS,SAAU,SAAS,SAAoC,CAAA;AACtE,QAAA,MAAM,WAAW,SAAU,SAAS,SAAsC,CAAA;AAE1E,OAAO,EAAE,IAAI,IAAI,SAAS,EAAE,IAAI,IAAI,SAAS,EAAE,QAAQ,EAAE,WAAW,EAAE,WAAW,EAAE,SAAS,EAAE,WAAW,EAAE,CAAA"}

package/dist/esm/toast/Toast.js

@@ -1,49 +0,0 @@
-import React from 'react';
-import { Box } from '../box';
-import { VuiProvider } from '../core';
-import { Notification } from '../notification';
-import { zIndices } from '../theme';
-import { addContainer, reactDomRender, uid } from '../utils';
-const wrapperId = 'toastsWrapper';
-const setup = {
-    options: {
-        duration: 5000,
-        dismissible: true
-    },
-    componentList: []
-};
-const render = () => {
-    const content = (React.createElement(VuiProvider, null,
-        React.createElement(Box, { bottom: "1rem", display: "block", maxW: "100%", minW: { md: 600, sm: 600, xs: '100%' }, p: { md: '16px', sm: '4px', xs: '2px' }, position: "fixed", right: { md: '1rem', sm: 0, xs: 0 }, zIndex: zIndices.toast }, setup.componentList.map(item => (React.createElement("div", { key: item.id }, item.component))))));
-    reactDomRender(wrapperId, content);
-};
-const hide = (id) => {
-    setup.componentList = setup.componentList.filter(i => i.id !== id);
-    render();
-};
-const show = (options) => {
-    const id = options?.id ? options.id : uid('toast');
-    const { duration = setup.options.duration } = options || {};
-    const { dismissible = setup.options.dismissible } = options || {};
-    const { status = setup.options.duration } = options || {};
-    const { action } = options || {};
-    const { icon } = options || {};
-    const { text } = options || {};
-    const { title } = options || {};
-    addContainer(wrapperId);
-    render();
-    const onClose = () => hide(id);
-    setup.componentList.unshift({
-        id,
-        component: (React.createElement(Notification, { action: action, animation: "fadeDown", icon: icon, mt: { md: 1, sm: '4px', xs: '4px' }, onClose: dismissible ? onClose : undefined, shadow: 1, status: status, text: text, title: title, w: 1 }))
-    });
-    render();
-    if (duration !== 0)
-        window.setTimeout(() => hide(id), duration);
-};
-const showInfo = (text) => show({ text, status: 'info' });
-const showSuccess = (text) => show({ text, status: 'success' });
-const showWarning = (text) => show({ text, status: 'warning' });
-const showError = (text) => show({ text, status: 'error' });
-const showLoading = (text) => show({ text, status: 'loading' });
-export { show as showToast, hide as hideToast, showInfo, showSuccess, showWarning, showError, showLoading };

package/src/toast/Toast.tsx

@@ -1,93 +0,0 @@
-import React, { ReactNode } from 'react'
-
-import { Box } from '../box'
-import { VuiProvider } from '../core'
-import { Notification, NotificationStatus } from '../notification'
-import { zIndices } from '../theme'
-import { addContainer, reactDomRender, uid } from '../utils'
-import { ToastOptions, ToastSetup } from './toast.types'
-
-const wrapperId = 'toastsWrapper'
-
-const setup: ToastSetup = {
-  options: {
-    duration: 5000,
-    dismissible: true
-  },
-  componentList: []
-}
-
-const render = (): void => {
-  const content = (
-    <VuiProvider>
-      <Box
-        bottom="1rem"
-        display="block"
-        maxW="100%"
-        minW={{ md: 600, sm: 600, xs: '100%' }}
-        p={{ md: '16px', sm: '4px', xs: '2px' }}
-        position="fixed"
-        right={{ md: '1rem', sm: 0, xs: 0 }}
-        zIndex={zIndices.toast}
-      >
-        {setup.componentList.map(item => (
-          <div key={item.id}>{item.component}</div>
-        ))}
-      </Box>
-    </VuiProvider>
-  )
-
-  reactDomRender(wrapperId, content)
-}
-
-const hide = (id: string): void => {
-  setup.componentList = setup.componentList.filter(i => i.id !== id)
-  render()
-}
-
-const show = (options?: ToastOptions): void => {
-  const id = options?.id ? options.id : uid('toast')
-
-  const { duration = setup.options.duration } = options || {}
-  const { dismissible = setup.options.dismissible } = options || {}
-  const { status = setup.options.duration } = options || {}
-  const { action } = options || {}
-  const { icon } = options || {}
-  const { text } = options || {}
-  const { title } = options || {}
-
-  addContainer(wrapperId)
-
-  render()
-
-  const onClose = () => hide(id)
-
-  setup.componentList.unshift({
-    id,
-    component: (
-      <Notification
-        action={action}
-        animation="fadeDown"
-        icon={icon}
-        mt={{ md: 1, sm: '4px', xs: '4px' }}
-        onClose={dismissible ? onClose : undefined}
-        shadow={1}
-        status={status as NotificationStatus}
-        text={text}
-        title={title}
-        w={1}
-      />
-    )
-  })
-  render()
-
-  if (duration !== 0) window.setTimeout(() => hide(id), duration)
-}
-
-const showInfo = (text: ReactNode) => show({ text, status: 'info' })
-const showSuccess = (text: ReactNode) => show({ text, status: 'success' })
-const showWarning = (text: ReactNode) => show({ text, status: 'warning' })
-const showError = (text: ReactNode) => show({ text, status: 'error' })
-const showLoading = (text: ReactNode) => show({ text, status: 'loading' })
-
-export { show as showToast, hide as hideToast, showInfo, showSuccess, showWarning, showError, showLoading }