@yosgo/swap-ui 1.0.137 → 1.0.138

package/build/index.js

@@ -2164,12 +2164,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 = core.useTheme();
-    var useStyles = core.makeStyles({
-        root: {
-            color: mode === "dark"
+var useStyles = core.makeStyles(function (theme) { return ({
+    root: {
+        color: function (_a) {
+            var mode = _a.mode, color = _a.color;
+            return mode === "dark"
                 ? color === "primary"
                     ? theme.black.white
                     : color === "secondary"
@@ -2403,8 +2402,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"
@@ -2448,8 +2450,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" ||
@@ -2483,8 +2488,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" ||
@@ -2519,11 +2527,14 @@ 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));
 });
 
@@ -2603,7 +2614,7 @@ function useBreakpoints(breakpoints) {
     return matches;
 }
 
-var useStyles = core.makeStyles(function (theme) { return ({
+var useStyles$1 = core.makeStyles(function (theme) { return ({
     root: function (props) { return ({
         width: 40,
         height: 40,
@@ -2672,12 +2683,12 @@ var CheckBox = function (props) {
     var styleProps = {
         disableHover: disableHover,
     };
-    var classes = useStyles(styleProps);
+    var classes = useStyles$1(styleProps);
     return (React__default.createElement(core.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 = core.makeStyles(function (theme) { return ({
+var useStyles$2 = core.makeStyles(function (theme) { return ({
     root: function (props) { return ({
         width: 40,
         height: 40,
@@ -2746,13 +2757,13 @@ var RadioButton = function (props) {
     var styleProps = {
         disableHover: disableHover,
     };
-    var classes = useStyles$1(styleProps);
+    var classes = useStyles$2(styleProps);
     return (React__default.createElement(core.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 = core.makeStyles(function (theme) { return ({
+var useStyles$3 = core.makeStyles(function (theme) { return ({
     root: {
         "& .MuiFormHelperText-contained": {
             marginLeft: 16,
@@ -2852,7 +2863,7 @@ var TextField = 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,
@@ -2920,7 +2931,7 @@ var Tab = function (props) {
             selected ? React__default.createElement("div", { className: classes.selected_indicator }) : null), disableRipple: true })));
 };
 
-var useStyles$3 = core.makeStyles({
+var useStyles$4 = core.makeStyles({
     root: {},
     indicatorRoot: {
         backgroundColor: "transparent",
@@ -2928,14 +2939,14 @@ var useStyles$3 = core.makeStyles({
 });
 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 = core.makeStyles(function (theme) { return ({
+var useStyles$5 = core.makeStyles(function (theme) { return ({
     root: function (props) { return ({
         //SWAPTheme調整
         textTransform: "unset",
@@ -2967,7 +2978,7 @@ var SegmentedTab = 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 })));
 };
 
@@ -3404,7 +3415,7 @@ var smoothscroll = createCommonjsModule(function (module, exports) {
 });
 var smoothscroll_1 = smoothscroll.polyfill;
 
-var useStyles$5 = core.makeStyles(function (theme) { return ({
+var useStyles$6 = core.makeStyles(function (theme) { return ({
     root: function (props) { return ({
         width: props.width,
         boxSizing: "border-box",
@@ -3439,7 +3450,7 @@ var SegmentedTabs = function (_a) {
         width: width,
         slide: slide,
     };
-    var classes = useStyles$5(styleProps);
+    var classes = useStyles$6(styleProps);
     var tabsRef = React.useRef(null);
     React.useEffect(function () {
         smoothscroll.polyfill();
@@ -3495,7 +3506,7 @@ var useOutlinedInputStyles = core.makeStyles(function (theme) { return ({
     },
     notchedOutline: {},
 }); });
-var useStyles$6 = core.makeStyles(function (theme) { return ({
+var useStyles$7 = core.makeStyles(function (theme) { return ({
     root: function (props) { return ({
         //SWAPTheme調整
         width: props.width ? props.width : "100%",
@@ -3558,7 +3569,7 @@ var Select = function (_a) {
         paddingLeft: paddingLeft,
         dropdown: dropdown,
     };
-    var classes = useStyles$6(styleProps);
+    var classes = useStyles$7(styleProps);
     return (React__default.createElement(core.FormControl, { variant: "outlined", style: style, classes: { root: classes.root } },
         React__default.createElement(core.InputLabel, { classes: {
                 root: classes.placeholder,
@@ -3582,7 +3593,7 @@ var Menu = function (props) {
     return (React__default.createElement(MaterialMenu, __assign({ open: open }, other), children));
 };
 
-var useStyles$7 = core.makeStyles(function (theme) { return ({
+var useStyles$8 = core.makeStyles(function (theme) { return ({
     root: function (props) { return ({
         fontSize: 14,
         fontWeight: 700,
@@ -3621,7 +3632,7 @@ var MenuItem = 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(core.ListItemIcon, { style: { justifyContent: "flex-end" } }, iconChildren)));
@@ -3838,7 +3849,7 @@ var Button = function (props) {
             } }))) : (React__default.createElement("div", { style: { whiteSpace: "nowrap" } }, children))));
 };
 
-var useStyles$8 = core.makeStyles(function () { return ({
+var useStyles$9 = core.makeStyles(function () { return ({
     root: function (props) { return ({
         width: props.width,
         height: props.height,
@@ -4086,7 +4097,7 @@ var IconButton = function (props) {
                                                                                                                                                                                                                                         : hoverIconColor
             : null,
     };
-    var classes = useStyles$8(styleProps);
+    var classes = useStyles$9(styleProps);
     return React__default.createElement(IconButton$1, __assign({ className: classes.root }, other));
 };
 
@@ -4105,7 +4116,7 @@ function TransitionDown(props) {
 function Transition(props) {
     return React__default.createElement(core.Fade, __assign({}, props));
 }
-var useStyles$9 = core.makeStyles(function (theme) { return ({
+var useStyles$a = core.makeStyles(function (theme) { return ({
     root: {
         "@media only screen and (min-width: 600px)": {
             width: "fit-content",
@@ -4170,7 +4181,7 @@ var Snackbar = function (props) {
         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,
@@ -7181,7 +7192,7 @@ const host = createHost(primitives, {
 });
 const animated = host.animated;
 
-var useStyles$a = core.makeStyles(function (theme) { return ({
+var useStyles$b = core.makeStyles(function (theme) { return ({
     root: function (props) { return ({
         margin: props.margin,
         backgroundColor: props.backgroundColor,
@@ -7228,7 +7239,7 @@ var Tooltip = 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)));
 };
@@ -7736,7 +7747,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$b = core.makeStyles(function () { return ({
+var useStyles$c = core.makeStyles(function () { return ({
     root: function (props) { return ({
         backgroundColor: props.backgroundColor,
         border: "1px solid " + props.borderColor,
@@ -7784,7 +7795,7 @@ var Banner = 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 = React.useRef(null);
     React.useEffect(function () {
         if (ref.current) {
@@ -7810,7 +7821,7 @@ var Banner = function (props) {
         React__default.createElement(Typography, { variant: "caption2" }, children)));
 };
 
-var useStyles$c = core.makeStyles(function () { return ({
+var useStyles$d = core.makeStyles(function () { return ({
     root: function (props) { return ({
         backgroundColor: props.backgroundColor,
         border: props.border,
@@ -7866,7 +7877,7 @@ var Chip = 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));
@@ -12007,7 +12018,7 @@ var MaterialSkeleton = styles$4.withStyles(styles$3, {
   name: 'MuiSkeleton'
 })(Skeleton);
 
-var useStyles$d = core.makeStyles(function (theme) { return ({
+var useStyles$e = core.makeStyles(function (theme) { return ({
     root: function () { return ({}); },
     ul: {
         "& li": {
@@ -12063,7 +12074,7 @@ 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,
@@ -12072,7 +12083,7 @@ var Pagination$1 = function (props) {
             } }))); } })));
 };
 
-var useStyles$e = core.makeStyles(function (theme) { return ({
+var useStyles$f = core.makeStyles(function (theme) { return ({
     root: function (props) { return ({
         width: props.width,
         display: "flex",
@@ -12099,7 +12110,7 @@ var Progress = 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: {
@@ -12149,7 +12160,7 @@ var Progress = function (props) {
     })));
 };
 
-var useStyles$f = core.makeStyles(function (theme) { return ({
+var useStyles$g = core.makeStyles(function (theme) { return ({
     popper: function (props) { return ({
         border: "1px solid #CCCCCC",
         boxShadow: " 0px 4px 12px rgba(0, 0, 0, 0.1)",
@@ -12292,7 +12303,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(core.Popper, { id: id, open: open, anchorEl: anchorEl, placement: "bottom-start", className: classes.popper },
@@ -12667,7 +12678,7 @@ var SWAPTaxDescription$1 = function (incomeCode, expenseCode) {
  * 3. 所得類別為50薪資時不會有費用類別
  */
 
-var useStyles$g = core.makeStyles(function (theme) { return ({
+var useStyles$h = core.makeStyles(function (theme) { return ({
     root: function (props) { return ({
         backgroundColor: theme.black.black400,
         transform: "unset",
@@ -12676,7 +12687,7 @@ var useStyles$g = core.makeStyles(function (theme) { return ({
 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));
 };
 
@@ -12703,7 +12714,7 @@ var useOutlinedInputStyles$1 = core.makeStyles(function (theme) { return ({
     },
     notchedOutline: {},
 }); });
-var useStyles$h = core.makeStyles(function (theme) { return ({
+var useStyles$i = core.makeStyles(function (theme) { return ({
     root: function (props) { return ({
         //SWAPTheme調整
         width: props.width ? props.width : "100%",
@@ -12748,7 +12759,7 @@ var Dropdown = function (props) {
         width: width,
         height: height,
     };
-    var classes = useStyles$h(styleProps);
+    var classes = useStyles$i(styleProps);
     var outlinedInputClasses = useOutlinedInputStyles$1();
     return (React__default.createElement(core.FormControl, { variant: "outlined", style: formControlStyle, classes: { root: classes.root } },
         React__default.createElement(MaterialSelect, __assign({}, other, { classes: {
@@ -12757,7 +12768,7 @@ var Dropdown = function (props) {
         React__default.createElement(core.FormHelperText, { style: helperTextStyle }, helperText)));
 };
 
-var useStyles$i = core.makeStyles(function (theme) { return ({
+var useStyles$j = core.makeStyles(function (theme) { return ({
     root: function (props) { return ({
         width: props.width
             ? props.width
@@ -12804,7 +12815,7 @@ var RadioList = function (props) {
         height: height,
         line: line,
     };
-    var classes = useStyles$i(styleProps);
+    var classes = useStyles$j(styleProps);
     var _a = React.useState(0), lineHeight = _a[0], setLineHeight = _a[1];
     var ref = React.useRef(null);
     React.useEffect(function () {
@@ -12850,7 +12861,7 @@ var RadioList = function (props) {
         !multiline && !line ? (React__default.createElement(Typography, { variant: "body2_loose", color: "black800" }, subtitle)) : null));
 };
 
-var useStyles$j = core.makeStyles(function (theme) { return ({
+var useStyles$k = core.makeStyles(function (theme) { return ({
     root: function (props) { return ({
         width: props.width
             ? props.width
@@ -12897,7 +12908,7 @@ var CheckBoxList = function (props) {
         height: height,
         line: line,
     };
-    var classes = useStyles$j(styleProps);
+    var classes = useStyles$k(styleProps);
     var _a = React.useState(0), lineHeight = _a[0], setLineHeight = _a[1];
     var ref = React.useRef(null);
     React.useEffect(function () {
@@ -12943,7 +12954,7 @@ var CheckBoxList = function (props) {
         !multiline && !line ? (React__default.createElement(Typography, { variant: "body2_loose", color: "black800" }, subtitle)) : null));
 };
 
-var useStyles$k = core.makeStyles(function (theme) { return ({
+var useStyles$l = core.makeStyles(function (theme) { return ({
     root: function (props) { return ({
         cursor: "pointer",
         color: props.color,
@@ -13076,7 +13087,7 @@ var Link = 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,
@@ -13084,7 +13095,7 @@ var Link = function (props) {
         }, tabIndex: 0 }, other)));
 };
 
-var useStyles$l = core.makeStyles(function (theme) { return ({
+var useStyles$m = core.makeStyles(function (theme) { return ({
     root: function (props) { return ({
         boxShadow: theme.boxShadow.xl,
         borderRadius: 12,
@@ -13104,13 +13115,13 @@ var Paper = function (props) {
         matchSM: matchSM,
         matchXS: matchXS,
     };
-    var classes = useStyles$l(styleProps);
+    var classes = useStyles$m(styleProps);
     return (React__default.createElement(Paper$1, __assign({ variant: "outlined", classes: {
             root: classes.root,
         } }, other)));
 };
 
-var useStyles$m = core.makeStyles(function (theme) { return ({
+var useStyles$n = core.makeStyles(function (theme) { return ({
     root: {
         width: 40,
         height: 24,
@@ -13176,7 +13187,7 @@ var useStyles$m = core.makeStyles(function (theme) { return ({
 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,
@@ -13685,7 +13696,7 @@ var BreadcrumbItem = function (props) {
         } })));
 };
 
-var useStyles$n = core.makeStyles(function (theme) { return ({
+var useStyles$o = core.makeStyles(function (theme) { return ({
     root: function (props) { return ({
         width: props.width ? props.width : 350,
         height: props.height ? props.height : "100%",
@@ -13710,7 +13721,7 @@ var useStyles$n = core.makeStyles(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$n(useStylesProps);
+    var classes = useStyles$o(useStylesProps);
     var theme = core.useTheme();
     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%" } },