@yosgo/swap-ui 1.0.131 → 1.0.133

package/build/Typography/Typography.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { TypographyProps } from "./Typography.types";
-declare const Typography: React.FC<TypographyProps>;
-export default Typography;
+declare const _default: React.NamedExoticComponent<TypographyProps>;
+export default _default;

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, Grow } from '@material-ui/core';
+import { AppBar, Toolbar, Container as Container$1, Grid, Button as Button$1, Typography as Typography$2, 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';
@@ -177,46 +177,42 @@ var templateObject_1;
 
 var SWAPSpace = function (_a) {
     var size = _a.size;
-    return (React__default.createElement("div", null,
-        React__default.createElement(SWAPSpaceWrap, { size: size })));
-};
-var SWAPSpaceWrap = styled.div(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n  height: ", "px;\n"], ["\n  height: ",
-    "px;\n"])), function (_a) {
-    var size = _a.size;
-    if (size === "xxs") {
-        return 4;
-    }
-    else if (size === "xs") {
-        return 8;
-    }
-    else if (size === "s") {
-        return 12;
-    }
-    else if (size === "m") {
-        return 16;
-    }
-    else if (size === "l") {
-        return 24;
-    }
-    else if (size === "xl") {
-        return 32;
-    }
-    else if (size === "2xl") {
-        return 40;
-    }
-    else if (size === "3xl") {
-        return 48;
-    }
-    else if (size === "4xl") {
-        return 56;
-    }
-    else if (typeof size === "number") {
-        return size;
-    }
-    else
-        return 16;
-});
-var templateObject_1$1;
+    var height = function () {
+        if (size === "xxs") {
+            return 4;
+        }
+        else if (size === "xs") {
+            return 8;
+        }
+        else if (size === "s") {
+            return 12;
+        }
+        else if (size === "m") {
+            return 16;
+        }
+        else if (size === "l") {
+            return 24;
+        }
+        else if (size === "xl") {
+            return 32;
+        }
+        else if (size === "2xl") {
+            return 40;
+        }
+        else if (size === "3xl") {
+            return 48;
+        }
+        else if (size === "4xl") {
+            return 56;
+        }
+        else if (typeof size === "number") {
+            return size;
+        }
+        else
+            return 16;
+    };
+    return React__default.createElement("div", { style: { height: height() + "px" } });
+};
 
 var SWAPAppBar = function (_a) {
     var logo = _a.logo, primaryButton = _a.primaryButton, secondaryButton = _a.secondaryButton, navigations = _a.navigations;
@@ -245,7 +241,7 @@ var SWAPAppBar = function (_a) {
                                         navigations.length > 0 &&
                                         navigations.map(function (item, index) { return (React__default.createElement(Grid, { item: true, key: "nav_" + index, className: "mobile_hide" },
                                             React__default.createElement(Button$1, { onClick: function () { return item.onClick(); }, disabled: item.disabled },
-                                                React__default.createElement(Typography$1, { variant: "body2" }, item.title)))); }))),
+                                                React__default.createElement(Typography$2, { variant: "body2" }, item.title)))); }))),
                             React__default.createElement(Grid, { item: true, style: { flexGrow: 1, flexBasis: "auto" } },
                                 React__default.createElement(Grid, { container: true, spacing: 1, justify: "flex-end", alignItems: "center", className: "mobile_hide" },
                                     React__default.createElement(Grid, { item: true }, secondaryButton &&
@@ -272,8 +268,8 @@ var SWAPAppBar = function (_a) {
                                                 primaryButton.title.length > 0 ? (React__default.createElement(MenuItem$1, { disabled: primaryButton.disabled, onClick: function () { return primaryButton.onClick(); } }, primaryButton.title)) : null))))),
                         React__default.createElement(SWAPSpace, { size: "s" })))))));
 };
