@blocklet/pages-kit-inner-components 0.6.23 → 0.6.24

package/lib/es/chunks/{index-BHQcp5eX.js → index-MrU6URFS.js}

@@ -1,41 +1,41 @@
-import { jsx as r, jsxs as w, Fragment as Q } from "react/jsx-runtime";
-import { ErrorOutline as ne } from "@mui/icons-material";
-import { Box as f, styled as re, Typography as j, Container as ie, useTheme as ae, useMediaQuery as se, GlobalStyles as le, Card as ce, CircularProgress as de, Grid as wt, CardMedia as ue, CardContent as me, Alert as pe } from "@mui/material";
+import { jsx as n, jsxs as y, Fragment as J } from "react/jsx-runtime";
+import { ErrorOutline as re } from "@mui/icons-material";
+import { Box as g, styled as ne, Typography as A, Container as ie, useTheme as ae, useMediaQuery as se, GlobalStyles as le, Card as ce, CircularProgress as de, Grid as kt, CardMedia as ue, CardContent as me, Alert as pe } from "@mui/material";
 import he from "lodash/isEmpty";
-import pt from "lodash/pick";
-import ge, { createContext as It, useMemo as S, useCallback as z, useContext as Lt, useState as Z, useEffect as J, Fragment as fe, isValidElement as Et, useRef as ht } from "react";
-import R from "lodash/keyBy";
-import { styled as C, useTheme as At } from "@arcblock/ux/lib/Theme";
-import { cx as b, css as ct } from "@emotion/css";
+import Z from "lodash/pick";
+import ge, { createContext as It, useMemo as S, useCallback as O, useContext as Lt, useState as tt, useEffect as Y, Fragment as xe, isValidElement as Pt, useRef as pt } from "react";
+import M from "lodash/keyBy";
+import { styled as $, useTheme as Et } from "@arcblock/ux/lib/Theme";
+import { cx as b, css as dt } from "@emotion/css";
 import I from "lodash/omit";
-import { Link as xe, NavLink as be, useNavigate as ye } from "react-router-dom";
+import { Link as fe, NavLink as be, useNavigate as ye } from "react-router-dom";
 import ve from "@arcblock/ux/lib/Button";
-import dt from "is-uri";
-import { Icon as Pt } from "@iconify-icon/react";
-import { e as F, f as L, i as gt, l as ft } from "./state-DSo43FAB.js";
+import ut from "is-uri";
+import { Icon as Wt } from "@iconify-icon/react";
+import { e as j, f as L, i as ht, l as gt } from "./state-DSo43FAB.js";
 import we from "@blocklet/pages-kit/builtin/markdown/markdown-renderer";
-import { useColorConvert as Wt } from "@blocklet/pages-kit/contexts/color";
+import { useColorConvert as At } from "@blocklet/pages-kit/contexts/color";
 import { materialDark as ke } from "react-syntax-highlighter/dist/esm/styles/prism";
 import _e from "@arcblock/react-hooks/lib/useBrowser";
-import kt from "@arcblock/ux/lib/Colors";
+import _t from "@arcblock/ux/lib/Colors";
 import { ResponsiveImage as jt, CustomComponentRenderer as $e } from "@blocklet/pages-kit/components";
 import { isGradient as Ce, isColorString as Se } from "@blocklet/pages-kit/utils/style";
-import zt from "@mui/material/useMediaQuery";
-import { join as X } from "pathe";
-import { withoutTrailingSlash as lt, isRelative as Be, parseURL as Ne } from "ufo";
+import Ft from "@mui/material/useMediaQuery";
+import { join as q } from "pathe";
+import { withoutTrailingSlash as ct, isRelative as Be, parseURL as Ne } from "ufo";
 import { useMessage as Re } from "@blocklet/embed/message";
 import { useLatest as Me } from "ahooks";
 import Ie from "lodash/isEqual";
 import { EmbedIframe as Le } from "@blocklet/embed/react";
