@yosgo/swap-ui 1.0.136 → 1.0.138

package/build/index.esm.js

@@ -1,6 +1,6 @@
-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$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, makeStyles as makeStyles$1, useMediaQuery, FormControlLabel, OutlinedInput, FormHelperText, ListItemIcon, useTheme as useTheme$1, Backdrop, fade as fade$1, Popper as Popper$1, InputBase, Grow } from '@material-ui/core';
 export { CssBaseline } from '@material-ui/core';
-import React__default, { memo, useEffect, useState, Component as Component$1, forwardRef, useRef, useLayoutEffect as useLayoutEffect$1, useCallback, createElement, createContext, useContext, useMemo, Fragment as Fragment$1 } from 'react';
+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';
 import MenuIcon from '@material-ui/icons/Menu';
 import FileCopyIcon from '@material-ui/icons/FileCopy';
@@ -99,7 +99,7 @@ var logo_icon = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiI
 
 var logo_icon_black = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiBmaWxsPSJibGFjayIvPgo8cGF0aCBkPSJNMjcuMzQ4MiAyMS45MTU0QzI3LjIzOSAyMS4xNzggMjcuMDc1MSAyMC40Njc5IDI2LjkxMTIgMTkuNzMwNUMyNi42MTA4IDE4LjQ0NjggMjYuMjgzIDE3LjE5MDUgMjUuOTAwNyAxNS45NjE0QzI1LjYwMDIgMTQuOTc4MiAyNS4yOTk4IDE0LjAyMjMgMjQuOTk5NCAxMy4wNjY0QzI0Ljc4MDkgMTIuMzgzNiAyNC41MzUxIDExLjY3MzUgMjQuMjg5MyAxMC45OTA3QzIzLjYwNjUgOS4wNTE1MyAyMi44NjkxIDcuMTEyMzggMjIuMTA0MyA1LjIwMDU1QzIxLjgzMTIgNS4zNjQ0MyAyMS41NTgxIDUuNTI4MyAyMS4yODUgNS43MTk0OEMxOC45MDg4IDcuNDQwMTMgMTguMTQ0MSA5Ljg5ODE5IDE4LjE0NDEgMTIuNTIwMUMxOC4xNDQxIDEzLjI1NzYgMTguMTk4NyAxNC4wMjIzIDE4LjMwOCAxNC43ODdDMTguNTUzOCAxNi41MDc3IDE5LjAxODEgMTguMjI4MyAxOS40ODI0IDE5Ljc1NzhDMTkuNjczNiAyMC4zODU5IDE5Ljg2NDggMjEuMDQxNCAyMC4wODMyIDIxLjY2OTZDMjAuMzAxNyAyMi4zNTI0IDIwLjU0NzUgMjMuMDYyNSAyMC43OTM0IDIzLjc0NTNDMjEuOTY3OCAyNy4wMjI3IDIzLjMzMzQgMzAuMjQ1NSAyNC42OTkgMzMuNDQxQzI2LjUyODggMzEuNTgzOCAyNy41Mzk0IDI5LjA5ODQgMjcuNjQ4NiAyNi40NDkyQzI3LjczMDYgMjQuOTE5NyAyNy41OTQgMjMuNDE3NiAyNy4zNDgyIDIxLjkxNTRaIiBmaWxsPSIjRjdCNTJDIi8+CjxwYXRoIGQ9Ik0zNS40ODczIDExLjM3MjlDMzUuNDYgMTAuNjM1NSAzNS4zNTA3IDkuODk4MDMgMzUuMTU5NSA5LjE4NzkyQzM0LjYxMzMgNy4xMTIyMiAzMy4zODQzIDUuMjU1MDEgMzEuNjM2MyAzLjk0NDA0QzI5LjIzMjkgMi4xNDE0NiAyNi4xMTkzIDEuNTQwNiAyMy4yNTE2IDIuMzU5OTZDMjMuMTE1IDIuMzg3MjcgMjMuMDA1OCAyLjQ0MTg5IDIyLjg2OTIgMi40NjkyQzIyLjMyMyAyLjY2MDM5IDIxLjc3NjcgMi44Nzg4OCAyMS4yNTc4IDMuMTUyQzE4Ljk5MDkgNC4zNTM3MiAxNy4yNDMgNi4zNzQ4IDE2LjM5NjMgOC44MDU1NkMxNS45NTkzIDEwLjIyNTggMTUuODUgMTEuNzI3OSAxNS45NTkzIDEzLjIzMDFDMTMuODU2MyAxMy45Njc1IDExLjgzNTIgMTQuOTIzNCAxMC4wODcyIDE2LjIzNDRDNy41NzQ1NSAxOC4wOTE2IDUuODgxMjIgMjAuNzk1NSA1LjI4MDM2IDIzLjc5OThDNS4xNDM4IDI0LjUwOTkgNS4wMzQ1NSAyNS4yMiA1LjAwNzI0IDI1Ljk1NzRDNS4wMDcyNCAyNS45ODQ3IDUuMDA3MjQgMjYuMDEyIDUuMDA3MjQgMjYuMDM5M0M0Ljg3MDY4IDMwLjAyNjkgNi42NzMyNiAzMy45MzI1IDkuODY4NzUgMzYuMzM1OUMxMy4xNDYyIDM4Ljc5NCAxNy40MzQxIDM5LjUwNDEgMjEuMzEyNCAzOC4xMzg1QzIyLjIxMzcgMzcuODEwOCAyMy4wNjA0IDM3LjQwMTEgMjMuODc5NyAzNi45MDk1QzI0LjUwNzkgMzYuNTI3MSAyNS4xMDg4IDM2LjA2MjggMjUuNjgyMyAzNS41NzEyQzI3LjQwMyAzNC4wNDE3IDI4LjcxMzkgMzIuMTAyNiAyOS4zOTY3IDI5Ljg2M0MzMC4yNDM0IDI3LjA0OTkgMjkuOTk3NiAyMy45MzYzIDI5LjQ1MTQgMjEuMDQxM0MzMC4yNzA3IDIwLjYzMTYgMzEuMDM1NCAyMC4xNjczIDMxLjc0NTYgMTkuNjIxMUMzNC4wOTQ0IDE3Ljg0NTggMzUuNDMyNyAxNS4wMDU0IDM1LjU0MTkgMTIuMDgzQzM1LjUxNDYgMTEuODA5OSAzNS41MTQ2IDExLjU5MTQgMzUuNDg3MyAxMS4zNzI5Wk0yOC43MTM5IDQuNzYzNEMzMC43ODk2IDUuNjY0NjkgMzIuMzE5MSA3LjM4NTM0IDMyLjk3NDYgOS40ODgzNUMzMC43ODk2IDkuNzg4NzggMjguNjMyIDEwLjE0MzggMjYuNDc0NCAxMC41NTM1QzI1Ljk4MjcgOS4yMTUyMyAyNS40OTExIDcuOTA0MjYgMjQuOTcyMiA2LjU5MzNDMjQuNjk5MSA1Ljg1NTg4IDI0LjM5ODcgNS4xNDU3NyAyNC4wOTgyIDQuNDA4MzVDMjUuNjI3NyA0LjA1MzI5IDI3LjIzOTEgNC4xMDc5MiAyOC43MTM5IDQuNzYzNFpNMTAuNTc4OSAxOC42MTA1QzEyLjE5MDMgMTcuMTkwMyAxNC4xODQgMTYuMjA3MSAxNi4yMzI0IDE1LjQ2OTdDMTYuMzE0MyAxNS44NzkzIDE2LjM2OSAxNi4zMTYzIDE2LjQ3ODIgMTYuNzI2QzE2Ljg2MDYgMTguNTU1OSAxNy4zNTIyIDIwLjMzMTIgMTcuOTUzMSAyMi4xMDY0QzE0LjUzOTEgMjIuNzM0NiAxMS4wNzA1IDIzLjE3MTYgNy42MDE4NiAyMy41NTRDOC4wOTM0OCAyMS42NDIxIDkuMTA0MDIgMTkuOTIxNSAxMC41Nzg5IDE4LjYxMDVaTTEzLjUwMTIgMzUuODk4OUMxMC4xMTQ2IDM0LjUwNiA3Ljc2NTc0IDMxLjQ0NzEgNy4yNzQxMiAyNy44NDE5QzcuMTkyMTkgMjcuMTU5MSA3LjE2NDg3IDI2LjQ3NjMgNy4xOTIxOSAyNS43OTM1QzExLjAxNTggMjUuMzU2NSAxNC44NjY4IDI0Ljg5MjIgMTguNjM1OSAyNC4yMDk0QzE5LjEyNzUgMjUuNTQ3NyAxOS42NDY0IDI2Ljg1ODcgMjAuMTY1MyAyOC4xNjk3QzIxLjA2NjYgMzAuNDM2NiAyMi4wMjI1IDMyLjY0ODggMjIuOTc4NCAzNC44ODg0QzIwLjE5MjYgMzYuNjYzNyAxNi42MTQ4IDM3LjE4MjYgMTMuNTAxMiAzNS44OTg5Wk0yNy42NzYxIDI2LjQ0OUMyNy41NjY4IDI5LjA5ODMgMjYuNTU2MyAzMS41ODM3IDI0LjcyNjQgMzMuNDQwOUMyMy4zMzM1IDMwLjI0NTQgMjEuOTk1MiAyNy4wMjI2IDIwLjgyMDggMjMuNzQ1MUMyMC41NzUgMjMuMDYyMyAyMC4zMjkyIDIyLjM1MjIgMjAuMTEwNyAyMS42Njk0QzE5Ljg5MjIgMjEuMDQxMyAxOS43MDEgMjAuNDEzMSAxOS41MDk4IDE5Ljc1NzZDMTkuMDQ1NSAxOC4yMDA4IDE4LjU4MTIgMTYuNTA3NSAxOC4zMzU0IDE0Ljc4NjlDMTguMjI2MiAxNC4wMjIxIDE4LjE3MTYgMTMuMjg0NyAxOC4xNzE2IDEyLjUyQzE4LjE3MTYgOS44OTgwMyAxOC45MzYzIDcuNDY3MjcgMjEuMzEyNCA1LjcxOTMyQzIxLjU1ODIgNS41MjgxMyAyMS44MzEzIDUuMzY0MjYgMjIuMTMxOCA1LjIwMDM5QzIyLjg5NjUgNy4xMTIyMiAyMy42MzM5IDkuMDUxMzYgMjQuMzE2NyAxMC45OTA1QzI0LjU2MjUgMTEuNjczMyAyNC44MDgzIDEyLjM4MzQgMjUuMDI2OCAxMy4wNjYyQzI1LjM1NDYgMTQuMDIyMSAyNS42NTUgMTUuMDA1MyAyNS45MjgxIDE1Ljk2MTNDMjYuMjgzMiAxNy4xOTAzIDI2LjYzODIgMTguNDQ2NiAyNi45Mzg3IDE5LjczMDNDMjcuMTAyNSAyMC40NDA0IDI3LjIzOTEgMjEuMTc3OCAyNy4zNzU3IDIxLjkxNTNDMjcuNTk0MSAyMy40MTc0IDI3LjczMDcgMjQuOTE5NiAyNy42NzYxIDI2LjQ0OVpNMzAuNzYyMyAxNy41NDU0QzMwLjIxNjEgMTguMDM3IDI5LjYxNTIgMTguNDQ2NiAyOC45NTk3IDE4LjgwMTdDMjguNDY4MSAxNi43MjYgMjcuODY3MyAxNC42Nzc2IDI3LjE4NDUgMTIuNjI5MkMyOS4yMDU1IDEyLjI0NjkgMzEuMjUzOSAxMS45MTkxIDMzLjMwMjMgMTEuNjQ2QzMzLjMyOTYgMTMuODU4MiAzMi40Mjg0IDE2LjA3MDUgMzAuNzYyMyAxNy41NDU0WiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+';
 
