react-science 0.19.1

package/lib/components/dropdown-menu/useContextMenuPlacement.js

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useContextMenuPlacement = void 0;
+const react_1 = require("react");
+const react_popper_1 = require("react-popper");
+function useContextMenuPlacement(placement) {
+    const [positionState, setPositionState] = (0, react_1.useState)(null);
+    const handleContextMenu = (0, react_1.useCallback)((event) => {
+        const { clientX, clientY, pageX, pageY } = event;
+        event.preventDefault();
+        setPositionState({
+            clientX,
+            clientY,
+            pageX,
+            pageY,
+        });
+    }, []);
+    const boundingClientRect = (0, react_1.useMemo)(() => {
+        return {
+            top: positionState?.clientY || 0,
+            left: positionState?.clientX || 0,
+            x: positionState?.pageX || 0,
+            y: positionState?.pageY || 0,
+            bottom: 0,
+            right: 0,
+            height: 0,
+            width: 0,
+            toJSON: () => '',
+        };
+    }, [positionState]);
+    const virtualElement = (0, react_1.useMemo)(() => {
+        return {
+            getBoundingClientRect: () => boundingClientRect,
+        };
+    }, [boundingClientRect]);
+    const [popperElement, setPopperElement] = (0, react_1.useState)(null);
+    const { styles, attributes, state } = (0, react_popper_1.usePopper)(virtualElement, popperElement, {
+        placement,
+    });
+    return {
+        setPopperElement,
+        styles,
+        attributes,
+        popperState: state,
+        isPopperElementOpen: positionState !== null,
+        handleContextMenu,
+        closePopperElement: () => {
+            setPositionState(null);
+        },
+    };
+}
+exports.useContextMenuPlacement = useContextMenuPlacement;

package/lib/components/fullscreen/FullscreenContext.js

@@ -0,0 +1,76 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FullScreenProvider = exports.useFullscreen = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/* eslint-disable no-alert */
+const react_1 = require("react");
+const fullscreenContextInit = {
+    isFullScreen: false,
+    toggle: () => { },
+};
+const FullscreenContext = (0, react_1.createContext)(fullscreenContextInit);
+function useFullscreen() {
+    return (0, react_1.useContext)(FullscreenContext);
+}
+exports.useFullscreen = useFullscreen;
+function FullScreenProvider(props) {
+    const [isFullScreen, toggle] = (0, react_1.useReducer)((value) => !value, false);
+    const value = (0, react_1.useMemo)(() => ({ isFullScreen, toggle }), [isFullScreen, toggle]);
+    return ((0, jsx_runtime_1.jsx)(FullscreenContext.Provider, { value: value, children: (0, jsx_runtime_1.jsx)(FullscreenInner, { ...props }) }));
+}
+exports.FullScreenProvider = FullScreenProvider;
+function FullscreenInner(props) {
+    const { children } = props;
+    const { isFullScreen, toggle } = useFullscreen();
+    const ref = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        function onFullscreenChange() {
+            const document = window.document;
+            const value = Boolean(document.fullscreenElement || document.webkitFullscreenElement);
+            if (!value && isFullScreen)
+                toggle();
+        }
+        const div = ref.current;
+        if (!div) {
+            return;
+        }
+        div.addEventListener('fullscreenchange', onFullscreenChange);
+        div.addEventListener('webkitfullscreenchange', onFullscreenChange);
+        return () => {
+            div.removeEventListener('fullscreenchange', onFullscreenChange);
+            div.removeEventListener('webkitfullscreenchange', onFullscreenChange);
+        };
+    }, [isFullScreen, toggle]);
+    (0, react_1.useEffect)(() => {
+        if (isFullScreen && ref.current) {
+            if (ref.current.requestFullscreen) {
+                ref.current.requestFullscreen().catch(() => {
+                    alert('Fullscreen is not supported');
+                });
+            }
+            else if (ref.current.webkitRequestFullscreen) {
+                ref.current.webkitRequestFullscreen()?.catch(() => {
+                    alert('Fullscreen is not supported');
+                });
+            }
+        }
+        const document = window.document;
+        if (!isFullScreen && document.fullscreenElement) {
+            if (document.exitFullscreen) {
+                document.exitFullscreen().catch(() => {
+                    alert("Can't exit fullscreen");
+                });
+            }
+            else if (document.webkitExitFullscreen) {
+                document.webkitExitFullscreen().catch(() => {
+                    alert("Can't exit fullscreen");
+                });
+            }
+        }
+    }, [isFullScreen]);
+    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, style: {
+            width: '100%',
+            height: '100%',
+            backgroundColor: 'white',
+        }, children: children }));
+}

