@veracity/vui 1.2.0-beta.2 → 1.2.0

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

@@ -1,5 +1,14 @@
-import { ReactNode } from 'react';
+import { Dispatch, ReactNode } from 'react';
+import { ToastListItem } from '../toast/toast.types';
 export interface ChildrenProp {
     children?: ReactNode;
 }
+export interface VuiContext {
+    toasts: {
+        list: ToastListItem[];
+    };
+    addToast: (toast: ToastListItem) => void;
+    removeToast: (id: string) => void;
+    setPortalSlot: Dispatch<ReactNode>;
+}
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/core/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,MAAM,WAAW,YAAY;IAC3B,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/core/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAE3C,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAA;AAEpD,MAAM,WAAW,YAAY;IAC3B,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB;AAED,MAAM,WAAW,UAAU;IACzB,MAAM,EAAE;QAAE,IAAI,EAAE,aAAa,EAAE,CAAA;KAAE,CAAA;IACjC,QAAQ,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAA;IACxC,WAAW,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,aAAa,EAAE,QAAQ,CAAC,SAAS,CAAC,CAAA;CACnC"}

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

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

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

@@ -1 +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"}
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../../src/core/vuiProvider/context.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAErC,QAAA,MAAO,kBAAkB,wCAAE,aAAa,kBAAmD,CAAA;AAE3F,OAAO,EAAE,kBAAkB,EAAE,aAAa,EAAE,CAAA"}

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

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

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

@@ -1 +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"}
+{"version":3,"file":"reducers.d.ts","sourceRoot":"","sources":["../../../../src/core/vuiProvider/reducers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAA;AAEvD,eAAO,MAAM,aAAa,UACjB;IAAE,IAAI,EAAE,aAAa,EAAE,CAAA;CAAE,UACxB;IAAE,IAAI,EAAE,KAAK,GAAG,QAAQ,CAAC;IAAC,KAAK,EAAE,aAAa,CAAA;CAAE;;CAazD,CAAA;AAED,eAAO,MAAM,cAAc,UAAW,GAAG,UAAU,GAAG,QAAqB,CAAA"}

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

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.toastsReducer = void 0;
-function toastsReducer(state, action) {
+exports.genericReducer = exports.toastsReducer = void 0;
+const toastsReducer = (state, action) => {
     switch (action.type) {
         case 'add': {
             return { list: [action.toast, ...state.list] };
@@ -13,5 +13,7 @@ function toastsReducer(state, action) {
             throw new Error(`Unhandled action type: ${action.type}`);
         }
     }
-}
+};
 exports.toastsReducer = toastsReducer;
+const genericReducer = (state, action) => (state = action);
+exports.genericReducer = genericReducer;

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,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"}
+{"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,CA+BpD,CAAA;AAED,eAAe,WAAW,CAAA"}

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

@@ -39,10 +39,11 @@ 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 }) => {
-    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 };
+    const [toasts, toastsDispatch] = (0, react_1.useReducer)(reducers_1.toastsReducer, { list: [] });
+    const [portalSlot, setPortalSlot] = (0, react_1.useReducer)(reducers_1.genericReducer, null);
+    const addToast = (toast) => toastsDispatch({ type: 'add', toast });
+    const removeToast = (id) => toastsDispatch({ type: 'remove', toast: { id } });
+    const context = { toasts, addToast, removeToast, setPortalSlot };
     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,
@@ -52,6 +53,7 @@ const VuiProvider = ({ children, globalStyle = true, resetCSS = true, theme = th
                 react_1.default.createElement(popoverStyle_1.default, null),
                 children,
                 react_1.default.createElement(portal_1.Portal, null,
+                    portalSlot,
                     react_1.default.createElement(toast_1.Toaster, null))))));
 };
 exports.default = VuiProvider;

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

@@ -11,6 +11,5 @@ export * from './dialogHeader';
 export * from './dialogIcon';
 export * from './dialogSubmitButton';
 export * from './dialogTitle';
-export * from './showConfirm';
-export * from './showPrompt';
+export * from './useDialog';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/dialog/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AACxB,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAA;AAC5C,cAAc,gBAAgB,CAAA;AAC9B,cAAc,cAAc,CAAA;AAC5B,cAAc,sBAAsB,CAAA;AACpC,cAAc,qBAAqB,CAAA;AACnC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,cAAc,CAAA;AAC5B,cAAc,sBAAsB,CAAA;AACpC,cAAc,eAAe,CAAA;AAC7B,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/dialog/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AACxB,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAA;AAC5C,cAAc,gBAAgB,CAAA;AAC9B,cAAc,cAAc,CAAA;AAC5B,cAAc,sBAAsB,CAAA;AACpC,cAAc,qBAAqB,CAAA;AACnC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,cAAc,CAAA;AAC5B,cAAc,sBAAsB,CAAA;AACpC,cAAc,eAAe,CAAA;AAC7B,cAAc,aAAa,CAAA"}

package/dist/cjs/dialog/index.js

@@ -32,5 +32,4 @@ __exportStar(require("./dialogHeader"), exports);
 __exportStar(require("./dialogIcon"), exports);
 __exportStar(require("./dialogSubmitButton"), exports);
 __exportStar(require("./dialogTitle"), exports);
-__exportStar(require("./showConfirm"), exports);
-__exportStar(require("./showPrompt"), exports);
+__exportStar(require("./useDialog"), exports);

package/dist/cjs/dialog/useDialog.d.ts

@@ -0,0 +1,5 @@
+export declare const useDialog: () => {
+    showConfirm: (title: string, message: string) => Promise<boolean>;
+    showPrompt: (title: string, value?: string) => Promise<string | false>;
+};
+//# sourceMappingURL=useDialog.d.ts.map

