@blocklet/pages-kit-inner-components 0.6.6 → 0.6.8

package/lib/es/chunks/{index-D5gXPe_7.js → index-DaF8ujCZ.js}

@@ -1,40 +1,37 @@
-import { jsx as n, jsxs as k, Fragment as X } from "react/jsx-runtime";
-import { ErrorOutline as Ut } from "@mui/icons-material";
-import { Box as f, styled as Ft, Typography as M, Container as Ht, Stack as Vt, useTheme as yt, createTheme as Yt, ThemeProvider as Dt, useMediaQuery as Jt, Card as Gt, CircularProgress as Kt, Grid as ct, CardMedia as Xt, CardContent as qt, Alert as Qt } from "@mui/material";
-import Zt from "lodash/isEmpty";
-import q from "lodash/pick";
-import te, { createContext as wt, useMemo as P, useCallback as O, useContext as vt, Fragment as ee, isValidElement as kt, useState as Q, useEffect as U, useRef as rt } from "react";
-import Z from "lodash/keyBy";
-import { e as R, f as N, E as oe, i as it, l as at } from "./state-0gvZF3k2.js";
-import { AIForm as dt, AIFormResult as mt } from "@blocklet/ai-runtime/components";
-import { deepmerge as ne } from "@mui/utils";
-import { ErrorBoundary as re } from "react-error-boundary";
-import ie from "@blocklet/pages-kit/builtin/markdown/markdown-renderer";
-import { useColorConvert as _t } from "@blocklet/pages-kit/contexts/color";
-import { cx as v, css as et } from "@emotion/css";
-import { materialDark as ae } from "react-syntax-highlighter/dist/esm/styles/prism";
-import { useTheme as $t, styled as $ } from "@arcblock/ux/lib/Theme";
-import se from "@arcblock/react-hooks/lib/useBrowser";
-import pt from "@arcblock/ux/lib/Colors";
-import { ResponsiveImage as St, CustomComponentRenderer as le } from "@blocklet/pages-kit/components";
-import { isGradient as ce, isColorString as de } from "@blocklet/pages-kit/utils/style";
-import Ct from "@mui/material/useMediaQuery";
-import B from "lodash/omit";
-import { Icon as Nt } from "@iconify-icon/react";
-import me from "@arcblock/ux/lib/Screenshot";
-import { Link as pe, NavLink as ue, useNavigate as he } from "react-router-dom";
-import ge from "@arcblock/ux/lib/Button";
-import ot from "is-uri";
-import { join as G } from "pathe";
-import { withoutTrailingSlash as tt, isRelative as fe, parseURL as xe } from "ufo";
-import { useMessage as be } from "@blocklet/embed/message";
-import { useLatest as ye } from "ahooks";
-import we from "lodash/isEqual";
-import { EmbedIframe as ve } from "@blocklet/embed/react";
-import { useLocaleContext as ke } from "@arcblock/ux/lib/Locale/context";
-import { TwitterTimelineEmbed as _e } from "react-twitter-embed";
-import { useUpdate as $e, useMount as Se } from "react-use";
-const Bt = "{{CUSTOM_VALUE}}", Ce = [
+import { jsx as r, jsxs as w, Fragment as D } from "react/jsx-runtime";
+import { ErrorOutline as Lt } from "@mui/icons-material";
+import { Box as f, styled as Et, Typography as I, Container as At, useTheme as Tt, useMediaQuery as Ot, Card as Ut, CircularProgress as Ht, Grid as lt, CardMedia as Ft, CardContent as Yt, Alert as Vt } from "@mui/material";
+import Dt from "lodash/isEmpty";
+import nt from "lodash/pick";
+import Jt, { createContext as ft, useMemo as W, useCallback as A, useContext as xt, useState as J, useEffect as T, Fragment as Gt, isValidElement as bt, useRef as rt } from "react";
+import G from "lodash/keyBy";
+import { styled as _, useTheme as yt } from "@arcblock/ux/lib/Theme";
+import { cx as b, css as tt } from "@emotion/css";
+import C from "lodash/omit";
+import { Link as Kt, NavLink as Xt, useNavigate as qt } from "react-router-dom";
+import Qt from "@arcblock/ux/lib/Button";
+import et from "is-uri";
+import { Icon as wt } from "@iconify-icon/react";
+import { e as P, f as N, i as it, l as at } from "./state-C3hsEhCe.js";
+import Zt from "@blocklet/pages-kit/builtin/markdown/markdown-renderer";
+import { useColorConvert as vt } from "@blocklet/pages-kit/contexts/color";
+import { materialDark as te } from "react-syntax-highlighter/dist/esm/styles/prism";
+import ee from "@arcblock/react-hooks/lib/useBrowser";
+import ct from "@arcblock/ux/lib/Colors";
+import { ResponsiveImage as kt, CustomComponentRenderer as oe } from "@blocklet/pages-kit/components";
+import { isGradient as ne, isColorString as re } from "@blocklet/pages-kit/utils/style";
+import _t from "@mui/material/useMediaQuery";
+import { join as Y } from "pathe";
+import { withoutTrailingSlash as Z, isRelative as ie, parseURL as ae } from "ufo";
+import { useMessage as se } from "@blocklet/embed/message";
+import { useLatest as le } from "ahooks";
+import ce from "lodash/isEqual";
+import { EmbedIframe as de } from "@blocklet/embed/react";
+import { useLocaleContext as me } from "@arcblock/ux/lib/Locale/context";
+import pe from "@arcblock/ux/lib/Screenshot";
+import { TwitterTimelineEmbed as ue } from "react-twitter-embed";
+import { useUpdate as he, useMount as ge } from "react-use";
+const $t = "{{CUSTOM_VALUE}}", fe = [
   {
     title: "None",
     value: "none",
@@ -55,7 +52,7 @@ const Bt = "{{CUSTOM_VALUE}}", Ce = [
     value: "large",
     sx: { py: { xs: 7.5, md: 10, lg: 12.5, xl: 15 } }
   }
-], Ne = [
+], xe = [
   {
     title: "None",
     value: "none",
@@ -76,7 +73,7 @@ const Bt = "{{CUSTOM_VALUE}}", Ce = [
     value: "large",
     sx: { py: { xs: 6, md: 9, lg: 9, xl: 11 } }
   }
-], Be = [
+], be = [
   {
     title: "None",
     value: "none",
@@ -97,17 +94,17 @@ const Bt = "{{CUSTOM_VALUE}}", Ce = [
     value: "large",
     sx: { px: { xs: 2.5, md: 10, lg: 12.5, xl: 15 } }
   }
-], K = (t, e, o) => {
-  const r = t.breakpoints.values[o];
-  return `${e}${r ? ` (${r}px)` : ""}`;
-}, Me = [
+], V = (t, e, o) => {
+  const n = t.breakpoints.values[o];
+  return `${e}${n ? ` (${n}px)` : ""}`;
+}, ye = [
   {
     title: "100%",
     value: "full",
     sx: { maxWidth: "100%" }
   },
   {
-    title: (t) => K(t, "Small", "sm"),
+    title: (t) => V(t, "Small", "sm"),
     value: "sm",
     sx: {
       maxWidth: (t) => t.breakpoints.values.sm,
@@ -116,17 +113,17 @@ const Bt = "{{CUSTOM_VALUE}}", Ce = [
     }
   },
   {
-    title: (t) => K(t, "Normal", "md"),
+    title: (t) => V(t, "Normal", "md"),
     value: "md",
     sx: { maxWidth: (t) => t.breakpoints.values.md, width: "100%", mx: "auto" }
   },
   {
-    title: (t) => K(t, "Large", "lg"),
+    title: (t) => V(t, "Large", "lg"),
     value: "lg",
     sx: { maxWidth: (t) => t.breakpoints.values.lg, width: "100%", mx: "auto" }
   },
   {
-    title: (t) => K(t, "Extra Large", "xl"),
+    title: (t) => V(t, "Extra Large", "xl"),
     value: "xl",
     sx: { maxWidth: (t) => t.breakpoints.values.xl, width: "100%", mx: "auto" }
   },
@@ -134,28 +131,28 @@ const Bt = "{{CUSTOM_VALUE}}", Ce = [
     title: "Custom",
     value: "custom",
     sx: {
-      maxWidth: Bt,
+      maxWidth: $t,
       width: "100%",
       mx: "auto"
     }
   }
-], Ie = Z(Ce, "value"), Pe = Z(Ne, "value"), We = Z(Be, "value"), Re = Z(Me, "value"), je = /* @__PURE__ */ new Map([
-  ["baseSectionPaddingY", Ie],
-  ["maxWidth", Re],
-  ["paddingY", Pe],
-  ["paddingX", We]
+], we = G(fe, "value"), ve = G(xe, "value"), ke = G(be, "value"), _e = G(ye, "value"), $e = /* @__PURE__ */ new Map([
+  ["baseSectionPaddingY", we],
+  ["maxWidth", _e],
+  ["paddingY", ve],
+  ["paddingX", ke]
 ]);
-function Mt(t) {
-  const { type: e, value: o, format: r = "sx", defaultValue: i = null } = t, a = je.get(e);
+function St(t) {
+  const { type: e, value: o, format: n = "sx", defaultValue: i = null } = t, a = $e.get(e);
   if (!a)
     return i;
   const c = o.startsWith("custom:"), s = c ? "custom" : o;
-  if (a?.[s] && a?.[s]?.[r]) {
-    const l = a[s][r];
+  if (a?.[s] && a?.[s]?.[n]) {
+    const l = a[s][n];
     if (c) {
       const d = o.replace("custom:", "");
       try {
-        return JSON.parse(JSON.stringify(l || {}).replaceAll(Bt, d));
+        return JSON.parse(JSON.stringify(l || {}).replaceAll($t, d));
       } catch {
       }
     }
@@ -163,32 +160,32 @@ function Mt(t) {
   }
   return i;
 }
-const It = wt({
+const Ct = ft({
   page: null,
   getPageMeta: () => ({}),
   getPageMetaStyle: () => ({})
 });
-function ze() {
-  return vt(It);
+function Se() {
+  return xt(Ct);
 }
-function Cn({
+function hn({
   page: t,
   children: e,
   defaultLocale: o = "en",
-  currentLocale: r
+  currentLocale: n
 }) {
-  const i = P(() => t ? JSON.parse(JSON.stringify(t)) : null, [JSON.stringify(t)]), a = O(() => {
+  const i = W(() => t ? JSON.parse(JSON.stringify(t)) : null, [JSON.stringify(t)]), a = A(() => {
     if (!i) return {};
-    const l = r || o;
+    const l = n || o;
     return i.locales?.[l] ?? {};
-  }, [i, o, r]), c = O(
+  }, [i, o, n]), c = A(
     (l = "sx") => {
       const d = a();
       return !d || !d.style ? {} : Object.entries(d.style || {}).reduce((m, [h, u]) => {
         if (!u) return m;
-        const b = `${h}Custom`;
-        d.style[b];
-        const x = Mt({
+        const y = `${h}Custom`;
+        d.style[y];
+        const x = St({
           type: h,
           value: u,
           format: l
@@ -197,7 +194,7 @@ function Cn({
       }, {});
     },
     [a]
-  ), s = P(
+  ), s = W(
     () => ({
       page: i,
       getPageMeta: a,
@@ -205,18 +202,92 @@ function Cn({
     }),
     [i, a, c]
   );
-  return /* @__PURE__ */ n(It.Provider, { value: s, children: e });
+  return /* @__PURE__ */ r(Ct.Provider, { value: s, children: e });
 }
-function z({ actions: t, center: e, className: o, align: r }) {
-  return t && t?.length ? /* @__PURE__ */ n(
+const K = ["editing", "height", "locale", "dev", "sx"];
+function Ce(t) {
+  const { className: e, ...o } = t;
+  return /* @__PURE__ */ r(Ne, { ...o, className: b("BlockBase-root", e) });
+}
+const Ne = _(f)`
+  position: relative;
+  color: ${({ theme: t }) => t.palette.text.primary};
+`, Nt = ft({
+  pages: [],
+  project: void 0
+}), { Provider: gn, Consumer: fn } = Nt;
+function Bt() {
+  return xt(Nt);
+}
+function Be({ icon: t, ...e }) {
+  return /* @__PURE__ */ r(wt, { icon: t, ...e, ref: null });
+}
+function Me({ icon: t, className: e = "", size: o = "1rem", ...n }) {
+  return /* @__PURE__ */ r(Ie, { component: Be, className: b("css-icon", e), size: o, ...n, icon: t });
+}
+const Ie = _(f)`
+  &.css-icon {
+    display: inline-block;
+    width: ${({ size: t }) => t};
+    height: ${({ size: t }) => t};
+  }
+`;
+function We({ icon: t, className: e = "", size: o = "1rem", imageMeta: n, ...i }) {
+  const a = P(N(t), 540), [c, s] = J(!1), l = yt();
+  return c ? /* @__PURE__ */ r(Me, { icon: "i-mdi:image", color: l.palette.grey[500], size: o, className: e, ...i }) : /* @__PURE__ */ r(Pe, { className: b("image-icon", e), size: o, ...i, children: /* @__PURE__ */ r(
+    "img",
+    {
+      className: "image-icon__image",
+      src: a,
+      onError: () => s(!0),
+      width: n?.naturalWidth,
+      height: n?.naturalHeight,
+      alt: n?.filename || "card-icon",
+      loading: "lazy"
+    }
+  ) });
+}
+const Pe = _(f)`
+  display: inline-block;
+  width: ${({ size: t }) => t};
+  height: ${({ size: t }) => t};
+  .image-icon__image {
+    object-fit: contain;
+    height: 100%;
+    width: 100%;
+  }
+`, st = (t) => typeof t == "string" && /^[\w-_]+:[\w-_]+$/.test(t);
+function ot({ icon: t, size: e = "1rem", imageMeta: o, ...n }) {
+  const i = window.isNaN(e) ? e : `${e}px`;
+  return st(t) ? /* @__PURE__ */ r(wt, { icon: t }) : /* @__PURE__ */ r(je, { component: We, imageMeta: o, className: "base-icon", icon: t, size: i, ...n });
+}
+const je = _(f)`
+  flex-shrink: 0;
+`;
+function E({ text: t, children: e, icon: o = "", endIcon: n, color: i = "primary", link: a = "", href: c = "", ...s }) {
+  const l = o ? /* @__PURE__ */ r(ot, { icon: o }) : null, d = n ? /* @__PURE__ */ r(ot, { icon: n }) : null, p = a || c, m = { ...s };
+  return p && (m.href = p, et(p) && (m.target = m.target || "_blank")), /* @__PURE__ */ r(Qt, { startIcon: l, endIcon: d, color: i, ...m, children: t || e });
+}
+function Mt({ editing: t, text: e, ...o }) {
+  const { pages: n = [] } = Bt(), i = n.find((a) => a.id === (o.link || o.linkId));
+  if (t)
+    return /* @__PURE__ */ r(E, { ...C(o, ["link", "linkId"]), children: e });
+  if (i) {
+    const a = i.path || "/";
+    return /* @__PURE__ */ r(Kt, { to: a, children: /* @__PURE__ */ r(E, { ...C(o, ["link", "linkId"]), children: e }) });
+  }
+  return /* @__PURE__ */ r(E, { ...C(o, "linkId"), children: e });
+}
+function j({ actions: t, center: e, className: o, align: n }) {
+  return t && t?.length ? /* @__PURE__ */ r(
     f,
     {
-      className: v(
+      className: b(
         "flex gap-4 flex-wrap",
         "lg:flex-row lg:gap-8",
-        (e || r === "center") && "justify-center",
-        !e && r === "right" && "justify-end",
-        !e && r === "left" && "justify-start",
+        (e || n === "center") && "justify-center",
+        !e && n === "right" && "justify-end",
+        !e && n === "left" && "justify-start",
         o
       ),
       sx: { alignItems: "center" },
@@ -224,7 +295,7 @@ function z({ actions: t, center: e, className: o, align: r }) {
     }
   ) : null;
 }
-const Ee = "section", Le = Ft(f)`
+const ze = "section", Re = Et(f)`
   overflow: hidden;
 
   .section__title {
@@ -275,7 +346,7 @@ const Ee = "section", Le = Ft(f)`
       margin-bottom: 0.5rem;
     }
   }
-  @media (min-width: ${({ theme: t }) => t.breakpoints.values[Ee]}px) {
+  @media (min-width: ${({ theme: t }) => t.breakpoints.values[ze]}px) {
     .section__tag {
       margin-bottom: 32px;
     }
@@ -287,11 +358,11 @@ const Ee = "section", Le = Ft(f)`
     }
   }
 `;
-function F({
+function X({
   title: t,
   description: e,
   descriptionMarkdown: o,
-  actions: r,
+  actions: n,
   className: i = "",
   classes: a = {},
   prepend: c,
@@ -302,72 +373,72 @@ function F({
   center: m,
   logo: h,
   titleAppearance: u,
-  descriptionAppearance: b,
+  descriptionAppearance: y,
   ...x
 }) {
-  const y = _t();
-  if (!t && !e && !r && !p && !d && !c && !s && !h) return null;
-  const g = Math.max(Math.min(5, l + 1), 1), w = {
+  const v = vt();
+  if (!t && !e && !n && !p && !d && !c && !s && !h) return null;
+  const g = Math.max(Math.min(5, l + 1), 1), k = {
     1: "xl:!text-3xl lg:!text-2xl md:!text-xl",
     2: "xl:!text-2xl lg:!text-xl md:!text-lg",
     3: "xl:!text-2xl lg:!text-xl md:!text-lg",
     4: "xl:!text-xl lg:!text-lg md:!text-md",
     5: "xl:!text-lg md:!text-md sm:!text-sm",
     6: "!text-sm"
-  }, S = l === 0 ? "big" : `h${g}`, _ = l === 0;
-  return /* @__PURE__ */ k(Le, { className: v("base-info", "lg:text-left", m && "!text-center", i), ...x, children: [
-    c && /* @__PURE__ */ n("div", { children: c }),
-    (d || p) && /* @__PURE__ */ n("div", { className: v("section__tag", a?.tag || a?.badge), children: d || p }),
-    h && /* @__PURE__ */ n("img", { className: "w-[120px] m-auto mb-8", src: h, alt: "info", loading: "lazy" }),
-    t && /* @__PURE__ */ n(
-      M,
+  }, S = l === 0 ? "big" : `h${g}`, $ = l === 0;
+  return /* @__PURE__ */ w(Re, { className: b("base-info", "lg:text-left", m && "!text-center", i), ...x, children: [
+    c && /* @__PURE__ */ r("div", { children: c }),
+    (d || p) && /* @__PURE__ */ r("div", { className: b("section__tag", a?.tag || a?.badge), children: d || p }),
+    h && /* @__PURE__ */ r("img", { className: "w-[120px] m-auto mb-8", src: h, alt: "info", loading: "lazy" }),
+    t && /* @__PURE__ */ r(
+      I,
       {
         sx: {
           whiteSpace: "pre-wrap",
           mb: e ? "2vw" : 0,
-          ...u?.color && { color: `${y(u.color)} !important` }
+          ...u?.color && { color: `${v(u.color)} !important` }
         },
-        className: v(
+        className: b(
           "section__title",
           "text-gray-800",
           "dark:text-gray-50",
           a.title,
           "page-kit-section__title",
-          _ ? "" : "section__title_non_big"
+          $ ? "" : "section__title_non_big"
         ),
         component: `h${Math.max(l, 1)}`,
         variant: S,
         children: t
       }
     ),
-    e && (o ? /* @__PURE__ */ n(
+    e && (o ? /* @__PURE__ */ r(
       f,
       {
         sx: {
-          ...b?.color && { color: `${y(b.color)} !important` }
+          ...y?.color && { color: `${v(y.color)} !important` }
         },
-        className: v(
+        className: b(
           "section__description",
           "text-gray-800",
           "dark:text-gray-100",
-          w[g],
+          k[g],
           a.description,
           "page-kit-section__description"
         ),
-        children: /* @__PURE__ */ n(ie, { codeOptions: { showActionButton: !1, theme: ae }, children: e })
+        children: /* @__PURE__ */ r(Zt, { codeOptions: { showActionButton: !1, theme: te }, children: e })
       }
-    ) : /* @__PURE__ */ n(
-      M,
+    ) : /* @__PURE__ */ r(
+      I,
       {
         sx: {
           whiteSpace: "pre-wrap",
-          ...b?.color && { color: `${y(b.color)} !important` }
+          ...y?.color && { color: `${v(y.color)} !important` }
         },
-        className: v(
+        className: b(
           "section__description",
           "text-gray-800",
           "dark:text-gray-100",
-          w[g],
+          k[g],
           a.description,
           "page-kit-section__description"
         ),
@@ -377,11 +448,11 @@ function F({
         children: e
       }
     )),
-    /* @__PURE__ */ n(z, { actions: r, center: m, className: "mt-8" }),
-    s && /* @__PURE__ */ n("div", { children: s })
+    /* @__PURE__ */ r(j, { actions: n, center: m, className: "mt-8" }),
+    s && /* @__PURE__ */ r("div", { children: s })
   ] });
 }
-const H = [
+const q = [
   "actions",
   "append",
   "badge",
@@ -396,87 +467,28 @@ const H = [
   "titleAppearance",
   "descriptionAppearance"
 ];
-function Pt(t) {
-  if (t.type === ee) {
-    const o = (t.props.children || []).filter((r) => kt(r));
-    return o.length === 1 ? Pt(o[0]) : o.length > 1;
-  }
-  return Array.isArray(t);
-}
-const I = "&>*";
-function st({ children: t, col: e, gap: o, className: r, align: i, sx: a, type: c, ...s } = {
-  children: null,
-  className: "",
-  col: 3,
-  gap: void 0,
-  sx: {},
-  align: "center",
-  type: "default"
-}) {
-  const l = $t(), d = Number(Math.floor(100 / e * 100) / 100), p = {
-    center: "justify-center items-center",
-    left: "justify-start items-center",
-    right: "justify-end items-center",
-    top: "justify-center items-start",
-    bottom: "justify-center items-end",
-    "top-left": "justify-start items-start",
-    "top-right": "justify-end items-start",
-    "bottom-left": "justify-start items-end",
-    "bottom-right": "justify-end items-end"
-  }, m = p[i] || p.center;
-  let u = o ?? ({
-    2: 6,
-    3: 4,
-    4: 4,
-    5: 3,
-    6: 3
-  }[e] || 0);
-  Pt(t) || (u = 0);
-  const x = (e - 1) * u / e;
-  let y = { ...a, gap: `${u}rem` };
-  const g = { [I]: { width: "100%" } }, w = {}, S = {}, _ = {};
-  switch (g.gap = "1rem", w.gap = `${u / 2}rem`, e) {
-    case 3:
-    case 4:
-      w[I] = {
-        width: `calc(50% - ${u / 2}rem)`
-      };
-      break;
-    case 5:
-    case 6:
-      g[I] = {
-        width: `calc(50% - ${u / 2 / 2}rem)`
-      }, w[I] = {
-        width: `calc(50% - ${u / 2 / 2}rem)`
-      }, S[I] = {
-        width: `calc(33.33% - ${u * 2 / 3}rem)`
-      };
-      break;
-  }
-  return y[I] = { width: `calc(${d}% - ${x}rem)` }, y[`@media (max-width: ${l.breakpoints.values.xl}px)`] = _, y[`@media (max-width: ${l.breakpoints.values.lg}px)`] = S, y[`@media (max-width: ${l.breakpoints.values.md}px)`] = w, y[`@media (max-width: ${l.breakpoints.values.sm}px)`] = g, c === "wall" && (y = { ...a, gap: `${u}rem` }, y[I] = { width: `calc(${d}% - ${x}rem)` }, g[I] = { width: `calc(45% - ${u / 2 / 2}rem)` }, y[`@media (max-width: ${l.breakpoints.values.sm}px)`] = g), /* @__PURE__ */ n(f, { className: v("flex flex-wrap flex-row h-full", m, r), sx: y, ...s, children: t });
-}
-function Ae() {
+function Le() {
   const t = navigator.userAgent.toLowerCase();
   return t.includes("safari") && !t.includes("chrome");
 }
-function Te(t = "") {
+function Ee(t = "") {
   if (t.startsWith("data:image/svg+xml,")) return !0;
   const e = /^(((ht|f)tps?):\/\/)?([^!@#$%^&*?.\s-]([^!@#$%^&*?.\s]{0,63}[^!@#$%^&*?.\s])?\.)+[a-z]{2,6}\/?/, o = /^(\/|\.\/|\.\.\/)(?:[^/]+\/)*[^/]+$/;
   return e.test(t) || o.test(t);
 }
-function A(t) {
+function L(t) {
   return t?.endsWith(".mp4") || t?.endsWith(".m4v") || t?.endsWith(".webm");
 }
-function Oe(t) {
+function Ae(t) {
   return t?.endsWith(".mp4") || t?.endsWith(".m4v") ? "video/mp4" : t?.endsWith(".webm") ? "video/webm" : void 0;
 }
-function Ue(t) {
+function Te(t) {
   let e = {};
-  return typeof t == "string" ? ce(t) ? e.image = t : (e.image = N(t), de(t) && (e.color = t, e.image = "")) : e = t, e;
+  return typeof t == "string" ? ne(t) ? e.image = t : (e.image = N(t), re(t) && (e.color = t, e.image = "")) : e = t, e;
 }
-function Fe() {
-  const [t, e] = Q(Date.now());
-  return U(() => {
+function Oe() {
+  const [t, e] = J(Date.now());
+  return T(() => {
     const o = () => {
       e(Date.now());
     };
@@ -485,13 +497,13 @@ function Fe() {
     };
   }, []), t;
 }
-function ut(t, e, o, r, i) {
+function dt(t, e, o, n, i) {
   let a = null;
-  const { color: c = "", image: s } = Ue(e);
-  if (s && Te(s)) {
+  const { color: c = "", image: s } = Te(e);
+  if (s && Ee(s)) {
     delete o.backgroundColor;
-    const l = !(t.mobile.apple.device || Ae()) && A(s), d = A(s) && r ? R(N(r), 1200, "quality") : "";
-    l ? a = /* @__PURE__ */ n(
+    const l = !(t.mobile.apple.device || Le()) && L(s), d = L(s) && n ? P(N(n), 1200, "quality") : "";
+    l ? a = /* @__PURE__ */ r(
       f,
       {
         component: "video",
@@ -502,7 +514,7 @@ function ut(t, e, o, r, i) {
         controls: !1,
         playsInline: !0,
         poster: d,
-        src: A(s) ? s : R(s, 1200, "quality"),
+        src: L(s) ? s : P(s, 1200, "quality"),
         sx: {
           width: "100%",
           position: "absolute",
@@ -515,10 +527,10 @@ function ut(t, e, o, r, i) {
         }
       },
       s
-    ) : a = /* @__PURE__ */ n(
-      St,
+    ) : a = /* @__PURE__ */ r(
+      kt,
       {
-        src: A(s) && r ? d : s,
+        src: L(s) && n ? d : s,
         sizesAttr: {
           sm: 600,
           md: 900,
@@ -544,8 +556,8 @@ function ut(t, e, o, r, i) {
   } else s ? o.backgroundImage = `${s} !important` : c && (o.backgroundColor = `${c} !important`);
   return a;
 }
-function He({ autoWidth: t, children: e, ...o }) {
-  return t ? /* @__PURE__ */ n(
+function Ue({ autoWidth: t, children: e, ...o }) {
+  return t ? /* @__PURE__ */ r(
     f,
     {
       ...o,
@@ -557,43 +569,43 @@ function He({ autoWidth: t, children: e, ...o }) {
       ],
       children: e
     }
-  ) : /* @__PURE__ */ n(Ht, { ...o, children: e });
+  ) : /* @__PURE__ */ r(At, { ...o, children: e });
 }
-function V({
+function Q({
   dark: t = !1,
   children: e,
   className: o,
-  sx: r = {},
+  sx: n = {},
   boxed: i = { show: !1 },
   padding: a = "normal",
   boxProps: c,
   type: s,
   ...l
 }) {
-  const d = { ...r }, p = Ct((u) => u.breakpoints.down("md"));
-  t && (d.color = pt.common.white, d.backgroundColor = `${pt.grey[900]} !important`), i.show && (d.display = "flex");
-  const m = P(() => !Number(l.boxMaxWidth) || p ? {
+  const d = { ...n }, p = _t((u) => u.breakpoints.down("md"));
+  t && (d.color = ct.common.white, d.backgroundColor = `${ct.grey[900]} !important`), i.show && (d.display = "flex");
+  const m = W(() => !Number(l.boxMaxWidth) || p ? {
     width: "100%"
   } : s === "wall" && l.boxMaxWidth ? {
     maxWidth: `${l.boxMaxWidth}px !important`,
     width: "100%"
   } : {
     width: "100%"
-  }, [l.boxMaxWidth, p, s]), h = Mt({
+  }, [l.boxMaxWidth, p, s]), h = St({
     type: "baseSectionPaddingY",
     value: a || "normal",
     // section default is normal
     defaultValue: ""
   });
-  return /* @__PURE__ */ n(
-    Ve,
+  return /* @__PURE__ */ r(
+    He,
     {
       component: "section",
       styles: { ...d, ...h },
-      className: v("base-section", "px-2 md:px-5 lg:px-5 xl:px-10", o, {
+      className: b("base-section", "px-2 md:px-5 lg:px-5 xl:px-10", o, {
         dark: t
       }),
-      ...B(
+      ...C(
         l,
         "hoverStyle",
         "boxMaxWidth",
@@ -604,36 +616,36 @@ function V({
         "titleAppearance",
         "descriptionAppearance"
       ),
-      children: /* @__PURE__ */ n(He, { autoWidth: l?.autoWidth, className: v("section-content h-full"), sx: m, children: i.show ? /* @__PURE__ */ n(Wt, { ...c, boxed: i, children: e }) : e })
+      children: /* @__PURE__ */ r(Ue, { autoWidth: l?.autoWidth, className: b("section-content h-full"), sx: m, children: i.show ? /* @__PURE__ */ r(It, { ...c, boxed: i, children: e }) : e })
     }
   );
 }
-function Wt({
+function It({
   background: t = "",
   backgroundVideoPoster: e,
   children: o,
-  sx: r = {},
+  sx: n = {},
   boxed: i = { show: !1 },
   className: a = "",
   styles: c = {},
   ...s
 }) {
-  const l = { ...c, ...r }, d = _t();
+  const l = { ...c, ...n }, d = vt();
   let p = null;
-  const m = Ct((b) => b.breakpoints.up("sm")), h = se(), u = Fe();
-  return t && (p = ut(
+  const m = _t((y) => y.breakpoints.up("sm")), h = ee(), u = Oe();
+  return t && (p = dt(
     h,
     typeof t == "string" ? d(t) : t,
     l,
     e,
     u
-  )), i.show && (l.borderRadius = "10px", l.padding === void 0 && (l.padding = m ? "50px" : "20px"), i?.border && (l.border = "1px solid #c0c0c0"), i?.background && (p = ut(
+  )), i.show && (l.borderRadius = "10px", l.padding === void 0 && (l.padding = m ? "50px" : "20px"), i?.border && (l.border = "1px solid #c0c0c0"), i?.background && (p = dt(
     h,
     typeof i?.background == "string" ? d(i?.background) : i?.background,
     l,
     i?.backgroundVideoPoster,
     u
-  ))), /* @__PURE__ */ k(
+  ))), /* @__PURE__ */ w(
     f,
     {
       ...s,
@@ -641,7 +653,7 @@ function Wt({
         ...l,
         ...p ? { position: "relative", overflow: "hidden", zIndex: 0 } : {}
       },
-      className: v(a, i?.boxShadow && "shadow-xl"),
+      className: b(a, i?.boxShadow && "shadow-xl"),
       children: [
         p,
         o
@@ -649,7 +661,7 @@ function Wt({
     }
   );
 }
-const Ve = $(Wt)`
+const He = _(It)`
   &:nth-of-type(even) {
     background: #f8f8f8;
   }
@@ -666,350 +678,170 @@ const Ve = $(Wt)`
     }
   }
 `;
-function Rt({ icon: t, ...e }) {
-  return /* @__PURE__ */ n(Nt, { icon: t, ...e, ref: null });
-}
-function C(t, e) {
-  const o = q(t, e), r = B(t, e);
-  return [o, r];
-}
-const jt = ["title", "description", "actions", "badge", "tag", "prepend", "append", "logo"];
-function Ye({
-  image: t,
-  imageBorder: e,
-  imageShadow: o,
-  className: r,
-  reverse: i = !1,
-  fullSizeImage: a,
-  ...c
-}) {
-  const [s, l] = C(c, H), d = Object.keys(s).length > 0 && Object.values(q(s, jt)).filter(Boolean).length > 0 && /* @__PURE__ */ n(F, { ...s }), p = kt(t) ? t : /* @__PURE__ */ n(f, { component: "img", src: t, alt: "", className: "block" }), m = ["phone", "macbook"].includes(e), h = t && /* @__PURE__ */ n(
-    f,
-    {
-      className: v(
-        "section__image",
-        "m-auto, leading-[1] text-center",
-        o && "shadow-xl",
-        s?.center ? "flex justify-center items-center" : ""
-      ),
-      sx: {
-        border: e === !0 ? "1px solid #c0c0c0" : void 0,
-        borderRadius: 2,
-        overflow: "hidden",
-        // FIXME: Screenshot 组件无法设置最外层 div 的样式，只能通过父元素设置
-        "> div": m ? { width: "100%", video: { borderRadius: "0 !important" } } : void 0
-      },
-      children: m ? (
-        // @ts-ignore
-        /* @__PURE__ */ n(me, { type: e, sx: { width: "100%" }, children: p })
-      ) : p
-    }
-  );
-  return /* @__PURE__ */ n(
-    V,
-    {
-      className: v(
-        "section--block",
-        r,
-        a && !i && et`
-            .section-bg {
-              height: 80%;
-            }
-          `
-      ),
-      ...l,
-      boxProps: a ? { sx: { padding: 0, overflow: "hidden" } } : void 0,
-      children: /* @__PURE__ */ n(
-        st,
-        {
-          col: t ? 2 : 1,
-          className: a ? et`
-                display: flex;
-                flex-direction: column;
-
-                > .base-info,
-                > .section__image {
-                  width: 100%;
-
-                  > img,
-                  > video {
-                    width: 100%;
-                  }
-                }
-              ` : void 0,
-          children: i ? /* @__PURE__ */ k(X, { children: [
-            h,
-            d
-          ] }) : /* @__PURE__ */ k(X, { children: [
-            d,
-            h
-          ] })
-        }
-      )
-    }
-  );
-}
-const Y = ["editing", "height", "locale", "dev", "sx"];
-function De(t) {
-  const { className: e, ...o } = t;
-  return /* @__PURE__ */ n(Je, { ...o, className: v("BlockBase-root", e) });
-}
-const Je = $(f)`
-  position: relative;
-  color: ${({ theme: t }) => t.palette.text.primary};
-`;
-function Ge({
-  widget: t,
-  reverse: e,
-  projectId: o,
-  assistantId: r,
-  working: i,
-  submitTitle: a,
-  submitIcon: c,
-  submitColor: s,
-  placeholder: l,
-  loadingIndicator: d,
-  section: p,
-  ...m
-}) {
-  const [{ editing: h }, u] = C(m, Y), [b, x] = C(u, H), y = o && r ? { projectId: o, gitRef: "main", assistantId: r, working: !0 } : void 0, g = {
-    children: a,
-    endIcon: c ? /* @__PURE__ */ n(Rt, { icon: c }) : void 0,
-    sx: {
-      background: s || void 0,
-      ":hover": {
-        background: s || void 0,
-        opacity: 0.8
-      }
-    }
-  }, w = [], S = l && /* @__PURE__ */ n(
-    M,
-    {
-      variant: "caption",
-      sx: {
-        color: "text.disabled"
-      },
-      children: l
-    }
-  ), _ = d && /* @__PURE__ */ n(
-    M,
-    {
-      variant: "caption",
-      sx: {
-        color: "text.disabled"
-      },
-      children: d
-    }
-  );
-  Object.keys(b).length > 0 && Object.values(q(b, jt)).filter(Boolean).length > 0 && w.push(/* @__PURE__ */ n(F, { ...b }, "base-info")), y && (t === "form" ? w.push(/* @__PURE__ */ n(dt, { identifier: y, SubmitProps: g }, "form")) : t === "result" ? w.push(
-    /* @__PURE__ */ n(
-      mt,
-      {
-        identifier: y,
-        placeholder: S,
-        loadingIndicator: _
-      },
-      "result"
-    )
-  ) : w.push(
-    /* @__PURE__ */ k(
-      Vt,
-      {
-        direction: "row",
-        sx: {
-          width: "100%",
-          gap: 2
-        },
-        children: [
-          /* @__PURE__ */ n(dt, { identifier: y, BoxProps: { flex: 1 }, SubmitProps: g }),
-          /* @__PURE__ */ n(
-            mt,
-            {
-              identifier: y,
-              BoxProps: { flex: 1 },
-              placeholder: S,
-              loadingIndicator: _
-            }
-          )
-        ]
-      },
-      "form-result"
-    )
-  )), e && w.reverse();
-  const W = yt(), j = P(
-    () => Yt(ne(W, { palette: { primary: s ? { main: s } : void 0 } })),
-    [s, W]
-  );
-  return /* @__PURE__ */ n(re, { fallbackRender: oe, children: /* @__PURE__ */ n(Dt, { theme: j, children: /* @__PURE__ */ n(V, { ...x, sx: h ? { pointerEvents: "none" } : {}, children: /* @__PURE__ */ n(st, { col: w.length, children: w }) }) }) });
-}
-const zt = wt({
-  pages: [],
-  project: void 0
-}), { Provider: Nn, Consumer: Bn } = zt;
-function Et() {
-  return vt(zt);
-}
-function Ke({ icon: t, className: e = "", size: o = "1rem", ...r }) {
-  return /* @__PURE__ */ n(Xe, { component: Rt, className: v("css-icon", e), size: o, ...r, icon: t });
-}
-const Xe = $(f)`
-  &.css-icon {
-    display: inline-block;
-    width: ${({ size: t }) => t};
-    height: ${({ size: t }) => t};
-  }
-`;
-function qe({ icon: t, className: e = "", size: o = "1rem", imageMeta: r, ...i }) {
-  const a = R(N(t), 540), [c, s] = Q(!1), l = $t();
-  return c ? /* @__PURE__ */ n(Ke, { icon: "i-mdi:image", color: l.palette.grey[500], size: o, className: e, ...i }) : /* @__PURE__ */ n(Qe, { className: v("image-icon", e), size: o, ...i, children: /* @__PURE__ */ n(
-    "img",
-    {
-      className: "image-icon__image",
-      src: a,
-      onError: () => s(!0),
-      width: r?.naturalWidth,
-      height: r?.naturalHeight,
-      alt: r?.filename || "card-icon",
-      loading: "lazy"
-    }
-  ) });
-}
-const Qe = $(f)`
-  display: inline-block;
-  width: ${({ size: t }) => t};
-  height: ${({ size: t }) => t};
-  .image-icon__image {
-    object-fit: contain;
-    height: 100%;
-    width: 100%;
+function Wt(t) {
+  if (t.type === Gt) {
+    const o = (t.props.children || []).filter((n) => bt(n));
+    return o.length === 1 ? Wt(o[0]) : o.length > 1;
   }
-`, lt = (t) => typeof t == "string" && /^[\w-_]+:[\w-_]+$/.test(t);
-function nt({ icon: t, size: e = "1rem", imageMeta: o, ...r }) {
-  const i = window.isNaN(e) ? e : `${e}px`;
-  return lt(t) ? /* @__PURE__ */ n(Nt, { icon: t }) : /* @__PURE__ */ n(Ze, { component: qe, imageMeta: o, className: "base-icon", icon: t, size: i, ...r });
-}
-const Ze = $(f)`
-  flex-shrink: 0;
-`;
-function T({ text: t, children: e, icon: o = "", endIcon: r, color: i = "primary", link: a = "", href: c = "", ...s }) {
-  const l = o ? /* @__PURE__ */ n(nt, { icon: o }) : null, d = r ? /* @__PURE__ */ n(nt, { icon: r }) : null, p = a || c, m = { ...s };
-  return p && (m.href = p, ot(p) && (m.target = m.target || "_blank")), /* @__PURE__ */ n(ge, { startIcon: l, endIcon: d, color: i, ...m, children: t || e });
+  return Array.isArray(t);
 }
-function Lt({ editing: t, text: e, ...o }) {
-  const { pages: r = [] } = Et(), i = r.find((a) => a.id === (o.link || o.linkId));
-  if (t)
-    return /* @__PURE__ */ n(T, { ...B(o, ["link", "linkId"]), children: e });
-  if (i) {
-    const a = i.path || "/";
-    return /* @__PURE__ */ n(pe, { to: a, children: /* @__PURE__ */ n(T, { ...B(o, ["link", "linkId"]), children: e }) });
+const M = "&>*";
+function Pt({ children: t, col: e, gap: o, className: n, align: i, sx: a, type: c, ...s } = {
+  children: null,
+  className: "",
+  col: 3,
+  gap: void 0,
+  sx: {},
+  align: "center",
+  type: "default"
+}) {
+  const l = yt(), d = Number(Math.floor(100 / e * 100) / 100), p = {
+    center: "justify-center items-center",
+    left: "justify-start items-center",
+    right: "justify-end items-center",
+    top: "justify-center items-start",
+    bottom: "justify-center items-end",
+    "top-left": "justify-start items-start",
+    "top-right": "justify-end items-start",
+    "bottom-left": "justify-start items-end",
+    "bottom-right": "justify-end items-end"
+  }, m = p[i] || p.center;
+  let u = o ?? ({
+    2: 6,
+    3: 4,
+    4: 4,
+    5: 3,
+    6: 3
+  }[e] || 0);
+  Wt(t) || (u = 0);
+  const x = (e - 1) * u / e;
+  let v = { ...a, gap: `${u}rem` };
+  const g = { [M]: { width: "100%" } }, k = {}, S = {}, $ = {};
+  switch (g.gap = "1rem", k.gap = `${u / 2}rem`, e) {
+    case 3:
+    case 4:
+      k[M] = {
+        width: `calc(50% - ${u / 2}rem)`
+      };
+      break;
+    case 5:
+    case 6:
+      g[M] = {
+        width: `calc(50% - ${u / 2 / 2}rem)`
+      }, k[M] = {
+        width: `calc(50% - ${u / 2 / 2}rem)`
+      }, S[M] = {
+        width: `calc(33.33% - ${u * 2 / 3}rem)`
+      };
+      break;
   }
-  return /* @__PURE__ */ n(T, { ...B(o, "linkId"), children: e });
+  return v[M] = { width: `calc(${d}% - ${x}rem)` }, v[`@media (max-width: ${l.breakpoints.values.xl}px)`] = $, v[`@media (max-width: ${l.breakpoints.values.lg}px)`] = S, v[`@media (max-width: ${l.breakpoints.values.md}px)`] = k, v[`@media (max-width: ${l.breakpoints.values.sm}px)`] = g, c === "wall" && (v = { ...a, gap: `${u}rem` }, v[M] = { width: `calc(${d}% - ${x}rem)` }, g[M] = { width: `calc(45% - ${u / 2 / 2}rem)` }, v[`@media (max-width: ${l.breakpoints.values.sm}px)`] = g), /* @__PURE__ */ r(f, { className: b("flex flex-wrap flex-row h-full", m, n), sx: v, ...s, children: t });
 }
-function E({ type: t = "", icon: e = "", size: o = "3rem", className: r = "", ...i }) {
-  return /* @__PURE__ */ n(
-    nt,
+function z({ type: t = "", icon: e = "", size: o = "3rem", className: n = "", ...i }) {
+  return /* @__PURE__ */ r(
+    ot,
     {
       icon: e || t,
       size: o,
-      className: v("content-icon", r),
+      className: b("content-icon", n),
       ...i,
       color: typeof i.color > "u" ? "inherit" : i.color
     }
   );
 }
-function to({
+function Fe({
   to: t,
   base: e,
   children: o,
-  className: r,
+  className: n,
   activeClassName: i = "active",
   target: a = "auto",
   autoExternalMark: c = !1,
   useRouterLink: s,
   ...l
 }) {
-  const { pages: d = [], locale: p = "" } = {}, m = e ? G("/", e) : e || "";
-  let h = a === "auto" ? "_self" : a, u = G(m, t);
-  const b = c ? ot(u) : !1;
+  const { pages: d = [], locale: p = "" } = {}, m = e ? Y("/", e) : e || "";
+  let h = a === "auto" ? "_self" : a, u = Y(m, t);
+  const y = c ? et(u) : !1;
   if (e)
-    return u = G(m, p, t), /* @__PURE__ */ n(
+    return u = Y(m, p, t), /* @__PURE__ */ r(
       "a",
       {
-        className: `no-underline ${r}`,
-        href: tt(u),
+        className: `no-underline ${n}`,
+        href: Z(u),
         rel: "noreferrer noopener",
         target: h,
         ...l,
         children: o
       }
     );
-  if (ot(t))
+  if (et(t))
     a === "auto" && (h = "_blank"), u = t;
   else {
-    fe(u) && (u = G(window.location.pathname, u));
-    const x = xe(`${window.location.origin}${u}`), y = d.some((g) => g.pathname === x.pathname);
-    if (s || y)
-      return /* @__PURE__ */ n(
-        ue,
+    ie(u) && (u = Y(window.location.pathname, u));
+    const x = ae(`${window.location.origin}${u}`), v = d.some((g) => g.pathname === x.pathname);
+    if (s || v)
+      return /* @__PURE__ */ r(
+        Xt,
         {
           end: !0,
-          to: tt(u),
-          className: ({ isActive: g }) => v(r, g ? i : ""),
+          to: Z(u),
+          className: ({ isActive: g }) => b(n, g ? i : ""),
           ...l,
           children: o
         }
       );
   }
-  return /* @__PURE__ */ k(
+  return /* @__PURE__ */ w(
     "a",
     {
-      className: `no-underline ${r}`,
-      href: tt(u),
+      className: `no-underline ${n}`,
+      href: Z(u),
       rel: "noreferrer noopener",
       target: h,
       ...l,
       children: [
         o,
-        b && /* @__PURE__ */ n(E, { icon: "i-mdi:arrow-top-right", size: "0.9em", className: "smart-link__mark", style: { marginLeft: 5 } })
+        y && /* @__PURE__ */ r(z, { icon: "i-mdi:arrow-top-right", size: "0.9em", className: "smart-link__mark", style: { marginLeft: 5 } })
       ]
     }
   );
 }
-function D({
+function O({
   prepend: t,
   append: e,
   children: o,
-  className: r = "",
+  className: n = "",
   dark: i = !1,
   border: a = !0,
   ...c
 }) {
   let s = {};
-  const { pages: l = [] } = Et(), d = l.find((h) => h.id === c.link), p = !o || te.Children.toArray(o).every((h) => h === null);
+  const { pages: l = [] } = Bt(), d = l.find((h) => h.id === c.link), p = !o || Jt.Children.toArray(o).every((h) => h === null);
   c.link && (s = {
-    component: to,
+    component: Fe,
     to: d?.path || c.link,
     useRouterLink: !0
   });
-  const m = yt();
-  return /* @__PURE__ */ k(
-    eo,
+  const m = Tt();
+  return /* @__PURE__ */ w(
+    Ye,
     {
-      className: v("base-card card", { dark: i, "border-transparent": !a }, r),
+      className: b("base-card card", { dark: i, "border-transparent": !a }, n),
       sx: {
         borderColor: m.palette.divider
       },
       ...s,
-      ...B(c, ["listType", "dark", "iconColor", "link", "hoverStyle", "imageSize"]),
+      ...C(c, ["listType", "dark", "iconColor", "link", "hoverStyle", "imageSize"]),
       children: [
         t,
-        !p && /* @__PURE__ */ n("div", { className: "card__body", children: o }),
+        !p && /* @__PURE__ */ r("div", { className: "card__body", children: o }),
         e
       ]
     }
   );
 }
-const eo = $(f)`
+const Ye = _(f)`
   &.base-card {
     text-align: left;
     border-width: 1px;
@@ -1025,18 +857,18 @@ const eo = $(f)`
     padding: 15px 15px;
   }
 `;
-function J({
+function U({
   align: t = "left",
   title: e,
   titleProps: o = {},
-  description: r,
+  description: n,
   descriptionProps: i = {}
 }) {
-  return /* @__PURE__ */ k(X, { children: [
-    e && /* @__PURE__ */ n(
-      M,
+  return /* @__PURE__ */ w(D, { children: [
+    e && /* @__PURE__ */ r(
+      I,
       {
-        className: v("card__title text-gray-800", "dark:text-gray-50"),
+        className: b("card__title text-gray-800", "dark:text-gray-50"),
         component: "h5",
         variant: "h5",
         gutterBottom: !0,
@@ -1045,25 +877,25 @@ function J({
         children: e
       }
     ),
-    r && /* @__PURE__ */ n(
-      M,
+    n && /* @__PURE__ */ r(
+      I,
       {
-        className: v("card__description", "text-gray-500", "dark:text-gray-400"),
+        className: b("card__description", "text-gray-500", "dark:text-gray-400"),
         component: "div",
         variant: "body1",
         gutterBottom: !0,
         align: t,
         ...i,
-        children: r
+        children: n
       }
     )
   ] });
 }
-function oo({
+function Ve({
   image: t,
   title: e,
   description: o,
-  imageProps: r = {},
+  imageProps: n = {},
   imageMeta: i,
   imageSize: a,
   titleProps: c = {},
@@ -1072,13 +904,13 @@ function oo({
   align: d,
   ...p
 }) {
-  const m = lt(t), h = R(N(t), 540);
-  return /* @__PURE__ */ k(
-    no,
+  const m = st(t), h = P(N(t), 540);
+  return /* @__PURE__ */ w(
+    De,
     {
       className: "card-article",
       ...p,
-      prepend: /* @__PURE__ */ n("div", { className: "card__image__wrap", children: m && t ? /* @__PURE__ */ n(
+      prepend: /* @__PURE__ */ r("div", { className: "card__image__wrap", children: m && t ? /* @__PURE__ */ r(
         f,
         {
           sx: {
@@ -1091,15 +923,15 @@ function oo({
             alignItems: "center",
             justifyContent: "center"
           },
-          children: /* @__PURE__ */ n(E, { icon: t, color: "primary.main" })
+          children: /* @__PURE__ */ r(z, { icon: t, color: "primary.main" })
         }
-      ) : h && /* @__PURE__ */ n(
+      ) : h && /* @__PURE__ */ r(
         "img",
         {
           className: "card__image",
           src: h,
-          ...r,
-          alt: r.alt || i?.filename || "card-image",
+          ...n,
+          alt: n.alt || i?.filename || "card-image",
           width: i?.naturalWidth,
           height: i?.naturalHeight,
           style: { width: "100%", height: "100%", objectFit: a || "cover", objectPosition: "center" },
@@ -1107,8 +939,8 @@ function oo({
         }
       ) }),
       children: [
-        e || o ? /* @__PURE__ */ n(
-          J,
+        e || o ? /* @__PURE__ */ r(
+          U,
           {
             align: d,
             title: e,
@@ -1117,12 +949,12 @@ function oo({
             descriptionProps: s
           }
         ) : null,
-        l?.length ? /* @__PURE__ */ n(z, { align: d, actions: l, className: "mt-4" }) : null
+        l?.length ? /* @__PURE__ */ r(j, { align: d, actions: l, className: "mt-4" }) : null
       ]
     }
   );
 }
-const no = $(D)`
+const De = _(O)`
   ${(t) => t.hoverStyle === "none" ? "" : t.link ? `transition: box-shadow ease .3s;
               &:hover {
                 box-shadow: 0 0 10px rgba(95, 142, 244, 0.42);
@@ -1156,21 +988,21 @@ const no = $(D)`
     height: 100%;
     object-position: top center;
   }
-`, ht = "section";
-function gt({
+`, mt = "section";
+function pt({
   title: t,
   image: e,
   imageMeta: o,
-  description: r,
+  description: n,
   actions: i,
   align: a,
   listType: c = "",
   className: s = "",
   ...l
 }) {
-  return /* @__PURE__ */ k(ro, { className: v("card", `list-type-${c}`, s), align: a, ...l, children: [
-    e && /* @__PURE__ */ n(
-      E,
+  return /* @__PURE__ */ w(Je, { className: b("card", `list-type-${c}`, s), align: a, ...l, children: [
+    e && /* @__PURE__ */ r(
+      z,
       {
         icon: e,
         color: "primary.main",
@@ -1178,18 +1010,18 @@ function gt({
         imageMeta: o
       }
     ),
-    t || r ? /* @__PURE__ */ n(J, { align: a, title: t, description: r }) : null,
-    i?.length ? /* @__PURE__ */ n(z, { align: a, actions: i, className: "mt-4" }) : null
+    t || n ? /* @__PURE__ */ r(U, { align: a, title: t, description: n }) : null,
+    i?.length ? /* @__PURE__ */ r(j, { align: a, actions: i, className: "mt-4" }) : null
   ] });
 }
-const ro = $(D)`
+const Je = _(O)`
   padding: 5vw 4vw;
   box-sizing: border-box;
   /* min-height: 320px; */
   color: inherit !important;
   border-radius: 0.5rem;
   /* ${({ dark: t, theme: e }) => `background-color:${t ? e.palette.grey[900] : e.palette.common.white};`} */
-  @media (max-width: ${({ theme: t }) => t.breakpoints.values[ht]}px) {
+  @media (max-width: ${({ theme: t }) => t.breakpoints.values[mt]}px) {
     padding: 1.5rem 2rem;
   }
   @media (max-width: ${({ theme: t }) => t.breakpoints.values.sm}px) {
@@ -1237,17 +1069,17 @@ const ro = $(D)`
     }
   }
 
-  @media (min-width: ${({ theme: t }) => t.breakpoints.values[ht]}px) {
+  @media (min-width: ${({ theme: t }) => t.breakpoints.values[mt]}px) {
     padding: 2rem 2rem;
     text-align: left;
     box-sizing: border-box;
   }
 `;
-function io({
+function Ge({
   image: t,
   title: e,
   description: o,
-  imageProps: r = {},
+  imageProps: n = {},
   imageMeta: i,
   imageSize: a,
   titleProps: c = {},
@@ -1256,13 +1088,13 @@ function io({
   align: d,
   ...p
 }) {
-  const m = lt(t), h = R(N(t), 540);
-  return /* @__PURE__ */ k(
-    ao,
+  const m = st(t), h = P(N(t), 540);
+  return /* @__PURE__ */ w(
+    Ke,
     {
       className: "card-article",
       ...p,
-      prepend: /* @__PURE__ */ n("div", { className: "card__image__wrap", children: m && t ? /* @__PURE__ */ n(
+      prepend: /* @__PURE__ */ r("div", { className: "card__image__wrap", children: m && t ? /* @__PURE__ */ r(
         f,
         {
           sx: {
@@ -1275,16 +1107,16 @@ function io({
             alignItems: "center",
             justifyContent: "center"
           },
-          children: /* @__PURE__ */ n(E, { icon: t, color: "primary.main" })
+          children: /* @__PURE__ */ r(z, { icon: t, color: "primary.main" })
         }
-      ) : h && /* @__PURE__ */ n(
+      ) : h && /* @__PURE__ */ r(
         f,
         {
           component: "img",
           className: "card__image",
           src: h,
-          ...r,
-          alt: r.alt || i?.filename || "card-image",
+          ...n,
+          alt: n.alt || i?.filename || "card-image",
           style: { width: "100%", height: "100%", objectFit: a || "contain", objectPosition: "center" },
           loading: "lazy",
           sx: [
@@ -1292,13 +1124,13 @@ function io({
               width: i?.naturalWidth,
               height: i?.naturalHeight
             },
-            ...Array.isArray(r.sx) ? r.sx : [r.sx]
+            ...Array.isArray(n.sx) ? n.sx : [n.sx]
           ]
         }
       ) }),
       children: [
-        e || o ? /* @__PURE__ */ n(
-          J,
+        e || o ? /* @__PURE__ */ r(
+          U,
           {
             align: d,
             title: e,
@@ -1307,12 +1139,12 @@ function io({
             descriptionProps: s
           }
         ) : null,
-        l?.length ? /* @__PURE__ */ n(z, { align: d, actions: l, className: "mt-4" }) : null
+        l?.length ? /* @__PURE__ */ r(j, { align: d, actions: l, className: "mt-4" }) : null
       ]
     }
   );
 }
-const ao = $(D)`
+const Ke = _(O)`
   ${(t) => t.hoverStyle === "none" ? "" : t.link ? `transition: box-shadow ease .3s;
               &:hover {
                 box-shadow: 0 0 10px rgba(95, 142, 244, 0.42);
@@ -1336,27 +1168,27 @@ const ao = $(D)`
   .card__image {
     max-height: 60px;
   }
-`, ft = "section";
-function so({
+`, ut = "section";
+function Xe({
   title: t,
   image: e,
   imageMeta: o,
-  iconSize: r = 100,
+  iconSize: n = 100,
   description: i,
   actions: a,
   align: c,
   className: s = "",
   ...l
 }) {
-  return /* @__PURE__ */ n(lo, { className: v("card", s), ...l, children: /* @__PURE__ */ k(f, { className: "flex items-center", children: [
-    e && /* @__PURE__ */ n(E, { icon: e, color: "primary.main", size: r, imageMeta: o }),
-    /* @__PURE__ */ k(f, { className: "flex-1 ml-4", children: [
-      /* @__PURE__ */ n(J, { align: c, title: t, description: i }),
-      /* @__PURE__ */ n(z, { align: c, actions: a, className: "mt-4" })
+  return /* @__PURE__ */ r(qe, { className: b("card", s), ...l, children: /* @__PURE__ */ w(f, { className: "flex items-center", children: [
+    e && /* @__PURE__ */ r(z, { icon: e, color: "primary.main", size: n, imageMeta: o }),
+    /* @__PURE__ */ w(f, { className: "flex-1 ml-4", children: [
+      /* @__PURE__ */ r(U, { align: c, title: t, description: i }),
+      /* @__PURE__ */ r(j, { align: c, actions: a, className: "mt-4" })
     ] })
   ] }) });
 }
-const lo = $(D)`
+const qe = _(O)`
   padding: 5vw 4vw;
   text-align: left;
   box-sizing: border-box;
@@ -1364,7 +1196,7 @@ const lo = $(D)`
   color: inherit !important;
   border-radius: 0.5rem;
   /* ${({ dark: t, theme: e }) => `background-color:${t ? e.palette.grey[900] : e.palette.common.white};`} */
-  @media (max-width: ${({ theme: t }) => t.breakpoints.values[ft]}px) {
+  @media (max-width: ${({ theme: t }) => t.breakpoints.values[ut]}px) {
     padding: 1.5rem 2rem;
   }
   @media (max-width: ${({ theme: t }) => t.breakpoints.values.sm}px) {
@@ -1409,17 +1241,17 @@ const lo = $(D)`
     }
   }
 
-  @media (min-width: ${({ theme: t }) => t.breakpoints.values[ft]}px) {
+  @media (min-width: ${({ theme: t }) => t.breakpoints.values[ut]}px) {
     padding: 2rem 2rem;
     text-align: left;
     box-sizing: border-box;
   }
 `;
-function co({
+function Qe({
   title: t,
   titleProps: e = {},
   description: o,
-  descriptionProps: r = {},
+  descriptionProps: n = {},
   image: i,
   imageMeta: a,
   className: c = "",
@@ -1427,21 +1259,21 @@ function co({
   hoverStyle: l,
   ...d
 }) {
-  return /* @__PURE__ */ k(mo, { className: v("card-simple", c, `hover-style__${l}`), align: s, ...d, children: [
-    i && /* @__PURE__ */ n(E, { icon: i, color: "primary.main", imageMeta: a }),
-    t || o ? /* @__PURE__ */ n(
-      J,
+  return /* @__PURE__ */ w(Ze, { className: b("card-simple", c, `hover-style__${l}`), align: s, ...d, children: [
+    i && /* @__PURE__ */ r(z, { icon: i, color: "primary.main", imageMeta: a }),
+    t || o ? /* @__PURE__ */ r(
+      U,
       {
         align: s,
         title: t,
         titleProps: e,
         description: o,
-        descriptionProps: r
+        descriptionProps: n
       }
     ) : null
   ] });
 }
-const mo = $(D)`
+const Ze = _(O)`
   .card__title {
     color: ${({ theme: t }) => t.palette.text.primary};
     a {
@@ -1538,21 +1370,21 @@ const mo = $(D)`
     }
   }
 `;
-function po({ type: t = "default", ...e }) {
-  const r = {
-    article: oo,
-    simple: co,
-    news: so,
-    default: gt,
-    wall: io
-  }[t] || gt;
-  return /* @__PURE__ */ n(r, { ...t === "news" ? e : B(e, "iconSize") });
+function to({ type: t = "default", ...e }) {
+  const n = {
+    article: Ve,
+    simple: Qe,
+    news: Xe,
+    default: pt,
+    wall: Ge
+  }[t] || pt;
+  return /* @__PURE__ */ r(n, { ...t === "news" ? e : C(e, "iconSize") });
 }
-function uo({
+function eo({
   list: t = [],
   align: e = "top",
   cards: o,
-  listBorder: r = !0,
+  listBorder: n = !0,
   listType: i = "",
   col: a = 3,
   gap: c,
@@ -1564,24 +1396,24 @@ function uo({
   hoverStyle: h,
   ...u
 }) {
-  return /* @__PURE__ */ n(
-    st,
+  return /* @__PURE__ */ r(
+    Pt,
     {
       type: d,
-      className: v("card-list py-1", l, "items-stretch"),
+      className: b("card-list py-1", l, "items-stretch"),
       col: a,
       gap: c,
       align: e,
       ...u,
-      children: o || t.map((b) => /* @__PURE__ */ n(
-        po,
+      children: o || t.map((y) => /* @__PURE__ */ r(
+        to,
         {
-          borderColor: r,
+          borderColor: n,
           iconColor: s,
           type: d,
           listType: i,
           dark: p,
-          ...b,
+          ...y,
           align: m,
           style: c === 0 && t.length > 1 ? {
             borderRadius: 0,
@@ -1589,12 +1421,12 @@ function uo({
             marginBottom: "-1px"
           } : {}
         },
-        b.id
+        y.id
       ))
     }
   );
 }
-const ho = [
+const oo = [
   "align",
   "cards",
   "list",
@@ -1605,7 +1437,12 @@ const ho = [
   "iconColor",
   "type",
   "textAlign"
-], go = $(V)`
+];
+function B(t, e) {
+  const o = nt(t, e), n = C(t, e);
+  return [o, n];
+}
+const no = _(Q)`
   a .card {
     color: #404040;
     cursor: pointer;
@@ -1621,14 +1458,14 @@ const ho = [
     color: #404040;
   }
 `;
-function fo({ className: t, ...e }) {
-  const [o, r] = C(e, H), [i, a] = C(r, ho);
-  return /* @__PURE__ */ k(go, { className: v("section--card-list", t), type: e.type, ...a, children: [
-    Object.keys(o).length > 0 && /* @__PURE__ */ n(F, { center: !0, ...o, className: "mb-[2.5vw]" }),
-    /* @__PURE__ */ n(uo, { ...i, dark: !!e.dark })
+function ro({ className: t, ...e }) {
+  const [o, n] = B(e, q), [i, a] = B(n, oo);
+  return /* @__PURE__ */ w(no, { className: b("section--card-list", t), type: e.type, ...a, children: [
+    Object.keys(o).length > 0 && /* @__PURE__ */ r(X, { center: !0, ...o, className: "mb-[2.5vw]" }),
+    /* @__PURE__ */ r(eo, { ...i, dark: !!e.dark })
   ] });
 }
-const xo = $(fo)`
+const io = _(ro)`
   .card__description {
     white-space: pre-wrap;
   }
@@ -1644,29 +1481,29 @@ const xo = $(fo)`
     background: inherit !important;
   }
 `;
-function bo({ section: t, ...e }) {
-  const [{ editing: o }, r] = C(e, Y), i = P(() => ({
-    ...B(r, ["listBorder", "list", "iconSize", "imageSize"]),
-    list: r.list?.map((a) => ({
-      ...B(a, "icon", "iconColor"),
-      image: ["news", "simple", "default"].includes(r.type) && a.icon ? a.icon : a.image,
-      actions: a.actions?.map?.((c) => /* @__PURE__ */ n(Lt, { ...c, editing: o }, c.id)),
-      border: r.listBorder,
-      iconSize: r.iconSize,
-      imageSize: r.imageSize,
-      hoverStyle: r.hoverStyle
+function ao({ section: t, ...e }) {
+  const [{ editing: o }, n] = B(e, K), i = W(() => ({
+    ...C(n, ["listBorder", "list", "iconSize", "imageSize"]),
+    list: n.list?.map((a) => ({
+      ...C(a, "icon", "iconColor"),
+      image: ["news", "simple", "default"].includes(n.type) && a.icon ? a.icon : a.image,
+      actions: a.actions?.map?.((c) => /* @__PURE__ */ r(Mt, { ...c, editing: o }, c.id)),
+      border: n.listBorder,
+      iconSize: n.iconSize,
+      imageSize: n.imageSize,
+      hoverStyle: n.hoverStyle
     }))
-  }), [r]);
-  return /* @__PURE__ */ n(xo, { style: o ? { pointerEvents: "none" } : {}, ...i });
+  }), [n]);
+  return /* @__PURE__ */ r(io, { style: o ? { pointerEvents: "none" } : {}, ...i });
 }
-function yo({
+function so({
   properties: t,
   section: e,
   locale: o,
-  dev: r
+  dev: n
 }) {
-  return e?.config?.componentId ? /* @__PURE__ */ n(
-    le,
+  return e?.config?.componentId ? /* @__PURE__ */ r(
+    oe,
     {
       instanceId: e.id,
       componentId: e.config.componentId,
@@ -1675,17 +1512,17 @@ function yo({
       componentName: e.config.componentName,
       locale: o,
       properties: t,
-      dev: r
+      dev: n
     }
-  ) : /* @__PURE__ */ n(
+  ) : /* @__PURE__ */ r(
     f,
     {
       sx: {
         textAlign: "center",
         py: 2
       },
-      children: /* @__PURE__ */ n(
-        M,
+      children: /* @__PURE__ */ r(
+        I,
         {
           variant: "caption",
           sx: {
@@ -1697,33 +1534,33 @@ function yo({
     }
   );
 }
-function wo({
+function lo({
   src: t,
   dataId: e,
   isEdit: o = !1,
-  height: r = "100%",
+  height: n = "100%",
   onLoad: i = () => {
   }
 }) {
-  return /* @__PURE__ */ n(
-    ve,
+  return /* @__PURE__ */ r(
+    de,
     {
       isEdit: o,
       embedId: e,
       src: t,
-      height: r,
+      height: n,
       onLoad: () => {
         i();
       }
     }
   );
 }
-function vo({ dataId: t, src: e, actions: o, center: r, onLoad: i, ...a }) {
-  const [c, s] = C(a, H);
-  return /* @__PURE__ */ k(V, { ...s, children: [
-    Object.keys(c).length > 0 && /* @__PURE__ */ n(F, { center: r, ...c }),
-    /* @__PURE__ */ n(
-      wo,
+function co({ dataId: t, src: e, actions: o, center: n, onLoad: i, ...a }) {
+  const [c, s] = B(a, q);
+  return /* @__PURE__ */ w(Q, { ...s, children: [
+    Object.keys(c).length > 0 && /* @__PURE__ */ r(X, { center: n, ...c }),
+    /* @__PURE__ */ r(
+      lo,
       {
         dataId: t,
         src: e,
@@ -1731,10 +1568,10 @@ function vo({ dataId: t, src: e, actions: o, center: r, onLoad: i, ...a }) {
         height: a.iframeHeight ? `${a.iframeHeight}px` : "100%"
       }
     ),
-    /* @__PURE__ */ n(z, { actions: o, center: r })
+    /* @__PURE__ */ r(j, { actions: o, center: n })
   ] });
 }
-const Mn = {
+const xn = {
   src: "",
   embedUrl: "",
   title: "",
@@ -1745,42 +1582,42 @@ const Mn = {
   config: {},
   id: ""
 };
-function ko({ section: t, id: e, src: o, ...r }) {
-  const i = `${e}-${r.locale}`, [{ editing: a }, c] = C(r, Y), s = rt({}), l = JSON.parse(JSON.stringify(c)), { message: d } = be(i, "server"), p = ye(JSON.parse(JSON.stringify(c.config) || "{}"));
-  return U(() => {
+function mo({ section: t, id: e, src: o, ...n }) {
+  const i = `${e}-${n.locale}`, [{ editing: a }, c] = B(n, K), s = rt({}), l = JSON.parse(JSON.stringify(c)), { message: d } = se(i, "server"), p = le(JSON.parse(JSON.stringify(c.config) || "{}"));
+  return T(() => {
     d && d.onInit(() => p.current);
-  }, [d]), U(() => {
+  }, [d]), T(() => {
     const m = JSON.parse(JSON.stringify(c.config) || "{}");
-    we(s.current, m) || (s.current = m, d?.send("config-set", m));
-  }, [d, c.config]), o ? /* @__PURE__ */ n(vo, { ...l, dataId: i, src: o, style: a ? { pointerEvents: "none" } : {} }) : /* @__PURE__ */ n(_o, { children: 'Please set the "src" attribute for this block' });
+    ce(s.current, m) || (s.current = m, d?.send("config-set", m));
+  }, [d, c.config]), o ? /* @__PURE__ */ r(co, { ...l, dataId: i, src: o, style: a ? { pointerEvents: "none" } : {} }) : /* @__PURE__ */ r(po, { children: 'Please set the "src" attribute for this block' });
 }
-const _o = $("div")`
+const po = _("div")`
   user-select: none;
   color: #999;
   padding: 8px;
   height: 200px;
-`, $o = 12, So = ({
+`, uo = 12, ho = ({
   gridSettings: t,
   section: e,
   index: o,
-  columns: r,
+  columns: n,
   simulateMode: i = "desktop",
   isBackground: a
 }) => {
-  const c = t?.[i] ?? {}, s = c[e.id], l = Co(c);
+  const c = t?.[i] ?? {}, s = c[e.id], l = go(c);
   return {
     i: e.id,
     static: e?.locked || a,
     ...a ? {
       x: 0,
       y: 0,
-      w: r,
+      w: n,
       h: 1,
       isResizable: !1
     } : {
       x: s?.x ?? 0,
       y: s?.y ?? o,
-      w: s?.w ?? r,
+      w: s?.w ?? n,
       h: s?.h ?? 1,
       isResizable: !0
     },
@@ -1788,29 +1625,29 @@ const _o = $("div")`
     maxH: 1,
     maxY: l
   };
-}, Co = (t) => Object.values(t).reduce((e, o) => Math.max(e, o.y || 0), 0) || 0, No = (t) => {
-  const { dev: e, id: o, section: r, onBlockRender: i } = t, a = e?.mode, c = Jt((g) => g.breakpoints.down("sm")), { t: s } = ke(), { sections: l, sectionIds: d, config: p } = r, { columns: m = $o, gridSettings: h } = p || {}, u = O(
-    (g, w = !1, S = 0) => {
+}, go = (t) => Object.values(t).reduce((e, o) => Math.max(e, o.y || 0), 0) || 0, fo = (t) => {
+  const { dev: e, id: o, section: n, onBlockRender: i } = t, a = e?.mode, c = Ot((g) => g.breakpoints.down("sm")), { t: s } = me(), { sections: l, sectionIds: d, config: p } = n, { columns: m = uo, gridSettings: h } = p || {}, u = A(
+    (g, k = !1, S = 0) => {
       if (!i || !g || !g.component || g.visibility === "hidden")
         return null;
-      const _ = So({
+      const $ = ho({
         gridSettings: h,
         section: g,
         index: S,
         columns: m,
         simulateMode: c ? "mobile" : "desktop",
-        isBackground: w
-      }), W = _?.x ?? 0, j = _?.y ?? 0, L = _?.w ?? m, At = _?.h ?? 1, Tt = _?.maxY ?? 0, Ot = !!r?.config?.backgroundSectionId;
-      return /* @__PURE__ */ n(
+        isBackground: k
+      }), H = $?.x ?? 0, F = $?.y ?? 0, R = $?.w ?? m, jt = $?.h ?? 1, zt = $?.maxY ?? 0, Rt = !!n?.config?.backgroundSectionId;
+      return /* @__PURE__ */ r(
         f,
         {
-          className: w ? "layout-block-background" : "layout-block-section",
+          className: k ? "layout-block-background" : "layout-block-section",
           sx: {
             // 背景元素和普通元素都使用 grid 布局
-            ...w ? {
+            ...k ? {
               // 背景元素覆盖整个网格区域
               gridColumn: "1 / -1",
-              gridRow: `1 / ${Tt + 1}`,
+              gridRow: `1 / ${zt + 1}`,
               zIndex: 0,
               width: "100%",
               height: "100%",
@@ -1821,9 +1658,9 @@ const _o = $("div")`
             } : {
               position: "relative",
               // 使用 grid 定位普通元素
-              gridColumn: `${W + 1} / span ${L}`,
+              gridColumn: `${H + 1} / span ${R}`,
               // hasBackground 的话，不再 + 1，因为 background 会占用第一行
-              gridRow: `${j + (Ot ? 0 : 1)} / span ${At}`,
+              gridRow: `${F + (Rt ? 0 : 1)} / span ${jt}`,
               zIndex: 1
               // Ensure content is above background
             }
@@ -1842,18 +1679,18 @@ const _o = $("div")`
       );
     },
     [o, a, i, h, m, c]
-  ), { backgroundElements: b, contentElements: x } = P(() => {
+  ), { backgroundElements: y, contentElements: x } = W(() => {
     if (!d || !d.length || !l || !Object.keys(l).length)
       return { backgroundElements: [], contentElements: [] };
-    const g = [], w = [];
-    return d?.forEach((S, _) => {
-      const W = l[S];
-      if (!W) return;
-      const j = r?.config?.backgroundSectionId === S, L = u(W, j, _);
-      L && (j ? g.push(L) : w.push(L));
-    }), { backgroundElements: g, contentElements: w };
+    const g = [], k = [];
+    return d?.forEach((S, $) => {
+      const H = l[S];
+      if (!H) return;
+      const F = n?.config?.backgroundSectionId === S, R = u(H, F, $);
+      R && (F ? g.push(R) : k.push(R));
+    }), { backgroundElements: g, contentElements: k };
   }, [u, l, d]);
-  return a === "draft" && !b?.length && !x?.length ? /* @__PURE__ */ k(
+  return a === "draft" && !y?.length && !x?.length ? /* @__PURE__ */ w(
     f,
     {
       sx: {
@@ -1872,7 +1709,7 @@ const _o = $("div")`
         minHeight: "160px"
       },
       children: [
-        /* @__PURE__ */ n(
+        /* @__PURE__ */ r(
           f,
           {
             sx: {
@@ -1882,7 +1719,7 @@ const _o = $("div")`
             children: "📐"
           }
         ),
-        /* @__PURE__ */ n(
+        /* @__PURE__ */ r(
           f,
           {
             sx: {
@@ -1893,7 +1730,7 @@ const _o = $("div")`
             children: "Section Layout"
           }
         ),
-        /* @__PURE__ */ n(
+        /* @__PURE__ */ r(
           f,
           {
             sx: {
@@ -1903,7 +1740,7 @@ const _o = $("div")`
             children: s("maker.layoutBlock.draftPlaceholder")
           }
         ),
-        /* @__PURE__ */ n(
+        /* @__PURE__ */ r(
           f,
           {
             sx: {
@@ -1928,7 +1765,7 @@ const _o = $("div")`
         )
       ]
     }
-  ) : /* @__PURE__ */ k(
+  ) : /* @__PURE__ */ w(
     f,
     {
       sx: {
@@ -1940,12 +1777,88 @@ const _o = $("div")`
         height: "100%"
       },
       children: [
-        b,
+        y,
         x
       ]
     }
   );
-}, Bo = [
+}, xo = ["title", "description", "actions", "badge", "tag", "prepend", "append", "logo"];
+function bo({
+  image: t,
+  imageBorder: e,
+  imageShadow: o,
+  className: n,
+  reverse: i = !1,
+  fullSizeImage: a,
+  ...c
+}) {
+  const [s, l] = B(c, q), d = Object.keys(s).length > 0 && Object.values(nt(s, xo)).filter(Boolean).length > 0 && /* @__PURE__ */ r(X, { ...s }), p = bt(t) ? t : /* @__PURE__ */ r(f, { component: "img", src: t, alt: "", className: "block" }), m = ["phone", "macbook"].includes(e), h = t && /* @__PURE__ */ r(
+    f,
+    {
+      className: b(
+        "section__image",
+        "m-auto, leading-[1] text-center",
+        o && "shadow-xl",
+        s?.center ? "flex justify-center items-center" : ""
+      ),
+      sx: {
+        border: e === !0 ? "1px solid #c0c0c0" : void 0,
+        borderRadius: 2,
+        overflow: "hidden",
+        // FIXME: Screenshot 组件无法设置最外层 div 的样式，只能通过父元素设置
+        "> div": m ? { width: "100%", video: { borderRadius: "0 !important" } } : void 0
+      },
+      children: m ? (
+        // @ts-ignore
+        /* @__PURE__ */ r(pe, { type: e, sx: { width: "100%" }, children: p })
+      ) : p
+    }
+  );
+  return /* @__PURE__ */ r(
+    Q,
+    {
+      className: b(
+        "section--block",
+        n,
+        a && !i && tt`
+            .section-bg {
+              height: 80%;
+            }
+          `
+      ),
+      ...l,
+      boxProps: a ? { sx: { padding: 0, overflow: "hidden" } } : void 0,
+      children: /* @__PURE__ */ r(
+        Pt,
+        {
+          col: t ? 2 : 1,
+          className: a ? tt`
+                display: flex;
+                flex-direction: column;
+
+                > .base-info,
+                > .section__image {
+                  width: 100%;
+
+                  > img,
+                  > video {
+                    width: 100%;
+                  }
+                }
+              ` : void 0,
+          children: i ? /* @__PURE__ */ w(D, { children: [
+            h,
+            d
+          ] }) : /* @__PURE__ */ w(D, { children: [
+            d,
+            h
+          ] })
+        }
+      )
+    }
+  );
+}
+const yo = [
   /youtu\.be\/([^#&?]{11})/,
   // youtu.be/<id>
   /\?v=([^#&?]{11})/,
@@ -1957,50 +1870,50 @@ const _o = $("div")`
   /\/v\/([^#&?]{11})/
   // /v/<id>
 ];
-function Mo(t) {
+function wo(t) {
   if (/youtu\.?be/.test(t))
-    for (const e of Bo) {
+    for (const e of yo) {
       const o = e.exec(t)?.[1];
       if (o)
         return o;
     }
 }
-function Io(t) {
-  const e = Mo(t);
+function vo(t) {
+  const e = wo(t);
   if (e)
     return `https://youtube.com/embed/${e}`;
 }
-function Po({ src: t }) {
-  return U(() => {
+function ko({ src: t }) {
+  return T(() => {
     import("@lottiefiles/lottie-player");
-  }, []), /* @__PURE__ */ n("lottie-player", { autoplay: !0, loop: !0, mode: "normal", src: t });
+  }, []), /* @__PURE__ */ r("lottie-player", { autoplay: !0, loop: !0, mode: "normal", src: t });
 }
-function Wo(t) {
-  return /* @__PURE__ */ n(
+function _o(t) {
+  return /* @__PURE__ */ r(
     f,
     {
       sx: {
         maxHeight: 400,
         overflow: "hidden auto"
       },
-      children: /* @__PURE__ */ n(_e, { ...t })
+      children: /* @__PURE__ */ r(ue, { ...t })
     }
   );
 }
-function Ro({ url: t }) {
-  const e = rt(null), o = 495, [r, i] = Q(
+function $o({ url: t }) {
+  const e = rt(null), o = 495, [n, i] = J(
     e.current ? e.current.offsetWidth * 0.5625 : o
-  ), a = O(() => {
+  ), a = A(() => {
     const c = window.innerWidth > 990 ? 1 : window.innerWidth > 522 ? 1.2 : window.innerWidth > 400 ? 1.45 : 1.85, s = e.current ? e.current.offsetWidth * 0.5625 : o;
     return i(Math.floor(s * c));
   }, []);
-  return U(() => {
+  return T(() => {
     window.addEventListener("resize", a);
     const c = window.innerWidth > 990 ? 1 : window.innerWidth > 522 ? 1.2 : window.innerWidth > 400 ? 1.45 : 1.85, s = e.current ? e.current.offsetWidth * 0.5625 : o;
     return i(Math.floor(s * c)), function() {
       window.removeEventListener("resize", a);
     };
-  }, [r, a]), /* @__PURE__ */ n(
+  }, [n, a]), /* @__PURE__ */ r(
     f,
     {
       component: "iframe",
@@ -2012,13 +1925,13 @@ function Ro({ url: t }) {
       allowFullScreen: !0,
       sx: {
         width: "100%",
-        height: `${r}px`,
+        height: `${n}px`,
         display: "block"
       }
     }
   );
 }
-const In = {
+const bn = {
   image: "https://www.arcblock.io/static/ead0cabde7f2b7ff34db8f3e8ceca271/afc4b/builder.png",
   badge: "Develop · Deploy · Run",
   title: "The Future is Here: Blockchain and Decentralized Application Development",
@@ -2029,27 +1942,27 @@ const In = {
   actions: void 0,
   hasImage: !0,
   center: !1
-}, jo = $(Ye)`
+}, So = _(bo)`
   .section__description {
   }
 `;
-function zo({
+function Co({
   hasImage: t,
   fullSizeImage: e,
   boxed: o,
-  videoPoster: r,
+  videoPoster: n,
   imageMeta: i,
   imageOptimization: a,
   imageSize: c,
   section: s,
   ...l
 }) {
-  const [{ editing: d }, p] = C({ ...l, boxed: e ? void 0 : o }, Y);
-  let m = Eo(p.image, r, e, i, a, c);
+  const [{ editing: d }, p] = B({ ...l, boxed: e ? void 0 : o }, K);
+  let m = No(p.image, n, e, i, a, c);
   t || (m = null);
   let h = null;
-  return p.actions && (h = p.actions?.map?.((u, b) => /* @__PURE__ */ n(Lt, { ...u, editing: d }, b))), /* @__PURE__ */ n(
-    jo,
+  return p.actions && (h = p.actions?.map?.((u, y) => /* @__PURE__ */ r(Mt, { ...u, editing: d }, y))), /* @__PURE__ */ r(
+    So,
     {
       ...p,
       style: d ? { pointerEvents: "none" } : {},
@@ -2059,18 +1972,18 @@ function zo({
     }
   );
 }
-function Eo(t, e, o, r, i, a) {
+function No(t, e, o, n, i, a) {
   if (t) {
     if (t.endsWith(".json"))
-      return /* @__PURE__ */ n(Po, { src: t });
+      return /* @__PURE__ */ r(ko, { src: t });
     if (t.indexOf("twitter.com") !== -1)
-      return /* @__PURE__ */ n(Wo, { sourceType: "url", url: t });
-    const c = Io(t);
+      return /* @__PURE__ */ r(_o, { sourceType: "url", url: t });
+    const c = vo(t);
     if (c)
-      return /* @__PURE__ */ n(Ro, { url: c });
-    const { naturalWidth: s, naturalHeight: l, filename: d } = r || {};
-    if (A(t))
-      return /* @__PURE__ */ n(
+      return /* @__PURE__ */ r($o, { url: c });
+    const { naturalWidth: s, naturalHeight: l, filename: d } = n || {};
+    if (L(t))
+      return /* @__PURE__ */ r(
         "video",
         {
           width: s && `${s}px`,
@@ -2085,14 +1998,14 @@ function Eo(t, e, o, r, i, a) {
             width: "100%",
             height: "100%"
           },
-          poster: R(N(e), o ? 1200 : 540, i),
-          children: /* @__PURE__ */ n("source", { src: N(t), type: Oe(t) })
+          poster: P(N(e), o ? 1200 : 540, i),
+          children: /* @__PURE__ */ r("source", { src: N(t), type: Ae(t) })
         },
         t
       );
     const p = i === "quality" ? 1 : 0.6;
-    return /* @__PURE__ */ n(
-      St,
+    return /* @__PURE__ */ r(
+      kt,
       {
         src: N(t),
         sizesAttr: {
@@ -2114,35 +2027,35 @@ function Eo(t, e, o, r, i, a) {
   }
   return null;
 }
-const Pn = ["production", "draft"];
-function Wn({ mode: t, version: e } = {}) {
+const yn = ["production", "draft"];
+function wn({ mode: t, version: e } = {}) {
   const o = e && typeof e == "number" ? { mode: t, version: e } : { mode: t };
-  return it.get(`/api/${at()}/pages`, { params: o }).then((r) => r.data);
+  return it.get(`/api/${at()}/pages`, { params: o }).then((n) => n.data);
 }
-function Rn({ mode: t, routes: e }) {
+function vn({ mode: t, routes: e }) {
   return it.post(`/api/${at()}/pages/publish`, { mode: t, routes: e }).then((o) => o.data);
 }
-function Lo({
+function Bo({
   locale: t,
   sort: e,
   page: o,
-  limit: r,
+  limit: n,
   mode: i
 } = {}) {
-  return it.get(`/api/${at()}/pages/toc`, { params: { locale: t, sort: e, page: o, limit: r, mode: i } }).then((a) => a.data);
+  return it.get(`/api/${at()}/pages/toc`, { params: { locale: t, sort: e, page: o, limit: n, mode: i } }).then((a) => a.data);
 }
-const jn = {
+const kn = {
   style: "list",
   sort: "-updatedAt"
-}, xt = 20;
-function Ao({ style: t, sort: e, section: o, ...r }) {
-  const [{ editing: i, locale: a }, c] = C(r, Y), [s, l] = C(c, H), [d, p] = Q(), m = rt(!1), h = $e(), u = he(), b = O(async () => {
+}, ht = 20;
+function Mo({ style: t, sort: e, section: o, ...n }) {
+  const [{ editing: i, locale: a }, c] = B(n, K), [s, l] = B(c, q), [d, p] = J(), m = rt(!1), h = he(), u = qt(), y = A(async () => {
     if (!m.current) {
       m.current = !0, h();
       try {
-        const x = d ? Math.floor(d.list.length / xt) + 1 : 1, { list: y, total: g } = await Lo({ locale: a, sort: e, page: x, limit: xt });
-        p((w) => ({
-          list: (w?.list ?? []).concat(y),
+        const x = d ? Math.floor(d.list.length / ht) + 1 : 1, { list: v, total: g } = await Bo({ locale: a, sort: e, page: x, limit: ht });
+        p((k) => ({
+          list: (k?.list ?? []).concat(v),
           total: g
         }));
       } finally {
@@ -2150,46 +2063,46 @@ function Ao({ style: t, sort: e, section: o, ...r }) {
       }
     }
   }, [d, a, e, h]);
-  return Se(() => {
-    b();
-  }), /* @__PURE__ */ k(V, { ...l, sx: i ? { pointerEvents: "none" } : {}, children: [
-    Object.keys(s).length > 0 && /* @__PURE__ */ n(F, { ...s }),
-    d ? /* @__PURE__ */ k(X, { children: [
-      /* @__PURE__ */ n(
-        ct,
+  return ge(() => {
+    y();
+  }), /* @__PURE__ */ w(Q, { ...l, sx: i ? { pointerEvents: "none" } : {}, children: [
+    Object.keys(s).length > 0 && /* @__PURE__ */ r(X, { ...s }),
+    d ? /* @__PURE__ */ w(D, { children: [
+      /* @__PURE__ */ r(
+        lt,
         {
           container: !0,
           spacing: 2,
           sx: {
             justifyContent: "center"
           },
-          children: d?.list.map((x) => /* @__PURE__ */ n(
-            ct,
+          children: d?.list.map((x) => /* @__PURE__ */ r(
+            lt,
             {
               size: {
                 xs: 12,
                 sm: t === "card" ? 6 : 12,
                 md: t === "card" ? 3 : 12
               },
-              children: /* @__PURE__ */ k(
-                To,
+              children: /* @__PURE__ */ w(
+                Io,
                 {
                   elevation: 0,
-                  className: v(t === "card" && "style-card"),
+                  className: b(t === "card" && "style-card"),
                   onClick: i ? void 0 : () => u(x.slug),
                   children: [
-                    !!x.image && /* @__PURE__ */ n(
-                      Xt,
+                    !!x.image && /* @__PURE__ */ r(
+                      Ft,
                       {
                         component: "img",
                         alt: "",
-                        image: R(N(x.image), 540),
+                        image: P(N(x.image), 540),
                         loading: "lazy"
                       }
                     ),
-                    /* @__PURE__ */ k(qt, { children: [
-                      /* @__PURE__ */ n(M, { variant: "h6", component: "div", className: bt, children: x.title || x.id }),
-                      /* @__PURE__ */ n(M, { variant: "body2", className: bt, children: x.description })
+                    /* @__PURE__ */ w(Yt, { children: [
+                      /* @__PURE__ */ r(I, { variant: "h6", component: "div", className: gt, children: x.title || x.id }),
+                      /* @__PURE__ */ r(I, { variant: "body2", className: gt, children: x.description })
                     ] })
                   ]
                 }
@@ -2199,35 +2112,35 @@ function Ao({ style: t, sort: e, section: o, ...r }) {
           ))
         }
       ),
-      /* @__PURE__ */ n(
+      /* @__PURE__ */ r(
         f,
         {
           sx: {
             textAlign: "center",
             mt: 2
           },
-          children: d.total > d.list.length ? /* @__PURE__ */ n(T, { variant: "outlined", color: "secondary", onClick: b, loading: m.current, children: "More" }) : /* @__PURE__ */ n(T, { variant: "outlined", color: "secondary", disabled: !0, children: "No More" })
+          children: d.total > d.list.length ? /* @__PURE__ */ r(E, { variant: "outlined", color: "secondary", onClick: y, loading: m.current, children: "More" }) : /* @__PURE__ */ r(E, { variant: "outlined", color: "secondary", disabled: !0, children: "No More" })
         }
       )
-    ] }) : /* @__PURE__ */ n(
+    ] }) : /* @__PURE__ */ r(
       f,
       {
         sx: {
           p: 2,
           textAlign: "center"
         },
-        children: /* @__PURE__ */ n(Kt, { size: 24 })
+        children: /* @__PURE__ */ r(Ht, { size: 24 })
       }
     )
   ] });
 }
-const bt = et`
+const gt = tt`
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   overflow: hidden;
   text-overflow: ellipsis;
-`, To = $(Gt)`
+`, Io = _(Ut)`
   border: 1px solid #e0e0e0;
   background-color: transparent;
   cursor: pointer;
@@ -2247,65 +2160,64 @@ const bt = et`
       max-height: 50vw;
     }
   }
-`, Oo = {
-  iframe: ko,
-  section: zo,
-  "section-card-list": bo,
-  toc: Ao,
-  "ai-runtime": Ge,
-  "custom-component": yo,
-  "layout-block": No
+`, Wo = {
+  iframe: mo,
+  section: Co,
+  "section-card-list": ao,
+  toc: Mo,
+  "custom-component": so,
+  "layout-block": fo
 };
-function Uo({
+function Po({
   id: t,
   type: e,
   mode: o,
-  config: r,
+  config: n,
   section: i,
   ignorePageMetaStyle: a,
   page: c,
   ...s
 }) {
-  const l = Oo[e], { getPageMetaStyle: d } = ze(), p = P(() => {
-    const { height: u, ...b } = r;
-    return e === "layout-block" && (b.onBlockRender = (x) => {
-      const y = {
-        ...r?.dev,
+  const l = Wo[e], { getPageMetaStyle: d } = Se(), p = W(() => {
+    const { height: u, ...y } = n;
+    return e === "layout-block" && (y.onBlockRender = (x) => {
+      const v = {
+        ...n?.dev,
         ...x?.config?.dev
-      }, { defaultLocale: g } = y, w = {
-        ...q(r, ["locale", "editing"]),
+      }, { defaultLocale: g } = v, k = {
+        ...nt(n, ["locale", "editing"]),
         ...x?.config,
-        dev: y
-      }, { locale: S } = w;
-      let _ = c?.dataSource?.[x?.id]?.[S];
-      return Zt(_) && (_ = c?.dataSource?.[x?.id]?.[g ?? "en"]), /* @__PURE__ */ n(
-        Uo,
+        dev: v
+      }, { locale: S } = k;
+      let $ = c?.dataSource?.[x?.id]?.[S];
+      return Dt($) && ($ = c?.dataSource?.[x?.id]?.[g ?? "en"]), /* @__PURE__ */ r(
+        Po,
         {
           ...x,
           config: {
             ...x?.section?.properties,
-            ..._,
-            ...w
+            ...$,
+            ...k
           },
           page: c,
           ignorePageMetaStyle: !0
         }
       );
-    }), b;
-  }, [r, e]), m = P(() => {
+    }), y;
+  }, [n, e]), m = W(() => {
     const u = {};
-    return e !== "custom-component" && (u.height = r.height), u.sx = a ? void 0 : d("sx"), u.id = `BlockBase-${t}`, u;
-  }, [r.height, a, e, d]), h = l && /* @__PURE__ */ n(l, { mode: o, ...p, id: t, section: i });
-  return h ? /* @__PURE__ */ n(De, { ...s, ...m, children: h }) : /* @__PURE__ */ n(Fo, { type: e });
+    return e !== "custom-component" && (u.height = n.height), u.sx = a ? void 0 : d("sx"), u.id = `BlockBase-${t}`, u;
+  }, [n.height, a, e, d]), h = l && /* @__PURE__ */ r(l, { mode: o, ...p, id: t, section: i });
+  return h ? /* @__PURE__ */ r(Ce, { ...s, ...m, children: h }) : /* @__PURE__ */ r(jo, { type: e });
 }
-function Fo({ type: t }) {
-  return /* @__PURE__ */ n(
+function jo({ type: t }) {
+  return /* @__PURE__ */ r(
     f,
     {
       sx: {
         p: 2
       },
-      children: /* @__PURE__ */ k(Qt, { icon: /* @__PURE__ */ n(Ut, {}), color: "error", children: [
+      children: /* @__PURE__ */ w(Vt, { icon: /* @__PURE__ */ r(Lt, {}), color: "error", children: [
         "Unsupported Block `",
         t,
         "`"
@@ -2314,13 +2226,13 @@ function Fo({ type: t }) {
   );
 }
 export {
-  Uo as B,
-  Mn as I,
-  Nn as P,
-  Pn as S,
-  jn as T,
-  Cn as a,
-  In as b,
-  Wn as g,
-  Rn as p
+  Po as B,
+  xn as I,
+  gn as P,
+  yn as S,
+  kn as T,
+  hn as a,
+  bn as b,
+  wn as g,
+  vn as p
 };