@depay/widgets 6.28.5 → 6.29.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/esm/index.bundle.js +24 -26
  2. package/dist/esm/index.js +24 -26
  3. package/dist/umd/index.bundle.js +24 -26
  4. package/dist/umd/index.js +24 -26
  5. package/package.json +1 -1
package/dist/esm/index.bundle.js CHANGED
@@ -49813,7 +49813,7 @@ var ErrorProvider = (function (props) {
49813
49813
  });
49814
49814
 
49815
49815
  var AlertStyle = (function (style) {
49816
- return "\n\n .Alert {\n background: rgba(0,0,0,0.08);\n border-radius: 0.4rem;\n font-weight: 500;\n padding: 0.5rem;\n }\n ";
49816
+ return "\n\n .Alert {\n background: rgba(0,0,0,0.08);\n border-radius: 7px;\n font-weight: 500;\n padding: 8px;\n }\n ";
49817
49817
  });
49818
49818
 
49819
49819
  var BlockchainLogoStyle = (function (style) {
@@ -49821,23 +49821,23 @@ var BlockchainLogoStyle = (function (style) {
49821
49821
  });
49822
49822
 
49823
49823
  var ButtonCircularStyle = (function () {
49824
- return "\n\n .ButtonCircular {\n border-radius: 99rem;\n cursor: pointer;\n height: 34px;\n opacity: 0.5;\n padding: 5px 4px 4px 4px;\n width: 34px;\n }\n\n .ButtonCircular:hover {\n background: rgba(0,0,0,0.1);\n opacity: 1;\n }\n\n .ButtonCircular:active {\n background: rgba(0,0,0,0.25);\n opacity: 1;\n }\n ";
49824
+ return "\n\n .ButtonCircular {\n border-radius: 9999px;\n cursor: pointer;\n height: 34px;\n opacity: 0.5;\n padding: 5px 4px 4px 4px;\n width: 34px;\n }\n\n .ButtonCircular:hover {\n background: rgba(0,0,0,0.1);\n opacity: 1;\n }\n\n .ButtonCircular:active {\n background: rgba(0,0,0,0.25);\n opacity: 1;\n }\n ";
49825
49825
  });
49826
49826
 
49827
49827
  var ButtonPrimaryStyle = (function (style) {
49828
- return "\n\n .ButtonPrimary {\n align-items: center;\n align-self: center;\n background: ".concat(style.colors.primary, ";\n border-radius: 0.8rem;\n border: 1px solid transparent;\n box-shadow: 0 0 16px rgba(0,0,0,0.1);\n font-size: 1.3rem;\n font-weight: 400;\n line-height: 2.8rem;\n height: 3.6rem;\n justify-content: center;\n width: 100%;\n overflow: hidden;\n padding: 0.4rem 0;\n position: relative;\n text-align: center;\n text-decoration: none;\n text-overflow: ellipsis;\n transition: background 0.1s;\n vertical-align: middle;\n display: inline-block;\n }\n\n .ButtonPrimary, .ButtonPrimary * {\n color: ").concat(style.colors.buttonText, ";\n }\n\n .ButtonPrimary.disabled {\n background: rgb(210,210,210);\n color: rgb(140,140,140);\n }\n\n .ButtonPrimary:not(.disabled){\n cursor: pointer;\n }\n .ButtonPrimary:not(.disabled):hover {\n box-shadow: inset 0 0 300px rgba(0,0,0,0.1);\n }\n .ButtonPrimary:not(.disabled):active {\n box-shadow: inset 0 0 300px rgba(0,0,0,0.2);\n }\n ");
49828
+ return "\n\n .ButtonPrimary {\n align-items: center;\n align-self: center;\n background: ".concat(style.colors.primary, ";\n border-radius: 13px;\n border: 1px solid transparent;\n box-shadow: 0 0 16px rgba(0,0,0,0.1);\n font-size: 21px;\n font-weight: 400;\n line-height: 45px;\n height: 58px;\n justify-content: center;\n width: 100%;\n overflow: hidden;\n padding: 7px 0;\n position: relative;\n text-align: center;\n text-decoration: none;\n text-overflow: ellipsis;\n transition: background 0.1s;\n vertical-align: middle;\n display: inline-block;\n }\n\n .ButtonPrimary, .ButtonPrimary * {\n color: ").concat(style.colors.buttonText, ";\n }\n\n .ButtonPrimary.disabled {\n background: rgb(210,210,210);\n color: rgb(140,140,140);\n }\n\n .ButtonPrimary:not(.disabled){\n cursor: pointer;\n }\n .ButtonPrimary:not(.disabled):hover {\n box-shadow: inset 0 0 300px rgba(0,0,0,0.1);\n }\n .ButtonPrimary:not(.disabled):active {\n box-shadow: inset 0 0 300px rgba(0,0,0,0.2);\n }\n ");
49829
49829
  });
49830
49830
 
49831
49831
  var CardStyle = (function (style) {
49832
- return "\n\n .Card {\n align-items: center;\n background: rgb(255,255,255);\n border-radius: 0.8rem;\n box-shadow: 0 0 8px rgba(0,0,0,0.03);\n cursor: pointer;\n display: flex;\n flex-direction: row;\n margin-bottom: 0.5rem;\n min-height: 4.78rem;\n padding: 1rem 0.6rem;\n width: 100%;\n }\n\n .Card.Row {\n border-radius: 0;\n margin-bottom: 0;\n box-shadow: none;\n min-height: 4.3rem;\n padding: 0.4rem 1.3rem;\n border-top: 1px solid rgba(0,0,0,0.05);\n }\n\n .Card.Row .CardText {\n font-size: 1.2rem;\n }\n\n .CardTokenSymbol {\n width: 40%;\n min-width: 0;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .CardTokenName {\n text-align: right;\n opacity: 0.5;\n width: 60%;\n min-width: 0;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n \n .Card.Row .CardTokenName .CardText {\n font-size: 1rem;\n }\n\n .Card.Row .CardImage {\n width: 2.5rem;\n }\n\n .Card.Row .CardImage img {\n height: 1.9rem;\n width: 1.9rem;\n }\n\n a.Card, a.Card * {\n color: inherit;\n text-decoration: none;\n }\n\n .Card.transparent {\n background: none;\n box-shadow: none;\n }\n\n .Card.small {\n min-height: auto;\n padding: 0.5rem 0.5rem;\n margin: 0;\n }\n\n .CardImage.small {\n width: 1.7rem;\n }\n\n .CardImage.small img {\n height: 1.4rem;\n width: 1.4rem;\n }\n\n .Card.disabled {\n cursor: default;\n }\n\n .Card:hover:not(.disabled) {\n background: rgb(240,240,240);\n box-shadow: 0 0 0 rgba(0,0,0,0); \n }\n\n .Card:active:not(.disabled) {\n background: rgb(235,235,235);\n box-shadow: inset 0 0 6px rgba(0,0,0,0.02);\n color: inherit;\n }\n\n .Card:hover:not(.disabled) .CardAction {\n opacity: 0.4;\n }\n\n .CardImage, .CardBody, .CardAction, .CardInfo {\n align-items: center;\n display: flex;\n min-width: 0;\n padding: 0 0.4rem;\n }\n\n .CardImage {\n flex-basis: auto;\n flex-grow: 0;\n flex-shrink: 0;\n justify-content: center;\n position: relative;\n width: 3.6rem;\n }\n\n .CardBody {\n flex-basis: auto;\n flex-grow: 1;\n flex-shrink: 1;\n line-height: 1.4rem;\n padding-left: 0.6rem;\n text-align: left;\n }\n\n .CardBodyWrapper {\n min-width: 0;\n }\n\n .CardAction {\n flex-basis: auto;\n flex-shrink: 0;\n flex-grow: 0;\n padding-right: 0;\n margin-left: auto;\n }\n\n .Card.disabled .CardAction {\n opacity: 0; \n }\n\n .CardInfo {\n display: flex;\n flex-basis: auto;\n flex-direction: column;\n flex-grow: 0;\n flex-shrink: 1;\n justify-content: center;\n margin-left: auto; \n padding-right: 0;\n }\n\n .CardImage img {\n background: white;\n border-radius: 99rem;\n border: 1px solid white;\n box-shadow: 0 2px 8px rgb(0 0 0 / 10%);\n height: 2.8rem;\n position: relative;\n vertical-align: middle;\n width: 2.8rem;\n }\n\n .CardImage.square img {\n border-radius: 0;\n }\n\n .CardImage img.transparent {\n border: none;\n background: none;\n box-shadow: none;\n }\n \n .CardImage .BlockchainLogo {\n position: absolute;\n bottom: 0;\n right: 0;\n }\n\n .CardTitle {\n font-size: 0.9rem;\n color: rgb(150,150,150);\n }\n \n .CardText, a .CardText {\n color: ".concat(style.colors.text, ";\n flex: 1;\n font-size: 1.3rem;\n }\n\n .CardText strong {\n font-weight: 500;\n }\n\n .CardText small {\n font-size: 1.1rem;\n color: rgb(150,150,150);\n }\n\n .CardAction {\n opacity: 0.2;\n }\n\n .Card.More {\n display: inline-block;\n text-align: center;\n }\n ");
49832
+ return "\n\n .Card {\n align-items: center;\n background: rgb(255,255,255);\n border-radius: 13px;\n box-shadow: 0 0 8px rgba(0,0,0,0.03);\n cursor: pointer;\n display: flex;\n flex-direction: row;\n margin-bottom: 8px;\n min-height: 76px;\n padding: 16px 10px;\n width: 100%;\n }\n\n .Card.Row {\n border-radius: 0;\n margin-bottom: 0;\n box-shadow: none;\n min-height: 69px;\n padding: 7px 21px;\n border-top: 1px solid rgba(0,0,0,0.05);\n }\n\n .Card.Row .CardText {\n font-size: 19px;\n line-height: 40px;\n }\n\n .CardTokenSymbol {\n width: 40%;\n min-width: 0;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .CardTokenName {\n text-align: right;\n opacity: 0.5;\n width: 60%;\n min-width: 0;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n \n .Card.Row .CardTokenName .CardText {\n font-size: 17px;\n }\n\n .Card.Row .CardImage {\n width: 40px;\n }\n\n .Card.Row .CardImage img {\n height: 30px;\n width: 30px;\n }\n\n a.Card, a.Card * {\n color: inherit;\n text-decoration: none;\n }\n\n .Card.transparent {\n background: none;\n box-shadow: none;\n }\n\n .Card.small {\n min-height: auto;\n padding: 8px 8px;\n margin: 0;\n }\n\n .CardImage.small {\n width: 27px;\n }\n\n .CardImage.small img {\n height: 27px;\n width: 27px;\n }\n\n .Card.disabled {\n cursor: default;\n }\n\n .Card:hover:not(.disabled) {\n background: rgb(240,240,240);\n box-shadow: 0 0 0 rgba(0,0,0,0); \n }\n\n .Card:active:not(.disabled) {\n background: rgb(235,235,235);\n box-shadow: inset 0 0 6px rgba(0,0,0,0.02);\n color: inherit;\n }\n\n .Card:hover:not(.disabled) .CardAction {\n opacity: 0.4;\n }\n\n .CardImage, .CardBody, .CardAction, .CardInfo {\n align-items: center;\n display: flex;\n min-width: 0;\n padding: 0 7px;\n }\n\n .CardImage {\n flex-basis: auto;\n flex-grow: 0;\n flex-shrink: 0;\n justify-content: center;\n position: relative;\n width: 58px;\n }\n\n .CardBody {\n flex-basis: auto;\n flex-grow: 1;\n flex-shrink: 1;\n line-height: 27px;\n padding-left: 10px;\n text-align: left;\n }\n\n .CardBodyWrapper {\n min-width: 0;\n }\n\n .CardAction {\n flex-basis: auto;\n flex-shrink: 0;\n flex-grow: 0;\n padding-right: 0;\n margin-left: auto;\n }\n\n .Card.disabled .CardAction {\n opacity: 0; \n }\n\n .CardInfo {\n display: flex;\n flex-basis: auto;\n flex-direction: column;\n flex-grow: 0;\n flex-shrink: 1;\n justify-content: center;\n margin-left: auto; \n padding-right: 0;\n }\n\n .CardImage img {\n background: white;\n border-radius: 9999px;\n border: 1px solid white;\n box-shadow: 0 2px 8px rgb(0 0 0 / 10%);\n height: 45px;\n position: relative;\n vertical-align: middle;\n width: 45px;\n }\n\n .CardImage.square img {\n border-radius: 0;\n }\n\n .CardImage img.transparent {\n border: none;\n background: none;\n box-shadow: none;\n }\n \n .CardImage .BlockchainLogo {\n position: absolute;\n bottom: 0;\n right: 0;\n }\n\n .CardTitle {\n font-size: 15px;\n color: rgb(150,150,150);\n line-height: 20px;\n }\n \n .CardText, a .CardText {\n color: ".concat(style.colors.text, ";\n flex: 1;\n font-size: 21px;\n line-height: 26px;\n }\n\n .CardText strong {\n font-weight: 500;\n }\n\n .CardText.small, .CardText.small small {\n font-size: 18px;\n color: rgb(150,150,150);\n line-height: 20px;\n }\n\n .CardAction {\n opacity: 0.2;\n }\n\n .Card.More {\n display: inline-block;\n text-align: center;\n }\n ");
49833
49833
  });
49834
49834
 
49835
49835
  var DialogStyle = (function (style) {
49836
- return "\n\n .ReactDialogBackground {\n backdrop-filter: blur(5px);\n background: rgba(0,0,0,0.7);\n }\n\n .contained .ReactDialog {\n position: absolute;\n height: 100%;\n min-height: 100%;\n width: 100%;\n min-width: 100%;\n }\n\n .contained .ReactDialogBackground {\n position: absolute;\n }\n\n .contained .ReactDialog.ReactDialogOpen .ReactDialogAnimation {\n top: 0;\n }\n\n .Dialog {\n margin: 0 auto;\n position: relative;\n width: 420px;\n box-shadow: 0 0 20px rgba(0,0,0,0.1);\n border-radius: 0.8rem;\n background: rgb(248,248,248);\n }\n\n @media (max-width: 450px) {\n\n .Dialog {\n border-radius: 0;\n width: 100%;\n }\n }\n\n @media (orientation: portrait) and (max-width: 800px) {\n\n .ReactDialogAnimation {\n width: 100%;\n }\n\n .ReactDialog {\n height: 100%;\n min-height: 100%;\n }\n\n .ReactDialogStack {\n align-items: flex-end;\n }\n\n .Dialog {\n align-content: stretch;\n border-radius: 0.8rem;\n border-top-radius: 0.8rem;\n display: flex;\n flex-direction: column;\n }\n\n .DialogBody {\n flex: 1;\n align-items: flex-end;\n }\n\n .DialogFooter {\n padding-bottom: 20px;\n }\n\n .ReactDialogAnimation {\n margin-bottom: -100px !important;\n top: inherit !important;\n position: relative;\n transition: opacity 0.4s ease, margin-bottom 0.4s ease;\n }\n\n .ReactDialog.ReactDialogOpen .ReactDialogAnimation {\n margin-bottom: 0px !important;\n }\n\n .DialogFooter {\n border-bottom-left-radius: 0 !important;\n border-bottom-right-radius: 0 !important;\n }\n\n .ReactShadowDOMInsideContainer > .ReactDialog {\n align-items: flex-end;\n }\n }\n\n .DialogBody {\n background: rgb(248,248,248);\n overflow-x: hidden;\n overflow-y: auto;\n }\n\n .DialogBody.ScrollHeight {\n height: 30vh !important;\n max-height: 30vh !important;\n }\n\n .DialogHeader {\n background: rgb(248,248,248);\n border-top-left-radius: 0.8rem;\n border-top-right-radius: 0.8rem;\n min-height: 3.4rem;\n position: relative;\n width: 100%;\n }\n\n .DialogHeaderActionRight {\n position: absolute;\n top: 0;\n right: 0;\n height: 3rem;\n }\n\n .DialogHeaderActionLeft {\n position: absolute;\n top: 0;\n left: 0;\n height: 3rem;\n }\n\n .DialogFooter {\n background: rgb(248,248,248);\n border-bottom-left-radius: 0.8rem;\n border-bottom-right-radius: 0.8rem;\n line-height: 1.5rem;\n min-height: 2rem;\n position: relative;\n text-align: center;\n }\n\n ";
49836
+ return "\n\n .ReactDialogBackground {\n backdrop-filter: blur(5px);\n background: rgba(0,0,0,0.7);\n }\n\n .contained .ReactDialog {\n position: absolute;\n height: 100%;\n min-height: 100%;\n width: 100%;\n min-width: 100%;\n }\n\n .contained .ReactDialogBackground {\n position: absolute;\n }\n\n .contained .ReactDialog.ReactDialogOpen .ReactDialogAnimation {\n top: 0;\n }\n\n .Dialog {\n margin: 0 auto;\n position: relative;\n width: 420px;\n box-shadow: 0 0 20px rgba(0,0,0,0.1);\n border-radius: 13px;\n background: rgb(248,248,248);\n }\n\n @media (max-width: 450px) {\n\n .Dialog {\n border-radius: 0;\n width: 100%;\n }\n }\n\n @media (orientation: portrait) and (max-width: 800px) {\n\n .ReactDialogAnimation {\n width: 100%;\n }\n\n .ReactDialog {\n height: 100%;\n min-height: 100%;\n }\n\n .ReactDialogStack {\n align-items: flex-end;\n }\n\n .Dialog {\n align-content: stretch;\n border-radius: 13px;\n border-top-radius: 13px;\n display: flex;\n flex-direction: column;\n }\n\n .DialogBody {\n flex: 1;\n align-items: flex-end;\n }\n\n .DialogFooter {\n padding-bottom: 20px;\n }\n\n .ReactDialogAnimation {\n margin-bottom: -100px !important;\n top: inherit !important;\n position: relative;\n transition: opacity 0.4s ease, margin-bottom 0.4s ease;\n }\n\n .ReactDialog.ReactDialogOpen .ReactDialogAnimation {\n margin-bottom: 0px !important;\n }\n\n .DialogFooter {\n border-bottom-left-radius: 0 !important;\n border-bottom-right-radius: 0 !important;\n }\n\n .ReactShadowDOMInsideContainer > .ReactDialog {\n align-items: flex-end;\n }\n }\n\n .DialogBody {\n overflow-x: hidden;\n overflow-y: auto;\n }\n\n .DialogBody.ScrollHeight {\n height: 30vh !important;\n max-height: 30vh !important;\n }\n\n .DialogHeader {\n border-top-left-radius: 13px;\n border-top-right-radius: 13px;\n min-height: 54px;\n position: relative;\n width: 100%;\n }\n\n .DialogHeaderActionRight {\n position: absolute;\n top: 0;\n right: 0;\n height: 48px;\n }\n\n .DialogHeaderActionLeft {\n position: absolute;\n top: 0;\n left: 0;\n height: 48px;\n }\n\n .DialogFooter {\n border-bottom-left-radius: 13px;\n border-bottom-right-radius: 13px;\n line-height: 24px;\n min-height: 32px;\n position: relative;\n text-align: center;\n }\n\n ";
49837
49837
  });
49838
49838
 
49839
49839
  var FontStyle = (function (style) {
49840
- return "\n\n *, div, div * {\n font-family: ".concat(style.fontFamily, ";\n }\n\n .FontSizeS {\n font-size: 1rem;\n }\n\n .FontSizeM {\n font-size: 1.2rem;\n }\n\n .FontSizeL {\n font-size: 1.4rem;\n }\n\n .FontSizeXL {\n font-size: 2.0rem;\n }\n\n .FontWeightBold {\n font-weight: bold;\n }\n\n .FontItalic {\n font-style: italic;\n }\n ");
49840
+ return "\n\n *, div, div * {\n font-family: ".concat(style.fontFamily, ";\n }\n\n .FontSizeS {\n font-size: 16px;\n }\n\n .FontSizeM {\n font-size: 19px;\n }\n\n .FontSizeL {\n font-size: 23px;\n }\n\n .FontSizeXL {\n font-size: 32px;\n }\n\n .FontWeightBold {\n font-weight: bold;\n }\n\n .FontItalic {\n font-style: italic;\n }\n ");
49841
49841
  });
49842
49842
 
49843
49843
  var GraphicStyle = (function () {
@@ -49860,10 +49860,6 @@ var InputStyle = (function (style) {
49860
49860
  return "\n\n .Input {\n background: none;\n border: 1px solid transparent;\n margin: 0;\n outline: none !important;\n padding: 0 0 0 14px;\n width: 100%;\n }\n\n .Input::placeholder {\n color: rgb(210,210,210);\n }\n \n ";
49861
49861
  });
49862
49862
 
49863
- var LabelStyle = (function (style) {
49864
- return "\n\n .Label {\n background: rgb(248,248,248);\n border-radius: 999px;\n color: ".concat(style.colors.primary, ";\n font-size: 0.8rem;\n padding: 0.1rem 0.5rem;\n margin: 0.1rem;\n }\n\n ");
49865
- });
49866
-
49867
49863
  var LinkStyle = (function (style) {
49868
49864
  return "\n\n .Link {\n color: ".concat(style.colors.primary, ";\n cursor: pointer;\n text-decoration: none;\n }\n\n .Link:hover {\n filter: brightness(0.8);\n }\n\n .Link:active {\n filter: brightness(1.0);\n }\n ");
49869
49865
  });
@@ -49877,11 +49873,11 @@ var OpacityStyle = (function (style) {
49877
49873
  });
49878
49874
 
49879
49875
  var PaddingStyle = (function () {
49880
- return "\n\n .PaddingTopXS {\n padding-top: 0.2rem;\n }\n\n .PaddingRightXS {\n padding-right: 0.2rem;\n }\n\n .PaddingBottomXS {\n padding-bottom: 0.2rem;\n }\n\n .PaddingLeftXS {\n padding-left: 0.2rem; \n }\n\n .PaddingTopS {\n padding-top: 0.8rem;\n }\n\n .PaddingRightS {\n padding-right: 0.8rem;\n }\n\n .PaddingBottomS {\n padding-bottom: 0.8rem;\n }\n\n .PaddingLeftS {\n padding-left: 0.8rem; \n }\n\n .PaddingTopM {\n padding-top: 1.2rem;\n }\n\n .PaddingRightM {\n padding-right: 1.2rem;\n }\n\n .PaddingBottomM {\n padding-bottom: 1.2rem;\n }\n\n .PaddingLeftM {\n padding-left: 1.2rem; \n }\n\n .PaddingTopL {\n padding-top: 1.8rem;\n }\n\n .PaddingRightL {\n padding-right: 1.8rem;\n }\n\n .PaddingBottomL {\n padding-bottom: 1.8rem;\n }\n\n .PaddingLeftL {\n padding-left: 1.28em; \n }\n ";
49876
+ return "\n\n .PaddingTopXS {\n padding-top: 3px;\n }\n\n .PaddingRightXS {\n padding-right: 3px;\n }\n\n .PaddingBottomXS {\n padding-bottom: 3px;\n }\n\n .PaddingLeftXS {\n padding-left: 3px; \n }\n\n .PaddingTopS {\n padding-top: 13px;\n }\n\n .PaddingRightS {\n padding-right: 13px;\n }\n\n .PaddingBottomS {\n padding-bottom: 13px;\n }\n\n .PaddingLeftS {\n padding-left: 13px; \n }\n\n .PaddingTopM {\n padding-top: 19px;\n }\n\n .PaddingRightM {\n padding-right: 19px;\n }\n\n .PaddingBottomM {\n padding-bottom: 19px;\n }\n\n .PaddingLeftM {\n padding-left: 19px; \n }\n\n .PaddingTopL {\n padding-top: 29px;\n }\n\n .PaddingRightL {\n padding-right: 29px;\n }\n\n .PaddingBottomL {\n padding-bottom: 29px;\n }\n\n .PaddingLeftL {\n padding-left: 29px; \n }\n ";
49881
49877
  });
49882
49878
 
49883
49879
  var PoweredByStyle = (function (style) {
49884
- return "\n\n .PoweredByWrapper {\n display: block;\n left: 0;\n padding-top: 0.2rem;\n position: fixed;\n right: 0;\n text-align: center;\n top: 0;\n }\n\n .contained .PoweredByWrapper {\n position: absolute;\n }\n\n .PoweredByLink {\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\" !important;\n color: white;\n opacity: 0.4;\n display: inline-block;\n font-size: 0.78rem;\n font-style: italic;\n font-weight: bold;\n letter-spacing: -0.2px;\n margin-left: 0.5rem;\n text-decoration: none;\n }\n\n .PoweredByLink:hover, .PoweredByLink:active {\n opacity: 1.0;\n color: ".concat(style.colors.primary, ";\n }\n ");
49880
+ return "\n\n .PoweredByWrapper {\n display: block;\n left: 0;\n padding-top: 3px;\n position: fixed;\n right: 0;\n text-align: center;\n top: 0;\n }\n\n .contained .PoweredByWrapper {\n position: absolute;\n }\n\n .PoweredByLink {\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\" !important;\n color: white;\n opacity: 0.4;\n display: inline-block;\n font-size: 14px;\n font-style: italic;\n font-weight: bold;\n letter-spacing: -0.2px;\n margin-left: 8px;\n text-decoration: none;\n }\n\n .PoweredByLink:hover, .PoweredByLink:active {\n opacity: 1.0;\n color: ".concat(style.colors.primary, ";\n }\n ");
49885
49881
  });
49886
49882
 
49887
49883
  var RangeSliderStyle = (function (style) {
@@ -49893,7 +49889,7 @@ var ResetStyle = (function () {
49893
49889
  });
49894
49890
 
49895
49891
  var SearchStyle = (function (style) {
49896
- return "\n\n .Search {\n border-radius: 0.8rem;\n border: 1px solid rgba(0,0,0,0.2);\n outline: none !important;\n color: ".concat(style.colors.text, ";\n font-size: 1.2rem;\n padding: 0.8rem;\n width: 100%;\n }\n\n .Search::placeholder {\n color: rgb(180,180,180);\n } \n\n .Search:focus, .Search:focus-visible {\n border: 1px solid ").concat(style.colors.primary, ";\n }\n\n ");
49892
+ return "\n\n .Search {\n border-radius: 13px;\n border: 1px solid rgba(0,0,0,0.2);\n outline: none !important;\n color: ".concat(style.colors.text, ";\n font-size: 19px;\n padding: 13px;\n width: 100%;\n }\n\n .Search::placeholder {\n color: rgb(180,180,180);\n } \n\n .Search:focus, .Search:focus-visible {\n border: 1px solid ").concat(style.colors.primary, ";\n }\n\n ");
49897
49893
  });
49898
49894
 
49899
49895
  var SkeletonStyle = (function () {
@@ -49901,7 +49897,7 @@ var SkeletonStyle = (function () {
49901
49897
  });
49902
49898
 
49903
49899
  var TableStyle = (function (style) {
49904
- return "\n\n .Table {\n border-collapse: separate;\n border-radius: 0.4rem;\n border-style: hidden;\n border: 1px solid rgba(0,0,0,0.1);\n font-size: 94%;\n width: 100%;\n }\n\n .Table tr.small td {\n font-size: 90%;\n }\n\n .Table tr td {\n border-bottom: 1px solid rgba(0,0,0,0.1);\n word-break: break-all;\n }\n \n .Table tr:last-child td {\n border-bottom: none;\n }\n \n .Table tr td {\n padding: 0.5rem 0.9rem;\n text-align: left;\n }\n \n .Table tr td:first-child {\n width: 30%\n }\n\n .Table tr td:last-child {\n width: 70%\n }\n \n .Table .TableSubTitle {\n font-weight: 300;\n opacity: 0.7;\n }\n\n .Table tr td:last-child {\n font-weight: 500;\n }\n ";
49900
+ return "\n\n .Table {\n border-collapse: separate;\n border-radius: 7px;\n border-style: hidden;\n border: 1px solid rgba(0,0,0,0.1);\n width: 100%;\n }\n\n .Table tr.small td {\n font-size: 14px;\n }\n\n .Table tr td {\n border-bottom: 1px solid rgba(0,0,0,0.1);\n word-break: break-all;\n }\n \n .Table tr:last-child td {\n border-bottom: none;\n }\n \n .Table tr td {\n padding: 8px 15px;\n text-align: left;\n }\n \n .Table tr td:first-child {\n width: 30%\n }\n\n .Table tr td:last-child {\n width: 70%\n }\n \n .Table .TableSubTitle {\n font-weight: 300;\n opacity: 0.7;\n }\n\n .Table tr td:last-child {\n font-weight: 500;\n }\n ";
49905
49901
  });
49906
49902
 
49907
49903
  var TextButtonStyle = (function (style) {
@@ -49909,7 +49905,7 @@ var TextButtonStyle = (function (style) {
49909
49905
  });
49910
49906
 
49911
49907
  var TextStyle = (function (style) {
49912
- return "\n\n * {\n color: ".concat(style.colors.text, ";\n }\n\n h1, h2, h3, h4, h5, h6 {\n display: block;\n }\n\n .TextLeft, .TextLeft * {\n text-align: left;\n }\n\n .TextCenter, .TextCenter * {\n text-align: center;\n }\n\n .LineHeightL {\n line-height: 2.0rem;\n }\n\n .ErrorSnippetText {\n background: rgb(30, 30, 20);\n border-radius: 1.2rem;\n border: 0.5rem solid rgb(30, 30, 20);\n color: #00FF41;\n font-size: 0.9rem;\n font-style: italic;\n max-height: 100px;\n padding: 6px;\n overflow-wrap: break-word;\n overflow-y: auto;\n white-space: pre-wrap;\n word-wrap: break-word;\n }\n ");
49908
+ return "\n\n * {\n color: ".concat(style.colors.text, ";\n }\n\n h1, h2, h3, h4, h5, h6 {\n display: block;\n }\n\n .Text {\n font-size: 16px;\n line-height: 24px\n }\n\n .TextLeft, .TextLeft * {\n text-align: left;\n }\n\n .TextCenter, .TextCenter * {\n text-align: center;\n }\n\n .LineHeightL {\n line-height: 32px;\n }\n\n .ErrorSnippetText {\n background: rgb(30, 30, 20);\n border-radius: 19px;\n border: 8px solid rgb(30, 30, 20);\n color: #00FF41;\n font-size: 15px;\n font-style: italic;\n max-height: 100px;\n padding: 6px;\n overflow-wrap: break-word;\n overflow-y: auto;\n white-space: pre-wrap;\n word-wrap: break-word;\n }\n ");
49913
49909
  });
49914
49910
 
49915
49911
  var TokenAmountStyle = (function () {
@@ -49917,11 +49913,11 @@ var TokenAmountStyle = (function () {
49917
49913
  });
49918
49914
 
49919
49915
  var TokenImageStyle = (function (style) {
49920
- return "\n\n .TokenImage img {\n border-radius: 99rem;\n border: 1px solid white;\n background: white;\n box-shadow: 0 2px 8px rgb(0 0 0 / 10%);\n height: 2.8rem;\n position: relative;\n vertical-align: middle;\n width: 2.8rem;\n }\n\n .TokenImage.medium img {\n height: 5.8rem;\n width: 5.8rem;\n }\n ";
49916
+ return "\n\n .TokenImage img {\n border-radius: 9999px;\n border: 1px solid white;\n background: white;\n box-shadow: 0 2px 8px rgb(0 0 0 / 10%);\n height: 45px;\n position: relative;\n vertical-align: middle;\n width: 45px;\n }\n\n .TokenImage.medium img {\n height: 93px;\n width: 93px;\n }\n ";
49921
49917
  });
49922
49918
 
49923
49919
  var TooltipStyle = (function (style) {
49924
- return "\n\n .Tooltip {\n background: ".concat(style.colors.primary, ";\n border-radius: 0.6rem;\n color: ").concat(style.colors.buttonText, ";\n padding: 0.6rem 0.8rem;\n position: relative;\n box-shadow: 0 0 8px rgba(0,0,0,0.2);\n }\n\n .TooltipArrowUp {\n border-bottom: 10px solid ").concat(style.colors.primary, ";\n border-left: 10px solid transparent;\n border-right: 10px solid transparent;\n height: 0; \n left: 12px;\n position: absolute;\n top: -8px;\n width: 0; \n }\n ");
49920
+ return "\n\n .Tooltip {\n background: ".concat(style.colors.primary, ";\n border-radius: 10px;\n color: ").concat(style.colors.buttonText, ";\n padding: 10px 13px;\n position: relative;\n box-shadow: 0 0 8px rgba(0,0,0,0.2);\n }\n\n .TooltipArrowUp {\n border-bottom: 10px solid ").concat(style.colors.primary, ";\n border-left: 10px solid transparent;\n border-right: 10px solid transparent;\n height: 0; \n left: 12px;\n position: absolute;\n top: -8px;\n width: 0; \n }\n ");
49925
49921
  });
49926
49922
 
49927
49923
  var styleRenderer = (function (style) {
@@ -49934,7 +49930,7 @@ var styleRenderer = (function (style) {
49934
49930
  },
49935
49931
  fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
49936
49932
  }, style);
49937
- return [ResetStyle(), FontStyle(style), DialogStyle(), ButtonCircularStyle(), ButtonPrimaryStyle(style), CardStyle(style), PoweredByStyle(style), GraphicStyle(), SkeletonStyle(), TokenAmountStyle(), TextStyle(style), IconStyle(style), OpacityStyle(), PaddingStyle(), HeightStyle(), LabelStyle(style), LoadingTextStyle(style), RangeSliderStyle(style), InputStyle(), TextButtonStyle(style), ImageStyle(), BlockchainLogoStyle(), SearchStyle(style), TokenImageStyle(), AlertStyle(), TableStyle(), LinkStyle(style), TooltipStyle(style)].join('');
49933
+ return [ResetStyle(), DialogStyle(), ButtonCircularStyle(), ButtonPrimaryStyle(style), CardStyle(style), PoweredByStyle(style), GraphicStyle(), SkeletonStyle(), TokenAmountStyle(), TextStyle(style), FontStyle(style), IconStyle(style), OpacityStyle(), PaddingStyle(), HeightStyle(), LoadingTextStyle(style), RangeSliderStyle(style), InputStyle(), TextButtonStyle(style), ImageStyle(), BlockchainLogoStyle(), SearchStyle(style), TokenImageStyle(), AlertStyle(), TableStyle(), LinkStyle(style), TooltipStyle(style)].join('');
49938
49934
  });
49939
49935
 
49940
49936
  const insideContainerClass = 'ReactShadowDOMInsideContainer';
@@ -87955,7 +87951,9 @@ var ChangeAmountDialog = (function (props) {
87955
87951
  style: {
87956
87952
  height: '40px'
87957
87953
  }
87958
- }, /*#__PURE__*/react.createElement("div", null, format(toValidStep(maxAmount)), /*#__PURE__*/react.createElement("button", {
87954
+ }, /*#__PURE__*/react.createElement("div", {
87955
+ className: "FontSizeS"
87956
+ }, format(toValidStep(maxAmount)), /*#__PURE__*/react.createElement("button", {
87959
87957
  className: "TextButton",
87960
87958
  onClick: function onClick() {
87961
87959
  changeAmount(toValidValue(maxAmount));
@@ -88082,7 +88080,7 @@ var ChangePaymentDialog = (function (props) {
88082
88080
  }, payment.symbol), /*#__PURE__*/react.createElement("span", null, "\xA0"), /*#__PURE__*/react.createElement("span", {
88083
88081
  className: "TokenAmountCell"
88084
88082
  }, format(payment.amount)))), /*#__PURE__*/react.createElement("h3", {
88085
- className: "CardText"
88083
+ className: "CardText small"
88086
88084
  }, /*#__PURE__*/react.createElement("small", null, format(round$1(parseFloat(payment.route.fromBalance.toString()) / Math.pow(10, payment.decimals), 'down')))))));
88087
88085
  }));
88088
88086
  }, [allPaymentRoutesWithData]);
@@ -89358,7 +89356,7 @@ var SignLoginDialog = (function (props) {
89358
89356
  }, "Wallet Login"), /*#__PURE__*/react.createElement("div", {
89359
89357
  className: "Text PaddingTopS PaddingBottomS PaddingLeftS PaddingRightS"
89360
89358
  }, /*#__PURE__*/react.createElement("p", {
89361
- className: "FontSizeM PaddingLeftM PaddingRightM"
89359
+ className: "FontSizeM PaddingLeftM PaddingRightM PaddingBottomS"
89362
89360
  }, "Please click \"Log in\" and sign the message with your connected wallet."))),
89363
89361
  footer: /*#__PURE__*/react.createElement("div", {
89364
89362
  className: "PaddingTopXS PaddingRightM PaddingLeftM PaddingBottomM"
@@ -90033,7 +90031,7 @@ var SaleOverviewDialog = (function (props) {
90033
90031
  }, toToken.symbol), /*#__PURE__*/react.createElement("span", null, "\xA0"), /*#__PURE__*/react.createElement("span", {
90034
90032
  className: "TokenAmountCell"
90035
90033
  }, format(toTokenReadableAmount)))), salePerTokenValue && /*#__PURE__*/react.createElement("h3", {
90036
- className: "CardText"
90034
+ className: "CardText small"
90037
90035
  }, /*#__PURE__*/react.createElement("small", null, salePerTokenValue, " per token")))), /*#__PURE__*/react.createElement("div", {
90038
90036
  className: "CardAction"
90039
90037
  }, /*#__PURE__*/react.createElement(ChevronRight, null))), /*#__PURE__*/react.createElement("div", {
@@ -90344,11 +90342,11 @@ var ConfirmTokenSelectionDialog = (function (props) {
90344
90342
  })), /*#__PURE__*/react.createElement("div", {
90345
90343
  className: "PaddingTopS TextCenter"
90346
90344
  }, /*#__PURE__*/react.createElement("div", {
90347
- className: "Alert"
90345
+ className: "Alert FontSizeS"
90348
90346
  }, /*#__PURE__*/react.createElement("strong", null, "Please review this information"))), /*#__PURE__*/react.createElement("div", {
90349
90347
  className: "PaddingTopXS"
90350
90348
  }, /*#__PURE__*/react.createElement("table", {
90351
- className: "Table TextLeft"
90349
+ className: "Table TextLeft FontSizeS"
90352
90350
  }, /*#__PURE__*/react.createElement("tbody", null, /*#__PURE__*/react.createElement("tr", {
90353
90351
  className: "small TextCenter"
90354
90352
  }, /*#__PURE__*/react.createElement("td", {
@@ -107854,7 +107852,7 @@ var SelectTokenDialog = (function (props) {
107854
107852
  className: "transparent",
107855
107853
  src: blockchain.logo
107856
107854
  })), /*#__PURE__*/react.createElement("div", {
107857
- className: "CardBody"
107855
+ className: "CardBody FontSizeS"
107858
107856
  }, blockchain.label), /*#__PURE__*/react.createElement("div", {
107859
107857
  className: "CardAction"
107860
107858
  }, /*#__PURE__*/react.createElement(ChevronRight, null)))), /*#__PURE__*/react.createElement("div", {
@@ -107882,7 +107880,7 @@ var SelectTokenDialog = (function (props) {
107882
107880
  }, /*#__PURE__*/react.createElement("div", {
107883
107881
  className: "PaddingTopXS PaddingBottomXS"
107884
107882
  }, /*#__PURE__*/react.createElement("div", {
107885
- className: "Link",
107883
+ className: "Link FontSizeS",
107886
107884
  onClick: onClickAddToken
107887
107885
  }, "Token missing? Add it.")))
107888
107886
  });
package/dist/esm/index.js CHANGED
@@ -1674,7 +1674,7 @@ var ErrorProvider = (function (props) {
1674
1674
  });
1675
1675
 
1676
1676
  var AlertStyle = (function (style) {
1677
- return "\n\n .Alert {\n background: rgba(0,0,0,0.08);\n border-radius: 0.4rem;\n font-weight: 500;\n padding: 0.5rem;\n }\n ";
1677
+ return "\n\n .Alert {\n background: rgba(0,0,0,0.08);\n border-radius: 7px;\n font-weight: 500;\n padding: 8px;\n }\n ";
1678
1678
  });
1679
1679
 
1680
1680
  var BlockchainLogoStyle = (function (style) {
@@ -1682,23 +1682,23 @@ var BlockchainLogoStyle = (function (style) {
1682
1682
  });
1683
1683
 
1684
1684
  var ButtonCircularStyle = (function () {
1685
- return "\n\n .ButtonCircular {\n border-radius: 99rem;\n cursor: pointer;\n height: 34px;\n opacity: 0.5;\n padding: 5px 4px 4px 4px;\n width: 34px;\n }\n\n .ButtonCircular:hover {\n background: rgba(0,0,0,0.1);\n opacity: 1;\n }\n\n .ButtonCircular:active {\n background: rgba(0,0,0,0.25);\n opacity: 1;\n }\n ";
1685
+ return "\n\n .ButtonCircular {\n border-radius: 9999px;\n cursor: pointer;\n height: 34px;\n opacity: 0.5;\n padding: 5px 4px 4px 4px;\n width: 34px;\n }\n\n .ButtonCircular:hover {\n background: rgba(0,0,0,0.1);\n opacity: 1;\n }\n\n .ButtonCircular:active {\n background: rgba(0,0,0,0.25);\n opacity: 1;\n }\n ";
1686
1686
  });
1687
1687
 
1688
1688
  var ButtonPrimaryStyle = (function (style) {
1689
- return "\n\n .ButtonPrimary {\n align-items: center;\n align-self: center;\n background: ".concat(style.colors.primary, ";\n border-radius: 0.8rem;\n border: 1px solid transparent;\n box-shadow: 0 0 16px rgba(0,0,0,0.1);\n font-size: 1.3rem;\n font-weight: 400;\n line-height: 2.8rem;\n height: 3.6rem;\n justify-content: center;\n width: 100%;\n overflow: hidden;\n padding: 0.4rem 0;\n position: relative;\n text-align: center;\n text-decoration: none;\n text-overflow: ellipsis;\n transition: background 0.1s;\n vertical-align: middle;\n display: inline-block;\n }\n\n .ButtonPrimary, .ButtonPrimary * {\n color: ").concat(style.colors.buttonText, ";\n }\n\n .ButtonPrimary.disabled {\n background: rgb(210,210,210);\n color: rgb(140,140,140);\n }\n\n .ButtonPrimary:not(.disabled){\n cursor: pointer;\n }\n .ButtonPrimary:not(.disabled):hover {\n box-shadow: inset 0 0 300px rgba(0,0,0,0.1);\n }\n .ButtonPrimary:not(.disabled):active {\n box-shadow: inset 0 0 300px rgba(0,0,0,0.2);\n }\n ");
1689
+ return "\n\n .ButtonPrimary {\n align-items: center;\n align-self: center;\n background: ".concat(style.colors.primary, ";\n border-radius: 13px;\n border: 1px solid transparent;\n box-shadow: 0 0 16px rgba(0,0,0,0.1);\n font-size: 21px;\n font-weight: 400;\n line-height: 45px;\n height: 58px;\n justify-content: center;\n width: 100%;\n overflow: hidden;\n padding: 7px 0;\n position: relative;\n text-align: center;\n text-decoration: none;\n text-overflow: ellipsis;\n transition: background 0.1s;\n vertical-align: middle;\n display: inline-block;\n }\n\n .ButtonPrimary, .ButtonPrimary * {\n color: ").concat(style.colors.buttonText, ";\n }\n\n .ButtonPrimary.disabled {\n background: rgb(210,210,210);\n color: rgb(140,140,140);\n }\n\n .ButtonPrimary:not(.disabled){\n cursor: pointer;\n }\n .ButtonPrimary:not(.disabled):hover {\n box-shadow: inset 0 0 300px rgba(0,0,0,0.1);\n }\n .ButtonPrimary:not(.disabled):active {\n box-shadow: inset 0 0 300px rgba(0,0,0,0.2);\n }\n ");
1690
1690
  });
1691
1691
 
1692
1692
  var CardStyle = (function (style) {
1693
- return "\n\n .Card {\n align-items: center;\n background: rgb(255,255,255);\n border-radius: 0.8rem;\n box-shadow: 0 0 8px rgba(0,0,0,0.03);\n cursor: pointer;\n display: flex;\n flex-direction: row;\n margin-bottom: 0.5rem;\n min-height: 4.78rem;\n padding: 1rem 0.6rem;\n width: 100%;\n }\n\n .Card.Row {\n border-radius: 0;\n margin-bottom: 0;\n box-shadow: none;\n min-height: 4.3rem;\n padding: 0.4rem 1.3rem;\n border-top: 1px solid rgba(0,0,0,0.05);\n }\n\n .Card.Row .CardText {\n font-size: 1.2rem;\n }\n\n .CardTokenSymbol {\n width: 40%;\n min-width: 0;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .CardTokenName {\n text-align: right;\n opacity: 0.5;\n width: 60%;\n min-width: 0;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n \n .Card.Row .CardTokenName .CardText {\n font-size: 1rem;\n }\n\n .Card.Row .CardImage {\n width: 2.5rem;\n }\n\n .Card.Row .CardImage img {\n height: 1.9rem;\n width: 1.9rem;\n }\n\n a.Card, a.Card * {\n color: inherit;\n text-decoration: none;\n }\n\n .Card.transparent {\n background: none;\n box-shadow: none;\n }\n\n .Card.small {\n min-height: auto;\n padding: 0.5rem 0.5rem;\n margin: 0;\n }\n\n .CardImage.small {\n width: 1.7rem;\n }\n\n .CardImage.small img {\n height: 1.4rem;\n width: 1.4rem;\n }\n\n .Card.disabled {\n cursor: default;\n }\n\n .Card:hover:not(.disabled) {\n background: rgb(240,240,240);\n box-shadow: 0 0 0 rgba(0,0,0,0); \n }\n\n .Card:active:not(.disabled) {\n background: rgb(235,235,235);\n box-shadow: inset 0 0 6px rgba(0,0,0,0.02);\n color: inherit;\n }\n\n .Card:hover:not(.disabled) .CardAction {\n opacity: 0.4;\n }\n\n .CardImage, .CardBody, .CardAction, .CardInfo {\n align-items: center;\n display: flex;\n min-width: 0;\n padding: 0 0.4rem;\n }\n\n .CardImage {\n flex-basis: auto;\n flex-grow: 0;\n flex-shrink: 0;\n justify-content: center;\n position: relative;\n width: 3.6rem;\n }\n\n .CardBody {\n flex-basis: auto;\n flex-grow: 1;\n flex-shrink: 1;\n line-height: 1.4rem;\n padding-left: 0.6rem;\n text-align: left;\n }\n\n .CardBodyWrapper {\n min-width: 0;\n }\n\n .CardAction {\n flex-basis: auto;\n flex-shrink: 0;\n flex-grow: 0;\n padding-right: 0;\n margin-left: auto;\n }\n\n .Card.disabled .CardAction {\n opacity: 0; \n }\n\n .CardInfo {\n display: flex;\n flex-basis: auto;\n flex-direction: column;\n flex-grow: 0;\n flex-shrink: 1;\n justify-content: center;\n margin-left: auto; \n padding-right: 0;\n }\n\n .CardImage img {\n background: white;\n border-radius: 99rem;\n border: 1px solid white;\n box-shadow: 0 2px 8px rgb(0 0 0 / 10%);\n height: 2.8rem;\n position: relative;\n vertical-align: middle;\n width: 2.8rem;\n }\n\n .CardImage.square img {\n border-radius: 0;\n }\n\n .CardImage img.transparent {\n border: none;\n background: none;\n box-shadow: none;\n }\n \n .CardImage .BlockchainLogo {\n position: absolute;\n bottom: 0;\n right: 0;\n }\n\n .CardTitle {\n font-size: 0.9rem;\n color: rgb(150,150,150);\n }\n \n .CardText, a .CardText {\n color: ".concat(style.colors.text, ";\n flex: 1;\n font-size: 1.3rem;\n }\n\n .CardText strong {\n font-weight: 500;\n }\n\n .CardText small {\n font-size: 1.1rem;\n color: rgb(150,150,150);\n }\n\n .CardAction {\n opacity: 0.2;\n }\n\n .Card.More {\n display: inline-block;\n text-align: center;\n }\n ");
1693
+ return "\n\n .Card {\n align-items: center;\n background: rgb(255,255,255);\n border-radius: 13px;\n box-shadow: 0 0 8px rgba(0,0,0,0.03);\n cursor: pointer;\n display: flex;\n flex-direction: row;\n margin-bottom: 8px;\n min-height: 76px;\n padding: 16px 10px;\n width: 100%;\n }\n\n .Card.Row {\n border-radius: 0;\n margin-bottom: 0;\n box-shadow: none;\n min-height: 69px;\n padding: 7px 21px;\n border-top: 1px solid rgba(0,0,0,0.05);\n }\n\n .Card.Row .CardText {\n font-size: 19px;\n line-height: 40px;\n }\n\n .CardTokenSymbol {\n width: 40%;\n min-width: 0;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .CardTokenName {\n text-align: right;\n opacity: 0.5;\n width: 60%;\n min-width: 0;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n \n .Card.Row .CardTokenName .CardText {\n font-size: 17px;\n }\n\n .Card.Row .CardImage {\n width: 40px;\n }\n\n .Card.Row .CardImage img {\n height: 30px;\n width: 30px;\n }\n\n a.Card, a.Card * {\n color: inherit;\n text-decoration: none;\n }\n\n .Card.transparent {\n background: none;\n box-shadow: none;\n }\n\n .Card.small {\n min-height: auto;\n padding: 8px 8px;\n margin: 0;\n }\n\n .CardImage.small {\n width: 27px;\n }\n\n .CardImage.small img {\n height: 27px;\n width: 27px;\n }\n\n .Card.disabled {\n cursor: default;\n }\n\n .Card:hover:not(.disabled) {\n background: rgb(240,240,240);\n box-shadow: 0 0 0 rgba(0,0,0,0); \n }\n\n .Card:active:not(.disabled) {\n background: rgb(235,235,235);\n box-shadow: inset 0 0 6px rgba(0,0,0,0.02);\n color: inherit;\n }\n\n .Card:hover:not(.disabled) .CardAction {\n opacity: 0.4;\n }\n\n .CardImage, .CardBody, .CardAction, .CardInfo {\n align-items: center;\n display: flex;\n min-width: 0;\n padding: 0 7px;\n }\n\n .CardImage {\n flex-basis: auto;\n flex-grow: 0;\n flex-shrink: 0;\n justify-content: center;\n position: relative;\n width: 58px;\n }\n\n .CardBody {\n flex-basis: auto;\n flex-grow: 1;\n flex-shrink: 1;\n line-height: 27px;\n padding-left: 10px;\n text-align: left;\n }\n\n .CardBodyWrapper {\n min-width: 0;\n }\n\n .CardAction {\n flex-basis: auto;\n flex-shrink: 0;\n flex-grow: 0;\n padding-right: 0;\n margin-left: auto;\n }\n\n .Card.disabled .CardAction {\n opacity: 0; \n }\n\n .CardInfo {\n display: flex;\n flex-basis: auto;\n flex-direction: column;\n flex-grow: 0;\n flex-shrink: 1;\n justify-content: center;\n margin-left: auto; \n padding-right: 0;\n }\n\n .CardImage img {\n background: white;\n border-radius: 9999px;\n border: 1px solid white;\n box-shadow: 0 2px 8px rgb(0 0 0 / 10%);\n height: 45px;\n position: relative;\n vertical-align: middle;\n width: 45px;\n }\n\n .CardImage.square img {\n border-radius: 0;\n }\n\n .CardImage img.transparent {\n border: none;\n background: none;\n box-shadow: none;\n }\n \n .CardImage .BlockchainLogo {\n position: absolute;\n bottom: 0;\n right: 0;\n }\n\n .CardTitle {\n font-size: 15px;\n color: rgb(150,150,150);\n line-height: 20px;\n }\n \n .CardText, a .CardText {\n color: ".concat(style.colors.text, ";\n flex: 1;\n font-size: 21px;\n line-height: 26px;\n }\n\n .CardText strong {\n font-weight: 500;\n }\n\n .CardText.small, .CardText.small small {\n font-size: 18px;\n color: rgb(150,150,150);\n line-height: 20px;\n }\n\n .CardAction {\n opacity: 0.2;\n }\n\n .Card.More {\n display: inline-block;\n text-align: center;\n }\n ");
1694
1694
  });
1695
1695
 
1696
1696
  var DialogStyle = (function (style) {
1697
- return "\n\n .ReactDialogBackground {\n backdrop-filter: blur(5px);\n background: rgba(0,0,0,0.7);\n }\n\n .contained .ReactDialog {\n position: absolute;\n height: 100%;\n min-height: 100%;\n width: 100%;\n min-width: 100%;\n }\n\n .contained .ReactDialogBackground {\n position: absolute;\n }\n\n .contained .ReactDialog.ReactDialogOpen .ReactDialogAnimation {\n top: 0;\n }\n\n .Dialog {\n margin: 0 auto;\n position: relative;\n width: 420px;\n box-shadow: 0 0 20px rgba(0,0,0,0.1);\n border-radius: 0.8rem;\n background: rgb(248,248,248);\n }\n\n @media (max-width: 450px) {\n\n .Dialog {\n border-radius: 0;\n width: 100%;\n }\n }\n\n @media (orientation: portrait) and (max-width: 800px) {\n\n .ReactDialogAnimation {\n width: 100%;\n }\n\n .ReactDialog {\n height: 100%;\n min-height: 100%;\n }\n\n .ReactDialogStack {\n align-items: flex-end;\n }\n\n .Dialog {\n align-content: stretch;\n border-radius: 0.8rem;\n border-top-radius: 0.8rem;\n display: flex;\n flex-direction: column;\n }\n\n .DialogBody {\n flex: 1;\n align-items: flex-end;\n }\n\n .DialogFooter {\n padding-bottom: 20px;\n }\n\n .ReactDialogAnimation {\n margin-bottom: -100px !important;\n top: inherit !important;\n position: relative;\n transition: opacity 0.4s ease, margin-bottom 0.4s ease;\n }\n\n .ReactDialog.ReactDialogOpen .ReactDialogAnimation {\n margin-bottom: 0px !important;\n }\n\n .DialogFooter {\n border-bottom-left-radius: 0 !important;\n border-bottom-right-radius: 0 !important;\n }\n\n .ReactShadowDOMInsideContainer > .ReactDialog {\n align-items: flex-end;\n }\n }\n\n .DialogBody {\n background: rgb(248,248,248);\n overflow-x: hidden;\n overflow-y: auto;\n }\n\n .DialogBody.ScrollHeight {\n height: 30vh !important;\n max-height: 30vh !important;\n }\n\n .DialogHeader {\n background: rgb(248,248,248);\n border-top-left-radius: 0.8rem;\n border-top-right-radius: 0.8rem;\n min-height: 3.4rem;\n position: relative;\n width: 100%;\n }\n\n .DialogHeaderActionRight {\n position: absolute;\n top: 0;\n right: 0;\n height: 3rem;\n }\n\n .DialogHeaderActionLeft {\n position: absolute;\n top: 0;\n left: 0;\n height: 3rem;\n }\n\n .DialogFooter {\n background: rgb(248,248,248);\n border-bottom-left-radius: 0.8rem;\n border-bottom-right-radius: 0.8rem;\n line-height: 1.5rem;\n min-height: 2rem;\n position: relative;\n text-align: center;\n }\n\n ";
1697
+ return "\n\n .ReactDialogBackground {\n backdrop-filter: blur(5px);\n background: rgba(0,0,0,0.7);\n }\n\n .contained .ReactDialog {\n position: absolute;\n height: 100%;\n min-height: 100%;\n width: 100%;\n min-width: 100%;\n }\n\n .contained .ReactDialogBackground {\n position: absolute;\n }\n\n .contained .ReactDialog.ReactDialogOpen .ReactDialogAnimation {\n top: 0;\n }\n\n .Dialog {\n margin: 0 auto;\n position: relative;\n width: 420px;\n box-shadow: 0 0 20px rgba(0,0,0,0.1);\n border-radius: 13px;\n background: rgb(248,248,248);\n }\n\n @media (max-width: 450px) {\n\n .Dialog {\n border-radius: 0;\n width: 100%;\n }\n }\n\n @media (orientation: portrait) and (max-width: 800px) {\n\n .ReactDialogAnimation {\n width: 100%;\n }\n\n .ReactDialog {\n height: 100%;\n min-height: 100%;\n }\n\n .ReactDialogStack {\n align-items: flex-end;\n }\n\n .Dialog {\n align-content: stretch;\n border-radius: 13px;\n border-top-radius: 13px;\n display: flex;\n flex-direction: column;\n }\n\n .DialogBody {\n flex: 1;\n align-items: flex-end;\n }\n\n .DialogFooter {\n padding-bottom: 20px;\n }\n\n .ReactDialogAnimation {\n margin-bottom: -100px !important;\n top: inherit !important;\n position: relative;\n transition: opacity 0.4s ease, margin-bottom 0.4s ease;\n }\n\n .ReactDialog.ReactDialogOpen .ReactDialogAnimation {\n margin-bottom: 0px !important;\n }\n\n .DialogFooter {\n border-bottom-left-radius: 0 !important;\n border-bottom-right-radius: 0 !important;\n }\n\n .ReactShadowDOMInsideContainer > .ReactDialog {\n align-items: flex-end;\n }\n }\n\n .DialogBody {\n overflow-x: hidden;\n overflow-y: auto;\n }\n\n .DialogBody.ScrollHeight {\n height: 30vh !important;\n max-height: 30vh !important;\n }\n\n .DialogHeader {\n border-top-left-radius: 13px;\n border-top-right-radius: 13px;\n min-height: 54px;\n position: relative;\n width: 100%;\n }\n\n .DialogHeaderActionRight {\n position: absolute;\n top: 0;\n right: 0;\n height: 48px;\n }\n\n .DialogHeaderActionLeft {\n position: absolute;\n top: 0;\n left: 0;\n height: 48px;\n }\n\n .DialogFooter {\n border-bottom-left-radius: 13px;\n border-bottom-right-radius: 13px;\n line-height: 24px;\n min-height: 32px;\n position: relative;\n text-align: center;\n }\n\n ";
1698
1698
  });
1699
1699
 
1700
1700
  var FontStyle = (function (style) {
1701
- return "\n\n *, div, div * {\n font-family: ".concat(style.fontFamily, ";\n }\n\n .FontSizeS {\n font-size: 1rem;\n }\n\n .FontSizeM {\n font-size: 1.2rem;\n }\n\n .FontSizeL {\n font-size: 1.4rem;\n }\n\n .FontSizeXL {\n font-size: 2.0rem;\n }\n\n .FontWeightBold {\n font-weight: bold;\n }\n\n .FontItalic {\n font-style: italic;\n }\n ");
1701
+ return "\n\n *, div, div * {\n font-family: ".concat(style.fontFamily, ";\n }\n\n .FontSizeS {\n font-size: 16px;\n }\n\n .FontSizeM {\n font-size: 19px;\n }\n\n .FontSizeL {\n font-size: 23px;\n }\n\n .FontSizeXL {\n font-size: 32px;\n }\n\n .FontWeightBold {\n font-weight: bold;\n }\n\n .FontItalic {\n font-style: italic;\n }\n ");
1702
1702
  });
1703
1703
 
1704
1704
  var GraphicStyle = (function () {
@@ -1721,10 +1721,6 @@ var InputStyle = (function (style) {
1721
1721
  return "\n\n .Input {\n background: none;\n border: 1px solid transparent;\n margin: 0;\n outline: none !important;\n padding: 0 0 0 14px;\n width: 100%;\n }\n\n .Input::placeholder {\n color: rgb(210,210,210);\n }\n \n ";
1722
1722
  });
1723
1723
 
1724
- var LabelStyle = (function (style) {
1725
- return "\n\n .Label {\n background: rgb(248,248,248);\n border-radius: 999px;\n color: ".concat(style.colors.primary, ";\n font-size: 0.8rem;\n padding: 0.1rem 0.5rem;\n margin: 0.1rem;\n }\n\n ");
1726
- });
1727
-
1728
1724
  var LinkStyle = (function (style) {
1729
1725
  return "\n\n .Link {\n color: ".concat(style.colors.primary, ";\n cursor: pointer;\n text-decoration: none;\n }\n\n .Link:hover {\n filter: brightness(0.8);\n }\n\n .Link:active {\n filter: brightness(1.0);\n }\n ");
1730
1726
  });
@@ -1738,11 +1734,11 @@ var OpacityStyle = (function (style) {
1738
1734
  });
1739
1735
 
1740
1736
  var PaddingStyle = (function () {
1741
- return "\n\n .PaddingTopXS {\n padding-top: 0.2rem;\n }\n\n .PaddingRightXS {\n padding-right: 0.2rem;\n }\n\n .PaddingBottomXS {\n padding-bottom: 0.2rem;\n }\n\n .PaddingLeftXS {\n padding-left: 0.2rem; \n }\n\n .PaddingTopS {\n padding-top: 0.8rem;\n }\n\n .PaddingRightS {\n padding-right: 0.8rem;\n }\n\n .PaddingBottomS {\n padding-bottom: 0.8rem;\n }\n\n .PaddingLeftS {\n padding-left: 0.8rem; \n }\n\n .PaddingTopM {\n padding-top: 1.2rem;\n }\n\n .PaddingRightM {\n padding-right: 1.2rem;\n }\n\n .PaddingBottomM {\n padding-bottom: 1.2rem;\n }\n\n .PaddingLeftM {\n padding-left: 1.2rem; \n }\n\n .PaddingTopL {\n padding-top: 1.8rem;\n }\n\n .PaddingRightL {\n padding-right: 1.8rem;\n }\n\n .PaddingBottomL {\n padding-bottom: 1.8rem;\n }\n\n .PaddingLeftL {\n padding-left: 1.28em; \n }\n ";
1737
+ return "\n\n .PaddingTopXS {\n padding-top: 3px;\n }\n\n .PaddingRightXS {\n padding-right: 3px;\n }\n\n .PaddingBottomXS {\n padding-bottom: 3px;\n }\n\n .PaddingLeftXS {\n padding-left: 3px; \n }\n\n .PaddingTopS {\n padding-top: 13px;\n }\n\n .PaddingRightS {\n padding-right: 13px;\n }\n\n .PaddingBottomS {\n padding-bottom: 13px;\n }\n\n .PaddingLeftS {\n padding-left: 13px; \n }\n\n .PaddingTopM {\n padding-top: 19px;\n }\n\n .PaddingRightM {\n padding-right: 19px;\n }\n\n .PaddingBottomM {\n padding-bottom: 19px;\n }\n\n .PaddingLeftM {\n padding-left: 19px; \n }\n\n .PaddingTopL {\n padding-top: 29px;\n }\n\n .PaddingRightL {\n padding-right: 29px;\n }\n\n .PaddingBottomL {\n padding-bottom: 29px;\n }\n\n .PaddingLeftL {\n padding-left: 29px; \n }\n ";
1742
1738
  });
1743
1739
 
1744
1740
  var PoweredByStyle = (function (style) {
1745
- return "\n\n .PoweredByWrapper {\n display: block;\n left: 0;\n padding-top: 0.2rem;\n position: fixed;\n right: 0;\n text-align: center;\n top: 0;\n }\n\n .contained .PoweredByWrapper {\n position: absolute;\n }\n\n .PoweredByLink {\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\" !important;\n color: white;\n opacity: 0.4;\n display: inline-block;\n font-size: 0.78rem;\n font-style: italic;\n font-weight: bold;\n letter-spacing: -0.2px;\n margin-left: 0.5rem;\n text-decoration: none;\n }\n\n .PoweredByLink:hover, .PoweredByLink:active {\n opacity: 1.0;\n color: ".concat(style.colors.primary, ";\n }\n ");
1741
+ return "\n\n .PoweredByWrapper {\n display: block;\n left: 0;\n padding-top: 3px;\n position: fixed;\n right: 0;\n text-align: center;\n top: 0;\n }\n\n .contained .PoweredByWrapper {\n position: absolute;\n }\n\n .PoweredByLink {\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\" !important;\n color: white;\n opacity: 0.4;\n display: inline-block;\n font-size: 14px;\n font-style: italic;\n font-weight: bold;\n letter-spacing: -0.2px;\n margin-left: 8px;\n text-decoration: none;\n }\n\n .PoweredByLink:hover, .PoweredByLink:active {\n opacity: 1.0;\n color: ".concat(style.colors.primary, ";\n }\n ");
1746
1742
  });
1747
1743
 
1748
1744
  var RangeSliderStyle = (function (style) {
@@ -1754,7 +1750,7 @@ var ResetStyle = (function () {
1754
1750
  });
1755
1751
 
1756
1752
  var SearchStyle = (function (style) {
1757
- return "\n\n .Search {\n border-radius: 0.8rem;\n border: 1px solid rgba(0,0,0,0.2);\n outline: none !important;\n color: ".concat(style.colors.text, ";\n font-size: 1.2rem;\n padding: 0.8rem;\n width: 100%;\n }\n\n .Search::placeholder {\n color: rgb(180,180,180);\n } \n\n .Search:focus, .Search:focus-visible {\n border: 1px solid ").concat(style.colors.primary, ";\n }\n\n ");
1753
+ return "\n\n .Search {\n border-radius: 13px;\n border: 1px solid rgba(0,0,0,0.2);\n outline: none !important;\n color: ".concat(style.colors.text, ";\n font-size: 19px;\n padding: 13px;\n width: 100%;\n }\n\n .Search::placeholder {\n color: rgb(180,180,180);\n } \n\n .Search:focus, .Search:focus-visible {\n border: 1px solid ").concat(style.colors.primary, ";\n }\n\n ");
1758
1754
  });
1759
1755
 
1760
1756
  var SkeletonStyle = (function () {
@@ -1762,7 +1758,7 @@ var SkeletonStyle = (function () {
1762
1758
  });
1763
1759
 
1764
1760
  var TableStyle = (function (style) {
1765
- return "\n\n .Table {\n border-collapse: separate;\n border-radius: 0.4rem;\n border-style: hidden;\n border: 1px solid rgba(0,0,0,0.1);\n font-size: 94%;\n width: 100%;\n }\n\n .Table tr.small td {\n font-size: 90%;\n }\n\n .Table tr td {\n border-bottom: 1px solid rgba(0,0,0,0.1);\n word-break: break-all;\n }\n \n .Table tr:last-child td {\n border-bottom: none;\n }\n \n .Table tr td {\n padding: 0.5rem 0.9rem;\n text-align: left;\n }\n \n .Table tr td:first-child {\n width: 30%\n }\n\n .Table tr td:last-child {\n width: 70%\n }\n \n .Table .TableSubTitle {\n font-weight: 300;\n opacity: 0.7;\n }\n\n .Table tr td:last-child {\n font-weight: 500;\n }\n ";
1761
+ return "\n\n .Table {\n border-collapse: separate;\n border-radius: 7px;\n border-style: hidden;\n border: 1px solid rgba(0,0,0,0.1);\n width: 100%;\n }\n\n .Table tr.small td {\n font-size: 14px;\n }\n\n .Table tr td {\n border-bottom: 1px solid rgba(0,0,0,0.1);\n word-break: break-all;\n }\n \n .Table tr:last-child td {\n border-bottom: none;\n }\n \n .Table tr td {\n padding: 8px 15px;\n text-align: left;\n }\n \n .Table tr td:first-child {\n width: 30%\n }\n\n .Table tr td:last-child {\n width: 70%\n }\n \n .Table .TableSubTitle {\n font-weight: 300;\n opacity: 0.7;\n }\n\n .Table tr td:last-child {\n font-weight: 500;\n }\n ";
1766
1762
  });
1767
1763
 
1768
1764
  var TextButtonStyle = (function (style) {
@@ -1770,7 +1766,7 @@ var TextButtonStyle = (function (style) {
1770
1766
  });
1771
1767
 
1772
1768
  var TextStyle = (function (style) {
1773
- return "\n\n * {\n color: ".concat(style.colors.text, ";\n }\n\n h1, h2, h3, h4, h5, h6 {\n display: block;\n }\n\n .TextLeft, .TextLeft * {\n text-align: left;\n }\n\n .TextCenter, .TextCenter * {\n text-align: center;\n }\n\n .LineHeightL {\n line-height: 2.0rem;\n }\n\n .ErrorSnippetText {\n background: rgb(30, 30, 20);\n border-radius: 1.2rem;\n border: 0.5rem solid rgb(30, 30, 20);\n color: #00FF41;\n font-size: 0.9rem;\n font-style: italic;\n max-height: 100px;\n padding: 6px;\n overflow-wrap: break-word;\n overflow-y: auto;\n white-space: pre-wrap;\n word-wrap: break-word;\n }\n ");
1769
+ return "\n\n * {\n color: ".concat(style.colors.text, ";\n }\n\n h1, h2, h3, h4, h5, h6 {\n display: block;\n }\n\n .Text {\n font-size: 16px;\n line-height: 24px\n }\n\n .TextLeft, .TextLeft * {\n text-align: left;\n }\n\n .TextCenter, .TextCenter * {\n text-align: center;\n }\n\n .LineHeightL {\n line-height: 32px;\n }\n\n .ErrorSnippetText {\n background: rgb(30, 30, 20);\n border-radius: 19px;\n border: 8px solid rgb(30, 30, 20);\n color: #00FF41;\n font-size: 15px;\n font-style: italic;\n max-height: 100px;\n padding: 6px;\n overflow-wrap: break-word;\n overflow-y: auto;\n white-space: pre-wrap;\n word-wrap: break-word;\n }\n ");
1774
1770
  });
1775
1771
 
1776
1772
  var TokenAmountStyle = (function () {
@@ -1778,11 +1774,11 @@ var TokenAmountStyle = (function () {
1778
1774
  });
1779
1775
 
1780
1776
  var TokenImageStyle = (function (style) {
1781
- return "\n\n .TokenImage img {\n border-radius: 99rem;\n border: 1px solid white;\n background: white;\n box-shadow: 0 2px 8px rgb(0 0 0 / 10%);\n height: 2.8rem;\n position: relative;\n vertical-align: middle;\n width: 2.8rem;\n }\n\n .TokenImage.medium img {\n height: 5.8rem;\n width: 5.8rem;\n }\n ";
1777
+ return "\n\n .TokenImage img {\n border-radius: 9999px;\n border: 1px solid white;\n background: white;\n box-shadow: 0 2px 8px rgb(0 0 0 / 10%);\n height: 45px;\n position: relative;\n vertical-align: middle;\n width: 45px;\n }\n\n .TokenImage.medium img {\n height: 93px;\n width: 93px;\n }\n ";
1782
1778
  });
1783
1779
 
1784
1780
  var TooltipStyle = (function (style) {
1785
- return "\n\n .Tooltip {\n background: ".concat(style.colors.primary, ";\n border-radius: 0.6rem;\n color: ").concat(style.colors.buttonText, ";\n padding: 0.6rem 0.8rem;\n position: relative;\n box-shadow: 0 0 8px rgba(0,0,0,0.2);\n }\n\n .TooltipArrowUp {\n border-bottom: 10px solid ").concat(style.colors.primary, ";\n border-left: 10px solid transparent;\n border-right: 10px solid transparent;\n height: 0; \n left: 12px;\n position: absolute;\n top: -8px;\n width: 0; \n }\n ");
1781
+ return "\n\n .Tooltip {\n background: ".concat(style.colors.primary, ";\n border-radius: 10px;\n color: ").concat(style.colors.buttonText, ";\n padding: 10px 13px;\n position: relative;\n box-shadow: 0 0 8px rgba(0,0,0,0.2);\n }\n\n .TooltipArrowUp {\n border-bottom: 10px solid ").concat(style.colors.primary, ";\n border-left: 10px solid transparent;\n border-right: 10px solid transparent;\n height: 0; \n left: 12px;\n position: absolute;\n top: -8px;\n width: 0; \n }\n ");
1786
1782
  });
1787
1783
 
1788
1784
  var styleRenderer = (function (style) {
@@ -1795,7 +1791,7 @@ var styleRenderer = (function (style) {
1795
1791
  },
1796
1792
  fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
1797
1793
  }, style);
1798
- return [ResetStyle(), FontStyle(style), DialogStyle(), ButtonCircularStyle(), ButtonPrimaryStyle(style), CardStyle(style), PoweredByStyle(style), GraphicStyle(), SkeletonStyle(), TokenAmountStyle(), TextStyle(style), IconStyle(style), OpacityStyle(), PaddingStyle(), HeightStyle(), LabelStyle(style), LoadingTextStyle(style), RangeSliderStyle(style), InputStyle(), TextButtonStyle(style), ImageStyle(), BlockchainLogoStyle(), SearchStyle(style), TokenImageStyle(), AlertStyle(), TableStyle(), LinkStyle(style), TooltipStyle(style)].join('');
1794
+ return [ResetStyle(), DialogStyle(), ButtonCircularStyle(), ButtonPrimaryStyle(style), CardStyle(style), PoweredByStyle(style), GraphicStyle(), SkeletonStyle(), TokenAmountStyle(), TextStyle(style), FontStyle(style), IconStyle(style), OpacityStyle(), PaddingStyle(), HeightStyle(), LoadingTextStyle(style), RangeSliderStyle(style), InputStyle(), TextButtonStyle(style), ImageStyle(), BlockchainLogoStyle(), SearchStyle(style), TokenImageStyle(), AlertStyle(), TableStyle(), LinkStyle(style), TooltipStyle(style)].join('');
1799
1795
  });
1800
1796
 
1801
1797
  var mount = (function (_ref, content) {
@@ -3100,7 +3096,9 @@ var ChangeAmountDialog = (function (props) {
3100
3096
  style: {
3101
3097
  height: '40px'
3102
3098
  }
3103
- }, /*#__PURE__*/React.createElement("div", null, format(toValidStep(maxAmount)), /*#__PURE__*/React.createElement("button", {
3099
+ }, /*#__PURE__*/React.createElement("div", {
3100
+ className: "FontSizeS"
3101
+ }, format(toValidStep(maxAmount)), /*#__PURE__*/React.createElement("button", {
3104
3102
  className: "TextButton",
3105
3103
  onClick: function onClick() {
3106
3104
  changeAmount(toValidValue(maxAmount));
@@ -3227,7 +3225,7 @@ var ChangePaymentDialog = (function (props) {
3227
3225
  }, payment.symbol), /*#__PURE__*/React.createElement("span", null, "\xA0"), /*#__PURE__*/React.createElement("span", {
3228
3226
  className: "TokenAmountCell"
3229
3227
  }, format(payment.amount)))), /*#__PURE__*/React.createElement("h3", {
3230
- className: "CardText"
3228
+ className: "CardText small"
3231
3229
  }, /*#__PURE__*/React.createElement("small", null, format(round(parseFloat(payment.route.fromBalance.toString()) / Math.pow(10, payment.decimals), 'down')))))));
3232
3230
  }));
3233
3231
  }, [allPaymentRoutesWithData]);
@@ -4503,7 +4501,7 @@ var SignLoginDialog = (function (props) {
4503
4501
  }, "Wallet Login"), /*#__PURE__*/React.createElement("div", {
4504
4502
  className: "Text PaddingTopS PaddingBottomS PaddingLeftS PaddingRightS"
4505
4503
  }, /*#__PURE__*/React.createElement("p", {
4506
- className: "FontSizeM PaddingLeftM PaddingRightM"
4504
+ className: "FontSizeM PaddingLeftM PaddingRightM PaddingBottomS"
4507
4505
  }, "Please click \"Log in\" and sign the message with your connected wallet."))),
4508
4506
  footer: /*#__PURE__*/React.createElement("div", {
4509
4507
  className: "PaddingTopXS PaddingRightM PaddingLeftM PaddingBottomM"
@@ -5178,7 +5176,7 @@ var SaleOverviewDialog = (function (props) {
5178
5176
  }, toToken.symbol), /*#__PURE__*/React.createElement("span", null, "\xA0"), /*#__PURE__*/React.createElement("span", {
5179
5177
  className: "TokenAmountCell"
5180
5178
  }, format(toTokenReadableAmount)))), salePerTokenValue && /*#__PURE__*/React.createElement("h3", {
5181
- className: "CardText"
5179
+ className: "CardText small"
5182
5180
  }, /*#__PURE__*/React.createElement("small", null, salePerTokenValue, " per token")))), /*#__PURE__*/React.createElement("div", {
5183
5181
  className: "CardAction"
5184
5182
  }, /*#__PURE__*/React.createElement(ChevronRight, null))), /*#__PURE__*/React.createElement("div", {
@@ -5489,11 +5487,11 @@ var ConfirmTokenSelectionDialog = (function (props) {
5489
5487
  })), /*#__PURE__*/React.createElement("div", {
5490
5488
  className: "PaddingTopS TextCenter"
5491
5489
  }, /*#__PURE__*/React.createElement("div", {
5492
- className: "Alert"
5490
+ className: "Alert FontSizeS"
5493
5491
  }, /*#__PURE__*/React.createElement("strong", null, "Please review this information"))), /*#__PURE__*/React.createElement("div", {
5494
5492
  className: "PaddingTopXS"
5495
5493
  }, /*#__PURE__*/React.createElement("table", {
5496
- className: "Table TextLeft"
5494
+ className: "Table TextLeft FontSizeS"
5497
5495
  }, /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", {
5498
5496
  className: "small TextCenter"
5499
5497
  }, /*#__PURE__*/React.createElement("td", {
@@ -22999,7 +22997,7 @@ var SelectTokenDialog = (function (props) {
22999
22997
  className: "transparent",
23000
22998
  src: blockchain.logo
23001
22999
  })), /*#__PURE__*/React.createElement("div", {
23002
- className: "CardBody"
23000
+ className: "CardBody FontSizeS"
23003
23001
  }, blockchain.label), /*#__PURE__*/React.createElement("div", {
23004
23002
  className: "CardAction"
23005
23003
  }, /*#__PURE__*/React.createElement(ChevronRight, null)))), /*#__PURE__*/React.createElement("div", {
@@ -23027,7 +23025,7 @@ var SelectTokenDialog = (function (props) {
23027
23025
  }, /*#__PURE__*/React.createElement("div", {
23028
23026
  className: "PaddingTopXS PaddingBottomXS"
23029
23027
  }, /*#__PURE__*/React.createElement("div", {
23030
- className: "Link",
23028
+ className: "Link FontSizeS",
23031
23029
  onClick: onClickAddToken
23032
23030
  }, "Token missing? Add it.")))
23033
23031
  });
package/dist/umd/index.bundle.js CHANGED
@@ -49819,7 +49819,7 @@
49819
49819
  });
49820
49820
 
49821
49821
  var AlertStyle = (function (style) {
49822
- return "\n\n .Alert {\n background: rgba(0,0,0,0.08);\n border-radius: 0.4rem;\n font-weight: 500;\n padding: 0.5rem;\n }\n ";
49822
+ return "\n\n .Alert {\n background: rgba(0,0,0,0.08);\n border-radius: 7px;\n font-weight: 500;\n padding: 8px;\n }\n ";
49823
49823
  });
49824
49824
 
49825
49825
  var BlockchainLogoStyle = (function (style) {
@@ -49827,23 +49827,23 @@
49827
49827
  });
49828
49828
 
49829
49829
  var ButtonCircularStyle = (function () {
49830
- return "\n\n .ButtonCircular {\n border-radius: 99rem;\n cursor: pointer;\n height: 34px;\n opacity: 0.5;\n padding: 5px 4px 4px 4px;\n width: 34px;\n }\n\n .ButtonCircular:hover {\n background: rgba(0,0,0,0.1);\n opacity: 1;\n }\n\n .ButtonCircular:active {\n background: rgba(0,0,0,0.25);\n opacity: 1;\n }\n ";
49830
+ return "\n\n .ButtonCircular {\n border-radius: 9999px;\n cursor: pointer;\n height: 34px;\n opacity: 0.5;\n padding: 5px 4px 4px 4px;\n width: 34px;\n }\n\n .ButtonCircular:hover {\n background: rgba(0,0,0,0.1);\n opacity: 1;\n }\n\n .ButtonCircular:active {\n background: rgba(0,0,0,0.25);\n opacity: 1;\n }\n ";
49831
49831
  });
49832
49832
 
49833
49833
  var ButtonPrimaryStyle = (function (style) {
49834
- return "\n\n .ButtonPrimary {\n align-items: center;\n align-self: center;\n background: ".concat(style.colors.primary, ";\n border-radius: 0.8rem;\n border: 1px solid transparent;\n box-shadow: 0 0 16px rgba(0,0,0,0.1);\n font-size: 1.3rem;\n font-weight: 400;\n line-height: 2.8rem;\n height: 3.6rem;\n justify-content: center;\n width: 100%;\n overflow: hidden;\n padding: 0.4rem 0;\n position: relative;\n text-align: center;\n text-decoration: none;\n text-overflow: ellipsis;\n transition: background 0.1s;\n vertical-align: middle;\n display: inline-block;\n }\n\n .ButtonPrimary, .ButtonPrimary * {\n color: ").concat(style.colors.buttonText, ";\n }\n\n .ButtonPrimary.disabled {\n background: rgb(210,210,210);\n color: rgb(140,140,140);\n }\n\n .ButtonPrimary:not(.disabled){\n cursor: pointer;\n }\n .ButtonPrimary:not(.disabled):hover {\n box-shadow: inset 0 0 300px rgba(0,0,0,0.1);\n }\n .ButtonPrimary:not(.disabled):active {\n box-shadow: inset 0 0 300px rgba(0,0,0,0.2);\n }\n ");
49834
+ return "\n\n .ButtonPrimary {\n align-items: center;\n align-self: center;\n background: ".concat(style.colors.primary, ";\n border-radius: 13px;\n border: 1px solid transparent;\n box-shadow: 0 0 16px rgba(0,0,0,0.1);\n font-size: 21px;\n font-weight: 400;\n line-height: 45px;\n height: 58px;\n justify-content: center;\n width: 100%;\n overflow: hidden;\n padding: 7px 0;\n position: relative;\n text-align: center;\n text-decoration: none;\n text-overflow: ellipsis;\n transition: background 0.1s;\n vertical-align: middle;\n display: inline-block;\n }\n\n .ButtonPrimary, .ButtonPrimary * {\n color: ").concat(style.colors.buttonText, ";\n }\n\n .ButtonPrimary.disabled {\n background: rgb(210,210,210);\n color: rgb(140,140,140);\n }\n\n .ButtonPrimary:not(.disabled){\n cursor: pointer;\n }\n .ButtonPrimary:not(.disabled):hover {\n box-shadow: inset 0 0 300px rgba(0,0,0,0.1);\n }\n .ButtonPrimary:not(.disabled):active {\n box-shadow: inset 0 0 300px rgba(0,0,0,0.2);\n }\n ");
49835
49835
  });
49836
49836
 
49837
49837
  var CardStyle = (function (style) {
49838
- return "\n\n .Card {\n align-items: center;\n background: rgb(255,255,255);\n border-radius: 0.8rem;\n box-shadow: 0 0 8px rgba(0,0,0,0.03);\n cursor: pointer;\n display: flex;\n flex-direction: row;\n margin-bottom: 0.5rem;\n min-height: 4.78rem;\n padding: 1rem 0.6rem;\n width: 100%;\n }\n\n .Card.Row {\n border-radius: 0;\n margin-bottom: 0;\n box-shadow: none;\n min-height: 4.3rem;\n padding: 0.4rem 1.3rem;\n border-top: 1px solid rgba(0,0,0,0.05);\n }\n\n .Card.Row .CardText {\n font-size: 1.2rem;\n }\n\n .CardTokenSymbol {\n width: 40%;\n min-width: 0;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .CardTokenName {\n text-align: right;\n opacity: 0.5;\n width: 60%;\n min-width: 0;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n \n .Card.Row .CardTokenName .CardText {\n font-size: 1rem;\n }\n\n .Card.Row .CardImage {\n width: 2.5rem;\n }\n\n .Card.Row .CardImage img {\n height: 1.9rem;\n width: 1.9rem;\n }\n\n a.Card, a.Card * {\n color: inherit;\n text-decoration: none;\n }\n\n .Card.transparent {\n background: none;\n box-shadow: none;\n }\n\n .Card.small {\n min-height: auto;\n padding: 0.5rem 0.5rem;\n margin: 0;\n }\n\n .CardImage.small {\n width: 1.7rem;\n }\n\n .CardImage.small img {\n height: 1.4rem;\n width: 1.4rem;\n }\n\n .Card.disabled {\n cursor: default;\n }\n\n .Card:hover:not(.disabled) {\n background: rgb(240,240,240);\n box-shadow: 0 0 0 rgba(0,0,0,0); \n }\n\n .Card:active:not(.disabled) {\n background: rgb(235,235,235);\n box-shadow: inset 0 0 6px rgba(0,0,0,0.02);\n color: inherit;\n }\n\n .Card:hover:not(.disabled) .CardAction {\n opacity: 0.4;\n }\n\n .CardImage, .CardBody, .CardAction, .CardInfo {\n align-items: center;\n display: flex;\n min-width: 0;\n padding: 0 0.4rem;\n }\n\n .CardImage {\n flex-basis: auto;\n flex-grow: 0;\n flex-shrink: 0;\n justify-content: center;\n position: relative;\n width: 3.6rem;\n }\n\n .CardBody {\n flex-basis: auto;\n flex-grow: 1;\n flex-shrink: 1;\n line-height: 1.4rem;\n padding-left: 0.6rem;\n text-align: left;\n }\n\n .CardBodyWrapper {\n min-width: 0;\n }\n\n .CardAction {\n flex-basis: auto;\n flex-shrink: 0;\n flex-grow: 0;\n padding-right: 0;\n margin-left: auto;\n }\n\n .Card.disabled .CardAction {\n opacity: 0; \n }\n\n .CardInfo {\n display: flex;\n flex-basis: auto;\n flex-direction: column;\n flex-grow: 0;\n flex-shrink: 1;\n justify-content: center;\n margin-left: auto; \n padding-right: 0;\n }\n\n .CardImage img {\n background: white;\n border-radius: 99rem;\n border: 1px solid white;\n box-shadow: 0 2px 8px rgb(0 0 0 / 10%);\n height: 2.8rem;\n position: relative;\n vertical-align: middle;\n width: 2.8rem;\n }\n\n .CardImage.square img {\n border-radius: 0;\n }\n\n .CardImage img.transparent {\n border: none;\n background: none;\n box-shadow: none;\n }\n \n .CardImage .BlockchainLogo {\n position: absolute;\n bottom: 0;\n right: 0;\n }\n\n .CardTitle {\n font-size: 0.9rem;\n color: rgb(150,150,150);\n }\n \n .CardText, a .CardText {\n color: ".concat(style.colors.text, ";\n flex: 1;\n font-size: 1.3rem;\n }\n\n .CardText strong {\n font-weight: 500;\n }\n\n .CardText small {\n font-size: 1.1rem;\n color: rgb(150,150,150);\n }\n\n .CardAction {\n opacity: 0.2;\n }\n\n .Card.More {\n display: inline-block;\n text-align: center;\n }\n ");
49838
+ return "\n\n .Card {\n align-items: center;\n background: rgb(255,255,255);\n border-radius: 13px;\n box-shadow: 0 0 8px rgba(0,0,0,0.03);\n cursor: pointer;\n display: flex;\n flex-direction: row;\n margin-bottom: 8px;\n min-height: 76px;\n padding: 16px 10px;\n width: 100%;\n }\n\n .Card.Row {\n border-radius: 0;\n margin-bottom: 0;\n box-shadow: none;\n min-height: 69px;\n padding: 7px 21px;\n border-top: 1px solid rgba(0,0,0,0.05);\n }\n\n .Card.Row .CardText {\n font-size: 19px;\n line-height: 40px;\n }\n\n .CardTokenSymbol {\n width: 40%;\n min-width: 0;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .CardTokenName {\n text-align: right;\n opacity: 0.5;\n width: 60%;\n min-width: 0;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n \n .Card.Row .CardTokenName .CardText {\n font-size: 17px;\n }\n\n .Card.Row .CardImage {\n width: 40px;\n }\n\n .Card.Row .CardImage img {\n height: 30px;\n width: 30px;\n }\n\n a.Card, a.Card * {\n color: inherit;\n text-decoration: none;\n }\n\n .Card.transparent {\n background: none;\n box-shadow: none;\n }\n\n .Card.small {\n min-height: auto;\n padding: 8px 8px;\n margin: 0;\n }\n\n .CardImage.small {\n width: 27px;\n }\n\n .CardImage.small img {\n height: 27px;\n width: 27px;\n }\n\n .Card.disabled {\n cursor: default;\n }\n\n .Card:hover:not(.disabled) {\n background: rgb(240,240,240);\n box-shadow: 0 0 0 rgba(0,0,0,0); \n }\n\n .Card:active:not(.disabled) {\n background: rgb(235,235,235);\n box-shadow: inset 0 0 6px rgba(0,0,0,0.02);\n color: inherit;\n }\n\n .Card:hover:not(.disabled) .CardAction {\n opacity: 0.4;\n }\n\n .CardImage, .CardBody, .CardAction, .CardInfo {\n align-items: center;\n display: flex;\n min-width: 0;\n padding: 0 7px;\n }\n\n .CardImage {\n flex-basis: auto;\n flex-grow: 0;\n flex-shrink: 0;\n justify-content: center;\n position: relative;\n width: 58px;\n }\n\n .CardBody {\n flex-basis: auto;\n flex-grow: 1;\n flex-shrink: 1;\n line-height: 27px;\n padding-left: 10px;\n text-align: left;\n }\n\n .CardBodyWrapper {\n min-width: 0;\n }\n\n .CardAction {\n flex-basis: auto;\n flex-shrink: 0;\n flex-grow: 0;\n padding-right: 0;\n margin-left: auto;\n }\n\n .Card.disabled .CardAction {\n opacity: 0; \n }\n\n .CardInfo {\n display: flex;\n flex-basis: auto;\n flex-direction: column;\n flex-grow: 0;\n flex-shrink: 1;\n justify-content: center;\n margin-left: auto; \n padding-right: 0;\n }\n\n .CardImage img {\n background: white;\n border-radius: 9999px;\n border: 1px solid white;\n box-shadow: 0 2px 8px rgb(0 0 0 / 10%);\n height: 45px;\n position: relative;\n vertical-align: middle;\n width: 45px;\n }\n\n .CardImage.square img {\n border-radius: 0;\n }\n\n .CardImage img.transparent {\n border: none;\n background: none;\n box-shadow: none;\n }\n \n .CardImage .BlockchainLogo {\n position: absolute;\n bottom: 0;\n right: 0;\n }\n\n .CardTitle {\n font-size: 15px;\n color: rgb(150,150,150);\n line-height: 20px;\n }\n \n .CardText, a .CardText {\n color: ".concat(style.colors.text, ";\n flex: 1;\n font-size: 21px;\n line-height: 26px;\n }\n\n .CardText strong {\n font-weight: 500;\n }\n\n .CardText.small, .CardText.small small {\n font-size: 18px;\n color: rgb(150,150,150);\n line-height: 20px;\n }\n\n .CardAction {\n opacity: 0.2;\n }\n\n .Card.More {\n display: inline-block;\n text-align: center;\n }\n ");
49839
49839
  });
49840
49840
 
49841
49841
  var DialogStyle = (function (style) {
49842
- return "\n\n .ReactDialogBackground {\n backdrop-filter: blur(5px);\n background: rgba(0,0,0,0.7);\n }\n\n .contained .ReactDialog {\n position: absolute;\n height: 100%;\n min-height: 100%;\n width: 100%;\n min-width: 100%;\n }\n\n .contained .ReactDialogBackground {\n position: absolute;\n }\n\n .contained .ReactDialog.ReactDialogOpen .ReactDialogAnimation {\n top: 0;\n }\n\n .Dialog {\n margin: 0 auto;\n position: relative;\n width: 420px;\n box-shadow: 0 0 20px rgba(0,0,0,0.1);\n border-radius: 0.8rem;\n background: rgb(248,248,248);\n }\n\n @media (max-width: 450px) {\n\n .Dialog {\n border-radius: 0;\n width: 100%;\n }\n }\n\n @media (orientation: portrait) and (max-width: 800px) {\n\n .ReactDialogAnimation {\n width: 100%;\n }\n\n .ReactDialog {\n height: 100%;\n min-height: 100%;\n }\n\n .ReactDialogStack {\n align-items: flex-end;\n }\n\n .Dialog {\n align-content: stretch;\n border-radius: 0.8rem;\n border-top-radius: 0.8rem;\n display: flex;\n flex-direction: column;\n }\n\n .DialogBody {\n flex: 1;\n align-items: flex-end;\n }\n\n .DialogFooter {\n padding-bottom: 20px;\n }\n\n .ReactDialogAnimation {\n margin-bottom: -100px !important;\n top: inherit !important;\n position: relative;\n transition: opacity 0.4s ease, margin-bottom 0.4s ease;\n }\n\n .ReactDialog.ReactDialogOpen .ReactDialogAnimation {\n margin-bottom: 0px !important;\n }\n\n .DialogFooter {\n border-bottom-left-radius: 0 !important;\n border-bottom-right-radius: 0 !important;\n }\n\n .ReactShadowDOMInsideContainer > .ReactDialog {\n align-items: flex-end;\n }\n }\n\n .DialogBody {\n background: rgb(248,248,248);\n overflow-x: hidden;\n overflow-y: auto;\n }\n\n .DialogBody.ScrollHeight {\n height: 30vh !important;\n max-height: 30vh !important;\n }\n\n .DialogHeader {\n background: rgb(248,248,248);\n border-top-left-radius: 0.8rem;\n border-top-right-radius: 0.8rem;\n min-height: 3.4rem;\n position: relative;\n width: 100%;\n }\n\n .DialogHeaderActionRight {\n position: absolute;\n top: 0;\n right: 0;\n height: 3rem;\n }\n\n .DialogHeaderActionLeft {\n position: absolute;\n top: 0;\n left: 0;\n height: 3rem;\n }\n\n .DialogFooter {\n background: rgb(248,248,248);\n border-bottom-left-radius: 0.8rem;\n border-bottom-right-radius: 0.8rem;\n line-height: 1.5rem;\n min-height: 2rem;\n position: relative;\n text-align: center;\n }\n\n ";
49842
+ return "\n\n .ReactDialogBackground {\n backdrop-filter: blur(5px);\n background: rgba(0,0,0,0.7);\n }\n\n .contained .ReactDialog {\n position: absolute;\n height: 100%;\n min-height: 100%;\n width: 100%;\n min-width: 100%;\n }\n\n .contained .ReactDialogBackground {\n position: absolute;\n }\n\n .contained .ReactDialog.ReactDialogOpen .ReactDialogAnimation {\n top: 0;\n }\n\n .Dialog {\n margin: 0 auto;\n position: relative;\n width: 420px;\n box-shadow: 0 0 20px rgba(0,0,0,0.1);\n border-radius: 13px;\n background: rgb(248,248,248);\n }\n\n @media (max-width: 450px) {\n\n .Dialog {\n border-radius: 0;\n width: 100%;\n }\n }\n\n @media (orientation: portrait) and (max-width: 800px) {\n\n .ReactDialogAnimation {\n width: 100%;\n }\n\n .ReactDialog {\n height: 100%;\n min-height: 100%;\n }\n\n .ReactDialogStack {\n align-items: flex-end;\n }\n\n .Dialog {\n align-content: stretch;\n border-radius: 13px;\n border-top-radius: 13px;\n display: flex;\n flex-direction: column;\n }\n\n .DialogBody {\n flex: 1;\n align-items: flex-end;\n }\n\n .DialogFooter {\n padding-bottom: 20px;\n }\n\n .ReactDialogAnimation {\n margin-bottom: -100px !important;\n top: inherit !important;\n position: relative;\n transition: opacity 0.4s ease, margin-bottom 0.4s ease;\n }\n\n .ReactDialog.ReactDialogOpen .ReactDialogAnimation {\n margin-bottom: 0px !important;\n }\n\n .DialogFooter {\n border-bottom-left-radius: 0 !important;\n border-bottom-right-radius: 0 !important;\n }\n\n .ReactShadowDOMInsideContainer > .ReactDialog {\n align-items: flex-end;\n }\n }\n\n .DialogBody {\n overflow-x: hidden;\n overflow-y: auto;\n }\n\n .DialogBody.ScrollHeight {\n height: 30vh !important;\n max-height: 30vh !important;\n }\n\n .DialogHeader {\n border-top-left-radius: 13px;\n border-top-right-radius: 13px;\n min-height: 54px;\n position: relative;\n width: 100%;\n }\n\n .DialogHeaderActionRight {\n position: absolute;\n top: 0;\n right: 0;\n height: 48px;\n }\n\n .DialogHeaderActionLeft {\n position: absolute;\n top: 0;\n left: 0;\n height: 48px;\n }\n\n .DialogFooter {\n border-bottom-left-radius: 13px;\n border-bottom-right-radius: 13px;\n line-height: 24px;\n min-height: 32px;\n position: relative;\n text-align: center;\n }\n\n ";
49843
49843
  });
49844
49844
 
49845
49845
  var FontStyle = (function (style) {
49846
- return "\n\n *, div, div * {\n font-family: ".concat(style.fontFamily, ";\n }\n\n .FontSizeS {\n font-size: 1rem;\n }\n\n .FontSizeM {\n font-size: 1.2rem;\n }\n\n .FontSizeL {\n font-size: 1.4rem;\n }\n\n .FontSizeXL {\n font-size: 2.0rem;\n }\n\n .FontWeightBold {\n font-weight: bold;\n }\n\n .FontItalic {\n font-style: italic;\n }\n ");
49846
+ return "\n\n *, div, div * {\n font-family: ".concat(style.fontFamily, ";\n }\n\n .FontSizeS {\n font-size: 16px;\n }\n\n .FontSizeM {\n font-size: 19px;\n }\n\n .FontSizeL {\n font-size: 23px;\n }\n\n .FontSizeXL {\n font-size: 32px;\n }\n\n .FontWeightBold {\n font-weight: bold;\n }\n\n .FontItalic {\n font-style: italic;\n }\n ");
49847
49847
  });
49848
49848
 
49849
49849
  var GraphicStyle = (function () {
@@ -49866,10 +49866,6 @@
49866
49866
  return "\n\n .Input {\n background: none;\n border: 1px solid transparent;\n margin: 0;\n outline: none !important;\n padding: 0 0 0 14px;\n width: 100%;\n }\n\n .Input::placeholder {\n color: rgb(210,210,210);\n }\n \n ";
49867
49867
  });
49868
49868
 
49869
- var LabelStyle = (function (style) {
49870
- return "\n\n .Label {\n background: rgb(248,248,248);\n border-radius: 999px;\n color: ".concat(style.colors.primary, ";\n font-size: 0.8rem;\n padding: 0.1rem 0.5rem;\n margin: 0.1rem;\n }\n\n ");
49871
- });
49872
-
49873
49869
  var LinkStyle = (function (style) {
49874
49870
  return "\n\n .Link {\n color: ".concat(style.colors.primary, ";\n cursor: pointer;\n text-decoration: none;\n }\n\n .Link:hover {\n filter: brightness(0.8);\n }\n\n .Link:active {\n filter: brightness(1.0);\n }\n ");
49875
49871
  });
@@ -49883,11 +49879,11 @@
49883
49879
  });
49884
49880
 
49885
49881
  var PaddingStyle = (function () {
49886
- return "\n\n .PaddingTopXS {\n padding-top: 0.2rem;\n }\n\n .PaddingRightXS {\n padding-right: 0.2rem;\n }\n\n .PaddingBottomXS {\n padding-bottom: 0.2rem;\n }\n\n .PaddingLeftXS {\n padding-left: 0.2rem; \n }\n\n .PaddingTopS {\n padding-top: 0.8rem;\n }\n\n .PaddingRightS {\n padding-right: 0.8rem;\n }\n\n .PaddingBottomS {\n padding-bottom: 0.8rem;\n }\n\n .PaddingLeftS {\n padding-left: 0.8rem; \n }\n\n .PaddingTopM {\n padding-top: 1.2rem;\n }\n\n .PaddingRightM {\n padding-right: 1.2rem;\n }\n\n .PaddingBottomM {\n padding-bottom: 1.2rem;\n }\n\n .PaddingLeftM {\n padding-left: 1.2rem; \n }\n\n .PaddingTopL {\n padding-top: 1.8rem;\n }\n\n .PaddingRightL {\n padding-right: 1.8rem;\n }\n\n .PaddingBottomL {\n padding-bottom: 1.8rem;\n }\n\n .PaddingLeftL {\n padding-left: 1.28em; \n }\n ";
49882
+ return "\n\n .PaddingTopXS {\n padding-top: 3px;\n }\n\n .PaddingRightXS {\n padding-right: 3px;\n }\n\n .PaddingBottomXS {\n padding-bottom: 3px;\n }\n\n .PaddingLeftXS {\n padding-left: 3px; \n }\n\n .PaddingTopS {\n padding-top: 13px;\n }\n\n .PaddingRightS {\n padding-right: 13px;\n }\n\n .PaddingBottomS {\n padding-bottom: 13px;\n }\n\n .PaddingLeftS {\n padding-left: 13px; \n }\n\n .PaddingTopM {\n padding-top: 19px;\n }\n\n .PaddingRightM {\n padding-right: 19px;\n }\n\n .PaddingBottomM {\n padding-bottom: 19px;\n }\n\n .PaddingLeftM {\n padding-left: 19px; \n }\n\n .PaddingTopL {\n padding-top: 29px;\n }\n\n .PaddingRightL {\n padding-right: 29px;\n }\n\n .PaddingBottomL {\n padding-bottom: 29px;\n }\n\n .PaddingLeftL {\n padding-left: 29px; \n }\n ";
49887
49883
  });
49888
49884
 
49889
49885
  var PoweredByStyle = (function (style) {
49890
- return "\n\n .PoweredByWrapper {\n display: block;\n left: 0;\n padding-top: 0.2rem;\n position: fixed;\n right: 0;\n text-align: center;\n top: 0;\n }\n\n .contained .PoweredByWrapper {\n position: absolute;\n }\n\n .PoweredByLink {\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\" !important;\n color: white;\n opacity: 0.4;\n display: inline-block;\n font-size: 0.78rem;\n font-style: italic;\n font-weight: bold;\n letter-spacing: -0.2px;\n margin-left: 0.5rem;\n text-decoration: none;\n }\n\n .PoweredByLink:hover, .PoweredByLink:active {\n opacity: 1.0;\n color: ".concat(style.colors.primary, ";\n }\n ");
49886
+ return "\n\n .PoweredByWrapper {\n display: block;\n left: 0;\n padding-top: 3px;\n position: fixed;\n right: 0;\n text-align: center;\n top: 0;\n }\n\n .contained .PoweredByWrapper {\n position: absolute;\n }\n\n .PoweredByLink {\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\" !important;\n color: white;\n opacity: 0.4;\n display: inline-block;\n font-size: 14px;\n font-style: italic;\n font-weight: bold;\n letter-spacing: -0.2px;\n margin-left: 8px;\n text-decoration: none;\n }\n\n .PoweredByLink:hover, .PoweredByLink:active {\n opacity: 1.0;\n color: ".concat(style.colors.primary, ";\n }\n ");
49891
49887
  });
49892
49888
 
49893
49889
  var RangeSliderStyle = (function (style) {
@@ -49899,7 +49895,7 @@
49899
49895
  });
49900
49896
 
49901
49897
  var SearchStyle = (function (style) {
49902
- return "\n\n .Search {\n border-radius: 0.8rem;\n border: 1px solid rgba(0,0,0,0.2);\n outline: none !important;\n color: ".concat(style.colors.text, ";\n font-size: 1.2rem;\n padding: 0.8rem;\n width: 100%;\n }\n\n .Search::placeholder {\n color: rgb(180,180,180);\n } \n\n .Search:focus, .Search:focus-visible {\n border: 1px solid ").concat(style.colors.primary, ";\n }\n\n ");
49898
+ return "\n\n .Search {\n border-radius: 13px;\n border: 1px solid rgba(0,0,0,0.2);\n outline: none !important;\n color: ".concat(style.colors.text, ";\n font-size: 19px;\n padding: 13px;\n width: 100%;\n }\n\n .Search::placeholder {\n color: rgb(180,180,180);\n } \n\n .Search:focus, .Search:focus-visible {\n border: 1px solid ").concat(style.colors.primary, ";\n }\n\n ");
49903
49899
  });
49904
49900
 
49905
49901
  var SkeletonStyle = (function () {
@@ -49907,7 +49903,7 @@
49907
49903
  });
49908
49904
 
49909
49905
  var TableStyle = (function (style) {
49910
- return "\n\n .Table {\n border-collapse: separate;\n border-radius: 0.4rem;\n border-style: hidden;\n border: 1px solid rgba(0,0,0,0.1);\n font-size: 94%;\n width: 100%;\n }\n\n .Table tr.small td {\n font-size: 90%;\n }\n\n .Table tr td {\n border-bottom: 1px solid rgba(0,0,0,0.1);\n word-break: break-all;\n }\n \n .Table tr:last-child td {\n border-bottom: none;\n }\n \n .Table tr td {\n padding: 0.5rem 0.9rem;\n text-align: left;\n }\n \n .Table tr td:first-child {\n width: 30%\n }\n\n .Table tr td:last-child {\n width: 70%\n }\n \n .Table .TableSubTitle {\n font-weight: 300;\n opacity: 0.7;\n }\n\n .Table tr td:last-child {\n font-weight: 500;\n }\n ";
49906
+ return "\n\n .Table {\n border-collapse: separate;\n border-radius: 7px;\n border-style: hidden;\n border: 1px solid rgba(0,0,0,0.1);\n width: 100%;\n }\n\n .Table tr.small td {\n font-size: 14px;\n }\n\n .Table tr td {\n border-bottom: 1px solid rgba(0,0,0,0.1);\n word-break: break-all;\n }\n \n .Table tr:last-child td {\n border-bottom: none;\n }\n \n .Table tr td {\n padding: 8px 15px;\n text-align: left;\n }\n \n .Table tr td:first-child {\n width: 30%\n }\n\n .Table tr td:last-child {\n width: 70%\n }\n \n .Table .TableSubTitle {\n font-weight: 300;\n opacity: 0.7;\n }\n\n .Table tr td:last-child {\n font-weight: 500;\n }\n ";
49911
49907
  });
49912
49908
 
49913
49909
  var TextButtonStyle = (function (style) {
@@ -49915,7 +49911,7 @@
49915
49911
  });
49916
49912
 
49917
49913
  var TextStyle = (function (style) {
49918
- return "\n\n * {\n color: ".concat(style.colors.text, ";\n }\n\n h1, h2, h3, h4, h5, h6 {\n display: block;\n }\n\n .TextLeft, .TextLeft * {\n text-align: left;\n }\n\n .TextCenter, .TextCenter * {\n text-align: center;\n }\n\n .LineHeightL {\n line-height: 2.0rem;\n }\n\n .ErrorSnippetText {\n background: rgb(30, 30, 20);\n border-radius: 1.2rem;\n border: 0.5rem solid rgb(30, 30, 20);\n color: #00FF41;\n font-size: 0.9rem;\n font-style: italic;\n max-height: 100px;\n padding: 6px;\n overflow-wrap: break-word;\n overflow-y: auto;\n white-space: pre-wrap;\n word-wrap: break-word;\n }\n ");
49914
+ return "\n\n * {\n color: ".concat(style.colors.text, ";\n }\n\n h1, h2, h3, h4, h5, h6 {\n display: block;\n }\n\n .Text {\n font-size: 16px;\n line-height: 24px\n }\n\n .TextLeft, .TextLeft * {\n text-align: left;\n }\n\n .TextCenter, .TextCenter * {\n text-align: center;\n }\n\n .LineHeightL {\n line-height: 32px;\n }\n\n .ErrorSnippetText {\n background: rgb(30, 30, 20);\n border-radius: 19px;\n border: 8px solid rgb(30, 30, 20);\n color: #00FF41;\n font-size: 15px;\n font-style: italic;\n max-height: 100px;\n padding: 6px;\n overflow-wrap: break-word;\n overflow-y: auto;\n white-space: pre-wrap;\n word-wrap: break-word;\n }\n ");
49919
49915
  });
49920
49916
 
49921
49917
  var TokenAmountStyle = (function () {
@@ -49923,11 +49919,11 @@
49923
49919
  });
49924
49920
 
49925
49921
  var TokenImageStyle = (function (style) {
49926
- return "\n\n .TokenImage img {\n border-radius: 99rem;\n border: 1px solid white;\n background: white;\n box-shadow: 0 2px 8px rgb(0 0 0 / 10%);\n height: 2.8rem;\n position: relative;\n vertical-align: middle;\n width: 2.8rem;\n }\n\n .TokenImage.medium img {\n height: 5.8rem;\n width: 5.8rem;\n }\n ";
49922
+ return "\n\n .TokenImage img {\n border-radius: 9999px;\n border: 1px solid white;\n background: white;\n box-shadow: 0 2px 8px rgb(0 0 0 / 10%);\n height: 45px;\n position: relative;\n vertical-align: middle;\n width: 45px;\n }\n\n .TokenImage.medium img {\n height: 93px;\n width: 93px;\n }\n ";
49927
49923
  });
49928
49924
 
49929
49925
  var TooltipStyle = (function (style) {
49930
- return "\n\n .Tooltip {\n background: ".concat(style.colors.primary, ";\n border-radius: 0.6rem;\n color: ").concat(style.colors.buttonText, ";\n padding: 0.6rem 0.8rem;\n position: relative;\n box-shadow: 0 0 8px rgba(0,0,0,0.2);\n }\n\n .TooltipArrowUp {\n border-bottom: 10px solid ").concat(style.colors.primary, ";\n border-left: 10px solid transparent;\n border-right: 10px solid transparent;\n height: 0; \n left: 12px;\n position: absolute;\n top: -8px;\n width: 0; \n }\n ");
49926
+ return "\n\n .Tooltip {\n background: ".concat(style.colors.primary, ";\n border-radius: 10px;\n color: ").concat(style.colors.buttonText, ";\n padding: 10px 13px;\n position: relative;\n box-shadow: 0 0 8px rgba(0,0,0,0.2);\n }\n\n .TooltipArrowUp {\n border-bottom: 10px solid ").concat(style.colors.primary, ";\n border-left: 10px solid transparent;\n border-right: 10px solid transparent;\n height: 0; \n left: 12px;\n position: absolute;\n top: -8px;\n width: 0; \n }\n ");
49931
49927
  });
49932
49928
 
49933
49929
  var styleRenderer = (function (style) {
@@ -49940,7 +49936,7 @@
49940
49936
  },
49941
49937
  fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
49942
49938
  }, style);
49943
- return [ResetStyle(), FontStyle(style), DialogStyle(), ButtonCircularStyle(), ButtonPrimaryStyle(style), CardStyle(style), PoweredByStyle(style), GraphicStyle(), SkeletonStyle(), TokenAmountStyle(), TextStyle(style), IconStyle(style), OpacityStyle(), PaddingStyle(), HeightStyle(), LabelStyle(style), LoadingTextStyle(style), RangeSliderStyle(style), InputStyle(), TextButtonStyle(style), ImageStyle(), BlockchainLogoStyle(), SearchStyle(style), TokenImageStyle(), AlertStyle(), TableStyle(), LinkStyle(style), TooltipStyle(style)].join('');
49939
+ return [ResetStyle(), DialogStyle(), ButtonCircularStyle(), ButtonPrimaryStyle(style), CardStyle(style), PoweredByStyle(style), GraphicStyle(), SkeletonStyle(), TokenAmountStyle(), TextStyle(style), FontStyle(style), IconStyle(style), OpacityStyle(), PaddingStyle(), HeightStyle(), LoadingTextStyle(style), RangeSliderStyle(style), InputStyle(), TextButtonStyle(style), ImageStyle(), BlockchainLogoStyle(), SearchStyle(style), TokenImageStyle(), AlertStyle(), TableStyle(), LinkStyle(style), TooltipStyle(style)].join('');
49944
49940
  });
49945
49941
 
49946
49942
  const insideContainerClass = 'ReactShadowDOMInsideContainer';
@@ -87961,7 +87957,9 @@
87961
87957
  style: {
87962
87958
  height: '40px'
87963
87959
  }
87964
- }, /*#__PURE__*/react.createElement("div", null, format(toValidStep(maxAmount)), /*#__PURE__*/react.createElement("button", {
87960
+ }, /*#__PURE__*/react.createElement("div", {
87961
+ className: "FontSizeS"
87962
+ }, format(toValidStep(maxAmount)), /*#__PURE__*/react.createElement("button", {
87965
87963
  className: "TextButton",
87966
87964
  onClick: function onClick() {
87967
87965
  changeAmount(toValidValue(maxAmount));
@@ -88088,7 +88086,7 @@
88088
88086
  }, payment.symbol), /*#__PURE__*/react.createElement("span", null, "\xA0"), /*#__PURE__*/react.createElement("span", {
88089
88087
  className: "TokenAmountCell"
88090
88088
  }, format(payment.amount)))), /*#__PURE__*/react.createElement("h3", {
88091
- className: "CardText"
88089
+ className: "CardText small"
88092
88090
  }, /*#__PURE__*/react.createElement("small", null, format(round$1(parseFloat(payment.route.fromBalance.toString()) / Math.pow(10, payment.decimals), 'down')))))));
88093
88091
  }));
88094
88092
  }, [allPaymentRoutesWithData]);
@@ -89364,7 +89362,7 @@
89364
89362
  }, "Wallet Login"), /*#__PURE__*/react.createElement("div", {
89365
89363
  className: "Text PaddingTopS PaddingBottomS PaddingLeftS PaddingRightS"
89366
89364
  }, /*#__PURE__*/react.createElement("p", {
89367
- className: "FontSizeM PaddingLeftM PaddingRightM"
89365
+ className: "FontSizeM PaddingLeftM PaddingRightM PaddingBottomS"
89368
89366
  }, "Please click \"Log in\" and sign the message with your connected wallet."))),
