@via-profit/ui-kit 0.1.0-rc.1

package/dist/Modal/ModalConfirmBox.js

@@ -0,0 +1,148 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = __importStar(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const react_1 = require("@emotion/react");
+const react_modal_1 = __importDefault(require("react-modal"));
+const Button_1 = __importDefault(require("@via-profit/ui-kit/src/Button"));
+const Container = styled_1.default.div `
+  display: flex;
+  flex-flow: column;
+  min-width: 20em;
+`;
+const Header = styled_1.default.div `
+  padding: 1em 1em 0 1em;
+`;
+const HeaderTitle = styled_1.default.div `
+  font-size: 1.4rem;
+  font-weight: 600;
+`;
+const Content = styled_1.default.div `
+  flex: 1;
+  padding: 1em 1em;
+`;
+const Footer = styled_1.default.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 ModalConfirmBox = (props, ref) => {
+    const { title, message, onRequestYes, onRequestClose, isOpen } = props, otherProps = __rest(props, ["title", "message", "onRequestYes", "onRequestClose", "isOpen"]);
+    const dialogID = React.useMemo(() => `dialog-confirm-${new Date().getTime()}`, []);
+    const buttonRef = React.useRef(null);
+    const theme = (0, react_1.useTheme)();
+    React.useEffect(() => {
+        setTimeout(() => {
+            if (isOpen && buttonRef.current) {
+                buttonRef.current.focus();
+            }
+        }, 15);
+    }, [isOpen]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(react_modal_1.default, Object.assign({ ref: ref, portalClassName: "modal-confirmbox", closeTimeoutMS: 200, shouldCloseOnEsc: true, shouldCloseOnOverlayClick: false, onRequestClose: onRequestClose, isOpen: isOpen }, otherProps),
+            React.createElement(Container, { role: "modal-confirmbox", "aria-labelledby": `${dialogID}-title`, "aria-describedby": `${dialogID}-description` },
+                React.createElement(Header, null,
+                    React.createElement(HeaderTitle, { id: `${dialogID}-title` }, title)),
+                React.createElement(Content, { id: `${dialogID}-description` }, message),
+                React.createElement(Footer, null,
+                    React.createElement(Button_1.default, { onClick: onRequestClose }, "Dismiss"),
+                    "Confirm"))),
+        React.createElement(react_1.Global, { styles: (0, react_1.css) `
+          .modal-confirmbox .ReactModal__Overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            z-index: ${theme.zIndex.modal};
+            transition: background-color 120ms ease-in-out;
+            background-color: rgba(0, 0, 0, 0);
+          }
+
+          .modal-confirmbox .ReactModal__Overlay--after-open {
+            background-color: rgba(0, 0, 0, 0.6);
+          }
+
+          .modal-confirmbox .ReactModal__Overlay--before-close {
+            background-color: rgba(0, 0, 0, 0);
+          }
+
+          .modal-confirmbox .ReactModal__Content {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            opacity: 0;
+            overflow: auto;
+            -webkit-overflow-scrolling: touch;
+            outline: none;
+            background: ${theme.colors.backgroundPrimary().toString()};
+            border-radius: 1em;
+            transform: translate(-50%, -40%);
+            transition: transform 100ms ease-in-out, opacity 100ms ease-in-out;
+          }
+
+          .modal-confirmbox .ReactModal__Content--after-open {
+            opacity: 1;
+            transform: translate(-50%, -50%);
+            transition-duration: 160ms;
+          }
+
+          .modal-confirmbox .ReactModal__Content--before-close {
+            opacity: 0;
+            transform: translate(-50%, 300px);
+          }
+        ` })));
+};
+exports.default = React.forwardRef(ModalConfirmBox);

package/dist/Modal/ModalDialog.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import ReactModal from 'react-modal';
+export interface ModalDialogProps extends ReactModal.Props {
+    readonly children: React.ReactNode | React.ReactNode[];
+}
+declare const _default: React.ForwardRefExoticComponent<ModalDialogProps & React.RefAttributes<ReactModal>>;
+export default _default;

package/dist/Modal/ModalDialog.js