-var SWAPLogo = memo(function (_a) {
+var SWAPLogo = function (_a) {
     var _b = _a.black, black = _b === void 0 ? false : _b, _c = _a.iconOnly, iconOnly = _c === void 0 ? false : _c, _d = _a.chinese, chinese = _d === void 0 ? false : _d, _e = _a.business, business = _e === void 0 ? false : _e, _f = _a.size, size = _f === void 0 ? "middle" : _f, _g = _a.dark, dark = _g === void 0 ? false : _g, height = _a.height, width = _a.width;
     return (React__default.createElement("span", null,
         React__default.createElement(SWAPLogoWrap, { size: size },
@@ -129,7 +129,7 @@ var SWAPLogo = memo(function (_a) {
                         return logo_normal;
                     }
                 })() }))));
-});
+};
 var SWAPLogoWrap = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  img {\n    height: ", ";\n    &.business {\n      height: ", ";\n    }\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  img {\n    height: ",
     ";\n    &.business {\n      height: ",
     ";\n    }\n  }\n"])), function (_a) {
@@ -1303,7 +1303,7 @@ var LineShareButton = createShareButton('line', lineLink, function (props) { ret
     windowHeight: 500,
 });
 
-var SWAPShare = memo(function (_a) {
+var SWAPShare = function (_a) {
     var url = _a.url, _b = _a.size, _c = _a.emailSubject, emailSubject = _c === void 0 ? "" : _c, _d = _a.sharedContent, sharedContent = _d === void 0 ? "" : _d;
     var _e = useState(""), sharedUrl = _e[0], setSharedUrl = _e[1];
     useEffect(function () {
@@ -1361,7 +1361,7 @@ var SWAPShare = memo(function (_a) {
                     React__default.createElement("path", { d: "M28 16L20 21L12 16V14L20 19L28 14V16ZM28 12H12C10.89 12 10 12.89 10 14V26C10 26.5304 10.2107 27.0391 10.5858 27.4142C10.9609 27.7893 11.4696 28 12 28H28C28.5304 28 29.0391 27.7893 29.4142 27.4142C29.7893 27.0391 30 26.5304 30 26V14C30 12.89 29.1 12 28 12Z", fill: "#6F6F6F" })))),
         },
     ].map(function (item, index) { return (React__default.createElement("div", { key: "share_btn_" + index }, item.el)); })));
-});
+};
 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;
 
