@blocklet/pages-kit-inner-components 0.6.1 → 0.6.3

package/lib/es/add-component.js

@@ -1,1091 +1,4 @@
-import { jsx as t, jsxs as y } from "react/jsx-runtime";
-import { i as G, a as j, h as J, j as Z, k as ee, f as oe } from "./chunks/state-0gvZF3k2.js";
-import W from "@arcblock/ux/lib/Empty";
-import { useLocaleContext as F } from "@arcblock/ux/lib/Locale/context";
-import { Icon as P } from "@iconify-icon/react";
-import te from "@mui/icons-material/Check";
-import { Box as n, styled as H, Dialog as re, DialogTitle as ie, TextField as ne, IconButton as ae, DialogContent as se, Tabs as le, Tab as pe, Grid as N, Card as de, CardMedia as ce, CardContent as me, Typography as V, DialogActions as ue, Button as $, Skeleton as fe } from "@mui/material";
-import { useReactive as Q } from "ahooks";
-import { createContext as L, useMemo as M, useEffect as A, useRef as S } from "react";
-import { b as be, T as he, I as ge, B as xe } from "./chunks/index-D5gXPe_7.js";
-import { styled as m } 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 ve, purple as Ce, indigo as we, blue as ke, cyan as Te, teal as Ie, green as ze, lime as Re, yellow as Se, amber as Me, orange as _e, brown as Ee, grey as Ae, blueGrey as Le } from "@mui/material/colors";
-import "@blocklet/pages-kit/builtin/uploader";
-import "react-use";
-import "lodash/cloneDeep";
-import "@mui/icons-material";
-import "react-dnd";
-import "@arcblock/ux/lib/Tabs";
-import "lodash/pick";
-import "@mui/lab";
-import "immer";
-import "lodash/omit";
-import "react-router-dom";
-import "@arcblock/ux/lib/Button";
-import "is-uri";
-import "@arcblock/ux/lib/Toast";
-import "@mui/material/Tooltip";
-import "@mui/icons-material/KeyboardArrowLeft";
-import Oe 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 "@mui/material/Alert";
-import "@mui/material/AlertTitle";
-import "react-error-boundary";
-import "ufo";
-import "lodash/isEmpty";
-import "yaml";
-import "@mui/material/Typography";
-import "joi";
-import { createStatusApi as U, createTextCompletionApi as Ne } from "@blocklet/ai-kit/api";
-import { createFetch as $e } 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 X from "dayjs";
-import De from "dayjs/plugin/timezone";
-import Be from "dayjs/plugin/utc";
-import "fast-deep-equal";
-import "lodash/isNil";
-import "tz-lookup";
-import "@mui/icons-material/CheckCircleOutline";
-import "lodash/uniq";
-import "lodash/get";
-import "lodash/set";
-import { nextId as Y } from "@blocklet/pages-kit/utils/common";
-import { CustomComponentRenderer as Ge } from "@blocklet/pages-kit/components";
-ye[300], ve[300], Ce[300], // deepPurple['300'],
-we[300], ke[300], // lightBlue['300'],
-Te[300], Ie[300], ze[300], // lightGreen['300'],
-Re[300], Se[300], Me[300], _e[300], // deepOrange['300'],
-Ee[300], Ae[300], Le[300];
-m(n)`
-  .color-item {
-    position: relative;
-  }
-  .color-item__checked {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    color: rgba(255, 255, 255, 0.85);
-  }
-  .color-item__delete {
-    position: absolute;
-    top: 0;
-    right: 0;
-  }
-`;
-const E = 0.5;
-H(n)`
-  display: flex;
-  align-items: center;
-  padding: 8px;
-  border-bottom: ${({ theme: i }) => `1px solid ${i.palette.divider}`};
-  user-select: none;
-  cursor: pointer;
-  position: relative;
-
-  :hover {
-    background-color: rgba(200, 200, 200, 0.3);
-  }
-
-  &.selected {
-    background-color: rgba(200, 200, 200, 0.3);
-  }
-
-  &.sub-selected {
-    background-color: rgba(200, 200, 200, 0.3);
-  }
-
-  &.disabledDrag {
-    cursor: default;
-  }
-
-  > .drag,
-  > .actions {
-    line-height: 1;
-
-    svg {
-      font-size: 16px;
-      vertical-align: middle;
-    }
-  }
-
-  > .drag {
-    cursor: grab;
-    opacity: ${E};
-    position: relative;
-
-    &.disabledDrag {
-      cursor: default;
-
-      &:has(.origin-drag-icon):after {
-        content: '';
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        width: 120%;
-        height: 1px;
-        background-color: ${({ theme: i }) => i.palette.error.main};
-        transform: translate(-50%, -50%) rotate(-45deg);
-        z-index: 1;
-      }
-    }
-  }
-
-  > .actions {
-    display: flex;
-    align-items: center;
-    overflow: hidden;
-
-    > * {
-      margin-right: 0.5em;
-      opacity: 0;
-      display: inline-block;
-      cursor: pointer;
-    }
-
-    > .visible {
-      display: inline-block;
-      opacity: ${E};
-    }
-  }
-
-  &:hover {
-    > .actions {
-      > * {
-        display: inline-block;
-        opacity: ${E} !important;
-      }
-    }
-  }
-
-  > .name {
-    flex: 1;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    padding: 0 4px;
-    font-size: 14px;
-  }
-`;
-H(n)`
-  position: relative;
-  border: 1px solid #c0c0c0;
-  min-height: 40px;
-  border-radius: 4px;
-  padding: 14px 14px;
-  .label-box__label {
-    left: 6px;
-    height: 1em;
-    padding: 0 6px;
-    line-height: 1;
-  }
-  .label-box__actions {
-    right: 6px;
-  }
-  .label-box__label,
-  .label-box__actions {
-    position: absolute;
-    background: ${({ theme: i }) => i.palette.background.default};
-    overflow: visible;
-    display: inline-block;
-    top: 0;
-    transform: translateY(-50%);
-  }
-`;
-const je = L({ embed: !1 }), { Provider: nt } = je;
-L(void 0);
-U({
-  axios: G,
-  path: "/api/ai/status"
-});
-U({
-  axios: G,
-  path: "/api/ai/agent-status"
-});
-Ne({
-  fetch: $e(),
-  path: "/api/ai/completions"
-});
-X.extend(Be);
-X.extend(De);
-m(n)`
-  flex-grow: 1;
-  display: flex;
-  flex-direction: column;
-
-  > .actions {
-    position: sticky;
-    bottom: 0px;
-    margin-top: 20px;
-    z-index: 1;
-
-    @media (max-height: 700px) {
-      position: static;
-    }
-
-    > .connect-tip {
-      font-weight: 600;
-      font-size: 14px;
-      line-height: 17px;
-      text-align: center;
-      color: #9397a1;
-      margin-bottom: 20px;
-    }
-
-    .submit {
-      height: 43px;
-      width: 100%;
-      background: linear-gradient(90deg, #45e4fa 0%, #8a45fa 52.08%, #fa45bc 100%);
-      border-radius: 30px;
-      box-shadow: none;
-      text-transform: none;
-      width: 100%;
-      border: 0;
-      margin: 0;
-      padding: 8.5px 14px;
-      font-size: 100%;
-
-      &.Mui-disabled {
-        color: rgba(0, 0, 0, 0.26);
-        background: rgba(0, 0, 0, 0.12);
-      }
-    }
-  }
-
-  .MuiFormHelperText-root {
-    font-style: normal;
-    font-weight: 500;
-    font-size: 12px;
-    line-height: 14px;
-    color: #9397a1;
-    margin: 0;
-    margin-top: 4px;
-  }
-
-  .MuiOutlinedInput-root {
-    background: #fbfbfb;
-    border-radius: 4px;
-
-    fieldset {
-      border: 1px solid #f6f6f6;
-    }
-
-    &:hover fieldset {
-      border: 1px solid #a482fe;
-    }
-
-    input {
-      width: 100%;
-      border: 0;
-      margin: 0;
-      border-radius: 4px;
-      padding: 8.5px 14px;
-      font-size: 100%;
-    }
-  }
-
-  .Mui-focused {
-    &.MuiFormLabel-root {
-      color: #a482fe;
-    }
-
-    &.MuiOutlinedInput-root {
-      fieldset {
-        border: 1px solid #a482fe;
-      }
-    }
-  }
-
-  .Mui-error {
-    &.MuiFormLabel-root {
-      color: #f16e6e;
-    }
-
-    &.MuiOutlinedInput-root + .MuiFormHelperText-root {
-      color: #f16e6e;
-    }
-
-    &.MuiOutlinedInput-root {
-      fieldset {
-        border: 1px solid #f16e6e;
-      }
-    }
-  }
-`;
-L({});
-m(n)`
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-
-  .lazy-image-wrapper {
-    border-radius: 12px;
-
-    img {
-      border-radius: 12px;
-    }
-  }
-`;
-m(n)`
-  background: #fbfbfb;
-  border: 1px solid #f6f6f6;
-  border-radius: 4px;
-
-  &:has(.selected) {
-    border: 1px solid #a482fe;
-  }
-
-  &:has(.Mui-focused) {
-    border: 1px solid #a482fe;
-  }
-
-  > .input {
-    padding: 12px;
-    font-weight: 500;
-    font-size: 16px;
-    line-height: 19px;
-    color: #25292f;
-    cursor: pointer;
-  }
-`;
-m(Oe)`
-  background: #f6f2ff;
-  margin-bottom: 20px;
-
-  .title {
-    font-style: normal;
-    font-weight: 700;
-    font-size: 24px;
-    line-height: 33px;
-    color: #25292f;
-  }
-
-  .subtitle {
-    font-style: normal;
-    font-weight: 500;
-    font-size: 16px;
-    line-height: 22px;
-    color: #9397a1;
-    margin-top: 4px;
-  }
-`;
-m(n)`
-  display: block;
-  padding: 16px;
-  text-decoration: none;
-  border-radius: 12px;
-  cursor: pointer;
-  box-shadow:
-    rgb(255, 255, 255) 0 0 0 0,
-    rgb(226, 232, 240) 0 0 0 1px,
-    rgba(0, 0, 0, 0.05) 0 1px 2px 0;
-  color: inherit;
-  height: 100%;
-  position: relative;
-
-  &:hover {
-    box-shadow:
-      rgb(255, 255, 255) 0 0 0 0,
-      rgb(203, 213, 225) 0 0 0 2px,
-      rgba(0, 0, 0, 0.1) 0 10px 15px -3px,
-      rgba(0, 0, 0, 0.1) 0 4px 6px -4px;
-  }
-
-  .description {
-    word-break: break-all;
-    text-overflow: ellipsis;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
-    overflow: hidden;
-  }
-`;
-Pe`
-  .MuiMenu-root {
-    z-index: 13010 !important;
-  }
-`;
-m(n)`
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-
-  .lazy-image-wrapper {
-    border-radius: 12px;
-
-    img {
-      border-radius: 12px;
-    }
-  }
-`;
-m(n)`
-  background: #fbfbfb;
-  border: 1px solid #f6f6f6;
-  border-radius: 4px;
-  position: relative;
-  cursor: pointer;
-
-  &:has(.selected) {
-    border: 1px solid #a482fe;
-  }
-
-  &:has(.Mui-focused) {
-    border: 1px solid #a482fe;
-  }
-
-  > .input {
-    padding: 12px;
-    font-weight: 500;
-    font-size: 16px;
-    line-height: 19px;
-    color: #25292f;
-    cursor: pointer;
-  }
-`;
-m(n)`
-  > .ai-button {
-    display: none;
-    z-index: 1;
-
-    &.active {
-      display: inline-flex;
-    }
-
-    .MuiCircularProgress-root {
-      position: absolute;
-      left: 0;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      margin: auto;
-    }
-  }
-`;
-m(n)`
-  > .language-button {
-    display: none;
-    z-index: 1;
-
-    &.active {
-      display: inline-flex;
-    }
-
-    .MuiCircularProgress-root {
-      position: absolute;
-      left: 0;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      margin: auto;
-    }
-  }
-`;
-m(n)`
-  position: relative;
-
-  .action {
-    position: absolute;
-    right: 4px;
-    top: 4px;
-    z-index: 1;
-    display: flex;
-    align-items: center;
-  }
-
-  &:hover {
-    .language-button {
-      display: inline-flex;
-    }
-  }
-
-  &:hover {
-    .ai-button {
-      display: inline-flex;
-    }
-  }
-`;
-Y();
-const We = {
-  type: "default",
-  title: "Section CardList",
-  description: "This is Section CardList",
-  center: !0,
-  dark: !1,
-  background: "",
-  col: 3,
-  gap: 2,
-  align: "top",
-  textAlign: "left",
-  iconSize: 100,
-  padding: "normal",
-  list: [
-    {
-      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({
-  componentId: i,
-  locale: p,
-  components: l
-}) {
-  const {
-    state: {
-      config: { defaultLocale: d }
-    },
-    localState: { customComponentPreviewerProperties: u }
-  } = j(), r = J();
-  return /* @__PURE__ */ t(
-    Ge,
-    {
-      componentId: i,
-      locale: p,
-      dev: {
-        mode: "draft",
-        components: l || r,
-        defaultLocale: d
-      },
-      properties: u?.[i] ?? {}
-    }
-  );
-}
-const D = 260, He = 5, K = "IGNORE_RENDER_BLOCKLET_TITLE", B = (i, p) => i ? Object.entries(i).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 = [
-  {
-    id: "section",
-    name: "Section",
-    properties: be
-  },
-  {
-    id: "section-card-list",
-    name: "Section Card List",
-    properties: We
-  },
-  {
-    id: "toc",
-    name: "Toc",
-    properties: he
-  },
-  {
-    id: "iframe",
-    name: "Embed",
-    properties: ge
-  },
-  {
-    id: "layout-block",
-    name: "Section Layout",
-    properties: {}
-  }
-].map((i) => ({ ...i, type: "basic", component: i.id }));
-function at({
-  state: i,
-  open: p,
-  onClose: l,
-  onSelect: d,
-  defaultTab: u,
-  title: r,
-  componentGroups: w,
-  components: f,
-  multiple: c = !1,
-  defaultSelected: b,
-  emptyText: z
-}) {
-  const { t: s } = F(), e = Q({
-    selectedComponent: null,
-    activeTab: u,
-    searchQuery: ""
-  }), g = M(() => w || [
-    {
-      name: "basic",
-      label: s("maker.components.basicGroup"),
-      components: Ve
-    },
-    i && {
-      name: "custom",
-      label: s("maker.components.customGroup"),
-      components: B(Z(i), "custom")
-    },
-    i && {
-      name: "resource",
-      label: s("maker.components.resourceGroup"),
-      components: B(ee(i), "resource")
-    }
-  ].filter(Boolean), [w, s, i, p]), x = e.activeTab || g[0]?.name, k = () => {
-    e.selectedComponent && (d(e.selectedComponent), l());
-  }, _ = (o) => {
-    if (o) {
-      if (v(o)) {
-        c ? e.selectedComponent = e.selectedComponent.filter((a) => a.id !== o.id) : e.selectedComponent = null;
-        return;
-      }
-      if (c) {
-        const a = Array.isArray(e.selectedComponent) ? e.selectedComponent : [], h = a.some((R) => R.id === o.id);
-        e.selectedComponent = h ? a.filter((R) => R.id !== o.id) : [...a, o];
-      } else
-        e.selectedComponent = o;
-    }
-  }, v = (o) => e.selectedComponent ? c ? e.selectedComponent.some((a) => a.id === o.id) : e.selectedComponent.id === o.id : !1, C = g?.length === 0, T = M(() => {
-    const o = g.find((a) => a?.name === x)?.components || [];
-    return e.searchQuery ? o.filter((a) => a.name.toLowerCase().includes(e.searchQuery.toLowerCase())) : o;
-  }, [x, g, e.searchQuery]);
-  A(() => {
-    e.searchQuery = "", p && b ? e.selectedComponent = c ? Array.isArray(b) ? b : [b] : b : e.selectedComponent = null;
-  }, [p, b, c]);
-  const I = T?.length === 0, O = z || s(x === "resource" ? "maker.components.needAddResource" : "maker.components.noComponents"), q = M(() => T ? T.reduce(
-    (o, a) => {
-      const h = a.blockletId || K, R = a.blockletTitle || s("maker.components.defaultGroup");
-      return o[h] || (o[h] = {
-        title: R,
-        components: []
-      }), o[h].components.push(a), o;
-    },
-    {}
-  ) : {}, [T]);
-  return /* @__PURE__ */ y(
-    re,
-    {
-      open: p,
-      onClose: l,
-      maxWidth: "lg",
-      fullWidth: !0,
-      slotProps: {
-        paper: {
-          sx: {
-            height: "80vh",
-            maxHeight: "80vh",
-            display: "flex",
-            flexDirection: "column"
-          }
-        }
-      },
-      children: [
-        /* @__PURE__ */ y(ie, { className: "between", sx: { display: "flex", gap: 2 }, children: [
-          /* @__PURE__ */ t(n, { children: r || s("maker.components.addComponent") }),
-          /* @__PURE__ */ t(
-            ne,
-            {
-              size: "small",
-              placeholder: s("maker.components.searchComponent"),
-              value: e.searchQuery,
-              onChange: (o) => e.searchQuery = o.target.value,
-              sx: { flex: 1, maxWidth: 350 },
-              slotProps: {
-                input: {
-                  startAdornment: /* @__PURE__ */ t(
-                    P,
-                    {
-                      icon: "tabler:search",
-                      style: {
-                        marginRight: 8
-                      }
-                    }
-                  )
-                }
-              }
-            }
-          ),
-          /* @__PURE__ */ t(ae, { size: "small", onClick: l, children: /* @__PURE__ */ t(n, { component: P, icon: "tabler:x", sx: { color: "text.primary" } }) })
-        ] }),
-        /* @__PURE__ */ y(
-          se,
-          {
-            sx: {
-              display: "flex",
-              gap: 2,
-              pl: "8px !important",
-              flex: 1,
-              overflow: "hidden"
-            },
-            children: [
-              !C && /* @__PURE__ */ t(n, { sx: { width: 150, borderRight: 1, borderColor: "divider" }, children: /* @__PURE__ */ t(
-                le,
-                {
-                  orientation: "vertical",
-                  value: x,
-                  onChange: (o, a) => e.activeTab = a,
-                  sx: {
-                    "& .MuiTab-root": {
-                      alignItems: "flex-start",
-                      textAlign: "left",
-                      minHeight: 48,
-                      py: 1.5,
-                      px: 2
-                    }
-                  },
-                  children: g.map((o, a) => /* @__PURE__ */ t(pe, { label: o?.label, value: o?.name }, a))
-                }
-              ) }),
-              /* @__PURE__ */ t(
-                n,
-                {
-                  sx: {
-                    flex: 1,
-                    overflowX: "hidden",
-                    overflowY: "auto",
-                    pr: 1
-                  },
-                  children: I ? /* @__PURE__ */ t(W, { children: O }) : /* @__PURE__ */ t(
-                    Ue,
-                    {
-                      wrapperComponent: N,
-                      wrapperComponentProps: {
-                        container: !0,
-                        spacing: 2,
-                        sx: I ? {
-                          height: "100%"
-                        } : {}
-                      },
-                      groups: q,
-                      emptyText: O,
-                      renderItem: (o) => {
-                        const a = v(o);
-                        return /* @__PURE__ */ t(
-                          N,
-                          {
-                            sx: {
-                              width: "100%",
-                              "& .add-component-card": {
-                                boxShadow: "none",
-                                border: 1,
-                                borderColor: a ? "primary.main" : "grey.200",
-                                "& .check-container": {
-                                  display: a ? "flex" : "none",
-                                  position: "absolute",
-                                  right: 0,
-                                  bottom: 0,
-                                  justifyContent: "flex-end",
-                                  alignItems: "flex-end",
-                                  width: 30,
-                                  height: 30,
-                                  overflow: "hidden",
-                                  transition: "all 0.3s ease",
-                                  color: "white",
-                                  "&::after": {
-                                    position: "absolute",
-                                    zIndex: 0,
-                                    display: "block",
-                                    width: 0,
-                                    height: 0,
-                                    borderTop: "transparent solid 15px",
-                                    borderLeft: "transparent solid 15px",
-                                    borderBottom: (h) => `solid 15px ${h.palette.primary.main}`,
-                                    borderRight: (h) => `solid 15px ${h.palette.primary.main}`,
-                                    transition: "all 0.1s ease",
-                                    content: '""'
-                                  },
-                                  "& .check-icon": {
-                                    position: "relative",
-                                    zIndex: 2,
-                                    margin: "0 1px 1px 0",
-                                    fontSize: 16,
-                                    transition: "all 0.2s ease"
-                                  }
-                                }
-                              }
-                            },
-                            size: {
-                              xs: 12,
-                              md: 6,
-                              lg: 4
-                            },
-                            children: /* @__PURE__ */ y(
-                              de,
-                              {
-                                className: "add-component-card",
-                                sx: {
-                                  position: "relative",
-                                  width: "100%",
-                                  cursor: "pointer"
-                                },
-                                onClick: () => _(o),
-                                children: [
-                                  /* @__PURE__ */ t(
-                                    ce,
-                                    {
-                                      sx: {
-                                        width: "100%",
-                                        height: D,
-                                        overflow: "auto",
-                                        position: "relative"
-                                      },
-                                      children: /* @__PURE__ */ t(
-                                        Qe,
-                                        {
-                                          components: f,
-                                          containerHeight: D,
-                                          component: o
-                                        },
-                                        o.id
-                                      )
-                                    }
-                                  ),
-                                  /* @__PURE__ */ t(
-                                    me,
-                                    {
-                                      sx: {
-                                        bgcolor: "background.paper",
-                                        borderTop: 1,
-                                        borderColor: a ? "primary.main" : "grey.200"
-                                      },
-                                      children: /* @__PURE__ */ t(
-                                        V,
-                                        {
-                                          variant: "body1",
-                                          noWrap: !0,
-                                          sx: {
-                                            fontWeight: "bold"
-                                          },
-                                          children: o.name
-                                        }
-                                      )
-                                    }
-                                  ),
-                                  /* @__PURE__ */ t(n, { className: "check-container", children: /* @__PURE__ */ t(te, { className: "check-icon" }) })
-                                ]
-                              }
-                            )
-                          },
-                          o.id
-                        );
-                      }
-                    }
-                  )
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ y(
-          ue,
-          {
-            sx: {
-              borderTop: 1,
-              borderColor: "divider",
-              p: 2
-            },
-            children: [
-              /* @__PURE__ */ t($, { onClick: l, variant: "outlined", children: s("common.cancel") }),
-              /* @__PURE__ */ t(
-                $,
-                {
-                  onClick: k,
-                  variant: "contained",
-                  disabled: !e.selectedComponent || c && Array.isArray(e.selectedComponent) && e.selectedComponent.length === 0,
-                  children: c && Array.isArray(e.selectedComponent) && e.selectedComponent.length > 0 ? s("common.addMultiple", { count: e.selectedComponent.length }) : s("common.add")
-                }
-              )
-            ]
-          }
-        )
-      ]
-    }
-  );
-}
-function Qe({
-  containerHeight: i,
-  component: p,
-  minScale: l = 0.1,
-  components: d
-}) {
-  const { locale: u } = F(), r = Q({
-    scale: 1,
-    shouldScroll: !1,
-    isVisible: !1,
-    hadInit: !1
-  }), { currentPage: w } = j(), f = S(null), c = S(null), b = S(0), z = S(null);
-  A(() => {
-    const v = new IntersectionObserver(
-      ([C]) => {
-        r.isVisible = C.isIntersecting;
-      },
-      {
-        root: null,
-        rootMargin: "50px",
-        threshold: 0
-      }
-    );
-    return c.current && v.observe(c.current), () => v.disconnect();
-  }, []), A(() => {
-    const v = () => {
-      if (b.current += 1, b.current > He) {
-        C.disconnect();
-        return;
-      }
-      if (!p.previewImage && f.current) {
-        const T = f.current.scrollHeight, I = i / T;
-        I < l ? (r.scale = l, r.shouldScroll = !0) : I < 1 ? (r.scale = I, r.shouldScroll = !1) : (r.scale = 1, r.shouldScroll = !1);
-      }
-      z.current && clearTimeout(z.current), z.current = setTimeout(() => {
-        r.hadInit = !0;
-      }, 200);
-    }, C = new ResizeObserver(() => {
-      setTimeout(v, 20);
-    });
-    return f.current && r.isVisible && C.observe(f.current), () => {
-      C.disconnect();
-    };
-  }, [i, l, r.isVisible, p]);
-  const { id: s, type: e, component: g, properties: x, previewImage: k } = p, _ = M(() => r.isVisible ? k ? /* @__PURE__ */ t(
-    n,
-    {
-      component: "img",
-      loading: "lazy",
-      src: oe(k),
-      alt: p.name,
-      sx: {
-        width: "100%",
-        height: "100%",
-        objectFit: "cover",
-        borderRadius: 1,
-        cursor: "pointer"
-      }
-    },
-    s
-  ) : e === "basic" ? /* @__PURE__ */ t(
-    xe,
-    {
-      id: s,
-      type: g,
-      section: x,
-      config: {
-        ...x,
-        locale: u,
-        editing: !1,
-        dev: {
-          mode: "draft"
-        }
-      },
-      page: w
-    },
-    s
-  ) : /* @__PURE__ */ t(Fe, { componentId: s, locale: u, components: d }, s) : null, [s, e, g, x, u, k, r.isVisible]);
-  return /* @__PURE__ */ t(
-    n,
-    {
-      ref: c,
-      sx: {
-        position: "relative",
-        width: "100%",
-        height: "100%",
-        overflowX: "hidden",
-        overflowY: r.shouldScroll ? "auto" : "hidden",
-        transition: "all 0.3s ease"
-      },
-      children: /* @__PURE__ */ y(
-        n,
-        {
-          sx: {
-            transform: `scale(${r.scale})`,
-            transformOrigin: "top left",
-            width: `${100 / r.scale}%`,
-            height: r.hadInit && r.shouldScroll ? "100%" : `${100 / r.scale}%`
-          },
-          children: [
-            !r.hadInit && /* @__PURE__ */ t(fe, { variant: "rectangular", width: "100%", height: "100%" }),
-            /* @__PURE__ */ t(
-              n,
-              {
-                ref: f,
-                sx: {
-                  width: "100%",
-                  height: k ? "100%" : "auto",
-                  pointerEvents: "none",
-                  opacity: r.hadInit ? 1 : 0
-                },
-                children: _
-              }
-            )
-          ]
-        }
-      )
-    }
-  );
-}
-function Ue({
-  groups: i,
-  emptyText: p,
-  renderItem: l,
-  wrapperComponent: d = n,
-  wrapperComponentProps: u = {
-    display: "inline-flex",
-    flexWrap: "wrap",
-    gap: 1
-  }
-}) {
-  return /* @__PURE__ */ t(n, { children: Object.keys(i).length > 0 ? Object.entries(i).map(([r, { title: w, components: f }]) => /* @__PURE__ */ y(
-    n,
-    {
-      sx: {
-        mb: 3
-      },
-      children: [
-        r !== K && /* @__PURE__ */ y(
-          V,
-          {
-            className: "blocklet-title",
-            variant: "subtitle2",
-            sx: {
-              mb: 2,
-              fontWeight: 500,
-              color: "text.primary",
-              display: "flex",
-              alignItems: "center",
-              gap: 1
-            },
-            children: [
-              /* @__PURE__ */ t(
-                n,
-                {
-                  component: "span",
-                  sx: {
-                    width: 4,
-                    height: 20,
-                    backgroundColor: "primary.main",
-                    borderRadius: 1,
-                    display: "inline-block"
-                  }
-                }
-              ),
-              w
-            ]
-          }
-        ),
-        /* @__PURE__ */ t(d, { ...u, children: f.map((c) => l(c)) })
-      ]
-    },
-    r
-  )) : /* @__PURE__ */ t(W, { children: p }) });
-}
+var e = AddComponent;
 export {
-  at as AddComponent,
-  Qe as AutoScaledComponentRenderer,
-  Ve as BASIC_COMPONENT_LIST,
-  Ue as GroupedComponentsList,
-  at as default,
-  B as formatComponent
+  e as default
 };