package/dist/cjs/dialog/useDialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDialog.d.ts","sourceRoot":"","sources":["../../../src/dialog/useDialog.tsx"],"names":[],"mappings":"AAOA,eAAO,MAAM,SAAS;yBAGQ,MAAM,WAAW,MAAM,KAAG,QAAQ,OAAO,CAAC;wBA0B3C,MAAM,qBAAe,QAAQ,MAAM,GAAG,KAAK,CAAC;CAgCxE,CAAA"}

package/dist/cjs/dialog/useDialog.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.useDialog = void 0;
+const react_1 = __importDefault(require("react"));
+const box_1 = require("../box");
+const core_1 = require("../core");
+const dialog_1 = require("../dialog");
+const input_1 = require("../input");
+const useDialog = () => {
+    const { setPortalSlot } = (0, core_1.useVuiContext)();
+    const showConfirm = (title, message) => new Promise(resolve => setPortalSlot(react_1.default.createElement(dialog_1.Dialog, { body: message, cancelButton: {
+            onClick: () => {
+                resolve(false);
+                setPortalSlot(null);
+            },
+            text: 'Cancel'
+        }, closeButton: false, isOpen: true, submitButton: {
+            onClick: () => {
+                resolve(true);
+                setPortalSlot(null);
+            },
+            text: 'Confirm'
+        }, title: title })));
+    const showPrompt = (title, value = '') => new Promise(resolve => {
+        let inputValue = value;
+        setPortalSlot(react_1.default.createElement(dialog_1.Dialog, { body: react_1.default.createElement(box_1.Box, { px: 3, py: 2 },
+                react_1.default.createElement(input_1.Input, { defaultValue: value, onChange: e => (inputValue = e.target.value) })), cancelButton: {
+                onClick: () => {
+                    resolve(false);
+                    setPortalSlot(null);
+                },
+                text: 'Cancel'
+            }, closeButton: false, isOpen: true, submitButton: {
+                onClick: () => {
+                    resolve(inputValue);
+                    setPortalSlot(null);
+                },
+                text: 'Submit'
+            }, title: title }));
+    });
+    return { showConfirm, showPrompt };
+};
+exports.useDialog = useDialog;

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

