@blocklet/pages-kit-inner-components 0.6.35 → 0.6.37

package/lib/es/chunks/{index-B6GyWmgC.js → index-DBTbT9nm.js}

@@ -1,6 +1,6 @@
 import { jsx as i, jsxs as b, Fragment as J } from "react/jsx-runtime";
 import { ErrorOutline as be } from "@mui/icons-material";
-import { Box as p, styled as ye, Typography as W, Container as ve, useTheme as Tt, useMediaQuery as Yt, GlobalStyles as ke, Card as we, CircularProgress as Ce, Grid as Pt, CardMedia as Be, CardContent as Ee, Alert as Ie } from "@mui/material";
+import { Box as p, styled as ye, Typography as M, Container as ve, useTheme as Tt, useMediaQuery as Yt, GlobalStyles as ke, Card as we, CircularProgress as Ce, Grid as Pt, CardMedia as Be, CardContent as Ee, Alert as Ie } from "@mui/material";
 import Se from "lodash/isEmpty";
 import et from "lodash/pick";
 import De, { createContext as ht, useMemo as E, useCallback as H, useContext as ft, useState as ot, useEffect as X, Fragment as Qe, isValidElement as Jt, useRef as xt } from "react";
@@ -8,17 +8,17 @@ import S from "lodash/keyBy";
 import { styled as I, useTheme as Xt } from "@arcblock/ux/lib/Theme";
 import { cx as v, css as ut } from "@emotion/css";
 import R from "lodash/omit";
-import { Link as Re, NavLink as Ne, useNavigate as Le } from "react-router-dom";
+import { Link as Re, NavLink as Le, useNavigate as Ne } from "react-router-dom";
 import je from "@arcblock/ux/lib/Button";
 import gt from "is-uri";
 import { Icon as Kt } from "@iconify-icon/react";
-import { e as U, f as N, i as bt, l as yt } from "./state-DRjnlQY_.js";
+import { e as U, f as L, i as bt, l as yt } from "./state-DRjnlQY_.js";
 import Pe from "@blocklet/pages-kit/builtin/markdown/markdown-renderer";
 import { useColorConvert as Zt } from "@blocklet/pages-kit/contexts/color";
 import { materialDark as ze } from "react-syntax-highlighter/dist/esm/styles/prism";
-import Me from "@arcblock/react-hooks/lib/useBrowser";
+import We from "@arcblock/react-hooks/lib/useBrowser";
 import zt from "@arcblock/ux/lib/Colors";
-import { ResponsiveImage as qt, CustomComponentRenderer as We } from "@blocklet/pages-kit/components";
+import { ResponsiveImage as qt, CustomComponentRenderer as Me } from "@blocklet/pages-kit/components";
 import { isGradient as Ue, isColorString as Fe } from "@blocklet/pages-kit/utils/style";
 import _t from "@mui/material/useMediaQuery";
 import { join as $ } from "pathe";
