@coinswap-app/uikit 1.0.6 → 1.0.8

package/dist/index.esm.js

@@ -311,26 +311,33 @@ var getThemeValue = function getThemeValue(path, fallback) {
 var _templateObject$2b, _templateObject2$16, _templateObject3$O;
 var rotate$1 = keyframes(_templateObject$2b || (_templateObject$2b = _taggedTemplateLiteral(["\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n"])));
 var spinStyle = 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 Svg = styled("svg").withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !['$spin', '$opac'].includes(prop);
+  }
+})(_templateObject3$O || (_templateObject3$O = _taggedTemplateLiteral(["\n  fill: ", ";\n  flex-shrink: 0;\n  width: ", ";\n  xmlns: ", ";\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;
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? "text" : _ref$color;
   return getThemeValue("colors.".concat(color), color)(theme);
 }, function (_ref2) {
-  var spin = _ref2.spin;
-  return spin && spinStyle;
-}, space, function (_ref3) {
-  var fill = _ref3.fill;
-  return fill;
+  var _ref2$width = _ref2.width,
+    width = _ref2$width === void 0 ? "20px" : _ref2$width;
+  return width;
+}, function (_ref3) {
+  var _ref3$xmlns = _ref3.xmlns,
+    xmlns = _ref3$xmlns === void 0 ? "http://www.w3.org/2000/svg" : _ref3$xmlns;
+  return xmlns;
 }, function (_ref4) {
-  var opac = _ref4.opac;
-  return opac ? 1 : 0.5;
+  var $spin = _ref4.$spin;
+  return $spin && spinStyle;
+}, space, function (_ref5) {
+  var fill = _ref5.fill;
+  return fill;
+}, function (_ref6) {
+  var $opac = _ref6.$opac;
+  return $opac ? 1 : 0.5;
 });
-Svg.defaultProps = {
-  color: "text",
-  width: "20px",
-  xmlns: "http://www.w3.org/2000/svg",
-  spin: false
-};
 
 var Icon$2H = function Icon(props) {
   return /*#__PURE__*/jsx(Svg, _objectSpread2(_objectSpread2({
@@ -387,20 +394,21 @@ var getColor$1 = function getColor(_ref) {
 };
 var getFontSize = function getFontSize(_ref2) {
   var fontSize = _ref2.fontSize,
-    small = _ref2.small;
-  return small ? "14px" : fontSize || "16px";
+    $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 bold = _ref3.bold;
-  return bold ? 700 : 400;
+var Text = styled.div.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !['$bold', '$small'].includes(prop);
+  }
+})(_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,
+    bold = _ref3.bold;
+  return $bold || bold ? 700 : 400;
 }, function (_ref4) {
   var textTransform = _ref4.textTransform;
   return textTransform && "text-transform: ".concat(textTransform, ";");
 }, space, typography);
-Text.defaultProps = {
-  color: "text",
-  small: false
-};
 
 var getExternalLinkProps = function getExternalLinkProps() {
   return {
@@ -442,9 +450,9 @@ var variants$4 = {
 
 var _templateObject$29;
 var getDisabledStyles$3 = function getDisabledStyles(_ref) {
-  var isLoading = _ref.isLoading,
+  var $isLoading = _ref.$isLoading,
     theme = _ref.theme;
-  if (isLoading === true) {
+  if ($isLoading === true) {
     return "\n      &:disabled,\n      &.button--disabled {\n        cursor: not-allowed;\n      }\n    ";
   }
   return "\n    &:disabled,\n    &.button--disabled {\n      background-color: ".concat(theme.colors.backgroundDisabled, ";\n      border-color: ").concat(theme.colors.backgroundDisabled, ";\n      box-shadow: none;\n      color: ").concat(theme.colors.textDisabled, ";\n      cursor: not-allowed;\n    }\n  ");
@@ -465,12 +473,17 @@ 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 white = _ref4.white;
-  return white ? "white" : getButtonVariantProp$3("color");
+var StyledButton$2 = styled.button.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !['$fullWidth', '$isLoading', '$white'].includes(prop);
+  }
+})(_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) {
-  var fullWidth = _ref5.fullWidth;
-  return fullWidth ? "100%" : "max-content";
+  var _ref5$$fullWidth = _ref5.$fullWidth,
+    $fullWidth = _ref5$$fullWidth === void 0 ? false : _ref5$$fullWidth;
+  return $fullWidth ? "100%" : "max-content";
 }, function (_ref6) {
   var size = _ref6.size;
   return size === "sm" ? "32px" : "40px";
@@ -478,49 +491,51 @@ var StyledButton$2 = styled.button(_templateObject$29 || (_templateObject$29 = _
   var size = _ref7.size;
   return size === "sm" ? "0 16px" : "0 24px";
 }, function (_ref8) {
-  var isLoading = _ref8.isLoading;
-  return isLoading ? 0.5 : 1;
+  var _ref8$$isLoading = _ref8.$isLoading,
+    $isLoading = _ref8$$isLoading === void 0 ? false : _ref8$$isLoading;
+  return $isLoading ? 0.5 : 1;
 }, getButtonVariantProp$3("backgroundHover"), getButtonVariantProp$3("borderColorHover"), function (_ref9) {
   var theme = _ref9.theme;
   return theme.colors.secondary;
 }, getButtonVariantProp$3("backgroundActive"), getButtonVariantProp$3("boxShadowActive"), getDisabledStyles$3, removePointerEvents$3, space);
-StyledButton$2.defaultProps = {
-  fullWidth: false,
-  type: "button"
-};
 
-var _excluded$12 = ["startIcon", "style", "endIcon", "children", "external", "isLoading", "disabled", "white"];
-var Button$1 = function Button(_ref) {
+var _excluded$12 = ["startIcon", "style", "endIcon", "children", "external", "$isLoading", "disabled", "$white", "$fullWidth", "fullWidth", "isLoading", "white"];
+var Button$1 = /*#__PURE__*/React__default.forwardRef(function (_ref) {
   var startIcon = _ref.startIcon,
     style = _ref.style,
     endIcon = _ref.endIcon,
     children = _ref.children,
-    external = _ref.external,
-    isLoading = _ref.isLoading,
-    disabled = _ref.disabled,
-    white = _ref.white,
+    _ref$external = _ref.external,
+    external = _ref$external === void 0 ? false : _ref$external,
+    $isLoadingProp = _ref.$isLoading,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    $whiteProp = _ref.$white,
+    $fullWidthProp = _ref.$fullWidth,
+    fullWidthProp = _ref.fullWidth,
+    isLoadingProp = _ref.isLoading,
+    whiteProp = _ref.white,
     props = _objectWithoutProperties(_ref, _excluded$12);
   var internalProps = external ? getExternalLinkProps() : {};
-  var isDisabled = isLoading || disabled;
+  var $isLoading = $isLoadingProp || isLoadingProp || false;
+  var $white = $whiteProp || whiteProp;
+  var $fullWidth = $fullWidthProp || fullWidthProp;
+  var isDisabled = $isLoading || disabled;
   return /*#__PURE__*/jsxs(StyledButton$2, _objectSpread2(_objectSpread2(_objectSpread2({}, internalProps), props), {}, {
-    isLoading: isLoading,
+    $isLoading: $isLoading,
     disabled: isDisabled,
     style: style,
-    white: white,
+    $white: $white,
+    $fullWidth: $fullWidth,
+    type: props.type || "button",
     children: [/*#__PURE__*/React__default.isValidElement(startIcon) && /*#__PURE__*/React__default.cloneElement(startIcon, {
       mr: "0.5rem"
     }), children, /*#__PURE__*/React__default.isValidElement(endIcon) && /*#__PURE__*/React__default.cloneElement(endIcon, {
       ml: "0.5rem"
     })]
   }));
-};
-Button$1.defaultProps = {
-  variant: variants$4.PRIMARY,
-  size: sizes$2.MD,
-  external: false,
-  isLoading: false,
-  disabled: false
-};
+});
+Button$1.displayName = "Button";
 
 var Icon$2D = function Icon(props) {
   return /*#__PURE__*/jsx(Svg, _objectSpread2(_objectSpread2({
@@ -7918,7 +7933,7 @@ var RampButtonLite = function RampButtonLite(_ref2) {
       extended: extended,
       children: children
     }), /*#__PURE__*/jsx(Icon$1l, {
-      opac: true
+      $opac: true
     })]
   });
 };
@@ -7946,9 +7961,9 @@ var RampButton = function RampButton(_ref2) {
     },
     extended: extended,
     children: [/*#__PURE__*/jsx(Icon$1i, {
-      opac: true
+      $opac: true
     }), /*#__PURE__*/jsx(Icon$1h, {
-      opac: true,
+      $opac: true,
       display: extended ? "block" : "none"
     })]
   });
@@ -8393,21 +8408,25 @@ var style = _defineProperty(_defineProperty(_defineProperty(_defineProperty({},
   fontSize: "48px",
   fontSizeLg: "64px"
 });
-var Heading = 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;
-  return style[size || sizes$1.MD].fontSize;
-}, function (_ref2) {
-  var theme = _ref2.theme;
-  return theme.mediaQueries.lg;
+var Heading = styled(Text).attrs(function (_ref) {
+  var _ref$as = _ref.as,
+    as = _ref$as === void 0 ? tags.H2 : _ref$as;
+  return {
+    $bold: true,
+    as: as
+  };
+})(_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 (_ref2) {
+  var _ref2$size = _ref2.size,
+    size = _ref2$size === void 0 ? sizes$1.MD : _ref2$size;
+  return style[size].fontSize;
 }, function (_ref3) {
-  var size = _ref3.size;
-  return style[size || sizes$1.MD].fontSizeLg;
+  var theme = _ref3.theme;
+  return theme.mediaQueries.lg;
+}, function (_ref4) {
+  var _ref4$size = _ref4.size,
+    size = _ref4$size === void 0 ? sizes$1.MD : _ref4$size;
+  return style[size].fontSizeLg;
 });
-Heading.defaultProps = {
-  as: tags.H2
-};
 
 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) {
@@ -8452,7 +8471,7 @@ var Modal = function Modal(_ref4) {
         "aria-label": "Close the dialog",
         children: /*#__PURE__*/jsx(Icon$2j, {
           color: "primary",
-          opac: true
+          $opac: true
         })
       })]
     }), /*#__PURE__*/jsx(Flex, {
@@ -8464,22 +8483,29 @@ var Modal = function Modal(_ref4) {
 };
 
 var _templateObject$1Z;
-var Overlay = 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;
+var Overlay = styled.div.attrs(function (_ref) {
+  var _ref$show = _ref.show,
+    show = _ref$show === void 0 ? false : _ref$show,
+    _ref$zIndex = _ref.zIndex,
+    zIndex = _ref$zIndex === void 0 ? 10 : _ref$zIndex;
+  return {
+    role: "presentation",
+    show: show,
+    zIndex: zIndex
+  };
+})(_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 (_ref2) {
+  var _ref2$show = _ref2.show,
+    show = _ref2$show === void 0 ? false : _ref2$show;
   return show ? 0.6 : 0;
-}, function (_ref2) {
-  var zIndex = _ref2.zIndex;
-  return zIndex;
 }, function (_ref3) {
-  var show = _ref3.show;
+  var _ref3$zIndex = _ref3.zIndex,
+    zIndex = _ref3$zIndex === void 0 ? 10 : _ref3$zIndex;
+  return zIndex;
+}, function (_ref4) {
+  var _ref4$show = _ref4.show,
+    show = _ref4$show === void 0 ? false : _ref4$show;
   return show ? "initial" : "none";
 });
-Overlay.defaultProps = {
-  show: false,
-  zIndex: 10
-};
 
 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) {
@@ -8824,7 +8850,7 @@ var WalletCard = function WalletCard(_ref) {
     _useCookies2[0];
     _useCookies2[1];
   return /*#__PURE__*/jsxs(Button$1, {
-    fullWidth: true,
+    $fullWidth: true,
     variant: buttonVariant.OUTLINE,
     onClick: function onClick() {
       login(walletConfig.connectorId, title);
@@ -8842,7 +8868,7 @@ var WalletCard = function WalletCard(_ref) {
       children: title
     }), /*#__PURE__*/jsx(Icon, {
       width: "20px",
-      opac: true
+      $opac: true
     })]
   });
 };
@@ -8873,21 +8899,23 @@ var ConnectModal = function ConnectModal(_ref) {
   });
 };
 
-var _excluded$p = ["external"];
+var _excluded$p = ["external", "color"];
 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 Link = function Link(_ref) {
+var Link = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var external = _ref.external,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? "primary" : _ref$color,
     props = _objectWithoutProperties(_ref, _excluded$p);
   var internalProps = external ? getExternalLinkProps() : {};
   return /*#__PURE__*/jsx(StyledLink$1, _objectSpread2(_objectSpread2({
+    ref: ref,
     as: "a",
-    bold: true
+    bold: true,
+    color: color
   }, internalProps), props));
-};
-Link.defaultProps = {
-  color: "primary"
-};
+});
+Link.displayName = "Link";
 
 var _excluded$o = ["children"];
 var LinkExternal = function LinkExternal(_ref) {
@@ -8900,7 +8928,7 @@ var LinkExternal = function LinkExternal(_ref) {
       color: "primary",
       ml: "10px",
       width: 15,
-      opac: true
+      $opac: true
     })]
   }));
 };
