@chaibuilder/sdk 1.3.0-beta.4 → 1.3.0-beta.5

package/dist/{index-Dj3gRSmM.js → index-C4KfKPbU.js}

@@ -206,10 +206,10 @@ const hasInitialValue = (o) => "init" in o, isActuallyWritableAtom = (o) => !!o.
     }
   }, x = (k) => returnAtomValue(p(k)), m = (k) => {
     let A = n.get(k);
-    return A || (A = C(k)), A;
+    return A || (A = R(k)), A;
   }, g = (k, A) => !A.l.size && (!A.t.size || A.t.size === 1 && A.t.has(k)), b = (k) => {
     const A = n.get(k);
-    A && g(k, A) && R(k);
+    A && g(k, A) && C(k);
   }, j = (k) => {
     const A = /* @__PURE__ */ new Map(), B = /* @__PURE__ */ new WeakMap(), E = (S) => {
       const N = n.get(S);
@@ -257,20 +257,20 @@ const hasInitialValue = (o) => "init" in o, isActuallyWritableAtom = (o) => !!o.
   }, v = (k, ...A) => {
     const B = f(k, ...A);
     return w(), B;
-  }, C = (k, A) => {
+  }, R = (k, A) => {
     const B = {
       t: new Set(A && [A]),
       l: /* @__PURE__ */ new Set()
     };
     if (n.set(k, B), p(k).d.forEach((E, _) => {
       const S = n.get(_);
-      S ? S.t.add(k) : _ !== k && C(_, k);
+      S ? S.t.add(k) : _ !== k && R(_, k);
     }), p(k), isActuallyWritableAtom(k) && k.onMount) {
       const E = k.onMount((..._) => v(k, ..._));
       E && (B.u = E);
     }
     return B;
-  }, R = (k) => {
+  }, C = (k) => {
     var A;
     const B = (A = n.get(k)) == null ? void 0 : A.u;
     B && B(), n.delete(k);
@@ -278,7 +278,7 @@ const hasInitialValue = (o) => "init" in o, isActuallyWritableAtom = (o) => !!o.
     E && (hasPromiseAtomValue(E) && cancelPromise(E.v), E.d.forEach((_, S) => {
       if (S !== k) {
         const N = n.get(S);
-        N && (N.t.delete(k), g(S, N) && R(S));
+        N && (N.t.delete(k), g(S, N) && C(S));
       }
     }));
   }, I = (k, A, B) => {
@@ -289,10 +289,10 @@ const hasInitialValue = (o) => "init" in o, isActuallyWritableAtom = (o) => !!o.
         return;
       }
       const N = n.get(S);
-      N && (N.t.delete(k), g(S, N) && R(S));
+      N && (N.t.delete(k), g(S, N) && C(S));
     }), E.forEach((_) => {
       const S = n.get(_);
-      S ? S.t.add(k) : n.has(k) && C(_, k);
+      S ? S.t.add(k) : n.has(k) && R(_, k);
     });
   }, w = () => {
     for (; r.size; ) {
@@ -343,8 +343,8 @@ function splitAtom(o, n) {
             x[b] = f;
             return;
           }
-          const v = (R) => {
-            const I = R(l), w = R(o), k = a(w, I == null ? void 0 : I.arr).keyList.indexOf(j);
+          const v = (C) => {
+            const I = C(l), w = C(o), k = a(w, I == null ? void 0 : I.arr).keyList.indexOf(j);
             if (k < 0 || k >= w.length) {
               const A = c[a(c).keyList.indexOf(j)];
               if (A)
@@ -352,8 +352,8 @@ function splitAtom(o, n) {
               throw new Error("splitAtom: index out of bounds for read");
             }
             return w[k];
-          }, C = (R, I, w) => {
-            const T = R(l), k = R(o), B = a(k, T == null ? void 0 : T.arr).keyList.indexOf(j);
+          }, R = (C, I, w) => {
+            const T = C(l), k = C(o), B = a(k, T == null ? void 0 : T.arr).keyList.indexOf(j);
             if (B < 0 || B >= k.length)
               throw new Error("splitAtom: index out of bounds for write");
             const E = isFunction(w) ? w(k[B]) : w;
@@ -363,7 +363,7 @@ function splitAtom(o, n) {
               ...k.slice(B + 1)
             ]);
           };
-          x[b] = isWritable(o) ? atom(v, C) : atom(v);
+          x[b] = isWritable(o) ? atom(v, R) : atom(v);
         }), p && p.keyList.length === m.length && p.keyList.every((g, b) => g === m[b]) ? u = p : u = { arr: c, atomList: x, keyList: m }, r.set(c, u), u;
       }, l = atom((c) => {
         const d = c(l), u = c(o);
@@ -1152,12 +1152,12 @@ const useBlocksStoreManager = () => {
   } = useBlocksStoreManager();
   return {
     moveBlocks: (j, f, v) => {
-      const C = map(j, (I) => {
+      const R = map(j, (I) => {
         const T = n.find((B) => B._id === I)._parent || null, A = n.filter((B) => T ? B._parent === T : !B._parent).map((B) => B._id).indexOf(I);
         return { _id: I, oldParent: T, oldPosition: A };
-      }), R = C.find(({ _id: I }) => I === j[0]);
-      R && R.oldParent === f && R.oldPosition === v || (i(j, f, v), o({
-        undo: () => each(C, ({ _id: I, oldParent: w, oldPosition: T }) => {
+      }), C = R.find(({ _id: I }) => I === j[0]);
+      C && C.oldParent === f && C.oldPosition === v || (i(j, f, v), o({
+        undo: () => each(R, ({ _id: I, oldParent: w, oldPosition: T }) => {
           i([I], w, T);
         }),
         redo: () => i(j, f, v)
@@ -1170,27 +1170,27 @@ const useBlocksStoreManager = () => {
       });
     },
     removeBlocks: (j) => {
-      var R;
-      const f = (R = first(j)) == null ? void 0 : R._parent, C = n.filter((I) => f ? I._parent === f : !I._parent).indexOf(first(j));
+      var C;
+      const f = (C = first(j)) == null ? void 0 : C._parent, R = n.filter((I) => f ? I._parent === f : !I._parent).indexOf(first(j));
       l(map(j, "_id")), o({
-        undo: () => a(j, f, C),
+        undo: () => a(j, f, R),
         redo: () => l(map(j, "_id"))
       });
     },
     updateBlocks: (j, f, v) => {
-      let C = [];
+      let R = [];
       if (v)
-        C = map(j, (R) => ({ _id: R, ...v }));
+        R = map(j, (C) => ({ _id: C, ...v }));
       else {
-        const R = keys(f);
-        C = map(j, (I) => {
+        const C = keys(f);
+        R = map(j, (I) => {
           const w = n.find((k) => k._id === I), T = { _id: I };
-          return each(R, (k) => T[k] = w[k]), T;
+          return each(C, (k) => T[k] = w[k]), T;
         });
       }
-      c(map(j, (R) => ({ _id: R, ...f }))), o({
-        undo: () => c(C),
-        redo: () => c(map(j, (R) => ({ _id: R, ...f })))
+      c(map(j, (C) => ({ _id: C, ...f }))), o({
+        undo: () => c(R),
+        redo: () => c(map(j, (C) => ({ _id: C, ...f })))
       });
     },
     updateBlocksRuntime: (j, f) => {
@@ -1205,8 +1205,8 @@ const useBlocksStoreManager = () => {
     updateMultipleBlocksProps: (j) => {
       let f = [];
       f = map(j, (v) => {
-        const C = keys(v), R = n.find((w) => w._id === v._id), I = {};
-        return each(C, (w) => I[w] = R[w]), I;
+        const R = keys(v), C = n.find((w) => w._id === v._id), I = {};
+        return each(R, (w) => I[w] = C[w]), I;
       }), c(j), o({
         undo: () => c(f),
         redo: () => c(j)
@@ -1237,16 +1237,16 @@ const useBlocksStoreManager = () => {
         return a(v, c, d);
       }
       const u = generateUUID(), p = getBlockDefaultProps(i.props), x = [];
-      forIn(p, (v, C) => {
+      forIn(p, (v, R) => {
         if (startsWith(v, SLOT_KEY)) {
-          const R = v.replace(SLOT_KEY, "");
+          const C = v.replace(SLOT_KEY, "");
           x.push({
-            _id: R,
+            _id: C,
             _type: "Slot",
             _parent: u,
-            _name: i.props[C].name,
-            _styles: i.props[C].styles,
-            _emptyStyles: i.props[C].emptyStyles
+            _name: i.props[R].name,
+            _styles: i.props[R].styles,
+            _emptyStyles: i.props[R].emptyStyles
           });
         }
       });
@@ -3068,8 +3068,8 @@ const useDnd = () => {
       }
       const g = dropTarget, j = getOrientation(g) === "vertical" ? m.clientY + ((I = iframeDocument == null ? void 0 : iframeDocument.defaultView) == null ? void 0 : I.scrollY) : m.clientX;
       dropIndex = calculateDropIndex(j, possiblePositions);
-      const f = d, v = g.getAttribute("data-block-id"), C = dropTarget.getAttribute("data-dnd-dragged") !== "yes";
-      if ((f == null ? void 0 : f._id) === v || !C || !canDropInTarget(dropTarget, d)) {
+      const f = d, v = g.getAttribute("data-block-id"), R = dropTarget.getAttribute("data-dnd-dragged") !== "yes";
+      if ((f == null ? void 0 : f._id) === v || !R || !canDropInTarget(dropTarget, d)) {
         x();
         return;
       }
@@ -3077,8 +3077,8 @@ const useDnd = () => {
         a(f, v === "canvas" ? null : v, dropIndex), setTimeout(x, 300);
         return;
       }
-      let R = g.getAttribute("data-block-id");
-      R === null && (R = m.target.parentElement.getAttribute("data-block-id")), c([f._id], R === "canvas" ? null : R, dropIndex), x(), setTimeout(removePlaceholder, 300);
+      let C = g.getAttribute("data-block-id");
+      C === null && (C = m.target.parentElement.getAttribute("data-block-id")), c([f._id], C === "canvas" ? null : C, dropIndex), x(), setTimeout(removePlaceholder, 300);
     },
     onDragEnter: (m) => {
       const g = m, b = g.target;
@@ -3291,7 +3291,53 @@ const useHandleCanvasDblClick = () => {
       ]
     }
   ) });
-}, HeadTags = () => {
+}, googleFontsMap = {
+  Montserrat: [100, 200, 300, 400, 500, 600, 700, 800, 900],
+  Roboto: [100, 300, 400, 500, 700, 900],
+  "Open Sans": [300, 400, 600, 700, 800],
+  Lato: [100, 300, 400, 700, 900],
+  Poppins: [100, 200, 300, 400, 500, 600, 700, 800, 900],
+  Inter: [100, 200, 300, 400, 500, 600, 700, 800, 900],
+  Nunito: [200, 300, 400, 600, 700, 800, 900],
+  Oswald: [200, 300, 400, 500, 600, 700],
+  Raleway: [100, 200, 300, 400, 500, 600, 700, 800, 900],
+  Ubuntu: [300, 400, 500, 700],
+  "Source Sans Pro": [200, 300, 400, 600, 700, 900],
+  "Noto Sans": [100, 200, 300, 400, 500, 600, 700, 800, 900],
+  "Work Sans": [100, 200, 300, 400, 500, 600, 700, 800, 900],
+  "Playfair Display": [400, 500, 600, 700, 800, 900],
+  "DM Sans": [100, 200, 300, 400, 500, 600, 700, 800, 900],
+  Merriweather: [300, 400, 700, 900],
+  Lora: [400, 500, 600, 700],
+  "PT Serif": [400, 700],
+  "Roboto Mono": [100, 200, 300, 400, 500, 600, 700],
+  "Source Code Pro": [200, 300, 400, 500, 600, 700, 800, 900],
+  Quicksand: [300, 400, 500, 600, 700],
+  Manrope: [200, 300, 400, 500, 600, 700, 800],
+  "Space Grotesk": [300, 400, 500, 600, 700],
+  "Plus Jakarta Sans": [200, 300, 400, 500, 600, 700, 800],
+  "Varela Round": [400],
+  Comfortaa: [300, 400, 500, 600, 700],
+  Barlow: [100, 200, 300, 400, 500, 600, 700, 800, 900],
+  Mulish: [200, 300, 400, 500, 600, 700, 800, 900],
+  Rubik: [300, 400, 500, 600, 700, 800, 900],
+  Outfit: [100, 200, 300, 400, 500, 600, 700, 800, 900],
+  "Fira Sans": [100, 200, 300, 400, 500, 600, 700, 800, 900],
+  "Josefin Sans": [100, 200, 300, 400, 500, 600, 700],
+  "Be Vietnam Pro": [100, 200, 300, 400, 500, 600, 700, 800, 900],
+  Urbanist: [100, 200, 300, 400, 500, 600, 700, 800, 900],
+  "IBM Plex Sans": [100, 200, 300, 400, 500, 600, 700],
+  "Red Hat Display": [300, 400, 500, 600, 700, 800, 900],
+  "Red Hat Text": [300, 400, 500, 600, 700],
+  Sora: [100, 200, 300, 400, 500, 600, 700, 800],
+  Karla: [200, 300, 400, 500, 600, 700, 800],
+  "Albert Sans": [100, 200, 300, 400, 500, 600, 700, 800, 900],
+  "Public Sans": [100, 200, 300, 400, 500, 600, 700, 800, 900],
+  Figtree: [300, 400, 500, 600, 700, 800, 900],
+  Cabin: [400, 500, 600, 700],
+  Bitter: [100, 200, 300, 400, 500, 600, 700, 800, 900],
+  Lexend: [100, 200, 300, 400, 500, 600, 700, 800, 900]
+}, getFontWeights = (o) => googleFontsMap[o] || [300, 400, 500, 600, 700, 800, 900], HeadTags = () => {
   const [o] = useBrandingOptions(), [n] = useSelectedBlockIds(), [r] = useDarkMode(), a = useAtomValue$1(arbitraryFontsAtom), [l] = useSelectedStylingBlocks(), [i] = useAtom$1(draggedBlockAtom), [c] = useAtom$1(dropTargetBlockIdAtom), { document: d, window: u } = useFrame(), [p] = useState(d == null ? void 0 : d.getElementById("highlighted-block")), [x] = useState(
     d == null ? void 0 : d.getElementById("selected-block")
   ), [m] = useState(
@@ -3304,14 +3350,14 @@ const useHandleCanvasDblClick = () => {
   }, [r, d]);
   const b = get(o, "headingFont", "DM Sans"), j = get(o, "bodyFont", "DM Sans");
   return useEffect(() => {
-    const f = get(o, "primaryColor", "#000"), v = get(o, "secondaryColor", "#FFF"), C = get(o, "bodyBgLightColor", "#fff"), R = get(o, "bodyBgDarkColor", "#000"), I = get(o, "bodyTextDarkColor", "#000"), w = get(o, "bodyTextLightColor", "#fff"), T = s({
+    const f = get(o, "primaryColor", "#000"), v = get(o, "secondaryColor", "#FFF"), R = get(o, "bodyBgLightColor", "#fff"), C = get(o, "bodyBgDarkColor", "#000"), I = get(o, "bodyTextDarkColor", "#000"), w = get(o, "bodyTextLightColor", "#fff"), T = s({
       colors: [f, v],
       names: ["primary", "secondary"]
     });
     set(T, "primary.DEFAULT", f), set(T, "secondary.DEFAULT", v);
     const k = {
-      "bg-light": C,
-      "bg-dark": R,
+      "bg-light": R,
+      "bg-dark": C,
       "text-dark": I,
       "text-light": w
     }, A = get(o, "roundedCorners", "0");
@@ -3384,7 +3430,10 @@ const useHandleCanvasDblClick = () => {
       "link",
       {
         rel: "stylesheet",
-        href: `https://fonts.googleapis.com/css2?${a.map((f) => f.replace(/_/g, "+")).map((f) => `family=${f}:wght@200..800`).join("&")}&display=swap`
+        href: `https://fonts.googleapis.com/css2?${a.map((f) => f.replace(/_/g, "+")).map((f) => {
+          const v = f.replace(/\+/g, " "), R = getFontWeights(v);
+          return `family=${f}:wght@${R.join(";")}`;
+        }).join("&")}&display=swap`
       }
     )
   ] });
@@ -3502,19 +3551,19 @@ function applyLanguage(o, n, r) {
 }
 function BlocksRendererStatic({ blocks: o, allBlocks: n }) {
   const { selectedLang: r } = useLanguages(), [a] = useAtom$1(xShowBlocksAtom), [l] = useCutBlockIds(), [i] = useAtom$1(draggedBlockAtom), [c] = useAtom$1(dropTargetBlockIdAtom), [, d] = useCanvasWidth(), [u] = useCanvasSettings(), [p] = useHiddenBlockIds(), { getGlobalBlocks: x } = useGlobalBlocksStore(), m = useCallback((f) => getStyleAttrs(f, d), [d]), [g] = useChaiExternalData(), [b] = useAtom$1(inlineEditingActiveAtom), j = useCallback(
-    (f) => f.reduce((v, C) => {
-      const R = get(u, C, {});
-      return { ...v, ...R };
+    (f) => f.reduce((v, R) => {
+      const C = get(u, R, {});
+      return { ...v, ...C };
     }, {}),
     [u]
   );
   return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: React__default.Children.toArray(
     o.map((f, v) => {
       if (b === f._id || p.includes(f._id)) return null;
-      const C = {}, R = filter(n, { _parent: f._id });
-      if (C.children = R.length > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx(BlocksRendererStatic, { allBlocks: n, blocks: R }) : null, f._type === "GlobalBlock") {
+      const R = {}, C = filter(n, { _parent: f._id });
+      if (R.children = C.length > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx(BlocksRendererStatic, { allBlocks: n, blocks: C }) : null, f._type === "GlobalBlock") {
         const S = x(f);
-        C.children = /* @__PURE__ */ jsxRuntimeExports.jsx(RenderGlobalBlock, { blocks: filter(S, (N) => !N._parent), allBlocks: S });
+        R.children = /* @__PURE__ */ jsxRuntimeExports.jsx(RenderGlobalBlock, { blocks: filter(S, (N) => !N._parent), allBlocks: S });
       }
       const I = getBlockComponent(f._type), w = get(I, "server", !1), T = w ? RSCBlock : get(I, "builderComponent", get(I, "component", null));
       if (isNull(T)) return /* @__PURE__ */ jsxRuntimeExports.jsx("noscript", { children: `<!-- ${f == null ? void 0 : f._type} not registered -->` });
@@ -3540,7 +3589,7 @@ function BlocksRendererStatic({ blocks: o, allBlocks: n }) {
         index: v,
         ...applyBindings(applyLanguage(f, r, I), g),
         ...omit(B, ["__isHidden"]),
-        ...C,
+        ...R,
         inBuilder: !0,
         blockState: A
       }) });
@@ -3593,7 +3642,7 @@ const useAllDataProviders = () => useMemo(() => getChaiDataProviders(), []), Blo
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { id: "main-content", onClick: d, className: "h-full w-full p-8 pb-0", ref: i, children: o });
 }, getElementByStyleId = (o, n) => o.querySelector(`[data-style-id="${n}"]`), StaticCanvas = () => {
-  const [o] = useCanvasWidth(), [, n] = useSelectedBlockIds(), r = useSelectedBlock(), [, a] = useHighlightBlockId(), l = useRef(null), i = useRef(null), [c, d] = useState({ width: 0, height: 0 }), u = useCanvasScale(c), [p, x] = useState([]), [, m] = useState([]), [, g] = useAtom$1(canvasIframeAtom), [b, j] = useSelectedStylingBlocks(), f = useBuilderProp("loading", !1), v = useBuilderProp("htmlDir", "ltr"), C = (w) => {
+  const [o] = useCanvasWidth(), [, n] = useSelectedBlockIds(), r = useSelectedBlock(), [, a] = useHighlightBlockId(), l = useRef(null), i = useRef(null), [c, d] = useState({ width: 0, height: 0 }), u = useCanvasScale(c), [p, x] = useState([]), [, m] = useState([]), [, g] = useAtom$1(canvasIframeAtom), [b, j] = useSelectedStylingBlocks(), f = useBuilderProp("loading", !1), v = useBuilderProp("htmlDir", "ltr"), R = (w) => {
     d((T) => ({ ...T, width: w }));
   };
   useEffect(() => {
@@ -3601,7 +3650,7 @@ const useAllDataProviders = () => useMemo(() => getChaiDataProviders(), []), Blo
     const { clientWidth: w, clientHeight: T } = i.current;
     d({ width: w, height: T });
   }, [i, o]);
-  const R = (w, T = 0) => {
+  const C = (w, T = 0) => {
     const { top: k } = w.getBoundingClientRect();
     return k + T >= 0 && k - T <= window.innerHeight;
   };
@@ -3609,7 +3658,7 @@ const useAllDataProviders = () => useMemo(() => getChaiDataProviders(), []), Blo
     var w, T;
     if (r && r.type !== "Multiple" && l.current) {
       const k = getElementByDataBlockId(l.current.contentDocument, r._id);
-      k && (R(k) || (T = (w = l.current) == null ? void 0 : w.contentWindow) == null || T.scrollTo({ top: k.offsetTop, behavior: "smooth" }), x([k]));
+      k && (C(k) || (T = (w = l.current) == null ? void 0 : w.contentWindow) == null || T.scrollTo({ top: k.offsetTop, behavior: "smooth" }), x([k]));
     }
   }, [r]), useEffect(() => {
     if (!isEmpty(b) && l.current) {
@@ -3625,7 +3674,7 @@ const useAllDataProviders = () => useMemo(() => getChaiDataProviders(), []), Blo
     let w = IframeInitialContent;
     return w = w.replace("__HTML_DIR__", v), w;
   }, [v]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(ResizableCanvasWrapper, { onMount: C, onResize: C, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(ResizableCanvasWrapper, { onMount: R, onResize: R, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
     {
       onClick: () => {
@@ -3764,7 +3813,7 @@ const useAllDataProviders = () => useMemo(() => getChaiDataProviders(), []), Blo
       l !== o.length - 1 && /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: "rtl:rotate-180", size: 16 })
     ] }, l))
   ] }) });
-}, CodeEditor$1 = React__default.lazy(() => import("./CodeEditor-DHJ_PVtc.js")), CanvasArea = () => {
+}, CodeEditor$1 = React__default.lazy(() => import("./CodeEditor-BTeBxM9t.js")), CanvasArea = () => {
   const [o] = useCodeEditor(), n = useBuilderProp("onError", noop);
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex h-full max-h-full w-full flex-1 flex-col", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative flex h-full max-h-full flex-col overflow-hidden bg-gray-100/40 px-2", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-full" }), children: /* @__PURE__ */ jsxRuntimeExports.jsx(ErrorBoundary, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx(FallbackError, {}), onError: n, children: /* @__PURE__ */ jsxRuntimeExports.jsx(StaticCanvas, {}) }) }),
@@ -3852,7 +3901,7 @@ const useAllDataProviders = () => useMemo(() => getChaiDataProviders(), []), Blo
     bodyBgLightColor: f,
     roundedCorners: v
   } = r;
-  let C = {
+  let R = {
     headingFont: y({
       title: c("Theme Config.Heading Font"),
       default: p,
@@ -3870,8 +3919,8 @@ const useAllDataProviders = () => useMemo(() => getChaiDataProviders(), []), Blo
     primaryColor: h({ title: c("Theme Config.Primary"), default: x }),
     secondaryColor: h({ title: c("Theme Config.Secondary"), default: j })
   };
-  l || (C = {
-    ...C,
+  l || (R = {
+    ...R,
     bodyBgLightColor: h({
       title: c("Theme Config.Background"),
       default: f
@@ -3889,13 +3938,13 @@ const useAllDataProviders = () => useMemo(() => getChaiDataProviders(), []), Blo
       default: g
     })
   });
-  const R = {
+  const C = {
     type: "object",
     properties: {}
   }, I = {};
-  return Object.keys(C).forEach((w) => {
-    const T = C[w];
-    return R.properties || (R.properties = {}), R.properties[w] = T.schema, I[w] = T.uiSchema, !0;
+  return Object.keys(R).forEach((w) => {
+    const T = R[w];
+    return C.properties || (C.properties = {}), C.properties[w] = T.schema, I[w] = T.uiSchema, !0;
   }), /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cn("flex h-full w-full select-none flex-col", n), children: [
     o ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "rounded-md bg-background/30 p-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx("h1", { className: "px-1 font-semibold", children: c("Theme Configuration") }) }) : null,
     /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -3908,7 +3957,7 @@ const useAllDataProviders = () => useMemo(() => getChaiDataProviders(), []), Blo
         liveOmit: !0,
         liveValidate: !0,
         uiSchema: I,
-        schema: R,
+        schema: C,
         formData: r,
         validator,
         onChange: d
@@ -4115,14 +4164,14 @@ function BiExpandVertical(o) {
 const Node = memo(({ node: o, style: n, dragHandle: r }) => {
   const a = useBuilderProp("outlineMenuItems", []), { t: l } = useTranslation(), [i, , c] = useHiddenBlockIds(), [d] = useAtom$1(canvasIframeAtom);
   let u = null;
-  const p = o.children.length > 0, { highlightBlock: x, clearHighlight: m } = useBlockHighlight(), { id: g, data: b, isSelected: j, willReceiveDrop: f, isDragging: v, isEditing: C, handleClick: R } = o, I = (E) => {
+  const p = o.children.length > 0, { highlightBlock: x, clearHighlight: m } = useBlockHighlight(), { id: g, data: b, isSelected: j, willReceiveDrop: f, isDragging: v, isEditing: R, handleClick: C } = o, I = (E) => {
     E.stopPropagation(), !i.includes(g) && o.toggle();
   }, w = (E) => {
     E.isInternal && (u = E.isOpen, E.isOpen && E.close());
   }, T = (E) => {
     E.isInternal && u !== null && (u ? E.open() : E.close(), u = null);
   }, k = (E) => {
-    E.stopPropagation(), !o.isOpen && !i.includes(g) && o.toggle(), R(E);
+    E.stopPropagation(), !o.isOpen && !i.includes(g) && o.toggle(), C(E);
   };
   useEffect(() => {
     const E = setTimeout(() => {
@@ -4192,7 +4241,7 @@ const Node = memo(({ node: o, style: n, dragHandle: r }) => {
           ),
           /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center", children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "-mt-0.5 h-3 w-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx(TypeIcon, { type: b == null ? void 0 : b._type }) }),
-            C ? /* @__PURE__ */ jsxRuntimeExports.jsx(Input, { node: o }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            R ? /* @__PURE__ */ jsxRuntimeExports.jsx(Input, { node: o }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(
               "div",
               {
                 className: "ml-2 flex items-center gap-x-1 truncate text-[11px]",
@@ -4592,7 +4641,7 @@ const Node = memo(({ node: o, style: n, dragHandle: r }) => {
     ...getAttrs(r),
     ...getStyles(r)
   }, r.attributes) {
-    const v = r.attributes.find((C) => includes(NAME_ATTRIBUTES, C.key));
+    const v = r.attributes.find((R) => includes(NAME_ATTRIBUTES, R.key));
     v && (a._name = v.value);
   }
   if (i)
@@ -4610,14 +4659,14 @@ const Node = memo(({ node: o, style: n, dragHandle: r }) => {
     ];
     a = {
       ...a,
-      href: ((u = l.find((C) => C.key === "href")) == null ? void 0 : u.value) || "",
-      hrefType: ((p = l.find((C) => C.key === "data-vbtype")) == null ? void 0 : p.value) || "video",
-      autoplay: ((x = l.find((C) => C.key === "data-autoplay")) == null ? void 0 : x.value) === "true",
-      maxWidth: ((g = (m = l.find((C) => C.key === "data-maxwidth")) == null ? void 0 : m.value) == null ? void 0 : g.replace("px", "")) || "",
-      backdropColor: ((b = l.find((C) => C.key === "data-overlay")) == null ? void 0 : b.value) || "",
-      galleryName: ((j = l.find((C) => C.key === "data-gall")) == null ? void 0 : j.value) || ""
-    }, forEach(v, (C) => {
-      has(a, `styles_attrs.${C}`) && delete a.styles_attrs[C];
+      href: ((u = l.find((R) => R.key === "href")) == null ? void 0 : u.value) || "",
+      hrefType: ((p = l.find((R) => R.key === "data-vbtype")) == null ? void 0 : p.value) || "video",
+      autoplay: ((x = l.find((R) => R.key === "data-autoplay")) == null ? void 0 : x.value) === "true",
+      maxWidth: ((g = (m = l.find((R) => R.key === "data-maxwidth")) == null ? void 0 : m.value) == null ? void 0 : g.replace("px", "")) || "",
+      backdropColor: ((b = l.find((R) => R.key === "data-overlay")) == null ? void 0 : b.value) || "",
+      galleryName: ((j = l.find((R) => R.key === "data-gall")) == null ? void 0 : j.value) || ""
+    }, forEach(v, (R) => {
+      has(a, `styles_attrs.${R}`) && delete a.styles_attrs[R];
     });
   }
   if (a._type === "Input") {
@@ -4627,8 +4676,8 @@ const Node = memo(({ node: o, style: n, dragHandle: r }) => {
     const v = stringify([r]);
     return hasVideoEmbed(v) && (set(a, "_type", "Video"), set(a, "url", getVideoURLFromHTML(v)), set(a, "styles", `${STYLES_KEY},absolute top-0 left-0 w-full h-full`), set(a, "controls", { autoPlay: !1, muted: !0, loop: !1, controls: !1 })), a.content = v, [a];
   } else if (r.tagName === "svg") {
-    const v = find(r.attributes, { key: "height" }), C = find(r.attributes, { key: "width" }), R = get(v, "value") ? `[${get(v, "value")}px]` : "24px", I = get(C, "value") ? `[${get(C, "value")}px]` : "24px", w = get(find(r.attributes, { key: "class" }), "value", "w-full h-full");
-    return a.styles = `${STYLES_KEY}, ${cn(`w-${I} h-${R}`, w)}`.trim(), r.attributes = filter(r.attributes, (T) => !includes(["style", "width", "height", "class"], T.key)), a.icon = stringify([r]), [a];
+    const v = find(r.attributes, { key: "height" }), R = find(r.attributes, { key: "width" }), C = get(v, "value") ? `[${get(v, "value")}px]` : "24px", I = get(R, "value") ? `[${get(R, "value")}px]` : "24px", w = get(find(r.attributes, { key: "class" }), "value", "w-full h-full");
+    return a.styles = `${STYLES_KEY}, ${cn(`w-${I} h-${C}`, w)}`.trim(), r.attributes = filter(r.attributes, (T) => !includes(["style", "width", "height", "class"], T.key)), a.icon = stringify([r]), [a];
   } else if (r.tagName == "option" && n && ((f = n.block) == null ? void 0 : f._type) === "Select")
     return n.block.options.push({
       label: getTextContent(r.children),
@@ -4695,7 +4744,7 @@ function ExpandableObject(o) {
   useEffect(() => {
     m.current ? j(p(d, r, n)) : m.current = !0;
   }, [p]);
-  const f = g ? u.collapseIcon : u.expandIcon, v = g ? "collapse JSON" : "expand JSON", C = useComponentId(), R = d + 1, I = a.length - 1, w = (T) => {
+  const f = g ? u.collapseIcon : u.expandIcon, v = g ? "collapse JSON" : "expand JSON", R = useComponentId(), C = d + 1, I = a.length - 1, w = (T) => {
     T.key === " " && (T.preventDefault(), b());
   };
   return /* @__PURE__ */ createElement("div", {
@@ -4709,7 +4758,7 @@ function ExpandableObject(o) {
     tabIndex: 0,
     "aria-label": v,
     "aria-expanded": g,
-    "aria-controls": g ? C : void 0
+    "aria-controls": g ? R : void 0
   }), n && (x ? /* @__PURE__ */ createElement("span", {
     className: u.clickableLabel,
     onClick: b,
@@ -4721,14 +4770,14 @@ function ExpandableObject(o) {
   }, n, ":")), /* @__PURE__ */ createElement("span", {
     className: u.punctuation
   }, i), g ? /* @__PURE__ */ createElement("div", {
-    id: C
+    id: R
   }, a.map((T, k) => /* @__PURE__ */ createElement(DataRender, {
     key: T[0] || k,
     field: T[0],
     value: T[1],
     style: u,
     lastElement: k === I,
-    level: R,
+    level: C,
     shouldExpandNode: p,
     clickToExpandNode: x
   }))) : /* @__PURE__ */ createElement("span", {
@@ -5234,7 +5283,7 @@ const ViewData = ({ data: o, fullView: n }) => {
       }
     )
   ] });
-}, UnsplashImages = React__default.lazy(() => import("./UnsplashImages-BZhjCB3h.js")), UploadImages = React__default.lazy(() => import("./UploadImages-D0cYUTgM.js")), ImagesPanel = ({
+}, UnsplashImages = React__default.lazy(() => import("./UnsplashImages-lnZxVhFX.js")), UploadImages = React__default.lazy(() => import("./UploadImages-ybTT38Hc.js")), ImagesPanel = ({
   isModalView: o = !1,
   onSelect: n = () => {
   }
@@ -5329,11 +5378,11 @@ const ImagePickerField = ({ value: o, onChange: n, id: r, onBlur: a }) => {
   onChange: r
 }) => {
   var _;
-  const { t: a } = useTranslation(), l = useBuilderProp("searchCollectionItems", (S, N) => []), [i, c] = useState(!1), [d, u] = useState(!1), [p, x] = useState(!1), [m, g] = useState("pages"), [b, j] = useState(""), [f, v] = useState([]), [C, R] = useState(-1), I = useRef(null), w = (_ = n == null ? void 0 : n.find((S) => S.key === m)) == null ? void 0 : _.name;
+  const { t: a } = useTranslation(), l = useBuilderProp("searchCollectionItems", (S, N) => []), [i, c] = useState(!1), [d, u] = useState(!1), [p, x] = useState(!1), [m, g] = useState("pages"), [b, j] = useState(""), [f, v] = useState([]), [R, C] = useState(-1), I = useRef(null), w = (_ = n == null ? void 0 : n.find((S) => S.key === m)) == null ? void 0 : _.name;
   useEffect(() => {
     if (!o || d || !startsWith(o, "collection:") || i) return;
     const S = split(o, ":"), N = get(S, 1, "pages") || "pages";
-    g(N), j(""), v([]), R(-1), (async () => {
+    g(N), j(""), v([]), C(-1), (async () => {
       u(!0);
       const L = await l(N, [get(S, 2, "pages")]);
       L && Array.isArray(L) && j(get(L, [0, "name"], "")), c(!0), u(!1);
@@ -5347,24 +5396,24 @@ const ImagePickerField = ({ value: o, onChange: n, id: r, onBlur: a }) => {
         const N = await l(m, S);
         v(N);
       }
-      u(!1), R(-1);
+      u(!1), C(-1);
     },
     [m],
     300
   ), k = (S) => {
     const N = ["collection", m, S.id];
-    N[1] && (r(N.join(":")), j(S.name), x(!1), v([]), R(-1));
+    N[1] && (r(N.join(":")), j(S.name), x(!1), v([]), C(-1));
   }, A = (S) => {
     switch (S.key) {
       case "ArrowDown":
-        S.preventDefault(), R((N) => N < f.length - 1 ? N + 1 : N);
+        S.preventDefault(), C((N) => N < f.length - 1 ? N + 1 : N);
         break;
       case "ArrowUp":
-        S.preventDefault(), R((N) => N > 0 ? N - 1 : N);
+        S.preventDefault(), C((N) => N > 0 ? N - 1 : N);
         break;
       case "Enter":
         if (S.preventDefault(), f.length === 0) return;
-        C >= 0 && k(f[C]);
+        R >= 0 && k(f[R]);
         break;
       case "Escape":
         S.preventDefault(), B();
@@ -5372,13 +5421,13 @@ const ImagePickerField = ({ value: o, onChange: n, id: r, onBlur: a }) => {
     }
   };
   useEffect(() => {
-    if (C >= 0 && I.current) {
-      const S = I.current.children[C];
+    if (R >= 0 && I.current) {
+      const S = I.current.children[R];
       S == null || S.scrollIntoView({ block: "nearest" });
     }
-  }, [C]);
+  }, [R]);
   const B = () => {
-    j(""), v([]), R(-1), x(!1), r("");
+    j(""), v([]), C(-1), x(!1), r("");
   }, E = (S) => {
     j(S), x(!isEmpty(S)), u(!0), T(S);
   };
@@ -5410,7 +5459,7 @@ const ImagePickerField = ({ value: o, onChange: n, id: r, onBlur: a }) => {
       "li",
       {
         onClick: () => k(S),
-        className: `cursor-pointer p-2 text-xs ${o != null && o.includes(S.id) ? "bg-blue-200" : N === C ? "bg-gray-100" : "hover:bg-gray-100"}`,
+        className: `cursor-pointer p-2 text-xs ${o != null && o.includes(S.id) ? "bg-blue-200" : N === R ? "bg-gray-100" : "hover:bg-gray-100"}`,
         children: [
           S.name,
           " ",
@@ -5602,28 +5651,28 @@ const ImagePickerField = ({ value: o, onChange: n, id: r, onBlur: a }) => {
   }), a;
 };
 function BlockSettings() {
-  const { selectedLang: o } = useLanguages(), n = useSelectedBlock(), r = useUpdateBlocksPropsRealtime(), a = useUpdateBlocksProps(), l = getBlockComponent(n == null ? void 0 : n._type), i = formDataWithSelectedLang(n, o, l), [c, d] = useState(i), u = useBuilderProp("dataBindingSupport", !1), p = ({ formData: f }, v, C) => {
+  const { selectedLang: o } = useLanguages(), n = useSelectedBlock(), r = useUpdateBlocksPropsRealtime(), a = useUpdateBlocksProps(), l = getBlockComponent(n == null ? void 0 : n._type), i = formDataWithSelectedLang(n, o, l), [c, d] = useState(i), u = useBuilderProp("dataBindingSupport", !1), p = ({ formData: f }, v, R) => {
     if (v && (c == null ? void 0 : c._id) === n._id) {
-      const R = v.replace("root.", "");
-      a([n._id], { [R]: get(f, R) }, C);
+      const C = v.replace("root.", "");
+      a([n._id], { [C]: get(f, C) }, R);
     }
   }, x = useCallback(
-    debounce(({ formData: f }, v, C) => {
-      p({ formData: f }, v, C), d(f);
+    debounce(({ formData: f }, v, R) => {
+      p({ formData: f }, v, R), d(f);
     }, 1500),
     [n == null ? void 0 : n._id, o]
   ), m = ({ formData: f }, v) => {
     if (v) {
-      const C = v.replace("root.", "");
+      const R = v.replace("root.", "");
       r(
         [n._id],
-        convertDotNotationToObject(C, get(f, C.split(".")))
-      ), x({ formData: f }, v, { [C]: get(c, C) });
+        convertDotNotationToObject(R, get(f, R.split(".")))
+      ), x({ formData: f }, v, { [R]: get(c, R) });
     }
   }, g = keys(get(i, "_bindings", {})), b = useMemo(() => {
     const f = cloneDeep(get(l, "props", {}));
-    return each(f, (v, C) => {
-      get(v, "hidden", !1) && delete f[C];
+    return each(f, (v, R) => {
+      get(v, "hidden", !1) && delete f[R];
     }), u && each(g, (v) => delete f[v]), f;
   }, [l, g, u]), j = get(l, "server", !1);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "overflow-x-hidden px-px", children: [
@@ -5714,12 +5763,12 @@ const askAiProcessingAtom = atom$1(!1), useAskAi = () => {
           try {
             const f = m === "content" ? cloneDeep(getBlockWithChildren(g, d)) : [cloneDeep(d.find((w) => w._id === g))];
             set(f, "0._parent", null);
-            const v = u === p ? "" : u, C = await l(m, promptWithLanguage(b, x, m), f, v), { blocks: R, error: I } = C;
+            const v = u === p ? "" : u, R = await l(m, promptWithLanguage(b, x, m), f, v), { blocks: C, error: I } = R;
             if (I) {
               a(I);
               return;
             }
-            m === "styles" ? c(R) : i(R), j && j(C);
+            m === "styles" ? c(C) : i(C), j && j(R);
           } catch (f) {
             a(f);
           } finally {
@@ -5891,7 +5940,7 @@ function ManualClasses() {
     return j(map(E, "item"));
   }, v = () => {
     j([]);
-  }, C = (k) => k.name, R = (k) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "rounded-md p-1", children: k.name }), I = {
+  }, R = (k) => k.name, C = (k) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "rounded-md p-1", children: k.name }), I = {
     autoComplete: "off",
     autoCorrect: "off",
     autoCapitalize: "off",
@@ -5945,8 +5994,8 @@ function ManualClasses() {
               suggestions: b,
               onSuggestionsFetchRequested: f,
               onSuggestionsClearRequested: v,
-              getSuggestionValue: C,
-              renderSuggestion: R,
+              getSuggestionValue: R,
+              renderSuggestion: C,
               inputProps: I,
               containerProps: {
                 className: "relative h-8 w-full gap-y-1 py-1 border-border"
@@ -6588,7 +6637,7 @@ const RangeChoices = ({ property: o, onChange: n }) => {
   },
   a
 )) }), THROTTLE_TIME = 50, AdvanceChoices = (o) => {
-  const [n, r] = useState(!1), [a, l] = useState(""), { currentClass: i, onChange: c, classPrefix: d, cssProperty: u, units: p, negative: x } = o, [m, g] = useState(u != null && u.toLowerCase().includes("width") ? "%" : p[0]), [b, j] = useState(!1), [f, v] = useState(""), [C, R] = useState(!1), [I, w] = useState(!1);
+  const [n, r] = useState(!1), [a, l] = useState(""), { currentClass: i, onChange: c, classPrefix: d, cssProperty: u, units: p, negative: x } = o, [m, g] = useState(u != null && u.toLowerCase().includes("width") ? "%" : p[0]), [b, j] = useState(!1), [f, v] = useState(""), [R, C] = useState(!1), [I, w] = useState(!1);
   useEffect(() => {
     const { value: E, unit: _ } = getClassValueAndUnit(i);
     if (_ === "") {
@@ -6639,7 +6688,7 @@ const RangeChoices = ({ property: o, onChange: n }) => {
       /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", className: "invisible ml-3 mt-1 text-blue-600 group-hover:visible", children: /* @__PURE__ */ jsxRuntimeExports.jsx(InfoCircledIcon, {}) }) }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: "Current value is using a Tailwind preset class." })
     ] })
-  ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `group relative flex items-center ${C ? "z-auto" : ""}`, children: [
+  ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `group relative flex items-center ${R ? "z-auto" : ""}`, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center rounded-md border border-border", children: [
       ["none", "auto"].indexOf(m) !== -1 ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(
         "input",
@@ -6669,7 +6718,7 @@ const RangeChoices = ({ property: o, onChange: n }) => {
             var _;
             (_ = E == null ? void 0 : E.target) == null || _.select(), r(!1);
           },
-          value: C ? f : a,
+          value: R ? f : a,
           className: "h-6 w-14 rounded rounded-r-none border border-transparent bg-background pl-2 text-sm focus-visible:outline-0".concat(
             " ",
             b ? "border-red-500 text-red-500" : "border-foreground/20"
@@ -6701,12 +6750,12 @@ const RangeChoices = ({ property: o, onChange: n }) => {
         ) }) })
       ] })
     ] }),
-    ["none", "auto"].indexOf(m) !== -1 || C ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(
+    ["none", "auto"].indexOf(m) !== -1 || R ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(
       DragStyleButton,
       {
-        onDragStart: () => R(!0),
+        onDragStart: () => C(!0),
         onDragEnd: (E) => {
-          if (v(() => ""), R(!1), isEmpty(E))
+          if (v(() => ""), C(!1), isEmpty(E))
             return;
           const _ = `${E}`, N = `${_.startsWith("-") ? "-" : ""}${d}[${_.replace("-", "")}${m === "-" ? "" : m}]`;
           T(N);
@@ -6821,12 +6870,12 @@ const RangeChoices = ({ property: o, onChange: n }) => {
       g(j, [E], A);
     },
     [j, u, x, p, l, g]
-  ), C = useCallback(() => {
+  ), R = useCallback(() => {
     b(j, [f]);
-  }, [j, f, b]), R = useMemo(() => canChangeClass(m, x), [m, x]);
+  }, [j, f, b]), C = useMemo(() => canChangeClass(m, x), [m, x]);
   useEffect(() => {
-    i(R, m);
-  }, [R, i, m]);
+    i(C, m);
+  }, [C, i, m]);
   const [, , I] = useCanvasWidth(), w = useCallback(
     (k) => {
       I({
@@ -6840,7 +6889,7 @@ const RangeChoices = ({ property: o, onChange: n }) => {
     },
     [I]
   ), T = get(m, "dark", null) === u && get(m, "mod", null) === p && get(m, "mq", null) === x;
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(BlockStyleProvider, { canChange: R, canReset: m && T, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "group flex flex-row items-center py-2 first:pt-0 last:pb-0", children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(BlockStyleProvider, { canChange: C, canReset: m && T, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "group flex flex-row items-center py-2 first:pt-0 last:pb-0", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "relative w-[70px] truncate text-xs text-foreground", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `text-[11px] ${m && !T ? "text-foreground" : ""}`, children: n(a) }) }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-row items-center", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "w-[150px]", children: [
@@ -6860,7 +6909,7 @@ const RangeChoices = ({ property: o, onChange: n }) => {
         r === "color" && /* @__PURE__ */ jsxRuntimeExports.jsx(ColorChoice, { property: l, onChange: v }),
         r === "dropdown" && /* @__PURE__ */ jsxRuntimeExports.jsx(DropDownChoices, { label: a, property: l, onChange: v })
       ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `w-[30px] cursor-pointer ${f ? "visible" : "invisible"}`, children: T ? /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", onClick: () => C(), title: "Reset", className: "flex px-1.5 text-xs", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CrossCircledIcon, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : R && m ? /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { delayDuration: 100, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `w-[30px] cursor-pointer ${f ? "visible" : "invisible"}`, children: T ? /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", onClick: () => R(), title: "Reset", className: "flex px-1.5 text-xs", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CrossCircledIcon, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : C && m ? /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { delayDuration: 100, children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           "button",
           {
@@ -7153,17 +7202,17 @@ const BlockCard = ({
     [o]
   ), j = async (f) => {
     const v = await i(n, o);
-    let C = r;
-    if (g(first(v)) && (C = null), !isEmpty(v)) {
-      const R = { blocks: v, uiLibrary: !0, parent: C };
-      if (f.dataTransfer.setData("text/plain", JSON.stringify(R)), o.preview) {
+    let R = r;
+    if (g(first(v)) && (R = null), !isEmpty(v)) {
+      const C = { blocks: v, uiLibrary: !0, parent: R };
+      if (f.dataTransfer.setData("text/plain", JSON.stringify(C)), o.preview) {
         const I = new Image();
         I.src = o.preview, I.onload = () => {
           f.dataTransfer.setDragImage(I, 0, 0);
         };
       } else
         f.dataTransfer.setDragImage(new Image(), 0, 0);
-      m(R), emitChaiBuilderMsg({ name: CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK }), setTimeout(() => {
+      m(C), emitChaiBuilderMsg({ name: CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK }), setTimeout(() => {
         u([]), p();
       }, 200);
     }
@@ -7203,9 +7252,9 @@ const BlockCard = ({
     })();
   }, [o, l, i, c]), { data: l || [], isLoading: i === "loading" };
 }, UILibrarySection = ({ parentId: o }) => {
-  const [n, r] = useAtom$1(selectedLibraryAtom), a = useBuilderProp("uiLibraries", []), l = useChaiBlocks(), i = values(l).filter((R) => R.category === "custom"), c = a.find((R) => R.uuid === n) || first(a), { data: d, isLoading: u } = useLibraryBlocks(c), p = groupBy([...d, ...i], "group"), [x, m] = useState("Hero"), g = get(p, x, []), b = useRef(null), { t: j } = useTranslation(), f = (R) => {
+  const [n, r] = useAtom$1(selectedLibraryAtom), a = useBuilderProp("uiLibraries", []), l = useChaiBlocks(), i = values(l).filter((C) => C.category === "custom"), c = a.find((C) => C.uuid === n) || first(a), { data: d, isLoading: u } = useLibraryBlocks(c), p = groupBy([...d, ...i], "group"), [x, m] = useState("Hero"), g = get(p, x, []), b = useRef(null), { t: j } = useTranslation(), f = (C) => {
     b.current && (clearTimeout(b.current), b.current = null), b.current = setTimeout(() => {
-      b.current && m(R);
+      b.current && m(C);
     }, 300);
   };
   if (u)
@@ -7213,7 +7262,7 @@ const BlockCard = ({
       /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "col-span-3 h-full" }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "col-span-9 h-full" })
     ] });
-  const v = filter(g, (R, I) => I % 2 === 0), C = filter(g, (R, I) => I % 2 === 1);
+  const v = filter(g, (C, I) => I % 2 === 0), R = filter(g, (C, I) => I % 2 === 1);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "relative mt-2 flex h-full max-h-full overflow-hidden bg-background", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex h-full pt-2", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex h-full max-h-full w-60 flex-col gap-1 px-1 pr-2", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(UILibrariesSelect, { library: c == null ? void 0 : c.uuid, setLibrary: r, uiLibraries: a }),
@@ -7221,7 +7270,7 @@ const BlockCard = ({
         /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs font-bold text-gray-500", children: j("Groups") }),
         /* @__PURE__ */ jsxRuntimeExports.jsx("hr", { className: "mt-1 border-border" }),
         /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "no-scrollbar mt-2 h-full max-h-full flex-1 overflow-y-auto pb-20", children: React__default.Children.toArray(
-          map(p, (R, I) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          map(p, (C, I) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
             "div",
             {
               onMouseEnter: () => f(I),
@@ -7249,10 +7298,10 @@ const BlockCard = ({
         children: [
           /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-2 gap-2 px-2", children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col gap-1", children: React__default.Children.toArray(
-              v.map((R) => /* @__PURE__ */ jsxRuntimeExports.jsx(BlockCard, { parentId: o, block: R, library: c }))
+              v.map((C) => /* @__PURE__ */ jsxRuntimeExports.jsx(BlockCard, { parentId: o, block: C, library: c }))
             ) }),
             /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col gap-1", children: React__default.Children.toArray(
-              C.map((R) => /* @__PURE__ */ jsxRuntimeExports.jsx(BlockCard, { parentId: o, block: R, library: c }))
+              R.map((C) => /* @__PURE__ */ jsxRuntimeExports.jsx(BlockCard, { parentId: o, block: C, library: c }))
             ) })
           ] }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
@@ -8372,9 +8421,9 @@ const AIUserPrompt = ({ blockId: o }) => {
   }, v = (w) => {
     const T = a.filter((k, A) => A !== w);
     r(T), l(T);
-  }, C = (w) => {
+  }, R = (w) => {
     x(w), c(a[w].key), u(a[w].value);
-  }, R = () => {
+  }, C = () => {
     if (i.startsWith("@")) {
       g("Attribute keys cannot start with '@'");
       return;
@@ -8384,14 +8433,14 @@ const AIUserPrompt = ({ blockId: o }) => {
       w[p] = { key: i, value: d }, r(w), l(w), x(null), c(""), u(""), g("");
     }
   }, I = (w) => {
-    w.key === "Enter" && !w.shiftKey && (w.preventDefault(), p !== null ? R() : f());
+    w.key === "Enter" && !w.shiftKey && (w.preventDefault(), p !== null ? C() : f());
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "max-w-full", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "form",
       {
         onSubmit: (w) => {
-          w.preventDefault(), p !== null ? R() : f();
+          w.preventDefault(), p !== null ? C() : f();
         },
         className: "space-y-3",
         children: [
@@ -8444,7 +8493,7 @@ const AIUserPrompt = ({ blockId: o }) => {
         /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-wrap max-w-[200px] text-muted-foreground", children: w.value.toString() })
       ] }),
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-shrink-0", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => C(T), children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => R(T), children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(Edit2, { className: "h-3 w-3" }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sr-only", children: "Edit attribute" })
         ] }),
@@ -8880,9 +8929,9 @@ const PageDataProviders = () => {
     (f) => !isNull(f)
   ), g = (f) => {
     const v = find(n, { providerKey: f });
-    c((C) => [...C, v]), a((C) => [...C, { providerKey: v.providerKey, args: {} }]), u(""), l("UNSAVED");
+    c((R) => [...R, v]), a((R) => [...R, { providerKey: v.providerKey, args: {} }]), u(""), l("UNSAVED");
   }, b = (f) => {
-    c((v) => filter(v, (C) => C.providerKey !== f.providerKey)), a((v) => filter(v, (C) => C.providerKey !== f.providerKey)), l("UNSAVED");
+    c((v) => filter(v, (R) => R.providerKey !== f.providerKey)), a((v) => filter(v, (R) => R.providerKey !== f.providerKey)), l("UNSAVED");
   }, j = (f) => x(f);
   return isEmpty(n) ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "mb-1.5 p-4 text-xs text-gray-500", children: [
     o("You have no data providers registered. Please add a data provider to your project."),
@@ -8979,7 +9028,7 @@ const PageDataProviders = () => {
 function AiFillDatabase(o) {
   return GenIcon({ tag: "svg", attr: { viewBox: "0 0 1024 1024" }, child: [{ tag: "path", attr: { d: "M832 64H192c-17.7 0-32 14.3-32 32v224h704V96c0-17.7-14.3-32-32-32zM288 232c-22.1 0-40-17.9-40-40s17.9-40 40-40 40 17.9 40 40-17.9 40-40 40zM160 928c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V704H160v224zm128-136c22.1 0 40 17.9 40 40s-17.9 40-40 40-40-17.9-40-40 17.9-40 40-40zM160 640h704V384H160v256zm128-168c22.1 0 40 17.9 40 40s-17.9 40-40 40-40-17.9-40-40 17.9-40 40-40z" }, child: [] }] })(o);
 }
-const TopBar = lazy(() => import("./Topbar-B6Gzawa-.js"));
+const TopBar = lazy(() => import("./Topbar-9jcE7VnL.js"));
 function useSidebarMenuItems(o) {
   const n = o === "SINGLE_SIDE_PANEL", { t: r } = useTranslation(), a = useBuilderProp("dataBindingSupport", !1), l = useBuilderProp("askAiCallBack", null);
   return useMemo(() => {