@coinswap-app/uikit 1.0.3 → 1.0.4

package/dist/index.cjs.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var React = require('react');
-var styled = require('styled-components');
+var styledComponents = require('styled-components');
 var styledSystem = require('styled-system');
 var get = require('lodash/get');
 var jsxRuntime = require('react/jsx-runtime');
@@ -332,9 +332,9 @@ var getThemeValue = function getThemeValue(path, fallback) {
 };
 
 var _templateObject$2b, _templateObject2$16, _templateObject3$O;
-var rotate$1 = styled.keyframes(_templateObject$2b || (_templateObject$2b = _taggedTemplateLiteral(["\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n"])));
-var spinStyle = styled.css(_templateObject2$16 || (_templateObject2$16 = _taggedTemplateLiteral(["\n  animation: ", " 2s linear infinite;\n"])), rotate$1);
-var Svg = styled("svg")(_templateObject3$O || (_templateObject3$O = _taggedTemplateLiteral(["\n  fill: ", ";\n  flex-shrink: 0;\n\n  ", "\n  ", "\n  path {\n    fill: ", ";\n    //Opacity set on 0.5\n    fill-opacity: ", ";\n  }\n"])), function (_ref) {
+var rotate$1 = styledComponents.keyframes(_templateObject$2b || (_templateObject$2b = _taggedTemplateLiteral(["\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n"])));
+var spinStyle = styledComponents.css(_templateObject2$16 || (_templateObject2$16 = _taggedTemplateLiteral(["\n  animation: ", " 2s linear infinite;\n"])), rotate$1);
+var Svg = styledComponents.styled("svg")(_templateObject3$O || (_templateObject3$O = _taggedTemplateLiteral(["\n  fill: ", ";\n  flex-shrink: 0;\n\n  ", "\n  ", "\n  path {\n    fill: ", ";\n    //Opacity set on 0.5\n    fill-opacity: ", ";\n  }\n"])), function (_ref) {
   var theme = _ref.theme,
     color = _ref.color;
   return getThemeValue("colors.".concat(color), color)(theme);
@@ -413,7 +413,7 @@ var getFontSize = function getFontSize(_ref2) {
     small = _ref2.small;
   return small ? "14px" : fontSize || "16px";
 };
-var Text = styled.div(_templateObject$2a || (_templateObject$2a = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: 1.5;\n  ", "\n  ", "\n  ", "\n"])), getColor$1, getFontSize, function (_ref3) {
+var Text = styledComponents.styled.div(_templateObject$2a || (_templateObject$2a = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: 1.5;\n  ", "\n  ", "\n  ", "\n"])), getColor$1, getFontSize, function (_ref3) {
   var bold = _ref3.bold;
   return bold ? 700 : 400;
 }, function (_ref4) {
@@ -488,7 +488,7 @@ var getButtonVariantProp$3 = function getButtonVariantProp(prop) {
     return theme.button[variant][prop];
   };
 };
-var StyledButton$2 = styled.button(_templateObject$29 || (_templateObject$29 = _taggedTemplateLiteral(["\n  align-items: center;\n  background-color: ", ";\n  border: ", ";\n  border-radius: 10px;\n  color: ", ";\n  cursor: pointer;\n  display: inline-flex;\n  font-family: inherit;\n  font-size: 16px;\n  font-weight: 600;\n  /* max-content instead of auto for Safari fix */\n  width: ", ";\n  height: ", ";\n  line-height: 1;\n  letter-spacing: 0.03em;\n  justify-content: center;\n  outline: 0;\n  padding: ", ";\n  transition: background-color 0.2s;\n  opacity: ", ";\n\n  &:hover:not(:disabled):not(.button--disabled):not(:active) {\n    background-color: ", ";\n    border-color: ", ";\n  }\n\n  &:focus:not(:active) {\n    box-shadow: 0 0 0 1px ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n    box-shadow: ", ";\n  }\n\n  ", "\n  ", "\n  ", "\n"])), getButtonVariantProp$3("background"), getButtonVariantProp$3("border"), function (_ref4) {
+var StyledButton$2 = styledComponents.styled.button(_templateObject$29 || (_templateObject$29 = _taggedTemplateLiteral(["\n  align-items: center;\n  background-color: ", ";\n  border: ", ";\n  border-radius: 10px;\n  color: ", ";\n  cursor: pointer;\n  display: inline-flex;\n  font-family: inherit;\n  font-size: 16px;\n  font-weight: 600;\n  /* max-content instead of auto for Safari fix */\n  width: ", ";\n  height: ", ";\n  line-height: 1;\n  letter-spacing: 0.03em;\n  justify-content: center;\n  outline: 0;\n  padding: ", ";\n  transition: background-color 0.2s;\n  opacity: ", ";\n\n  &:hover:not(:disabled):not(.button--disabled):not(:active) {\n    background-color: ", ";\n    border-color: ", ";\n  }\n\n  &:focus:not(:active) {\n    box-shadow: 0 0 0 1px ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n    box-shadow: ", ";\n  }\n\n  ", "\n  ", "\n  ", "\n"])), getButtonVariantProp$3("background"), getButtonVariantProp$3("border"), function (_ref4) {
   var white = _ref4.white;
   return white ? "white" : getButtonVariantProp$3("color");
 }, function (_ref5) {
@@ -1416,7 +1416,7 @@ var Icon$1W = function Icon(_ref) {
 };
 
 var Icon$1V = function Icon(props) {
-  var theme = styled.useTheme();
+  var theme = styledComponents.useTheme();
   var primaryColor = theme.isDark ? "#3C3742" : "#e9eaeb";
   var secondaryColor = theme.isDark ? "#666171" : "#bdc2c4";
   return /*#__PURE__*/jsxRuntime.jsxs(Svg, _objectSpread2(_objectSpread2({
@@ -7915,10 +7915,10 @@ var Icon$T = function Icon(props) {
 };
 
 var _templateObject$28, _templateObject2$15;
-var ButtonText = styled.span(_templateObject$28 || (_templateObject$28 = _taggedTemplateLiteral(["\n  font-weight: bold;\n  font-size: 16px;\n  line-height: 28px;\n  width: 84px;\n  transition: all 0.5s ease-in;\n  display: ", ";\n"])), function (props) {
+var ButtonText = styledComponents.styled.span(_templateObject$28 || (_templateObject$28 = _taggedTemplateLiteral(["\n  font-weight: bold;\n  font-size: 16px;\n  line-height: 28px;\n  width: 84px;\n  transition: all 0.5s ease-in;\n  display: ", ";\n"])), function (props) {
   return props.extended ? "block" : "none";
 });
-var RampButtonWrapper$1 = styled(Button$1)(_templateObject2$15 || (_templateObject2$15 = _taggedTemplateLiteral(["\n  padding: 6px 10px;\n  padding: ", ";\n  outline: none;\n  border: none;\n  width: ", "px;\n  height: 40px;\n  background: ", ";\n  border-radius: 10px;\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n  overflow: hidden;\n  transition: all 0.5s ease-in;\n"])), function (props) {
+var RampButtonWrapper$1 = styledComponents.styled(Button$1)(_templateObject2$15 || (_templateObject2$15 = _taggedTemplateLiteral(["\n  padding: 6px 10px;\n  padding: ", ";\n  outline: none;\n  border: none;\n  width: ", "px;\n  height: 40px;\n  background: ", ";\n  border-radius: 10px;\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n  overflow: hidden;\n  transition: all 0.5s ease-in;\n"])), function (props) {
   return props.extended ? "6px 25px" : "6px 10px";
 }, function (props) {
   return props.extended ? 110 : 60;
@@ -7947,13 +7947,13 @@ var RampButtonLite = function RampButtonLite(_ref2) {
 };
 
 var _templateObject$27;
-var IconButton = styled(Button$1)(_templateObject$27 || (_templateObject$27 = _taggedTemplateLiteral(["\n  padding: 0;\n  width: ", ";\n  margin: 0px 4px;\n  border: none;\n  outline: none;\n"])), function (_ref) {
+var IconButton = styledComponents.styled(Button$1)(_templateObject$27 || (_templateObject$27 = _taggedTemplateLiteral(["\n  padding: 0;\n  width: ", ";\n  margin: 0px 4px;\n  border: none;\n  outline: none;\n"])), function (_ref) {
   var size = _ref.size;
   return size === "sm" ? "32px" : "60px";
 });
 
 var _templateObject$26;
-var RampButtonWrapper = styled.button(_templateObject$26 || (_templateObject$26 = _taggedTemplateLiteral(["\n  padding: 6px 10px;\n  outline: none;\n  border: none;\n  width: ", "px;\n  height: 40px;\n  background: #2b2b38;\n  border-radius: 10px;\n  display: flex;\n  flex-direction: row;\n  justify-content: space-around;\n  align-items: center;\n  color: black;\n  cursor: pointer;\n  position: relative;\n  overflow: hidden;\n  &:active {\n    background: ", ";\n  }\n  transition: all 0.5s ease-in;\n"])), function (props) {
+var RampButtonWrapper = styledComponents.styled.button(_templateObject$26 || (_templateObject$26 = _taggedTemplateLiteral(["\n  padding: 6px 10px;\n  outline: none;\n  border: none;\n  width: ", "px;\n  height: 40px;\n  background: #2b2b38;\n  border-radius: 10px;\n  display: flex;\n  flex-direction: row;\n  justify-content: space-around;\n  align-items: center;\n  color: black;\n  cursor: pointer;\n  position: relative;\n  overflow: hidden;\n  &:active {\n    background: ", ";\n  }\n  transition: all 0.5s ease-in;\n"])), function (props) {
   return props.extended ? 108 : 70;
 }, function (_ref) {
   var theme = _ref.theme;
@@ -7978,10 +7978,10 @@ var RampButton = function RampButton(_ref2) {
 };
 
 var _templateObject$25;
-var Box = styled.div(_templateObject$25 || (_templateObject$25 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n"])), styledSystem.background, styledSystem.border, styledSystem.layout, styledSystem.position, styledSystem.space);
+var Box = styledComponents.styled.div(_templateObject$25 || (_templateObject$25 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n"])), styledSystem.background, styledSystem.border, styledSystem.layout, styledSystem.position, styledSystem.space);
 
 var _templateObject$24;
-var Flex = styled(Box)(_templateObject$24 || (_templateObject$24 = _taggedTemplateLiteral(["\n  display: flex;\n  ", "\n"])), styledSystem.flexbox);
+var Flex = styledComponents.styled(Box)(_templateObject$24 || (_templateObject$24 = _taggedTemplateLiteral(["\n  display: flex;\n  ", "\n"])), styledSystem.flexbox);
 
 var variants$3 = {
   INFO: "info",
@@ -8021,14 +8021,14 @@ var getIcon = function getIcon() {
       return Icon$2E;
   }
 };
-var IconLabel = styled.div(_templateObject$23 || (_templateObject$23 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  border-radius: 10px 0 0 10px;\n  color: black;\n  padding: 12px;\n"])), getThemeColor);
+var IconLabel = styledComponents.styled.div(_templateObject$23 || (_templateObject$23 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  border-radius: 10px 0 0 10px;\n  color: black;\n  padding: 12px;\n"])), getThemeColor);
 var withHandlerSpacing = 32 + 12 + 8; // button size + inner spacing + handler position
-var Details = styled.div(_templateObject2$14 || (_templateObject2$14 = _taggedTemplateLiteral(["\n  flex: 1;\n  padding-bottom: 12px;\n  padding-left: 12px;\n  padding-right: ", ";\n  padding-top: 12px;\n"])), function (_ref2) {
+var Details = styledComponents.styled.div(_templateObject2$14 || (_templateObject2$14 = _taggedTemplateLiteral(["\n  flex: 1;\n  padding-bottom: 12px;\n  padding-left: 12px;\n  padding-right: ", ";\n  padding-top: 12px;\n"])), function (_ref2) {
   var hasHandler = _ref2.hasHandler;
   return hasHandler ? "".concat(withHandlerSpacing, "px") : "12px";
 });
-var CloseHandler = styled.div(_templateObject3$N || (_templateObject3$N = _taggedTemplateLiteral(["\n  border-radius: 0 16px 16px 0;\n  right: 8px;\n  position: absolute;\n  top: 8px;\n"])));
-var StyledAlert = styled(Flex)(_templateObject4$y || (_templateObject4$y = _taggedTemplateLiteral(["\n  position: relative;\n  background: ", ";\n  @-moz-document url-prefix() {\n    background: rgba(36, 36, 36, 0.95) !important;\n  }\n  box-shadow: 0 13px 20px rgba(0, 0, 0, 0.25);\n  border: 1px solid ", ";\n  border-radius: 10px;\n"])), function (_ref3) {
+var CloseHandler = styledComponents.styled.div(_templateObject3$N || (_templateObject3$N = _taggedTemplateLiteral(["\n  border-radius: 0 16px 16px 0;\n  right: 8px;\n  position: absolute;\n  top: 8px;\n"])));
+var StyledAlert = styledComponents.styled(Flex)(_templateObject4$y || (_templateObject4$y = _taggedTemplateLiteral(["\n  position: relative;\n  background: ", ";\n  @-moz-document url-prefix() {\n    background: rgba(36, 36, 36, 0.95) !important;\n  }\n  box-shadow: 0 13px 20px rgba(0, 0, 0, 0.25);\n  border: 1px solid ", ";\n  border-radius: 10px;\n"])), function (_ref3) {
   var theme = _ref3.theme;
   return theme.backgrounds.secondary;
 }, function (_ref4) {
@@ -8079,7 +8079,7 @@ var observerOptions = {
 };
 
 var _templateObject$22;
-var Wrapper$3 = styled.div(_templateObject$22 || (_templateObject$22 = _taggedTemplateLiteral(["\n  position: relative;\n  background-position: center center;\n  background-repeat: no-repeat;\n  background-size: cover;\n  height: ", "px;\n  max-width: ", "px;\n  max-height: ", "px;\n  width: 100%;\n  padding-top: ", "%;\n  ", "\n"])), function (_ref) {
+var Wrapper$3 = styledComponents.styled.div(_templateObject$22 || (_templateObject$22 = _taggedTemplateLiteral(["\n  position: relative;\n  background-position: center center;\n  background-repeat: no-repeat;\n  background-size: cover;\n  height: ", "px;\n  max-width: ", "px;\n  max-height: ", "px;\n  width: 100%;\n  padding-top: ", "%;\n  ", "\n"])), function (_ref) {
   var height = _ref.height,
     responsive = _ref.responsive;
   return responsive ? 0 : height;
@@ -8098,8 +8098,8 @@ var Wrapper$3 = styled.div(_templateObject$22 || (_templateObject$22 = _taggedTe
 
 var _excluded$q = ["src", "alt"];
 var _templateObject$21, _templateObject2$13;
-var StyledImage = styled.img(_templateObject$21 || (_templateObject$21 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  max-width: 100%;\n"])));
-var Placeholder = styled.div(_templateObject2$13 || (_templateObject2$13 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n"])));
+var StyledImage = styledComponents.styled.img(_templateObject$21 || (_templateObject$21 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  max-width: 100%;\n"])));
+var Placeholder = styledComponents.styled.div(_templateObject2$13 || (_templateObject2$13 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n"])));
 var Image = function Image(_ref) {
   var src = _ref.src,
     alt = _ref.alt,
@@ -8178,7 +8178,7 @@ var grids = {
   mobile: "grid-template-columns: repeat(".concat(gridsMap.mobile.gridColumns, ", minmax(0, 1fr));\n            grid-gap: 20px;\n            "),
   desktop: "grid-template-columns: repeat(".concat(gridsMap.desktop.gridColumns, ", minmax(0, 1fr));\n            grid-gap: 24px;\n            ")
 };
-var gridLayout = styled.css(_templateObject$20 || (_templateObject$20 = _taggedTemplateLiteral(["\n  display: grid;\n  ", " {\n    ", ";\n  }\n  ", " {\n    ", ";\n  }\n"])), function (_ref) {
+var gridLayout = styledComponents.css(_templateObject$20 || (_templateObject$20 = _taggedTemplateLiteral(["\n  display: grid;\n  ", " {\n    ", ";\n  }\n  ", " {\n    ", ";\n  }\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.mediaQueries.xs;
 }, grids.mobile, function (_ref2) {
@@ -8416,7 +8416,7 @@ var style = _defineProperty(_defineProperty(_defineProperty(_defineProperty({},
   fontSize: "48px",
   fontSizeLg: "64px"
 });
-var Heading = styled(Text).attrs({
+var Heading = styledComponents.styled(Text).attrs({
   bold: true
 })(_templateObject$1$ || (_templateObject$1$ = _taggedTemplateLiteral(["\n  font-size: ", ";\n  font-weight: 600;\n  line-height: 1.1;\n\n  ", " {\n    font-size: ", ";\n  }\n"])), function (_ref) {
   var size = _ref.size;
@@ -8433,7 +8433,7 @@ Heading.defaultProps = {
 };
 
 var _templateObject$1_, _templateObject2$12, _templateObject3$M, _templateObject4$x;
-var StyledModal = styled.div(_templateObject$1_ || (_templateObject$1_ = _taggedTemplateLiteral(["\n  background: ", ";\n  box-shadow: 0 13px 20px rgba(0, 0, 0, 0.25);\n  @-moz-document url-prefix() {\n    background: #191921 !important;\n  }\n  border-radius: 15px;\n  width: 100%;\n  z-index: 99;\n  overflow-y: auto;\n  padding-bottom: 8px;\n  ", " {\n    width: auto;\n    min-width: 360px;\n    max-width: 100%;\n    max-height: 80%;\n  }\n  ", " {\n    max-height: 80vh;\n  }\n"])), function (_ref) {
+var StyledModal = styledComponents.styled.div(_templateObject$1_ || (_templateObject$1_ = _taggedTemplateLiteral(["\n  background: ", ";\n  box-shadow: 0 13px 20px rgba(0, 0, 0, 0.25);\n  @-moz-document url-prefix() {\n    background: #191921 !important;\n  }\n  border-radius: 15px;\n  width: 100%;\n  z-index: 99;\n  overflow-y: auto;\n  padding-bottom: 8px;\n  ", " {\n    width: auto;\n    min-width: 360px;\n    max-width: 100%;\n    max-height: 80%;\n  }\n  ", " {\n    max-height: 80vh;\n  }\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.colors.card;
 }, function (_ref2) {
@@ -8443,9 +8443,9 @@ var StyledModal = styled.div(_templateObject$1_ || (_templateObject$1_ = _tagged
   var theme = _ref3.theme;
   return theme.mediaQueries.mobile;
 });
-var CloseButton$1 = styled(Button$1)(_templateObject2$12 || (_templateObject2$12 = _taggedTemplateLiteral(["\n  z-index: 99999;\n  width: 16px;\n  border: none;\n  align-items: flex-start !important;\n  padding: 0px !important;\n  &:hover:not(:disabled):not(.button--disabled):not(:active) {\n    background-color: transparent;\n    border-color: transparent;\n  }\n  &:focus:not(:active) {\n    box-shadow: none;\n  }\n"])));
-var ModalHeader = styled.div(_templateObject3$M || (_templateObject3$M = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  padding: 24px 24px 0;\n"])));
-var ModalTitle = styled(Flex)(_templateObject4$x || (_templateObject4$x = _taggedTemplateLiteral(["\n  align-items: center;\n  flex: 1;\n"])));
+var CloseButton$1 = styledComponents.styled(Button$1)(_templateObject2$12 || (_templateObject2$12 = _taggedTemplateLiteral(["\n  z-index: 99999;\n  width: 16px;\n  border: none;\n  align-items: flex-start !important;\n  padding: 0px !important;\n  &:hover:not(:disabled):not(.button--disabled):not(:active) {\n    background-color: transparent;\n    border-color: transparent;\n  }\n  &:focus:not(:active) {\n    box-shadow: none;\n  }\n"])));
+var ModalHeader = styledComponents.styled.div(_templateObject3$M || (_templateObject3$M = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  padding: 24px 24px 0;\n"])));
+var ModalTitle = styledComponents.styled(Flex)(_templateObject4$x || (_templateObject4$x = _taggedTemplateLiteral(["\n  align-items: center;\n  flex: 1;\n"])));
 var Modal = function Modal(_ref4) {
   var title = _ref4.title,
     onDismiss = _ref4.onDismiss,
@@ -8487,7 +8487,7 @@ var Modal = function Modal(_ref4) {
 };
 
 var _templateObject$1Z;
-var Overlay = styled.div.attrs({
+var Overlay = styledComponents.styled.div.attrs({
   role: "presentation"
 })(_templateObject$1Z || (_templateObject$1Z = _taggedTemplateLiteral(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgb(22, 22, 29);\n  transition: opacity 0.4s;\n  opacity: ", ";\n  z-index: ", ";\n  pointer-events: ", ";\n"])), function (_ref) {
   var show = _ref.show;
@@ -8505,7 +8505,7 @@ Overlay.defaultProps = {
 };
 
 var _templateObject$1Y;
-var ModalWrapper = styled.div(_templateObject$1Y || (_templateObject$1Y = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: ", ";\n  ", " {\n    justify-content: flex-start;\n    padding-top: 50px;\n  }\n"])), function (_ref) {
+var ModalWrapper = styledComponents.styled.div(_templateObject$1Y || (_templateObject$1Y = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: ", ";\n  ", " {\n    justify-content: flex-start;\n    padding-top: 50px;\n  }\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.zIndices.modal - 1;
 }, function (_ref2) {
@@ -8898,7 +8898,7 @@ var ConnectModal = function ConnectModal(_ref) {
 
 var _excluded$p = ["external"];
 var _templateObject$1X;
-var StyledLink$1 = styled(Text)(_templateObject$1X || (_templateObject$1X = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  width: fit-content;\n  margin-right: 21px;\n  &:hover {\n    text-decoration: underline;\n  }\n"])));
+var StyledLink$1 = styledComponents.styled(Text)(_templateObject$1X || (_templateObject$1X = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  width: fit-content;\n  margin-right: 21px;\n  &:hover {\n    text-decoration: underline;\n  }\n"])));
 var Link = function Link(_ref) {
   var external = _ref.external,
     props = _objectWithoutProperties(_ref, _excluded$p);
@@ -8930,13 +8930,13 @@ var LinkExternal = function LinkExternal(_ref) {
 
 var _excluded$n = ["toCopy", "translations", "children"];
 var _templateObject$1W, _templateObject2$11;
-var StyleButton = styled(Text).attrs({
+var StyleButton = styledComponents.styled(Text).attrs({
   role: "button"
 })(_templateObject$1W || (_templateObject$1W = _taggedTemplateLiteral(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  color: ", ";\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.colors.primary;
 });
-var Tooltip$1 = styled.div(_templateObject2$11 || (_templateObject2$11 = _taggedTemplateLiteral(["\n  display: ", ";\n  position: absolute;\n  bottom: -40px;\n  right: 0;\n  left: 0;\n  text-align: center;\n  background-color: ", ";\n  color: ", ";\n  border-radius: 5px;\n  opacity: 0.7;\n  padding: 5px;\n"])), function (_ref2) {
+var Tooltip$1 = styledComponents.styled.div(_templateObject2$11 || (_templateObject2$11 = _taggedTemplateLiteral(["\n  display: ", ";\n  position: absolute;\n  bottom: -40px;\n  right: 0;\n  left: 0;\n  text-align: center;\n  background-color: ", ";\n  color: ", ";\n  border-radius: 5px;\n  opacity: 0.7;\n  padding: 5px;\n"])), function (_ref2) {
   var isTooltipDisplayed = _ref2.isTooltipDisplayed;
   return isTooltipDisplayed ? "block" : "none";
 }, function (_ref3) {
@@ -9278,14 +9278,14 @@ var useConnectWalletEvent = function useConnectWalletEvent(account) {
 };
 
 var _templateObject$1V, _templateObject2$10;
-var BannerSlideWrapper = styled.div(_templateObject$1V || (_templateObject$1V = _taggedTemplateLiteral(["\n  position: relative;\n  height: ", ";\n  max-height: 225px;\n  display: flex;\n  flex-direction: row;\n  justify-content: ", ";\n  align-items: center;\n"])), function (_ref) {
+var BannerSlideWrapper = styledComponents.styled.div(_templateObject$1V || (_templateObject$1V = _taggedTemplateLiteral(["\n  position: relative;\n  height: ", ";\n  max-height: 225px;\n  display: flex;\n  flex-direction: row;\n  justify-content: ", ";\n  align-items: center;\n"])), function (_ref) {
   var height = _ref.height;
   return "".concat(height, "px");
 }, function (_ref2) {
   var isMobile = _ref2.isMobile;
   return isMobile ? "flex-start" : "space-between";
 });
-var StyledImg = styled(Image)(_templateObject2$10 || (_templateObject2$10 = _taggedTemplateLiteral(["\n  position: absolute;\n  max-height: 225px;\n  top: 0;\n  img {\n    object-fit: contain;\n    border-radius: ", ";\n  }\n"])), function (_ref3) {
+var StyledImg = styledComponents.styled(Image)(_templateObject2$10 || (_templateObject2$10 = _taggedTemplateLiteral(["\n  position: absolute;\n  max-height: 225px;\n  top: 0;\n  img {\n    object-fit: contain;\n    border-radius: ", ";\n  }\n"])), function (_ref3) {
   var isMobile = _ref3.isMobile,
     theme = _ref3.theme;
   return isMobile ? 0 : theme.radii.primary;
@@ -9323,11 +9323,11 @@ var BannerSlide = function BannerSlide(_ref4) {
 };
 
 var _templateObject$1U, _templateObject2$$;
-var CarouselWrapper = styled.div(_templateObject$1U || (_templateObject$1U = _taggedTemplateLiteral(["\n  margin: 0 -32px;\n\n  ", " {\n    margin: 0;\n  }\n"])), function (_ref) {
+var CarouselWrapper = styledComponents.styled.div(_templateObject$1U || (_templateObject$1U = _taggedTemplateLiteral(["\n  margin: 0 -32px;\n\n  ", " {\n    margin: 0;\n  }\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.mediaQueries.sm;
 });
-var StyledSlider$2 = styled(Slider)(_templateObject2$$ || (_templateObject2$$ = _taggedTemplateLiteral(["\n  .slick-track {\n    > div {\n      padding: 0 10px;\n    }\n  }\n\n  .slick-dots {\n    .slick-active {\n      div {\n        background: ", " !important;\n        border: 2px ", " solid;\n      }\n    }\n  }\n"])), function (_ref2) {
+var StyledSlider$2 = styledComponents.styled(Slider)(_templateObject2$$ || (_templateObject2$$ = _taggedTemplateLiteral(["\n  .slick-track {\n    > div {\n      padding: 0 10px;\n    }\n  }\n\n  .slick-dots {\n    .slick-active {\n      div {\n        background: ", " !important;\n        border: 2px ", " solid;\n      }\n    }\n  }\n"])), function (_ref2) {
   var theme = _ref2.theme;
   return theme.colors.blue;
 }, function (_ref3) {
@@ -9387,14 +9387,14 @@ var BannerSlider = function BannerSlider(_ref4) {
 };
 
 var _templateObject$1T, _templateObject2$_;
-var Separator = styled.div(_templateObject$1T || (_templateObject$1T = _taggedTemplateLiteral(["\n  align-items: center;\n  color: currentColor;\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 (_ref) {
+var Separator = styledComponents.styled.div(_templateObject$1T || (_templateObject$1T = _taggedTemplateLiteral(["\n  align-items: center;\n  color: currentColor;\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 (_ref) {
   var theme = _ref.theme;
   return theme.mediaQueries.sm;
 }, function (_ref2) {
   var theme = _ref2.theme;
   return theme.mediaQueries.md;
 });
-var StyledBreadcrumbs = styled.ul(_templateObject2$_ || (_templateObject2$_ = _taggedTemplateLiteral(["\n  align-items: center;\n  color: ", ";\n  display: flex;\n  flex-wrap: wrap;\n  list-style-type: none;\n\n  ", "\n"])), function (_ref3) {
+var StyledBreadcrumbs = styledComponents.styled.ul(_templateObject2$_ || (_templateObject2$_ = _taggedTemplateLiteral(["\n  align-items: center;\n  color: ", ";\n  display: flex;\n  flex-wrap: wrap;\n  list-style-type: none;\n\n  ", "\n"])), function (_ref3) {
   var theme = _ref3.theme;
   return theme.colors.textDisabled;
 }, styledSystem.space);
@@ -9431,7 +9431,7 @@ var Breadcrumbs = function Breadcrumbs(_ref4) {
 };
 
 var _templateObject$1S;
-var StyledButtonMenu = styled.div(_templateObject$1S || (_templateObject$1S = _taggedTemplateLiteral(["\n  background-color: transparent;\n  border-radius: 16px;\n  display: inline-flex;\n  @media (max-width: 500px) {\n    width: 100%;\n    justify-content: space-around;\n  }\n"])));
+var StyledButtonMenu = styledComponents.styled.div(_templateObject$1S || (_templateObject$1S = _taggedTemplateLiteral(["\n  background-color: transparent;\n  border-radius: 16px;\n  display: inline-flex;\n  @media (max-width: 500px) {\n    width: 100%;\n    justify-content: space-around;\n  }\n"])));
 
 var ButtonMenu = function ButtonMenu(_ref) {
   var _ref$activeIndex = _ref.activeIndex,
@@ -9488,7 +9488,7 @@ var getButtonVariantProp$2 = function getButtonVariantProp(prop) {
     return theme.button[variant][prop];
   };
 };
-var StyledButton$1 = styled.button(_templateObject$1R || (_templateObject$1R = _taggedTemplateLiteral(["\n  align-items: center;\n  background-color: transparent;\n  border: none;\n  border-radius: 10px;\n  cursor: pointer;\n  display: flex;\n  flex-direction: column;\n  font-family: inherit;\n  font-size: 16px;\n  font-weight: 700;\n  color: white;\n  /* max-content instead of auto for Safari fix */\n  width: ", ";\n  height: ", ";\n  line-height: 1;\n  letter-spacing: 0.03em;\n  justify-content: center;\n  outline: 0;\n  padding: ", ";\n  transition: all 0.5s;\n\n  .dot {\n    margin-top: 10px;\n    height: ", ";\n    width: ", ";\n    border-radius: ", ";\n    display: inline-block;\n    background-color: ", ";\n  }\n\n  &:hover:not(:disabled):not(.button--disabled):not(:active) {\n    border-color: ", ";\n    color: ", ";\n  }\n\n  &:active {\n    background-color: transparent;\n    color: ", ";\n  }\n\n  ", "\n  ", "\n  ", "\n"])), function (_ref4) {
+var StyledButton$1 = styledComponents.styled.button(_templateObject$1R || (_templateObject$1R = _taggedTemplateLiteral(["\n  align-items: center;\n  background-color: transparent;\n  border: none;\n  border-radius: 10px;\n  cursor: pointer;\n  display: flex;\n  flex-direction: column;\n  font-family: inherit;\n  font-size: 16px;\n  font-weight: 700;\n  color: white;\n  /* max-content instead of auto for Safari fix */\n  width: ", ";\n  height: ", ";\n  line-height: 1;\n  letter-spacing: 0.03em;\n  justify-content: center;\n  outline: 0;\n  padding: ", ";\n  transition: all 0.5s;\n\n  .dot {\n    margin-top: 10px;\n    height: ", ";\n    width: ", ";\n    border-radius: ", ";\n    display: inline-block;\n    background-color: ", ";\n  }\n\n  &:hover:not(:disabled):not(.button--disabled):not(:active) {\n    border-color: ", ";\n    color: ", ";\n  }\n\n  &:active {\n    background-color: transparent;\n    color: ", ";\n  }\n\n  ", "\n  ", "\n  ", "\n"])), function (_ref4) {
   var fullWidth = _ref4.fullWidth;
   return fullWidth ? "100%" : "max-content";
 }, function (_ref5) {
@@ -9568,7 +9568,7 @@ var getThemeTextColor = function getThemeTextColor(_ref) {
     theme = _ref.theme;
   return outline ? getColor(variant, theme) : "#ffffff";
 };
-var StyledTag = styled.div(_templateObject$1Q || (_templateObject$1Q = _taggedTemplateLiteral(["\n  align-items: center;\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 16px;\n  color: ", ";\n  display: inline-flex;\n  font-size: 14px;\n  font-weight: 400;\n  height: 28px;\n  line-height: 1.5;\n  padding: 0 8px;\n  white-space: nowrap;\n\n  svg {\n    fill: ", ";\n  }\n"])), function (_ref2) {
+var StyledTag = styledComponents.styled.div(_templateObject$1Q || (_templateObject$1Q = _taggedTemplateLiteral(["\n  align-items: center;\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 16px;\n  color: ", ";\n  display: inline-flex;\n  font-size: 14px;\n  font-weight: 400;\n  height: 28px;\n  line-height: 1.5;\n  padding: 0 8px;\n  white-space: nowrap;\n\n  svg {\n    fill: ", ";\n  }\n"])), function (_ref2) {
   var outline = _ref2.outline,
     theme = _ref2.theme,
     _ref2$variant = _ref2.variant,
@@ -9583,9 +9583,9 @@ var StyledTag = styled.div(_templateObject$1Q || (_templateObject$1Q = _taggedTe
 
 var _excluded$l = ["isActive", "size", "variant", "as", "children", "tag", "hide"];
 var _templateObject$1P, _templateObject2$Z, _templateObject3$L;
-var ButtonBody = styled.div(_templateObject$1P || (_templateObject$1P = _taggedTemplateLiteral(["\n  display: inline-flex;\n  align-items: center;\n"])));
-var ButtonTag = styled(StyledTag)(_templateObject2$Z || (_templateObject2$Z = _taggedTemplateLiteral(["\n  margin-left: 7px;\n  font-weight: bold;\n  font-size: 11px;\n  padding: 1px 5px;\n  height: unset;\n  border-width: 1px;\n"])));
-var InactiveButton$1 = styled(Button)(_templateObject3$L || (_templateObject3$L = _taggedTemplateLiteral(["\n  background-color: transparent;\n  color: #535459;\n  .dot {\n    background-color: transparent;\n  }\n\n  &:hover:not(:disabled):not(:active) {\n    background-color: transparent;\n  }\n"])));
+var ButtonBody = styledComponents.styled.div(_templateObject$1P || (_templateObject$1P = _taggedTemplateLiteral(["\n  display: inline-flex;\n  align-items: center;\n"])));
+var ButtonTag = styledComponents.styled(StyledTag)(_templateObject2$Z || (_templateObject2$Z = _taggedTemplateLiteral(["\n  margin-left: 7px;\n  font-weight: bold;\n  font-size: 11px;\n  padding: 1px 5px;\n  height: unset;\n  border-width: 1px;\n"])));
+var InactiveButton$1 = styledComponents.styled(Button)(_templateObject3$L || (_templateObject3$L = _taggedTemplateLiteral(["\n  background-color: transparent;\n  color: #535459;\n  .dot {\n    background-color: transparent;\n  }\n\n  &:hover:not(:disabled):not(:active) {\n    background-color: transparent;\n  }\n"])));
 var ButtonMenuItem = function ButtonMenuItem(_ref) {
   var _ref$isActive = _ref.isActive,
     isActive = _ref$isActive === void 0 ? false : _ref$isActive,
@@ -9634,7 +9634,7 @@ var ButtonMenuItem = function ButtonMenuItem(_ref) {
 };
 
 var _templateObject$1O;
-var StyledButtonActivityMenu = styled.div(_templateObject$1O || (_templateObject$1O = _taggedTemplateLiteral(["\n  background: linear-gradient(180deg, #000000 0%, rgba(0, 0, 0, 0) 17.71%), #16161d;\n  border: 1px solid #808080;\n  box-sizing: border-box;\n  border-radius: 99px;\n  display: inline-flex;\n"])));
+var StyledButtonActivityMenu = styledComponents.styled.div(_templateObject$1O || (_templateObject$1O = _taggedTemplateLiteral(["\n  background: linear-gradient(180deg, #000000 0%, rgba(0, 0, 0, 0) 17.71%), #16161d;\n  border: 1px solid #808080;\n  box-sizing: border-box;\n  border-radius: 99px;\n  display: inline-flex;\n"])));
 
 var ButtonActivityMenu = function ButtonActivityMenu(_ref) {
   var _ref$activeIndex = _ref.activeIndex,
@@ -9685,7 +9685,7 @@ var getButtonVariantProp$1 = function getButtonVariantProp(prop) {
     return theme.button[variant][prop];
   };
 };
-var StyledButtonActivity = styled.button(_templateObject$1N || (_templateObject$1N = _taggedTemplateLiteral(["\n  align-items: center;\n  border: none;\n  cursor: pointer;\n  display: flex;\n  flex-direction: column;\n  font-family: inherit;\n  font-size: 16px;\n  font-weight: 600;\n  color: white;\n  /* max-content instead of auto for Safari fix */\n  width: ", ";\n  height: ", ";\n  line-height: 1;\n  letter-spacing: 0.03em;\n  justify-content: center;\n  outline: 0;\n  padding: ", ";\n  transition: all 0.5s;\n\n  // Activity\n  border-radius: 99px;\n  background: linear-gradient(332.11deg, #13c3af 8.45%, #13d8b2 39.11%, #12ffb8 85.67%);\n  color: rgba(22, 22, 29, 1);\n\n  &:hover:not(:disabled):not(.button--disabled):not(:active) {\n    border-color: ", ";\n    color: white;\n  }\n\n  ", "\n  ", "\n  ", "\n"])), function (_ref4) {
+var StyledButtonActivity = styledComponents.styled.button(_templateObject$1N || (_templateObject$1N = _taggedTemplateLiteral(["\n  align-items: center;\n  border: none;\n  cursor: pointer;\n  display: flex;\n  flex-direction: column;\n  font-family: inherit;\n  font-size: 16px;\n  font-weight: 600;\n  color: white;\n  /* max-content instead of auto for Safari fix */\n  width: ", ";\n  height: ", ";\n  line-height: 1;\n  letter-spacing: 0.03em;\n  justify-content: center;\n  outline: 0;\n  padding: ", ";\n  transition: all 0.5s;\n\n  // Activity\n  border-radius: 99px;\n  background: linear-gradient(332.11deg, #13c3af 8.45%, #13d8b2 39.11%, #12ffb8 85.67%);\n  color: rgba(22, 22, 29, 1);\n\n  &:hover:not(:disabled):not(.button--disabled):not(:active) {\n    border-color: ", ";\n    color: white;\n  }\n\n  ", "\n  ", "\n  ", "\n"])), function (_ref4) {
   var fullWidth = _ref4.fullWidth;
   return fullWidth ? "100%" : "max-content";
 }, function (_ref5) {
@@ -9733,7 +9733,7 @@ ButtonActivity.defaultProps = {
 
 var _excluded$j = ["isActive", "size", "variant", "as"];
 var _templateObject$1M;
-var InactiveButton = styled(ButtonActivity)(_templateObject$1M || (_templateObject$1M = _taggedTemplateLiteral(["\n  background: transparent;\n  color: #808080;\n  &:hover:not(:disabled):not(:active) {\n    background-color: transparent;\n  }\n"])));
+var InactiveButton = styledComponents.styled(ButtonActivity)(_templateObject$1M || (_templateObject$1M = _taggedTemplateLiteral(["\n  background: transparent;\n  color: #808080;\n  &:hover:not(:disabled):not(:active) {\n    background-color: transparent;\n  }\n"])));
 var ButtonActivityMenuItem = function ButtonActivityMenuItem(_ref) {
   var _ref$isActive = _ref.isActive,
     isActive = _ref$isActive === void 0 ? false : _ref$isActive,
@@ -9783,7 +9783,7 @@ var getButtonVariantProp = function getButtonVariantProp(prop) {
     return theme.button[variant][prop];
   };
 };
-var StyledButtonSwitch = styled.button(_templateObject$1L || (_templateObject$1L = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  background-color: transparent;\n  border: none;\n  cursor: pointer;\n  font-family: inherit;\n  font-size: 16px;\n  line-height: 28px;\n  font-weight: 700;\n  color: ", ";\n  width: ", ";\n  height: 36px;\n  outline: 0;\n  padding: 0 8px;\n  transition: all 0.5s;\n\n  &:hover:not(:disabled):not(.button--disabled):not(:active) {\n    border-color: ", ";\n    color: ", ";\n  }\n\n  ", "\n  ", "\n  ", "\n"])), function (_ref4) {
+var StyledButtonSwitch = styledComponents.styled.button(_templateObject$1L || (_templateObject$1L = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  background-color: transparent;\n  border: none;\n  cursor: pointer;\n  font-family: inherit;\n  font-size: 16px;\n  line-height: 28px;\n  font-weight: 700;\n  color: ", ";\n  width: ", ";\n  height: 36px;\n  outline: 0;\n  padding: 0 8px;\n  transition: all 0.5s;\n\n  &:hover:not(:disabled):not(.button--disabled):not(:active) {\n    border-color: ", ";\n    color: ", ";\n  }\n\n  ", "\n  ", "\n  ", "\n"])), function (_ref4) {
   var theme = _ref4.theme,
     active = _ref4.active;
   return active ? "white" : theme.colors.grey;
@@ -9822,7 +9822,7 @@ var ButtonSwitch = function ButtonSwitch(_ref) {
 };
 
 var _templateObject$1K;
-var StyledButtonSwitchMenu = styled.div(_templateObject$1K || (_templateObject$1K = _taggedTemplateLiteral(["\n  background: transparent;\n  box-sizing: border-box;\n  display: inline-flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n"])));
+var StyledButtonSwitchMenu = styledComponents.styled.div(_templateObject$1K || (_templateObject$1K = _taggedTemplateLiteral(["\n  background: transparent;\n  box-sizing: border-box;\n  display: inline-flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n"])));
 
 var variants$1 = {
   DEFAULT: "default",
@@ -9838,12 +9838,12 @@ var getToggleVariantProp = function getToggleVariantProp(prop) {
     return theme.toggle[variant][prop];
   };
 };
-var Handle = styled.div(_templateObject$1J || (_templateObject$1J = _taggedTemplateLiteral(["\n  background-color: ", ";\n  border-radius: 50%;\n  cursor: pointer;\n  height: 16px;\n  left: 3px;\n  position: absolute;\n  top: 2px;\n  transition: all 200ms ease-in;\n  width: 16px;\n  z-index: 1;\n"])), function (_ref2) {
+var Handle = styledComponents.styled.div(_templateObject$1J || (_templateObject$1J = _taggedTemplateLiteral(["\n  background-color: ", ";\n  border-radius: 50%;\n  cursor: pointer;\n  height: 16px;\n  left: 3px;\n  position: absolute;\n  top: 2px;\n  transition: all 200ms ease-in;\n  width: 16px;\n  z-index: 1;\n"])), function (_ref2) {
   var checked = _ref2.checked;
   return checked ? getToggleVariantProp("backgroundHandleActive") : getToggleVariantProp("backgroundHandleInactive");
 });
-var Input$1 = styled.input(_templateObject2$Y || (_templateObject2$Y = _taggedTemplateLiteral(["\n  cursor: pointer;\n  opacity: 0;\n  height: 100%;\n  position: absolute;\n  width: 100%;\n  z-index: 3;\n\n  &:checked + ", " {\n    left: calc(100% - 18px);\n  }\n"])), Handle);
-var StyledToggle = styled.div(_templateObject3$K || (_templateObject3$K = _taggedTemplateLiteral(["\n  align-items: center;\n  background: ", ";\n  border: 1px solid ", ";\n  border-radius: 11px;\n  cursor: pointer;\n  display: inline-flex;\n  height: 22px;\n  position: relative;\n  transition: background-color 200ms;\n  width: 42px;\n"])), function (_ref3) {
+var Input$1 = styledComponents.styled.input(_templateObject2$Y || (_templateObject2$Y = _taggedTemplateLiteral(["\n  cursor: pointer;\n  opacity: 0;\n  height: 100%;\n  position: absolute;\n  width: 100%;\n  z-index: 3;\n\n  &:checked + ", " {\n    left: calc(100% - 18px);\n  }\n"])), Handle);
+var StyledToggle = styledComponents.styled.div(_templateObject3$K || (_templateObject3$K = _taggedTemplateLiteral(["\n  align-items: center;\n  background: ", ";\n  border: 1px solid ", ";\n  border-radius: 11px;\n  cursor: pointer;\n  display: inline-flex;\n  height: 22px;\n  position: relative;\n  transition: background-color 200ms;\n  width: 42px;\n"])), function (_ref3) {
   var checked = _ref3.checked;
   return checked ? getToggleVariantProp("backgroundToggleActive") : getToggleVariantProp("backgroundToggleInactive");
 }, getToggleVariantProp("borderColor"));
@@ -9944,7 +9944,7 @@ var getBoxShadow$2 = function getBoxShadow(_ref) {
   }
   return theme.card.boxShadow;
 };
-var StyledCard = styled.div(_templateObject$1I || (_templateObject$1I = _taggedTemplateLiteral(["\n  background: ", ";\n  @-moz-document url-prefix() {\n    background: rgba(36, 36, 36, 0.95) !important;\n  }\n  box-shadow: 0 13px 20px rgba(0, 0, 0, 0.25);\n  border: 1px solid ", ";\n  border-radius: 15px;\n  box-shadow: ", ";\n  color: ", ";\n  overflow: hidden;\n  position: relative;\n  padding: 30px;\n\n  ", "\n"])), function (_ref2) {
+var StyledCard = styledComponents.styled.div(_templateObject$1I || (_templateObject$1I = _taggedTemplateLiteral(["\n  background: ", ";\n  @-moz-document url-prefix() {\n    background: rgba(36, 36, 36, 0.95) !important;\n  }\n  box-shadow: 0 13px 20px rgba(0, 0, 0, 0.25);\n  border: 1px solid ", ";\n  border-radius: 15px;\n  box-shadow: ", ";\n  color: ", ";\n  overflow: hidden;\n  position: relative;\n  padding: 30px;\n\n  ", "\n"])), function (_ref2) {
   var theme = _ref2.theme;
   return theme.colors.card;
 }, function (_ref3) {
@@ -9973,23 +9973,23 @@ var Card = function Card(_ref) {
 };
 
 var _templateObject$1H;
-var CardBody = styled.div(_templateObject$1H || (_templateObject$1H = _taggedTemplateLiteral(["\n  ", "\n  display: flex;\n  justify-content: center;\n"])), styledSystem.space);
+var CardBody = styledComponents.styled.div(_templateObject$1H || (_templateObject$1H = _taggedTemplateLiteral(["\n  ", "\n  display: flex;\n  justify-content: center;\n"])), styledSystem.space);
 CardBody.defaultProps = {
   p: "24px"
 };
 
 var _templateObject$1G;
-var CardHeader = styled.div(_templateObject$1G || (_templateObject$1G = _taggedTemplateLiteral(["\n  ", "\n  font-weight: 700;\n  font-size: 26px;\n  line-height: 130%;\n  display: flex;\n  width: 100%;\n  justify-content: space-between;\n"])), styledSystem.space);
+var CardHeader = styledComponents.styled.div(_templateObject$1G || (_templateObject$1G = _taggedTemplateLiteral(["\n  ", "\n  font-weight: 700;\n  font-size: 26px;\n  line-height: 130%;\n  display: flex;\n  width: 100%;\n  justify-content: space-between;\n"])), styledSystem.space);
 CardHeader.defaultProps = {};
 
 var _templateObject$1F;
-var CardFooter = styled.div(_templateObject$1F || (_templateObject$1F = _taggedTemplateLiteral(["\n  ", "\n  display: flex;\n  justify-content: center;\n"])), styledSystem.space);
+var CardFooter = styledComponents.styled.div(_templateObject$1F || (_templateObject$1F = _taggedTemplateLiteral(["\n  ", "\n  display: flex;\n  justify-content: center;\n"])), styledSystem.space);
 CardFooter.defaultProps = {
   p: "24px"
 };
 
 var _templateObject$1E;
-var StyledCardRibbon = styled.div(_templateObject$1E || (_templateObject$1E = _taggedTemplateLiteral(["\n  background-color: ", ";\n  color: white;\n  margin: 0;\n  padding: 0;\n  padding: 8px 0;\n  position: absolute;\n  right: 0;\n  top: 0;\n  text-align: center;\n  transform: translateX(30%) translateY(0%) rotate(45deg);\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 (_ref) {
+var StyledCardRibbon = styledComponents.styled.div(_templateObject$1E || (_templateObject$1E = _taggedTemplateLiteral(["\n  background-color: ", ";\n  color: white;\n  margin: 0;\n  padding: 0;\n  padding: 8px 0;\n  position: absolute;\n  right: 0;\n  top: 0;\n  text-align: center;\n  transform: translateX(30%) translateY(0%) rotate(45deg);\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 (_ref) {
   var _ref$variantColor = _ref.variantColor,
     variantColor = _ref$variantColor === void 0 ? "secondary" : _ref$variantColor,
     theme = _ref.theme;
@@ -10028,7 +10028,7 @@ var getScale$1 = function getScale(_ref) {
       return "32px";
   }
 };
-var Checkbox = styled.input.attrs({
+var Checkbox = styledComponents.styled.input.attrs({
   type: "checkbox"
 })(_templateObject$1D || (_templateObject$1D = _taggedTemplateLiteral(["\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: ", ";\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    border: ", ";\n  }\n\n  &:focus {\n    outline: none;\n    box-shadow: ", ";\n  }\n\n  &:checked {\n    background-color: ", ";\n    border: ", ";\n    &:after {\n      border-color: white;\n    }\n  }\n\n  &:disabled {\n    cursor: default;\n    opacity: 0.6;\n  }\n"])), getScale$1, getScale$1, function (_ref2) {
   var bordered = _ref2.bordered;
@@ -10074,7 +10074,7 @@ var getBottom = function getBottom(_ref2) {
   }
   return "auto";
 };
-var DropdownContent = styled.div(_templateObject$1C || (_templateObject$1C = _taggedTemplateLiteral(["\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  overflow-x: hidden;\n  z-index: ", ";\n  border-radius: ", ";\n"])), getLeft, getBottom, function (_ref3) {
+var DropdownContent = styledComponents.styled.div(_templateObject$1C || (_templateObject$1C = _taggedTemplateLiteral(["\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  overflow-x: hidden;\n  z-index: ", ";\n  border-radius: ", ";\n"])), getLeft, getBottom, function (_ref3) {
   var theme = _ref3.theme;
   return theme.nav.background;
 }, function (_ref4) {
@@ -10087,7 +10087,7 @@ var DropdownContent = styled.div(_templateObject$1C || (_templateObject$1C = _ta
   var theme = _ref6.theme;
   return theme.radii.small;
 });
-var Container$7 = styled.div(_templateObject2$X || (_templateObject2$X = _taggedTemplateLiteral(["\n  position: relative;\n  &:hover ", ", &:focus-within ", " {\n    display: flex;\n  }\n"])), DropdownContent, DropdownContent);
+var Container$7 = styledComponents.styled.div(_templateObject2$X || (_templateObject2$X = _taggedTemplateLiteral(["\n  position: relative;\n  &:hover ", ", &:focus-within ", " {\n    display: flex;\n  }\n"])), DropdownContent, DropdownContent);
 var Dropdown = function Dropdown(_ref7) {
   var target = _ref7.target,
     _ref7$position = _ref7.position,
@@ -10106,8 +10106,8 @@ Dropdown.defaultProps = {
 
 var _excluded$e = ["tokenName", "amount", "tokenIcon", "actions"];
 var _templateObject$1B, _templateObject2$W, _templateObject3$J, _templateObject4$w, _templateObject5$t, _templateObject6$j, _templateObject7$f;
-var StyledHeading = styled.div(_templateObject$1B || (_templateObject$1B = _taggedTemplateLiteral(["\n  font-weight: 700;\n"])));
-var StyledEarnedToken = styled.div(_templateObject2$W || (_templateObject2$W = _taggedTemplateLiteral(["\n  width: 100%;\n  background: ", ";\n  border-radius: ", ";\n  overflow: hidden;\n  position: relative;\n  padding: ", ";\n  color: ", ";\n  font-size: 16px;\n  font-weight: 700;\n  line-height: 28px;\n\n  ", "\n\n  ", " {\n    padding: 15px;\n    border: 1px solid ", ";\n    font-size: 20px;\n    line-height: 26px;\n  }\n"])), function (_ref) {
+var StyledHeading = styledComponents.styled.div(_templateObject$1B || (_templateObject$1B = _taggedTemplateLiteral(["\n  font-weight: 700;\n"])));
+var StyledEarnedToken = styledComponents.styled.div(_templateObject2$W || (_templateObject2$W = _taggedTemplateLiteral(["\n  width: 100%;\n  background: ", ";\n  border-radius: ", ";\n  overflow: hidden;\n  position: relative;\n  padding: ", ";\n  color: ", ";\n  font-size: 16px;\n  font-weight: 700;\n  line-height: 28px;\n\n  ", "\n\n  ", " {\n    padding: 15px;\n    border: 1px solid ", ";\n    font-size: 20px;\n    line-height: 26px;\n  }\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.backgrounds.secondary;
 }, function (_ref2) {
@@ -10122,7 +10122,7 @@ var StyledEarnedToken = styled.div(_templateObject2$W || (_templateObject2$W = _
   return theme.colors.white;
 }, function (_ref5) {
   var toggled = _ref5.toggled;
-  return toggled && styled.css(_templateObject3$J || (_templateObject3$J = _taggedTemplateLiteral(["\n      border: 1px solid ", ";\n    "])), function (_ref6) {
+  return toggled && styledComponents.css(_templateObject3$J || (_templateObject3$J = _taggedTemplateLiteral(["\n      border: 1px solid ", ";\n    "])), function (_ref6) {
     var theme = _ref6.theme;
     return theme.colors.white10;
   });
@@ -10133,19 +10133,19 @@ var StyledEarnedToken = styled.div(_templateObject2$W || (_templateObject2$W = _
   var theme = _ref8.theme;
   return theme.colors.white10;
 });
-var Amount = styled.div(_templateObject4$w || (_templateObject4$w = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: flex-start;\n  width: 100%;\n\n  svg {\n    width: 24px;\n    height: 24px;\n    margin-top: 5px;\n    margin-right: 15px;\n\n    ", " {\n      margin-top: 0;\n      margin-right: 8px;\n    }\n  }\n\n  ", " {\n    display: flex;\n    flex-direction: row;\n    justify-content: flex-start;\n    align-items: center;\n    height: 24px;\n    padding: 25px 0;\n  }\n"])), function (_ref9) {
+var Amount = styledComponents.styled.div(_templateObject4$w || (_templateObject4$w = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: flex-start;\n  width: 100%;\n\n  svg {\n    width: 24px;\n    height: 24px;\n    margin-top: 5px;\n    margin-right: 15px;\n\n    ", " {\n      margin-top: 0;\n      margin-right: 8px;\n    }\n  }\n\n  ", " {\n    display: flex;\n    flex-direction: row;\n    justify-content: flex-start;\n    align-items: center;\n    height: 24px;\n    padding: 25px 0;\n  }\n"])), function (_ref9) {
   var theme = _ref9.theme;
   return theme.mediaQueries.sm;
 }, function (_ref0) {
   var theme = _ref0.theme;
   return theme.mediaQueries.sm;
 });
-var Actions = styled.div(_templateObject5$t || (_templateObject5$t = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n\n  button {\n    width: 100%;\n    height: 40px;\n    font-size: 11px;\n    padding: 0;\n  }\n\n  ", " {\n    flex-direction: column;\n\n    button {\n      font-size: 16px;\n      margin-bottom: 5px;\n    }\n  }\n"])), function (_ref1) {
+var Actions = styledComponents.styled.div(_templateObject5$t || (_templateObject5$t = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n\n  button {\n    width: 100%;\n    height: 40px;\n    font-size: 11px;\n    padding: 0;\n  }\n\n  ", " {\n    flex-direction: column;\n\n    button {\n      font-size: 16px;\n      margin-bottom: 5px;\n    }\n  }\n"])), function (_ref1) {
   var theme = _ref1.theme;
   return theme.mediaQueries.sm;
 });
-var MobileInfo = styled.div(_templateObject6$j || (_templateObject6$j = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  width: 80%;\n  margin-bottom: 10px;\n"])));
-var Toggle = styled.div(_templateObject7$f || (_templateObject7$f = _taggedTemplateLiteral(["\n  justify-self: flex-end;\n\n  svg {\n    margin: 0;\n  }\n"])));
+var MobileInfo = styledComponents.styled.div(_templateObject6$j || (_templateObject6$j = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  width: 80%;\n  margin-bottom: 10px;\n"])));
+var Toggle = styledComponents.styled.div(_templateObject7$f || (_templateObject7$f = _taggedTemplateLiteral(["\n  justify-self: flex-end;\n\n  svg {\n    margin: 0;\n  }\n"])));
 var EarnedToken = function EarnedToken(_ref10) {
   var tokenName = _ref10.tokenName,
     amount = _ref10.amount,
@@ -10206,7 +10206,7 @@ exports.Tokens = void 0;
 })(exports.Tokens || (exports.Tokens = {}));
 
 var _templateObject$1A;
-var StyledEarnedWrapper = styled.div(_templateObject$1A || (_templateObject$1A = _taggedTemplateLiteral(["\n  border: 1px solid ", ";\n  background: ", ";\n  width: 100%;\n  border-radius: ", ";\n  color: ", ";\n  overflow: hidden;\n  position: relative;\n"])), function (_ref) {
+var StyledEarnedWrapper = styledComponents.styled.div(_templateObject$1A || (_templateObject$1A = _taggedTemplateLiteral(["\n  border: 1px solid ", ";\n  background: ", ";\n  width: 100%;\n  border-radius: ", ";\n  color: ", ";\n  overflow: hidden;\n  position: relative;\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.colors.white7;
 }, function (_ref2) {
@@ -10230,7 +10230,7 @@ var EarnedWrapper = function EarnedWrapper(_ref) {
 };
 
 var _templateObject$1z;
-var EarnedWrapperHeader = styled.div(_templateObject$1z || (_templateObject$1z = _taggedTemplateLiteral(["\n  font-size: 20px;\n  line-height: 26px;\n  padding: 15px;\n  font-weight: 700;\n  color: ", ";\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n\n  ", " {\n    font-size: 26px;\n    line-height: 33.8px;\n    padding: 25px 10px 25px 30px;\n  }\n"])), function (_ref) {
+var EarnedWrapperHeader = styledComponents.styled.div(_templateObject$1z || (_templateObject$1z = _taggedTemplateLiteral(["\n  font-size: 20px;\n  line-height: 26px;\n  padding: 15px;\n  font-weight: 700;\n  color: ", ";\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n\n  ", " {\n    font-size: 26px;\n    line-height: 33.8px;\n    padding: 25px 10px 25px 30px;\n  }\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.colors.white;
 }, function (_ref2) {
@@ -10242,7 +10242,7 @@ EarnedWrapperHeader.defaultProps = {
 };
 
 var _templateObject$1y;
-var GridLayout$1 = styled.div(_templateObject$1y || (_templateObject$1y = _taggedTemplateLiteral(["\n  display: grid;\n  grid-template-columns: repeat(8, 1fr);\n  grid-gap: 16px;\n  ", " {\n    grid-gap: 10px;\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 (_ref) {
+var GridLayout$1 = styledComponents.styled.div(_templateObject$1y || (_templateObject$1y = _taggedTemplateLiteral(["\n  display: grid;\n  grid-template-columns: repeat(8, 1fr);\n  grid-gap: 16px;\n  ", " {\n    grid-gap: 10px;\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 (_ref) {
   var theme = _ref.theme;
   return theme.mediaQueries.sm;
 }, function (_ref2) {
@@ -10254,20 +10254,20 @@ var GridLayout$1 = styled.div(_templateObject$1y || (_templateObject$1y = _tagge
 });
 
 var _templateObject$1x;
-var GridLayout = styled(GridLayout$1)(_templateObject$1x || (_templateObject$1x = _taggedTemplateLiteral(["\n  & > div {\n    grid-column: span 6;\n    ", " {\n      grid-column: span 4;\n    }\n  }\n"])), function (_ref) {
+var GridLayout = styledComponents.styled(GridLayout$1)(_templateObject$1x || (_templateObject$1x = _taggedTemplateLiteral(["\n  & > div {\n    grid-column: span 6;\n    ", " {\n      grid-column: span 4;\n    }\n  }\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.mediaQueries.sm;
 });
 
 var _templateObject$1w, _templateObject2$V, _templateObject3$I;
-var StyledEarnedWrapperBody = styled.div(_templateObject$1w || (_templateObject$1w = _taggedTemplateLiteral(["\n  width: 100%;\n  display: flex;\n  justify-content: flex-start;\n  padding: 0 10px;\n\n  ", " {\n    padding: 0 30px;\n    margin-bottom: ", " !important;\n  }\n"])), function (_ref) {
+var StyledEarnedWrapperBody = styledComponents.styled.div(_templateObject$1w || (_templateObject$1w = _taggedTemplateLiteral(["\n  width: 100%;\n  display: flex;\n  justify-content: flex-start;\n  padding: 0 10px;\n\n  ", " {\n    padding: 0 30px;\n    margin-bottom: ", " !important;\n  }\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.mediaQueries.md;
 }, function (_ref2) {
   var withoutMore = _ref2.withoutMore;
   return withoutMore ? "30px" : "0px";
 });
-var StyledCardsLayout = styled(GridLayout$1)(_templateObject2$V || (_templateObject2$V = _taggedTemplateLiteral(["\n  width: 100%;\n\n  & > div {\n    grid-column: span 12;\n    ", " {\n      grid-column: span 4;\n    }\n    ", " {\n      grid-column: span 4;\n    }\n    ", " {\n      grid-column: span ", ";\n    }\n  }\n"])), function (_ref3) {
+var StyledCardsLayout = styledComponents.styled(GridLayout$1)(_templateObject2$V || (_templateObject2$V = _taggedTemplateLiteral(["\n  width: 100%;\n\n  & > div {\n    grid-column: span 12;\n    ", " {\n      grid-column: span 4;\n    }\n    ", " {\n      grid-column: span 4;\n    }\n    ", " {\n      grid-column: span ", ";\n    }\n  }\n"])), function (_ref3) {
   var theme = _ref3.theme;
   return theme.mediaQueries.sm;
 }, function (_ref4) {
@@ -10280,7 +10280,7 @@ var StyledCardsLayout = styled(GridLayout$1)(_templateObject2$V || (_templateObj
   var childrenNumber = _ref6.childrenNumber;
   return childrenNumber === 3 ? "4" : "3";
 });
-var EarnedWrapperFooter = styled.div(_templateObject3$I || (_templateObject3$I = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  padding: 10px 5px;\n\n  ", " {\n    padding: 20px 30px;\n  }\n"])), function (_ref7) {
+var EarnedWrapperFooter = styledComponents.styled.div(_templateObject3$I || (_templateObject3$I = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  padding: 10px 5px;\n\n  ", " {\n    padding: 20px 30px;\n  }\n"])), function (_ref7) {
   var theme = _ref7.theme;
   return theme.mediaQueries.md;
 });
@@ -10348,7 +10348,7 @@ var EarnedWrapperBody = function EarnedWrapperBody(_ref8) {
 };
 
 var _templateObject$1v;
-var StyledEarnedCarouselWrapper = styled.div(_templateObject$1v || (_templateObject$1v = _taggedTemplateLiteral(["\n  border: 1px solid ", ";\n  background: ", ";\n  width: 100%;\n  border-radius: ", ";\n  color: ", ";\n  overflow: hidden;\n  position: relative;\n  padding-bottom: 10px;\n  ", " {\n    padding-bottom: 0px;\n  }\n"])), function (_ref) {
+var StyledEarnedCarouselWrapper = styledComponents.styled.div(_templateObject$1v || (_templateObject$1v = _taggedTemplateLiteral(["\n  border: 1px solid ", ";\n  background: ", ";\n  width: 100%;\n  border-radius: ", ";\n  color: ", ";\n  overflow: hidden;\n  position: relative;\n  padding-bottom: 10px;\n  ", " {\n    padding-bottom: 0px;\n  }\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.colors.white7;
 }, function (_ref2) {
@@ -10375,7 +10375,7 @@ var EarnedCarouselWrapper = function EarnedCarouselWrapper(_ref) {
 };
 
 var _templateObject$1u;
-var EarnedCarouselWrapperHeader = styled.div(_templateObject$1u || (_templateObject$1u = _taggedTemplateLiteral(["\n  font-size: 20px;\n  line-height: 26px;\n  padding: 15px;\n  font-weight: 700;\n  color: ", ";\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n\n  ", " {\n    font-size: 26px;\n    line-height: 33.8px;\n    padding: 25px 10px 25px 30px;\n  }\n"])), function (_ref) {
+var EarnedCarouselWrapperHeader = styledComponents.styled.div(_templateObject$1u || (_templateObject$1u = _taggedTemplateLiteral(["\n  font-size: 20px;\n  line-height: 26px;\n  padding: 15px;\n  font-weight: 700;\n  color: ", ";\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n\n  ", " {\n    font-size: 26px;\n    line-height: 33.8px;\n    padding: 25px 10px 25px 30px;\n  }\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.colors.white;
 }, function (_ref2) {
@@ -10387,8 +10387,8 @@ EarnedCarouselWrapperHeader.defaultProps = {
 };
 
 var _templateObject$1t, _templateObject2$U, _templateObject3$H;
-var CSSTokenWrapper = styled.div(_templateObject$1t || (_templateObject$1t = _taggedTemplateLiteral(["\n  padding: 0 10px;\n\n  @media (max-width: 800px) {\n    width: 50%;\n  }\n  @media (min-width: 800px) {\n    width: 33.3%;\n  }\n  @media (min-width: 1200px) {\n    width: 25%;\n  }\n"])));
-var SliderWrapper = styled.div(_templateObject2$U || (_templateObject2$U = _taggedTemplateLiteral(["\n  ", " {\n    margin: ", ";\n  }\n\n  ", " {\n    margin: ", ";\n  }\n\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n"])), function (_ref) {
+var CSSTokenWrapper = styledComponents.styled.div(_templateObject$1t || (_templateObject$1t = _taggedTemplateLiteral(["\n  padding: 0 10px;\n\n  @media (max-width: 800px) {\n    width: 50%;\n  }\n  @media (min-width: 800px) {\n    width: 33.3%;\n  }\n  @media (min-width: 1200px) {\n    width: 25%;\n  }\n"])));
+var SliderWrapper = styledComponents.styled.div(_templateObject2$U || (_templateObject2$U = _taggedTemplateLiteral(["\n  ", " {\n    margin: ", ";\n  }\n\n  ", " {\n    margin: ", ";\n  }\n\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.mediaQueries.sm;
 }, function (_ref2) {
@@ -10401,7 +10401,7 @@ var SliderWrapper = styled.div(_templateObject2$U || (_templateObject2$U = _tagg
   var dots = _ref4.dots;
   return dots ? "0 20px 60px" : "0 5px 15px";
 });
-var StyledSlider$1 = styled(Slider)(_templateObject3$H || (_templateObject3$H = _taggedTemplateLiteral(["\n  @media (max-width: 800px) {\n    width: ", ";\n  }\n  @media (min-width: 800px) {\n    width: ", ";\n  }\n  @media (min-width: 1200px) {\n    width: ", ";\n  }\n\n  .slick-track {\n    display: flex;\n    > div {\n      padding: 0 10px;\n    }\n  }\n\n  .slick-dots {\n    .slick-active {\n      div {\n        background: ", " !important;\n      }\n    }\n  }\n"])), function (_ref5) {
+var StyledSlider$1 = styledComponents.styled(Slider)(_templateObject3$H || (_templateObject3$H = _taggedTemplateLiteral(["\n  @media (max-width: 800px) {\n    width: ", ";\n  }\n  @media (min-width: 800px) {\n    width: ", ";\n  }\n  @media (min-width: 1200px) {\n    width: ", ";\n  }\n\n  .slick-track {\n    display: flex;\n    > div {\n      padding: 0 10px;\n    }\n  }\n\n  .slick-dots {\n    .slick-active {\n      div {\n        background: ", " !important;\n      }\n    }\n  }\n"])), function (_ref5) {
   var withoutMain = _ref5.withoutMain;
   if (withoutMain) {
     return "100%";
@@ -10579,7 +10579,7 @@ var getBoxShadow$1 = function getBoxShadow(_ref) {
   }
   return theme.infoBox.boxShadow;
 };
-var StyledInfoBox = styled.div(_templateObject$1s || (_templateObject$1s = _taggedTemplateLiteral(["\n  filter: drop-shadow(rgba(25, 19, 38, 0.15) 0px 1px 4px);\n  width: 100%;\n  background: rgb(22, 22, 29);\n  border: 1px solid rgb(82, 75, 99);\n  border-radius: 15px;\n  border: 1px solid ", ";\n  box-shadow: ", ";\n  color: ", ";\n  overflow: hidden;\n  position: relative;\n\n  ", "\n"])), function (_ref2) {
+var StyledInfoBox = styledComponents.styled.div(_templateObject$1s || (_templateObject$1s = _taggedTemplateLiteral(["\n  filter: drop-shadow(rgba(25, 19, 38, 0.15) 0px 1px 4px);\n  width: 100%;\n  background: rgb(22, 22, 29);\n  border: 1px solid rgb(82, 75, 99);\n  border-radius: 15px;\n  border: 1px solid ", ";\n  box-shadow: ", ";\n  color: ", ";\n  overflow: hidden;\n  position: relative;\n\n  ", "\n"])), function (_ref2) {
   var theme = _ref2.theme;
   return theme.colors.borderColor;
 }, getBoxShadow$1, function (_ref3) {
@@ -10601,17 +10601,17 @@ var InfoBox$1 = function InfoBox(_ref) {
 };
 
 var _templateObject$1r;
-var InfoBox = styled.div(_templateObject$1r || (_templateObject$1r = _taggedTemplateLiteral(["\n  ", ";\n  padding: 20px;\n  display: flex;\n  justify-content: flex-start;\n"])), styledSystem.space);
+var InfoBox = styledComponents.styled.div(_templateObject$1r || (_templateObject$1r = _taggedTemplateLiteral(["\n  ", ";\n  padding: 20px;\n  display: flex;\n  justify-content: flex-start;\n"])), styledSystem.space);
 InfoBox.defaultProps = {
   p: "24px"
 };
 
 var _templateObject$1q;
-var InfoBoxHeader = styled.div(_templateObject$1q || (_templateObject$1q = _taggedTemplateLiteral(["\n  ", ";\n  font-weight: 600;\n  font-size: 24px;\n  line-height: 130%;\n  color: white;\n\n  display: flex;\n  height: 55px;\n  padding: 0 20px;\n  justify-content: space-between;\n  align-items: center;\n  background: rgba(10, 10, 10, 1);\n"])), styledSystem.space);
+var InfoBoxHeader = styledComponents.styled.div(_templateObject$1q || (_templateObject$1q = _taggedTemplateLiteral(["\n  ", ";\n  font-weight: 600;\n  font-size: 24px;\n  line-height: 130%;\n  color: white;\n\n  display: flex;\n  height: 55px;\n  padding: 0 20px;\n  justify-content: space-between;\n  align-items: center;\n  background: rgba(10, 10, 10, 1);\n"])), styledSystem.space);
 InfoBoxHeader.defaultProps = {};
 
 var _templateObject$1p;
-var InfoBoxFooter = styled.div(_templateObject$1p || (_templateObject$1p = _taggedTemplateLiteral(["\n  ", ";\n  padding: 20px;\n  display: flex;\n  justify-content: flex-start;\n"])), styledSystem.space);
+var InfoBoxFooter = styledComponents.styled.div(_templateObject$1p || (_templateObject$1p = _taggedTemplateLiteral(["\n  ", ";\n  padding: 20px;\n  display: flex;\n  justify-content: flex-start;\n"])), styledSystem.space);
 InfoBoxFooter.defaultProps = {
   p: "24px"
 };
@@ -10653,7 +10653,7 @@ var getHeight = function getHeight(_ref2) {
       return "40px";
   }
 };
-var Input = styled.input(_templateObject$1o || (_templateObject$1o = _taggedTemplateLiteral(["\n  background-color: ", ";\n  border: 1px solid rgba(255, 255, 255, 0.3);\n  border-radius: 10px;\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\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 (_ref3) {
+var Input = styledComponents.styled.input(_templateObject$1o || (_templateObject$1o = _taggedTemplateLiteral(["\n  background-color: ", ";\n  border: 1px solid rgba(255, 255, 255, 0.3);\n  border-radius: 10px;\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\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 (_ref3) {
   var theme = _ref3.theme;
   return theme.colors.input;
 }, getBoxShadow, function (_ref4) {
@@ -10682,24 +10682,24 @@ var _excluded$9 = ["children"],
   _excluded2 = ["children"],
   _excluded3 = ["children"];
 var _templateObject$1n, _templateObject2$T, _templateObject3$G, _templateObject4$v, _templateObject5$s, _templateObject6$i, _templateObject7$e, _templateObject8$a, _templateObject9$9;
-var InputLabelBox = styled.div(_templateObject$1n || (_templateObject$1n = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: 8px;\n"])));
-var Label = styled(Text)(_templateObject2$T || (_templateObject2$T = _taggedTemplateLiteral(["\n  color: ", ";\n  font-weight: bold;\n  font-size: 16px;\n  line-height: 28px;\n"])), function (_ref) {
+var InputLabelBox = styledComponents.styled.div(_templateObject$1n || (_templateObject$1n = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: 8px;\n"])));
+var Label = styledComponents.styled(Text)(_templateObject2$T || (_templateObject2$T = _taggedTemplateLiteral(["\n  color: ", ";\n  font-weight: bold;\n  font-size: 16px;\n  line-height: 28px;\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.colors.white55;
 });
-var OptionalBox = styled(Text)(_templateObject3$G || (_templateObject3$G = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  flex-direction: column;\n"])));
-var Optional = styled(Text)(_templateObject4$v || (_templateObject4$v = _taggedTemplateLiteral(["\n  color: #373749;\n  font-weight: bold;\n  font-size: 11px;\n  line-height: 138.5%;\n"])));
-var StyledInputDesc = styled(Text)(_templateObject5$s || (_templateObject5$s = _taggedTemplateLiteral(["\n  color: ", ";\n  font-weight: normal;\n  font-size: 12px;\n  line-height: 170%;\n"])), function (_ref2) {
+var OptionalBox = styledComponents.styled(Text)(_templateObject3$G || (_templateObject3$G = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  flex-direction: column;\n"])));
+var Optional = styledComponents.styled(Text)(_templateObject4$v || (_templateObject4$v = _taggedTemplateLiteral(["\n  color: #373749;\n  font-weight: bold;\n  font-size: 11px;\n  line-height: 138.5%;\n"])));
+var StyledInputDesc = styledComponents.styled(Text)(_templateObject5$s || (_templateObject5$s = _taggedTemplateLiteral(["\n  color: ", ";\n  font-weight: normal;\n  font-size: 12px;\n  line-height: 170%;\n"])), function (_ref2) {
   var theme = _ref2.theme;
   return theme.colors.white55;
 });
-var StyledInputBottomDesc = styled(StyledInputDesc)(_templateObject6$i || (_templateObject6$i = _taggedTemplateLiteral(["\n  padding-left: 8px;\n"])));
-var textStyle = styled.css(_templateObject7$e || (_templateObject7$e = _taggedTemplateLiteral(["\n  font-size: 11px;\n  line-height: 138.5%;\n  font-weight: bold;\n  padding: 0px 0px 10px 24px;\n  margin-bottom: -25px;\n"])));
-var StyledErrorMessage = styled(Text)(_templateObject8$a || (_templateObject8$a = _taggedTemplateLiteral(["\n  ", ";\n  color: ", ";\n"])), textStyle, function (_ref3) {
+var StyledInputBottomDesc = styledComponents.styled(StyledInputDesc)(_templateObject6$i || (_templateObject6$i = _taggedTemplateLiteral(["\n  padding-left: 8px;\n"])));
+var textStyle = styledComponents.css(_templateObject7$e || (_templateObject7$e = _taggedTemplateLiteral(["\n  font-size: 11px;\n  line-height: 138.5%;\n  font-weight: bold;\n  padding: 0px 0px 10px 24px;\n  margin-bottom: -25px;\n"])));
+var StyledErrorMessage = styledComponents.styled(Text)(_templateObject8$a || (_templateObject8$a = _taggedTemplateLiteral(["\n  ", ";\n  color: ", ";\n"])), textStyle, function (_ref3) {
   var theme = _ref3.theme;
   return theme.colors.error;
 });
-var StyledSuccessMessage = styled(Text)(_templateObject9$9 || (_templateObject9$9 = _taggedTemplateLiteral(["\n  ", ";\n  color: ", ";\n"])), textStyle, function (_ref4) {
+var StyledSuccessMessage = styledComponents.styled(Text)(_templateObject9$9 || (_templateObject9$9 = _taggedTemplateLiteral(["\n  ", ";\n  color: ", ";\n"])), textStyle, function (_ref4) {
   var theme = _ref4.theme;
   return theme.colors.primary;
 });
@@ -10767,7 +10767,7 @@ var InputWrapper$1 = function InputWrapper(_ref0) {
 };
 
 var _templateObject$1m, _templateObject2$S;
-var StyledInput$1 = styled(function (_ref) {
+var StyledInput$1 = styledComponents.styled(function (_ref) {
   var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
   return /*#__PURE__*/jsxRuntime.jsx(DatePicker.DatePicker, _objectSpread2({}, props));
 })(_templateObject$1m || (_templateObject$1m = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 60px;\n  .MuiInputBase-root {\n    border: 1px solid\n      ", ";\n    border-radius: 10px;\n    background: ", ";\n    padding: 16px 24px;\n    color: white;\n    font-weight: 500;\n    font-size: 16px;\n    line-height: 28px;\n    &.Mui-disabled {\n      .MuiInputBase-input {\n        color: ", ";\n      }\n    }\n  }\n  .MuiFormHelperText-root.Mui-error {\n    display: none;\n  }\n"])), function (props) {
@@ -10778,7 +10778,7 @@ var StyledInput$1 = styled(function (_ref) {
   var theme = _ref2.theme;
   return theme.colors.white55;
 });
-var DateInputWrapper = styled(function (_ref3) {
+var DateInputWrapper = styledComponents.styled(function (_ref3) {
   var props = _extends({}, (_objectDestructuringEmpty(_ref3), _ref3));
   return /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread2({}, props));
 })(_templateObject2$S || (_templateObject2$S = _taggedTemplateLiteral(["\n  margin-bottom: 15px;\n"])));
@@ -10795,7 +10795,7 @@ var MuiDateInput = function MuiDateInput(_ref4) {
     error = _ref4.error,
     _ref4$disabled = _ref4.disabled,
     disabled = _ref4$disabled === void 0 ? false : _ref4$disabled;
-  var theme = styled.useTheme();
+  var theme = styledComponents.useTheme();
   var defaultMaterialTheme = styles.createTheme({
     palette: {
       primary: {
@@ -10846,7 +10846,7 @@ var MuiDateInput = function MuiDateInput(_ref4) {
 };
 
 var _templateObject$1l, _templateObject2$R;
-var DragAndDropZone = styled(function (_ref) {
+var DragAndDropZone = styledComponents.styled(function (_ref) {
   var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
   return /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread2({}, props));
 })(_templateObject$1l || (_templateObject$1l = _taggedTemplateLiteral(["\n  background: ", ";\n  cursor: ", ";\n  border: 1px\n    ", ";\n  box-sizing: border-box;\n  border-radius: 10px;\n  padding: 16px 24px;\n  font-weight: 500;\n  font-size: 16px;\n  line-height: 28px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 10px;\n"])), function (props) {
@@ -10856,7 +10856,7 @@ var DragAndDropZone = styled(function (_ref) {
 }, function (props) {
   return props.disabled ? "solid ".concat(props.theme.colors.white55) : props.error ? "solid ".concat(props.theme.colors.error) : props.value.length > 0 ? "solid ".concat(props.theme.colors.white55) : "dashed rgba(255, 255, 255, 0.03)";
 });
-var DragAndDropText = styled(function (_ref2) {
+var DragAndDropText = styledComponents.styled(function (_ref2) {
   var props = _extends({}, (_objectDestructuringEmpty(_ref2), _ref2));
   return /*#__PURE__*/jsxRuntime.jsx(Text, _objectSpread2({}, props));
 })(_templateObject2$R || (_templateObject2$R = _taggedTemplateLiteral(["\n  font-weight: 500;\n  font-size: 16px;\n  line-height: 28px;\n  color: ", ";\n  span {\n    color: ", ";\n  }\n"])), function (props) {
@@ -10934,12 +10934,12 @@ var MuiFileInput = function MuiFileInput(_ref3) {
 
 var _excluded$8 = ["name", "label", "placeholderLabel", "placeholder", "topDesc", "bottomDesc", "optional", "value", "onChange", "onBlur", "error", "textarea", "maxLength", "disabled", "success", "successMsg"];
 var _templateObject$1k, _templateObject2$Q, _templateObject3$F;
-var TextAreaWrapper = styled.div(_templateObject$1k || (_templateObject$1k = _taggedTemplateLiteral(["\n  position: relative;\n"])));
-var LengthText = styled(Text)(_templateObject2$Q || (_templateObject2$Q = _taggedTemplateLiteral(["\n  position: absolute;\n  font-weight: bold;\n  font-size: 11px;\n  line-height: 138.5%;\n  color: ", ";\n  bottom: 20px;\n  right: 15px;\n"])), function (_ref) {
+var TextAreaWrapper = styledComponents.styled.div(_templateObject$1k || (_templateObject$1k = _taggedTemplateLiteral(["\n  position: relative;\n"])));
+var LengthText = styledComponents.styled(Text)(_templateObject2$Q || (_templateObject2$Q = _taggedTemplateLiteral(["\n  position: absolute;\n  font-weight: bold;\n  font-size: 11px;\n  line-height: 138.5%;\n  color: ", ";\n  bottom: 20px;\n  right: 15px;\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.colors.grey;
 });
-var StyledTextField = styled(material.TextField)(_templateObject3$F || (_templateObject3$F = _taggedTemplateLiteral(["\n  &.MuiTextField-root {\n    margin-bottom: 10px;\n    width: 100%;\n    .MuiInputBase-input {\n      color: white;\n      ::placeholder {\n        opacity: 1;\n        color: ", ";\n      }\n    }\n    .MuiFilledInput-root {\n      background-color: ", ";\n      border: 1px solid ", ";\n      border-radius: 10px;\n      height: ", ";\n      .MuiFilledInput-input {\n        padding: ", ";\n      }\n      &.Mui-error {\n        border: 1px solid ", ";\n      }\n      &.Mui-focused {\n        border: 1px solid ", ";\n        box-shadow: 0px 0px 8px rgba(18, 255, 184, 0.15);\n        &.Mui-error {\n          border: 1px solid ", ";\n          box-shadow: unset;\n        }\n      }\n      &.Mui-disabled {\n        background-color: ", ";\n        border: 1px solid ", ";\n        .MuiInputBase-input {\n          color: ", ";\n        }\n      }\n      &.MuiFilledInput-underline:before {\n        border-bottom: unset;\n      }\n      &.MuiFilledInput-underline:after {\n        border-bottom: unset;\n      }\n    }\n    .MuiInputLabel-filled {\n      font-weight: 500;\n      font-size: 16px;\n      line-height: 28px;\n      transform: translate(24px, 17px);\n      color: ", ";\n      transition: all 0.15s;\n      &.MuiInputLabel-shrink {\n        font-weight: bold;\n        font-size: 11px;\n        line-height: 138.5%;\n        transform: translate(24px, 10px);\n        color: ", ";\n      }\n    }\n  }\n  .MuiFilledInput-multiline {\n    padding: 0px 12px 30px 0px;\n  }\n"])), function (_ref2) {
+var StyledTextField = styledComponents.styled(material.TextField)(_templateObject3$F || (_templateObject3$F = _taggedTemplateLiteral(["\n  &.MuiTextField-root {\n    margin-bottom: 10px;\n    width: 100%;\n    .MuiInputBase-input {\n      color: white;\n      ::placeholder {\n        opacity: 1;\n        color: ", ";\n      }\n    }\n    .MuiFilledInput-root {\n      background-color: ", ";\n      border: 1px solid ", ";\n      border-radius: 10px;\n      height: ", ";\n      .MuiFilledInput-input {\n        padding: ", ";\n      }\n      &.Mui-error {\n        border: 1px solid ", ";\n      }\n      &.Mui-focused {\n        border: 1px solid ", ";\n        box-shadow: 0px 0px 8px rgba(18, 255, 184, 0.15);\n        &.Mui-error {\n          border: 1px solid ", ";\n          box-shadow: unset;\n        }\n      }\n      &.Mui-disabled {\n        background-color: ", ";\n        border: 1px solid ", ";\n        .MuiInputBase-input {\n          color: ", ";\n        }\n      }\n      &.MuiFilledInput-underline:before {\n        border-bottom: unset;\n      }\n      &.MuiFilledInput-underline:after {\n        border-bottom: unset;\n      }\n    }\n    .MuiInputLabel-filled {\n      font-weight: 500;\n      font-size: 16px;\n      line-height: 28px;\n      transform: translate(24px, 17px);\n      color: ", ";\n      transition: all 0.15s;\n      &.MuiInputLabel-shrink {\n        font-weight: bold;\n        font-size: 11px;\n        line-height: 138.5%;\n        transform: translate(24px, 10px);\n        color: ", ";\n      }\n    }\n  }\n  .MuiFilledInput-multiline {\n    padding: 0px 12px 30px 0px;\n  }\n"])), function (_ref2) {
   var theme = _ref2.theme,
     disabled = _ref2.disabled;
   return disabled ? theme.colors.white55 : theme.colors.grey;
@@ -10999,7 +10999,7 @@ var MuiTextInput = function MuiTextInput(_ref11) {
     success = _ref11.success,
     successMsg = _ref11.successMsg,
     props = _objectWithoutProperties(_ref11, _excluded$8);
-  var theme = styled.useTheme();
+  var theme = styledComponents.useTheme();
   var _useState = React.useState(value ? value.length : 0),
     _useState2 = _slicedToArray(_useState, 2),
     textLength = _useState2[0],
@@ -11048,12 +11048,12 @@ var MuiTextInput = function MuiTextInput(_ref11) {
 };
 
 var _templateObject$1j, _templateObject2$P, _templateObject3$E;
-var CarouselBox = styled.div(_templateObject$1j || (_templateObject$1j = _taggedTemplateLiteral(["\n  height: 200px;\n"])));
-var StyledSlider = styled(Slider)(_templateObject2$P || (_templateObject2$P = _taggedTemplateLiteral(["\n  .slick-track {\n    > div {\n      padding: 0 10px;\n    }\n  }\n\n  .slick-dots {\n    .slick-active {\n      div {\n        background: ", " !important;\n      }\n    }\n  }\n"])), function (_ref) {
+var CarouselBox = styledComponents.styled.div(_templateObject$1j || (_templateObject$1j = _taggedTemplateLiteral(["\n  height: 200px;\n"])));
+var StyledSlider = styledComponents.styled(Slider)(_templateObject2$P || (_templateObject2$P = _taggedTemplateLiteral(["\n  .slick-track {\n    > div {\n      padding: 0 10px;\n    }\n  }\n\n  .slick-dots {\n    .slick-active {\n      div {\n        background: ", " !important;\n      }\n    }\n  }\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.colors.blue;
 });
-var ImageDiv = styled.div(_templateObject3$E || (_templateObject3$E = _taggedTemplateLiteral(["\n  background: ", ";\n  background-size: cover;\n  color: white;\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: flex-end;\n  padding-bottom: 30px;\n  height: 200px;\n  border-radius: 15px;\n  border: 1px solid ", ";\n"])), function (_ref2) {
+var ImageDiv = styledComponents.styled.div(_templateObject3$E || (_templateObject3$E = _taggedTemplateLiteral(["\n  background: ", ";\n  background-size: cover;\n  color: white;\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: flex-end;\n  padding-bottom: 30px;\n  height: 200px;\n  border-radius: 15px;\n  border: 1px solid ", ";\n"])), function (_ref2) {
   var background = _ref2.background;
   return background;
 }, function (_ref3) {
@@ -11123,7 +11123,7 @@ var getCheckedScale = function getCheckedScale(_ref2) {
       return "20px";
   }
 };
-var Radio = styled.input.attrs({
+var Radio = styledComponents.styled.input.attrs({
   type: "radio"
 })(_templateObject$1i || (_templateObject$1i = _taggedTemplateLiteral(["\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, getScale, function (_ref3) {
   var theme = _ref3.theme;
@@ -11266,7 +11266,7 @@ var darkColors = _objectSpread2(_objectSpread2(_objectSpread2({}, baseColors), b
 });
 
 var _templateObject$1h, _templateObject2$O;
-var StyledCoreTag = styled.div(_templateObject$1h || (_templateObject$1h = _taggedTemplateLiteral(["\n  width: auto;\n  height: 24px;\n  display: inline-flex;\n  justify-content: space-between;\n  align-items: center;\n  background-color: transparent;\n  border: 1px solid ", ";\n  border-radius: ", ";\n  color: ", ";\n  font-size: 14px;\n  font-weight: 700;\n  line-height: 1.5;\n  padding: 0 8px;\n  white-space: nowrap;\n\n  svg {\n    margin-left: ", "px;\n    margin-right: ", "px;\n    width: 16px;\n    height: 16px;\n    fill: ", ";\n  }\n"])), function (_ref) {
+var StyledCoreTag = styledComponents.styled.div(_templateObject$1h || (_templateObject$1h = _taggedTemplateLiteral(["\n  width: auto;\n  height: 24px;\n  display: inline-flex;\n  justify-content: space-between;\n  align-items: center;\n  background-color: transparent;\n  border: 1px solid ", ";\n  border-radius: ", ";\n  color: ", ";\n  font-size: 14px;\n  font-weight: 700;\n  line-height: 1.5;\n  padding: 0 8px;\n  white-space: nowrap;\n\n  svg {\n    margin-left: ", "px;\n    margin-right: ", "px;\n    width: 16px;\n    height: 16px;\n    fill: ", ";\n  }\n"])), function (_ref) {
   var theme = _ref.theme,
     active = _ref.active,
     color = _ref.color;
@@ -11290,7 +11290,7 @@ var StyledCoreTag = styled.div(_templateObject$1h || (_templateObject$1h = _tagg
     active = _ref6.active;
   return active ? theme.colors.primary : theme.colors.grey;
 });
-var StyledText = styled(Text)(_templateObject2$O || (_templateObject2$O = _taggedTemplateLiteral(["\n  font-weight: 700;\n  color: ", ";\n  font-size: 14px;\n  line-height: 20px;\n"])), function (_ref7) {
+var StyledText = styledComponents.styled(Text)(_templateObject2$O || (_templateObject2$O = _taggedTemplateLiteral(["\n  font-weight: 700;\n  color: ", ";\n  font-size: 14px;\n  line-height: 20px;\n"])), function (_ref7) {
   var theme = _ref7.theme,
     active = _ref7.active,
     color = _ref7.color;
@@ -11339,7 +11339,7 @@ var CoreTag = function CoreTag(_ref8) {
     active = _ref8$active === void 0 ? true : _ref8$active,
     variant = _ref8.variant,
     plainIcon = _ref8.plainIcon;
-  var theme = styled.useTheme();
+  var theme = styledComponents.useTheme();
   var _getTagPropsByVariant = getTagPropsByVariant(variant, active, theme),
     color = _getTagPropsByVariant.color,
     icon = _getTagPropsByVariant.icon;
@@ -11379,15 +11379,15 @@ var Icon$M = function Icon(props) {
 };
 
 var _templateObject$1g, _templateObject2$N, _templateObject3$D;
-var rotate = styled.keyframes(_templateObject$1g || (_templateObject$1g = _taggedTemplateLiteral(["\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n"])));
-var Container$6 = styled.div(_templateObject2$N || (_templateObject2$N = _taggedTemplateLiteral(["\n  position: relative;\n  height: ", "px;\n  width: ", "px;\n"])), function (_ref) {
+var rotate = styledComponents.keyframes(_templateObject$1g || (_templateObject$1g = _taggedTemplateLiteral(["\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n"])));
+var Container$6 = styledComponents.styled.div(_templateObject2$N || (_templateObject2$N = _taggedTemplateLiteral(["\n  position: relative;\n  height: ", "px;\n  width: ", "px;\n"])), function (_ref) {
   var size = _ref.size;
   return size;
 }, function (_ref2) {
   var size = _ref2.size;
   return size;
 });
-var RotatingSpinnerIcon = styled(Icon$M)(_templateObject3$D || (_templateObject3$D = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  animation: ", " 2s linear infinite;\n  transform: translate3d(0, 0, 0);\n"])), rotate);
+var RotatingSpinnerIcon = styledComponents.styled(Icon$M)(_templateObject3$D || (_templateObject3$D = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  animation: ", " 2s linear infinite;\n  transform: translate3d(0, 0, 0);\n"])), rotate);
 var Spinner = function Spinner(_ref3) {
   var _ref3$size = _ref3.size,
     size = _ref3$size === void 0 ? 128 : _ref3$size;
@@ -11400,13 +11400,13 @@ var Spinner = function Spinner(_ref3) {
 };
 
 var _templateObject$1f, _templateObject2$M, _templateObject3$C, _templateObject4$u;
-var StyledContainer = styled.div(_templateObject$1f || (_templateObject$1f = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  ", "\n"])), function (_ref) {
+var StyledContainer = styledComponents.styled.div(_templateObject$1f || (_templateObject$1f = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  ", "\n"])), function (_ref) {
   var loader = _ref.loader;
   return loader && "\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  ";
 });
-var StyledItem = styled.div(_templateObject2$M || (_templateObject2$M = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  border-bottom: 1px solid rgba(55, 55, 73, 0.3);\n  padding-top: 8px;\n  padding-bottom: 8px;\n"])));
-var StyledLabel = styled(Text)(_templateObject3$C || (_templateObject3$C = _taggedTemplateLiteral(["\n  opacity: 0.55;\n"])));
-var ListWrapper = styled.div(_templateObject4$u || (_templateObject4$u = _taggedTemplateLiteral(["\n  display: flex;\n  height: ", ";\n"])), function (_ref2) {
+var StyledItem = styledComponents.styled.div(_templateObject2$M || (_templateObject2$M = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  border-bottom: 1px solid rgba(55, 55, 73, 0.3);\n  padding-top: 8px;\n  padding-bottom: 8px;\n"])));
+var StyledLabel = styledComponents.styled(Text)(_templateObject3$C || (_templateObject3$C = _taggedTemplateLiteral(["\n  opacity: 0.55;\n"])));
+var ListWrapper = styledComponents.styled.div(_templateObject4$u || (_templateObject4$u = _taggedTemplateLiteral(["\n  display: flex;\n  height: ", ";\n"])), function (_ref2) {
   var customHeight = _ref2.customHeight;
   return customHeight ? "".concat(customHeight, "px") : "100%";
 });
@@ -11470,13 +11470,13 @@ var List = function List(_ref3) {
 };
 
 var _templateObject$1e, _templateObject2$L;
-var Bar = styled.div(_templateObject$1e || (_templateObject$1e = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  background-color: ", ";\n  border-top-left-radius: 32px;\n  border-bottom-left-radius: 32px;\n  height: 16px;\n  transition: width 200ms ease;\n"])), function (props) {
+var Bar = styledComponents.styled.div(_templateObject$1e || (_templateObject$1e = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  background-color: ", ";\n  border-top-left-radius: 32px;\n  border-bottom-left-radius: 32px;\n  height: 16px;\n  transition: width 200ms ease;\n"])), function (props) {
   return props.primary ? props.theme.colors.secondary : "".concat(props.theme.colors.secondary, "80");
 });
 Bar.defaultProps = {
   primary: false
 };
-var StyledProgress = styled.div(_templateObject2$L || (_templateObject2$L = _taggedTemplateLiteral(["\n  position: relative;\n  background-color: ", ";\n  border-radius: 32px;\n  box-shadow: ", ";\n  height: 16px;\n  overflow: hidden;\n"])), function (_ref) {
+var StyledProgress = styledComponents.styled.div(_templateObject2$L || (_templateObject2$L = _taggedTemplateLiteral(["\n  position: relative;\n  background-color: ", ";\n  border-radius: 32px;\n  box-shadow: ", ";\n  height: 16px;\n  overflow: hidden;\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.colors.input;
 }, function (_ref2) {
@@ -11485,7 +11485,7 @@ var StyledProgress = styled.div(_templateObject2$L || (_templateObject2$L = _tag
 });
 
 var _templateObject$1d;
-var ProgressBunnyWrapper = styled.div(_templateObject$1d || (_templateObject$1d = _taggedTemplateLiteral(["\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"])));
+var ProgressBunnyWrapper = styledComponents.styled.div(_templateObject$1d || (_templateObject$1d = _taggedTemplateLiteral(["\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"])));
 
 var stepGuard = function stepGuard(step) {
   if (step < 0) {
@@ -11533,9 +11533,9 @@ var variant = {
 
 var _excluded$6 = ["variant", "animation"];
 var _templateObject$1c, _templateObject2$K, _templateObject3$B, _templateObject4$t, _templateObject5$r;
-var waves = styled.keyframes(_templateObject$1c || (_templateObject$1c = _taggedTemplateLiteral(["\n   from {\n        left: -150px;\n    }\n    to   {\n        left: 100%;\n    }\n"])));
-var pulse = styled.keyframes(_templateObject2$K || (_templateObject2$K = _taggedTemplateLiteral(["\n  0% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.4;\n  }\n  100% {\n    opacity: 1;\n  }\n"])));
-var Root = styled.div(_templateObject3$B || (_templateObject3$B = _taggedTemplateLiteral(["\n  min-height: 20px;\n  display: block;\n  background-color: ", ";\n  border-radius: ", ";\n\n  ", "\n  ", "\n"])), function (_ref) {
+var waves = styledComponents.keyframes(_templateObject$1c || (_templateObject$1c = _taggedTemplateLiteral(["\n   from {\n        left: -150px;\n    }\n    to   {\n        left: 100%;\n    }\n"])));
+var pulse = styledComponents.keyframes(_templateObject2$K || (_templateObject2$K = _taggedTemplateLiteral(["\n  0% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.4;\n  }\n  100% {\n    opacity: 1;\n  }\n"])));
+var Root = styledComponents.styled.div(_templateObject3$B || (_templateObject3$B = _taggedTemplateLiteral(["\n  min-height: 20px;\n  display: block;\n  background-color: ", ";\n  border-radius: ", ";\n\n  ", "\n  ", "\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.colors.backgroundDisabled;
 }, function (_ref2) {
@@ -11543,8 +11543,8 @@ var Root = styled.div(_templateObject3$B || (_templateObject3$B = _taggedTemplat
     theme = _ref2.theme;
   return variant$1 === variant.CIRCLE ? theme.radii.circle : theme.radii.small;
 }, styledSystem.layout, styledSystem.space);
-var Pulse = styled(Root)(_templateObject4$t || (_templateObject4$t = _taggedTemplateLiteral(["\n  animation: ", " 2s infinite ease-out;\n  transform: translate3d(0, 0, 0);\n"])), pulse);
-var Waves = styled(Root)(_templateObject5$r || (_templateObject5$r = _taggedTemplateLiteral(["\n  position: relative;\n  overflow: hidden;\n  transform: translate3d(0, 0, 0);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  &:before {\n    content: \"\";\n    position: absolute;\n    background-image: linear-gradient(90deg, transparent, rgba(243, 243, 243, 0.5), transparent);\n    top: 0;\n    left: -150px;\n    height: 100%;\n    width: 150px;\n    animation: ", " 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;\n  }\n"])), waves);
+var Pulse = styledComponents.styled(Root)(_templateObject4$t || (_templateObject4$t = _taggedTemplateLiteral(["\n  animation: ", " 2s infinite ease-out;\n  transform: translate3d(0, 0, 0);\n"])), pulse);
+var Waves = styledComponents.styled(Root)(_templateObject5$r || (_templateObject5$r = _taggedTemplateLiteral(["\n  position: relative;\n  overflow: hidden;\n  transform: translate3d(0, 0, 0);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  &:before {\n    content: \"\";\n    position: absolute;\n    background-image: linear-gradient(90deg, transparent, rgba(243, 243, 243, 0.5), transparent);\n    top: 0;\n    left: -150px;\n    height: 100%;\n    width: 150px;\n    animation: ", " 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;\n  }\n"])), waves);
 var Skeleton = function Skeleton(_ref3) {
   var _ref3$variant = _ref3.variant,
     variant$1 = _ref3$variant === void 0 ? variant.RECT : _ref3$variant,
@@ -11563,8 +11563,8 @@ var Skeleton = function Skeleton(_ref3) {
 
 var _excluded$5 = ["text"];
 var _templateObject$1b, _templateObject2$J;
-var StyledButton = styled(Button$1)(_templateObject$1b || (_templateObject$1b = _taggedTemplateLiteral(["\n  width: 100%;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 11px 27px;\n  border-radius: 10px;\n  // Should this color be added to theme colors?\n  background-color: rgb(43, 43, 56);\n\n  #open-new {\n    width: 13.25px;\n    height: 13.25px;\n  }\n"])));
-var DetailsContainer = styled.div(_templateObject2$J || (_templateObject2$J = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n\n  * {\n    margin-right: 10px;\n  }\n"])));
+var StyledButton = styledComponents.styled(Button$1)(_templateObject$1b || (_templateObject$1b = _taggedTemplateLiteral(["\n  width: 100%;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 11px 27px;\n  border-radius: 10px;\n  // Should this color be added to theme colors?\n  background-color: rgb(43, 43, 56);\n\n  #open-new {\n    width: 13.25px;\n    height: 13.25px;\n  }\n"])));
+var DetailsContainer = styledComponents.styled.div(_templateObject2$J || (_templateObject2$J = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n\n  * {\n    margin-right: 10px;\n  }\n"])));
 var SwapButton = function SwapButton(_ref) {
   var _ref$text = _ref.text,
     text = _ref$text === void 0 ? "Token info page" : _ref$text,
@@ -12277,7 +12277,7 @@ var lightTheme = _objectSpread2(_objectSpread2({}, base), {}, {
 });
 
 var _templateObject$1a;
-var TableActiveDot = styled.div(_templateObject$1a || (_templateObject$1a = _taggedTemplateLiteral(["\n  width: 8px;\n  height: 8px;\n  background: ", ";\n  border-radius: 50%;\n  margin: auto;\n  box-shadow: ", ";\n  @media (max-width: 576px) {\n    margin: 0;\n  }\n"])), function (_ref) {
+var TableActiveDot = styledComponents.styled.div(_templateObject$1a || (_templateObject$1a = _taggedTemplateLiteral(["\n  width: 8px;\n  height: 8px;\n  background: ", ";\n  border-radius: 50%;\n  margin: auto;\n  box-shadow: ", ";\n  @media (max-width: 576px) {\n    margin: 0;\n  }\n"])), function (_ref) {
   var actionActive = _ref.actionActive;
   return actionActive ? "#12FFB8" : "#373749";
 }, function (_ref2) {
@@ -12286,7 +12286,7 @@ var TableActiveDot = styled.div(_templateObject$1a || (_templateObject$1a = _tag
 });
 
 var _templateObject$19, _templateObject2$I, _templateObject3$A, _templateObject4$s, _templateObject5$q;
-var StyledRow = styled.div(_templateObject$19 || (_templateObject$19 = _taggedTemplateLiteral(["\n  position: relative;\n  width: calc(100% - 60px);\n  height: ", ";\n  margin: ", " 30px 0 30px;\n  padding: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n  border-radius: ", ";\n  border: ", ";\n  border-bottom: ", ";\n  background: ", ";\n  @media (max-width: 576px) {\n    min-height: 59px;\n    width: calc(100% - 16px);\n    margin: ", " 8px 0 8px;\n  }\n"])), function (_ref) {
+var StyledRow = styledComponents.styled.div(_templateObject$19 || (_templateObject$19 = _taggedTemplateLiteral(["\n  position: relative;\n  width: calc(100% - 60px);\n  height: ", ";\n  margin: ", " 30px 0 30px;\n  padding: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n  border-radius: ", ";\n  border: ", ";\n  border-bottom: ", ";\n  background: ", ";\n  @media (max-width: 576px) {\n    min-height: 59px;\n    width: calc(100% - 16px);\n    margin: ", " 8px 0 8px;\n  }\n"])), function (_ref) {
   var active = _ref.active;
   return active ? "auto" : "77.5px";
 }, function (_ref2) {
@@ -12312,10 +12312,10 @@ var StyledRow = styled.div(_templateObject$19 || (_templateObject$19 = _taggedTe
   var active = _ref8.active;
   return active ? "5.5px" : "0px";
 });
-var StyledTableChildren = styled(GridLayout$1)(_templateObject2$I || (_templateObject2$I = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 77.5px;\n  align-items: center;\n  justify-content: center;\n  flex-direction: row;\n  cursor: pointer;\n  position: relative;\n"])));
-var StyledTableDetails = styled(GridLayout$1)(_templateObject3$A || (_templateObject3$A = _taggedTemplateLiteral(["\n  padding: 13px;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n"])));
-var ToggleContainer = styled.div(_templateObject4$s || (_templateObject4$s = _taggedTemplateLiteral(["\n  grid-column: span 1 / -1;\n  cursor: pointer;\n  margin-right: 19px;\n  @media (max-width: 576px) {\n    position: absolute;\n    right: 0;\n    margin-right: 10px;\n  }\n"])));
-var DotContainer = styled.div(_templateObject5$q || (_templateObject5$q = _taggedTemplateLiteral(["\n  grid-column: span 1;\n  @media (max-width: 576px) {\n    margin-left: 10px;\n  }\n"])));
+var StyledTableChildren = styledComponents.styled(GridLayout$1)(_templateObject2$I || (_templateObject2$I = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 77.5px;\n  align-items: center;\n  justify-content: center;\n  flex-direction: row;\n  cursor: pointer;\n  position: relative;\n"])));
+var StyledTableDetails = styledComponents.styled(GridLayout$1)(_templateObject3$A || (_templateObject3$A = _taggedTemplateLiteral(["\n  padding: 13px;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n"])));
+var ToggleContainer = styledComponents.styled.div(_templateObject4$s || (_templateObject4$s = _taggedTemplateLiteral(["\n  grid-column: span 1 / -1;\n  cursor: pointer;\n  margin-right: 19px;\n  @media (max-width: 576px) {\n    position: absolute;\n    right: 0;\n    margin-right: 10px;\n  }\n"])));
+var DotContainer = styledComponents.styled.div(_templateObject5$q || (_templateObject5$q = _taggedTemplateLiteral(["\n  grid-column: span 1;\n  @media (max-width: 576px) {\n    margin-left: 10px;\n  }\n"])));
 var TableRow = function TableRow(_ref9) {
   var children = _ref9.children,
     details = _ref9.details,
@@ -12354,9 +12354,9 @@ var TableRow = function TableRow(_ref9) {
 };
 
 var _templateObject$18, _templateObject2$H, _templateObject3$z;
-var LiquidityWrapper = styled.div(_templateObject$18 || (_templateObject$18 = _taggedTemplateLiteral(["\n  padding-right: 4px;\n  width: 100%;\n"])));
-var DescriptionRow = styled.div(_templateObject2$H || (_templateObject2$H = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n"])));
-var Container$5 = styled.div(_templateObject3$z || (_templateObject3$z = _taggedTemplateLiteral(["\n  height: 100%;\n  padding: 17px;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  align-items: space-around;\n  grid-column: span ", ";\n  border: 1px solid rgba(255, 255, 255, 0.1);\n  border-radius: 10px;\n  svg {\n    margin-left: 0;\n  }\n"])), function (_ref) {
+var LiquidityWrapper = styledComponents.styled.div(_templateObject$18 || (_templateObject$18 = _taggedTemplateLiteral(["\n  padding-right: 4px;\n  width: 100%;\n"])));
+var DescriptionRow = styledComponents.styled.div(_templateObject2$H || (_templateObject2$H = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n"])));
+var Container$5 = styledComponents.styled.div(_templateObject3$z || (_templateObject3$z = _taggedTemplateLiteral(["\n  height: 100%;\n  padding: 17px;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  align-items: space-around;\n  grid-column: span ", ";\n  border: 1px solid rgba(255, 255, 255, 0.1);\n  border-radius: 10px;\n  svg {\n    margin-left: 0;\n  }\n"])), function (_ref) {
   var grid = _ref.grid;
   return grid;
 });
@@ -12389,7 +12389,7 @@ var LiquidityContainer = function LiquidityContainer(_ref2) {
 };
 
 var _templateObject$17, _templateObject2$G, _templateObject3$y;
-var Container$4 = styled.div(_templateObject$17 || (_templateObject$17 = _taggedTemplateLiteral(["\n  width: 100%;\n  padding: ", ";\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  align-items: space-around;\n  grid-column: span ", ";\n  border: ", ";\n  border-radius: 10px;\n  svg {\n    margin-left: 0;\n  }\n"])), function (_ref) {
+var Container$4 = styledComponents.styled.div(_templateObject$17 || (_templateObject$17 = _taggedTemplateLiteral(["\n  width: 100%;\n  padding: ", ";\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  align-items: space-around;\n  grid-column: span ", ";\n  border: ", ";\n  border-radius: 10px;\n  svg {\n    margin-left: 0;\n  }\n"])), function (_ref) {
   var mobile = _ref.mobile;
   return mobile ? "0px" : "17px";
 }, function (_ref2) {
@@ -12399,11 +12399,11 @@ var Container$4 = styled.div(_templateObject$17 || (_templateObject$17 = _tagged
   var mobile = _ref3.mobile;
   return mobile ? "none" : "1px solid rgba(255, 255, 255, 0.1)";
 });
-var TokenValueWrapper = styled.div(_templateObject2$G || (_templateObject2$G = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: ", ";\n"])), function (_ref4) {
+var TokenValueWrapper = styledComponents.styled.div(_templateObject2$G || (_templateObject2$G = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: ", ";\n"])), function (_ref4) {
   var mobile = _ref4.mobile;
   return mobile ? "flex-start" : "space-between";
 });
-var ActionsWrapper = styled.div(_templateObject3$y || (_templateObject3$y = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  margin-top: 4px;\n  width: 100%;\n  justify-content: space-between;\n"])));
+var ActionsWrapper = styledComponents.styled.div(_templateObject3$y || (_templateObject3$y = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  margin-top: 4px;\n  width: 100%;\n  justify-content: space-between;\n"])));
 var TableActionBox = function TableActionBox(_ref5) {
   var title = _ref5.title,
     value = _ref5.value,
@@ -12464,14 +12464,14 @@ var getNumberedDifference = function getNumberedDifference(differenceToConvert)
 };
 
 var _templateObject$16, _templateObject2$F, _templateObject3$x, _templateObject4$r, _templateObject5$p;
-var ValueBox = styled.div(_templateObject$16 || (_templateObject$16 = _taggedTemplateLiteral(["\n  background: transparent;\n  color: white;\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: flex-start;\n  max-width: 190px;\n"])));
-var IconColumn = styled.div(_templateObject2$F || (_templateObject2$F = _taggedTemplateLiteral(["\n  width: auto;\n  padding-right: 10px;\n  padding-top: 1px;\n"])));
-var InfoColumn = styled.div(_templateObject3$x || (_templateObject3$x = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n"])));
-var PairContainer = styled.div(_templateObject4$r || (_templateObject4$r = _taggedTemplateLiteral(["\n  width: 100%;\n  display: flex;\n  margin-bottom: 5px;\n  align-items: center;\n  flex-direction: ", ";\n"])), function (_ref) {
+var ValueBox = styledComponents.styled.div(_templateObject$16 || (_templateObject$16 = _taggedTemplateLiteral(["\n  background: transparent;\n  color: white;\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: flex-start;\n  max-width: 190px;\n"])));
+var IconColumn = styledComponents.styled.div(_templateObject2$F || (_templateObject2$F = _taggedTemplateLiteral(["\n  width: auto;\n  padding-right: 10px;\n  padding-top: 1px;\n"])));
+var InfoColumn = styledComponents.styled.div(_templateObject3$x || (_templateObject3$x = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n"])));
+var PairContainer = styledComponents.styled.div(_templateObject4$r || (_templateObject4$r = _taggedTemplateLiteral(["\n  width: 100%;\n  display: flex;\n  margin-bottom: 5px;\n  align-items: center;\n  flex-direction: ", ";\n"])), function (_ref) {
   var mobile = _ref.mobile;
   return mobile ? "column" : "row";
 });
-var ValueRow = styled.div(_templateObject5$p || (_templateObject5$p = _taggedTemplateLiteral(["\n  width: 100%;\n"])));
+var ValueRow = styledComponents.styled.div(_templateObject5$p || (_templateObject5$p = _taggedTemplateLiteral(["\n  width: 100%;\n"])));
 var Value = function Value(_ref2) {
   var coin = _ref2.coin,
     value = _ref2.value,
@@ -12526,8 +12526,8 @@ var Value = function Value(_ref2) {
 };
 
 var _templateObject$15, _templateObject2$E;
-var ValueFullBox = styled.div(_templateObject$15 || (_templateObject$15 = _taggedTemplateLiteral(["\n  background: transparent;\n  color: white;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: flex-start;\n  width: 100%;\n"])));
-var DifferenceBox = styled.div(_templateObject2$E || (_templateObject2$E = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  height: 24px;\n"])));
+var ValueFullBox = styledComponents.styled.div(_templateObject$15 || (_templateObject$15 = _taggedTemplateLiteral(["\n  background: transparent;\n  color: white;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: flex-start;\n  width: 100%;\n"])));
+var DifferenceBox = styledComponents.styled.div(_templateObject2$E || (_templateObject2$E = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  height: 24px;\n"])));
 var ValueFull = function ValueFull(_ref) {
   var value = _ref.value,
     difference = _ref.difference;
@@ -12559,7 +12559,7 @@ var ValueFull = function ValueFull(_ref) {
 };
 
 var _templateObject$14;
-var VContainer = styled.div(_templateObject$14 || (_templateObject$14 = _taggedTemplateLiteral(["\n  position: absolute;\n  right: 20px;\n  bottom: 20px;\n  color: ", ";\n  opacity: 0.6;\n  font-size: 12px;\n"])), function (_ref) {
+var VContainer = styledComponents.styled.div(_templateObject$14 || (_templateObject$14 = _taggedTemplateLiteral(["\n  position: absolute;\n  right: 20px;\n  bottom: 20px;\n  color: ", ";\n  opacity: 0.6;\n  font-size: 12px;\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.colors.secondaryText;
 });
@@ -12571,23 +12571,23 @@ var VersionContainer = function VersionContainer(_ref2) {
 };
 
 var _templateObject$13, _templateObject2$D, _templateObject3$w, _templateObject4$q, _templateObject5$o, _templateObject6$h, _templateObject7$d;
-var ProgressDataColumn = styled.div(_templateObject$13 || (_templateObject$13 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n"])));
-var ProgressDataRow = styled.div(_templateObject2$D || (_templateObject2$D = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n"])));
-var ProgressBarWrapper = styled.div(_templateObject3$w || (_templateObject3$w = _taggedTemplateLiteral(["\n  position: relative;\n  width: 100%;\n  height: 8px;\n  background: #272730;\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  border-radius: 4px;\n  box-sizing: border-box;\n"])));
-var ProgressBar = styled.div(_templateObject4$q || (_templateObject4$q = _taggedTemplateLiteral(["\n  position: relative;\n  height: 100%;\n  width: ", "%;\n  background: ", ";\n  border-radius: 4px;\n"])), function (_ref) {
+var ProgressDataColumn = styledComponents.styled.div(_templateObject$13 || (_templateObject$13 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n"])));
+var ProgressDataRow = styledComponents.styled.div(_templateObject2$D || (_templateObject2$D = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n"])));
+var ProgressBarWrapper = styledComponents.styled.div(_templateObject3$w || (_templateObject3$w = _taggedTemplateLiteral(["\n  position: relative;\n  width: 100%;\n  height: 8px;\n  background: #272730;\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  border-radius: 4px;\n  box-sizing: border-box;\n"])));
+var ProgressBar = styledComponents.styled.div(_templateObject4$q || (_templateObject4$q = _taggedTemplateLiteral(["\n  position: relative;\n  height: 100%;\n  width: ", "%;\n  background: ", ";\n  border-radius: 4px;\n"])), function (_ref) {
   var width = _ref.width;
   return width;
 }, function (_ref2) {
   var theme = _ref2.theme;
   return theme.colors.primary;
 });
-var ProgressDescription = styled(Text)(_templateObject5$o || (_templateObject5$o = _taggedTemplateLiteral(["\n  font-weight: 600;\n  font-size: 18px;\n  line-height: 170%;\n  color: ", ";\n  margin-bottom: 8px;\n"])), function (_ref3) {
+var ProgressDescription = styledComponents.styled(Text)(_templateObject5$o || (_templateObject5$o = _taggedTemplateLiteral(["\n  font-weight: 600;\n  font-size: 18px;\n  line-height: 170%;\n  color: ", ";\n  margin-bottom: 8px;\n"])), function (_ref3) {
   var theme = _ref3.theme,
     color = _ref3.color;
   return color || theme.colors.white;
 });
-var CapDescription = styled(Text)(_templateObject6$h || (_templateObject6$h = _taggedTemplateLiteral(["\n  font-weight: bold;\n  font-size: 14px;\n  line-height: 170%;\n  color: #818c92;\n  margin-top: 4px;\n"])));
-var StyledCapRow = styled.div(_templateObject7$d || (_templateObject7$d = _taggedTemplateLiteral(["\n  display: flex;\n"])));
+var CapDescription = styledComponents.styled(Text)(_templateObject6$h || (_templateObject6$h = _taggedTemplateLiteral(["\n  font-weight: bold;\n  font-size: 14px;\n  line-height: 170%;\n  color: #818c92;\n  margin-top: 4px;\n"])));
+var StyledCapRow = styledComponents.styled.div(_templateObject7$d || (_templateObject7$d = _taggedTemplateLiteral(["\n  display: flex;\n"])));
 var SpacePadProgressBar = function SpacePadProgressBar(_ref4) {
   var _ref4$currentCap = _ref4.currentCap,
     currentCap = _ref4$currentCap === void 0 ? 70 : _ref4$currentCap,
@@ -12632,23 +12632,23 @@ var SpacePadProgressBar = function SpacePadProgressBar(_ref4) {
 };
 
 var _templateObject$12, _templateObject2$C, _templateObject3$v, _templateObject4$p, _templateObject5$n;
-var MainWrapper$1 = styled.div(_templateObject$12 || (_templateObject$12 = _taggedTemplateLiteral(["\n  display: flex;\n  height: 94px;\n  justify-content: flex-start;\n  align-items: center;\n  flex-direction: row;\n"])));
-var ProjectImage = styled.div(_templateObject2$C || (_templateObject2$C = _taggedTemplateLiteral(["\n  display: flex;\n  width: 46px;\n  height: 46px;\n  margin-right: 34px;\n  border-radius: 50%;\n  justify-content: center;\n  align-items: center;\n  ", " {\n    margin-right: 12px;\n  }\n"])), function (_ref) {
+var MainWrapper$1 = styledComponents.styled.div(_templateObject$12 || (_templateObject$12 = _taggedTemplateLiteral(["\n  display: flex;\n  height: 94px;\n  justify-content: flex-start;\n  align-items: center;\n  flex-direction: row;\n"])));
+var ProjectImage = styledComponents.styled.div(_templateObject2$C || (_templateObject2$C = _taggedTemplateLiteral(["\n  display: flex;\n  width: 46px;\n  height: 46px;\n  margin-right: 34px;\n  border-radius: 50%;\n  justify-content: center;\n  align-items: center;\n  ", " {\n    margin-right: 12px;\n  }\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.mediaQueries.mobile;
 });
-var ProjectName$1 = styled.div(_templateObject3$v || (_templateObject3$v = _taggedTemplateLiteral(["\n  display: flex;\n  margin-right: 8px;\n  justify-content: center;\n  align-items: flex-end;\n  font-size: 26px;\n  font-weight: bold;\n  color: ", ";\n  ", " {\n    margin-bottom: 6px;\n  }\n"])), function (_ref2) {
+var ProjectName$1 = styledComponents.styled.div(_templateObject3$v || (_templateObject3$v = _taggedTemplateLiteral(["\n  display: flex;\n  margin-right: 8px;\n  justify-content: center;\n  align-items: flex-end;\n  font-size: 26px;\n  font-weight: bold;\n  color: ", ";\n  ", " {\n    margin-bottom: 6px;\n  }\n"])), function (_ref2) {
   var theme = _ref2.theme;
   return theme.colors.white;
 }, function (_ref3) {
   var theme = _ref3.theme;
   return theme.mediaQueries.mobile;
 });
-var ProjectFullName = styled.div(_templateObject4$p || (_templateObject4$p = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: flex-end;\n  justify-content: center;\n  color: ", ";\n  letter-spacing: 0.03rem;\n  font-size: 14px;\n"])), function (_ref4) {
+var ProjectFullName = styledComponents.styled.div(_templateObject4$p || (_templateObject4$p = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: flex-end;\n  justify-content: center;\n  color: ", ";\n  letter-spacing: 0.03rem;\n  font-size: 14px;\n"])), function (_ref4) {
   var theme = _ref4.theme;
   return theme.colors.white55;
 });
-var ProjectDetails = styled.div(_templateObject5$n || (_templateObject5$n = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: flex-end;\n  justify-content: flex-start;\n  ", " {\n    flex-direction: column;\n    align-items: flex-start;\n  }\n"])), function (_ref5) {
+var ProjectDetails = styledComponents.styled.div(_templateObject5$n || (_templateObject5$n = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: flex-end;\n  justify-content: flex-start;\n  ", " {\n    flex-direction: column;\n    align-items: flex-start;\n  }\n"])), function (_ref5) {
   var theme = _ref5.theme;
   return theme.mediaQueries.mobile;
 });
@@ -13023,10 +13023,10 @@ var connectors = [{
 var connectorLocalStorageKey = "connectorId";
 
 var _templateObject$11;
-var AccountNumber = styled(Text)(_templateObject$11 || (_templateObject$11 = _taggedTemplateLiteral(["\n  color: #818c92;\n  line-height: 23.8px;\n"])));
+var AccountNumber = styledComponents.styled(Text)(_templateObject$11 || (_templateObject$11 = _taggedTemplateLiteral(["\n  color: #818c92;\n  line-height: 23.8px;\n"])));
 
 var _templateObject$10;
-var AccountNumberWrapper = styled.div(_templateObject$10 || (_templateObject$10 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: ", ";\n  align-items: center;\n  justify-content: center;\n  text-align: ", ";\n"])), function (_ref) {
+var AccountNumberWrapper = styledComponents.styled.div(_templateObject$10 || (_templateObject$10 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: ", ";\n  align-items: center;\n  justify-content: center;\n  text-align: ", ";\n"])), function (_ref) {
   var isVerifiedUser = _ref.isVerifiedUser;
   return !isVerifiedUser ? "column" : "row";
 }, function (_ref2) {
@@ -13035,56 +13035,56 @@ var AccountNumberWrapper = styled.div(_templateObject$10 || (_templateObject$10
 });
 
 var _templateObject$$;
-var Background = styled.div(_templateObject$$ || (_templateObject$$ = _taggedTemplateLiteral(["\n  position: absolute;\n  width: 100vw;\n  height: 100vh;\n  background-color: black;\n  opacity: 0.4;\n  left: 0;\n  top: 0;\n  z-index: 11;\n"])));
+var Background = styledComponents.styled.div(_templateObject$$ || (_templateObject$$ = _taggedTemplateLiteral(["\n  position: absolute;\n  width: 100vw;\n  height: 100vh;\n  background-color: black;\n  opacity: 0.4;\n  left: 0;\n  top: 0;\n  z-index: 11;\n"])));
 
 var _templateObject$_;
-var BottomRow = styled.div(_templateObject$_ || (_templateObject$_ = _taggedTemplateLiteral(["\n  padding-top: 20px;\n"])));
+var BottomRow = styledComponents.styled.div(_templateObject$_ || (_templateObject$_ = _taggedTemplateLiteral(["\n  padding-top: 20px;\n"])));
 
 var _templateObject$Z;
-styled(Button$1)(_templateObject$Z || (_templateObject$Z = _taggedTemplateLiteral(["\n  background: #383847;\n  color: ", ";\n  width: 85px;\n  height: 32px;\n  font-size: 14px;\n"])), function (_ref) {
+styledComponents.styled(Button$1)(_templateObject$Z || (_templateObject$Z = _taggedTemplateLiteral(["\n  background: #383847;\n  color: ", ";\n  width: 85px;\n  height: 32px;\n  font-size: 14px;\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.colors.white;
 });
 
 var _templateObject$Y;
-var CloseButton = styled(Icon$2m)(_templateObject$Y || (_templateObject$Y = _taggedTemplateLiteral(["\n  width: 24px;\n  height: 24px;\n  border-radius: 50%;\n  cursor: pointer;\n  background: #383847;\n  position: absolute;\n  left: -35px;\n  top: 5px;\n"])));
+var CloseButton = styledComponents.styled(Icon$2m)(_templateObject$Y || (_templateObject$Y = _taggedTemplateLiteral(["\n  width: 24px;\n  height: 24px;\n  border-radius: 50%;\n  cursor: pointer;\n  background: #383847;\n  position: absolute;\n  left: -35px;\n  top: 5px;\n"])));
 
 var _templateObject$X;
-var ConnectedInfoWrapper = styled.div(_templateObject$X || (_templateObject$X = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-top: 16px;\n"])));
+var ConnectedInfoWrapper = styledComponents.styled.div(_templateObject$X || (_templateObject$X = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-top: 16px;\n"])));
 
 var _templateObject$W;
-var ConnectedProvider = styled.div(_templateObject$W || (_templateObject$W = _taggedTemplateLiteral(["\n  height: 72px;\n  width: 309px;\n  margin-top: 24px;\n  display: flex;\n  align-items: center;\n  padding-left: 32px;\n  border-radius: 10px;\n  background: #272730;\n"])));
+var ConnectedProvider = styledComponents.styled.div(_templateObject$W || (_templateObject$W = _taggedTemplateLiteral(["\n  height: 72px;\n  width: 309px;\n  margin-top: 24px;\n  display: flex;\n  align-items: center;\n  padding-left: 32px;\n  border-radius: 10px;\n  background: #272730;\n"])));
 
 var _templateObject$V, _templateObject2$B;
-var fadeInAnimation = styled.keyframes(_templateObject$V || (_templateObject$V = _taggedTemplateLiteral(["\n  0% {\n    right: -357px;\n  }\n  100% {\n    right: 0;\n  }\n"])));
-var ConnectWalletWrapper = styled.div(_templateObject2$B || (_templateObject2$B = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  width: 357px;\n  height: 100vh;\n  padding: 24px;\n  background: #191921;\n  position: fixed;\n  top: 0%;\n  right: 0;\n  animation: ", " 0.4s;\n  z-index: 20;\n"])), fadeInAnimation);
+var fadeInAnimation = styledComponents.keyframes(_templateObject$V || (_templateObject$V = _taggedTemplateLiteral(["\n  0% {\n    right: -357px;\n  }\n  100% {\n    right: 0;\n  }\n"])));
+var ConnectWalletWrapper = styledComponents.styled.div(_templateObject2$B || (_templateObject2$B = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  width: 357px;\n  height: 100vh;\n  padding: 24px;\n  background: #191921;\n  position: fixed;\n  top: 0%;\n  right: 0;\n  animation: ", " 0.4s;\n  z-index: 20;\n"])), fadeInAnimation);
 
 var _templateObject$U;
-var LogoutButton = styled(Button$1)(_templateObject$U || (_templateObject$U = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: #383847;\n  color: ", ";\n  width: 100%;\n  font-weight: 700;\n  font-size: 14px;\n"])), function (_ref) {
+var LogoutButton = styledComponents.styled(Button$1)(_templateObject$U || (_templateObject$U = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: #383847;\n  color: ", ";\n  width: 100%;\n  font-weight: 700;\n  font-size: 14px;\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.colors.white;
 });
 
 var _templateObject$T;
-var MiddleRow = styled.div(_templateObject$T || (_templateObject$T = _taggedTemplateLiteral(["\n  padding: 20px 0;\n  border-bottom: 1px solid #252530;\n"])));
+var MiddleRow = styledComponents.styled.div(_templateObject$T || (_templateObject$T = _taggedTemplateLiteral(["\n  padding: 20px 0;\n  border-bottom: 1px solid #252530;\n"])));
 
 var _templateObject$S;
-var MyWallet = styled(Text)(_templateObject$S || (_templateObject$S = _taggedTemplateLiteral(["\n  line-height: 28px;\n  margin-left: 18px;\n"])));
+var MyWallet = styledComponents.styled(Text)(_templateObject$S || (_templateObject$S = _taggedTemplateLiteral(["\n  line-height: 28px;\n  margin-left: 18px;\n"])));
 
 var _templateObject$R;
-var MyWalletWrapper = styled.div(_templateObject$R || (_templateObject$R = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n"])));
+var MyWalletWrapper = styledComponents.styled.div(_templateObject$R || (_templateObject$R = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n"])));
 
 var _templateObject$Q;
-var ProviderTitle = styled(Text)(_templateObject$Q || (_templateObject$Q = _taggedTemplateLiteral(["\n  font-weight: 600;\n  line-height: 24px;\n  margin-left: 16px;\n"])));
+var ProviderTitle = styledComponents.styled(Text)(_templateObject$Q || (_templateObject$Q = _taggedTemplateLiteral(["\n  font-weight: 600;\n  line-height: 24px;\n  margin-left: 16px;\n"])));
 
 var _templateObject$P;
-var SettingsButton = styled(Button$1)(_templateObject$P || (_templateObject$P = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: #383847;\n  color: ", ";\n  width: 100%;\n  font-weight: 700;\n  font-size: 14px;\n  margin-bottom: 16px;\n"])), function (_ref) {
+var SettingsButton = styledComponents.styled(Button$1)(_templateObject$P || (_templateObject$P = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: #383847;\n  color: ", ";\n  width: 100%;\n  font-weight: 700;\n  font-size: 14px;\n  margin-bottom: 16px;\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.colors.white;
 });
 
 var _templateObject$O;
-var UpperRow = styled.div(_templateObject$O || (_templateObject$O = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 54px;\n  display: flex;\n  align-items: ", ";\n  justify-content: ", ";\n  border-bottom: 1px solid #252530;\n  position: relative;\n  padding-bottom: 20px;\n"])), function (_ref) {
+var UpperRow = styledComponents.styled.div(_templateObject$O || (_templateObject$O = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 54px;\n  display: flex;\n  align-items: ", ";\n  justify-content: ", ";\n  border-bottom: 1px solid #252530;\n  position: relative;\n  padding-bottom: 20px;\n"])), function (_ref) {
   var alignItems = _ref.alignItems;
   return alignItems && alignItems;
 }, function (_ref2) {
@@ -13093,19 +13093,19 @@ var UpperRow = styled.div(_templateObject$O || (_templateObject$O = _taggedTempl
 });
 
 var _templateObject$N;
-var VerificationInfo = styled.div(_templateObject$N || (_templateObject$N = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-top: ", ";\n"])), function (_ref) {
+var VerificationInfo = styledComponents.styled.div(_templateObject$N || (_templateObject$N = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-top: ", ";\n"])), function (_ref) {
   var marginTop = _ref.marginTop;
   return marginTop && marginTop;
 });
 
 var _templateObject$M;
-var VerifiedWalletIcon = styled(Icon$28)(_templateObject$M || (_templateObject$M = _taggedTemplateLiteral(["\n  fill: ", ";\n  margin-right: 8px;\n"])), function (_ref) {
+var VerifiedWalletIcon = styledComponents.styled(Icon$28)(_templateObject$M || (_templateObject$M = _taggedTemplateLiteral(["\n  fill: ", ";\n  margin-right: 8px;\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.colors.vividBlue;
 });
 
 var _templateObject$L;
-var Provider = styled.div(_templateObject$L || (_templateObject$L = _taggedTemplateLiteral(["\n  height: 72px;\n  width: 309px;\n  display: flex;\n  align-items: center;\n  padding-left: 32px;\n  border-radius: 10px;\n  background: ", ";\n  margin-bottom: ", ";\n  border: 1px solid transparent;\n\n  &:hover {\n    border: ", ";\n    cursor: pointer;\n  }\n"])), function (_ref) {
+var Provider = styledComponents.styled.div(_templateObject$L || (_templateObject$L = _taggedTemplateLiteral(["\n  height: 72px;\n  width: 309px;\n  display: flex;\n  align-items: center;\n  padding-left: 32px;\n  border-radius: 10px;\n  background: ", ";\n  margin-bottom: ", ";\n  border: 1px solid transparent;\n\n  &:hover {\n    border: ", ";\n    cursor: pointer;\n  }\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.backgrounds.secondary;
 }, function (_ref2) {
@@ -13161,7 +13161,7 @@ var Icon$F = function Icon(props) {
 };
 
 var _templateObject$K;
-var ConnectDescription = styled(Text)(_templateObject$K || (_templateObject$K = _taggedTemplateLiteral(["\n  line-height: 24px;\n  font-weight: 400;\n  color: #818c92;\n  margin: 16px 0;\n"])));
+var ConnectDescription = styledComponents.styled(Text)(_templateObject$K || (_templateObject$K = _taggedTemplateLiteral(["\n  line-height: 24px;\n  font-weight: 400;\n  color: #818c92;\n  margin: 16px 0;\n"])));
 var ConnectWallet$1 = function ConnectWallet(_ref) {
   var handleLogin = _ref.handleLogin,
     setIsConnectWalletPanelOpen = _ref.setIsConnectWalletPanelOpen,
@@ -13208,12 +13208,12 @@ var ConnectWallet$1 = function ConnectWallet(_ref) {
 };
 
 var _templateObject$J, _templateObject2$A, _templateObject3$u;
-var VerifyAddressIndicator$1 = styled(Text)(_templateObject$J || (_templateObject$J = _taggedTemplateLiteral(["\n  color: ", ";\n  line-height: 20.4px;\n"])), function (_ref) {
+var VerifyAddressIndicator$1 = styledComponents.styled(Text)(_templateObject$J || (_templateObject$J = _taggedTemplateLiteral(["\n  color: ", ";\n  line-height: 20.4px;\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.colors.red;
 });
-var ConnectedInfo = styled(Text)(_templateObject2$A || (_templateObject2$A = _taggedTemplateLiteral(["\n  color: #818c92;\n"])));
-var VerifyButton = styled(Button$1)(_templateObject3$u || (_templateObject3$u = _taggedTemplateLiteral(["\n  font-size: 14px;\n  width: 100%;\n  margin: 24px 0;\n"])));
+var ConnectedInfo = styledComponents.styled(Text)(_templateObject2$A || (_templateObject2$A = _taggedTemplateLiteral(["\n  color: #818c92;\n"])));
+var VerifyButton = styledComponents.styled(Button$1)(_templateObject3$u || (_templateObject3$u = _taggedTemplateLiteral(["\n  font-size: 14px;\n  width: 100%;\n  margin: 24px 0;\n"])));
 var ConnectWallet = function ConnectWallet(_ref2) {
   var account = _ref2.account,
     setIsConnectWalletPanelOpen = _ref2.setIsConnectWalletPanelOpen;
@@ -13648,43 +13648,43 @@ var getTimeValue = function getTimeValue(value, timeUnit) {
 };
 
 var _templateObject$I, _templateObject2$z, _templateObject3$t, _templateObject4$o, _templateObject5$m, _templateObject6$g, _templateObject7$c, _templateObject8$9, _templateObject9$8, _templateObject0$6, _templateObject1$6, _templateObject10$5, _templateObject11$5, _templateObject12$4, _templateObject13$2;
-var ActiveDot$1 = styled.div(_templateObject$I || (_templateObject$I = _taggedTemplateLiteral(["\n  height: 8px;\n  width: 8px;\n  border-radius: 50%;\n  background: ", ";\n  margin-right: 8px;\n  ", "\n"])), function (_ref) {
+var ActiveDot$1 = styledComponents.styled.div(_templateObject$I || (_templateObject$I = _taggedTemplateLiteral(["\n  height: 8px;\n  width: 8px;\n  border-radius: 50%;\n  background: ", ";\n  margin-right: 8px;\n  ", "\n"])), function (_ref) {
   var dotColor = _ref.dotColor;
   return dotColor;
 }, function (_ref2) {
   var fetchingData = _ref2.fetchingData;
   return fetchingData && "\n    transition: all 0.25s ease-in-out;\n    animation: stretch 2s infinite;\n    @keyframes stretch {\n      0% {\n        transform: scale(1);\n      }\n      25% {\n        transform: scale(0.9);\n      }\n      50% {\n        transform: scale(1.2);\n      }\n      75% {\n        transform: scale(0.9);\n      }\n      100% {\n        transform: scale(1);\n      }\n    }\n  ";
 });
-var ActivityDescription = styled(Text)(_templateObject2$z || (_templateObject2$z = _taggedTemplateLiteral(["\n  font-weight: bold;\n  font-size: 14px;\n  line-height: 140%;\n  width: max-content;\n"])));
-var ActivityWrapper = styled.div(_templateObject3$t || (_templateObject3$t = _taggedTemplateLiteral(["\n  display: flex;\n  position: absolute;\n  right: 15px;\n  top: 15px;\n"])));
-var ActivityComponent = styled.div(_templateObject4$o || (_templateObject4$o = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 4px 8px;\n  width: max-content;\n  height: 28px;\n  background: rgba(55, 55, 73, 0.5);\n  backdrop-filter: blur(53px);\n  border-radius: 10px;\n  margin-left: 8px;\n"])));
-var ProjectNameColumn = styled.div(_templateObject5$m || (_templateObject5$m = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: flex-start;\n"])));
-var ProjectName = styled(Text)(_templateObject6$g || (_templateObject6$g = _taggedTemplateLiteral(["\n  font-weight: bold;\n  font-size: 32px;\n  line-height: 130%;\n  ", " {\n    font-size: 24px;\n  }\n"])), function (_ref3) {
+var ActivityDescription = styledComponents.styled(Text)(_templateObject2$z || (_templateObject2$z = _taggedTemplateLiteral(["\n  font-weight: bold;\n  font-size: 14px;\n  line-height: 140%;\n  width: max-content;\n"])));
+var ActivityWrapper = styledComponents.styled.div(_templateObject3$t || (_templateObject3$t = _taggedTemplateLiteral(["\n  display: flex;\n  position: absolute;\n  right: 15px;\n  top: 15px;\n"])));
+var ActivityComponent = styledComponents.styled.div(_templateObject4$o || (_templateObject4$o = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 4px 8px;\n  width: max-content;\n  height: 28px;\n  background: rgba(55, 55, 73, 0.5);\n  backdrop-filter: blur(53px);\n  border-radius: 10px;\n  margin-left: 8px;\n"])));
+var ProjectNameColumn = styledComponents.styled.div(_templateObject5$m || (_templateObject5$m = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: flex-start;\n"])));
+var ProjectName = styledComponents.styled(Text)(_templateObject6$g || (_templateObject6$g = _taggedTemplateLiteral(["\n  font-weight: bold;\n  font-size: 32px;\n  line-height: 130%;\n  ", " {\n    font-size: 24px;\n  }\n"])), function (_ref3) {
   var theme = _ref3.theme;
   return theme.mediaQueries.mobile;
 });
-var ProjectTicker = styled(Text)(_templateObject7$c || (_templateObject7$c = _taggedTemplateLiteral(["\n  font-size: 14px;\n  line-height: 170%;\n  text-align: right;\n  letter-spacing: 0.03em;\n  font-weight: bold;\n  color: #535459;\n  ", ";\n"])), function (_ref4) {
+var ProjectTicker = styledComponents.styled(Text)(_templateObject7$c || (_templateObject7$c = _taggedTemplateLiteral(["\n  font-size: 14px;\n  line-height: 170%;\n  text-align: right;\n  letter-spacing: 0.03em;\n  font-weight: bold;\n  color: #535459;\n  ", ";\n"])), function (_ref4) {
   var customStyle = _ref4.customStyle;
   return customStyle;
 });
-var TimerDescription = styled(Text)(_templateObject8$9 || (_templateObject8$9 = _taggedTemplateLiteral(["\n  font-weight: bold;\n  font-size: 14px;\n  line-height: 170%;\n  color: #818c92;\n"])));
-var Timer = styled(Text)(_templateObject9$8 || (_templateObject9$8 = _taggedTemplateLiteral(["\n  font-weight: bold;\n  font-size: 32px;\n  line-height: 130%;\n  color: ", ";\n  ", " {\n    font-size: 24px;\n  }\n"])), function (_ref5) {
+var TimerDescription = styledComponents.styled(Text)(_templateObject8$9 || (_templateObject8$9 = _taggedTemplateLiteral(["\n  font-weight: bold;\n  font-size: 14px;\n  line-height: 170%;\n  color: #818c92;\n"])));
+var Timer = styledComponents.styled(Text)(_templateObject9$8 || (_templateObject9$8 = _taggedTemplateLiteral(["\n  font-weight: bold;\n  font-size: 32px;\n  line-height: 130%;\n  color: ", ";\n  ", " {\n    font-size: 24px;\n  }\n"])), function (_ref5) {
   var isIncoming = _ref5.isIncoming;
   return isIncoming ? "#FF7342" : "#12ffb8";
 }, function (_ref6) {
   var theme = _ref6.theme;
   return theme.mediaQueries.mobile;
 });
-var RatioColumn = styled.div(_templateObject0$6 || (_templateObject0$6 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-end;\n"])));
-var DetailsRow = styled.div(_templateObject1$6 || (_templateObject1$6 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: flex-start;\n  justify-content: space-between;\n  width: 100%;\n"])));
+var RatioColumn = styledComponents.styled.div(_templateObject0$6 || (_templateObject0$6 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-end;\n"])));
+var DetailsRow = styledComponents.styled.div(_templateObject1$6 || (_templateObject1$6 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: flex-start;\n  justify-content: space-between;\n  width: 100%;\n"])));
 // Details components
-var SpaceInfoTableWrapper = styled.div(_templateObject10$5 || (_templateObject10$5 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n"])));
-var SpaceInfoTableRow = styled.div(_templateObject11$5 || (_templateObject11$5 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  padding: 11px 0px;\n  border-bottom: ", ";\n"])), function (_ref7) {
+var SpaceInfoTableWrapper = styledComponents.styled.div(_templateObject10$5 || (_templateObject10$5 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n"])));
+var SpaceInfoTableRow = styledComponents.styled.div(_templateObject11$5 || (_templateObject11$5 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  padding: 11px 0px;\n  border-bottom: ", ";\n"])), function (_ref7) {
   var underlined = _ref7.underlined;
   return underlined && "1px solid #272730";
 });
-var RowTitle = styled(Text)(_templateObject12$4 || (_templateObject12$4 = _taggedTemplateLiteral(["\n  font-weight: bold;\n  font-size: 14px;\n  line-height: 170%;\n  color: #818c92;\n"])));
-var RowValue = styled(Text)(_templateObject13$2 || (_templateObject13$2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  font-weight: 600;\n  font-size: 16px;\n  line-height: 24px;\n  color: #ffffff;\n"])));
+var RowTitle = styledComponents.styled(Text)(_templateObject12$4 || (_templateObject12$4 = _taggedTemplateLiteral(["\n  font-weight: bold;\n  font-size: 14px;\n  line-height: 170%;\n  color: #818c92;\n"])));
+var RowValue = styledComponents.styled(Text)(_templateObject13$2 || (_templateObject13$2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  font-weight: 600;\n  font-size: 16px;\n  line-height: 24px;\n  color: #ffffff;\n"])));
 var SpacePadInfoRow = function SpacePadInfoRow(props) {
   var title = props.title,
     value = props.value,
@@ -13807,32 +13807,32 @@ var getPreciseRatio = function getPreciseRatio(ratio) {
 };
 
 var _templateObject$H, _templateObject2$y, _templateObject3$s, _templateObject4$n, _templateObject5$l, _templateObject6$f, _templateObject7$b, _templateObject8$8, _templateObject9$7, _templateObject0$5, _templateObject1$5;
-var SpacePadProjectDetailsWrapper = styled.div(_templateObject$H || (_templateObject$H = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n"])));
-var StyledDetailsHeader = styled.div(_templateObject2$y || (_templateObject2$y = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  margin-bottom: 32px;\n  ", " {\n    flex-direction: column-reverse;\n    align-items: flex-start;\n    justify-content: space-between;\n    margin-bottom: 16px;\n  }\n"])), function (_ref) {
+var SpacePadProjectDetailsWrapper = styledComponents.styled.div(_templateObject$H || (_templateObject$H = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n"])));
+var StyledDetailsHeader = styledComponents.styled.div(_templateObject2$y || (_templateObject2$y = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  margin-bottom: 32px;\n  ", " {\n    flex-direction: column-reverse;\n    align-items: flex-start;\n    justify-content: space-between;\n    margin-bottom: 16px;\n  }\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.mediaQueries.mobile;
 });
-var StyledDetails = styled.div(_templateObject3$s || (_templateObject3$s = _taggedTemplateLiteral(["\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  grid-gap: 32px;\n  height: max-content;\n  ", " {\n    display: flex;\n    flex-direction: column;\n  }\n"])), function (_ref2) {
+var StyledDetails = styledComponents.styled.div(_templateObject3$s || (_templateObject3$s = _taggedTemplateLiteral(["\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  grid-gap: 32px;\n  height: max-content;\n  ", " {\n    display: flex;\n    flex-direction: column;\n  }\n"])), function (_ref2) {
   var theme = _ref2.theme;
   return theme.mediaQueries.mobile;
 });
-var ProjectLogo$1 = styled.div(_templateObject4$n || (_templateObject4$n = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 80px;\n  height: 80px;\n  border-radius: 50%;\n  background: #16161d;\n  background-image: ", ";\n  background-position: center; /* Center the image */\n  background-repeat: no-repeat; /* Do not repeat the image */\n  background-size: cover;\n  border: 3px solid #373749;\n  overflow: hidden;\n  margin-right: 16px;\n"])), function (_ref3) {
+var ProjectLogo$1 = styledComponents.styled.div(_templateObject4$n || (_templateObject4$n = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 80px;\n  height: 80px;\n  border-radius: 50%;\n  background: #16161d;\n  background-image: ", ";\n  background-position: center; /* Center the image */\n  background-repeat: no-repeat; /* Do not repeat the image */\n  background-size: cover;\n  border: 3px solid #373749;\n  overflow: hidden;\n  margin-right: 16px;\n"])), function (_ref3) {
   var background = _ref3.background;
   return background;
 });
-var TimerWrapper = styled.div(_templateObject5$l || (_templateObject5$l = _taggedTemplateLiteral(["\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  ", " {\n    flex-direction: column;\n    align-items: flex-start;\n    margin-bottom: 44px;\n  }\n"])), function (_ref4) {
+var TimerWrapper = styledComponents.styled.div(_templateObject5$l || (_templateObject5$l = _taggedTemplateLiteral(["\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  ", " {\n    flex-direction: column;\n    align-items: flex-start;\n    margin-bottom: 44px;\n  }\n"])), function (_ref4) {
   var theme = _ref4.theme;
   return theme.mediaQueries.mobile;
 });
-var ProjectNameData = styled.div(_templateObject6$f || (_templateObject6$f = _taggedTemplateLiteral(["\n  display: inline-flex;\n"])));
-var DetailsPoster = styled.div(_templateObject7$b || (_templateObject7$b = _taggedTemplateLiteral(["\n  height: 200px;\n  width: 100%;\n  position: relative;\n  background: #16161d;\n  background-image: ", ";\n  background-position: center; /* Center the image */\n  background-repeat: no-repeat; /* Do not repeat the image */\n  background-size: cover;\n  border-radius: 16px;\n"])), function (_ref5) {
+var ProjectNameData = styledComponents.styled.div(_templateObject6$f || (_templateObject6$f = _taggedTemplateLiteral(["\n  display: inline-flex;\n"])));
+var DetailsPoster = styledComponents.styled.div(_templateObject7$b || (_templateObject7$b = _taggedTemplateLiteral(["\n  height: 200px;\n  width: 100%;\n  position: relative;\n  background: #16161d;\n  background-image: ", ";\n  background-position: center; /* Center the image */\n  background-repeat: no-repeat; /* Do not repeat the image */\n  background-size: cover;\n  border-radius: 16px;\n"])), function (_ref5) {
   var background = _ref5.background;
   return background;
 });
-var StyledDetailsDescriptionColumn = styled.div(_templateObject8$8 || (_templateObject8$8 = _taggedTemplateLiteral(["\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n"])));
-var DetailsSpacer = styled.div(_templateObject9$7 || (_templateObject9$7 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 1px;\n  background: #272730;\n  margin: 16px 0px;\n"])));
-var ParticipantsRow = styled(DetailsRow)(_templateObject0$5 || (_templateObject0$5 = _taggedTemplateLiteral(["\n  position: absolute;\n  bottom: -40px;\n"])));
-var IdoEventTimestamp = styled.div(_templateObject1$5 || (_templateObject1$5 = _taggedTemplateLiteral(["\n  position: absolute;\n  font-weight: 500;\n  font-size: 12px;\n  line-height: 170%;\n  color: #535459;\n  right: 0px;\n  bottom: -20px;\n  ", " {\n    left: 0px;\n  }\n"])), function (_ref6) {
+var StyledDetailsDescriptionColumn = styledComponents.styled.div(_templateObject8$8 || (_templateObject8$8 = _taggedTemplateLiteral(["\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n"])));
+var DetailsSpacer = styledComponents.styled.div(_templateObject9$7 || (_templateObject9$7 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 1px;\n  background: #272730;\n  margin: 16px 0px;\n"])));
+var ParticipantsRow = styledComponents.styled(DetailsRow)(_templateObject0$5 || (_templateObject0$5 = _taggedTemplateLiteral(["\n  position: absolute;\n  bottom: -40px;\n"])));
+var IdoEventTimestamp = styledComponents.styled.div(_templateObject1$5 || (_templateObject1$5 = _taggedTemplateLiteral(["\n  position: absolute;\n  font-weight: 500;\n  font-size: 12px;\n  line-height: 170%;\n  color: #535459;\n  right: 0px;\n  bottom: -20px;\n  ", " {\n    left: 0px;\n  }\n"])), function (_ref6) {
   var theme = _ref6.theme;
   return theme.mediaQueries.mobile;
 });
@@ -13959,46 +13959,46 @@ var SpacePadProjectDetails = function SpacePadProjectDetails(props) {
 };
 
 var _templateObject$G, _templateObject2$x, _templateObject3$r, _templateObject4$m, _templateObject5$k, _templateObject6$e, _templateObject7$a, _templateObject8$7, _templateObject9$6;
-var WalletWrapper = styled.div(_templateObject$G || (_templateObject$G = _taggedTemplateLiteral(["\n  display: flex;\n  width: 100%;\n  height: 129px;\n  background: ", ";\n  border: 1px solid ", ";\n  border-radius: 10px;\n  justify-content: space-around;\n  flex-direction: column;\n  padding: 12px 16px 34px 16px;\n"])), function (_ref) {
+var WalletWrapper = styledComponents.styled.div(_templateObject$G || (_templateObject$G = _taggedTemplateLiteral(["\n  display: flex;\n  width: 100%;\n  height: 129px;\n  background: ", ";\n  border: 1px solid ", ";\n  border-radius: 10px;\n  justify-content: space-around;\n  flex-direction: column;\n  padding: 12px 16px 34px 16px;\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.backgrounds.secondary;
 }, function (_ref2) {
   var theme = _ref2.theme;
   return theme.colors.white3;
 });
-styled.div(_templateObject2$x || (_templateObject2$x = _taggedTemplateLiteral(["\n  display: flex;\n  width: 100%;\n  height: 100%;\n  justify-content: space-between;\n  align-items: flex-start;\n  flex-direction: column;\n  flex: 2;\n"])));
-styled.div(_templateObject3$r || (_templateObject3$r = _taggedTemplateLiteral(["\n  position: relative;\n  width: 100%;\n  height: 30px;\n  background: ", ";\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  border-radius: 7px;\n  border: 1px solid ", ";\n  box-sizing: border-box;\n  padding: 3px;\n"])), function (_ref3) {
+styledComponents.styled.div(_templateObject2$x || (_templateObject2$x = _taggedTemplateLiteral(["\n  display: flex;\n  width: 100%;\n  height: 100%;\n  justify-content: space-between;\n  align-items: flex-start;\n  flex-direction: column;\n  flex: 2;\n"])));
+styledComponents.styled.div(_templateObject3$r || (_templateObject3$r = _taggedTemplateLiteral(["\n  position: relative;\n  width: 100%;\n  height: 30px;\n  background: ", ";\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  border-radius: 7px;\n  border: 1px solid ", ";\n  box-sizing: border-box;\n  padding: 3px;\n"])), function (_ref3) {
   var theme = _ref3.theme;
   return theme.colors.dark;
 }, function (_ref4) {
   var theme = _ref4.theme;
   return theme.colors.white3;
 });
-styled.div(_templateObject4$m || (_templateObject4$m = _taggedTemplateLiteral(["\n  position: relative;\n  height: 100%;\n  width: ", "%;\n  font-size: 14px;\n  background: ", ";\n  border-radius: 7px;\n"])), function (_ref5) {
+styledComponents.styled.div(_templateObject4$m || (_templateObject4$m = _taggedTemplateLiteral(["\n  position: relative;\n  height: 100%;\n  width: ", "%;\n  font-size: 14px;\n  background: ", ";\n  border-radius: 7px;\n"])), function (_ref5) {
   var width = _ref5.width;
   return width;
 }, function (_ref6) {
   var theme = _ref6.theme;
   return theme.colors.grey;
 });
-styled.div(_templateObject5$k || (_templateObject5$k = _taggedTemplateLiteral(["\n  position: absolute;\n  color: ", ";\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  font-weight: bold;\n  display: inline-block;\n  width: 100%;\n  text-align: center;\n"])), function (_ref7) {
+styledComponents.styled.div(_templateObject5$k || (_templateObject5$k = _taggedTemplateLiteral(["\n  position: absolute;\n  color: ", ";\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  font-weight: bold;\n  display: inline-block;\n  width: 100%;\n  text-align: center;\n"])), function (_ref7) {
   var theme = _ref7.theme;
   return theme.colors.white;
 });
-var Description$1 = styled.div(_templateObject6$e || (_templateObject6$e = _taggedTemplateLiteral(["\n  display: flex;\n  font-size: 12px;\n  line-height: 2;\n  color: ", ";\n  align-items: flex-start;\n  font-weight: normal;\n"])), function (_ref8) {
+var Description$1 = styledComponents.styled.div(_templateObject6$e || (_templateObject6$e = _taggedTemplateLiteral(["\n  display: flex;\n  font-size: 12px;\n  line-height: 2;\n  color: ", ";\n  align-items: flex-start;\n  font-weight: normal;\n"])), function (_ref8) {
   var theme = _ref8.theme;
   return theme.colors.white55;
 });
-var Title = styled(Description$1)(_templateObject7$a || (_templateObject7$a = _taggedTemplateLiteral(["\n  font-weight: bold;\n  font-size: 14px;\n  flex-direction: row;\n"])));
+var Title = styledComponents.styled(Description$1)(_templateObject7$a || (_templateObject7$a = _taggedTemplateLiteral(["\n  font-weight: bold;\n  font-size: 14px;\n  flex-direction: row;\n"])));
 // We need to implement it in such a way until walletCap per wallet wont be implemented
-var DescriptionWrapper = styled.div(_templateObject8$7 || (_templateObject8$7 = _taggedTemplateLiteral(["\n  color: ", ";\n  line-height: 2;\n  display: flex;\n  flex-direction: column;\n  font-weight: bold;\n  font-size: 14px;\n  flex: 1;\n  border-right: ", ";\n  margin-right: 24px;\n"])), function (_ref9) {
+var DescriptionWrapper = styledComponents.styled.div(_templateObject8$7 || (_templateObject8$7 = _taggedTemplateLiteral(["\n  color: ", ";\n  line-height: 2;\n  display: flex;\n  flex-direction: column;\n  font-weight: bold;\n  font-size: 14px;\n  flex: 1;\n  border-right: ", ";\n  margin-right: 24px;\n"])), function (_ref9) {
   var theme = _ref9.theme;
   return theme.colors.white;
 }, function (_ref0) {
   var withoutBorder = _ref0.withoutBorder;
   return withoutBorder ? "none" : "1px solid #252530";
 });
-var DetailsWrapper = styled.div(_templateObject9$6 || (_templateObject9$6 = _taggedTemplateLiteral(["\n  display: flex;\n  height: 50px;\n  flex-direction: row;\n"])));
+var DetailsWrapper = styledComponents.styled.div(_templateObject9$6 || (_templateObject9$6 = _taggedTemplateLiteral(["\n  display: flex;\n  height: 50px;\n  flex-direction: row;\n"])));
 var WalletCap = function WalletCap(_ref1) {
   _ref1.currentWalletCap;
     var _ref1$softCap = _ref1.softCap,
@@ -14030,7 +14030,7 @@ var WalletCap = function WalletCap(_ref1) {
 };
 
 var _templateObject$F, _templateObject2$w, _templateObject3$q;
-var TooltipContent = styled.div(_templateObject$F || (_templateObject$F = _taggedTemplateLiteral(["\n  background: ", ";\n  padding: 16px;\n  border-radius: 10px;\n  border: 1px solid ", ";\n  box-shadow: 0px 13px 20px rgba(0, 0, 0, 0.25);\n  color: ", ";\n  width: max-content;\n  min-width: 200px;\n  display: none;\n  max-height: 500px;\n  z-index: 9999999;\n  position: absolute;\n  bottom: calc(100% + 16px);\n  transform: translate(34px, 0);\n  right: ", "px;\n  font-size: ", "px;\n\n  ", "\n"])), function (_ref) {
+var TooltipContent = styledComponents.styled.div(_templateObject$F || (_templateObject$F = _taggedTemplateLiteral(["\n  background: ", ";\n  padding: 16px;\n  border-radius: 10px;\n  border: 1px solid ", ";\n  box-shadow: 0px 13px 20px rgba(0, 0, 0, 0.25);\n  color: ", ";\n  width: max-content;\n  min-width: 200px;\n  display: none;\n  max-height: 500px;\n  z-index: 9999999;\n  position: absolute;\n  bottom: calc(100% + 16px);\n  transform: translate(34px, 0);\n  right: ", "px;\n  font-size: ", "px;\n\n  ", "\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.colors.card;
 }, function (_ref2) {
@@ -14045,12 +14045,12 @@ var TooltipContent = styled.div(_templateObject$F || (_templateObject$F = _tagge
 }, function (props) {
   return props.small ? 12 : "";
 }, function (props) {
-  return !props.removeAfter && styled.css(_templateObject2$w || (_templateObject2$w = _taggedTemplateLiteral(["\n      &:after {\n        content: \"\";\n        display: block;\n        width: 0;\n        height: 0;\n        border-left: 10px solid transparent;\n        border-right: 10px solid transparent;\n        border-top: 10px solid ", ";\n        bottom: ", "px;\n        position: absolute;\n        transform: translate(-34px, 9px);\n        right: 0;\n      }\n    "])), function (_ref5) {
+  return !props.removeAfter && styledComponents.css(_templateObject2$w || (_templateObject2$w = _taggedTemplateLiteral(["\n      &:after {\n        content: \"\";\n        display: block;\n        width: 0;\n        height: 0;\n        border-left: 10px solid transparent;\n        border-right: 10px solid transparent;\n        border-top: 10px solid ", ";\n        bottom: ", "px;\n        position: absolute;\n        transform: translate(-34px, 9px);\n        right: 0;\n      }\n    "])), function (_ref5) {
     var theme = _ref5.theme;
     return theme.tooltip.background;
   }, props.bottom || 0);
 });
-var Container$3 = styled.div(_templateObject3$q || (_templateObject3$q = _taggedTemplateLiteral(["\n  position: relative;\n  z-index: 99999999999;\n\n  &:hover ", ", &:focus-within ", " {\n    display: block;\n  }\n"])), TooltipContent, TooltipContent);
+var Container$3 = styledComponents.styled.div(_templateObject3$q || (_templateObject3$q = _taggedTemplateLiteral(["\n  position: relative;\n  z-index: 99999999999;\n\n  &:hover ", ", &:focus-within ", " {\n    display: block;\n  }\n"])), TooltipContent, TooltipContent);
 var Tooltip = function Tooltip(_ref6) {
   var content = _ref6.content,
     children = _ref6.children,
@@ -14076,30 +14076,30 @@ var Tooltip = function Tooltip(_ref6) {
 };
 
 var _templateObject$E, _templateObject2$v, _templateObject3$p, _templateObject4$l, _templateObject5$j, _templateObject6$d, _templateObject7$9, _templateObject8$6, _templateObject9$5;
-var CSSPowerWrapper = styled.div(_templateObject$E || (_templateObject$E = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  background: #252530;\n  border: 1px solid ", ";\n  padding: 16px 24px;\n  border-radius: 10px;\n  ", " {\n    width: 100%;\n    align-items: center;\n    margin-top: 24px;\n  }\n"])), function (_ref) {
+var CSSPowerWrapper = styledComponents.styled.div(_templateObject$E || (_templateObject$E = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  background: #252530;\n  border: 1px solid ", ";\n  padding: 16px 24px;\n  border-radius: 10px;\n  ", " {\n    width: 100%;\n    align-items: center;\n    margin-top: 24px;\n  }\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.colors.white3;
 }, function (_ref2) {
   var theme = _ref2.theme;
   return theme.mediaQueries.tablet;
 });
-var PowerWrapper = styled.div(_templateObject2$v || (_templateObject2$v = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-end;\n  justify-content: space-between;\n  margin-left: 30px;\n"])));
-var CSSPowerText = styled(Text)(_templateObject3$p || (_templateObject3$p = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  font-weight: bold;\n  font-size: 14px;\n  line-height: 140%;\n  color: ", ";\n  width: max-content;\n"])), function (_ref3) {
+var PowerWrapper = styledComponents.styled.div(_templateObject2$v || (_templateObject2$v = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-end;\n  justify-content: space-between;\n  margin-left: 30px;\n"])));
+var CSSPowerText = styledComponents.styled(Text)(_templateObject3$p || (_templateObject3$p = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  font-weight: bold;\n  font-size: 14px;\n  line-height: 140%;\n  color: ", ";\n  width: max-content;\n"])), function (_ref3) {
   var theme = _ref3.theme;
   return theme.colors.white55;
 });
-var CSSPowerValue = styled(Text)(_templateObject4$l || (_templateObject4$l = _taggedTemplateLiteral(["\n  font-weight: bold;\n  font-size: 36px;\n  line-height: 130%;\n  color: ", ";\n"])), function (_ref4) {
+var CSSPowerValue = styledComponents.styled(Text)(_templateObject4$l || (_templateObject4$l = _taggedTemplateLiteral(["\n  font-weight: bold;\n  font-size: 36px;\n  line-height: 130%;\n  color: ", ";\n"])), function (_ref4) {
   var theme = _ref4.theme;
   return theme.colors.white;
 });
-var StyledInfoIcon = styled(Icon$2E)(_templateObject5$j || (_templateObject5$j = _taggedTemplateLiteral(["\n  margin-left: 5px;\n  height: 18px;\n  cursor: pointer;\n"])));
-var PowerDescriptionWrapper = styled.div(_templateObject6$d || (_templateObject6$d = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n"])));
-var PowerTitle = styled(Text)(_templateObject7$9 || (_templateObject7$9 = _taggedTemplateLiteral(["\n  font-weight: bold;\n  font-size: 14px;\n  line-height: 140%;\n"])));
-var PowerAmount = styled(Text)(_templateObject8$6 || (_templateObject8$6 = _taggedTemplateLiteral(["\n  font-weight: bold;\n  font-size: 14px;\n  line-height: 140%;\n  color: ", ";\n  margin-left: 30px;\n"])), function (_ref5) {
+var StyledInfoIcon = styledComponents.styled(Icon$2E)(_templateObject5$j || (_templateObject5$j = _taggedTemplateLiteral(["\n  margin-left: 5px;\n  height: 18px;\n  cursor: pointer;\n"])));
+var PowerDescriptionWrapper = styledComponents.styled.div(_templateObject6$d || (_templateObject6$d = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n"])));
+var PowerTitle = styledComponents.styled(Text)(_templateObject7$9 || (_templateObject7$9 = _taggedTemplateLiteral(["\n  font-weight: bold;\n  font-size: 14px;\n  line-height: 140%;\n"])));
+var PowerAmount = styledComponents.styled(Text)(_templateObject8$6 || (_templateObject8$6 = _taggedTemplateLiteral(["\n  font-weight: bold;\n  font-size: 14px;\n  line-height: 140%;\n  color: ", ";\n  margin-left: 30px;\n"])), function (_ref5) {
   var theme = _ref5.theme;
   return theme.colors.white55;
 });
-var PowerLine = styled.div(_templateObject9$5 || (_templateObject9$5 = _taggedTemplateLiteral(["\n  display: flex;\n  flex: direction: row;\n  justify-content: space-between;\n  margin-bottom: ", "px;\n"])), function (_ref6) {
+var PowerLine = styledComponents.styled.div(_templateObject9$5 || (_templateObject9$5 = _taggedTemplateLiteral(["\n  display: flex;\n  flex: direction: row;\n  justify-content: space-between;\n  margin-bottom: ", "px;\n"])), function (_ref6) {
   var mb = _ref6.mb;
   return mb || 0;
 });
@@ -14153,7 +14153,7 @@ var CSSPower = function CSSPower(_ref7) {
 
 var _excluded$4 = ["value", "onUserInput", "placeholder", "type"];
 var _templateObject$D;
-var StyledInput = styled.input(_templateObject$D || (_templateObject$D = _taggedTemplateLiteral(["\n  color: ", ";\n  width: 0;\n  position: relative;\n  font-weight: 700;\n  outline: none;\n  border: none;\n  flex: 1 1 auto;\n  background-color: transparent;\n  background: transparent;\n  font-size: 24px;\n  text-align: ", ";\n  white-space: nowrap;\n  line-height: 33px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  padding: 0px;\n  -webkit-appearance: textfield;\n\n  ::-webkit-search-decoration {\n    -webkit-appearance: none;\n  }\n\n  [type=\"number\"] {\n    -moz-appearance: textfield;\n  }\n\n  ::-webkit-outer-spin-button,\n  ::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n  }\n\n  ::placeholder {\n    color: ", ";\n  }\n"])), function (_ref) {
+var StyledInput = styledComponents.styled.input(_templateObject$D || (_templateObject$D = _taggedTemplateLiteral(["\n  color: ", ";\n  width: 0;\n  position: relative;\n  font-weight: 700;\n  outline: none;\n  border: none;\n  flex: 1 1 auto;\n  background-color: transparent;\n  background: transparent;\n  font-size: 24px;\n  text-align: ", ";\n  white-space: nowrap;\n  line-height: 33px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  padding: 0px;\n  -webkit-appearance: textfield;\n\n  ::-webkit-search-decoration {\n    -webkit-appearance: none;\n  }\n\n  [type=\"number\"] {\n    -moz-appearance: textfield;\n  }\n\n  ::-webkit-outer-spin-button,\n  ::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n  }\n\n  ::placeholder {\n    color: ", ";\n  }\n"])), function (_ref) {
   var error = _ref.error,
     theme = _ref.theme;
   return error ? theme.colors.failure : theme.colors.text;
@@ -14200,7 +14200,7 @@ var NumericalInput = /*#__PURE__*/React.memo(function InnerInput(_ref4) {
 });
 
 var _templateObject$C, _templateObject2$u, _templateObject3$o, _templateObject4$k, _templateObject5$i, _templateObject6$c, _templateObject7$8, _templateObject8$5, _templateObject9$4, _templateObject0$4, _templateObject1$4, _templateObject10$4, _templateObject11$4, _templateObject12$3;
-var SpacePadDatesWrapper = styled.div(_templateObject$C || (_templateObject$C = _taggedTemplateLiteral(["\n  display: flex;\n  width: 100%;\n  background: ", ";\n  border: 1px solid ", ";\n  border-radius: 10px;\n  padding: 16px 24px;\n  align-items: center;\n  justify-content: space-between;\n  ", " {\n    flex-direction: column;\n    align-items: flex-start;\n  }\n"])), function (_ref) {
+var SpacePadDatesWrapper = styledComponents.styled.div(_templateObject$C || (_templateObject$C = _taggedTemplateLiteral(["\n  display: flex;\n  width: 100%;\n  background: ", ";\n  border: 1px solid ", ";\n  border-radius: 10px;\n  padding: 16px 24px;\n  align-items: center;\n  justify-content: space-between;\n  ", " {\n    flex-direction: column;\n    align-items: flex-start;\n  }\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.backgrounds.secondary;
 }, function (_ref2) {
@@ -14210,7 +14210,7 @@ var SpacePadDatesWrapper = styled.div(_templateObject$C || (_templateObject$C =
   var theme = _ref3.theme;
   return theme.mediaQueries.mobile;
 });
-var ActiveDot = styled.div(_templateObject2$u || (_templateObject2$u = _taggedTemplateLiteral(["\n  height: 16px;\n  width: 16px;\n  border-radius: 50%;\n  background: ", ";\n  margin-right: ", "px;\n  ", "\n"])), function (_ref4) {
+var ActiveDot = styledComponents.styled.div(_templateObject2$u || (_templateObject2$u = _taggedTemplateLiteral(["\n  height: 16px;\n  width: 16px;\n  border-radius: 50%;\n  background: ", ";\n  margin-right: ", "px;\n  ", "\n"])), function (_ref4) {
   var color = _ref4.color;
   return color;
 }, function (_ref5) {
@@ -14220,45 +14220,45 @@ var ActiveDot = styled.div(_templateObject2$u || (_templateObject2$u = _taggedTe
   var fetchingData = _ref6.fetchingData;
   return fetchingData && "\n    transition: all 0.25s ease-in-out;\n    animation: stretch 2s infinite;\n    @keyframes stretch {\n      0% {\n        transform: scale(1);\n      }\n      25% {\n        transform: scale(0.9);\n      }\n      50% {\n        transform: scale(1.2);\n      }\n      75% {\n        transform: scale(0.9);\n      }\n      100% {\n        transform: scale(1);\n      }\n    }\n  ";
 });
-var TimeWrapper = styled.div(_templateObject3$o || (_templateObject3$o = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  ", " {\n    flex-direction: column;\n    align-items: flex-start;\n    margin-bottom: 21px;\n  }\n"])), function (_ref7) {
+var TimeWrapper = styledComponents.styled.div(_templateObject3$o || (_templateObject3$o = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  ", " {\n    flex-direction: column;\n    align-items: flex-start;\n    margin-bottom: 21px;\n  }\n"])), function (_ref7) {
   var theme = _ref7.theme;
   return theme.mediaQueries.mobile;
 });
-var EndTimeWrapper = styled.div(_templateObject4$k || (_templateObject4$k = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  align-items: flex-start;\n  height: 41px;\n"])));
-var TimeNumber = styled(Text)(_templateObject5$i || (_templateObject5$i = _taggedTemplateLiteral(["\n  font-weight: 600;\n  font-size: 20px;\n  margin: 0px;\n  padding: 0px;\n  height: 100%;\n  line-height: 100%;\n"])));
-var PeriodText = styled(Text)(_templateObject6$c || (_templateObject6$c = _taggedTemplateLiteral(["\n  font-weight: 600;\n  font-size: 16px;\n  margin-right: 0px;\n  padding: 0px;\n  color: ", ";\n  height: 100%;\n  // Temporarly\n  line-height: 17px;\n"])), function (_ref8) {
+var EndTimeWrapper = styledComponents.styled.div(_templateObject4$k || (_templateObject4$k = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  align-items: flex-start;\n  height: 41px;\n"])));
+var TimeNumber = styledComponents.styled(Text)(_templateObject5$i || (_templateObject5$i = _taggedTemplateLiteral(["\n  font-weight: 600;\n  font-size: 20px;\n  margin: 0px;\n  padding: 0px;\n  height: 100%;\n  line-height: 100%;\n"])));
+var PeriodText = styledComponents.styled(Text)(_templateObject6$c || (_templateObject6$c = _taggedTemplateLiteral(["\n  font-weight: 600;\n  font-size: 16px;\n  margin-right: 0px;\n  padding: 0px;\n  color: ", ";\n  height: 100%;\n  // Temporarly\n  line-height: 17px;\n"])), function (_ref8) {
   var theme = _ref8.theme;
   return theme.colors.primary;
 });
-var DetailedTimeWrapper = styled.div(_templateObject7$8 || (_templateObject7$8 = _taggedTemplateLiteral(["\n  width: 150px;\n  display: flex;\n  flex-direction: row;\n  align-items: flex-end;\n  justify-content: space-between;\n  color: ", ";\n  font-size: 20px;\n  font-weight: bold;\n"])), function (_ref9) {
+var DetailedTimeWrapper = styledComponents.styled.div(_templateObject7$8 || (_templateObject7$8 = _taggedTemplateLiteral(["\n  width: 150px;\n  display: flex;\n  flex-direction: row;\n  align-items: flex-end;\n  justify-content: space-between;\n  color: ", ";\n  font-size: 20px;\n  font-weight: bold;\n"])), function (_ref9) {
   var theme = _ref9.theme;
   return theme.colors.white30;
 });
-var TimeValues = styled.div(_templateObject8$5 || (_templateObject8$5 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: flex-end;\n  width: 30px;\n"])));
-var DateWrapper = styled.div(_templateObject9$4 || (_templateObject9$4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  ", " {\n    width: 100%;\n    justify-content: space-between;\n  }\n"])), function (_ref0) {
+var TimeValues = styledComponents.styled.div(_templateObject8$5 || (_templateObject8$5 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: flex-end;\n  width: 30px;\n"])));
+var DateWrapper = styledComponents.styled.div(_templateObject9$4 || (_templateObject9$4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  ", " {\n    width: 100%;\n    justify-content: space-between;\n  }\n"])), function (_ref0) {
   var theme = _ref0.theme;
   return theme.mediaQueries.mobile;
 });
-var ActiveStateWrapper = styled.div(_templateObject0$4 || (_templateObject0$4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  ", " {\n    margin-bottom: 17px;\n  }\n"])), function (_ref1) {
+var ActiveStateWrapper = styledComponents.styled.div(_templateObject0$4 || (_templateObject0$4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  ", " {\n    margin-bottom: 17px;\n  }\n"])), function (_ref1) {
   var theme = _ref1.theme;
   return theme.mediaQueries.mobile;
 });
-var RoundDescription = styled.div(_templateObject1$4 || (_templateObject1$4 = _taggedTemplateLiteral(["\n  font-size: 15px;\n  color: ", ";\n  line-height: 20px;\n  margin-top: 3px;\n  margin-left: -40px;\n"])), function (_ref10) {
+var RoundDescription = styledComponents.styled.div(_templateObject1$4 || (_templateObject1$4 = _taggedTemplateLiteral(["\n  font-size: 15px;\n  color: ", ";\n  line-height: 20px;\n  margin-top: 3px;\n  margin-left: -40px;\n"])), function (_ref10) {
   var theme = _ref10.theme;
   return theme.colors.white55;
 });
-var AcocuntDataWrapper = styled.div(_templateObject10$4 || (_templateObject10$4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  ", " {\n    flex-direction: column;\n    align-items: flex-start;\n    button {\n      width: 100%;\n    }\n  }\n"])), function (_ref11) {
+var AcocuntDataWrapper = styledComponents.styled.div(_templateObject10$4 || (_templateObject10$4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  ", " {\n    flex-direction: column;\n    align-items: flex-start;\n    button {\n      width: 100%;\n    }\n  }\n"])), function (_ref11) {
   var theme = _ref11.theme;
   return theme.mediaQueries.mobile;
 });
-var AccountInfoText$1 = styled(Text)(_templateObject11$4 || (_templateObject11$4 = _taggedTemplateLiteral(["\n  font-weight: bold;\n  font-size: 18px;\n  line-height: 130%;\n  display: flex;\n  align-items: center;\n  margin-right: 8px;\n  ", " {\n    font-size: 16px;\n  }\n  ", " {\n    font-size: 14px;\n    margin-right: 0px;\n    margin-bottom: 16px;\n  }\n"])), function (_ref12) {
+var AccountInfoText$1 = styledComponents.styled(Text)(_templateObject11$4 || (_templateObject11$4 = _taggedTemplateLiteral(["\n  font-weight: bold;\n  font-size: 18px;\n  line-height: 130%;\n  display: flex;\n  align-items: center;\n  margin-right: 8px;\n  ", " {\n    font-size: 16px;\n  }\n  ", " {\n    font-size: 14px;\n    margin-right: 0px;\n    margin-bottom: 16px;\n  }\n"])), function (_ref12) {
   var theme = _ref12.theme;
   return theme.mediaQueries.tablet;
 }, function (_ref13) {
   var theme = _ref13.theme;
   return theme.mediaQueries.mobile;
 });
-var TimerText = styled(Text)(_templateObject12$3 || (_templateObject12$3 = _taggedTemplateLiteral(["\n  font-weight: bold;\n  font-size: 11px;\n  color: ", ";\n  strong {\n    color: ", ";\n  }\n"])), baseColors.white55, baseColors.white);
+var TimerText = styledComponents.styled(Text)(_templateObject12$3 || (_templateObject12$3 = _taggedTemplateLiteral(["\n  font-weight: bold;\n  font-size: 11px;\n  color: ", ";\n  strong {\n    color: ", ";\n  }\n"])), baseColors.white55, baseColors.white);
 var SpacePadDates = function SpacePadDates(_ref14) {
   var _ref14$days = _ref14.days,
     days = _ref14$days === void 0 ? "3" : _ref14$days,
@@ -14399,12 +14399,12 @@ var SpacePadDates = function SpacePadDates(_ref14) {
 };
 
 var _templateObject$B, _templateObject2$t, _templateObject3$n, _templateObject4$j, _templateObject5$h, _templateObject6$b, _templateObject7$7, _templateObject8$4, _templateObject9$3, _templateObject0$3, _templateObject1$3, _templateObject10$3, _templateObject11$3, _templateObject12$2, _templateObject13$1;
-var AddToCapWrapper = styled.div(_templateObject$B || (_templateObject$B = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  height: max-content;\n  width: 100%;\n  padding: 32px;\n  background: #191921;\n  border-radius: 16px;\n"])));
-var LogicComponentsWrapper = styled.div(_templateObject2$t || (_templateObject2$t = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  ", " {\n    flex-direction: column;\n  }\n"])), function (_ref) {
+var AddToCapWrapper = styledComponents.styled.div(_templateObject$B || (_templateObject$B = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  height: max-content;\n  width: 100%;\n  padding: 32px;\n  background: #191921;\n  border-radius: 16px;\n"])));
+var LogicComponentsWrapper = styledComponents.styled.div(_templateObject2$t || (_templateObject2$t = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  ", " {\n    flex-direction: column;\n  }\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.mediaQueries.mobile;
 });
-var CapInput = styled(NumericalInput)(_templateObject3$n || (_templateObject3$n = _taggedTemplateLiteral(["\n  height: 50px;\n  font-size: 16px;\n  padding: 11px 0px 11px 24px;\n  border: 1px solid ", ";\n  background: ", ";\n  border-radius: 10px;\n  margin-bottom: 20px;\n  ::placeholder {\n    color: ", ";\n    font-weight: 500;\n  }\n"])), function (_ref2) {
+var CapInput = styledComponents.styled(NumericalInput)(_templateObject3$n || (_templateObject3$n = _taggedTemplateLiteral(["\n  height: 50px;\n  font-size: 16px;\n  padding: 11px 0px 11px 24px;\n  border: 1px solid ", ";\n  background: ", ";\n  border-radius: 10px;\n  margin-bottom: 20px;\n  ::placeholder {\n    color: ", ";\n    font-weight: 500;\n  }\n"])), function (_ref2) {
   var theme = _ref2.theme;
   return theme.colors.white10;
 }, function (_ref3) {
@@ -14414,31 +14414,31 @@ var CapInput = styled(NumericalInput)(_templateObject3$n || (_templateObject3$n
   var theme = _ref4.theme;
   return theme.colors.white55;
 });
-var EligibleWrapper = styled.div(_templateObject4$j || (_templateObject4$j = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  width: max-content;\n  height: 50px;\n  width: 100%;\n  padding: 15.5px;\n  //Used only once in this component, not declared on theme\n  background: #272730;\n  box-sizing: border-box;\n  border-radius: 10px;\n  margin-bottom: 26px;\n"])));
-var IdoActionButton = styled(Button$1)(_templateObject5$h || (_templateObject5$h = _taggedTemplateLiteral(["\n  color: ", " !important;\n  height: 50px;\n  width: 100%;\n  &:disabled,\n  &.button--disabled {\n    background: #12ffb8;\n    opacity: 0.2;\n    color: #3d3d41 !important;\n  }\n  ", " {\n    margin-top: 16px;\n    width: 100%;\n  }\n"])), function (_ref5) {
+var EligibleWrapper = styledComponents.styled.div(_templateObject4$j || (_templateObject4$j = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  width: max-content;\n  height: 50px;\n  width: 100%;\n  padding: 15.5px;\n  //Used only once in this component, not declared on theme\n  background: #272730;\n  box-sizing: border-box;\n  border-radius: 10px;\n  margin-bottom: 26px;\n"])));
+var IdoActionButton = styledComponents.styled(Button$1)(_templateObject5$h || (_templateObject5$h = _taggedTemplateLiteral(["\n  color: ", " !important;\n  height: 50px;\n  width: 100%;\n  &:disabled,\n  &.button--disabled {\n    background: #12ffb8;\n    opacity: 0.2;\n    color: #3d3d41 !important;\n  }\n  ", " {\n    margin-top: 16px;\n    width: 100%;\n  }\n"])), function (_ref5) {
   var theme = _ref5.theme;
   return theme.colors.dark;
 }, function (_ref6) {
   var theme = _ref6.theme;
   return theme.mediaQueries.mobile;
 });
-var MainFunctionsWrapper = styled.div(_templateObject6$b || (_templateObject6$b = _taggedTemplateLiteral(["\n  position: relative;\n  width: 100%;\n  height: 50px;\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  margin-top: 10px;\n  ", " {\n    margin-bottom: 10px;\n  }\n"])), function (_ref7) {
+var MainFunctionsWrapper = styledComponents.styled.div(_templateObject6$b || (_templateObject6$b = _taggedTemplateLiteral(["\n  position: relative;\n  width: 100%;\n  height: 50px;\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  margin-top: 10px;\n  ", " {\n    margin-bottom: 10px;\n  }\n"])), function (_ref7) {
   var theme = _ref7.theme;
   return theme.mediaQueries.mobile;
 });
-var SignedRow = styled.div(_templateObject7$7 || (_templateObject7$7 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  width: max-content;\n  justify-content: center;\n  ", " {\n    margin-top: 16px;\n    width: 100%;\n  }\n"])), function (_ref8) {
+var SignedRow = styledComponents.styled.div(_templateObject7$7 || (_templateObject7$7 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  width: max-content;\n  justify-content: center;\n  ", " {\n    margin-top: 16px;\n    width: 100%;\n  }\n"])), function (_ref8) {
   var theme = _ref8.theme;
   return theme.mediaQueries.mobile;
 });
-var ErrorComponent = styled(Text)(_templateObject8$4 || (_templateObject8$4 = _taggedTemplateLiteral(["\n  font-weight: 600;\n  position: absolute;\n  top: 41px;\n  left: 10px;\n  color: ", ";\n  font-size: 12px;\n"])), function (_ref9) {
+var ErrorComponent = styledComponents.styled(Text)(_templateObject8$4 || (_templateObject8$4 = _taggedTemplateLiteral(["\n  font-weight: 600;\n  position: absolute;\n  top: 41px;\n  left: 10px;\n  color: ", ";\n  font-size: 12px;\n"])), function (_ref9) {
   var theme = _ref9.theme;
   return theme.colors.error;
 });
-var CoinWrapper = styled.div(_templateObject9$3 || (_templateObject9$3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  width: 97px;\n  height: 50px;\n  margin-left: 16px;\n  padding: 15.5px;\n  border: 1px solid #373749;\n  //Used only once in this component, not declared on theme\n  background: #1f1f29;\n  box-sizing: border-box;\n  border-radius: 10px;\n  ", " {\n    margin-right: 0px;\n  }\n"])), function (_ref0) {
+var CoinWrapper = styledComponents.styled.div(_templateObject9$3 || (_templateObject9$3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  width: 97px;\n  height: 50px;\n  margin-left: 16px;\n  padding: 15.5px;\n  border: 1px solid #373749;\n  //Used only once in this component, not declared on theme\n  background: #1f1f29;\n  box-sizing: border-box;\n  border-radius: 10px;\n  ", " {\n    margin-right: 0px;\n  }\n"])), function (_ref0) {
   var theme = _ref0.theme;
   return theme.mediaQueries.mobile;
 });
-var AddCapButton = styled(Button$1)(_templateObject0$3 || (_templateObject0$3 = _taggedTemplateLiteral(["\n  color: ", ";\n  height: 50px;\n  width: 100%;\n  &:disabled,\n  &.button--disabled {\n    background: ", ";\n    color: ", ";\n  }\n"])), function (_ref1) {
+var AddCapButton = styledComponents.styled(Button$1)(_templateObject0$3 || (_templateObject0$3 = _taggedTemplateLiteral(["\n  color: ", ";\n  height: 50px;\n  width: 100%;\n  &:disabled,\n  &.button--disabled {\n    background: ", ";\n    color: ", ";\n  }\n"])), function (_ref1) {
   var theme = _ref1.theme;
   return theme.colors.dark;
 }, function (_ref10) {
@@ -14448,17 +14448,17 @@ var AddCapButton = styled(Button$1)(_templateObject0$3 || (_templateObject0$3 =
   var theme = _ref11.theme;
   return theme.colors.white55;
 });
-var AccountInfoText = styled(Text)(_templateObject1$3 || (_templateObject1$3 = _taggedTemplateLiteral(["\n  font-weight: bold;\n  font-size: 18px;\n  line-height: 130%;\n  display: flex;\n  align-items: center;\n  margin-bottom: 26px;\n  text-align: center;\n  ", " {\n    font-size: 16px;\n  }\n  ", " {\n    font-size: 14px;\n  }\n  ", "\n"])), function (_ref12) {
+var AccountInfoText = styledComponents.styled(Text)(_templateObject1$3 || (_templateObject1$3 = _taggedTemplateLiteral(["\n  font-weight: bold;\n  font-size: 18px;\n  line-height: 130%;\n  display: flex;\n  align-items: center;\n  margin-bottom: 26px;\n  text-align: center;\n  ", " {\n    font-size: 16px;\n  }\n  ", " {\n    font-size: 14px;\n  }\n  ", "\n"])), function (_ref12) {
   var theme = _ref12.theme;
   return theme.mediaQueries.tablet;
 }, function (_ref13) {
   var theme = _ref13.theme;
   return theme.mediaQueries.mobile;
 }, styledSystem.space);
-var PersonalValuesWrapper = styled.div(_templateObject10$3 || (_templateObject10$3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  height: max-content;\n  width: 100%;\n  padding: 14px 16px;\n  border: 1px solid #383847;\n  border-radius: 8px;\n  margin-bottom: 30px;\n"])));
-var PersonalValueRow = styled.div(_templateObject11$3 || (_templateObject11$3 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n"])));
-var PersonalValueTitle = styled(Text)(_templateObject12$2 || (_templateObject12$2 = _taggedTemplateLiteral(["\n  font-weight: bold;\n  font-size: 14px;\n  line-height: 170%;\n  text-align: center;\n  color: #818c92;\n"])));
-var Row = styled(Box)(_templateObject13$1 || (_templateObject13$1 = _taggedTemplateLiteral(["\n  width: 100%;\n  display: flex;\n  padding: 0;\n  align-items: ", ";\n  padding: ", ";\n  border: ", ";\n  border-radius: ", ";\n"])), function (_ref14) {
+var PersonalValuesWrapper = styledComponents.styled.div(_templateObject10$3 || (_templateObject10$3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  height: max-content;\n  width: 100%;\n  padding: 14px 16px;\n  border: 1px solid #383847;\n  border-radius: 8px;\n  margin-bottom: 30px;\n"])));
+var PersonalValueRow = styledComponents.styled.div(_templateObject11$3 || (_templateObject11$3 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n"])));
+var PersonalValueTitle = styledComponents.styled(Text)(_templateObject12$2 || (_templateObject12$2 = _taggedTemplateLiteral(["\n  font-weight: bold;\n  font-size: 14px;\n  line-height: 170%;\n  text-align: center;\n  color: #818c92;\n"])));
+var Row = styledComponents.styled(Box)(_templateObject13$1 || (_templateObject13$1 = _taggedTemplateLiteral(["\n  width: 100%;\n  display: flex;\n  padding: 0;\n  align-items: ", ";\n  padding: ", ";\n  border: ", ";\n  border-radius: ", ";\n"])), function (_ref14) {
   var align = _ref14.align;
   return align || "center";
 }, function (_ref15) {
@@ -14793,17 +14793,17 @@ var AddToCap = function AddToCap(_ref18) {
 };
 
 var _templateObject$A, _templateObject2$s, _templateObject3$m, _templateObject4$i, _templateObject5$g;
-var Description = styled.div(_templateObject$A || (_templateObject$A = _taggedTemplateLiteral(["\n  font-family: Manrope;\n  font-size: 12px;\n  line-height: 170%;\n  color: rgba(255, 255, 255, 0.55);\n  align-self: flex-start;\n  font-weight: normal;\n"])));
-var CounterWrapper = styled.div(_templateObject2$s || (_templateObject2$s = _taggedTemplateLiteral(["\n  position: relative;\n  width: 100%;\n  height: 81px;\n  background: ", ";\n  border: 1px solid rgba(255, 255, 255, 0.03);\n  display: flex;\n  border-radius: 10px;\n  padding: 15px 0px 21px 20px;\n"])), function (_ref) {
+var Description = styledComponents.styled.div(_templateObject$A || (_templateObject$A = _taggedTemplateLiteral(["\n  font-family: Manrope;\n  font-size: 12px;\n  line-height: 170%;\n  color: rgba(255, 255, 255, 0.55);\n  align-self: flex-start;\n  font-weight: normal;\n"])));
+var CounterWrapper = styledComponents.styled.div(_templateObject2$s || (_templateObject2$s = _taggedTemplateLiteral(["\n  position: relative;\n  width: 100%;\n  height: 81px;\n  background: ", ";\n  border: 1px solid rgba(255, 255, 255, 0.03);\n  display: flex;\n  border-radius: 10px;\n  padding: 15px 0px 21px 20px;\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.backgrounds.secondary;
 });
-var CapDescriptionWrapper = styled.div(_templateObject3$m || (_templateObject3$m = _taggedTemplateLiteral(["\n  color: ", ";\n  display: flex;\n  flex-direction: column;\n  justify-content: space-around;\n  font-weight: bold;\n"])), function (_ref2) {
+var CapDescriptionWrapper = styledComponents.styled.div(_templateObject3$m || (_templateObject3$m = _taggedTemplateLiteral(["\n  color: ", ";\n  display: flex;\n  flex-direction: column;\n  justify-content: space-around;\n  font-weight: bold;\n"])), function (_ref2) {
   var theme = _ref2.theme;
   return theme.colors.white;
 });
-var SoftCapWrapper = styled(CapDescriptionWrapper)(_templateObject4$i || (_templateObject4$i = _taggedTemplateLiteral(["\n  border-right: 2px solid #252530;\n  margin-left: 10px;\n  padding-right: 17px;\n"])));
-var HardCapWrapper = styled(CapDescriptionWrapper)(_templateObject5$g || (_templateObject5$g = _taggedTemplateLiteral(["\n  align-items: center;\n  margin-left: 32px;\n"])));
+var SoftCapWrapper = styledComponents.styled(CapDescriptionWrapper)(_templateObject4$i || (_templateObject4$i = _taggedTemplateLiteral(["\n  border-right: 2px solid #252530;\n  margin-left: 10px;\n  padding-right: 17px;\n"])));
+var HardCapWrapper = styledComponents.styled(CapDescriptionWrapper)(_templateObject5$g || (_templateObject5$g = _taggedTemplateLiteral(["\n  align-items: center;\n  margin-left: 32px;\n"])));
 var CapCounter = function CapCounter(_ref3) {
   var _ref3$softCap = _ref3.softCap,
     softCap = _ref3$softCap === void 0 ? 332.52 : _ref3$softCap,
@@ -14858,17 +14858,17 @@ var SpacePadSchedule = function SpacePadSchedule(_ref) {
 };
 
 var _templateObject$z, _templateObject2$r, _templateObject3$l, _templateObject4$h, _templateObject5$f;
-var MainWrapper = styled.div(_templateObject$z || (_templateObject$z = _taggedTemplateLiteral(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: rgba(255, 255, 255, 0.1);\n  width: ", ";\n  height: 34px;\n  border-radius: 10px;\n  font-weight: bold;\n  font-size: 14px;\n  padding: 2px;\n  z-index: 99;\n"])), function (_ref) {
+var MainWrapper = styledComponents.styled.div(_templateObject$z || (_templateObject$z = _taggedTemplateLiteral(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: rgba(255, 255, 255, 0.1);\n  width: ", ";\n  height: 34px;\n  border-radius: 10px;\n  font-weight: bold;\n  font-size: 14px;\n  padding: 2px;\n  z-index: 99;\n"])), function (_ref) {
   var width = _ref.width;
   return width ? "".concat(width, "px") : "100%";
 });
-var SecondWrapper = styled.div(_templateObject2$r || (_templateObject2$r = _taggedTemplateLiteral(["\n  position: relative;\n  display: flex;\n  border-radius: 8px;\n  z-index: 101;\n  width: 100%;\n"])));
-var ToggleButton = styled.div(_templateObject3$l || (_templateObject3$l = _taggedTemplateLiteral(["\n  position: absolute;\n  display: flex;\n  height: 100%;\n  width: 50%;\n  background: rgba(255, 255, 255, 0.85);\n  border-radius: 8px;\n  transform: translateX(", ");\n  transition: 0.4s ease-out;\n  z-index: 100;\n"])), function (_ref2) {
+var SecondWrapper = styledComponents.styled.div(_templateObject2$r || (_templateObject2$r = _taggedTemplateLiteral(["\n  position: relative;\n  display: flex;\n  border-radius: 8px;\n  z-index: 101;\n  width: 100%;\n"])));
+var ToggleButton = styledComponents.styled.div(_templateObject3$l || (_templateObject3$l = _taggedTemplateLiteral(["\n  position: absolute;\n  display: flex;\n  height: 100%;\n  width: 50%;\n  background: rgba(255, 255, 255, 0.85);\n  border-radius: 8px;\n  transform: translateX(", ");\n  transition: 0.4s ease-out;\n  z-index: 100;\n"])), function (_ref2) {
   var isSwitched = _ref2.isSwitched;
   return isSwitched ? "100%" : "0%";
 });
-var RowWrapper = styled.div(_templateObject4$h || (_templateObject4$h = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n  height: 100%;\n"])));
-var SubscriptionWrapper = styled.div(_templateObject5$f || (_templateObject5$f = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 30px;\n  width: 50%;\n  border-radius: 8px;\n  cursor: pointer;\n  z-index: 101;\n  color: ", ";\n  transition: 0.4s ease-out;\n"])), function (_ref3) {
+var RowWrapper = styledComponents.styled.div(_templateObject4$h || (_templateObject4$h = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n  height: 100%;\n"])));
+var SubscriptionWrapper = styledComponents.styled.div(_templateObject5$f || (_templateObject5$f = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 30px;\n  width: 50%;\n  border-radius: 8px;\n  cursor: pointer;\n  z-index: 101;\n  color: ", ";\n  transition: 0.4s ease-out;\n"])), function (_ref3) {
   var isActive = _ref3.isActive;
   return isActive ? "black" : "rgba(255, 255, 255, 0.25)";
 });
@@ -14915,15 +14915,15 @@ var Switch = function Switch(_ref4) {
 };
 
 var _templateObject$y, _templateObject2$q, _templateObject3$k, _templateObject4$g, _templateObject5$e, _templateObject6$a, _templateObject7$6, _templateObject8$3, _templateObject9$2, _templateObject0$2, _templateObject1$2, _templateObject10$2, _templateObject11$2, _templateObject12$1;
-var SponsoredText = styled(Text)(_templateObject$y || (_templateObject$y = _taggedTemplateLiteral(["\n  position: absolute;\n  font-weight: normal;\n  font-size: 10px;\n  line-height: 170%;\n  color: #12ffb8;\n  top: -20px;\n  left: 10px;\n"])));
-var SpacePadProjectWrapper = styled.div(_templateObject2$q || (_templateObject2$q = _taggedTemplateLiteral(["\n  position: relative;\n  width: 406px;\n  height: max-content;\n  ", " {\n    min-width: max-content;\n  }\n  ", " {\n    width: 100%;\n  }\n"])), function (_ref) {
+var SponsoredText = styledComponents.styled(Text)(_templateObject$y || (_templateObject$y = _taggedTemplateLiteral(["\n  position: absolute;\n  font-weight: normal;\n  font-size: 10px;\n  line-height: 170%;\n  color: #12ffb8;\n  top: -20px;\n  left: 10px;\n"])));
+var SpacePadProjectWrapper = styledComponents.styled.div(_templateObject2$q || (_templateObject2$q = _taggedTemplateLiteral(["\n  position: relative;\n  width: 406px;\n  height: max-content;\n  ", " {\n    min-width: max-content;\n  }\n  ", " {\n    width: 100%;\n  }\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.mediaQueries.desktop;
 }, function (_ref2) {
   var theme = _ref2.theme;
   return theme.mediaQueries.mobile;
 });
-var SpacePadProjectCard = styled.div(_templateObject3$k || (_templateObject3$k = _taggedTemplateLiteral(["\n  background: ", ";\n  border: 1px solid ", ";\n  box-sizing: border-box;\n  border-radius: 15px;\n  max-width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: space-between;\n  overflow: hidden;\n  cursor: pointer;\n  padding-bottom: 24px;\n"])), function (_ref3) {
+var SpacePadProjectCard = styledComponents.styled.div(_templateObject3$k || (_templateObject3$k = _taggedTemplateLiteral(["\n  background: ", ";\n  border: 1px solid ", ";\n  box-sizing: border-box;\n  border-radius: 15px;\n  max-width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: space-between;\n  overflow: hidden;\n  cursor: pointer;\n  padding-bottom: 24px;\n"])), function (_ref3) {
   var theme = _ref3.theme;
   return theme.backgrounds.primary;
 }, function (_ref4) {
@@ -14931,29 +14931,29 @@ var SpacePadProjectCard = styled.div(_templateObject3$k || (_templateObject3$k =
     highlighted = _ref4.highlighted;
   return highlighted ? "#12FFB8" : theme.colors.white3;
 });
-var ProjectPoster = styled.div(_templateObject4$g || (_templateObject4$g = _taggedTemplateLiteral(["\n  min-height: 175px;\n  width: 100%;\n  position: relative;\n  background: #16161d;\n  background-image: ", ";\n  background-position: center; /* Center the image */\n  background-repeat: no-repeat; /* Do not repeat the image */\n  background-size: cover;\n"])), function (_ref5) {
+var ProjectPoster = styledComponents.styled.div(_templateObject4$g || (_templateObject4$g = _taggedTemplateLiteral(["\n  min-height: 175px;\n  width: 100%;\n  position: relative;\n  background: #16161d;\n  background-image: ", ";\n  background-position: center; /* Center the image */\n  background-repeat: no-repeat; /* Do not repeat the image */\n  background-size: cover;\n"])), function (_ref5) {
   var background = _ref5.background;
   return background;
 });
-var ProjectLogo = styled.div(_templateObject5$e || (_templateObject5$e = _taggedTemplateLiteral(["\n  position: absolute;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 80px;\n  height: 80px;\n  border-radius: 50%;\n  top: 138px;\n  left: 20px;\n  background: #16161d;\n  background-image: ", ";\n  background-position: center; /* Center the image */\n  background-repeat: no-repeat; /* Do not repeat the image */\n  background-size: cover;\n  border: 3px solid #373749;\n  overflow: hidden;\n"])), function (_ref6) {
+var ProjectLogo = styledComponents.styled.div(_templateObject5$e || (_templateObject5$e = _taggedTemplateLiteral(["\n  position: absolute;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 80px;\n  height: 80px;\n  border-radius: 50%;\n  top: 138px;\n  left: 20px;\n  background: #16161d;\n  background-image: ", ";\n  background-position: center; /* Center the image */\n  background-repeat: no-repeat; /* Do not repeat the image */\n  background-size: cover;\n  border: 3px solid #373749;\n  overflow: hidden;\n"])), function (_ref6) {
   var background = _ref6.background;
   return background;
 });
-var RoundWrapper = styled.div(_templateObject6$a || (_templateObject6$a = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 154px;\n  right: 16px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 10px 12px 10px 16px;\n  background: #272730;\n  box-sizing: border-box;\n  border-radius: 10px;\n  width: max-content;\n  height: 40px;\n"])));
-var RoundNumber = styled.div(_templateObject7$6 || (_templateObject7$6 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: flex-end;\n  justify-content: space-around;\n  color: ", ";\n"])), function (_ref7) {
+var RoundWrapper = styledComponents.styled.div(_templateObject6$a || (_templateObject6$a = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 154px;\n  right: 16px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 10px 12px 10px 16px;\n  background: #272730;\n  box-sizing: border-box;\n  border-radius: 10px;\n  width: max-content;\n  height: 40px;\n"])));
+var RoundNumber = styledComponents.styled.div(_templateObject7$6 || (_templateObject7$6 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: flex-end;\n  justify-content: space-around;\n  color: ", ";\n"])), function (_ref7) {
   var theme = _ref7.theme;
   return theme.colors.white55;
 });
-var ProjectDetailsWrapper = styled.div(_templateObject8$3 || (_templateObject8$3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  width: 100%;\n  height: 100%;\n  padding: 20px;\n  padding-top: 58px;\n"])));
-var IDOButton = styled(Button$1)(_templateObject9$2 || (_templateObject9$2 = _taggedTemplateLiteral(["\n  width: max-content;\n  color: ", ";\n  padding: 8px 40px;\n"])), function (_ref8) {
+var ProjectDetailsWrapper = styledComponents.styled.div(_templateObject8$3 || (_templateObject8$3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  width: 100%;\n  height: 100%;\n  padding: 20px;\n  padding-top: 58px;\n"])));
+var IDOButton = styledComponents.styled(Button$1)(_templateObject9$2 || (_templateObject9$2 = _taggedTemplateLiteral(["\n  width: max-content;\n  color: ", ";\n  padding: 8px 40px;\n"])), function (_ref8) {
   var theme = _ref8.theme;
   return theme.colors.white;
 });
-var SwitcherRow = styled.div(_templateObject0$2 || (_templateObject0$2 = _taggedTemplateLiteral(["\n  display: flex;\n  width: 100%;\n  flex-direction: row;\n  justify-content: flex-end;\n  margin-bottom: 16px;\n  z-index: 99999;\n"])));
-var DetailsColumn = styled.div(_templateObject1$2 || (_templateObject1$2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  padding: 16px 0px;\n  width: 100%;\n  height: 108px !important;\n  border-top: 1px solid #272730;\n  border-bottom: 1px solid #272730;\n  margin: 16px 0px;\n"])));
-var CommingSoonWrapper = styled.div(_templateObject10$2 || (_templateObject10$2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  padding: 38px 0px;\n  height: max-content;\n  width: 100%;\n  margin-bottom: 30px;\n"])));
-var CommingSoonTitle = styled(Text)(_templateObject11$2 || (_templateObject11$2 = _taggedTemplateLiteral(["\n  font-weight: bold;\n  font-size: 26px;\n  line-height: 130%;\n  color: #7763f6;\n  text-align: center;\n  margin-top: 24px;\n"])));
-var MockedProgressComponent = styled.div(_templateObject12$1 || (_templateObject12$1 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 75px;\n"])));
+var SwitcherRow = styledComponents.styled.div(_templateObject0$2 || (_templateObject0$2 = _taggedTemplateLiteral(["\n  display: flex;\n  width: 100%;\n  flex-direction: row;\n  justify-content: flex-end;\n  margin-bottom: 16px;\n  z-index: 99999;\n"])));
+var DetailsColumn = styledComponents.styled.div(_templateObject1$2 || (_templateObject1$2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  padding: 16px 0px;\n  width: 100%;\n  height: 108px !important;\n  border-top: 1px solid #272730;\n  border-bottom: 1px solid #272730;\n  margin: 16px 0px;\n"])));
+var CommingSoonWrapper = styledComponents.styled.div(_templateObject10$2 || (_templateObject10$2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  padding: 38px 0px;\n  height: max-content;\n  width: 100%;\n  margin-bottom: 30px;\n"])));
+var CommingSoonTitle = styledComponents.styled(Text)(_templateObject11$2 || (_templateObject11$2 = _taggedTemplateLiteral(["\n  font-weight: bold;\n  font-size: 26px;\n  line-height: 130%;\n  color: #7763f6;\n  text-align: center;\n  margin-top: 24px;\n"])));
+var MockedProgressComponent = styledComponents.styled.div(_templateObject12$1 || (_templateObject12$1 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 75px;\n"])));
 var SpacePadProject = function SpacePadProject(props) {
   var spacePadData = props.spacePadData,
     spaceRound = props.spaceRound,
@@ -15170,7 +15170,7 @@ var SpacePadProject = function SpacePadProject(props) {
 };
 
 var _templateObject$x, _templateObject2$p, _templateObject3$j, _templateObject4$f, _templateObject5$d, _templateObject6$9, _templateObject7$5, _templateObject8$2, _templateObject9$1, _templateObject0$1, _templateObject1$1, _templateObject10$1, _templateObject11$1, _templateObject12, _templateObject13;
-var AccountInfoWrapper = styled.div(_templateObject$x || (_templateObject$x = _taggedTemplateLiteral(["\n  position: relative;\n  background: ", ";\n  border: 1px solid ", ";\n  border-radius: 10px;\n  padding: 42px 30px;\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  ", " {\n    flex-direction: column;\n    padding: 30px 20px;\n  }\n"])), function (_ref) {
+var AccountInfoWrapper = styledComponents.styled.div(_templateObject$x || (_templateObject$x = _taggedTemplateLiteral(["\n  position: relative;\n  background: ", ";\n  border: 1px solid ", ";\n  border-radius: 10px;\n  padding: 42px 30px;\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  ", " {\n    flex-direction: column;\n    padding: 30px 20px;\n  }\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.colors.card;
 }, function (_ref2) {
@@ -15180,14 +15180,14 @@ var AccountInfoWrapper = styled.div(_templateObject$x || (_templateObject$x = _t
   var theme = _ref3.theme;
   return theme.mediaQueries.tablet;
 });
-var StyledAccountInfo = styled.div(_templateObject2$p || (_templateObject2$p = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  align-items: space-between;\n  justify-content: flex-start;\n  margin-left: 28px;\n  ", " {\n    margin-bottom: ", ";\n    margin-left: 0px;\n  }\n"])), function (_ref4) {
+var StyledAccountInfo = styledComponents.styled.div(_templateObject2$p || (_templateObject2$p = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  align-items: space-between;\n  justify-content: flex-start;\n  margin-left: 28px;\n  ", " {\n    margin-bottom: ", ";\n    margin-left: 0px;\n  }\n"])), function (_ref4) {
   var theme = _ref4.theme;
   return theme.mediaQueries.mobile;
 }, function (_ref5) {
   var connectionInProgress = _ref5.connectionInProgress;
   return connectionInProgress ? "0px" : "24px";
 });
-var UserComponent = styled.p(_templateObject3$j || (_templateObject3$j = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  ", " {\n    width: 100%;\n    margin-bottom: ", ";\n  }\n  ", " {\n    width: 100%;\n    justify-content: ", ";\n  }\n"])), function (_ref6) {
+var UserComponent = styledComponents.styled.p(_templateObject3$j || (_templateObject3$j = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  ", " {\n    width: 100%;\n    margin-bottom: ", ";\n  }\n  ", " {\n    width: 100%;\n    justify-content: ", ";\n  }\n"])), function (_ref6) {
   var theme = _ref6.theme;
   return theme.mediaQueries.tablet;
 }, function (_ref7) {
@@ -15210,7 +15210,7 @@ var UserComponent = styled.p(_templateObject3$j || (_templateObject3$j = _tagged
 //   border-radius: 23px;
 //   background: #2b2b38;
 // `;
-var AccountComponent = styled.div(_templateObject4$f || (_templateObject4$f = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-end;\n  justify-content: space-between;\n  border: 1px solid ", ";\n  border-radius: 10px;\n  background: ", ";\n  padding: 16px 24px;\n  margin-left: 31px;\n  ", " {\n    width: 100%;\n    align-items: center;\n    margin-left: 0px;\n  }\n"])), function (_ref0) {
+var AccountComponent = styledComponents.styled.div(_templateObject4$f || (_templateObject4$f = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-end;\n  justify-content: space-between;\n  border: 1px solid ", ";\n  border-radius: 10px;\n  background: ", ";\n  padding: 16px 24px;\n  margin-left: 31px;\n  ", " {\n    width: 100%;\n    align-items: center;\n    margin-left: 0px;\n  }\n"])), function (_ref0) {
   var theme = _ref0.theme;
   return theme.colors.white3;
 }, function (_ref1) {
@@ -15220,23 +15220,23 @@ var AccountComponent = styled.div(_templateObject4$f || (_templateObject4$f = _t
   var theme = _ref10.theme;
   return theme.mediaQueries.tablet;
 });
-var BalanceText = styled(Text)(_templateObject5$d || (_templateObject5$d = _taggedTemplateLiteral(["\n  margin-left: 50px;\n  ", " {\n    margin-left: 0px;\n  }\n"])), function (_ref11) {
+var BalanceText = styledComponents.styled(Text)(_templateObject5$d || (_templateObject5$d = _taggedTemplateLiteral(["\n  margin-left: 50px;\n  ", " {\n    margin-left: 0px;\n  }\n"])), function (_ref11) {
   var theme = _ref11.theme;
   return theme.mediaQueries.tablet;
 });
-var AccountTitle = styled(Text)(_templateObject6$9 || (_templateObject6$9 = _taggedTemplateLiteral(["\n  ", " {\n    display: none;\n  }\n"])), function (_ref12) {
+var AccountTitle = styledComponents.styled(Text)(_templateObject6$9 || (_templateObject6$9 = _taggedTemplateLiteral(["\n  ", " {\n    display: none;\n  }\n"])), function (_ref12) {
   var theme = _ref12.theme;
   return theme.mediaQueries.mobile;
 });
-var StyledUserAvatar = styled(Icon$20)(_templateObject7$5 || (_templateObject7$5 = _taggedTemplateLiteral(["\n  width: 44px;\n  height: 44px;\n  z-index: 99999;\n  ", " {\n    display: none;\n  }\n"])), function (_ref13) {
+var StyledUserAvatar = styledComponents.styled(Icon$20)(_templateObject7$5 || (_templateObject7$5 = _taggedTemplateLiteral(["\n  width: 44px;\n  height: 44px;\n  z-index: 99999;\n  ", " {\n    display: none;\n  }\n"])), function (_ref13) {
   var theme = _ref13.theme;
   return theme.mediaQueries.mobile;
 });
-var StyledMobileUserAvatar = styled(Icon$1$)(_templateObject8$2 || (_templateObject8$2 = _taggedTemplateLiteral(["\n  width: 44px;\n  height: 44px;\n  display: none;\n  ", " {\n    display: block;\n  }\n"])), function (_ref14) {
+var StyledMobileUserAvatar = styledComponents.styled(Icon$1$)(_templateObject8$2 || (_templateObject8$2 = _taggedTemplateLiteral(["\n  width: 44px;\n  height: 44px;\n  display: none;\n  ", " {\n    display: block;\n  }\n"])), function (_ref14) {
   var theme = _ref14.theme;
   return theme.mediaQueries.mobile;
 });
-var UserUpdateComponent = styled.div(_templateObject9$1 || (_templateObject9$1 = _taggedTemplateLiteral(["\n  right: 0px;\n  top: -54px;\n  position: absolute;\n  display: ", ";\n  flex-direction: row;\n  align-items: center;\n  ", " {\n    display: ", ";\n    position: relative;\n    top: 0px;\n    flex-direction: column;\n    justify-content: space-between;\n    align-items: flex-end;\n  }\n"])), function (_ref15) {
+var UserUpdateComponent = styledComponents.styled.div(_templateObject9$1 || (_templateObject9$1 = _taggedTemplateLiteral(["\n  right: 0px;\n  top: -54px;\n  position: absolute;\n  display: ", ";\n  flex-direction: row;\n  align-items: center;\n  ", " {\n    display: ", ";\n    position: relative;\n    top: 0px;\n    flex-direction: column;\n    justify-content: space-between;\n    align-items: flex-end;\n  }\n"])), function (_ref15) {
   var mobile = _ref15.mobile;
   return mobile ? "none" : "flex";
 }, function (_ref16) {
@@ -15246,7 +15246,7 @@ var UserUpdateComponent = styled.div(_templateObject9$1 || (_templateObject9$1 =
   var mobile = _ref17.mobile;
   return mobile ? "flex" : "none";
 });
-var MobileUserAndUpdate = styled.div(_templateObject0$1 || (_templateObject0$1 = _taggedTemplateLiteral(["\n  display: none;\n  ", " {\n    display: flex;\n    width: 100%;\n    flex-direction: row;\n    align-items: center;\n    justify-content: ", ";\n    margin-bottom: ", ";\n  }\n"])), function (_ref18) {
+var MobileUserAndUpdate = styledComponents.styled.div(_templateObject0$1 || (_templateObject0$1 = _taggedTemplateLiteral(["\n  display: none;\n  ", " {\n    display: flex;\n    width: 100%;\n    flex-direction: row;\n    align-items: center;\n    justify-content: ", ";\n    margin-bottom: ", ";\n  }\n"])), function (_ref18) {
   var theme = _ref18.theme;
   return theme.mediaQueries.mobile;
 }, function (_ref19) {
@@ -15256,26 +15256,26 @@ var MobileUserAndUpdate = styled.div(_templateObject0$1 || (_templateObject0$1 =
   var connectionInProgress = _ref20.connectionInProgress;
   return connectionInProgress ? "10px" : "39px";
 });
-var RefreshButton = styled.div(_templateObject1$1 || (_templateObject1$1 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  padding: 4px 16px;\n  justify-content: space-between;\n  align-items: center;\n  color: ", ";\n  font-weight: bold;\n  font-size: 14px;\n  line-height: 140%;\n  background: #2b2b38;\n  border-radius: 7px;\n  cursor: pointer;\n"])), function (_ref21) {
+var RefreshButton = styledComponents.styled.div(_templateObject1$1 || (_templateObject1$1 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  padding: 4px 16px;\n  justify-content: space-between;\n  align-items: center;\n  color: ", ";\n  font-weight: bold;\n  font-size: 14px;\n  line-height: 140%;\n  background: #2b2b38;\n  border-radius: 7px;\n  cursor: pointer;\n"])), function (_ref21) {
   var theme = _ref21.theme;
   return theme.colors.white;
 });
-var StyledSyncIcon = styled.div(_templateObject10$1 || (_templateObject10$1 = _taggedTemplateLiteral(["\n  margin-right: 10px;\n  height: 20px;\n  @keyframes spin {\n    100% {\n      transform: rotate(1turn);\n    }\n  };\n  ", "\n}\n"])), function (_ref22) {
+var StyledSyncIcon = styledComponents.styled.div(_templateObject10$1 || (_templateObject10$1 = _taggedTemplateLiteral(["\n  margin-right: 10px;\n  height: 20px;\n  @keyframes spin {\n    100% {\n      transform: rotate(1turn);\n    }\n  };\n  ", "\n}\n"])), function (_ref22) {
   var syncing = _ref22.syncing;
   return syncing && "animation: spin 2s linear infinite;";
 });
-var UpdatedText = styled(Text)(_templateObject11$1 || (_templateObject11$1 = _taggedTemplateLiteral(["\n  font-size: 12px;\n  line-height: 170%;\n  margin-bottom: 0px;\n  margin-right: 14px;\n  color: ", ";\n  ", " {\n    margin-bottom: 10px;\n    margin-right: 0px;\n  }\n"])), function (_ref23) {
+var UpdatedText = styledComponents.styled(Text)(_templateObject11$1 || (_templateObject11$1 = _taggedTemplateLiteral(["\n  font-size: 12px;\n  line-height: 170%;\n  margin-bottom: 0px;\n  margin-right: 14px;\n  color: ", ";\n  ", " {\n    margin-bottom: 10px;\n    margin-right: 0px;\n  }\n"])), function (_ref23) {
   var theme = _ref23.theme;
   return theme.colors.white55;
 }, function (_ref24) {
   var theme = _ref24.theme;
   return theme.mediaQueries.mobile;
 });
-var ValuesDetails = styled.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  ", " {\n    flex-direction: column-reverse;\n    width: 100%;\n  }\n"])), function (_ref25) {
+var ValuesDetails = styledComponents.styled.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  ", " {\n    flex-direction: column-reverse;\n    width: 100%;\n  }\n"])), function (_ref25) {
   var theme = _ref25.theme;
   return theme.mediaQueries.tablet;
 });
-var LoadingDots = styled.p(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  width: 50px;\n  color: white;\n  font-size: 26px;\n  text-align: ", ";\n  &::after {\n    content: \" .\";\n    animation: dots 1.5s steps(5, end) infinite;\n  }\n\n  @keyframes dots {\n    0%,\n    20% {\n      color: rgba(0, 0, 0, 0);\n      text-shadow: 0.25em 0 0 rgba(0, 0, 0, 0), 0.5em 0 0 rgba(0, 0, 0, 0);\n    }\n    40% {\n      color: white;\n      text-shadow: 0.25em 0 0 rgba(0, 0, 0, 0), 0.5em 0 0 rgba(0, 0, 0, 0);\n    }\n    60% {\n      text-shadow: 0.25em 0 0 white, 0.5em 0 0 rgba(0, 0, 0, 0);\n    }\n    80%,\n    100% {\n      text-shadow: 0.25em 0 0 white, 0.5em 0 0 white;\n    }\n  }\n"])), function (_ref26) {
+var LoadingDots = styledComponents.styled.p(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  width: 50px;\n  color: white;\n  font-size: 26px;\n  text-align: ", ";\n  &::after {\n    content: \" .\";\n    animation: dots 1.5s steps(5, end) infinite;\n  }\n\n  @keyframes dots {\n    0%,\n    20% {\n      color: rgba(0, 0, 0, 0);\n      text-shadow: 0.25em 0 0 rgba(0, 0, 0, 0), 0.5em 0 0 rgba(0, 0, 0, 0);\n    }\n    40% {\n      color: white;\n      text-shadow: 0.25em 0 0 rgba(0, 0, 0, 0), 0.5em 0 0 rgba(0, 0, 0, 0);\n    }\n    60% {\n      text-shadow: 0.25em 0 0 white, 0.5em 0 0 rgba(0, 0, 0, 0);\n    }\n    80%,\n    100% {\n      text-shadow: 0.25em 0 0 white, 0.5em 0 0 white;\n    }\n  }\n"])), function (_ref26) {
   var centered = _ref26.centered;
   return centered ? "center" : "left";
 });
@@ -15510,22 +15510,22 @@ var Icon$C = function Icon() {
 };
 
 var _templateObject$w, _templateObject2$o, _templateObject3$i, _templateObject4$e, _templateObject5$c, _templateObject6$8, _templateObject7$4, _templateObject8$1, _templateObject9, _templateObject0, _templateObject1, _templateObject10, _templateObject11;
-var Wrapper$2 = styled.div(_templateObject$w || (_templateObject$w = _taggedTemplateLiteral(["\n    height: ", ";\n    width: 350px;\n    padding: 24px;\n    background: #191921;\n    border-radius: 10px;\n    @media screen and (max-width: 1180px) {\n      height: auto;\n    }\n"])), function (_ref) {
+var Wrapper$2 = styledComponents.styled.div(_templateObject$w || (_templateObject$w = _taggedTemplateLiteral(["\n    height: ", ";\n    width: 350px;\n    padding: 24px;\n    background: #191921;\n    border-radius: 10px;\n    @media screen and (max-width: 1180px) {\n      height: auto;\n    }\n"])), function (_ref) {
   var height = _ref.height;
   return height ? "".concat(height, "px") : "auto";
 });
-var Header = styled.div(_templateObject2$o || (_templateObject2$o = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n"])));
-var PoolWeightWrapper = styled.div(_templateObject3$i || (_templateObject3$i = _taggedTemplateLiteral(["\n  width: auto;\n  display: flex;\n  flex-direction: column;\n"])));
-var PoolWeightText = styled(Text)(_templateObject4$e || (_templateObject4$e = _taggedTemplateLiteral(["\n  color: rgba(255, 255, 255, 0.55);\n"])));
-var CssPowerText = styled(Text)(_templateObject5$c || (_templateObject5$c = _taggedTemplateLiteral(["\n  color: rgba(255, 255, 255, 0.55);\n"])));
-var RequirementDescripton = styled(Text)(_templateObject6$8 || (_templateObject6$8 = _taggedTemplateLiteral(["\ncolor: rgba(255, 255, 255, 0.55);\n"])));
-var BulletPointText = styled(Text)(_templateObject7$4 || (_templateObject7$4 = _taggedTemplateLiteral(["\ncolor: rgba(255, 255, 255, 0.55);\nmargin-left: 20px;\n"])));
-var CssPowerWrapper = styled.div(_templateObject8$1 || (_templateObject8$1 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: flex-start;\n  margin-top: 16px;\n  margin-bottom: 30px;\n"])));
-var CssPowerValueWrapper = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  margin-left: 12px;\n"])));
-var RequirementsDescriptionWrapper = styled.div(_templateObject0 || (_templateObject0 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  margin-top: 32px;\n  margin-bottom: 16px;\n  gap: 16px;\n"])));
-var BulletPointLine = styled(Text)(_templateObject1 || (_templateObject1 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  margin-bottom: 8px;\n"])));
-var BulletPointIconWrapper = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  display: flex;\n"])));
-var AdditionalInfo = styled(Text)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  color: rgba(255, 255, 255, 0.55);\n  margin-top: 32px;\n"])));
+var Header = styledComponents.styled.div(_templateObject2$o || (_templateObject2$o = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n"])));
+var PoolWeightWrapper = styledComponents.styled.div(_templateObject3$i || (_templateObject3$i = _taggedTemplateLiteral(["\n  width: auto;\n  display: flex;\n  flex-direction: column;\n"])));
+var PoolWeightText = styledComponents.styled(Text)(_templateObject4$e || (_templateObject4$e = _taggedTemplateLiteral(["\n  color: rgba(255, 255, 255, 0.55);\n"])));
+var CssPowerText = styledComponents.styled(Text)(_templateObject5$c || (_templateObject5$c = _taggedTemplateLiteral(["\n  color: rgba(255, 255, 255, 0.55);\n"])));
+var RequirementDescripton = styledComponents.styled(Text)(_templateObject6$8 || (_templateObject6$8 = _taggedTemplateLiteral(["\ncolor: rgba(255, 255, 255, 0.55);\n"])));
+var BulletPointText = styledComponents.styled(Text)(_templateObject7$4 || (_templateObject7$4 = _taggedTemplateLiteral(["\ncolor: rgba(255, 255, 255, 0.55);\nmargin-left: 20px;\n"])));
+var CssPowerWrapper = styledComponents.styled.div(_templateObject8$1 || (_templateObject8$1 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: flex-start;\n  margin-top: 16px;\n  margin-bottom: 30px;\n"])));
+var CssPowerValueWrapper = styledComponents.styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  margin-left: 12px;\n"])));
+var RequirementsDescriptionWrapper = styledComponents.styled.div(_templateObject0 || (_templateObject0 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  margin-top: 32px;\n  margin-bottom: 16px;\n  gap: 16px;\n"])));
+var BulletPointLine = styledComponents.styled(Text)(_templateObject1 || (_templateObject1 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  margin-bottom: 8px;\n"])));
+var BulletPointIconWrapper = styledComponents.styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  display: flex;\n"])));
+var AdditionalInfo = styledComponents.styled(Text)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  color: rgba(255, 255, 255, 0.55);\n  margin-top: 32px;\n"])));
 var TierCard = function TierCard(_ref2) {
   var tierNumber = _ref2.tierNumber,
     poolWeightPercentage = _ref2.poolWeightPercentage,
@@ -15595,15 +15595,15 @@ var TierCard = function TierCard(_ref2) {
 };
 
 var _templateObject$v, _templateObject2$n, _templateObject3$h, _templateObject4$d, _templateObject5$b, _templateObject6$7;
-var Wrapper$1 = styled.div(_templateObject$v || (_templateObject$v = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: 300px;\n"])));
-var Upper = styled.div(_templateObject2$n || (_templateObject2$n = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n"])));
-var IconWrapper = styled.div(_templateObject3$h || (_templateObject3$h = _taggedTemplateLiteral(["\n  margin: 0 auto;\n  max-width: 220px;\n  max-height: 160px;\n"])));
-var StepNumber = styled.p(_templateObject4$d || (_templateObject4$d = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 40px;\n  height: 40px;\n  border: 1px solid rgba(255, 255, 255, 0.03);\n  color: #ffffff;\n  opacity: 0.55;\n  border-radius: 10px;\n  background: #1d1d26;\n"])));
-var StepDescription = styled(Text)(_templateObject5$b || (_templateObject5$b = _taggedTemplateLiteral(["\n  text-align: center;\n  color: rgba(255, 255, 255, 0.55);\n  max-width: 229px;\n  ", " {\n    font-size: 14px;\n  }\n"])), function (_ref) {
+var Wrapper$1 = styledComponents.styled.div(_templateObject$v || (_templateObject$v = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: 300px;\n"])));
+var Upper = styledComponents.styled.div(_templateObject2$n || (_templateObject2$n = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n"])));
+var IconWrapper = styledComponents.styled.div(_templateObject3$h || (_templateObject3$h = _taggedTemplateLiteral(["\n  margin: 0 auto;\n  max-width: 220px;\n  max-height: 160px;\n"])));
+var StepNumber = styledComponents.styled.p(_templateObject4$d || (_templateObject4$d = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 40px;\n  height: 40px;\n  border: 1px solid rgba(255, 255, 255, 0.03);\n  color: #ffffff;\n  opacity: 0.55;\n  border-radius: 10px;\n  background: #1d1d26;\n"])));
+var StepDescription = styledComponents.styled(Text)(_templateObject5$b || (_templateObject5$b = _taggedTemplateLiteral(["\n  text-align: center;\n  color: rgba(255, 255, 255, 0.55);\n  max-width: 229px;\n  ", " {\n    font-size: 14px;\n  }\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.mediaQueries.mobile;
 });
-var StepLowerDescription = styled(StepDescription)(_templateObject6$7 || (_templateObject6$7 = _taggedTemplateLiteral(["\n  margin-top: 20px;\n"])));
+var StepLowerDescription = styledComponents.styled(StepDescription)(_templateObject6$7 || (_templateObject6$7 = _taggedTemplateLiteral(["\n  margin-top: 20px;\n"])));
 var getIconByStepNumber = function getIconByStepNumber(stepNumer) {
   switch (stepNumer) {
     case 1:
@@ -15657,20 +15657,20 @@ var IdoParticipationStep = function IdoParticipationStep(_ref2) {
 };
 
 var _templateObject$u, _templateObject2$m, _templateObject3$g, _templateObject4$c, _templateObject5$a, _templateObject6$6, _templateObject7$3;
-var UserTiersWrapper = styled.div(_templateObject$u || (_templateObject$u = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  height: max-content;\n  background: ", ";\n  border-radius: 16px;\n  padding: 32px;\n"])), function (_ref) {
+var UserTiersWrapper = styledComponents.styled.div(_templateObject$u || (_templateObject$u = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  height: max-content;\n  background: ", ";\n  border-radius: 16px;\n  padding: 32px;\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.colors.card;
 });
-var TiersTitle = styled(Text)(_templateObject2$m || (_templateObject2$m = _taggedTemplateLiteral(["\n  font-weight: bold;\n  font-size: 32px;\n  line-height: 130%;\n  color: ", ";\n  margin-bottom: 20px;\n"])), function (_ref2) {
+var TiersTitle = styledComponents.styled(Text)(_templateObject2$m || (_templateObject2$m = _taggedTemplateLiteral(["\n  font-weight: bold;\n  font-size: 32px;\n  line-height: 130%;\n  color: ", ";\n  margin-bottom: 20px;\n"])), function (_ref2) {
   var theme = _ref2.theme;
   return theme.colors.white;
 });
-var Column = styled.div(_templateObject3$g || (_templateObject3$g = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n"])));
-var TierRow = styled(Box)(_templateObject4$c || (_templateObject4$c = _taggedTemplateLiteral(["\n  width: 100%;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 10px 0px;\n  border-bottom: ", ";\n"])), function (_ref3) {
+var Column = styledComponents.styled.div(_templateObject3$g || (_templateObject3$g = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n"])));
+var TierRow = styledComponents.styled(Box)(_templateObject4$c || (_templateObject4$c = _taggedTemplateLiteral(["\n  width: 100%;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 10px 0px;\n  border-bottom: ", ";\n"])), function (_ref3) {
   var bordered = _ref3.bordered;
   return bordered && "1px solid #272730";
 });
-var TierNumberText = styled(Text)(_templateObject5$a || (_templateObject5$a = _taggedTemplateLiteral(["\n  font-size: 14px;\n  line-height: 160%;\n  color: ", ";\n  font-weight: ", ";\n  position: relative;\n"])), function (_ref4) {
+var TierNumberText = styledComponents.styled(Text)(_templateObject5$a || (_templateObject5$a = _taggedTemplateLiteral(["\n  font-size: 14px;\n  line-height: 160%;\n  color: ", ";\n  font-weight: ", ";\n  position: relative;\n"])), function (_ref4) {
   var theme = _ref4.theme,
     active = _ref4.active;
   return active ? theme.colors.white : "#818c92";
@@ -15678,8 +15678,8 @@ var TierNumberText = styled(Text)(_templateObject5$a || (_templateObject5$a = _t
   var active = _ref5.active;
   return active ? "bold" : "normal";
 });
-var TierInfoTag = styled(StyledTag)(_templateObject6$6 || (_templateObject6$6 = _taggedTemplateLiteral(["\n  font-size: 11px;\n  height: max-content;\n  margin-right: 5px;\n"])));
-var TagsRow = styled.div(_templateObject7$3 || (_templateObject7$3 = _taggedTemplateLiteral(["\n  position: absolute;\n  left: 45px;\n  display: flex;\n"])));
+var TierInfoTag = styledComponents.styled(StyledTag)(_templateObject6$6 || (_templateObject6$6 = _taggedTemplateLiteral(["\n  font-size: 11px;\n  height: max-content;\n  margin-right: 5px;\n"])));
+var TagsRow = styledComponents.styled.div(_templateObject7$3 || (_templateObject7$3 = _taggedTemplateLiteral(["\n  position: absolute;\n  left: 45px;\n  display: flex;\n"])));
 var UserTiers = function UserTiers(props) {
   var tiers = props.tiers,
     _props$currentUserTie = props.currentUserTier,
@@ -15748,7 +15748,7 @@ var UserTiers = function UserTiers(props) {
 };
 
 var _templateObject$t;
-var StyledMultiValue = styled.div(_templateObject$t || (_templateObject$t = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: flex-end;\n"])));
+var StyledMultiValue = styledComponents.styled.div(_templateObject$t || (_templateObject$t = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: flex-end;\n"])));
 var SpacePadKeyMetrics = function SpacePadKeyMetrics(_ref) {
   var spaceRound = _ref.spaceRound,
     useEndTime = _ref.useEndTime,
@@ -15783,8 +15783,8 @@ var SpacePadKeyMetrics = function SpacePadKeyMetrics(_ref) {
 };
 
 var _templateObject$s, _templateObject2$l, _templateObject3$f, _templateObject4$b, _templateObject5$9;
-var LaunchWrapper = styled.div(_templateObject$s || (_templateObject$s = _taggedTemplateLiteral(["\n  width: 100%;\n  background: #1d1d26;\n  padding: 44px;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  align-items: center;\n  margin-top: 70px;\n"])));
-var ForProjects = styled(Text)(_templateObject2$l || (_templateObject2$l = _taggedTemplateLiteral(["\n  margin: 0 auto;\n  width: 135px;\n  text-align: center;\n  border: 1px solid ", ";\n  color: ", ";\n  line-height: 28px;\n  border-radius: 10px;\n"])), function (_ref) {
+var LaunchWrapper = styledComponents.styled.div(_templateObject$s || (_templateObject$s = _taggedTemplateLiteral(["\n  width: 100%;\n  background: #1d1d26;\n  padding: 44px;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  align-items: center;\n  margin-top: 70px;\n"])));
+var ForProjects = styledComponents.styled(Text)(_templateObject2$l || (_templateObject2$l = _taggedTemplateLiteral(["\n  margin: 0 auto;\n  width: 135px;\n  text-align: center;\n  border: 1px solid ", ";\n  color: ", ";\n  line-height: 28px;\n  border-radius: 10px;\n"])), function (_ref) {
   var theme = _ref.theme,
     mainColor = _ref.mainColor;
   return mainColor || theme.colors.darkPurple;
@@ -15793,9 +15793,9 @@ var ForProjects = styled(Text)(_templateObject2$l || (_templateObject2$l = _tagg
     mainColor = _ref2.mainColor;
   return mainColor || theme.colors.darkPurple;
 });
-var LaunchHeader = styled(Text)(_templateObject3$f || (_templateObject3$f = _taggedTemplateLiteral(["\n  margin: 20px 0;\n  text-align: center;\n  @media screen and (max-width: 760px) {\n    width: 310px;\n    font-size: 26px;\n  }\n"])));
-var LaunchDescription = styled(Text)(_templateObject4$b || (_templateObject4$b = _taggedTemplateLiteral(["\n  width: 630px;\n  color: rgba(255, 255, 255, 0.55);\n  text-align: center;\n  @media screen and (max-width: 760px) {\n    width: 310px;\n  }\n"])));
-var ApplyForIdoButton = styled(Button$1)(_templateObject5$9 || (_templateObject5$9 = _taggedTemplateLiteral(["\n  width: 161px;\n  height: 44px;\n  border-radius: 10px;\n  background: #12ffb8;\n  margin-top: 45px;\n"])));
+var LaunchHeader = styledComponents.styled(Text)(_templateObject3$f || (_templateObject3$f = _taggedTemplateLiteral(["\n  margin: 20px 0;\n  text-align: center;\n  @media screen and (max-width: 760px) {\n    width: 310px;\n    font-size: 26px;\n  }\n"])));
+var LaunchDescription = styledComponents.styled(Text)(_templateObject4$b || (_templateObject4$b = _taggedTemplateLiteral(["\n  width: 630px;\n  color: rgba(255, 255, 255, 0.55);\n  text-align: center;\n  @media screen and (max-width: 760px) {\n    width: 310px;\n  }\n"])));
+var ApplyForIdoButton = styledComponents.styled(Button$1)(_templateObject5$9 || (_templateObject5$9 = _taggedTemplateLiteral(["\n  width: 161px;\n  height: 44px;\n  border-radius: 10px;\n  background: #12ffb8;\n  margin-top: 45px;\n"])));
 var SpacePadLaunch = function SpacePadLaunch(_ref3) {
   var title = _ref3.title,
     description = _ref3.description,
@@ -15825,14 +15825,14 @@ var SpacePadLaunch = function SpacePadLaunch(_ref3) {
 };
 
 var _templateObject$r;
-var ReferralTitle = styled(Text)(_templateObject$r || (_templateObject$r = _taggedTemplateLiteral(["\n  font-weight: bold;\n  font-size: 32px;\n  line-height: 130%;\n  color: ", ";\n"])), function (_ref) {
+var ReferralTitle = styledComponents.styled(Text)(_templateObject$r || (_templateObject$r = _taggedTemplateLiteral(["\n  font-weight: bold;\n  font-size: 32px;\n  line-height: 130%;\n  color: ", ";\n"])), function (_ref) {
   var fontColor = _ref.fontColor;
   return fontColor || "#ffffff";
 });
 
 var _templateObject$q, _templateObject2$k;
-var ReferralBannerWrapper = styled.div(_templateObject$q || (_templateObject$q = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n"])));
-var InvitationDescription = styled(Text)(_templateObject2$k || (_templateObject2$k = _taggedTemplateLiteral(["\n  font-weight: normal;\n  font-size: 16px;\n  line-height: 24px;\n  color: #818c92;\n  margin-bottom: 24px;\n"])));
+var ReferralBannerWrapper = styledComponents.styled.div(_templateObject$q || (_templateObject$q = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n"])));
+var InvitationDescription = styledComponents.styled(Text)(_templateObject2$k || (_templateObject2$k = _taggedTemplateLiteral(["\n  font-weight: normal;\n  font-size: 16px;\n  line-height: 24px;\n  color: #818c92;\n  margin-bottom: 24px;\n"])));
 var ReferralBanner = function ReferralBanner(props) {
   var refFee = props.refFee,
     onReadMore = props.onReadMore,
@@ -15898,18 +15898,18 @@ var copyValueToClipboard = function copyValueToClipboard(value, copyCallback) {
 };
 
 var _templateObject$p, _templateObject2$j, _templateObject3$e, _templateObject4$a, _templateObject5$8, _templateObject6$5;
-var TableCard = styled(Card)(_templateObject$p || (_templateObject$p = _taggedTemplateLiteral(["\n  border: none;\n  padding: 15px;\n  width: 100%;\n  margin-bottom: 24px;\n  ", " {\n    padding: 25px 30px;\n  }\n"])), function (_ref) {
+var TableCard = styledComponents.styled(Card)(_templateObject$p || (_templateObject$p = _taggedTemplateLiteral(["\n  border: none;\n  padding: 15px;\n  width: 100%;\n  margin-bottom: 24px;\n  ", " {\n    padding: 25px 30px;\n  }\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.mediaQueries.sm;
 });
-var CopyLinkCardWrapper = styled(TableCard)(_templateObject2$j || (_templateObject2$j = _taggedTemplateLiteral(["\n  background: #1d1d26;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n"])));
-var MyReferralCard = styled(TableCard)(_templateObject3$e || (_templateObject3$e = _taggedTemplateLiteral(["\n  background: #16161d;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  grid-column: span 6;\n  ", " {\n    grid-column: span 7;\n  }\n"])), function (_ref2) {
+var CopyLinkCardWrapper = styledComponents.styled(TableCard)(_templateObject2$j || (_templateObject2$j = _taggedTemplateLiteral(["\n  background: #1d1d26;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n"])));
+var MyReferralCard = styledComponents.styled(TableCard)(_templateObject3$e || (_templateObject3$e = _taggedTemplateLiteral(["\n  background: #16161d;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  grid-column: span 6;\n  ", " {\n    grid-column: span 7;\n  }\n"])), function (_ref2) {
   var theme = _ref2.theme;
   return theme.mediaQueries.sm;
 });
-var RefLink = styled(Text)(_templateObject4$a || (_templateObject4$a = _taggedTemplateLiteral(["\n  display: inline;\n  align-items: center;\n  text-overflow: ellipsis;\n  width: 80%;\n  overflow: hidden;\n  white-space: nowrap;\n  height: max-content;\n  font-weight: 600;\n  font-size: 16px;\n  line-height: 24px;\n"])));
-var SocialRow = styled.div(_templateObject5$8 || (_templateObject5$8 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n"])));
-var ShareText = styled(Text)(_templateObject6$5 || (_templateObject6$5 = _taggedTemplateLiteral(["\n  font-weight: 700;\n  font-size: 14px;\n  line-height: 170%;\n  color: #ffffff;\n  margin-right: 32px;\n"])));
+var RefLink = styledComponents.styled(Text)(_templateObject4$a || (_templateObject4$a = _taggedTemplateLiteral(["\n  display: inline;\n  align-items: center;\n  text-overflow: ellipsis;\n  width: 80%;\n  overflow: hidden;\n  white-space: nowrap;\n  height: max-content;\n  font-weight: 600;\n  font-size: 16px;\n  line-height: 24px;\n"])));
+var SocialRow = styledComponents.styled.div(_templateObject5$8 || (_templateObject5$8 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n"])));
+var ShareText = styledComponents.styled(Text)(_templateObject6$5 || (_templateObject6$5 = _taggedTemplateLiteral(["\n  font-weight: 700;\n  font-size: 14px;\n  line-height: 170%;\n  color: #ffffff;\n  margin-right: 32px;\n"])));
 var CopyLinkCard = function CopyLinkCard(_ref3) {
   var refLink = _ref3.refLink;
   var _useState = React.useState(false),
@@ -16656,11 +16656,11 @@ var IconModule = /*#__PURE__*/Object.freeze({
 });
 
 var _templateObject$o, _templateObject2$i;
-var StyledLink = styled(reactRouterDom.Link)(_templateObject$o || (_templateObject$o = _taggedTemplateLiteral(["\n  display: flex;\n  display: -webkit-flex;\n  align-items: center;\n  -webkit-align-items: center;\n  .mobile-icon {\n    width: 32px;\n    margin-left: 10px;\n  }\n  .desktop-icon {\n    width: 156px;\n    display: none;\n    ", " {\n      display: block;\n    }\n  }\n  margin-left: 0px;\n"])), function (_ref) {
+var StyledLink = styledComponents.styled(reactRouterDom.Link)(_templateObject$o || (_templateObject$o = _taggedTemplateLiteral(["\n  display: flex;\n  display: -webkit-flex;\n  align-items: center;\n  -webkit-align-items: center;\n  .mobile-icon {\n    width: 32px;\n    margin-left: 10px;\n  }\n  .desktop-icon {\n    width: 156px;\n    display: none;\n    ", " {\n      display: block;\n    }\n  }\n  margin-left: 0px;\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.mediaQueries.nav;
 });
-var CoinswapLogo = styled.div(_templateObject2$i || (_templateObject2$i = _taggedTemplateLiteral(["\n  opacity: ", ";\n  width: ", ";\n  transition: width 0.6s, opacity 0.3s;\n"])), function (_ref2) {
+var CoinswapLogo = styledComponents.styled.div(_templateObject2$i || (_templateObject2$i = _taggedTemplateLiteral(["\n  opacity: ", ";\n  width: ", ";\n  transition: width 0.6s, opacity 0.3s;\n"])), function (_ref2) {
   var isPushed = _ref2.isPushed;
   return isPushed ? 1 : 0;
 }, function (_ref3) {
@@ -16854,8 +16854,8 @@ var SIDEBAR_WIDTH_FULL = 240;
 var SIDEBAR_WIDTH_REDUCED = 70;
 
 var _templateObject$n, _templateObject2$h, _templateObject3$d;
-var rainbowAnimation = styled.keyframes(_templateObject$n || (_templateObject$n = _taggedTemplateLiteral(["\n  0%,\n  100% {\n    background-position: 0 0;\n  }\n  50% {\n    background-position: 100% 0;\n  }\n"])));
-var LinkLabel = styled.div(_templateObject2$h || (_templateObject2$h = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  color: ", ";\n  transition: all 0.7s;\n  flex-grow: 1;\n  font-weight: 700;\n  font-size: 14px;\n  width: 100%;\n  opacity: ", ";\n"])), function (_ref) {
+var rainbowAnimation = styledComponents.keyframes(_templateObject$n || (_templateObject$n = _taggedTemplateLiteral(["\n  0%,\n  100% {\n    background-position: 0 0;\n  }\n  50% {\n    background-position: 100% 0;\n  }\n"])));
+var LinkLabel = styledComponents.styled.div(_templateObject2$h || (_templateObject2$h = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  color: ", ";\n  transition: all 0.7s;\n  flex-grow: 1;\n  font-weight: 700;\n  font-size: 14px;\n  width: 100%;\n  opacity: ", ";\n"])), function (_ref) {
   var isPushed = _ref.isPushed,
     isActive = _ref.isActive;
   return !isPushed ? "transparent" : isActive ? "rgba(255, 255, 255, 1)" : "rgba(255, 255, 255, 0.5)";
@@ -16863,7 +16863,7 @@ var LinkLabel = styled.div(_templateObject2$h || (_templateObject2$h = _taggedTe
   var isPushed = _ref2.isPushed;
   return isPushed ? "1" : "0";
 });
-var MenuEntry = styled.div(_templateObject3$d || (_templateObject3$d = _taggedTemplateLiteral(["\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  height: ", "px;\n  width: ", "px;\n  padding: ", ";\n  font-size: 14px;\n  background-color: ", ";\n  color: ", ";\n  transition: all 0.9s;\n  ", " {\n    height: 40px;\n  }\n\n  a {\n    display: flex;\n    align-items: center;\n    width: 100%;\n    height: 100%;\n    color: ", ";\n    font-weight: 700;\n    transition: all 0.5s;\n  }\n\n  .dot {\n    height: 5px;\n    width: 5px;\n    border-radius: 50%;\n    display: inline-block;\n    background-color: ", ";\n  }\n\n  svg {\n    fill: ", ";\n    margin-right: 13px;\n  }\n\n  &:hover {\n    svg {\n      path {\n        fill: #12ffb8;\n        fill-opacity: 1;\n      }\n      margin-right: ", ";\n    }\n    div,\n    a {\n      svg {\n        path {\n          fill: ", ";\n        }\n      }\n    }\n\n    div,\n    a {\n      color: rgba(255, 255, 255, 1);\n    }\n  }\n\n  // Safari fix\n  flex-shrink: 0;\n\n  &.rainbow {\n    background-clip: text;\n    animation: ", " 3s ease-in-out infinite;\n    background: ", ";\n    background-size: 400% 100%;\n  }\n"])), MENU_ENTRY_HEIGHT, SIDEBAR_WIDTH_FULL, function (_ref3) {
+var MenuEntry = styledComponents.styled.div(_templateObject3$d || (_templateObject3$d = _taggedTemplateLiteral(["\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  height: ", "px;\n  width: ", "px;\n  padding: ", ";\n  font-size: 14px;\n  background-color: ", ";\n  color: ", ";\n  transition: all 0.9s;\n  ", " {\n    height: 40px;\n  }\n\n  a {\n    display: flex;\n    align-items: center;\n    width: 100%;\n    height: 100%;\n    color: ", ";\n    font-weight: 700;\n    transition: all 0.5s;\n  }\n\n  .dot {\n    height: 5px;\n    width: 5px;\n    border-radius: 50%;\n    display: inline-block;\n    background-color: ", ";\n  }\n\n  svg {\n    fill: ", ";\n    margin-right: 13px;\n  }\n\n  &:hover {\n    svg {\n      path {\n        fill: #12ffb8;\n        fill-opacity: 1;\n      }\n      margin-right: ", ";\n    }\n    div,\n    a {\n      svg {\n        path {\n          fill: ", ";\n        }\n      }\n    }\n\n    div,\n    a {\n      color: rgba(255, 255, 255, 1);\n    }\n  }\n\n  // Safari fix\n  flex-shrink: 0;\n\n  &.rainbow {\n    background-clip: text;\n    animation: ", " 3s ease-in-out infinite;\n    background: ", ";\n    background-size: 400% 100%;\n  }\n"])), MENU_ENTRY_HEIGHT, SIDEBAR_WIDTH_FULL, function (_ref3) {
   var secondary = _ref3.secondary;
   return secondary ? "0 32px" : "0 25px";
 }, function (_ref4) {
@@ -16903,8 +16903,8 @@ MenuEntry.defaultProps = {
 };
 
 var _templateObject$m, _templateObject2$g, _templateObject3$c;
-var Container$2 = styled.div(_templateObject$m || (_templateObject$m = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  // Safari fix\n  flex-shrink: 0;\n"])));
-var AccordionContent = styled.div(_templateObject2$g || (_templateObject2$g = _taggedTemplateLiteral(["\n  max-height: ", ";\n  transition: max-height 0.3s ease-out;\n  overflow-x: hidden;\n  overflow-y: scroll;\n  border-color: ", ";\n  border-style: solid;\n  border-width: 1px 0;\n  border-bottom: none;\n"])), function (_ref) {
+var Container$2 = styledComponents.styled.div(_templateObject$m || (_templateObject$m = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  // Safari fix\n  flex-shrink: 0;\n"])));
+var AccordionContent = styledComponents.styled.div(_templateObject2$g || (_templateObject2$g = _taggedTemplateLiteral(["\n  max-height: ", ";\n  transition: max-height 0.3s ease-out;\n  overflow-x: hidden;\n  overflow-y: scroll;\n  border-color: ", ";\n  border-style: solid;\n  border-width: 1px 0;\n  border-bottom: none;\n"])), function (_ref) {
   var isOpen = _ref.isOpen,
     maxHeight = _ref.maxHeight;
   return isOpen ? "".concat(maxHeight, "px") : 0;
@@ -16913,7 +16913,7 @@ var AccordionContent = styled.div(_templateObject2$g || (_templateObject2$g = _t
     isPushed = _ref2.isPushed;
   return isOpen && isPushed ? "rgba(133, 133, 133, 0.1)" : "transparent";
 });
-var ArrowIcon = styled(Icon$2x)(_templateObject3$c || (_templateObject3$c = _taggedTemplateLiteral(["\n  margin-right: -7px !important;\n  transform: rotate(", "deg);\n  transition: transform 0.4s;\n"])), function (_ref3) {
+var ArrowIcon = styledComponents.styled(Icon$2x)(_templateObject3$c || (_templateObject3$c = _taggedTemplateLiteral(["\n  margin-right: -7px !important;\n  transform: rotate(", "deg);\n  transition: transform 0.4s;\n"])), function (_ref3) {
   var isOpen = _ref3.isOpen;
   return isOpen ? 0 : 180;
 });
@@ -16988,11 +16988,11 @@ exports.ExtraIcon = void 0;
 
 var _templateObject$l, _templateObject2$f;
 var Icons$2 = IconModule;
-var Container$1 = styled.div(_templateObject$l || (_templateObject$l = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  overflow-y: auto;\n  overflow-x: hidden;\n  scrollbar-color: ", " transparent;\n  scrollbar-width: thin !important;\n"])), function (_ref) {
+var Container$1 = styledComponents.styled.div(_templateObject$l || (_templateObject$l = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  overflow-y: auto;\n  overflow-x: hidden;\n  scrollbar-color: ", " transparent;\n  scrollbar-width: thin !important;\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.colors.primary;
 });
-var NewLabel = styled.div(_templateObject2$f || (_templateObject2$f = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  color: ", " !important;\n  border: solid 1px ", ";\n  border-radius: 12px;\n  padding: 2px 8px;\n  font-size: 10px;\n  line-height: 9px;\n  font-weight: 700;\n  margin-left: 5px;\n  text-align: center;\n"])), function (_ref2) {
+var NewLabel = styledComponents.styled.div(_templateObject2$f || (_templateObject2$f = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  color: ", " !important;\n  border: solid 1px ", ";\n  border-radius: 12px;\n  padding: 2px 8px;\n  font-size: 10px;\n  line-height: 9px;\n  font-weight: 700;\n  margin-left: 5px;\n  text-align: center;\n"])), function (_ref2) {
   var theme = _ref2.theme;
   return theme.colors.primary;
 }, function (_ref3) {
@@ -17097,7 +17097,7 @@ var PanelBody = function PanelBody(_ref4) {
 
 var _excluded$1 = ["startIcon", "endIcon", "children", "external", "isLoading", "disabled"];
 var _templateObject$k;
-var StyledNavButton = styled.button(_templateObject$k || (_templateObject$k = _taggedTemplateLiteral(["\n  align-items: center;\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  font-family: inherit;\n  font-size: 16px;\n  font-weight: 600;\n  /* max-content instead of auto for Safari fix */\n  width: ", ";\n  height: ", ";\n  line-height: 1;\n  letter-spacing: 0.03em;\n  justify-content: center;\n  outline: 0;\n  border: none;\n  transition: background-color 0.2s;\n  background-color: transparent;\n  opacity: ", ";\n  margin-left: 10px;\n"])), function (_ref) {
+var StyledNavButton = styledComponents.styled.button(_templateObject$k || (_templateObject$k = _taggedTemplateLiteral(["\n  align-items: center;\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  font-family: inherit;\n  font-size: 16px;\n  font-weight: 600;\n  /* max-content instead of auto for Safari fix */\n  width: ", ";\n  height: ", ";\n  line-height: 1;\n  letter-spacing: 0.03em;\n  justify-content: center;\n  outline: 0;\n  border: none;\n  transition: background-color 0.2s;\n  background-color: transparent;\n  opacity: ", ";\n  margin-left: 10px;\n"])), function (_ref) {
   var fullWidth = _ref.fullWidth;
   return fullWidth ? "100%" : "max-content";
 }, function (_ref2) {
@@ -17136,7 +17136,7 @@ NavButton.defaultProps = {
 };
 
 var _templateObject$j;
-var MenuButton = styled(NavButton)(_templateObject$j || (_templateObject$j = _taggedTemplateLiteral(["\n  color: ", ";\n  padding: 0 8px;\n  border-radius: 8px;\n"])), function (_ref) {
+var MenuButton = styledComponents.styled(NavButton)(_templateObject$j || (_templateObject$j = _taggedTemplateLiteral(["\n  color: ", ";\n  padding: 0 8px;\n  border-radius: 8px;\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.colors.text;
 });
@@ -17179,31 +17179,31 @@ var getLangFlag = function getLangFlag(lang) {
 var _templateObject$i, _templateObject2$e, _templateObject3$b, _templateObject4$9, _templateObject5$7, _templateObject6$4, _templateObject7$2;
 var Icons$1 = IconModule;
 var LanguageIcon = Icons$1.LanguageIcon;
-var LangButton = styled(Button$1)(_templateObject$i || (_templateObject$i = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  position: relative;\n  justify-content: flex-start;\n  z-index: 9999999;\n  border: 1px solid ", ";\n  &:hover:not(:disabled):not(.button--disabled):not(:active) {\n    border: 1px solid rgba(255, 255, 255, 0.03);\n  }\n  transition: width 0.6s;\n  height: 28px;\n  width: ", "px;\n  margin-bottom: 15px;\n  padding: 0px 10px;\n"])), function (_ref) {
+var LangButton = styledComponents.styled(Button$1)(_templateObject$i || (_templateObject$i = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  position: relative;\n  justify-content: flex-start;\n  z-index: 9999999;\n  border: 1px solid ", ";\n  &:hover:not(:disabled):not(.button--disabled):not(:active) {\n    border: 1px solid rgba(255, 255, 255, 0.03);\n  }\n  transition: width 0.6s;\n  height: 28px;\n  width: ", "px;\n  margin-bottom: 15px;\n  padding: 0px 10px;\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.colors.white3;
 }, function (_ref2) {
   var isPushed = _ref2.isPushed;
   return isPushed ? 80 : 40;
 });
-var LangModal = styled.div(_templateObject2$e || (_templateObject2$e = _taggedTemplateLiteral(["\n  position: absolute;\n  display: ", "};\n  bottom: 45px;\n  left: 0px;\n  background: ", ";\n  border: 1px solid rgba(255, 255, 255, 0.03);\n  width: 267px;\n  height: auto;\n  padding: 27px 17px 27px 27px;\n  border-radius: 15px;\n"])), function (_ref3) {
+var LangModal = styledComponents.styled.div(_templateObject2$e || (_templateObject2$e = _taggedTemplateLiteral(["\n  position: absolute;\n  display: ", "};\n  bottom: 45px;\n  left: 0px;\n  background: ", ";\n  border: 1px solid rgba(255, 255, 255, 0.03);\n  width: 267px;\n  height: auto;\n  padding: 27px 17px 27px 27px;\n  border-radius: 15px;\n"])), function (_ref3) {
   var display = _ref3.display;
   return display ? "block" : "none";
 }, function (_ref4) {
   var theme = _ref4.theme;
   return theme.backgrounds.primary;
 });
-var LangsList = styled.div(_templateObject3$b || (_templateObject3$b = _taggedTemplateLiteral(["\n  max-height: 170px;\n  overflow-y: scroll;\n  &::-webkit-scrollbar {\n    width: 5px !important;\n  }\n  &::-webkit-scrollbar-thumb {\n    background: ", " !important;\n    border-radius: 8px;\n  }\n  &::-webkit-scrollbar-track {\n    box-shadow: inset 0 0 5px ", ";\n    border-radius: 3px;\n  }\n"])), function (_ref5) {
+var LangsList = styledComponents.styled.div(_templateObject3$b || (_templateObject3$b = _taggedTemplateLiteral(["\n  max-height: 170px;\n  overflow-y: scroll;\n  &::-webkit-scrollbar {\n    width: 5px !important;\n  }\n  &::-webkit-scrollbar-thumb {\n    background: ", " !important;\n    border-radius: 8px;\n  }\n  &::-webkit-scrollbar-track {\n    box-shadow: inset 0 0 5px ", ";\n    border-radius: 3px;\n  }\n"])), function (_ref5) {
   var theme = _ref5.theme;
   return theme.colors.white55;
 }, function (_ref6) {
   var theme = _ref6.theme;
   return theme.colors.white30;
 });
-var TitleContainer = styled.div(_templateObject4$9 || (_templateObject4$9 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  margin-bottom: 10px;\n"])));
-var ButtonContainer$1 = styled.div(_templateObject5$7 || (_templateObject5$7 = _taggedTemplateLiteral(["\n  width: 100%;\n  text-align: start;\n  padding: 0px 8px;\n"])));
-var LangText = styled(Text)(_templateObject6$4 || (_templateObject6$4 = _taggedTemplateLiteral(["\n  font-size: 14px;\n  margin-left: 12px;\n"])));
-var MainLangText = styled(Text)(_templateObject7$2 || (_templateObject7$2 = _taggedTemplateLiteral(["\n  opacity: ", ";\n  width: ", ";\n  transition: width 0.6s, opacity 0.3s;\n"])), function (_ref7) {
+var TitleContainer = styledComponents.styled.div(_templateObject4$9 || (_templateObject4$9 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  margin-bottom: 10px;\n"])));
+var ButtonContainer$1 = styledComponents.styled.div(_templateObject5$7 || (_templateObject5$7 = _taggedTemplateLiteral(["\n  width: 100%;\n  text-align: start;\n  padding: 0px 8px;\n"])));
+var LangText = styledComponents.styled(Text)(_templateObject6$4 || (_templateObject6$4 = _taggedTemplateLiteral(["\n  font-size: 14px;\n  margin-left: 12px;\n"])));
+var MainLangText = styledComponents.styled(Text)(_templateObject7$2 || (_templateObject7$2 = _taggedTemplateLiteral(["\n  opacity: ", ";\n  width: ", ";\n  transition: width 0.6s, opacity 0.3s;\n"])), function (_ref7) {
   var isPushed = _ref7.isPushed;
   return isPushed ? 1 : 0;
 }, function (_ref8) {
@@ -17312,8 +17312,8 @@ var LangSelector$1 = /*#__PURE__*/React.memo(LangSelector, function (prev, next)
 });
 
 var _templateObject$h, _templateObject2$d;
-var Container = styled.div(_templateObject$h || (_templateObject$h = _taggedTemplateLiteral(["\n  flex: none;\n  padding: 5px 5px 20px 5px;\n  background-color: transparent;\n  position: relative;\n  width: 100%;\n  margin-top: 15px;\n"])));
-var SettingsEntry = styled.div(_templateObject2$d || (_templateObject2$d = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: auto;\n"])));
+var Container = styledComponents.styled.div(_templateObject$h || (_templateObject$h = _taggedTemplateLiteral(["\n  flex: none;\n  padding: 5px 5px 20px 5px;\n  background-color: transparent;\n  position: relative;\n  width: 100%;\n  margin-top: 15px;\n"])));
+var SettingsEntry = styledComponents.styled.div(_templateObject2$d || (_templateObject2$d = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: auto;\n"])));
 var PanelFooter = function PanelFooter(_ref) {
   var isPushed = _ref.isPushed;
     _ref.pushNav;
@@ -17339,22 +17339,22 @@ var PanelFooter = function PanelFooter(_ref) {
 };
 
 var _templateObject$g;
-var MobileEntry = styled.div(_templateObject$g || (_templateObject$g = _taggedTemplateLiteral(["\n    &:hover {\n    div,\n    a {\n      svg {\n        path {\n          fill: ", ";\n        }\n      }\n    }\n\n    div,\n    a {\n      color: rgba(255, 255, 255, 1);\n    }\n  }\n"])), function (_ref) {
+var MobileEntry = styledComponents.styled.div(_templateObject$g || (_templateObject$g = _taggedTemplateLiteral(["\n    &:hover {\n    div,\n    a {\n      svg {\n        path {\n          fill: ", ";\n        }\n      }\n    }\n\n    div,\n    a {\n      color: rgba(255, 255, 255, 1);\n    }\n  }\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.colors.primary;
 });
 
 var _templateObject$f, _templateObject2$c, _templateObject3$a;
 var MOBILE_MENU_PANEL_HEIGHT = 83;
-var MobileMenuContainer = styled.div(_templateObject$f || (_templateObject$f = _taggedTemplateLiteral(["\n  position: fixed;\n  bottom: 0px;\n  width: 100%;\n  right: 0px;\n  left: 0px;\n  z-index: 98;\n  height: ", "px;\n  display: none;\n  flex-direction: row;\n  justify-content: space-around;\n  align-items: center;\n  background: ", ";\n  ", " {\n    display: flex;\n  }\n"])), MOBILE_MENU_PANEL_HEIGHT, function (_ref) {
+var MobileMenuContainer = styledComponents.styled.div(_templateObject$f || (_templateObject$f = _taggedTemplateLiteral(["\n  position: fixed;\n  bottom: 0px;\n  width: 100%;\n  right: 0px;\n  left: 0px;\n  z-index: 98;\n  height: ", "px;\n  display: none;\n  flex-direction: row;\n  justify-content: space-around;\n  align-items: center;\n  background: ", ";\n  ", " {\n    display: flex;\n  }\n"])), MOBILE_MENU_PANEL_HEIGHT, function (_ref) {
   var theme = _ref.theme;
   return theme.colors.card;
 }, function (_ref2) {
   var theme = _ref2.theme;
   return theme.mediaQueries.mobile;
 });
-var MobileLink = styled(MenuLink)(_templateObject2$c || (_templateObject2$c = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-items: soace-between;\n  align-items: center;\n"])));
-var MenuLinkLabel = styled.div(_templateObject3$a || (_templateObject3$a = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  font-weight: 700;\n  font-size: 9px;\n  color: white;\n"])));
+var MobileLink = styledComponents.styled(MenuLink)(_templateObject2$c || (_templateObject2$c = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-items: soace-between;\n  align-items: center;\n"])));
+var MenuLinkLabel = styledComponents.styled.div(_templateObject3$a || (_templateObject3$a = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  font-weight: 700;\n  font-size: 9px;\n  color: white;\n"])));
 var Icons = IconModule;
 var MobileMenu = function MobileMenu(_ref3) {
   var links = _ref3.links,
@@ -17390,7 +17390,7 @@ var MobileMenu = function MobileMenu(_ref3) {
 };
 
 var _templateObject$e, _templateObject2$b;
-var StyledPanel = styled.div(_templateObject$e || (_templateObject$e = _taggedTemplateLiteral(["\n  position: fixed;\n  padding-top: 100px;\n  top: 0;\n  left: 0;\n  flex-direction: column;\n  justify-content: space-between;\n  flex-shrink: 0;\n  background-color: #191921;\n  width: ", ";\n  height: 100vh;\n  transition: padding-top 0.2s, width 0.6s, box-shadow 0.4s;\n  z-index: 11;\n  overflow: ", ";\n  transform: translate3d(0, 0, 0);\n  ", " {\n    width: ", ";\n    padding-top: 100px;\n    margin-top: 0px;\n    transition: none;\n    overflow-y: auto;\n    padding-bottom: ", "px;\n  }\n"])), function (_ref) {
+var StyledPanel = styledComponents.styled.div(_templateObject$e || (_templateObject$e = _taggedTemplateLiteral(["\n  position: fixed;\n  padding-top: 100px;\n  top: 0;\n  left: 0;\n  flex-direction: column;\n  justify-content: space-between;\n  flex-shrink: 0;\n  background-color: #191921;\n  width: ", ";\n  height: 100vh;\n  transition: padding-top 0.2s, width 0.6s, box-shadow 0.4s;\n  z-index: 11;\n  overflow: ", ";\n  transform: translate3d(0, 0, 0);\n  ", " {\n    width: ", ";\n    padding-top: 100px;\n    margin-top: 0px;\n    transition: none;\n    overflow-y: auto;\n    padding-bottom: ", "px;\n  }\n"])), function (_ref) {
   var isPushed = _ref.isPushed;
   return "".concat(isPushed ? SIDEBAR_WIDTH_FULL : SIDEBAR_WIDTH_REDUCED, "px");
 }, function (_ref2) {
@@ -17403,7 +17403,7 @@ var StyledPanel = styled.div(_templateObject$e || (_templateObject$e = _taggedTe
   var isPushed = _ref4.isPushed;
   return isPushed ? "100%" : "0px";
 }, MOBILE_MENU_PANEL_HEIGHT);
-var RowSplitter = styled.div(_templateObject2$b || (_templateObject2$b = _taggedTemplateLiteral(["\n  border: 1px solid #252530;\n  margin: ", ";\n"])), function (_ref5) {
+var RowSplitter = styledComponents.styled.div(_templateObject2$b || (_templateObject2$b = _taggedTemplateLiteral(["\n  border: 1px solid #252530;\n  margin: ", ";\n"])), function (_ref5) {
   var isPushed = _ref5.isPushed;
   return isPushed ? "20px" : "20px 15px";
 });
@@ -17426,11 +17426,11 @@ var Panel = function Panel(props) {
 };
 
 var _templateObject$d, _templateObject2$a, _templateObject3$9, _templateObject4$8, _templateObject5$6;
-var Space = styled.div(_templateObject$d || (_templateObject$d = _taggedTemplateLiteral(["\n  width: 30px;\n"])));
-var DisclaimerContainer = styled.div(_templateObject2$a || (_templateObject2$a = _taggedTemplateLiteral(["\n  max-width: 430px;\n"])));
-var CheckBoxContainer = styled.div(_templateObject3$9 || (_templateObject3$9 = _taggedTemplateLiteral(["\n  width: 20%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"])));
-var ButtonContainer = styled.div(_templateObject4$8 || (_templateObject4$8 = _taggedTemplateLiteral(["\n  margin-top: 25px;\n"])));
-var ListContainer = styled.div(_templateObject5$6 || (_templateObject5$6 = _taggedTemplateLiteral(["\n  font-size: 13px;\n  color: white;\n  margin-bottom: 10px;\n  padding-left: 14px;\n  ul li {\n    list-style-position: outside;\n    padding: 4px;\n    line-height: 17px;\n  }\n"])));
+var Space = styledComponents.styled.div(_templateObject$d || (_templateObject$d = _taggedTemplateLiteral(["\n  width: 30px;\n"])));
+var DisclaimerContainer = styledComponents.styled.div(_templateObject2$a || (_templateObject2$a = _taggedTemplateLiteral(["\n  max-width: 430px;\n"])));
+var CheckBoxContainer = styledComponents.styled.div(_templateObject3$9 || (_templateObject3$9 = _taggedTemplateLiteral(["\n  width: 20%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"])));
+var ButtonContainer = styledComponents.styled.div(_templateObject4$8 || (_templateObject4$8 = _taggedTemplateLiteral(["\n  margin-top: 25px;\n"])));
+var ListContainer = styledComponents.styled.div(_templateObject5$6 || (_templateObject5$6 = _taggedTemplateLiteral(["\n  font-size: 13px;\n  color: white;\n  margin-bottom: 10px;\n  padding-left: 14px;\n  ul li {\n    list-style-position: outside;\n    padding: 4px;\n    line-height: 17px;\n  }\n"])));
 var DiclaimerModal = function DiclaimerModal(_ref) {
   var _ref$onDismiss = _ref.onDismiss,
     onDismiss = _ref$onDismiss === void 0 ? function () {
@@ -17673,12 +17673,12 @@ var useAutoDisclaimer = function useAutoDisclaimer(_ref) {
 };
 
 var _templateObject$c, _templateObject2$9, _templateObject3$8, _templateObject4$7, _templateObject5$5;
-var UserBlockWrapper = styled.div(_templateObject$c || (_templateObject$c = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: flex-end;\n\n  @media (max-width: 608px) {\n    flex: 100%;\n  }\n"])));
-var ConnectButton = styled(Button$1)(_templateObject2$9 || (_templateObject2$9 = _taggedTemplateLiteral(["\n  color: black;\n  width: 180px;\n  box-shadow: 0px 9px 63px rgba(18, 255, 184, 0.22);\n  font-weight: 700;\n  height: 40px;\n  ", " {\n    width: 113px;\n    height: 31px;\n    font-size: 11px;\n    padding: 0px 10px;\n  }\n"])), function (_ref) {
+var UserBlockWrapper = styledComponents.styled.div(_templateObject$c || (_templateObject$c = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: flex-end;\n\n  @media (max-width: 608px) {\n    flex: 100%;\n  }\n"])));
+var ConnectButton = styledComponents.styled(Button$1)(_templateObject2$9 || (_templateObject2$9 = _taggedTemplateLiteral(["\n  color: black;\n  width: 180px;\n  box-shadow: 0px 9px 63px rgba(18, 255, 184, 0.22);\n  font-weight: 700;\n  height: 40px;\n  ", " {\n    width: 113px;\n    height: 31px;\n    font-size: 11px;\n    padding: 0px 10px;\n  }\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.mediaQueries.mobile;
 });
-var AccountButton = styled(Button$1)(_templateObject3$8 || (_templateObject3$8 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: ", ";\n  align-items: ", ";\n  color: white;\n  padding: 10px;\n  height: 40px;\n  width: 144px;\n  background: #2b2b38;\n  ", " {\n    height: 31px;\n    width: 116px;\n    font-size: 11px;\n    padding: 0px 10px;\n  }\n"])), function (_ref2) {
+var AccountButton = styledComponents.styled(Button$1)(_templateObject3$8 || (_templateObject3$8 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: ", ";\n  align-items: ", ";\n  color: white;\n  padding: 10px;\n  height: 40px;\n  width: 144px;\n  background: #2b2b38;\n  ", " {\n    height: 31px;\n    width: 116px;\n    font-size: 11px;\n    padding: 0px 10px;\n  }\n"])), function (_ref2) {
   var isUserVerified = _ref2.isUserVerified;
   return isUserVerified ? "row" : "column-reverse";
 }, function (_ref3) {
@@ -17688,11 +17688,11 @@ var AccountButton = styled(Button$1)(_templateObject3$8 || (_templateObject3$8 =
   var theme = _ref4.theme;
   return theme.mediaQueries.mobile;
 });
-var VerifyAddressIndicator = styled(Text)(_templateObject4$7 || (_templateObject4$7 = _taggedTemplateLiteral(["\n  color: #f6465d;\n  ", " {\n    font-size: 10px;\n  }\n"])), function (_ref5) {
+var VerifyAddressIndicator = styledComponents.styled(Text)(_templateObject4$7 || (_templateObject4$7 = _taggedTemplateLiteral(["\n  color: #f6465d;\n  ", " {\n    font-size: 10px;\n  }\n"])), function (_ref5) {
   var theme = _ref5.theme;
   return theme.mediaQueries.mobile;
 });
-var Account = styled(Text)(_templateObject5$5 || (_templateObject5$5 = _taggedTemplateLiteral(["\n  margin-bottom: ", ";\n  ", " {\n    font-size: 10px;\n  }\n"])), function (_ref6) {
+var Account = styledComponents.styled(Text)(_templateObject5$5 || (_templateObject5$5 = _taggedTemplateLiteral(["\n  margin-bottom: ", ";\n  ", " {\n    font-size: 10px;\n  }\n"])), function (_ref6) {
   var isUserVerified = _ref6.isUserVerified;
   return !isUserVerified && "-5px";
 }, function (_ref7) {
@@ -17745,7 +17745,7 @@ var UserBlock = function UserBlock(_ref8) {
 };
 
 var _templateObject$b, _templateObject2$8, _templateObject3$7;
-var BellBoxWrapper = styled.div(_templateObject$b || (_templateObject$b = _taggedTemplateLiteral(["\n  height: 40px;\n  width: 50px;\n  overflow: visible;\n  cursor: pointer;\n  margin-right: 28px;\n  display: ", ";\n  z-index: 999;\n  ", " {\n    display: ", ";\n    position: fixed;\n    bottom: 107px;\n    left: initial;\n    right: 0px;\n    height: 50px;\n  }\n"])), function (_ref) {
+var BellBoxWrapper = styledComponents.styled.div(_templateObject$b || (_templateObject$b = _taggedTemplateLiteral(["\n  height: 40px;\n  width: 50px;\n  overflow: visible;\n  cursor: pointer;\n  margin-right: 28px;\n  display: ", ";\n  z-index: 999;\n  ", " {\n    display: ", ";\n    position: fixed;\n    bottom: 107px;\n    left: initial;\n    right: 0px;\n    height: 50px;\n  }\n"])), function (_ref) {
   var mobile = _ref.mobile;
   return mobile ? "none" : "block";
 }, function (_ref2) {
@@ -17756,7 +17756,7 @@ var BellBoxWrapper = styled.div(_templateObject$b || (_templateObject$b = _tagge
     hasMsg = _ref3.hasMsg;
   return mobile && hasMsg ? "block" : "none";
 });
-var BellBox = styled(Link)(_templateObject2$8 || (_templateObject2$8 = _taggedTemplateLiteral(["\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 100%;\n  width: 100%;\n  border: 1px solid ", ";\n  border-radius: 10px;\n  background: ", ";\n  box-sizing: border-box;\n  ", " {\n    border-radius: 50%;\n  }\n  ", "\n  ", "\n"])), function (_ref4) {
+var BellBox = styledComponents.styled(Link)(_templateObject2$8 || (_templateObject2$8 = _taggedTemplateLiteral(["\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 100%;\n  width: 100%;\n  border: 1px solid ", ";\n  border-radius: 10px;\n  background: ", ";\n  box-sizing: border-box;\n  ", " {\n    border-radius: 50%;\n  }\n  ", "\n  ", "\n"])), function (_ref4) {
   var hasMsg = _ref4.hasMsg,
     theme = _ref4.theme;
   return hasMsg ? "#1AC8FF" : theme.backgrounds.secondary;
@@ -17774,7 +17774,7 @@ var BellBox = styled(Link)(_templateObject2$8 || (_templateObject2$8 = _taggedTe
   var hasMsg = _ref8.hasMsg;
   return hasMsg && "\n        box-shadow: 0px 0px 14px 3px rgba(46, 124, 246, 0.25);\n    ";
 });
-var NotificationNumber = styled.div(_templateObject3$7 || (_templateObject3$7 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 4px;\n  right: 3px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 18.46px;\n  height: 18.46px;\n  background: #de4040;\n  border-radius: 50%;\n  opacity: ", ";\n  transition: all 0.25s ease-in-out;\n  animation: stretch 2s infinite;\n  ", " {\n    top: 12.25px;\n    right: 7px;\n  }\n  @keyframes stretch {\n    0% {\n      transform: scale(1);\n    }\n\n    50% {\n      transform: scale(1.2);\n    }\n\n    100% {\n      transform: scale(1);\n    }\n  }\n"])), function (_ref9) {
+var NotificationNumber = styledComponents.styled.div(_templateObject3$7 || (_templateObject3$7 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 4px;\n  right: 3px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 18.46px;\n  height: 18.46px;\n  background: #de4040;\n  border-radius: 50%;\n  opacity: ", ";\n  transition: all 0.25s ease-in-out;\n  animation: stretch 2s infinite;\n  ", " {\n    top: 12.25px;\n    right: 7px;\n  }\n  @keyframes stretch {\n    0% {\n      transform: scale(1);\n    }\n\n    50% {\n      transform: scale(1.2);\n    }\n\n    100% {\n      transform: scale(1);\n    }\n  }\n"])), function (_ref9) {
   var hasMsg = _ref9.hasMsg;
   return hasMsg ? 1 : 0;
 }, function (_ref0) {
@@ -17812,7 +17812,7 @@ var BellNotifier = function BellNotifier(_ref1) {
 };
 
 var _templateObject$a, _templateObject2$7, _templateObject3$6, _templateObject4$6;
-var CryptoDropdownWrapper = styled.button(_templateObject$a || (_templateObject$a = _taggedTemplateLiteral(["\n  padding: ", "px;\n  outline: none;\n  border: none;\n  width: ", "px;\n  height: 40px;\n  background: #2b2b38;\n  border-radius: 10px;\n  display: flex;\n  flex-direction: row;\n  justify-content: space-around;\n  align-items: center;\n  color: black;\n  cursor: pointer;\n  position: relative;\n  &:active {\n    background: ", ";\n  }\n  ", " {\n    width: 113px;\n    height: 31px;\n    font-size: 11px;\n    padding: 0px 10px;\n    margin: 0 6px;\n  }\n  transition: all 0.5s ease-in;\n"])), function (props) {
+var CryptoDropdownWrapper = styledComponents.styled.button(_templateObject$a || (_templateObject$a = _taggedTemplateLiteral(["\n  padding: ", "px;\n  outline: none;\n  border: none;\n  width: ", "px;\n  height: 40px;\n  background: #2b2b38;\n  border-radius: 10px;\n  display: flex;\n  flex-direction: row;\n  justify-content: space-around;\n  align-items: center;\n  color: black;\n  cursor: pointer;\n  position: relative;\n  &:active {\n    background: ", ";\n  }\n  ", " {\n    width: 113px;\n    height: 31px;\n    font-size: 11px;\n    padding: 0px 10px;\n    margin: 0 6px;\n  }\n  transition: all 0.5s ease-in;\n"])), function (props) {
   return props.extended ? "6px 5px 6px 10px" : "10px";
 }, function (props) {
   return props.extended ? 130 : 70;
@@ -17823,7 +17823,7 @@ var CryptoDropdownWrapper = styled.button(_templateObject$a || (_templateObject$
   var theme = _ref2.theme;
   return theme.mediaQueries.mobile;
 });
-var ButtonsContainer = styled.div(_templateObject2$7 || (_templateObject2$7 = _taggedTemplateLiteral(["\n  position: absolute;\n  width: 159px;\n  height: 89px;\n  top: 53px;\n  right: 0px;\n  background: ", ";\n  border: 1px solid ", ";\n  box-sizing: border-box;\n  opacity: ", ";\n  display: flex;\n  z-index: ", "999;\n  transition-property: opacity, box-shadow;\n  transition-duration: 0.5s, 0.3s;\n  box-shadow: 0px 0px 24px -11px rgba(0, 0, 0, 0.25);\n  border-radius: 10px;\n  flex-direction: column;\n  justify-content: space-between;\n  align-items: center;\n  ", " {\n    display: ", ";\n  }\n"])), function (_ref3) {
+var ButtonsContainer = styledComponents.styled.div(_templateObject2$7 || (_templateObject2$7 = _taggedTemplateLiteral(["\n  position: absolute;\n  width: 159px;\n  height: 89px;\n  top: 53px;\n  right: 0px;\n  background: ", ";\n  border: 1px solid ", ";\n  box-sizing: border-box;\n  opacity: ", ";\n  display: flex;\n  z-index: ", "999;\n  transition-property: opacity, box-shadow;\n  transition-duration: 0.5s, 0.3s;\n  box-shadow: 0px 0px 24px -11px rgba(0, 0, 0, 0.25);\n  border-radius: 10px;\n  flex-direction: column;\n  justify-content: space-between;\n  align-items: center;\n  ", " {\n    display: ", ";\n  }\n"])), function (_ref3) {
   var theme = _ref3.theme;
   return theme.backgrounds.secondary;
 }, function (_ref4) {
@@ -17839,8 +17839,8 @@ var ButtonsContainer = styled.div(_templateObject2$7 || (_templateObject2$7 = _t
 }, function (props) {
   return props.visible ? "flex" : "none";
 });
-var ButtonRow = styled(Link)(_templateObject3$6 || (_templateObject3$6 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  padding: 11px;\n  width: 100%;\n  height: 100%;\n  overflow: visible;\n  z-index: 99999;\n  svg {\n    opacity: 0.55;\n  }\n  &:hover {\n    svg {\n      opacity: 1;\n    }\n  }\n  transition: all 0.3s ease-in;\n"])));
-var ButtonsSpacer = styled.div(_templateObject4$6 || (_templateObject4$6 = _taggedTemplateLiteral(["\n  border: 1px solid #373749;\n  width: calc(100% - 20px);\n"])));
+var ButtonRow = styledComponents.styled(Link)(_templateObject3$6 || (_templateObject3$6 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  padding: 11px;\n  width: 100%;\n  height: 100%;\n  overflow: visible;\n  z-index: 99999;\n  svg {\n    opacity: 0.55;\n  }\n  &:hover {\n    svg {\n      opacity: 1;\n    }\n  }\n  transition: all 0.3s ease-in;\n"])));
+var ButtonsSpacer = styledComponents.styled.div(_templateObject4$6 || (_templateObject4$6 = _taggedTemplateLiteral(["\n  border: 1px solid #373749;\n  width: calc(100% - 20px);\n"])));
 var CryptoButton = function CryptoButton(_ref6) {
   var _ref6$extended = _ref6.extended,
     extended = _ref6$extended === void 0 ? false : _ref6$extended,
@@ -17926,7 +17926,7 @@ var CryptoButton = function CryptoButton(_ref6) {
 };
 
 var _templateObject$9, _templateObject2$6;
-var StyledUserButton = styled.div(_templateObject$9 || (_templateObject$9 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n  width: 40px;\n  height: 40px;\n  border-radius: 10px;\n  background: #2b2b38;\n  svg {\n    fill: ", ";\n    path {\n      fill: ", ";\n    }\n  }\n  ", " {\n    width: 32px;\n    height: 32px;\n    border-radius: 8px;\n  }\n"])), function (_ref) {
+var StyledUserButton = styledComponents.styled.div(_templateObject$9 || (_templateObject$9 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n  width: 40px;\n  height: 40px;\n  border-radius: 10px;\n  background: #2b2b38;\n  svg {\n    fill: ", ";\n    path {\n      fill: ", ";\n    }\n  }\n  ", " {\n    width: 32px;\n    height: 32px;\n    border-radius: 8px;\n  }\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.colors.primary;
 }, function (_ref2) {
@@ -17936,7 +17936,7 @@ var StyledUserButton = styled.div(_templateObject$9 || (_templateObject$9 = _tag
   var theme = _ref3.theme;
   return theme.mediaQueries.mobile;
 });
-var StyledUserIcon = styled(Icon$1c)(_templateObject2$6 || (_templateObject2$6 = _taggedTemplateLiteral(["\n  ", " {\n    height: 18px;\n  }\n"])), function (_ref4) {
+var StyledUserIcon = styledComponents.styled(Icon$1c)(_templateObject2$6 || (_templateObject2$6 = _taggedTemplateLiteral(["\n  ", " {\n    height: 18px;\n  }\n"])), function (_ref4) {
   var theme = _ref4.theme;
   return theme.mediaQueries.mobile;
 });
@@ -17956,13 +17956,13 @@ var UserButton = function UserButton(_ref5) {
 };
 
 var _templateObject$8, _templateObject2$5, _templateObject3$5, _templateObject4$5, _templateObject5$4, _templateObject6$3;
-var Wrapper = styled.div(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteral(["\n  position: relative;\n  width: 100%;\n  height: 100%;\n  overscroll-behavior-y: contain;\n  scroll-snap-type: y proximity;\n"])));
-var StyledNav = styled.nav(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteral(["\n  align-items: flex-start;\n  position: fixed;\n  left: 0;\n  transition: top 0.2s;\n  display: flex;\n  justify-content: space-between;\n  padding: 30px 15px;\n  background-color: transparent;\n  z-index: 20;\n  transform: translate3d(0, 0, 0);\n  ", " {\n    position: absolute;\n    left: -12px;\n  } ;\n"])), function (_ref) {
+var Wrapper = styledComponents.styled.div(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteral(["\n  position: relative;\n  width: 100%;\n  height: 100%;\n  overscroll-behavior-y: contain;\n  scroll-snap-type: y proximity;\n"])));
+var StyledNav = styledComponents.styled.nav(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteral(["\n  align-items: flex-start;\n  position: fixed;\n  left: 0;\n  transition: top 0.2s;\n  display: flex;\n  justify-content: space-between;\n  padding: 30px 15px;\n  background-color: transparent;\n  z-index: 20;\n  transform: translate3d(0, 0, 0);\n  ", " {\n    position: absolute;\n    left: -12px;\n  } ;\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.mediaQueries.mobile;
 });
-var BodyWrapper = styled.div(_templateObject3$5 || (_templateObject3$5 = _taggedTemplateLiteral(["\n  position: relative;\n  display: flex;\n  min-height: 100vh;\n"])));
-var Inner = styled.div(_templateObject4$5 || (_templateObject4$5 = _taggedTemplateLiteral(["\n  flex-grow: 1;\n  margin-top: 25px;\n  transition: margin-top 0.2s;\n  transform: translate3d(0, 0, 0);\n  margin-left: ", "px;\n  max-width: calc(100% - ", "px);\n  ", " {\n    max-width: 100%;\n    margin-left: 0px;\n  }\n"])), SIDEBAR_WIDTH_REDUCED, SIDEBAR_WIDTH_REDUCED, function (_ref2) {
+var BodyWrapper = styledComponents.styled.div(_templateObject3$5 || (_templateObject3$5 = _taggedTemplateLiteral(["\n  position: relative;\n  display: flex;\n  min-height: 100vh;\n"])));
+var Inner = styledComponents.styled.div(_templateObject4$5 || (_templateObject4$5 = _taggedTemplateLiteral(["\n  flex-grow: 1;\n  margin-top: 25px;\n  transition: margin-top 0.2s;\n  transform: translate3d(0, 0, 0);\n  margin-left: ", "px;\n  max-width: calc(100% - ", "px);\n  ", " {\n    max-width: 100%;\n    margin-left: 0px;\n  }\n"])), SIDEBAR_WIDTH_REDUCED, SIDEBAR_WIDTH_REDUCED, function (_ref2) {
   var theme = _ref2.theme;
   return theme.mediaQueries.mobile;
 });
@@ -17974,7 +17974,7 @@ var Inner = styled.div(_templateObject4$5 || (_templateObject4$5 = _taggedTempla
 //     opacity: 0;
 //   }
 // `;
-var ButtonsRow$1 = styled.div(_templateObject5$4 || (_templateObject5$4 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: flex-end;\n  aling-items: center;\n  flex-direction: row;\n  background: transparent;\n  ", " {\n    z-index: 99999;\n    position: ", ";\n    top: 30px;\n    right: 25px;\n    padding-bottom: 30px;\n    ", "\n  }\n"])), function (_ref3) {
+var ButtonsRow$1 = styledComponents.styled.div(_templateObject5$4 || (_templateObject5$4 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: flex-end;\n  aling-items: center;\n  flex-direction: row;\n  background: transparent;\n  ", " {\n    z-index: 99999;\n    position: ", ";\n    top: 30px;\n    right: 25px;\n    padding-bottom: 30px;\n    ", "\n  }\n"])), function (_ref3) {
   var theme = _ref3.theme;
   return theme.mediaQueries.mobile;
 }, function (_ref4) {
@@ -17984,7 +17984,7 @@ var ButtonsRow$1 = styled.div(_templateObject5$4 || (_templateObject5$4 = _tagge
   var isPushed = _ref5.isPushed;
   return !isPushed && "\n        margin-right: 12px;\n        margin-top: 5px;\n    ";
 });
-var MenuContent = styled.div(_templateObject6$3 || (_templateObject6$3 = _taggedTemplateLiteral(["\n  display: flex;\n  gap: 20px;\n  flex-direction: row-reverse;\n  transition: all 0.2s;\n  width: 100%;\n\n  ", " {\n    margin-right: 50px;\n  }\n\n  @media (max-width: 900px) {\n    flex-direction: column;\n    gap: 7px;\n    align-items: flex-end;\n  }\n"])), function (_ref6) {
+var MenuContent = styledComponents.styled.div(_templateObject6$3 || (_templateObject6$3 = _taggedTemplateLiteral(["\n  display: flex;\n  gap: 20px;\n  flex-direction: row-reverse;\n  transition: all 0.2s;\n  width: 100%;\n\n  ", " {\n    margin-right: 50px;\n  }\n\n  @media (max-width: 900px) {\n    flex-direction: column;\n    gap: 7px;\n    align-items: flex-end;\n  }\n"])), function (_ref6) {
   var theme = _ref6.theme;
   return theme.mediaQueries.mobile;
 });
@@ -18215,7 +18215,7 @@ var types = {
 var _excluded = ["toast", "onRemove", "style", "ttl"];
 var _templateObject$7;
 var alertTypeMap = _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, types.INFO, variants$3.INFO), types.SUCCESS, variants$3.SUCCESS), types.DANGER, variants$3.DANGER), types.WARNING, variants$3.WARNING);
-var StyledToast = styled.div(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteral(["\n  right: 30px; // 14px+\n  position: fixed;\n  max-width: calc(100% - 32px);\n  transition: all 250ms ease-in;\n  width: 100%;\n\n  ", " {\n    max-width: 400px;\n  }\n"])), function (_ref) {
+var StyledToast = styledComponents.styled.div(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteral(["\n  right: 30px; // 14px+\n  position: fixed;\n  max-width: calc(100% - 32px);\n  transition: all 250ms ease-in;\n  width: 100%;\n\n  ", " {\n    max-width: 400px;\n  }\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.mediaQueries.sm;
 });
@@ -18292,7 +18292,7 @@ var Toast = function Toast(_ref2) {
 var _templateObject$6;
 var ZINDEX = 1000;
 var TOP_POSITION = 94; // Initial position from the top, 14px+
-var StyledToastContainer = styled.div(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteral(["\n  .enter,\n  .appear {\n    opacity: 0.01;\n  }\n\n  .enter.enter-active,\n  .appear.appear-active {\n    opacity: 1;\n    transition: opacity 250ms ease-in;\n  }\n\n  .exit {\n    opacity: 1;\n  }\n\n  .exit.exit-active {\n    opacity: 0.01;\n    transition: opacity 250ms ease-out;\n  }\n"])));
+var StyledToastContainer = styledComponents.styled.div(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteral(["\n  .enter,\n  .appear {\n    opacity: 0.01;\n  }\n\n  .enter.enter-active,\n  .appear.appear-active {\n    opacity: 1;\n    transition: opacity 250ms ease-in;\n  }\n\n  .exit {\n    opacity: 1;\n  }\n\n  .exit.exit-active {\n    opacity: 0.01;\n    transition: opacity 250ms ease-out;\n  }\n"])));
 var ToastContainer = function ToastContainer(_ref) {
   var toasts = _ref.toasts,
     onRemove = _ref.onRemove,
@@ -18320,11 +18320,11 @@ var ToastContainer = function ToastContainer(_ref) {
 };
 
 var _templateObject$5, _templateObject2$4, _templateObject3$4, _templateObject4$4, _templateObject5$3;
-var VerificationModalContent = styled.div(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: center;\n  height: 100%;\n  margin-top: -30px;\n"])));
-var DescriptionSection = styled.div(_templateObject2$4 || (_templateObject2$4 = _taggedTemplateLiteral(["\n  width: 305px;\n  text-align: center;\n  margin-top: 32px;\n  margin-bottom: 32px;\n"])));
-var ModalText$1 = styled(Text)(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteral(["\n  line-height: 170%;\n"])));
-var ButtonsRow = styled.div(_templateObject4$4 || (_templateObject4$4 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-around;\n  align-items: center;\n  width: 100%;\n"])));
-var ModalButton$1 = styled(Button$1)(_templateObject5$3 || (_templateObject5$3 = _taggedTemplateLiteral(["\n  width: 120px;\n  padding: 0 8px;\n"])));
+var VerificationModalContent = styledComponents.styled.div(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: center;\n  height: 100%;\n  margin-top: -30px;\n"])));
+var DescriptionSection = styledComponents.styled.div(_templateObject2$4 || (_templateObject2$4 = _taggedTemplateLiteral(["\n  width: 305px;\n  text-align: center;\n  margin-top: 32px;\n  margin-bottom: 32px;\n"])));
+var ModalText$1 = styledComponents.styled(Text)(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteral(["\n  line-height: 170%;\n"])));
+var ButtonsRow = styledComponents.styled.div(_templateObject4$4 || (_templateObject4$4 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-around;\n  align-items: center;\n  width: 100%;\n"])));
+var ModalButton$1 = styledComponents.styled(Button$1)(_templateObject5$3 || (_templateObject5$3 = _taggedTemplateLiteral(["\n  width: 120px;\n  padding: 0 8px;\n"])));
 var VerificationModal = function VerificationModal(props) {
   var onVerify = props.onVerify,
     modalDescription = props.modalDescription,
@@ -18395,15 +18395,15 @@ var useVerificationModal = function useVerificationModal(_ref) {
 };
 
 var _templateObject$4, _templateObject2$3, _templateObject3$3, _templateObject4$3, _templateObject5$2, _templateObject6$2;
-var IdoExtensionsModalContent = styled.div(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: center;\n  height: 100%;\n  margin-top: -30px;\n"])));
-var ModalText = styled(Text)(_templateObject2$3 || (_templateObject2$3 = _taggedTemplateLiteral(["\n  line-height: 170%;\n  width: ", ";\n  ", " {\n    width: 90%;\n  }\n"])), function (_ref) {
+var IdoExtensionsModalContent = styledComponents.styled.div(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: center;\n  height: 100%;\n  margin-top: -30px;\n"])));
+var ModalText = styledComponents.styled(Text)(_templateObject2$3 || (_templateObject2$3 = _taggedTemplateLiteral(["\n  line-height: 170%;\n  width: ", ";\n  ", " {\n    width: 90%;\n  }\n"])), function (_ref) {
   var textWidth = _ref.textWidth;
   return textWidth ? "".concat(textWidth, "px") : "100%";
 }, function (_ref2) {
   var theme = _ref2.theme;
   return theme.mediaQueries.tablet;
 });
-var InputWrapper = styled.div(_templateObject3$3 || (_templateObject3$3 = _taggedTemplateLiteral(["\n  position: relative;\n  width: 100%;\n  margin-top: ", "px;\n  min-width: 420px;\n  ", " {\n    min-width: 100%;\n  }\n  ", " {\n    margin-top: 10px;\n  }\n"])), function (_ref3) {
+var InputWrapper = styledComponents.styled.div(_templateObject3$3 || (_templateObject3$3 = _taggedTemplateLiteral(["\n  position: relative;\n  width: 100%;\n  margin-top: ", "px;\n  min-width: 420px;\n  ", " {\n    min-width: 100%;\n  }\n  ", " {\n    margin-top: 10px;\n  }\n"])), function (_ref3) {
   var marginTop = _ref3.marginTop;
   return marginTop || 0;
 }, function (_ref4) {
@@ -18413,12 +18413,12 @@ var InputWrapper = styled.div(_templateObject3$3 || (_templateObject3$3 = _tagge
   var theme = _ref5.theme;
   return theme.mediaQueries.mobile;
 });
-var InfoText = styled(Text)(_templateObject4$3 || (_templateObject4$3 = _taggedTemplateLiteral(["\n  text-align: center;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 160%;\n  color: #535459;\n  margin-top: 24px;\n  b {\n    color: ", ";\n    cursor: pointer;\n  }\n"])), function (_ref6) {
+var InfoText = styledComponents.styled(Text)(_templateObject4$3 || (_templateObject4$3 = _taggedTemplateLiteral(["\n  text-align: center;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 160%;\n  color: #535459;\n  margin-top: 24px;\n  b {\n    color: ", ";\n    cursor: pointer;\n  }\n"])), function (_ref6) {
   var theme = _ref6.theme;
   return theme.colors.primary;
 });
-var IdoExtensionsForm = styled.form(_templateObject5$2 || (_templateObject5$2 = _taggedTemplateLiteral(["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n"])));
-var ModalButton = styled(Button$1)(_templateObject6$2 || (_templateObject6$2 = _taggedTemplateLiteral(["\n  width: 144px;\n  margin-top: 24px;\n  font-size: 14px;\n"])));
+var IdoExtensionsForm = styledComponents.styled.form(_templateObject5$2 || (_templateObject5$2 = _taggedTemplateLiteral(["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n"])));
+var ModalButton = styledComponents.styled(Button$1)(_templateObject6$2 || (_templateObject6$2 = _taggedTemplateLiteral(["\n  width: 144px;\n  margin-top: 24px;\n  font-size: 14px;\n"])));
 var IdoExtensionsModal = function IdoExtensionsModal(_ref7) {
   var onExtensionsAdd = _ref7.onExtensionsAdd,
     onDismiss = _ref7.onDismiss,
@@ -18656,13 +18656,13 @@ var useIdoExtensionsModal = function useIdoExtensionsModal(_ref) {
 };
 
 var _templateObject$3, _templateObject2$2, _templateObject3$2, _templateObject4$2;
-var PriceContainerWrapper$1 = styled.div(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  align-items: space-around;\n  flex-direction: column;\n  padding: 20px;\n  background: ", ";\n  @-moz-document url-prefix() {\n    background: rgba(36, 36, 36, 0.95) !important;\n  }\n  border: 1px solid rgba(255, 255, 255, 0.03);\n  box-sizing: border-box;\n  border-radius: 10px;\n  max-height: 170px;\n  width: 100%;\n  height: 100%;\n"])), function (_ref) {
+var PriceContainerWrapper$1 = styledComponents.styled.div(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  align-items: space-around;\n  flex-direction: column;\n  padding: 20px;\n  background: ", ";\n  @-moz-document url-prefix() {\n    background: rgba(36, 36, 36, 0.95) !important;\n  }\n  border: 1px solid rgba(255, 255, 255, 0.03);\n  box-sizing: border-box;\n  border-radius: 10px;\n  max-height: 170px;\n  width: 100%;\n  height: 100%;\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.backgrounds.secondary;
 });
-var HeaderWrapper$1 = styled.div(_templateObject2$2 || (_templateObject2$2 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 26px;\n"])));
-var OriginsWrapper = styled.div(_templateObject3$2 || (_templateObject3$2 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n"])));
-var OriginTitle = styled(Text)(_templateObject4$2 || (_templateObject4$2 = _taggedTemplateLiteral(["\n  color: ", ";\n  cursor: pointer;\n  padding: 0px 12px;\n  transition: all 0.5s;\n"])), function (_ref2) {
+var HeaderWrapper$1 = styledComponents.styled.div(_templateObject2$2 || (_templateObject2$2 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 26px;\n"])));
+var OriginsWrapper = styledComponents.styled.div(_templateObject3$2 || (_templateObject3$2 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n"])));
+var OriginTitle = styledComponents.styled(Text)(_templateObject4$2 || (_templateObject4$2 = _taggedTemplateLiteral(["\n  color: ", ";\n  cursor: pointer;\n  padding: 0px 12px;\n  transition: all 0.5s;\n"])), function (_ref2) {
   var currentIndex = _ref2.currentIndex,
     index = _ref2.index,
     theme = _ref2.theme;
@@ -18713,16 +18713,16 @@ var PriceContainer = function PriceContainer(_ref3) {
 };
 
 var _templateObject$2, _templateObject2$1, _templateObject3$1, _templateObject4$1, _templateObject5$1, _templateObject6$1, _templateObject7$1;
-var PriceContainerWrapper = styled.div(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: flex-start;\n  align-items: space-around;\n  flex-direction: column;\n  padding: 20px;\n  @-moz-document url-prefix() {\n    background: ", "; !important;\n  }\n\n  background: ", ";\n  border: 1px solid rgba(255, 255, 255, 0.03);\n  box-sizing: border-box;\n  border-radius: 10px;\n  box-shadow: none;\n\n  position: relative;\n  overflow: hidden;\n"])), function (_ref) {
+var PriceContainerWrapper = styledComponents.styled.div(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: flex-start;\n  align-items: space-around;\n  flex-direction: column;\n  padding: 20px;\n  @-moz-document url-prefix() {\n    background: ", "; !important;\n  }\n\n  background: ", ";\n  border: 1px solid rgba(255, 255, 255, 0.03);\n  box-sizing: border-box;\n  border-radius: 10px;\n  box-shadow: none;\n\n  position: relative;\n  overflow: hidden;\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.backgrounds.secondary;
 }, function (_ref2) {
   var theme = _ref2.theme;
   return theme.backgrounds.secondary;
 });
-var HeaderWrapper = styled.div(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 26px;\n"])));
-var TokensContainer = styled(GridLayout$1)(_templateObject3$1 || (_templateObject3$1 = _taggedTemplateLiteral(["\n  color: white;\n"])));
-var MainCoinWrapper = styled.div(_templateObject4$1 || (_templateObject4$1 = _taggedTemplateLiteral(["\n  grid-column: span 8;\n  border-bottom: 1px solid ", ";\n  padding-bottom: 10px;\n  display: flex;\n  justify-content: center;\n  padding-right: 20px;\n  ", " {\n    grid-column: span 3;\n    border-right: 1px solid ", ";\n    border-bottom: none;\n    justify-content: flex-start;\n  }\n"])), function (_ref3) {
+var HeaderWrapper = styledComponents.styled.div(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 26px;\n"])));
+var TokensContainer = styledComponents.styled(GridLayout$1)(_templateObject3$1 || (_templateObject3$1 = _taggedTemplateLiteral(["\n  color: white;\n"])));
+var MainCoinWrapper = styledComponents.styled.div(_templateObject4$1 || (_templateObject4$1 = _taggedTemplateLiteral(["\n  grid-column: span 8;\n  border-bottom: 1px solid ", ";\n  padding-bottom: 10px;\n  display: flex;\n  justify-content: center;\n  padding-right: 20px;\n  ", " {\n    grid-column: span 3;\n    border-right: 1px solid ", ";\n    border-bottom: none;\n    justify-content: flex-start;\n  }\n"])), function (_ref3) {
   var theme = _ref3.theme;
   return theme.colors.grey;
 }, function (_ref4) {
@@ -18732,7 +18732,7 @@ var MainCoinWrapper = styled.div(_templateObject4$1 || (_templateObject4$1 = _ta
   var theme = _ref5.theme;
   return theme.colors.grey;
 });
-var TokensWrapper = styled.div(_templateObject5$1 || (_templateObject5$1 = _taggedTemplateLiteral(["\n  height: 100%;\n  display: flex;\n  justify-content: ", ";\n  grid-column: span 8;\n  padding-bottom: 20px;\n  ", "\n  ", " {\n    padding-bottom: 0px;\n  }\n"])), function (_ref6) {
+var TokensWrapper = styledComponents.styled.div(_templateObject5$1 || (_templateObject5$1 = _taggedTemplateLiteral(["\n  height: 100%;\n  display: flex;\n  justify-content: ", ";\n  grid-column: span 8;\n  padding-bottom: 20px;\n  ", "\n  ", " {\n    padding-bottom: 0px;\n  }\n"])), function (_ref6) {
   var noData = _ref6.noData;
   return noData ? "center" : "space-between";
 }, function (_ref7) {
@@ -18742,8 +18742,8 @@ var TokensWrapper = styled.div(_templateObject5$1 || (_templateObject5$1 = _tagg
   var theme = _ref8.theme;
   return theme.mediaQueries.sm;
 });
-var DotsContainer = styled.div(_templateObject6$1 || (_templateObject6$1 = _taggedTemplateLiteral(["\n  position: absolute;\n  display: flex;\n  align-items: center;\n  @media (min-width: 576px) {\n    right: 20px;\n    top: 29px;\n  }\n  @media (max-width: 576px) {\n    left: 50%;\n    transform: translate(-50%);\n    bottom: 17px !important;\n  }\n"])));
-var Dot = styled.div(_templateObject7$1 || (_templateObject7$1 = _taggedTemplateLiteral(["\n  width: 8px;\n  height: 8px;\n  display: inline - block;\n  margin: 0 8px;\n  border-radius: 99px;\n  background: ", ";\n  border: ", ";\n  cursor: pointer;\n  padding: 3px;\n"])), function (_ref9) {
+var DotsContainer = styledComponents.styled.div(_templateObject6$1 || (_templateObject6$1 = _taggedTemplateLiteral(["\n  position: absolute;\n  display: flex;\n  align-items: center;\n  @media (min-width: 576px) {\n    right: 20px;\n    top: 29px;\n  }\n  @media (max-width: 576px) {\n    left: 50%;\n    transform: translate(-50%);\n    bottom: 17px !important;\n  }\n"])));
+var Dot = styledComponents.styled.div(_templateObject7$1 || (_templateObject7$1 = _taggedTemplateLiteral(["\n  width: 8px;\n  height: 8px;\n  display: inline - block;\n  margin: 0 8px;\n  border-radius: 99px;\n  background: ", ";\n  border: ", ";\n  cursor: pointer;\n  padding: 3px;\n"])), function (_ref9) {
   var active = _ref9.active,
     theme = _ref9.theme;
   return active ? theme.colors.blue : "transparent";
@@ -18838,23 +18838,23 @@ var TopTokensContainer = function TopTokensContainer(_ref1) {
 };
 
 var _templateObject$1, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
-var ForParticipants = styled(Text)(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\n  margin: 0 auto;\n  width: 155px;\n  text-align: center;\n  border: 1px solid #12ffb8;\n  line-height: 28px;\n  border-radius: 10px;\n  margin: 106px auto 26px;\n"])));
-var HowToParticipate = styled(Text)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  text-align: center;\n  width: 100%;\n  ", " {\n    font-size: 26px;\n    width: 200px;\n    margin: 0 auto;\n  }\n"])), function (_ref) {
+var ForParticipants = styledComponents.styled(Text)(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\n  margin: 0 auto;\n  width: 155px;\n  text-align: center;\n  border: 1px solid #12ffb8;\n  line-height: 28px;\n  border-radius: 10px;\n  margin: 106px auto 26px;\n"])));
+var HowToParticipate = styledComponents.styled(Text)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  text-align: center;\n  width: 100%;\n  ", " {\n    font-size: 26px;\n    width: 200px;\n    margin: 0 auto;\n  }\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.mediaQueries.mobile;
 });
-var StepsWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  margin-top: 40px;\n  margin-bottom: 60px;\n  ", " {\n    flex-wrap: wrap;\n    justify-content: center;\n    row-gap: 45px;\n  }\n"])), function (_ref2) {
+var StepsWrapper = styledComponents.styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  margin-top: 40px;\n  margin-bottom: 60px;\n  ", " {\n    flex-wrap: wrap;\n    justify-content: center;\n    row-gap: 45px;\n  }\n"])), function (_ref2) {
   var theme = _ref2.theme;
   return theme.mediaQueries.desktop;
 });
-var SpacePadTierSystem = styled(Text)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  text-align: center;\n  width: 100%;\n  margin-top: 170px;\n  ", " {\n    font-size: 26px;\n    width: 181px;\n    margin: 0 auto;\n    margin-top: 170px;\n  }\n"])), function (_ref3) {
+var SpacePadTierSystem = styledComponents.styled(Text)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  text-align: center;\n  width: 100%;\n  margin-top: 170px;\n  ", " {\n    font-size: 26px;\n    width: 181px;\n    margin: 0 auto;\n    margin-top: 170px;\n  }\n"])), function (_ref3) {
   var theme = _ref3.theme;
   return theme.mediaQueries.mobile;
 });
-var SpacePadTierSystemDescription = styled(Text)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  width: 630px;\n  margin: 0 auto;\n  color: rgba(255, 255, 255, 0.55);\n  text-align: center;\n  margin-bottom: 30px;\n  @media screen and (max-width: 760px) {\n    width: 320px;\n  }\n"])));
-var TiersWrapper = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  gap: 30px;\n  @media screen and (max-width: 1180px) {\n    flex-direction: column;\n    align-items: center;\n  }\n"])));
-var RightTiersColumn = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: flex-end;\n  max-width: 730px;\n  gap: 30px;\n  @media screen and (max-width: 1180px) {\n    flex-direction: column;\n    justify-content: center;\n  }\n"])));
-var VerticalSeparator = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  border-left: 1px solid #12ffb8;\n  height: 60px;\n  position: absolute;\n  left: 50%;\n"])));
+var SpacePadTierSystemDescription = styledComponents.styled(Text)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  width: 630px;\n  margin: 0 auto;\n  color: rgba(255, 255, 255, 0.55);\n  text-align: center;\n  margin-bottom: 30px;\n  @media screen and (max-width: 760px) {\n    width: 320px;\n  }\n"])));
+var TiersWrapper = styledComponents.styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  gap: 30px;\n  @media screen and (max-width: 1180px) {\n    flex-direction: column;\n    align-items: center;\n  }\n"])));
+var RightTiersColumn = styledComponents.styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: flex-end;\n  max-width: 730px;\n  gap: 30px;\n  @media screen and (max-width: 1180px) {\n    flex-direction: column;\n    justify-content: center;\n  }\n"])));
+var VerticalSeparator = styledComponents.styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  border-left: 1px solid #12ffb8;\n  height: 60px;\n  position: absolute;\n  left: 50%;\n"])));
 var IdoInfoDescription = function IdoInfoDescription(_ref4) {
   var idoSteps = _ref4.idoSteps,
     tiers = _ref4.tiers;
@@ -18898,7 +18898,7 @@ var IdoInfoDescription = function IdoInfoDescription(_ref4) {
 };
 
 var _templateObject;
-var ResetCSS = styled.createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  /* prettier-ignore */\n  html, body, div, span, applet, object, iframe,\n  h1, h2, h3, h4, h5, h6, p, blockquote, pre,\n  a, abbr, acronym, address, big, cite, code,\n  del, dfn, em, img, ins, kbd, q, s, samp,\n  small, strike, strong, sub, sup, tt, var,\n  b, u, i, center,\n  dl, dt, dd, ol, ul, li,\n  fieldset, form, label, legend,\n  table, caption, tbody, tfoot, thead, tr, th, td,\n  article, aside, canvas, details, embed, \n  figure, figcaption, footer, header, hgroup, \n  menu, nav, output, ruby, section, summary,\n  time, mark, audio, video {\n    margin: 0;\n    padding: 0;\n    border: 0;\n    font-size: 100%;\n    vertical-align: baseline;\n  }\n  /* HTML5 display-role reset for older browsers */\n  /* prettier-ignore */\n  article, aside, details, figcaption, figure, \n  footer, header, hgroup, menu, nav, section {\n    display: block;\n  }\n  body {\n    line-height: 1;\n    font-size: 16px;\n  }\n  ol,\n  ul {\n    list-style: disc;\n    list-style-position: inside;\n  }\n  blockquote,\n  q {\n    quotes: none;\n  }\n  blockquote:before,\n  blockquote:after,\n  q:before,\n  q:after {\n    content: \"\";\n    content: none;\n  }\n  table {\n    border-collapse: collapse;\n    border-spacing: 0;\n  }\n  a {\n    color: inherit;\n    text-decoration: none;\n  }\n  [role=\"button\"] {\n    cursor: pointer;\n  }\n  *,\n  *::before,\n  *::after {\n    box-sizing: border-box;\n  }\n  * {\n    font-family: 'Manrope', sans-serif;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n  /* Scrollbar */\n  ::-webkit-scrollbar {\n    width: 7px;\n  }\n  ::-webkit-scrollbar-thumb {\n    background: ", "; \n    border-radius: 8px;\n  }\n  ::-webkit-scrollbar-track {\n    box-shadow: inset 0 0 5px ", "; \n    border-radius: 10px;\n  }\n"])), function (_ref) {
+var ResetCSS = styledComponents.createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  /* prettier-ignore */\n  html, body, div, span, applet, object, iframe,\n  h1, h2, h3, h4, h5, h6, p, blockquote, pre,\n  a, abbr, acronym, address, big, cite, code,\n  del, dfn, em, img, ins, kbd, q, s, samp,\n  small, strike, strong, sub, sup, tt, var,\n  b, u, i, center,\n  dl, dt, dd, ol, ul, li,\n  fieldset, form, label, legend,\n  table, caption, tbody, tfoot, thead, tr, th, td,\n  article, aside, canvas, details, embed, \n  figure, figcaption, footer, header, hgroup, \n  menu, nav, output, ruby, section, summary,\n  time, mark, audio, video {\n    margin: 0;\n    padding: 0;\n    border: 0;\n    font-size: 100%;\n    vertical-align: baseline;\n  }\n  /* HTML5 display-role reset for older browsers */\n  /* prettier-ignore */\n  article, aside, details, figcaption, figure, \n  footer, header, hgroup, menu, nav, section {\n    display: block;\n  }\n  body {\n    line-height: 1;\n    font-size: 16px;\n  }\n  ol,\n  ul {\n    list-style: disc;\n    list-style-position: inside;\n  }\n  blockquote,\n  q {\n    quotes: none;\n  }\n  blockquote:before,\n  blockquote:after,\n  q:before,\n  q:after {\n    content: \"\";\n    content: none;\n  }\n  table {\n    border-collapse: collapse;\n    border-spacing: 0;\n  }\n  a {\n    color: inherit;\n    text-decoration: none;\n  }\n  [role=\"button\"] {\n    cursor: pointer;\n  }\n  *,\n  *::before,\n  *::after {\n    box-sizing: border-box;\n  }\n  * {\n    font-family: 'Manrope', sans-serif;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n  /* Scrollbar */\n  ::-webkit-scrollbar {\n    width: 7px;\n  }\n  ::-webkit-scrollbar-thumb {\n    background: ", "; \n    border-radius: 8px;\n  }\n  ::-webkit-scrollbar-track {\n    box-shadow: inset 0 0 5px ", "; \n    border-radius: 10px;\n  }\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.colors.primary;
 }, function (_ref2) {