-var SWAPAppBarWrap = styled.div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n  .mobile_hide {\n    @media screen and (max-width: 960px) {\n      display: none;\n    }\n  }\n  .mobile_show {\n    display: none;\n    @media screen and (max-width: 960px) {\n      display: block;\n    }\n  }\n"], ["\n  .mobile_hide {\n    @media screen and (max-width: 960px) {\n      display: none;\n    }\n  }\n  .mobile_show {\n    display: none;\n    @media screen and (max-width: 960px) {\n      display: block;\n    }\n  }\n"])));
-var templateObject_1$2;
+var SWAPAppBarWrap = styled.div(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n  .mobile_hide {\n    @media screen and (max-width: 960px) {\n      display: none;\n    }\n  }\n  .mobile_show {\n    display: none;\n    @media screen and (max-width: 960px) {\n      display: block;\n    }\n  }\n"], ["\n  .mobile_hide {\n    @media screen and (max-width: 960px) {\n      display: none;\n    }\n  }\n  .mobile_show {\n    display: none;\n    @media screen and (max-width: 960px) {\n      display: block;\n    }\n  }\n"])));
+var templateObject_1$1;
 
 var ElementId = function (title) { return "swap_banner_" + title; };
 var SWAPBanner = function (_a) {
@@ -297,9 +293,9 @@ var SWAPBanner = function (_a) {
                     status === "critical" ? React__default.createElement("div", { className: "c_bar bar" }) : null,
                     React__default.createElement(Container$1, { maxWidth: "lg" },
                         React__default.createElement(SWAPSpace, { size: "l" }),
-                        React__default.createElement(Typography$1, { variant: "h6" }, title),
+                        React__default.createElement(Typography$2, { variant: "h6" }, title),
                         React__default.createElement(SWAPSpace, { size: "s" }),
-                        React__default.createElement(Typography$1, { variant: "body2" }, content),
+                        React__default.createElement(Typography$2, { variant: "body2" }, content),
                         primaryButton || secondaryButton ? (React__default.createElement(Grid, { container: true, spacing: 1 },
                             primaryButton &&
                                 primaryButton.title &&
@@ -315,8 +311,8 @@ var SWAPBanner = function (_a) {
                                 React__default.createElement(Button$1, { variant: "text", onClick: function () { return secondaryButton.onClick(); }, disabled: secondaryButton.disabled }, secondaryButton.title))) : null)) : null,
                         React__default.createElement(SWAPSpace, { size: "l" })))))));
 };
-var SWAPBannerWrap = styled.div(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n  .swap_banner {\n    position: relative;\n    overflow: hidden;\n    .banner_anchor {\n      position: absolute;\n      top: -36px;\n      left: 0;\n      width: 0;\n      height: 0;\n    }\n    .bar {\n      height: 12px;\n      &.s_bar {\n        background: #3f51b5;\n      }\n      &.w_bar {\n        background: #ffb11b;\n      }\n      &.c_bar {\n        background: rgb(220, 0, 78);\n      }\n    }\n  }\n"], ["\n  .swap_banner {\n    position: relative;\n    overflow: hidden;\n    .banner_anchor {\n      position: absolute;\n      top: -36px;\n      left: 0;\n      width: 0;\n      height: 0;\n    }\n    .bar {\n      height: 12px;\n      &.s_bar {\n        background: #3f51b5;\n      }\n      &.w_bar {\n        background: #ffb11b;\n      }\n      &.c_bar {\n        background: rgb(220, 0, 78);\n      }\n    }\n  }\n"])));
-var templateObject_1$3;
+var SWAPBannerWrap = styled.div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n  .swap_banner {\n    position: relative;\n    overflow: hidden;\n    .banner_anchor {\n      position: absolute;\n      top: -36px;\n      left: 0;\n      width: 0;\n      height: 0;\n    }\n    .bar {\n      height: 12px;\n      &.s_bar {\n        background: #3f51b5;\n      }\n      &.w_bar {\n        background: #ffb11b;\n      }\n      &.c_bar {\n        background: rgb(220, 0, 78);\n      }\n    }\n  }\n"], ["\n  .swap_banner {\n    position: relative;\n    overflow: hidden;\n    .banner_anchor {\n      position: absolute;\n      top: -36px;\n      left: 0;\n      width: 0;\n      height: 0;\n    }\n    .bar {\n      height: 12px;\n      &.s_bar {\n        background: #3f51b5;\n      }\n      &.w_bar {\n        background: #ffb11b;\n      }\n      &.c_bar {\n        background: rgb(220, 0, 78);\n      }\n    }\n  }\n"])));
+var templateObject_1$2;
 
 function unwrapExports (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
@@ -615,8 +611,8 @@ var SWAPCopyField = function (_a) {
                                     React__default.createElement("small", null, copyButtonText)))))),
                 } }))));
 };