89369
89367
  footer: /*#__PURE__*/react.createElement("div", {
89370
89368
  className: "PaddingTopXS PaddingRightM PaddingLeftM PaddingBottomM"
@@ -90039,7 +90037,7 @@
90039
90037
  }, toToken.symbol), /*#__PURE__*/react.createElement("span", null, "\xA0"), /*#__PURE__*/react.createElement("span", {
90040
90038
  className: "TokenAmountCell"
90041
90039
  }, format(toTokenReadableAmount)))), salePerTokenValue && /*#__PURE__*/react.createElement("h3", {
90042
- className: "CardText"
90040
+ className: "CardText small"
90043
90041
  }, /*#__PURE__*/react.createElement("small", null, salePerTokenValue, " per token")))), /*#__PURE__*/react.createElement("div", {
90044
90042
  className: "CardAction"
90045
90043
  }, /*#__PURE__*/react.createElement(ChevronRight, null))), /*#__PURE__*/react.createElement("div", {
@@ -90350,11 +90348,11 @@
90350
90348
  })), /*#__PURE__*/react.createElement("div", {
90351
90349
  className: "PaddingTopS TextCenter"
90352
90350
  }, /*#__PURE__*/react.createElement("div", {
90353
- className: "Alert"
90351
+ className: "Alert FontSizeS"
90354
90352
  }, /*#__PURE__*/react.createElement("strong", null, "Please review this information"))), /*#__PURE__*/react.createElement("div", {
90355
90353
  className: "PaddingTopXS"
90356
90354
  }, /*#__PURE__*/react.createElement("table", {
90357
- className: "Table TextLeft"
90355
+ className: "Table TextLeft FontSizeS"
90358
90356
  }, /*#__PURE__*/react.createElement("tbody", null, /*#__PURE__*/react.createElement("tr", {
90359
90357
  className: "small TextCenter"
90360
90358
  }, /*#__PURE__*/react.createElement("td", {
@@ -107860,7 +107858,7 @@
107860
107858
  className: "transparent",
107861
107859
  src: blockchain.logo
107862
107860
  })), /*#__PURE__*/react.createElement("div", {
107863
- className: "CardBody"
107861
+ className: "CardBody FontSizeS"
107864
107862
  }, blockchain.label), /*#__PURE__*/react.createElement("div", {
107865
107863
  className: "CardAction"
107866
107864
  }, /*#__PURE__*/react.createElement(ChevronRight, null)))), /*#__PURE__*/react.createElement("div", {
@@ -107888,7 +107886,7 @@
107888
107886
  }, /*#__PURE__*/react.createElement("div", {
107889
107887
  className: "PaddingTopXS PaddingBottomXS"
107890
107888
  }, /*#__PURE__*/react.createElement("div", {
107891
- className: "Link",
107889
+ className: "Link FontSizeS",
107892
107890
  onClick: onClickAddToken
107893
107891
  }, "Token missing? Add it.")))
107894
107892
  });
