@chaibuilder/sdk 2.6.4 → 3.0.3

package/dist/core.js

@@ -3,15 +3,14 @@ var V = (o, n, r) => n in o ? H(o, n, { enumerable: !0, configurable: !0, writab
 var F = (o, n, r) => V(o, typeof n != "symbol" ? n + "" : n, r);
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useRegisteredChaiBlocks, getRegisteredChaiBlock, getDefaultBlockProps, useRegisteredFonts, getBlockFormSchemas, syncBlocksWithDefaults } from "@chaibuilder/runtime";
-import { BoxModelIcon, PinTopIcon, PinBottomIcon, PinLeftIcon, PinRightIcon, ArrowUpIcon, PlusIcon, CopyIcon, TrashIcon, DragHandleDots2Icon, FontBoldIcon, FontItalicIcon, UnderlineIcon, StrikethroughIcon, CodeIcon, Link1Icon, ListBulletIcon, HeadingIcon, QuoteIcon, TextAlignLeftIcon, TextAlignCenterIcon, TextAlignRightIcon, LoopIcon, InfoCircledIcon, TriangleDownIcon, RowSpacingIcon, EyeOpenIcon, EyeClosedIcon, BorderAllIcon, WidthIcon, HeightIcon, ArrowRightIcon, ArrowDownIcon, ArrowLeftIcon, ArrowTopLeftIcon, ArrowTopRightIcon, ArrowBottomRightIcon, ArrowBottomLeftIcon, AlignLeftIcon, AlignCenterHorizontallyIcon, AlignRightIcon, StretchHorizontallyIcon, OverlineIcon, LetterCaseUppercaseIcon, Cross2Icon, Cross1Icon, BoxIcon, MinusIcon, CrossCircledIcon, DotsVerticalIcon, MobileIcon, LaptopIcon, DesktopIcon, CaretRightIcon, CardStackPlusIcon, CardStackIcon, ScissorsIcon, CheckIcon, ResetIcon, EraserIcon, ZoomInIcon, MixerHorizontalIcon, LightningBoltIcon } from "@radix-ui/react-icons";
 import { get, find, filter, flatten, has, map, includes, without, compact, reverse, findIndex, isEmpty, isString, each, omit, values, pick, startsWith, isFunction, isObject as isObject$1, memoize, noop, first, keys, range, flattenDeep, set, forEach, unset, chunk, cloneDeep, isNull, isArray, split, reject, take, debounce, startCase, isNumber, parseInt as parseInt$1, isNaN as isNaN$1, toLower, nth, findLast, intersection, toUpper, capitalize, groupBy, uniq, sortBy, round } from "lodash-es";
+import { SquareIcon, ChevronRightIcon, PinTopIcon, PinBottomIcon, PinLeftIcon, PinRightIcon, ArrowUpIcon, PlusIcon, CopyIcon, TrashIcon, DragHandleDots2Icon, FontBoldIcon, FontItalicIcon, UnderlineIcon, StrikethroughIcon, CodeIcon, Link1Icon, ListBulletIcon, HeadingIcon, QuoteIcon, TextAlignLeftIcon, TextAlignCenterIcon, TextAlignRightIcon, ExclamationTriangleIcon, Cross1Icon, Pencil2Icon, ChevronLeftIcon, LoopIcon, IdCardIcon, LetterCaseCapitalizeIcon, ValueIcon, LinkBreak1Icon, EnterFullScreenIcon, PlusCircledIcon, ChevronDownIcon, InfoCircledIcon, FileIcon, DotsVerticalIcon, TriangleDownIcon, RowSpacingIcon, EyeOpenIcon, EyeClosedIcon, BorderAllIcon, WidthIcon, HeightIcon, ArrowRightIcon, ArrowDownIcon, ArrowLeftIcon, ArrowTopLeftIcon, ArrowTopRightIcon, ArrowBottomRightIcon, ArrowBottomLeftIcon, AlignLeftIcon, AlignCenterHorizontallyIcon, AlignRightIcon, StretchHorizontallyIcon, OverlineIcon, LetterCaseUppercaseIcon, Cross2Icon, BoxIcon, MinusIcon, CrossCircledIcon, MobileIcon, LaptopIcon, DesktopIcon, ReloadIcon, MagicWandIcon, MagnifyingGlassIcon, CaretRightIcon, GlobeIcon, CheckIcon, LinkBreak2Icon, CardStackPlusIcon, CardStackIcon, ScissorsIcon, EyeNoneIcon, DoubleArrowDownIcon, DoubleArrowUpIcon, ResetIcon, UploadIcon, TextIcon, CornerTopRightIcon, MixerHorizontalIcon, SunIcon, MoonIcon, ChatBubbleIcon, FaceIcon, ShuffleIcon, ImageIcon, PaperPlaneIcon, EraserIcon, LightningBoltIcon, ZoomInIcon, StackIcon } from "@radix-ui/react-icons";
 import * as React from "react";
 import React__default, { useMemo, useCallback, useEffect, useState, useRef, Component, Children, memo, createElement, createContext, useContext, Suspense, lazy, useReducer, useDebugValue } from "react";
 import { atom, useAtom as useAtom$1, useAtomValue as useAtomValue$1, getDefaultStore as getDefaultStore$1, useSetAtom as useSetAtom$1, Provider } from "jotai";
 import { atomWithStorage, splitAtom, useAtomCallback } from "jotai/utils";
 import { g as generateUUID, a as getBreakpointValue, c as cn$2 } from "./common-functions-BGzDsf1z.js";
-import { v as Button, ab as DropdownMenu, ap as DropdownMenuTrigger, ad as DropdownMenuContent, af as DropdownMenuItem, b8 as cn$1, aW as Skeleton, d as Alert, e as AlertDescription, at as Input$1, a1 as Dialog, aa as DialogTrigger, a3 as DialogContent, a9 as DialogTitle, av as Popover, b4 as Tooltip, b7 as TooltipTrigger, ay as PopoverTrigger, b5 as TooltipContent, ax as PopoverContent, F as Command, H as CommandInput, I as CommandList, J as CommandEmpty, K as CommandGroup, L as CommandItem, a6 as DialogHeader, B as Badge, b6 as TooltipProvider, a as AccordionItem, b as AccordionTrigger, c as AccordionContent, ag as DropdownMenuLabel, ak as DropdownMenuSeparator, ac as DropdownMenuCheckboxItem, aq as HoverCard, as as HoverCardTrigger, ar as HoverCardContent, b1 as Textarea, A as Accordion, C as Card, D as CardHeader, y as CardDescription, x as CardContent, au as Label, z as CardFooter, az as ScrollArea, aZ as Tabs, a$ as TabsList, b0 as TabsTrigger, a_ as TabsContent, aX as Slider, aB as Select$1, aJ as SelectTrigger, aK as SelectValue, aC as SelectContent, aE as SelectItem, aL as Separator, aY as Switch, r as Avatar, g as AlertDialog, q as AlertDialogTrigger, j as AlertDialogContent, m as AlertDialogHeader, p as AlertDialogTitle, k as AlertDialogDescription, l as AlertDialogFooter, i as AlertDialogCancel, h as AlertDialogAction, aM as Sheet, aO as SheetContent, aR as SheetHeader, aU as SheetTitle } from "./toggle-DXTcRcvD.js";
-import { ChevronRight, PlusIcon as PlusIcon$1, AlertCircle, X, Edit2Icon, ChevronLeft, DatabaseIcon, Plus, Bold, Italic, Underline as Underline$1, Strikethrough, List, ListOrdered, AlignLeft, AlignCenter, AlignRight, Link as Link$1, Unlink, Maximize2, PlusCircle, ChevronDown, Info, File, Database, MoreVertical, Loader, SparklesIcon, Search, RefreshCw, Globe, SaveIcon, UnlinkIcon, PencilIcon, EyeOffIcon, Eye, ChevronsUpDown, ChevronsDownUp, Undo as Undo$1, ImportIcon, Type, CornerUpRight, Palette, Sun, Moon, Languages, FileEdit, Recycle, SmileIcon, ShuffleIcon, SunIcon, Sparkles, Loader2, Image as Image$1, Send, DatabaseZapIcon, Edit2, Layers } from "lucide-react";
+import { v as Button, ab as DropdownMenu, ap as DropdownMenuTrigger, ad as DropdownMenuContent, af as DropdownMenuItem, b8 as cn$1, aW as Skeleton, d as Alert, e as AlertDescription, at as Input$1, a1 as Dialog, aa as DialogTrigger, a3 as DialogContent, a9 as DialogTitle, av as Popover, b4 as Tooltip, b7 as TooltipTrigger, ay as PopoverTrigger, b5 as TooltipContent, ax as PopoverContent, F as Command, H as CommandInput, I as CommandList, J as CommandEmpty, K as CommandGroup, L as CommandItem, a6 as DialogHeader, B as Badge, b6 as TooltipProvider, a as AccordionItem, b as AccordionTrigger, c as AccordionContent, ag as DropdownMenuLabel, ak as DropdownMenuSeparator, ac as DropdownMenuCheckboxItem, aq as HoverCard, as as HoverCardTrigger, ar as HoverCardContent, b1 as Textarea, A as Accordion, C as Card, D as CardHeader, y as CardDescription, x as CardContent, au as Label, z as CardFooter, az as ScrollArea, aZ as Tabs, a$ as TabsList, b0 as TabsTrigger, a_ as TabsContent, aX as Slider, aB as Select$1, aJ as SelectTrigger, aK as SelectValue, aC as SelectContent, aE as SelectItem, aL as Separator, aY as Switch, r as Avatar, g as AlertDialog, q as AlertDialogTrigger, j as AlertDialogContent, m as AlertDialogHeader, p as AlertDialogTitle, k as AlertDialogDescription, l as AlertDialogFooter, i as AlertDialogCancel, h as AlertDialogAction, aM as Sheet, aO as SheetContent, aR as SheetHeader, aU as SheetTitle } from "./toggle-C6VUu_7m.js";
 import clsx$1, { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 import TreeModel from "tree-model";
@@ -21,7 +20,7 @@ import { isObject } from "@rjsf/utils";
 import { useDebouncedCallback, useThrottledCallback, useResizeObserver, useIntervalEffect } from "@react-hookz/web";
 import { toast, Toaster } from "sonner";
 import { useTranslation, initReactI18next } from "react-i18next";
-import { useTranslation as He } from "react-i18next";
+import { useTranslation as $e } from "react-i18next";
 import Fuse from "fuse.js";
 import UndoManager from "undo-manager";
 import Link from "@tiptap/extension-link";
@@ -36,7 +35,7 @@ import Autosuggest from "react-autosuggest";
 import { useFeature } from "flagged";
 import { Tree } from "react-arborist";
 import i18n from "i18next";
-import { default as Ue } from "i18next";
+import { default as He } from "i18next";
 import "himalaya";
 import tailwindAspectRatio from "@tailwindcss/aspect-ratio";
 import tailwindForms from "@tailwindcss/forms";
@@ -51,9 +50,9 @@ import { limitShift, flip, size } from "@floating-ui/dom";
 import { useFloating, shift } from "@floating-ui/react-dom";
 import ReactDOM from "react-dom";
 import { Provider as Provider$1 } from "react-wrap-balancer";
-const ICON_CLASS = "h-3 w-3 stroke-[2]", TypeIcon = (o) => {
+const ICON_CLASS = "h-3 w-3", TypeIcon = (o) => {
   const n = useRegisteredChaiBlocks(), r = get(n, [o == null ? void 0 : o.type, "icon"]);
-  return r ? React__default.createElement(r, { className: ICON_CLASS }) : /* @__PURE__ */ jsx(BoxModelIcon, { className: ICON_CLASS });
+  return r ? React__default.createElement(r, { className: ICON_CLASS }) : /* @__PURE__ */ jsx(SquareIcon, { className: ICON_CLASS });
 }, readOnlyModeAtom = atom(!1);
 readOnlyModeAtom.debugLabel = "readOnlyModeAtom";
 const networkModeAtom = atom("online");
@@ -221,7 +220,7 @@ const useSelectedBlocksDisplayChild = () => ({
   return /* @__PURE__ */ jsx("div", { className: "-mx-2 border-t border-border bg-background px-2 py-1 text-xs text-muted-foreground", children: /* @__PURE__ */ jsxs("ol", { className: "flex items-center whitespace-nowrap", children: [
     /* @__PURE__ */ jsxs("li", { className: "inline-flex items-center", children: [
       /* @__PURE__ */ jsx(Button, { onClick: () => n([]), variant: "ghost", className: "h-fit p-1 text-xs font-normal", children: "Body" }),
-      /* @__PURE__ */ jsx(ChevronRight, { className: "rtl:rotate-180", size: 16 })
+      /* @__PURE__ */ jsx(ChevronRightIcon, { className: "rtl:rotate-180 h-4 w-4" })
     ] }),
     reverse(o).map((a, l) => /* @__PURE__ */ jsxs("li", { className: "inline-flex items-center", children: [
       /* @__PURE__ */ jsxs(
@@ -239,7 +238,7 @@ const useSelectedBlocksDisplayChild = () => ({
           ]
         }
       ),
-      l !== o.length - 1 && /* @__PURE__ */ jsx(ChevronRight, { className: "rtl:rotate-180", size: 16 })
+      l !== o.length - 1 && /* @__PURE__ */ jsx(ChevronRightIcon, { className: "rtl:rotate-180 h-4 w-4" })
     ] }, l))
   ] }) });
 }, CHAI_BUILDER_EVENTS = {
@@ -839,13 +838,13 @@ const undoRedoStateAtom = atom({
   } = useBlocksStoreManager();
   return {
     moveBlocks: (x, y, b) => {
-      const S = map(x, (j) => {
-        const A = n.find((E) => E._id === j)._parent || null, w = n.filter((E) => A ? E._parent === A : !E._parent).map((E) => E._id).indexOf(j);
-        return { _id: j, oldParent: A, oldPosition: w };
-      }), B = S.find(({ _id: j }) => j === x[0]);
+      const C = map(x, (j) => {
+        const w = n.find((E) => E._id === j)._parent || null, A = n.filter((E) => w ? E._parent === w : !E._parent).map((E) => E._id).indexOf(j);
+        return { _id: j, oldParent: w, oldPosition: A };
+      }), B = C.find(({ _id: j }) => j === x[0]);
       B && B.oldParent === y && B.oldPosition === b || (i(x, y, b), o({
-        undo: () => each(S, ({ _id: j, oldParent: _, oldPosition: A }) => {
-          i([j], _, A);
+        undo: () => each(C, ({ _id: j, oldParent: _, oldPosition: w }) => {
+          i([j], _, w);
         }),
         redo: () => i(x, y, b)
       }));
@@ -858,25 +857,25 @@ const undoRedoStateAtom = atom({
     },
     removeBlocks: (x) => {
       var B;
-      const y = (B = first(x)) == null ? void 0 : B._parent, S = n.filter((j) => y ? j._parent === y : !j._parent).indexOf(first(x));
+      const y = (B = first(x)) == null ? void 0 : B._parent, C = n.filter((j) => y ? j._parent === y : !j._parent).indexOf(first(x));
       l(map(x, "_id")), o({
-        undo: () => a(x, y, S),
+        undo: () => a(x, y, C),
         redo: () => l(map(x, "_id"))
       });
     },
     updateBlocks: (x, y, b) => {
-      let S = [];
+      let C = [];
       if (b)
-        S = map(x, (B) => ({ _id: B, ...b }));
+        C = map(x, (B) => ({ _id: B, ...b }));
       else {
         const B = keys(y);
-        S = map(x, (j) => {
-          const _ = n.find((k) => k._id === j), A = { _id: j };
-          return each(B, (k) => A[k] = _[k]), A;
+        C = map(x, (j) => {
+          const _ = n.find((k) => k._id === j), w = { _id: j };
+          return each(B, (k) => w[k] = _[k]), w;
         });
       }
       c(map(x, (B) => ({ _id: B, ...y }))), o({
-        undo: () => c(S),
+        undo: () => c(C),
         redo: () => c(map(x, (B) => ({ _id: B, ...y })))
       });
     },
@@ -892,8 +891,8 @@ const undoRedoStateAtom = atom({
     updateMultipleBlocksProps: (x) => {
       let y = [];
       y = map(x, (b) => {
-        const S = keys(b), B = n.find((_) => _._id === b._id), j = {};
-        return each(S, (_) => j[_] = B[_]), j;
+        const C = keys(b), B = n.find((_) => _._id === b._id), j = {};
+        return each(C, (_) => j[_] = B[_]), j;
       }), c(x), o({
         undo: () => c(y),
         redo: () => c(x)
@@ -2367,8 +2366,8 @@ const getBlockWithChildren = (o, n) => {
     for (const y in x) {
       const b = x[y];
       if (typeof b == "string" && startsWith(b, STYLES_KEY)) {
-        const { baseClasses: S, classes: B } = getSplitChaiClasses(b);
-        x[y] = compact(flattenDeep([S, B])).join(" ");
+        const { baseClasses: C, classes: B } = getSplitChaiClasses(b);
+        x[y] = compact(flattenDeep([C, B])).join(" ");
       } else
         y !== "_id" && delete x[y];
     }
@@ -2382,16 +2381,16 @@ const getBlockWithChildren = (o, n) => {
           try {
             const b = p === u ? "" : p;
             console.log("prompt", x);
-            const S = x.toLowerCase().includes("translate the content"), B = h === "content" ? pickOnlyAIProps(cloneDeep(getBlockWithChildren(f, d)), p, S) : [m(f, d)], j = await l(h, addLangToPrompt(x, g, h), B, b), { blocks: _, error: A } = j;
-            if (A) {
-              a(A);
+            const C = x.toLowerCase().includes("translate the content"), B = h === "content" ? pickOnlyAIProps(cloneDeep(getBlockWithChildren(f, d)), p, C) : [m(f, d)], j = await l(h, addLangToPrompt(x, g, h), B, b), { blocks: _, error: w } = j;
+            if (w) {
+              a(w);
               return;
             }
             if (h === "styles") {
-              const k = _.map((w) => {
-                for (const E in w)
-                  E !== "_id" && (w[E] = `${STYLES_KEY},${w[E]}`);
-                return w;
+              const k = _.map((A) => {
+                for (const E in A)
+                  E !== "_id" && (A[E] = `${STYLES_KEY},${A[E]}`);
+                return A;
               });
               c(k);
             } else
@@ -3008,8 +3007,8 @@ const INLINE_EDITABLE_BLOCKS = ["Heading", "Paragraph", "Text", "Link", "Span"],
       }),
       size({
         boundary: u == null ? void 0 : u.body,
-        apply({ availableWidth: y, availableHeight: b, elements: S }) {
-          Object.assign(S.floating.style, {
+        apply({ availableWidth: y, availableHeight: b, elements: C }) {
+          Object.assign(C.floating.style, {
             maxWidth: `${Math.max(200, y)}px`,
             maxHeight: `${Math.max(100, b)}px`
           });
@@ -3229,7 +3228,7 @@ const ChaiFrame = React__default.forwardRef((o, n) => /* @__PURE__ */ jsx(Frame,
         onClick: () => pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK),
         className: "block h-1 rounded bg-primary opacity-0 duration-200 group-hover:opacity-100",
         children: /* @__PURE__ */ jsxs("div", { className: "absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 transform items-center gap-x-1 rounded-full bg-primary px-3 py-1 text-xs leading-tight text-white hover:bg-primary", children: [
-          /* @__PURE__ */ jsx(PlusIcon$1, { className: "size-2.5 stroke-[3]" }),
+          /* @__PURE__ */ jsx(PlusIcon, { className: "size-2.5 stroke-[3]" }),
           " ",
           o("Add block")
         ] })
@@ -3325,7 +3324,16 @@ const ChaiFrame = React__default.forwardRef((o, n) => /* @__PURE__ */ jsx(Frame,
   const d = useCallback(() => {
     a([]), l([]);
   }, [a, l]);
-  return /* @__PURE__ */ jsx("div", { id: "main-content", onClick: d, className: "h-full w-full p-8 pb-0", ref: i, children: o });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      id: "main-content",
+      onClick: d,
+      className: "h-full w-full border-l-4 border-r-4 pb-0",
+      ref: i,
+      children: o
+    }
+  );
 }, MayBeAsyncPropsWrapper = ({ children: o, block: n }) => {
   const r = useMemo(() => getRegisteredChaiBlock(n._type), [n._type]), a = get(r, "dataProviderDependencies"), l = get(r, "dataProvider"), i = get(r, "dataProviderMode", "mock"), c = useAsyncProps(n, i, a, l);
   return o(c);
@@ -3600,28 +3608,28 @@ const ChaiFrame = React__default.forwardRef((o, n) => /* @__PURE__ */ jsx(Frame,
   }
 ), WithBlockTextEditor = memo(
   ({ block: o, children: n }) => {
-    const r = "content", { document: a } = useFrame(), { editingBlockId: l, editingItemIndex: i, setEditingBlockId: c, setEditingItemIndex: d } = useInlineEditing(), [p, u] = useState(null), g = useRef(null), { clearHighlight: m } = useBlockHighlight(), h = useUpdateBlocksProps(), { selectedLang: f } = useLanguages(), [, x] = useSelectedBlockIds(), y = useRef(null), b = l, { blockContent: S, blockType: B } = useMemo(() => {
-      var N;
-      const w = o._type;
+    const r = "content", { document: a } = useFrame(), { editingBlockId: l, editingItemIndex: i, setEditingBlockId: c, setEditingItemIndex: d } = useInlineEditing(), [p, u] = useState(null), g = useRef(null), { clearHighlight: m } = useBlockHighlight(), h = useUpdateBlocksProps(), { selectedLang: f } = useLanguages(), [, x] = useSelectedBlockIds(), y = useRef(null), b = l, { blockContent: C, blockType: B } = useMemo(() => {
+      var I;
+      const A = o._type;
       let E = o[r];
-      const C = getRegisteredChaiBlock(o._type);
-      return f && ((N = C == null ? void 0 : C.i18nProps) == null ? void 0 : N.includes(r)) && has(o, `${r}-${f}`) && (E = get(o, `${r}-${f}`)), { blockContent: E, blockType: w };
+      const S = getRegisteredChaiBlock(o._type);
+      return f && ((I = S == null ? void 0 : S.i18nProps) == null ? void 0 : I.includes(r)) && has(o, `${r}-${f}`) && (E = get(o, `${r}-${f}`)), { blockContent: E, blockType: A };
     }, [o, f]), j = useCallback(
-      (w) => {
-        var C;
-        const E = w || ((C = g.current) == null ? void 0 : C.innerText);
+      (A) => {
+        var S;
+        const E = A || ((S = g.current) == null ? void 0 : S.innerText);
         h([b], { [r]: E }), u(null), c(null), d(-1), x(b ? [b] : []);
       },
       [b, h, c, x, f]
     ), _ = useDebouncedCallback(
-      (w) => {
-        h([b], { [r]: w });
+      (A) => {
+        h([b], { [r]: A });
       },
       [b, o, h, f],
       1e3
-    ), A = useCallback(
-      (w) => {
-        w.preventDefault(), b && (y.current = b), j(), setTimeout(() => {
+    ), w = useCallback(
+      (A) => {
+        A.preventDefault(), b && (y.current = b), j(), setTimeout(() => {
           const E = y.current;
           y.current = null, x([E]);
         }, 100);
@@ -3631,29 +3639,29 @@ const ChaiFrame = React__default.forwardRef((o, n) => /* @__PURE__ */ jsx(Frame,
     useEffect(() => {
       var v;
       if (!b) return;
-      const w = `[data-block-id="${b}"]`, E = i >= 0 ? `[data-block-index="${i}"]` : "", C = a.querySelector(`${w}${E}`);
-      C && ((v = C == null ? void 0 : C.classList) == null || v.add("sr-only"), u(C));
+      const A = `[data-block-id="${b}"]`, E = i >= 0 ? `[data-block-index="${i}"]` : "", S = a.querySelector(`${A}${E}`);
+      S && ((v = S == null ? void 0 : S.classList) == null || v.add("sr-only"), u(S));
     }, [b, B, a, i]);
     const k = useMemo(() => p ? (m(), B === "RichText" ? /* @__PURE__ */ jsx(
       RichTextEditor,
       {
-        blockContent: S,
+        blockContent: C,
         editingElement: p,
         onChange: _,
         onClose: j,
-        onEscape: A
+        onEscape: w
       }
     ) : /* @__PURE__ */ jsx(
       MemoizedEditor,
       {
         editorRef: g,
-        blockContent: S,
+        blockContent: C,
         editingElement: p,
         onClose: j,
         onChange: _,
-        onEscape: A
+        onEscape: w
       }
-    )) : null, [p, b, B, S, j, f]);
+    )) : null, [p, b, B, C, j, f]);
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       k,
       n
@@ -3694,7 +3702,7 @@ const ChaiFrame = React__default.forwardRef((o, n) => /* @__PURE__ */ jsx(Frame,
       key: y
     }) : applyLanguage(i, d, c),
     [i, d, c, g, h, x, y]
-  ), S = useMemo(() => getBlockTagAttributes(i), [i, getBlockTagAttributes]), B = useMemo(
+  ), C = useMemo(() => getBlockTagAttributes(i), [i, getBlockTagAttributes]), B = useMemo(
     () => u(i._id, getBlockRuntimeProps(i._type)),
     [i._id, i._type, u, getBlockRuntimeProps]
   ), j = useMemo(
@@ -3703,7 +3711,7 @@ const ChaiFrame = React__default.forwardRef((o, n) => /* @__PURE__ */ jsx(Frame,
       inBuilder: !0,
       lang: d || p,
       ...b,
-      ...S,
+      ...C,
       ...B,
       ...o
     }),
@@ -3713,13 +3721,13 @@ const ChaiFrame = React__default.forwardRef((o, n) => /* @__PURE__ */ jsx(Frame,
       d,
       p,
       b,
-      S,
+      C,
       B,
       o
     ]
   ), _ = useMemo(() => !CORE_BLOCKS.includes(i._type), [i._type]);
   if (isNull(f) || m.includes(i._id)) return null;
-  let A = /* @__PURE__ */ jsx(Suspense, { children: createElement(f, {
+  let w = /* @__PURE__ */ jsx(Suspense, { children: createElement(f, {
     ...j,
     children: r({
       _id: i._id,
@@ -3732,7 +3740,7 @@ const ChaiFrame = React__default.forwardRef((o, n) => /* @__PURE__ */ jsx(Frame,
       ...i.globalBlock ? { partialBlockId: i.globalBlock } : ""
     })
   }) });
-  const k = a === i._id && (l === x || x < 0) ? /* @__PURE__ */ jsx(WithBlockTextEditor, { block: i, children: A }) : A;
+  const k = a === i._id && (l === x || x < 0) ? /* @__PURE__ */ jsx(WithBlockTextEditor, { block: i, children: w }) : w;
   return _ ? /* @__PURE__ */ jsx(ErrorBoundary, { fallbackRender: ErrorFallback, children: k }) : k;
 }, PartialWrapper = ({ children: o, partialBlockId: n }) => {
   const r = useBuilderProp("gotoPage", noop), { saveState: a } = useSavePage(), { selectedLang: l, fallbackLang: i } = useLanguages(), c = useCallback(
@@ -3898,9 +3906,9 @@ const CanvasEventsWatcher = () => {
 }, FallbackError = () => /* @__PURE__ */ jsx("div", { className: "h-full w-full rounded-md bg-red-200 p-4 text-red-500", children: /* @__PURE__ */ jsxs("div", { className: "flex h-full w-full flex-col items-center justify-center", children: [
   /* @__PURE__ */ jsx("p", { className: "font-semibold", children: "Oops! Something went wrong." }),
   /* @__PURE__ */ jsx("p", { children: "Please try again." })
-] }) }), CodeEditor$1 = React__default.lazy(() => import("./code-editor-RwOkFe_0.js")), CanvasArea = () => {
+] }) }), CodeEditor$1 = React__default.lazy(() => import("./code-editor-tDa4T69w.js")), CanvasArea = () => {
   const [o] = useCodeEditor(), n = useBuilderProp("onError", noop);
-  return /* @__PURE__ */ jsx("div", { className: "flex h-full max-h-full w-full flex-1 flex-col", children: /* @__PURE__ */ jsxs("div", { className: "relative flex h-full max-h-full flex-col overflow-hidden bg-gray-100/40 px-2", children: [
+  return /* @__PURE__ */ jsx("div", { className: "flex h-full max-h-full w-full flex-1 flex-col", children: /* @__PURE__ */ jsxs("div", { className: "relative flex h-full max-h-full flex-col overflow-hidden bg-gray-100/40", children: [
     /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(Skeleton, { className: "h-full" }), children: /* @__PURE__ */ jsx(ErrorBoundary, { fallback: /* @__PURE__ */ jsx(FallbackError, {}), onError: n, children: /* @__PURE__ */ jsx(StaticCanvas, {}) }) }),
     o ? /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(Skeleton, { className: "h-full" }), children: /* @__PURE__ */ jsx(CodeEditor$1, {}) }) : null,
     /* @__PURE__ */ jsx(Breadcrumb, {})
@@ -3979,7 +3987,7 @@ const CanvasEventsWatcher = () => {
   return /* @__PURE__ */ jsxs("div", { className: "flex w-96 flex-col gap-4 p-4", children: [
     /* @__PURE__ */ jsx("h2", { className: "text-xl font-semibold", children: h(`${r.charAt(0).toUpperCase() + r.slice(1)} Manager`) }),
     u && /* @__PURE__ */ jsxs(Alert, { variant: "destructive", children: [
-      /* @__PURE__ */ jsx(AlertCircle, { className: "h-4 w-4" }),
+      /* @__PURE__ */ jsx(ExclamationTriangleIcon, { className: "h-4 w-4" }),
       /* @__PURE__ */ jsx(AlertDescription, { children: u })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
@@ -4032,10 +4040,10 @@ const PLACEHOLDER_IMAGE = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAwIiBoZWl
     const b = isArray(y) ? first(y) : y;
     if (b) {
       n(b == null ? void 0 : b.url);
-      const S = b == null ? void 0 : b.width, B = b == null ? void 0 : b.height;
+      const C = b == null ? void 0 : b.width, B = b == null ? void 0 : b.height;
       if (c != null && c._id) {
         const j = {
-          ...S && { width: S },
+          ...C && { width: C },
           ...B && { height: B },
           ...b.description && { alt: b.description }
         };
@@ -4062,7 +4070,7 @@ const PLACEHOLDER_IMAGE = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAwIiBoZWl
           type: "button",
           onClick: x,
           className: "absolute -right-2 -top-2 z-20 rounded-full bg-destructive p-1 text-destructive-foreground hover:bg-destructive/90",
-          children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" })
+          children: /* @__PURE__ */ jsx(Cross1Icon, { className: "h-3 w-3" })
         }
       ),
       m && m !== "" && /* @__PURE__ */ jsx(MediaManagerModal, { onSelect: f, assetId: m, children: /* @__PURE__ */ jsx(
@@ -4070,7 +4078,7 @@ const PLACEHOLDER_IMAGE = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAwIiBoZWl
         {
           type: "button",
           className: "absolute inset-0 z-10 flex cursor-pointer items-center justify-center bg-black/10 opacity-0 transition duration-200 group-hover:bg-black/30 group-hover:opacity-100",
-          children: /* @__PURE__ */ jsx(Edit2Icon, { className: "h-4 w-4 text-white" })
+          children: /* @__PURE__ */ jsx(Pencil2Icon, { className: "h-4 w-4 text-white" })
         }
       ) })
     ] }) : /* @__PURE__ */ jsx(MediaManagerModal, { onSelect: f, mode: "image", assetId: m, children: /* @__PURE__ */ jsx("div", { className: "h-20 w-20 cursor-pointer rounded-md border border-border bg-[radial-gradient(#AAA,transparent_1px)] duration-300 [background-size:10px_10px]" }) }),
@@ -4115,7 +4123,7 @@ const PLACEHOLDER_IMAGE = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAwIiBoZWl
       /* @__PURE__ */ jsx(CommandEmpty, { children: "No option found." }),
       /* @__PURE__ */ jsxs(CommandGroup, { children: [
         a.length > 0 && /* @__PURE__ */ jsxs(CommandItem, { onSelect: u, className: "flex items-center text-sm", children: [
-          /* @__PURE__ */ jsx(ChevronLeft, { className: "mr-2 h-4 w-4" }),
+          /* @__PURE__ */ jsx(ChevronLeftIcon, { className: "mr-2 h-4 w-4" }),
           "Back"
         ] }),
         g.map((m) => /* @__PURE__ */ jsxs(
@@ -4127,7 +4135,7 @@ const PLACEHOLDER_IMAGE = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAwIiBoZWl
             className: "flex items-center justify-between",
             children: [
               /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-x-2", children: [
-                startsWith(m.key, REPEATER_PREFIX) ? /* @__PURE__ */ jsx(LoopIcon, {}) : startsWith(m.key, COLLECTION_PREFIX) ? /* @__PURE__ */ jsx(DatabaseIcon, {}) : null,
+                startsWith(m.key, REPEATER_PREFIX) ? /* @__PURE__ */ jsx(LoopIcon, {}) : startsWith(m.key, COLLECTION_PREFIX) ? /* @__PURE__ */ jsx(IdCardIcon, {}) : null,
                 startsWith(m.key, REPEATER_PREFIX) ? "Repeater Data" : startsWith(m.key, COLLECTION_PREFIX) ? m.key.replace(COLLECTION_PREFIX, "") : m.key
               ] }),
               /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
@@ -4143,7 +4151,7 @@ const PLACEHOLDER_IMAGE = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAwIiBoZWl
                     children: "Select"
                   }
                 ),
-                m.type === "object" && /* @__PURE__ */ jsx("div", { className: "cursor-pointer rounded p-1 hover:bg-muted", children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4 opacity-50" }) })
+                m.type === "object" && /* @__PURE__ */ jsx("div", { className: "cursor-pointer rounded p-1 hover:bg-muted", children: /* @__PURE__ */ jsx(ChevronRightIcon, { className: "h-4 w-4 opacity-50" }) })
               ] })
             ]
           },
@@ -4207,10 +4215,10 @@ const DataBindingSelector = ({
         n(`{{${g}}}`, {}, r);
         return;
       }
-      const h = (b) => /[.,!?;:]/.test(b), f = (b, S, B) => {
+      const h = (b) => /[.,!?;:]/.test(b), f = (b, C, B) => {
         let j = "", _ = "";
-        const A = S > 0 ? b[S - 1] : "", k = S < b.length ? b[S] : "";
-        return S > 0 && (A === "." || !h(A) && A !== " ") && (j = " "), S < b.length && !h(k) && k !== " " && (_ = " "), {
+        const w = C > 0 ? b[C - 1] : "", k = C < b.length ? b[C] : "";
+        return C > 0 && (w === "." || !h(w) && w !== " ") && (j = " "), C < b.length && !h(k) && k !== " " && (_ = " "), {
           text: j + B + _,
           prefixLength: j.length,
           suffixLength: _.length
@@ -4221,30 +4229,30 @@ const DataBindingSelector = ({
       if (y && (y.querySelector(".ProseMirror") || y.__chaiRTE)) {
         const b = y.__chaiRTE;
         if (b) {
-          const S = `{{${g}}}`;
+          const C = `{{${g}}}`;
           b.commands.focus();
           const { from: B, to: j } = b.state.selection;
           if (B !== j)
-            b.chain().deleteSelection().insertContent(S).run();
+            b.chain().deleteSelection().insertContent(C).run();
           else {
-            const { state: A } = b, k = A.selection.from, w = A.doc.textBetween(Math.max(0, k - 1), k), E = A.doc.textBetween(k, Math.min(k + 1, A.doc.content.size));
-            let C = "";
-            k > 0 && w !== " " && !h(w) && (C = " ");
+            const { state: w } = b, k = w.selection.from, A = w.doc.textBetween(Math.max(0, k - 1), k), E = w.doc.textBetween(k, Math.min(k + 1, w.doc.content.size));
+            let S = "";
+            k > 0 && A !== " " && !h(A) && (S = " ");
             let v = "";
-            E && E !== " " && !h(E) && (v = " "), b.chain().insertContent(C + S + v).run();
+            E && E !== " " && !h(E) && (v = " "), b.chain().insertContent(S + C + v).run();
           }
           setTimeout(() => n(b.getHTML(), {}, r), 100);
           return;
         }
       } else {
-        const b = x, S = b.selectionStart || 0, B = b.value || "", j = b.selectionEnd || S;
-        if (j > S) {
-          const E = `{{${g}}}`, { text: C } = f(B, S, E), v = B.slice(0, S) + C + B.slice(j);
+        const b = x, C = b.selectionStart || 0, B = b.value || "", j = b.selectionEnd || C;
+        if (j > C) {
+          const E = `{{${g}}}`, { text: S } = f(B, C, E), v = B.slice(0, C) + S + B.slice(j);
           n(v, {}, r);
           return;
         }
-        const A = `{{${g}}}`, { text: k } = f(B, S, A), w = B.slice(0, S) + k + B.slice(S);
-        n(w, {}, r);
+        const w = `{{${g}}}`, { text: k } = f(B, C, w), A = B.slice(0, C) + k + B.slice(C);
+        n(A, {}, r);
       }
     },
     [r, n, a, c == null ? void 0 : c._id, d]
@@ -4266,73 +4274,73 @@ const DataBindingSelector = ({
   onChange: r
 }) => {
   var E;
-  const { t: a } = useTranslation(), l = useBuilderProp("searchPageTypeItems", (C, v) => []), [i, c] = useState(!1), [d, p] = useState(!1), [u, g] = useState("page"), [m, h] = useState(""), [f, x] = useState([]), [y, b] = useState(-1), S = useRef(null), B = (E = n == null ? void 0 : n.find((C) => C.key === u)) == null ? void 0 : E.name;
+  const { t: a } = useTranslation(), l = useBuilderProp("searchPageTypeItems", (S, v) => []), [i, c] = useState(!1), [d, p] = useState(!1), [u, g] = useState("page"), [m, h] = useState(""), [f, x] = useState([]), [y, b] = useState(-1), C = useRef(null), B = (E = n == null ? void 0 : n.find((S) => S.key === u)) == null ? void 0 : E.name;
   useEffect(() => {
     if (h(""), x([]), b(-1), p(!1), !o || i || !startsWith(o, "pageType:")) return;
-    const C = split(o, ":"), v = get(C, 1, "page") || "page";
+    const S = split(o, ":"), v = get(S, 1, "page") || "page";
     g(v), (async () => {
-      const N = await l(v, [get(C, 2, "page")]);
-      N && Array.isArray(N) && h(get(N, [0, "name"], ""));
+      const I = await l(v, [get(S, 2, "page")]);
+      I && Array.isArray(I) && h(get(I, [0, "name"], ""));
     })();
   }, [o]);
   const j = useDebouncedCallback(
-    async (C) => {
-      if (isEmpty(C))
+    async (S) => {
+      if (isEmpty(S))
         x([]);
       else {
-        const v = await l(u, C);
+        const v = await l(u, S);
         x(v);
       }
       c(!1), b(-1);
     },
     [u],
     300
-  ), _ = (C) => {
-    const v = ["pageType", u, C.id];
-    v[1] && (r(v.join(":")), h(C.name), p(!1), x([]), b(-1));
-  }, A = (C) => {
-    switch (C.key) {
+  ), _ = (S) => {
+    const v = ["pageType", u, S.id];
+    v[1] && (r(v.join(":")), h(S.name), p(!1), x([]), b(-1));
+  }, w = (S) => {
+    switch (S.key) {
       case "ArrowDown":
-        C.preventDefault(), b((v) => v < f.length - 1 ? v + 1 : v);
+        S.preventDefault(), b((v) => v < f.length - 1 ? v + 1 : v);
         break;
       case "ArrowUp":
-        C.preventDefault(), b((v) => v > 0 ? v - 1 : v);
+        S.preventDefault(), b((v) => v > 0 ? v - 1 : v);
         break;
       case "Enter":
-        if (C.preventDefault(), f.length === 0) return;
+        if (S.preventDefault(), f.length === 0) return;
         y >= 0 && _(f[y]);
         break;
       case "Escape":
-        C.preventDefault(), k();
+        S.preventDefault(), k();
         break;
     }
   };
   useEffect(() => {
-    if (y >= 0 && S.current) {
-      const C = S.current.children[y];
-      C == null || C.scrollIntoView({ block: "nearest" });
+    if (y >= 0 && C.current) {
+      const S = C.current.children[y];
+      S == null || S.scrollIntoView({ block: "nearest" });
     }
   }, [y]);
   const k = () => {
     h(""), x([]), b(-1), p(!1), r("");
-  }, w = (C) => {
-    h(C), p(!isEmpty(C)), c(!0), j(C);
+  }, A = (S) => {
+    h(S), p(!isEmpty(S)), c(!0), j(S);
   };
   return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx("select", { name: "pageType", value: u, onChange: (C) => g(C.target.value), children: map(n, (C) => /* @__PURE__ */ jsx("option", { value: C.key, children: C.name }, C.key)) }),
+    /* @__PURE__ */ jsx("select", { name: "pageType", value: u, onChange: (S) => g(S.target.value), children: map(n, (S) => /* @__PURE__ */ jsx("option", { value: S.key, children: S.name }, S.key)) }),
     u && /* @__PURE__ */ jsxs("div", { className: "group relative mt-2 flex items-center", children: [
       /* @__PURE__ */ jsx(
         "input",
         {
           type: "text",
           value: m,
-          onChange: (C) => w(C.target.value),
-          onKeyDown: A,
+          onChange: (S) => A(S.target.value),
+          onKeyDown: w,
           placeholder: a(`Search ${B ?? ""}`),
           className: "w-full rounded-md border border-gray-300 p-2 pr-16"
         }
       ),
-      /* @__PURE__ */ jsx("div", { className: "absolute bottom-2 right-2 top-3 flex items-center gap-1.5", children: m && /* @__PURE__ */ jsx("button", { onClick: k, className: "text-gray-400 hover:text-gray-600", title: a("Clear search"), children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }) }) })
+      /* @__PURE__ */ jsx("div", { className: "absolute bottom-2 right-2 top-3 flex items-center gap-1.5", children: m && /* @__PURE__ */ jsx("button", { onClick: k, className: "text-gray-400 hover:text-gray-600", title: a("Clear search"), children: /* @__PURE__ */ jsx(Cross1Icon, { className: "h-4 w-4" }) }) })
     ] }),
     (i || !isEmpty(f) || d && isEmpty(f)) && /* @__PURE__ */ jsx("div", { className: "absolute z-40 mt-2 max-h-40 w-full max-w-[250px] overflow-y-auto rounded-md border border-border bg-background shadow-lg", children: i ? /* @__PURE__ */ jsxs("div", { className: "space-y-1 p-2", children: [
       /* @__PURE__ */ jsx("div", { className: "h-6 w-full animate-pulse rounded bg-gray-200" }),
@@ -4342,22 +4350,22 @@ const DataBindingSelector = ({
       ' "',
       m,
       '"'
-    ] }) : /* @__PURE__ */ jsx("ul", { ref: S, children: map(f == null ? void 0 : f.slice(0, 20), (C, v) => /* @__PURE__ */ jsxs(
+    ] }) : /* @__PURE__ */ jsx("ul", { ref: C, children: map(f == null ? void 0 : f.slice(0, 20), (S, v) => /* @__PURE__ */ jsxs(
       "li",
       {
-        onClick: () => _(C),
-        className: `cursor-pointer p-2 text-xs ${o != null && o.includes(C.id) ? "bg-blue-200" : v === y ? "bg-gray-100" : "hover:bg-gray-100"}`,
+        onClick: () => _(S),
+        className: `cursor-pointer p-2 text-xs ${o != null && o.includes(S.id) ? "bg-blue-200" : v === y ? "bg-gray-100" : "hover:bg-gray-100"}`,
         children: [
-          C.name,
+          S.name,
           " ",
-          C.slug && /* @__PURE__ */ jsxs("small", { className: "font-light text-gray-500", children: [
+          S.slug && /* @__PURE__ */ jsxs("small", { className: "font-light text-gray-500", children: [
             "( ",
-            C.slug,
+            S.slug,
             " )"
           ] })
         ]
       },
-      C.id
+      S.id
     )) }) })
   ] });
 }, LinkField = ({ schema: o, formData: n, onChange: r, name: a }) => {
@@ -4440,7 +4448,7 @@ const DataBindingSelector = ({
       className: "duratiom-300 flex items-center gap-x-1 rounded border border-gray-400 bg-gray-100 px-4 py-1 text-[11px] font-medium leading-tight hover:bg-slate-200",
       onClick: () => r({ type: "Column", styles: "#styles:," }, a == null ? void 0 : a._id),
       children: [
-        /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4" }),
+        /* @__PURE__ */ jsx(PlusIcon, { className: "h-4 w-4" }),
         " Add Column"
       ]
     }
@@ -4466,7 +4474,7 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
         onClick: () => o.chain().focus().toggleBold().run(),
         className: cn("rounded p-1 hover:bg-muted", { "bg-muted": o.isActive("bold") }),
         title: "Bold",
-        children: /* @__PURE__ */ jsx(Bold, { className: "h-4 w-4" })
+        children: /* @__PURE__ */ jsx(LetterCaseCapitalizeIcon, { className: "h-4 w-4" })
       }
     ),
     /* @__PURE__ */ jsx(
@@ -4476,7 +4484,7 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
         onClick: () => o.chain().focus().toggleItalic().run(),
         className: cn("rounded p-1 hover:bg-muted", { "bg-muted": o.isActive("italic") }),
         title: "Italic",
-        children: /* @__PURE__ */ jsx(Italic, { className: "h-4 w-4" })
+        children: /* @__PURE__ */ jsx(FontItalicIcon, { className: "h-4 w-4" })
       }
     ),
     /* @__PURE__ */ jsx(
@@ -4486,7 +4494,7 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
         onClick: () => o.chain().focus().toggleUnderline().run(),
         className: cn("rounded p-1 hover:bg-muted", { "bg-muted": o.isActive("underline") }),
         title: "Underline",
-        children: /* @__PURE__ */ jsx(Underline$1, { className: "h-4 w-4" })
+        children: /* @__PURE__ */ jsx(UnderlineIcon, { className: "h-4 w-4" })
       }
     ),
     /* @__PURE__ */ jsx(
@@ -4496,7 +4504,7 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
         onClick: () => o.chain().focus().toggleStrike().run(),
         className: cn("rounded p-1 hover:bg-muted", { "bg-muted": o.isActive("strike") }),
         title: "Strike",
-        children: /* @__PURE__ */ jsx(Strikethrough, { className: "h-4 w-4" })
+        children: /* @__PURE__ */ jsx(StrikethroughIcon, { className: "h-4 w-4" })
       }
     ),
     /* @__PURE__ */ jsx("div", { className: "mx-1 h-6 w-px self-center bg-border" }),
@@ -4507,7 +4515,7 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
         onClick: () => o.chain().focus().toggleBulletList().run(),
         className: cn("rounded p-1 hover:bg-muted", { "bg-muted": o.isActive("bulletList") }),
         title: "Bullet List",
-        children: /* @__PURE__ */ jsx(List, { className: "h-4 w-4" })
+        children: /* @__PURE__ */ jsx(ListBulletIcon, { className: "h-4 w-4" })
       }
     ),
     /* @__PURE__ */ jsx(
@@ -4517,7 +4525,7 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
         onClick: () => o.chain().focus().toggleOrderedList().run(),
         className: cn("rounded p-1 hover:bg-muted", { "bg-muted": o.isActive("orderedList") }),
         title: "Ordered List",
-        children: /* @__PURE__ */ jsx(ListOrdered, { className: "h-4 w-4" })
+        children: /* @__PURE__ */ jsx(ValueIcon, { className: "h-4 w-4" })
       }
     ),
     /* @__PURE__ */ jsx("div", { className: "mx-1 h-6 w-px self-center bg-border" }),
@@ -4528,7 +4536,7 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
         onClick: () => o.chain().focus().setTextAlign("left").run(),
         className: cn("rounded p-1 hover:bg-muted", { "bg-muted": o.isActive({ textAlign: "left" }) }),
         title: "Align Left",
-        children: /* @__PURE__ */ jsx(AlignLeft, { className: "h-4 w-4" })
+        children: /* @__PURE__ */ jsx(TextAlignLeftIcon, { className: "h-4 w-4" })
       }
     ),
     /* @__PURE__ */ jsx(
@@ -4538,7 +4546,7 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
         onClick: () => o.chain().focus().setTextAlign("center").run(),
         className: cn("rounded p-1 hover:bg-muted", { "bg-muted": o.isActive({ textAlign: "center" }) }),
         title: "Align Center",
-        children: /* @__PURE__ */ jsx(AlignCenter, { className: "h-4 w-4" })
+        children: /* @__PURE__ */ jsx(TextAlignCenterIcon, { className: "h-4 w-4" })
       }
     ),
     /* @__PURE__ */ jsx(
@@ -4548,7 +4556,7 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
         onClick: () => o.chain().focus().setTextAlign("right").run(),
         className: cn("rounded p-1 hover:bg-muted", { "bg-muted": o.isActive({ textAlign: "right" }) }),
         title: "Align Right",
-        children: /* @__PURE__ */ jsx(AlignRight, { className: "h-4 w-4" })
+        children: /* @__PURE__ */ jsx(TextAlignRightIcon, { className: "h-4 w-4" })
       }
     ),
     /* @__PURE__ */ jsx("div", { className: "mx-1 h-6 w-px self-center bg-border" }),
@@ -4559,7 +4567,7 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
         onClick: r,
         className: cn("rounded p-1 hover:bg-muted", { "bg-muted": o.isActive("link") }),
         title: "Add Link",
-        children: /* @__PURE__ */ jsx(Link$1, { className: "h-4 w-4" })
+        children: /* @__PURE__ */ jsx(Link1Icon, { className: "h-4 w-4" })
       }
     ),
     /* @__PURE__ */ jsx(
@@ -4570,7 +4578,7 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
         className: cn("rounded p-1 hover:bg-muted"),
         title: "Remove Link",
         disabled: !o.isActive("link"),
-        children: /* @__PURE__ */ jsx(Unlink, { className: "h-4 w-4" })
+        children: /* @__PURE__ */ jsx(LinkBreak1Icon, { className: "h-4 w-4" })
       }
     ),
     n && /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -4582,7 +4590,7 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
           onClick: n,
           className: "rounded p-1 hover:bg-muted",
           title: "Open in full screen mode",
-          children: /* @__PURE__ */ jsx(Maximize2, { className: "h-4 w-4" })
+          children: /* @__PURE__ */ jsx(EnterFullScreenIcon, { className: "h-4 w-4" })
         }
       )
     ] })
@@ -4661,11 +4669,11 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
     if (f !== x)
       u.chain().deleteSelection().insertContent(h).run();
     else {
-      const { state: b } = u, S = b.selection.from, B = b.doc.textBetween(Math.max(0, S - 1), S), j = b.doc.textBetween(S, Math.min(S + 1, b.doc.content.size));
+      const { state: b } = u, C = b.selection.from, B = b.doc.textBetween(Math.max(0, C - 1), C), j = b.doc.textBetween(C, Math.min(C + 1, b.doc.content.size));
       let _ = "";
-      S > 0 && B !== " " && !/[.,!?;:]/.test(B) && (_ = " ");
-      let A = "";
-      j && j !== " " && !/[.,!?;:]/.test(j) && (A = " "), u.chain().insertContent(_ + h + A).run();
+      C > 0 && B !== " " && !/[.,!?;:]/.test(B) && (_ = " ");
+      let w = "";
+      j && j !== " " && !/[.,!?;:]/.test(j) && (w = " "), u.chain().insertContent(_ + h + w).run();
     }
   };
   return /* @__PURE__ */ jsx(Dialog, { open: o, onOpenChange: (m) => !m && n(), children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-h-[90vh] overflow-y-auto sm:max-w-[800px]", children: [
@@ -4779,7 +4787,7 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
   };
   return /* @__PURE__ */ jsxs("div", { className: "space-y-1.5 px-2", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-2 pb-2 text-[12px]", children: [
-      /* @__PURE__ */ jsx("button", { onClick: h, className: "rounded bg-gray-200 p-1.5 hover:opacity-80", children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-3 w-3 stroke-[3]" }) }),
+      /* @__PURE__ */ jsx("button", { onClick: h, className: "rounded bg-gray-200 p-1.5 hover:opacity-80", children: /* @__PURE__ */ jsx(ChevronLeftIcon, { className: "h-3 w-3" }) }),
       /* @__PURE__ */ jsx("div", { className: "whitespace-nowrap text-center text-[10px] text-slate-500", children: g ? /* @__PURE__ */ jsxs("span", { className: "", children: [
         /* @__PURE__ */ jsxs("b", { className: "text-[12px]", children: [
           " ",
@@ -4788,14 +4796,14 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
         "/",
         u.length
       ] }) : "-" }),
-      /* @__PURE__ */ jsx("button", { onClick: m, className: "rounded bg-gray-200 p-1.5 hover:opacity-80", children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-3 w-3 stroke-[3]" }) }),
+      /* @__PURE__ */ jsx("button", { onClick: m, className: "rounded bg-gray-200 p-1.5 hover:opacity-80", children: /* @__PURE__ */ jsx(ChevronRightIcon, { className: "h-3 w-3" }) }),
       /* @__PURE__ */ jsxs(
         "button",
         {
           onClick: f,
           className: "flex w-full items-center justify-center gap-x-1 rounded bg-gray-200 p-1.5 text-xs font-medium leading-tight hover:opacity-80",
           children: [
-            /* @__PURE__ */ jsx(PlusCircle, { className: "h-3 w-3 stroke-[2]" }),
+            /* @__PURE__ */ jsx(PlusCircledIcon, { className: "h-3 w-3" }),
             "Add Slide"
           ]
         }
@@ -4882,7 +4890,7 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
           type: "button",
           onClick: l,
           className: "flex items-center gap-x-1 rounded-md border border-blue-500 bg-blue-100 px-2 py-px text-xs text-blue-600 hover:opacity-80",
-          children: /* @__PURE__ */ jsx(Plus, { size: 12 })
+          children: /* @__PURE__ */ jsx(PlusIcon, { className: "h-3 w-3" })
         }
       )
     ] }),
@@ -4893,7 +4901,7 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
           type: "button",
           onClick: () => i(d),
           className: "absolute -right-px -top-0 -translate-y-1/2 rounded-full bg-red-100 p-1 opacity-0 hover:bg-red-200 group-hover:opacity-100",
-          children: /* @__PURE__ */ jsx(X, { size: 10, className: "text-red-500" })
+          children: /* @__PURE__ */ jsx(Cross1Icon, { className: "h-2.5 w-2.5 text-red-500" })
         }
       ),
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-2 rounded border", children: [
@@ -4965,14 +4973,14 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
   const { selectedLang: m, fallbackLang: h, languages: f } = useLanguages(), x = useMemo(
     () => isEmpty(f) ? "" : isEmpty(m) ? h : m,
     [f, m, h]
-  ), y = useMemo(() => get(LANGUAGES, x, x), [x]), b = usePageExternalData(), S = useSelectedBlock(), B = useRegisteredChaiBlocks(), j = useMemo(
-    () => get(B, [S == null ? void 0 : S._type, "i18nProps"], []),
-    [B, S == null ? void 0 : S._type]
-  ), [_, A] = useState(null);
+  ), y = useMemo(() => get(LANGUAGES, x, x), [x]), b = usePageExternalData(), C = useSelectedBlock(), B = useRegisteredChaiBlocks(), j = useMemo(
+    () => get(B, [C == null ? void 0 : C._type, "i18nProps"], []),
+    [B, C == null ? void 0 : C._type]
+  ), [_, w] = useState(null);
   if (c)
     return null;
   if (p.type === "boolean") return /* @__PURE__ */ jsx("div", { className: n, children: a });
-  const w = j == null ? void 0 : j.includes(o.replace("root.", ""));
+  const A = j == null ? void 0 : j.includes(o.replace("root.", ""));
   if (p.type === "array") {
     const E = _ === o;
     return /* @__PURE__ */ jsxs("div", { className: `${n} relative`, children: [
@@ -4980,21 +4988,21 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
         "label",
         {
           htmlFor: o,
-          onClick: () => A(E ? null : o),
+          onClick: () => w(E ? null : o),
           className: "flex cursor-pointer items-center gap-x-1 py-1 leading-tight duration-200 hover:bg-slate-100",
           children: [
-            E ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "h-3 w-3" }),
-            /* @__PURE__ */ jsx(List, { className: "h-3 w-3" }),
+            E ? /* @__PURE__ */ jsx(ChevronDownIcon, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(ChevronRightIcon, { className: "h-3 w-3" }),
+            /* @__PURE__ */ jsx(ListBulletIcon, { className: "h-3 w-3" }),
             /* @__PURE__ */ jsx("span", { className: "leading-tight", children: r }),
             " ",
             /* @__PURE__ */ jsx(Badge, { className: "m-0 bg-gray-200 px-2 leading-tight text-gray-500 hover:bg-gray-200 hover:text-gray-500", children: /* @__PURE__ */ jsx("span", { className: "text-[9px] font-medium text-slate-600", children: u == null ? void 0 : u.length }) }),
             p.description && /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
               /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(
-                Info,
+                InfoCircledIcon,
                 {
                   className: "h-3 w-3 text-muted-foreground/70",
-                  onClick: (C) => C.stopPropagation(),
-                  onMouseDown: (C) => C.stopPropagation()
+                  onClick: (S) => S.stopPropagation(),
+                  onMouseDown: (S) => S.stopPropagation()
                 }
               ) }),
               /* @__PURE__ */ jsx(TooltipContent, { className: "max-w-xs", children: p.description })
@@ -5015,14 +5023,14 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
         /* @__PURE__ */ jsxs("label", { htmlFor: o, className: p.type === "object" ? "pb-2" : "", children: [
           r,
           " ",
-          w && /* @__PURE__ */ jsxs("small", { className: "text-[9px] text-zinc-400", children: [
+          A && /* @__PURE__ */ jsxs("small", { className: "text-[9px] text-zinc-400", children: [
             " ",
             y
           ] }),
           d && p.type !== "object" ? " *" : null
         ] }),
         p.description && /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
-          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(Info, { className: "h-3 w-3 text-muted-foreground/70" }) }),
+          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(InfoCircledIcon, { className: "h-3 w-3 text-muted-foreground/70" }) }),
           /* @__PURE__ */ jsx(TooltipContent, { className: "max-w-xs", children: p.description })
         ] }) })
       ] }),
@@ -5046,7 +5054,7 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
   var i;
   if (!o)
     return /* @__PURE__ */ jsxs("div", { className: "mt-1 flex items-center gap-2 rounded-md border border-gray-200 bg-gray-50 px-2 py-1.5 text-xs text-gray-500 text-gray-600", children: [
-      /* @__PURE__ */ jsx(File, { className: "h-4 w-4" }),
+      /* @__PURE__ */ jsx(FileIcon, { className: "h-4 w-4" }),
       " Choose a collection"
     ] });
   const r = `{{${COLLECTION_PREFIX}`, a = o == null ? void 0 : o.startsWith(r);
@@ -5054,7 +5062,7 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
   return a && (l = (i = o == null ? void 0 : o.replace(r, "")) == null ? void 0 : i.replace("}}", "")), /* @__PURE__ */ jsx("div", { className: "mt-1 flex flex-col gap-1", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 rounded-md border border-blue-200 bg-blue-50 px-2 py-1 text-xs text-blue-600", children: [
     /* @__PURE__ */ jsxs("span", { className: "flex max-w-[200px] items-center gap-2", children: [
       " ",
-      a ? /* @__PURE__ */ jsx(Database, { className: "h-3 min-h-3 w-3 min-w-3" }) : null,
+      a ? /* @__PURE__ */ jsx(IdCardIcon, { className: "h-3 min-h-3 w-3 min-w-3" }) : null,
       /* @__PURE__ */ jsxs(Tooltip, { delayDuration: 500, children: [
         /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx("span", { className: "cursor-default truncate", children: l }) }),
         /* @__PURE__ */ jsx(TooltipContent, { side: "left", hidden: l.length < 50, children: l })
@@ -5068,14 +5076,14 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
           size: "icon",
           className: "h-5 w-5 rounded-full bg-gray-200 text-gray-900 hover:bg-gray-300",
           onClick: () => n(""),
-          children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+          children: /* @__PURE__ */ jsx(Cross1Icon, { className: "h-4 w-4" })
         }
       ) }),
       /* @__PURE__ */ jsx(TooltipContent, { side: "left", children: "Remove binding" })
     ] })
   ] }) });
 }, CustomAddButton = (o) => /* @__PURE__ */ jsx("button", { ...o, className: "duration absolute right-2 top-2 cursor-pointer text-blue-400 hover:text-blue-500", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-0.5 text-[11px] leading-tight", children: [
-  /* @__PURE__ */ jsx(Plus, { className: "h-3 w-3" }),
+  /* @__PURE__ */ jsx(PlusIcon, { className: "h-3 w-3" }),
   " ",
   /* @__PURE__ */ jsx("span", { children: "Add" })
 ] }) }), JSONForm = memo(({ blockId: o, schema: n, uiSchema: r, formData: a, onChange: l }) => {
@@ -5137,46 +5145,46 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
   }), a;
 };
 function BlockSettings() {
-  const { selectedLang: o } = useLanguages(), n = useSelectedBlock(), r = useUpdateBlocksPropsRealtime(), a = useUpdateBlocksProps(), l = getRegisteredChaiBlock(n == null ? void 0 : n._type), i = formDataWithSelectedLang(n, o, l), [c, d] = useState(i), [p, u] = useState(!1), g = useWrapperBlock(), m = getRegisteredChaiBlock(g == null ? void 0 : g._type), h = formDataWithSelectedLang(g, o, m), f = ({ formData: A }, k, w) => {
-    k && (c == null ? void 0 : c._id) === n._id && a([n._id], { [k]: get(A, k) }, w);
+  const { selectedLang: o } = useLanguages(), n = useSelectedBlock(), r = useUpdateBlocksPropsRealtime(), a = useUpdateBlocksProps(), l = getRegisteredChaiBlock(n == null ? void 0 : n._type), i = formDataWithSelectedLang(n, o, l), [c, d] = useState(i), [p, u] = useState(!1), g = useWrapperBlock(), m = getRegisteredChaiBlock(g == null ? void 0 : g._type), h = formDataWithSelectedLang(g, o, m), f = ({ formData: w }, k, A) => {
+    k && (c == null ? void 0 : c._id) === n._id && a([n._id], { [k]: get(w, k) }, A);
   }, x = useCallback(
-    debounce(({ formData: A }, k, w) => {
-      f({ formData: A }, k, w), d(A);
+    debounce(({ formData: w }, k, A) => {
+      f({ formData: w }, k, A), d(w);
     }, 1500),
     [n == null ? void 0 : n._id, o]
-  ), y = ({ formData: A }, k) => {
-    k && (r([n._id], { [k]: get(A, k) }), x({ formData: A }, k, { [k]: get(c, k) }));
-  }, b = ({ formData: A }, k) => {
-    k && (r([g._id], { [k]: get(A, k) }), x({ formData: A }, k, { [k]: get(c, k) }));
-  }, { schema: S, uiSchema: B } = useMemo(() => {
-    const A = n == null ? void 0 : n._type;
-    if (!A)
+  ), y = ({ formData: w }, k) => {
+    k && (r([n._id], { [k]: get(w, k) }), x({ formData: w }, k, { [k]: get(c, k) }));
+  }, b = ({ formData: w }, k) => {
+    k && (r([g._id], { [k]: get(w, k) }), x({ formData: w }, k, { [k]: get(c, k) }));
+  }, { schema: C, uiSchema: B } = useMemo(() => {
+    const w = n == null ? void 0 : n._type;
+    if (!w)
       return { schema: {}, uiSchema: {} };
     try {
-      const { schema: k, uiSchema: w } = getBlockFormSchemas(A);
-      if (A === "Repeater") {
+      const { schema: k, uiSchema: A } = getBlockFormSchemas(w);
+      if (w === "Repeater") {
         const E = get(n, "repeaterItems", "");
-        startsWith(E, `{{${COLLECTION_PREFIX}`) ? (set(w, "filter", { "ui:widget": "collectionSelect" }), set(w, "sort", { "ui:widget": "collectionSelect" })) : (set(w, "filter", { "ui:widget": "hidden" }), set(w, "sort", { "ui:widget": "hidden" }));
+        startsWith(E, `{{${COLLECTION_PREFIX}`) ? (set(A, "filter", { "ui:widget": "collectionSelect" }), set(A, "sort", { "ui:widget": "collectionSelect" })) : (set(A, "filter", { "ui:widget": "hidden" }), set(A, "sort", { "ui:widget": "hidden" }));
       }
-      return { schema: k, uiSchema: w };
+      return { schema: k, uiSchema: A };
     } catch {
       return { schema: {}, uiSchema: {} };
     }
   }, [n]), { wrapperSchema: j, wrapperUiSchema: _ } = useMemo(() => {
     if (!g || !(g != null && g._type))
       return { wrapperSchema: {}, wrapperUiSchema: {} };
-    const A = g == null ? void 0 : g._type, { schema: k = {}, uiSchema: w = {} } = getBlockFormSchemas(A);
-    return { wrapperSchema: k, wrapperUiSchema: w };
+    const w = g == null ? void 0 : g._type, { schema: k = {}, uiSchema: A = {} } = getBlockFormSchemas(w);
+    return { wrapperSchema: k, wrapperUiSchema: A };
   }, [g]);
   return /* @__PURE__ */ jsxs("div", { className: "no-scrollbar overflow-x-hidden px-px", children: [
     !isEmpty(g) && /* @__PURE__ */ jsxs("div", { className: "mb-4 rounded border bg-zinc-100 px-1", children: [
       /* @__PURE__ */ jsxs(
         "div",
         {
-          onClick: () => u((A) => !A),
+          onClick: () => u((w) => !w),
           className: "flex cursor-pointer items-center gap-x-1 py-2 text-xs font-medium leading-tight hover:bg-slate-100",
           children: [
-            p ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 stroke-[3] text-slate-400" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4 stroke-[3] text-slate-400" }),
+            p ? /* @__PURE__ */ jsx(ChevronDownIcon, { className: "h-4 w-4 text-slate-400" }) : /* @__PURE__ */ jsx(ChevronRightIcon, { className: "h-4 w-4 text-slate-400" }),
             startCase(g._type),
             " settings",
             " ",
@@ -5199,13 +5207,13 @@ function BlockSettings() {
         }
       ) })
     ] }),
-    isEmpty(S) ? null : /* @__PURE__ */ jsx(
+    isEmpty(C) ? null : /* @__PURE__ */ jsx(
       JSONForm,
       {
         blockId: n == null ? void 0 : n._id,
         onChange: y,
         formData: i,
-        schema: S,
+        schema: C,
         uiSchema: B
       }
     )
@@ -5240,7 +5248,7 @@ const BlockStylingProps = () => {
                 type: "button",
                 className: "ml-1 rounded-sm p-0.5 hover:bg-blue-300 hover:text-blue-600",
                 onClick: (y) => y.stopPropagation(),
-                children: /* @__PURE__ */ jsx(MoreVertical, { className: "h-3 w-3" })
+                children: /* @__PURE__ */ jsx(DotsVerticalIcon, { className: "h-3 w-3" })
               }
             ) }),
             /* @__PURE__ */ jsxs(DropdownMenuContent, { side: "bottom", className: "border-border text-xs", children: [
@@ -5417,50 +5425,50 @@ const BlockStylingProps = () => {
   },
   a
 )) }), THROTTLE_TIME = 50, AdvanceChoices = (o) => {
-  const [n, r] = useState(!1), [a, l] = useState(""), { currentClass: i, onChange: c, classPrefix: d, cssProperty: p, units: u, negative: g } = o, [m, h] = useState(p != null && p.toLowerCase().includes("width") ? "%" : u[0]), [f, x] = useState(!1), [y, b] = useState(""), [S, B] = useState(!1), [j, _] = useState(!1);
+  const [n, r] = useState(!1), [a, l] = useState(""), { currentClass: i, onChange: c, classPrefix: d, cssProperty: p, units: u, negative: g } = o, [m, h] = useState(p != null && p.toLowerCase().includes("width") ? "%" : u[0]), [f, x] = useState(!1), [y, b] = useState(""), [C, B] = useState(!1), [j, _] = useState(!1);
   useEffect(() => {
-    const { value: C, unit: v } = getClassValueAndUnit(i);
+    const { value: S, unit: v } = getClassValueAndUnit(i);
     if (v === "") {
-      l(C), h(p != null && p.toLowerCase().includes("width") ? "%" : first(u));
+      l(S), h(p != null && p.toLowerCase().includes("width") ? "%" : first(u));
       return;
     }
-    h(v), l(v === "class" || isEmpty(C) ? "" : C);
+    h(v), l(v === "class" || isEmpty(S) ? "" : S);
   }, [i, p, u]);
-  const A = useThrottledCallback((C) => c(C), [c], THROTTLE_TIME), k = useThrottledCallback((C) => c(C, !1), [c], THROTTLE_TIME), w = useCallback(
-    (C = !1) => {
+  const w = useThrottledCallback((S) => c(S), [c], THROTTLE_TIME), k = useThrottledCallback((S) => c(S, !1), [c], THROTTLE_TIME), A = useCallback(
+    (S = !1) => {
       const v = getUserInputValues(`${a}`, u);
       if (get(v, "error", !1)) {
         x(!0);
         return;
       }
-      const N = get(v, "unit") !== "" ? get(v, "unit") : m;
-      if (N === "auto" || N === "none") {
-        A(`${d}${N}`);
+      const I = get(v, "unit") !== "" ? get(v, "unit") : m;
+      if (I === "auto" || I === "none") {
+        w(`${d}${I}`);
         return;
       }
       if (get(v, "value") === "")
         return;
-      const T = `${get(v, "value", "").startsWith("-") ? "-" : ""}${d}[${get(v, "value", "").replace("-", "")}${N === "-" ? "" : N}]`;
-      C ? k(T) : A(T);
+      const T = `${get(v, "value", "").startsWith("-") ? "-" : ""}${d}[${get(v, "value", "").replace("-", "")}${I === "-" ? "" : I}]`;
+      S ? k(T) : w(T);
     },
-    [A, k, a, m, d, u]
+    [w, k, a, m, d, u]
   ), E = useCallback(
-    (C) => {
+    (S) => {
       const v = getUserInputValues(`${a}`, u);
       if (get(v, "error", !1)) {
         x(!0);
         return;
       }
-      if (C === "auto" || C === "none") {
-        A(`${d}${C}`);
+      if (S === "auto" || S === "none") {
+        w(`${d}${S}`);
         return;
       }
       if (get(v, "value") === "")
         return;
-      const N = get(v, "unit") !== "" ? get(v, "unit") : C, T = `${get(v, "value", "").startsWith("-") ? "-" : ""}${d}[${get(v, "value", "").replace("-", "")}${N === "-" ? "" : N}]`;
-      A(T);
+      const I = get(v, "unit") !== "" ? get(v, "unit") : S, T = `${get(v, "value", "").startsWith("-") ? "-" : ""}${d}[${get(v, "value", "").replace("-", "")}${I === "-" ? "" : I}]`;
+      w(T);
     },
-    [A, a, d, u]
+    [w, a, d, u]
   );
   return /* @__PURE__ */ jsx("div", { className: "flex w-full flex-col", children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-start", children: m === "class" ? /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
@@ -5475,37 +5483,37 @@ const BlockStylingProps = () => {
       /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx("button", { type: "button", className: "invisible ml-3 mt-1 text-blue-600 group-hover:visible", children: /* @__PURE__ */ jsx(InfoCircledIcon, {}) }) }),
       /* @__PURE__ */ jsx(TooltipContent, { children: "Current value is using a Tailwind preset class." })
     ] })
-  ] }) : /* @__PURE__ */ jsxs("div", { className: `group relative flex items-center ${S ? "z-auto" : ""}`, children: [
+  ] }) : /* @__PURE__ */ jsxs("div", { className: `group relative flex items-center ${C ? "z-auto" : ""}`, children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center rounded-md border border-border", children: [
       ["none", "auto"].indexOf(m) !== -1 ? null : /* @__PURE__ */ jsx(
         "input",
         {
           readOnly: m === "class",
-          onKeyPress: (C) => {
-            C.key === "Enter" && w();
+          onKeyPress: (S) => {
+            S.key === "Enter" && A();
           },
-          onKeyDown: (C) => {
-            if (C.keyCode !== 38 && C.keyCode !== 40)
+          onKeyDown: (S) => {
+            if (S.keyCode !== 38 && S.keyCode !== 40)
               return;
-            C.preventDefault(), _(!0);
-            const v = parseInt$1(C.target.value);
-            let N = isNaN$1(v) ? 0 : v;
-            C.keyCode === 38 && (N += 1), C.keyCode === 40 && (N -= 1);
-            const L = `${N}`, P = `${L.startsWith("-") ? "-" : ""}${d}[${L.replace("-", "")}${m === "-" ? "" : m}]`;
+            S.preventDefault(), _(!0);
+            const v = parseInt$1(S.target.value);
+            let I = isNaN$1(v) ? 0 : v;
+            S.keyCode === 38 && (I += 1), S.keyCode === 40 && (I -= 1);
+            const L = `${I}`, P = `${L.startsWith("-") ? "-" : ""}${d}[${L.replace("-", "")}${m === "-" ? "" : m}]`;
             k(P);
           },
-          onKeyUp: (C) => {
-            j && (C.preventDefault(), _(!1));
+          onKeyUp: (S) => {
+            j && (S.preventDefault(), _(!1));
           },
-          onBlur: () => w(),
-          onChange: (C) => {
-            x(!1), l(C.target.value);
+          onBlur: () => A(),
+          onChange: (S) => {
+            x(!1), l(S.target.value);
           },
-          onClick: (C) => {
+          onClick: (S) => {
             var v;
-            (v = C == null ? void 0 : C.target) == null || v.select(), r(!1);
+            (v = S == null ? void 0 : S.target) == null || v.select(), r(!1);
           },
-          value: S ? y : a,
+          value: C ? y : a,
           className: "h-6 w-14 rounded rounded-r-none border border-transparent bg-background pl-2 text-sm focus-visible:outline-0".concat(
             " ",
             f ? "border-red-500 text-red-500" : "border-foreground/20"
@@ -5530,28 +5538,28 @@ const BlockStylingProps = () => {
           {
             units: u,
             current: m,
-            onSelect: (C) => {
-              r(!1), h(C), E(C);
+            onSelect: (S) => {
+              r(!1), h(S), E(S);
             }
           }
         ) })
       ] })
     ] }),
-    ["none", "auto"].indexOf(m) !== -1 || S ? null : /* @__PURE__ */ jsx(
+    ["none", "auto"].indexOf(m) !== -1 || C ? null : /* @__PURE__ */ jsx(
       DragStyleButton,
       {
         onDragStart: () => B(!0),
-        onDragEnd: (C) => {
-          if (b(() => ""), B(!1), isEmpty(C))
+        onDragEnd: (S) => {
+          if (b(() => ""), B(!1), isEmpty(S))
             return;
-          const v = `${C}`, L = `${v.startsWith("-") ? "-" : ""}${d}[${v.replace("-", "")}${m === "-" ? "" : m}]`;
-          A(L);
+          const v = `${S}`, L = `${v.startsWith("-") ? "-" : ""}${d}[${v.replace("-", "")}${m === "-" ? "" : m}]`;
+          w(L);
         },
-        onDrag: (C) => {
-          if (isEmpty(C))
+        onDrag: (S) => {
+          if (isEmpty(S))
             return;
-          b(C);
-          const v = `${C}`, L = `${v.startsWith("-") ? "-" : ""}${d}[${v.replace("-", "")}${m === "-" ? "" : m}]`;
+          b(S);
+          const v = `${S}`, L = `${v.startsWith("-") ? "-" : ""}${d}[${v.replace("-", "")}${m === "-" ? "" : m}]`;
           k(L);
         },
         currentValue: a,
@@ -6016,14 +6024,14 @@ const COLOR_PROP = {
 }, getBreakpoint = (o) => `${o.toUpperCase()} ${BREAKPOINTS[o] ? `(${BREAKPOINTS[o]} & up)` : ""}`, BlockStyle = (o) => {
   const { t: n } = useTranslation(), { type: r = "icons", label: a, property: l, onEmitChange: i = () => {
   }, units: c, negative: d = !1 } = o, [p] = useDarkMode(), [u] = useStylingState(), [, g] = useScreenSizeWidth(), m = useCurrentClassByProperty(l), h = useAddClassesToBlocks(), f = useRemoveClassesFromBlocks(), [x] = useSelectedBlockIds(), y = useMemo(() => get(m, "fullCls", ""), [m]), b = useCallback(
-    (k, w = !0) => {
+    (k, A = !0) => {
       const E = { dark: p, mq: g, mod: u, cls: k, property: l, fullCls: "" };
       (p || u !== "") && (E.mq = "xs");
-      const C = generateFullClsName(E);
-      h(x, [C], w);
+      const S = generateFullClsName(E);
+      h(x, [S], A);
     },
     [x, p, g, u, l, h]
-  ), S = useCallback(() => {
+  ), C = useCallback(() => {
     f(x, [y], !0);
   }, [x, y, f]), B = useMemo(() => canChangeClass(m, g), [m, g]);
   useEffect(() => {
@@ -6041,9 +6049,9 @@ const COLOR_PROP = {
       }[k]);
     },
     [j]
-  ), A = get(m, "dark", null) === p && get(m, "mod", null) === u && get(m, "mq", null) === g;
-  return /* @__PURE__ */ jsx(BlockStyleProvider, { canChange: B, canReset: m && A, children: /* @__PURE__ */ jsxs("div", { className: "group flex flex-row items-center py-2 first:pt-0 last:pb-0", children: [
-    /* @__PURE__ */ jsx("div", { className: "relative w-[70px] truncate text-xs text-foreground", children: /* @__PURE__ */ jsx("span", { className: `text-[11px] ${m && !A ? "text-foreground" : ""}`, children: n(a) }) }),
+  ), w = get(m, "dark", null) === p && get(m, "mod", null) === u && get(m, "mq", null) === g;
+  return /* @__PURE__ */ jsx(BlockStyleProvider, { canChange: B, canReset: m && w, children: /* @__PURE__ */ jsxs("div", { className: "group flex flex-row items-center py-2 first:pt-0 last:pb-0", children: [
+    /* @__PURE__ */ jsx("div", { className: "relative w-[70px] truncate text-xs text-foreground", children: /* @__PURE__ */ jsx("span", { className: `text-[11px] ${m && !w ? "text-foreground" : ""}`, children: n(a) }) }),
     /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center", children: [
       /* @__PURE__ */ jsxs("div", { className: "w-[150px]", children: [
         r === "arbitrary" ? /* @__PURE__ */ jsx(
@@ -6062,7 +6070,7 @@ const COLOR_PROP = {
         r === "color" && /* @__PURE__ */ jsx(ColorChoice, { property: l, onChange: b }),
         r === "dropdown" && /* @__PURE__ */ jsx(DropDownChoices, { label: a, property: l, onChange: b })
       ] }),
-      /* @__PURE__ */ jsx("div", { className: `w-[30px] cursor-pointer ${y ? "visible" : "invisible"}`, children: A ? /* @__PURE__ */ jsx("button", { type: "button", onClick: () => S(), title: "Reset", className: "flex px-1.5 text-xs", children: /* @__PURE__ */ jsx(CrossCircledIcon, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : B && m ? /* @__PURE__ */ jsxs(Tooltip, { delayDuration: 100, children: [
+      /* @__PURE__ */ jsx("div", { className: `w-[30px] cursor-pointer ${y ? "visible" : "invisible"}`, children: w ? /* @__PURE__ */ jsx("button", { type: "button", onClick: () => C(), title: "Reset", className: "flex px-1.5 text-xs", children: /* @__PURE__ */ jsx(CrossCircledIcon, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : B && m ? /* @__PURE__ */ jsxs(Tooltip, { delayDuration: 100, children: [
         /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(
           "button",
           {
@@ -6283,7 +6291,7 @@ const COLOR_PROP = {
   tooltip: r = !0
 }) => {
   const [a, , l] = useScreenSizeWidth(), [i, c] = useCanvasDisplayWidth(), [d, p] = useSelectedBreakpoints(), u = d, g = p, { t: m } = useTranslation(), h = useBuilderProp("breakpoints", WEB_BREAKPOINTS), f = (b) => {
-    u.includes(b) ? u.length > 2 && g(u.filter((S) => S !== b)) : g((S) => [...S, b]);
+    u.includes(b) ? u.length > 2 && g(u.filter((C) => C !== b)) : g((C) => [...C, b]);
   }, x = (b) => {
     n || l(b), c(b);
   }, y = getBreakpointValue(n ? i : a).toLowerCase();
@@ -6437,14 +6445,14 @@ const AskAIStyles = ({ blockId: o }) => {
           className: "w-fit",
           size: "sm",
           children: a ? /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(Loader, { className: "h-5 w-5 animate-spin" }),
+            /* @__PURE__ */ jsx(ReloadIcon, { className: "h-5 w-5 animate-spin" }),
             n("Generating... Please wait...")
           ] }) : n("Edit with AI")
         }
       ),
       a ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
         /* @__PURE__ */ jsxs(Skeleton, { className: "flex w-full items-center space-x-1 px-4 py-1 pl-2", children: [
-          /* @__PURE__ */ jsx(Loader, { className: "h-4 w-4 animate-spin text-gray-500", size: 16 }),
+          /* @__PURE__ */ jsx(ReloadIcon, { className: "h-4 w-4 animate-spin text-gray-500" }),
           /* @__PURE__ */ jsx("p", { className: "text-xs", children: n("Generating... Please wait...") })
         ] }),
         /* @__PURE__ */ jsx(Button, { variant: "destructive", onClick: () => stop(), className: "hidden w-fit", size: "sm", children: n("Stop") })
@@ -6463,14 +6471,14 @@ const AskAIStyles = ({ blockId: o }) => {
 };
 function ManualClasses() {
   var L;
-  const o = useRef(null), [n, r] = useState(""), [a, l] = useState(-1), i = useFuseSearch(), { t: c } = useTranslation(), [d] = useSelectedStylingBlocks(), p = useSelectedBlock(), u = useAddClassesToBlocks(), g = useRemoveClassesFromBlocks(), [m] = useSelectedBlockIds(), h = useBuilderProp("askAiCallBack", null), [f, x] = useState(""), y = (L = first(d)) == null ? void 0 : L.prop, { classes: b } = getSplitChaiClasses(get(p, y, "")), S = b.split(" ").filter((T) => !isEmpty(T)), B = () => {
+  const o = useRef(null), [n, r] = useState(""), [a, l] = useState(-1), i = useFuseSearch(), { t: c } = useTranslation(), [d] = useSelectedStylingBlocks(), p = useSelectedBlock(), u = useAddClassesToBlocks(), g = useRemoveClassesFromBlocks(), [m] = useSelectedBlockIds(), h = useBuilderProp("askAiCallBack", null), [f, x] = useState(""), y = (L = first(d)) == null ? void 0 : L.prop, { classes: b } = getSplitChaiClasses(get(p, y, "")), C = b.split(" ").filter((T) => !isEmpty(T)), B = () => {
     const T = f.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
     u(m, T, !0), x("");
-  }, [j, _] = useState([]), A = ({ value: T }) => {
-    const P = T.trim().toLowerCase(), I = P.match(/.+:/g);
+  }, [j, _] = useState([]), w = ({ value: T }) => {
+    const P = T.trim().toLowerCase(), N = P.match(/.+:/g);
     let R = [];
-    if (I && I.length > 0) {
-      const [O] = I, M = P.replace(O, "");
+    if (N && N.length > 0) {
+      const [O] = N, M = P.replace(O, "");
       R = i.search(M).map((D) => ({
         ...D,
         item: { ...D.item, name: O + D.item.name }
@@ -6480,7 +6488,7 @@ function ManualClasses() {
     return _(map(R, "item"));
   }, k = () => {
     _([]);
-  }, w = (T) => T.name, E = (T) => /* @__PURE__ */ jsx("div", { className: "rounded-md p-1", children: T.name }), C = useMemo(
+  }, A = (T) => T.name, E = (T) => /* @__PURE__ */ jsx("div", { className: "rounded-md p-1", children: T.name }), S = useMemo(
     () => ({
       ref: o,
       autoComplete: "off",
@@ -6505,25 +6513,25 @@ function ManualClasses() {
     debugger;
     const P = n.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
     g(m, [T]), u(m, P, !0), r(""), l(-1);
-  }, N = () => {
+  }, I = () => {
     if (navigator.clipboard === void 0) {
       toast.error(c("Clipboard not supported"));
       return;
     }
-    navigator.clipboard.writeText(S.join(" ")), toast.success(c("Classes copied to clipboard"));
+    navigator.clipboard.writeText(C.join(" ")), toast.success(c("Classes copied to clipboard"));
   };
   return /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col gap-y-1.5 border-b border-border pb-4", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-x-2", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-2 text-muted-foreground", children: [
         /* @__PURE__ */ jsx("span", { children: c("Classes") }),
         /* @__PURE__ */ jsxs(Tooltip, { children: [
-          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(CopyIcon, { onClick: N, className: "cursor-pointer" }) }),
+          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(CopyIcon, { onClick: I, className: "cursor-pointer" }) }),
           /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: c("Copy classes to clipboard") }) })
         ] })
       ] }),
       h ? /* @__PURE__ */ jsxs(Popover, { children: [
         /* @__PURE__ */ jsx(PopoverTrigger, { asChild: !0, children: /* @__PURE__ */ jsxs(Button, { variant: "default", className: "h-6 w-fit", size: "sm", children: [
-          /* @__PURE__ */ jsx(SparklesIcon, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx(MagicWandIcon, { className: "h-4 w-4" }),
           /* @__PURE__ */ jsx("span", { className: "ml-2", children: c("Ask AI") })
         ] }) }),
         /* @__PURE__ */ jsx(PopoverContent, { side: "left", className: "p-2", children: /* @__PURE__ */ jsx(AskAIStyles, { blockId: p == null ? void 0 : p._id }) })
@@ -6534,11 +6542,11 @@ function ManualClasses() {
         Autosuggest,
         {
           suggestions: j,
-          onSuggestionsFetchRequested: A,
+          onSuggestionsFetchRequested: w,
           onSuggestionsClearRequested: k,
-          getSuggestionValue: w,
+          getSuggestionValue: A,
           renderSuggestion: E,
-          inputProps: C,
+          inputProps: S,
           containerProps: {
             className: "relative h-8 w-full gap-y-1 py-1 border-border text-xs"
           },
@@ -6561,22 +6569,22 @@ function ManualClasses() {
         }
       )
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "flex w-full flex-wrap gap-2 overflow-x-hidden", children: S.map(
+    /* @__PURE__ */ jsx("div", { className: "flex w-full flex-wrap gap-2 overflow-x-hidden", children: C.map(
       (T, P) => a === P ? /* @__PURE__ */ jsx(
         "input",
         {
           ref: o,
           value: n,
-          onChange: (I) => r(I.target.value),
+          onChange: (N) => r(N.target.value),
           onBlur: () => {
             v(T);
           },
-          onKeyDown: (I) => {
-            I.key === "Enter" && v(T);
+          onKeyDown: (N) => {
+            N.key === "Enter" && v(T);
           },
-          onFocus: (I) => {
+          onFocus: (N) => {
             setTimeout(() => {
-              I.target.select();
+              N.target.select();
             }, 0);
           },
           className: "group relative flex max-w-[260px] cursor-default items-center gap-x-1 truncate break-words rounded border border-border bg-gray-200 p-px px-1.5 pr-2 text-[11px] text-gray-600 hover:border-gray-300 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300"
@@ -6942,15 +6950,15 @@ const registerChaiLibrary = (o, n) => {
           const j = await c({ library: n, block: o });
           let _ = r;
           if (y(first(j)) && (_ = null), !isEmpty(j)) {
-            const A = { blocks: j, uiLibrary: !0, parent: _ };
-            if (B.dataTransfer.setData("text/plain", JSON.stringify(A)), o.preview) {
+            const w = { blocks: j, uiLibrary: !0, parent: _ };
+            if (B.dataTransfer.setData("text/plain", JSON.stringify(w)), o.preview) {
               const k = new Image();
               k.src = o.preview, k.onload = () => {
                 B.dataTransfer.setDragImage(k, 0, 0);
               };
             } else
               B.dataTransfer.setDragImage(new Image(), 0, 0);
-            x(A), setTimeout(() => {
+            x(w), setTimeout(() => {
               u([]), g(), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
             }, 200);
           }
@@ -6960,7 +6968,7 @@ const registerChaiLibrary = (o, n) => {
         ),
         children: [
           l && /* @__PURE__ */ jsxs("div", { className: "absolute flex h-full w-full items-center justify-center bg-black/70", children: [
-            /* @__PURE__ */ jsx(Loader, { className: "animate-spin", size: 15, color: "white" }),
+            /* @__PURE__ */ jsx(ReloadIcon, { className: "animate-spin h-4 w-4 text-white" }),
             /* @__PURE__ */ jsx("span", { className: "pl-2 text-sm text-white", children: "Adding..." })
           ] }),
           o.preview ? /* @__PURE__ */ jsx("img", { src: o.preview, className: "min-h-[45px] w-full rounded-md", alt: m }) : /* @__PURE__ */ jsxs("div", { className: "flex h-fit w-full flex-col items-center justify-center gap-1 rounded-md border border-border p-6 py-10 text-center", children: [
@@ -6988,27 +6996,27 @@ const registerChaiLibrary = (o, n) => {
       h([]);
       return;
     }
-    const v = f.current.search(u).map((N) => N.item);
+    const v = f.current.search(u).map((I) => I.item);
     h(v);
   }, [u]);
-  const x = u.trim() && !isEmpty(m) ? m : c, y = groupBy(x, "group"), [b, S] = useState(null);
+  const x = u.trim() && !isEmpty(m) ? m : c, y = groupBy(x, "group"), [b, C] = useState(null);
   useEffect(() => {
     if (isEmpty(keys(y))) {
-      S(null);
+      C(null);
       return;
     }
     if (!b || !y[b]) {
-      S(first(keys(y)));
+      C(first(keys(y)));
       return;
     }
   }, [y, b]);
-  const B = get(y, b, []), j = useRef(null), { t: _ } = useTranslation(), A = (v) => {
+  const B = get(y, b, []), j = useRef(null), { t: _ } = useTranslation(), w = (v) => {
     j.current && (clearTimeout(j.current), j.current = null), j.current = setTimeout(() => {
-      j.current && S(v);
+      j.current && C(v);
     }, 400);
   }, k = () => {
     i != null && i.id && p(i.id);
-  }, w = () => {
+  }, A = () => {
     g("");
   };
   if (d)
@@ -7016,10 +7024,10 @@ const registerChaiLibrary = (o, n) => {
       /* @__PURE__ */ jsx(Skeleton, { className: "col-span-3 h-full" }),
       /* @__PURE__ */ jsx(Skeleton, { className: "col-span-9 h-full" })
     ] });
-  const E = filter(B, (v, N) => N % 2 === 0), C = filter(B, (v, N) => N % 2 === 1);
+  const E = filter(B, (v, I) => I % 2 === 0), S = filter(B, (v, I) => I % 2 === 1);
   return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: "flex h-full max-h-full flex-col", children: [
     /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 border-border py-2", children: /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
-      /* @__PURE__ */ jsx(Search, { className: "absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" }),
+      /* @__PURE__ */ jsx(MagnifyingGlassIcon, { className: "absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" }),
       /* @__PURE__ */ jsx(
         Input$1,
         {
@@ -7032,9 +7040,9 @@ const registerChaiLibrary = (o, n) => {
       u && /* @__PURE__ */ jsx(
         "button",
         {
-          onClick: w,
+          onClick: A,
           className: "absolute right-2 top-2.5 text-muted-foreground hover:text-foreground",
-          children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+          children: /* @__PURE__ */ jsx(Cross1Icon, { className: "h-4 w-4" })
         }
       )
     ] }) }),
@@ -7047,26 +7055,26 @@ const registerChaiLibrary = (o, n) => {
           /* @__PURE__ */ jsx("div", { className: "no-scrollbar mt-2 h-full max-h-full flex-1 overflow-y-auto pb-20", children: isEmpty(y) ? /* @__PURE__ */ jsx("div", { className: "mt-4 flex flex-col items-center justify-center gap-3 p-4 text-center", children: u ? /* @__PURE__ */ jsx("p", { className: "text-sm", children: _("No matching blocks found") }) : /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx("p", { className: "text-sm", children: _("Failed to load the UI library. Try again") }),
             /* @__PURE__ */ jsxs(Button, { onClick: k, variant: "outline", size: "sm", className: "gap-2", children: [
-              /* @__PURE__ */ jsx(RefreshCw, { className: "h-4 w-4" }),
+              /* @__PURE__ */ jsx(ReloadIcon, { className: "h-4 w-4" }),
               _("Retry")
             ] })
-          ] }) }) : map(y, (v, N) => /* @__PURE__ */ jsxs(
+          ] }) }) : map(y, (v, I) => /* @__PURE__ */ jsxs(
             "div",
             {
-              onMouseEnter: () => A(N),
+              onMouseEnter: () => w(I),
               onMouseLeave: () => clearTimeout(j.current),
               role: "button",
-              onClick: () => S(N),
+              onClick: () => C(I),
               className: cn$2(
                 "flex w-full cursor-pointer items-center justify-between rounded-md p-2 text-sm text-foreground transition-all ease-in-out hover:bg-gray-200 dark:hover:bg-gray-800",
-                N === b ? "bg-primary text-primary-foreground hover:bg-primary/80" : ""
+                I === b ? "bg-primary text-primary-foreground hover:bg-primary/80" : ""
               ),
               children: [
-                /* @__PURE__ */ jsx("span", { children: capitalize(_(N.toLowerCase())) }),
+                /* @__PURE__ */ jsx("span", { children: capitalize(_(I.toLowerCase())) }),
                 /* @__PURE__ */ jsx(CaretRightIcon, { className: "ml-2 h-5 w-5" })
               ]
             },
-            N
+            I
           )) })
         ] })
       ] }),
@@ -7077,7 +7085,7 @@ const registerChaiLibrary = (o, n) => {
           className: "z-10 flex h-full max-h-full w-full flex-col gap-2 transition-all ease-linear",
           children: [
             isEmpty(B) && !isEmpty(y) ? /* @__PURE__ */ jsx("div", { className: "flex h-full flex-col items-center justify-center p-6 text-center", children: /* @__PURE__ */ jsx("p", { className: "text-sm", children: _("No blocks found in this group") }) }) : /* @__PURE__ */ jsxs("div", { className: "grid w-full grid-cols-2 gap-2 px-2", children: [
-              /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: E.map((v, N) => /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: E.map((v, I) => /* @__PURE__ */ jsx(
                 BlockCard,
                 {
                   parentId: o,
@@ -7085,9 +7093,9 @@ const registerChaiLibrary = (o, n) => {
                   block: v,
                   library: i
                 },
-                `block-${N}`
+                `block-${I}`
               )) }),
-              /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: C.map((v, N) => /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: S.map((v, I) => /* @__PURE__ */ jsx(
                 BlockCard,
                 {
                   parentId: o,
@@ -7095,7 +7103,7 @@ const registerChaiLibrary = (o, n) => {
                   block: v,
                   library: i
                 },
-                `block-second-${N}`
+                `block-second-${I}`
               )) })
             ] }),
             /* @__PURE__ */ jsx("br", {}),
@@ -7132,13 +7140,13 @@ const registerChaiLibrary = (o, n) => {
         }), g(!0);
       else if (!l && Object.keys(a || {}).length > 0) {
         const h = Object.entries(a).map(([x, y]) => {
-          const b = y, S = b.type || "partial", B = formatReadableName(S);
+          const b = y, C = b.type || "partial", B = formatReadableName(C);
           return {
             type: "PartialBlock",
             // Set the type to PartialBlock
             label: formatReadableName(b.name || x),
             description: b.description || "",
-            icon: Globe,
+            icon: GlobeIcon,
             group: B,
             // Use formatted type as group
             category: "partial",
@@ -7194,12 +7202,12 @@ const registerChaiLibrary = (o, n) => {
 }, ADD_BLOCK_TABS = {}, registerChaiAddBlockTab = (o, n) => {
   has(ADD_BLOCK_TABS, o) && console.warn(`Add block tab with id ${o} already registered`), set(ADD_BLOCK_TABS, o, { id: o, ...n });
 }, useChaiAddBlockTabs = () => useMemo(() => values(ADD_BLOCK_TABS), []), CORE_GROUPS = ["basic", "typography", "media", "layout", "form", "advanced", "other"], ChaiBuilderBlocks = ({ groups: o, blocks: n, parentId: r, position: a, gridCols: l = "grid-cols-4" }) => {
-  var C;
-  const { t: i } = useTranslation(), [c] = useBlocksStore(), [d, p] = useState(""), u = useRef(null), [g] = useAtom$1(addBlockTabAtom), m = (C = find(c, (v) => v._id === r)) == null ? void 0 : C._type, [h, f] = useState("all"), [x, y] = useState(null), b = useRef(null);
+  var S;
+  const { t: i } = useTranslation(), [c] = useBlocksStore(), [d, p] = useState(""), u = useRef(null), [g] = useAtom$1(addBlockTabAtom), m = (S = find(c, (v) => v._id === r)) == null ? void 0 : S._type, [h, f] = useState("all"), [x, y] = useState(null), b = useRef(null);
   useEffect(() => {
     const v = setTimeout(() => {
-      var N;
-      (N = u.current) == null || N.focus();
+      var I;
+      (I = u.current) == null || I.focus();
     }, 0);
     return () => clearTimeout(v);
   }, [g]), useEffect(() => {
@@ -7209,7 +7217,7 @@ const registerChaiLibrary = (o, n) => {
   }, 500), () => {
     b.current && b.current.cancel();
   }), []);
-  const S = useCallback((v) => {
+  const C = useCallback((v) => {
     y(v), b.current && b.current(v);
   }, []), B = useCallback(() => {
     y(null), b.current && b.current.cancel();
@@ -7218,20 +7226,20 @@ const registerChaiLibrary = (o, n) => {
   }, []), _ = useMemo(
     () => d ? values(n).filter(
       (v) => {
-        var N, L;
-        return (((N = v.label) == null ? void 0 : N.toLowerCase()) + " " + ((L = v.type) == null ? void 0 : L.toLowerCase())).includes(d.toLowerCase());
+        var I, L;
+        return (((I = v.label) == null ? void 0 : I.toLowerCase()) + " " + ((L = v.type) == null ? void 0 : L.toLowerCase())).includes(d.toLowerCase());
       }
     ) : n,
     [n, d]
-  ), A = useMemo(
+  ), w = useMemo(
     () => d ? o.filter(
       (v) => reject(filter(values(_), { group: v }), { hidden: !0 }).length > 0
     ) : o.filter((v) => reject(filter(values(n), { group: v }), { hidden: !0 }).length > 0),
     [n, _, o, d]
   ), k = useMemo(
-    () => sortBy(A, (v) => CORE_GROUPS.indexOf(v) === -1 ? 99 : CORE_GROUPS.indexOf(v)),
-    [A]
-  ), w = useMemo(() => h === "all" ? _ : filter(values(_), { group: h }), [_, h]), E = useMemo(() => h === "all" ? k : [h], [k, h]);
+    () => sortBy(w, (v) => CORE_GROUPS.indexOf(v) === -1 ? 99 : CORE_GROUPS.indexOf(v)),
+    [w]
+  ), A = useMemo(() => h === "all" ? _ : filter(values(_), { group: h }), [_, h]), E = useMemo(() => h === "all" ? k : [h], [k, h]);
   return /* @__PURE__ */ jsxs("div", { className: "mx-auto flex h-full w-full max-w-3xl flex-col", children: [
     /* @__PURE__ */ jsx("div", { className: "sticky top-0 z-10 bg-background/80 px-4 py-2 backdrop-blur-sm", children: /* @__PURE__ */ jsx(
       Input$1,
@@ -7250,7 +7258,7 @@ const registerChaiLibrary = (o, n) => {
           "button",
           {
             onClick: () => j("all"),
-            onMouseEnter: () => S("all"),
+            onMouseEnter: () => C("all"),
             onMouseLeave: B,
             className: `w-full rounded-md px-2 py-1.5 text-left text-sm font-medium ${h === "all" || x === "all" ? "bg-primary text-primary-foreground" : "hover:bg-primary/50 hover:text-primary-foreground"}`,
             children: i("All")
@@ -7261,7 +7269,7 @@ const registerChaiLibrary = (o, n) => {
           "button",
           {
             onClick: () => j(v),
-            onMouseEnter: () => S(v),
+            onMouseEnter: () => C(v),
             onMouseLeave: B,
             className: `w-full rounded-md px-2 py-1.5 text-left text-sm ${h === v || x === v ? "bg-primary text-primary-foreground" : "hover:bg-primary/50 hover:text-primary-foreground"}`,
             children: capitalize(i(v.toLowerCase()))
@@ -7269,7 +7277,7 @@ const registerChaiLibrary = (o, n) => {
           `sidebar-${v}`
         ))
       ] }) }) }),
-      /* @__PURE__ */ jsx("div", { className: "h-full w-3/4 flex-1 overflow-hidden", children: /* @__PURE__ */ jsx(ScrollArea, { id: "add-blocks-scroll-area", className: "no-scrollbar mr-4 h-full", children: A.length === 0 && d ? /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center justify-center p-8 text-center text-muted-foreground", children: /* @__PURE__ */ jsxs("p", { children: [
+      /* @__PURE__ */ jsx("div", { className: "h-full w-3/4 flex-1 overflow-hidden", children: /* @__PURE__ */ jsx(ScrollArea, { id: "add-blocks-scroll-area", className: "no-scrollbar mr-4 h-full", children: w.length === 0 && d ? /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center justify-center p-8 text-center text-muted-foreground", children: /* @__PURE__ */ jsxs("p", { children: [
         i("No blocks found matching"),
         ' "',
         d,
@@ -7277,17 +7285,17 @@ const registerChaiLibrary = (o, n) => {
       ] }) }) : /* @__PURE__ */ jsx("div", { className: "space-y-6 p-4", children: E.map((v) => /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
         /* @__PURE__ */ jsx("h3", { className: "px-1 text-sm font-medium", children: capitalize(i(v.toLowerCase())) }),
         /* @__PURE__ */ jsx("div", { className: "grid gap-2 " + l, children: reject(
-          h === "all" ? filter(values(w), { group: v }) : values(w),
+          h === "all" ? filter(values(A), { group: v }) : values(A),
           { hidden: !0 }
-        ).map((N) => /* @__PURE__ */ jsx(
+        ).map((I) => /* @__PURE__ */ jsx(
           CoreBlock,
           {
             parentId: r,
             position: a,
-            block: N,
-            disabled: !canAcceptChildBlock(m, N.type) || !canBeNestedInside(m, N.type)
+            block: I,
+            disabled: !canAcceptChildBlock(m, I.type) || !canBeNestedInside(m, I.type)
           },
-          N.type
+          I.type
         )) })
       ] }, v)) }) }) })
     ] })
@@ -7315,8 +7323,8 @@ const registerChaiLibrary = (o, n) => {
     /* @__PURE__ */ jsxs(
       Tabs,
       {
-        onValueChange: (S) => {
-          d(""), c(S);
+        onValueChange: (C) => {
+          d(""), c(C);
         },
         value: i,
         className: "flex h-full max-h-full flex-col overflow-hidden",
@@ -7326,13 +7334,13 @@ const registerChaiLibrary = (o, n) => {
             /* @__PURE__ */ jsx(TabsTrigger, { value: "core", children: l("Blocks") }),
             g && /* @__PURE__ */ jsx(TabsTrigger, { value: "partials", children: l("Partials") }),
             x ? /* @__PURE__ */ jsx(TabsTrigger, { value: "html", children: l("Import") }) : null,
-            map(f, (S) => /* @__PURE__ */ jsx(TabsTrigger, { value: S.id, children: React__default.createElement(S.tab) }, `tab-add-block-${S.id}`))
+            map(f, (C) => /* @__PURE__ */ jsx(TabsTrigger, { value: C.id, children: React__default.createElement(C.tab) }, `tab-add-block-${C.id}`))
           ] }),
           /* @__PURE__ */ jsx(TabsContent, { value: "core", className: "h-full max-h-full flex-1 pb-20", children: /* @__PURE__ */ jsx("div", { className: "-mx-1.5 h-full max-h-full overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "mt-2 h-full w-full", children: /* @__PURE__ */ jsx(DefaultChaiBlocks, { gridCols: "grid-cols-4", parentId: r, position: a }) }) }) }),
           b && /* @__PURE__ */ jsx(TabsContent, { value: "library", className: "h-full max-h-full flex-1 pb-20", children: /* @__PURE__ */ jsx(UILibrariesPanel, { parentId: r, position: a }) }),
           g && /* @__PURE__ */ jsx(TabsContent, { value: "partials", className: "h-full max-h-full flex-1 pb-20", children: /* @__PURE__ */ jsx("div", { className: "-mx-1.5 h-full max-h-full overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "mt-2 h-full w-full", children: /* @__PURE__ */ jsx(PartialBlocks, { gridCols: "grid-cols-4", parentId: r, position: a }) }) }) }),
           x ? /* @__PURE__ */ jsx(TabsContent, { value: "html", className: "h-full max-h-full flex-1 pb-20", children: /* @__PURE__ */ jsx(ImportHTML, { parentId: r, position: a }) }) : null,
-          map(f, (S) => /* @__PURE__ */ jsx(TabsContent, { value: S.id, children: React__default.createElement(S.tabContent, { close: h, parentId: r, position: a }) }, `panel-add-block-${S.id}`))
+          map(f, (C) => /* @__PURE__ */ jsx(TabsContent, { value: C.id, children: React__default.createElement(C.tabContent, { close: h, parentId: r, position: a }) }, `panel-add-block-${C.id}`))
         ]
       }
     )
@@ -7436,7 +7444,7 @@ const registerChaiSaveToLibrary = (o) => {
     });
   };
   return a ? /* @__PURE__ */ jsxs(DropdownMenuItem, { className: "flex items-center gap-x-4 text-xs", onClick: l, children: [
-    /* @__PURE__ */ jsx(SaveIcon, { className: "h-4 w-4" }),
+    /* @__PURE__ */ jsx(CheckIcon, { className: "h-4 w-4" }),
     " ",
     n(o != null && o._libBlockId ? "Update library block" : "Save to library")
   ] }) : null;
@@ -7447,7 +7455,7 @@ const registerChaiSaveToLibrary = (o) => {
       _libBlockId: null
     });
   }, className: "flex items-center gap-x-4 text-xs", children: [
-    /* @__PURE__ */ jsx(UnlinkIcon, { className: "h-4 w-4" }),
+    /* @__PURE__ */ jsx(LinkBreak2Icon, { className: "h-4 w-4" }),
     " ",
     o("Unlink from library")
   ] });
@@ -7540,7 +7548,7 @@ const registerChaiSaveToLibrary = (o) => {
       },
       className: "flex items-center gap-x-4 text-xs",
       children: [
-        /* @__PURE__ */ jsx(PencilIcon, { className: "h-4 w-4" }),
+        /* @__PURE__ */ jsx(Pencil2Icon, { className: "h-4 w-4" }),
         " ",
         n("Rename")
       ]
@@ -7559,7 +7567,7 @@ const registerChaiSaveToLibrary = (o) => {
           className: "flex items-center gap-x-4 text-xs",
           onClick: () => pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, l),
           children: [
-            /* @__PURE__ */ jsx(PlusIcon$1, { size: "14" }),
+            /* @__PURE__ */ jsx(PlusIcon, { className: "h-3.5 w-3.5" }),
             " ",
             n("Add block")
           ]
@@ -7642,35 +7650,35 @@ const Input = ({ node: o }) => {
   var P;
   const { t: a } = useTranslation(), [l, , i] = useHiddenBlockIds(), [c] = useAtom$1(canvasIframeAtom), { hasPermission: d } = usePermissions();
   let p = null;
-  const u = o.children.length > 0, { highlightBlock: g, clearHighlight: m } = useBlockHighlight(), { id: h, data: f, isSelected: x, willReceiveDrop: y, isDragging: b, isEditing: S, handleClick: B } = o, j = (I) => {
-    I.stopPropagation(), !l.includes(h) && o.toggle();
-  }, _ = (I) => {
-    I.isInternal && (p = I.isOpen, I.isOpen && I.close());
-  }, A = (I) => {
-    I.isInternal && p !== null && (p ? I.open() : I.close(), p = null);
-  }, [k, w] = useAtom$1(currentAddSelection), E = () => {
-    var I;
-    C(), o.parent.isSelected || w((I = o == null ? void 0 : o.parent) == null ? void 0 : I.id);
-  }, C = () => {
-    w(null);
-  }, v = (I) => {
-    C(), I.stopPropagation(), !o.isOpen && !l.includes(h) && o.toggle(), B(I);
+  const u = o.children.length > 0, { highlightBlock: g, clearHighlight: m } = useBlockHighlight(), { id: h, data: f, isSelected: x, willReceiveDrop: y, isDragging: b, isEditing: C, handleClick: B } = o, j = (N) => {
+    N.stopPropagation(), !l.includes(h) && o.toggle();
+  }, _ = (N) => {
+    N.isInternal && (p = N.isOpen, N.isOpen && N.close());
+  }, w = (N) => {
+    N.isInternal && p !== null && (p ? N.open() : N.close(), p = null);
+  }, [k, A] = useAtom$1(currentAddSelection), E = () => {
+    var N;
+    S(), o.parent.isSelected || A((N = o == null ? void 0 : o.parent) == null ? void 0 : N.id);
+  }, S = () => {
+    A(null);
+  }, v = (N) => {
+    S(), N.stopPropagation(), !o.isOpen && !l.includes(h) && o.toggle(), B(N);
   };
   useEffect(() => {
-    const I = setTimeout(() => {
+    const N = setTimeout(() => {
       y && !o.isOpen && !b && !l.includes(h) && o.toggle();
     }, 500);
-    return () => clearTimeout(I);
+    return () => clearTimeout(N);
   }, [y, o, b]);
-  const N = (I, R) => {
-    const O = c.contentDocument || c.contentWindow.document, M = O.querySelector(`[data-block-id=${I}]`);
+  const I = (N, R) => {
+    const O = c.contentDocument || c.contentWindow.document, M = O.querySelector(`[data-block-id=${N}]`);
     M && M.setAttribute("data-drop", R);
     const $ = M.getBoundingClientRect(), D = c.getBoundingClientRect();
     $.top >= D.top && $.left >= D.left && $.bottom <= D.bottom && $.right <= D.right || (O.documentElement.scrollTop = M.offsetTop - D.top);
-  }, L = (I) => {
-    C();
+  }, L = (N) => {
+    S();
     const R = get(o, "parent.id");
-    R !== "__REACT_ARBORIST_INTERNAL_ROOT__" ? pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { _id: R, position: I }) : pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { position: I });
+    R !== "__REACT_ARBORIST_INTERNAL_ROOT__" ? pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { _id: R, position: N }) : pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { position: N });
   };
   if (h === ROOT_TEMP_KEY)
     return /* @__PURE__ */ jsxs("div", { className: "group relative w-full cursor-pointer", children: [
@@ -7701,25 +7709,25 @@ const Input = ({ node: o }) => {
       "data-node-id": h,
       ref: l.includes(h) ? null : r,
       onDragStart: () => _(o),
-      onDragEnd: () => A(o),
-      onDragOver: (I) => {
-        I.preventDefault(), N(h, "yes");
+      onDragEnd: () => w(o),
+      onDragOver: (N) => {
+        N.preventDefault(), I(h, "yes");
       },
-      onDragLeave: (I) => {
-        I.preventDefault(), N(h, "no");
+      onDragLeave: (N) => {
+        N.preventDefault(), I(h, "no");
       },
-      onDrop: (I) => {
-        I.preventDefault(), N(h, "no");
+      onDrop: (N) => {
+        N.preventDefault(), I(h, "no");
       },
       children: [
         d(PERMISSIONS.ADD_BLOCK) && (o == null ? void 0 : o.rowIndex) > 0 && (o.parent.isOpen && canAddChildBlock(get(o, "parent.data._type")) || ((P = o == null ? void 0 : o.parent) == null ? void 0 : P.id) === "__REACT_ARBORIST_INTERNAL_ROOT__") && /* @__PURE__ */ jsx("div", { className: "group relative ml-5 h-full w-full cursor-pointer", children: /* @__PURE__ */ jsx(
           "div",
           {
-            onClick: (I) => {
-              I.stopPropagation(), L(o.childIndex);
+            onClick: (N) => {
+              N.stopPropagation(), L(o.childIndex);
             },
             onMouseEnter: E,
-            onMouseLeave: C,
+            onMouseLeave: S,
             className: "absolute -top-0.5 h-1 w-[90%] rounded bg-primary opacity-0 delay-200 duration-200 group-hover:opacity-100",
             children: /* @__PURE__ */ jsx("div", { className: "absolute left-1/2 top-1/2 flex h-4 w-4 -translate-x-1/2 -translate-y-1/2 transform items-center justify-center rounded-full bg-primary p-1 outline outline-2 outline-white hover:bg-primary", children: /* @__PURE__ */ jsx(PlusIcon, { className: "h-3 w-3 stroke-[4] text-white" }) })
           }
@@ -7742,7 +7750,7 @@ const Input = ({ node: o }) => {
                   "div",
                   {
                     className: `flex h-4 w-4 rotate-0 transform cursor-pointer items-center justify-center transition-transform duration-100 ${o.isOpen ? "rotate-90" : ""}`,
-                    children: u && /* @__PURE__ */ jsx("button", { onClick: j, type: "button", children: /* @__PURE__ */ jsx(ChevronRight, { className: `h-3 w-3 stroke-[3] ${x ? "text-white" : "text-slate-400"}` }) })
+                    children: u && /* @__PURE__ */ jsx("button", { onClick: j, type: "button", children: /* @__PURE__ */ jsx(ChevronRightIcon, { className: `h-3 w-3 ${x ? "text-white" : "text-slate-400"}` }) })
                   }
                 ),
                 /* @__PURE__ */ jsxs(
@@ -7755,12 +7763,12 @@ const Input = ({ node: o }) => {
                     ),
                     children: [
                       /* @__PURE__ */ jsx(TypeIcon, { type: f == null ? void 0 : f._type }),
-                      S ? /* @__PURE__ */ jsx(Input, { node: o }) : /* @__PURE__ */ jsx(
+                      C ? /* @__PURE__ */ jsx(Input, { node: o }) : /* @__PURE__ */ jsx(
                         "div",
                         {
                           className: "ml-1.5 flex items-center gap-x-1 truncate text-[13px]",
-                          onDoubleClick: (I) => {
-                            I.stopPropagation(), o.edit(), o.deselect();
+                          onDoubleClick: (N) => {
+                            N.stopPropagation(), o.edit(), o.deselect();
                           },
                           children: /* @__PURE__ */ jsx("span", { children: getBlockDisplayName(f) })
                         }
@@ -7786,17 +7794,17 @@ const Input = ({ node: o }) => {
                   /* @__PURE__ */ jsx(
                     TooltipTrigger,
                     {
-                      onClick: (I) => {
-                        I.stopPropagation(), i(h), o.isOpen && o.toggle();
+                      onClick: (N) => {
+                        N.stopPropagation(), i(h), o.isOpen && o.toggle();
                       },
                       className: "cursor-pointer rounded bg-transparent",
                       asChild: !0,
-                      children: /* @__PURE__ */ jsx(EyeOffIcon, { size: "15" })
+                      children: /* @__PURE__ */ jsx(EyeNoneIcon, { className: "h-4 w-4" })
                     }
                   ),
                   /* @__PURE__ */ jsx(TooltipContent, { className: "isolate z-[9999]", side: "bottom", children: a("Hide block") })
                 ] }),
-                /* @__PURE__ */ jsx(BlockMoreOptions, { node: o, id: h, children: /* @__PURE__ */ jsx(MoreVertical, { size: "15" }) })
+                /* @__PURE__ */ jsx(BlockMoreOptions, { node: o, id: h, children: /* @__PURE__ */ jsx(DotsVerticalIcon, { className: "h-4 w-4" }) })
               ] })
             ]
           }
@@ -7947,7 +7955,7 @@ const Input = ({ node: o }) => {
                   variant: "outline",
                   className: "h-fit p-1 disabled:cursor-not-allowed disabled:opacity-50",
                   size: "sm",
-                  children: /* @__PURE__ */ jsx(Eye, { className: "h-4 w-4" })
+                  children: /* @__PURE__ */ jsx(EyeOpenIcon, { className: "h-4 w-4" })
                 }
               ) }),
               /* @__PURE__ */ jsx(TooltipContent, { className: "isolate z-[9999]", children: t("Show hidden blocks") })
@@ -7956,14 +7964,14 @@ const Input = ({ node: o }) => {
               /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(Button, { className: "h-fit p-1", onClick: () => {
                 var o;
                 return (o = treeRef == null ? void 0 : treeRef.current) == null ? void 0 : o.openAll();
-              }, variant: "outline", size: "sm", children: /* @__PURE__ */ jsx(ChevronsUpDown, { size: 14 }) }) }),
+              }, variant: "outline", size: "sm", children: /* @__PURE__ */ jsx(DoubleArrowDownIcon, { className: "h-3.5 w-3.5" }) }) }),
               /* @__PURE__ */ jsx(TooltipContent, { className: "isolate z-[9999]", children: t("Expand all") })
             ] }),
             /* @__PURE__ */ jsxs(Tooltip, { children: [
               /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(Button, { className: "h-fit p-1", onClick: () => {
                 var o;
                 return (o = treeRef == null ? void 0 : treeRef.current) == null ? void 0 : o.closeAll();
-              }, variant: "outline", size: "sm", children: /* @__PURE__ */ jsx(ChevronsDownUp, { size: 14 }) }) }),
+              }, variant: "outline", size: "sm", children: /* @__PURE__ */ jsx(DoubleArrowUpIcon, { className: "h-3.5 w-3.5" }) }) }),
               /* @__PURE__ */ jsx(TooltipContent, { className: "isolate z-[9999]", children: t("Collapse all") })
             ] })
           ] }),
@@ -7972,7 +7980,7 @@ const Input = ({ node: o }) => {
             {
               onClick: () => pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { position: 0 }),
               className: "h-1 w-[90%] rounded bg-primary opacity-0 duration-200 group-hover:opacity-100",
-              children: /* @__PURE__ */ jsx("div", { className: "absolute left-[45%] top-1/2 flex h-4 w-4 -translate-x-1/2 -translate-y-1/2 transform items-center justify-center rounded-full bg-primary p-1 outline outline-2 outline-white hover:bg-primary", children: /* @__PURE__ */ jsx(PlusIcon$1, { className: "h-3 w-3 stroke-[3] text-white" }) })
+              children: /* @__PURE__ */ jsx("div", { className: "absolute left-[45%] top-1/2 flex h-4 w-4 -translate-x-1/2 -translate-y-1/2 transform items-center justify-center rounded-full bg-primary p-1 outline outline-2 outline-white hover:bg-primary", children: /* @__PURE__ */ jsx(PlusIcon, { className: "h-3 w-3 stroke-[3] text-white" }) })
             }
           ) }),
           /* @__PURE__ */ jsx(
@@ -8202,7 +8210,7 @@ const Input = ({ node: o }) => {
     "popover-foreground": ["#3d3436", "#f2e9e4"]
   }
 }, LazyCssImportModal = lazy(
-  () => import("./css-import-modal-Ds-qmte_.js").then((o) => ({ default: o.CssImportModal }))
+  () => import("./css-import-modal-CgSqJi_w.js").then((o) => ({ default: o.CssImportModal }))
 ), PREV_THEME_KEY = "chai-builder-previous-theme", DEFAULT_THEME_PRESET = [
   { shadcn_default: defaultShadcnPreset },
   { twitter_theme: twitter },
@@ -8226,19 +8234,19 @@ const Input = ({ node: o }) => {
 }, ThemeConfigPanel = React.memo(({ className: o = "" }) => {
   const [n, r] = useDarkMode(), [a, l] = React.useState(""), [i, c] = React.useState(!1), d = useBuilderProp("themePresets", []), p = useBuilderProp("themePanelComponent", null), { hasPermission: u } = usePermissions();
   if (d) {
-    const A = d.map((k) => Object.keys(k)[0]);
+    const w = d.map((k) => Object.keys(k)[0]);
     DEFAULT_THEME_PRESET.forEach((k) => {
-      const w = Object.keys(k)[0];
-      A.includes(w) || d.push(k);
+      const A = Object.keys(k)[0];
+      w.includes(A) || d.push(k);
     });
   }
   const [g, m] = useTheme(), h = useThemeOptions(), { t: f } = useTranslation(), x = React.useCallback(
-    (A) => {
+    (w) => {
       const k = { ...g };
-      setPreviousTheme(k), m(A), toast.success("Theme updated", {
+      setPreviousTheme(k), m(w), toast.success("Theme updated", {
         action: {
           label: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx(Undo$1, { className: "h-4 w-4" }),
+            /* @__PURE__ */ jsx(ResetIcon, { className: "h-4 w-4" }),
             " Undo"
           ] }),
           onClick: () => {
@@ -8251,56 +8259,56 @@ const Input = ({ node: o }) => {
     },
     [g, m]
   ), y = () => {
-    const A = d.find((k) => Object.keys(k)[0] === a);
-    if (A) {
-      const k = Object.values(A)[0];
+    const w = d.find((k) => Object.keys(k)[0] === a);
+    if (w) {
+      const k = Object.values(w)[0];
       k && typeof k == "object" && "fontFamily" in k && "borderRadius" in k && "colors" in k ? (x(k), l("")) : console.error("Invalid preset structure:", k);
     } else
       console.error("Preset not found:", a);
-  }, b = (A) => {
-    x(A), l("");
-  }, S = useDebouncedCallback(
-    (A, k) => {
+  }, b = (w) => {
+    x(w), l("");
+  }, C = useDebouncedCallback(
+    (w, k) => {
       m(() => ({
         ...g,
         fontFamily: {
           ...g.fontFamily,
-          [A.replace(/font-/g, "")]: k
+          [w.replace(/font-/g, "")]: k
         }
       }));
     },
     [g],
     200
   ), B = React.useCallback(
-    (A) => {
+    (w) => {
       m(() => ({
         ...g,
-        borderRadius: `${A}px`
+        borderRadius: `${w}px`
       }));
     },
     [g]
   ), j = useDebouncedCallback(
-    (A, k) => {
+    (w, k) => {
       m(() => {
-        const w = get(g, `colors.${A}`);
-        return n ? set(w, 1, k) : set(w, 0, k), {
+        const A = get(g, `colors.${w}`);
+        return n ? set(A, 1, k) : set(A, 0, k), {
           ...g,
           colors: {
             ...g.colors,
-            [A]: w
+            [w]: A
           }
         };
       });
     },
     [g],
     200
-  ), _ = (A) => /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1", children: Object.entries(A.items).map(([k]) => {
-    const w = get(g, `colors.${k}.${n ? 1 : 0}`);
-    return w ? /* @__PURE__ */ jsxs("div", { className: "mt-1 flex items-center gap-x-2", children: [
+  ), _ = (w) => /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1", children: Object.entries(w.items).map(([k]) => {
+    const A = get(g, `colors.${k}.${n ? 1 : 0}`);
+    return A ? /* @__PURE__ */ jsxs("div", { className: "mt-1 flex items-center gap-x-2", children: [
       /* @__PURE__ */ jsx(
         ColorPickerInput,
         {
-          value: w,
+          value: A,
           onChange: (E) => j(k, E)
         }
       ),
@@ -8313,16 +8321,16 @@ const Input = ({ node: o }) => {
         /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-between", children: [
           /* @__PURE__ */ jsx(Label, { className: "text-sm", children: f("Presets") }),
           /* @__PURE__ */ jsx("div", { className: "flex gap-2", children: /* @__PURE__ */ jsxs(Button, { className: "px-1", variant: "link", size: "sm", onClick: () => c(!0), children: [
-            /* @__PURE__ */ jsx(ImportIcon, { className: "h-4 w-4" }),
+            /* @__PURE__ */ jsx(UploadIcon, { className: "h-4 w-4" }),
             f("Import theme")
           ] }) })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-0", children: [
           /* @__PURE__ */ jsx("div", { className: "w-[70%]", children: /* @__PURE__ */ jsxs(Select$1, { value: a, onValueChange: l, children: [
             /* @__PURE__ */ jsx(SelectTrigger, { className: "h-9 w-full text-sm", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select preset" }) }),
-            /* @__PURE__ */ jsx(SelectContent, { children: Array.isArray(d) && d.map((A) => {
-              const k = Object.keys(A)[0], w = k.replaceAll("_", " ");
-              return /* @__PURE__ */ jsx(SelectItem, { value: k, children: capitalize(w) }, k);
+            /* @__PURE__ */ jsx(SelectContent, { children: Array.isArray(d) && d.map((w) => {
+              const k = Object.keys(w)[0], A = k.replaceAll("_", " ");
+              return /* @__PURE__ */ jsx(SelectItem, { value: k, children: capitalize(A) }, k);
             }) })
           ] }) }),
           /* @__PURE__ */ jsx("div", { className: "w-[25%]", children: /* @__PURE__ */ jsx(Button, { className: "w-full text-sm", disabled: !a, onClick: y, children: f("Apply") }) })
@@ -8331,23 +8339,23 @@ const Input = ({ node: o }) => {
       /* @__PURE__ */ jsx(Separator, {}),
       /* @__PURE__ */ jsxs("div", { className: cn$2("my-2 space-y-3", o), children: [
         /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx(Type, { className: "h-3 w-3 text-gray-600" }),
+          /* @__PURE__ */ jsx(TextIcon, { className: "h-3 w-3 text-gray-600" }),
           /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-gray-700", children: "Typography" })
         ] }),
-        (h == null ? void 0 : h.fontFamily) && /* @__PURE__ */ jsx("div", { className: "space-y-2", children: Object.entries(h.fontFamily).map(([A, k]) => /* @__PURE__ */ jsx(
+        (h == null ? void 0 : h.fontFamily) && /* @__PURE__ */ jsx("div", { className: "space-y-2", children: Object.entries(h.fontFamily).map(([w, k]) => /* @__PURE__ */ jsx(
           FontSelector,
           {
-            label: A,
-            value: g.fontFamily[A.replace(/font-/g, "")] || k[Object.keys(k)[0]],
-            onChange: (w) => S(A, w)
+            label: w,
+            value: g.fontFamily[w.replace(/font-/g, "")] || k[Object.keys(k)[0]],
+            onChange: (A) => C(w, A)
           },
-          A
+          w
         )) }),
         /* @__PURE__ */ jsx(Separator, {}),
         (h == null ? void 0 : h.borderRadius) && /* @__PURE__ */ jsxs("div", { className: "space-y-0.5", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
             /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsx(CornerUpRight, { className: "h-3 w-3 text-gray-600" }),
+              /* @__PURE__ */ jsx(CornerTopRightIcon, { className: "h-3 w-3 text-gray-600" }),
               /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-gray-700", children: "Border Radius" })
             ] }),
             /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "text-xs", children: g.borderRadius })
@@ -8358,24 +8366,24 @@ const Input = ({ node: o }) => {
         (h == null ? void 0 : h.colors) && /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
             /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsx(Palette, { className: "h-3 w-3 text-gray-600" }),
+              /* @__PURE__ */ jsx(MixerHorizontalIcon, { className: "h-3 w-3 text-gray-600" }),
               /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-gray-700", children: "Colors" })
             ] }),
             /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsx(Sun, { className: "h-4 w-4" }),
+              /* @__PURE__ */ jsx(SunIcon, { className: "h-4 w-4" }),
               /* @__PURE__ */ jsx(
                 Switch,
                 {
                   checked: n,
-                  onCheckedChange: (A) => r(A),
+                  onCheckedChange: (w) => r(w),
                   "aria-label": "Toggle dark mode",
                   className: "mx-1"
                 }
               ),
-              /* @__PURE__ */ jsx(Moon, { className: "h-4 w-4" })
+              /* @__PURE__ */ jsx(MoonIcon, { className: "h-4 w-4" })
             ] }) })
           ] }),
-          /* @__PURE__ */ jsx("div", { className: "space-y-2", children: h.colors.map((A) => _(A)) })
+          /* @__PURE__ */ jsx("div", { className: "space-y-2", children: h.colors.map((w) => _(w)) })
         ] }),
         /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { children: "Loading..." }), children: i && /* @__PURE__ */ jsx(
           LazyCssImportModal,
@@ -8799,12 +8807,12 @@ const CHAI_FEATURE_FLAGS = {}, registerChaiFeatureFlag = (o, n) => {
 }, QUICK_PROMPTS = [
   {
     name: "Improve writing",
-    icon: FileEdit,
+    icon: Pencil2Icon,
     prompt: "Improving writing in all text elements. Replacing placeholder content with meaningful relevant content."
   },
   {
     name: "Replace placeholder content",
-    icon: Recycle,
+    icon: LoopIcon,
     prompt: "Discard current placeholder content and replace with meaningful relevant content."
   },
   //TODO: Add tone options
@@ -8831,7 +8839,7 @@ const CHAI_FEATURE_FLAGS = {}, registerChaiFeatureFlag = (o, n) => {
   },
   {
     name: "Add emojis",
-    icon: SmileIcon,
+    icon: FaceIcon,
     prompt: "Add emojis to text elements if relevant."
   },
   {
@@ -8844,7 +8852,7 @@ function QuickPrompts({ onClick: o }) {
   const { loading: n } = useAskAi(), { t: r } = useTranslation(), { selectedLang: a, fallbackLang: l } = useLanguages(), i = [...QUICK_PROMPTS];
   return a && a !== l && i.splice(0, 0, {
     name: `Translate to ${get(LANGUAGES, a, a)}`,
-    icon: Languages,
+    icon: ChatBubbleIcon,
     prompt: `Translate the content to ${get(LANGUAGES, a, a)}. Maintain same tone, style and length.`
   }), /* @__PURE__ */ jsx("div", { className: n ? "pointer-events-none opacity-50" : "", children: /* @__PURE__ */ jsx("ul", { className: "space-y-2", children: i.map(
     ({ name: c, icon: d, subMenus: p, prompt: u }) => p ? /* @__PURE__ */ jsxs(Popover, { children: [
@@ -8911,14 +8919,14 @@ const AIUserPrompt = ({ blockId: o }) => {
           className: "w-fit",
           size: "sm",
           children: a ? /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(Loader, { className: "h-5 w-5 animate-spin" }),
+            /* @__PURE__ */ jsx(ReloadIcon, { className: "h-5 w-5 animate-spin" }),
             n("Generating... Please wait...")
           ] }) : n("Edit with AI")
         }
       ),
       a ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
         /* @__PURE__ */ jsxs(Skeleton, { className: "flex w-full items-center space-x-1 px-4 py-1 pl-2", children: [
-          /* @__PURE__ */ jsx(Loader, { className: "h-4 w-4 animate-spin text-gray-500" }),
+          /* @__PURE__ */ jsx(ReloadIcon, { className: "h-4 w-4 animate-spin text-gray-500" }),
           /* @__PURE__ */ jsx("p", { className: "text-xs", children: n("Generating... Please wait...") })
         ] }),
         /* @__PURE__ */ jsx(Button, { variant: "destructive", onClick: () => stop(), className: "hidden w-fit", size: "sm", children: n("Stop") })
@@ -8943,7 +8951,7 @@ const AIUserPrompt = ({ blockId: o }) => {
       }
     )
   ] }) : /* @__PURE__ */ jsx("div", { className: "p-4 text-center", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4 rounded-xl p-4 text-muted-foreground", children: [
-    /* @__PURE__ */ jsx(SparklesIcon, { className: "mx-auto text-3xl text-muted-foreground" }),
+    /* @__PURE__ */ jsx(MagicWandIcon, { className: "mx-auto text-3xl text-muted-foreground" }),
     /* @__PURE__ */ jsx("h1", { children: n("Please select a block to Ask AI") })
   ] }) }) });
 }, AskAI = () => {
@@ -8972,7 +8980,7 @@ function DarkMode() {
         )
       }
     ),
-    /* @__PURE__ */ jsx(Moon, { className: "ml-3 size-4 shrink-0", size: 16 })
+    /* @__PURE__ */ jsx(MoonIcon, { className: "ml-3 size-4 shrink-0" })
   ] });
 }
 const UndoRedo = () => {
@@ -8998,26 +9006,26 @@ function AIChatPanel() {
       content: r,
       timestamp: /* @__PURE__ */ new Date()
     };
-    n((S) => [...S, b]), a(""), i(!0), setTimeout(() => {
-      const S = {
+    n((C) => [...C, b]), a(""), i(!0), setTimeout(() => {
+      const C = {
         id: (Date.now() + 1).toString(),
         role: "assistant",
         content: "This is a sample response from the AI assistant. In a real implementation, this would be replaced with an actual response from the AI model.",
         timestamp: /* @__PURE__ */ new Date()
       };
-      n((B) => [...B, S]), i(!1), d(null);
+      n((B) => [...B, C]), i(!1), d(null);
     }, 1500);
   }, h = (b) => {
     b.key === "Enter" && !b.shiftKey && (b.preventDefault(), m());
   }, f = (b) => {
     var B;
-    const S = (B = b.target.files) == null ? void 0 : B[0];
-    if (S) {
+    const C = (B = b.target.files) == null ? void 0 : B[0];
+    if (C) {
       const j = new FileReader();
       j.onload = (_) => {
-        var A;
-        d((A = _.target) == null ? void 0 : A.result);
-      }, j.readAsDataURL(S);
+        var w;
+        d((w = _.target) == null ? void 0 : w.result);
+      }, j.readAsDataURL(C);
     }
   }, x = () => {
     var b;
@@ -9027,7 +9035,7 @@ function AIChatPanel() {
   };
   return /* @__PURE__ */ jsxs("div", { className: "flex h-full w-full flex-col rounded-lg bg-background shadow-sm", children: [
     /* @__PURE__ */ jsx(ScrollArea, { className: "flex-1 p-3", children: o.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "mt-10 flex h-full flex-col items-center justify-center p-4 text-center text-muted-foreground", children: [
-      /* @__PURE__ */ jsx(Sparkles, { className: "mb-2 h-8 w-8 text-primary/50" }),
+      /* @__PURE__ */ jsx(MagicWandIcon, { className: "mb-2 h-8 w-8 text-primary/50" }),
       /* @__PURE__ */ jsx("p", { className: "text-sm", children: "Ask me anything to get started" })
     ] }) : /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
       o.map((b) => /* @__PURE__ */ jsxs(
@@ -9038,7 +9046,7 @@ function AIChatPanel() {
             b.role === "assistant" ? "items-start" : "items-start justify-end"
           ),
           children: [
-            b.role === "assistant" && /* @__PURE__ */ jsx(Avatar, { className: "h-6 w-6 bg-primary/10", children: /* @__PURE__ */ jsx(Sparkles, { className: "h-3 w-3 text-primary" }) }),
+            b.role === "assistant" && /* @__PURE__ */ jsx(Avatar, { className: "h-6 w-6 bg-primary/10", children: /* @__PURE__ */ jsx(MagicWandIcon, { className: "h-3 w-3 text-primary" }) }),
             /* @__PURE__ */ jsx(
               "div",
               {
@@ -9055,8 +9063,8 @@ function AIChatPanel() {
         b.id
       )),
       l && /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
-        /* @__PURE__ */ jsx(Avatar, { className: "h-6 w-6 bg-primary/10", children: /* @__PURE__ */ jsx(Sparkles, { className: "h-3 w-3 text-primary" }) }),
-        /* @__PURE__ */ jsx("div", { className: "rounded-lg bg-muted px-3 py-2", children: /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin text-muted-foreground" }) })
+        /* @__PURE__ */ jsx(Avatar, { className: "h-6 w-6 bg-primary/10", children: /* @__PURE__ */ jsx(MagicWandIcon, { className: "h-3 w-3 text-primary" }) }),
+        /* @__PURE__ */ jsx("div", { className: "rounded-lg bg-muted px-3 py-2", children: /* @__PURE__ */ jsx(ReloadIcon, { className: "h-4 w-4 animate-spin text-muted-foreground" }) })
       ] }),
       /* @__PURE__ */ jsx("div", { ref: u })
     ] }) }),
@@ -9069,7 +9077,7 @@ function AIChatPanel() {
           variant: "destructive",
           className: "absolute right-0 top-0 h-5 w-5 rounded-full p-0",
           onClick: y,
-          children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" })
+          children: /* @__PURE__ */ jsx(Cross1Icon, { className: "h-3 w-3" })
         }
       )
     ] }) }),
@@ -9094,7 +9102,7 @@ function AIChatPanel() {
             variant: "ghost",
             className: "absolute bottom-2 right-2 h-6 w-6",
             onClick: x,
-            children: /* @__PURE__ */ jsx(Image$1, { className: "h-4 w-4 text-muted-foreground" })
+            children: /* @__PURE__ */ jsx(ImageIcon, { className: "h-4 w-4 text-muted-foreground" })
           }
         )
       ] }),
@@ -9106,7 +9114,7 @@ function AIChatPanel() {
           onClick: m,
           disabled: l || !r.trim() && !c,
           children: [
-            /* @__PURE__ */ jsx(Send, { className: "mr-1 h-4 w-4" }),
+            /* @__PURE__ */ jsx(PaperPlaneIcon, { className: "mr-1 h-4 w-4" }),
             "Send"
           ]
         }
@@ -9118,7 +9126,7 @@ const AiAssistant = () => {
   const o = useAiAssistant(), [n] = useRightPanel(), r = useBuilderProp("askAiCallBack", null), { t: a } = useTranslation(), { hasPermission: l } = usePermissions();
   return useChaiFeatureFlag("enable-ai-chat-left") || !r || !l(PERMISSIONS.EDIT_BLOCK) ? null : /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
     /* @__PURE__ */ jsxs(Label, { htmlFor: "ai-assistant", className: "flex items-center gap-x-1 text-sm text-yellow-600", children: [
-      /* @__PURE__ */ jsx(SparklesIcon, { className: "w-4" }),
+      /* @__PURE__ */ jsx(MagicWandIcon, { className: "w-4" }),
       a("AI Assistant")
     ] }),
     /* @__PURE__ */ jsx(
@@ -9157,19 +9165,15 @@ const AiAssistant = () => {
 }, DataBinding = () => {
   const o = usePageExternalData(), [n, r] = useAtom$1(dataBindingActiveAtom), { t: a } = useTranslation();
   return isEmpty(o) ? null : /* @__PURE__ */ jsx("div", { className: "flex items-center", children: /* @__PURE__ */ jsxs(Tooltip, { children: [
-    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(Button, { className: "rounded-full", variant: "ghost", onClick: () => r(!n), children: /* @__PURE__ */ jsx(DatabaseZapIcon, { className: cn$2("h-4 w-4", n ? "text-green-500" : "text-gray-500") }) }) }),
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(Button, { className: "rounded-full", variant: "ghost", onClick: () => r(!n), children: /* @__PURE__ */ jsx(LightningBoltIcon, { className: cn$2("h-4 w-4", n ? "text-green-500" : "text-gray-500") }) }) }),
     /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: a("Toggle Data Binding") }) })
   ] }) });
 }, CanvasTopBar = () => {
   const o = useBuilderProp("darkMode", !0), n = useFeature("aiChat"), [r] = useCanvasZoom();
-  return /* @__PURE__ */ jsxs("div", { className: "flex h-10 items-center justify-between border-b border-border bg-background/70 px-2", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-10 items-center justify-between border-b border-border bg-background/70 px-2 shadow-xl", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex h-full space-x-2", children: [
       /* @__PURE__ */ jsx(Breakpoints$1, { canvas: !0, openDelay: 400 }),
       /* @__PURE__ */ jsx(Separator, { orientation: "vertical" }),
-      o ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(DarkMode, {}),
-        /* @__PURE__ */ jsx(Separator, { orientation: "vertical" })
-      ] }) : null,
       /* @__PURE__ */ jsxs("div", { className: "flex w-12 cursor-not-allowed items-center justify-center gap-x-1 space-x-0 font-medium text-gray-400", children: [
         /* @__PURE__ */ jsx(ZoomInIcon, { className: "h-3.5 w-3.5 flex-shrink-0" }),
         " ",
@@ -9179,6 +9183,10 @@ const AiAssistant = () => {
         ] })
       ] }),
       /* @__PURE__ */ jsx(Separator, { orientation: "vertical" }),
+      o ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(DarkMode, {}),
+        /* @__PURE__ */ jsx(Separator, { orientation: "vertical" })
+      ] }) : null,
       /* @__PURE__ */ jsx(UndoRedo, {}),
       /* @__PURE__ */ jsx(DataBinding, {})
     ] }),
@@ -9224,9 +9232,9 @@ const AiAssistant = () => {
       const k = [...a, { key: i, value: d }];
       r(k), l(a), c(""), p(""), h("");
     }
-  }, S = (k) => {
-    const w = a.filter((E, C) => C !== k);
-    r(w), l(w);
+  }, C = (k) => {
+    const A = a.filter((E, S) => S !== k);
+    r(A), l(A);
   }, B = (k) => {
     g(k), c(a[k].key), p(a[k].value);
   }, j = () => {
@@ -9240,24 +9248,24 @@ const AiAssistant = () => {
     }
   }, _ = (k) => {
     k.key === "Enter" && !k.shiftKey && (k.preventDefault(), u !== null ? j() : b());
-  }, A = useCallback((k) => {
-    const w = (v) => /[.,!?;:]/.test(v), E = (v, N, L) => {
+  }, w = useCallback((k) => {
+    const A = (v) => /[.,!?;:]/.test(v), E = (v, I, L) => {
       let T = "", P = "";
-      const I = N > 0 ? v[N - 1] : "", R = N < v.length ? v[N] : "";
-      return N > 0 && (I === "." || !w(I) && I !== " ") && (T = " "), N < v.length && !w(R) && R !== " " && (P = " "), {
+      const N = I > 0 ? v[I - 1] : "", R = I < v.length ? v[I] : "";
+      return I > 0 && (N === "." || !A(N) && N !== " ") && (T = " "), I < v.length && !A(R) && R !== " " && (P = " "), {
         text: T + L + P,
         prefixLength: T.length,
         suffixLength: P.length
       };
-    }, C = x.current;
-    if (C) {
-      const v = C.selectionStart || 0, N = C.value || "", L = C.selectionEnd || v;
+    }, S = x.current;
+    if (S) {
+      const v = S.selectionStart || 0, I = S.value || "", L = S.selectionEnd || v;
       if (L > v) {
-        const O = `{{${k}}}`, { text: M } = E(N, v, O), $ = N.slice(0, v) + M + N.slice(L);
+        const O = `{{${k}}}`, { text: M } = E(I, v, O), $ = I.slice(0, v) + M + I.slice(L);
         p($);
         return;
       }
-      const P = `{{${k}}}`, { text: I } = E(N, v, P), R = N.slice(0, v) + I + N.slice(v);
+      const P = `{{${k}}}`, { text: N } = E(I, v, P), R = I.slice(0, v) + N + I.slice(v);
       p(R);
     }
   }, []);
@@ -9291,7 +9299,7 @@ const AiAssistant = () => {
             /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
               /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
                 /* @__PURE__ */ jsx(Label, { htmlFor: "attrValue", className: "text-[11px] font-normal text-slate-600", children: "Value" }),
-                !isEmpty(y) && /* @__PURE__ */ jsx(NestedPathSelector, { data: y, onSelect: A })
+                !isEmpty(y) && /* @__PURE__ */ jsx(NestedPathSelector, { data: y, onSelect: w })
               ] }),
               /* @__PURE__ */ jsx(
                 Textarea,
@@ -9316,16 +9324,16 @@ const AiAssistant = () => {
         ]
       }
     ),
-    /* @__PURE__ */ jsx("div", { className: "space-y-1 py-4", children: a.map((k, w) => /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between rounded border p-2 text-sm", children: [
+    /* @__PURE__ */ jsx("div", { className: "space-y-1 py-4", children: a.map((k, A) => /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between rounded border p-2 text-sm", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex flex-col text-xs leading-tight", children: [
         /* @__PURE__ */ jsx("span", { className: "truncate text-[12px] font-light text-muted-foreground", children: k.key }),
         /* @__PURE__ */ jsx("span", { className: "max-w-[200px] text-wrap font-normal", children: k.value.toString() })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "flex-shrink-0 text-slate-400", children: [
-        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => B(w), children: /* @__PURE__ */ jsx(Edit2, { className: "h-3 w-3" }) }),
-        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => S(w), children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" }) })
+        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => B(A), children: /* @__PURE__ */ jsx(Pencil2Icon, { className: "h-3 w-3" }) }),
+        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => C(A), children: /* @__PURE__ */ jsx(Cross1Icon, { className: "h-3 w-3" }) })
       ] })
-    ] }, w)) })
+    ] }, A)) })
   ] });
 }), BlockAttributesEditor = React.memo(() => {
   const o = useSelectedBlock(), [n, r] = useState([]), [a] = useSelectedStylingBlocks(), l = useUpdateBlocksProps(), i = `${get(a, "0.prop")}_attrs`;
@@ -9346,7 +9354,7 @@ const AiAssistant = () => {
 }), NoopComponent = () => null, ResetStylesButton = () => {
   const { resetAll: o } = useResetBlockStyles(), n = useSelectedBlock(), [r] = useSelectedStylingBlocks(), a = useRemoveAllClassesForBlock(), { t: l } = useTranslation();
   return !n || isEmpty(r) ? null : /* @__PURE__ */ jsxs(DropdownMenu, { children: [
-    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: !0, children: /* @__PURE__ */ jsx("div", { className: "inline-flex rounded-sm p-0.5 hover:bg-gray-300", onClick: (i) => i.stopPropagation(), children: /* @__PURE__ */ jsx(MoreVertical, { className: "h-3 w-3" }) }) }),
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: !0, children: /* @__PURE__ */ jsx("div", { className: "inline-flex rounded-sm p-0.5 hover:bg-gray-300", onClick: (i) => i.stopPropagation(), children: /* @__PURE__ */ jsx(DotsVerticalIcon, { className: "h-3 w-3" }) }) }),
     /* @__PURE__ */ jsxs(DropdownMenuContent, { side: "bottom", className: "border-border text-xs", children: [
       /* @__PURE__ */ jsxs(
         DropdownMenuItem,
@@ -9387,7 +9395,7 @@ function BlockAttributesToggle() {
         className: "flex cursor-pointer items-center justify-between border-t border-border py-3 text-xs font-medium hover:underline",
         children: [
           /* @__PURE__ */ jsx("span", { children: o("Attributes") }),
-          /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 text-gray-500 " + (n ? "rotate-180" : "") }) })
+          /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "h-4 w-4 text-gray-500 " + (n ? "rotate-180" : "") }) })
         ]
       }
     ),
@@ -9453,7 +9461,7 @@ const SettingsPanel = () => {
   component: DefaultTopBar
 }, registerChaiTopBar = (o) => {
   TOP_BAR.component = o;
-}, useTopBarComponent = () => useMemo(() => TOP_BAR.component, []), DEFAULT_PANEL_WIDTH = 280, OutlineButton = ({ isActive: o, show: n }) => /* @__PURE__ */ jsx(Button, { variant: o ? "default" : "ghost", size: "icon", onClick: n, children: /* @__PURE__ */ jsx(Layers, { size: 20 }) }), AiButton = ({ isActive: o, show: n }) => /* @__PURE__ */ jsx(Button, { variant: o ? "default" : "ghost", size: "icon", onClick: n, children: /* @__PURE__ */ jsx(LightningBoltIcon, { className: "rtl:ml-2" }) }), AskAiButton = ({ isActive: o, show: n }) => /* @__PURE__ */ jsx(Button, { variant: o ? "default" : "ghost", size: "icon", onClick: n, children: /* @__PURE__ */ jsx(SparklesIcon, { className: "rtl:ml-2" }) });
+}, useTopBarComponent = () => useMemo(() => TOP_BAR.component, []), DEFAULT_PANEL_WIDTH = 280, OutlineButton = ({ isActive: o, show: n }) => /* @__PURE__ */ jsx(Button, { variant: o ? "default" : "ghost", size: "icon", onClick: n, children: /* @__PURE__ */ jsx(StackIcon, { className: "h-5 w-5" }) }), AiButton = ({ isActive: o, show: n }) => /* @__PURE__ */ jsx(Button, { variant: o ? "default" : "ghost", size: "icon", onClick: n, children: /* @__PURE__ */ jsx(LightningBoltIcon, { className: "rtl:ml-2" }) }), AskAiButton = ({ isActive: o, show: n }) => /* @__PURE__ */ jsx(Button, { variant: o ? "default" : "ghost", size: "icon", onClick: n, children: /* @__PURE__ */ jsx(MagicWandIcon, { className: "rtl:ml-2" }) });
 function useSidebarDefaultPanels() {
   const o = useBuilderProp("askAiCallBack", null), n = useFeature("aiChat"), r = useChaiFeatureFlag("enable-ai-chat-left");
   return useMemo(() => {
@@ -9483,42 +9491,38 @@ function useSidebarDefaultPanels() {
   }, [o, n, r]);
 }
 const RootLayout = () => {
-  const o = useTopBarComponent(), [n, r] = useSidebarActivePanel(), a = useRef("outline"), [l, i] = useState(DEFAULT_PANEL_WIDTH), [c, d] = useRightPanel();
-  usePubSub(CHAI_BUILDER_EVENTS.SHOW_BLOCK_SETTINGS, () => {
-    r("outline");
-  });
-  const p = useSidebarDefaultPanels(), u = useChaiSidebarPanels("top"), g = useChaiSidebarPanels("bottom"), m = reverse([...g ?? []]), h = useCallback((w) => {
-    w.preventDefault();
+  const o = useTopBarComponent(), [n, r] = useSidebarActivePanel(), a = useRef("outline"), [l, i] = useState(DEFAULT_PANEL_WIDTH), [c, d] = useRightPanel(), p = useSidebarDefaultPanels(), u = useChaiSidebarPanels("top"), g = useChaiSidebarPanels("bottom"), m = reverse([...g ?? []]), h = useCallback((A) => {
+    A.preventDefault();
   }, []), f = useCallback(
-    (w) => {
-      r(n === w ? null : w);
+    (A) => {
+      console.log("handleMenuItemClick", A, n), r(n === A ? null : A);
     },
-    [n]
+    [n, r]
   ), { t: x } = useTranslation(), y = useMemo(
     () => [...p, ...u, ...g],
     [p, u, g]
-  ), b = useBuilderProp("htmlDir", "ltr"), S = find(y, { id: n }) ?? first(y), B = get(S, "width", DEFAULT_PANEL_WIDTH);
+  ), b = useBuilderProp("htmlDir", "ltr"), C = find(y, { id: n }) ?? first(y), B = get(C, "width", DEFAULT_PANEL_WIDTH);
   useEffect(() => {
     if (n !== null) {
-      const w = find(y, { id: n });
-      w && get(w, "view", "standard") === "standard" && (a.current = n, i(get(w, "width", DEFAULT_PANEL_WIDTH)));
+      const A = find(y, { id: n });
+      A && get(A, "view", "standard") === "standard" && (a.current = n, i(get(A, "width", DEFAULT_PANEL_WIDTH)));
     }
   }, [n, y]);
   const j = useMemo(() => {
     if (n === null) return 0;
-    const w = find(y, { id: n });
-    return get(w, "view", "standard") === "standard" ? B : l;
+    const A = find(y, { id: n });
+    return get(A, "view", "standard") === "standard" ? B : l;
   }, [n, B, l, y]), _ = useCallback(() => {
     r(a.current);
-  }, [r]), A = useCallback(() => {
+  }, [r, n]), w = useCallback(() => {
     r("outline");
   }, [r]);
   useEffect(() => {
-    find(y, { id: n }) || r("outline");
+    n !== null && !find(y, { id: n }) && r("outline");
   }, [n, y]);
   const k = useCallback(
-    (w) => {
-      f(w);
+    (A) => {
+      f(A);
     },
     [f]
   );
@@ -9527,29 +9531,29 @@ const RootLayout = () => {
       "div",
       {
         onContextMenu: h,
-        className: "flex h-screen max-h-full flex-col bg-background text-foreground",
+        className: "flex h-full max-h-full flex-col bg-background text-foreground",
         children: [
           /* @__PURE__ */ jsx("div", { className: "flex h-[50px] w-screen items-center border-b border-border", children: /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(o, {}) }) }),
           /* @__PURE__ */ jsxs("main", { className: "relative flex h-[calc(100vh-56px)] max-w-full flex-1 flex-row", children: [
             /* @__PURE__ */ jsxs("div", { id: "sidebar", className: "flex w-12 flex-col items-center justify-between border-r border-border py-2", children: [
-              /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-y-1", children: [p, u].flat().map((w, E) => /* @__PURE__ */ jsxs(Tooltip, { children: [
-                /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: createElement(get(w, "button", NoopComponent), {
+              /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-y-1", children: [p, u].flat().map((A, E) => /* @__PURE__ */ jsxs(Tooltip, { children: [
+                /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: createElement(get(A, "button", NoopComponent), {
                   position: "top",
-                  panelId: w.id,
-                  isActive: n === w.id,
-                  show: () => k(w.id)
+                  panelId: A.id,
+                  isActive: n === A.id,
+                  show: () => k(A.id)
                 }) }),
-                /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsx("p", { children: x(w.label) }) })
+                /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsx("p", { children: x(A.label) }) })
               ] }, "button-top-" + E)) }),
               /* @__PURE__ */ jsx("div", { className: "flex flex-col space-y-1" }),
-              /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: m == null ? void 0 : m.map((w, E) => /* @__PURE__ */ jsxs(Tooltip, { children: [
-                /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: createElement(get(w, "button", NoopComponent), {
+              /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: m == null ? void 0 : m.map((A, E) => /* @__PURE__ */ jsxs(Tooltip, { children: [
+                /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: createElement(get(A, "button", NoopComponent), {
                   position: "bottom",
-                  panelId: w.id,
-                  isActive: n === w.id,
-                  show: () => k(w.id)
+                  panelId: A.id,
+                  isActive: n === A.id,
+                  show: () => k(A.id)
                 }) }),
-                /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsx("p", { children: x(w.label) }) })
+                /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsx("p", { children: x(A.label) }) })
               ] }, "button-bottom-" + E)) })
             ] }),
             /* @__PURE__ */ jsx(
@@ -9560,15 +9564,15 @@ const RootLayout = () => {
                 initial: { width: j },
                 animate: { width: j },
                 transition: { duration: 0.3, ease: "easeInOut" },
-                children: n !== null && get(S, "view", "standard") === "standard" && /* @__PURE__ */ jsxs("div", { className: "no-scrollbar flex h-full flex-col overflow-hidden px-3 py-2", children: [
+                children: n !== null && get(C, "view", "standard") === "standard" && /* @__PURE__ */ jsxs("div", { className: "no-scrollbar flex h-full flex-col overflow-hidden px-3 py-2", children: [
                   /* @__PURE__ */ jsx(
                     "div",
                     {
-                      className: `absolute top-2 flex h-10 items-center space-x-1 py-2 text-base font-bold ${get(S, "isInternal", !1) ? "" : "w-64"}`,
-                      children: /* @__PURE__ */ jsx("span", { children: x(get(S, "label", "")) })
+                      className: `absolute top-2 flex h-10 items-center space-x-1 py-2 text-base font-bold ${get(C, "isInternal", !1) ? "" : "w-64"}`,
+                      children: /* @__PURE__ */ jsx("span", { children: x(get(C, "label", "")) })
                     }
                   ),
-                  /* @__PURE__ */ jsx("div", { className: "no-scrollbar h-full max-h-full overflow-y-auto pt-10", children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { children: "Loading..." }), children: React__default.createElement(get(S, "panel", NoopComponent), {}) }) })
+                  /* @__PURE__ */ jsx("div", { className: "no-scrollbar h-full max-h-full overflow-y-auto pt-10", children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { children: "Loading..." }), children: React__default.createElement(get(C, "panel", NoopComponent), {}) }) })
                 ] })
               }
             ),
@@ -9591,7 +9595,7 @@ const RootLayout = () => {
                     x("AI Assistant")
                   ] }) }) : c === "theme" ? /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-between gap-2", children: [
                     /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
-                      /* @__PURE__ */ jsx(Palette, { className: "h-4 w-4 text-gray-600" }),
+                      /* @__PURE__ */ jsx(MixerHorizontalIcon, { className: "h-4 w-4 text-gray-600" }),
                       x("Theme Settings")
                     ] }),
                     /* @__PURE__ */ jsx(
@@ -9601,7 +9605,7 @@ const RootLayout = () => {
                         variant: "ghost",
                         size: "icon",
                         className: "text-xs",
-                        children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4 rtl:ml-2" })
+                        children: /* @__PURE__ */ jsx(Cross1Icon, { className: "h-4 w-4 rtl:ml-2" })
                       }
                     )
                   ] }) : null }) }) }),
@@ -9614,7 +9618,7 @@ const RootLayout = () => {
       }
     ),
     /* @__PURE__ */ jsx(AddBlocksDialog, {}),
-    n !== null && get(S, "view") === "drawer" && /* @__PURE__ */ jsx(Sheet, { open: !0, onOpenChange: () => _(), children: /* @__PURE__ */ jsxs(
+    n !== null && get(C, "view") === "drawer" && /* @__PURE__ */ jsx(Sheet, { open: !0, onOpenChange: () => _(), children: /* @__PURE__ */ jsxs(
       SheetContent,
       {
         side: "left",
@@ -9622,26 +9626,26 @@ const RootLayout = () => {
         style: { width: `${B}px` },
         children: [
           /* @__PURE__ */ jsx(SheetHeader, { className: "border-b border-border px-2 py-2.5", children: /* @__PURE__ */ jsxs(SheetTitle, { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx("span", { className: "inline-block", children: get(S, "icon", null) }),
-            /* @__PURE__ */ jsx("span", { children: x(get(S, "label", "")) })
+            /* @__PURE__ */ jsx("span", { className: "inline-block", children: get(C, "icon", null) }),
+            /* @__PURE__ */ jsx("span", { children: x(get(C, "label", "")) })
           ] }) }),
-          /* @__PURE__ */ jsx("div", { className: "h-full max-h-full overflow-y-auto p-4", children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { children: "Loading..." }), children: React__default.createElement(get(S, "panel", NoopComponent), {
-            close: A
+          /* @__PURE__ */ jsx("div", { className: "h-full max-h-full overflow-y-auto p-4", children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { children: "Loading..." }), children: React__default.createElement(get(C, "panel", NoopComponent), {
+            close: w
           }) }) })
         ]
       }
     ) }),
     " ",
-    n !== null && get(S, "view") === "modal" && /* @__PURE__ */ jsx(Dialog, { open: !0, onOpenChange: () => _(), children: /* @__PURE__ */ jsxs(DialogContent, { className: "gap-0 p-0", style: { maxWidth: `${B}px` }, children: [
+    n !== null && get(C, "view") === "modal" && /* @__PURE__ */ jsx(Dialog, { open: !0, onOpenChange: () => _(), children: /* @__PURE__ */ jsxs(DialogContent, { className: "gap-0 p-0", style: { maxWidth: `${B}px` }, children: [
       /* @__PURE__ */ jsx(DialogHeader, { className: "border-b border-border px-2 py-3.5", children: /* @__PURE__ */ jsxs(DialogTitle, { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx("span", { className: "inline-block", children: get(S, "icon", null) }),
-        /* @__PURE__ */ jsx("span", { children: x(get(S, "label", "")) })
+        /* @__PURE__ */ jsx("span", { className: "inline-block", children: get(C, "icon", null) }),
+        /* @__PURE__ */ jsx("span", { children: x(get(C, "label", "")) })
       ] }) }),
-      /* @__PURE__ */ jsx("div", { className: "max-h-[70vh] overflow-y-auto p-4", children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { children: "Loading..." }), children: React__default.createElement(get(S, "panel", NoopComponent), {
-        close: A
+      /* @__PURE__ */ jsx("div", { className: "max-h-[70vh] overflow-y-auto p-4", children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { children: "Loading..." }), children: React__default.createElement(get(C, "panel", NoopComponent), {
+        close: w
       }) }) })
     ] }) }),
-    n !== null && get(S, "view") === "overlay" && /* @__PURE__ */ jsx(
+    n !== null && get(C, "view") === "overlay" && /* @__PURE__ */ jsx(
       motion.div,
       {
         className: "absolute bottom-0 left-12 right-0 top-0 z-50",
@@ -9660,13 +9664,13 @@ const RootLayout = () => {
             children: [
               /* @__PURE__ */ jsxs("div", { className: "flex h-[50px] items-center justify-between border-b border-border p-4", children: [
                 /* @__PURE__ */ jsxs("div", { className: "-ml-2 flex items-center gap-2 text-lg font-bold", children: [
-                  /* @__PURE__ */ jsx("span", { className: "rtl:ml-2 rtl:inline-block", children: get(S, "icon", null) }),
-                  /* @__PURE__ */ jsx("span", { children: x(get(S, "label", "")) })
+                  /* @__PURE__ */ jsx("span", { className: "rtl:ml-2 rtl:inline-block", children: get(C, "icon", null) }),
+                  /* @__PURE__ */ jsx("span", { children: x(get(C, "label", "")) })
                 ] }),
-                /* @__PURE__ */ jsx(Button, { onClick: () => _(), variant: "ghost", size: "icon", className: "", children: /* @__PURE__ */ jsx(X, { className: "h-5 w-5" }) })
+                /* @__PURE__ */ jsx(Button, { onClick: () => _(), variant: "ghost", size: "icon", className: "", children: /* @__PURE__ */ jsx(Cross1Icon, { className: "h-5 w-5" }) })
               ] }),
-              /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto p-4", children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { children: "Loading..." }), children: React__default.createElement(get(S, "panel", NoopComponent), {
-                close: A
+              /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto p-4", children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { children: "Loading..." }), children: React__default.createElement(get(C, "panel", NoopComponent), {
+                close: w
               }) }) })
             ]
           }
@@ -9708,8 +9712,8 @@ const RootLayout = () => {
     const x = l.toLowerCase();
     return Object.fromEntries(
       Object.entries(a).filter(([y, b]) => {
-        var S;
-        return (y == null ? void 0 : y.toLowerCase().includes(x)) || ((S = b == null ? void 0 : b.description) == null ? void 0 : S.toLowerCase().includes(x));
+        var C;
+        return (y == null ? void 0 : y.toLowerCase().includes(x)) || ((C = b == null ? void 0 : b.description) == null ? void 0 : C.toLowerCase().includes(x));
       })
     );
   }, [a, l]), m = (x) => {
@@ -9719,8 +9723,8 @@ const RootLayout = () => {
     });
   }, h = (x) => {
     if (!c) return;
-    const y = x.clientX - p.x, b = x.clientY - p.y, S = x.currentTarget, B = S.offsetWidth, j = S.offsetHeight, _ = window.innerWidth - B, A = window.innerHeight - j, k = Math.max(0, Math.min(y, _)), w = Math.max(0, Math.min(b, A));
-    r(k, w);
+    const y = x.clientX - p.x, b = x.clientY - p.y, C = x.currentTarget, B = C.offsetWidth, j = C.offsetHeight, _ = window.innerWidth - B, w = window.innerHeight - j, k = Math.max(0, Math.min(y, _)), A = Math.max(0, Math.min(b, w));
+    r(k, A);
   }, f = () => {
     d(!1);
   };
@@ -9763,12 +9767,12 @@ const RootLayout = () => {
                 size: "sm",
                 onClick: o,
                 className: "absolute -right-2 -top-2 p-1 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200",
-                children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+                children: /* @__PURE__ */ jsx(Cross1Icon, { className: "h-4 w-4" })
               }
             )
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-            /* @__PURE__ */ jsx(Search, { className: "absolute left-2.5 top-2.5 h-4 w-4 text-gray-400" }),
+            /* @__PURE__ */ jsx(MagnifyingGlassIcon, { className: "absolute left-2.5 top-2.5 h-4 w-4 text-gray-400" }),
             /* @__PURE__ */ jsx(
               Input$1,
               {
@@ -9962,46 +9966,46 @@ const atomRead = (o, n, ...r) => n.read(...r), atomWrite = (o, n, ...r) => n.wri
   var r;
   const a = getBuildingBlocks(o), l = a[1], i = a[2], c = a[3], d = a[6], p = a[7], u = a[11], g = a[12], m = a[13], h = a[14], f = a[16], x = a[17], y = u(o, n);
   if (isAtomStateInitialized(y) && (l.has(n) && i.get(n) !== y.n || Array.from(y.d).every(
-    ([w, E]) => (
+    ([A, E]) => (
       // Recursively, read the atom state of the dependency, and
       // check if the atom epoch number is unchanged
-      h(o, w).n === E
+      h(o, A).n === E
     )
   )))
     return y;
   y.d.clear();
   let b = !0;
-  function S() {
+  function C() {
     l.has(n) && (x(o, n), m(o), g(o));
   }
-  function B(w) {
+  function B(A) {
     var E;
-    if (isSelfAtom(n, w)) {
-      const v = u(o, w);
+    if (isSelfAtom(n, A)) {
+      const v = u(o, A);
       if (!isAtomStateInitialized(v))
-        if (hasInitialValue(w))
-          setAtomStateValueOrPromise(o, w, w.init);
+        if (hasInitialValue(A))
+          setAtomStateValueOrPromise(o, A, A.init);
         else
           throw new Error("no atom init");
       return returnAtomValue(v);
     }
-    const C = h(o, w);
+    const S = h(o, A);
     try {
-      return returnAtomValue(C);
+      return returnAtomValue(S);
     } finally {
-      y.d.set(w, C.n), isPendingPromise(y.v) && addPendingPromiseToDependency(n, y.v, C), (E = l.get(w)) == null || E.t.add(n), b || S();
+      y.d.set(A, S.n), isPendingPromise(y.v) && addPendingPromiseToDependency(n, y.v, S), (E = l.get(A)) == null || E.t.add(n), b || C();
     }
   }
   let j, _;
-  const A = {
+  const w = {
     get signal() {
       return j || (j = new AbortController()), j.signal;
     },
     get setSelf() {
-      return !_ && isActuallyWritableAtom(n) && (_ = (...w) => {
+      return !_ && isActuallyWritableAtom(n) && (_ = (...A) => {
         if (!b)
           try {
-            return f(o, n, ...w);
+            return f(o, n, ...A);
           } finally {
             m(o), g(o);
           }
@@ -10009,10 +10013,10 @@ const atomRead = (o, n, ...r) => n.read(...r), atomWrite = (o, n, ...r) => n.wri
     }
   }, k = y.n;
   try {
-    const w = p(o, n, B, A);
-    return setAtomStateValueOrPromise(o, n, w), isPromiseLike$1(w) && (registerAbortHandler(w, () => j == null ? void 0 : j.abort()), w.then(S, S)), y;
-  } catch (w) {
-    return delete y.v, y.e = w, ++y.n, y;
+    const A = p(o, n, B, w);
+    return setAtomStateValueOrPromise(o, n, A), isPromiseLike$1(A) && (registerAbortHandler(A, () => j == null ? void 0 : j.abort()), A.then(C, C)), y;
+  } catch (A) {
+    return delete y.v, y.e = A, ++y.n, y;
   } finally {
     b = !1, k !== y.n && i.get(n) === k && (i.set(n, y.n), c.add(n), (r = d.c) == null || r.call(d, n));
   }
@@ -10028,18 +10032,18 @@ const atomRead = (o, n, ...r) => n.read(...r), atomWrite = (o, n, ...r) => n.wri
 }, writeAtomState = (o, n, ...r) => {
   const a = getBuildingBlocks(o), l = a[3], i = a[6], c = a[8], d = a[11], p = a[12], u = a[13], g = a[14], m = a[15], h = a[17];
   let f = !0;
-  const x = (b) => returnAtomValue(g(o, b)), y = (b, ...S) => {
+  const x = (b) => returnAtomValue(g(o, b)), y = (b, ...C) => {
     var B;
     const j = d(o, b);
     try {
       if (isSelfAtom(n, b)) {
         if (!hasInitialValue(b))
           throw new Error("atom not writable");
-        const _ = j.n, A = S[0];
-        setAtomStateValueOrPromise(o, b, A), h(o, b), _ !== j.n && (l.add(b), (B = i.c) == null || B.call(i, b), m(o, b));
+        const _ = j.n, w = C[0];
+        setAtomStateValueOrPromise(o, b, w), h(o, b), _ !== j.n && (l.add(b), (B = i.c) == null || B.call(i, b), m(o, b));
         return;
       } else
-        return writeAtomState(o, b, ...S);
+        return writeAtomState(o, b, ...C);
     } finally {
       f || (u(o), p(o));
     }
@@ -10080,7 +10084,7 @@ const atomRead = (o, n, ...r) => n.read(...r), atomWrite = (o, n, ...r) => n.wri
     }, l.set(n, x), (r = c.m) == null || r.call(c, n), isActuallyWritableAtom(n)) {
       const y = () => {
         let b = !0;
-        const S = (...B) => {
+        const C = (...B) => {
           try {
             return h(o, n, ...B);
           } finally {
@@ -10088,7 +10092,7 @@ const atomRead = (o, n, ...r) => n.read(...r), atomWrite = (o, n, ...r) => n.wri
           }
         };
         try {
-          const B = d(o, n, S);
+          const B = d(o, n, C);
           B && (x.u = () => {
             b = !0;
             try {
@@ -10298,10 +10302,13 @@ function useAtom(o, n) {
   ];
 }
 const useAutoSave = () => {
-  const { savePage: o } = useSavePage(), n = useBuilderProp("autoSaveSupport", !0), r = useBuilderProp("autoSaveInterval", 60);
-  useIntervalEffect(() => {
-    n && o(!0);
-  }, r * 1e3);
+  const { savePage: o } = useSavePage(), n = useBuilderProp("autoSave", !0), r = useBuilderProp("autoSaveInterval", 60);
+  useIntervalEffect(
+    () => {
+      n && o(!0);
+    },
+    n ? r * 1e3 : void 0
+  );
 }, ChaiWatchers = (o) => {
   const [, n] = useBlocksStore(), r = useBuilderReset(), [a] = useAtom(builderSaveStateAtom);
   useAtom(selectedLibraryAtom), useKeyEventWatcher(), useExpandTree(), useAutoSave(), useWatchPartailBlocks(), useUnmountBroadcastChannel();
@@ -10372,7 +10379,7 @@ export {
   getBlocksFromHTML as convertHTMLToChaiBlocks,
   generateUUID as generateBlockId,
   getBlocksFromHTML,
-  Ue as i18n,
+  He as i18n,
   cn$2 as mergeClasses,
   registerBlockSettingField,
   registerBlockSettingTemplate,
@@ -10438,7 +10445,7 @@ export {
   useTheme,
   useThemeOptions,
   useToggleChaiFeatureFlag,
-  He as useTranslation,
+  $e as useTranslation,
   useUndoManager,
   useUpdateBlocksProps,
   useUpdateBlocksPropsRealtime,