@arcblock/ux 3.0.26 → 3.0.28

package/lib/CodeBlock/index.js

@@ -1,88 +1,90 @@
-import { jsxs as t, jsx as r, Fragment as c } from "react/jsx-runtime";
+import { jsxs as i, jsx as o, Fragment as u } from "react/jsx-runtime";
 import { useState as N } from "react";
 import C from "copy-to-clipboard";
 import e from "highlight.js/lib/core";
-import n from "highlight.js/lib/languages/javascript";
-import s from "highlight.js/lib/languages/typescript";
+import s from "highlight.js/lib/languages/javascript";
+import l from "highlight.js/lib/languages/typescript";
 import _ from "highlight.js/lib/languages/json";
 import z from "highlight.js/lib/languages/elixir";
 import F from "highlight.js/lib/languages/java";
 import M from "highlight.js/lib/languages/swift";
-import u from "highlight.js/lib/languages/objectivec";
+import d from "highlight.js/lib/languages/objectivec";
 import f from "highlight.js/lib/languages/kotlin";
-import d from "highlight.js/lib/languages/protobuf";
-import h from "highlight.js/lib/languages/python";
-import x from "highlight.js/lib/languages/yaml";
-import y from "highlight.js/lib/languages/shell";
-import L from "highlight.js/lib/languages/diff";
-import b from "highlight.js/lib/languages/plaintext";
+import h from "highlight.js/lib/languages/protobuf";
+import x from "highlight.js/lib/languages/python";
+import y from "highlight.js/lib/languages/yaml";
+import L from "highlight.js/lib/languages/shell";
+import b from "highlight.js/lib/languages/diff";
+import w from "highlight.js/lib/languages/plaintext";
 import B from "highlight.js/lib/languages/markdown";
 import "highlight.js/styles/atom-one-dark.css";
-import { FileCopy as S, Check as T } from "@mui/icons-material";
-import o from "../Colors/themes/default.js";
-import { styled as A } from "../Theme/index.js";
-import E from "./LightBox.js";
-e.registerLanguage("javascript", n);
-e.registerLanguage("js", n);
-e.registerLanguage("jsx", n);
-e.registerLanguage("typescript", s);
-e.registerLanguage("ts", s);
-e.registerLanguage("tsx", s);
+import { FileCopy as P, Check as S } from "@mui/icons-material";
+import t from "../Colors/themes/default.js";
+import { styled as T } from "../Theme/index.js";
+import A from "./LightBox.js";
+e.registerLanguage("javascript", s);
+e.registerLanguage("js", s);
+e.registerLanguage("jsx", s);
+e.registerLanguage("typescript", l);
+e.registerLanguage("ts", l);
+e.registerLanguage("tsx", l);
 e.registerLanguage("json", _);
 e.registerLanguage("elixir", z);
 e.registerLanguage("java", F);
 e.registerLanguage("kotlin", f);
 e.registerLanguage("kt", f);
-e.registerLanguage("protobuf", d);
-e.registerLanguage("protobuffer", d);
-e.registerLanguage("python", h);
-e.registerLanguage("py", h);
-e.registerLanguage("yaml", x);
-e.registerLanguage("yml", x);
-e.registerLanguage("shell", y);
-e.registerLanguage("sh", y);
-e.registerLanguage("plaintext", b);
-e.registerLanguage("text", b);
-e.registerLanguage("patch", L);
-e.registerLanguage("diff", L);
+e.registerLanguage("protobuf", h);
+e.registerLanguage("protobuffer", h);
+e.registerLanguage("python", x);
+e.registerLanguage("py", x);
+e.registerLanguage("yaml", y);
+e.registerLanguage("yml", y);
+e.registerLanguage("shell", L);
+e.registerLanguage("sh", L);
+e.registerLanguage("plaintext", w);
+e.registerLanguage("text", w);
+e.registerLanguage("patch", b);
+e.registerLanguage("diff", b);
 e.registerLanguage("swift", M);
-e.registerLanguage("objectivec", u);
-e.registerLanguage("oc", u);
+e.registerLanguage("objectivec", d);
+e.registerLanguage("oc", d);
 e.registerLanguage("markdown", B);