-var SWAPCopyFieldWrap = styled.div(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n  .cpy_btn_element {\n    width: auto;\n    min-width: 72px;\n    text-align: right;\n  }\n"], ["\n  .cpy_btn_element {\n    width: auto;\n    min-width: 72px;\n    text-align: right;\n  }\n"])));
-var templateObject_1$4;
+var SWAPCopyFieldWrap = styled.div(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n  .cpy_btn_element {\n    width: auto;\n    min-width: 72px;\n    text-align: right;\n  }\n"], ["\n  .cpy_btn_element {\n    width: auto;\n    min-width: 72px;\n    text-align: right;\n  }\n"])));
+var templateObject_1$3;
 
 var SWAPDialog = function (_a) {
     var open = _a.open, title = _a.title, helpText = _a.helpText, children = _a.children, primaryButton = _a.primaryButton, secondaryButton = _a.secondaryButton, status = _a.status;
@@ -634,8 +630,8 @@ var SWAPDialog = function (_a) {
                                 status === "critical" ? React__default.createElement("div", { className: "c_bar bar" }) : null,
                                 React__default.createElement(Container$1, { maxWidth: "lg" },
                                     React__default.createElement(SWAPSpace, { size: "s" }),
-                                    React__default.createElement(Typography$1, { variant: "h5" }, title),
-                                    helpText ? (React__default.createElement(Typography$1, { variant: "body2" }, helpText)) : null,
+                                    React__default.createElement(Typography$2, { variant: "h5" }, title),
+                                    helpText ? (React__default.createElement(Typography$2, { variant: "body2" }, helpText)) : null,
                                     React__default.createElement(SWAPSpace, { size: "s" })),
                                 children ? React__default.createElement(Divider, null) : null),
                             children ? (React__default.createElement("div", { className: "dialog_inner_body" },
@@ -654,8 +650,8 @@ var SWAPDialog = function (_a) {
                                         React__default.createElement(Grid, { item: true }, primaryButton && primaryButton.title ? (React__default.createElement(Button$1, { size: "large", onClick: function () { return primaryButton.onClick(); }, disabled: primaryButton.disabled }, primaryButton.title)) : null)),
                                     React__default.createElement(SWAPSpace, { size: "s" }))))))))));
 };
-var SWAPDialogWrap = styled.div(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n  box-sizing: border-box;\n  position: relative;\n  .bar {\n    position: absolute;\n    height: 12px;\n    top: 0;\n    left: 0;\n    width: 100%;\n    &.s_bar {\n      background: #3f51b5;\n    }\n    &.w_bar {\n      background: #ffb11b;\n    }\n    &.c_bar {\n      background: rgb(220, 0, 78);\n    }\n  }\n  .dialog_inner {\n    margin-top: 12px;\n  }\n"], ["\n  box-sizing: border-box;\n  position: relative;\n  .bar {\n    position: absolute;\n    height: 12px;\n    top: 0;\n    left: 0;\n    width: 100%;\n    &.s_bar {\n      background: #3f51b5;\n    }\n    &.w_bar {\n      background: #ffb11b;\n    }\n    &.c_bar {\n      background: rgb(220, 0, 78);\n    }\n  }\n  .dialog_inner {\n    margin-top: 12px;\n  }\n"])));
-var templateObject_1$5;
+var SWAPDialogWrap = styled.div(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n  box-sizing: border-box;\n  position: relative;\n  .bar {\n    position: absolute;\n    height: 12px;\n    top: 0;\n    left: 0;\n    width: 100%;\n    &.s_bar {\n      background: #3f51b5;\n    }\n    &.w_bar {\n      background: #ffb11b;\n    }\n    &.c_bar {\n      background: rgb(220, 0, 78);\n    }\n  }\n  .dialog_inner {\n    margin-top: 12px;\n  }\n"], ["\n  box-sizing: border-box;\n  position: relative;\n  .bar {\n    position: absolute;\n    height: 12px;\n    top: 0;\n    left: 0;\n    width: 100%;\n    &.s_bar {\n      background: #3f51b5;\n    }\n    &.w_bar {\n      background: #ffb11b;\n    }\n    &.c_bar {\n      background: rgb(220, 0, 78);\n    }\n  }\n  .dialog_inner {\n    margin-top: 12px;\n  }\n"])));
+var templateObject_1$4;
 
 var ModalOpenEffect = function (props) {
     return (React__default.createElement(React__default.Fragment, null, props.sm ? (React__default.createElement(Slide, { in: props.in, direction: "up", mountOnEnter: true, unmountOnExit: true, timeout: { enter: 300, exit: 300 } },
@@ -730,8 +726,8 @@ var SWAPModal = function (_a) {
                                 React__default.createElement(SWAPSpace, { size: "m" }),
                                 React__default.createElement(Grid, { container: true, wrap: "nowrap", alignItems: "center", spacing: 1, justify: "space-between" },
                                     React__default.createElement(Grid, { item: true },
-                                        React__default.createElement(Typography$1, { variant: "h5" }, title),
-                                        helpText ? (React__default.createElement(Typography$1, { variant: "body2", color: "textSecondary" }, helpText)) : null),
+                                        React__default.createElement(Typography$2, { variant: "h5" }, title),
+                                        helpText ? (React__default.createElement(Typography$2, { variant: "body2", color: "textSecondary" }, helpText)) : null),
                                     React__default.createElement(Grid, { item: true },
                                         React__default.createElement(IconButton$1, { onClick: function () { return modalCloseWindow(); } },
                                             React__default.createElement(CloseIcon$1, { fontSize: "large" })))),
@@ -759,7 +755,7 @@ var SWAPModal = function (_a) {
                                         React__default.createElement(Grid, { container: true, wrap: "nowrap", alignItems: "center", justify: "flex-end" },
                                             React__default.createElement(Grid, { item: true, style: { margin: "0 6px -6px 0" } }, successMessage ? (React__default.createElement(CheckCircleIcon, { color: "primary" })) : (React__default.createElement(WarningIcon, { color: "secondary" }))),
                                             React__default.createElement(Grid, { item: true },
-                                                React__default.createElement(Typography$1, { variant: "body1" }, successMessage ? successMessage : errorMessage))),
+                                                React__default.createElement(Typography$2, { variant: "body1" }, successMessage ? successMessage : errorMessage))),
                                         React__default.createElement(SWAPSpace, { size: "s" })))) : null,
                                 !steps ||
                                     (steps &&
@@ -780,8 +776,8 @@ var SWAPModal = function (_a) {
                                             React__default.createElement(Button$1, { variant: "text", size: sm ? "medium" : "large", onClick: function () { return handleStepButton("next"); } }, steps[stepIndex].nextStepText || "下一步"))))),
                                 React__default.createElement(SWAPSpace, { size: "m" })))))))));
 };
