@veniceswap/uikit 0.61.0 → 0.64.0
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/dist/components/Spinner/Animate.d.ts +3 -0
- package/dist/index.cjs.js +154 -134
- package/dist/index.esm.js +154 -134
- package/dist/theme/base.d.ts +10 -0
- package/dist/theme/index.d.ts +2 -1
- package/dist/theme/types.d.ts +5 -0
- package/package.json +2 -2
package/dist/index.esm.js
CHANGED
|
@@ -67,7 +67,7 @@ var getThemeValue = function (path, fallback) {
|
|
|
67
67
|
};
|
|
68
68
|
};
|
|
69
69
|
|
|
70
|
-
var rotate$1 = keyframes(templateObject_1$
|
|
70
|
+
var rotate$1 = keyframes(templateObject_1$1b || (templateObject_1$1b = __makeTemplateObject(["\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n"], ["\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n"])));
|
|
71
71
|
var spinStyle = css(templateObject_2$z || (templateObject_2$z = __makeTemplateObject(["\n animation: ", " 2s linear infinite;\n"], ["\n animation: ", " 2s linear infinite;\n"])), rotate$1);
|
|
72
72
|
var Svg = styled.svg(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n align-self: center; // Safari fix\n fill: ", ";\n flex-shrink: 0;\n ", "\n ", "\n"], ["\n align-self: center; // Safari fix\n fill: ", ";\n flex-shrink: 0;\n ", "\n ", "\n"])), function (_a) {
|
|
73
73
|
var theme = _a.theme, color = _a.color;
|
|
@@ -82,7 +82,7 @@ Svg.defaultProps = {
|
|
|
82
82
|
xmlns: "http://www.w3.org/2000/svg",
|
|
83
83
|
spin: false,
|
|
84
84
|
};
|
|
85
|
-
var templateObject_1$
|
|
85
|
+
var templateObject_1$1b, templateObject_2$z, templateObject_3$f;
|
|
86
86
|
|
|
87
87
|
var Icon$2g = function (props) {
|
|
88
88
|
return (React__default.createElement(Svg, __assign({ viewBox: "0 0 24 24" }, props),
|
|
@@ -112,7 +112,7 @@ var getFontSize = function (_a) {
|
|
|
112
112
|
var fontSize = _a.fontSize, small = _a.small;
|
|
113
113
|
return small ? "14px" : fontSize || "16px";
|
|
114
114
|
};
|
|
115
|
-
var Text = styled.div(templateObject_1$
|
|
115
|
+
var Text = styled.div(templateObject_1$1a || (templateObject_1$1a = __makeTemplateObject(["\n color: ", ";\n font-size: ", ";\n font-weight: ", ";\n line-height: 1.5;\n ", "\n ", "\n\n ", "\n ", "\n ", "\n"], ["\n color: ", ";\n font-size: ", ";\n font-weight: ", ";\n line-height: 1.5;\n ", "\n ",
|
|
116
116
|
"\n\n ", "\n ", "\n ", "\n"])), getColor, getFontSize, function (_a) {
|
|
117
117
|
var bold = _a.bold;
|
|
118
118
|
return (bold ? 600 : 400);
|
|
@@ -129,13 +129,13 @@ Text.defaultProps = {
|
|
|
129
129
|
small: false,
|
|
130
130
|
ellipsis: false,
|
|
131
131
|
};
|
|
132
|
-
var templateObject_1$
|
|
132
|
+
var templateObject_1$1a;
|
|
133
133
|
|
|
134
|
-
var TooltipText = styled(Text)(templateObject_1$
|
|
134
|
+
var TooltipText = styled(Text)(templateObject_1$19 || (templateObject_1$19 = __makeTemplateObject(["\n text-decoration: ", ";\n text-underline-offset: 0.1em;\n"], ["\n text-decoration: ", ";\n text-underline-offset: 0.1em;\n"])), function (_a) {
|
|
135
135
|
var theme = _a.theme;
|
|
136
136
|
return "underline dotted " + theme.colors.textSubtle;
|
|
137
137
|
});
|
|
138
|
-
var templateObject_1$
|
|
138
|
+
var templateObject_1$19;
|
|
139
139
|
|
|
140
140
|
var getExternalLinkProps = function () { return ({
|
|
141
141
|
target: "_blank",
|
|
@@ -234,7 +234,7 @@ var getOpacity = function (_a) {
|
|
|
234
234
|
var _b = _a.$isLoading, $isLoading = _b === void 0 ? false : _b;
|
|
235
235
|
return $isLoading ? ".5" : "1";
|
|
236
236
|
};
|
|
237
|
-
var StyledButton = styled.button(templateObject_1$
|
|
237
|
+
var StyledButton = styled.button(templateObject_1$18 || (templateObject_1$18 = __makeTemplateObject(["\n align-items: center;\n border: 0;\n border-radius: 16px;\n box-shadow: 0px -1px 0px 0px rgba(14, 14, 44, 0.4) inset;\n cursor: pointer;\n display: inline-flex;\n font-family: inherit;\n font-size: 16px;\n font-weight: 600;\n justify-content: center;\n letter-spacing: 0.03em;\n line-height: 1;\n opacity: ", ";\n outline: 0;\n transition: background-color 0.2s, opacity 0.2s;\n\n &:hover:not(:disabled):not(.pancake-button--disabled):not(.pancake-button--disabled):not(:active) {\n opacity: 0.65;\n }\n\n &:active:not(:disabled):not(.pancake-button--disabled):not(.pancake-button--disabled) {\n opacity: 0.85;\n transform: translateY(1px);\n box-shadow: none;\n }\n\n ", "\n ", "\n ", "\n ", "\n ", "\n"], ["\n align-items: center;\n border: 0;\n border-radius: 16px;\n box-shadow: 0px -1px 0px 0px rgba(14, 14, 44, 0.4) inset;\n cursor: pointer;\n display: inline-flex;\n font-family: inherit;\n font-size: 16px;\n font-weight: 600;\n justify-content: center;\n letter-spacing: 0.03em;\n line-height: 1;\n opacity: ", ";\n outline: 0;\n transition: background-color 0.2s, opacity 0.2s;\n\n &:hover:not(:disabled):not(.pancake-button--disabled):not(.pancake-button--disabled):not(:active) {\n opacity: 0.65;\n }\n\n &:active:not(:disabled):not(.pancake-button--disabled):not(.pancake-button--disabled) {\n opacity: 0.85;\n transform: translateY(1px);\n box-shadow: none;\n }\n\n ", "\n ",
|
|
238
238
|
"\n ",
|
|
239
239
|
"\n ", "\n ", "\n"])), getOpacity, getDisabledStyles, variant$1({
|
|
240
240
|
prop: "scale",
|
|
@@ -242,7 +242,7 @@ var StyledButton = styled.button(templateObject_1$17 || (templateObject_1$17 = _
|
|
|
242
242
|
}), variant$1({
|
|
243
243
|
variants: styleVariants$2,
|
|
244
244
|
}), layout, space);
|
|
245
|
-
var templateObject_1$
|
|
245
|
+
var templateObject_1$18;
|
|
246
246
|
|
|
247
247
|
var Button = function (props) {
|
|
248
248
|
var startIcon = props.startIcon, endIcon = props.endIcon, external = props.external, className = props.className, isLoading = props.isLoading, disabled = props.disabled, children = props.children, rest = __rest(props, ["startIcon", "endIcon", "external", "className", "isLoading", "disabled", "children"]);
|
|
@@ -275,11 +275,11 @@ Button.defaultProps = {
|
|
|
275
275
|
disabled: false,
|
|
276
276
|
};
|
|
277
277
|
|
|
278
|
-
var IconButton = styled(Button)(templateObject_1$
|
|
278
|
+
var IconButton = styled(Button)(templateObject_1$17 || (templateObject_1$17 = __makeTemplateObject(["\n padding: 0;\n width: ", ";\n"], ["\n padding: 0;\n width: ", ";\n"])), function (_a) {
|
|
279
279
|
var scale = _a.scale;
|
|
280
280
|
return (scale === "sm" ? "32px" : "48px");
|
|
281
281
|
});
|
|
282
|
-
var templateObject_1$
|
|
282
|
+
var templateObject_1$17;
|
|
283
283
|
|
|
284
284
|
var Icon$2c = function (props) { return (React__default.createElement(Svg, __assign({ viewBox: "0 0 24 24" }, props),
|
|
285
285
|
React__default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M12 14.2619C9.69993 14.2619 7.57238 14.6197 5.98327 15.2327C5.19201 15.5379 4.48317 15.9258 3.95486 16.4076C3.42611 16.8898 3 17.544 3 18.3476C3 20.0992 4.33478 21.5622 6.07901 21.7223L6.21662 21.735C10.0641 22.0883 13.9359 22.0883 17.7834 21.735L17.921 21.7223C19.6652 21.5622 21 20.0992 21 18.3476C21 17.544 20.5739 16.8898 20.0451 16.4076C19.5168 15.9258 18.808 15.5379 18.0167 15.2327C16.4276 14.6197 14.3001 14.2619 12 14.2619ZM5 18.3476C5 18.2991 5.0216 18.1416 5.3025 17.8854C5.58383 17.6289 6.04656 17.3519 6.70302 17.0987C8.00934 16.5948 9.88179 16.2619 12 16.2619C14.1182 16.2619 15.9907 16.5948 17.297 17.0987C17.9534 17.3519 18.4162 17.6289 18.6975 17.8854C18.9784 18.1416 19 18.2991 19 18.3476C19 19.0655 18.453 19.6651 17.7381 19.7307L17.6005 19.7434C13.8747 20.0855 10.1253 20.0855 6.39952 19.7434L6.26191 19.7307C5.54705 19.6651 5 19.0655 5 18.3476Z" }),
|
|
@@ -1593,11 +1593,11 @@ ExpandableLabel.defaultProps = {
|
|
|
1593
1593
|
expanded: false,
|
|
1594
1594
|
};
|
|
1595
1595
|
|
|
1596
|
-
var Box = styled.div(templateObject_1$
|
|
1597
|
-
var templateObject_1$
|
|
1596
|
+
var Box = styled.div(templateObject_1$16 || (templateObject_1$16 = __makeTemplateObject(["\n ", "\n ", "\n ", "\n ", "\n ", "\n"], ["\n ", "\n ", "\n ", "\n ", "\n ", "\n"])), background, border, layout, position, space);
|
|
1597
|
+
var templateObject_1$16;
|
|
1598
1598
|
|
|
1599
|
-
var Flex = styled(Box)(templateObject_1$
|
|
1600
|
-
var templateObject_1$
|
|
1599
|
+
var Flex = styled(Box)(templateObject_1$15 || (templateObject_1$15 = __makeTemplateObject(["\n display: flex;\n ", "\n"], ["\n display: flex;\n ", "\n"])), flexbox);
|
|
1600
|
+
var templateObject_1$15;
|
|
1601
1601
|
|
|
1602
1602
|
var variants$5 = {
|
|
1603
1603
|
INFO: "info",
|
|
@@ -1634,7 +1634,7 @@ var getIcon = function (variant) {
|
|
|
1634
1634
|
return Icon$2d;
|
|
1635
1635
|
}
|
|
1636
1636
|
};
|
|
1637
|
-
var IconLabel = styled.div(templateObject_1$
|
|
1637
|
+
var IconLabel = styled.div(templateObject_1$14 || (templateObject_1$14 = __makeTemplateObject(["\n background-color: ", ";\n border-radius: 16px 0 0 16px;\n color: ", ";\n padding: 12px;\n"], ["\n background-color: ", ";\n border-radius: 16px 0 0 16px;\n color: ", ";\n padding: 12px;\n"])), getThemeColor, function (_a) {
|
|
1638
1638
|
var theme = _a.theme;
|
|
1639
1639
|
return theme.alert.background;
|
|
1640
1640
|
});
|
|
@@ -1661,10 +1661,10 @@ var Alert = function (_a) {
|
|
|
1661
1661
|
React__default.createElement(IconButton, { scale: "sm", variant: "text", onClick: onClick },
|
|
1662
1662
|
React__default.createElement(Icon$1K, { width: "24px", color: "currentColor" }))))));
|
|
1663
1663
|
};
|
|
1664
|
-
var templateObject_1$
|
|
1664
|
+
var templateObject_1$14, templateObject_2$y, templateObject_3$e, templateObject_4$b;
|
|
1665
1665
|
|
|
1666
|
-
var Grid = styled(Box)(templateObject_1$
|
|
1667
|
-
var templateObject_1$
|
|
1666
|
+
var Grid = styled(Box)(templateObject_1$13 || (templateObject_1$13 = __makeTemplateObject(["\n display: grid;\n ", "\n ", "\n"], ["\n display: grid;\n ", "\n ", "\n"])), flexbox, grid);
|
|
1667
|
+
var templateObject_1$13;
|
|
1668
1668
|
|
|
1669
1669
|
var scales$7 = {
|
|
1670
1670
|
SM: "sm",
|
|
@@ -1697,7 +1697,7 @@ var getHeight = function (_a) {
|
|
|
1697
1697
|
return "40px";
|
|
1698
1698
|
}
|
|
1699
1699
|
};
|
|
1700
|
-
var Input$1 = styled.input(templateObject_1$
|
|
1700
|
+
var Input$1 = styled.input(templateObject_1$12 || (templateObject_1$12 = __makeTemplateObject(["\n background-color: ", ";\n border: 0;\n border-radius: 16px;\n box-shadow: ", ";\n color: ", ";\n display: block;\n font-size: 16px;\n height: ", ";\n outline: 0;\n padding: 0 16px;\n width: 100%;\n border: 1px solid ", ";\n\n &::placeholder {\n color: ", ";\n }\n\n &:disabled {\n background-color: ", ";\n box-shadow: none;\n color: ", ";\n cursor: not-allowed;\n }\n\n &:focus:not(:disabled) {\n box-shadow: ", ";\n }\n"], ["\n background-color: ", ";\n border: 0;\n border-radius: 16px;\n box-shadow: ", ";\n color: ", ";\n display: block;\n font-size: 16px;\n height: ", ";\n outline: 0;\n padding: 0 16px;\n width: 100%;\n border: 1px solid ", ";\n\n &::placeholder {\n color: ", ";\n }\n\n &:disabled {\n background-color: ", ";\n box-shadow: none;\n color: ", ";\n cursor: not-allowed;\n }\n\n &:focus:not(:disabled) {\n box-shadow: ", ";\n }\n"])), function (_a) {
|
|
1701
1701
|
var theme = _a.theme;
|
|
1702
1702
|
return theme.colors.input;
|
|
1703
1703
|
}, getBoxShadow, function (_a) {
|
|
@@ -1724,9 +1724,9 @@ Input$1.defaultProps = {
|
|
|
1724
1724
|
isSuccess: false,
|
|
1725
1725
|
isWarning: false,
|
|
1726
1726
|
};
|
|
1727
|
-
var templateObject_1$
|
|
1727
|
+
var templateObject_1$12;
|
|
1728
1728
|
|
|
1729
|
-
var SwitchUnitsButton = styled(IconButton)(templateObject_1$
|
|
1729
|
+
var SwitchUnitsButton = styled(IconButton)(templateObject_1$11 || (templateObject_1$11 = __makeTemplateObject(["\n width: 16px;\n"], ["\n width: 16px;\n"])));
|
|
1730
1730
|
var UnitContainer = styled(Text)(templateObject_2$x || (templateObject_2$x = __makeTemplateObject(["\n margin-left: 4px;\n text-align: right;\n color: ", ";\n white-space: nowrap;\n"], ["\n margin-left: 4px;\n text-align: right;\n color: ", ";\n white-space: nowrap;\n"])), function (_a) {
|
|
1731
1731
|
var theme = _a.theme;
|
|
1732
1732
|
return theme.colors.textSubtle;
|
|
@@ -1748,7 +1748,7 @@ var StyledInput$1 = styled(Input$1)(templateObject_4$a || (templateObject_4$a =
|
|
|
1748
1748
|
var theme = _a.theme;
|
|
1749
1749
|
return theme.colors.textSubtle;
|
|
1750
1750
|
});
|
|
1751
|
-
var templateObject_1$
|
|
1751
|
+
var templateObject_1$11, templateObject_2$x, templateObject_3$d, templateObject_4$a;
|
|
1752
1752
|
|
|
1753
1753
|
var BalanceInput = function (_a) {
|
|
1754
1754
|
var value = _a.value, _b = _a.placeholder, placeholder = _b === void 0 ? "0.0" : _b, onUserInput = _a.onUserInput, currencyValue = _a.currencyValue, inputProps = _a.inputProps, innerRef = _a.innerRef, _c = _a.isWarning, isWarning = _c === void 0 ? false : _c, _d = _a.decimals, decimals = _d === void 0 ? 18 : _d, unit = _a.unit, switchEditingUnits = _a.switchEditingUnits, props = __rest(_a, ["value", "placeholder", "onUserInput", "currencyValue", "inputProps", "innerRef", "isWarning", "decimals", "unit", "switchEditingUnits"]);
|
|
@@ -1779,7 +1779,7 @@ var Textfield = function (_a) {
|
|
|
1779
1779
|
React__default.createElement(StyledInput$1, __assign({ value: value, onChange: handleOnChange, placeholder: placeholder, textAlign: "left" }, inputProps))));
|
|
1780
1780
|
};
|
|
1781
1781
|
|
|
1782
|
-
var Separator = styled.div(templateObject_1
|
|
1782
|
+
var Separator = styled.div(templateObject_1$10 || (templateObject_1$10 = __makeTemplateObject(["\n align-items: center;\n color: ", ";\n display: flex;\n justify-content: center;\n padding-left: 4px;\n padding-right: 4px;\n\n ", " {\n padding-left: 8px;\n padding-right: 8px;\n }\n\n ", " {\n padding-left: 16px;\n padding-right: 16px;\n }\n"], ["\n align-items: center;\n color: ", ";\n display: flex;\n justify-content: center;\n padding-left: 4px;\n padding-right: 4px;\n\n ", " {\n padding-left: 8px;\n padding-right: 8px;\n }\n\n ", " {\n padding-left: 16px;\n padding-right: 16px;\n }\n"])), function (_a) {
|
|
1783
1783
|
var theme = _a.theme;
|
|
1784
1784
|
return theme.colors.textDisabled;
|
|
1785
1785
|
}, function (_a) {
|
|
@@ -1814,7 +1814,7 @@ var Breadcrumbs = function (_a) {
|
|
|
1814
1814
|
var items = insertSeparators(validItems, separator);
|
|
1815
1815
|
return (React__default.createElement(StyledBreadcrumbs, null, items.map(function (item, index) { return (React__default.createElement("li", { key: "child-" + index }, item)); })));
|
|
1816
1816
|
};
|
|
1817
|
-
var templateObject_1
|
|
1817
|
+
var templateObject_1$10, templateObject_2$w;
|
|
1818
1818
|
|
|
1819
1819
|
var getBackgroundColor = function (_a) {
|
|
1820
1820
|
var theme = _a.theme, variant = _a.variant;
|
|
@@ -1824,7 +1824,7 @@ var getBorderColor$1 = function (_a) {
|
|
|
1824
1824
|
var theme = _a.theme, variant = _a.variant;
|
|
1825
1825
|
return theme.colors[variant === variants$6.SUBTLE ? "inputSecondary" : "disabled"];
|
|
1826
1826
|
};
|
|
1827
|
-
var StyledButtonMenu = styled.div(templateObject_1
|
|
1827
|
+
var StyledButtonMenu = styled.div(templateObject_1$$ || (templateObject_1$$ = __makeTemplateObject(["\n background-color: ", ";\n border-radius: 16px;\n display: ", ";\n border: 1px solid ", ";\n width: ", ";\n\n & > button,\n & > a {\n flex: ", ";\n }\n\n & > button + button,\n & > a + a {\n margin-left: 2px; // To avoid focus shadow overlap\n }\n\n & > button,\n & a {\n box-shadow: none;\n }\n\n ", "\n ", "\n"], ["\n background-color: ", ";\n border-radius: 16px;\n display: ", ";\n border: 1px solid ", ";\n width: ", ";\n\n & > button,\n & > a {\n flex: ", ";\n }\n\n & > button + button,\n & > a + a {\n margin-left: 2px; // To avoid focus shadow overlap\n }\n\n & > button,\n & a {\n box-shadow: none;\n }\n\n ",
|
|
1828
1828
|
"\n ", "\n"])), getBackgroundColor, function (_a) {
|
|
1829
1829
|
var fullWidth = _a.fullWidth;
|
|
1830
1830
|
return (fullWidth ? "flex" : "inline-flex");
|
|
@@ -1853,9 +1853,9 @@ var ButtonMenu$1 = function (_a) {
|
|
|
1853
1853
|
});
|
|
1854
1854
|
})));
|
|
1855
1855
|
};
|
|
1856
|
-
var templateObject_1
|
|
1856
|
+
var templateObject_1$$;
|
|
1857
1857
|
|
|
1858
|
-
var InactiveButton = styled(Button)(templateObject_1$
|
|
1858
|
+
var InactiveButton = styled(Button)(templateObject_1$_ || (templateObject_1$_ = __makeTemplateObject(["\n background-color: transparent;\n color: ", ";\n &:hover:not(:disabled):not(:active) {\n background-color: transparent;\n }\n"], ["\n background-color: transparent;\n color: ", ";\n &:hover:not(:disabled):not(:active) {\n background-color: transparent;\n }\n"])), function (_a) {
|
|
1859
1859
|
var theme = _a.theme, variant = _a.variant;
|
|
1860
1860
|
return (variant === variants$6.PRIMARY ? theme.colors.primary : theme.colors.textSubtle);
|
|
1861
1861
|
});
|
|
@@ -1866,9 +1866,9 @@ var ButtonMenuItem = function (_a) {
|
|
|
1866
1866
|
}
|
|
1867
1867
|
return React__default.createElement(Button, __assign({ as: as, variant: variant }, props));
|
|
1868
1868
|
};
|
|
1869
|
-
var templateObject_1$
|
|
1869
|
+
var templateObject_1$_;
|
|
1870
1870
|
|
|
1871
|
-
var PromotedGradient = keyframes(templateObject_1$
|
|
1871
|
+
var PromotedGradient = keyframes(templateObject_1$Z || (templateObject_1$Z = __makeTemplateObject(["\n 0% {\n background-position: 50% 0%;\n }\n 50% {\n background-position: 50% 100%;\n }\n 100% {\n background-position: 50% 0%;\n }\n"], ["\n 0% {\n background-position: 50% 0%;\n }\n 50% {\n background-position: 50% 100%;\n }\n 100% {\n background-position: 50% 0%;\n }\n"])));
|
|
1872
1872
|
/**
|
|
1873
1873
|
* Priority: Warning --> Success --> Active
|
|
1874
1874
|
*/
|
|
@@ -1915,7 +1915,7 @@ StyledCard.defaultProps = {
|
|
|
1915
1915
|
isWarning: false,
|
|
1916
1916
|
isDisabled: false,
|
|
1917
1917
|
};
|
|
1918
|
-
var templateObject_1$
|
|
1918
|
+
var templateObject_1$Z, templateObject_2$v, templateObject_3$c, templateObject_4$9;
|
|
1919
1919
|
|
|
1920
1920
|
var Card = function (_a) {
|
|
1921
1921
|
var ribbon = _a.ribbon, children = _a.children, background = _a.background, props = __rest(_a, ["ribbon", "children", "background"]);
|
|
@@ -1925,13 +1925,13 @@ var Card = function (_a) {
|
|
|
1925
1925
|
children)));
|
|
1926
1926
|
};
|
|
1927
1927
|
|
|
1928
|
-
var CardBody = styled.div(templateObject_1$
|
|
1928
|
+
var CardBody = styled.div(templateObject_1$Y || (templateObject_1$Y = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), space);
|
|
1929
1929
|
CardBody.defaultProps = {
|
|
1930
1930
|
p: "24px",
|
|
1931
1931
|
};
|
|
1932
|
-
var templateObject_1$
|
|
1932
|
+
var templateObject_1$Y;
|
|
1933
1933
|
|
|
1934
|
-
var CardHeader = styled.div(templateObject_1$
|
|
1934
|
+
var CardHeader = styled.div(templateObject_1$X || (templateObject_1$X = __makeTemplateObject(["\n background: ", ";\n border-radius: ", ";\n ", "\n"], ["\n background: ", ";\n border-radius: ", ";\n ", "\n"])), function (_a) {
|
|
1935
1935
|
var theme = _a.theme, _b = _a.variant, variant = _b === void 0 ? "default" : _b;
|
|
1936
1936
|
return theme.card.cardHeaderBackground[variant];
|
|
1937
1937
|
}, function (_a) {
|
|
@@ -1941,18 +1941,18 @@ var CardHeader = styled.div(templateObject_1$W || (templateObject_1$W = __makeTe
|
|
|
1941
1941
|
CardHeader.defaultProps = {
|
|
1942
1942
|
p: "24px",
|
|
1943
1943
|
};
|
|
1944
|
-
var templateObject_1$
|
|
1944
|
+
var templateObject_1$X;
|
|
1945
1945
|
|
|
1946
|
-
var CardFooter = styled.div(templateObject_1$
|
|
1946
|
+
var CardFooter = styled.div(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n border-top: 1px solid ", ";\n ", "\n"], ["\n border-top: 1px solid ", ";\n ", "\n"])), function (_a) {
|
|
1947
1947
|
var theme = _a.theme;
|
|
1948
1948
|
return theme.colors.cardBorder;
|
|
1949
1949
|
}, space);
|
|
1950
1950
|
CardFooter.defaultProps = {
|
|
1951
1951
|
p: "24px",
|
|
1952
1952
|
};
|
|
1953
|
-
var templateObject_1$
|
|
1953
|
+
var templateObject_1$W;
|
|
1954
1954
|
|
|
1955
|
-
var StyledCardRibbon = styled.div(templateObject_1$
|
|
1955
|
+
var StyledCardRibbon = styled.div(templateObject_1$V || (templateObject_1$V = __makeTemplateObject(["\n z-index: 10;\n background-color: ", ";\n color: white;\n margin: 0;\n padding: 0;\n padding: 8px 0;\n position: absolute;\n right: ", ";\n top: 0;\n text-align: center;\n transform: translateX(30%) translateY(0%) rotate(45deg);\n transform: ", ";\n transform-origin: top left;\n width: 96px;\n\n &:before,\n &:after {\n background-color: ", ";\n content: \"\";\n height: 100%;\n margin: 0 -1px; /* Removes tiny gap */\n position: absolute;\n top: 0;\n width: 100%;\n }\n\n &:before {\n right: 100%;\n }\n\n &:after {\n left: 100%;\n }\n\n & > div {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n width: 96px;\n }\n"], ["\n z-index: 10;\n background-color: ", ";\n color: white;\n margin: 0;\n padding: 0;\n padding: 8px 0;\n position: absolute;\n right: ", ";\n top: 0;\n text-align: center;\n transform: translateX(30%) translateY(0%) rotate(45deg);\n transform: ",
|
|
1956
1956
|
";\n transform-origin: top left;\n width: 96px;\n\n &:before,\n &:after {\n background-color: ", ";\n content: \"\";\n height: 100%;\n margin: 0 -1px; /* Removes tiny gap */\n position: absolute;\n top: 0;\n width: 100%;\n }\n\n &:before {\n right: 100%;\n }\n\n &:after {\n left: 100%;\n }\n\n & > div {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n width: 96px;\n }\n"])), function (_a) {
|
|
1957
1957
|
var _b = _a.variantColor, variantColor = _b === void 0 ? "secondary" : _b, theme = _a.theme;
|
|
1958
1958
|
return theme.colors[variantColor];
|
|
@@ -1976,7 +1976,7 @@ var CardRibbon = function (_a) {
|
|
|
1976
1976
|
CardRibbon.defaultProps = {
|
|
1977
1977
|
ribbonPosition: "right",
|
|
1978
1978
|
};
|
|
1979
|
-
var templateObject_1$
|
|
1979
|
+
var templateObject_1$V;
|
|
1980
1980
|
|
|
1981
1981
|
var animation = {
|
|
1982
1982
|
WAVES: "waves",
|
|
@@ -1987,7 +1987,7 @@ var variant = {
|
|
|
1987
1987
|
CIRCLE: "circle",
|
|
1988
1988
|
};
|
|
1989
1989
|
|
|
1990
|
-
var waves = keyframes(templateObject_1$
|
|
1990
|
+
var waves = keyframes(templateObject_1$U || (templateObject_1$U = __makeTemplateObject(["\n from {\n left: -150px;\n }\n to {\n left: 100%;\n }\n"], ["\n from {\n left: -150px;\n }\n to {\n left: 100%;\n }\n"])));
|
|
1991
1991
|
var pulse = keyframes(templateObject_2$u || (templateObject_2$u = __makeTemplateObject(["\n 0% {\n opacity: 1;\n }\n 50% {\n opacity: 0.4;\n }\n 100% {\n opacity: 1;\n }\n"], ["\n 0% {\n opacity: 1;\n }\n 50% {\n opacity: 0.4;\n }\n 100% {\n opacity: 1;\n }\n"])));
|
|
1992
1992
|
var Root = styled.div(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n min-height: 20px;\n display: block;\n background-color: ", ";\n border-radius: ", ";\n\n ", "\n ", "\n"], ["\n min-height: 20px;\n display: block;\n background-color: ", ";\n border-radius: ", ";\n\n ", "\n ", "\n"])), function (_a) {
|
|
1993
1993
|
var theme = _a.theme;
|
|
@@ -2005,9 +2005,9 @@ var Skeleton = function (_a) {
|
|
|
2005
2005
|
}
|
|
2006
2006
|
return React__default.createElement(Pulse, __assign({ variant: variant$1 }, props));
|
|
2007
2007
|
};
|
|
2008
|
-
var templateObject_1$
|
|
2008
|
+
var templateObject_1$U, templateObject_2$u, templateObject_3$b, templateObject_4$8, templateObject_5$5;
|
|
2009
2009
|
|
|
2010
|
-
var PriceLink = styled.a(templateObject_1$
|
|
2010
|
+
var PriceLink = styled.a(templateObject_1$T || (templateObject_1$T = __makeTemplateObject(["\n display: flex;\n align-items: center;\n svg {\n transition: transform 0.3s;\n }\n :hover {\n svg {\n transform: scale(1.2);\n }\n }\n"], ["\n display: flex;\n align-items: center;\n svg {\n transition: transform 0.3s;\n }\n :hover {\n svg {\n transform: scale(1.2);\n }\n }\n"])));
|
|
2011
2011
|
var CakePrice = function (_a) {
|
|
2012
2012
|
var cakePriceUsd = _a.cakePriceUsd, _b = _a.color, color = _b === void 0 ? "textSubtle" : _b;
|
|
2013
2013
|
return cakePriceUsd ? (React__default.createElement(PriceLink, { href: "https://pancakeswap.finance/swap?outputCurrency=0x0e09fabb73bd3ade0a17ecc321fd13a19e81ce82", target: "_blank" },
|
|
@@ -2015,7 +2015,7 @@ var CakePrice = function (_a) {
|
|
|
2015
2015
|
React__default.createElement(Text, { color: color, bold: true }, "$" + cakePriceUsd.toFixed(3)))) : (React__default.createElement(Skeleton, { width: 80, height: 24 }));
|
|
2016
2016
|
};
|
|
2017
2017
|
var CakePrice$1 = React__default.memo(CakePrice);
|
|
2018
|
-
var templateObject_1$
|
|
2018
|
+
var templateObject_1$T;
|
|
2019
2019
|
|
|
2020
2020
|
var scales$6 = {
|
|
2021
2021
|
SM: "sm",
|
|
@@ -2032,7 +2032,7 @@ var getScale$3 = function (_a) {
|
|
|
2032
2032
|
return "32px";
|
|
2033
2033
|
}
|
|
2034
2034
|
};
|
|
2035
|
-
var Checkbox = styled.input.attrs({ type: "checkbox" })(templateObject_1$
|
|
2035
|
+
var Checkbox = styled.input.attrs({ type: "checkbox" })(templateObject_1$S || (templateObject_1$S = __makeTemplateObject(["\n appearance: none;\n overflow: hidden;\n cursor: pointer;\n position: relative;\n display: inline-block;\n height: ", ";\n width: ", ";\n vertical-align: middle;\n transition: background-color 0.2s ease-in-out;\n border: 0;\n border-radius: 8px;\n background-color: ", ";\n box-shadow: ", ";\n\n &:after {\n content: \"\";\n position: absolute;\n border-bottom: 2px solid;\n border-left: 2px solid;\n border-color: transparent;\n top: 30%;\n left: 0;\n right: 0;\n width: 50%;\n height: 25%;\n margin: auto;\n transform: rotate(-50deg);\n transition: border-color 0.2s ease-in-out;\n }\n\n &:hover:not(:disabled):not(:checked) {\n box-shadow: ", ";\n }\n\n &:focus {\n outline: none;\n box-shadow: ", ";\n }\n\n &:checked {\n background-color: ", ";\n &:after {\n border-color: white;\n }\n }\n\n &:disabled {\n cursor: default;\n opacity: 0.6;\n }\n"], ["\n appearance: none;\n overflow: hidden;\n cursor: pointer;\n position: relative;\n display: inline-block;\n height: ", ";\n width: ", ";\n vertical-align: middle;\n transition: background-color 0.2s ease-in-out;\n border: 0;\n border-radius: 8px;\n background-color: ", ";\n box-shadow: ", ";\n\n &:after {\n content: \"\";\n position: absolute;\n border-bottom: 2px solid;\n border-left: 2px solid;\n border-color: transparent;\n top: 30%;\n left: 0;\n right: 0;\n width: 50%;\n height: 25%;\n margin: auto;\n transform: rotate(-50deg);\n transition: border-color 0.2s ease-in-out;\n }\n\n &:hover:not(:disabled):not(:checked) {\n box-shadow: ", ";\n }\n\n &:focus {\n outline: none;\n box-shadow: ", ";\n }\n\n &:checked {\n background-color: ", ";\n &:after {\n border-color: white;\n }\n }\n\n &:disabled {\n cursor: default;\n opacity: 0.6;\n }\n"])), getScale$3, getScale$3, function (_a) {
|
|
2036
2036
|
var theme = _a.theme;
|
|
2037
2037
|
return theme.colors.input;
|
|
2038
2038
|
}, function (_a) {
|
|
@@ -2051,7 +2051,7 @@ var Checkbox = styled.input.attrs({ type: "checkbox" })(templateObject_1$R || (t
|
|
|
2051
2051
|
Checkbox.defaultProps = {
|
|
2052
2052
|
scale: scales$6.MD,
|
|
2053
2053
|
};
|
|
2054
|
-
var templateObject_1$
|
|
2054
|
+
var templateObject_1$S;
|
|
2055
2055
|
|
|
2056
2056
|
var getLeft = function (_a) {
|
|
2057
2057
|
var position = _a.position;
|
|
@@ -2067,7 +2067,7 @@ var getBottom = function (_a) {
|
|
|
2067
2067
|
}
|
|
2068
2068
|
return "auto";
|
|
2069
2069
|
};
|
|
2070
|
-
var DropdownContent = styled.div(templateObject_1$
|
|
2070
|
+
var DropdownContent = styled.div(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n width: max-content;\n display: none;\n flex-direction: column;\n position: absolute;\n transform: translate(-50%, 0);\n left: ", ";\n bottom: ", ";\n background-color: ", ";\n box-shadow: ", ";\n padding: 16px;\n max-height: 400px;\n overflow-y: auto;\n z-index: ", ";\n border-radius: ", ";\n"], ["\n width: max-content;\n display: none;\n flex-direction: column;\n position: absolute;\n transform: translate(-50%, 0);\n left: ", ";\n bottom: ", ";\n background-color: ", ";\n box-shadow: ", ";\n padding: 16px;\n max-height: 400px;\n overflow-y: auto;\n z-index: ", ";\n border-radius: ", ";\n"])), getLeft, getBottom, function (_a) {
|
|
2071
2071
|
var theme = _a.theme;
|
|
2072
2072
|
return theme.nav.background;
|
|
2073
2073
|
}, function (_a) {
|
|
@@ -2090,9 +2090,9 @@ var Dropdown = function (_a) {
|
|
|
2090
2090
|
Dropdown.defaultProps = {
|
|
2091
2091
|
position: "bottom",
|
|
2092
2092
|
};
|
|
2093
|
-
var templateObject_1$
|
|
2093
|
+
var templateObject_1$R, templateObject_2$t;
|
|
2094
2094
|
|
|
2095
|
-
var bunnyFall = keyframes(templateObject_1$
|
|
2095
|
+
var bunnyFall = keyframes(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject(["\n 0% {\n opacity: 1;\n transform: translate(0, -100%) rotateZ(0deg);\n }\n\n 75% {\n opacity: 1;\n transform: translate(100px, 75vh) rotateZ(270deg);\n }\n\n 100% {\n opacity: 0;\n transform: translate(150px, 100vh) rotateZ(360deg);\n }\n"], ["\n 0% {\n opacity: 1;\n transform: translate(0, -100%) rotateZ(0deg);\n }\n\n 75% {\n opacity: 1;\n transform: translate(100px, 75vh) rotateZ(270deg);\n }\n\n 100% {\n opacity: 0;\n transform: translate(150px, 100vh) rotateZ(360deg);\n }\n"])));
|
|
2096
2096
|
var Bunny = styled.div(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n display: inline-flex;\n position: fixed;\n top: 0;\n left: ", ";\n transform: translate3d(0, -100%, 0);\n user-select: none;\n pointer-events: none;\n z-index: 99999;\n\n animation-name: ", ";\n animation-duration: ", ";\n animation-timing-function: linear;\n animation-iteration-count: ", ";\n animation-play-state: running;\n\n &:nth-child(5n + 5) {\n animation-delay: ", ";\n }\n\n &:nth-child(3n + 2) {\n animation-delay: ", ";\n }\n\n &:nth-child(2n + 5) {\n animation-delay: ", ";\n }\n\n &:nth-child(3n + 10) {\n animation-delay: ", ";\n }\n\n &:nth-child(7n + 2) {\n animation-delay: ", ";\n }\n\n &:nth-child(4n + 5) {\n animation-delay: ", ";\n }\n\n &:nth-child(3n + 7) {\n animation-delay: ", ";\n }\n"], ["\n display: inline-flex;\n position: fixed;\n top: 0;\n left: ", ";\n transform: translate3d(0, -100%, 0);\n user-select: none;\n pointer-events: none;\n z-index: 99999;\n\n animation-name: ", ";\n animation-duration: ", ";\n animation-timing-function: linear;\n animation-iteration-count: ", ";\n animation-play-state: running;\n\n &:nth-child(5n + 5) {\n animation-delay: ", ";\n }\n\n &:nth-child(3n + 2) {\n animation-delay: ", ";\n }\n\n &:nth-child(2n + 5) {\n animation-delay: ", ";\n }\n\n &:nth-child(3n + 10) {\n animation-delay: ", ";\n }\n\n &:nth-child(7n + 2) {\n animation-delay: ", ";\n }\n\n &:nth-child(4n + 5) {\n animation-delay: ", ";\n }\n\n &:nth-child(3n + 7) {\n animation-delay: ", ";\n }\n"])), function (_a) {
|
|
2097
2097
|
var position = _a.position;
|
|
2098
2098
|
return position + "vw";
|
|
@@ -2130,7 +2130,7 @@ var FallingBunnies = function (_a) {
|
|
|
2130
2130
|
React__default.createElement(Icon$1p, { width: size, height: size }))); });
|
|
2131
2131
|
return React__default.createElement("div", null, bunnies);
|
|
2132
2132
|
};
|
|
2133
|
-
var templateObject_1$
|
|
2133
|
+
var templateObject_1$Q, templateObject_2$s;
|
|
2134
2134
|
|
|
2135
2135
|
var tags = {
|
|
2136
2136
|
H1: "h1",
|
|
@@ -2166,7 +2166,7 @@ var style = (_a$3 = {},
|
|
|
2166
2166
|
fontSizeLg: "64px",
|
|
2167
2167
|
},
|
|
2168
2168
|
_a$3);
|
|
2169
|
-
var Heading = styled(Text).attrs({ bold: true })(templateObject_1$
|
|
2169
|
+
var Heading = styled(Text).attrs({ bold: true })(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n font-size: ", ";\n font-weight: 600;\n line-height: 1.1;\n\n ", " {\n font-size: ", ";\n }\n"], ["\n font-size: ", ";\n font-weight: 600;\n line-height: 1.1;\n\n ", " {\n font-size: ", ";\n }\n"])), function (_a) {
|
|
2170
2170
|
var scale = _a.scale;
|
|
2171
2171
|
return style[scale || scales$5.MD].fontSize;
|
|
2172
2172
|
}, function (_a) {
|
|
@@ -2179,7 +2179,7 @@ var Heading = styled(Text).attrs({ bold: true })(templateObject_1$O || (template
|
|
|
2179
2179
|
Heading.defaultProps = {
|
|
2180
2180
|
as: tags.H2,
|
|
2181
2181
|
};
|
|
2182
|
-
var templateObject_1$
|
|
2182
|
+
var templateObject_1$P;
|
|
2183
2183
|
|
|
2184
2184
|
var observerOptions = {
|
|
2185
2185
|
root: null,
|
|
@@ -2187,7 +2187,7 @@ var observerOptions = {
|
|
|
2187
2187
|
threshold: 0,
|
|
2188
2188
|
};
|
|
2189
2189
|
|
|
2190
|
-
var StyledWrapper = styled.div(templateObject_1$
|
|
2190
|
+
var StyledWrapper = styled.div(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n max-height: ", "px;\n max-width: ", "px;\n position: relative;\n width: 100%;\n\n &:after {\n content: \"\";\n display: block;\n padding-top: ", "%;\n }\n\n ", "\n"], ["\n max-height: ", "px;\n max-width: ", "px;\n position: relative;\n width: 100%;\n\n &:after {\n content: \"\";\n display: block;\n padding-top: ", "%;\n }\n\n ", "\n"])), function (_a) {
|
|
2191
2191
|
var $height = _a.$height;
|
|
2192
2192
|
return $height;
|
|
2193
2193
|
}, function (_a) {
|
|
@@ -2197,16 +2197,16 @@ var StyledWrapper = styled.div(templateObject_1$N || (templateObject_1$N = __mak
|
|
|
2197
2197
|
var $width = _a.$width, $height = _a.$height;
|
|
2198
2198
|
return ($height / $width) * 100;
|
|
2199
2199
|
}, space);
|
|
2200
|
-
var Wrapper$
|
|
2200
|
+
var Wrapper$4 = forwardRef(function (_a, ref) {
|
|
2201
2201
|
var width = _a.width, height = _a.height, props = __rest(_a, ["width", "height"]);
|
|
2202
2202
|
return React__default.createElement(StyledWrapper, __assign({ ref: ref, "$width": width, "$height": height }, props));
|
|
2203
2203
|
});
|
|
2204
|
-
var templateObject_1$
|
|
2204
|
+
var templateObject_1$O;
|
|
2205
2205
|
|
|
2206
|
-
var Placeholder = styled.div(templateObject_1$
|
|
2207
|
-
var templateObject_1$
|
|
2206
|
+
var Placeholder = styled.div(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n height: 100%;\n left: 0;\n position: absolute;\n top: 0;\n width: 100%;\n"], ["\n height: 100%;\n left: 0;\n position: absolute;\n top: 0;\n width: 100%;\n"])));
|
|
2207
|
+
var templateObject_1$N;
|
|
2208
2208
|
|
|
2209
|
-
var StyledBackgroundImage = styled(Wrapper$
|
|
2209
|
+
var StyledBackgroundImage = styled(Wrapper$4)(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n background-repeat: no-repeat;\n background-size: contain;\n"], ["\n background-repeat: no-repeat;\n background-size: contain;\n"])));
|
|
2210
2210
|
var BackgroundImage = function (_a) {
|
|
2211
2211
|
var loadingPlaceholder = _a.loadingPlaceholder, src = _a.src, width = _a.width, height = _a.height, props = __rest(_a, ["loadingPlaceholder", "src", "width", "height"]);
|
|
2212
2212
|
var _b = useState(false), isLoaded = _b[0], setIsLoaded = _b[1];
|
|
@@ -2243,9 +2243,9 @@ var BackgroundImage = function (_a) {
|
|
|
2243
2243
|
}, [src, setIsLoaded]);
|
|
2244
2244
|
return (React__default.createElement(StyledBackgroundImage, __assign({ ref: ref, width: width, height: height }, props), !isLoaded && placeholder));
|
|
2245
2245
|
};
|
|
2246
|
-
var templateObject_1$
|
|
2246
|
+
var templateObject_1$M;
|
|
2247
2247
|
|
|
2248
|
-
var StyledImage = styled.img(templateObject_1$
|
|
2248
|
+
var StyledImage = styled.img(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n height: 100%;\n left: 0;\n position: absolute;\n top: 0;\n width: 100%;\n"], ["\n height: 100%;\n left: 0;\n position: absolute;\n top: 0;\n width: 100%;\n"])));
|
|
2249
2249
|
var Image = function (_a) {
|
|
2250
2250
|
var src = _a.src, alt = _a.alt, width = _a.width, height = _a.height, props = __rest(_a, ["src", "alt", "width", "height"]);
|
|
2251
2251
|
var imgRef = useRef(null);
|
|
@@ -2270,12 +2270,12 @@ var Image = function (_a) {
|
|
|
2270
2270
|
}
|
|
2271
2271
|
};
|
|
2272
2272
|
}, [src]);
|
|
2273
|
-
return (React__default.createElement(Wrapper$
|
|
2273
|
+
return (React__default.createElement(Wrapper$4, __assign({ ref: imgRef, height: height, width: width }, props), isLoaded ? React__default.createElement(StyledImage, { src: src, alt: alt }) : React__default.createElement(Placeholder, null)));
|
|
2274
2274
|
};
|
|
2275
|
-
var templateObject_1$
|
|
2275
|
+
var templateObject_1$L;
|
|
2276
2276
|
|
|
2277
|
-
var TokenImage = styled(Image)(templateObject_1$
|
|
2278
|
-
var templateObject_1$
|
|
2277
|
+
var TokenImage = styled(Image)(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n &:before {\n border-radius: 50%;\n border: 1px solid rgba(0, 0, 0, 0.25);\n content: \"\";\n height: 100%;\n left: 0;\n position: absolute;\n top: 0;\n width: 100%;\n z-index: 7;\n }\n"], ["\n &:before {\n border-radius: 50%;\n border: 1px solid rgba(0, 0, 0, 0.25);\n content: \"\";\n height: 100%;\n left: 0;\n position: absolute;\n top: 0;\n width: 100%;\n z-index: 7;\n }\n"])));
|
|
2278
|
+
var templateObject_1$K;
|
|
2279
2279
|
|
|
2280
2280
|
var variants$4 = {
|
|
2281
2281
|
DEFAULT: "default",
|
|
@@ -2283,7 +2283,7 @@ var variants$4 = {
|
|
|
2283
2283
|
};
|
|
2284
2284
|
|
|
2285
2285
|
var _a$2, _b$2;
|
|
2286
|
-
var StyledPrimaryImage = styled(TokenImage)(templateObject_1$
|
|
2286
|
+
var StyledPrimaryImage = styled(TokenImage)(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n position: absolute;\n width: ", "; // 92, 82 are arbitrary numbers to fit the variant\n\n ", "\n"], ["\n position: absolute;\n width: ",
|
|
2287
2287
|
"; // 92, 82 are arbitrary numbers to fit the variant\n\n ",
|
|
2288
2288
|
"\n"])), function (_a) {
|
|
2289
2289
|
var variant = _a.variant;
|
|
@@ -2325,20 +2325,20 @@ var StyledSecondaryImage = styled(TokenImage)(templateObject_2$r || (templateObj
|
|
|
2325
2325
|
},
|
|
2326
2326
|
_b$2),
|
|
2327
2327
|
}));
|
|
2328
|
-
var templateObject_1$
|
|
2328
|
+
var templateObject_1$J, templateObject_2$r;
|
|
2329
2329
|
|
|
2330
2330
|
var TokenPairImage = function (_a) {
|
|
2331
2331
|
var primarySrc = _a.primarySrc, secondarySrc = _a.secondarySrc, width = _a.width, height = _a.height, _b = _a.variant, variant = _b === void 0 ? variants$4.DEFAULT : _b, _c = _a.primaryImageProps, primaryImageProps = _c === void 0 ? {} : _c, _d = _a.secondaryImageProps, secondaryImageProps = _d === void 0 ? {} : _d, props = __rest(_a, ["primarySrc", "secondarySrc", "width", "height", "variant", "primaryImageProps", "secondaryImageProps"]);
|
|
2332
2332
|
var secondaryImageSize = Math.floor(width / 2);
|
|
2333
|
-
return (React__default.createElement(Wrapper$
|
|
2333
|
+
return (React__default.createElement(Wrapper$4, __assign({ position: "relative", width: width, height: height }, props),
|
|
2334
2334
|
React__default.createElement(StyledPrimaryImage, __assign({ variant: variant, src: primarySrc, width: width, height: height }, primaryImageProps)),
|
|
2335
2335
|
React__default.createElement(StyledSecondaryImage, __assign({ variant: variant, src: secondarySrc, width: secondaryImageSize, height: secondaryImageSize }, secondaryImageProps))));
|
|
2336
2336
|
};
|
|
2337
2337
|
|
|
2338
|
-
var StyledProfileAvatar = styled(BackgroundImage)(templateObject_1$
|
|
2338
|
+
var StyledProfileAvatar = styled(BackgroundImage)(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n border-radius: 50%;\n"], ["\n border-radius: 50%;\n"])));
|
|
2339
2339
|
var StyledBunnyPlaceholder = styled(Icon$1X)(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n height: 100%;\n width: 100%;\n"], ["\n height: 100%;\n width: 100%;\n"])));
|
|
2340
2340
|
var ProfileAvatar = function (props) { return (React__default.createElement(StyledProfileAvatar, __assign({ loadingPlaceholder: React__default.createElement(StyledBunnyPlaceholder, null) }, props))); };
|
|
2341
|
-
var templateObject_1$
|
|
2341
|
+
var templateObject_1$I, templateObject_2$q;
|
|
2342
2342
|
|
|
2343
2343
|
var getPadding$1 = function (scale, hasIcon) {
|
|
2344
2344
|
if (!hasIcon) {
|
|
@@ -2354,7 +2354,7 @@ var getPadding$1 = function (scale, hasIcon) {
|
|
|
2354
2354
|
return "48px";
|
|
2355
2355
|
}
|
|
2356
2356
|
};
|
|
2357
|
-
var StyledInputGroup = styled(Box)(templateObject_1$
|
|
2357
|
+
var StyledInputGroup = styled(Box)(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n ", " {\n padding-left: ", ";\n padding-right: ", ";\n }\n"], ["\n ", " {\n padding-left: ", ";\n padding-right: ", ";\n }\n"])), Input$1, function (_a) {
|
|
2358
2358
|
var hasStartIcon = _a.hasStartIcon, scale = _a.scale;
|
|
2359
2359
|
return getPadding$1(scale, hasStartIcon);
|
|
2360
2360
|
}, function (_a) {
|
|
@@ -2375,9 +2375,9 @@ var InputGroup = function (_a) {
|
|
|
2375
2375
|
cloneElement(children, { scale: scale }),
|
|
2376
2376
|
endIcon && (React__default.createElement(InputIcon, { scale: scale, isEndIcon: true }, endIcon))));
|
|
2377
2377
|
};
|
|
2378
|
-
var templateObject_1$
|
|
2378
|
+
var templateObject_1$H, templateObject_2$p;
|
|
2379
2379
|
|
|
2380
|
-
var GridLayout$1 = styled(Grid)(templateObject_1$
|
|
2380
|
+
var GridLayout$1 = styled(Grid)(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n grid-template-columns: repeat(6, 1fr);\n grid-gap: 16px;\n ", " {\n grid-template-columns: repeat(8, 1fr);\n grid-gap: 24px;\n }\n ", " {\n grid-template-columns: repeat(12, 1fr);\n grid-gap: 24px;\n }\n ", " {\n grid-template-columns: repeat(12, 1fr);\n grid-gap: 32px;\n }\n"], ["\n grid-template-columns: repeat(6, 1fr);\n grid-gap: 16px;\n ", " {\n grid-template-columns: repeat(8, 1fr);\n grid-gap: 24px;\n }\n ", " {\n grid-template-columns: repeat(12, 1fr);\n grid-gap: 24px;\n }\n ", " {\n grid-template-columns: repeat(12, 1fr);\n grid-gap: 32px;\n }\n"])), function (_a) {
|
|
2381
2381
|
var theme = _a.theme;
|
|
2382
2382
|
return theme.mediaQueries.sm;
|
|
2383
2383
|
}, function (_a) {
|
|
@@ -2387,15 +2387,15 @@ var GridLayout$1 = styled(Grid)(templateObject_1$F || (templateObject_1$F = __ma
|
|
|
2387
2387
|
var theme = _a.theme;
|
|
2388
2388
|
return theme.mediaQueries.lg;
|
|
2389
2389
|
});
|
|
2390
|
-
var templateObject_1$
|
|
2390
|
+
var templateObject_1$G;
|
|
2391
2391
|
|
|
2392
|
-
var GridLayout = styled(GridLayout$1)(templateObject_1$
|
|
2392
|
+
var GridLayout = styled(GridLayout$1)(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n & > div {\n grid-column: span 6;\n ", " {\n grid-column: span 4;\n }\n }\n"], ["\n & > div {\n grid-column: span 6;\n ", " {\n grid-column: span 4;\n }\n }\n"])), function (_a) {
|
|
2393
2393
|
var theme = _a.theme;
|
|
2394
2394
|
return theme.mediaQueries.sm;
|
|
2395
2395
|
});
|
|
2396
|
-
var templateObject_1$
|
|
2396
|
+
var templateObject_1$F;
|
|
2397
2397
|
|
|
2398
|
-
var StyledLink$1 = styled(Text)(templateObject_1$
|
|
2398
|
+
var StyledLink$1 = styled(Text)(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n display: flex;\n align-items: center;\n width: fit-content;\n &:hover {\n text-decoration: underline;\n }\n"], ["\n display: flex;\n align-items: center;\n width: fit-content;\n &:hover {\n text-decoration: underline;\n }\n"])));
|
|
2399
2399
|
var Link = function (_a) {
|
|
2400
2400
|
var external = _a.external, props = __rest(_a, ["external"]);
|
|
2401
2401
|
var internalProps = external ? getExternalLinkProps() : {};
|
|
@@ -2404,7 +2404,7 @@ var Link = function (_a) {
|
|
|
2404
2404
|
Link.defaultProps = {
|
|
2405
2405
|
color: "primary",
|
|
2406
2406
|
};
|
|
2407
|
-
var templateObject_1$
|
|
2407
|
+
var templateObject_1$E;
|
|
2408
2408
|
|
|
2409
2409
|
var LinkExternal = function (_a) {
|
|
2410
2410
|
var children = _a.children, props = __rest(_a, ["children"]);
|
|
@@ -2428,7 +2428,7 @@ var Icons$2 = {
|
|
|
2428
2428
|
warning: Icon$n,
|
|
2429
2429
|
danger: Icon$2f,
|
|
2430
2430
|
};
|
|
2431
|
-
var MessageContainer = styled.div(templateObject_1$
|
|
2431
|
+
var MessageContainer = styled.div(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n display: flex;\n background-color: gray;\n padding: 16px;\n border-radius: 16px;\n border: solid 1px;\n\n ", "\n ", "\n"], ["\n display: flex;\n background-color: gray;\n padding: 16px;\n border-radius: 16px;\n border: solid 1px;\n\n ", "\n ",
|
|
2432
2432
|
"\n"])), space, variant$1({
|
|
2433
2433
|
variants: variants$3,
|
|
2434
2434
|
}));
|
|
@@ -2439,9 +2439,9 @@ var Message = function (_a) {
|
|
|
2439
2439
|
React__default.createElement(Box, { mr: "12px" }, icon !== null && icon !== void 0 ? icon : React__default.createElement(Icon, { color: variants$3[variant].borderColor, width: "24px" })),
|
|
2440
2440
|
children));
|
|
2441
2441
|
};
|
|
2442
|
-
var templateObject_1$
|
|
2442
|
+
var templateObject_1$D;
|
|
2443
2443
|
|
|
2444
|
-
var NotificationDotRoot = styled.span(templateObject_1$
|
|
2444
|
+
var NotificationDotRoot = styled.span(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n display: inline-flex;\n position: relative;\n"], ["\n display: inline-flex;\n position: relative;\n"])));
|
|
2445
2445
|
var Dot = styled.span(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n display: ", ";\n position: absolute;\n top: 0;\n right: 0;\n width: 10px;\n height: 10px;\n pointer-events: none;\n border: 2px solid ", ";\n border-radius: 50%;\n background-color: ", ";\n"], ["\n display: ", ";\n position: absolute;\n top: 0;\n right: 0;\n width: 10px;\n height: 10px;\n pointer-events: none;\n border: 2px solid ", ";\n border-radius: 50%;\n background-color: ", ";\n"])), function (_a) {
|
|
2446
2446
|
var show = _a.show;
|
|
2447
2447
|
return (show ? "inline-flex" : "none");
|
|
@@ -2458,9 +2458,9 @@ var NotificationDot = function (_a) {
|
|
|
2458
2458
|
Children.map(children, function (child) { return cloneElement(child, props); }),
|
|
2459
2459
|
React__default.createElement(Dot, { show: show, color: color })));
|
|
2460
2460
|
};
|
|
2461
|
-
var templateObject_1$
|
|
2461
|
+
var templateObject_1$C, templateObject_2$o;
|
|
2462
2462
|
|
|
2463
|
-
var Overlay = styled.div.attrs({ role: "presentation" })(templateObject_1$
|
|
2463
|
+
var Overlay = styled.div.attrs({ role: "presentation" })(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n position: fixed;\n top: 0px;\n left: 0px;\n width: 100%;\n height: 100%;\n background-color: ", ";\n transition: opacity 0.4s;\n opacity: ", ";\n z-index: ", ";\n pointer-events: ", ";\n"], ["\n position: fixed;\n top: 0px;\n left: 0px;\n width: 100%;\n height: 100%;\n background-color: ", ";\n transition: opacity 0.4s;\n opacity: ", ";\n z-index: ", ";\n pointer-events: ", ";\n"])), function (_a) {
|
|
2464
2464
|
var theme = _a.theme;
|
|
2465
2465
|
return theme.colors.overlay;
|
|
2466
2466
|
}, function (_a) {
|
|
@@ -2477,7 +2477,7 @@ Overlay.defaultProps = {
|
|
|
2477
2477
|
show: false,
|
|
2478
2478
|
zIndex: 10,
|
|
2479
2479
|
};
|
|
2480
|
-
var templateObject_1$
|
|
2480
|
+
var templateObject_1$B;
|
|
2481
2481
|
|
|
2482
2482
|
var scales$4 = {
|
|
2483
2483
|
SM: "sm",
|
|
@@ -2550,7 +2550,7 @@ var getScale$2 = function (property) {
|
|
|
2550
2550
|
return scaleKeyValues$1[scale][property];
|
|
2551
2551
|
};
|
|
2552
2552
|
};
|
|
2553
|
-
var PancakeStack = styled.div(templateObject_1$
|
|
2553
|
+
var PancakeStack = styled.div(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n position: relative;\n display: inline-block;\n\n &:label:before {\n content: none;\n }\n\n .pancakes {\n position: absolute;\n transition: 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n }\n\n .pancake {\n background: #e27c31;\n border-radius: 50%;\n width: ", ";\n height: ", ";\n position: absolute;\n transition: 0.4s ease;\n top: 2px;\n left: 4px;\n box-shadow: 0 ", " 0 ", " #fbbe7c;\n }\n\n .pancake:nth-child(1) {\n background: ", ";\n box-shadow: 0 ", " 0 ", "\n ", ";\n }\n\n .pancake:nth-child(2) {\n left: 0;\n top: ", ";\n transform: scale(0);\n transition: 0.2s ease 0.2s;\n }\n\n .pancake:nth-child(3) {\n top: ", ";\n transform: scale(0);\n transition: 0.2s ease 0.2s;\n }\n\n .pancake:nth-child(3):before,\n .pancake:nth-child(3):after {\n content: \"\";\n position: absolute;\n background: #ef8927;\n border-radius: 20px;\n width: 50%;\n height: 20%;\n }\n\n .pancake:nth-child(3):before {\n top: ", ";\n left: ", ";\n }\n\n .pancake:nth-child(3):after {\n top: ", ";\n right: ", ";\n }\n\n .butter {\n width: ", ";\n height: ", ";\n background: #fbdb60;\n top: ", ";\n left: ", ";\n position: absolute;\n border-radius: ", ";\n box-shadow: 0 ", " 0 ", " #d67823;\n transform: scale(0);\n transition: 0.2s ease;\n }\n"], ["\n position: relative;\n display: inline-block;\n\n &:label:before {\n content: none;\n }\n\n .pancakes {\n position: absolute;\n transition: 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n }\n\n .pancake {\n background: #e27c31;\n border-radius: 50%;\n width: ", ";\n height: ", ";\n position: absolute;\n transition: 0.4s ease;\n top: 2px;\n left: 4px;\n box-shadow: 0 ", " 0 ", " #fbbe7c;\n }\n\n .pancake:nth-child(1) {\n background: ", ";\n box-shadow: 0 ", " 0 ", "\n ", ";\n }\n\n .pancake:nth-child(2) {\n left: 0;\n top: ", ";\n transform: scale(0);\n transition: 0.2s ease 0.2s;\n }\n\n .pancake:nth-child(3) {\n top: ", ";\n transform: scale(0);\n transition: 0.2s ease 0.2s;\n }\n\n .pancake:nth-child(3):before,\n .pancake:nth-child(3):after {\n content: \"\";\n position: absolute;\n background: #ef8927;\n border-radius: 20px;\n width: 50%;\n height: 20%;\n }\n\n .pancake:nth-child(3):before {\n top: ", ";\n left: ", ";\n }\n\n .pancake:nth-child(3):after {\n top: ", ";\n right: ", ";\n }\n\n .butter {\n width: ", ";\n height: ", ";\n background: #fbdb60;\n top: ", ";\n left: ", ";\n position: absolute;\n border-radius: ", ";\n box-shadow: 0 ", " 0 ", " #d67823;\n transform: scale(0);\n transition: 0.2s ease;\n }\n"])), getScale$2("pancakeSize"), getScale$2("pancakeSize"), getScale$2("pancakeThickness"), getScale$2("pancakeThickness"), function (_a) {
|
|
2554
2554
|
var theme = _a.theme;
|
|
2555
2555
|
return theme.pancakeToggle.handleBackground;
|
|
2556
2556
|
}, getScale$2("pancakeThickness"), getScale$2("pancakeThickness"), function (_a) {
|
|
@@ -2568,7 +2568,7 @@ var PancakeLabel = styled.label(templateObject_3$a || (templateObject_3$a = __ma
|
|
|
2568
2568
|
var theme = _a.theme;
|
|
2569
2569
|
return theme.shadows.inset;
|
|
2570
2570
|
});
|
|
2571
|
-
var templateObject_1$
|
|
2571
|
+
var templateObject_1$A, templateObject_2$n, templateObject_3$a;
|
|
2572
2572
|
|
|
2573
2573
|
var PancakeToggle = function (_a) {
|
|
2574
2574
|
var checked = _a.checked, _b = _a.scale, scale = _b === void 0 ? scales$4.LG : _b, props = __rest(_a, ["checked", "scale"]);
|
|
@@ -2651,6 +2651,11 @@ var shadows = {
|
|
|
2651
2651
|
inset: "inset 0px 2px 2px -1px rgba(74, 74, 104, 0.1)",
|
|
2652
2652
|
tooltip: "0px 0px 2px rgba(0, 0, 0, 0.2), 0px 4px 12px -8px rgba(14, 14, 44, 0.1)",
|
|
2653
2653
|
};
|
|
2654
|
+
var devicesQueries = {
|
|
2655
|
+
mobile: "@media screen and (max-width: " + breakpointMap.sm + "px)",
|
|
2656
|
+
tablet: "@media screen and (min-width: " + breakpointMap.sm + "px) and (max-width: " + breakpointMap.xl + "px)",
|
|
2657
|
+
desktop: "@media screen and (min-width: " + breakpointMap.xl + "px)",
|
|
2658
|
+
};
|
|
2654
2659
|
var spacing = [0, 4, 8, 16, 24, 32, 48, 64];
|
|
2655
2660
|
var radii = {
|
|
2656
2661
|
small: "4px",
|
|
@@ -2670,6 +2675,7 @@ var base = {
|
|
|
2670
2675
|
shadows: shadows,
|
|
2671
2676
|
radii: radii,
|
|
2672
2677
|
zIndices: zIndices,
|
|
2678
|
+
devicesQueries: devicesQueries
|
|
2673
2679
|
};
|
|
2674
2680
|
|
|
2675
2681
|
var light$6 = {
|
|
@@ -2739,7 +2745,7 @@ var dark$1 = {
|
|
|
2739
2745
|
};
|
|
2740
2746
|
|
|
2741
2747
|
var light = {
|
|
2742
|
-
background: darkColors.
|
|
2748
|
+
background: darkColors.backgroundDisabled,
|
|
2743
2749
|
text: darkColors.text,
|
|
2744
2750
|
boxShadow: shadows.tooltip,
|
|
2745
2751
|
};
|
|
@@ -2780,7 +2786,7 @@ var styleScales = (_b$1 = {},
|
|
|
2780
2786
|
},
|
|
2781
2787
|
_b$1);
|
|
2782
2788
|
|
|
2783
|
-
var Bar = styled.div(templateObject_1$
|
|
2789
|
+
var Bar = styled.div(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n position: absolute;\n top: 0;\n left: 0;\n background-color: ", ";\n height: 100%;\n transition: width 200ms ease;\n"], ["\n position: absolute;\n top: 0;\n left: 0;\n background-color: ",
|
|
2784
2790
|
";\n height: 100%;\n transition: width 200ms ease;\n"])), function (_a) {
|
|
2785
2791
|
var theme = _a.theme, $useDark = _a.$useDark, primary = _a.primary;
|
|
2786
2792
|
if ($useDark)
|
|
@@ -2810,10 +2816,10 @@ var StyledProgress = styled.div(templateObject_2$m || (templateObject_2$m = __ma
|
|
|
2810
2816
|
prop: "scale",
|
|
2811
2817
|
variants: styleScales,
|
|
2812
2818
|
}), space);
|
|
2813
|
-
var templateObject_1$
|
|
2819
|
+
var templateObject_1$z, templateObject_2$m;
|
|
2814
2820
|
|
|
2815
|
-
var ProgressBunnyWrapper = styled.div(templateObject_1$
|
|
2816
|
-
var templateObject_1$
|
|
2821
|
+
var ProgressBunnyWrapper = styled.div(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n display: flex;\n z-index: 2;\n top: -65%;\n position: absolute;\n transform: translate(-50%, -50%);\n transition: left 200ms ease-out;\n"], ["\n display: flex;\n z-index: 2;\n top: -65%;\n position: absolute;\n transform: translate(-50%, -50%);\n transition: left 200ms ease-out;\n"])));
|
|
2822
|
+
var templateObject_1$y;
|
|
2817
2823
|
|
|
2818
2824
|
var stepGuard = function (step) {
|
|
2819
2825
|
if (step < 0) {
|
|
@@ -2858,7 +2864,7 @@ var getCheckedScale = function (_a) {
|
|
|
2858
2864
|
return "20px";
|
|
2859
2865
|
}
|
|
2860
2866
|
};
|
|
2861
|
-
var Radio = styled.input.attrs({ type: "radio" })(templateObject_1$
|
|
2867
|
+
var Radio = styled.input.attrs({ type: "radio" })(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n appearance: none;\n overflow: hidden;\n cursor: pointer;\n position: relative;\n display: inline-block;\n height: ", ";\n width: ", ";\n vertical-align: middle;\n transition: background-color 0.2s ease-in-out;\n border: 0;\n border-radius: 50%;\n background-color: ", ";\n box-shadow: ", ";\n\n &:after {\n border-radius: 50%;\n content: \"\";\n height: ", ";\n left: 6px;\n position: absolute;\n top: 6px;\n width: ", ";\n }\n\n &:hover:not(:disabled):not(:checked) {\n box-shadow: ", ";\n }\n\n &:focus {\n outline: none;\n box-shadow: ", ";\n }\n\n &:checked {\n background-color: ", ";\n &:after {\n background-color: ", ";\n }\n }\n\n &:disabled {\n cursor: default;\n opacity: 0.6;\n }\n ", "\n"], ["\n appearance: none;\n overflow: hidden;\n cursor: pointer;\n position: relative;\n display: inline-block;\n height: ", ";\n width: ", ";\n vertical-align: middle;\n transition: background-color 0.2s ease-in-out;\n border: 0;\n border-radius: 50%;\n background-color: ", ";\n box-shadow: ", ";\n\n &:after {\n border-radius: 50%;\n content: \"\";\n height: ", ";\n left: 6px;\n position: absolute;\n top: 6px;\n width: ", ";\n }\n\n &:hover:not(:disabled):not(:checked) {\n box-shadow: ", ";\n }\n\n &:focus {\n outline: none;\n box-shadow: ", ";\n }\n\n &:checked {\n background-color: ", ";\n &:after {\n background-color: ", ";\n }\n }\n\n &:disabled {\n cursor: default;\n opacity: 0.6;\n }\n ", "\n"])), getScale$1, getScale$1, function (_a) {
|
|
2862
2868
|
var theme = _a.theme;
|
|
2863
2869
|
return theme.colors.input;
|
|
2864
2870
|
}, function (_a) {
|
|
@@ -2881,7 +2887,7 @@ Radio.defaultProps = {
|
|
|
2881
2887
|
scale: scales$2.MD,
|
|
2882
2888
|
m: 0,
|
|
2883
2889
|
};
|
|
2884
|
-
var templateObject_1$
|
|
2890
|
+
var templateObject_1$x;
|
|
2885
2891
|
|
|
2886
2892
|
var bunnyHeadMain = "data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2232%22%20viewBox%3D%220%200%2028%2032%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20x%3D%221%22%20y%3D%2219%22%20width%3D%2217%22%20height%3D%2211%22%20fill%3D%22%231FC7D4%22%2F%3E%3Cpath%20d%3D%22M9.507%2024.706C8.14635%2026.0666%209.73795%2028.2313%2011.7555%2030.2489C13.7731%2032.2665%2015.9378%2033.8581%2017.2984%2032.4974C18.6591%2031.1368%2017.9685%2028.0711%2015.9509%2026.0535C13.9333%2024.0359%2010.8676%2023.3453%209.507%2024.706Z%22%20fill%3D%22%231FC7D4%22%2F%3E%3Cpath%20d%3D%22M15.507%2022.706C14.1463%2024.0666%2015.7379%2026.2313%2017.7555%2028.2489C19.7731%2030.2665%2021.9378%2031.8581%2023.2984%2030.4974C24.6591%2029.1368%2023.9685%2026.0711%2021.9509%2024.0535C19.9333%2022.0359%2016.8676%2021.3453%2015.507%2022.706Z%22%20fill%3D%22%231FC7D4%22%2F%3E%3Cg%20filter%3D%22url%28%23filter0_d%29%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M14.146%206.75159C14.2105%207.10896%2014.2703%207.48131%2014.3281%207.86164C14.2189%207.85865%2014.1095%207.85714%2014%207.85714C13.3803%207.85714%2012.7648%207.90539%2012.159%207.99779C11.879%207.41458%2011.5547%206.82246%2011.1872%206.23145C8.69897%202.22947%206.53826%201.98679%204.67882%202.98366C2.81938%203.98052%202.85628%206.67644%205.26696%209.40538C5.58076%209.76061%205.90097%2010.1398%206.2247%2010.5286C3.69013%2012.4659%202%2015.2644%202%2018.2695C2%2023.8292%207.78518%2025%2014%2025C20.2148%2025%2026%2023.8292%2026%2018.2695C26%2014.8658%2023.8318%2011.7272%2020.7243%209.80476C20.9022%208.86044%2021%207.83019%2021%206.75159C21%202.19612%2019.2549%201%2017.1022%201C14.9495%201%2013.5261%203.31847%2014.146%206.75159Z%22%20fill%3D%22url%28%23paint0_linear_bunnyhead_main%29%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%282%29%22%3E%3Cpath%20d%3D%22M12.7284%2016.4446C12.796%2017.3149%2012.4446%2019.0556%2010.498%2019.0556%22%20stroke%3D%22%23452A7A%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M12.7457%2016.4446C12.6781%2017.3149%2013.0296%2019.0556%2014.9761%2019.0556%22%20stroke%3D%22%23452A7A%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M9%2014.5C9%2015.6046%208.55228%2016%208%2016C7.44772%2016%207%2015.6046%207%2014.5C7%2013.3954%207.44772%2013%208%2013C8.55228%2013%209%2013.3954%209%2014.5Z%22%20fill%3D%22%23452A7A%22%2F%3E%3Cpath%20d%3D%22M18%2014.5C18%2015.6046%2017.5523%2016%2017%2016C16.4477%2016%2016%2015.6046%2016%2014.5C16%2013.3954%2016.4477%2013%2017%2013C17.5523%2013%2018%2013.3954%2018%2014.5Z%22%20fill%3D%22%23452A7A%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3Cfilter%20id%3D%22filter0_d%22%3E%3CfeFlood%20flood-opacity%3D%220%22%20result%3D%22BackgroundImageFix%22%2F%3E%3CfeColorMatrix%20in%3D%22SourceAlpha%22%20type%3D%22matrix%22%20values%3D%220%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20127%200%22%2F%3E%3CfeOffset%20dy%3D%221%22%2F%3E%3CfeGaussianBlur%20stdDeviation%3D%221%22%2F%3E%3CfeColorMatrix%20type%3D%22matrix%22%20values%3D%220%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200.5%200%22%2F%3E%3CfeBlend%20mode%3D%22normal%22%20in2%3D%22BackgroundImageFix%22%20result%3D%22effect1_dropShadow%22%2F%3E%3CfeBlend%20mode%3D%22normal%22%20in%3D%22SourceGraphic%22%20in2%3D%22effect1_dropShadow%22%20result%3D%22shape%22%2F%3E%3C%2Ffilter%3E%3ClinearGradient%20id%3D%22paint0_linear_bunnyhead_main%22%20x1%3D%2214%22%20y1%3D%221%22%20x2%3D%2214%22%20y2%3D%2225%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%2353DEE9%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%231FC7D4%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3C%2Fsvg%3E";
|
|
2887
2893
|
|
|
@@ -2897,7 +2903,7 @@ var getBaseThumbStyles = function (_a) {
|
|
|
2897
2903
|
var isMax = _a.isMax, disabled = _a.disabled;
|
|
2898
2904
|
return "\n -webkit-appearance: none;\n background-image: url(" + (isMax ? bunnyHeadMax : bunnyHeadMain) + ");\n background-color: transparent;\n border: 0;\n cursor: " + getCursorStyle + ";\n width: 24px;\n height: 32px;\n filter: " + (disabled ? "grayscale(100%)" : "none") + ";\n transform: translate(-2px, -2px);\n transition: 200ms transform;\n\n &:hover {\n transform: " + (disabled ? "scale(1) translate(-2px, -2px)" : "scale(1.1) translate(-3px, -3px)") + ";\n }\n";
|
|
2899
2905
|
};
|
|
2900
|
-
var SliderLabelContainer = styled.div(templateObject_1$
|
|
2906
|
+
var SliderLabelContainer = styled.div(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n bottom: 0;\n position: absolute;\n left: 14px;\n width: calc(100% - 30px);\n"], ["\n bottom: 0;\n position: absolute;\n left: 14px;\n width: calc(100% - 30px);\n"])));
|
|
2901
2907
|
var SliderLabel = styled(Text)(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n bottom: 0;\n font-size: 12px;\n left: ", ";\n position: absolute;\n text-align: center;\n min-width: 24px; // Slider thumb size\n"], ["\n bottom: 0;\n font-size: 12px;\n left: ", ";\n position: absolute;\n text-align: center;\n min-width: 24px; // Slider thumb size\n"])), function (_a) {
|
|
2902
2908
|
var progress = _a.progress;
|
|
2903
2909
|
return progress;
|
|
@@ -2919,7 +2925,7 @@ var BarProgress = styled.div(templateObject_7$2 || (templateObject_7$2 = __makeT
|
|
|
2919
2925
|
var disabled = _a.disabled;
|
|
2920
2926
|
return (disabled ? "grayscale(100%)" : "none");
|
|
2921
2927
|
});
|
|
2922
|
-
var templateObject_1$
|
|
2928
|
+
var templateObject_1$w, templateObject_2$l, templateObject_3$9, templateObject_4$7, templateObject_5$4, templateObject_6$2, templateObject_7$2;
|
|
2923
2929
|
|
|
2924
2930
|
var Slider = function (_a) {
|
|
2925
2931
|
var name = _a.name, min = _a.min, max = _a.max, value = _a.value, onValueChanged = _a.onValueChanged, valueLabel = _a.valueLabel, _b = _a.step, step = _b === void 0 ? "any" : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, props = __rest(_a, ["name", "min", "max", "value", "onValueChanged", "valueLabel", "step", "disabled"]);
|
|
@@ -2977,16 +2983,23 @@ var Icon = function (props) {
|
|
|
2977
2983
|
React__default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M73.6122 7.76013C69.4145 8.86483 64.8207 11.0867 61.24 16.1556C53.2804 27.4231 51.7006 41.9592 58.5495 60.7386C65.3984 79.518 63.3431 89.9236 56.0487 98.3189C48.7543 106.714 29.475 108.685 23.3482 101.929C21.8481 100.274 17.4954 97.4588 20.3675 102.54C23.2397 107.622 30.7527 111.748 39.59 111.748C48.4273 111.748 55.5943 108.146 61.958 101.338C68.3217 94.5306 74.292 78.3883 68.3268 61.7709C60.6331 40.3385 62.8311 27.508 68.2893 19.7815C71.0879 15.8198 75.5453 12.3629 78.6077 10.5868C81.8233 8.72183 84.8797 8.42294 86.8682 8.42294C83.3332 6.65548 77.8099 6.65542 73.6122 7.76013Z", fill: "#633001" }))));
|
|
2978
2984
|
};
|
|
2979
2985
|
|
|
2986
|
+
var Wrapper$3 = styled.div(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n font-size: 0;\n display: inline-block;\n -webkit-animation: outer 6600ms linear infinite;\n animation: outer 6600ms linear infinite;\n & svg {\n -webkit-animation: inner 1320ms linear infinite;\n animation: inner 1320ms linear infinite;\n }\n & svg circle {\n fill: none;\n stroke: #448aff;\n stroke-linecap: square;\n -webkit-animation: arc 1320ms cubic-bezier(0.8, 0, 0.4, 0.8) infinite;\n animation: arc 1320ms cubic-bezier(0.8, 0, 0.4, 0.8) infinite;\n }\n @-webkit-keyframes outer {\n 0% {\n -webkit-transform: rotate(0);\n transform: rotate(0);\n }\n 100% {\n -webkit-transform: rotate(360deg);\n transform: rotate(360deg);\n }\n }\n @keyframes outer {\n 0% {\n -webkit-transform: rotate(0);\n transform: rotate(0);\n }\n 100% {\n -webkit-transform: rotate(360deg);\n transform: rotate(360deg);\n }\n }\n @-webkit-keyframes inner {\n 0% {\n -webkit-transform: rotate(-100.8deg);\n transform: rotate(-100.8deg);\n }\n 100% {\n -webkit-transform: rotate(0);\n transform: rotate(0);\n }\n }\n @keyframes inner {\n 0% {\n -webkit-transform: rotate(-100.8deg);\n transform: rotate(-100.8deg);\n }\n 100% {\n -webkit-transform: rotate(0);\n transform: rotate(0);\n }\n }\n @-webkit-keyframes arc {\n 0% {\n stroke-dasharray: 1 210.48670779px;\n stroke-dashoffset: 0;\n }\n 40% {\n stroke-dasharray: 151.55042961px, 210.48670779px;\n stroke-dashoffset: 0;\n }\n 100% {\n stroke-dasharray: 1 210.48670779px;\n stroke-dashoffset: -151.55042961px;\n }\n }\n @keyframes arc {\n 0% {\n stroke-dasharray: 1 210.48670779px;\n stroke-dashoffset: 0;\n }\n 40% {\n stroke-dasharray: 151.55042961px, 210.48670779px;\n stroke-dashoffset: 0;\n }\n 100% {\n stroke-dasharray: 1 210.48670779px;\n stroke-dashoffset: -151.55042961px;\n }\n }\n"], ["\n font-size: 0;\n display: inline-block;\n -webkit-animation: outer 6600ms linear infinite;\n animation: outer 6600ms linear infinite;\n & svg {\n -webkit-animation: inner 1320ms linear infinite;\n animation: inner 1320ms linear infinite;\n }\n & svg circle {\n fill: none;\n stroke: #448aff;\n stroke-linecap: square;\n -webkit-animation: arc 1320ms cubic-bezier(0.8, 0, 0.4, 0.8) infinite;\n animation: arc 1320ms cubic-bezier(0.8, 0, 0.4, 0.8) infinite;\n }\n @-webkit-keyframes outer {\n 0% {\n -webkit-transform: rotate(0);\n transform: rotate(0);\n }\n 100% {\n -webkit-transform: rotate(360deg);\n transform: rotate(360deg);\n }\n }\n @keyframes outer {\n 0% {\n -webkit-transform: rotate(0);\n transform: rotate(0);\n }\n 100% {\n -webkit-transform: rotate(360deg);\n transform: rotate(360deg);\n }\n }\n @-webkit-keyframes inner {\n 0% {\n -webkit-transform: rotate(-100.8deg);\n transform: rotate(-100.8deg);\n }\n 100% {\n -webkit-transform: rotate(0);\n transform: rotate(0);\n }\n }\n @keyframes inner {\n 0% {\n -webkit-transform: rotate(-100.8deg);\n transform: rotate(-100.8deg);\n }\n 100% {\n -webkit-transform: rotate(0);\n transform: rotate(0);\n }\n }\n @-webkit-keyframes arc {\n 0% {\n stroke-dasharray: 1 210.48670779px;\n stroke-dashoffset: 0;\n }\n 40% {\n stroke-dasharray: 151.55042961px, 210.48670779px;\n stroke-dashoffset: 0;\n }\n 100% {\n stroke-dasharray: 1 210.48670779px;\n stroke-dashoffset: -151.55042961px;\n }\n }\n @keyframes arc {\n 0% {\n stroke-dasharray: 1 210.48670779px;\n stroke-dashoffset: 0;\n }\n 40% {\n stroke-dasharray: 151.55042961px, 210.48670779px;\n stroke-dashoffset: 0;\n }\n 100% {\n stroke-dasharray: 1 210.48670779px;\n stroke-dashoffset: -151.55042961px;\n }\n }\n"])));
|
|
2987
|
+
var Animate = function () {
|
|
2988
|
+
return (React__default.createElement(Wrapper$3, null,
|
|
2989
|
+
React__default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", version: "1.1", height: "75", width: "75", viewBox: "0 0 75 75" },
|
|
2990
|
+
React__default.createElement("circle", { cx: "37.5", cy: "37.5", r: "33.5", strokeWidth: "2" }))));
|
|
2991
|
+
};
|
|
2992
|
+
var templateObject_1$v;
|
|
2993
|
+
|
|
2980
2994
|
var rotate = keyframes(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n"], ["\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n"])));
|
|
2981
2995
|
var float = keyframes(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n\t0% {\n\t\ttransform: translatey(0px);\n\t}\n\t50% {\n\t\ttransform: translatey(10px);\n\t}\n\t100% {\n\t\ttransform: translatey(0px);\n\t}\n"], ["\n\t0% {\n\t\ttransform: translatey(0px);\n\t}\n\t50% {\n\t\ttransform: translatey(10px);\n\t}\n\t100% {\n\t\ttransform: translatey(0px);\n\t}\n"])));
|
|
2982
2996
|
var Container = styled.div(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
2983
|
-
|
|
2984
|
-
|
|
2997
|
+
styled(Icon)(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n position: absolute;\n top: 0;\n left: 0;\n animation: ", " 2s linear infinite;\n transform: translate3d(0, 0, 0);\n"], ["\n position: absolute;\n top: 0;\n left: 0;\n animation: ", " 2s linear infinite;\n transform: translate3d(0, 0, 0);\n"])), rotate);
|
|
2998
|
+
styled(Icon$1)(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n animation: ", " 6s ease-in-out infinite;\n transform: translate3d(0, 0, 0);\n"], ["\n animation: ", " 6s ease-in-out infinite;\n transform: translate3d(0, 0, 0);\n"])), float);
|
|
2985
2999
|
var Spinner = function (_a) {
|
|
2986
|
-
|
|
3000
|
+
_a.size;
|
|
2987
3001
|
return (React__default.createElement(Container, null,
|
|
2988
|
-
React__default.createElement(
|
|
2989
|
-
React__default.createElement(FloatingPanIcon, { width: size + "px" })));
|
|
3002
|
+
React__default.createElement(Animate, null)));
|
|
2990
3003
|
};
|
|
2991
3004
|
var templateObject_1$u, templateObject_2$k, templateObject_3$8, templateObject_4$6, templateObject_5$3;
|
|
2992
3005
|
|
|
@@ -4741,6 +4754,13 @@ var privacyLinks = [
|
|
|
4741
4754
|
label: "Terms of Use ",
|
|
4742
4755
|
href: "https://venice.finance",
|
|
4743
4756
|
},
|
|
4757
|
+
{
|
|
4758
|
+
label: "|",
|
|
4759
|
+
},
|
|
4760
|
+
{
|
|
4761
|
+
label: "Findora Network ",
|
|
4762
|
+
href: "https://findora.org/",
|
|
4763
|
+
},
|
|
4744
4764
|
];
|
|
4745
4765
|
__spreadArray([], Array(20)).map(function (_, i) { return ({
|
|
4746
4766
|
code: "en" + i,
|
|
@@ -5291,42 +5311,42 @@ var connectors = [
|
|
|
5291
5311
|
connectorId: ConnectorNames.WalletConnect,
|
|
5292
5312
|
priority: 2,
|
|
5293
5313
|
},
|
|
5294
|
-
{
|
|
5295
|
-
|
|
5296
|
-
|
|
5297
|
-
|
|
5298
|
-
|
|
5299
|
-
},
|
|
5300
|
-
{
|
|
5301
|
-
|
|
5302
|
-
|
|
5303
|
-
|
|
5304
|
-
|
|
5305
|
-
},
|
|
5306
|
-
{
|
|
5307
|
-
|
|
5308
|
-
|
|
5309
|
-
|
|
5310
|
-
|
|
5311
|
-
},
|
|
5312
|
-
{
|
|
5313
|
-
|
|
5314
|
-
|
|
5315
|
-
|
|
5316
|
-
|
|
5317
|
-
},
|
|
5318
|
-
{
|
|
5319
|
-
|
|
5320
|
-
|
|
5321
|
-
|
|
5322
|
-
|
|
5323
|
-
},
|
|
5324
|
-
{
|
|
5325
|
-
|
|
5326
|
-
|
|
5327
|
-
|
|
5328
|
-
|
|
5329
|
-
},
|
|
5314
|
+
// {
|
|
5315
|
+
// title: "Trust Wallet",
|
|
5316
|
+
// icon: TrustWallet,
|
|
5317
|
+
// connectorId: ConnectorNames.Injected,
|
|
5318
|
+
// priority: 3,
|
|
5319
|
+
// },
|
|
5320
|
+
// {
|
|
5321
|
+
// title: "MathWallet",
|
|
5322
|
+
// icon: MathWallet,
|
|
5323
|
+
// connectorId: ConnectorNames.Injected,
|
|
5324
|
+
// priority: 999,
|
|
5325
|
+
// },
|
|
5326
|
+
// {
|
|
5327
|
+
// title: "TokenPocket",
|
|
5328
|
+
// icon: TokenPocket,
|
|
5329
|
+
// connectorId: ConnectorNames.Injected,
|
|
5330
|
+
// priority: 999,
|
|
5331
|
+
// },
|
|
5332
|
+
// {
|
|
5333
|
+
// title: "Binance Chain",
|
|
5334
|
+
// icon: BinanceChain,
|
|
5335
|
+
// connectorId: ConnectorNames.BSC,
|
|
5336
|
+
// priority: 999,
|
|
5337
|
+
// },
|
|
5338
|
+
// {
|
|
5339
|
+
// title: "SafePal",
|
|
5340
|
+
// icon: SafePal,
|
|
5341
|
+
// connectorId: ConnectorNames.Injected,
|
|
5342
|
+
// priority: 999,
|
|
5343
|
+
// },
|
|
5344
|
+
// {
|
|
5345
|
+
// title: "Coin98",
|
|
5346
|
+
// icon: Coin98,
|
|
5347
|
+
// connectorId: ConnectorNames.Injected,
|
|
5348
|
+
// priority: 999,
|
|
5349
|
+
// },
|
|
5330
5350
|
];
|
|
5331
5351
|
var connectorLocalStorageKey = "connectorIdv2";
|
|
5332
5352
|
var walletLocalStorageKey = "wallet";
|
|
@@ -5385,7 +5405,7 @@ var getPreferredConfig = function (walletConfig) {
|
|
|
5385
5405
|
};
|
|
5386
5406
|
var ConnectModal = function (_a) {
|
|
5387
5407
|
var login = _a.login, _b = _a.onDismiss, onDismiss = _b === void 0 ? function () { return null; } : _b, _c = _a.displayCount, displayCount = _c === void 0 ? 3 : _c, t = _a.t;
|
|
5388
|
-
var _d = useState(
|
|
5408
|
+
var _d = useState(true), showMore = _d[0], setShowMore = _d[1];
|
|
5389
5409
|
var theme = useTheme();
|
|
5390
5410
|
var sortedConfig = getPreferredConfig(connectors);
|
|
5391
5411
|
var displayListConfig = showMore ? sortedConfig : sortedConfig.slice(0, displayCount);
|