@veniceswap/uikit 0.58.0 → 0.63.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/index.cjs.js CHANGED
@@ -101,7 +101,7 @@ var getThemeValue = function (path, fallback) {
101
101
  };
102
102
  };
103
103
 
104
- var rotate$1 = styled.keyframes(templateObject_1$1a || (templateObject_1$1a = __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"])));
104
+ var rotate$1 = styled.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"])));
105
105
  var spinStyle = styled.css(templateObject_2$z || (templateObject_2$z = __makeTemplateObject(["\n animation: ", " 2s linear infinite;\n"], ["\n animation: ", " 2s linear infinite;\n"])), rotate$1);
106
106
  var Svg = styled__default['default'].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) {
107
107
  var theme = _a.theme, color = _a.color;
@@ -116,7 +116,7 @@ Svg.defaultProps = {
116
116
  xmlns: "http://www.w3.org/2000/svg",
117
117
  spin: false,
118
118
  };
119
- var templateObject_1$1a, templateObject_2$z, templateObject_3$f;
119
+ var templateObject_1$1b, templateObject_2$z, templateObject_3$f;
120
120
 
121
121
  var Icon$2g = function (props) {
122
122
  return (React__default['default'].createElement(Svg, __assign({ viewBox: "0 0 24 24" }, props),
@@ -146,7 +146,7 @@ var getFontSize = function (_a) {
146
146
  var fontSize = _a.fontSize, small = _a.small;
147
147
  return small ? "14px" : fontSize || "16px";
148
148
  };
149
- var Text = styled__default['default'].div(templateObject_1$19 || (templateObject_1$19 = __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 ",
149
+ var Text = styled__default['default'].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 ",
150
150
  "\n\n ", "\n ", "\n ", "\n"])), getColor, getFontSize, function (_a) {
151
151
  var bold = _a.bold;
152
152
  return (bold ? 600 : 400);
@@ -163,13 +163,13 @@ Text.defaultProps = {
163
163
  small: false,
164
164
  ellipsis: false,
165
165
  };
166
- var templateObject_1$19;
166
+ var templateObject_1$1a;
167
167
 
168
- var TooltipText = styled__default['default'](Text)(templateObject_1$18 || (templateObject_1$18 = __makeTemplateObject(["\n text-decoration: ", ";\n text-underline-offset: 0.1em;\n"], ["\n text-decoration: ", ";\n text-underline-offset: 0.1em;\n"])), function (_a) {
168
+ var TooltipText = styled__default['default'](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) {
169
169
  var theme = _a.theme;
170
170
  return "underline dotted " + theme.colors.textSubtle;
171
171
  });
172
- var templateObject_1$18;
172
+ var templateObject_1$19;
173
173
 
174
174
  var getExternalLinkProps = function () { return ({
175
175
  target: "_blank",
@@ -268,7 +268,7 @@ var getOpacity = function (_a) {
268
268
  var _b = _a.$isLoading, $isLoading = _b === void 0 ? false : _b;
269
269
  return $isLoading ? ".5" : "1";
270
270
  };
271
- var StyledButton = styled__default['default'].button(templateObject_1$17 || (templateObject_1$17 = __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 ",
271
+ var StyledButton = styled__default['default'].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 ",
272
272
  "\n ",
273
273
  "\n ", "\n ", "\n"])), getOpacity, getDisabledStyles, styledSystem.variant({
274
274
  prop: "scale",
@@ -276,7 +276,7 @@ var StyledButton = styled__default['default'].button(templateObject_1$17 || (tem
276
276
  }), styledSystem.variant({
277
277
  variants: styleVariants$2,
278
278
  }), styledSystem.layout, styledSystem.space);
279
- var templateObject_1$17;
279
+ var templateObject_1$18;
280
280
 
281
281
  var Button = function (props) {
282
282
  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"]);
@@ -309,11 +309,11 @@ Button.defaultProps = {
309
309
  disabled: false,
310
310
  };
311
311
 
312
- var IconButton = styled__default['default'](Button)(templateObject_1$16 || (templateObject_1$16 = __makeTemplateObject(["\n padding: 0;\n width: ", ";\n"], ["\n padding: 0;\n width: ", ";\n"])), function (_a) {
312
+ var IconButton = styled__default['default'](Button)(templateObject_1$17 || (templateObject_1$17 = __makeTemplateObject(["\n padding: 0;\n width: ", ";\n"], ["\n padding: 0;\n width: ", ";\n"])), function (_a) {
313
313
  var scale = _a.scale;
314
314
  return (scale === "sm" ? "32px" : "48px");
315
315
  });
316
- var templateObject_1$16;
316
+ var templateObject_1$17;
317
317
 
318
318
  var Icon$2c = function (props) { return (React__default['default'].createElement(Svg, __assign({ viewBox: "0 0 24 24" }, props),
319
319
  React__default['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" }),
@@ -1627,11 +1627,11 @@ ExpandableLabel.defaultProps = {
1627
1627
  expanded: false,
1628
1628
  };
1629
1629
 
1630
- var Box = styled__default['default'].div(templateObject_1$15 || (templateObject_1$15 = __makeTemplateObject(["\n ", "\n ", "\n ", "\n ", "\n ", "\n"], ["\n ", "\n ", "\n ", "\n ", "\n ", "\n"])), styledSystem.background, styledSystem.border, styledSystem.layout, styledSystem.position, styledSystem.space);
1631
- var templateObject_1$15;
1630
+ var Box = styled__default['default'].div(templateObject_1$16 || (templateObject_1$16 = __makeTemplateObject(["\n ", "\n ", "\n ", "\n ", "\n ", "\n"], ["\n ", "\n ", "\n ", "\n ", "\n ", "\n"])), styledSystem.background, styledSystem.border, styledSystem.layout, styledSystem.position, styledSystem.space);
1631
+ var templateObject_1$16;
1632
1632
 
1633
- var Flex = styled__default['default'](Box)(templateObject_1$14 || (templateObject_1$14 = __makeTemplateObject(["\n display: flex;\n ", "\n"], ["\n display: flex;\n ", "\n"])), styledSystem.flexbox);
1634
- var templateObject_1$14;
1633
+ var Flex = styled__default['default'](Box)(templateObject_1$15 || (templateObject_1$15 = __makeTemplateObject(["\n display: flex;\n ", "\n"], ["\n display: flex;\n ", "\n"])), styledSystem.flexbox);
1634
+ var templateObject_1$15;
1635
1635
 
1636
1636
  var variants$5 = {
1637
1637
  INFO: "info",
@@ -1668,7 +1668,7 @@ var getIcon = function (variant) {
1668
1668
  return Icon$2d;
1669
1669
  }
1670
1670
  };
1671
- var IconLabel = styled__default['default'].div(templateObject_1$13 || (templateObject_1$13 = __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) {
1671
+ var IconLabel = styled__default['default'].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) {
1672
1672
  var theme = _a.theme;
1673
1673
  return theme.alert.background;
1674
1674
  });
@@ -1695,10 +1695,10 @@ var Alert = function (_a) {
1695
1695
  React__default['default'].createElement(IconButton, { scale: "sm", variant: "text", onClick: onClick },
1696
1696
  React__default['default'].createElement(Icon$1K, { width: "24px", color: "currentColor" }))))));
1697
1697
  };
1698
- var templateObject_1$13, templateObject_2$y, templateObject_3$e, templateObject_4$b;
1698
+ var templateObject_1$14, templateObject_2$y, templateObject_3$e, templateObject_4$b;
1699
1699
 
1700
- var Grid = styled__default['default'](Box)(templateObject_1$12 || (templateObject_1$12 = __makeTemplateObject(["\n display: grid;\n ", "\n ", "\n"], ["\n display: grid;\n ", "\n ", "\n"])), styledSystem.flexbox, styledSystem.grid);
1701
- var templateObject_1$12;
1700
+ var Grid = styled__default['default'](Box)(templateObject_1$13 || (templateObject_1$13 = __makeTemplateObject(["\n display: grid;\n ", "\n ", "\n"], ["\n display: grid;\n ", "\n ", "\n"])), styledSystem.flexbox, styledSystem.grid);
1701
+ var templateObject_1$13;
1702
1702
 
1703
1703
  var scales$7 = {
1704
1704
  SM: "sm",
@@ -1731,7 +1731,7 @@ var getHeight = function (_a) {
1731
1731
  return "40px";
1732
1732
  }
1733
1733
  };
1734
- var Input$1 = styled__default['default'].input(templateObject_1$11 || (templateObject_1$11 = __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) {
1734
+ var Input$1 = styled__default['default'].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) {
1735
1735
  var theme = _a.theme;
1736
1736
  return theme.colors.input;
1737
1737
  }, getBoxShadow, function (_a) {
@@ -1758,9 +1758,9 @@ Input$1.defaultProps = {
1758
1758
  isSuccess: false,
1759
1759
  isWarning: false,
1760
1760
  };
1761
- var templateObject_1$11;
1761
+ var templateObject_1$12;
1762
1762
 
1763
- var SwitchUnitsButton = styled__default['default'](IconButton)(templateObject_1$10 || (templateObject_1$10 = __makeTemplateObject(["\n width: 16px;\n"], ["\n width: 16px;\n"])));
1763
+ var SwitchUnitsButton = styled__default['default'](IconButton)(templateObject_1$11 || (templateObject_1$11 = __makeTemplateObject(["\n width: 16px;\n"], ["\n width: 16px;\n"])));
1764
1764
  var UnitContainer = styled__default['default'](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) {
1765
1765
  var theme = _a.theme;
1766
1766
  return theme.colors.textSubtle;
@@ -1782,7 +1782,7 @@ var StyledInput$1 = styled__default['default'](Input$1)(templateObject_4$a || (t
1782
1782
  var theme = _a.theme;
1783
1783
  return theme.colors.textSubtle;
1784
1784
  });
1785
- var templateObject_1$10, templateObject_2$x, templateObject_3$d, templateObject_4$a;
1785
+ var templateObject_1$11, templateObject_2$x, templateObject_3$d, templateObject_4$a;
1786
1786
 
1787
1787
  var BalanceInput = function (_a) {
1788
1788
  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"]);
@@ -1813,7 +1813,7 @@ var Textfield = function (_a) {
1813
1813
  React__default['default'].createElement(StyledInput$1, __assign({ value: value, onChange: handleOnChange, placeholder: placeholder, textAlign: "left" }, inputProps))));
1814
1814
  };
1815
1815
 
1816
- var Separator = styled__default['default'].div(templateObject_1$$ || (templateObject_1$$ = __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) {
1816
+ var Separator = styled__default['default'].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) {
1817
1817
  var theme = _a.theme;
1818
1818
  return theme.colors.textDisabled;
1819
1819
  }, function (_a) {
@@ -1848,7 +1848,7 @@ var Breadcrumbs = function (_a) {
1848
1848
  var items = insertSeparators(validItems, separator);
1849
1849
  return (React__default['default'].createElement(StyledBreadcrumbs, null, items.map(function (item, index) { return (React__default['default'].createElement("li", { key: "child-" + index }, item)); })));
1850
1850
  };
1851
- var templateObject_1$$, templateObject_2$w;
1851
+ var templateObject_1$10, templateObject_2$w;
1852
1852
 
1853
1853
  var getBackgroundColor = function (_a) {
1854
1854
  var theme = _a.theme, variant = _a.variant;
@@ -1858,7 +1858,7 @@ var getBorderColor$1 = function (_a) {
1858
1858
  var theme = _a.theme, variant = _a.variant;
1859
1859
  return theme.colors[variant === variants$6.SUBTLE ? "inputSecondary" : "disabled"];
1860
1860
  };
1861
- var StyledButtonMenu = styled__default['default'].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 ",
1861
+ var StyledButtonMenu = styled__default['default'].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 ",
1862
1862
  "\n ", "\n"])), getBackgroundColor, function (_a) {
1863
1863
  var fullWidth = _a.fullWidth;
1864
1864
  return (fullWidth ? "flex" : "inline-flex");
@@ -1887,9 +1887,9 @@ var ButtonMenu$1 = function (_a) {
1887
1887
  });
1888
1888
  })));
1889
1889
  };
1890
- var templateObject_1$_;
1890
+ var templateObject_1$$;
1891
1891
 
1892
- var InactiveButton = styled__default['default'](Button)(templateObject_1$Z || (templateObject_1$Z = __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) {
1892
+ var InactiveButton = styled__default['default'](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) {
1893
1893
  var theme = _a.theme, variant = _a.variant;
1894
1894
  return (variant === variants$6.PRIMARY ? theme.colors.primary : theme.colors.textSubtle);
1895
1895
  });
@@ -1900,9 +1900,9 @@ var ButtonMenuItem = function (_a) {
1900
1900
  }
1901
1901
  return React__default['default'].createElement(Button, __assign({ as: as, variant: variant }, props));
1902
1902
  };
1903
- var templateObject_1$Z;
1903
+ var templateObject_1$_;
1904
1904
 
1905
- var PromotedGradient = styled.keyframes(templateObject_1$Y || (templateObject_1$Y = __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"])));
1905
+ var PromotedGradient = styled.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"])));
1906
1906
  /**
1907
1907
  * Priority: Warning --> Success --> Active
1908
1908
  */
@@ -1949,7 +1949,7 @@ StyledCard.defaultProps = {
1949
1949
  isWarning: false,
1950
1950
  isDisabled: false,
1951
1951
  };
1952
- var templateObject_1$Y, templateObject_2$v, templateObject_3$c, templateObject_4$9;
1952
+ var templateObject_1$Z, templateObject_2$v, templateObject_3$c, templateObject_4$9;
1953
1953
 
1954
1954
  var Card = function (_a) {
1955
1955
  var ribbon = _a.ribbon, children = _a.children, background = _a.background, props = __rest(_a, ["ribbon", "children", "background"]);
@@ -1959,13 +1959,13 @@ var Card = function (_a) {
1959
1959
  children)));
1960
1960
  };
1961
1961
 
1962
- var CardBody = styled__default['default'].div(templateObject_1$X || (templateObject_1$X = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), styledSystem.space);
1962
+ var CardBody = styled__default['default'].div(templateObject_1$Y || (templateObject_1$Y = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), styledSystem.space);
1963
1963
  CardBody.defaultProps = {
1964
1964
  p: "24px",
1965
1965
  };
1966
- var templateObject_1$X;
1966
+ var templateObject_1$Y;
1967
1967
 
1968
- var CardHeader = styled__default['default'].div(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n background: ", ";\n border-radius: ", ";\n ", "\n"], ["\n background: ", ";\n border-radius: ", ";\n ", "\n"])), function (_a) {
1968
+ var CardHeader = styled__default['default'].div(templateObject_1$X || (templateObject_1$X = __makeTemplateObject(["\n background: ", ";\n border-radius: ", ";\n ", "\n"], ["\n background: ", ";\n border-radius: ", ";\n ", "\n"])), function (_a) {
1969
1969
  var theme = _a.theme, _b = _a.variant, variant = _b === void 0 ? "default" : _b;
1970
1970
  return theme.card.cardHeaderBackground[variant];
1971
1971
  }, function (_a) {
@@ -1975,18 +1975,18 @@ var CardHeader = styled__default['default'].div(templateObject_1$W || (templateO
1975
1975
  CardHeader.defaultProps = {
1976
1976
  p: "24px",
1977
1977
  };
1978
- var templateObject_1$W;
1978
+ var templateObject_1$X;
1979
1979
 
1980
- var CardFooter = styled__default['default'].div(templateObject_1$V || (templateObject_1$V = __makeTemplateObject(["\n border-top: 1px solid ", ";\n ", "\n"], ["\n border-top: 1px solid ", ";\n ", "\n"])), function (_a) {
1980
+ var CardFooter = styled__default['default'].div(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n border-top: 1px solid ", ";\n ", "\n"], ["\n border-top: 1px solid ", ";\n ", "\n"])), function (_a) {
1981
1981
  var theme = _a.theme;
1982
1982
  return theme.colors.cardBorder;
1983
1983
  }, styledSystem.space);
1984
1984
  CardFooter.defaultProps = {
1985
1985
  p: "24px",
1986
1986
  };
1987
- var templateObject_1$V;
1987
+ var templateObject_1$W;
1988
1988
 
1989
- var StyledCardRibbon = styled__default['default'].div(templateObject_1$U || (templateObject_1$U = __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: ",
1989
+ var StyledCardRibbon = styled__default['default'].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: ",
1990
1990
  ";\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) {
1991
1991
  var _b = _a.variantColor, variantColor = _b === void 0 ? "secondary" : _b, theme = _a.theme;
1992
1992
  return theme.colors[variantColor];
@@ -2010,7 +2010,7 @@ var CardRibbon = function (_a) {
2010
2010
  CardRibbon.defaultProps = {
2011
2011
  ribbonPosition: "right",
2012
2012
  };
2013
- var templateObject_1$U;
2013
+ var templateObject_1$V;
2014
2014
 
2015
2015
  var animation = {
2016
2016
  WAVES: "waves",
@@ -2021,7 +2021,7 @@ var variant = {
2021
2021
  CIRCLE: "circle",
2022
2022
  };
2023
2023
 
2024
- var waves = styled.keyframes(templateObject_1$T || (templateObject_1$T = __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"])));
2024
+ var waves = styled.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"])));
2025
2025
  var pulse = styled.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"])));
2026
2026
  var Root = styled__default['default'].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) {
2027
2027
  var theme = _a.theme;
@@ -2039,9 +2039,9 @@ var Skeleton = function (_a) {
2039
2039
  }
2040
2040
  return React__default['default'].createElement(Pulse, __assign({ variant: variant$1 }, props));
2041
2041
  };
2042
- var templateObject_1$T, templateObject_2$u, templateObject_3$b, templateObject_4$8, templateObject_5$5;
2042
+ var templateObject_1$U, templateObject_2$u, templateObject_3$b, templateObject_4$8, templateObject_5$5;
2043
2043
 
2044
- var PriceLink = styled__default['default'].a(templateObject_1$S || (templateObject_1$S = __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"])));
2044
+ var PriceLink = styled__default['default'].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"])));
2045
2045
  var CakePrice = function (_a) {
2046
2046
  var cakePriceUsd = _a.cakePriceUsd, _b = _a.color, color = _b === void 0 ? "textSubtle" : _b;
2047
2047
  return cakePriceUsd ? (React__default['default'].createElement(PriceLink, { href: "https://pancakeswap.finance/swap?outputCurrency=0x0e09fabb73bd3ade0a17ecc321fd13a19e81ce82", target: "_blank" },
@@ -2049,7 +2049,7 @@ var CakePrice = function (_a) {
2049
2049
  React__default['default'].createElement(Text, { color: color, bold: true }, "$" + cakePriceUsd.toFixed(3)))) : (React__default['default'].createElement(Skeleton, { width: 80, height: 24 }));
2050
2050
  };
2051
2051
  var CakePrice$1 = React__default['default'].memo(CakePrice);
2052
- var templateObject_1$S;
2052
+ var templateObject_1$T;
2053
2053
 
2054
2054
  var scales$6 = {
2055
2055
  SM: "sm",
@@ -2066,7 +2066,7 @@ var getScale$3 = function (_a) {
2066
2066
  return "32px";
2067
2067
  }
2068
2068
  };
2069
- var Checkbox = styled__default['default'].input.attrs({ type: "checkbox" })(templateObject_1$R || (templateObject_1$R = __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) {
2069
+ var Checkbox = styled__default['default'].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) {
2070
2070
  var theme = _a.theme;
2071
2071
  return theme.colors.input;
2072
2072
  }, function (_a) {
@@ -2085,7 +2085,7 @@ var Checkbox = styled__default['default'].input.attrs({ type: "checkbox" })(temp
2085
2085
  Checkbox.defaultProps = {
2086
2086
  scale: scales$6.MD,
2087
2087
  };
2088
- var templateObject_1$R;
2088
+ var templateObject_1$S;
2089
2089
 
2090
2090
  var getLeft = function (_a) {
2091
2091
  var position = _a.position;
@@ -2101,7 +2101,7 @@ var getBottom = function (_a) {
2101
2101
  }
2102
2102
  return "auto";
2103
2103
  };
2104
- var DropdownContent = styled__default['default'].div(templateObject_1$Q || (templateObject_1$Q = __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) {
2104
+ var DropdownContent = styled__default['default'].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) {
2105
2105
  var theme = _a.theme;
2106
2106
  return theme.nav.background;
2107
2107
  }, function (_a) {
@@ -2124,9 +2124,9 @@ var Dropdown = function (_a) {
2124
2124
  Dropdown.defaultProps = {
2125
2125
  position: "bottom",
2126
2126
  };
2127
- var templateObject_1$Q, templateObject_2$t;
2127
+ var templateObject_1$R, templateObject_2$t;
2128
2128
 
2129
- var bunnyFall = styled.keyframes(templateObject_1$P || (templateObject_1$P = __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"])));
2129
+ var bunnyFall = styled.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"])));
2130
2130
  var Bunny = styled__default['default'].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) {
2131
2131
  var position = _a.position;
2132
2132
  return position + "vw";
@@ -2164,7 +2164,7 @@ var FallingBunnies = function (_a) {
2164
2164
  React__default['default'].createElement(Icon$1p, { width: size, height: size }))); });
2165
2165
  return React__default['default'].createElement("div", null, bunnies);
2166
2166
  };
2167
- var templateObject_1$P, templateObject_2$s;
2167
+ var templateObject_1$Q, templateObject_2$s;
2168
2168
 
2169
2169
  var tags = {
2170
2170
  H1: "h1",
@@ -2200,7 +2200,7 @@ var style = (_a$3 = {},
2200
2200
  fontSizeLg: "64px",
2201
2201
  },
2202
2202
  _a$3);
2203
- var Heading = styled__default['default'](Text).attrs({ bold: true })(templateObject_1$O || (templateObject_1$O = __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) {
2203
+ var Heading = styled__default['default'](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) {
2204
2204
  var scale = _a.scale;
2205
2205
  return style[scale || scales$5.MD].fontSize;
2206
2206
  }, function (_a) {
@@ -2213,7 +2213,7 @@ var Heading = styled__default['default'](Text).attrs({ bold: true })(templateObj
2213
2213
  Heading.defaultProps = {
2214
2214
  as: tags.H2,
2215
2215
  };
2216
- var templateObject_1$O;
2216
+ var templateObject_1$P;
2217
2217
 
2218
2218
  var observerOptions = {
2219
2219
  root: null,
@@ -2221,7 +2221,7 @@ var observerOptions = {
2221
2221
  threshold: 0,
2222
2222
  };
2223
2223
 
2224
- var StyledWrapper = styled__default['default'].div(templateObject_1$N || (templateObject_1$N = __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) {
2224
+ var StyledWrapper = styled__default['default'].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) {
2225
2225
  var $height = _a.$height;
2226
2226
  return $height;
2227
2227
  }, function (_a) {
@@ -2231,16 +2231,16 @@ var StyledWrapper = styled__default['default'].div(templateObject_1$N || (templa
2231
2231
  var $width = _a.$width, $height = _a.$height;
2232
2232
  return ($height / $width) * 100;
2233
2233
  }, styledSystem.space);
2234
- var Wrapper$3 = React.forwardRef(function (_a, ref) {
2234
+ var Wrapper$4 = React.forwardRef(function (_a, ref) {
2235
2235
  var width = _a.width, height = _a.height, props = __rest(_a, ["width", "height"]);
2236
2236
  return React__default['default'].createElement(StyledWrapper, __assign({ ref: ref, "$width": width, "$height": height }, props));
2237
2237
  });
2238
- var templateObject_1$N;
2238
+ var templateObject_1$O;
2239
2239
 
2240
- var Placeholder = styled__default['default'].div(templateObject_1$M || (templateObject_1$M = __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"])));
2241
- var templateObject_1$M;
2240
+ var Placeholder = styled__default['default'].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"])));
2241
+ var templateObject_1$N;
2242
2242
 
2243
- var StyledBackgroundImage = styled__default['default'](Wrapper$3)(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n background-repeat: no-repeat;\n background-size: contain;\n"], ["\n background-repeat: no-repeat;\n background-size: contain;\n"])));
2243
+ var StyledBackgroundImage = styled__default['default'](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"])));
2244
2244
  var BackgroundImage = function (_a) {
2245
2245
  var loadingPlaceholder = _a.loadingPlaceholder, src = _a.src, width = _a.width, height = _a.height, props = __rest(_a, ["loadingPlaceholder", "src", "width", "height"]);
2246
2246
  var _b = React.useState(false), isLoaded = _b[0], setIsLoaded = _b[1];
@@ -2277,9 +2277,9 @@ var BackgroundImage = function (_a) {
2277
2277
  }, [src, setIsLoaded]);
2278
2278
  return (React__default['default'].createElement(StyledBackgroundImage, __assign({ ref: ref, width: width, height: height }, props), !isLoaded && placeholder));
2279
2279
  };
2280
- var templateObject_1$L;
2280
+ var templateObject_1$M;
2281
2281
 
2282
- var StyledImage = styled__default['default'].img(templateObject_1$K || (templateObject_1$K = __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"])));
2282
+ var StyledImage = styled__default['default'].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"])));
2283
2283
  var Image = function (_a) {
2284
2284
  var src = _a.src, alt = _a.alt, width = _a.width, height = _a.height, props = __rest(_a, ["src", "alt", "width", "height"]);
2285
2285
  var imgRef = React.useRef(null);
@@ -2304,12 +2304,12 @@ var Image = function (_a) {
2304
2304
  }
2305
2305
  };
2306
2306
  }, [src]);
2307
- return (React__default['default'].createElement(Wrapper$3, __assign({ ref: imgRef, height: height, width: width }, props), isLoaded ? React__default['default'].createElement(StyledImage, { src: src, alt: alt }) : React__default['default'].createElement(Placeholder, null)));
2307
+ return (React__default['default'].createElement(Wrapper$4, __assign({ ref: imgRef, height: height, width: width }, props), isLoaded ? React__default['default'].createElement(StyledImage, { src: src, alt: alt }) : React__default['default'].createElement(Placeholder, null)));
2308
2308
  };
2309
- var templateObject_1$K;
2309
+ var templateObject_1$L;
2310
2310
 
2311
- var TokenImage = styled__default['default'](Image)(templateObject_1$J || (templateObject_1$J = __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"])));
2312
- var templateObject_1$J;
2311
+ var TokenImage = styled__default['default'](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"])));
2312
+ var templateObject_1$K;
2313
2313
 
2314
2314
  var variants$4 = {
2315
2315
  DEFAULT: "default",
@@ -2317,7 +2317,7 @@ var variants$4 = {
2317
2317
  };
2318
2318
 
2319
2319
  var _a$2, _b$2;
2320
- var StyledPrimaryImage = styled__default['default'](TokenImage)(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n position: absolute;\n width: ", "; // 92, 82 are arbitrary numbers to fit the variant\n\n ", "\n"], ["\n position: absolute;\n width: ",
2320
+ var StyledPrimaryImage = styled__default['default'](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: ",
2321
2321
  "; // 92, 82 are arbitrary numbers to fit the variant\n\n ",
2322
2322
  "\n"])), function (_a) {
2323
2323
  var variant = _a.variant;
@@ -2359,20 +2359,20 @@ var StyledSecondaryImage = styled__default['default'](TokenImage)(templateObject
2359
2359
  },
2360
2360
  _b$2),
2361
2361
  }));
2362
- var templateObject_1$I, templateObject_2$r;
2362
+ var templateObject_1$J, templateObject_2$r;
2363
2363
 
2364
2364
  var TokenPairImage = function (_a) {
2365
2365
  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"]);
2366
2366
  var secondaryImageSize = Math.floor(width / 2);
2367
- return (React__default['default'].createElement(Wrapper$3, __assign({ position: "relative", width: width, height: height }, props),
2367
+ return (React__default['default'].createElement(Wrapper$4, __assign({ position: "relative", width: width, height: height }, props),
2368
2368
  React__default['default'].createElement(StyledPrimaryImage, __assign({ variant: variant, src: primarySrc, width: width, height: height }, primaryImageProps)),
2369
2369
  React__default['default'].createElement(StyledSecondaryImage, __assign({ variant: variant, src: secondarySrc, width: secondaryImageSize, height: secondaryImageSize }, secondaryImageProps))));
2370
2370
  };
2371
2371
 
2372
- var StyledProfileAvatar = styled__default['default'](BackgroundImage)(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n border-radius: 50%;\n"], ["\n border-radius: 50%;\n"])));
2372
+ var StyledProfileAvatar = styled__default['default'](BackgroundImage)(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n border-radius: 50%;\n"], ["\n border-radius: 50%;\n"])));
2373
2373
  var StyledBunnyPlaceholder = styled__default['default'](Icon$1X)(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n height: 100%;\n width: 100%;\n"], ["\n height: 100%;\n width: 100%;\n"])));
2374
2374
  var ProfileAvatar = function (props) { return (React__default['default'].createElement(StyledProfileAvatar, __assign({ loadingPlaceholder: React__default['default'].createElement(StyledBunnyPlaceholder, null) }, props))); };
2375
- var templateObject_1$H, templateObject_2$q;
2375
+ var templateObject_1$I, templateObject_2$q;
2376
2376
 
2377
2377
  var getPadding$1 = function (scale, hasIcon) {
2378
2378
  if (!hasIcon) {
@@ -2388,7 +2388,7 @@ var getPadding$1 = function (scale, hasIcon) {
2388
2388
  return "48px";
2389
2389
  }
2390
2390
  };
2391
- var StyledInputGroup = styled__default['default'](Box)(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n ", " {\n padding-left: ", ";\n padding-right: ", ";\n }\n"], ["\n ", " {\n padding-left: ", ";\n padding-right: ", ";\n }\n"])), Input$1, function (_a) {
2391
+ var StyledInputGroup = styled__default['default'](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) {
2392
2392
  var hasStartIcon = _a.hasStartIcon, scale = _a.scale;
2393
2393
  return getPadding$1(scale, hasStartIcon);
2394
2394
  }, function (_a) {
@@ -2409,9 +2409,9 @@ var InputGroup = function (_a) {
2409
2409
  React.cloneElement(children, { scale: scale }),
2410
2410
  endIcon && (React__default['default'].createElement(InputIcon, { scale: scale, isEndIcon: true }, endIcon))));
2411
2411
  };
2412
- var templateObject_1$G, templateObject_2$p;
2412
+ var templateObject_1$H, templateObject_2$p;
2413
2413
 
2414
- var GridLayout$1 = styled__default['default'](Grid)(templateObject_1$F || (templateObject_1$F = __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) {
2414
+ var GridLayout$1 = styled__default['default'](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) {
2415
2415
  var theme = _a.theme;
2416
2416
  return theme.mediaQueries.sm;
2417
2417
  }, function (_a) {
@@ -2421,15 +2421,15 @@ var GridLayout$1 = styled__default['default'](Grid)(templateObject_1$F || (templ
2421
2421
  var theme = _a.theme;
2422
2422
  return theme.mediaQueries.lg;
2423
2423
  });
2424
- var templateObject_1$F;
2424
+ var templateObject_1$G;
2425
2425
 
2426
- var GridLayout = styled__default['default'](GridLayout$1)(templateObject_1$E || (templateObject_1$E = __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) {
2426
+ var GridLayout = styled__default['default'](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) {
2427
2427
  var theme = _a.theme;
2428
2428
  return theme.mediaQueries.sm;
2429
2429
  });
2430
- var templateObject_1$E;
2430
+ var templateObject_1$F;
2431
2431
 
2432
- var StyledLink$1 = styled__default['default'](Text)(templateObject_1$D || (templateObject_1$D = __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"])));
2432
+ var StyledLink$1 = styled__default['default'](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"])));
2433
2433
  var Link = function (_a) {
2434
2434
  var external = _a.external, props = __rest(_a, ["external"]);
2435
2435
  var internalProps = external ? getExternalLinkProps() : {};
@@ -2438,7 +2438,7 @@ var Link = function (_a) {
2438
2438
  Link.defaultProps = {
2439
2439
  color: "primary",
2440
2440
  };
2441
- var templateObject_1$D;
2441
+ var templateObject_1$E;
2442
2442
 
2443
2443
  var LinkExternal = function (_a) {
2444
2444
  var children = _a.children, props = __rest(_a, ["children"]);
@@ -2462,7 +2462,7 @@ var Icons$2 = {
2462
2462
  warning: Icon$n,
2463
2463
  danger: Icon$2f,
2464
2464
  };
2465
- var MessageContainer = styled__default['default'].div(templateObject_1$C || (templateObject_1$C = __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 ",
2465
+ var MessageContainer = styled__default['default'].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 ",
2466
2466
  "\n"])), styledSystem.space, styledSystem.variant({
2467
2467
  variants: variants$3,
2468
2468
  }));
@@ -2473,9 +2473,9 @@ var Message = function (_a) {
2473
2473
  React__default['default'].createElement(Box, { mr: "12px" }, icon !== null && icon !== void 0 ? icon : React__default['default'].createElement(Icon, { color: variants$3[variant].borderColor, width: "24px" })),
2474
2474
  children));
2475
2475
  };
2476
- var templateObject_1$C;
2476
+ var templateObject_1$D;
2477
2477
 
2478
- var NotificationDotRoot = styled__default['default'].span(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n display: inline-flex;\n position: relative;\n"], ["\n display: inline-flex;\n position: relative;\n"])));
2478
+ var NotificationDotRoot = styled__default['default'].span(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n display: inline-flex;\n position: relative;\n"], ["\n display: inline-flex;\n position: relative;\n"])));
2479
2479
  var Dot = styled__default['default'].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) {
2480
2480
  var show = _a.show;
2481
2481
  return (show ? "inline-flex" : "none");
@@ -2492,9 +2492,9 @@ var NotificationDot = function (_a) {
2492
2492
  React.Children.map(children, function (child) { return React.cloneElement(child, props); }),
2493
2493
  React__default['default'].createElement(Dot, { show: show, color: color })));
2494
2494
  };
2495
- var templateObject_1$B, templateObject_2$o;
2495
+ var templateObject_1$C, templateObject_2$o;
2496
2496
 
2497
- var Overlay = styled__default['default'].div.attrs({ role: "presentation" })(templateObject_1$A || (templateObject_1$A = __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) {
2497
+ var Overlay = styled__default['default'].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) {
2498
2498
  var theme = _a.theme;
2499
2499
  return theme.colors.overlay;
2500
2500
  }, function (_a) {
@@ -2511,7 +2511,7 @@ Overlay.defaultProps = {
2511
2511
  show: false,
2512
2512
  zIndex: 10,
2513
2513
  };
2514
- var templateObject_1$A;
2514
+ var templateObject_1$B;
2515
2515
 
2516
2516
  var scales$4 = {
2517
2517
  SM: "sm",
@@ -2584,7 +2584,7 @@ var getScale$2 = function (property) {
2584
2584
  return scaleKeyValues$1[scale][property];
2585
2585
  };
2586
2586
  };
2587
- var PancakeStack = styled__default['default'].div(templateObject_1$z || (templateObject_1$z = __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) {
2587
+ var PancakeStack = styled__default['default'].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) {
2588
2588
  var theme = _a.theme;
2589
2589
  return theme.pancakeToggle.handleBackground;
2590
2590
  }, getScale$2("pancakeThickness"), getScale$2("pancakeThickness"), function (_a) {
@@ -2602,7 +2602,7 @@ var PancakeLabel = styled__default['default'].label(templateObject_3$a || (templ
2602
2602
  var theme = _a.theme;
2603
2603
  return theme.shadows.inset;
2604
2604
  });
2605
- var templateObject_1$z, templateObject_2$n, templateObject_3$a;
2605
+ var templateObject_1$A, templateObject_2$n, templateObject_3$a;
2606
2606
 
2607
2607
  var PancakeToggle = function (_a) {
2608
2608
  var checked = _a.checked, _b = _a.scale, scale = _b === void 0 ? scales$4.LG : _b, props = __rest(_a, ["checked", "scale"]);
@@ -2814,7 +2814,7 @@ var styleScales = (_b$1 = {},
2814
2814
  },
2815
2815
  _b$1);
2816
2816
 
2817
- var Bar = styled__default['default'].div(templateObject_1$y || (templateObject_1$y = __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: ",
2817
+ var Bar = styled__default['default'].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: ",
2818
2818
  ";\n height: 100%;\n transition: width 200ms ease;\n"])), function (_a) {
2819
2819
  var theme = _a.theme, $useDark = _a.$useDark, primary = _a.primary;
2820
2820
  if ($useDark)
@@ -2844,10 +2844,10 @@ var StyledProgress = styled__default['default'].div(templateObject_2$m || (templ
2844
2844
  prop: "scale",
2845
2845
  variants: styleScales,
2846
2846
  }), styledSystem.space);
2847
- var templateObject_1$y, templateObject_2$m;
2847
+ var templateObject_1$z, templateObject_2$m;
2848
2848
 
2849
- var ProgressBunnyWrapper = styled__default['default'].div(templateObject_1$x || (templateObject_1$x = __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"])));
2850
- var templateObject_1$x;
2849
+ var ProgressBunnyWrapper = styled__default['default'].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"])));
2850
+ var templateObject_1$y;
2851
2851
 
2852
2852
  var stepGuard = function (step) {
2853
2853
  if (step < 0) {
@@ -2892,7 +2892,7 @@ var getCheckedScale = function (_a) {
2892
2892
  return "20px";
2893
2893
  }
2894
2894
  };
2895
- var Radio = styled__default['default'].input.attrs({ type: "radio" })(templateObject_1$w || (templateObject_1$w = __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) {
2895
+ var Radio = styled__default['default'].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) {
2896
2896
  var theme = _a.theme;
2897
2897
  return theme.colors.input;
2898
2898
  }, function (_a) {
@@ -2915,7 +2915,7 @@ Radio.defaultProps = {
2915
2915
  scale: scales$2.MD,
2916
2916
  m: 0,
2917
2917
  };
2918
- var templateObject_1$w;
2918
+ var templateObject_1$x;
2919
2919
 
2920
2920
  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";
2921
2921
 
@@ -2931,7 +2931,7 @@ var getBaseThumbStyles = function (_a) {
2931
2931
  var isMax = _a.isMax, disabled = _a.disabled;
2932
2932
  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";
2933
2933
  };
2934
- var SliderLabelContainer = styled__default['default'].div(templateObject_1$v || (templateObject_1$v = __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"])));
2934
+ var SliderLabelContainer = styled__default['default'].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"])));
2935
2935
  var SliderLabel = styled__default['default'](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) {
2936
2936
  var progress = _a.progress;
2937
2937
  return progress;
@@ -2953,7 +2953,7 @@ var BarProgress = styled__default['default'].div(templateObject_7$2 || (template
2953
2953
  var disabled = _a.disabled;
2954
2954
  return (disabled ? "grayscale(100%)" : "none");
2955
2955
  });
2956
- var templateObject_1$v, templateObject_2$l, templateObject_3$9, templateObject_4$7, templateObject_5$4, templateObject_6$2, templateObject_7$2;
2956
+ var templateObject_1$w, templateObject_2$l, templateObject_3$9, templateObject_4$7, templateObject_5$4, templateObject_6$2, templateObject_7$2;
2957
2957
 
2958
2958
  var Slider = function (_a) {
2959
2959
  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"]);
@@ -3011,16 +3011,23 @@ var Icon = function (props) {
3011
3011
  React__default['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" }))));
3012
3012
  };
3013
3013
 
3014
+ var Wrapper$3 = styled__default['default'].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"])));
3015
+ var Animate = function () {
3016
+ return (React__default['default'].createElement(Wrapper$3, null,
3017
+ React__default['default'].createElement("svg", { xmlns: "http://www.w3.org/2000/svg", version: "1.1", height: "75", width: "75", viewBox: "0 0 75 75" },
3018
+ React__default['default'].createElement("circle", { cx: "37.5", cy: "37.5", r: "33.5", strokeWidth: "2" }))));
3019
+ };
3020
+ var templateObject_1$v;
3021
+
3014
3022
  var rotate = styled.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"])));
3015
3023
  var float = styled.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"])));
3016
3024
  var Container = styled__default['default'].div(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
3017
- var RotatingPancakeIcon = styled__default['default'](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);
3018
- var FloatingPanIcon = styled__default['default'](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);
3025
+ styled__default['default'](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);
3026
+ styled__default['default'](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);
3019
3027
  var Spinner = function (_a) {
3020
- var _b = _a.size, size = _b === void 0 ? 128 : _b;
3028
+ _a.size;
3021
3029
  return (React__default['default'].createElement(Container, null,
3022
- React__default['default'].createElement(RotatingPancakeIcon, { width: size * 0.5 + "px" }),
3023
- React__default['default'].createElement(FloatingPanIcon, { width: size + "px" })));
3030
+ React__default['default'].createElement(Animate, null)));
3024
3031
  };
3025
3032
  var templateObject_1$u, templateObject_2$k, templateObject_3$8, templateObject_4$6, templateObject_5$3;
3026
3033
 
@@ -4744,16 +4751,7 @@ var socials = [
4744
4751
  {
4745
4752
  label: "Telegram",
4746
4753
  icon: "Telegram",
4747
- items: [
4748
- {
4749
- label: "English",
4750
- href: "https://t.me/venicefinance",
4751
- },
4752
- {
4753
- label: "中文",
4754
- href: "https://t.me/venicefinance",
4755
- },
4756
- ],
4754
+ href: "https://t.me/venicefinance",
4757
4755
  },
4758
4756
  {
4759
4757
  label: "Discord",
@@ -4766,24 +4764,31 @@ var privacyLinks = [
4766
4764
  label: "© 2021 Venice.",
4767
4765
  href: "",
4768
4766
  },
4769
- // {
4770
- // label: "Privacy",
4771
- // href: "https://venice.finance",
4772
- // },
4773
- // {
4774
- // label: "|",
4775
- // },
4776
- // {
4777
- // label: "Policy",
4778
- // href: "https://venice.finance",
4779
- // },
4780
- // {
4781
- // label: "|",
4782
- // },
4783
- // {
4784
- // label: "Terms of Use ",
4785
- // href: "https://venice.finance",
4786
- // },
4767
+ {
4768
+ label: "Privacy",
4769
+ href: "https://venice.finance",
4770
+ },
4771
+ {
4772
+ label: "|",
4773
+ },
4774
+ {
4775
+ label: "Policy",
4776
+ href: "https://venice.finance",
4777
+ },
4778
+ {
4779
+ label: "|",
4780
+ },
4781
+ {
4782
+ label: "Terms of Use ",
4783
+ href: "https://venice.finance",
4784
+ },
4785
+ {
4786
+ label: "|",
4787
+ },
4788
+ {
4789
+ label: "Findora Network ",
4790
+ href: "https://findora.org/",
4791
+ },
4787
4792
  ];
4788
4793
  __spreadArray([], Array(20)).map(function (_, i) { return ({
4789
4794
  code: "en" + i,
@@ -4801,9 +4806,17 @@ var SocialLinks = function (_a) {
4801
4806
  style: { cursor: "pointer" },
4802
4807
  };
4803
4808
  var mr = index < socials.length - 1 ? "24px" : 0;
4804
- if (social.items) {
4805
- return (React__default['default'].createElement(Dropdown, { key: social.label, position: "top", target: React__default['default'].createElement(IconComponent, __assign({}, iconProps, { mr: mr })) }, social.items.map(function (item) { return (React__default['default'].createElement(Link, { external: true, key: item.label, href: item.href, "aria-label": item.label, color: "textSubtle" }, item.label)); })));
4806
- }
4809
+ // if (social.items) {
4810
+ // return (
4811
+ // <Dropdown key={social.label} position="top" target={<IconComponent {...iconProps} mr={mr} />}>
4812
+ // {social.items.map((item) => (
4813
+ // <Link external key={item.label} href={item.href} aria-label={item.label} color="textSubtle">
4814
+ // {item.label}
4815
+ // </Link>
4816
+ // ))}
4817
+ // </Dropdown>
4818
+ // );
4819
+ // }
4807
4820
  return (React__default['default'].createElement(Link, { external: true, key: social.label, href: social.href, "aria-label": social.label, mr: mr },
4808
4821
  React__default['default'].createElement(IconComponent, __assign({}, iconProps))));
4809
4822
  })));
@@ -4834,7 +4847,7 @@ var FooterMenuLinks = function (_a) {
4834
4847
  };
4835
4848
  var FooterMenuLinks$1 = React__default['default'].memo(FooterMenuLinks, function () { return true; });
4836
4849
 
4837
- var StyledFooter = styled__default['default'](Flex)(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n background: ", ";\n"], ["\n background: ", ";\n"])), darkColors.backgroundAlt);
4850
+ var StyledFooter = styled__default['default'](Flex)(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n background: ", ";\n padding-bottom: 0;\n padding-top: 0;\n"], ["\n background: ", ";\n padding-bottom: 0;\n padding-top: 0;\n"])), darkColors.backgroundAlt);
4838
4851
  styled__default['default'].ul(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n list-style: none;\n margin-bottom: 40px;\n\n ", " {\n margin-bottom: 0px;\n }\n"], ["\n list-style: none;\n margin-bottom: 40px;\n\n ", " {\n margin-bottom: 0px;\n }\n"])), function (_a) {
4839
4852
  var theme = _a.theme;
4840
4853
  return theme.mediaQueries.md;
@@ -4847,25 +4860,25 @@ var StyledToolsContainer = styled__default['default'](Flex)(templateObject_5 ||
4847
4860
  });
4848
4861
  var StyledSocialLinks = styled__default['default'](SocialLinks$1)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n border-bottom: 1px solid ", ";\n"], ["\n border-bottom: 1px solid ", ";\n"])), darkColors.cardBorder);
4849
4862
  var StyledPrivacyLinks = styled__default['default'](PrivacyLinks$1)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n border-bottom: 1px solid ", ";\n"], ["\n border-bottom: 1px solid ", ";\n"])), darkColors.cardBorder);
4850
- var StyledFooterMenuLinks = styled__default['default'](FooterMenuLinks$1)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n border: none;\n"], ["\n border: none;\n"])));
4863
+ var StyledFooterMenuLinks = styled__default['default'](FooterMenuLinks$1)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n border: none;\n padding: 0;\n margin: 0;\n"], ["\n border: none;\n padding: 0;\n margin: 0;\n"])));
4851
4864
  styled__default['default'].span(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), darkColors.text);
4852
4865
  var templateObject_1$a, templateObject_2$6, templateObject_3$2, templateObject_4$1, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
4853
4866
 
4854
4867
  var MenuItem = function (_a) {
4855
4868
  var items = _a.items; _a.isDark; _a.toggleTheme; _a.currentLang; _a.langs; _a.setLang; _a.cakePriceUsd; _a.buyCakeLabel; var props = __rest(_a, ["items", "isDark", "toggleTheme", "currentLang", "langs", "setLang", "cakePriceUsd", "buyCakeLabel"]);
4856
4869
  return (React__default['default'].createElement(StyledFooter, __assign({ p: ["40px 16px", null, "56px 40px 32px 40px"] }, props, { justifyContent: "center" }),
4857
- React__default['default'].createElement(Flex, { flexDirection: "column", width: ["100%", null, "1200px;"] },
4870
+ React__default['default'].createElement(Flex, { flexDirection: "column", width: ["100%", null, "1200px;"], style: {} },
4858
4871
  React__default['default'].createElement(StyledIconMobileContainer, { display: ["block", null, "none"] },
4859
4872
  React__default['default'].createElement(LogoWithTextIcon, { isDark: true, width: "130px" })),
4860
- React__default['default'].createElement(Flex, { order: [2, null, 1], flexDirection: ["column", null, "row"], justifyContent: "space-between", alignItems: "flex-start", mb: ["42px", null, "36px"], style: { borderBottom: "1px solid #E9EAEB" } },
4873
+ React__default['default'].createElement(Flex, { order: [2, null, 1], flexDirection: ["column", null, "row"], justifyContent: "space-between", alignItems: "flex-start", mb: ["42px", null, "36px"], style: { borderBottom: "1px solid #E9EAEB", marginBottom: 0, alignItems: "center", height: "140px" } },
4861
4874
  React__default['default'].createElement(Box, { display: ["none", null, "block"] },
4862
4875
  React__default['default'].createElement(LogoWithTextIcon, { isDark: true, width: "160px" })),
4863
4876
  React__default['default'].createElement(StyledFooterMenuLinks, { links: items, order: [2], pb: ["42px", null, "32px"], mb: ["0", null, "32px"] })),
4864
- React__default['default'].createElement(StyledToolsContainer, { order: [1, null, 3], flexDirection: ["column", null, "row"], justifyContent: "space-between" },
4877
+ React__default['default'].createElement(StyledToolsContainer, { order: [1, null, 3], flexDirection: ["column", null, "row"], justifyContent: "space-between", style: { height: "80px" } },
4865
4878
  React__default['default'].createElement(Flex, { order: [2, null, 1], alignItems: "center" },
4866
- React__default['default'].createElement(StyledPrivacyLinks, { order: [2], pb: ["42px", null, "32px"], mb: ["0", null, "32px"], style: { border: "none" } })),
4879
+ React__default['default'].createElement(StyledPrivacyLinks, { order: [2], pb: ["42px", null, "32px"], mb: ["0", null, "32px"], style: { border: "none", padding: 0, margin: 0 } })),
4867
4880
  React__default['default'].createElement(Flex, { order: [1, null, 2], mb: ["24px", null, "0"], justifyContent: "space-between", alignItems: "center", borderBottom: "none" },
4868
- React__default['default'].createElement(StyledSocialLinks, { order: [2], pb: ["42px", null, "32px"], mb: ["0", null, "32px"], style: { border: "none" } }))))));
4881
+ React__default['default'].createElement(StyledSocialLinks, { order: [2], pb: ["42px", null, "32px"], mb: ["0", null, "32px"], style: { border: "none", padding: 0, margin: 0 } }))))));
4869
4882
  };
4870
4883
 
4871
4884
  var MenuItems = function (_a) {