@chaibuilder/sdk 1.2.116 → 1.3.0-beta.1

package/dist/{index-Bn53BEJy.js → index-muPhPsCS.js}

@@ -149,16 +149,16 @@ const hasInitialValue = (o) => "init" in o, isActuallyWritableAtom = (o) => !!o.
       }), c(k, S, A);
     }
     return c(k, B, A);
-  }, u = (k, B, A) => {
+  }, p = (k, B, A) => {
     const E = a(k), _ = {
       d: (E == null ? void 0 : E.d) || /* @__PURE__ */ new Map(),
       e: B
     };
     return A && i(k, _, A), E && isEqualAtomError(E, _) && E.d === _.d ? E : (l(k, _), _);
-  }, p = (k) => {
+  }, u = (k) => {
     const B = a(k);
     if (B && (B.d.forEach((D, M) => {
-      M !== k && !n.has(M) && p(M);
+      M !== k && !n.has(M) && u(M);
     }), Array.from(B.d).every(([D, M]) => {
       const P = a(D);
       return D === k || P === M || // TODO This is a hack, we should find a better solution.
@@ -176,7 +176,7 @@ const hasInitialValue = (o) => "init" in o, isActuallyWritableAtom = (o) => !!o.
           return A.set(D, void 0), D.init;
         throw new Error("no atom init");
       }
-      const M = p(D);
+      const M = u(D);
       return A.set(D, M), returnAtomValue(M);
     };
     let S, N;
@@ -200,11 +200,11 @@ const hasInitialValue = (o) => "init" in o, isActuallyWritableAtom = (o) => !!o.
         () => S == null ? void 0 : S.abort()
       );
     } catch (D) {
-      return u(k, D, A);
+      return p(k, D, A);
     } finally {
       E = !1;
     }
-  }, x = (k) => returnAtomValue(p(k)), m = (k) => {
+  }, x = (k) => returnAtomValue(u(k)), m = (k) => {
     let B = n.get(k);
     return B || (B = C(k)), B;
   }, g = (k, B) => !B.l.size && (!B.t.size || B.t.size === 1 && B.t.has(k)), b = (k) => {
@@ -230,7 +230,7 @@ const hasInitialValue = (o) => "init" in o, isActuallyWritableAtom = (o) => !!o.
           if (M && A.set(L, --M), !M) {
             let P = !!((D = B.get(L)) != null && D.size);
             if (P) {
-              const $ = a(L), H = p(L);
+              const $ = a(L), H = u(L);
               P = !$ || !isEqualAtomValue($, H);
             }
             P || B.forEach(($) => $.delete(L));
@@ -242,7 +242,7 @@ const hasInitialValue = (o) => "init" in o, isActuallyWritableAtom = (o) => !!o.
     _(k);
   }, f = (k, ...B) => {
     let A = !0;
-    const E = (N) => returnAtomValue(p(N)), _ = (N, ...L) => {
+    const E = (N) => returnAtomValue(u(N)), _ = (N, ...L) => {
       let D;
       if (N === k) {
         if (!hasInitialValue(N))
@@ -262,10 +262,10 @@ const hasInitialValue = (o) => "init" in o, isActuallyWritableAtom = (o) => !!o.
       t: new Set(B && [B]),
       l: /* @__PURE__ */ new Set()
     };
-    if (n.set(k, A), p(k).d.forEach((E, _) => {
+    if (n.set(k, A), u(k).d.forEach((E, _) => {
       const S = n.get(_);
       S ? S.t.add(k) : _ !== k && C(_, k);
-    }), p(k), isActuallyWritableAtom(k) && k.onMount) {
+    }), u(k), isActuallyWritableAtom(k) && k.onMount) {
       const E = k.onMount((..._) => v(k, ..._));
       E && (A.u = E);
     }
@@ -331,14 +331,14 @@ function splitAtom(o, n) {
   return memo2$1(
     () => {
       const r = /* @__PURE__ */ new WeakMap(), a = (c, d) => {
-        let u = r.get(c);
-        if (u)
-          return u;
-        const p = d && r.get(d), x = [], m = [];
+        let p = r.get(c);
+        if (p)
+          return p;
+        const u = d && r.get(d), x = [], m = [];
         return c.forEach((g, b) => {
           const j = b;
           m[b] = j;
-          const f = p && p.atomList[p.keyList.indexOf(j)];
+          const f = u && u.atomList[u.keyList.indexOf(j)];
           if (f) {
             x[b] = f;
             return;
@@ -364,53 +364,53 @@ function splitAtom(o, n) {
             ]);
           };
           x[b] = isWritable(o) ? atom(v, C) : 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;
+        }), u && u.keyList.length === m.length && u.keyList.every((g, b) => g === m[b]) ? p = u : p = { arr: c, atomList: x, keyList: m }, r.set(c, p), p;
       }, l = atom((c) => {
-        const d = c(l), u = c(o);
-        return a(u, d == null ? void 0 : d.arr);
+        const d = c(l), p = c(o);
+        return a(p, d == null ? void 0 : d.arr);
       });
       l.init = void 0;
       const i = isWritable(o) ? atom(
         (c) => c(l).atomList,
-        (c, d, u) => {
-          switch (u.type) {
+        (c, d, p) => {
+          switch (p.type) {
             case "remove": {
-              const p = c(i).indexOf(u.atom);
-              if (p >= 0) {
+              const u = c(i).indexOf(p.atom);
+              if (u >= 0) {
                 const x = c(o);
                 d(o, [
-                  ...x.slice(0, p),
-                  ...x.slice(p + 1)
+                  ...x.slice(0, u),
+                  ...x.slice(u + 1)
                 ]);
               }
               break;
             }
             case "insert": {
-              const p = u.before ? c(i).indexOf(u.before) : c(i).length;
-              if (p >= 0) {
+              const u = p.before ? c(i).indexOf(p.before) : c(i).length;
+              if (u >= 0) {
                 const x = c(o);
                 d(o, [
-                  ...x.slice(0, p),
-                  u.value,
-                  ...x.slice(p)
+                  ...x.slice(0, u),
+                  p.value,
+                  ...x.slice(u)
                 ]);
               }
               break;
             }
             case "move": {
-              const p = c(i).indexOf(u.atom), x = u.before ? c(i).indexOf(u.before) : c(i).length;
-              if (p >= 0 && x >= 0) {
+              const u = c(i).indexOf(p.atom), x = p.before ? c(i).indexOf(p.before) : c(i).length;
+              if (u >= 0 && x >= 0) {
                 const m = c(o);
-                p < x ? d(o, [
-                  ...m.slice(0, p),
-                  ...m.slice(p + 1, x),
-                  m[p],
+                u < x ? d(o, [
+                  ...m.slice(0, u),
+                  ...m.slice(u + 1, x),
+                  m[u],
                   ...m.slice(x)
                 ]) : d(o, [
                   ...m.slice(0, x),
-                  m[p],
-                  ...m.slice(x, p),
-                  ...m.slice(p + 1)
+                  m[u],
+                  ...m.slice(x, u),
+                  ...m.slice(u + 1)
                 ]);
               }
               break;
@@ -430,7 +430,7 @@ function createJSONStorage(o) {
   const a = {
     getItem: (l, i) => {
       var c, d;
-      const u = (x) => {
+      const p = (x) => {
         if (x = x || "", n !== x) {
           try {
             r = JSON.parse(x);
@@ -440,8 +440,8 @@ function createJSONStorage(o) {
           n = x;
         }
         return r;
-      }, p = (d = (c = o()) == null ? void 0 : c.getItem(l)) != null ? d : null;
-      return isPromiseLike$1(p) ? p.then(u) : u(p);
+      }, u = (d = (c = o()) == null ? void 0 : c.getItem(l)) != null ? d : null;
+      return isPromiseLike$1(u) ? u.then(p) : p(u);
     },
     setItem: (l, i) => {
       var c;
@@ -456,15 +456,15 @@ function createJSONStorage(o) {
     if (!(o() instanceof window.Storage))
       return () => {
       };
-    const d = (u) => {
-      if (u.storageArea === o() && u.key === l) {
-        let p;
+    const d = (p) => {
+      if (p.storageArea === o() && p.key === l) {
+        let u;
         try {
-          p = JSON.parse(u.newValue || "");
+          u = JSON.parse(p.newValue || "");
         } catch {
-          p = c;
+          u = c;
         }
-        i(p);
+        i(u);
       }
     };
     return window.addEventListener("storage", d), () => {
@@ -485,9 +485,9 @@ function atomWithStorage(o, n, r = defaultStorage, a) {
     return r.subscribe && (d = r.subscribe(o, c, n)), d;
   }, atom(
     (c) => c(l),
-    (c, d, u) => {
-      const p = typeof u == "function" ? u(c(l)) : u;
-      return p === RESET ? (d(l, n), r.removeItem(o)) : p instanceof Promise ? p.then((x) => (d(l, x), r.setItem(o, x))) : (d(l, p), r.setItem(o, p));
+    (c, d, p) => {
+      const u = typeof p == "function" ? p(c(l)) : p;
+      return u === RESET ? (d(l, n), r.removeItem(o)) : u instanceof Promise ? u.then((x) => (d(l, x), r.setItem(o, x))) : (d(l, u), r.setItem(o, u));
     }
   );
 }
@@ -507,19 +507,19 @@ const StoreContext = createContext(void 0), useStore = (o) => useContext(StoreCo
 });
 function useAtomValue(o, n) {
   const r = useStore(), [[a, l, i], c] = useReducer(
-    (p) => {
+    (u) => {
       const x = r.get(o);
-      return Object.is(p[0], x) && p[1] === r && p[2] === o ? p : [x, r, o];
+      return Object.is(u[0], x) && u[1] === r && u[2] === o ? u : [x, r, o];
     },
     void 0,
     () => [r.get(o), r, o]
   );
   let d = a;
   return (l !== r || i !== o) && (c(), d = r.get(o)), useEffect(() => {
-    const p = r.sub(o, () => {
+    const u = r.sub(o, () => {
       c();
     });
-    return c(), p;
+    return c(), u;
   }, [r, o, void 0]), useDebugValue(d), isPromiseLike(d) ? use(d) : d;
 }
 function useSetAtom(o, n) {
@@ -581,10 +581,10 @@ const getSlots = (o) => {
   filter(o, { _parent: n }).length > 0 && l.push(flatten(duplicateBlocks(o, n, a._id)));
   const i = flatten(l);
   return map(i, (c) => {
-    const d = c, u = getSlots(d);
-    return Object.keys(u).length > 0 && Object.keys(u).forEach((p) => {
-      const x = find(i, { oldId: u[p].replace("slot:", "") });
-      d[p] = `slot:${x._id}`;
+    const d = c, p = getSlots(d);
+    return Object.keys(p).length > 0 && Object.keys(p).forEach((u) => {
+      const x = find(i, { oldId: p[u].replace("slot:", "") });
+      d[u] = `slot:${x._id}`;
     }), omit(d, ["global", "oldId"]);
   });
 }, presentBlocksAtom = atom$1([]);
@@ -687,8 +687,8 @@ const useSelectedBlocksDisplayChild = () => ({
 }, getBlockJSONFromSchemas = (o, n, r) => {
   switch (o.type) {
     case "singular": {
-      const p = o.schema;
-      return p.title && (p.title = titleWithLang(n(p.title), r, get(o, "i18n"))), p.oneOf && Array.isArray(p.oneOf) && (p.oneOf = p.oneOf.map((x) => (x.title && (x.title = n(x.title)), x))), p;
+      const u = o.schema;
+      return u.title && (u.title = titleWithLang(n(u.title), r, get(o, "i18n"))), u.oneOf && Array.isArray(u.oneOf) && (u.oneOf = u.oneOf.map((x) => (x.title && (x.title = n(x.title)), x))), u;
     }
     case "model":
       const { properties: a, title: l } = o, i = {
@@ -696,14 +696,14 @@ const useSelectedBlocksDisplayChild = () => ({
         type: "object",
         properties: {}
       };
-      return Object.keys(a).forEach((p) => {
-        const x = a[p];
+      return Object.keys(a).forEach((u) => {
+        const x = a[u];
         if (includes(["slot", "styles"], x.type)) return;
-        const m = p;
+        const m = u;
         i.properties[m] = getBlockJSONFromSchemas(x, n, r);
       }), i;
     case "list":
-      const { itemProperties: c, title: d } = o, u = {
+      const { itemProperties: c, title: d } = o, p = {
         title: titleWithLang(n(d), r, get(o, "i18n")),
         type: "array",
         items: {
@@ -711,16 +711,16 @@ const useSelectedBlocksDisplayChild = () => ({
           properties: {}
         }
       };
-      return Object.keys(c).forEach((p) => {
-        const x = c[p];
+      return Object.keys(c).forEach((u) => {
+        const x = c[u];
         if (includes(["slot", "styles"], x.type)) return;
-        const m = p;
-        u.items.properties[m] = getBlockJSONFromSchemas(x, n, r), set(
-          u.items,
+        const m = u;
+        p.items.properties[m] = getBlockJSONFromSchemas(x, n, r), set(
+          p.items,
           "title",
           titleWithLang(get(x, "itemTitle", `${n(d)} item`), r, get(x, "i18n"))
         );
-      }), u;
+      }), p;
     default:
       return {};
   }
@@ -771,8 +771,8 @@ var undomanager = { exports: {} };
     }
     let r = function() {
       let a = [], l = -1, i = 0, c = !1, d;
-      function u(p, x) {
-        return !p || typeof p[x] != "function" ? this : (c = !0, p[x](), c = !1, this);
+      function p(u, x) {
+        return !u || typeof u[x] != "function" ? this : (c = !0, u[x](), c = !1, this);
       }
       return {
         /**
@@ -782,25 +782,25 @@ var undomanager = { exports: {} };
          * @property {function} command.redo    - Redo function
          * @property {string} [command.groupId] - Optional group id
          */
-        add: function(p) {
-          return c ? this : (a.splice(l + 1, a.length - l), a.push(p), i && a.length > i && n(a, 0, -(i + 1)), l = a.length - 1, d && d(), this);
+        add: function(u) {
+          return c ? this : (a.splice(l + 1, a.length - l), a.push(u), i && a.length > i && n(a, 0, -(i + 1)), l = a.length - 1, d && d(), this);
         },
         /**
          * Pass a function to be called on undo and redo actions.
          * @property {function} callbackFunc - Callback function
          */
-        setCallback: function(p) {
-          d = p;
+        setCallback: function(u) {
+          d = u;
         },
         /**
          * Performs undo: call the undo function at the current index and decrease the index by 1.
          */
         undo: function() {
-          let p = a[l];
-          if (!p)
+          let u = a[l];
+          if (!u)
             return this;
-          const x = p.groupId;
-          for (; p.groupId === x && (u(p, "undo"), l -= 1, p = a[l], !(!p || !p.groupId)); )
+          const x = u.groupId;
+          for (; u.groupId === x && (p(u, "undo"), l -= 1, u = a[l], !(!u || !u.groupId)); )
             ;
           return d && d(), this;
         },
@@ -808,11 +808,11 @@ var undomanager = { exports: {} };
          * Performs redo: call the redo function at the next index and increase the index by 1.
          */
         redo: function() {
-          let p = a[l + 1];
-          if (!p)
+          let u = a[l + 1];
+          if (!u)
             return this;
-          const x = p.groupId;
-          for (; p.groupId === x && (u(p, "redo"), l += 1, p = a[l + 1], !(!p || !p.groupId)); )
+          const x = u.groupId;
+          for (; u.groupId === x && (p(u, "redo"), l += 1, u = a[l + 1], !(!u || !u.groupId)); )
             ;
           return d && d(), this;
         },
@@ -820,8 +820,8 @@ var undomanager = { exports: {} };
          * Clears the memory, losing all stored states. Resets the index.
          */
         clear: function() {
-          let p = a.length;
-          a = [], l = -1, d && p > 0 && d();
+          let u = a.length;
+          a = [], l = -1, d && u > 0 && d();
         },
         /**
          * Tests if any undo actions exist.
@@ -842,8 +842,8 @@ var undomanager = { exports: {} };
          * @param {string} [groupId] - Optionally filter commands by group ID
          * @returns {array}
          */
-        getCommands: function(p) {
-          return p ? a.filter((x) => x.groupId === p) : a;
+        getCommands: function(u) {
+          return u ? a.filter((x) => x.groupId === u) : a;
         },
         /**
          * Returns the index of the actions list.
@@ -856,8 +856,8 @@ var undomanager = { exports: {} };
          * Sets the maximum number of undo steps. Default: 0 (unlimited).
          * @property {number} max - Maximum number of undo steps
          */
-        setLimit: function(p) {
-          i = p;
+        setLimit: function(u) {
+          i = u;
         }
       };
     };
@@ -1000,15 +1000,15 @@ dataProvidersAtom.debugLabel = "dataProvidersAtom";
 const usePageDataProviders = () => useAtom$1(dataProvidersAtom), builderSaveStateAtom = atom$1("SAVED");
 builderSaveStateAtom.debugLabel = "builderSaveStateAtom";
 const useSavePage = () => {
-  const [o, n] = useAtom$1(builderSaveStateAtom), r = useBuilderProp("onSave", async (u) => {
+  const [o, n] = useAtom$1(builderSaveStateAtom), r = useBuilderProp("onSave", async (p) => {
   }), a = useBuilderProp("onSaveStateChange", noop), l = useGetPageData(), [i] = usePageDataProviders(), [c] = useBrandingOptions();
   return { savePage: useThrottledCallback(
-    async (u = !1) => {
+    async (p = !1) => {
       n("SAVING"), a("SAVING");
-      const p = l();
+      const u = l();
       return await r({
-        autoSave: u,
-        blocks: p.blocks,
+        autoSave: p,
+        blocks: u.blocks,
         providers: i,
         brandingOptions: c,
         themeConfiguration: c
@@ -1055,13 +1055,13 @@ function insertBlocksAtPosition(o, n, r, a) {
   r && (l = o.filter((d) => d._parent === r));
   const i = a !== void 0 ? a : l.length;
   let c = o.length;
-  for (let d = 0, u = 0; d < o.length; d++)
+  for (let d = 0, p = 0; d < o.length; d++)
     if (o[d]._parent === r) {
-      if (u === i) {
+      if (p === i) {
         c = d;
         break;
       }
-      u++;
+      p++;
     }
   return !r && a !== void 0 && a >= l.length && (c = o.length), [...o.slice(0, c), ...n, ...o.slice(c)];
 }
@@ -1073,15 +1073,15 @@ function findNodeById(o, n) {
   return o.first((r) => r.model._id === n) || null;
 }
 function moveNode(o, n, r, a) {
-  var p, x;
+  var u, x;
   const l = findNodeById(o, n), i = findNodeById(o, r);
   if (!l || !i) return !1;
   i.children || (i.model.children = []);
-  let c = (p = i == null ? void 0 : i.children) == null ? void 0 : p.findIndex((m) => m.model._id === n);
+  let c = (u = i == null ? void 0 : i.children) == null ? void 0 : u.findIndex((m) => m.model._id === n);
   l.drop(), c = Math.max(c, 0);
-  const u = (((x = l == null ? void 0 : l.model) == null ? void 0 : x._parent) || "root") === r && c <= a ? a - 1 : a;
+  const p = (((x = l == null ? void 0 : l.model) == null ? void 0 : x._parent) || "root") === r && c <= a ? a - 1 : a;
   try {
-    i.addChildAtIndex(l, u);
+    i.addChildAtIndex(l, p);
   } catch {
     return !1;
   }
@@ -1092,7 +1092,7 @@ function moveBlocksWithChildren(o, n, r, a) {
   r = r || "root";
   const i = new TreeModel().parse({ _id: "root", children: getBlocksTree(o) });
   if (moveNode(i, n, r, a)) {
-    const c = flattenTree(i), d = c.find((u) => u._id === n);
+    const c = flattenTree(i), d = c.find((p) => p._id === n);
     return d && (d._parent = r === "root" ? null : r), c.shift(), c;
   }
   return o;
@@ -1212,9 +1212,9 @@ const useBlocksStoreManager = () => {
         for (let v = 0; v < f.length; v++)
           f[v]._parent = i[b]._id;
       }
-      const u = first(i);
-      let p, x;
-      return c && (p = find(o, { _id: c }), i[0]._parent = c, x = c), !(p ? canAcceptChildBlock(p == null ? void 0 : p._type, u._type) : !0) && p && (i[0]._parent = p._parent, x = p._parent), r(i, x, d), n([(g = first(i)) == null ? void 0 : g._id]), first(i);
+      const p = first(i);
+      let u, x;
+      return c && (u = find(o, { _id: c }), i[0]._parent = c, x = c), !(u ? canAcceptChildBlock(u == null ? void 0 : u._type, p._type) : !0) && u && (i[0]._parent = u._parent, x = u._parent), r(i, x, d), n([(g = first(i)) == null ? void 0 : g._id]), first(i);
     },
     [o, n]
   );
@@ -1224,14 +1224,14 @@ const useBlocksStoreManager = () => {
         const v = i.blocks;
         return a(v, c, d);
       }
-      const u = generateUUID(), p = getBlockDefaultProps(i.props), x = [];
-      forIn(p, (v, C) => {
+      const p = generateUUID(), u = getBlockDefaultProps(i.props), x = [];
+      forIn(u, (v, C) => {
         if (startsWith(v, SLOT_KEY)) {
           const w = v.replace(SLOT_KEY, "");
           x.push({
             _id: w,
             _type: "Slot",
-            _parent: u,
+            _parent: p,
             _name: i.props[C].name,
             _styles: i.props[C].styles,
             _emptyStyles: i.props[C].emptyStyles
@@ -1240,8 +1240,8 @@ const useBlocksStoreManager = () => {
       });
       const m = {
         _type: i.type,
-        _id: u,
-        ...p
+        _id: p,
+        ...u
       };
       let g, b;
       c && (g = find(o, { _id: c }), m._parent = c, b = c), !canAcceptChildBlock(g == null ? void 0 : g._type, m._type) && g && (m._parent = g._parent, b = g._parent);
@@ -2344,15 +2344,15 @@ function getNewClasses(o = "", n = "", r = []) {
   o = o.trim().replace(/  +/g, "");
   let a = filter(
     map(o.split(" "), constructClassObject),
-    (p) => !isNull(p)
-  ), l = filter(map(n.split(" "), constructClassObject), (p) => !isNull(p));
+    (u) => !isNull(u)
+  ), l = filter(map(n.split(" "), constructClassObject), (u) => !isNull(u));
   l = filter(
     l,
-    (p) => !includes(IGNORED_BASES_CLASSES_PROPERTIES, p.property)
+    (u) => !includes(IGNORED_BASES_CLASSES_PROPERTIES, u.property)
   );
   const i = [], c = [];
-  each(r, (p) => {
-    const x = constructClassObject(p), m = find(a, pick(x, ["dark", "mq", "mod", "property"]));
+  each(r, (u) => {
+    const x = constructClassObject(u), m = find(a, pick(x, ["dark", "mq", "mod", "property"]));
     if (m && (a = filter(
       a,
       (g) => g.fullCls !== (m == null ? void 0 : m.fullCls)
@@ -2369,11 +2369,11 @@ function getNewClasses(o = "", n = "", r = []) {
     }
   });
   const d = map(
-    sortBy([...a, ...i], (p) => MEDIA_QUERIES[p.mq]),
+    sortBy([...a, ...i], (u) => MEDIA_QUERIES[u.mq]),
     "fullCls"
   ).join(" ");
   return `${map(
-    sortBy([...l, ...c], (p) => MEDIA_QUERIES[p.mq]),
+    sortBy([...l, ...c], (u) => MEDIA_QUERIES[u.mq]),
     "fullCls"
   ).join(" ").trim()},${d.trim()}`.trim().replace(/  +/g, "");
 }
@@ -2391,10 +2391,10 @@ const useSelectedStylingBlocks = () => useAtom$1(selectedStylingBlocksAtom), get
     )
   ), i = first(o(selectedStylingBlocksAtom));
   return map(l, (c) => {
-    const d = o(c), u = get(d, i.prop, `${STYLES_KEY},`), { baseClasses: p, classes: x } = getSplitClasses$1(u);
+    const d = o(c), p = get(d, i.prop, `${STYLES_KEY},`), { baseClasses: u, classes: x } = getSplitClasses$1(p);
     return {
       ids: [d._id],
-      props: { [i.prop]: `${STYLES_KEY}${getNewClasses(x, p, a)}` }
+      props: { [i.prop]: `${STYLES_KEY}${getNewClasses(x, u, a)}` }
     };
   });
 }), useAddClassesToBlocks = () => {
@@ -2482,7 +2482,7 @@ const useSelectedStylingBlocks = () => useAtom$1(selectedStylingBlocksAtom), get
         const c = o.filter((d) => !d._parent);
         n(r, null, (c == null ? void 0 : c.length) || 0);
       } else {
-        const c = o.find((u) => u._id === a), d = c ? (i = c == null ? void 0 : c.children) == null ? void 0 : i.length : 0;
+        const c = o.find((p) => p._id === a), d = c ? (i = c == null ? void 0 : c.children) == null ? void 0 : i.length : 0;
         n(r, l, d);
       }
     },
@@ -2497,8 +2497,8 @@ const useSelectedStylingBlocks = () => useAtom$1(selectedStylingBlocksAtom), get
     ),
     pasteBlocks: useCallback(
       (d) => {
-        const u = Array.isArray(d) ? d[0] : d;
-        isEmpty(o) ? l(n, d) : a(o, u), r([]);
+        const p = Array.isArray(d) ? d[0] : d;
+        isEmpty(o) ? l(n, d) : a(o, p), r([]);
       },
       [n, o, a, l, r]
     )
@@ -2518,20 +2518,20 @@ const useSelectedStylingBlocks = () => useAtom$1(selectedStylingBlocksAtom), get
     )
   );
   return map(i, (c) => {
-    const d = o(c), u = a;
-    let { classes: p, baseClasses: x } = getSplitClasses(get(d, l.prop, "styles:,"));
-    return each(u, (m) => {
+    const d = o(c), p = a;
+    let { classes: u, baseClasses: x } = getSplitClasses(get(d, l.prop, "styles:,"));
+    return each(p, (m) => {
       const g = m.replace(/[\[\]\/\\{}()*+?.^$|]/g, "\\$&"), b = new RegExp(`(^| )${g}($| )`, "g");
-      p = p.replace(b, " ").replace(/  +/g, " ").trim();
+      u = u.replace(b, " ").replace(/  +/g, " ").trim();
       const j = first(m.split(":"));
-      includes(["2xl", "xl", "lg", "md", "sm"], j) && u.push(m.split(":").pop().trim());
-    }), each(u, (m) => {
+      includes(["2xl", "xl", "lg", "md", "sm"], j) && p.push(m.split(":").pop().trim());
+    }), each(p, (m) => {
       const g = new RegExp(`(^| )${m.replace("[", "\\[").replace("]", "\\]")}($| )`, "g");
       x = x.replace(g, " ").replace(/  +/g, " ").trim();
     }), {
       ids: [d._id],
       props: {
-        [l.prop]: `${STYLES_KEY}${x},${p}`
+        [l.prop]: `${STYLES_KEY}${x},${u}`
       }
     };
   });
@@ -2627,10 +2627,10 @@ const useLanguages = () => {
         const c = r[i];
         if (isString$1(c)) {
           const d = chunk(c.split(""), 12);
-          let u = "";
+          let p = "";
           o([n], { [i]: "" });
-          for (let p = 0; p < d.length; p++)
-            u += d[p].join(""), o([n], { [i]: u }), await new Promise((x) => setTimeout(x, a));
+          for (let u = 0; u < d.length; u++)
+            p += d[u].join(""), o([n], { [i]: p }), await new Promise((x) => setTimeout(x, a));
         }
       }
     },
@@ -2716,18 +2716,18 @@ const useBlockHighlight = () => {
   }, [n]);
   return { getGlobalBlocks: r, reset: a };
 }, useWatchGlobalBlocks = () => {
-  const [o] = useBlocksStore(), [n, r] = useAtom(globalBlocksStoreAtom), [a, l] = useAtom(globalBlocksLoadingStateAtom), i = useBuilderProp("getGlobalBlockBlocks", async (d) => []), c = useMemo(() => o.filter((u) => u._type === "GlobalBlock").filter((u) => u._type === "GlobalBlock").map((u) => u.globalBlock), [o]);
+  const [o] = useBlocksStore(), [n, r] = useAtom(globalBlocksStoreAtom), [a, l] = useAtom(globalBlocksLoadingStateAtom), i = useBuilderProp("getGlobalBlockBlocks", async (d) => []), c = useMemo(() => o.filter((p) => p._type === "GlobalBlock").filter((p) => p._type === "GlobalBlock").map((p) => p.globalBlock), [o]);
   useEffect(() => {
     forEach(c, (d) => {
-      has(n, d) || get(a, `${d}.loading`, !1) || (l((u) => ({ ...u, [d]: { loading: !0, error: null } })), i(d).then((u) => {
-        r((p) => ({ ...p, [d]: u })), l((p) => ({
-          ...p,
+      has(n, d) || get(a, `${d}.loading`, !1) || (l((p) => ({ ...p, [d]: { loading: !0, error: null } })), i(d).then((p) => {
+        r((u) => ({ ...u, [d]: p })), l((u) => ({
+          ...u,
           [d]: { loading: !1, error: null }
         }));
-      }).catch((u) => {
-        l((p) => ({
-          ...p,
-          [d]: { loading: !1, error: u.message }
+      }).catch((p) => {
+        l((u) => ({
+          ...u,
+          [d]: { loading: !1, error: p.message }
         }));
       }));
     });
@@ -2825,24 +2825,24 @@ const useBlockHighlight = () => {
   </body>
 </html>`, useCanvasScale = (o) => {
   const [n] = useCanvasWidth(), [, r] = useCanvasZoom(), a = useBuilderProp("htmlDir", "ltr"), [l, i] = useState({}), c = useCallback(() => {
-    const { width: d, height: u } = o;
+    const { width: d, height: p } = o;
     if (d < n) {
-      const p = parseFloat((d / n).toFixed(2).toString());
+      const u = parseFloat((d / n).toFixed(2).toString());
       let x = {};
-      const m = u * p, g = d * p;
-      u && (x = {
+      const m = p * u, g = d * u;
+      p && (x = {
         // Eureka! This is the formula to calculate the height of the scaled element. Thank you ChatGPT 4
-        height: 100 + (u - m) / m * 100 + "%",
+        height: 100 + (p - m) / m * 100 + "%",
         width: 100 + (d - g) / g * 100 + "%"
       }), i({
         position: "relative",
         top: 0,
-        transform: `scale(${p})`,
+        transform: `scale(${u})`,
         transformOrigin: a === "rtl" ? "top right" : "top left",
         ...x,
         maxWidth: "none"
         // TODO: Add max-width to the wrapper
-      }), r(p * 100);
+      }), r(u * 100);
     } else
       i({}), r(100);
   }, [n, o, a, r]);
@@ -2967,8 +2967,8 @@ const positionPlaceholder = (o, n, r) => {
     a.style.display = "block", a.style.width = "100%", a.style.height = "5px", a.style.top = "0px", a.style.left = "0px";
     return;
   }
-  const l = possiblePositions.map(([u]) => u), i = l.reduce(
-    (u, p) => Math.abs(p - r) < Math.abs(u - r) ? p : u,
+  const l = possiblePositions.map(([p]) => p), i = l.reduce(
+    (p, u) => Math.abs(u - r) < Math.abs(p - r) ? u : p,
     0
   ), c = l.indexOf(i);
   if (!possiblePositions[c]) return;
@@ -3034,8 +3034,8 @@ function canDropInTarget(o, n) {
   return canAcceptChildBlock(a, r);
 }
 const useDnd = () => {
-  const { document: o } = useFrame(), [n, r] = useAtom$1(draggingFlagAtom), { addCoreBlock: a } = useAddBlock(), [, l] = useHighlightBlockId(), [, i] = useSelectedBlockIds(), { moveBlocks: c } = useBlocksStoreUndoableActions(), [d, u] = useAtom$1(draggedBlockAtom), [, p] = useAtom$1(dropTargetBlockIdAtom), x = () => {
-    removePlaceholder(), r(!1), u(null), p(null), possiblePositions = [], dropTarget = null, dropIndex = null;
+  const { document: o } = useFrame(), [n, r] = useAtom$1(draggingFlagAtom), { addCoreBlock: a } = useAddBlock(), [, l] = useHighlightBlockId(), [, i] = useSelectedBlockIds(), { moveBlocks: c } = useBlocksStoreUndoableActions(), [d, p] = useAtom$1(draggedBlockAtom), [, u] = useAtom$1(dropTargetBlockIdAtom), x = () => {
+    removePlaceholder(), r(!1), p(null), u(null), possiblePositions = [], dropTarget = null, dropIndex = null;
   };
   return useEffect(() => {
     const m = window.document.getElementById("chaibuilder-root-layout-container"), g = (b) => {
@@ -3071,10 +3071,10 @@ const useDnd = () => {
       const g = m, b = g.target;
       dropTarget = b;
       const j = b.getAttribute("data-block-id"), f = b.getAttribute("data-dnd-dragged") !== "yes";
-      p(j), g.stopPropagation(), g.preventDefault(), possiblePositions = [], f && canDropInTarget(b, d) && calculatePossiblePositions(b), r(!0), l(""), i([]);
+      u(j), g.stopPropagation(), g.preventDefault(), possiblePositions = [], f && canDropInTarget(b, d) && calculatePossiblePositions(b), r(!0), l(""), i([]);
     },
     onDragLeave: (m) => {
-      m.target.getAttribute("data-block-id") === "canvas" && (p(null), r(!1), removePlaceholder(), possiblePositions = []);
+      m.target.getAttribute("data-block-id") === "canvas" && (u(null), r(!1), removePlaceholder(), possiblePositions = []);
     }
   };
 };
@@ -3099,20 +3099,20 @@ const useHandleCanvasDblClick = () => {
     const c = getTargetedBlock(i.target), d = c.getAttribute("data-block-type");
     if (!d || !o.includes(d))
       return;
-    const u = c.cloneNode(!0);
-    c.style.display = "none", Array.from(u.attributes).forEach((g) => {
-      g.name !== "class" && u.removeAttribute(g.name);
-    }), d === "Text" && (u.style.display = "inline-block"), c.parentNode.insertBefore(u, c.nextSibling);
-    const p = new Quill(u, { placeholder: "Type here..." });
+    const p = c.cloneNode(!0);
+    c.style.display = "none", Array.from(p.attributes).forEach((g) => {
+      g.name !== "class" && p.removeAttribute(g.name);
+    }), d === "Text" && (p.style.display = "inline-block"), c.parentNode.insertBefore(p, c.nextSibling);
+    const u = new Quill(p, { placeholder: "Type here..." });
     function x() {
-      const g = p.getText(0, p.getLength());
-      n([c.getAttribute("data-block-id")], { content: g }), c.removeAttribute("style"), u.removeEventListener("blur", x, !0), destroyQuill(p), a(""), l(), u.remove();
+      const g = u.getText(0, u.getLength());
+      n([c.getAttribute("data-block-id")], { content: g }), c.removeAttribute("style"), p.removeEventListener("blur", x, !0), destroyQuill(u), a(""), l(), p.remove();
     }
-    u.addEventListener("blur", x, !0), u.addEventListener("click", (g) => {
+    p.addEventListener("blur", x, !0), p.addEventListener("click", (g) => {
       g.stopPropagation();
-    }), u.addEventListener("keydown", (g) => {
+    }), p.addEventListener("keydown", (g) => {
       (g.key === "Enter" || g.key === "Escape") && x();
-    }), p.focus(), (m = u.querySelector(".ql-clipboard")) == null || m.remove(), a(c.getAttribute("data-block-id"));
+    }), u.focus(), (m = p.querySelector(".ql-clipboard")) == null || m.remove(), a(c.getAttribute("data-block-id"));
   };
 }, useHandleCanvasClick = () => {
   const [, o] = useSelectedStylingBlocks(), [n, r] = useSelectedBlockIds(), [a] = useAtom$1(inlineEditingActiveAtom), [l] = useAtom$1(treeRefAtom), { clearHighlight: i } = useBlockHighlight();
@@ -3125,11 +3125,11 @@ const useHandleCanvasDblClick = () => {
       return;
     }
     if (d != null && d.getAttribute("data-block-parent")) {
-      const u = d.getAttribute("data-style-prop"), p = d.getAttribute("data-style-id"), x = d.getAttribute("data-block-parent");
-      n.includes(x) || l == null || l.closeAll(), o([{ id: p, prop: u, blockId: x }]), r([x]);
+      const p = d.getAttribute("data-style-prop"), u = d.getAttribute("data-style-id"), x = d.getAttribute("data-block-parent");
+      n.includes(x) || l == null || l.closeAll(), o([{ id: u, prop: p, blockId: x }]), r([x]);
     } else if (d != null && d.getAttribute("data-block-id")) {
-      const u = d.getAttribute("data-block-id");
-      n.includes(u) || l == null || l.closeAll(), o([]), r(u === "canvas" ? [] : [u]);
+      const p = d.getAttribute("data-block-id");
+      n.includes(p) || l == null || l.closeAll(), o([]), r(p === "canvas" ? [] : [p]);
     }
     i();
   };
@@ -3159,7 +3159,7 @@ const useHandleCanvasDblClick = () => {
       }
     }, 100);
   }, [n, r, l, a]);
-  const c = useHandleCanvasDblClick(), d = useHandleCanvasClick(), u = useHandleMouseMove(), p = useHandleMouseLeave(), x = useDnd();
+  const c = useHandleCanvasDblClick(), d = useHandleCanvasClick(), p = useHandleMouseMove(), u = useHandleMouseLeave(), x = useDnd();
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
     {
@@ -3167,22 +3167,22 @@ const useHandleCanvasDblClick = () => {
       id: "canvas",
       onClick: d,
       onDoubleClick: c,
-      onMouseMove: u,
-      onMouseLeave: p,
+      onMouseMove: p,
+      onMouseLeave: u,
       ...omit(x, "isDragging"),
       className: "relative h-full max-w-full p-px " + (x.isDragging ? "dragging" : ""),
       children: o
     }
   );
 }, getElementByDataBlockId = (o, n) => o.querySelector(`[data-block-id="${n}"]`), useKeyEventWatcher = (o) => {
-  const [n, r] = useSelectedBlockIds(), a = useRemoveBlocks(), l = useDuplicateBlocks(), { undo: i, redo: c } = useUndoManager(), [, d] = useCutBlockIds(), [, u] = useCopyBlockIds(), { canPaste: p, pasteBlocks: x } = usePasteBlocks();
-  useHotkeys("ctrl+z,command+z", () => i(), {}, [i]), useHotkeys("ctrl+y,command+y", () => c(), {}, [c]), useHotkeys("ctrl+x,command+x", () => d(n), {}, [n, d]), useHotkeys("ctrl+c,command+c", () => u(n), {}, [n, u]), useHotkeys(
+  const [n, r] = useSelectedBlockIds(), a = useRemoveBlocks(), l = useDuplicateBlocks(), { undo: i, redo: c } = useUndoManager(), [, d] = useCutBlockIds(), [, p] = useCopyBlockIds(), { canPaste: u, pasteBlocks: x } = usePasteBlocks();
+  useHotkeys("ctrl+z,command+z", () => i(), {}, [i]), useHotkeys("ctrl+y,command+y", () => c(), {}, [c]), useHotkeys("ctrl+x,command+x", () => d(n), {}, [n, d]), useHotkeys("ctrl+c,command+c", () => p(n), {}, [n, p]), useHotkeys(
     "ctrl+v,command+v",
     () => {
-      p(n[0]) && x(n);
+      u(n[0]) && x(n);
     },
     {},
-    [n, p, x]
+    [n, u, x]
   );
   const m = o ? { document: o } : {};
   useHotkeys("esc", () => r([]), m, [r]), useHotkeys("ctrl+d,command+d", () => l(n), { ...m, preventDefault: !0 }, [
@@ -3222,7 +3222,7 @@ const useHandleCanvasDblClick = () => {
     }
   );
 }, BlockActionsStatic = ({ selectedBlockElement: o, block: n }) => {
-  const r = useRemoveBlocks(), a = useDuplicateBlocks(), [, l] = useSelectedBlockIds(), [, i] = useHighlightBlockId(), [, c] = useSelectedStylingBlocks(), [d] = useAtom$1(inlineEditingActiveAtom), { floatingStyles: u, refs: p, update: x } = useFloating({
+  const r = useRemoveBlocks(), a = useDuplicateBlocks(), [, l] = useSelectedBlockIds(), [, i] = useHighlightBlockId(), [, c] = useSelectedStylingBlocks(), [d] = useAtom$1(inlineEditingActiveAtom), { floatingStyles: p, refs: u, update: x } = useFloating({
     placement: "top-start",
     middleware: [shift(), flip()],
     elements: {
@@ -3236,8 +3236,8 @@ const useHandleCanvasDblClick = () => {
     {
       role: "button",
       tabIndex: 0,
-      ref: p.setFloating,
-      style: u,
+      ref: u.setFloating,
+      style: p,
       onClick: (b) => {
         b.stopPropagation(), b.preventDefault();
       },
@@ -3279,7 +3279,7 @@ const useHandleCanvasDblClick = () => {
     }
   ) });
 }, HeadTags = () => {
-  const [o] = useBrandingOptions(), [n] = useSelectedBlockIds(), [r] = useDarkMode(), [a] = useSelectedStylingBlocks(), [l] = useAtom$1(draggedBlockAtom), [i] = useAtom$1(dropTargetBlockIdAtom), { document: c, window: d } = useFrame(), [u] = useState(c == null ? void 0 : c.getElementById("highlighted-block")), [p] = useState(
+  const [o] = useBrandingOptions(), [n] = useSelectedBlockIds(), [r] = useDarkMode(), [a] = useSelectedStylingBlocks(), [l] = useAtom$1(draggedBlockAtom), [i] = useAtom$1(dropTargetBlockIdAtom), { document: c, window: d } = useFrame(), [p] = useState(c == null ? void 0 : c.getElementById("highlighted-block")), [u] = useState(
     c == null ? void 0 : c.getElementById("selected-block")
   ), [x] = useState(
     c == null ? void 0 : c.getElementById("selected-styling-block")
@@ -3346,14 +3346,14 @@ const useHandleCanvasDblClick = () => {
       ]
     });
   }, [o, d, g, b]), useEffect(() => {
-    p && (p.textContent = `${map(n, (j) => `[data-block-id="${j}"]`).join(",")}{
+    u && (u.textContent = `${map(n, (j) => `[data-block-id="${j}"]`).join(",")}{
                 outline: 1px solid ${n.length === 1 ? "#42a1fc" : "orange"} !important; outline-offset: -1px;
             }`);
-  }, [n, p]), useEffect(() => {
+  }, [n, u]), useEffect(() => {
     m.textContent = l ? `[data-block-id="${l._id}"], [data-block-id="${l._id}"] > * { pointer-events: none !important; opacity: 0.6 !important}` : "";
   }, [l, m]), useEffect(() => {
-    u && (u.textContent = '[data-highlighted="true"]{ outline: 1px solid #42a1fc !important; outline-offset: -1px;}');
-  }, [u]), useEffect(() => {
+    p && (p.textContent = '[data-highlighted="true"]{ outline: 1px solid #42a1fc !important; outline-offset: -1px;}');
+  }, [p]), useEffect(() => {
     x && (x.textContent = `${map(a, ({ id: j }) => `[data-style-id="${j}"]`).join(",")}{
                 outline: 1px solid #42a1fc !important; outline-offset: -1px;
             }`);
@@ -3370,16 +3370,16 @@ const useHandleCanvasDblClick = () => {
   const r = ["xs", "sm", "md", "lg", "xl", "2xl"], a = r.indexOf(n), l = o.split(" ");
   let i = new Array(r.length).fill(!1);
   for (const c of l) {
-    let [d, u] = c.split(":");
-    u || (u = d, d = "xs");
-    const p = r.indexOf(d);
-    if (p <= a) {
+    let [d, p] = c.split(":");
+    p || (p = d, d = "xs");
+    const u = r.indexOf(d);
+    if (u <= a) {
       const x = ["block", "flex", "inline", "inline-block", "inline-flex", "grid", "table"], m = ["hidden"];
-      if (x.includes(u))
-        for (let g = p; g < r.length; g++)
+      if (x.includes(p))
+        for (let g = u; g < r.length; g++)
           i[g] = !0;
-      else if (m.includes(u))
-        for (let g = p; g < r.length; g++)
+      else if (m.includes(p))
+        for (let g = u; g < r.length; g++)
           i[g] = !1;
     }
   }
@@ -3399,24 +3399,24 @@ const useHandleCanvasDblClick = () => {
   );
   return { getRSCBlockMarkup: a, getRSCBlockState: l, reset: i };
 }, useWatchRSCBlocks = () => {
-  const [o] = useBlocksStore(), [n, r] = useAtom(rscBlocksStoreAtom), [a, l] = useAtom(rscBlocksLoadingStateAtom), i = useChaiBlocks(), c = useBuilderProp("getRSCBlock", async (u) => ""), d = useMemo(() => o.filter((p) => {
+  const [o] = useBlocksStore(), [n, r] = useAtom(rscBlocksStoreAtom), [a, l] = useAtom(rscBlocksLoadingStateAtom), i = useChaiBlocks(), c = useBuilderProp("getRSCBlock", async (p) => ""), d = useMemo(() => o.filter((u) => {
     var m;
-    return (m = get(i, p._type)) == null ? void 0 : m.server;
-  }).map((p) => p._id), [i, o]);
+    return (m = get(i, u._type)) == null ? void 0 : m.server;
+  }).map((u) => u._id), [i, o]);
   useEffect(() => {
-    forEach(d, (u) => {
-      if (get(n, u, "") || get(a, `${u}.loading`, !1))
+    forEach(d, (p) => {
+      if (get(n, p, "") || get(a, `${p}.loading`, !1))
         return;
-      const p = o.find((x) => x._id === u);
-      l((x) => ({ ...x, [u]: { loading: !0, error: null } })), c(p).then((x) => {
-        r((m) => ({ ...m, [u]: x })), l((m) => ({
+      const u = o.find((x) => x._id === p);
+      l((x) => ({ ...x, [p]: { loading: !0, error: null } })), c(u).then((x) => {
+        r((m) => ({ ...m, [p]: x })), l((m) => ({
           ...m,
-          [u]: { loading: !1, error: null }
+          [p]: { loading: !1, error: null }
         }));
       }).catch((x) => {
         l((m) => ({
           ...m,
-          [u]: { loading: !1, error: x.message }
+          [p]: { loading: !1, error: x.message }
         }));
       });
     });
@@ -3479,16 +3479,16 @@ function applyLanguage(o, n, r) {
   }), a;
 }
 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(
+  const { selectedLang: r } = useLanguages(), [a] = useAtom$1(xShowBlocksAtom), [l] = useCutBlockIds(), [i] = useAtom$1(draggedBlockAtom), [c] = useAtom$1(dropTargetBlockIdAtom), [, d] = useCanvasWidth(), [p] = useCanvasSettings(), [u] = 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 w = get(u, C, {});
+      const w = get(p, C, {});
       return { ...v, ...w };
     }, {}),
-    [u]
+    [p]
   );
   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;
+      if (b === f._id || u.includes(f._id)) return null;
       const C = {}, w = filter(n, { _parent: f._id });
       if (C.children = w.length > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx(BlocksRendererStatic, { allBlocks: n, blocks: w }) : null, f._type === "GlobalBlock") {
         const S = x(f);
@@ -3532,7 +3532,7 @@ const useAllDataProviders = () => useMemo(() => getChaiDataProviders(), []), Blo
     if (i) {
       const c = (i == null ? void 0 : i.mockFn) || (i == null ? void 0 : i.dataFn);
       c && c(l.args).then(
-        (d) => n((u) => ({ ...u, [l.providerKey]: d }))
+        (d) => n((p) => ({ ...p, [l.providerKey]: d }))
       );
     }
   }), () => {
@@ -3556,22 +3556,22 @@ const useAllDataProviders = () => useMemo(() => getChaiDataProviders(), []), Blo
 }, ResizableCanvasWrapper = ({ children: o, onMount: n, onResize: r }) => {
   const [, a] = useSelectedBlockIds(), [, l] = useSelectedStylingBlocks(), i = useRef(null), c = useDebouncedCallback(
     () => {
-      const { clientWidth: u } = i.current;
-      r(u);
+      const { clientWidth: p } = i.current;
+      r(p);
     },
     [i.current],
     100
   );
   useResizeObserver(i.current, c, i.current !== null), useEffect(() => {
-    const { clientWidth: u } = i.current;
-    n(u);
+    const { clientWidth: p } = i.current;
+    n(p);
   }, []);
   const d = () => {
     a([]), l([]);
   };
   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 = (R) => {
+  const [o] = useCanvasWidth(), [, n] = useSelectedBlockIds(), r = useSelectedBlock(), [, a] = useHighlightBlockId(), l = useRef(null), i = useRef(null), [c, d] = useState({ width: 0, height: 0 }), p = useCanvasScale(c), [u, x] = useState([]), [, m] = useState([]), [, g] = useAtom$1(canvasIframeAtom), [b, j] = useSelectedStylingBlocks(), f = useBuilderProp("loading", !1), v = useBuilderProp("htmlDir", "ltr"), C = (R) => {
     d((T) => ({ ...T, width: R }));
   };
   useEffect(() => {
@@ -3618,7 +3618,7 @@ const useAllDataProviders = () => useMemo(() => getChaiDataProviders(), []), Blo
           contentDidMount: () => g(l.current),
           ref: l,
           id: "canvas-iframe",
-          style: { ...u, ...isEmpty(u) ? { width: `${o}px` } : {} },
+          style: { ...p, ...isEmpty(p) ? { width: `${o}px` } : {} },
           className: "relative mx-auto box-content h-full w-full max-w-full shadow-lg transition-all duration-300 ease-linear",
           initialContent: I,
           children: [
@@ -3627,7 +3627,7 @@ const useAllDataProviders = () => useMemo(() => getChaiDataProviders(), []), Blo
               BlockActionsStatic,
               {
                 block: r,
-                selectedBlockElement: first(p)
+                selectedBlockElement: first(u)
               }
             ),
             /* @__PURE__ */ jsxRuntimeExports.jsx(HeadTags, {}),
@@ -3742,7 +3742,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-C1ImRmIp.js")), CanvasArea = () => {
+}, CodeEditor$1 = React__default.lazy(() => import("./CodeEditor-B4OwhGBq.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, {}) }) }),
@@ -3820,8 +3820,8 @@ const useAllDataProviders = () => useMemo(() => getChaiDataProviders(), []), Blo
   const [r, a] = useBrandingOptions(), [l] = useBlocksContainer(), i = React.useRef(r), { t: c } = useTranslation(), d = ({ formData: R }, T) => {
     T && (a(R), i.current = R);
   }, {
-    bodyFont: u,
-    headingFont: p,
+    bodyFont: p,
+    headingFont: u,
     primaryColor: x,
     bodyTextDarkColor: m,
     bodyTextLightColor: g,
@@ -3833,12 +3833,12 @@ const useAllDataProviders = () => useMemo(() => getChaiDataProviders(), []), Blo
   let C = {
     headingFont: y({
       title: c("Theme Config.Heading Font"),
-      default: p,
+      default: u,
       options: FONTS
     }),
     bodyFont: y({
       title: c("Theme Config.Body Font"),
-      default: u,
+      default: p,
       options: FONTS
     }),
     roundedCorners: s$1({
@@ -4092,13 +4092,13 @@ 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: w } = o, I = (E) => {
+  let p = null;
+  const u = o.children.length > 0, { highlightBlock: x, clearHighlight: m } = useBlockHighlight(), { id: g, data: b, isSelected: j, willReceiveDrop: f, isDragging: v, isEditing: C, handleClick: w } = o, I = (E) => {
     E.stopPropagation(), !i.includes(g) && o.toggle();
   }, R = (E) => {
-    E.isInternal && (u = E.isOpen, E.isOpen && E.close());
+    E.isInternal && (p = E.isOpen, E.isOpen && E.close());
   }, T = (E) => {
-    E.isInternal && u !== null && (u ? E.open() : E.close(), u = null);
+    E.isInternal && p !== null && (p ? E.open() : E.close(), p = null);
   }, k = (E) => {
     E.stopPropagation(), !o.isOpen && !i.includes(g) && o.toggle(), w(E);
   };
@@ -4165,7 +4165,7 @@ const Node = memo(({ node: o, style: n, dragHandle: r }) => {
             "div",
             {
               className: `flex h-4 w-4 rotate-0 transform cursor-pointer items-center justify-center text-xs transition-transform duration-100 ${o.isOpen ? "rotate-90" : ""}`,
-              children: p && /* @__PURE__ */ jsxRuntimeExports.jsx("button", { onClick: I, type: "button", children: /* @__PURE__ */ jsxRuntimeExports.jsx(TriangleRightIcon, {}) })
+              children: u && /* @__PURE__ */ jsxRuntimeExports.jsx("button", { onClick: I, type: "button", children: /* @__PURE__ */ jsxRuntimeExports.jsx(TriangleRightIcon, {}) })
             }
           ),
           /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center", children: [
@@ -4554,7 +4554,7 @@ const Node = memo(({ node: o, style: n, dragHandle: r }) => {
     }
   }
 }, traverseNodes = (o, n = null) => flatMapDeep(o, (r) => {
-  var u, p, x, m, g, b, j, f;
+  var p, u, x, m, g, b, j, f;
   if (r.type === "comment") return [];
   let a = { _id: generateUUID() };
   if (n && (a._parent = n.block._id), r.type === "text")
@@ -4588,8 +4588,8 @@ 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",
+      href: ((p = l.find((C) => C.key === "href")) == null ? void 0 : p.value) || "",
+      hrefType: ((u = l.find((C) => C.key === "data-vbtype")) == null ? void 0 : u.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) || "",
@@ -4665,19 +4665,19 @@ function ExpandableObject(o) {
     openBracket: i,
     closeBracket: c,
     level: d,
-    style: u,
-    shouldExpandNode: p,
+    style: p,
+    shouldExpandNode: u,
     clickToExpandNode: x
   } = o;
-  const m = useRef(!1), [g, b, j] = useBool(() => p(d, r, n));
+  const m = useRef(!1), [g, b, j] = useBool(() => u(d, r, n));
   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(), w = d + 1, I = a.length - 1, R = (T) => {
+    m.current ? j(u(d, r, n)) : m.current = !0;
+  }, [u]);
+  const f = g ? p.collapseIcon : p.expandIcon, v = g ? "collapse JSON" : "expand JSON", C = useComponentId(), w = d + 1, I = a.length - 1, R = (T) => {
     T.key === " " && (T.preventDefault(), b());
   };
   return /* @__PURE__ */ createElement("div", {
-    className: u.basicChildStyle,
+    className: p.basicChildStyle,
     role: "list"
   }, /* @__PURE__ */ createElement("span", {
     className: f,
@@ -4689,28 +4689,28 @@ function ExpandableObject(o) {
     "aria-expanded": g,
     "aria-controls": g ? C : void 0
   }), n && (x ? /* @__PURE__ */ createElement("span", {
-    className: u.clickableLabel,
+    className: p.clickableLabel,
     onClick: b,
     onKeyDown: R,
     role: "button",
     tabIndex: -1
   }, n, ":") : /* @__PURE__ */ createElement("span", {
-    className: u.label
+    className: p.label
   }, n, ":")), /* @__PURE__ */ createElement("span", {
-    className: u.punctuation
+    className: p.punctuation
   }, i), g ? /* @__PURE__ */ createElement("div", {
     id: C
   }, a.map((T, k) => /* @__PURE__ */ createElement(DataRender, {
     key: T[0] || k,
     field: T[0],
     value: T[1],
-    style: u,
+    style: p,
     lastElement: k === I,
     level: w,
-    shouldExpandNode: p,
+    shouldExpandNode: u,
     clickToExpandNode: x
   }))) : /* @__PURE__ */ createElement("span", {
-    className: u.collapsedContent,
+    className: p.collapsedContent,
     onClick: b,
     onKeyDown: R,
     role: "button",
@@ -4719,9 +4719,9 @@ function ExpandableObject(o) {
     "aria-label": v,
     "aria-expanded": g
   }), /* @__PURE__ */ createElement("span", {
-    className: u.punctuation
+    className: p.punctuation
   }, c), !l && /* @__PURE__ */ createElement("span", {
-    className: u.punctuation
+    className: p.punctuation
   }, ","));
 }
 function EmptyObject(o) {
@@ -4771,7 +4771,7 @@ function JsonObject(o) {
     style: a,
     shouldExpandNode: i,
     clickToExpandNode: c,
-    data: Object.keys(r).map((u) => [u, r[u]])
+    data: Object.keys(r).map((p) => [p, r[p]])
   });
 }
 function JsonArray(o) {
@@ -4800,7 +4800,7 @@ function JsonArray(o) {
     style: a,
     shouldExpandNode: c,
     clickToExpandNode: d,
-    data: r.map((u) => [void 0, u])
+    data: r.map((p) => [void 0, p])
   });
 }
 function JsonPrimitiveValue(o) {
@@ -4864,8 +4864,8 @@ function getPathAndTypes(o) {
   const n = [], r = {};
   function a(l, i) {
     forEach(i, (c, d) => {
-      const u = l ? `${l}.${d}` : d, p = isArray$1(c) ? "list" : typeof c;
-      n.push(u), r[u] = p === "string" ? "text" : p === "object" ? "model" : p, p === "object" && !isArray$1(c) && a(u, c);
+      const p = l ? `${l}.${d}` : d, u = isArray$1(c) ? "list" : typeof c;
+      n.push(p), r[p] = u === "string" ? "text" : u === "object" ? "model" : u, u === "object" && !isArray$1(c) && a(p, c);
     });
   }
   return a("", omit(o, ["styles", "_type", "_id", "_name", "_bindings"])), { paths: n, pathsType: r };
@@ -4902,9 +4902,9 @@ const ViewData = ({ data: o, fullView: n }) => {
   dataType: i,
   appliedBindings: c
 }) => {
-  const { paths: d, pathsType: u } = getPathAndTypes(a), p = o === "PROP" ? getBlockComponent(a == null ? void 0 : a._type) : {}, x = o === "PROP", [m, g] = useState(!1), b = useMemo(() => o === "PROP" ? d.filter(
-    (j) => !includes(c, j) && get(p, `props.${first(split(j, "."))}.binding`)
-  ) : d.filter((j) => i === get(u, j, "")), [o, d, c, i, p]);
+  const { paths: d, pathsType: p } = getPathAndTypes(a), u = o === "PROP" ? getBlockComponent(a == null ? void 0 : a._type) : {}, x = o === "PROP", [m, g] = useState(!1), b = useMemo(() => o === "PROP" ? d.filter(
+    (j) => !includes(c, j) && get(u, `props.${first(split(j, "."))}.binding`)
+  ) : d.filter((j) => i === get(p, j, "")), [o, d, c, i, u]);
   return useEffect(() => {
     n && l(n);
   }, [n, o]), /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
@@ -4946,7 +4946,7 @@ const ViewData = ({ data: o, fullView: n }) => {
                     /* @__PURE__ */ jsxRuntimeExports.jsx(Check, { className: `h-4 w-4 text-green-500 ${n === j ? "" : "opacity-0"}` }),
                     j
                   ] }),
-                  x ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "rounded-full bg-purple-100 px-2 py-0.5 text-[10px] text-purple-500", children: startCase(get(u, j, "")) }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "pl-6", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ViewData, { data: get(a, j) }) })
+                  x ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "rounded-full bg-purple-100 px-2 py-0.5 text-[10px] text-purple-500", children: startCase(get(p, j, "")) }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "pl-6", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ViewData, { data: get(a, j) }) })
                 ]
               },
               j
@@ -4963,17 +4963,17 @@ const ViewData = ({ data: o, fullView: n }) => {
   editMode: r,
   item: a
 }) => {
-  const [l, i] = useState(r ? a.key : ""), [c, d] = useState(r ? a.value : ""), u = useSelectedBlock(), [p] = useChaiExternalData(), x = useCallback(
+  const [l, i] = useState(r ? a.key : ""), [c, d] = useState(r ? a.value : ""), p = useSelectedBlock(), [u] = useChaiExternalData(), x = useCallback(
     (b, j) => {
       if (isEmpty(b)) return "";
       {
-        const f = get(j === "PROP" ? u : p, b, "");
+        const f = get(j === "PROP" ? p : u, b, "");
         if (isArray$1(f)) return "list";
         const v = typeof f;
         return v === "string" ? "text" : v === "object" ? "model" : v;
       }
     },
-    [u, p]
+    [p, u]
   ), [m, g] = useState(r ? x(a.key, "PROP") : "");
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs(DialogHeader, { children: [
@@ -4993,7 +4993,7 @@ const ViewData = ({ data: o, fullView: n }) => {
             const j = x(b, "PROP");
             i(b), m !== j && d(""), g(j);
           },
-          data: u,
+          data: p,
           dataType: m,
           appliedBindings: o
         }
@@ -5011,7 +5011,7 @@ const ViewData = ({ data: o, fullView: n }) => {
             const j = x(b, "PATH");
             d(m === j ? b : "");
           },
-          data: p,
+          data: u,
           dataType: m,
           appliedBindings: o
         }
@@ -5038,8 +5038,8 @@ const ViewData = ({ data: o, fullView: n }) => {
         item: i,
         editMode: l,
         appliedBindings: a,
-        onAddBinding: (u) => {
-          r(u), d(!1);
+        onAddBinding: (p) => {
+          r(p), d(!1);
         }
       }
     ) })
@@ -5052,16 +5052,16 @@ const ViewData = ({ data: o, fullView: n }) => {
   dataProvider: l,
   appliedBindings: i
 }) => {
-  const [c, d] = useState("string"), u = (p, x) => {
-    if (isEmpty(p)) return "";
+  const [c, d] = useState("string"), p = (u, x) => {
+    if (isEmpty(u)) return "";
     {
-      const m = get(a, p, "");
+      const m = get(a, u, "");
       if (isArray$1(m)) return "list";
       const g = typeof m;
       return g === "string" ? "text" : g === "object" ? "model" : g;
     }
   };
-  return useEffect(() => d(() => u(o.key)), [o.key]), /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative flex flex-col rounded-md border border-border p-2", children: [
+  return useEffect(() => d(() => p(o.key)), [o.key]), /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative flex flex-col rounded-md border border-border p-2", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm font-normal text-gray-500", children: o.key }),
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-medium leading-5", children: o.value }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(ViewData, { data: get(l, o.value, "") }),
@@ -5089,10 +5089,10 @@ const ViewData = ({ data: o, fullView: n }) => {
     if (isEmpty(i)) return !1;
     const m = last(i);
     return isEmpty(m == null ? void 0 : m.key) || isEmpty(m == null ? void 0 : m.value);
-  }, [a, i]), u = (m) => {
+  }, [a, i]), p = (m) => {
     const g = filter(i, (b) => b.key !== m.key);
     c([...g, m]), x([...g, m]);
-  }, p = (m) => {
+  }, u = (m) => {
     const g = filter(i, (b, j) => m !== j);
     x([...g]);
   }, x = useCallback(
@@ -5117,8 +5117,8 @@ const ViewData = ({ data: o, fullView: n }) => {
       NewDataBindingPair,
       {
         item: m,
-        onAddBinding: u,
-        onRemove: () => p(g),
+        onAddBinding: p,
+        onRemove: () => u(g),
         selectedBlock: r,
         dataProvider: a,
         appliedBindings: map(i, "key")
@@ -5131,7 +5131,7 @@ const ViewData = ({ data: o, fullView: n }) => {
         {
           disabled: d,
           appliedBindings: map(i, "key"),
-          onAddBinding: u,
+          onAddBinding: p,
           children: /* @__PURE__ */ jsxRuntimeExports.jsx(
             "span",
             {
@@ -5212,7 +5212,7 @@ const ViewData = ({ data: o, fullView: n }) => {
       }
     )
   ] });
-}, UnsplashImages = React__default.lazy(() => import("./UnsplashImages-Ds_3IihK.js")), UploadImages = React__default.lazy(() => import("./UploadImages-VZ7-y0rA.js")), ImagesPanel = ({
+}, UnsplashImages = React__default.lazy(() => import("./UnsplashImages-CYTY_ol5.js")), UploadImages = React__default.lazy(() => import("./UploadImages-DjGNkHdG.js")), ImagesPanel = ({
   isModalView: o = !1,
   onSelect: n = () => {
   }
@@ -5222,7 +5222,7 @@ const ViewData = ({ data: o, fullView: n }) => {
   );
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex h-full flex-col", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center justify-between rounded-md bg-background/30 p-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx("h1", { className: "px-1 font-semibold", children: o && l ? "Unsplash images" : o ? "Select or upload images" : "Images" }) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(Tabs, { value: c, onValueChange: (u) => d(u), className: "flex h-full w-full flex-col py-2", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(Tabs, { value: c, onValueChange: (p) => d(p), className: "flex h-full w-full flex-col py-2", children: [
       !(l || i) && /* @__PURE__ */ jsxRuntimeExports.jsxs(TabsList, { className: "w-full", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "upload", className: "w-full", children: "Upload" }),
         /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "unsplash", className: "w-full", children: "Unsplash" })
@@ -5259,8 +5259,8 @@ const ImagePickerField = ({ value: o, onChange: n, id: r, onBlur: a }) => {
           className: "text-xs",
           placeholder: c("Enter image URL"),
           value: o,
-          onBlur: ({ target: { value: u } }) => a(r, u),
-          onChange: (u) => n(u.target.value)
+          onBlur: ({ target: { value: p } }) => a(r, p),
+          onChange: (p) => n(p.target.value)
         }
       )
     ] })
@@ -5307,14 +5307,14 @@ 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, w] = useState(-1), I = useRef(null), R = (_ = 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, p] = useState(!1), [u, x] = useState(!1), [m, g] = useState("pages"), [b, j] = useState(""), [f, v] = useState([]), [C, w] = useState(-1), I = useRef(null), R = (_ = 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([]), w(-1), (async () => {
-      u(!0);
+      p(!0);
       const L = await l(N, [get(S, 2, "pages")]);
-      L && Array.isArray(L) && j(get(L, [0, "name"], "")), c(!0), u(!1);
+      L && Array.isArray(L) && j(get(L, [0, "name"], "")), c(!0), p(!1);
     })();
   }, [o]);
   const T = useDebouncedCallback(
@@ -5325,7 +5325,7 @@ const ImagePickerField = ({ value: o, onChange: n, id: r, onBlur: a }) => {
         const N = await l(m, S);
         v(N);
       }
-      u(!1), w(-1);
+      p(!1), w(-1);
     },
     [m],
     300
@@ -5358,7 +5358,7 @@ const ImagePickerField = ({ value: o, onChange: n, id: r, onBlur: a }) => {
   const A = () => {
     j(""), v([]), w(-1), x(!1), r("");
   }, E = (S) => {
-    j(S), x(!isEmpty(S)), u(!0), T(S);
+    j(S), x(!isEmpty(S)), p(!0), T(S);
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("select", { name: "collection", value: m, onChange: (S) => g(S.target.value), children: map(n, (S) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: S.key, children: S.name }, S.key)) }),
@@ -5376,10 +5376,10 @@ const ImagePickerField = ({ value: o, onChange: n, id: r, onBlur: a }) => {
       ),
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute bottom-2 right-2 top-3 flex items-center gap-1.5", children: b && /* @__PURE__ */ jsxRuntimeExports.jsx("button", { onClick: A, className: "text-gray-400 hover:text-gray-600", title: a("Clear search"), children: /* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "h-4 w-4" }) }) })
     ] }),
-    (d || !isEmpty(f) || p && isEmpty(f)) && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute z-40 mt-2 max-h-40 w-full overflow-y-auto rounded-md border border-border bg-background shadow-lg", children: d ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-1 p-2", children: [
+    (d || !isEmpty(f) || u && isEmpty(f)) && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute z-40 mt-2 max-h-40 w-full overflow-y-auto rounded-md border border-border bg-background shadow-lg", children: d ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-1 p-2", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-6 w-full animate-pulse rounded bg-gray-200" }),
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-6 w-full animate-pulse rounded bg-gray-200" })
-    ] }) : p && isEmpty(f) ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-center p-4 text-sm text-gray-500", children: [
+    ] }) : u && isEmpty(f) ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-center p-4 text-sm text-gray-500", children: [
       a("No results found for"),
       ' "',
       b,
@@ -5403,11 +5403,11 @@ const ImagePickerField = ({ value: o, onChange: n, id: r, onBlur: a }) => {
     )) }) })
   ] });
 }, LinkField = ({ schema: o, formData: n, onChange: r }) => {
-  const { t: a } = useTranslation(), { type: l = "collection", href: i = "", target: c = "self" } = n, d = useBuilderProp("collections", []), u = l === "collection" && isEmpty(d) ? "url" : l;
+  const { t: a } = useTranslation(), { type: l = "collection", href: i = "", target: c = "self" } = n, d = useBuilderProp("collections", []), p = l === "collection" && isEmpty(d) ? "url" : l;
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs font-medium", children: (o == null ? void 0 : o.title) ?? "Link" }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-y-1.5", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("select", { name: "type", value: l, onChange: (p) => r({ ...n, type: p.target.value }), children: map(
+      /* @__PURE__ */ jsxRuntimeExports.jsx("select", { name: "type", value: l, onChange: (u) => r({ ...n, type: u.target.value }), children: map(
         [
           ...isEmpty(d) ? [] : [{ const: "collection", title: a("Goto Page") }],
           { const: "url", title: a("Open URL") },
@@ -5415,14 +5415,14 @@ const ImagePickerField = ({ value: o, onChange: n, id: r, onBlur: a }) => {
           { const: "telephone", title: a("Call Phone") },
           { const: "scroll", title: a("Scroll to element") }
         ],
-        (p) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: p.const, children: p.title }, p.const)
+        (u) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: u.const, children: u.title }, u.const)
       ) }),
-      u === "collection" && !isEmpty(d) ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+      p === "collection" && !isEmpty(d) ? /* @__PURE__ */ jsxRuntimeExports.jsx(
         CollectionField,
         {
           href: i,
           collections: d,
-          onChange: (p) => r({ ...n, href: p })
+          onChange: (u) => r({ ...n, href: u })
         }
       ) : /* @__PURE__ */ jsxRuntimeExports.jsx(
         "input",
@@ -5433,11 +5433,11 @@ const ImagePickerField = ({ value: o, onChange: n, id: r, onBlur: a }) => {
           name: "href",
           type: "text",
           value: i,
-          onChange: (p) => r({ ...n, href: p.target.value }),
+          onChange: (u) => r({ ...n, href: u.target.value }),
           placeholder: a(l === "url" ? "Enter URL" : l === "scroll" ? "#ElementID" : "Enter details")
         }
       ),
-      u === "url" && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-x-2 text-muted-foreground", children: [
+      p === "url" && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-x-2 text-muted-foreground", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           "input",
           {
@@ -5458,8 +5458,8 @@ const ImagePickerField = ({ value: o, onChange: n, id: r, onBlur: a }) => {
   const { t: r } = useTranslation(), [, a] = useCodeEditor(), l = useSelectedBlock();
   if (typeof window > "u") return null;
   const i = o.replace("root.", ""), c = get(l, i, ""), d = () => {
-    const u = l == null ? void 0 : l._id;
-    a({ blockId: u, blockProp: i, placeholder: n, initialCode: get(l, i, c) });
+    const p = l == null ? void 0 : l._id;
+    a({ blockId: p, blockProp: i, placeholder: n, initialCode: get(l, i, c) });
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-2 flex flex-col gap-y-1", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -5473,15 +5473,15 @@ const ImagePickerField = ({ value: o, onChange: n, id: r, onBlur: a }) => {
     /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { onClick: d, size: "sm", variant: "outline", className: "w-fit", children: r("Open code editor") })
   ] });
 }, JSONForm = memo(({ id: o, properties: n, formData: r, onChange: a }) => {
-  const [l, i] = useState(r), c = { type: "object", properties: {} }, d = {}, { t: u } = useTranslation(), { selectedLang: p, fallbackLang: x, languages: m } = useLanguages(), g = m.length === 0 ? "" : p.length ? p : x;
+  const [l, i] = useState(r), c = { type: "object", properties: {} }, d = {}, { t: p } = useTranslation(), { selectedLang: u, fallbackLang: x, languages: m } = useLanguages(), g = m.length === 0 ? "" : u.length ? u : x;
   Object.keys(n).forEach((j) => {
     const f = n[j];
     if (includes(["slot", "styles"], f.type)) return;
     const v = j;
-    c.properties[v] = getBlockJSONFromSchemas(f, u, g), d[v] = getBlockJSONFromUISchemas(f);
+    c.properties[v] = getBlockJSONFromSchemas(f, p, g), d[v] = getBlockJSONFromUISchemas(f);
   }), useEffect(() => {
     i(r);
-  }, [o, p]);
+  }, [o, u]);
   const b = useThrottledCallback(
     async ({ formData: j }, f) => {
       a({ formData: j }, f);
@@ -5532,7 +5532,7 @@ const ImagePickerField = ({ value: o, onChange: n, id: r, onBlur: a }) => {
           id: "show-on-canvas",
           checked: c,
           onCheckedChange: (d) => {
-            d ? (n((u) => [...u, r._id]), a([r._id])) : n((u) => u.filter((p) => p !== r._id));
+            d ? (n((p) => [...p, r._id]), a([r._id])) : n((p) => p.filter((u) => u !== r._id));
           }
         }
       ),
@@ -5580,14 +5580,14 @@ 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), p = useBuilderProp("dataBindingSupport", !1), u = ({ formData: f }, v, C) => {
     if (v && (c == null ? void 0 : c._id) === n._id) {
       const w = v.replace("root.", "");
       a([n._id], { [w]: get(f, w) }, C);
     }
   }, x = useCallback(
     debounce(({ formData: f }, v, C) => {
-      p({ formData: f }, v, C), d(f);
+      u({ formData: f }, v, C), d(f);
     }, 1500),
     [n == null ? void 0 : n._id, o]
   ), m = ({ formData: f }, v) => {
@@ -5602,10 +5602,10 @@ function BlockSettings() {
     const f = cloneDeep(get(l, "props", {}));
     return each(f, (v, C) => {
       get(v, "hidden", !1) && delete f[C];
-    }), u && each(g, (v) => delete f[v]), f;
-  }, [l, g, u]), j = get(l, "server", !1);
+    }), p && each(g, (v) => delete f[v]), f;
+  }, [l, g, p]), j = get(l, "server", !1);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "overflow-x-hidden px-px", children: [
-    u ? /* @__PURE__ */ jsxRuntimeExports.jsxs(Accordion, { type: "multiple", defaultValue: ["STATIC", "BINDING"], className: "mt-4 h-full w-full", children: [
+    p ? /* @__PURE__ */ jsxRuntimeExports.jsxs(Accordion, { type: "multiple", defaultValue: ["STATIC", "BINDING"], className: "mt-4 h-full w-full", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs(AccordionItem, { value: "BINDING", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(AccordionTrigger, { className: "py-2", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-x-2", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -5621,7 +5621,7 @@ function BlockSettings() {
           {
             bindingData: get(n, "_bindings", {}),
             onChange: (f) => {
-              p({ formData: { _bindings: f } }, "root._bindings");
+              u({ formData: { _bindings: f } }, "root._bindings");
             }
           }
         ) })
@@ -5683,7 +5683,7 @@ function promptWithLanguage(o, n, r) {
 ${a}`;
 }
 const askAiProcessingAtom = atom$1(!1), useAskAi = () => {
-  const [o, n] = useAtom$1(askAiProcessingAtom), [r, a] = useState(null), l = useBuilderProp("askAiCallBack", null), i = useStreamMultipleBlocksProps(), c = useUpdateMultipleBlocksProps(), [d] = useBlocksStore(), { selectedLang: u, fallbackLang: p } = useLanguages(), x = u.length ? u : p;
+  const [o, n] = useAtom$1(askAiProcessingAtom), [r, a] = useState(null), l = useBuilderProp("askAiCallBack", null), i = useStreamMultipleBlocksProps(), c = useUpdateMultipleBlocksProps(), [d] = useBlocksStore(), { selectedLang: p, fallbackLang: u } = useLanguages(), x = p.length ? p : u;
   return {
     askAi: useCallback(
       async (m, g, b, j) => {
@@ -5692,7 +5692,7 @@ const askAiProcessingAtom = atom$1(!1), useAskAi = () => {
           try {
             const f = m === "content" ? cloneDeep(getBlockWithChildren(g, d)) : [cloneDeep(d.find((R) => R._id === g))];
             set(f, "0._parent", null);
-            const v = u === p ? "" : u, C = await l(m, promptWithLanguage(b, x, m), f, v), { blocks: w, error: I } = C;
+            const v = p === u ? "" : p, C = await l(m, promptWithLanguage(b, x, m), f, v), { blocks: w, error: I } = C;
             if (I) {
               a(I);
               return;
@@ -5709,8 +5709,8 @@ const askAiProcessingAtom = atom$1(!1), useAskAi = () => {
         l,
         n,
         d,
-        u,
         p,
+        u,
         x,
         c,
         i
@@ -5737,10 +5737,10 @@ function Countdown() {
   const [o, n] = useState(SECONDS), [r, a] = useState(!1);
   useEffect(() => {
     if (r && o > 0) {
-      const u = setTimeout(() => {
+      const p = setTimeout(() => {
         n(o - 0.1);
       }, 100);
-      return () => clearTimeout(u);
+      return () => clearTimeout(p);
     } else o <= 0 && (a(!1), n(SECONDS));
   }, [r, o]);
   const l = () => {
@@ -5784,14 +5784,14 @@ function Countdown() {
   ] });
 }
 const AskAIStyles = ({ blockId: o }) => {
-  const { t: n } = useTranslation(), { askAi: r, loading: a, error: l } = useAskAi(), [i, c] = useState(""), d = useRef(null), u = useRef(null), [p, x] = useState();
+  const { t: n } = useTranslation(), { askAi: r, loading: a, error: l } = useAskAi(), [i, c] = useState(""), d = useRef(null), p = useRef(null), [u, x] = useState();
   useEffect(() => {
     var g;
     (g = d.current) == null || g.focus();
   }, []);
   const m = (g) => {
     const { usage: b } = g || {};
-    !l && b && x(b), u.current = setTimeout(() => x(void 0), 1e4), l || c("");
+    !l && b && x(b), p.current = setTimeout(() => x(void 0), 1e4), l || c("");
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "mb-1 text-sm font-semibold leading-none tracking-tight", children: n("Ask AI") }),
@@ -5805,7 +5805,7 @@ const AskAIStyles = ({ blockId: o }) => {
         className: "w-full border border-border focus:border-0",
         rows: 3,
         onKeyDown: (g) => {
-          g.key === "Enter" && (g.preventDefault(), u.current && clearTimeout(u.current), x(void 0), r("styles", o, i, m));
+          g.key === "Enter" && (g.preventDefault(), p.current && clearTimeout(p.current), x(void 0), r("styles", o, i, m));
         }
       }
     ),
@@ -5815,7 +5815,7 @@ const AskAIStyles = ({ blockId: o }) => {
         {
           disabled: i.trim().length < 5 || a,
           onClick: () => {
-            u.current && clearTimeout(u.current), x(void 0), r("styles", o, i, m);
+            p.current && clearTimeout(p.current), x(void 0), r("styles", o, i, m);
           },
           variant: "default",
           className: "w-fit",
@@ -5834,11 +5834,11 @@ const AskAIStyles = ({ blockId: o }) => {
         /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { variant: "destructive", onClick: () => stop(), className: "hidden w-fit", size: "sm", children: n("Stop") })
       ] }) : null
     ] }),
-    p ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "max-w-full", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "mb-1 flex justify-between break-words rounded border border-blue-500 bg-blue-100 p-1 text-xs text-blue-500", children: [
+    u ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "max-w-full", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "mb-1 flex justify-between break-words rounded border border-blue-500 bg-blue-100 p-1 text-xs text-blue-500", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { children: [
         n("Total tokens used"),
         ": ",
-        p.totalTokens
+        u.totalTokens
       ] }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(Countdown, {})
     ] }) }) : null,
@@ -5852,9 +5852,9 @@ const AskAIStyles = ({ blockId: o }) => {
 });
 function ManualClasses() {
   var T;
-  const { t: o } = useTranslation(), [n] = useSelectedStylingBlocks(), r = useSelectedBlock(), a = useAddClassesToBlocks(), l = useRemoveClassesFromBlocks(), [i] = useSelectedBlockIds(), c = useBuilderProp("askAiCallBack", null), [d, u] = useState(""), { toast: p } = useToast(), x = (T = first(n)) == null ? void 0 : T.prop, m = reject((get(r, x, "").replace(STYLES_KEY, "").split(",").pop() || "").split(" "), isEmpty), g = () => {
+  const { t: o } = useTranslation(), [n] = useSelectedStylingBlocks(), r = useSelectedBlock(), a = useAddClassesToBlocks(), l = useRemoveClassesFromBlocks(), [i] = useSelectedBlockIds(), c = useBuilderProp("askAiCallBack", null), [d, p] = useState(""), { toast: u } = useToast(), x = (T = first(n)) == null ? void 0 : T.prop, m = reject((get(r, x, "").replace(STYLES_KEY, "").split(",").pop() || "").split(" "), isEmpty), g = () => {
     const k = d.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
-    a(i, k, !0), u("");
+    a(i, k, !0), p("");
   }, [b, j] = useState([]), f = ({ value: k }) => {
     const B = k.trim().toLowerCase(), A = B.match(/.+:/g);
     let E = [];
@@ -5879,18 +5879,18 @@ function ManualClasses() {
     onKeyDown: (k) => {
       k.key === "Enter" && d.trim() !== "" && g();
     },
-    onChange: (k, { newValue: B }) => u(B),
+    onChange: (k, { newValue: B }) => p(B),
     className: "w-full rounded-md text-xs px-2 hover:outline-0 bg-background border-border py-1"
   }, R = () => {
     if (navigator.clipboard === void 0) {
-      p({
+      u({
         title: o("Clipboard not supported"),
         description: o("Please use Chrome, Firefox or Safari"),
         variant: "destructive"
       });
       return;
     }
-    navigator.clipboard.writeText(m.join(" ")), p({
+    navigator.clipboard.writeText(m.join(" ")), u({
       title: o("Copied"),
       description: o("Classes copied to clipboard")
     });
@@ -6264,7 +6264,7 @@ const EDITOR_ICONS = {
     DropDown,
     {
       rounded: o,
-      onChange: (u) => r(u, n),
+      onChange: (p) => r(p, n),
       selected: i,
       options: a,
       disabled: !c
@@ -6278,23 +6278,23 @@ function DropDown({ selected: o, onChange: n, rounded: r = !1, options: a, disab
     {
       disabled: !a.length || l,
       className: `${r ? "rounded-md border border-border" : "border-0"} disable:bg-gray-500 h-full w-full truncate rounded bg-background px-2 py-1 text-xs outline-none disabled:cursor-not-allowed`,
-      onChange: (u) => n(u.target.value),
-      onKeyDown: (u) => {
-        u.ctrlKey && (u.key === "z" && c(), u.key === "y" && d());
+      onChange: (p) => n(p.target.value),
+      onKeyDown: (p) => {
+        p.ctrlKey && (p.key === "z" && c(), p.key === "y" && d());
       },
       value: i,
       children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx("option", { className: "bg-transparent", value: "" }),
         React__default.Children.toArray(
-          a.map((u) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { className: "bg-transparent", value: u, children: u }))
+          a.map((p) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { className: "bg-transparent", value: p, children: p }))
         )
       ]
     }
   );
 }
 const RangeChoices = ({ property: o, onChange: n }) => {
-  const { canReset: r, canChange: a } = useContext(StyleContext), l = useCurrentClassByProperty(o), i = useMemo(() => get(l, "cls", ""), [l]), c = useMemo(() => get(CLASSES_LIST, `${o}.classes`, [""]), [o]), d = c.indexOf(i) > -1 ? c.indexOf(i) : 0, u = /\[.*\]/g.test(i);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-row divide-x divide-solid divide-border rounded border border-border text-xs", children: u ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "py-[5px] px-2", children: i }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+  const { canReset: r, canChange: a } = useContext(StyleContext), l = useCurrentClassByProperty(o), i = useMemo(() => get(l, "cls", ""), [l]), c = useMemo(() => get(CLASSES_LIST, `${o}.classes`, [""]), [o]), d = c.indexOf(i) > -1 ? c.indexOf(i) : 0, p = /\[.*\]/g.test(i);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-row divide-x divide-solid divide-border rounded border border-border text-xs", children: p ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "py-[5px] px-2", children: i }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       "button",
       {
@@ -6355,12 +6355,12 @@ const RangeChoices = ({ property: o, onChange: n }) => {
   ringColor: "ring",
   ringOffsetColor: "ring-offset"
 }, ColorChoice = ({ property: o, onChange: n }) => {
-  const r = useCurrentClassByProperty(o), a = useMemo(() => get(r, "cls", ""), [r]), { canChange: l } = useContext(StyleContext), [i, c] = useState([]), [d, u] = useState({ color: "", shade: "" }), p = a.split("-"), x = get(p, "1", ""), m = get(p, "2", ""), g = useCallback(
+  const r = useCurrentClassByProperty(o), a = useMemo(() => get(r, "cls", ""), [r]), { canChange: l } = useContext(StyleContext), [i, c] = useState([]), [d, p] = useState({ color: "", shade: "" }), u = a.split("-"), x = get(u, "1", ""), m = get(u, "2", ""), g = useCallback(
     // eslint-disable-next-line no-shadow
     (j) => {
-      ["current", "inherit", "transparent", "black", "white"].includes(j) ? (c([]), u({ color: j })) : (c(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]), u((f) => ({ ...f, color: j, shade: f.shade ? f.shade : "500" })));
+      ["current", "inherit", "transparent", "black", "white"].includes(j) ? (c([]), p({ color: j })) : (c(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]), p((f) => ({ ...f, color: j, shade: f.shade ? f.shade : "500" })));
     },
-    [c, u]
+    [c, p]
   );
   useEffect(() => {
     if (["current", "inherit", "transparent", "black", "white"].includes(x))
@@ -6370,12 +6370,12 @@ const RangeChoices = ({ property: o, onChange: n }) => {
   const b = useCallback(
     // eslint-disable-next-line no-shadow
     (j) => {
-      u({ color: x, shade: j });
+      p({ color: x, shade: j });
     },
     [x]
   );
   return useEffect(() => {
-    u({ color: "", shade: "" });
+    p({ color: "", shade: "" });
   }, [r]), useEffect(() => {
     const f = `${get(COLOR_PROP, o, "")}-${d.color}${d.shade ? `-${d.shade}` : ""}`;
     f.match(new RegExp(get(CLASSES_LIST, `${o}.regExp`, ""))) && n(f, o);
@@ -6535,18 +6535,18 @@ const RangeChoices = ({ property: o, onChange: n }) => {
     "button",
     {
       type: "button",
-      onMouseDown: (u) => {
-        const p = {
+      onMouseDown: (p) => {
+        const u = {
           onDrag: r,
           onDragEnd: a,
           dragging: !0,
-          dragStartY: u.pageY,
+          dragStartY: p.pageY,
           dragStartValue: `${n}`,
           dragUnit: o,
           negative: i,
           cssProperty: c
         };
-        l(p), d(p);
+        l(u), d(u);
       },
       color: void 0,
       className: "relative z-50 ml-1 hidden h-6 cursor-row-resize rounded bg-background/70 px-2 group-hover:inline",
@@ -6566,18 +6566,18 @@ 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, w] = useState(!1), [I, R] = useState(!1);
+  const [n, r] = useState(!1), [a, l] = useState(""), { currentClass: i, onChange: c, classPrefix: d, cssProperty: p, units: u, negative: x } = o, [m, g] = useState(p != null && p.toLowerCase().includes("width") ? "%" : u[0]), [b, j] = useState(!1), [f, v] = useState(""), [C, w] = useState(!1), [I, R] = useState(!1);
   useEffect(() => {
     const { value: E, unit: _ } = getClassValueAndUnit(i);
     if (_ === "") {
-      l(E), g(u != null && u.toLowerCase().includes("width") ? "%" : first(p));
+      l(E), g(p != null && p.toLowerCase().includes("width") ? "%" : first(u));
       return;
     }
     g(_), l(_ === "class" || isEmpty(E) ? "" : E);
-  }, [i, u, p]);
+  }, [i, p, u]);
   const T = useThrottledCallback((E) => c(E), [c], THROTTLE_TIME), k = useThrottledCallback((E) => c(E, !1), [c], THROTTLE_TIME), B = useCallback(
     (E = !1) => {
-      const _ = getUserInputValues(`${a}`, p);
+      const _ = getUserInputValues(`${a}`, u);
       if (get(_, "error", !1)) {
         j(!0);
         return;
@@ -6592,10 +6592,10 @@ const RangeChoices = ({ property: o, onChange: n }) => {
       const L = `${get(_, "value", "").startsWith("-") ? "-" : ""}${d}[${get(_, "value", "").replace("-", "")}${S === "-" ? "" : S}]`;
       E ? k(L) : T(L);
     },
-    [T, k, a, m, d, p]
+    [T, k, a, m, d, u]
   ), A = useCallback(
     (E) => {
-      const _ = getUserInputValues(`${a}`, p);
+      const _ = getUserInputValues(`${a}`, u);
       if (get(_, "error", !1)) {
         j(!0);
         return;
@@ -6609,7 +6609,7 @@ const RangeChoices = ({ property: o, onChange: n }) => {
       const S = get(_, "unit") !== "" ? get(_, "unit") : E, L = `${get(_, "value", "").startsWith("-") ? "-" : ""}${d}[${get(_, "value", "").replace("-", "")}${S === "-" ? "" : S}]`;
       T(L);
     },
-    [T, a, d, p]
+    [T, a, d, u]
   );
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex w-full flex-col", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center justify-start", children: m === "class" ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("input", { className: "w-20 rounded py-1", readOnly: !0, value: i }),
@@ -6662,15 +6662,15 @@ const RangeChoices = ({ property: o, onChange: n }) => {
             onClick: () => r(!n),
             className: "flex h-6 cursor-pointer items-center gap-x-1 rounded rounded-l-none bg-background p-px px-1 text-[11px] uppercase",
             children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `inline-block ${p.length === 1 ? "px-2 font-semibold" : ""}`, children: m }),
-              p.length > 1 ? /* @__PURE__ */ jsxRuntimeExports.jsx(TriangleDownIcon, {}) : null
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `inline-block ${u.length === 1 ? "px-2 font-semibold" : ""}`, children: m }),
+              u.length > 1 ? /* @__PURE__ */ jsxRuntimeExports.jsx(TriangleDownIcon, {}) : null
             ]
           }
         ) }),
         /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipPortal, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { className: "bg-background", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           UnitSelection,
           {
-            units: p,
+            units: u,
             current: m,
             onSelect: (E) => {
               r(!1), g(E), A(E);
@@ -6699,7 +6699,7 @@ const RangeChoices = ({ property: o, onChange: n }) => {
         currentValue: a,
         unit: m,
         negative: x,
-        cssProperty: u
+        cssProperty: p
       }
     )
   ] }) }) });
@@ -6791,14 +6791,14 @@ const RangeChoices = ({ property: o, onChange: n }) => {
   "2xl": "1536px"
 }, getBreakpoint = (o) => `${o.toUpperCase()} ${BREAKPOINTS[o] ? `(${BREAKPOINTS[o]} & up)` : ""}`, BlockStyle = (o) => {
   const { t: n } = useTranslation(), { type: r = "icons", label: a, property: l, onEmitChange: i = () => {
-  }, units: c, negative: d = !1 } = o, [u] = useDarkMode(), [p] = useStylingState(), [, x] = useCanvasWidth(), m = useCurrentClassByProperty(l), g = useAddClassesToBlocks(), b = useRemoveClassesFromBlocks(), [j] = useSelectedBlockIds(), f = useMemo(() => get(m, "fullCls", ""), [m]), v = useCallback(
+  }, units: c, negative: d = !1 } = o, [p] = useDarkMode(), [u] = useStylingState(), [, x] = useCanvasWidth(), m = useCurrentClassByProperty(l), g = useAddClassesToBlocks(), b = useRemoveClassesFromBlocks(), [j] = useSelectedBlockIds(), f = useMemo(() => get(m, "fullCls", ""), [m]), v = useCallback(
     (k, B = !0) => {
-      const A = { dark: u, mq: x, mod: p, cls: k, property: l, fullCls: "" };
-      (u || p !== "") && (A.mq = "xs");
+      const A = { dark: p, mq: x, mod: u, cls: k, property: l, fullCls: "" };
+      (p || u !== "") && (A.mq = "xs");
       const E = generateFullClsName(A);
       g(j, [E], B);
     },
-    [j, u, x, p, l, g]
+    [j, p, x, u, l, g]
   ), C = useCallback(() => {
     b(j, [f]);
   }, [j, f, b]), w = useMemo(() => canChangeClass(m, x), [m, x]);
@@ -6817,7 +6817,7 @@ const RangeChoices = ({ property: o, onChange: n }) => {
       }[k]);
     },
     [I]
-  ), T = get(m, "dark", null) === u && get(m, "mod", null) === p && get(m, "mq", null) === x;
+  ), T = get(m, "dark", null) === p && get(m, "mod", null) === u && get(m, "mq", null) === x;
   return /* @__PURE__ */ jsxRuntimeExports.jsx(BlockStyleProvider, { canChange: w, 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: [
@@ -6851,7 +6851,7 @@ const RangeChoices = ({ property: o, onChange: n }) => {
           "Current style is set at  ",
           /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-bold", children: [
             getBreakpoint(get(m, "mq")),
-            u && !m.dark ? "(Light mode)" : ""
+            p && !m.dark ? "(Light mode)" : ""
           ] }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
           /* @__PURE__ */ jsxRuntimeExports.jsxs(
@@ -6879,7 +6879,7 @@ const RangeChoices = ({ property: o, onChange: n }) => {
   units: i = basicUnits,
   negative: c = !1
 }) => {
-  const { t: d } = useTranslation(), [u, p] = useState(n[0].key), x = useSelectedBlockCurrentClasses(), m = useCallback((g) => map(x, "property").includes(g), [x]);
+  const { t: d } = useTranslation(), [p, u] = useState(n[0].key), x = useSelectedBlockCurrentClasses(), m = useCallback((g) => map(x, "property").includes(g), [x]);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
@@ -6893,8 +6893,8 @@ const RangeChoices = ({ property: o, onChange: n }) => {
                 "button",
                 {
                   type: "button",
-                  onClick: () => p(b),
-                  className: `relative cursor-pointer rounded-full p-1 text-[8px] ${b === u ? "bg-[#3E57F0] text-white" : "text-gray-600 dark:text-gray-300"}`,
+                  onClick: () => u(b),
+                  className: `relative cursor-pointer rounded-full p-1 text-[8px] ${b === p ? "bg-[#3E57F0] text-white" : "text-gray-600 dark:text-gray-300"}`,
                   children: [
                     React__default.createElement("div", {
                       className: m(b) ? "-bottom-1.5 absolute bg-[#3E57F0] h-[2px] left-0 w-full" : ""
@@ -6913,7 +6913,7 @@ const RangeChoices = ({ property: o, onChange: n }) => {
             type: l,
             units: [...i],
             label: "",
-            property: u,
+            property: p,
             negative: c
           }
         ) })
@@ -6922,10 +6922,10 @@ const RangeChoices = ({ property: o, onChange: n }) => {
   );
 }, NestedOptions = ({ heading: o, items: n }) => {
   const { t: r } = useTranslation(), a = useSelectedBlockCurrentClasses(), l = useMemo(() => {
-    const i = (u) => flatten(
-      u.map((p) => p.styleType === "multiple" ? map(p.options, "key") : p.property)
+    const i = (p) => flatten(
+      p.map((u) => u.styleType === "multiple" ? map(u.options, "key") : u.property)
     ), c = flatten(
-      n.map((u) => u.styleType === "accordion" ? i(u.items) : u.styleType === "multiple" ? map(u.options, "key") : u.property)
+      n.map((p) => p.styleType === "accordion" ? i(p.items) : p.styleType === "multiple" ? map(p.options, "key") : p.property)
     ), d = map(a, "property");
     return intersection(c, d).length > 0;
   }, [a, n]);
@@ -6945,11 +6945,11 @@ const RangeChoices = ({ property: o, onChange: n }) => {
   const { t: n } = useTranslation(), r = useSelectedBlockCurrentClasses(), a = useCallback(
     (i = []) => {
       const c = {};
-      for (let u = 0; u < r.length; u++)
-        c[r[u].property] = r[u].cls;
+      for (let p = 0; p < r.length; p++)
+        c[r[p].property] = r[p].cls;
       let d = !0;
-      for (const u in i)
-        if (!has(c, u) || c[u] !== i[u]) {
+      for (const p in i)
+        if (!has(c, p) || c[p] !== i[p]) {
           d = !1;
           break;
         }
@@ -6967,8 +6967,8 @@ const RangeChoices = ({ property: o, onChange: n }) => {
   const o = useSelectedBlock(), [n] = useSelectedStylingBlocks(), { t: r } = useTranslation(), a = useGlobalStylingPresets(), l = useAddClassesToBlocks(), i = getBlockComponent(o._type), c = get(first(n), "prop"), d = get(i.props, `${c}.presets`, {});
   if (isEmpty(a) && (!has(i, "props") || isEmpty(d)))
     return null;
-  const u = (p) => {
-    const x = p.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
+  const p = (u) => {
+    const x = u.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
     l([o._id], x, !0);
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-10", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(DropdownMenu, { children: [
@@ -6984,16 +6984,16 @@ const RangeChoices = ({ property: o, onChange: n }) => {
           r("presets")
         ] }),
         /* @__PURE__ */ jsxRuntimeExports.jsx(DropdownMenuSeparator, {}),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(DropdownMenuGroup, { children: keys(d).map((p) => /* @__PURE__ */ jsxRuntimeExports.jsxs(DropdownMenuItem, { className: "group text-xs", onClick: () => u(d[p]), children: [
-          capitalize(startCase(r(p))),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(DropdownMenuGroup, { children: keys(d).map((u) => /* @__PURE__ */ jsxRuntimeExports.jsxs(DropdownMenuItem, { className: "group text-xs", onClick: () => p(d[u]), children: [
+          capitalize(startCase(r(u))),
           /* @__PURE__ */ jsxRuntimeExports.jsx(DropdownMenuShortcut, { className: "invisible hover:font-bold hover:text-blue-600 group-hover:visible", children: r("apply") })
         ] })) })
       ] }),
       isEmpty(a) ? null : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(DropdownMenuLabel, { children: r("Global presets") }),
         /* @__PURE__ */ jsxRuntimeExports.jsx(DropdownMenuSeparator, {}),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(DropdownMenuGroup, { children: keys(a).map((p) => /* @__PURE__ */ jsxRuntimeExports.jsxs(DropdownMenuItem, { className: "group text-xs", onClick: () => u(a[p]), children: [
-          capitalize(startCase(r(p))),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(DropdownMenuGroup, { children: keys(a).map((u) => /* @__PURE__ */ jsxRuntimeExports.jsxs(DropdownMenuItem, { className: "group text-xs", onClick: () => p(a[u]), children: [
+          capitalize(startCase(r(u))),
           /* @__PURE__ */ jsxRuntimeExports.jsx(DropdownMenuShortcut, { className: "invisible hover:font-bold hover:text-blue-600 group-hover:visible", children: r("apply") })
         ] })) })
       ] })
@@ -7013,8 +7013,8 @@ const RangeChoices = ({ property: o, onChange: n }) => {
 };
 function BlockStyling() {
   const { flexChild: o, gridChild: n } = useSelectedBlocksDisplayChild(), [r] = useSelectedStylingBlocks(), [a, l] = React__default.useState(""), [i, c] = React__default.useState({
-    onDrag: (p) => p,
-    onDragEnd: (p) => p,
+    onDrag: (u) => u,
+    onDragEnd: (u) => u,
     dragStartY: 0,
     dragging: !1,
     dragStartValue: 0,
@@ -7022,21 +7022,21 @@ function BlockStyling() {
     negative: !1,
     cssProperty: ""
   }), d = useThrottledCallback(
-    (p) => {
+    (u) => {
       const x = !get(i, "negative", !1), m = get(i, "cssProperty", "");
       let g = parseFloat(i.dragStartValue);
       g = isNaN(g) ? 0 : g;
       let b = MAPPER[i.dragUnit];
       (startsWith(m, "scale") || m === "opacity") && (b = 10);
-      let f = (i.dragStartY - p.pageY) / b + g;
+      let f = (i.dragStartY - u.pageY) / b + g;
       x && f < 0 && (f = 0), m === "opacity" && f > 1 && (f = 1), i.onDrag(`${f}`), l(`${f}`);
     },
     [i],
     50
-  ), u = useCallback(() => {
+  ), p = useCallback(() => {
     setTimeout(() => i.onDragEnd(`${a}`), 100), c({
-      onDrag: (p) => p,
-      onDragEnd: (p) => p,
+      onDrag: (u) => u,
+      onDragEnd: (u) => u,
       dragStartY: 0,
       dragging: !1,
       dragStartValue: 0,
@@ -7050,7 +7050,7 @@ function BlockStyling() {
       "div",
       {
         onMouseMove: d,
-        onMouseUp: () => u(),
+        onMouseUp: () => p(),
         className: "absolute inset-0 z-30 cursor-row-resize bg-gray-300/10"
       }
     ) : null,
@@ -7059,7 +7059,7 @@ function BlockStyling() {
       /* @__PURE__ */ jsxRuntimeExports.jsxs(Accordion, { defaultValue: ["Styles"], type: "multiple", className: "w-full", children: [
         o && /* @__PURE__ */ jsxRuntimeExports.jsx(StylingGroup, { section: FLEX_CHILD_SECTION }),
         n ? /* @__PURE__ */ jsxRuntimeExports.jsx(StylingGroup, { section: GRID_CHILD_SECTION }) : null,
-        SETTINGS_SECTIONS.map((p) => /* @__PURE__ */ jsxRuntimeExports.jsx(StylingGroup, { section: p }, p.heading))
+        SETTINGS_SECTIONS.map((u) => /* @__PURE__ */ jsxRuntimeExports.jsx(StylingGroup, { section: u }, u.heading))
       ] })
     ] })
   ] });
@@ -7071,9 +7071,9 @@ const ChaiSelect = ({
   placeholder: a = "Select",
   className: l = ""
 }) => {
-  const [i, c] = useState(o), d = (u) => {
-    const p = u.target.value;
-    c(p), n(p);
+  const [i, c] = useState(o), d = (p) => {
+    const u = p.target.value;
+    c(u), n(u);
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: cn("relative inline-block w-full", l), children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "select",
@@ -7083,7 +7083,7 @@ const ChaiSelect = ({
       onChange: d,
       children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "", disabled: !0, children: a }),
-        r.map((u) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: u.value, children: u.label }, u.value))
+        r.map((p) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: p.value, children: p.label }, p.value))
       ]
     }
   ) });
@@ -7115,7 +7115,7 @@ const BlockCard = ({
   library: n,
   parentId: r = void 0
 }) => {
-  const [a, l] = useState(!1), i = useBuilderProp("getUILibraryBlock", noop), { addCoreBlock: c, addPredefinedBlock: d } = useAddBlock(), [, u] = useSelectedBlockIds(), { clearHighlight: p } = useBlockHighlight(), x = get(o, "name", get(o, "label")), [, m] = useAtom$1(draggedBlockAtom), g = (f) => {
+  const [a, l] = useState(!1), i = useBuilderProp("getUILibraryBlock", noop), { addCoreBlock: c, addPredefinedBlock: d } = useAddBlock(), [, p] = useSelectedBlockIds(), { clearHighlight: u } = useBlockHighlight(), x = get(o, "name", get(o, "label")), [, m] = useAtom$1(draggedBlockAtom), g = (f) => {
     const v = has(f, "styles_attrs.data-page-section");
     return f._type === "Box" && v;
   }, b = useCallback(
@@ -7142,7 +7142,7 @@ const BlockCard = ({
       } else
         f.dataTransfer.setDragImage(new Image(), 0, 0);
       m(w), emitChaiBuilderMsg({ name: CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK }), setTimeout(() => {
-        u([]), p();
+        p([]), u();
       }, 200);
     }
   };
@@ -7175,18 +7175,18 @@ const BlockCard = ({
   return useEffect(() => {
     (async () => {
       if (i === "complete" || c.current === "loading") return;
-      c.current = "loading", r((u) => ({ ...u, [o == null ? void 0 : o.uuid]: { loading: "loading", blocks: [] } }));
+      c.current = "loading", r((p) => ({ ...p, [o == null ? void 0 : o.uuid]: { loading: "loading", blocks: [] } }));
       const d = await a(o);
-      c.current = "idle", r((u) => ({ ...u, [o == null ? void 0 : o.uuid]: { loading: "complete", blocks: d || [] } }));
+      c.current = "idle", r((p) => ({ ...p, [o == null ? void 0 : o.uuid]: { loading: "complete", blocks: d || [] } }));
     })();
   }, [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((w) => w.category === "custom"), c = a.find((w) => w.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 = (w) => {
+  const [n, r] = useAtom$1(selectedLibraryAtom), a = useBuilderProp("uiLibraries", []), l = useChaiBlocks(), i = values(l).filter((w) => w.category === "custom"), c = a.find((w) => w.uuid === n) || first(a), { data: d, isLoading: p } = useLibraryBlocks(c), u = groupBy([...d, ...i], "group"), [x, m] = useState("Hero"), g = get(u, x, []), b = useRef(null), { t: j } = useTranslation(), f = (w) => {
     b.current && (clearTimeout(b.current), b.current = null), b.current = setTimeout(() => {
       b.current && m(w);
     }, 300);
   };
-  if (u)
+  if (p)
     return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-4 grid h-full w-full grid-cols-12 gap-2", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "col-span-3 h-full" }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "col-span-9 h-full" })
@@ -7199,7 +7199,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, (w, I) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          map(u, (w, I) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
             "div",
             {
               onMouseEnter: () => f(I),
@@ -7734,16 +7734,16 @@ i18n.use(initReactI18next).init({
   }
 });
 const CoreBlock = ({ block: o, disabled: n, parentId: r }) => {
-  const [, a] = useAtom$1(draggedBlockAtom), { type: l, icon: i, label: c } = o, { addCoreBlock: d, addPredefinedBlock: u } = useAddBlock(), [, p] = useSelectedBlockIds(), { clearHighlight: x } = useBlockHighlight(), m = () => {
+  const [, a] = useAtom$1(draggedBlockAtom), { type: l, icon: i, label: c } = o, { addCoreBlock: d, addPredefinedBlock: p } = useAddBlock(), [, u] = useSelectedBlockIds(), { clearHighlight: x } = useBlockHighlight(), m = () => {
     if (has(o, "blocks")) {
       const j = isFunction$1(o.blocks) ? o.blocks() : o.blocks;
-      u(syncBlocksWithDefaults(j), r || null);
+      p(syncBlocksWithDefaults(j), r || null);
     } else
       d(o, r || null);
     emitChaiBuilderMsg({ name: CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK });
   }, { t: g } = useTranslation(), b = (j) => {
     j.dataTransfer.setData("text/plain", JSON.stringify(omit(o, ["component", "icon"]))), a(omit(o, ["component", "icon"])), emitChaiBuilderMsg({ name: CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK }), setTimeout(() => {
-      p([]), x();
+      u([]), x();
     }, 200);
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
@@ -7769,23 +7769,23 @@ const CoreBlock = ({ block: o, disabled: n, parentId: r }) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(ChaiBuilderBlocks, { gridCols: n, parentId: o, groups: c, blocks: i.core });
 }, CORE_GROUPS = ["basic", "typography", "media", "layout", "form", "advanced", "other"], ChaiBuilderBlocks = ({ groups: o, blocks: n, parentId: r, gridCols: a = "grid-cols-4" }) => {
   var d;
-  const { t: l } = useTranslation(), [i] = useBlocksStore(), c = (d = find(i, (u) => u._id === r)) == null ? void 0 : d._type;
+  const { t: l } = useTranslation(), [i] = useBlocksStore(), c = (d = find(i, (p) => p._id === r)) == null ? void 0 : d._type;
   return React__default.Children.toArray(
     map(
-      sortBy(o, (u) => CORE_GROUPS.indexOf(u) === -1 ? 99 : CORE_GROUPS.indexOf(u)),
-      (u) => reject(filter(values(n), { group: u }), { hidden: !0 }).length ? /* @__PURE__ */ jsxRuntimeExports.jsx(Accordion, { type: "single", value: u, collapsible: !0, className: "w-full", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(AccordionItem, { value: u, className: "border-border", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(AccordionTrigger, { className: "rounded-md bg-background px-4 py-2 capitalize text-foreground hover:no-underline", children: capitalize(l(u.toLowerCase())) }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(AccordionContent, { className: "mx-auto max-w-xl p-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid gap-2 " + a, children: React__default.Children.toArray(
-          reject(filter(values(n), { group: u }), { hidden: !0 }).map((p) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+      sortBy(o, (p) => CORE_GROUPS.indexOf(p) === -1 ? 99 : CORE_GROUPS.indexOf(p)),
+      (p) => reject(filter(values(n), { group: p }), { hidden: !0 }).length ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "border-border", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "rounded-md bg-background px-4 py-2 capitalize text-foreground hover:no-underline font-semibold", children: capitalize(l(p.toLowerCase())) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mx-auto max-w-xl p-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid gap-2 " + a, children: React__default.Children.toArray(
+          reject(filter(values(n), { group: p }), { hidden: !0 }).map((u) => /* @__PURE__ */ jsxRuntimeExports.jsx(
             CoreBlock,
             {
               parentId: r,
-              block: p,
-              disabled: !canAcceptChildBlock(c, p.type) || !canBeNestedInside(c, p.type)
+              block: u,
+              disabled: !canAcceptChildBlock(c, u.type) || !canBeNestedInside(c, u.type)
             }
           ))
         ) }) })
-      ] }) }) : null
+      ] }, p) : null
     )
   );
 }, addBlockTabAtom = atomWithStorage("__add_block_tab", "library"), AddBlocksPanel = ({
@@ -7802,8 +7802,8 @@ const CoreBlock = ({ block: o, disabled: n, parentId: r }) => {
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       Tabs,
       {
-        onValueChange: (u) => {
-          c(""), i(u);
+        onValueChange: (p) => {
+          c(""), i(p);
         },
         value: l,
         className: cn("h-max"),
@@ -7819,21 +7819,27 @@ const CoreBlock = ({ block: o, disabled: n, parentId: r }) => {
     l === "html" && d ? /* @__PURE__ */ jsxRuntimeExports.jsx(ImportHTML, { parentId: r }) : null
   ] });
 }, ChaiDraggableBlock = ({ block: o, html: n, blocks: r, children: a }) => {
-  const [, l] = useAtom$1(draggedBlockAtom), [, i] = useSelectedBlockIds(), { clearHighlight: c } = useBlockHighlight(), d = async (u) => {
-    if (isEmpty(n) && isEmpty(o) && isEmpty(r))
-      return;
-    let p = null;
-    if (Array.isArray(r) || !isEmpty(n)) {
-      if (p = isEmpty(n) ? r : getBlocksFromHTML(n), isEmpty(p)) return;
-      p = {
-        uiLibrary: !0,
-        blocks: p,
-        parent: get(p, "0._parent", null) || null
-      };
-    } else isObject$1(o) && (p = omit(o, ["component", "icon"]));
-    p && (u.dataTransfer.setData("text/plain", JSON.stringify(p)), l(p), emitChaiBuilderMsg({ name: CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK }), setTimeout(() => {
-      i([]), c();
-    }, 200));
+  const [, l] = useAtom$1(draggedBlockAtom), [, i] = useSelectedBlockIds(), { clearHighlight: c } = useBlockHighlight(), d = async (p) => {
+    try {
+      if (isEmpty(n) && isEmpty(o) && isEmpty(r))
+        return;
+      let u = null;
+      const x = typeof n == "function" ? (await n()).html : n, m = typeof r == "function" ? (await r()).blocks : r;
+      if (Array.isArray(m) || !isEmpty(x)) {
+        if (u = isEmpty(x) ? m : getBlocksFromHTML(x), isEmpty(u)) return;
+        u = {
+          uiLibrary: !0,
+          blocks: u,
+          parent: get(u, "0._parent", null) || null
+        };
+      } else isObject$1(o) && (u = omit(o, ["component", "icon"]));
+      if (!u) return;
+      p.dataTransfer.setData("text/plain", JSON.stringify(u)), l(u), emitChaiBuilderMsg({ name: CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK }), setTimeout(() => {
+        i([]), c();
+      }, 200);
+    } catch (u) {
+      console.error("Error in drag start:", u);
+    }
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { draggable: !0, onDragStart: d, className: "cursor-grab", children: a });
 }, AddBlocksDialog = () => {
@@ -8106,7 +8112,7 @@ function QuickPrompts({ onClick: o }) {
     icon: FaLanguage$1,
     prompt: `Translate the content to ${get(LANGUAGES, a, a)}. Maintain same tone, style and length.`
   }), /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: n ? "pointer-events-none opacity-50" : "", children: /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: "space-y-2", children: i.map(
-    ({ name: c, icon: d, subMenus: u, prompt: p }) => u ? /* @__PURE__ */ jsxRuntimeExports.jsxs(Popover, { children: [
+    ({ name: c, icon: d, subMenus: p, prompt: u }) => p ? /* @__PURE__ */ jsxRuntimeExports.jsxs(Popover, { children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(PopoverTrigger, { asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
         "li",
         {
@@ -8122,7 +8128,7 @@ function QuickPrompts({ onClick: o }) {
     ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "li",
       {
-        onClick: () => o(p),
+        onClick: () => o(u),
         className: "flex cursor-pointer items-center space-x-2 rounded p-1 text-sm hover:bg-gray-100 dark:hover:bg-gray-800",
         children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(d, { className: "h-4 w-4" }),
@@ -8134,7 +8140,7 @@ function QuickPrompts({ onClick: o }) {
   ) }) });
 }
 const AIUserPrompt = ({ blockId: o }) => {
-  const { t: n } = useTranslation(), { askAi: r, loading: a, error: l } = useAskAi(), [i, c] = useState(""), [d, u] = useState(!0), [p, x] = useState(), m = useRef(null), g = useRef(null);
+  const { t: n } = useTranslation(), { askAi: r, loading: a, error: l } = useAskAi(), [i, c] = useState(""), [d, p] = useState(!0), [u, x] = useState(), m = useRef(null), g = useRef(null);
   useEffect(() => {
     var j;
     (j = m.current) == null || j.focus();
@@ -8147,7 +8153,7 @@ const AIUserPrompt = ({ blockId: o }) => {
     /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "div",
       {
-        onClick: () => u(!d),
+        onClick: () => p(!d),
         className: "flex cursor-pointer items-center justify-between border-b border-border py-2 text-sm font-bold text-muted-foreground hover:underline",
         children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: n("Ask AI") }),
@@ -8195,11 +8201,11 @@ const AIUserPrompt = ({ blockId: o }) => {
           /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { variant: "destructive", onClick: () => stop(), className: "hidden w-fit", size: "sm", children: n("Stop") })
         ] }) : null
       ] }),
-      p ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "max-w-full", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "mb-1 flex justify-between break-words rounded border border-blue-500 bg-blue-100 p-1 text-xs text-blue-500", children: [
+      u ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "max-w-full", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "mb-1 flex justify-between break-words rounded border border-blue-500 bg-blue-100 p-1 text-xs text-blue-500", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { children: [
           n("Total tokens used"),
           ": ",
-          p.totalTokens
+          u.totalTokens
         ] }),
         /* @__PURE__ */ jsxRuntimeExports.jsx(Countdown, {})
       ] }) }) : null,
@@ -8219,19 +8225,19 @@ const AIUserPrompt = ({ blockId: o }) => {
     ] }) }) : null
   ] });
 }, AISetContext = () => {
-  const { t: o } = useTranslation(), n = useBuilderProp("aiContext", ""), [r, a] = useState(n), l = useRef(null), i = useBuilderProp("saveAiContextCallback", noop), [c, d] = useState(!1), [u, p] = useState(null), [, x] = useState(!1), { toast: m } = useToast(), g = useRef(null);
+  const { t: o } = useTranslation(), n = useBuilderProp("aiContext", ""), [r, a] = useState(n), l = useRef(null), i = useBuilderProp("saveAiContextCallback", noop), [c, d] = useState(!1), [p, u] = useState(null), [, x] = useState(!1), { toast: m } = useToast(), g = useRef(null);
   useEffect(() => {
     n && a(n);
   }, [n]);
   const b = async () => {
     try {
-      d(!0), p(null), await i(r), m({
+      d(!0), u(null), await i(r), m({
         title: o("Updated AI Context"),
         description: o("You can now Ask AI to edit your content"),
         variant: "default"
       }), g.current.click();
     } catch (j) {
-      p(j);
+      u(j);
     } finally {
       d(!1);
     }
@@ -8307,7 +8313,7 @@ const AIUserPrompt = ({ blockId: o }) => {
               ] })
             ] }) : null
           ] }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-2 max-w-full", children: u && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "break-words rounded border border-red-500 bg-red-100 p-1 text-xs text-red-500", children: u.message }) })
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-2 max-w-full", children: p && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "break-words rounded border border-red-500 bg-red-100 p-1 text-xs text-red-500", children: p.message }) })
         ] })
       ] })
     }
@@ -8319,7 +8325,7 @@ const AIUserPrompt = ({ blockId: o }) => {
     /* @__PURE__ */ jsxRuntimeExports.jsx(AIUserPrompt, { blockId: first(o) })
   ] });
 }, AttrsEditor = React__default.memo(function o({ preloadedAttributes: n = [], onAttributesChange: r }) {
-  const [a, l] = useState([]), [i, c] = useState(""), [d, u] = useState(""), [p, x] = useState(null), [m, g] = useState(""), b = useRef(null), j = useRef(null);
+  const [a, l] = useState([]), [i, c] = useState(""), [d, p] = useState(""), [u, x] = useState(null), [m, g] = useState(""), b = useRef(null), j = useRef(null);
   useEffect(() => {
     l(n);
   }, [n]);
@@ -8330,31 +8336,31 @@ const AIUserPrompt = ({ blockId: o }) => {
     }
     if (i) {
       const R = [...a, { key: i, value: d }];
-      r(R), l(a), c(""), u(""), g("");
+      r(R), l(a), c(""), p(""), g("");
     }
   }, v = (R) => {
     const T = a.filter((k, B) => B !== R);
     r(T), l(T);
   }, C = (R) => {
-    x(R), c(a[R].key), u(a[R].value);
+    x(R), c(a[R].key), p(a[R].value);
   }, w = () => {
     if (i.startsWith("@")) {
       g("Attribute keys cannot start with '@'");
       return;
     }
-    if (p !== null && i) {
+    if (u !== null && i) {
       const R = [...a];
-      R[p] = { key: i, value: d }, r(R), l(R), x(null), c(""), u(""), g("");
+      R[u] = { key: i, value: d }, r(R), l(R), x(null), c(""), p(""), g("");
     }
   }, I = (R) => {
-    R.key === "Enter" && !R.shiftKey && (R.preventDefault(), p !== null ? w() : f());
+    R.key === "Enter" && !R.shiftKey && (R.preventDefault(), u !== null ? w() : f());
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "max-w-full", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "form",
       {
         onSubmit: (R) => {
-          R.preventDefault(), p !== null ? w() : f();
+          R.preventDefault(), u !== null ? w() : f();
         },
         className: "space-y-3",
         children: [
@@ -8388,7 +8394,7 @@ const AIUserPrompt = ({ blockId: o }) => {
                   rows: 2,
                   ref: j,
                   value: d,
-                  onChange: (R) => u(R.target.value),
+                  onChange: (R) => p(R.target.value),
                   onKeyDown: I,
                   placeholder: "Value",
                   className: "bg-background text-sm"
@@ -8396,7 +8402,7 @@ const AIUserPrompt = ({ blockId: o }) => {
               )
             ] })
           ] }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { type: "submit", variant: "secondary", className: "h-8 w-fit text-sm", children: p !== null ? "Save" : "Add" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { type: "submit", variant: "secondary", className: "h-8 w-fit text-sm", children: u !== null ? "Save" : "Add" }),
           m && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-red-500", children: m })
         ]
       }
@@ -8421,15 +8427,15 @@ const AIUserPrompt = ({ blockId: o }) => {
 }), BlockAttributesEditor = React.memo(() => {
   const o = useSelectedBlock(), [n, r] = useState([]), [a] = useSelectedStylingBlocks(), l = useUpdateBlocksProps(), i = `${get(a, "0.prop")}_attrs`;
   React.useEffect(() => {
-    const d = map(get(o, i), (u, p) => ({ key: p, value: u }));
+    const d = map(get(o, i), (p, u) => ({ key: u, value: p }));
     isEmpty(d) ? r([]) : r(d);
   }, [get(o, i)]);
   const c = React.useCallback(
     (d = []) => {
-      const u = {};
-      forEach(d, (p) => {
-        isEmpty(p.key) || set(u, p.key, p.value);
-      }), l([get(o, "_id")], { [i]: u });
+      const p = {};
+      forEach(d, (u) => {
+        isEmpty(u.key) || set(p, u.key, u.value);
+      }), l([get(o, "_id")], { [i]: p });
     },
     [o, l, i]
   );
@@ -8535,11 +8541,11 @@ const TabletIcon = ({ landscape: o = !1 }) => /* @__PURE__ */ jsxRuntimeExports.
   icon: i,
   onClick: c,
   iconContainerClasses: d,
-  iconSelectedClasses: u
+  iconSelectedClasses: p
 }) => {
-  const { t: p } = useTranslation();
+  const { t: u } = useTranslation();
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(HoverCard, { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(HoverCardTrigger, { className: cn(d, u && a === r ? u : ""), asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    /* @__PURE__ */ jsxRuntimeExports.jsx(HoverCardTrigger, { className: cn(d, p && a === r ? p : ""), asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
       Button,
       {
         onClick: () => c(l),
@@ -8549,8 +8555,8 @@ const TabletIcon = ({ landscape: o = !1 }) => /* @__PURE__ */ jsxRuntimeExports.
       }
     ) }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(HoverCardContent, { className: "w-52 border-border", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-between space-x-4", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-1", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("h4", { className: "text-sm font-semibold", children: p(o) }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs", children: p(n) })
+      /* @__PURE__ */ jsxRuntimeExports.jsx("h4", { className: "text-sm font-semibold", children: u(o) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs", children: u(n) })
     ] }) }) })
   ] });
 }, Breakpoints = ({
@@ -8558,12 +8564,12 @@ const TabletIcon = ({ landscape: o = !1 }) => /* @__PURE__ */ jsxRuntimeExports.
   iconContainerClasses: n,
   iconSelectedClasses: r
 }) => {
-  const [, a, l] = useCanvasWidth(), [i, c] = useSelectedBreakpoints(), { t: d } = useTranslation(), u = useBuilderProp("breakpoints", WEB_BREAKPOINTS), p = (x) => {
+  const [, a, l] = useCanvasWidth(), [i, c] = useSelectedBreakpoints(), { t: d } = useTranslation(), p = useBuilderProp("breakpoints", WEB_BREAKPOINTS), u = (x) => {
     i.includes(x) ? i.length > 2 && c(i.filter((m) => m !== x)) : c((m) => [...m, x]);
   };
-  return u.length < 4 ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: cn("flex items-center rounded-md", o), children: map(u, (x) => /* @__PURE__ */ createElement(BreakpointCard, { iconSelectedClasses: r, iconContainerClasses: n, ...x, onClick: l, key: x.breakpoint, currentBreakpoint: a })) }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cn("flex items-center rounded-md", o), children: [
+  return p.length < 4 ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: cn("flex items-center rounded-md", o), children: map(p, (x) => /* @__PURE__ */ createElement(BreakpointCard, { iconSelectedClasses: r, iconContainerClasses: n, ...x, onClick: l, key: x.breakpoint, currentBreakpoint: a })) }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cn("flex items-center rounded-md", o), children: [
     map(
-      u.filter((x) => includes(i, toUpper(x.breakpoint))),
+      p.filter((x) => includes(i, toUpper(x.breakpoint))),
       (x) => /* @__PURE__ */ createElement(BreakpointCard, { iconSelectedClasses: r, iconContainerClasses: n, ...x, onClick: l, key: x.breakpoint, currentBreakpoint: a })
     ),
     /* @__PURE__ */ jsxRuntimeExports.jsxs(DropdownMenu, { children: [
@@ -8571,11 +8577,11 @@ const TabletIcon = ({ landscape: o = !1 }) => /* @__PURE__ */ jsxRuntimeExports.
       /* @__PURE__ */ jsxRuntimeExports.jsxs(DropdownMenuContent, { className: "w-56 border-border text-xs", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(DropdownMenuLabel, { children: d("Breakpoints") }),
         /* @__PURE__ */ jsxRuntimeExports.jsx(DropdownMenuSeparator, {}),
-        map(u, (x) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+        map(p, (x) => /* @__PURE__ */ jsxRuntimeExports.jsx(
           DropdownMenuCheckboxItem,
           {
             disabled: x.breakpoint === "xs",
-            onCheckedChange: () => p(toUpper(x.breakpoint)),
+            onCheckedChange: () => u(toUpper(x.breakpoint)),
             checked: includes(i, toUpper(x.breakpoint)),
             children: d(x.title)
           },
@@ -8838,12 +8844,12 @@ function RemoveProviderConfirmation({
 const PageDataProviders = () => {
   const { t: o } = useTranslation(), n = useMemo(() => getChaiDataProviders(), []), [r, a] = usePageDataProviders(), [, l] = useAtom$1(builderSaveStateAtom), [i, c] = useState(
     filter(n, (f) => map(r, "providerKey").includes(f.providerKey))
-  ), [d, u] = useState(""), [p, x] = useState(null), m = filter(
+  ), [d, p] = useState(""), [u, x] = useState(null), m = filter(
     n.map((f) => map(i, "providerKey").includes(f.providerKey) ? null : { value: f.providerKey, label: f.name }),
     (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((C) => [...C, v]), a((C) => [...C, { providerKey: v.providerKey, args: {} }]), p(""), l("UNSAVED");
   }, b = (f) => {
     c((v) => filter(v, (C) => C.providerKey !== f.providerKey)), a((v) => filter(v, (C) => C.providerKey !== f.providerKey)), l("UNSAVED");
   }, j = (f) => x(f);
@@ -8935,14 +8941,14 @@ const PageDataProviders = () => {
         },
         f.providerKey
       )) }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(ViewProviderData, { onClose: () => x(null), provider: p })
+      /* @__PURE__ */ jsxRuntimeExports.jsx(ViewProviderData, { onClose: () => x(null), provider: u })
     ] })
   ] });
 };
 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-tRFEAMbG.js"));
+const TopBar = lazy(() => import("./Topbar-Cc5SldaT.js"));
 function useSidebarMenuItems(o) {
   const n = o === "SINGLE_SIDE_PANEL", { t: r } = useTranslation(), a = useBuilderProp("dataBindingSupport", !1), l = useBuilderProp("askAiCallBack", null);
   return useMemo(() => {
@@ -8976,7 +8982,7 @@ const RootLayout = () => {
     g.preventDefault();
   }, d = (g) => {
     n(o === g ? null : g);
-  }, u = useSidebarMenuItems(r), { t: p } = useTranslation(), x = [...u, ...i], m = useBuilderProp("htmlDir", "ltr");
+  }, p = useSidebarMenuItems(r), { t: u } = useTranslation(), x = [...p, ...i], m = useBuilderProp("htmlDir", "ltr");
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { dir: m, className: "h-screen max-h-full w-screen overflow-x-hidden bg-background text-foreground", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(TooltipProvider, { children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "div",
@@ -8998,12 +9004,12 @@ const RootLayout = () => {
                   },
                   b
                 ) }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: p(g.label) }) })
+                /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: u(g.label) }) })
               ] }, "button" + b)) }),
               /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col space-y-1", children: [
                 /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
                   /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { variant: "ghost", onClick: () => l(!0), children: /* @__PURE__ */ jsxRuntimeExports.jsx(LayoutTemplate, { size: 20 }) }) }),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: p("Choose Builder Layout") }) })
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: u("Choose Builder Layout") }) })
                 ] }),
                 /* @__PURE__ */ jsxRuntimeExports.jsx(HotKeys, {})
               ] })
@@ -9018,7 +9024,7 @@ const RootLayout = () => {
                 children: o !== null && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "no-scrollbar overflow h-full overflow-x-hidden", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col p-3", children: [
                   /* @__PURE__ */ jsxRuntimeExports.jsxs("h2", { className: "-mt-1 flex h-10 items-center space-x-1 text-base font-bold", children: [
                     /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "rtl:ml-2 rtl:inline-block", children: get(x, `${o}.icon`, null) }),
-                    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: p(x[o].label) })
+                    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: u(x[o].label) })
                   ] }),
                   /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: "Loading..." }), children: React__default.createElement(get(x, `${o}.component`, null), {}) }) })
                 ] }) })
@@ -9038,7 +9044,7 @@ const RootLayout = () => {
                 children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "no-scrollbar overflow h-full max-h-full overflow-x-hidden", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex max-h-full flex-col p-3", children: [
                   /* @__PURE__ */ jsxRuntimeExports.jsxs("h2", { className: "-mt-1 flex h-10 items-center space-x-1 text-base font-bold", children: [
                     /* @__PURE__ */ jsxRuntimeExports.jsx(EditIcon, { size: "16", className: "rtl:ml-2" }),
-                    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: p("Block Settings") })
+                    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: u("Block Settings") })
                   ] }),
                   /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: "Loading..." }), children: /* @__PURE__ */ jsxRuntimeExports.jsx(SettingsPanel, {}) }) })
                 ] }) })