@@ -9465,7 +9493,11 @@ 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 = styled.button.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !['variant', 'isLoading', 'fullWidth', 'lined', 'active', 'isActive'].includes(prop);
+  }
+})(_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) {
@@ -9493,10 +9525,6 @@ var StyledButton$1 = styled.button(_templateObject$1R || (_templateObject$1R = _
   var theme = _ref10.theme;
   return theme.colors.primary;
 }, getDisabledStyles$2, removePointerEvents$2, space);
-StyledButton$1.defaultProps = {
-  fullWidth: false,
-  type: "button"
-};
 
 var _excluded$m = ["startIcon", "style", "endIcon", "children", "external", "isLoading", "disabled", "lined"];
 var Button = function Button(_ref) {
@@ -9504,18 +9532,19 @@ var Button = function Button(_ref) {
     style = _ref.style,
     endIcon = _ref.endIcon,
     children = _ref.children,
-    external = _ref.external,
-    isLoading = _ref.isLoading,
-    disabled = _ref.disabled,
-    lined = _ref.lined,
-    props = _objectWithoutProperties(_ref, _excluded$m);
+    _ref$external = _ref.external,
+    external = _ref$external === void 0 ? false : _ref$external,
+    _ref$isLoading = _ref.isLoading,
+    isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled;
+    _ref.lined;
+    var props = _objectWithoutProperties(_ref, _excluded$m);
   var internalProps = external ? getExternalLinkProps() : {};
   var isDisabled = isLoading || disabled;
   return /*#__PURE__*/jsxs(StyledButton$1, _objectSpread2(_objectSpread2(_objectSpread2({}, internalProps), props), {}, {
-    isLoading: isLoading,
     disabled: isDisabled,
     style: style,
-    lined: lined,
     children: [/*#__PURE__*/React__default.isValidElement(startIcon) && /*#__PURE__*/React__default.cloneElement(startIcon, {
       mr: "0.5rem"
     }), children, /*#__PURE__*/React__default.isValidElement(endIcon) && /*#__PURE__*/React__default.cloneElement(endIcon, {
@@ -9525,13 +9554,6 @@ var Button = function Button(_ref) {
     })]
   }));
 };
-Button.defaultProps = {
-  variant: variants$2.PRIMARY,
-  size: sizes.MD,
-  external: false,
-  isLoading: false,
-  disabled: false
-};
 
 var getColor = function getColor(color, theme) {
   return getThemeValue("colors.".concat(color), color)(theme);
@@ -9558,11 +9580,16 @@ var StyledTag = styled.div(_templateObject$1Q || (_templateObject$1Q = _taggedTe
   return getColor(variant, theme);
 }, getThemeTextColor, getThemeTextColor);
 
-var _excluded$l = ["isActive", "size", "variant", "as", "children", "tag", "hide"];
+var _excluded$l = ["isActive", "size", "variant", "as", "children", "tag", "hide"],
+  _excluded2$1 = ["isActive"];
 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 InactiveButton$1 = styled(Button).withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return prop !== 'colorKey' && prop !== 'isActive';
+  }
+})(_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,
@@ -9575,13 +9602,16 @@ var ButtonMenuItem = function ButtonMenuItem(_ref) {
     tag = _ref.tag,
     hide = _ref.hide,
     props = _objectWithoutProperties(_ref, _excluded$l);
+  // Remove isActive from props to prevent it from being passed to DOM
+  props.isActive;
+    var buttonProps = _objectWithoutProperties(props, _excluded2$1);
   if (!isActive) {
     return /*#__PURE__*/jsx(InactiveButton$1, _objectSpread2(_objectSpread2({
       forwardedAs: as,
       size: size,
       variant: "tertiary",
       colorKey: variant === variants$2.PRIMARY ? "primary" : "textSubtle"
-    }, props), {}, {
+    }, buttonProps), {}, {
       style: {
         display: hide ? "none" : "flex"
       },
@@ -9597,7 +9627,7 @@ var ButtonMenuItem = function ButtonMenuItem(_ref) {
     as: as,
     size: size,
     variant: variant
-  }, props), {}, {
+  }, buttonProps), {}, {
     style: {
       display: hide ? "none" : "flex"
     },
@@ -9672,10 +9702,6 @@ var StyledButtonActivity = styled.button(_templateObject$1N || (_templateObject$
   var size = _ref6.size;
   return size === "sm" ? "0 16px" : "0 24px";
 }, getButtonVariantProp$1("borderColorHover"), getDisabledStyles$1, removePointerEvents$1, space);
-StyledButtonActivity.defaultProps = {
-  fullWidth: false,
-  type: "button"
-};
 
 var _excluded$k = ["startIcon", "style", "endIcon", "children", "external", "isLoading", "disabled"];
 var ButtonActivity = function ButtonActivity(_ref) {
@@ -9683,9 +9709,12 @@ var ButtonActivity = function ButtonActivity(_ref) {
     style = _ref.style,
     endIcon = _ref.endIcon,
     children = _ref.children,
-    external = _ref.external,
-    isLoading = _ref.isLoading,
-    disabled = _ref.disabled,
+    _ref$external = _ref.external,
+    external = _ref$external === void 0 ? false : _ref$external,
+    _ref$isLoading = _ref.isLoading,
+    isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     props = _objectWithoutProperties(_ref, _excluded$k);
   var internalProps = external ? getExternalLinkProps() : {};
   var isDisabled = isLoading || disabled;
@@ -9700,13 +9729,6 @@ var ButtonActivity = function ButtonActivity(_ref) {
     })]
   }));
 };
-ButtonActivity.defaultProps = {
-  variant: variants$2.PRIMARY,
-  size: sizes.MD,
-  external: false,
-  isLoading: false,
-  disabled: false
-};
 
 var _excluded$j = ["isActive", "size", "variant", "as"];
 var _templateObject$1M;
@@ -9775,10 +9797,6 @@ var StyledButtonSwitch = styled.button(_templateObject$1L || (_templateObject$1L
     active = _ref7.active;
   return active ? theme.colors.primary : theme.colors.grey;
 }, getDisabledStyles, removePointerEvents, space);
-StyledButtonSwitch.defaultProps = {
-  fullWidth: false,
-  type: "button"
-};
 
 var _excluded$i = ["style", "children", "isLoading", "disabled", "active"];
 var ButtonSwitch = function ButtonSwitch(_ref) {
@@ -9828,7 +9846,8 @@ var StyledToggle = styled.div(_templateObject3$K || (_templateObject3$K = _tagge
 var _excluded$h = ["checked", "variant"];
 var Toggle$1 = function Toggle(_ref) {
   var checked = _ref.checked,
-    variant = _ref.variant,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? variants$1.PANEL : _ref$variant,
     props = _objectWithoutProperties(_ref, _excluded$h);
   var isChecked = !!checked;
   var disabled = props.disabled,
@@ -9848,9 +9867,6 @@ var Toggle$1 = function Toggle(_ref) {
     })]
   }));
 };
