@blocklet/payment-react 1.18.6 → 1.18.7

package/es/checkout/donate.d.ts

@@ -1,4 +1,4 @@
-import type { DonationSettings, TCheckoutSessionExpanded, TPaymentCurrency, TPaymentMethod } from '@blocklet/payment-types';
+import type { DonationSettings, PaymentBeneficiary, TCheckoutSessionExpanded, TPaymentCurrency, TPaymentMethod } from '@blocklet/payment-types';
 import { type ButtonProps as MUIButtonProps } from '@mui/material';
 import type { CheckoutProps, PaymentThemeOptions } from '../types';
 export type DonateHistory = {
@@ -7,14 +7,38 @@ export type DonateHistory = {
     method: TPaymentMethod;
     totalAmount: string;
 };
-export type RequiredDonationSettings = Pick<DonationSettings, 'target' | 'title' | 'description' | 'reference' | 'beneficiaries'>;
-type OptionalDonationSettings = Partial<Omit<DonationSettings, keyof RequiredDonationSettings>>;
+export type CheckoutDonateSettings = {
+    target: string;
+    title: string;
+    description: string;
+    reference: string;
+    beneficiaries: PaymentBeneficiary[];
+    amount?: {
+        presets?: string[];
+        preset?: string;
+        minimum?: string;
+        maximum?: string;
+        custom?: boolean;
+    };
+    appearance?: {
+        button?: {
+            text?: any;
+            icon?: any;
+            size?: string;
+            color?: string;
+            variant?: string;
+        };
+        history?: {
+            variant?: string;
+        };
+    };
+};
 export interface ButtonType extends Omit<MUIButtonProps, 'text' | 'icon'> {
     text?: string | React.ReactNode;
     icon: React.ReactNode;
 }
 export type DonateProps = Pick<CheckoutProps, 'onPaid' | 'onError'> & {
-    settings: RequiredDonationSettings & OptionalDonationSettings;
+    settings: CheckoutDonateSettings;
     livemode?: boolean;
     timeout?: number;
     mode?: 'inline' | 'default' | 'custom';

package/es/checkout/donate.js

@@ -2,7 +2,6 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import Dialog from "@arcblock/ux/lib/Dialog";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
 import {
-  Alert,
   Avatar,
   AvatarGroup,
   Box,
@@ -30,7 +29,6 @@ import {
   formatAmount,
   formatBNStr,
   formatDateTime,
-  formatError,
   getCustomerAvatar,
   lazyLoad,
   openDonationSettings
@@ -309,7 +307,7 @@ function CheckoutDonateInner({
     }, timeout);
   };
   if (donation.error) {
-    return /* @__PURE__ */ jsx(Alert, { severity: "error", children: formatError(donation.error) });
+    return null;
   }
   const handlePopoverOpen = (event) => {
     donation.run();
@@ -430,13 +428,14 @@ function CheckoutDonateInner({
         `${formatAmount(
           supporters.data?.totalAmount || "0",
           supporters.data?.currency?.decimal
-        )} ${supporters.data?.currency?.symbol}`,
+        )} ${supporters.data?.currency?.symbol || ""}`,
         supporters.data || {},
         !!supporters.loading,
         donateSettings
       ) }) : /* @__PURE__ */ jsxs(Typography, { children: [
-        "Please provide a valid render function ",
-        /* @__PURE__ */ jsx("pre", { children: "(openDonate, donateTotalAmount, supporters) => ReactNode" })
+        "Please provide a valid render function",
+        " ",
+        /* @__PURE__ */ jsx("pre", { children: "(openDonate, donateTotalAmount, supporters, loading, donateSettings) => ReactNode" })
       ] });
     }
     return defaultRender;

package/es/components/loading-button.d.ts

@@ -0,0 +1,10 @@
+import { type ButtonProps, type CircularProgressProps } from '@mui/material';
+export interface LoadingButtonProps extends ButtonProps {
+    loading?: boolean;
+    loadingIndicator?: React.ReactNode;
+    loadingPosition?: 'start' | 'center' | 'end';
+    loadingProps?: Partial<CircularProgressProps>;
+    loadingOnly?: boolean;
+}
+declare const LoadingButton: import("react").ForwardRefExoticComponent<Omit<LoadingButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+export default LoadingButton;

package/es/components/loading-button.js

@@ -0,0 +1,75 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  Button,
+  CircularProgress,
+  Typography
+} from "@mui/material";
+import { forwardRef } from "react";
+const LoadingButton = forwardRef(
+  ({
+    children,
+    loading,
+    loadingPosition = "start",
+    loadingIndicator,
+    loadingProps = {},
+    onClick,
+    sx,
+    loadingOnly = false,
+    ...props
+  }, ref) => {
+    const handleClick = (e) => {
+      if (loading) {
+        return;
+      }
+      onClick?.(e);
+    };
+    const getPositionStyles = (position) => {
+      return {
+        color: "inherit",
+        ...position === "start" && { mr: 1 },
+        ...position === "end" && { ml: 1 },
+        ...position === "center" && {
+          position: "absolute",
+          left: "50%",
+          transform: "translateY(-50%) translateX(-50%)",
+          top: "50%"
+        },
+        display: "inline-flex",
+        alignItems: "center"
+      };
+    };
+    const defaultIndicator = /* @__PURE__ */ jsx(CircularProgress, { size: 16, ...loadingProps, sx: { color: "inherit", ...loadingProps?.sx || {} } });
+    const indicator = /* @__PURE__ */ jsx(Typography, { sx: getPositionStyles(loadingPosition), children: loadingIndicator || defaultIndicator });
+    return /* @__PURE__ */ jsxs(
+      Button,
+      {
+        ref,
+        disabled: props.disabled,
+        onClick: handleClick,
+        sx: {
+          position: "relative",
+          display: "inline-flex",
+          alignItems: "center",
+          justifyContent: "center",
+          ...sx
+        },
+        ...props,
+        children: [
+          loading && loadingPosition === "start" && indicator,
+          /* @__PURE__ */ jsx(Typography, { sx: { visibility: loading && loadingOnly ? "hidden" : "visible" }, children }),
+          loading && loadingPosition === "center" && indicator,
+          loading && loadingPosition === "end" && indicator
+        ]
+      }
+    );
+  }
+);
+LoadingButton.displayName = "LoadingButton";
+LoadingButton.defaultProps = {
+  loading: false,
+  loadingIndicator: void 0,
+  loadingPosition: "start",
+  loadingProps: {},
+  loadingOnly: false
+};
+export default LoadingButton;

package/es/components/pricing-table.js

@@ -2,7 +2,6 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
 import Toast from "@arcblock/ux/lib/Toast";
 import { CheckOutlined } from "@mui/icons-material";
-import { LoadingButton } from "@mui/lab";
 import {
   Avatar,
   Box,
@@ -34,6 +33,7 @@ import {
 } from "../libs/util.js";
 import { useMobile } from "../hooks/mobile.js";
 import TruncatedText from "./truncated-text.js";
+import LoadingButton from "./loading-button.js";
 const sortOrder = {
   year: 1,
   month: 2,
@@ -290,7 +290,6 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
                 justifyContent: alignItems === "center" ? "center" : "flex-start",
                 sx: {
                   flex: "0 1 auto",
-                  overflow: "auto",
                   pb: 2.5
                 },
                 className: "price-table-wrap",
@@ -319,7 +318,7 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
                         boxShadow: "0px 0px 0px 1px rgba(3, 7, 18, 0.08), 0px 1px 2px -1px rgba(3, 7, 18, 0.08), 0px 2px 4px rgba(3, 7, 18, 0.04)",
                         "&:hover": {
                           borderColor: mode === "select" && x.is_selected ? "primary.main" : "#ddd",
-                          boxShadow: "0 8px 16px rgba(0, 0, 0, 20%)"
+                          boxShadow: "0px 0px 0px 1px var(--shadows-card-hover-1, rgba(2, 7, 19, 0.08)),0px 1px 2px -1px var(--shadows-card-hover-2, rgba(2, 7, 19, 0.08)),0px 2px 8px 0px var(--shadows-card-hover-3, rgba(2, 7, 19, 0.10))"
                         },
                         width: {
                           xs: "100%",

package/es/index.d.ts

@@ -30,6 +30,7 @@ import Link from './components/link';
 import { createLazyComponent } from './components/lazy-loader';
 import OverdueInvoicePayment from './components/over-due-invoice-payment';
 import PaymentBeneficiaries from './components/payment-beneficiaries';
+import LoadingButton from './components/loading-button';
 export { PaymentThemeProvider } from './theme';
 export * from './libs/util';
 export * from './libs/connect';
@@ -42,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, };
+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, };

package/es/index.js

@@ -30,6 +30,7 @@ import Link from "./components/link.js";
 import { createLazyComponent } from "./components/lazy-loader.js";
 import OverdueInvoicePayment from "./components/over-due-invoice-payment.js";
 import PaymentBeneficiaries from "./components/payment-beneficiaries.js";
+import LoadingButton from "./components/loading-button.js";
 export { PaymentThemeProvider } from "./theme/index.js";
 export * from "./libs/util.js";
 export * from "./libs/connect.js";
@@ -74,5 +75,6 @@ export {
   TruncatedText,
   Link,
   OverdueInvoicePayment,
-  PaymentBeneficiaries
+  PaymentBeneficiaries,
+  LoadingButton
 };

package/es/payment/form/index.js

@@ -30,6 +30,7 @@ import PhoneInput from "./phone.js";
 import StripeCheckout from "./stripe/index.js";
 import { useMobile } from "../../hooks/mobile.js";
 import { validatePhoneNumber } from "../../libs/phone-validator.js";
+import LoadingButton from "../../components/loading-button.js";
 export const waitForCheckoutComplete = async (sessionId) => {
   let result;
   await pWaitFor(
@@ -143,7 +144,7 @@ export default function PaymentForm({
   }, [paymentCurrencyIndex, currencies, setValue]);
   const paymentMethod = useWatch({ control, name: "payment_method" });
   const afterUserLoggedIn = useMemoizedFn(() => {
-    if (hasDidWallet(session.user)) {
+    if (hasDidWallet(session.user) || skipBindWallet) {
       handleSubmit(onFormSubmit, onFormError)();
     } else {
       session.bindWallet(() => {
@@ -166,6 +167,8 @@ export default function PaymentForm({
   }
   buttonText = session?.user ? buttonText : t("payment.checkout.connect", { action: buttonText });
   const method = paymentMethods.find((x) => x.id === paymentMethod);
+  const showForm = session?.user;
+  const skipBindWallet = method.type === "stripe";
   const handleConnected = async () => {
     try {
       const result = await waitForCheckoutComplete(checkoutSession.id);
@@ -292,6 +295,10 @@ export default function PaymentForm({
       errorRef.current.scrollIntoView({ behavior: "smooth" });
     }
     if (session?.user) {
+      if (skipBindWallet) {
+        handleSubmit(onFormSubmit, onFormError)();
+        return;
+      }
       if (hasDidWallet(session.user)) {
         handleSubmit(onFormSubmit, onFormError)();
       } else {
@@ -406,7 +413,7 @@ export default function PaymentForm({
           }
         )
       ] }) }),
-      /* @__PURE__ */ jsxs(
+      showForm && /* @__PURE__ */ jsxs(
         Stack,
         {
           direction: "column",
@@ -474,25 +481,20 @@ export default function PaymentForm({
     ] }) }),
     /* @__PURE__ */ jsx(Divider, { sx: { mt: 2.5, mb: 2.5 } }),
     /* @__PURE__ */ jsx(Fade, { in: true, children: /* @__PURE__ */ jsxs(Stack, { className: "cko-payment-submit", children: [
-      /* @__PURE__ */ jsx(Box, { className: "cko-payment-submit-btn", children: /* @__PURE__ */ jsxs(
-        Button,
+      /* @__PURE__ */ jsx(Box, { className: "cko-payment-submit-btn", children: /* @__PURE__ */ jsx(
+        LoadingButton,
         {
           variant: "contained",
           color: "primary",
           size: "large",
           className: "cko-submit-button",
           onClick: () => {
-            if (state.submitting || state.paying) {
-              return;
-            }
             onAction();
           },
           fullWidth: true,
+          loading: state.submitting || state.paying,
           disabled: state.stripePaying || !quantityInventoryStatus || !payable,
-          children: [
-            (state.submitting || state.paying) && /* @__PURE__ */ jsx(CircularProgress, { size: 16, sx: { mr: 0.5, color: "var(--foregrounds-fg-on-color, #fff)" } }),
-            state.submitting || state.paying ? t("payment.checkout.processing") : buttonText
-          ]
+          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 }) })

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

@@ -2,11 +2,12 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import Center from "@arcblock/ux/lib/Center";
 import Dialog from "@arcblock/ux/lib/Dialog";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
-import { LoadingButton } from "@mui/lab";
 import { CircularProgress, Typography } from "@mui/material";
 import { styled } from "@mui/system";
 import { useSetState } from "ahooks";
 import { useEffect, useCallback } from "react";
+import { useMobile } from "../../../hooks/mobile.js";
+import LoadingButton from "../../../components/loading-button.js";
 const { Elements, PaymentElement, useElements, useStripe, loadStripe } = globalThis.__STRIPE_COMPONENTS__;
 function StripeCheckoutForm({
   clientSecret,
@@ -105,7 +106,6 @@ function StripeCheckoutForm({
         type: "submit",
         disabled: state.confirming || !state.loaded,
         loading: state.confirming,
-        loadingPosition: "end",
         variant: "contained",
         color: "primary",
         size: "large",
@@ -135,7 +135,8 @@ export default function StripeCheckout({
   returnUrl = ""
 }) {
   const stripePromise = loadStripe(publicKey);
-  const { t } = useLocaleContext();
+  const { isMobile } = useMobile();
+  const { t, locale } = useLocaleContext();
   const [state, setState] = useSetState({
     open: true,
     closable: true
@@ -155,7 +156,21 @@ export default function StripeCheckout({
       open: state.open,
       onClose: handleClose,
       disableEscapeKeyDown: true,
-      children: /* @__PURE__ */ jsx(Elements, { options: { clientSecret }, stripe: stripePromise, children: /* @__PURE__ */ jsx(
+      sx: {
+        ".StripeElement": {
+          minWidth: isMobile ? "100%" : "500px",
+          py: 1
+        },
+        form: {
+          justifyContent: "flex-start"
+        }
+      },
+      PaperProps: {
+        style: {
+          minWidth: isMobile ? "100%" : "500px"
+        }
+      },
+      children: /* @__PURE__ */ jsx(Elements, { options: { clientSecret, locale: locale === "zh" ? "zh-CN" : "en" }, stripe: stripePromise, children: /* @__PURE__ */ jsx(
         StripeCheckoutForm,
         {
           clientSecret,

package/es/payment/index.js

@@ -514,7 +514,6 @@ export const Root = styled(Box)`
     .MuiButtonBase-root {
       font-size: 1.3rem;
       position: relative;
-      padding: 4px 22px;
     }
 
     .cko-submit-progress {

package/es/payment/summary.js

@@ -1,7 +1,6 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
 import { HelpOutline } from "@mui/icons-material";
-import { LoadingButton } from "@mui/lab";
 import { Box, Divider, Fade, Grow, Stack, Tooltip, Typography, Collapse, IconButton } from "@mui/material";
 import { BN, fromTokenToUnit, fromUnitToToken } from "@ocap/util";
 import { useRequest, useSetState } from "ahooks";
@@ -18,6 +17,7 @@ import ProductItem from "./product-item.js";
 import Livemode from "../components/livemode.js";
 import { usePaymentContext } from "../contexts/payment.js";
 import { useMobile } from "../hooks/mobile.js";
+import LoadingButton from "../components/loading-button.js";
 const ExpandMore = styled((props) => {
   const { expand, ...other } = props;
   return /* @__PURE__ */ jsx(IconButton, { ...other });

package/es/theme/index.js

@@ -52,7 +52,8 @@ export function PaymentThemeProvider({
           root: {
             fontSize: "1rem",
             fontWeight: 500,
-            textTransform: "none"
+            textTransform: "none",
+            boxShadow: "none"
           },
           containedPrimary: {
             backgroundColor: "var(--buttons-button-inverted, #010714)",

package/lib/checkout/donate.d.ts

@@ -1,4 +1,4 @@
-import type { DonationSettings, TCheckoutSessionExpanded, TPaymentCurrency, TPaymentMethod } from '@blocklet/payment-types';
+import type { DonationSettings, PaymentBeneficiary, TCheckoutSessionExpanded, TPaymentCurrency, TPaymentMethod } from '@blocklet/payment-types';
 import { type ButtonProps as MUIButtonProps } from '@mui/material';
 import type { CheckoutProps, PaymentThemeOptions } from '../types';
 export type DonateHistory = {
@@ -7,14 +7,38 @@ export type DonateHistory = {
     method: TPaymentMethod;
     totalAmount: string;
 };
-export type RequiredDonationSettings = Pick<DonationSettings, 'target' | 'title' | 'description' | 'reference' | 'beneficiaries'>;
-type OptionalDonationSettings = Partial<Omit<DonationSettings, keyof RequiredDonationSettings>>;
+export type CheckoutDonateSettings = {
+    target: string;
+    title: string;
+    description: string;
+    reference: string;
+    beneficiaries: PaymentBeneficiary[];
+    amount?: {
+        presets?: string[];
+        preset?: string;
+        minimum?: string;
+        maximum?: string;
+        custom?: boolean;
+    };
+    appearance?: {
+        button?: {
+            text?: any;
+            icon?: any;
+            size?: string;
+            color?: string;
+            variant?: string;
+        };
+        history?: {
+            variant?: string;
+        };
+    };
+};
 export interface ButtonType extends Omit<MUIButtonProps, 'text' | 'icon'> {
     text?: string | React.ReactNode;
     icon: React.ReactNode;
 }
 export type DonateProps = Pick<CheckoutProps, 'onPaid' | 'onError'> & {
-    settings: RequiredDonationSettings & OptionalDonationSettings;
+    settings: CheckoutDonateSettings;
     livemode?: boolean;
     timeout?: number;
     mode?: 'inline' | 'default' | 'custom';

package/lib/checkout/donate.js

@@ -385,10 +385,7 @@ function CheckoutDonateInner({
     }, timeout);
   };
   if (donation.error) {
-    return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Alert, {
-      severity: "error",
-      children: (0, _util.formatError)(donation.error)
-    });
+    return null;
   }
   const handlePopoverOpen = event => {
     donation.run();
@@ -519,10 +516,10 @@ function CheckoutDonateInner({
     }
     if (mode === "custom") {
       return children && typeof children === "function" ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-        children: children(startDonate, `${(0, _util.formatAmount)(supporters.data?.totalAmount || "0", supporters.data?.currency?.decimal)} ${supporters.data?.currency?.symbol}`, supporters.data || {}, !!supporters.loading, donateSettings)
+        children: children(startDonate, `${(0, _util.formatAmount)(supporters.data?.totalAmount || "0", supporters.data?.currency?.decimal)} ${supporters.data?.currency?.symbol || ""}`, supporters.data || {}, !!supporters.loading, donateSettings)
       }) : /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
-        children: ["Please provide a valid render function ", /* @__PURE__ */(0, _jsxRuntime.jsx)("pre", {
-          children: "(openDonate, donateTotalAmount, supporters) => ReactNode"
+        children: ["Please provide a valid render function", " ", /* @__PURE__ */(0, _jsxRuntime.jsx)("pre", {
+          children: "(openDonate, donateTotalAmount, supporters, loading, donateSettings) => ReactNode"
         })]
       });
     }

package/lib/components/loading-button.d.ts

@@ -0,0 +1,10 @@
+import { type ButtonProps, type CircularProgressProps } from '@mui/material';
+export interface LoadingButtonProps extends ButtonProps {
+    loading?: boolean;
+    loadingIndicator?: React.ReactNode;
+    loadingPosition?: 'start' | 'center' | 'end';
+    loadingProps?: Partial<CircularProgressProps>;
+    loadingOnly?: boolean;
+}
+declare const LoadingButton: import("react").ForwardRefExoticComponent<Omit<LoadingButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+export default LoadingButton;

package/lib/components/loading-button.js

@@ -0,0 +1,86 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _jsxRuntime = require("react/jsx-runtime");
+var _material = require("@mui/material");
+var _react = require("react");
+const LoadingButton = (0, _react.forwardRef)(({
+  children,
+  loading,
+  loadingPosition = "start",
+  loadingIndicator,
+  loadingProps = {},
+  onClick,
+  sx,
+  loadingOnly = false,
+  ...props
+}, ref) => {
+  const handleClick = e => {
+    if (loading) {
+      return;
+    }
+    onClick?.(e);
+  };
+  const getPositionStyles = position => {
+    return {
+      color: "inherit",
+      ...(position === "start" && {
+        mr: 1
+      }),
+      ...(position === "end" && {
+        ml: 1
+      }),
+      ...(position === "center" && {
+        position: "absolute",
+        left: "50%",
+        transform: "translateY(-50%) translateX(-50%)",
+        top: "50%"
+      }),
+      display: "inline-flex",
+      alignItems: "center"
+    };
+  };
+  const defaultIndicator = /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.CircularProgress, {
+    size: 16,
+    ...loadingProps,
+    sx: {
+      color: "inherit",
+      ...(loadingProps?.sx || {})
+    }
+  });
+  const indicator = /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+    sx: getPositionStyles(loadingPosition),
+    children: loadingIndicator || defaultIndicator
+  });
+  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Button, {
+    ref,
+    disabled: props.disabled,
+    onClick: handleClick,
+    sx: {
+      position: "relative",
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      ...sx
+    },
+    ...props,
+    children: [loading && loadingPosition === "start" && indicator, /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+      sx: {
+        visibility: loading && loadingOnly ? "hidden" : "visible"
+      },
+      children
+    }), loading && loadingPosition === "center" && indicator, loading && loadingPosition === "end" && indicator]
+  });
+});
+LoadingButton.displayName = "LoadingButton";
+LoadingButton.defaultProps = {
+  loading: false,
+  loadingIndicator: void 0,
+  loadingPosition: "start",
+  loadingProps: {},
+  loadingOnly: false
+};
+module.exports = LoadingButton;

package/lib/components/pricing-table.js

@@ -8,7 +8,6 @@ var _jsxRuntime = require("react/jsx-runtime");
 var _context = require("@arcblock/ux/lib/Locale/context");
 var _Toast = _interopRequireDefault(require("@arcblock/ux/lib/Toast"));
 var _iconsMaterial = require("@mui/icons-material");
-var _lab = require("@mui/lab");
 var _material = require("@mui/material");
 var _system = require("@mui/system");
 var _ahooks = require("ahooks");
@@ -19,6 +18,7 @@ var _payment = require("../contexts/payment");
 var _util2 = require("../libs/util");
 var _mobile = require("../hooks/mobile");
 var _truncatedText = _interopRequireDefault(require("./truncated-text"));
+var _loadingButton = _interopRequireDefault(require("./loading-button"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const sortOrder = {
   year: 1,
@@ -314,7 +314,6 @@ function PricingTable({
         justifyContent: alignItems === "center" ? "center" : "flex-start",
         sx: {
           flex: "0 1 auto",
-          overflow: "auto",
           pb: 2.5
         },
         className: "price-table-wrap",
@@ -341,7 +340,7 @@ function PricingTable({
               boxShadow: "0px 0px 0px 1px rgba(3, 7, 18, 0.08), 0px 1px 2px -1px rgba(3, 7, 18, 0.08), 0px 2px 4px rgba(3, 7, 18, 0.04)",
               "&:hover": {
                 borderColor: mode === "select" && x.is_selected ? "primary.main" : "#ddd",
-                boxShadow: "0 8px 16px rgba(0, 0, 0, 20%)"
+                boxShadow: "0px 0px 0px 1px var(--shadows-card-hover-1, rgba(2, 7, 19, 0.08)),0px 1px 2px -1px var(--shadows-card-hover-2, rgba(2, 7, 19, 0.08)),0px 2px 8px 0px var(--shadows-card-hover-3, rgba(2, 7, 19, 0.10))"
               },
               width: {
                 xs: "100%",
@@ -510,7 +509,7 @@ function Subscribe({
       _Toast.default.error((0, _util2.formatError)(err));
     }
   };
-  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_lab.LoadingButton, {
+  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_loadingButton.default, {
     fullWidth: true,
     size: "medium",
     variant: "contained",

package/lib/index.d.ts

@@ -30,6 +30,7 @@ import Link from './components/link';
 import { createLazyComponent } from './components/lazy-loader';
 import OverdueInvoicePayment from './components/over-due-invoice-payment';
 import PaymentBeneficiaries from './components/payment-beneficiaries';
+import LoadingButton from './components/loading-button';
 export { PaymentThemeProvider } from './theme';
 export * from './libs/util';
 export * from './libs/connect';
@@ -42,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, };
+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, };