@blocklet/pages-kit-inner-components 0.6.72 → 0.6.74

package/lib/es/add-component.js

@@ -1,19 +1,19 @@
-import { jsx as r, jsxs as y } from "react/jsx-runtime";
-import { i as j, a as G, h as q, j as J, k as Z, f as ee } from "./chunks/state-Biqa_a5U.js";
+import { jsx as o, jsxs as w } from "react/jsx-runtime";
+import { i as D, a as G, h as J, j as Z, k as ee, l as oe, m as te, f as re } from "./chunks/state-DS2djQbR.js";
 import $ from "@arcblock/ux/lib/Empty";
-import { useLocaleContext as H } from "@arcblock/ux/lib/Locale/context";
+import { useLocaleContext as F } from "@arcblock/ux/lib/Locale/context";
 import { Icon as L } from "@iconify-icon/react";
-import oe from "@mui/icons-material/Check";
-import { Box as n, styled as F, alpha as te, Dialog as re, DialogTitle as ie, TextField as ne, IconButton as ae, DialogContent as se, Tabs as le, Tab as pe, Grid as P, Card as de, CardMedia as ce, CardContent as me, Typography as W, DialogActions as ue, Button as N, Skeleton as fe } from "@mui/material";
-import { useReactive as V } from "ahooks";
-import { createContext as A, useMemo as M, useEffect as E, useRef as S } from "react";
-import { c as be, T as ge, I as xe, B as he } from "./chunks/index-CjNVgrdz.js";
-import { styled as m } from "@arcblock/ux/lib/Theme";
+import ie from "@mui/icons-material/Check";
+import { Box as n, styled as H, alpha as ne, Stack as ae, Dialog as se, DialogTitle as le, TextField as pe, IconButton as ce, DialogContent as de, Tabs as me, Tab as ue, Grid as O, Card as fe, CardMedia as be, CardContent as ge, Typography as W, DialogActions as xe, Button as N, Skeleton as he } from "@mui/material";
+import { useReactive as Q } from "ahooks";
+import { createContext as _, useMemo as P, useEffect as M, useRef as E } from "react";
+import { a as ye, R as ve, B as V, c as Ce, T as ke, I as we } from "./chunks/index-Cj977HLf.js";
+import { styled as g } from "@arcblock/ux/lib/Theme";
 import "@blocklet/pages-kit/builtin/color-picker";
 import "@blocklet/pages-kit/utils/style";
 import "@emotion/css";
 import "lodash/without";
-import { red as ye, pink as Ce, purple as ve, indigo as ke, blue as we, cyan as Ie, teal as Te, green as Re, lime as ze, yellow as Se, amber as Me, orange as _e, brown as Ee, grey as Ae, blueGrey as Oe } from "@mui/material/colors";
+import { red as Ie, pink as Te, purple as Re, indigo as Se, blue as ze, cyan as Ee, teal as Pe, green as Me, lime as _e, yellow as Ae, amber as Le, orange as Oe, brown as Ne, grey as je, blueGrey as Be } from "@mui/material/colors";
 import "@blocklet/pages-kit/builtin/uploader";
 import "react-use";
 import "lodash/cloneDeep";
@@ -30,12 +30,12 @@ import "is-uri";
 import "@arcblock/ux/lib/Toast";
 import "@mui/material/Tooltip";
 import "@mui/icons-material/KeyboardArrowLeft";
-import Le from "@mui/material/Box";
+import De from "@mui/material/Box";
 import "@mui/material/DialogTitle";
 import "@mui/material/IconButton";
 import "@mui/material/Dialog";
 import "@mui/material/useMediaQuery";
-import { css as Pe } from "@emotion/react";
+import { css as Ge } from "@emotion/react";
 import "@mui/material/Alert";
 import "@mui/material/AlertTitle";
 import "react-error-boundary";
@@ -44,15 +44,15 @@ import "lodash/isEmpty";
 import "yaml";
 import "@mui/material/Typography";
 import "joi";
-import { createStatusApi as Q, createTextCompletionApi as Ne } from "@blocklet/aigne-hub/api";
-import { createFetch as Be } from "@blocklet/js-sdk";
+import { createStatusApi as U, createTextCompletionApi as $e } from "@blocklet/aigne-hub/api";
+import { createFetch as Fe } from "@blocklet/js-sdk";
 import "@mui/x-date-pickers";
 import "@mui/x-date-pickers/AdapterDayjs";
 import "@mui/x-date-pickers/LocalizationProvider";
 import "circular-natal-horoscope-js/dist";
