@blocklet/payment-react 1.18.7 → 1.18.9

package/es/checkout/donate.d.ts

@@ -5,6 +5,7 @@ export type DonateHistory = {
     supporters: TCheckoutSessionExpanded[];
     currency: TPaymentCurrency;
     method: TPaymentMethod;
+    total?: number;
     totalAmount: string;
 };
 export type CheckoutDonateSettings = {
@@ -48,6 +49,7 @@ export type DonateProps = Pick<CheckoutProps, 'onPaid' | 'onError'> & {
     theme?: 'default' | 'inherit' | PaymentThemeOptions;
     children?: (openDialog: () => void, donateTotalAmount: string, supporters: DonateHistory, loading?: boolean, donateSettings?: DonationSettings) => React.ReactNode;
 };
+export declare function DonateDetails({ supporters, currency, method }: DonateHistory): import("react").JSX.Element;
 declare function CheckoutDonate(props: DonateProps): import("react").JSX.Element;
 declare namespace CheckoutDonate {
     var defaultProps: {

package/es/checkout/donate.js

@@ -7,14 +7,9 @@ import {
   Box,
   Button,
   CircularProgress,
-  Hidden,
   IconButton,
   Popover,
   Stack,
-  Table,
-  TableBody,
-  TableCell,
-  TableRow,
   Typography,
   Tooltip
 } from "@mui/material";
@@ -23,13 +18,13 @@ import omit from "lodash/omit";
 import uniqBy from "lodash/unionBy";
 import { useEffect, useRef, useState } from "react";
 import { Settings } from "@mui/icons-material";
-import TxLink from "../components/blockchain/tx.js";
 import api from "../libs/api.js";
 import {
   formatAmount,
   formatBNStr,
-  formatDateTime,
   getCustomerAvatar,
+  getTxLink,
+  getUserProfileLink,
   lazyLoad,
   openDonationSettings
 } from "../libs/util.js";
@@ -65,98 +60,190 @@ 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({ supporters = [], totalAmount = "0", currency, method }) {
-  const { t } = useLocaleContext();
-  const customers = uniqBy(supporters, "customer_did");
-  const customersNum = customers.length;
-  return /* @__PURE__ */ jsxs(
-    Box,
+export function DonateDetails({ supporters = [], currency, method }) {
+  const { locale } = useLocaleContext();
+  return /* @__PURE__ */ jsx(
+    Stack,
     {
-      display: "flex",
-      flexDirection: "column",
-      alignItems: "center",
       sx: {
-        ".MuiAvatar-root": {
-          width: "32px",
-          height: "32px"
-        }
+        width: "100%",
+        minWidth: "256px",
+        maxWidth: "calc(100vw - 32px)",
+        maxHeight: "300px",
+        overflowX: "hidden",
+        overflowY: "auto",
+        margin: "0 auto"
       },
-      gap: {
-        xs: 0.5,
-        sm: 1
-      },
-      children: [
-        /* @__PURE__ */ jsx(Typography, { component: "p", color: "text.secondary", children: customersNum === 0 ? /* @__PURE__ */ jsx("span", { style: emojiFont, children: t("payment.checkout.donation.empty") }) : t("payment.checkout.donation.summary", {
-          total: customersNum,
-          symbol: currency.symbol,
-          totalAmount: formatAmount(totalAmount || "0", currency.decimal)
-        }) }),
-        /* @__PURE__ */ jsx(AvatarGroup, { total: customersNum, max: 20, children: customers.map((x) => /* @__PURE__ */ jsx(
-          Avatar,
-          {
-            title: x.customer?.name,
-            alt: x.customer?.name,
-            src: getCustomerAvatar(x.customer?.did, x?.updated_at ? new Date(x.updated_at).toISOString() : "", 48),
-            variant: "circular",
-            sx: { width: 32, height: 32 }
+      children: supporters.map((x) => /* @__PURE__ */ jsxs(
+        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"
           },
-          x.id
-        )) })
-      ]
+          onClick: () => {
+            const { link, text } = getTxLink(method, x.payment_details);
+            if (link && text) {
+              window.open(link, "_blank");
+            }
+          },
+          children: [
+            /* @__PURE__ */ jsxs(
+              Stack,
+              {
+                direction: "row",
+                alignItems: "center",
+                spacing: 0.5,
+                sx: {
+                  flex: 3,
+                  overflow: "hidden"
+                },
+                children: [
+                  /* @__PURE__ */ jsx(
+                    Avatar,
+                    {
+                      src: 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(getUserProfileLink(x.customer?.did, locale), "_blank");
+                        }
+                      }
+                    },
+                    x.id
+                  ),
+                  /* @__PURE__ */ jsx(
+                    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(getUserProfileLink(x.customer?.did, locale), "_blank");
+                        }
+                      },
+                      children: x.customer?.name
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "flex-end", spacing: 0.5, sx: { flex: 1 }, children: [
+              /* @__PURE__ */ jsx(
+                Avatar,
+                {
+                  src: currency?.logo,
+                  alt: currency?.symbol,
+                  variant: "circular",
+                  sx: { width: 16, height: 16 }
+                },
+                x.id
+              ),
+              /* @__PURE__ */ jsx(Typography, { sx: { color: "text.secondary" }, children: formatBNStr(x.amount_total, currency.decimal) }),
+              /* @__PURE__ */ jsx(Typography, { sx: { color: "text.secondary" }, children: currency.symbol })
+            ] })
+          ]
+        },
+        x.id
+      ))
     }
   );
 }
-function SupporterTable({ supporters = [], totalAmount = "0", currency, method }) {
-  const { t } = useLocaleContext();
+function SupporterAvatar({
+  supporters = [],
+  totalAmount = "0",
+  currency,
+  method,
+  showDonateDetails = false
+}) {
+  const [open, setOpen] = useState(false);
   const customers = uniqBy(supporters, "customer_did");
   const customersNum = customers.length;
-  return /* @__PURE__ */ jsxs(Box, { display: "flex", flexDirection: "column", alignItems: "center", gap: { xs: 0.5, sm: 1 }, children: [
-    /* @__PURE__ */ jsx(Typography, { component: "p", color: "text.secondary", children: customersNum === 0 ? /* @__PURE__ */ jsx("span", { style: emojiFont, children: t("payment.checkout.donation.empty") }) : t("payment.checkout.donation.summary", {
-      total: customersNum,
-      symbol: currency.symbol,
-      totalAmount: formatAmount(totalAmount || "0", currency.decimal)
-    }) }),
-    /* @__PURE__ */ jsx(Table, { size: "small", sx: { width: "100%", overflow: "hidden" }, children: /* @__PURE__ */ jsx(TableBody, { children: supporters.map((x) => /* @__PURE__ */ jsxs(
-      TableRow,
+  if (customersNum === 0)
+    return null;
+  return /* @__PURE__ */ jsxs(Stack, { flexDirection: "row", justifyContent: "center", alignItems: "center", children: [
+    /* @__PURE__ */ jsx(AvatarGroup, { max: 5, children: customers.slice(0, 5).map((supporter) => /* @__PURE__ */ jsx(
+      Avatar,
       {
+        src: getCustomerAvatar(
+          supporter.customer?.did,
+          supporter?.updated_at ? new Date(supporter.updated_at).toISOString() : "",
+          24
+        ),
+        alt: supporter.customer?.name,
         sx: {
-          "> td": {
-            padding: "8px 16px 8px 0",
-            borderTop: "1px solid #e0e0e0",
-            borderBottom: "1px solid #e0e0e0"
-          },
-          "> td:last-of-type": {
-            paddingRight: "0"
+          width: "24px",
+          height: "24px"
+        }
+      },
+      supporter.customer?.id
+    )) }),
+    /* @__PURE__ */ jsx(
+      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" : ""} (${formatAmount(totalAmount || "0", currency?.decimal)} ${currency.symbol})`
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Dialog,
+      {
+        open,
+        onClose: () => setOpen(false),
+        sx: {
+          ".MuiDialogContent-root": {
+            width: "450px",
+            padding: "8px"
           }
         },
-        children: [
-          /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", spacing: 0.5, children: [
-            /* @__PURE__ */ jsx(
-              Avatar,
-              {
-                src: 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__ */ jsx(Hidden, { smDown: true, children: /* @__PURE__ */ jsx(Typography, { children: x.customer?.name }) })
-          ] }) }),
-          /* @__PURE__ */ jsx(TableCell, { align: "right", children: /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "flex-end", spacing: 0.5, children: [
-            /* @__PURE__ */ jsx(Typography, { fontWeight: 500, component: "strong", children: formatBNStr(x.amount_total, currency.decimal) }),
-            /* @__PURE__ */ jsx(Typography, { component: "span", children: currency.symbol })
-          ] }) }),
-          /* @__PURE__ */ jsx(Hidden, { smDown: true, children: /* @__PURE__ */ jsx(TableCell, { align: "right", children: /* @__PURE__ */ jsx(Typography, { children: formatDateTime(x.created_at) }) }) }),
-          /* @__PURE__ */ jsx(TableCell, { align: "right", children: /* @__PURE__ */ jsx(TxLink, { method, details: x.payment_details, mode: "customer", align: "right" }) })
-        ]
-      },
-      x.id
-    )) }) })
+        title: `${customersNum} supporter${customersNum > 1 ? "s" : ""}`,
+        children: /* @__PURE__ */ jsx(DonateDetails, { supporters, currency, method, totalAmount })
+      }
+    )
+  ] });
+}
+function SupporterTable({ supporters = [], totalAmount = "0", currency, method }) {
+  const customers = uniqBy(supporters, "customer_did");
+  const customersNum = customers.length;
+  if (customersNum === 0)
+    return null;
+  return /* @__PURE__ */ jsxs(Box, { display: "flex", flexDirection: "column", alignItems: "center", gap: { xs: 0.5, sm: 1 }, children: [
+    /* @__PURE__ */ jsx(SupporterAvatar, { supporters, totalAmount, currency, method }),
+    /* @__PURE__ */ jsx(DonateDetails, { supporters, totalAmount, currency, method })
   ] });
 }
 function SupporterSimple({ supporters = [], totalAmount = "0", currency, method }) {
@@ -404,16 +491,28 @@ function CheckoutDonateInner({
           {
             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__ */ jsxs(Stack, { direction: "row", alignItems: "center", spacing: 0.5, children: [
-              donateSettings.appearance.button.icon,
+              donateSettings.appearance.button.icon && /* @__PURE__ */ jsx(Typography, { sx: { mr: 0.5, display: "inline-flex", alignItems: "center" }, children: donateSettings.appearance.button.icon }),
               typeof donateSettings.appearance.button.text === "string" ? /* @__PURE__ */ jsx(Typography, { children: donateSettings.appearance.button.text }) : donateSettings.appearance.button.text
             ] })
           }
         ),
-        supporters.data && donateSettings.appearance.history.variant === "avatar" && /* @__PURE__ */ jsx(SupporterAvatar, { ...supporters.data }),
+        supporters.data && donateSettings.appearance.history.variant === "avatar" && /* @__PURE__ */ jsx(SupporterAvatar, { ...supporters.data, showDonateDetails: true }),
         supporters.data && donateSettings.appearance.history.variant === "table" && /* @__PURE__ */ jsx(SupporterTable, { ...supporters.data })
       ]
     }

package/es/components/livemode.js

@@ -14,7 +14,7 @@ export default function Livemode({ color, backgroundColor, sx }) {
         height: 18,
         lineHeight: 1.2,
         textTransform: "uppercase",
-        fontSize: "0.8rem",
+        fontSize: "0.7rem",
         fontWeight: "bold",
         borderRadius: "4px",
         backgroundColor,

package/es/components/table.js

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

package/es/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/es/index.js

@@ -1,4 +1,4 @@
-import CheckoutDonate from "./checkout/donate.js";
+import CheckoutDonate, { DonateDetails } from "./checkout/donate.js";
 import CheckoutForm from "./checkout/form.js";
 import CheckoutTable from "./checkout/table.js";
 import TxGas from "./components/blockchain/gas.js";
@@ -76,5 +76,6 @@ export {
   Link,
   OverdueInvoicePayment,
   PaymentBeneficiaries,
-  LoadingButton
+  LoadingButton,
+  DonateDetails
 };

package/es/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/es/libs/util.js

@@ -4,7 +4,7 @@ import trimEnd from "lodash/trimEnd";
 import numbro from "numbro";
 import stringWidth from "string-width";
 import { defaultCountries } from "react-international-phone";
-import { joinURL } from "ufo";
+import { joinURL, withQuery } from "ufo";
 import { t } from "../locales/index.js";
 import dayjs from "./dayjs.js";
 export const PAYMENT_KIT_DID = "z2qaCNvKMv5GjouKdcDWexv6WqtHbpNPQDnAk";
@@ -924,3 +924,12 @@ export function openDonationSettings(openInNewTab = false) {
     window.open(`${window.location.origin}${mountPoint}/integrations/donations`, openInNewTab ? "_blank" : "_self");
   }
 }
+export function getUserProfileLink(userDid, locale = "en") {
+  return joinURL(
+    window.location.origin,
+    withQuery(".well-known/service/user", {
+      locale,
+      did: userDid
+    })
+  );
+}

package/es/payment/amount.js

@@ -8,7 +8,7 @@ export default function PaymentAmount({ amount, sx }) {
       sx: {
         my: 0.5,
         fontWeight: 600,
-        fontSize: "2.5rem",
+        fontSize: "2.1875rem",
         letterSpacing: "-0.03rem",
         fontVariantNumeric: "tabular-nums",
         ...sx

package/es/payment/form/index.js

@@ -497,7 +497,7 @@ export default function PaymentForm({
           children: state.submitting || state.paying ? t("payment.checkout.processing") : buttonText
         }
       ) }),
-      ["subscription", "setup"].includes(checkoutSession.mode) && /* @__PURE__ */ jsx(Typography, { sx: { mt: 2.5, color: "text.lighter", fontSize: "0.9rem", lineHeight: "1.1rem" }, children: t("payment.checkout.confirm", { payee }) })
+      ["subscription", "setup"].includes(checkoutSession.mode) && /* @__PURE__ */ jsx(Typography, { sx: { mt: 2.5, color: "text.lighter", fontSize: "0.7875rem", lineHeight: "0.9625rem" }, children: t("payment.checkout.confirm", { payee }) })
     ] }) }),
     state.customerLimited && /* @__PURE__ */ jsx(
       ConfirmDialog,

package/es/payment/form/stripe/form.js

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

package/es/payment/product-card.js

@@ -34,12 +34,12 @@ export default function ProductCard({ size, variant, name, logo, description, ex
             {
               variant: "body1",
               title: description,
-              sx: { fontSize: "0.85rem", mb: 0.5, lineHeight: 1.2, textAlign: "left" },
+              sx: { fontSize: "0.74375rem", mb: 0.5, lineHeight: 1.2, textAlign: "left" },
               color: "text.lighter",
               children: description
             }
           ),
-          extra && /* @__PURE__ */ jsx(Box, { sx: { fontSize: "0.85rem" }, color: "text.lighter", children: extra })
+          extra && /* @__PURE__ */ jsx(Box, { sx: { fontSize: "0.74375rem" }, color: "text.lighter", children: extra })
         ]
       }
     )

