@arcblock/ux 2.13.12 → 2.13.14

package/lib/Theme/theme-provider.js

@@ -1,17 +1,68 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import PropTypes from 'prop-types';
-import { ThemeProvider as MuiThemeProvider } from '@mui/material/styles';
+import { GlobalStyles } from '@mui/material';
+import { ThemeProvider as MuiThemeProvider, useTheme } from '@mui/material/styles';
 import StyledEngineProvider from '@mui/material/StyledEngineProvider';
 import CssBaseline from '@mui/material/CssBaseline';
 import { createTheme } from './theme';
 const defaultTheme = createTheme();
+function DarkSchemeStyles({
+  className
+}) {
+  const theme = useTheme();
+  if (theme.palette.mode === 'dark') {
+    const trackColor = 'transparent';
+    const thumbColor = theme.palette.grey[300];
+
+    // 处理作用域选择器
+    const prefix = (className || '').trim().split(/\s+/).filter(Boolean).map(c => c.startsWith('.') ? c : `.${c}`).join(' ');
+    const webkitScrollbar = prefix ? `${prefix}::-webkit-scrollbar, ${prefix} *::-webkit-scrollbar` : '*::-webkit-scrollbar';
+    const webkitTrack = prefix ? `${prefix}::-webkit-scrollbar-track, ${prefix} *::-webkit-scrollbar-track` : '*::-webkit-scrollbar-track';
+    const webkitThumb = prefix ? `${prefix}::-webkit-scrollbar-thumb, ${prefix} *::-webkit-scrollbar-thumb` : '*::-webkit-scrollbar-thumb';
+    const firefoxSelector = prefix ? `${prefix}, ${prefix} *` : '*';
+    return /*#__PURE__*/_jsx(GlobalStyles, {
+      styles: {
+        // Chrome, Safari, Edge
+        '@supports selector(::-webkit-scrollbar)': {
+          [webkitScrollbar]: {
+            width: '12px',
+            height: '12px'
+          },
+          [webkitTrack]: {
+            background: trackColor
+          },
+          [webkitThumb]: {
+            background: thumbColor,
+            borderRadius: '6px',
+            border: '2px solid',
+            borderColor: trackColor,
+            backgroundClip: 'padding-box',
+            '&:hover': {
+              background: theme.palette.grey[400],
+              backgroundClip: 'padding-box'
+            }
+          }
+        },
+        // Firefox
+        '@supports not selector(::-webkit-scrollbar)': {
+          [firefoxSelector]: {
+            scrollbarWidth: 'auto',
+            scrollbarColor: `${thumbColor} ${trackColor}`
+          }
+        }
+      }
+    });
+  }
+  return null;
+}
 /**
  * 默认的 theme provider, 可以为 webapp/blocklet 快捷的配置好 mui theme provider
  */
 export default function ThemeProvider({
   children,
   theme,
-  injectFirst
+  injectFirst,
+  darkSchemeClass
 }) {
   return (
     /*#__PURE__*/
@@ -20,7 +71,9 @@ export default function ThemeProvider({
       injectFirst: injectFirst,
       children: /*#__PURE__*/_jsxs(MuiThemeProvider, {
         theme: theme,
-        children: [/*#__PURE__*/_jsx(CssBaseline, {}), children]
+        children: [/*#__PURE__*/_jsx(CssBaseline, {}), /*#__PURE__*/_jsx(DarkSchemeStyles, {
+          className: darkSchemeClass
+        }), children]
       })
     })
   );
@@ -28,10 +81,12 @@ export default function ThemeProvider({
 ThemeProvider.propTypes = {
   children: PropTypes.any,
   theme: PropTypes.any,
-  injectFirst: PropTypes.bool
+  injectFirst: PropTypes.bool,
+  darkSchemeClass: PropTypes.string
 };
 ThemeProvider.defaultProps = {
   children: null,
   theme: defaultTheme,
-  injectFirst: true
+  injectFirst: true,
+  darkSchemeClass: ''
 };

package/lib/Theme/theme.d.ts

@@ -1,4 +1,4 @@
-import type { PaletteMode } from '@mui/material';
+import type { PaletteMode, Theme } from '@mui/material';
 import { type ThemeOptions } from '@mui/material/styles';
 import { deepmerge } from '@mui/utils';
 import '@fontsource/roboto/latin-400.css';
@@ -11,10 +11,13 @@ export declare function collectFontFamilies(obj?: {
     fontFamily?: string;
 }, fontSet?: Set<string>): Set<string>;
 export declare function loadFonts(fonts: string[]): Promise<boolean>;
+export declare function getDefaultThemePrefer(): PaletteMode;
 export declare function createDefaultThemeOptions(mode?: PaletteMode): ThemeOptions;
 export interface UserThemeOptions extends ThemeOptions {
     disableBlockletTheme?: boolean;
 }
-export declare const create: (...args: UserThemeOptions[]) => import("@mui/material").Theme;
-export declare const createTheme: (...args: UserThemeOptions[]) => import("@mui/material").Theme;
+export type ThemeConfig = Pick<Theme, 'palette'>;
+export declare function lazyThemeConfig(mode: PaletteMode): () => ThemeConfig;
+export declare const create: (...args: Array<UserThemeOptions | ((config: ThemeConfig) => UserThemeOptions)>) => Theme;
+export declare const createTheme: (...args: Array<UserThemeOptions | ((config: ThemeConfig) => UserThemeOptions)>) => Theme;
 export { deepmerge };

package/lib/Theme/theme.js

@@ -3,9 +3,10 @@
 
 import { createTheme as _createTheme, responsiveFontSizes } from '@mui/material/styles';
 import { deepmerge } from '@mui/utils';
+import pick from 'lodash/pick';
 import webfontloader from 'webfontloader';
-import { BLOCKLET_THEME_LIGHT, BLOCKLET_THEME_DARK, DEFAULT_FONTS } from '@blocklet/theme';
-import { cleanedObj } from '../Util';
+import { BLOCKLET_THEME_LIGHT, BLOCKLET_THEME_DARK, DEFAULT_FONTS, BLOCKLET_THEME_PREFER_KEY } from '@blocklet/theme';
+import { cleanedObj, deepmergeAll } from '../Util';
 
 // 默认只加载最基本的 roboto latin 字体
 import '@fontsource/roboto/latin-400.css';
@@ -61,6 +62,27 @@ export function loadFonts(fonts) {
   });
 }
 
+// 获取默认主题偏好
+export function getDefaultThemePrefer() {
+  const prefer = window.blocklet?.theme?.prefer;
+  if (prefer === 'system') {
+    // 本地缓存
+    const localPrefer = localStorage.getItem(BLOCKLET_THEME_PREFER_KEY);
+    if (localPrefer && (localPrefer === 'light' || localPrefer === 'dark')) {
+      return localPrefer;
+    }
+
+    // 跟随系统
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+  }
+  if (prefer === 'light' || prefer === 'dark') {
+    return prefer;
+  }
+
+  // 未设置偏好
+  return 'light';
+}
+
 // 创建默认主题配置
 export function createDefaultThemeOptions(mode = 'light') {
   if (mode === 'dark') {
@@ -68,26 +90,35 @@ export function createDefaultThemeOptions(mode = 'light') {
   }
   return BLOCKLET_THEME_LIGHT;
 }
-// 主要处理 mode 和 overrides
+
+// 用于获取 Blocklet Theme 配置，便于用户创建自定义主题
+
+export function lazyThemeConfig(mode) {
+  const fields = ['palette'];
+  let config = null;
+  return () => {
+    if (config) return config;
+    config = deepmerge(pick(createDefaultThemeOptions(mode), fields), pick(window.blocklet?.theme?.[mode] ?? {}, fields));
+    return config;
+  };
+}
+
+// 主要处理 overrides
 const normalizeUserThemeOptions = ({
-  mode = 'light',
   palette,
   components,
   overrides,
   ...rest
 }) => {
-  return {
-    mode,
-    palette: {
-      ...palette,
-      mode
-    },
+  const result = {
+    palette,
     components: {
       ...overrides,
       ...components
     },
     ...rest
   };
+  return result;
 };
 const defaultUserThemeOptions = {
   themeName: 'ArcBlock',
@@ -118,20 +149,25 @@ const defaultUserThemeOptions = {
 
 // https://material-ui.com/customization/default-theme/
 export const create = (...args) => {
-  const userThemeOptions = args.reduce((acc, curr) => deepmerge(acc, normalizeUserThemeOptions(curr)), normalizeUserThemeOptions(defaultUserThemeOptions));
+  const defaultPrefer = getDefaultThemePrefer();
+  const getThemeConfig = lazyThemeConfig(defaultPrefer);
+  const userThemeOptions = args.reduce((acc, curr) => deepmerge(acc, normalizeUserThemeOptions(typeof curr === 'function' ? curr(getThemeConfig()) : curr)), normalizeUserThemeOptions(defaultUserThemeOptions));
+  const prefer = userThemeOptions.mode || userThemeOptions.palette?.mode || defaultPrefer;
+  const blockletThemeOptions = window.blocklet?.theme?.[prefer] ?? {};
+  const defaultThemeOptions = createDefaultThemeOptions(prefer);
   const {
-    mode,
     disableBlockletTheme
   } = userThemeOptions;
-  const blockletThemeOptions = window.blocklet?.theme?.[mode] ?? {};
-  const defaultThemeOptions = createDefaultThemeOptions(mode);
 
   // 合并配置
-  let mergedThemeOptions = defaultThemeOptions;
-  if (!disableBlockletTheme) {
-    mergedThemeOptions = deepmerge(defaultThemeOptions, cleanedObj(blockletThemeOptions));
-  }
-  mergedThemeOptions = deepmerge(mergedThemeOptions, cleanedObj(userThemeOptions));
+  const mergedThemeOptions = deepmergeAll([defaultThemeOptions, !disableBlockletTheme && cleanedObj(blockletThemeOptions), cleanedObj(userThemeOptions),
+  // 确保 mode 跟 prefer 一致
+  {
+    mode: prefer,
+    palette: {
+      mode: prefer
+    }
+  }].filter(Boolean));
 
   // 创建主题
   const theme = _createTheme(mergedThemeOptions);

package/lib/UserCard/Container/card.js

@@ -16,7 +16,7 @@ function CardContainer({
   const commonStyles = {
     minWidth: 320,
     p: 2,
-    borderRadius: 2,
+    borderRadius: 1,
     ...(cardType === CardType.Detailed ? {
       border: '1px solid',
       borderColor: 'divider'

package/lib/UserCard/Container/dialog.js

@@ -17,7 +17,7 @@ function DialogContainer({
       backgroundColor: theme.palette.background.paper,
       border: '1px solid',
       borderColor: 'divider',
-      borderRadius: 2,
+      borderRadius: 1,
       maxWidth: 500,
       minWidth: 320,
       display: 'flex'

package/lib/Util/iframe.d.ts

@@ -0,0 +1,5 @@
+export declare function getCallbackAction(id: string, action: string): string;
+export declare function callIframe(iframe: HTMLIFrameElement, action: string): Promise<{
+    value: any;
+    action: string;
+}>;

package/lib/Util/iframe.js

@@ -0,0 +1,24 @@
+export function getCallbackAction(id, action) {
+  return `callback_${action}_${id}`;
+}
+
+// eslint-disable-next-line require-await
+export async function callIframe(iframe, action) {
+  const callbackAction = getCallbackAction(iframe.dataset.id, action);
+  const promise = new Promise(resolve => {
+    const handleMessage = ({
+      data
+    }) => {
+      if (data.action === callbackAction) {
+        window.removeEventListener('message', handleMessage);
+        resolve(data);
+      }
+    };
+    window.addEventListener('message', handleMessage);
+  });
+  iframe?.contentWindow?.postMessage({
+    action,
+    callback: callbackAction
+  }, '*');
+  return promise;
+}

package/lib/Util/index.d.ts

@@ -1,3 +1,5 @@
+import Cookies from 'js-cookie';
+import { type DeepmergeOptions } from '@mui/utils/deepmerge';
 import type { $TSFixMe, Locale } from '../type';
 declare let dateTool: $TSFixMe | null;
 /** 是否常见二段式顶级域名 */
@@ -13,7 +15,7 @@ export declare function getCookieOptions(expireInDays?: number | {
     returnDomain?: boolean;
     sameSite?: Cookies.CookieAttributes['sameSite'];
     secure?: boolean;
-}): import("js-cookie").CookieAttributes;
+}): Cookies.CookieAttributes;
 export declare const getColor: (props: $TSFixMe) => any;
 export declare const getBackground: (props: $TSFixMe) => any;
 /**
@@ -75,6 +77,7 @@ export declare const sleep: (time?: number) => Promise<void>;
 export declare const isUrl: (str: string) => boolean;
 export declare const getVisitorId: () => string | null;
 export declare const setVisitorId: (value: string | null) => void;
+export declare const ensureVisitorId: () => void;
 export declare const getDIDColor: (did: string) => any;
 type NestedTranslation = {
     [key: string]: string | NestedTranslation;
@@ -92,4 +95,18 @@ export declare const getTranslation: (translations: TranslationsObject, locale:
 }) => string;
 export declare const lazyRetry: (fn: () => Promise<any>) => import("react").LazyExoticComponent<import("react").ComponentType<any>>;
 export declare const cleanedObj: (obj: object) => import("lodash").Dictionary<any>;
+/**
+ * 将十六进制颜色转换为 RGBA
+ * @param hex 十六进制颜色字符串 (例如: "#FF0000" 或 "FF0000")
+ * @param alpha 透明度值 (0-1 之间，默认为 1)
+ * @returns RGBA 颜色字符串 (例如: "rgba(255, 0, 0, 1)")
+ */
+export declare function hexToRgba(hex: string, alpha?: number): string;
+/**
+ * 依次对数组中的对象进行深度合并
+ * @param objects - 需要合并的对象数组
+ * @param options - deepmerge 的配置选项
+ * @returns 合并后的对象
+ */
+export declare function deepmergeAll<T>(objects: T[], options?: DeepmergeOptions): T;
 export {};

package/lib/Util/index.js

@@ -5,7 +5,11 @@ import { getDIDMotifInfo, colors } from '@arcblock/did-motif';
 import isNil from 'lodash/isNil';
 import omitBy from 'lodash/omitBy';
 import pRetry from 'p-retry';
+import Cookies from 'js-cookie';
+import colorConvert from 'color-convert';
+import deepmerge from '@mui/utils/deepmerge';
 import { DID_PREFIX, BLOCKLET_SERVICE_PATH_PREFIX } from './constant';
+import { getFederatedEnabled } from './federated';
 let dateTool = null;
 const IP_V4_REGEX = /^(\d{1,3}\.){3}\d{1,3}(:\d+)?$/;
 // 常见顶级域名
@@ -359,15 +363,63 @@ export const sleep = (time = 0) => {
 export const isUrl = str => {
   return /^https?:\/\//.test(str);
 };
-const visitorIdKey = '__visitor_id';
+const visitorIdKey = 'vid';
+const visitorIdKeyLegacy = '__visitor_id';
 export const getVisitorId = () => {
-  return localStorage.getItem(visitorIdKey);
+  // FIXME: @zhanghan 短期内做一个兼容，确保在 migrate 前的请求能够携带正确的 vid
+  return Cookies.get(visitorIdKey) || localStorage.getItem(visitorIdKeyLegacy);
 };
 export const setVisitorId = value => {
   if (value === null) {
-    localStorage.removeItem(visitorIdKey);
+    Cookies.remove(visitorIdKey, {
+      sameSite: 'None',
+      secure: true
+    });
   } else {
-    localStorage.setItem(visitorIdKey, value);
+    Cookies.set(visitorIdKey, value, {
+      sameSite: 'None',
+      secure: true,
+      expires: 365
+    });
+  }
+};
+export const ensureVisitorId = () => {
+  let visitorId = localStorage.getItem(visitorIdKeyLegacy);
+  if (visitorId) {
+    localStorage.removeItem(visitorIdKeyLegacy);
+    setVisitorId(visitorId);
+  }
+  if (getVisitorId()) {
+    return;
+  }
+  if (!getFederatedEnabled()) {
+    try {
+      // 在支持 crypto.randomUUID 的环境中使用
+      if (window.crypto && typeof window.crypto.randomUUID === 'function') {
+        visitorId = window.crypto.randomUUID();
+      } else {
+        // 在不支持 crypto.randomUUID 的环境中生成随机 ID
+        const randomValues = new Uint8Array(16);
+        if (window.crypto && typeof window.crypto.getRandomValues === 'function') {
+          window.crypto.getRandomValues(randomValues);
+        } else {
+          // 降级方案：使用 Math.random 生成
+          for (let i = 0; i < 16; i++) {
+            randomValues[i] = Math.floor(Math.random() * 256);
+          }
+        }
+
+        // 转换为 UUID 格式
+        const hexArray = Array.from(randomValues).map(b => b.toString(16).padStart(2, '0'));
+        visitorId = [hexArray.slice(0, 4).join(''), hexArray.slice(4, 6).join(''), hexArray.slice(6, 8).join(''), hexArray.slice(8, 10).join(''), hexArray.slice(10, 16).join('')].join('-');
+      }
+    } catch (error) {
+      // 如果上述方法都失败，使用时间戳和随机数生成
+      visitorId = `${Date.now()}-${Math.random().toString(36).substring(2, 15)}`;
+    }
+  }
+  if (visitorId) {
+    setVisitorId(visitorId);
   }
 };
 export const getDIDColor = did => {
@@ -426,4 +478,37 @@ export const lazyRetry = fn => /*#__PURE__*/lazy(() => pRetry(async () => {
 }));
 export const cleanedObj = obj => {
   return omitBy(obj, isNil);
-};
+};
+
+/**
+ * 将十六进制颜色转换为 RGBA
+ * @param hex 十六进制颜色字符串 (例如: "#FF0000" 或 "FF0000")
+ * @param alpha 透明度值 (0-1 之间，默认为 1)
+ * @returns RGBA 颜色字符串 (例如: "rgba(255, 0, 0, 1)")
+ */
+export function hexToRgba(hex, alpha = 1) {
+  const [r, g, b] = colorConvert.hex.rgb(hex);
+  // 返回 RGBA 格式
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+
+/**
+ * 依次对数组中的对象进行深度合并
+ * @param objects - 需要合并的对象数组
+ * @param options - deepmerge 的配置选项
+ * @returns 合并后的对象
+ */
+export function deepmergeAll(objects, options) {
+  if (!Array.isArray(objects)) {
+    throw new Error('First argument should be an array');
+  }
+  if (objects.length === 0) {
+    return {};
+  }
+  if (objects.length === 1) {
+    return objects[0];
+  }
+  return objects.reduce((acc, obj) => {
+    return deepmerge(acc, obj, options);
+  });
+}

package/lib/type.d.ts

@@ -25,7 +25,11 @@ export type Blocklet = {
   version: string;
   mode: string;
   tenantMode: 'single' | 'multiple';
-  theme: Record<PaletteMode, Theme>;
+  theme: {
+    prefer?: PaletteMode | 'system';
+    light: Theme;
+    dark: Theme;
+  };
   navigation: $TSFixMe[];
   preferences: Record<string, any>;
   languages: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.13.12",
+  "version": "2.13.14",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -40,6 +40,7 @@
     "@babel/cli": "^7.19.3",
     "@babel/core": "^7.19.3",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-transform-typescript": "^7.24.7",
     "@babel/preset-env": "^7.19.3",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.24.7",
@@ -70,14 +71,14 @@
     "react": ">=18.2.0",
     "react-router-dom": ">=6.22.3"
   },
-  "gitHead": "898e576675cefb8c4738d87f4198271943efec76",
+  "gitHead": "b9f48199169b641a2d3277806501471a56dd496d",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.13.12",
-    "@arcblock/nft-display": "^2.13.12",
-    "@arcblock/react-hooks": "^2.13.12",
+    "@arcblock/icons": "^2.13.14",
+    "@arcblock/nft-display": "^2.13.14",
+    "@arcblock/react-hooks": "^2.13.14",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@blocklet/theme": "^2.13.12",
+    "@blocklet/theme": "^2.13.14",
     "@fontsource/roboto": "~5.1.1",
     "@fontsource/ubuntu-mono": "^5.0.18",
     "@iconify-icons/logos": "^1.2.36",
@@ -93,6 +94,7 @@
     "awesome-phonenumber": "^7.4.0",
     "axios": "^1.7.5",
     "base64-url": "^2.3.3",
+    "color-convert": "^3.0.1",
     "copy-to-clipboard": "^3.3.2",
     "core-js": "^3.25.5",
     "d3-geo": "^1.12.1",

package/src/ActivityIndicator/index.jsx

@@ -3,8 +3,7 @@ import PropTypes from 'prop-types';
 import { green, blue } from '@mui/material/colors';
 
 import Logo from '../Logo';
-import colors from '../Colors';
-import { styled } from '../Theme';
+import { styled, useTheme } from '../Theme';
 
 /**
  * ActivityIndicator is used when we want to tell the user the request they made on the UI will take time.
@@ -21,6 +20,7 @@ import { styled } from '../Theme';
  */
 export default function ActivityIndicator({ messages, interval, ...rest }) {
   const [index, setIndex] = useState(0);
+  const { palette } = useTheme();
 
   useEffect(() => {
     const timer = setInterval(() => {
@@ -42,7 +42,7 @@ export default function ActivityIndicator({ messages, interval, ...rest }) {
           <Logo style={{ transform: 'scale(0.6)' }} showText={false} />
           <Orbit size={56} orbitColor={green[500]} atomColor={green[500]} duration={1} />
           <Orbit size={80} orbitColor={blue[800]} atomColor={blue[800]} duration={1.5} />
-          <Orbit size={100} orbitColor={colors.grey[900]} atomColor={colors.grey[900]} />
+          <Orbit size={100} orbitColor={palette.grey[900]} atomColor={palette.grey[900]} />
         </div>
       </div>
     </Div>
@@ -75,7 +75,7 @@ const Div = styled('div')`
   }
 
   .pm-loader-text {
-    color: ${colors.grey[900]};
+    color: ${({ theme }) => theme.palette.grey[900]};
     font-size: 14px;
     text-align: center;
     position: relative;

package/src/Address/did-address.tsx

@@ -116,7 +116,7 @@ const DidAddress = forwardRef<HTMLDidAddressElement, IDidAddressProps>((props, r
       <span className="did-address-copy-wrapper" title={copied ? '' : translations[locale].copy}>
         {copied ? (
           <Tooltip title={translations[locale].copied} placement="bottom" arrow open={copied}>
-            <CheckIcon className="did-address-copy" style={{ color: green[500] }} />
+            <CheckIcon className="did-address-copy" sx={{ color: 'success.main' }} />
           </Tooltip>
         ) : (
           /* title prop 直接加在 icon 上不生效 */
@@ -184,7 +184,7 @@ const Root = styled<any>(Box, { shouldForwardProp: (prop) => prop !== 'inline' }
   }
 
   .did-address-text {
-    color: #666;
+    color: ${({ theme }) => theme.palette.text.secondary};
   }
   /* truncate string with ellipsis */
   .did-address-truncate {
@@ -204,16 +204,16 @@ const Root = styled<any>(Box, { shouldForwardProp: (prop) => prop !== 'inline' }
   .did-address-copy {
     flex: 0 0 auto;
     font-size: 1em;
-    color: #999;
+    color: ${({ theme }) => theme.palette.text.secondary};
     cursor: pointer;
   }
 
   /* link */
   a {
-    color: #666;
+    color: ${({ theme }) => theme.palette.text.secondary};
   }
   &:hover a {
-    color: #222;
+    color: ${({ theme }) => theme.palette.text.primary};
     text-decoration: underline;
   }
 `;

package/src/Address/responsive-did-address.tsx

@@ -80,7 +80,17 @@ const ResponsiveDidAddress = forwardRef<HTMLDidAddressElement, IResponsiveDidAdd
     }, [containerWidth, addressFullWidth]);
 
     return (
-      <Root as={component} ref={containerRef} style={style} className={className} size={size} inline={rest.inline}>
+      <Root
+        as={component}
+        ref={containerRef}
+        style={style}
+        className={className}
+        size={size}
+        {...(component === 'span'
+          ? {}
+          : {
+              inline: rest.inline,
+            })}>
         <StyledDidAddress
           style={{
             position: loading ? 'absolute' : 'static',

package/src/BlockletV2/blocklet.tsx

@@ -105,7 +105,7 @@ export default function BlockletStore(props: IBlockletStore) {
       variant="outlined"
       onClick={handleMainClick}
       {...rest}
-      sx={{ p: { xs: 2, md: 3 }, borderRadius: 2, ...rest.sx }}>
+      sx={{ p: { xs: 2, md: 3 }, borderRadius: 1, ...rest.sx }}>
       <Stack flex={1} direction="row" gap={1} alignItems="center" overflow="hidden" sx={{ '& > *': { flexShrink: 0 } }}>
         <Avatar src={cover} did={did} size={48} variant="rounded" style={{ borderRadius: '8px', overflow: 'hidden' }} />
         <Typography

package/src/CloseButton/index.tsx

@@ -4,7 +4,6 @@ import { Icon } from '@iconify/react';
 import CloseRoundedIcon from '@iconify-icons/material-symbols/close-rounded';
 import noop from 'lodash/noop';
 
-import { temp as colors } from '../Colors';
 import { mergeSx } from '../Util/style';
 
 export default function CloseButton({
@@ -23,7 +22,7 @@ export default function CloseButton({
         {
           fontSize: 0,
           cursor: 'pointer',
-          color: colors.foregroundsFgSubtile,
+          color: 'text.secondary',
           transition: 'transform 0.25s ease-in-out 0s',
           transformOrigin: 'center',
           '&:hover': {

package/src/Colors/index.ts

@@ -1,9 +1,4 @@
-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;
+// eslint-disable-next-line no-restricted-exports
+export { default } from './themes/default';
 export { default as temp } from './themes/temp';
 export { default as didConnectColors } from './themes/did-connect';