package/lib/components/fullscreen/FullscreenToolbarButton.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FullscreenToolbarButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const fa_1 = require("react-icons/fa");
+const Toolbar_1 = require("../toolbar/Toolbar");
+const FullscreenContext_1 = require("./FullscreenContext");
+function FullscreenToolbarButton() {
+    const { toggle } = (0, FullscreenContext_1.useFullscreen)();
+    return ((0, jsx_runtime_1.jsx)(Toolbar_1.Toolbar.Item, { title: "Full screen", onClick: toggle, children: (0, jsx_runtime_1.jsx)(fa_1.FaExpand, {}) }));
+}
+exports.FullscreenToolbarButton = FullscreenToolbarButton;

package/lib/components/fullscreen/index.js

@@ -0,0 +1,18 @@
+"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 __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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./FullscreenContext"), exports);
+__exportStar(require("./FullscreenToolbarButton"), exports);

package/lib/components/header/Header.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Header = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+/** @jsxImportSource @emotion/react */
+const react_1 = require("@emotion/react");
+const styles = {
+    header: (0, react_1.css)({
+        width: '100%',
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        borderBottom: '1px solid rgb(247, 247, 247);',
+        boxShadow: 'rgb(255, 255, 255) 0px 1px 0px 0px inset',
+    }),
+};
+function Header(props) {
+    return ((0, jsx_runtime_1.jsxs)("div", { css: styles.header, children: [(0, jsx_runtime_1.jsx)("div", { children: props.children[0] }), (0, jsx_runtime_1.jsx)("div", { children: props.children[1] })] }));
+}
+exports.Header = Header;

package/lib/components/header/index.js

@@ -0,0 +1,17 @@
+"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 __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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Header"), exports);

package/lib/components/hooks/index.js

@@ -0,0 +1,22 @@
+"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 __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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./useDoubleClick"), exports);
+__exportStar(require("./useHashSearchParams"), exports);
+__exportStar(require("./useModifiedPopper"), exports);
+__exportStar(require("./useOnClickOutside"), exports);
+__exportStar(require("./useOnOff"), exports);
+__exportStar(require("./useToggle"), exports);

package/lib/components/hooks/useDoubleClick.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDoubleClick = void 0;
+const react_1 = require("react");
+function useDoubleClick({ onClick, onDoubleClick, delay = 250, }) {
+    const timeout = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        return () => {
+            // Cleanup timeout when the component is unmounted.
+            if (timeout.current) {
+                window.clearTimeout(timeout.current);
+            }
+        };
+    }, []);
+    const handleClick = (0, react_1.useCallback)((data) => {
+        if (timeout.current === null) {
+            // No recent click. Start timer to wait for possible double click.
+            timeout.current = window.setTimeout(() => {
+                timeout.current = null;
+                onClick?.(data);
+            }, delay);
+        }
+        else {
+            // A click occured recently. Trigger double click event and stop timer.
+            window.clearTimeout(timeout.current);
+            timeout.current = null;
+            onDoubleClick?.(data);
+        }
+    }, [onClick, onDoubleClick, delay]);
+    return handleClick;
+}
+exports.useDoubleClick = useDoubleClick;

package/lib/components/hooks/useHashSearchParams.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useHashSearchParams = void 0;
+const react_1 = require("react");
+const emptySearchParams = new URLSearchParams();
+const lastValue = {
+    hash: '',
+    searchParams: emptySearchParams,
+};
+function useHashSearchParams() {
+    return (0, react_1.useSyncExternalStore)((onStoreChange) => {
+        function onHashChange() {
+            onStoreChange();
+        }
+        window.addEventListener('hashchange', onHashChange);
+        return () => {
+            window.removeEventListener('hashchange', onHashChange);
+        };
+    }, getHashSearchParams, getHashSearchParamsServer);
+}
+exports.useHashSearchParams = useHashSearchParams;
+function getHashSearchParams() {
+    const hash = window.location.hash;
+    if (lastValue.hash === hash) {
+        return lastValue.searchParams;
+    }
+    lastValue.hash = hash;
+    if (hash.startsWith('#?')) {
+        lastValue.searchParams = new URLSearchParams(hash.slice(1));
+    }
+    else if (hash.startsWith('#%3F') || hash.startsWith('#%3f')) {
+        lastValue.searchParams = new URLSearchParams(decodeURIComponent(hash.slice(1)));
+    }
+    else {
+        lastValue.searchParams = emptySearchParams;
+    }
+    return lastValue.searchParams;
+}
+function getHashSearchParamsServer() {
+    return emptySearchParams;
+}

