@via-profit/ui-kit 0.3.0 → 0.5.0

package/esm/Modal/BaseModal/ModalWrapper.js

@@ -0,0 +1,172 @@
+import React from 'react';
+import { Global, css } from '@emotion/react';
+import { useContext, actionSetState, PORTAL_ID } from './context';
+import TabManager from '../../utils/TabManager';
+/**
+ * Count of the modals which lock the body scroll
+ */
+let bodyLocksCount = 0;
+const ModalWrapper = props => {
+    const { children, isOpen: isOpenProp, autofocus = true } = props;
+    const { state, dispatch } = useContext();
+    const { closeOnEscape, isMounted, isOpen, destroyTimeout, onRequestClose } = state;
+    const timerRef = React.useRef(null);
+    const bodyLockedRef = React.useRef(false);
+    const isFirstRunRef = React.useRef(true);
+    const containerRef = React.useRef(null);
+    const id = PORTAL_ID + React.useId();
+    React.useEffect(() => {
+        const container = containerRef.current;
+        if (isOpen && container) {
+            TabManager.registerContainer(container);
+            if (autofocus) {
+                TabManager.focusNext();
+            }
+        }
+        return () => {
+            if (container) {
+                TabManager.unregisterContainer(container, autofocus);
+            }
+        };
+    }, [isOpen, autofocus]);
+    const getScrollWidth = React.useCallback(() => {
+        var _a;
+        const outer = window.document.createElement('div');
+        const inner = window.document.createElement('div');
+        const isVerticalScrollbar = window.document.body.scrollHeight > window.document.body.clientHeight;
+        if (!isVerticalScrollbar) {
+            return 0;
+        }
+        let widthNoScroll = 0;
+        let widthWithScroll = 0;
+        outer.style.visibility = 'hidden';
+        outer.style.width = '100px';
+        window.document.body.appendChild(outer);
+        widthNoScroll = outer.offsetWidth;
+        // force scrollbars
+        outer.style.overflow = 'scroll';
+        // add innerdiv
+        inner.style.width = '100%';
+        outer.appendChild(inner);
+        widthWithScroll = inner.offsetWidth;
+        // remove div
+        (_a = outer.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(outer);
+        return widthNoScroll - widthWithScroll;
+    }, []);
+    const lockBody = React.useCallback(() => {
+        var _a;
+        if (!bodyLockedRef.current) {
+            bodyLockedRef.current = true;
+            bodyLocksCount += 1;
+            (_a = window.document.body) === null || _a === void 0 ? void 0 : _a.classList.add('-modal-over');
+        }
+    }, []);
+    const unlockBody = React.useCallback(() => {
+        var _a;
+        if (bodyLockedRef.current) {
+            bodyLockedRef.current = false;
+            bodyLocksCount = Math.max(0, bodyLocksCount - 1);
+            if (bodyLocksCount === 0) {
+                (_a = window.document.body) === null || _a === void 0 ? void 0 : _a.classList.remove('-modal-over');
+            }
+        }
+    }, []);
+    /**
+     * Component will unmount
+     * Clear pending timers and unlock the body scroll even if the modal is still open
+     */
+    React.useEffect(() => () => {
+        if (timerRef.current) {
+            clearTimeout(timerRef.current);
+        }
+        unlockBody();
+    }, [unlockBody]);
+    React.useEffect(() => {
+        /**
+         * The last dialog will be found and closed
+         */
+        const keyDown = (event) => {
+            var _a, _b, _c, _d;
+            const key = ((_a = event === null || event === void 0 ? void 0 : event.key) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || '';
+            if (key === 'escape' &&
+                closeOnEscape &&
+                isOpenProp &&
+                TabManager.isCurrentContainer(containerRef.current)) {
+                const portal = window.document.querySelector(`#${PORTAL_ID}`);
+                const lastID = (_d = (_b = portal === null || portal === void 0 ? void 0 : portal.children) === null || _b === void 0 ? void 0 : _b[((_c = portal === null || portal === void 0 ? void 0 : portal.childNodes) === null || _c === void 0 ? void 0 : _c.length) - 1]) === null || _d === void 0 ? void 0 : _d.id;
+                if (lastID === id) {
+                    onRequestClose(event);
+                }
+            }
+            if (key === 'tab' && isOpenProp && TabManager.isCurrentContainer(containerRef.current)) {
+                event.preventDefault();
+                if (event.shiftKey) {
+                    TabManager.focusPrev();
+                }
+                else {
+                    TabManager.focusNext();
+                }
+            }
+        };
+        window.document.addEventListener('keydown', keyDown);
+        return () => {
+            // if (lastFocusedRef.current) {
+            //   (lastFocusedRef.current as HTMLElement).focus();
+            // }
+            window.document.removeEventListener('keydown', keyDown);
+        };
+    }, [onRequestClose, closeOnEscape, id, isOpenProp]);
+    /**
+     * Controller for visibility state.
+     * Waiting n milliseconds after closing the modal, then sets the visibility property to true
+     * and sets visibility property to false otherwise
+     */
+    React.useEffect(() => {
+        const isFirstRun = isFirstRunRef.current;
+        isFirstRunRef.current = false;
+        // Nothing to close on mount
+        if (isFirstRun && !isOpenProp) {
+            return;
+        }
+        // Previous transition (open or close) must not finish after the new one started
+        if (timerRef.current) {
+            clearTimeout(timerRef.current);
+            timerRef.current = null;
+        }
+        /**
+         * Mark as mounted and wait minimum loop of event then mark as open
+         */
+        if (isOpenProp) {
+            dispatch(actionSetState({ isMounted: true }));
+            lockBody();
+            timerRef.current = setTimeout(() => {
+                timerRef.current = null;
+                dispatch(actionSetState({ isOpen: true }));
+            }, 120);
+            return;
+        }
+        /**
+         * Mark as closed and wait destroyTimeout then mark as unmounted
+         */
+        dispatch(actionSetState({ isOpen: false }));
+        timerRef.current = setTimeout(() => {
+            timerRef.current = null;
+            unlockBody();
+            dispatch(actionSetState({ isMounted: false }));
+        }, destroyTimeout);
+        // destroyTimeout is read at the moment of closing
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isOpenProp, dispatch, lockBody, unlockBody]);
+    return React.useMemo(() => isMounted ? (React.createElement("div", { ref: containerRef, tabIndex: -1, id: id },
+        children,
+        React.createElement(Global, { styles: css `
+              :root {
+                --modal-scroll-width: ${getScrollWidth()}px;
+              }
+              body.-modal-over {
+                overflow: hidden;
+                margin-right: var(--modal-scroll-width);
+              }
+            ` }))) : null, [children, getScrollWidth, isMounted, id]);
+};
+export default ModalWrapper;

package/esm/Modal/BaseModal/RenderModal.js

@@ -0,0 +1,31 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import { useContext } from './context';
+import Overlay from './ModalOverlay';
+import Inner from './ModalInner';
+import InnerContainer from './ModalInnerContainer';
+const RenderModal = props => {
+    const { children, overrides } = props, restProps = __rest(props, ["children", "overrides"]);
+    const { state } = useContext();
+    const { isOpen, closeOnOverlayClick, onRequestClose } = state;
+    const overridesMap = React.useMemo(() => ({
+        Overlay: (overrides === null || overrides === void 0 ? void 0 : overrides.Overlay) || Overlay,
+        Inner: (overrides === null || overrides === void 0 ? void 0 : overrides.Inner) || Inner,
+        InnerContainer: (overrides === null || overrides === void 0 ? void 0 : overrides.InnerContainer) || InnerContainer,
+    }), [overrides]);
+    return (React.createElement(React.Fragment, null,
+        React.useMemo(() => (React.createElement(overridesMap.Overlay, Object.assign({}, restProps, { isOpen: isOpen, closeOnOverlayClick: closeOnOverlayClick, onRequestClose: onRequestClose }))), [overridesMap, isOpen, closeOnOverlayClick, onRequestClose, restProps]),
+        React.useMemo(() => (React.createElement(overridesMap.InnerContainer, { isOpen: isOpen, onRequestClose: onRequestClose },
+            React.createElement(overridesMap.Inner, { isOpen: isOpen, onRequestClose: onRequestClose }, children))), [children, isOpen, overridesMap, onRequestClose])));
+};
+export default RenderModal;

package/esm/Modal/BaseModal/context.js

@@ -0,0 +1,41 @@
+import React from 'react';
+export const PORTAL_ID = 'ui-kit-portal';
+export const defaultState = {
+    isOpen: false,
+    isMounted: false,
+    destroyTimeout: 240,
+    closeOnEscape: true,
+    closeOnOverlayClick: true,
+    onRequestClose: () => undefined,
+};
+const reducer = (state, action) => {
+    switch (action.type) {
+        case 'setState':
+            return Object.assign(Object.assign({}, state), action.payload);
+        default:
+            return state;
+    }
+};
+export const actionSetState = (payload) => ({
+    type: 'setState',
+    payload,
+});
+const context = React.createContext({ state: defaultState, dispatch: () => undefined });
+export const ContextProvider = props => {
+    const { children, initialState } = props;
+    const [state, dispatch] = React.useReducer(reducer, Object.assign(Object.assign({}, defaultState), initialState));
+    // Keep the props up to date (isOpen is managed by ModalWrapper itself),
+    // otherwise a stale onRequestClose callback would be called
+    const { onRequestClose, closeOnEscape, closeOnOverlayClick, destroyTimeout } = initialState;
+    React.useEffect(() => {
+        dispatch(actionSetState({ onRequestClose, closeOnEscape, closeOnOverlayClick, destroyTimeout }));
+    }, [onRequestClose, closeOnEscape, closeOnOverlayClick, destroyTimeout]);
+    return React.createElement(context.Provider, { value: { state, dispatch } }, children);
+};
+export const useContext = () => {
+    const { state, dispatch } = React.useContext(context);
+    return {
+        state,
+        dispatch,
+    };
+};

package/esm/Modal/BaseModal/index.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { ContextProvider, defaultState, PORTAL_ID } from './context';
+import Overlay from './ModalOverlay';
+import Inner from './ModalInner';
+import InnerContainer from './ModalInnerContainer';
+import ModalWrapper from './ModalWrapper';
+import RenderModal from './RenderModal';
+import NoSSR from '../../NoSSR';
+import useThemeProps from '../../ThemeProvider/useThemeProps';
+const BaseModal = props => {
+    const { isOpen, children, overrides, autofocus = true, closeOnOverlayClick = defaultState.closeOnOverlayClick, closeOnEscape = defaultState.closeOnEscape, destroyTimeout = defaultState.destroyTimeout, onRequestClose, } = useThemeProps('Modal', props);
+    const [domLoaded, setDomLoaded] = React.useState(false);
+    const overridesMap = React.useMemo(() => ({
+        Overlay: (overrides === null || overrides === void 0 ? void 0 : overrides.Overlay) || Overlay,
+        Inner: (overrides === null || overrides === void 0 ? void 0 : overrides.Inner) || Inner,
+        InnerContainer: (overrides === null || overrides === void 0 ? void 0 : overrides.InnerContainer) || InnerContainer,
+    }), [overrides]);
+    React.useEffect(() => {
+        /**
+         * Client render detection
+         */
+        setDomLoaded(true);
+    }, []);
+    const portalEl = React.useMemo(() => {
+        if (typeof window === 'undefined') {
+            return undefined;
+        }
+        const node = window.document.body.querySelector(`#${PORTAL_ID}`);
+        if (node) {
+            return node;
+        }
+        const newNode = window.document.createElement('div');
+        newNode.setAttribute('id', PORTAL_ID);
+        window.document.body.appendChild(newNode);
+        return newNode;
+    }, []);
+    return (React.createElement(NoSSR, null, domLoaded &&
+        portalEl &&
+        ReactDOM.createPortal(React.createElement(ContextProvider, { initialState: {
+                isOpen,
+                destroyTimeout,
+                closeOnEscape,
+                closeOnOverlayClick,
+                onRequestClose,
+            } },
+            React.createElement(ModalWrapper, { isOpen: isOpen, autofocus: autofocus, destroyTimeout: destroyTimeout },
+                React.createElement(RenderModal, { overrides: overridesMap }, children))), portalEl, PORTAL_ID)));
+};
+export default BaseModal;

package/esm/Modal/BaseModal/useDialogID.js

@@ -0,0 +1,7 @@
+import React from 'react';
+/**
+ * Unique and SSR-stable id of a modal, used to link its title and content by aria attributes.
+ * The colons of React.useId are removed, so the id can be used in CSS selectors too
+ */
+const useDialogID = (prefix) => `${prefix}-${React.useId().replace(/:/g, '')}`;
+export default useDialogID;

package/esm/Modal/ConfirmBox/ConfirmBoxContainer.js

@@ -0,0 +1,27 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+const StyledConfirmBoxContainer = styled.div `
+  display: flex;
+  flex-flow: column;
+  min-width: 20em;
+`;
+const ConfirmBoxContainer = (props, ref) => {
+    const { children, dialogID } = props, nativeProps = __rest(props, ["children", "dialogID"]);
+    return (React.createElement(StyledConfirmBoxContainer
+    // A confirmation requires the user's response
+    , Object.assign({ 
+        // A confirmation requires the user's response
+        role: "alertdialog", "aria-modal": "true", "aria-labelledby": `${dialogID}-title`, "aria-describedby": `${dialogID}-description` }, nativeProps, { ref: ref }), children));
+};
+export default React.forwardRef(ConfirmBoxContainer);

package/esm/Modal/ConfirmBox/ConfirmBoxContent.js

@@ -0,0 +1,22 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+const StyledConfirmBoxContent = styled.div `
+  flex: 1;
+  padding: 1em 1em;
+`;
+const ConfirmBoxContent = (props, ref) => {
+    const { children, dialogID } = props, nativeProps = __rest(props, ["children", "dialogID"]);
+    return (React.createElement(StyledConfirmBoxContent, Object.assign({ id: `${dialogID}-description` }, nativeProps, { ref: ref }), children));
+};
+export default React.forwardRef(ConfirmBoxContent);

package/esm/Modal/ConfirmBox/ConfirmBoxFooter.js

@@ -0,0 +1,41 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+import Button from '../../Button';
+const StyledConfirmBoxFooter = styled.div `
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  padding: 1em 1em 1em 1em;
+
+  & > button {
+    border-radius: 0;
+  }
+
+  & > button:first-of-type {
+    border-top-left-radius: 1em;
+    border-bottom-left-radius: 1em;
+  }
+
+  & > button:last-child {
+    border-top-right-radius: 1em;
+    border-bottom-right-radius: 1em;
+  }
+`;
+const ConfirmBoxFooter = (props, ref) => {
+    const { onRequestClose, onRequestYes, dismissButtonLabel, confirmButtonLabel } = props, nativeProps = __rest(props, ["onRequestClose", "onRequestYes", "dismissButtonLabel", "confirmButtonLabel"]);
+    return (React.createElement(StyledConfirmBoxFooter, Object.assign({}, nativeProps, { ref: ref }),
+        React.createElement(Button, { onClick: onRequestClose, tabIndex: 2 }, typeof dismissButtonLabel === 'undefined' ? 'Dismiss' : dismissButtonLabel),
+        React.createElement(Button, { color: "primary", onClick: onRequestYes, tabIndex: 1 }, typeof confirmButtonLabel === 'undefined' ? 'Confirm' : confirmButtonLabel)));
+};
+export default React.forwardRef(ConfirmBoxFooter);

package/esm/Modal/ConfirmBox/ConfirmBoxHeader.js

@@ -0,0 +1,26 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+const StyedConfirmBoxHeader = styled.div `
+  padding: 1em 1em 0 1em;
+`;
+const ConfirmBoxTitle = styled.div `
+  font-size: 1.4rem;
+  font-weight: 600;
+`;
+const ConfirmBoxHeader = (props, ref) => {
+    const { children, dialogID } = props, nativeProps = __rest(props, ["children", "dialogID"]);
+    return (React.createElement(StyedConfirmBoxHeader, Object.assign({}, nativeProps, { ref: ref }),
+        React.createElement(ConfirmBoxTitle, { id: `${dialogID}-title` }, children)));
+};
+export default React.forwardRef(ConfirmBoxHeader);

package/esm/Modal/ConfirmBox/index.js

@@ -0,0 +1,47 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import BaseModal from '../BaseModal';
+import Container from './ConfirmBoxContainer';
+import Content from './ConfirmBoxContent';
+import Footer from './ConfirmBoxFooter';
+import Header from './ConfirmBoxHeader';
+import Overlay from '../BaseModal/ModalOverlay';
+import useDialogID from '../BaseModal/useDialogID';
+import useThemeProps from '../../ThemeProvider/useThemeProps';
+const ConfirmBox = props => {
+    const _a = useThemeProps('ConfirmBox', props), { header, children, onRequestYes, onRequestClose, overrides, isOpen, dismissButtonLabel, confirmButtonLabel } = _a, otherProps = __rest(_a, ["header", "children", "onRequestYes", "onRequestClose", "overrides", "isOpen", "dismissButtonLabel", "confirmButtonLabel"]);
+    const dialogID = useDialogID('dialog-confirm');
+    const overridesMap = React.useMemo(() => ({
+        Container: (overrides === null || overrides === void 0 ? void 0 : overrides.Container) || Container,
+        Content: (overrides === null || overrides === void 0 ? void 0 : overrides.Content) || Content,
+        Footer: (overrides === null || overrides === void 0 ? void 0 : overrides.Footer) || Footer,
+        Header: (overrides === null || overrides === void 0 ? void 0 : overrides.Header) || Header,
+        Overlay: (overrides === null || overrides === void 0 ? void 0 : overrides.Overlay) || Overlay,
+    }), [overrides]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(BaseModal, Object.assign({ onRequestClose: onRequestClose, isOpen: isOpen }, otherProps, { overrides: {
+                Overlay: overridesMap.Overlay,
+            } }),
+            React.createElement(overridesMap.Container, { dialogID: dialogID },
+                React.useMemo(() => (React.createElement(overridesMap.Header, { dialogID: dialogID }, header)), [overridesMap, dialogID, header]),
+                React.useMemo(() => (React.createElement(overridesMap.Content, { dialogID: dialogID }, children)), [dialogID, children, overridesMap]),
+                React.useMemo(() => (React.createElement(overridesMap.Footer, { dialogID: dialogID, onRequestClose: onRequestClose, onRequestYes: onRequestYes, dismissButtonLabel: dismissButtonLabel, confirmButtonLabel: confirmButtonLabel })), [
+                    confirmButtonLabel,
+                    dialogID,
+                    dismissButtonLabel,
+                    onRequestClose,
+                    onRequestYes,
+                    overridesMap,
+                ])))));
+};
+export default ConfirmBox;

package/esm/Modal/Dialog/DialogInner.js

@@ -0,0 +1,22 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+import BaseModalInner from '../BaseModal/ModalInner';
+const StyledDialogInner = styled(BaseModalInner) `
+  padding: 1em 1em;
+`;
+const DialogInner = (props, ref) => {
+    const { children, dialogID } = props, restProps = __rest(props, ["children", "dialogID"]);
+    return (React.createElement(StyledDialogInner, Object.assign({ role: "dialog", "aria-modal": "true", id: `${dialogID}-description` }, restProps, { ref: ref }), children));
+};
+export default React.forwardRef(DialogInner);

package/esm/Modal/Dialog/index.js

@@ -0,0 +1,31 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as React from 'react';
+import BaseModal from '../BaseModal';
+import DialogInner from './DialogInner';
+import useDialogID from '../BaseModal/useDialogID';
+import useThemeProps from '../../ThemeProvider/useThemeProps';
+const Dialog = props => {
+    const _a = useThemeProps('Dialog', props), { children, overrides } = _a, restProps = __rest(_a, ["children", "overrides"]);
+    const dialogID = useDialogID('dialog');
+    // Created once: a component created during the render is a new type on every render,
+    // so React would remount the whole dialog content (inputs lose the focus and the state)
+    const Inner = React.useMemo(() => {
+        var _a;
+        return (_a = overrides === null || overrides === void 0 ? void 0 : overrides.Inner) !== null && _a !== void 0 ? _a : React.forwardRef(function Inner(innerProps, ref) {
+            return React.createElement(DialogInner, Object.assign({ dialogID: dialogID, ref: ref }, innerProps));
+        });
+    }, [overrides === null || overrides === void 0 ? void 0 : overrides.Inner, dialogID]);
+    const modalOverrides = React.useMemo(() => (Object.assign(Object.assign({}, overrides), { Inner })), [overrides, Inner]);
+    return (React.createElement(BaseModal, Object.assign({}, restProps, { overrides: modalOverrides }), children));
+};
+export default Dialog;

package/esm/Modal/Drawer/DrawerCloseIcon.js

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { forwardRef } from 'react';
+const DrawerCloseIcon = (props, ref) => (React.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 512 512", ref: ref }, props),
+    React.createElement("path", { style: {
+            fill: 'none',
+            stroke: 'currentColor',
+            strokeLinecap: 'round',
+            strokeLinejoin: 'round',
+            strokeWidth: 32,
+        }, d: "M368 368 144 144M368 144 144 368" })));
+const ForwardRef = forwardRef(DrawerCloseIcon);
+export default ForwardRef;