-var SWAPModalWrap = styled.div(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n  outline: 0px;\n  position: absolute;\n  height: 100vh;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  .modal_inner {\n    border-radius: 9px;\n    overflow: hidden;\n    position: relative;\n    width: 48vw;\n    z-index: 2;\n    .modal_inner_header {\n      position: absolute;\n      width: 100%;\n      left: 0;\n      top: 0;\n      background: white;\n      z-index: 1;\n    }\n    .modal_inner_body {\n      position: relative;\n      overflow-y: auto;\n      z-index: 1;\n    }\n    .modal_inner_bottom {\n      position: absolute;\n      width: 100%;\n      left: 0;\n      bottom: 0;\n      background: white;\n      z-index: 1;\n    }\n  }\n  @media screen and (max-width: 960px) {\n    align-items: flex-end;\n    .modal_inner {\n      border-bottom-left-radius: 0px;\n      border-bottom-right-radius: 0px;\n      width: 100vw;\n    }\n  }\n"], ["\n  outline: 0px;\n  position: absolute;\n  height: 100vh;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  .modal_inner {\n    border-radius: 9px;\n    overflow: hidden;\n    position: relative;\n    width: 48vw;\n    z-index: 2;\n    .modal_inner_header {\n      position: absolute;\n      width: 100%;\n      left: 0;\n      top: 0;\n      background: white;\n      z-index: 1;\n    }\n    .modal_inner_body {\n      position: relative;\n      overflow-y: auto;\n      z-index: 1;\n    }\n    .modal_inner_bottom {\n      position: absolute;\n      width: 100%;\n      left: 0;\n      bottom: 0;\n      background: white;\n      z-index: 1;\n    }\n  }\n  @media screen and (max-width: 960px) {\n    align-items: flex-end;\n    .modal_inner {\n      border-bottom-left-radius: 0px;\n      border-bottom-right-radius: 0px;\n      width: 100vw;\n    }\n  }\n"])));
-var templateObject_1$6;
+var SWAPModalWrap = styled.div(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n  outline: 0px;\n  position: absolute;\n  height: 100vh;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  .modal_inner {\n    border-radius: 9px;\n    overflow: hidden;\n    position: relative;\n    width: 48vw;\n    z-index: 2;\n    .modal_inner_header {\n      position: absolute;\n      width: 100%;\n      left: 0;\n      top: 0;\n      background: white;\n      z-index: 1;\n    }\n    .modal_inner_body {\n      position: relative;\n      overflow-y: auto;\n      z-index: 1;\n    }\n    .modal_inner_bottom {\n      position: absolute;\n      width: 100%;\n      left: 0;\n      bottom: 0;\n      background: white;\n      z-index: 1;\n    }\n  }\n  @media screen and (max-width: 960px) {\n    align-items: flex-end;\n    .modal_inner {\n      border-bottom-left-radius: 0px;\n      border-bottom-right-radius: 0px;\n      width: 100vw;\n    }\n  }\n"], ["\n  outline: 0px;\n  position: absolute;\n  height: 100vh;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  .modal_inner {\n    border-radius: 9px;\n    overflow: hidden;\n    position: relative;\n    width: 48vw;\n    z-index: 2;\n    .modal_inner_header {\n      position: absolute;\n      width: 100%;\n      left: 0;\n      top: 0;\n      background: white;\n      z-index: 1;\n    }\n    .modal_inner_body {\n      position: relative;\n      overflow-y: auto;\n      z-index: 1;\n    }\n    .modal_inner_bottom {\n      position: absolute;\n      width: 100%;\n      left: 0;\n      bottom: 0;\n      background: white;\n      z-index: 1;\n    }\n  }\n  @media screen and (max-width: 960px) {\n    align-items: flex-end;\n    .modal_inner {\n      border-bottom-left-radius: 0px;\n      border-bottom-right-radius: 0px;\n      width: 100vw;\n    }\n  }\n"])));
+var templateObject_1$5;
 
 function objectToGetParams(object) {
     var params = Object.entries(object)
@@ -1366,8 +1362,8 @@ var SWAPShare = function (_a) {
         },
     ].map(function (item, index) { return (React__default.createElement("div", { key: "share_btn_" + index }, item.el)); })));
 };
