@blocklet/payment-react 1.19.1 → 1.19.2

package/es/components/label.js

@@ -17,6 +17,7 @@ export default function CustomFormLabel({
           display: "flex",
           alignItems: "center",
           gap: 0.5,
+          fontSize: "0.875rem",
           fontWeight: 500,
           color: "text.primary",
           "&.MuiFormLabel-root": {
@@ -31,7 +32,7 @@ export default function CustomFormLabel({
         children: [
           children,
           required && /* @__PURE__ */ jsx(Typography, { component: "span", color: "error", children: "*" }),
-          tooltip && (typeof tooltip === "string" ? /* @__PURE__ */ jsx(Tooltip, { title: tooltip, children: /* @__PURE__ */ jsx(InfoOutlined, { fontSize: "small", sx: { opacity: 0.7 } }) }) : tooltip)
+          tooltip && (typeof tooltip === "string" ? /* @__PURE__ */ jsx(Tooltip, { title: tooltip, children: /* @__PURE__ */ jsx(InfoOutlined, { fontSize: "small", sx: { opacity: 0.7, fontSize: "1rem" } }) }) : tooltip)
         ]
       }
     ),

package/es/history/credit/transactions-list.js

@@ -95,7 +95,6 @@ const TransactionsTable = React.memo((props) => {
       label: t("common.creditAmount"),
       name: "credit_amount",
       align: "right",
-      width: 120,
       options: {
         customBodyRenderLite: (_, index) => {
           const transaction = data?.list[index];

package/es/payment/form/address.js

@@ -1,8 +1,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
-import { Fade, FormLabel, InputAdornment, Stack } from "@mui/material";
+import { Fade, InputAdornment, Stack } from "@mui/material";
 import { Controller, useFormContext, useWatch } from "react-hook-form";
 import FormInput from "../../components/input.js";
+import FormLabel from "../../components/label.js";
 import CountrySelect from "../../components/country-select.js";
 import { getFieldValidation, validatePostalCode } from "../../libs/validator.js";
 export default function AddressForm({ mode, stripe, sx = {}, fieldValidation = {}, errorPosition = "right" }) {

package/es/payment/form/index.js

@@ -2,7 +2,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import "react-international-phone/style.css";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
 import Toast from "@arcblock/ux/lib/Toast";
-import { Box, Button, CircularProgress, Divider, Fade, FormLabel, Stack, Tooltip, Typography } from "@mui/material";
+import { Box, Button, CircularProgress, Divider, Fade, Stack, Tooltip, Typography } from "@mui/material";
 import { useMemoizedFn, useSetState } from "ahooks";
 import pWaitFor from "p-wait-for";
 import { useEffect, useMemo, useRef } from "react";
@@ -15,6 +15,7 @@ import DID from "@arcblock/ux/lib/DID";
 import isEmpty from "lodash/isEmpty";
 import { HelpOutline, OpenInNew } from "@mui/icons-material";
 import FormInput from "../../components/input.js";
+import FormLabel from "../../components/label.js";
 import { usePaymentContext } from "../../contexts/payment.js";
 import { useSubscription } from "../../hooks/subscription.js";
 import api from "../../libs/api.js";

package/lib/components/label.js

@@ -25,6 +25,7 @@ function CustomFormLabel({
         display: "flex",
         alignItems: "center",
         gap: 0.5,
+        fontSize: "0.875rem",
         fontWeight: 500,
         color: "text.primary",
         "&.MuiFormLabel-root": {
@@ -45,7 +46,8 @@ function CustomFormLabel({
         children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_iconsMaterial.InfoOutlined, {
           fontSize: "small",
           sx: {
-            opacity: 0.7
+            opacity: 0.7,
+            fontSize: "1rem"
           }
         })
       }) : tooltip)]

package/lib/history/credit/transactions-list.js

@@ -111,7 +111,6 @@ const TransactionsTable = _react.default.memo(props => {
     label: t("common.creditAmount"),
     name: "credit_amount",
     align: "right",
-    width: 120,
     options: {
       customBodyRenderLite: (_, index) => {
         const transaction = data?.list[index];

package/lib/payment/form/address.js

@@ -9,6 +9,7 @@ var _context = require("@arcblock/ux/lib/Locale/context");
 var _material = require("@mui/material");
 var _reactHookForm = require("react-hook-form");
 var _input = _interopRequireDefault(require("../../components/input"));
+var _label = _interopRequireDefault(require("../../components/label"));
 var _countrySelect = _interopRequireDefault(require("../../components/country-select"));
 var _validator = require("../../libs/validator");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -40,7 +41,7 @@ function AddressForm({
           direction: "column",
           className: "cko-payment-form",
           spacing: 0,
-          children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.FormLabel, {
+          children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_label.default, {
             className: "base-label",
             children: t("payment.checkout.billing.line1")
           }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_input.default, {
@@ -52,7 +53,7 @@ function AddressForm({
             errorPosition,
             variant: "outlined",
             placeholder: t("payment.checkout.billing.line1")
-          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.FormLabel, {
+          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_label.default, {
             className: "base-label",
             children: t("payment.checkout.billing.city")
           }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_input.default, {
@@ -64,7 +65,7 @@ function AddressForm({
             errorPosition,
             variant: "outlined",
             placeholder: t("payment.checkout.billing.city")
-          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.FormLabel, {
+          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_label.default, {
             className: "base-label",
             children: t("payment.checkout.billing.state")
           }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_input.default, {
@@ -76,7 +77,7 @@ function AddressForm({
             errorPosition,
             variant: "outlined",
             placeholder: t("payment.checkout.billing.state")
-          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.FormLabel, {
+          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_label.default, {
             className: "base-label",
             children: t("payment.checkout.billing.postal_code")
           }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_input.default, {
@@ -131,7 +132,7 @@ function AddressForm({
           direction: "column",
           className: "cko-payment-form",
           spacing: 0,
-          children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.FormLabel, {
+          children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_label.default, {
             className: "base-label",
             children: t("payment.checkout.billing.postal_code")
           }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {

package/lib/payment/form/index.js

@@ -22,6 +22,7 @@ var _DID = _interopRequireDefault(require("@arcblock/ux/lib/DID"));
 var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
 var _iconsMaterial = require("@mui/icons-material");
 var _input = _interopRequireDefault(require("../../components/input"));
+var _label = _interopRequireDefault(require("../../components/label"));
 var _payment = require("../../contexts/payment");
 var _subscription = require("../../hooks/subscription");
 var _api = _interopRequireDefault(require("../../libs/api"));
@@ -756,7 +757,7 @@ function PaymentForm({
             overflow: "auto",
             py: 1
           },
-          children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.FormLabel, {
+          children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_label.default, {
             className: "base-label",
             children: t("payment.checkout.customer.name")
           }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_input.default, {
@@ -767,7 +768,7 @@ function PaymentForm({
               required: t("payment.checkout.required"),
               ...(0, _validator.getFieldValidation)("customer_name", checkoutSession.metadata?.page_info?.field_validation, locale)
             }
-          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.FormLabel, {
+          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_label.default, {
             className: "base-label",
             children: t("payment.checkout.customer.email")
           }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_input.default, {
@@ -780,7 +781,7 @@ function PaymentForm({
               ...(0, _validator.getFieldValidation)("customer_email", checkoutSession.metadata?.page_info?.field_validation, locale)
             }
           }), checkoutSession.phone_number_collection?.enabled && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-            children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.FormLabel, {
+            children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_label.default, {
               className: "base-label",
               children: t("payment.checkout.customer.phone")
             }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_phone.default, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.19.1",
+  "version": "1.19.2",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -94,7 +94,7 @@
     "@babel/core": "^7.27.4",
     "@babel/preset-env": "^7.27.2",
     "@babel/preset-react": "^7.27.1",
-    "@blocklet/payment-types": "1.19.1",
+    "@blocklet/payment-types": "1.19.2",
     "@storybook/addon-essentials": "^7.6.20",
     "@storybook/addon-interactions": "^7.6.20",
     "@storybook/addon-links": "^7.6.20",
@@ -125,5 +125,5 @@
     "vite-plugin-babel": "^1.3.1",
     "vite-plugin-node-polyfills": "^0.23.0"
   },
-  "gitHead": "48d5719c8ce4e89a16f8dd576ff8f72072e3909e"
+  "gitHead": "741c897204afc412721a942201516932bff59235"
 }

package/src/components/label.tsx

@@ -18,6 +18,7 @@ export default function CustomFormLabel({
           display: 'flex',
           alignItems: 'center',
           gap: 0.5,
+          fontSize: '0.875rem',
           fontWeight: 500,
           color: 'text.primary',
           '&.MuiFormLabel-root': {
@@ -38,7 +39,7 @@ export default function CustomFormLabel({
         {tooltip &&
           (typeof tooltip === 'string' ? (
             <Tooltip title={tooltip}>
-              <InfoOutlined fontSize="small" sx={{ opacity: 0.7 }} />
+              <InfoOutlined fontSize="small" sx={{ opacity: 0.7, fontSize: '1rem' }} />
             </Tooltip>
           ) : (
             tooltip

package/src/history/credit/transactions-list.tsx

@@ -141,7 +141,6 @@ const TransactionsTable = React.memo((props: Props) => {
       label: t('common.creditAmount'),
       name: 'credit_amount',
       align: 'right',
-      width: 120,
       options: {
         customBodyRenderLite: (_: string, index: number) => {
           const transaction = data?.list[index] as TCreditTransactionExpanded;

package/src/payment/form/address.tsx

@@ -1,8 +1,9 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { Fade, FormLabel, InputAdornment, Stack } from '@mui/material';
+import { Fade, InputAdornment, Stack } from '@mui/material';
 import type { SxProps } from '@mui/material';
 import { Controller, useFormContext, useWatch } from 'react-hook-form';
 import FormInput from '../../components/input';
+import FormLabel from '../../components/label';
 import CountrySelect from '../../components/country-select';
 import { getFieldValidation, validatePostalCode } from '../../libs/validator';
 

package/src/payment/form/index.tsx

@@ -5,7 +5,7 @@ import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 // import { useTheme } from '@arcblock/ux/lib/Theme';
 import Toast from '@arcblock/ux/lib/Toast';
 import type { TCheckoutSession, TCustomer, TPaymentIntent, TPaymentMethodExpanded } from '@blocklet/payment-types';
-import { Box, Button, CircularProgress, Divider, Fade, FormLabel, Stack, Tooltip, Typography } from '@mui/material';
+import { Box, Button, CircularProgress, Divider, Fade, Stack, Tooltip, Typography } from '@mui/material';
 import { useMemoizedFn, useSetState } from 'ahooks';
 import pWaitFor from 'p-wait-for';
 import { useEffect, useMemo, useRef } from 'react';
@@ -19,6 +19,7 @@ import DID from '@arcblock/ux/lib/DID';
 import isEmpty from 'lodash/isEmpty';
 import { HelpOutline, OpenInNew } from '@mui/icons-material';
 import FormInput from '../../components/input';
+import FormLabel from '../../components/label';
 import { usePaymentContext } from '../../contexts/payment';
 import { useSubscription } from '../../hooks/subscription';
 import api from '../../libs/api';