@chaibuilder/sdk 2.0.0-beta.6 → 2.0.0-beta.8

package/dist/{index-pDSQeyx5.js → index-eXQ8lngR.js}

@@ -98,26 +98,26 @@ const hasInitialValue = (o) => "init" in o, isActuallyWritableAtom = (o) => !!o.
     }
   }, p = (x, k, C) => {
     const A = /* @__PURE__ */ new Map();
-    let I = !1;
+    let T = !1;
     C.forEach((L, P) => {
-      !L && P === x && (L = k), L ? (A.set(P, L), k.d.get(P) !== L && (I = !0)) : (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && console.warn("[Bug] atom state not found");
-    }), (I || k.d.size !== A.size) && (k.d = A);
+      !L && P === x && (L = k), L ? (A.set(P, L), k.d.get(P) !== L && (T = !0)) : (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && console.warn("[Bug] atom state not found");
+    }), (T || k.d.size !== A.size) && (k.d = A);
   }, u = (x, k, C) => {
-    const A = c(x), I = {
+    const A = c(x), T = {
       d: (A == null ? void 0 : A.d) || /* @__PURE__ */ new Map(),
       v: k
     };
-    if (C && p(x, I, C), A && isEqualAtomValue(A, I) && A.d === I.d)
+    if (C && p(x, T, C), A && isEqualAtomValue(A, T) && A.d === T.d)
       return A;
-    if (A && hasPromiseAtomValue(A) && hasPromiseAtomValue(I) && isEqualPromiseAtomValue(A, I)) {
-      if (A.d === I.d)
+    if (A && hasPromiseAtomValue(A) && hasPromiseAtomValue(T) && isEqualPromiseAtomValue(A, T)) {
+      if (A.d === T.d)
         return A;
-      I.v = A.v;
+      T.v = A.v;
     }
-    return d(x, I), I;
+    return d(x, T), T;
   }, m = (x, k, C, A) => {
     if (isPromiseLike$2(k)) {
-      let I;
+      let T;
       const L = new Promise((P, O) => {
         let M = !1;
         k.then(
@@ -129,7 +129,7 @@ const hasInitialValue = (o) => "init" in o, isActuallyWritableAtom = (o) => !!o.
                 L,
                 C
               );
-              resolvePromise(L, H), P(H), ($ == null ? void 0 : $.d) !== V.d && T(x, V, $ == null ? void 0 : $.d);
+              resolvePromise(L, H), P(H), ($ == null ? void 0 : $.d) !== V.d && I(x, V, $ == null ? void 0 : $.d);
             }
           },
           (H) => {
@@ -140,10 +140,10 @@ const hasInitialValue = (o) => "init" in o, isActuallyWritableAtom = (o) => !!o.
                 L,
                 C
               );
-              rejectPromise(L, H), O(H), ($ == null ? void 0 : $.d) !== V.d && T(x, V, $ == null ? void 0 : $.d);
+              rejectPromise(L, H), O(H), ($ == null ? void 0 : $.d) !== V.d && I(x, V, $ == null ? void 0 : $.d);
             }
           }
-        ), I = (H) => {
+        ), T = (H) => {
           M || (M = !0, H.then(
             ($) => resolvePromise(L, $),
             ($) => rejectPromise(L, $)
@@ -151,16 +151,16 @@ const hasInitialValue = (o) => "init" in o, isActuallyWritableAtom = (o) => !!o.
         };
       });
       return L.orig = k, L.status = "pending", registerCancelPromise(L, (P) => {
-        P && I(P), A == null || A();
+        P && T(P), A == null || A();
       }), u(x, L, C);
     }
     return u(x, k, C);
   }, f = (x, k, C) => {
-    const A = c(x), I = {
+    const A = c(x), T = {
       d: (A == null ? void 0 : A.d) || /* @__PURE__ */ new Map(),
       e: k
     };
-    return C && p(x, I, C), A && isEqualAtomError(A, I) && A.d === I.d ? A : (d(x, I), I);
+    return C && p(x, T, C), A && isEqualAtomError(A, T) && A.d === T.d ? A : (d(x, T), T);
   }, g = (x) => {
     const k = c(x);
     if (k && (k.d.forEach((M, H) => {
@@ -173,7 +173,7 @@ const hasInitialValue = (o) => "init" in o, isActuallyWritableAtom = (o) => !!o.
       return k;
     const C = /* @__PURE__ */ new Map();
     let A = !0;
-    const I = (M) => {
+    const T = (M) => {
       if (M === x) {
         const $ = c(M);
         if ($)
@@ -198,7 +198,7 @@ const hasInitialValue = (o) => "init" in o, isActuallyWritableAtom = (o) => !!o.
       }
     };
     try {
-      const M = x.read(I, O);
+      const M = x.read(T, O);
       return m(
         x,
         M,
@@ -210,12 +210,12 @@ const hasInitialValue = (o) => "init" in o, isActuallyWritableAtom = (o) => !!o.
     } finally {
       A = !1;
     }
-  }, b = (x) => returnAtomValue(g(x)), E = (x) => {
+  }, E = (x) => returnAtomValue(g(x)), j = (x) => {
     let k = r.get(x);
-    return k || (k = w(x)), k;
-  }, j = (x, k) => !k.l.size && (!k.t.size || k.t.size === 1 && k.t.has(x)), v = (x) => {
+    return k || (k = R(x)), k;
+  }, b = (x, k) => !k.l.size && (!k.t.size || k.t.size === 1 && k.t.has(x)), v = (x) => {
     const k = r.get(x);
-    k && j(x, k) && B(x);
+    k && b(x, k) && B(x);
   }, S = (x) => {
     const k = /* @__PURE__ */ new Map(), C = /* @__PURE__ */ new WeakMap(), A = (L) => {
       const P = r.get(L);
@@ -227,7 +227,7 @@ const hasInitialValue = (o) => "init" in o, isActuallyWritableAtom = (o) => !!o.
       });
     };
     A(x);
-    const I = (L) => {
+    const T = (L) => {
       const P = r.get(L);
       P == null || P.t.forEach((O) => {
         var M;
@@ -241,14 +241,14 @@ const hasInitialValue = (o) => "init" in o, isActuallyWritableAtom = (o) => !!o.
             }
             $ || k.forEach((V) => V.delete(O));
           }
-          I(O);
+          T(O);
         }
       });
     };
-    I(x);
-  }, R = (x, ...k) => {
+    T(x);
+  }, w = (x, ...k) => {
     let C = !0;
-    const A = (P) => returnAtomValue(g(P)), I = (P, ...O) => {
+    const A = (P) => returnAtomValue(g(P)), T = (P, ...O) => {
       let M;
       if (P === x) {
         if (!hasInitialValue(P))
@@ -256,7 +256,7 @@ const hasInitialValue = (o) => "init" in o, isActuallyWritableAtom = (o) => !!o.
         const H = c(P), $ = m(P, O[0]);
         (!H || !isEqualAtomValue(H, $)) && S(P);
       } else
-        M = R(P, ...O);
+        M = w(P, ...O);
       if (!C) {
         const H = N();
         (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && l.forEach(
@@ -264,23 +264,23 @@ const hasInitialValue = (o) => "init" in o, isActuallyWritableAtom = (o) => !!o.
         );
       }
       return M;
-    }, L = x.write(A, I, ...k);
+    }, L = x.write(A, T, ...k);
     return C = !1, L;
   }, _ = (x, ...k) => {
-    const C = R(x, ...k), A = N();
+    const C = w(x, ...k), A = N();
     return (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && l.forEach(
-      (I) => I({ type: "write", flushed: A })
+      (T) => T({ type: "write", flushed: A })
     ), C;
-  }, w = (x, k) => {
+  }, R = (x, k) => {
     const C = {
       t: new Set(k && [k]),
       l: /* @__PURE__ */ new Set()
     };
-    if (r.set(x, C), (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && i.add(x), g(x).d.forEach((A, I) => {
-      const L = r.get(I);
-      L ? L.t.add(x) : I !== x && w(I, x);
+    if (r.set(x, C), (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && i.add(x), g(x).d.forEach((A, T) => {
+      const L = r.get(T);
+      L ? L.t.add(x) : T !== x && R(T, x);
     }), g(x), isActuallyWritableAtom(x) && x.onMount) {
-      const A = x.onMount((...I) => _(x, ...I));
+      const A = x.onMount((...T) => _(x, ...T));
       A && (C.u = A);
     }
     return C;
@@ -289,37 +289,37 @@ const hasInitialValue = (o) => "init" in o, isActuallyWritableAtom = (o) => !!o.
     const C = (k = r.get(x)) == null ? void 0 : k.u;
     C && C(), r.delete(x), (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && i.delete(x);
     const A = c(x);
-    A ? (hasPromiseAtomValue(A) && cancelPromise(A.v), A.d.forEach((I, L) => {
+    A ? (hasPromiseAtomValue(A) && cancelPromise(A.v), A.d.forEach((T, L) => {
       if (L !== x) {
         const P = r.get(L);
-        P && (P.t.delete(x), j(L, P) && B(L));
+        P && (P.t.delete(x), b(L, P) && B(L));
       }
     })) : (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && console.warn("[Bug] could not find atom state to unmount", x);
-  }, T = (x, k, C) => {
+  }, I = (x, k, C) => {
     const A = new Set(k.d.keys());
-    C == null || C.forEach((I, L) => {
+    C == null || C.forEach((T, L) => {
       if (A.has(L)) {
         A.delete(L);
         return;
       }
       const P = r.get(L);
-      P && (P.t.delete(x), j(L, P) && B(L));
-    }), A.forEach((I) => {
-      const L = r.get(I);
-      L ? L.t.add(x) : r.has(x) && w(I, x);
+      P && (P.t.delete(x), b(L, P) && B(L));
+    }), A.forEach((T) => {
+      const L = r.get(T);
+      L ? L.t.add(x) : r.has(x) && R(T, x);
     });
   }, N = () => {
     let x;
     for ((define_import_meta_env_default$2 ? "production" : void 0) !== "production" && (x = /* @__PURE__ */ new Set()); n.size; ) {
       const k = Array.from(n);
       n.clear(), k.forEach(([C, A]) => {
-        const I = c(C);
-        if (I) {
-          I.d !== (A == null ? void 0 : A.d) && T(C, I, A == null ? void 0 : A.d);
+        const T = c(C);
+        if (T) {
+          T.d !== (A == null ? void 0 : A.d) && I(C, T, A == null ? void 0 : A.d);
           const L = r.get(C);
           L && !// TODO This seems pretty hacky. Hope to fix it.
           // Maybe we could `mountDependencies` in `setAtomState`?
-          (A && !hasPromiseAtomValue(A) && (isEqualAtomValue(A, I) || isEqualAtomError(A, I))) && (L.l.forEach((P) => P()), (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && x.add(C));
+          (A && !hasPromiseAtomValue(A) && (isEqualAtomValue(A, T) || isEqualAtomError(A, T))) && (L.l.forEach((P) => P()), (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && x.add(C));
         } else
           (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && console.warn("[Bug] no atom state to flush");
       });
@@ -327,15 +327,15 @@ const hasInitialValue = (o) => "init" in o, isActuallyWritableAtom = (o) => !!o.
     if ((define_import_meta_env_default$2 ? "production" : void 0) !== "production")
       return a.forEach((k) => k("state")), x;
   }, D = (x, k) => {
-    const C = E(x), A = N(), I = C.l;
-    return I.add(k), (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && (a.forEach((L) => L("sub")), l.forEach(
+    const C = j(x), A = N(), T = C.l;
+    return T.add(k), (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && (a.forEach((L) => L("sub")), l.forEach(
       (L) => L({ type: "sub", flushed: A })
     )), () => {
-      I.delete(k), v(x), (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && (a.forEach((L) => L("unsub")), l.forEach((L) => L({ type: "unsub" })));
+      T.delete(k), v(x), (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && (a.forEach((L) => L("unsub")), l.forEach((L) => L({ type: "unsub" })));
     };
   };
   return (define_import_meta_env_default$2 ? "production" : void 0) !== "production" ? {
-    get: b,
+    get: E,
     set: _,
     sub: D,
     // store dev methods (these are tentative and subject to change without notice)
@@ -358,7 +358,7 @@ const hasInitialValue = (o) => "init" in o, isActuallyWritableAtom = (o) => !!o.
       );
     }
   } : {
-    get: b,
+    get: E,
     set: _,
     sub: D
   };
@@ -378,36 +378,36 @@ function splitAtom(o, r) {
         if (p)
           return p;
         const u = d && n.get(d), m = [], f = [];
-        return c.forEach((g, b) => {
-          const E = r ? r(g) : b;
-          f[b] = E;
-          const j = u && u.atomList[u.keyList.indexOf(E)];
-          if (j) {
-            m[b] = j;
+        return c.forEach((g, E) => {
+          const j = r ? r(g) : E;
+          f[E] = j;
+          const b = u && u.atomList[u.keyList.indexOf(j)];
+          if (b) {
+            m[E] = b;
             return;
           }
-          const v = (R) => {
-            const _ = R(l), w = R(o), T = a(w, _ == null ? void 0 : _.arr).keyList.indexOf(E);
-            if (T < 0 || T >= w.length) {
-              const N = c[a(c).keyList.indexOf(E)];
+          const v = (w) => {
+            const _ = w(l), R = w(o), I = a(R, _ == null ? void 0 : _.arr).keyList.indexOf(j);
+            if (I < 0 || I >= R.length) {
+              const N = c[a(c).keyList.indexOf(j)];
               if (N)
                 return N;
               throw new Error("splitAtom: index out of bounds for read");
             }
-            return w[T];
-          }, S = (R, _, w) => {
-            const B = R(l), T = R(o), D = a(T, B == null ? void 0 : B.arr).keyList.indexOf(E);
-            if (D < 0 || D >= T.length)
+            return R[I];
+          }, S = (w, _, R) => {
+            const B = w(l), I = w(o), D = a(I, B == null ? void 0 : B.arr).keyList.indexOf(j);
+            if (D < 0 || D >= I.length)
               throw new Error("splitAtom: index out of bounds for write");
-            const x = isFunction(w) ? w(T[D]) : w;
+            const x = isFunction(R) ? R(I[D]) : R;
             _(o, [
-              ...T.slice(0, D),
+              ...I.slice(0, D),
               x,
-              ...T.slice(D + 1)
+              ...I.slice(D + 1)
             ]);
           };
-          m[b] = isWritable(o) ? atom(v, S) : atom(v);
-        }), u && u.keyList.length === f.length && u.keyList.every((g, b) => g === f[b]) ? p = u : p = { arr: c, atomList: m, keyList: f }, n.set(c, p), p;
+          m[E] = isWritable(o) ? atom(v, S) : atom(v);
+        }), u && u.keyList.length === f.length && u.keyList.every((g, E) => g === f[E]) ? p = u : p = { arr: c, atomList: m, keyList: f }, n.set(c, p), p;
       }, l = atom((c) => {
         const d = c(l), p = c(o);
         return a(p, d == null ? void 0 : d.arr);
@@ -1201,65 +1201,65 @@ const useBlocksStoreManager = () => {
     updateBlocksProps: c
   } = useBlocksStoreManager();
   return {
-    moveBlocks: (E, j, v) => {
-      const S = map(E, (_) => {
+    moveBlocks: (j, b, v) => {
+      const S = map(j, (_) => {
         const B = r.find((D) => D._id === _)._parent || null, N = r.filter((D) => B ? D._parent === B : !D._parent).map((D) => D._id).indexOf(_);
         return { _id: _, oldParent: B, oldPosition: N };
-      }), R = S.find(({ _id: _ }) => _ === E[0]);
-      R && R.oldParent === j && R.oldPosition === v || (i(E, j, v), o({
-        undo: () => each(S, ({ _id: _, oldParent: w, oldPosition: B }) => {
-          i([_], w, B);
+      }), w = S.find(({ _id: _ }) => _ === j[0]);
+      w && w.oldParent === b && w.oldPosition === v || (i(j, b, v), o({
+        undo: () => each(S, ({ _id: _, oldParent: R, oldPosition: B }) => {
+          i([_], R, B);
         }),
-        redo: () => i(E, j, v)
+        redo: () => i(j, b, v)
       }));
     },
-    addBlocks: (E, j, v) => {
-      a(E, j, v), o({
-        undo: () => l(map(E, "_id")),
-        redo: () => a(E, j, v)
+    addBlocks: (j, b, v) => {
+      a(j, b, v), o({
+        undo: () => l(map(j, "_id")),
+        redo: () => a(j, b, v)
       });
     },
-    removeBlocks: (E) => {
-      var R;
-      const j = (R = first(E)) == null ? void 0 : R._parent, S = r.filter((_) => j ? _._parent === j : !_._parent).indexOf(first(E));
-      l(map(E, "_id")), o({
-        undo: () => a(E, j, S),
-        redo: () => l(map(E, "_id"))
+    removeBlocks: (j) => {
+      var w;
+      const b = (w = first(j)) == null ? void 0 : w._parent, S = r.filter((_) => b ? _._parent === b : !_._parent).indexOf(first(j));
+      l(map(j, "_id")), o({
+        undo: () => a(j, b, S),
+        redo: () => l(map(j, "_id"))
       });
     },
-    updateBlocks: (E, j, v) => {
+    updateBlocks: (j, b, v) => {
       let S = [];
       if (v)
-        S = map(E, (R) => ({ _id: R, ...v }));
+        S = map(j, (w) => ({ _id: w, ...v }));
       else {
-        const R = keys(j);
-        S = map(E, (_) => {
-          const w = r.find((T) => T._id === _), B = { _id: _ };
-          return each(R, (T) => B[T] = w[T]), B;
+        const w = keys(b);
+        S = map(j, (_) => {
+          const R = r.find((I) => I._id === _), B = { _id: _ };
+          return each(w, (I) => B[I] = R[I]), B;
         });
       }
-      c(map(E, (R) => ({ _id: R, ...j }))), o({
+      c(map(j, (w) => ({ _id: w, ...b }))), o({
         undo: () => c(S),
-        redo: () => c(map(E, (R) => ({ _id: R, ...j })))
+        redo: () => c(map(j, (w) => ({ _id: w, ...b })))
       });
     },
-    updateBlocksRuntime: (E, j) => {
-      c(map(E, (v) => ({ _id: v, ...j })));
+    updateBlocksRuntime: (j, b) => {
+      c(map(j, (v) => ({ _id: v, ...b })));
     },
-    setNewBlocks: (E) => {
-      n(E), o({
+    setNewBlocks: (j) => {
+      n(j), o({
         undo: () => n(r),
-        redo: () => n(E)
+        redo: () => n(j)
       });
     },
-    updateMultipleBlocksProps: (E) => {
-      let j = [];
-      j = map(E, (v) => {
-        const S = keys(v), R = r.find((w) => w._id === v._id), _ = {};
-        return each(S, (w) => _[w] = R[w]), _;
-      }), c(E), o({
-        undo: () => c(j),
-        redo: () => c(E)
+    updateMultipleBlocksProps: (j) => {
+      let b = [];
+      b = map(j, (v) => {
+        const S = keys(v), w = r.find((R) => R._id === v._id), _ = {};
+        return each(S, (R) => _[R] = w[R]), _;
+      }), c(j), o({
+        undo: () => c(b),
+        redo: () => c(j)
       });
     }
   };
@@ -1267,12 +1267,12 @@ const useBlocksStoreManager = () => {
   const [o] = useBlocksStore(), [, r] = useSelectedBlockIds(), { addBlocks: n } = useBlocksStoreUndoableActions(), a = useCallback(
     (i, c, d) => {
       var g;
-      for (let b = 0; b < i.length; b++) {
-        const { _id: E } = i[b];
-        i[b]._id = generateUUID();
-        const j = filter(i, { _parent: E });
-        for (let v = 0; v < j.length; v++)
-          j[v]._parent = i[b]._id;
+      for (let E = 0; E < i.length; E++) {
+        const { _id: j } = i[E];
+        i[E]._id = generateUUID();
+        const b = filter(i, { _parent: j });
+        for (let v = 0; v < b.length; v++)
+          b[v]._parent = i[E]._id;
       }
       const p = first(i);
       let u, m;
@@ -1289,9 +1289,9 @@ const useBlocksStoreManager = () => {
       const p = generateUUID(), u = getBlockDefaultProps(i.props), m = [];
       forIn(u, (v, S) => {
         if (startsWith(v, SLOT_KEY)) {
-          const R = v.replace(SLOT_KEY, "");
+          const w = v.replace(SLOT_KEY, "");
           m.push({
-            _id: R,
+            _id: w,
             _type: "Slot",
             _parent: p,
             _name: i.props[S].name,
@@ -1305,10 +1305,10 @@ const useBlocksStoreManager = () => {
         _id: p,
         ...u
       };
-      let g, b;
-      c && (g = find(o, { _id: c }), f._parent = c, b = c), !canAcceptChildBlock(g == null ? void 0 : g._type, f._type) && g && (f._parent = g._parent, b = g._parent);
-      const j = [f, ...m];
-      return n(j, b, d), r([f._id]), f;
+      let g, E;
+      c && (g = find(o, { _id: c }), f._parent = c, E = c), !canAcceptChildBlock(g == null ? void 0 : g._type, f._type) && g && (f._parent = g._parent, E = g._parent);
+      const b = [f, ...m];
+      return n(b, E, d), r([f._id]), f;
     },
     [a, o, r]
   ), addPredefinedBlock: a };
@@ -2424,7 +2424,7 @@ function getNewClasses(o = "", r = "", n = []) {
       const g = find(l, pick(m, ["property"]));
       f && (l = filter(
         l,
-        (b) => b.fullCls !== (g == null ? void 0 : g.fullCls)
+        (E) => E.fullCls !== (g == null ? void 0 : g.fullCls)
       )), c.push({
         ...m,
         fullCls: m.cls,
@@ -2578,10 +2578,10 @@ const useSelectedStylingBlocks = () => useAtom$1(selectedStylingBlocksAtom), get
     const d = o(c), p = a;
     let { classes: u, baseClasses: m } = getSplitClasses(get(d, l.prop, "styles:,"));
     return each(p, (f) => {
-      const g = f.replace(/[\[\]\/\\{}()*+?.^$|]/g, "\\$&"), b = new RegExp(`(^| )${g}($| )`, "g");
-      u = u.replace(b, " ").replace(/  +/g, " ").trim();
-      const E = first(f.split(":"));
-      includes(["2xl", "xl", "lg", "md", "sm"], E) && p.push(f.split(":").pop().trim());
+      const g = f.replace(/[\[\]\/\\{}()*+?.^$|]/g, "\\$&"), E = new RegExp(`(^| )${g}($| )`, "g");
+      u = u.replace(E, " ").replace(/  +/g, " ").trim();
+      const j = first(f.split(":"));
+      includes(["2xl", "xl", "lg", "md", "sm"], j) && p.push(f.split(":").pop().trim());
     }), each(p, (f) => {
       const g = new RegExp(`(^| )${f.replace("[", "\\[").replace("]", "\\]")}($| )`, "g");
       m = m.replace(g, " ").replace(/  +/g, " ").trim();
@@ -3080,11 +3080,11 @@ const useDnd = () => {
       g.preventDefault(), g.stopPropagation(), throttledDragOver(g);
     },
     onDrop: (g) => {
-      var w;
-      const b = dropTarget, j = getOrientation(b) === "vertical" ? g.clientY + ((w = iframeDocument == null ? void 0 : iframeDocument.defaultView) == null ? void 0 : w.scrollY) : g.clientX;
-      dropIndex = calculateDropIndex(j, possiblePositions);
-      const v = d, S = b.getAttribute("data-block-id"), R = dropTarget.getAttribute("data-dnd-dragged") !== "yes";
-      if ((v == null ? void 0 : v._id) === S || !R) {
+      var R;
+      const E = dropTarget, b = getOrientation(E) === "vertical" ? g.clientY + ((R = iframeDocument == null ? void 0 : iframeDocument.defaultView) == null ? void 0 : R.scrollY) : g.clientX;
+      dropIndex = calculateDropIndex(b, possiblePositions);
+      const v = d, S = E.getAttribute("data-block-id"), w = dropTarget.getAttribute("data-dnd-dragged") !== "yes";
+      if ((v == null ? void 0 : v._id) === S || !w) {
         f();
         return;
       }
@@ -3092,14 +3092,14 @@ const useDnd = () => {
         a(v, S === "canvas" ? null : S, dropIndex), setTimeout(f, 300);
         return;
       }
-      let _ = b.getAttribute("data-block-id");
+      let _ = E.getAttribute("data-block-id");
       _ === null && (_ = g.target.parentElement.getAttribute("data-block-id")), c([v._id], _ === "canvas" ? null : _, dropIndex), f(), setTimeout(removePlaceholder, 300);
     },
     onDragEnter: (g) => {
-      const b = g, E = b.target;
-      dropTarget = E;
-      const j = E.getAttribute("data-block-id"), v = E.getAttribute("data-dnd-dragged") !== "yes";
-      u(j), b.stopPropagation(), b.preventDefault(), possiblePositions = [], v && calculatePossiblePositions(E), n(!0), l(""), i([]);
+      const E = g, j = E.target;
+      dropTarget = j;
+      const b = j.getAttribute("data-block-id"), v = j.getAttribute("data-dnd-dragged") !== "yes";
+      u(b), E.stopPropagation(), E.preventDefault(), possiblePositions = [], v && calculatePossiblePositions(j), n(!0), l(""), i([]);
     },
     onDragLeave: (g) => {
       g.target.getAttribute("data-block-id") === "canvas" && (u(null), n(!1), removePlaceholder(), possiblePositions = []);
@@ -3184,8 +3184,8 @@ const useHandleCanvasDblClick = () => {
       if (f) {
         const g = f.getAttribute("data-style-prop");
         if (g) {
-          const b = f.getAttribute("data-style-id"), E = f.getAttribute("data-block-parent");
-          l([{ id: b, prop: g, blockId: E }]);
+          const E = f.getAttribute("data-style-id"), j = f.getAttribute("data-block-parent");
+          l([{ id: E, prop: g, blockId: j }]);
         }
       }
     }, 100);
@@ -3285,13 +3285,13 @@ const pubsub = new PubSub(), BlockActionLabel = ({ block: o, label: r }) => {
       tabIndex: 0,
       ref: u.setFloating,
       style: p,
-      onClick: (b) => {
-        b.stopPropagation(), b.preventDefault();
+      onClick: (E) => {
+        E.stopPropagation(), E.preventDefault();
       },
-      onMouseEnter: (b) => {
-        b.stopPropagation(), i(null);
+      onMouseEnter: (E) => {
+        E.stopPropagation(), i(null);
       },
-      onKeyDown: (b) => b.stopPropagation(),
+      onKeyDown: (E) => E.stopPropagation(),
       className: "isolate z-[999] flex h-6 items-center bg-blue-500 py-2 text-xs text-white",
       children: [
         f && /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -3336,19 +3336,19 @@ const pubsub = new PubSub(), BlockActionLabel = ({ block: o, label: r }) => {
   useEffect(() => {
     n ? c == null || c.documentElement.classList.add("dark") : c == null || c.documentElement.classList.remove("dark");
   }, [n, c]);
-  const g = get(o, "headingFont", "DM Sans"), b = get(o, "bodyFont", "DM Sans");
+  const g = get(o, "headingFont", "DM Sans"), E = get(o, "bodyFont", "DM Sans");
   return useEffect(() => {
-    const E = get(o, "primaryColor", "#000"), j = get(o, "secondaryColor", "#FFF"), v = get(o, "bodyBgLightColor", "#fff"), S = get(o, "bodyBgDarkColor", "#000"), R = get(o, "bodyTextDarkColor", "#000"), _ = get(o, "bodyTextLightColor", "#fff"), w = s({
-      colors: [E, j],
+    const j = get(o, "primaryColor", "#000"), b = get(o, "secondaryColor", "#FFF"), v = get(o, "bodyBgLightColor", "#fff"), S = get(o, "bodyBgDarkColor", "#000"), w = get(o, "bodyTextDarkColor", "#000"), _ = get(o, "bodyTextLightColor", "#fff"), R = s({
+      colors: [j, b],
       names: ["primary", "secondary"]
     });
-    set(w, "primary.DEFAULT", E), set(w, "secondary.DEFAULT", j);
+    set(R, "primary.DEFAULT", j), set(R, "secondary.DEFAULT", b);
     const B = {
       "bg-light": v,
       "bg-dark": S,
-      "text-dark": R,
+      "text-dark": w,
       "text-light": _
-    }, T = get(o, "roundedCorners", "0");
+    }, I = get(o, "roundedCorners", "0");
     !d || !d.tailwind || (d.tailwind.config = {
       darkMode: "class",
       theme: {
@@ -3362,12 +3362,12 @@ const pubsub = new PubSub(), BlockActionLabel = ({ block: o, label: r }) => {
           },
           fontFamily: {
             heading: [g],
-            body: [b]
+            body: [E]
           },
           borderRadius: {
-            DEFAULT: `${T || "0"}px`
+            DEFAULT: `${I || "0"}px`
           },
-          colors: { ...B, ...w }
+          colors: { ...B, ...R }
         }
       },
       plugins: [
@@ -3392,8 +3392,8 @@ const pubsub = new PubSub(), BlockActionLabel = ({ block: o, label: r }) => {
         })
       ]
     });
-  }, [o, d, g, b]), useEffect(() => {
-    u && (u.textContent = `${map(r, (E) => `[data-block-id="${E}"]`).join(",")}{
+  }, [o, d, g, E]), useEffect(() => {
+    u && (u.textContent = `${map(r, (j) => `[data-block-id="${j}"]`).join(",")}{
                 outline: 1px solid ${r.length === 1 ? "#42a1fc" : "orange"} !important; outline-offset: -1px;
             }`);
   }, [r, u]), useEffect(() => {
@@ -3401,16 +3401,16 @@ const pubsub = new PubSub(), BlockActionLabel = ({ block: o, label: r }) => {
   }, [l, f]), useEffect(() => {
     p && (p.textContent = '[data-highlighted="true"]{ outline: 1px solid #42a1fc !important; outline-offset: -1px;}');
   }, [p]), useEffect(() => {
-    m && (m.textContent = `${map(a, ({ id: E }) => `[data-style-id="${E}"]`).join(",")}{
+    m && (m.textContent = `${map(a, ({ id: j }) => `[data-style-id="${j}"]`).join(",")}{
                 outline: 1px solid #42a1fc !important; outline-offset: -1px;
             }`);
   }, [a, m]), useEffect(() => {
     c.querySelector("#drop-target-block").innerHTML = i ? `[data-block-id="${i}"]{ outline: 1px dashed orange !important; outline-offset: -1px;}` : "";
-  }, [i]), /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: (g || b) && /* @__PURE__ */ jsxRuntimeExports.jsx(
+  }, [i]), /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: (g || E) && /* @__PURE__ */ jsxRuntimeExports.jsx(
     "link",
     {
       rel: "stylesheet",
-      href: `https://fonts.googleapis.com/css2?family=${g ? `${g.replace(/ /g, "+")}:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900` : ""}${g && b && g !== b ? "&" : ""}${b && b !== g ? `family=${b.replace(/ /g, "+")}:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900` : ""}&display=swap`
+      href: `https://fonts.googleapis.com/css2?family=${g ? `${g.replace(/ /g, "+")}:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900` : ""}${g && E && g !== E ? "&" : ""}${E && E !== g ? `family=${E.replace(/ /g, "+")}:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900` : ""}&display=swap`
     }
   ) });
 }, useChaiExternalData = () => useAtom$1(chaiExternalDataAtom), useCanvasSettings = () => useAtom$1(canvasSettingsAtom), isVisibleAtBreakpoint = (o, r) => {
@@ -3528,46 +3528,46 @@ function applyLanguage(o, r, n) {
   }), a;
 }
 function BlocksRendererStatic({ blocks: o, allBlocks: r }) {
-  const { selectedLang: n } = useLanguages(), [a] = useAtom$1(xShowBlocksAtom), [l] = useCutBlockIds(), [i] = useAtom$1(draggedBlockAtom), [c] = useAtom$1(dropTargetBlockIdAtom), [, d] = useCanvasWidth(), [p] = useCanvasSettings(), [u] = useHiddenBlockIds(), { getGlobalBlocks: m } = useGlobalBlocksStore(), f = useCallback((j) => getStyleAttrs(j, d), [d]), [g] = useChaiExternalData(), [b] = useAtom$1(inlineEditingActiveAtom), E = useCallback(
-    (j) => j.reduce((v, S) => {
-      const R = get(p, S, {});
-      return { ...v, ...R };
+  const { selectedLang: n } = useLanguages(), [a] = useAtom$1(xShowBlocksAtom), [l] = useCutBlockIds(), [i] = useAtom$1(draggedBlockAtom), [c] = useAtom$1(dropTargetBlockIdAtom), [, d] = useCanvasWidth(), [p] = useCanvasSettings(), [u] = useHiddenBlockIds(), { getGlobalBlocks: m } = useGlobalBlocksStore(), f = useCallback((b) => getStyleAttrs(b, d), [d]), [g] = useChaiExternalData(), [E] = useAtom$1(inlineEditingActiveAtom), j = useCallback(
+    (b) => b.reduce((v, S) => {
+      const w = get(p, S, {});
+      return { ...v, ...w };
     }, {}),
     [p]
   );
   return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: React__default.Children.toArray(
-    o.map((j, v) => {
-      if (b === j._id || u.includes(j._id))
+    o.map((b, v) => {
+      if (E === b._id || u.includes(b._id))
         return null;
-      const S = {}, R = filter(r, { _parent: j._id });
-      if (S.children = R.length > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx(BlocksRendererStatic, { allBlocks: r, blocks: R }) : null, j._type === "GlobalBlock") {
-        const C = m(j);
+      const S = {}, w = filter(r, { _parent: b._id });
+      if (S.children = w.length > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx(BlocksRendererStatic, { allBlocks: r, blocks: w }) : null, b._type === "GlobalBlock") {
+        const C = m(b);
         S.children = /* @__PURE__ */ jsxRuntimeExports.jsx(RenderGlobalBlock, { blocks: filter(C, (A) => !A._parent), allBlocks: C });
       }
-      const _ = getBlockComponent(j._type), w = get(_, "server", !1), B = w ? RSCBlock : get(_, "builderComponent", get(_, "component", null));
+      const _ = getBlockComponent(b._type), R = get(_, "server", !1), B = R ? RSCBlock : get(_, "builderComponent", get(_, "component", null));
       if (isNull(B))
-        return /* @__PURE__ */ jsxRuntimeExports.jsx("noscript", { children: `<!-- ${j == null ? void 0 : j._type} not registered -->` });
-      const T = has(_, "getBlockStateFrom") ? _ == null ? void 0 : _.getBlockStateFrom(j, r) : [], N = E(T), D = f(j);
-      if (get(D, "__isHidden", !1) && !includes(a, j._id))
+        return /* @__PURE__ */ jsxRuntimeExports.jsx("noscript", { children: `<!-- ${b == null ? void 0 : b._type} not registered -->` });
+      const I = has(_, "getBlockStateFrom") ? _ == null ? void 0 : _.getBlockStateFrom(b, r) : [], N = j(I), D = f(b);
+      if (get(D, "__isHidden", !1) && !includes(a, b._id))
         return null;
-      const x = i && isDescendant(i._id, j._id, r), k = {
-        ...includes(a, j._id) ? { "force-show": "" } : {},
-        "data-block-id": j._id,
-        "data-block-type": j._type,
+      const x = i && isDescendant(i._id, b._id, r), k = {
+        ...includes(a, b._id) ? { "force-show": "" } : {},
+        "data-block-id": b._id,
+        "data-block-type": b._type,
         ...i ? (
           // @ts-ignore
           {
-            "data-dnd": canAcceptChildBlock(j._type, i == null ? void 0 : i._type) ? "yes" : "no",
-            "data-dnd-dragged": i._id === j._id || x ? "yes" : "no"
+            "data-dnd": canAcceptChildBlock(b._type, i == null ? void 0 : i._type) ? "yes" : "no",
+            "data-dnd-dragged": i._id === b._id || x ? "yes" : "no"
           }
         ) : {},
-        ...c === j._id && !x ? { "data-drop": "yes" } : {},
-        ...includes(l, j._id) ? { "data-cut-block": "yes" } : {}
+        ...c === b._id && !x ? { "data-drop": "yes" } : {},
+        ...includes(l, b._id) ? { "data-cut-block": "yes" } : {}
       };
-      return w ? /* @__PURE__ */ jsxRuntimeExports.jsx(RSCBlock, { block: j, blockProps: k }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Suspense, { children: React__default.createElement(B, {
+      return R ? /* @__PURE__ */ jsxRuntimeExports.jsx(RSCBlock, { block: b, blockProps: k }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Suspense, { children: React__default.createElement(B, {
         blockProps: k,
         index: v,
-        ...applyBindings(applyLanguage(j, n, _), g),
+        ...applyBindings(applyLanguage(b, n, _), g),
         ...omit(D, ["__isHidden"]),
         ...S,
         inBuilder: !0,
@@ -3625,47 +3625,47 @@ const useAllDataProviders = () => useMemo(() => getChaiDataProviders(), []), Blo
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { id: "main-content", onClick: d, className: "h-full w-full p-8 pb-0", ref: i, children: o });
 }, getElementByStyleId = (o, r) => o.querySelector(`[data-style-id="${r}"]`), StaticCanvas = () => {
-  const [o] = useAtom$1(networkModeAtom), [r] = useCanvasWidth(), [, n] = useSelectedBlockIds(), a = useSelectedBlock(), [, l] = useHighlightBlockId(), i = useRef(null), c = useRef(null), [d, p] = useState({ width: 0, height: 0 }), u = useCanvasScale(d), [m, f] = useState([]), [, g] = useState([]), [, b] = useAtom$1(canvasIframeAtom), [E, j] = useSelectedStylingBlocks(), v = useBuilderProp("loading", !1), S = useBuilderProp("htmlDir", "ltr"), R = (B) => {
-    p((T) => ({ ...T, width: B }));
+  const [o] = useAtom$1(networkModeAtom), [r] = useCanvasWidth(), [, n] = useSelectedBlockIds(), a = useSelectedBlock(), [, l] = useHighlightBlockId(), i = useRef(null), c = useRef(null), [d, p] = useState({ width: 0, height: 0 }), u = useCanvasScale(d), [m, f] = useState([]), [, g] = useState([]), [, E] = useAtom$1(canvasIframeAtom), [j, b] = useSelectedStylingBlocks(), v = useBuilderProp("loading", !1), S = useBuilderProp("htmlDir", "ltr"), w = (B) => {
+    p((I) => ({ ...I, width: B }));
   };
   useEffect(() => {
     if (!c.current)
       return;
-    const { clientWidth: B, clientHeight: T } = c.current;
-    p({ width: B, height: T });
+    const { clientWidth: B, clientHeight: I } = c.current;
+    p({ width: B, height: I });
   }, [c, r]);
-  const _ = (B, T = 0) => {
+  const _ = (B, I = 0) => {
     const { top: N } = B.getBoundingClientRect();
-    return N + T >= 0 && N - T <= window.innerHeight;
+    return N + I >= 0 && N - I <= window.innerHeight;
   };
   useEffect(() => {
-    var B, T;
+    var B, I;
     if (a && a.type !== "Multiple" && i.current) {
       const N = getElementByDataBlockId(i.current.contentDocument, a._id);
-      N && (_(N) || (T = (B = i.current) == null ? void 0 : B.contentWindow) == null || T.scrollTo({ top: N.offsetTop, behavior: "smooth" }), f([N]));
+      N && (_(N) || (I = (B = i.current) == null ? void 0 : B.contentWindow) == null || I.scrollTo({ top: N.offsetTop, behavior: "smooth" }), f([N]));
     }
   }, [a]), useEffect(() => {
-    if (!isEmpty(E) && i.current) {
+    if (!isEmpty(j) && i.current) {
       const B = getElementByStyleId(
         i.current.contentDocument,
-        first(E).id
+        first(j).id
       );
       g(B ? [B] : [null]);
     } else
       g([null]);
-  }, [E]);
-  const w = useMemo(() => {
+  }, [j]);
+  const R = useMemo(() => {
     let B = IframeInitialContent;
     return B = B.replace("__HTML_DIR__", S), o === "offline" && (B = B.replace(
       "https://old.chaibuilder.com/offline/tailwind.cdn.js",
       "/offline/tailwind.cdn.js"
     ), B = B.replace("https://unpkg.com/aos@next/dist/aos.css", "/offline/aos.css"), B = B.replace("https://unpkg.com/aos@next/dist/aos.js", "/offline/aos.js")), B;
   }, [o, S]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(ResizableCanvasWrapper, { onMount: R, onResize: R, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(ResizableCanvasWrapper, { onMount: w, onResize: w, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
     {
       onClick: () => {
-        n([]), j([]);
+        n([]), b([]);
       },
       onMouseLeave: () => setTimeout(() => l(""), 300),
       className: "relative mx-auto h-full w-full overflow-hidden",
@@ -3673,12 +3673,12 @@ const useAllDataProviders = () => useMemo(() => getChaiDataProviders(), []), Blo
       children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
         ChaiFrame,
         {
-          contentDidMount: () => b(i.current),
+          contentDidMount: () => E(i.current),
           ref: i,
           id: "canvas-iframe",
           style: { ...u, ...isEmpty(u) ? { width: `${r}px` } : {} },
           className: "relative mx-auto box-content h-full w-full max-w-full shadow-lg transition-all duration-300 ease-linear",
-          initialContent: w,
+          initialContent: R,
           children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx(KeyboardHandler, {}),
             /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -3801,7 +3801,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-D-BYzobl.js")), CanvasArea = () => {
+}, CodeEditor$1 = React__default.lazy(() => import("./CodeEditor-BUKZyPNe.js")), CanvasArea = () => {
   const [o] = useCodeEditor(), r = 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: r, children: /* @__PURE__ */ jsxRuntimeExports.jsx(StaticCanvas$1, {}) }) }),
@@ -3876,17 +3876,17 @@ const useAllDataProviders = () => useMemo(() => getChaiDataProviders(), []), Blo
   showHeading: o = !0,
   className: r = ""
 }) => {
-  const [n, a] = useBrandingOptions(), [l] = useBlocksContainer(), i = React.useRef(n), { t: c } = useTranslation(), d = ({ formData: w }, B) => {
-    B && (a(w), i.current = w);
+  const [n, a] = useBrandingOptions(), [l] = useBlocksContainer(), i = React.useRef(n), { t: c } = useTranslation(), d = ({ formData: R }, B) => {
+    B && (a(R), i.current = R);
   }, {
     bodyFont: p,
     headingFont: u,
     primaryColor: m,
     bodyTextDarkColor: f,
     bodyTextLightColor: g,
-    bodyBgDarkColor: b,
-    secondaryColor: E,
-    bodyBgLightColor: j,
+    bodyBgDarkColor: E,
+    secondaryColor: j,
+    bodyBgLightColor: b,
     roundedCorners: v
   } = n;
   let S = {
@@ -3905,13 +3905,13 @@ const useAllDataProviders = () => useMemo(() => getChaiDataProviders(), []), Blo
       default: parseInt(v || 5, 10)
     }),
     primaryColor: h({ title: c("Theme Config.Primary"), default: m }),
-    secondaryColor: h({ title: c("Theme Config.Secondary"), default: E })
+    secondaryColor: h({ title: c("Theme Config.Secondary"), default: j })
   };
   l || (S = {
     ...S,
     bodyBgLightColor: h({
       title: c("Theme Config.Background"),
-      default: j
+      default: b
     }),
     bodyTextLightColor: h({
       title: c("Theme Config.Text Color"),
@@ -3919,20 +3919,20 @@ const useAllDataProviders = () => useMemo(() => getChaiDataProviders(), []), Blo
     }),
     bodyBgDarkColor: h({
       title: c("Theme Config.Background Dark Mode"),
-      default: b
+      default: E
     }),
     bodyTextDarkColor: h({
       title: c("Theme Config.Text Color Dark Mode"),
       default: g
     })
   });
-  const R = {
+  const w = {
     type: "object",
     properties: {}
   }, _ = {};
-  return Object.keys(S).forEach((w) => {
-    const B = S[w];
-    return R.properties || (R.properties = {}), R.properties[w] = B.schema, _[w] = B.uiSchema, !0;
+  return Object.keys(S).forEach((R) => {
+    const B = S[R];
+    return w.properties || (w.properties = {}), w.properties[R] = B.schema, _[R] = B.uiSchema, !0;
   }), /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cn("flex h-full w-full select-none flex-col", r), children: [
     o ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "rounded-md bg-background/30 p-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx("h1", { className: "px-1 font-semibold", children: c("Theme Configuration") }) }) : null,
     /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -3945,7 +3945,7 @@ const useAllDataProviders = () => useMemo(() => getChaiDataProviders(), []), Blo
         liveOmit: !0,
         liveValidate: !0,
         uiSchema: _,
-        schema: R,
+        schema: w,
         formData: n,
         validator,
         onChange: d
@@ -4128,34 +4128,34 @@ function BiExpandVertical(o) {
 const Node = memo(({ node: o, style: r, dragHandle: n }) => {
   const a = useBuilderProp("outlineMenuItems", []), { t: l } = useTranslation(), [i, , c] = useHiddenBlockIds(), [d] = useAtom$1(canvasIframeAtom);
   let p = null;
-  const u = o.children.length > 0, { highlightBlock: m, clearHighlight: f } = useBlockHighlight(), { id: g, data: b, isSelected: E, willReceiveDrop: j, isDragging: v, isEditing: S, handleClick: R } = o, _ = (x) => {
+  const u = o.children.length > 0, { highlightBlock: m, clearHighlight: f } = useBlockHighlight(), { id: g, data: E, isSelected: j, willReceiveDrop: b, isDragging: v, isEditing: S, handleClick: w } = o, _ = (x) => {
     x.stopPropagation(), !i.includes(g) && o.toggle();
-  }, w = (x) => {
+  }, R = (x) => {
     x.isInternal && (p = x.isOpen, x.isOpen && x.close());
   }, B = (x) => {
     x.isInternal && p !== null && (p ? x.open() : x.close(), p = null);
-  }, T = (x) => {
-    x.stopPropagation(), !o.isOpen && !i.includes(g) && o.toggle(), R(x);
+  }, I = (x) => {
+    x.stopPropagation(), !o.isOpen && !i.includes(g) && o.toggle(), w(x);
   };
   useEffect(() => {
     const x = setTimeout(() => {
-      j && !o.isOpen && !v && !i.includes(g) && o.toggle();
+      b && !o.isOpen && !v && !i.includes(g) && o.toggle();
     }, 500);
     return () => clearTimeout(x);
-  }, [j, o, v]);
+  }, [b, o, v]);
   const N = useMemo(() => {
-    const x = Object.keys(b), k = [];
+    const x = Object.keys(E), k = [];
     for (let C = 0; C < x.length; C++)
       if (x[C].endsWith("_attrs")) {
-        const A = b[x[C]], I = Object.keys(A).join("|");
-        I.match(/x-data/) && k.push("data"), I.match(/x-on/) && k.push("event"), I.match(/x-show|x-if/) && k.push("show");
+        const A = E[x[C]], T = Object.keys(A).join("|");
+        T.match(/x-data/) && k.push("data"), T.match(/x-on/) && k.push("event"), T.match(/x-show|x-if/) && k.push("show");
       }
     return k;
-  }, [b]), D = (x, k) => {
+  }, [E]), D = (x, k) => {
     const C = d.contentDocument || d.contentWindow.document, A = C.querySelector(`[data-block-id=${x}]`);
     A && A.setAttribute("data-drop", k);
-    const I = A.getBoundingClientRect(), L = d.getBoundingClientRect();
-    I.top >= L.top && I.left >= L.left && I.bottom <= L.bottom && I.right <= L.right || (C.documentElement.scrollTop = A.offsetTop - L.top);
+    const T = A.getBoundingClientRect(), L = d.getBoundingClientRect();
+    T.top >= L.top && T.left >= L.left && T.bottom <= L.bottom && T.right <= L.right || (C.documentElement.scrollTop = A.offsetTop - L.top);
   };
   return g === ROOT_TEMP_KEY ? /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "button",
@@ -4172,11 +4172,11 @@ const Node = memo(({ node: o, style: r, dragHandle: n }) => {
     {
       onMouseEnter: () => m(g),
       onMouseLeave: () => f(),
-      onClick: T,
+      onClick: I,
       style: r,
       "data-node-id": g,
       ref: i.includes(g) ? null : n,
-      onDragStart: () => w(o),
+      onDragStart: () => R(o),
       onDragEnd: () => B(o),
       onDragOver: (x) => {
         x.preventDefault(), D(g, "yes");
@@ -4189,8 +4189,8 @@ const Node = memo(({ node: o, style: r, dragHandle: n }) => {
       },
       className: cn(
         "group flex !h-full w-full items-center justify-between space-x-px !rounded py-px text-foreground/80 outline-none",
-        E ? "bg-blue-500 text-white" : "hover:bg-gray-200 dark:hover:bg-gray-800",
-        j && canAcceptChildBlock(b._type, "Icon") ? "bg-green-200" : "",
+        j ? "bg-blue-500 text-white" : "hover:bg-gray-200 dark:hover:bg-gray-800",
+        b && canAcceptChildBlock(E._type, "Icon") ? "bg-green-200" : "",
         v && "opacity-20",
         i.includes(g) ? "opacity-50" : ""
       ),
@@ -4204,7 +4204,7 @@ const Node = memo(({ node: o, style: r, dragHandle: n }) => {
             }
           ),
           /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "-mt-0.5 h-3 w-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx(TypeIcon, { type: b == null ? void 0 : b._type }) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "-mt-0.5 h-3 w-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx(TypeIcon, { type: E == null ? void 0 : E._type }) }),
             S ? /* @__PURE__ */ jsxRuntimeExports.jsx(Input, { node: o }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(
               "div",
               {
@@ -4213,7 +4213,7 @@ const Node = memo(({ node: o, style: r, dragHandle: n }) => {
                   x.stopPropagation(), o.edit(), o.deselect();
                 },
                 children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: (b == null ? void 0 : b._name) || (b == null ? void 0 : b._type.split("/").pop()) }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: (E == null ? void 0 : E._name) || (E == null ? void 0 : E._type.split("/").pop()) }),
                   N.includes("data") && /* @__PURE__ */ jsxRuntimeExports.jsx(VscJson, { className: "h-3 w-3 text-orange-600" }),
                   N.includes("event") && /* @__PURE__ */ jsxRuntimeExports.jsx(BsLightningFill, { className: "h-3 w-3 text-yellow-500" }),
                   N.includes("show") && /* @__PURE__ */ jsxRuntimeExports.jsx(TbEyeDown, { className: "h-3 w-3 text-orange-600" })
@@ -4234,7 +4234,7 @@ const Node = memo(({ node: o, style: r, dragHandle: n }) => {
             ),
             /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { className: "isolate z-10", children: x.tooltip })
           ] })),
-          canAddChildBlock(b == null ? void 0 : b._type) && !i.includes(g) ? /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+          canAddChildBlock(E == null ? void 0 : E._type) && !i.includes(g) ? /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx(
               TooltipTrigger,
               {
@@ -4585,7 +4585,7 @@ const Node = memo(({ node: o, style: r, dragHandle: n }) => {
     }
   }
 }, traverseNodes = (o, r = null) => flatMapDeep(o, (n) => {
-  var p, u, m, f, g, b, E, j;
+  var p, u, m, f, g, E, j, b;
   if (n.type === "comment")
     return [];
   let a = { _id: generateUUID() };
@@ -4624,8 +4624,8 @@ const Node = memo(({ node: o, style: r, dragHandle: n }) => {
       hrefType: ((u = l.find((S) => S.key === "data-vbtype")) == null ? void 0 : u.value) || "video",
       autoplay: ((m = l.find((S) => S.key === "data-autoplay")) == null ? void 0 : m.value) === "true",
       maxWidth: ((g = (f = l.find((S) => S.key === "data-maxwidth")) == null ? void 0 : f.value) == null ? void 0 : g.replace("px", "")) || "",
-      backdropColor: ((b = l.find((S) => S.key === "data-overlay")) == null ? void 0 : b.value) || "",
-      galleryName: ((E = l.find((S) => S.key === "data-gall")) == null ? void 0 : E.value) || ""
+      backdropColor: ((E = l.find((S) => S.key === "data-overlay")) == null ? void 0 : E.value) || "",
+      galleryName: ((j = l.find((S) => S.key === "data-gall")) == null ? void 0 : j.value) || ""
     }, forEach(v, (S) => {
       has(a, `styles_attrs.${S}`) && delete a.styles_attrs[S];
     });
@@ -4637,9 +4637,9 @@ const Node = memo(({ node: o, style: r, dragHandle: n }) => {
     const v = stringify([n]);
     return hasVideoEmbed(v) && (set(a, "_type", "Video"), set(a, "url", getVideoURLFromHTML(v)), set(a, "styles", `${STYLES_KEY},absolute top-0 left-0 w-full h-full`), set(a, "controls", { autoPlay: !1, muted: !0, loop: !1, controls: !1 })), a.content = v, [a];
   } else if (n.tagName === "svg") {
-    const v = find(n.attributes, { key: "height" }), S = find(n.attributes, { key: "width" }), R = get(v, "value") ? `[${get(v, "value")}px]` : "24px", _ = get(S, "value") ? `[${get(S, "value")}px]` : "24px", w = get(find(n.attributes, { key: "class" }), "value", "w-full h-full");
-    return a.styles = `${STYLES_KEY}, ${cn(`w-${_} h-${R}`, w)}`.trim(), n.attributes = filter(n.attributes, (B) => !includes(["style", "width", "height", "class"], B.key)), a.icon = stringify([n]), [a];
-  } else if (n.tagName == "option" && r && ((j = r.block) == null ? void 0 : j._type) === "Select")
+    const v = find(n.attributes, { key: "height" }), S = find(n.attributes, { key: "width" }), w = get(v, "value") ? `[${get(v, "value")}px]` : "24px", _ = get(S, "value") ? `[${get(S, "value")}px]` : "24px", R = get(find(n.attributes, { key: "class" }), "value", "w-full h-full");
+    return a.styles = `${STYLES_KEY}, ${cn(`w-${_} h-${w}`, R)}`.trim(), n.attributes = filter(n.attributes, (B) => !includes(["style", "width", "height", "class"], B.key)), a.icon = stringify([n]), [a];
+  } else if (n.tagName == "option" && r && ((b = r.block) == null ? void 0 : b._type) === "Select")
     return r.block.options.push({
       label: getTextContent(n.children),
       ...getAttrs(n)
@@ -4825,12 +4825,12 @@ const MediaManagerModal$1 = MediaManagerModal, ImagePickerField = ({ value: o, o
   onChange: n
 }) => {
   var D;
-  const { t: a } = useTranslation(), l = useBuilderProp("searchCollectionItems", (x, k) => []), [i, c] = useState(!1), [d, p] = useState(!1), [u, m] = useState("page"), [f, g] = useState(""), [b, E] = useState([]), [j, v] = useState(-1), S = useRef(null), R = (D = r == null ? void 0 : r.find((x) => x.key === u)) == null ? void 0 : D.name;
+  const { t: a } = useTranslation(), l = useBuilderProp("searchCollectionItems", (x, k) => []), [i, c] = useState(!1), [d, p] = useState(!1), [u, m] = useState("page"), [f, g] = useState(""), [E, j] = useState([]), [b, v] = useState(-1), S = useRef(null), w = (D = r == null ? void 0 : r.find((x) => x.key === u)) == null ? void 0 : D.name;
   useEffect(() => {
-    if (!o || i || !startsWith(o, "collection:"))
+    if (g(""), j([]), v(-1), p(!1), !o || i || !startsWith(o, "collection:"))
       return;
     const x = split(o, ":"), k = get(x, 1, "page") || "page";
-    m(k), g(""), E([]), v(-1), (async () => {
+    m(k), (async () => {
       const C = await l(k, [get(x, 2, "page")]);
       C && Array.isArray(C) && g(get(C, [0, "name"], ""));
     })();
@@ -4838,44 +4838,44 @@ const MediaManagerModal$1 = MediaManagerModal, ImagePickerField = ({ value: o, o
   const _ = useDebouncedCallback(
     async (x) => {
       if (isEmpty(x))
-        E([]);
+        j([]);
       else {
         const k = await l(u, x);
-        E(k);
+        j(k);
       }
       c(!1), v(-1);
     },
     [u],
     300
-  ), w = (x) => {
+  ), R = (x) => {
     const k = ["collection", u, x.id];
-    k[1] && (n(k.join(":")), g(x.name), p(!1), E([]), v(-1));
+    k[1] && (n(k.join(":")), g(x.name), p(!1), j([]), v(-1));
   }, B = (x) => {
     switch (x.key) {
       case "ArrowDown":
-        x.preventDefault(), v((k) => k < b.length - 1 ? k + 1 : k);
+        x.preventDefault(), v((k) => k < E.length - 1 ? k + 1 : k);
         break;
       case "ArrowUp":
         x.preventDefault(), v((k) => k > 0 ? k - 1 : k);
         break;
       case "Enter":
-        if (x.preventDefault(), b.length === 0)
+        if (x.preventDefault(), E.length === 0)
           return;
-        j >= 0 && w(b[j]);
+        b >= 0 && R(E[b]);
         break;
       case "Escape":
-        x.preventDefault(), T();
+        x.preventDefault(), I();
         break;
     }
   };
   useEffect(() => {
-    if (j >= 0 && S.current) {
-      const x = S.current.children[j];
+    if (b >= 0 && S.current) {
+      const x = S.current.children[b];
       x == null || x.scrollIntoView({ block: "nearest" });
     }
-  }, [j]);
-  const T = () => {
-    g(""), E([]), v(-1), p(!1), n("");
+  }, [b]);
+  const I = () => {
+    g(""), j([]), v(-1), p(!1), n("");
   }, N = (x) => {
     g(x), p(!isEmpty(x)), c(!0), _(x);
   };
@@ -4889,25 +4889,25 @@ const MediaManagerModal$1 = MediaManagerModal, ImagePickerField = ({ value: o, o
           value: f,
           onChange: (x) => N(x.target.value),
           onKeyDown: B,
-          placeholder: a(`Search ${R}`),
+          placeholder: a(`Search ${w}`),
           className: "w-full rounded-md border border-gray-300 p-2 pr-16"
         }
       ),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute bottom-2 right-2 top-3 flex items-center gap-1.5", children: f && /* @__PURE__ */ jsxRuntimeExports.jsx("button", { onClick: T, className: "text-gray-400 hover:text-gray-600", title: a("Clear search"), children: /* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "h-4 w-4" }) }) })
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute bottom-2 right-2 top-3 flex items-center gap-1.5", children: f && /* @__PURE__ */ jsxRuntimeExports.jsx("button", { onClick: I, className: "text-gray-400 hover:text-gray-600", title: a("Clear search"), children: /* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "h-4 w-4" }) }) })
     ] }),
-    (i || !isEmpty(b) || d && isEmpty(b)) && /* @__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: i ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-1 p-2", children: [
+    (i || !isEmpty(E) || d && isEmpty(E)) && /* @__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: i ? /* @__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" })
-    ] }) : d && isEmpty(b) ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-center p-4 text-sm text-gray-500", children: [
+    ] }) : d && isEmpty(E) ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-center p-4 text-sm text-gray-500", children: [
       a("No results found for"),
       ' "',
       f,
       '"'
-    ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { ref: S, children: map(b == null ? void 0 : b.slice(0, 20), (x, k) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { ref: S, children: map(E == null ? void 0 : E.slice(0, 20), (x, k) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "li",
       {
-        onClick: () => w(x),
-        className: `cursor-pointer p-2 text-xs ${o != null && o.includes(x.id) ? "bg-blue-200" : k === j ? "bg-gray-100" : "hover:bg-gray-100"}`,
+        onClick: () => R(x),
+        className: `cursor-pointer p-2 text-xs ${o != null && o.includes(x.id) ? "bg-blue-200" : k === b ? "bg-gray-100" : "hover:bg-gray-100"}`,
         children: [
           x.name,
           " ",
@@ -4994,18 +4994,18 @@ const MediaManagerModal$1 = MediaManagerModal, ImagePickerField = ({ value: o, o
   ] });
 }, JSONForm = memo(({ id: o, properties: r, formData: n, onChange: a }) => {
   const [l, i] = useState(n), c = { type: "object", properties: {} }, d = {}, { t: p } = useTranslation(), { selectedLang: u, fallbackLang: m, languages: f } = useLanguages(), g = f.length === 0 ? "" : u.length ? u : m;
-  Object.keys(r).forEach((E) => {
-    const j = r[E];
-    if (includes(["slot", "styles"], j.type))
+  Object.keys(r).forEach((j) => {
+    const b = r[j];
+    if (includes(["slot", "styles"], b.type))
       return;
-    const v = E;
-    c.properties[v] = getBlockJSONFromSchemas(j, p, g), d[v] = getBlockJSONFromUISchemas(j);
+    const v = j;
+    c.properties[v] = getBlockJSONFromSchemas(b, p, g), d[v] = getBlockJSONFromUISchemas(b);
   }), useEffect(() => {
     i(n);
   }, [o, u]);
-  const b = useThrottledCallback(
-    async ({ formData: E }, j) => {
-      a({ formData: E }, j);
+  const E = useThrottledCallback(
+    async ({ formData: j }, b) => {
+      a({ formData: j }, b);
     },
     [a],
     1e3
@@ -5031,8 +5031,8 @@ const MediaManagerModal$1 = MediaManagerModal, ImagePickerField = ({ value: o, o
       uiSchema: d,
       schema: c,
       formData: l,
-      onChange: ({ formData: E }, j) => {
-        j && (i(E), b({ formData: E }, j));
+      onChange: ({ formData: j }, b) => {
+        b && (i(j), E({ formData: j }, b));
       }
     }
   );
@@ -5102,45 +5102,234 @@ const MediaManagerModal$1 = MediaManagerModal, ImagePickerField = ({ value: o, o
   }), a;
 };
 function BlockSettings() {
-  const { selectedLang: o } = useLanguages(), r = useSelectedBlock(), n = useUpdateBlocksPropsRealtime(), a = useUpdateBlocksProps(), l = getBlockComponent(r == null ? void 0 : r._type), i = formDataWithSelectedLang(r, o, l), [c, d] = useState(i), p = !1, u = ({ formData: j }, v, S) => {
+  const { selectedLang: o } = useLanguages(), r = useSelectedBlock(), n = useUpdateBlocksPropsRealtime(), a = useUpdateBlocksProps(), l = getBlockComponent(r == null ? void 0 : r._type), i = formDataWithSelectedLang(r, o, l), [c, d] = useState(i), p = !1, u = ({ formData: b }, v, S) => {
     if (v && (c == null ? void 0 : c._id) === r._id) {
-      const R = v.replace("root.", "");
-      a([r._id], { [R]: get(j, R) }, S);
+      const w = v.replace("root.", "");
+      a([r._id], { [w]: get(b, w) }, S);
     }
   }, m = useCallback(
-    debounce(({ formData: j }, v, S) => {
-      u({ formData: j }, v, S), d(j);
+    debounce(({ formData: b }, v, S) => {
+      u({ formData: b }, v, S), d(b);
     }, 1500),
     [r == null ? void 0 : r._id, o]
-  ), f = ({ formData: j }, v) => {
+  ), f = ({ formData: b }, v) => {
     if (v) {
       const S = v.replace("root.", "");
       n(
         [r._id],
-        convertDotNotationToObject(S, get(j, S.split(".")))
-      ), m({ formData: j }, v, { [S]: get(c, S) });
+        convertDotNotationToObject(S, get(b, S.split(".")))
+      ), m({ formData: b }, v, { [S]: get(c, S) });
     }
-  }, g = keys(get(i, "_bindings", {})), b = useMemo(() => {
-    const j = cloneDeep(get(l, "props", {}));
-    return each(j, (v, S) => {
-      get(v, "hidden", !1) && delete j[S];
-    }), j;
-  }, [l, g, p]), E = get(l, "server", !1);
+  }, g = keys(get(i, "_bindings", {})), E = useMemo(() => {
+    const b = cloneDeep(get(l, "props", {}));
+    return each(b, (v, S) => {
+      get(v, "hidden", !1) && delete b[S];
+    }), b;
+  }, [l, g, p]), j = get(l, "server", !1);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "overflow-x-hidden px-px", children: [
-    isEmpty(b) ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(
+    isEmpty(E) ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(
       JSONForm,
       {
         id: r == null ? void 0 : r._id,
         onChange: f,
         formData: i,
-        properties: b
+        properties: E
       }
     ),
     (r == null ? void 0 : r._type) === "GlobalBlock" ? /* @__PURE__ */ jsxRuntimeExports.jsx(GlobalBlockSettings, {}) : null,
-    E ? /* @__PURE__ */ jsxRuntimeExports.jsx(ResetRSCBlockButton, { blockId: r == null ? void 0 : r._id }) : null,
+    j ? /* @__PURE__ */ jsxRuntimeExports.jsx(ResetRSCBlockButton, { blockId: r == null ? void 0 : r._id }) : null,
     /* @__PURE__ */ jsxRuntimeExports.jsx(CanvasSettings, {})
   ] });
 }
+const LANGUAGES = {
+  ab: "Abkhazian",
+  aa: "Afar",
+  af: "Afrikaans",
+  ak: "Akan",
+  sq: "Albanian",
+  am: "Amharic",
+  ar: "Arabic",
+  an: "Aragonese",
+  hy: "Armenian",
+  as: "Assamese",
+  av: "Avaric",
+  ae: "Avestan",
+  ay: "Aymara",
+  az: "Azerbaijani",
+  bm: "Bambara",
+  ba: "Bashkir",
+  eu: "Basque",
+  be: "Belarusian",
+  bn: "Bengali",
+  bh: "Bihari",
+  bi: "Bislama",
+  bs: "Bosnian",
+  br: "Breton",
+  bg: "Bulgarian",
+  my: "Burmese",
+  ca: "Catalan",
+  ch: "Chamorro",
+  ce: "Chechen",
+  ny: "Chichewa",
+  zh: "Chinese",
+  "zh-Hans": "Chinese (Simplified)",
+  "zh-Hant": "Chinese (Traditional)",
+  cv: "Chuvash",
+  kw: "Cornish",
+  co: "Corsican",
+  cr: "Cree",
+  hr: "Croatian",
+  cs: "Czech",
+  da: "Danish",
+  dv: "Maldivian",
+  nl: "Dutch",
+  dz: "Dzongkha",
+  en: "English",
+  eo: "Esperanto",
+  et: "Estonian",
+  ee: "Ewe",
+  fo: "Faroese",
+  fj: "Fijian",
+  fi: "Finnish",
+  fr: "French",
+  ff: "Fula, Pular",
+  gl: "Galician",
+  gd: "Gaelic (Scottish)",
+  gv: "Manx",
+  ka: "Georgian",
+  de: "German",
+  el: "Greek",
+  kl: "Kalaallisut",
+  gn: "Guarani",
+  gu: "Gujarati",
+  ht: "Haitian Creole",
+  ha: "Hausa",
+  he: "Hebrew",
+  hz: "Herero",
+  hi: "Hindi",
+  ho: "Hiri Motu",
+  hu: "Hungarian",
+  is: "Icelandic",
+  io: "Ido",
+  ig: "Igbo",
+  id: "Indonesian",
+  ia: "Interlingua",
+  ie: "Interlingue",
+  iu: "Inuktitut",
+  ik: "Inupiak",
+  ga: "Irish",
+  it: "Italian",
+  ja: "Japanese",
+  jv: "Javanese",
+  kn: "Kannada",
+  kr: "Kanuri",
+  ks: "Kashmiri",
+  kk: "Kazakh",
+  km: "Khmer",
+  ki: "Kikuyu",
+  rw: "Kinyarwanda",
+  rn: "Kirundi",
+  ky: "Kyrgyz",
+  kv: "Komi",
+  kg: "Kongo",
+  ko: "Korean",
+  ku: "Kurdish",
+  kj: "Kwanyama",
+  lo: "Lao",
+  la: "Latin",
+  lv: "Latvian",
+  li: "Limburgish",
+  ln: "Lingala",
+  lt: "Lithuanian",
+  lu: "Luga-Katanga",
+  lg: "Luganda, Ganda",
+  lb: "Luxembourgish",
+  mk: "Macedonian",
+  mg: "Malagasy",
+  ms: "Malay",
+  ml: "Malayalam",
+  mt: "Maltese",
+  mi: "Maori",
+  mr: "Marathi",
+  mh: "Marshallese",
+  mo: "Moldavian",
+  mn: "Mongolian",
+  na: "Nauru",
+  nv: "Navajo",
+  ng: "Ndonga",
+  nd: "Northern Ndebele",
+  ne: "Nepali",
+  no: "Norwegian",
+  nb: "Norwegian bokmål",
+  nn: "Norwegian nynorsk",
+  ii: "Sichuan Yi",
+  oc: "Occitan",
+  oj: "Ojibwe",
+  cu: "Old Church Slavonic",
+  or: "Oriya",
+  om: "Oromo",
+  os: "Ossetian",
+  pi: "Pāli",
+  ps: "Pashto, Pushto",
+  fa: "Persian (Farsi)",
+  pl: "Polish",
+  pt: "Portuguese",
+  pa: "Punjabi (Eastern)",
+  qu: "Quechua",
+  rm: "Romansh",
+  ro: "Romanian",
+  ru: "Russian",
+  se: "Sami",
+  sm: "Samoan",
+  sg: "Sango",
+  sa: "Sanskrit",
+  sr: "Serbian",
+  sh: "Serbo-Croatian",
+  st: "Sesotho",
+  tn: "Setswana",
+  sn: "Shona",
+  sd: "Sindhi",
+  si: "Sinhalese",
+  ss: "Swati",
+  sk: "Slovak",
+  sl: "Slovenian",
+  so: "Somali",
+  nr: "Southern Ndebele",
+  es: "Spanish",
+  su: "Sundanese",
+  sw: "Swahili (Kiswahili)",
+  sv: "Swedish",
+  tl: "Tagalog",
+  ty: "Tahitian",
+  tg: "Tajik",
+  ta: "Tamil",
+  tt: "Tatar",
+  te: "Telugu",
+  th: "Thai",
+  bo: "Tibetan",
+  ti: "Tigrinya",
+  to: "Tonga",
+  ts: "Tsonga",
+  tr: "Turkish",
+  tk: "Turkmen",
+  tw: "Twi",
+  ug: "Uyghur",
+  uk: "Ukrainian",
+  ur: "Urdu",
+  uz: "Uzbek",
+  ve: "Venda",
+  vi: "Vietnamese",
+  vo: "Volapük",
+  wa: "Wallon",
+  cy: "Welsh",
+  wo: "Wolof",
+  fy: "Western Frisian",
+  xh: "Xhosa",
+  yi: "Yiddish",
+  yo: "Yoruba",
+  za: "Zhuang, Chuang",
+  zu: "Zulu"
+};
 function getChildBlocks(o, r, n) {
   n.push(find(o, { _id: r }));
   const a = filter(o, { _parent: r });
@@ -5158,44 +5347,53 @@ const getBlockWithChildren = (o, r) => {
       a.includes(d) || get(i, `props.${d}.ai`, !1) && (c[d] = get(n, `${d}-${r}`, n[d]));
     return isEmpty$1(c) ? !1 : (has(l, "_parent") && isEmpty$1(l._parent) && delete l._parent, { ...l, ...c });
   })
-), askAiProcessingAtom = atom$1(!1), useAskAi = () => {
-  const [o, r] = useAtom$1(askAiProcessingAtom), [n, a] = useState(null), l = useBuilderProp("askAiCallBack", null), i = useStreamMultipleBlocksProps(), c = useUpdateMultipleBlocksProps(), [d] = useBlocksStore(), { selectedLang: p, fallbackLang: u } = useLanguages(), m = (f, g) => {
-    const b = cloneDeep(g.find((E) => E._id === f));
-    for (const E in b) {
-      const j = b[E];
-      typeof j == "string" && startsWith(j, STYLES_KEY) ? b[E] = compact(flattenDeep(j.replace(STYLES_KEY, "").split(","))).join(" ") : E !== "_id" && delete b[E];
+), addLangToPrompt = (o, r, n) => !r || n !== "content" ? o : `${o}. Generate content in ${get(LANGUAGES, r, r)} language.`, askAiProcessingAtom = atom$1(!1), useAskAi = () => {
+  const [o, r] = useAtom$1(askAiProcessingAtom), [n, a] = useState(null), l = useBuilderProp("askAiCallBack", null), i = useStreamMultipleBlocksProps(), c = useUpdateMultipleBlocksProps(), [d] = useBlocksStore(), { selectedLang: p, fallbackLang: u } = useLanguages(), m = p.length ? p : u, f = (g, E) => {
+    const j = cloneDeep(E.find((b) => b._id === g));
+    for (const b in j) {
+      const v = j[b];
+      typeof v == "string" && startsWith(v, STYLES_KEY) ? j[b] = compact(flattenDeep(v.replace(STYLES_KEY, "").split(","))).join(" ") : b !== "_id" && delete j[b];
     }
-    return b;
+    return j;
   };
   return {
     askAi: useCallback(
-      async (f, g, b, E) => {
+      async (g, E, j, b) => {
         if (l) {
           r(!0), a(null);
           try {
-            const j = p === u ? "" : p, v = f === "content" ? pickOnlyAIProps(cloneDeep(getBlockWithChildren(g, d)), p) : [m(g, d)], S = await l(f, b, v, j), { blocks: R, error: _ } = S;
-            if (_) {
-              a(_);
+            const v = p === u ? "" : p, S = g === "content" ? pickOnlyAIProps(cloneDeep(getBlockWithChildren(E, d)), p) : [f(E, d)], w = await l(g, addLangToPrompt(j, m, g), S, v), { blocks: _, error: R } = w;
+            if (R) {
+              a(R);
               return;
             }
-            if (f === "styles") {
-              const w = R.map((B) => {
-                for (const T in B)
-                  T !== "_id" && (B[T] = `${STYLES_KEY},${B[T]}`);
-                return B;
+            if (g === "styles") {
+              const B = _.map((I) => {
+                for (const N in I)
+                  N !== "_id" && (I[N] = `${STYLES_KEY},${I[N]}`);
+                return I;
               });
-              c(w);
+              c(B);
             } else
-              i(R);
-            E && E(S);
-          } catch (j) {
-            a(j);
+              i(_);
+            b && b(w);
+          } catch (v) {
+            a(v);
           } finally {
-            r(!1), E && E();
+            r(!1), b && b();
           }
         }
       },
-      [l, r, d, p, u, c, i]
+      [
+        l,
+        r,
+        p,
+        u,
+        d,
+        m,
+        c,
+        i
+      ]
     ),
     loading: o,
     error: n
@@ -5272,8 +5470,8 @@ const AskAIStyles = ({ blockId: o }) => {
     (g = d.current) == null || g.focus();
   }, []);
   const f = (g) => {
-    const { usage: b } = g || {};
-    !l && b && m(b), p.current = setTimeout(() => m(void 0), 1e4), l || c("");
+    const { usage: E } = g || {};
+    !l && E && m(E), p.current = setTimeout(() => m(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: r("Ask AI") }),
@@ -5335,35 +5533,35 @@ const AskAIStyles = ({ blockId: o }) => {
 function ManualClasses() {
   var B;
   const { t: o } = useTranslation(), [r] = useSelectedStylingBlocks(), n = useSelectedBlock(), a = useAddClassesToBlocks(), l = useRemoveClassesFromBlocks(), [i] = useSelectedBlockIds(), c = useBuilderProp("askAiCallBack", null), [d, p] = useState(""), { toast: u } = useToast(), m = (B = first(r)) == null ? void 0 : B.prop, f = reject((get(n, m, "").replace(STYLES_KEY, "").split(",").pop() || "").split(" "), isEmpty), g = () => {
-    const T = d.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
-    a(i, T, !0), p("");
-  }, [b, E] = useState([]), j = ({ value: T }) => {
-    const N = T.trim().toLowerCase(), D = N.match(/.+:/g);
+    const I = d.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
+    a(i, I, !0), p("");
+  }, [E, j] = useState([]), b = ({ value: I }) => {
+    const N = I.trim().toLowerCase(), D = N.match(/.+:/g);
     let x = [];
     if (D && D.length > 0) {
       const [k] = D, C = N.replace(k, "");
-      x = fuse.search(C).map((I) => ({
-        ...I,
-        item: { ...I.item, name: k + I.item.name }
+      x = fuse.search(C).map((T) => ({
+        ...T,
+        item: { ...T.item, name: k + T.item.name }
       }));
     } else
       x = fuse.search(N);
-    return E(map(x, "item"));
+    return j(map(x, "item"));
   }, v = () => {
-    E([]);
-  }, S = (T) => T.name, R = (T) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "rounded-md p-1", children: T.name }), _ = {
+    j([]);
+  }, S = (I) => I.name, w = (I) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "rounded-md p-1", children: I.name }), _ = {
     autoComplete: "off",
     autoCorrect: "off",
     autoCapitalize: "off",
     spellCheck: !1,
     placeholder: o("Enter classes separated by space"),
     value: d,
-    onKeyDown: (T) => {
-      T.key === "Enter" && d.trim() !== "" && g();
+    onKeyDown: (I) => {
+      I.key === "Enter" && d.trim() !== "" && g();
     },
-    onChange: (T, { newValue: N }) => p(N),
+    onChange: (I, { newValue: N }) => p(N),
     className: "w-full rounded-md text-xs px-2 hover:outline-0 bg-background border-border py-1"
-  }, w = () => {
+  }, R = () => {
     if (navigator.clipboard === void 0) {
       u({
         title: o("Clipboard not supported"),
@@ -5380,13 +5578,13 @@ function ManualClasses() {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
-      className: `flex ${b.length > 0 ? "min-h-[300px]" : "min-h-max"} w-full flex-col gap-y-1.5 overflow-y-auto pb-4`,
+      className: `flex ${E.length > 0 ? "min-h-[300px]" : "min-h-max"} w-full flex-col gap-y-1.5 overflow-y-auto pb-4`,
       children: [
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between gap-x-2", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-x-2 text-muted-foreground", children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: o("classes") }),
             /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsx(CopyIcon, { onClick: w, className: "cursor-pointer" }) }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsx(CopyIcon, { onClick: R, className: "cursor-pointer" }) }),
               /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: o("Copy classes to clipboard") }) })
             ] })
           ] }),
@@ -5402,11 +5600,11 @@ function ManualClasses() {
           /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "relative flex w-full items-center gap-x-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
             Autosuggest,
             {
-              suggestions: b,
-              onSuggestionsFetchRequested: j,
+              suggestions: E,
+              onSuggestionsFetchRequested: b,
               onSuggestionsClearRequested: v,
               getSuggestionValue: S,
-              renderSuggestion: R,
+              renderSuggestion: w,
               inputProps: _,
               containerProps: {
                 className: "relative h-8 w-full gap-y-1 py-1 border-border"
@@ -5431,22 +5629,22 @@ function ManualClasses() {
           )
         ] }),
         /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex w-full flex-wrap gap-2 overflow-x-hidden", children: React.Children.toArray(
-          f.map((T) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          f.map((I) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
             "div",
             {
               className: "group relative flex max-w-[260px] cursor-default items-center gap-x-1 truncate rounded border border-border bg-gray-200 p-px px-1.5 text-[11px] text-gray-600 hover:border-gray-300 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300",
               children: [
-                T,
+                I,
                 /* @__PURE__ */ jsxRuntimeExports.jsx(
                   Cross2Icon,
                   {
-                    onClick: () => l(i, [T]),
+                    onClick: () => l(i, [I]),
                     className: "invisible absolute right-1 rounded-full bg-red-400 hover:text-white group-hover:visible group-hover:cursor-pointer"
                   }
                 )
               ]
             },
-            T
+            I
           ))
         ) })
       ]
@@ -5839,8 +6037,8 @@ const RangeChoices = ({ property: o, onChange: r }) => {
 }, ColorChoice = ({ property: o, onChange: r }) => {
   const n = useCurrentClassByProperty(o), a = useMemo(() => get(n, "cls", ""), [n]), { canChange: l } = useContext(StyleContext), [i, c] = useState([]), [d, p] = useState({ color: "", shade: "" }), u = a.split("-"), m = get(u, "1", ""), f = get(u, "2", ""), g = useCallback(
     // eslint-disable-next-line no-shadow
-    (E) => {
-      ["current", "inherit", "transparent", "black", "white"].includes(E) ? (c([]), p({ color: E })) : (c(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]), p((j) => ({ ...j, color: E, shade: j.shade ? j.shade : "500" })));
+    (j) => {
+      ["current", "inherit", "transparent", "black", "white"].includes(j) ? (c([]), p({ color: j })) : (c(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]), p((b) => ({ ...b, color: j, shade: b.shade ? b.shade : "500" })));
     },
     [c, p]
   );
@@ -5849,18 +6047,18 @@ const RangeChoices = ({ property: o, onChange: r }) => {
       return c([]);
     c(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]);
   }, [m]);
-  const b = useCallback(
+  const E = useCallback(
     // eslint-disable-next-line no-shadow
-    (E) => {
-      p({ color: m, shade: E });
+    (j) => {
+      p({ color: m, shade: j });
     },
     [m]
   );
   return useEffect(() => {
     p({ color: "", shade: "" });
   }, [n]), useEffect(() => {
-    const j = `${get(COLOR_PROP, o, "")}-${d.color}${d.shade ? `-${d.shade}` : ""}`;
-    j.match(new RegExp(get(CLASSES_LIST, `${o}.regExp`, ""))) && r(j, o);
+    const b = `${get(COLOR_PROP, o, "")}-${d.color}${d.shade ? `-${d.shade}` : ""}`;
+    b.match(new RegExp(get(CLASSES_LIST, `${o}.regExp`, ""))) && r(b, o);
   }, [d, r, o]), /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-row divide-x divide-solid divide-border rounded-lg border border-transparent text-xs", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grow text-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
       DropDown,
@@ -5901,7 +6099,7 @@ const RangeChoices = ({ property: o, onChange: r }) => {
         ]
       }
     ) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", className: "grow text-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(DropDown, { rounded: !0, selected: f, disabled: !m || !l, onChange: b, options: i }) })
+    /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", className: "grow text-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(DropDown, { rounded: !0, selected: f, disabled: !m || !l, onChange: E, options: i }) })
   ] });
 }, getUserInputValues = (o, r) => {
   o = o.toLowerCase();
@@ -6096,7 +6294,7 @@ const RangeChoices = ({ property: o, onChange: r }) => {
   },
   a
 )) }), THROTTLE_TIME = 50, AdvanceChoices = (o) => {
-  const [r, n] = useState(!1), [a, l] = useState(""), { currentClass: i, onChange: c, classPrefix: d, cssProperty: p, units: u, negative: m } = o, [f, g] = useState(p != null && p.toLowerCase().includes("width") ? "%" : u[0]), [b, E] = useState(!1), [j, v] = useState(""), [S, R] = useState(!1), [_, w] = useState(!1);
+  const [r, n] = useState(!1), [a, l] = useState(""), { currentClass: i, onChange: c, classPrefix: d, cssProperty: p, units: u, negative: m } = o, [f, g] = useState(p != null && p.toLowerCase().includes("width") ? "%" : u[0]), [E, j] = useState(!1), [b, v] = useState(""), [S, w] = useState(!1), [_, R] = useState(!1);
   useEffect(() => {
     const { value: x, unit: k } = getClassValueAndUnit(i);
     if (k === "") {
@@ -6105,11 +6303,11 @@ const RangeChoices = ({ property: o, onChange: r }) => {
     }
     g(k), l(k === "class" || isEmpty(x) ? "" : x);
   }, [i, p, u]);
-  const B = useThrottledCallback((x) => c(x), [c], THROTTLE_TIME), T = useThrottledCallback((x) => c(x, !1), [c], THROTTLE_TIME), N = useCallback(
+  const B = useThrottledCallback((x) => c(x), [c], THROTTLE_TIME), I = useThrottledCallback((x) => c(x, !1), [c], THROTTLE_TIME), N = useCallback(
     (x = !1) => {
       const k = getUserInputValues(`${a}`, u);
       if (get(k, "error", !1)) {
-        E(!0);
+        j(!0);
         return;
       }
       const C = get(k, "unit") !== "" ? get(k, "unit") : f;
@@ -6119,15 +6317,15 @@ const RangeChoices = ({ property: o, onChange: r }) => {
       }
       if (get(k, "value") === "")
         return;
-      const I = `${get(k, "value", "").startsWith("-") ? "-" : ""}${d}[${get(k, "value", "").replace("-", "")}${C === "-" ? "" : C}]`;
-      x ? T(I) : B(I);
+      const T = `${get(k, "value", "").startsWith("-") ? "-" : ""}${d}[${get(k, "value", "").replace("-", "")}${C === "-" ? "" : C}]`;
+      x ? I(T) : B(T);
     },
-    [B, T, a, f, d, u]
+    [B, I, a, f, d, u]
   ), D = useCallback(
     (x) => {
       const k = getUserInputValues(`${a}`, u);
       if (get(k, "error", !1)) {
-        E(!0);
+        j(!0);
         return;
       }
       if (x === "auto" || x === "none") {
@@ -6136,8 +6334,8 @@ const RangeChoices = ({ property: o, onChange: r }) => {
       }
       if (get(k, "value") === "")
         return;
-      const C = get(k, "unit") !== "" ? get(k, "unit") : x, I = `${get(k, "value", "").startsWith("-") ? "-" : ""}${d}[${get(k, "value", "").replace("-", "")}${C === "-" ? "" : C}]`;
-      B(I);
+      const C = get(k, "unit") !== "" ? get(k, "unit") : x, T = `${get(k, "value", "").startsWith("-") ? "-" : ""}${d}[${get(k, "value", "").replace("-", "")}${C === "-" ? "" : C}]`;
+      B(T);
     },
     [B, a, d, u]
   );
@@ -6159,28 +6357,28 @@ const RangeChoices = ({ property: o, onChange: r }) => {
           onKeyDown: (x) => {
             if (x.keyCode !== 38 && x.keyCode !== 40)
               return;
-            x.preventDefault(), w(!0);
+            x.preventDefault(), R(!0);
             const k = parseInt$1(x.target.value);
             let C = isNaN$1(k) ? 0 : k;
             x.keyCode === 38 && (C += 1), x.keyCode === 40 && (C -= 1);
             const A = `${C}`, L = `${A.startsWith("-") ? "-" : ""}${d}[${A.replace("-", "")}${f === "-" ? "" : f}]`;
-            T(L);
+            I(L);
           },
           onKeyUp: (x) => {
-            _ && (x.preventDefault(), w(!1));
+            _ && (x.preventDefault(), R(!1));
           },
           onBlur: () => N(),
           onChange: (x) => {
-            E(!1), l(x.target.value);
+            j(!1), l(x.target.value);
           },
           onClick: (x) => {
             var k;
             (k = x == null ? void 0 : x.target) == null || k.select(), n(!1);
           },
-          value: S ? j : a,
+          value: S ? b : a,
           className: "h-6 w-14 rounded rounded-r-none border border-transparent bg-background pl-2 text-sm focus-visible:outline-0".concat(
             " ",
-            b ? "border-red-500 text-red-500" : "border-foreground/20"
+            E ? "border-red-500 text-red-500" : "border-foreground/20"
           )
         }
       ),
@@ -6212,9 +6410,9 @@ const RangeChoices = ({ property: o, onChange: r }) => {
     ["none", "auto"].indexOf(f) !== -1 || S ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(
       DragStyleButton,
       {
-        onDragStart: () => R(!0),
+        onDragStart: () => w(!0),
         onDragEnd: (x) => {
-          if (v(() => ""), R(!1), isEmpty(x))
+          if (v(() => ""), w(!1), isEmpty(x))
             return;
           const k = `${x}`, A = `${k.startsWith("-") ? "-" : ""}${d}[${k.replace("-", "")}${f === "-" ? "" : f}]`;
           B(A);
@@ -6224,7 +6422,7 @@ const RangeChoices = ({ property: o, onChange: r }) => {
             return;
           v(x);
           const k = `${x}`, A = `${k.startsWith("-") ? "-" : ""}${d}[${k.replace("-", "")}${f === "-" ? "" : f}]`;
-          T(A);
+          I(A);
         },
         currentValue: a,
         unit: f,
@@ -6321,22 +6519,22 @@ const RangeChoices = ({ property: o, onChange: r }) => {
   "2xl": "1536px"
 }, getBreakpoint = (o) => `${o.toUpperCase()} ${BREAKPOINTS[o] ? `(${BREAKPOINTS[o]} & up)` : ""}`, BlockStyle = (o) => {
   const { t: r } = useTranslation(), { type: n = "icons", label: a, property: l, onEmitChange: i = () => {
-  }, units: c, negative: d = !1 } = o, [p] = useDarkMode(), [u] = useStylingState(), [, m] = useCanvasWidth(), f = useCurrentClassByProperty(l), g = useAddClassesToBlocks(), b = useRemoveClassesFromBlocks(), [E] = useSelectedBlockIds(), j = useMemo(() => get(f, "fullCls", ""), [f]), v = useCallback(
-    (T, N = !0) => {
-      const D = { dark: p, mq: m, mod: u, cls: T, property: l, fullCls: "" };
+  }, units: c, negative: d = !1 } = o, [p] = useDarkMode(), [u] = useStylingState(), [, m] = useCanvasWidth(), f = useCurrentClassByProperty(l), g = useAddClassesToBlocks(), E = useRemoveClassesFromBlocks(), [j] = useSelectedBlockIds(), b = useMemo(() => get(f, "fullCls", ""), [f]), v = useCallback(
+    (I, N = !0) => {
+      const D = { dark: p, mq: m, mod: u, cls: I, property: l, fullCls: "" };
       (p || u !== "") && (D.mq = "xs");
       const x = generateFullClsName(D);
-      g(E, [x], N);
+      g(j, [x], N);
     },
-    [E, p, m, u, l, g]
+    [j, p, m, u, l, g]
   ), S = useCallback(() => {
-    b(E, [j]);
-  }, [E, j, b]), R = useMemo(() => canChangeClass(f, m), [f, m]);
+    E(j, [b]);
+  }, [j, b, E]), w = useMemo(() => canChangeClass(f, m), [f, m]);
   useEffect(() => {
-    i(R, f);
-  }, [R, i, f]);
-  const [, , _] = useCanvasWidth(), w = useCallback(
-    (T) => {
+    i(w, f);
+  }, [w, i, f]);
+  const [, , _] = useCanvasWidth(), R = useCallback(
+    (I) => {
       _({
         xs: 400,
         sm: 640,
@@ -6344,11 +6542,11 @@ const RangeChoices = ({ property: o, onChange: r }) => {
         lg: 1024,
         xl: 1420,
         "2xl": 1920
-      }[T]);
+      }[I]);
     },
     [_]
   ), B = get(f, "dark", null) === p && get(f, "mod", null) === u && get(f, "mq", null) === m;
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(BlockStyleProvider, { canChange: R, canReset: f && B, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "group flex flex-row items-center py-2 first:pt-0 last:pb-0", children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(BlockStyleProvider, { canChange: w, canReset: f && B, 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] ${f && !B ? "text-foreground" : ""}`, children: r(a) }) }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-row items-center", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "w-[150px]", children: [
@@ -6368,7 +6566,7 @@ const RangeChoices = ({ property: o, onChange: r }) => {
         n === "color" && /* @__PURE__ */ jsxRuntimeExports.jsx(ColorChoice, { property: l, onChange: v }),
         n === "dropdown" && /* @__PURE__ */ jsxRuntimeExports.jsx(DropDownChoices, { label: a, property: l, onChange: v })
       ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `w-[30px] cursor-pointer ${j ? "visible" : "invisible"}`, children: B ? /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", onClick: () => S(), title: "Reset", className: "flex px-1.5 text-xs", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CrossCircledIcon, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : R && f ? /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { delayDuration: 100, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `w-[30px] cursor-pointer ${b ? "visible" : "invisible"}`, children: B ? /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", onClick: () => S(), title: "Reset", className: "flex px-1.5 text-xs", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CrossCircledIcon, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : w && f ? /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { delayDuration: 100, children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           "button",
           {
@@ -6388,7 +6586,7 @@ const RangeChoices = ({ property: o, onChange: r }) => {
             "button",
             {
               type: "button",
-              onClick: () => w(get(f, "mq")),
+              onClick: () => R(get(f, "mq")),
               className: "block w-full cursor-default text-right font-semibold text-blue-500",
               children: [
                 "Switch to ",
@@ -6418,18 +6616,18 @@ const RangeChoices = ({ property: o, onChange: r }) => {
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-row text-xs", children: [
           o && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "relative w-[70px] flex-none text-xs text-foreground", children: d(o) }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mb-3 flex grow flex-row flex-wrap gap-x-px", children: React__default.Children.toArray(
-            r.map(({ label: g, key: b }) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "first:rounded-l last:rounded-r", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+            r.map(({ label: g, key: E }) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "first:rounded-l last:rounded-r", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
                 "button",
                 {
                   type: "button",
-                  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"}`,
+                  onClick: () => u(E),
+                  className: `relative cursor-pointer rounded-full p-1 text-[8px] ${E === p ? "bg-[#3E57F0] text-white" : "text-gray-600 dark:text-gray-300"}`,
                   children: [
                     React__default.createElement("div", {
-                      className: f(b) ? "-bottom-1.5 absolute bg-[#3E57F0] h-[2px] left-0 w-full" : ""
+                      className: f(E) ? "-bottom-1.5 absolute bg-[#3E57F0] h-[2px] left-0 w-full" : ""
                     }),
-                    React__default.createElement(get(EDITOR_ICONS, b, BoxIcon), { className: "text-inherit w-3 h-3" })
+                    React__default.createElement(get(EDITOR_ICONS, E, BoxIcon), { className: "text-inherit w-3 h-3" })
                   ]
                 }
               ) }),
@@ -6556,10 +6754,10 @@ function BlockStyling() {
       const m = !get(i, "negative", !1), f = get(i, "cssProperty", "");
       let g = parseFloat(i.dragStartValue);
       g = isNaN(g) ? 0 : g;
-      let b = MAPPER[i.dragUnit];
-      (startsWith(f, "scale") || f === "opacity") && (b = 10);
-      let j = (i.dragStartY - u.pageY) / b + g;
-      m && j < 0 && (j = 0), f === "opacity" && j > 1 && (j = 1), i.onDrag(`${j}`), l(`${j}`);
+      let E = MAPPER[i.dragUnit];
+      (startsWith(f, "scale") || f === "opacity") && (E = 10);
+      let b = (i.dragStartY - u.pageY) / E + g;
+      m && b < 0 && (b = 0), f === "opacity" && b > 1 && (b = 1), i.onDrag(`${b}`), l(`${b}`);
     },
     [i],
     50
@@ -6645,10 +6843,10 @@ const BlockCard = ({
   library: r,
   parentId: n = void 0
 }) => {
-  const [a, l] = useState(!1), i = useBuilderProp("getUILibraryBlock", noop), { addCoreBlock: c, addPredefinedBlock: d } = useAddBlock(), [, p] = useSelectedBlockIds(), { clearHighlight: u } = useBlockHighlight(), m = get(o, "name", get(o, "label")), f = useFeature("dnd"), [, g] = useAtom$1(draggedBlockAtom), b = (v) => {
+  const [a, l] = useState(!1), i = useBuilderProp("getUILibraryBlock", noop), { addCoreBlock: c, addPredefinedBlock: d } = useAddBlock(), [, p] = useSelectedBlockIds(), { clearHighlight: u } = useBlockHighlight(), m = get(o, "name", get(o, "label")), f = useFeature("dnd"), [, g] = useAtom$1(draggedBlockAtom), E = (v) => {
     const S = has(v, "styles_attrs.data-page-section");
     return v._type === "Box" && S;
-  }, E = useCallback(
+  }, j = useCallback(
     async (v) => {
       if (v.stopPropagation(), has(o, "component")) {
         c(o, n), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
@@ -6659,15 +6857,15 @@ const BlockCard = ({
       isEmpty(S) || d(syncBlocksWithDefaults(S), n), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
     },
     [o]
-  ), j = async (v) => {
+  ), b = async (v) => {
     const S = await i(r, o);
-    let R = n;
-    if (b(first(S)) && (R = null), !isEmpty(S)) {
-      const _ = { blocks: S, uiLibrary: !0, parent: R };
+    let w = n;
+    if (E(first(S)) && (w = null), !isEmpty(S)) {
+      const _ = { blocks: S, uiLibrary: !0, parent: w };
       if (v.dataTransfer.setData("text/plain", JSON.stringify(_)), o.preview) {
-        const w = new Image();
-        w.src = o.preview, w.onload = () => {
-          v.dataTransfer.setDragImage(w, 0, 0);
+        const R = new Image();
+        R.src = o.preview, R.onload = () => {
+          v.dataTransfer.setDragImage(R, 0, 0);
         };
       } else
         v.dataTransfer.setDragImage(new Image(), 0, 0);
@@ -6681,9 +6879,9 @@ const BlockCard = ({
       "div",
       {
         onClick: a ? () => {
-        } : E,
+        } : j,
         draggable: f ? "true" : "false",
-        onDragStart: j,
+        onDragStart: b,
         className: clsx(
           "relative mt-2 cursor-pointer overflow-hidden rounded-md border border-border bg-white duration-200 hover:border-blue-500 hover:shadow-xl"
         ),
@@ -6712,9 +6910,9 @@ const BlockCard = ({
     })();
   }, [o, l, i, c]), { data: l || [], isLoading: i === "loading" };
 }, UILibrarySection = ({ parentId: o }) => {
-  const [r, n] = useAtom$1(selectedLibraryAtom), a = useBuilderProp("uiLibraries", []), l = useChaiBlocks(), i = values(l).filter((R) => R.category === "custom"), c = a.find((R) => R.uuid === r) || first(a), { data: d, isLoading: p } = useLibraryBlocks(c), u = groupBy([...d, ...i], "group"), [m, f] = useState("Hero"), g = get(u, m, []), b = useRef(null), { t: E } = useTranslation(), j = (R) => {
-    b.current && (clearTimeout(b.current), b.current = null), b.current = setTimeout(() => {
-      b.current && f(R);
+  const [r, n] = useAtom$1(selectedLibraryAtom), a = useBuilderProp("uiLibraries", []), l = useChaiBlocks(), i = values(l).filter((w) => w.category === "custom"), c = a.find((w) => w.uuid === r) || first(a), { data: d, isLoading: p } = useLibraryBlocks(c), u = groupBy([...d, ...i], "group"), [m, f] = useState("Hero"), g = get(u, m, []), E = useRef(null), { t: j } = useTranslation(), b = (w) => {
+    E.current && (clearTimeout(E.current), E.current = null), E.current = setTimeout(() => {
+      E.current && f(w);
     }, 300);
   };
   if (p)
@@ -6722,26 +6920,26 @@ const BlockCard = ({
       /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "col-span-3 h-full" }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "col-span-9 h-full" })
     ] });
-  const v = filter(g, (R, _) => _ % 2 === 0), S = filter(g, (R, _) => _ % 2 === 1);
+  const v = filter(g, (w, _) => _ % 2 === 0), S = filter(g, (w, _) => _ % 2 === 1);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "relative mt-2 flex h-full max-h-full overflow-hidden bg-background", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex h-full pt-2", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex h-full max-h-full w-60 flex-col gap-1 px-1 pr-2", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(UILibrariesSelect, { library: c == null ? void 0 : c.uuid, setLibrary: n, uiLibraries: a }),
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-2 flex h-full max-h-full w-full flex-1 flex-col", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs font-bold text-gray-500", children: E("Groups") }),
+        /* @__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(u, (R, _) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          map(u, (w, _) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
             "div",
             {
-              onMouseEnter: () => j(_),
-              onMouseLeave: () => clearTimeout(b.current),
+              onMouseEnter: () => b(_),
+              onMouseLeave: () => clearTimeout(E.current),
               onClick: () => f(_),
               className: cn(
                 "flex w-full cursor-pointer items-center justify-between rounded-md p-2 text-sm text-foreground transition-all ease-in-out hover:bg-gray-200 dark:hover:bg-gray-800",
                 _ === m ? "bg-blue-500 text-white hover:bg-blue-600" : ""
               ),
               children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: capitalize(E(_.toLowerCase())) }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: capitalize(j(_.toLowerCase())) }),
                 /* @__PURE__ */ jsxRuntimeExports.jsx(CaretRightIcon, { className: "ml-2 h-5 w-5" })
               ]
             },
@@ -6753,15 +6951,15 @@ const BlockCard = ({
     /* @__PURE__ */ jsxRuntimeExports.jsxs(
       ScrollArea,
       {
-        onMouseEnter: () => b.current ? clearTimeout(b.current) : null,
+        onMouseEnter: () => E.current ? clearTimeout(E.current) : null,
         className: "z-10 -mt-2 flex h-full max-h-full w-full flex-col gap-2 border-l border-border transition-all ease-linear",
         children: [
           /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-2 gap-2 px-2", children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col gap-1", children: React__default.Children.toArray(
-              v.map((R) => /* @__PURE__ */ jsxRuntimeExports.jsx(BlockCard, { parentId: o, block: R, library: c }))
+              v.map((w) => /* @__PURE__ */ jsxRuntimeExports.jsx(BlockCard, { parentId: o, block: w, library: c }))
             ) }),
             /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col gap-1", children: React__default.Children.toArray(
-              S.map((R) => /* @__PURE__ */ jsxRuntimeExports.jsx(BlockCard, { parentId: o, block: R, library: c }))
+              S.map((w) => /* @__PURE__ */ jsxRuntimeExports.jsx(BlockCard, { parentId: o, block: w, library: c }))
             ) })
           ] }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
@@ -7267,12 +7465,12 @@ i18n.use(initReactI18next).init({
 const CoreBlock = ({ block: o, disabled: r, parentId: n }) => {
   const [, a] = useAtom$1(draggedBlockAtom), { type: l, icon: i, label: c } = o, { addCoreBlock: d, addPredefinedBlock: p } = useAddBlock(), [, u] = useSelectedBlockIds(), { clearHighlight: m } = useBlockHighlight(), f = () => {
     if (has(o, "blocks")) {
-      const E = isFunction$1(o.blocks) ? o.blocks() : o.blocks;
-      p(syncBlocksWithDefaults(E), n || null);
+      const j = isFunction$1(o.blocks) ? o.blocks() : o.blocks;
+      p(syncBlocksWithDefaults(j), n || null);
     } else
       d(o, n || null);
     pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
-  }, g = useFeature("dnd"), { t: b } = useTranslation();
+  }, g = useFeature("dnd"), { t: E } = useTranslation();
   return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "button",
@@ -7280,8 +7478,8 @@ const CoreBlock = ({ block: o, disabled: r, parentId: n }) => {
         disabled: r,
         onClick: f,
         type: "button",
-        onDragStart: (E) => {
-          E.dataTransfer.setData("text/plain", JSON.stringify(omit(o, ["component", "icon"]))), E.dataTransfer.setDragImage(new Image(), 0, 0), a(omit(o, ["component", "icon"])), setTimeout(() => {
+        onDragStart: (j) => {
+          j.dataTransfer.setData("text/plain", JSON.stringify(omit(o, ["component", "icon"]))), j.dataTransfer.setDragImage(new Image(), 0, 0), a(omit(o, ["component", "icon"])), setTimeout(() => {
             u([]), m();
           }, 200);
         },
@@ -7289,11 +7487,11 @@ const CoreBlock = ({ block: o, disabled: r, parentId: n }) => {
         className: "cursor-pointer space-y-2 rounded-lg border border-border p-3 text-center hover:bg-slate-300/50 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-gray-400 dark:border-gray-700 dark:text-white dark:hover:bg-slate-800/50 dark:disabled:bg-gray-900 dark:disabled:text-foreground",
         children: [
           createElement(i || BoxIcon, { className: "w-4 h-4 mx-auto" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "truncate text-xs", children: capitalize(b(c || l)) })
+          /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "truncate text-xs", children: capitalize(E(c || l)) })
         ]
       }
     ) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: b(c || l) }) })
+    /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: E(c || l) }) })
   ] }) });
 }, DefaultChaiBlocks = ({ parentId: o, gridCols: r = "grid-cols-2" }) => {
   const n = useChaiBlocks(), a = useBuilderProp("filterChaiBlock", () => !0), l = filter(n, a), i = groupBy(l, "category"), c = uniq(map(i.core, "group"));
@@ -7389,195 +7587,7 @@ function FaLanguage(o) {
 function FaStar(o) {
   return GenIcon({ tag: "svg", attr: { viewBox: "0 0 576 512" }, child: [{ tag: "path", attr: { d: "M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z" }, child: [] }] })(o);
 }
-const LANGUAGES = {
-  ab: "Abkhazian",
-  aa: "Afar",
-  af: "Afrikaans",
-  ak: "Akan",
-  sq: "Albanian",
-  am: "Amharic",
-  ar: "Arabic",
-  an: "Aragonese",
-  hy: "Armenian",
-  as: "Assamese",
-  av: "Avaric",
-  ae: "Avestan",
-  ay: "Aymara",
-  az: "Azerbaijani",
-  bm: "Bambara",
-  ba: "Bashkir",
-  eu: "Basque",
-  be: "Belarusian",
-  bn: "Bengali",
-  bh: "Bihari",
-  bi: "Bislama",
-  bs: "Bosnian",
-  br: "Breton",
-  bg: "Bulgarian",
-  my: "Burmese",
-  ca: "Catalan",
-  ch: "Chamorro",
-  ce: "Chechen",
-  ny: "Chichewa",
-  zh: "Chinese",
-  "zh-Hans": "Chinese (Simplified)",
-  "zh-Hant": "Chinese (Traditional)",
-  cv: "Chuvash",
-  kw: "Cornish",
-  co: "Corsican",
-  cr: "Cree",
-  hr: "Croatian",
-  cs: "Czech",
-  da: "Danish",
-  dv: "Maldivian",
-  nl: "Dutch",
-  dz: "Dzongkha",
-  en: "English",
-  eo: "Esperanto",
-  et: "Estonian",
-  ee: "Ewe",
-  fo: "Faroese",
-  fj: "Fijian",
-  fi: "Finnish",
-  fr: "French",
-  ff: "Fula, Pular",
-  gl: "Galician",
-  gd: "Gaelic (Scottish)",
-  gv: "Manx",
-  ka: "Georgian",
-  de: "German",
-  el: "Greek",
-  kl: "Kalaallisut",
-  gn: "Guarani",
-  gu: "Gujarati",
-  ht: "Haitian Creole",
-  ha: "Hausa",
-  he: "Hebrew",
-  hz: "Herero",
-  hi: "Hindi",
-  ho: "Hiri Motu",
-  hu: "Hungarian",
-  is: "Icelandic",
-  io: "Ido",
-  ig: "Igbo",
-  id: "Indonesian",
-  ia: "Interlingua",
-  ie: "Interlingue",
-  iu: "Inuktitut",
-  ik: "Inupiak",
-  ga: "Irish",
-  it: "Italian",
-  ja: "Japanese",
-  jv: "Javanese",
-  kn: "Kannada",
-  kr: "Kanuri",
-  ks: "Kashmiri",
-  kk: "Kazakh",
-  km: "Khmer",
-  ki: "Kikuyu",
-  rw: "Kinyarwanda",
-  rn: "Kirundi",
-  ky: "Kyrgyz",
-  kv: "Komi",
-  kg: "Kongo",
-  ko: "Korean",
-  ku: "Kurdish",
-  kj: "Kwanyama",
-  lo: "Lao",
-  la: "Latin",
-  lv: "Latvian",
-  li: "Limburgish",
-  ln: "Lingala",
-  lt: "Lithuanian",
-  lu: "Luga-Katanga",
-  lg: "Luganda, Ganda",
-  lb: "Luxembourgish",
-  mk: "Macedonian",
-  mg: "Malagasy",
-  ms: "Malay",
-  ml: "Malayalam",
-  mt: "Maltese",
-  mi: "Maori",
-  mr: "Marathi",
-  mh: "Marshallese",
-  mo: "Moldavian",
-  mn: "Mongolian",
-  na: "Nauru",
-  nv: "Navajo",
-  ng: "Ndonga",
-  nd: "Northern Ndebele",
-  ne: "Nepali",
-  no: "Norwegian",
-  nb: "Norwegian bokmål",
-  nn: "Norwegian nynorsk",
-  ii: "Sichuan Yi",
-  oc: "Occitan",
-  oj: "Ojibwe",
-  cu: "Old Church Slavonic",
-  or: "Oriya",
-  om: "Oromo",
-  os: "Ossetian",
-  pi: "Pāli",
-  ps: "Pashto, Pushto",
-  fa: "Persian (Farsi)",
-  pl: "Polish",
-  pt: "Portuguese",
-  pa: "Punjabi (Eastern)",
-  qu: "Quechua",
-  rm: "Romansh",
-  ro: "Romanian",
-  ru: "Russian",
-  se: "Sami",
-  sm: "Samoan",
-  sg: "Sango",
-  sa: "Sanskrit",
-  sr: "Serbian",
-  sh: "Serbo-Croatian",
-  st: "Sesotho",
-  tn: "Setswana",
-  sn: "Shona",
-  sd: "Sindhi",
-  si: "Sinhalese",
-  ss: "Swati",
-  sk: "Slovak",
-  sl: "Slovenian",
-  so: "Somali",
-  nr: "Southern Ndebele",
-  es: "Spanish",
-  su: "Sundanese",
-  sw: "Swahili (Kiswahili)",
-  sv: "Swedish",
-  tl: "Tagalog",
-  ty: "Tahitian",
-  tg: "Tajik",
-  ta: "Tamil",
-  tt: "Tatar",
-  te: "Telugu",
-  th: "Thai",
-  bo: "Tibetan",
-  ti: "Tigrinya",
-  to: "Tonga",
-  ts: "Tsonga",
-  tr: "Turkish",
-  tk: "Turkmen",
-  tw: "Twi",
-  ug: "Uyghur",
-  uk: "Ukrainian",
-  ur: "Urdu",
-  uz: "Uzbek",
-  ve: "Venda",
-  vi: "Vietnamese",
-  vo: "Volapük",
-  wa: "Wallon",
-  cy: "Welsh",
-  wo: "Wolof",
-  fy: "Western Frisian",
-  xh: "Xhosa",
-  yi: "Yiddish",
-  yo: "Yoruba",
-  za: "Zhuang, Chuang",
-  zu: "Zulu"
-}, QUICK_PROMPTS = [
+const QUICK_PROMPTS = [
   {
     name: "Improve writing",
     icon: FaFilePen,
@@ -7658,12 +7668,12 @@ function QuickPrompts({ onClick: o }) {
 const AIUserPrompt = ({ blockId: o }) => {
   const { t: r } = useTranslation(), { askAi: n, loading: a, error: l } = useAskAi(), [i, c] = useState(""), [d, p] = useState(!0), [u, m] = useState(), f = useRef(null), g = useRef(null);
   useEffect(() => {
-    var E;
-    (E = f.current) == null || E.focus();
+    var j;
+    (j = f.current) == null || j.focus();
   }, []);
-  const b = (E) => {
-    const { usage: j } = E || {};
-    !l && j && m(j), g.current = setTimeout(() => m(void 0), 1e4), l || c("");
+  const E = (j) => {
+    const { usage: b } = j || {};
+    !l && b && m(b), g.current = setTimeout(() => m(void 0), 1e4), l || c("");
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs(
@@ -7683,12 +7693,12 @@ const AIUserPrompt = ({ blockId: o }) => {
         {
           ref: f,
           value: i,
-          onChange: (E) => c(E.target.value),
+          onChange: (j) => c(j.target.value),
           placeholder: r("Ask AI to edit content"),
           className: "w-full",
           rows: 3,
-          onKeyDown: (E) => {
-            E.key === "Enter" && (E.preventDefault(), g.current && clearTimeout(g.current), m(void 0), n("content", o, i, b));
+          onKeyDown: (j) => {
+            j.key === "Enter" && (j.preventDefault(), g.current && clearTimeout(g.current), m(void 0), n("content", o, i, E));
           }
         }
       ),
@@ -7698,7 +7708,7 @@ const AIUserPrompt = ({ blockId: o }) => {
           {
             disabled: i.trim().length < 5 || a,
             onClick: () => {
-              g.current && clearTimeout(g.current), m(void 0), n("content", o, i, b);
+              g.current && clearTimeout(g.current), m(void 0), n("content", o, i, E);
             },
             variant: "default",
             className: "w-fit",
@@ -7730,8 +7740,8 @@ const AIUserPrompt = ({ blockId: o }) => {
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         QuickPrompts,
         {
-          onClick: (E) => {
-            g.current && clearTimeout(g.current), m(void 0), n("content", o, E, b);
+          onClick: (j) => {
+            g.current && clearTimeout(g.current), m(void 0), n("content", o, j, E);
           }
         }
       )
@@ -7745,15 +7755,15 @@ const AIUserPrompt = ({ blockId: o }) => {
   useEffect(() => {
     r && a(r);
   }, [r]);
-  const b = async () => {
+  const E = async () => {
     try {
       d(!0), u(null), await i(n), f({
         title: o("Updated AI Context"),
         description: o("You can now Ask AI to edit your content"),
         variant: "default"
       }), g.current.click();
-    } catch (E) {
-      u(E);
+    } catch (j) {
+      u(j);
     } finally {
       d(!1);
     }
@@ -7761,8 +7771,8 @@ const AIUserPrompt = ({ blockId: o }) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     Accordion,
     {
-      onValueChange: (E) => {
-        m(E !== "");
+      onValueChange: (j) => {
+        m(j !== "");
       },
       type: "single",
       collapsible: !0,
@@ -7774,12 +7784,12 @@ const AIUserPrompt = ({ blockId: o }) => {
             {
               ref: l,
               value: n,
-              onChange: (E) => a(E.target.value),
+              onChange: (j) => a(j.target.value),
               placeholder: o("Tell about this page eg this page is about"),
               className: "mt-1 w-full",
               rows: 10,
-              onKeyDown: (E) => {
-                E.key === "Enter" && (E.preventDefault(), b());
+              onKeyDown: (j) => {
+                j.key === "Enter" && (j.preventDefault(), E());
               }
             }
           ),
@@ -7791,7 +7801,7 @@ const AIUserPrompt = ({ blockId: o }) => {
               Button,
               {
                 disabled: n.trim().length < 5,
-                onClick: () => b(),
+                onClick: () => E(),
                 variant: "default",
                 className: "w-fit",
                 size: "sm",
@@ -7820,7 +7830,7 @@ const AIUserPrompt = ({ blockId: o }) => {
                     AlertDialogAction,
                     {
                       onClick: () => {
-                        a(""), b();
+                        a(""), E();
                       },
                       children: o("Yes, Delete")
                     }
@@ -7841,42 +7851,42 @@ const AIUserPrompt = ({ blockId: o }) => {
     /* @__PURE__ */ jsxRuntimeExports.jsx(AIUserPrompt, { blockId: first(o) })
   ] });
 }, AttrsEditor = React__default.memo(function o({ preloadedAttributes: r = [], onAttributesChange: n }) {
-  const [a, l] = useState([]), [i, c] = useState(""), [d, p] = useState(""), [u, m] = useState(null), [f, g] = useState(""), b = useRef(null), E = useRef(null);
+  const [a, l] = useState([]), [i, c] = useState(""), [d, p] = useState(""), [u, m] = useState(null), [f, g] = useState(""), E = useRef(null), j = useRef(null);
   useEffect(() => {
     l(r);
   }, [r]);
-  const j = () => {
+  const b = () => {
     if (i.startsWith("@")) {
       g("Attribute keys cannot start with '@'");
       return;
     }
     if (i) {
-      const w = [...a, { key: i, value: d }];
-      n(w), l(a), c(""), p(""), g("");
+      const R = [...a, { key: i, value: d }];
+      n(R), l(a), c(""), p(""), g("");
     }
-  }, v = (w) => {
-    const B = a.filter((T, N) => N !== w);
+  }, v = (R) => {
+    const B = a.filter((I, N) => N !== R);
     n(B), l(B);
-  }, S = (w) => {
-    m(w), c(a[w].key), p(a[w].value);
-  }, R = () => {
+  }, S = (R) => {
+    m(R), c(a[R].key), p(a[R].value);
+  }, w = () => {
     if (i.startsWith("@")) {
       g("Attribute keys cannot start with '@'");
       return;
     }
     if (u !== null && i) {
-      const w = [...a];
-      w[u] = { key: i, value: d }, n(w), l(w), m(null), c(""), p(""), g("");
+      const R = [...a];
+      R[u] = { key: i, value: d }, n(R), l(R), m(null), c(""), p(""), g("");
     }
-  }, _ = (w) => {
-    w.key === "Enter" && !w.shiftKey && (w.preventDefault(), u !== null ? R() : j());
+  }, _ = (R) => {
+    R.key === "Enter" && !R.shiftKey && (R.preventDefault(), u !== null ? w() : b());
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "max-w-full", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "form",
       {
-        onSubmit: (w) => {
-          w.preventDefault(), u !== null ? R() : j();
+        onSubmit: (R) => {
+          R.preventDefault(), u !== null ? w() : b();
         },
         className: "space-y-3",
         children: [
@@ -7890,9 +7900,9 @@ const AIUserPrompt = ({ blockId: o }) => {
                   autoCorrect: "off",
                   spellCheck: "false",
                   id: "attrKey",
-                  ref: b,
+                  ref: E,
                   value: i,
-                  onChange: (w) => c(w.target.value),
+                  onChange: (R) => c(R.target.value),
                   placeholder: "Key",
                   className: "h-8 text-sm"
                 }
@@ -7908,9 +7918,9 @@ const AIUserPrompt = ({ blockId: o }) => {
                   spellCheck: "false",
                   id: "attrValue",
                   rows: 2,
-                  ref: E,
+                  ref: j,
                   value: d,
-                  onChange: (w) => p(w.target.value),
+                  onChange: (R) => p(R.target.value),
                   onKeyDown: _,
                   placeholder: "Value",
                   className: "bg-background text-sm"
@@ -7923,10 +7933,10 @@ const AIUserPrompt = ({ blockId: o }) => {
         ]
       }
     ),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-4 space-y-1 overflow-y-auto", children: a.map((w, B) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between rounded bg-muted p-1.5 text-sm", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-4 space-y-1 overflow-y-auto", children: a.map((R, B) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between rounded bg-muted p-1.5 text-sm", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mr-2 flex flex-col", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "truncate font-semibold", children: w.key }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-wrap max-w-[200px] text-muted-foreground", children: w.value.toString() })
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "truncate font-semibold", children: R.key }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-wrap max-w-[200px] text-muted-foreground", children: R.value.toString() })
       ] }),
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-shrink-0", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsxs(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => S(B), children: [
@@ -8300,7 +8310,7 @@ const ChooseLayout = ({ open: o, close: r }) => {
       ] }) })
     ] })
   ] });
-}, TopBar = lazy(() => import("./Topbar-Npy8Q-99.js"));
+}, TopBar = lazy(() => import("./Topbar-34AjGxOm.js"));
 function useSidebarMenuItems(o) {
   const r = o === "SINGLE_SIDE_PANEL", { t: n } = useTranslation(), a = useBuilderProp("askAiCallBack", null);
   return useMemo(() => {
@@ -8339,19 +8349,19 @@ const RootLayout = () => {
           /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-14 w-screen shrink-0 border-b border-border", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Suspense, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(TopBar, {}) }) }),
           /* @__PURE__ */ jsxRuntimeExports.jsxs("main", { className: "relative flex h-[calc(100vh-56px)] max-w-full flex-1 flex-row", children: [
             /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex w-12 flex-col items-center justify-between border-r border-border py-2", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col", children: m.map((g, b) => /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col", children: m.map((g, E) => /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
                 /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
                   Button,
                   {
-                    variant: o === b ? "default" : "ghost",
+                    variant: o === E ? "default" : "ghost",
                     className: "mb-2 rounded-lg p-2 transition-colors",
-                    onClick: () => d(b),
+                    onClick: () => d(E),
                     children: get(g, "icon", null)
                   },
-                  b
+                  E
                 ) }),
                 /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: u(g.label) }) })
-              ] }, "button" + b)) }),
+              ] }, "button" + E)) }),
               /* @__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: 15 }) }) }),