@blocklet/payment-react 1.14.27 → 1.14.29

package/lib/components/pricing-table.js

@@ -14,16 +14,24 @@ var _system = require("@mui/system");
 var _ahooks = require("ahooks");
 var _react = require("react");
 var _util = require("@ocap/util");
+var _lodash = require("lodash");
 var _payment = require("../contexts/payment");
 var _util2 = require("../libs/util");
 var _amount = _interopRequireDefault(require("../payment/amount"));
+var _mobile = require("../hooks/mobile");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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,6 +60,9 @@ function PricingTable({
     t,
     locale
   } = (0, _context.useLocaleContext)();
+  const {
+    isMobile
+  } = (0, _mobile.useMobile)();
   const {
     settings: {
       paymentMethods = []
@@ -62,6 +73,22 @@ function PricingTable({
     recurring,
     grouped
   } = (0, _react.useMemo)(() => groupItemsByRecurring(table.items, currency), [table.items, currency]);
+  const recurringKeysList = (0, _react.useMemo)(() => {
+    if ((0, _lodash.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] = (0, _ahooks.useSetState)({
     interval
   });
@@ -127,12 +154,12 @@ function PricingTable({
     @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
@@ -158,43 +185,62 @@ function PricingTable({
           sm: mode === "select" ? 3 : 5
         }
       },
-      children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)("div", {
+      children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
         className: "btn-row",
-        children: [Object.keys(recurring).length > 0 && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.ToggleButtonGroup, {
-          size: "small",
-          value: state.interval,
-          sx: {
-            padding: "4px",
-            borderRadius: "36px",
-            height: "40px",
-            boxSizing: "border-box",
-            backgroundColor: "#f1f3f5",
-            border: 0
-          },
-          onChange: (_, value) => {
-            if (value !== null) {
-              setState({
-                interval: value
-              });
-            }
-          },
-          exclusive: true,
-          children: Object.keys(recurring).map(x => /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.ToggleButton, {
+        flexDirection: "row",
+        children: [recurringKeysList.length > 0 && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+          children: isMobile && recurringKeysList.length > 1 ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Select, {
+            value: state.interval,
+            onChange: e => setState({
+              interval: e.target.value
+            }),
+            size: "small",
+            sx: {
+              m: 1
+            },
+            children: recurringKeysList.map(x => /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.MenuItem, {
+              value: x,
+              children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+                color: x === state.interval ? "text.primary" : "text.secondary",
+                children: (0, _util2.formatRecurring)(recurring[x], true, "", locale)
+              })
+            }, x))
+          }) : /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.ToggleButtonGroup, {
             size: "small",
-            value: x,
+            value: state.interval,
             sx: {
-              textTransform: "capitalize",
-              padding: "5px 12px",
-              fontSize: "13px",
-              backgroundColor: x === state.interval ? "#fff !important" : "#f1f3f5 !important",
-              border: "0px",
-              "&.Mui-selected": {
-                borderRadius: "9999px !important",
-                border: "1px solid #e5e7eb"
+              padding: "4px",
+              borderRadius: "36px",
+              height: "40px",
+              boxSizing: "border-box",
+              backgroundColor: "#f1f3f5",
+              border: 0
+            },
+            onChange: (_, value) => {
+              if (value !== null) {
+                setState({
+                  interval: value
+                });
               }
             },
-            children: (0, _util2.formatRecurring)(recurring[x], true, "", locale)
-          }, x))
+            exclusive: true,
+            children: recurringKeysList.map(x => /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.ToggleButton, {
+              size: "small",
+              value: x,
+              sx: {
+                textTransform: "capitalize",
+                padding: "5px 12px",
+                fontSize: "13px",
+                backgroundColor: x === state.interval ? "#fff !important" : "#f1f3f5 !important",
+                border: "0px",
+                "&.Mui-selected": {
+                  borderRadius: "9999px !important",
+                  border: "1px solid #e5e7eb"
+                }
+              },
+              children: (0, _util2.formatRecurring)(recurring[x], true, "", locale)
+            }, x))
+          })
         }), currencyList.length > 0 && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Select, {
           value: currency?.id,
           onChange: e => setCurrency(currencyList.find(v => v?.id === e.target.value)),
@@ -241,7 +287,10 @@ function PricingTable({
                 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"
@@ -389,7 +438,7 @@ function Subscribe({
     fullWidth: true,
     size: "medium",
     variant: "contained",
-    color: x.is_highlight || x.is_selected ? "primary" : "info",
+    color: x.is_highlight || x.is_selected ? "info" : "primary",
     sx: {
       fontSize: "16px",
       padding: "10px 20px",

package/lib/components/table.js

@@ -103,7 +103,7 @@ const Wrapped = (0, _system.styled)(_Datatable.default)`
   }
 
   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/lib/history/invoice/list.js

@@ -97,8 +97,10 @@ const InvoiceTable = _react.default.memo(props => {
     refreshDeps: [search]
   });
   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];
@@ -107,13 +109,15 @@ const InvoiceTable = _react.default.memo(props => {
           href: link.url,
           target: link.external ? "_blank" : target,
           rel: "noreferrer",
-          children: invoice?.number
+          children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
+            children: [(0, _util.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];
@@ -122,9 +126,7 @@ const InvoiceTable = _react.default.memo(props => {
           href: link.url,
           target: link.external ? "_blank" : target,
           rel: "noreferrer",
-          children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
-            children: [(0, _util.formatBNStr)(invoice.total, invoice.paymentCurrency.decimal), "\xA0", invoice.paymentCurrency.symbol]
-          })
+          children: invoice?.number
         });
       }
     }

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

@@ -43,6 +43,7 @@ exports.getSubscriptionAction = void 0;
 exports.getSubscriptionStatusColor = getSubscriptionStatusColor;
 exports.getTxLink = exports.getSubscriptionTimeSummary = void 0;
 exports.getWebhookStatusColor = getWebhookStatusColor;
+exports.getWordBreakStyle = getWordBreakStyle;
 exports.isPaymentKitMounted = void 0;
 exports.isValidCountry = isValidCountry;
 exports.lazyLoad = lazyLoad;
@@ -967,4 +968,10 @@ function formatAmountPrecisionLimit(amount, locale = "en", precision = 6) {
     });
   }
   return "";
+}
+function getWordBreakStyle(value) {
+  if (typeof value === "string" && /\s/.test(value)) {
+    return "break-word";
+  }
+  return "break-all";
 }

package/lib/locales/en.js

@@ -94,7 +94,8 @@ module.exports = (0, _flat.default)({
     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: {
@@ -200,7 +201,7 @@ module.exports = (0, _flat.default)({
       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: {
@@ -233,7 +234,7 @@ module.exports = (0, _flat.default)({
       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/lib/locales/zh.js

@@ -94,7 +94,8 @@ module.exports = (0, _flat.default)({
     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: {
@@ -117,9 +118,9 @@ module.exports = (0, _flat.default)({
         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",
@@ -200,7 +201,7 @@ module.exports = (0, _flat.default)({
       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: {
@@ -233,7 +234,7 @@ module.exports = (0, _flat.default)({
       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/lib/payment/form/address.js

@@ -52,6 +52,10 @@ function AddressForm({
               InputProps: {
                 startAdornment: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.InputAdornment, {
                   position: "start",
+                  style: {
+                    marginRight: "2px",
+                    marginLeft: "-8px"
+                  },
                   children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
                     name: "billing_address.country",
                     control,

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

@@ -262,7 +262,7 @@ function Payment({
   paymentLink,
   customer,
   completed,
-  // error,
+  error,
   mode,
   onPaid,
   onError,
@@ -297,6 +297,13 @@ function Payment({
     }
   }, [checkoutSession, livemode, setLivemode, refresh]);
   const renderContent = () => {
+    if (error) {
+      return /* @__PURE__ */(0, _jsxRuntime.jsx)(_error.default, {
+        mode,
+        title: "Oops",
+        description: (0, _util2.formatError)(error)
+      });
+    }
     if (!checkoutSession || !delay) {
       return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
         className: "cko-container",

package/lib/payment/product-card.js

@@ -56,7 +56,7 @@ function ProductCard({
         sx: {
           fontWeight: 500,
           mb: 0.5,
-          lineHeight: 1,
+          lineHeight: 1.2,
           fontSize: 16
         },
         color: "text.primary",
@@ -67,7 +67,7 @@ function ProductCard({
         sx: {
           fontSize: "0.85rem",
           mb: 0.5,
-          lineHeight: 1,
+          lineHeight: 1.2,
           textAlign: "left"
         },
         color: "text.lighter",

package/lib/payment/skeleton/overview.js

@@ -11,21 +11,23 @@ function OverviewSkeleton() {
     in: true,
     children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
       direction: "column",
-      children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+      children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
         direction: "row",
         alignItems: "center",
         spacing: 2,
-        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, {
-          variant: "circular",
-          width: 32,
-          height: 32
-        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, {
+        children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, {
           variant: "text",
           sx: {
             fontSize: "2rem",
             width: "40%"
           }
-        })]
+        })
+      }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, {
+        sx: {
+          mt: 2
+        },
+        variant: "rounded",
+        height: 100
       }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
         mt: 2,
         component: "div",
@@ -35,13 +37,6 @@ function OverviewSkeleton() {
         component: "div",
         variant: "h2",
         children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, {})
-      }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, {
-        sx: {
-          mt: 2
-        },
-        variant: "rounded",
-        width: 200,
-        height: 200
       })]
     })
   });

package/lib/payment/skeleton/payment.js

@@ -11,38 +11,46 @@ function PaymentSkeleton() {
     in: true,
     children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
       direction: "column",
-      spacing: 2,
       children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, {
         variant: "text",
         sx: {
           fontSize: "2rem",
           width: "40%"
         }
+      }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, {
+        sx: {
+          mt: 2
+        },
+        variant: "rounded",
+        height: 68
       }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+        mt: 1,
         children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
           component: "div",
           variant: "h4",
+          mb: -1,
           children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, {})
         }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
           component: "div",
-          variant: "h1",
-          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, {})
+          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, {
+            height: 60
+          })
         })]
       }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
         children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
           component: "div",
           variant: "h4",
+          mb: -1,
           children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, {})
         }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
           component: "div",
-          variant: "h1",
-          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, {})
+          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, {
+            height: 60
+          })
         })]
       }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
-        children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-          component: "div",
-          variant: "h4",
-          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, {})
+        children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, {
+          height: 60
         })
       })]
     })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.14.27",
+  "version": "1.14.29",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -93,7 +93,7 @@
     "@babel/core": "^7.25.2",
     "@babel/preset-env": "^7.25.2",
     "@babel/preset-react": "^7.24.7",
-    "@blocklet/payment-types": "1.14.27",
+    "@blocklet/payment-types": "1.14.29",
     "@storybook/addon-essentials": "^7.6.20",
     "@storybook/addon-interactions": "^7.6.20",
     "@storybook/addon-links": "^7.6.20",
@@ -123,5 +123,5 @@
     "vite-plugin-babel": "^1.2.0",
     "vite-plugin-node-polyfills": "^0.21.0"
   },
-  "gitHead": "8a67ed1dbdda51526d4cd03c9c10c6930a9ac6a0"
+  "gitHead": "104f4189d9ef96c1e332ffa90824ebd3063c989d"
 }

package/src/checkout/form.tsx

@@ -85,7 +85,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={onChange}
@@ -106,7 +106,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={onChange}
@@ -127,7 +127,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={onChange}

package/src/checkout/table.tsx

@@ -83,16 +83,24 @@ function CheckoutTableInner({ id, mode, onPaid, onError, onChange, extraParams,
   if (!sessionId && !hashSessionId) {
     if (mode === 'standalone') {
       return (
-        <Stack direction="column" alignItems="center">
+        <Stack direction="column" alignItems="center" p={2.5}>
           <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',
             }}>
-            {!data.livemode && <Livemode sx={{ display: 'flex', marginBottom: '8px' }} />}
+            {!data.livemode && <Livemode sx={{ display: 'flex', marginBottom: '8px', width: 'fit-content' }} />}
             <Typography
               color="text.primary"
               fontWeight={600}

package/src/components/livemode.tsx

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