@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/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 .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.4",
4
+ "version": "6.30.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",
@@ -40,18 +40,18 @@
40
40
  "@depay/react-token-image": "^3.0.0",
41
41
  "@depay/walletconnect-v1": "^1.1.0",
42
42
  "@depay/web3-assets": "^6.2.1",
43
- "@depay/web3-blockchains": "^4.3.0",
44
- "@depay/web3-client": "^8.0.0",
45
- "@depay/web3-constants": "^5.0.0",
46
- "@depay/web3-exchanges": "^8.2.1",
47
- "@depay/web3-payments": "^10.1.3",
48
- "@depay/web3-tokens": "^8.0.1",
49
- "@depay/web3-wallets": "^10.0.3",
43
+ "@depay/web3-blockchains": "^4.5.0",
44
+ "@depay/web3-client": "^8.2.0",
45
+ "@depay/web3-constants": "^5.2.0",
46
+ "@depay/web3-exchanges": "^8.4.0",
47
+ "@depay/web3-payments": "^10.2.0",
48
+ "@depay/web3-tokens": "^8.1.0",
49
+ "@depay/web3-wallets": "^11.0.0",
50
50
  "decimal.js": "^10.3.1",
51
51
  "react-rangeslider": "^2.2.0"
52
52
  },
53
53
  "peerDependencies": {
54
- "ethers": "^5.4.6",
54
+ "ethers": "^5.6.5",
55
55
  "react": "^17",
56
56
  "react-dom": "^17"
57
57
  },
@@ -61,7 +61,7 @@
61
61
  "@babel/preset-env": "^7.12.7",
62
62
  "@babel/preset-react": "^7.12.7",
63
63
  "@cypress/react": "^5.9.1",
64
- "@depay/web3-mock": "^11.7.0",
64
+ "@depay/web3-mock": "^11.8.0",
65
65
  "@peculiar/webcrypto": "^1.3.3",
66
66
  "@rollup/plugin-babel": "^5.3.0",
67
67
  "@rollup/plugin-commonjs": "^17.1.0",
@@ -78,7 +78,7 @@
78
78
  "eslint-plugin-import": "^2.22.1",
79
79
  "eslint-plugin-react": "^7.21.5",
80
80
  "eslint-plugin-react-hooks": "^4.2.0",
81
- "ethers": "^5.4.6",
81
+ "ethers": "^5.6.5",
82
82
  "fetch-mock": "^9.11.0",
83
83
  "mock-socket": "^9.0.8",
84
84
  "react": "^17.0.1",