-Toggle$1.defaultProps = {
-  variant: variants$1.PANEL
-};
 
 var _excluded$g = ["onClick", "active"];
 var ButtonSwitchMenuItem = function ButtonSwitchMenuItem(_ref) {
@@ -9906,22 +9922,32 @@ var _templateObject$1I;
  * Priority: Warning --> Success --> Active
  */
 var getBoxShadow$2 = function getBoxShadow(_ref) {
-  var isActive = _ref.isActive,
+  var $isActive = _ref.$isActive,
+    isActive = _ref.isActive,
+    $isSuccess = _ref.$isSuccess,
     isSuccess = _ref.isSuccess,
+    $isWarning = _ref.$isWarning,
     isWarning = _ref.isWarning,
     theme = _ref.theme;
-  if (isWarning) {
+  var isWarningValue = $isWarning || isWarning;
+  var isSuccessValue = $isSuccess || isSuccess;
+  var isActiveValue = $isActive || isActive;
+  if (isWarningValue) {
     return theme.card.boxShadowWarning;
   }
-  if (isSuccess) {
+  if (isSuccessValue) {
     return theme.card.boxShadowSuccess;
   }
-  if (isActive) {
+  if (isActiveValue) {
     return theme.card.boxShadowActive;
   }
   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 = styled.div.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !['$isActive', '$isSuccess', '$isWarning', '$isDisabled'].includes(prop);
+  }
+})(_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) {
@@ -9929,15 +9955,10 @@ var StyledCard = styled.div(_templateObject$1I || (_templateObject$1I = _taggedT
   return theme.colors.white7;
 }, getBoxShadow$2, function (_ref4) {
   var theme = _ref4.theme,
+    $isDisabled = _ref4.$isDisabled,
     isDisabled = _ref4.isDisabled;
-  return theme.colors[isDisabled ? "textDisabled" : "text"];
+  return theme.colors[$isDisabled || isDisabled ? "textDisabled" : "text"];
 }, space);
-StyledCard.defaultProps = {
-  isActive: false,
-  isSuccess: false,
-  isWarning: false,
-  isDisabled: false
-};
 
 var _excluded$f = ["ribbon", "children"];
 var Card = function Card(_ref) {
@@ -9950,20 +9971,25 @@ 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"])), space);
-CardBody.defaultProps = {
-  p: "24px"
-};
+var CardBody = styled.div.attrs(function (_ref) {
+  var _ref$p = _ref.p,
+    p = _ref$p === void 0 ? "24px" : _ref$p;
+  return {
+    p: p
+  };
+})(_templateObject$1H || (_templateObject$1H = _taggedTemplateLiteral(["\n  ", "\n  display: flex;\n  justify-content: center;\n"])), space);
 
 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"])), space);
-CardHeader.defaultProps = {};
 
 var _templateObject$1F;
-var CardFooter = styled.div(_templateObject$1F || (_templateObject$1F = _taggedTemplateLiteral(["\n  ", "\n  display: flex;\n  justify-content: center;\n"])), space);
-CardFooter.defaultProps = {
-  p: "24px"
-};
+var CardFooter = styled.div.attrs(function (_ref) {
+  var _ref$p = _ref.p,
+    p = _ref$p === void 0 ? "24px" : _ref$p;
+  return {
+    p: p
+  };
+})(_templateObject$1F || (_templateObject$1F = _taggedTemplateLiteral(["\n  ", "\n  display: flex;\n  justify-content: center;\n"])), space);
 
 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) {
@@ -10032,9 +10058,6 @@ var Checkbox = styled.input.attrs({
   var bordered = _ref9.bordered;
   return bordered ? "none !important" : "";
 });
-Checkbox.defaultProps = {
-  scale: scales$2.MD
-};
 
 var _templateObject$1C, _templateObject2$X;
 var getLeft = function getLeft(_ref) {
@@ -10077,9 +10100,6 @@ var Dropdown = function Dropdown(_ref7) {
     })]
   });
 };