-import U from "dayjs";
-import De from "dayjs/plugin/timezone";
-import je from "dayjs/plugin/utc";
+import X from "dayjs";
+import He from "dayjs/plugin/timezone";
+import We from "dayjs/plugin/utc";
 import "fast-deep-equal";
 import "lodash/isNil";
 import "tz-lookup";
@@ -60,14 +60,14 @@ import "@mui/icons-material/CheckCircleOutline";
 import "lodash/uniq";
 import "lodash/get";
 import "lodash/set";
-import { nextId as X } from "@blocklet/pages-kit/utils/common";
-import { CustomComponentRenderer as Ge } from "@blocklet/pages-kit/components";
-ye[300], Ce[300], ve[300], // deepPurple['300'],
-ke[300], we[300], // lightBlue['300'],
-Ie[300], Te[300], Re[300], // lightGreen['300'],
-ze[300], Se[300], Me[300], _e[300], // deepOrange['300'],
-Ee[300], Ae[300], Oe[300];
-m(n)`
+import { nextId as Y } from "@blocklet/pages-kit/utils/common";
+import { CustomComponentRenderer as Qe } from "@blocklet/pages-kit/components";
+Ie[300], Te[300], Re[300], // deepPurple['300'],
+Se[300], ze[300], // lightBlue['300'],
+Ee[300], Pe[300], Me[300], // lightGreen['300'],
+_e[300], Ae[300], Le[300], Oe[300], // deepOrange['300'],
+Ne[300], je[300], Be[300];
+g(n)`
   .color-item {
     position: relative;
   }
@@ -88,7 +88,7 @@ m(n)`
     right: 0;
   }
 `;
