@blocklet/payment-react 1.13.231 → 1.13.233

package/es/components/blockchain/tx.js

@@ -12,7 +12,7 @@ export default function TxLink(props) {
   if (!props.details || props.mode === "customer" && props.method.type === "stripe") {
     return /* @__PURE__ */ jsx(Typography, { component: "small", color: "text.secondary", children: t("common.none") });
   }
-  const { text, link, gas } = getTxLink(props.method, props.details);
+  const { text, link } = getTxLink(props.method, props.details);
   if (link) {
     return /* @__PURE__ */ jsx(Link, { href: link, target: "_blank", rel: "noopener noreferrer", children: /* @__PURE__ */ jsxs(
       Stack,
@@ -23,10 +23,7 @@ export default function TxLink(props) {
         justifyContent: props.align === "left" ? "flex-start" : "flex-end",
         spacing: 1,
         children: [
-          /* @__PURE__ */ jsxs(Typography, { component: "span", color: "primary", children: [
-            text.length > 40 ? [text.slice(0, 8), text.slice(-8)].join("...") : text,
-            gas
-          ] }),
+          /* @__PURE__ */ jsx(Typography, { component: "span", color: "primary", children: text.length > 40 ? [text.slice(0, 8), text.slice(-8)].join("...") : text }),
           /* @__PURE__ */ jsx(OpenInNewOutlined, { fontSize: "small" })
         ]
       }

package/es/payment/amount.js

@@ -4,11 +4,11 @@ export default function PaymentAmount({ amount, sx }) {
   return /* @__PURE__ */ jsx(
     Typography,
     {
+      component: "div",
       sx: {
         my: 0.5,
         fontWeight: 600,
         fontSize: "2.5rem",
-        lineHeight: "1.3",
         letterSpacing: "-0.03rem",
         fontVariantNumeric: "tabular-nums",
         ...sx

package/es/payment/form/index.js

@@ -243,7 +243,7 @@ export default function PaymentForm({
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(Fade, { in: true, children: /* @__PURE__ */ jsxs(Stack, { className: "cko-payment-contact", children: [
       /* @__PURE__ */ jsxs(Stack, { direction: "row", sx: { mb: 1 }, alignItems: "center", justifyContent: "space-between", children: [
-        /* @__PURE__ */ jsx(Typography, { sx: { color: "text.primary", fontWeight: 600 }, children: t("payment.checkout.contact") }),
+        /* @__PURE__ */ jsx(Typography, { sx: { color: "text.secondary", fontWeight: 600 }, children: t("payment.checkout.contact") }),
         isColumnLayout || mode !== "standalone" ? null : /* @__PURE__ */ jsx(UserButtons, {})
       ] }),
       /* @__PURE__ */ jsxs(Stack, { direction: "column", className: "cko-payment-form", spacing: 0, children: [
@@ -300,7 +300,7 @@ export default function PaymentForm({
     ] }) }),
     /* @__PURE__ */ jsx(AddressForm, { mode: checkoutSession.billing_address_collection, stripe: method?.type === "stripe" }),
     /* @__PURE__ */ jsx(Fade, { in: true, children: /* @__PURE__ */ jsxs(Stack, { direction: "column", alignItems: "flex-start", className: "cko-payment-methods", children: [
-      /* @__PURE__ */ jsx(Typography, { sx: { mb: 1, color: "text.primary", fontWeight: 600 }, children: t("payment.checkout.method") }),
+      /* @__PURE__ */ jsx(Typography, { sx: { color: "text.secondary", fontWeight: 600 }, children: t("payment.checkout.method") }),
       /* @__PURE__ */ jsx(Stack, { direction: "row", sx: { width: "100%" }, children: /* @__PURE__ */ jsx(
         Controller,
         {

package/es/payment/index.js

@@ -249,7 +249,7 @@ export function PaymentInner({
           }
         )
       ] }) }),
-      /* @__PURE__ */ jsxs(Stack, { className: "cko-payment", direction: "column", spacing: { xs: 2, sm: 4 }, children: [
+      /* @__PURE__ */ jsxs(Stack, { className: "cko-payment", direction: "column", spacing: { xs: 2, sm: 3 }, children: [
         completed && /* @__PURE__ */ jsx(
           PaymentSuccess,
           {
@@ -388,7 +388,7 @@ export const Root = styled(Box)`
     .cko-container {
       flex-direction: column;
       align-items: center;
-      gap: 24px;
+      gap: 32px;
       min-width: 350px;
       max-width: 400px;
     }

package/es/payment/summary.js

@@ -142,10 +142,10 @@ export default function PaymentSummary({
     }
   };
   return /* @__PURE__ */ jsx(Fade, { in: true, children: /* @__PURE__ */ jsxs(Stack, { className: "cko-product", direction: "column", ...rest, children: [
-    /* @__PURE__ */ jsxs(Stack, { className: "cko-product-summary", direction: "column", alignItems: "flex-start", sx: { mb: { xs: 0, sm: 3 } }, children: [
-      /* @__PURE__ */ jsx(Typography, { sx: { fontWeight: 500, fontSize: "1.15rem", color: "text.secondary" }, children: action || headlines.action }),
+    /* @__PURE__ */ jsxs(Stack, { className: "cko-product-summary", direction: "column", alignItems: "flex-start", sx: { mb: { xs: 1, sm: 3 } }, children: [
+      /* @__PURE__ */ jsx(Typography, { component: "div", sx: { fontWeight: 500, fontSize: "1.15rem", color: "text.secondary" }, children: action || headlines.action }),
       /* @__PURE__ */ jsx(PaymentAmount, { amount: headlines.amount }),
-      headlines.then && /* @__PURE__ */ jsx(Typography, { sx: { fontSize: "0.9rem", color: "text.secondary" }, children: headlines.then })
+      headlines.then && /* @__PURE__ */ jsx(Typography, { component: "div", sx: { fontSize: "0.9rem", color: "text.secondary" }, children: headlines.then })
     ] }),
     /* @__PURE__ */ jsx(Stack, { spacing: { xs: 1, sm: 2 }, children: items.map(
       (x) => x.price.custom_unit_amount && onChangeAmount && donationSettings ? /* @__PURE__ */ jsx(

package/lib/components/blockchain/tx.js

@@ -26,8 +26,7 @@ function TxLink(props) {
   }
   const {
     text,
-    link,
-    gas
+    link
   } = (0, _util.getTxLink)(props.method, props.details);
   if (link) {
     return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Link, {
@@ -40,10 +39,10 @@ function TxLink(props) {
         alignItems: "center",
         justifyContent: props.align === "left" ? "flex-start" : "flex-end",
         spacing: 1,
-        children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
+        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
           component: "span",
           color: "primary",
-          children: [text.length > 40 ? [text.slice(0, 8), text.slice(-8)].join("...") : text, gas]
+          children: text.length > 40 ? [text.slice(0, 8), text.slice(-8)].join("...") : text
         }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_iconsMaterial.OpenInNewOutlined, {
           fontSize: "small"
         })]

package/lib/payment/amount.js

@@ -11,11 +11,11 @@ function PaymentAmount({
   sx
 }) {
   return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+    component: "div",
     sx: {
       my: 0.5,
       fontWeight: 600,
       fontSize: "2.5rem",
-      lineHeight: "1.3",
       letterSpacing: "-0.03rem",
       fontVariantNumeric: "tabular-nums",
       ...sx

package/lib/payment/form/index.js

@@ -316,7 +316,7 @@ function PaymentForm({
           justifyContent: "space-between",
           children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
             sx: {
-              color: "text.primary",
+              color: "text.secondary",
               fontWeight: 600
             },
             children: t("payment.checkout.contact")
@@ -382,8 +382,7 @@ function PaymentForm({
         className: "cko-payment-methods",
         children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
           sx: {
-            mb: 1,
-            color: "text.primary",
+            color: "text.secondary",
             fontWeight: 600
           },
           children: t("payment.checkout.method")

package/lib/payment/index.js

@@ -330,7 +330,7 @@ function PaymentInner({
           direction: "column",
           spacing: {
             xs: 2,
-            sm: 4
+            sm: 3
           },
           children: [completed && /* @__PURE__ */(0, _jsxRuntime.jsx)(_success.default, {
             mode,
@@ -465,7 +465,7 @@ const Root = exports.Root = (0, _system.styled)(_material.Box)`
     .cko-container {
       flex-direction: column;
       align-items: center;
-      gap: 24px;
+      gap: 32px;
       min-width: 350px;
       max-width: 400px;
     }

package/lib/payment/summary.js

@@ -177,11 +177,12 @@ function PaymentSummary({
         alignItems: "flex-start",
         sx: {
           mb: {
-            xs: 0,
+            xs: 1,
             sm: 3
           }
         },
         children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+          component: "div",
           sx: {
             fontWeight: 500,
             fontSize: "1.15rem",
@@ -191,6 +192,7 @@ function PaymentSummary({
         }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_amount.default, {
           amount: headlines.amount
         }), headlines.then && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+          component: "div",
           sx: {
             fontSize: "0.9rem",
             color: "text.secondary"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.13.231",
+  "version": "1.13.233",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -90,7 +90,7 @@
     "@babel/core": "^7.24.4",
     "@babel/preset-env": "^7.24.4",
     "@babel/preset-react": "^7.24.1",
-    "@blocklet/payment-types": "1.13.231",
+    "@blocklet/payment-types": "1.13.233",
     "@storybook/addon-essentials": "^7.6.17",
     "@storybook/addon-interactions": "^7.6.17",
     "@storybook/addon-links": "^7.6.17",
@@ -119,5 +119,5 @@
     "vite-plugin-babel": "^1.2.0",
     "vite-plugin-node-polyfills": "^0.21.0"
   },
-  "gitHead": "256dbf9b77d59252cbb5db1832544ce5c7dfa4f4"
+  "gitHead": "854b8c4502657675e5d08279d2efca31bafa0a88"
 }

package/src/components/blockchain/tx.tsx

@@ -26,7 +26,7 @@ export default function TxLink(props: {
     );
   }
 
-  const { text, link, gas } = getTxLink(props.method, props.details);
+  const { text, link } = getTxLink(props.method, props.details);
 
   if (link) {
     return (
@@ -39,7 +39,6 @@ export default function TxLink(props: {
           spacing={1}>
           <Typography component="span" color="primary">
             {text.length > 40 ? [text.slice(0, 8), text.slice(-8)].join('...') : text}
-            {gas}
           </Typography>
           <OpenInNewOutlined fontSize="small" />
         </Stack>

package/src/payment/amount.tsx

@@ -5,11 +5,11 @@ type Props = { amount: string; sx?: any };
 export default function PaymentAmount({ amount, sx }: Props) {
   return (
     <Typography
+      component="div"
       sx={{
         my: 0.5,
         fontWeight: 600,
         fontSize: '2.5rem',
-        lineHeight: '1.3',
         letterSpacing: '-0.03rem',
         fontVariantNumeric: 'tabular-nums',
         ...sx,

package/src/payment/form/index.tsx

@@ -305,7 +305,7 @@ export default function PaymentForm({
       <Fade in>
         <Stack className="cko-payment-contact">
           <Stack direction="row" sx={{ mb: 1 }} alignItems="center" justifyContent="space-between">
-            <Typography sx={{ color: 'text.primary', fontWeight: 600 }}>{t('payment.checkout.contact')}</Typography>
+            <Typography sx={{ color: 'text.secondary', fontWeight: 600 }}>{t('payment.checkout.contact')}</Typography>
             {isColumnLayout || mode !== 'standalone' ? null : <UserButtons />}
           </Stack>
           <Stack direction="column" className="cko-payment-form" spacing={0}>
@@ -359,7 +359,7 @@ export default function PaymentForm({
       <AddressForm mode={checkoutSession.billing_address_collection as string} stripe={method?.type === 'stripe'} />
       <Fade in>
         <Stack direction="column" alignItems="flex-start" className="cko-payment-methods">
-          <Typography sx={{ mb: 1, color: 'text.primary', fontWeight: 600 }}>{t('payment.checkout.method')}</Typography>
+          <Typography sx={{ color: 'text.secondary', fontWeight: 600 }}>{t('payment.checkout.method')}</Typography>
           <Stack direction="row" sx={{ width: '100%' }}>
             <Controller
               name="payment_currency"

package/src/payment/index.tsx

@@ -295,7 +295,7 @@ export function PaymentInner({
               />
             </Stack>
           </Fade>
-          <Stack className="cko-payment" direction="column" spacing={{ xs: 2, sm: 4 }}>
+          <Stack className="cko-payment" direction="column" spacing={{ xs: 2, sm: 3 }}>
             {completed && (
               <PaymentSuccess
                 mode={mode}
@@ -443,7 +443,7 @@ export const Root = styled(Box)<{ mode: LiteralUnion<'standalone' | 'inline' | '
     .cko-container {
       flex-direction: column;
       align-items: center;
-      gap: 24px;
+      gap: 32px;
       min-width: 350px;
       max-width: 400px;
     }

package/src/payment/summary.tsx

@@ -176,13 +176,15 @@ export default function PaymentSummary({
   return (
     <Fade in>
       <Stack className="cko-product" direction="column" {...rest}>
-        <Stack className="cko-product-summary" direction="column" alignItems="flex-start" sx={{ mb: { xs: 0, sm: 3 } }}>
-          <Typography sx={{ fontWeight: 500, fontSize: '1.15rem', color: 'text.secondary' }}>
+        <Stack className="cko-product-summary" direction="column" alignItems="flex-start" sx={{ mb: { xs: 1, sm: 3 } }}>
+          <Typography component="div" sx={{ fontWeight: 500, fontSize: '1.15rem', color: 'text.secondary' }}>
             {action || headlines.action}
           </Typography>
           <PaymentAmount amount={headlines.amount} />
           {headlines.then && (
-            <Typography sx={{ fontSize: '0.9rem', color: 'text.secondary' }}>{headlines.then}</Typography>
+            <Typography component="div" sx={{ fontSize: '0.9rem', color: 'text.secondary' }}>
+              {headlines.then}
+            </Typography>
           )}
         </Stack>
         <Stack spacing={{ xs: 1, sm: 2 }}>