@algorithm-shift/design-system 1.2.71 → 1.2.72

package/dist/index.mjs

@@ -28897,8 +28897,126 @@ var Pagination_default = CustomPagination;
 
 // src/components/Navigation/Tabs/Tabs.tsx
 import Link5 from "next/link";
+import { useRouter } from "next/navigation";
+
+// src/components/ui/dialog.tsx
+import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { jsx as jsx51, jsxs as jsxs29 } from "react/jsx-runtime";
-var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode }) => {
+function Dialog({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx51(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
+}
+function DialogPortal({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx51(DialogPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
+}
+function DialogOverlay({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx51(
+    DialogPrimitive.Overlay,
+    {
+      "data-slot": "dialog-overlay",
+      className: cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-[60] bg-black/50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs29(DialogPortal, { "data-slot": "dialog-portal", children: [
+    /* @__PURE__ */ jsx51(DialogOverlay, {}),
+    /* @__PURE__ */ jsxs29(
+      DialogPrimitive.Content,
+      {
+        "data-slot": "dialog-content",
+        className: cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-[70] grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          showCloseButton && /* @__PURE__ */ jsxs29(
+            DialogPrimitive.Close,
+            {
+              "data-slot": "dialog-close",
+              className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+              children: [
+                /* @__PURE__ */ jsx51(X, {}),
+                /* @__PURE__ */ jsx51("span", { className: "sr-only", children: "Close" })
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function DialogHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx51(
+    "div",
+    {
+      "data-slot": "dialog-header",
+      className: cn("flex flex-col gap-2 text-center sm:text-left", className),
+      ...props
+    }
+  );
+}
+function DialogFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx51(
+    "div",
+    {
+      "data-slot": "dialog-footer",
+      className: cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DialogTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx51(
+    DialogPrimitive.Title,
+    {
+      "data-slot": "dialog-title",
+      className: cn("text-lg leading-none font-semibold", className),
+      ...props
+    }
+  );
+}
+function DialogDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx51(
+    DialogPrimitive.Description,
+    {
+      "data-slot": "dialog-description",
+      className: cn("text-muted-foreground text-sm", className),
+      ...props
+    }
+  );
+}
+
+// src/components/Navigation/Tabs/Tabs.tsx
+import { useCallback as useCallback2, useState as useState5 } from "react";
+import { Fragment as Fragment18, jsx as jsx52, jsxs as jsxs30 } from "react/jsx-runtime";
+var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode, isBuilder = true }) => {
   const rawTabs = Array.isArray(tabs) ? tabs : [];
   const baseClasses = "text-[12px] text-foreground p-2 text-center rounded-md transition-colors";
   const activeClasses = "bg-white/10 text-white";
@@ -28907,26 +29025,45 @@ var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode }) => {
     if (!path) return false;
     return pathname === path || path !== "/" && pathname?.startsWith(path);
   };
+  const router = useRouter();
+  const [showExitDialog, setShowExitDialog] = useState5(false);
+  const [pendingUrl, setPendingUrl] = useState5(null);
+  const handleBuilderExit = useCallback2(
+    (e, url) => {
+      if (isBuilder) {
+        e.preventDefault();
+        setPendingUrl(url);
+        setShowExitDialog(true);
+      }
+    },
+    [isBuilder]
+  );
+  const confirmExit = () => {
+    if (pendingUrl) {
+      setShowExitDialog(false);
+      router.push(pendingUrl);
+    }
+  };
   const renderDesktopTab = (tab, index) => {
     const finalClasses = [baseClasses, isActive(tab.url) ? activeClasses : hoverClasses, tab.className || ""].join(" ");
     if (Array.isArray(tab.children) && tab.children.length > 0 && tab.isDropDown) {
-      return /* @__PURE__ */ jsxs29(DropdownMenu, { children: [
-        /* @__PURE__ */ jsxs29(DropdownMenuTrigger, { className: `${finalClasses} inline-flex items-center gap-1`, children: [
+      return /* @__PURE__ */ jsxs30(DropdownMenu, { children: [
+        /* @__PURE__ */ jsxs30(DropdownMenuTrigger, { className: `${finalClasses} inline-flex items-center gap-1`, children: [
           tab.header,
-          /* @__PURE__ */ jsx51(ChevronDown, { className: "h-4 w-4 opacity-80" })
+          /* @__PURE__ */ jsx52(ChevronDown, { className: "h-4 w-4 opacity-80" })
         ] }),
-        /* @__PURE__ */ jsx51(
+        /* @__PURE__ */ jsx52(
           DropdownMenuContent,
           {
             align: "start",
             sideOffset: 6,
             className: "z-50 min-w-[160px] rounded-md border border-gray-200 bg-white p-1 shadow-lg",
-            children: tab.children.map((item) => /* @__PURE__ */ jsx51(
+            children: tab.children.map((item) => /* @__PURE__ */ jsx52(
               DropdownMenuItem,
               {
                 asChild: true,
                 className: "cursor-pointer rounded-sm px-3 py-2 text-[12px] text-gray-800 hover:bg-gray-100 focus:bg-gray-100",
-                children: /* @__PURE__ */ jsx51(Link5, { href: item.url || "#", children: item.header })
+                children: /* @__PURE__ */ jsx52(Link5, { href: item.url || "#", onClick: (e) => handleBuilderExit(e, item.url || "#"), children: item.header })
               },
               item.id
             ))
@@ -28934,14 +29071,24 @@ var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode }) => {
         )
       ] }, index);
     }
-    return tab.url ? /* @__PURE__ */ jsx51(Link5, { href: tab.url, className: finalClasses, style: tab.style, children: tab.header }, index) : /* @__PURE__ */ jsx51("div", { className: finalClasses, style: tab.style, role: "button", tabIndex: 0, children: tab.header }, index);
+    return tab.url ? /* @__PURE__ */ jsx52(
+      Link5,
+      {
+        href: tab.url,
+        className: finalClasses,
+        style: tab.style,
+        onClick: (e) => handleBuilderExit(e, tab.url || "#"),
+        children: tab.header
+      },
+      index
+    ) : /* @__PURE__ */ jsx52("div", { className: finalClasses, style: tab.style, role: "button", tabIndex: 0, children: tab.header }, index);
   };
-  const renderMobileMenu = () => /* @__PURE__ */ jsxs29(DropdownMenu, { children: [
-    /* @__PURE__ */ jsxs29(DropdownMenuTrigger, { className: "flex items-center gap-2 px-3 py-2 rounded-md bg-white/10 text-white text-sm", children: [
-      /* @__PURE__ */ jsx51(Menu, { className: "h-4 w-4" }),
+  const renderMobileMenu = () => /* @__PURE__ */ jsxs30(DropdownMenu, { children: [
+    /* @__PURE__ */ jsxs30(DropdownMenuTrigger, { className: "flex items-center gap-2 px-3 py-2 rounded-md bg-white/10 text-white text-sm", children: [
+      /* @__PURE__ */ jsx52(Menu, { className: "h-4 w-4" }),
       "Menu"
     ] }),
-    /* @__PURE__ */ jsx51(
+    /* @__PURE__ */ jsx52(
       DropdownMenuContent,
       {
         align: "start",
@@ -28950,25 +29097,25 @@ var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode }) => {
         children: rawTabs.map((tab, i) => {
           const hasChildren = Array.isArray(tab.children) && tab.children.length > 0 && tab.isDropDown;
           if (hasChildren) {
-            return /* @__PURE__ */ jsxs29(DropdownMenuSub, { children: [
-              /* @__PURE__ */ jsx51(DropdownMenuSubTrigger, { className: "flex items-center justify-between cursor-pointer rounded-sm px-3 py-2 text-[13px] text-foreground hover:text-foreground", children: tab.header }),
-              /* @__PURE__ */ jsx51(DropdownMenuSubContent, { className: "bg-white border shadow-lg rounded-md p-1", children: tab.children.map((item) => /* @__PURE__ */ jsx51(
+            return /* @__PURE__ */ jsxs30(DropdownMenuSub, { children: [
+              /* @__PURE__ */ jsx52(DropdownMenuSubTrigger, { className: "flex items-center justify-between cursor-pointer rounded-sm px-3 py-2 text-[13px] text-foreground hover:text-foreground", children: tab.header }),
+              /* @__PURE__ */ jsx52(DropdownMenuSubContent, { className: "bg-white border shadow-lg rounded-md p-1", children: tab.children.map((item) => /* @__PURE__ */ jsx52(
                 DropdownMenuItem,
                 {
                   asChild: true,
                   className: "cursor-pointer rounded-sm px-3 py-2 text-[12px] text-gray-800 hover:bg-gray-100",
-                  children: /* @__PURE__ */ jsx51(Link5, { href: item.url || "#", children: item.header })
+                  children: /* @__PURE__ */ jsx52(Link5, { href: item.url || "#", onClick: (e) => handleBuilderExit(e, item.url || "#"), children: item.header })
                 },
                 item.id
               )) })
             ] }, i);
           }
-          return /* @__PURE__ */ jsx51(
+          return /* @__PURE__ */ jsx52(
             DropdownMenuItem,
             {
               asChild: true,
               className: "cursor-pointer rounded-sm px-3 py-2 text-[13px] text-gray-800 hover:bg-gray-100",
-              children: /* @__PURE__ */ jsx51(Link5, { href: tab.url || "#", children: tab.header })
+              children: /* @__PURE__ */ jsx52(Link5, { href: tab.url || "#", onClick: (e) => handleBuilderExit(e, tab.url || "#"), children: tab.header })
             },
             i
           );
@@ -28978,55 +29125,84 @@ var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode }) => {
   ] });
   const forceMobile = canvasMode ? canvasMode === "mobile" || canvasMode === "tablet" : void 0;
   const forceDesktop = canvasMode ? canvasMode === "desktop" : void 0;
-  return /* @__PURE__ */ jsxs29("div", { className, style, children: [
-    forceDesktop !== void 0 ? forceDesktop && /* @__PURE__ */ jsx51("div", { className: "hidden md:flex", children: /* @__PURE__ */ jsx51("div", { className: `flex gap-2 ${verticalMenu ? "flex-col items-start" : "flex-row"}`, children: rawTabs.map(renderDesktopTab) }) }) : /* @__PURE__ */ jsx51("div", { className: "hidden md:flex", children: /* @__PURE__ */ jsx51("div", { className: `flex gap-2 ${verticalMenu ? "flex-col items-start" : "flex-row"}`, children: rawTabs.map(renderDesktopTab) }) }),
-    forceMobile !== void 0 ? forceMobile && /* @__PURE__ */ jsx51("div", { children: renderMobileMenu() }) : /* @__PURE__ */ jsx51("div", { className: "flex md:hidden", children: renderMobileMenu() })
+  return /* @__PURE__ */ jsxs30(Fragment18, { children: [
+    /* @__PURE__ */ jsxs30("div", { className, style, children: [
+      forceDesktop !== void 0 ? forceDesktop && /* @__PURE__ */ jsx52("div", { className: "hidden md:flex", children: /* @__PURE__ */ jsx52("div", { className: `flex gap-2 ${verticalMenu ? "flex-col items-start" : "flex-row"}`, children: rawTabs.map(renderDesktopTab) }) }) : /* @__PURE__ */ jsx52("div", { className: "hidden md:flex", children: /* @__PURE__ */ jsx52("div", { className: `flex gap-2 ${verticalMenu ? "flex-col items-start" : "flex-row"}`, children: rawTabs.map(renderDesktopTab) }) }),
+      forceMobile !== void 0 ? forceMobile && /* @__PURE__ */ jsx52("div", { children: renderMobileMenu() }) : /* @__PURE__ */ jsx52("div", { className: "flex md:hidden", children: renderMobileMenu() })
+    ] }),
+    /* @__PURE__ */ jsx52(Dialog, { open: showExitDialog, onOpenChange: setShowExitDialog, children: /* @__PURE__ */ jsxs30(DialogContent, { className: "bg-[#fff]", children: [
+      /* @__PURE__ */ jsxs30(DialogHeader, { children: [
+        /* @__PURE__ */ jsx52(DialogTitle, { children: "Exit Builder?" }),
+        /* @__PURE__ */ jsx52(DialogDescription, { children: "You are about to leave the builder. Any unsaved changes may be lost." })
+      ] }),
+      /* @__PURE__ */ jsxs30(DialogFooter, { children: [
+        /* @__PURE__ */ jsx52(Button, { className: "cursor-pointer bg-[#12715b] text-[#fff]", variant: "outline", onClick: () => setShowExitDialog(false), children: "Cancel" }),
+        /* @__PURE__ */ jsx52(Button, { className: "cursor-pointer border-[#12715b] border", onClick: confirmExit, children: "Yes, Exit" })
+      ] })
+    ] }) })
   ] });
 };
 var Tabs_default = Tabs;
 
 // src/components/Navigation/Stages/Stages.tsx
 import React8 from "react";
-import { jsx as jsx52, jsxs as jsxs30 } from "react/jsx-runtime";
-var StagesComponent = ({ stages, isShowBtn, buttonText, className, style }) => {
-  return /* @__PURE__ */ jsx52("div", { className, style, children: /* @__PURE__ */ jsxs30("div", { className: "flex items-center justify-between bg-red p-2 rounded-lg border border-gray-200 w-full", children: [
-    /* @__PURE__ */ jsx52("div", { className: "flex items-center", children: /* @__PURE__ */ jsx52("button", { className: "p-2 hover:bg-gray-100 rounded", children: /* @__PURE__ */ jsx52("svg", { className: "w-4 h-4 text-gray-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx52("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) }) }) }),
-    /* @__PURE__ */ jsx52("div", { className: "flex items-center flex-1 px-2 flex-wrap gap-2", children: stages?.length > 0 && stages?.map((stage, index) => /* @__PURE__ */ jsxs30(React8.Fragment, { children: [
-      /* @__PURE__ */ jsx52(
+import { jsx as jsx53, jsxs as jsxs31 } from "react/jsx-runtime";
+var StagesComponent = ({ stages, isShowBtn, buttonText, className, style, onStageChange }) => {
+  return /* @__PURE__ */ jsx53("div", { className, style, children: /* @__PURE__ */ jsxs31("div", { className: "flex items-center justify-between bg-red p-2 rounded-lg border border-gray-200 w-full", children: [
+    /* @__PURE__ */ jsx53("div", { className: "flex items-center", children: /* @__PURE__ */ jsx53("button", { className: "p-2 hover:bg-gray-100 rounded", children: /* @__PURE__ */ jsx53("svg", { className: "w-4 h-4 text-gray-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx53("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) }) }) }),
+    /* @__PURE__ */ jsx53("div", { className: "flex items-center flex-1 px-2 flex-wrap gap-2", children: stages?.length > 0 && stages?.map((stage, index) => /* @__PURE__ */ jsxs31(React8.Fragment, { children: [
+      /* @__PURE__ */ jsx53(
         "button",
         {
           className: `min-w-[120px] px-4 py-2 rounded-full text-sm font-medium transition-colors duration-200 whitespace-nowrap ${stage.isActive ? "bg-[#034486] text-white shadow-md" : "bg-white text-gray-700 hover:bg-gray-100 border border-gray-200"}`,
+          onClick: () => {
+            if (onStageChange) {
+              onStageChange(stage.id);
+            }
+          },
           children: stage.header
         }
       ),
-      index < stages.length - 1 && /* @__PURE__ */ jsx52("div", { className: "flex-shrink-0 w-3 h-px bg-gray-300" })
+      index < stages.length - 1 && /* @__PURE__ */ jsx53("div", { className: "flex-shrink-0 w-3 h-px bg-gray-300" })
     ] }, stage.id)) }),
-    isShowBtn && /* @__PURE__ */ jsx52("div", { className: "flex items-center", children: /* @__PURE__ */ jsx52("button", { className: "bg-[#034486] text-white px-6 py-2 rounded-lg text-sm font-medium transition-colors duration-200 shadow-sm", children: buttonText }) })
+    isShowBtn && /* @__PURE__ */ jsx53("div", { className: "flex items-center", children: /* @__PURE__ */ jsx53(
+      "button",
+      {
+        className: "bg-[#034486] text-white px-6 py-2 rounded-lg text-sm font-medium transition-colors duration-200 shadow-sm",
+        onClick: () => {
+          const activeStage = stages?.find((stage) => stage.isActive);
+          if (activeStage && onStageChange) {
+            onStageChange(activeStage.id);
+          }
+        },
+        children: buttonText
+      }
+    ) })
   ] }) });
 };
 var Stages_default = StagesComponent;
 
 // src/components/Navigation/Spacer/Spacer.tsx
-import { jsx as jsx53 } from "react/jsx-runtime";
+import { jsx as jsx54 } from "react/jsx-runtime";
 var Spacer = ({ className, style }) => {
-  return /* @__PURE__ */ jsx53("div", { className: `${className}`, style });
+  return /* @__PURE__ */ jsx54("div", { className: `${className}`, style });
 };
 var Spacer_default = Spacer;
 
 // src/components/Navigation/Profile/Profile.tsx
-import { jsx as jsx54, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx55, jsxs as jsxs32 } from "react/jsx-runtime";
 
 // src/components/Navigation/Notification/Notification.tsx
-import { jsx as jsx55, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx56, jsxs as jsxs33 } from "react/jsx-runtime";
 
 // src/components/Navigation/Logo/Logo.tsx
-import { jsx as jsx56 } from "react/jsx-runtime";
+import { jsx as jsx57 } from "react/jsx-runtime";
 
 // src/components/ui/avatar.tsx
 import * as React9 from "react";
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
-import { jsx as jsx57 } from "react/jsx-runtime";
-var Avatar = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx57(
+import { jsx as jsx58 } from "react/jsx-runtime";
+var Avatar = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx58(
   AvatarPrimitive.Root,
   {
     ref,
@@ -29038,7 +29214,7 @@ var Avatar = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
   }
 ));
 Avatar.displayName = AvatarPrimitive.Root.displayName;
-var AvatarImage = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx57(
+var AvatarImage = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx58(
   AvatarPrimitive.Image,
   {
     ref,
@@ -29047,7 +29223,7 @@ var AvatarImage = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 AvatarImage.displayName = AvatarPrimitive.Image.displayName;
-var AvatarFallback = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx57(
+var AvatarFallback = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx58(
   AvatarPrimitive.Fallback,
   {
     ref,
@@ -29063,8 +29239,10 @@ AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
 // src/components/Navigation/Navbar/Navbar.tsx
 import Link6 from "next/link";
 import Image3 from "next/image";
+import { useRouter as useRouter2 } from "next/navigation";
 import { DropdownMenuSeparator } from "@radix-ui/react-dropdown-menu";
-import { Fragment as Fragment18, jsx as jsx58, jsxs as jsxs33 } from "react/jsx-runtime";
+import { useCallback as useCallback3, useMemo as useMemo3, useState as useState6 } from "react";
+import { Fragment as Fragment19, jsx as jsx59, jsxs as jsxs34 } from "react/jsx-runtime";
 function Navbar({
   style,
   badgeType,
@@ -29077,77 +29255,131 @@ function Navbar({
   canvasMode = "desktop",
   list = [],
   profileMenu = [],
-  userName = "Guest User"
+  userName = "Guest User",
+  isBuilder = true,
+  source,
+  navList
 }) {
   const isMobileView = canvasMode === "mobile" || canvasMode === "tablet";
-  return /* @__PURE__ */ jsx58("nav", { className: "w-full border-b border-b-white dark:border-b-gray-800 dark:bg-gray-800 bg-white shadow-sm", style, children: /* @__PURE__ */ jsxs33("div", { className: "mx-auto flex max-w-[90%] items-center justify-between px-4 py-4", children: [
-    /* @__PURE__ */ jsx58(Link6, { href: "/", className: "flex items-center space-x-2", children: imageUrl ? /* @__PURE__ */ jsx58(Image3, { src: imageUrl, alt: altText, width: 200, height: 200 }) : /* @__PURE__ */ jsx58("span", { className: "font-semibold text-blue-700", children: "Logo" }) }),
-    !isMobileView && /* @__PURE__ */ jsx58("div", { className: "flex items-center space-x-6 sm:hidden md:flex", children: list.map((item) => /* @__PURE__ */ jsx58(
-      Link6,
+  const router = useRouter2();
+  const [showExitDialog, setShowExitDialog] = useState6(false);
+  const [pendingUrl, setPendingUrl] = useState6(null);
+  const handleBuilderExit = useCallback3(
+    (e, url) => {
+      if (isBuilder) {
+        e.preventDefault();
+        setPendingUrl(url);
+        setShowExitDialog(true);
+      }
+    },
+    [isBuilder]
+  );
+  const confirmExit = () => {
+    if (pendingUrl) {
+      setShowExitDialog(false);
+      router.push(pendingUrl);
+    }
+  };
+  const formatedMenu = useMemo3(() => {
+    if (source === "state" && navList && navList.length) {
+      return navList.map((i) => ({ ...i, header: i.name || "Menu" }));
+    }
+    return list || [];
+  }, [source, navList]);
+  return /* @__PURE__ */ jsxs34(Fragment19, { children: [
+    /* @__PURE__ */ jsx59(
+      "nav",
       {
-        href: item.url || "#",
-        className: "text-sm font-medium dark:text-white text-gray-600 hover:text-gray-900 transition-colors",
-        children: item.header
-      },
-      item.id
-    )) }),
-    /* @__PURE__ */ jsxs33("div", { className: "flex items-center space-x-3", children: [
-      !isMobileView ? /* @__PURE__ */ jsx58("div", { className: "flex-1 px-6", children: /* @__PURE__ */ jsxs33("div", { className: "relative w-full max-w-md border border-gray-300 rounded-md", children: [
-        /* @__PURE__ */ jsx58(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 dark:text-white text-gray-400" }),
-        /* @__PURE__ */ jsx58(Input, { placeholder: "Search", className: "pl-9 text-gray-400" })
-      ] }) }) : /* @__PURE__ */ jsx58(
-        Button,
-        {
-          variant: "ghost",
-          size: "icon",
-          className: "border border-gray-400",
-          children: /* @__PURE__ */ jsx58(Search, { className: "h-5 w-5 text-gray-400" })
-        }
-      ),
-      /* @__PURE__ */ jsxs33("div", { className: "relative bg-[#E9E9E9] dark:bg-gray-700 rounded-md", children: [
-        /* @__PURE__ */ jsx58(Button, { variant: "ghost", size: "icon", children: /* @__PURE__ */ jsx58(Bell, { className: "h-5 w-5 text-[#1C1B1F] dark:text-gray-400" }) }),
-        badgeType === "number" && !(hideBadgeWhenZero && badgeCount === 0) && Number(badgeCount) > 0 ? /* @__PURE__ */ jsx58("span", { className: "absolute -top-1 -right-1 flex h-4 w-4 items-center justify-center rounded-full bg-red-500 text-[10px] text-white leading-8", children: badgeCount }) : /* @__PURE__ */ jsx58("span", { className: "absolute -top-1 -right-1 flex h-2 w-2 items-center justify-center rounded-full bg-red-500" })
-      ] }),
-      /* @__PURE__ */ jsxs33(DropdownMenu, { children: [
-        /* @__PURE__ */ jsx58(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs33("div", { className: "flex items-center space-x-2", children: [
-          !isMobileView && showName && /* @__PURE__ */ jsx58("h4", { className: "text-[#000000] dark:text-gray-300 text-[13px] font-[500] mb-0", children: userName }),
-          !isMobileView ? /* @__PURE__ */ jsxs33(Fragment18, { children: [
-            /* @__PURE__ */ jsx58(Avatar, { className: "cursor-pointer h-8 w-8 text-gray-900", children: profileType === "avatar" ? /* @__PURE__ */ jsx58(
-              AvatarImage,
-              {
-                src: "/images/appbuilder/toolset/profile.svg",
-                alt: "Profile"
-              }
-            ) : /* @__PURE__ */ jsx58("div", { className: "w-8 h-8 bg-[#12715b] rounded-full text-[#fff] text-center text-[11px] flex items-center justify-center", children: userName && getInitials(userName) }) }),
-            /* @__PURE__ */ jsx58(
-              Button,
-              {
-                variant: "ghost",
-                size: "icon",
-                className: "text-gray-900 md:hidden dark:invert",
-                children: /* @__PURE__ */ jsx58(Menu, { className: "h-6 w-6" })
-              }
-            )
-          ] }) : /* @__PURE__ */ jsx58(
-            Button,
+        className: "w-full border-b border-b-white dark:border-b-gray-800 dark:bg-gray-800 bg-white shadow-sm",
+        style,
+        children: /* @__PURE__ */ jsxs34("div", { className: "mx-auto flex max-w-[90%] items-center justify-between px-4 py-4", children: [
+          /* @__PURE__ */ jsx59(
+            Link6,
             {
-              variant: "ghost",
-              size: "icon",
-              className: "text-gray-900 dark:invert",
-              children: /* @__PURE__ */ jsx58(Menu, { className: "h-6 w-6" })
+              href: "/",
+              onClick: (e) => handleBuilderExit(e, "/"),
+              className: "flex items-center space-x-2",
+              children: imageUrl ? /* @__PURE__ */ jsx59(Image3, { src: imageUrl, alt: altText, width: 200, height: 200 }) : /* @__PURE__ */ jsx59("span", { className: "font-semibold text-blue-700", children: "Logo" })
             }
-          )
-        ] }) }),
-        /* @__PURE__ */ jsxs33(DropdownMenuContent, { align: "end", className: "bg-white dark:bg-gray-800", children: [
-          profileMenu && profileMenu.length > 0 && /* @__PURE__ */ jsx58(Fragment18, { children: profileMenu.map((item) => /* @__PURE__ */ jsx58(DropdownMenuItem, { className: "text-black dark:invert", children: /* @__PURE__ */ jsx58(Link6, { href: item.url || "#", children: item.header }) }, item.id)) }),
-          /* @__PURE__ */ jsxs33("div", { className: "md:hidden", children: [
-            /* @__PURE__ */ jsx58(DropdownMenuSeparator, {}),
-            list && list.length > 0 && /* @__PURE__ */ jsx58(Fragment18, { children: list.map((item) => /* @__PURE__ */ jsx58(DropdownMenuItem, { className: "text-black dark:invert", children: /* @__PURE__ */ jsx58(Link6, { href: item.url || "#", children: item.header }) }, item.id)) })
+          ),
+          !isMobileView && /* @__PURE__ */ jsx59("div", { className: "flex items-center space-x-6 sm:hidden md:flex", children: formatedMenu.map((item) => /* @__PURE__ */ jsx59(
+            Link6,
+            {
+              href: item.url || "#",
+              onClick: (e) => handleBuilderExit(e, item.url),
+              className: "text-sm font-medium dark:text-white text-gray-600 hover:text-gray-900 transition-colors",
+              children: item.header
+            },
+            item.id
+          )) }),
+          /* @__PURE__ */ jsxs34("div", { className: "flex items-center space-x-3", children: [
+            !isMobileView ? /* @__PURE__ */ jsx59("div", { className: "flex-1 px-6", children: /* @__PURE__ */ jsxs34("div", { className: "relative w-full max-w-md border border-gray-300 rounded-md", children: [
+              /* @__PURE__ */ jsx59(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 dark:text-white text-gray-400" }),
+              /* @__PURE__ */ jsx59(Input, { placeholder: "Search", className: "pl-9 text-gray-400" })
+            ] }) }) : /* @__PURE__ */ jsx59(Button, { variant: "ghost", size: "icon", className: "border border-gray-400", children: /* @__PURE__ */ jsx59(Search, { className: "h-5 w-5 text-gray-400" }) }),
+            /* @__PURE__ */ jsxs34("div", { className: "relative bg-[#E9E9E9] dark:bg-gray-700 rounded-md", children: [
+              /* @__PURE__ */ jsx59(Button, { variant: "ghost", size: "icon", children: /* @__PURE__ */ jsx59(Bell, { className: "h-5 w-5 text-[#1C1B1F] dark:text-gray-400" }) }),
+              badgeType === "number" && !(hideBadgeWhenZero && badgeCount === 0) && Number(badgeCount) > 0 ? /* @__PURE__ */ jsx59("span", { className: "absolute -top-1 -right-1 flex h-4 w-4 items-center justify-center rounded-full bg-red-500 text-[10px] text-white leading-8", children: badgeCount }) : /* @__PURE__ */ jsx59("span", { className: "absolute -top-1 -right-1 flex h-2 w-2 items-center justify-center rounded-full bg-red-500" })
+            ] }),
+            /* @__PURE__ */ jsxs34(DropdownMenu, { children: [
+              /* @__PURE__ */ jsx59(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs34("div", { className: "flex items-center space-x-2", children: [
+                !isMobileView && showName && /* @__PURE__ */ jsx59("h4", { className: "text-[#000000] dark:text-gray-300 text-[13px] font-[500] mb-0", children: userName }),
+                !isMobileView ? /* @__PURE__ */ jsxs34(Fragment19, { children: [
+                  /* @__PURE__ */ jsx59(Avatar, { className: "cursor-pointer h-8 w-8 text-gray-900", children: profileType === "avatar" ? /* @__PURE__ */ jsx59(
+                    AvatarImage,
+                    {
+                      src: "/images/appbuilder/toolset/profile.svg",
+                      alt: "Profile"
+                    }
+                  ) : /* @__PURE__ */ jsx59("div", { className: "w-8 h-8 bg-[#12715b] rounded-full text-[#fff] text-center text-[11px] flex items-center justify-center", children: userName && getInitials(userName) }) }),
+                  /* @__PURE__ */ jsx59(
+                    Button,
+                    {
+                      variant: "ghost",
+                      size: "icon",
+                      className: "text-gray-900 md:hidden dark:invert",
+                      children: /* @__PURE__ */ jsx59(Menu, { className: "h-6 w-6" })
+                    }
+                  )
+                ] }) : /* @__PURE__ */ jsx59(Button, { variant: "ghost", size: "icon", className: "text-gray-900 dark:invert", children: /* @__PURE__ */ jsx59(Menu, { className: "h-6 w-6" }) })
+              ] }) }),
+              /* @__PURE__ */ jsxs34(DropdownMenuContent, { align: "end", className: "bg-white dark:bg-gray-800", children: [
+                profileMenu && profileMenu.length > 0 && /* @__PURE__ */ jsx59(Fragment19, { children: profileMenu.map((item) => /* @__PURE__ */ jsx59(DropdownMenuItem, { className: "text-black dark:invert", children: /* @__PURE__ */ jsx59(
+                  Link6,
+                  {
+                    href: item.url || "#",
+                    onClick: (e) => handleBuilderExit(e, item.url),
+                    children: item.header
+                  }
+                ) }, item.id)) }),
+                /* @__PURE__ */ jsxs34("div", { className: "md:hidden", children: [
+                  /* @__PURE__ */ jsx59(DropdownMenuSeparator, {}),
+                  formatedMenu && formatedMenu.length > 0 && /* @__PURE__ */ jsx59(Fragment19, { children: formatedMenu.map((item) => /* @__PURE__ */ jsx59(DropdownMenuItem, { className: "text-black dark:invert", children: /* @__PURE__ */ jsx59(
+                    Link6,
+                    {
+                      href: item.url || "#",
+                      onClick: (e) => handleBuilderExit(e, item.url),
+                      children: item.header
+                    }
+                  ) }, item.id)) })
+                ] })
+              ] })
+            ] })
           ] })
         ] })
+      }
+    ),
+    /* @__PURE__ */ jsx59(Dialog, { open: showExitDialog, onOpenChange: setShowExitDialog, children: /* @__PURE__ */ jsxs34(DialogContent, { className: "bg-[#fff]", children: [
+      /* @__PURE__ */ jsxs34(DialogHeader, { children: [
+        /* @__PURE__ */ jsx59(DialogTitle, { children: "Exit Builder?" }),
+        /* @__PURE__ */ jsx59(DialogDescription, { children: "You are about to leave the builder. Any unsaved changes may be lost." })
+      ] }),
+      /* @__PURE__ */ jsxs34(DialogFooter, { children: [
+        /* @__PURE__ */ jsx59(Button, { className: "cursor-pointer bg-[#12715b] text-[#fff]", variant: "outline", onClick: () => setShowExitDialog(false), children: "Cancel" }),
+        /* @__PURE__ */ jsx59(Button, { className: "cursor-pointer border-[#12715b] border", onClick: confirmExit, children: "Yes, Exit" })
       ] })
-    ] })
-  ] }) });
+    ] }) })
+  ] });
 }
 
 // src/components/Chart/BarChart.tsx
@@ -29164,35 +29396,35 @@ import {
   ResponsiveContainer,
   Legend
 } from "recharts";
-import { jsx as jsx59, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx60, jsxs as jsxs35 } from "react/jsx-runtime";
 var ChartComponent = ({ className, style, loading, ...props }) => {
   const data = Array.isArray(props.data) ? props.data : [];
   const chartType = props.chartType || "bar";
   const legendsPosition = props.legendsPosition === "middle" || props.legendsPosition === "bottom" ? props.legendsPosition : "top";
   if (loading || data.length === 0) {
-    return /* @__PURE__ */ jsx59(
+    return /* @__PURE__ */ jsx60(
       "div",
       {
         className: `flex items-center justify-center w-full h-[300px] md:h-[400px] bg-gray-50 animate-pulse rounded-lg ${className}`,
         style,
-        children: /* @__PURE__ */ jsx59("div", { className: "text-gray-400 text-sm md:text-base", children: loading ? "Loading chart report..." : "No data available to display the chart." })
+        children: /* @__PURE__ */ jsx60("div", { className: "text-gray-400 text-sm md:text-base", children: loading ? "Loading chart report..." : "No data available to display the chart." })
       }
     );
   }
-  return /* @__PURE__ */ jsx59("div", { className: `${className} h-[400px]`, style, children: /* @__PURE__ */ jsx59(ResponsiveContainer, { width: "100%", height: "100%", children: chartType === "bar" ? /* @__PURE__ */ jsxs34(BarChart, { data, title: "Leads", desc: "content", children: [
-    /* @__PURE__ */ jsx59(CartesianGrid, { strokeDasharray: "3 3" }),
-    /* @__PURE__ */ jsx59(XAxis, { dataKey: "name" }),
-    /* @__PURE__ */ jsx59(YAxis, {}),
-    /* @__PURE__ */ jsx59(Tooltip, { formatter: (value) => `${value}k` }),
-    /* @__PURE__ */ jsx59(Legend, { verticalAlign: legendsPosition, align: "center" }),
-    /* @__PURE__ */ jsx59(
+  return /* @__PURE__ */ jsx60("div", { className: `${className} h-[400px]`, style, children: /* @__PURE__ */ jsx60(ResponsiveContainer, { width: "100%", height: "100%", children: chartType === "bar" ? /* @__PURE__ */ jsxs35(BarChart, { data, title: "Leads", desc: "content", children: [
+    /* @__PURE__ */ jsx60(CartesianGrid, { strokeDasharray: "3 3" }),
+    /* @__PURE__ */ jsx60(XAxis, { dataKey: "name" }),
+    /* @__PURE__ */ jsx60(YAxis, {}),
+    /* @__PURE__ */ jsx60(Tooltip, { formatter: (value) => `${value}k` }),
+    /* @__PURE__ */ jsx60(Legend, { verticalAlign: legendsPosition, align: "center" }),
+    /* @__PURE__ */ jsx60(
       Bar,
       {
         dataKey: "value",
         fill: "#00695C",
         radius: [6, 6, 0, 0],
         isAnimationActive: false,
-        children: data.map((entry, index) => /* @__PURE__ */ jsx59(
+        children: data.map((entry, index) => /* @__PURE__ */ jsx60(
           "rect",
           {
             fill: entry.color || "#00695C"
@@ -29201,16 +29433,16 @@ var ChartComponent = ({ className, style, loading, ...props }) => {
         ))
       }
     )
-  ] }) : /* @__PURE__ */ jsxs34(AreaChart, { data, children: [
-    /* @__PURE__ */ jsx59("defs", { children: /* @__PURE__ */ jsxs34("linearGradient", { id: "colorCount", x1: "0", y1: "0", x2: "0", y2: "1", children: [
-      /* @__PURE__ */ jsx59("stop", { offset: "5%", stopColor: "#00695C", stopOpacity: 0.8 }),
-      /* @__PURE__ */ jsx59("stop", { offset: "95%", stopColor: "#00695C", stopOpacity: 0 })
+  ] }) : /* @__PURE__ */ jsxs35(AreaChart, { data, children: [
+    /* @__PURE__ */ jsx60("defs", { children: /* @__PURE__ */ jsxs35("linearGradient", { id: "colorCount", x1: "0", y1: "0", x2: "0", y2: "1", children: [
+      /* @__PURE__ */ jsx60("stop", { offset: "5%", stopColor: "#00695C", stopOpacity: 0.8 }),
+      /* @__PURE__ */ jsx60("stop", { offset: "95%", stopColor: "#00695C", stopOpacity: 0 })
     ] }) }),
-    /* @__PURE__ */ jsx59(CartesianGrid, { strokeDasharray: "3 3" }),
-    /* @__PURE__ */ jsx59(XAxis, { dataKey: "name" }),
-    /* @__PURE__ */ jsx59(YAxis, {}),
-    /* @__PURE__ */ jsx59(Tooltip, { formatter: (value) => `${value}k` }),
-    /* @__PURE__ */ jsx59(
+    /* @__PURE__ */ jsx60(CartesianGrid, { strokeDasharray: "3 3" }),
+    /* @__PURE__ */ jsx60(XAxis, { dataKey: "name" }),
+    /* @__PURE__ */ jsx60(YAxis, {}),
+    /* @__PURE__ */ jsx60(Tooltip, { formatter: (value) => `${value}k` }),
+    /* @__PURE__ */ jsx60(
       Area,
       {
         type: "monotone",
@@ -29226,7 +29458,7 @@ var ChartComponent = ({ className, style, loading, ...props }) => {
 var BarChart_default = React10.memo(ChartComponent);
 
 // src/components/Chart/PieChart.tsx
-import React11, { useMemo as useMemo3 } from "react";
+import React11, { useEffect as useEffect22, useMemo as useMemo4, useState as useState7 } from "react";
 import {
   PieChart,
   Pie,
@@ -29235,7 +29467,7 @@ import {
   Tooltip as Tooltip2,
   LabelList
 } from "recharts";
-import { Fragment as Fragment19, jsx as jsx60, jsxs as jsxs35 } from "react/jsx-runtime";
+import { Fragment as Fragment20, jsx as jsx61, jsxs as jsxs36 } from "react/jsx-runtime";
 var getRandomColor = () => {
   const palette = [
     "#2563eb",
@@ -29255,51 +29487,57 @@ var DonutChart = ({ className, style, loading, ...props }) => {
   const showLegends = props.showLegends ?? true;
   const labelType = props.labelType || "inside";
   const canvasMode = props.canvasMode;
-  const data = useMemo3(() => {
+  const data = useMemo4(() => {
     if (!Array.isArray(props.data)) return [];
     return props.data.map((item) => ({ ...item, color: getRandomColor() }));
   }, [props.data]);
-  const total = useMemo3(() => data.reduce((sum, d) => sum + d.value, 0), [data]);
+  const total = useMemo4(() => data.reduce((sum, d) => sum + d.value, 0), [data]);
   const forceMobile = canvasMode === "mobile" || canvasMode === "tablet";
-  const renderLegends = useMemo3(() => {
+  const [mounted, setMounted] = useState7(false);
+  useEffect22(() => {
+    const timeout = setTimeout(() => setMounted(true), 100);
+    return () => clearTimeout(timeout);
+  }, []);
+  const renderLegends = useMemo4(() => {
     if (!showLegends) return null;
-    return /* @__PURE__ */ jsx60(Fragment19, { children: data.map((d) => /* @__PURE__ */ jsxs35(
+    return /* @__PURE__ */ jsx61(Fragment20, { children: data.map((d) => /* @__PURE__ */ jsxs36(
       "div",
       {
         className: "flex items-center space-x-2 rounded-md border border-gray-200 px-3 py-2 w-[48%] md:w-auto",
         children: [
-          /* @__PURE__ */ jsx60(
+          /* @__PURE__ */ jsx61(
             "span",
             {
               className: "inline-block w-[16px] h-[16px] rounded",
               style: { backgroundColor: d.color }
             }
           ),
-          /* @__PURE__ */ jsx60("span", { className: "text-[#000000] text-[12px] md:text-[13px] font-[500]", children: d.name })
+          /* @__PURE__ */ jsx61("span", { className: "text-[#000000] text-[12px] md:text-[13px] font-[500]", children: d.name })
         ]
       },
       d.name
     )) });
   }, [data, showLegends]);
+  if (!mounted) return null;
   if (loading || data.length === 0) {
-    return /* @__PURE__ */ jsx60(
+    return /* @__PURE__ */ jsx61(
       "div",
       {
         className: `flex items-center justify-center w-full h-[300px] md:h-[400px] bg-gray-50 animate-pulse rounded-lg ${className}`,
         style,
-        children: /* @__PURE__ */ jsx60("div", { className: "text-gray-400 text-sm md:text-base", children: loading ? "Loading chart report..." : "No data available to display the chart." })
+        children: /* @__PURE__ */ jsx61("div", { className: "text-gray-400 text-sm md:text-base", children: loading ? "Loading chart report..." : "No data available to display the chart." })
       }
     );
   }
-  return /* @__PURE__ */ jsxs35(
+  return /* @__PURE__ */ jsxs36(
     "div",
     {
       className: `relative flex flex-col items-center ${className}`,
       style,
       children: [
-        /* @__PURE__ */ jsxs35("div", { className: "relative w-full md:w-[70%] h-[300px] md:h-[400px] flex items-center justify-center", children: [
-          /* @__PURE__ */ jsx60(ResponsiveContainer2, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs35(PieChart, { children: [
-            /* @__PURE__ */ jsxs35(
+        /* @__PURE__ */ jsxs36("div", { className: "relative w-full md:w-[70%] h-[300px] md:h-[400px] flex items-center justify-center", children: [
+          /* @__PURE__ */ jsx61(ResponsiveContainer2, { width: "99%", height: "100%", children: /* @__PURE__ */ jsxs36(PieChart, { children: [
+            /* @__PURE__ */ jsxs36(
               Pie,
               {
                 data,
@@ -29311,8 +29549,8 @@ var DonutChart = ({ className, style, loading, ...props }) => {
                 labelLine: false,
                 isAnimationActive: false,
                 children: [
-                  data.map((entry, index) => /* @__PURE__ */ jsx60(Cell, { fill: entry.color }, `cell-${index}`)),
-                  /* @__PURE__ */ jsx60(
+                  data.map((entry, index) => /* @__PURE__ */ jsx61(Cell, { fill: entry.color }, `cell-${index}`)),
+                  /* @__PURE__ */ jsx61(
                     LabelList,
                     {
                       dataKey: "value",
@@ -29325,14 +29563,14 @@ var DonutChart = ({ className, style, loading, ...props }) => {
                 ]
               }
             ),
-            /* @__PURE__ */ jsx60(
+            /* @__PURE__ */ jsx61(
               Tooltip2,
               {
                 formatter: (value, name) => [`${value}k`, name]
               }
             )
           ] }) }),
-          /* @__PURE__ */ jsxs35(
+          /* @__PURE__ */ jsxs36(
             "div",
             {
               className: `absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 ${forceMobile ? "text-2xl" : "text-4xl"} font-bold text-[#000]`,
@@ -29343,7 +29581,7 @@ var DonutChart = ({ className, style, loading, ...props }) => {
             }
           )
         ] }),
-        /* @__PURE__ */ jsx60("div", { className: "flex flex-wrap justify-center gap-2 mt-6 w-full md:w-auto", children: renderLegends })
+        /* @__PURE__ */ jsx61("div", { className: "flex flex-wrap justify-center gap-2 mt-6 w-full md:w-auto", children: renderLegends })
       ]
     }
   );
@@ -29351,10 +29589,10 @@ var DonutChart = ({ className, style, loading, ...props }) => {
 var PieChart_default = React11.memo(DonutChart);
 
 // src/components/Blocks/EmailComposer.tsx
-import { jsx as jsx61, jsxs as jsxs36 } from "react/jsx-runtime";
+import { jsx as jsx62, jsxs as jsxs37 } from "react/jsx-runtime";
 function EmailComposer({ className, style, to, setTo, showCc, setShowCc, showBcc, setShowBcc, cc, setCc, bcc, setBcc, subject, setSubject, body, setBody }) {
-  return /* @__PURE__ */ jsx61("div", { className, style, children: /* @__PURE__ */ jsxs36("div", { className: "border rounded-md shadow bg-[#fff] p-4 mx-auto z-[50] relative", children: [
-    /* @__PURE__ */ jsx61("div", { className: "mb-3", children: /* @__PURE__ */ jsx61(
+  return /* @__PURE__ */ jsx62("div", { className, style, children: /* @__PURE__ */ jsxs37("div", { className: "border rounded-md shadow bg-[#fff] p-4 mx-auto z-[50] relative", children: [
+    /* @__PURE__ */ jsx62("div", { className: "mb-3", children: /* @__PURE__ */ jsx62(
       "input",
       {
         type: "email",
@@ -29363,8 +29601,8 @@ function EmailComposer({ className, style, to, setTo, showCc, setShowCc, showBcc
         required: true
       }
     ) }),
-    /* @__PURE__ */ jsx61("div", { className: "mb-3", children: /* @__PURE__ */ jsxs36("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx61(
+    /* @__PURE__ */ jsx62("div", { className: "mb-3", children: /* @__PURE__ */ jsxs37("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx62(
         "input",
         {
           type: "email",
@@ -29375,7 +29613,7 @@ function EmailComposer({ className, style, to, setTo, showCc, setShowCc, showBcc
           required: true
         }
       ),
-      !showCc && /* @__PURE__ */ jsx61(
+      !showCc && /* @__PURE__ */ jsx62(
         "button",
         {
           onClick: () => setShowCc?.(true),
@@ -29383,7 +29621,7 @@ function EmailComposer({ className, style, to, setTo, showCc, setShowCc, showBcc
           children: "Cc"
         }
       ),
-      !showBcc && /* @__PURE__ */ jsx61(
+      !showBcc && /* @__PURE__ */ jsx62(
         "button",
         {
           onClick: () => setShowBcc?.(true),
@@ -29392,7 +29630,7 @@ function EmailComposer({ className, style, to, setTo, showCc, setShowCc, showBcc
         }
       )
     ] }) }),
-    showCc && /* @__PURE__ */ jsx61("div", { className: "mb-3", children: /* @__PURE__ */ jsx61(
+    showCc && /* @__PURE__ */ jsx62("div", { className: "mb-3", children: /* @__PURE__ */ jsx62(
       "input",
       {
         type: "text",
@@ -29402,7 +29640,7 @@ function EmailComposer({ className, style, to, setTo, showCc, setShowCc, showBcc
         className: "w-full flex-1 border-2 rounded-md h-[40px] px-3 focus:outline-none border-[#E9E9E9] text-[#383838]"
       }
     ) }),
-    showBcc && /* @__PURE__ */ jsx61("div", { className: "mb-3", children: /* @__PURE__ */ jsx61(
+    showBcc && /* @__PURE__ */ jsx62("div", { className: "mb-3", children: /* @__PURE__ */ jsx62(
       "input",
       {
         type: "text",
@@ -29412,7 +29650,7 @@ function EmailComposer({ className, style, to, setTo, showCc, setShowCc, showBcc
         className: "w-full flex-1 border-2 rounded-md h-[40px] px-3 focus:outline-none border-[#E9E9E9] text-[#383838]"
       }
     ) }),
-    /* @__PURE__ */ jsx61("div", { className: "mb-3", children: /* @__PURE__ */ jsx61(
+    /* @__PURE__ */ jsx62("div", { className: "mb-3", children: /* @__PURE__ */ jsx62(
       "input",
       {
         type: "text",
@@ -29422,11 +29660,11 @@ function EmailComposer({ className, style, to, setTo, showCc, setShowCc, showBcc
         className: "w-full flex-1 border-2 rounded-md h-[40px] px-3 focus:outline-none border-[#E9E9E9] text-[#383838]"
       }
     ) }),
-    /* @__PURE__ */ jsx61("div", { className: "mb-4", children: /* @__PURE__ */ jsx61(MyEditor, { value: body, onChange: setBody }) }),
-    /* @__PURE__ */ jsxs36("div", { className: "flex justify-end gap-2", children: [
-      /* @__PURE__ */ jsx61("button", { className: "px-4 py-2 rounded-md text-gray-600 hover:bg-gray-100", children: "Discard" }),
-      /* @__PURE__ */ jsx61("button", { className: "px-4 py-2 rounded-md border text-[#12715B] border-[#12715B]", children: "Reset" }),
-      /* @__PURE__ */ jsx61("button", { className: "px-4 py-2 rounded-md bg-[#12715B] text-white", children: "Send" })
+    /* @__PURE__ */ jsx62("div", { className: "mb-4", children: /* @__PURE__ */ jsx62(MyEditor, { value: body, onChange: setBody }) }),
+    /* @__PURE__ */ jsxs37("div", { className: "flex justify-end gap-2", children: [
+      /* @__PURE__ */ jsx62("button", { className: "px-4 py-2 rounded-md text-gray-600 hover:bg-gray-100", children: "Discard" }),
+      /* @__PURE__ */ jsx62("button", { className: "px-4 py-2 rounded-md border text-[#12715B] border-[#12715B]", children: "Reset" }),
+      /* @__PURE__ */ jsx62("button", { className: "px-4 py-2 rounded-md bg-[#12715B] text-white", children: "Send" })
     ] })
   ] }) });
 }
@@ -29471,10 +29709,10 @@ function showSonnerToast({
 // src/components/ui/sonner.tsx
 import { useTheme } from "next-themes";
 import { Toaster as Sonner } from "sonner";
-import { jsx as jsx62 } from "react/jsx-runtime";
+import { jsx as jsx63 } from "react/jsx-runtime";
 var Toaster = ({ ...props }) => {
   const { theme = "system" } = useTheme();
-  return /* @__PURE__ */ jsx62(
+  return /* @__PURE__ */ jsx63(
     Sonner,
     {
       theme,