package/es/payment/product-item.js

@@ -65,7 +65,7 @@ export default function ProductItem({
             ),
             /* @__PURE__ */ jsxs(Stack, { direction: "column", alignItems: "flex-end", flex: 1, children: [
               /* @__PURE__ */ jsx(Typography, { sx: { color: "text.primary", fontWeight: 500, whiteSpace: "nowrap" }, gutterBottom: true, children: primaryText }),
-              pricing.secondary && /* @__PURE__ */ jsx(Typography, { sx: { fontSize: "0.85rem", color: "text.lighter" }, children: pricing.secondary })
+              pricing.secondary && /* @__PURE__ */ jsx(Typography, { sx: { fontSize: "0.74375rem", color: "text.lighter" }, children: pricing.secondary })
             ] })
           ]
         }

package/es/payment/product-skeleton.js

@@ -21,12 +21,12 @@ export default function ProductSkeleton({ count }) {
       },
       children: [
         /* @__PURE__ */ jsx(Typography, { component: "div", variant: "h4", sx: { width: "50%" }, children: /* @__PURE__ */ jsx(Skeleton, {}) }),
-        /* @__PURE__ */ jsx(Skeleton, { variant: "text", sx: { fontSize: "1rem", width: "60%" } }),
+        /* @__PURE__ */ jsx(Skeleton, { variant: "text", sx: { fontSize: "0.875rem", width: "60%" } }),
         /* @__PURE__ */ jsx(Typography, { component: "div", variant: "h3", sx: { width: "60%" }, children: /* @__PURE__ */ jsx(Skeleton, {}) }),
         /* @__PURE__ */ jsx(Typography, { component: "div", variant: "h3", sx: { width: "100%" }, children: /* @__PURE__ */ jsx(Skeleton, {}) }),
         Array.from({ length: count }).map((_, i) => (
           // eslint-disable-next-line react/no-array-index-key
-          /* @__PURE__ */ jsx(Skeleton, { variant: "text", sx: { fontSize: "1rem", width: "60%" } }, i)
+          /* @__PURE__ */ jsx(Skeleton, { variant: "text", sx: { fontSize: "0.875rem", width: "60%" } }, i)
         ))
       ]
     }