@@ -2,7 +2,7 @@ import { ReactNode } from 'react';
 import { ToastOptions } from './toast.types';
 export declare const useToast: () => {
     showToast: (options?: ToastOptions | undefined) => void;
-    hideToast: (id: string) => any;
+    hideToast: (id: string) => void;
     showInfo: (text: ReactNode) => void;
     showSuccess: (text: ReactNode) => void;
     showWarning: (text: ReactNode) => void;

package/dist/cjs/utils/dom.d.ts

@@ -2,9 +2,4 @@ export declare const addElement: (id: string) => HTMLElement;
 export declare const removeElement: (id: string) => void;
 export declare const addBodyClass: (className: string) => void;
 export declare const removeBodyClass: (className: string) => void;
-export declare const removeElements: (className: string) => void;
-export declare const addElementClass: (id: string, className: string) => void;
-export declare const removeElementClass: (id: string, className: string) => void;
-export declare const appendToBody: (rootElem: HTMLElement) => HTMLElement;
-export declare const addContainer: (id: string) => void;
 //# sourceMappingURL=dom.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"dom.d.ts","sourceRoot":"","sources":["../../../src/utils/dom.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,UAAU,OAAQ,MAAM,KAAG,WAIvC,CAAA;AAED,eAAO,MAAM,aAAa,OAAQ,MAAM,KAAG,IAG1C,CAAA;AAED,eAAO,MAAM,YAAY,cAAe,MAAM,KAAG,IAA8C,CAAA;AAE/F,eAAO,MAAM,eAAe,cAAe,MAAM,KAAG,IAAiD,CAAA;AAErG,eAAO,MAAM,cAAc,cAAe,MAAM,KAAG,IAGlD,CAAA;AAED,eAAO,MAAM,eAAe,OAAQ,MAAM,aAAa,MAAM,KAAG,IAG/D,CAAA;AAED,eAAO,MAAM,kBAAkB,OAAQ,MAAM,aAAa,MAAM,KAAG,IAGlE,CAAA;AAED,eAAO,MAAM,YAAY,aAAc,WAAW,gBAAwC,CAAA;AAE1F,eAAO,MAAM,YAAY,OAAQ,MAAM,KAAG,IAGzC,CAAA"}
+{"version":3,"file":"dom.d.ts","sourceRoot":"","sources":["../../../src/utils/dom.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,UAAU,OAAQ,MAAM,KAAG,WAIvC,CAAA;AAED,eAAO,MAAM,aAAa,OAAQ,MAAM,KAAG,IAG1C,CAAA;AAED,eAAO,MAAM,YAAY,cAAe,MAAM,KAAG,IAA8C,CAAA;AAE/F,eAAO,MAAM,eAAe,cAAe,MAAM,KAAG,IAAiD,CAAA"}

package/dist/cjs/utils/dom.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.addContainer = exports.appendToBody = exports.removeElementClass = exports.addElementClass = exports.removeElements = exports.removeBodyClass = exports.addBodyClass = exports.removeElement = exports.addElement = void 0;
+exports.removeBodyClass = exports.addBodyClass = exports.removeElement = exports.addElement = void 0;
 const addElement = (id) => {
     const element = document.createElement('div');
     element.setAttribute('id', id);
@@ -17,30 +17,3 @@ const addBodyClass = (className) => document.body.classList.add(className);
 exports.addBodyClass = addBodyClass;
 const removeBodyClass = (className) => document.body.classList.remove(className);
 exports.removeBodyClass = removeBodyClass;
-const removeElements = (className) => {
-    var _a, _b;
-    const elements = document.getElementsByClassName(className);
-    for (let i = 0, len = elements.length; i < len; i++)
-        (_b = (_a = elements[i]) === null || _a === void 0 ? void 0 : _a.remove) === null || _b === void 0 ? void 0 : _b.call(_a);
-};
-exports.removeElements = removeElements;
-const addElementClass = (id, className) => {
-    var _a, _b;
-    const element = document.getElementById(id);
-    (_b = (_a = element === null || element === void 0 ? void 0 : element.classList) === null || _a === void 0 ? void 0 : _a.add) === null || _b === void 0 ? void 0 : _b.call(_a, className);
-};
-exports.addElementClass = addElementClass;
-const removeElementClass = (id, className) => {
-    var _a, _b;
-    const element = document.getElementById(id);
-    (_b = (_a = element === null || element === void 0 ? void 0 : element.classList) === null || _a === void 0 ? void 0 : _a.remove) === null || _b === void 0 ? void 0 : _b.call(_a, className);
-};
-exports.removeElementClass = removeElementClass;
-const appendToBody = (rootElem) => document.body.appendChild(rootElem);
-exports.appendToBody = appendToBody;
-const addContainer = (id) => {
-    const toastContainer = document.getElementById(id);
-    if (!toastContainer)
-        (0, exports.appendToBody)((0, exports.addElement)(id));
-};
-exports.addContainer = addContainer;

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

@@ -1,4 +1,4 @@
-import React, { DependencyList, ReactElement, RefObject } from 'react';
+import React, { DependencyList, RefObject } from 'react';
 import { AnyFunction, CreateContextOptions, CreateContextReturn } from './types';
 declare type ReactRef<T> = React.Ref<T> | React.RefObject<T> | React.MutableRefObject<T>;
 /**
@@ -36,7 +36,5 @@ export declare function useIds(id: string, prefixes: string[]): string[];
  * Provides a function, which can be called to check if component using the hook is mounted or unmounted.
  */
 export declare function useIsMounted(): () => boolean;
-/** A resolver to render a DOM node depending on React major version. */
-export declare function reactDomRender(id: string, content: ReactElement): void;
 export {};
 //# sourceMappingURL=react.d.ts.map

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,QAI/D"}
+{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../../../src/utils/react.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EACZ,cAAc,EAEd,SAAS,EAMV,MAAM,OAAO,CAAA;AAId,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"}

package/dist/cjs/utils/react.js

@@ -23,13 +23,9 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __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 });
-exports.reactDomRender = exports.useIsMounted = exports.useIds = exports.useControlled = exports.useClickOutside = exports.useCallbackRef = exports.mergeRefs = exports.createContext = exports.assignRef = void 0;
+exports.useIsMounted = exports.useIds = exports.useControlled = exports.useClickOutside = exports.useCallbackRef = exports.mergeRefs = exports.createContext = exports.assignRef = void 0;
 const react_1 = __importStar(require("react"));
-const react_dom_1 = __importDefault(require("react-dom"));
 const assertion_1 = require("./assertion");
 const function_1 = require("./function");
 /**
@@ -148,11 +144,3 @@ function useIsMounted() {
     return (0, react_1.useCallback)(() => isMounted.current, []);
 }
 exports.useIsMounted = useIsMounted;
-/** A resolver to render a DOM node depending on React major version. */
-function reactDomRender(id, content) {
-    const wrapper = document.getElementById(id);
-    if (!wrapper)
-        return;
-    react_dom_1.default.render(content, wrapper);
-}
-exports.reactDomRender = reactDomRender;

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

@@ -1,5 +1,14 @@
-import { ReactNode } from 'react';
+import { Dispatch, ReactNode } from 'react';
+import { ToastListItem } from '../toast/toast.types';
 export interface ChildrenProp {
     children?: ReactNode;
 }
+export interface VuiContext {
+    toasts: {
+        list: ToastListItem[];
+    };
+    addToast: (toast: ToastListItem) => void;
+    removeToast: (id: string) => void;
+    setPortalSlot: Dispatch<ReactNode>;
+}
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/core/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,MAAM,WAAW,YAAY;IAC3B,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/core/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAE3C,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAA;AAEpD,MAAM,WAAW,YAAY;IAC3B,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB;AAED,MAAM,WAAW,UAAU;IACzB,MAAM,EAAE;QAAE,IAAI,EAAE,aAAa,EAAE,CAAA;KAAE,CAAA;IACjC,QAAQ,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAA;IACxC,WAAW,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,aAAa,EAAE,QAAQ,CAAC,SAAS,CAAC,CAAA;CACnC"}

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

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

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

@@ -1 +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"}
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../../src/core/vuiProvider/context.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAErC,QAAA,MAAO,kBAAkB,wCAAE,aAAa,kBAAmD,CAAA;AAE3F,OAAO,EAAE,kBAAkB,EAAE,aAAa,EAAE,CAAA"}

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

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

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

@@ -1 +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"}
+{"version":3,"file":"reducers.d.ts","sourceRoot":"","sources":["../../../../src/core/vuiProvider/reducers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAA;AAEvD,eAAO,MAAM,aAAa,UACjB;IAAE,IAAI,EAAE,aAAa,EAAE,CAAA;CAAE,UACxB;IAAE,IAAI,EAAE,KAAK,GAAG,QAAQ,CAAC;IAAC,KAAK,EAAE,aAAa,CAAA;CAAE;;CAazD,CAAA;AAED,eAAO,MAAM,cAAc,UAAW,GAAG,UAAU,GAAG,QAAqB,CAAA"}

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

@@ -1,4 +1,4 @@
-export function toastsReducer(state, action) {
+export const toastsReducer = (state, action) => {
     switch (action.type) {
         case 'add': {
             return { list: [action.toast, ...state.list] };
@@ -10,4 +10,5 @@ export function toastsReducer(state, action) {
             throw new Error(`Unhandled action type: ${action.type}`);
         }
     }
-}
+};
+export const genericReducer = (state, action) => (state = action);

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,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"}
+{"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,CA+BpD,CAAA;AAED,eAAe,WAAW,CAAA"}

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

@@ -7,14 +7,15 @@ import defaultTheme from '../../theme';
 import { Toaster } from '../../toast';
 import { VuiContextProvider } from './context';
 import GlobalStyle from './globalStyle';
-import { toastsReducer } from './reducers';
+import { genericReducer, 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 }) => {
-    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 };
+    const [toasts, toastsDispatch] = useReducer(toastsReducer, { list: [] });
+    const [portalSlot, setPortalSlot] = useReducer(genericReducer, null);
+    const addToast = (toast) => toastsDispatch({ type: 'add', toast });
+    const removeToast = (id) => toastsDispatch({ type: 'remove', toast: { id } });
+    const context = { toasts, addToast, removeToast, setPortalSlot };
     return (React.createElement(VuiContextProvider, { value: context },
         React.createElement(ThemeProvider, { theme: theme },
             React.createElement(React.Fragment, null,
@@ -24,6 +25,7 @@ const VuiProvider = ({ children, globalStyle = true, resetCSS = true, theme = de
                 React.createElement(PopoverStyle, null),
                 children,
                 React.createElement(Portal, null,
+                    portalSlot,
                     React.createElement(Toaster, null))))));
 };
 export default VuiProvider;

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

@@ -11,6 +11,5 @@ export * from './dialogHeader';
 export * from './dialogIcon';
 export * from './dialogSubmitButton';
 export * from './dialogTitle';
-export * from './showConfirm';
-export * from './showPrompt';
+export * from './useDialog';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/dialog/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AACxB,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAA;AAC5C,cAAc,gBAAgB,CAAA;AAC9B,cAAc,cAAc,CAAA;AAC5B,cAAc,sBAAsB,CAAA;AACpC,cAAc,qBAAqB,CAAA;AACnC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,cAAc,CAAA;AAC5B,cAAc,sBAAsB,CAAA;AACpC,cAAc,eAAe,CAAA;AAC7B,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/dialog/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AACxB,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAA;AAC5C,cAAc,gBAAgB,CAAA;AAC9B,cAAc,cAAc,CAAA;AAC5B,cAAc,sBAAsB,CAAA;AACpC,cAAc,qBAAqB,CAAA;AACnC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,cAAc,CAAA;AAC5B,cAAc,sBAAsB,CAAA;AACpC,cAAc,eAAe,CAAA;AAC7B,cAAc,aAAa,CAAA"}

package/dist/esm/dialog/index.js

@@ -11,5 +11,4 @@ export * from './dialogHeader';
 export * from './dialogIcon';
 export * from './dialogSubmitButton';
 export * from './dialogTitle';
-export * from './showConfirm';
-export * from './showPrompt';
+export * from './useDialog';

package/dist/esm/dialog/useDialog.d.ts

@@ -0,0 +1,5 @@
+export declare const useDialog: () => {
+    showConfirm: (title: string, message: string) => Promise<boolean>;
+    showPrompt: (title: string, value?: string) => Promise<string | false>;
+};
+//# sourceMappingURL=useDialog.d.ts.map

package/dist/esm/dialog/useDialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDialog.d.ts","sourceRoot":"","sources":["../../../src/dialog/useDialog.tsx"],"names":[],"mappings":"AAOA,eAAO,MAAM,SAAS;yBAGQ,MAAM,WAAW,MAAM,KAAG,QAAQ,OAAO,CAAC;wBA0B3C,MAAM,qBAAe,QAAQ,MAAM,GAAG,KAAK,CAAC;CAgCxE,CAAA"}

package/dist/esm/dialog/useDialog.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Box } from '../box';
+import { useVuiContext } from '../core';
+import { Dialog } from '../dialog';
+import { Input } from '../input';
+export const useDialog = () => {
+    const { setPortalSlot } = useVuiContext();
+    const showConfirm = (title, message) => new Promise(resolve => setPortalSlot(React.createElement(Dialog, { body: message, cancelButton: {
+            onClick: () => {
+                resolve(false);
+                setPortalSlot(null);
+            },
+            text: 'Cancel'
+        }, closeButton: false, isOpen: true, submitButton: {
+            onClick: () => {
+                resolve(true);
+                setPortalSlot(null);
+            },
+            text: 'Confirm'
+        }, title: title })));
+    const showPrompt = (title, value = '') => new Promise(resolve => {
+        let inputValue = value;
+        setPortalSlot(React.createElement(Dialog, { body: React.createElement(Box, { px: 3, py: 2 },
+                React.createElement(Input, { defaultValue: value, onChange: e => (inputValue = e.target.value) })), cancelButton: {
+                onClick: () => {
+                    resolve(false);
+                    setPortalSlot(null);
+                },
+                text: 'Cancel'
+            }, closeButton: false, isOpen: true, submitButton: {
+                onClick: () => {
+                    resolve(inputValue);
+                    setPortalSlot(null);
+                },
+                text: 'Submit'
+            }, title: title }));
+    });
+    return { showConfirm, showPrompt };
+};

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

@@ -2,7 +2,7 @@ import { ReactNode } from 'react';
 import { ToastOptions } from './toast.types';
 export declare const useToast: () => {
     showToast: (options?: ToastOptions | undefined) => void;
-    hideToast: (id: string) => any;
+    hideToast: (id: string) => void;
     showInfo: (text: ReactNode) => void;
     showSuccess: (text: ReactNode) => void;
     showWarning: (text: ReactNode) => void;

package/dist/esm/utils/dom.d.ts

@@ -2,9 +2,4 @@ export declare const addElement: (id: string) => HTMLElement;
 export declare const removeElement: (id: string) => void;
 export declare const addBodyClass: (className: string) => void;
 export declare const removeBodyClass: (className: string) => void;
-export declare const removeElements: (className: string) => void;
-export declare const addElementClass: (id: string, className: string) => void;
-export declare const removeElementClass: (id: string, className: string) => void;
-export declare const appendToBody: (rootElem: HTMLElement) => HTMLElement;
-export declare const addContainer: (id: string) => void;
 //# sourceMappingURL=dom.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"dom.d.ts","sourceRoot":"","sources":["../../../src/utils/dom.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,UAAU,OAAQ,MAAM,KAAG,WAIvC,CAAA;AAED,eAAO,MAAM,aAAa,OAAQ,MAAM,KAAG,IAG1C,CAAA;AAED,eAAO,MAAM,YAAY,cAAe,MAAM,KAAG,IAA8C,CAAA;AAE/F,eAAO,MAAM,eAAe,cAAe,MAAM,KAAG,IAAiD,CAAA;AAErG,eAAO,MAAM,cAAc,cAAe,MAAM,KAAG,IAGlD,CAAA;AAED,eAAO,MAAM,eAAe,OAAQ,MAAM,aAAa,MAAM,KAAG,IAG/D,CAAA;AAED,eAAO,MAAM,kBAAkB,OAAQ,MAAM,aAAa,MAAM,KAAG,IAGlE,CAAA;AAED,eAAO,MAAM,YAAY,aAAc,WAAW,gBAAwC,CAAA;AAE1F,eAAO,MAAM,YAAY,OAAQ,MAAM,KAAG,IAGzC,CAAA"}
+{"version":3,"file":"dom.d.ts","sourceRoot":"","sources":["../../../src/utils/dom.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,UAAU,OAAQ,MAAM,KAAG,WAIvC,CAAA;AAED,eAAO,MAAM,aAAa,OAAQ,MAAM,KAAG,IAG1C,CAAA;AAED,eAAO,MAAM,YAAY,cAAe,MAAM,KAAG,IAA8C,CAAA;AAE/F,eAAO,MAAM,eAAe,cAAe,MAAM,KAAG,IAAiD,CAAA"}

package/dist/esm/utils/dom.js

@@ -9,22 +9,3 @@ export const removeElement = (id) => {
 };
 export const addBodyClass = (className) => document.body.classList.add(className);
 export const removeBodyClass = (className) => document.body.classList.remove(className);
-export const removeElements = (className) => {
-    const elements = document.getElementsByClassName(className);
-    for (let i = 0, len = elements.length; i < len; i++)
-        elements[i]?.remove?.();
-};
-export const addElementClass = (id, className) => {
-    const element = document.getElementById(id);
-    element?.classList?.add?.(className);
-};
-export const removeElementClass = (id, className) => {
-    const element = document.getElementById(id);
-    element?.classList?.remove?.(className);
-};
-export const appendToBody = (rootElem) => document.body.appendChild(rootElem);
-export const addContainer = (id) => {
-    const toastContainer = document.getElementById(id);
-    if (!toastContainer)
-        appendToBody(addElement(id));
-};

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

@@ -1,4 +1,4 @@
-import React, { DependencyList, ReactElement, RefObject } from 'react';
+import React, { DependencyList, RefObject } from 'react';
 import { AnyFunction, CreateContextOptions, CreateContextReturn } from './types';
 declare type ReactRef<T> = React.Ref<T> | React.RefObject<T> | React.MutableRefObject<T>;
 /**
@@ -36,7 +36,5 @@ export declare function useIds(id: string, prefixes: string[]): string[];
  * Provides a function, which can be called to check if component using the hook is mounted or unmounted.
  */
 export declare function useIsMounted(): () => boolean;
-/** A resolver to render a DOM node depending on React major version. */
-export declare function reactDomRender(id: string, content: ReactElement): void;
 export {};
 //# sourceMappingURL=react.d.ts.map

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,QAI/D"}
+{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../../../src/utils/react.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EACZ,cAAc,EAEd,SAAS,EAMV,MAAM,OAAO,CAAA;AAId,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"}

package/dist/esm/utils/react.js

@@ -1,6 +1,5 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import ReactDOM from 'react-dom';
 import { isArray, isFunction } from './assertion';
 import { runIfFn } from './function';
 /**
@@ -111,10 +110,3 @@ export function useIsMounted() {
     }, []);
     return useCallback(() => isMounted.current, []);
 }
-/** A resolver to render a DOM node depending on React major version. */
-export function reactDomRender(id, content) {
-    const wrapper = document.getElementById(id);
-    if (!wrapper)
-        return;
-    ReactDOM.render(content, wrapper);
-}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "1.2.0-beta.2",
+  "version": "1.2.0",
   "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/types.ts

@@ -1,5 +1,14 @@
-import { ReactNode } from 'react'
+import { Dispatch, ReactNode } from 'react'
+
+import { ToastListItem } from '../toast/toast.types'
 
 export interface ChildrenProp {
   children?: ReactNode
 }
+
+export interface VuiContext {
+  toasts: { list: ToastListItem[] }
+  addToast: (toast: ToastListItem) => void
+  removeToast: (id: string) => void
+  setPortalSlot: Dispatch<ReactNode>
+}

package/src/core/vuiProvider/context.ts

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

package/src/core/vuiProvider/reducers.ts

@@ -1,9 +1,9 @@
 import { ToastListItem } from '../../toast/toast.types'
 
-export function toastsReducer(
+export const toastsReducer = (
   state: { list: ToastListItem[] },
   action: { type: 'add' | 'remove'; toast: ToastListItem }
-) {
+) => {
   switch (action.type) {
     case 'add': {
       return { list: [action.toast, ...state.list] }
@@ -16,3 +16,5 @@ export function toastsReducer(
     }
   }
 }
+
+export const genericReducer = (state: any, action: any) => (state = action)

package/src/core/vuiProvider/vuiProvider.tsx

@@ -10,7 +10,7 @@ import { ToastListItem } from '../../toast/toast.types'
 import { ChildrenProp } from '../types'
 import { VuiContextProvider } from './context'
 import GlobalStyle from './globalStyle'
-import { toastsReducer } from './reducers'
+import { genericReducer, toastsReducer } from './reducers'
 import ResetCSS from './resetCSS'
 
 type VuiProviderProps = {
@@ -29,12 +29,13 @@ const VuiProvider: FC<VuiProviderProps & ChildrenProp> = ({
   resetCSS = true,
   theme = defaultTheme as VuiTheme
 }) => {
-  const [toasts, dispatch] = useReducer(toastsReducer, { list: [] })
+  const [toasts, toastsDispatch] = useReducer(toastsReducer, { list: [] })
+  const [portalSlot, setPortalSlot] = useReducer(genericReducer, null)
 
-  const addToast = (toast: ToastListItem) => dispatch({ type: 'add', toast })
-  const removeToast = (id: string) => dispatch({ type: 'remove', toast: { id } })
+  const addToast = (toast: ToastListItem) => toastsDispatch({ type: 'add', toast })
+  const removeToast = (id: string) => toastsDispatch({ type: 'remove', toast: { id } })
 
-  const context = { toasts, addToast, removeToast }
+  const context = { toasts, addToast, removeToast, setPortalSlot }
 
   return (
     <VuiContextProvider value={context}>
@@ -46,6 +47,7 @@ const VuiProvider: FC<VuiProviderProps & ChildrenProp> = ({
           <PopoverStyle />
           {children}
           <Portal>
+            {portalSlot}
             <Toaster />
           </Portal>
         </>

package/src/dialog/index.ts

@@ -11,5 +11,4 @@ export * from './dialogHeader'
 export * from './dialogIcon'
 export * from './dialogSubmitButton'
 export * from './dialogTitle'
-export * from './showConfirm'
-export * from './showPrompt'
+export * from './useDialog'

package/src/dialog/useDialog.tsx

@@ -0,0 +1,69 @@
+import React from 'react'
+
+import { Box } from '../box'
+import { useVuiContext } from '../core'
+import { Dialog } from '../dialog'
+import { Input } from '../input'
+
+export const useDialog = () => {
+  const { setPortalSlot } = useVuiContext()
+
+  const showConfirm = (title: string, message: string): Promise<boolean> =>
+    new Promise(resolve =>
+      setPortalSlot(
+        <Dialog
+          body={message}
+          cancelButton={{
+            onClick: () => {
+              resolve(false)
+              setPortalSlot(null)
+            },
+            text: 'Cancel'
+          }}
+          closeButton={false}
+          isOpen
+          submitButton={{
+            onClick: () => {
+              resolve(true)
+              setPortalSlot(null)
+            },
+            text: 'Confirm'
+          }}
+          title={title}
+        />
+      )
+    )
+
+  const showPrompt = (title: string, value = ''): Promise<string | false> =>
+    new Promise(resolve => {
+      let inputValue = value
+      setPortalSlot(
+        <Dialog
+          body={
+            <Box px={3} py={2}>
+              <Input defaultValue={value} onChange={e => (inputValue = e.target.value)} />
+            </Box>
+          }
+          cancelButton={{
+            onClick: () => {
+              resolve(false)
+              setPortalSlot(null)
+            },
+            text: 'Cancel'
+          }}
+          closeButton={false}
+          isOpen
+          submitButton={{
+            onClick: () => {
+              resolve(inputValue)
+              setPortalSlot(null)
+            },
+            text: 'Submit'
+          }}
+          title={title}
+        />
+      )
+    })
+
+  return { showConfirm, showPrompt }
+}

package/src/utils/dom.ts

@@ -12,25 +12,3 @@ export const removeElement = (id: string): void => {
 export const addBodyClass = (className: string): void => document.body.classList.add(className)
 
 export const removeBodyClass = (className: string): void => document.body.classList.remove(className)
-
-export const removeElements = (className: string): void => {
-  const elements = document.getElementsByClassName(className)
-  for (let i = 0, len = elements.length; i < len; i++) elements[i]?.remove?.()
-}
-
-export const addElementClass = (id: string, className: string): void => {
-  const element = document.getElementById(id)
-  element?.classList?.add?.(className)
-}
-
-export const removeElementClass = (id: string, className: string): void => {
-  const element = document.getElementById(id)
-  element?.classList?.remove?.(className)
-}
-
-export const appendToBody = (rootElem: HTMLElement) => document.body.appendChild(rootElem)
-
-export const addContainer = (id: string): void => {
-  const toastContainer = document.getElementById(id)
-  if (!toastContainer) appendToBody(addElement(id))
-}

package/src/utils/react.ts

@@ -3,7 +3,6 @@
 import React, {
   DependencyList,
   Dispatch,
-  ReactElement,
   RefObject,
   SetStateAction,
   useCallback,
@@ -11,7 +10,6 @@ import React, {
   useRef,
   useState
 } from 'react'
-import ReactDOM from 'react-dom'
 
 import { isArray, isFunction } from './assertion'
 import { runIfFn } from './function'
@@ -172,10 +170,3 @@ export function useIsMounted() {
 
   return useCallback(() => isMounted.current, [])
 }
-
-/** A resolver to render a DOM node depending on React major version. */
-export function reactDomRender(id: string, content: ReactElement) {
-  const wrapper = document.getElementById(id)
-  if (!wrapper) return
-  ReactDOM.render(content, wrapper)
-}

package/dist/cjs/dialog/showConfirm.d.ts

@@ -1,2 +0,0 @@
-export declare const showConfirm: (title: string, message: string) => Promise<boolean>;
-//# sourceMappingURL=showConfirm.d.ts.map

package/dist/cjs/dialog/showConfirm.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"showConfirm.d.ts","sourceRoot":"","sources":["../../../src/dialog/showConfirm.tsx"],"names":[],"mappings":"AAOA,eAAO,MAAM,WAAW,UAAW,MAAM,WAAW,MAAM,KAAG,QAAQ,OAAO,CAqC3E,CAAA"}

package/dist/cjs/dialog/showConfirm.js

@@ -1,37 +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.showConfirm = void 0;
-const react_1 = __importDefault(require("react"));
-const core_1 = require("../core");
-const dialog_1 = require("../dialog");
-const utils_1 = require("../utils");
-const consts_1 = require("./consts");
-const showConfirm = (title, message) => {
-    (0, utils_1.addContainer)(consts_1.containerId);
-    const hide = () => {
-        (0, utils_1.removeElement)(consts_1.containerId);
-        (0, utils_1.removeElements)(consts_1.modalClass);
-        (0, utils_1.removeBodyClass)(consts_1.noScrollClass);
-    };
-    return new Promise(resolve => {
-        const confirmDialog = (react_1.default.createElement(core_1.VuiProvider, null,
-            react_1.default.createElement(dialog_1.Dialog, { body: message, cancelButton: {
-                    onClick: () => {
-                        resolve(false);
-                        hide();
-                    },
-                    text: 'Cancel'
-                }, closeButton: false, isOpen: true, submitButton: {
-                    onClick: () => {
-                        resolve(true);
-                        hide();
-                    },
-                    text: 'Confirm'
-                }, title: title })));
-        (0, utils_1.reactDomRender)(consts_1.containerId, confirmDialog);
-    });
-};
-exports.showConfirm = showConfirm;

package/dist/cjs/dialog/showPrompt.d.ts

@@ -1,2 +0,0 @@
-export declare const showPrompt: (title: string, value?: string) => Promise<string | false>;
-//# sourceMappingURL=showPrompt.d.ts.map

package/dist/cjs/dialog/showPrompt.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"showPrompt.d.ts","sourceRoot":"","sources":["../../../src/dialog/showPrompt.tsx"],"names":[],"mappings":"AASA,eAAO,MAAM,UAAU,UAAW,MAAM,qBAAe,QAAQ,MAAM,GAAG,KAAK,CA6C5E,CAAA"}

package/dist/cjs/dialog/showPrompt.js

@@ -1,42 +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.showPrompt = void 0;
-const react_1 = __importDefault(require("react"));
-const box_1 = require("../box");
-const core_1 = require("../core");
-const dialog_1 = require("../dialog");
-const input_1 = require("../input");
-const utils_1 = require("../utils");
-const consts_1 = require("./consts");
-const showPrompt = (title, value = '') => {
-    const state = { value };
-    const setValue = (value) => (state.value = value);
-    (0, utils_1.addContainer)(consts_1.containerId);
-    const hide = () => {
-        (0, utils_1.removeElement)(consts_1.containerId);
-        (0, utils_1.removeElements)(consts_1.modalClass);
-        (0, utils_1.removeBodyClass)(consts_1.noScrollClass);
-    };
-    return new Promise(resolve => {
-        const promptDialog = (react_1.default.createElement(core_1.VuiProvider, null,
-            react_1.default.createElement(dialog_1.Dialog, { body: react_1.default.createElement(box_1.Box, { px: 3, py: 2 },
-                    react_1.default.createElement(input_1.Input, { defaultValue: value, onChange: e => setValue(e.target.value) })), cancelButton: {
-                    onClick: () => {
-                        resolve(false);
-                        hide();
-                    },
-                    text: 'Cancel'
-                }, closeButton: false, isOpen: true, submitButton: {
-                    onClick: () => {
-                        resolve(state.value);
-                        hide();
-                    },
-                    text: 'Submit'
-                }, title: title })));
-        (0, utils_1.reactDomRender)(consts_1.containerId, promptDialog);
-    });
-};
-exports.showPrompt = showPrompt;

package/dist/esm/dialog/showConfirm.d.ts

@@ -1,2 +0,0 @@
-export declare const showConfirm: (title: string, message: string) => Promise<boolean>;
-//# sourceMappingURL=showConfirm.d.ts.map

package/dist/esm/dialog/showConfirm.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"showConfirm.d.ts","sourceRoot":"","sources":["../../../src/dialog/showConfirm.tsx"],"names":[],"mappings":"AAOA,eAAO,MAAM,WAAW,UAAW,MAAM,WAAW,MAAM,KAAG,QAAQ,OAAO,CAqC3E,CAAA"}

package/dist/esm/dialog/showConfirm.js

@@ -1,30 +0,0 @@
-import React from 'react';
-import { VuiProvider } from '../core';
-import { Dialog } from '../dialog';
-import { addContainer, reactDomRender, removeBodyClass, removeElement, removeElements } from '../utils';
-import { containerId, modalClass, noScrollClass } from './consts';
-export const showConfirm = (title, message) => {
-    addContainer(containerId);
-    const hide = () => {
-        removeElement(containerId);
-        removeElements(modalClass);
-        removeBodyClass(noScrollClass);
-    };
-    return new Promise(resolve => {
-        const confirmDialog = (React.createElement(VuiProvider, null,
-            React.createElement(Dialog, { body: message, cancelButton: {
-                    onClick: () => {
-                        resolve(false);
-                        hide();
-                    },
-                    text: 'Cancel'
-                }, closeButton: false, isOpen: true, submitButton: {
-                    onClick: () => {
-                        resolve(true);
-                        hide();
-                    },
-                    text: 'Confirm'
-                }, title: title })));
-        reactDomRender(containerId, confirmDialog);
-    });
-};

package/dist/esm/dialog/showPrompt.d.ts

@@ -1,2 +0,0 @@
-export declare const showPrompt: (title: string, value?: string) => Promise<string | false>;
-//# sourceMappingURL=showPrompt.d.ts.map

package/dist/esm/dialog/showPrompt.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"showPrompt.d.ts","sourceRoot":"","sources":["../../../src/dialog/showPrompt.tsx"],"names":[],"mappings":"AASA,eAAO,MAAM,UAAU,UAAW,MAAM,qBAAe,QAAQ,MAAM,GAAG,KAAK,CA6C5E,CAAA"}

package/dist/esm/dialog/showPrompt.js

@@ -1,35 +0,0 @@
-import React from 'react';
-import { Box } from '../box';
-import { VuiProvider } from '../core';
-import { Dialog } from '../dialog';
-import { Input } from '../input';
-import { addContainer, reactDomRender, removeBodyClass, removeElement, removeElements } from '../utils';
-import { containerId, modalClass, noScrollClass } from './consts';
-export const showPrompt = (title, value = '') => {
-    const state = { value };
-    const setValue = (value) => (state.value = value);
-    addContainer(containerId);
-    const hide = () => {
-        removeElement(containerId);
-        removeElements(modalClass);
-        removeBodyClass(noScrollClass);
-    };
-    return new Promise(resolve => {
-        const promptDialog = (React.createElement(VuiProvider, null,
-            React.createElement(Dialog, { body: React.createElement(Box, { px: 3, py: 2 },
-                    React.createElement(Input, { defaultValue: value, onChange: e => setValue(e.target.value) })), cancelButton: {
-                    onClick: () => {
-                        resolve(false);
-                        hide();
-                    },
-                    text: 'Cancel'
-                }, closeButton: false, isOpen: true, submitButton: {
-                    onClick: () => {
-                        resolve(state.value);
-                        hide();
-                    },
-                    text: 'Submit'
-                }, title: title })));
-        reactDomRender(containerId, promptDialog);
-    });
-};

package/src/dialog/showConfirm.tsx

@@ -1,45 +0,0 @@
-import React from 'react'
-
-import { VuiProvider } from '../core'
-import { Dialog } from '../dialog'
-import { addContainer, reactDomRender, removeBodyClass, removeElement, removeElements } from '../utils'
-import { containerId, modalClass, noScrollClass } from './consts'
-
-export const showConfirm = (title: string, message: string): Promise<boolean> => {
-  addContainer(containerId)
-
-  const hide = () => {
-    removeElement(containerId)
-    removeElements(modalClass)
-    removeBodyClass(noScrollClass)
-  }
-
-  return new Promise(resolve => {
-    const confirmDialog = (
-      <VuiProvider>
-        <Dialog
-          body={message}
-          cancelButton={{
-            onClick: () => {
-              resolve(false)
-              hide()
-            },
-            text: 'Cancel'
-          }}
-          closeButton={false}
-          isOpen
-          submitButton={{
-            onClick: () => {
-              resolve(true)
-              hide()
-            },
-            text: 'Confirm'
-          }}
-          title={title}
-        />
-      </VuiProvider>
-    )
-
-    reactDomRender(containerId, confirmDialog)
-  })
-}

package/src/dialog/showPrompt.tsx

@@ -1,55 +0,0 @@
-import React from 'react'
-
-import { Box } from '../box'
-import { VuiProvider } from '../core'
-import { Dialog } from '../dialog'
-import { Input } from '../input'
-import { addContainer, reactDomRender, removeBodyClass, removeElement, removeElements } from '../utils'
-import { containerId, modalClass, noScrollClass } from './consts'
-
-export const showPrompt = (title: string, value = ''): Promise<string | false> => {
-  const state = { value }
-
-  const setValue = (value: string) => (state.value = value)
-
-  addContainer(containerId)
-
-  const hide = () => {
-    removeElement(containerId)
-    removeElements(modalClass)
-    removeBodyClass(noScrollClass)
-  }
-
-  return new Promise(resolve => {
-    const promptDialog = (
-      <VuiProvider>
-        <Dialog
-          body={
-            <Box px={3} py={2}>
-              <Input defaultValue={value} onChange={e => setValue(e.target.value)} />
-            </Box>
-          }
-          cancelButton={{
-            onClick: () => {
-              resolve(false)
-              hide()
-            },
-            text: 'Cancel'
-          }}
-          closeButton={false}
-          isOpen
-          submitButton={{
-            onClick: () => {
-              resolve(state.value)
-              hide()
-            },
-            text: 'Submit'
-          }}
-          title={title}
-        />
-      </VuiProvider>
-    )
-
-    reactDomRender(containerId, promptDialog)
-  })
-}