@yosgo/swap-ui 1.0.124 → 1.0.127

package/build/index.js

@@ -6667,6 +6667,58 @@ const host = createHost(primitives, {
 });
 const animated = host.animated;
 
+var useStyles$a = core.makeStyles(function (theme) { return ({
+    root: function (props) { return ({
+        margin: props.margin,
+        backgroundColor: props.backgroundColor,
+        color: props.color,
+        padding: props.padding,
+        boxShadow: theme.boxShadow.m,
+        border: props.border,
+        maxWidth: props.width,
+        fontSize: 12,
+        lineHeight: 1.4,
+        fontWeight: props.fontWeight,
+    }); },
+    arrow: function (props) { return ({
+        color: props.backgroundColor,
+    }); },
+}); });
+var Tooltip = function (props) {
+    var theme = core.useTheme();
+    var arrow = props.arrow, margin = props.margin, marginTop = props.marginTop, marginBottom = props.marginBottom, marginRight = props.marginRight, marginLeft = props.marginLeft, dark = props.dark, light = props.light, children = props.children, width = props.width, childrenStyle = props.childrenStyle, other = __rest(props, ["arrow", "margin", "marginTop", "marginBottom", "marginRight", "marginLeft", "dark", "light", "children", "width", "childrenStyle"]);
+    var styleProps = {
+        width: width ? width : 240,
+        padding: arrow ? "7.5px 12px" : 12,
+        margin: margin
+            ? margin
+            : marginTop
+                ? "0px 0px " + marginTop + "px 0px"
+                : marginBottom
+                    ? marginBottom + "px 0px 0px 0px"
+                    : marginRight
+                        ? "0px 0px 0px " + marginRight + "px"
+                        : marginLeft
+                            ? "0px " + marginLeft + "px 0px 0px"
+                            : "10px 0px",
+        backgroundColor: dark
+            ? theme.black.black900
+            : light
+                ? theme.black.white
+                : theme.black.black900,
+        color: dark
+            ? theme.black.white
+            : light
+                ? theme.black.black800
+                : theme.black.white,
+        border: light ? "1px solid #CCCCCC" : null,
+        fontWeight: arrow ? 700 : 400,
+    };
+    var classes = useStyles$a(styleProps);
+    return (React__default.createElement(MaterialTooltip, __assign({ classes: { tooltip: classes.root, arrow: classes.arrow } }, other, { arrow: arrow }),
+        React__default.createElement("div", { style: __assign({ width: "fit-content", height: "fit-content", display: "flex", alignItems: "center", justifyContent: "center" }, childrenStyle) }, children)));
+};
+
 var ModalTransitionEffect = React__default.forwardRef(function ModalTransitionEffect(props, ref) {
     var open = props.in, slide = props.slide, children = props.children, onEnter = props.onEnter, onExited = props.onExited, style = props.style, other = __rest(props, ["in", "slide", "children", "onEnter", "onExited", "style"]);
     var defaultStyle = useSpring({
@@ -7156,15 +7208,21 @@ var Modal = React__default.forwardRef(function (props, ref) {
                     secondaryButton || primaryButton ? (React__default.createElement(core.Box, { className: classes.footerButton },
                         React__default.createElement(core.Box, { width: mobile && !buttonFullWidth && !footerDisplayColumn
                                 ? null
-                                : "100%", marginRight: !footerDisplayColumn && secondaryButton ? 1 : 0 }, secondaryButton ? (React__default.createElement(Button, { fullWidth: buttonFullWidth || footerDisplayColumn, variant: secondaryButton.variant
+                                : "100%", marginRight: !footerDisplayColumn && secondaryButton ? 1 : 0 }, secondaryButton ? (secondaryButton.tooltip ? (React__default.createElement(Tooltip, __assign({}, secondaryButton.tooltip),
+                            React__default.createElement(Button, { fullWidth: buttonFullWidth || footerDisplayColumn, variant: secondaryButton.variant
+                                    ? secondaryButton.variant
+                                    : "secondary", size: "small", onClick: secondaryButton.onClick, disabled: secondaryButton.disabled, loading: secondaryButton.loading, style: secondaryButton.style }, secondaryButton.title))) : (React__default.createElement(Button, { fullWidth: buttonFullWidth || footerDisplayColumn, variant: secondaryButton.variant
                                 ? secondaryButton.variant
-                                : "secondary", size: "small", onClick: secondaryButton.onClick, disabled: secondaryButton.disabled, loading: secondaryButton.loading, style: secondaryButton.style }, secondaryButton.title)) : null),
-                        React__default.createElement(core.Box, { width: "100%", marginBottom: footerDisplayColumn ? 1 : 0 }, primaryButton ? (React__default.createElement(Button, { fullWidth: buttonFullWidth || footerDisplayColumn || mobile, variant: primaryButton.variant
+                                : "secondary", size: "small", onClick: secondaryButton.onClick, disabled: secondaryButton.disabled, loading: secondaryButton.loading, style: secondaryButton.style }, secondaryButton.title))) : null),
+                        React__default.createElement(core.Box, { width: "100%", marginBottom: footerDisplayColumn ? 1 : 0 }, primaryButton ? (primaryButton.tooltip ? (React__default.createElement(Tooltip, __assign({}, primaryButton.tooltip),
+                            React__default.createElement(Button, { fullWidth: buttonFullWidth || footerDisplayColumn || mobile, variant: primaryButton.variant
+                                    ? primaryButton.variant
+                                    : "primary", size: "small", onClick: primaryButton.onClick, disabled: primaryButton.disabled, loading: primaryButton.loading, style: primaryButton.style }, primaryButton.title))) : (React__default.createElement(Button, { fullWidth: buttonFullWidth || footerDisplayColumn || mobile, variant: primaryButton.variant
                                 ? primaryButton.variant
-                                : "primary", size: "small", onClick: primaryButton.onClick, disabled: primaryButton.disabled, loading: primaryButton.loading, style: primaryButton.style }, primaryButton.title)) : null))) : null)))))));
+                                : "primary", size: "small", onClick: primaryButton.onClick, disabled: primaryButton.disabled, loading: primaryButton.loading, style: primaryButton.style }, primaryButton.title))) : null))) : null)))))));
 });
 
