@blocklet/payment-react 1.18.56 → 1.19.1

package/lib/payment/summary.js

@@ -24,7 +24,7 @@ var _livemode = _interopRequireDefault(require("../components/livemode"));
 var _payment = require("../contexts/payment");
 var _mobile = require("../hooks/mobile");
 var _loadingButton = _interopRequireDefault(require("../components/loading-button"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const ExpandMore = (0, _styles.styled)(props => {
   const {
     expand,
@@ -83,35 +83,24 @@ function getStakingSetup(items, currency, billingThreshold = 0) {
   }
   return "0";
 }
-PaymentSummary.defaultProps = {
-  onUpsell: _noop.default,
-  onDownsell: _noop.default,
-  onApplyCrossSell: _noop.default,
-  onCancelCrossSell: _noop.default,
-  onChangeAmount: _noop.default,
-  checkoutSessionId: "",
-  crossSellBehavior: "",
-  showStaking: false,
-  donationSettings: null,
-  action: "",
-  trialEnd: 0
-};
 function PaymentSummary({
   items,
   currency,
   trialInDays,
   billingThreshold,
-  onUpsell,
-  onDownsell,
-  onApplyCrossSell,
-  onCancelCrossSell,
-  onChangeAmount,
-  checkoutSessionId,
-  crossSellBehavior,
-  showStaking,
-  donationSettings,
-  action,
+  onUpsell = _noop.default,
+  onDownsell = _noop.default,
+  onQuantityChange = _noop.default,
+  onApplyCrossSell = _noop.default,
+  onCancelCrossSell = _noop.default,
+  onChangeAmount = _noop.default,
+  checkoutSessionId = "",
+  crossSellBehavior = "",
+  showStaking = false,
+  donationSettings = void 0,
+  action = "",
   trialEnd = 0,
+  completed = false,
   ...rest
 }) {
   const {
@@ -151,6 +140,10 @@ function PaymentSummary({
     await onUpsell(from, to);
     runAsync();
   };
+  const handleQuantityChange = async (itemId, quantity) => {
+    await onQuantityChange(itemId, quantity);
+    runAsync();
+  };
   const handleDownsell = async from => {
     await onDownsell(from);
     runAsync();
@@ -209,11 +202,14 @@ function PaymentSummary({
         currency,
         onUpsell: handleUpsell,
         onDownsell: handleDownsell,
+        adjustableQuantity: x.adjustable_quantity,
+        completed,
+        onQuantityChange: handleQuantityChange,
         children: x.cross_sell && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
           direction: "row",
-          alignItems: "center",
-          justifyContent: "space-between",
           sx: {
+            alignItems: "center",
+            justifyContent: "space-between",
             width: 1
           },
           children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {}), /* @__PURE__ */(0, _jsxRuntime.jsx)(_loadingButton.default, {
@@ -231,7 +227,9 @@ function PaymentSummary({
     }), data && items.some(x => x.price_id === data.id) === false && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Grow, {
       in: true,
       children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
-        mt: 1,
+        sx: {
+          mt: 1
+        },
         children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_productItem.default, {
           item: {
             quantity: 1,
@@ -247,9 +245,9 @@ function PaymentSummary({
           onDownsell: _noop.default,
           children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
             direction: "row",
-            alignItems: "center",
-            justifyContent: "space-between",
             sx: {
+              alignItems: "center",
+              justifyContent: "space-between",
               width: 1
             },
             children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
@@ -283,9 +281,9 @@ function PaymentSummary({
       direction: "column",
       ...rest,
       children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
-        display: "flex",
-        alignItems: "center",
         sx: {
+          display: "flex",
+          alignItems: "center",
           mb: 2.5
         },
         children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
@@ -303,13 +301,15 @@ function PaymentSummary({
         }), !settings.livemode && /* @__PURE__ */(0, _jsxRuntime.jsx)(_livemode.default, {})]
       }), isMobile && !donationSettings ? /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
         children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
-          justifyContent: "space-between",
-          flexDirection: "row",
-          alignItems: "center",
-          mb: 1.5,
           onClick: () => setState({
             expanded: !state.expanded
           }),
+          sx: {
+            justifyContent: "space-between",
+            flexDirection: "row",
+            alignItems: "center",
+            mb: 1.5
+          },
           children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
             children: t("payment.checkout.productListTotal", {
               total: items.length
@@ -334,13 +334,17 @@ function PaymentSummary({
       }), staking > 0 && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
         children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
           direction: "row",
-          justifyContent: "space-between",
-          alignItems: "center",
           spacing: 1,
+          sx: {
+            justifyContent: "space-between",
+            alignItems: "center"
+          },
           children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
             direction: "row",
-            alignItems: "center",
             spacing: 0.5,
+            sx: {
+              alignItems: "center"
+            },
             children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
               sx: {
                 color: "text.secondary"
@@ -364,13 +368,17 @@ function PaymentSummary({
           })]
         }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
           direction: "row",
-          justifyContent: "space-between",
-          alignItems: "center",
           spacing: 1,
+          sx: {
+            justifyContent: "space-between",
+            alignItems: "center"
+          },
           children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
             direction: "row",
-            alignItems: "center",
             spacing: 0.5,
+            sx: {
+              alignItems: "center"
+            },
             children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
               sx: {
                 color: "text.secondary"
@@ -394,11 +402,11 @@ function PaymentSummary({
           })]
         })]
       }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
-        display: "flex",
-        justifyContent: "space-between",
-        flexDirection: "row",
-        alignItems: "center",
         sx: {
+          display: "flex",
+          justifyContent: "space-between",
+          flexDirection: "row",
+          alignItems: "center",
           width: "100%"
         },
         children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {

package/lib/theme/index.d.ts

@@ -7,9 +7,4 @@ export declare function PaymentThemeProvider({ children, theme: customTheme, }:
     children: React.ReactNode;
     theme?: PaymentThemeOptions;
 }): JSX.Element;
-export declare namespace PaymentThemeProvider {
-    var defaultProps: {
-        theme: {};
-    };
-}
 export { typography };

package/lib/theme/index.js

@@ -19,9 +19,6 @@ var _react = require("react");
 require("./index.css");
 require("./types");
 var _typography = require("./typography");
-PaymentThemeProvider.defaultProps = {
-  theme: {}
-};
 function PaymentThemeProvider({
   children,
   theme: customTheme = {}
@@ -277,7 +274,7 @@ function PaymentThemeProvider({
                 backgroundColor: palette.chip.default.background,
                 borderColor: palette.chip.default.border
               },
-              "&.MuiChip-filledSecondary": {
+              "&.MuiChip-filled.MuiChip-colorSecondary": {
                 color: palette.chip.secondary.text,
                 backgroundColor: palette.chip.secondary.background,
                 borderColor: palette.chip.secondary.border
@@ -292,7 +289,7 @@ function PaymentThemeProvider({
                 backgroundColor: palette.chip.warning.background,
                 borderColor: palette.chip.warning.border
               },
-              "&.MuiChip-filledPrimary,&.MuiChip-filledInfo": {
+              "&.MuiChip-filled.MuiChip-colorPrimary,&.MuiChip-filledInfo": {
                 color: palette.chip.info.text,
                 backgroundColor: palette.chip.info.background,
                 borderColor: palette.chip.info.border

package/lib/theme/typography.d.ts

@@ -1,2 +1,2 @@
-import type { TypographyOptions } from '@mui/material/styles/createTypography';
-export declare const typography: TypographyOptions;
+import type { TypographyStyleOptions } from '@mui/material/styles/createTypography';
+export declare const typography: TypographyStyleOptions;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.18.56",
+  "version": "1.19.1",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -54,76 +54,76 @@
     }
   },
   "dependencies": {
-    "@arcblock/did-connect": "^2.13.66",
-    "@arcblock/ux": "^2.13.66",
+    "@arcblock/did-connect": "^3.0.1",
+    "@arcblock/ux": "^3.0.1",
     "@arcblock/ws": "^1.20.14",
-    "@blocklet/theme": "^2.13.66",
-    "@blocklet/ui-react": "^2.13.66",
-    "@mui/icons-material": "^5.16.6",
-    "@mui/lab": "^5.0.0-alpha.173",
-    "@mui/material": "^5.16.6",
-    "@mui/system": "^5.16.6",
+    "@blocklet/theme": "^3.0.1",
+    "@blocklet/ui-react": "^3.0.1",
+    "@mui/icons-material": "^7.1.2",
+    "@mui/lab": "7.0.0-beta.14",
+    "@mui/material": "^7.1.2",
+    "@mui/system": "^7.1.1",
     "@ocap/util": "^1.20.14",
-    "@stripe/react-stripe-js": "^2.7.3",
+    "@stripe/react-stripe-js": "^2.9.0",
     "@stripe/stripe-js": "^2.4.0",
-    "@vitejs/plugin-legacy": "^5.4.1",
-    "ahooks": "^3.8.0",
-    "axios": "^1.7.5",
-    "dayjs": "^1.11.12",
+    "@vitejs/plugin-legacy": "^7.0.0",
+    "ahooks": "^3.8.5",
+    "axios": "^1.10.0",
+    "dayjs": "^1.11.13",
     "flat": "^5.0.2",
-    "google-libphonenumber": "^3.2.38",
+    "google-libphonenumber": "^3.2.42",
     "lodash": "^4.17.21",
     "numbro": "^2.5.0",
-    "p-wait-for": "3",
-    "react-error-boundary": "^4.0.13",
-    "react-hook-form": "^7.52.1",
+    "p-wait-for": "^3.2.0",
+    "react-error-boundary": "^4.1.2",
+    "react-hook-form": "^7.58.1",
     "react-international-phone": "^3.1.2",
     "ufo": "^1.6.1",
     "use-bus": "^2.5.2",
-    "validator": "^13.12.0"
+    "validator": "^13.15.15"
   },
   "peerDependencies": {
-    "react": ">=18.1.0"
+    "react": "^19.1.0"
   },
   "publishConfig": {
     "access": "public"
   },
   "devDependencies": {
     "@arcblock/eslint-config-ts": "^0.3.3",
-    "@babel/cli": "^7.24.8",
-    "@babel/core": "^7.25.2",
-    "@babel/preset-env": "^7.25.2",
-    "@babel/preset-react": "^7.24.7",
-    "@blocklet/payment-types": "1.18.56",
+    "@babel/cli": "^7.27.2",
+    "@babel/core": "^7.27.4",
+    "@babel/preset-env": "^7.27.2",
+    "@babel/preset-react": "^7.27.1",
+    "@blocklet/payment-types": "1.19.1",
     "@storybook/addon-essentials": "^7.6.20",
     "@storybook/addon-interactions": "^7.6.20",
     "@storybook/addon-links": "^7.6.20",
     "@storybook/addon-onboarding": "^1.0.11",
     "@storybook/blocks": "^7.6.20",
     "@storybook/react": "^7.6.20",
-    "@storybook/react-vite": "^7.6.20",
+    "@storybook/react-vite": "^9.0.13",
     "@storybook/test": "^7.6.20",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
-    "@vitejs/plugin-legacy": "^5.4.1",
+    "@types/react": "^18.3.23",
+    "@types/react-dom": "^18.3.7",
+    "@vitejs/plugin-legacy": "^7.0.0",
     "copyfiles": "^2.4.1",
-    "eslint": "^8.57.0",
+    "eslint": "^8.57.1",
     "glob": "^10.4.5",
     "import-sort-style-module": "^6.0.0",
     "jest": "^29.7.0",
-    "prettier": "^3.3.3",
+    "prettier": "^3.6.0",
     "prettier-plugin-import-sort": "^0.0.7",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
     "rollup-plugin-node-builtins": "^2.1.2",
     "storybook": "^7.6.20",
-    "ts-jest": "^29.2.5",
-    "type-fest": "^4.23.0",
-    "typescript": "^5.5.4",
+    "ts-jest": "^29.4.0",
+    "type-fest": "^4.41.0",
+    "typescript": "5.5.4",
     "unbuild": "^2.0.0",
-    "vite": "^5.3.5",
-    "vite-plugin-babel": "^1.2.0",
-    "vite-plugin-node-polyfills": "^0.21.0"
+    "vite": "^7.0.0",
+    "vite-plugin-babel": "^1.3.1",
+    "vite-plugin-node-polyfills": "^0.23.0"
   },
-  "gitHead": "9fd0235186e07388337cf1a57b257f97de8dd4c3"
+  "gitHead": "48d5719c8ce4e89a16f8dd576ff8f72072e3909e"
 }

package/src/checkout/donate.tsx

@@ -183,9 +183,9 @@ export function DonateDetails({ supporters = [], currency, method }: DonateHisto
           }}>
           <Stack
             direction="row"
-            alignItems="center"
             spacing={0.5}
             sx={{
+              alignItems: 'center',
               flex: 3,
               overflow: 'hidden',
             }}>
@@ -226,7 +226,14 @@ export function DonateDetails({ supporters = [], currency, method }: DonateHisto
               {x.customer?.name}
             </Typography>
           </Stack>
-          <Stack direction="row" alignItems="center" justifyContent="flex-end" spacing={0.5} sx={{ flex: 1 }}>
+          <Stack
+            direction="row"
+            spacing={0.5}
+            sx={{
+              alignItems: 'center',
+              justifyContent: 'flex-end',
+              flex: 1,
+            }}>
             <Avatar
               key={x.id}
               src={currency?.logo}
@@ -256,7 +263,12 @@ function SupporterAvatar({
   const customersNum = customers.length;
   if (customersNum === 0) return null;
   return (
-    <Stack flexDirection="row" justifyContent="center" alignItems="center">
+    <Stack
+      sx={{
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}>
       <AvatarGroup
         max={5}
         sx={{
@@ -336,7 +348,13 @@ function SupporterTable({ supporters = [], totalAmount = '0', currency, method }
   const customersNum = customers.length;
   if (customersNum === 0) return null;
   return (
-    <Box display="flex" flexDirection="column" alignItems="center" gap={{ xs: 0.5, sm: 1 }}>
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        gap: { xs: 0.5, sm: 1 },
+      }}>
       <SupporterAvatar supporters={supporters} totalAmount={totalAmount} currency={currency} method={method} />
       <DonateDetails supporters={supporters} totalAmount={totalAmount} currency={currency} method={method} />
     </Box>
@@ -351,14 +369,21 @@ function SupporterSimple({ supporters = [], totalAmount = '0', currency, method
 
   return (
     <Box
-      display="flex"
-      flexDirection="column"
-      alignItems="center"
-      gap={{
-        xs: 0.5,
-        sm: 1,
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+
+        gap: {
+          xs: 0.5,
+          sm: 1,
+        },
       }}>
-      <Typography component="p" color="text.secondary">
+      <Typography
+        component="p"
+        sx={{
+          color: 'text.secondary',
+        }}>
         {customersNum === 0 ? (
           <span style={emojiFont}>{t('payment.checkout.donation.empty')}</span>
         ) : (
@@ -550,7 +575,12 @@ function CheckoutDonateInner({
         variant={(donateSettings.appearance?.button?.variant || 'contained') as any}
         {...donateSettings.appearance?.button}
         onClick={handlePopoverOpen}>
-        <Stack direction="row" alignItems="center" spacing={0.5}>
+        <Stack
+          direction="row"
+          spacing={0.5}
+          sx={{
+            alignItems: 'center',
+          }}>
           {donateSettings.appearance.button.icon}
           {typeof donateSettings.appearance.button.text === 'string' ? (
             <Typography sx={{ whiteSpace: 'nowrap' }}>{donateSettings.appearance.button.text}</Typography>
@@ -594,9 +624,20 @@ function CheckoutDonateInner({
               <CircularProgress />
             </div>
           )}
-          <Box display="flex" alignItems="center" flexDirection="column" gap={2}>
+          <Box
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              flexDirection: 'column',
+              gap: 2,
+            }}>
             <Button {...inlineOptions.button} onClick={() => startDonate()}>
-              <Stack direction="row" alignItems="center" spacing={0.5}>
+              <Stack
+                direction="row"
+                spacing={0.5}
+                sx={{
+                  alignItems: 'center',
+                }}>
                 {inlineOptions?.button?.icon}
                 {typeof inlineText === 'string' ? (
                   <Typography sx={{ whiteSpace: 'nowrap' }}>{inlineText}</Typography>
@@ -613,11 +654,15 @@ function CheckoutDonateInner({
   );
   const defaultRender = (
     <Box
-      sx={{ width: '100%', minWidth: 300, maxWidth: 720 }}
-      display="flex"
-      flexDirection="column"
-      alignItems="center"
-      gap={{ xs: 1, sm: 2 }}>
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        gap: { xs: 1, sm: 2 },
+        width: '100%',
+        minWidth: 300,
+        maxWidth: 720,
+      }}>
       <Button
         size={(donateSettings.appearance?.button?.size || 'medium') as any}
         color={(donateSettings.appearance?.button?.color || 'primary') as any}
@@ -634,7 +679,12 @@ function CheckoutDonateInner({
         }}
         {...donateSettings.appearance?.button}
         onClick={() => startDonate()}>
-        <Stack direction="row" alignItems="center" spacing={0.5}>
+        <Stack
+          direction="row"
+          spacing={0.5}
+          sx={{
+            alignItems: 'center',
+          }}>
           {donateSettings.appearance.button.icon && (
             <Typography sx={{ mr: 0.5, display: 'inline-flex', alignItems: 'center' }}>
               {donateSettings.appearance.button.icon}
@@ -692,7 +742,12 @@ function CheckoutDonateInner({
         <Dialog
           open={state.open}
           title={
-            <Box display="flex" alignItems="center" gap={0.5}>
+            <Box
+              sx={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: 0.5,
+              }}>
               <Typography variant="h3" sx={{ maxWidth: 320, textOverflow: 'ellipsis', overflow: 'hidden' }}>
                 {donateSettings.title}
               </Typography>
@@ -714,7 +769,13 @@ function CheckoutDonateInner({
           maxWidth="md"
           toolbar={
             isMobile ? null : (
-              <Box display="flex" alignItems="center" gap={1} sx={{ color: 'text.secondary' }}>
+              <Box
+                sx={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: 1,
+                  color: 'text.secondary',
+                }}>
                 <AvatarGroup
                   total={customers?.length}
                   max={5}
@@ -801,28 +862,35 @@ function CheckoutDonateInner({
   );
 }
 
-export default function CheckoutDonate(props: DonateProps) {
+export default function CheckoutDonate(rawProps: DonateProps) {
+  const props = Object.assign(
+    {
+      theme: 'default',
+      livemode: undefined,
+      inlineOptions: {
+        button: {
+          text: 'Tip',
+        },
+      },
+      timeout: 5000,
+      mode: 'default',
+    },
+    rawProps
+  );
+
   const { livemode } = usePaymentContext();
   const content = (
+    // eslint-disable-next-line react/prop-types
     <CheckoutDonateInner {...props} livemode={props.livemode === undefined ? livemode : props.livemode} />
   );
+  // eslint-disable-next-line react/prop-types
   if (props.theme === 'inherit') {
     return content;
   }
+  // eslint-disable-next-line react/prop-types
   if (props.theme && typeof props.theme === 'object') {
+    // eslint-disable-next-line react/prop-types
     return <PaymentThemeProvider theme={props.theme}>{content}</PaymentThemeProvider>;
   }
   return <PaymentThemeProvider>{content}</PaymentThemeProvider>;
 }
-
-CheckoutDonate.defaultProps = {
-  theme: 'default',
-  livemode: undefined,
-  timeout: 5000,
-  mode: 'default',
-  inlineOptions: {
-    button: {
-      text: 'Tip',
-    },
-  },
-};

package/src/checkout/form.tsx

@@ -34,13 +34,13 @@ const fetchCheckoutSession = async (id: string): Promise<CheckoutContext> => {
 
 export default function CheckoutForm({
   id,
-  mode,
-  onPaid,
-  onError,
+  mode = 'inline',
+  onPaid = noop,
+  onError = console.error,
   onChange,
   goBack,
-  extraParams,
-  action,
+  extraParams = {},
+  action = '',
   theme = 'default',
   formType = 'payment',
   ...restProps
@@ -124,12 +124,3 @@ export default function CheckoutForm({
   }
   return <PaymentThemeProvider>{Checkout}</PaymentThemeProvider>;
 }
-
-CheckoutForm.defaultProps = {
-  onPaid: noop,
-  onError: console.error,
-  mode: 'inline',
-  action: '',
-  extraParams: {},
-  formType: 'payment',
-};

package/src/checkout/table.tsx

@@ -91,8 +91,8 @@ function CheckoutTableInner({ id, mode, onPaid, onError, onChange, extraParams,
       return (
         <Stack
           direction="column"
-          alignItems="center"
           sx={{
+            alignItems: 'center',
             overflow: {
               xs: 'auto',
               md: 'hidden',
@@ -122,9 +122,9 @@ function CheckoutTableInner({ id, mode, onPaid, onError, onChange, extraParams,
             }}>
             {!data.livemode && <Livemode sx={{ display: 'flex', marginBottom: '8px', width: 'fit-content', ml: 0 }} />}
             <Typography
-              color="text.primary"
-              fontWeight={600}
               sx={{
+                color: 'text.primary',
+                fontWeight: 600,
                 lineHeight: '32px',
                 fontSize: '24px',
               }}>

package/src/components/blockchain/gas.tsx

@@ -6,8 +6,6 @@ import { fromUnitToToken } from '@ocap/util';
 import { usePaymentContext } from '../../contexts/payment';
 import { getTxLink } from '../../libs/util';
 
-TxGas.defaultProps = {};
-
 export default function TxGas(props: { details: PaymentDetails; method: TPaymentMethod }) {
   const { t } = useLocaleContext();
   const { settings } = usePaymentContext();
@@ -25,7 +23,11 @@ export default function TxGas(props: { details: PaymentDetails; method: TPayment
   }
 
   return (
-    <Typography component="small" color="text.secondary">
+    <Typography
+      component="small"
+      sx={{
+        color: 'text.secondary',
+      }}>
       {t('common.none')}
     </Typography>
   );