-Dropdown.defaultProps = {
-  position: "bottom"
-};
 
 var _excluded$e = ["tokenName", "amount", "tokenIcon", "actions"];
 var _templateObject$1B, _templateObject2$W, _templateObject3$J, _templateObject4$w, _templateObject5$t, _templateObject6$j, _templateObject7$f;
@@ -10207,16 +10227,19 @@ 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 theme = _ref.theme;
-  return theme.colors.white;
-}, function (_ref2) {
+var EarnedWrapperHeader = styled.div.attrs(function (_ref) {
+  var _ref$as = _ref.as,
+    as = _ref$as === void 0 ? tags.H2 : _ref$as;
+  return {
+    as: as
+  };
+})(_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 (_ref2) {
   var theme = _ref2.theme;
+  return theme.colors.white;
+}, function (_ref3) {
+  var theme = _ref3.theme;
   return theme.mediaQueries.md;
 });
-EarnedWrapperHeader.defaultProps = {
-  as: tags.H2
-};
 
 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) {
@@ -10352,16 +10375,19 @@ 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 theme = _ref.theme;
-  return theme.colors.white;
-}, function (_ref2) {
+var EarnedCarouselWrapperHeader = styled.div.attrs(function (_ref) {
+  var _ref$as = _ref.as,
+    as = _ref$as === void 0 ? tags.H2 : _ref$as;
+  return {
+    as: as
+  };
+})(_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 (_ref2) {
   var theme = _ref2.theme;
+  return theme.colors.white;
+}, function (_ref3) {
+  var theme = _ref3.theme;
   return theme.mediaQueries.md;
 });
-EarnedCarouselWrapperHeader.defaultProps = {
-  as: tags.H2
-};
 
 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"])));
@@ -10563,10 +10589,6 @@ var StyledInfoBox = styled.div(_templateObject$1s || (_templateObject$1s = _tagg
   var theme = _ref3.theme;
   return theme.colors.text;
 }, space);
-StyledInfoBox.defaultProps = {
-  isActive: false,
-  isWarning: false
-};
 
 var _excluded$a = ["children"];
 var InfoBox$1 = function InfoBox(_ref) {
@@ -10578,20 +10600,25 @@ 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"])), space);
-InfoBox.defaultProps = {
-  p: "24px"
-};
+var InfoBox = styled.div.attrs(function (_ref) {
+  var _ref$p = _ref.p,
+    p = _ref$p === void 0 ? "24px" : _ref$p;
+  return {
+    p: p
+  };
+})(_templateObject$1r || (_templateObject$1r = _taggedTemplateLiteral(["\n  ", ";\n  padding: 20px;\n  display: flex;\n  justify-content: flex-start;\n"])), space);
 
 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"])), 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"])), space);