package/esm/Modal/Drawer/DrawerContainer.js

@@ -0,0 +1,26 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+const StyledDrawerContainer = styled.div `
+  min-height: 2rem;
+  display: flex;
+  flex-flow: column;
+  width: 100%;
+  height: 100%;
+  border-radius: inherit;
+`;
+const DrawerContainer = (props, ref) => {
+    const { children } = props, nativeProps = __rest(props, ["children"]);
+    return (React.createElement(StyledDrawerContainer, Object.assign({}, nativeProps, { ref: ref }), children));
+};
+export default React.forwardRef(DrawerContainer);

package/esm/Modal/Drawer/DrawerContent.js

@@ -0,0 +1,26 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+const StyledDrawerContent = styled.div `
+  overflow-y: auto;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  border-radius: inherit;
+  background-color: ${({ theme }) => theme.color.backgroundPrimary.toString()};
+`;
+const DrawerContent = (props, ref) => {
+    const { children } = props, nativeProps = __rest(props, ["children"]);
+    return (React.createElement(StyledDrawerContent, Object.assign({}, nativeProps, { ref: ref }), children));
+};
+export default React.forwardRef(DrawerContent);

package/esm/Modal/Drawer/DrawerFooter.js

@@ -0,0 +1,21 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+const StyledDrawerFooter = styled.div `
+  padding: 0.5em 1em;
+`;
+const DrawerFooter = (props, ref) => {
+    const { children } = props, nativeProps = __rest(props, ["children"]);
+    return (React.createElement(StyledDrawerFooter, Object.assign({}, nativeProps, { ref: ref }), children));
+};
+export default React.forwardRef(DrawerFooter);