@blocklet/payment-react 1.18.7 → 1.18.9

package/lib/checkout/donate.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.DonateDetails = DonateDetails;
 module.exports = CheckoutDonate;
 var _jsxRuntime = require("react/jsx-runtime");
 var _Dialog = _interopRequireDefault(require("@arcblock/ux/lib/Dialog"));
@@ -13,7 +14,6 @@ var _omit = _interopRequireDefault(require("lodash/omit"));
 var _unionBy = _interopRequireDefault(require("lodash/unionBy"));
 var _react = require("react");
 var _iconsMaterial = require("@mui/icons-material");
-var _tx = _interopRequireDefault(require("../components/blockchain/tx"));
 var _api = _interopRequireDefault(require("../libs/api"));
 var _util = require("../libs/util");
 var _form = _interopRequireDefault(require("./form"));
@@ -54,55 +54,176 @@ const fetchSupporters = (target, livemode = true) => {
 const emojiFont = {
   fontFamily: 'Avenir, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
 };
-function SupporterAvatar({
+function DonateDetails({
   supporters = [],
-  totalAmount = "0",
   currency,
   method
 }) {
   const {
-    t
+    locale
   } = (0, _context.useLocaleContext)();
+  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
+    sx: {
+      width: "100%",
+      minWidth: "256px",
+      maxWidth: "calc(100vw - 32px)",
+      maxHeight: "300px",
+      overflowX: "hidden",
+      overflowY: "auto",
+      margin: "0 auto"
+    },
+    children: supporters.map(x => /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+      sx: {
+        padding: "6px",
+        "&:hover": {
+          backgroundColor: "var(--backgrounds-bg-highlight, #eff6ff)",
+          transition: "background-color 200ms linear",
+          cursor: "pointer"
+        },
+        borderBottom: "1px solid var(--stroke-border-base, #EFF1F5)",
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center"
+      },
+      onClick: () => {
+        const {
+          link,
+          text
+        } = (0, _util.getTxLink)(method, x.payment_details);
+        if (link && text) {
+          window.open(link, "_blank");
+        }
+      },
+      children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+        direction: "row",
+        alignItems: "center",
+        spacing: 0.5,
+        sx: {
+          flex: 3,
+          overflow: "hidden"
+        },
+        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Avatar, {
+          src: (0, _util.getCustomerAvatar)(x.customer?.did, x?.updated_at ? new Date(x.updated_at).toISOString() : "", 20),
+          alt: x.customer?.name,
+          variant: "circular",
+          sx: {
+            width: 20,
+            height: 20
+          },
+          onClick: e => {
+            e.stopPropagation();
+            if (x.customer?.did) {
+              window.open((0, _util.getUserProfileLink)(x.customer?.did, locale), "_blank");
+            }
+          }
+        }, x.id), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+          sx: {
+            ml: "8px !important",
+            fontSize: "0.875rem",
+            fontWeight: "500",
+            overflow: "hidden",
+            whiteSpace: "nowrap",
+            textOverflow: "ellipsis"
+          },
+          onClick: e => {
+            e.stopPropagation();
+            if (x.customer?.did) {
+              window.open((0, _util.getUserProfileLink)(x.customer?.did, locale), "_blank");
+            }
+          },
+          children: x.customer?.name
+        })]
+      }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+        direction: "row",
+        alignItems: "center",
+        justifyContent: "flex-end",
+        spacing: 0.5,
+        sx: {
+          flex: 1
+        },
+        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Avatar, {
+          src: currency?.logo,
+          alt: currency?.symbol,
+          variant: "circular",
+          sx: {
+            width: 16,
+            height: 16
+          }
+        }, x.id), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+          sx: {
+            color: "text.secondary"
+          },
+          children: (0, _util.formatBNStr)(x.amount_total, currency.decimal)
+        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+          sx: {
+            color: "text.secondary"
+          },
+          children: currency.symbol
+        })]
+      })]
+    }, x.id))
+  });
+}
+function SupporterAvatar({
+  supporters = [],
+  totalAmount = "0",
+  currency,
+  method,
+  showDonateDetails = false
+}) {
+  const [open, setOpen] = (0, _react.useState)(false);
   const customers = (0, _unionBy.default)(supporters, "customer_did");
   const customersNum = customers.length;
-  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
-    display: "flex",
-    flexDirection: "column",
+  if (customersNum === 0) return null;
+  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+    flexDirection: "row",
+    justifyContent: "center",
     alignItems: "center",
-    sx: {
-      ".MuiAvatar-root": {
-        width: "32px",
-        height: "32px"
-      }
-    },
-    gap: {
-      xs: 0.5,
-      sm: 1
-    },
-    children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-      component: "p",
-      color: "text.secondary",
-      children: customersNum === 0 ? /* @__PURE__ */(0, _jsxRuntime.jsx)("span", {
-        style: emojiFont,
-        children: t("payment.checkout.donation.empty")
-      }) : t("payment.checkout.donation.summary", {
-        total: customersNum,
-        symbol: currency.symbol,
-        totalAmount: (0, _util.formatAmount)(totalAmount || "0", currency.decimal)
-      })
-    }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.AvatarGroup, {
-      total: customersNum,
-      max: 20,
-      children: customers.map(x => /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Avatar, {
-        title: x.customer?.name,
-        alt: x.customer?.name,
-        src: (0, _util.getCustomerAvatar)(x.customer?.did, x?.updated_at ? new Date(x.updated_at).toISOString() : "", 48),
-        variant: "circular",
+    children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.AvatarGroup, {
+      max: 5,
+      children: customers.slice(0, 5).map(supporter => /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Avatar, {
+        src: (0, _util.getCustomerAvatar)(supporter.customer?.did, supporter?.updated_at ? new Date(supporter.updated_at).toISOString() : "", 24),
+        alt: supporter.customer?.name,
         sx: {
-          width: 32,
-          height: 32
+          width: "24px",
+          height: "24px"
         }
-      }, x.id))
+      }, supporter.customer?.id))
+    }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+      sx: {
+        fontSize: "14px",
+        color: "text.secondary",
+        pl: 1.5,
+        pr: 1,
+        ml: -1,
+        borderRadius: "8px",
+        backgroundColor: "#f4f4f5",
+        height: "24px",
+        ...(showDonateDetails ? {
+          cursor: "pointer",
+          "&:hover": {
+            backgroundColor: "#e5e7eb"
+          }
+        } : {})
+      },
+      onClick: () => showDonateDetails && setOpen(true),
+      children: `${customersNum} supporter${customersNum > 1 ? "s" : ""} (${(0, _util.formatAmount)(totalAmount || "0", currency?.decimal)} ${currency.symbol})`
+    }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_Dialog.default, {
+      open,
+      onClose: () => setOpen(false),
+      sx: {
+        ".MuiDialogContent-root": {
+          width: "450px",
+          padding: "8px"
+        }
+      },
+      title: `${customersNum} supporter${customersNum > 1 ? "s" : ""}`,
+      children: /* @__PURE__ */(0, _jsxRuntime.jsx)(DonateDetails, {
+        supporters,
+        currency,
+        method,
+        totalAmount
+      })
     })]
   });
 }
