@chaibuilder/sdk 1.2.77 → 1.2.78

package/dist/{index-wgzGsKsU.js → index-5TMff_bN.js}

@@ -14,7 +14,7 @@ import { g as getDefaultExportFromCjs, p as plugin, c as commonjsGlobal } from "
 import { useThrottledCallback, useResizeObserver, useDebouncedCallback, useIntervalEffect } from "@react-hookz/web";
 import TreeModel from "tree-model";
 import ReactQuill, { Quill } from "react-quill";
-import { S as SLOT_KEY, I as I18N_KEY, a as STYLES_KEY, R as ROOT_TEMP_KEY, O as OUTLINE_KEY } from "./STRINGS-rPGH65PW.js";
+import { S as SLOT_KEY, I as I18N_KEY, a as STYLES_KEY, R as ROOT_TEMP_KEY } from "./STRINGS-TDN5UhWi.js";
 import { useHotkeys } from "react-hotkeys-hook";
 import { flip as flip$2 } from "@floating-ui/dom";
 import { useFloating as useFloating$1, shift, getOverflowAncestors, autoUpdate, size, offset, limitShift, flip as flip$3, inline, arrow } from "@floating-ui/react-dom";
@@ -94,35 +94,35 @@ const hasInitialValue = (r) => "init" in r, isActuallyWritableAtom = (r) => !!r.
     (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && Object.freeze(O);
     const T = r.get(k);
     if (r.set(k, O), o.has(k) || o.set(k, T), T && hasPromiseAtomValue(T)) {
-      const M = "v" in O ? O.v instanceof Promise ? O.v : Promise.resolve(O.v) : Promise.reject(O.e);
-      cancelPromise(T.v, M);
+      const B = "v" in O ? O.v instanceof Promise ? O.v : Promise.resolve(O.v) : Promise.reject(O.e);
+      cancelPromise(T.v, B);
     }
   }, d = (k, O, T) => {
-    const M = /* @__PURE__ */ new Map();
-    let V = !1;
+    const B = /* @__PURE__ */ new Map();
+    let L = !1;
     T.forEach((D, W) => {
-      !D && W === k && (D = O), D ? (M.set(W, D), O.d.get(W) !== D && (V = !0)) : (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && console.warn("[Bug] atom state not found");
-    }), (V || O.d.size !== M.size) && (O.d = M);
+      !D && W === k && (D = O), D ? (B.set(W, D), O.d.get(W) !== D && (L = !0)) : (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && console.warn("[Bug] atom state not found");
+    }), (L || O.d.size !== B.size) && (O.d = B);
   }, m = (k, O, T) => {
-    const M = c(k), V = {
-      d: (M == null ? void 0 : M.d) || /* @__PURE__ */ new Map(),
+    const B = c(k), L = {
+      d: (B == null ? void 0 : B.d) || /* @__PURE__ */ new Map(),
       v: O
     };
-    if (T && d(k, V, T), M && isEqualAtomValue(M, V) && M.d === V.d)
-      return M;
-    if (M && hasPromiseAtomValue(M) && hasPromiseAtomValue(V) && isEqualPromiseAtomValue(M, V)) {
-      if (M.d === V.d)
-        return M;
-      V.v = M.v;
+    if (T && d(k, L, T), B && isEqualAtomValue(B, L) && B.d === L.d)
+      return B;
+    if (B && hasPromiseAtomValue(B) && hasPromiseAtomValue(L) && isEqualPromiseAtomValue(B, L)) {
+      if (B.d === L.d)
+        return B;
+      L.v = B.v;
     }
-    return u(k, V), V;
-  }, p = (k, O, T, M) => {
+    return u(k, L), L;
+  }, p = (k, O, T, B) => {
     if (isPromiseLike$2(O)) {
-      let V;
+      let L;
       const D = new Promise((W, J) => {
         let F = !1;
         O.then(
-          (L) => {
+          (V) => {
             if (!F) {
               F = !0;
               const q = c(k), G = m(
@@ -130,10 +130,10 @@ const hasInitialValue = (r) => "init" in r, isActuallyWritableAtom = (r) => !!r.
                 D,
                 T
               );
-              resolvePromise(D, L), W(L), (q == null ? void 0 : q.d) !== G.d && C(k, G, q == null ? void 0 : q.d);
+              resolvePromise(D, V), W(V), (q == null ? void 0 : q.d) !== G.d && R(k, G, q == null ? void 0 : q.d);
             }
           },
-          (L) => {
+          (V) => {
             if (!F) {
               F = !0;
               const q = c(k), G = m(
@@ -141,40 +141,40 @@ const hasInitialValue = (r) => "init" in r, isActuallyWritableAtom = (r) => !!r.
                 D,
                 T
               );
-              rejectPromise(D, L), J(L), (q == null ? void 0 : q.d) !== G.d && C(k, G, q == null ? void 0 : q.d);
+              rejectPromise(D, V), J(V), (q == null ? void 0 : q.d) !== G.d && R(k, G, q == null ? void 0 : q.d);
             }
           }
-        ), V = (L) => {
-          F || (F = !0, L.then(
+        ), L = (V) => {
+          F || (F = !0, V.then(
             (q) => resolvePromise(D, q),
             (q) => rejectPromise(D, q)
-          ), W(L));
+          ), W(V));
         };
       });
       return D.orig = O, D.status = "pending", registerCancelPromise(D, (W) => {
-        W && V(W), M == null || M();
+        W && L(W), B == null || B();
       }), m(k, D, T);
     }
     return m(k, O, T);
   }, g = (k, O, T) => {
-    const M = c(k), V = {
-      d: (M == null ? void 0 : M.d) || /* @__PURE__ */ new Map(),
+    const B = c(k), L = {
+      d: (B == null ? void 0 : B.d) || /* @__PURE__ */ new Map(),
       e: O
     };
-    return T && d(k, V, T), M && isEqualAtomError(M, V) && M.d === V.d ? M : (u(k, V), V);
+    return T && d(k, L, T), B && isEqualAtomError(B, L) && B.d === L.d ? B : (u(k, L), L);
   }, h = (k) => {
     const O = c(k);
-    if (O && (O.d.forEach((F, L) => {
-      L !== k && !n.has(L) && h(L);
-    }), Array.from(O.d).every(([F, L]) => {
+    if (O && (O.d.forEach((F, V) => {
+      V !== k && !n.has(V) && h(V);
+    }), Array.from(O.d).every(([F, V]) => {
       const q = c(F);
-      return F === k || q === L || // TODO This is a hack, we should find a better solution.
-      q && !hasPromiseAtomValue(q) && isEqualAtomValue(q, L);
+      return F === k || q === V || // TODO This is a hack, we should find a better solution.
+      q && !hasPromiseAtomValue(q) && isEqualAtomValue(q, V);
     })))
       return O;
     const T = /* @__PURE__ */ new Map();
-    let M = !0;
-    const V = (F) => {
+    let B = !0;
+    const L = (F) => {
       if (F === k) {
         const q = c(F);
         if (q)
@@ -183,8 +183,8 @@ const hasInitialValue = (r) => "init" in r, isActuallyWritableAtom = (r) => !!r.
           return T.set(F, void 0), F.init;
         throw new Error("no atom init");
       }
-      const L = h(F);
-      return T.set(F, L), returnAtomValue(L);
+      const V = h(F);
+      return T.set(F, V), returnAtomValue(V);
     };
     let D, W;
     const J = {
@@ -193,13 +193,13 @@ const hasInitialValue = (r) => "init" in r, isActuallyWritableAtom = (r) => !!r.
       },
       get setSelf() {
         return (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && !isActuallyWritableAtom(k) && console.warn("setSelf function cannot be used with read-only atom"), !W && isActuallyWritableAtom(k) && (W = (...F) => {
-          if ((define_import_meta_env_default$2 ? "production" : void 0) !== "production" && M && console.warn("setSelf function cannot be called in sync"), !M)
+          if ((define_import_meta_env_default$2 ? "production" : void 0) !== "production" && B && console.warn("setSelf function cannot be called in sync"), !B)
             return A(k, ...F);
         }), W;
       }
     };
     try {
-      const F = k.read(V, J);
+      const F = k.read(L, J);
       return p(
         k,
         F,
@@ -209,32 +209,32 @@ const hasInitialValue = (r) => "init" in r, isActuallyWritableAtom = (r) => !!r.
     } catch (F) {
       return g(k, F, T);
     } finally {
-      M = !1;
+      B = !1;
     }
   }, b = (k) => returnAtomValue(h(k)), x = (k) => {
     let O = n.get(k);
     return O || (O = P(k)), O;
   }, v = (k, O) => !O.l.size && (!O.t.size || O.t.size === 1 && O.t.has(k)), S = (k) => {
     const O = n.get(k);
-    O && v(k, O) && R(k);
+    O && v(k, O) && C(k);
   }, E = (k) => {
-    const O = /* @__PURE__ */ new Map(), T = /* @__PURE__ */ new WeakMap(), M = (D) => {
+    const O = /* @__PURE__ */ new Map(), T = /* @__PURE__ */ new WeakMap(), B = (D) => {
       const W = n.get(D);
       W == null || W.t.forEach((J) => {
         J !== D && (O.set(
           J,
           (O.get(J) || /* @__PURE__ */ new Set()).add(D)
-        ), T.set(J, (T.get(J) || 0) + 1), M(J));
+        ), T.set(J, (T.get(J) || 0) + 1), B(J));
       });
     };
-    M(k);
-    const V = (D) => {
+    B(k);
+    const L = (D) => {
       const W = n.get(D);
       W == null || W.t.forEach((J) => {
         var F;
         if (J !== D) {
-          let L = T.get(J);
-          if (L && T.set(J, --L), !L) {
+          let V = T.get(J);
+          if (V && T.set(J, --V), !V) {
             let q = !!((F = O.get(J)) != null && F.size);
             if (q) {
               const G = c(J), ee = h(J);
@@ -242,85 +242,85 @@ const hasInitialValue = (r) => "init" in r, isActuallyWritableAtom = (r) => !!r.
             }
             q || O.forEach((G) => G.delete(J));
           }
-          V(J);
+          L(J);
         }
       });
     };
-    V(k);
+    L(k);
   }, w = (k, ...O) => {
     let T = !0;
-    const M = (W) => returnAtomValue(h(W)), V = (W, ...J) => {
+    const B = (W) => returnAtomValue(h(W)), L = (W, ...J) => {
       let F;
       if (W === k) {
         if (!hasInitialValue(W))
           throw new Error("atom not writable");
-        const L = c(W), q = p(W, J[0]);
-        (!L || !isEqualAtomValue(L, q)) && E(W);
+        const V = c(W), q = p(W, J[0]);
+        (!V || !isEqualAtomValue(V, q)) && E(W);
       } else
         F = w(W, ...J);
       if (!T) {
-        const L = I();
+        const V = I();
         (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && i.forEach(
-          (q) => q({ type: "async-write", flushed: L })
+          (q) => q({ type: "async-write", flushed: V })
         );
       }
       return F;
-    }, D = k.write(M, V, ...O);
+    }, D = k.write(B, L, ...O);
     return T = !1, D;
   }, A = (k, ...O) => {
-    const T = w(k, ...O), M = I();
+    const T = w(k, ...O), B = I();
     return (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && i.forEach(
-      (V) => V({ type: "write", flushed: M })
+      (L) => L({ type: "write", flushed: B })
     ), T;
   }, P = (k, O) => {
     const T = {
       t: new Set(O && [O]),
       l: /* @__PURE__ */ new Set()
     };
-    if (n.set(k, T), (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && l.add(k), h(k).d.forEach((M, V) => {
-      const D = n.get(V);
-      D ? D.t.add(k) : V !== k && P(V, k);
+    if (n.set(k, T), (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && l.add(k), h(k).d.forEach((B, L) => {
+      const D = n.get(L);
+      D ? D.t.add(k) : L !== k && P(L, k);
     }), h(k), isActuallyWritableAtom(k) && k.onMount) {
-      const M = k.onMount((...V) => A(k, ...V));
-      M && (T.u = M);
+      const B = k.onMount((...L) => A(k, ...L));
+      B && (T.u = B);
     }
     return T;
-  }, R = (k) => {
+  }, C = (k) => {
     var O;
     const T = (O = n.get(k)) == null ? void 0 : O.u;
     T && T(), n.delete(k), (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && l.delete(k);
-    const M = c(k);
-    M ? (hasPromiseAtomValue(M) && cancelPromise(M.v), M.d.forEach((V, D) => {
+    const B = c(k);
+    B ? (hasPromiseAtomValue(B) && cancelPromise(B.v), B.d.forEach((L, D) => {
       if (D !== k) {
         const W = n.get(D);
-        W && (W.t.delete(k), v(D, W) && R(D));
+        W && (W.t.delete(k), v(D, W) && C(D));
       }
     })) : (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && console.warn("[Bug] could not find atom state to unmount", k);
-  }, C = (k, O, T) => {
-    const M = new Set(O.d.keys());
-    T == null || T.forEach((V, D) => {
-      if (M.has(D)) {
-        M.delete(D);
+  }, R = (k, O, T) => {
+    const B = new Set(O.d.keys());
+    T == null || T.forEach((L, D) => {
+      if (B.has(D)) {
+        B.delete(D);
         return;
       }
       const W = n.get(D);
-      W && (W.t.delete(k), v(D, W) && R(D));
-    }), M.forEach((V) => {
-      const D = n.get(V);
-      D ? D.t.add(k) : n.has(k) && P(V, k);
+      W && (W.t.delete(k), v(D, W) && C(D));
+    }), B.forEach((L) => {
+      const D = n.get(L);
+      D ? D.t.add(k) : n.has(k) && P(L, k);
     });
   }, I = () => {
     let k;
     for ((define_import_meta_env_default$2 ? "production" : void 0) !== "production" && (k = /* @__PURE__ */ new Set()); o.size; ) {
       const O = Array.from(o);
-      o.clear(), O.forEach(([T, M]) => {
-        const V = c(T);
-        if (V) {
-          V.d !== (M == null ? void 0 : M.d) && C(T, V, M == null ? void 0 : M.d);
+      o.clear(), O.forEach(([T, B]) => {
+        const L = c(T);
+        if (L) {
+          L.d !== (B == null ? void 0 : B.d) && R(T, L, B == null ? void 0 : B.d);
           const D = n.get(T);
           D && !// TODO This seems pretty hacky. Hope to fix it.
           // Maybe we could `mountDependencies` in `setAtomState`?
-          (M && !hasPromiseAtomValue(M) && (isEqualAtomValue(M, V) || isEqualAtomError(M, V))) && (D.l.forEach((W) => W()), (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && k.add(T));
+          (B && !hasPromiseAtomValue(B) && (isEqualAtomValue(B, L) || isEqualAtomError(B, L))) && (D.l.forEach((W) => W()), (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && k.add(T));
         } else
           (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && console.warn("[Bug] no atom state to flush");
       });
@@ -328,11 +328,11 @@ const hasInitialValue = (r) => "init" in r, isActuallyWritableAtom = (r) => !!r.
     if ((define_import_meta_env_default$2 ? "production" : void 0) !== "production")
       return a.forEach((O) => O("state")), k;
   }, j = (k, O) => {
-    const T = x(k), M = I(), V = T.l;
-    return V.add(O), (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && (a.forEach((D) => D("sub")), i.forEach(
-      (D) => D({ type: "sub", flushed: M })
+    const T = x(k), B = I(), L = T.l;
+    return L.add(O), (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && (a.forEach((D) => D("sub")), i.forEach(
+      (D) => D({ type: "sub", flushed: B })
     )), () => {
-      V.delete(O), S(k), (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && (a.forEach((D) => D("unsub")), i.forEach((D) => D({ type: "unsub" })));
+      L.delete(O), S(k), (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && (a.forEach((D) => D("unsub")), i.forEach((D) => D({ type: "unsub" })));
     };
   };
   return (define_import_meta_env_default$2 ? "production" : void 0) !== "production" ? {
@@ -351,8 +351,8 @@ const hasInitialValue = (r) => "init" in r, isActuallyWritableAtom = (r) => !!r.
     dev_get_atom_state: (k) => r.get(k),
     dev_get_mounted: (k) => n.get(k),
     dev_restore_atoms: (k) => {
-      for (const [T, M] of k)
-        hasInitialValue(T) && (p(T, M), E(T));
+      for (const [T, B] of k)
+        hasInitialValue(T) && (p(T, B), E(T));
       const O = I();
       i.forEach(
         (T) => T({ type: "restore", flushed: O })
@@ -388,23 +388,23 @@ function splitAtom(r, n) {
             return;
           }
           const S = (w) => {
-            const A = w(i), P = w(r), C = a(P, A == null ? void 0 : A.arr).keyList.indexOf(x);
-            if (C < 0 || C >= P.length) {
+            const A = w(i), P = w(r), R = a(P, A == null ? void 0 : A.arr).keyList.indexOf(x);
+            if (R < 0 || R >= P.length) {
               const I = c[a(c).keyList.indexOf(x)];
               if (I)
                 return I;
               throw new Error("splitAtom: index out of bounds for read");
             }
-            return P[C];
+            return P[R];
           }, E = (w, A, P) => {
-            const R = w(i), C = w(r), j = a(C, R == null ? void 0 : R.arr).keyList.indexOf(x);
-            if (j < 0 || j >= C.length)
+            const C = w(i), R = w(r), j = a(R, C == null ? void 0 : C.arr).keyList.indexOf(x);
+            if (j < 0 || j >= R.length)
               throw new Error("splitAtom: index out of bounds for write");
-            const k = isFunction$1(P) ? P(C[j]) : P;
+            const k = isFunction$1(P) ? P(R[j]) : P;
             A(r, [
-              ...C.slice(0, j),
+              ...R.slice(0, j),
               k,
-              ...C.slice(j + 1)
+              ...R.slice(j + 1)
             ]);
           };
           p[b] = isWritable(r) ? atom(S, E) : atom(S);
@@ -1217,12 +1217,12 @@ const useBlocksStoreManager = () => {
   return {
     moveBlocks: (x, v, S) => {
       const E = map(x, (A) => {
-        const R = n.find((j) => j._id === A)._parent || null, I = n.filter((j) => R ? j._parent === R : !j._parent).map((j) => j._id).indexOf(A);
-        return { _id: A, oldParent: R, oldPosition: I };
+        const C = n.find((j) => j._id === A)._parent || null, I = n.filter((j) => C ? j._parent === C : !j._parent).map((j) => j._id).indexOf(A);
+        return { _id: A, oldParent: C, oldPosition: I };
       }), w = E.find(({ _id: A }) => A === x[0]);
       w && w.oldParent === v && w.oldPosition === S || (l(x, v, S), r({
-        undo: () => each(E, ({ _id: A, oldParent: P, oldPosition: R }) => {
-          l([A], P, R);
+        undo: () => each(E, ({ _id: A, oldParent: P, oldPosition: C }) => {
+          l([A], P, C);
         }),
         redo: () => l(x, v, S)
       }));
@@ -1248,8 +1248,8 @@ const useBlocksStoreManager = () => {
       else {
         const w = keys(v);
         E = map(x, (A) => {
-          const P = n.find((C) => C._id === A), R = { _id: A };
-          return each(w, (C) => R[C] = P[C]), R;
+          const P = n.find((R) => R._id === A), C = { _id: A };
+          return each(w, (R) => C[R] = P[R]), C;
         });
       }
       c(map(x, (w) => ({ _id: w, ...v }))), r({
@@ -3171,8 +3171,10 @@ const useHandleCanvasDblClick = () => {
 }, KeyboardHandler = () => {
   const { document: r } = useFrame();
   return useKeyEventWatcher(r), null;
-}, useAddBlocksModal = () => useAtom(addBlockModalOpenAtom), { useChaiBuilderMsgListener, emitChaiBuilderMsg } = createEvent("chaiBuilderMsg")(), BUILDER_EVENTS = {
-  SHOW_SETTINGS: "SHOW_SETTINGS"
+}, { useChaiBuilderMsgListener, emitChaiBuilderMsg } = createEvent("chaiBuilderMsg")(), CHAI_BUILDER_EVENTS = {
+  OPEN_ADD_BLOCK: "OPEN_ADD_BLOCK",
+  CLOSE_ADD_BLOCK: "CLOSE_ADD_BLOCK",
+  SHOW_BLOCK_SETTINGS: "SHOW_BLOCK_SETTINGS"
 }, BlockActionLabel = ({ block: r, label: n }) => {
   const [, o] = useSelectedBlockIds(), [, a] = useHighlightBlockId(), [, i] = useAtom$1(draggedBlockAtom), l = useFeature("dnd");
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
@@ -3192,49 +3194,55 @@ const useHandleCanvasDblClick = () => {
     }
   );
 }, BlockActionsStatic = ({ selectedBlockElement: r, block: n }) => {
-  const o = useRemoveBlocks(), a = useDuplicateBlocks(), [, i] = useSelectedBlockIds(), [, l] = useHighlightBlockId(), [, c] = useAddBlocksModal(), [, u] = useSelectedStylingBlocks(), [d] = useAtom$1(inlineEditingActiveAtom), { floatingStyles: m, refs: p, update: g } = useFloating$1({
+  const o = useRemoveBlocks(), a = useDuplicateBlocks(), [, i] = useSelectedBlockIds(), [, l] = useHighlightBlockId(), [, c] = useSelectedStylingBlocks(), [u] = useAtom$1(inlineEditingActiveAtom), { floatingStyles: d, refs: m, update: p } = useFloating$1({
     placement: "top-start",
     middleware: [shift(), flip$2()],
     elements: {
       reference: r
     }
   });
-  useResizeObserver(r, () => g(), r !== null);
-  const h = get$1(n, "_parent", null), b = isEmpty(get$1(n, "_name", "")) ? get$1(n, "_type", "") : get$1(n, "_name", "");
-  return !r || !n || d ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+  useResizeObserver(r, () => p(), r !== null);
+  const g = get$1(n, "_parent", null), h = isEmpty(get$1(n, "_name", "")) ? get$1(n, "_type", "") : get$1(n, "_name", "");
+  return !r || !n || u ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
       role: "button",
       tabIndex: 0,
-      ref: p.setFloating,
-      style: m,
-      onClick: (x) => {
-        x.stopPropagation(), x.preventDefault();
+      ref: m.setFloating,
+      style: d,
+      onClick: (b) => {
+        b.stopPropagation(), b.preventDefault();
       },
-      onMouseEnter: (x) => {
-        x.stopPropagation(), l(null);
+      onMouseEnter: (b) => {
+        b.stopPropagation(), l(null);
       },
-      onKeyDown: (x) => x.stopPropagation(),
+      onKeyDown: (b) => b.stopPropagation(),
       className: "isolate z-10 flex h-6 items-center bg-blue-500 py-2 text-xs text-white",
       children: [
-        h && /* @__PURE__ */ jsxRuntimeExports.jsx(
+        g && /* @__PURE__ */ jsxRuntimeExports.jsx(
           ArrowUpIcon,
           {
             className: "hover:scale-105",
             onClick: () => {
-              u([]), i([h]);
+              c([]), i([g]);
             }
           }
         ),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(BlockActionLabel, { label: b, block: n }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(BlockActionLabel, { label: h, block: n }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-2 px-1", children: [
-          canAddChildBlock(get$1(n, "_type", "")) && /* @__PURE__ */ jsxRuntimeExports.jsx(PlusIcon, { className: "hover:scale-105", onClick: () => c(n == null ? void 0 : n._id) }),
+          canAddChildBlock(get$1(n, "_type", "")) && /* @__PURE__ */ jsxRuntimeExports.jsx(
+            PlusIcon,
+            {
+              className: "hover:scale-105",
+              onClick: () => emitChaiBuilderMsg({ name: CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, data: n })
+            }
+          ),
           canDuplicateBlock(get$1(n, "_type", "")) ? /* @__PURE__ */ jsxRuntimeExports.jsx(CopyIcon$1, { className: "hover:scale-105", onClick: () => a([n == null ? void 0 : n._id]) }) : null,
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             GearIcon,
             {
               className: "text-white hover:scale-105",
-              onClick: () => emitChaiBuilderMsg({ name: BUILDER_EVENTS.SHOW_SETTINGS })
+              onClick: () => emitChaiBuilderMsg({ name: CHAI_BUILDER_EVENTS.SHOW_BLOCK_SETTINGS, data: n })
             }
           ),
           canDeleteBlock(get$1(n, "_type", "")) ? /* @__PURE__ */ jsxRuntimeExports.jsx(TrashIcon, { className: "hover:scale-105", onClick: () => o([n == null ? void 0 : n._id]) }) : null
@@ -3255,14 +3263,14 @@ const useHandleCanvasDblClick = () => {
   }, [a, d]);
   const x = get$1(n, "headingFont", "DM Sans"), v = get$1(n, "bodyFont", "DM Sans");
   return useEffect$1(() => {
-    const S = get$1(n, "primaryColor", "#000"), E = get$1(n, "secondaryColor", "#FFF"), w = get$1(n, "bodyBgLightColor", "#fff"), A = get$1(n, "bodyBgDarkColor", "#000"), P = get$1(n, "bodyTextDarkColor", "#000"), R = get$1(n, "bodyTextLightColor", "#fff"), C = getPalette([
+    const S = get$1(n, "primaryColor", "#000"), E = get$1(n, "secondaryColor", "#FFF"), w = get$1(n, "bodyBgLightColor", "#fff"), A = get$1(n, "bodyBgDarkColor", "#000"), P = get$1(n, "bodyTextDarkColor", "#000"), C = get$1(n, "bodyTextLightColor", "#fff"), R = getPalette([
       { color: S, name: "primary" },
       { color: E, name: "secondary" }
     ]), I = {
       "bg-light": w,
       "bg-dark": A,
       "text-dark": P,
-      "text-light": R
+      "text-light": C
     }, j = get$1(n, "roundedCorners", "0");
     !m || !m.tailwind || (m.tailwind.config = {
       darkMode: "class",
@@ -3282,7 +3290,7 @@ const useHandleCanvasDblClick = () => {
           borderRadius: {
             DEFAULT: `${j || "0"}px`
           },
-          colors: { ...I, ...C }
+          colors: { ...I, ...R }
         }
       },
       plugins: [
@@ -3410,10 +3418,10 @@ function BlocksRendererStatic({ blocks: r }) {
       const E = getBlockComponent(h._type), w = get$1(E, "builderComponent", get$1(E, "component", null));
       if (isNull(w))
         return /* @__PURE__ */ jsxRuntimeExports.jsx("noscript", { children: `<!-- ${h == null ? void 0 : h._type} not registered -->` });
-      const A = has(E, "getBlockStateFrom") ? E == null ? void 0 : E.getBlockStateFrom(h, n) : [], P = g(A), R = d(h);
-      if (get$1(R, "__isHidden", !1) && !includes(o, h._id))
+      const A = has(E, "getBlockStateFrom") ? E == null ? void 0 : E.getBlockStateFrom(h, n) : [], P = g(A), C = d(h);
+      if (get$1(C, "__isHidden", !1) && !includes(o, h._id))
         return null;
-      const C = i && isDescendant(i._id, h._id, n);
+      const R = i && isDescendant(i._id, h._id, n);
       return /* @__PURE__ */ jsxRuntimeExports.jsx(Suspense, { children: React__default.createElement(w, {
         blockProps: {
           ...includes(o, h._id) ? { "force-show": "" } : {},
@@ -3423,15 +3431,15 @@ function BlocksRendererStatic({ blocks: r }) {
             // @ts-ignore
             {
               "data-dnd": canAcceptChildBlock(h._type, i == null ? void 0 : i._type) ? "yes" : "no",
-              "data-dnd-dragged": i._id === h._id || C ? "yes" : "no"
+              "data-dnd-dragged": i._id === h._id || R ? "yes" : "no"
             }
           ) : {},
-          ...l === h._id && !C ? { "data-drop": "yes" } : {},
+          ...l === h._id && !R ? { "data-drop": "yes" } : {},
           ...includes(a, h._id) ? { "data-cut-block": "yes" } : {}
         },
         index: b,
         ...applyBindings(h, m),
-        ...omit(R, ["__isHidden"]),
+        ...omit(C, ["__isHidden"]),
         ...v,
         inBuilder: !0,
         blockState: P
@@ -3458,15 +3466,15 @@ const useAllDataProviders = () => useMemo$1(() => getChaiDataProviders(), []), B
   const [r] = useBlocksStore(), n = isEmpty(r) ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(BlocksExternalDataProvider, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(BlocksRendererStatic, { blocks: filter(r, (o) => isEmpty(o._parent)) }) });
   return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: n });
 }, AddBlockAtBottom = () => {
-  const [, r] = useAddBlocksModal(), { t: n } = useTranslation();
+  const { t: r } = useTranslation();
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "button",
     {
-      onClick: () => r(ROOT_TEMP_KEY),
+      onClick: () => emitChaiBuilderMsg({ name: CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK }),
       className: "mt-1 block w-full rounded-md bg-gray-100 p-2 text-black hover:bg-gray-200 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-700",
       children: [
         "+ ",
-        n("add_block")
+        r("add_block")
       ]
     }
   );
@@ -3484,41 +3492,41 @@ const useAllDataProviders = () => useMemo$1(() => getChaiDataProviders(), []), B
     n(l);
   }, []), /* @__PURE__ */ jsxRuntimeExports.jsx("div", { id: "main-content", className: "h-full w-full", ref: a, children: r });
 }, getElementByStyleId = (r, n) => r.querySelector(`[data-style-id="${n}"]`), StaticCanvas = () => {
-  const [r] = useAtom$1(networkModeAtom), [n] = useCanvasWidth(), [, o] = useSelectedBlockIds(), a = useSelectedBlock(), [, i] = useHighlightBlockId(), l = useRef$1(null), c = useRef$1(null), [u, d] = useState$1({ width: 0, height: 0 }), m = useCanvasScale(u), [p, g] = useState$1([]), [, h] = useState$1([]), [, b] = useAtom$1(canvasIframeAtom), [x, v] = useSelectedStylingBlocks(), S = useBuilderProp("loading", !1), E = useBuilderProp("htmlDir", "ltr"), w = (R) => {
-    d((C) => ({ ...C, width: R }));
+  const [r] = useAtom$1(networkModeAtom), [n] = useCanvasWidth(), [, o] = useSelectedBlockIds(), a = useSelectedBlock(), [, i] = useHighlightBlockId(), l = useRef$1(null), c = useRef$1(null), [u, d] = useState$1({ width: 0, height: 0 }), m = useCanvasScale(u), [p, g] = useState$1([]), [, h] = useState$1([]), [, b] = useAtom$1(canvasIframeAtom), [x, v] = useSelectedStylingBlocks(), S = useBuilderProp("loading", !1), E = useBuilderProp("htmlDir", "ltr"), w = (C) => {
+    d((R) => ({ ...R, width: C }));
   };
   useEffect$1(() => {
     if (!c.current)
       return;
-    const { clientWidth: R, clientHeight: C } = c.current;
-    d({ width: R, height: C });
+    const { clientWidth: C, clientHeight: R } = c.current;
+    d({ width: C, height: R });
   }, [c, n]);
-  const A = (R, C = 0) => {
-    const { top: I } = R.getBoundingClientRect();
-    return I + C >= 0 && I - C <= window.innerHeight;
+  const A = (C, R = 0) => {
+    const { top: I } = C.getBoundingClientRect();
+    return I + R >= 0 && I - R <= window.innerHeight;
   };
   useEffect$1(() => {
-    var R, C;
+    var C, R;
     if (a && a.type !== "Multiple" && l.current) {
       const I = getElementByDataBlockId(l.current.contentDocument, a._id);
-      I && (A(I) || (C = (R = l.current) == null ? void 0 : R.contentWindow) == null || C.scrollTo({ top: I.offsetTop, behavior: "smooth" }), g([I]));
+      I && (A(I) || (R = (C = l.current) == null ? void 0 : C.contentWindow) == null || R.scrollTo({ top: I.offsetTop, behavior: "smooth" }), g([I]));
     }
   }, [a]), useEffect$1(() => {
     if (!isEmpty(x) && l.current) {
-      const R = getElementByStyleId(
+      const C = getElementByStyleId(
         l.current.contentDocument,
         first(x).id
       );
-      h(R ? [R] : [null]);
+      h(C ? [C] : [null]);
     } else
       h([null]);
   }, [x]);
   const P = useMemo$1(() => {
-    let R = IframeInitialContent;
-    return R = R.replace("__HTML_DIR__", E), r === "offline" && (R = R.replace(
+    let C = IframeInitialContent;
+    return C = C.replace("__HTML_DIR__", E), r === "offline" && (C = C.replace(
       "https://old.chaibuilder.com/offline/tailwind.cdn.js",
       "/offline/tailwind.cdn.js"
-    ), R = R.replace("https://unpkg.com/aos@next/dist/aos.css", "/offline/aos.css"), R = R.replace("https://unpkg.com/aos@next/dist/aos.js", "/offline/aos.js")), R;
+    ), C = C.replace("https://unpkg.com/aos@next/dist/aos.css", "/offline/aos.css"), C = C.replace("https://unpkg.com/aos@next/dist/aos.js", "/offline/aos.js")), C;
   }, [r]);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(ResizableCanvasWrapper, { onMount: w, onResize: w, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
@@ -3570,7 +3578,7 @@ const useAllDataProviders = () => useMemo$1(() => getChaiDataProviders(), []), B
 }, StaticCanvas$1 = StaticCanvas, FallbackError = () => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-full w-full rounded-md bg-red-200 p-4 text-red-500", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex h-full w-full flex-col items-center justify-center", children: [
   /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "font-semibold", children: "Oops! Something went wrong." }),
   /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: "Please try again." })
-] }) }), CodeEditor$1 = React__default.lazy(() => import("./CodeEditor-J-XqPeSx.js")), CanvasArea = () => {
+] }) }), CodeEditor$1 = React__default.lazy(() => import("./CodeEditor-GsTOzMVg.js")), CanvasArea = () => {
   const [r] = useCodeEditor(), n = useBuilderProp("onError", noop$1);
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex h-full w-full flex-col", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative flex h-full flex-col overflow-hidden bg-gray-100/40 px-2", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-full" }), children: /* @__PURE__ */ jsxRuntimeExports.jsx(ErrorBoundary$1, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx(FallbackError, {}), onError: n, children: /* @__PURE__ */ jsxRuntimeExports.jsx(StaticCanvas$1, {}) }) }),
@@ -3648,8 +3656,8 @@ const useAllDataProviders = () => useMemo$1(() => getChaiDataProviders(), []), B
   React.useEffect(() => () => {
     isEqual(a, c.current) || o(c.current);
   }, []);
-  const d = ({ formData: R }, C) => {
-    C && (i(R), c.current = R);
+  const d = ({ formData: C }, R) => {
+    R && (i(C), c.current = C);
   }, {
     bodyFont: m,
     headingFont: p,
@@ -3702,9 +3710,9 @@ const useAllDataProviders = () => useMemo$1(() => getChaiDataProviders(), []), B
     type: "object",
     properties: {}
   }, P = {};
-  return Object.keys(w).forEach((R) => {
-    const C = w[R];
-    return A.properties || (A.properties = {}), A.properties[R] = C.schema, P[R] = C.uiSchema, !0;
+  return Object.keys(w).forEach((C) => {
+    const R = w[C];
+    return A.properties || (A.properties = {}), A.properties[C] = R.schema, P[C] = R.uiSchema, !0;
   }), /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cn("flex h-full w-full select-none flex-col", n), children: [
     r ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "rounded-md bg-background/30 p-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx("h1", { className: "px-1 font-semibold", children: u("Theme Configuration") }) }) : null,
     /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -3872,7 +3880,7 @@ const useAllDataProviders = () => useMemo$1(() => getChaiDataProviders(), []), B
     }
   );
 }, BlockContextMenuContent = () => {
-  const { t: r } = useTranslation(), [n] = useSelectedBlockIds(), o = useDuplicateBlocks(), a = useSelectedBlock(), [, i] = useAddBlocksModal(), l = useCallback$1(() => {
+  const { t: r } = useTranslation(), [n] = useSelectedBlockIds(), o = useDuplicateBlocks(), a = useSelectedBlock(), i = useCallback$1(() => {
     o(n);
   }, [n, o]);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(ContextMenuContent, { className: "text-xs", children: [
@@ -3881,7 +3889,7 @@ const useAllDataProviders = () => useMemo$1(() => getChaiDataProviders(), []), B
       {
         disabled: !canAddChildBlock(a == null ? void 0 : a._type),
         className: "flex items-center gap-x-4 text-xs",
-        onClick: () => i(a == null ? void 0 : a._id),
+        onClick: () => emitChaiBuilderMsg({ name: CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, data: a }),
         children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(PlusIcon$1, { size: "14" }),
           " ",
@@ -3894,7 +3902,7 @@ const useAllDataProviders = () => useMemo$1(() => getChaiDataProviders(), []), B
       {
         disabled: !canDuplicateBlock(a == null ? void 0 : a._type),
         className: "flex items-center gap-x-4 text-xs",
-        onClick: l,
+        onClick: i,
         children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(CardStackPlusIcon, {}),
           " ",
@@ -3953,34 +3961,34 @@ function BsLightningFill(r) {
 function TbEyeDown(r) {
   return GenIcon({ tag: "svg", attr: { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, child: [{ tag: "path", attr: { d: "M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" }, child: [] }, { tag: "path", attr: { d: "M12 18c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6" }, child: [] }, { tag: "path", attr: { d: "M19 16v6" }, child: [] }, { tag: "path", attr: { d: "M22 19l-3 3l-3 -3" }, child: [] }] })(r);
 }
-const Node = memo(({ node: r, style: n, dragHandle: o }) => {
+const useAddBlocksModal = () => useAtom(addBlockModalOpenAtom), Node = memo(({ node: r, style: n, dragHandle: o }) => {
   const a = useBuilderProp("outlineMenuItems", []), [, i] = useAddBlocksModal(), { t: l } = useTranslation(), [c] = useAtom$1(canvasIframeAtom);
   let u = null;
-  const d = r.children.length > 0, { id: m, data: p, isSelected: g, willReceiveDrop: h, isDragging: b, isEditing: x, handleClick: v } = r, S = (C) => {
-    C.stopPropagation(), r.toggle();
-  }, E = (C) => {
-    C.isInternal && (u = C.isOpen, C.isOpen && C.close());
-  }, w = (C) => {
-    C.isInternal && u !== null && (u ? C.open() : C.close(), u = null);
-  }, A = (C) => {
-    C.stopPropagation(), r.isOpen || r.toggle(), v(C);
+  const d = r.children.length > 0, { id: m, data: p, isSelected: g, willReceiveDrop: h, isDragging: b, isEditing: x, handleClick: v } = r, S = (R) => {
+    R.stopPropagation(), r.toggle();
+  }, E = (R) => {
+    R.isInternal && (u = R.isOpen, R.isOpen && R.close());
+  }, w = (R) => {
+    R.isInternal && u !== null && (u ? R.open() : R.close(), u = null);
+  }, A = (R) => {
+    R.stopPropagation(), r.isOpen || r.toggle(), v(R);
   };
   useEffect$1(() => {
-    const C = setTimeout(() => {
+    const R = setTimeout(() => {
       h && !r.isOpen && !b && r.toggle();
     }, 500);
-    return () => clearTimeout(C);
+    return () => clearTimeout(R);
   }, [h, r, b]);
   const P = useMemo$1(() => {
-    const C = Object.keys(p), I = [];
-    for (let j = 0; j < C.length; j++)
-      if (C[j].endsWith("_attrs")) {
-        const k = p[C[j]], O = Object.keys(k).join("|");
+    const R = Object.keys(p), I = [];
+    for (let j = 0; j < R.length; j++)
+      if (R[j].endsWith("_attrs")) {
+        const k = p[R[j]], O = Object.keys(k).join("|");
         O.match(/x-data/) && I.push("data"), O.match(/x-on/) && I.push("event"), O.match(/x-show|x-if/) && I.push("show");
       }
     return I;
-  }, [p]), R = (C, I) => {
-    const j = c.contentDocument || c.contentWindow.document, k = j.querySelector(`[data-block-id=${C}]`);
+  }, [p]), C = (R, I) => {
+    const j = c.contentDocument || c.contentWindow.document, k = j.querySelector(`[data-block-id=${R}]`);
     k && k.setAttribute("data-drop", I);
     const O = k.getBoundingClientRect(), T = c.getBoundingClientRect();
     O.top >= T.top && O.left >= T.left && O.bottom <= T.bottom && O.right <= T.right || (j.documentElement.scrollTop = k.offsetTop - T.top);
@@ -3988,7 +3996,7 @@ const Node = memo(({ node: r, style: n, dragHandle: o }) => {
   return m === ROOT_TEMP_KEY ? /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "button",
     {
-      onClick: () => i(ROOT_TEMP_KEY),
+      onClick: () => emitChaiBuilderMsg({ name: CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK }),
       className: "mb-10 mt-5 w-full rounded bg-gray-100 p-1 hover:bg-gray-200",
       children: [
         "+ ",
@@ -4004,14 +4012,14 @@ const Node = memo(({ node: r, style: n, dragHandle: o }) => {
       ref: o,
       onDragStart: () => E(r),
       onDragEnd: () => w(r),
-      onDragOver: (C) => {
-        C.preventDefault(), R(m, "yes");
+      onDragOver: (R) => {
+        R.preventDefault(), C(m, "yes");
       },
-      onDragLeave: (C) => {
-        C.preventDefault(), R(m, "no");
+      onDragLeave: (R) => {
+        R.preventDefault(), C(m, "no");
       },
-      onDrop: (C) => {
-        C.preventDefault(), R(m, "no");
+      onDrop: (R) => {
+        R.preventDefault(), C(m, "no");
       },
       className: cn(
         "group flex !h-full w-full items-center justify-between space-x-px !rounded py-px outline-none",
@@ -4034,8 +4042,8 @@ const Node = memo(({ node: r, style: n, dragHandle: o }) => {
               "div",
               {
                 className: "ml-2 flex items-center gap-x-1 truncate text-[11px]",
-                onDoubleClick: (C) => {
-                  C.stopPropagation(), r.edit(), r.deselect();
+                onDoubleClick: (R) => {
+                  R.stopPropagation(), r.edit(), r.deselect();
                 },
                 children: [
                   /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: (p == null ? void 0 : p._name) || (p == null ? void 0 : p._type.split("/").pop()) }),
@@ -4060,16 +4068,16 @@ const Node = memo(({ node: r, style: n, dragHandle: o }) => {
             ),
             /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { className: "isolate z-[9999]", children: l("Add block") })
           ] }) : null,
-          a.map((C) => /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip$1, { children: [
+          a.map((R) => /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip$1, { children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx(
               TooltipTrigger,
               {
                 className: "cursor-pointer rounded bg-transparent hover:bg-white hover:text-blue-500",
                 asChild: !0,
-                children: React__default.createElement(C.item, { blockId: m })
+                children: React__default.createElement(R.item, { blockId: m })
               }
             ),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { className: "isolate z-10", children: C.tooltip })
+            /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { className: "isolate z-10", children: R.tooltip })
           ] }))
         ] })
       ]
@@ -4102,7 +4110,7 @@ const Node = memo(({ node: r, style: n, dragHandle: o }) => {
     return canAcceptChildBlock(a, i);
   };
 }, ListTree = () => {
-  const [treeData] = useAtom$1(treeDSBlocks), [ids, setIds] = useSelectedBlockIds(), [cutBlocksIds] = useCutBlockIds(), updateBlockProps = useUpdateBlocksProps(), [, setStyleBlocks] = useSelectedStylingBlocks(), { moveBlocks } = useBlocksStoreUndoableActions(), canMove = useCanMove(), treeRef = useRef$1(null), [, setTreeRef] = useAtom$1(treeRefAtom), { t } = useTranslation(), [, setOpen] = useAddBlocksModal(), clearSelection = () => {
+  const [treeData] = useAtom$1(treeDSBlocks), [ids, setIds] = useSelectedBlockIds(), [cutBlocksIds] = useCutBlockIds(), updateBlockProps = useUpdateBlocksProps(), [, setStyleBlocks] = useSelectedStylingBlocks(), { moveBlocks } = useBlocksStoreUndoableActions(), canMove = useCanMove(), treeRef = useRef$1(null), [, setTreeRef] = useAtom$1(treeRefAtom), { t } = useTranslation(), clearSelection = () => {
     setIds([]), setStyleBlocks([]);
   }, filteredTreeData = useMemo$1(() => {
     const r = (o, a) => o.filter((i) => !a.includes(i._id)).map((i) => ({
@@ -4172,7 +4180,18 @@ const Node = memo(({ node: r, style: n, dragHandle: o }) => {
     t("page_is_empty"),
     /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
     /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(Button$1, { onClick: () => setOpen(ROOT_TEMP_KEY), variant: "default", size: "sm", children: t("add_block") })
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      Button$1,
+      {
+        onClick: () => emitChaiBuilderMsg({ name: CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK }),
+        variant: "default",
+        size: "sm",
+        children: [
+          "+ ",
+          t("add_block")
+        ]
+      }
+    )
   ] }) }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: cn("flex h-full select-none flex-col space-y-1"), onClick: () => clearSelection(), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
     {
@@ -4390,30 +4409,30 @@ const Node = memo(({ node: r, style: n, dragHandle: o }) => {
 }, getBlocksFromHTML = (r) => {
   const n = parse$1(getSanitizedHTML(r));
   return isEmpty(r) ? [] : flatten(traverseNodes(n));
-}, ImportHTML = () => {
-  const { t: r } = useTranslation(), [n, o] = useState$1(""), { addPredefinedBlock: a } = useAddBlock(), [i] = useSelectedBlockIds(), [, l] = useAtom$1(activePanelAtom$1), [, c] = useAddBlocksModal(), u = () => {
-    const d = getBlocksFromHTML(n);
-    a([...d], first(i) || null), o(""), c(""), l(OUTLINE_KEY);
+}, ImportHTML = ({ parentId: r }) => {
+  const { t: n } = useTranslation(), [o, a] = useState$1(""), { addPredefinedBlock: i } = useAddBlock(), l = () => {
+    const c = getBlocksFromHTML(o);
+    i([...c], r), a(""), emitChaiBuilderMsg({ name: CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK });
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { className: "border-border/0 p-0 shadow-none", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "p-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardDescription, { children: r("html_snippet_description") }) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "p-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardDescription, { children: n("html_snippet_description") }) }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "space-y-2 px-3 py-0", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-1", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Label, { htmlFor: "current", className: "text-sm", children: r("tailwind_html_snippet") }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Label, { htmlFor: "current", className: "text-sm", children: n("tailwind_html_snippet") }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         Textarea,
         {
           autoFocus: !0,
           tabIndex: 1,
-          ref: (d) => d && d.focus(),
-          onChange: (d) => o(d.target.value),
+          ref: (c) => c && c.focus(),
+          onChange: (c) => a(c.target.value),
           rows: 12,
-          value: n,
-          placeholder: r("enter_code_snippet"),
+          value: o,
+          placeholder: n("enter_code_snippet"),
           className: "resize-none overflow-x-auto whitespace-pre bg-gray-100 font-mono text-xs font-normal"
         }
       )
     ] }) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(CardFooter, { className: "flex flex-col justify-end p-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Button$1, { disabled: n.trim() === "", onClick: () => u(), size: "sm", className: "w-full", children: r("import_html") }) })
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CardFooter, { className: "flex flex-col justify-end p-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Button$1, { disabled: o.trim() === "", onClick: () => l(), size: "sm", className: "w-full", children: n("import_html") }) })
   ] });
 }, ImportHTML$1 = ImportHTML, isBoolean = (r) => typeof r == "boolean" || r instanceof Boolean, isNumber = (r) => typeof r == "number" || r instanceof Number, isBigInt = (r) => typeof r == "bigint" || r instanceof BigInt, isDate = (r) => !!r && r instanceof Date, isString = (r) => typeof r == "string" || r instanceof String, isArray$4 = (r) => Array.isArray(r), isObject$1 = (r) => r instanceof Object && r !== null;
 function useBool(r) {
@@ -4443,8 +4462,8 @@ function ExpandableObject(r) {
   useEffect$1(() => {
     g.current ? x(m(u, o, n)) : g.current = !0;
   }, [m]);
-  const v = h ? d.collapseIcon : d.expandIcon, S = h ? "collapse JSON" : "expand JSON", E = useComponentId(), w = u + 1, A = a.length - 1, P = (R) => {
-    R.key === " " && (R.preventDefault(), b());
+  const v = h ? d.collapseIcon : d.expandIcon, S = h ? "collapse JSON" : "expand JSON", E = useComponentId(), w = u + 1, A = a.length - 1, P = (C) => {
+    C.key === " " && (C.preventDefault(), b());
   };
   return /* @__PURE__ */ createElement$1("div", {
     className: d.basicChildStyle,
@@ -4470,12 +4489,12 @@ function ExpandableObject(r) {
     className: d.punctuation
   }, l), h ? /* @__PURE__ */ createElement$1("div", {
     id: E
-  }, a.map((R, C) => /* @__PURE__ */ createElement$1(DataRender, {
-    key: R[0] || C,
-    field: R[0],
-    value: R[1],
+  }, a.map((C, R) => /* @__PURE__ */ createElement$1(DataRender, {
+    key: C[0] || R,
+    field: C[0],
+    value: C[1],
     style: d,
-    lastElement: C === A,
+    lastElement: R === A,
     level: w,
     shouldExpandNode: m,
     clickToExpandNode: p
@@ -4956,7 +4975,7 @@ const ViewData = ({ data: r, fullView: n }) => {
       }
     )
   ] });
-}, UnsplashImages = React__default.lazy(() => import("./UnsplashImages-ycaFnevC.js")), UploadImages = React__default.lazy(() => import("./UploadImages-SBOaVL2H.js")), ImagesPanel = ({
+}, UnsplashImages = React__default.lazy(() => import("./UnsplashImages-SUnc-2ZG.js")), UploadImages = React__default.lazy(() => import("./UploadImages-iewW_N13.js")), ImagesPanel = ({
   isModalView: r = !1,
   onSelect: n = () => {
   }
@@ -5431,35 +5450,35 @@ const AskAIStyles = ({ blockId: r }) => {
   keys: ["name"]
 });
 function ManualClasses() {
-  var R;
-  const { t: r } = useTranslation(), [n] = useSelectedStylingBlocks(), o = useSelectedBlock(), a = useAddClassesToBlocks(), i = useRemoveClassesFromBlocks(), [l] = useSelectedBlockIds(), c = useBuilderProp("askAiCallBack", null), [u, d] = useState$1(""), { toast: m } = useToast(), p = (R = first(n)) == null ? void 0 : R.prop, g = reject((get$1(o, p, "").replace(STYLES_KEY, "").split(",").pop() || "").split(" "), isEmpty), h = () => {
-    const C = u.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
-    a(l, C, !0), d("");
-  }, [b, x] = useState$1([]), v = ({ value: C }) => {
-    const I = C.trim().toLowerCase(), j = I.match(/.+:/g);
+  var C;
+  const { t: r } = useTranslation(), [n] = useSelectedStylingBlocks(), o = useSelectedBlock(), a = useAddClassesToBlocks(), i = useRemoveClassesFromBlocks(), [l] = useSelectedBlockIds(), c = useBuilderProp("askAiCallBack", null), [u, d] = useState$1(""), { toast: m } = useToast(), p = (C = first(n)) == null ? void 0 : C.prop, g = reject((get$1(o, p, "").replace(STYLES_KEY, "").split(",").pop() || "").split(" "), isEmpty), h = () => {
+    const R = u.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
+    a(l, R, !0), d("");
+  }, [b, x] = useState$1([]), v = ({ value: R }) => {
+    const I = R.trim().toLowerCase(), j = I.match(/.+:/g);
     let k = [];
     if (j && j.length > 0) {
       const [O] = j, T = I.replace(O, "");
-      k = fuse.search(T).map((V) => ({
-        ...V,
-        item: { ...V.item, name: O + V.item.name }
+      k = fuse.search(T).map((L) => ({
+        ...L,
+        item: { ...L.item, name: O + L.item.name }
       }));
     } else
       k = fuse.search(I);
     return x(map(k, "item"));
   }, S = () => {
     x([]);
-  }, E = (C) => C.name, w = (C) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "rounded-md p-1", children: C.name }), A = {
+  }, E = (R) => R.name, w = (R) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "rounded-md p-1", children: R.name }), A = {
     autoComplete: "off",
     autoCorrect: "off",
     autoCapitalize: "off",
     spellCheck: !1,
     placeholder: r("enter_classes_separated_by_space"),
     value: u,
-    onKeyDown: (C) => {
-      C.key === "Enter" && u.trim() !== "" && h();
+    onKeyDown: (R) => {
+      R.key === "Enter" && u.trim() !== "" && h();
     },
-    onChange: (C, { newValue: I }) => d(I),
+    onChange: (R, { newValue: I }) => d(I),
     className: "w-full rounded-md text-xs px-2 hover:outline-0 bg-background border-border py-1"
   }, P = () => {
     if (navigator.clipboard === void 0) {
@@ -5529,22 +5548,22 @@ function ManualClasses() {
           )
         ] }),
         /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex w-full flex-wrap gap-2 overflow-x-hidden", children: React.Children.toArray(
-          g.map((C) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          g.map((R) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
             "div",
             {
               className: "group relative flex max-w-[260px] cursor-default items-center gap-x-1 truncate rounded border border-gray-300 bg-gray-200 p-px px-1.5 text-[11px] text-gray-600 hover:border-gray-300",
               children: [
-                C,
+                R,
                 /* @__PURE__ */ jsxRuntimeExports.jsx(
                   Cross2Icon,
                   {
-                    onClick: () => i(l, [C]),
+                    onClick: () => i(l, [R]),
                     className: "invisible absolute right-1 rounded-full bg-red-400 hover:text-white group-hover:visible group-hover:cursor-pointer"
                   }
                 )
               ]
             },
-            C
+            R
           ))
         ) })
       ]
@@ -6203,7 +6222,7 @@ const RangeChoices = ({ property: r, onChange: n }) => {
     }
     h(O), i(O === "class" || isEmpty(k) ? "" : k);
   }, [l, d, m]);
-  const R = useThrottledCallback((k) => c(k), [c], THROTTLE_TIME), C = useThrottledCallback((k) => c(k, !1), [c], THROTTLE_TIME), I = useCallback$1(
+  const C = useThrottledCallback((k) => c(k), [c], THROTTLE_TIME), R = useThrottledCallback((k) => c(k, !1), [c], THROTTLE_TIME), I = useCallback$1(
     (k = !1) => {
       const O = getUserInputValues(`${a}`, m);
       if (get$1(O, "error", !1)) {
@@ -6212,15 +6231,15 @@ const RangeChoices = ({ property: r, onChange: n }) => {
       }
       const T = get$1(O, "unit") !== "" ? get$1(O, "unit") : g;
       if (T === "auto" || T === "none") {
-        R(`${u}${T}`);
+        C(`${u}${T}`);
         return;
       }
       if (get$1(O, "value") === "")
         return;
-      const V = `${get$1(O, "value", "").startsWith("-") ? "-" : ""}${u}[${get$1(O, "value", "").replace("-", "")}${T === "-" ? "" : T}]`;
-      k ? C(V) : R(V);
+      const L = `${get$1(O, "value", "").startsWith("-") ? "-" : ""}${u}[${get$1(O, "value", "").replace("-", "")}${T === "-" ? "" : T}]`;
+      k ? R(L) : C(L);
     },
-    [R, C, a, g, u, m]
+    [C, R, a, g, u, m]
   ), j = useCallback$1(
     (k) => {
       const O = getUserInputValues(`${a}`, m);
@@ -6229,15 +6248,15 @@ const RangeChoices = ({ property: r, onChange: n }) => {
         return;
       }
       if (k === "auto" || k === "none") {
-        R(`${u}${k}`);
+        C(`${u}${k}`);
         return;
       }
       if (get$1(O, "value") === "")
         return;
-      const T = get$1(O, "unit") !== "" ? get$1(O, "unit") : k, V = `${get$1(O, "value", "").startsWith("-") ? "-" : ""}${u}[${get$1(O, "value", "").replace("-", "")}${T === "-" ? "" : T}]`;
-      R(V);
+      const T = get$1(O, "unit") !== "" ? get$1(O, "unit") : k, L = `${get$1(O, "value", "").startsWith("-") ? "-" : ""}${u}[${get$1(O, "value", "").replace("-", "")}${T === "-" ? "" : T}]`;
+      C(L);
     },
-    [R, a, u, m]
+    [C, a, u, m]
   );
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex w-full flex-col", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center justify-start", children: g === "class" ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("input", { className: "w-20 rounded py-1", readOnly: !0, value: l }),
@@ -6261,8 +6280,8 @@ const RangeChoices = ({ property: r, onChange: n }) => {
             const O = parseInt$1(k.target.value);
             let T = isNaN$1(O) ? 0 : O;
             k.keyCode === 38 && (T += 1), k.keyCode === 40 && (T -= 1);
-            const M = `${T}`, D = `${M.startsWith("-") ? "-" : ""}${u}[${M.replace("-", "")}${g === "-" ? "" : g}]`;
-            C(D);
+            const B = `${T}`, D = `${B.startsWith("-") ? "-" : ""}${u}[${B.replace("-", "")}${g === "-" ? "" : g}]`;
+            R(D);
           },
           onKeyUp: (k) => {
             A && (k.preventDefault(), P(!1));
@@ -6314,15 +6333,15 @@ const RangeChoices = ({ property: r, onChange: n }) => {
         onDragEnd: (k) => {
           if (S(() => ""), w(!1), isEmpty(k))
             return;
-          const O = `${k}`, M = `${O.startsWith("-") ? "-" : ""}${u}[${O.replace("-", "")}${g === "-" ? "" : g}]`;
-          R(M);
+          const O = `${k}`, B = `${O.startsWith("-") ? "-" : ""}${u}[${O.replace("-", "")}${g === "-" ? "" : g}]`;
+          C(B);
         },
         onDrag: (k) => {
           if (isEmpty(k))
             return;
           S(k);
-          const O = `${k}`, M = `${O.startsWith("-") ? "-" : ""}${u}[${O.replace("-", "")}${g === "-" ? "" : g}]`;
-          C(M);
+          const O = `${k}`, B = `${O.startsWith("-") ? "-" : ""}${u}[${O.replace("-", "")}${g === "-" ? "" : g}]`;
+          R(B);
         },
         currentValue: a,
         unit: g,
@@ -6420,8 +6439,8 @@ const RangeChoices = ({ property: r, onChange: n }) => {
 }, getBreakpoint = (r) => `${r.toUpperCase()} ${BREAKPOINTS[r] ? `(${BREAKPOINTS[r]} & up)` : ""}`, BlockStyle = (r) => {
   const { t: n } = useTranslation(), { type: o = "icons", label: a, property: i, onEmitChange: l = () => {
   }, units: c, negative: u = !1 } = r, [d] = useDarkMode(), [m] = useStylingState(), [, p] = useCanvasWidth(), g = useCurrentClassByProperty(i), h = useAddClassesToBlocks(), b = useRemoveClassesFromBlocks(), [x] = useSelectedBlockIds(), v = useMemo$1(() => get$1(g, "fullCls", ""), [g]), S = useCallback$1(
-    (C, I = !0) => {
-      const j = { dark: d, mq: p, mod: m, cls: C, property: i, fullCls: "" };
+    (R, I = !0) => {
+      const j = { dark: d, mq: p, mod: m, cls: R, property: i, fullCls: "" };
       (d || m !== "") && (j.mq = "xs");
       const k = generateFullClsName(j);
       h(x, [k], I);
@@ -6434,7 +6453,7 @@ const RangeChoices = ({ property: r, onChange: n }) => {
     l(w, g);
   }, [w, l, g]);
   const [, , A] = useCanvasWidth(), P = useCallback$1(
-    (C) => {
+    (R) => {
       A({
         xs: 400,
         sm: 640,
@@ -6442,12 +6461,12 @@ const RangeChoices = ({ property: r, onChange: n }) => {
         lg: 1024,
         xl: 1420,
         "2xl": 1920
-      }[C]);
+      }[R]);
     },
     [A]
-  ), R = get$1(g, "dark", null) === d && get$1(g, "mod", null) === m && get$1(g, "mq", null) === p;
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(BlockStyleProvider, { canChange: w, canReset: g && R, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "group flex flex-row items-center py-2 first:pt-0 last:pb-0", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "relative w-[70px] truncate text-xs text-foreground", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `text-[11px] ${g && !R ? "text-foreground" : ""}`, children: n(a) }) }),
+  ), C = get$1(g, "dark", null) === d && get$1(g, "mod", null) === m && get$1(g, "mq", null) === p;
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(BlockStyleProvider, { canChange: w, canReset: g && C, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "group flex flex-row items-center py-2 first:pt-0 last:pb-0", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "relative w-[70px] truncate text-xs text-foreground", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `text-[11px] ${g && !C ? "text-foreground" : ""}`, children: n(a) }) }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-row items-center", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "w-[150px]", children: [
         o === "arbitrary" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -6466,7 +6485,7 @@ const RangeChoices = ({ property: r, onChange: n }) => {
         o === "color" && /* @__PURE__ */ jsxRuntimeExports.jsx(ColorChoice, { property: i, onChange: S }),
         o === "dropdown" && /* @__PURE__ */ jsxRuntimeExports.jsx(DropDownChoices, { label: a, property: i, onChange: S })
       ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `w-[30px] cursor-pointer ${v ? "visible" : "invisible"}`, children: R ? /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", onClick: () => E(), title: "Reset", className: "flex px-1.5 text-xs", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CrossCircledIcon, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : w && g ? /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip$1, { delayDuration: 100, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `w-[30px] cursor-pointer ${v ? "visible" : "invisible"}`, children: C ? /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", onClick: () => E(), title: "Reset", className: "flex px-1.5 text-xs", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CrossCircledIcon, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : w && g ? /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip$1, { delayDuration: 100, children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           "button",
           {
@@ -6740,38 +6759,37 @@ function UILibrariesSelect({
 }
 const BlockCard = ({
   block: r,
-  closePopover: n,
-  library: o
+  library: n,
+  parentId: o = void 0
 }) => {
-  const [a, i] = useState$1(!1), l = useBuilderProp("getUILibraryBlock", noop$1), { addCoreBlock: c, addPredefinedBlock: u } = useAddBlock(), [d, m] = useSelectedBlockIds(), [, p] = useHighlightBlockId(), g = get$1(r, "name", get$1(r, "label")), h = useFeature("dnd"), [, b] = useAtom$1(draggedBlockAtom), x = (E) => {
-    const w = has(E, "styles_attrs.data-page-section");
-    return E._type === "Box" && w;
-  }, v = useCallback$1(
-    async (E) => {
-      if (E.stopPropagation(), has(r, "component")) {
-        c(r, first(d)), n();
+  const [a, i] = useState$1(!1), l = useBuilderProp("getUILibraryBlock", noop$1), { addCoreBlock: c, addPredefinedBlock: u } = useAddBlock(), [, d] = useSelectedBlockIds(), [, m] = useHighlightBlockId(), p = get$1(r, "name", get$1(r, "label")), g = useFeature("dnd"), [, h] = useAtom$1(draggedBlockAtom), b = (S) => {
+    const E = has(S, "styles_attrs.data-page-section");
+    return S._type === "Box" && E;
+  }, x = useCallback$1(
+    async (S) => {
+      if (S.stopPropagation(), has(r, "component")) {
+        c(r, o), emitChaiBuilderMsg({ name: CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK });
         return;
       }
       i(!0);
-      const w = await l(o, r);
-      let A = first(d);
-      isEmpty(w) || u(syncBlocksWithDefaults(w), A), n();
+      const E = await l(n, r);
+      isEmpty(E) || u(syncBlocksWithDefaults(E), o), emitChaiBuilderMsg({ name: CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK });
     },
     [r]
-  ), S = async (E) => {
-    const w = await l(o, r);
-    let A = first(d);
-    if (x(first(w)) && (A = null), !isEmpty(w)) {
-      const P = { blocks: w, uiLibrary: !0, parent: A };
-      if (E.dataTransfer.setData("text/plain", JSON.stringify(P)), r.preview) {
-        const R = new Image();
-        R.src = r.preview, R.onload = () => {
-          E.dataTransfer.setDragImage(R, 0, 0);
+  ), v = async (S) => {
+    const E = await l(n, r);
+    let w = o;
+    if (b(first(E)) && (w = null), !isEmpty(E)) {
+      const A = { blocks: E, uiLibrary: !0, parent: w };
+      if (S.dataTransfer.setData("text/plain", JSON.stringify(A)), r.preview) {
+        const P = new Image();
+        P.src = r.preview, P.onload = () => {
+          S.dataTransfer.setDragImage(P, 0, 0);
         };
       } else
-        E.dataTransfer.setDragImage(new Image(), 0, 0);
-      b(P), setTimeout(() => {
-        m([]), p(null), n();
+        S.dataTransfer.setDragImage(new Image(), 0, 0);
+      h(A), setTimeout(() => {
+        d([]), m(null), emitChaiBuilderMsg({ name: CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK });
       }, 200);
     }
   };
@@ -6780,9 +6798,9 @@ const BlockCard = ({
       "div",
       {
         onClick: a ? () => {
-        } : v,
-        draggable: h ? "true" : "false",
-        onDragStart: S,
+        } : x,
+        draggable: g ? "true" : "false",
+        onDragStart: v,
         className: clsx(
           "relative mt-2 cursor-pointer overflow-hidden rounded-md border border-gray-300 bg-white duration-200 hover:border-blue-500 hover:shadow-xl"
         ),
@@ -6791,11 +6809,11 @@ const BlockCard = ({
             /* @__PURE__ */ jsxRuntimeExports.jsx(Loader$1, { className: "animate-spin", size: 15, color: "white" }),
             /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "pl-2 text-sm text-white", children: "Adding..." })
           ] }),
-          r.preview ? /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: r.preview, className: "min-h-[45px] w-full rounded-md", alt: g }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex h-20 items-center justify-center rounded-md border border-border border-gray-300 bg-gray-200", children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "max-w-xs text-center text-sm text-gray-700", children: g }) })
+          r.preview ? /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: r.preview, className: "min-h-[45px] w-full rounded-md", alt: p }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex h-20 items-center justify-center rounded-md border border-border border-gray-300 bg-gray-200", children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "max-w-xs text-center text-sm text-gray-700", children: p }) })
         ]
       }
     ) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: g }) })
+    /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: p }) })
   ] });
 }, libraryBlocksAtom = atom$1(
   {}
@@ -6810,34 +6828,34 @@ const BlockCard = ({
       c.current = "idle", o((d) => ({ ...d, [r == null ? void 0 : r.uuid]: { loading: "complete", blocks: u || [] } }));
     })();
   }, [r, i, l, c]), { data: i || [], isLoading: l === "loading" };
-}, UILibrarySection = () => {
-  const [r, n] = useAtom$1(selectedLibraryAtom), o = useBuilderProp("uiLibraries", []), a = useChaiBlocks(), i = values(a).filter((w) => w.category === "custom"), l = o.find((w) => w.uuid === r) || first(o), { data: c, isLoading: u } = useLibraryBlocks(l), d = groupBy([...c, ...i], "group"), [m, p] = useState$1("Hero"), g = get$1(d, m, []), h = useRef$1(null), [, b] = useAddBlocksModal(), { t: x } = useTranslation(), v = (w) => {
-    h.current && (clearTimeout(h.current), h.current = null), h.current = setTimeout(() => {
-      h.current && p(w);
+}, UILibrarySection = ({ parentId: r }) => {
+  const [n, o] = useAtom$1(selectedLibraryAtom), a = useBuilderProp("uiLibraries", []), i = useChaiBlocks(), l = values(i).filter((w) => w.category === "custom"), c = a.find((w) => w.uuid === n) || first(a), { data: u, isLoading: d } = useLibraryBlocks(c), m = groupBy([...u, ...l], "group"), [p, g] = useState$1("Hero"), h = get$1(m, p, []), b = useRef$1(null), { t: x } = useTranslation(), v = (w) => {
+    b.current && (clearTimeout(b.current), b.current = null), b.current = setTimeout(() => {
+      b.current && g(w);
     }, 300);
   };
-  if (u)
+  if (d)
     return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-4 grid h-full w-full grid-cols-12 gap-2", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "col-span-3 h-full" }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "col-span-9 h-full" })
     ] });
-  const S = filter(g, (w, A) => A % 2 === 0), E = filter(g, (w, A) => A % 2 === 1);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "relative flex h-full max-h-full flex-col overflow-hidden bg-background", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex h-full pt-2", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex h-full w-52 flex-col gap-1 px-1", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(UILibrariesSelect, { library: l == null ? void 0 : l.uuid, setLibrary: n, uiLibraries: o }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-2 flex flex-col", children: [
+  const S = filter(h, (w, A) => A % 2 === 0), E = filter(h, (w, A) => A % 2 === 1);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "relative mt-2 flex h-full max-h-full flex-col overflow-hidden bg-background", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex h-full pt-2", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex h-full w-60 flex-col gap-1 px-1 pr-2", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(UILibrariesSelect, { library: c == null ? void 0 : c.uuid, setLibrary: o, uiLibraries: a }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-2 flex h-full max-h-full flex-col", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs font-bold text-gray-500", children: x("groups") }),
         /* @__PURE__ */ jsxRuntimeExports.jsx("hr", { className: "mt-1" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(ScrollArea$1, { className: "mt-2 h-full flex-1 overflow-y-auto", children: React__default.Children.toArray(
-          map(d, (w, A) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        /* @__PURE__ */ jsxRuntimeExports.jsx(ScrollArea$1, { className: "no-scrollbar mt-2 h-full max-h-full overflow-y-auto", children: React__default.Children.toArray(
+          map(m, (w, A) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
             "div",
             {
               onMouseEnter: () => v(A),
-              onMouseLeave: () => clearTimeout(h.current),
-              onClick: () => p(A),
+              onMouseLeave: () => clearTimeout(b.current),
+              onClick: () => g(A),
               className: cn(
                 "flex w-full cursor-pointer items-center justify-between rounded-md p-2 text-sm transition-all ease-in-out hover:bg-gray-200",
-                A === m ? "bg-blue-500 text-white hover:bg-blue-600" : ""
+                A === p ? "bg-blue-500 text-white hover:bg-blue-600" : ""
               ),
               children: [
                 /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: capitalize(x(A.toLowerCase())) }),
@@ -6852,15 +6870,15 @@ const BlockCard = ({
     /* @__PURE__ */ jsxRuntimeExports.jsxs(
       ScrollArea$1,
       {
-        onMouseEnter: () => h.current ? clearTimeout(h.current) : null,
+        onMouseEnter: () => b.current ? clearTimeout(b.current) : null,
         className: "z-10 -mt-2 flex h-full max-h-full w-full flex-col gap-2 border-l border-gray-300 transition-all ease-linear",
         children: [
           /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-2 gap-2 px-2", children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col gap-1", children: React__default.Children.toArray(
-              S.map((w) => /* @__PURE__ */ jsxRuntimeExports.jsx(BlockCard, { block: w, library: l, closePopover: () => b("") }))
+              S.map((w) => /* @__PURE__ */ jsxRuntimeExports.jsx(BlockCard, { parentId: r, block: w, library: c }))
             ) }),
             /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col gap-1", children: React__default.Children.toArray(
-              E.map((w) => /* @__PURE__ */ jsxRuntimeExports.jsx(BlockCard, { block: w, library: l, closePopover: () => b("") }))
+              E.map((w) => /* @__PURE__ */ jsxRuntimeExports.jsx(BlockCard, { parentId: r, block: w, library: c }))
             ) })
           ] }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
@@ -6870,7 +6888,7 @@ const BlockCard = ({
       }
     )
   ] }) }) });
-}, UILibrariesPanel = () => /* @__PURE__ */ jsxRuntimeExports.jsx(UILibrarySection, {}), UILibraries = UILibrariesPanel, add_block = "Add block", enter_paste_tailwind_html = "(Enter or paste TailwindCSS HTML snippet)", click_to_add_block = "(Click to add block to page)", core = "Core", custom_blocks = "Custom Blocks", ui_library = "UI Library", html_snippet_description = "Use HTML snippets from Tailwind CSS component libraries etc. or just copy paste your own HTML code.", tailwind_html_snippet = "Tailwind HTML snippet:", enter_code_snippet = "Enter your code snippet here...", import_html = "Import HTML", note_imported_html = "NOTE: Imported html will be added to the currently selected block. If no block is selected, the html will be added to the page.", dark_mode = "Dark mode", tree_view_no_blocks = "This page has no blocks. Add a block by clicking the + button", canvas_empty = "This page is empty", no_block_selected_for_styling = "Please select a block to edit settings or styles", no_block_selected_for_ask_ai = "Please select a block to ask AI", no_styling_block_selected = "Please select a styling block", drop_here_message = "Drop your block here", use_setting = "Use setting", mobile_xs_title = "Mobile (XS)", mobile_xs_content = "Styles set here are applied to all screen unless edited at higher breakpoint", mobile_sm_title = "Mobile landscape (SM)", mobile_sm_content = "Styles set here are applied at 640px and up unless edited at higher breakpoint", tablet_md_title = "Tablet (MD)", tablet_md_content = "Styles set here are applied at 768px and up", tablet_lg_title = "Tablet Landscape (LG)", tablet_lg_content = "Styles set here are applied at 1024px and up unless edited at higher breakpoint", desktop_xl_title = "Desktop (XL)", desktop_xl_content = "Styles set here are applied at 1280px and up unless edited at higher breakpoint", large_desktop_2xl_title = "Large Desktop (2XL)", large_desktop_2xl_content = "Styles set here are applied at 1536px and up", Breakpoints$1 = "Breakpoints", clear = "Clear", clear_canvas_title = "Clear whole canvas?", clear_canvas_description = "Are you sure you want to clear the whole canvas?", cancel = "Cancel", yes = "Yes", preview = "Preview", settings = "Settings", styling = "Styling", data_provider = "Data Provider", remove_provider_confirmation = "Are you sure you want to remove <span class='text-blue-500'>{name}</span> provider?", remove_provider_warning = "Your data provider will be removed from this page and all added data binding will be not visible on blocks.", remove = "Remove", no_data_providers = "You have no data providers registered. Please add a data provider to your project.", learn_more = "Learn more", add_data_providers = "Add data providers:", select_provider = "Select a provider", choose = "Choose", page_data_providers = "Page data providers:", view_data = "View Data", mark_as_global = "Mark as Global", global_block_note = "Note: Global blocks are single instances. Editing global blocks will be reflected on all pages using these blocks.", global_block_indicator = "Global blocks are indicated with", global_block_category = "Global blocks are available under 'Global' category", enter_global_block_name = "Enter global block name", eg_header_footer = "Eg: Header, Footer", blocks_selected = "{{length}} blocks selected.", cut = "Cut", copy$1 = "Copy", clear_selection = "Clear Selection", dev_mode_message = "This is dev mode. Visit", to_see_page_preview = "to see page preview", theme_config = {
+}, UILibrariesPanel = ({ parentId: r }) => /* @__PURE__ */ jsxRuntimeExports.jsx(UILibrarySection, { parentId: r }), UILibraries = UILibrariesPanel, add_block = "Add block", enter_paste_tailwind_html = "(Enter or paste TailwindCSS HTML snippet)", click_to_add_block = "(Click to add block to page)", core = "Core", custom_blocks = "Custom Blocks", ui_library = "UI Library", html_snippet_description = "Use HTML snippets from Tailwind CSS component libraries etc. or just copy paste your own HTML code.", tailwind_html_snippet = "Tailwind HTML snippet:", enter_code_snippet = "Enter your code snippet here...", import_html = "Import HTML", note_imported_html = "NOTE: Imported html will be added to the currently selected block. If no block is selected, the html will be added to the page.", dark_mode = "Dark mode", tree_view_no_blocks = "This page has no blocks. Add a block by clicking the + button", canvas_empty = "This page is empty", no_block_selected_for_styling = "Please select a block to edit settings or styles", no_block_selected_for_ask_ai = "Please select a block to ask AI", no_styling_block_selected = "Please select a styling block", drop_here_message = "Drop your block here", use_setting = "Use setting", mobile_xs_title = "Mobile (XS)", mobile_xs_content = "Styles set here are applied to all screen unless edited at higher breakpoint", mobile_sm_title = "Mobile landscape (SM)", mobile_sm_content = "Styles set here are applied at 640px and up unless edited at higher breakpoint", tablet_md_title = "Tablet (MD)", tablet_md_content = "Styles set here are applied at 768px and up", tablet_lg_title = "Tablet Landscape (LG)", tablet_lg_content = "Styles set here are applied at 1024px and up unless edited at higher breakpoint", desktop_xl_title = "Desktop (XL)", desktop_xl_content = "Styles set here are applied at 1280px and up unless edited at higher breakpoint", large_desktop_2xl_title = "Large Desktop (2XL)", large_desktop_2xl_content = "Styles set here are applied at 1536px and up", Breakpoints$1 = "Breakpoints", clear = "Clear", clear_canvas_title = "Clear whole canvas?", clear_canvas_description = "Are you sure you want to clear the whole canvas?", cancel = "Cancel", yes = "Yes", preview = "Preview", settings = "Settings", styling = "Styling", data_provider = "Data Provider", remove_provider_confirmation = "Are you sure you want to remove <span class='text-blue-500'>{name}</span> provider?", remove_provider_warning = "Your data provider will be removed from this page and all added data binding will be not visible on blocks.", remove = "Remove", no_data_providers = "You have no data providers registered. Please add a data provider to your project.", learn_more = "Learn more", add_data_providers = "Add data providers:", select_provider = "Select a provider", choose = "Choose", page_data_providers = "Page data providers:", view_data = "View Data", mark_as_global = "Mark as Global", global_block_note = "Note: Global blocks are single instances. Editing global blocks will be reflected on all pages using these blocks.", global_block_indicator = "Global blocks are indicated with", global_block_category = "Global blocks are available under 'Global' category", enter_global_block_name = "Enter global block name", eg_header_footer = "Eg: Header, Footer", blocks_selected = "{{length}} blocks selected.", cut = "Cut", copy$1 = "Copy", clear_selection = "Clear Selection", dev_mode_message = "This is dev mode. Visit", to_see_page_preview = "to see page preview", theme_config = {
   heading_font: "Heading Font",
   body_font: "Body Font",
   rounded_corner: "Rounded Corners",
@@ -7304,49 +7322,50 @@ i18n.use(initReactI18next).init({
     // react already safes from xss => https://www.i18next.com/translation-function/interpolation#unescape
   }
 });
-const CoreBlock = ({ block: r, disabled: n }) => {
-  const [, o] = useAtom$1(draggedBlockAtom), { type: a, icon: i, label: l } = r, { addCoreBlock: c, addPredefinedBlock: u } = useAddBlock(), [, d] = useSelectedBlockIds(), [, m] = useHighlightBlockId(), [, p] = useAtom$1(activePanelAtom$1), [g, h] = useAddBlocksModal(), b = () => {
-    if (has(r, "blocks")) {
-      const S = isFunction$2(r.blocks) ? r.blocks() : r.blocks;
-      u(syncBlocksWithDefaults(S), g === ROOT_TEMP_KEY ? null : g);
+const CoreBlock = ({ block: r, disabled: n, parentId: o }) => {
+  const [, a] = useAtom$1(draggedBlockAtom), { type: i, icon: l, label: c } = r, { addCoreBlock: u, addPredefinedBlock: d } = useAddBlock(), [, m] = useSelectedBlockIds(), [, p] = useHighlightBlockId(), g = () => {
+    if (console.log("addBlockToPage", r, o), has(r, "blocks")) {
+      const x = isFunction$2(r.blocks) ? r.blocks() : r.blocks;
+      d(syncBlocksWithDefaults(x), o || null);
     } else
-      c(r, g === ROOT_TEMP_KEY ? null : g);
-    h(""), p(OUTLINE_KEY);
-  }, x = useFeature("dnd"), { t: v } = useTranslation();
+      u(r, o || null);
+    emitChaiBuilderMsg({ name: CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK });
+  }, h = useFeature("dnd"), { t: b } = useTranslation();
   return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip$1, { children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "button",
       {
         disabled: n,
-        onClick: b,
+        onClick: g,
         type: "button",
-        onDragStart: (S) => {
-          S.dataTransfer.setData("text/plain", JSON.stringify(omit(r, ["component", "icon"]))), S.dataTransfer.setDragImage(new Image(), 0, 0), o(omit(r, ["component", "icon"])), setTimeout(() => {
-            d([]), m(null), p(OUTLINE_KEY);
+        onDragStart: (x) => {
+          x.dataTransfer.setData("text/plain", JSON.stringify(omit(r, ["component", "icon"]))), x.dataTransfer.setDragImage(new Image(), 0, 0), a(omit(r, ["component", "icon"])), setTimeout(() => {
+            m([]), p(null);
           }, 200);
         },
-        draggable: x ? "true" : "false",
+        draggable: h ? "true" : "false",
         className: "cursor-pointer space-y-2 rounded-lg border border-border p-3 text-center hover:bg-slate-300/50 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-gray-400",
         children: [
-          createElement$1(i || BoxIcon, { className: "w-4 h-4 mx-auto" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "truncate text-xs", children: capitalize(v(l || a)) })
+          createElement$1(l || BoxIcon, { className: "w-4 h-4 mx-auto" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "truncate text-xs", children: capitalize(b(c || i)) })
         ]
       }
     ) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: v(l || a) }) })
+    /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: b(c || i) }) })
   ] }) });
-}, CORE_GROUPS = ["basic", "typography", "media", "layout", "form", "advanced", "other"], ChaiBuilderBlocks = ({ groups: r, blocks: n }) => {
+}, CORE_GROUPS = ["basic", "typography", "media", "layout", "form", "advanced", "other"], ChaiBuilderBlocks = ({ groups: r, blocks: n, parentId: o }) => {
   var c;
-  const { t: o } = useTranslation(), [a] = useBlocksStore(), [i] = useAddBlocksModal(), l = (c = find(a, (u) => u._id === i)) == null ? void 0 : c._type;
+  const { t: a } = useTranslation(), [i] = useBlocksStore(), l = (c = find(i, (u) => u._id === o)) == null ? void 0 : c._type;
   return React__default.Children.toArray(
     map(
       sortBy(r, (u) => CORE_GROUPS.indexOf(u) === -1 ? 99 : CORE_GROUPS.indexOf(u)),
       (u) => reject(filter(values(n), { group: u }), { hidden: !0 }).length ? /* @__PURE__ */ jsxRuntimeExports.jsx(Accordion, { type: "single", value: u, collapsible: !0, className: "w-full", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(AccordionItem, { value: u, children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(AccordionTrigger, { className: "rounded-md bg-gray-100 px-4 py-2 capitalize hover:no-underline", children: capitalize(o(u.toLowerCase())) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(AccordionTrigger, { className: "rounded-md bg-gray-100 px-4 py-2 capitalize hover:no-underline", children: capitalize(a(u.toLowerCase())) }),
         /* @__PURE__ */ jsxRuntimeExports.jsx(AccordionContent, { className: "mx-auto max-w-xl p-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-4 gap-2", children: React__default.Children.toArray(
           reject(filter(values(n), { group: u }), { hidden: !0 }).map((d) => /* @__PURE__ */ jsxRuntimeExports.jsx(
             CoreBlock,
             {
+              parentId: o,
               block: d,
               disabled: !canAcceptChildBlock(l, d.type) || !canBeNestedInside(l, d.type)
             }
@@ -7355,33 +7374,37 @@ const CoreBlock = ({ block: r, disabled: n }) => {
       ] }) }) : null
     )
   );
-}, AddBlocksPanel = ({ className: r, showHeading: n = !0 }) => {
-  const { t: o } = useTranslation(), [a, i] = useState$1("library"), [l, c] = useState$1("basic"), u = useChaiBlocks(), [, d] = useAtom$1(showPredefinedBlockCategoryAtom), m = useBuilderProp("importHTMLSupport", !0), p = useBuilderProp("filterChaiBlock", () => !0), g = filter(u, p), h = groupBy(g, "category"), b = uniq(map(h.core, "group"));
+}, AddBlocksPanel = ({
+  className: r,
+  showHeading: n = !0,
+  parentId: o = void 0
+}) => {
+  const { t: a } = useTranslation(), [i, l] = useState$1("library"), [c, u] = useState$1("basic"), d = useChaiBlocks(), [, m] = useAtom$1(showPredefinedBlockCategoryAtom), p = useBuilderProp("importHTMLSupport", !0), g = useBuilderProp("filterChaiBlock", () => !0), h = filter(d, g), b = groupBy(h, "category"), x = uniq(map(b.core, "group"));
   return useEffect$1(() => {
-    !includes(b, l) && !isEmpty(b) && !isEmpty(l) && c(first(b));
-  }, [b, l]), /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cn("flex h-full w-full flex-col overflow-hidden", r), children: [
+    !includes(x, c) && !isEmpty(x) && !isEmpty(c) && u(first(x));
+  }, [x, c]), /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cn("flex h-full w-full flex-col overflow-hidden", r), children: [
     n ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-2 flex flex-col justify-between rounded-md bg-background/30 p-1", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("h1", { className: "flex flex-col items-baseline px-1 text-xl font-semibold xl:flex-col", children: o("add_block") }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "p-0 text-xs font-light leading-3 opacity-80 xl:pl-1", children: o(a === "html" ? "enter_paste_tailwind_html" : "click_to_add_block") })
+      /* @__PURE__ */ jsxRuntimeExports.jsx("h1", { className: "flex flex-col items-baseline px-1 text-xl font-semibold xl:flex-col", children: a("add_block") }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "p-0 text-xs font-light leading-3 opacity-80 xl:pl-1", children: a(i === "html" ? "enter_paste_tailwind_html" : "click_to_add_block") })
     ] }) : null,
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       Tabs$1,
       {
-        onValueChange: (x) => {
-          d(""), i(x);
+        onValueChange: (v) => {
+          m(""), l(v);
         },
-        value: a,
-        className: cn("h-max", m ? "" : "hidden"),
-        children: /* @__PURE__ */ jsxRuntimeExports.jsxs(TabsList$1, { className: "grid w-full " + (m ? "grid-cols-3" : "grid-cols-1"), children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "library", children: o("library") }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "core", children: o("blocks") }),
-          m ? /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "html", children: o("import") }) : null
+        value: i,
+        className: cn("h-max", p ? "" : "hidden"),
+        children: /* @__PURE__ */ jsxRuntimeExports.jsxs(TabsList$1, { className: "grid w-full " + (p ? "grid-cols-3" : "grid-cols-1"), children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "library", children: a("library") }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "core", children: a("blocks") }),
+          p ? /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "html", children: a("import") }) : null
         ] })
       }
     ),
-    a === "core" && /* @__PURE__ */ jsxRuntimeExports.jsx(ScrollArea$1, { className: "-mx-1.5 h-[calc(100vh-156px)] overflow-y-auto", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-2 w-full", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChaiBuilderBlocks, { groups: b, blocks: h.core }) }) }),
-    a === "library" && /* @__PURE__ */ jsxRuntimeExports.jsx(UILibraries, {}),
-    a === "html" && m ? /* @__PURE__ */ jsxRuntimeExports.jsx(ImportHTML$1, {}) : null
+    i === "core" && /* @__PURE__ */ jsxRuntimeExports.jsx(ScrollArea$1, { className: "-mx-1.5 h-[calc(100vh-156px)] overflow-y-auto", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-2 w-full", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChaiBuilderBlocks, { parentId: o, groups: x, blocks: b.core }) }) }),
+    i === "library" && /* @__PURE__ */ jsxRuntimeExports.jsx(UILibraries, { parentId: o }),
+    i === "html" && p ? /* @__PURE__ */ jsxRuntimeExports.jsx(ImportHTML$1, { parentId: o }) : null
   ] });
 }, AddBlocksPanel$1 = AddBlocksPanel;
 function FaCheck(r) {
@@ -7668,8 +7691,8 @@ const AIUserPrompt = ({ blockId: r }) => {
       o(P), i(a), c(""), d(""), h("");
     }
   }, S = (P) => {
-    const R = a.filter((C, I) => I !== P);
-    o(R), i(R);
+    const C = a.filter((R, I) => I !== P);
+    o(C), i(C);
   }, E = (P) => {
     p(P), c(a[P].key), d(a[P].value);
   }, w = () => {
@@ -7736,22 +7759,22 @@ const AIUserPrompt = ({ blockId: r }) => {
         ]
       }
     ),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-4 space-y-1 overflow-y-auto", children: a.map((P, R) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between rounded bg-muted p-1.5 text-sm", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-4 space-y-1 overflow-y-auto", children: a.map((P, C) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between rounded bg-muted p-1.5 text-sm", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mr-2 flex flex-col", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "truncate font-semibold", children: P.key }),
         /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-wrap max-w-[200px] text-muted-foreground", children: P.value.toString() })
       ] }),
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-shrink-0", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs(Button$1, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => E(R), children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(Button$1, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => E(C), children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(Edit2, { className: "h-3 w-3" }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sr-only", children: "Edit attribute" })
         ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs(Button$1, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => S(R), children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(Button$1, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => S(C), children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "h-3 w-3" }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sr-only", children: "Remove attribute" })
         ] })
       ] })
-    ] }, R)) })
+    ] }, C)) })
   ] });
 }), BlockAttributesEditor = React.memo(() => {
   const r = useSelectedBlock(), [n, o] = useState$1([]), [a] = useSelectedStylingBlocks(), i = useUpdateBlocksPropsRealtime(), l = useUpdateBlocksProps(), c = `${get$1(a, "0.prop")}_attrs`;
@@ -7830,15 +7853,15 @@ function useAtomsSnapshot({
         A && "v" in A && h.set(w, A.v);
         const P = (E = o.dev_get_mounted) == null ? void 0 : E.call(o, w);
         if (P) {
-          let R = P.t;
-          r || (R = new Set(
-            Array.from(R.values()).filter(
+          let C = P.t;
+          r || (C = new Set(
+            Array.from(C.values()).filter(
               /* NOTE: This just removes private atoms from the dependents list,
                 instead of hiding them from the dependency chain and showing
                 the nested dependents of the private atoms. */
-              (C) => !C.debugPrivate
+              (R) => !R.debugPrivate
             )
-          )), b.set(w, R);
+          )), b.set(w, C);
         }
       }
       if (isEqualAtomsValues(u, h) && isEqualAtomsDependents(d, b))
@@ -8053,7 +8076,7 @@ function compile(r) {
   return dealloc(parse("", null, null, null, [""], r = alloc(r), 0, [0], r));
 }
 function parse(r, n, o, a, i, l, c, u, d) {
-  for (var m = 0, p = 0, g = c, h = 0, b = 0, x = 0, v = 1, S = 1, E = 1, w = 0, A = "", P = i, R = l, C = a, I = A; S; )
+  for (var m = 0, p = 0, g = c, h = 0, b = 0, x = 0, v = 1, S = 1, E = 1, w = 0, A = "", P = i, C = l, R = a, I = A; S; )
     switch (x = w, w = next()) {
       case 40:
         if (x != 108 && charat(I, g - 1) == 58) {
@@ -8099,19 +8122,19 @@ function parse(r, n, o, a, i, l, c, u, d) {
           case 59:
             I += ";";
           default:
-            if (append(C = ruleset(I, n, o, m, p, i, u, A, P = [], R = [], g), l), w === 123)
+            if (append(R = ruleset(I, n, o, m, p, i, u, A, P = [], C = [], g), l), w === 123)
               if (p === 0)
-                parse(I, n, C, C, P, l, g, u, R);
+                parse(I, n, R, R, P, l, g, u, C);
               else
                 switch (h === 99 && charat(I, 3) === 110 ? 100 : h) {
                   case 100:
                   case 108:
                   case 109:
                   case 115:
-                    parse(r, C, C, a && append(ruleset(r, C, C, 0, 0, i, u, A, i, P = [], g), R), i, R, g, u, a ? P : R);
+                    parse(r, R, R, a && append(ruleset(r, R, R, 0, 0, i, u, A, i, P = [], g), C), i, C, g, u, a ? P : C);
                     break;
                   default:
-                    parse(I, C, C, C, [""], R, 0, u, R);
+                    parse(I, R, R, R, [""], C, 0, u, C);
                 }
         }
         m = p = b = 0, v = E = 1, A = I = "", g = c;
@@ -8475,8 +8498,8 @@ If multiple caches share the same key they might "fight" for each other's style
     };
     d = function(S, E, w, A) {
       p = w, process.env.NODE_ENV !== "production" && E.map !== void 0 && (p = {
-        insert: function(R) {
-          w.insert(R + E.map);
+        insert: function(C) {
+          w.insert(C + E.map);
         }
       }), b(S ? S + "{" + E.styles + "}" : E.styles), A && (x.inserted[E.name] = !0);
     };
@@ -8523,65 +8546,65 @@ function requireReactIs_production_min() {
     return reactIs_production_min;
   hasRequiredReactIs_production_min = 1;
   var r = typeof Symbol == "function" && Symbol.for, n = r ? Symbol.for("react.element") : 60103, o = r ? Symbol.for("react.portal") : 60106, a = r ? Symbol.for("react.fragment") : 60107, i = r ? Symbol.for("react.strict_mode") : 60108, l = r ? Symbol.for("react.profiler") : 60114, c = r ? Symbol.for("react.provider") : 60109, u = r ? Symbol.for("react.context") : 60110, d = r ? Symbol.for("react.async_mode") : 60111, m = r ? Symbol.for("react.concurrent_mode") : 60111, p = r ? Symbol.for("react.forward_ref") : 60112, g = r ? Symbol.for("react.suspense") : 60113, h = r ? Symbol.for("react.suspense_list") : 60120, b = r ? Symbol.for("react.memo") : 60115, x = r ? Symbol.for("react.lazy") : 60116, v = r ? Symbol.for("react.block") : 60121, S = r ? Symbol.for("react.fundamental") : 60117, E = r ? Symbol.for("react.responder") : 60118, w = r ? Symbol.for("react.scope") : 60119;
-  function A(R) {
-    if (typeof R == "object" && R !== null) {
-      var C = R.$$typeof;
-      switch (C) {
+  function A(C) {
+    if (typeof C == "object" && C !== null) {
+      var R = C.$$typeof;
+      switch (R) {
         case n:
-          switch (R = R.type, R) {
+          switch (C = C.type, C) {
             case d:
             case m:
             case a:
             case l:
             case i:
             case g:
-              return R;
+              return C;
             default:
-              switch (R = R && R.$$typeof, R) {
+              switch (C = C && C.$$typeof, C) {
                 case u:
                 case p:
                 case x:
                 case b:
                 case c:
-                  return R;
-                default:
                   return C;
+                default:
+                  return R;
               }
           }
         case o:
-          return C;
-      }
-    }
-  }
-  function P(R) {
-    return A(R) === m;
-  }
-  return reactIs_production_min.AsyncMode = d, reactIs_production_min.ConcurrentMode = m, reactIs_production_min.ContextConsumer = u, reactIs_production_min.ContextProvider = c, reactIs_production_min.Element = n, reactIs_production_min.ForwardRef = p, reactIs_production_min.Fragment = a, reactIs_production_min.Lazy = x, reactIs_production_min.Memo = b, reactIs_production_min.Portal = o, reactIs_production_min.Profiler = l, reactIs_production_min.StrictMode = i, reactIs_production_min.Suspense = g, reactIs_production_min.isAsyncMode = function(R) {
-    return P(R) || A(R) === d;
-  }, reactIs_production_min.isConcurrentMode = P, reactIs_production_min.isContextConsumer = function(R) {
-    return A(R) === u;
-  }, reactIs_production_min.isContextProvider = function(R) {
-    return A(R) === c;
-  }, reactIs_production_min.isElement = function(R) {
-    return typeof R == "object" && R !== null && R.$$typeof === n;
-  }, reactIs_production_min.isForwardRef = function(R) {
-    return A(R) === p;
-  }, reactIs_production_min.isFragment = function(R) {
-    return A(R) === a;
-  }, reactIs_production_min.isLazy = function(R) {
-    return A(R) === x;
-  }, reactIs_production_min.isMemo = function(R) {
-    return A(R) === b;
-  }, reactIs_production_min.isPortal = function(R) {
-    return A(R) === o;
-  }, reactIs_production_min.isProfiler = function(R) {
-    return A(R) === l;
-  }, reactIs_production_min.isStrictMode = function(R) {
-    return A(R) === i;
-  }, reactIs_production_min.isSuspense = function(R) {
-    return A(R) === g;
-  }, reactIs_production_min.isValidElementType = function(R) {
-    return typeof R == "string" || typeof R == "function" || R === a || R === m || R === l || R === i || R === g || R === h || typeof R == "object" && R !== null && (R.$$typeof === x || R.$$typeof === b || R.$$typeof === c || R.$$typeof === u || R.$$typeof === p || R.$$typeof === S || R.$$typeof === E || R.$$typeof === w || R.$$typeof === v);
+          return R;
+      }
+    }
+  }
+  function P(C) {
+    return A(C) === m;
+  }
+  return reactIs_production_min.AsyncMode = d, reactIs_production_min.ConcurrentMode = m, reactIs_production_min.ContextConsumer = u, reactIs_production_min.ContextProvider = c, reactIs_production_min.Element = n, reactIs_production_min.ForwardRef = p, reactIs_production_min.Fragment = a, reactIs_production_min.Lazy = x, reactIs_production_min.Memo = b, reactIs_production_min.Portal = o, reactIs_production_min.Profiler = l, reactIs_production_min.StrictMode = i, reactIs_production_min.Suspense = g, reactIs_production_min.isAsyncMode = function(C) {
+    return P(C) || A(C) === d;
+  }, reactIs_production_min.isConcurrentMode = P, reactIs_production_min.isContextConsumer = function(C) {
+    return A(C) === u;
+  }, reactIs_production_min.isContextProvider = function(C) {
+    return A(C) === c;
+  }, reactIs_production_min.isElement = function(C) {
+    return typeof C == "object" && C !== null && C.$$typeof === n;
+  }, reactIs_production_min.isForwardRef = function(C) {
+    return A(C) === p;
+  }, reactIs_production_min.isFragment = function(C) {
+    return A(C) === a;
+  }, reactIs_production_min.isLazy = function(C) {
+    return A(C) === x;
+  }, reactIs_production_min.isMemo = function(C) {
+    return A(C) === b;
+  }, reactIs_production_min.isPortal = function(C) {
+    return A(C) === o;
+  }, reactIs_production_min.isProfiler = function(C) {
+    return A(C) === l;
+  }, reactIs_production_min.isStrictMode = function(C) {
+    return A(C) === i;
+  }, reactIs_production_min.isSuspense = function(C) {
+    return A(C) === g;
+  }, reactIs_production_min.isValidElementType = function(C) {
+    return typeof C == "string" || typeof C == "function" || C === a || C === m || C === l || C === i || C === g || C === h || typeof C == "object" && C !== null && (C.$$typeof === x || C.$$typeof === b || C.$$typeof === c || C.$$typeof === u || C.$$typeof === p || C.$$typeof === S || C.$$typeof === E || C.$$typeof === w || C.$$typeof === v);
   }, reactIs_production_min.typeOf = A, reactIs_production_min;
 }
 var reactIs_development = {};
@@ -8633,9 +8656,9 @@ function requireReactIs_development() {
         }
       }
     }
-    var R = d, C = m, I = u, j = c, k = n, O = p, T = a, M = x, V = b, D = o, W = l, J = i, F = g, L = !1;
+    var C = d, R = m, I = u, j = c, k = n, O = p, T = a, B = x, L = b, D = o, W = l, J = i, F = g, V = !1;
     function q(K) {
-      return L || (L = !0, console.warn("The ReactIs.isAsyncMode() alias has been deprecated, and will be removed in React 17+. Update your code to use ReactIs.isConcurrentMode() instead. It has the exact same API.")), G(K) || P(K) === d;
+      return V || (V = !0, console.warn("The ReactIs.isAsyncMode() alias has been deprecated, and will be removed in React 17+. Update your code to use ReactIs.isConcurrentMode() instead. It has the exact same API.")), G(K) || P(K) === d;
     }
     function G(K) {
       return P(K) === m;
@@ -8673,7 +8696,7 @@ function requireReactIs_development() {
     function se(K) {
       return P(K) === g;
     }
-    reactIs_development.AsyncMode = R, reactIs_development.ConcurrentMode = C, reactIs_development.ContextConsumer = I, reactIs_development.ContextProvider = j, reactIs_development.Element = k, reactIs_development.ForwardRef = O, reactIs_development.Fragment = T, reactIs_development.Lazy = M, reactIs_development.Memo = V, reactIs_development.Portal = D, reactIs_development.Profiler = W, reactIs_development.StrictMode = J, reactIs_development.Suspense = F, reactIs_development.isAsyncMode = q, reactIs_development.isConcurrentMode = G, reactIs_development.isContextConsumer = ee, reactIs_development.isContextProvider = z, reactIs_development.isElement = U, reactIs_development.isForwardRef = te, reactIs_development.isFragment = _, reactIs_development.isLazy = Q, reactIs_development.isMemo = ne, reactIs_development.isPortal = re, reactIs_development.isProfiler = $, reactIs_development.isStrictMode = ae, reactIs_development.isSuspense = se, reactIs_development.isValidElementType = A, reactIs_development.typeOf = P;
+    reactIs_development.AsyncMode = C, reactIs_development.ConcurrentMode = R, reactIs_development.ContextConsumer = I, reactIs_development.ContextProvider = j, reactIs_development.Element = k, reactIs_development.ForwardRef = O, reactIs_development.Fragment = T, reactIs_development.Lazy = B, reactIs_development.Memo = L, reactIs_development.Portal = D, reactIs_development.Profiler = W, reactIs_development.StrictMode = J, reactIs_development.Suspense = F, reactIs_development.isAsyncMode = q, reactIs_development.isConcurrentMode = G, reactIs_development.isContextConsumer = ee, reactIs_development.isContextProvider = z, reactIs_development.isElement = U, reactIs_development.isForwardRef = te, reactIs_development.isFragment = _, reactIs_development.isLazy = Q, reactIs_development.isMemo = ne, reactIs_development.isPortal = re, reactIs_development.isProfiler = $, reactIs_development.isStrictMode = ae, reactIs_development.isSuspense = se, reactIs_development.isValidElementType = A, reactIs_development.typeOf = P;
   }()), reactIs_development;
 }
 process.env.NODE_ENV === "production" ? reactIs$1.exports = requireReactIs_production_min() : reactIs$1.exports = requireReactIs_development();
@@ -10715,9 +10738,9 @@ function useMove(r, n, o = "ltr") {
           a.current.style.userSelect = "none";
           const P = a.current.getBoundingClientRect();
           if (P.width && P.height) {
-            const R = clamp$1((w - P.left) / P.width, 0, 1);
+            const C = clamp$1((w - P.left) / P.width, 0, 1);
             r({
-              x: o === "ltr" ? R : 1 - R,
+              x: o === "ltr" ? C : 1 - C,
               y: clamp$1((A - P.top) / P.height, 0, 1)
             });
           }
@@ -10845,7 +10868,7 @@ function useScrollIntoView({
     }) - (p.current ? 0 : w);
     function P() {
       d.current === 0 && (d.current = performance.now());
-      const C = performance.now() - d.current, I = h || r === 0 ? 1 : C / r, j = w + A * a(I);
+      const R = performance.now() - d.current, I = h || r === 0 ? 1 : R / r, j = w + A * a(I);
       setScrollParam({
         parent: p.current,
         axis: n,
@@ -10909,20 +10932,20 @@ function extractSystemStyles(r) {
     opacity: w,
     ff: A,
     fz: P,
-    fw: R,
-    lts: C,
+    fw: C,
+    lts: R,
     ta: I,
     lh: j,
     fs: k,
     tt: O,
     td: T,
-    w: M,
-    miw: V,
+    w: B,
+    miw: L,
     maw: D,
     h: W,
     mih: J,
     mah: F,
-    bgsz: L,
+    bgsz: V,
     bgp: q,
     bgr: G,
     bga: ee,
@@ -10998,20 +11021,20 @@ function extractSystemStyles(r) {
     opacity: w,
     ff: A,
     fz: P,
-    fw: R,
-    lts: C,
+    fw: C,
+    lts: R,
     ta: I,
     lh: j,
     fs: k,
     tt: O,
     td: T,
-    w: M,
-    miw: V,
+    w: B,
+    miw: L,
     maw: D,
     h: W,
     mih: J,
     mah: F,
-    bgsz: L,
+    bgsz: V,
     bgp: q,
     bgr: G,
     bga: ee,
@@ -12066,8 +12089,8 @@ const defaultProps$A = {
     classNames: w,
     styles: A,
     unstyled: P,
-    span: R,
-    __staticSelector: C
+    span: C,
+    __staticSelector: R
   } = o, I = __objRest$L(o, [
     "className",
     "size",
@@ -12102,11 +12125,11 @@ const defaultProps$A = {
     transform: c,
     align: d,
     gradient: h
-  }, { unstyled: P, name: C || "Text", variant: m, size: i });
+  }, { unstyled: P, name: R || "Text", variant: m, size: i });
   return /* @__PURE__ */ React__default.createElement(Box, __spreadValues$14({
     ref: n,
     className: k(j.root, { [j.gradient]: m === "gradient" }, a),
-    component: R ? "span" : "div"
+    component: C ? "span" : "div"
   }, I));
 });
 _Text.displayName = "@mantine/core/Text";
@@ -12371,7 +12394,7 @@ function SelectItems({
     size: g
   }), w = [], A = [];
   let P = null;
-  const R = (I, j) => {
+  const C = (I, j) => {
     const k = typeof i == "function" ? i(I.value) : !1;
     return /* @__PURE__ */ React__default.createElement(p, __spreadValues$$({
       key: I.value,
@@ -12395,15 +12418,15 @@ function SelectItems({
       variant: S
     }, I));
   };
-  let C = null;
+  let R = null;
   if (r.forEach((I, j) => {
-    I.creatable ? P = j : I.group ? (C !== I.group && (C = I.group, A.push(/* @__PURE__ */ React__default.createElement("div", {
+    I.creatable ? P = j : I.group ? (R !== I.group && (R = I.group, A.push(/* @__PURE__ */ React__default.createElement("div", {
       className: E.separator,
       key: `__mantine-divider-${j}`
     }, /* @__PURE__ */ React__default.createElement(Divider, {
       classNames: { label: E.separatorLabel },
       label: I.group
-    })))), A.push(R(I, j))) : w.push(R(I, j));
+    })))), A.push(C(I, j))) : w.push(C(I, j));
   }), b) {
     const I = r[P];
     w.push(/* @__PURE__ */ React__default.createElement("div", {
@@ -12567,7 +12590,7 @@ const defaultProps$x = {
     "unstyled",
     "variant",
     "viewportProps"
-  ]), [w, A] = useState$1(!1), P = useMantineTheme(), { classes: R, cx: C } = useStyles$D({ scrollbarSize: u, offsetScrollbars: g, scrollbarHovered: w, hidden: m === "never" }, { name: "ScrollArea", classNames: l, styles: c, unstyled: x, variant: v });
+  ]), [w, A] = useState$1(!1), P = useMantineTheme(), { classes: C, cx: R } = useStyles$D({ scrollbarSize: u, offsetScrollbars: g, scrollbarHovered: w, hidden: m === "never" }, { name: "ScrollArea", classNames: l, styles: c, unstyled: x, variant: v });
   return /* @__PURE__ */ React__default.createElement(ScrollAreaPrimitive.Root, {
     type: m === "never" ? "always" : m,
     scrollHideDelay: d,
@@ -12575,9 +12598,9 @@ const defaultProps$x = {
     ref: n,
     asChild: !0
   }, /* @__PURE__ */ React__default.createElement(Box, __spreadValues$Z({
-    className: C(R.root, i)
+    className: R(C.root, i)
   }, E), /* @__PURE__ */ React__default.createElement(ScrollAreaPrimitive.Viewport, __spreadProps$F(__spreadValues$Z({}, S), {
-    className: R.viewport,
+    className: C.viewport,
     ref: h,
     onScroll: typeof b == "function" ? ({ currentTarget: I }) => b({
       x: I.scrollLeft,
@@ -12585,22 +12608,22 @@ const defaultProps$x = {
     }) : void 0
   }), a), /* @__PURE__ */ React__default.createElement(ScrollAreaPrimitive.Scrollbar, {
     orientation: "horizontal",
-    className: R.scrollbar,
+    className: C.scrollbar,
     forceMount: !0,
     onMouseEnter: () => A(!0),
     onMouseLeave: () => A(!1)
   }, /* @__PURE__ */ React__default.createElement(ScrollAreaPrimitive.Thumb, {
-    className: R.thumb
+    className: C.thumb
   })), /* @__PURE__ */ React__default.createElement(ScrollAreaPrimitive.Scrollbar, {
     orientation: "vertical",
-    className: R.scrollbar,
+    className: C.scrollbar,
     forceMount: !0,
     onMouseEnter: () => A(!0),
     onMouseLeave: () => A(!1)
   }, /* @__PURE__ */ React__default.createElement(ScrollAreaPrimitive.Thumb, {
-    className: R.thumb
+    className: C.thumb
   })), /* @__PURE__ */ React__default.createElement(ScrollAreaPrimitive.Corner, {
-    className: R.corner
+    className: C.corner
   })));
 }), ScrollAreaAutosize = forwardRef$1((r, n) => {
   const o = useComponentDefaultProps("ScrollAreaAutosize", defaultProps$x, r), {
@@ -12797,7 +12820,7 @@ const useHover = function(r, n) {
       floating: b
     },
     refs: x
-  } = r, v = useFloatingTree(), S = useFloatingParentNodeId(), E = useLatestRef(i), w = useLatestRef(a), A = React.useRef(), P = React.useRef(), R = React.useRef(), C = React.useRef(), I = React.useRef(!0), j = React.useRef(!1), k = React.useRef(() => {
+  } = r, v = useFloatingTree(), S = useFloatingParentNodeId(), E = useLatestRef(i), w = useLatestRef(a), A = React.useRef(), P = React.useRef(), C = React.useRef(), R = React.useRef(), I = React.useRef(!0), j = React.useRef(!1), k = React.useRef(() => {
   }), O = React.useCallback(() => {
     var D;
     const W = (D = p.current.openEvent) == null ? void 0 : D.type;
@@ -12807,7 +12830,7 @@ const useHover = function(r, n) {
     if (!o)
       return;
     function D() {
-      clearTimeout(P.current), clearTimeout(C.current), I.current = !0;
+      clearTimeout(P.current), clearTimeout(R.current), I.current = !0;
     }
     return g.on("dismiss", D), () => {
       g.off("dismiss", D);
@@ -12826,10 +12849,10 @@ const useHover = function(r, n) {
   const T = React.useCallback(function(D) {
     D === void 0 && (D = !0);
     const W = getDelay(w.current, "close", A.current);
-    W && !R.current ? (clearTimeout(P.current), P.current = setTimeout(() => m(!1), W)) : D && (clearTimeout(P.current), m(!1));
-  }, [w, m]), M = React.useCallback(() => {
-    k.current(), R.current = void 0;
-  }, []), V = React.useCallback(() => {
+    W && !C.current ? (clearTimeout(P.current), P.current = setTimeout(() => m(!1), W)) : D && (clearTimeout(P.current), m(!1));
+  }, [w, m]), B = React.useCallback(() => {
+    k.current(), C.current = void 0;
+  }, []), L = React.useCallback(() => {
     if (j.current) {
       const D = getDocument(x.floating.current).body;
       D.style.pointerEvents = "", D.removeAttribute(safePolygonIdentifier), j.current = !1;
@@ -12841,31 +12864,31 @@ const useHover = function(r, n) {
     function D() {
       return p.current.openEvent ? ["click", "mousedown"].includes(p.current.openEvent.type) : !1;
     }
-    function W(L) {
+    function W(V) {
       if (clearTimeout(P.current), I.current = !1, l && !isMouseLikePointerType(A.current) || c > 0 && getDelay(w.current, "open") === 0)
         return;
-      p.current.openEvent = L;
+      p.current.openEvent = V;
       const q = getDelay(w.current, "open", A.current);
       q ? P.current = setTimeout(() => {
         m(!0);
       }, q) : m(!0);
     }
-    function J(L) {
+    function J(V) {
       if (D())
         return;
       k.current();
       const q = getDocument(b);
-      if (clearTimeout(C.current), E.current) {
-        d || clearTimeout(P.current), R.current = E.current({
+      if (clearTimeout(R.current), E.current) {
+        d || clearTimeout(P.current), C.current = E.current({
           ...r,
           tree: v,
-          x: L.clientX,
-          y: L.clientY,
+          x: V.clientX,
+          y: V.clientY,
           onClose() {
-            V(), M(), T();
+            L(), B(), T();
           }
         });
-        const G = R.current;
+        const G = C.current;
         q.addEventListener("mousemove", G), k.current = () => {
           q.removeEventListener("mousemove", G);
         };
@@ -12873,42 +12896,42 @@ const useHover = function(r, n) {
       }
       T();
     }
-    function F(L) {
+    function F(V) {
       D() || E.current == null || E.current({
         ...r,
         tree: v,
-        x: L.clientX,
-        y: L.clientY,
+        x: V.clientX,
+        y: V.clientY,
         onClose() {
-          V(), M(), T();
+          L(), B(), T();
         }
-      })(L);
+      })(V);
     }
     if (isElement(h)) {
-      const L = h;
-      return d && L.addEventListener("mouseleave", F), b == null || b.addEventListener("mouseleave", F), u && L.addEventListener("mousemove", W, {
+      const V = h;
+      return d && V.addEventListener("mouseleave", F), b == null || b.addEventListener("mouseleave", F), u && V.addEventListener("mousemove", W, {
         once: !0
-      }), L.addEventListener("mouseenter", W), L.addEventListener("mouseleave", J), () => {
-        d && L.removeEventListener("mouseleave", F), b == null || b.removeEventListener("mouseleave", F), u && L.removeEventListener("mousemove", W), L.removeEventListener("mouseenter", W), L.removeEventListener("mouseleave", J);
+      }), V.addEventListener("mouseenter", W), V.addEventListener("mouseleave", J), () => {
+        d && V.removeEventListener("mouseleave", F), b == null || b.removeEventListener("mouseleave", F), u && V.removeEventListener("mousemove", W), V.removeEventListener("mouseenter", W), V.removeEventListener("mouseleave", J);
       };
     }
-  }, [h, b, o, r, l, c, u, T, M, V, m, d, v, w, E, p]), index(() => {
+  }, [h, b, o, r, l, c, u, T, B, L, m, d, v, w, E, p]), index(() => {
     var D;
     if (o && d && (D = E.current) != null && D.__options.blockPointerEvents && O()) {
       const F = getDocument(b).body;
       if (F.setAttribute(safePolygonIdentifier, ""), F.style.pointerEvents = "none", j.current = !0, isElement(h) && b) {
         var W, J;
-        const L = h, q = v == null || (W = v.nodesRef.current.find((G) => G.id === S)) == null || (J = W.context) == null ? void 0 : J.elements.floating;
-        return q && (q.style.pointerEvents = ""), L.style.pointerEvents = "auto", b.style.pointerEvents = "auto", () => {
-          L.style.pointerEvents = "", b.style.pointerEvents = "";
+        const V = h, q = v == null || (W = v.nodesRef.current.find((G) => G.id === S)) == null || (J = W.context) == null ? void 0 : J.elements.floating;
+        return q && (q.style.pointerEvents = ""), V.style.pointerEvents = "auto", b.style.pointerEvents = "auto", () => {
+          V.style.pointerEvents = "", b.style.pointerEvents = "";
         };
       }
     }
   }, [o, d, S, b, h, v, E, p, O]), index(() => {
-    d || (A.current = void 0, M(), V());
-  }, [d, M, V]), React.useEffect(() => () => {
-    M(), clearTimeout(P.current), clearTimeout(C.current), V();
-  }, [o, M, V]), React.useMemo(() => {
+    d || (A.current = void 0, B(), L());
+  }, [d, B, L]), React.useEffect(() => () => {
+    B(), clearTimeout(P.current), clearTimeout(R.current), L();
+  }, [o, B, L]), React.useMemo(() => {
     if (!o)
       return {};
     function D(W) {
@@ -12919,7 +12942,7 @@ const useHover = function(r, n) {
         onPointerDown: D,
         onPointerEnter: D,
         onMouseMove() {
-          d || c === 0 || (clearTimeout(C.current), C.current = setTimeout(() => {
+          d || c === 0 || (clearTimeout(R.current), R.current = setTimeout(() => {
             I.current || m(!0);
           }, c));
         }
@@ -13122,7 +13145,7 @@ const bubbleHandlerKeys = {
     ancestorScroll: S = !1,
     bubbles: E = !0
   } = n === void 0 ? {} : n;
-  const w = useFloatingTree(), A = useFloatingParentNodeId() != null, P = useEvent(typeof h == "function" ? h : () => !1), R = typeof h == "function" ? P : h, C = React.useRef(!1), {
+  const w = useFloatingTree(), A = useFloatingParentNodeId() != null, P = useEvent(typeof h == "function" ? h : () => !1), C = typeof h == "function" ? P : h, R = React.useRef(!1), {
     escapeKeyBubbles: I,
     outsidePressBubbles: j
   } = normalizeBubblesProp(E);
@@ -13136,8 +13159,8 @@ const bubbleHandlerKeys = {
         if (W.length > 0) {
           let J = !0;
           if (W.forEach((F) => {
-            var L;
-            if ((L = F.context) != null && L.open && !F.context.dataRef.current.__escapeKeyBubbles) {
+            var V;
+            if ((V = F.context) != null && V.open && !F.context.dataRef.current.__escapeKeyBubbles) {
               J = !1;
               return;
             }
@@ -13155,8 +13178,8 @@ const bubbleHandlerKeys = {
       }
     }
     function O(D) {
-      const W = C.current;
-      if (C.current = !1, W || typeof R == "function" && !R(D))
+      const W = R.current;
+      if (R.current = !1, W || typeof C == "function" && !C(D))
         return;
       const J = getTarget(D);
       if (isHTMLElement(J) && d) {
@@ -13171,10 +13194,10 @@ const bubbleHandlerKeys = {
       });
       if (isEventTargetWithin(D, d) || isEventTargetWithin(D, u) || F)
         return;
-      const L = w ? getChildren(w.nodesRef.current, l) : [];
-      if (L.length > 0) {
+      const V = w ? getChildren(w.nodesRef.current, l) : [];
+      if (V.length > 0) {
         let q = !0;
-        if (L.forEach((G) => {
+        if (V.forEach((G) => {
           var ee;
           if ((ee = G.context) != null && ee.open && !G.context.dataRef.current.__outsidePressBubbles) {
             q = !1;
@@ -13195,24 +13218,24 @@ const bubbleHandlerKeys = {
     function T() {
       a(!1);
     }
-    const M = getDocument(d);
-    g && M.addEventListener("keydown", k), R && M.addEventListener(b, O);
-    let V = [];
-    return S && (isElement(u) && (V = getOverflowAncestors(u)), isElement(d) && (V = V.concat(getOverflowAncestors(d))), !isElement(c) && c && c.contextElement && (V = V.concat(getOverflowAncestors(c.contextElement)))), V = V.filter((D) => {
+    const B = getDocument(d);
+    g && B.addEventListener("keydown", k), C && B.addEventListener(b, O);
+    let L = [];
+    return S && (isElement(u) && (L = getOverflowAncestors(u)), isElement(d) && (L = L.concat(getOverflowAncestors(d))), !isElement(c) && c && c.contextElement && (L = L.concat(getOverflowAncestors(c.contextElement)))), L = L.filter((D) => {
       var W;
-      return D !== ((W = M.defaultView) == null ? void 0 : W.visualViewport);
-    }), V.forEach((D) => {
+      return D !== ((W = B.defaultView) == null ? void 0 : W.visualViewport);
+    }), L.forEach((D) => {
       D.addEventListener("scroll", T, {
         passive: !0
       });
     }), () => {
-      g && M.removeEventListener("keydown", k), R && M.removeEventListener(b, O), V.forEach((D) => {
+      g && B.removeEventListener("keydown", k), C && B.removeEventListener(b, O), L.forEach((D) => {
         D.removeEventListener("scroll", T);
       });
     };
-  }, [m, d, u, c, g, R, b, i, w, l, o, a, S, p, I, j, A]), React.useEffect(() => {
-    C.current = !1;
-  }, [R, b]), React.useMemo(() => p ? {
+  }, [m, d, u, c, g, C, b, i, w, l, o, a, S, p, I, j, A]), React.useEffect(() => {
+    R.current = !1;
+  }, [C, b]), React.useMemo(() => p ? {
     reference: {
       [bubbleHandlerKeys[v]]: () => {
         x && (i.emit("dismiss", {
@@ -13225,7 +13248,7 @@ const bubbleHandlerKeys = {
     },
     floating: {
       [captureHandlerKeys[b]]: () => {
-        C.current = !0;
+        R.current = !0;
       }
     }
   } : {}, [p, i, x, b, v, a]);
@@ -13605,11 +13628,11 @@ function useTransition({
     if (h(P), P === 0)
       typeof w == "function" && w(), typeof A == "function" && A(), x(E ? "entered" : "exited");
     else {
-      const R = window.setTimeout(() => {
+      const C = window.setTimeout(() => {
         typeof w == "function" && w(), x(E ? "entering" : "exiting");
       }, 10);
       v.current = window.setTimeout(() => {
-        window.clearTimeout(R), typeof A == "function" && A(), x(E ? "entered" : "exited");
+        window.clearTimeout(C), typeof A == "function" && A(), x(E ? "entered" : "exited");
       }, P);
     }
   };
@@ -13897,20 +13920,20 @@ function Popover(r) {
     withArrow: w,
     arrowSize: A,
     arrowOffset: P,
-    arrowRadius: R,
-    arrowPosition: C,
+    arrowRadius: C,
+    arrowPosition: R,
     unstyled: I,
     classNames: j,
     styles: k,
     closeOnClickOutside: O,
     withinPortal: T,
-    portalProps: M,
-    closeOnEscape: V,
+    portalProps: B,
+    closeOnEscape: L,
     clickOutsideEvents: D,
     trapFocus: W,
     onClose: J,
     onOpen: F,
-    onChange: L,
+    onChange: V,
     zIndex: q,
     radius: G,
     shadow: ee,
@@ -13971,7 +13994,7 @@ function Popover(r) {
     positionDependencies: b,
     opened: x,
     defaultOpened: U,
-    onChange: L,
+    onChange: V,
     onOpen: F,
     onClose: J
   });
@@ -13999,16 +14022,16 @@ function Popover(r) {
       withArrow: w,
       arrowSize: A,
       arrowOffset: P,
-      arrowRadius: R,
-      arrowPosition: C,
+      arrowRadius: C,
+      arrowPosition: R,
       placement: be.floating.placement,
       trapFocus: W,
       withinPortal: T,
-      portalProps: M,
+      portalProps: B,
       zIndex: q,
       radius: G,
       shadow: ee,
-      closeOnEscape: V,
+      closeOnEscape: L,
       onClose: be.onClose,
       onToggle: be.onToggle,
       getTargetId: () => `${fe}-target`,
@@ -14165,8 +14188,8 @@ function useInputProps(r, n, o) {
     id: w,
     size: A,
     style: P,
-    inputContainer: R,
-    inputWrapperOrder: C,
+    inputContainer: C,
+    inputWrapperOrder: R,
     withAsterisk: I,
     variant: j
   } = a, k = __objRest$A(a, [
@@ -14191,7 +14214,7 @@ function useInputProps(r, n, o) {
     "inputWrapperOrder",
     "withAsterisk",
     "variant"
-  ]), O = useId$2(w), { systemStyles: T, rest: M } = extractSystemStyles(k), V = __spreadValues$R({
+  ]), O = useId$2(w), { systemStyles: T, rest: B } = extractSystemStyles(k), L = __spreadValues$R({
     label: i,
     description: l,
     error: c,
@@ -14208,16 +14231,16 @@ function useInputProps(r, n, o) {
     id: O,
     size: A,
     style: P,
-    inputContainer: R,
-    inputWrapperOrder: C,
+    inputContainer: C,
+    inputWrapperOrder: R,
     withAsterisk: I,
     variant: j
   }, E);
-  return __spreadProps$z(__spreadValues$R({}, M), {
+  return __spreadProps$z(__spreadValues$R({}, B), {
     classNames: d,
     styles: m,
     unstyled: g,
-    wrapperProps: __spreadValues$R(__spreadValues$R({}, V), T),
+    wrapperProps: __spreadValues$R(__spreadValues$R({}, L), T),
     inputProps: {
       required: u,
       classNames: d,
@@ -14493,8 +14516,8 @@ const defaultProps$q = {
     __staticSelector: w,
     unstyled: A,
     inputWrapperOrder: P,
-    withAsterisk: R,
-    variant: C
+    withAsterisk: C,
+    variant: R
   } = o, I = __objRest$w(o, [
     "className",
     "label",
@@ -14521,32 +14544,32 @@ const defaultProps$q = {
     styles: v,
     name: ["InputWrapper", w],
     unstyled: A,
-    variant: C,
+    variant: R,
     size: S
   }), O = {
     classNames: x,
     styles: v,
     unstyled: A,
     size: S,
-    variant: C,
+    variant: R,
     __staticSelector: w
-  }, T = typeof R == "boolean" ? R : c, M = u ? `${u}-error` : b == null ? void 0 : b.id, V = u ? `${u}-description` : h == null ? void 0 : h.id, W = `${!!d && typeof d != "boolean" ? M : ""} ${m ? V : ""}`, J = W.trim().length > 0 ? W.trim() : void 0, F = i && /* @__PURE__ */ React__default.createElement(InputLabel, __spreadValues$M(__spreadValues$M({
+  }, T = typeof C == "boolean" ? C : c, B = u ? `${u}-error` : b == null ? void 0 : b.id, L = u ? `${u}-description` : h == null ? void 0 : h.id, W = `${!!d && typeof d != "boolean" ? B : ""} ${m ? L : ""}`, J = W.trim().length > 0 ? W.trim() : void 0, F = i && /* @__PURE__ */ React__default.createElement(InputLabel, __spreadValues$M(__spreadValues$M({
     key: "label",
     labelElement: p,
     id: u ? `${u}-label` : void 0,
     htmlFor: u,
     required: T
-  }, O), g), i), L = m && /* @__PURE__ */ React__default.createElement(InputDescription, __spreadProps$x(__spreadValues$M(__spreadValues$M({
+  }, O), g), i), V = m && /* @__PURE__ */ React__default.createElement(InputDescription, __spreadProps$x(__spreadValues$M(__spreadValues$M({
     key: "description"
   }, h), O), {
     size: (h == null ? void 0 : h.size) || O.size,
-    id: (h == null ? void 0 : h.id) || V
+    id: (h == null ? void 0 : h.id) || L
   }), m), q = /* @__PURE__ */ React__default.createElement(Fragment, {
     key: "input"
   }, E(l)), G = typeof d != "boolean" && d && /* @__PURE__ */ React__default.createElement(InputError, __spreadProps$x(__spreadValues$M(__spreadValues$M({}, b), O), {
     size: (b == null ? void 0 : b.size) || O.size,
     key: "error",
-    id: (b == null ? void 0 : b.id) || M
+    id: (b == null ? void 0 : b.id) || B
   }), d), ee = P.map((z) => {
     switch (z) {
       case "label":
@@ -14554,7 +14577,7 @@ const defaultProps$q = {
       case "input":
         return q;
       case "description":
-        return L;
+        return V;
       case "error":
         return G;
       default:
@@ -14565,7 +14588,7 @@ const defaultProps$q = {
     value: __spreadValues$M({
       describedBy: J
     }, getInputOffsets(P, {
-      hasDescription: !!L,
+      hasDescription: !!V,
       hasError: !!G
     }))
   }, /* @__PURE__ */ React__default.createElement(Box, __spreadValues$M({
@@ -14786,8 +14809,8 @@ const defaultProps$o = {
     styles: w,
     __staticSelector: A,
     multiline: P,
-    sx: R,
-    unstyled: C,
+    sx: C,
+    unstyled: R,
     pointer: I
   } = o, j = __objRest$u(o, [
     "className",
@@ -14811,7 +14834,7 @@ const defaultProps$o = {
     "sx",
     "unstyled",
     "pointer"
-  ]), { offsetBottom: k, offsetTop: O, describedBy: T } = useInputWrapperContext(), { classes: M, cx: V } = useStyles$v({
+  ]), { offsetBottom: k, offsetTop: O, describedBy: T } = useInputWrapperContext(), { classes: B, cx: L } = useStyles$v({
     radius: x,
     multiline: P,
     invalid: !!i,
@@ -14821,13 +14844,13 @@ const defaultProps$o = {
     offsetBottom: k,
     offsetTop: O,
     pointer: I
-  }, { classNames: E, styles: w, name: ["Input", A], unstyled: C, variant: u, size: v }), { systemStyles: D, rest: W } = extractSystemStyles(j);
+  }, { classNames: E, styles: w, name: ["Input", A], unstyled: R, variant: u, size: v }), { systemStyles: D, rest: W } = extractSystemStyles(j);
   return /* @__PURE__ */ React__default.createElement(Box, __spreadValues$J(__spreadValues$J({
-    className: V(M.wrapper, a),
-    sx: R,
+    className: L(B.wrapper, a),
+    sx: C,
     style: m
   }, D), S), d && /* @__PURE__ */ React__default.createElement("div", {
-    className: M.icon
+    className: B.icon
   }, d), /* @__PURE__ */ React__default.createElement(Box, __spreadProps$v(__spreadValues$J({
     component: "input"
   }, W), {
@@ -14839,9 +14862,9 @@ const defaultProps$o = {
     "data-disabled": c || void 0,
     "data-with-icon": !!d || void 0,
     "data-invalid": !!i || void 0,
-    className: M.input
+    className: B.input
   })), h && /* @__PURE__ */ React__default.createElement("div", __spreadProps$v(__spreadValues$J({}, b), {
-    className: M.rightSection
+    className: B.rightSection
   }), h));
 });
 _Input.displayName = "@mantine/core/Input";
@@ -15220,8 +15243,8 @@ const defaultProps$l = {
     loaderProps: w,
     gradient: A,
     classNames: P,
-    styles: R,
-    unstyled: C
+    styles: C,
+    unstyled: R
   } = o, I = __objRest$r(o, [
     "className",
     "size",
@@ -15251,7 +15274,7 @@ const defaultProps$l = {
     gradient: A,
     withLeftIcon: !!m,
     withRightIcon: !!p
-  }, { name: "Button", unstyled: C, classNames: P, styles: R, variant: h, size: i }), T = O.fn.variant({ color: l, variant: h }), M = /* @__PURE__ */ React__default.createElement(Loader, __spreadValues$E({
+  }, { name: "Button", unstyled: R, classNames: P, styles: C, variant: h, size: i }), T = O.fn.variant({ color: l, variant: h }), B = /* @__PURE__ */ React__default.createElement(Loader, __spreadValues$E({
     color: T.color,
     size: `calc(${getSize({ size: i, sizes: sizes$1 }).height} / 2)`
   }, w));
@@ -15263,19 +15286,19 @@ const defaultProps$l = {
     "data-disabled": u || void 0,
     "data-loading": S || void 0,
     ref: n,
-    unstyled: C
+    unstyled: R
   }, I), /* @__PURE__ */ React__default.createElement("div", {
     className: j.inner
   }, (m || S && E === "left") && /* @__PURE__ */ React__default.createElement("span", {
     className: k(j.icon, j.leftIcon)
-  }, S && E === "left" ? M : m), S && E === "center" && /* @__PURE__ */ React__default.createElement("span", {
+  }, S && E === "left" ? B : m), S && E === "center" && /* @__PURE__ */ React__default.createElement("span", {
     className: j.centerLoader
-  }, M), /* @__PURE__ */ React__default.createElement("span", {
+  }, B), /* @__PURE__ */ React__default.createElement("span", {
     className: j.label,
     style: { textTransform: x ? "uppercase" : void 0 }
   }, d), (p || S && E === "right") && /* @__PURE__ */ React__default.createElement("span", {
     className: k(j.icon, j.rightIcon)
-  }, S && E === "right" ? M : p)));
+  }, S && E === "right" ? B : p)));
 });
 _Button.displayName = "@mantine/core/Button";
 _Button.Group = ButtonGroup;
@@ -15671,14 +15694,14 @@ const defaultProps$g = {
     "unstyled",
     "processing",
     "variant"
-  ]), { classes: R, cx: C } = useStyles$m({ position: i, offset: l, radius: u, inline: d, color: g, withBorder: m, zIndex: S, withLabel: !!b }, { name: "Indicator", classNames: x, styles: h, unstyled: E, variant: A, size: c });
+  ]), { classes: C, cx: R } = useStyles$m({ position: i, offset: l, radius: u, inline: d, color: g, withBorder: m, zIndex: S, withLabel: !!b }, { name: "Indicator", classNames: x, styles: h, unstyled: E, variant: A, size: c });
   return /* @__PURE__ */ React__default.createElement(Box, __spreadValues$w({
     ref: n,
-    className: C(R.root, p)
+    className: R(C.root, p)
   }, P), !v && /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("div", {
-    className: C(R.indicator, R.common)
+    className: R(C.indicator, C.common)
   }, b), w && /* @__PURE__ */ React__default.createElement("div", {
-    className: C(R.processing, R.common)
+    className: R(C.processing, C.common)
   })), a);
 });
 Indicator.displayName = "@mantine/core/Indicator";
@@ -15917,7 +15940,7 @@ const defaultProps$d = {
     "unstyled",
     "variant",
     "keepMounted"
-  ]), { classes: A, cx: P, theme: R } = useStyles$j(null, { name: "LoadingOverlay", unstyled: v, variant: S }), C = `calc(${p} + 1)`;
+  ]), { classes: A, cx: P, theme: C } = useStyles$j(null, { name: "LoadingOverlay", unstyled: v, variant: S }), R = `calc(${p} + 1)`;
   return /* @__PURE__ */ React__default.createElement(Transition, {
     keepMounted: E,
     duration: d,
@@ -15929,16 +15952,16 @@ const defaultProps$d = {
     style: __spreadProps$m(__spreadValues$r(__spreadValues$r({}, I), g), { zIndex: p }),
     ref: n
   }, w), h ? /* @__PURE__ */ React__default.createElement("div", {
-    style: { zIndex: C }
+    style: { zIndex: R }
   }, h) : /* @__PURE__ */ React__default.createElement(Loader, __spreadValues$r({
-    style: { zIndex: C }
+    style: { zIndex: R }
   }, l)), /* @__PURE__ */ React__default.createElement(Overlay, {
     opacity: c,
     zIndex: p,
     radius: b,
     blur: x,
     unstyled: v,
-    color: u || (R.colorScheme === "dark" ? R.colors.dark[5] : R.white)
+    color: u || (C.colorScheme === "dark" ? C.colors.dark[5] : C.white)
   })));
 });
 LoadingOverlay.displayName = "@mantine/core/LoadingOverlay";
@@ -16159,8 +16182,8 @@ const defaultProps$c = {
     onChange: w,
     disableRightSectionRotation: A,
     childrenOffset: P,
-    disabled: R,
-    onClick: C
+    disabled: C,
+    onClick: R
   } = o, I = __objRest$g(o, [
     "label",
     "description",
@@ -16187,18 +16210,18 @@ const defaultProps$c = {
     defaultValue: E,
     finalValue: !1,
     onChange: w
-  }), M = !!v, V = (D) => {
-    M ? (D.preventDefault(), C == null || C(D), T(!O)) : C == null || C(D);
+  }), B = !!v, L = (D) => {
+    B ? (D.preventDefault(), R == null || R(D), T(!O)) : R == null || R(D);
   };
   return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(UnstyledButton, __spreadValues$m({
     ref: n,
     className: k(j.root, u),
     "data-active": g || void 0,
-    onClick: V,
+    onClick: L,
     unstyled: p,
     "data-expanded": O || void 0,
-    "data-disabled": R || void 0,
-    disabled: R
+    "data-disabled": C || void 0,
+    disabled: C
   }, I), l && /* @__PURE__ */ React__default.createElement("span", {
     className: j.icon
   }, l), /* @__PURE__ */ React__default.createElement("span", {
@@ -16213,10 +16236,10 @@ const defaultProps$c = {
     size: "xs",
     "data-active": g || void 0,
     className: j.description
-  }, i)), (M || c) && /* @__PURE__ */ React__default.createElement("span", {
+  }, i)), (B || c) && /* @__PURE__ */ React__default.createElement("span", {
     className: j.rightSection,
     "data-rotate": O && !A || void 0
-  }, M ? c || /* @__PURE__ */ React__default.createElement(ChevronIcon$1, {
+  }, B ? c || /* @__PURE__ */ React__default.createElement(ChevronIcon$1, {
     width: rem(14),
     height: rem(14),
     style: { transform: "rotate(-90deg)" }
@@ -16392,8 +16415,8 @@ function TooltipFloating(r) {
     width: w,
     zIndex: A,
     disabled: P,
-    variant: R
-  } = o, C = __objRest$e(o, [
+    variant: C
+  } = o, R = __objRest$e(o, [
     "children",
     "refProp",
     "withinPortal",
@@ -16413,23 +16436,23 @@ function TooltipFloating(r) {
     "zIndex",
     "disabled",
     "variant"
-  ]), { handleMouseMove: I, x: j, y: k, opened: O, boundaryRef: T, floating: M, setOpened: V } = useFloatingTooltip({
+  ]), { handleMouseMove: I, x: j, y: k, opened: O, boundaryRef: T, floating: B, setOpened: L } = useFloatingTooltip({
     offset: v,
     position: S
-  }), { classes: D, cx: W } = useStyles$h({ radius: h, color: b, multiline: E, width: w }, { name: "TooltipFloating", classNames: m, styles: p, unstyled: g, variant: R });
+  }), { classes: D, cx: W } = useStyles$h({ radius: h, color: b, multiline: E, width: w }, { name: "TooltipFloating", classNames: m, styles: p, unstyled: g, variant: C });
   if (!isElement$1(a))
     throw new Error(TOOLTIP_ERRORS.children);
   const J = useMergedRef(T, a.ref), F = (q) => {
     var G, ee;
-    (ee = (G = a.props).onMouseEnter) == null || ee.call(G, q), I(q), V(!0);
-  }, L = (q) => {
+    (ee = (G = a.props).onMouseEnter) == null || ee.call(G, q), I(q), L(!0);
+  }, V = (q) => {
     var G, ee;
-    (ee = (G = a.props).onMouseLeave) == null || ee.call(G, q), V(!1);
+    (ee = (G = a.props).onMouseLeave) == null || ee.call(G, q), L(!1);
   };
   return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(OptionalPortal, __spreadProps$g(__spreadValues$j({}, c), {
     withinPortal: l
-  }), /* @__PURE__ */ React__default.createElement(Box, __spreadProps$g(__spreadValues$j({}, C), {
-    ref: M,
+  }), /* @__PURE__ */ React__default.createElement(Box, __spreadProps$g(__spreadValues$j({}, R), {
+    ref: B,
     className: W(D.tooltip, d),
     style: __spreadProps$g(__spreadValues$j({}, u), {
       zIndex: A,
@@ -16440,7 +16463,7 @@ function TooltipFloating(r) {
   }), x)), cloneElement(a, __spreadProps$g(__spreadValues$j({}, a.props), {
     [i]: J,
     onMouseEnter: F,
-    onMouseLeave: L
+    onMouseLeave: V
   })));
 }
 TooltipFloating.displayName = "@mantine/core/TooltipFloating";
@@ -16468,7 +16491,7 @@ function useTooltip(r) {
       arrow({ element: r.arrowRef, padding: r.arrowOffset }),
       ...r.inline ? [inline()] : []
     ]
-  }), { getReferenceProps: R, getFloatingProps: C } = useInteractions([
+  }), { getReferenceProps: C, getFloatingProps: R } = useInteractions([
     useHover(v, {
       enabled: r.events.hover,
       delay: l ? u : { open: r.openDelay, close: r.closeDelay },
@@ -16494,8 +16517,8 @@ function useTooltip(r) {
     arrowY: P,
     reference: b,
     floating: x,
-    getFloatingProps: C,
-    getReferenceProps: R,
+    getFloatingProps: R,
+    getReferenceProps: C,
     isGroupPhase: i && d && d !== c,
     opened: i,
     placement: w
@@ -16551,20 +16574,20 @@ const defaultProps$9 = {
     styles: w,
     unstyled: A,
     style: P,
-    className: R,
-    withArrow: C,
+    className: C,
+    withArrow: R,
     arrowSize: I,
     arrowOffset: j,
     arrowRadius: k,
     arrowPosition: O,
     offset: T,
-    transitionProps: M,
-    multiline: V,
+    transitionProps: B,
+    multiline: L,
     width: D,
     events: W,
     zIndex: J,
     disabled: F,
-    positionDependencies: L,
+    positionDependencies: V,
     onClick: q,
     onMouseEnter: G,
     onMouseLeave: ee,
@@ -16608,7 +16631,7 @@ const defaultProps$9 = {
     "inline",
     "variant",
     "keepMounted"
-  ]), { classes: Q, cx: ne, theme: re } = useStyles$h({ radius: v, color: S, width: D, multiline: V }, { name: "Tooltip", classNames: E, styles: w, unstyled: A, variant: U }), $ = useTooltip({
+  ]), { classes: Q, cx: ne, theme: re } = useStyles$h({ radius: v, color: S, width: D, multiline: L }, { name: "Tooltip", classNames: E, styles: w, unstyled: A, variant: U }), $ = useTooltip({
     position: getFloatingPosition(re.dir, c),
     closeDelay: p,
     openDelay: m,
@@ -16617,8 +16640,8 @@ const defaultProps$9 = {
     events: W,
     arrowRef: a,
     arrowOffset: j,
-    offset: T + (C ? I / 2 : 0),
-    positionDependencies: [...L, l],
+    offset: T + (R ? I / 2 : 0),
+    positionDependencies: [...V, l],
     inline: z
   });
   if (!isElement$1(l))
@@ -16629,9 +16652,9 @@ const defaultProps$9 = {
   }), /* @__PURE__ */ React__default.createElement(Transition, __spreadProps$f(__spreadValues$i({
     keepMounted: te,
     mounted: !F && $.opened
-  }, M), {
-    transition: M.transition || "fade",
-    duration: $.isGroupPhase ? 10 : (o = M.duration) != null ? o : 100
+  }, B), {
+    transition: B.transition || "fade",
+    duration: $.isGroupPhase ? 10 : (o = B.duration) != null ? o : 100
   }), (se) => {
     var K, Z;
     return /* @__PURE__ */ React__default.createElement(Box, __spreadValues$i(__spreadValues$i({}, _), $.getFloatingProps({
@@ -16646,7 +16669,7 @@ const defaultProps$9 = {
       ref: a,
       arrowX: $.arrowX,
       arrowY: $.arrowY,
-      visible: C,
+      visible: R,
       position: $.placement,
       arrowSize: I,
       arrowOffset: j,
@@ -16662,7 +16685,7 @@ const defaultProps$9 = {
     onPointerDown: r.onPointerDown,
     onPointerEnter: r.onPointerEnter,
     [u]: ae,
-    className: ne(R, l.props.className)
+    className: ne(C, l.props.className)
   }, l.props))));
 });
 _Tooltip.Group = TooltipGroup;
@@ -16767,20 +16790,20 @@ const defaultProps$8 = {
     styles: w,
     filter: A,
     maxDropdownHeight: P,
-    searchable: R,
-    clearable: C,
+    searchable: C,
+    clearable: R,
     nothingFound: I,
     limit: j,
     disabled: k,
     onSearchChange: O,
     searchValue: T,
-    rightSection: M,
-    rightSectionWidth: V,
+    rightSection: B,
+    rightSectionWidth: L,
     creatable: D,
     getCreateLabel: W,
     shouldCreate: J,
     selectOnBlur: F,
-    onCreate: L,
+    onCreate: V,
     dropdownComponent: q,
     onDropdownClose: G,
     onDropdownOpen: ee,
@@ -16848,12 +16871,12 @@ const defaultProps$8 = {
     "readOnly",
     "clearButtonProps",
     "hoverOnSearchChange"
-  ]), { classes: be, cx: Ze, theme: Ne } = useStyles$g(), [ge, Ge] = useState$1(v), [ke, ve] = useState$1(-1), He = useRef$1(), Fe = useRef$1({}), [Je, rt] = useState$1("column"), Re = Je === "column", { scrollIntoView: De, targetRef: Ve, scrollableRef: nt } = useScrollIntoView({
+  ]), { classes: be, cx: Ze, theme: Ne } = useStyles$g(), [ge, Ge] = useState$1(v), [ke, ve] = useState$1(-1), He = useRef$1(), Fe = useRef$1({}), [Je, rt] = useState$1("column"), Ce = Je === "column", { scrollIntoView: De, targetRef: Le, scrollableRef: nt } = useScrollIntoView({
     duration: 0,
     offset: 5,
     cancelable: !1,
     isList: !0
-  }), Ye = re === void 0 ? C : re, Se = (H) => {
+  }), Ye = re === void 0 ? R : re, Se = (H) => {
     if (ge !== H) {
       Ge(H);
       const ie = H ? ee : G;
@@ -16861,48 +16884,48 @@ const defaultProps$8 = {
     }
   }, qe = D && typeof W == "function";
   let We = null;
-  const ot = c.map((H) => typeof H == "string" ? { label: H, value: H } : H), Ue = groupOptions({ data: ot }), [Ce, Me, Xe] = useUncontrolled({
+  const ot = c.map((H) => typeof H == "string" ? { label: H, value: H } : H), Ue = groupOptions({ data: ot }), [Re, Be, Xe] = useUncontrolled({
     value: u,
     defaultValue: d,
     finalValue: null,
     onChange: m
-  }), Pe = Ue.find((H) => H.value === Ce), [Ie, at] = useUncontrolled({
+  }), Pe = Ue.find((H) => H.value === Re), [Ie, at] = useUncontrolled({
     value: T,
     defaultValue: (Pe == null ? void 0 : Pe.label) || "",
     finalValue: void 0,
     onChange: O
   }), Oe = (H) => {
-    at(H), R && typeof O == "function" && O(H);
+    at(H), C && typeof O == "function" && O(H);
   }, st = () => {
     var H;
-    Z || (Me(null), Xe || Oe(""), (H = He.current) == null || H.focus());
+    Z || (Be(null), Xe || Oe(""), (H = He.current) == null || H.focus());
   };
   useEffect$1(() => {
-    const H = Ue.find((ie) => ie.value === Ce);
-    H ? Oe(H.label) : (!qe || !Ce) && Oe("");
-  }, [Ce]), useEffect$1(() => {
-    Pe && (!R || !ge) && Oe(Pe.label);
+    const H = Ue.find((ie) => ie.value === Re);
+    H ? Oe(H.label) : (!qe || !Re) && Oe("");
+  }, [Re]), useEffect$1(() => {
+    Pe && (!C || !ge) && Oe(Pe.label);
   }, [Pe == null ? void 0 : Pe.label]);
   const je = (H) => {
     if (!Z)
       if (Ye && (Pe == null ? void 0 : Pe.value) === H.value)
-        Me(null), Se(!1);
+        Be(null), Se(!1);
       else {
-        if (H.creatable && typeof L == "function") {
-          const ie = L(H.value);
-          typeof ie < "u" && ie !== null && Me(typeof ie == "string" ? ie : ie.value);
+        if (H.creatable && typeof V == "function") {
+          const ie = V(H.value);
+          typeof ie < "u" && ie !== null && Be(typeof ie == "string" ? ie : ie.value);
         } else
-          Me(H.value);
+          Be(H.value);
         Xe || Oe(H.label), ve(-1), Se(!1), He.current.focus();
       }
   }, he = filterData({
     data: Ue,
-    searchable: R,
+    searchable: C,
     limit: j,
     searchValue: Ie,
     filter: A,
     filterDataOnExactSearchMatch: ae,
-    value: Ce
+    value: Re
   });
   qe && J(Ie, he) && (We = W(Ie), he.push({ label: Ie, value: Ie, creatable: !0 }));
   const Qe = (H, ie, ue) => {
@@ -16915,21 +16938,21 @@ const defaultProps$8 = {
   useDidUpdate(() => {
     ve(fe && Ie ? 0 : -1);
   }, [Ie, fe]);
-  const Le = Ce ? he.findIndex((H) => H.value === Ce) : 0, Ee = !Z && (he.length > 0 ? ge : ge && !!I), _e = () => {
+  const Ve = Re ? he.findIndex((H) => H.value === Re) : 0, Ee = !Z && (he.length > 0 ? ge : ge && !!I), _e = () => {
     ve((H) => {
       var ie;
       const ue = Qe(H, (de) => de - 1, (de) => de > 0);
-      return Ve.current = Fe.current[(ie = he[ue]) == null ? void 0 : ie.value], Ee && De({ alignment: Re ? "start" : "end" }), ue;
+      return Le.current = Fe.current[(ie = he[ue]) == null ? void 0 : ie.value], Ee && De({ alignment: Ce ? "start" : "end" }), ue;
     });
   }, $e = () => {
     ve((H) => {
       var ie;
       const ue = Qe(H, (de) => de + 1, (de) => de < he.length - 1);
-      return Ve.current = Fe.current[(ie = he[ue]) == null ? void 0 : ie.value], Ee && De({ alignment: Re ? "end" : "start" }), ue;
+      return Le.current = Fe.current[(ie = he[ue]) == null ? void 0 : ie.value], Ee && De({ alignment: Ce ? "end" : "start" }), ue;
     });
   }, Ke = () => window.setTimeout(() => {
     var H;
-    Ve.current = Fe.current[(H = he[Le]) == null ? void 0 : H.value], De({ alignment: Re ? "end" : "start" });
+    Le.current = Fe.current[(H = he[Ve]) == null ? void 0 : H.value], De({ alignment: Ce ? "end" : "start" });
   }, 50);
   useDidUpdate(() => {
     Ee && Ke();
@@ -16937,26 +16960,26 @@ const defaultProps$8 = {
   const N = (H) => {
     switch (typeof g == "function" && g(H), H.key) {
       case "ArrowUp": {
-        H.preventDefault(), ge ? Re ? _e() : $e() : (ve(Le), Se(!0), Ke());
+        H.preventDefault(), ge ? Ce ? _e() : $e() : (ve(Ve), Se(!0), Ke());
         break;
       }
       case "ArrowDown": {
-        H.preventDefault(), ge ? Re ? $e() : _e() : (ve(Le), Se(!0), Ke());
+        H.preventDefault(), ge ? Ce ? $e() : _e() : (ve(Ve), Se(!0), Ke());
         break;
       }
       case "Home": {
-        if (!R) {
+        if (!C) {
           H.preventDefault(), ge || Se(!0);
           const ie = he.findIndex((ue) => !ue.disabled);
-          ve(ie), Ee && De({ alignment: Re ? "end" : "start" });
+          ve(ie), Ee && De({ alignment: Ce ? "end" : "start" });
         }
         break;
       }
       case "End": {
-        if (!R) {
+        if (!C) {
           H.preventDefault(), ge || Se(!0);
           const ie = he.map((ue) => !!ue.disabled).lastIndexOf(!1);
-          ve(ie), Ee && De({ alignment: Re ? "end" : "start" });
+          ve(ie), Ee && De({ alignment: Ce ? "end" : "start" });
         }
         break;
       }
@@ -16965,22 +16988,22 @@ const defaultProps$8 = {
         break;
       }
       case " ": {
-        R || (H.preventDefault(), he[ke] && ge ? je(he[ke]) : (Se(!0), ve(Le), Ke()));
+        C || (H.preventDefault(), he[ke] && ge ? je(he[ke]) : (Se(!0), ve(Ve), Ke()));
         break;
       }
       case "Enter":
-        R || H.preventDefault(), he[ke] && ge && (H.preventDefault(), je(he[ke]));
+        C || H.preventDefault(), he[ke] && ge && (H.preventDefault(), je(he[ke]));
     }
-  }, B = (H) => {
+  }, M = (H) => {
     typeof h == "function" && h(H);
-    const ie = Ue.find((ue) => ue.value === Ce);
+    const ie = Ue.find((ue) => ue.value === Re);
     F && he[ke] && ge && je(he[ke]), Oe((ie == null ? void 0 : ie.label) || ""), Se(!1);
   }, Y = (H) => {
-    typeof b == "function" && b(H), R && Se(!0);
+    typeof b == "function" && b(H), C && Se(!0);
   }, oe = (H) => {
-    Z || (Oe(H.currentTarget.value), C && H.currentTarget.value === "" && Me(null), ve(-1), Se(!0));
+    Z || (Oe(H.currentTarget.value), R && H.currentTarget.value === "" && Be(null), ve(-1), Se(!0));
   }, ce = () => {
-    Z || (Se(!ge), Ce && !ge && ve(Le));
+    Z || (Se(!ge), Re && !ge && ve(Ve));
   };
   return /* @__PURE__ */ React__default.createElement(Input.Wrapper, __spreadProps$e(__spreadValues$h({}, i), {
     __staticSelector: "Select"
@@ -17011,7 +17034,7 @@ const defaultProps$8 = {
   }, /* @__PURE__ */ React__default.createElement("input", {
     type: "hidden",
     name: Q,
-    value: Ce || "",
+    value: Re || "",
     form: se,
     disabled: k
   }), /* @__PURE__ */ React__default.createElement(Input, __spreadValues$h(__spreadProps$e(__spreadValues$h(__spreadValues$h({
@@ -17028,22 +17051,22 @@ const defaultProps$8 = {
     "aria-controls": Ee ? `${a.id}-items` : null,
     "aria-activedescendant": ke >= 0 ? `${a.id}-${ke}` : null,
     onMouseDown: ce,
-    onBlur: B,
+    onBlur: M,
     onFocus: Y,
-    readOnly: !R || Z,
+    readOnly: !C || Z,
     disabled: k,
     "data-mantine-stop-propagation": Ee,
     name: null,
     classNames: __spreadProps$e(__spreadValues$h({}, E), {
-      input: Ze({ [be.input]: !R }, E == null ? void 0 : E.input)
+      input: Ze({ [be.input]: !C }, E == null ? void 0 : E.input)
     })
   }), getSelectRightSectionProps({
     theme: Ne,
-    rightSection: M,
-    rightSectionWidth: V,
+    rightSection: B,
+    rightSectionWidth: L,
     styles: w,
     size: a.size,
-    shouldClear: C && !!Pe,
+    shouldClear: R && !!Pe,
     onClear: st,
     error: i.error,
     clearButtonProps: le,
@@ -17063,7 +17086,7 @@ const defaultProps$8 = {
     hovered: ke,
     classNames: E,
     styles: w,
-    isItemSelected: (H) => H === Ce,
+    isItemSelected: (H) => H === Re,
     uuid: a.id,
     __staticSelector: "Select",
     onItemHover: ve,
@@ -17192,13 +17215,13 @@ const Thumb = forwardRef$1(({
   onBlur: w,
   showLabelOnHover: A,
   isHovered: P,
-  children: R = null,
-  disabled: C,
+  children: C = null,
+  disabled: R,
   unstyled: I,
   thumbSize: j,
   variant: k
 }, O) => {
-  const { classes: T, cx: M, theme: V } = useStyles$d({ color: d, disabled: C, thumbSize: j }, { name: "Slider", classNames: m, styles: p, unstyled: I, variant: k, size: g }), [D, W] = useState$1(!1), J = v || l || D || A && P;
+  const { classes: T, cx: B, theme: L } = useStyles$d({ color: d, disabled: R, thumbSize: j }, { name: "Slider", classNames: m, styles: p, unstyled: I, variant: k, size: g }), [D, W] = useState$1(!1), J = v || l || D || A && P;
   return /* @__PURE__ */ React__default.createElement(Box, {
     tabIndex: 0,
     role: "slider",
@@ -17207,7 +17230,7 @@ const Thumb = forwardRef$1(({
     "aria-valuemin": n,
     "aria-valuenow": o,
     ref: O,
-    className: M(T.thumb, { [T.dragging]: l }),
+    className: B(T.thumb, { [T.dragging]: l }),
     onFocus: () => {
       W(!0), typeof E == "function" && E();
     },
@@ -17218,12 +17241,12 @@ const Thumb = forwardRef$1(({
     onMouseDown: c,
     onKeyDownCapture: u,
     onClick: (F) => F.stopPropagation(),
-    style: { [V.dir === "rtl" ? "right" : "left"]: `${a}%` }
-  }, R, /* @__PURE__ */ React__default.createElement(Transition, {
+    style: { [L.dir === "rtl" ? "right" : "left"]: `${a}%` }
+  }, C, /* @__PURE__ */ React__default.createElement(Transition, {
     mounted: i != null && J,
     duration: b,
     transition: h,
-    timingFunction: x || V.transitionTimingFunction
+    timingFunction: x || L.transitionTimingFunction
   }, (F) => /* @__PURE__ */ React__default.createElement("div", {
     style: F,
     className: T.label
@@ -17545,15 +17568,15 @@ const defaultProps$7 = {
     label: w,
     labelTransition: A,
     labelTransitionDuration: P,
-    labelTransitionTimingFunction: R,
-    labelAlwaysOn: C,
+    labelTransitionTimingFunction: C,
+    labelAlwaysOn: R,
     thumbLabel: I,
     showLabelOnHover: j,
     thumbChildren: k,
     disabled: O,
     unstyled: T,
-    thumbSize: M,
-    scale: V,
+    thumbSize: B,
+    scale: L,
     inverted: D,
     variant: W
   } = o, J = __objRest$9(o, [
@@ -17586,17 +17609,17 @@ const defaultProps$7 = {
     "scale",
     "inverted",
     "variant"
-  ]), F = x ?? getPrecision(b), L = useMantineTheme(), [q, G] = useState$1(!1), [ee, z] = useUncontrolled({
+  ]), F = x ?? getPrecision(b), V = useMantineTheme(), [q, G] = useState$1(!1), [ee, z] = useUncontrolled({
     value: typeof c == "number" ? clamp$1(c, g, h) : c,
     defaultValue: typeof v == "number" ? clamp$1(v, g, h) : v,
     finalValue: clamp$1(0, g, h),
     onChange: u
-  }), U = useRef$1(ee), te = useRef$1(), _ = useRef$1(), Q = getPosition({ value: ee, min: g, max: h }), ne = V(ee), re = typeof w == "function" ? w(ne) : w, $ = useCallback$1(({ x: Z }) => {
+  }), U = useRef$1(ee), te = useRef$1(), _ = useRef$1(), Q = getPosition({ value: ee, min: g, max: h }), ne = L(ee), re = typeof w == "function" ? w(ne) : w, $ = useCallback$1(({ x: Z }) => {
     if (!O) {
       const le = getChangeValue({ value: Z, min: g, max: h, step: b, precision: F });
       z(le), U.current = le;
     }
-  }, [O, g, h, b, F, z]), { ref: ae, active: se } = useMove($, { onScrubEnd: () => d == null ? void 0 : d(U.current) }, L.dir), K = (Z) => {
+  }, [O, g, h, b, F, z]), { ref: ae, active: se } = useMove($, { onScrubEnd: () => d == null ? void 0 : d(U.current) }, V.dir), K = (Z) => {
     if (!O)
       switch (Z.key) {
         case "ArrowUp": {
@@ -17607,7 +17630,7 @@ const defaultProps$7 = {
         }
         case "ArrowRight": {
           Z.preventDefault(), _.current.focus();
-          const le = getFloatingValue(Math.min(Math.max(L.dir === "rtl" ? ee - b : ee + b, g), h), F);
+          const le = getFloatingValue(Math.min(Math.max(V.dir === "rtl" ? ee - b : ee + b, g), h), F);
           d == null || d(le), z(le);
           break;
         }
@@ -17619,7 +17642,7 @@ const defaultProps$7 = {
         }
         case "ArrowLeft": {
           Z.preventDefault(), _.current.focus();
-          const le = getFloatingValue(Math.min(Math.max(L.dir === "rtl" ? ee + b : ee - b, g), h), F);
+          const le = getFloatingValue(Math.min(Math.max(V.dir === "rtl" ? ee + b : ee - b, g), h), F);
           d == null || d(le), z(le);
           break;
         }
@@ -17652,7 +17675,7 @@ const defaultProps$7 = {
     filled: Q,
     marks: E,
     size: m,
-    thumbSize: M,
+    thumbSize: B,
     radius: p,
     color: l,
     min: g,
@@ -17681,8 +17704,8 @@ const defaultProps$7 = {
     ref: _,
     labelTransition: A,
     labelTransitionDuration: P,
-    labelTransitionTimingFunction: R,
-    labelAlwaysOn: C,
+    labelTransitionTimingFunction: C,
+    labelAlwaysOn: R,
     classNames: a,
     styles: i,
     thumbLabel: I,
@@ -17690,7 +17713,7 @@ const defaultProps$7 = {
     isHovered: q,
     disabled: O,
     unstyled: T,
-    thumbSize: M,
+    thumbSize: B,
     variant: W
   }, k)), /* @__PURE__ */ React__default.createElement("input", {
     type: "hidden",
@@ -17966,8 +17989,8 @@ const defaultProps$3 = {}, Tab = forwardRef$1((r, n) => {
     classNames: h.classNames,
     styles: h.styles,
     variant: h.variant
-  }), w = a === h.value, A = h.getPanelId(a), P = h.mountedPanelIds.includes(a) ? A : void 0, R = (C) => {
-    h.onTabChange(h.allowTabDeactivation && a === h.value ? null : a), c == null || c(C);
+  }), w = a === h.value, A = h.getPanelId(a), P = h.mountedPanelIds.includes(a) ? A : void 0, C = (R) => {
+    h.onTabChange(h.allowTabDeactivation && a === h.value ? null : a), c == null || c(R);
   };
   return /* @__PURE__ */ React__default.createElement(UnstyledButton, __spreadProps$5(__spreadValues$6({}, g), {
     unstyled: h.unstyled,
@@ -17980,7 +18003,7 @@ const defaultProps$3 = {}, Tab = forwardRef$1((r, n) => {
     "aria-selected": w,
     tabIndex: w || h.value === null ? 0 : -1,
     "aria-controls": P,
-    onClick: R,
+    onClick: C,
     onKeyDown: createScopedKeydownHandler({
       siblingSelector: '[role="tab"]',
       parentSelector: '[role="tablist"]',
@@ -18019,7 +18042,7 @@ function TabsProvider({
   styles: S,
   unstyled: E
 }) {
-  const w = useId$2(c), [A, P] = useState$1([]), [R, C] = useUncontrolled({
+  const w = useId$2(c), [A, P] = useState$1([]), [C, R] = useUncontrolled({
     value: n,
     defaultValue: r,
     finalValue: null,
@@ -18028,14 +18051,14 @@ function TabsProvider({
   return /* @__PURE__ */ React__default.createElement(TabsContextProvider, {
     value: {
       placement: b,
-      value: R,
+      value: C,
       orientation: a,
       id: w,
       loop: l,
       activateTabWithKeyboard: u,
       getTabId: getSafeId(`${w}-tab`, TABS_ERRORS.value),
       getPanelId: getSafeId(`${w}-panel`, TABS_ERRORS.value),
-      onTabChange: C,
+      onTabChange: R,
       setMountedPanelIds: P,
       mountedPanelIds: A,
       allowTabDeactivation: d,
@@ -18101,8 +18124,8 @@ const defaultProps$2 = {
     radius: w,
     inverted: A,
     keepMounted: P,
-    placement: R
-  } = o, C = __objRest$4(o, [
+    placement: C
+  } = o, R = __objRest$4(o, [
     "defaultValue",
     "value",
     "orientation",
@@ -18122,7 +18145,7 @@ const defaultProps$2 = {
     "inverted",
     "keepMounted",
     "placement"
-  ]), { classes: I, cx: j } = useStyles$4({ orientation: l, color: b, radius: w, inverted: A, placement: R }, { unstyled: v, name: "Tabs", classNames: S, styles: E, variant: h });
+  ]), { classes: I, cx: j } = useStyles$4({ orientation: l, color: b, radius: w, inverted: A, placement: C }, { unstyled: v, name: "Tabs", classNames: S, styles: E, variant: h });
   return /* @__PURE__ */ React__default.createElement(TabsProvider, {
     activateTabWithKeyboard: u,
     defaultValue: a,
@@ -18137,11 +18160,11 @@ const defaultProps$2 = {
     radius: w,
     inverted: A,
     keepMounted: P,
-    placement: R,
+    placement: C,
     classNames: S,
     styles: E,
     unstyled: v
-  }, /* @__PURE__ */ React__default.createElement(Box, __spreadProps$4(__spreadValues$5({}, C), {
+  }, /* @__PURE__ */ React__default.createElement(Box, __spreadProps$4(__spreadValues$5({}, R), {
     className: j(I.root, x),
     id: p,
     ref: n
@@ -18537,8 +18560,8 @@ function stringify(r, n, o, a = {}) {
     const w = i ? " " : "", A = i ? `
 ` : "";
     let P = `var x${w}=${w}${E};${A}`;
-    for (const [R, C] of d.entries()) {
-      const I = quote_1.stringifyPath(R, v), j = quote_1.stringifyPath(C, v);
+    for (const [C, R] of d.entries()) {
+      const I = quote_1.stringifyPath(C, v), j = quote_1.stringifyPath(R, v);
       P += `x${I}${w}=${w}x${j};${A}`;
     }
     return `(function${w}()${w}{${A}${P}return x;${A}}())`;
@@ -18594,13 +18617,13 @@ function PanelWithForwardedRef({
     getPanelStyle: w,
     registerPanel: A,
     resizePanel: P,
-    unregisterPanel: R
-  } = x, C = useRef({
+    unregisterPanel: C
+  } = x, R = useRef({
     onCollapse: m,
     onResize: p
   });
   if (useEffect(() => {
-    C.current.onCollapse = m, C.current.onResize = p;
+    R.current.onCollapse = m, R.current.onResize = p;
   }), d < 0 || d > 100)
     throw Error(`Panel minSize must be between 0 and 100, but was ${d}`);
   if (u < 0 || u > 100)
@@ -18613,7 +18636,7 @@ function PanelWithForwardedRef({
   const I = w(v, i), j = useRef({
     size: parseSizeFromStyle(I)
   }), k = useRef({
-    callbacksRef: C,
+    callbacksRef: R,
     collapsedSize: o,
     collapsible: a,
     defaultSize: i,
@@ -18624,10 +18647,10 @@ function PanelWithForwardedRef({
     order: g
   });
   return useIsomorphicLayoutEffect(() => {
-    j.current.size = parseSizeFromStyle(I), k.current.callbacksRef = C, k.current.collapsedSize = o, k.current.collapsible = a, k.current.defaultSize = i, k.current.id = v, k.current.idWasAutoGenerated = c == null, k.current.maxSize = u, k.current.minSize = d, k.current.order = g;
+    j.current.size = parseSizeFromStyle(I), k.current.callbacksRef = R, k.current.collapsedSize = o, k.current.collapsible = a, k.current.defaultSize = i, k.current.id = v, k.current.idWasAutoGenerated = c == null, k.current.maxSize = u, k.current.minSize = d, k.current.order = g;
   }), useIsomorphicLayoutEffect(() => (A(v, k), () => {
-    R(v);
-  }), [g, v, A, R]), useImperativeHandle(l, () => ({
+    C(v);
+  }), [g, v, A, C]), useImperativeHandle(l, () => ({
     collapse: () => S(v),
     expand: () => E(v),
     getCollapsed() {
@@ -18802,23 +18825,23 @@ function useWindowSplitterPanelGroupBehavior({
       if (S == null || E == null)
         return () => {
         };
-      let w = 0, A = 100, P = 0, R = 0;
+      let w = 0, A = 100, P = 0, C = 0;
       v.forEach((T) => {
-        T.current.id === S ? (A = T.current.maxSize, w = T.current.minSize) : (P += T.current.minSize, R += T.current.maxSize);
+        T.current.id === S ? (A = T.current.maxSize, w = T.current.minSize) : (P += T.current.minSize, C += T.current.maxSize);
       });
-      const C = Math.min(A, 100 - P), I = Math.max(w, (v.length - 1) * 100 - R), j = getFlexGrow(u, S, i);
-      b.setAttribute("aria-valuemax", "" + Math.round(C)), b.setAttribute("aria-valuemin", "" + Math.round(I)), b.setAttribute("aria-valuenow", "" + Math.round(parseInt(j)));
+      const R = Math.min(A, 100 - P), I = Math.max(w, (v.length - 1) * 100 - C), j = getFlexGrow(u, S, i);
+      b.setAttribute("aria-valuemax", "" + Math.round(R)), b.setAttribute("aria-valuemin", "" + Math.round(I)), b.setAttribute("aria-valuenow", "" + Math.round(parseInt(j)));
       const k = (T) => {
         if (!T.defaultPrevented)
           switch (T.key) {
             case "Enter": {
               T.preventDefault();
-              const M = v.findIndex((V) => V.current.id === S);
-              if (M >= 0) {
-                const V = v[M], D = i[M];
+              const B = v.findIndex((L) => L.current.id === S);
+              if (B >= 0) {
+                const L = v[B], D = i[B];
                 if (D != null) {
                   let W = 0;
-                  D.toPrecision(PRECISION) <= V.current.minSize.toPrecision(PRECISION) ? W = c === "horizontal" ? p : m : W = -(c === "horizontal" ? p : m);
+                  D.toPrecision(PRECISION) <= L.current.minSize.toPrecision(PRECISION) ? W = c === "horizontal" ? p : m : W = -(c === "horizontal" ? p : m);
                   const J = adjustByDelta(T, u, S, E, W, i, l.current, null);
                   i !== J && a(J);
                 }
@@ -18926,10 +18949,10 @@ function getMovement(r, n, o, a, i, l, c) {
         E = -x;
         break;
     }
-    const [w, A] = getResizeHandlePanelIds(n, o, a), P = E < 0 ? w : A, R = a.findIndex((I) => I.current.id === P), C = a[R];
-    if (C.current.collapsible) {
-      const I = p[R];
-      (I === 0 || I.toPrecision(PRECISION) === C.current.minSize.toPrecision(PRECISION)) && (E = E < 0 ? -C.current.minSize * x : C.current.minSize * x);
+    const [w, A] = getResizeHandlePanelIds(n, o, a), P = E < 0 ? w : A, C = a.findIndex((I) => I.current.id === P), R = a[C];
+    if (R.current.collapsible) {
+      const I = p[C];
+      (I === 0 || I.toPrecision(PRECISION) === R.current.minSize.toPrecision(PRECISION)) && (E = E < 0 ? -R.current.minSize * x : R.current.minSize * x);
     }
     return E;
   } else
@@ -19062,7 +19085,7 @@ function PanelGroupWithForwardedRef({
   useEffect(() => {
     E.current.onLayout = u;
   });
-  const w = useRef({}), [A, P] = useState([]), R = useRef(/* @__PURE__ */ new Map()), C = useRef(0), I = useRef({
+  const w = useRef({}), [A, P] = useState([]), C = useRef(/* @__PURE__ */ new Map()), R = useRef(0), I = useRef({
     direction: a,
     panels: x,
     sizes: A
@@ -19075,8 +19098,8 @@ function PanelGroupWithForwardedRef({
       return F;
     },
     setLayout: (F) => {
-      const L = F.reduce((z, U) => z + U, 0);
-      assert(L === 100, "Panel sizes must add up to 100%");
+      const V = F.reduce((z, U) => z + U, 0);
+      assert(V === 100, "Panel sizes must add up to 100%");
       const {
         panels: q
       } = I.current, G = w.current, ee = panelsMapToSortedArray(q);
@@ -19090,29 +19113,29 @@ function PanelGroupWithForwardedRef({
     panels: x,
     setSizes: P,
     sizes: A,
-    panelSizeBeforeCollapse: R
+    panelSizeBeforeCollapse: C
   }), useEffect(() => {
     const {
       onLayout: F
     } = E.current, {
-      panels: L,
+      panels: V,
       sizes: q
     } = I.current;
     if (q.length > 0) {
       F && F(q);
-      const G = w.current, ee = panelsMapToSortedArray(L);
+      const G = w.current, ee = panelsMapToSortedArray(V);
       callPanelCallbacks(ee, q, G);
     }
   }, [A]), useIsomorphicLayoutEffect(() => {
     if (I.current.sizes.length === x.size)
       return;
-    let L = null;
+    let V = null;
     if (r) {
       const q = panelsMapToSortedArray(x);
-      L = loadPanelLayout(r, q, d);
+      V = loadPanelLayout(r, q, d);
     }
-    if (L != null)
-      P(L);
+    if (V != null)
+      P(V);
     else {
       const q = panelsMapToSortedArray(x);
       let G = 0, ee = 0, z = 0;
@@ -19134,13 +19157,13 @@ function PanelGroupWithForwardedRef({
       debounceMap[r] || (debounceMap[r] = debounce(savePanelGroupLayout, 100)), debounceMap[r](r, F, A, d);
     }
   }, [r, x, A, d]);
-  const j = useCallback((F, L) => {
+  const j = useCallback((F, V) => {
     const {
       panels: q
     } = I.current;
     return q.size === 0 ? {
       flexBasis: 0,
-      flexGrow: L ?? void 0,
+      flexGrow: V ?? void 0,
       flexShrink: 1,
       // Without this, Panel sizes may be unintentionally overridden by their content.
       overflow: "hidden"
@@ -19154,12 +19177,12 @@ function PanelGroupWithForwardedRef({
       // This avoid edge cases like nested iframes.
       pointerEvents: i && h !== null ? "none" : void 0
     };
-  }, [h, i, A]), k = useCallback((F, L) => {
+  }, [h, i, A]), k = useCallback((F, V) => {
     v((q) => {
       if (q.has(F))
         return q;
       const G = new Map(q);
-      return G.set(F, L), G;
+      return G.set(F, V), G;
     });
   }, []), O = useCallback((F) => (q) => {
     q.preventDefault();
@@ -19175,24 +19198,24 @@ function PanelGroupWithForwardedRef({
       return;
     const re = getPanelGroup(g).getBoundingClientRect(), $ = G === "horizontal";
     document.dir === "rtl" && $ && (Q = -Q);
-    const ae = $ ? re.width : re.height, se = Q / ae * 100, K = adjustByDelta(q, ee, te, _, se, z, R.current, S.current), Z = !areEqual(z, K);
-    if ((isMouseEvent(q) || isTouchEvent(q)) && C.current != se && setGlobalCursorStyle(Z ? $ ? "horizontal" : "vertical" : $ ? Q < 0 ? "horizontal-min" : "horizontal-max" : Q < 0 ? "vertical-min" : "vertical-max"), Z) {
+    const ae = $ ? re.width : re.height, se = Q / ae * 100, K = adjustByDelta(q, ee, te, _, se, z, C.current, S.current), Z = !areEqual(z, K);
+    if ((isMouseEvent(q) || isTouchEvent(q)) && R.current != se && setGlobalCursorStyle(Z ? $ ? "horizontal" : "vertical" : $ ? Q < 0 ? "horizontal-min" : "horizontal-max" : Q < 0 ? "vertical-min" : "vertical-max"), Z) {
       const le = w.current;
       P(K), callPanelCallbacks(U, K, le);
     }
-    C.current = se;
+    R.current = se;
   }, [g]), T = useCallback((F) => {
-    v((L) => {
-      if (!L.has(F))
-        return L;
-      const q = new Map(L);
+    v((V) => {
+      if (!V.has(F))
+        return V;
+      const q = new Map(V);
       return q.delete(F), q;
     });
-  }, []), M = useCallback((F) => {
+  }, []), B = useCallback((F) => {
     const {
-      panels: L,
+      panels: V,
       sizes: q
-    } = I.current, G = L.get(F);
+    } = I.current, G = V.get(F);
     if (G == null)
       return;
     const {
@@ -19201,46 +19224,46 @@ function PanelGroupWithForwardedRef({
     } = G.current;
     if (!z)
       return;
-    const U = panelsMapToSortedArray(L), te = U.indexOf(G);
+    const U = panelsMapToSortedArray(V), te = U.indexOf(G);
     if (te < 0)
       return;
     const _ = q[te];
     if (_ === ee)
       return;
-    R.current.set(F, _);
+    C.current.set(F, _);
     const [Q, ne] = getBeforeAndAfterIds(F, U);
     if (Q == null || ne == null)
       return;
-    const $ = te === U.length - 1 ? _ : ee - _, ae = adjustByDelta(null, L, Q, ne, $, q, R.current, null);
+    const $ = te === U.length - 1 ? _ : ee - _, ae = adjustByDelta(null, V, Q, ne, $, q, C.current, null);
     if (q !== ae) {
       const se = w.current;
       P(ae), callPanelCallbacks(U, ae, se);
     }
-  }, []), V = useCallback((F) => {
+  }, []), L = useCallback((F) => {
     const {
-      panels: L,
+      panels: V,
       sizes: q
-    } = I.current, G = L.get(F);
+    } = I.current, G = V.get(F);
     if (G == null)
       return;
     const {
       collapsedSize: ee,
       minSize: z
-    } = G.current, U = R.current.get(F) || z;
+    } = G.current, U = C.current.get(F) || z;
     if (!U)
       return;
-    const te = panelsMapToSortedArray(L), _ = te.indexOf(G);
+    const te = panelsMapToSortedArray(V), _ = te.indexOf(G);
     if (_ < 0 || q[_] !== ee)
       return;
     const [ne, re] = getBeforeAndAfterIds(F, te);
     if (ne == null || re == null)
       return;
-    const ae = _ === te.length - 1 ? ee - U : U, se = adjustByDelta(null, L, ne, re, ae, q, R.current, null);
+    const ae = _ === te.length - 1 ? ee - U : U, se = adjustByDelta(null, V, ne, re, ae, q, C.current, null);
     if (q !== se) {
       const K = w.current;
       P(se), callPanelCallbacks(te, se, K);
     }
-  }, []), D = useCallback((F, L) => {
+  }, []), D = useCallback((F, V) => {
     const {
       panels: q,
       sizes: G
@@ -19256,33 +19279,33 @@ function PanelGroupWithForwardedRef({
     if (ne < 0)
       return;
     const re = G[ne];
-    if (re === L)
+    if (re === V)
       return;
-    U && L === z || (L = Math.min(te, Math.max(_, L)));
+    U && V === z || (V = Math.min(te, Math.max(_, V)));
     const [$, ae] = getBeforeAndAfterIds(F, Q);
     if ($ == null || ae == null)
       return;
-    const K = ne === Q.length - 1 ? re - L : L - re, Z = adjustByDelta(null, q, $, ae, K, G, R.current, null);
+    const K = ne === Q.length - 1 ? re - V : V - re, Z = adjustByDelta(null, q, $, ae, K, G, C.current, null);
     if (G !== Z) {
       const le = w.current;
       P(Z), callPanelCallbacks(Q, Z, le);
     }
   }, []), W = useMemo(() => ({
     activeHandleId: h,
-    collapsePanel: M,
+    collapsePanel: B,
     direction: a,
-    expandPanel: V,
+    expandPanel: L,
     getPanelStyle: j,
     groupId: g,
     registerPanel: k,
     registerResizeHandle: O,
     resizePanel: D,
-    startDragging: (F, L) => {
-      if (b(F), isMouseEvent(L) || isTouchEvent(L)) {
+    startDragging: (F, V) => {
+      if (b(F), isMouseEvent(V) || isTouchEvent(V)) {
         const q = getResizeHandle(F);
         S.current = {
           dragHandleRect: q.getBoundingClientRect(),
-          dragOffset: getDragOffset(L, F, a),
+          dragOffset: getDragOffset(V, F, a),
           sizes: I.current.sizes
         };
       }
@@ -19291,7 +19314,7 @@ function PanelGroupWithForwardedRef({
       resetGlobalCursorStyle(), b(null), S.current = null;
     },
     unregisterPanel: T
-  }), [h, M, a, V, j, g, k, O, D, T]), J = {
+  }), [h, B, a, L, j, g, k, O, D, T]), J = {
     display: "flex",
     flexDirection: a === "horizontal" ? "row" : "column",
     height: "100%",
@@ -19344,7 +19367,7 @@ function PanelResizeHandle$1({
     registerResizeHandle: b,
     startDragging: x,
     stopDragging: v
-  } = m, S = useUniqueId(a), E = p === S, [w, A] = useState(!1), [P, R] = useState(null), C = useCallback(() => {
+  } = m, S = useUniqueId(a), E = p === S, [w, A] = useState(!1), [P, C] = useState(null), R = useCallback(() => {
     u.current.blur(), v();
     const {
       onDragging: k
@@ -19353,23 +19376,23 @@ function PanelResizeHandle$1({
   }, [v]);
   useEffect(() => {
     if (o)
-      R(null);
+      C(null);
     else {
       const j = b(S);
-      R(() => j);
+      C(() => j);
     }
   }, [o, S, b]), useEffect(() => {
     if (o || P == null || !E)
       return;
-    const j = (M) => {
-      P(M);
-    }, k = (M) => {
-      P(M);
+    const j = (B) => {
+      P(B);
+    }, k = (B) => {
+      P(B);
     }, T = u.current.ownerDocument;
-    return T.body.addEventListener("contextmenu", C), T.body.addEventListener("mousemove", j), T.body.addEventListener("touchmove", j), T.body.addEventListener("mouseleave", k), window.addEventListener("mouseup", C), window.addEventListener("touchend", C), () => {
-      T.body.removeEventListener("contextmenu", C), T.body.removeEventListener("mousemove", j), T.body.removeEventListener("touchmove", j), T.body.removeEventListener("mouseleave", k), window.removeEventListener("mouseup", C), window.removeEventListener("touchend", C);
+    return T.body.addEventListener("contextmenu", R), T.body.addEventListener("mousemove", j), T.body.addEventListener("touchmove", j), T.body.addEventListener("mouseleave", k), window.addEventListener("mouseup", R), window.addEventListener("touchend", R), () => {
+      T.body.removeEventListener("contextmenu", R), T.body.removeEventListener("mousemove", j), T.body.removeEventListener("touchmove", j), T.body.removeEventListener("mouseleave", k), window.removeEventListener("mouseup", R), window.removeEventListener("touchend", R);
     };
-  }, [g, o, E, P, C]), useWindowSplitterResizeHandlerBehavior({
+  }, [g, o, E, P, R]), useWindowSplitterResizeHandlerBehavior({
     disabled: o,
     handleId: S,
     resizeHandler: P
@@ -19396,9 +19419,9 @@ function PanelResizeHandle$1({
       } = d.current;
       k && k(!0);
     },
-    onMouseUp: C,
-    onTouchCancel: C,
-    onTouchEnd: C,
+    onMouseUp: R,
+    onTouchCancel: R,
+    onTouchEnd: R,
     onTouchStart: (j) => {
       x(S, j.nativeEvent);
       const {
@@ -19604,17 +19627,17 @@ function JSONNestedNode(r) {
     ...r,
     circularCache: n,
     level: g + 1
-  }) : null, P = /* @__PURE__ */ React__default.createElement("span", v("nestedNodeItemType", S), b), R = c(h, i, P, a(i, o), m), C = [m, h, S, l];
-  return u ? /* @__PURE__ */ React__default.createElement("li", v("rootNode", ...C), /* @__PURE__ */ React__default.createElement("ul", v("rootNodeChildren", ...C), A)) : /* @__PURE__ */ React__default.createElement("li", v("nestedNode", ...C), l && /* @__PURE__ */ React__default.createElement(JSONArrow, {
+  }) : null, P = /* @__PURE__ */ React__default.createElement("span", v("nestedNodeItemType", S), b), C = c(h, i, P, a(i, o), m), R = [m, h, S, l];
+  return u ? /* @__PURE__ */ React__default.createElement("li", v("rootNode", ...R), /* @__PURE__ */ React__default.createElement("ul", v("rootNodeChildren", ...R), A)) : /* @__PURE__ */ React__default.createElement("li", v("nestedNode", ...R), l && /* @__PURE__ */ React__default.createElement(JSONArrow, {
     styling: v,
     nodeType: h,
     expanded: S,
     onClick: w
-  }), /* @__PURE__ */ React__default.createElement("label", _extends$1({}, v(["label", "nestedNodeLabel"], ...C), {
+  }), /* @__PURE__ */ React__default.createElement("label", _extends$1({}, v(["label", "nestedNodeLabel"], ...R), {
     onClick: w
-  }), p(...C)), /* @__PURE__ */ React__default.createElement("span", _extends$1({}, v("nestedNodeItemString", ...C), {
+  }), p(...R)), /* @__PURE__ */ React__default.createElement("span", _extends$1({}, v("nestedNodeItemString", ...R), {
     onClick: w
-  }), R), /* @__PURE__ */ React__default.createElement("ul", v("nestedNodeChildren", ...C), A));
+  }), C), /* @__PURE__ */ React__default.createElement("ul", v("nestedNodeChildren", ...R), A));
 }
 function createItemString$2(r) {
   const n = Object.getOwnPropertyNames(r).length;
@@ -21796,9 +21819,9 @@ function createHybrid(r, n, o, a, i, l, c, u, d, m) {
     for (var E = arguments.length, w = Array(E), A = E; A--; )
       w[A] = arguments[A];
     if (b)
-      var P = getHolder(S), R = countHolders(w, P);
-    if (a && (w = composeArgs(w, a, i, b)), l && (w = composeArgsRight(w, l, c, b)), E -= R, b && E < m) {
-      var C = replaceHolders(w, P);
+      var P = getHolder(S), C = countHolders(w, P);
+    if (a && (w = composeArgs(w, a, i, b)), l && (w = composeArgsRight(w, l, c, b)), E -= C, b && E < m) {
+      var R = replaceHolders(w, P);
       return createRecurry(
         r,
         n,
@@ -21806,7 +21829,7 @@ function createHybrid(r, n, o, a, i, l, c, u, d, m) {
         S.placeholder,
         o,
         w,
-        C,
+        R,
         u,
         d,
         m - E
@@ -22676,8 +22699,8 @@ var Prism$1 = function() {
             b.hasOwnProperty(E) || (S[E] = v[E]);
           }
         var A = x[g];
-        return x[g] = S, a.languages.DFS(a.languages, function(P, R) {
-          R === A && P != g && (this[P] = S);
+        return x[g] = S, a.languages.DFS(a.languages, function(P, C) {
+          C === A && P != g && (this[P] = S);
         }), S;
       },
       // Traverse a language definition with Depth First Search
@@ -22839,41 +22862,41 @@ var Prism$1 = function() {
         for (var A = 0; A < w.length; ++A) {
           if (S && S.cause == E + "," + A)
             return;
-          var P = w[A], R = P.inside, C = !!P.lookbehind, I = !!P.greedy, j = P.alias;
+          var P = w[A], C = P.inside, R = !!P.lookbehind, I = !!P.greedy, j = P.alias;
           if (I && !P.pattern.global) {
             var k = P.pattern.toString().match(/[imsuy]*$/)[0];
             P.pattern = RegExp(P.pattern.source, k + "g");
           }
-          for (var O = P.pattern || P, T = x.next, M = v; T !== h.tail && !(S && M >= S.reach); M += T.value.length, T = T.next) {
-            var V = T.value;
+          for (var O = P.pattern || P, T = x.next, B = v; T !== h.tail && !(S && B >= S.reach); B += T.value.length, T = T.next) {
+            var L = T.value;
             if (h.length > g.length)
               return;
-            if (!(V instanceof i)) {
+            if (!(L instanceof i)) {
               var D = 1, W;
               if (I) {
-                if (W = l(O, M, g, C), !W || W.index >= g.length)
+                if (W = l(O, B, g, R), !W || W.index >= g.length)
                   break;
-                var q = W.index, J = W.index + W[0].length, F = M;
+                var q = W.index, J = W.index + W[0].length, F = B;
                 for (F += T.value.length; q >= F; )
                   T = T.next, F += T.value.length;
-                if (F -= T.value.length, M = F, T.value instanceof i)
+                if (F -= T.value.length, B = F, T.value instanceof i)
                   continue;
-                for (var L = T; L !== h.tail && (F < J || typeof L.value == "string"); L = L.next)
-                  D++, F += L.value.length;
-                D--, V = g.slice(M, F), W.index -= M;
-              } else if (W = l(O, 0, V, C), !W)
+                for (var V = T; V !== h.tail && (F < J || typeof V.value == "string"); V = V.next)
+                  D++, F += V.value.length;
+                D--, L = g.slice(B, F), W.index -= B;
+              } else if (W = l(O, 0, L, R), !W)
                 continue;
-              var q = W.index, G = W[0], ee = V.slice(0, q), z = V.slice(q + G.length), U = M + V.length;
+              var q = W.index, G = W[0], ee = L.slice(0, q), z = L.slice(q + G.length), U = B + L.length;
               S && U > S.reach && (S.reach = U);
               var te = T.prev;
-              ee && (te = d(h, te, ee), M += ee.length), m(h, te, D);
-              var _ = new i(E, R ? a.tokenize(G, R) : G, j, G);
+              ee && (te = d(h, te, ee), B += ee.length), m(h, te, D);
+              var _ = new i(E, C ? a.tokenize(G, C) : G, j, G);
               if (T = d(h, te, _), z && d(h, T, z), D > 1) {
                 var Q = {
                   cause: E + "," + A,
                   reach: U
                 };
-                c(g, h, b, T.prev, M, Q), S && Q.reach > S.reach && (S.reach = Q.reach);
+                c(g, h, b, T.prev, B, Q), S && Q.reach > S.reach && (S.reach = Q.reach);
               }
             }
           }
@@ -24357,34 +24380,34 @@ prism.languages.sql = {
       for (var j = I.content, k; b.indexOf(k = u(E++, v)) !== -1; )
         ;
       return w[k] = j, k;
-    }).join(""), P = d(A, x, v), R = Object.keys(w);
+    }).join(""), P = d(A, x, v), C = Object.keys(w);
     E = 0;
-    function C(I) {
+    function R(I) {
       for (var j = 0; j < I.length; j++) {
-        if (E >= R.length)
+        if (E >= C.length)
           return;
         var k = I[j];
         if (typeof k == "string" || typeof k.content == "string") {
-          var O = R[E], T = typeof k == "string" ? k : (
+          var O = C[E], T = typeof k == "string" ? k : (
             /** @type {string} */
             k.content
-          ), M = T.indexOf(O);
-          if (M !== -1) {
+          ), B = T.indexOf(O);
+          if (B !== -1) {
             ++E;
-            var V = T.substring(0, M), D = m(w[O]), W = T.substring(M + O.length), J = [];
-            if (V && J.push(V), J.push(D), W) {
+            var L = T.substring(0, B), D = m(w[O]), W = T.substring(B + O.length), J = [];
+            if (L && J.push(L), J.push(D), W) {
               var F = [W];
-              C(F), J.push.apply(J, F);
+              R(F), J.push.apply(J, F);
             }
             typeof k == "string" ? (I.splice.apply(I, [j, 1].concat(J)), j += J.length - 1) : k.content = J;
           }
         } else {
-          var L = k.content;
-          Array.isArray(L) ? C(L) : C([L]);
+          var V = k.content;
+          Array.isArray(V) ? R(V) : R([V]);
         }
       }
     }
-    return C(P), new r.Token(v, P, "language-" + v, b);
+    return R(P), new r.Token(v, P, "language-" + v, b);
   }
   var g = {
     javascript: !0,
@@ -24409,10 +24432,10 @@ prism.languages.sql = {
           if (w.type === "template-string") {
             var P = A[1];
             if (A.length === 3 && typeof P != "string" && P.type === "embedded-code") {
-              var R = h(P), C = P.alias, I = Array.isArray(C) ? C[0] : C, j = r.languages[I];
+              var C = h(P), R = P.alias, I = Array.isArray(R) ? R[0] : R, j = r.languages[I];
               if (!j)
                 continue;
-              A[1] = p(R, j, I);
+              A[1] = p(C, j, I);
             }
           } else
             x(A);
@@ -25880,11 +25903,11 @@ const prismDefaultProps = {
     "radius",
     "getPrismTheme",
     "variant"
-  ]), R = v && typeof i == "string" ? i.trim() : i, C = R.split(`
+  ]), C = v && typeof i == "string" ? i.trim() : i, R = C.split(`
 `).length.toString().length, I = useMantineTheme(), j = useClipboard(), k = x || I.colorScheme, { classes: O, cx: T } = useStyles$2({
     colorScheme: k,
     native: b !== ScrollArea,
-    maxLineSize: C,
+    maxLineSize: R,
     radius: E
   }, { name: "Prism", classNames: u, styles: d, unstyled: S, variant: A });
   return /* @__PURE__ */ React__default.createElement(Box, __spreadProps$2(__spreadValues$2({
@@ -25903,17 +25926,17 @@ const prismDefaultProps = {
   }, /* @__PURE__ */ React__default.createElement(ActionIcon, {
     className: O.copy,
     "aria-label": j.copied ? p : m,
-    onClick: () => j.copy(R),
+    onClick: () => j.copy(C),
     unstyled: S
   }, /* @__PURE__ */ React__default.createElement(CopyIcon, {
     copied: j.copied
   }))), /* @__PURE__ */ React__default.createElement(Highlight$1, __spreadProps$2(__spreadValues$2({}, defaultProps), {
     theme: w(I, k),
-    code: R,
+    code: C,
     language: l
   }), ({
-    className: M,
-    style: V,
+    className: B,
+    style: L,
     tokens: D,
     getLineProps: W,
     getTokenProps: J
@@ -25921,15 +25944,15 @@ const prismDefaultProps = {
     className: O.scrollArea,
     dir: "ltr"
   }, /* @__PURE__ */ React__default.createElement("pre", {
-    className: T(O.code, M),
-    style: V,
+    className: T(O.code, B),
+    style: L,
     dir: "ltr"
-  }, D.map((F, L) => {
+  }, D.map((F, V) => {
     var q, G, ee, z;
-    if (L === D.length - 1 && F.length === 1 && F[0].content === `
+    if (V === D.length - 1 && F.length === 1 && F[0].content === `
 `)
       return null;
-    const U = L + 1, te = W({ line: F, key: L }), _ = U in h, Q = k === "dark" ? I.fn.rgba(I.fn.themeColor((q = h[U]) == null ? void 0 : q.color, 9), 0.25) : I.fn.themeColor((G = h[U]) == null ? void 0 : G.color, 0);
+    const U = V + 1, te = W({ line: F, key: V }), _ = U in h, Q = k === "dark" ? I.fn.rgba(I.fn.themeColor((q = h[U]) == null ? void 0 : q.color, 9), 0.25) : I.fn.themeColor((G = h[U]) == null ? void 0 : G.color, 0);
     return /* @__PURE__ */ React__default.createElement("div", __spreadProps$2(__spreadValues$2({}, te), {
       className: T(O.line, te.className),
       style: __spreadValues$2({}, _ ? { backgroundColor: Q } : null)
@@ -26158,10 +26181,10 @@ var diffMatchPatch = { exports: {} };
     for (var d = l.length, m = c.length, p = Math.ceil((d + m) / 2), g = p, h = 2 * p, b = new Array(h), x = new Array(h), v = 0; v < h; v++)
       b[v] = -1, x[v] = -1;
     b[g + 1] = 0, x[g + 1] = 0;
-    for (var S = d - m, E = S % 2 != 0, w = 0, A = 0, P = 0, R = 0, C = 0; C < p && !((/* @__PURE__ */ new Date()).getTime() > u); C++) {
-      for (var I = -C + w; I <= C - A; I += 2) {
+    for (var S = d - m, E = S % 2 != 0, w = 0, A = 0, P = 0, C = 0, R = 0; R < p && !((/* @__PURE__ */ new Date()).getTime() > u); R++) {
+      for (var I = -R + w; I <= R - A; I += 2) {
         var j = g + I, k;
-        I == -C || I != C && b[j - 1] < b[j + 1] ? k = b[j + 1] : k = b[j - 1] + 1;
+        I == -R || I != R && b[j - 1] < b[j + 1] ? k = b[j + 1] : k = b[j - 1] + 1;
         for (var O = k - I; k < d && O < m && l.charAt(k) == c.charAt(O); )
           k++, O++;
         if (b[j] = k, k > d)
@@ -26171,26 +26194,26 @@ var diffMatchPatch = { exports: {} };
         else if (E) {
           var T = g + S - I;
           if (T >= 0 && T < h && x[T] != -1) {
-            var M = d - x[T];
-            if (k >= M)
+            var B = d - x[T];
+            if (k >= B)
               return this.diff_bisectSplit_(l, c, k, O, u);
           }
         }
       }
-      for (var V = -C + P; V <= C - R; V += 2) {
-        var T = g + V, M;
-        V == -C || V != C && x[T - 1] < x[T + 1] ? M = x[T + 1] : M = x[T - 1] + 1;
-        for (var D = M - V; M < d && D < m && l.charAt(d - M - 1) == c.charAt(m - D - 1); )
-          M++, D++;
-        if (x[T] = M, M > d)
-          R += 2;
+      for (var L = -R + P; L <= R - C; L += 2) {
+        var T = g + L, B;
+        L == -R || L != R && x[T - 1] < x[T + 1] ? B = x[T + 1] : B = x[T - 1] + 1;
+        for (var D = B - L; B < d && D < m && l.charAt(d - B - 1) == c.charAt(m - D - 1); )
+          B++, D++;
+        if (x[T] = B, B > d)
+          C += 2;
         else if (D > m)
           P += 2;
         else if (!E) {
-          var j = g + S - V;
+          var j = g + S - L;
           if (j >= 0 && j < h && b[j] != -1) {
             var k = b[j], O = g + k - j;
-            if (M = d - M, k >= M)
+            if (B = d - B, k >= B)
               return this.diff_bisectSplit_(l, c, k, O, u);
           }
         }
@@ -26258,22 +26281,22 @@ var diffMatchPatch = { exports: {} };
     if (u.length < 4 || d.length * 2 < u.length)
       return null;
     var m = this;
-    function p(A, P, R) {
-      for (var C = A.substring(R, R + Math.floor(A.length / 4)), I = -1, j = "", k, O, T, M; (I = P.indexOf(C, I + 1)) != -1; ) {
-        var V = m.diff_commonPrefix(
-          A.substring(R),
+    function p(A, P, C) {
+      for (var R = A.substring(C, C + Math.floor(A.length / 4)), I = -1, j = "", k, O, T, B; (I = P.indexOf(R, I + 1)) != -1; ) {
+        var L = m.diff_commonPrefix(
+          A.substring(C),
           P.substring(I)
         ), D = m.diff_commonSuffix(
-          A.substring(0, R),
+          A.substring(0, C),
           P.substring(0, I)
         );
-        j.length < D + V && (j = P.substring(I - D, I) + P.substring(I, I + V), k = A.substring(0, R - D), O = A.substring(R + V), T = P.substring(0, I - D), M = P.substring(I + V));
+        j.length < D + L && (j = P.substring(I - D, I) + P.substring(I, I + L), k = A.substring(0, C - D), O = A.substring(C + L), T = P.substring(0, I - D), B = P.substring(I + L));
       }
       return j.length * 2 >= A.length ? [
         k,
         O,
         T,
-        M,
+        B,
         j
       ] : null;
     }
@@ -26320,8 +26343,8 @@ var diffMatchPatch = { exports: {} };
     function c(w, A) {
       if (!w || !A)
         return 6;
-      var P = w.charAt(w.length - 1), R = A.charAt(0), C = P.match(n.nonAlphaNumericRegex_), I = R.match(n.nonAlphaNumericRegex_), j = C && P.match(n.whitespaceRegex_), k = I && R.match(n.whitespaceRegex_), O = j && P.match(n.linebreakRegex_), T = k && R.match(n.linebreakRegex_), M = O && w.match(n.blanklineEndRegex_), V = T && A.match(n.blanklineStartRegex_);
-      return M || V ? 5 : O || T ? 4 : C && !j && k ? 3 : j || k ? 2 : C || I ? 1 : 0;
+      var P = w.charAt(w.length - 1), C = A.charAt(0), R = P.match(n.nonAlphaNumericRegex_), I = C.match(n.nonAlphaNumericRegex_), j = R && P.match(n.whitespaceRegex_), k = I && C.match(n.whitespaceRegex_), O = j && P.match(n.linebreakRegex_), T = k && C.match(n.linebreakRegex_), B = O && w.match(n.blanklineEndRegex_), L = T && A.match(n.blanklineStartRegex_);
+      return B || L ? 5 : O || T ? 4 : R && !j && k ? 3 : j || k ? 2 : R || I ? 1 : 0;
     }
     for (var u = 1; u < l.length - 1; ) {
       if (l[u - 1][0] == i && l[u + 1][0] == i) {
@@ -26472,8 +26495,8 @@ var diffMatchPatch = { exports: {} };
       throw new Error("Pattern too long for this browser.");
     var d = this.match_alphabet_(c), m = this;
     function p(k, O) {
-      var T = k / c.length, M = Math.abs(u - O);
-      return m.Match_Distance ? T + M / m.Match_Distance : M ? 1 : T;
+      var T = k / c.length, B = Math.abs(u - O);
+      return m.Match_Distance ? T + B / m.Match_Distance : B ? 1 : T;
     }
     var g = this.Match_Threshold, h = l.indexOf(c, u);
     h != -1 && (g = Math.min(p(0, h), g), h = l.lastIndexOf(c, u + c.length), h != -1 && (g = Math.min(p(0, h), g)));
@@ -26483,14 +26506,14 @@ var diffMatchPatch = { exports: {} };
       for (x = 0, v = S; x < v; )
         p(w, u + v) <= g ? x = v : S = v, v = Math.floor((S - x) / 2 + x);
       S = v;
-      var A = Math.max(1, u - v + 1), P = Math.min(u + v, l.length) + c.length, R = Array(P + 2);
-      R[P + 1] = (1 << w) - 1;
-      for (var C = P; C >= A; C--) {
-        var I = d[l.charAt(C - 1)];
-        if (w === 0 ? R[C] = (R[C + 1] << 1 | 1) & I : R[C] = (R[C + 1] << 1 | 1) & I | ((E[C + 1] | E[C]) << 1 | 1) | E[C + 1], R[C] & b) {
-          var j = p(w, C - 1);
+      var A = Math.max(1, u - v + 1), P = Math.min(u + v, l.length) + c.length, C = Array(P + 2);
+      C[P + 1] = (1 << w) - 1;
+      for (var R = P; R >= A; R--) {
+        var I = d[l.charAt(R - 1)];
+        if (w === 0 ? C[R] = (C[R + 1] << 1 | 1) & I : C[R] = (C[R + 1] << 1 | 1) & I | ((E[R + 1] | E[R]) << 1 | 1) | E[R + 1], C[R] & b) {
+          var j = p(w, R - 1);
           if (j <= g)
-            if (g = j, h = C - 1, h > u)
+            if (g = j, h = R - 1, h > u)
               A = Math.max(1, 2 * u - h);
             else
               break;
@@ -26498,7 +26521,7 @@ var diffMatchPatch = { exports: {} };
       }
       if (p(w + 1, u) > g)
         break;
-      E = R;
+      E = C;
     }
     return h;
   }, n.prototype.match_alphabet_ = function(l) {
@@ -27877,19 +27900,19 @@ const diffFilter$2 = function r(n) {
   n.options && n.options.arrays && n.options.arrays.includeValueOnMove && (A = !0);
   const P = E.length;
   for (l = a; l < g - i; l++) {
-    const R = arrayIndexOf(S.indices2, l - a);
-    if (R < 0) {
-      let C = !1;
+    const C = arrayIndexOf(S.indices2, l - a);
+    if (C < 0) {
+      let R = !1;
       if (w && P > 0) {
         for (let I = 0; I < P; I++)
           if (c = E[I], matchItems(x, v, c - a, l - a, o)) {
-            b[`_${c}`].splice(1, 2, l, ARRAY_MOVE), A || (b[`_${c}`][0] = ""), u = l, h = new DiffContext(n.left[c], n.right[u]), n.push(h, u), E.splice(I, 1), C = !0;
+            b[`_${c}`].splice(1, 2, l, ARRAY_MOVE), A || (b[`_${c}`][0] = ""), u = l, h = new DiffContext(n.left[c], n.right[u]), n.push(h, u), E.splice(I, 1), R = !0;
             break;
           }
       }
-      C || (b[l] = [m[l]]);
+      R || (b[l] = [m[l]]);
     } else
-      c = S.indices1[R] + a, u = S.indices2[R] + a, h = new DiffContext(n.left[c], n.right[u]), n.push(h, u);
+      c = S.indices1[C] + a, u = S.indices2[C] + a, h = new DiffContext(n.left[c], n.right[u]), n.push(h, u);
   }
   n.setResult(b).exit();
 };
@@ -28322,27 +28345,27 @@ var require_react_is_production_min = __commonJS({
   "node_modules/.pnpm/react-is@16.13.1/node_modules/react-is/cjs/react-is.production.min.js"(r) {
     init_react_shim();
     var n = typeof Symbol == "function" && Symbol.for, o = n ? Symbol.for("react.element") : 60103, a = n ? Symbol.for("react.portal") : 60106, i = n ? Symbol.for("react.fragment") : 60107, l = n ? Symbol.for("react.strict_mode") : 60108, c = n ? Symbol.for("react.profiler") : 60114, u = n ? Symbol.for("react.provider") : 60109, d = n ? Symbol.for("react.context") : 60110, m = n ? Symbol.for("react.async_mode") : 60111, p = n ? Symbol.for("react.concurrent_mode") : 60111, g = n ? Symbol.for("react.forward_ref") : 60112, h = n ? Symbol.for("react.suspense") : 60113, b = n ? Symbol.for("react.suspense_list") : 60120, x = n ? Symbol.for("react.memo") : 60115, v = n ? Symbol.for("react.lazy") : 60116, S = n ? Symbol.for("react.block") : 60121, E = n ? Symbol.for("react.fundamental") : 60117, w = n ? Symbol.for("react.responder") : 60118, A = n ? Symbol.for("react.scope") : 60119;
-    function P(C) {
-      if (typeof C == "object" && C !== null) {
-        var I = C.$$typeof;
+    function P(R) {
+      if (typeof R == "object" && R !== null) {
+        var I = R.$$typeof;
         switch (I) {
           case o:
-            switch (C = C.type, C) {
+            switch (R = R.type, R) {
               case m:
               case p:
               case i:
               case c:
               case l:
               case h:
-                return C;
+                return R;
               default:
-                switch (C = C && C.$$typeof, C) {
+                switch (R = R && R.$$typeof, R) {
                   case d:
                   case g:
                   case v:
                   case x:
                   case u:
-                    return C;
+                    return R;
                   default:
                     return I;
                 }
@@ -28352,35 +28375,35 @@ var require_react_is_production_min = __commonJS({
         }
       }
     }
-    function R(C) {
-      return P(C) === p;
-    }
-    r.AsyncMode = m, r.ConcurrentMode = p, r.ContextConsumer = d, r.ContextProvider = u, r.Element = o, r.ForwardRef = g, r.Fragment = i, r.Lazy = v, r.Memo = x, r.Portal = a, r.Profiler = c, r.StrictMode = l, r.Suspense = h, r.isAsyncMode = function(C) {
-      return R(C) || P(C) === m;
-    }, r.isConcurrentMode = R, r.isContextConsumer = function(C) {
-      return P(C) === d;
-    }, r.isContextProvider = function(C) {
-      return P(C) === u;
-    }, r.isElement = function(C) {
-      return typeof C == "object" && C !== null && C.$$typeof === o;
-    }, r.isForwardRef = function(C) {
-      return P(C) === g;
-    }, r.isFragment = function(C) {
-      return P(C) === i;
-    }, r.isLazy = function(C) {
-      return P(C) === v;
-    }, r.isMemo = function(C) {
-      return P(C) === x;
-    }, r.isPortal = function(C) {
-      return P(C) === a;
-    }, r.isProfiler = function(C) {
-      return P(C) === c;
-    }, r.isStrictMode = function(C) {
-      return P(C) === l;
-    }, r.isSuspense = function(C) {
-      return P(C) === h;
-    }, r.isValidElementType = function(C) {
-      return typeof C == "string" || typeof C == "function" || C === i || C === p || C === c || C === l || C === h || C === b || typeof C == "object" && C !== null && (C.$$typeof === v || C.$$typeof === x || C.$$typeof === u || C.$$typeof === d || C.$$typeof === g || C.$$typeof === E || C.$$typeof === w || C.$$typeof === A || C.$$typeof === S);
+    function C(R) {
+      return P(R) === p;
+    }
+    r.AsyncMode = m, r.ConcurrentMode = p, r.ContextConsumer = d, r.ContextProvider = u, r.Element = o, r.ForwardRef = g, r.Fragment = i, r.Lazy = v, r.Memo = x, r.Portal = a, r.Profiler = c, r.StrictMode = l, r.Suspense = h, r.isAsyncMode = function(R) {
+      return C(R) || P(R) === m;
+    }, r.isConcurrentMode = C, r.isContextConsumer = function(R) {
+      return P(R) === d;
+    }, r.isContextProvider = function(R) {
+      return P(R) === u;
+    }, r.isElement = function(R) {
+      return typeof R == "object" && R !== null && R.$$typeof === o;
+    }, r.isForwardRef = function(R) {
+      return P(R) === g;
+    }, r.isFragment = function(R) {
+      return P(R) === i;
+    }, r.isLazy = function(R) {
+      return P(R) === v;
+    }, r.isMemo = function(R) {
+      return P(R) === x;
+    }, r.isPortal = function(R) {
+      return P(R) === a;
+    }, r.isProfiler = function(R) {
+      return P(R) === c;
+    }, r.isStrictMode = function(R) {
+      return P(R) === l;
+    }, r.isSuspense = function(R) {
+      return P(R) === h;
+    }, r.isValidElementType = function(R) {
+      return typeof R == "string" || typeof R == "function" || R === i || R === p || R === c || R === l || R === h || R === b || typeof R == "object" && R !== null && (R.$$typeof === v || R.$$typeof === x || R.$$typeof === u || R.$$typeof === d || R.$$typeof === g || R.$$typeof === E || R.$$typeof === w || R.$$typeof === A || R.$$typeof === S);
     }, r.typeOf = P;
   }
 }), require_react_is_development = __commonJS({
@@ -28391,7 +28414,7 @@ var require_react_is_production_min = __commonJS({
         return typeof Z == "string" || typeof Z == "function" || // Note: its typeof might be other than 'symbol' or 'number' if it's a polyfill.
         Z === i || Z === p || Z === c || Z === l || Z === h || Z === b || typeof Z == "object" && Z !== null && (Z.$$typeof === v || Z.$$typeof === x || Z.$$typeof === u || Z.$$typeof === d || Z.$$typeof === g || Z.$$typeof === E || Z.$$typeof === w || Z.$$typeof === A || Z.$$typeof === S);
       }
-      function R(Z) {
+      function C(Z) {
         if (typeof Z == "object" && Z !== null) {
           var le = Z.$$typeof;
           switch (le) {
@@ -28423,47 +28446,47 @@ var require_react_is_production_min = __commonJS({
           }
         }
       }
-      var C = m, I = p, j = d, k = u, O = o, T = g, M = i, V = v, D = x, W = a, J = c, F = l, L = h, q = !1;
+      var R = m, I = p, j = d, k = u, O = o, T = g, B = i, L = v, D = x, W = a, J = c, F = l, V = h, q = !1;
       function G(Z) {
-        return q || (q = !0, console.warn("The ReactIs.isAsyncMode() alias has been deprecated, and will be removed in React 17+. Update your code to use ReactIs.isConcurrentMode() instead. It has the exact same API.")), ee(Z) || R(Z) === m;
+        return q || (q = !0, console.warn("The ReactIs.isAsyncMode() alias has been deprecated, and will be removed in React 17+. Update your code to use ReactIs.isConcurrentMode() instead. It has the exact same API.")), ee(Z) || C(Z) === m;
       }
       function ee(Z) {
-        return R(Z) === p;
+        return C(Z) === p;
       }
       function z(Z) {
-        return R(Z) === d;
+        return C(Z) === d;
       }
       function U(Z) {
-        return R(Z) === u;
+        return C(Z) === u;
       }
       function te(Z) {
         return typeof Z == "object" && Z !== null && Z.$$typeof === o;
       }
       function _(Z) {
-        return R(Z) === g;
+        return C(Z) === g;
       }
       function Q(Z) {
-        return R(Z) === i;
+        return C(Z) === i;
       }
       function ne(Z) {
-        return R(Z) === v;
+        return C(Z) === v;
       }
       function re(Z) {
-        return R(Z) === x;
+        return C(Z) === x;
       }
       function $(Z) {
-        return R(Z) === a;
+        return C(Z) === a;
       }
       function ae(Z) {
-        return R(Z) === c;
+        return C(Z) === c;
       }
       function se(Z) {
-        return R(Z) === l;
+        return C(Z) === l;
       }
       function K(Z) {
-        return R(Z) === h;
+        return C(Z) === h;
       }
-      r.AsyncMode = C, r.ConcurrentMode = I, r.ContextConsumer = j, r.ContextProvider = k, r.Element = O, r.ForwardRef = T, r.Fragment = M, r.Lazy = V, r.Memo = D, r.Portal = W, r.Profiler = J, r.StrictMode = F, r.Suspense = L, r.isAsyncMode = G, r.isConcurrentMode = ee, r.isContextConsumer = z, r.isContextProvider = U, r.isElement = te, r.isForwardRef = _, r.isFragment = Q, r.isLazy = ne, r.isMemo = re, r.isPortal = $, r.isProfiler = ae, r.isStrictMode = se, r.isSuspense = K, r.isValidElementType = P, r.typeOf = R;
+      r.AsyncMode = R, r.ConcurrentMode = I, r.ContextConsumer = j, r.ContextProvider = k, r.Element = O, r.ForwardRef = T, r.Fragment = B, r.Lazy = L, r.Memo = D, r.Portal = W, r.Profiler = J, r.StrictMode = F, r.Suspense = V, r.isAsyncMode = G, r.isConcurrentMode = ee, r.isContextConsumer = z, r.isContextProvider = U, r.isElement = te, r.isForwardRef = _, r.isFragment = Q, r.isLazy = ne, r.isMemo = re, r.isPortal = $, r.isProfiler = ae, r.isStrictMode = se, r.isSuspense = K, r.isValidElementType = P, r.typeOf = C;
     }();
   }
 }), require_react_is = __commonJS({
@@ -28604,11 +28627,11 @@ var require_react_is_production_min = __commonJS({
         string: A("string"),
         symbol: A("symbol"),
         any: P(),
-        arrayOf: R,
-        element: C(),
+        arrayOf: C,
+        element: R(),
         elementType: I(),
         instanceOf: j,
-        node: M(),
+        node: B(),
         objectOf: O,
         oneOf: k,
         oneOfType: T,
@@ -28647,7 +28670,7 @@ var require_react_is_production_min = __commonJS({
       }
       function A(z) {
         function U(te, _, Q, ne, re, $) {
-          var ae = te[_], se = L(ae);
+          var ae = te[_], se = V(ae);
           if (se !== z) {
             var K = q(ae);
             return new E(
@@ -28662,13 +28685,13 @@ var require_react_is_production_min = __commonJS({
       function P() {
         return w(d);
       }
-      function R(z) {
+      function C(z) {
         function U(te, _, Q, ne, re) {
           if (typeof z != "function")
             return new E("Property `" + re + "` of component `" + Q + "` has invalid PropType notation inside arrayOf.");
           var $ = te[_];
           if (!Array.isArray($)) {
-            var ae = L($);
+            var ae = V($);
             return new E("Invalid " + ne + " `" + re + "` of type " + ("`" + ae + "` supplied to `" + Q + "`, expected an array."));
           }
           for (var se = 0; se < $.length; se++) {
@@ -28680,11 +28703,11 @@ var require_react_is_production_min = __commonJS({
         }
         return w(U);
       }
-      function C() {
+      function R() {
         function z(U, te, _, Q, ne) {
           var re = U[te];
           if (!m(re)) {
-            var $ = L(re);
+            var $ = V(re);
             return new E("Invalid " + Q + " `" + ne + "` of type " + ("`" + $ + "` supplied to `" + _ + "`, expected a single ReactElement."));
           }
           return null;
@@ -28695,7 +28718,7 @@ var require_react_is_production_min = __commonJS({
         function z(U, te, _, Q, ne) {
           var re = U[te];
           if (!o.isValidElementType(re)) {
-            var $ = L(re);
+            var $ = V(re);
             return new E("Invalid " + Q + " `" + ne + "` of type " + ("`" + $ + "` supplied to `" + _ + "`, expected a single ReactElement type."));
           }
           return null;
@@ -28733,7 +28756,7 @@ var require_react_is_production_min = __commonJS({
         function U(te, _, Q, ne, re) {
           if (typeof z != "function")
             return new E("Property `" + re + "` of component `" + Q + "` has invalid PropType notation inside objectOf.");
-          var $ = te[_], ae = L($);
+          var $ = te[_], ae = V($);
           if (ae !== "object")
             return new E("Invalid " + ne + " `" + re + "` of type " + ("`" + ae + "` supplied to `" + Q + "`, expected an object."));
           for (var se in $)
@@ -28768,26 +28791,26 @@ var require_react_is_production_min = __commonJS({
         }
         return w(_);
       }
-      function M() {
+      function B() {
         function z(U, te, _, Q, ne) {
           return J(U[te]) ? null : new E("Invalid " + Q + " `" + ne + "` supplied to " + ("`" + _ + "`, expected a ReactNode."));
         }
         return w(z);
       }
-      function V(z, U, te, _, Q) {
+      function L(z, U, te, _, Q) {
         return new E(
           (z || "React class") + ": " + U + " type `" + te + "." + _ + "` is invalid; it must be a function, usually from the `prop-types` package, but received `" + Q + "`."
         );
       }
       function D(z) {
         function U(te, _, Q, ne, re) {
-          var $ = te[_], ae = L($);
+          var $ = te[_], ae = V($);
           if (ae !== "object")
             return new E("Invalid " + ne + " `" + re + "` of type `" + ae + "` " + ("supplied to `" + Q + "`, expected `object`."));
           for (var se in z) {
             var K = z[se];
             if (typeof K != "function")
-              return V(Q, ne, re, se, q(K));
+              return L(Q, ne, re, se, q(K));
             var Z = K($, se, Q, ne, re + "." + se, i);
             if (Z)
               return Z;
@@ -28798,14 +28821,14 @@ var require_react_is_production_min = __commonJS({
       }
       function W(z) {
         function U(te, _, Q, ne, re) {
-          var $ = te[_], ae = L($);
+          var $ = te[_], ae = V($);
           if (ae !== "object")
             return new E("Invalid " + ne + " `" + re + "` of type `" + ae + "` " + ("supplied to `" + Q + "`, expected `object`."));
           var se = a({}, te[_], z);
           for (var K in se) {
             var Z = z[K];
             if (l(z, K) && typeof Z != "function")
-              return V(Q, ne, re, K, q(Z));
+              return L(Q, ne, re, K, q(Z));
             if (!Z)
               return new E(
                 "Invalid " + ne + " `" + re + "` key `" + K + "` supplied to `" + Q + "`.\nBad object: " + JSON.stringify(te[_], null, "  ") + `
@@ -28855,14 +28878,14 @@ Valid keys: ` + JSON.stringify(Object.keys(z), null, "  ")
       function F(z, U) {
         return z === "symbol" ? !0 : U ? U["@@toStringTag"] === "Symbol" || typeof Symbol == "function" && U instanceof Symbol : !1;
       }
-      function L(z) {
+      function V(z) {
         var U = typeof z;
         return Array.isArray(z) ? "array" : z instanceof RegExp ? "object" : F(U, z) ? "symbol" : U;
       }
       function q(z) {
         if (typeof z > "u" || z === null)
           return "" + z;
-        var U = L(z);
+        var U = V(z);
         if (U === "object") {
           if (z instanceof Date)
             return "date";
@@ -29979,10 +30002,10 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
     r.flat = n(A);
     var P = require_google();
     r.google = n(P);
-    var R = require_grayscale();
-    r.grayscale = n(R);
-    var C = require_greenscreen();
-    r.greenscreen = n(C);
+    var C = require_grayscale();
+    r.grayscale = n(C);
+    var R = require_greenscreen();
+    r.greenscreen = n(R);
     var I = require_harmonic();
     r.harmonic = n(I);
     var j = require_hopscotch();
@@ -29993,10 +30016,10 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
     r.marrakesh = n(O);
     var T = require_mocha();
     r.mocha = n(T);
-    var M = require_monokai();
-    r.monokai = n(M);
-    var V = require_ocean();
-    r.ocean = n(V);
+    var B = require_monokai();
+    r.monokai = n(B);
+    var L = require_ocean();
+    r.ocean = n(L);
     var D = require_paraiso();
     r.paraiso = n(D);
     var W = require_pop();
@@ -30005,8 +30028,8 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
     r.railscasts = n(J);
     var F = require_shapeshifter();
     r.shapeshifter = n(F);
-    var L = require_solarized();
-    r.solarized = n(L);
+    var V = require_solarized();
+    r.solarized = n(V);
     var q = require_summerfruit();
     r.summerfruit = n(q);
     var G = require_tomorrow();
@@ -30477,10 +30500,10 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
       var g = p[0] / 255, h = p[1] / 255, b = p[2] / 255, x = Math.min(g, h, b), v = Math.max(g, h, b), S = v - x, E, w, A;
       return v === x ? E = 0 : g === v ? E = (h - b) / S : h === v ? E = 2 + (b - g) / S : b === v && (E = 4 + (g - h) / S), E = Math.min(E * 60, 360), E < 0 && (E += 360), A = (x + v) / 2, v === x ? w = 0 : A <= 0.5 ? w = S / (v + x) : w = S / (2 - v - x), [E, w * 100, A * 100];
     }, l.rgb.hsv = function(p) {
-      var g, h, b, x, v, S = p[0] / 255, E = p[1] / 255, w = p[2] / 255, A = Math.max(S, E, w), P = A - Math.min(S, E, w), R = function(C) {
-        return (A - C) / 6 / P + 1 / 2;
+      var g, h, b, x, v, S = p[0] / 255, E = p[1] / 255, w = p[2] / 255, A = Math.max(S, E, w), P = A - Math.min(S, E, w), C = function(R) {
+        return (A - R) / 6 / P + 1 / 2;
       };
-      return P === 0 ? x = v = 0 : (v = P / A, g = R(S), h = R(E), b = R(w), S === A ? x = b - h : E === A ? x = 1 / 3 + g - b : w === A && (x = 2 / 3 + h - g), x < 0 ? x += 1 : x > 1 && (x -= 1)), [
+      return P === 0 ? x = v = 0 : (v = P / A, g = C(S), h = C(E), b = C(w), S === A ? x = b - h : E === A ? x = 1 / 3 + g - b : w === A && (x = 2 / 3 + h - g), x < 0 ? x += 1 : x > 1 && (x -= 1)), [
         x * 360,
         v * 100,
         A * 100
@@ -30549,30 +30572,30 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
     }, l.hwb.rgb = function(p) {
       var g = p[0] / 360, h = p[1] / 100, b = p[2] / 100, x = h + b, v, S, E, w;
       x > 1 && (h /= x, b /= x), v = Math.floor(6 * g), S = 1 - b, E = 6 * g - v, v & 1 && (E = 1 - E), w = h + E * (S - h);
-      var A, P, R;
+      var A, P, C;
       switch (v) {
         default:
         case 6:
         case 0:
-          A = S, P = w, R = h;
+          A = S, P = w, C = h;
           break;
         case 1:
-          A = w, P = S, R = h;
+          A = w, P = S, C = h;
           break;
         case 2:
-          A = h, P = S, R = w;
+          A = h, P = S, C = w;
           break;
         case 3:
-          A = h, P = w, R = S;
+          A = h, P = w, C = S;
           break;
         case 4:
-          A = w, P = h, R = S;
+          A = w, P = h, C = S;
           break;
         case 5:
-          A = S, P = h, R = w;
+          A = S, P = h, C = w;
           break;
       }
-      return [A * 255, P * 255, R * 255];
+      return [A * 255, P * 255, C * 255];
     }, l.cmyk.rgb = function(p) {
       var g = p[0] / 100, h = p[1] / 100, b = p[2] / 100, x = p[3] / 100, v, S, E;
       return v = 1 - Math.min(1, g * (1 - x) + x), S = 1 - Math.min(1, h * (1 - x) + x), E = 1 - Math.min(1, b * (1 - x) + x), [v * 255, S * 255, E * 255];
@@ -30821,12 +30844,12 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
         ], this.valpha = 1;
       else {
         this.valpha = 1;
-        var R = Object.keys(v);
-        "alpha" in v && (R.splice(R.indexOf("alpha"), 1), this.valpha = typeof v.alpha == "number" ? v.alpha : 0);
-        var C = R.sort().join("");
-        if (!(C in c))
+        var C = Object.keys(v);
+        "alpha" in v && (C.splice(C.indexOf("alpha"), 1), this.valpha = typeof v.alpha == "number" ? v.alpha : 0);
+        var R = C.sort().join("");
+        if (!(R in c))
           throw new Error("Unable to parse color from object: " + JSON.stringify(v));
-        this.model = c[C];
+        this.model = c[R];
         var I = a[this.model].labels, j = [];
         for (E = 0; E < I.length; E++)
           j.push(v[I[E]]);
@@ -30982,11 +31005,11 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
       mix: function(v, S) {
         if (!v || !v.rgb)
           throw new Error('Argument to "mix" was not a Color instance, but rather an instance of ' + typeof v);
-        var E = v.rgb(), w = this.rgb(), A = S === void 0 ? 0.5 : S, P = 2 * A - 1, R = E.alpha() - w.alpha(), C = ((P * R === -1 ? P : (P + R) / (1 + P * R)) + 1) / 2, I = 1 - C;
+        var E = v.rgb(), w = this.rgb(), A = S === void 0 ? 0.5 : S, P = 2 * A - 1, C = E.alpha() - w.alpha(), R = ((P * C === -1 ? P : (P + C) / (1 + P * C)) + 1) / 2, I = 1 - R;
         return d.rgb(
-          C * E.red() + I * w.red(),
-          C * E.green() + I * w.green(),
-          C * E.blue() + I * w.blue(),
+          R * E.red() + I * w.red(),
+          R * E.green() + I * w.green(),
+          R * E.blue() + I * w.blue(),
           E.alpha() * A + w.alpha() * (1 - A)
         );
       }
@@ -31049,67 +31072,67 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
       ["partial", m],
       ["partialRight", p],
       ["rearg", h]
-    ], A = "[object Function]", P = "[object GeneratorFunction]", R = "[object Symbol]", C = /[\\^$.*+?()[\]{}|]/g, I = /^\s+|\s+$/g, j = /\{(?:\n\/\* \[wrapped with .+\] \*\/)?\n?/, k = /\{\n\/\* \[wrapped with (.+)\] \*/, O = /,? & /, T = /^[-+]0x[0-9a-f]+$/i, M = /^0b[01]+$/i, V = /^\[object .+?Constructor\]$/, D = /^0o[0-7]+$/i, W = /^(?:0|[1-9]\d*)$/, J = parseInt, F = typeof global == "object" && global && global.Object === Object && global, L = typeof self == "object" && self && self.Object === Object && self, q = F || L || Function("return this")();
-    function G(N, B, Y) {
+    ], A = "[object Function]", P = "[object GeneratorFunction]", C = "[object Symbol]", R = /[\\^$.*+?()[\]{}|]/g, I = /^\s+|\s+$/g, j = /\{(?:\n\/\* \[wrapped with .+\] \*\/)?\n?/, k = /\{\n\/\* \[wrapped with (.+)\] \*/, O = /,? & /, T = /^[-+]0x[0-9a-f]+$/i, B = /^0b[01]+$/i, L = /^\[object .+?Constructor\]$/, D = /^0o[0-7]+$/i, W = /^(?:0|[1-9]\d*)$/, J = parseInt, F = typeof global == "object" && global && global.Object === Object && global, V = typeof self == "object" && self && self.Object === Object && self, q = F || V || Function("return this")();
+    function G(N, M, Y) {
       switch (Y.length) {
         case 0:
-          return N.call(B);
+          return N.call(M);
         case 1:
-          return N.call(B, Y[0]);
+          return N.call(M, Y[0]);
         case 2:
-          return N.call(B, Y[0], Y[1]);
+          return N.call(M, Y[0], Y[1]);
         case 3:
-          return N.call(B, Y[0], Y[1], Y[2]);
+          return N.call(M, Y[0], Y[1], Y[2]);
       }
-      return N.apply(B, Y);
+      return N.apply(M, Y);
     }
-    function ee(N, B) {
-      for (var Y = -1, oe = N ? N.length : 0; ++Y < oe && B(N[Y], Y, N) !== !1; )
+    function ee(N, M) {
+      for (var Y = -1, oe = N ? N.length : 0; ++Y < oe && M(N[Y], Y, N) !== !1; )
         ;
       return N;
     }
-    function z(N, B) {
+    function z(N, M) {
       var Y = N ? N.length : 0;
-      return !!Y && te(N, B, 0) > -1;
+      return !!Y && te(N, M, 0) > -1;
     }
-    function U(N, B, Y, oe) {
+    function U(N, M, Y, oe) {
       for (var ce = N.length, H = Y + (oe ? 1 : -1); oe ? H-- : ++H < ce; )
-        if (B(N[H], H, N))
+        if (M(N[H], H, N))
           return H;
       return -1;
     }
-    function te(N, B, Y) {
-      if (B !== B)
+    function te(N, M, Y) {
+      if (M !== M)
         return U(N, _, Y);
       for (var oe = Y - 1, ce = N.length; ++oe < ce; )
-        if (N[oe] === B)
+        if (N[oe] === M)
           return oe;
       return -1;
     }
     function _(N) {
       return N !== N;
     }
-    function Q(N, B) {
+    function Q(N, M) {
       for (var Y = N.length, oe = 0; Y--; )
-        N[Y] === B && oe++;
+        N[Y] === M && oe++;
       return oe;
     }
-    function ne(N, B) {
-      return N == null ? void 0 : N[B];
+    function ne(N, M) {
+      return N == null ? void 0 : N[M];
     }
     function re(N) {
-      var B = !1;
+      var M = !1;
       if (N != null && typeof N.toString != "function")
         try {
-          B = !!(N + "");
+          M = !!(N + "");
         } catch {
         }
-      return B;
+      return M;
     }
-    function $(N, B) {
+    function $(N, M) {
       for (var Y = -1, oe = N.length, ce = 0, H = []; ++Y < oe; ) {
         var ie = N[Y];
-        (ie === B || ie === a) && (N[Y] = a, H[ce++] = Y);
+        (ie === M || ie === a) && (N[Y] = a, H[ce++] = Y);
       }
       return H;
     }
@@ -31117,79 +31140,79 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
       var N = /[^.]+$/.exec(K && K.keys && K.keys.IE_PROTO || "");
       return N ? "Symbol(src)_1." + N : "";
     }(), le = ae.toString, fe = se.hasOwnProperty, Te = se.toString, be = RegExp(
-      "^" + le.call(fe).replace(C, "\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g, "$1.*?") + "$"
+      "^" + le.call(fe).replace(R, "\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g, "$1.*?") + "$"
     ), Ze = Object.create, Ne = Math.max, ge = Math.min, Ge = function() {
-      var N = We(Object, "defineProperty"), B = We.name;
-      return B && B.length > 2 ? N : void 0;
+      var N = We(Object, "defineProperty"), M = We.name;
+      return M && M.length > 2 ? N : void 0;
     }();
     function ke(N) {
       return je(N) ? Ze(N) : {};
     }
     function ve(N) {
-      if (!je(N) || Me(N))
+      if (!je(N) || Be(N))
         return !1;
-      var B = st(N) || re(N) ? be : V;
-      return B.test(Ie(N));
+      var M = st(N) || re(N) ? be : L;
+      return M.test(Ie(N));
     }
-    function He(N, B, Y, oe) {
-      for (var ce = -1, H = N.length, ie = Y.length, ue = -1, de = B.length, me = Ne(H - ie, 0), pe = Array(de + me), xe = !oe; ++ue < de; )
-        pe[ue] = B[ue];
+    function He(N, M, Y, oe) {
+      for (var ce = -1, H = N.length, ie = Y.length, ue = -1, de = M.length, me = Ne(H - ie, 0), pe = Array(de + me), xe = !oe; ++ue < de; )
+        pe[ue] = M[ue];
       for (; ++ce < ie; )
         (xe || ce < H) && (pe[Y[ce]] = N[ce]);
       for (; me--; )
         pe[ue++] = N[ce++];
       return pe;
     }
-    function Fe(N, B, Y, oe) {
-      for (var ce = -1, H = N.length, ie = -1, ue = Y.length, de = -1, me = B.length, pe = Ne(H - ue, 0), xe = Array(pe + me), ye = !oe; ++ce < pe; )
+    function Fe(N, M, Y, oe) {
+      for (var ce = -1, H = N.length, ie = -1, ue = Y.length, de = -1, me = M.length, pe = Ne(H - ue, 0), xe = Array(pe + me), ye = !oe; ++ce < pe; )
         xe[ce] = N[ce];
       for (var we = ce; ++de < me; )
-        xe[we + de] = B[de];
+        xe[we + de] = M[de];
       for (; ++ie < ue; )
         (ye || ce < H) && (xe[we + Y[ie]] = N[ce++]);
       return xe;
     }
-    function Je(N, B) {
+    function Je(N, M) {
       var Y = -1, oe = N.length;
-      for (B || (B = Array(oe)); ++Y < oe; )
-        B[Y] = N[Y];
-      return B;
+      for (M || (M = Array(oe)); ++Y < oe; )
+        M[Y] = N[Y];
+      return M;
     }
-    function rt(N, B, Y) {
-      var oe = B & i, ce = Re(N);
+    function rt(N, M, Y) {
+      var oe = M & i, ce = Ce(N);
       function H() {
         var ie = this && this !== q && this instanceof H ? ce : N;
         return ie.apply(oe ? Y : this, arguments);
       }
       return H;
     }
-    function Re(N) {
+    function Ce(N) {
       return function() {
-        var B = arguments;
-        switch (B.length) {
+        var M = arguments;
+        switch (M.length) {
           case 0:
             return new N();
           case 1:
-            return new N(B[0]);
+            return new N(M[0]);
           case 2:
-            return new N(B[0], B[1]);
+            return new N(M[0], M[1]);
           case 3:
-            return new N(B[0], B[1], B[2]);
+            return new N(M[0], M[1], M[2]);
           case 4:
-            return new N(B[0], B[1], B[2], B[3]);
+            return new N(M[0], M[1], M[2], M[3]);
           case 5:
-            return new N(B[0], B[1], B[2], B[3], B[4]);
+            return new N(M[0], M[1], M[2], M[3], M[4]);
           case 6:
-            return new N(B[0], B[1], B[2], B[3], B[4], B[5]);
+            return new N(M[0], M[1], M[2], M[3], M[4], M[5]);
           case 7:
-            return new N(B[0], B[1], B[2], B[3], B[4], B[5], B[6]);
+            return new N(M[0], M[1], M[2], M[3], M[4], M[5], M[6]);
         }
-        var Y = ke(N.prototype), oe = N.apply(Y, B);
+        var Y = ke(N.prototype), oe = N.apply(Y, M);
         return je(oe) ? oe : Y;
       };
     }
-    function De(N, B, Y) {
-      var oe = Re(N);
+    function De(N, M, Y) {
+      var oe = Ce(N);
       function ce() {
         for (var H = arguments.length, ie = Array(H), ue = H, de = qe(ce); ue--; )
           ie[ue] = arguments[ue];
@@ -31197,8 +31220,8 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
         if (H -= me.length, H < Y)
           return Ye(
             N,
-            B,
-            Ve,
+            M,
+            Le,
             ce.placeholder,
             void 0,
             ie,
@@ -31212,35 +31235,35 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
       }
       return ce;
     }
-    function Ve(N, B, Y, oe, ce, H, ie, ue, de, me) {
-      var pe = B & g, xe = B & i, ye = B & l, we = B & (u | d), it = B & b, et = ye ? void 0 : Re(N);
+    function Le(N, M, Y, oe, ce, H, ie, ue, de, me) {
+      var pe = M & g, xe = M & i, ye = M & l, we = M & (u | d), it = M & b, et = ye ? void 0 : Ce(N);
       function tt() {
-        for (var Be = arguments.length, Ae = Array(Be), lt = Be; lt--; )
+        for (var Me = arguments.length, Ae = Array(Me), lt = Me; lt--; )
           Ae[lt] = arguments[lt];
         if (we)
           var ut = qe(tt), pt = Q(Ae, ut);
-        if (oe && (Ae = He(Ae, oe, ce, we)), H && (Ae = Fe(Ae, H, ie, we)), Be -= pt, we && Be < me) {
+        if (oe && (Ae = He(Ae, oe, ce, we)), H && (Ae = Fe(Ae, H, ie, we)), Me -= pt, we && Me < me) {
           var ft = $(Ae, ut);
           return Ye(
             N,
-            B,
-            Ve,
+            M,
+            Le,
             tt.placeholder,
             Y,
             Ae,
             ft,
             ue,
             de,
-            me - Be
+            me - Me
           );
         }
         var dt = xe ? Y : this, ct = ye ? dt[N] : N;
-        return Be = Ae.length, ue ? Ae = Xe(Ae, ue) : it && Be > 1 && Ae.reverse(), pe && de < Be && (Ae.length = de), this && this !== q && this instanceof tt && (ct = et || Re(ct)), ct.apply(dt, Ae);
+        return Me = Ae.length, ue ? Ae = Xe(Ae, ue) : it && Me > 1 && Ae.reverse(), pe && de < Me && (Ae.length = de), this && this !== q && this instanceof tt && (ct = et || Ce(ct)), ct.apply(dt, Ae);
       }
       return tt;
     }
-    function nt(N, B, Y, oe) {
-      var ce = B & i, H = Re(N);
+    function nt(N, M, Y, oe) {
+      var ce = M & i, H = Ce(N);
       function ie() {
         for (var ue = -1, de = arguments.length, me = -1, pe = oe.length, xe = Array(pe + de), ye = this && this !== q && this instanceof ie ? H : N; ++me < pe; )
           xe[me] = oe[me];
@@ -31250,24 +31273,24 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
       }
       return ie;
     }
-    function Ye(N, B, Y, oe, ce, H, ie, ue, de, me) {
-      var pe = B & u, xe = pe ? ie : void 0, ye = pe ? void 0 : ie, we = pe ? H : void 0, it = pe ? void 0 : H;
-      B |= pe ? m : p, B &= ~(pe ? p : m), B & c || (B &= ~(i | l));
-      var et = Y(N, B, ce, we, xe, it, ye, ue, de, me);
-      return et.placeholder = oe, Pe(et, N, B);
+    function Ye(N, M, Y, oe, ce, H, ie, ue, de, me) {
+      var pe = M & u, xe = pe ? ie : void 0, ye = pe ? void 0 : ie, we = pe ? H : void 0, it = pe ? void 0 : H;
+      M |= pe ? m : p, M &= ~(pe ? p : m), M & c || (M &= ~(i | l));
+      var et = Y(N, M, ce, we, xe, it, ye, ue, de, me);
+      return et.placeholder = oe, Pe(et, N, M);
     }
-    function Se(N, B, Y, oe, ce, H, ie, ue) {
-      var de = B & l;
+    function Se(N, M, Y, oe, ce, H, ie, ue) {
+      var de = M & l;
       if (!de && typeof N != "function")
         throw new TypeError(o);
       var me = oe ? oe.length : 0;
-      if (me || (B &= ~(m | p), oe = ce = void 0), ie = ie === void 0 ? ie : Ne(Ee(ie), 0), ue = ue === void 0 ? ue : Ee(ue), me -= ce ? ce.length : 0, B & p) {
+      if (me || (M &= ~(m | p), oe = ce = void 0), ie = ie === void 0 ? ie : Ne(Ee(ie), 0), ue = ue === void 0 ? ue : Ee(ue), me -= ce ? ce.length : 0, M & p) {
         var pe = oe, xe = ce;
         oe = ce = void 0;
       }
       var ye = [
         N,
-        B,
+        M,
         Y,
         oe,
         ce,
@@ -31277,45 +31300,45 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
         ie,
         ue
       ];
-      if (N = ye[0], B = ye[1], Y = ye[2], oe = ye[3], ce = ye[4], ue = ye[9] = ye[9] == null ? de ? 0 : N.length : Ne(ye[9] - me, 0), !ue && B & (u | d) && (B &= ~(u | d)), !B || B == i)
-        var we = rt(N, B, Y);
+      if (N = ye[0], M = ye[1], Y = ye[2], oe = ye[3], ce = ye[4], ue = ye[9] = ye[9] == null ? de ? 0 : N.length : Ne(ye[9] - me, 0), !ue && M & (u | d) && (M &= ~(u | d)), !M || M == i)
+        var we = rt(N, M, Y);
       else
-        B == u || B == d ? we = De(N, B, ue) : (B == m || B == (i | m)) && !ce.length ? we = nt(N, B, Y, oe) : we = Ve.apply(void 0, ye);
-      return Pe(we, N, B);
+        M == u || M == d ? we = De(N, M, ue) : (M == m || M == (i | m)) && !ce.length ? we = nt(N, M, Y, oe) : we = Le.apply(void 0, ye);
+      return Pe(we, N, M);
     }
     function qe(N) {
-      var B = N;
-      return B.placeholder;
+      var M = N;
+      return M.placeholder;
     }
-    function We(N, B) {
-      var Y = ne(N, B);
+    function We(N, M) {
+      var Y = ne(N, M);
       return ve(Y) ? Y : void 0;
     }
     function ot(N) {
-      var B = N.match(k);
-      return B ? B[1].split(O) : [];
+      var M = N.match(k);
+      return M ? M[1].split(O) : [];
     }
-    function Ue(N, B) {
-      var Y = B.length, oe = Y - 1;
-      return B[oe] = (Y > 1 ? "& " : "") + B[oe], B = B.join(Y > 2 ? ", " : " "), N.replace(j, `{
-/* [wrapped with ` + B + `] */
+    function Ue(N, M) {
+      var Y = M.length, oe = Y - 1;
+      return M[oe] = (Y > 1 ? "& " : "") + M[oe], M = M.join(Y > 2 ? ", " : " "), N.replace(j, `{
+/* [wrapped with ` + M + `] */
 `);
     }
-    function Ce(N, B) {
-      return B = B ?? v, !!B && (typeof N == "number" || W.test(N)) && N > -1 && N % 1 == 0 && N < B;
+    function Re(N, M) {
+      return M = M ?? v, !!M && (typeof N == "number" || W.test(N)) && N > -1 && N % 1 == 0 && N < M;
     }
-    function Me(N) {
+    function Be(N) {
       return !!Z && Z in N;
     }
-    function Xe(N, B) {
-      for (var Y = N.length, oe = ge(B.length, Y), ce = Je(N); oe--; ) {
-        var H = B[oe];
-        N[oe] = Ce(H, Y) ? ce[H] : void 0;
+    function Xe(N, M) {
+      for (var Y = N.length, oe = ge(M.length, Y), ce = Je(N); oe--; ) {
+        var H = M[oe];
+        N[oe] = Re(H, Y) ? ce[H] : void 0;
       }
       return N;
     }
-    var Pe = Ge ? function(N, B, Y) {
-      var oe = B + "";
+    var Pe = Ge ? function(N, M, Y) {
+      var oe = M + "";
       return Ge(N, "toString", {
         configurable: !0,
         enumerable: !1,
@@ -31335,43 +31358,43 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
       }
       return "";
     }
-    function at(N, B) {
+    function at(N, M) {
       return ee(w, function(Y) {
         var oe = "_." + Y[0];
-        B & Y[1] && !z(N, oe) && N.push(oe);
+        M & Y[1] && !z(N, oe) && N.push(oe);
       }), N.sort();
     }
-    function Oe(N, B, Y) {
-      B = Y ? void 0 : B;
-      var oe = Se(N, u, void 0, void 0, void 0, void 0, void 0, B);
+    function Oe(N, M, Y) {
+      M = Y ? void 0 : M;
+      var oe = Se(N, u, void 0, void 0, void 0, void 0, void 0, M);
       return oe.placeholder = Oe.placeholder, oe;
     }
     function st(N) {
-      var B = je(N) ? Te.call(N) : "";
-      return B == A || B == P;
+      var M = je(N) ? Te.call(N) : "";
+      return M == A || M == P;
     }
     function je(N) {
-      var B = typeof N;
-      return !!N && (B == "object" || B == "function");
+      var M = typeof N;
+      return !!N && (M == "object" || M == "function");
     }
     function he(N) {
       return !!N && typeof N == "object";
     }
     function Qe(N) {
-      return typeof N == "symbol" || he(N) && Te.call(N) == R;
+      return typeof N == "symbol" || he(N) && Te.call(N) == C;
     }
-    function Le(N) {
+    function Ve(N) {
       if (!N)
         return N === 0 ? N : 0;
       if (N = _e(N), N === x || N === -x) {
-        var B = N < 0 ? -1 : 1;
-        return B * S;
+        var M = N < 0 ? -1 : 1;
+        return M * S;
       }
       return N === N ? N : 0;
     }
     function Ee(N) {
-      var B = Le(N), Y = B % 1;
-      return B === B ? Y ? B - Y : B : 0;
+      var M = Ve(N), Y = M % 1;
+      return M === M ? Y ? M - Y : M : 0;
     }
     function _e(N) {
       if (typeof N == "number")
@@ -31379,13 +31402,13 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
       if (Qe(N))
         return E;
       if (je(N)) {
-        var B = typeof N.valueOf == "function" ? N.valueOf() : N;
-        N = je(B) ? B + "" : B;
+        var M = typeof N.valueOf == "function" ? N.valueOf() : N;
+        N = je(M) ? M + "" : M;
       }
       if (typeof N != "string")
         return N === 0 ? N : +N;
       N = N.replace(I, "");
-      var Y = M.test(N);
+      var Y = B.test(N);
       return Y || D.test(N) ? J(N.slice(2), Y ? 2 : 8) : T.test(N) ? E : +N;
     }
     function $e(N) {
@@ -33849,11 +33872,22 @@ const TabletIcon = ({ landscape: r = !1 }) => /* @__PURE__ */ jsxRuntimeExports.
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex h-full items-center space-x-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ClearCanvas, {}) })
   ] });
 }, AddBlocksDialog = () => {
-  const { t: r } = useTranslation(), [n, o] = useAddBlocksModal();
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(AlertDialog, { open: !isEmpty(n), onOpenChange: () => n ? o("") : "", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(AlertDialogContent, { className: "max-h-[80vh] max-w-5xl overflow-hidden", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(AlertDialogHeader, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(AlertDialogTitle, { children: r("add_block") }) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "no-scrollbar h-[500px] max-h-full overflow-hidden", children: /* @__PURE__ */ jsxRuntimeExports.jsx(AddBlocksPanel$1, { showHeading: !1 }) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(AlertDialogFooter, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(AlertDialogCancel, { children: r("Close") }) })
+  const { t: r } = useTranslation(), [n, o] = useState$1(""), [a, i] = useState$1(!1);
+  return useChaiBuilderMsgListener(({ name: l, data: c = void 0 }) => {
+    l === CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK && (o(c == null ? void 0 : c._id), i(!0)), l === CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK && (o(""), i(!1));
+  }), /* @__PURE__ */ jsxRuntimeExports.jsx(AlertDialog, { open: a, onOpenChange: () => a ? i(!1) : "", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(AlertDialogContent, { className: "max-h-[80vh] max-w-5xl overflow-hidden", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(AlertDialogHeader, { className: "flex flex-row items-center justify-between", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(AlertDialogTitle, { children: r("add_block") }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "button",
+        {
+          onClick: () => i(!1),
+          className: "text-gray-500 hover:text-gray-600 dark:text-gray-400 dark:hover:text-gray-300",
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx(Cross2Icon, { className: "h-6 w-6" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "no-scrollbar h-[500px] max-h-full overflow-hidden", children: /* @__PURE__ */ jsxRuntimeExports.jsx(AddBlocksPanel$1, { parentId: n, showHeading: !1 }) })
   ] }) });
 }, SettingsPanel = () => {
   const r = useSelectedBlock(), { t: n } = useTranslation(), [o, a] = useState$1(!0), i = useBuilderProp("onError", noop$1);
@@ -33880,7 +33914,7 @@ const TabletIcon = ({ landscape: r = !1 }) => /* @__PURE__ */ jsxRuntimeExports.
     /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
     /* @__PURE__ */ jsxRuntimeExports.jsx("br", {})
   ] }) });
-}, SettingsPanel$1 = SettingsPanel, TopBar = lazy(() => import("./Topbar-uwCF26N5.js")), menuItems = [
+}, SettingsPanel$1 = SettingsPanel, TopBar = lazy(() => import("./Topbar-Nc6eEWWP.js")), menuItems = [
   { icon: /* @__PURE__ */ jsxRuntimeExports.jsx(Layers, { size: 20 }), label: "sidebar.outline", component: Outline$1 },
   { icon: /* @__PURE__ */ jsxRuntimeExports.jsx(EditIcon, { size: 16 }), label: "sidebar.edit_block", component: SettingsPanel$1 },
   { icon: /* @__PURE__ */ jsxRuntimeExports.jsx(LightningBoltIcon, { className: "size-5" }), label: "sidebar.ai_assistant", component: AskAI },
@@ -33897,7 +33931,7 @@ const TabletIcon = ({ landscape: r = !1 }) => /* @__PURE__ */ jsxRuntimeExports.
 }, RootLayout = () => {
   const [r, n] = useState$1(0);
   useChaiBuilderMsgListener(({ name: u }) => {
-    u === BUILDER_EVENTS.SHOW_SETTINGS && n(1);
+    u === CHAI_BUILDER_EVENTS.SHOW_BLOCK_SETTINGS && n(1);
   });
   const o = useBuilderProp("sideBarComponents.top", []), a = (u) => {
     u.preventDefault();
@@ -34008,40 +34042,43 @@ const TabletIcon = ({ landscape: r = !1 }) => /* @__PURE__ */ jsxRuntimeExports.
   ] }) }) });
 };
 export {
-  useSelectedBlocksDisplayChild as $,
+  useStylingBreakpoint as $,
   AddBlocksPanel$1 as A,
   BlockSettings as B,
   ChaiSelect$1 as C,
   DarkMode as D,
-  useCopyToClipboard as E,
+  useCanvasWidth as E,
   FaCheck as F,
-  useCurrentPage as G,
-  useCutBlockIds as H,
+  useCanvasZoom as G,
+  useCopyBlockIds as H,
   ImportHTML$1 as I,
-  useDarkMode as J,
-  useDuplicateBlocks as K,
-  useGetPageData as L,
-  useHiddenBlockIds as M,
-  useHighlightBlockId as N,
+  useCopyToClipboard as J,
+  useCurrentPage as K,
+  useCutBlockIds as L,
+  useDarkMode as M,
+  useDuplicateBlocks as N,
   Outline$1 as O,
-  usePasteBlocks as P,
-  useBrandingOptions as Q,
-  useRemoveBlocks as R,
-  useRemoveClassesFromBlocks as S,
+  useGetPageData as P,
+  useHiddenBlockIds as Q,
+  useHighlightBlockId as R,
+  usePasteBlocks as S,
   ThemeOptions as T,
   UILibraries as U,
-  useSelectedBlockCurrentClasses as V,
-  useSelectedBlockAllClasses as W,
-  useSelectedBlock as X,
-  useStylingBreakpoint as Y,
-  useUILibraryBlocks as Z,
-  useStylingState as _,
+  useBrandingOptions as V,
+  useRemoveBlocks as W,
+  useRemoveClassesFromBlocks as X,
+  useSelectedBlockCurrentClasses as Y,
+  useSelectedBlockAllClasses as Z,
+  useSelectedBlock as _,
   useSelectedBlockIds as a,
-  useAllBlocks as a0,
-  useActivePanel as a1,
-  useAddBlockParent as a2,
-  useSelectedBreakpoints as a3,
-  useSelectedStylingBlocks as a4,
+  useUILibraryBlocks as a0,
+  useStylingState as a1,
+  useSelectedBlocksDisplayChild as a2,
+  useAllBlocks as a3,
+  useActivePanel as a4,
+  useAddBlockParent as a5,
+  useSelectedBreakpoints as a6,
+  useSelectedStylingBlocks as a7,
   useUpdateBlocksProps as b,
   useUpdateBlocksPropsRealtime as c,
   useBuilderProp as d,
@@ -34049,22 +34086,22 @@ export {
   usePreviewMode as f,
   CanvasArea$1 as g,
   BlockStyling as h,
-  AISetContext as i,
-  AIUserPrompt as j,
-  BlockAttributesEditor as k,
-  ChaiBuilderEditor as l,
-  Breakpoints as m,
-  UndoRedo as n,
-  getBlocksFromHTML as o,
-  useBlocksStore as p,
-  useUndoManager as q,
-  useBuilderReset as r,
-  useReadOnlyMode as s,
-  useActiveModal as t,
+  emitChaiBuilderMsg as i,
+  useChaiBuilderMsgListener as j,
+  CHAI_BUILDER_EVENTS as k,
+  AISetContext as l,
+  AIUserPrompt as m,
+  BlockAttributesEditor as n,
+  ChaiBuilderEditor as o,
+  Breakpoints as p,
+  UndoRedo as q,
+  getBlocksFromHTML as r,
+  useBlocksStore as s,
+  useUndoManager as t,
   useCodeEditor as u,
-  useAddBlock as v,
-  useAddClassesToBlocks as w,
-  useCanvasWidth as x,
-  useCanvasZoom as y,
-  useCopyBlockIds as z
+  useBuilderReset as v,
+  useReadOnlyMode as w,
+  useActiveModal as x,
+  useAddBlock as y,
+  useAddClassesToBlocks as z
 };