@@ -0,0 +1,99 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = __importStar(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const react_1 = require("@emotion/react");
+const react_modal_1 = __importDefault(require("react-modal"));
+const Container = styled_1.default.div `
+  padding: 1em;
+`;
+const ModalDialog = (props, ref) => {
+    const { children } = props, otherProps = __rest(props, ["children"]);
+    const theme = (0, react_1.useTheme)();
+    return (React.createElement(React.Fragment, null,
+        React.createElement(react_modal_1.default, Object.assign({ ref: ref, closeTimeoutMS: 200, portalClassName: "modal-dialog" }, otherProps),
+            React.createElement(Container, null, children)),
+        React.createElement(react_1.Global, { styles: (0, react_1.css) `
+          .modal-dialog .ReactModal__Overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            z-index: ${theme.zIndex.modal};
+            transition: background-color 120ms ease-in-out;
+            background-color: rgba(0, 0, 0, 0);
+          }
+
+          .modal-dialog .ReactModal__Overlay--after-open {
+            background-color: rgba(0, 0, 0, 0.6);
+          }
+
+          .modal-dialog .ReactModal__Overlay--before-close {
+            background-color: rgba(0, 0, 0, 0);
+          }
+
+          .modal-dialog .ReactModal__Content {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            opacity: 0;
+            overflow: auto;
+            -webkit-overflow-scrolling: touch;
+            outline: none;
+            background: ${theme.colors.backgroundPrimary().toString()};
+            border-radius: 1em;
+            transform: translate(-50%, -40%);
+            transition: transform 100ms ease-in-out, opacity 100ms ease-in-out;
+          }
+
+          .modal-dialog .ReactModal__Content--after-open {
+            opacity: 1;
+            transform: translate(-50%, -50%);
+            transition-duration: 160ms;
+          }
+
+          .modal-dialog .ReactModal__Content--before-close {
+            opacity: 0;
+            transform: translate(-50%, 300px);
+          }
+        ` })));
+};
+exports.default = React.forwardRef(ModalDialog);

package/dist/Modal/ModalDrawer.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import ReactModal from 'react-modal';
+export interface ModalDrawerProps extends ReactModal.Props {
+    readonly children: React.ReactNode | React.ReactNode[];
+    readonly title?: string;
+    readonly toolbar?: React.ReactNode | React.ReactNode[] | null;
+    readonly footer?: React.ReactNode | React.ReactNode[] | null;
+    readonly closeButton?: boolean;
+}
+declare const _default: React.ForwardRefExoticComponent<ModalDrawerProps & React.RefAttributes<ReactModal>>;
+export default _default;

package/dist/Modal/ModalDrawer.js

@@ -0,0 +1,150 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = __importStar(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const react_1 = require("@emotion/react");
+const react_modal_1 = __importDefault(require("react-modal"));
+const Button_1 = __importDefault(require("@via-profit/ui-kit/src/Button"));
+const CloseIcon_1 = __importDefault(require("./CloseIcon"));
+const Container = styled_1.default.div `
+  min-height: 2rem;
+  max-height: calc(100vh - 3rem);
+  display: flex;
+  flex-flow: column;
+`;
+const Header = styled_1.default.div `
+  padding: 1em;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`;
+const Toolbar = styled_1.default.div `
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+`;
+const Title = styled_1.default.div `
+  font-size: 1.3em;
+  font-weight: 600;
+  margin-right: 1em;
+`;
+const Footer = styled_1.default.div `
+  padding: 1em;
+`;
+const Inner = styled_1.default.div `
+  padding: 1em;
+  overflow-y: auto;
+  flex: 1;
+`;
+const CloseButton = (0, styled_1.default)(Button_1.default) `
+  margin-left: ${props => (props.$withToolbar ? '1em' : 0)};
+  color: ${props => props.theme.colors.textPrimary().toString()};
+  background: none;
+  width: auto;
+  height: auto;
+  padding: 0.6em;
+  font-size: 1em;
+  border-radius: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+`;
+const ModalDrawer = (props, ref) => {
+    const { children, onRequestClose, title, toolbar, footer, closeButton } = props, otherProps = __rest(props, ["children", "onRequestClose", "title", "toolbar", "footer", "closeButton"]);
+    const theme = (0, react_1.useTheme)();
+    const hasFooter = typeof footer !== 'undefined' && footer !== null;
+    const hasHeader = typeof title === 'string' || typeof toolbar !== 'undefined' || closeButton;
+    return (React.createElement(React.Fragment, null,
+        React.createElement(react_modal_1.default, Object.assign({ ref: ref, closeTimeoutMS: 300, shouldCloseOnEsc: true, shouldCloseOnOverlayClick: true, portalClassName: "modal-drawer", onRequestClose: onRequestClose }, otherProps),
+            React.createElement(Container, null,
+                hasHeader && (React.createElement(Header, null,
+                    typeof title === 'string' && React.createElement(Title, null, title),
+                    React.createElement(Toolbar, null, toolbar),
+                    closeButton && (React.createElement(CloseButton, { type: "button", "$withToolbar": Boolean(toolbar), onClick: onRequestClose },
+                        React.createElement(CloseIcon_1.default, null))))),
+                React.createElement(Inner, null, children),
+                hasFooter && React.createElement(Footer, null, footer))),
+        React.createElement(react_1.Global, { styles: (0, react_1.css) `
+          .modal-drawer .ReactModal__Overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            z-index: ${theme.zIndex.modal};
+            background-color: rgba(0, 0, 0, 0);
+            transition: background-color 240ms ease-out;
+          }
+
+          .modal-drawer .ReactModal__Overlay--after-open {
+            background-color: rgba(0, 0, 0, 0.4);
+          }
+
+          .modal-drawer .ReactModal__Overlay--before-close {
+            background-color: rgba(0, 0, 0, 0);
+          }
+
+          .modal-drawer .ReactModal__Content {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            overflow: auto;
+            -webkit-overflow-scrolling: touch;
+            outline: none;
+            background: ${theme.colors.backgroundPrimary().toString()};
+            border-radius: 1em 1em 0 0;
+            transform: translate(0, 100%);
+            transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+          }
+
+          .modal-drawer .ReactModal__Content--after-open {
+            transform: translate(0, 0);
+          }
+
+          .modal-drawer .ReactModal__Content--before-close {
+            transform: translate(0, 100%);
+            transition-duration: 160ms;
+          }
+        ` })));
+};
+exports.default = React.forwardRef(ModalDrawer);

package/dist/Modal/ModalMessageBox.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import ReactModal from 'react-modal';
+export interface ModalMessageBoxProps extends ReactModal.Props {
+    readonly title: string;
+    readonly message: React.ReactNode;
+}
+declare const _default: React.ForwardRefExoticComponent<ModalMessageBoxProps & React.RefAttributes<ReactModal>>;
+export default _default;

package/dist/Modal/ModalMessageBox.js

@@ -0,0 +1,147 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = __importStar(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const react_1 = require("@emotion/react");
+const react_modal_1 = __importDefault(require("react-modal"));
+const Button_1 = __importDefault(require("@via-profit/ui-kit/src/Button"));
+const Container = styled_1.default.div `
+  display: flex;
+  flex-flow: column;
+  min-width: 20em;
+`;
+const Header = styled_1.default.div `
+  padding: 1em 1em 0 1em;
+`;
+const HeaderTitle = styled_1.default.div `
+  font-size: 1.4rem;
+  font-weight: 600;
+`;
+const Content = styled_1.default.div `
+  flex: 1;
+  padding: 1em 1em;
+`;
+const Footer = styled_1.default.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 ModalMessageBox = (props, ref) => {
+    const { title, message, onRequestClose, isOpen } = props, otherProps = __rest(props, ["title", "message", "onRequestClose", "isOpen"]);
+    const dialogID = React.useMemo(() => `dialog-Message-${new Date().getTime()}`, []);
+    const buttonRef = React.useRef(null);
+    const theme = (0, react_1.useTheme)();
+    React.useEffect(() => {
+        setTimeout(() => {
+            if (isOpen && buttonRef.current) {
+                buttonRef.current.focus();
+            }
+        }, 15);
+    }, [isOpen]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(react_modal_1.default, Object.assign({ ref: ref, portalClassName: "modal-messagebox", closeTimeoutMS: 200, shouldCloseOnEsc: true, shouldCloseOnOverlayClick: false, onRequestClose: onRequestClose, isOpen: isOpen }, otherProps),
+            React.createElement(Container, { role: "dialog", "aria-labelledby": `${dialogID}-title`, "aria-describedby": `${dialogID}-description` },
+                React.createElement(Header, null,
+                    React.createElement(HeaderTitle, { id: `${dialogID}-title` }, title)),
+                React.createElement(Content, { id: `${dialogID}-description` }, message),
+                React.createElement(Footer, null,
+                    React.createElement(Button_1.default, { onClick: onRequestClose, ref: buttonRef }, "OK")))),
+        React.createElement(react_1.Global, { styles: (0, react_1.css) `
+          .modal-messagebox .ReactModal__Overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            z-index: ${theme.zIndex.modal};
+            transition: background-color 120ms ease-in-out;
+            background-color: rgba(0, 0, 0, 0);
+          }
+
+          .modal-messagebox .ReactModal__Overlay--after-open {
+            background-color: rgba(0, 0, 0, 0.6);
+          }
+
+          .modal-messagebox .ReactModal__Overlay--before-close {
+            background-color: rgba(0, 0, 0, 0);
+          }
+
+          .modal-messagebox .ReactModal__Content {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            opacity: 0;
+            overflow: auto;
+            -webkit-overflow-scrolling: touch;
+            outline: none;
+            background: ${theme.colors.backgroundPrimary().toString()};
+            border-radius: 1em;
+            transform: translate(-50%, -40%);
+            transition: transform 100ms ease-in-out, opacity 100ms ease-in-out;
+          }
+
+          .modal-messagebox .ReactModal__Content--after-open {
+            opacity: 1;
+            transform: translate(-50%, -50%);
+            transition-duration: 160ms;
+          }
+
+          .modal-messagebox .ReactModal__Content--before-close {
+            opacity: 0;
+            transform: translate(-50%, 300px);
+          }
+        ` })));
+};
+exports.default = React.forwardRef(ModalMessageBox);

package/dist/Modal/index.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import type ReactModal from 'react-modal';
+import { ModalDialogProps } from './ModalDialog';
+import { ModalConfirmBoxProps } from './ModalConfirmBox';
+import { ModalMessageBoxProps } from './ModalMessageBox';
+import { ModalDrawerProps } from './ModalDrawer';
+interface BaseProps {
+    readonly variant?: 'dialog' | 'message-box' | 'confirm-box' | 'drawer';
+}
+export type ModalProps = (ModalDialogProps & BaseProps) | (ModalConfirmBoxProps & BaseProps) | (ModalMessageBoxProps & BaseProps) | (ModalDrawerProps & BaseProps);
+declare const _default: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<ReactModal>>;
+export default _default;

package/dist/Modal/index.js

@@ -0,0 +1,54 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = __importStar(require("react"));
+const ModalDialog_1 = __importDefault(require("./ModalDialog"));
+const ModalConfirmBox_1 = __importDefault(require("./ModalConfirmBox"));
+const ModalMessageBox_1 = __importDefault(require("./ModalMessageBox"));
+const ModalDrawer_1 = __importDefault(require("./ModalDrawer"));
+const isDialog = (props) => ('variant' in props && props.variant === 'dialog') || typeof props.variant === 'undefined';
+const isConfirmBox = (props) => 'variant' in props && props.variant === 'confirm-box';
+const isMessageBox = (props) => 'variant' in props && props.variant === 'message-box';
+const isDrawer = (props) => 'variant' in props && props.variant === 'drawer';
+const Modal = (props, ref) => {
+    if (isDialog(props)) {
+        return React.createElement(ModalDialog_1.default, Object.assign({}, props, { ref: ref }));
+    }
+    if (isConfirmBox(props)) {
+        return React.createElement(ModalConfirmBox_1.default, Object.assign({}, props, { ref: ref }));
+    }
+    if (isMessageBox(props)) {
+        return React.createElement(ModalMessageBox_1.default, Object.assign({}, props, { ref: ref }));
+    }
+    if (isDrawer(props)) {
+        return React.createElement(ModalDrawer_1.default, Object.assign({}, props, { ref: ref }));
+    }
+    const { variant } = props;
+    throw new Error(`Expected «variant» property is «dialog», «drawer», «message-box» or «confirm-box», but got «${variant}»`);
+};
+exports.default = React.forwardRef(Modal);

package/dist/NoSSR/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface NoSSRProps {
+    children: React.ReactNode | React.ReactNode[];
+    fallback?: React.ReactNode | React.ReactNode[];
+}
+declare const NoSSR: React.FC<NoSSRProps>;
+export default NoSSR;

package/dist/NoSSR/index.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const NoSSR = props => {
+    const { fallback, children } = props;
+    const [mountedState, setMountedState] = react_1.default.useState(false);
+    react_1.default.useEffect(() => {
+        setMountedState(true);
+    }, []);
+    return mountedState ? react_1.default.createElement(react_1.default.Fragment, null, children) : react_1.default.createElement(react_1.default.Fragment, null, fallback ? fallback : null);
+};
+exports.default = NoSSR;

package/dist/PhoneField/CountryFlag.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface CountryFlagProps extends React.HTMLAttributes<HTMLSpanElement> {
+    readonly countryCode: string | null;
+}
+declare const CountryFlag: React.FC<CountryFlagProps>;
+export default CountryFlag;