package/dist/umd/index.js CHANGED
@@ -1669,7 +1669,7 @@
1669
1669
  });
1670
1670
 
1671
1671
  var AlertStyle = (function (style) {
1672
- return "\n\n .Alert {\n background: rgba(0,0,0,0.08);\n border-radius: 0.4rem;\n font-weight: 500;\n padding: 0.5rem;\n }\n ";
1672
+ return "\n\n .Alert {\n background: rgba(0,0,0,0.08);\n border-radius: 7px;\n font-weight: 500;\n padding: 8px;\n }\n ";
1673
1673
  });
1674
1674
 
1675
1675
  var BlockchainLogoStyle = (function (style) {
@@ -1677,23 +1677,23 @@
1677
1677
  });
1678
1678
 
1679
1679
  var ButtonCircularStyle = (function () {
1680
- return "\n\n .ButtonCircular {\n border-radius: 99rem;\n cursor: pointer;\n height: 34px;\n opacity: 0.5;\n padding: 5px 4px 4px 4px;\n width: 34px;\n }\n\n .ButtonCircular:hover {\n background: rgba(0,0,0,0.1);\n opacity: 1;\n }\n\n .ButtonCircular:active {\n background: rgba(0,0,0,0.25);\n opacity: 1;\n }\n ";
1680
+ return "\n\n .ButtonCircular {\n border-radius: 9999px;\n cursor: pointer;\n height: 34px;\n opacity: 0.5;\n padding: 5px 4px 4px 4px;\n width: 34px;\n }\n\n .ButtonCircular:hover {\n background: rgba(0,0,0,0.1);\n opacity: 1;\n }\n\n .ButtonCircular:active {\n background: rgba(0,0,0,0.25);\n opacity: 1;\n }\n ";
1681
1681
  });
