@depay/widgets 6.28.4 → 6.30.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/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 .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
  });