@yosgo/swap-ui 1.0.118 → 1.0.122

package/build/index.esm.js

@@ -1,4 +1,4 @@
-import { AppBar, Toolbar, Container as Container$1, Grid, Button as Button$1, Typography as Typography$1, IconButton as IconButton$1, Menu as Menu$1, MenuItem as MenuItem$1, Divider, Fade, Paper as Paper$1, TextField as TextField$1, Dialog, Modal as Modal$1, Breadcrumbs, Slide, FormControl, InputLabel, Select as Select$1, CssBaseline, Box, useTheme as useTheme$1, makeStyles as makeStyles$1, useMediaQuery, FormControlLabel, OutlinedInput, FormHelperText, ListItemIcon, Backdrop, fade as fade$1, Popper as Popper$1, InputBase } from '@material-ui/core';
+import { AppBar, Toolbar, Container as Container$1, Grid, Button as Button$1, Typography as Typography$1, IconButton as IconButton$1, Menu as Menu$1, MenuItem as MenuItem$1, Divider, Fade, Paper as Paper$1, TextField as TextField$1, Dialog, Modal as Modal$1, Breadcrumbs, Slide, FormControl, InputLabel, Select as Select$1, CssBaseline, Box, useTheme as useTheme$1, makeStyles as makeStyles$1, useMediaQuery, FormControlLabel, OutlinedInput, FormHelperText, ListItemIcon, Backdrop, fade as fade$1, Popper as Popper$1, InputBase, Grow } from '@material-ui/core';
 export { CssBaseline } from '@material-ui/core';
 import React__default, { useEffect, useState, Component as Component$1, forwardRef, useRef, useLayoutEffect as useLayoutEffect$1, useCallback, createElement, createContext, useContext, useMemo, Fragment as Fragment$1 } from 'react';
 import styled from 'styled-components';
