@blocklet/payment-react 1.19.12 → 1.19.13

package/es/checkout/donate.js

@@ -81,12 +81,12 @@ export function DonateDetails({ supporters = [], currency, method }) {
           sx: {
             padding: "6px",
             "&:hover": {
-              backgroundColor: (theme) => theme.palette.grey[100],
+              backgroundColor: (theme) => theme.palette.divider,
               transition: "background-color 200ms linear",
               cursor: "pointer"
             },
             borderBottom: "1px solid",
-            borderColor: "grey.100",
+            borderColor: "divider",
             display: "flex",
             justifyContent: "space-between",
             alignItems: "center"
@@ -616,7 +616,7 @@ function CheckoutDonateInner({
             sx: {
               ...!donateSettings.appearance?.button?.variant ? {
                 color: "primary.main",
-                borderColor: "grey.200"
+                borderColor: "divider"
               } : {},
               // @ts-ignore
               ...donateSettings.appearance?.button?.sx || {}
@@ -747,7 +747,7 @@ function CheckoutDonateInner({
           ".MuiDialogContent-root": {
             padding: "16px 24px",
             borderTop: "1px solid",
-            borderColor: "grey.100",
+            borderColor: "divider",
             width: "100%"
           },
           ".ux-dialog_header": {

package/es/components/over-due-invoice-payment.js

@@ -459,7 +459,7 @@ function OverdueInvoicePayment({
                     py: 1,
                     px: 0.5,
                     borderBottom: "1px solid",
-                    borderColor: "grey.200",
+                    borderColor: "divider",
                     "&:hover": {
                       backgroundColor: () => theme.palette.grey[100]
                     },

package/es/components/pricing-table.js

@@ -314,12 +314,12 @@ export default function PricingTable({
                         cursor: "pointer",
                         borderWidth: "1px",
                         borderStyle: "solid",
-                        borderColor: mode === "select" && x.is_selected ? "primary.main" : "grey.100",
+                        borderColor: mode === "select" && x.is_selected ? "primary.main" : "divider",
                         borderRadius: 2,
                         transition: "border-color 0.3s ease 0s, box-shadow 0.3s ease 0s",
                         boxShadow: 2,
                         "&:hover": {
-                          borderColor: mode === "select" && x.is_selected ? "primary.main" : "grey.200",
+                          borderColor: mode === "select" && x.is_selected ? "primary.main" : "divider",
                           boxShadow: 2
                         },
                         width: {

package/es/components/table.js

@@ -60,13 +60,13 @@ const Wrapped = styled(Datatable)`
   }
   table.MuiTable-root {
     outline: 1px solid;
-    outline-color: ${({ theme }) => theme.palette.grey[100]};
+    outline-color: ${({ theme }) => theme.palette.divider};
     border-radius: ${({ theme }) => `${2 * theme.shape.borderRadius}px`};
     overflow: hidden;
   }
   [class*='MUIDataTable-responsiveBase'] {
     outline: 1px solid;
-    outline-color: ${({ theme }) => theme.palette.grey[100]};
+    outline-color: ${({ theme }) => theme.palette.divider};
     border-radius: ${({ theme }) => `${2 * theme.shape.borderRadius}px`};
   }
 

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

@@ -92,7 +92,7 @@ const TransactionsTable = React.memo((props) => {
   }, [data]);
   const columns = [
     {
-      label: t("common.creditAmount"),
+      label: t("common.amount"),
       name: "credit_amount",
       align: "right",
       options: {
@@ -157,7 +157,7 @@ const TransactionsTable = React.memo((props) => {
       }
     ] : [],
     {
-      label: t("admin.creditTransactions.transactionDate"),
+      label: t("common.date"),
       name: "created_at",
       options: {
         customBodyRenderLite: (_, index) => {

package/es/payment/donation-form.js

@@ -557,7 +557,7 @@ export default function DonationForm({
             theme: void 0,
             hideNavMenu: void 0,
             maxWidth: false,
-            sx: { borderBottom: "1px solid", borderColor: "grey.100" }
+            sx: { borderBottom: "1px solid", borderColor: "divider" }
           }
         ) : null,
         /* @__PURE__ */ jsxs(

package/es/payment/form/currency.js

@@ -85,7 +85,7 @@ const Root = styled("section")`
 
   .cko-payment-card-unselect {
     border: 1px solid;
-    border-color: ${({ theme }) => theme.palette.grey[100]};
+    border-color: ${({ theme }) => theme.palette.divider};
     padding: 4px 8px;
     cursor: pointer;
     background: ${({ theme }) => theme.palette.grey[50]};

package/es/payment/index.js

@@ -389,7 +389,7 @@ export default function Payment({
             theme: void 0,
             hideNavMenu: void 0,
             maxWidth: false,
-            sx: { borderBottom: "1px solid", borderColor: "grey.100" }
+            sx: { borderBottom: "1px solid", borderColor: "divider" }
           }
         ) : null,
         /* @__PURE__ */ jsxs(
@@ -570,7 +570,7 @@ export const Root = styled(Box)`
   .product-item {
     border-radius: ${({ theme }) => `${2 * theme.shape.borderRadius}px`};
     border: 1px solid;
-    border-color: ${({ theme }) => theme.palette.grey[100]};
+    border-color: ${({ theme }) => theme.palette.divider};
     .product-item-content {
       padding: 16px;
       background: ${({ theme }) => theme.palette.grey[50]};
@@ -584,6 +584,9 @@ export const Root = styled(Box)`
       border-bottom-left-radius: ${({ theme }) => `${2 * theme.shape.borderRadius}px`};
       border-bottom-right-radius: ${({ theme }) => `${2 * theme.shape.borderRadius}px`};
     }
+    .product-item-content:only-child {
+      border-radius: ${({ theme }) => `${2 * theme.shape.borderRadius}px`};
+    }
   }
 
   @media (max-width: ${({ theme }) => theme.breakpoints.values.md}px) {
@@ -610,7 +613,7 @@ export const Root = styled(Box)`
       height: fit-content;
       flex: none;
       border-top: 1px solid;
-      border-color: ${({ theme }) => theme.palette.grey[100]};
+      border-color: ${({ theme }) => theme.palette.divider};
       &:before {
         display: none;
       }

package/es/payment/product-skeleton.js

@@ -11,7 +11,7 @@ export default function ProductSkeleton({ count }) {
         padding: 4,
         width: 320,
         border: "1px solid",
-        borderColor: "grey.100",
+        borderColor: "divider",
         borderRadius: 1,
         transition: "border-color 0.3s ease 0s, box-shadow 0.3s ease 0s",
         boxShadow: "0 4px 8px rgba(0, 0, 0, 20%)",

package/es/theme/index.js

@@ -77,9 +77,6 @@ export function PaymentThemeProvider({
                 "&.Mui-disabled": {
                   backgroundColor: palette.grey[100]
                 },
-                ".MuiOutlinedInput-notchedOutline": {
-                  borderColor: palette.grey[100]
-                },
                 ".MuiInputBase-input": {
                   fontSize: "14px",
                   minHeight: "1.65em",
@@ -87,9 +84,6 @@ export function PaymentThemeProvider({
                 },
                 "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
                   borderWidth: "1px"
-                },
-                "&.MuiInputBase-root:hover .MuiOutlinedInput-notchedOutline": {
-                  borderColor: `${palette.primary.main}`
                 }
               }
             }
@@ -109,9 +103,9 @@ export function PaymentThemeProvider({
                 height: 32
               },
               outlinedPrimary: {
-                borderColor: palette.grey[100],
+                borderColor: palette.divider,
                 "&:hover": {
-                  borderColor: palette.grey[100]
+                  borderColor: palette.divider
                 }
               }
             }
@@ -214,13 +208,6 @@ export function PaymentThemeProvider({
               }
             }
           },
-          MuiDivider: {
-            styleOverrides: {
-              root: {
-                borderColor: palette.grey[100]
-              }
-            }
-          },
           MuiInputBase: {
             defaultProps: {
               size: "small"

package/lib/checkout/donate.js

@@ -77,12 +77,12 @@ function DonateDetails({
       sx: {
         padding: "6px",
         "&:hover": {
-          backgroundColor: theme => theme.palette.grey[100],
+          backgroundColor: theme => theme.palette.divider,
           transition: "background-color 200ms linear",
           cursor: "pointer"
         },
         borderBottom: "1px solid",
-        borderColor: "grey.100",
+        borderColor: "divider",
         display: "flex",
         justifyContent: "space-between",
         alignItems: "center"
@@ -586,7 +586,7 @@ function CheckoutDonateInner({
       sx: {
         ...(!donateSettings.appearance?.button?.variant ? {
           color: "primary.main",
-          borderColor: "grey.200"
+          borderColor: "divider"
         } : {}),
         // @ts-ignore
         ...(donateSettings.appearance?.button?.sx || {})
@@ -711,7 +711,7 @@ function CheckoutDonateInner({
         ".MuiDialogContent-root": {
           padding: "16px 24px",
           borderTop: "1px solid",
-          borderColor: "grey.100",
+          borderColor: "divider",
           width: "100%"
         },
         ".ux-dialog_header": {

package/lib/components/over-due-invoice-payment.js

@@ -476,7 +476,7 @@ function OverdueInvoicePayment({
               py: 1,
               px: 0.5,
               borderBottom: "1px solid",
-              borderColor: "grey.200",
+              borderColor: "divider",
               "&:hover": {
                 backgroundColor: () => theme.palette.grey[100]
               },

package/lib/components/pricing-table.js

@@ -331,12 +331,12 @@ function PricingTable({
               cursor: "pointer",
               borderWidth: "1px",
               borderStyle: "solid",
-              borderColor: mode === "select" && x.is_selected ? "primary.main" : "grey.100",
+              borderColor: mode === "select" && x.is_selected ? "primary.main" : "divider",
               borderRadius: 2,
               transition: "border-color 0.3s ease 0s, box-shadow 0.3s ease 0s",
               boxShadow: 2,
               "&:hover": {
-                borderColor: mode === "select" && x.is_selected ? "primary.main" : "grey.200",
+                borderColor: mode === "select" && x.is_selected ? "primary.main" : "divider",
                 boxShadow: 2
               },
               width: {

package/lib/components/table.js

@@ -82,7 +82,7 @@ const Wrapped = (0, _system.styled)(_Datatable.default)`
     outline: 1px solid;
     outline-color: ${({
   theme
-}) => theme.palette.grey[100]};
+}) => theme.palette.divider};
     border-radius: ${({
   theme
 }) => `${2 * theme.shape.borderRadius}px`};
@@ -92,7 +92,7 @@ const Wrapped = (0, _system.styled)(_Datatable.default)`
     outline: 1px solid;
     outline-color: ${({
   theme
-}) => theme.palette.grey[100]};
+}) => theme.palette.divider};
     border-radius: ${({
   theme
 }) => `${2 * theme.shape.borderRadius}px`};

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

@@ -108,7 +108,7 @@ const TransactionsTable = _react.default.memo(props => {
     }
   }, [data]);
   const columns = [{
-    label: t("common.creditAmount"),
+    label: t("common.amount"),
     name: "credit_amount",
     align: "right",
     options: {
@@ -184,7 +184,7 @@ const TransactionsTable = _react.default.memo(props => {
       }
     }
   }] : []), {
-    label: t("admin.creditTransactions.transactionDate"),
+    label: t("common.date"),
     name: "created_at",
     options: {
       customBodyRenderLite: (_, index) => {

package/lib/payment/donation-form.js

@@ -551,7 +551,7 @@ function DonationForm({
       maxWidth: false,
       sx: {
         borderBottom: "1px solid",
-        borderColor: "grey.100"
+        borderColor: "divider"
       }
     }) : null, /* @__PURE__ */(0, _jsxRuntime.jsxs)(Root, {
       mode,

package/lib/payment/form/currency.js

@@ -89,7 +89,7 @@ const Root = (0, _system.styled)("section")`
     border: 1px solid;
     border-color: ${({
   theme
-}) => theme.palette.grey[100]};
+}) => theme.palette.divider};
     padding: 4px 8px;
     cursor: pointer;
     background: ${({

package/lib/payment/index.js

@@ -451,7 +451,7 @@ function Payment({
       maxWidth: false,
       sx: {
         borderBottom: "1px solid",
-        borderColor: "grey.100"
+        borderColor: "divider"
       }
     }) : null, /* @__PURE__ */(0, _jsxRuntime.jsxs)(Root, {
       mode,
@@ -642,7 +642,7 @@ const Root = exports.Root = (0, _system.styled)(_material.Box)`
     border: 1px solid;
     border-color: ${({
   theme
-}) => theme.palette.grey[100]};
+}) => theme.palette.divider};
     .product-item-content {
       padding: 16px;
       background: ${({
@@ -666,6 +666,11 @@ const Root = exports.Root = (0, _system.styled)(_material.Box)`
 }) => `${2 * theme.shape.borderRadius}px`};
       border-bottom-right-radius: ${({
   theme
+}) => `${2 * theme.shape.borderRadius}px`};
+    }
+    .product-item-content:only-child {
+      border-radius: ${({
+  theme
 }) => `${2 * theme.shape.borderRadius}px`};
     }
   }
@@ -698,7 +703,7 @@ const Root = exports.Root = (0, _system.styled)(_material.Box)`
       border-top: 1px solid;
       border-color: ${({
   theme
-}) => theme.palette.grey[100]};
+}) => theme.palette.divider};
       &:before {
         display: none;
       }

package/lib/payment/product-skeleton.js

@@ -19,7 +19,7 @@ function ProductSkeleton({
         padding: 4,
         width: 320,
         border: "1px solid",
-        borderColor: "grey.100",
+        borderColor: "divider",
         borderRadius: 1,
         transition: "border-color 0.3s ease 0s, box-shadow 0.3s ease 0s",
         boxShadow: "0 4px 8px rgba(0, 0, 0, 20%)",

package/lib/theme/index.js

@@ -93,9 +93,6 @@ function PaymentThemeProvider({
               "&.Mui-disabled": {
                 backgroundColor: palette.grey[100]
               },
-              ".MuiOutlinedInput-notchedOutline": {
-                borderColor: palette.grey[100]
-              },
               ".MuiInputBase-input": {
                 fontSize: "14px",
                 minHeight: "1.65em",
@@ -103,9 +100,6 @@ function PaymentThemeProvider({
               },
               "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
                 borderWidth: "1px"
-              },
-              "&.MuiInputBase-root:hover .MuiOutlinedInput-notchedOutline": {
-                borderColor: `${palette.primary.main}`
               }
             }
           }
@@ -125,9 +119,9 @@ function PaymentThemeProvider({
               height: 32
             },
             outlinedPrimary: {
-              borderColor: palette.grey[100],
+              borderColor: palette.divider,
               "&:hover": {
-                borderColor: palette.grey[100]
+                borderColor: palette.divider
               }
             }
           }
@@ -230,13 +224,6 @@ function PaymentThemeProvider({
             }
           }
         },
-        MuiDivider: {
-          styleOverrides: {
-            root: {
-              borderColor: palette.grey[100]
-            }
-          }
-        },
         MuiInputBase: {
           defaultProps: {
             size: "small"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.19.12",
+  "version": "1.19.13",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -54,11 +54,11 @@
     }
   },
   "dependencies": {
-    "@arcblock/did-connect": "^3.0.39",
-    "@arcblock/ux": "^3.0.39",
+    "@arcblock/did-connect": "^3.0.41",
+    "@arcblock/ux": "^3.0.41",
     "@arcblock/ws": "^1.21.1",
-    "@blocklet/theme": "^3.0.39",
-    "@blocklet/ui-react": "^3.0.39",
+    "@blocklet/theme": "^3.0.41",
+    "@blocklet/ui-react": "^3.0.41",
     "@mui/icons-material": "^7.1.2",
     "@mui/lab": "7.0.0-beta.14",
     "@mui/material": "^7.1.2",
@@ -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.12",
+    "@blocklet/payment-types": "1.19.13",
     "@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": "2496138990f95bb979125127a06c5e9d731877c9"
+  "gitHead": "07c6878eb9d455f3898adfda7d07ca9e321e866c"
 }

package/src/checkout/donate.tsx

@@ -165,12 +165,12 @@ export function DonateDetails({ supporters = [], currency, method }: DonateHisto
           sx={{
             padding: '6px',
             '&:hover': {
-              backgroundColor: (theme) => theme.palette.grey[100],
+              backgroundColor: (theme) => theme.palette.divider,
               transition: 'background-color 200ms linear',
               cursor: 'pointer',
             },
             borderBottom: '1px solid',
-            borderColor: 'grey.100',
+            borderColor: 'divider',
             display: 'flex',
             justifyContent: 'space-between',
             alignItems: 'center',
@@ -671,7 +671,7 @@ function CheckoutDonateInner({
           ...(!donateSettings.appearance?.button?.variant
             ? {
                 color: 'primary.main',
-                borderColor: 'grey.200',
+                borderColor: 'divider',
               }
             : {}),
           // @ts-ignore
@@ -814,7 +814,7 @@ function CheckoutDonateInner({
             '.MuiDialogContent-root': {
               padding: '16px 24px',
               borderTop: '1px solid',
-              borderColor: 'grey.100',
+              borderColor: 'divider',
               width: '100%',
             },
             '.ux-dialog_header': {

package/src/components/over-due-invoice-payment.tsx

@@ -565,7 +565,7 @@ function OverdueInvoicePayment({
                       py: 1,
                       px: 0.5,
                       borderBottom: '1px solid',
-                      borderColor: 'grey.200',
+                      borderColor: 'divider',
 
                       '&:hover': {
                         backgroundColor: () => theme.palette.grey[100],

package/src/components/pricing-table.tsx

@@ -350,12 +350,12 @@ export default function PricingTable({
                   cursor: 'pointer',
                   borderWidth: '1px',
                   borderStyle: 'solid',
-                  borderColor: mode === 'select' && x.is_selected ? 'primary.main' : 'grey.100',
+                  borderColor: mode === 'select' && x.is_selected ? 'primary.main' : 'divider',
                   borderRadius: 2,
                   transition: 'border-color 0.3s ease 0s, box-shadow 0.3s ease 0s',
                   boxShadow: 2,
                   '&:hover': {
-                    borderColor: mode === 'select' && x.is_selected ? 'primary.main' : 'grey.200',
+                    borderColor: mode === 'select' && x.is_selected ? 'primary.main' : 'divider',
                     boxShadow: 2,
                   },
                   width: {

package/src/components/table.tsx

@@ -80,13 +80,13 @@ const Wrapped = styled(Datatable)`
   }
   table.MuiTable-root {
     outline: 1px solid;
-    outline-color: ${({ theme }) => theme.palette.grey[100]};
+    outline-color: ${({ theme }) => theme.palette.divider};
     border-radius: ${({ theme }) => `${2 * (theme.shape.borderRadius as number)}px`};
     overflow: hidden;
   }
   [class*='MUIDataTable-responsiveBase'] {
     outline: 1px solid;
-    outline-color: ${({ theme }) => theme.palette.grey[100]};
+    outline-color: ${({ theme }) => theme.palette.divider};
     border-radius: ${({ theme }) => `${2 * (theme.shape.borderRadius as number)}px`};
   }
 

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

@@ -138,7 +138,7 @@ const TransactionsTable = React.memo((props: Props) => {
 
   const columns = [
     {
-      label: t('common.creditAmount'),
+      label: t('common.amount'),
       name: 'credit_amount',
       align: 'right',
       options: {
@@ -214,7 +214,7 @@ const TransactionsTable = React.memo((props: Props) => {
         ]
       : []),
     {
-      label: t('admin.creditTransactions.transactionDate'),
+      label: t('common.date'),
       name: 'created_at',
       options: {
         customBodyRenderLite: (_: string, index: number) => {

package/src/payment/donation-form.tsx

@@ -573,7 +573,7 @@ export default function DonationForm({
           theme={undefined}
           hideNavMenu={undefined}
           maxWidth={false}
-          sx={{ borderBottom: '1px solid', borderColor: 'grey.100' }}
+          sx={{ borderBottom: '1px solid', borderColor: 'divider' }}
         />
       ) : null}
       <Root

package/src/payment/form/currency.tsx

@@ -77,7 +77,7 @@ const Root = styled<any>('section')`
 
   .cko-payment-card-unselect {
     border: 1px solid;
-    border-color: ${({ theme }) => theme.palette.grey[100]};
+    border-color: ${({ theme }) => theme.palette.divider};
     padding: 4px 8px;
     cursor: pointer;
     background: ${({ theme }) => theme.palette.grey[50]};

package/src/payment/index.tsx

@@ -455,7 +455,7 @@ export default function Payment({
           theme={undefined}
           hideNavMenu={undefined}
           maxWidth={false}
-          sx={{ borderBottom: '1px solid', borderColor: 'grey.100' }}
+          sx={{ borderBottom: '1px solid', borderColor: 'divider' }}
         />
       ) : null}
       <Root
@@ -637,7 +637,7 @@ export const Root: React.FC<RootProps> = styled(Box)<RootProps>`
   .product-item {
     border-radius: ${({ theme }) => `${2 * (theme.shape.borderRadius as number)}px`};
     border: 1px solid;
-    border-color: ${({ theme }) => theme.palette.grey[100]};
+    border-color: ${({ theme }) => theme.palette.divider};
     .product-item-content {
       padding: 16px;
       background: ${({ theme }) => theme.palette.grey[50]};
@@ -651,6 +651,9 @@ export const Root: React.FC<RootProps> = styled(Box)<RootProps>`
       border-bottom-left-radius: ${({ theme }) => `${2 * (theme.shape.borderRadius as number)}px`};
       border-bottom-right-radius: ${({ theme }) => `${2 * (theme.shape.borderRadius as number)}px`};
     }
+    .product-item-content:only-child {
+      border-radius: ${({ theme }) => `${2 * (theme.shape.borderRadius as number)}px`};
+    }
   }
 
   @media (max-width: ${({ theme }) => theme.breakpoints.values.md}px) {
@@ -677,7 +680,7 @@ export const Root: React.FC<RootProps> = styled(Box)<RootProps>`
       height: fit-content;
       flex: none;
       border-top: 1px solid;
-      border-color: ${({ theme }) => theme.palette.grey[100]};
+      border-color: ${({ theme }) => theme.palette.divider};
       &:before {
         display: none;
       }

package/src/payment/product-skeleton.tsx

@@ -11,7 +11,7 @@ export default function ProductSkeleton({ count }: { count: number }) {
           padding: 4,
           width: 320,
           border: '1px solid',
-          borderColor: 'grey.100',
+          borderColor: 'divider',
           borderRadius: 1,
           transition: 'border-color 0.3s ease 0s, box-shadow 0.3s ease 0s',
           boxShadow: '0 4px 8px rgba(0, 0, 0, 20%)',

package/src/theme/index.tsx

@@ -91,9 +91,6 @@ export function PaymentThemeProvider({
                 '&.Mui-disabled': {
                   backgroundColor: palette.grey[100],
                 },
-                '.MuiOutlinedInput-notchedOutline': {
-                  borderColor: palette.grey[100],
-                },
                 '.MuiInputBase-input': {
                   fontSize: '14px',
                   minHeight: '1.65em',
@@ -102,9 +99,6 @@ export function PaymentThemeProvider({
                 '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
                   borderWidth: '1px',
                 },
-                '&.MuiInputBase-root:hover .MuiOutlinedInput-notchedOutline': {
-                  borderColor: `${palette.primary.main}`,
-                },
               },
             },
           },
@@ -123,9 +117,9 @@ export function PaymentThemeProvider({
                 height: 32,
               },
               outlinedPrimary: {
-                borderColor: palette.grey[100],
+                borderColor: palette.divider,
                 '&:hover': {
-                  borderColor: palette.grey[100],
+                  borderColor: palette.divider,
                 },
               },
             },
@@ -227,13 +221,6 @@ export function PaymentThemeProvider({
               },
             },
           },
-          MuiDivider: {
-            styleOverrides: {
-              root: {
-                borderColor: palette.grey[100],
-              },
-            },
-          },
           MuiInputBase: {
             defaultProps: {
               size: 'small',