-var SWAPShareWrap = styled.div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n  height: 40px;\n  position: relative;\n  .swap_share_icon {\n    cursor: pointer;\n  }\n"], ["\n  height: 40px;\n  position: relative;\n  .swap_share_icon {\n    cursor: pointer;\n  }\n"])));
-var templateObject_1$7;
+var SWAPShareWrap = styled.div(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n  height: 40px;\n  position: relative;\n  .swap_share_icon {\n    cursor: pointer;\n  }\n"], ["\n  height: 40px;\n  position: relative;\n  .swap_share_icon {\n    cursor: pointer;\n  }\n"])));
+var templateObject_1$6;
 
 var SWAPTaxField = function (_a) {
     var onChange = _a.onChange, taxDescription = _a.taxDescription;
@@ -1457,14 +1453,14 @@ var SWAPTaxField = function (_a) {
                         React__default.createElement(InputLabel, { htmlFor: "case_type" }, typeFieldLabel),
                         React__default.createElement(Select$1, { variant: "outlined", label: "" + typeFieldLabel, value: type, onChange: function (e) { return handleTypeChange("" + e.target.value); } },
                             React__default.createElement(MenuItem$1, { disabled: true, value: typeFieldDefault },
-                                React__default.createElement(Typography$1, { variant: "body2", color: "textSecondary" }, typeFieldDefault)),
+                                React__default.createElement(Typography$2, { variant: "body2", color: "textSecondary" }, typeFieldDefault)),
                             typeOptions.map(function (option, index) { return (React__default.createElement(MenuItem$1, { key: "type_" + index, value: "" + option[1] }, option[0])); })))),
                 React__default.createElement(Grid, { item: true, xs: 8, sm: 8, md: 8, lg: 8 },
                     React__default.createElement(FormControl, { variant: "outlined", style: { width: "100%" } },
                         React__default.createElement(InputLabel, { htmlFor: "case_type" }, caseFieldLabel),
                         React__default.createElement(Select$1, { variant: "outlined", label: "" + caseFieldLabel, value: option, onChange: function (e) { return handleOptionChange(e.target.value); } },
                             React__default.createElement(MenuItem$1, { disabled: true, value: optionFieldDefault },
-                                React__default.createElement(Typography$1, { variant: "body2", color: "textSecondary" }, optionFieldDefault)),
+                                React__default.createElement(Typography$2, { variant: "body2", color: "textSecondary" }, optionFieldDefault)),
                             caseOptions
                                 .filter(function (i) { return i[3] === type; })
                                 .map(function (option, index) { return (React__default.createElement(MenuItem$1, { key: "case_" + index, value: option[0], className: "option_item", style: {
@@ -1487,7 +1483,7 @@ var SWAPTaxField = function (_a) {
                                 }, onClose: function () {
                                     setModal(false);
                                 }, successMessage: modalMsg, errorMessage: modalErrorMsg, closeWindowOnSuccessMessage: true, children: React__default.createElement("div", null,
-                                    React__default.createElement(Typography$1, { variant: "body1" }, "\u7531\u65BC\u81EA\u7531\u5DE5\u4F5C\u8005\u7684\u6848\u4EF6\u5167\u5BB9\u591A\u6A23\uFF0C\u82E5\u60A8\u7684\u6848\u4EF6\u5167\u5BB9\u4E0D\u5728 SWAP \u6536\u9304\u7684\u4E0B\u62C9\u9078\u55AE\u4E2D\u53EF\u5728\u6B64\u624B\u52D5\u8A2D\u5B9A\u672C\u6B21\u6848\u4EF6\u7684\u7533\u5831\u985E\u5225\u3002"),
+                                    React__default.createElement(Typography$2, { variant: "body1" }, "\u7531\u65BC\u81EA\u7531\u5DE5\u4F5C\u8005\u7684\u6848\u4EF6\u5167\u5BB9\u591A\u6A23\uFF0C\u82E5\u60A8\u7684\u6848\u4EF6\u5167\u5BB9\u4E0D\u5728 SWAP \u6536\u9304\u7684\u4E0B\u62C9\u9078\u55AE\u4E2D\u53EF\u5728\u6B64\u624B\u52D5\u8A2D\u5B9A\u672C\u6B21\u6848\u4EF6\u7684\u7533\u5831\u985E\u5225\u3002"),
                                     React__default.createElement(SWAPSpace, null),
                                     React__default.createElement(SWAPSpace, null),
                                     React__default.createElement(SWAPSpace, null),
@@ -1533,7 +1529,7 @@ var SWAPTaxField = function (_a) {
                                             }
                                         })()))) })) }))))));
 };
