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