package/lib/components/hooks/useModifiedPopper.js

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useModifiedPopper = void 0;
+const react_1 = require("react");
+const react_popper_1 = require("react-popper");
+const sameWidthModifier = {
+    name: 'sameWidth',
+    enabled: true,
+    phase: 'beforeWrite',
+    requires: ['computeStyles'],
+    fn: ({ state }) => {
+        state.styles.popper.width = `${state.rects.reference.width}px`;
+    },
+    effect: ({ state }) => {
+        state.elements.popper.style.width = `${state.elements.reference.getBoundingClientRect().width}px`;
+    },
+};
+function getOffsetModifier(offset) {
+    return {
+        name: 'offset',
+        options: {
+            offset: [0, offset],
+        },
+    };
+}
+function useModifiedPopper(options) {
+    const { offset, placement, sameWidth } = options;
+    const [referenceElement, setReferenceElement] = (0, react_1.useState)(null);
+    const [popperElement, setPopperElement] = (0, react_1.useState)(null);
+    const modifiers = [];
+    if (sameWidth) {
+        modifiers.push(sameWidthModifier);
+    }
+    if (offset) {
+        modifiers.push(getOffsetModifier(offset));
+    }
+    const { styles, attributes } = (0, react_popper_1.usePopper)(referenceElement, popperElement, {
+        placement,
+        strategy: 'fixed',
+        modifiers,
+    });
+    return {
+        setReferenceElement,
+        setPopperElement,
+        popperProps: {
+            style: styles.popper,
+            ...attributes.popper,
+        },
+    };
+}
+exports.useModifiedPopper = useModifiedPopper;

package/lib/components/hooks/useOnClickOutside.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useOnClickOutside = void 0;
+const react_1 = require("react");
+const RootLayoutContext_1 = require("../root-layout/RootLayoutContext");
+function useOnClickOutside(ref, handler) {
+    const shadowElement = (0, RootLayoutContext_1.useRootLayoutContext)();
+    (0, react_1.useEffect)(() => {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const listener = (event) => {
+            // Do nothing if clicking ref's element or descendent elements
+            if (!ref.current || ref.current.contains(event.target)) {
+                return;
+            }
+            handler(event);
+        };
+        shadowElement.addEventListener('mousedown', listener);
+        shadowElement.addEventListener('touchstart', listener);
+        return () => {
+            shadowElement.removeEventListener('mousedown', listener);
+            shadowElement.removeEventListener('touchstart', listener);
+        };
+    }, [ref, handler, shadowElement]);
+}
+exports.useOnClickOutside = useOnClickOutside;

package/lib/components/hooks/useOnOff.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useOnOff = void 0;
+const react_1 = require("react");
+function useOnOff(initialValue = false) {
+    const [isOn, setOnOff] = (0, react_1.useState)(initialValue);
+    const setOn = (0, react_1.useCallback)(() => setOnOff(true), []);
+    const setOff = (0, react_1.useCallback)(() => setOnOff(false), []);
+    const toggle = (0, react_1.useCallback)(() => setOnOff(!isOn), [isOn]);
+    return [isOn, setOn, setOff, toggle];
+}
+exports.useOnOff = useOnOff;

package/lib/components/hooks/useToggle.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useToggle = void 0;
+const useOnOff_1 = require("./useOnOff");
+function useToggle(initialValue = false) {
+    const [isOn, , , toggle] = (0, useOnOff_1.useOnOff)(initialValue);
+    return [isOn, toggle];
+}
+exports.useToggle = useToggle;

package/lib/components/index.js