@@ -112,11 +233,9 @@ function SupporterTable({
   currency,
   method
 }) {
-  const {
-    t
-  } = (0, _context.useLocaleContext)();
   const customers = (0, _unionBy.default)(supporters, "customer_did");
   const customersNum = customers.length;
+  if (customersNum === 0) return null;
   return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
     display: "flex",
     flexDirection: "column",
@@ -125,90 +244,16 @@ function SupporterTable({
       xs: 0.5,
       sm: 1
     },
-    children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-      component: "p",
-      color: "text.secondary",
-      children: customersNum === 0 ? /* @__PURE__ */(0, _jsxRuntime.jsx)("span", {
-        style: emojiFont,
-        children: t("payment.checkout.donation.empty")
-      }) : t("payment.checkout.donation.summary", {
-        total: customersNum,
-        symbol: currency.symbol,
-        totalAmount: (0, _util.formatAmount)(totalAmount || "0", currency.decimal)
-      })
-    }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Table, {
-      size: "small",
-      sx: {
-        width: "100%",
-        overflow: "hidden"
-      },
-      children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.TableBody, {
-        children: supporters.map(x => /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.TableRow, {
-          sx: {
-            "> td": {
-              padding: "8px 16px 8px 0",
-              borderTop: "1px solid #e0e0e0",
-              borderBottom: "1px solid #e0e0e0"
-            },
-            "> td:last-of-type": {
-              paddingRight: "0"
-            }
-          },
-          children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.TableCell, {
-            children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
-              direction: "row",
-              alignItems: "center",
-              spacing: 0.5,
-              children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Avatar, {
-                src: (0, _util.getCustomerAvatar)(x.customer?.did, x?.updated_at ? new Date(x.updated_at).toISOString() : "", 48),
-                alt: x.customer?.name,
-                variant: "circular",
-                sx: {
-                  width: 24,
-                  height: 24
-                }
-              }, x.id), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Hidden, {
-                smDown: true,
-                children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-                  children: x.customer?.name
-                })
-              })]
-            })
-          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.TableCell, {
-            align: "right",
-            children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
-              direction: "row",
-              alignItems: "center",
-              justifyContent: "flex-end",
-              spacing: 0.5,
-              children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-                fontWeight: 500,
-                component: "strong",
-                children: (0, _util.formatBNStr)(x.amount_total, currency.decimal)
-              }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-                component: "span",
-                children: currency.symbol
-              })]
-            })
-          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Hidden, {
-            smDown: true,
-            children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.TableCell, {
-              align: "right",
-              children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-                children: (0, _util.formatDateTime)(x.created_at)
-              })
-            })
-          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.TableCell, {
-            align: "right",
-            children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_tx.default, {
-              method,
-              details: x.payment_details,
-              mode: "customer",
-              align: "right"
-            })
-          })]
-        }, x.id))
-      })
+    children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(SupporterAvatar, {
+      supporters,
+      totalAmount,
+      currency,
+      method
+    }), /* @__PURE__ */(0, _jsxRuntime.jsx)(DonateDetails, {
+      supporters,
+      totalAmount,
+      currency,
+      method
     })]
   });
 }