1682
1682
 
1683
1683
  var ButtonPrimaryStyle = (function (style) {
1684
- return "\n\n .ButtonPrimary {\n align-items: center;\n align-self: center;\n background: ".concat(style.colors.primary, ";\n border-radius: 0.8rem;\n border: 1px solid transparent;\n box-shadow: 0 0 16px rgba(0,0,0,0.1);\n font-size: 1.3rem;\n font-weight: 400;\n line-height: 2.8rem;\n height: 3.6rem;\n justify-content: center;\n width: 100%;\n overflow: hidden;\n padding: 0.4rem 0;\n position: relative;\n text-align: center;\n text-decoration: none;\n text-overflow: ellipsis;\n transition: background 0.1s;\n vertical-align: middle;\n display: inline-block;\n }\n\n .ButtonPrimary, .ButtonPrimary * {\n color: ").concat(style.colors.buttonText, ";\n }\n\n .ButtonPrimary.disabled {\n background: rgb(210,210,210);\n color: rgb(140,140,140);\n }\n\n .ButtonPrimary:not(.disabled){\n cursor: pointer;\n }\n .ButtonPrimary:not(.disabled):hover {\n box-shadow: inset 0 0 300px rgba(0,0,0,0.1);\n }\n .ButtonPrimary:not(.disabled):active {\n box-shadow: inset 0 0 300px rgba(0,0,0,0.2);\n }\n ");
1684
+ return "\n\n .ButtonPrimary {\n align-items: center;\n align-self: center;\n background: ".concat(style.colors.primary, ";\n border-radius: 13px;\n border: 1px solid transparent;\n box-shadow: 0 0 16px rgba(0,0,0,0.1);\n font-size: 21px;\n font-weight: 400;\n line-height: 45px;\n height: 58px;\n justify-content: center;\n width: 100%;\n overflow: hidden;\n padding: 7px 0;\n position: relative;\n text-align: center;\n text-decoration: none;\n text-overflow: ellipsis;\n transition: background 0.1s;\n vertical-align: middle;\n display: inline-block;\n }\n\n .ButtonPrimary, .ButtonPrimary * {\n color: ").concat(style.colors.buttonText, ";\n }\n\n .ButtonPrimary.disabled {\n background: rgb(210,210,210);\n color: rgb(140,140,140);\n }\n\n .ButtonPrimary:not(.disabled){\n cursor: pointer;\n }\n .ButtonPrimary:not(.disabled):hover {\n box-shadow: inset 0 0 300px rgba(0,0,0,0.1);\n }\n .ButtonPrimary:not(.disabled):active {\n box-shadow: inset 0 0 300px rgba(0,0,0,0.2);\n }\n ");
1685
1685
  });
