@arcblock/ux 2.13.20 → 2.13.23

package/lib/Config/config-provider.d.ts

@@ -1,34 +1,18 @@
-import { ReactNode } from 'react';
-import { type PaletteMode } from '@mui/material';
+import { type ReactNode } from 'react';
 import { LocaleProviderProps } from '../Locale/context';
-import { ThemeProviderProps } from '../Theme/theme-provider';
-import { type UserThemeOptions, type ThemeConfig } from '../Theme';
-type Prefer = 'light' | 'dark' | 'system';
-export interface ConfigContextType {
-    mode: PaletteMode;
-    prefer?: Prefer;
-    themeOptions: UserThemeOptions;
-    toggleMode: () => void;
-}
-export interface ConfigProviderProps extends Omit<LocaleProviderProps, 'translations'>, Omit<ThemeProviderProps, 'theme'> {
+import { type ThemeProviderProps } from '../Theme/theme-provider';
+export interface ConfigProviderProps extends Omit<LocaleProviderProps, 'translations'>, ThemeProviderProps {
     children: ReactNode;
-    prefer?: Prefer;
-    theme?: UserThemeOptions | ((config: ThemeConfig) => UserThemeOptions);
-    disableBlockletTheme?: boolean;
     translations?: Record<string, any>;
 }
 /**
  * 集中化配置
  */
-export declare function ConfigProvider({ children, prefer, theme: themeOptions, disableBlockletTheme, injectFirst, locale, fallbackLocale, translations, languages, onLoadingTranslation, }: ConfigProviderProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace ConfigProvider {
-    var useConfig: typeof import("./config-provider").useConfig;
-}
+export declare function ConfigProvider({ children, theme, injectFirst, darkSchemeClass, prefer, disableBlockletTheme, enableColorScheme, locale, fallbackLocale, translations, languages, onLoadingTranslation, }: ConfigProviderProps): import("react/jsx-runtime").JSX.Element;
 export declare function useConfig(): {
-    mode: PaletteMode;
-    prefer?: Prefer;
-    themeOptions: UserThemeOptions;
+    mode: import("@mui/material").PaletteMode;
     toggleMode: () => void;
+    prefer?: import("../Theme").Prefer;
     locale: import("../type").Locale;
     changeLocale: (locale: import("../type").Locale) => void;
     t: (key: string, data?: Record<string, any>) => string;
@@ -38,4 +22,3 @@ export declare function useConfig(): {
     }[];
     theme: import("@mui/material").Theme;
 };
-export {};

package/lib/Config/config-provider.js

@@ -1,111 +1,50 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useContext, useMemo, useState, useCallback, useEffect } from 'react';
-import { BLOCKLET_THEME_PREFER_KEY } from '@blocklet/theme';
-import set from 'lodash/set';
-import { ThemeProvider as EmotionThemeProvider } from '@emotion/react';
 import { LocaleProvider, useLocaleContext } from '../Locale/context';
-import ThemeProvider from '../Theme/theme-provider';
-import { createTheme, getDefaultThemePrefer, lazyThemeConfig, useTheme } from '../Theme';
-const resolveMode = prefer => {
-  if (prefer) {
-    if (prefer === 'system') {
-      // 取系统默认
-      return getDefaultThemePrefer({
-        theme: {
-          prefer: 'system'
-        }
-      });
-    }
-    return prefer;
-  }
-  return getDefaultThemePrefer();
-};
-const ConfigContext = /*#__PURE__*/createContext({});
+import ThemeProvider, { useColorScheme } from '../Theme/theme-provider';
+import { useTheme } from '../Theme';
 /**
  * 集中化配置
  */
 export function ConfigProvider({
   children,
-  // theme config
+  // theme provider
+  theme,
+  injectFirst,
+  darkSchemeClass,
   prefer,
-  theme: themeOptions,
   disableBlockletTheme = false,
-  injectFirst,
-  // locale config
+  enableColorScheme,
+  // locale provider
   locale,
   fallbackLocale,
   translations = {},
   languages,
   onLoadingTranslation
 }) {
-  const [mode, setMode] = useState(() => resolveMode(prefer));
-  const _themeOptions = useMemo(() => {
-    let result = {};
-    const getThemeConfig = lazyThemeConfig(mode);
-    if (themeOptions) {
-      if (typeof themeOptions === 'function') {
-        result = themeOptions(getThemeConfig());
-      } else {
-        result = {
-          ...themeOptions
-        };
-      }
-    }
-    set(result, 'palette.mode', mode);
-    set(result, 'mode', mode);
-    return result;
-  }, [mode, themeOptions]);
-  const theme = useMemo(() => {
-    return createTheme({
-      ..._themeOptions,
-      disableBlockletTheme
-    });
-  }, [_themeOptions, disableBlockletTheme]);
-  const toggleMode = useCallback(() => {
-    const newMode = mode === 'light' ? 'dark' : 'light';
-    setMode(newMode);
-    localStorage.setItem(BLOCKLET_THEME_PREFER_KEY, newMode);
-  }, [mode, setMode]);
-  const config = useMemo(() => ({
-    mode,
-    themeOptions: _themeOptions,
-    toggleMode,
-    prefer
-  }), [mode, prefer, _themeOptions, toggleMode]);
-
-  // change prefer manually
-  useEffect(() => {
-    if (prefer) {
-      setMode(resolveMode(prefer));
-    }
-  }, [prefer, setMode]);
-  return /*#__PURE__*/_jsx(ConfigContext.Provider, {
-    value: config,
+  return /*#__PURE__*/_jsx(ThemeProvider, {
+    theme: theme,
+    injectFirst: injectFirst,
+    darkSchemeClass: darkSchemeClass,
+    prefer: prefer,
+    disableBlockletTheme: disableBlockletTheme,
+    enableColorScheme: enableColorScheme,
     children: /*#__PURE__*/_jsx(LocaleProvider, {
       locale: locale,
       fallbackLocale: fallbackLocale,
       translations: translations,
       onLoadingTranslation: onLoadingTranslation,
       languages: languages,
-      children: /*#__PURE__*/_jsx(ThemeProvider, {
-        theme: theme,
-        injectFirst: injectFirst,
-        children: /*#__PURE__*/_jsx(EmotionThemeProvider, {
-          theme: theme,
-          children: children
-        })
-      })
+      children: children
     })
   });
 }
 export function useConfig() {
   const theme = useTheme();
   const localeCtx = useLocaleContext();
-  const configCtx = useContext(ConfigContext);
+  const colorSchemeCtx = useColorScheme();
   return {
     theme,
     ...localeCtx,
-    ...configCtx
+    ...colorSchemeCtx
   };
-}
-ConfigProvider.useConfig = useConfig;
+}

package/lib/Config/theme-mode-toggle.js

@@ -2,13 +2,13 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { IconButton } from '@mui/material';
 import LightModeOutlinedIcon from '@mui/icons-material/LightModeOutlined';
 import Brightness2OutlinedIcon from '@mui/icons-material/Brightness2Outlined';
-import { useConfig } from './config-provider';
+import { useColorScheme } from '../Theme/theme-provider';
 export default function ThemeModeToggle() {
   const {
     mode,
     toggleMode,
     prefer
-  } = useConfig();
+  } = useColorScheme();
   if (!toggleMode) {
     if (process.env.NODE_ENV !== 'production') {
       console.warn('Please ensure the component is wrapped with ConfigProvider context');

package/lib/DIDConnect/did-connect-container.d.ts

@@ -0,0 +1,23 @@
+import { SxProps } from '@mui/material';
+export default function DIDConnectContainer({ open, popup, hideCloseButton, children, appPid, slotProps, onClose, }: {
+    popup?: boolean;
+    open?: boolean;
+    hideCloseButton?: boolean;
+    children: React.ReactNode;
+    onClose?: () => void;
+    appPid?: string;
+    slotProps?: {
+        footer?: {
+            sx?: SxProps;
+        };
+        containerPage?: {
+            sx?: SxProps;
+        };
+        containerDrawer?: {
+            sx?: SxProps;
+        };
+        containerDialog?: {
+            sx?: SxProps;
+        };
+    };
+}): import("react/jsx-runtime").JSX.Element;

package/lib/DIDConnect/did-connect-container.js

@@ -0,0 +1,270 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, memo, useRef, createElement as _createElement } from 'react';
+import { useBrowser } from '@arcblock/react-hooks';
+import { Backdrop, Box, Dialog, DialogContent, Drawer, SwipeableDrawer, useMediaQuery } from '@mui/material';
+import { useCreation, useDebounce } from 'ahooks';
+import colorConvert from 'color-convert';
+import { getDIDMotifInfo } from '@arcblock/did-motif';
+import noop from 'lodash/noop';
+import { useTheme } from '../Theme';
+import { mergeSx } from '../Util/style';
+import { getDIDColor, hexToRgba, isEthereumDid } from '../Util';
+import DIDConnectFooter from './did-connect-footer';
+const BackdropWrap = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((backdropProps, ref) => {
+  return /*#__PURE__*/_createElement(Backdrop, {
+    open: true,
+    ref: ref,
+    style: {
+      backgroundColor: 'rgba(0, 0, 0, 0.6)',
+      backdropFilter: 'blur(3px)',
+      touchAction: 'none'
+    },
+    ...backdropProps,
+    key: "background"
+  });
+}));
+export default function DIDConnectContainer({
+  open = false,
+  popup = false,
+  hideCloseButton = false,
+  children,
+  appPid,
+  slotProps,
+  onClose = noop
+}) {
+  const color = useCreation(() => {
+    const did = appPid || window.blocklet.appPid;
+    const isEthDid = isEthereumDid(did);
+    const didMotifInfo = isEthDid ? undefined : getDIDMotifInfo(did);
+    if (isEthDid) {
+      return getDIDColor(did);
+    }
+    return didMotifInfo.color;
+  }, []);
+  const drawerDragger = useRef(null);
+  const browser = useBrowser();
+  // 屏宽小于 sm 且在 mobile 设备中全屏显示 dialog (PC 端屏宽小于 sm 的情况正常弹窗, 不全屏显示)
+  const matchSm = useMediaQuery('(max-width:640px)');
+  let openVariant = 'page';
+  if (popup) {
+    openVariant = 'dialog';
+    if (matchSm && browser.mobile.any) {
+      openVariant = 'drawer';
+    }
+  }
+  const theme = useTheme();
+  const leavingScreenDelay = theme?.transitions?.duration?.leavingScreen || 500; // 默认值是 195
+  const debouncedOpen = useDebounce(open, {
+    wait: leavingScreenDelay
+  });
+
+  // eslint-disable-next-line no-unused-vars
+  const handleOnClose = (e, reason) => {
+    if (['backdropClick', 'escapeKeyDown'].includes(reason)) return;
+    onClose();
+  };
+  const showModal = debouncedOpen || open;
+  const DrawerComponent = hideCloseButton ? Drawer : SwipeableDrawer;
+  const hslColor = colorConvert.hex.hsl(color);
+  const [h, s, l] = hslColor;
+  const percentageList = [0, 30, 60, 30, 0, 30, 60, 30];
+  const maxPercentage = Math.max(...percentageList);
+  const minPercentage = Math.min(...percentageList);
+  let useAlpha = false;
+  if (l * (100 + maxPercentage) / 100 > 100 || l * (100 + minPercentage) / 100 < 0) {
+    // 超出范围，使用 alpha 通道变化
+    useAlpha = true;
+  }
+  const colorList = percentageList.map(percentageItem => {
+    let finalL = l * (100 + percentageItem) / 100;
+    let finalAlpha = 0.6;
+    if (useAlpha) {
+      finalAlpha = 0.5 * (100 + percentageItem) / 100;
+    } else {
+      finalL = l * (100 + percentageItem) / 100;
+    }
+    return `hsla(${h}, ${s}%, ${finalL}%, ${finalAlpha})`;
+  });
+  const background = `linear-gradient(45deg, ${colorList.join(', ')})`;
+  const colorListGlow = percentageList.map(percentageItem => {
+    let finalL = l * (100 + percentageItem) / 100;
+    let finalAlpha = 0.2;
+    if (useAlpha) {
+      finalAlpha = 0.3 * (100 + percentageItem) / 100;
+    } else {
+      finalL = l * (100 + percentageItem) / 100;
+    }
+    return `hsla(${h}, ${s}%, ${finalL}%, ${finalAlpha})`;
+  });
+  const backgroundGlow = `linear-gradient(45deg, ${colorListGlow.join(', ')})`;
+  const glowStyle = {
+    overflow: 'visible',
+    '&::before, &::after': {
+      content: '""',
+      position: 'absolute',
+      top: '-3px',
+      right: '-3px',
+      bottom: '-3px',
+      left: '-3px',
+      background,
+      backgroundSize: '300% 300%',
+      backgroundRepeat: 'no-repeat',
+      animation: 'glowRotate 10s linear infinite',
+      borderRadius: '14px !important',
+      zIndex: 0
+    },
+    '&::after': {
+      background: backgroundGlow,
+      filter: 'blur(15px)'
+    },
+    '@keyframes glowRotate': {
+      '0%': {
+        backgroundPosition: '0 0'
+      },
+      '50%': {
+        backgroundPosition: '100% 0'
+      },
+      '100%': {
+        backgroundPosition: '0 0'
+      }
+    }
+  };
+  if (openVariant === 'page') {
+    return /*#__PURE__*/_jsx(Box, {
+      className: "did-connect__container-page",
+      sx: mergeSx({
+        borderRadius: 1,
+        position: 'relative',
+        zIndex: 1,
+        backgroundColor: 'background.default'
+      }, glowStyle, slotProps?.containerPage?.sx),
+      children: /*#__PURE__*/_jsxs(Box, {
+        sx: {
+          border: `1px solid ${hexToRgba(color, 0.1)}`,
+          m: '-1px',
+          position: 'relative',
+          borderRadius: '12px',
+          zIndex: 2,
+          overflow: 'hidden',
+          backgroundColor: 'background.default'
+        },
+        children: [children, /*#__PURE__*/_jsx(DIDConnectFooter, {
+          currentAppColor: color,
+          sx: mergeSx({
+            mx: 0
+          }, slotProps?.footer?.sx)
+        })]
+      })
+    });
+  }
+  if (openVariant === 'drawer') {
+    return /*#__PURE__*/_jsxs(DrawerComponent, {
+      className: "did-connect__container-drawer",
+      disableSwipeToOpen: true,
+      open: open,
+      anchor: "bottom",
+      drawerDragger: drawerDragger.current
+      // @ts-ignore
+      ,
+      onClose: handleOnClose,
+      slots: {
+        backdrop: BackdropWrap
+      },
+      PaperProps: {
+        sx: mergeSx({
+          backgroundColor: 'background.default',
+          borderRadius: 3,
+          // 保持跟 DID Wallet 一致
+          borderBottomLeftRadius: 0,
+          borderBottomRightRadius: 0,
+          p: '2px',
+          animation: 'glowBreathe 7s linear infinite',
+          '.did-connect__root': {
+            backgroundColor: 'transparent'
+          },
+          overflow: 'hidden',
+          '@keyframes glowBreathe': {
+            '0%, 100%': {
+              boxShadow: `
+                    inset 0 0 7px ${hexToRgba(color, 0.3)},
+                    inset 0 0 12px ${hexToRgba(color, 0.3)}`
+            },
+            '50%': {
+              boxShadow: `
+                    inset 0 0 18px ${hexToRgba(color, 0.7)},
+                    inset 0 0 24px ${hexToRgba(color, 0.5)}`
+            }
+          }
+        }, slotProps?.containerDrawer?.sx)
+      },
+      children: [hideCloseButton ? null : /*#__PURE__*/_jsx(Box, {
+        ref: drawerDragger,
+        sx: {
+          px: 1,
+          pt: 2,
+          m: 'auto',
+          mt: -1,
+          mb: -2,
+          zIndex: 2
+        },
+        children: /*#__PURE__*/_jsx(Box, {
+          sx: {
+            width: '48px',
+            height: '4px',
+            borderRadius: '100vw',
+            backgroundColor: 'rgba(0, 0, 0, 0.2)'
+          }
+        })
+      }), /*#__PURE__*/_jsxs(Box, {
+        sx: {
+          touchAction: 'none',
+          maxWidth: '100%',
+          width: 500,
+          height: 'auto',
+          backgroundColor: 'background.default'
+        },
+        children: [showModal ? children : null, /*#__PURE__*/_jsx(DIDConnectFooter, {
+          currentAppColor: color,
+          sx: mergeSx({
+            mx: 0
+          }, slotProps?.footer?.sx)
+        })]
+      })]
+    });
+  }
+  return /*#__PURE__*/_jsx(Dialog, {
+    open: open,
+    slots: {
+      backdrop: BackdropWrap
+    },
+    className: "did-connect__container-dialog",
+    onClose: handleOnClose,
+    PaperProps: {
+      sx: mergeSx({
+        // 避免样式被 server 中的定义覆盖
+        '&.MuiPaper-rounded': {
+          borderRadius: '12px !important'
+        },
+        position: 'relative',
+        backgroundColor: 'background.default'
+      }, glowStyle, slotProps?.containerDialog?.sx)
+    },
+    children: /*#__PURE__*/_jsxs(DialogContent, {
+      sx: {
+        maxWidth: 'calc(100vw - 18px)',
+        maxHeight: 'calc(100vh - 18px)',
+        p: '0px !important',
+        height: 'auto',
+        borderRadius: '12px !important',
+        zIndex: 1,
+        backgroundColor: 'background.default'
+      },
+      children: [showModal ? children : null, /*#__PURE__*/_jsx(DIDConnectFooter, {
+        currentAppColor: color,
+        sx: mergeSx({
+          mx: 0
+        }, slotProps?.footer?.sx)
+      })]
+    })
+  });
+}

package/lib/DIDConnect/did-connect-footer.d.ts

@@ -1,4 +1,6 @@
-export default function DIDConnectFooter({ currentAppInfo, currentAppColor, }: {
+import { SxProps } from '@mui/material';
+export default function DIDConnectFooter({ currentAppInfo, currentAppColor, sx, }: {
     currentAppInfo?: any;
     currentAppColor?: string;
+    sx?: SxProps;
 }): import("react/jsx-runtime").JSX.Element;

package/lib/DIDConnect/did-connect-footer.js

@@ -4,13 +4,15 @@ import PoweredBy from './powered-by';
 import AppInfoItem from './app-info-item';
 import AppIcon from './app-icon';
 import { getDIDColor, hexToRgba } from '../Util';
+import { mergeSx } from '../Util/style';
 export default function DIDConnectFooter({
   currentAppInfo = globalThis.blocklet,
-  currentAppColor = globalThis.blocklet?.appPid ? getDIDColor(globalThis.blocklet?.appPid) : '#fff'
+  currentAppColor = globalThis.blocklet?.appPid ? getDIDColor(globalThis.blocklet?.appPid) : '#fff',
+  sx
 }) {
   const isSmallView = useMediaQuery('(max-width:640px)');
   return /*#__PURE__*/_jsxs(Box, {
-    sx: {
+    sx: mergeSx({
       display: 'flex',
       justifyContent: 'space-between',
       alignItems: 'center',
@@ -29,7 +31,7 @@ export default function DIDConnectFooter({
       '-ms-overflow-style': 'none',
       // 隐藏滚动条 (IE 浏览器)
       'scrollbar-width': 'none' // 隐藏滚动条 (Firefox)
-    },
+    }, sx),
     className: "did-connect__footer",
     children: [/*#__PURE__*/_jsx(AppInfoItem, {
       appInfo: currentAppInfo,

package/lib/DIDConnect/index.d.ts

@@ -5,3 +5,4 @@ export { default as PoweredBy } from './powered-by';
 export { default as withContainer } from './with-container';
 export { default as withUxTheme } from './with-ux-theme';
 export { default as DIDConnectLogo } from './did-connect-logo';
+export { default as DIDConnectContainer } from './did-connect-container';

package/lib/DIDConnect/index.js

@@ -4,4 +4,5 @@ export { default as AppIcon } from './app-icon';
 export { default as PoweredBy } from './powered-by';
 export { default as withContainer } from './with-container';
 export { default as withUxTheme } from './with-ux-theme';
-export { default as DIDConnectLogo } from './did-connect-logo';
+export { default as DIDConnectLogo } from './did-connect-logo';
+export { default as DIDConnectContainer } from './did-connect-container';

package/lib/NavMenu/products.js

@@ -3,7 +3,7 @@ import React from "react";
 import { useRef } from 'react';
 import { Link } from 'react-router-dom';
 import { useCreation, useMemoizedFn } from 'ahooks';
-import { Box, Grid } from '@mui/material';
+import { Box, Grid, useTheme } from '@mui/material';
 import SubItemGroup from './sub-item-group';
 import { Item } from './nav-menu';
 import { styled } from '../Theme';
@@ -1273,6 +1273,7 @@ DidConnectSvg.defaultProps = {
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg"
 };
+import PaymentKitPng from './images/payment-kit.png';
 const translations = {
   en: {
     groups: {
@@ -1300,6 +1301,9 @@ const translations = {
       alKit: {
         description: 'Boost apps with AI'
       },
+      paymentKit: {
+        description: 'Effortless Crypto & Card Payments'
+      },
       blockletStore: {
         description: 'Discover & deploy apps'
       },
@@ -1364,6 +1368,9 @@ const translations = {
       alKit: {
         description: 'AI 赋能应用'
       },
+      paymentKit: {
+        description: '便捷的加密货币和银行卡支付'
+      },
       blockletStore: {
         description: '发现和部署应用程序'
       },
@@ -1437,6 +1444,9 @@ export default function Products({
   const {
     mode
   } = useNavMenuContext();
+  const {
+    palette
+  } = useTheme();
   const wrapperRef = useRef(null);
   const {
     locale = 'en'
@@ -1472,7 +1482,11 @@ export default function Products({
           children: "AIGNE"
         }),
         description: t('products.aigne.description'),
-        icon: /*#__PURE__*/_jsx(AigneSvg, {})
+        icon: /*#__PURE__*/_jsx(AigneSvg, {
+          style: {
+            filter: palette.mode === 'dark' ? 'invert(1)' : 'none'
+          }
+        })
       }, {
         label: /*#__PURE__*/_jsx(Link, {
           to: `https://www.aistro.io/${locale}`,
@@ -1504,6 +1518,18 @@ export default function Products({
         }),
         description: t('products.alKit.description'),
         icon: /*#__PURE__*/_jsx(AIKitSvg, {})
+      }, {
+        label: /*#__PURE__*/_jsx(Link, {
+          to: `https://www.blocklet.io/${locale}`,
+          target: "_blank",
+          rel: "noreferrer noopener",
+          children: "Payment Kit"
+        }),
+        description: t('products.paymentKit.description'),
+        icon: /*#__PURE__*/_jsx("img", {
+          src: PaymentKitPng,
+          alt: "Payment Kit"
+        })
       }], [{
         label: /*#__PURE__*/_jsx(Link, {
           to: `https://store.blocklet.dev/?locale=${locale}`,
@@ -1555,7 +1581,7 @@ export default function Products({
         icon: /*#__PURE__*/_jsx(AbtNetworkSvg, {})
       }], [{
         label: /*#__PURE__*/_jsx(Link, {
-          to: `https://www.arcblock.io/content/collections/${locale}/blocklet-server`,
+          to: `https://www.blocklet.io/${locale}/blocklet-server`,
           target: "_blank",
           rel: "noreferrer noopener",
           children: "Blocklet Server"
@@ -1622,7 +1648,7 @@ export default function Products({
         icon: /*#__PURE__*/_jsx(DidConnectSvg, {})
       }]]
     }];
-  }, [t, locale]);
+  }, [t, locale, palette]);
   return /*#__PURE__*/_jsx(Wrapper, {
     ref: wrapperRef,
     className: `is-${mode} ${className}`,

package/lib/NavMenu/style.js

@@ -126,7 +126,8 @@ export const NavMenuItem = styled('li', {
       width: '32px',
       height: '32px',
       marginRight: '16px',
-      border: '1px solid #eff1f5',
+      border: '1px solid',
+      borderColor: theme.palette.grey[200],
       borderRadius: '4px',
       color: theme.palette.grey[500]
     },

package/lib/PhoneInput/index.js

@@ -178,7 +178,8 @@ export default function PhoneInput({
 
   // 预览模式
   if (preview) {
-    const isValid = phone && validatePhoneNumber(phone, country);
+    const phoneWithCode = addCountryCodeToPhone(phone, getDialCodeByCountry(country));
+    const isValid = phone && validatePhoneNumber(phoneWithCode, country);
     const canDial = allowDial && isValid;
     return /*#__PURE__*/_jsxs(Box, {
       display: "flex",

package/lib/SessionUser/components/quick-login-item.js

@@ -21,18 +21,18 @@ export default function QuickLoginItem({
       borderRadius: 1,
       p: 2,
       transition: 'background-color 0.5s',
+      bgcolor: 'background.paper',
       '&:hover, &:active': {
-        backgroundColor: 'grey.100'
+        backgroundColor: 'action.hover'
       },
       display: 'flex',
       justifyContent: 'space-between',
       alignItems: 'center',
       cursor: 'pointer',
       '&:hover': {
-        backgroundColor: 'grey.200'
+        backgroundColor: 'action.hover'
       },
-      width: '100%',
-      backgroundColor: 'white'
+      width: '100%'
     },
     onClick: onClick,
     children: [/*#__PURE__*/_jsxs(Box, {