@@ -0,0 +1,47 @@
+"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 __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 __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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ValueRenderers = void 0;
+__exportStar(require("./accordion/index"), exports);
+__exportStar(require("./button/index"), exports);
+__exportStar(require("./color-picker/index"), exports);
+__exportStar(require("./drop-zone/index"), exports);
+__exportStar(require("./dropdown-menu/index"), exports);
+__exportStar(require("./fullscreen/index"), exports);
+__exportStar(require("./header/index"), exports);
+__exportStar(require("./hooks/index"), exports);
+__exportStar(require("./layout-manager/index"), exports);
+__exportStar(require("./modal/index"), exports);
+__exportStar(require("./root-layout/index"), exports);
+__exportStar(require("./spinner/index"), exports);
+__exportStar(require("./split-pane/index"), exports);
+__exportStar(require("./table/index"), exports);
+__exportStar(require("./tabs/index"), exports);
+__exportStar(require("./toolbar/index"), exports);
+__exportStar(require("./utils/index"), exports);
+exports.ValueRenderers = __importStar(require("./value-renderers/index"));

package/lib/components/layout-manager/LayoutManager.js

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LayoutManager = void 0;
+const uuid_1 = require("@lukeed/uuid");
+const react_1 = require("react");
+const Accordion_1 = require("../accordion/Accordion");
+const DropZone_1 = require("../drop-zone/DropZone");
+const Modal_1 = require("../modal/Modal");
+const SplitPane_1 = require("../split-pane/SplitPane");
+const layoutComponents = {
+    SplitPane: SplitPane_1.SplitPane,
+    Accordion: Accordion_1.Accordion,
+    Modal: Modal_1.Modal,
+    DropZone: DropZone_1.DropZone,
+};
+function LayoutManager(props) {
+    const { layout, components } = props;
+    return createLayout(layout, components);
+}
+exports.LayoutManager = LayoutManager;
+function createLayoutComponent(com, components, props = {}) {
+    const { id, component, children, ...compProps } = com;
+    const componentId = id || (0, uuid_1.v4)();
+    const componentNode = findComponent(component, components);
+    if (componentNode) {
+        const componentProps = { id: componentId, ...compProps, ...props };
+        const childrenComp = children && typeof children === 'string'
+            ? children
+            : createElements(children, components);
+        return (0, react_1.createElement)(componentNode, 
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        componentProps, childrenComp);
+    }
+    return null;
+}
+function createLayout(layout, components) {
+    return createLayoutComponent(layout.layout, components);
+}
+function createElements(children, components) {
+    return children?.map((comp, index) => createLayoutComponent(comp, components, { key: index }));
+}
+function findComponent(component, definedComponents) {
+    if (typeof component === 'function')
+        return component;
+    if (typeof component === 'string') {
+        if (definedComponents?.[component])
+            return definedComponents[component];
+        if (layoutComponents[component])
+            return layoutComponents[component];
+    }
+    return null;
+}

package/lib/components/layout-manager/index.js

@@ -0,0 +1,17 @@
+"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 __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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./LayoutManager"), exports);

package/lib/components/modal/ConfirmModal.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConfirmModal = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+/** @jsxImportSource @emotion/react */
+const react_1 = require("@emotion/react");
+const __1 = require("..");
+const useDialog_1 = require("./useDialog");
+function ConfirmModal(props) {
+    const { isOpen, saveText = 'Save', cancelText = 'Cancel', headerColor, maxWidth, onRequestClose, onCancel = onRequestClose, onConfirm, requestCloseOnBackdrop = true, requestCloseOnEsc = true, children, } = props;
+    const { ref, onClick } = (0, useDialog_1.useDialog)({
+        isOpen,
+        requestCloseOnEsc,
+        requestCloseOnBackdrop,
+        onRequestClose,
+    });
+    return ((0, jsx_runtime_1.jsx)("dialog", { ref: ref, style: {
+            display: 'flex',
+            position: 'fixed',
+            backgroundColor: 'transparent',
+        }, css: (0, react_1.css) `
+        ::backdrop: rgba(113, 113, 122, 0.75);
+      `, onClick: onClick, children: isOpen ? ((0, jsx_runtime_1.jsxs)("div", { style: {
+                position: 'relative',
+                display: 'flex',
+                flexDirection: 'column',
+                backgroundColor: 'white',
+                maxHeight: '90%',
+                width: '100%',
+                maxWidth: maxWidth || undefined,
+                borderWidth: 1,
+                borderColor: 'transparent',
+                borderRadius: '0.5rem',
+                boxShadow: '0 0 0 0,0 8px 16px rgba(0, 0, 0, 0.3)',
+                borderTop: `10px solid ${headerColor}`,
+            }, children: [(0, jsx_runtime_1.jsx)("div", { style: { color: headerColor, display: 'flex', flex: '1 1 0%' }, children: children }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                        borderTop: '2px solid rgb(247, 247, 247)',
+                        padding: '10px 20px 10px 20px',
+                        display: 'flex',
+                        flexDirection: 'row-reverse',
+                        gap: 10,
+                    }, children: [(0, jsx_runtime_1.jsx)(__1.Button, { onClick: onConfirm, backgroundColor: {
+                                basic: 'hsla(243deg, 75%, 58%, 1)',
+                                hover: 'hsla(245deg, 58%, 50%, 1)',
+                            }, color: { basic: 'white' }, children: saveText }), (0, jsx_runtime_1.jsx)(__1.Button, { onClick: onCancel, backgroundColor: {
+                                basic: 'hsla(0deg, 72%, 50%, 1)',
+                                hover: 'hsla(0deg, 73%, 42%, 1)',
+                            }, color: { basic: 'white' }, children: cancelText })] })] })) : null }));
+}
+exports.ConfirmModal = ConfirmModal;