-var useStyles$a = core.makeStyles(function () { return ({
+var useStyles$b = core.makeStyles(function () { return ({
     root: function (props) { return ({
         backgroundColor: props.backgroundColor,
         border: "1px solid " + props.borderColor,
@@ -7212,7 +7270,7 @@ var Banner = function (props) {
         height: height ? height : null,
         alignItems: mobile ? "flex-start" : alignStart ? "flex-start" : "center",
     };
-    var classes = useStyles$a(styleProps);
+    var classes = useStyles$b(styleProps);
     var ref = React.useRef(null);
     React.useEffect(function () {
         if (ref.current) {
@@ -7238,7 +7296,7 @@ var Banner = function (props) {
         React__default.createElement(Typography, { variant: "caption2" }, children)));
 };
 
-var useStyles$b = core.makeStyles(function () { return ({
+var useStyles$c = core.makeStyles(function () { return ({
     root: function (props) { return ({
         backgroundColor: props.backgroundColor,
         border: props.border,
@@ -7252,7 +7310,6 @@ var useStyles$b = core.makeStyles(function () { return ({
         fontSize: "0.75rem",
         lineHeight: "17px",
         fontWeight: 700,
-        marginRight: props.marginRight,
         color: props.color,
     }); },
 }); });
@@ -7294,11 +7351,10 @@ var Chip = function (props) {
                     : variant === "danger"
                         ? theme.danger.danger800
                         : theme.primary.primary800,
-        marginRight: variant === "success" ? 4 : 0,
     };
-    var classes = useStyles$b(styleProps);
+    var classes = useStyles$c(styleProps);
     return (React__default.createElement("div", __assign({ className: classes.root }, other),
-        label,
+        React__default.createElement("span", { style: { marginRight: variant === "success" ? 4 : 0 } }, label),
         variant === "success" && !icon ? icon_success : icon));
 };
 var icon_success = (React__default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
@@ -7327,58 +7383,6 @@ var CircularProgress = function (props) {
             } })));
 };
 
-var useStyles$c = core.makeStyles(function (theme) { return ({
-    root: function (props) { return ({
-        margin: props.margin,
-        backgroundColor: props.backgroundColor,
-        color: props.color,
-        padding: props.padding,
-        boxShadow: theme.boxShadow.m,
-        border: props.border,
-        maxWidth: props.width,
-        fontSize: 12,
-        lineHeight: 1.4,
-        fontWeight: props.fontWeight,
-    }); },
-    arrow: function (props) { return ({
-        color: props.backgroundColor,
-    }); },
-}); });
-var Tooltip = function (props) {
-    var theme = core.useTheme();
-    var arrow = props.arrow, margin = props.margin, marginTop = props.marginTop, marginBottom = props.marginBottom, marginRight = props.marginRight, marginLeft = props.marginLeft, dark = props.dark, light = props.light, children = props.children, width = props.width, childrenStyle = props.childrenStyle, other = __rest(props, ["arrow", "margin", "marginTop", "marginBottom", "marginRight", "marginLeft", "dark", "light", "children", "width", "childrenStyle"]);
-    var styleProps = {
-        width: width ? width : 240,
-        padding: arrow ? "7.5px 12px" : 12,
-        margin: margin
-            ? margin
-            : marginTop
-                ? "0px 0px " + marginTop + "px 0px"
-                : marginBottom
-                    ? marginBottom + "px 0px 0px 0px"
-                    : marginRight
-                        ? "0px 0px 0px " + marginRight + "px"
-                        : marginLeft
-                            ? "0px " + marginLeft + "px 0px 0px"
-                            : "10px 0px",
-        backgroundColor: dark
-            ? theme.black.black900
-            : light
-                ? theme.black.white
-                : theme.black.black900,
-        color: dark
-            ? theme.black.white
-            : light
-                ? theme.black.black800
-                : theme.black.white,
-        border: light ? "1px solid #CCCCCC" : null,
-        fontWeight: arrow ? 700 : 400,
-    };
-    var classes = useStyles$c(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)));
-};
-
 function _extends() {
   _extends = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -12747,10 +12751,15 @@ var DatePicker = function (props) {
     var open = props.open, onClose = props.onClose, format = props.format, mobile = props.mobile, min = props.min, max = props.max, ModalProps = props.ModalProps, defaultValue = props.defaultValue, getValue = props.getValue, value = props.value, other = __rest(props, ["open", "onClose", "format", "mobile", "min", "max", "ModalProps", "defaultValue", "getValue", "value"]);
     var _a = React.useState(Number(new Date().getFullYear())), year = _a[0], setYear = _a[1];
     var _b = React.useState(Number(new Date().getMonth() + 1)), month = _b[0], setMonth = _b[1];
-    var _c = React.useState(1), nextMonth = _c[0], setNextMonth = _c[1];
+    var _c = React.useState(Number(new Date().getMonth() + 2)), nextMonth = _c[0], setNextMonth = _c[1];
     var _d = React.useState(""), date = _d[0], setDate = _d[1];
     var _e = React.useState(false), isOpenMonthSelector = _e[0], setIsOpenMonthSelector = _e[1];
     var _f = React.useState(false), isClicked = _f[0], setIsClicked = _f[1];
+    React.useEffect(function () {
+        if (month === 12) {
+            setNextMonth(1);
+        }
+    }, []);
     React.useEffect(function () {
         if (format === "month") {
             if (month % 2 === 0) {