-function ge({
-  code: w = "",
-  language: i = "text",
+function le({
+  code: r = "",
+  language: a = "text",
   children: k = null,
   dark: j = !0,
   ...v
 }) {
-  const [g, l] = N(!1), p = w || k, $ = () => {
-    g || (C(p), l(!0), setTimeout(() => {
-      l(!1);
+  const [g, p] = N(!1), c = r || k, $ = () => {
+    g || (C(c), p(!0), setTimeout(() => {
+      p(!1);
     }, 1500));
-  }, m = /* @__PURE__ */ t(H, { ...v, children: [
-    /* @__PURE__ */ r("span", { className: "codeblock__inner", children: /* @__PURE__ */ r(
+  }, m = /* @__PURE__ */ i(E, { ...v, children: [
+    /* @__PURE__ */ o("span", { className: "codeblock__inner", children: /* @__PURE__ */ o(
       "code",
       {
-        className: `hljs ${i}`,
-        dangerouslySetInnerHTML: { __html: e.highlightAuto(p, [i]).value }
+        className: `hljs ${a}`,
+        dangerouslySetInnerHTML: { __html: e.highlightAuto(c, [a]).value }
       }
     ) }),
-    /* @__PURE__ */ t("div", { className: "copy-button", onClick: $, children: [
-      /* @__PURE__ */ r("span", { className: "default-text", children: i }),
-      /* @__PURE__ */ r("span", { className: "hover-text", children: g ? /* @__PURE__ */ t(c, { children: [
-        /* @__PURE__ */ r(T, { className: "copy-icon" }),
-        /* @__PURE__ */ r("span", { className: "button-lang-text", children: "copied" })
-      ] }) : /* @__PURE__ */ t(c, { children: [
-        /* @__PURE__ */ r(S, { className: "copy-icon" }),
-        /* @__PURE__ */ r("span", { className: "button-lang-text", children: "copy" })
+    /* @__PURE__ */ i("div", { className: "copy-button", onClick: $, children: [
+      /* @__PURE__ */ o("span", { className: "default-text", children: a }),
+      /* @__PURE__ */ o("span", { className: "hover-text", children: g ? /* @__PURE__ */ i(u, { children: [
+        /* @__PURE__ */ o(S, { className: "copy-icon" }),
+        /* @__PURE__ */ o("span", { className: "button-lang-text", children: "copied" })
+      ] }) : /* @__PURE__ */ i(u, { children: [
+        /* @__PURE__ */ o(P, { className: "copy-icon" }),
+        /* @__PURE__ */ o("span", { className: "button-lang-text", children: "copy" })
       ] }) })
     ] })
   ] });
-  return j ? m : /* @__PURE__ */ r(E, { children: m });
+  return j ? m : /* @__PURE__ */ o(A, { children: m });
 }
-const a = "source-code-pro, Menlo, Monaco, Consolas, Courier New, monospace !important", H = A("pre")`
-  font-family: ${a};
+const n = "source-code-pro, Menlo, Monaco, Consolas, Courier New, monospace !important", E = T("pre", {
+  shouldForwardProp: (r) => r !== "sx"
+})`
+  font-family: ${n};
   display: block;
   font-size: 14px;
   line-height: 1.42857143;
@@ -91,9 +93,10 @@ const a = "source-code-pro, Menlo, Monaco, Consolas, Courier New, monospace !imp
   word-wrap: break-word;
   text-align: left;
   border-radius: 5px;
-  border: 1px solid #dedede;
-  background: #222;
-  color: ${o.common.white};
+  border: 1px solid;
+  border-color: ${({ theme: r }) => r.palette.divider};
+  background: ${({ theme: r }) => r.palette.background.default};
+  color: ${({ theme: r }) => r.palette.common.white};
   position: relative;
 
   .codeblock__inner {
@@ -120,7 +123,7 @@ const a = "source-code-pro, Menlo, Monaco, Consolas, Courier New, monospace !imp
 
     .copy-icon {
       font-size: 16px;
-      color: ${o.common.white};
+      color: ${t.common.white};
     }
 
     .hover-text {
@@ -128,20 +131,20 @@ const a = "source-code-pro, Menlo, Monaco, Consolas, Courier New, monospace !imp
     }
     .default-text {
       font-size: 12px;
-      color: ${o.common.white};
+      color: ${t.common.white};
     }
   }
 
   &:hover {
     .copy-button {
       display: flex;
-      background: ${o.primary.main};
+      background: ${t.primary.main};
 
       .hover-text {
         display: flex;
         justify-content: center;
         align-items: center;
-        color: ${o.common.white};
+        color: ${t.common.white};
       }
       .default-text {
         display: none;
@@ -153,17 +156,17 @@ const a = "source-code-pro, Menlo, Monaco, Consolas, Courier New, monospace !imp
   .button-lang-text {
     margin-left: 4px;
     font-size: 12px;
-    color: ${o.common.white};
+    color: ${t.common.white};
   }
 
   code {
     counter-reset: line;
     counter-increment: line;
     padding: 16px;
-    font-family: ${a};
-    color: ${o.common.white};
+    font-family: ${n};
+    color: ${t.common.white};
     * {
-      font-family: ${a};
+      font-family: ${n};
     }
   }
 
@@ -172,5 +175,5 @@ const a = "source-code-pro, Menlo, Monaco, Consolas, Courier New, monospace !imp
   }
 `;
 export {
-  ge as default
+  le as default
 };

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

@@ -8,7 +8,7 @@ export interface ConfigProviderProps extends Omit<LocaleProviderProps, 'translat
 /**
  * 集中化配置
  */
-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 ConfigProvider({ children, theme, injectFirst, darkSchemeClass, prefer, disableBlockletTheme, enableColorScheme, disableStyleCache, locale, fallbackLocale, translations, languages, onLoadingTranslation, }: ConfigProviderProps): import("react/jsx-runtime").JSX.Element;
 export declare function useConfig(): {
     mode: import('@mui/material').PaletteMode;
     toggleMode: () => void;

package/lib/Config/config-provider.js

@@ -1,9 +1,9 @@
 import { jsx as t } from "react/jsx-runtime";
-import { LocaleProvider as p, useLocaleContext as C } from "../Locale/context.js";
-import x, { useColorScheme as a } from "../Theme/theme-provider.js";
-import { useTheme as d } from "@mui/material";
+import { LocaleProvider as C, useLocaleContext as x } from "../Locale/context.js";
+import a, { useColorScheme as d } from "../Theme/theme-provider.js";
+import { useTheme as v } from "@mui/material";
 import "../Theme/theme.js";
-function T({
+function j({
   children: o,
   // theme provider
   theme: e,
@@ -12,15 +12,16 @@ function T({
   prefer: i,
   disableBlockletTheme: n = !1,
   enableColorScheme: c,
+  disableStyleCache: f,
   // locale provider
-  locale: f,
-  fallbackLocale: s,
-  translations: l = {},
-  languages: u,
-  onLoadingTranslation: h
+  locale: s,
+  fallbackLocale: l,
+  translations: u = {},
+  languages: h,
+  onLoadingTranslation: p
 }) {
   return /* @__PURE__ */ t(
-    x,
+    a,
     {
       theme: e,
       injectFirst: r,
@@ -28,22 +29,23 @@ function T({
       prefer: i,
       disableBlockletTheme: n,
       enableColorScheme: c,
+      disableStyleCache: f,
       children: /* @__PURE__ */ t(
-        p,
+        C,
         {
-          locale: f,
-          fallbackLocale: s,
-          translations: l,
-          onLoadingTranslation: h,
-          languages: u,
+          locale: s,
+          fallbackLocale: l,
+          translations: u,
+          onLoadingTranslation: p,
+          languages: h,
           children: o
         }
       )
     }
   );
 }
-function j() {
-  const o = d(), e = C(), r = a();
+function b() {
+  const o = v(), e = x(), r = d();
   return {
     theme: o,
     ...e,
@@ -51,6 +53,6 @@ function j() {
   };
 }
 export {
-  T as ConfigProvider,
-  j as useConfig
+  j as ConfigProvider,
+  b as useConfig
 };

package/lib/NavMenu/style.js

@@ -126,7 +126,7 @@ const o = i("nav", {
     ".navmenu-item__desc": {
       fontSize: "12px",
       lineHeight: 1,
-      color: t.palette.grey[500]
+      color: t.palette.text.secondary
     },
     "&:hover": {
       background: t.palette.action.hover,

package/lib/RelativeTime/index.js

@@ -1,7 +1,7 @@
 import { jsxs as I, jsx as n, Fragment as F } from "react/jsx-runtime";
 import { Box as a, Tooltip as M } from "@mui/material";
 import { useEffect as R, useMemo as $ } from "react";
-import c from "dayjs";
+import s from "dayjs";
 import "dayjs/locale/zh-cn";
 import k from "dayjs/plugin/utc";
 import B from "dayjs/plugin/timezone";
@@ -10,12 +10,12 @@ import H from "dayjs/plugin/updateLocale";
 import N from "dayjs/plugin/localizedFormat";
 import { create as Z } from "zustand";
 import { formatToDatetime as O, setDateTool as q } from "../Util/index.js";
-c.extend(N);
-c.extend(k);
-c.extend(B);
-c.extend(H);
-c.extend(E);
-c.updateLocale("zh-cn", {
+s.extend(N);
+s.extend(k);
+s.extend(B);
+s.extend(H);
+s.extend(E);
+s.updateLocale("zh-cn", {
   // copy with https://github.com/iamkun/dayjs/blob/dev/src/locale/zh-cn.js
   relativeTime: {
     future: "%s后",
@@ -33,7 +33,7 @@ c.updateLocale("zh-cn", {
     yy: "%d 年"
   }
 });
-q(c);
+q(s);
 const j = {
   en: {
     utc: "UTC Timezone",
@@ -56,33 +56,33 @@ function w({
   locale: o = "en",
   withoutSuffix: p = !1,
   from: d = "",
-  to: u = "",
+  to: x = "",
   type: i = "relative",
   tz: l,
-  relativeRange: y,
-  format: U
+  relativeRange: m,
+  format: g
 }) {
-  const x = (/* @__PURE__ */ new Date()).getTimezoneOffset(), C = x > 0 ? "-" : "+", v = Math.abs(x) / 60, g = x === 0, r = A((L) => L.isUtc), T = A((L) => L.setIsUtc);
+  const C = (/* @__PURE__ */ new Date()).getTimezoneOffset(), T = C > 0 ? "-" : "+", v = Math.abs(C) / 60, L = C === 0, r = A((y) => y.isUtc), U = A((y) => y.setIsUtc);
   if (R(() => {
-    T(g);
-  }, [g]), !t)
-    return { innerContent: "-", popContent: "-", isUtc: r, setIsUtc: T, sign: C, hoursOffset: v };
-  const m = o === "zh" ? "zh-cn" : "en-us";
-  let s = c(t).locale(m);
-  i === "utc" && (s = c(t).utc().locale(m)), l && (s = s.tz(l));
-  const f = O(t, { locale: m, tz: l, format: U });
+    U(L);
+  }, [L]), !t)
+    return { innerContent: "-", popContent: "-", isUtc: r, setIsUtc: U, sign: T, hoursOffset: v };
+  const h = o === "zh" ? "zh-cn" : "en-us";
+  let c = s(t).locale(h);
+  i === "utc" && (c = s(t).utc().locale(h)), l && (c = c.tz(l));
+  const f = O(t, { locale: h, tz: l, format: g });
   let e;
   if (d)
-    e = s.from(d, p);
-  else if (u)
-    e = s.to(u, p);
-  else if (y) {
-    const L = s.diff(c());
-    Math.abs(L) > y && (e = f);
+    e = c.from(d, p);
+  else if (x)
+    e = c.to(x, p);
+  else if (m) {
+    const y = c.diff(s());
+    Math.abs(y) > m && (e = f);
   }
-  e || (e = s.fromNow(p));
-  let h = e, b = f;
-  return i === "absolute" && (h = f, b = e), i === "utc" && (r ? (h = O(t, { locale: m, tz: l, isUtc: !0, format: U }), b = O(t, { locale: m, tz: l, isUtc: !0, format: U })) : (h = f, b = e)), { innerContent: h, popContent: b, isUtc: r, setIsUtc: T, sign: C, hoursOffset: v, relativeString: e, absoluteString: f };
+  e || (e = c.fromNow(p));
+  let u = e, b = f;
+  return i === "absolute" && (u = f, b = e), i === "utc" && (r ? (u = O(t, { locale: h, tz: l, isUtc: !0, format: g }), b = O(t, { locale: h, tz: l, isUtc: !0, format: g })) : (u = f, b = e)), { innerContent: u, popContent: b, isUtc: r, setIsUtc: U, sign: T, hoursOffset: v, relativeString: e, absoluteString: f };
 }
 function z({
   locale: t,
@@ -90,9 +90,9 @@ function z({
   setIsUtc: p,
   useShortTimezone: d = !0
 }) {
-  const u = $(() => {
-    const i = d ? "shortUTC" : "utc", l = d ? "shortLocal" : "local";
-    return o ? `${j[t][i]}` : `${j[t][l]}`;
+  const x = $(() => {
+    const i = d ? "shortUTC" : "utc", l = d ? "shortLocal" : "local", m = j[t] || j.en;
+    return o ? `${m[i]}` : `${m[l]}`;
   }, [t, d, o]);
   return /* @__PURE__ */ n(
     a,
@@ -108,7 +108,7 @@ function z({
         lineHeight: 1
       },
       onClick: () => p(!o),
-      children: u
+      children: x
     }
   );
 }
@@ -117,29 +117,29 @@ function et({
   locale: o = "en",
   withoutSuffix: p = !1,
   from: d = "",
-  to: u = "",
+  to: x = "",
   type: i = "relative",
   tz: l = void 0,
-  relativeRange: y = void 0,
-  enableTooltip: U = !0,
+  relativeRange: m = void 0,
+  enableTooltip: g = !0,
   useShortTimezone: D = !1,
-  disableTimezone: x = !1,
-  placement: C = "top-end",
+  disableTimezone: C = !1,
+  placement: T = "top-end",
   format: v = "lll",
-  mode: g = "all",
+  mode: L = "all",
   ...r
 }) {
-  const { innerContent: T, popContent: m, isUtc: s, setIsUtc: f, relativeString: e } = w({
+  const { innerContent: U, popContent: h, isUtc: c, setIsUtc: f, relativeString: e } = w({
     value: t,
     locale: o,
     withoutSuffix: p,
     from: d,
-    to: u,
+    to: x,
     type: i === "all" ? "utc" : i,
     tz: l,
-    relativeRange: y,
+    relativeRange: m,
     format: v
-  }), h = /* @__PURE__ */ I(
+  }), u = /* @__PURE__ */ I(
     a,
     {
       ...r,
@@ -152,17 +152,17 @@ function et({
         ...Array.isArray(r.sx) ? r.sx : [r.sx]
       ],
       children: [
-        /* @__PURE__ */ n(a, { component: "span", ...r, sx: {}, children: T }),
+        /* @__PURE__ */ n(a, { component: "span", ...r, sx: {}, children: U }),
         /* @__PURE__ */ n(a, { component: "span", sx: { color: "inherit" }, children: "·" }),
         /* @__PURE__ */ n(a, { component: "span", sx: { color: "inherit" }, children: e }),
-        !x && /* @__PURE__ */ I(F, { children: [
+        !C && /* @__PURE__ */ I(F, { children: [
           /* @__PURE__ */ n(a, { component: "span", sx: { color: "inherit" }, children: "·" }),
-          /* @__PURE__ */ n(z, { locale: o, isUtc: s, setIsUtc: f, useShortTimezone: D })
+          /* @__PURE__ */ n(z, { locale: o, isUtc: c, setIsUtc: f, useShortTimezone: D })
         ] })
       ]
     }
   );
-  return g === "daysLeft" ? /* @__PURE__ */ n(M, { title: h, placement: C, enterTouchDelay: 0, children: /* @__PURE__ */ n(a, { component: "span", children: e }) }) : i === "all" && g === "all" ? /* @__PURE__ */ n(M, { title: void 0, placement: C, enterTouchDelay: 0, children: h }) : /* @__PURE__ */ n(M, { title: U ? m : void 0, placement: C, enterTouchDelay: 0, children: /* @__PURE__ */ I(
+  return L === "daysLeft" ? /* @__PURE__ */ n(M, { title: u, placement: T, enterTouchDelay: 0, children: /* @__PURE__ */ n(a, { component: "span", children: e }) }) : i === "all" && L === "all" ? /* @__PURE__ */ n(M, { title: void 0, placement: T, enterTouchDelay: 0, children: u }) : /* @__PURE__ */ n(M, { title: g ? h : void 0, placement: T, enterTouchDelay: 0, children: /* @__PURE__ */ I(
     a,
     {
       sx: {
@@ -171,8 +171,8 @@ function et({
         gap: 1
       },
       children: [
-        /* @__PURE__ */ n(a, { component: "span", ...r, children: T }),
-        i === "utc" && !x && /* @__PURE__ */ n(z, { locale: o, isUtc: s, setIsUtc: f, useShortTimezone: D })
+        /* @__PURE__ */ n(a, { component: "span", ...r, children: U }),
+        i === "utc" && !C && /* @__PURE__ */ n(z, { locale: o, isUtc: c, setIsUtc: f, useShortTimezone: D })
       ]
     }
   ) });

package/lib/Tag/index.d.ts

@@ -23,9 +23,9 @@ export type TagProps = TypographyProps & TagOwnProps;
 /**
  * @description
  * @param {TagProps} props
- * @return {import('react').ReactNode}
+ * @return {JSX.Element}
  */
-declare function Tag({ ...rawProps }: TagProps): import('react').ReactNode;
+declare function Tag({ ...rawProps }: TagProps): JSX.Element;
 declare namespace Tag {
     namespace propTypes {
         let children: PropTypes.Validator<any>;

package/lib/Tag/index.js

@@ -5,7 +5,7 @@ import n from "lodash/isUndefined";
 import { mergeProps as x } from "../Util/index.js";
 import e from "../Colors/themes/default.js";
 import { styled as w } from "../Theme/index.js";
-const i = {
+const c = {
   error: {
     color: e.common.white,
     backgroundColor: e.error.main
@@ -27,18 +27,18 @@ const i = {
     backgroundColor: "#222"
   }
 };
-function a({ ...m }) {
-  const o = Object.assign({}, m);
+function p({ ...s }) {
+  const o = Object.assign({}, s);
   n(o.type) && (o.type = "primary"), n(o.content) && (o.content = ""), n(o.style) && (o.style = {}), n(o.className) && (o.className = "");
-  const p = x(o, a, ["style"]), { type: t, content: l, children: y, style: f, className: g, ...d } = p, { palette: s } = b(), c = Object.assign({}, i[t] || i.primary, f);
-  return s[t] && Object.assign(c, {
-    color: s[t].contrastText || e.common.white,
-    backgroundColor: s[t].main
-  }), /* @__PURE__ */ h(j, { component: "span", className: g, style: c, ...d, children: l || y });
+  const m = x(o, p, ["style"]), { type: t, content: l, children: y, style: f, className: g, ...d } = m, { palette: i } = b(), a = Object.assign({}, c[t] || c.primary, f);
+  return i[t] && Object.assign(a, {
+    color: i[t].contrastText || e.common.white,
+    backgroundColor: i[t].main
+  }), /* @__PURE__ */ h(j, { component: "span", className: g, style: a, ...d, children: l || y });
 }
-a.propTypes = {
+p.propTypes = {
   children: r.any.isRequired,
-  type: r.oneOf(Object.keys(i)),
+  type: r.oneOf(Object.keys(c)),
   content: r.string,
   className: r.string,
   style: r.oneOfType([r.object, r.string])
@@ -53,9 +53,9 @@ const j = w(u)`
     line-height: 20px;
     font-size: 12px;
     font-weight: 500;
-    border-radius: 4px;
+    border-radius: ${({ theme: s }) => s.shape.borderRadius * 0.5}px;
   }
 `;
 export {
-  a as default
+  p as default
 };

package/lib/Theme/theme-provider.d.ts

@@ -6,18 +6,20 @@ export interface ColorSchemeContextType {
     changeMode: (mode: PaletteMode) => void;
     prefer?: Prefer;
 }
-export declare const ColorSchemeContext: import('react').Context<ColorSchemeContextType>;
-export declare function useColorScheme(): ColorSchemeContextType;
 export type UxTheme = ThemeOptions | ((parentTheme: Theme, context?: {
     mode: PaletteMode;
 }) => Theme);
 export type Prefer = 'light' | 'dark' | 'system';
+export declare const ColorSchemeContext: import('react').Context<ColorSchemeContextType>;
+export declare function useColorScheme(): ColorSchemeContextType;
 interface BaseThemeProviderProps {
     children?: React.ReactNode;
     theme?: UxTheme;
     injectFirst?: boolean;
     /** 指定一个类名，DarkSchemeStyles 只会作用于带有该类的元素及其后代 */
     darkSchemeClass?: string;
+    /** 禁用样式缓存 */
+    disableStyleCache?: boolean;
 }
 interface ColorSchemeProviderProps extends BaseThemeProviderProps {
     prefer?: Prefer;

package/lib/Theme/theme-provider.js

@@ -1,50 +1,53 @@
-import { jsx as m, jsxs as I } from "react/jsx-runtime";
-import { createContext as N, use as O, useState as x, useRef as K, useMemo as g, useCallback as B, useEffect as b } from "react";
-import { useTheme as R, CssBaseline as V, StyledEngineProvider as W, ThemeProvider as q, GlobalStyles as z } from "@mui/material";
-import { deepmerge as Y } from "@mui/utils";
-import $ from "lodash/set";
-import J from "lodash/isUndefined";
-import { useDebounceFn as Q, useCreation as M } from "ahooks";
-import { getBlockletThemeOptions as X, BLOCKLET_THEME_PREFER_KEY as h, isValidThemeMode as Z, getDefaultThemePrefer as P } from "@blocklet/theme";
-import { useLocationState as ee } from "../hooks/use-location-state.js";
-import { createTheme as C, lazyCreateDefaultTheme as te, isUxTheme as oe, isTheme as re } from "./theme.js";
-const ne = C(), j = N({});
-function A() {
-  return O(j);
+import { jsx as a, jsxs as K } from "react/jsx-runtime";
+import { createContext as O, use as V, useState as $, useRef as W, useMemo as g, useCallback as y, useEffect as f } from "react";
+import { useTheme as A, CssBaseline as B, StyledEngineProvider as q, ThemeProvider as z, GlobalStyles as Y } from "@mui/material";
+import { deepmerge as J } from "@mui/utils";
+import M from "lodash/set";
+import Q from "lodash/isUndefined";
+import { useDebounceFn as X, useCreation as P } from "ahooks";
+import { getBlockletThemeOptions as Z, BLOCKLET_THEME_PREFER_KEY as h, isValidThemeMode as ee, getDefaultThemePrefer as _ } from "@blocklet/theme";
+import { useLocationState as te } from "../hooks/use-location-state.js";
+import { createTheme as T, lazyCreateDefaultTheme as re, isUxTheme as oe, isTheme as ne } from "./theme.js";
+const se = T(), N = O({});
+function U() {
+  return V(N);
 }
-const _ = (i) => i ? i === "system" ? P({ theme: { prefer: "system" } }) : i : P();
-function se({ className: i = void 0 }) {
-  const t = R();
-  if (t.palette.mode === "dark") {
-    const n = "transparent", s = t.palette.grey[300], o = (i || "").trim().split(/\s+/).filter(Boolean).map((d) => d.startsWith(".") ? d : `.${d}`).join(" "), u = o ? `${o}::-webkit-scrollbar, ${o} *::-webkit-scrollbar` : "*::-webkit-scrollbar", r = o ? `${o}::-webkit-scrollbar-track, ${o} *::-webkit-scrollbar-track` : "*::-webkit-scrollbar-track", a = o ? `${o}::-webkit-scrollbar-thumb, ${o} *::-webkit-scrollbar-thumb` : "*::-webkit-scrollbar-thumb", c = o ? `${o}, ${o} *` : "*";
-    return /* @__PURE__ */ m(
-      z,
+const D = (i) => i ? i === "system" ? _({ theme: { prefer: "system" } }) : i : _();
+function L({ className: i = void 0 }) {
+  const r = A();
+  if (r.palette.mode === "dark") {
+    const n = "transparent", s = r.palette.grey[300], t = (i || "").trim().split(/\s+/).filter(Boolean).map((m) => m.startsWith(".") ? m : `.${m}`).join(" "), d = t ? `${t}::-webkit-scrollbar, ${t} *::-webkit-scrollbar` : "*::-webkit-scrollbar", o = t ? `${t}::-webkit-scrollbar-track, ${t} *::-webkit-scrollbar-track` : "*::-webkit-scrollbar-track", c = t ? `${t}::-webkit-scrollbar-thumb, ${t} *::-webkit-scrollbar-thumb` : "*::-webkit-scrollbar-thumb", u = t ? `${t}::-webkit-scrollbar-corner, ${t} *::-webkit-scrollbar-corner` : "*::-webkit-scrollbar-corner", k = t ? `${t}, ${t} *` : "*";
+    return /* @__PURE__ */ a(
+      Y,
       {
         styles: {
           // Chrome, Safari, Edge
           "@supports selector(::-webkit-scrollbar)": {
-            [u]: {
+            [d]: {
               width: "12px",
               height: "12px"
             },
-            [r]: {
+            [o]: {
               background: n
             },
-            [a]: {
+            [c]: {
               background: s,
               borderRadius: "6px",
               border: "2px solid",
               borderColor: n,
               backgroundClip: "padding-box",
               "&:hover": {
-                background: t.palette.grey[400],
+                background: r.palette.grey[400],
                 backgroundClip: "padding-box"
               }
+            },
+            [u]: {
+              background: n
             }
           },
           // Firefox
           "@supports not selector(::-webkit-scrollbar)": {
-            [c]: {
+            [k]: {
               scrollbarWidth: "auto",
               scrollbarColor: `${s} ${n}`
             }
@@ -55,101 +58,102 @@ function se({ className: i = void 0 }) {
   }
   return null;
 }
-let D = !1;
-const L = {};
-function U({
+let R = !1;
+const j = {};
+function F({
   children: i = null,
-  theme: t = ne,
+  theme: r = se,
   injectFirst: n = !0,
-  darkSchemeClass: s = ""
+  darkSchemeClass: s = "",
+  disableStyleCache: t = !1
 }) {
-  const o = g(() => typeof t == "function" || re(t) ? t : C(t), [t]), u = M(() => D ? null : (D = !0, /* @__PURE__ */ m(V, {})), []), r = M(() => L[s] ? null : (L[s] = !0, /* @__PURE__ */ m(se, { className: s })), [s]);
+  const d = g(() => typeof r == "function" || ne(r) ? r : T(r), [r]), o = P(() => t ? /* @__PURE__ */ a(B, {}) : R ? null : (R = !0, /* @__PURE__ */ a(B, {})), [t]), c = P(() => t ? /* @__PURE__ */ a(L, { className: s }) : j[s] ? null : (j[s] = !0, /* @__PURE__ */ a(L, { className: s })), [s, t]);
   return (
     // injectFirst 会影响 makeStyles 自定义样式和 mui styles 覆盖问题
-    /* @__PURE__ */ m(W, { injectFirst: n, children: /* @__PURE__ */ I(q, { theme: o, children: [
-      u,
-      r,
+    /* @__PURE__ */ a(q, { injectFirst: n, children: /* @__PURE__ */ K(z, { theme: d, children: [
+      o,
+      c,
       i
     ] }) })
   );
 }
 function le({
   children: i = null,
-  theme: t = void 0,
+  theme: r = void 0,
   prefer: n = void 0,
   disableBlockletTheme: s = !1,
-  ...o
+  ...t
 }) {
-  const u = A(), [r, a] = x(() => _(n)), [c, d] = x(null), p = R(), k = ee(), f = K(null), S = J(u.toggleMode), { run: w } = Q(
+  const d = U(), [o, c] = $(() => D(n)), [u, k] = $(null), m = A(), p = te(), b = W(null), C = Q(d.toggleMode), { run: S } = X(
     (e) => {
-      d(e);
+      k(e);
     },
     {
       wait: 200
     }
   ), v = g(() => {
     let e = {};
-    if (t) {
-      const G = te(r);
-      if (typeof t == "function") {
-        const H = G();
-        oe(p) ? e = { ...t(p, { mode: r }) } : e = { ...t(H, { mode: r }) };
+    if (r) {
+      const H = re(o);
+      if (typeof r == "function") {
+        const I = H();
+        oe(m) ? e = { ...r(m, { mode: o }) } : e = { ...r(I, { mode: o }) };
       } else
-        e = { ...t };
+        e = { ...r };
     }
-    let l = r;
-    return c && (l = c.mode || "light", e = Y(e, X(l, c))), $(e, "palette.mode", l), $(e, "mode", l), e;
-  }, [r, t, p, c]), T = g(() => C({ ...v, disableBlockletTheme: !!c || s }), [v, s, c]), E = B(() => {
-    const e = r === "light" ? "dark" : "light";
-    a(e), sessionStorage.removeItem(h), localStorage.setItem(h, e);
-  }, [r, a]), y = B(
+    let l = o;
+    return u && (l = u.mode || "light", e = J(e, Z(l, u))), M(e, "palette.mode", l), M(e, "mode", l), e;
+  }, [o, r, m, u]), w = g(() => T({ ...v, disableBlockletTheme: !!u || s }), [v, s, u]), E = y(() => {
+    const e = o === "light" ? "dark" : "light";
+    c(e), sessionStorage.removeItem(h), localStorage.setItem(h, e);
+  }, [o, c]), x = y(
     (e) => {
-      r !== e && (a(e), sessionStorage.removeItem(h), localStorage.setItem(h, e));
+      o !== e && (c(e), sessionStorage.removeItem(h), localStorage.setItem(h, e));
     },
-    [r, a]
-  ), F = g(
+    [o, c]
+  ), G = g(
     () => ({
-      mode: r,
+      mode: o,
       toggleMode: E,
-      changeMode: y,
+      changeMode: x,
       prefer: n
     }),
-    [r, n, E, y]
+    [o, n, E, x]
   );
-  return b(() => {
-    a(_(n));
-  }, [n, a, k.search]), b(() => {
-    const e = new URLSearchParams(k.search).get("theme");
-    Z(e) && sessionStorage.setItem(h, e);
-  }, [k.search]), b(() => {
-    f.current || (f.current = document.querySelector('meta[name="theme-color"]'));
-    const e = T.palette.background.default;
-    if (f.current)
-      f.current.setAttribute("content", e);
+  return f(() => {
+    c(D(n));
+  }, [n, c, p.search]), f(() => {
+    const e = new URLSearchParams(p.search).get("theme");
+    ee(e) && sessionStorage.setItem(h, e);
+  }, [p.search]), f(() => {
+    b.current || (b.current = document.querySelector('meta[name="theme-color"]'));
+    const e = w.palette.background.default;
+    if (b.current)
+      b.current.setAttribute("content", e);
     else {
       const l = document.createElement("meta");
-      l.name = "theme-color", l.content = e, document.head.appendChild(l), f.current = l;
+      l.name = "theme-color", l.content = e, document.head.appendChild(l), b.current = l;
     }
-  }, [T.palette.background.default]), b(() => {
+  }, [w.palette.background.default]), f(() => {
     const e = (l) => {
-      l.origin === window.origin && l.data.type === "THEME_BUILDER_CONFIG_CHANGED" && w(l.data.payload);
+      l.origin === window.origin && l.data.type === "THEME_BUILDER_CONFIG_CHANGED" && S(l.data.payload);
     };
     return window.addEventListener("message", e), () => window.removeEventListener("message", e);
-  }, [w]), b(() => {
-    S && (r === "dark" ? document.documentElement.setAttribute("data-theme", "dark") : document.documentElement.removeAttribute("data-theme"));
-  }, [S, r]), /* @__PURE__ */ m(j, { value: F, children: /* @__PURE__ */ m(U, { theme: T, ...o, children: i }) });
+  }, [S]), f(() => {
+    C && (o === "dark" ? document.documentElement.setAttribute("data-theme", "dark") : document.documentElement.removeAttribute("data-theme"));
+  }, [C, o]), /* @__PURE__ */ a(N, { value: G, children: /* @__PURE__ */ a(F, { theme: w, ...t, children: i }) });
 }
-function pe({
+function ke({
   children: i = null,
-  prefer: t = void 0,
+  prefer: r = void 0,
   enableColorScheme: n = !1,
   ...s
 }) {
-  const { toggleMode: o } = A();
-  return n || t || !o ? /* @__PURE__ */ m(le, { prefer: t, ...s, children: i }) : /* @__PURE__ */ m(U, { ...s, children: i });
+  const { toggleMode: t } = U();
+  return n || r || !t ? /* @__PURE__ */ a(le, { prefer: r, ...s, children: i }) : /* @__PURE__ */ a(F, { ...s, children: i });
 }
 export {
-  j as ColorSchemeContext,
-  pe as default,
-  A as useColorScheme
+  N as ColorSchemeContext,
+  ke as default,
+  U as useColorScheme
 };

package/lib/Theme/theme.d.ts

@@ -1,5 +1,6 @@
-import { ThemeOptions, PaletteMode, Theme } from '@mui/material';
+import { PaletteMode } from '@mui/material';
 import { deepmerge } from '@mui/utils';
+import { ThemeOptions, Theme } from '@blocklet/theme';
 /** 是否是 MUI Theme 对象 */
 export declare function isTheme(obj: any): obj is Theme;
 /** 是否是 UX Theme 对象 */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "3.0.26",
+  "version": "3.0.28",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -60,16 +60,16 @@
     "react": "^19.0.0",
     "react-router-dom": "^6.22.3"
   },
-  "gitHead": "7bfbe63186facc499363ec4bcc776d1506893576",
+  "gitHead": "a2d0c2d51c4a6f4fd301e59104fa5811bf4bd4ab",
   "dependencies": {
-    "@arcblock/bridge": "3.0.26",
+    "@arcblock/bridge": "3.0.28",
     "@arcblock/did": "^1.20.15",
     "@arcblock/did-motif": "^1.1.14",
-    "@arcblock/icons": "3.0.26",
-    "@arcblock/nft-display": "3.0.26",
-    "@arcblock/react-hooks": "3.0.26",
+    "@arcblock/icons": "3.0.28",
+    "@arcblock/nft-display": "3.0.28",
+    "@arcblock/react-hooks": "3.0.28",
     "@blocklet/js-sdk": "^1.16.46",
-    "@blocklet/theme": "3.0.26",
+    "@blocklet/theme": "3.0.28",
     "@fontsource/roboto": "~5.1.1",
     "@fontsource/ubuntu-mono": "^5.2.6",
     "@iconify-icons/logos": "^1.2.36",

package/src/CodeBlock/index.tsx

@@ -120,7 +120,9 @@ export default function CodeBlock({
 }
 
 const fontFamily = 'source-code-pro, Menlo, Monaco, Consolas, Courier New, monospace !important';
-const Pre = styled('pre')`
+const Pre = styled('pre', {
+  shouldForwardProp: (prop) => prop !== 'sx',
+})`
   font-family: ${fontFamily};
   display: block;
   font-size: 14px;
@@ -130,9 +132,10 @@ const Pre = styled('pre')`
   word-wrap: break-word;
   text-align: left;
   border-radius: 5px;
-  border: 1px solid #dedede;
-  background: #222;
-  color: ${colors.common.white};
+  border: 1px solid;
+  border-color: ${({ theme }) => theme.palette.divider};
+  background: ${({ theme }) => theme.palette.background.default};
+  color: ${({ theme }) => theme.palette.common.white};
   position: relative;
 
   .codeblock__inner {

package/src/Config/config-provider.tsx

@@ -20,6 +20,7 @@ export function ConfigProvider({
   prefer,
   disableBlockletTheme = false,
   enableColorScheme,
+  disableStyleCache,
   // locale provider
   locale,
   fallbackLocale,
@@ -34,7 +35,8 @@ export function ConfigProvider({
       darkSchemeClass={darkSchemeClass}
       prefer={prefer}
       disableBlockletTheme={disableBlockletTheme}
-      enableColorScheme={enableColorScheme}>
+      enableColorScheme={enableColorScheme}
+      disableStyleCache={disableStyleCache}>
       <LocaleProvider
         locale={locale}
         fallbackLocale={fallbackLocale}

package/src/NavMenu/style.ts

@@ -141,7 +141,7 @@ export const NavMenuItem = styled('li', {
     '.navmenu-item__desc': {
       fontSize: '12px',
       lineHeight: 1,
-      color: theme.palette.grey[500],
+      color: theme.palette.text.secondary,
     },
     '&:hover': {
       background: theme.palette.action.hover,

package/src/RelativeTime/index.tsx

@@ -180,12 +180,14 @@ function UTCChip({
   const text = useMemo(() => {
     const UTC = useShortTimezone ? 'shortUTC' : 'utc';
     const LOCAL = useShortTimezone ? 'shortLocal' : 'local';
+    // fallback to en
+    const config = translations[locale] || translations.en;
 
     if (isUtc) {
-      return `${translations[locale][UTC]}`;
+      return `${config[UTC]}`;
     }
 
-    return `${translations[locale][LOCAL]}`;
+    return `${config[LOCAL]}`;
   }, [locale, useShortTimezone, isUtc]);
 
   return (

package/src/Tag/index.jsx

@@ -44,7 +44,7 @@ const types = {
 /**
  * @description
  * @param {TagProps} props
- * @return {import('react').ReactNode}
+ * @return {JSX.Element}
  */
 function Tag({ ...rawProps }) {
   const props = Object.assign({}, rawProps);
@@ -101,6 +101,6 @@ const Span = styled(Typography)`
     line-height: 20px;
     font-size: 12px;
     font-weight: 500;
-    border-radius: 4px;
+    border-radius: ${({ theme }) => theme.shape.borderRadius * 0.5}px;
   }
 `;

package/src/Theme/Theme.stories.jsx

@@ -4,6 +4,7 @@ export { default as Shadows } from './demo/shadows';
 export { default as WithCustomKey } from './demo/with-custom-key';
 export { default as CustomFonts } from './demo/custom-fonts';
 export { default as UrlTheme } from './demo/url-theme';
+export { default as CodeBlock } from './demo/code-block';
 
 export default {
   title: 'Theme/Theme',

package/src/Theme/theme-provider.tsx

@@ -33,6 +33,8 @@ export interface ColorSchemeContextType {
   changeMode: (mode: PaletteMode) => void;
   prefer?: Prefer;
 }
+export type UxTheme = ThemeOptions | ((parentTheme: Theme, context?: { mode: PaletteMode }) => Theme);
+export type Prefer = 'light' | 'dark' | 'system';
 
 export const ColorSchemeContext = createContext<ColorSchemeContextType>({} as ColorSchemeContextType);
 export function useColorScheme() {
@@ -77,6 +79,9 @@ function DarkSchemeStyles({ className = undefined }: { className?: string }) {
     const webkitThumb = prefix
       ? `${prefix}::-webkit-scrollbar-thumb, ${prefix} *::-webkit-scrollbar-thumb`
       : '*::-webkit-scrollbar-thumb';
+    const webKitCorner = prefix
+      ? `${prefix}::-webkit-scrollbar-corner, ${prefix} *::-webkit-scrollbar-corner`
+      : '*::-webkit-scrollbar-corner';
     const firefoxSelector = prefix ? `${prefix}, ${prefix} *` : '*';
 
     return (
@@ -102,6 +107,9 @@ function DarkSchemeStyles({ className = undefined }: { className?: string }) {
                 backgroundClip: 'padding-box',
               },
             },
+            [webKitCorner]: {
+              background: trackColor,
+            },
           },
           // Firefox
           '@supports not selector(::-webkit-scrollbar)': {
@@ -118,8 +126,8 @@ function DarkSchemeStyles({ className = undefined }: { className?: string }) {
   return null;
 }
 
-export type UxTheme = ThemeOptions | ((parentTheme: Theme, context?: { mode: PaletteMode }) => Theme);
-export type Prefer = 'light' | 'dark' | 'system';
+let injectedCssBaseline = false;
+const injectedDarkSchemeStylesMap: Record<string, boolean> = {};
 
 interface BaseThemeProviderProps {
   children?: React.ReactNode;
@@ -127,17 +135,16 @@ interface BaseThemeProviderProps {
   injectFirst?: boolean;
   /** 指定一个类名，DarkSchemeStyles 只会作用于带有该类的元素及其后代 */
   darkSchemeClass?: string;
+  /** 禁用样式缓存 */
+  disableStyleCache?: boolean;
 }
-
-let injectedCssBaseline = false;
-const injectedDarkSchemeStylesMap: Record<string, boolean> = {};
-
 /** 快速配置 MUI 主题 */
 function BaseThemeProvider({
   children = null,
   theme = defaultTheme,
   injectFirst = true,
   darkSchemeClass = '',
+  disableStyleCache = false,
 }: BaseThemeProviderProps) {
   const _theme = useMemo(() => {
     if (typeof theme === 'function') {
@@ -151,18 +158,20 @@ function BaseThemeProvider({
   }, [theme]);
 
   const cssBaseline = useCreation(() => {
-    if (injectedCssBaseline) return null;
+    if (disableStyleCache) return <CssBaseline />;
 
+    if (injectedCssBaseline) return null;
     injectedCssBaseline = true;
     return <CssBaseline />;
-  }, []);
+  }, [disableStyleCache]);
 
   const darkSchemeStyles = useCreation(() => {
-    if (injectedDarkSchemeStylesMap[darkSchemeClass]) return null;
+    if (disableStyleCache) return <DarkSchemeStyles className={darkSchemeClass} />;
 
+    if (injectedDarkSchemeStylesMap[darkSchemeClass]) return null;
     injectedDarkSchemeStylesMap[darkSchemeClass] = true;
     return <DarkSchemeStyles className={darkSchemeClass} />;
-  }, [darkSchemeClass]);
+  }, [darkSchemeClass, disableStyleCache]);
 
   return (
     // injectFirst 会影响 makeStyles 自定义样式和 mui styles 覆盖问题
@@ -180,7 +189,6 @@ interface ColorSchemeProviderProps extends BaseThemeProviderProps {
   prefer?: Prefer;
   disableBlockletTheme?: boolean;
 }
-
 /** 配置带颜色模式切换功能的 MUI 主题 */
 function ColorSchemeProvider({
   children = null,
@@ -349,7 +357,6 @@ export interface ThemeProviderProps extends ColorSchemeProviderProps {
    */
   enableColorScheme?: boolean;
 }
-
 export default function ThemeProvider({
   children = null,
   prefer = undefined,

package/src/Theme/theme.ts

@@ -1,12 +1,6 @@
 /* eslint-disable no-shadow */
 // https://app.zeplin.io/styleguide/5d1436f1e97c2156f49c0725/colors
-import {
-  createTheme as _createTheme,
-  responsiveFontSizes,
-  type ThemeOptions,
-  type PaletteMode,
-  type Theme,
-} from '@mui/material';
+import { createTheme as _createTheme, responsiveFontSizes, type PaletteMode } from '@mui/material';
 import { deepmerge } from '@mui/utils';
 import webfontloader from 'webfontloader';
 import {
@@ -15,6 +9,8 @@ import {
   DEFAULT_FONTS,
   getDefaultThemePrefer,
   getBlockletThemeOptions,
+  type ThemeOptions,
+  type Theme,
 } from '@blocklet/theme';
 import { cleanedObj, deepmergeAll } from '../Util';