package/lib/components/modal/Modal.js

@@ -0,0 +1,59 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Modal = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+/** @jsxImportSource @emotion/react */
+const react_1 = require("@emotion/react");
+const ModalCloseButton_1 = __importDefault(require("./ModalCloseButton"));
+const useDialog_1 = require("./useDialog");
+function Modal(props) {
+    const { isOpen, onRequestClose, hasCloseButton = true, requestCloseOnBackdrop = true, requestCloseOnEsc = true, maxWidth, width, height, children, } = props;
+    const { ref, onClick } = (0, useDialog_1.useDialog)({
+        isOpen,
+        requestCloseOnEsc,
+        requestCloseOnBackdrop,
+        onRequestClose,
+    });
+    return ((0, jsx_runtime_1.jsx)("dialog", { ref: ref, style: {
+            display: 'flex',
+            position: 'fixed',
+            backgroundColor: 'transparent',
+        }, css: (0, react_1.css) `
+        ::backdrop: rgba(113, 113, 122, 0.75);
+      `, onClick: onClick, children: isOpen ? ((0, jsx_runtime_1.jsxs)("div", { style: {
+                position: 'relative',
+                display: 'flex',
+                flexDirection: 'column',
+                backgroundColor: 'white',
+                maxHeight: '90%',
+                width: width || '100%',
+                maxWidth: maxWidth || undefined,
+                height: height || 'max-content',
+                borderWidth: 1,
+                borderColor: 'transparent',
+                borderRadius: '0.5rem',
+                boxShadow: '0 0 0 0,0 8px 16px rgba(0, 0, 0, 0.3)',
+            }, children: [children, hasCloseButton && (0, jsx_runtime_1.jsx)(ModalCloseButton_1.default, { onClick: onRequestClose })] })) : null }));
+}
+exports.Modal = Modal;
+Modal.Header = function ModalHeader(props) {
+    return ((0, jsx_runtime_1.jsx)("div", { style: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            padding: '10px 20px 10px 20px',
+            borderBottom: '2px solid rgb(247, 247, 247)',
+        }, children: props.children }));
+};
+Modal.Body = function ModalBody(props) {
+    return ((0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flex: '1 1 0%', overflowY: 'auto' }, children: props.children }));
+};
+Modal.Footer = function ModalFooter(props) {
+    return ((0, jsx_runtime_1.jsx)("div", { style: {
+            borderTop: '2px solid rgb(247, 247, 247)',
+            padding: '10px 20px 10px 20px',
+        }, children: props.children }));
+};

package/lib/components/modal/ModalCloseButton.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+/** @jsxImportSource @emotion/react */
+const react_1 = require("@emotion/react");
+const fa_1 = require("react-icons/fa");
+function ModalCloseButton(props) {
+    return ((0, jsx_runtime_1.jsx)("div", { style: { position: 'absolute', top: 4, right: 4 }, children: (0, jsx_runtime_1.jsx)("button", { type: "button", style: { padding: '10px 6px 10px 6px' }, onClick: props.onClick, css: (0, react_1.css)({
+                color: 'rgba(239, 68, 68)',
+                ':hover': { color: 'rgba(185, 28, 28)' },
+            }), children: (0, jsx_runtime_1.jsx)(fa_1.FaTimes, {}) }) }));
+}
+exports.default = ModalCloseButton;