@blocklet/payment-react 1.14.20 → 1.14.22

package/es/libs/util.js

@@ -400,24 +400,42 @@ export function formatUpsellSaving(items, currency) {
   const after = new BN(to.total);
   return Number(before.sub(after).mul(new BN(100)).div(before).toString()).toFixed(0);
 }
+export function formatMeteredThen(subscription, recurring, hasMetered, locale = "en") {
+  if (hasMetered) {
+    return t("payment.checkout.meteredThen", locale, { subscription, recurring });
+  }
+  return t("payment.checkout.then", locale, { subscription, recurring });
+}
+export function formatPriceDisplay({ amount, then, actualAmount, showThen }, recurring, hasMetered, locale = "en") {
+  if (Number(actualAmount) === 0 && hasMetered) {
+    return t("payment.checkout.metered", locale, { recurring });
+  }
+  if (showThen) {
+    return [amount, then].filter(Boolean).join(", ");
+  }
+  return [amount, then].filter(Boolean).join(" ");
+}
 export function formatCheckoutHeadlines(items, currency, trialInDays, locale = "en") {
   const brand = getStatementDescriptor(items);
   const { total } = getCheckoutAmount(items, currency, trialInDays > 0);
+  const actualAmount = fromUnitToToken(total, currency.decimal);
   const amount = `${fromUnitToToken(total, currency.decimal)} ${currency.symbol}`;
   if (items.length === 0) {
     return {
       action: t("payment.checkout.empty", locale),
       amount: "0",
-      then: ""
+      then: "",
+      actualAmount: "0",
+      priceDisplay: "0"
     };
   }
   const { name } = items[0]?.price.product || { name: "" };
   if (items.every((x) => x.price.type === "one_time")) {
     const action = t("payment.checkout.pay", locale, { payee: brand });
     if (items.length > 1) {
-      return { action, amount };
+      return { action, amount, actualAmount, priceDisplay: amount };
     }
-    return { action, amount, then: "" };
+    return { action, amount, then: "", actualAmount, priceDisplay: amount };
   }
   const item = items.find((x) => x.price.type === "recurring");
   const recurring = formatRecurring(
@@ -426,8 +444,8 @@ export function formatCheckoutHeadlines(items, currency, trialInDays, locale = "
     "per",
     locale
   );
+  const hasMetered = items.some((x) => x.price.type === "recurring" && x.price.recurring?.usage_type === "metered");
   if (items.every((x) => x.price.type === "recurring")) {
-    const hasMetered = items.some((x) => x.price.type === "recurring" && x.price.recurring?.usage_type === "metered");
     const subscription2 = [
       hasMetered ? t("payment.checkout.least", locale) : "",
       fromUnitToToken(
@@ -443,29 +461,53 @@ export function formatCheckoutHeadlines(items, currency, trialInDays, locale = "
     ].filter(Boolean).join(" ");
     if (items.length > 1) {
       if (trialInDays > 0) {
-        return {
+        const result4 = {
           action: t("payment.checkout.try2", locale, { name, count: items.length - 1 }),
           amount: t("payment.checkout.free", locale, { count: trialInDays }),
-          then: t("payment.checkout.then", locale, { subscription: subscription2, recurring })
+          then: formatMeteredThen(subscription2, recurring, hasMetered && Number(subscription2) === 0, locale),
+          showThen: true,
+          actualAmount: "0"
+        };
+        return {
+          ...result4,
+          priceDisplay: formatPriceDisplay(result4, recurring, hasMetered, locale)
         };
       }
-      return {
+      const result3 = {
         action: t("payment.checkout.sub2", locale, { name, count: items.length - 1 }),
         amount,
-        then: recurring
+        then: hasMetered ? t("payment.checkout.meteredThen", locale, { recurring }) : recurring,
+        showThen: hasMetered,
+        actualAmount
+      };
+      return {
+        ...result3,
+        priceDisplay: formatPriceDisplay(result3, recurring, hasMetered, locale)
       };
     }
     if (trialInDays > 0) {
-      return {
+      const result3 = {
         action: t("payment.checkout.try1", locale, { name }),
         amount: t("payment.checkout.free", locale, { count: trialInDays }),
-        then: t("payment.checkout.then", locale, { subscription: subscription2, recurring })
+        then: formatMeteredThen(subscription2, recurring, hasMetered && Number(subscription2) === 0, locale),
+        showThen: true,
+        actualAmount: "0"
+      };
+      return {
+        ...result3,
+        priceDisplay: formatPriceDisplay(result3, recurring, hasMetered, locale)
       };
     }
-    return {
+    const result2 = {
       action: t("payment.checkout.sub1", locale, { name }),
       amount,
-      then: recurring
+      then: hasMetered ? t("payment.checkout.meteredThen", locale, { recurring }) : recurring,
+      showThen: hasMetered,
+      actualAmount
+    };
+    return {
+      ...result2,
+      priceDisplay: formatPriceDisplay(result2, recurring, hasMetered, locale)
     };
   }
   const subscription = fromUnitToToken(
@@ -477,10 +519,21 @@ export function formatCheckoutHeadlines(items, currency, trialInDays, locale = "
     }, new BN(0)),
     currency.decimal
   );
-  return {
+  const result = {
     action: t("payment.checkout.pay", locale, { payee: brand }),
     amount,
-    then: t("payment.checkout.then", locale, { subscription: `${subscription} ${currency.symbol}`, recurring })
+    then: formatMeteredThen(
+      `${subscription} ${currency.symbol}`,
+      recurring,
+      hasMetered && Number(subscription) === 0,
+      locale
+    ),
+    showThen: true,
+    actualAmount
+  };
+  return {
+    ...result,
+    priceDisplay: formatPriceDisplay(result, recurring, hasMetered, locale)
   };
 }
 export function formatAmount(amount, decimals) {
@@ -516,41 +569,46 @@ export function formatSubscriptionProduct(items, maxLength = 2) {
   return names.slice(0, maxLength).join(", ") + (names.length > maxLength ? ` and ${names.length - maxLength} more` : "");
 }
 export const getSubscriptionTimeSummary = (subscription) => {
-  const lines = [`Started on ${formatToDate(subscription.start_date * 1e3)}`];
+  const lines = [`Start on ${formatToDate(subscription.start_date * 1e3, "en", "YYYY-MM-DD")}`];
+  const getLineTimeMessage = (time) => {
+    const curDay = dayjs().isSame(dayjs(time), "day");
+    const timeFormat = curDay ? "HH:mm:ss" : "YYYY-MM-DD";
+    return `${curDay ? "in" : "on"} ${formatToDate(time, "en", timeFormat)}`;
+  };
   if (subscription.status === "active" || subscription.status === "trialing") {
     if (subscription.cancel_at) {
-      lines.push(`will cancel on ${formatToDate(subscription.cancel_at * 1e3)}`);
+      lines.push(`Ended ${getLineTimeMessage(subscription.cancel_at * 1e3)}`);
     } else if (subscription.cancel_at_period_end) {
-      lines.push(`will cancel on ${formatToDate(subscription.current_period_end * 1e3)}`);
+      lines.push(`Ended ${getLineTimeMessage(subscription.current_period_end * 1e3)}`);
     } else {
-      lines.push(`will renew on ${formatToDate(subscription.current_period_end * 1e3)}`);
+      lines.push(`Renew ${getLineTimeMessage(subscription.current_period_end * 1e3)}`);
     }
   } else if (subscription.status === "past_due") {
-    lines.push(`will cancel on ${formatToDate((subscription.cancel_at || subscription.current_period_end) * 1e3)}`);
+    lines.push(`Ended ${getLineTimeMessage((subscription.cancel_at || subscription.current_period_end) * 1e3)}`);
   } else if (subscription.status === "canceled") {
-    lines.push(`canceled on ${formatToDate(subscription.canceled_at * 1e3)}`);
+    lines.push(`Ended ${getLineTimeMessage(subscription.canceled_at * 1e3)}`);
   }
-  return lines.join(", ");
+  return lines.join(",");
 };
-export const getSubscriptionAction = (subscription) => {
+export const getSubscriptionAction = (subscription, actionProps) => {
   if (subscription.status === "active" || subscription.status === "trialing") {
     if (subscription.cancel_at_period_end) {
       if (subscription.cancelation_details?.reason === "payment_failed") {
         return null;
       }
-      return { action: "recover", variant: "contained", color: "primary", canRenew: false };
+      return { action: "recover", variant: "contained", color: "primary", canRenew: false, ...actionProps?.recover };
     }
     if (subscription.cancel_at && subscription.cancel_at !== subscription.current_period_end) {
       return null;
     }
-    return { action: "cancel", variant: "outlined", color: "inherit", canRenew: false };
+    return { action: "cancel", variant: "outlined", color: "inherit", canRenew: false, ...actionProps?.cancel };
   }
   if (subscription.status === "past_due") {
     const canRenew = subscription.cancel_at && subscription.cancel_at !== subscription.current_period_end;
-    return { action: "pastDue", variant: "contained", color: "primary", canRenew };
+    return { action: "pastDue", variant: "contained", color: "primary", canRenew, ...actionProps?.pastDue };
   }
   if (subscription.status !== "canceled" && subscription.cancel_at_period_end) {
-    return { action: "recover", variant: "contained", color: "primary", canRenew: false };
+    return { action: "recover", variant: "contained", color: "primary", canRenew: false, ...actionProps?.recover };
   }
   return null;
 };
@@ -657,8 +715,8 @@ export function formatTotalPrice({
   }
   const unitValue = new BN(price.custom_unit_amount || price.unit_amount);
   const currency = price?.currency ?? {};
-  const total = `${fromUnitToToken(unitValue.mul(new BN(quantity)), currency.decimal)} ${currency.symbol}`;
-  const unit = `${fromUnitToToken(unitValue, currency.decimal)} ${currency.symbol}`;
+  const total = `${fromUnitToToken(unitValue.mul(new BN(quantity)), currency.decimal)} ${currency.symbol} `;
+  const unit = `${fromUnitToToken(unitValue, currency.decimal)} ${currency.symbol} `;
   const appendUnit = (v, alt) => {
     if (product.unit_label) {
       return `${v}/${price.product.unit_label}`;
@@ -690,6 +748,12 @@ export function formatQuantityInventory(price, quantity, locale = "en") {
   }
   return "";
 }
+export function formatSubscriptionStatus(status) {
+  if (status === "canceled") {
+    return "Ended";
+  }
+  return status;
+}
 export function formatAmountPrecisionLimit(amount, locale = "en", precision = 6) {
   if (!amount) {
     return "";

package/es/locales/en.js

@@ -60,7 +60,7 @@ export default flat({
     continue: "Continue",
     qty: "Qty {count}",
     each: "{unit} each",
-    trial: "Free for {count} days",
+    trial: "Free for {count} day{count > 1 ? 's' : ''}",
     billed: "billed {rule}",
     metered: "based on usage",
     hour: "hour",
@@ -83,6 +83,7 @@ export default flat({
     years: "years",
     type: "type",
     donation: "Donation",
+    recoverFrom: "Recovered From",
     quantityLimitPerCheckout: "Exceed purchase limit",
     quantityNotEnough: "Exceed inventory",
     amountPrecisionLimit: "Amount decimal places must be less than or equal to {precision}"
@@ -108,10 +109,12 @@ export default flat({
         subscription: "View subscription",
         invoice: "View invoice"
       },
+      paymentRequired: "Payment Required",
       staking: {
         title: "Staking Required",
         tooltip: "Staking is used to ensure that future invoices can be paid normally. Revoking the staking from DID Wallet means canceling the subscription."
       },
+      stakingConfirm: "In this payment, the staked amount is separate from the product cost.",
       donation: {
         between: "Please enter an amount between {min} and {max}.",
         custom: "Custom Amount",
@@ -128,7 +131,9 @@ export default flat({
       sub1: "Subscribe to {name}",
       sub2: "Subscribe to {name} and {count} more",
       then: "Then {subscription} {recurring}",
-      free: "{count} days free",
+      meteredThen: "Then {recurring} based on usage",
+      metered: "{recurring} based on usage",
+      free: "{count} day{count > 1 ? 's' : ''} free",
       least: "continue with at least",
       completed: {
         payment: "Thanks for your purchase",
@@ -137,7 +142,7 @@ export default flat({
         donate: "Thanks for your support",
         tip: "A payment to {payee} has been completed. You can view the details of this payment in your account."
       },
-      confirm: "By confirming your subscription, you allow {payee} to charge your account or slashing your staking for this and future payments in accordance with their terms. You can always cancel your subscription, or revoking your staking from DID Wallet.",
+      confirm: "Confirming allows {payee} to charge or reduce your staking. You can cancel or revoke staking anytime.",
       required: "Required",
       invalid: "Invalid",
       billing: {
@@ -177,13 +182,17 @@ export default flat({
       emptyItems: {
         title: "Nothing to show here",
         description: "Seems this checkoutSession is not configured properly"
-      }
+      },
+      orderSummary: "Order Summary",
+      paymentDetails: "Payment Details",
+      productListTotal: "Includes {total} items"
     },
     customer: {
       payments: "Payment History",
       invoices: "Invoice History",
       details: "Details",
       summary: "Summary",
+      specifics: "Specifics",
       update: "Update Information",
       empty: "Seems you do not have any subscriptions or payments here",
       cancel: {
@@ -258,13 +267,17 @@ export default flat({
         renewSuccess: "You have successfully renewed the subscription",
         renewError: "Failed to renew the subscription",
         empty: "There are no invoices",
-        next: "No invoices yet, next invoice will be generated on {date}"
+        next: "No invoices yet, next invoice will be generated on {date}",
+        invoiceNumber: "Invoice Number",
+        emptyList: "No Invoice"
       },
       payment: {
-        empty: "There are no payments"
+        empty: "There are no payments",
+        emptyList: "No Payment"
       },
       refund: {
-        empty: "There are no refunds"
+        empty: "There are no refunds",
+        emptyList: "No Refund"
       },
       subscriptions: {
         plan: "Plan",
@@ -297,5 +310,8 @@ export default flat({
       [RefundType.refund]: "Refund",
       [RefundType.stakeReturn]: "Stake Return"
     }
+  },
+  empty: {
+    records: "No matching records found"
   }
 });

package/es/locales/index.d.ts

@@ -2,7 +2,6 @@ export declare const translations: {
     zh: any;
     en: any;
 };
-export declare const replace: (template: string, data?: Record<string, any>) => string;
 export declare const createTranslator: ({ fallbackLocale }: {
     fallbackLocale?: string | undefined;
 }, langs?: any) => (key: string, locale?: string, data?: Record<string, any>) => string;

package/es/locales/index.js

@@ -1,10 +1,19 @@
+import { template } from "lodash";
 import en from "./en.js";
 import zh from "./zh.js";
 export const translations = {
   zh,
   en
 };
-export const replace = (template, data = {}) => template.replace(/{(\w*)}/g, (_, key) => data.hasOwnProperty(key) ? data[key] : "");
+const replace = (t2, data = {}) => {
+  try {
+    const compiled = template(t2, { interpolate: /{([\s\S]+?)}/g, escape: /{([\s\S]+?)}/g });
+    return compiled(data);
+  } catch (e) {
+    console.error(`Error evaluating template: ${t2}`, e);
+    return "";
+  }
+};
 export const createTranslator = ({ fallbackLocale = "en" }, langs = translations) => {
   return (key, locale = fallbackLocale, data = {}) => {
     if (!langs[locale] || !langs[locale][key]) {

package/es/locales/zh.js

@@ -83,6 +83,7 @@ export default flat({
     years: "\u5E74",
     type: "\u7C7B\u578B",
     donation: "\u6253\u8D4F",
+    recoverFrom: "\u6062\u590D\u81EA",
     quantityLimitPerCheckout: "\u8D85\u51FA\u8D2D\u4E70\u9650\u5236",
     quantityNotEnough: "\u5E93\u5B58\u4E0D\u8DB3",
     amountPrecisionLimit: "\u91D1\u989D\u5C0F\u6570\u4F4D\u6570\u5FC5\u987B\u5728 {precision} \u4F4D\u4EE5\u5185"
@@ -108,10 +109,12 @@ export default flat({
         subscription: "\u67E5\u770B\u8BA2\u9605",
         invoice: "\u67E5\u770B\u8D26\u5355"
       },
+      paymentRequired: "\u652F\u4ED8\u6570\u91CF",
       staking: {
         title: "\u8D28\u62BC\u6570\u91CF",
         tooltip: "\u8D28\u62BC\u76F8\u5F53\u4E8E\u4FDD\u8BC1\u91D1\uFF0C\u7528\u4E8E\u786E\u4FDD\u672A\u6765\u7684\u8D26\u5355\u80FD\u591F\u6B63\u5E38\u6263\u6B3E\uFF0C\u5982\u679C\u4F60\u4ECE DID Wallet \u64A4\u9500\u8D28\u62BC\uFF0C\u8BA2\u9605\u4E5F\u4F1A\u88AB\u53D6\u6D88\u3002"
       },
+      stakingConfirm: "\u5728\u6B64\u652F\u4ED8\u4E2D\uFF0C\u8D28\u62BC\u91D1\u989D\u4E0E\u4EA7\u54C1\u8D39\u7528\u5206\u5F00",
       donation: {
         between: "\u91D1\u989D\u5FC5\u987B\u5927\u4E8E {min} \u4E14\u5C0F\u4E8E {max}",
         custom: "\u8F93\u5165\u91D1\u989D",
@@ -128,7 +131,9 @@ export default flat({
       sub1: "\u8BA2\u9605 {name}",
       sub2: "\u8BA2\u9605 {name} \u7B49{count}\u4E2A\u4EA7\u54C1",
       then: "\u7136\u540E {subscription} {recurring}",
-      free: "{count} \u5929",
+      meteredThen: "\u7136\u540E{recurring}\u6309\u7528\u91CF\u8BA1\u8D39",
+      metered: "{recurring}\u6309\u7528\u91CF\u8BA1\u8D39",
+      free: "\u514D\u8D39\u8BD5\u7528 {count} \u5929",
       least: "\u81F3\u5C11",
       completed: {
         payment: "\u611F\u8C22\u60A8\u7684\u8D2D\u4E70",
@@ -137,7 +142,7 @@ export default flat({
         donate: "\u611F\u8C22\u60A8\u7684\u652F\u6301",
         tip: "\u5411{payee}\u7684\u4ED8\u6B3E\u5DF2\u5B8C\u6210\u3002\u60A8\u53EF\u4EE5\u5728\u60A8\u7684\u8D26\u6237\u4E2D\u67E5\u770B\u6B64\u4ED8\u6B3E\u7684\u8BE6\u7EC6\u4FE1\u606F\u3002"
       },
-      confirm: "\u901A\u8FC7\u786E\u8BA4\u60A8\u7684\u8BA2\u9605\uFF0C\u60A8\u5141\u8BB8{payee}\u6309\u7167\u5176\u6761\u6B3E\u5BF9\u60A8\u7684\u8D26\u6237\u8FDB\u884C\u4ED8\u6B3E\u6216\u8005\u7F5A\u6CA1\u60A8\u7684\u8D28\u62BC\u3002\u60A8\u968F\u65F6\u53EF\u4EE5\u53D6\u6D88\u60A8\u7684\u8BA2\u9605\uFF0C\u6216\u8005\u64A4\u9500\u8D28\u62BC\u3002",
+      confirm: "\u786E\u8BA4\u5141\u8BB8{payee}\u5BF9\u60A8\u7684\u8D26\u6237\u8FDB\u884C\u4ED8\u6B3E\u6216\u8005\u7F5A\u6CA1\u60A8\u7684\u8D28\u62BC\u3002\u60A8\u968F\u65F6\u53EF\u4EE5\u53D6\u6D88\u60A8\u7684\u8BA2\u9605\uFF0C\u6216\u8005\u64A4\u9500\u8D28\u62BC\u3002",
       required: "\u5FC5\u586B\u9879",
       invalid: "\u65E0\u6548",
       billing: {
@@ -177,13 +182,17 @@ export default flat({
       emptyItems: {
         title: "\u6CA1\u6709\u4EFB\u4F55\u8D2D\u4E70\u9879\u76EE",
         description: "\u53EF\u80FD\u8FD9\u4E2A\u4ED8\u6B3E\u94FE\u63A5\u6CA1\u6709\u6B63\u786E\u914D\u7F6E"
-      }
+      },
+      orderSummary: "\u8BA2\u5355\u6982\u89C8",
+      paymentDetails: "\u652F\u4ED8\u4FE1\u606F",
+      productListTotal: "\u5305\u62EC {total} \u9879"
     },
     customer: {
       payments: "\u652F\u4ED8\u5386\u53F2",
       invoices: "\u8D26\u5355\u5386\u53F2",
       details: "\u8D26\u6237\u8BE6\u60C5",
       summary: "\u8BA1\u8D39\u6458\u8981",
+      specifics: "\u5177\u4F53\u4FE1\u606F",
       update: "\u66F4\u65B0\u5BA2\u6237\u4FE1\u606F",
       empty: "\u770B\u8D77\u6765\u60A8\u5728\u8FD9\u91CC\u6CA1\u6709\u4EFB\u4F55\u8BA2\u9605\u6216\u652F\u4ED8",
       cancel: {
@@ -258,13 +267,17 @@ export default flat({
         renewSuccess: "\u8BA2\u9605\u6062\u590D\u6210\u529F",
         renewError: "\u8BA2\u9605\u6062\u590D\u5931\u8D25",
         empty: "\u6CA1\u6709\u4EFB\u4F55\u8D26\u5355",
-        next: "\u8FD8\u6CA1\u6709\u8D26\u5355\uFF0C\u4E0B\u6B21\u8D26\u5355\u5C06\u5728 {date} \u751F\u6210"
+        next: "\u8FD8\u6CA1\u6709\u8D26\u5355\uFF0C\u4E0B\u6B21\u8D26\u5355\u5C06\u5728 {date} \u751F\u6210",
+        invoiceNumber: "\u8D26\u5355\u7F16\u53F7",
+        emptyList: "\u6CA1\u6709\u8D26\u5355"
       },
       payment: {
-        empty: "\u6CA1\u6709\u652F\u4ED8\u8BB0\u5F55"
+        empty: "\u6CA1\u6709\u652F\u4ED8\u8BB0\u5F55",
+        emptyList: "\u6CA1\u6709\u652F\u4ED8\u8BB0\u5F55"
       },
       refund: {
-        empty: "\u6CA1\u6709\u9000\u6B3E\u8BB0\u5F55"
+        empty: "\u6CA1\u6709\u9000\u6B3E\u8BB0\u5F55",
+        emptyList: "\u6CA1\u6709\u9000\u6B3E\u8BB0\u5F55"
       },
       subscriptions: {
         plan: "\u8BA2\u9605",
@@ -297,5 +310,8 @@ export default flat({
       [RefundType.refund]: "\u9000\u6B3E",
       [RefundType.stakeReturn]: "\u9000\u62BC\u91D1"
     }
+  },
+  empty: {
+    records: "\u6CA1\u6709\u627E\u5230\u5339\u914D\u7684\u8BB0\u5F55"
   }
 });

package/es/payment/error.js

@@ -3,7 +3,7 @@ import { Button, Link, Stack, Typography } from "@mui/material";
 function getHeightStyle(mode) {
   switch (mode) {
     case "standalone":
-      return { height: "100vh" };
+      return { height: "100vh", maxHeight: "100%" };
     default:
       return { height: "auto", minHeight: 200 };
   }
@@ -13,7 +13,7 @@ export default function PaymentError({ title, description, button, mode }) {
   return /* @__PURE__ */ jsx(Stack, { sx: heightStyle, alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ jsxs(Stack, { sx: { width: "280px" }, direction: "column", alignItems: "center", justifyContent: "center", children: [
     /* @__PURE__ */ jsx(Typography, { variant: "h5", sx: { mb: 2 }, children: title }),
     /* @__PURE__ */ jsx(Typography, { variant: "body1", sx: { mb: 2, textAlign: "center" }, children: description }),
-    /* @__PURE__ */ jsx(Button, { variant: "text", size: "small", component: Link, href: window.blocklet?.appUrl, children: button })
+    /* @__PURE__ */ jsx(Button, { variant: "text", size: "small", sx: { color: "text.link" }, component: Link, href: window.blocklet?.appUrl, children: button })
   ] }) });
 }
 PaymentError.defaultProps = {

package/es/payment/footer.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Typography } from "@mui/material";
 export default function CheckoutFooter({ ...props }) {
-  return /* @__PURE__ */ jsxs(Typography, { color: "text.secondary", fontSize: 12, ...props, children: [
+  return /* @__PURE__ */ jsxs(Typography, { color: "text.lighter", fontSize: 12, ...props, children: [
     "Powered by",
     " ",
     /* @__PURE__ */ jsx(Typography, { component: "span", sx: { fontWeight: "bold", fontSize: 12 }, children: "ArcBlock" })

package/es/payment/form/address.d.ts

@@ -1,7 +1,14 @@
 /// <reference types="react" />
+import { SxProps } from '@mui/material';
 type Props = {
     mode: string;
     stripe: boolean;
+    sx?: SxProps;
 };
-export default function AddressForm({ mode, stripe }: Props): import("react").JSX.Element | null;
-export {};
+declare function AddressForm({ mode, stripe, sx }: Props): import("react").JSX.Element | null;
+declare namespace AddressForm {
+    var defaultProps: {
+        sx: {};
+    };
+}
+export default AddressForm;