@yosgo/swap-ui 1.0.126 → 1.0.127
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/Modal/Modal.types.d.ts +5 -0
- package/build/index.esm.js +66 -60
- package/build/index.esm.js.map +1 -1
- package/build/index.js +66 -60
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.js
CHANGED
|
@@ -6667,6 +6667,58 @@ const host = createHost(primitives, {
|
|
|
6667
6667
|
});
|
|
6668
6668
|
const animated = host.animated;
|
|
6669
6669
|
|
|
6670
|
+
var useStyles$a = core.makeStyles(function (theme) { return ({
|
|
6671
|
+
root: function (props) { return ({
|
|
6672
|
+
margin: props.margin,
|
|
6673
|
+
backgroundColor: props.backgroundColor,
|
|
6674
|
+
color: props.color,
|
|
6675
|
+
padding: props.padding,
|
|
6676
|
+
boxShadow: theme.boxShadow.m,
|
|
6677
|
+
border: props.border,
|
|
6678
|
+
maxWidth: props.width,
|
|
6679
|
+
fontSize: 12,
|
|
6680
|
+
lineHeight: 1.4,
|
|
6681
|
+
fontWeight: props.fontWeight,
|
|
6682
|
+
}); },
|
|
6683
|
+
arrow: function (props) { return ({
|
|
6684
|
+
color: props.backgroundColor,
|
|
6685
|
+
}); },
|
|
6686
|
+
}); });
|
|
6687
|
+
var Tooltip = function (props) {
|
|
6688
|
+
var theme = core.useTheme();
|
|
6689
|
+
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"]);
|
|
6690
|
+
var styleProps = {
|
|
6691
|
+
width: width ? width : 240,
|
|
6692
|
+
padding: arrow ? "7.5px 12px" : 12,
|
|
6693
|
+
margin: margin
|
|
6694
|
+
? margin
|
|
6695
|
+
: marginTop
|
|
6696
|
+
? "0px 0px " + marginTop + "px 0px"
|
|
6697
|
+
: marginBottom
|
|
6698
|
+
? marginBottom + "px 0px 0px 0px"
|
|
6699
|
+
: marginRight
|
|
6700
|
+
? "0px 0px 0px " + marginRight + "px"
|
|
6701
|
+
: marginLeft
|
|
6702
|
+
? "0px " + marginLeft + "px 0px 0px"
|
|
6703
|
+
: "10px 0px",
|
|
6704
|
+
backgroundColor: dark
|
|
6705
|
+
? theme.black.black900
|
|
6706
|
+
: light
|
|
6707
|
+
? theme.black.white
|
|
6708
|
+
: theme.black.black900,
|
|
6709
|
+
color: dark
|
|
6710
|
+
? theme.black.white
|
|
6711
|
+
: light
|
|
6712
|
+
? theme.black.black800
|
|
6713
|
+
: theme.black.white,
|
|
6714
|
+
border: light ? "1px solid #CCCCCC" : null,
|
|
6715
|
+
fontWeight: arrow ? 700 : 400,
|
|
6716
|
+
};
|
|
6717
|
+
var classes = useStyles$a(styleProps);
|
|
6718
|
+
return (React__default.createElement(MaterialTooltip, __assign({ classes: { tooltip: classes.root, arrow: classes.arrow } }, other, { arrow: arrow }),
|
|
6719
|
+
React__default.createElement("div", { style: __assign({ width: "fit-content", height: "fit-content", display: "flex", alignItems: "center", justifyContent: "center" }, childrenStyle) }, children)));
|
|
6720
|
+
};
|
|
6721
|
+
|
|
6670
6722
|
var ModalTransitionEffect = React__default.forwardRef(function ModalTransitionEffect(props, ref) {
|
|
6671
6723
|
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"]);
|
|
6672
6724
|
var defaultStyle = useSpring({
|
|
@@ -7156,15 +7208,21 @@ var Modal = React__default.forwardRef(function (props, ref) {
|
|
|
7156
7208
|
secondaryButton || primaryButton ? (React__default.createElement(core.Box, { className: classes.footerButton },
|
|
7157
7209
|
React__default.createElement(core.Box, { width: mobile && !buttonFullWidth && !footerDisplayColumn
|
|
7158
7210
|
? null
|
|
7159
|
-
: "100%", marginRight: !footerDisplayColumn && secondaryButton ? 1 : 0 }, secondaryButton ? (React__default.createElement(
|
|
7211
|
+
: "100%", marginRight: !footerDisplayColumn && secondaryButton ? 1 : 0 }, secondaryButton ? (secondaryButton.tooltip ? (React__default.createElement(Tooltip, __assign({}, secondaryButton.tooltip),
|
|
7212
|
+
React__default.createElement(Button, { fullWidth: buttonFullWidth || footerDisplayColumn, variant: secondaryButton.variant
|
|
7213
|
+
? secondaryButton.variant
|
|
7214
|
+
: "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
|
|
7160
7215
|
? secondaryButton.variant
|
|
7161
|
-
: "secondary", size: "small", onClick: secondaryButton.onClick, disabled: secondaryButton.disabled, loading: secondaryButton.loading, style: secondaryButton.style }, secondaryButton.title)) : null),
|
|
7162
|
-
React__default.createElement(core.Box, { width: "100%", marginBottom: footerDisplayColumn ? 1 : 0 }, primaryButton ? (React__default.createElement(
|
|
7216
|
+
: "secondary", size: "small", onClick: secondaryButton.onClick, disabled: secondaryButton.disabled, loading: secondaryButton.loading, style: secondaryButton.style }, secondaryButton.title))) : null),
|
|
7217
|
+
React__default.createElement(core.Box, { width: "100%", marginBottom: footerDisplayColumn ? 1 : 0 }, primaryButton ? (primaryButton.tooltip ? (React__default.createElement(Tooltip, __assign({}, primaryButton.tooltip),
|
|
7218
|
+
React__default.createElement(Button, { fullWidth: buttonFullWidth || footerDisplayColumn || mobile, variant: primaryButton.variant
|
|
7219
|
+
? primaryButton.variant
|
|
7220
|
+
: "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
|
|
7163
7221
|
? primaryButton.variant
|
|
7164
|
-
: "primary", size: "small", onClick: primaryButton.onClick, disabled: primaryButton.disabled, loading: primaryButton.loading, style: primaryButton.style }, primaryButton.title)) : null))) : null)))))));
|
|
7222
|
+
: "primary", size: "small", onClick: primaryButton.onClick, disabled: primaryButton.disabled, loading: primaryButton.loading, style: primaryButton.style }, primaryButton.title))) : null))) : null)))))));
|
|
7165
7223
|
});
|
|
7166
7224
|
|
|
7167
|
-
var useStyles$
|
|
7225
|
+
var useStyles$b = core.makeStyles(function () { return ({
|
|
7168
7226
|
root: function (props) { return ({
|
|
7169
7227
|
backgroundColor: props.backgroundColor,
|
|
7170
7228
|
border: "1px solid " + props.borderColor,
|
|
@@ -7212,7 +7270,7 @@ var Banner = function (props) {
|
|
|
7212
7270
|
height: height ? height : null,
|
|
7213
7271
|
alignItems: mobile ? "flex-start" : alignStart ? "flex-start" : "center",
|
|
7214
7272
|
};
|
|
7215
|
-
var classes = useStyles$
|
|
7273
|
+
var classes = useStyles$b(styleProps);
|
|
7216
7274
|
var ref = React.useRef(null);
|
|
7217
7275
|
React.useEffect(function () {
|
|
7218
7276
|
if (ref.current) {
|
|
@@ -7238,7 +7296,7 @@ var Banner = function (props) {
|
|
|
7238
7296
|
React__default.createElement(Typography, { variant: "caption2" }, children)));
|
|
7239
7297
|
};
|
|
7240
7298
|
|
|
7241
|
-
var useStyles$
|
|
7299
|
+
var useStyles$c = core.makeStyles(function () { return ({
|
|
7242
7300
|
root: function (props) { return ({
|
|
7243
7301
|
backgroundColor: props.backgroundColor,
|
|
7244
7302
|
border: props.border,
|
|
@@ -7294,7 +7352,7 @@ var Chip = function (props) {
|
|
|
7294
7352
|
? theme.danger.danger800
|
|
7295
7353
|
: theme.primary.primary800,
|
|
7296
7354
|
};
|
|
7297
|
-
var classes = useStyles$
|
|
7355
|
+
var classes = useStyles$c(styleProps);
|
|
7298
7356
|
return (React__default.createElement("div", __assign({ className: classes.root }, other),
|
|
7299
7357
|
React__default.createElement("span", { style: { marginRight: variant === "success" ? 4 : 0 } }, label),
|
|
7300
7358
|
variant === "success" && !icon ? icon_success : icon));
|
|
@@ -7325,58 +7383,6 @@ var CircularProgress = function (props) {
|
|
|
7325
7383
|
} })));
|
|
7326
7384
|
};
|
|
7327
7385
|
|
|
7328
|
-
var useStyles$c = core.makeStyles(function (theme) { return ({
|
|
7329
|
-
root: function (props) { return ({
|
|
7330
|
-
margin: props.margin,
|
|
7331
|
-
backgroundColor: props.backgroundColor,
|
|
7332
|
-
color: props.color,
|
|
7333
|
-
padding: props.padding,
|
|
7334
|
-
boxShadow: theme.boxShadow.m,
|
|
7335
|
-
border: props.border,
|
|
7336
|
-
maxWidth: props.width,
|
|
7337
|
-
fontSize: 12,
|
|
7338
|
-
lineHeight: 1.4,
|
|
7339
|
-
fontWeight: props.fontWeight,
|
|
7340
|
-
}); },
|
|
7341
|
-
arrow: function (props) { return ({
|
|
7342
|
-
color: props.backgroundColor,
|
|
7343
|
-
}); },
|
|
7344
|
-
}); });
|
|
7345
|
-
var Tooltip = function (props) {
|
|
7346
|
-
var theme = core.useTheme();
|
|
7347
|
-
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"]);
|
|
7348
|
-
var styleProps = {
|
|
7349
|
-
width: width ? width : 240,
|
|
7350
|
-
padding: arrow ? "7.5px 12px" : 12,
|
|
7351
|
-
margin: margin
|
|
7352
|
-
? margin
|
|
7353
|
-
: marginTop
|
|
7354
|
-
? "0px 0px " + marginTop + "px 0px"
|
|
7355
|
-
: marginBottom
|
|
7356
|
-
? marginBottom + "px 0px 0px 0px"
|
|
7357
|
-
: marginRight
|
|
7358
|
-
? "0px 0px 0px " + marginRight + "px"
|
|
7359
|
-
: marginLeft
|
|
7360
|
-
? "0px " + marginLeft + "px 0px 0px"
|
|
7361
|
-
: "10px 0px",
|
|
7362
|
-
backgroundColor: dark
|
|
7363
|
-
? theme.black.black900
|
|
7364
|
-
: light
|
|
7365
|
-
? theme.black.white
|
|
7366
|
-
: theme.black.black900,
|
|
7367
|
-
color: dark
|
|
7368
|
-
? theme.black.white
|
|
7369
|
-
: light
|
|
7370
|
-
? theme.black.black800
|
|
7371
|
-
: theme.black.white,
|
|
7372
|
-
border: light ? "1px solid #CCCCCC" : null,
|
|
7373
|
-
fontWeight: arrow ? 700 : 400,
|
|
7374
|
-
};
|
|
7375
|
-
var classes = useStyles$c(styleProps);
|
|
7376
|
-
return (React__default.createElement(MaterialTooltip, __assign({ classes: { tooltip: classes.root, arrow: classes.arrow } }, other, { arrow: arrow }),
|
|
7377
|
-
React__default.createElement("div", { style: __assign({ width: "fit-content", height: "fit-content", display: "flex", alignItems: "center", justifyContent: "center" }, childrenStyle) }, children)));
|
|
7378
|
-
};
|
|
7379
|
-
|
|
7380
7386
|
function _extends() {
|
|
7381
7387
|
_extends = Object.assign || function (target) {
|
|
7382
7388
|
for (var i = 1; i < arguments.length; i++) {
|