-F(n)(({ theme: e }) => ({
+H(n)(({ theme: e }) => ({
   display: "flex",
   alignItems: "center",
   padding: "8px",
@@ -174,7 +174,7 @@ F(n)(({ theme: e }) => ({
     padding: e.spacing(0.5),
     opacity: 0,
     transition: "opacity 0.2s ease",
-    backgroundColor: te(e.palette.background.paper, 0.8),
+    backgroundColor: ne(e.palette.background.paper, 0.8),
     backdropFilter: "blur(2px)",
     borderRadius: e.spacing(0.5),
     margin: `auto ${e.spacing(0.5)}`,
@@ -205,7 +205,7 @@ F(n)(({ theme: e }) => ({
     opacity: 0.7
   }
 }));
-F(n)`
+H(n)`
   position: relative;
   border: 1px solid #c0c0c0;
   min-height: 40px;
@@ -230,23 +230,23 @@ F(n)`
     transform: translateY(-50%);
   }
 `;
-const $e = A({ embed: !1 }), { Provider: nt } = $e;
-A(void 0);
-Q({
-  axios: j,
+const Ve = _({ embed: !1 }), { Provider: ct } = Ve;
+_(void 0);
+U({
+  axios: D,
   path: "/api/ai/status"
 });
-Q({
-  axios: j,
+U({
+  axios: D,
   path: "/api/ai/agent-status"
 });
-Ne({
-  fetch: Be(),
+$e({
+  fetch: Fe(),
   path: "/api/ai/completions"
 });
-U.extend(je);
-U.extend(De);
-m(n)`
+X.extend(We);
+X.extend(He);
+g(n)`
   flex-grow: 1;
   display: flex;
   flex-direction: column;
@@ -350,8 +350,8 @@ m(n)`
     }
   }
 `;
-A({});
-m(n)`
+_({});
+g(n)`
   display: flex;
   flex-direction: column;
   flex: 1;
@@ -364,7 +364,7 @@ m(n)`
     }
   }
 `;
-m(n)`
+g(n)`
   background: #fbfbfb;
   border: 1px solid #f6f6f6;
   border-radius: 4px;
@@ -386,7 +386,7 @@ m(n)`
     cursor: pointer;
   }
 `;
-m(Le)`
+g(De)`
   background: #f6f2ff;
   margin-bottom: 20px;
 
@@ -407,7 +407,7 @@ m(Le)`
     margin-top: 4px;
   }
 `;
-m(n)`
+g(n)`
   display: block;
   padding: 16px;
   text-decoration: none;
@@ -438,12 +438,12 @@ m(n)`
     overflow: hidden;
   }
 `;
-Pe`
+Ge`
   .MuiMenu-root {
     z-index: 13010 !important;
   }
 `;
-m(n)`
+g(n)`
   display: flex;
   flex-direction: column;
   flex: 1;
@@ -456,7 +456,7 @@ m(n)`
     }
   }
 `;
-m(n)`
+g(n)`
   background: #fbfbfb;
   border: 1px solid #f6f6f6;
   border-radius: 4px;
@@ -480,7 +480,7 @@ m(n)`
     cursor: pointer;
   }
 `;
-m(n)`
+g(n)`
   > .ai-button {
     display: none;
     z-index: 1;
@@ -499,7 +499,7 @@ m(n)`
     }
   }
 `;
-m(n)`
+g(n)`
   > .language-button {
     display: none;
     z-index: 1;
@@ -518,7 +518,7 @@ m(n)`
     }
   }
 `;
-m(n)`
+g(n)`
   position: relative;
 
   .action {
@@ -542,8 +542,8 @@ m(n)`
     }
   }
 `;
-X();
-const He = {
+Y();
+const Ue = {
   type: "default",
   title: "Section CardList",
   description: "This is Section CardList",
@@ -558,67 +558,99 @@ const He = {
   padding: "normal",
   list: [
     {
-      id: X(),
+      id: Y(),
       title: "Simplified Service Delivery",
       description: "Block Server's Service Gateway makes networking easy with access to load balancing, SSL termination, automatic and customizable URL mapping, and redirects.",
       image: "https://www.arcblock.io/static/ead0cabde7f2b7ff34db8f3e8ceca271/afc4b/builder.png"
     }
   ]
 };
-function Fe({
+function Xe({
   componentId: e,
-  locale: p,
-  components: l
+  locale: c,
+  components: d
 }) {
   const {
     state: {
-      config: { defaultLocale: d }
+      config: { defaultLocale: l }
     },
-    localState: { customComponentPreviewerProperties: u }
-  } = G(), i = q();
-  return /* @__PURE__ */ r(
-    Ge,
+    localState: { customComponentPreviewerProperties: v }
+  } = G(), i = J(), x = d || i, u = x?.[e], p = u?.data ?? (u && typeof u == "object" && "component" in u ? u.component : void 0), f = p?.renderer;
+  if (f?.type === "component-template" && p) {
+    const b = Z(p, f), a = c || l || "en", t = ee();
+    return /* @__PURE__ */ o(ye, { page: b, defaultLocale: l, currentLocale: a, children: /* @__PURE__ */ o(ve, { children: /* @__PURE__ */ o(ae, { spacing: 2, sx: { p: 1 }, children: b.sectionIds.map((h, y) => {
+      const m = b.sections[h];
+      if (!m || m.visibility === "hidden")
+        return null;
+      const S = b.dataSource?.[m.id]?.[a] ?? (l ? b.dataSource?.[m.id]?.[l] : void 0) ?? {}, C = m.properties ?? {};
+      return /* @__PURE__ */ o(
+        V,
+        {
+          id: m.id,
+          type: m.component,
+          section: m,
+          config: {
+            ...C,
+            ...S,
+            locale: a,
+            editing: !0,
+            dev: {
+              mode: "draft",
+              defaultLocale: l,
+              components: x,
+              projectId: t
+            }
+          },
+          page: b,
+          renderIndex: y
+        },
+        m.id
+      );
+    }) }) }) });
+  }
+  return /* @__PURE__ */ o(
+    Qe,
     {
       componentId: e,
-      locale: p,
+      locale: c,
       dev: {
         mode: "draft",
-        components: l || i,
-        defaultLocale: d
+        components: x,
+        defaultLocale: l
       },
-      properties: u?.[e] ?? {}
+      properties: v?.[e] ?? {}
     }
   );
 }
-const B = 260, We = 5, Y = "IGNORE_RENDER_BLOCKLET_TITLE", D = (e, p) => e ? Object.entries(e).map(([l, d]) => ({
-  id: l,
-  component: l,
-  name: d?.data?.name || d?.component?.name || l,
-  properties: d?.data || d.component,
-  previewImage: d?.data?.previewImage || null,
-  type: p,
-  blockletId: d?.blockletId,
-  blockletTitle: d?.blockletTitle
-})) : [], Ve = [
+const j = 260, Ye = 5, K = "IGNORE_RENDER_BLOCKLET_TITLE", B = (e, c) => e ? Object.entries(e).map(([d, l]) => ({
+  id: d,
+  component: d,
+  name: l?.data?.name || l?.component?.name || d,
+  properties: l?.data || l.component,
+  previewImage: l?.data?.previewImage || null,
+  type: c,
+  blockletId: l?.blockletId,
+  blockletTitle: l?.blockletTitle
+})) : [], Ke = [
   {
     id: "section",
     name: "Section",
-    properties: be
+    properties: Ce
   },
   {
     id: "section-card-list",
     name: "Section Card List",
-    properties: He
+    properties: Ue
   },
   {
     id: "toc",
     name: "Toc",
-    properties: ge
+    properties: ke
   },
   {
     id: "iframe",
     name: "Embed",
-    properties: xe
+    properties: we
   },
   {
     id: "layout-block",
@@ -626,75 +658,75 @@ const B = 260, We = 5, Y = "IGNORE_RENDER_BLOCKLET_TITLE", D = (e, p) => e ? Obj
     properties: {}
   }
 ].map((e) => ({ ...e, type: "basic", component: e.id }));
-function at({
+function dt({
   state: e,
-  open: p,
-  onClose: l,
-  onSelect: d,
-  defaultTab: u,
+  open: c,
+  onClose: d,
+  onSelect: l,
+  defaultTab: v,
   title: i,
-  componentGroups: k,
-  components: f,
-  multiple: c = !1,
-  defaultSelected: b,
-  emptyText: R
+  componentGroups: x,
+  components: u,
+  multiple: p = !1,
+  defaultSelected: f,
+  emptyText: b
 }) {
-  const { t: s } = H(), o = V({
+  const { t: a } = F(), t = Q({
     selectedComponent: null,
-    activeTab: u,
+    activeTab: v,
     searchQuery: ""
-  }), x = M(() => k || [
+  }), h = P(() => x || [
     {
       name: "basic",
-      label: s("maker.components.basicGroup"),
-      components: Ve
+      label: a("maker.components.basicGroup"),
+      components: Ke
     },
     e && {
       name: "custom",
-      label: s("maker.components.customGroup"),
-      components: D(J(e), "custom")
+      label: a("maker.components.customGroup"),
+      components: B(oe(e), "custom")
     },
     e && {
       name: "resource",
-      label: s("maker.components.resourceGroup"),
-      components: D(Z(e), "resource")
+      label: a("maker.components.resourceGroup"),
+      components: B(te(e), "resource")
     }
-  ].filter(Boolean), [k, s, e, p]), h = o.activeTab || x[0]?.name, w = () => {
-    o.selectedComponent && (d(o.selectedComponent), l());
-  }, _ = (t) => {
-    if (t) {
-      if (C(t)) {
-        c ? o.selectedComponent = o.selectedComponent.filter((a) => a.id !== t.id) : o.selectedComponent = null;
+  ].filter(Boolean), [x, a, e, c]), y = t.activeTab || h[0]?.name, m = () => {
+    t.selectedComponent && (l(t.selectedComponent), d());
+  }, S = (r) => {
+    if (r) {
+      if (C(r)) {
+        p ? t.selectedComponent = t.selectedComponent.filter((s) => s.id !== r.id) : t.selectedComponent = null;
         return;
       }
-      if (c) {
-        const a = Array.isArray(o.selectedComponent) ? o.selectedComponent : [], g = a.some((z) => z.id === t.id);
-        o.selectedComponent = g ? a.filter((z) => z.id !== t.id) : [...a, t];
+      if (p) {
+        const s = Array.isArray(t.selectedComponent) ? t.selectedComponent : [], k = s.some((z) => z.id === r.id);
+        t.selectedComponent = k ? s.filter((z) => z.id !== r.id) : [...s, r];
       } else
-        o.selectedComponent = t;
+        t.selectedComponent = r;
     }
-  }, C = (t) => o.selectedComponent ? c ? o.selectedComponent.some((a) => a.id === t.id) : o.selectedComponent.id === t.id : !1, v = x?.length === 0, I = M(() => {
-    const t = x.find((a) => a?.name === h)?.components || [];
-    return o.searchQuery ? t.filter((a) => a.name.toLowerCase().includes(o.searchQuery.toLowerCase())) : t;
-  }, [h, x, o.searchQuery]);
-  E(() => {
-    o.searchQuery = "", p && b ? o.selectedComponent = c ? Array.isArray(b) ? b : [b] : b : o.selectedComponent = null;
-  }, [p, b, c]);
-  const T = I?.length === 0, O = R || s(h === "resource" ? "maker.components.needAddResource" : "maker.components.noComponents"), K = M(() => I ? I.reduce(
-    (t, a) => {
-      const g = a.blockletId || Y, z = a.blockletTitle || s("maker.components.defaultGroup");
-      return t[g] || (t[g] = {
+  }, C = (r) => t.selectedComponent ? p ? t.selectedComponent.some((s) => s.id === r.id) : t.selectedComponent.id === r.id : !1, I = h?.length === 0, T = P(() => {
+    const r = h.find((s) => s?.name === y)?.components || [];
+    return t.searchQuery ? r.filter((s) => s.name.toLowerCase().includes(t.searchQuery.toLowerCase())) : r;
+  }, [y, h, t.searchQuery]);
+  M(() => {
+    t.searchQuery = "", c && f ? t.selectedComponent = p ? Array.isArray(f) ? f : [f] : f : t.selectedComponent = null;
+  }, [c, f, p]);
+  const R = T?.length === 0, A = b || a(y === "resource" ? "maker.components.needAddResource" : "maker.components.noComponents"), q = P(() => T ? T.reduce(
+    (r, s) => {
+      const k = s.blockletId || K, z = s.blockletTitle || a("maker.components.defaultGroup");
+      return r[k] || (r[k] = {
         title: z,
         components: []
-      }), t[g].components.push(a), t;
+      }), r[k].components.push(s), r;
     },
     {}
-  ) : {}, [I]);
-  return /* @__PURE__ */ y(
-    re,
+  ) : {}, [T]);
+  return /* @__PURE__ */ w(
+    se,
     {
-      open: p,
-      onClose: l,
+      open: c,
+      onClose: d,
       maxWidth: "lg",
       fullWidth: !0,
       slotProps: {
@@ -708,19 +740,19 @@ function at({
         }
       },
       children: [
-        /* @__PURE__ */ y(ie, { className: "between", sx: { display: "flex", gap: 2 }, children: [
-          /* @__PURE__ */ r(n, { children: i || s("maker.components.addComponent") }),
-          /* @__PURE__ */ r(
-            ne,
+        /* @__PURE__ */ w(le, { className: "between", sx: { display: "flex", gap: 2 }, children: [
+          /* @__PURE__ */ o(n, { children: i || a("maker.components.addComponent") }),
+          /* @__PURE__ */ o(
+            pe,
             {
               size: "small",
-              placeholder: s("maker.components.searchComponent"),
-              value: o.searchQuery,
-              onChange: (t) => o.searchQuery = t.target.value,
+              placeholder: a("maker.components.searchComponent"),
+              value: t.searchQuery,
+              onChange: (r) => t.searchQuery = r.target.value,
               sx: { flex: 1, maxWidth: 350 },
               slotProps: {
                 input: {
-                  startAdornment: /* @__PURE__ */ r(
+                  startAdornment: /* @__PURE__ */ o(
                     L,
                     {
                       icon: "tabler:search",
@@ -733,10 +765,10 @@ function at({
               }
             }
           ),
-          /* @__PURE__ */ r(ae, { size: "small", onClick: l, children: /* @__PURE__ */ r(n, { component: L, icon: "tabler:x", sx: { color: "text.primary" } }) })
+          /* @__PURE__ */ o(ce, { size: "small", onClick: d, children: /* @__PURE__ */ o(n, { component: L, icon: "tabler:x", sx: { color: "text.primary" } }) })
         ] }),
-        /* @__PURE__ */ y(
-          se,
+        /* @__PURE__ */ w(
+          de,
           {
             sx: {
               display: "flex",
@@ -746,12 +778,12 @@ function at({
               overflow: "hidden"
             },
             children: [
-              !v && /* @__PURE__ */ r(n, { sx: { width: 150, borderRight: 1, borderColor: "divider" }, children: /* @__PURE__ */ r(
-                le,
+              !I && /* @__PURE__ */ o(n, { sx: { width: 150, borderRight: 1, borderColor: "divider" }, children: /* @__PURE__ */ o(
+                me,
                 {
                   orientation: "vertical",
-                  value: h,
-                  onChange: (t, a) => o.activeTab = a,
+                  value: y,
+                  onChange: (r, s) => t.activeTab = s,
                   sx: {
                     "& .MuiTab-root": {
                       alignItems: "flex-start",
@@ -761,10 +793,10 @@ function at({
                       px: 2
                     }
                   },
-                  children: x.map((t, a) => /* @__PURE__ */ r(pe, { label: t?.label, value: t?.name }, a))
+                  children: h.map((r, s) => /* @__PURE__ */ o(ue, { label: r?.label, value: r?.name }, s))
                 }
               ) }),
-              /* @__PURE__ */ r(
+              /* @__PURE__ */ o(
                 n,
                 {
                   sx: {
@@ -773,32 +805,32 @@ function at({
                     overflowY: "auto",
                     pr: 1
                   },
-                  children: T ? /* @__PURE__ */ r($, { children: O }) : /* @__PURE__ */ r(
-                    Ue,
+                  children: R ? /* @__PURE__ */ o($, { children: A }) : /* @__PURE__ */ o(
+                    Je,
                     {
-                      wrapperComponent: P,
+                      wrapperComponent: O,
                       wrapperComponentProps: {
                         container: !0,
                         spacing: 2,
-                        sx: T ? {
+                        sx: R ? {
                           height: "100%"
                         } : {}
                       },
-                      groups: K,
-                      emptyText: O,
-                      renderItem: (t) => {
-                        const a = C(t);
-                        return /* @__PURE__ */ r(
-                          P,
+                      groups: q,
+                      emptyText: A,
+                      renderItem: (r) => {
+                        const s = C(r);
+                        return /* @__PURE__ */ o(
+                          O,
                           {
                             sx: {
                               width: "100%",
                               "& .add-component-card": {
                                 boxShadow: "none",
                                 border: 1,
-                                borderColor: a ? "primary.main" : "grey.200",
+                                borderColor: s ? "primary.main" : "grey.200",
                                 "& .check-container": {
-                                  display: a ? "flex" : "none",
+                                  display: s ? "flex" : "none",
                                   position: "absolute",
                                   right: 0,
                                   bottom: 0,
@@ -817,8 +849,8 @@ function at({
                                     height: 0,
                                     borderTop: "transparent solid 15px",
                                     borderLeft: "transparent solid 15px",
-                                    borderBottom: (g) => `solid 15px ${g.palette.primary.main}`,
-                                    borderRight: (g) => `solid 15px ${g.palette.primary.main}`,
+                                    borderBottom: (k) => `solid 15px ${k.palette.primary.main}`,
+                                    borderRight: (k) => `solid 15px ${k.palette.primary.main}`,
                                     transition: "all 0.1s ease",
                                     content: '""'
                                   },
@@ -837,8 +869,8 @@ function at({
                               md: 6,
                               lg: 4
                             },
-                            children: /* @__PURE__ */ y(
-                              de,
+                            children: /* @__PURE__ */ w(
+                              fe,
                               {
                                 className: "add-component-card",
                                 sx: {
@@ -846,37 +878,37 @@ function at({
                                   width: "100%",
                                   cursor: "pointer"
                                 },
-                                onClick: () => _(t),
+                                onClick: () => S(r),
                                 children: [
-                                  /* @__PURE__ */ r(
-                                    ce,
+                                  /* @__PURE__ */ o(
+                                    be,
                                     {
                                       sx: {
                                         width: "100%",
-                                        height: B,
+                                        height: j,
                                         overflow: "auto",
                                         position: "relative"
                                       },
-                                      children: /* @__PURE__ */ r(
-                                        Qe,
+                                      children: /* @__PURE__ */ o(
+                                        qe,
                                         {
-                                          components: f,
-                                          containerHeight: B,
-                                          component: t
+                                          components: u,
+                                          containerHeight: j,
+                                          component: r
                                         },
-                                        t.id
+                                        r.id
                                       )
                                     }
                                   ),
-                                  /* @__PURE__ */ r(
-                                    me,
+                                  /* @__PURE__ */ o(
+                                    ge,
                                     {
                                       sx: {
                                         bgcolor: "background.paper",
                                         borderTop: 1,
-                                        borderColor: a ? "primary.main" : "grey.200"
+                                        borderColor: s ? "primary.main" : "grey.200"
                                       },
-                                      children: /* @__PURE__ */ r(
+                                      children: /* @__PURE__ */ o(
                                         W,
                                         {
                                           variant: "body1",
@@ -884,17 +916,17 @@ function at({
                                           sx: {
                                             fontWeight: "bold"
                                           },
-                                          children: t.name
+                                          children: r.name
                                         }
                                       )
                                     }
                                   ),
-                                  /* @__PURE__ */ r(n, { className: "check-container", children: /* @__PURE__ */ r(oe, { className: "check-icon" }) })
+                                  /* @__PURE__ */ o(n, { className: "check-container", children: /* @__PURE__ */ o(ie, { className: "check-icon" }) })
                                 ]
                               }
                             )
                           },
-                          t.id
+                          r.id
                         );
                       }
                     }
@@ -904,8 +936,8 @@ function at({
             ]
           }
         ),
-        /* @__PURE__ */ y(
-          ue,
+        /* @__PURE__ */ w(
+          xe,
           {
             sx: {
               borderTop: 1,
@@ -913,14 +945,14 @@ function at({
               p: 2
             },
             children: [
-              /* @__PURE__ */ r(N, { onClick: l, variant: "outlined", children: s("common.cancel") }),
-              /* @__PURE__ */ r(
+              /* @__PURE__ */ o(N, { onClick: d, variant: "outlined", children: a("common.cancel") }),
+              /* @__PURE__ */ o(
                 N,
                 {
-                  onClick: w,
+                  onClick: m,
                   variant: "contained",
-                  disabled: !o.selectedComponent || c && Array.isArray(o.selectedComponent) && o.selectedComponent.length === 0,
-                  children: c && Array.isArray(o.selectedComponent) && o.selectedComponent.length > 0 ? s("common.addMultiple", { count: o.selectedComponent.length }) : s("common.add")
+                  disabled: !t.selectedComponent || p && Array.isArray(t.selectedComponent) && t.selectedComponent.length === 0,
+                  children: p && Array.isArray(t.selectedComponent) && t.selectedComponent.length > 0 ? a("common.addMultiple", { count: t.selectedComponent.length }) : a("common.add")
                 }
               )
             ]
@@ -930,22 +962,22 @@ function at({
     }
   );
 }
-function Qe({
+function qe({
   containerHeight: e,
-  component: p,
-  minScale: l = 0.1,
-  components: d
+  component: c,
+  minScale: d = 0.1,
+  components: l
 }) {
-  const { locale: u } = H(), i = V({
+  const { locale: v } = F(), i = Q({
     scale: 1,
     shouldScroll: !1,
     isVisible: !1,
     hadInit: !1
-  }), { currentPage: k } = G(), f = S(null), c = S(null), b = S(0), R = S(null);
-  E(() => {
+  }), { currentPage: x } = G(), u = E(null), p = E(null), f = E(0), b = E(null);
+  M(() => {
     const C = new IntersectionObserver(
-      ([v]) => {
-        i.isVisible = v.isIntersecting;
+      ([I]) => {
+        i.isVisible = I.isIntersecting;
       },
       {
         root: null,
@@ -953,34 +985,34 @@ function Qe({
         threshold: 0
       }
     );
-    return c.current && C.observe(c.current), () => C.disconnect();
-  }, []), E(() => {
+    return p.current && C.observe(p.current), () => C.disconnect();
+  }, []), M(() => {
     const C = () => {
-      if (b.current += 1, b.current > We) {
-        v.disconnect();
+      if (f.current += 1, f.current > Ye) {
+        I.disconnect();
         return;
       }
-      if (!p.previewImage && f.current) {
-        const I = f.current.scrollHeight, T = e / I;
-        T < l ? (i.scale = l, i.shouldScroll = !0) : T < 1 ? (i.scale = T, i.shouldScroll = !1) : (i.scale = 1, i.shouldScroll = !1);
+      if (!c.previewImage && u.current) {
+        const T = u.current.scrollHeight, R = e / T;
+        R < d ? (i.scale = d, i.shouldScroll = !0) : R < 1 ? (i.scale = R, i.shouldScroll = !1) : (i.scale = 1, i.shouldScroll = !1);
       }
-      R.current && clearTimeout(R.current), R.current = setTimeout(() => {
+      b.current && clearTimeout(b.current), b.current = setTimeout(() => {
         i.hadInit = !0;
       }, 200);
-    }, v = new ResizeObserver(() => {
+    }, I = new ResizeObserver(() => {
       setTimeout(C, 20);
     });
-    return f.current && i.isVisible && v.observe(f.current), () => {
-      v.disconnect();
+    return u.current && i.isVisible && I.observe(u.current), () => {
+      I.disconnect();
     };
-  }, [e, l, i.isVisible, p]);
-  const { id: s, type: o, component: x, properties: h, previewImage: w } = p, _ = M(() => i.isVisible ? w ? /* @__PURE__ */ r(
+  }, [e, d, i.isVisible, c]);
+  const { id: a, type: t, component: h, properties: y, previewImage: m } = c, S = P(() => i.isVisible ? m ? /* @__PURE__ */ o(
     n,
     {
       component: "img",
       loading: "lazy",
-      src: ee(w),
-      alt: p.name,
+      src: re(m),
+      alt: c.name,
       sx: {
         width: "100%",
         height: "100%",
@@ -989,29 +1021,29 @@ function Qe({
         cursor: "pointer"
       }
     },
-    s
-  ) : o === "basic" ? /* @__PURE__ */ r(
-    he,
+    a
+  ) : t === "basic" ? /* @__PURE__ */ o(
+    V,
     {
-      id: s,
-      type: x,
-      section: h,
+      id: a,
+      type: h,
+      section: y,
       config: {
-        ...h,
-        locale: u,
+        ...y,
+        locale: v,
         editing: !1,
         dev: {
           mode: "draft"
         }
       },
-      page: k
+      page: x
     },
-    s
-  ) : /* @__PURE__ */ r(Fe, { componentId: s, locale: u, components: d }, s) : null, [s, o, x, h, u, w, i.isVisible]);
-  return /* @__PURE__ */ r(
+    a
+  ) : /* @__PURE__ */ o(Xe, { componentId: a, locale: v, components: l }, a) : null, [a, t, h, y, v, m, i.isVisible]);
+  return /* @__PURE__ */ o(
     n,
     {
-      ref: c,
+      ref: p,
       sx: {
         position: "relative",
         width: "100%",
@@ -1020,7 +1052,7 @@ function Qe({
         overflowY: i.shouldScroll ? "auto" : "hidden",
         transition: "all 0.3s ease"
       },
-      children: /* @__PURE__ */ y(
+      children: /* @__PURE__ */ w(
         n,
         {
           sx: {
@@ -1030,18 +1062,18 @@ function Qe({
             height: i.hadInit && i.shouldScroll ? "100%" : `${100 / i.scale}%`
           },
           children: [
-            !i.hadInit && /* @__PURE__ */ r(fe, { variant: "rectangular", width: "100%", height: "100%" }),
-            /* @__PURE__ */ r(
+            !i.hadInit && /* @__PURE__ */ o(he, { variant: "rectangular", width: "100%", height: "100%" }),
+            /* @__PURE__ */ o(
               n,
               {
-                ref: f,
+                ref: u,
                 sx: {
                   width: "100%",
-                  height: w ? "100%" : "auto",
+                  height: m ? "100%" : "auto",
                   pointerEvents: "none",
                   opacity: i.hadInit ? 1 : 0
                 },
-                children: _
+                children: S
               }
             )
           ]
@@ -1050,25 +1082,25 @@ function Qe({
     }
   );
 }
-function Ue({
+function Je({
   groups: e,
-  emptyText: p,
-  renderItem: l,
-  wrapperComponent: d = n,
-  wrapperComponentProps: u = {
+  emptyText: c,
+  renderItem: d,
+  wrapperComponent: l = n,
+  wrapperComponentProps: v = {
     display: "inline-flex",
     flexWrap: "wrap",
     gap: 1
   }
 }) {
-  return /* @__PURE__ */ r(n, { children: Object.keys(e).length > 0 ? Object.entries(e).map(([i, { title: k, components: f }]) => /* @__PURE__ */ y(
+  return /* @__PURE__ */ o(n, { children: Object.keys(e).length > 0 ? Object.entries(e).map(([i, { title: x, components: u }]) => /* @__PURE__ */ w(
     n,
     {
       sx: {
         mb: 3
       },
       children: [
-        i !== Y && /* @__PURE__ */ y(
+        i !== K && /* @__PURE__ */ w(
           W,
           {
             className: "blocklet-title",
@@ -1082,7 +1114,7 @@ function Ue({
               gap: 1
             },
             children: [
-              /* @__PURE__ */ r(
+              /* @__PURE__ */ o(
                 n,
                 {
                   component: "span",
@@ -1095,21 +1127,21 @@ function Ue({
                   }
                 }
               ),
-              k
+              x
             ]
           }
         ),
-        /* @__PURE__ */ r(d, { ...u, children: f.map((c) => l(c)) })
+        /* @__PURE__ */ o(l, { ...v, children: u.map((p) => d(p)) })
       ]
     },
     i
-  )) : /* @__PURE__ */ r($, { children: p }) });
+  )) : /* @__PURE__ */ o($, { children: c }) });
 }
 export {
-  at as AddComponent,
-  Qe as AutoScaledComponentRenderer,
-  Ve as BASIC_COMPONENT_LIST,
-  Ue as GroupedComponentsList,
-  at as default,
-  D as formatComponent
+  dt as AddComponent,
+  qe as AutoScaledComponentRenderer,
+  Ke as BASIC_COMPONENT_LIST,
+  Je as GroupedComponentsList,
+  dt as default,
+  B as formatComponent
 };