@@ -2695,14 +2695,22 @@ var RadioButton = function (props) {
 };
 
 var useStyles$2 = makeStyles$1(function (theme) { return ({
+    root: {
+        "& .MuiFormHelperText-contained": {
+            marginLeft: 16,
+            marginRight: 16,
+        },
+    },
     inputRoot: function (props) { return ({
         width: props.width,
         height: props.height,
         padding: "0px 16px",
         backgroundColor: "white",
         fontSize: 16,
-        lineHeight: 1.4,
+        lineHeight: "unset",
         fontWeight: 400,
+        display: "flex",
+        alignItems: "center",
         "& fieldset": {
             "& legend": {
                 width: "0.01px",
@@ -2710,11 +2718,9 @@ var useStyles$2 = makeStyles$1(function (theme) { return ({
             borderColor: theme.black.black500,
         },
         "&.Mui-focused": {
-            boxShadow: props.select ? "unset" : "0px 0px 0px 4px #D7DFF8",
+            boxShadow: "0px 0px 0px 4px #D7DFF8",
             "& fieldset": {
-                border: props.select
-                    ? "1px solid " + theme.black.black1000 + " !important"
-                    : "1px solid " + theme.primary.primary400 + " !important",
+                border: "1px solid " + theme.primary.primary400 + " !important",
                 borderWidth: "1px !important",
             },
             "&.Mui-error": {
@@ -2732,11 +2738,18 @@ var useStyles$2 = makeStyles$1(function (theme) { return ({
         },
     }); },
     input: {
+        fontSize: 16,
+        lineHeight: "unset",
+        fontWeight: 400,
+        display: "flex",
+        alignItems: "center",
         "&:-webkit-autofill": {
             "-webkit-box-shadow": "0 0 0 100px #FFFFFF inset",
         },
         "&::placeholder": { color: theme.black.black700, opacity: 1 },
         padding: 0,
+        margin: 0,
+        height: "fit-content",
     },
     selectRoot: function (props) { return ({
         borderRadius: 8,
@@ -2756,7 +2769,11 @@ var useStyles$2 = makeStyles$1(function (theme) { return ({
         "&.Mui-error": { color: theme.black.black700 },
     },
     shrink: {
-        transform: "translate(14px, -6px) !important",
+        transform: "translate(14px, -10px) !important",
+        height: 20,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
         backgroundColor: "white",
         fontSize: 14,
         fontWeight: 700,
@@ -2778,7 +2795,7 @@ var TextField = function (props) {
         select: select,
     };
     var classes = useStyles$2(styleProps);
-    return (React__default.createElement(MaterialTextField, __assign({ fullWidth: fullWidth, select: select }, other, { variant: "outlined", InputProps: __assign({ classes: {
+    return (React__default.createElement(MaterialTextField, __assign({ fullWidth: fullWidth, select: select }, other, { className: classes.root, variant: "outlined", InputProps: __assign({ classes: {
                 root: classes.inputRoot,
                 input: classes.input,
             } }, InputProps), InputLabelProps: __assign({ classes: {
@@ -3102,7 +3119,7 @@ var Button = function (props) {
                 : variant === "secondary"
                     ? theme.primary.primary400
                     : variant === "tertiary"
-                        ? theme.primary.primary500
+                        ? theme.black.black800
                         : variant === "text"
                             ? theme.primary.primary400
                             : variant === "black"
@@ -3115,7 +3132,7 @@ var Button = function (props) {
                 : variant === "secondary"
                     ? theme.black.white
                     : variant === "tertiary"
-                        ? theme.primary.primary50
+                        ? theme.black.black400
                         : variant === "text"
                             ? theme.black.white
                             : variant === "black"
@@ -3160,7 +3177,7 @@ var Button = function (props) {
                     : variant === "secondary"
                         ? theme.primary.primary50
                         : variant === "tertiary"
-                            ? theme.primary.primary100
+                            ? theme.black.black500
                             : variant === "text"
                                 ? theme.primary.primary50
                                 : variant === "black"
@@ -3184,7 +3201,7 @@ var Button = function (props) {
                     : variant === "secondary"
                         ? theme.primary.primary100
                         : variant === "tertiary"
-                            ? theme.primary.primary200
+                            ? theme.black.black600
                             : variant === "text"
                                 ? theme.primary.primary100
                                 : variant === "black"
@@ -3198,13 +3215,15 @@ var Button = function (props) {
                     ? "0px 0px 0px 4px #CCCCCC"
                     : variant === "danger"
                         ? "0px 0px 0px 4px #FFCCD0"
-                        : "0px 0px 0px 4px #D7DFF8",
+                        : variant === "tertiary"
+                            ? "0px 0px 0px 4px rgba(0, 0, 0, 0.1)"
+                            : "0px 0px 0px 4px #D7DFF8",
                 backgroundColor: variant === "primary"
                     ? theme.primary.primary400
                     : variant === "secondary"
                         ? theme.primary.primary50
                         : variant === "tertiary"
-                            ? theme.primary.primary50
+                            ? theme.black.black400
                             : variant === "text"
                                 ? theme.primary.primary50
                                 : variant === "black"
@@ -3215,7 +3234,7 @@ var Button = function (props) {
                 border: variant === "secondary"
                     ? "1px solid " + theme.primary.primary400
                     : variant === "tertiary"
-                        ? "1px solid " + theme.primary.primary400
+                        ? "1px solid " + theme.black.black600
                         : variant === "text"
                             ? "1px solid " + theme.primary.primary400
                             : variant === "black"
@@ -3231,7 +3250,7 @@ var Button = function (props) {
                     : variant === "secondary"
                         ? theme.black.white
                         : variant === "tertiary"
-                            ? theme.primary.primary100
+                            ? theme.black.black400
                             : variant === "text"
                                 ? theme.black.white
                                 : variant === "black"
@@ -3244,7 +3263,7 @@ var Button = function (props) {
                     : variant === "secondary"
                         ? theme.primary.primary400
                         : variant === "tertiary"
-                            ? theme.primary.primary500
+                            ? theme.black.black800
                             : variant === "text"
                                 ? theme.primary.primary400
                                 : variant === "black"
@@ -6670,7 +6689,7 @@ var Modal = React__default.forwardRef(function (props, ref) {
     var _a = useState(0), clientHeight = _a[0], setClientHeight = _a[1];
     var _b = useState(0), scorllbarWidth = _b[0], setScorllbarWidth = _b[1];
     useEffect(function () {
-        if (mobile && fullWidth) {
+        if (mobile || fullWidth) {
             if ((helpText || multiline) && !label) {
                 setClientHeight(window.innerHeight - 64 - 73 - 64);
             }
@@ -6684,7 +6703,7 @@ var Modal = React__default.forwardRef(function (props, ref) {
                 setClientHeight(window.innerHeight - 64 - 56 - 64);
             }
         }
-    }, []);
+    }, [fullWidth, mobile]);
     useEffect(function () {
         var scrollbar_width = window.innerWidth - document.body.clientWidth;
         setScorllbarWidth(scrollbar_width / 2);
@@ -7000,7 +7019,7 @@ var Modal = React__default.forwardRef(function (props, ref) {
             pointerEvents: onExit ? "none" : "unset",
             maxHeight: bodyMaxHeight
                 ? bodyMaxHeight
-                : mobile && fullWidth
+                : fullWidth
                     ? clientHeight
                     : "unset",
             overflowY: !onExit ? "scroll" : "hidden",
@@ -7040,7 +7059,10 @@ var Modal = React__default.forwardRef(function (props, ref) {
         },
     }); });
     var classes = useStyles();
-    return (React__default.createElement(MaterialModal, { open: open, className: classes.root, BackdropComponent: Backdrop, BackdropProps: { className: classes.backdrop } },
+    return (React__default.createElement(MaterialModal, { open: open, className: classes.root, BackdropComponent: Backdrop, BackdropProps: {
+            className: classes.backdrop,
+            style: { overflow: "auto", WebkitOverflowScrolling: "touch" },
+        } },
         React__default.createElement(ModalTransitionEffect, { in: open, slide: fullWidth, style: {
                 outline: "none",
                 transition: "ease-in-out",
@@ -7121,12 +7143,15 @@ var Modal = React__default.forwardRef(function (props, ref) {
                         children))) : null,
                 (label || secondaryButton || primaryButton) && !disUnderLine ? (React__default.createElement(Divider, null)) : null,
                 React__default.createElement(Box, { className: classes.footer }, footer ? (footer) : (React__default.createElement(React__default.Fragment, null,
-                    !buttonFullWidth || !footerDisplayColumn ? (React__default.createElement(Box, { marginBottom: mobile ? (label ? "12px" : 0) : 0 },
-                        React__default.createElement(Typography, { variant: mobile ? "title" : "h6" }, label))) : null,
+                    !buttonFullWidth || !footerDisplayColumn ? (React__default.createElement(Box, { marginBottom: mobile ? (label ? "12px" : 0) : 0, style: {
+                            fontSize: mobile ? 16 : 18,
+                            fontWeight: 700,
+                            lineHeight: 1.4,
+                        } }, label)) : null,
                     secondaryButton || primaryButton ? (React__default.createElement(Box, { className: classes.footerButton },
                         React__default.createElement(Box, { width: mobile && !buttonFullWidth && !footerDisplayColumn
                                 ? null
-                                : "100%", marginRight: !footerDisplayColumn ? 1 : 0 }, secondaryButton ? (React__default.createElement(Button, { fullWidth: buttonFullWidth || footerDisplayColumn, variant: secondaryButton.variant
+                                : "100%", marginRight: !footerDisplayColumn && secondaryButton ? 1 : 0 }, secondaryButton ? (React__default.createElement(Button, { fullWidth: buttonFullWidth || footerDisplayColumn, variant: secondaryButton.variant
                                 ? secondaryButton.variant
                                 : "secondary", size: "small", onClick: secondaryButton.onClick, disabled: secondaryButton.disabled, loading: secondaryButton.loading, style: secondaryButton.style }, secondaryButton.title)) : null),
                         React__default.createElement(Box, { width: "100%", marginBottom: footerDisplayColumn ? 1 : 0 }, primaryButton ? (React__default.createElement(Button, { fullWidth: buttonFullWidth || footerDisplayColumn || mobile, variant: primaryButton.variant
@@ -7218,7 +7243,7 @@ var useStyles$b = makeStyles$1(function () { return ({
         height: props.height,
         display: "flex",
         alignItems: "center",
-        justifyContent: "space-between",
+        justifyContent: "center",
     }); },
 }); });
 var Chip = function (props) {
@@ -7237,7 +7262,7 @@ var Chip = function (props) {
                             ? theme.danger.danger50
                             : theme.primary.primary50,
         width: width ? width : "fit-content",
-        height: height ? height : "fit-content",
+        height: height ? height : 24,
         border: outlined || !contained
             ? variant === "neutral"
                 ? "1px solid " + theme.black.black500
@@ -7249,7 +7274,7 @@ var Chip = function (props) {
                             ? "1px solid " + theme.danger.danger800
                             : "1px solid " + theme.primary.primary800
             : null,
-        padding: outlined || !contained ? "3.5px 8px" : "3.5px 9px",
+        padding: outlined || !contained ? "0px 8px" : "0px 9px",
     };
     var classes = useStyles$b(styleProps);
     return (React__default.createElement("div", __assign({ className: classes.root }, other),
@@ -7261,9 +7286,11 @@ var Chip = function (props) {
                         ? "success800"
                         : variant === "danger"
                             ? "danger800"
-                            : "primary800", style: { marginRight: icon ? 4 : 0 } }, label),
-        icon));
-};
+                            : "primary800", style: { marginRight: variant === "success" ? 4 : 0 } }, label),
+        variant === "success" && !icon ? icon_success : icon));
+};
+var icon_success = (React__default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    React__default.createElement("path", { d: "M14 4.66666L6 12.6667L2.33333 9L3.27333 8.06L6 10.78L13.06 3.72666L14 4.66666Z", fill: "#00821E" })));
 
 var CircularProgress = function (props) {
     var theme = useTheme$1();
@@ -11771,7 +11798,7 @@ var AutoComplete = function (props) {
 };
 
 var TaxTextField = function (_a) {
-    var onChange = _a.onChange, codeValue = _a.codeValue, domainValue = _a.domainValue, domainCodeValue = _a.domainCodeValue, codeError = _a.codeError, codeHelperText = _a.codeHelperText, domainError = _a.domainError, domainHelperText = _a.domainHelperText, codeOnClick = _a.codeOnClick, domainOnClick = _a.domainOnClick, mobile = _a.mobile;
+    var onChange = _a.onChange, codeValue = _a.codeValue, domainValue = _a.domainValue, domainCodeValue = _a.domainCodeValue, codeError = _a.codeError, codeHelperText = _a.codeHelperText, domainError = _a.domainError, domainHelperText = _a.domainHelperText, codeOnClick = _a.codeOnClick, domainOnClick = _a.domainOnClick, mobile = _a.mobile, codeFocused = _a.codeFocused, domainFocused = _a.domainFocused;
     var _b = useState(""), modalIncome = _b[0], setModalIncome = _b[1];
     var _c = useState(""), modalExpense = _c[0], setModalExpense = _c[1];
     var handleModalTaxDescription = function () {
@@ -11828,7 +11855,7 @@ var TaxTextField = function (_a) {
             justifyContent: "space-between",
         } },
         React__default.createElement("div", { style: { width: "100%" } },
-            React__default.createElement(TextField, { fullWidth: true, select: true, error: codeError, helperText: codeHelperText, height: 56, label: "\u9078\u64C7\u7533\u5831\u985E\u5225", value: codeValue, onClick: handleCodeClick, onChange: function (e) {
+            React__default.createElement(TextField, { focused: codeFocused, fullWidth: true, select: true, error: codeError, helperText: codeHelperText, height: 56, label: "\u9078\u64C7\u7533\u5831\u985E\u5225", value: codeValue, onClick: handleCodeClick, onChange: function (e) {
                     setModalIncome(e.target.value);
                     setModalExpense("");
                 } },
@@ -11860,7 +11887,7 @@ var TaxTextField = function (_a) {
                         margin: mobile ? "24px 0 0 0 " : "0 0 0 8px",
                     } }, codeValue === "9B" ? (
                 // 9B Select
-                React__default.createElement(TextField, { select: true, fullWidth: true, error: domainError, helperText: domainHelperText, height: 56, label: "\u8F38\u5165\u57F7\u884C\u696D\u52D9\u985E\u5225", value: domainCodeValue, onClick: handleDomainClick, onChange: function (e) {
+                React__default.createElement(TextField, { focused: domainFocused, select: true, fullWidth: true, error: domainError, helperText: domainHelperText, height: 56, label: "\u8F38\u5165\u57F7\u884C\u696D\u52D9\u985E\u5225", value: domainCodeValue, onClick: handleDomainClick, onChange: function (e) {
                         setModalExpense(e.target.value);
                         setAnchorEl(null);
                     } },
@@ -11889,7 +11916,7 @@ var TaxTextField = function (_a) {
                         option.label)); }))) : (
                 // 9A AutoComplete
                 React__default.createElement(React__default.Fragment, null,
-                    React__default.createElement(TextField, { error: domainError, helperText: domainHelperText, fullWidth: true, label: "\u8F38\u5165\u57F7\u884C\u696D\u52D9\u985E\u5225", height: 56, value: domainValue, onClick: handleDomainClick, InputProps: {
+                    React__default.createElement(TextField, { focused: domainFocused, error: domainError, helperText: domainHelperText, fullWidth: true, label: "\u8F38\u5165\u57F7\u884C\u696D\u52D9\u985E\u5225", height: 56, value: domainValue, onClick: handleDomainClick, InputProps: {
                             endAdornment: (React__default.createElement("div", { style: { width: 24, height: 24 } },
                                 React__default.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
                                     React__default.createElement("path", { d: "M7 10L12 15L17 10H7Z", fill: "black" })))),
@@ -12632,6 +12659,543 @@ var Switch = function (props) {
                         React__default.createElement("path", { d: "M4.5 10.21L1.395 7.105L2.81 5.69L4.5 7.385L9.44 2.44L10.855 3.855L4.5 10.21Z", fill: "#4862CC" })))) }, other))));
 };
 
+var useStylesForMonthButton = makeStyles$1(function (theme) { return ({
+    root: function (props) { return ({
+        width: "100%",
+        height: "100%",
+        borderRadius: 8,
+        border: props.selected
+            ? "1px solid " + theme.primary.primary300
+            : "1px solid " + theme.black.black500,
+        boxSizing: "border-box",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        fontSize: 14,
+        fontWeight: 700,
+        lineHeight: 1.4,
+        backgroundColor: props.selected
+            ? theme.primary.primary50
+            : theme.black.white,
+        cursor: "pointer",
+        "&:hover": {
+            border: props.selected
+                ? "1px solid " + theme.primary.primary300
+                : "1px solid " + theme.black.black600,
+            backgroundColor: props.selected
+                ? theme.primary.primary50
+                : theme.black.black100,
+        },
+    }); },
+}); });
+var useStylesForCalendar = makeStyles$1(function (theme) { return ({
+    head: {
+        width: "100%",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        height: 48,
+        fontSize: 14,
+        fontWeight: 700,
+        marginBottom: 8,
+        position: "relative",
+    },
+    body: {
+        display: "grid",
+        gridTemplateColumns: "1fr 1fr 1fr 1fr 1fr 1fr 1fr",
+        gap: 8,
+    },
+    days: {
+        width: 32,
+        height: 32,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        fontSize: 14,
+        color: theme.black.black600,
+    },
+    date: {
+        width: 32,
+        height: 32,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        marginBottom: 4,
+        fontSize: 14,
+        fontWeight: 700,
+        color: theme.black.black800,
+        cursor: "pointer",
+        borderRadius: "50%",
+        "&:hover": {
+            backgroundColor: theme.primary.primary50,
+        },
+    },
+}); });
+var DatePicker = function (props) {
+    var open = props.open, onClose = props.onClose, format = props.format, mobile = props.mobile, min = props.min, max = props.max, ModalProps = props.ModalProps, defaultValue = props.defaultValue, getValue = props.getValue, value = props.value, other = __rest(props, ["open", "onClose", "format", "mobile", "min", "max", "ModalProps", "defaultValue", "getValue", "value"]);
+    var _a = useState(Number(new Date().getFullYear())), year = _a[0], setYear = _a[1];
+    var _b = useState(Number(new Date().getMonth() + 1)), month = _b[0], setMonth = _b[1];
+    var _c = useState(1), nextMonth = _c[0], setNextMonth = _c[1];
+    var _d = useState(""), date = _d[0], setDate = _d[1];
+    var _e = useState(false), isOpenMonthSelector = _e[0], setIsOpenMonthSelector = _e[1];
+    var _f = useState(false), isClicked = _f[0], setIsClicked = _f[1];
+    useEffect(function () {
+        if (format === "month") {
+            if (month % 2 === 0) {
+                setMonth(month - 1);
+            }
+            else {
+                if (month < 1) {
+                    setMonth(11);
+                    setYear(year - 1);
+                }
+                if (month > 12) {
+                    setMonth(1);
+                    setYear(year + 1);
+                }
+            }
+        }
+    }, [month]);
+    useEffect(function () {
+        if (isClicked && getValue) {
+            if (format === "month") {
+                if (month < 1) {
+                    getValue(year - 1 + "-11");
+                }
+                else if (month > 12) {
+                    getValue(year + 1 + "-1");
+                }
+                else {
+                    getValue(year + "-" + month);
+                }
+            }
+            else if (format === "day") {
+                getValue(date.replace(/\//g, "-"));
+            }
+            else {
+                getValue(String(year));
+            }
+            setIsClicked(false);
+        }
+    }, [isClicked]);
+    useEffect(function () {
+        if (value) {
+            setDate(changeDateFormatToSlash(value));
+        }
+    }, [value]);
+    return (React__default.createElement("div", __assign({}, other), format !== "day" ? (React__default.createElement("div", { style: {
+            borderRadius: 8,
+            border: "1px solid #cccccc",
+            boxSizing: "border-box",
+            width: format === "month" ? 219 : 180,
+            height: 40,
+            display: "grid",
+            alignItems: "center",
+            gridTemplateColumns: "36px 1px 1fr 1px 36px",
+            position: "relative",
+        } },
+        React__default.createElement(IconButton, { onClick: function () {
+                if (format === "month") {
+                    setMonth(month - 2);
+                }
+                else {
+                    setYear(year - 1);
+                }
+                setIsClicked(true);
+            }, style: {
+                width: "100%",
+                height: "100%",
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center",
+                borderRadius: "8px 0 0 8px",
+            } }, icon_arrowleft),
+        verticalline,
+        React__default.createElement("div", { style: {
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center",
+            } },
+            icon_calendar,
+            format === "month" ? (React__default.createElement("div", { style: {
+                    fontSize: 14,
+                    fontWeight: 700,
+                    lineHeight: 1.4,
+                    marginLeft: 4,
+                    cursor: "pointer",
+                }, onClick: function () { return setIsOpenMonthSelector(!isOpenMonthSelector); } },
+                year,
+                "\u5E74",
+                month,
+                "-",
+                month + 1,
+                "\u6708")) : (React__default.createElement("div", { style: {
+                    fontSize: 14,
+                    fontWeight: 700,
+                    lineHeight: 1.4,
+                    marginLeft: 4,
+                } },
+                year,
+                "\u5E74"))),
+        verticalline,
+        React__default.createElement(IconButton, { onClick: function () {
+                if (format === "month") {
+                    setMonth(month + 2);
+                }
+                else {
+                    setYear(year + 1);
+                }
+                setIsClicked(true);
+            }, style: {
+                width: "100%",
+                height: "100%",
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center",
+                borderRadius: "0 8px 8px 0",
+            } }, icon_arrowright),
+        format === "month" ? (React__default.createElement(Grow, { in: isOpenMonthSelector, style: { transformOrigin: "0 0 0" } },
+            React__default.createElement("div", { style: {
+                    border: "1px solid #cccccc",
+                    borderRadius: 8,
+                    boxShadow: "0px 4px 12px rgba(0, 0, 0, 0.1)",
+                    boxSizing: "border-box",
+                    width: 302,
+                    height: 160,
+                    position: "absolute",
+                    backgroundColor: "#ffffff",
+                    zIndex: 1,
+                    top: 52,
+                    left: 0,
+                } },
+                React__default.createElement("div", { style: {
+                        height: 48,
+                        padding: 8,
+                        display: "grid",
+                        gridTemplateColumns: "32px 1fr 32px",
+                        gap: 13,
+                        alignItems: "center",
+                        boxShadow: "0px 1px 0px #ECECEC",
+                    } },
+                    React__default.createElement(IconButton, { hoverColor: "black400", onClick: function () {
+                            setYear(year - 1);
+                            setIsClicked(true);
+                        } }, icon_arrowleft),
+                    React__default.createElement(Typography, { variant: "subtitle", style: { textAlign: "center" } },
+                        year,
+                        "\u5E74"),
+                    React__default.createElement(IconButton, { hoverColor: "black400", onClick: function () {
+                            setYear(year + 1);
+                            setIsClicked(true);
+                        } }, icon_arrowright)),
+                React__default.createElement("div", { style: {
+                        padding: 16,
+                        display: "grid",
+                        alignItems: "center",
+                        gap: 8,
+                        gridTemplateColumns: "1fr 1fr 1fr",
+                        gridTemplateRows: "36px 36px",
+                    } }, Array.from(Array(6).keys()).map(function (_i, i) { return (React__default.createElement(MonthButton, { key: i, index: i, month: month, setMonth: setMonth, setIsOpenMonthSelector: setIsOpenMonthSelector, setIsClicked: setIsClicked })); }))))) : null)) : (React__default.createElement(Modal, __assign({ bodyPadding: mobile ? 16 : undefined, fullWidth: mobile, open: open, onClose: onClose, size: mobile ? undefined : "medium", label: !mobile ? (React__default.createElement(Typography, { variant: "h6" },
+            React__default.createElement("span", { style: { fontWeight: 400 } }, "\u5DF2\u9078\u64C7\uFF1A"),
+            date &&
+                date.split("/")[0] + "\u5E74" + date.split("/")[1] + "\u6708" + date.split("/")[2] + "\u65E5")) : (React__default.createElement(React__default.Fragment, null,
+            React__default.createElement(Typography, { variant: "caption2" },
+                React__default.createElement("span", { style: { fontWeight: 400 } }, "\u5DF2\u9078\u64C7\uFF1A")),
+            React__default.createElement(Typography, { variant: "subtitle" }, date &&
+                date.split("/")[0] + "\u5E74" + date.split("/")[1] + "\u6708" + date.split("/")[2] + "\u65E5"))), primaryButton: {
+            title: "確認",
+            onClick: function () {
+                onClose();
+            },
+        }, secondaryButton: { title: "取消", onClick: onClose }, children: !mobile ? (React__default.createElement("div", { style: { display: "flex", justifyContent: "space-between" } },
+            React__default.createElement(Calendar, { month: month, year: year, date: date, setDate: setDate, min: min, max: max, position: "left", leftClick: function () {
+                    if (month - 1 < 1) {
+                        setMonth(12);
+                        setYear(year - 1);
+                    }
+                    else {
+                        setMonth(month - 1);
+                    }
+                    setNextMonth(month);
+                }, defaultValue: defaultValue, setIsClicked: setIsClicked }),
+            React__default.createElement(Calendar, { month: nextMonth, year: month > nextMonth ? year + 1 : year, date: date, setDate: setDate, min: min, max: max, position: "right", rightClick: function () {
+                    if (nextMonth + 1 > 12) {
+                        setMonth(12);
+                        setNextMonth(1);
+                    }
+                    else if (month + 1 > 12) {
+                        setMonth(1);
+                        setNextMonth(2);
+                        setYear(year + 1);
+                    }
+                    else {
+                        setMonth(month + 1);
+                        setNextMonth(nextMonth + 1);
+                    }
+                }, defaultValue: defaultValue, setIsClicked: setIsClicked }))) : (React__default.createElement(Calendar, { month: month, year: year, date: date, setDate: setDate, min: min, max: max, position: "left", leftClick: function () {
+                if (month - 1 < 1) {
+                    setMonth(12);
+                    setYear(year - 1);
+                }
+                else {
+                    setMonth(month - 1);
+                }
+                setNextMonth(month);
+            }, rightClick: function () {
+                if (nextMonth + 1 > 12) {
+                    setMonth(12);
+                    setNextMonth(1);
+                }
+                else if (month + 1 > 12) {
+                    setMonth(1);
+                    setNextMonth(2);
+                    setYear(year + 1);
+                }
+                else {
+                    setMonth(month + 1);
+                    setNextMonth(nextMonth + 1);
+                }
+            }, defaultValue: defaultValue, setIsClicked: setIsClicked, mobile: mobile })) }, ModalProps)))));
+};
+var MonthButton = function (_a) {
+    var index = _a.index, month = _a.month, setMonth = _a.setMonth, setIsOpenMonthSelector = _a.setIsOpenMonthSelector, setIsClicked = _a.setIsClicked;
+    var styleProps = {
+        selected: 1 + 2 * index === month,
+    };
+    var classes = useStylesForMonthButton(styleProps);
+    return (React__default.createElement("div", { className: classes.root, onClick: function () {
+            setMonth(1 + 2 * index);
+            setIsOpenMonthSelector(false);
+            setIsClicked(true);
+        } },
+        1 + 2 * index,
+        "-",
+        2 + 2 * index,
+        "\u6708"));
+};
+var Calendar = function (_a) {
+    var year = _a.year, month = _a.month, setDate = _a.setDate, date = _a.date, min = _a.min, max = _a.max, leftClick = _a.leftClick, rightClick = _a.rightClick, position = _a.position, defaultValue = _a.defaultValue, setIsClicked = _a.setIsClicked, mobile = _a.mobile;
+    var isBigMonth = (month <= 7 && month % 2 !== 0) || (month >= 8 && month % 2 === 0);
+    var today = defaultValue
+        ? new Date(changeDateFormatToSlash(defaultValue))
+        : new Date();
+    var selectedYear = Number(date.split("/")[0]);
+    var selectedMonth = Number(date.split("/")[1]);
+    var selectedDate = Number(date.split("/")[2]);
+    var msOfMin = min ? new Date(changeDateFormatToSlash(min)).getTime() : 0;
+    var msOfMax = max ? new Date(changeDateFormatToSlash(max)).getTime() : 0;
+    var msOfFirstDayOfMonth = new Date(year + "/" + month + "/1").getTime();
+    var msOfLastDayOfMonth = new Date(year + "/" + month + "/" + (month === 2 ? (year % 4 === 0 ? 29 : 28) : isBigMonth ? 31 : 30)).getTime();
+    var arrowDisabled = (msOfMin !== 0 && position === "left" && msOfFirstDayOfMonth <= msOfMin) ||
+        (msOfMax !== 0 && position === "right" && msOfLastDayOfMonth >= msOfMax);
+    var mobileLeftArrowDisabled = msOfMin !== 0 && msOfFirstDayOfMonth <= msOfMin;
+    var mobileRightArrowDisabled = msOfMax !== 0 && msOfLastDayOfMonth >= msOfMax;
+    var classes = useStylesForCalendar();
+    var theme = useTheme$1();
+    return (React__default.createElement("div", null,
+        React__default.createElement("div", { className: classes.head },
+            year,
+            "\u5E74",
+            month,
+            "\u6708",
+            !mobile ? (React__default.createElement(IconButton, { onClick: position === "left" ? leftClick : rightClick, disabled: arrowDisabled, style: {
+                    position: "absolute",
+                    left: position === "left" ? 8 : undefined,
+                    right: position === "left" ? undefined : 8,
+                    top: 8,
+                    opacity: arrowDisabled ? 0.4 : undefined,
+                } }, position === "left" ? icon_arrowleft : icon_arrowright)) : (React__default.createElement(React__default.Fragment, null,
+                React__default.createElement(IconButton, { onClick: leftClick, disabled: mobileLeftArrowDisabled, style: {
+                        position: "absolute",
+                        left: 8,
+                        top: 8,
+                        opacity: mobileLeftArrowDisabled ? 0.4 : undefined,
+                    } }, icon_arrowleft),
+                React__default.createElement(IconButton, { onClick: rightClick, disabled: mobileRightArrowDisabled, style: {
+                        position: "absolute",
+                        right: 8,
+                        top: 8,
+                        opacity: mobileRightArrowDisabled ? 0.4 : undefined,
+                    } }, icon_arrowright)))),
+        React__default.createElement("div", { className: classes.body },
+            ["日", "一", "二", "三", "四", "五", "六"].map(function (i) { return (React__default.createElement("div", { key: i, className: classes.days }, i)); }),
+            Array.from(Array(month === 2
+                ? year % 4 === 0
+                    ? 29 + firstDayOfMonth(year, month)
+                    : 28 + firstDayOfMonth(year, month)
+                : isBigMonth
+                    ? 31 + firstDayOfMonth(year, month)
+                    : 30 + firstDayOfMonth(year, month)).keys()).map(function (_i, i) {
+                if (i + 1 <= firstDayOfMonth(year, month))
+                    return (React__default.createElement("div", { key: i, style: {
+                            width: 32,
+                            height: 32,
+                        } }));
+                var dateNumber = i + 1 - firstDayOfMonth(year, month);
+                var isSelected = year === selectedYear &&
+                    month === selectedMonth &&
+                    dateNumber === selectedDate;
+                var isToday = year === today.getFullYear() &&
+                    month === today.getMonth() + 1 &&
+                    dateNumber === today.getDate();
+                var msOfDate = new Date(year + "/" + month + "/" + dateNumber).getTime();
+                var disabled = (msOfMin !== 0 && msOfDate < msOfMin) ||
+                    (msOfMax !== 0 && msOfDate > msOfMax);
+                return (React__default.createElement("div", { key: i, className: classes.date, onClick: function () {
+                        setDate(year + "/" + month + "/" + dateNumber);
+                        setIsClicked(true);
+                    }, style: {
+                        backgroundColor: isSelected
+                            ? theme.primary.primary400
+                            : isToday
+                                ? theme.black.black400
+                                : undefined,
+                        color: isSelected ? theme.black.white : undefined,
+                        border: isSelected
+                            ? "1px solid " + theme.primary.primary600
+                            : undefined,
+                        opacity: disabled ? 0.4 : undefined,
+                        pointerEvents: disabled ? "none" : undefined,
+                    } }, dateNumber));
+            }))));
+};
+var firstDayOfMonth = function (year, month) {
+    var firstDay = year + "/" + month + "/" + 1;
+    return new Date(firstDay).getDay();
+};
+var changeDateFormatToSlash = function (date) {
+    return date.replace(/-/g, "/");
+};
+var verticalline = (React__default.createElement("div", { style: { width: 1, height: "100%", backgroundColor: "#cccccc" } }));
+var icon_arrowleft = (React__default.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    React__default.createElement("path", { d: "M12.8417 13.8167L9.02502 10L12.8417 6.175L11.6667 5L6.66669 10L11.6667 15L12.8417 13.8167Z", fill: "black" })));
+var icon_arrowright = (React__default.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    React__default.createElement("path", { d: "M7.15833 13.8167L10.975 10L7.15833 6.175L8.33333 5L13.3333 10L8.33333 15L7.15833 13.8167Z", fill: "black" })));
+var icon_calendar = (React__default.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    React__default.createElement("path", { d: "M5.83333 8.33333H10V12.5H5.83333V8.33333ZM15.8333 15.8333H4.16667V6.66667H15.8333V15.8333ZM15.8333 2.5H15V0.833332H13.3333V2.5H6.66667V0.833332H5V2.5H4.16667C3.24167 2.5 2.5 3.25 2.5 4.16667V15.8333C2.5 16.2754 2.67559 16.6993 2.98816 17.0118C3.30072 17.3244 3.72464 17.5 4.16667 17.5H15.8333C16.2754 17.5 16.6993 17.3244 17.0118 17.0118C17.3244 16.6993 17.5 16.2754 17.5 15.8333V4.16667C17.5 3.72464 17.3244 3.30071 17.0118 2.98815C16.6993 2.67559 16.2754 2.5 15.8333 2.5Z", fill: "#6F6F6F" })));
+
+var Breadcrumb = function (props) {
+    var maxItems = props.maxItems, separator = props.separator, children = props.children, other = __rest(props, ["maxItems", "separator", "children"]);
+    var _a = useState(false), isHoverThreeDots = _a[0], setIsHoverThreeDots = _a[1];
+    var _b = useState(null), anchorEl = _b[0], setAnchorEl = _b[1];
+    var handleThreeDotsClick = function (event) {
+        setAnchorEl(event.currentTarget);
+    };
+    var handleThreeDotsClose = function () {
+        setAnchorEl(null);
+    };
+    return (React__default.createElement("div", __assign({ style: { display: "flex", alignItems: "center" } }, other),
+        maxItems && (children === null || children === void 0 ? void 0 : children.length) > maxItems ? (
+        /**隱藏內容 */
+        React__default.createElement(React__default.Fragment, null,
+            React__default.createElement("div", { style: {
+                    display: "flex",
+                    alignItems: "center",
+                    fontSize: 14,
+                    fontWeight: 400,
+                } },
+                children[0],
+                React__default.createElement(Typography, { variant: "body2", style: { margin: "0 8px" } }, separator ? separator : "/"),
+                React__default.createElement("div", { onClick: handleThreeDotsClick, onMouseEnter: function () { return setIsHoverThreeDots(true); }, onMouseLeave: function () { return setIsHoverThreeDots(false); }, style: { cursor: "pointer" } }, isHoverThreeDots ? icon_threedots_hover : icon_threedots),
+                React__default.createElement(Typography, { variant: "body2", style: { margin: "0 8px" } }, separator ? separator : "/")),
+            children
+                .slice((children === null || children === void 0 ? void 0 : children.length) - maxItems + 1)
+                .map(function (i, index) {
+                return (React__default.createElement("div", { key: Math.random().toString(36).substr(2), style: {
+                        display: "flex",
+                        alignItems: "center",
+                        fontSize: 14,
+                        fontWeight: index + 1 === (children === null || children === void 0 ? void 0 : children.length) ? 700 : 400,
+                    } },
+                    i,
+                    index + 1 !== maxItems - 1 && (React__default.createElement(Typography, { variant: "body2", style: { margin: "0 8px" } }, separator ? separator : "/"))));
+            }))) : (children === null || children === void 0 ? void 0 : children.map(function (i, index) {
+            return (React__default.createElement("div", { key: Math.random().toString(36).substr(2), style: {
+                    display: "flex",
+                    alignItems: "center",
+                    fontSize: 14,
+                    fontWeight: index + 1 === (children === null || children === void 0 ? void 0 : children.length) ? 700 : 400,
+                } },
+                i,
+                index + 1 !== (children === null || children === void 0 ? void 0 : children.length) && (React__default.createElement(Typography, { variant: "body2", style: { margin: "0 8px" } }, separator ? separator : "/"))));
+        })),
+        React__default.createElement(Menu, { anchorEl: anchorEl, keepMounted: true, open: Boolean(anchorEl), onClose: handleThreeDotsClose, anchorOrigin: { vertical: "bottom", horizontal: -16 }, getContentAnchorEl: null }, children === null || children === void 0 ? void 0 : children.slice(1, (children === null || children === void 0 ? void 0 : children.length) - maxItems + 1).map(function (i) {
+            var content = i.props.children;
+            var href = i.props.href;
+            var target = i.props.target;
+            console.log(target);
+            return (React__default.createElement(MenuItem, { key: Math.random().toString(36).substr(2), onClick: function () {
+                    if (target && target === "_blank") {
+                        window.open(href);
+                    }
+                    else {
+                        window.location.href = href;
+                    }
+                } }, content));
+        }))));
+};
+var icon_threedots = (React__default.createElement("svg", { width: "12", height: "20", viewBox: "0 0 12 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    React__default.createElement("path", { d: "M1.946 16.182C2.45 16.182 2.87 15.79 2.87 15.216C2.87 14.642 2.45 14.222 1.946 14.222C1.442 14.222 1.022 14.642 1.022 15.216C1.022 15.79 1.442 16.182 1.946 16.182ZM5.84248 16.182C6.34648 16.182 6.76648 15.79 6.76648 15.216C6.76648 14.642 6.34648 14.222 5.84248 14.222C5.33848 14.222 4.91848 14.642 4.91848 15.216C4.91848 15.79 5.33848 16.182 5.84248 16.182ZM9.73897 16.182C10.243 16.182 10.663 15.79 10.663 15.216C10.663 14.642 10.243 14.222 9.73897 14.222C9.23497 14.222 8.81497 14.642 8.81497 15.216C8.81497 15.79 9.23497 16.182 9.73897 16.182Z", fill: "#4B4B4B" })));
+var icon_threedots_hover = (React__default.createElement("svg", { width: "12", height: "20", viewBox: "0 0 12 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    React__default.createElement("path", { d: "M1.946 16.182C2.45 16.182 2.87 15.79 2.87 15.216C2.87 14.642 2.45 14.222 1.946 14.222C1.442 14.222 1.022 14.642 1.022 15.216C1.022 15.79 1.442 16.182 1.946 16.182ZM5.84248 16.182C6.34648 16.182 6.76648 15.79 6.76648 15.216C6.76648 14.642 6.34648 14.222 5.84248 14.222C5.33848 14.222 4.91848 14.642 4.91848 15.216C4.91848 15.79 5.33848 16.182 5.84248 16.182ZM9.73897 16.182C10.243 16.182 10.663 15.79 10.663 15.216C10.663 14.642 10.243 14.222 9.73897 14.222C9.23497 14.222 8.81497 14.642 8.81497 15.216C8.81497 15.79 9.23497 16.182 9.73897 16.182Z", fill: "#4B4B4B" }),
+    React__default.createElement("path", { d: "M0 18.1H11.685V18.8H0V18.1Z", fill: "#4B4B4B" })));
+
+var BreadcrumbItem = function (props) {
+    var last = props.last, other = __rest(props, ["last"]);
+    return (React__default.createElement(Link, __assign({}, other, { color: last ? "black1000" : "black800", style: {
+            fontWeight: last ? 700 : 400,
+            cursor: last ? "unset" : undefined,
+            textDecoration: last ? "none" : undefined,
+        } })));
+};
+
+var useStyles$n = makeStyles$1(function (theme) { return ({
+    root: function (props) { return ({
+        width: props.width ? props.width : 350,
+        height: props.height ? props.height : "100%",
+        backgroundColor: theme.black.white,
+        boxSizing: "border-box",
+        border: "1px solid " + theme.black.black500,
+        borderRadius: 8,
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "space-between",
+        overflow: "hidden",
+    }); },
+    body: { padding: 24, width: "100%", height: "100%" },
+    buttonblock: {
+        width: "100%",
+        boxShadow: "0px -1px 0px " + theme.black.black400,
+        borderRadius: " 0px 0px 8px 8px",
+        display: "flex",
+        padding: 0,
+    },
+}); });
+var Card = function (props) {
+    var width = props.width, height = props.height, children = props.children, buttons = props.buttons, bodyStyle = props.bodyStyle, loading = props.loading, other = __rest(props, ["width", "height", "children", "buttons", "bodyStyle", "loading"]);
+    var useStylesProps = { width: width, height: height };
+    var classes = useStyles$n(useStylesProps);
+    var theme = useTheme$1();
+    return (React__default.createElement("div", __assign({ className: classes.root }, other),
+        React__default.createElement("div", { className: classes.body, style: bodyStyle }, !loading ? (children) : (React__default.createElement("div", { style: { width: "100%", height: "100%" } },
+            React__default.createElement(Skeleton$1, { width: "40%", height: "calc((100% - 16px) /3 )" }),
+            React__default.createElement(SWAPSpace, { size: 8 }),
+            React__default.createElement(Skeleton$1, { width: "100%", height: "calc((100% - 16px) /3 )" }),
+            React__default.createElement(SWAPSpace, { size: 8 }),
+            React__default.createElement("div", { style: {
+                    display: "flex",
+                    justifyContent: "space-between",
+                    width: "100%",
+                    height: "calc((100% - 16px) /3 )",
+                } },
+                React__default.createElement(Skeleton$1, { width: "26.4%", height: "100%" }),
+                React__default.createElement(Skeleton$1, { width: "26.4%", height: "100%" }))))),
+        React__default.createElement("div", { className: classes.buttonblock }, !loading ? (buttons === null || buttons === void 0 ? void 0 : buttons.map(function (i, index) { return (React__default.createElement(Button, { key: Math.random().toString(36).substr(2), fullWidth: true, variant: i.variant ? i.variant : "black", style: __assign({ borderRight: index + 1 === (buttons === null || buttons === void 0 ? void 0 : buttons.length)
+                    ? undefined
+                    : "1px solid " + theme.black.black400, borderRadius: "0px 0px 0px 0px" }, i.style), onClick: i.onClick, disabled: i.disabled, loading: i.loading }, i.title)); })) : (React__default.createElement("div", { style: { padding: "16px 24px", width: "100%", height: 48 } },
+            React__default.createElement(Skeleton$1, { width: "100%", height: "100%" }))))));
+};
+
 var Container = function (_a) {
     var children = _a.children, style = _a.style, maxWidth = _a.maxWidth, padding = _a.padding;
     var XXS = useBreakpoints("xxs");
@@ -12689,5 +13253,5 @@ var Container = function (_a) {
     return (React__default.createElement(MaterialContainer, { className: classes.root, style: style }, children));
 };
 
-export { AutoComplete, Banner, Button, CheckBox, CheckBoxList, Chip, CircularProgress, Container, Dropdown, IconButton, Link, Menu, MenuItem, Modal, Pagination$1 as Pagination, Paper, Progress, RadioButton, RadioList, SWAPAppBar, SWAPBanner, SWAPCopyField, SWAPDialog, SWAPExpenseTypes, SWAPIncomeTypes, SWAPLogo, SWAPModal, SWAPShare, SWAPSpace, SWAPTaxDescription, SWAPTaxExpenseLabel, SWAPTaxField, SWAPTaxIncomeLabel, SWAPTheme, SegmentedTab, SegmentedTabs, Select, Skeleton$1 as Skeleton, Snackbar, Styles, Switch, Tab, TabPanel, Tabs, TaxTextField, TextField, Tooltip, Typography, useBreakpoints };
+export { AutoComplete, Banner, Breadcrumb, BreadcrumbItem, Button, Card, CheckBox, CheckBoxList, Chip, CircularProgress, Container, DatePicker, Dropdown, IconButton, Link, Menu, MenuItem, Modal, Pagination$1 as Pagination, Paper, Progress, RadioButton, RadioList, SWAPAppBar, SWAPBanner, SWAPCopyField, SWAPDialog, SWAPExpenseTypes, SWAPIncomeTypes, SWAPLogo, SWAPModal, SWAPShare, SWAPSpace, SWAPTaxDescription, SWAPTaxExpenseLabel, SWAPTaxField, SWAPTaxIncomeLabel, SWAPTheme, SegmentedTab, SegmentedTabs, Select, Skeleton$1 as Skeleton, Snackbar, Styles, Switch, Tab, TabPanel, Tabs, TaxTextField, TextField, Tooltip, Typography, useBreakpoints };
 //# sourceMappingURL=index.esm.js.map