@@ -310,7 +310,7 @@ const K = "{{CUSTOM_VALUE}}", qe = [
   // { value: 'google-pixel', title: 'Google Pixel', group: 'deviceFrame' },
   // { value: 'google-pixel-2-xl', title: 'Google Pixel 2 XL', group: 'deviceFrame' },
   // { value: 'apple-watch', title: 'Apple Watch', group: 'deviceFrame' },
-], lo = (t) => te.some((e) => e.value === t), co = (t) => ee.some((e) => e.value === t), ee = [
+], lo = (t) => te.some((e) => e.value === t), Ao = (t) => ee.some((e) => e.value === t), ee = [
   {
     value: "chrome",
     title: "Chrome Browser",
@@ -323,7 +323,7 @@ const K = "{{CUSTOM_VALUE}}", qe = [
     group: "browserFrame",
     sx: {}
   }
-], Ao = [
+], co = [
   {
     value: "shadow-sm",
     title: "Shadow Low Elevation",
@@ -363,7 +363,7 @@ const K = "{{CUSTOM_VALUE}}", qe = [
   },
   ...so,
   ...ee,
-  ...Ao,
+  ...co,
   ...te
 ], go = [
   {
@@ -465,13 +465,13 @@ function Q(t) {
   const { type: e, value: o, format: n = "sx", defaultValue: r = null } = t, a = So.get(e);
   if (!a || typeof o != "string" || !o)
     return r;
-  const c = o.startsWith("custom:"), s = c ? "custom" : o;
+  const A = o.startsWith("custom:"), s = A ? "custom" : o;
   if (a?.[s] && a?.[s]?.[n]) {
     const l = a[s][n];
-    if (c) {
-      const A = o.replace("custom:", "");
+    if (A) {
+      const c = o.replace("custom:", "");
       try {
-        return JSON.parse(JSON.stringify(l || {}).replaceAll(K, A));
+        return JSON.parse(JSON.stringify(l || {}).replaceAll(K, c));
       } catch {
       }
     }
@@ -497,13 +497,13 @@ function Oi({
     if (!r) return {};
     const l = n || o;
     return r.locales?.[l] ?? {};
-  }, [r, o, n]), c = H(
+  }, [r, o, n]), A = H(
     (l = "sx") => {
-      const A = a();
-      return !A || !A.style ? {} : Object.entries(A.style || {}).reduce((u, [m, g]) => {
+      const c = a();
+      return !c || !c.style ? {} : Object.entries(c.style || {}).reduce((u, [m, g]) => {
         if (!g) return u;
         const x = `${m}Custom`;
-        A.style[x];
+        c.style[x];
         const f = Q({
           type: m,
           value: g,
@@ -517,9 +517,9 @@ function Oi({
     () => ({
       page: r,
       getPageMeta: a,
-      getPageMetaStyle: c
+      getPageMetaStyle: A
     }),
-    [r, a, c]
+    [r, a, A]
   );
   return /* @__PURE__ */ i(oe.Provider, { value: s, children: e });
 }
@@ -541,10 +541,10 @@ function re() {
 function Ro({ icon: t, ...e }) {
   return /* @__PURE__ */ i(Kt, { icon: t, ...e, ref: null });
 }
-function No({ icon: t, className: e = "", size: o = "1rem", ...n }) {
-  return /* @__PURE__ */ i(Lo, { component: Ro, className: v("css-icon", e), size: o, ...n, icon: t });
+function Lo({ icon: t, className: e = "", size: o = "1rem", ...n }) {
+  return /* @__PURE__ */ i(No, { component: Ro, className: v("css-icon", e), size: o, ...n, icon: t });
 }
-const Lo = I(p)`
+const No = I(p)`
   &.css-icon {
     display: inline-block;
     width: ${({ size: t }) => t};
@@ -552,8 +552,8 @@ const Lo = I(p)`
   }
 `;
 function jo({ icon: t, className: e = "", size: o = "1rem", imageMeta: n, ...r }) {
-  const a = U(N(t), 540), [c, s] = ot(!1), l = Xt();
-  return c ? /* @__PURE__ */ i(No, { icon: "i-mdi:image", color: l.palette.grey[500], size: o, className: e, ...r }) : /* @__PURE__ */ i(Po, { className: v("image-icon", e), size: o, ...r, children: /* @__PURE__ */ i(
+  const a = U(L(t), 540), [A, s] = ot(!1), l = Xt();
+  return A ? /* @__PURE__ */ i(Lo, { icon: "i-mdi:image", color: l.palette.grey[500], size: o, className: e, ...r }) : /* @__PURE__ */ i(Po, { className: v("image-icon", e), size: o, ...r, children: /* @__PURE__ */ i(
     "img",
     {
       className: "image-icon__image",
@@ -583,9 +583,9 @@ function mt({ icon: t, size: e = "1rem", imageMeta: o, ...n }) {
 const zo = I(p)`
   flex-shrink: 0;
 `;
-function Y({ text: t, children: e, icon: o = "", endIcon: n, color: r = "primary", link: a = "", href: c = "", ...s }) {
-  const l = o ? /* @__PURE__ */ i(mt, { icon: o }) : null, A = n ? /* @__PURE__ */ i(mt, { icon: n }) : null, d = a || c, u = { ...s };
-  return d && (u.href = d, gt(d) && (u.target = u.target || "_blank")), /* @__PURE__ */ i(je, { startIcon: l, endIcon: A, color: r, ...u, children: t || e });
+function Y({ text: t, children: e, icon: o = "", endIcon: n, color: r = "primary", link: a = "", href: A = "", ...s }) {
+  const l = o ? /* @__PURE__ */ i(mt, { icon: o }) : null, c = n ? /* @__PURE__ */ i(mt, { icon: n }) : null, d = a || A, u = { ...s };
+  return d && (u.href = d, gt(d) && (u.target = u.target || "_blank")), /* @__PURE__ */ i(je, { startIcon: l, endIcon: c, color: r, ...u, children: t || e });
 }
 function ae({ editing: t, text: e, ...o }) {
   const { pages: n = [] } = re(), r = n.find((a) => a.id === (o.link || o.linkId));
@@ -614,7 +614,7 @@ function V({ actions: t, center: e, className: o, align: n }) {
     }
   ) : null;
 }
-const Mo = "section", Wo = ye(p)`
+const Wo = "section", Mo = ye(p)`
   overflow: hidden;
 
   .section__title {
@@ -665,7 +665,7 @@ const Mo = "section", Wo = ye(p)`
       margin-bottom: 0.5rem;
     }
   }
-  @media (min-width: ${({ theme: t }) => t.breakpoints.values[Mo]}px) {
+  @media (min-width: ${({ theme: t }) => t.breakpoints.values[Wo]}px) {
     .section__tag {
       margin-bottom: 32px;
     }
@@ -684,10 +684,10 @@ function it({
   actions: n,
   className: r = "",
   classes: a = {},
-  prepend: c,
+  prepend: A,
   append: s,
   level: l = 2,
-  tag: A,
+  tag: c,
   badge: d,
   center: u,
   logo: m,
@@ -696,7 +696,7 @@ function it({
   ...f
 }) {
   const y = Zt();
-  if (!t && !e && !n && !d && !A && !c && !s && !m) return null;
+  if (!t && !e && !n && !d && !c && !A && !s && !m) return null;
   const k = Math.max(Math.min(5, l + 1), 1), w = {
     1: "xl:!text-3xl lg:!text-2xl md:!text-xl",
     2: "xl:!text-2xl lg:!text-xl md:!text-lg",
@@ -705,12 +705,12 @@ function it({
     5: "xl:!text-lg md:!text-md sm:!text-sm",
     6: "!text-sm"
   }, B = l === 0 ? "big" : `h${k}`, D = l === 0;
-  return /* @__PURE__ */ b(Wo, { className: v("base-info", "lg:text-left", u && "!text-center", r), ...f, children: [
-    c && /* @__PURE__ */ i("div", { children: c }),
-    (A || d) && /* @__PURE__ */ i("div", { className: v("section__tag", a?.tag || a?.badge), children: A || d }),
+  return /* @__PURE__ */ b(Mo, { className: v("base-info", "lg:text-left", u && "!text-center", r), ...f, children: [
+    A && /* @__PURE__ */ i("div", { children: A }),
+    (c || d) && /* @__PURE__ */ i("div", { className: v("section__tag", a?.tag || a?.badge), children: c || d }),
     m && /* @__PURE__ */ i("img", { className: "w-[120px] m-auto mb-8", src: m, alt: "info", loading: "lazy" }),
     t && /* @__PURE__ */ i(
-      W,
+      M,
       {
         sx: {
           whiteSpace: "pre-wrap",
@@ -747,7 +747,7 @@ function it({
         children: /* @__PURE__ */ i(Pe, { codeOptions: { showActionButton: !1, theme: ze }, children: e })
       }
     ) : /* @__PURE__ */ i(
-      W,
+      M,
       {
         sx: {
           whiteSpace: "pre-wrap",
@@ -803,7 +803,7 @@ function Ho(t) {
 }
 function Vo(t) {
   let e = {};
-  return typeof t == "string" ? Ue(t) ? e.image = t : (e.image = N(t), Fe(t) && (e.color = t, e.image = "")) : e = t, e;
+  return typeof t == "string" ? Ue(t) ? e.image = t : (e.image = L(t), Fe(t) && (e.color = t, e.image = "")) : e = t, e;
 }
 function Go() {
   const [t, e] = ot(Date.now());
@@ -816,12 +816,12 @@ function Go() {
     };
   }, []), t;
 }
-function Mt(t, e, o, n, r) {
+function Wt(t, e, o, n, r) {
   let a = null;
-  const { color: c = "", image: s } = Vo(e);
+  const { color: A = "", image: s } = Vo(e);
   if (s && Fo(s)) {
     delete o.backgroundColor;
-    const l = !(t.mobile.apple.device || Uo()) && T(s), A = T(s) && n ? U(N(n), 1200, "quality") : "";
+    const l = !(t.mobile.apple.device || Uo()) && T(s), c = T(s) && n ? U(L(n), 1200, "quality") : "";
     l ? a = /* @__PURE__ */ i(
       p,
       {
@@ -832,7 +832,7 @@ function Mt(t, e, o, n, r) {
         muted: !0,
         controls: !1,
         playsInline: !0,
-        poster: A,
+        poster: c,
         src: T(s) ? s : U(s, 1200, "quality"),
         sx: {
           width: "100%",
@@ -849,7 +849,7 @@ function Mt(t, e, o, n, r) {
     ) : a = /* @__PURE__ */ i(
       qt,
       {
-        src: T(s) && n ? A : s,
+        src: T(s) && n ? c : s,
         sizesAttr: {
           sm: 600,
           md: 900,
@@ -872,7 +872,7 @@ function Mt(t, e, o, n, r) {
       },
       r || s
     );
-  } else s ? o.backgroundImage = `${s} !important` : c && (o.backgroundColor = `${c} !important`);
+  } else s ? o.backgroundImage = `${s} !important` : A && (o.backgroundColor = `${A} !important`);
   return a;
 }
 function Oo({ autoWidth: t, children: e, ...o }) {
@@ -897,12 +897,12 @@ function at({
   sx: n = {},
   boxed: r = { show: !1 },
   padding: a = "normal",
-  boxProps: c,
+  boxProps: A,
   type: s,
   ...l
 }) {
-  const A = { ...n }, d = _t((g) => g.breakpoints.down("md"));
-  t && (A.color = zt.common.white, A.backgroundColor = `${zt.grey[900]} !important`), r.show && (A.display = "flex");
+  const c = { ...n }, d = _t((g) => g.breakpoints.down("md"));
+  t && (c.color = zt.common.white, c.backgroundColor = `${zt.grey[900]} !important`), r.show && (c.display = "flex");
   const u = E(() => !Number(l.boxMaxWidth) || d ? {
     width: "100%"
   } : s === "wall" && l.boxMaxWidth ? {
@@ -920,7 +920,7 @@ function at({
     To,
     {
       component: "section",
-      styles: { ...A, ...m },
+      styles: { ...c, ...m },
       className: v("base-section", "px-2 md:px-5 lg:px-5 xl:px-10", o, {
         dark: t
       }),
@@ -935,7 +935,7 @@ function at({
         "titleAppearance",
         "descriptionAppearance"
       ),
-      children: /* @__PURE__ */ i(Oo, { autoWidth: l?.autoWidth, className: v("section-content h-full"), sx: u, children: r.show ? /* @__PURE__ */ i(wt, { ...c, boxed: r, children: e }) : e })
+      children: /* @__PURE__ */ i(Oo, { autoWidth: l?.autoWidth, className: v("section-content h-full"), sx: u, children: r.show ? /* @__PURE__ */ i(wt, { ...A, boxed: r, children: e }) : e })
     }
   );
 }
@@ -946,21 +946,21 @@ function wt({
   sx: n = {},
   boxed: r = { show: !1 },
   className: a = "",
-  styles: c = {},
+  styles: A = {},
   ...s
 }) {
-  const l = { ...c, ...n }, A = Zt();
+  const l = { ...A, ...n }, c = Zt();
   let d = null;
-  const u = _t((x) => x.breakpoints.up("sm")), m = Me(), g = Go();
-  return t && (d = Mt(
+  const u = _t((x) => x.breakpoints.up("sm")), m = We(), g = Go();
+  return t && (d = Wt(
     m,
-    typeof t == "string" ? A(t) : t,
+    typeof t == "string" ? c(t) : t,
     l,
     e,
     g
-  )), r.show && (l.borderRadius = "10px", l.padding === void 0 && (l.padding = u ? "50px" : "20px"), r?.border && (l.border = "1px solid #c0c0c0"), r?.background && (d = Mt(
+  )), r.show && (l.borderRadius = "10px", l.padding === void 0 && (l.padding = u ? "50px" : "20px"), r?.border && (l.border = "1px solid #c0c0c0"), r?.background && (d = Wt(
     m,
-    typeof r?.background == "string" ? A(r?.background) : r?.background,
+    typeof r?.background == "string" ? c(r?.background) : r?.background,
     l,
     r?.backgroundVideoPoster,
     g
@@ -1005,7 +1005,7 @@ function se(t) {
   return Array.isArray(t);
 }
 const z = "&>*";
-function le({ children: t, col: e, gap: o, className: n, align: r, sx: a, type: c, ...s } = {
+function le({ children: t, col: e, gap: o, className: n, align: r, sx: a, type: A, ...s } = {
   children: null,
   className: "",
   col: 3,
@@ -1014,7 +1014,7 @@ function le({ children: t, col: e, gap: o, className: n, align: r, sx: a, type:
   align: "center",
   type: "default"
 }) {
-  const l = Xt(), A = Number(Math.floor(100 / e * 100) / 100), d = {
+  const l = Xt(), c = Number(Math.floor(100 / e * 100) / 100), d = {
     center: "justify-center items-center",
     left: "justify-start items-center",
     right: "justify-end items-center",
@@ -1054,7 +1054,7 @@ function le({ children: t, col: e, gap: o, className: n, align: r, sx: a, type:
       };
       break;
   }
-  return y[z] = { width: `calc(${A}% - ${f}rem)` }, y[`@media (max-width: ${l.breakpoints.values.xl}px)`] = D, y[`@media (max-width: ${l.breakpoints.values.lg}px)`] = B, y[`@media (max-width: ${l.breakpoints.values.md}px)`] = w, y[`@media (max-width: ${l.breakpoints.values.sm}px)`] = k, c === "wall" && (y = { ...a, gap: `${g}rem` }, y[z] = { width: `calc(${A}% - ${f}rem)` }, k[z] = { width: `calc(45% - ${g / 2 / 2}rem)` }, y[`@media (max-width: ${l.breakpoints.values.sm}px)`] = k), /* @__PURE__ */ i(p, { className: v("flex flex-wrap flex-row h-full", u, n), sx: y, ...s, children: t });
+  return y[z] = { width: `calc(${c}% - ${f}rem)` }, y[`@media (max-width: ${l.breakpoints.values.xl}px)`] = D, y[`@media (max-width: ${l.breakpoints.values.lg}px)`] = B, y[`@media (max-width: ${l.breakpoints.values.md}px)`] = w, y[`@media (max-width: ${l.breakpoints.values.sm}px)`] = k, A === "wall" && (y = { ...a, gap: `${g}rem` }, y[z] = { width: `calc(${c}% - ${f}rem)` }, k[z] = { width: `calc(45% - ${g / 2 / 2}rem)` }, y[`@media (max-width: ${l.breakpoints.values.sm}px)`] = k), /* @__PURE__ */ i(p, { className: v("flex flex-wrap flex-row h-full", u, n), sx: y, ...s, children: t });
 }
 function G({ type: t = "", icon: e = "", size: o = "3rem", className: n = "", ...r }) {
   return /* @__PURE__ */ i(
@@ -1075,13 +1075,13 @@ function Yo({
   className: n,
   activeClassName: r = "active",
   target: a = "auto",
-  autoExternalMark: c = !1,
+  autoExternalMark: A = !1,
   useRouterLink: s,
   ...l
 }) {
-  const { pages: A = [], locale: d = "" } = {}, u = e ? $("/", e) : e || "";
+  const { pages: c = [], locale: d = "" } = {}, u = e ? $("/", e) : e || "";
   let m = a === "auto" ? "_self" : a, g = $(u, t);
-  const x = c ? gt(g) : !1;
+  const x = A ? gt(g) : !1;
   if (e)
     return g = $(u, d, t), /* @__PURE__ */ i(
       "a",
@@ -1098,10 +1098,10 @@ function Yo({
     a === "auto" && (m = "_blank"), g = t;
   else {
     He(g) && (g = $(window.location.pathname, g));
-    const f = Ve(`${window.location.origin}${g}`), y = A.some((k) => k.pathname === f.pathname);
+    const f = Ve(`${window.location.origin}${g}`), y = c.some((k) => k.pathname === f.pathname);
     if (s || y)
       return /* @__PURE__ */ i(
-        Ne,
+        Le,
         {
           end: !0,
           to: dt(g),
@@ -1133,13 +1133,13 @@ function Z({
   className: n = "",
   dark: r = !1,
   border: a = !0,
-  ...c
+  ...A
 }) {
   let s = {};
-  const { pages: l = [] } = re(), A = l.find((m) => m.id === c.link), d = !o || De.Children.toArray(o).every((m) => m === null);
-  c.link && (s = {
+  const { pages: l = [] } = re(), c = l.find((m) => m.id === A.link), d = !o || De.Children.toArray(o).every((m) => m === null);
+  A.link && (s = {
     component: Yo,
-    to: A?.path || c.link,
+    to: c?.path || A.link,
     useRouterLink: !0
   });
   const u = Tt();
@@ -1151,7 +1151,7 @@ function Z({
         borderColor: u.palette.divider
       },
       ...s,
-      ...R(c, ["listType", "dark", "iconColor", "link", "hoverStyle", "imageSize"]),
+      ...R(A, ["listType", "dark", "iconColor", "link", "hoverStyle", "imageSize"]),
       children: [
         t,
         !d && /* @__PURE__ */ i("div", { className: "card__body", children: o }),
@@ -1185,7 +1185,7 @@ function q({
 }) {
   return /* @__PURE__ */ b(J, { children: [
     e && /* @__PURE__ */ i(
-      W,
+      M,
       {
         className: v("card__title text-gray-800", "dark:text-gray-50"),
         component: "h5",
@@ -1197,7 +1197,7 @@ function q({
       }
     ),
     n && /* @__PURE__ */ i(
-      W,
+      M,
       {
         className: v("card__description", "text-gray-500", "dark:text-gray-400"),
         component: "div",
@@ -1217,13 +1217,13 @@ function Xo({
   imageProps: n = {},
   imageMeta: r,
   imageSize: a,
-  titleProps: c = {},
+  titleProps: A = {},
   descriptionProps: s = {},
   actions: l,
-  align: A,
+  align: c,
   ...d
 }) {
-  const u = kt(t), m = U(N(t), 540);
+  const u = kt(t), m = U(L(t), 540);
   return /* @__PURE__ */ b(
     Ko,
     {
@@ -1261,14 +1261,14 @@ function Xo({
         e || o ? /* @__PURE__ */ i(
           q,
           {
-            align: A,
+            align: c,
             title: e,
-            titleProps: c,
+            titleProps: A,
             description: o,
             descriptionProps: s
           }
         ) : null,
-        l?.length ? /* @__PURE__ */ i(V, { align: A, actions: l, className: "mt-4" }) : null
+        l?.length ? /* @__PURE__ */ i(V, { align: c, actions: l, className: "mt-4" }) : null
       ]
     }
   );
@@ -1307,7 +1307,7 @@ const Ko = I(Z)`
     height: 100%;
     object-position: top center;
   }
-`, Wt = "section";
+`, Mt = "section";
 function Ut({
   title: t,
   image: e,
@@ -1315,17 +1315,17 @@ function Ut({
   description: n,
   actions: r,
   align: a,
-  listType: c = "",
+  listType: A = "",
   className: s = "",
   ...l
 }) {
-  return /* @__PURE__ */ b(Zo, { className: v("card", `list-type-${c}`, s), align: a, ...l, children: [
+  return /* @__PURE__ */ b(Zo, { className: v("card", `list-type-${A}`, s), align: a, ...l, children: [
     e && /* @__PURE__ */ i(
       G,
       {
         icon: e,
         color: "primary.main",
-        size: c === "icon-title" ? "1.2rem" : "3rem",
+        size: A === "icon-title" ? "1.2rem" : "3rem",
         imageMeta: o
       }
     ),
@@ -1340,7 +1340,7 @@ const Zo = I(Z)`
   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[Wt]}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) {
@@ -1388,7 +1388,7 @@ const Zo = I(Z)`
     }
   }
 
-  @media (min-width: ${({ theme: t }) => t.breakpoints.values[Wt]}px) {
+  @media (min-width: ${({ theme: t }) => t.breakpoints.values[Mt]}px) {
     padding: 2rem 2rem;
     text-align: left;
     box-sizing: border-box;
@@ -1401,13 +1401,13 @@ function qo({
   imageProps: n = {},
   imageMeta: r,
   imageSize: a,
-  titleProps: c = {},
+  titleProps: A = {},
   descriptionProps: s = {},
   actions: l,
-  align: A,
+  align: c,
   ...d
 }) {
-  const u = kt(t), m = U(N(t), 540);
+  const u = kt(t), m = U(L(t), 540);
   return /* @__PURE__ */ b(
     _o,
     {
@@ -1451,14 +1451,14 @@ function qo({
         e || o ? /* @__PURE__ */ i(
           q,
           {
-            align: A,
+            align: c,
             title: e,
-            titleProps: c,
+            titleProps: A,
             description: o,
             descriptionProps: s
           }
         ) : null,
-        l?.length ? /* @__PURE__ */ i(V, { align: A, actions: l, className: "mt-4" }) : null
+        l?.length ? /* @__PURE__ */ i(V, { align: c, actions: l, className: "mt-4" }) : null
       ]
     }
   );
@@ -1495,15 +1495,15 @@ function $o({
   iconSize: n = 100,
   description: r,
   actions: a,
-  align: c,
+  align: A,
   className: s = "",
   ...l
 }) {
   return /* @__PURE__ */ i(tn, { className: v("card", s), ...l, children: /* @__PURE__ */ b(p, { className: "flex items-center", children: [
     e && /* @__PURE__ */ i(G, { icon: e, color: "primary.main", size: n, imageMeta: o }),
     /* @__PURE__ */ b(p, { className: "flex-1 ml-4", children: [
-      /* @__PURE__ */ i(q, { align: c, title: t, description: r }),
-      /* @__PURE__ */ i(V, { align: c, actions: a, className: "mt-4" })
+      /* @__PURE__ */ i(q, { align: A, title: t, description: r }),
+      /* @__PURE__ */ i(V, { align: A, actions: a, className: "mt-4" })
     ] })
   ] }) });
 }
@@ -1573,12 +1573,12 @@ function en({
   descriptionProps: n = {},
   image: r,
   imageMeta: a,
-  className: c = "",
+  className: A = "",
   align: s,
   hoverStyle: l,
-  ...A
+  ...c
 }) {
-  return /* @__PURE__ */ b(on, { className: v("card-simple", c, `hover-style__${l}`), align: s, ...A, children: [
+  return /* @__PURE__ */ b(on, { className: v("card-simple", A, `hover-style__${l}`), align: s, ...c, children: [
     r && /* @__PURE__ */ i(G, { icon: r, color: "primary.main", imageMeta: a }),
     t || o ? /* @__PURE__ */ i(
       q,
@@ -1706,10 +1706,10 @@ function rn({
   listBorder: n = !0,
   listType: r = "",
   col: a = 3,
-  gap: c,
+  gap: A,
   iconColor: s,
   className: l = "",
-  type: A = "default",
+  type: c = "default",
   dark: d = !1,
   textAlign: u = "left",
   hoverStyle: m,
@@ -1718,10 +1718,10 @@ function rn({
   return /* @__PURE__ */ i(
     le,
     {
-      type: A,
+      type: c,
       className: v("card-list py-1", l, "items-stretch"),
       col: a,
-      gap: c,
+      gap: A,
       align: e,
       ...g,
       children: o || t.map((x) => /* @__PURE__ */ i(
@@ -1729,12 +1729,12 @@ function rn({
         {
           borderColor: n,
           iconColor: s,
-          type: A,
+          type: c,
           listType: r,
           dark: d,
           ...x,
           align: u,
-          style: c === 0 && t.length > 1 ? {
+          style: A === 0 && t.length > 1 ? {
             borderRadius: 0,
             marginRight: "-1px",
             marginBottom: "-1px"
@@ -1757,7 +1757,7 @@ const an = [
   "type",
   "textAlign"
 ];
-function L(t, e) {
+function N(t, e) {
   const o = et(t, e), n = R(t, e);
   return [o, n];
 }
@@ -1778,13 +1778,13 @@ const sn = I(at)`
   }
 `;
 function ln({ className: t, ...e }) {
-  const [o, n] = L(e, rt), [r, a] = L(n, an);
+  const [o, n] = N(e, rt), [r, a] = N(n, an);
   return /* @__PURE__ */ b(sn, { className: v("section--card-list", t), type: e.type, ...a, children: [
     Object.keys(o).length > 0 && /* @__PURE__ */ i(it, { center: !0, ...o, className: "mb-[2.5vw]" }),
     /* @__PURE__ */ i(rn, { ...r, dark: !!e.dark })
   ] });
 }
-const cn = I(ln)`
+const An = I(ln)`
   .card__description {
     white-space: pre-wrap;
   }
@@ -1800,20 +1800,20 @@ const cn = I(ln)`
     background: inherit !important;
   }
 `;
-function An({ section: t, ...e }) {
-  const [{ editing: o }, n] = L(e, nt), r = E(() => ({
+function cn({ section: t, ...e }) {
+  const [{ editing: o }, n] = N(e, nt), r = E(() => ({
     ...R(n, ["listBorder", "list", "iconSize", "imageSize"]),
     list: n.list?.map((a) => ({
       ...R(a, "icon", "iconColor"),
       image: ["news", "simple", "default"].includes(n.type) && a.icon ? a.icon : a.image,
-      actions: a.actions?.map?.((c) => /* @__PURE__ */ i(ae, { ...c, editing: o }, c.id)),
+      actions: a.actions?.map?.((A) => /* @__PURE__ */ i(ae, { ...A, editing: o }, A.id)),
       border: n.listBorder,
       iconSize: n.iconSize,
       imageSize: n.imageSize,
       hoverStyle: n.hoverStyle
     }))
   }), [n]);
-  return /* @__PURE__ */ i(cn, { style: o ? { pointerEvents: "none" } : {}, ...r });
+  return /* @__PURE__ */ i(An, { style: o ? { pointerEvents: "none" } : {}, ...r });
 }
 function dn({
   properties: t,
@@ -1822,7 +1822,7 @@ function dn({
   dev: n
 }) {
   return e?.config?.componentId ? /* @__PURE__ */ i(
-    We,
+    Me,
     {
       instanceId: e.id,
       componentId: e.config.componentId,
@@ -1841,7 +1841,7 @@ function dn({
         py: 2
       },
       children: /* @__PURE__ */ i(
-        W,
+        M,
         {
           variant: "caption",
           sx: {
@@ -1875,9 +1875,9 @@ function un({
   );
 }
 function gn({ dataId: t, src: e, actions: o, center: n, onLoad: r, ...a }) {
-  const [c, s] = L(a, rt);
+  const [A, s] = N(a, rt);
   return /* @__PURE__ */ b(at, { ...s, children: [
-    Object.keys(c).length > 0 && /* @__PURE__ */ i(it, { center: n, ...c }),
+    Object.keys(A).length > 0 && /* @__PURE__ */ i(it, { center: n, ...A }),
     /* @__PURE__ */ i(
       un,
       {
@@ -1902,13 +1902,13 @@ const Ji = {
   id: ""
 };
 function mn({ section: t, id: e, src: o, ...n }) {
-  const r = `${e}-${n.locale}`, [{ editing: a }, c] = L(n, nt), s = xt({}), l = JSON.parse(JSON.stringify(c)), { message: A } = Ge(r, "server"), d = Oe(JSON.parse(JSON.stringify(c.config) || "{}"));
+  const r = `${e}-${n.locale}`, [{ editing: a }, A] = N(n, nt), s = xt({}), l = JSON.parse(JSON.stringify(A)), { message: c } = Ge(r, "server"), d = Oe(JSON.parse(JSON.stringify(A.config) || "{}"));
   return X(() => {
-    A && A.onInit(() => d.current);
-  }, [A]), X(() => {
-    const u = JSON.parse(JSON.stringify(c.config) || "{}");
-    Te(s.current, u) || (s.current = u, A?.send("config-set", u));
-  }, [A, c.config]), o ? /* @__PURE__ */ i(gn, { ...l, dataId: r, src: o, style: a ? { pointerEvents: "none" } : {} }) : /* @__PURE__ */ i(pn, { children: 'Please set the "src" attribute for this block' });
+    c && c.onInit(() => d.current);
+  }, [c]), X(() => {
+    const u = JSON.parse(JSON.stringify(A.config) || "{}");
+    Te(s.current, u) || (s.current = u, c?.send("config-set", u));
+  }, [c, A.config]), o ? /* @__PURE__ */ i(gn, { ...l, dataId: r, src: o, style: a ? { pointerEvents: "none" } : {} }) : /* @__PURE__ */ i(pn, { children: 'Please set the "src" attribute for this block' });
 }
 const pn = I("div")`
   user-select: none;
@@ -1983,11 +1983,11 @@ const pn = I("div")`
   style: "solid",
   color: "divider"
 };
-function ce(t) {
+function Ae(t) {
   return typeof t == "string" && t.startsWith("custom:");
 }
 function Dn(t) {
-  if (!ce(t)) return Ht;
+  if (!Ae(t)) return Ht;
   try {
     const e = t?.substring(7) || "", [o = "1px", n = "solid", ...r] = e.split(" ");
     return {
@@ -2002,7 +2002,7 @@ function Dn(t) {
 function Qn(t) {
   if (!t || t === "none")
     return { border: "none" };
-  if (ce(t)) {
+  if (Ae(t)) {
     const { width: e, style: o, color: n } = Dn(t);
     return {
       border: "none",
@@ -2014,11 +2014,11 @@ function Qn(t) {
   }
   return {};
 }
-function Ae(t) {
+function ce(t) {
   return typeof t == "string" && t.startsWith("custom:");
 }
 function Rn(t) {
-  if (!Ae(t)) return "0";
+  if (!ce(t)) return "0";
   try {
     return t?.substring(7) || "0";
   } catch {
@@ -2026,17 +2026,17 @@ function Rn(t) {
   }
 }
 const pt = (t) => typeof t == "string" && t.startsWith("custom:"), Vt = (t) => pt(t) ? t.replace("custom:", "") : "";
-function Nn(t) {
-  return !t || t === "none" ? { borderRadius: 0 } : Ae(t) ? { borderRadius: Rn(t) } : {};
+function Ln(t) {
+  return !t || t === "none" ? { borderRadius: 0 } : ce(t) ? { borderRadius: Rn(t) } : {};
 }
-function Ln({ ref: t = void 0, type: e, sx: o, children: n, ...r }) {
-  const a = Tt(), c = a.palette.mode === "dark", l = Yt(a.breakpoints.down("sm")) ? 20 : 32, A = {
+function Nn({ ref: t = void 0, type: e, sx: o, children: n, ...r }) {
+  const a = Tt(), A = a.palette.mode === "dark", l = Yt(a.breakpoints.down("sm")) ? 20 : 32, c = {
     overflow: "hidden !important",
     display: "grid !important",
     boxSizing: "border-box"
-  }, d = "layout-block-frame", u = [A, ...Array.isArray(o) ? o : [o]];
+  }, d = "layout-block-frame", u = [c, ...Array.isArray(o) ? o : [o]];
   return H(() => {
-    const g = lo(e || ""), x = co(e || "");
+    const g = lo(e || ""), x = Ao(e || "");
     if (g)
       return u.push({
         img: {
@@ -2054,7 +2054,7 @@ function Ln({ ref: t = void 0, type: e, sx: o, children: n, ...r }) {
             {
               // @ts-ignore
               ".screenshot--container": {
-                ...A,
+                ...c,
                 ...et(o, ["p", "px", "py", "pl", "pr", "pt", "pb", "ml", "mr", "mt", "mb", "alignItems"])
               }
             }
@@ -2066,7 +2066,7 @@ function Ln({ ref: t = void 0, type: e, sx: o, children: n, ...r }) {
       const f = e?.includes("chrome") ? "chrome" : "safari", y = Sn.find((_) => _.name === f);
       if (!y)
         return /* @__PURE__ */ i(p, { className: d, ref: t, sx: u, ...r, children: n });
-      const k = y.mode[c ? "dark" : "light"], w = k.top, B = k.bottom, D = f === "chrome";
+      const k = y.mode[A ? "dark" : "light"], w = k.top, B = k.bottom, D = f === "chrome";
       return /* @__PURE__ */ b(
         p,
         {
@@ -2198,9 +2198,9 @@ function Ln({ ref: t = void 0, type: e, sx: o, children: n, ...r }) {
       );
     }
     return /* @__PURE__ */ i(p, { className: d, ref: t, sx: u, ...r, children: n });
-  }, [e, n, u, c, l])();
+  }, [e, n, u, A, l])();
 }
-const jn = "none", Pn = "none", zn = "none", Mn = "100%", Wn = "center", Un = "start", Fn = "none", Hn = "none", Vn = "full", Gn = 12, On = ({
+const jn = "none", Pn = "none", zn = "none", Wn = "100%", Mn = "center", Un = "start", Fn = "none", Hn = "none", Vn = "full", Gn = 12, On = ({
   gridSettings: t,
   section: e,
   index: o,
@@ -2208,7 +2208,7 @@ const jn = "none", Pn = "none", zn = "none", Mn = "100%", Wn = "center", Un = "s
   simulateMode: r = "desktop",
   isBackground: a
 }) => {
-  const c = t?.[r] ?? {}, s = c[e.id], l = Tn(c);
+  const A = t?.[r] ?? {}, s = A[e.id], l = Tn(A);
   return {
     i: e.id,
     static: e?.locked || a,
@@ -2230,7 +2230,7 @@ const jn = "none", Pn = "none", zn = "none", Mn = "100%", Wn = "center", Un = "s
     maxY: l
   };
 }, Tn = (t) => Object.values(t).reduce((e, o) => Math.max(e, o.y || 0), 0) || 0, Yn = (t) => {
-  const { currentBreakpoint: e } = fn(), { dev: o, id: n, section: r, onBlockRender: a } = t, c = o?.mode, s = Yt((h) => h.breakpoints.down("sm")), { t: l } = Je(), { getPageMeta: A } = ne(), d = A(), { sections: u, sectionIds: m, config: g } = r, {
+  const { currentBreakpoint: e } = fn(), { dev: o, id: n, section: r, onBlockRender: a } = t, A = o?.mode, s = Yt((h) => h.breakpoints.down("sm")), { t: l } = Je(), { getPageMeta: c } = ne(), d = c(), { sections: u, sectionIds: m, config: g } = r, {
     columns: x = Gn,
     gridSettings: f,
     gap: y,
@@ -2259,13 +2259,13 @@ const jn = "none", Pn = "none", zn = "none", Mn = "100%", Wn = "center", Un = "s
     Object.keys(C.gap || {}).forEach((j) => {
       C.gap[j] / 2, -C.gap[j] / 2, -C.gap[j], C.gap[j];
     });
-    const M = C.gap[e];
+    const W = C.gap[e];
     return {
       container: {
         // rowGap 不用管，跟高度相关，不会存在 overflow 问题
         rowGap: C.gap,
         columnGap: C.gap,
-        [M ? `@container (width < ${M * x * 8}px)` : ""]: {
+        [W ? `@container (width < ${W * x * 8}px)` : ""]: {
           // 避免宽度溢出，导致内容溢出
           columnGap: "0px",
           // 添加提示，触发 item 的样式
@@ -2287,11 +2287,11 @@ const jn = "none", Pn = "none", zn = "none", Mn = "100%", Wn = "center", Un = "s
       value: h,
       format: "sx"
     });
-  }, [B, k]), ct = E(() => Q({
+  }, [B, k]), At = E(() => Q({
     type: "layoutBlockAlignContent",
-    value: Bt ?? Wn,
+    value: Bt ?? Mn,
     format: "sx"
-  }), [Bt]), At = E(() => Q({
+  }), [Bt]), ct = E(() => Q({
     type: "layoutBlockJustifyContent",
     value: Et ?? Un,
     format: "sx"
@@ -2303,7 +2303,7 @@ const jn = "none", Pn = "none", zn = "none", Mn = "100%", Wn = "center", Un = "s
       format: "sx"
     });
   }, [lt]), me = E(() => {
-    const h = It ?? Hn, C = Nn(h);
+    const h = It ?? Hn, C = Ln(h);
     return Object.keys(C).length > 0 ? C : Q({
       type: "layoutBlockBorderRadius",
       value: h,
@@ -2311,24 +2311,24 @@ const jn = "none", Pn = "none", zn = "none", Mn = "100%", Wn = "center", Un = "s
     });
   }, [It]), pe = E(() => Q({
     type: "layoutBlockHeight",
-    value: D ?? Mn,
+    value: D ?? Wn,
     format: "sx"
   }), [D]), he = E(() => Q({
     type: "maxWidth",
     value: _ ?? Vn,
     format: "sx"
   }), [_]), Qt = H(
-    (h, C = !1, M = 0, j) => {
+    (h, C = !1, W = 0, j) => {
       if (!a || !h || !h.component || h.visibility === "hidden")
         return null;
       const P = On({
         gridSettings: f,
         section: h,
-        index: M,
+        index: W,
         columns: x,
         simulateMode: s ? "mobile" : "desktop",
         isBackground: C
-      }), O = P?.x ?? 0, F = P?.y ?? 0, Lt = P?.w ?? x, jt = P?.h ?? 1, fe = P?.maxY ?? 0, xe = !!r?.config?.backgroundSectionId;
+      }), O = P?.x ?? 0, F = P?.y ?? 0, Nt = P?.w ?? x, jt = P?.h ?? 1, fe = P?.maxY ?? 0, xe = !!r?.config?.backgroundSectionId;
       return /* @__PURE__ */ i(
         p,
         {
@@ -2350,7 +2350,7 @@ const jn = "none", Pn = "none", zn = "none", Mn = "100%", Wn = "center", Un = "s
             } : {
               position: "relative",
               // 使用 grid 定位普通元素
-              gridColumn: `${O + 1} / span ${Lt}`,
+              gridColumn: `${O + 1} / span ${Nt}`,
               // hasBackground 的话，不再 + 1，因为 background 会占用第一行
               gridRow: `${F + (xe ? 0 : 1)} / span ${jt}`,
               zIndex: 1,
@@ -2362,7 +2362,7 @@ const jn = "none", Pn = "none", zn = "none", Mn = "100%", Wn = "center", Un = "s
               maxWidth: "100%",
               // 防止内容撑开网格项
               // overflow: 'hidden', // 防止子内容溢出网格项
-              "--grid-w": Lt,
+              "--grid-w": Nt,
               "--grid-x": O,
               "--grid-h": jt,
               "--grid-y": F,
@@ -2373,8 +2373,8 @@ const jn = "none", Pn = "none", zn = "none", Mn = "100%", Wn = "center", Un = "s
                 position: "relative",
                 containerType: "inline-size",
                 containerName: `layout-block-container-${h.id}`,
-                ...ct,
-                ...At
+                ...At,
+                ...ct
               }
             }
           },
@@ -2385,7 +2385,7 @@ const jn = "none", Pn = "none", zn = "none", Mn = "100%", Wn = "center", Un = "s
             section: {
               ...h
             },
-            mode: c
+            mode: A
           })
         },
         h.id
@@ -2393,27 +2393,27 @@ const jn = "none", Pn = "none", zn = "none", Mn = "100%", Wn = "center", Un = "s
     },
     [
       n,
-      c,
+      A,
       a,
       f,
       x,
       s,
       Dt,
-      ct,
       At,
+      ct,
       St,
       d
     ]
-  ), { backgroundElements: Rt, contentElements: Nt } = E(() => {
+  ), { backgroundElements: Rt, contentElements: Lt } = E(() => {
     const h = [], C = [];
-    return m?.forEach((M, j) => {
-      const P = u?.[M];
+    return m?.forEach((W, j) => {
+      const P = u?.[W];
       if (!P) return;
-      const O = r?.config?.backgroundSectionId === M, F = Qt(P, O, j);
+      const O = r?.config?.backgroundSectionId === W, F = Qt(P, O, j);
       F && (O ? h.push(F) : C.push(F));
     }), { backgroundElements: h || [], contentElements: C || [] };
   }, [Qt, u, m, st, Ct]);
-  return c === "draft" && !Rt?.length && !Nt?.length ? /* @__PURE__ */ b(
+  return A === "draft" && !Rt?.length && !Lt?.length ? /* @__PURE__ */ b(
     p,
     {
       sx: {
@@ -2490,7 +2490,7 @@ const jn = "none", Pn = "none", zn = "none", Mn = "100%", Wn = "center", Un = "s
       ]
     }
   ) : /* @__PURE__ */ b(
-    Ln,
+    Nn,
     {
       type: lt,
       sx: {
@@ -2505,8 +2505,8 @@ const jn = "none", Pn = "none", zn = "none", Mn = "100%", Wn = "center", Un = "s
         overflow: "hidden",
         // Prevent content overflow
         ...Dt?.container,
-        ...ct,
         ...At,
+        ...ct,
         ...de,
         // 应用水平内边距
         ...ue
@@ -2557,6 +2557,12 @@ const jn = "none", Pn = "none", zn = "none", Mn = "100%", Wn = "center", Un = "s
                       position: "inherit !important"
                     }
                   },
+                  // 子元素如果有这个 class，则设置为全宽
+                  "&:has(.ALWAYS_FULL_WIDTH_BLOCK)": {
+                    maxWidth: "100%",
+                    margin: "0 !important",
+                    padding: "0 !important"
+                  },
                   // 因为有 device frame 的存在，需要这样写
                   "& > div": {
                     ...ge,
@@ -2568,7 +2574,7 @@ const jn = "none", Pn = "none", zn = "none", Mn = "100%", Wn = "center", Un = "s
             }
           ),
           Rt,
-          Nt
+          Lt
         ] })
       ]
     }
@@ -2581,9 +2587,9 @@ function Xn({
   className: n,
   reverse: r = !1,
   fullSizeImage: a,
-  ...c
+  ...A
 }) {
-  const [s, l] = L(c, rt), A = Object.keys(s).length > 0 && Object.values(et(s, Jn)).filter(Boolean).length > 0 && /* @__PURE__ */ i(it, { ...s }), d = Jt(t) ? t : /* @__PURE__ */ i(p, { component: "img", src: t, alt: "", className: "block" }), u = ["phone", "macbook"].includes(e), m = t && /* @__PURE__ */ i(
+  const [s, l] = N(A, rt), c = Object.keys(s).length > 0 && Object.values(et(s, Jn)).filter(Boolean).length > 0 && /* @__PURE__ */ i(it, { ...s }), d = Jt(t) ? t : /* @__PURE__ */ i(p, { component: "img", src: t, alt: "", className: "block" }), u = ["phone", "macbook"].includes(e), m = t && /* @__PURE__ */ i(
     p,
     {
       className: v(
@@ -2639,9 +2645,9 @@ function Xn({
               ` : void 0,
           children: r ? /* @__PURE__ */ b(J, { children: [
             m,
-            A
+            c
           ] }) : /* @__PURE__ */ b(J, { children: [
-            A,
+            c,
             m
           ] })
         }
@@ -2695,13 +2701,13 @@ function ti({ url: t }) {
   const e = xt(null), o = 495, [n, r] = ot(
     e.current ? e.current.offsetWidth * 0.5625 : o
   ), a = H(() => {
-    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 r(Math.floor(s * c));
+    const A = 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 r(Math.floor(s * A));
   }, []);
   return X(() => {
     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 r(Math.floor(s * c)), function() {
+    const A = 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 r(Math.floor(s * A)), function() {
       window.removeEventListener("resize", a);
     };
   }, [n, a]), /* @__PURE__ */ i(
@@ -2744,19 +2750,19 @@ function oi({
   videoPoster: n,
   imageMeta: r,
   imageOptimization: a,
-  imageSize: c,
+  imageSize: A,
   section: s,
   ...l
 }) {
-  const [{ editing: A }, d] = L({ ...l, boxed: e ? void 0 : o }, nt);
-  let u = ni(d.image, n, e, r, a, c);
+  const [{ editing: c }, d] = N({ ...l, boxed: e ? void 0 : o }, nt);
+  let u = ni(d.image, n, e, r, a, A);
   t || (u = null);
   let m = null;
-  return d.actions && (m = d.actions?.map?.((g, x) => /* @__PURE__ */ i(ae, { ...g, editing: A }, x))), /* @__PURE__ */ i(
+  return d.actions && (m = d.actions?.map?.((g, x) => /* @__PURE__ */ i(ae, { ...g, editing: c }, x))), /* @__PURE__ */ i(
     ei,
     {
       ...d,
-      style: A ? { pointerEvents: "none" } : {},
+      style: c ? { pointerEvents: "none" } : {},
       image: u,
       fullSizeImage: t && e,
       actions: m
@@ -2769,10 +2775,10 @@ function ni(t, e, o, n, r, a) {
       return /* @__PURE__ */ i(_n, { src: t });
     if (t.indexOf("twitter.com") !== -1)
       return /* @__PURE__ */ i($n, { sourceType: "url", url: t });
-    const c = qn(t);
-    if (c)
-      return /* @__PURE__ */ i(ti, { url: c });
-    const { naturalWidth: s, naturalHeight: l, filename: A } = n || {};
+    const A = qn(t);
+    if (A)
+      return /* @__PURE__ */ i(ti, { url: A });
+    const { naturalWidth: s, naturalHeight: l, filename: c } = n || {};
     if (T(t))
       return /* @__PURE__ */ i(
         "video",
@@ -2789,8 +2795,8 @@ function ni(t, e, o, n, r, a) {
             width: "100%",
             height: "100%"
           },
-          poster: U(N(e), o ? 1200 : 540, r),
-          children: /* @__PURE__ */ i("source", { src: N(t), type: Ho(t) })
+          poster: U(L(e), o ? 1200 : 540, r),
+          children: /* @__PURE__ */ i("source", { src: L(t), type: Ho(t) })
         },
         t
       );
@@ -2798,7 +2804,7 @@ function ni(t, e, o, n, r, a) {
     return /* @__PURE__ */ i(
       qt,
       {
-        src: N(t),
+        src: L(t),
         sizesAttr: {
           sm: 600 * d,
           md: 450 * d,
@@ -2810,7 +2816,7 @@ function ni(t, e, o, n, r, a) {
         },
         width: s && `${s}px`,
         height: l && `${l}px`,
-        alt: A ?? t,
+        alt: c ?? t,
         style: { objectFit: a || "contain", display: "block", width: "100%", height: "100%" },
         loading: "lazy"
       }
@@ -2840,11 +2846,11 @@ const _i = {
   sort: "-updatedAt"
 }, Gt = 20;
 function ri({ style: t, sort: e, section: o, ...n }) {
-  const [{ editing: r, locale: a }, c] = L(n, nt), [s, l] = L(c, rt), [A, d] = ot(), u = xt(!1), m = Ke(), g = Le(), x = H(async () => {
+  const [{ editing: r, locale: a }, A] = N(n, nt), [s, l] = N(A, rt), [c, d] = ot(), u = xt(!1), m = Ke(), g = Ne(), x = H(async () => {
     if (!u.current) {
       u.current = !0, m();
       try {
-        const f = A ? Math.floor(A.list.length / Gt) + 1 : 1, { list: y, total: k } = await ii({ locale: a, sort: e, page: f, limit: Gt });
+        const f = c ? Math.floor(c.list.length / Gt) + 1 : 1, { list: y, total: k } = await ii({ locale: a, sort: e, page: f, limit: Gt });
         d((w) => ({
           list: (w?.list ?? []).concat(y),
           total: k
@@ -2853,12 +2859,12 @@ function ri({ style: t, sort: e, section: o, ...n }) {
         u.current = !1, m();
       }
     }
-  }, [A, a, e, m]);
+  }, [c, a, e, m]);
   return Ze(() => {
     x();
   }), /* @__PURE__ */ b(at, { ...l, sx: r ? { pointerEvents: "none" } : {}, children: [
     Object.keys(s).length > 0 && /* @__PURE__ */ i(it, { ...s }),
-    A ? /* @__PURE__ */ b(J, { children: [
+    c ? /* @__PURE__ */ b(J, { children: [
       /* @__PURE__ */ i(
         Pt,
         {
@@ -2867,7 +2873,7 @@ function ri({ style: t, sort: e, section: o, ...n }) {
           sx: {
             justifyContent: "center"
           },
-          children: A?.list.map((f) => /* @__PURE__ */ i(
+          children: c?.list.map((f) => /* @__PURE__ */ i(
             Pt,
             {
               size: {
@@ -2887,13 +2893,13 @@ function ri({ style: t, sort: e, section: o, ...n }) {
                       {
                         component: "img",
                         alt: "",
-                        image: U(N(f.image), 540),
+                        image: U(L(f.image), 540),
                         loading: "lazy"
                       }
                     ),
                     /* @__PURE__ */ b(Ee, { children: [
-                      /* @__PURE__ */ i(W, { variant: "h6", component: "div", className: Ot, children: f.title || f.id }),
-                      /* @__PURE__ */ i(W, { variant: "body2", className: Ot, children: f.description })
+                      /* @__PURE__ */ i(M, { variant: "h6", component: "div", className: Ot, children: f.title || f.id }),
+                      /* @__PURE__ */ i(M, { variant: "body2", className: Ot, children: f.description })
                     ] })
                   ]
                 }
@@ -2910,7 +2916,7 @@ function ri({ style: t, sort: e, section: o, ...n }) {
             textAlign: "center",
             mt: 2
           },
-          children: A.total > A.list.length ? /* @__PURE__ */ i(Y, { variant: "outlined", color: "secondary", onClick: x, loading: u.current, children: "More" }) : /* @__PURE__ */ i(Y, { variant: "outlined", color: "secondary", disabled: !0, children: "No More" })
+          children: c.total > c.list.length ? /* @__PURE__ */ i(Y, { variant: "outlined", color: "secondary", onClick: x, loading: u.current, children: "More" }) : /* @__PURE__ */ i(Y, { variant: "outlined", color: "secondary", disabled: !0, children: "No More" })
         }
       )
     ] }) : /* @__PURE__ */ i(
@@ -2954,7 +2960,7 @@ const Ot = ut`
 `, si = {
   iframe: mn,
   section: oi,
-  "section-card-list": An,
+  "section-card-list": cn,
   toc: ri,
   "custom-component": dn,
   "layout-block": Yn
@@ -2966,10 +2972,10 @@ function li({
   config: n,
   section: r,
   ignorePageMetaStyle: a,
-  page: c,
+  page: A,
   ...s
 }) {
-  const l = si[e], { getPageMetaStyle: A } = ne(), d = E(() => {
+  const l = si[e], { getPageMetaStyle: c } = ne(), d = E(() => {
     const { height: g, ...x } = n;
     return e === "layout-block" && (x.onBlockRender = (f) => {
       const y = {
@@ -2980,8 +2986,8 @@ function li({
         ...f?.config,
         dev: y
       }, { locale: B } = w;
-      let D = c?.dataSource?.[f?.id]?.[B];
-      return Se(D) && (D = c?.dataSource?.[f?.id]?.[k ?? "en"]), /* @__PURE__ */ i(
+      let D = A?.dataSource?.[f?.id]?.[B];
+      return Se(D) && (D = A?.dataSource?.[f?.id]?.[k ?? "en"]), /* @__PURE__ */ i(
         li,
         {
           ...f,
@@ -2990,18 +2996,18 @@ function li({
             ...D,
             ...w
           },
-          page: c,
+          page: A,
           ignorePageMetaStyle: !0
         }
       );
     }), x;
   }, [n, e]), u = E(() => {
     const g = {};
-    return n.height && e !== "custom-component" && (g.height = n.height), g.sx = a ? void 0 : A("sx"), g.id = `BlockBase-${t}`, g;
-  }, [n.height, a, e, A]), m = l && /* @__PURE__ */ i(l, { mode: o, ...d, id: t, section: r });
-  return m ? /* @__PURE__ */ i(Do, { ...s, ...u, children: m }) : /* @__PURE__ */ i(ci, { type: e });
+    return n.height && e !== "custom-component" && (g.height = n.height), g.sx = a ? void 0 : c("sx"), g.id = `BlockBase-${t}`, g;
+  }, [n.height, a, e, c]), m = l && /* @__PURE__ */ i(l, { mode: o, ...d, id: t, section: r });
+  return m ? /* @__PURE__ */ i(Do, { ...s, ...u, children: m }) : /* @__PURE__ */ i(Ai, { type: e });
 }
-function ci({ type: t }) {
+function Ai({ type: t }) {
   return /* @__PURE__ */ i(
     p,
     {