@arcblock/ux 2.13.6 → 2.13.8

package/lib/UserCard/Content/basic.js

@@ -1,13 +1,25 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Typography, Box } from '@mui/material';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Typography, Box, Grid } from '@mui/material';
 import { useCreation } from 'ahooks';
 import styled from '@emotion/styled';
+import isArray from 'lodash/isArray';
+import { Icon as IconifyIcon } from '@iconify/react';
+import infoCircleIcon from '@iconify-icons/tabler/info-circle';
 import LinkIcon from '@arcblock/icons/lib/Link';
+import PhoneIcon from '@arcblock/icons/lib/Phone';
 import LocationIcon from '@arcblock/icons/lib/Location';
 import EmailIcon from '@arcblock/icons/lib/Email';
 import TimezoneIcon from '@arcblock/icons/lib/Timezone';
-import { withoutProtocol } from 'ufo';
+import { joinURL, withoutProtocol } from 'ufo';
+import { Fragment, useState, useMemo, useCallback } from 'react';
 import Clock from './clock';
+const IconMap = {
+  timezone: TimezoneIcon,
+  email: EmailIcon,
+  phone: PhoneIcon,
+  location: LocationIcon,
+  link: LinkIcon
+};
 
 /**
  * 格式化链接显示
@@ -20,10 +32,106 @@ const iconSize = {
   width: 16,
   height: 16
 };
+function TimeZoneField({
+  value
+}) {
+  return /*#__PURE__*/_jsxs(Box, {
+    display: "flex",
+    alignItems: "center",
+    gap: 1,
+    className: "user-card__timezone-field",
+    children: [/*#__PURE__*/_jsx(TimezoneIcon, {
+      ...iconSize
+    }), /*#__PURE__*/_jsx(LineText, {
+      variant: "body2",
+      color: "grey.800",
+      children: /*#__PURE__*/_jsx(Clock, {
+        value: value,
+        variant: "body2",
+        color: "grey.800"
+      })
+    })]
+  });
+}
+function LinkField({
+  value
+}) {
+  const [useFallback, setUseFallback] = useState(false);
+  const faviconUrl = useCreation(() => {
+    try {
+      const url = new URL(value);
+      return joinURL(url.origin, 'favicon.ico');
+    } catch (e) {
+      return '';
+    }
+  }, [value]);
+  const handleImageError = () => {
+    setUseFallback(true);
+  };
+  return /*#__PURE__*/_jsxs(Box, {
+    display: "flex",
+    alignItems: "center",
+    gap: 1,
+    children: [faviconUrl && !useFallback ? /*#__PURE__*/_jsx("img", {
+      src: faviconUrl,
+      alt: "site icon",
+      style: {
+        width: 14,
+        height: 14,
+        objectFit: 'contain'
+      },
+      onError: handleImageError
+    }) : /*#__PURE__*/_jsx(LinkIcon, {
+      ...iconSize
+    }), /*#__PURE__*/_jsx(LineText, {
+      children: /*#__PURE__*/_jsx(Typography, {
+        component: "a",
+        href: value,
+        style: {
+          textDecoration: 'none'
+        },
+        target: "_blank",
+        variant: "body2",
+        color: "grey.800",
+        rel: "noopener noreferrer",
+        children: formatLinkDisplay(value)
+      })
+    })]
+  });
+}
+function BasicField({
+  field,
+  value
+}) {
+  const Icon = IconMap[field];
+  return /*#__PURE__*/_jsxs(Box, {
+    display: "flex",
+    alignItems: "center",
+    gap: 1,
+    className: `user-card__${field}-field`,
+    children: [Icon ? /*#__PURE__*/_jsx(Icon, {
+      ...iconSize
+    }) : /*#__PURE__*/_jsx(IconifyIcon, {
+      icon: infoCircleIcon,
+      ...iconSize
+    }), /*#__PURE__*/_jsx(LineText, {
+      variant: "body2",
+      color: "grey.800",
+      children: value
+    })]
+  }, field);
+}
 function BasicContent({
   user,
-  isFull = false
+  isFull = false,
+  renderFields
 }) {
+  const fields = useCreation(() => {
+    return renderFields ?? ['bio', 'email', 'phone', 'location', 'timezone', 'link'];
+  }, [renderFields]);
+  const includeBio = useCreation(() => {
+    return fields.includes('bio');
+  }, [fields]);
   const metadata = useCreation(() => {
     return user.metadata ?? {
       joinedAt: user?.createdAt,
@@ -34,83 +142,103 @@ function BasicContent({
       }
     };
   }, [user]);
+  const address = useCreation(() => {
+    return user.address;
+  }, [user.address]);
+  const getFieldValue = useCallback(field => {
+    if (!field) return '';
+    switch (field) {
+      case 'bio':
+        return user.metadata?.bio || '';
+      case 'email':
+        return metadata.email || user.email || '';
+      case 'phone':
+        return metadata.phone?.phoneNumber || user.phone || '';
+      case 'location':
+        return address?.city || metadata.location || '';
+      case 'timezone':
+        return metadata.timezone || '';
+      case 'link':
+        return metadata.links?.map(link => link.url).filter(Boolean) || [];
+      default:
+        return user[field] || '';
+    }
+  }, [user, metadata, address]);
 
-  // 获取第一个链接（如果有）
-  const firstLink = metadata.links && metadata.links.length > 0 ? metadata.links[0] : null;
-  const moreContent = () => {
-    return metadata.timezone ? /*#__PURE__*/_jsxs(Box, {
-      display: "flex",
-      alignItems: "center",
-      gap: 1,
-      children: [/*#__PURE__*/_jsx(TimezoneIcon, {
-        ...iconSize
-      }), /*#__PURE__*/_jsx(LineText, {
-        variant: "body2",
-        color: "grey.800",
-        children: /*#__PURE__*/_jsx(Clock, {
-          value: metadata.timezone,
-          variant: "body2",
-          color: "grey.800"
+  // 计算实际可见的字段数量
+  const visibleFields = useMemo(() => {
+    return fields.filter(field => {
+      if (field === 'bio') return false; // bio field is handled separately
+      const value = getFieldValue(field);
+      if (value === undefined || value === null || value === '') return false;
+      if (isArray(value)) {
+        return value.length > 0;
+      }
+      return String(value).trim().length > 0;
+    });
+  }, [fields, getFieldValue]);
+
+  // 判断是否需要使用两列布局
+  const useDoubleColumn = visibleFields.length > 4;
+  if (fields.length === 0) {
+    return null;
+  }
+  const renderField = field => {
+    const value = getFieldValue(field);
+    if (!value || field === 'bio') {
+      return null;
+    }
+    if (isArray(value)) {
+      return /*#__PURE__*/_jsx(Fragment, {
+        children: field === 'link' ? /*#__PURE__*/_jsx(_Fragment, {
+          children: value.map(link => /*#__PURE__*/_jsx(LinkField, {
+            value: link
+          }, link))
+        }) : /*#__PURE__*/_jsx(_Fragment, {
+          children: value.map(item => /*#__PURE__*/_jsx(BasicField, {
+            field: field,
+            value: item
+          }, item))
         })
-      })]
-    }) : null;
+      }, field);
+    }
+    if (field === 'timezone') {
+      return /*#__PURE__*/_jsx(TimeZoneField, {
+        value: value
+      }, field);
+    }
+    return /*#__PURE__*/_jsx(BasicField, {
+      field: field,
+      value: value
+    }, field);
   };
   return /*#__PURE__*/_jsxs(Box, {
     mt: 1,
     display: "flex",
     flexDirection: "column",
     gap: 1.5,
-    children: [user.metadata?.bio && /*#__PURE__*/_jsx(LineText, {
+    className: "user-card__basic-content",
+    children: [includeBio && user.metadata?.bio && /*#__PURE__*/_jsx(LineText, {
       variant: "body2",
       color: "grey.800",
+      className: "user-card__bio-field",
       children: user.metadata.bio
-    }), /*#__PURE__*/_jsxs(Box, {
+    }), useDoubleColumn ? /*#__PURE__*/_jsx(Grid, {
+      container: true,
+      spacing: 0.5,
+      children: fields.map(field => {
+        if (field === 'bio' || !getFieldValue(field)) return null;
+        return /*#__PURE__*/_jsx(Grid, {
+          item: true,
+          xs: 6,
+          children: renderField(field)
+        }, field);
+      })
+    }) : /*#__PURE__*/_jsx(Box, {
       display: "flex",
       flexDirection: "column",
       gap: 0.5,
-      children: [firstLink && /*#__PURE__*/_jsxs(Box, {
-        display: "flex",
-        alignItems: "center",
-        gap: 1,
-        children: [/*#__PURE__*/_jsx(LinkIcon, {
-          ...iconSize
-        }), /*#__PURE__*/_jsx(LineText, {
-          children: /*#__PURE__*/_jsx(Typography, {
-            component: "a",
-            href: firstLink.url,
-            style: {
-              textDecoration: 'none'
-            },
-            target: "_blank",
-            variant: "body2",
-            color: "grey.800",
-            rel: "noopener noreferrer",
-            children: formatLinkDisplay(firstLink.url)
-          })
-        })]
-      }), metadata.location && /*#__PURE__*/_jsxs(Box, {
-        display: "flex",
-        alignItems: "center",
-        gap: 1,
-        children: [/*#__PURE__*/_jsx(LocationIcon, {
-          ...iconSize
-        }), /*#__PURE__*/_jsx(LineText, {
-          variant: "body2",
-          color: "grey.800",
-          children: metadata.location
-        })]
-      }), isFull && moreContent(), (metadata.email || user.email) && /*#__PURE__*/_jsxs(Box, {
-        display: "flex",
-        alignItems: "center",
-        gap: 1,
-        children: [/*#__PURE__*/_jsx(EmailIcon, {
-          ...iconSize
-        }), /*#__PURE__*/_jsx(LineText, {
-          variant: "body2",
-          color: "grey.800",
-          children: metadata.email || user.email
-        })]
-      })]
+      children: fields.map(field => renderField(field))
     })]
   });
 }

package/lib/UserCard/Content/minimal.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
-import { UserCardProps } from '../types';
+import { User, UserCardProps } from '../types';
 interface MinimalContentProps extends UserCardProps {
-    user: UserCardProps['user'];
+    user: User;
     avatarSize: number;
     shouldShowHoverCard: boolean;
     renderCardContent?: () => React.ReactNode | null;

package/lib/UserCard/Content/minimal.js

@@ -22,6 +22,7 @@ function MinimalContent(props) {
     display: "flex",
     justifyContent: "space-between",
     alignItems: "center",
+    className: "user-card__avatar-content",
     children: [/*#__PURE__*/_jsxs(Box, {
       display: "flex",
       justifyContent: "flex-start",
@@ -40,6 +41,7 @@ function MinimalContent(props) {
           variant: "subtitle1",
           fontWeight: 500,
           color: "text.primary",
+          className: "user-card__full-name-label",
           fontSize: 18,
           noWrap: true,
           sx: {

package/lib/UserCard/Content/tooltip-avatar.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
-import { UserCardProps } from '../types';
-interface TooltipAvatarProps {
-    user: UserCardProps['user'];
+import { User, UserCardProps } from '../types';
+interface TooltipAvatarProps extends UserCardProps {
+    user: User;
     avatarSize: number;
     shouldShowHoverCard: boolean;
     renderCardContent?: () => React.ReactNode | null;
@@ -13,5 +13,5 @@ interface TooltipAvatarProps {
  * 统一处理头像的Tooltip显示组件
  * 根据条件显示普通Tooltip、自定义Tooltip内容或无Tooltip的头像
  */
-declare function TooltipAvatar({ user, avatarSize, shouldShowHoverCard, renderCardContent, tooltipTitle, tooltipProps, avatarProps, }: TooltipAvatarProps): import("react/jsx-runtime").JSX.Element;
+declare function TooltipAvatar({ user, avatarSize, shouldShowHoverCard, renderCardContent, tooltipTitle, tooltipProps, avatarProps, onAvatarClick, }: TooltipAvatarProps): import("react/jsx-runtime").JSX.Element;
 export default TooltipAvatar;

package/lib/UserCard/Content/tooltip-avatar.js

@@ -14,11 +14,12 @@ function TooltipAvatar({
   renderCardContent,
   tooltipTitle,
   tooltipProps,
-  avatarProps
+  avatarProps,
+  onAvatarClick
 }) {
   const avatarElement = /*#__PURE__*/_jsx(Box, {
     display: "inline-block",
-    children: renderAvatar(user, avatarSize, avatarProps)
+    children: renderAvatar(user, avatarSize, avatarProps, onAvatarClick, shouldShowHoverCard || !!tooltipTitle)
   });
   // 使用普通文本Tooltip
   if (tooltipTitle) {
@@ -44,7 +45,7 @@ function TooltipAvatar({
           '& .MuiTooltip-tooltip': {
             backgroundColor: 'transparent',
             p: 0,
-            maxWidth: 400,
+            maxWidth: 500,
             zIndex: 1000
           }
         }

package/lib/UserCard/components.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-import { UserCardProps } from './types';
-export declare const renderAvatar: (user: UserCardProps["user"], avatarSize?: number, avatarProps?: UserCardProps["avatarProps"]) => import("react/jsx-runtime").JSX.Element;
+import { User, UserCardProps } from './types';
+export declare const renderAvatar: (user: User, avatarSize?: number, avatarProps?: UserCardProps["avatarProps"], onAvatarClick?: UserCardProps["onAvatarClick"], shouldShowHoverCard?: boolean) => import("react/jsx-runtime").JSX.Element;
 export declare const renderTopRight: (renderTopRightContent: (() => React.ReactNode) | undefined, topRightMaxWidth?: number) => import("react/jsx-runtime").JSX.Element | null;

package/lib/UserCard/components.js

@@ -5,7 +5,10 @@ import Avatar from '../Avatar';
 import { createNameOnlyAvatar } from './utils';
 
 // 渲染头像
-export const renderAvatar = (user, avatarSize = 48, avatarProps = undefined) => {
+export const renderAvatar = (user, avatarSize = 48, avatarProps = undefined, onAvatarClick = undefined, shouldShowHoverCard = false) => {
+  const onClick = e => {
+    onAvatarClick?.(user, e);
+  };
   // 如果用户没有头像，则显示名称首字母头像
   if (!user.avatar) {
     const avatarContent = createNameOnlyAvatar(user);
@@ -13,9 +16,10 @@ export const renderAvatar = (user, avatarSize = 48, avatarProps = undefined) =>
       size: avatarSize,
       did: user.did,
       variant: "circle",
+      onClick: onClick,
       sx: {
         fontSize: avatarSize * 0.4,
-        cursor: 'pointer'
+        cursor: shouldShowHoverCard || onAvatarClick ? 'pointer' : 'default'
       },
       ...(avatarProps || {}),
       children: avatarContent
@@ -28,8 +32,9 @@ export const renderAvatar = (user, avatarSize = 48, avatarProps = undefined) =>
     did: user.did,
     variant: "circle",
     style: {
-      cursor: 'pointer'
+      cursor: shouldShowHoverCard || onAvatarClick ? 'pointer' : 'default'
     },
+    onClick: onClick,
     src: user.avatar,
     alt: user.fullName || '',
     ...(avatarProps || {})
@@ -43,6 +48,7 @@ export const renderTopRight = (renderTopRightContent, topRightMaxWidth = 120) =>
       sx: {
         maxWidth: topRightMaxWidth
       },
+      className: "user-card__top-right-content",
       children: renderTopRightContent()
     });
   }

package/lib/UserCard/index.js

@@ -1,10 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { CardType } from './types';
 import AvatarOnlyCard from './Cards/avatar-only';
 import DetailedCard from './Cards';
 import DialogContainer from './Container/dialog';
 import CardContainer from './Container/card';
+import Avatar from '../Avatar';
+import { getUserByDid, isUserDid } from './utils';
 
 // 创建仅显示名称首字母的头像
 export function createNameOnlyAvatar(user) {
@@ -36,7 +38,33 @@ function UserCard(props) {
   // 默认规则：AvatarOnly模式下默认显示悬停卡片，Detailed模式下默认不显示
   const shouldShowHoverCard = showHoverCard !== undefined ? showHoverCard : cardType === CardType.AvatarOnly;
   const containerRef = useRef(null);
+  const [user, setUser] = useState(null);
+  useEffect(() => {
+    let isSubscribed = true;
+    if (props.user) {
+      setUser(props.user);
+    } else if (props.did && isUserDid(props.did) && !props.user) {
+      getUserByDid(props.did).then(_user => {
+        if (isSubscribed) {
+          setUser(_user);
+        }
+      });
+    }
+    return () => {
+      isSubscribed = false;
+    };
+  }, [props.did, props.user]);
 
+  // 如果不存在，则使用 did 渲染头像
+  if (!user) {
+    return /*#__PURE__*/_jsx(Avatar, {
+      did: props.did,
+      size: props.avatarSize,
+      ...props.avatarProps
+    });
+  }
+
+  // user 存在，则使用 user 渲染头像
   // 渲染卡片内容（用于Tooltip）
   const renderCardContent = () => {
     const _avatarProps = props.popupAvatarProps || props.avatarProps;
@@ -46,8 +74,10 @@ function UserCard(props) {
       children: /*#__PURE__*/_jsx(DetailedCard, {
         ...props,
         shouldShowHoverCard: false,
+        user: user,
         avatarProps: _avatarProps,
-        shortenLabelProps: _shortenLabelProps
+        shortenLabelProps: _shortenLabelProps,
+        renderFields: props.popupRenderFields
       })
     });
   };
@@ -57,7 +87,8 @@ function UserCard(props) {
     return /*#__PURE__*/_jsx(AvatarOnlyCard, {
       ...props,
       shouldShowHoverCard: shouldShowHoverCard,
-      renderCardContent: renderCardContent
+      renderCardContent: renderCardContent,
+      user: user
     });
   }
 
@@ -69,7 +100,8 @@ function UserCard(props) {
     children: /*#__PURE__*/_jsx(DetailedCard, {
       ...props,
       shouldShowHoverCard: shouldShowHoverCard,
-      renderCardContent: renderCardContent
+      renderCardContent: renderCardContent,
+      user: user
     })
   });
 }

package/lib/UserCard/types.d.ts

@@ -57,7 +57,6 @@ export type UserAddress = {
     postalCode?: string;
 };
 export type User = UserPublicInfo & {
-    role: string;
     email?: string;
     phone?: string;
     sourceProvider?: string;
@@ -69,7 +68,7 @@ export type User = UserPublicInfo & {
     didSpace?: Record<string, any>;
     connectedAccounts?: any[];
     locale?: string;
-    url: string;
+    url?: string;
     inviter?: string;
     emailVerified?: boolean;
     phoneVerified?: boolean;
@@ -92,7 +91,8 @@ export declare enum InfoType {
     Basic = "Basic"
 }
 export interface UserCardProps {
-    user: User;
+    user?: User;
+    did?: string;
     cardType?: CardType;
     infoType?: InfoType;
     avatarSize?: number;
@@ -101,13 +101,16 @@ export interface UserCardProps {
     didProps?: Partial<DIDProps>;
     avatarProps?: Partial<AvatarProps>;
     popupAvatarProps?: Partial<AvatarProps>;
-    tooltipProps?: Omit<TooltipProps, 'title'>;
+    tooltipProps?: Partial<TooltipProps>;
     sx?: SxProps<Theme>;
     popupSx?: SxProps<Theme>;
     shortenLabelProps?: Partial<ShortenLabelProps>;
     popupShortenLabelProps?: Partial<ShortenLabelProps>;
+    renderFields?: string[];
+    popupRenderFields?: string[];
     renderTopRightContent?: () => React.ReactNode;
     topRightMaxWidth?: number;
     renderCustomContent?: () => React.ReactNode;
+    onAvatarClick?: (user: User, e?: React.MouseEvent<HTMLDivElement>) => void;
 }
 export {};

package/lib/UserCard/utils.d.ts

@@ -1,2 +1,4 @@
 import { User } from './types';
 export declare function createNameOnlyAvatar(user: User): string | null;
+export declare function isUserDid(did: string): boolean;
+export declare function getUserByDid(did: string): Promise<User | null>;

package/lib/UserCard/utils.js

@@ -1,3 +1,14 @@
+import { toTypeInfo } from '@arcblock/did';
+import { types } from '@ocap/mcrypto';
+import { BlockletSDK } from '@blocklet/js-sdk';
+let client = null;
+try {
+  client = new BlockletSDK();
+} catch (error) {
+  console.error('Failed to initialize BlockletSDK:', error);
+  client = null;
+}
+
 // 创建仅显示名称首字母的头像
 // eslint-disable-next-line import/prefer-default-export
 export function createNameOnlyAvatar(user) {
@@ -16,4 +27,26 @@ export function createNameOnlyAvatar(user) {
     content = user.did ? user.did.charAt(0).toUpperCase() : '?';
   }
   return content;
+}
+export function isUserDid(did) {
+  if (!did || typeof did !== 'string') return false;
+  try {
+    const didInfo = toTypeInfo(did);
+    return didInfo.role !== undefined && didInfo.role !== types.RoleType.ROLE_APPLICATION;
+  } catch (error) {
+    console.error('Failed to check if did is user did:', error);
+    return false;
+  }
+}
+export async function getUserByDid(did) {
+  if (!client) return null;
+  try {
+    const user = await client.user.getUserPublicInfo({
+      did
+    });
+    return user;
+  } catch (error) {
+    console.error('Failed to get user by did:', error);
+    return null;
+  }
 }

package/lib/type.d.ts

@@ -1,10 +1,9 @@
-import type { Theme } from '@mui/material';
+import type { Theme, PaletteMode } from '@mui/material';
 import type { LiteralUnion } from 'type-fest';
 
 export type $TSFixMe = any;
 export type Translations = Record<string, Record<string, any>>;
 export type Locale = LiteralUnion<'en' | 'zh', string>;
-export type ThemeMode = 'light' | 'dark';
 
 // TODO: 以下为 blocklet 应用专属的全局对象类型，可以更加具体
 export type User = Record<string, any>;
@@ -26,7 +25,7 @@ export type Blocklet = {
   version: string;
   mode: string;
   tenantMode: 'single' | 'multiple';
-  theme: Record<ThemeMode, Theme>;
+  theme: Record<PaletteMode, Theme>;
   navigation: $TSFixMe[];
   preferences: Record<string, any>;
   languages: {

package/lib/withTheme/index.d.ts

@@ -1,9 +1,8 @@
-import { Breakpoint } from '@mui/material';
+import { Breakpoint, type PaletteMode } from '@mui/material';
 import { type PaletteOptions } from '@mui/material/styles/createPalette';
 import { type TypographyOptions } from '@mui/material/styles/createTypography';
-import { ThemeMode } from '../type';
 declare function withTheme<P extends object>(Component: React.ComponentType<P>, { mode, pageWidth, palette, typography, }?: {
-    mode?: ThemeMode;
+    mode?: PaletteMode;
     pageWidth?: Breakpoint;
     palette?: PaletteOptions;
     typography?: TypographyOptions;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.13.6",
+  "version": "2.13.8",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -70,13 +70,14 @@
     "react": ">=18.2.0",
     "react-router-dom": ">=6.22.3"
   },
-  "gitHead": "1cc41a6a655f93eb1536a9dd36fe3979a2c654c8",
+  "gitHead": "86ba86fce59551ceb09ee3cbdfd4646de2a69900",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.13.6",
-    "@arcblock/nft-display": "^2.13.6",
-    "@arcblock/react-hooks": "^2.13.6",
+    "@arcblock/icons": "^2.13.8",
+    "@arcblock/nft-display": "^2.13.8",
+    "@arcblock/react-hooks": "^2.13.8",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+    "@blocklet/theme": "^2.13.8",
     "@fontsource/roboto": "~5.1.1",
     "@fontsource/ubuntu-mono": "^5.0.18",
     "@iconify-icons/logos": "^1.2.36",

package/src/Colors/index.ts

@@ -1,4 +1,9 @@
-// eslint-disable-next-line no-restricted-exports
-export { default } from './themes/default';
+import { BLOCKLET_THEME_LIGHT } from '@blocklet/theme';
+import type { Theme } from '@mui/material';
+
+// @compatibility
+const colors = BLOCKLET_THEME_LIGHT.palette as Theme['palette'];
+
+export default colors;
 export { default as temp } from './themes/temp';
 export { default as didConnectColors } from './themes/did-connect';