-var SWAPTaxFieldWrap = styled.div(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n  .option_item::-webkit-scrollbar {\n    width: 0 !important;\n    height: 0 !important;\n  }\n"], ["\n  .option_item::-webkit-scrollbar {\n    width: 0 !important;\n    height: 0 !important;\n  }\n"])));
+var SWAPTaxFieldWrap = styled.div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n  .option_item::-webkit-scrollbar {\n    width: 0 !important;\n    height: 0 !important;\n  }\n"], ["\n  .option_item::-webkit-scrollbar {\n    width: 0 !important;\n    height: 0 !important;\n  }\n"])));
 var typeOptions = [
     ["文字", "1"],
     ["設計", "2"],
@@ -1823,7 +1819,7 @@ var SWAPTaxDescription = function (incomeCode, expenseCode) {
         return "";
     }
 };
-var templateObject_1$8;
+var templateObject_1$7;
 /**
  * 邏輯設定
  * 1. 所得類別為 9A, 9B 時，費用類別為必填
@@ -2160,8 +2156,8 @@ var Styles = function (_a) {
                 " ",
                 copySuccess ? "已複製！" : null))));
 };
-var StylesWrap = styled.div(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject([""], [""])));
-var templateObject_1$9;
+var StylesWrap = styled.div(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject([""], [""])));
+var templateObject_1$8;
 
 var Typography = function (_a) {
     var variant = _a.variant, children = _a.children, mode = _a.mode, color = _a.color, style = _a.style;
@@ -2524,7 +2520,8 @@ var Typography = function (_a) {
     });
     var classes = useStyles();
     return (React__default.createElement(MaterialTypography, { className: classes.root, style: style }, children));
-};
+};
+var Typography$1 = React__default.memo(Typography);
 
 var Container = function (_a) {
     var children = _a.children, style = _a.style, maxWidth = _a.maxWidth, padding = _a.padding;
@@ -7661,8 +7658,8 @@ var Modal = React__default.forwardRef(function (props, ref) {
                         checked ? React__default.createElement(CheckCircleIcon, { className: classes.icon }) : null,
                         failed ? React__default.createElement(WarningIcon, { className: classes.icon }) : null,
                         React__default.createElement("div", null,
-                            React__default.createElement(Typography, { variant: !mobile ? "h6" : "title" }, title),
-                            React__default.createElement(Typography, { variant: "body2_loose", color: "black800", style: { marginTop: helpText ? 4 : 0 } }, helpText)))),
+                            React__default.createElement(Typography$1, { variant: !mobile ? "h6" : "title" }, title),
+                            React__default.createElement(Typography$1, { variant: "body2_loose", color: "black800", style: { marginTop: helpText ? 4 : 0 } }, helpText)))),
                     disCloseIcon ? null : (React__default.createElement(IconButton$1, { className: classes.closeIconButton, TouchRippleProps: {
                             classes: { child: classes.closeIconRippleRoot },
                         }, onClick: function () {
@@ -7806,7 +7803,7 @@ var Banner = function (props) {
             React__default.createElement("path", { d: "M12 2C6.5 2 2 6.5 2 12C2 17.5 6.5 22 12 22C17.5 22 22 17.5 22 12C22 6.5 17.5 2 12 2ZM10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z", fill: "#00932A" }))) : variant === "warning" ? (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: "M13 14H11V9H13V14ZM13 18H11V16H13V18ZM1 21H23L12 2L1 21Z", fill: "#E5640C" }))) : (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: "M13 9H11V7H13V9ZM13 17H11V11H13V17ZM12 2C10.6868 2 9.38642 2.25866 8.17317 2.7612C6.95991 3.26375 5.85752 4.00035 4.92893 4.92893C3.05357 6.8043 2 9.34784 2 12C2 14.6522 3.05357 17.1957 4.92893 19.0711C5.85752 19.9997 6.95991 20.7362 8.17317 21.2388C9.38642 21.7413 10.6868 22 12 22C14.6522 22 17.1957 20.9464 19.0711 19.0711C20.9464 17.1957 22 14.6522 22 12C22 10.6868 21.7413 9.38642 21.2388 8.17317C20.7362 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2Z", fill: theme.primary.primary400 })))),
-        React__default.createElement(Typography, { variant: "caption2" }, children)));
+        React__default.createElement(Typography$1, { variant: "caption2" }, children)));
 };
 
 var useStyles$c = makeStyles$1(function () { return ({
@@ -12144,7 +12141,7 @@ var Progress = function (props) {
                             : "transparent",
                         width: "calc((100% - 24px)/2)",
                     } })),
-            React__default.createElement(Typography, { variant: "caption1", color: i + 1 === step ? "black1000" : "black700", style: { marginTop: 8 } }, label ? label[i] : null)));
+            React__default.createElement(Typography$1, { variant: "caption1", color: i + 1 === step ? "black1000" : "black700", style: { marginTop: 8 } }, label ? label[i] : null)));
     })));
 };
 
@@ -12296,7 +12293,7 @@ var AutoComplete = function (props) {
     return (React__default.createElement("div", null,
         React__default.createElement(Popper$1, { id: id, open: open, anchorEl: anchorEl, placement: "bottom-start", className: classes.popper },
             React__default.createElement("div", { className: classes.header },
-                React__default.createElement(Typography, { variant: "caption1", color: "black800" }, title)),
+                React__default.createElement(Typography$1, { variant: "caption1", color: "black800" }, title)),
             React__default.createElement(MaterialAutocomplete, __assign({}, other, { classes: {
                     paper: classes.paper,
                     option: classes.option,
@@ -12827,7 +12824,7 @@ var RadioList = function (props) {
                     alignItems: "center",
                     marginLeft: 4,
                 } },
-                React__default.createElement(Typography, { variant: "title", style: {
+                React__default.createElement(Typography$1, { variant: "title", style: {
                         maxWidth: 56,
                         minWidth: 56,
                         textAlign: "center",
@@ -12840,13 +12837,13 @@ var RadioList = function (props) {
                         backgroundColor: "#909090",
                     } }),
                 React__default.createElement("div", { ref: ref },
-                    React__default.createElement(Typography, { variant: "body2_loose", color: "black800", style: {
+                    React__default.createElement(Typography$1, { variant: "body2_loose", color: "black800", style: {
                             width: "100%",
                             wordBreak: "break-word",
                         } }, subtitle)))) : (React__default.createElement("div", { style: { display: "flex", flexDirection: "column" } },
-                React__default.createElement(Typography, { variant: "title" }, title),
-                multiline ? (React__default.createElement(Typography, { variant: "body2_loose", color: "black800" }, subtitle)) : null))),
-        !multiline && !line ? (React__default.createElement(Typography, { variant: "body2_loose", color: "black800" }, subtitle)) : null));
+                React__default.createElement(Typography$1, { variant: "title" }, title),
+                multiline ? (React__default.createElement(Typography$1, { variant: "body2_loose", color: "black800" }, subtitle)) : null))),
+        !multiline && !line ? (React__default.createElement(Typography$1, { variant: "body2_loose", color: "black800" }, subtitle)) : null));
 };
 
 var useStyles$j = makeStyles$1(function (theme) { return ({
@@ -12920,7 +12917,7 @@ var CheckBoxList = function (props) {
                     alignItems: "center",
                     marginLeft: 4,
                 } },
-                React__default.createElement(Typography, { variant: "title", style: {
+                React__default.createElement(Typography$1, { variant: "title", style: {
                         minWidth: 56,
                         maxWidth: 56,
                         textAlign: "center",
@@ -12933,13 +12930,13 @@ var CheckBoxList = function (props) {
                         backgroundColor: "#909090",
                     } }),
                 React__default.createElement("div", { ref: ref },
-                    React__default.createElement(Typography, { variant: "body2_loose", color: "black800", style: {
+                    React__default.createElement(Typography$1, { variant: "body2_loose", color: "black800", style: {
                             width: "100%",
                             wordBreak: "break-word",
                         } }, subtitle)))) : (React__default.createElement("div", { style: { display: "flex", flexDirection: "column" } },
-                React__default.createElement(Typography, { variant: "title" }, title),
-                multiline ? (React__default.createElement(Typography, { variant: "body2_loose", color: "black800" }, subtitle)) : null))),
-        !multiline && !line ? (React__default.createElement(Typography, { variant: "body2_loose", color: "black800" }, subtitle)) : null));
+                React__default.createElement(Typography$1, { variant: "title" }, title),
+                multiline ? (React__default.createElement(Typography$1, { variant: "body2_loose", color: "black800" }, subtitle)) : null))),
+        !multiline && !line ? (React__default.createElement(Typography$1, { variant: "body2_loose", color: "black800" }, subtitle)) : null));
 };
 
 var useStyles$k = makeStyles$1(function (theme) { return ({
@@ -13416,7 +13413,7 @@ var DatePicker = function (props) {
                             setYear(year - 1);
                             setIsClicked(true);
                         } }, icon_arrowleft),
-                    React__default.createElement(Typography, { variant: "subtitle", style: { textAlign: "center" } },
+                    React__default.createElement(Typography$1, { variant: "subtitle", style: { textAlign: "center" } },
                         year,
                         "\u5E74"),
                     React__default.createElement(IconButton, { hoverColor: "black400", onClick: function () {
@@ -13430,13 +13427,13 @@ var DatePicker = function (props) {
                         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" },
+                    } }, 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$1, { 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(Typography$1, { variant: "caption2" },
                 React__default.createElement("span", { style: { fontWeight: 400 } }, "\u5DF2\u9078\u64C7\uFF1A")),
-            React__default.createElement(Typography, { variant: "subtitle" }, date &&
+            React__default.createElement(Typography$1, { variant: "subtitle" }, date &&
                 date.split("/")[0] + "\u5E74" + date.split("/")[1] + "\u6708" + date.split("/")[2] + "\u65E5"))), primaryButton: {
             title: "確認",
             onClick: function () {
@@ -13630,9 +13627,9 @@ var Breadcrumb = function (props) {
                     fontWeight: 400,
                 } },
                 children[0],
-                React__default.createElement(Typography, { variant: "body2", style: { margin: "0 8px" } }, separator ? separator : "/"),
+                React__default.createElement(Typography$1, { 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 : "/")),
+                React__default.createElement(Typography$1, { 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) {
@@ -13643,7 +13640,7 @@ var Breadcrumb = function (props) {
                         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 : "/"))));
+                    index + 1 !== maxItems - 1 && (React__default.createElement(Typography$1, { 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",
@@ -13652,7 +13649,7 @@ var Breadcrumb = function (props) {
                     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 : "/"))));
+                index + 1 !== (children === null || children === void 0 ? void 0 : children.length) && (React__default.createElement(Typography$1, { 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;
@@ -13731,5 +13728,5 @@ var Card = function (props) {
             React__default.createElement(Skeleton$1, { width: "100%", height: "100%" }))))));
 };
 
-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 };
+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$1 as Typography, useBreakpoints };
 //# sourceMappingURL=index.esm.js.map