1686
1686
 
1687
1687
  var CardStyle = (function (style) {
1688
- return "\n\n .Card {\n align-items: center;\n background: rgb(255,255,255);\n border-radius: 0.8rem;\n box-shadow: 0 0 8px rgba(0,0,0,0.03);\n cursor: pointer;\n display: flex;\n flex-direction: row;\n margin-bottom: 0.5rem;\n min-height: 4.78rem;\n padding: 1rem 0.6rem;\n width: 100%;\n }\n\n .Card.Row {\n border-radius: 0;\n margin-bottom: 0;\n box-shadow: none;\n min-height: 4.3rem;\n padding: 0.4rem 1.3rem;\n border-top: 1px solid rgba(0,0,0,0.05);\n }\n\n .Card.Row .CardText {\n font-size: 1.2rem;\n }\n\n .CardTokenSymbol {\n width: 40%;\n min-width: 0;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .CardTokenName {\n text-align: right;\n opacity: 0.5;\n width: 60%;\n min-width: 0;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n \n .Card.Row .CardTokenName .CardText {\n font-size: 1rem;\n }\n\n .Card.Row .CardImage {\n width: 2.5rem;\n }\n\n .Card.Row .CardImage img {\n height: 1.9rem;\n width: 1.9rem;\n }\n\n a.Card, a.Card * {\n color: inherit;\n text-decoration: none;\n }\n\n .Card.transparent {\n background: none;\n box-shadow: none;\n }\n\n .Card.small {\n min-height: auto;\n padding: 0.5rem 0.5rem;\n margin: 0;\n }\n\n .CardImage.small {\n width: 1.7rem;\n }\n\n .CardImage.small img {\n height: 1.4rem;\n width: 1.4rem;\n }\n\n .Card.disabled {\n cursor: default;\n }\n\n .Card:hover:not(.disabled) {\n background: rgb(240,240,240);\n box-shadow: 0 0 0 rgba(0,0,0,0); \n }\n\n .Card:active:not(.disabled) {\n background: rgb(235,235,235);\n box-shadow: inset 0 0 6px rgba(0,0,0,0.02);\n color: inherit;\n }\n\n .Card:hover:not(.disabled) .CardAction {\n opacity: 0.4;\n }\n\n .CardImage, .CardBody, .CardAction, .CardInfo {\n align-items: center;\n display: flex;\n min-width: 0;\n padding: 0 0.4rem;\n }\n\n .CardImage {\n flex-basis: auto;\n flex-grow: 0;\n flex-shrink: 0;\n justify-content: center;\n position: relative;\n width: 3.6rem;\n }\n\n .CardBody {\n flex-basis: auto;\n flex-grow: 1;\n flex-shrink: 1;\n line-height: 1.4rem;\n padding-left: 0.6rem;\n text-align: left;\n }\n\n .CardBodyWrapper {\n min-width: 0;\n }\n\n .CardAction {\n flex-basis: auto;\n flex-shrink: 0;\n flex-grow: 0;\n padding-right: 0;\n margin-left: auto;\n }\n\n .Card.disabled .CardAction {\n opacity: 0; \n }\n\n .CardInfo {\n display: flex;\n flex-basis: auto;\n flex-direction: column;\n flex-grow: 0;\n flex-shrink: 1;\n justify-content: center;\n margin-left: auto; \n padding-right: 0;\n }\n\n .CardImage img {\n background: white;\n border-radius: 99rem;\n border: 1px solid white;\n box-shadow: 0 2px 8px rgb(0 0 0 / 10%);\n height: 2.8rem;\n position: relative;\n vertical-align: middle;\n width: 2.8rem;\n }\n\n .CardImage.square img {\n border-radius: 0;\n }\n\n .CardImage img.transparent {\n border: none;\n background: none;\n box-shadow: none;\n }\n \n .CardImage .BlockchainLogo {\n position: absolute;\n bottom: 0;\n right: 0;\n }\n\n .CardTitle {\n font-size: 0.9rem;\n color: rgb(150,150,150);\n }\n \n .CardText, a .CardText {\n color: ".concat(style.colors.text, ";\n flex: 1;\n font-size: 1.3rem;\n }\n\n .CardText strong {\n font-weight: 500;\n }\n\n .CardText small {\n font-size: 1.1rem;\n color: rgb(150,150,150);\n }\n\n .CardAction {\n opacity: 0.2;\n }\n\n .Card.More {\n display: inline-block;\n text-align: center;\n }\n ");
1688
+ return "\n\n .Card {\n align-items: center;\n background: rgb(255,255,255);\n border-radius: 13px;\n box-shadow: 0 0 8px rgba(0,0,0,0.03);\n cursor: pointer;\n display: flex;\n flex-direction: row;\n margin-bottom: 8px;\n min-height: 76px;\n padding: 16px 10px;\n width: 100%;\n }\n\n .Card.Row {\n border-radius: 0;\n margin-bottom: 0;\n box-shadow: none;\n min-height: 69px;\n padding: 7px 21px;\n border-top: 1px solid rgba(0,0,0,0.05);\n }\n\n .Card.Row .CardText {\n font-size: 19px;\n line-height: 40px;\n }\n\n .CardTokenSymbol {\n width: 40%;\n min-width: 0;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .CardTokenName {\n text-align: right;\n opacity: 0.5;\n width: 60%;\n min-width: 0;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n \n .Card.Row .CardTokenName .CardText {\n font-size: 17px;\n }\n\n .Card.Row .CardImage {\n width: 40px;\n }\n\n .Card.Row .CardImage img {\n height: 30px;\n width: 30px;\n }\n\n a.Card, a.Card * {\n color: inherit;\n text-decoration: none;\n }\n\n .Card.transparent {\n background: none;\n box-shadow: none;\n }\n\n .Card.small {\n min-height: auto;\n padding: 8px 8px;\n margin: 0;\n }\n\n .CardImage.small {\n width: 27px;\n }\n\n .CardImage.small img {\n height: 27px;\n width: 27px;\n }\n\n .Card.disabled {\n cursor: default;\n }\n\n .Card:hover:not(.disabled) {\n background: rgb(240,240,240);\n box-shadow: 0 0 0 rgba(0,0,0,0); \n }\n\n .Card:active:not(.disabled) {\n background: rgb(235,235,235);\n box-shadow: inset 0 0 6px rgba(0,0,0,0.02);\n color: inherit;\n }\n\n .Card:hover:not(.disabled) .CardAction {\n opacity: 0.4;\n }\n\n .CardImage, .CardBody, .CardAction, .CardInfo {\n align-items: center;\n display: flex;\n min-width: 0;\n padding: 0 7px;\n }\n\n .CardImage {\n flex-basis: auto;\n flex-grow: 0;\n flex-shrink: 0;\n justify-content: center;\n position: relative;\n width: 58px;\n }\n\n .CardBody {\n flex-basis: auto;\n flex-grow: 1;\n flex-shrink: 1;\n line-height: 27px;\n padding-left: 10px;\n text-align: left;\n }\n\n .CardBodyWrapper {\n min-width: 0;\n }\n\n .CardAction {\n flex-basis: auto;\n flex-shrink: 0;\n flex-grow: 0;\n padding-right: 0;\n margin-left: auto;\n }\n\n .Card.disabled .CardAction {\n opacity: 0; \n }\n\n .CardInfo {\n display: flex;\n flex-basis: auto;\n flex-direction: column;\n flex-grow: 0;\n flex-shrink: 1;\n justify-content: center;\n margin-left: auto; \n padding-right: 0;\n }\n\n .CardImage img {\n background: white;\n border-radius: 9999px;\n border: 1px solid white;\n box-shadow: 0 2px 8px rgb(0 0 0 / 10%);\n height: 45px;\n position: relative;\n vertical-align: middle;\n width: 45px;\n }\n\n .CardImage.square img {\n border-radius: 0;\n }\n\n .CardImage img.transparent {\n border: none;\n background: none;\n box-shadow: none;\n }\n \n .CardImage .BlockchainLogo {\n position: absolute;\n bottom: 0;\n right: 0;\n }\n\n .CardTitle {\n font-size: 15px;\n color: rgb(150,150,150);\n line-height: 20px;\n }\n \n .CardText, a .CardText {\n color: ".concat(style.colors.text, ";\n flex: 1;\n font-size: 21px;\n line-height: 26px;\n }\n\n .CardText strong {\n font-weight: 500;\n }\n\n .CardText.small, .CardText.small small {\n font-size: 18px;\n color: rgb(150,150,150);\n line-height: 20px;\n }\n\n .CardAction {\n opacity: 0.2;\n }\n\n .Card.More {\n display: inline-block;\n text-align: center;\n }\n ");
1689
1689
  });
