@blocklet/pages-kit-inner-components 0.4.99 → 0.4.101

package/lib/es/chunks/array-C85JziT_.js

@@ -0,0 +1,2086 @@
+import { jsx as o, jsxs as w, Fragment as J } from "react/jsx-runtime";
+import "@mui/icons-material";
+import { Box as x, Tooltip as Ot, styled as xt, Stack as bt, Typography as P, Container as Ft, useTheme as At, createTheme as Ht, ThemeProvider as Dt, Card as Vt, CircularProgress as Ut, Grid as st, CardMedia as Mt, CardContent as Jt } from "@mui/material";
+import yt, { createContext as wt, useMemo as R, useCallback as E, useContext as vt, forwardRef as Yt, useState as j, useRef as Y, Fragment as Gt, isValidElement as kt, useEffect as O } from "react";
+import tt from "lodash/keyBy";
+import { a as z, b as S, E as Xt, f as et, k as ot } from "./state-DsXKwImw.js";
+import { AIForm as lt, AIFormResult as ct } from "@blocklet/ai-runtime/components";
+import { deepmerge as Kt } from "@mui/utils";
+import nt from "lodash/pick";
+import { ErrorBoundary as qt } from "react-error-boundary";
+import { useColorConvert as _t } from "@blocklet/pages-kit/contexts/color";
+import { cx as b, css as X } from "@emotion/css";
+import { Icon as K } from "@iconify/react";
+import Qt from "react-markdown";
+import Zt from "remark-gfm";
+import { LoadingButton as te } from "@mui/lab";
+import { useTheme as $t, styled as _ } from "@arcblock/ux/lib/Theme";
+import ee from "@arcblock/react-hooks/lib/useBrowser";
+import dt from "@arcblock/ux/lib/Colors";
+import { ResponsiveImage as Nt, CustomComponentRenderer as oe } from "@blocklet/pages-kit/components";
+import { isGradient as ne, isColorString as re } from "@blocklet/pages-kit/utils/style";
+import St from "@mui/material/useMediaQuery";
+import C from "lodash/omit";
+import { Icon as Ct } from "@iconify-icon/react";
+import ie from "@arcblock/ux/lib/Screenshot";
+import { Link as ae, NavLink as se, useNavigate as le } from "react-router-dom";
+import ce from "@arcblock/ux/lib/Button";
+import q from "is-uri";
+import { join as M } from "pathe";
+import { withoutTrailingSlash as G, isRelative as de, parseURL as me } from "ufo";
+import { useMessage as pe } from "@blocklet/embed/message";
+import { useLatest as ue } from "ahooks";
+import he from "lodash/isEqual";
+import { EmbedIframe as fe } from "@blocklet/embed/react";
+import { TwitterTimelineEmbed as ge } from "react-twitter-embed";
+import { useUpdate as xe, useMount as be } from "react-use";
+const ye = [
+  {
+    title: "None",
+    value: "none",
+    sx: { py: 0 }
+  },
+  {
+    title: "Small",
+    value: "small",
+    sx: { py: { xs: 2.5, md: 4, lg: 4, xl: 6 } }
+  },
+  {
+    title: "Normal",
+    value: "normal",
+    sx: { py: { xs: 5, md: 7.5, lg: 10, xl: 12.5 } }
+  },
+  {
+    title: "Large",
+    value: "large",
+    sx: { py: { xs: 7.5, md: 10, lg: 12.5, xl: 15 } }
+  }
+], we = [
+  {
+    title: "None",
+    value: "none",
+    sx: { px: 0 }
+  },
+  {
+    title: "Small",
+    value: "small",
+    sx: { px: { xs: 2.5, md: 4, lg: 4, xl: 6 } }
+  },
+  {
+    title: "Normal",
+    value: "normal",
+    sx: { px: { xs: 5, md: 7.5, lg: 10, xl: 12.5 } }
+  },
+  {
+    title: "Large",
+    value: "large",
+    sx: { px: { xs: 7.5, md: 10, lg: 12.5, xl: 15 } }
+  }
+], ve = [
+  {
+    title: "Full Width",
+    value: "full",
+    sx: { maxWidth: "100%" }
+  },
+  {
+    title: "Small",
+    value: "sm",
+    sx: {
+      maxWidth: (t) => t.breakpoints.values.sm,
+      width: "100%",
+      mx: "auto"
+    }
+  },
+  {
+    title: "Normal",
+    value: "md",
+    sx: { maxWidth: (t) => t.breakpoints.values.md, width: "100%", mx: "auto" }
+  },
+  {
+    title: "Large",
+    value: "lg",
+    sx: { maxWidth: (t) => t.breakpoints.values.lg, width: "100%", mx: "auto" }
+  },
+  {
+    title: "Extra Large",
+    value: "xl",
+    sx: { maxWidth: (t) => t.breakpoints.values.xl, width: "100%", mx: "auto" }
+  }
+], ke = tt(ye, "value"), _e = tt(we, "value"), $e = tt(ve, "value"), Ne = /* @__PURE__ */ new Map([
+  ["paddingY", ke],
+  ["paddingX", _e],
+  ["maxWidth", $e]
+]);
+function Pt(t) {
+  var c;
+  const { type: e, value: r, format: i = "sx", defaultValue: n = null } = t, a = Ne.get(e);
+  return a && a != null && a[r] && (c = a == null ? void 0 : a[r]) != null && c[i] ? a[r][i] : n;
+}
+const Bt = wt({
+  page: null,
+  getPageMeta: () => ({}),
+  getPageMetaStyle: () => ({})
+});
+function Se() {
+  return vt(Bt);
+}
+function gn({
+  page: t,
+  children: e,
+  defaultLocale: r = "en",
+  currentLocale: i
+}) {
+  const n = R(() => t ? JSON.parse(JSON.stringify(t)) : null, [JSON.stringify(t)]), a = E(() => {
+    var d;
+    if (!n) return {};
+    const l = i || r;
+    return ((d = n.locales) == null ? void 0 : d[l]) ?? {};
+  }, [n, r, i]), c = E(
+    (l = "sx") => {
+      const d = a();
+      return !d || !d.style ? {} : Object.entries(d.style || {}).reduce((p, [h, u]) => {
+        if (!u) return p;
+        const f = Pt({
+          type: h,
+          value: u,
+          format: l
+        });
+        return f ? { ...p, ...f } : p;
+      }, {});
+    },
+    [a]
+  ), s = R(
+    () => ({
+      page: n,
+      getPageMeta: a,
+      getPageMetaStyle: c
+    }),
+    [n, a, c]
+  );
+  return /* @__PURE__ */ o(Bt.Provider, { value: s, children: e });
+}
+const Ce = Yt(({ onClick: t, ...e }, r) => {
+  const [i, n] = j(!1), a = E(
+    async (c) => {
+      try {
+        n(!0), await (t == null ? void 0 : t(c));
+      } finally {
+        n(!1);
+      }
+    },
+    [t]
+  );
+  return /* @__PURE__ */ o(te, { ref: r, ...e, loading: e.loading || i, onClick: a });
+});
+function Pe({
+  tip: t,
+  tipSucceed: e,
+  title: r,
+  titleSucceed: i,
+  icon: n,
+  iconSucceed: a,
+  autoReset: c,
+  placement: s = "top",
+  ...l
+}) {
+  const [d, m] = j(!1), [p, h] = j(), u = Y(), f = () => {
+    h(void 0), c && (u.current = window.setTimeout(() => {
+      m(!1);
+    }, 3e3));
+  }, y = () => {
+    clearTimeout(u.current);
+  }, g = d ? a : n, v = p ? /* @__PURE__ */ o(x, { color: "error", children: p.message }) : d && e || t;
+  return /* @__PURE__ */ o(Ot, { title: v, disableInteractive: !0, placement: s, onClose: f, onOpen: y, children: /* @__PURE__ */ o("span", { children: /* @__PURE__ */ o(
+    Ce,
+    {
+      startIcon: g && (typeof g == "string" ? /* @__PURE__ */ o(K, { icon: g }) : g),
+      loadingPosition: g ? "start" : void 0,
+      ...l,
+      onClick: async (N) => {
+        if (l.onClick)
+          try {
+            await l.onClick(N), m(!0);
+          } catch (B) {
+            h(B);
+          }
+      },
+      children: d ? i : r
+    }
+  ) }) });
+}
+const Be = yt.lazy(() => import("react-syntax-highlighter").then((t) => ({ default: t.Prism }))), Ie = xt((t) => /* @__PURE__ */ o(
+  Qt,
+  {
+    ...t,
+    remarkPlugins: [Zt],
+    components: {
+      pre: We,
+      code: ({ node: e, inline: r, className: i, children: n, ...a }) => {
+        if (!n) return null;
+        const c = /language-(\w+)/.exec(i || "");
+        return r ? /* @__PURE__ */ o(x, { component: "code", className: i, ...a, children: n }) : /* @__PURE__ */ o(x, { component: Be, language: c == null ? void 0 : c[1], ...a, sx: { borderRadius: 1 }, children: String(n).replace(/\n$/, "") });
+      },
+      table: ({ className: e, children: r }) => /* @__PURE__ */ o(x, { sx: { overflow: "auto", my: 1 }, children: /* @__PURE__ */ o("table", { className: e, children: r }) })
+    }
+  }
+))`
+  width: 100%;
+  overflow: hidden;
+  word-break: break-word;
+
+  > * {
+    &:first-child /* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */ {
+      margin-top: 0;
+    }
+    &:last-child /* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */ {
+      margin-bottom: 0;
+    }
+  }
+
+  pre {
+    overflow: auto;
+  }
+
+  li {
+    margin: 0;
+    padding: 0;
+  }
+
+  li p {
+    display: inline-block;
+    vertical-align: top;
+    margin: 0;
+    padding: 0;
+  }
+
+  table {
+    border-collapse: collapse;
+    white-space: nowrap;
+
+    th,
+    td {
+      border: 1px solid grey;
+      padding: 4px 8px;
+    }
+  }
+
+  a {
+    color: ${({ theme: t }) => t.palette.primary.main};
+
+    :hover {
+      text-decoration: underline;
+    }
+  }
+
+  &.writing > *:last-child {
+    &:after {
+      content: '';
+      display: inline-block;
+      vertical-align: middle;
+      height: 1.2em;
+      margin-top: -0.2em;
+      margin-left: 0.1em;
+      border-right: 0.2em solid orange;
+      border-radius: 10px;
+      animation: blink-caret 0.75s step-end infinite;
+
+      @keyframes blink-caret {
+        from,
+        to {
+          border-color: transparent;
+        }
+        50% {
+          border-color: ${({ theme: t }) => t.palette.secondary.main};
+        }
+      }
+    }
+  }
+`;
+function We({ children: t }) {
+  const e = t == null ? void 0 : t.props;
+  if (!(e != null && e.children)) return null;
+  const r = /language-(\w+)/.exec(e.className || ""), i = r == null ? void 0 : r[1];
+  return /* @__PURE__ */ w(
+    x,
+    {
+      component: "div",
+      sx: {
+        fontSize: 14,
+        borderRadius: 1,
+        bgcolor: "rgb(245, 242, 240)",
+        "> pre": { mt: "0 !important" }
+      },
+      children: [
+        /* @__PURE__ */ w(bt, { direction: "row", alignItems: "center", p: 0.5, pl: 1.5, borderBottom: 1, borderColor: "grey.200", children: [
+          /* @__PURE__ */ o(x, { children: i }),
+          /* @__PURE__ */ o(x, { flex: 1 }),
+          /* @__PURE__ */ o(
+            Pe,
+            {
+              autoReset: !0,
+              title: /* @__PURE__ */ o(K, { icon: "tabler:copy" }),
+              titleSucceed: /* @__PURE__ */ o(K, { icon: "tabler:copy-check" }),
+              sx: { minWidth: 32, minHeight: 32, p: 0, fontSize: 18 },
+              onClick: () => {
+                window.navigator.clipboard.writeText(e.children);
+              }
+            }
+          )
+        ] }),
+        t
+      ]
+    }
+  );
+}
+function T({ actions: t, center: e, className: r, align: i }) {
+  return t && (t != null && t.length) ? /* @__PURE__ */ o(
+    x,
+    {
+      className: b(
+        "flex gap-4 flex-wrap",
+        "lg:flex-row lg:gap-8",
+        (e || i === "center") && "justify-center",
+        !e && i === "right" && "justify-end",
+        !e && i === "left" && "justify-start",
+        r
+      ),
+      sx: { alignItems: "center" },
+      children: t
+    }
+  ) : null;
+}
+const Re = "section", je = xt(x)`
+  overflow: hidden;
+
+  .section__title {
+    margin-top: 0;
+    font-weight: 700;
+  }
+  .section__title_non_big {
+    font-size: 32px;
+    @media (max-width: 600px) {
+      font-size: 24px;
+    }
+  }
+  &.base-info .section__tag {
+    margin-top: 0;
+    margin-bottom: 2vw;
+    background-color: ${({ theme: t }) => t.palette.primary.main};
+    white-space: nowrap;
+    max-width: 100%;
+    display: inline-block;
+    padding: 0 10px;
+    justify-content: flex-start;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-size: 12px;
+    color: #fff;
+    border-radius: 4px;
+    line-height: 20px;
+  }
+  .section__title {
+    a {
+      color: ${({ theme: t }) => t.palette.primary.main};
+    }
+    p {
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+  }
+  .section__description {
+    margin-bottom: 4vw;
+    margin-top: 0;
+    a {
+      color: ${({ theme: t }) => t.palette.primary.main};
+    }
+    p {
+      margin-top: 0;
+      margin-bottom: 0.5rem;
+    }
+  }
+  @media (min-width: ${({ theme: t }) => t.breakpoints.values[Re]}px) {
+    .section__tag {
+      margin-bottom: 32px;
+    }
+    .section__title {
+      margin-bottom: 32px;
+    }
+    .section__description {
+      margin-bottom: 40px;
+    }
+  }
+`;
+function F({
+  title: t,
+  description: e,
+  descriptionMarkdown: r,
+  actions: i,
+  className: n = "",
+  classes: a = {},
+  prepend: c,
+  append: s,
+  level: l = 2,
+  tag: d,
+  badge: m,
+  center: p,
+  logo: h,
+  titleAppearance: u,
+  descriptionAppearance: f,
+  ...y
+}) {
+  const g = _t();
+  if (!t && !e && !i && !m && !d && !c && !s && !h) return null;
+  const v = Math.max(Math.min(5, l + 1), 1), k = {
+    1: "xl:!text-3xl lg:!text-2xl md:!text-xl",
+    2: "xl:!text-2xl lg:!text-xl md:!text-lg",
+    3: "xl:!text-2xl lg:!text-xl md:!text-lg",
+    4: "xl:!text-xl lg:!text-lg md:!text-md",
+    5: "xl:!text-lg md:!text-md sm:!text-sm",
+    6: "!text-sm"
+  }, N = l === 0 ? "big" : `h${v}`, B = l === 0;
+  return /* @__PURE__ */ w(je, { className: b("base-info", "lg:text-left", p && "!text-center", n), ...y, children: [
+    c && /* @__PURE__ */ o("div", { children: c }),
+    (d || m) && /* @__PURE__ */ o("div", { className: b("section__tag", (a == null ? void 0 : a.tag) || (a == null ? void 0 : a.badge)), children: d || m }),
+    h && /* @__PURE__ */ o("img", { className: "w-[120px] m-auto mb-8", src: h, alt: "info", loading: "lazy" }),
+    t && /* @__PURE__ */ o(
+      P,
+      {
+        sx: {
+          whiteSpace: "pre-wrap",
+          mb: e ? "2vw" : 0,
+          ...(u == null ? void 0 : u.color) && { color: `${g(u.color)} !important` }
+        },
+        className: b(
+          "section__title",
+          "text-gray-800",
+          "dark:text-gray-50",
+          a.title,
+          "page-kit-section__title",
+          B ? "" : "section__title_non_big"
+        ),
+        component: `h${Math.max(l, 1)}`,
+        variant: N,
+        children: t
+      }
+    ),
+    e && (r ? /* @__PURE__ */ o(
+      x,
+      {
+        sx: {
+          ...(f == null ? void 0 : f.color) && { color: `${g(f.color)} !important` }
+        },
+        component: Ie,
+        className: b(
+          "section__description",
+          "text-gray-800",
+          "dark:text-gray-100",
+          k[v],
+          a.description,
+          "page-kit-section__description"
+        ),
+        children: e
+      }
+    ) : /* @__PURE__ */ o(
+      P,
+      {
+        sx: {
+          whiteSpace: "pre-wrap",
+          ...(f == null ? void 0 : f.color) && { color: `${g(f.color)} !important` }
+        },
+        className: b(
+          "section__description",
+          "text-gray-800",
+          "dark:text-gray-100",
+          k[v],
+          a.description,
+          "page-kit-section__description"
+        ),
+        component: "div",
+        variant: "body1",
+        gutterBottom: !0,
+        children: e
+      }
+    )),
+    /* @__PURE__ */ o(T, { actions: i, center: p, className: "mt-8" }),
+    s && /* @__PURE__ */ o("div", { children: s })
+  ] });
+}
+const A = [
+  "actions",
+  "append",
+  "badge",
+  "tag",
+  "center",
+  "description",
+  "descriptionMarkdown",
+  "level",
+  "logo",
+  "prepend",
+  "title",
+  "titleAppearance",
+  "descriptionAppearance"
+];
+function It(t) {
+  if (t.type === Gt) {
+    const r = (t.props.children || []).filter((i) => kt(i));
+    return r.length === 1 ? It(r[0]) : r.length > 1;
+  }
+  return Array.isArray(t);
+}
+const I = "&>*";
+function rt({ children: t, col: e, gap: r, className: i, align: n, sx: a, type: c, ...s } = {
+  children: null,
+  className: "",
+  col: 3,
+  gap: void 0,
+  sx: {},
+  align: "center",
+  type: "default"
+}) {
+  const l = $t(), d = Number(Math.floor(100 / e * 100) / 100), m = {
+    center: "justify-center items-center",
+    left: "justify-start items-center",
+    right: "justify-end items-center",
+    top: "justify-center items-start",
+    bottom: "justify-center items-end",
+    "top-left": "justify-start items-start",
+    "top-right": "justify-end items-start",
+    "bottom-left": "justify-start items-end",
+    "bottom-right": "justify-end items-end"
+  }, p = m[n] || m.center;
+  let u = r ?? ({
+    2: 6,
+    3: 4,
+    4: 4,
+    5: 3,
+    6: 3
+  }[e] || 0);
+  It(t) || (u = 0);
+  const y = (e - 1) * u / e;
+  let g = { ...a, gap: `${u}rem` };
+  const v = { [I]: { width: "100%" } }, k = {}, N = {}, B = {};
+  switch (v.gap = "1rem", k.gap = `${u / 2}rem`, e) {
+    case 3:
+    case 4:
+      k[I] = {
+        width: `calc(50% - ${u / 2}rem)`
+      };
+      break;
+    case 5:
+    case 6:
+      v[I] = {
+        width: `calc(50% - ${u / 2 / 2}rem)`
+      }, k[I] = {
+        width: `calc(50% - ${u / 2 / 2}rem)`
+      }, N[I] = {
+        width: `calc(33.33% - ${u * 2 / 3}rem)`
+      };
+      break;
+  }
+  return g[I] = { width: `calc(${d}% - ${y}rem)` }, g[`@media (max-width: ${l.breakpoints.values.xl}px)`] = B, g[`@media (max-width: ${l.breakpoints.values.lg}px)`] = N, g[`@media (max-width: ${l.breakpoints.values.md}px)`] = k, g[`@media (max-width: ${l.breakpoints.values.sm}px)`] = v, c === "wall" && (g = { ...a, gap: `${u}rem` }, g[I] = { width: `calc(${d}% - ${y}rem)` }, v[I] = { width: `calc(45% - ${u / 2 / 2}rem)` }, g[`@media (max-width: ${l.breakpoints.values.sm}px)`] = v), /* @__PURE__ */ o(x, { className: b("flex flex-wrap flex-row h-full", p, i), sx: g, ...s, children: t });
+}
+function ze() {
+  const t = navigator.userAgent.toLowerCase();
+  return t.includes("safari") && !t.includes("chrome");
+}
+function Te(t = "") {
+  if (t.startsWith("data:image/svg+xml,")) return !0;
+  const e = /^(((ht|f)tps?):\/\/)?([^!@#$%^&*?.\s-]([^!@#$%^&*?.\s]{0,63}[^!@#$%^&*?.\s])?\.)+[a-z]{2,6}\/?/, r = /^(\/|\.\/|\.\.\/)(?:[^/]+\/)*[^/]+$/;
+  return e.test(t) || r.test(t);
+}
+function Q(t) {
+  return (t == null ? void 0 : t.endsWith(".mp4")) || (t == null ? void 0 : t.endsWith(".m4v")) || (t == null ? void 0 : t.endsWith(".webm"));
+}
+function Le(t) {
+  return t != null && t.endsWith(".mp4") || t != null && t.endsWith(".m4v") ? "video/mp4" : t != null && t.endsWith(".webm") ? "video/webm" : void 0;
+}
+function Ee(t) {
+  let e = {};
+  return typeof t == "string" ? ne(t) ? e.image = t : (e.image = S(t), re(t) && (e.color = t, e.image = "")) : e = t, e;
+}
+function Oe() {
+  const [t, e] = j(Date.now());
+  return O(() => {
+    const r = () => {
+      e(Date.now());
+    };
+    return document.addEventListener("visibilitychange", r), () => {
+      document.removeEventListener("visibilitychange", r);
+    };
+  }, []), t;
+}
+function mt(t, e, r, i, n) {
+  let a = null;
+  const { color: c = "", image: s } = Ee(e);
+  return s && Te(s) ? (delete r.backgroundColor, !(t.mobile.apple.device || ze()) && Q(s) ? a = /* @__PURE__ */ o(
+    x,
+    {
+      component: "video",
+      className: "section-bg",
+      width: "100%",
+      autoPlay: !0,
+      loop: !0,
+      muted: !0,
+      controls: !1,
+      playsInline: !0,
+      poster: z(S(i), 1200, "quality"),
+      src: Q(s) ? s : z(s, 1200, "quality"),
+      sx: {
+        position: "absolute",
+        zIndex: -9999,
+        right: 0,
+        left: 0,
+        top: 0,
+        width: "100%",
+        height: "100%",
+        objectFit: "cover"
+      }
+    },
+    s
+  ) : a = /* @__PURE__ */ o(
+    Nt,
+    {
+      src: s,
+      sizesAttr: {
+        sm: 600,
+        md: 900,
+        lg: 1200
+      },
+      className: "section-bg",
+      alt: "",
+      width: "100%",
+      loading: "lazy",
+      sx: {
+        position: "absolute",
+        zIndex: -9999,
+        right: 0,
+        left: 0,
+        top: 0,
+        width: "100%",
+        height: "100%",
+        objectFit: "cover"
+      }
+    },
+    n || s
+  )) : s ? r.backgroundImage = `${s} !important` : c && (r.backgroundColor = `${c} !important`), a;
+}
+function Fe({ autoWidth: t, children: e, ...r }) {
+  return t ? /* @__PURE__ */ o(x, { display: "flex", ...r, children: e }) : /* @__PURE__ */ o(Ft, { ...r, children: e });
+}
+function H({
+  dark: t = !1,
+  children: e,
+  className: r,
+  sx: i = {},
+  boxed: n = { show: !1 },
+  padding: a = "normal",
+  boxProps: c,
+  type: s,
+  ...l
+}) {
+  const d = { ...i }, m = St((u) => u.breakpoints.down("md"));
+  t && (d.color = dt.common.white, d.backgroundColor = `${dt.grey[900]} !important`), n.show && (d.display = "flex");
+  const p = R(() => !Number(l.boxMaxWidth) || m ? {
+    width: "100%"
+  } : s === "wall" && l.boxMaxWidth ? {
+    maxWidth: `${l.boxMaxWidth}px !important`,
+    width: "100%"
+  } : {
+    width: "100%"
+  }, [l.boxMaxWidth, m, s]), h = Pt({
+    type: "paddingY",
+    value: a || "normal",
+    // section default is normal
+    defaultValue: ""
+  });
+  return /* @__PURE__ */ o(
+    Ae,
+    {
+      component: "section",
+      styles: { ...d, ...h },
+      className: b("base-section", "px-2 md:px-5 lg:px-5 xl:px-10", r, {
+        dark: t
+      }),
+      ...C(
+        l,
+        "hoverStyle",
+        "boxMaxWidth",
+        "embedUrl",
+        "autoWidth",
+        "paddingXY",
+        "iframeHeight",
+        "titleAppearance",
+        "descriptionAppearance"
+      ),
+      children: /* @__PURE__ */ o(Fe, { autoWidth: l == null ? void 0 : l.autoWidth, className: b("section-content h-full"), sx: p, children: n.show ? /* @__PURE__ */ o(Wt, { ...c, boxed: n, children: e }) : e })
+    }
+  );
+}
+function Wt({
+  background: t = "",
+  backgroundVideoPoster: e,
+  children: r,
+  sx: i = {},
+  boxed: n = { show: !1 },
+  className: a = "",
+  styles: c = {},
+  ...s
+}) {
+  const l = { ...c, ...i }, d = _t();
+  let m = null;
+  const p = St((f) => f.breakpoints.up("sm")), h = ee(), u = Oe();
+  return t && (m = mt(
+    h,
+    typeof t == "string" ? d(t) : t,
+    l,
+    e,
+    u
+  )), n.show && (l.borderRadius = "10px", l.padding === void 0 && (l.padding = p ? "50px" : "20px"), n != null && n.border && (l.border = "1px solid #c0c0c0"), n != null && n.background && (m = mt(
+    h,
+    typeof (n == null ? void 0 : n.background) == "string" ? d(n == null ? void 0 : n.background) : n == null ? void 0 : n.background,
+    l,
+    n == null ? void 0 : n.backgroundVideoPoster,
+    u
+  ))), /* @__PURE__ */ w(
+    x,
+    {
+      ...s,
+      sx: {
+        ...l,
+        ...m ? { position: "relative", overflow: "hidden", zIndex: 0 } : {}
+      },
+      className: b(a, (n == null ? void 0 : n.boxShadow) && "shadow-xl"),
+      children: [
+        m,
+        r
+      ]
+    }
+  );
+}
+const Ae = _(Wt)`
+  &:nth-of-type(even) {
+    background: #f8f8f8;
+  }
+
+  @media (max-width: 600px) {
+    .section__title {
+      font-size: 24px;
+    }
+
+    .base-info {
+      > *:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+`;
+function Rt({ icon: t, ...e }) {
+  return /* @__PURE__ */ o(Ct, { icon: t, ...e, ref: null });
+}
+function $(t, e) {
+  const r = nt(t, e), i = C(t, e);
+  return [r, i];
+}
+const jt = ["title", "description", "actions", "badge", "tag", "prepend", "append", "logo"];
+function He({
+  image: t,
+  imageBorder: e,
+  imageShadow: r,
+  className: i,
+  reverse: n = !1,
+  fullSizeImage: a,
+  ...c
+}) {
+  const [s, l] = $(c, A), d = Object.keys(s).length > 0 && Object.values(nt(s, jt)).filter(Boolean).length > 0 && /* @__PURE__ */ o(F, { ...s }), m = kt(t) ? t : /* @__PURE__ */ o(x, { component: "img", src: t, alt: "", className: "block" }), p = ["phone", "macbook"].includes(e), h = t && /* @__PURE__ */ o(
+    x,
+    {
+      className: b(
+        "section__image",
+        "m-auto, leading-[1] text-center",
+        r && "shadow-xl",
+        s != null && s.center ? "flex justify-center items-center" : ""
+      ),
+      sx: {
+        border: e === !0 ? "1px solid #c0c0c0" : void 0,
+        borderRadius: 2,
+        overflow: "hidden",
+        // FIXME: Screenshot 组件无法设置最外层 div 的样式，只能通过父元素设置
+        "> div": p ? { width: "100%", video: { borderRadius: "0 !important" } } : void 0
+      },
+      children: p ? (
+        // @ts-ignore
+        /* @__PURE__ */ o(ie, { type: e, sx: { width: "100%" }, children: m })
+      ) : m
+    }
+  );
+  return /* @__PURE__ */ o(
+    H,
+    {
+      className: b(
+        "section--block",
+        i,
+        a && !n && X`
+            .section-bg {
+              height: 80%;
+            }
+          `
+      ),
+      ...l,
+      boxProps: a ? { sx: { padding: 0, overflow: "hidden" } } : void 0,
+      children: /* @__PURE__ */ o(
+        rt,
+        {
+          col: t ? 2 : 1,
+          className: a ? X`
+                display: flex;
+                flex-direction: column;
+
+                > .base-info,
+                > .section__image {
+                  width: 100%;
+
+                  > img,
+                  > video {
+                    width: 100%;
+                  }
+                }
+              ` : void 0,
+          children: n ? /* @__PURE__ */ w(J, { children: [
+            h,
+            d
+          ] }) : /* @__PURE__ */ w(J, { children: [
+            d,
+            h
+          ] })
+        }
+      )
+    }
+  );
+}
+const D = ["editing", "height", "locale", "dev", "sx"];
+function De(t) {
+  const { className: e, ...r } = t;
+  return /* @__PURE__ */ o(Ve, { ...r, className: b("BlockBase-root", e) });
+}
+const Ve = _(x)`
+  position: relative;
+`;
+function Ue({
+  widget: t,
+  reverse: e,
+  projectId: r,
+  assistantId: i,
+  working: n,
+  submitTitle: a,
+  submitIcon: c,
+  submitColor: s,
+  placeholder: l,
+  loadingIndicator: d,
+  section: m,
+  ...p
+}) {
+  const [{ editing: h }, u] = $(p, D), [f, y] = $(u, A), g = r && i ? { projectId: r, gitRef: "main", assistantId: i, working: !0 } : void 0, v = {
+    children: a,
+    endIcon: c ? /* @__PURE__ */ o(Rt, { icon: c }) : void 0,
+    sx: {
+      background: s || void 0,
+      ":hover": {
+        background: s || void 0,
+        opacity: 0.8
+      }
+    }
+  }, k = [], N = l && /* @__PURE__ */ o(P, { variant: "caption", color: "text.disabled", children: l }), B = d && /* @__PURE__ */ o(P, { variant: "caption", color: "text.disabled", children: d });
+  Object.keys(f).length > 0 && Object.values(nt(f, jt)).filter(Boolean).length > 0 && k.push(/* @__PURE__ */ o(F, { ...f }, "base-info")), g && (t === "form" ? k.push(/* @__PURE__ */ o(lt, { identifier: g, SubmitProps: v }, "form")) : t === "result" ? k.push(
+    /* @__PURE__ */ o(
+      ct,
+      {
+        identifier: g,
+        placeholder: N,
+        loadingIndicator: B
+      },
+      "result"
+    )
+  ) : k.push(
+    /* @__PURE__ */ w(bt, { width: "100%", gap: 2, direction: "row", children: [
+      /* @__PURE__ */ o(lt, { identifier: g, BoxProps: { flex: 1 }, SubmitProps: v }),
+      /* @__PURE__ */ o(
+        ct,
+        {
+          identifier: g,
+          BoxProps: { flex: 1 },
+          placeholder: N,
+          loadingIndicator: B
+        }
+      )
+    ] }, "form-result")
+  )), e && k.reverse();
+  const at = At(), Et = R(
+    () => Ht(Kt(at, { palette: { primary: s ? { main: s } : void 0 } })),
+    [s, at]
+  );
+  return /* @__PURE__ */ o(qt, { fallbackRender: Xt, children: /* @__PURE__ */ o(Dt, { theme: Et, children: /* @__PURE__ */ o(H, { ...y, sx: h ? { pointerEvents: "none" } : {}, children: /* @__PURE__ */ o(rt, { col: k.length, children: k }) }) }) });
+}
+const zt = wt({
+  pages: [],
+  project: void 0
+}), { Provider: xn, Consumer: bn } = zt;
+function Tt() {
+  return vt(zt);
+}
+function Me({ icon: t, className: e = "", size: r = "1rem", ...i }) {
+  return /* @__PURE__ */ o(Je, { component: Rt, className: b("css-icon", e), size: r, ...i, icon: t });
+}
+const Je = _(x)`
+  &.css-icon {
+    display: inline-block;
+    width: ${({ size: t }) => t};
+    height: ${({ size: t }) => t};
+  }
+`;
+function Ye({ icon: t, className: e = "", size: r = "1rem", imageMeta: i, ...n }) {
+  const a = z(S(t), 540), [c, s] = j(!1), l = $t();
+  return c ? /* @__PURE__ */ o(Me, { icon: "i-mdi:image", color: l.palette.grey[500], size: r, className: e, ...n }) : /* @__PURE__ */ o(Ge, { className: b("image-icon", e), size: r, ...n, children: /* @__PURE__ */ o(
+    "img",
+    {
+      className: "image-icon__image",
+      src: a,
+      onError: () => s(!0),
+      width: i == null ? void 0 : i.naturalWidth,
+      height: i == null ? void 0 : i.naturalHeight,
+      alt: (i == null ? void 0 : i.filename) || "card-icon",
+      loading: "lazy"
+    }
+  ) });
+}
+const Ge = _(x)`
+  display: inline-block;
+  width: ${({ size: t }) => t};
+  height: ${({ size: t }) => t};
+  .image-icon__image {
+    object-fit: contain;
+    height: 100%;
+    width: 100%;
+  }
+`, it = (t) => typeof t == "string" && /^[\w-_]+:[\w-_]+$/.test(t);
+function Z({ icon: t, size: e = "1rem", imageMeta: r, ...i }) {
+  const n = window.isNaN(e) ? e : `${e}px`;
+  return it(t) ? /* @__PURE__ */ o(Ct, { icon: t }) : /* @__PURE__ */ o(Xe, { component: Ye, imageMeta: r, className: "base-icon", icon: t, size: n, ...i });
+}
+const Xe = _(x)`
+  flex-shrink: 0;
+`;
+function L({ text: t, children: e, icon: r = "", endIcon: i, color: n = "primary", link: a = "", href: c = "", ...s }) {
+  const l = r ? /* @__PURE__ */ o(Z, { icon: r }) : null, d = i ? /* @__PURE__ */ o(Z, { icon: i }) : null, m = a || c, p = { ...s };
+  return m && (p.href = m, q(m) && (p.target = p.target || "_blank")), /* @__PURE__ */ o(ce, { startIcon: l, endIcon: d, color: n, ...p, children: t || e });
+}
+function Lt({ editing: t, text: e, ...r }) {
+  const { pages: i = [] } = Tt(), n = i.find((a) => a.id === (r.link || r.linkId));
+  if (t)
+    return /* @__PURE__ */ o(L, { ...C(r, ["link", "linkId"]), children: e });
+  if (n) {
+    const a = n.path || "/";
+    return /* @__PURE__ */ o(ae, { to: a, children: /* @__PURE__ */ o(L, { ...C(r, ["link", "linkId"]), children: e }) });
+  }
+  return /* @__PURE__ */ o(L, { ...C(r, "linkId"), children: e });
+}
+function W({ type: t = "", icon: e = "", size: r = "3rem", className: i = "", ...n }) {
+  return /* @__PURE__ */ o(Z, { icon: e || t, size: r, className: b("content-icon", i), ...n });
+}
+W.propTypes = {};
+W.defaultProps = {
+  type: "",
+  icon: "",
+  size: "3rem",
+  color: "inherit",
+  className: ""
+};
+function Ke({
+  to: t,
+  base: e,
+  children: r,
+  className: i,
+  activeClassName: n = "active",
+  target: a = "auto",
+  autoExternalMark: c = !1,
+  useRouterLink: s,
+  ...l
+}) {
+  const { pages: d = [], locale: m = "" } = {}, p = e ? M("/", e) : e || "";
+  let h = a === "auto" ? "_self" : a, u = M(p, t);
+  const f = c ? q(u) : !1;
+  if (e)
+    return u = M(p, m, t), /* @__PURE__ */ o(
+      "a",
+      {
+        className: `no-underline ${i}`,
+        href: G(u),
+        rel: "noreferrer noopener",
+        target: h,
+        ...l,
+        children: r
+      }
+    );
+  if (q(t))
+    a === "auto" && (h = "_blank"), u = t;
+  else {
+    de(u) && (u = M(window.location.pathname, u));
+    const y = me(`${window.location.origin}${u}`), g = d.some((v) => v.pathname === y.pathname);
+    if (s || g)
+      return /* @__PURE__ */ o(
+        se,
+        {
+          end: !0,
+          to: G(u),
+          className: ({ isActive: v }) => b(i, v ? n : ""),
+          ...l,
+          children: r
+        }
+      );
+  }
+  return /* @__PURE__ */ w(
+    "a",
+    {
+      className: `no-underline ${i}`,
+      href: G(u),
+      rel: "noreferrer noopener",
+      target: h,
+      ...l,
+      children: [
+        r,
+        f && /* @__PURE__ */ o(W, { icon: "i-mdi:arrow-top-right", size: "0.9em", className: "smart-link__mark", style: { marginLeft: 5 } })
+      ]
+    }
+  );
+}
+function V({
+  prepend: t,
+  append: e,
+  children: r,
+  className: i = "",
+  dark: n = !1,
+  border: a = !0,
+  ...c
+}) {
+  let s = {};
+  const { pages: l = [] } = Tt(), d = l.find((h) => h.id === c.link), m = !r || yt.Children.toArray(r).every((h) => h === null);
+  return c.link && (s = {
+    component: Ke,
+    to: (d == null ? void 0 : d.path) || c.link,
+    useRouterLink: !0
+  }), /* @__PURE__ */ w(
+    qe,
+    {
+      className: b(
+        "base-card card",
+        { "border-gray-200": a },
+        { "dark:border-gray-500": n && a },
+        { dark: n, "border-transparent": !a },
+        i
+      ),
+      ...s,
+      ...C(c, ["listType", "dark", "iconColor", "link", "hoverStyle", "imageSize"]),
+      children: [
+        t,
+        !m && /* @__PURE__ */ o("div", { className: "card__body", children: r }),
+        e
+      ]
+    }
+  );
+}
+const qe = _(x)`
+  &.base-card {
+    text-align: left;
+    border-width: 1px;
+    border-style: solid;
+    border-radius: 12px;
+    overflow: hidden;
+    &,
+    &:hover {
+      text-decoration: none;
+    }
+  }
+  .card__body {
+    padding: 15px 15px;
+  }
+`;
+function U({
+  align: t = "left",
+  title: e,
+  titleProps: r = {},
+  description: i,
+  descriptionProps: n = {}
+}) {
+  return /* @__PURE__ */ w(J, { children: [
+    e && /* @__PURE__ */ o(
+      P,
+      {
+        className: b("card__title text-gray-800", "dark:text-gray-50"),
+        component: "h5",
+        variant: "h5",
+        gutterBottom: !0,
+        align: t,
+        ...r,
+        children: e
+      }
+    ),
+    i && /* @__PURE__ */ o(
+      P,
+      {
+        className: b("card__description", "text-gray-500", "dark:text-gray-400"),
+        component: "div",
+        variant: "body1",
+        gutterBottom: !0,
+        align: t,
+        ...n,
+        children: i
+      }
+    )
+  ] });
+}
+function Qe({
+  image: t,
+  title: e,
+  description: r,
+  imageProps: i = {},
+  imageMeta: n,
+  imageSize: a,
+  titleProps: c = {},
+  descriptionProps: s = {},
+  actions: l,
+  align: d,
+  ...m
+}) {
+  const p = it(t), h = z(S(t), 540);
+  return /* @__PURE__ */ w(
+    Ze,
+    {
+      className: "card-article",
+      ...m,
+      prepend: /* @__PURE__ */ o("div", { className: "card__image__wrap", children: p && t ? /* @__PURE__ */ o(
+        x,
+        {
+          sx: {
+            position: "absolute",
+            left: 0,
+            top: 0,
+            right: 0,
+            bottom: 0,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center"
+          },
+          children: /* @__PURE__ */ o(W, { icon: t, color: "primary.main" })
+        }
+      ) : h && /* @__PURE__ */ o(
+        "img",
+        {
+          className: "card__image",
+          src: h,
+          ...i,
+          alt: i.alt || (n == null ? void 0 : n.filename) || "card-image",
+          width: n == null ? void 0 : n.naturalWidth,
+          height: n == null ? void 0 : n.naturalHeight,
+          style: { width: "100%", height: "100%", objectFit: a || "cover", objectPosition: "center" },
+          loading: "lazy"
+        }
+      ) }),
+      children: [
+        e || r ? /* @__PURE__ */ o(
+          U,
+          {
+            align: d,
+            title: e,
+            titleProps: c,
+            description: r,
+            descriptionProps: s
+          }
+        ) : null,
+        l != null && l.length ? /* @__PURE__ */ o(T, { align: d, actions: l, className: "mt-4" }) : null
+      ]
+    }
+  );
+}
+const Ze = _(V)`
+  ${(t) => t.hoverStyle === "none" ? "" : t.link ? `transition: box-shadow ease .3s;
+              &:hover {
+                box-shadow: 0 0 10px rgba(95, 142, 244, 0.42);
+              }` : ""}
+
+  .card__image__wrap {
+    padding-top: 61.8%;
+    width: 100%;
+    position: relative;
+  }
+  .card__image {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    width: 100%;
+    height: 100%;
+    object-position: top center;
+  }
+`, pt = "section";
+function ut({
+  title: t,
+  image: e,
+  imageMeta: r,
+  description: i,
+  actions: n,
+  align: a,
+  listType: c = "",
+  className: s = "",
+  ...l
+}) {
+  return /* @__PURE__ */ w(to, { className: b("card", `list-type-${c}`, s), align: a, ...l, children: [
+    e && /* @__PURE__ */ o(
+      W,
+      {
+        icon: e,
+        color: "primary.main",
+        size: c === "icon-title" ? "1.2rem" : "3rem",
+        imageMeta: r
+      }
+    ),
+    t || i ? /* @__PURE__ */ o(U, { align: a, title: t, description: i }) : null,
+    n != null && n.length ? /* @__PURE__ */ o(T, { align: a, actions: n, className: "mt-4" }) : null
+  ] });
+}
+const to = _(V)`
+  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[pt]}px) {
+    padding: 1.5rem 2rem;
+  }
+  @media (max-width: ${({ theme: t }) => t.breakpoints.values.sm}px) {
+    height: auto;
+    min-height: unset;
+  }
+
+  ${(t) => t.hoverStyle === "none" ? "" : t.link ? `transition: box-shadow ease .3s;
+              &:hover {
+                box-shadow: 0 0 10px rgba(95, 142, 244, 0.42);
+              }` : ""}
+
+  .card__title {
+    font-weight: 700;
+    margin-top: 24px;
+    margin-bottom: 12px;
+    a {
+      color: ${({ theme: t }) => t.palette.primary.main};
+    }
+  }
+  .card__description {
+    a {
+      color: ${({ theme: t }) => t.palette.primary.main};
+    }
+  }
+  .card__body {
+    padding: 0;
+    ${({ align: t }) => `text-align:${t || "left"};`}
+  }
+
+  &.list-type-icon-title {
+    padding: 1.2rem;
+    .title-line {
+      display: flex;
+    }
+    .card__title {
+      margin: 0;
+      font-size: 1em;
+    }
+    .css-icon {
+      margin-right: 0.5rem;
+    }
+  }
+
+  @media (min-width: ${({ theme: t }) => t.breakpoints.values[pt]}px) {
+    padding: 2rem 2rem;
+    text-align: left;
+    box-sizing: border-box;
+  }
+`;
+function eo({
+  image: t,
+  title: e,
+  description: r,
+  imageProps: i = {},
+  imageMeta: n,
+  imageSize: a,
+  titleProps: c = {},
+  descriptionProps: s = {},
+  actions: l,
+  align: d,
+  ...m
+}) {
+  const p = it(t), h = z(S(t), 540);
+  return /* @__PURE__ */ w(
+    oo,
+    {
+      className: "card-article",
+      ...m,
+      prepend: /* @__PURE__ */ o("div", { className: "card__image__wrap", children: p && t ? /* @__PURE__ */ o(
+        x,
+        {
+          sx: {
+            position: "absolute",
+            left: 0,
+            top: 0,
+            right: 0,
+            bottom: 0,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center"
+          },
+          children: /* @__PURE__ */ o(W, { icon: t, color: "primary.main" })
+        }
+      ) : h && /* @__PURE__ */ o(
+        x,
+        {
+          component: "img",
+          className: "card__image",
+          src: h,
+          ...i,
+          alt: i.alt || (n == null ? void 0 : n.filename) || "card-image",
+          width: n == null ? void 0 : n.naturalWidth,
+          height: n == null ? void 0 : n.naturalHeight,
+          style: { width: "100%", height: "100%", objectFit: a || "contain", objectPosition: "center" },
+          loading: "lazy"
+        }
+      ) }),
+      children: [
+        e || r ? /* @__PURE__ */ o(
+          U,
+          {
+            align: d,
+            title: e,
+            titleProps: c,
+            description: r,
+            descriptionProps: s
+          }
+        ) : null,
+        l != null && l.length ? /* @__PURE__ */ o(T, { align: d, actions: l, className: "mt-4" }) : null
+      ]
+    }
+  );
+}
+const oo = _(V)`
+  ${(t) => t.hoverStyle === "none" ? "" : t.link ? `transition: box-shadow ease .3s;
+              &:hover {
+                box-shadow: 0 0 10px rgba(95, 142, 244, 0.42);
+              }` : ""}
+
+  border-radius: 0 !important;
+
+  .card__body {
+    ${({ align: t }) => `text-align:${t || "left"};`}
+  }
+
+  .card__image__wrap {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .card__image {
+    max-height: 60px;
+  }
+`, ht = "section";
+function no({
+  title: t,
+  image: e,
+  imageMeta: r,
+  iconSize: i = 100,
+  description: n,
+  actions: a,
+  align: c,
+  className: s = "",
+  ...l
+}) {
+  return /* @__PURE__ */ o(ro, { className: b("card", s), ...l, children: /* @__PURE__ */ w(x, { className: "flex items-center", children: [
+    e && /* @__PURE__ */ o(W, { icon: e, color: "primary.main", size: i, imageMeta: r }),
+    /* @__PURE__ */ w(x, { className: "flex-1 ml-4", children: [
+      /* @__PURE__ */ o(U, { align: c, title: t, description: n }),
+      /* @__PURE__ */ o(T, { align: c, actions: a, className: "mt-4" })
+    ] })
+  ] }) });
+}
+const ro = _(V)`
+  padding: 5vw 4vw;
+  text-align: left;
+  box-sizing: border-box;
+  /* min-height: 320px; */
+  color: inherit !important;
+  border-radius: 0.5rem;
+  /* ${({ dark: t, theme: e }) => `background-color:${t ? e.palette.grey[900] : e.palette.common.white};`} */
+  @media (max-width: ${({ theme: t }) => t.breakpoints.values[ht]}px) {
+    padding: 1.5rem 2rem;
+  }
+  @media (max-width: ${({ theme: t }) => t.breakpoints.values.sm}px) {
+    height: auto;
+    min-height: unset;
+  }
+
+  ${(t) => t.hoverStyle === "none" ? "" : t.link ? `transition: box-shadow ease .3s;
+              &:hover {
+                box-shadow: 0 0 10px rgba(95, 142, 244, 0.42);
+              }` : ""}
+
+  .card__title {
+    font-weight: 700;
+    margin-bottom: 12px;
+    a {
+      color: ${({ theme: t }) => t.palette.primary.main};
+    }
+  }
+  .card__description {
+    a {
+      color: ${({ theme: t }) => t.palette.primary.main};
+    }
+  }
+  .card__body {
+    padding: 0;
+  }
+
+  &.list-type-icon-title {
+    padding: 1.2rem;
+    .title-line {
+      display: flex;
+    }
+    .card__title {
+      margin: 0;
+      font-size: 1em;
+    }
+    .css-icon {
+      margin-right: 0.5rem;
+    }
+  }
+
+  @media (min-width: ${({ theme: t }) => t.breakpoints.values[ht]}px) {
+    padding: 2rem 2rem;
+    text-align: left;
+    box-sizing: border-box;
+  }
+`;
+function io({
+  title: t,
+  titleProps: e = {},
+  description: r,
+  descriptionProps: i = {},
+  image: n,
+  imageMeta: a,
+  className: c = "",
+  align: s,
+  hoverStyle: l,
+  ...d
+}) {
+  return /* @__PURE__ */ w(ao, { className: b("card-simple", c, `hover-style__${l}`), align: s, ...d, children: [
+    n && /* @__PURE__ */ o(W, { icon: n, color: "primary.main", imageMeta: a }),
+    t || r ? /* @__PURE__ */ o(
+      U,
+      {
+        align: s,
+        title: t,
+        titleProps: e,
+        description: r,
+        descriptionProps: i
+      }
+    ) : null
+  ] });
+}
+const ao = _(V)`
+  ${({ dark: t, theme: e }) => `background-color:${t ? e.palette.grey[900] : e.palette.common.white};`}
+
+  &.hover-style__default {
+    &.card-simple {
+      &:hover {
+        border-top-right-radius: 36px;
+      }
+    }
+    .card__body {
+      &:hover {
+        &::before {
+          width: 42px;
+          height: 42px;
+          transform: translate(50%, -50%) rotate(45deg);
+        }
+        &::after {
+          transform: none;
+        }
+      }
+    }
+  }
+
+  &.card-simple {
+    border-radius: 8px;
+    border-top-right-radius: 26px;
+
+    .card__body {
+      ${({ align: t }) => `text-align:${t || "left"};`}
+    }
+
+    ${(t) => t.link ? `
+        cursor: pointer;
+        ` : ""}
+    /* cursor: pointer; */
+    /* &:hover {
+      border-top-right-radius: 36px;
+    } */
+    transition: all 180ms ease 0s;
+    overflow: visible;
+    .card__title {
+      margin: 12px 0;
+    }
+    .card__body {
+      position: relative;
+      padding: 20px 16px 18px;
+      overflow: hidden;
+      transition: all 180ms ease 0s;
+      /* &:hover {
+        &::before {
+          width: 42px;
+          height: 42px;
+          transform: translate(50%, -50%) rotate(45deg);
+        }
+        &::after {
+          transform: none;
+        }
+      } */
+      &::before,
+      &::after {
+        content: ${({ border: t }) => t ? '""' : ""};
+        transition: inherit;
+        position: absolute;
+        top: 0px;
+        right: 0px;
+      }
+      &::before {
+        z-index: 3;
+        background: #fff;
+        width: 30px;
+        height: 30px;
+        transform: translate(50%, -50%) rotate(45deg);
+        box-shadow: 0 1px 0 0 #e9eaec;
+      }
+      &::after {
+        z-index: 2;
+        width: 28px;
+        height: 28px;
+        border-bottom-left-radius: 6px;
+        background: #fcfcfd;
+        box-shadow: -1px 1px 0 0 #e9eaec;
+        transform: translate(8px, -8px);
+      }
+    }
+  }
+`;
+function so({ type: t = "default", ...e }) {
+  const i = {
+    article: Qe,
+    simple: io,
+    news: no,
+    default: ut,
+    wall: eo
+  }[t] || ut;
+  return /* @__PURE__ */ o(i, { ...t === "news" ? e : C(e, "iconSize") });
+}
+function lo({
+  list: t = [],
+  align: e = "top",
+  cards: r,
+  listBorder: i = !0,
+  listType: n = "",
+  col: a = 3,
+  gap: c,
+  iconColor: s,
+  className: l = "",
+  type: d = "default",
+  dark: m = !1,
+  textAlign: p = "left",
+  hoverStyle: h,
+  ...u
+}) {
+  return /* @__PURE__ */ o(
+    rt,
+    {
+      type: d,
+      className: b("card-list py-1", l, "items-stretch"),
+      col: a,
+      gap: c,
+      align: e,
+      ...u,
+      children: r || t.map((f) => /* @__PURE__ */ o(
+        so,
+        {
+          borderColor: i,
+          iconColor: s,
+          type: d,
+          listType: n,
+          dark: m,
+          ...f,
+          align: p,
+          sx: {
+            bgcolor: d === "wall" ? void 0 : m ? "grey.900" : "common.white"
+          },
+          style: c === 0 && t.length > 1 ? {
+            borderRadius: 0,
+            marginRight: "-1px",
+            marginBottom: "-1px"
+          } : {}
+        },
+        f.id
+      ))
+    }
+  );
+}
+const co = [
+  "align",
+  "cards",
+  "list",
+  "listBorder",
+  "listType",
+  "col",
+  "gap",
+  "iconColor",
+  "type",
+  "textAlign"
+], mo = _(H)`
+  a .card {
+    color: #404040;
+    cursor: pointer;
+  }
+  a:not(.MuiButton-root) {
+    color: ${({ theme: t }) => t.palette.primary.main};
+    &:hover,
+    &:active {
+      color: ${({ theme: t }) => t.palette.primary.main};
+    }
+  }
+  a:hover .card {
+    color: #404040;
+  }
+`;
+function po({ className: t, ...e }) {
+  const [r, i] = $(e, A), [n, a] = $(i, co);
+  return /* @__PURE__ */ w(mo, { className: b("section--card-list", t), type: e.type, ...a, children: [
+    Object.keys(r).length > 0 && /* @__PURE__ */ o(F, { center: !0, ...r, className: "mb-[2.5vw]" }),
+    /* @__PURE__ */ o(lo, { ...n, dark: !!e.dark })
+  ] });
+}
+const uo = _(po)`
+  .card__description {
+    white-space: pre-wrap;
+  }
+  .section__description {
+  }
+  .card {
+    /* background: inherit !important; */
+  }
+  &.dark .card-simple .card__body::before {
+    background: #212121 !important;
+  }
+  .card-simple .card__body::after {
+    background: inherit !important;
+  }
+`;
+function ho({ section: t, ...e }) {
+  const [{ editing: r }, i] = $(e, D), n = R(() => {
+    var a;
+    return {
+      ...C(i, ["listBorder", "list", "iconSize", "imageSize"]),
+      list: (a = i.list) == null ? void 0 : a.map((c) => {
+        var s, l;
+        return {
+          ...C(c, "icon", "iconColor"),
+          image: ["news", "simple", "default"].includes(i.type) && c.icon ? c.icon : c.image,
+          actions: (l = (s = c.actions) == null ? void 0 : s.map) == null ? void 0 : l.call(s, (d) => /* @__PURE__ */ o(Lt, { ...d, editing: r }, d.id)),
+          border: i.listBorder,
+          iconSize: i.iconSize,
+          imageSize: i.imageSize,
+          hoverStyle: i.hoverStyle
+        };
+      })
+    };
+  }, [i]);
+  return /* @__PURE__ */ o(uo, { style: r ? { pointerEvents: "none" } : {}, ...n });
+}
+function fo({
+  properties: t,
+  section: e,
+  locale: r,
+  dev: i
+}) {
+  var n;
+  return (n = e == null ? void 0 : e.config) != null && n.componentId ? /* @__PURE__ */ o(
+    oe,
+    {
+      instanceId: e.id,
+      componentId: e.config.componentId,
+      blockletId: e.config.blockletId,
+      blockletTitle: e.config.blockletTitle,
+      componentName: e.config.componentName,
+      locale: r,
+      properties: t,
+      dev: i
+    }
+  ) : /* @__PURE__ */ o(x, { textAlign: "center", py: 2, children: /* @__PURE__ */ o(P, { variant: "caption", color: "text.secondary", children: "Please select component to render" }) });
+}
+function go({
+  src: t,
+  dataId: e,
+  isEdit: r = !1,
+  height: i = "100%",
+  onLoad: n = () => {
+  }
+}) {
+  return /* @__PURE__ */ o(
+    fe,
+    {
+      isEdit: r,
+      embedId: e,
+      src: t,
+      height: i,
+      onLoad: () => {
+        n();
+      }
+    }
+  );
+}
+function xo({ dataId: t, src: e, actions: r, center: i, onLoad: n, ...a }) {
+  const [c, s] = $(a, A);
+  return /* @__PURE__ */ w(H, { ...s, children: [
+    Object.keys(c).length > 0 && /* @__PURE__ */ o(F, { center: i, ...c }),
+    /* @__PURE__ */ o(
+      go,
+      {
+        dataId: t,
+        src: e,
+        onLoad: n,
+        height: a.iframeHeight ? `${a.iframeHeight}px` : "100%"
+      }
+    ),
+    /* @__PURE__ */ o(T, { actions: r, center: i })
+  ] });
+}
+const yn = {
+  src: "",
+  embedUrl: "",
+  title: "",
+  description: "",
+  dark: !1,
+  background: "",
+  center: !0,
+  config: {},
+  id: ""
+};
+function bo({ section: t, id: e, src: r, ...i }) {
+  const n = `${e}-${i.locale}`, [{ editing: a }, c] = $(i, D), s = Y({}), l = JSON.parse(JSON.stringify(c)), { message: d } = pe(n, "server"), m = ue(JSON.parse(JSON.stringify(c.config) || "{}"));
+  return O(() => {
+    d && d.onInit(() => m.current);
+  }, [d]), O(() => {
+    const p = JSON.parse(JSON.stringify(c.config) || "{}");
+    he(s.current, p) || (s.current = p, d == null || d.send("config-set", p));
+  }, [d, c.config]), r ? /* @__PURE__ */ o(xo, { ...l, dataId: n, src: r, style: a ? { pointerEvents: "none" } : {} }) : /* @__PURE__ */ o(yo, { children: 'Please set the "src" attribute for this block' });
+}
+const yo = _("div")`
+  user-select: none;
+  color: #999;
+  padding: 8px;
+  height: 200px;
+`, wo = [
+  /youtu\.be\/([^#&?]{11})/,
+  // youtu.be/<id>
+  /\?v=([^#&?]{11})/,
+  // ?v=<id>
+  /&v=([^#&?]{11})/,
+  // &v=<id>
+  /embed\/([^#&?]{11})/,
+  // embed/<id>
+  /\/v\/([^#&?]{11})/
+  // /v/<id>
+];
+function vo(t) {
+  var e;
+  if (/youtu\.?be/.test(t))
+    for (const r of wo) {
+      const i = (e = r.exec(t)) == null ? void 0 : e[1];
+      if (i)
+        return i;
+    }
+}
+function ko(t) {
+  const e = vo(t);
+  if (e)
+    return `https://youtube.com/embed/${e}`;
+}
+function _o({ src: t }) {
+  return O(() => {
+    import("@lottiefiles/lottie-player");
+  }, []), /* @__PURE__ */ o("lottie-player", { autoplay: !0, loop: !0, mode: "normal", src: t });
+}
+function $o(t) {
+  return /* @__PURE__ */ o(x, { maxHeight: 400, overflow: "hidden auto", children: /* @__PURE__ */ o(ge, { ...t }) });
+}
+function No({ url: t }) {
+  const e = Y(null), r = 495, [i, n] = j(
+    e.current ? e.current.offsetWidth * 0.5625 : r
+  ), a = E(() => {
+    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 : r;
+    return n(Math.floor(s * c));
+  }, []);
+  return O(() => {
+    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 : r;
+    return n(Math.floor(s * c)), function() {
+      window.removeEventListener("resize", a);
+    };
+  }, [i, a]), /* @__PURE__ */ o(
+    x,
+    {
+      component: "iframe",
+      ref: e,
+      title: "youtube",
+      width: "100%",
+      height: `${i}px`,
+      src: t,
+      frameBorder: "0",
+      allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
+      allowFullScreen: !0,
+      sx: { display: "block" }
+    }
+  );
+}
+const wn = {
+  image: "https://www.arcblock.io/static/ead0cabde7f2b7ff34db8f3e8ceca271/afc4b/builder.png",
+  badge: "Develop · Deploy · Run",
+  title: "The Future is Here: Blockchain and Decentralized Application Development",
+  description: "ArcBlock, your exclusive new decentralized development platform, makes developing decentralized applications, blockchain, and distributed ledger technology straightforward.",
+  reverse: !1,
+  dark: !1,
+  background: "",
+  actions: void 0,
+  hasImage: !0,
+  center: !1
+}, So = _(He)`
+  .section__description {
+  }
+`;
+function Co({
+  hasImage: t,
+  fullSizeImage: e,
+  boxed: r,
+  videoPoster: i,
+  imageMeta: n,
+  imageOptimization: a,
+  imageSize: c,
+  section: s,
+  ...l
+}) {
+  var u, f;
+  const [{ editing: d }, m] = $({ ...l, boxed: e ? void 0 : r }, D);
+  let p = Po(m.image, i, e, n, a, c);
+  t || (p = null);
+  let h = null;
+  return m.actions && (h = (f = (u = m.actions) == null ? void 0 : u.map) == null ? void 0 : f.call(u, (y, g) => /* @__PURE__ */ o(Lt, { ...y, editing: d }, g))), /* @__PURE__ */ o(
+    So,
+    {
+      ...m,
+      style: d ? { pointerEvents: "none" } : {},
+      image: p,
+      fullSizeImage: t && e,
+      actions: h
+    }
+  );
+}
+function Po(t, e, r, i, n, a) {
+  if (t) {
+    if (t.endsWith(".json"))
+      return /* @__PURE__ */ o(_o, { src: t });
+    if (t.indexOf("twitter.com") !== -1)
+      return /* @__PURE__ */ o($o, { sourceType: "url", url: t });
+    const c = ko(t);
+    if (c)
+      return /* @__PURE__ */ o(No, { url: c });
+    const { naturalWidth: s, naturalHeight: l, filename: d } = i || {};
+    if (Q(t))
+      return /* @__PURE__ */ o(
+        "video",
+        {
+          width: s && `${s}px`,
+          height: l && `${l}px`,
+          controls: !0,
+          autoPlay: !0,
+          muted: !0,
+          style: {
+            display: "block",
+            objectFit: a || "contain",
+            borderRadius: "8px",
+            width: "100%",
+            height: "100%"
+          },
+          poster: z(S(e), r ? 1200 : 540, n),
+          children: /* @__PURE__ */ o("source", { src: S(t), type: Le(t) })
+        },
+        t
+      );
+    const m = n === "quality" ? 1 : 0.6;
+    return /* @__PURE__ */ o(
+      Nt,
+      {
+        src: S(t),
+        sizesAttr: {
+          sm: 600 * m,
+          md: 450 * m,
+          lg: 540 * m,
+          ...r && {
+            md: 900 * m,
+            lg: 1200 * m
+          }
+        },
+        width: s && `${s}px`,
+        height: l && `${l}px`,
+        alt: d ?? t,
+        style: { objectFit: a || "contain", display: "block", width: "100%", height: "100%" },
+        loading: "lazy"
+      }
+    );
+  }
+  return null;
+}
+const vn = ["production", "draft"];
+function kn({ mode: t, version: e } = {}) {
+  const r = e && typeof e == "number" ? { mode: t, version: e } : { mode: t };
+  return et.get(`/api/${ot()}/pages`, { params: r }).then((i) => i.data);
+}
+function _n({ mode: t, pages: e }) {
+  return et.post(`/api/${ot()}/pages/publish`, { mode: t, pages: e }).then((r) => r.data);
+}
+function Bo({
+  locale: t,
+  sort: e,
+  page: r,
+  limit: i,
+  mode: n
+} = {}) {
+  return et.get(`/api/${ot()}/pages/toc`, { params: { locale: t, sort: e, page: r, limit: i, mode: n } }).then((a) => a.data);
+}
+const $n = {
+  style: "list",
+  sort: "-updatedAt"
+}, ft = 20;
+function Io({ style: t, sort: e, section: r, ...i }) {
+  const [{ editing: n, locale: a }, c] = $(i, D), [s, l] = $(c, A), [d, m] = j(), p = Y(!1), h = xe(), u = le(), f = E(async () => {
+    if (!p.current) {
+      p.current = !0, h();
+      try {
+        const y = d ? Math.floor(d.list.length / ft) + 1 : 1, { list: g, total: v } = await Bo({ locale: a, sort: e, page: y, limit: ft });
+        m((k) => ({
+          list: ((k == null ? void 0 : k.list) ?? []).concat(g),
+          total: v
+        }));
+      } finally {
+        p.current = !1, h();
+      }
+    }
+  }, [d, a, e, h]);
+  return be(() => {
+    f();
+  }), /* @__PURE__ */ w(H, { ...l, sx: n ? { pointerEvents: "none" } : {}, children: [
+    Object.keys(s).length > 0 && /* @__PURE__ */ o(F, { ...s }),
+    d ? /* @__PURE__ */ w(J, { children: [
+      /* @__PURE__ */ o(st, { container: !0, spacing: 2, justifyContent: "center", children: d == null ? void 0 : d.list.map((y) => /* @__PURE__ */ o(st, { item: !0, xs: 12, sm: t === "card" ? 6 : 12, md: t === "card" ? 3 : 12, children: /* @__PURE__ */ w(
+        Wo,
+        {
+          elevation: 0,
+          className: b(t === "card" && "style-card"),
+          onClick: n ? void 0 : () => u(y.slug),
+          children: [
+            !!y.image && /* @__PURE__ */ o(
+              Mt,
+              {
+                component: "img",
+                alt: "",
+                image: z(S(y.image), 540),
+                loading: "lazy"
+              }
+            ),
+            /* @__PURE__ */ w(Jt, { children: [
+              /* @__PURE__ */ o(P, { variant: "h6", component: "div", className: gt, children: y.title || y.id }),
+              /* @__PURE__ */ o(P, { variant: "body2", className: gt, children: y.description })
+            ] })
+          ]
+        }
+      ) }, y.id)) }),
+      /* @__PURE__ */ o(x, { textAlign: "center", mt: 2, children: d.total > d.list.length ? /* @__PURE__ */ o(L, { variant: "outlined", color: "secondary", onClick: f, loading: p.current, children: "More" }) : /* @__PURE__ */ o(L, { variant: "outlined", color: "secondary", disabled: !0, children: "No More" }) })
+    ] }) : /* @__PURE__ */ o(x, { p: 2, textAlign: "center", children: /* @__PURE__ */ o(Ut, { size: 24 }) })
+  ] });
+}
+const gt = X`
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`, Wo = _(Vt)`
+  border: 1px solid #e0e0e0;
+  background-color: transparent;
+  cursor: pointer;
+  display: flex;
+  color: inherit;
+
+  > .MuiCardMedia-root {
+    width: 30vw;
+    max-height: 50vw;
+  }
+
+  &.style-card {
+    display: block;
+
+    > .MuiCardMedia-root {
+      width: 100%;
+      max-height: 50vw;
+    }
+  }
+`, Ro = {
+  iframe: bo,
+  section: Co,
+  "section-card-list": ho,
+  toc: Io,
+  "ai-runtime": Ue,
+  "custom-component": fo
+};
+function Nn({ id: t, type: e, mode: r, config: i, section: n, ...a }) {
+  const c = Ro[e], { getPageMetaStyle: s } = Se(), l = R(() => {
+    const { height: p, ...h } = i;
+    return h;
+  }, [i]), d = R(() => {
+    const p = {};
+    return e !== "custom-component" && (p.height = i.height), p.sx = s("sx"), p;
+  }, [i.height, e, s]), m = c && /* @__PURE__ */ o(c, { mode: r, ...l, id: t, section: n });
+  return /* @__PURE__ */ o(De, { ...a, ...d, children: m });
+}
+function Sn(t) {
+  return t != null;
+}
+export {
+  Lt as A,
+  Nn as B,
+  Rt as I,
+  xn as P,
+  vn as S,
+  $n as T,
+  gn as a,
+  yn as b,
+  wn as c,
+  kn as g,
+  Sn as n,
+  _n as p
+};