package/es/payment/skeleton/donation.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { Box, Divider, Fade, Skeleton, Stack } from "@mui/material";
 export default function DonationSkeleton() {
   return /* @__PURE__ */ jsx(Fade, { in: true, children: /* @__PURE__ */ jsxs(Stack, { direction: "column", children: [
-    /* @__PURE__ */ jsx(Skeleton, { variant: "text", sx: { fontSize: "2rem", width: "40%" } }),
+    /* @__PURE__ */ jsx(Skeleton, { variant: "text", sx: { fontSize: "1.75rem", width: "40%" } }),
     /* @__PURE__ */ jsx(Skeleton, { sx: { mt: 2 }, variant: "rounded", height: 40 }),
     /* @__PURE__ */ jsx(
       Divider,

package/es/payment/skeleton/overview.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { Fade, Skeleton, Stack, Typography } from "@mui/material";
 export default function OverviewSkeleton() {
   return /* @__PURE__ */ jsx(Fade, { in: true, children: /* @__PURE__ */ jsxs(Stack, { direction: "column", children: [
-    /* @__PURE__ */ jsx(Stack, { direction: "row", alignItems: "center", spacing: 2, children: /* @__PURE__ */ jsx(Skeleton, { variant: "text", sx: { fontSize: "2rem", width: "40%" } }) }),
+    /* @__PURE__ */ jsx(Stack, { direction: "row", alignItems: "center", spacing: 2, children: /* @__PURE__ */ jsx(Skeleton, { variant: "text", sx: { fontSize: "1.75rem", width: "40%" } }) }),
     /* @__PURE__ */ jsx(Skeleton, { sx: { mt: 2 }, variant: "rounded", height: 100 }),
     /* @__PURE__ */ jsx(Typography, { mt: 2, component: "div", variant: "h4", children: /* @__PURE__ */ jsx(Skeleton, {}) }),
     /* @__PURE__ */ jsx(Typography, { component: "div", variant: "h2", children: /* @__PURE__ */ jsx(Skeleton, {}) })

package/es/payment/skeleton/payment.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { Box, Fade, Skeleton, Stack, Typography } from "@mui/material";
 export default function PaymentSkeleton() {
   return /* @__PURE__ */ jsx(Fade, { in: true, children: /* @__PURE__ */ jsxs(Stack, { direction: "column", children: [
-    /* @__PURE__ */ jsx(Skeleton, { variant: "text", sx: { fontSize: "2rem", width: "40%" } }),
+    /* @__PURE__ */ jsx(Skeleton, { variant: "text", sx: { fontSize: "1.75rem", width: "40%" } }),
     /* @__PURE__ */ jsx(Skeleton, { sx: { mt: 2 }, variant: "rounded", height: 68 }),
     /* @__PURE__ */ jsxs(Box, { mt: 1, children: [
       /* @__PURE__ */ jsx(Typography, { component: "div", variant: "h4", mb: -1, children: /* @__PURE__ */ jsx(Skeleton, {}) }),

package/es/payment/summary.js

@@ -309,7 +309,7 @@ export default function PaymentSummary({
       Typography,
       {
         component: "div",
-        sx: { fontSize: "0.9rem", color: "text.lighter", textAlign: "right", margin: "-2px 0 8px" },
+        sx: { fontSize: "0.7875rem", color: "text.lighter", textAlign: "right", margin: "-2px 0 8px" },
         children: headlines.then
       }
     )

package/es/theme/index.js

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

package/es/theme/typography.js

@@ -1,6 +1,6 @@
 export const typography = {
   h1: {
-    fontSize: "1.875rem",
+    fontSize: "1.5rem",
     lineHeight: 1.2,
     fontWeight: 800,
     letterSpacing: "-.025em"
@@ -12,38 +12,38 @@ export const typography = {
     letterSpacing: "-.025em"
   },
   h3: {
-    fontSize: "1.25rem",
+    fontSize: "1.09375rem",
     lineHeight: 1.4,
     fontWeight: 600,
     letterSpacing: "-.025em"
   },
   h4: {
-    fontSize: "1.125rem",
+    fontSize: "1.09375rem",
     lineHeight: 1.5,
     fontWeight: 600
   },
   h5: {
-    fontSize: "1rem",
+    fontSize: "0.875rem",
     lineHeight: 1.75,
     fontWeight: 400
   },
   h6: {
-    fontSize: "1rem",
+    fontSize: "0.875rem",
     lineHeight: 1.75,
     fontWeight: 400
   },
   subtitle1: {
-    fontSize: "1rem",
+    fontSize: "0.875rem",
     lineHeight: 1.75,
     fontWeight: 400
   },
   subtitle2: {
-    fontSize: "1rem",
+    fontSize: "0.875rem",
     lineHeight: 1.75,
     fontWeight: 400
   },
   body1: {
-    fontSize: "1rem",
+    fontSize: "0.875rem",
     lineHeight: 1.75
   },
   fontWeightLight: 300,

package/lib/checkout/donate.d.ts

@@ -5,6 +5,7 @@ export type DonateHistory = {
     supporters: TCheckoutSessionExpanded[];
     currency: TPaymentCurrency;
     method: TPaymentMethod;
+    total?: number;
     totalAmount: string;
 };
 export type CheckoutDonateSettings = {
@@ -48,6 +49,7 @@ export type DonateProps = Pick<CheckoutProps, 'onPaid' | 'onError'> & {
     theme?: 'default' | 'inherit' | PaymentThemeOptions;
     children?: (openDialog: () => void, donateTotalAmount: string, supporters: DonateHistory, loading?: boolean, donateSettings?: DonationSettings) => React.ReactNode;
 };
+export declare function DonateDetails({ supporters, currency, method }: DonateHistory): import("react").JSX.Element;
 declare function CheckoutDonate(props: DonateProps): import("react").JSX.Element;
 declare namespace CheckoutDonate {
     var defaultProps: {