1690
1690
 
1691
1691
  var DialogStyle = (function (style) {
1692
- return "\n\n .ReactDialogBackground {\n backdrop-filter: blur(5px);\n background: rgba(0,0,0,0.7);\n }\n\n .contained .ReactDialog {\n position: absolute;\n height: 100%;\n min-height: 100%;\n width: 100%;\n min-width: 100%;\n }\n\n .contained .ReactDialogBackground {\n position: absolute;\n }\n\n .contained .ReactDialog.ReactDialogOpen .ReactDialogAnimation {\n top: 0;\n }\n\n .Dialog {\n margin: 0 auto;\n position: relative;\n width: 420px;\n box-shadow: 0 0 20px rgba(0,0,0,0.1);\n border-radius: 0.8rem;\n background: rgb(248,248,248);\n }\n\n @media (max-width: 450px) {\n\n .Dialog {\n border-radius: 0;\n width: 100%;\n }\n }\n\n @media (orientation: portrait) and (max-width: 800px) {\n\n .ReactDialogAnimation {\n width: 100%;\n }\n\n .ReactDialog {\n height: 100%;\n min-height: 100%;\n }\n\n .ReactDialogStack {\n align-items: flex-end;\n }\n\n .Dialog {\n align-content: stretch;\n border-radius: 0.8rem;\n border-top-radius: 0.8rem;\n display: flex;\n flex-direction: column;\n }\n\n .DialogBody {\n flex: 1;\n align-items: flex-end;\n }\n\n .DialogFooter {\n padding-bottom: 20px;\n }\n\n .ReactDialogAnimation {\n margin-bottom: -100px !important;\n top: inherit !important;\n position: relative;\n transition: opacity 0.4s ease, margin-bottom 0.4s ease;\n }\n\n .ReactDialog.ReactDialogOpen .ReactDialogAnimation {\n margin-bottom: 0px !important;\n }\n\n .DialogFooter {\n border-bottom-left-radius: 0 !important;\n border-bottom-right-radius: 0 !important;\n }\n\n .ReactShadowDOMInsideContainer > .ReactDialog {\n align-items: flex-end;\n }\n }\n\n .DialogBody {\n background: rgb(248,248,248);\n overflow-x: hidden;\n overflow-y: auto;\n }\n\n .DialogBody.ScrollHeight {\n height: 30vh !important;\n max-height: 30vh !important;\n }\n\n .DialogHeader {\n background: rgb(248,248,248);\n border-top-left-radius: 0.8rem;\n border-top-right-radius: 0.8rem;\n min-height: 3.4rem;\n position: relative;\n width: 100%;\n }\n\n .DialogHeaderActionRight {\n position: absolute;\n top: 0;\n right: 0;\n height: 3rem;\n }\n\n .DialogHeaderActionLeft {\n position: absolute;\n top: 0;\n left: 0;\n height: 3rem;\n }\n\n .DialogFooter {\n background: rgb(248,248,248);\n border-bottom-left-radius: 0.8rem;\n border-bottom-right-radius: 0.8rem;\n line-height: 1.5rem;\n min-height: 2rem;\n position: relative;\n text-align: center;\n }\n\n ";
1692
+ return "\n\n .ReactDialogBackground {\n backdrop-filter: blur(5px);\n background: rgba(0,0,0,0.7);\n }\n\n .contained .ReactDialog {\n position: absolute;\n height: 100%;\n min-height: 100%;\n width: 100%;\n min-width: 100%;\n }\n\n .contained .ReactDialogBackground {\n position: absolute;\n }\n\n .contained .ReactDialog.ReactDialogOpen .ReactDialogAnimation {\n top: 0;\n }\n\n .Dialog {\n margin: 0 auto;\n position: relative;\n width: 420px;\n box-shadow: 0 0 20px rgba(0,0,0,0.1);\n border-radius: 13px;\n background: rgb(248,248,248);\n }\n\n @media (max-width: 450px) {\n\n .Dialog {\n border-radius: 0;\n width: 100%;\n }\n }\n\n @media (orientation: portrait) and (max-width: 800px) {\n\n .ReactDialogAnimation {\n width: 100%;\n }\n\n .ReactDialog {\n height: 100%;\n min-height: 100%;\n }\n\n .ReactDialogStack {\n align-items: flex-end;\n }\n\n .Dialog {\n align-content: stretch;\n border-radius: 13px;\n border-top-radius: 13px;\n display: flex;\n flex-direction: column;\n }\n\n .DialogBody {\n flex: 1;\n align-items: flex-end;\n }\n\n .DialogFooter {\n padding-bottom: 20px;\n }\n\n .ReactDialogAnimation {\n margin-bottom: -100px !important;\n top: inherit !important;\n position: relative;\n transition: opacity 0.4s ease, margin-bottom 0.4s ease;\n }\n\n .ReactDialog.ReactDialogOpen .ReactDialogAnimation {\n margin-bottom: 0px !important;\n }\n\n .DialogFooter {\n border-bottom-left-radius: 0 !important;\n border-bottom-right-radius: 0 !important;\n }\n\n .ReactShadowDOMInsideContainer > .ReactDialog {\n align-items: flex-end;\n }\n }\n\n .DialogBody {\n overflow-x: hidden;\n overflow-y: auto;\n }\n\n .DialogBody.ScrollHeight {\n height: 30vh !important;\n max-height: 30vh !important;\n }\n\n .DialogHeader {\n border-top-left-radius: 13px;\n border-top-right-radius: 13px;\n min-height: 54px;\n position: relative;\n width: 100%;\n }\n\n .DialogHeaderActionRight {\n position: absolute;\n top: 0;\n right: 0;\n height: 48px;\n }\n\n .DialogHeaderActionLeft {\n position: absolute;\n top: 0;\n left: 0;\n height: 48px;\n }\n\n .DialogFooter {\n border-bottom-left-radius: 13px;\n border-bottom-right-radius: 13px;\n line-height: 24px;\n min-height: 32px;\n position: relative;\n text-align: center;\n }\n\n ";
1693
1693
  });
