@blocklet/pages-kit-inner-components 0.6.17 → 0.6.19

package/lib/es/chunks/{index-DaF8ujCZ.js → index-D3m-37ll.js}

@@ -1,37 +1,37 @@
-import { jsx as r, jsxs as w, Fragment as D } from "react/jsx-runtime";
-import { ErrorOutline as Lt } from "@mui/icons-material";
-import { Box as f, styled as Et, Typography as I, Container as At, useTheme as Tt, useMediaQuery as Ot, Card as Ut, CircularProgress as Ht, Grid as lt, CardMedia as Ft, CardContent as Yt, Alert as Vt } from "@mui/material";
-import Dt from "lodash/isEmpty";
-import nt from "lodash/pick";
-import Jt, { createContext as ft, useMemo as W, useCallback as A, useContext as xt, useState as J, useEffect as T, Fragment as Gt, isValidElement as bt, useRef as rt } from "react";
-import G from "lodash/keyBy";
-import { styled as _, useTheme as yt } from "@arcblock/ux/lib/Theme";
-import { cx as b, css as tt } from "@emotion/css";
-import C from "lodash/omit";
-import { Link as Kt, NavLink as Xt, useNavigate as qt } from "react-router-dom";
-import Qt from "@arcblock/ux/lib/Button";
-import et from "is-uri";
-import { Icon as wt } from "@iconify-icon/react";
-import { e as P, f as N, i as it, l as at } from "./state-C3hsEhCe.js";
-import Zt from "@blocklet/pages-kit/builtin/markdown/markdown-renderer";
-import { useColorConvert as vt } from "@blocklet/pages-kit/contexts/color";
-import { materialDark as te } from "react-syntax-highlighter/dist/esm/styles/prism";
-import ee from "@arcblock/react-hooks/lib/useBrowser";
-import ct from "@arcblock/ux/lib/Colors";
-import { ResponsiveImage as kt, CustomComponentRenderer as oe } from "@blocklet/pages-kit/components";
-import { isGradient as ne, isColorString as re } from "@blocklet/pages-kit/utils/style";
-import _t from "@mui/material/useMediaQuery";
-import { join as Y } from "pathe";
-import { withoutTrailingSlash as Z, isRelative as ie, parseURL as ae } from "ufo";
-import { useMessage as se } from "@blocklet/embed/message";
-import { useLatest as le } from "ahooks";
-import ce from "lodash/isEqual";
-import { EmbedIframe as de } from "@blocklet/embed/react";
-import { useLocaleContext as me } from "@arcblock/ux/lib/Locale/context";
-import pe from "@arcblock/ux/lib/Screenshot";
-import { TwitterTimelineEmbed as ue } from "react-twitter-embed";
-import { useUpdate as he, useMount as ge } from "react-use";
-const $t = "{{CUSTOM_VALUE}}", fe = [
+import { jsx as r, jsxs as w, Fragment as q } from "react/jsx-runtime";
+import { ErrorOutline as Ot } from "@mui/icons-material";
+import { Box as g, styled as Ut, Typography as L, Container as Ft, useTheme as Ht, useMediaQuery as Dt, Card as Gt, CircularProgress as Yt, Grid as ut, CardMedia as Vt, CardContent as Jt, Alert as Kt } from "@mui/material";
+import Xt from "lodash/isEmpty";
+import lt from "lodash/pick";
+import qt, { createContext as vt, useMemo as N, useCallback as F, useContext as kt, useState as Z, useEffect as H, Fragment as Qt, isValidElement as _t, useRef as ct } from "react";
+import j from "lodash/keyBy";
+import { styled as _, useTheme as $t } from "@arcblock/ux/lib/Theme";
+import { cx as x, css as it } from "@emotion/css";
+import B from "lodash/omit";
+import { Link as Zt, NavLink as te, useNavigate as ee } from "react-router-dom";
+import oe from "@arcblock/ux/lib/Button";
+import at from "is-uri";
+import { Icon as St } from "@iconify-icon/react";
+import { e as z, f as M, i as dt, l as mt } from "./state-DSo43FAB.js";
+import ne from "@blocklet/pages-kit/builtin/markdown/markdown-renderer";
+import { useColorConvert as Ct } from "@blocklet/pages-kit/contexts/color";
+import { materialDark as re } from "react-syntax-highlighter/dist/esm/styles/prism";
+import ie from "@arcblock/react-hooks/lib/useBrowser";
+import ht from "@arcblock/ux/lib/Colors";
+import { ResponsiveImage as Nt, CustomComponentRenderer as ae } from "@blocklet/pages-kit/components";
+import { isGradient as se, isColorString as le } from "@blocklet/pages-kit/utils/style";
+import Bt from "@mui/material/useMediaQuery";
+import { join as K } from "pathe";
+import { withoutTrailingSlash as rt, isRelative as ce, parseURL as de } from "ufo";
+import { useMessage as me } from "@blocklet/embed/message";
+import { useLatest as pe } from "ahooks";
+import ue from "lodash/isEqual";
+import { EmbedIframe as he } from "@blocklet/embed/react";
+import { useLocaleContext as ge } from "@arcblock/ux/lib/Locale/context";
+import fe from "@arcblock/ux/lib/Screenshot";
+import { TwitterTimelineEmbed as xe } from "react-twitter-embed";
+import { useUpdate as be, useMount as ye } from "react-use";
+const Mt = "{{CUSTOM_VALUE}}", we = [
   {
     title: "None",
     value: "none",
@@ -52,7 +52,7 @@ const $t = "{{CUSTOM_VALUE}}", fe = [
     value: "large",
     sx: { py: { xs: 7.5, md: 10, lg: 12.5, xl: 15 } }
   }
-], xe = [
+], ve = [
   {
     title: "None",
     value: "none",
@@ -73,7 +73,7 @@ const $t = "{{CUSTOM_VALUE}}", fe = [
     value: "large",
     sx: { py: { xs: 6, md: 9, lg: 9, xl: 11 } }
   }
-], be = [
+], ke = [
   {
     title: "None",
     value: "none",
@@ -94,17 +94,17 @@ const $t = "{{CUSTOM_VALUE}}", fe = [
     value: "large",
     sx: { px: { xs: 2.5, md: 10, lg: 12.5, xl: 15 } }
   }
-], V = (t, e, o) => {
+], X = (t, e, o) => {
   const n = t.breakpoints.values[o];
   return `${e}${n ? ` (${n}px)` : ""}`;
-}, ye = [
+}, _e = [
   {
     title: "100%",
     value: "full",
     sx: { maxWidth: "100%" }
   },
   {
-    title: (t) => V(t, "Small", "sm"),
+    title: (t) => X(t, "Small", "sm"),
     value: "sm",
     sx: {
       maxWidth: (t) => t.breakpoints.values.sm,
@@ -113,17 +113,17 @@ const $t = "{{CUSTOM_VALUE}}", fe = [
     }
   },
   {
-    title: (t) => V(t, "Normal", "md"),
+    title: (t) => X(t, "Normal", "md"),
     value: "md",
     sx: { maxWidth: (t) => t.breakpoints.values.md, width: "100%", mx: "auto" }
   },
   {
-    title: (t) => V(t, "Large", "lg"),
+    title: (t) => X(t, "Large", "lg"),
     value: "lg",
     sx: { maxWidth: (t) => t.breakpoints.values.lg, width: "100%", mx: "auto" }
   },
   {
-    title: (t) => V(t, "Extra Large", "xl"),
+    title: (t) => X(t, "Extra Large", "xl"),
     value: "xl",
     sx: { maxWidth: (t) => t.breakpoints.values.xl, width: "100%", mx: "auto" }
   },
@@ -131,20 +131,64 @@ const $t = "{{CUSTOM_VALUE}}", fe = [
     title: "Custom",
     value: "custom",
     sx: {
-      maxWidth: $t,
+      maxWidth: Mt,
       width: "100%",
       mx: "auto"
     }
   }
-], we = G(fe, "value"), ve = G(xe, "value"), ke = G(be, "value"), _e = G(ye, "value"), $e = /* @__PURE__ */ new Map([
-  ["baseSectionPaddingY", we],
-  ["maxWidth", _e],
-  ["paddingY", ve],
-  ["paddingX", ke]
+], $e = [
+  {
+    title: "None",
+    value: "none",
+    sx: { gap: 0 }
+  },
+  {
+    title: "Small",
+    value: "small",
+    sx: { gap: { xs: 1, md: 2, lg: 2, xl: 3 } }
+  },
+  {
+    title: "Normal",
+    value: "normal",
+    sx: { gap: { xs: 2, md: 4, lg: 4, xl: 6 } }
+  },
+  {
+    title: "Large",
+    value: "large",
+    sx: { gap: { xs: 3, md: 5, lg: 5, xl: 7 } }
+  }
+], Se = [
+  {
+    title: "None",
+    value: "none",
+    sx: { p: 0 }
+  },
+  {
+    title: "Small",
+    value: "small",
+    sx: { p: { xs: 1, md: 2, lg: 2, xl: 3 } }
+  },
+  {
+    title: "Normal",
+    value: "normal",
+    sx: { p: { xs: 2.5, md: 5, lg: 5, xl: 7.5 } }
+  },
+  {
+    title: "Large",
+    value: "large",
+    sx: { p: { xs: 3, md: 6, lg: 6, xl: 9 } }
+  }
+], Ce = j(we, "value"), Ne = j(ve, "value"), Be = j(ke, "value"), Me = j(_e, "value"), Pe = j($e, "value"), Ie = j(Se, "value"), We = /* @__PURE__ */ new Map([
+  ["baseSectionPaddingY", Ce],
+  ["maxWidth", Me],
+  ["paddingY", Ne],
+  ["paddingX", Be],
+  ["layoutBlockGap", Pe],
+  ["layoutBlockPadding", Ie]
 ]);
-function St(t) {
-  const { type: e, value: o, format: n = "sx", defaultValue: i = null } = t, a = $e.get(e);
-  if (!a)
+function Q(t) {
+  const { type: e, value: o, format: n = "sx", defaultValue: i = null } = t, a = We.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]) {
@@ -152,7 +196,7 @@ function St(t) {
     if (c) {
       const d = o.replace("custom:", "");
       try {
-        return JSON.parse(JSON.stringify(l || {}).replaceAll($t, d));
+        return JSON.parse(JSON.stringify(l || {}).replaceAll(Mt, d));
       } catch {
       }
     }
@@ -160,41 +204,41 @@ function St(t) {
   }
   return i;
 }
-const Ct = ft({
+const Pt = vt({
   page: null,
   getPageMeta: () => ({}),
   getPageMetaStyle: () => ({})
 });
-function Se() {
-  return xt(Ct);
+function Le() {
+  return kt(Pt);
 }
-function hn({
+function Cn({
   page: t,
   children: e,
   defaultLocale: o = "en",
   currentLocale: n
 }) {
-  const i = W(() => t ? JSON.parse(JSON.stringify(t)) : null, [JSON.stringify(t)]), a = A(() => {
+  const i = N(() => t ? JSON.parse(JSON.stringify(t)) : null, [JSON.stringify(t)]), a = F(() => {
     if (!i) return {};
     const l = n || o;
     return i.locales?.[l] ?? {};
-  }, [i, o, n]), c = A(
+  }, [i, o, n]), c = F(
     (l = "sx") => {
       const d = a();
       return !d || !d.style ? {} : Object.entries(d.style || {}).reduce((m, [h, u]) => {
         if (!u) return m;
-        const y = `${h}Custom`;
-        d.style[y];
-        const x = St({
+        const b = `${h}Custom`;
+        d.style[b];
+        const f = Q({
           type: h,
           value: u,
           format: l
         });
-        return x ? { ...m, ...x } : m;
+        return f ? { ...m, ...f } : m;
       }, {});
     },
     [a]
-  ), s = W(
+  ), s = N(
     () => ({
       page: i,
       getPageMeta: a,
@@ -202,39 +246,39 @@ function hn({
     }),
     [i, a, c]
   );
-  return /* @__PURE__ */ r(Ct.Provider, { value: s, children: e });
+  return /* @__PURE__ */ r(Pt.Provider, { value: s, children: e });
 }
-const K = ["editing", "height", "locale", "dev", "sx"];
-function Ce(t) {
+const tt = ["editing", "height", "locale", "dev", "sx"];
+function ze(t) {
   const { className: e, ...o } = t;
-  return /* @__PURE__ */ r(Ne, { ...o, className: b("BlockBase-root", e) });
+  return /* @__PURE__ */ r(Re, { ...o, className: x("BlockBase-root", e) });
 }
-const Ne = _(f)`
+const Re = _(g)`
   position: relative;
   color: ${({ theme: t }) => t.palette.text.primary};
-`, Nt = ft({
+`, It = vt({
   pages: [],
   project: void 0
-}), { Provider: gn, Consumer: fn } = Nt;
-function Bt() {
-  return xt(Nt);
+}), { Provider: Nn, Consumer: Bn } = It;
+function Wt() {
+  return kt(It);
 }
-function Be({ icon: t, ...e }) {
-  return /* @__PURE__ */ r(wt, { icon: t, ...e, ref: null });
+function je({ icon: t, ...e }) {
+  return /* @__PURE__ */ r(St, { icon: t, ...e, ref: null });
 }
-function Me({ icon: t, className: e = "", size: o = "1rem", ...n }) {
-  return /* @__PURE__ */ r(Ie, { component: Be, className: b("css-icon", e), size: o, ...n, icon: t });
+function Ae({ icon: t, className: e = "", size: o = "1rem", ...n }) {
+  return /* @__PURE__ */ r(Ee, { component: je, className: x("css-icon", e), size: o, ...n, icon: t });
 }
-const Ie = _(f)`
+const Ee = _(g)`
   &.css-icon {
     display: inline-block;
     width: ${({ size: t }) => t};
     height: ${({ size: t }) => t};
   }
 `;
-function We({ icon: t, className: e = "", size: o = "1rem", imageMeta: n, ...i }) {
-  const a = P(N(t), 540), [c, s] = J(!1), l = yt();
-  return c ? /* @__PURE__ */ r(Me, { icon: "i-mdi:image", color: l.palette.grey[500], size: o, className: e, ...i }) : /* @__PURE__ */ r(Pe, { className: b("image-icon", e), size: o, ...i, children: /* @__PURE__ */ r(
+function Te({ icon: t, className: e = "", size: o = "1rem", imageMeta: n, ...i }) {
+  const a = z(M(t), 540), [c, s] = Z(!1), l = $t();
+  return c ? /* @__PURE__ */ r(Ae, { icon: "i-mdi:image", color: l.palette.grey[500], size: o, className: e, ...i }) : /* @__PURE__ */ r(Oe, { className: x("image-icon", e), size: o, ...i, children: /* @__PURE__ */ r(
     "img",
     {
       className: "image-icon__image",
@@ -247,7 +291,7 @@ function We({ icon: t, className: e = "", size: o = "1rem", imageMeta: n, ...i }
     }
   ) });
 }
-const Pe = _(f)`
+const Oe = _(g)`
   display: inline-block;
   width: ${({ size: t }) => t};
   height: ${({ size: t }) => t};
@@ -256,33 +300,33 @@ const Pe = _(f)`
     height: 100%;
     width: 100%;
   }
-`, st = (t) => typeof t == "string" && /^[\w-_]+:[\w-_]+$/.test(t);
-function ot({ icon: t, size: e = "1rem", imageMeta: o, ...n }) {
+`, pt = (t) => typeof t == "string" && /^[\w-_]+:[\w-_]+$/.test(t);
+function st({ icon: t, size: e = "1rem", imageMeta: o, ...n }) {
   const i = window.isNaN(e) ? e : `${e}px`;
-  return st(t) ? /* @__PURE__ */ r(wt, { icon: t }) : /* @__PURE__ */ r(je, { component: We, imageMeta: o, className: "base-icon", icon: t, size: i, ...n });
+  return pt(t) ? /* @__PURE__ */ r(St, { icon: t }) : /* @__PURE__ */ r(Ue, { component: Te, imageMeta: o, className: "base-icon", icon: t, size: i, ...n });
 }
-const je = _(f)`
+const Ue = _(g)`
   flex-shrink: 0;
 `;
-function E({ text: t, children: e, icon: o = "", endIcon: n, color: i = "primary", link: a = "", href: c = "", ...s }) {
-  const l = o ? /* @__PURE__ */ r(ot, { icon: o }) : null, d = n ? /* @__PURE__ */ r(ot, { icon: n }) : null, p = a || c, m = { ...s };
-  return p && (m.href = p, et(p) && (m.target = m.target || "_blank")), /* @__PURE__ */ r(Qt, { startIcon: l, endIcon: d, color: i, ...m, children: t || e });
+function U({ text: t, children: e, icon: o = "", endIcon: n, color: i = "primary", link: a = "", href: c = "", ...s }) {
+  const l = o ? /* @__PURE__ */ r(st, { icon: o }) : null, d = n ? /* @__PURE__ */ r(st, { icon: n }) : null, p = a || c, m = { ...s };
+  return p && (m.href = p, at(p) && (m.target = m.target || "_blank")), /* @__PURE__ */ r(oe, { startIcon: l, endIcon: d, color: i, ...m, children: t || e });
 }
-function Mt({ editing: t, text: e, ...o }) {
-  const { pages: n = [] } = Bt(), i = n.find((a) => a.id === (o.link || o.linkId));
+function Lt({ editing: t, text: e, ...o }) {
+  const { pages: n = [] } = Wt(), i = n.find((a) => a.id === (o.link || o.linkId));
   if (t)
-    return /* @__PURE__ */ r(E, { ...C(o, ["link", "linkId"]), children: e });
+    return /* @__PURE__ */ r(U, { ...B(o, ["link", "linkId"]), children: e });
   if (i) {
     const a = i.path || "/";
-    return /* @__PURE__ */ r(Kt, { to: a, children: /* @__PURE__ */ r(E, { ...C(o, ["link", "linkId"]), children: e }) });
+    return /* @__PURE__ */ r(Zt, { to: a, children: /* @__PURE__ */ r(U, { ...B(o, ["link", "linkId"]), children: e }) });
   }
-  return /* @__PURE__ */ r(E, { ...C(o, "linkId"), children: e });
+  return /* @__PURE__ */ r(U, { ...B(o, "linkId"), children: e });
 }
-function j({ actions: t, center: e, className: o, align: n }) {
+function A({ actions: t, center: e, className: o, align: n }) {
   return t && t?.length ? /* @__PURE__ */ r(
-    f,
+    g,
     {
-      className: b(
+      className: x(
         "flex gap-4 flex-wrap",
         "lg:flex-row lg:gap-8",
         (e || n === "center") && "justify-center",
@@ -295,7 +339,7 @@ function j({ actions: t, center: e, className: o, align: n }) {
     }
   ) : null;
 }
-const ze = "section", Re = Et(f)`
+const Fe = "section", He = Ut(g)`
   overflow: hidden;
 
   .section__title {
@@ -346,7 +390,7 @@ const ze = "section", Re = Et(f)`
       margin-bottom: 0.5rem;
     }
   }
-  @media (min-width: ${({ theme: t }) => t.breakpoints.values[ze]}px) {
+  @media (min-width: ${({ theme: t }) => t.breakpoints.values[Fe]}px) {
     .section__tag {
       margin-bottom: 32px;
     }
@@ -358,7 +402,7 @@ const ze = "section", Re = Et(f)`
     }
   }
 `;
-function X({
+function et({
   title: t,
   description: e,
   descriptionMarkdown: o,
@@ -373,72 +417,72 @@ function X({
   center: m,
   logo: h,
   titleAppearance: u,
-  descriptionAppearance: y,
-  ...x
+  descriptionAppearance: b,
+  ...f
 }) {
-  const v = vt();
+  const y = Ct();
   if (!t && !e && !n && !p && !d && !c && !s && !h) return null;
-  const g = Math.max(Math.min(5, l + 1), 1), k = {
+  const k = Math.max(Math.min(5, l + 1), 1), $ = {
     1: "xl:!text-3xl lg:!text-2xl md:!text-xl",
     2: "xl:!text-2xl lg:!text-xl md:!text-lg",
     3: "xl:!text-2xl lg:!text-xl md:!text-lg",
     4: "xl:!text-xl lg:!text-lg md:!text-md",
     5: "xl:!text-lg md:!text-md sm:!text-sm",
     6: "!text-sm"
-  }, S = l === 0 ? "big" : `h${g}`, $ = l === 0;
-  return /* @__PURE__ */ w(Re, { className: b("base-info", "lg:text-left", m && "!text-center", i), ...x, children: [
+  }, C = l === 0 ? "big" : `h${k}`, S = l === 0;
+  return /* @__PURE__ */ w(He, { className: x("base-info", "lg:text-left", m && "!text-center", i), ...f, children: [
     c && /* @__PURE__ */ r("div", { children: c }),
-    (d || p) && /* @__PURE__ */ r("div", { className: b("section__tag", a?.tag || a?.badge), children: d || p }),
+    (d || p) && /* @__PURE__ */ r("div", { className: x("section__tag", a?.tag || a?.badge), children: d || p }),
     h && /* @__PURE__ */ r("img", { className: "w-[120px] m-auto mb-8", src: h, alt: "info", loading: "lazy" }),
     t && /* @__PURE__ */ r(
-      I,
+      L,
       {
         sx: {
           whiteSpace: "pre-wrap",
           mb: e ? "2vw" : 0,
-          ...u?.color && { color: `${v(u.color)} !important` }
+          ...u?.color && { color: `${y(u.color)} !important` }
         },
-        className: b(
+        className: x(
           "section__title",
           "text-gray-800",
           "dark:text-gray-50",
           a.title,
           "page-kit-section__title",
-          $ ? "" : "section__title_non_big"
+          S ? "" : "section__title_non_big"
         ),
         component: `h${Math.max(l, 1)}`,
-        variant: S,
+        variant: C,
         children: t
       }
     ),
     e && (o ? /* @__PURE__ */ r(
-      f,
+      g,
       {
         sx: {
-          ...y?.color && { color: `${v(y.color)} !important` }
+          ...b?.color && { color: `${y(b.color)} !important` }
         },
-        className: b(
+        className: x(
           "section__description",
           "text-gray-800",
           "dark:text-gray-100",
-          k[g],
+          $[k],
           a.description,
           "page-kit-section__description"
         ),
-        children: /* @__PURE__ */ r(Zt, { codeOptions: { showActionButton: !1, theme: te }, children: e })
+        children: /* @__PURE__ */ r(ne, { codeOptions: { showActionButton: !1, theme: re }, children: e })
       }
     ) : /* @__PURE__ */ r(
-      I,
+      L,
       {
         sx: {
           whiteSpace: "pre-wrap",
-          ...y?.color && { color: `${v(y.color)} !important` }
+          ...b?.color && { color: `${y(b.color)} !important` }
         },
-        className: b(
+        className: x(
           "section__description",
           "text-gray-800",
           "dark:text-gray-100",
-          k[g],
+          $[k],
           a.description,
           "page-kit-section__description"
         ),
@@ -448,11 +492,11 @@ function X({
         children: e
       }
     )),
-    /* @__PURE__ */ r(j, { actions: n, center: m, className: "mt-8" }),
+    /* @__PURE__ */ r(A, { actions: n, center: m, className: "mt-8" }),
     s && /* @__PURE__ */ r("div", { children: s })
   ] });
 }
-const q = [
+const ot = [
   "actions",
   "append",
   "badge",
@@ -467,28 +511,28 @@ const q = [
   "titleAppearance",
   "descriptionAppearance"
 ];
-function Le() {
+function De() {
   const t = navigator.userAgent.toLowerCase();
   return t.includes("safari") && !t.includes("chrome");
 }
-function Ee(t = "") {
+function Ge(t = "") {
   if (t.startsWith("data:image/svg+xml,")) return !0;
   const e = /^(((ht|f)tps?):\/\/)?([^!@#$%^&*?.\s-]([^!@#$%^&*?.\s]{0,63}[^!@#$%^&*?.\s])?\.)+[a-z]{2,6}\/?/, o = /^(\/|\.\/|\.\.\/)(?:[^/]+\/)*[^/]+$/;
   return e.test(t) || o.test(t);
 }
-function L(t) {
+function O(t) {
   return t?.endsWith(".mp4") || t?.endsWith(".m4v") || t?.endsWith(".webm");
 }
-function Ae(t) {
+function Ye(t) {
   return t?.endsWith(".mp4") || t?.endsWith(".m4v") ? "video/mp4" : t?.endsWith(".webm") ? "video/webm" : void 0;
 }
-function Te(t) {
+function Ve(t) {
   let e = {};
-  return typeof t == "string" ? ne(t) ? e.image = t : (e.image = N(t), re(t) && (e.color = t, e.image = "")) : e = t, e;
+  return typeof t == "string" ? se(t) ? e.image = t : (e.image = M(t), le(t) && (e.color = t, e.image = "")) : e = t, e;
 }
-function Oe() {
-  const [t, e] = J(Date.now());
-  return T(() => {
+function Je() {
+  const [t, e] = Z(Date.now());
+  return H(() => {
     const o = () => {
       e(Date.now());
     };
@@ -497,14 +541,14 @@ function Oe() {
     };
   }, []), t;
 }
-function dt(t, e, o, n, i) {
+function gt(t, e, o, n, i) {
   let a = null;
-  const { color: c = "", image: s } = Te(e);
-  if (s && Ee(s)) {
+  const { color: c = "", image: s } = Ve(e);
+  if (s && Ge(s)) {
     delete o.backgroundColor;
-    const l = !(t.mobile.apple.device || Le()) && L(s), d = L(s) && n ? P(N(n), 1200, "quality") : "";
+    const l = !(t.mobile.apple.device || De()) && O(s), d = O(s) && n ? z(M(n), 1200, "quality") : "";
     l ? a = /* @__PURE__ */ r(
-      f,
+      g,
       {
         component: "video",
         className: "section-bg",
@@ -514,7 +558,7 @@ function dt(t, e, o, n, i) {
         controls: !1,
         playsInline: !0,
         poster: d,
-        src: L(s) ? s : P(s, 1200, "quality"),
+        src: O(s) ? s : z(s, 1200, "quality"),
         sx: {
           width: "100%",
           position: "absolute",
@@ -528,9 +572,9 @@ function dt(t, e, o, n, i) {
       },
       s
     ) : a = /* @__PURE__ */ r(
-      kt,
+      Nt,
       {
-        src: L(s) && n ? d : s,
+        src: O(s) && n ? d : s,
         sizesAttr: {
           sm: 600,
           md: 900,
@@ -556,9 +600,9 @@ function dt(t, e, o, n, i) {
   } else s ? o.backgroundImage = `${s} !important` : c && (o.backgroundColor = `${c} !important`);
   return a;
 }
-function Ue({ autoWidth: t, children: e, ...o }) {
+function Ke({ autoWidth: t, children: e, ...o }) {
   return t ? /* @__PURE__ */ r(
-    f,
+    g,
     {
       ...o,
       sx: [
@@ -569,9 +613,9 @@ function Ue({ autoWidth: t, children: e, ...o }) {
       ],
       children: e
     }
-  ) : /* @__PURE__ */ r(At, { ...o, children: e });
+  ) : /* @__PURE__ */ r(Ft, { ...o, children: e });
 }
-function Q({
+function nt({
   dark: t = !1,
   children: e,
   className: o,
@@ -582,30 +626,30 @@ function Q({
   type: s,
   ...l
 }) {
-  const d = { ...n }, p = _t((u) => u.breakpoints.down("md"));
-  t && (d.color = ct.common.white, d.backgroundColor = `${ct.grey[900]} !important`), i.show && (d.display = "flex");
-  const m = W(() => !Number(l.boxMaxWidth) || p ? {
+  const d = { ...n }, p = Bt((u) => u.breakpoints.down("md"));
+  t && (d.color = ht.common.white, d.backgroundColor = `${ht.grey[900]} !important`), i.show && (d.display = "flex");
+  const m = N(() => !Number(l.boxMaxWidth) || p ? {
     width: "100%"
   } : s === "wall" && l.boxMaxWidth ? {
     maxWidth: `${l.boxMaxWidth}px !important`,
     width: "100%"
   } : {
     width: "100%"
-  }, [l.boxMaxWidth, p, s]), h = St({
+  }, [l.boxMaxWidth, p, s]), h = Q({
     type: "baseSectionPaddingY",
     value: a || "normal",
     // section default is normal
     defaultValue: ""
   });
   return /* @__PURE__ */ r(
-    He,
+    Xe,
     {
       component: "section",
       styles: { ...d, ...h },
-      className: b("base-section", "px-2 md:px-5 lg:px-5 xl:px-10", o, {
+      className: x("base-section", "px-2 md:px-5 lg:px-5 xl:px-10", o, {
         dark: t
       }),
-      ...C(
+      ...B(
         l,
         "hoverStyle",
         "boxMaxWidth",
@@ -616,11 +660,11 @@ function Q({
         "titleAppearance",
         "descriptionAppearance"
       ),
-      children: /* @__PURE__ */ r(Ue, { autoWidth: l?.autoWidth, className: b("section-content h-full"), sx: m, children: i.show ? /* @__PURE__ */ r(It, { ...c, boxed: i, children: e }) : e })
+      children: /* @__PURE__ */ r(Ke, { autoWidth: l?.autoWidth, className: x("section-content h-full"), sx: m, children: i.show ? /* @__PURE__ */ r(zt, { ...c, boxed: i, children: e }) : e })
     }
   );
 }
-function It({
+function zt({
   background: t = "",
   backgroundVideoPoster: e,
   children: o,
@@ -630,30 +674,30 @@ function It({
   styles: c = {},
   ...s
 }) {
-  const l = { ...c, ...n }, d = vt();
+  const l = { ...c, ...n }, d = Ct();
   let p = null;
-  const m = _t((y) => y.breakpoints.up("sm")), h = ee(), u = Oe();
-  return t && (p = dt(
+  const m = Bt((b) => b.breakpoints.up("sm")), h = ie(), u = Je();
+  return t && (p = gt(
     h,
     typeof t == "string" ? d(t) : t,
     l,
     e,
     u
-  )), i.show && (l.borderRadius = "10px", l.padding === void 0 && (l.padding = m ? "50px" : "20px"), i?.border && (l.border = "1px solid #c0c0c0"), i?.background && (p = dt(
+  )), i.show && (l.borderRadius = "10px", l.padding === void 0 && (l.padding = m ? "50px" : "20px"), i?.border && (l.border = "1px solid #c0c0c0"), i?.background && (p = gt(
     h,
     typeof i?.background == "string" ? d(i?.background) : i?.background,
     l,
     i?.backgroundVideoPoster,
     u
   ))), /* @__PURE__ */ w(
-    f,
+    g,
     {
       ...s,
       sx: {
         ...l,
         ...p ? { position: "relative", overflow: "hidden", zIndex: 0 } : {}
       },
-      className: b(a, i?.boxShadow && "shadow-xl"),
+      className: x(a, i?.boxShadow && "shadow-xl"),
       children: [
         p,
         o
@@ -661,7 +705,7 @@ function It({
     }
   );
 }
-const He = _(It)`
+const Xe = _(zt)`
   &:nth-of-type(even) {
     background: #f8f8f8;
   }
@@ -678,15 +722,15 @@ const He = _(It)`
     }
   }
 `;
-function Wt(t) {
-  if (t.type === Gt) {
-    const o = (t.props.children || []).filter((n) => bt(n));
-    return o.length === 1 ? Wt(o[0]) : o.length > 1;
+function Rt(t) {
+  if (t.type === Qt) {
+    const o = (t.props.children || []).filter((n) => _t(n));
+    return o.length === 1 ? Rt(o[0]) : o.length > 1;
   }
   return Array.isArray(t);
 }
-const M = "&>*";
-function Pt({ children: t, col: e, gap: o, className: n, align: i, sx: a, type: c, ...s } = {
+const I = "&>*";
+function jt({ children: t, col: e, gap: o, className: n, align: i, sx: a, type: c, ...s } = {
   children: null,
   className: "",
   col: 3,
@@ -695,7 +739,7 @@ function Pt({ children: t, col: e, gap: o, className: n, align: i, sx: a, type:
   align: "center",
   type: "default"
 }) {
-  const l = yt(), d = Number(Math.floor(100 / e * 100) / 100), p = {
+  const l = $t(), d = Number(Math.floor(100 / e * 100) / 100), p = {
     center: "justify-center items-center",
     left: "justify-start items-center",
     right: "justify-end items-center",
@@ -713,43 +757,43 @@ function Pt({ children: t, col: e, gap: o, className: n, align: i, sx: a, type:
     5: 3,
     6: 3
   }[e] || 0);
-  Wt(t) || (u = 0);
-  const x = (e - 1) * u / e;
-  let v = { ...a, gap: `${u}rem` };
-  const g = { [M]: { width: "100%" } }, k = {}, S = {}, $ = {};
-  switch (g.gap = "1rem", k.gap = `${u / 2}rem`, e) {
+  Rt(t) || (u = 0);
+  const f = (e - 1) * u / e;
+  let y = { ...a, gap: `${u}rem` };
+  const k = { [I]: { width: "100%" } }, $ = {}, C = {}, S = {};
+  switch (k.gap = "1rem", $.gap = `${u / 2}rem`, e) {
     case 3:
     case 4:
-      k[M] = {
+      $[I] = {
         width: `calc(50% - ${u / 2}rem)`
       };
       break;
     case 5:
     case 6:
-      g[M] = {
+      k[I] = {
         width: `calc(50% - ${u / 2 / 2}rem)`
-      }, k[M] = {
+      }, $[I] = {
         width: `calc(50% - ${u / 2 / 2}rem)`
-      }, S[M] = {
+      }, C[I] = {
         width: `calc(33.33% - ${u * 2 / 3}rem)`
       };
       break;
   }
-  return v[M] = { width: `calc(${d}% - ${x}rem)` }, v[`@media (max-width: ${l.breakpoints.values.xl}px)`] = $, v[`@media (max-width: ${l.breakpoints.values.lg}px)`] = S, v[`@media (max-width: ${l.breakpoints.values.md}px)`] = k, v[`@media (max-width: ${l.breakpoints.values.sm}px)`] = g, c === "wall" && (v = { ...a, gap: `${u}rem` }, v[M] = { width: `calc(${d}% - ${x}rem)` }, g[M] = { width: `calc(45% - ${u / 2 / 2}rem)` }, v[`@media (max-width: ${l.breakpoints.values.sm}px)`] = g), /* @__PURE__ */ r(f, { className: b("flex flex-wrap flex-row h-full", m, n), sx: v, ...s, children: t });
+  return y[I] = { width: `calc(${d}% - ${f}rem)` }, y[`@media (max-width: ${l.breakpoints.values.xl}px)`] = S, y[`@media (max-width: ${l.breakpoints.values.lg}px)`] = C, y[`@media (max-width: ${l.breakpoints.values.md}px)`] = $, y[`@media (max-width: ${l.breakpoints.values.sm}px)`] = k, c === "wall" && (y = { ...a, gap: `${u}rem` }, y[I] = { width: `calc(${d}% - ${f}rem)` }, k[I] = { width: `calc(45% - ${u / 2 / 2}rem)` }, y[`@media (max-width: ${l.breakpoints.values.sm}px)`] = k), /* @__PURE__ */ r(g, { className: x("flex flex-wrap flex-row h-full", m, n), sx: y, ...s, children: t });
 }
-function z({ type: t = "", icon: e = "", size: o = "3rem", className: n = "", ...i }) {
+function E({ type: t = "", icon: e = "", size: o = "3rem", className: n = "", ...i }) {
   return /* @__PURE__ */ r(
-    ot,
+    st,
     {
       icon: e || t,
       size: o,
-      className: b("content-icon", n),
+      className: x("content-icon", n),
       ...i,
       color: typeof i.color > "u" ? "inherit" : i.color
     }
   );
 }
-function Fe({
+function qe({
   to: t,
   base: e,
   children: o,
@@ -760,33 +804,33 @@ function Fe({
   useRouterLink: s,
   ...l
 }) {
-  const { pages: d = [], locale: p = "" } = {}, m = e ? Y("/", e) : e || "";
-  let h = a === "auto" ? "_self" : a, u = Y(m, t);
-  const y = c ? et(u) : !1;
+  const { pages: d = [], locale: p = "" } = {}, m = e ? K("/", e) : e || "";
+  let h = a === "auto" ? "_self" : a, u = K(m, t);
+  const b = c ? at(u) : !1;
   if (e)
-    return u = Y(m, p, t), /* @__PURE__ */ r(
+    return u = K(m, p, t), /* @__PURE__ */ r(
       "a",
       {
         className: `no-underline ${n}`,
-        href: Z(u),
+        href: rt(u),
         rel: "noreferrer noopener",
         target: h,
         ...l,
         children: o
       }
     );
-  if (et(t))
+  if (at(t))
     a === "auto" && (h = "_blank"), u = t;
   else {
-    ie(u) && (u = Y(window.location.pathname, u));
-    const x = ae(`${window.location.origin}${u}`), v = d.some((g) => g.pathname === x.pathname);
-    if (s || v)
+    ce(u) && (u = K(window.location.pathname, u));
+    const f = de(`${window.location.origin}${u}`), y = d.some((k) => k.pathname === f.pathname);
+    if (s || y)
       return /* @__PURE__ */ r(
-        Xt,
+        te,
         {
           end: !0,
-          to: Z(u),
-          className: ({ isActive: g }) => b(n, g ? i : ""),
+          to: rt(u),
+          className: ({ isActive: k }) => x(n, k ? i : ""),
           ...l,
           children: o
         }
@@ -796,18 +840,18 @@ function Fe({
     "a",
     {
       className: `no-underline ${n}`,
-      href: Z(u),
+      href: rt(u),
       rel: "noreferrer noopener",
       target: h,
       ...l,
       children: [
         o,
-        y && /* @__PURE__ */ r(z, { icon: "i-mdi:arrow-top-right", size: "0.9em", className: "smart-link__mark", style: { marginLeft: 5 } })
+        b && /* @__PURE__ */ r(E, { icon: "i-mdi:arrow-top-right", size: "0.9em", className: "smart-link__mark", style: { marginLeft: 5 } })
       ]
     }
   );
 }
-function O({
+function D({
   prepend: t,
   append: e,
   children: o,
@@ -817,22 +861,22 @@ function O({
   ...c
 }) {
   let s = {};
-  const { pages: l = [] } = Bt(), d = l.find((h) => h.id === c.link), p = !o || Jt.Children.toArray(o).every((h) => h === null);
+  const { pages: l = [] } = Wt(), d = l.find((h) => h.id === c.link), p = !o || qt.Children.toArray(o).every((h) => h === null);
   c.link && (s = {
-    component: Fe,
+    component: qe,
     to: d?.path || c.link,
     useRouterLink: !0
   });
-  const m = Tt();
+  const m = Ht();
   return /* @__PURE__ */ w(
-    Ye,
+    Qe,
     {
-      className: b("base-card card", { dark: i, "border-transparent": !a }, n),
+      className: x("base-card card", { dark: i, "border-transparent": !a }, n),
       sx: {
         borderColor: m.palette.divider
       },
       ...s,
-      ...C(c, ["listType", "dark", "iconColor", "link", "hoverStyle", "imageSize"]),
+      ...B(c, ["listType", "dark", "iconColor", "link", "hoverStyle", "imageSize"]),
       children: [
         t,
         !p && /* @__PURE__ */ r("div", { className: "card__body", children: o }),
@@ -841,7 +885,7 @@ function O({
     }
   );
 }
-const Ye = _(f)`
+const Qe = _(g)`
   &.base-card {
     text-align: left;
     border-width: 1px;
@@ -857,18 +901,18 @@ const Ye = _(f)`
     padding: 15px 15px;
   }
 `;
-function U({
+function G({
   align: t = "left",
   title: e,
   titleProps: o = {},
   description: n,
   descriptionProps: i = {}
 }) {
-  return /* @__PURE__ */ w(D, { children: [
+  return /* @__PURE__ */ w(q, { children: [
     e && /* @__PURE__ */ r(
-      I,
+      L,
       {
-        className: b("card__title text-gray-800", "dark:text-gray-50"),
+        className: x("card__title text-gray-800", "dark:text-gray-50"),
         component: "h5",
         variant: "h5",
         gutterBottom: !0,
@@ -878,9 +922,9 @@ function U({
       }
     ),
     n && /* @__PURE__ */ r(
-      I,
+      L,
       {
-        className: b("card__description", "text-gray-500", "dark:text-gray-400"),
+        className: x("card__description", "text-gray-500", "dark:text-gray-400"),
         component: "div",
         variant: "body1",
         gutterBottom: !0,
@@ -891,7 +935,7 @@ function U({
     )
   ] });
 }
-function Ve({
+function Ze({
   image: t,
   title: e,
   description: o,
@@ -904,14 +948,14 @@ function Ve({
   align: d,
   ...p
 }) {
-  const m = st(t), h = P(N(t), 540);
+  const m = pt(t), h = z(M(t), 540);
   return /* @__PURE__ */ w(
-    De,
+    to,
     {
       className: "card-article",
       ...p,
       prepend: /* @__PURE__ */ r("div", { className: "card__image__wrap", children: m && t ? /* @__PURE__ */ r(
-        f,
+        g,
         {
           sx: {
             position: "absolute",
@@ -923,7 +967,7 @@ function Ve({
             alignItems: "center",
             justifyContent: "center"
           },
-          children: /* @__PURE__ */ r(z, { icon: t, color: "primary.main" })
+          children: /* @__PURE__ */ r(E, { icon: t, color: "primary.main" })
         }
       ) : h && /* @__PURE__ */ r(
         "img",
@@ -940,7 +984,7 @@ function Ve({
       ) }),
       children: [
         e || o ? /* @__PURE__ */ r(
-          U,
+          G,
           {
             align: d,
             title: e,
@@ -949,12 +993,12 @@ function Ve({
             descriptionProps: s
           }
         ) : null,
-        l?.length ? /* @__PURE__ */ r(j, { align: d, actions: l, className: "mt-4" }) : null
+        l?.length ? /* @__PURE__ */ r(A, { align: d, actions: l, className: "mt-4" }) : null
       ]
     }
   );
 }
-const De = _(O)`
+const to = _(D)`
   ${(t) => t.hoverStyle === "none" ? "" : t.link ? `transition: box-shadow ease .3s;
               &:hover {
                 box-shadow: 0 0 10px rgba(95, 142, 244, 0.42);
@@ -988,8 +1032,8 @@ const De = _(O)`
     height: 100%;
     object-position: top center;
   }
-`, mt = "section";
-function pt({
+`, ft = "section";
+function xt({
   title: t,
   image: e,
   imageMeta: o,
@@ -1000,9 +1044,9 @@ function pt({
   className: s = "",
   ...l
 }) {
-  return /* @__PURE__ */ w(Je, { className: b("card", `list-type-${c}`, s), align: a, ...l, children: [
+  return /* @__PURE__ */ w(eo, { className: x("card", `list-type-${c}`, s), align: a, ...l, children: [
     e && /* @__PURE__ */ r(
-      z,
+      E,
       {
         icon: e,
         color: "primary.main",
@@ -1010,18 +1054,18 @@ function pt({
         imageMeta: o
       }
     ),
-    t || n ? /* @__PURE__ */ r(U, { align: a, title: t, description: n }) : null,
-    i?.length ? /* @__PURE__ */ r(j, { align: a, actions: i, className: "mt-4" }) : null
+    t || n ? /* @__PURE__ */ r(G, { align: a, title: t, description: n }) : null,
+    i?.length ? /* @__PURE__ */ r(A, { align: a, actions: i, className: "mt-4" }) : null
   ] });
 }
-const Je = _(O)`
+const eo = _(D)`
   padding: 5vw 4vw;
   box-sizing: border-box;
   /* min-height: 320px; */
   color: inherit !important;
   border-radius: 0.5rem;
   /* ${({ dark: t, theme: e }) => `background-color:${t ? e.palette.grey[900] : e.palette.common.white};`} */
-  @media (max-width: ${({ theme: t }) => t.breakpoints.values[mt]}px) {
+  @media (max-width: ${({ theme: t }) => t.breakpoints.values[ft]}px) {
     padding: 1.5rem 2rem;
   }
   @media (max-width: ${({ theme: t }) => t.breakpoints.values.sm}px) {
@@ -1069,13 +1113,13 @@ const Je = _(O)`
     }
   }
 
-  @media (min-width: ${({ theme: t }) => t.breakpoints.values[mt]}px) {
+  @media (min-width: ${({ theme: t }) => t.breakpoints.values[ft]}px) {
     padding: 2rem 2rem;
     text-align: left;
     box-sizing: border-box;
   }
 `;
-function Ge({
+function oo({
   image: t,
   title: e,
   description: o,
@@ -1088,14 +1132,14 @@ function Ge({
   align: d,
   ...p
 }) {
-  const m = st(t), h = P(N(t), 540);
+  const m = pt(t), h = z(M(t), 540);
   return /* @__PURE__ */ w(
-    Ke,
+    no,
     {
       className: "card-article",
       ...p,
       prepend: /* @__PURE__ */ r("div", { className: "card__image__wrap", children: m && t ? /* @__PURE__ */ r(
-        f,
+        g,
         {
           sx: {
             position: "absolute",
@@ -1107,10 +1151,10 @@ function Ge({
             alignItems: "center",
             justifyContent: "center"
           },
-          children: /* @__PURE__ */ r(z, { icon: t, color: "primary.main" })
+          children: /* @__PURE__ */ r(E, { icon: t, color: "primary.main" })
         }
       ) : h && /* @__PURE__ */ r(
-        f,
+        g,
         {
           component: "img",
           className: "card__image",
@@ -1130,7 +1174,7 @@ function Ge({
       ) }),
       children: [
         e || o ? /* @__PURE__ */ r(
-          U,
+          G,
           {
             align: d,
             title: e,
@@ -1139,12 +1183,12 @@ function Ge({
             descriptionProps: s
           }
         ) : null,
-        l?.length ? /* @__PURE__ */ r(j, { align: d, actions: l, className: "mt-4" }) : null
+        l?.length ? /* @__PURE__ */ r(A, { align: d, actions: l, className: "mt-4" }) : null
       ]
     }
   );
 }
-const Ke = _(O)`
+const no = _(D)`
   ${(t) => t.hoverStyle === "none" ? "" : t.link ? `transition: box-shadow ease .3s;
               &:hover {
                 box-shadow: 0 0 10px rgba(95, 142, 244, 0.42);
@@ -1168,8 +1212,8 @@ const Ke = _(O)`
   .card__image {
     max-height: 60px;
   }
-`, ut = "section";
-function Xe({
+`, bt = "section";
+function ro({
   title: t,
   image: e,
   imageMeta: o,
@@ -1180,15 +1224,15 @@ function Xe({
   className: s = "",
   ...l
 }) {
-  return /* @__PURE__ */ r(qe, { className: b("card", s), ...l, children: /* @__PURE__ */ w(f, { className: "flex items-center", children: [
-    e && /* @__PURE__ */ r(z, { icon: e, color: "primary.main", size: n, imageMeta: o }),
-    /* @__PURE__ */ w(f, { className: "flex-1 ml-4", children: [
-      /* @__PURE__ */ r(U, { align: c, title: t, description: i }),
-      /* @__PURE__ */ r(j, { align: c, actions: a, className: "mt-4" })
+  return /* @__PURE__ */ r(io, { className: x("card", s), ...l, children: /* @__PURE__ */ w(g, { className: "flex items-center", children: [
+    e && /* @__PURE__ */ r(E, { icon: e, color: "primary.main", size: n, imageMeta: o }),
+    /* @__PURE__ */ w(g, { className: "flex-1 ml-4", children: [
+      /* @__PURE__ */ r(G, { align: c, title: t, description: i }),
+      /* @__PURE__ */ r(A, { align: c, actions: a, className: "mt-4" })
     ] })
   ] }) });
 }
-const qe = _(O)`
+const io = _(D)`
   padding: 5vw 4vw;
   text-align: left;
   box-sizing: border-box;
@@ -1196,7 +1240,7 @@ const qe = _(O)`
   color: inherit !important;
   border-radius: 0.5rem;
   /* ${({ dark: t, theme: e }) => `background-color:${t ? e.palette.grey[900] : e.palette.common.white};`} */
-  @media (max-width: ${({ theme: t }) => t.breakpoints.values[ut]}px) {
+  @media (max-width: ${({ theme: t }) => t.breakpoints.values[bt]}px) {
     padding: 1.5rem 2rem;
   }
   @media (max-width: ${({ theme: t }) => t.breakpoints.values.sm}px) {
@@ -1241,13 +1285,13 @@ const qe = _(O)`
     }
   }
 
-  @media (min-width: ${({ theme: t }) => t.breakpoints.values[ut]}px) {
+  @media (min-width: ${({ theme: t }) => t.breakpoints.values[bt]}px) {
     padding: 2rem 2rem;
     text-align: left;
     box-sizing: border-box;
   }
 `;
-function Qe({
+function ao({
   title: t,
   titleProps: e = {},
   description: o,
@@ -1259,10 +1303,10 @@ function Qe({
   hoverStyle: l,
   ...d
 }) {
-  return /* @__PURE__ */ w(Ze, { className: b("card-simple", c, `hover-style__${l}`), align: s, ...d, children: [
-    i && /* @__PURE__ */ r(z, { icon: i, color: "primary.main", imageMeta: a }),
+  return /* @__PURE__ */ w(so, { className: x("card-simple", c, `hover-style__${l}`), align: s, ...d, children: [
+    i && /* @__PURE__ */ r(E, { icon: i, color: "primary.main", imageMeta: a }),
     t || o ? /* @__PURE__ */ r(
-      U,
+      G,
       {
         align: s,
         title: t,
@@ -1273,7 +1317,7 @@ function Qe({
     ) : null
   ] });
 }
-const Ze = _(O)`
+const so = _(D)`
   .card__title {
     color: ${({ theme: t }) => t.palette.text.primary};
     a {
@@ -1370,17 +1414,17 @@ const Ze = _(O)`
     }
   }
 `;
-function to({ type: t = "default", ...e }) {
+function lo({ type: t = "default", ...e }) {
   const n = {
-    article: Ve,
-    simple: Qe,
-    news: Xe,
-    default: pt,
-    wall: Ge
-  }[t] || pt;
-  return /* @__PURE__ */ r(n, { ...t === "news" ? e : C(e, "iconSize") });
+    article: Ze,
+    simple: ao,
+    news: ro,
+    default: xt,
+    wall: oo
+  }[t] || xt;
+  return /* @__PURE__ */ r(n, { ...t === "news" ? e : B(e, "iconSize") });
 }
-function eo({
+function co({
   list: t = [],
   align: e = "top",
   cards: o,
@@ -1397,23 +1441,23 @@ function eo({
   ...u
 }) {
   return /* @__PURE__ */ r(
-    Pt,
+    jt,
     {
       type: d,
-      className: b("card-list py-1", l, "items-stretch"),
+      className: x("card-list py-1", l, "items-stretch"),
       col: a,
       gap: c,
       align: e,
       ...u,
-      children: o || t.map((y) => /* @__PURE__ */ r(
-        to,
+      children: o || t.map((b) => /* @__PURE__ */ r(
+        lo,
         {
           borderColor: n,
           iconColor: s,
           type: d,
           listType: i,
           dark: p,
-          ...y,
+          ...b,
           align: m,
           style: c === 0 && t.length > 1 ? {
             borderRadius: 0,
@@ -1421,12 +1465,12 @@ function eo({
             marginBottom: "-1px"
           } : {}
         },
-        y.id
+        b.id
       ))
     }
   );
 }
-const oo = [
+const mo = [
   "align",
   "cards",
   "list",
@@ -1438,11 +1482,11 @@ const oo = [
   "type",
   "textAlign"
 ];
-function B(t, e) {
-  const o = nt(t, e), n = C(t, e);
+function P(t, e) {
+  const o = lt(t, e), n = B(t, e);
   return [o, n];
 }
-const no = _(Q)`
+const po = _(nt)`
   a .card {
     color: #404040;
     cursor: pointer;
@@ -1458,14 +1502,14 @@ const no = _(Q)`
     color: #404040;
   }
 `;
-function ro({ className: t, ...e }) {
-  const [o, n] = B(e, q), [i, a] = B(n, oo);
-  return /* @__PURE__ */ w(no, { className: b("section--card-list", t), type: e.type, ...a, children: [
-    Object.keys(o).length > 0 && /* @__PURE__ */ r(X, { center: !0, ...o, className: "mb-[2.5vw]" }),
-    /* @__PURE__ */ r(eo, { ...i, dark: !!e.dark })
+function uo({ className: t, ...e }) {
+  const [o, n] = P(e, ot), [i, a] = P(n, mo);
+  return /* @__PURE__ */ w(po, { className: x("section--card-list", t), type: e.type, ...a, children: [
+    Object.keys(o).length > 0 && /* @__PURE__ */ r(et, { center: !0, ...o, className: "mb-[2.5vw]" }),
+    /* @__PURE__ */ r(co, { ...i, dark: !!e.dark })
   ] });
 }
-const io = _(ro)`
+const ho = _(uo)`
   .card__description {
     white-space: pre-wrap;
   }
@@ -1481,29 +1525,29 @@ const io = _(ro)`
     background: inherit !important;
   }
 `;
-function ao({ section: t, ...e }) {
-  const [{ editing: o }, n] = B(e, K), i = W(() => ({
-    ...C(n, ["listBorder", "list", "iconSize", "imageSize"]),
+function go({ section: t, ...e }) {
+  const [{ editing: o }, n] = P(e, tt), i = N(() => ({
+    ...B(n, ["listBorder", "list", "iconSize", "imageSize"]),
     list: n.list?.map((a) => ({
-      ...C(a, "icon", "iconColor"),
+      ...B(a, "icon", "iconColor"),
       image: ["news", "simple", "default"].includes(n.type) && a.icon ? a.icon : a.image,
-      actions: a.actions?.map?.((c) => /* @__PURE__ */ r(Mt, { ...c, editing: o }, c.id)),
+      actions: a.actions?.map?.((c) => /* @__PURE__ */ r(Lt, { ...c, editing: o }, c.id)),
       border: n.listBorder,
       iconSize: n.iconSize,
       imageSize: n.imageSize,
       hoverStyle: n.hoverStyle
     }))
   }), [n]);
-  return /* @__PURE__ */ r(io, { style: o ? { pointerEvents: "none" } : {}, ...i });
+  return /* @__PURE__ */ r(ho, { style: o ? { pointerEvents: "none" } : {}, ...i });
 }
-function so({
+function fo({
   properties: t,
   section: e,
   locale: o,
   dev: n
 }) {
   return e?.config?.componentId ? /* @__PURE__ */ r(
-    oe,
+    ae,
     {
       instanceId: e.id,
       componentId: e.config.componentId,
@@ -1515,14 +1559,14 @@ function so({
       dev: n
     }
   ) : /* @__PURE__ */ r(
-    f,
+    g,
     {
       sx: {
         textAlign: "center",
         py: 2
       },
       children: /* @__PURE__ */ r(
-        I,
+        L,
         {
           variant: "caption",
           sx: {
@@ -1534,7 +1578,7 @@ function so({
     }
   );
 }
-function lo({
+function xo({
   src: t,
   dataId: e,
   isEdit: o = !1,
@@ -1543,7 +1587,7 @@ function lo({
   }
 }) {
   return /* @__PURE__ */ r(
-    de,
+    he,
     {
       isEdit: o,
       embedId: e,
@@ -1555,12 +1599,12 @@ function lo({
     }
   );
 }
-function co({ dataId: t, src: e, actions: o, center: n, onLoad: i, ...a }) {
-  const [c, s] = B(a, q);
-  return /* @__PURE__ */ w(Q, { ...s, children: [
-    Object.keys(c).length > 0 && /* @__PURE__ */ r(X, { center: n, ...c }),
+function bo({ dataId: t, src: e, actions: o, center: n, onLoad: i, ...a }) {
+  const [c, s] = P(a, ot);
+  return /* @__PURE__ */ w(nt, { ...s, children: [
+    Object.keys(c).length > 0 && /* @__PURE__ */ r(et, { center: n, ...c }),
     /* @__PURE__ */ r(
-      lo,
+      xo,
       {
         dataId: t,
         src: e,
@@ -1568,10 +1612,10 @@ function co({ dataId: t, src: e, actions: o, center: n, onLoad: i, ...a }) {
         height: a.iframeHeight ? `${a.iframeHeight}px` : "100%"
       }
     ),
-    /* @__PURE__ */ r(j, { actions: o, center: n })
+    /* @__PURE__ */ r(A, { actions: o, center: n })
   ] });
 }
-const xn = {
+const Mn = {
   src: "",
   embedUrl: "",
   title: "",
@@ -1582,21 +1626,21 @@ const xn = {
   config: {},
   id: ""
 };
-function mo({ section: t, id: e, src: o, ...n }) {
-  const i = `${e}-${n.locale}`, [{ editing: a }, c] = B(n, K), s = rt({}), l = JSON.parse(JSON.stringify(c)), { message: d } = se(i, "server"), p = le(JSON.parse(JSON.stringify(c.config) || "{}"));
-  return T(() => {
+function yo({ section: t, id: e, src: o, ...n }) {
+  const i = `${e}-${n.locale}`, [{ editing: a }, c] = P(n, tt), s = ct({}), l = JSON.parse(JSON.stringify(c)), { message: d } = me(i, "server"), p = pe(JSON.parse(JSON.stringify(c.config) || "{}"));
+  return H(() => {
     d && d.onInit(() => p.current);
-  }, [d]), T(() => {
+  }, [d]), H(() => {
     const m = JSON.parse(JSON.stringify(c.config) || "{}");
-    ce(s.current, m) || (s.current = m, d?.send("config-set", m));
-  }, [d, c.config]), o ? /* @__PURE__ */ r(co, { ...l, dataId: i, src: o, style: a ? { pointerEvents: "none" } : {} }) : /* @__PURE__ */ r(po, { children: 'Please set the "src" attribute for this block' });
+    ue(s.current, m) || (s.current = m, d?.send("config-set", m));
+  }, [d, c.config]), o ? /* @__PURE__ */ r(bo, { ...l, dataId: i, src: o, style: a ? { pointerEvents: "none" } : {} }) : /* @__PURE__ */ r(wo, { children: 'Please set the "src" attribute for this block' });
 }
-const po = _("div")`
+const wo = _("div")`
   user-select: none;
   color: #999;
   padding: 8px;
   height: 200px;
-`, uo = 12, ho = ({
+`, vo = "none", ko = "none", _o = "transparent", $o = 12, So = ({
   gridSettings: t,
   section: e,
   index: o,
@@ -1604,7 +1648,7 @@ const po = _("div")`
   simulateMode: i = "desktop",
   isBackground: a
 }) => {
-  const c = t?.[i] ?? {}, s = c[e.id], l = go(c);
+  const c = t?.[i] ?? {}, s = c[e.id], l = Co(c);
   return {
     i: e.id,
     static: e?.locked || a,
@@ -1625,29 +1669,37 @@ const po = _("div")`
     maxH: 1,
     maxY: l
   };
-}, go = (t) => Object.values(t).reduce((e, o) => Math.max(e, o.y || 0), 0) || 0, fo = (t) => {
-  const { dev: e, id: o, section: n, onBlockRender: i } = t, a = e?.mode, c = Ot((g) => g.breakpoints.down("sm")), { t: s } = me(), { sections: l, sectionIds: d, config: p } = n, { columns: m = uo, gridSettings: h } = p || {}, u = A(
-    (g, k = !1, S = 0) => {
-      if (!i || !g || !g.component || g.visibility === "hidden")
+}, Co = (t) => Object.values(t).reduce((e, o) => Math.max(e, o.y || 0), 0) || 0, No = (t) => {
+  const { dev: e, id: o, section: n, onBlockRender: i } = t, a = e?.mode, c = Dt((v) => v.breakpoints.down("sm")), { t: s } = ge(), { sections: l, sectionIds: d, config: p } = n, { columns: m = $o, gridSettings: h, gap: u, padding: b, background: f } = p || {}, y = N(() => Q({
+    type: "layoutBlockGap",
+    value: u ?? vo,
+    format: "sx"
+  }), [u]), k = N(() => Q({
+    type: "layoutBlockPadding",
+    value: b ?? ko,
+    format: "sx"
+  }), [b]), $ = F(
+    (v, R = !1, Y = 0) => {
+      if (!i || !v || !v.component || v.visibility === "hidden")
         return null;
-      const $ = ho({
+      const W = So({
         gridSettings: h,
-        section: g,
-        index: S,
+        section: v,
+        index: Y,
         columns: m,
         simulateMode: c ? "mobile" : "desktop",
-        isBackground: k
-      }), H = $?.x ?? 0, F = $?.y ?? 0, R = $?.w ?? m, jt = $?.h ?? 1, zt = $?.maxY ?? 0, Rt = !!n?.config?.backgroundSectionId;
+        isBackground: R
+      }), V = W?.x ?? 0, J = W?.y ?? 0, T = W?.w ?? m, At = W?.h ?? 1, Et = W?.maxY ?? 0, Tt = !!n?.config?.backgroundSectionId;
       return /* @__PURE__ */ r(
-        f,
+        g,
         {
-          className: k ? "layout-block-background" : "layout-block-section",
+          className: R ? "layout-block-background" : "layout-block-section",
           sx: {
             // 背景元素和普通元素都使用 grid 布局
-            ...k ? {
+            ...R ? {
               // 背景元素覆盖整个网格区域
               gridColumn: "1 / -1",
-              gridRow: `1 / ${zt + 1}`,
+              gridRow: `1 / ${Et + 1}`,
               zIndex: 0,
               width: "100%",
               height: "100%",
@@ -1658,40 +1710,51 @@ const po = _("div")`
             } : {
               position: "relative",
               // 使用 grid 定位普通元素
-              gridColumn: `${H + 1} / span ${R}`,
+              gridColumn: `${V + 1} / span ${T}`,
               // hasBackground 的话，不再 + 1，因为 background 会占用第一行
-              gridRow: `${F + (Rt ? 0 : 1)} / span ${jt}`,
-              zIndex: 1
+              gridRow: `${J + (Tt ? 0 : 1)} / span ${At}`,
+              zIndex: 1,
               // Ensure content is above background
+              minWidth: 0,
+              // 防止内容撑开网格项
+              minHeight: 0,
+              // 防止内容撑开网格项
+              overflow: "hidden",
+              // 防止子内容溢出网格项
+              "& > .BlockBase-root": {
+                height: "100%",
+                width: "100%",
+                boxSizing: "border-box"
+              }
             }
           },
           children: i({
-            id: g.id,
-            type: g.component,
+            id: v.id,
+            type: v.component,
             config: {},
             section: {
-              ...g
+              ...v
             },
             mode: a
           })
         },
-        g.id
+        v.id
       );
     },
     [o, a, i, h, m, c]
-  ), { backgroundElements: y, contentElements: x } = W(() => {
+  ), { backgroundElements: C, contentElements: S } = N(() => {
     if (!d || !d.length || !l || !Object.keys(l).length)
       return { backgroundElements: [], contentElements: [] };
-    const g = [], k = [];
-    return d?.forEach((S, $) => {
-      const H = l[S];
-      if (!H) return;
-      const F = n?.config?.backgroundSectionId === S, R = u(H, F, $);
-      R && (F ? g.push(R) : k.push(R));
-    }), { backgroundElements: g, contentElements: k };
-  }, [u, l, d]);
-  return a === "draft" && !y?.length && !x?.length ? /* @__PURE__ */ w(
-    f,
+    const v = [], R = [];
+    return d?.forEach((Y, W) => {
+      const V = l[Y];
+      if (!V) return;
+      const J = n?.config?.backgroundSectionId === Y, T = $(V, J, W);
+      T && (J ? v.push(T) : R.push(T));
+    }), { backgroundElements: v, contentElements: R };
+  }, [$, l, d]);
+  return a === "draft" && !C?.length && !S?.length ? /* @__PURE__ */ w(
+    g,
     {
       sx: {
         gridColumn: "1 / -1",
@@ -1701,7 +1764,7 @@ const po = _("div")`
         alignItems: "center",
         justifyContent: "center",
         gap: 2,
-        border: (g) => `2px dashed ${g.palette.divider}`,
+        border: (v) => `2px dashed ${v.palette.divider}`,
         borderRadius: 2,
         padding: 4,
         color: "text.secondary",
@@ -1710,7 +1773,7 @@ const po = _("div")`
       },
       children: [
         /* @__PURE__ */ r(
-          f,
+          g,
           {
             sx: {
               fontSize: "48px",
@@ -1720,7 +1783,7 @@ const po = _("div")`
           }
         ),
         /* @__PURE__ */ r(
-          f,
+          g,
           {
             sx: {
               fontSize: "16px",
@@ -1731,7 +1794,7 @@ const po = _("div")`
           }
         ),
         /* @__PURE__ */ r(
-          f,
+          g,
           {
             sx: {
               opacity: 0.7,
@@ -1741,7 +1804,7 @@ const po = _("div")`
           }
         ),
         /* @__PURE__ */ r(
-          f,
+          g,
           {
             sx: {
               position: "absolute",
@@ -1751,13 +1814,13 @@ const po = _("div")`
               bottom: 0,
               pointerEvents: "none",
               opacity: 0.1,
-              background: (g) => `
+              background: (v) => `
                 repeating-linear-gradient(
                   90deg,
                   transparent,
                   transparent calc(100% / ${m} - 1px),
-                  ${g.palette.grey[400]} calc(100% / ${m} - 1px),
-                  ${g.palette.grey[400]} calc(100% / ${m})
+                  ${v.palette.grey[400]} calc(100% / ${m} - 1px),
+                  ${v.palette.grey[400]} calc(100% / ${m})
                 )
               `
             }
@@ -1766,24 +1829,32 @@ const po = _("div")`
       ]
     }
   ) : /* @__PURE__ */ w(
-    f,
+    g,
     {
       sx: {
         position: "relative",
         display: "grid",
-        gridTemplateColumns: `repeat(${m}, 1fr)`,
-        alignItems: "center",
+        gridTemplateColumns: `repeat(${m}, minmax(0, 1fr))`,
+        alignItems: "stretch",
+        alignContent: "start",
         width: "100%",
-        height: "100%"
+        height: "100%",
+        minWidth: 0,
+        bgcolor: f ?? _o,
+        boxSizing: "border-box",
+        overflow: "hidden",
+        // Prevent content overflow
+        ...y,
+        ...k
       },
       children: [
-        y,
-        x
+        C,
+        S
       ]
     }
   );
-}, xo = ["title", "description", "actions", "badge", "tag", "prepend", "append", "logo"];
-function bo({
+}, Bo = ["title", "description", "actions", "badge", "tag", "prepend", "append", "logo"];
+function Mo({
   image: t,
   imageBorder: e,
   imageShadow: o,
@@ -1792,10 +1863,10 @@ function bo({
   fullSizeImage: a,
   ...c
 }) {
-  const [s, l] = B(c, q), d = Object.keys(s).length > 0 && Object.values(nt(s, xo)).filter(Boolean).length > 0 && /* @__PURE__ */ r(X, { ...s }), p = bt(t) ? t : /* @__PURE__ */ r(f, { component: "img", src: t, alt: "", className: "block" }), m = ["phone", "macbook"].includes(e), h = t && /* @__PURE__ */ r(
-    f,
+  const [s, l] = P(c, ot), d = Object.keys(s).length > 0 && Object.values(lt(s, Bo)).filter(Boolean).length > 0 && /* @__PURE__ */ r(et, { ...s }), p = _t(t) ? t : /* @__PURE__ */ r(g, { component: "img", src: t, alt: "", className: "block" }), m = ["phone", "macbook"].includes(e), h = t && /* @__PURE__ */ r(
+    g,
     {
-      className: b(
+      className: x(
         "section__image",
         "m-auto, leading-[1] text-center",
         o && "shadow-xl",
@@ -1810,17 +1881,17 @@ function bo({
       },
       children: m ? (
         // @ts-ignore
-        /* @__PURE__ */ r(pe, { type: e, sx: { width: "100%" }, children: p })
+        /* @__PURE__ */ r(fe, { type: e, sx: { width: "100%" }, children: p })
       ) : p
     }
   );
   return /* @__PURE__ */ r(
-    Q,
+    nt,
     {
-      className: b(
+      className: x(
         "section--block",
         n,
-        a && !i && tt`
+        a && !i && it`
             .section-bg {
               height: 80%;
             }
@@ -1829,10 +1900,10 @@ function bo({
       ...l,
       boxProps: a ? { sx: { padding: 0, overflow: "hidden" } } : void 0,
       children: /* @__PURE__ */ r(
-        Pt,
+        jt,
         {
           col: t ? 2 : 1,
-          className: a ? tt`
+          className: a ? it`
                 display: flex;
                 flex-direction: column;
 
@@ -1846,10 +1917,10 @@ function bo({
                   }
                 }
               ` : void 0,
-          children: i ? /* @__PURE__ */ w(D, { children: [
+          children: i ? /* @__PURE__ */ w(q, { children: [
             h,
             d
-          ] }) : /* @__PURE__ */ w(D, { children: [
+          ] }) : /* @__PURE__ */ w(q, { children: [
             d,
             h
           ] })
@@ -1858,7 +1929,7 @@ function bo({
     }
   );
 }
-const yo = [
+const Po = [
   /youtu\.be\/([^#&?]{11})/,
   // youtu.be/<id>
   /\?v=([^#&?]{11})/,
@@ -1870,51 +1941,51 @@ const yo = [
   /\/v\/([^#&?]{11})/
   // /v/<id>
 ];
-function wo(t) {
+function Io(t) {
   if (/youtu\.?be/.test(t))
-    for (const e of yo) {
+    for (const e of Po) {
       const o = e.exec(t)?.[1];
       if (o)
         return o;
     }
 }
-function vo(t) {
-  const e = wo(t);
+function Wo(t) {
+  const e = Io(t);
   if (e)
     return `https://youtube.com/embed/${e}`;
 }
-function ko({ src: t }) {
-  return T(() => {
+function Lo({ src: t }) {
+  return H(() => {
     import("@lottiefiles/lottie-player");
   }, []), /* @__PURE__ */ r("lottie-player", { autoplay: !0, loop: !0, mode: "normal", src: t });
 }
-function _o(t) {
+function zo(t) {
   return /* @__PURE__ */ r(
-    f,
+    g,
     {
       sx: {
         maxHeight: 400,
         overflow: "hidden auto"
       },
-      children: /* @__PURE__ */ r(ue, { ...t })
+      children: /* @__PURE__ */ r(xe, { ...t })
     }
   );
 }
-function $o({ url: t }) {
-  const e = rt(null), o = 495, [n, i] = J(
+function Ro({ url: t }) {
+  const e = ct(null), o = 495, [n, i] = Z(
     e.current ? e.current.offsetWidth * 0.5625 : o
-  ), a = A(() => {
+  ), a = F(() => {
     const c = window.innerWidth > 990 ? 1 : window.innerWidth > 522 ? 1.2 : window.innerWidth > 400 ? 1.45 : 1.85, s = e.current ? e.current.offsetWidth * 0.5625 : o;
     return i(Math.floor(s * c));
   }, []);
-  return T(() => {
+  return H(() => {
     window.addEventListener("resize", a);
     const c = window.innerWidth > 990 ? 1 : window.innerWidth > 522 ? 1.2 : window.innerWidth > 400 ? 1.45 : 1.85, s = e.current ? e.current.offsetWidth * 0.5625 : o;
     return i(Math.floor(s * c)), function() {
       window.removeEventListener("resize", a);
     };
   }, [n, a]), /* @__PURE__ */ r(
-    f,
+    g,
     {
       component: "iframe",
       ref: e,
@@ -1931,7 +2002,7 @@ function $o({ url: t }) {
     }
   );
 }
-const bn = {
+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",
@@ -1942,11 +2013,11 @@ const bn = {
   actions: void 0,
   hasImage: !0,
   center: !1
-}, So = _(bo)`
+}, jo = _(Mo)`
   .section__description {
   }
 `;
-function Co({
+function Ao({
   hasImage: t,
   fullSizeImage: e,
   boxed: o,
@@ -1957,12 +2028,12 @@ function Co({
   section: s,
   ...l
 }) {
-  const [{ editing: d }, p] = B({ ...l, boxed: e ? void 0 : o }, K);
-  let m = No(p.image, n, e, i, a, c);
+  const [{ editing: d }, p] = P({ ...l, boxed: e ? void 0 : o }, tt);
+  let m = Eo(p.image, n, e, i, a, c);
   t || (m = null);
   let h = null;
-  return p.actions && (h = p.actions?.map?.((u, y) => /* @__PURE__ */ r(Mt, { ...u, editing: d }, y))), /* @__PURE__ */ r(
-    So,
+  return p.actions && (h = p.actions?.map?.((u, b) => /* @__PURE__ */ r(Lt, { ...u, editing: d }, b))), /* @__PURE__ */ r(
+    jo,
     {
       ...p,
       style: d ? { pointerEvents: "none" } : {},
@@ -1972,17 +2043,17 @@ function Co({
     }
   );
 }
-function No(t, e, o, n, i, a) {
+function Eo(t, e, o, n, i, a) {
   if (t) {
     if (t.endsWith(".json"))
-      return /* @__PURE__ */ r(ko, { src: t });
+      return /* @__PURE__ */ r(Lo, { src: t });
     if (t.indexOf("twitter.com") !== -1)
-      return /* @__PURE__ */ r(_o, { sourceType: "url", url: t });
-    const c = vo(t);
+      return /* @__PURE__ */ r(zo, { sourceType: "url", url: t });
+    const c = Wo(t);
     if (c)
-      return /* @__PURE__ */ r($o, { url: c });
+      return /* @__PURE__ */ r(Ro, { url: c });
     const { naturalWidth: s, naturalHeight: l, filename: d } = n || {};
-    if (L(t))
+    if (O(t))
       return /* @__PURE__ */ r(
         "video",
         {
@@ -1998,16 +2069,16 @@ function No(t, e, o, n, i, a) {
             width: "100%",
             height: "100%"
           },
-          poster: P(N(e), o ? 1200 : 540, i),
-          children: /* @__PURE__ */ r("source", { src: N(t), type: Ae(t) })
+          poster: z(M(e), o ? 1200 : 540, i),
+          children: /* @__PURE__ */ r("source", { src: M(t), type: Ye(t) })
         },
         t
       );
     const p = i === "quality" ? 1 : 0.6;
     return /* @__PURE__ */ r(
-      kt,
+      Nt,
       {
-        src: N(t),
+        src: M(t),
         sizesAttr: {
           sm: 600 * p,
           md: 450 * p,
@@ -2027,57 +2098,57 @@ function No(t, e, o, n, i, a) {
   }
   return null;
 }
-const yn = ["production", "draft"];
-function wn({ mode: t, version: e } = {}) {
+const In = ["production", "draft"];
+function Wn({ mode: t, version: e } = {}) {
   const o = e && typeof e == "number" ? { mode: t, version: e } : { mode: t };
-  return it.get(`/api/${at()}/pages`, { params: o }).then((n) => n.data);
+  return dt.get(`/api/${mt()}/pages`, { params: o }).then((n) => n.data);
 }
-function vn({ mode: t, routes: e }) {
-  return it.post(`/api/${at()}/pages/publish`, { mode: t, routes: e }).then((o) => o.data);
+function Ln({ mode: t, routes: e }) {
+  return dt.post(`/api/${mt()}/pages/publish`, { mode: t, routes: e }).then((o) => o.data);
 }
-function Bo({
+function To({
   locale: t,
   sort: e,
   page: o,
   limit: n,
   mode: i
 } = {}) {
-  return it.get(`/api/${at()}/pages/toc`, { params: { locale: t, sort: e, page: o, limit: n, mode: i } }).then((a) => a.data);
+  return dt.get(`/api/${mt()}/pages/toc`, { params: { locale: t, sort: e, page: o, limit: n, mode: i } }).then((a) => a.data);
 }
-const kn = {
+const zn = {
   style: "list",
   sort: "-updatedAt"
-}, ht = 20;
-function Mo({ style: t, sort: e, section: o, ...n }) {
-  const [{ editing: i, locale: a }, c] = B(n, K), [s, l] = B(c, q), [d, p] = J(), m = rt(!1), h = he(), u = qt(), y = A(async () => {
+}, yt = 20;
+function Oo({ style: t, sort: e, section: o, ...n }) {
+  const [{ editing: i, locale: a }, c] = P(n, tt), [s, l] = P(c, ot), [d, p] = Z(), m = ct(!1), h = be(), u = ee(), b = F(async () => {
     if (!m.current) {
       m.current = !0, h();
       try {
-        const x = d ? Math.floor(d.list.length / ht) + 1 : 1, { list: v, total: g } = await Bo({ locale: a, sort: e, page: x, limit: ht });
-        p((k) => ({
-          list: (k?.list ?? []).concat(v),
-          total: g
+        const f = d ? Math.floor(d.list.length / yt) + 1 : 1, { list: y, total: k } = await To({ locale: a, sort: e, page: f, limit: yt });
+        p(($) => ({
+          list: ($?.list ?? []).concat(y),
+          total: k
         }));
       } finally {
         m.current = !1, h();
       }
     }
   }, [d, a, e, h]);
-  return ge(() => {
-    y();
-  }), /* @__PURE__ */ w(Q, { ...l, sx: i ? { pointerEvents: "none" } : {}, children: [
-    Object.keys(s).length > 0 && /* @__PURE__ */ r(X, { ...s }),
-    d ? /* @__PURE__ */ w(D, { children: [
+  return ye(() => {
+    b();
+  }), /* @__PURE__ */ w(nt, { ...l, sx: i ? { pointerEvents: "none" } : {}, children: [
+    Object.keys(s).length > 0 && /* @__PURE__ */ r(et, { ...s }),
+    d ? /* @__PURE__ */ w(q, { children: [
       /* @__PURE__ */ r(
-        lt,
+        ut,
         {
           container: !0,
           spacing: 2,
           sx: {
             justifyContent: "center"
           },
-          children: d?.list.map((x) => /* @__PURE__ */ r(
-            lt,
+          children: d?.list.map((f) => /* @__PURE__ */ r(
+            ut,
             {
               size: {
                 xs: 12,
@@ -2085,62 +2156,62 @@ function Mo({ style: t, sort: e, section: o, ...n }) {
                 md: t === "card" ? 3 : 12
               },
               children: /* @__PURE__ */ w(
-                Io,
+                Uo,
                 {
                   elevation: 0,
-                  className: b(t === "card" && "style-card"),
-                  onClick: i ? void 0 : () => u(x.slug),
+                  className: x(t === "card" && "style-card"),
+                  onClick: i ? void 0 : () => u(f.slug),
                   children: [
-                    !!x.image && /* @__PURE__ */ r(
-                      Ft,
+                    !!f.image && /* @__PURE__ */ r(
+                      Vt,
                       {
                         component: "img",
                         alt: "",
-                        image: P(N(x.image), 540),
+                        image: z(M(f.image), 540),
                         loading: "lazy"
                       }
                     ),
-                    /* @__PURE__ */ w(Yt, { children: [
-                      /* @__PURE__ */ r(I, { variant: "h6", component: "div", className: gt, children: x.title || x.id }),
-                      /* @__PURE__ */ r(I, { variant: "body2", className: gt, children: x.description })
+                    /* @__PURE__ */ w(Jt, { children: [
+                      /* @__PURE__ */ r(L, { variant: "h6", component: "div", className: wt, children: f.title || f.id }),
+                      /* @__PURE__ */ r(L, { variant: "body2", className: wt, children: f.description })
                     ] })
                   ]
                 }
               )
             },
-            x.id
+            f.id
           ))
         }
       ),
       /* @__PURE__ */ r(
-        f,
+        g,
         {
           sx: {
             textAlign: "center",
             mt: 2
           },
-          children: d.total > d.list.length ? /* @__PURE__ */ r(E, { variant: "outlined", color: "secondary", onClick: y, loading: m.current, children: "More" }) : /* @__PURE__ */ r(E, { variant: "outlined", color: "secondary", disabled: !0, children: "No More" })
+          children: d.total > d.list.length ? /* @__PURE__ */ r(U, { variant: "outlined", color: "secondary", onClick: b, loading: m.current, children: "More" }) : /* @__PURE__ */ r(U, { variant: "outlined", color: "secondary", disabled: !0, children: "No More" })
         }
       )
     ] }) : /* @__PURE__ */ r(
-      f,
+      g,
       {
         sx: {
           p: 2,
           textAlign: "center"
         },
-        children: /* @__PURE__ */ r(Ht, { size: 24 })
+        children: /* @__PURE__ */ r(Yt, { size: 24 })
       }
     )
   ] });
 }
-const gt = tt`
+const wt = it`
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   overflow: hidden;
   text-overflow: ellipsis;
-`, Io = _(Ut)`
+`, Uo = _(Gt)`
   border: 1px solid #e0e0e0;
   background-color: transparent;
   cursor: pointer;
@@ -2160,15 +2231,15 @@ const gt = tt`
       max-height: 50vw;
     }
   }
-`, Wo = {
-  iframe: mo,
-  section: Co,
-  "section-card-list": ao,
-  toc: Mo,
-  "custom-component": so,
-  "layout-block": fo
+`, Fo = {
+  iframe: yo,
+  section: Ao,
+  "section-card-list": go,
+  toc: Oo,
+  "custom-component": fo,
+  "layout-block": No
 };
-function Po({
+function Ho({
   id: t,
   type: e,
   mode: o,
@@ -2178,46 +2249,46 @@ function Po({
   page: c,
   ...s
 }) {
-  const l = Wo[e], { getPageMetaStyle: d } = Se(), p = W(() => {
-    const { height: u, ...y } = n;
-    return e === "layout-block" && (y.onBlockRender = (x) => {
-      const v = {
+  const l = Fo[e], { getPageMetaStyle: d } = Le(), p = N(() => {
+    const { height: u, ...b } = n;
+    return e === "layout-block" && (b.onBlockRender = (f) => {
+      const y = {
         ...n?.dev,
-        ...x?.config?.dev
-      }, { defaultLocale: g } = v, k = {
-        ...nt(n, ["locale", "editing"]),
-        ...x?.config,
-        dev: v
-      }, { locale: S } = k;
-      let $ = c?.dataSource?.[x?.id]?.[S];
-      return Dt($) && ($ = c?.dataSource?.[x?.id]?.[g ?? "en"]), /* @__PURE__ */ r(
-        Po,
+        ...f?.config?.dev
+      }, { defaultLocale: k } = y, $ = {
+        ...lt(n, ["locale", "editing"]),
+        ...f?.config,
+        dev: y
+      }, { locale: C } = $;
+      let S = c?.dataSource?.[f?.id]?.[C];
+      return Xt(S) && (S = c?.dataSource?.[f?.id]?.[k ?? "en"]), /* @__PURE__ */ r(
+        Ho,
         {
-          ...x,
+          ...f,
           config: {
-            ...x?.section?.properties,
-            ...$,
-            ...k
+            ...f?.section?.properties,
+            ...S,
+            ...$
           },
           page: c,
           ignorePageMetaStyle: !0
         }
       );
-    }), y;
-  }, [n, e]), m = W(() => {
+    }), b;
+  }, [n, e]), m = N(() => {
     const u = {};
     return e !== "custom-component" && (u.height = n.height), u.sx = a ? void 0 : d("sx"), u.id = `BlockBase-${t}`, u;
   }, [n.height, a, e, d]), h = l && /* @__PURE__ */ r(l, { mode: o, ...p, id: t, section: i });
-  return h ? /* @__PURE__ */ r(Ce, { ...s, ...m, children: h }) : /* @__PURE__ */ r(jo, { type: e });
+  return h ? /* @__PURE__ */ r(ze, { ...s, ...m, children: h }) : /* @__PURE__ */ r(Do, { type: e });
 }
-function jo({ type: t }) {
+function Do({ type: t }) {
   return /* @__PURE__ */ r(
-    f,
+    g,
     {
       sx: {
         p: 2
       },
-      children: /* @__PURE__ */ w(Vt, { icon: /* @__PURE__ */ r(Lt, {}), color: "error", children: [
+      children: /* @__PURE__ */ w(Kt, { icon: /* @__PURE__ */ r(Ot, {}), color: "error", children: [
         "Unsupported Block `",
         t,
         "`"
@@ -2226,13 +2297,13 @@ function jo({ type: t }) {
   );
 }
 export {
-  Po as B,
-  xn as I,
-  gn as P,
-  yn as S,
-  kn as T,
-  hn as a,
-  bn as b,
-  wn as g,
-  vn as p
+  Ho as B,
+  Mn as I,
+  Nn as P,
+  In as S,
+  zn as T,
+  Cn as a,
+  Pn as b,
+  Wn as g,
+  Ln as p
 };