@via-profit/ui-kit 0.1.0-rc.2 → 0.1.0-rc.21

package/Menu/reducer.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.reducer = exports.defaultState = void 0;
+exports.defaultState = {
+    selectedIndexes: [],
+    markedIndex: -1,
+    hoveredIndex: -1,
+};
+const reducer = (state, action) => {
+    switch (action.type) {
+        case 'setMenuState': {
+            return Object.assign(Object.assign({}, state), action.payload);
+        }
+        default:
+            return state;
+    }
+};
+exports.reducer = reducer;
+exports.default = exports.reducer;

package/Modal/CloseIcon.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+declare const ForwardRef: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & React.RefAttributes<SVGSVGElement>>;
+export default ForwardRef;

package/Modal/CloseIcon.js

@@ -0,0 +1,37 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = __importStar(require("react"));
+const react_1 = require("react");
+const CloseIcon = (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 = (0, react_1.forwardRef)(CloseIcon);
+exports.default = ForwardRef;

package/Modal/ModalConfirmBox.d.ts

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

package/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("../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.color.surface.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/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/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.color.surface.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/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/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("../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.color.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.color.surface.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/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/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("../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.color.surface.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/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;