-InfoBoxFooter.defaultProps = {
-  p: "24px"
-};
+var InfoBoxFooter = styled.div.attrs(function (_ref) {
+  var _ref$p = _ref.p,
+    p = _ref$p === void 0 ? "24px" : _ref$p;
+  return {
+    p: p
+  };
+})(_templateObject$1p || (_templateObject$1p = _taggedTemplateLiteral(["\n  ", ";\n  padding: 20px;\n  display: flex;\n  justify-content: flex-start;\n"])), space);
 
 var scales$1 = {
   SM: "sm",
@@ -10649,11 +10676,6 @@ var Input = styled.input(_templateObject$1o || (_templateObject$1o = _taggedTemp
   var theme = _ref8.theme;
   return theme.shadows.focus;
 });
-Input.defaultProps = {
-  scale: scales$1.MD,
-  isSuccess: false,
-  isWarning: false
-};
 
 var _excluded$9 = ["children"],
   _excluded2 = ["children"],
@@ -11010,7 +11032,7 @@ var MuiTextInput = function MuiTextInput(_ref11) {
             fill: theme.colors.error,
             width: 24,
             height: 24,
-            opac: true
+            $opac: true
           }) : success && /*#__PURE__*/jsx(Icon$1b, {})
         }
         /* eslint-disable-next-line react/jsx-no-duplicate-props */,
@@ -11100,39 +11122,49 @@ var getCheckedScale = function getCheckedScale(_ref2) {
       return "20px";
   }
 };
-var Radio = 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;
-  return theme.colors.input;
-}, function (_ref4) {
+var Radio = styled.input.attrs(function (_ref3) {
+  var _ref3$scale = _ref3.scale,
+    scale = _ref3$scale === void 0 ? scales.MD : _ref3$scale,
+    _ref3$m = _ref3.m,
+    m = _ref3$m === void 0 ? 0 : _ref3$m;
+  return {
+    type: "radio",
+    scale: scale,
+    m: m
+  };
+})(_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 (_ref4) {
   var theme = _ref4.theme;
-  return theme.shadows.inset;
-}, getCheckedScale, getCheckedScale, function (_ref5) {
+  return theme.colors.input;
+}, function (_ref5) {
   var theme = _ref5.theme;
-  return theme.shadows.focus;
-}, function (_ref6) {
+  return theme.shadows.inset;
+}, getCheckedScale, getCheckedScale, function (_ref6) {
   var theme = _ref6.theme;
   return theme.shadows.focus;
 }, function (_ref7) {
   var theme = _ref7.theme;
-  return theme.colors.success;
+  return theme.shadows.focus;
 }, function (_ref8) {
   var theme = _ref8.theme;
+  return theme.colors.success;
+}, function (_ref9) {
+  var theme = _ref9.theme;
   return theme.radio.handleBackground;
 }, space);
-Radio.defaultProps = {
-  scale: scales.MD,
-  m: 0
-};
 
-var _excluded$7 = ["startIcon", "endIcon", "children"];
+var _excluded$7 = ["startIcon", "endIcon", "children", "variant", "outline"];
 var Tag = function Tag(_ref) {
   var startIcon = _ref.startIcon,
     endIcon = _ref.endIcon,
     children = _ref.children,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? "primary" : _ref$variant,
+    _ref$outline = _ref.outline,
+    outline = _ref$outline === void 0 ? false : _ref$outline,
     props = _objectWithoutProperties(_ref, _excluded$7);
   return /*#__PURE__*/jsxs(StyledTag, _objectSpread2(_objectSpread2({}, props), {}, {
+    variant: variant,
+    outline: outline,
     children: [/*#__PURE__*/React__default.isValidElement(startIcon) && /*#__PURE__*/React__default.cloneElement(startIcon, {
       mr: "0.5rem"
     }), children, /*#__PURE__*/React__default.isValidElement(endIcon) && /*#__PURE__*/React__default.cloneElement(endIcon, {
@@ -11140,10 +11172,6 @@ var Tag = function Tag(_ref) {
     })]
   }));
 };
-Tag.defaultProps = {
-  variant: "primary",
-  outline: false
-};
 
 var tagVariant;
 (function (tagVariant) {
@@ -11281,7 +11309,7 @@ var getTagPropsByVariant = function getTagPropsByVariant(variant, active, theme)
       return {
         color: theme.colors.lightBlue,
         icon: /*#__PURE__*/jsx(Icon$2p, {
-          opac: true,
+          $opac: true,
           fill: active ? theme.colors.lightBlue : theme.colors.grey
         })
       };
@@ -11289,7 +11317,7 @@ var getTagPropsByVariant = function getTagPropsByVariant(variant, active, theme)
       return {
         color: brandColors.binance,
         icon: /*#__PURE__*/jsx(Icon$2p, {
-          opac: true,
+          $opac: true,
           fill: active ? brandColors.binance : theme.colors.grey
         })
       };
@@ -11297,7 +11325,7 @@ var getTagPropsByVariant = function getTagPropsByVariant(variant, active, theme)
       return {
         color: theme.colors.vividBlue,
         icon: /*#__PURE__*/jsx(Icon$1a, {
-          opac: true,
+          $opac: true,
           stroke: active ? theme.colors.vividBlue : theme.colors.grey
         })
       };
@@ -11305,7 +11333,7 @@ var getTagPropsByVariant = function getTagPropsByVariant(variant, active, theme)
       return {
         color: theme.colors.primary,
         icon: /*#__PURE__*/jsx(Icon$2p, {
-          opac: true,
+          $opac: true,
           fill: active ? theme.colors.primary : theme.colors.grey
         })
       };
@@ -11331,10 +11359,6 @@ var CoreTag = function CoreTag(_ref8) {
     })]
   });
 };