@@ -2159,12 +2159,11 @@ var Styles = function (_a) {
 var StylesWrap = styled.div(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject([""], [""])));
 var templateObject_1$8;
 
-var Typography = React__default.memo(function (_a) {
-    var variant = _a.variant, children = _a.children, mode = _a.mode, color = _a.color, style = _a.style;
-    var theme = useTheme$1();
-    var useStyles = makeStyles$1({
-        root: {
-            color: mode === "dark"
+var useStyles = makeStyles$1(function (theme) { return ({
+    root: {
+        color: function (_a) {
+            var mode = _a.mode, color = _a.color;
+            return mode === "dark"
                 ? color === "primary"
                     ? theme.black.white
                     : color === "secondary"
@@ -2398,8 +2397,11 @@ var Typography = React__default.memo(function (_a) {
                                                                                                                                                                                                                                                     ? theme.black.black900
                                                                                                                                                                                                                                                     : color === "black1000"
                                                                                                                                                                                                                                                         ? theme.black.black1000
-                                                                                                                                                                                                                                                        : theme.black.black1000,
-            fontSize: variant === "d1"
+                                                                                                                                                                                                                                                        : theme.black.black1000;
+        },
+        fontSize: function (_a) {
+            var variant = _a.variant;
+            return variant === "d1"
                 ? "4.5rem"
                 : variant === "d2"
                     ? "4rem"
@@ -2443,8 +2445,11 @@ var Typography = React__default.memo(function (_a) {
                                                                                                 ? "1rem"
                                                                                                 : variant === "button_s"
                                                                                                     ? "0.875rem"
-                                                                                                    : "1rem",
-            fontWeight: variant === "d1" ||
+                                                                                                    : "1rem";
+        },
+        fontWeight: function (_a) {
+            var variant = _a.variant;
+            return variant === "d1" ||
                 variant === "d2" ||
                 variant === "d3" ||
                 variant === "d4" ||
@@ -2478,8 +2483,11 @@ var Typography = React__default.memo(function (_a) {
                     variant === "tiny2" ||
                     variant === "tiny2_loose"
                     ? 400
-                    : 400,
-            lineHeight: variant === "d1" ||
+                    : 400;
+        },
+        lineHeight: function (_a) {
+            var variant = _a.variant;
+            return variant === "d1" ||
                 variant === "d2" ||
                 variant === "d3" ||
                 variant === "h1" ||
@@ -2514,15 +2522,18 @@ var Typography = React__default.memo(function (_a) {
                         ? 1.6
                         : variant === "button_l" || variant === "button_s"
                             ? 1.125
-                            : 1.4,
-            letterSpacing: "0em",
+                            : 1.4;
         },
-    });
-    var classes = useStyles();
+        letterSpacing: "0em",
+    },
+}); });
+var Typography = React__default.memo(function (_a) {
+    var variant = _a.variant, children = _a.children, mode = _a.mode, color = _a.color, style = _a.style;
+    var classes = useStyles({ variant: variant, mode: mode, color: color });
     return (React__default.createElement(MaterialTypography, { className: classes.root, style: style }, children));
 });
 
-var Container = memo(function (_a) {
+var Container = function (_a) {
     var children = _a.children, style = _a.style, maxWidth = _a.maxWidth, padding = _a.padding;
     var XXS = useBreakpoints("xxs");
     var XS = useBreakpoints("xs");
@@ -2577,7 +2588,7 @@ var Container = memo(function (_a) {
     });
     var classes = useStyles();
     return (React__default.createElement(MaterialContainer, { className: classes.root, style: style }, children));
-});
+};
 
 function useBreakpoints(breakpoints) {
     var matches = useMediaQuery("(min-width:" + (breakpoints === "xxs"
@@ -2598,7 +2609,7 @@ function useBreakpoints(breakpoints) {
     return matches;
 }
 
-var useStyles = makeStyles$1(function (theme) { return ({
+var useStyles$1 = makeStyles$1(function (theme) { return ({
     root: function (props) { return ({
         width: 40,
         height: 40,
@@ -2662,17 +2673,17 @@ var useStyles = makeStyles$1(function (theme) { return ({
         },
     }); },
 }); });
-var CheckBox = memo(function (props) {
+var CheckBox = function (props) {
     var disableHover = props.disableHover, label = props.label, labelPlacement = props.labelPlacement, checkedIcon = props.checkedIcon, icon = props.icon, other = __rest(props, ["disableHover", "label", "labelPlacement", "checkedIcon", "icon"]);
     var styleProps = {
         disableHover: disableHover,
     };
-    var classes = useStyles(styleProps);
+    var classes = useStyles$1(styleProps);
     return (React__default.createElement(FormControlLabel, { label: label, labelPlacement: labelPlacement, style: { marginRight: 0 }, control: React__default.createElement(MaterialCheckBox, __assign({ disableFocusRipple: true, disableTouchRipple: true, className: classes.root }, other, { checkedIcon: React__default.createElement("span", { className: classes.checked_icon }, checkedIcon ? (checkedIcon) : (React__default.createElement("svg", { width: "17", height: "16", viewBox: "0 0 17 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
                 React__default.createElement("path", { d: "M1.5 8.5L7 13L15 2", stroke: "white", strokeWidth: "3", strokeLinecap: "round" })))), icon: React__default.createElement("span", { className: classes.icon }, icon ? icon : null) })) }));
-});
+};
 
-var useStyles$1 = makeStyles$1(function (theme) { return ({
+var useStyles$2 = makeStyles$1(function (theme) { return ({
     root: function (props) { return ({
         width: 40,
         height: 40,
@@ -2736,18 +2747,18 @@ var useStyles$1 = makeStyles$1(function (theme) { return ({
         },
     }); },
 }); });
-var RadioButton = memo(function (props) {
+var RadioButton = function (props) {
     var label = props.label, labelPlacement = props.labelPlacement, disableHover = props.disableHover, other = __rest(props, ["label", "labelPlacement", "disableHover"]);
     var styleProps = {
         disableHover: disableHover,
     };
-    var classes = useStyles$1(styleProps);
+    var classes = useStyles$2(styleProps);
     return (React__default.createElement(FormControlLabel, { label: label, labelPlacement: labelPlacement, style: { marginRight: 0 }, control: React__default.createElement(MaterialRadioButton, __assign({ disableFocusRipple: true, disableTouchRipple: true, className: classes.root, checkedIcon: React__default.createElement("span", { className: classes.checked_icon },
                 React__default.createElement("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
                     React__default.createElement("circle", { cx: "5", cy: "5", r: "5", fill: "white" }))), icon: React__default.createElement("span", { className: classes.icon }) }, other)) }));
-});
+};
 
-var useStyles$2 = makeStyles$1(function (theme) { return ({
+var useStyles$3 = makeStyles$1(function (theme) { return ({
     root: {
         "& .MuiFormHelperText-contained": {
             marginLeft: 16,
@@ -2839,7 +2850,7 @@ var useStyles$2 = makeStyles$1(function (theme) { return ({
         "&.Mui-error": { color: theme.black.black800 },
     },
 }); });
-var TextField = memo(function (props) {
+var TextField = function (props) {
     var children = props.children, width = props.width, height = props.height, InputProps = props.InputProps, InputLabelProps = props.InputLabelProps, SelectProps = props.SelectProps, select = props.select, fullWidth = props.fullWidth, other = __rest(props, ["children", "width", "height", "InputProps", "InputLabelProps", "SelectProps", "select", "fullWidth"]);
     var styleProps = {
         width: width,
@@ -2847,7 +2858,7 @@ var TextField = memo(function (props) {
         height: height,
         select: select,
     };
-    var classes = useStyles$2(styleProps);
+    var classes = useStyles$3(styleProps);
     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,
@@ -2861,9 +2872,9 @@ var TextField = memo(function (props) {
                     horizontal: -16,
                 },
             } }, SelectProps) }), children));
-});
+};
 
-var Tab = memo(function (props) {
+var Tab = function (props) {
     var label = props.label, selected = props.selected, width = props.width, height = props.height, margin = props.margin, fontSize = props.fontSize, noIndicator = props.noIndicator, animation = props.animation, other = __rest(props, ["label", "selected", "width", "height", "margin", "fontSize", "noIndicator", "animation"]);
     var useStyles = makeStyles$1(function (theme) { return ({
         root: {
@@ -2913,24 +2924,24 @@ var Tab = memo(function (props) {
         }, label: React__default.createElement("div", { className: classes.indicatorRoot },
             label,
             selected ? React__default.createElement("div", { className: classes.selected_indicator }) : null), disableRipple: true })));
-});
+};
 
-var useStyles$3 = makeStyles$1({
+var useStyles$4 = makeStyles$1({
     root: {},
     indicatorRoot: {
         backgroundColor: "transparent",
     },
 });
-var Tabs = memo(function (props) {
+var Tabs = function (props) {
     var children = props.children, other = __rest(props, ["children"]);
-    var classes = useStyles$3();
+    var classes = useStyles$4();
     return (React__default.createElement(MaterialTabs, __assign({}, other, { classes: {
             root: classes.root,
             indicator: classes.indicatorRoot,
         } }), children));
-});
+};
 
-var useStyles$4 = makeStyles$1(function (theme) { return ({
+var useStyles$5 = makeStyles$1(function (theme) { return ({
     root: function (props) { return ({
         //SWAPTheme調整
         textTransform: "unset",
@@ -2954,7 +2965,7 @@ var useStyles$4 = makeStyles$1(function (theme) { return ({
         opacity: 1,
     },
 }); });
-var SegmentedTab = memo(function (props) {
+var SegmentedTab = function (props) {
     var width = props.width, height = props.height, fontSize = props.fontSize, flex = props.flex, other = __rest(props, ["width", "height", "fontSize", "flex"]);
     var styleProps = {
         width: width,
@@ -2962,9 +2973,9 @@ var SegmentedTab = memo(function (props) {
         fontSize: fontSize,
         flex: flex,
     };
-    var classes = useStyles$4(styleProps);
+    var classes = useStyles$5(styleProps);
     return (React__default.createElement(MaterialTab, __assign({}, other, { disableRipple: true, classes: { textColorInherit: classes.text }, className: classes.root })));
-});
+};
 
 var smoothscroll = createCommonjsModule(function (module, exports) {
 /* smoothscroll v0.4.4 - 2019 - Dustan Kasten, Jeremias Menichelli - MIT License */
@@ -3399,7 +3410,7 @@ var smoothscroll = createCommonjsModule(function (module, exports) {
 });
 var smoothscroll_1 = smoothscroll.polyfill;
 
-var useStyles$5 = makeStyles$1(function (theme) { return ({
+var useStyles$6 = makeStyles$1(function (theme) { return ({
     root: function (props) { return ({
         width: props.width,
         boxSizing: "border-box",
@@ -3428,13 +3439,13 @@ var useStyles$5 = makeStyles$1(function (theme) { return ({
         },
     },
 }); });
-var SegmentedTabs = memo(function (_a) {
+var SegmentedTabs = function (_a) {
     var children = _a.children, width = _a.width, slide = _a.slide, other = __rest(_a, ["children", "width", "slide"]);
     var styleProps = {
         width: width,
         slide: slide,
     };
-    var classes = useStyles$5(styleProps);
+    var classes = useStyles$6(styleProps);
     var tabsRef = useRef(null);
     useEffect(function () {
         smoothscroll.polyfill();
@@ -3460,13 +3471,12 @@ var SegmentedTabs = memo(function (_a) {
             indicator: classes.indicator,
             scrollButtons: classes.scrollButtons,
         }, indicatorColor: "primary", ref: tabsRef }), children));
-});
+};
 
 function TabPanel(props) {
     var children = props.children, value = props.value, index = props.index, other = __rest(props, ["children", "value", "index"]);
     return (React__default.createElement("div", __assign({ role: "tabpanel", hidden: value !== index, id: "scrollable-auto-tabpanel-" + index, "aria-labelledby": "scrollable-auto-tab-" + index }, other), value === index && React__default.createElement(Box, null, children)));
-}
-var TabPanel$1 = memo(TabPanel);
+}
 
 var useOutlinedInputStyles = makeStyles$1(function (theme) { return ({
     root: {
@@ -3491,7 +3501,7 @@ var useOutlinedInputStyles = makeStyles$1(function (theme) { return ({
     },
     notchedOutline: {},
 }); });
-var useStyles$6 = makeStyles$1(function (theme) { return ({
+var useStyles$7 = makeStyles$1(function (theme) { return ({
     root: function (props) { return ({
         //SWAPTheme調整
         width: props.width ? props.width : "100%",
@@ -3544,7 +3554,7 @@ var useStyles$6 = makeStyles$1(function (theme) { return ({
         marginTop: 8,
     },
 }); });
-var Select = memo(function (_a) {
+var Select = function (_a) {
     var children = _a.children, style = _a.style, value = _a.value, onChange = _a.onChange, defaultValue = _a.defaultValue, error = _a.error, disabled = _a.disabled, type = _a.type, autoFocus = _a.autoFocus, placeholder = _a.placeholder, fullWidth = _a.fullWidth, required = _a.required, InputProps = _a.InputProps, helperText = _a.helperText, width = _a.width, height = _a.height, horizontal = _a.horizontal, vertical = _a.vertical, open = _a.open, placeholderStyle = _a.placeholderStyle, selectStyle = _a.selectStyle, helperTextStyle = _a.helperTextStyle, onClick = _a.onClick, transformOrigin = _a.transformOrigin, paddingTop = _a.paddingTop, paddingLeft = _a.paddingLeft, dropdown = _a.dropdown;
     var outlinedInputClasses = useOutlinedInputStyles();
     var styleProps = {
@@ -3554,7 +3564,7 @@ var Select = memo(function (_a) {
         paddingLeft: paddingLeft,
         dropdown: dropdown,
     };
-    var classes = useStyles$6(styleProps);
+    var classes = useStyles$7(styleProps);
     return (React__default.createElement(FormControl, { variant: "outlined", style: style, classes: { root: classes.root } },
         React__default.createElement(InputLabel, { classes: {
                 root: classes.placeholder,
@@ -3571,14 +3581,14 @@ var Select = memo(function (_a) {
                 getContentAnchorEl: null,
             }, onClick: onClick }, children),
         React__default.createElement(FormHelperText, { style: helperTextStyle }, helperText)));
-});
+};
 
-var Menu = memo(function (props) {
+var Menu = function (props) {
     var children = props.children, open = props.open, other = __rest(props, ["children", "open"]);
     return (React__default.createElement(MaterialMenu, __assign({ open: open }, other), children));
-});
+};
 
-var useStyles$7 = makeStyles$1(function (theme) { return ({
+var useStyles$8 = makeStyles$1(function (theme) { return ({
     root: function (props) { return ({
         fontSize: 14,
         fontWeight: 700,
@@ -3607,7 +3617,7 @@ var useStyles$7 = makeStyles$1(function (theme) { return ({
         },
     }); },
 }); });
-var MenuItem = memo(React__default.forwardRef(function (props, ref) {
+var MenuItem = React__default.forwardRef(function (props, ref) {
     var children = props.children, width = props.width, hoverBackgroundColor = props.hoverBackgroundColor, hoverFontColor = props.hoverFontColor, hoverIconColor = props.hoverIconColor, height = props.height, rippleColor = props.rippleColor, iconChildren = props.iconChildren, other = __rest(props, ["children", "width", "hoverBackgroundColor", "hoverFontColor", "hoverIconColor", "height", "rippleColor", "iconChildren"]);
     var styleProps = {
         width: width,
@@ -3617,13 +3627,13 @@ var MenuItem = memo(React__default.forwardRef(function (props, ref) {
         hoverIconColor: hoverIconColor,
         rippleColor: rippleColor,
     };
-    var classes = useStyles$7(styleProps);
+    var classes = useStyles$8(styleProps);
     return (React__default.createElement(MaterialMenuItem, __assign({ className: classes.root }, other),
         children,
         React__default.createElement(ListItemIcon, { style: { justifyContent: "flex-end" } }, iconChildren)));
-}));
+});
 
-var Button = React__default.memo(function (props) {
+var Button = function (props) {
     var children = props.children, variant = props.variant, minWidth = props.minWidth, width = props.width, size = props.size, loading = props.loading, onClick = props.onClick, other = __rest(props, ["children", "variant", "minWidth", "width", "size", "loading", "onClick"]);
     var theme = useTheme$1();
     var useStyles = makeStyles$1(function (theme) { return ({
@@ -3832,9 +3842,9 @@ var Button = React__default.memo(function (props) {
                         ? theme.primary.primary800
                         : theme.black.white,
             } }))) : (React__default.createElement("div", { style: { whiteSpace: "nowrap" } }, children))));
-});
+};
 
-var useStyles$8 = makeStyles$1(function () { return ({
+var useStyles$9 = makeStyles$1(function () { return ({
     root: function (props) { return ({
         width: props.width,
         height: props.height,
@@ -3849,7 +3859,7 @@ var useStyles$8 = makeStyles$1(function () { return ({
         },
     }); },
 }); });
-var IconButton = memo(function (props) {
+var IconButton = function (props) {
     var hoverColor = props.hoverColor, hoverIconColor = props.hoverIconColor, width = props.width, height = props.height, other = __rest(props, ["hoverColor", "hoverIconColor", "width", "height"]);
     var theme = useTheme$1();
     var styleProps = {
@@ -4082,9 +4092,9 @@ var IconButton = memo(function (props) {
                                                                                                                                                                                                                                         : hoverIconColor
             : null,
     };
-    var classes = useStyles$8(styleProps);
+    var classes = useStyles$9(styleProps);
     return React__default.createElement(IconButton$1$1, __assign({ className: classes.root }, other));
-});
+};
 
 function TransitionLeft(props) {
     return React__default.createElement(Slide, __assign({}, props, { direction: "left" }));
@@ -4101,7 +4111,7 @@ function TransitionDown(props) {
 function Transition(props) {
     return React__default.createElement(Fade, __assign({}, props));
 }
-var useStyles$9 = makeStyles$1(function (theme) { return ({
+var useStyles$a = makeStyles$1(function (theme) { return ({
     root: {
         "@media only screen and (min-width: 600px)": {
             width: "fit-content",
@@ -4159,14 +4169,14 @@ var useStyles$9 = makeStyles$1(function (theme) { return ({
         color: "#ffffff",
     },
 }); });
-var Snackbar = memo(function (props) {
+var Snackbar = function (props) {
     var message = props.message, transitionDirection = props.transitionDirection, transitionDuration = props.transitionDuration, width = props.width, height = props.height, variant = props.variant, action = props.action, revertButton = props.revertButton, closeIcon = props.closeIcon, icon = props.icon, checkIcon = props.checkIcon, errorIcon = props.errorIcon, other = __rest(props, ["message", "transitionDirection", "transitionDuration", "width", "height", "variant", "action", "revertButton", "closeIcon", "icon", "checkIcon", "errorIcon"]);
     var styleProps = {
         width: width,
         height: height,
         variant: variant,
     };
-    var classes = useStyles$9(styleProps);
+    var classes = useStyles$a(styleProps);
     return (React__default.createElement(MaterialSnackBar, __assign({}, other, { className: classes.root, ContentProps: {
             classes: {
                 root: classes.contentRoot,
@@ -4198,7 +4208,7 @@ var Snackbar = memo(function (props) {
                     : transitionDirection === "down"
                         ? TransitionDown
                         : Transition, transitionDuration: transitionDuration })));
-});
+};
 var icon_close = (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: "M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41Z", fill: "white" })));
 var icon_checked = (React__default.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
@@ -7177,7 +7187,7 @@ const host = createHost(primitives, {
 });
 const animated = host.animated;
 
-var useStyles$a = makeStyles$1(function (theme) { return ({
+var useStyles$b = makeStyles$1(function (theme) { return ({
     root: function (props) { return ({
         margin: props.margin,
         backgroundColor: props.backgroundColor,
@@ -7194,7 +7204,7 @@ var useStyles$a = makeStyles$1(function (theme) { return ({
         color: props.backgroundColor,
     }); },
 }); });
-var Tooltip = memo(function (props) {
+var Tooltip = function (props) {
     var theme = useTheme$1();
     var arrow = props.arrow, margin = props.margin, marginTop = props.marginTop, marginBottom = props.marginBottom, marginRight = props.marginRight, marginLeft = props.marginLeft, dark = props.dark, light = props.light, children = props.children, width = props.width, childrenStyle = props.childrenStyle, other = __rest(props, ["arrow", "margin", "marginTop", "marginBottom", "marginRight", "marginLeft", "dark", "light", "children", "width", "childrenStyle"]);
     var styleProps = {
@@ -7224,10 +7234,10 @@ var Tooltip = memo(function (props) {
         border: light ? "1px solid #CCCCCC" : null,
         fontWeight: arrow ? 700 : 400,
     };
-    var classes = useStyles$a(styleProps);
+    var classes = useStyles$b(styleProps);
     return (React__default.createElement(MaterialTooltip, __assign({ classes: { tooltip: classes.root, arrow: classes.arrow } }, other, { arrow: arrow }),
         React__default.createElement("div", { style: __assign({ width: "fit-content", height: "fit-content", display: "flex", alignItems: "center", justifyContent: "center" }, childrenStyle) }, children)));
-});
+};
 
 var ModalTransitionEffect = React__default.forwardRef(function ModalTransitionEffect(props, ref) {
     var open = props.in, slide = props.slide, children = props.children, onEnter = props.onEnter, onExited = props.onExited, style = props.style, other = __rest(props, ["in", "slide", "children", "onEnter", "onExited", "style"]);
@@ -7251,7 +7261,7 @@ var ModalTransitionEffect = React__default.forwardRef(function ModalTransitionEf
     });
     return (React__default.createElement(React__default.Fragment, null, slide ? (React__default.createElement(Slide, { in: open, direction: "up", mountOnEnter: true, unmountOnExit: true, timeout: { enter: 300, exit: 300 } }, children)) : (React__default.createElement(animated.div, __assign({ style: __assign(__assign({}, style), defaultStyle) }, other), children))));
 });
-var Modal = memo(React__default.forwardRef(function (props, ref) {
+var Modal = React__default.forwardRef(function (props, ref) {
     var width = props.width, height = props.height, open = props.open, onClose = props.onClose, title = props.title, helpText = props.helpText, size = props.size, headpadding = props.headpadding, headChildren = props.headChildren, checked = props.checked, failed = props.failed, icon = props.icon, checkIconColor = props.checkIconColor, iconColor = props.iconColor, children = props.children, label = props.label, buttonFullWidth = props.buttonFullWidth, footerDisplayColumn = props.footerDisplayColumn, secondaryButton = props.secondaryButton, primaryButton = props.primaryButton, mobile = props.mobile, fullWidth = props.fullWidth, bodyPadding = props.bodyPadding, maxWidth = props.maxWidth, disCloseIcon = props.disCloseIcon, titleStyle = props.titleStyle, bodyStyle = props.bodyStyle, onExit = props.onExit, bodyMaxHeight = props.bodyMaxHeight, multiline = props.multiline, disUnderLine = props.disUnderLine, footer = props.footer;
     var _a = useState(0), clientHeight = _a[0], setClientHeight = _a[1];
     var _b = useState(0), scorllbarWidth = _b[0], setScorllbarWidth = _b[1];
@@ -7655,7 +7665,7 @@ var Modal = memo(React__default.forwardRef(function (props, ref) {
                         } })) : null,
                     headChildren ? (headChildren) : (React__default.createElement("div", { className: classes.title },
                         icon ? icon : null,
-                        checked ? (React__default.createElement(CheckCircleIcon, { className: classes.icon })) : null,
+                        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),
@@ -7725,16 +7735,14 @@ var Modal = memo(React__default.forwardRef(function (props, ref) {
                                 ? 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 ? (primaryButton.tooltip ? (React__default.createElement(Tooltip, __assign({}, primaryButton.tooltip),
-                            React__default.createElement(Button, { fullWidth: buttonFullWidth ||
-                                    footerDisplayColumn ||
-                                    mobile, variant: primaryButton.variant
+                            React__default.createElement(Button, { fullWidth: buttonFullWidth || footerDisplayColumn || mobile, variant: primaryButton.variant
                                     ? primaryButton.variant
                                     : "primary", size: "small", onClick: primaryButton.onClick, disabled: primaryButton.disabled, loading: primaryButton.loading, style: primaryButton.style }, primaryButton.title))) : (React__default.createElement(Button, { fullWidth: buttonFullWidth || footerDisplayColumn || mobile, variant: primaryButton.variant
                                 ? primaryButton.variant
                                 : "primary", size: "small", onClick: primaryButton.onClick, disabled: primaryButton.disabled, loading: primaryButton.loading, style: primaryButton.style }, primaryButton.title))) : null))) : null)))))));
-}));
+});
 
-var useStyles$b = makeStyles$1(function () { return ({
+var useStyles$c = makeStyles$1(function () { return ({
     root: function (props) { return ({
         backgroundColor: props.backgroundColor,
         border: "1px solid " + props.borderColor,
@@ -7751,7 +7759,7 @@ var useStyles$b = makeStyles$1(function () { return ({
         marginRight: 8,
     },
 }); });
-var Banner = memo(function (props) {
+var Banner = function (props) {
     var _a = useState(false), alignStart = _a[0], setAlignStart = _a[1];
     var theme = useTheme$1();
     var icon = props.icon, variant = props.variant, width = props.width, height = props.height, mobile = props.mobile, children = props.children, other = __rest(props, ["icon", "variant", "width", "height", "mobile", "children"]);
@@ -7782,7 +7790,7 @@ var Banner = memo(function (props) {
         height: height ? height : null,
         alignItems: mobile ? "flex-start" : alignStart ? "flex-start" : "center",
     };
-    var classes = useStyles$b(styleProps);
+    var classes = useStyles$c(styleProps);
     var ref = useRef(null);
     useEffect(function () {
         if (ref.current) {
@@ -7806,9 +7814,9 @@ var Banner = memo(function (props) {
             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)));
-});
+};
 
-var useStyles$c = makeStyles$1(function () { return ({
+var useStyles$d = makeStyles$1(function () { return ({
     root: function (props) { return ({
         backgroundColor: props.backgroundColor,
         border: props.border,
@@ -7825,7 +7833,7 @@ var useStyles$c = makeStyles$1(function () { return ({
         color: props.color,
     }); },
 }); });
-var Chip = memo(function (props) {
+var Chip = function (props) {
     var theme = useTheme$1();
     var variant = props.variant, width = props.width, height = props.height, label = props.label, icon = props.icon, outlined = props.outlined, contained = props.contained, other = __rest(props, ["variant", "width", "height", "label", "icon", "outlined", "contained"]);
     var styleProps = {
@@ -7864,15 +7872,15 @@ var Chip = memo(function (props) {
                         ? theme.danger.danger800
                         : theme.primary.primary800,
     };
-    var classes = useStyles$c(styleProps);
+    var classes = useStyles$d(styleProps);
     return (React__default.createElement("div", __assign({ className: classes.root }, other),
         React__default.createElement("span", { 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 = memo(function (props) {
+var CircularProgress = function (props) {
     var theme = useTheme$1();
     var dark = props.dark, size = props.size, thickness = props.thickness;
     return (React__default.createElement("div", { style: {
@@ -7893,7 +7901,7 @@ var CircularProgress = memo(function (props) {
                 top: -0,
                 color: dark ? theme.black.white : theme.primary.primary800,
             } })));
-});
+};
 
 function _extends() {
   _extends = Object.assign || function (target) {
@@ -12005,7 +12013,7 @@ var MaterialSkeleton = withStyles(styles$3, {
   name: 'MuiSkeleton'
 })(Skeleton);
 
-var useStyles$d = makeStyles$1(function (theme) { return ({
+var useStyles$e = makeStyles$1(function (theme) { return ({
     root: function () { return ({}); },
     ul: {
         "& li": {
@@ -12057,20 +12065,20 @@ var useStyles$d = makeStyles$1(function (theme) { return ({
         justifyContent: "center",
     },
 }); });
-var Pagination$1 = memo(function (props) {
+var Pagination$1 = function (props) {
     // const theme = useTheme();
     var other = __rest(props, []);
     var styleProps = {};
-    var classes = useStyles$d(styleProps);
+    var classes = useStyles$e(styleProps);
     return (React__default.createElement(MaterialPagination, __assign({ classes: { root: classes.root, ul: classes.ul }, shape: "rounded", variant: "outlined" }, other, { renderItem: function (item) { return (React__default.createElement(PaginationItem$1, __assign({}, item, { classes: {
                 root: classes.itemRoot,
                 rounded: classes.rounded,
                 selected: classes.selected,
                 ellipsis: classes.ellipsis,
             } }))); } })));
-});
+};
 
-var useStyles$e = makeStyles$1(function (theme) { return ({
+var useStyles$f = makeStyles$1(function (theme) { return ({
     root: function (props) { return ({
         width: props.width,
         display: "flex",
@@ -12088,7 +12096,7 @@ var useStyles$e = makeStyles$1(function (theme) { return ({
         borderRadius: "50%",
     }); },
 }); });
-var Progress = memo(function (props) {
+var Progress = function (props) {
     var theme = useTheme$1();
     var 
     // onClick,
@@ -12097,7 +12105,7 @@ var Progress = memo(function (props) {
         width: width ? width : "100%",
         size: size ? size : 24,
     };
-    var classes = useStyles$e(styleProps);
+    var classes = useStyles$f(styleProps);
     var a = Array.from(Array(count).keys());
     return (React__default.createElement("div", __assign({ className: classes.root }, other), a.map(function (i) {
         return (React__default.createElement("div", { key: i, style: {
@@ -12145,9 +12153,9 @@ var Progress = memo(function (props) {
                     } })),
             React__default.createElement(Typography, { variant: "caption1", color: i + 1 === step ? "black1000" : "black700", style: { marginTop: 8 } }, label ? label[i] : null)));
     })));
-});
+};
 
-var useStyles$f = makeStyles$1(function (theme) { return ({
+var useStyles$g = makeStyles$1(function (theme) { return ({
     popper: function (props) { return ({
         border: "1px solid #CCCCCC",
         boxShadow: " 0px 4px 12px rgba(0, 0, 0, 0.1)",
@@ -12290,7 +12298,7 @@ var AutoComplete = function (props) {
         marginTop: anchorOrigin ? anchorOrigin.vertical : -65,
         marginLeft: anchorOrigin ? anchorOrigin.horizontal : -0,
     };
-    var classes = useStyles$f(styleProps);
+    var classes = useStyles$g(styleProps);
     var id = open ? "simple" : undefined;
     return (React__default.createElement("div", null,
         React__default.createElement(Popper$1, { id: id, open: open, anchorEl: anchorEl, placement: "bottom-start", className: classes.popper },
@@ -12326,7 +12334,7 @@ var AutoComplete = function (props) {
                     } })))));
 };
 
-var TaxTextField = memo(function (_a) {
+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, codeFocused = _a.codeFocused, domainFocused = _a.domainFocused;
     var _b = useState(""), modalIncome = _b[0], setModalIncome = _b[1];
     var _c = useState(""), modalExpense = _c[0], setModalExpense = _c[1];
@@ -12402,9 +12410,7 @@ var TaxTextField = memo(function (_a) {
                         display: "flex",
                         justifyContent: "space-between",
                         flexWrap: "nowrap",
-                        color: modalIncome === option.code
-                            ? theme.primary.primary400
-                            : null,
+                        color: modalIncome === option.code ? theme.primary.primary400 : null,
                     }, disabled: modalIncome === option.code, iconChildren: modalIncome === option.code ? (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: "M17.4998 5.83345L7.49984 15.8334L2.9165 11.2501L4.0915 10.0751L7.49984 13.4751L16.3248 4.65845L17.4998 5.83345Z", fill: "#4862CC" }))) : null },
                     option.code,
@@ -12469,7 +12475,7 @@ var TaxTextField = memo(function (_a) {
                 return null;
             }
         })()));
-});
+};
 var SWAPIncomeTypes$1 = [
     {
         code: "9A",
@@ -12667,18 +12673,18 @@ var SWAPTaxDescription$1 = function (incomeCode, expenseCode) {
  * 3. 所得類別為50薪資時不會有費用類別
  */
 
-var useStyles$g = makeStyles$1(function (theme) { return ({
+var useStyles$h = makeStyles$1(function (theme) { return ({
     root: function (props) { return ({
         backgroundColor: theme.black.black400,
         transform: "unset",
     }); },
 }); });
-var Skeleton$1 = memo(function (props) {
+var Skeleton$1 = function (props) {
     var other = __rest(props, []);
     var styleProps = {};
-    var classes = useStyles$g(styleProps);
+    var classes = useStyles$h(styleProps);
     return React__default.createElement(MaterialSkeleton, __assign({ classes: { root: classes.root } }, other));
-});
+};
 
 var useOutlinedInputStyles$1 = makeStyles$1(function (theme) { return ({
     root: {
@@ -12703,7 +12709,7 @@ var useOutlinedInputStyles$1 = makeStyles$1(function (theme) { return ({
     },
     notchedOutline: {},
 }); });
-var useStyles$h = makeStyles$1(function (theme) { return ({
+var useStyles$i = makeStyles$1(function (theme) { return ({
     root: function (props) { return ({
         //SWAPTheme調整
         width: props.width ? props.width : "100%",
@@ -12742,22 +12748,22 @@ var useStyles$h = makeStyles$1(function (theme) { return ({
         marginTop: 8,
     },
 }); });
-var Dropdown = memo(function (props) {
+var Dropdown = function (props) {
     var children = props.children, formControlStyle = props.formControlStyle, inputProps = props.inputProps, MenuProps = props.MenuProps, helperText = props.helperText, width = props.width, height = props.height, helperTextStyle = props.helperTextStyle, other = __rest(props, ["children", "formControlStyle", "inputProps", "MenuProps", "helperText", "width", "height", "helperTextStyle"]);
     var styleProps = {
         width: width,
         height: height,
     };
-    var classes = useStyles$h(styleProps);
+    var classes = useStyles$i(styleProps);
     var outlinedInputClasses = useOutlinedInputStyles$1();
     return (React__default.createElement(FormControl, { variant: "outlined", style: formControlStyle, classes: { root: classes.root } },
         React__default.createElement(MaterialSelect, __assign({}, other, { classes: {
                 icon: classes.icon,
             }, input: React__default.createElement(OutlinedInput, { classes: outlinedInputClasses }), inputProps: __assign({ classes: { root: classes.inputRoot } }, inputProps), MenuProps: __assign({ classes: { paper: classes.menuRoot }, getContentAnchorEl: null }, MenuProps) }), children),
         React__default.createElement(FormHelperText, { style: helperTextStyle }, helperText)));
-});
+};
 
-var useStyles$i = makeStyles$1(function (theme) { return ({
+var useStyles$j = makeStyles$1(function (theme) { return ({
     root: function (props) { return ({
         width: props.width
             ? props.width
@@ -12795,7 +12801,7 @@ var useStyles$i = makeStyles$1(function (theme) { return ({
         },
     }); },
 }); });
-var RadioList = memo(function (props) {
+var RadioList = function (props) {
     var width = props.width, height = props.height, title = props.title, subtitle = props.subtitle, multiline = props.multiline, checked = props.checked, line = props.line, other = __rest(props, ["width", "height", "title", "subtitle", "multiline", "checked", "line"]);
     var styleProps = {
         checked: checked,
@@ -12804,7 +12810,7 @@ var RadioList = memo(function (props) {
         height: height,
         line: line,
     };
-    var classes = useStyles$i(styleProps);
+    var classes = useStyles$j(styleProps);
     var _a = useState(0), lineHeight = _a[0], setLineHeight = _a[1];
     var ref = useRef(null);
     useEffect(function () {
@@ -12848,9 +12854,9 @@ var RadioList = memo(function (props) {
                 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));
-});
+};
 
-var useStyles$j = makeStyles$1(function (theme) { return ({
+var useStyles$k = makeStyles$1(function (theme) { return ({
     root: function (props) { return ({
         width: props.width
             ? props.width
@@ -12888,7 +12894,7 @@ var useStyles$j = makeStyles$1(function (theme) { return ({
         },
     }); },
 }); });
-var CheckBoxList = memo(function (props) {
+var CheckBoxList = function (props) {
     var width = props.width, height = props.height, title = props.title, subtitle = props.subtitle, multiline = props.multiline, checked = props.checked, line = props.line, other = __rest(props, ["width", "height", "title", "subtitle", "multiline", "checked", "line"]);
     var styleProps = {
         checked: checked,
@@ -12897,7 +12903,7 @@ var CheckBoxList = memo(function (props) {
         height: height,
         line: line,
     };
-    var classes = useStyles$j(styleProps);
+    var classes = useStyles$k(styleProps);
     var _a = useState(0), lineHeight = _a[0], setLineHeight = _a[1];
     var ref = useRef(null);
     useEffect(function () {
@@ -12941,9 +12947,9 @@ var CheckBoxList = memo(function (props) {
                 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));
-});
+};
 
-var useStyles$k = makeStyles$1(function (theme) { return ({
+var useStyles$l = makeStyles$1(function (theme) { return ({
     root: function (props) { return ({
         cursor: "pointer",
         color: props.color,
@@ -12960,7 +12966,7 @@ var useStyles$k = makeStyles$1(function (theme) { return ({
         border: "1px solid " + theme.primary.primary400,
     },
 }); });
-var Link = memo(function (props) {
+var Link = function (props) {
     var color = props.color, other = __rest(props, ["color"]);
     var theme = useTheme$1();
     var styleProps = {
@@ -13076,15 +13082,15 @@ var Link = memo(function (props) {
                                                                                                                                                                                                                                     ? theme.black.black1000
                                                                                                                                                                                                                                     : theme.black.black1000,
     };
-    var classes = useStyles$k(styleProps);
+    var classes = useStyles$l(styleProps);
     return (React__default.createElement(MaterialLink, __assign({ classes: {
             root: classes.root,
             focusVisible: classes.focusVisible,
             underlineHover: classes.underlineHover,
         }, tabIndex: 0 }, other)));
-});
+};
 
-var useStyles$l = makeStyles$1(function (theme) { return ({
+var useStyles$m = makeStyles$1(function (theme) { return ({
     root: function (props) { return ({
         boxShadow: theme.boxShadow.xl,
         borderRadius: 12,
@@ -13094,7 +13100,7 @@ var useStyles$l = makeStyles$1(function (theme) { return ({
         padding: props.matchSM ? 40 : props.matchXS ? 24 : 16,
     }); },
 }); });
-var Paper = React__default.memo(function (props) {
+var Paper = function (props) {
     var height = props.height, width = props.width, other = __rest(props, ["height", "width"]);
     var matchSM = useMediaQuery("(min-width:576px)");
     var matchXS = useMediaQuery("(min-width:375px)");
@@ -13104,13 +13110,13 @@ var Paper = React__default.memo(function (props) {
         matchSM: matchSM,
         matchXS: matchXS,
     };
-    var classes = useStyles$l(styleProps);
+    var classes = useStyles$m(styleProps);
     return (React__default.createElement(Paper$1$1, __assign({ variant: "outlined", classes: {
             root: classes.root,
         } }, other)));
-});
+};
 
-var useStyles$m = makeStyles$1(function (theme) { return ({
+var useStyles$n = makeStyles$1(function (theme) { return ({
     root: {
         width: 40,
         height: 24,
@@ -13173,10 +13179,10 @@ var useStyles$m = makeStyles$1(function (theme) { return ({
         boxShadow: "0px 2px 2px rgba(0, 0, 0, 0.15)",
     },
 }); });
-var Switch = memo(function (props) {
+var Switch = function (props) {
     var disabled = props.disabled, other = __rest(props, ["disabled"]);
     var styleProps = { disabled: disabled };
-    var classes = useStyles$m(styleProps);
+    var classes = useStyles$n(styleProps);
     return (React__default.createElement("div", { className: classes.switchOutBlock, tabIndex: 0 },
         React__default.createElement(MaterialSwitch, __assign({ disabled: disabled, tabIndex: 0, disableRipple: true, classes: {
                 root: classes.root,
@@ -13188,7 +13194,7 @@ var Switch = memo(function (props) {
                 React__default.createElement(Fade, { in: true, timeout: { enter: 200, exit: 200 } },
                     React__default.createElement("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
                         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 ({
@@ -13262,7 +13268,7 @@ var useStylesForCalendar = makeStyles$1(function (theme) { return ({
         },
     },
 }); });
-var DatePicker = memo(function (props) {
+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];
@@ -13492,7 +13498,7 @@ var DatePicker = memo(function (props) {
                     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 = {
@@ -13610,7 +13616,7 @@ var icon_arrowright = (React__default.createElement("svg", { width: "20", height
 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 = memo(function (props) {
+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];
@@ -13669,23 +13675,23 @@ var Breadcrumb = memo(function (props) {
                     }
                 } }, 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 = memo(function (props) {
+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 ({
+var useStyles$o = makeStyles$1(function (theme) { return ({
     root: function (props) { return ({
         width: props.width ? props.width : 350,
         height: props.height ? props.height : "100%",
@@ -13707,10 +13713,10 @@ var useStyles$n = makeStyles$1(function (theme) { return ({
         padding: 0,
     },
 }); });
-var Card = memo(function (props) {
+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 classes = useStyles$o(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%" } },
@@ -13730,7 +13736,7 @@ var Card = memo(function (props) {
                     ? 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%" }))))));
-});
+};
 
-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$1 as 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