@yosgo/swap-ui 1.0.138 → 1.0.140

package/build/index.esm.js

@@ -659,7 +659,7 @@ var ModalOpenEffect = function (props) {
         React__default.createElement("div", null, props.children)))));
 };
 var SWAPModal = function (_a) {
-    var open = _a.open, title = _a.title, onClose = _a.onClose, helpText = _a.helpText, primaryButton = _a.primaryButton, secondaryButton = _a.secondaryButton, children = _a.children, steps = _a.steps, successMessage = _a.successMessage, errorMessage = _a.errorMessage, closeWindowOnSuccessMessage = _a.closeWindowOnSuccessMessage, reloadOnWindowClose = _a.reloadOnWindowClose;
+    var open = _a.open, title = _a.title, onClose = _a.onClose, helpText = _a.helpText, primaryButton = _a.primaryButton, secondaryButton = _a.secondaryButton, children = _a.children, steps = _a.steps, successMessage = _a.successMessage, errorMessage = _a.errorMessage, closeWindowOnSuccessMessage = _a.closeWindowOnSuccessMessage, reloadOnWindowClose = _a.reloadOnWindowClose, fullScreen = _a.fullScreen;
     var _b = useState(false), sm = _b[0], setSm = _b[1];
     var _c = useState(0), stepIndex = _c[0], setStepIndex = _c[1];
     var handleModalSize = function () {
@@ -720,7 +720,7 @@ var SWAPModal = function (_a) {
         React__default.createElement(Fade, { in: open, timeout: { enter: 300, exit: 300 } },
             React__default.createElement(SWAPModalWrap, { id: "modal_wrap_" + title },
                 React__default.createElement(ModalOpenEffect, { in: open, sm: sm },
-                    React__default.createElement(Paper$1, { className: "modal_inner", id: "modal_inner_" + title },
+                    React__default.createElement(Paper$1, { className: "modal_inner " + (fullScreen ? 'full_screen' : ''), id: "modal_inner_" + title },
                         React__default.createElement("div", { className: "modal_inner_header", id: "modal_header_" + title },
                             React__default.createElement(Container$1, { maxWidth: "lg" },
                                 React__default.createElement(SWAPSpace, { size: "m" }),
@@ -776,7 +776,7 @@ 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$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 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  .full_screen {\n    width: 100vw;\n    height: 100vh;\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  .full_screen {\n    width: 100vw;\n    height: 100vh;\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) {
@@ -2533,18 +2533,11 @@ var Typography = React__default.memo(function (_a) {
     return (React__default.createElement(MaterialTypography, { className: classes.root, style: style }, children));
 });
 
-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");
-    var SM = useBreakpoints("sm");
-    var MD = useBreakpoints("md");
-    var LG = useBreakpoints("lg");
-    var XL = useBreakpoints("xl");
-    var XXL = useBreakpoints("xxl");
-    var useStyles = makeStyles$1({
-        root: {
-            maxWidth: maxWidth
+var useStyles$1 = makeStyles$1({
+    root: {
+        maxWidth: function (_a) {
+            var maxWidth = _a.maxWidth, XXL = _a.XXL, XL = _a.XL, LG = _a.LG;
+            return maxWidth
                 ? maxWidth === "lg"
                     ? 960
                     : maxWidth === "xl"
@@ -2558,8 +2551,11 @@ var Container = function (_a) {
                         ? 1140
                         : LG
                             ? 960
-                            : null,
-            padding: padding
+                            : null;
+        },
+        padding: function (_a) {
+            var padding = _a.padding, XXL = _a.XXL, XL = _a.XL, LG = _a.LG, MD = _a.MD, SM = _a.SM, XS = _a.XS, XXS = _a.XXS;
+            return padding
                 ? padding === "xxs"
                     ? "0px 8px"
                     : padding === "xs"
@@ -2583,10 +2579,30 @@ var Container = function (_a) {
                                         ? "0px 16px"
                                         : XXS
                                             ? "0px 8px"
-                                            : null,
+                                            : null;
         },
+    },
+});
+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");
+    var SM = useBreakpoints("sm");
+    var MD = useBreakpoints("md");
+    var LG = useBreakpoints("lg");
+    var XL = useBreakpoints("xl");
+    var XXL = useBreakpoints("xxl");
+    var classes = useStyles$1({
+        maxWidth: maxWidth,
+        padding: padding,
+        XXL: XXL,
+        XL: XL,
+        LG: LG,
+        MD: MD,
+        SM: SM,
+        XS: XS,
+        XXS: XXS,
     });
-    var classes = useStyles();
     return (React__default.createElement(MaterialContainer, { className: classes.root, style: style }, children));
 };
 
@@ -2609,7 +2625,7 @@ function useBreakpoints(breakpoints) {
     return matches;
 }
 
-var useStyles$1 = makeStyles$1(function (theme) { return ({
+var useStyles$2 = makeStyles$1(function (theme) { return ({
     root: function (props) { return ({
         width: 40,
         height: 40,
@@ -2678,12 +2694,12 @@ var CheckBox = function (props) {
     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(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$2 = makeStyles$1(function (theme) { return ({
+var useStyles$3 = makeStyles$1(function (theme) { return ({
     root: function (props) { return ({
         width: 40,
         height: 40,
@@ -2752,13 +2768,13 @@ var RadioButton = function (props) {
     var styleProps = {
         disableHover: disableHover,
     };
-    var classes = useStyles$2(styleProps);
+    var classes = useStyles$3(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$3 = makeStyles$1(function (theme) { return ({
+var useStyles$4 = makeStyles$1(function (theme) { return ({
     root: {
         "& .MuiFormHelperText-contained": {
             marginLeft: 16,
@@ -2858,7 +2874,7 @@ var TextField = function (props) {
         height: height,
         select: select,
     };
-    var classes = useStyles$3(styleProps);
+    var classes = useStyles$4(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,
@@ -2874,50 +2890,79 @@ var TextField = function (props) {
             } }, SelectProps) }), children));
 };
 
-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: {
-            minWidth: 0,
-            minHeight: 0,
-            padding: 0,
-            margin: margin ? margin : "0px 12px",
-            fontWeight: 700,
-            fontSize: fontSize ? fontSize : 14,
-            lineHeight: 1.4,
-            "&:hover": {
-                color: "#000000",
-            },
+var useStyles$5 = makeStyles$1(function (theme) { return ({
+    root: {
+        minWidth: 0,
+        minHeight: 0,
+        padding: 0,
+        margin: function (_a) {
+            var margin = _a.margin;
+            return (margin ? margin : "0px 12px");
         },
-        text: {
-            opacity: 1,
-            color: theme.black.black700,
+        fontWeight: 700,
+        fontSize: function (_a) {
+            var fontSize = _a.fontSize;
+            return (fontSize ? fontSize : 14);
         },
-        indicatorRoot: {
-            color: selected ? "#000000" : "unset",
-            width: width ? width : 56,
-            height: height ? height : 56,
-            display: "flex",
-            justifyContent: "center",
-            alignItems: "center",
-            position: "relative",
+        lineHeight: 1.4,
+        "&:hover": {
+            color: "#000000",
         },
-        selected_indicator: {
-            animation: animation ? "$selected 300ms " : "unset",
-            height: 4,
-            width: "100%",
-            backgroundColor: theme.primary.primary400,
-            position: "absolute",
-            bottom: 0,
-            display: noIndicator ? "none" : null,
-            borderRadius: "100px 100px 0px 0px",
+    },
+    text: {
+        opacity: 1,
+        color: theme.black.black700,
+    },
+    indicatorRoot: {
+        color: function (_a) {
+            var selected = _a.selected;
+            return (selected ? "#000000" : "unset");
         },
-        "@keyframes selected": {
-            from: { width: 0 },
-            to: { width: "100%" },
+        width: function (_a) {
+            var width = _a.width;
+            return (width ? width : 56);
         },
-    }); });
-    var classes = useStyles();
+        height: function (_a) {
+            var height = _a.height;
+            return (height ? height : 56);
+        },
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        position: "relative",
+    },
+    selected_indicator: {
+        animation: function (_a) {
+            var animation = _a.animation;
+            return animation ? "$selected 300ms " : "unset";
+        },
+        height: 4,
+        width: "100%",
+        backgroundColor: theme.primary.primary400,
+        position: "absolute",
+        bottom: 0,
+        display: function (_a) {
+            var noIndicator = _a.noIndicator;
+            return (noIndicator ? "none" : null);
+        },
+        borderRadius: "100px 100px 0px 0px",
+    },
+    "@keyframes selected": {
+        from: { width: 0 },
+        to: { width: "100%" },
+    },
+}); });
+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 classes = useStyles$5({
+        animation: animation,
+        noIndicator: noIndicator,
+        height: height,
+        width: width,
+        selected: selected,
+        margin: margin,
+        fontSize: fontSize,
+    });
     return (React__default.createElement(MaterialTab, __assign({}, other, { classes: {
             root: classes.root,
             textColorInherit: classes.text,
@@ -2926,7 +2971,7 @@ var Tab = function (props) {
             selected ? React__default.createElement("div", { className: classes.selected_indicator }) : null), disableRipple: true })));
 };
 
-var useStyles$4 = makeStyles$1({
+var useStyles$6 = makeStyles$1({
     root: {},
     indicatorRoot: {
         backgroundColor: "transparent",
@@ -2934,14 +2979,14 @@ var useStyles$4 = makeStyles$1({
 });
 var Tabs = function (props) {
     var children = props.children, other = __rest(props, ["children"]);
-    var classes = useStyles$4();
+    var classes = useStyles$6();
     return (React__default.createElement(MaterialTabs, __assign({}, other, { classes: {
             root: classes.root,
             indicator: classes.indicatorRoot,
         } }), children));
 };
 
-var useStyles$5 = makeStyles$1(function (theme) { return ({
+var useStyles$7 = makeStyles$1(function (theme) { return ({
     root: function (props) { return ({
         //SWAPTheme調整
         textTransform: "unset",
@@ -2973,7 +3018,7 @@ var SegmentedTab = function (props) {
         fontSize: fontSize,
         flex: flex,
     };
-    var classes = useStyles$5(styleProps);
+    var classes = useStyles$7(styleProps);
     return (React__default.createElement(MaterialTab, __assign({}, other, { disableRipple: true, classes: { textColorInherit: classes.text }, className: classes.root })));
 };
 
@@ -3410,7 +3455,7 @@ var smoothscroll = createCommonjsModule(function (module, exports) {
 });
 var smoothscroll_1 = smoothscroll.polyfill;
 
-var useStyles$6 = makeStyles$1(function (theme) { return ({
+var useStyles$8 = makeStyles$1(function (theme) { return ({
     root: function (props) { return ({
         width: props.width,
         boxSizing: "border-box",
@@ -3445,7 +3490,7 @@ var SegmentedTabs = function (_a) {
         width: width,
         slide: slide,
     };
-    var classes = useStyles$6(styleProps);
+    var classes = useStyles$8(styleProps);
     var tabsRef = useRef(null);
     useEffect(function () {
         smoothscroll.polyfill();
@@ -3501,7 +3546,7 @@ var useOutlinedInputStyles = makeStyles$1(function (theme) { return ({
     },
     notchedOutline: {},
 }); });
-var useStyles$7 = makeStyles$1(function (theme) { return ({
+var useStyles$9 = makeStyles$1(function (theme) { return ({
     root: function (props) { return ({
         //SWAPTheme調整
         width: props.width ? props.width : "100%",
@@ -3564,7 +3609,7 @@ var Select = function (_a) {
         paddingLeft: paddingLeft,
         dropdown: dropdown,
     };
-    var classes = useStyles$7(styleProps);
+    var classes = useStyles$9(styleProps);
     return (React__default.createElement(FormControl, { variant: "outlined", style: style, classes: { root: classes.root } },
         React__default.createElement(InputLabel, { classes: {
                 root: classes.placeholder,
@@ -3588,7 +3633,7 @@ var Menu = function (props) {
     return (React__default.createElement(MaterialMenu, __assign({ open: open }, other), children));
 };
 
-var useStyles$8 = makeStyles$1(function (theme) { return ({
+var useStyles$a = makeStyles$1(function (theme) { return ({
     root: function (props) { return ({
         fontSize: 14,
         fontWeight: 700,
@@ -3627,19 +3672,18 @@ var MenuItem = React__default.forwardRef(function (props, ref) {
         hoverIconColor: hoverIconColor,
         rippleColor: rippleColor,
     };
-    var classes = useStyles$8(styleProps);
+    var classes = useStyles$a(styleProps);
     return (React__default.createElement(MaterialMenuItem, __assign({ className: classes.root }, other),
         children,
         React__default.createElement(ListItemIcon, { style: { justifyContent: "flex-end" } }, iconChildren)));
 });
 
-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 ({
-        root: {
-            textTransform: "unset",
-            color: variant === "primary"
+var useStyles$b = makeStyles$1(function (theme) { return ({
+    root: {
+        textTransform: "unset",
+        color: function (_a) {
+            var variant = _a.variant;
+            return variant === "primary"
                 ? theme.black.white
                 : variant === "secondary"
                     ? theme.primary.primary400
@@ -3651,8 +3695,11 @@ var Button = function (props) {
                                 ? theme.black.black800
                                 : variant === "danger"
                                     ? theme.black.white
-                                    : theme.black.white,
-            backgroundColor: variant === "primary"
+                                    : theme.black.white;
+        },
+        backgroundColor: function (_a) {
+            var variant = _a.variant;
+            return variant === "primary"
                 ? theme.primary.primary400
                 : variant === "secondary"
                     ? theme.black.white
@@ -3664,8 +3711,11 @@ var Button = function (props) {
                                 ? theme.black.white
                                 : variant === "danger"
                                     ? theme.danger.danger800
-                                    : theme.primary.primary400,
-            border: variant === "primary"
+                                    : theme.primary.primary400;
+        },
+        border: function (_a) {
+            var variant = _a.variant;
+            return variant === "primary"
                 ? "1px solid " + theme.primary.primary600
                 : variant === "secondary"
                     ? "1px solid " + theme.primary.primary400
@@ -3675,29 +3725,47 @@ var Button = function (props) {
                             ? null
                             : variant === "danger"
                                 ? "1px solid " + theme.danger.dangerA11y
-                                : "1px solid " + theme.primary.primary600,
-            borderRadius: "8px",
-            height: size === "small"
+                                : "1px solid " + theme.primary.primary600;
+        },
+        borderRadius: "8px",
+        height: function (_a) {
+            var size = _a.size;
+            return size === "small"
                 ? "40px"
                 : size === "medium"
                     ? "48px"
                     : size === "large"
                         ? "56px"
-                        : "48px",
-            padding: size === "small"
+                        : "48px";
+        },
+        padding: function (_a) {
+            var size = _a.size;
+            return size === "small"
                 ? "12px 16px"
                 : size === "medium"
                     ? "15px 24px"
                     : size === "large"
                         ? "19px 32px"
-                        : "15px 24px",
-            minWidth: minWidth,
-            width: width,
-            fontSize: size === "small" ? 14 : size === "medium" || size === "large" ? 16 : 16,
-            fontWeight: 700,
-            lineHeight: 1.125,
-            "&:hover": {
-                backgroundColor: variant === "primary"
+                        : "15px 24px";
+        },
+        minWidth: function (_a) {
+            var minWidth = _a.minWidth;
+            return minWidth;
+        },
+        width: function (_a) {
+            var width = _a.width;
+            return width;
+        },
+        fontSize: function (_a) {
+            var size = _a.size;
+            return size === "small" ? 14 : size === "medium" || size === "large" ? 16 : 16;
+        },
+        fontWeight: 700,
+        lineHeight: 1.125,
+        "&:hover": {
+            backgroundColor: function (_a) {
+                var variant = _a.variant;
+                return variant === "primary"
                     ? theme.primary.primary300
                     : variant === "secondary"
                         ? theme.primary.primary50
@@ -3709,19 +3777,23 @@ var Button = function (props) {
                                     ? theme.black.black400
                                     : variant === "danger"
                                         ? theme.danger.danger600
-                                        : theme.primary.primary300,
-                border: variant === "primary"
+                                        : theme.primary.primary300;
+            },
+            border: function (_a) {
+                var variant = _a.variant;
+                return variant === "primary"
                     ? "1px solid " + theme.primary.primary300
-                    : variant === "tertiary" ||
-                        variant === "text" ||
-                        variant === "black"
+                    : variant === "tertiary" || variant === "text" || variant === "black"
                         ? null
                         : variant === "danger"
                             ? "1px solid " + theme.danger.dangerA11y
-                            : "1px solid " + theme.primary.primary300,
+                            : "1px solid " + theme.primary.primary300;
             },
-            "&:active": {
-                backgroundColor: variant === "primary"
+        },
+        "&:active": {
+            backgroundColor: function (_a) {
+                var variant = _a.variant;
+                return variant === "primary"
                     ? theme.primary.primary500
                     : variant === "secondary"
                         ? theme.primary.primary100
@@ -3733,17 +3805,23 @@ var Button = function (props) {
                                     ? theme.black.black500
                                     : variant === "danger"
                                         ? theme.danger.danger900
-                                        : theme.primary.primary500,
+                                        : theme.primary.primary500;
             },
-            "&:focus-visible": {
-                boxShadow: variant === "black"
+        },
+        "&:focus-visible": {
+            boxShadow: function (_a) {
+                var variant = _a.variant;
+                return variant === "black"
                     ? "0px 0px 0px 4px #CCCCCC"
                     : variant === "danger"
                         ? "0px 0px 0px 4px #FFCCD0"
                         : variant === "tertiary"
                             ? "0px 0px 0px 4px rgba(0, 0, 0, 0.1)"
-                            : "0px 0px 0px 4px #D7DFF8",
-                backgroundColor: variant === "primary"
+                            : "0px 0px 0px 4px #D7DFF8";
+            },
+            backgroundColor: function (_a) {
+                var variant = _a.variant;
+                return variant === "primary"
                     ? theme.primary.primary400
                     : variant === "secondary"
                         ? theme.primary.primary50
@@ -3755,8 +3833,11 @@ var Button = function (props) {
                                     ? theme.black.black400
                                     : variant === "danger"
                                         ? theme.danger.danger600
-                                        : theme.primary.primary400,
-                border: variant === "secondary"
+                                        : theme.primary.primary400;
+            },
+            border: function (_a) {
+                var variant = _a.variant;
+                return variant === "secondary"
                     ? "1px solid " + theme.primary.primary400
                     : variant === "tertiary"
                         ? "1px solid " + theme.black.black600
@@ -3766,11 +3847,14 @@ var Button = function (props) {
                                 ? "1px solid " + theme.black.black800
                                 : variant === "danger"
                                     ? "1px solid " + theme.danger.dangerA11y
-                                    : "1px solid " + theme.primary.primary600,
+                                    : "1px solid " + theme.primary.primary600;
             },
-            "&:disabled": {
-                opacity: 0.4,
-                backgroundColor: variant === "primary"
+        },
+        "&:disabled": {
+            opacity: 0.4,
+            backgroundColor: function (_a) {
+                var variant = _a.variant;
+                return variant === "primary"
                     ? theme.primary.primary800
                     : variant === "secondary"
                         ? theme.black.white
@@ -3782,8 +3866,11 @@ var Button = function (props) {
                                     ? theme.black.white
                                     : variant === "danger"
                                         ? theme.danger.danger800
-                                        : theme.primary.primary800,
-                color: variant === "primary"
+                                        : theme.primary.primary800;
+            },
+            color: function (_a) {
+                var variant = _a.variant;
+                return variant === "primary"
                     ? theme.black.white
                     : variant === "secondary"
                         ? theme.primary.primary400
@@ -3795,16 +3882,28 @@ var Button = function (props) {
                                     ? theme.black.black800
                                     : variant === "danger"
                                         ? theme.black.white
-                                        : theme.black.white,
-                border: variant === "secondary"
+                                        : theme.black.white;
+            },
+            border: function (_a) {
+                var variant = _a.variant;
+                return variant === "secondary"
                     ? "1px solid " + theme.primary.primary800
                     : variant === "danger"
                         ? "1px solid " + theme.danger.dangerA11y
-                        : null,
+                        : null;
             },
         },
-    }); });
-    var classes = useStyles();
+    },
+}); });
+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 classes = useStyles$b({
+        variant: variant,
+        size: size,
+        minWidth: minWidth,
+        width: width,
+    });
     return (React__default.createElement(MaterialButton, __assign({ className: classes.root, disableElevation: true, disableFocusRipple: true, onClick: function (event) {
             onClick(event);
         }, size: "medium" }, other), loading ? (React__default.createElement("div", { style: { position: "relative" } },
@@ -3844,7 +3943,7 @@ var Button = function (props) {
             } }))) : (React__default.createElement("div", { style: { whiteSpace: "nowrap" } }, children))));
 };
 
-var useStyles$9 = makeStyles$1(function () { return ({
+var useStyles$c = makeStyles$1(function () { return ({
     root: function (props) { return ({
         width: props.width,
         height: props.height,
@@ -4092,7 +4191,7 @@ var IconButton = function (props) {
                                                                                                                                                                                                                                         : hoverIconColor
             : null,
     };
-    var classes = useStyles$9(styleProps);
+    var classes = useStyles$c(styleProps);
     return React__default.createElement(IconButton$1$1, __assign({ className: classes.root }, other));
 };
 
@@ -4111,7 +4210,7 @@ function TransitionDown(props) {
 function Transition(props) {
     return React__default.createElement(Fade, __assign({}, props));
 }
-var useStyles$a = makeStyles$1(function (theme) { return ({
+var useStyles$d = makeStyles$1(function (theme) { return ({
     root: {
         "@media only screen and (min-width: 600px)": {
             width: "fit-content",
@@ -4176,7 +4275,7 @@ var Snackbar = function (props) {
         height: height,
         variant: variant,
     };
-    var classes = useStyles$a(styleProps);
+    var classes = useStyles$d(styleProps);
     return (React__default.createElement(MaterialSnackBar, __assign({}, other, { className: classes.root, ContentProps: {
             classes: {
                 root: classes.contentRoot,
@@ -7187,7 +7286,7 @@ const host = createHost(primitives, {
 });
 const animated = host.animated;
 
-var useStyles$b = makeStyles$1(function (theme) { return ({
+var useStyles$e = makeStyles$1(function (theme) { return ({
     root: function (props) { return ({
         margin: props.margin,
         backgroundColor: props.backgroundColor,
@@ -7234,7 +7333,7 @@ var Tooltip = function (props) {
         border: light ? "1px solid #CCCCCC" : null,
         fontWeight: arrow ? 700 : 400,
     };
-    var classes = useStyles$b(styleProps);
+    var classes = useStyles$e(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)));
 };
@@ -7261,45 +7360,28 @@ 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 = 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];
-    useEffect(function () {
-        if (mobile || fullWidth) {
-            if ((helpText || multiline) && !label) {
-                setClientHeight(window.innerHeight - 64 - 73 - 64);
-            }
-            else if (!helpText && label) {
-                setClientHeight(window.innerHeight - 64 - 56 - 99);
-            }
-            else if ((helpText || multiline) && label) {
-                setClientHeight(window.innerHeight - 64 - 73 - 99);
-            }
-            else {
-                setClientHeight(window.innerHeight - 64 - 56 - 64);
-            }
-        }
-    }, [fullWidth, mobile]);
-    useEffect(function () {
-        var scrollbar_width = window.innerWidth - document.body.clientWidth;
-        setScorllbarWidth(scrollbar_width / 2);
-    }, []);
-    var match_XS = useBreakpoints("xs");
-    var useStyles = makeStyles$1(function (theme) { return ({
-        root: {
-            display: "flex",
-            alignItems: fullWidth ? "flex-end" : "center",
-            justifyContent: "center",
-            border: "unset",
-            borderRadius: 12,
-            margin: fullWidth ? 0 : match_XS ? "0px 24px" : "0px 16px",
+var useStyles$f = makeStyles$1(function (theme) { return ({
+    root: {
+        display: "flex",
+        alignItems: function (_a) {
+            var fullWidth = _a.fullWidth;
+            return fullWidth ? "flex-end" : "center";
         },
-        backdrop: {
-            transition: "all 0.2s ease-in-out !important",
+        justifyContent: "center",
+        border: "unset",
+        borderRadius: 12,
+        margin: function (_a) {
+            var fullWidth = _a.fullWidth, match_XS = _a.match_XS;
+            return fullWidth ? 0 : match_XS ? "0px 24px" : "0px 16px";
         },
-        modal: {
-            width: width
+    },
+    backdrop: {
+        transition: "all 0.2s ease-in-out !important",
+    },
+    modal: {
+        width: function (_a) {
+            var width = _a.width, size = _a.size;
+            return width
                 ? width
                 : size === "large"
                     ? 800
@@ -7309,19 +7391,28 @@ var Modal = React__default.forwardRef(function (props, ref) {
                             ? 480
                             : size === "extraSmall"
                                 ? 320
-                                : "100%",
-            maxWidth: maxWidth,
-            borderRadius: fullWidth ? "12px 12px 0px 0px" : 12,
-            border: "unset",
-            boxShadow: theme.boxShadow.l,
-            display: "flex",
-            flexDirection: "column",
-            outline: 0,
+                                : "100%";
+        },
+        maxWidth: function (_a) {
+            var maxWidth = _a.maxWidth;
+            return maxWidth;
         },
-        head: {
-            height: "100%",
-            borderRadius: "12px 12px 0px 0px",
-            padding: headpadding
+        borderRadius: function (_a) {
+            var fullWidth = _a.fullWidth;
+            return fullWidth ? "12px 12px 0px 0px" : 12;
+        },
+        border: "unset",
+        boxShadow: theme.boxShadow.l,
+        display: "flex",
+        flexDirection: "column",
+        outline: 0,
+    },
+    head: {
+        height: "100%",
+        borderRadius: "12px 12px 0px 0px",
+        padding: function (_a) {
+            var headpadding = _a.headpadding, mobile = _a.mobile, disCloseIcon = _a.disCloseIcon, helpText = _a.helpText, multiline = _a.multiline;
+            return headpadding
                 ? headpadding
                 : mobile
                     ? disCloseIcon && !helpText && !multiline
@@ -7329,24 +7420,30 @@ var Modal = React__default.forwardRef(function (props, ref) {
                         : "12px 16px"
                     : disCloseIcon && !helpText && !multiline
                         ? "19.5px 24px"
-                        : "16px 24px",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "space-between",
-            position: "relative",
-            pointerEvents: onExit ? "none" : "unset",
+                        : "16px 24px";
         },
-        title: {
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        position: "relative",
+        pointerEvents: function (_a) {
+            var onExit = _a.onExit;
+            return (onExit ? "none" : "unset");
         },
-        icon: {
-            "& path": {
-                width: 20,
-                height: 20,
-            },
-            color: iconColor === "primary50"
+    },
+    title: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    icon: {
+        "& path": {
+            width: 20,
+            height: 20,
+        },
+        color: function (_a) {
+            var iconColor = _a.iconColor, checkIconColor = _a.checkIconColor;
+            return iconColor === "primary50"
                 ? theme.primary.primary50
                 : iconColor === "primary100"
                     ? theme.primary.primary100
@@ -7566,76 +7663,148 @@ var Modal = React__default.forwardRef(function (props, ref) {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                 ? theme.black.black900
                                                                                                                                                                                                                                                                                                                                                                                                                                                                 : checkIconColor === "black1000"
                                                                                                                                                                                                                                                                                                                                                                                                                                                                     ? theme.black.black1000
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                    : theme.black.black700,
-            marginRight: 10,
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                    : theme.black.black700;
         },
-        closeIconButton: {
-            padding: 0,
-            width: 32,
-            height: 32,
+        marginRight: 10,
+    },
+    closeIconButton: {
+        padding: 0,
+        width: 32,
+        height: 32,
+        borderRadius: 8,
+        "&:hover": {
             borderRadius: 8,
-            "&:hover": {
-                borderRadius: 8,
-            },
-            marginLeft: 16,
         },
-        closeIconRippleRoot: {
-            borderRadius: 8,
+        marginLeft: 16,
+    },
+    closeIconRippleRoot: {
+        borderRadius: 8,
+    },
+    closeIcon: {
+        color: theme.black.black1000,
+        borderRadius: 8,
+        width: 20,
+        height: 20,
+    },
+    body: {
+        transition: "all 0.2s ease-in-out",
+        height: function (_a) {
+            var height = _a.height;
+            return (height ? height : "100%");
         },
-        closeIcon: {
-            color: theme.black.black1000,
-            borderRadius: 8,
-            width: 20,
-            height: 20,
+        padding: function (_a) {
+            var bodyPadding = _a.bodyPadding, mobile = _a.mobile;
+            return bodyPadding ? bodyPadding : mobile ? 16 : 24;
         },
-        body: {
-            transition: "all 0.2s ease-in-out",
-            height: height ? height : "100%",
-            padding: bodyPadding ? bodyPadding : mobile ? 16 : 24,
-            position: "relative",
-            pointerEvents: onExit ? "none" : "unset",
-            maxHeight: bodyMaxHeight
-                ? bodyMaxHeight
-                : fullWidth
-                    ? clientHeight
-                    : "unset",
-            overflowY: !onExit ? "scroll" : "hidden",
-            "&::-webkit-scrollbar": {
-                backgroundColor: "transparent",
-                width: 5,
-            },
-            "&::-webkit-scrollbar-thumb": {
-                backgroundColor: theme.black.black600,
-                borderRadius: 100,
-            },
-            "&::-webkit-scrollbar-track-piece:start": {
-                marginTop: 12,
-            },
-            "&::-webkit-scrollbar-track-piece:end": {
-                marginBottom: 12,
-            },
+        position: "relative",
+        pointerEvents: function (_a) {
+            var onExit = _a.onExit;
+            return (onExit ? "none" : "unset");
+        },
+        maxHeight: function (_a) {
+            var bodyMaxHeight = _a.bodyMaxHeight, fullWidth = _a.fullWidth, clientHeight = _a.clientHeight;
+            return bodyMaxHeight ? bodyMaxHeight : fullWidth ? clientHeight : "unset";
+        },
+        overflowY: function (_a) {
+            var onExit = _a.onExit;
+            return (!onExit ? "scroll" : "hidden");
+        },
+        "&::-webkit-scrollbar": {
+            backgroundColor: "transparent",
+            width: 5,
+        },
+        "&::-webkit-scrollbar-thumb": {
+            backgroundColor: theme.black.black600,
+            borderRadius: 100,
+        },
+        "&::-webkit-scrollbar-track-piece:start": {
+            marginTop: 12,
+        },
+        "&::-webkit-scrollbar-track-piece:end": {
+            marginBottom: 12,
         },
-        footer: {
-            height: "100%",
-            padding: label || secondaryButton || primaryButton
+    },
+    footer: {
+        height: "100%",
+        padding: function (_a) {
+            var label = _a.label, secondaryButton = _a.secondaryButton, primaryButton = _a.primaryButton, mobile = _a.mobile;
+            return label || secondaryButton || primaryButton
                 ? mobile
                     ? "12px 16px"
                     : "16px 24px"
-                : null,
-            borderRadius: "0px 0px 12px 12px",
-            display: "flex",
-            flexDirection: mobile ? "column" : "row",
-            alignItems: "center",
-            justifyContent: "space-between",
+                : null;
         },
-        footerButton: {
-            width: buttonFullWidth || footerDisplayColumn || mobile ? "100%" : null,
-            display: "flex",
-            flexDirection: footerDisplayColumn ? "column-reverse" : "row",
-            alignItems: "center",
+        borderRadius: "0px 0px 12px 12px",
+        display: "flex",
+        flexDirection: function (_a) {
+            var mobile = _a.mobile;
+            return (mobile ? "column" : "row");
         },
-    }); });
-    var classes = useStyles();
+        alignItems: "center",
+        justifyContent: "space-between",
+    },
+    footerButton: {
+        width: function (_a) {
+            var buttonFullWidth = _a.buttonFullWidth, footerDisplayColumn = _a.footerDisplayColumn, mobile = _a.mobile;
+            return buttonFullWidth || footerDisplayColumn || mobile ? "100%" : null;
+        },
+        display: "flex",
+        flexDirection: function (_a) {
+            var footerDisplayColumn = _a.footerDisplayColumn;
+            return footerDisplayColumn ? "column-reverse" : "row";
+        },
+        alignItems: "center",
+    },
+}); });
+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];
+    useEffect(function () {
+        if (mobile || fullWidth) {
+            if ((helpText || multiline) && !label) {
+                setClientHeight(window.innerHeight - 64 - 73 - 64);
+            }
+            else if (!helpText && label) {
+                setClientHeight(window.innerHeight - 64 - 56 - 99);
+            }
+            else if ((helpText || multiline) && label) {
+                setClientHeight(window.innerHeight - 64 - 73 - 99);
+            }
+            else {
+                setClientHeight(window.innerHeight - 64 - 56 - 64);
+            }
+        }
+    }, [fullWidth, mobile]);
+    useEffect(function () {
+        var scrollbar_width = window.innerWidth - document.body.clientWidth;
+        setScorllbarWidth(scrollbar_width / 2);
+    }, []);
+    var match_XS = useBreakpoints("xs");
+    var classes = useStyles$f({
+        fullWidth: fullWidth,
+        match_XS: match_XS,
+        width: width,
+        size: size,
+        maxWidth: maxWidth,
+        headpadding: headpadding,
+        mobile: mobile,
+        disCloseIcon: disCloseIcon,
+        onExit: onExit,
+        iconColor: iconColor,
+        checkIconColor: checkIconColor,
+        height: height,
+        bodyPadding: bodyPadding,
+        bodyMaxHeight: bodyMaxHeight,
+        clientHeight: clientHeight,
+        label: label,
+        secondaryButton: secondaryButton,
+        primaryButton: primaryButton,
+        buttonFullWidth: buttonFullWidth,
+        footerDisplayColumn: footerDisplayColumn,
+        helpText: helpText,
+        multiline: multiline,
+    });
     return (React__default.createElement(MaterialModal, { open: open, className: classes.root, BackdropComponent: Backdrop, BackdropProps: {
             className: classes.backdrop,
             style: { overflow: "auto", WebkitOverflowScrolling: "touch" },
@@ -7742,7 +7911,7 @@ var Modal = React__default.forwardRef(function (props, ref) {
                                 : "primary", size: "small", onClick: primaryButton.onClick, disabled: primaryButton.disabled, loading: primaryButton.loading, style: primaryButton.style }, primaryButton.title))) : null))) : null)))))));
 });
 
-var useStyles$c = makeStyles$1(function () { return ({
+var useStyles$g = makeStyles$1(function () { return ({
     root: function (props) { return ({
         backgroundColor: props.backgroundColor,
         border: "1px solid " + props.borderColor,
@@ -7790,7 +7959,7 @@ var Banner = function (props) {
         height: height ? height : null,
         alignItems: mobile ? "flex-start" : alignStart ? "flex-start" : "center",
     };
-    var classes = useStyles$c(styleProps);
+    var classes = useStyles$g(styleProps);
     var ref = useRef(null);
     useEffect(function () {
         if (ref.current) {
@@ -7816,7 +7985,7 @@ var Banner = function (props) {
         React__default.createElement(Typography, { variant: "caption2" }, children)));
 };
 
-var useStyles$d = makeStyles$1(function () { return ({
+var useStyles$h = makeStyles$1(function () { return ({
     root: function (props) { return ({
         backgroundColor: props.backgroundColor,
         border: props.border,
@@ -7872,7 +8041,7 @@ var Chip = function (props) {
                         ? theme.danger.danger800
                         : theme.primary.primary800,
     };
-    var classes = useStyles$d(styleProps);
+    var classes = useStyles$h(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));
@@ -12013,7 +12182,7 @@ var MaterialSkeleton = withStyles(styles$3, {
   name: 'MuiSkeleton'
 })(Skeleton);
 
-var useStyles$e = makeStyles$1(function (theme) { return ({
+var useStyles$i = makeStyles$1(function (theme) { return ({
     root: function () { return ({}); },
     ul: {
         "& li": {
@@ -12069,7 +12238,7 @@ var Pagination$1 = function (props) {
     // const theme = useTheme();
     var other = __rest(props, []);
     var styleProps = {};
-    var classes = useStyles$e(styleProps);
+    var classes = useStyles$i(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,
@@ -12078,7 +12247,7 @@ var Pagination$1 = function (props) {
             } }))); } })));
 };
 
-var useStyles$f = makeStyles$1(function (theme) { return ({
+var useStyles$j = makeStyles$1(function (theme) { return ({
     root: function (props) { return ({
         width: props.width,
         display: "flex",
@@ -12105,7 +12274,7 @@ var Progress = function (props) {
         width: width ? width : "100%",
         size: size ? size : 24,
     };
-    var classes = useStyles$f(styleProps);
+    var classes = useStyles$j(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: {
@@ -12155,7 +12324,7 @@ var Progress = function (props) {
     })));
 };
 
-var useStyles$g = makeStyles$1(function (theme) { return ({
+var useStyles$k = makeStyles$1(function (theme) { return ({
     popper: function (props) { return ({
         border: "1px solid #CCCCCC",
         boxShadow: " 0px 4px 12px rgba(0, 0, 0, 0.1)",
@@ -12298,7 +12467,7 @@ var AutoComplete = function (props) {
         marginTop: anchorOrigin ? anchorOrigin.vertical : -65,
         marginLeft: anchorOrigin ? anchorOrigin.horizontal : -0,
     };
-    var classes = useStyles$g(styleProps);
+    var classes = useStyles$k(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 },
@@ -12673,7 +12842,7 @@ var SWAPTaxDescription$1 = function (incomeCode, expenseCode) {
  * 3. 所得類別為50薪資時不會有費用類別
  */
 
-var useStyles$h = makeStyles$1(function (theme) { return ({
+var useStyles$l = makeStyles$1(function (theme) { return ({
     root: function (props) { return ({
         backgroundColor: theme.black.black400,
         transform: "unset",
@@ -12682,7 +12851,7 @@ var useStyles$h = makeStyles$1(function (theme) { return ({
 var Skeleton$1 = function (props) {
     var other = __rest(props, []);
     var styleProps = {};
-    var classes = useStyles$h(styleProps);
+    var classes = useStyles$l(styleProps);
     return React__default.createElement(MaterialSkeleton, __assign({ classes: { root: classes.root } }, other));
 };
 
@@ -12709,7 +12878,7 @@ var useOutlinedInputStyles$1 = makeStyles$1(function (theme) { return ({
     },
     notchedOutline: {},
 }); });
-var useStyles$i = makeStyles$1(function (theme) { return ({
+var useStyles$m = makeStyles$1(function (theme) { return ({
     root: function (props) { return ({
         //SWAPTheme調整
         width: props.width ? props.width : "100%",
@@ -12754,7 +12923,7 @@ var Dropdown = function (props) {
         width: width,
         height: height,
     };
-    var classes = useStyles$i(styleProps);
+    var classes = useStyles$m(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: {
@@ -12763,7 +12932,7 @@ var Dropdown = function (props) {
         React__default.createElement(FormHelperText, { style: helperTextStyle }, helperText)));
 };
 
-var useStyles$j = makeStyles$1(function (theme) { return ({
+var useStyles$n = makeStyles$1(function (theme) { return ({
     root: function (props) { return ({
         width: props.width
             ? props.width
@@ -12810,7 +12979,7 @@ var RadioList = function (props) {
         height: height,
         line: line,
     };
-    var classes = useStyles$j(styleProps);
+    var classes = useStyles$n(styleProps);
     var _a = useState(0), lineHeight = _a[0], setLineHeight = _a[1];
     var ref = useRef(null);
     useEffect(function () {
@@ -12856,7 +13025,7 @@ var RadioList = function (props) {
         !multiline && !line ? (React__default.createElement(Typography, { variant: "body2_loose", color: "black800" }, subtitle)) : null));
 };
 
-var useStyles$k = makeStyles$1(function (theme) { return ({
+var useStyles$o = makeStyles$1(function (theme) { return ({
     root: function (props) { return ({
         width: props.width
             ? props.width
@@ -12903,7 +13072,7 @@ var CheckBoxList = function (props) {
         height: height,
         line: line,
     };
-    var classes = useStyles$k(styleProps);
+    var classes = useStyles$o(styleProps);
     var _a = useState(0), lineHeight = _a[0], setLineHeight = _a[1];
     var ref = useRef(null);
     useEffect(function () {
@@ -12949,7 +13118,7 @@ var CheckBoxList = function (props) {
         !multiline && !line ? (React__default.createElement(Typography, { variant: "body2_loose", color: "black800" }, subtitle)) : null));
 };
 
-var useStyles$l = makeStyles$1(function (theme) { return ({
+var useStyles$p = makeStyles$1(function (theme) { return ({
     root: function (props) { return ({
         cursor: "pointer",
         color: props.color,
@@ -13082,7 +13251,7 @@ var Link = function (props) {
                                                                                                                                                                                                                                     ? theme.black.black1000
                                                                                                                                                                                                                                     : theme.black.black1000,
     };
-    var classes = useStyles$l(styleProps);
+    var classes = useStyles$p(styleProps);
     return (React__default.createElement(MaterialLink, __assign({ classes: {
             root: classes.root,
             focusVisible: classes.focusVisible,
@@ -13090,7 +13259,7 @@ var Link = function (props) {
         }, tabIndex: 0 }, other)));
 };
 
-var useStyles$m = makeStyles$1(function (theme) { return ({
+var useStyles$q = makeStyles$1(function (theme) { return ({
     root: function (props) { return ({
         boxShadow: theme.boxShadow.xl,
         borderRadius: 12,
@@ -13110,13 +13279,13 @@ var Paper = function (props) {
         matchSM: matchSM,
         matchXS: matchXS,
     };
-    var classes = useStyles$m(styleProps);
+    var classes = useStyles$q(styleProps);
     return (React__default.createElement(Paper$1$1, __assign({ variant: "outlined", classes: {
             root: classes.root,
         } }, other)));
 };
 
-var useStyles$n = makeStyles$1(function (theme) { return ({
+var useStyles$r = makeStyles$1(function (theme) { return ({
     root: {
         width: 40,
         height: 24,
@@ -13182,7 +13351,7 @@ var useStyles$n = makeStyles$1(function (theme) { return ({
 var Switch = function (props) {
     var disabled = props.disabled, other = __rest(props, ["disabled"]);
     var styleProps = { disabled: disabled };
-    var classes = useStyles$n(styleProps);
+    var classes = useStyles$r(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,
@@ -13691,7 +13860,7 @@ var BreadcrumbItem = function (props) {
         } })));
 };
 
-var useStyles$o = makeStyles$1(function (theme) { return ({
+var useStyles$s = makeStyles$1(function (theme) { return ({
     root: function (props) { return ({
         width: props.width ? props.width : 350,
         height: props.height ? props.height : "100%",
@@ -13716,7 +13885,7 @@ var useStyles$o = makeStyles$1(function (theme) { return ({
 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$o(useStylesProps);
+    var classes = useStyles$s(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%" } },