@yosgo/swap-ui 1.0.137 → 1.0.138

package/build/index.esm.js

@@ -1,4 +1,4 @@
-import { AppBar, Toolbar, Container as Container$1, Grid, Button as Button$1, Typography as Typography$1, IconButton as IconButton$1, Menu as Menu$1, MenuItem as MenuItem$1, Divider, Fade, Paper as Paper$1, TextField as TextField$1, Dialog, Modal as Modal$1, Breadcrumbs, Slide, FormControl, InputLabel, Select as Select$1, CssBaseline, Box, useTheme as useTheme$1, makeStyles as makeStyles$1, useMediaQuery, FormControlLabel, OutlinedInput, FormHelperText, ListItemIcon, Backdrop, fade as fade$1, Popper as Popper$1, InputBase, Grow } from '@material-ui/core';
+import { AppBar, Toolbar, Container as Container$1, Grid, Button as Button$1, Typography as Typography$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, { 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';
@@ -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,11 +2522,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));
 });
 
@@ -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,
@@ -2667,12 +2678,12 @@ var CheckBox = function (props) {
     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,
@@ -2741,13 +2752,13 @@ var RadioButton = 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(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,
@@ -2847,7 +2858,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,
@@ -2915,7 +2926,7 @@ var Tab = function (props) {
             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",
@@ -2923,14 +2934,14 @@ var useStyles$3 = makeStyles$1({
 });
 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",
@@ -2962,7 +2973,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 })));
 };
 
@@ -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",
@@ -3434,7 +3445,7 @@ var SegmentedTabs = function (_a) {
         width: width,
         slide: slide,
     };
-    var classes = useStyles$5(styleProps);
+    var classes = useStyles$6(styleProps);
     var tabsRef = useRef(null);
     useEffect(function () {
         smoothscroll.polyfill();
@@ -3490,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%",
@@ -3553,7 +3564,7 @@ var Select = 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,
@@ -3577,7 +3588,7 @@ var Menu = function (props) {
     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,
@@ -3616,7 +3627,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(ListItemIcon, { style: { justifyContent: "flex-end" } }, iconChildren)));
@@ -3833,7 +3844,7 @@ var Button = function (props) {
             } }))) : (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,
@@ -4081,7 +4092,7 @@ var IconButton = 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));
 };
 
@@ -4100,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",
@@ -4165,7 +4176,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,
@@ -7176,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,
@@ -7223,7 +7234,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)));
 };
@@ -7731,7 +7742,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 = makeStyles$1(function () { return ({
+var useStyles$c = makeStyles$1(function () { return ({
     root: function (props) { return ({
         backgroundColor: props.backgroundColor,
         border: "1px solid " + props.borderColor,
@@ -7779,7 +7790,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 = useRef(null);
     useEffect(function () {
         if (ref.current) {
@@ -7805,7 +7816,7 @@ var Banner = function (props) {
         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,
@@ -7861,7 +7872,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));
@@ -12002,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": {
@@ -12058,7 +12069,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,
@@ -12067,7 +12078,7 @@ var Pagination$1 = function (props) {
             } }))); } })));
 };
 
-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",
@@ -12094,7 +12105,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: {
@@ -12144,7 +12155,7 @@ var Progress = function (props) {
     })));
 };
 
-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)",
@@ -12287,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 },
@@ -12662,7 +12673,7 @@ 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",
@@ -12671,7 +12682,7 @@ var useStyles$g = makeStyles$1(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));
 };
 
@@ -12698,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%",
@@ -12743,7 +12754,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(FormControl, { variant: "outlined", style: formControlStyle, classes: { root: classes.root } },
         React__default.createElement(MaterialSelect, __assign({}, other, { classes: {
@@ -12752,7 +12763,7 @@ var Dropdown = function (props) {
         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
@@ -12799,7 +12810,7 @@ var RadioList = 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 () {
@@ -12845,7 +12856,7 @@ var RadioList = function (props) {
         !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
@@ -12892,7 +12903,7 @@ var CheckBoxList = 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 () {
@@ -12938,7 +12949,7 @@ var CheckBoxList = 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$l = makeStyles$1(function (theme) { return ({
     root: function (props) { return ({
         cursor: "pointer",
         color: props.color,
@@ -13071,7 +13082,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,
@@ -13079,7 +13090,7 @@ var Link = function (props) {
         }, 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,
@@ -13099,13 +13110,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$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,
@@ -13171,7 +13182,7 @@ var useStyles$m = makeStyles$1(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,
@@ -13680,7 +13691,7 @@ var BreadcrumbItem = function (props) {
         } })));
 };
 
-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%",
@@ -13705,7 +13716,7 @@ var useStyles$n = 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$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%" } },