1694
1694
 
1695
1695
  var FontStyle = (function (style) {
1696
- return "\n\n *, div, div * {\n font-family: ".concat(style.fontFamily, ";\n }\n\n .FontSizeS {\n font-size: 1rem;\n }\n\n .FontSizeM {\n font-size: 1.2rem;\n }\n\n .FontSizeL {\n font-size: 1.4rem;\n }\n\n .FontSizeXL {\n font-size: 2.0rem;\n }\n\n .FontWeightBold {\n font-weight: bold;\n }\n\n .FontItalic {\n font-style: italic;\n }\n ");
1696
+ return "\n\n *, div, div * {\n font-family: ".concat(style.fontFamily, ";\n }\n\n .FontSizeS {\n font-size: 16px;\n }\n\n .FontSizeM {\n font-size: 19px;\n }\n\n .FontSizeL {\n font-size: 23px;\n }\n\n .FontSizeXL {\n font-size: 32px;\n }\n\n .FontWeightBold {\n font-weight: bold;\n }\n\n .FontItalic {\n font-style: italic;\n }\n ");
1697
1697
  });
1698
1698
 
1699
1699
  var GraphicStyle = (function () {
@@ -1716,10 +1716,6 @@
1716
1716
  return "\n\n .Input {\n background: none;\n border: 1px solid transparent;\n margin: 0;\n outline: none !important;\n padding: 0 0 0 14px;\n width: 100%;\n }\n\n .Input::placeholder {\n color: rgb(210,210,210);\n }\n \n ";
1717
1717
  });