@@ -493,19 +538,39 @@ function CheckoutDonateInner({
     children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
       size: donateSettings.appearance?.button?.size || "medium",
       color: donateSettings.appearance?.button?.color || "primary",
-      variant: donateSettings.appearance?.button?.variant || "contained",
+      variant: donateSettings.appearance?.button?.variant || "outlined",
+      sx: {
+        ...(!donateSettings.appearance?.button?.variant ? {
+          color: "var(--foregrounds-fg-base, #010714)",
+          borderColor: "var(--stroke-button-secondary-border, #E5E7EB)",
+          "&:hover": {
+            backgroundColor: "var(--buttons-button-neutral-hover, #F3F4F6)",
+            borderColor: "var(--stroke-button-secondary-border, #E5E7EB)"
+          }
+        } : {}),
+        // @ts-ignore
+        ...(donateSettings.appearance?.button?.sx || {})
+      },
       ...donateSettings.appearance?.button,
       onClick: () => startDonate(),
       children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
         direction: "row",
         alignItems: "center",
         spacing: 0.5,
-        children: [donateSettings.appearance.button.icon, typeof donateSettings.appearance.button.text === "string" ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+        children: [donateSettings.appearance.button.icon && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+          sx: {
+            mr: 0.5,
+            display: "inline-flex",
+            alignItems: "center"
+          },
+          children: donateSettings.appearance.button.icon
+        }), typeof donateSettings.appearance.button.text === "string" ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
           children: donateSettings.appearance.button.text
         }) : donateSettings.appearance.button.text]
       })
     }), supporters.data && donateSettings.appearance.history.variant === "avatar" && /* @__PURE__ */(0, _jsxRuntime.jsx)(SupporterAvatar, {
-      ...supporters.data
+      ...supporters.data,
+      showDonateDetails: true
     }), supporters.data && donateSettings.appearance.history.variant === "table" && /* @__PURE__ */(0, _jsxRuntime.jsx)(SupporterTable, {
       ...supporters.data
     })]

package/lib/components/livemode.js

