@chaibuilder/sdk 3.2.0 → 3.2.2

package/dist/{index-CAiYwkFz.js → index-CPvjpLmN.js}

@@ -13,7 +13,7 @@ import { twMerge } from "tailwind-merge";
 import TreeModel from "tree-model";
 import * as React from "react";
 import React__default, { useEffect, useCallback, useState, useMemo, useRef, Component, Children, memo, createElement, createContext, useContext, Suspense, lazy, useReducer, useDebugValue } from "react";
-import { C as COLLECTION_PREFIX, S as STYLES_KEY, j as getSplitChaiClasses, h as getBlocksFromHTML, m as mergeBlocksWithExisting, e as adjustSpacingInContentBlocks, a as applyBindingToBlockProps, b as applyLanguage, g as getBlockTagAttributes, c as getBlockRuntimeProps, d as applyLimit, R as REPEATER_PREFIX, D as DESIGN_TOKEN_PREFIX, k as ROOT_TEMP_KEY } from "./apply-binding-CSWwWMjY.js";
+import { C as COLLECTION_PREFIX, S as STYLES_KEY, j as getSplitChaiClasses, h as getBlocksFromHTML, m as mergeBlocksWithExisting, e as adjustSpacingInContentBlocks, a as applyBindingToBlockProps, b as applyLanguage, g as getBlockTagAttributes, c as getBlockRuntimeProps, d as applyLimit, R as REPEATER_PREFIX, D as DESIGN_TOKEN_PREFIX, k as ROOT_TEMP_KEY } from "./apply-binding-B11pPFEE.js";
 import { d as defaultThemeOptions, f as defaultThemeValues, a as getChaiThemeCssVariables, g as getChaiThemeOptions, p as plugin, h as getThemeFontsUrls, i as getThemeCustomFontFace } from "./plugin-BOcGV_IY.js";
 import { isObject } from "@rjsf/utils";
 import { toast, Toaster } from "sonner";
