@blocklet/payment-react 1.14.27 → 1.14.29

package/es/checkout/form.js

@@ -70,7 +70,7 @@ export default function CheckoutForm({
         paymentLink: data?.paymentLink,
         customer: data?.customer,
         completed: state.completed,
-        error: apiError || state.appError,
+        error: apiError,
         onPaid: handlePaid,
         onError: handleError,
         onChange,
@@ -91,7 +91,7 @@ export default function CheckoutForm({
         paymentLink: data?.paymentLink,
         customer: data?.customer,
         completed: state.completed,
-        error: apiError || state.appError,
+        error: apiError,
         onPaid: handlePaid,
         onError: handleError,
         onChange,
@@ -111,7 +111,7 @@ export default function CheckoutForm({
       paymentLink: data?.paymentLink,
       customer: data?.customer,
       completed: state.completed,
-      error: apiError || state.appError,
+      error: apiError,
       onPaid: handlePaid,
       onError: handleError,
       onChange,

package/es/checkout/table.js

@@ -65,7 +65,7 @@ function CheckoutTableInner({ id, mode, onPaid, onError, onChange, extraParams,
   }
   if (!sessionId && !hashSessionId) {
     if (mode === "standalone") {
-      return /* @__PURE__ */ jsxs(Stack, { direction: "column", alignItems: "center", children: [
+      return /* @__PURE__ */ jsxs(Stack, { direction: "column", alignItems: "center", p: 2.5, children: [
         /* @__PURE__ */ jsxs(
           Box,
           {
@@ -73,11 +73,19 @@ function CheckoutTableInner({ id, mode, onPaid, onError, onChange, extraParams,
               display: "flex",
               flexDirection: "column",
               fontSize: "24px",
-              margin: "20px 90px !important",
+              alignItems: "center",
+              margin: {
+                xs: "20px 0",
+                md: "20px 20px"
+              },
+              maxWidth: {
+                xs: "100%",
+                md: 400
+              },
               textAlign: "center"
             },
             children: [
-              !data.livemode && /* @__PURE__ */ jsx(Livemode, { sx: { display: "flex", marginBottom: "8px" } }),
+              !data.livemode && /* @__PURE__ */ jsx(Livemode, { sx: { display: "flex", marginBottom: "8px", width: "fit-content" } }),
               /* @__PURE__ */ jsx(
                 Typography,
                 {

package/es/components/livemode.js

@@ -12,7 +12,7 @@ export default function Livemode({ color, backgroundColor, sx }) {
       sx: {
         ml: 2,
         height: 18,
-        lineHeight: 1,
+        lineHeight: 1.2,
         textTransform: "uppercase",
         fontSize: "0.8rem",
         fontWeight: "bold",

package/es/components/pricing-table.js

@@ -21,6 +21,7 @@ import { styled } from "@mui/system";
 import { useSetState } from "ahooks";
 import { useEffect, useMemo, useState } from "react";
 import { BN } from "@ocap/util";
+import { isEmpty } from "lodash";
 import { usePaymentContext } from "../contexts/payment.js";
 import {
   formatError,
@@ -30,12 +31,19 @@ import {
   getPriceUintAmountByCurrency
 } from "../libs/util.js";
 import Amount from "../payment/amount.js";
+import { useMobile } from "../hooks/mobile.js";
+const sortOrder = {
+  year: 1,
+  month: 2,
+  day: 3,
+  hour: 4
+};
 const groupItemsByRecurring = (items, currency) => {
   const grouped = {};
   const recurring = {};
   items.forEach((x) => {
     const key = [x.price.recurring?.interval, x.price.recurring?.interval_count].join("-");
-    if (x.price.currency_options.find((c) => c.currency_id === currency.id)) {
+    if (x.price.currency_options?.find((c) => c.currency_id === currency.id)) {
       recurring[key] = x.price.recurring;
     }
     if (!grouped[key]) {
@@ -52,11 +60,28 @@ PricingTable.defaultProps = {
 };
 export default function PricingTable({ table, alignItems, interval, mode, onSelect }) {
   const { t, locale } = useLocaleContext();
+  const { isMobile } = useMobile();
   const {
     settings: { paymentMethods = [] }
   } = usePaymentContext();
   const [currency, setCurrency] = useState(table.currency || {});
   const { recurring, grouped } = useMemo(() => groupItemsByRecurring(table.items, currency), [table.items, currency]);
+  const recurringKeysList = useMemo(() => {
+    if (isEmpty(recurring)) {
+      return [];
+    }
+    return Object.keys(recurring).sort((a, b) => {
+      const [aType, aValue] = a.split("-");
+      const [bType, bValue] = b.split("-");
+      if (sortOrder[aType] !== sortOrder[bType]) {
+        return sortOrder[aType] - sortOrder[bType];
+      }
+      if (aValue && bValue) {
+        return bValue - aValue;
+      }
+      return b - a;
+    });
+  }, [recurring]);
   const [state, setState] = useSetState({ interval });
   const currencyMap = useMemo(() => {
     if (!paymentMethods || paymentMethods.length === 0) {
@@ -114,12 +139,12 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
       gap: 20px;
     }
     @media (max-width: ${({ theme }) => theme.breakpoints.values.sm}px) {
-      .price-table-item {
-        width: 90% !important;
-      }
-      .btn-row {
-        padding: 0 20px;
-      }
+      // .price-table-item {
+      //   width: 90% !important;
+      // }
+      // .btn-row {
+      //   padding: 0 20px;
+      // }
     }
     @media (min-width: ${({ theme }) => theme.breakpoints.values.md}px) {
       .price-table-wrap:has(> div:nth-child(1)) {
@@ -145,8 +170,17 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
         }
       },
       children: [
-        /* @__PURE__ */ jsxs("div", { className: "btn-row", children: [
-          Object.keys(recurring).length > 0 && /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsxs(Stack, { className: "btn-row", flexDirection: "row", children: [
+          recurringKeysList.length > 0 && /* @__PURE__ */ jsx(Box, { children: isMobile && recurringKeysList.length > 1 ? /* @__PURE__ */ jsx(
+            Select,
+            {
+              value: state.interval,
+              onChange: (e) => setState({ interval: e.target.value }),
+              size: "small",
+              sx: { m: 1 },
+              children: recurringKeysList.map((x) => /* @__PURE__ */ jsx(MenuItem, { value: x, children: /* @__PURE__ */ jsx(Typography, { color: x === state.interval ? "text.primary" : "text.secondary", children: formatRecurring(recurring[x], true, "", locale) }) }, x))
+            }
+          ) : /* @__PURE__ */ jsx(
             ToggleButtonGroup,
             {
               size: "small",
@@ -165,7 +199,7 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
                 }
               },
               exclusive: true,
-              children: Object.keys(recurring).map((x) => /* @__PURE__ */ jsx(
+              children: recurringKeysList.map((x) => /* @__PURE__ */ jsx(
                 ToggleButton,
                 {
                   size: "small",
@@ -186,7 +220,7 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
                 x
               ))
             }
-          ),
+          ) }),
           currencyList.length > 0 && /* @__PURE__ */ jsx(
             Select,
             {
@@ -232,7 +266,10 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
                       borderColor: mode === "select" && x.is_selected ? "primary.main" : "#ddd",
                       boxShadow: "0 8px 16px rgba(0, 0, 0, 20%)"
                     },
-                    width: "320px",
+                    width: {
+                      xs: "100%",
+                      md: "320px"
+                    },
                     maxWidth: "360px",
                     padding: "20px",
                     position: "relative"
@@ -366,8 +403,12 @@ function Subscribe({ x, action, onSelect, currencyId }) {
       fullWidth: true,
       size: "medium",
       variant: "contained",
-      color: x.is_highlight || x.is_selected ? "primary" : "info",
-      sx: { fontSize: "16px", padding: "10px 20px", lineHeight: "28px" },
+      color: x.is_highlight || x.is_selected ? "info" : "primary",
+      sx: {
+        fontSize: "16px",
+        padding: "10px 20px",
+        lineHeight: "28px"
+      },
       loading: state.loading === x.price_id && !state.loaded,
       disabled: x.is_disabled,
       onClick: () => handleSelect(x.price_id),

package/es/components/table.js

@@ -83,7 +83,7 @@ const Wrapped = styled(Datatable)`
   }
 
   tr.MuiTableRow-root:not(.MuiTableRow-footer):hover {
-    background: #f5f5f5;
+    background: var(--backgrounds-bg-highlight, #eff6ff);
   }
   tr.MuiTableRow-root:last-of-type td:first-of-type {
     border-bottom-left-radius: 8px;

package/es/history/invoice/list.js

@@ -94,28 +94,30 @@ const InvoiceTable = React.memo((props) => {
   );
   const columns = [
     {
-      label: t("payment.customer.invoice.invoiceNumber"),
-      name: "number",
+      label: t("common.amount"),
+      name: "total",
+      width: 60,
+      align: "right",
       options: {
         customBodyRenderLite: (_, index) => {
           const invoice = data?.list[index];
           const link = getInvoiceLink(invoice, action);
-          return /* @__PURE__ */ jsx("a", { href: link.url, target: link.external ? "_blank" : target, rel: "noreferrer", children: invoice?.number });
+          return /* @__PURE__ */ jsx("a", { href: link.url, target: link.external ? "_blank" : target, rel: "noreferrer", children: /* @__PURE__ */ jsxs(Typography, { children: [
+            formatBNStr(invoice.total, invoice.paymentCurrency.decimal),
+            "\xA0",
+            invoice.paymentCurrency.symbol
+          ] }) });
         }
       }
     },
     {
-      label: t("common.amount"),
-      name: "total",
+      label: t("payment.customer.invoice.invoiceNumber"),
+      name: "number",
       options: {
         customBodyRenderLite: (_, index) => {
           const invoice = data?.list[index];
           const link = getInvoiceLink(invoice, action);
-          return /* @__PURE__ */ jsx("a", { href: link.url, target: link.external ? "_blank" : target, rel: "noreferrer", children: /* @__PURE__ */ jsxs(Typography, { children: [
-            formatBNStr(invoice.total, invoice.paymentCurrency.decimal),
-            "\xA0",
-            invoice.paymentCurrency.symbol
-          ] }) });
+          return /* @__PURE__ */ jsx("a", { href: link.url, target: link.external ? "_blank" : target, rel: "noreferrer", children: invoice?.number });
         }
       }
     },

package/es/libs/util.d.ts

@@ -104,3 +104,4 @@ export declare function formatTotalPrice({ product, quantity, priceId, locale, }
 export declare function formatQuantityInventory(price: TPrice, quantity: string | number, locale?: string): string;
 export declare function formatSubscriptionStatus(status: string): string;
 export declare function formatAmountPrecisionLimit(amount: string, locale?: string, precision?: number): string;
+export declare function getWordBreakStyle(value: any): 'break-word' | 'break-all';

package/es/libs/util.js

@@ -799,3 +799,9 @@ export function formatAmountPrecisionLimit(amount, locale = "en", precision = 6)
   }
   return "";
 }
+export function getWordBreakStyle(value) {
+  if (typeof value === "string" && /\s/.test(value)) {
+    return "break-word";
+  }
+  return "break-all";
+}

package/es/locales/en.js

@@ -87,7 +87,8 @@ export default flat({
     recoverFrom: "Recovered From",
     quantityLimitPerCheckout: "Exceed purchase limit",
     quantityNotEnough: "Exceed inventory",
-    amountPrecisionLimit: "Amount decimal places must be less than or equal to {precision}"
+    amountPrecisionLimit: "Amount decimal places must be less than or equal to {precision}",
+    saveAsDefaultPriceSuccess: "Set default price successfully"
   },
   payment: {
     checkout: {
@@ -193,7 +194,7 @@ export default flat({
       invoices: "Invoice History",
       details: "Details",
       summary: "Summary",
-      specifics: "Specifics",
+      products: "Products",
       update: "Update Information",
       empty: "Seems you do not have any subscriptions or payments here",
       cancel: {
@@ -226,7 +227,7 @@ export default flat({
       recover: {
         button: "Renew",
         title: "Renew your subscription",
-        description: "Your subscription will no longer be canceled, it will renew on {date}"
+        description: "Your subscription will not be canceled and will be automatically renewed on {date}, please confirm to continue"
       },
       changePlan: {
         button: "Update",

package/es/locales/zh.js

@@ -87,7 +87,8 @@ export default flat({
     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"
+    amountPrecisionLimit: "\u91D1\u989D\u5C0F\u6570\u4F4D\u6570\u5FC5\u987B\u5728 {precision} \u4F4D\u4EE5\u5185",
+    saveAsDefaultPriceSuccess: "\u8BBE\u7F6E\u9ED8\u8BA4\u4EF7\u683C\u6210\u529F"
   },
   payment: {
     checkout: {
@@ -110,9 +111,9 @@ export default flat({
         subscription: "\u67E5\u770B\u8BA2\u9605",
         invoice: "\u67E5\u770B\u8D26\u5355"
       },
-      paymentRequired: "\u652F\u4ED8\u6570\u91CF",
+      paymentRequired: "\u652F\u4ED8\u91D1\u989D",
       staking: {
-        title: "\u8D28\u62BC\u6570\u91CF",
+        title: "\u8D28\u62BC\u91D1\u989D",
         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",
@@ -193,7 +194,7 @@ export default flat({
       invoices: "\u8D26\u5355\u5386\u53F2",
       details: "\u8D26\u6237\u8BE6\u60C5",
       summary: "\u8BA1\u8D39\u6458\u8981",
-      specifics: "\u5177\u4F53\u4FE1\u606F",
+      products: "\u4EA7\u54C1\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: {
@@ -226,7 +227,7 @@ export default flat({
       recover: {
         button: "\u7EED\u8BA2",
         title: "\u7EED\u8BA2\u60A8\u7684\u8BA2\u9605",
-        description: "\u60A8\u7684\u8BA2\u9605\u5C06\u4E0D\u518D\u88AB\u53D6\u6D88\uFF0C\u5C06\u5728{date}\u7EED\u8BA2"
+        description: "\u60A8\u7684\u8BA2\u9605\u5C06\u4E0D\u4F1A\u88AB\u53D6\u6D88\uFF0C\u5E76\u5C06\u5728{date}\u81EA\u52A8\u7EED\u8BA2\uFF0C\u8BF7\u786E\u8BA4\u662F\u5426\u7EE7\u7EED"
       },
       changePlan: {
         button: "\u66F4\u65B0",

package/es/payment/form/address.js

@@ -23,7 +23,7 @@ export default function AddressForm({ mode, stripe, sx = {} }) {
             variant: "outlined",
             placeholder: t("payment.checkout.billing.postal_code"),
             InputProps: {
-              startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx(
+              startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", style: { marginRight: "2px", marginLeft: "-8px" }, children: /* @__PURE__ */ jsx(
                 Controller,
                 {
                   name: "billing_address.country",

package/es/payment/index.d.ts

@@ -6,7 +6,7 @@ type Props = CheckoutContext & CheckoutCallbacks & {
     error?: any;
     showCheckoutSummary?: boolean;
 };
-declare function Payment({ checkoutSession, paymentMethods, paymentIntent, paymentLink, customer, completed, mode, onPaid, onError, onChange, goBack, action, showCheckoutSummary, }: Props): import("react").JSX.Element;
+declare function Payment({ checkoutSession, paymentMethods, paymentIntent, paymentLink, customer, completed, error, mode, onPaid, onError, onChange, goBack, action, showCheckoutSummary, }: Props): import("react").JSX.Element;
 declare namespace Payment {
     var defaultProps: {
         completed: boolean;

package/es/payment/index.js

@@ -209,7 +209,7 @@ export default function Payment({
   paymentLink,
   customer,
   completed,
-  // error,
+  error,
   mode,
   onPaid,
   onError,
@@ -238,6 +238,9 @@ export default function Payment({
     }
   }, [checkoutSession, livemode, setLivemode, refresh]);
   const renderContent = () => {
+    if (error) {
+      return /* @__PURE__ */ jsx(PaymentError, { mode, title: "Oops", description: formatError(error) });
+    }
     if (!checkoutSession || !delay) {
       return /* @__PURE__ */ jsxs(Stack, { className: "cko-container", sx: { gap: { sm: mode === "standalone" ? 0 : mode === "inline" ? 4 : 8 } }, children: [
         !hideSummaryCard && /* @__PURE__ */ jsx(Stack, { className: "base-card cko-overview", children: /* @__PURE__ */ jsx(Box, { className: "cko-product", children: /* @__PURE__ */ jsx(OverviewSkeleton, {}) }) }),

package/es/payment/product-card.js

@@ -24,7 +24,7 @@ export default function ProductCard({ size, variant, name, logo, description, ex
               className: "cko-ellipsis",
               variant: "body1",
               title: name,
-              sx: { fontWeight: 500, mb: 0.5, lineHeight: 1, fontSize: 16 },
+              sx: { fontWeight: 500, mb: 0.5, lineHeight: 1.2, fontSize: 16 },
               color: "text.primary",
               children: name
             }
@@ -34,7 +34,7 @@ export default function ProductCard({ size, variant, name, logo, description, ex
             {
               variant: "body1",
               title: description,
-              sx: { fontSize: "0.85rem", mb: 0.5, lineHeight: 1, textAlign: "left" },
+              sx: { fontSize: "0.85rem", mb: 0.5, lineHeight: 1.2, textAlign: "left" },
               color: "text.lighter",
               children: description
             }

package/es/payment/skeleton/overview.js

@@ -2,12 +2,9 @@ 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__ */ jsxs(Stack, { direction: "row", alignItems: "center", spacing: 2, children: [
-      /* @__PURE__ */ jsx(Skeleton, { variant: "circular", width: 32, height: 32 }),
-      /* @__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: "2rem", 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, {}) }),
-    /* @__PURE__ */ jsx(Skeleton, { sx: { mt: 2 }, variant: "rounded", width: 200, height: 200 })
+    /* @__PURE__ */ jsx(Typography, { component: "div", variant: "h2", children: /* @__PURE__ */ jsx(Skeleton, {}) })
   ] }) });
 }

package/es/payment/skeleton/payment.js

@@ -1,16 +1,17 @@
 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", spacing: 2, children: [
+  return /* @__PURE__ */ jsx(Fade, { in: true, children: /* @__PURE__ */ jsxs(Stack, { direction: "column", children: [
     /* @__PURE__ */ jsx(Skeleton, { variant: "text", sx: { fontSize: "2rem", width: "40%" } }),
-    /* @__PURE__ */ jsxs(Box, { children: [
-      /* @__PURE__ */ jsx(Typography, { component: "div", variant: "h4", children: /* @__PURE__ */ jsx(Skeleton, {}) }),
-      /* @__PURE__ */ jsx(Typography, { component: "div", variant: "h1", children: /* @__PURE__ */ jsx(Skeleton, {}) })
+    /* @__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, {}) }),
+      /* @__PURE__ */ jsx(Typography, { component: "div", children: /* @__PURE__ */ jsx(Skeleton, { height: 60 }) })
     ] }),
     /* @__PURE__ */ jsxs(Box, { children: [
-      /* @__PURE__ */ jsx(Typography, { component: "div", variant: "h4", children: /* @__PURE__ */ jsx(Skeleton, {}) }),
-      /* @__PURE__ */ jsx(Typography, { component: "div", variant: "h1", children: /* @__PURE__ */ jsx(Skeleton, {}) })
+      /* @__PURE__ */ jsx(Typography, { component: "div", variant: "h4", mb: -1, children: /* @__PURE__ */ jsx(Skeleton, {}) }),
+      /* @__PURE__ */ jsx(Typography, { component: "div", children: /* @__PURE__ */ jsx(Skeleton, { height: 60 }) })
     ] }),
-    /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Typography, { component: "div", variant: "h4", children: /* @__PURE__ */ jsx(Skeleton, {}) }) })
+    /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Skeleton, { height: 60 }) })
   ] }) });
 }

package/lib/checkout/form.js

@@ -81,7 +81,7 @@ function CheckoutForm({
       paymentLink: data?.paymentLink,
       customer: data?.customer,
       completed: state.completed,
-      error: apiError || state.appError,
+      error: apiError,
       onPaid: handlePaid,
       onError: handleError,
       onChange,
@@ -101,7 +101,7 @@ function CheckoutForm({
         paymentLink: data?.paymentLink,
         customer: data?.customer,
         completed: state.completed,
-        error: apiError || state.appError,
+        error: apiError,
         onPaid: handlePaid,
         onError: handleError,
         onChange,
@@ -120,7 +120,7 @@ function CheckoutForm({
       paymentLink: data?.paymentLink,
       customer: data?.customer,
       completed: state.completed,
-      error: apiError || state.appError,
+      error: apiError,
       onPaid: handlePaid,
       onError: handleError,
       onChange,

package/lib/checkout/table.js

@@ -99,18 +99,28 @@ function CheckoutTableInner({
       return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
         direction: "column",
         alignItems: "center",
+        p: 2.5,
         children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_system.Box, {
           sx: {
             display: "flex",
             flexDirection: "column",
             fontSize: "24px",
-            margin: "20px 90px !important",
+            alignItems: "center",
+            margin: {
+              xs: "20px 0",
+              md: "20px 20px"
+            },
+            maxWidth: {
+              xs: "100%",
+              md: 400
+            },
             textAlign: "center"
           },
           children: [!data.livemode && /* @__PURE__ */(0, _jsxRuntime.jsx)(_livemode.default, {
             sx: {
               display: "flex",
-              marginBottom: "8px"
+              marginBottom: "8px",
+              width: "fit-content"
             }
           }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
             color: "text.primary",

package/lib/components/livemode.js

@@ -22,7 +22,7 @@ function Livemode({
     sx: {
       ml: 2,
       height: 18,
-      lineHeight: 1,
+      lineHeight: 1.2,
       textTransform: "uppercase",
       fontSize: "0.8rem",
       fontWeight: "bold",