@@ -24,7 +24,7 @@ function Livemode({
       height: 18,
       lineHeight: 1.2,
       textTransform: "uppercase",
-      fontSize: "0.8rem",
+      fontSize: "0.7rem",
       fontWeight: "bold",
       borderRadius: "4px",
       backgroundColor,

package/lib/components/table.js

@@ -72,7 +72,7 @@ const Table = _react.default.memo(({
 });
 const Wrapped = (0, _system.styled)(_Datatable.default)`
   ${props => props?.hasRowLink ? `.MuiTableCell-root {
-    font-size: 1rem !important;
+    font-size: 0.875rem !important;
   }` : ""}
   .MuiPaper-root {
     border-radius: 8px;

package/lib/index.d.ts

@@ -1,4 +1,4 @@
-import CheckoutDonate from './checkout/donate';
+import CheckoutDonate, { DonateDetails } from './checkout/donate';
 import CheckoutForm from './checkout/form';
 import CheckoutTable from './checkout/table';
 import TxGas from './components/blockchain/gas';
@@ -43,4 +43,4 @@ export * from './hooks/mobile';
 export * from './hooks/table';
 export * from './hooks/scroll';
 export { translations, createTranslator } from './locales';
-export { createLazyComponent, api, dayjs, FormInput, PhoneInput, AddressForm, StripeForm, Status, Livemode, Switch, ConfirmDialog, CheckoutForm, CheckoutTable, CheckoutDonate, CurrencySelector, Payment, PaymentSummary, PricingTable, ProductSkeleton, Amount, CustomerInvoiceList, CustomerPaymentList, TxLink, TxGas, SafeGuard, PricingItem, CountrySelect, Table, TruncatedText, Link, OverdueInvoicePayment, PaymentBeneficiaries, LoadingButton, };
+export { createLazyComponent, api, dayjs, FormInput, PhoneInput, AddressForm, StripeForm, Status, Livemode, Switch, ConfirmDialog, CheckoutForm, CheckoutTable, CheckoutDonate, CurrencySelector, Payment, PaymentSummary, PricingTable, ProductSkeleton, Amount, CustomerInvoiceList, CustomerPaymentList, TxLink, TxGas, SafeGuard, PricingItem, CountrySelect, Table, TruncatedText, Link, OverdueInvoicePayment, PaymentBeneficiaries, LoadingButton, DonateDetails, };

package/lib/index.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 var _exportNames = {
   CheckoutDonate: true,
+  DonateDetails: true,
   CheckoutForm: true,
   CheckoutTable: true,
   TxGas: true,
@@ -101,6 +102,12 @@ Object.defineProperty(exports, "CustomerPaymentList", {
     return _list2.default;
   }
 });
+Object.defineProperty(exports, "DonateDetails", {
+  enumerable: true,
+  get: function () {
+    return _donate.DonateDetails;
+  }
+});
 Object.defineProperty(exports, "FormInput", {
   enumerable: true,
   get: function () {
@@ -257,7 +264,7 @@ Object.defineProperty(exports, "translations", {
     return _locales.translations;
   }
 });
-var _donate = _interopRequireDefault(require("./checkout/donate"));
+var _donate = _interopRequireWildcard(require("./checkout/donate"));
 var _form = _interopRequireDefault(require("./checkout/form"));
 var _table = _interopRequireDefault(require("./checkout/table"));
 var _gas = _interopRequireDefault(require("./components/blockchain/gas"));
@@ -412,4 +419,6 @@ Object.keys(_scroll).forEach(function (key) {
   });
 });
 var _locales = require("./locales");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }

package/lib/libs/util.d.ts

@@ -113,3 +113,4 @@ export declare function getInvoiceDescriptionAndReason(invoice: TInvoiceExpanded
 };
 export declare function getPaymentKitComponent(): any;
 export declare function openDonationSettings(openInNewTab?: boolean): void;
+export declare function getUserProfileLink(userDid: string, locale?: string): string;

package/lib/libs/util.js

@@ -45,6 +45,7 @@ exports.getStatementDescriptor = getStatementDescriptor;
 exports.getSubscriptionAction = void 0;
 exports.getSubscriptionStatusColor = getSubscriptionStatusColor;
 exports.getTxLink = exports.getSubscriptionTimeSummary = void 0;
+exports.getUserProfileLink = getUserProfileLink;
 exports.getWebhookStatusColor = getWebhookStatusColor;
 exports.getWordBreakStyle = getWordBreakStyle;
 exports.hasDelegateTxHash = hasDelegateTxHash;
@@ -1109,4 +1110,10 @@ function openDonationSettings(openInNewTab = false) {
     const mountPoint = paymentKit.mountPoint.endsWith("/") ? paymentKit.mountPoint.slice(0, -1) : paymentKit.mountPoint;
     window.open(`${window.location.origin}${mountPoint}/integrations/donations`, openInNewTab ? "_blank" : "_self");
   }
+}
+function getUserProfileLink(userDid, locale = "en") {
+  return (0, _ufo.joinURL)(window.location.origin, (0, _ufo.withQuery)(".well-known/service/user", {
+    locale,
+    did: userDid
+  }));
 }

package/lib/payment/amount.js

@@ -15,7 +15,7 @@ function PaymentAmount({
     sx: {
       my: 0.5,
       fontWeight: 600,
-      fontSize: "2.5rem",
+      fontSize: "2.1875rem",
       letterSpacing: "-0.03rem",
       fontVariantNumeric: "tabular-nums",
       ...sx

package/lib/payment/form/index.js

@@ -564,8 +564,8 @@ function PaymentForm({
           sx: {
             mt: 2.5,
             color: "text.lighter",
-            fontSize: "0.9rem",
-            lineHeight: "1.1rem"
+            fontSize: "0.7875rem",
+            lineHeight: "0.9625rem"
           },
           children: t("payment.checkout.confirm", {
             payee

package/lib/payment/form/stripe/form.js

@@ -143,7 +143,7 @@ function StripeCheckoutForm({
         mt: 2,
         mb: 1,
         borderRadius: 0,
-        fontSize: "1.1rem"
+        fontSize: "0.875rem"
       },
       type: "submit",
       disabled: state.confirming || !state.loaded,

package/lib/payment/product-card.js

@@ -65,7 +65,7 @@ function ProductCard({
         variant: "body1",
         title: description,
         sx: {
-          fontSize: "0.85rem",
+          fontSize: "0.74375rem",
           mb: 0.5,
           lineHeight: 1.2,
           textAlign: "left"
@@ -74,7 +74,7 @@ function ProductCard({
         children: description
       }), extra && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
         sx: {
-          fontSize: "0.85rem"
+          fontSize: "0.74375rem"
         },
         color: "text.lighter",
         children: extra

package/lib/payment/product-item.js

@@ -98,7 +98,7 @@ function ProductItem({
             children: primaryText
           }), pricing.secondary && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
             sx: {
-              fontSize: "0.85rem",
+              fontSize: "0.74375rem",
               color: "text.lighter"
             },
             children: pricing.secondary

package/lib/payment/product-skeleton.js

@@ -37,7 +37,7 @@ function ProductSkeleton({
       }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, {
         variant: "text",
         sx: {
-          fontSize: "1rem",
+          fontSize: "0.875rem",
           width: "60%"
         }
       }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
@@ -62,7 +62,7 @@ function ProductSkeleton({
       (0, _jsxRuntime.jsx)(_material.Skeleton, {
         variant: "text",
         sx: {
-          fontSize: "1rem",
+          fontSize: "0.875rem",
           width: "60%"
         }
       }, i))]

package/lib/payment/skeleton/donation.js

@@ -14,7 +14,7 @@ function DonationSkeleton() {
       children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, {
         variant: "text",
         sx: {
-          fontSize: "2rem",
+          fontSize: "1.75rem",
           width: "40%"
         }
       }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, {

package/lib/payment/skeleton/overview.js

@@ -18,7 +18,7 @@ function OverviewSkeleton() {
         children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, {
           variant: "text",
           sx: {
-            fontSize: "2rem",
+            fontSize: "1.75rem",
             width: "40%"
           }
         })

package/lib/payment/skeleton/payment.js

@@ -14,7 +14,7 @@ function PaymentSkeleton() {
       children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, {
         variant: "text",
         sx: {
-          fontSize: "2rem",
+          fontSize: "1.75rem",
           width: "40%"
         }
       }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, {

package/lib/payment/summary.js

@@ -413,7 +413,7 @@ function PaymentSummary({
       }), headlines.then && headlines.showThen && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
         component: "div",
         sx: {
-          fontSize: "0.9rem",
+          fontSize: "0.7875rem",
           color: "text.lighter",
           textAlign: "right",
           margin: "-2px 0 8px"

package/lib/theme/index.js

@@ -65,7 +65,7 @@ function PaymentThemeProvider({
         },
         styleOverrides: {
           root: {
-            fontSize: "1rem",
+            fontSize: "0.875rem",
             fontWeight: 500,
             textTransform: "none",
             boxShadow: "none"
@@ -113,7 +113,8 @@ function PaymentThemeProvider({
       MuiTab: {
         styleOverrides: {
           root: {
-            textTransform: "none"
+            textTransform: "none",
+            fontSize: "0.875rem"
           }
         }
       },