1718
1718
 
1719
- var LabelStyle = (function (style) {
1720
- return "\n\n .Label {\n background: rgb(248,248,248);\n border-radius: 999px;\n color: ".concat(style.colors.primary, ";\n font-size: 0.8rem;\n padding: 0.1rem 0.5rem;\n margin: 0.1rem;\n }\n\n ");
1721
- });
1722
-
1723
1719
  var LinkStyle = (function (style) {
1724
1720
  return "\n\n .Link {\n color: ".concat(style.colors.primary, ";\n cursor: pointer;\n text-decoration: none;\n }\n\n .Link:hover {\n filter: brightness(0.8);\n }\n\n .Link:active {\n filter: brightness(1.0);\n }\n ");
1725
1721
  });
@@ -1733,11 +1729,11 @@
1733
1729
  });
1734
1730
 
1735
1731
  var PaddingStyle = (function () {
1736
- return "\n\n .PaddingTopXS {\n padding-top: 0.2rem;\n }\n\n .PaddingRightXS {\n padding-right: 0.2rem;\n }\n\n .PaddingBottomXS {\n padding-bottom: 0.2rem;\n }\n\n .PaddingLeftXS {\n padding-left: 0.2rem; \n }\n\n .PaddingTopS {\n padding-top: 0.8rem;\n }\n\n .PaddingRightS {\n padding-right: 0.8rem;\n }\n\n .PaddingBottomS {\n padding-bottom: 0.8rem;\n }\n\n .PaddingLeftS {\n padding-left: 0.8rem; \n }\n\n .PaddingTopM {\n padding-top: 1.2rem;\n }\n\n .PaddingRightM {\n padding-right: 1.2rem;\n }\n\n .PaddingBottomM {\n padding-bottom: 1.2rem;\n }\n\n .PaddingLeftM {\n padding-left: 1.2rem; \n }\n\n .PaddingTopL {\n padding-top: 1.8rem;\n }\n\n .PaddingRightL {\n padding-right: 1.8rem;\n }\n\n .PaddingBottomL {\n padding-bottom: 1.8rem;\n }\n\n .PaddingLeftL {\n padding-left: 1.28em; \n }\n ";
1732
+ return "\n\n .PaddingTopXS {\n padding-top: 3px;\n }\n\n .PaddingRightXS {\n padding-right: 3px;\n }\n\n .PaddingBottomXS {\n padding-bottom: 3px;\n }\n\n .PaddingLeftXS {\n padding-left: 3px; \n }\n\n .PaddingTopS {\n padding-top: 13px;\n }\n\n .PaddingRightS {\n padding-right: 13px;\n }\n\n .PaddingBottomS {\n padding-bottom: 13px;\n }\n\n .PaddingLeftS {\n padding-left: 13px; \n }\n\n .PaddingTopM {\n padding-top: 19px;\n }\n\n .PaddingRightM {\n padding-right: 19px;\n }\n\n .PaddingBottomM {\n padding-bottom: 19px;\n }\n\n .PaddingLeftM {\n padding-left: 19px; \n }\n\n .PaddingTopL {\n padding-top: 29px;\n }\n\n .PaddingRightL {\n padding-right: 29px;\n }\n\n .PaddingBottomL {\n padding-bottom: 29px;\n }\n\n .PaddingLeftL {\n padding-left: 29px; \n }\n ";
1737
1733
  });
1738
1734
 
1739
1735
  var PoweredByStyle = (function (style) {
1740
- return "\n\n .PoweredByWrapper {\n display: block;\n left: 0;\n padding-top: 0.2rem;\n position: fixed;\n right: 0;\n text-align: center;\n top: 0;\n }\n\n .contained .PoweredByWrapper {\n position: absolute;\n }\n\n .PoweredByLink {\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\" !important;\n color: white;\n opacity: 0.4;\n display: inline-block;\n font-size: 0.78rem;\n font-style: italic;\n font-weight: bold;\n letter-spacing: -0.2px;\n margin-left: 0.5rem;\n text-decoration: none;\n }\n\n .PoweredByLink:hover, .PoweredByLink:active {\n opacity: 1.0;\n color: ".concat(style.colors.primary, ";\n }\n ");
1736
+ return "\n\n .PoweredByWrapper {\n display: block;\n left: 0;\n padding-top: 3px;\n position: fixed;\n right: 0;\n text-align: center;\n top: 0;\n }\n\n .contained .PoweredByWrapper {\n position: absolute;\n }\n\n .PoweredByLink {\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\" !important;\n color: white;\n opacity: 0.4;\n display: inline-block;\n font-size: 14px;\n font-style: italic;\n font-weight: bold;\n letter-spacing: -0.2px;\n margin-left: 8px;\n text-decoration: none;\n }\n\n .PoweredByLink:hover, .PoweredByLink:active {\n opacity: 1.0;\n color: ".concat(style.colors.primary, ";\n }\n ");
1741
1737
  });
1742
1738
 
1743
1739
  var RangeSliderStyle = (function (style) {
@@ -1749,7 +1745,7 @@
1749
1745
  });
1750
1746
 
1751
1747
  var SearchStyle = (function (style) {
1752
- return "\n\n .Search {\n border-radius: 0.8rem;\n border: 1px solid rgba(0,0,0,0.2);\n outline: none !important;\n color: ".concat(style.colors.text, ";\n font-size: 1.2rem;\n padding: 0.8rem;\n width: 100%;\n }\n\n .Search::placeholder {\n color: rgb(180,180,180);\n } \n\n .Search:focus, .Search:focus-visible {\n border: 1px solid ").concat(style.colors.primary, ";\n }\n\n ");
1748
+ return "\n\n .Search {\n border-radius: 13px;\n border: 1px solid rgba(0,0,0,0.2);\n outline: none !important;\n color: ".concat(style.colors.text, ";\n font-size: 19px;\n padding: 13px;\n width: 100%;\n }\n\n .Search::placeholder {\n color: rgb(180,180,180);\n } \n\n .Search:focus, .Search:focus-visible {\n border: 1px solid ").concat(style.colors.primary, ";\n }\n\n ");
1753
1749
  });
1754
1750
 
1755
1751
  var SkeletonStyle = (function () {
@@ -1757,7 +1753,7 @@
1757
1753
  });
1758
1754
 
1759
1755
  var TableStyle = (function (style) {
1760
- return "\n\n .Table {\n border-collapse: separate;\n border-radius: 0.4rem;\n border-style: hidden;\n border: 1px solid rgba(0,0,0,0.1);\n font-size: 94%;\n width: 100%;\n }\n\n .Table tr.small td {\n font-size: 90%;\n }\n\n .Table tr td {\n border-bottom: 1px solid rgba(0,0,0,0.1);\n word-break: break-all;\n }\n \n .Table tr:last-child td {\n border-bottom: none;\n }\n \n .Table tr td {\n padding: 0.5rem 0.9rem;\n text-align: left;\n }\n \n .Table tr td:first-child {\n width: 30%\n }\n\n .Table tr td:last-child {\n width: 70%\n }\n \n .Table .TableSubTitle {\n font-weight: 300;\n opacity: 0.7;\n }\n\n .Table tr td:last-child {\n font-weight: 500;\n }\n ";
1756
+ return "\n\n .Table {\n border-collapse: separate;\n border-radius: 7px;\n border-style: hidden;\n border: 1px solid rgba(0,0,0,0.1);\n width: 100%;\n }\n\n .Table tr.small td {\n font-size: 14px;\n }\n\n .Table tr td {\n border-bottom: 1px solid rgba(0,0,0,0.1);\n word-break: break-all;\n }\n \n .Table tr:last-child td {\n border-bottom: none;\n }\n \n .Table tr td {\n padding: 8px 15px;\n text-align: left;\n }\n \n .Table tr td:first-child {\n width: 30%\n }\n\n .Table tr td:last-child {\n width: 70%\n }\n \n .Table .TableSubTitle {\n font-weight: 300;\n opacity: 0.7;\n }\n\n .Table tr td:last-child {\n font-weight: 500;\n }\n ";
1761
1757
  });
1762
1758
 
1763
1759
  var TextButtonStyle = (function (style) {
@@ -1765,7 +1761,7 @@
1765
1761
  });
1766
1762
 
1767
1763
  var TextStyle = (function (style) {
1768
- return "\n\n * {\n color: ".concat(style.colors.text, ";\n }\n\n h1, h2, h3, h4, h5, h6 {\n display: block;\n }\n\n .TextLeft, .TextLeft * {\n text-align: left;\n }\n\n .TextCenter, .TextCenter * {\n text-align: center;\n }\n\n .LineHeightL {\n line-height: 2.0rem;\n }\n\n .ErrorSnippetText {\n background: rgb(30, 30, 20);\n border-radius: 1.2rem;\n border: 0.5rem solid rgb(30, 30, 20);\n color: #00FF41;\n font-size: 0.9rem;\n font-style: italic;\n max-height: 100px;\n padding: 6px;\n overflow-wrap: break-word;\n overflow-y: auto;\n white-space: pre-wrap;\n word-wrap: break-word;\n }\n ");
1764
+ return "\n\n * {\n color: ".concat(style.colors.text, ";\n }\n\n h1, h2, h3, h4, h5, h6 {\n display: block;\n }\n\n .Text {\n font-size: 16px;\n line-height: 24px\n }\n\n .TextLeft, .TextLeft * {\n text-align: left;\n }\n\n .TextCenter, .TextCenter * {\n text-align: center;\n }\n\n .LineHeightL {\n line-height: 32px;\n }\n\n .ErrorSnippetText {\n background: rgb(30, 30, 20);\n border-radius: 19px;\n border: 8px solid rgb(30, 30, 20);\n color: #00FF41;\n font-size: 15px;\n font-style: italic;\n max-height: 100px;\n padding: 6px;\n overflow-wrap: break-word;\n overflow-y: auto;\n white-space: pre-wrap;\n word-wrap: break-word;\n }\n ");
1769
1765
  });
1770
1766
 
1771
1767
  var TokenAmountStyle = (function () {
@@ -1773,11 +1769,11 @@
1773
1769
  });
1774
1770
 
1775
1771
  var TokenImageStyle = (function (style) {
1776
- return "\n\n .TokenImage img {\n border-radius: 99rem;\n border: 1px solid white;\n background: white;\n box-shadow: 0 2px 8px rgb(0 0 0 / 10%);\n height: 2.8rem;\n position: relative;\n vertical-align: middle;\n width: 2.8rem;\n }\n\n .TokenImage.medium img {\n height: 5.8rem;\n width: 5.8rem;\n }\n ";
1772
+ return "\n\n .TokenImage img {\n border-radius: 9999px;\n border: 1px solid white;\n background: white;\n box-shadow: 0 2px 8px rgb(0 0 0 / 10%);\n height: 45px;\n position: relative;\n vertical-align: middle;\n width: 45px;\n }\n\n .TokenImage.medium img {\n height: 93px;\n width: 93px;\n }\n ";
1777
1773
  });
1778
1774
 
1779
1775
  var TooltipStyle = (function (style) {
1780
- return "\n\n .Tooltip {\n background: ".concat(style.colors.primary, ";\n border-radius: 0.6rem;\n color: ").concat(style.colors.buttonText, ";\n padding: 0.6rem 0.8rem;\n position: relative;\n box-shadow: 0 0 8px rgba(0,0,0,0.2);\n }\n\n .TooltipArrowUp {\n border-bottom: 10px solid ").concat(style.colors.primary, ";\n border-left: 10px solid transparent;\n border-right: 10px solid transparent;\n height: 0; \n left: 12px;\n position: absolute;\n top: -8px;\n width: 0; \n }\n ");
1776
+ return "\n\n .Tooltip {\n background: ".concat(style.colors.primary, ";\n border-radius: 10px;\n color: ").concat(style.colors.buttonText, ";\n padding: 10px 13px;\n position: relative;\n box-shadow: 0 0 8px rgba(0,0,0,0.2);\n }\n\n .TooltipArrowUp {\n border-bottom: 10px solid ").concat(style.colors.primary, ";\n border-left: 10px solid transparent;\n border-right: 10px solid transparent;\n height: 0; \n left: 12px;\n position: absolute;\n top: -8px;\n width: 0; \n }\n ");
1781
1777
  });
1782
1778
 
1783
1779
  var styleRenderer = (function (style) {
@@ -1790,7 +1786,7 @@
1790
1786
  },
1791
1787
  fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
1792
1788
  }, style);
1793
- return [ResetStyle(), FontStyle(style), DialogStyle(), ButtonCircularStyle(), ButtonPrimaryStyle(style), CardStyle(style), PoweredByStyle(style), GraphicStyle(), SkeletonStyle(), TokenAmountStyle(), TextStyle(style), IconStyle(style), OpacityStyle(), PaddingStyle(), HeightStyle(), LabelStyle(style), LoadingTextStyle(style), RangeSliderStyle(style), InputStyle(), TextButtonStyle(style), ImageStyle(), BlockchainLogoStyle(), SearchStyle(style), TokenImageStyle(), AlertStyle(), TableStyle(), LinkStyle(style), TooltipStyle(style)].join('');
1789
+ return [ResetStyle(), DialogStyle(), ButtonCircularStyle(), ButtonPrimaryStyle(style), CardStyle(style), PoweredByStyle(style), GraphicStyle(), SkeletonStyle(), TokenAmountStyle(), TextStyle(style), FontStyle(style), IconStyle(style), OpacityStyle(), PaddingStyle(), HeightStyle(), LoadingTextStyle(style), RangeSliderStyle(style), InputStyle(), TextButtonStyle(style), ImageStyle(), BlockchainLogoStyle(), SearchStyle(style), TokenImageStyle(), AlertStyle(), TableStyle(), LinkStyle(style), TooltipStyle(style)].join('');
1794
1790
  });
1795
1791
 
1796
1792
  var mount = (function (_ref, content) {
@@ -3095,7 +3091,9 @@
3095
3091
  style: {
3096
3092
  height: '40px'
3097
3093
  }
3098
- }, /*#__PURE__*/React__default["default"].createElement("div", null, format(toValidStep(maxAmount)), /*#__PURE__*/React__default["default"].createElement("button", {
3094
+ }, /*#__PURE__*/React__default["default"].createElement("div", {
3095
+ className: "FontSizeS"
3096
+ }, format(toValidStep(maxAmount)), /*#__PURE__*/React__default["default"].createElement("button", {
3099
3097
  className: "TextButton",
3100
3098
  onClick: function onClick() {
3101
3099
  changeAmount(toValidValue(maxAmount));
@@ -3222,7 +3220,7 @@
3222
3220
  }, payment.symbol), /*#__PURE__*/React__default["default"].createElement("span", null, "\xA0"), /*#__PURE__*/React__default["default"].createElement("span", {
3223
3221
  className: "TokenAmountCell"
3224
3222
  }, format(payment.amount)))), /*#__PURE__*/React__default["default"].createElement("h3", {
3225
- className: "CardText"
3223
+ className: "CardText small"
3226
3224
  }, /*#__PURE__*/React__default["default"].createElement("small", null, format(round(parseFloat(payment.route.fromBalance.toString()) / Math.pow(10, payment.decimals), 'down')))))));
3227
3225
  }));
3228
3226
  }, [allPaymentRoutesWithData]);
@@ -4498,7 +4496,7 @@
4498
4496
  }, "Wallet Login"), /*#__PURE__*/React__default["default"].createElement("div", {
4499
4497
  className: "Text PaddingTopS PaddingBottomS PaddingLeftS PaddingRightS"
4500
4498
  }, /*#__PURE__*/React__default["default"].createElement("p", {
4501
- className: "FontSizeM PaddingLeftM PaddingRightM"
4499
+ className: "FontSizeM PaddingLeftM PaddingRightM PaddingBottomS"
4502
4500
  }, "Please click \"Log in\" and sign the message with your connected wallet."))),
4503
4501
  footer: /*#__PURE__*/React__default["default"].createElement("div", {
4504
4502
  className: "PaddingTopXS PaddingRightM PaddingLeftM PaddingBottomM"
@@ -5173,7 +5171,7 @@
5173
5171
  }, toToken.symbol), /*#__PURE__*/React__default["default"].createElement("span", null, "\xA0"), /*#__PURE__*/React__default["default"].createElement("span", {
5174
5172
  className: "TokenAmountCell"
5175
5173
  }, format(toTokenReadableAmount)))), salePerTokenValue && /*#__PURE__*/React__default["default"].createElement("h3", {
5176
- className: "CardText"
5174
+ className: "CardText small"
5177
5175
  }, /*#__PURE__*/React__default["default"].createElement("small", null, salePerTokenValue, " per token")))), /*#__PURE__*/React__default["default"].createElement("div", {
5178
5176
  className: "CardAction"
5179
5177
  }, /*#__PURE__*/React__default["default"].createElement(ChevronRight, null))), /*#__PURE__*/React__default["default"].createElement("div", {
@@ -5484,11 +5482,11 @@
5484
5482
  })), /*#__PURE__*/React__default["default"].createElement("div", {
5485
5483
  className: "PaddingTopS TextCenter"
5486
5484
  }, /*#__PURE__*/React__default["default"].createElement("div", {
5487
- className: "Alert"
5485
+ className: "Alert FontSizeS"
5488
5486
  }, /*#__PURE__*/React__default["default"].createElement("strong", null, "Please review this information"))), /*#__PURE__*/React__default["default"].createElement("div", {
5489
5487
  className: "PaddingTopXS"
5490
5488
  }, /*#__PURE__*/React__default["default"].createElement("table", {
5491
- className: "Table TextLeft"
5489
+ className: "Table TextLeft FontSizeS"
5492
5490
  }, /*#__PURE__*/React__default["default"].createElement("tbody", null, /*#__PURE__*/React__default["default"].createElement("tr", {
5493
5491
  className: "small TextCenter"
5494
5492
  }, /*#__PURE__*/React__default["default"].createElement("td", {
@@ -22994,7 +22992,7 @@
22994
22992
  className: "transparent",
22995
22993
  src: blockchain.logo
22996
22994
  })), /*#__PURE__*/React__default["default"].createElement("div", {
22997
- className: "CardBody"
22995
+ className: "CardBody FontSizeS"
22998
22996
  }, blockchain.label), /*#__PURE__*/React__default["default"].createElement("div", {
22999
22997
  className: "CardAction"
23000
22998
  }, /*#__PURE__*/React__default["default"].createElement(ChevronRight, null)))), /*#__PURE__*/React__default["default"].createElement("div", {
@@ -23022,7 +23020,7 @@
23022
23020
  }, /*#__PURE__*/React__default["default"].createElement("div", {
23023
23021
  className: "PaddingTopXS PaddingBottomXS"
23024
23022
  }, /*#__PURE__*/React__default["default"].createElement("div", {
23025
- className: "Link",
23023
+ className: "Link FontSizeS",
23026
23024
  onClick: onClickAddToken
23027
23025
  }, "Token missing? Add it.")))
23028
23026
  });
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@depay/widgets",
3
3
  "moduleName": "DePayWidgets",
4
- "version": "6.28.5",
4
+ "version": "6.29.0",
5
5
  "description": "Web3 Payments with any token. DePay simplifies and improves Web3 Payments with the power of DeFi. Accept any token with on-the-fly conversion.",
6
6
  "main": "./dist/umd/index.js",
7
7
  "module": "./dist/esm/index.js",