-CoreTag.defaultProps = {
-  variant: "primary",
-  outline: false
-};
 
 var Icon$M = function Icon(props) {
   return /*#__PURE__*/jsx(Svg, _objectSpread2(_objectSpread2({
@@ -11448,11 +11472,9 @@ 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) {
-  return props.primary ? props.theme.colors.secondary : "".concat(props.theme.colors.secondary, "80");
+  var _props$primary;
+  return ((_props$primary = props.primary) !== null && _props$primary !== void 0 ? _props$primary : false) ? 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 theme = _ref.theme;
   return theme.colors.input;
@@ -12318,10 +12340,10 @@ var TableRow = function TableRow(_ref9) {
         },
         children: active ? /*#__PURE__*/jsx(Icon$2l, {
           fill: darkColors.primary,
-          opac: true
+          $opac: true
         }) : /*#__PURE__*/jsx(Icon$2o, {
           fill: baseColors.white55,
-          opac: true
+          $opac: true
         })
       })]
     }), active ? /*#__PURE__*/jsx(StyledTableDetails, {
@@ -12515,10 +12537,10 @@ var ValueFull = function ValueFull(_ref) {
     children: [/*#__PURE__*/jsxs(DifferenceBox, {
       children: [!_.isNil(difference) && (difference > 0 ? /*#__PURE__*/jsx(Icon$2l, {
         fill: baseColors.green,
-        opac: true
+        $opac: true
       }) : /*#__PURE__*/jsx(Icon$2o, {
         fill: baseColors.red,
-        opac: true
+        $opac: true
       })), /*#__PURE__*/jsx(Text, {
         style: {
           fontSize: "16px",
@@ -13119,7 +13141,7 @@ var ProviderRow = function ProviderRow(_ref4) {
     isTheLastItem: isTheLastItem,
     children: [/*#__PURE__*/jsx(Icon, {
       width: "40px",
-      opac: true
+      $opac: true
     }), /*#__PURE__*/jsx(ProviderTitle, {
       children: title
     })]
@@ -13227,7 +13249,7 @@ var ConnectWallet = function ConnectWallet(_ref2) {
           isUserVerified: isUserVerified,
           textAlign: "right",
           children: [isUserVerified && /*#__PURE__*/jsx(VerifiedWalletIcon, {
-            opac: true
+            $opac: true
           }), /*#__PURE__*/jsx(AccountNumber, {
             bold: true,
             fontSize: "14px",
@@ -13242,7 +13264,7 @@ var ConnectWallet = function ConnectWallet(_ref2) {
         children: [isUserVerified && /*#__PURE__*/jsxs(VerificationInfo, {
           marginTop: "20px",
           children: [/*#__PURE__*/jsx(VerifiedWalletIcon, {
-            opac: true
+            $opac: true
           }), /*#__PURE__*/jsx(Text, {
             color: "#818C92",
             children: "Wallet connection has been verified"
@@ -13250,7 +13272,7 @@ var ConnectWallet = function ConnectWallet(_ref2) {
         }), connectedProvider && /*#__PURE__*/jsxs(ConnectedProvider, {
           children: [/*#__PURE__*/jsx(connectedProvider.icon, {
             width: "40px",
-            opac: true
+            $opac: true
           }), /*#__PURE__*/jsx(ProviderTitle, {
             children: connectedProvider.title
           })]
@@ -13338,7 +13360,7 @@ var VerifiedWallet = function VerifiedWallet(_ref) {
         }), /*#__PURE__*/jsxs(AccountNumberWrapper, {
           isVerifiedUser: true,
           children: [/*#__PURE__*/jsx(VerifiedWalletIcon, {
-            opac: true
+            $opac: true
           }), /*#__PURE__*/jsx(AccountNumber, {
             bold: true,
             fontSize: "14px",
@@ -13348,7 +13370,7 @@ var VerifiedWallet = function VerifiedWallet(_ref) {
       }), /*#__PURE__*/jsxs(MiddleRow, {
         children: [/*#__PURE__*/jsxs(VerificationInfo, {
           children: [/*#__PURE__*/jsx(VerifiedWalletIcon, {
-            opac: true
+            $opac: true
           }), /*#__PURE__*/jsx(Text, {
             color: "#818C92",
             children: "Wallet connection has been verified"
@@ -13356,7 +13378,7 @@ var VerifiedWallet = function VerifiedWallet(_ref) {
         }), connectedProvider && /*#__PURE__*/jsxs(ConnectedProvider, {
           children: [connectedProvider && /*#__PURE__*/jsx(connectedProvider.icon, {
             width: "40px",
-            opac: true
+            $opac: true
           }), /*#__PURE__*/jsx(ProviderTitle, {
             children: connectedProvider.title
           })]
@@ -14118,7 +14140,7 @@ var CSSPower = function CSSPower(_ref7) {
           right: 30,
           children: /*#__PURE__*/jsx(StyledInfoIcon, {
             fill: baseColors.primary,
-            opac: true
+            $opac: true
           })
         })]
       }), /*#__PURE__*/jsx(CSSPowerValue, {
@@ -14547,7 +14569,7 @@ var AddToCap = function AddToCap(_ref18) {
       children: [isSigned ? /*#__PURE__*/jsx(Icon$1_, {
         color: baseColors.primary
       }) : /*#__PURE__*/jsx(Icon$1Z, {
-        opac: true
+        $opac: true
       }), /*#__PURE__*/jsx(Text, {
         ml: "16px",
         bold: true,
@@ -14596,7 +14618,7 @@ var AddToCap = function AddToCap(_ref18) {
         },
         disabled: !eligible || actionPending || buttonDisabled,
         endIcon: actionPending && /*#__PURE__*/jsx(Icon$2v, {
-          spin: true,
+          $spin: true,
           color: "currentColor"
         }),
         children: getActionButtonText()
@@ -14691,7 +14713,7 @@ var AddToCap = function AddToCap(_ref18) {
           right: 30,
           children: /*#__PURE__*/jsx(StyledInfoIcon, {
             fill: baseColors.primary,
-            opac: true
+            $opac: true
           })
         })]
       }), isParticipation && isSigned && /*#__PURE__*/jsxs(PersonalValuesWrapper, {
@@ -14748,7 +14770,7 @@ var AddToCap = function AddToCap(_ref18) {
         }), /*#__PURE__*/jsxs(MainFunctionsWrapper, {
           children: [/*#__PURE__*/jsx(AddCapButton, {
             endIcon: actionPending && /*#__PURE__*/jsx(Icon$2v, {
-              spin: true,
+              $spin: true,
               color: "currentColor"
             }),
             disabled: isButtonDisabled() || error !== "",
@@ -15374,7 +15396,7 @@ var AccountInfo = function AccountInfo(_ref27) {
                 },
                 onClick: copyAccount,
                 fill: accountCopied ? baseColors.white55 : baseColors.primary,
-                opac: true
+                $opac: true
               })]
             })
           })]
@@ -15696,7 +15718,7 @@ var UserTiers = function UserTiers(props) {
     }), /*#__PURE__*/jsx(Button$1, {
       as: "a",
       href: powerUpHref,
-      fullWidth: true,
+      $fullWidth: true,
       padding: "24px 0px",
       marginTop: "40px",
       children: /*#__PURE__*/jsx(Text, {
@@ -15710,7 +15732,7 @@ var UserTiers = function UserTiers(props) {
       variant: buttonVariant.OUTLINE,
       as: "a",
       href: learnMoreHref,
-      fullWidth: true,
+      $fullWidth: true,
       padding: "16px 0px",
       marginTop: "16px",
       children: /*#__PURE__*/jsx(Text, {
@@ -15940,10 +15962,10 @@ var CopyLinkCard = function CopyLinkCard(_ref3) {
         },
         children: refCopied ? /*#__PURE__*/jsx(Icon$2q, {
           fill: baseColors.secondary,
-          opac: true
+          $opac: true
         }) : /*#__PURE__*/jsx(Icon$2g, {
           fill: baseColors.secondary,
-          opac: true
+          $opac: true
         })
       })]
     }), /*#__PURE__*/jsxs(SocialRow, {
@@ -16632,7 +16654,7 @@ var StyledLink = styled(Link$1)(_templateObject$o || (_templateObject$o = _tagge
   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 = 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) {
@@ -16649,13 +16671,13 @@ var Logo$1 = function Logo(_ref4) {
     return /*#__PURE__*/jsxs(Fragment, {
       children: [/*#__PURE__*/jsx(Icon$2d, {
         className: "mobile-icon",
-        opac: true
+        $opac: true
       }), /*#__PURE__*/jsx(CoinswapLogo, {
         isPushed: pushed,
         children: !isMobile ? /*#__PURE__*/jsx(LogoWithText, {
           className: "desktop-icon",
           isDark: isDark,
-          opac: true
+          $opac: true
         }) : /*#__PURE__*/jsx(Fragment, {})
       })]
     });
@@ -16868,11 +16890,6 @@ var MenuEntry = styled.div(_templateObject3$d || (_templateObject3$d = _taggedTe
   var theme = _ref10.theme;
   return theme.colors.gradients.bubblegum;
 });
-MenuEntry.defaultProps = {
-  secondary: false,
-  isActive: false,
-  role: "button"
-};
 
 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"])));
@@ -17006,7 +17023,7 @@ var PanelBody = function PanelBody(_ref4) {
         height: "18px",
         mr: "8px",
         fill: activeLink ? "#12FFB8" : baseColors.grey,
-        opac: true
+        $opac: true
       }) : /*#__PURE__*/jsx(Fragment, {});
       var calloutClass = entry.calloutClass ? entry.calloutClass : undefined;
       if (entry.items) {
@@ -17029,7 +17046,7 @@ var PanelBody = function PanelBody(_ref4) {
             var entryIconElement = EntryIcon ? /*#__PURE__*/jsx(EntryIcon, {
               width: "18px",
               mr: "8px",
-              opac: true
+              $opac: true
             }) : /*#__PURE__*/jsx(Fragment, {});
             return /*#__PURE__*/jsxs(MenuEntry, {
               isActive: item.href === location.pathname,
@@ -17067,30 +17084,40 @@ var PanelBody = function PanelBody(_ref4) {
   });
 };
 
-var _excluded$1 = ["startIcon", "endIcon", "children", "external", "isLoading", "disabled"];
+var _excluded$1 = ["startIcon", "endIcon", "children", "external", "$isLoading", "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 fullWidth = _ref.fullWidth;
-  return fullWidth ? "100%" : "max-content";
+var StyledNavButton = styled.button.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !['$fullWidth', '$isLoading'].includes(prop);
+  }
+})(_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,
+    fullWidth = _ref.fullWidth;
+  return $fullWidth || fullWidth ? "100%" : "max-content";
 }, function (_ref2) {
   var size = _ref2.size;
   return size === "sm" ? "32px" : "48px";
 }, function (_ref3) {
-  var isLoading = _ref3.isLoading;
-  return isLoading ? 0.5 : 1;
+  var $isLoading = _ref3.$isLoading,
+    isLoading = _ref3.isLoading;
+  return $isLoading || isLoading ? 0.5 : 1;
 });
 var NavButton = function NavButton(_ref4) {
   var startIcon = _ref4.startIcon,
     endIcon = _ref4.endIcon,
     children = _ref4.children,
-    external = _ref4.external,
-    isLoading = _ref4.isLoading,
-    disabled = _ref4.disabled,
+    _ref4$external = _ref4.external,
+    external = _ref4$external === void 0 ? false : _ref4$external,
+    $isLoadingProp = _ref4.$isLoading,
+    isLoadingProp = _ref4.isLoading,
+    _ref4$disabled = _ref4.disabled,
+    disabled = _ref4$disabled === void 0 ? false : _ref4$disabled,
     props = _objectWithoutProperties(_ref4, _excluded$1);
   var internalProps = external ? getExternalLinkProps() : {};
-  var isDisabled = isLoading || disabled;
+  var $isLoading = $isLoadingProp || isLoadingProp || false;
+  var isDisabled = $isLoading || disabled;
   return /*#__PURE__*/jsxs(StyledNavButton, _objectSpread2(_objectSpread2(_objectSpread2({}, internalProps), props), {}, {
-    isLoading: isLoading,
+    $isLoading: $isLoading,
     disabled: isDisabled,
     children: [/*#__PURE__*/React__default.isValidElement(startIcon) && /*#__PURE__*/React__default.cloneElement(startIcon, {
       mr: "0.5rem"
@@ -17099,49 +17126,41 @@ var NavButton = function NavButton(_ref4) {
     })]
   }));
 };
-NavButton.defaultProps = {
-  variant: variants$4.PRIMARY,
-  size: sizes$2.MD,
-  external: false,
-  isLoading: false,
-  disabled: false
-};
 
 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 = styled(NavButton).attrs({
+  variant: "text",
+  size: "sm"
+})(_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;
 });
-MenuButton.defaultProps = {
-  variant: "text",
-  size: "sm"
-};
 
 var getLangFlag = function getLangFlag(lang) {
   switch (lang.code) {
     case "EN":
       return /*#__PURE__*/jsx(Icon$15, {
-        opac: true
+        $opac: true
       });
     case "CH":
       return /*#__PURE__*/jsx(Icon$14, {
-        opac: true
+        $opac: true
       });
     case "IN":
       return /*#__PURE__*/jsx(Icon$13, {
-        opac: true
+        $opac: true
       });
     case "VIE":
       return /*#__PURE__*/jsx(Icon$12, {
-        opac: true
+        $opac: true
       });
     case "TH":
       return /*#__PURE__*/jsx(Icon$11, {
-        opac: true
+        $opac: true
       });
     case "SP":
       return /*#__PURE__*/jsx(Icon$10, {
-        opac: true
+        $opac: true
       });
     default:
       return /*#__PURE__*/jsx("div", {});
@@ -17217,7 +17236,7 @@ var LangSelector$1 = function LangSelector(_ref9) {
         style: {
           marginRight: 10
         },
-        opac: true
+        $opac: true
       }),
       isPushed: isPushed,
       children: [/*#__PURE__*/jsx(MainLangText, {
@@ -17256,7 +17275,7 @@ var LangSelector$1 = function LangSelector(_ref9) {
           }), /*#__PURE__*/jsx(LangsList, {
             children: langs.map(function (lang, index) {
               return /*#__PURE__*/jsxs(MenuButton, {
-                fullWidth: true,
+                $fullWidth: true,
                 onClick: function onClick() {
                   return chooseLangHandler(lang);
                 },
@@ -17345,7 +17364,7 @@ var MobileMenu = function MobileMenu(_ref3) {
         height: "17px",
         mb: "7px",
         fill: activeLink ? "#12FFB8" : baseColors.grey,
-        opac: true
+        $opac: true
       }) : /*#__PURE__*/jsx(Fragment, {});
       return /*#__PURE__*/jsx(MobileEntry, {
         isActive: activeLink,
@@ -17499,13 +17518,13 @@ var DiclaimerModal = function DiclaimerModal(_ref) {
         children: /*#__PURE__*/jsxs(Flex, {
           justifyContent: "space-between",
           children: [/*#__PURE__*/jsx(Button$1, {
-            white: true,
+            $white: true,
             size: "md",
             variant: "secondary",
             onClick: function onClick() {
               return onClickHandler(false);
             },
-            fullWidth: true,
+            $fullWidth: true,
             children: t("Decline")
           }), /*#__PURE__*/jsx(Space, {}), /*#__PURE__*/jsx(Button$1, {
             disabled: some(checkBoxes, {
@@ -17516,7 +17535,7 @@ var DiclaimerModal = function DiclaimerModal(_ref) {
             onClick: function onClick() {
               return onClickHandler(true);
             },
-            fullWidth: true,
+            $fullWidth: true,
             children: t("Agree")
           })]
         })
@@ -17697,7 +17716,7 @@ var UserBlock = function UserBlock(_ref8) {
         setIsConnectWalletPanelOpen(true);
       },
       children: [isUserVerified ? /*#__PURE__*/jsx(VerifiedWalletIcon, {
-        opac: true
+        $opac: true
       }) : /*#__PURE__*/jsx(VerifyAddressIndicator, {
         fontSize: "12px",
         fontWeight: 500,
@@ -17768,7 +17787,7 @@ var BellNotifier = function BellNotifier(_ref1) {
       onClick: onClick,
       hasMsg: hasMessage,
       children: [/*#__PURE__*/jsx(Icon$1e, {
-        opac: true,
+        $opac: true,
         fill: !hasMessage ? "#2B2B32" : undefined
       }), /*#__PURE__*/jsx(NotificationNumber, {
         hasMsg: hasMessage,
@@ -17795,7 +17814,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 = 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) {
@@ -17811,7 +17830,7 @@ 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 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 CryptoButton = function CryptoButton(_ref6) {
   var _ref6$extended = _ref6.extended,
@@ -17836,18 +17855,18 @@ var CryptoButton = function CryptoButton(_ref6) {
           return closeDropDownHandler();
         },
         children: [/*#__PURE__*/jsx(Icon$1i, {
-          opac: true,
+          $opac: true,
           height: "11"
         }), /*#__PURE__*/jsx(Icon$1h, {
-          opac: true,
+          $opac: true,
           height: "16.6"
         }), /*#__PURE__*/jsx(Icon$2m, {
           fill: baseColors.primaryBright,
-          opac: true
+          $opac: true
         }), /*#__PURE__*/jsx(Icon$16, {
-          opac: true
+          $opac: true
         }), /*#__PURE__*/jsx(Icon$17, {
-          opac: true
+          $opac: true
         })]
       }), /*#__PURE__*/jsx(ButtonsSpacer, {}), /*#__PURE__*/jsxs(ButtonRow, {
         as: "a",
@@ -17857,17 +17876,17 @@ var CryptoButton = function CryptoButton(_ref6) {
           return closeDropDownHandler();
         },
         children: [/*#__PURE__*/jsx(Icon$16, {
-          opac: true
+          $opac: true
         }), /*#__PURE__*/jsx(Icon$17, {
-          opac: true
+          $opac: true
         }), /*#__PURE__*/jsx(Icon$2m, {
           fill: baseColors.primaryBright,
-          opac: true
+          $opac: true
         }), /*#__PURE__*/jsx(Icon$1i, {
-          opac: true,
+          $opac: true,
           height: "11"
         }), /*#__PURE__*/jsx(Icon$1h, {
-          opac: true,
+          $opac: true,
           height: "16.6"
         })]
       })]
@@ -17882,14 +17901,14 @@ var CryptoButton = function CryptoButton(_ref6) {
       return closeDropDownHandler();
     },
     children: [/*#__PURE__*/jsx(Icon$1i, {
-      opac: true,
+      $opac: true,
       height: isMobile ? "12" : ""
     }), extended && /*#__PURE__*/jsx(Icon$1h, {
-      opac: true,
+      $opac: true,
       display: extended ? "block" : "none",
       height: isMobile ? "14" : ""
     }), extended && /*#__PURE__*/jsx(Icon$2o, {
-      opac: true
+      $opac: true
     }), /*#__PURE__*/jsx(ButtonsContainer, {
       visible: dropToggled,
       children: transactionsButtons()
@@ -18312,7 +18331,7 @@ var VerificationModal = function VerificationModal(props) {
     bodyPadding: "0px 57px 32px 57px",
     children: /*#__PURE__*/jsxs(VerificationModalContent, {
       children: [/*#__PURE__*/jsx(Icon$28, {
-        opac: true,
+        $opac: true,
         height: 48,
         width: 48,
         color: baseColors.vividBlue
@@ -18569,9 +18588,9 @@ var IdoExtensionsModal = function IdoExtensionsModal(_ref7) {
         }), /*#__PURE__*/jsx(ModalButton, {
           disabled: isButtonDisabled(),
           type: "submit",
-          isLoading: extensionsLoading,
+          $isLoading: extensionsLoading,
           endIcon: extensionsLoading && /*#__PURE__*/jsx(Icon$2v, {
-            spin: true,
+            $spin: true,
             color: "currentColor"
           }),
           children: "Continue"