@@ -1059,13 +1059,13 @@ const undoRedoStateAtom = atom({
   } = useBlocksStoreManager();
   return {
     moveBlocks: (x, b, y) => {
-      const C = map(x, (v) => {
-        const B = n.find((E) => E._id === v)._parent || null, w = n.filter((E) => B ? E._parent === B : !E._parent).map((E) => E._id).indexOf(v);
-        return { _id: v, oldParent: B, oldPosition: w };
-      }), k = C.find(({ _id: v }) => v === x[0]);
+      const C = map(x, (S) => {
+        const B = n.find((j) => j._id === S)._parent || null, w = n.filter((j) => B ? j._parent === B : !j._parent).map((j) => j._id).indexOf(S);
+        return { _id: S, oldParent: B, oldPosition: w };
+      }), k = C.find(({ _id: S }) => S === x[0]);
       k && k.oldParent === b && k.oldPosition === y || (l(x, b, y), o({
-        undo: () => each(C, ({ _id: v, oldParent: A, oldPosition: B }) => {
-          l([v], A, B);
+        undo: () => each(C, ({ _id: S, oldParent: A, oldPosition: B }) => {
+          l([S], A, B);
         }),
         redo: () => l(x, b, y)
       }));
@@ -1078,7 +1078,7 @@ const undoRedoStateAtom = atom({
     },
     removeBlocks: (x) => {
       var k;
-      const b = (k = first(x)) == null ? void 0 : k._parent, C = n.filter((v) => b ? v._parent === b : !v._parent).indexOf(first(x));
+      const b = (k = first(x)) == null ? void 0 : k._parent, C = n.filter((S) => b ? S._parent === b : !S._parent).indexOf(first(x));
       i(map(x, "_id")), o({
         undo: () => a(x, b, C),
         redo: () => i(map(x, "_id"))
@@ -1090,9 +1090,9 @@ const undoRedoStateAtom = atom({
         C = map(x, (k) => ({ _id: k, ...y }));
       else {
         const k = keys(b);
-        C = map(x, (v) => {
-          const A = n.find((_) => _._id === v), B = { _id: v };
-          return each(k, (_) => B[_] = A[_]), B;
+        C = map(x, (S) => {
+          const A = n.find((E) => E._id === S), B = { _id: S };
+          return each(k, (E) => B[E] = A[E]), B;
         });
       }
       c(map(x, (k) => ({ _id: k, ...b }))), o({
@@ -1112,8 +1112,8 @@ const undoRedoStateAtom = atom({
     updateMultipleBlocksProps: (x) => {
       let b = [];
       b = map(x, (y) => {
-        const C = keys(y), k = n.find((A) => A._id === y._id), v = {};
-        return each(C, (A) => v[A] = k[A]), v;
+        const C = keys(y), k = n.find((A) => A._id === y._id), S = {};
+        return each(C, (A) => S[A] = k[A]), S;
       }), c(x), o({
         undo: () => c(b),
         redo: () => c(x)
@@ -2602,21 +2602,21 @@ const getBlockWithChildren = (o, n) => {
         if (i) {
           n(!0), a(null);
           try {
-            const y = p === u ? "" : p, C = x.toLowerCase().includes("translate the content"), k = f === "content" ? pickOnlyAIProps(cloneDeep(getBlockWithChildren(h, d)), p, C) : [m(h, d)], v = await i(f, addLangToPrompt(x, g, f), k, y), { blocks: A, error: B } = v;
+            const y = p === u ? "" : p, C = x.toLowerCase().includes("translate the content"), k = f === "content" ? pickOnlyAIProps(cloneDeep(getBlockWithChildren(h, d)), p, C) : [m(h, d)], S = await i(f, addLangToPrompt(x, g, f), k, y), { blocks: A, error: B } = S;
             if (B) {
               a(B);
               return;
             }
             if (f === "styles") {
-              const _ = A.map((w) => {
-                for (const E in w)
-                  E !== "_id" && (w[E] = `${STYLES_KEY},${w[E]}`);
+              const E = A.map((w) => {
+                for (const j in w)
+                  j !== "_id" && (w[j] = `${STYLES_KEY},${w[j]}`);
                 return w;
               });
-              c(_);
+              c(E);
             } else
               l(A);
-            b && b(v);
+            b && b(S);
           } catch (y) {
             a(y);
           } finally {
@@ -3527,29 +3527,29 @@ function calculateElementZone(o, n, r, a, i) {
   }
 }
 function detectDropZone(o, n, r, a, i) {
-  var v, A, B, _;
+  var S, A, B, E;
   const l = o.getAttribute("data-block-id"), c = o.getAttribute("data-block-type") || "Box";
   if (!l)
     return null;
   let d = o.parentElement;
   for (; d && !d.hasAttribute("data-block-id"); )
     d = d.parentElement;
-  const p = l === "canvas" ? l : d == null ? void 0 : d.getAttribute("data-block-id"), u = d ? getOrientation(d) : "vertical", g = getOrientation(o), m = isLeafBlock(c), f = !m && canAcceptChildBlock(c, a), h = ((v = i.defaultView) == null ? void 0 : v.scrollY) || 0, x = ((A = i.defaultView) == null ? void 0 : A.scrollX) || 0;
+  const p = l === "canvas" ? l : d == null ? void 0 : d.getAttribute("data-block-id"), u = d ? getOrientation(d) : "vertical", g = getOrientation(o), m = isLeafBlock(c), f = !m && canAcceptChildBlock(c, a), h = ((S = i.defaultView) == null ? void 0 : S.scrollY) || 0, x = ((A = i.defaultView) == null ? void 0 : A.scrollX) || 0;
   if (l === "canvas" && hasChildBlocks(o)) {
-    const w = getChildBlocks(o), E = w[w.length - 1];
-    if (E) {
-      const S = E.getBoundingClientRect(), j = o.getBoundingClientRect(), N = window.getComputedStyle(o), I = parseFloat(N.paddingLeft) || 0, D = parseFloat(N.paddingRight) || 0, P = j.width - I - D, R = j.left + x + I;
+    const w = getChildBlocks(o), j = w[w.length - 1];
+    if (j) {
+      const v = j.getBoundingClientRect(), _ = o.getBoundingClientRect(), N = window.getComputedStyle(o), I = parseFloat(N.paddingLeft) || 0, P = parseFloat(N.paddingRight) || 0, D = _.width - I - P, R = _.left + x + I;
       return {
         position: "after",
         placeholderOrientation: "horizontal",
         rect: {
-          top: S.bottom + h,
+          top: v.bottom + h,
           left: R,
-          width: P,
+          width: D,
           height: 4
         },
-        targetElement: E,
-        targetBlockId: E.getAttribute("data-block-id"),
+        targetElement: j,
+        targetBlockId: j.getAttribute("data-block-id"),
         targetParentId: "canvas",
         isEmpty: !1,
         confidence: 1
@@ -3559,18 +3559,18 @@ function detectDropZone(o, n, r, a, i) {
   if (f && !m && hasChildBlocks(o)) {
     const w = detectGapZone(o, n, r, g);
     if (w) {
-      const E = w.before.getBoundingClientRect(), S = w.after.getBoundingClientRect(), j = o.getBoundingClientRect(), N = window.getComputedStyle(o), I = parseFloat(N.paddingLeft) || 0, D = parseFloat(N.paddingRight) || 0, P = getChildBlocks(o), R = getSiblingsInSameRow(P, w.before, g);
+      const j = w.before.getBoundingClientRect(), v = w.after.getBoundingClientRect(), _ = o.getBoundingClientRect(), N = window.getComputedStyle(o), I = parseFloat(N.paddingLeft) || 0, P = parseFloat(N.paddingRight) || 0, D = getChildBlocks(o), R = getSiblingsInSameRow(D, w.before, g);
       let $ = 0;
       if (R.forEach((F) => {
         const O = F.getBoundingClientRect();
         O.height > $ && ($ = O.height);
       }), g === "vertical") {
-        const F = j.width - I - D, O = j.left + x + I;
+        const F = _.width - I - P, O = _.left + x + I;
         return {
           position: "after",
           placeholderOrientation: "horizontal",
           rect: {
-            top: E.bottom + h,
+            top: j.bottom + h,
             left: O,
             width: F,
             height: 4
@@ -3583,13 +3583,13 @@ function detectDropZone(o, n, r, a, i) {
           // High confidence for gap zones
         };
       } else {
-        const F = E.top + h, O = $ > 0 ? $ : Math.max(E.height, S.height);
+        const F = j.top + h, O = $ > 0 ? $ : Math.max(j.height, v.height);
         return {
           position: "after",
           placeholderOrientation: "vertical",
           rect: {
             top: F,
-            left: E.right + x,
+            left: j.right + x,
             width: 4,
             height: O
           },
@@ -3605,18 +3605,18 @@ function detectDropZone(o, n, r, a, i) {
   if (d && p) {
     const w = detectParentEdgeProximity(d, n, r, u);
     if (w) {
-      const E = d.getBoundingClientRect(), S = window.getComputedStyle(d), j = parseFloat(S.paddingLeft) || 0, N = parseFloat(S.paddingRight) || 0, I = parseFloat(S.paddingTop) || 0, D = parseFloat(S.paddingBottom) || 0, P = ((B = i.defaultView) == null ? void 0 : B.scrollY) || 0, R = ((_ = i.defaultView) == null ? void 0 : _.scrollX) || 0, $ = u === "vertical" ? "horizontal" : "vertical", F = getMaxSiblingDimensions(d);
+      const j = d.getBoundingClientRect(), v = window.getComputedStyle(d), _ = parseFloat(v.paddingLeft) || 0, N = parseFloat(v.paddingRight) || 0, I = parseFloat(v.paddingTop) || 0, P = parseFloat(v.paddingBottom) || 0, D = ((B = i.defaultView) == null ? void 0 : B.scrollY) || 0, R = ((E = i.defaultView) == null ? void 0 : E.scrollX) || 0, $ = u === "vertical" ? "horizontal" : "vertical", F = getMaxSiblingDimensions(d);
       if (w === "start") {
         const O = getChildBlocks(d)[0];
         if (O) {
           const L = O.getBoundingClientRect();
           if (u === "vertical") {
-            const T = E.width - j - N, M = E.left + R + j;
+            const T = j.width - _ - N, M = j.left + R + _;
             return {
               position: "before",
               placeholderOrientation: $,
               rect: {
-                top: L.top + P - 2,
+                top: L.top + D - 2,
                 left: M,
                 width: T,
                 height: 4
@@ -3627,7 +3627,7 @@ function detectDropZone(o, n, r, a, i) {
               confidence: 0.9
             };
           } else {
-            const T = E.top + P + I, M = F.maxHeight > 0 ? F.maxHeight : E.height - I - D;
+            const T = j.top + D + I, M = F.maxHeight > 0 ? F.maxHeight : j.height - I - P;
             return {
               position: "before",
               placeholderOrientation: $,
@@ -3649,12 +3649,12 @@ function detectDropZone(o, n, r, a, i) {
         if (L) {
           const T = L.getBoundingClientRect();
           if (u === "vertical") {
-            const M = E.width - j - N, H = E.left + R + j;
+            const M = j.width - _ - N, H = j.left + R + _;
             return {
               position: "after",
               placeholderOrientation: $,
               rect: {
-                top: T.bottom + P - 2,
+                top: T.bottom + D - 2,
                 left: H,
                 width: M,
                 height: 4
@@ -3665,7 +3665,7 @@ function detectDropZone(o, n, r, a, i) {
               confidence: 0.9
             };
           } else {
-            const M = E.top + P + I, H = F.maxHeight > 0 ? F.maxHeight : E.height - I - D;
+            const M = j.top + D + I, H = F.maxHeight > 0 ? F.maxHeight : j.height - I - P;
             return {
               position: "after",
               placeholderOrientation: $,
@@ -3759,25 +3759,25 @@ function getSiblingsInSameRow(o, n, r) {
   });
 }
 function calculatePlaceholderRect(o, n, r, a, i) {
-  var I, D;
-  const l = o.getBoundingClientRect(), c = window.getComputedStyle(o), d = ((I = i.defaultView) == null ? void 0 : I.scrollY) || 0, p = ((D = i.defaultView) == null ? void 0 : D.scrollX) || 0, u = parseFloat(c.marginTop) || 0, g = parseFloat(c.marginBottom) || 0, m = parseFloat(c.marginLeft) || 0, f = parseFloat(c.marginRight) || 0, h = parseFloat(c.paddingTop) || 0, x = parseFloat(c.paddingBottom) || 0, b = parseFloat(c.paddingLeft) || 0, y = parseFloat(c.paddingRight) || 0, C = n == null ? void 0 : n.getBoundingClientRect(), k = n && parseFloat(window.getComputedStyle(n).paddingLeft) || 0, v = n && parseFloat(window.getComputedStyle(n).paddingRight) || 0, A = n && parseFloat(window.getComputedStyle(n).paddingTop) || 0, B = n && parseFloat(window.getComputedStyle(n).paddingBottom) || 0, _ = n ? getMaxSiblingDimensions(n) : { maxWidth: 0, maxHeight: 0 }, w = n ? getOrientation(n) : "vertical", E = n ? getChildBlocks(n) : [], S = getSiblingsInSameRow(E, o, w);
-  let j = 0, N = 0;
-  if (S.forEach((P) => {
-    const R = P.getBoundingClientRect();
-    R.height > j && (j = R.height), R.width > N && (N = R.width);
+  var I, P;
+  const l = o.getBoundingClientRect(), c = window.getComputedStyle(o), d = ((I = i.defaultView) == null ? void 0 : I.scrollY) || 0, p = ((P = i.defaultView) == null ? void 0 : P.scrollX) || 0, u = parseFloat(c.marginTop) || 0, g = parseFloat(c.marginBottom) || 0, m = parseFloat(c.marginLeft) || 0, f = parseFloat(c.marginRight) || 0, h = parseFloat(c.paddingTop) || 0, x = parseFloat(c.paddingBottom) || 0, b = parseFloat(c.paddingLeft) || 0, y = parseFloat(c.paddingRight) || 0, C = n == null ? void 0 : n.getBoundingClientRect(), k = n && parseFloat(window.getComputedStyle(n).paddingLeft) || 0, S = n && parseFloat(window.getComputedStyle(n).paddingRight) || 0, A = n && parseFloat(window.getComputedStyle(n).paddingTop) || 0, B = n && parseFloat(window.getComputedStyle(n).paddingBottom) || 0, E = n ? getMaxSiblingDimensions(n) : { maxWidth: 0, maxHeight: 0 }, w = n ? getOrientation(n) : "vertical", j = n ? getChildBlocks(n) : [], v = getSiblingsInSameRow(j, o, w);
+  let _ = 0, N = 0;
+  if (v.forEach((D) => {
+    const R = D.getBoundingClientRect();
+    R.height > _ && (_ = R.height), R.width > N && (N = R.width);
   }), r === "before")
     if (a === "horizontal") {
-      const P = C ? C.width - k - v : l.width, R = C ? C.left + p + k : l.left + p;
+      const D = C ? C.width - k - S : l.width, R = C ? C.left + p + k : l.left + p;
       return {
         top: l.top + d - u - 2,
         left: R,
-        width: P,
+        width: D,
         height: 4
       };
     } else {
-      const P = l.top + d, R = w === "horizontal" && j > 0 ? j : _.maxHeight > 0 ? _.maxHeight : C ? C.height - A - B : l.height;
+      const D = l.top + d, R = w === "horizontal" && _ > 0 ? _ : E.maxHeight > 0 ? E.maxHeight : C ? C.height - A - B : l.height;
       return {
-        top: P,
+        top: D,
         left: l.left + p - m - 2,
         width: 4,
         height: R
@@ -3785,17 +3785,17 @@ function calculatePlaceholderRect(o, n, r, a, i) {
     }
   else if (r === "after")
     if (a === "horizontal") {
-      const P = C ? C.width - k - v : l.width, R = C ? C.left + p + k : l.left + p;
+      const D = C ? C.width - k - S : l.width, R = C ? C.left + p + k : l.left + p;
       return {
         top: l.bottom + d + g - 2,
         left: R,
-        width: P,
+        width: D,
         height: 4
       };
     } else {
-      const P = l.top + d, R = w === "horizontal" && j > 0 ? j : _.maxHeight > 0 ? _.maxHeight : C ? C.height - A - B : l.height;
+      const D = l.top + d, R = w === "horizontal" && _ > 0 ? _ : E.maxHeight > 0 ? E.maxHeight : C ? C.height - A - B : l.height;
       return {
-        top: P,
+        top: D,
         left: l.right + p + f - 2,
         width: 4,
         height: R
@@ -3873,21 +3873,21 @@ const LEAF_BLOCK_TYPES = [
       const f = c.defaultView, h = f.innerHeight, x = f.scrollY, b = c.documentElement.scrollHeight;
       p.current = m;
       const y = m, C = h - m;
-      let k = !1, v = null, A = 0;
-      if (y < AUTO_SCROLL_CONFIG.EDGE_ZONE && x > 0 ? (k = !0, v = "up", A = y) : C < AUTO_SCROLL_CONFIG.EDGE_ZONE && x + h < b && (k = !0, v = "down", A = C), !k && d.current !== null) {
+      let k = !1, S = null, A = 0;
+      if (y < AUTO_SCROLL_CONFIG.EDGE_ZONE && x > 0 ? (k = !0, S = "up", A = y) : C < AUTO_SCROLL_CONFIG.EDGE_ZONE && x + h < b && (k = !0, S = "down", A = C), !k && d.current !== null) {
         cancelAnimationFrame(d.current), d.current = null;
         return;
       }
-      if (k && v) {
-        const B = 1 - A / AUTO_SCROLL_CONFIG.EDGE_ZONE, _ = AUTO_SCROLL_CONFIG.MIN_SCROLL_SPEED + (AUTO_SCROLL_CONFIG.MAX_SCROLL_SPEED - AUTO_SCROLL_CONFIG.MIN_SCROLL_SPEED) * B, w = () => {
+      if (k && S) {
+        const B = 1 - A / AUTO_SCROLL_CONFIG.EDGE_ZONE, E = AUTO_SCROLL_CONFIG.MIN_SCROLL_SPEED + (AUTO_SCROLL_CONFIG.MAX_SCROLL_SPEED - AUTO_SCROLL_CONFIG.MIN_SCROLL_SPEED) * B, w = () => {
           if (!isDragging || !f) {
             d.current = null;
             return;
           }
-          const E = v === "up" ? -_ : _;
-          f.scrollBy(0, E);
-          const S = f.scrollY, j = S > 0, N = S + h < b, I = p.current, D = h - p.current;
-          v === "up" && j && I < AUTO_SCROLL_CONFIG.EDGE_ZONE || v === "down" && N && D < AUTO_SCROLL_CONFIG.EDGE_ZONE ? d.current = requestAnimationFrame(w) : d.current = null;
+          const j = S === "up" ? -E : E;
+          f.scrollBy(0, j);
+          const v = f.scrollY, _ = v > 0, N = v + h < b, I = p.current, P = h - p.current;
+          S === "up" && _ && I < AUTO_SCROLL_CONFIG.EDGE_ZONE || S === "down" && N && P < AUTO_SCROLL_CONFIG.EDGE_ZONE ? d.current = requestAnimationFrame(w) : d.current = null;
         };
         d.current === null && (d.current = requestAnimationFrame(w));
       }
@@ -3913,30 +3913,30 @@ const LEAF_BLOCK_TYPES = [
       const C = o._type || o.type;
       if (!C)
         return;
-      const k = m.clientX, v = m.clientY;
-      u(v);
-      const A = detectDropZone(h, k, v, C, c);
+      const k = m.clientX, S = m.clientY;
+      u(S);
+      const A = detectDropZone(h, k, S, C, c);
       if (!A)
         return;
       const B = h.getAttribute("data-block-type") || "Box";
-      let _ = !1;
+      let E = !1;
       const w = LEAF_BLOCK_TYPES.includes(B);
       if (A.position === "inside") {
         if (w || y && !canDropWithoutCircularReference(y, x, l))
           return;
-        _ = canAcceptChildBlock(B, C);
+        E = canAcceptChildBlock(B, C);
       } else {
-        let S = h.parentElement, j = "Box";
-        for (; S && !S.hasAttribute("data-block-id"); )
-          S = S.parentElement;
-        if (S && (j = S.getAttribute("data-block-type") || "Box"), y && !canDropAsSiblingWithoutCircularReference(y, x, l))
+        let v = h.parentElement, _ = "Box";
+        for (; v && !v.hasAttribute("data-block-id"); )
+          v = v.parentElement;
+        if (v && (_ = v.getAttribute("data-block-type") || "Box"), y && !canDropAsSiblingWithoutCircularReference(y, x, l))
           return;
-        _ = canAcceptChildBlock(j, C);
+        E = canAcceptChildBlock(_, C);
       }
-      if (!_)
+      if (!E)
         return;
       i(A.targetParentId);
-      const E = A.targetParentId || b;
+      const j = A.targetParentId || b;
       r({
         isVisible: !0,
         isValid: !0,
@@ -3948,7 +3948,7 @@ const LEAF_BLOCK_TYPES = [
         width: A.rect.width,
         height: A.rect.height,
         targetBlockId: A.targetBlockId,
-        targetParentId: E
+        targetParentId: j
       }), removeDropTargetAttributes$1(c), A.targetElement.setAttribute("data-drop-target", "true");
     }, 300),
     [c, o, r, a, i, l, u]
@@ -4085,22 +4085,22 @@ const useBlockDragStart = () => {
       const y = r.targetBlockId, C = r.targetParentId;
       if (!y)
         return;
-      const { parentId: k, index: v } = calculateInsertionIndex(
+      const { parentId: k, index: S } = calculateInsertionIndex(
         i,
         y,
         C,
         r.position
       );
       if (o._id !== void 0)
-        d([o._id], k === null ? void 0 : k, v), g(), u([]), p([o._id]);
+        d([o._id], k === null ? void 0 : k, S), g(), u([]), p([o._id]);
       else {
-        const B = o._type || o.type, _ = o != null && o.blocks ? isFunction(o == null ? void 0 : o.blocks) ? syncBlocksWithDefaults(o == null ? void 0 : o.blocks()) : o == null ? void 0 : o.blocks : null;
+        const B = o._type || o.type, E = o != null && o.blocks ? isFunction(o == null ? void 0 : o.blocks) ? syncBlocksWithDefaults(o == null ? void 0 : o.blocks()) : o == null ? void 0 : o.blocks : null;
         c(
           B === "PartialBlock" ? {
             blocks: [{ _type: B, _id: "partial-block", partialBlockId: o.partialBlockId }]
-          } : (_ == null ? void 0 : _.length) > 0 ? { blocks: [..._] } : { type: B },
+          } : (E == null ? void 0 : E.length) > 0 ? { blocks: [...E] } : { type: B },
           k,
-          v
+          S
         );
       }
       setTimeout(() => {
@@ -4387,9 +4387,9 @@ const INLINE_EDITABLE_BLOCKS = ["Heading", "Paragraph", "Text", "Link", "Span",
       }),
       size({
         boundary: g == null ? void 0 : g.body,
-        apply({ availableWidth: v, availableHeight: A, elements: B }) {
+        apply({ availableWidth: S, availableHeight: A, elements: B }) {
           Object.assign(B.floating.style, {
-            maxWidth: `${Math.max(200, v)}px`,
+            maxWidth: `${Math.max(200, S)}px`,
             maxHeight: `${Math.max(100, A)}px`
           });
         }
@@ -4400,11 +4400,11 @@ const INLINE_EDITABLE_BLOCKS = ["Heading", "Paragraph", "Text", "Link", "Span",
   useResizeObserver(r, () => b(), r !== null), useResizeObserver(g == null ? void 0 : g.body, () => b(), (g == null ? void 0 : g.body) !== null);
   const y = get(o, "_parent", null), C = isEmpty(get(o, "_name", "")) ? get(o, "_type", "") : get(o, "_name", "");
   useEffect(() => {
-    let v = null;
-    return r ? (v = setTimeout(() => b(), 500), () => {
-      v && clearTimeout(v);
+    let S = null;
+    return r ? (S = setTimeout(() => b(), 500), () => {
+      S && clearTimeout(S);
     }) : (b(), () => {
-      v && clearTimeout(v);
+      S && clearTimeout(S);
     });
   }, [r, o == null ? void 0 : o._id]);
   const [, k] = useSidebarActivePanel();
@@ -4415,13 +4415,13 @@ const INLINE_EDITABLE_BLOCKS = ["Heading", "Paragraph", "Text", "Link", "Span",
       tabIndex: 0,
       ref: x.setFloating,
       style: h,
-      onClick: (v) => {
-        v.stopPropagation(), v.preventDefault();
+      onClick: (S) => {
+        S.stopPropagation(), S.preventDefault();
       },
-      onMouseEnter: (v) => {
-        v.stopPropagation(), c(null);
+      onMouseEnter: (S) => {
+        S.stopPropagation(), c(null);
       },
-      onKeyDown: (v) => v.stopPropagation(),
+      onKeyDown: (S) => S.stopPropagation(),
       className: `isolate z-[999] flex h-6 items-center justify-between bg-blue-500 py-2 text-xs text-white ${n ? "opacity-0" : ""}`,
       children: /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
@@ -5063,8 +5063,8 @@ const getActiveClasses$1 = (o, n, r) => {
     )
   ] });
 }, RteColorPicker = ({ editor: o, from: n, menuRef: r }) => {
-  var k, v;
-  const a = (k = o == null ? void 0 : o.getAttributes("textStyle")) == null ? void 0 : k.color, i = (v = o == null ? void 0 : o.getAttributes("highlight")) == null ? void 0 : v.color, [l, c] = useState(a || "#000000F2"), [d, p] = useState(i || "#00000057"), [u, g] = useDebouncedState(l, 150), [m, f] = useDebouncedState(d, 150), h = (A, B) => {
+  var k, S;
+  const a = (k = o == null ? void 0 : o.getAttributes("textStyle")) == null ? void 0 : k.color, i = (S = o == null ? void 0 : o.getAttributes("highlight")) == null ? void 0 : S.color, [l, c] = useState(a || "#000000F2"), [d, p] = useState(i || "#00000057"), [u, g] = useDebouncedState(l, 150), [m, f] = useDebouncedState(d, 150), h = (A, B) => {
     B ? (c(A), g(A)) : (o == null || o.chain().setColor(A).run(), c(A));
   }, x = (A, B) => {
     B ? (p(A), f(A)) : (o == null || o.chain().setHighlight({ color: A }).run(), p(A));
@@ -5426,8 +5426,8 @@ const RichTextEditor = memo(
       onBlur: ({ editor: u, event: g }) => {
         const m = g == null ? void 0 : g.relatedTarget, f = l.querySelector(".ProseMirror"), h = l.querySelector(".tippy-box"), x = l.querySelector("#chai-rich-text-menu-bar"), b = f == null ? void 0 : f.contains(m), y = h == null ? void 0 : h.contains(m), C = x == null ? void 0 : x.contains(m), k = window.document.getElementById("rte-widget-color-picker");
         if (!b && !y && !C && !k) {
-          const v = (u == null ? void 0 : u.getHTML()) || "";
-          r(v);
+          const S = (u == null ? void 0 : u.getHTML()) || "";
+          r(S);
         }
       },
       from: "canvas"
@@ -5530,14 +5530,14 @@ const RichTextEditor = memo(
     const r = "content", { document: a } = useFrame(), { editingBlockId: i, editingItemIndex: l, setEditingBlockId: c, setEditingItemIndex: d } = useInlineEditing(), [p, u] = useState(null), g = useRef(null), { clearHighlight: m } = useBlockHighlight(), f = useUpdateBlocksProps(), { selectedLang: h } = useLanguages(), [, x] = useSelectedBlockIds(), b = useRef(null), y = i, { blockContent: C, blockType: k } = useMemo(() => {
       var N;
       const w = o._type;
-      let E = o[r];
-      const S = getRegisteredChaiBlock(o._type);
-      return h && ((N = S == null ? void 0 : S.i18nProps) == null ? void 0 : N.includes(r)) && has(o, `${r}-${h}`) && (E = get(o, `${r}-${h}`)), { blockContent: E, blockType: w };
-    }, [o, h]), v = useCallback(
+      let j = o[r];
+      const v = getRegisteredChaiBlock(o._type);
+      return h && ((N = v == null ? void 0 : v.i18nProps) == null ? void 0 : N.includes(r)) && has(o, `${r}-${h}`) && (j = get(o, `${r}-${h}`)), { blockContent: j, blockType: w };
+    }, [o, h]), S = useCallback(
       (w) => {
-        var S;
-        const E = w || ((S = g.current) == null ? void 0 : S.innerText);
-        f([y], { [r]: E }), u(null), c(null), d(-1), x([]), y && setTimeout(() => x([y]), 100);
+        var v;
+        const j = w || ((v = g.current) == null ? void 0 : v.innerText);
+        f([y], { [r]: j }), u(null), c(null), d(-1), x([]), y && setTimeout(() => x([y]), 100);
       },
       [y, f, c, x, h]
     ), A = useDebouncedCallback(
@@ -5548,26 +5548,26 @@ const RichTextEditor = memo(
       1e3
     ), B = useCallback(
       (w) => {
-        w.preventDefault(), y && (b.current = y), v(), setTimeout(() => {
-          const E = b.current;
-          b.current = null, x([E]);
+        w.preventDefault(), y && (b.current = y), S(), setTimeout(() => {
+          const j = b.current;
+          b.current = null, x([j]);
         }, 100);
       },
       [x, y, h]
     );
     useEffect(() => {
-      var j;
+      var _;
       if (!y) return;
-      const w = `[data-block-id="${y}"]`, E = l >= 0 ? `[data-block-index="${l}"]` : "", S = a.querySelector(`${w}${E}`);
-      S && ((j = S == null ? void 0 : S.classList) == null || j.add("sr-only"), u(S));
+      const w = `[data-block-id="${y}"]`, j = l >= 0 ? `[data-block-index="${l}"]` : "", v = a.querySelector(`${w}${j}`);
+      v && ((_ = v == null ? void 0 : v.classList) == null || _.add("sr-only"), u(v));
     }, [y, k, a, l]);
-    const _ = useMemo(() => p ? (m(), ["RichText", "Paragraph"].includes(k) ? /* @__PURE__ */ jsx(
+    const E = useMemo(() => p ? (m(), ["RichText", "Paragraph"].includes(k) ? /* @__PURE__ */ jsx(
       RichTextEditor,
       {
         blockContent: C,
         editingElement: p,
         onChange: A,
-        onClose: v,
+        onClose: S,
         onEscape: B
       }
     ) : /* @__PURE__ */ jsx(
@@ -5576,13 +5576,13 @@ const RichTextEditor = memo(
         editorRef: g,
         blockContent: C,
         editingElement: p,
-        onClose: v,
+        onClose: S,
         onChange: A,
         onEscape: B
       }
-    )) : null, [p, y, k, C, v, h]);
+    )) : null, [p, y, k, C, S, h]);
     return /* @__PURE__ */ jsxs(Fragment, { children: [
-      _,
+      E,
       n
     ] });
   },
@@ -5615,7 +5615,7 @@ const RichTextEditor = memo(
   blockAtom: n,
   children: r
 }) => {
-  const { editingBlockId: a, editingItemIndex: i } = useInlineEditing(), [l] = useAtom$1(n), c = useMemo(() => getRegisteredChaiBlock(l._type), [l._type]), { selectedLang: d, fallbackLang: p } = useLanguages(), u = useBlockRuntimeProps(), g = usePageExternalData(), [m] = useAtom$1(dataBindingActiveAtom), f = get(c, "component", null), { index: h, key: x } = useContext(RepeaterContext), { mode: b } = useEditorMode(), y = useAtomValue$1(chaiDesignTokensAtom), C = useIsDragAndDropEnabled(), k = b === "edit", v = useDirectBlockDrag(), A = useMemo(
+  const { editingBlockId: a, editingItemIndex: i } = useInlineEditing(), [l] = useAtom$1(n), c = useMemo(() => getRegisteredChaiBlock(l._type), [l._type]), { selectedLang: d, fallbackLang: p } = useLanguages(), u = useBlockRuntimeProps(), g = usePageExternalData(), [m] = useAtom$1(dataBindingActiveAtom), f = get(c, "component", null), { index: h, key: x } = useContext(RepeaterContext), { mode: b } = useEditorMode(), y = useAtomValue$1(chaiDesignTokensAtom), C = useIsDragAndDropEnabled(), k = b === "edit", S = useDirectBlockDrag(), A = useMemo(
     () => m ? applyBindingToBlockProps(applyLanguage(l, d, c), g, {
       index: h,
       key: x
@@ -5624,37 +5624,37 @@ const RichTextEditor = memo(
   ), B = useMemo(
     () => getBlockTagAttributes(l, !0, y),
     [l, getBlockTagAttributes, y]
-  ), _ = useMemo(
+  ), E = useMemo(
     () => u(l._id, getBlockRuntimeProps(l._type)),
     [l._id, l._type, u, getBlockRuntimeProps]
   ), w = useMemo(() => {
-    const D = {
+    const P = {
       "data-block-id": l._id,
       "data-block-type": l._type,
       "data-block-index": h
     };
     return k && C ? {
-      ...D,
+      ...P,
       draggable: !0,
-      onMouseDown: v.onMouseDown,
-      onDragStart: v.onDragStart,
-      onDragEnd: v.onDragEnd
-    } : D;
-  }, [l._id, l._type, h, k, C, v]), E = useMemo(
+      onMouseDown: S.onMouseDown,
+      onDragStart: S.onDragStart,
+      onDragEnd: S.onDragEnd
+    } : P;
+  }, [l._id, l._type, h, k, C, S]), j = useMemo(
     () => ({
       blockProps: w,
       inBuilder: b === "edit",
       lang: d || p,
       ...A,
       ...B,
-      ..._,
+      ...E,
       ...o
     }),
-    [b, w, d, p, A, B, _, o]
-  ), S = useMemo(() => !CORE_BLOCKS.includes(l._type), [l._type]), j = useMemo(() => get(l, "_show", !0), [l]);
-  if (isNull(f) || !j) return null;
+    [b, w, d, p, A, B, E, o]
+  ), v = useMemo(() => !CORE_BLOCKS.includes(l._type), [l._type]), _ = useMemo(() => get(l, "_show", !0), [l]);
+  if (isNull(f) || !_) return null;
   let N = /* @__PURE__ */ jsx(Suspense, { children: createElement(f, {
-    ...E,
+    ...j,
     children: r({
       _id: l._id,
       _type: l._type,
@@ -5667,7 +5667,7 @@ const RichTextEditor = memo(
     })
   }) });
   const I = a === l._id && (i === h || h < 0) ? /* @__PURE__ */ jsx(WithBlockTextEditor, { block: l, children: N }) : N;
-  return S ? /* @__PURE__ */ jsx(ErrorBoundary, { fallbackRender: ErrorFallback, children: I }) : I;
+  return v ? /* @__PURE__ */ jsx(ErrorBoundary, { fallbackRender: ErrorFallback, children: I }) : I;
 }, PartialWrapper$1 = ({ children: o, partialBlockId: n }) => {
   const r = useBuilderProp("gotoPage", noop), { saveState: a } = useSavePage(), { selectedLang: i, fallbackLang: l } = useLanguages(), c = useCallback(
     (d) => {
@@ -5837,7 +5837,7 @@ const RichTextEditor = memo(
     /* @__PURE__ */ jsx("p", { className: "font-semibold", children: o("Oops! Something went wrong.") }),
     /* @__PURE__ */ jsx("p", { children: o("Please try again.") })
   ] }) });
-}, CodeEditor$1 = React__default.lazy(() => import("./code-editor-BZMSNYkF.js")), CanvasArea = () => {
+}, CodeEditor$1 = React__default.lazy(() => import("./code-editor-zas3OmxC.js")), CanvasArea = () => {
   const [o] = useCodeEditor(), n = useBuilderProp("onError", noop);
   return /* @__PURE__ */ jsx("div", { className: "flex h-full max-h-full w-full flex-1 flex-col", children: /* @__PURE__ */ jsxs("div", { className: "relative flex h-full max-h-full flex-col overflow-hidden bg-gray-100/40", children: [
     /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(Skeleton, { className: "h-full" }), children: /* @__PURE__ */ jsx(ErrorBoundary, { fallback: /* @__PURE__ */ jsx(FallbackError, {}), onError: n, children: /* @__PURE__ */ jsx(StaticCanvas, {}) }) }),
@@ -5977,27 +5977,27 @@ const PLACEHOLDER_IMAGE = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAwIiBoZWl
 }, ImagePickerField = ({ value: o, onChange: n, id: r, onBlur: a }) => {
   const { t: i } = useTranslation(), { selectedLang: l } = useLanguages(), c = useSelectedBlock(), d = useUpdateBlocksProps(), p = usePageExternalData(), u = r.split(".").pop() || "", g = l ? `_${u}Id-${l}` : `_${u}Id`, m = isEmpty(l) && (c == null ? void 0 : c._type) === "Image" && has(c, "assetId"), f = get(c, g, m ? c == null ? void 0 : c.assetId : ""), h = useMemo(() => {
     if (!o || !c || !/\{\{.*?\}\}/.test(o)) return o;
-    const v = { ...c, [u]: o }, A = applyBindingToBlockProps(v, p, { index: -1, key: "" });
+    const S = { ...c, [u]: o }, A = applyBindingToBlockProps(S, p, { index: -1, key: "" });
     return get(A, u, o);
   }, [o, c, p, u]), x = !!f || h !== PLACEHOLDER_IMAGE, b = (k) => {
-    const v = isArray(k) ? first(k) : k;
-    if (v) {
-      n(v == null ? void 0 : v.url);
-      const A = v == null ? void 0 : v.width, B = v == null ? void 0 : v.height, _ = g.includes("mobile");
+    const S = isArray(k) ? first(k) : k;
+    if (S) {
+      n(S == null ? void 0 : S.url);
+      const A = S == null ? void 0 : S.width, B = S == null ? void 0 : S.height, E = g.includes("mobile");
       if (c != null && c._id) {
         const w = {
-          ...A && { [_ ? "mobileWidth" : "width"]: A },
-          ...B && { [_ ? "mobileHeight" : "height"]: B },
-          ...v.description && { alt: v.description }
+          ...A && { [E ? "mobileWidth" : "width"]: A },
+          ...B && { [E ? "mobileHeight" : "height"]: B },
+          ...S.description && { alt: S.description }
         };
-        if (set(w, g, v.id), isEmpty(w)) return;
+        if (set(w, g, S.id), isEmpty(w)) return;
         d([c._id], w);
       }
     }
   }, y = useCallback(() => {
     if (n(PLACEHOLDER_IMAGE), c != null && c._id) {
-      const k = {}, v = g.includes("mobile");
-      set(k, g, ""), set(k, v ? "mobileWidth" : "width", ""), set(k, v ? "mobileHeight" : "height", ""), d([c._id], k);
+      const k = {}, S = g.includes("mobile");
+      set(k, g, ""), set(k, S ? "mobileWidth" : "width", ""), set(k, S ? "mobileHeight" : "height", ""), d([c._id], k);
     }
   }, [n, c == null ? void 0 : c._id, d, g]), C = getFileName(h);
   return /* @__PURE__ */ jsxs("div", { className: "mt-1.5 flex items-start gap-x-3", children: [
@@ -6162,11 +6162,11 @@ const DataBindingSelector = ({
         n(`{{${m}}}`, {}, r);
         return;
       }
-      const h = (C) => /[.,!?;:]/.test(C), x = (C, k, v) => {
+      const h = (C) => /[.,!?;:]/.test(C), x = (C, k, S) => {
         let A = "", B = "";
-        const _ = k > 0 ? C[k - 1] : "", w = k < C.length ? C[k] : "";
-        return k > 0 && (_ === "." || !h(_) && _ !== " ") && (A = " "), k < C.length && !h(w) && w !== " " && (B = " "), {
-          text: A + v + B,
+        const E = k > 0 ? C[k - 1] : "", w = k < C.length ? C[k] : "";
+        return k > 0 && (E === "." || !h(E) && E !== " ") && (A = " "), k < C.length && !h(w) && w !== " " && (B = " "), {
+          text: A + S + B,
           prefixLength: A.length,
           suffixLength: B.length
         };
@@ -6178,28 +6178,28 @@ const DataBindingSelector = ({
         if (C) {
           const k = `{{${m}}}`;
           C.commands.focus();
-          const { from: v, to: A } = C.state.selection;
-          if (v !== A)
+          const { from: S, to: A } = C.state.selection;
+          if (S !== A)
             C.chain().deleteSelection().insertContent(k).run();
           else {
-            const { state: _ } = C, w = _.selection.from, E = _.doc.textBetween(Math.max(0, w - 1), w), S = _.doc.textBetween(w, Math.min(w + 1, _.doc.content.size));
-            let j = "";
-            w > 0 && E !== " " && !h(E) && (j = " ");
+            const { state: E } = C, w = E.selection.from, j = E.doc.textBetween(Math.max(0, w - 1), w), v = E.doc.textBetween(w, Math.min(w + 1, E.doc.content.size));
+            let _ = "";
+            w > 0 && j !== " " && !h(j) && (_ = " ");
             let N = "";
-            S && S !== " " && !h(S) && (N = " "), C.chain().insertContent(j + k + N).run();
+            v && v !== " " && !h(v) && (N = " "), C.chain().insertContent(_ + k + N).run();
           }
           setTimeout(() => n(C.getHTML(), {}, r), 100);
           return;
         }
       } else {
-        const C = b, k = C.selectionStart || 0, v = C.value || "", A = C.selectionEnd || k;
+        const C = b, k = C.selectionStart || 0, S = C.value || "", A = C.selectionEnd || k;
         if (A > k) {
-          const S = `{{${m}}}`, { text: j } = x(v, k, S), N = v.slice(0, k) + j + v.slice(A);
+          const v = `{{${m}}}`, { text: _ } = x(S, k, v), N = S.slice(0, k) + _ + S.slice(A);
           n(N, {}, r);
           return;
         }
-        const _ = `{{${m}}}`, { text: w } = x(v, k, _), E = v.slice(0, k) + w + v.slice(k);
-        n(E, {}, r);
+        const E = `{{${m}}}`, { text: w } = x(S, k, E), j = S.slice(0, k) + w + S.slice(k);
+        n(j, {}, r);
       }
     },
     [r, n, a, d == null ? void 0 : d._id, p]
@@ -6220,74 +6220,74 @@ const DataBindingSelector = ({
   pageTypes: n,
   onChange: r
 }) => {
-  var E;
-  const { t: a } = useTranslation(), i = useBuilderProp("searchPageTypeItems", (S, j) => []), [l, c] = useState(!1), [d, p] = useState(!1), [u, g] = useState("page"), [m, f] = useState(""), [h, x] = useState([]), [b, y] = useState(-1), C = useRef(null), k = (E = n == null ? void 0 : n.find((S) => S.key === u)) == null ? void 0 : E.name;
+  var j;
+  const { t: a } = useTranslation(), i = useBuilderProp("searchPageTypeItems", (v, _) => []), [l, c] = useState(!1), [d, p] = useState(!1), [u, g] = useState("page"), [m, f] = useState(""), [h, x] = useState([]), [b, y] = useState(-1), C = useRef(null), k = (j = n == null ? void 0 : n.find((v) => v.key === u)) == null ? void 0 : j.name;
   useEffect(() => {
     if (f(""), x([]), y(-1), p(!1), !o || l || !startsWith(o, "pageType:")) return;
-    const S = split(o, ":"), j = get(S, 1, "page") || "page";
-    g(j), (async () => {
-      const N = await i(j, [get(S, 2, "page")]);
+    const v = split(o, ":"), _ = get(v, 1, "page") || "page";
+    g(_), (async () => {
+      const N = await i(_, [get(v, 2, "page")]);
       N && Array.isArray(N) && f(get(N, [0, "name"], ""));
     })();
   }, [o]);
-  const v = useDebouncedCallback(
-    async (S) => {
-      if (isEmpty(S))
+  const S = useDebouncedCallback(
+    async (v) => {
+      if (isEmpty(v))
         x([]);
       else {
-        const j = await i(u, S);
-        x(j);
+        const _ = await i(u, v);
+        x(_);
       }
       c(!1), y(-1);
     },
     [u],
     300
-  ), A = (S) => {
-    const j = ["pageType", u, S.id];
-    j[1] && (r(j.join(":")), f(S.name), p(!1), x([]), y(-1));
-  }, B = (S) => {
-    switch (S.key) {
+  ), A = (v) => {
+    const _ = ["pageType", u, v.id];
+    _[1] && (r(_.join(":")), f(v.name), p(!1), x([]), y(-1));
+  }, B = (v) => {
+    switch (v.key) {
       case "ArrowDown":
-        S.preventDefault(), y((j) => j < h.length - 1 ? j + 1 : j);
+        v.preventDefault(), y((_) => _ < h.length - 1 ? _ + 1 : _);
         break;
       case "ArrowUp":
-        S.preventDefault(), y((j) => j > 0 ? j - 1 : j);
+        v.preventDefault(), y((_) => _ > 0 ? _ - 1 : _);
         break;
       case "Enter":
-        if (S.preventDefault(), h.length === 0) return;
+        if (v.preventDefault(), h.length === 0) return;
         b >= 0 && A(h[b]);
         break;
       case "Escape":
-        S.preventDefault(), _();
+        v.preventDefault(), E();
         break;
     }
   };
   useEffect(() => {
     if (b >= 0 && C.current) {
-      const S = C.current.children[b];
-      S == null || S.scrollIntoView({ block: "nearest" });
+      const v = C.current.children[b];
+      v == null || v.scrollIntoView({ block: "nearest" });
     }
   }, [b]);
-  const _ = () => {
+  const E = () => {
     f(""), x([]), y(-1), p(!1), r("");
-  }, w = (S) => {
-    f(S), p(!isEmpty(S)), c(!0), v(S);
+  }, w = (v) => {
+    f(v), p(!isEmpty(v)), c(!0), S(v);
   };
   return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx("select", { name: "pageType", value: u, onChange: (S) => g(S.target.value), children: map(n, (S) => /* @__PURE__ */ jsx("option", { value: S.key, children: S.name }, S.key)) }),
+    /* @__PURE__ */ jsx("select", { name: "pageType", value: u, onChange: (v) => g(v.target.value), children: map(n, (v) => /* @__PURE__ */ jsx("option", { value: v.key, children: v.name }, v.key)) }),
     u && /* @__PURE__ */ jsxs("div", { className: "group relative mt-2 flex items-center", children: [
       /* @__PURE__ */ jsx(
         "input",
         {
           type: "text",
           value: m,
-          onChange: (S) => w(S.target.value),
+          onChange: (v) => w(v.target.value),
           onKeyDown: B,
           placeholder: a(`Search ${k ?? ""}`),
           className: "w-full rounded-md border border-gray-300 p-2 pr-16"
         }
       ),
-      /* @__PURE__ */ jsx("div", { className: "absolute bottom-2 right-2 top-3 flex items-center gap-1.5", children: m && /* @__PURE__ */ jsx("button", { onClick: _, className: "text-gray-400 hover:text-gray-600", title: a("Clear search"), children: /* @__PURE__ */ jsx(Cross1Icon, { className: "h-4 w-4" }) }) })
+      /* @__PURE__ */ jsx("div", { className: "absolute bottom-2 right-2 top-3 flex items-center gap-1.5", children: m && /* @__PURE__ */ jsx("button", { onClick: E, className: "text-gray-400 hover:text-gray-600", title: a("Clear search"), children: /* @__PURE__ */ jsx(Cross1Icon, { className: "h-4 w-4" }) }) })
     ] }),
     (l || !isEmpty(h) || d && isEmpty(h)) && /* @__PURE__ */ jsx("div", { className: "absolute z-40 mt-2 max-h-40 w-full max-w-[250px] overflow-y-auto rounded-md border border-border bg-background shadow-lg", children: l ? /* @__PURE__ */ jsxs("div", { className: "space-y-1 p-2", children: [
       /* @__PURE__ */ jsx("div", { className: "h-6 w-full animate-pulse rounded bg-gray-200" }),
@@ -6297,22 +6297,22 @@ const DataBindingSelector = ({
       ' "',
       m,
       '"'
-    ] }) : /* @__PURE__ */ jsx("ul", { ref: C, children: map(h == null ? void 0 : h.slice(0, 20), (S, j) => /* @__PURE__ */ jsxs(
+    ] }) : /* @__PURE__ */ jsx("ul", { ref: C, children: map(h == null ? void 0 : h.slice(0, 20), (v, _) => /* @__PURE__ */ jsxs(
       "li",
       {
-        onClick: () => A(S),
-        className: `cursor-pointer p-2 text-xs ${o != null && o.includes(S.id) ? "bg-blue-200" : j === b ? "bg-gray-100" : "hover:bg-gray-100"}`,
+        onClick: () => A(v),
+        className: `cursor-pointer p-2 text-xs ${o != null && o.includes(v.id) ? "bg-blue-200" : _ === b ? "bg-gray-100" : "hover:bg-gray-100"}`,
         children: [
-          S.name,
+          v.name,
           " ",
-          S.slug && /* @__PURE__ */ jsxs("small", { className: "font-light text-gray-500", children: [
+          v.slug && /* @__PURE__ */ jsxs("small", { className: "font-light text-gray-500", children: [
             "( ",
-            S.slug,
+            v.slug,
             " )"
           ] })
         ]
       },
-      S.id
+      v.id
     )) }) })
   ] });
 }, LinkField = ({ schema: o, formData: n, onChange: r, name: a }) => {
@@ -6406,7 +6406,7 @@ const DataBindingSelector = ({
       ]
     }
   ) });
-}, RTEModal = React__default.lazy(() => import("./rte-widget-modal-DwKI9icC.js")), RichTextEditorFieldComp = ({ blockId: o, id: n, placeholder: r, value: a, onChange: i, onBlur: l }) => {
+}, RTEModal = React__default.lazy(() => import("./rte-widget-modal-2S4dpCHF.js")), RichTextEditorFieldComp = ({ blockId: o, id: n, placeholder: r, value: a, onChange: i, onBlur: l }) => {
   const c = useRef(null), [d, p] = useState(!1), u = useRTEditor({
     blockId: o,
     value: a,
@@ -6655,14 +6655,14 @@ const DataBindingSelector = ({
   const { id: n, classNames: r, label: a, children: i, errors: l, help: c, hidden: d, required: p, schema: u, formData: g, onChange: m } = o, { selectedLang: f, fallbackLang: h, languages: x } = useLanguages(), b = useMemo(
     () => isEmpty(x) ? "" : isEmpty(f) ? h : f,
     [x, f, h]
-  ), y = useMemo(() => get(LANGUAGES, b, b), [b]), C = usePageExternalData(), k = useSelectedBlock(), v = useRegisteredChaiBlocks(), A = useMemo(
-    () => get(v, [k == null ? void 0 : k._type, "i18nProps"], []),
-    [v, k == null ? void 0 : k._type]
-  ), [B, _] = useState(null);
+  ), y = useMemo(() => get(LANGUAGES, b, b), [b]), C = usePageExternalData(), k = useSelectedBlock(), S = useRegisteredChaiBlocks(), A = useMemo(
+    () => get(S, [k == null ? void 0 : k._type, "i18nProps"], []),
+    [S, k == null ? void 0 : k._type]
+  ), [B, E] = useState(null);
   if (d)
     return null;
   if (u.type === "boolean") return /* @__PURE__ */ jsx("div", { className: r, children: i });
-  const E = A == null ? void 0 : A.includes(n.replace("root.", ""));
+  const j = A == null ? void 0 : A.includes(n.replace("root.", ""));
   if (u.type === "array") {
     const N = B === n;
     return /* @__PURE__ */ jsxs("div", { className: `${r} relative`, children: [
@@ -6670,7 +6670,7 @@ const DataBindingSelector = ({
         "label",
         {
           htmlFor: n,
-          onClick: () => _(N ? null : n),
+          onClick: () => E(N ? null : n),
           className: "flex cursor-pointer items-center gap-x-1 py-1 leading-tight duration-200 hover:bg-slate-100",
           children: [
             N ? /* @__PURE__ */ jsx(ChevronDownIcon, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(ChevronRightIcon, { className: "h-3 w-3" }),
@@ -6699,14 +6699,14 @@ const DataBindingSelector = ({
       ] })
     ] });
   }
-  const S = n.replace("root.", ""), j = A.includes(S) && !isEmpty(f) && isEmpty(g);
+  const v = n.replace("root.", ""), _ = A.includes(v) && !isEmpty(f) && isEmpty(g);
   return /* @__PURE__ */ jsxs("div", { className: r, children: [
     u.title && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ jsxs("label", { htmlFor: n, className: u.type === "object" ? "pb-2" : "", children: [
           a,
           " ",
-          E && /* @__PURE__ */ jsxs("small", { className: "text-[9px] text-zinc-400", children: [
+          j && /* @__PURE__ */ jsxs("small", { className: "text-[9px] text-zinc-400", children: [
             " ",
             y
           ] }),
@@ -6718,7 +6718,7 @@ const DataBindingSelector = ({
         ] }) })
       ] }),
       !u.enum && !u.oneOf && C && /* @__PURE__ */ jsxs("span", { className: "flex items-center space-x-1", children: [
-        j ? /* @__PURE__ */ jsxs(Tooltip, { children: [
+        _ ? /* @__PURE__ */ jsxs(Tooltip, { children: [
           /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxs(
             "svg",
             {
@@ -6857,36 +6857,36 @@ const DataBindingSelector = ({
   }), a;
 };
 function BlockSettings() {
-  const { selectedLang: o } = useLanguages(), n = useSelectedBlock(), r = useUpdateBlocksPropsRealtime(), a = useUpdateBlocksProps(), i = getRegisteredChaiBlock(n == null ? void 0 : n._type), l = formDataWithSelectedLang(n, o, i), [c, d] = useState(l), [p, u] = useState(!1), g = useWrapperBlock(), m = getRegisteredChaiBlock(g == null ? void 0 : g._type), f = formDataWithSelectedLang(g, o, m), h = ({ formData: B }, _, w) => {
-    _ && (c == null ? void 0 : c._id) === n._id && a([n._id], { [_]: get(B, _) }, w);
+  const { selectedLang: o } = useLanguages(), n = useSelectedBlock(), r = useUpdateBlocksPropsRealtime(), a = useUpdateBlocksProps(), i = getRegisteredChaiBlock(n == null ? void 0 : n._type), l = formDataWithSelectedLang(n, o, i), [c, d] = useState(l), [p, u] = useState(!1), g = useWrapperBlock(), m = getRegisteredChaiBlock(g == null ? void 0 : g._type), f = formDataWithSelectedLang(g, o, m), h = ({ formData: B }, E, w) => {
+    E && (c == null ? void 0 : c._id) === n._id && a([n._id], { [E]: get(B, E) }, w);
   }, x = useCallback(
-    debounce(({ formData: B }, _, w) => {
-      h({ formData: B }, _, w), d(B);
+    debounce(({ formData: B }, E, w) => {
+      h({ formData: B }, E, w), d(B);
     }, 1500),
     [n == null ? void 0 : n._id, o]
-  ), b = ({ formData: B }, _) => {
-    _ && (r([n._id], { [_]: get(B, _) }), x({ formData: B }, _, { [_]: get(c, _) }));
-  }, y = ({ formData: B }, _) => {
-    _ && (r([g._id], { [_]: get(B, _) }), x({ formData: B }, _, { [_]: get(c, _) }));
+  ), b = ({ formData: B }, E) => {
+    E && (r([n._id], { [E]: get(B, E) }), x({ formData: B }, E, { [E]: get(c, E) }));
+  }, y = ({ formData: B }, E) => {
+    E && (r([g._id], { [E]: get(B, E) }), x({ formData: B }, E, { [E]: get(c, E) }));
   }, { schema: C, uiSchema: k } = useMemo(() => {
     const B = n == null ? void 0 : n._type;
     if (!B)
       return { schema: {}, uiSchema: {} };
     try {
-      const { schema: _, uiSchema: w } = getBlockFormSchemas(B);
+      const { schema: E, uiSchema: w } = getBlockFormSchemas(B);
       if (B === "Repeater") {
-        const E = get(n, "repeaterItems", "");
-        startsWith(E, `{{${COLLECTION_PREFIX}`) ? (set(w, "filter", { "ui:widget": "collectionSelect" }), set(w, "sort", { "ui:widget": "collectionSelect" })) : (set(w, "filter", { "ui:widget": "hidden" }), set(w, "sort", { "ui:widget": "hidden" }));
+        const j = get(n, "repeaterItems", "");
+        startsWith(j, `{{${COLLECTION_PREFIX}`) ? (set(w, "filter", { "ui:widget": "collectionSelect" }), set(w, "sort", { "ui:widget": "collectionSelect" })) : (set(w, "filter", { "ui:widget": "hidden" }), set(w, "sort", { "ui:widget": "hidden" }));
       }
-      return { schema: _, uiSchema: w };
+      return { schema: E, uiSchema: w };
     } catch {
       return { schema: {}, uiSchema: {} };
     }
-  }, [n]), { wrapperSchema: v, wrapperUiSchema: A } = useMemo(() => {
+  }, [n]), { wrapperSchema: S, wrapperUiSchema: A } = useMemo(() => {
     if (!g || !(g != null && g._type))
       return { wrapperSchema: {}, wrapperUiSchema: {} };
-    const B = g == null ? void 0 : g._type, { schema: _ = {}, uiSchema: w = {} } = getBlockFormSchemas(B);
-    return { wrapperSchema: _, wrapperUiSchema: w };
+    const B = g == null ? void 0 : g._type, { schema: E = {}, uiSchema: w = {} } = getBlockFormSchemas(B);
+    return { wrapperSchema: E, wrapperUiSchema: w };
   }, [g]);
   return /* @__PURE__ */ jsxs("div", { className: "no-scrollbar overflow-x-hidden px-px", children: [
     !isEmpty(g) && /* @__PURE__ */ jsxs("div", { className: "mb-4 rounded border bg-zinc-100 px-1", children: [
@@ -6914,7 +6914,7 @@ function BlockSettings() {
           blockId: g == null ? void 0 : g._id,
           onChange: y,
           formData: f,
-          schema: v,
+          schema: S,
           uiSchema: A
         }
       ) })
@@ -7137,48 +7137,48 @@ const BlockStylingProps = () => {
   },
   a
 )) }), THROTTLE_TIME = 50, AdvanceChoices = (o) => {
-  const [n, r] = useState(!1), [a, i] = useState(""), { currentClass: l, onChange: c, classPrefix: d, cssProperty: p, units: u, negative: g } = o, [m, f] = useState(p != null && p.toLowerCase().includes("width") ? "%" : u[0]), [h, x] = useState(!1), [b, y] = useState(""), [C, k] = useState(!1), [v, A] = useState(!1);
+  const [n, r] = useState(!1), [a, i] = useState(""), { currentClass: l, onChange: c, classPrefix: d, cssProperty: p, units: u, negative: g } = o, [m, f] = useState(p != null && p.toLowerCase().includes("width") ? "%" : u[0]), [h, x] = useState(!1), [b, y] = useState(""), [C, k] = useState(!1), [S, A] = useState(!1);
   useEffect(() => {
-    const { value: S, unit: j } = getClassValueAndUnit(l);
-    if (j === "") {
-      i(S), f(p != null && p.toLowerCase().includes("width") ? "%" : first(u));
+    const { value: v, unit: _ } = getClassValueAndUnit(l);
+    if (_ === "") {
+      i(v), f(p != null && p.toLowerCase().includes("width") ? "%" : first(u));
       return;
     }
-    f(j), i(j === "class" || isEmpty(S) ? "" : S);
+    f(_), i(_ === "class" || isEmpty(v) ? "" : v);
   }, [l, p, u]);
-  const B = useThrottledCallback((S) => c(S), [c], THROTTLE_TIME), _ = useThrottledCallback((S) => c(S, !1), [c], THROTTLE_TIME), w = useCallback(
-    (S = !1) => {
-      const j = getUserInputValues(`${a}`, u);
-      if (get(j, "error", !1)) {
+  const B = useThrottledCallback((v) => c(v), [c], THROTTLE_TIME), E = useThrottledCallback((v) => c(v, !1), [c], THROTTLE_TIME), w = useCallback(
+    (v = !1) => {
+      const _ = getUserInputValues(`${a}`, u);
+      if (get(_, "error", !1)) {
         x(!0);
         return;
       }
-      const N = get(j, "unit") !== "" ? get(j, "unit") : m;
+      const N = get(_, "unit") !== "" ? get(_, "unit") : m;
       if (N === "auto" || N === "none") {
         B(`${d}${N}`);
         return;
       }
-      if (get(j, "value") === "")
+      if (get(_, "value") === "")
         return;
-      const D = `${get(j, "value", "").startsWith("-") ? "-" : ""}${d}[${get(j, "value", "").replace("-", "")}${N === "-" ? "" : N}]`;
-      S ? _(D) : B(D);
+      const P = `${get(_, "value", "").startsWith("-") ? "-" : ""}${d}[${get(_, "value", "").replace("-", "")}${N === "-" ? "" : N}]`;
+      v ? E(P) : B(P);
     },
-    [B, _, a, m, d, u]
-  ), E = useCallback(
-    (S) => {
-      const j = getUserInputValues(`${a}`, u);
-      if (get(j, "error", !1)) {
+    [B, E, a, m, d, u]
+  ), j = useCallback(
+    (v) => {
+      const _ = getUserInputValues(`${a}`, u);
+      if (get(_, "error", !1)) {
         x(!0);
         return;
       }
-      if (S === "auto" || S === "none") {
-        B(`${d}${S}`);
+      if (v === "auto" || v === "none") {
+        B(`${d}${v}`);
         return;
       }
-      if (get(j, "value") === "")
+      if (get(_, "value") === "")
         return;
-      const N = get(j, "unit") !== "" ? get(j, "unit") : S, D = `${get(j, "value", "").startsWith("-") ? "-" : ""}${d}[${get(j, "value", "").replace("-", "")}${N === "-" ? "" : N}]`;
-      B(D);
+      const N = get(_, "unit") !== "" ? get(_, "unit") : v, P = `${get(_, "value", "").startsWith("-") ? "-" : ""}${d}[${get(_, "value", "").replace("-", "")}${N === "-" ? "" : N}]`;
+      B(P);
     },
     [B, a, d, u]
   );
@@ -7201,29 +7201,29 @@ const BlockStylingProps = () => {
         "input",
         {
           readOnly: m === "class",
-          onKeyPress: (S) => {
-            S.key === "Enter" && w();
+          onKeyPress: (v) => {
+            v.key === "Enter" && w();
           },
-          onKeyDown: (S) => {
-            if (S.keyCode !== 38 && S.keyCode !== 40)
+          onKeyDown: (v) => {
+            if (v.keyCode !== 38 && v.keyCode !== 40)
               return;
-            S.preventDefault(), A(!0);
-            const j = parseInt$1(S.target.value);
-            let N = isNaN$1(j) ? 0 : j;
-            S.keyCode === 38 && (N += 1), S.keyCode === 40 && (N -= 1);
-            const I = `${N}`, P = `${I.startsWith("-") ? "-" : ""}${d}[${I.replace("-", "")}${m === "-" ? "" : m}]`;
-            _(P);
+            v.preventDefault(), A(!0);
+            const _ = parseInt$1(v.target.value);
+            let N = isNaN$1(_) ? 0 : _;
+            v.keyCode === 38 && (N += 1), v.keyCode === 40 && (N -= 1);
+            const I = `${N}`, D = `${I.startsWith("-") ? "-" : ""}${d}[${I.replace("-", "")}${m === "-" ? "" : m}]`;
+            E(D);
           },
-          onKeyUp: (S) => {
-            v && (S.preventDefault(), A(!1));
+          onKeyUp: (v) => {
+            S && (v.preventDefault(), A(!1));
           },
           onBlur: () => w(),
-          onChange: (S) => {
-            x(!1), i(S.target.value);
+          onChange: (v) => {
+            x(!1), i(v.target.value);
           },
-          onClick: (S) => {
-            var j;
-            (j = S == null ? void 0 : S.target) == null || j.select(), r(!1);
+          onClick: (v) => {
+            var _;
+            (_ = v == null ? void 0 : v.target) == null || _.select(), r(!1);
           },
           value: C ? 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(
@@ -7250,8 +7250,8 @@ const BlockStylingProps = () => {
           {
             units: u,
             current: m,
-            onSelect: (S) => {
-              r(!1), f(S), E(S);
+            onSelect: (v) => {
+              r(!1), f(v), j(v);
             }
           }
         ) })
@@ -7261,18 +7261,18 @@ const BlockStylingProps = () => {
       DragStyleButton,
       {
         onDragStart: () => k(!0),
-        onDragEnd: (S) => {
-          if (y(() => ""), k(!1), isEmpty(S))
+        onDragEnd: (v) => {
+          if (y(() => ""), k(!1), isEmpty(v))
             return;
-          const j = `${S}`, I = `${j.startsWith("-") ? "-" : ""}${d}[${j.replace("-", "")}${m === "-" ? "" : m}]`;
+          const _ = `${v}`, I = `${_.startsWith("-") ? "-" : ""}${d}[${_.replace("-", "")}${m === "-" ? "" : m}]`;
           B(I);
         },
-        onDrag: (S) => {
-          if (isEmpty(S))
+        onDrag: (v) => {
+          if (isEmpty(v))
             return;
-          y(S);
-          const j = `${S}`, I = `${j.startsWith("-") ? "-" : ""}${d}[${j.replace("-", "")}${m === "-" ? "" : m}]`;
-          _(I);
+          y(v);
+          const _ = `${v}`, I = `${_.startsWith("-") ? "-" : ""}${d}[${_.replace("-", "")}${m === "-" ? "" : m}]`;
+          E(I);
         },
         currentValue: a,
         unit: m,
@@ -7736,11 +7736,11 @@ const COLOR_PROP = {
 }, getBreakpoint = (o) => `${o.toUpperCase()} ${BREAKPOINTS[o] ? `(${BREAKPOINTS[o]} & up)` : ""}`, BlockStyle = (o) => {
   const { t: n } = useTranslation(), { type: r = "icons", label: a, property: i, onEmitChange: l = () => {
   }, units: c, negative: d = !1 } = o, [p] = useDarkMode(), [u] = useStylingState(), [, g] = useScreenSizeWidth(), m = useCurrentClassByProperty(i), f = useAddClassesToBlocks(), h = useRemoveClassesFromBlocks(), [x] = useSelectedBlockIds(), b = useMemo(() => get(m, "fullCls", ""), [m]), y = useCallback(
-    (_, w = !0) => {
-      const E = { dark: p, mq: g, mod: u, cls: _, property: i, fullCls: "" };
-      (p || u !== "") && (E.mq = "xs");
-      const S = generateFullClsName(E);
-      f(x, [S], w);
+    (E, w = !0) => {
+      const j = { dark: p, mq: g, mod: u, cls: E, property: i, fullCls: "" };
+      (p || u !== "") && (j.mq = "xs");
+      const v = generateFullClsName(j);
+      f(x, [v], w);
     },
     [x, p, g, u, i, f]
   ), C = useCallback(() => {
@@ -7749,18 +7749,18 @@ const COLOR_PROP = {
   useEffect(() => {
     l(k, m);
   }, [k, l, m]);
-  const [, , v] = useScreenSizeWidth(), A = useCallback(
-    (_) => {
-      v({
+  const [, , S] = useScreenSizeWidth(), A = useCallback(
+    (E) => {
+      S({
         xs: 400,
         sm: 640,
         md: 800,
         lg: 1024,
         xl: 1420,
         "2xl": 1920
-      }[_]);
+      }[E]);
     },
-    [v]
+    [S]
   ), B = get(m, "dark", null) === p && get(m, "mod", null) === u && get(m, "mq", null) === g;
   return /* @__PURE__ */ jsx(BlockStyleProvider, { canChange: k, canReset: m && B, children: /* @__PURE__ */ jsxs("div", { className: "group flex flex-row items-center py-2 first:pt-0 last:pb-0", children: [
     /* @__PURE__ */ jsx("div", { className: "relative w-[70px] truncate text-xs text-foreground", children: /* @__PURE__ */ jsx("span", { className: `text-[11px] ${m && !B ? "text-foreground" : ""}`, children: n(a) }) }),
@@ -8005,7 +8005,7 @@ const COLOR_PROP = {
   activeButtonClass: i = ""
 }) => {
   const [l, , c] = useScreenSizeWidth(), [d, p] = useCanvasDisplayWidth(), [u, g] = useSelectedBreakpoints(), m = u, f = g, { t: h } = useTranslation(), x = useBuilderProp("breakpoints", WEB_BREAKPOINTS), b = (k) => {
-    m.includes(k) ? m.length > 2 && f(m.filter((v) => v !== k)) : f((v) => [...v, k]);
+    m.includes(k) ? m.length > 2 && f(m.filter((S) => S !== k)) : f((S) => [...S, k]);
   }, y = (k) => {
     n || c(k), p(k);
   }, C = getBreakpointValue(n ? d : l).toLowerCase();
@@ -8047,7 +8047,7 @@ const COLOR_PROP = {
             disabled: k.breakpoint === "xs",
             onCheckedChange: () => b(toUpper(k.breakpoint)),
             checked: includes(m, toUpper(k.breakpoint)),
-            onSelect: (v) => v.preventDefault(),
+            onSelect: (S) => S.preventDefault(),
             children: h(k.title)
           },
           k.breakpoint
@@ -8079,7 +8079,7 @@ function BreakpointSelector() {
 const DesignTokensIcon = ({ className: o = "" }) => /* @__PURE__ */ jsx(FontStyleIcon, { className: o });
 function ManualClasses() {
   var O;
-  const o = useRef(null), [n, r] = useState(""), [a, i] = useState(-1), [, l] = useRightPanel(), c = useFuseSearch(), { t: d } = useTranslation(), [p] = useSelectedStylingBlocks(), u = useSelectedBlock(), g = useAddClassesToBlocks(), m = useRemoveClassesFromBlocks(), [f] = useSelectedBlockIds(), [h, x] = useState(""), b = useAtomValue$1(chaiDesignTokensAtom), y = (O = first(p)) == null ? void 0 : O.prop, { classes: C } = getSplitChaiClasses(get(u, y, "")), k = C.split(" ").filter((L) => !isEmpty(L)), v = useMemo(() => [...k].sort((L, T) => {
+  const o = useRef(null), [n, r] = useState(""), [a, i] = useState(-1), [, l] = useRightPanel(), c = useFuseSearch(), { t: d } = useTranslation(), [p] = useSelectedStylingBlocks(), u = useSelectedBlock(), g = useAddClassesToBlocks(), m = useRemoveClassesFromBlocks(), [f] = useSelectedBlockIds(), [h, x] = useState(""), b = useAtomValue$1(chaiDesignTokensAtom), y = (O = first(p)) == null ? void 0 : O.prop, { classes: C } = getSplitChaiClasses(get(u, y, "")), k = C.split(" ").filter((L) => !isEmpty(L)), S = useMemo(() => [...k].sort((L, T) => {
     const M = L.startsWith(DESIGN_TOKEN_PREFIX), H = T.startsWith(DESIGN_TOKEN_PREFIX);
     return M && !H ? -1 : !M && H ? 1 : 0;
   }), [k]), A = useBuilderProp("flags.copyPaste", !0), B = (L) => {
@@ -8088,16 +8088,16 @@ function ManualClasses() {
       return T ? T.name : L;
     }
     return L;
-  }, _ = (L) => {
+  }, E = (L) => {
     const T = Object.entries(b).find(([M, H]) => H.name === L);
     return T ? `${T[0]}` : L;
   }, w = () => {
-    const L = h.trim().replace(/ +(?= )/g, "").split(" ").map(_);
+    const L = h.trim().replace(/ +(?= )/g, "").split(" ").map(E);
     g(f, L, !0), x("");
-  }, [E, S] = useState([]), j = useBuilderProp("flags.designTokens", !1), N = ({ value: L }) => {
+  }, [j, v] = useState([]), _ = useBuilderProp("flags.designTokens", !1), N = ({ value: L }) => {
     const T = L.trim().toLowerCase(), M = T.match(/.+:/g);
     let H = [], W = [];
-    if (j && (T === "" ? W = Object.entries(b).map(([V, U]) => ({
+    if (_ && (T === "" ? W = Object.entries(b).map(([V, U]) => ({
       name: U.name,
       id: `${V}`,
       isDesignToken: !0
@@ -8114,10 +8114,10 @@ function ManualClasses() {
     } else
       H = c.search(T);
     const z = [...W, ...map(H, "item")];
-    return S(z);
+    return v(z);
   }, I = () => {
-    S([]);
-  }, D = (L) => L.name, P = (L) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 rounded-md p-1", children: [
+    v([]);
+  }, P = (L) => L.name, D = (L) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 rounded-md p-1", children: [
     L.isDesignToken && /* @__PURE__ */ jsx(DesignTokensIcon, { className: "h-4 w-4 text-gray-600" }),
     /* @__PURE__ */ jsx("span", { children: L.name })
   ] }), R = useMemo(
@@ -8135,14 +8135,14 @@ function ManualClasses() {
         }, 0);
       },
       onKeyDown: (L) => {
-        L.key === "Enter" && h.trim() !== "" && E.length === 0 && w();
+        L.key === "Enter" && h.trim() !== "" && j.length === 0 && w();
       },
       onChange: (L, { newValue: T }) => x(T),
       className: "w-full rounded-md text-xs px-2 hover:outline-0 bg-background border-border py-1"
     }),
-    [h, d, o, E.length]
+    [h, d, o, j.length]
   ), $ = (L) => {
-    const T = n.trim().replace(/ +(?= )/g, "").split(" ").map(_);
+    const T = n.trim().replace(/ +(?= )/g, "").split(" ").map(E);
     m(f, [L]), g(f, T, !0), r(""), i(-1);
   }, F = () => {
     if (navigator.clipboard === void 0) {
@@ -8154,27 +8154,27 @@ function ManualClasses() {
   return /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col gap-y-1.5 border-b border-border pb-4", children: [
     /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between gap-x-2", children: /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-between gap-x-2 text-muted-foreground", children: [
       /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-x-1", children: [
-        /* @__PURE__ */ jsx("span", { children: d(j ? "Styles" : "Classes") }),
+        /* @__PURE__ */ jsx("span", { children: d(_ ? "Styles" : "Classes") }),
         A && /* @__PURE__ */ jsxs(Tooltip, { children: [
           /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(CopyIcon, { onClick: F, className: "cursor-pointer" }) }),
           /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: d("Copy classes to clipboard") }) })
         ] })
       ] }),
-      j && /* @__PURE__ */ jsx(Button, { variant: "link", className: "underline", onClick: () => l("design-tokens"), children: d("Design Tokens") })
+      _ && /* @__PURE__ */ jsx(Button, { variant: "link", className: "underline", onClick: () => l("design-tokens"), children: d("Design Tokens") })
     ] }) }),
     /* @__PURE__ */ jsxs("div", { className: "relative flex items-center gap-x-3", children: [
       /* @__PURE__ */ jsx("div", { className: "relative flex w-full items-center gap-x-3", children: /* @__PURE__ */ jsx(
         Autosuggest,
         {
-          suggestions: E,
+          suggestions: j,
           onSuggestionsFetchRequested: N,
           onSuggestionsClearRequested: I,
-          getSuggestionValue: D,
-          renderSuggestion: P,
+          getSuggestionValue: P,
+          renderSuggestion: D,
           inputProps: R,
           highlightFirstSuggestion: !0,
           onSuggestionSelected: (L, { suggestionValue: T }) => {
-            const M = _(T);
+            const M = E(T);
             g(f, [M], !0), x("");
           },
           containerProps: {
@@ -8199,7 +8199,7 @@ function ManualClasses() {
         }
       )
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "flex w-full flex-wrap gap-2 overflow-x-hidden", children: v.map(
+    /* @__PURE__ */ jsx("div", { className: "flex w-full flex-wrap gap-2 overflow-x-hidden", children: S.map(
       (L, T) => a === T ? /* @__PURE__ */ jsx(
         "input",
         {
@@ -8595,7 +8595,7 @@ const registerChaiLibrary = (o, n) => {
               ]
             };
           } else if (n) {
-            const v = typeof n == "function" ? await n() : n, A = getBlocksFromHTML(v);
+            const S = typeof n == "function" ? await n() : n, A = getBlocksFromHTML(S);
             if (isEmpty(A)) return;
             k = {
               type: "Box",
@@ -8603,16 +8603,16 @@ const registerChaiLibrary = (o, n) => {
               name: get(A, "0._type", "Block")
             };
           } else if (r) {
-            const v = typeof r == "function" ? await r() : r;
-            if (isEmpty(v)) return;
+            const S = typeof r == "function" ? await r() : r;
+            if (isEmpty(S)) return;
             k = {
               type: "Box",
-              blocks: v,
-              name: get(v, "0._type", "Block")
+              blocks: S,
+              name: get(S, "0._type", "Block")
             };
           } else if (o) {
-            const v = typeof o == "function" ? await o() : o;
-            k = typeof v == "object" ? omit(v, ["component", "icon"]) : v;
+            const S = typeof o == "function" ? await o() : o;
+            k = typeof S == "object" ? omit(S, ["component", "icon"]) : S;
           }
           if (!k) return;
           u(C, k, !0), setTimeout(() => {
@@ -8732,17 +8732,17 @@ const BlockCard = ({
       return;
     }
   }, [y, C]);
-  const v = get(y, C, []), A = useRef(null), { t: B } = useTranslation(), _ = useRef(null);
+  const S = get(y, C, []), A = useRef(null), { t: B } = useTranslation(), E = useRef(null);
   useEffect(() => {
     var I;
-    const N = (I = _.current) == null ? void 0 : I.querySelector("[data-radix-scroll-area-viewport]");
+    const N = (I = E.current) == null ? void 0 : I.querySelector("[data-radix-scroll-area-viewport]");
     N && N.scrollTo({ top: 0, behavior: "smooth" });
   }, [c, C]);
   const w = (N) => {
     A.current && (clearTimeout(A.current), A.current = null), A.current = setTimeout(() => {
       A.current && k(N);
     }, 400);
-  }, E = () => {
+  }, j = () => {
     c != null && c.id && u(c.id);
   };
   if (p)
@@ -8750,7 +8750,7 @@ const BlockCard = ({
       /* @__PURE__ */ jsx(Skeleton, { className: "col-span-3 h-full" }),
       /* @__PURE__ */ jsx(Skeleton, { className: "col-span-9 h-full" })
     ] });
-  const S = filter(v, (N, I) => I % 2 === 0), j = filter(v, (N, I) => I % 2 === 1);
+  const v = filter(S, (N, I) => I % 2 === 0), _ = filter(S, (N, I) => I % 2 === 1);
   return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: "flex h-full max-h-full flex-col", children: [
     /* @__PURE__ */ jsx(SearchInput, { value: g, setValue: m }),
     /* @__PURE__ */ jsx("div", { className: "relative flex h-full max-h-full flex-1 overflow-hidden bg-background", children: /* @__PURE__ */ jsxs("div", { className: `flex h-full flex-1 pt-2 ${r ? "flex-col" : ""}`, children: [
@@ -8769,7 +8769,7 @@ const BlockCard = ({
                   className: `no-scrollbar mt-2 h-full max-h-full flex-1 overflow-y-auto ${r ? "" : "pb-20"}`,
                   children: isEmpty(y) ? /* @__PURE__ */ jsx("div", { className: "mt-4 flex flex-col items-center justify-center gap-3 p-4 text-center", children: g ? /* @__PURE__ */ jsx("p", { className: "text-sm", children: B("No matching blocks found") }) : /* @__PURE__ */ jsxs(Fragment, { children: [
                     /* @__PURE__ */ jsx("p", { className: "text-sm", children: B("Failed to load the UI library. Try again") }),
-                    /* @__PURE__ */ jsxs(Button, { onClick: E, variant: "outline", size: "sm", className: "gap-2", children: [
+                    /* @__PURE__ */ jsxs(Button, { onClick: j, variant: "outline", size: "sm", className: "gap-2", children: [
                       /* @__PURE__ */ jsx(ReloadIcon, { className: "h-4 w-4" }),
                       B("Retry")
                     ] })
@@ -8803,12 +8803,12 @@ const BlockCard = ({
       /* @__PURE__ */ jsx("div", { className: `flex h-full max-h-full w-full flex-col border-border ${r ? "" : "border-l"}`, children: /* @__PURE__ */ jsxs(
         ScrollArea,
         {
-          ref: _,
+          ref: E,
           onMouseEnter: () => A.current ? clearTimeout(A.current) : null,
           className: "z-10 flex h-full max-h-full w-full flex-col gap-2 transition-all ease-linear",
           children: [
-            isEmpty(v) && !isEmpty(y) ? /* @__PURE__ */ jsx("div", { className: "flex h-full flex-col items-center justify-center p-6 text-center", children: /* @__PURE__ */ jsx("p", { className: "text-sm", children: B("No blocks found in this group") }) }) : /* @__PURE__ */ jsxs("div", { className: `grid w-full gap-2 ${r ? "grid-cols-1 pb-20" : "grid-cols-2 px-2"}`, children: [
-              /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: S.map((N, I) => /* @__PURE__ */ jsx(
+            isEmpty(S) && !isEmpty(y) ? /* @__PURE__ */ jsx("div", { className: "flex h-full flex-col items-center justify-center p-6 text-center", children: /* @__PURE__ */ jsx("p", { className: "text-sm", children: B("No blocks found in this group") }) }) : /* @__PURE__ */ jsxs("div", { className: `grid w-full gap-2 ${r ? "grid-cols-1 pb-20" : "grid-cols-2 px-2"}`, children: [
+              /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: v.map((N, I) => /* @__PURE__ */ jsx(
                 BlockCard,
                 {
                   parentId: o,
@@ -8818,7 +8818,7 @@ const BlockCard = ({
                 },
                 `block-${I}`
               )) }),
-              /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: j.map((N, I) => /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: _.map((N, I) => /* @__PURE__ */ jsx(
                 BlockCard,
                 {
                   parentId: o,
@@ -8868,14 +8868,14 @@ const BlockCard = ({
         }), m(!0);
       else if (!l && Object.keys(i || {}).length > 0) {
         const h = Object.entries(i).map(([b, y]) => {
-          const C = y, k = C.type || "partial", v = formatReadableName(k);
+          const C = y, k = C.type || "partial", S = formatReadableName(k);
           return {
             type: "PartialBlock",
             // Set the type to PartialBlock
             label: formatReadableName(C.name || b),
             description: C.description || "",
             icon: FrameIcon,
-            group: v,
+            group: S,
             // Use formatted type as group
             category: "partial",
             partialBlockId: b,
@@ -8942,8 +8942,8 @@ const BlockCard = ({
   const { t: c } = useTranslation(), [d] = useBlocksStore(), [p, u] = useState(""), g = useRef(null), [m] = useAtom$1(addBlockTabAtom), f = (N = find(d, (I) => I._id === r)) == null ? void 0 : N._type, [h, x] = useState("all"), [b, y] = useState(null), C = useRef(null), k = useBuilderProp("flags.dragAndDrop", !1);
   useEffect(() => {
     const I = setTimeout(() => {
-      var D;
-      (D = g.current) == null || D.focus();
+      var P;
+      (P = g.current) == null || P.focus();
     }, 0);
     return () => clearTimeout(I);
   }, [m]), useEffect(() => {
@@ -8953,49 +8953,49 @@ const BlockCard = ({
   }, 500), () => {
     C.current && C.current.cancel();
   }), []);
-  const v = useCallback((I) => {
+  const S = useCallback((I) => {
     y(I), C.current && C.current(I);
   }, []), A = useCallback(() => {
     y(null), C.current && C.current.cancel();
   }, []), B = useCallback((I) => {
     C.current && C.current.cancel(), x(I), y(null);
-  }, []), _ = useMemo(
+  }, []), E = useMemo(
     () => p ? values(n).filter(
       (I) => {
-        var D, P;
-        return (((D = I.label) == null ? void 0 : D.toLowerCase()) + " " + ((P = I.type) == null ? void 0 : P.toLowerCase())).includes(p.toLowerCase());
+        var P, D;
+        return (((P = I.label) == null ? void 0 : P.toLowerCase()) + " " + ((D = I.type) == null ? void 0 : D.toLowerCase())).includes(p.toLowerCase());
       }
     ) : n,
     [n, p]
   ), w = useMemo(
     () => p ? o.filter(
-      (I) => reject(filter(values(_), { group: I }), { hidden: !0 }).length > 0
+      (I) => reject(filter(values(E), { group: I }), { hidden: !0 }).length > 0
     ) : o.filter((I) => reject(filter(values(n), { group: I }), { hidden: !0 }).length > 0),
-    [n, _, o, p]
-  ), E = useMemo(
+    [n, E, o, p]
+  ), j = useMemo(
     () => sortBy(w, (I) => CORE_GROUPS.indexOf(I) === -1 ? 99 : CORE_GROUPS.indexOf(I)),
     [w]
-  ), S = useMemo(() => h === "all" ? _ : filter(values(_), { group: h }), [_, h]), j = useMemo(() => h === "all" ? E : [h], [E, h]);
+  ), v = useMemo(() => h === "all" ? E : filter(values(E), { group: h }), [E, h]), _ = useMemo(() => h === "all" ? j : [h], [j, h]);
   return /* @__PURE__ */ jsxs("div", { className: "mx-auto flex h-full w-full flex-col", children: [
     /* @__PURE__ */ jsx(SearchInput, { value: p, setValue: u }),
     /* @__PURE__ */ jsxs("div", { className: "sticky top-10 flex h-[calc(100%-48px)] overflow-hidden pt-2", children: [
-      !l && E.length > 0 && /* @__PURE__ */ jsx("div", { className: "w-1/4 min-w-[120px] border-r border-border", children: /* @__PURE__ */ jsx(ScrollArea, { className: "h-full", children: /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+      !l && j.length > 0 && /* @__PURE__ */ jsx("div", { className: "w-1/4 min-w-[120px] border-r border-border", children: /* @__PURE__ */ jsx(ScrollArea, { className: "h-full", children: /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
         /* @__PURE__ */ jsx(
           "button",
           {
             onClick: () => B("all"),
-            onMouseEnter: () => v("all"),
+            onMouseEnter: () => S("all"),
             onMouseLeave: A,
             className: `w-full rounded-md px-2 py-1.5 text-left text-sm font-medium ${h === "all" || b === "all" ? "bg-primary text-primary-foreground" : "hover:bg-primary/50 hover:text-primary-foreground"}`,
             children: c("All")
           },
           "sidebar-all"
         ),
-        E.map((I) => /* @__PURE__ */ jsx(
+        j.map((I) => /* @__PURE__ */ jsx(
           "button",
           {
             onClick: () => B(I),
-            onMouseEnter: () => v(I),
+            onMouseEnter: () => S(I),
             onMouseLeave: A,
             className: `w-full rounded-md px-2 py-1.5 text-left text-sm ${h === I || b === I ? "bg-primary text-primary-foreground" : "hover:bg-primary/50 hover:text-primary-foreground"}`,
             children: capitalize(c(I.toLowerCase()))
@@ -9006,18 +9006,18 @@ const BlockCard = ({
       /* @__PURE__ */ jsx(
         "div",
         {
-          className: `h-full flex-1 overflow-hidden ${!l && E.length > 0 ? "w-3/4" : "w-full"}`,
+          className: `h-full flex-1 overflow-hidden ${!l && j.length > 0 ? "w-3/4" : "w-full"}`,
           children: /* @__PURE__ */ jsx(ScrollArea, { id: "add-blocks-scroll-area", className: "no-scrollbar h-full", children: w.length === 0 && p ? /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center justify-center p-8 text-center text-muted-foreground", children: /* @__PURE__ */ jsxs("p", { children: [
             c("No blocks found matching"),
             ' "',
             p,
             '"'
-          ] }) }) : /* @__PURE__ */ jsx("div", { className: `${l ? "p-0" : "p-4"} space-y-6`, children: j.map((I) => /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+          ] }) }) : /* @__PURE__ */ jsx("div", { className: `${l ? "p-0" : "p-4"} space-y-6`, children: _.map((I, P) => /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
             /* @__PURE__ */ jsx("h3", { className: "px-1 text-sm font-medium", children: capitalize(c(I.toLowerCase())) }),
             /* @__PURE__ */ jsx("div", { className: "grid gap-2 " + i, children: reject(
-              h === "all" ? filter(values(S), { group: I }) : values(S),
+              h === "all" ? filter(values(v), { group: I }) : values(v),
               { hidden: !0 }
-            ).map((D) => /* @__PURE__ */ jsx(
+            ).map((D, R) => /* @__PURE__ */ jsx(
               CoreBlock,
               {
                 parentId: r,
@@ -9025,7 +9025,7 @@ const BlockCard = ({
                 block: D,
                 disabled: !k && (!canAcceptChildBlock(f, D.type) || !canBeNestedInside(f, D.type))
               },
-              D.type
+              D.type + "-" + P + "-" + R
             )) })
           ] }, I)) }) })
         }
@@ -9502,18 +9502,18 @@ const useStructureValidation = () => {
   var L;
   const { t: a } = useTranslation(), i = useUpdateBlocksProps(), [l] = useAtom$1(canvasIframeAtom), { hasPermission: c } = usePermissions();
   let d = null;
-  const p = o.children.length > 0, { highlightBlock: u, clearHighlight: g } = useBlockHighlight(), m = useIsDragAndDropEnabled(), { id: f, data: h, isSelected: x, willReceiveDrop: b, isDragging: y, isEditing: C, handleClick: k } = o, v = useStructureValidation(), A = useMemo(() => v.getBlockErrors(f), [v, f]), B = get(h, "_show", !0), _ = (T) => {
+  const p = o.children.length > 0, { highlightBlock: u, clearHighlight: g } = useBlockHighlight(), m = useIsDragAndDropEnabled(), { id: f, data: h, isSelected: x, willReceiveDrop: b, isDragging: y, isEditing: C, handleClick: k } = o, S = useStructureValidation(), A = useMemo(() => S.getBlockErrors(f), [S, f]), B = get(h, "_show", !0), E = (T) => {
     T.stopPropagation(), B && o.toggle();
   }, w = (T) => {
     T.isInternal && (d = T.isOpen, T.isOpen && T.close());
-  }, E = (T) => {
+  }, j = (T) => {
     T.isInternal && d !== null && (d ? T.open() : T.close(), d = null);
-  }, [S, j] = useAtom$1(currentAddSelection), N = () => {
+  }, [v, _] = useAtom$1(currentAddSelection), N = () => {
     var T;
-    I(), o.parent.isSelected || j((T = o == null ? void 0 : o.parent) == null ? void 0 : T.id);
+    I(), o.parent.isSelected || _((T = o == null ? void 0 : o.parent) == null ? void 0 : T.id);
   }, I = () => {
-    j(null);
-  }, D = (T) => {
+    _(null);
+  }, P = (T) => {
     I(), T.stopPropagation(), !o.isOpen && B && o.toggle(), k(T);
   };
   useEffect(() => {
@@ -9522,7 +9522,7 @@ const useStructureValidation = () => {
     }, 500);
     return () => clearTimeout(T);
   }, [b, o, y]);
-  const P = (T, M) => {
+  const D = (T, M) => {
     const H = l.contentDocument || l.contentWindow.document, W = H.querySelector(`[data-block-id=${T}]`);
     W && W.setAttribute("data-drop", M);
     const z = W.getBoundingClientRect(), V = l.getBoundingClientRect();
@@ -9556,20 +9556,20 @@ const useStructureValidation = () => {
     {
       onMouseEnter: () => u(f),
       onMouseLeave: () => g(),
-      onClick: D,
+      onClick: P,
       style: n,
       "data-node-id": f,
       ref: r,
       onDragStart: () => w(o),
-      onDragEnd: () => E(o),
+      onDragEnd: () => j(o),
       onDragOver: (T) => {
-        T.preventDefault(), P(f, "yes");
+        T.preventDefault(), D(f, "yes");
       },
       onDragLeave: (T) => {
-        T.preventDefault(), P(f, "no");
+        T.preventDefault(), D(f, "no");
       },
       onDrop: (T) => {
-        T.preventDefault(), P(f, "no");
+        T.preventDefault(), D(f, "no");
       },
       children: [
         c(PERMISSIONS.ADD_BLOCK) && !m && (o == null ? void 0 : o.rowIndex) > 0 && (o.parent.isOpen && canAddChildBlock(get(o, "parent.data._type")) || ((L = o == null ? void 0 : o.parent) == null ? void 0 : L.id) === "__REACT_ARBORIST_INTERNAL_ROOT__") && /* @__PURE__ */ jsx("div", { className: "group relative ml-5 h-full w-full cursor-pointer", children: /* @__PURE__ */ jsx(
@@ -9591,7 +9591,7 @@ const useStructureValidation = () => {
               "group flex w-full cursor-pointer items-center justify-between space-x-px !rounded p-1 py-0 outline-none",
               x ? "bg-primary/20" : "hover:bg-primary/10",
               b && canAcceptChildBlock(h._type, "Icon") ? "bg-green-200" : "",
-              (o == null ? void 0 : o.id) === S ? "bg-primary/10" : "",
+              (o == null ? void 0 : o.id) === v ? "bg-primary/10" : "",
               y && "opacity-20",
               B ? "" : "line-through opacity-50",
               F && x && "bg-primary/20 text-primary"
@@ -9602,7 +9602,7 @@ const useStructureValidation = () => {
                   "div",
                   {
                     className: `flex h-4 w-4 rotate-0 transform cursor-pointer items-center justify-center transition-transform duration-100 ${o.isOpen ? "rotate-90" : ""}`,
-                    children: p && /* @__PURE__ */ jsx("button", { onClick: _, type: "button", children: /* @__PURE__ */ jsx(ChevronRightIcon, { className: "h-3 w-3" }) })
+                    children: p && /* @__PURE__ */ jsx("button", { onClick: E, type: "button", children: /* @__PURE__ */ jsx(ChevronRightIcon, { className: "h-3 w-3" }) })
                   }
                 ),
                 /* @__PURE__ */ jsxs(
@@ -10102,20 +10102,20 @@ const useStructureValidation = () => {
     }
 }, ThemeConfigPanel = React.memo(({ className: o = "" }) => {
   const [n, r] = useDarkMode(), [a, i] = React.useState(""), [l, c] = React.useState(!1), d = useBuilderProp("themePresets", []), p = useBuilderProp("themePanelComponent", null), { hasPermission: u } = usePermissions(), g = useBuilderProp("flags.importTheme", !0), m = useBuilderProp("flags.darkMode", !0), f = useIncrementActionsCount();
-  (!d || d.length === 0) && DEFAULT_THEME_PRESET.map((E) => {
-    d.push(E);
+  (!d || d.length === 0) && DEFAULT_THEME_PRESET.map((j) => {
+    d.push(j);
   });
   const [h, x] = useTheme(), b = useThemeOptions(), { t: y } = useTranslation(), C = React.useCallback(
-    (E) => {
-      const S = { ...h };
-      setPreviousTheme(S), x(E), f(), toast.success("Theme updated", {
+    (j) => {
+      const v = { ...h };
+      setPreviousTheme(v), x(j), f(), toast.success("Theme updated", {
         action: {
           label: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
             /* @__PURE__ */ jsx(ResetIcon, { className: "h-4 w-4" }),
             " Undo"
           ] }),
           onClick: () => {
-            x(S), clearPreviousTheme(), toast.dismiss();
+            x(v), clearPreviousTheme(), toast.dismiss();
           }
         },
         closeButton: !0,
@@ -10124,61 +10124,61 @@ const useStructureValidation = () => {
     },
     [h, x, f]
   ), k = () => {
-    const E = d.find((S) => Object.keys(S)[0] === a);
-    if (E) {
-      const S = Object.values(E)[0];
-      S && typeof S == "object" && "fontFamily" in S && "borderRadius" in S && "colors" in S ? (C(S), i(""), f()) : console.error("Invalid preset structure:", S);
+    const j = d.find((v) => Object.keys(v)[0] === a);
+    if (j) {
+      const v = Object.values(j)[0];
+      v && typeof v == "object" && "fontFamily" in v && "borderRadius" in v && "colors" in v ? (C(v), i(""), f()) : console.error("Invalid preset structure:", v);
     } else
       console.error("Preset not found:", a);
-  }, v = (E) => {
-    C(E), i(""), f();
+  }, S = (j) => {
+    C(j), i(""), f();
   }, A = useDebouncedCallback(
-    (E, S) => {
+    (j, v) => {
       x(() => ({
         ...h,
         fontFamily: {
           ...h.fontFamily,
-          [E.replace(/font-/g, "")]: S
+          [j.replace(/font-/g, "")]: v
         }
       })), f();
     },
     [h, f],
     200
   ), B = React.useCallback(
-    (E) => {
+    (j) => {
       x(() => ({
         ...h,
-        borderRadius: `${E}px`
+        borderRadius: `${j}px`
       })), f();
     },
     [h, f]
-  ), _ = useDebouncedCallback(
-    (E, S) => {
+  ), E = useDebouncedCallback(
+    (j, v) => {
       x(() => {
-        const j = get(h, `colors.${E}`);
-        return n ? set(j, 1, S) : set(j, 0, S), f(), {
+        const _ = get(h, `colors.${j}`);
+        return n ? set(_, 1, v) : set(_, 0, v), f(), {
           ...h,
           colors: {
             ...h.colors,
-            [E]: j
+            [j]: _
           }
         };
       });
     },
     [h, f],
     200
-  ), w = (E) => /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1", children: Object.entries(E.items).map(([S]) => {
-    const j = get(h, `colors.${S}.${n ? 1 : 0}`);
-    return j ? /* @__PURE__ */ jsxs("div", { id: `theme-${S}`, className: "mt-1 flex items-center gap-x-2", children: [
+  ), w = (j) => /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1", children: Object.entries(j.items).map(([v]) => {
+    const _ = get(h, `colors.${v}.${n ? 1 : 0}`);
+    return _ ? /* @__PURE__ */ jsxs("div", { id: `theme-${v}`, className: "mt-1 flex items-center gap-x-2", children: [
       /* @__PURE__ */ jsx(
         ColorPickerInput,
         {
-          value: j,
-          onChange: (N) => _(S, N)
+          value: _,
+          onChange: (N) => E(v, N)
         }
       ),
-      /* @__PURE__ */ jsx(Label, { className: "text-xs font-normal leading-tight", children: S.split(/(?=[A-Z])/).join(" ").replace(/-/g, " ").split(" ").map((N) => N.charAt(0).toUpperCase() + N.slice(1)).join(" ") + (!S.toLowerCase().includes("foreground") && !S.toLowerCase().includes("border") && !S.toLowerCase().includes("input") && !S.toLowerCase().includes("ring") && !S.toLowerCase().includes("background") ? " Background" : "") })
-    ] }, S) : null;
+      /* @__PURE__ */ jsx(Label, { className: "text-xs font-normal leading-tight", children: v.split(/(?=[A-Z])/).join(" ").replace(/-/g, " ").split(" ").map((N) => N.charAt(0).toUpperCase() + N.slice(1)).join(" ") + (!v.toLowerCase().includes("foreground") && !v.toLowerCase().includes("border") && !v.toLowerCase().includes("input") && !v.toLowerCase().includes("ring") && !v.toLowerCase().includes("background") ? " Background" : "") })
+    ] }, v) : null;
   }) });
   return u("edit_theme") ? /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
     /* @__PURE__ */ jsxs("div", { className: cn$1("no-scrollbar h-full w-full overflow-y-auto", o), children: [
@@ -10193,9 +10193,9 @@ const useStructureValidation = () => {
         /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-0", children: [
           /* @__PURE__ */ jsx("div", { className: "w-[70%]", children: /* @__PURE__ */ jsxs(Select$1, { value: a, onValueChange: i, children: [
             /* @__PURE__ */ jsx(SelectTrigger, { className: "h-9 w-full text-sm", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: y("Select preset") }) }),
-            /* @__PURE__ */ jsx(SelectContent, { children: Array.isArray(d) && d.map((E) => {
-              const S = Object.keys(E)[0], j = S.replaceAll("_", " ");
-              return /* @__PURE__ */ jsx(SelectItem, { value: S, children: capitalize(j) }, S);
+            /* @__PURE__ */ jsx(SelectContent, { children: Array.isArray(d) && d.map((j) => {
+              const v = Object.keys(j)[0], _ = v.replaceAll("_", " ");
+              return /* @__PURE__ */ jsx(SelectItem, { value: v, children: capitalize(_) }, v);
             }) })
           ] }) }),
           /* @__PURE__ */ jsx("div", { className: "w-[25%]", children: /* @__PURE__ */ jsx(Button, { className: "w-full text-sm", disabled: !a, onClick: k, children: y("Apply") }) })
@@ -10207,14 +10207,14 @@ const useStructureValidation = () => {
           /* @__PURE__ */ jsx(TextIcon, { className: "h-3 w-3 text-gray-600" }),
           /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-gray-700", children: y("Typography") })
         ] }),
-        (b == null ? void 0 : b.fontFamily) && /* @__PURE__ */ jsx("div", { className: "space-y-2", children: Object.entries(b.fontFamily).map(([E, S]) => /* @__PURE__ */ jsx(
+        (b == null ? void 0 : b.fontFamily) && /* @__PURE__ */ jsx("div", { className: "space-y-2", children: Object.entries(b.fontFamily).map(([j, v]) => /* @__PURE__ */ jsx(
           FontSelector,
           {
-            label: E,
-            value: h.fontFamily[E.replace(/font-/g, "")] || S[Object.keys(S)[0]],
-            onChange: (j) => A(E, j)
+            label: j,
+            value: h.fontFamily[j.replace(/font-/g, "")] || v[Object.keys(v)[0]],
+            onChange: (_) => A(j, _)
           },
-          E
+          j
         )) }),
         /* @__PURE__ */ jsx(Separator, {}),
         (b == null ? void 0 : b.borderRadius) && /* @__PURE__ */ jsxs("div", { className: "space-y-0.5", children: [
@@ -10240,7 +10240,7 @@ const useStructureValidation = () => {
                 Switch,
                 {
                   checked: n,
-                  onCheckedChange: (E) => r(E),
+                  onCheckedChange: (j) => r(j),
                   "aria-label": y("Toggle dark mode"),
                   className: "mx-1"
                 }
@@ -10248,14 +10248,14 @@ const useStructureValidation = () => {
               /* @__PURE__ */ jsx(MoonIcon, { className: "h-4 w-4" })
             ] })
           ] }),
-          /* @__PURE__ */ jsx("div", { className: "space-y-2", children: b.colors.map((E) => w(E)) })
+          /* @__PURE__ */ jsx("div", { className: "space-y-2", children: b.colors.map((j) => w(j)) })
         ] }),
         /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { children: y("Loading...") }), children: l && g && /* @__PURE__ */ jsx(
           LazyCssImportModal,
           {
             open: l,
             onOpenChange: c,
-            onImport: v
+            onImport: S
           }
         ) })
       ] }),
@@ -11008,9 +11008,9 @@ const UndoRedo = () => {
       r(w), i(a), c(""), p(""), f("");
     }
   }, k = (w) => {
-    const E = a.filter((S, j) => j !== w);
-    r(E), i(E);
-  }, v = (w) => {
+    const j = a.filter((v, _) => _ !== w);
+    r(j), i(j);
+  }, S = (w) => {
     g(w), c(a[w].key), p(a[w].value);
   }, A = () => {
     if (l.startsWith("@")) {
@@ -11023,24 +11023,24 @@ const UndoRedo = () => {
     }
   }, B = (w) => {
     w.key === "Enter" && !w.shiftKey && (w.preventDefault(), u !== null ? A() : C());
-  }, _ = useCallback((w) => {
-    const E = (N) => /[.,!?;:]/.test(N), S = (N, I, D) => {
-      let P = "", R = "";
+  }, E = useCallback((w) => {
+    const j = (N) => /[.,!?;:]/.test(N), v = (N, I, P) => {
+      let D = "", R = "";
       const $ = I > 0 ? N[I - 1] : "", F = I < N.length ? N[I] : "";
-      return I > 0 && ($ === "." || !E($) && $ !== " ") && (P = " "), I < N.length && !E(F) && F !== " " && (R = " "), {
-        text: P + D + R,
-        prefixLength: P.length,
+      return I > 0 && ($ === "." || !j($) && $ !== " ") && (D = " "), I < N.length && !j(F) && F !== " " && (R = " "), {
+        text: D + P + R,
+        prefixLength: D.length,
         suffixLength: R.length
       };
-    }, j = x.current;
-    if (j) {
-      const N = j.selectionStart || 0, I = j.value || "", D = j.selectionEnd || N;
-      if (D > N) {
-        const O = `{{${w}}}`, { text: L } = S(I, N, O), T = I.slice(0, N) + L + I.slice(D);
+    }, _ = x.current;
+    if (_) {
+      const N = _.selectionStart || 0, I = _.value || "", P = _.selectionEnd || N;
+      if (P > N) {
+        const O = `{{${w}}}`, { text: L } = v(I, N, O), T = I.slice(0, N) + L + I.slice(P);
         p(T);
         return;
       }
-      const R = `{{${w}}}`, { text: $ } = S(I, N, R), F = I.slice(0, N) + $ + I.slice(N);
+      const R = `{{${w}}}`, { text: $ } = v(I, N, R), F = I.slice(0, N) + $ + I.slice(N);
       p(F);
     }
   }, []);
@@ -11074,7 +11074,7 @@ const UndoRedo = () => {
             /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
               /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
                 /* @__PURE__ */ jsx(Label, { htmlFor: "attrValue", className: "text-[11px] font-normal text-slate-600", children: y("Value") }),
-                !isEmpty(b) && /* @__PURE__ */ jsx(NestedPathSelector, { data: b, onSelect: _ })
+                !isEmpty(b) && /* @__PURE__ */ jsx(NestedPathSelector, { data: b, onSelect: E })
               ] }),
               /* @__PURE__ */ jsx(
                 Textarea,
@@ -11098,16 +11098,16 @@ const UndoRedo = () => {
         ]
       }
     ),
-    /* @__PURE__ */ jsx("div", { className: "space-y-1 py-4", children: a.map((w, E) => /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between rounded border p-2 text-sm", children: [
+    /* @__PURE__ */ jsx("div", { className: "space-y-1 py-4", children: a.map((w, j) => /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between rounded border p-2 text-sm", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex flex-col text-xs leading-tight", children: [
         /* @__PURE__ */ jsx("span", { className: "truncate text-[12px] font-light text-muted-foreground", children: w.key }),
         /* @__PURE__ */ jsx("span", { className: "max-w-[200px] text-wrap font-normal", children: w.value.toString() })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "flex-shrink-0 text-slate-400", children: [
-        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => v(E), children: /* @__PURE__ */ jsx(Pencil2Icon, { className: "h-3 w-3" }) }),
-        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => k(E), children: /* @__PURE__ */ jsx(Cross1Icon, { className: "h-3 w-3" }) })
+        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => S(j), children: /* @__PURE__ */ jsx(Pencil2Icon, { className: "h-3 w-3" }) }),
+        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => k(j), children: /* @__PURE__ */ jsx(Cross1Icon, { className: "h-3 w-3" }) })
       ] })
-    ] }, E)) })
+    ] }, j)) })
   ] });
 }), BlockAttributesEditor = React.memo(() => {
   const o = useSelectedBlock(), [n, r] = useState([]), [a] = useSelectedStylingBlocks(), i = useUpdateBlocksProps(), l = `${get(a, "0.prop")}_attrs`;
@@ -11255,18 +11255,17 @@ const PartialWrapper = ({ partialBlockId: o }) => {
       type: "button",
       onClick: () => a(l.id),
       className: cn$2(
-        "group flex w-full items-center justify-between rounded-md border border-transparent bg-muted/40 px-3 py-2 text-left text-xs transition",
+        "group flex w-full items-center justify-between rounded-md border border-transparent bg-muted/40 px-3 py-1 text-left text-xs transition",
         "hover:border-muted-foreground/20 hover:bg-muted/70 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-offset-1",
         l.isSelected && "border-primary/40 bg-primary/10 text-primary"
       ),
       children: /* @__PURE__ */ jsxs("span", { className: "flex items-center space-x-2", children: [
         i && i,
-        /* @__PURE__ */ jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-muted-foreground/50 group-hover:bg-primary/60" }),
         /* @__PURE__ */ jsx("span", { className: "truncate", children: l.label })
       ] })
     },
     l.id
-  )) }) : /* @__PURE__ */ jsx("div", { className: "rounded border border-dashed border-muted px-3 py-2 text-xs text-muted-foreground", children: r })
+  )) }) : /* @__PURE__ */ jsx("div", { className: "rounded border border-dashed border-muted px-3 py-1 text-xs text-muted-foreground", children: r })
 ] }), STYLES_PREFIX = "#styles:", getBlockLabel = (o) => {
   const r = [
     typeof o._name == "string" ? o._name : void 0,
@@ -11274,43 +11273,41 @@ const PartialWrapper = ({ partialBlockId: o }) => {
   ].filter(Boolean).find((a) => a.trim().length > 0);
   return r ? r.length > 40 ? `${r.slice(0, 37)}...` : r : o._id;
 }, collectTokenUsageOnPage = (o, n) => {
-  const r = `${DESIGN_TOKEN_PREFIX}${n}`;
+  const r = `${n}`;
   return o.filter((a) => Object.values(a).some((i) => typeof i != "string" || !i.startsWith(STYLES_PREFIX) ? !1 : i.includes(r))).map((a) => ({
     id: a._id,
     label: getBlockLabel(a)
   }));
 }, TokenUsagePopover = ({ tokenId: o, tokenName: n }) => {
   const { t: r } = useTranslation(), [a] = useBlocksStore(), [i, l] = useSelectedBlockIds(), c = useBuilderProp("pageId"), d = useBuilderProp("siteWideUsage"), p = useMemo(() => collectTokenUsageOnPage(a, o), [a, o]), u = useMemo(
-    () => p.map((b) => ({
-      id: b.id,
-      label: b.label,
-      isSelected: i.includes(b.id)
+    () => p.map((S) => ({
+      id: S.id,
+      label: S.label,
+      isSelected: i.includes(S.id)
     })),
     [p, i]
   ), g = useMemo(() => d ? Object.entries(d).reduce(
-    (b, [y, C]) => (y === c || !(C != null && C.designTokens) || !Object.keys(C.designTokens).some((v) => typeof v != "string" ? !1 : v === o) || b.push({ id: y, name: C.name || y, isPartial: !!C.isPartial }), b),
+    (S, [A, B]) => (A === c || !(B != null && B.designTokens) || !Object.keys(B.designTokens).some((w) => typeof w != "string" ? !1 : w === o) || S.push({ id: A, name: B.name || A, isPartial: !!B.isPartial }), S),
     []
   ) : [], [d, n, o, c]), m = useMemo(
-    () => g.filter((b) => !b.isPartial).map((b) => ({
-      id: b.id,
-      label: b.name
+    () => g.filter((S) => !S.isPartial).map((S) => ({
+      id: S.id,
+      label: S.name
     })),
     [g]
   ), f = useMemo(
-    () => g.filter((b) => b.isPartial).map((b) => ({
-      id: b.id,
-      label: b.name
+    () => g.filter((S) => S.isPartial).map((S) => ({
+      id: S.id,
+      label: S.name
     })),
     [g]
   ), h = useCallback(
-    (b) => {
-      l([b]);
+    (S) => {
+      l([S]);
     },
     [l]
-  ), x = (b) => {
-    if (!b) return;
-    const y = new URL(window.location.href);
-    y.searchParams.set("pageId", b), window.open(y.toString(), "_blank");
+  ), x = useBuilderProp("gotoPage", noop), { selectedLang: b, fallbackLang: y } = useLanguages(), { savePageAsync: C } = useSavePage(), k = async (S) => {
+    S && (await C(!0), x({ pageId: S, lang: b || y }));
   };
   return /* @__PURE__ */ jsxs(Popover, { children: [
     /* @__PURE__ */ jsx(PopoverTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", className: "h-6 w-6 p-0", children: /* @__PURE__ */ jsx(EyeOpenIcon, { className: "h-3 w-3" }) }) }),
@@ -11327,7 +11324,7 @@ const PartialWrapper = ({ partialBlockId: o }) => {
             items: u,
             emptyLabel: r("None"),
             onSelect: h,
-            icon: /* @__PURE__ */ jsx(BoxIcon, { fontSize: 8 })
+            icon: /* @__PURE__ */ jsx(ArrowRightIcon, { fontSize: 4 })
           }
         ),
         /* @__PURE__ */ jsx(
@@ -11336,7 +11333,7 @@ const PartialWrapper = ({ partialBlockId: o }) => {
             title: r("Blocks affected on other pages"),
             items: m,
             emptyLabel: r("None"),
-            onSelect: x,
+            onSelect: k,
             icon: /* @__PURE__ */ jsx(FileIcon, { fontSize: 8 })
           }
         ),
@@ -11346,7 +11343,7 @@ const PartialWrapper = ({ partialBlockId: o }) => {
             title: r("Blocks affected on partial blocks"),
             items: f,
             emptyLabel: r("None"),
-            onSelect: x,
+            onSelect: k,
             icon: /* @__PURE__ */ jsx(GlobeIcon, { fontSize: 8 })
           }
         )
@@ -11354,20 +11351,20 @@ const PartialWrapper = ({ partialBlockId: o }) => {
     ] })
   ] });
 }, ManageDesignTokens = ({}) => {
-  const { t: o } = useTranslation(), [n, r] = useAtom$1(chaiDesignTokensAtom), [a, i] = useState(!1), [l, c] = useState(null), [d, p] = useState(!1), [u, g] = useState(!1), [m, f] = useState(""), [h, x] = useState(""), [b, y] = useState(""), [C, k] = useState(""), [v, A] = useState(""), [B, _] = useState(""), w = useIncrementActionsCount(), E = (L) => {
+  const { t: o } = useTranslation(), [n, r] = useAtom$1(chaiDesignTokensAtom), [a, i] = useState(!1), [l, c] = useState(null), [d, p] = useState(!1), [u, g] = useState(!1), [m, f] = useState(""), [h, x] = useState(""), [b, y] = useState(""), [C, k] = useState(""), [S, A] = useState(""), [B, E] = useState(""), w = useIncrementActionsCount(), j = (L) => {
     const T = L.trim();
     return T.length === 0 || T.length > 25 ? !1 : /^[a-zA-Z0-9]+(-[a-zA-Z0-9]+)*$/.test(T);
-  }, S = (L, T = !1, M) => {
+  }, v = (L, T = !1, M) => {
     const H = L.trim();
     return H.length === 0 ? "" : H.length > 25 ? o("Token name must be 25 characters or less") : /^[a-zA-Z0-9]+(-[a-zA-Z0-9]+)*$/.test(H) ? Object.entries(n).find(
       ([V, U]) => U.name === H && (!T || V !== M)
     ) ? o("Token name already exists") : "" : o("Only alphanumeric characters and hyphens allowed");
-  }, j = () => {
+  }, _ = () => {
     if (!m.trim() || !h.trim()) {
       toast.error(o("Please fill in both token name and classes"));
       return;
     }
-    if (!E(m)) {
+    if (!j(m)) {
       toast.error(o("Invalid design token name format"));
       return;
     }
@@ -11388,7 +11385,7 @@ const PartialWrapper = ({ partialBlockId: o }) => {
       toast.error(o("Please fill in both token name and classes"));
       return;
     }
-    if (!E(b)) {
+    if (!j(b)) {
       toast.error(o("Invalid design token name format"));
       return;
     }
@@ -11411,28 +11408,28 @@ const PartialWrapper = ({ partialBlockId: o }) => {
   }, I = (L) => {
     const T = { ...n };
     delete T[L], r(T), w(), toast.success(o("Token deleted successfully"));
-  }, D = (L) => {
+  }, P = (L) => {
     const T = n[L];
     T && (c(L), y(T.name), k(T.value), i(!1), g(!0));
-  }, P = () => {
+  }, D = () => {
     i(!0), c(null), f(""), x(""), A(""), p(!0);
   }, R = () => {
-    c(null), y(""), k(""), _(""), g(!1);
+    c(null), y(""), k(""), E(""), g(!1);
   }, $ = () => {
     i(!1), f(""), x(""), A(""), p(!1);
   }, F = (L) => {
     const T = L.replace(/\s+/g, "-");
-    f(T), A(S(T));
+    f(T), A(v(T));
   }, O = (L) => {
     const T = L.replace(/\s+/g, "-");
-    y(T), _(S(T, !0, l || void 0));
+    y(T), E(v(T, !0, l || void 0));
   };
   return /* @__PURE__ */ jsxs("div", { className: "flex h-full w-full flex-col", children: [
     /* @__PURE__ */ jsx("div", { className: "", children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ jsxs(
       Button,
       {
         variant: "outline",
-        onClick: P,
+        onClick: D,
         disabled: a || l !== null,
         size: "sm",
         className: "h-7 text-xs",
@@ -11458,7 +11455,7 @@ const PartialWrapper = ({ partialBlockId: o }) => {
               {
                 variant: "ghost",
                 size: "sm",
-                onClick: () => D(L),
+                onClick: () => P(L),
                 disabled: a || l !== null,
                 className: "h-6 w-6 p-0",
                 children: /* @__PURE__ */ jsx(Pencil1Icon, { className: "h-3 w-3" })
@@ -11520,7 +11517,7 @@ const PartialWrapper = ({ partialBlockId: o }) => {
               className: "text-sm"
             }
           ),
-          v ? /* @__PURE__ */ jsx("span", { className: "text-sm text-destructive", children: v }) : /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: o("Button-Primary, Card-Header, Text-Large") })
+          S ? /* @__PURE__ */ jsx("span", { className: "text-sm text-destructive", children: S }) : /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: o("Button-Primary, Card-Header, Text-Large") })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
           /* @__PURE__ */ jsx(Label, { htmlFor: "new-classes", className: "text-sm", children: o("Tailwind Classes") }),
@@ -11538,7 +11535,7 @@ const PartialWrapper = ({ partialBlockId: o }) => {
       ] }),
       /* @__PURE__ */ jsxs(DialogFooter, { children: [
         /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: $, className: "h-8 text-sm", children: o("Cancel") }),
-        /* @__PURE__ */ jsx(Button, { onClick: j, className: "h-8 text-sm", children: o("Add Token") })
+        /* @__PURE__ */ jsx(Button, { onClick: _, className: "h-8 text-sm", children: o("Add Token") })
       ] })
     ] }) }),
     /* @__PURE__ */ jsx(Dialog, { open: u, onOpenChange: R, children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-w-md", children: [
@@ -11619,7 +11616,7 @@ const RootLayout = () => {
       w && get(w, "view", "standard") === "standard" && (a.current = n, l(get(w, "width", DEFAULT_PANEL_WIDTH)));
     }
   }, [n, b]);
-  const v = useMemo(() => {
+  const S = useMemo(() => {
     if (n === null) return 0;
     const w = find(b, { id: n });
     return get(w, "view", "standard") === "standard" ? k : i;
@@ -11631,7 +11628,7 @@ const RootLayout = () => {
   useEffect(() => {
     n !== null && !find(b, { id: n }) && r("outline");
   }, [n, b]);
-  const _ = useCallback(
+  const E = useCallback(
     (w) => {
       h(w);
     },
@@ -11647,33 +11644,33 @@ const RootLayout = () => {
           /* @__PURE__ */ jsx("div", { className: "flex h-[50px] w-screen items-center border-b border-border", children: /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(o, {}) }) }),
           /* @__PURE__ */ jsxs("main", { className: "relative flex h-[calc(100vh-56px)] max-w-full flex-1 flex-row", children: [
             /* @__PURE__ */ jsxs("div", { id: "sidebar", className: "flex w-12 flex-col items-center justify-between border-r border-border py-2", children: [
-              /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-y-1", children: f.map((w, E) => /* @__PURE__ */ jsxs(Tooltip, { children: [
+              /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-y-1", children: f.map((w, j) => /* @__PURE__ */ jsxs(Tooltip, { children: [
                 /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: createElement(get(w, "button", NoopComponent), {
                   position: "top",
                   panelId: w.id,
                   isActive: n === w.id,
-                  show: () => _(w.id)
+                  show: () => E(w.id)
                 }) }),
                 /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsx("p", { children: x(w.label) }) })
-              ] }, "button-top-" + E)) }),
+              ] }, "button-top-" + j)) }),
               /* @__PURE__ */ jsx("div", { className: "flex flex-col space-y-1" }),
-              /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: g == null ? void 0 : g.map((w, E) => /* @__PURE__ */ jsxs(Tooltip, { children: [
+              /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: g == null ? void 0 : g.map((w, j) => /* @__PURE__ */ jsxs(Tooltip, { children: [
                 /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: createElement(get(w, "button", NoopComponent), {
                   position: "bottom",
                   panelId: w.id,
                   isActive: n === w.id,
-                  show: () => _(w.id)
+                  show: () => E(w.id)
                 }) }),
                 /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsx("p", { children: x(w.label) }) })
-              ] }, "button-bottom-" + E)) })
+              ] }, "button-bottom-" + j)) })
             ] }),
             /* @__PURE__ */ jsx(
               motion.div,
               {
                 id: "left-panel",
                 className: "h-full max-h-full border-r border-border",
-                initial: { width: v },
-                animate: { width: v },
+                initial: { width: S },
+                animate: { width: S },
                 transition: { duration: 0.3, ease: "easeInOut" },
                 children: n !== null && get(C, "view", "standard") === "standard" && /* @__PURE__ */ jsxs("div", { className: "no-scrollbar flex h-full flex-col overflow-hidden px-3 py-2", children: [
                   /* @__PURE__ */ jsx(
@@ -11867,8 +11864,8 @@ const RootLayout = () => {
     });
   }, f = (x) => {
     if (!c) return;
-    const b = x.clientX - p.x, y = x.clientY - p.y, C = x.currentTarget, k = C.offsetWidth, v = C.offsetHeight, A = window.innerWidth - k, B = window.innerHeight - v, _ = Math.max(0, Math.min(b, A)), w = Math.max(0, Math.min(y, B));
-    r(_, w);
+    const b = x.clientX - p.x, y = x.clientY - p.y, C = x.currentTarget, k = C.offsetWidth, S = C.offsetHeight, A = window.innerWidth - k, B = window.innerHeight - S, E = Math.max(0, Math.min(b, A)), w = Math.max(0, Math.min(y, B));
+    r(E, w);
   }, h = () => {
     d(!1);
   };
@@ -12110,10 +12107,10 @@ const atomRead = (o, n, ...r) => n.read(...r), atomWrite = (o, n, ...r) => n.wri
   var r;
   const a = getBuildingBlocks(o), i = a[1], l = a[2], c = a[3], d = a[6], p = a[7], u = a[11], g = a[12], m = a[13], f = a[14], h = a[16], x = a[17], b = u(o, n);
   if (isAtomStateInitialized(b) && (i.has(n) && l.get(n) !== b.n || Array.from(b.d).every(
-    ([w, E]) => (
+    ([w, j]) => (
       // Recursively, read the atom state of the dependency, and
       // check if the atom epoch number is unchanged
-      f(o, w).n === E
+      f(o, w).n === j
     )
   )))
     return b;
@@ -12123,27 +12120,27 @@ const atomRead = (o, n, ...r) => n.read(...r), atomWrite = (o, n, ...r) => n.wri
     i.has(n) && (x(o, n), m(o), g(o));
   }
   function k(w) {
-    var E;
+    var j;
     if (isSelfAtom(n, w)) {
-      const j = u(o, w);
-      if (!isAtomStateInitialized(j))
+      const _ = u(o, w);
+      if (!isAtomStateInitialized(_))
         if (hasInitialValue(w))
           setAtomStateValueOrPromise(o, w, w.init);
         else
           throw new Error("no atom init");
-      return returnAtomValue(j);
+      return returnAtomValue(_);
     }
-    const S = f(o, w);
+    const v = f(o, w);
     try {
-      return returnAtomValue(S);
+      return returnAtomValue(v);
     } finally {
-      b.d.set(w, S.n), isPendingPromise(b.v) && addPendingPromiseToDependency(n, b.v, S), (E = i.get(w)) == null || E.t.add(n), y || C();
+      b.d.set(w, v.n), isPendingPromise(b.v) && addPendingPromiseToDependency(n, b.v, v), (j = i.get(w)) == null || j.t.add(n), y || C();
     }
   }
-  let v, A;
+  let S, A;
   const B = {
     get signal() {
-      return v || (v = new AbortController()), v.signal;
+      return S || (S = new AbortController()), S.signal;
     },
     get setSelf() {
       return !A && isActuallyWritableAtom(n) && (A = (...w) => {
@@ -12155,14 +12152,14 @@ const atomRead = (o, n, ...r) => n.read(...r), atomWrite = (o, n, ...r) => n.wri
           }
       }), A;
     }
-  }, _ = b.n;
+  }, E = b.n;
   try {
     const w = p(o, n, k, B);
-    return setAtomStateValueOrPromise(o, n, w), isPromiseLike$1(w) && (registerAbortHandler(w, () => v == null ? void 0 : v.abort()), w.then(C, C)), b;
+    return setAtomStateValueOrPromise(o, n, w), isPromiseLike$1(w) && (registerAbortHandler(w, () => S == null ? void 0 : S.abort()), w.then(C, C)), b;
   } catch (w) {
     return delete b.v, b.e = w, ++b.n, b;
   } finally {
-    y = !1, _ !== b.n && l.get(n) === _ && (l.set(n, b.n), c.add(n), (r = d.c) == null || r.call(d, n));
+    y = !1, E !== b.n && l.get(n) === E && (l.set(n, b.n), c.add(n), (r = d.c) == null || r.call(d, n));
   }
 }, invalidateDependents = (o, n) => {
   const r = getBuildingBlocks(o), a = r[1], i = r[2], l = r[11], c = [n];
@@ -12178,13 +12175,13 @@ const atomRead = (o, n, ...r) => n.read(...r), atomWrite = (o, n, ...r) => n.wri
   let h = !0;
   const x = (y) => returnAtomValue(g(o, y)), b = (y, ...C) => {
     var k;
-    const v = d(o, y);
+    const S = d(o, y);
     try {
       if (isSelfAtom(n, y)) {
         if (!hasInitialValue(y))
           throw new Error("atom not writable");
-        const A = v.n, B = C[0];
-        setAtomStateValueOrPromise(o, y, B), f(o, y), A !== v.n && (i.add(y), (k = l.c) == null || k.call(l, y), m(o, y));
+        const A = S.n, B = C[0];
+        setAtomStateValueOrPromise(o, y, B), f(o, y), A !== S.n && (i.add(y), (k = l.c) == null || k.call(l, y), m(o, y));
         return;
       } else
         return writeAtomState(o, y, ...C);
@@ -12595,7 +12592,7 @@ function domToJsx(o, n = 0) {
           (x, b) => {
             const [y, C] = b.split(":").map((k) => k.trim());
             if (y && C) {
-              const k = y.replace(/-([a-z])/g, (v) => v[1].toUpperCase());
+              const k = y.replace(/-([a-z])/g, (S) => S[1].toUpperCase());
               x[k] = C.replace(/['"]/g, "");
             }
             return x;
@@ -12722,19 +12719,19 @@ ${i})
       u(!1);
       let k = l({ blockId: i == null ? void 0 : i._id, additionalCoreBlocks: ["Icon"] });
       k = k.replace(/\s*bid=["'][^"']*["']/g, "");
-      const v = o === "ts", {
+      const S = o === "ts", {
         jsx: A,
         html: B,
-        componentName: _
+        componentName: E
       } = await getExportedCoded({
         selectedBlock: i,
         html: k,
-        isTypeScript: v
+        isTypeScript: S
       });
-      a({ html: B, jsx: A }), d(_), u(!0);
+      a({ html: B, jsx: A }), d(E), u(!0);
     } catch {
-      const v = "<div>Export failed. Close the modal and try again.</div>";
-      a({ html: v, jsx: v }), toast.error(n("Failed to generate export HTML"));
+      const S = "<div>Export failed. Close the modal and try again.</div>";
+      a({ html: S, jsx: S }), toast.error(n("Failed to generate export HTML"));
     }
   }, [n, o, i, l]);
   useEffect(() => {
@@ -12750,17 +12747,17 @@ ${i})
     },
     [n]
   ), x = (k) => {
-    const v = new Blob([k], { type: "text/jsx" }), A = URL.createObjectURL(v), B = document.createElement("a");
+    const S = new Blob([k], { type: "text/jsx" }), A = URL.createObjectURL(S), B = document.createElement("a");
     B.href = A, B.download = g(), document.body.appendChild(B), B.click(), URL.revokeObjectURL(A), document.body.removeChild(B), toast.success(n("Export code downloaded successfully!"));
   }, b = /* @__PURE__ */ jsxs("span", { children: [
     "Download ",
     /* @__PURE__ */ jsx("span", { className: "font-mono text-xs font-light text-gray-300", children: g() })
   ] }), y = useMemo(() => {
-    const k = { extend: shadcnTheme() }, v = JSON.stringify(k, null, 2);
+    const k = { extend: shadcnTheme() }, S = JSON.stringify(k, null, 2);
     return `{
   // Your tailwind config ...
 
-  "theme": ${v == null ? void 0 : v.split(`
+  "theme": ${S == null ? void 0 : S.split(`
 `).join(`
   `)},
 }`;