-import { useLocaleContext as Ee } from "@arcblock/ux/lib/Locale/context";
-import ut from "@arcblock/ux/lib/Screenshot";
-import { TwitterTimelineEmbed as Ae } from "react-twitter-embed";
-import { useUpdate as Pe, useMount as We } from "react-use";
-const tt = "{{CUSTOM_VALUE}}", je = [
+import { useLocaleContext as Pe } from "@arcblock/ux/lib/Locale/context";
+import Tt from "@arcblock/ux/lib/Screenshot";
+import { TwitterTimelineEmbed as Ee } from "react-twitter-embed";
+import { useUpdate as We, useMount as Ae } from "react-use";
+const et = "{{CUSTOM_VALUE}}", je = [
   {
     title: "None",
     value: "none",
-    sx: { py: 0 }
+    sx: {}
   },
   {
     title: "Small",
@@ -52,11 +52,11 @@ const tt = "{{CUSTOM_VALUE}}", je = [
     value: "large",
     sx: { py: { xs: 7.5, md: 10, lg: 12.5, xl: 15 } }
   }
-], ze = [
+], Fe = [
   {
     title: "None",
     value: "none",
-    sx: { py: 0 }
+    sx: {}
   },
   {
     title: "Small",
@@ -73,11 +73,11 @@ const tt = "{{CUSTOM_VALUE}}", je = [
     value: "large",
     sx: { py: { xs: 6, md: 9, lg: 9, xl: 11 } }
   }
-], Fe = [
+], Te = [
   {
     title: "None",
     value: "none",
-    sx: { px: 0 }
+    sx: {}
   },
   {
     title: "Small",
@@ -94,17 +94,17 @@ const tt = "{{CUSTOM_VALUE}}", je = [
     value: "large",
     sx: { px: { xs: 2.5, md: 10, lg: 12.5, xl: 15 } }
   }
-], q = (t, e, o) => {
-  const n = t.breakpoints.values[o];
-  return `${e}${n ? ` (${n}px)` : ""}`;
-}, Te = [
+], Q = (t, e, o) => {
+  const r = t.breakpoints.values[o];
+  return `${e}${r ? ` (${r}px)` : ""}`;
+}, ze = [
   {
     title: "100%",
     value: "full",
     sx: { maxWidth: "100%" }
   },
   {
-    title: (t) => q(t, "Small", "sm"),
+    title: (t) => Q(t, "Small", "sm"),
     value: "sm",
     sx: {
       maxWidth: (t) => t.breakpoints.values.sm,
@@ -113,17 +113,17 @@ const tt = "{{CUSTOM_VALUE}}", je = [
     }
   },
   {
-    title: (t) => q(t, "Normal", "md"),
+    title: (t) => Q(t, "Normal", "md"),
     value: "md",
     sx: { maxWidth: (t) => t.breakpoints.values.md, width: "100%", mx: "auto" }
   },
   {
-    title: (t) => q(t, "Large", "lg"),
+    title: (t) => Q(t, "Large", "lg"),
     value: "lg",
     sx: { maxWidth: (t) => t.breakpoints.values.lg, width: "100%", mx: "auto" }
   },
   {
-    title: (t) => q(t, "Extra Large", "xl"),
+    title: (t) => Q(t, "Extra Large", "xl"),
     value: "xl",
     sx: { maxWidth: (t) => t.breakpoints.values.xl, width: "100%", mx: "auto" }
   },
@@ -131,7 +131,7 @@ const tt = "{{CUSTOM_VALUE}}", je = [
     title: "Custom",
     value: "custom",
     sx: {
-      maxWidth: tt,
+      maxWidth: et,
       width: "100%",
       mx: "auto"
     }
@@ -140,8 +140,7 @@ const tt = "{{CUSTOM_VALUE}}", je = [
   {
     title: "None",
     value: "none",
-    sx: { gap: 0 },
-    containerSx: { gap: 0 }
+    sx: { gap: 0 }
   },
   {
     title: "Small",
@@ -162,7 +161,7 @@ const tt = "{{CUSTOM_VALUE}}", je = [
   {
     title: "None",
     value: "none",
-    sx: { p: 0 }
+    sx: {}
   },
   {
     title: "Small",
@@ -264,11 +263,11 @@ const tt = "{{CUSTOM_VALUE}}", je = [
     title: "Custom",
     value: "custom",
     sx: {
-      border: tt
+      border: et
     },
     group: "borderFrame"
   }
-], Ft = [
+], zt = [
   // new device frames
   { value: "macbook", title: "MacBook", group: "deviceFrame" },
   { value: "phone", title: "Phone", group: "deviceFrame" }
@@ -286,99 +285,20 @@ const tt = "{{CUSTOM_VALUE}}", je = [
   // { 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' },
-], Tt = (t) => Ft.some((e) => e.value === t), _t = ({ hasUrl: t = !1, hasTab: e = !1 } = {}) => ({
-  position: "relative",
-  paddingTop: "2em",
-  // 为顶部栏腾出空间
-  // 移除这些边框属性
-  // border: 1,
-  // borderColor: 'divider',
-  // borderTop: '2em solid',
-  // borderTopColor: 'divider',
-  // borderRadius: 1,
-  // 使用伪元素替代边框
-  "&::before": {
-    content: '""',
-    position: "absolute",
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    border: "1px solid",
-    borderColor: "divider",
-    pointerEvents: "none",
-    zIndex: 1
-  },
-  // 使用伪元素替代顶部边框
-  "&::after": {
-    content: '""',
-    position: "absolute",
-    top: 0,
-    left: 0,
-    right: 0,
-    height: "2em",
-    backgroundColor: "divider",
-    pointerEvents: "none",
-    zIndex: 1
-  },
-  // 浏览器按钮
-  "& > div:first-of-type:before": {
-    display: "block",
-    position: "absolute",
-    content: '""',
-    top: "-1.25em",
-    // 调整按钮位置到顶部栏中间
-    left: "1em",
-    width: "0.5em",
-    height: "0.5em",
-    borderRadius: "50%",
-    bgcolor: "#f44",
-    boxShadow: "0 0 0 2px #f44, 1.5em 0 0 2px #9b3, 3em 0 0 2px #fb5",
-    zIndex: 2
-  },
-  // 浏览器 URL 栏样式
-  "& > div:first-of-type:after": t ? {
-    display: "block",
-    position: "absolute",
-    content: '""',
-    top: "-1.6em",
-    // 调整URL栏位置到顶部栏中间
-    left: "5.5em",
-    width: "calc(100% - 7em)",
-    height: "1.2em",
-    borderRadius: 0.25,
-    bgcolor: "white",
-    zIndex: 2
-  } : e ? {
-    display: "block",
-    position: "absolute",
-    content: '""',
-    top: "0em",
-    // 调整Tab栏位置
-    left: "5.5em",
-    width: "20%",
-    height: "0em",
-    borderBottom: "2em solid white",
-    borderLeft: "0.8em solid transparent",
-    borderRight: "0.8em solid transparent",
-    zIndex: 2
-  } : {}
-}), Ve = [
+], Ve = (t) => zt.some((e) => e.value === t), Je = (t) => Ot.some((e) => e.value === t), Ot = [
   {
     value: "chrome",
     title: "Chrome",
     group: "browserFrame",
-    sx: _t()
+    sx: {}
   },
   {
     value: "chrome-with-url",
     title: "Chrome (With URL)",
     group: "browserFrame",
-    sx: _t({
-      hasUrl: !0
-    })
+    sx: {}
   }
-], Je = [
+], Ye = [
   {
     value: "shadow-sm",
     title: "Shadow Low Elevation",
@@ -409,7 +329,7 @@ const tt = "{{CUSTOM_VALUE}}", je = [
     group: "shadowFrame",
     sx: { boxShadow: (t) => t.shadows[24] }
   }
-], Ye = [
+], Ke = [
   {
     title: "None",
     value: "none",
@@ -417,10 +337,10 @@ const tt = "{{CUSTOM_VALUE}}", je = [
     group: "commonFrame"
   },
   ...He,
-  ...Ve,
-  ...Je,
-  ...Ft
-], Ke = [
+  ...Ot,
+  ...Ye,
+  ...zt
+], Xe = [
   {
     title: "None",
     value: "none",
@@ -458,69 +378,69 @@ const tt = "{{CUSTOM_VALUE}}", je = [
   {
     title: "Custom",
     value: "custom",
-    sx: { borderRadius: tt }
-  }
-], Xe = R(je, "value"), qe = R(ze, "value"), Qe = R(Fe, "value"), Ze = R(Te, "value"), to = R(Oe, "value"), eo = R(Ue, "value"), oo = R(De, "value"), no = R(Ge, "value"), ro = R(Ye, "value"), io = R(Ke, "value"), ao = /* @__PURE__ */ new Map([
-  ["baseSectionPaddingY", Xe],
-  ["maxWidth", Ze],
-  ["paddingY", qe],
-  ["paddingX", Qe],
-  ["layoutBlockGap", to],
-  ["layoutBlockPadding", eo],
-  ["layoutBlockAlignContent", oo],
+    sx: { borderRadius: et }
+  }
+], qe = M(je, "value"), Qe = M(Fe, "value"), Ze = M(Te, "value"), to = M(ze, "value"), eo = M(Oe, "value"), oo = M(Ue, "value"), ro = M(De, "value"), no = M(Ge, "value"), io = M(Ke, "value"), ao = M(Xe, "value"), so = /* @__PURE__ */ new Map([
+  ["baseSectionPaddingY", qe],
+  ["maxWidth", to],
+  ["paddingY", Qe],
+  ["paddingX", Ze],
+  ["layoutBlockGap", eo],
+  ["layoutBlockPadding", oo],
+  ["layoutBlockAlignContent", ro],
   ["layoutBlockJustifyContent", no],
-  ["layoutBlockBorder", ro],
-  ["layoutBlockBorderRadius", io]
+  ["layoutBlockBorder", io],
+  ["layoutBlockBorderRadius", ao]
 ]);
 function W(t) {
-  const { type: e, value: o, format: n = "sx", defaultValue: i = null } = t, a = ao.get(e);
+  const { type: e, value: o, format: r = "sx", defaultValue: i = null } = t, a = so.get(e);
   if (!a || typeof o != "string" || !o)
     return i;
-  const c = o.startsWith("custom:"), s = c ? "custom" : o;
-  if (a?.[s] && a?.[s]?.[n]) {
-    const l = a[s][n];
-    if (c) {
+  const l = o.startsWith("custom:"), s = l ? "custom" : o;
+  if (a?.[s] && a?.[s]?.[r]) {
+    const c = a[s][r];
+    if (l) {
       const d = o.replace("custom:", "");
       try {
-        return JSON.parse(JSON.stringify(l || {}).replaceAll(tt, d));
+        return JSON.parse(JSON.stringify(c || {}).replaceAll(et, d));
       } catch {
       }
     }
-    return l;
+    return c;
   }
   return i;
 }
-const Ot = It({
+const Ut = It({
   page: null,
   getPageMeta: () => ({}),
   getPageMetaStyle: () => ({})
 });
-function so() {
-  return Lt(Ot);
+function lo() {
+  return Lt(Ut);
 }
-function cr({
+function cn({
   page: t,
   children: e,
   defaultLocale: o = "en",
-  currentLocale: n
+  currentLocale: r
 }) {
-  const i = S(() => t ? JSON.parse(JSON.stringify(t)) : null, [JSON.stringify(t)]), a = z(() => {
+  const i = S(() => t ? JSON.parse(JSON.stringify(t)) : null, [JSON.stringify(t)]), a = O(() => {
     if (!i) return {};
-    const l = n || o;
-    return i.locales?.[l] ?? {};
-  }, [i, o, n]), c = z(
-    (l = "sx") => {
+    const c = r || o;
+    return i.locales?.[c] ?? {};
+  }, [i, o, r]), l = O(
+    (c = "sx") => {
       const d = a();
-      return !d || !d.style ? {} : Object.entries(d.style || {}).reduce((u, [h, p]) => {
-        if (!p) return u;
-        const y = `${h}Custom`;
-        d.style[y];
+      return !d || !d.style ? {} : Object.entries(d.style || {}).reduce((m, [h, p]) => {
+        if (!p) return m;
+        const v = `${h}Custom`;
+        d.style[v];
         const x = W({
           type: h,
           value: p,
-          format: l
+          format: c
         });
-        return x ? { ...u, ...x } : u;
+        return x ? { ...m, ...x } : m;
       }, {});
     },
     [a]
@@ -528,56 +448,56 @@ function cr({
     () => ({
       page: i,
       getPageMeta: a,
-      getPageMetaStyle: c
+      getPageMetaStyle: l
     }),
-    [i, a, c]
+    [i, a, l]
   );
-  return /* @__PURE__ */ r(Ot.Provider, { value: s, children: e });
+  return /* @__PURE__ */ n(Ut.Provider, { value: s, children: e });
 }
-const et = ["editing", "height", "locale", "dev", "sx"];
-function lo(t) {
+const ot = ["editing", "height", "locale", "dev", "sx"];
+function co(t) {
   const { className: e, ...o } = t;
-  return /* @__PURE__ */ r(co, { ...o, className: b("BlockBase-root", e) });
+  return /* @__PURE__ */ n(uo, { ...o, className: b("BlockBase-root", e) });
 }
-const co = C(f)`
+const uo = $(g)`
   position: relative;
   color: ${({ theme: t }) => t.palette.text.primary};
-`, Ut = It({
+`, Dt = It({
   pages: [],
   project: void 0
-}), { Provider: dr, Consumer: ur } = Ut;
-function Dt() {
-  return Lt(Ut);
+}), { Provider: dn, Consumer: un } = Dt;
+function Gt() {
+  return Lt(Dt);
 }
-function uo({ icon: t, ...e }) {
-  return /* @__PURE__ */ r(Pt, { icon: t, ...e, ref: null });
+function mo({ icon: t, ...e }) {
+  return /* @__PURE__ */ n(Wt, { icon: t, ...e, ref: null });
 }
-function mo({ icon: t, className: e = "", size: o = "1rem", ...n }) {
-  return /* @__PURE__ */ r(po, { component: uo, className: b("css-icon", e), size: o, ...n, icon: t });
+function po({ icon: t, className: e = "", size: o = "1rem", ...r }) {
+  return /* @__PURE__ */ n(ho, { component: mo, className: b("css-icon", e), size: o, ...r, icon: t });
 }
-const po = C(f)`
+const ho = $(g)`
   &.css-icon {
     display: inline-block;
     width: ${({ size: t }) => t};
     height: ${({ size: t }) => t};
   }
 `;
-function ho({ icon: t, className: e = "", size: o = "1rem", imageMeta: n, ...i }) {
-  const a = F(L(t), 540), [c, s] = Z(!1), l = At();
-  return c ? /* @__PURE__ */ r(mo, { icon: "i-mdi:image", color: l.palette.grey[500], size: o, className: e, ...i }) : /* @__PURE__ */ r(go, { className: b("image-icon", e), size: o, ...i, children: /* @__PURE__ */ r(
+function go({ icon: t, className: e = "", size: o = "1rem", imageMeta: r, ...i }) {
+  const a = j(L(t), 540), [l, s] = tt(!1), c = Et();
+  return l ? /* @__PURE__ */ n(po, { icon: "i-mdi:image", color: c.palette.grey[500], size: o, className: e, ...i }) : /* @__PURE__ */ n(xo, { className: b("image-icon", e), size: o, ...i, children: /* @__PURE__ */ n(
     "img",
     {
       className: "image-icon__image",
       src: a,
       onError: () => s(!0),
-      width: n?.naturalWidth,
-      height: n?.naturalHeight,
-      alt: n?.filename || "card-icon",
+      width: r?.naturalWidth,
+      height: r?.naturalHeight,
+      alt: r?.filename || "card-icon",
       loading: "lazy"
     }
   ) });
 }
-const go = C(f)`
+const xo = $(g)`
   display: inline-block;
   width: ${({ size: t }) => t};
   height: ${({ size: t }) => t};
@@ -587,37 +507,37 @@ const go = C(f)`
     width: 100%;
   }
 `, xt = (t) => typeof t == "string" && /^[\w-_]+:[\w-_]+$/.test(t);
-function mt({ icon: t, size: e = "1rem", imageMeta: o, ...n }) {
+function mt({ icon: t, size: e = "1rem", imageMeta: o, ...r }) {
   const i = window.isNaN(e) ? e : `${e}px`;
-  return xt(t) ? /* @__PURE__ */ r(Pt, { icon: t }) : /* @__PURE__ */ r(fo, { component: ho, imageMeta: o, className: "base-icon", icon: t, size: i, ...n });
+  return xt(t) ? /* @__PURE__ */ n(Wt, { icon: t }) : /* @__PURE__ */ n(fo, { component: go, imageMeta: o, className: "base-icon", icon: t, size: i, ...r });
 }
-const fo = C(f)`
+const fo = $(g)`
   flex-shrink: 0;
 `;
-function V({ text: t, children: e, icon: o = "", endIcon: n, color: i = "primary", link: a = "", href: c = "", ...s }) {
-  const l = o ? /* @__PURE__ */ r(mt, { icon: o }) : null, d = n ? /* @__PURE__ */ r(mt, { icon: n }) : null, m = a || c, u = { ...s };
-  return m && (u.href = m, dt(m) && (u.target = u.target || "_blank")), /* @__PURE__ */ r(ve, { startIcon: l, endIcon: d, color: i, ...u, children: t || e });
+function V({ text: t, children: e, icon: o = "", endIcon: r, color: i = "primary", link: a = "", href: l = "", ...s }) {
+  const c = o ? /* @__PURE__ */ n(mt, { icon: o }) : null, d = r ? /* @__PURE__ */ n(mt, { icon: r }) : null, u = a || l, m = { ...s };
+  return u && (m.href = u, ut(u) && (m.target = m.target || "_blank")), /* @__PURE__ */ n(ve, { startIcon: c, endIcon: d, color: i, ...m, children: t || e });
 }
-function Gt({ editing: t, text: e, ...o }) {
-  const { pages: n = [] } = Dt(), i = n.find((a) => a.id === (o.link || o.linkId));
+function Ht({ editing: t, text: e, ...o }) {
+  const { pages: r = [] } = Gt(), i = r.find((a) => a.id === (o.link || o.linkId));
   if (t)
-    return /* @__PURE__ */ r(V, { ...I(o, ["link", "linkId"]), children: e });
+    return /* @__PURE__ */ n(V, { ...I(o, ["link", "linkId"]), children: e });
   if (i) {
     const a = i.path || "/";
-    return /* @__PURE__ */ r(xe, { to: a, children: /* @__PURE__ */ r(V, { ...I(o, ["link", "linkId"]), children: e }) });
+    return /* @__PURE__ */ n(fe, { to: a, children: /* @__PURE__ */ n(V, { ...I(o, ["link", "linkId"]), children: e }) });
   }
-  return /* @__PURE__ */ r(V, { ...I(o, "linkId"), children: e });
+  return /* @__PURE__ */ n(V, { ...I(o, "linkId"), children: e });
 }
-function O({ actions: t, center: e, className: o, align: n }) {
-  return t && t?.length ? /* @__PURE__ */ r(
-    f,
+function U({ actions: t, center: e, className: o, align: r }) {
+  return t && t?.length ? /* @__PURE__ */ n(
+    g,
     {
       className: b(
         "flex gap-4 flex-wrap",
         "lg:flex-row lg:gap-8",
-        (e || n === "center") && "justify-center",
-        !e && n === "right" && "justify-end",
-        !e && n === "left" && "justify-start",
+        (e || r === "center") && "justify-center",
+        !e && r === "right" && "justify-end",
+        !e && r === "left" && "justify-start",
         o
       ),
       sx: { alignItems: "center" },
@@ -625,7 +545,7 @@ function O({ actions: t, center: e, className: o, align: n }) {
     }
   ) : null;
 }
-const xo = "section", bo = re(f)`
+const bo = "section", yo = ne(g)`
   overflow: hidden;
 
   .section__title {
@@ -676,7 +596,7 @@ const xo = "section", bo = re(f)`
       margin-bottom: 0.5rem;
     }
   }
-  @media (min-width: ${({ theme: t }) => t.breakpoints.values[xo]}px) {
+  @media (min-width: ${({ theme: t }) => t.breakpoints.values[bo]}px) {
     .section__tag {
       margin-bottom: 32px;
     }
@@ -688,45 +608,45 @@ const xo = "section", bo = re(f)`
     }
   }
 `;
-function ot({
+function rt({
   title: t,
   description: e,
   descriptionMarkdown: o,
-  actions: n,
+  actions: r,
   className: i = "",
   classes: a = {},
-  prepend: c,
+  prepend: l,
   append: s,
-  level: l = 2,
+  level: c = 2,
   tag: d,
-  badge: m,
-  center: u,
+  badge: u,
+  center: m,
   logo: h,
   titleAppearance: p,
-  descriptionAppearance: y,
+  descriptionAppearance: v,
   ...x
 }) {
-  const v = Wt();
-  if (!t && !e && !n && !m && !d && !c && !s && !h) return null;
-  const k = Math.max(Math.min(5, l + 1), 1), _ = {
+  const w = At();
+  if (!t && !e && !r && !u && !d && !l && !s && !h) return null;
+  const k = Math.max(Math.min(5, c + 1), 1), C = {
     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"
-  }, M = l === 0 ? "big" : `h${k}`, B = l === 0;
-  return /* @__PURE__ */ w(bo, { className: b("base-info", "lg:text-left", u && "!text-center", i), ...x, children: [
-    c && /* @__PURE__ */ r("div", { children: c }),
-    (d || m) && /* @__PURE__ */ r("div", { className: b("section__tag", a?.tag || a?.badge), children: d || m }),
-    h && /* @__PURE__ */ r("img", { className: "w-[120px] m-auto mb-8", src: h, alt: "info", loading: "lazy" }),
-    t && /* @__PURE__ */ r(
-      j,
+  }, N = c === 0 ? "big" : `h${k}`, R = c === 0;
+  return /* @__PURE__ */ y(yo, { className: b("base-info", "lg:text-left", m && "!text-center", i), ...x, children: [
+    l && /* @__PURE__ */ n("div", { children: l }),
+    (d || u) && /* @__PURE__ */ n("div", { className: b("section__tag", a?.tag || a?.badge), children: d || u }),
+    h && /* @__PURE__ */ n("img", { className: "w-[120px] m-auto mb-8", src: h, alt: "info", loading: "lazy" }),
+    t && /* @__PURE__ */ n(
+      A,
       {
         sx: {
           whiteSpace: "pre-wrap",
           mb: e ? "2vw" : 0,
-          ...p?.color && { color: `${v(p.color)} !important` }
+          ...p?.color && { color: `${w(p.color)} !important` }
         },
         className: b(
           "section__title",
@@ -734,41 +654,41 @@ function ot({
           "dark:text-gray-50",
           a.title,
           "page-kit-section__title",
-          B ? "" : "section__title_non_big"
+          R ? "" : "section__title_non_big"
         ),
-        component: `h${Math.max(l, 1)}`,
-        variant: M,
+        component: `h${Math.max(c, 1)}`,
+        variant: N,
         children: t
       }
     ),
-    e && (o ? /* @__PURE__ */ r(
-      f,
+    e && (o ? /* @__PURE__ */ n(
+      g,
       {
         sx: {
-          ...y?.color && { color: `${v(y.color)} !important` }
+          ...v?.color && { color: `${w(v.color)} !important` }
         },
         className: b(
           "section__description",
           "text-gray-800",
           "dark:text-gray-100",
-          _[k],
+          C[k],
           a.description,
           "page-kit-section__description"
         ),
-        children: /* @__PURE__ */ r(we, { codeOptions: { showActionButton: !1, theme: ke }, children: e })
+        children: /* @__PURE__ */ n(we, { codeOptions: { showActionButton: !1, theme: ke }, children: e })
       }
-    ) : /* @__PURE__ */ r(
-      j,
+    ) : /* @__PURE__ */ n(
+      A,
       {
         sx: {
           whiteSpace: "pre-wrap",
-          ...y?.color && { color: `${v(y.color)} !important` }
+          ...v?.color && { color: `${w(v.color)} !important` }
         },
         className: b(
           "section__description",
           "text-gray-800",
           "dark:text-gray-100",
-          _[k],
+          C[k],
           a.description,
           "page-kit-section__description"
         ),
@@ -778,8 +698,8 @@ function ot({
         children: e
       }
     )),
-    /* @__PURE__ */ r(O, { actions: n, center: u, className: "mt-8" }),
-    s && /* @__PURE__ */ r("div", { children: s })
+    /* @__PURE__ */ n(U, { actions: r, center: m, className: "mt-8" }),
+    s && /* @__PURE__ */ n("div", { children: s })
   ] });
 }
 const nt = [
@@ -797,11 +717,11 @@ const nt = [
   "titleAppearance",
   "descriptionAppearance"
 ];
-function yo() {
+function vo() {
   const t = navigator.userAgent.toLowerCase();
   return t.includes("safari") && !t.includes("chrome");
 }
-function vo(t = "") {
+function wo(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);
@@ -809,16 +729,16 @@ function vo(t = "") {
 function H(t) {
   return t?.endsWith(".mp4") || t?.endsWith(".m4v") || t?.endsWith(".webm");
 }
-function wo(t) {
+function ko(t) {
   return t?.endsWith(".mp4") || t?.endsWith(".m4v") ? "video/mp4" : t?.endsWith(".webm") ? "video/webm" : void 0;
 }
-function ko(t) {
+function _o(t) {
   let e = {};
   return typeof t == "string" ? Ce(t) ? e.image = t : (e.image = L(t), Se(t) && (e.color = t, e.image = "")) : e = t, e;
 }
-function _o() {
-  const [t, e] = Z(Date.now());
-  return J(() => {
+function $o() {
+  const [t, e] = tt(Date.now());
+  return Y(() => {
     const o = () => {
       e(Date.now());
     };
@@ -827,14 +747,14 @@ function _o() {
     };
   }, []), t;
 }
-function $t(t, e, o, n, i) {
+function $t(t, e, o, r, i) {
   let a = null;
-  const { color: c = "", image: s } = ko(e);
-  if (s && vo(s)) {
+  const { color: l = "", image: s } = _o(e);
+  if (s && wo(s)) {
     delete o.backgroundColor;
-    const l = !(t.mobile.apple.device || yo()) && H(s), d = H(s) && n ? F(L(n), 1200, "quality") : "";
-    l ? a = /* @__PURE__ */ r(
-      f,
+    const c = !(t.mobile.apple.device || vo()) && H(s), d = H(s) && r ? j(L(r), 1200, "quality") : "";
+    c ? a = /* @__PURE__ */ n(
+      g,
       {
         component: "video",
         className: "section-bg",
@@ -844,7 +764,7 @@ function $t(t, e, o, n, i) {
         controls: !1,
         playsInline: !0,
         poster: d,
-        src: H(s) ? s : F(s, 1200, "quality"),
+        src: H(s) ? s : j(s, 1200, "quality"),
         sx: {
           width: "100%",
           position: "absolute",
@@ -857,10 +777,10 @@ function $t(t, e, o, n, i) {
         }
       },
       s
-    ) : a = /* @__PURE__ */ r(
+    ) : a = /* @__PURE__ */ n(
       jt,
       {
-        src: H(s) && n ? d : s,
+        src: H(s) && r ? d : s,
         sizesAttr: {
           sm: 600,
           md: 900,
@@ -883,12 +803,12 @@ function $t(t, e, o, n, i) {
       },
       i || s
     );
-  } else s ? o.backgroundImage = `${s} !important` : c && (o.backgroundColor = `${c} !important`);
+  } else s ? o.backgroundImage = `${s} !important` : l && (o.backgroundColor = `${l} !important`);
   return a;
 }
-function $o({ autoWidth: t, children: e, ...o }) {
-  return t ? /* @__PURE__ */ r(
-    f,
+function Co({ autoWidth: t, children: e, ...o }) {
+  return t ? /* @__PURE__ */ n(
+    g,
     {
       ...o,
       sx: [
@@ -899,36 +819,36 @@ function $o({ autoWidth: t, children: e, ...o }) {
       ],
       children: e
     }
-  ) : /* @__PURE__ */ r(ie, { ...o, children: e });
+  ) : /* @__PURE__ */ n(ie, { ...o, children: e });
 }
-function rt({
+function it({
   dark: t = !1,
   children: e,
   className: o,
-  sx: n = {},
+  sx: r = {},
   boxed: i = { show: !1 },
   padding: a = "normal",
-  boxProps: c,
+  boxProps: l,
   type: s,
-  ...l
+  ...c
 }) {
-  const d = { ...n }, m = zt((p) => p.breakpoints.down("md"));
-  t && (d.color = kt.common.white, d.backgroundColor = `${kt.grey[900]} !important`), i.show && (d.display = "flex");
-  const u = S(() => !Number(l.boxMaxWidth) || m ? {
+  const d = { ...r }, u = Ft((p) => p.breakpoints.down("md"));
+  t && (d.color = _t.common.white, d.backgroundColor = `${_t.grey[900]} !important`), i.show && (d.display = "flex");
+  const m = S(() => !Number(c.boxMaxWidth) || u ? {
     width: "100%"
-  } : s === "wall" && l.boxMaxWidth ? {
-    maxWidth: `${l.boxMaxWidth}px !important`,
+  } : s === "wall" && c.boxMaxWidth ? {
+    maxWidth: `${c.boxMaxWidth}px !important`,
     width: "100%"
   } : {
     width: "100%"
-  }, [l.boxMaxWidth, m, s]), h = W({
+  }, [c.boxMaxWidth, u, s]), h = W({
     type: "baseSectionPaddingY",
     value: a || "normal",
     // section default is normal
     defaultValue: ""
   });
-  return /* @__PURE__ */ r(
-    Co,
+  return /* @__PURE__ */ n(
+    So,
     {
       component: "section",
       styles: { ...d, ...h },
@@ -936,7 +856,7 @@ function rt({
         dark: t
       }),
       ...I(
-        l,
+        c,
         "hoverStyle",
         "boxMaxWidth",
         "embedUrl",
@@ -946,52 +866,52 @@ function rt({
         "titleAppearance",
         "descriptionAppearance"
       ),
-      children: /* @__PURE__ */ r($o, { autoWidth: l?.autoWidth, className: b("section-content h-full"), sx: u, children: i.show ? /* @__PURE__ */ r(Ht, { ...c, boxed: i, children: e }) : e })
+      children: /* @__PURE__ */ n(Co, { autoWidth: c?.autoWidth, className: b("section-content h-full"), sx: m, children: i.show ? /* @__PURE__ */ n(ft, { ...l, boxed: i, children: e }) : e })
     }
   );
 }
-function Ht({
+function ft({
   background: t = "",
   backgroundVideoPoster: e,
   children: o,
-  sx: n = {},
+  sx: r = {},
   boxed: i = { show: !1 },
   className: a = "",
-  styles: c = {},
+  styles: l = {},
   ...s
 }) {
-  const l = { ...c, ...n }, d = Wt();
-  let m = null;
-  const u = zt((y) => y.breakpoints.up("sm")), h = _e(), p = _o();
-  return t && (m = $t(
+  const c = { ...l, ...r }, d = At();
+  let u = null;
+  const m = Ft((v) => v.breakpoints.up("sm")), h = _e(), p = $o();
+  return t && (u = $t(
     h,
     typeof t == "string" ? d(t) : t,
-    l,
+    c,
     e,
     p
-  )), i.show && (l.borderRadius = "10px", l.padding === void 0 && (l.padding = u ? "50px" : "20px"), i?.border && (l.border = "1px solid #c0c0c0"), i?.background && (m = $t(
+  )), i.show && (c.borderRadius = "10px", c.padding === void 0 && (c.padding = m ? "50px" : "20px"), i?.border && (c.border = "1px solid #c0c0c0"), i?.background && (u = $t(
     h,
     typeof i?.background == "string" ? d(i?.background) : i?.background,
-    l,
+    c,
     i?.backgroundVideoPoster,
     p
-  ))), /* @__PURE__ */ w(
-    f,
+  ))), /* @__PURE__ */ y(
+    g,
     {
       ...s,
       sx: {
-        ...l,
-        ...m ? { position: "relative", overflow: "hidden", zIndex: 0 } : {}
+        ...c,
+        ...u ? { position: "relative", overflow: "hidden", zIndex: 0 } : {}
       },
       className: b(a, i?.boxShadow && "shadow-xl"),
       children: [
-        m,
+        u,
         o
       ]
     }
   );
 }
-const Co = C(Ht)`
+const So = $(ft)`
   &:nth-of-type(even) {
     background: #f8f8f8;
   }
@@ -1009,14 +929,14 @@ const Co = C(Ht)`
   }
 `;
 function Vt(t) {
-  if (t.type === fe) {
-    const o = (t.props.children || []).filter((n) => Et(n));
+  if (t.type === xe) {
+    const o = (t.props.children || []).filter((r) => Pt(r));
     return o.length === 1 ? Vt(o[0]) : o.length > 1;
   }
   return Array.isArray(t);
 }
-const P = "&>*";
-function Jt({ children: t, col: e, gap: o, className: n, align: i, sx: a, type: c, ...s } = {
+const E = "&>*";
+function Jt({ children: t, col: e, gap: o, className: r, align: i, sx: a, type: l, ...s } = {
   children: null,
   className: "",
   col: 3,
@@ -1025,7 +945,7 @@ function Jt({ children: t, col: e, gap: o, className: n, align: i, sx: a, type:
   align: "center",
   type: "default"
 }) {
-  const l = At(), d = Number(Math.floor(100 / e * 100) / 100), m = {
+  const c = Et(), d = Number(Math.floor(100 / e * 100) / 100), u = {
     center: "justify-center items-center",
     left: "justify-start items-center",
     right: "justify-end items-center",
@@ -1035,7 +955,7 @@ function Jt({ children: t, col: e, gap: o, className: n, align: i, sx: a, type:
     "top-right": "justify-end items-start",
     "bottom-left": "justify-start items-end",
     "bottom-right": "justify-end items-end"
-  }, u = m[i] || m.center;
+  }, m = u[i] || u.center;
   let p = o ?? ({
     2: 6,
     3: 4,
@@ -1045,133 +965,133 @@ function Jt({ children: t, col: e, gap: o, className: n, align: i, sx: a, type:
   }[e] || 0);
   Vt(t) || (p = 0);
   const x = (e - 1) * p / e;
-  let v = { ...a, gap: `${p}rem` };
-  const k = { [P]: { width: "100%" } }, _ = {}, M = {}, B = {};
-  switch (k.gap = "1rem", _.gap = `${p / 2}rem`, e) {
+  let w = { ...a, gap: `${p}rem` };
+  const k = { [E]: { width: "100%" } }, C = {}, N = {}, R = {};
+  switch (k.gap = "1rem", C.gap = `${p / 2}rem`, e) {
     case 3:
     case 4:
-      _[P] = {
+      C[E] = {
         width: `calc(50% - ${p / 2}rem)`
       };
       break;
     case 5:
     case 6:
-      k[P] = {
+      k[E] = {
         width: `calc(50% - ${p / 2 / 2}rem)`
-      }, _[P] = {
+      }, C[E] = {
         width: `calc(50% - ${p / 2 / 2}rem)`
-      }, M[P] = {
+      }, N[E] = {
         width: `calc(33.33% - ${p * 2 / 3}rem)`
       };
       break;
   }
-  return v[P] = { width: `calc(${d}% - ${x}rem)` }, v[`@media (max-width: ${l.breakpoints.values.xl}px)`] = B, v[`@media (max-width: ${l.breakpoints.values.lg}px)`] = M, v[`@media (max-width: ${l.breakpoints.values.md}px)`] = _, v[`@media (max-width: ${l.breakpoints.values.sm}px)`] = k, c === "wall" && (v = { ...a, gap: `${p}rem` }, v[P] = { width: `calc(${d}% - ${x}rem)` }, k[P] = { width: `calc(45% - ${p / 2 / 2}rem)` }, v[`@media (max-width: ${l.breakpoints.values.sm}px)`] = k), /* @__PURE__ */ r(f, { className: b("flex flex-wrap flex-row h-full", u, n), sx: v, ...s, children: t });
+  return w[E] = { width: `calc(${d}% - ${x}rem)` }, w[`@media (max-width: ${c.breakpoints.values.xl}px)`] = R, w[`@media (max-width: ${c.breakpoints.values.lg}px)`] = N, w[`@media (max-width: ${c.breakpoints.values.md}px)`] = C, w[`@media (max-width: ${c.breakpoints.values.sm}px)`] = k, l === "wall" && (w = { ...a, gap: `${p}rem` }, w[E] = { width: `calc(${d}% - ${x}rem)` }, k[E] = { width: `calc(45% - ${p / 2 / 2}rem)` }, w[`@media (max-width: ${c.breakpoints.values.sm}px)`] = k), /* @__PURE__ */ n(g, { className: b("flex flex-wrap flex-row h-full", m, r), sx: w, ...s, children: t });
 }
-function U({ type: t = "", icon: e = "", size: o = "3rem", className: n = "", ...i }) {
-  return /* @__PURE__ */ r(
+function D({ type: t = "", icon: e = "", size: o = "3rem", className: r = "", ...i }) {
+  return /* @__PURE__ */ n(
     mt,
     {
       icon: e || t,
       size: o,
-      className: b("content-icon", n),
+      className: b("content-icon", r),
       ...i,
       color: typeof i.color > "u" ? "inherit" : i.color
     }
   );
 }
-function So({
+function Bo({
   to: t,
   base: e,
   children: o,
-  className: n,
+  className: r,
   activeClassName: i = "active",
   target: a = "auto",
-  autoExternalMark: c = !1,
+  autoExternalMark: l = !1,
   useRouterLink: s,
-  ...l
+  ...c
 }) {
-  const { pages: d = [], locale: m = "" } = {}, u = e ? X("/", e) : e || "";
-  let h = a === "auto" ? "_self" : a, p = X(u, t);
-  const y = c ? dt(p) : !1;
+  const { pages: d = [], locale: u = "" } = {}, m = e ? q("/", e) : e || "";
+  let h = a === "auto" ? "_self" : a, p = q(m, t);
+  const v = l ? ut(p) : !1;
   if (e)
-    return p = X(u, m, t), /* @__PURE__ */ r(
+    return p = q(m, u, t), /* @__PURE__ */ n(
       "a",
       {
-        className: `no-underline ${n}`,
-        href: lt(p),
+        className: `no-underline ${r}`,
+        href: ct(p),
         rel: "noreferrer noopener",
         target: h,
-        ...l,
+        ...c,
         children: o
       }
     );
-  if (dt(t))
+  if (ut(t))
     a === "auto" && (h = "_blank"), p = t;
   else {
-    Be(p) && (p = X(window.location.pathname, p));
-    const x = Ne(`${window.location.origin}${p}`), v = d.some((k) => k.pathname === x.pathname);
-    if (s || v)
-      return /* @__PURE__ */ r(
+    Be(p) && (p = q(window.location.pathname, p));
+    const x = Ne(`${window.location.origin}${p}`), w = d.some((k) => k.pathname === x.pathname);
+    if (s || w)
+      return /* @__PURE__ */ n(
         be,
         {
           end: !0,
-          to: lt(p),
-          className: ({ isActive: k }) => b(n, k ? i : ""),
-          ...l,
+          to: ct(p),
+          className: ({ isActive: k }) => b(r, k ? i : ""),
+          ...c,
           children: o
         }
       );
   }
-  return /* @__PURE__ */ w(
+  return /* @__PURE__ */ y(
     "a",
     {
-      className: `no-underline ${n}`,
-      href: lt(p),
+      className: `no-underline ${r}`,
+      href: ct(p),
       rel: "noreferrer noopener",
       target: h,
-      ...l,
+      ...c,
       children: [
         o,
-        y && /* @__PURE__ */ r(U, { icon: "i-mdi:arrow-top-right", size: "0.9em", className: "smart-link__mark", style: { marginLeft: 5 } })
+        v && /* @__PURE__ */ n(D, { icon: "i-mdi:arrow-top-right", size: "0.9em", className: "smart-link__mark", style: { marginLeft: 5 } })
       ]
     }
   );
 }
-function Y({
+function K({
   prepend: t,
   append: e,
   children: o,
-  className: n = "",
+  className: r = "",
   dark: i = !1,
   border: a = !0,
-  ...c
+  ...l
 }) {
   let s = {};
-  const { pages: l = [] } = Dt(), d = l.find((h) => h.id === c.link), m = !o || ge.Children.toArray(o).every((h) => h === null);
-  c.link && (s = {
-    component: So,
-    to: d?.path || c.link,
+  const { pages: c = [] } = Gt(), d = c.find((h) => h.id === l.link), u = !o || ge.Children.toArray(o).every((h) => h === null);
+  l.link && (s = {
+    component: Bo,
+    to: d?.path || l.link,
     useRouterLink: !0
   });
-  const u = ae();
-  return /* @__PURE__ */ w(
-    Bo,
+  const m = ae();
+  return /* @__PURE__ */ y(
+    No,
     {
-      className: b("base-card card", { dark: i, "border-transparent": !a }, n),
+      className: b("base-card card", { dark: i, "border-transparent": !a }, r),
       sx: {
-        borderColor: u.palette.divider
+        borderColor: m.palette.divider
       },
       ...s,
-      ...I(c, ["listType", "dark", "iconColor", "link", "hoverStyle", "imageSize"]),
+      ...I(l, ["listType", "dark", "iconColor", "link", "hoverStyle", "imageSize"]),
       children: [
         t,
-        !m && /* @__PURE__ */ r("div", { className: "card__body", children: o }),
+        !u && /* @__PURE__ */ n("div", { className: "card__body", children: o }),
         e
       ]
     }
   );
 }
-const Bo = C(f)`
+const No = $(g)`
   &.base-card {
     text-align: left;
     border-width: 1px;
@@ -1187,16 +1107,16 @@ const Bo = C(f)`
     padding: 15px 15px;
   }
 `;
-function K({
+function X({
   align: t = "left",
   title: e,
   titleProps: o = {},
-  description: n,
+  description: r,
   descriptionProps: i = {}
 }) {
-  return /* @__PURE__ */ w(Q, { children: [
-    e && /* @__PURE__ */ r(
-      j,
+  return /* @__PURE__ */ y(J, { children: [
+    e && /* @__PURE__ */ n(
+      A,
       {
         className: b("card__title text-gray-800", "dark:text-gray-50"),
         component: "h5",
@@ -1207,8 +1127,8 @@ function K({
         children: e
       }
     ),
-    n && /* @__PURE__ */ r(
-      j,
+    r && /* @__PURE__ */ n(
+      A,
       {
         className: b("card__description", "text-gray-500", "dark:text-gray-400"),
         component: "div",
@@ -1216,32 +1136,32 @@ function K({
         gutterBottom: !0,
         align: t,
         ...i,
-        children: n
+        children: r
       }
     )
   ] });
 }
-function No({
+function Ro({
   image: t,
   title: e,
   description: o,
-  imageProps: n = {},
+  imageProps: r = {},
   imageMeta: i,
   imageSize: a,
-  titleProps: c = {},
+  titleProps: l = {},
   descriptionProps: s = {},
-  actions: l,
+  actions: c,
   align: d,
-  ...m
+  ...u
 }) {
-  const u = xt(t), h = F(L(t), 540);
-  return /* @__PURE__ */ w(
-    Ro,
+  const m = xt(t), h = j(L(t), 540);
+  return /* @__PURE__ */ y(
+    Mo,
     {
       className: "card-article",
-      ...m,
-      prepend: /* @__PURE__ */ r("div", { className: "card__image__wrap", children: u && t ? /* @__PURE__ */ r(
-        f,
+      ...u,
+      prepend: /* @__PURE__ */ n("div", { className: "card__image__wrap", children: m && t ? /* @__PURE__ */ n(
+        g,
         {
           sx: {
             position: "absolute",
@@ -1253,15 +1173,15 @@ function No({
             alignItems: "center",
             justifyContent: "center"
           },
-          children: /* @__PURE__ */ r(U, { icon: t, color: "primary.main" })
+          children: /* @__PURE__ */ n(D, { icon: t, color: "primary.main" })
         }
-      ) : h && /* @__PURE__ */ r(
+      ) : h && /* @__PURE__ */ n(
         "img",
         {
           className: "card__image",
           src: h,
-          ...n,
-          alt: n.alt || i?.filename || "card-image",
+          ...r,
+          alt: r.alt || i?.filename || "card-image",
           width: i?.naturalWidth,
           height: i?.naturalHeight,
           style: { width: "100%", height: "100%", objectFit: a || "cover", objectPosition: "center" },
@@ -1269,22 +1189,22 @@ function No({
         }
       ) }),
       children: [
-        e || o ? /* @__PURE__ */ r(
-          K,
+        e || o ? /* @__PURE__ */ n(
+          X,
           {
             align: d,
             title: e,
-            titleProps: c,
+            titleProps: l,
             description: o,
             descriptionProps: s
           }
         ) : null,
-        l?.length ? /* @__PURE__ */ r(O, { align: d, actions: l, className: "mt-4" }) : null
+        c?.length ? /* @__PURE__ */ n(U, { align: d, actions: c, className: "mt-4" }) : null
       ]
     }
   );
 }
-const Ro = C(Y)`
+const Mo = $(K)`
   ${(t) => t.hoverStyle === "none" ? "" : t.link ? `transition: box-shadow ease .3s;
               &:hover {
                 box-shadow: 0 0 10px rgba(95, 142, 244, 0.42);
@@ -1323,28 +1243,28 @@ function St({
   title: t,
   image: e,
   imageMeta: o,
-  description: n,
+  description: r,
   actions: i,
   align: a,
-  listType: c = "",
+  listType: l = "",
   className: s = "",
-  ...l
+  ...c
 }) {
-  return /* @__PURE__ */ w(Mo, { className: b("card", `list-type-${c}`, s), align: a, ...l, children: [
-    e && /* @__PURE__ */ r(
-      U,
+  return /* @__PURE__ */ y(Io, { className: b("card", `list-type-${l}`, s), align: a, ...c, children: [
+    e && /* @__PURE__ */ n(
+      D,
       {
         icon: e,
         color: "primary.main",
-        size: c === "icon-title" ? "1.2rem" : "3rem",
+        size: l === "icon-title" ? "1.2rem" : "3rem",
         imageMeta: o
       }
     ),
-    t || n ? /* @__PURE__ */ r(K, { align: a, title: t, description: n }) : null,
-    i?.length ? /* @__PURE__ */ r(O, { align: a, actions: i, className: "mt-4" }) : null
+    t || r ? /* @__PURE__ */ n(X, { align: a, title: t, description: r }) : null,
+    i?.length ? /* @__PURE__ */ n(U, { align: a, actions: i, className: "mt-4" }) : null
   ] });
 }
-const Mo = C(Y)`
+const Io = $(K)`
   padding: 5vw 4vw;
   box-sizing: border-box;
   /* min-height: 320px; */
@@ -1405,27 +1325,27 @@ const Mo = C(Y)`
     box-sizing: border-box;
   }
 `;
-function Io({
+function Lo({
   image: t,
   title: e,
   description: o,
-  imageProps: n = {},
+  imageProps: r = {},
   imageMeta: i,
   imageSize: a,
-  titleProps: c = {},
+  titleProps: l = {},
   descriptionProps: s = {},
-  actions: l,
+  actions: c,
   align: d,
-  ...m
+  ...u
 }) {
-  const u = xt(t), h = F(L(t), 540);
-  return /* @__PURE__ */ w(
-    Lo,
+  const m = xt(t), h = j(L(t), 540);
+  return /* @__PURE__ */ y(
+    Po,
     {
       className: "card-article",
-      ...m,
-      prepend: /* @__PURE__ */ r("div", { className: "card__image__wrap", children: u && t ? /* @__PURE__ */ r(
-        f,
+      ...u,
+      prepend: /* @__PURE__ */ n("div", { className: "card__image__wrap", children: m && t ? /* @__PURE__ */ n(
+        g,
         {
           sx: {
             position: "absolute",
@@ -1437,16 +1357,16 @@ function Io({
             alignItems: "center",
             justifyContent: "center"
           },
-          children: /* @__PURE__ */ r(U, { icon: t, color: "primary.main" })
+          children: /* @__PURE__ */ n(D, { icon: t, color: "primary.main" })
         }
-      ) : h && /* @__PURE__ */ r(
-        f,
+      ) : h && /* @__PURE__ */ n(
+        g,
         {
           component: "img",
           className: "card__image",
           src: h,
-          ...n,
-          alt: n.alt || i?.filename || "card-image",
+          ...r,
+          alt: r.alt || i?.filename || "card-image",
           style: { width: "100%", height: "100%", objectFit: a || "contain", objectPosition: "center" },
           loading: "lazy",
           sx: [
@@ -1454,27 +1374,27 @@ function Io({
               width: i?.naturalWidth,
               height: i?.naturalHeight
             },
-            ...Array.isArray(n.sx) ? n.sx : [n.sx]
+            ...Array.isArray(r.sx) ? r.sx : [r.sx]
           ]
         }
       ) }),
       children: [
-        e || o ? /* @__PURE__ */ r(
-          K,
+        e || o ? /* @__PURE__ */ n(
+          X,
           {
             align: d,
             title: e,
-            titleProps: c,
+            titleProps: l,
             description: o,
             descriptionProps: s
           }
         ) : null,
-        l?.length ? /* @__PURE__ */ r(O, { align: d, actions: l, className: "mt-4" }) : null
+        c?.length ? /* @__PURE__ */ n(U, { align: d, actions: c, className: "mt-4" }) : null
       ]
     }
   );
 }
-const Lo = C(Y)`
+const Po = $(K)`
   ${(t) => t.hoverStyle === "none" ? "" : t.link ? `transition: box-shadow ease .3s;
               &:hover {
                 box-shadow: 0 0 10px rgba(95, 142, 244, 0.42);
@@ -1503,22 +1423,22 @@ function Eo({
   title: t,
   image: e,
   imageMeta: o,
-  iconSize: n = 100,
+  iconSize: r = 100,
   description: i,
   actions: a,
-  align: c,
+  align: l,
   className: s = "",
-  ...l
+  ...c
 }) {
-  return /* @__PURE__ */ r(Ao, { className: b("card", s), ...l, children: /* @__PURE__ */ w(f, { className: "flex items-center", children: [
-    e && /* @__PURE__ */ r(U, { icon: e, color: "primary.main", size: n, imageMeta: o }),
-    /* @__PURE__ */ w(f, { className: "flex-1 ml-4", children: [
-      /* @__PURE__ */ r(K, { align: c, title: t, description: i }),
-      /* @__PURE__ */ r(O, { align: c, actions: a, className: "mt-4" })
+  return /* @__PURE__ */ n(Wo, { className: b("card", s), ...c, children: /* @__PURE__ */ y(g, { className: "flex items-center", children: [
+    e && /* @__PURE__ */ n(D, { icon: e, color: "primary.main", size: r, imageMeta: o }),
+    /* @__PURE__ */ y(g, { className: "flex-1 ml-4", children: [
+      /* @__PURE__ */ n(X, { align: l, title: t, description: i }),
+      /* @__PURE__ */ n(U, { align: l, actions: a, className: "mt-4" })
     ] })
   ] }) });
 }
-const Ao = C(Y)`
+const Wo = $(K)`
   padding: 5vw 4vw;
   text-align: left;
   box-sizing: border-box;
@@ -1577,33 +1497,33 @@ const Ao = C(Y)`
     box-sizing: border-box;
   }
 `;
-function Po({
+function Ao({
   title: t,
   titleProps: e = {},
   description: o,
-  descriptionProps: n = {},
+  descriptionProps: r = {},
   image: i,
   imageMeta: a,
-  className: c = "",
+  className: l = "",
   align: s,
-  hoverStyle: l,
+  hoverStyle: c,
   ...d
 }) {
-  return /* @__PURE__ */ w(Wo, { className: b("card-simple", c, `hover-style__${l}`), align: s, ...d, children: [
-    i && /* @__PURE__ */ r(U, { icon: i, color: "primary.main", imageMeta: a }),
-    t || o ? /* @__PURE__ */ r(
-      K,
+  return /* @__PURE__ */ y(jo, { className: b("card-simple", l, `hover-style__${c}`), align: s, ...d, children: [
+    i && /* @__PURE__ */ n(D, { icon: i, color: "primary.main", imageMeta: a }),
+    t || o ? /* @__PURE__ */ n(
+      X,
       {
         align: s,
         title: t,
         titleProps: e,
         description: o,
-        descriptionProps: n
+        descriptionProps: r
       }
     ) : null
   ] });
 }
-const Wo = C(Y)`
+const jo = $(K)`
   .card__title {
     color: ${({ theme: t }) => t.palette.text.primary};
     a {
@@ -1700,63 +1620,63 @@ const Wo = C(Y)`
     }
   }
 `;
-function jo({ type: t = "default", ...e }) {
-  const n = {
-    article: No,
-    simple: Po,
+function Fo({ type: t = "default", ...e }) {
+  const r = {
+    article: Ro,
+    simple: Ao,
     news: Eo,
     default: St,
-    wall: Io
+    wall: Lo
   }[t] || St;
-  return /* @__PURE__ */ r(n, { ...t === "news" ? e : I(e, "iconSize") });
+  return /* @__PURE__ */ n(r, { ...t === "news" ? e : I(e, "iconSize") });
 }
-function zo({
+function To({
   list: t = [],
   align: e = "top",
   cards: o,
-  listBorder: n = !0,
+  listBorder: r = !0,
   listType: i = "",
   col: a = 3,
-  gap: c,
+  gap: l,
   iconColor: s,
-  className: l = "",
+  className: c = "",
   type: d = "default",
-  dark: m = !1,
-  textAlign: u = "left",
+  dark: u = !1,
+  textAlign: m = "left",
   hoverStyle: h,
   ...p
 }) {
-  return /* @__PURE__ */ r(
+  return /* @__PURE__ */ n(
     Jt,
     {
       type: d,
-      className: b("card-list py-1", l, "items-stretch"),
+      className: b("card-list py-1", c, "items-stretch"),
       col: a,
-      gap: c,
+      gap: l,
       align: e,
       ...p,
-      children: o || t.map((y) => /* @__PURE__ */ r(
-        jo,
+      children: o || t.map((v) => /* @__PURE__ */ n(
+        Fo,
         {
-          borderColor: n,
+          borderColor: r,
           iconColor: s,
           type: d,
           listType: i,
-          dark: m,
-          ...y,
-          align: u,
-          style: c === 0 && t.length > 1 ? {
+          dark: u,
+          ...v,
+          align: m,
+          style: l === 0 && t.length > 1 ? {
             borderRadius: 0,
             marginRight: "-1px",
             marginBottom: "-1px"
           } : {}
         },
-        y.id
+        v.id
       ))
     }
   );
 }
-const Fo = [
+const zo = [
   "align",
   "cards",
   "list",
@@ -1768,11 +1688,11 @@ const Fo = [
   "type",
   "textAlign"
 ];
-function E(t, e) {
-  const o = pt(t, e), n = I(t, e);
-  return [o, n];
+function P(t, e) {
+  const o = Z(t, e), r = I(t, e);
+  return [o, r];
 }
-const To = C(rt)`
+const Oo = $(it)`
   a .card {
     color: #404040;
     cursor: pointer;
@@ -1788,14 +1708,14 @@ const To = C(rt)`
     color: #404040;
   }
 `;
-function Oo({ className: t, ...e }) {
-  const [o, n] = E(e, nt), [i, a] = E(n, Fo);
-  return /* @__PURE__ */ w(To, { className: b("section--card-list", t), type: e.type, ...a, children: [
-    Object.keys(o).length > 0 && /* @__PURE__ */ r(ot, { center: !0, ...o, className: "mb-[2.5vw]" }),
-    /* @__PURE__ */ r(zo, { ...i, dark: !!e.dark })
+function Uo({ className: t, ...e }) {
+  const [o, r] = P(e, nt), [i, a] = P(r, zo);
+  return /* @__PURE__ */ y(Oo, { className: b("section--card-list", t), type: e.type, ...a, children: [
+    Object.keys(o).length > 0 && /* @__PURE__ */ n(rt, { center: !0, ...o, className: "mb-[2.5vw]" }),
+    /* @__PURE__ */ n(To, { ...i, dark: !!e.dark })
   ] });
 }
-const Uo = C(Oo)`
+const Do = $(Uo)`
   .card__description {
     white-space: pre-wrap;
   }
@@ -1811,28 +1731,28 @@ const Uo = C(Oo)`
     background: inherit !important;
   }
 `;
-function Do({ section: t, ...e }) {
-  const [{ editing: o }, n] = E(e, et), i = S(() => ({
-    ...I(n, ["listBorder", "list", "iconSize", "imageSize"]),
-    list: n.list?.map((a) => ({
+function Go({ section: t, ...e }) {
+  const [{ editing: o }, r] = P(e, ot), i = S(() => ({
+    ...I(r, ["listBorder", "list", "iconSize", "imageSize"]),
+    list: r.list?.map((a) => ({
       ...I(a, "icon", "iconColor"),
-      image: ["news", "simple", "default"].includes(n.type) && a.icon ? a.icon : a.image,
-      actions: a.actions?.map?.((c) => /* @__PURE__ */ r(Gt, { ...c, editing: o }, c.id)),
-      border: n.listBorder,
-      iconSize: n.iconSize,
-      imageSize: n.imageSize,
-      hoverStyle: n.hoverStyle
+      image: ["news", "simple", "default"].includes(r.type) && a.icon ? a.icon : a.image,
+      actions: a.actions?.map?.((l) => /* @__PURE__ */ n(Ht, { ...l, editing: o }, l.id)),
+      border: r.listBorder,
+      iconSize: r.iconSize,
+      imageSize: r.imageSize,
+      hoverStyle: r.hoverStyle
     }))
-  }), [n]);
-  return /* @__PURE__ */ r(Uo, { style: o ? { pointerEvents: "none" } : {}, ...i });
+  }), [r]);
+  return /* @__PURE__ */ n(Do, { style: o ? { pointerEvents: "none" } : {}, ...i });
 }
-function Go({
+function Ho({
   properties: t,
   section: e,
   locale: o,
-  dev: n
+  dev: r
 }) {
-  return e?.config?.componentId ? /* @__PURE__ */ r(
+  return e?.config?.componentId ? /* @__PURE__ */ n(
     $e,
     {
       instanceId: e.id,
@@ -1842,17 +1762,17 @@ function Go({
       componentName: e.config.componentName,
       locale: o,
       properties: t,
-      dev: n
+      dev: r
     }
-  ) : /* @__PURE__ */ r(
-    f,
+  ) : /* @__PURE__ */ n(
+    g,
     {
       sx: {
         textAlign: "center",
         py: 2
       },
-      children: /* @__PURE__ */ r(
-        j,
+      children: /* @__PURE__ */ n(
+        A,
         {
           variant: "caption",
           sx: {
@@ -1864,33 +1784,33 @@ function Go({
     }
   );
 }
-function Ho({
+function Vo({
   src: t,
   dataId: e,
   isEdit: o = !1,
-  height: n = "100%",
+  height: r = "100%",
   onLoad: i = () => {
   }
 }) {
-  return /* @__PURE__ */ r(
+  return /* @__PURE__ */ n(
     Le,
     {
       isEdit: o,
       embedId: e,
       src: t,
-      height: n,
+      height: r,
       onLoad: () => {
         i();
       }
     }
   );
 }
-function Vo({ dataId: t, src: e, actions: o, center: n, onLoad: i, ...a }) {
-  const [c, s] = E(a, nt);
-  return /* @__PURE__ */ w(rt, { ...s, children: [
-    Object.keys(c).length > 0 && /* @__PURE__ */ r(ot, { center: n, ...c }),
-    /* @__PURE__ */ r(
-      Ho,
+function Jo({ dataId: t, src: e, actions: o, center: r, onLoad: i, ...a }) {
+  const [l, s] = P(a, nt);
+  return /* @__PURE__ */ y(it, { ...s, children: [
+    Object.keys(l).length > 0 && /* @__PURE__ */ n(rt, { center: r, ...l }),
+    /* @__PURE__ */ n(
+      Vo,
       {
         dataId: t,
         src: e,
@@ -1898,10 +1818,10 @@ function Vo({ dataId: t, src: e, actions: o, center: n, onLoad: i, ...a }) {
         height: a.iframeHeight ? `${a.iframeHeight}px` : "100%"
       }
     ),
-    /* @__PURE__ */ r(O, { actions: o, center: n })
+    /* @__PURE__ */ n(U, { actions: o, center: r })
   ] });
 }
-const mr = {
+const mn = {
   src: "",
   embedUrl: "",
   title: "",
@@ -1912,16 +1832,16 @@ const mr = {
   config: {},
   id: ""
 };
-function Jo({ section: t, id: e, src: o, ...n }) {
-  const i = `${e}-${n.locale}`, [{ editing: a }, c] = E(n, et), s = ht({}), l = JSON.parse(JSON.stringify(c)), { message: d } = Re(i, "server"), m = Me(JSON.parse(JSON.stringify(c.config) || "{}"));
-  return J(() => {
-    d && d.onInit(() => m.current);
-  }, [d]), J(() => {
-    const u = JSON.parse(JSON.stringify(c.config) || "{}");
-    Ie(s.current, u) || (s.current = u, d?.send("config-set", u));
-  }, [d, c.config]), o ? /* @__PURE__ */ r(Vo, { ...l, dataId: i, src: o, style: a ? { pointerEvents: "none" } : {} }) : /* @__PURE__ */ r(Yo, { children: 'Please set the "src" attribute for this block' });
-}
-const Yo = C("div")`
+function Yo({ section: t, id: e, src: o, ...r }) {
+  const i = `${e}-${r.locale}`, [{ editing: a }, l] = P(r, ot), s = pt({}), c = JSON.parse(JSON.stringify(l)), { message: d } = Re(i, "server"), u = Me(JSON.parse(JSON.stringify(l.config) || "{}"));
+  return Y(() => {
+    d && d.onInit(() => u.current);
+  }, [d]), Y(() => {
+    const m = JSON.parse(JSON.stringify(l.config) || "{}");
+    Ie(s.current, m) || (s.current = m, d?.send("config-set", m));
+  }, [d, l.config]), o ? /* @__PURE__ */ n(Jo, { ...c, dataId: i, src: o, style: a ? { pointerEvents: "none" } : {} }) : /* @__PURE__ */ n(Ko, { children: 'Please set the "src" attribute for this block' });
+}
+const Ko = $("div")`
   user-select: none;
   color: #999;
   padding: 8px;
@@ -1934,30 +1854,30 @@ const Yo = C("div")`
 function Yt(t) {
   return typeof t == "string" && t.startsWith("custom:");
 }
-function Ko(t) {
+function Xo(t) {
   if (!Yt(t)) return Nt;
   try {
-    const e = t?.substring(7) || "", [o = "1px", n = "solid", ...i] = e.split(" ");
+    const e = t?.substring(7) || "", [o = "1px", r = "solid", ...i] = e.split(" ");
     return {
       width: o,
-      style: n,
+      style: r,
       color: i.join(" ") || "divider"
     };
   } catch {
     return Nt;
   }
 }
-function Xo(t) {
+function qo(t) {
   if (!t || t === "none")
     return { border: "none" };
   if (Yt(t)) {
-    const { width: e, style: o, color: n } = Ko(t);
+    const { width: e, style: o, color: r } = Xo(t);
     return {
       border: "none",
       // 避免和下面的详细属性冲突
       borderWidth: e,
       borderStyle: o,
-      borderColor: n
+      borderColor: r
     };
   }
   return {};
@@ -1965,7 +1885,7 @@ function Xo(t) {
 function Kt(t) {
   return typeof t == "string" && t.startsWith("custom:");
 }
-function qo(t) {
+function Qo(t) {
   if (!Kt(t)) return "0";
   try {
     return t?.substring(7) || "0";
@@ -1973,151 +1893,234 @@ function qo(t) {
     return "0";
   }
 }
-function Qo(t) {
-  return !t || t === "none" ? { borderRadius: 0 } : Kt(t) ? { borderRadius: qo(t) } : {};
+function Zo(t) {
+  return !t || t === "none" ? { borderRadius: 0 } : Kt(t) ? { borderRadius: Qo(t) } : {};
 }
-function Zo({ ref: t = void 0, type: e, sx: o, children: n, ...i }) {
-  const a = [{}, ...Array.isArray(o) ? o : [o]];
-  return z(() => {
-    const s = Tt(e);
-    return s ? (a.push({
+function tr({ ref: t = void 0, type: e, sx: o, children: r, ...i }) {
+  const a = {
+    overflow: "hidden !important",
+    display: "grid !important"
+  }, l = [a, ...Array.isArray(o) ? o : [o]];
+  return O(() => {
+    const c = Ve(e || ""), d = Je(e || "");
+    return c ? (l.push({
       img: {
         objectFit: "contain !important",
-        bgcolor: (l) => l.palette.background.default,
+        bgcolor: (u) => u.palette.background.default,
         borderRadius: "0 !important",
         position: "relative"
       }
-    }), /* @__PURE__ */ r(ut, { type: e, children: n })) : /* @__PURE__ */ r(
-      f,
+    }), /* @__PURE__ */ n(
+      Tt,
       {
-        component: s ? ut : "div",
-        ref: t,
-        sx: a,
-        ...i,
-        ...s ? { type: e } : {},
-        children: n
+        type: e,
+        sx: [
+          {
+            // @ts-ignore
+            ".screenshot--container": {
+              ...a,
+              ...Z(o, ["p", "px", "py", "pl", "pr", "pt", "pb", "ml", "mr", "mt", "mb", "alignItems"])
+            }
+          }
+        ],
+        children: r
       }
-    );
-  }, [e, n, a])();
+    )) : d ? /* @__PURE__ */ y(g, { sx: { width: "100%", height: "100%", border: 1, borderColor: "divider", overflow: "hidden" }, children: [
+      /* @__PURE__ */ y(
+        g,
+        {
+          sx: {
+            height: "30px",
+            backgroundColor: "divider",
+            display: "flex",
+            alignItems: "center",
+            px: 1.5
+          },
+          children: [
+            /* @__PURE__ */ y(g, { sx: { display: "flex", gap: 0.7, alignItems: "center" }, children: [
+              /* @__PURE__ */ n(
+                g,
+                {
+                  sx: {
+                    width: 12,
+                    height: 12,
+                    borderRadius: "50%",
+                    backgroundColor: "#ff5f57"
+                  }
+                }
+              ),
+              /* @__PURE__ */ n(
+                g,
+                {
+                  sx: {
+                    width: 12,
+                    height: 12,
+                    borderRadius: "50%",
+                    backgroundColor: "#febc2e"
+                  }
+                }
+              ),
+              /* @__PURE__ */ n(
+                g,
+                {
+                  sx: {
+                    width: 12,
+                    height: 12,
+                    borderRadius: "50%",
+                    backgroundColor: "#28c840"
+                  }
+                }
+              )
+            ] }),
+            e === "chrome-with-url" && /* @__PURE__ */ n(
+              g,
+              {
+                sx: {
+                  ml: 2,
+                  height: "18px",
+                  width: "calc(100% - 80px)",
+                  backgroundColor: "white",
+                  borderRadius: 0.5
+                }
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ n(
+        g,
+        {
+          ref: t,
+          sx: [
+            ...l,
+            {
+              position: "relative",
+              height: "calc(100% - 30px)"
+            }
+          ],
+          ...i,
+          children: r
+        }
+      )
+    ] }) : /* @__PURE__ */ n(g, { ref: t, sx: l, ...i, children: r });
+  }, [e, r, l])();
 }
-const tn = "none", en = "none", on = "transparent", nn = "center", rn = "start", an = "none", sn = "none", ln = 12, cn = ({
+const er = "none", or = "none", rr = "center", nr = "start", ir = "none", ar = "none", sr = 12, lr = ({
   gridSettings: t,
   section: e,
   index: o,
-  columns: n,
+  columns: r,
   simulateMode: i = "desktop",
   isBackground: a
 }) => {
-  const c = t?.[i] ?? {}, s = c[e.id], l = dn(c);
+  const l = t?.[i] ?? {}, s = l[e.id], c = cr(l);
   return {
     i: e.id,
     static: e?.locked || a,
     ...a ? {
       x: 0,
       y: 0,
-      w: n,
+      w: r,
       h: 1,
       isResizable: !1
     } : {
       x: s?.x ?? 0,
       y: s?.y ?? o,
-      w: s?.w ?? n,
+      w: s?.w ?? r,
       h: s?.h ?? 1,
       isResizable: !0
     },
     minH: 1,
     maxH: 1,
-    maxY: l
+    maxY: c
   };
-}, dn = (t) => Object.values(t).reduce((e, o) => Math.max(e, o.y || 0), 0) || 0, un = (t) => {
-  const { dev: e, id: o, section: n, onBlockRender: i } = t, a = e?.mode, c = se((g) => g.breakpoints.down("sm")), { t: s } = Ee(), { sections: l, sectionIds: d, config: m } = n, {
-    columns: u = ln,
+}, cr = (t) => Object.values(t).reduce((e, o) => Math.max(e, o.y || 0), 0) || 0, dr = (t) => {
+  const { dev: e, id: o, section: r, onBlockRender: i } = t, a = e?.mode, l = se((f) => f.breakpoints.down("sm")), { t: s } = Pe(), { sections: c, sectionIds: d, config: u } = r, {
+    columns: m = sr,
     gridSettings: h,
     gap: p,
-    padding: y,
+    padding: v,
     background: x,
-    alignContent: v,
-    justifyContent: k,
-    border: _,
-    borderRadius: M,
-    ignoreMaxWidth: B
-  } = m || {}, it = S(() => {
-    const $ = W({
+    backgroundVideoPoster: w,
+    alignContent: k,
+    justifyContent: C,
+    border: N,
+    borderRadius: R,
+    ignoreMaxWidth: bt
+  } = u || {}, at = S(() => {
+    const _ = W({
       type: "layoutBlockGap",
-      value: p ?? tn,
+      value: p ?? er,
       format: "sx"
-    }), T = {
-      ...$,
-      gap: Object.keys($.gap).reduce((N, A) => (N[A] = -$.gap[A], N), {})
+    }), F = {
+      ..._,
+      gap: Object.keys(_.gap || {}).reduce((T, B) => (T[B] = -_.gap[B], T), {})
     };
     return {
-      item: $,
-      container: T
+      item: _,
+      container: F
     };
   }, [p]), Xt = S(() => W({
     type: "layoutBlockPadding",
-    value: y ?? en,
+    value: v ?? or,
     format: "sx"
-  }), [y]), at = S(() => W({
+  }), [v]), st = S(() => W({
     type: "layoutBlockAlignContent",
-    value: v ?? nn,
+    value: k ?? rr,
     format: "sx"
-  }), [v]), st = S(() => W({
+  }), [k]), lt = S(() => W({
     type: "layoutBlockJustifyContent",
-    value: k ?? rn,
+    value: C ?? nr,
     format: "sx"
-  }), [k]), qt = S(() => {
-    const g = _ ?? an, $ = Xo(g);
-    return Object.keys($).length > 0 ? $ : W({
+  }), [C]), qt = S(() => {
+    const f = N ?? ir, _ = qo(f);
+    return Object.keys(_).length > 0 ? _ : W({
       type: "layoutBlockBorder",
-      value: g,
+      value: f,
       format: "sx"
     });
-  }, [_]), Qt = z(
-    (g) => Tt(_) ? /* @__PURE__ */ r(Zo, { type: _, ...g }) : /* @__PURE__ */ r(f, { ...g }),
-    [_]
-  ), Zt = S(() => {
-    const g = M ?? sn, $ = Qo(g);
-    return Object.keys($).length > 0 ? $ : W({
+  }, [N]), Qt = S(() => {
+    const f = R ?? ar, _ = Zo(f);
+    return Object.keys(_).length > 0 ? _ : W({
       type: "layoutBlockBorderRadius",
-      value: g,
+      value: f,
       format: "sx"
     });
-  }, [M]), bt = z(
-    (g, $ = !1, T = 0) => {
-      if (!i || !g || !g.component || g.visibility === "hidden")
+  }, [R]), yt = O(
+    (f, _ = !1, F = 0, T) => {
+      if (!i || !f || !f.component || f.visibility === "hidden")
         return null;
-      const N = cn({
+      const B = lr({
         gridSettings: h,
-        section: g,
-        index: T,
-        columns: u,
-        simulateMode: c ? "mobile" : "desktop",
-        isBackground: $
-      }), A = N?.x ?? 0, D = N?.y ?? 0, G = N?.w ?? u, te = N?.h ?? 1, ee = N?.maxY ?? 0, oe = !!n?.config?.backgroundSectionId;
-      return /* @__PURE__ */ r(
-        f,
+        section: f,
+        index: F,
+        columns: m,
+        simulateMode: l ? "mobile" : "desktop",
+        isBackground: _
+      }), G = B?.x ?? 0, z = B?.y ?? 0, Zt = B?.w ?? m, te = B?.h ?? 1, ee = B?.maxY ?? 0, oe = !!r?.config?.backgroundSectionId;
+      return /* @__PURE__ */ n(
+        g,
         {
-          className: $ ? "layout-block-background" : "layout-block-component",
+          className: _ ? "layout-block-background" : "layout-block-component",
           sx: {
             // 背景元素和普通元素都使用 grid 布局
-            ...$ ? {
+            ..._ ? {
               // 背景元素覆盖整个网格区域
               gridColumn: "1 / -1",
               gridRow: `1 / ${ee + 1}`,
               zIndex: 0,
               width: "100%",
               height: "100%",
-              "& .BlockBase-root": {
+              "& > .BlockBase-root": {
                 width: "100%",
                 height: "100%"
               }
             } : {
               position: "relative",
               // 使用 grid 定位普通元素
-              gridColumn: `${A + 1} / span ${G}`,
+              gridColumn: `${G + 1} / span ${Zt}`,
               // hasBackground 的话，不再 + 1，因为 background 会占用第一行
-              gridRow: `${D + (oe ? 0 : 1)} / span ${te}`,
+              gridRow: `${z + (oe ? 0 : 1)} / span ${te}`,
               zIndex: 1,
               // Ensure content is above background
               minWidth: 0,
@@ -2126,30 +2129,30 @@ const tn = "none", en = "none", on = "transparent", nn = "center", rn = "start",
               // 防止内容撑开网格项
               // overflow: 'hidden', // 防止子内容溢出网格项
               // 只给非第一行添加上边距
-              ...D > 0 ? { mt: it?.item?.gap } : {},
+              ...z > 0 ? { mt: at?.item?.gap } : {},
               // 只给非第一列添加左边距
-              ...A > 0 ? { ml: it?.item?.gap } : {},
+              ...G > 0 ? { ml: at?.item?.gap } : {},
               "& > .BlockBase-root": {
                 height: "100%",
                 width: "100%",
                 boxSizing: "border-box",
                 position: "relative",
-                ...at,
-                ...st
+                ...st,
+                ...lt
               }
             }
           },
-          children: i({
-            id: g.id,
-            type: g.component,
+          children: T || i({
+            id: f.id,
+            type: f.component,
             config: {},
             section: {
-              ...g
+              ...f
             },
             mode: a
           })
         },
-        g.id
+        f.id
       );
     },
     [
@@ -2157,26 +2160,24 @@ const tn = "none", en = "none", on = "transparent", nn = "center", rn = "start",
       a,
       i,
       h,
-      u,
-      c,
-      it,
+      m,
+      l,
       at,
       st,
-      B
+      lt,
+      bt
     ]
-  ), { backgroundElements: yt, contentElements: vt } = S(() => {
-    if (!d || !d.length || !l || !Object.keys(l).length)
-      return { backgroundElements: [], contentElements: [] };
-    const g = [], $ = [];
-    return d?.forEach((T, N) => {
-      const A = l[T];
-      if (!A) return;
-      const D = n?.config?.backgroundSectionId === T, G = bt(A, D, N);
-      G && (D ? g.push(G) : $.push(G));
-    }), { backgroundElements: g, contentElements: $ };
-  }, [bt, l, d]);
-  return a === "draft" && !yt?.length && !vt?.length ? /* @__PURE__ */ w(
-    f,
+  ), { backgroundElements: vt, contentElements: wt } = S(() => {
+    const f = [], _ = [];
+    return d?.forEach((F, T) => {
+      const B = c?.[F];
+      if (!B) return;
+      const G = r?.config?.backgroundSectionId === F, z = yt(B, G, T);
+      z && (G ? f.push(z) : _.push(z));
+    }), { backgroundElements: f || [], contentElements: _ || [] };
+  }, [yt, c, d, x, w]);
+  return a === "draft" && !vt?.length && !wt?.length ? /* @__PURE__ */ y(
+    g,
     {
       sx: {
         gridColumn: "1 / -1",
@@ -2186,7 +2187,7 @@ const tn = "none", en = "none", on = "transparent", nn = "center", rn = "start",
         alignItems: "center",
         justifyContent: "center",
         gap: 2,
-        border: (g) => `2px dashed ${g.palette.divider}`,
+        border: (f) => `2px dashed ${f.palette.divider}`,
         borderRadius: 2,
         padding: 4,
         color: "text.secondary",
@@ -2195,8 +2196,8 @@ const tn = "none", en = "none", on = "transparent", nn = "center", rn = "start",
         position: "relative"
       },
       children: [
-        /* @__PURE__ */ r(
-          f,
+        /* @__PURE__ */ n(
+          g,
           {
             sx: {
               fontSize: "48px",
@@ -2205,8 +2206,8 @@ const tn = "none", en = "none", on = "transparent", nn = "center", rn = "start",
             children: "📐"
           }
         ),
-        /* @__PURE__ */ r(
-          f,
+        /* @__PURE__ */ n(
+          g,
           {
             sx: {
               fontSize: "16px",
@@ -2216,8 +2217,8 @@ const tn = "none", en = "none", on = "transparent", nn = "center", rn = "start",
             children: "Section Layout"
           }
         ),
-        /* @__PURE__ */ r(
-          f,
+        /* @__PURE__ */ n(
+          g,
           {
             sx: {
               opacity: 0.7,
@@ -2226,8 +2227,8 @@ const tn = "none", en = "none", on = "transparent", nn = "center", rn = "start",
             children: s("maker.layoutBlock.draftPlaceholder")
           }
         ),
-        /* @__PURE__ */ r(
-          f,
+        /* @__PURE__ */ n(
+          g,
           {
             sx: {
               position: "absolute",
@@ -2237,13 +2238,13 @@ const tn = "none", en = "none", on = "transparent", nn = "center", rn = "start",
               bottom: 0,
               pointerEvents: "none",
               opacity: 0.1,
-              background: (g) => `
+              background: (f) => `
                 repeating-linear-gradient(
                   90deg,
                   transparent,
-                  transparent calc(100% / ${u} - 1px),
-                  ${g.palette.grey[400]} calc(100% / ${u} - 1px),
-                  ${g.palette.grey[400]} calc(100% / ${u})
+                  transparent calc(100% / ${m} - 1px),
+                  ${f.palette.grey[400]} calc(100% / ${m} - 1px),
+                  ${f.palette.grey[400]} calc(100% / ${m})
                 )
               `
             }
@@ -2251,58 +2252,90 @@ const tn = "none", en = "none", on = "transparent", nn = "center", rn = "start",
         )
       ]
     }
-  ) : /* @__PURE__ */ w(
-    Qt,
+  ) : /* @__PURE__ */ y(
+    tr,
     {
+      type: N,
       sx: {
         position: "relative",
         display: "grid",
-        gridTemplateColumns: `repeat(${u}, minmax(0, 1fr))`,
+        gridTemplateColumns: `repeat(${m}, minmax(0, 1fr))`,
         alignItems: "stretch",
         width: "100%",
         height: "100%",
         minWidth: 0,
-        bgcolor: x ?? on,
         boxSizing: "border-box",
-        // overflow: 'hidden', // Prevent content overflow
+        overflow: "hidden",
+        // Prevent content overflow
         ...Xt,
-        ...at,
-        ...st
+        ...st,
+        ...lt
       },
       children: [
-        n?.id && /* @__PURE__ */ r(
-          le,
+        x && /* @__PURE__ */ n(
+          g,
           {
-            styles: (g) => g.unstable_sx({
-              [`#BlockBase-${n.id}`]: {
-                ...B && {
-                  maxWidth: "unset !important",
-                  px: 0
-                },
-                ...qt,
-                ...Zt,
-                overflow: "hidden"
+            sx: {
+              position: "absolute",
+              zIndex: -1,
+              top: 0,
+              left: 0,
+              right: 0,
+              bottom: 0,
+              width: "100%",
+              height: "100%",
+              overflow: "hidden"
+            },
+            children: /* @__PURE__ */ n(
+              ft,
+              {
+                background: x,
+                backgroundVideoPoster: w,
+                sx: {
+                  width: "inherit",
+                  height: "inherit"
+                }
               }
-            })
+            )
           }
         ),
-        yt,
-        vt
+        /* @__PURE__ */ y(J, { children: [
+          r?.id && /* @__PURE__ */ n(
+            le,
+            {
+              styles: (f) => f.unstable_sx({
+                [`#BlockBase-${r.id}`]: {
+                  ...bt && {
+                    maxWidth: "unset !important",
+                    px: 0
+                  },
+                  "& > div": {
+                    ...qt,
+                    ...Qt,
+                    overflow: "hidden"
+                  }
+                }
+              })
+            }
+          ),
+          vt,
+          wt
+        ] })
       ]
     }
   );
-}, mn = ["title", "description", "actions", "badge", "tag", "prepend", "append", "logo"];
-function pn({
+}, ur = ["title", "description", "actions", "badge", "tag", "prepend", "append", "logo"];
+function mr({
   image: t,
   imageBorder: e,
   imageShadow: o,
-  className: n,
+  className: r,
   reverse: i = !1,
   fullSizeImage: a,
-  ...c
+  ...l
 }) {
-  const [s, l] = E(c, nt), d = Object.keys(s).length > 0 && Object.values(pt(s, mn)).filter(Boolean).length > 0 && /* @__PURE__ */ r(ot, { ...s }), m = Et(t) ? t : /* @__PURE__ */ r(f, { component: "img", src: t, alt: "", className: "block" }), u = ["phone", "macbook"].includes(e), h = t && /* @__PURE__ */ r(
-    f,
+  const [s, c] = P(l, nt), d = Object.keys(s).length > 0 && Object.values(Z(s, ur)).filter(Boolean).length > 0 && /* @__PURE__ */ n(rt, { ...s }), u = Pt(t) ? t : /* @__PURE__ */ n(g, { component: "img", src: t, alt: "", className: "block" }), m = ["phone", "macbook"].includes(e), h = t && /* @__PURE__ */ n(
+    g,
     {
       className: b(
         "section__image",
@@ -2315,33 +2348,33 @@ function pn({
         borderRadius: 2,
         overflow: "hidden",
         // FIXME: Screenshot 组件无法设置最外层 div 的样式，只能通过父元素设置
-        "> div": u ? { width: "100%", video: { borderRadius: "0 !important" } } : void 0
+        "> div": m ? { width: "100%", video: { borderRadius: "0 !important" } } : void 0
       },
-      children: u ? (
+      children: m ? (
         // @ts-ignore
-        /* @__PURE__ */ r(ut, { type: e, sx: { width: "100%" }, children: m })
-      ) : m
+        /* @__PURE__ */ n(Tt, { type: e, sx: { width: "100%" }, children: u })
+      ) : u
     }
   );
-  return /* @__PURE__ */ r(
-    rt,
+  return /* @__PURE__ */ n(
+    it,
     {
       className: b(
         "section--block",
-        n,
-        a && !i && ct`
+        r,
+        a && !i && dt`
             .section-bg {
               height: 80%;
             }
           `
       ),
-      ...l,
+      ...c,
       boxProps: a ? { sx: { padding: 0, overflow: "hidden" } } : void 0,
-      children: /* @__PURE__ */ r(
+      children: /* @__PURE__ */ n(
         Jt,
         {
           col: t ? 2 : 1,
-          className: a ? ct`
+          className: a ? dt`
                 display: flex;
                 flex-direction: column;
 
@@ -2355,10 +2388,10 @@ function pn({
                   }
                 }
               ` : void 0,
-          children: i ? /* @__PURE__ */ w(Q, { children: [
+          children: i ? /* @__PURE__ */ y(J, { children: [
             h,
             d
-          ] }) : /* @__PURE__ */ w(Q, { children: [
+          ] }) : /* @__PURE__ */ y(J, { children: [
             d,
             h
           ] })
@@ -2367,7 +2400,7 @@ function pn({
     }
   );
 }
-const hn = [
+const pr = [
   /youtu\.be\/([^#&?]{11})/,
   // youtu.be/<id>
   /\?v=([^#&?]{11})/,
@@ -2379,51 +2412,51 @@ const hn = [
   /\/v\/([^#&?]{11})/
   // /v/<id>
 ];
-function gn(t) {
+function hr(t) {
   if (/youtu\.?be/.test(t))
-    for (const e of hn) {
+    for (const e of pr) {
       const o = e.exec(t)?.[1];
       if (o)
         return o;
     }
 }
-function fn(t) {
-  const e = gn(t);
+function gr(t) {
+  const e = hr(t);
   if (e)
     return `https://youtube.com/embed/${e}`;
 }
-function xn({ src: t }) {
-  return J(() => {
+function xr({ src: t }) {
+  return Y(() => {
     import("@lottiefiles/lottie-player");
-  }, []), /* @__PURE__ */ r("lottie-player", { autoplay: !0, loop: !0, mode: "normal", src: t });
+  }, []), /* @__PURE__ */ n("lottie-player", { autoplay: !0, loop: !0, mode: "normal", src: t });
 }
-function bn(t) {
-  return /* @__PURE__ */ r(
-    f,
+function fr(t) {
+  return /* @__PURE__ */ n(
+    g,
     {
       sx: {
         maxHeight: 400,
         overflow: "hidden auto"
       },
-      children: /* @__PURE__ */ r(Ae, { ...t })
+      children: /* @__PURE__ */ n(Ee, { ...t })
     }
   );
 }
-function yn({ url: t }) {
-  const e = ht(null), o = 495, [n, i] = Z(
+function br({ url: t }) {
+  const e = pt(null), o = 495, [r, i] = tt(
     e.current ? e.current.offsetWidth * 0.5625 : o
-  ), a = z(() => {
-    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));
+  ), a = O(() => {
+    const l = 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 * l));
   }, []);
-  return J(() => {
+  return Y(() => {
     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() {
+    const l = 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 * l)), function() {
       window.removeEventListener("resize", a);
     };
-  }, [n, a]), /* @__PURE__ */ r(
-    f,
+  }, [r, a]), /* @__PURE__ */ n(
+    g,
     {
       component: "iframe",
       ref: e,
@@ -2434,13 +2467,13 @@ function yn({ url: t }) {
       allowFullScreen: !0,
       sx: {
         width: "100%",
-        height: `${n}px`,
+        height: `${r}px`,
         display: "block"
       }
     }
   );
 }
-const pr = {
+const pn = {
   image: "https://www.arcblock.io/static/ead0cabde7f2b7ff34db8f3e8ceca271/afc4b/builder.png",
   badge: "Develop · Deploy · Run",
   title: "The Future is Here: Blockchain and Decentralized Application Development",
@@ -2451,52 +2484,52 @@ const pr = {
   actions: void 0,
   hasImage: !0,
   center: !1
-}, vn = C(pn)`
+}, yr = $(mr)`
   .section__description {
   }
 `;
-function wn({
+function vr({
   hasImage: t,
   fullSizeImage: e,
   boxed: o,
-  videoPoster: n,
+  videoPoster: r,
   imageMeta: i,
   imageOptimization: a,
-  imageSize: c,
+  imageSize: l,
   section: s,
-  ...l
+  ...c
 }) {
-  const [{ editing: d }, m] = E({ ...l, boxed: e ? void 0 : o }, et);
-  let u = kn(m.image, n, e, i, a, c);
-  t || (u = null);
+  const [{ editing: d }, u] = P({ ...c, boxed: e ? void 0 : o }, ot);
+  let m = wr(u.image, r, e, i, a, l);
+  t || (m = null);
   let h = null;
-  return m.actions && (h = m.actions?.map?.((p, y) => /* @__PURE__ */ r(Gt, { ...p, editing: d }, y))), /* @__PURE__ */ r(
-    vn,
+  return u.actions && (h = u.actions?.map?.((p, v) => /* @__PURE__ */ n(Ht, { ...p, editing: d }, v))), /* @__PURE__ */ n(
+    yr,
     {
-      ...m,
+      ...u,
       style: d ? { pointerEvents: "none" } : {},
-      image: u,
+      image: m,
       fullSizeImage: t && e,
       actions: h
     }
   );
 }
-function kn(t, e, o, n, i, a) {
+function wr(t, e, o, r, i, a) {
   if (t) {
     if (t.endsWith(".json"))
-      return /* @__PURE__ */ r(xn, { src: t });
+      return /* @__PURE__ */ n(xr, { src: t });
     if (t.indexOf("twitter.com") !== -1)
-      return /* @__PURE__ */ r(bn, { sourceType: "url", url: t });
-    const c = fn(t);
-    if (c)
-      return /* @__PURE__ */ r(yn, { url: c });
-    const { naturalWidth: s, naturalHeight: l, filename: d } = n || {};
+      return /* @__PURE__ */ n(fr, { sourceType: "url", url: t });
+    const l = gr(t);
+    if (l)
+      return /* @__PURE__ */ n(br, { url: l });
+    const { naturalWidth: s, naturalHeight: c, filename: d } = r || {};
     if (H(t))
-      return /* @__PURE__ */ r(
+      return /* @__PURE__ */ n(
         "video",
         {
           width: s && `${s}px`,
-          height: l && `${l}px`,
+          height: c && `${c}px`,
           controls: !0,
           autoPlay: !0,
           muted: !0,
@@ -2507,27 +2540,27 @@ function kn(t, e, o, n, i, a) {
             width: "100%",
             height: "100%"
           },
-          poster: F(L(e), o ? 1200 : 540, i),
-          children: /* @__PURE__ */ r("source", { src: L(t), type: wo(t) })
+          poster: j(L(e), o ? 1200 : 540, i),
+          children: /* @__PURE__ */ n("source", { src: L(t), type: ko(t) })
         },
         t
       );
-    const m = i === "quality" ? 1 : 0.6;
-    return /* @__PURE__ */ r(
+    const u = i === "quality" ? 1 : 0.6;
+    return /* @__PURE__ */ n(
       jt,
       {
         src: L(t),
         sizesAttr: {
-          sm: 600 * m,
-          md: 450 * m,
-          lg: 540 * m,
+          sm: 600 * u,
+          md: 450 * u,
+          lg: 540 * u,
           ...o && {
-            md: 900 * m,
-            lg: 1200 * m
+            md: 900 * u,
+            lg: 1200 * u
           }
         },
         width: s && `${s}px`,
-        height: l && `${l}px`,
+        height: c && `${c}px`,
         alt: d ?? t,
         style: { objectFit: a || "contain", display: "block", width: "100%", height: "100%" },
         loading: "lazy"
@@ -2536,82 +2569,82 @@ function kn(t, e, o, n, i, a) {
   }
   return null;
 }
-const hr = ["production", "draft"];
-function gr({ mode: t, version: e } = {}) {
+const hn = ["production", "draft"];
+function gn({ mode: t, version: e } = {}) {
   const o = e && typeof e == "number" ? { mode: t, version: e } : { mode: t };
-  return gt.get(`/api/${ft()}/pages`, { params: o }).then((n) => n.data);
+  return ht.get(`/api/${gt()}/pages`, { params: o }).then((r) => r.data);
 }
-function fr({ mode: t, routes: e }) {
-  return gt.post(`/api/${ft()}/pages/publish`, { mode: t, routes: e }).then((o) => o.data);
+function xn({ mode: t, routes: e }) {
+  return ht.post(`/api/${gt()}/pages/publish`, { mode: t, routes: e }).then((o) => o.data);
 }
-function _n({
+function kr({
   locale: t,
   sort: e,
   page: o,
-  limit: n,
+  limit: r,
   mode: i
 } = {}) {
-  return gt.get(`/api/${ft()}/pages/toc`, { params: { locale: t, sort: e, page: o, limit: n, mode: i } }).then((a) => a.data);
+  return ht.get(`/api/${gt()}/pages/toc`, { params: { locale: t, sort: e, page: o, limit: r, mode: i } }).then((a) => a.data);
 }
-const xr = {
+const fn = {
   style: "list",
   sort: "-updatedAt"
 }, Rt = 20;
-function $n({ style: t, sort: e, section: o, ...n }) {
-  const [{ editing: i, locale: a }, c] = E(n, et), [s, l] = E(c, nt), [d, m] = Z(), u = ht(!1), h = Pe(), p = ye(), y = z(async () => {
-    if (!u.current) {
-      u.current = !0, h();
+function _r({ style: t, sort: e, section: o, ...r }) {
+  const [{ editing: i, locale: a }, l] = P(r, ot), [s, c] = P(l, nt), [d, u] = tt(), m = pt(!1), h = We(), p = ye(), v = O(async () => {
+    if (!m.current) {
+      m.current = !0, h();
       try {
-        const x = d ? Math.floor(d.list.length / Rt) + 1 : 1, { list: v, total: k } = await _n({ locale: a, sort: e, page: x, limit: Rt });
-        m((_) => ({
-          list: (_?.list ?? []).concat(v),
+        const x = d ? Math.floor(d.list.length / Rt) + 1 : 1, { list: w, total: k } = await kr({ locale: a, sort: e, page: x, limit: Rt });
+        u((C) => ({
+          list: (C?.list ?? []).concat(w),
           total: k
         }));
       } finally {
-        u.current = !1, h();
+        m.current = !1, h();
       }
     }
   }, [d, a, e, h]);
-  return We(() => {
-    y();
-  }), /* @__PURE__ */ w(rt, { ...l, sx: i ? { pointerEvents: "none" } : {}, children: [
-    Object.keys(s).length > 0 && /* @__PURE__ */ r(ot, { ...s }),
-    d ? /* @__PURE__ */ w(Q, { children: [
-      /* @__PURE__ */ r(
-        wt,
+  return Ae(() => {
+    v();
+  }), /* @__PURE__ */ y(it, { ...c, sx: i ? { pointerEvents: "none" } : {}, children: [
+    Object.keys(s).length > 0 && /* @__PURE__ */ n(rt, { ...s }),
+    d ? /* @__PURE__ */ y(J, { children: [
+      /* @__PURE__ */ n(
+        kt,
         {
           container: !0,
           spacing: 2,
           sx: {
             justifyContent: "center"
           },
-          children: d?.list.map((x) => /* @__PURE__ */ r(
-            wt,
+          children: d?.list.map((x) => /* @__PURE__ */ n(
+            kt,
             {
               size: {
                 xs: 12,
                 sm: t === "card" ? 6 : 12,
                 md: t === "card" ? 3 : 12
               },
-              children: /* @__PURE__ */ w(
-                Cn,
+              children: /* @__PURE__ */ y(
+                $r,
                 {
                   elevation: 0,
                   className: b(t === "card" && "style-card"),
                   onClick: i ? void 0 : () => p(x.slug),
                   children: [
-                    !!x.image && /* @__PURE__ */ r(
+                    !!x.image && /* @__PURE__ */ n(
                       ue,
                       {
                         component: "img",
                         alt: "",
-                        image: F(L(x.image), 540),
+                        image: j(L(x.image), 540),
                         loading: "lazy"
                       }
                     ),
-                    /* @__PURE__ */ w(me, { children: [
-                      /* @__PURE__ */ r(j, { variant: "h6", component: "div", className: Mt, children: x.title || x.id }),
-                      /* @__PURE__ */ r(j, { variant: "body2", className: Mt, children: x.description })
+                    /* @__PURE__ */ y(me, { children: [
+                      /* @__PURE__ */ n(A, { variant: "h6", component: "div", className: Mt, children: x.title || x.id }),
+                      /* @__PURE__ */ n(A, { variant: "body2", className: Mt, children: x.description })
                     ] })
                   ]
                 }
@@ -2621,35 +2654,35 @@ function $n({ style: t, sort: e, section: o, ...n }) {
           ))
         }
       ),
-      /* @__PURE__ */ r(
-        f,
+      /* @__PURE__ */ n(
+        g,
         {
           sx: {
             textAlign: "center",
             mt: 2
           },
-          children: d.total > d.list.length ? /* @__PURE__ */ r(V, { variant: "outlined", color: "secondary", onClick: y, loading: u.current, children: "More" }) : /* @__PURE__ */ r(V, { variant: "outlined", color: "secondary", disabled: !0, children: "No More" })
+          children: d.total > d.list.length ? /* @__PURE__ */ n(V, { variant: "outlined", color: "secondary", onClick: v, loading: m.current, children: "More" }) : /* @__PURE__ */ n(V, { variant: "outlined", color: "secondary", disabled: !0, children: "No More" })
         }
       )
-    ] }) : /* @__PURE__ */ r(
-      f,
+    ] }) : /* @__PURE__ */ n(
+      g,
       {
         sx: {
           p: 2,
           textAlign: "center"
         },
-        children: /* @__PURE__ */ r(de, { size: 24 })
+        children: /* @__PURE__ */ n(de, { size: 24 })
       }
     )
   ] });
 }
-const Mt = ct`
+const Mt = dt`
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   overflow: hidden;
   text-overflow: ellipsis;
-`, Cn = C(ce)`
+`, $r = $(ce)`
   border: 1px solid #e0e0e0;
   background-color: transparent;
   cursor: pointer;
@@ -2669,64 +2702,64 @@ const Mt = ct`
       max-height: 50vw;
     }
   }
-`, Sn = {
-  iframe: Jo,
-  section: wn,
-  "section-card-list": Do,
-  toc: $n,
-  "custom-component": Go,
-  "layout-block": un
+`, Cr = {
+  iframe: Yo,
+  section: vr,
+  "section-card-list": Go,
+  toc: _r,
+  "custom-component": Ho,
+  "layout-block": dr
 };
-function Bn({
+function Sr({
   id: t,
   type: e,
   mode: o,
-  config: n,
+  config: r,
   section: i,
   ignorePageMetaStyle: a,
-  page: c,
+  page: l,
   ...s
 }) {
-  const l = Sn[e], { getPageMetaStyle: d } = so(), m = S(() => {
-    const { height: p, ...y } = n;
-    return e === "layout-block" && (y.onBlockRender = (x) => {
-      const v = {
-        ...n?.dev,
+  const c = Cr[e], { getPageMetaStyle: d } = lo(), u = S(() => {
+    const { height: p, ...v } = r;
+    return e === "layout-block" && (v.onBlockRender = (x) => {
+      const w = {
+        ...r?.dev,
         ...x?.config?.dev
-      }, { defaultLocale: k } = v, _ = {
-        ...pt(n, ["locale", "editing"]),
+      }, { defaultLocale: k } = w, C = {
+        ...Z(r, ["locale", "editing"]),
         ...x?.config,
-        dev: v
-      }, { locale: M } = _;
-      let B = c?.dataSource?.[x?.id]?.[M];
-      return he(B) && (B = c?.dataSource?.[x?.id]?.[k ?? "en"]), /* @__PURE__ */ r(
-        Bn,
+        dev: w
+      }, { locale: N } = C;
+      let R = l?.dataSource?.[x?.id]?.[N];
+      return he(R) && (R = l?.dataSource?.[x?.id]?.[k ?? "en"]), /* @__PURE__ */ n(
+        Sr,
         {
           ...x,
           config: {
             ...x?.section?.properties,
-            ...B,
-            ..._
+            ...R,
+            ...C
           },
-          page: c,
+          page: l,
           ignorePageMetaStyle: !0
         }
       );
-    }), y;
-  }, [n, e]), u = S(() => {
+    }), v;
+  }, [r, e]), m = S(() => {
     const p = {};
-    return e !== "custom-component" && (p.height = n.height), p.sx = a ? void 0 : d("sx"), p.id = `BlockBase-${t}`, p;
-  }, [n.height, a, e, d]), h = l && /* @__PURE__ */ r(l, { mode: o, ...m, id: t, section: i });
-  return h ? /* @__PURE__ */ r(lo, { ...s, ...u, children: h }) : /* @__PURE__ */ r(Nn, { type: e });
+    return e !== "custom-component" && (p.height = r.height), p.sx = a ? void 0 : d("sx"), p.id = `BlockBase-${t}`, p;
+  }, [r.height, a, e, d]), h = c && /* @__PURE__ */ n(c, { mode: o, ...u, id: t, section: i });
+  return h ? /* @__PURE__ */ n(co, { ...s, ...m, children: h }) : /* @__PURE__ */ n(Br, { type: e });
 }
-function Nn({ type: t }) {
-  return /* @__PURE__ */ r(
-    f,
+function Br({ type: t }) {
+  return /* @__PURE__ */ n(
+    g,
     {
       sx: {
         p: 2
       },
-      children: /* @__PURE__ */ w(pe, { icon: /* @__PURE__ */ r(ne, {}), color: "error", children: [
+      children: /* @__PURE__ */ y(pe, { icon: /* @__PURE__ */ n(re, {}), color: "error", children: [
         "Unsupported Block `",
         t,
         "`"
@@ -2735,13 +2768,13 @@ function Nn({ type: t }) {
   );
 }
 export {
-  Bn as B,
-  mr as I,
-  dr as P,
-  hr as S,
-  xr as T,
-  cr as a,
-  pr as b,
-  gr as g,
-  fr as p
+  Sr as B,
+  mn as I,
+  dn as P,
+  hn as S,
+  fn as T,
+  cn as a,
+  pn as b,
+  gn as g,
+  xn as p
 };