@algorithm-shift/design-system 1.3.105 → 1.3.106

package/dist/index.js

@@ -36,7 +36,7 @@ __export(src_exports, {
   BarChart: () => BarChart_default,
   Breadcrumb: () => Breadcrumb_default,
   Button: () => Button_default,
-  ButtonGroup: () => ButtonGroup,
+  ButtonGroup: () => ButtonGroup_default,
   Checkbox: () => Checkbox_default,
   Container: () => Container_default,
   DatePicker: () => DateTimePicker,
@@ -675,6 +675,7 @@ var Breadcrumb = ({ list = [], className, style }) => {
 var Breadcrumb_default = Breadcrumb;
 
 // src/components/Basic/ButtonGroup/ButtonGroup.tsx
+var import_react8 = require("react");
 var import_lucide_react3 = require("lucide-react");
 var import_link2 = __toESM(require("next/link"));
 
@@ -796,53 +797,223 @@ function DropdownMenuSubContent({
 
 // src/components/Basic/ButtonGroup/ButtonGroup.tsx
 var import_jsx_runtime17 = require("react/jsx-runtime");
-function ButtonGroup({ style, textContent, className, list = [], onGroupItemClick, onClick }) {
-  const data = Array.isArray(list) ? list : [];
-  const bgColor = style?.backgroundColor || "";
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "inline-flex rounded-md overflow-hidden border border-teal-200 bg-teal-700 items-center focus:ring-0", style: { backgroundColor: bgColor }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+var ButtonGroup = ({
+  textContent,
+  // Dropdown items
+  data = [],
+  dataKey = "id",
+  dataLabel = "name",
+  // Styling
+  className,
+  style,
+  variant = "default",
+  buttonSize = "default",
+  buttonVariant,
+  dropdownVariant,
+  // Layout
+  orientation = "horizontal",
+  showDropdownIcon = true,
+  dropdownIcon,
+  alignDropdown = "end",
+  // Behavior
+  onItemSelect,
+  onClick,
+  // Advanced
+  disabled = false,
+  loading = false,
+  emptyStateText = "No items available",
+  maxItems,
+  showSeparator = false,
+  ...restProps
+}) => {
+  const dataSource = (0, import_react8.useMemo)(() => {
+    if (data) {
+      if (Array.isArray(data)) {
+        return data.length > 0 ? data : [];
+      }
+      return [data];
+    }
+    return [];
+  }, [data]);
+  const formattedItems = (0, import_react8.useMemo)(() => {
+    if (!dataSource.length) return [];
+    return dataSource.map((item, index) => {
+      if (typeof item === "string") {
+        return {
+          id: index,
+          value: item,
+          label: item,
+          name: item
+        };
+      }
+      const value = item[dataKey] ?? item.id ?? item.value ?? index;
+      const label = item[dataLabel] ?? item.label ?? item.name ?? String(value);
+      const url = item.url ?? item.href;
+      return {
+        ...item,
+        id: item.id ?? value,
+        value,
+        label,
+        name: label,
+        url
+      };
+    });
+  }, [dataSource, dataKey, dataLabel]);
+  const displayItems = (0, import_react8.useMemo)(() => {
+    if (maxItems && maxItems > 0) {
+      return formattedItems.slice(0, maxItems);
+    }
+    return formattedItems;
+  }, [formattedItems, maxItems]);
+  const buttonText = textContent || "Button";
+  const mainButtonVariant = buttonVariant ?? variant;
+  const dropdownButtonVariant = dropdownVariant ?? variant;
+  const handleMainButtonClick = (e) => {
+    if (disabled || loading) return;
+    onClick?.(e);
+  };
+  const handleItemClick = (item, index) => {
+    if (item.disabled) return;
+    if (item.onClick) {
+      item.onClick();
+    }
+    onItemSelect?.({
+      item,
+      index
+    });
+  };
+  const renderDropdownIcon = () => {
+    if (!showDropdownIcon) return null;
+    if (dropdownIcon) {
+      return dropdownIcon;
+    }
+    return orientation === "horizontal" ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react3.ChevronDown, { className: "w-4 h-4" }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react3.MoreVertical, { className: "w-4 h-4" });
+  };
+  const containerClasses = cn(
+    "inline-flex items-center",
+    orientation === "horizontal" ? "flex-row" : "flex-col h-full",
+    "rounded-md overflow-hidden",
+    "border border-border",
+    "bg-background",
+    "focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2"
+  );
+  const mainButtonClasses = cn(
+    className,
+    orientation === "horizontal" ? "rounded-none border-l-0 border-t-0 border-r last:border-r-0" : "rounded-none border-t-0 border-b last:border-b-0",
+    "focus:ring-0 focus-visible:ring-0"
+  );
+  const dropdownButtonClasses = cn(
+    "rounded-none",
+    "focus:ring-0 focus-visible:ring-0",
+    "shadow-none"
+  );
+  if (!displayItems.length) {
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: containerClasses, style, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       Button,
       {
-        className: `rounded-none border-r px-4 py-2 text-whit focus:ring-0 ${className || ""}`,
-        style: { backgroundColor: bgColor },
-        onClick: (e) => onClick?.(e),
-        children: textContent || "Button"
+        variant: mainButtonVariant,
+        size: buttonSize,
+        className: mainButtonClasses,
+        onClick: handleMainButtonClick,
+        disabled: disabled || loading,
+        style,
+        children: loading ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react3.Loader2, { className: "w-4 h-4 animate-spin" }),
+          buttonText
+        ] }) : buttonText
       }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(DropdownMenu, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-        Button,
-        {
-          className: "rounded-none bg-teal-700 px-4 py-2 text-white ring-0 shadow-none hover:bg-teal-600 focus:ring-0",
-          "aria-label": "Open Dropdown",
-          style: { backgroundColor: bgColor },
-          children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react3.ChevronDown, { className: "w-4 h-4" })
-        }
-      ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-        DropdownMenuContent,
-        {
-          align: "end",
-          className: "bg-white min-w-[120px]",
-          children: data.map((item) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-            DropdownMenuItem,
+    ) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+    "div",
+    {
+      className: containerClasses,
+      style,
+      ...restProps,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          Button,
+          {
+            variant: mainButtonVariant,
+            size: buttonSize,
+            className: mainButtonClasses,
+            onClick: handleMainButtonClick,
+            disabled: disabled || loading,
+            style,
+            children: loading ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "animate-spin", children: "\u23F3" }),
+              buttonText
+            ] }) : buttonText
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(DropdownMenu, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+            Button,
             {
-              className: "text-black",
-              onSelect: () => onGroupItemClick?.({
-                item
-              }),
-              children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_link2.default, { href: item.url || "#", children: item.header })
-            },
-            item.id
-          ))
-        }
-      )
-    ] })
-  ] });
-}
+              variant: dropdownButtonVariant,
+              size: buttonSize,
+              className: dropdownButtonClasses,
+              disabled: disabled || loading,
+              "aria-label": "Open dropdown menu",
+              children: renderDropdownIcon()
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+            DropdownMenuContent,
+            {
+              align: alignDropdown,
+              className: "min-w-[120px] max-h-[300px] overflow-y-auto",
+              children: [
+                displayItems.map((item, index) => {
+                  if (item.separator || showSeparator && index > 0 && index % 3 === 0) {
+                    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(DropdownMenuSeparator, {}, `separator-${index}`);
+                  }
+                  const itemContent = item.url || item.href ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                    import_link2.default,
+                    {
+                      href: item.url || item.href || "#",
+                      className: "flex items-center w-full",
+                      onClick: (e) => {
+                        if (item.disabled) {
+                          e.preventDefault();
+                          return;
+                        }
+                        handleItemClick(item, index);
+                      },
+                      children: item.label || item.name || String(item.value)
+                    }
+                  ) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "flex items-center w-full", children: item.label || item.name || String(item.value) });
+                  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                    DropdownMenuItem,
+                    {
+                      className: cn(
+                        "cursor-pointer",
+                        item.disabled && "opacity-50 cursor-not-allowed"
+                      ),
+                      disabled: item.disabled,
+                      onSelect: () => {
+                        if (!item.disabled) {
+                          handleItemClick(item, index);
+                        }
+                      },
+                      children: itemContent
+                    },
+                    item.id ?? item.value ?? index
+                  );
+                }),
+                displayItems.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(DropdownMenuItem, { disabled: true, className: "text-muted-foreground", children: emptyStateText })
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+var ButtonGroup_default = ButtonGroup;
 
 // src/components/Basic/Icon/Icon.tsx
-var import_react8 = require("react");
+var import_react9 = require("react");
 var SolidIcons = __toESM(require("@fortawesome/free-solid-svg-icons"));
 var RegularIcons = __toESM(require("@fortawesome/free-regular-svg-icons"));
 var BrandIcons = __toESM(require("@fortawesome/free-brands-svg-icons"));
@@ -863,7 +1034,7 @@ function Icon(props) {
     pulse = false,
     ...rest
   } = props;
-  const [dynamicIcon, setDynamicIcon] = (0, import_react8.useState)(icon || null);
+  const [dynamicIcon, setDynamicIcon] = (0, import_react9.useState)(icon || null);
   async function loadFAIcon(iconName, prefix2) {
     const pkgMap = {
       fas: SolidIcons,
@@ -873,7 +1044,7 @@ function Icon(props) {
     const basePackage = pkgMap[prefix2] ?? SolidIcons;
     return basePackage[iconName] ?? null;
   }
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (icon && iconSet === "fontawesome" && prefix) {
       loadFAIcon(icon, prefix).then((ico) => setDynamicIcon(ico));
     }
@@ -952,7 +1123,7 @@ function Icon(props) {
 }
 
 // src/components/Inputs/TextInput/TextInput.tsx
-var import_react9 = require("react");
+var import_react10 = require("react");
 
 // src/components/ui/input.tsx
 var import_jsx_runtime19 = require("react/jsx-runtime");
@@ -981,7 +1152,7 @@ var TextInput = ({ className, style, ...props }) => {
   const isDisabled = props.isDisabled ?? false;
   const isReadonly = props.isReadonly ?? false;
   const isAutocomplete = props.isAutocomplete ?? false;
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (props.value !== void 0) {
       const e = { target: { value: props.value }, type: "change" };
       handleChange?.(e);
@@ -1023,7 +1194,7 @@ var TextInput = ({ className, style, ...props }) => {
 var TextInput_default = TextInput;
 
 // src/components/Inputs/NumberInput/NumberInput.tsx
-var import_react10 = require("react");
+var import_react11 = require("react");
 var import_jsx_runtime21 = require("react/jsx-runtime");
 var NumberInput = ({ className, style, ...props }) => {
   const placeholder = props.placeholder ?? "Placeholder text";
@@ -1031,7 +1202,7 @@ var NumberInput = ({ className, style, ...props }) => {
   const isDisabled = props.isDisabled ?? false;
   const isReadonly = props.isReadonly ?? false;
   const isAutocomplete = props.isAutocomplete ?? false;
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     if (props.value !== void 0) {
       const e = { target: { value: props.value }, type: "change" };
       handleChange?.(e);
@@ -1073,7 +1244,7 @@ var NumberInput = ({ className, style, ...props }) => {
 var NumberInput_default = NumberInput;
 
 // src/components/Inputs/EmailInput/EmailInput.tsx
-var import_react11 = require("react");
+var import_react12 = require("react");
 var import_jsx_runtime22 = require("react/jsx-runtime");
 var EmailInput = ({ className, style, ...props }) => {
   const placeholder = props.placeholder ?? "Placeholder text";
@@ -1081,7 +1252,7 @@ var EmailInput = ({ className, style, ...props }) => {
   const isDisabled = props.isDisabled ?? false;
   const isReadonly = props.isReadonly ?? false;
   const isAutocomplete = props.isAutocomplete ?? false;
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     if (props.value !== void 0) {
       const e = { target: { value: props.value }, type: "change" };
       handleChange?.(e);
@@ -1123,7 +1294,7 @@ var EmailInput = ({ className, style, ...props }) => {
 var EmailInput_default = EmailInput;
 
 // src/components/Inputs/PasswordInput/PasswordInput.tsx
-var import_react12 = require("react");
+var import_react13 = require("react");
 var import_jsx_runtime23 = require("react/jsx-runtime");
 var PasswordInput = ({ className, style, ...props }) => {
   const placeholder = props.placeholder ?? "Placeholder text";
@@ -1131,7 +1302,7 @@ var PasswordInput = ({ className, style, ...props }) => {
   const isDisabled = props.isDisabled ?? false;
   const isReadonly = props.isReadonly ?? false;
   const isAutocomplete = props.isAutocomplete ?? false;
-  (0, import_react12.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     if (props.value !== void 0) {
       const e = { target: { value: props.value }, type: "change" };
       handleChange?.(e);
@@ -1173,7 +1344,7 @@ var PasswordInput = ({ className, style, ...props }) => {
 var PasswordInput_default = PasswordInput;
 
 // src/components/Inputs/Textarea/Textarea.tsx
-var import_react13 = require("react");
+var import_react14 = require("react");
 
 // src/components/ui/textarea.tsx
 var import_jsx_runtime24 = require("react/jsx-runtime");
@@ -1199,7 +1370,7 @@ var Textarea2 = ({ className, style, ...props }) => {
   const isDisabled = props.isDisabled ?? false;
   const isReadonly = props.isReadonly ?? false;
   const isAutocomplete = props.isAutocomplete ?? false;
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     if (props.value !== void 0) {
       const e = { target: { value: props.value }, type: "change" };
       handleChange?.(e);
@@ -1233,7 +1404,7 @@ var Textarea2 = ({ className, style, ...props }) => {
 var Textarea_default = Textarea2;
 
 // src/components/Inputs/UrlInput/UrlInput.tsx
-var import_react14 = require("react");
+var import_react15 = require("react");
 var import_jsx_runtime26 = require("react/jsx-runtime");
 var UrlInput = ({ className, style, ...props }) => {
   const placeholder = props.placeholder ?? "Placeholder text";
@@ -1241,7 +1412,7 @@ var UrlInput = ({ className, style, ...props }) => {
   const isDisabled = props.isDisabled ?? false;
   const isReadonly = props.isReadonly ?? false;
   const isAutocomplete = props.isAutocomplete ?? false;
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     if (props.value !== void 0) {
       const e = { target: { value: props.value }, type: "change" };
       handleChange?.(e);
@@ -1286,7 +1457,7 @@ var UrlInput = ({ className, style, ...props }) => {
 var UrlInput_default = UrlInput;
 
 // src/components/Inputs/Checkbox/Checkbox.tsx
-var import_react15 = require("react");
+var import_react16 = require("react");
 
 // src/components/ui/checkbox.tsx
 var CheckboxPrimitive = __toESM(require("@radix-ui/react-checkbox"));
@@ -1352,7 +1523,7 @@ var CheckboxInput = ({ className, style, ...props }) => {
     }
     return false;
   };
-  (0, import_react15.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     if (props.value) {
       handleChange(formatValue(props.value));
     }
@@ -1379,7 +1550,7 @@ var CheckboxInput = ({ className, style, ...props }) => {
 var Checkbox_default = CheckboxInput;
 
 // src/components/Inputs/RadioInput/RadioInput.tsx
-var import_react16 = require("react");
+var import_react17 = require("react");
 
 // src/components/ui/radio-group.tsx
 var RadioGroupPrimitive = __toESM(require("@radix-ui/react-radio-group"));
@@ -1440,7 +1611,7 @@ var RadioInput = ({
     value: item[dataKey || "value"],
     label: item[dataLabel || "label"]
   }));
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (props.value !== void 0) {
       handleChange?.(props.value);
     }
@@ -1470,7 +1641,7 @@ var RadioInput = ({
 var RadioInput_default = RadioInput;
 
 // src/components/Inputs/MultiCheckbox/MultiCheckbox.tsx
-var import_react17 = require("react");
+var import_react18 = require("react");
 var import_jsx_runtime32 = require("react/jsx-runtime");
 function MultiCheckbox({
   apiUrl,
@@ -1489,11 +1660,11 @@ function MultiCheckbox({
   onUncheckItems,
   ...props
 }) {
-  const [options, setOptions] = (0, import_react17.useState)([]);
-  const [page, setPage] = (0, import_react17.useState)(1);
-  const [hasMore, setHasMore] = (0, import_react17.useState)(true);
-  const [pageLoading, setPageLoading] = (0, import_react17.useState)(false);
-  const loadMoreRef = (0, import_react17.useRef)(null);
+  const [options, setOptions] = (0, import_react18.useState)([]);
+  const [page, setPage] = (0, import_react18.useState)(1);
+  const [hasMore, setHasMore] = (0, import_react18.useState)(true);
+  const [pageLoading, setPageLoading] = (0, import_react18.useState)(false);
+  const loadMoreRef = (0, import_react18.useRef)(null);
   const normalizeInput = (val) => {
     if (!val) return [];
     if (Array.isArray(val)) return val;
@@ -1515,7 +1686,7 @@ function MultiCheckbox({
         return arr;
     }
   };
-  const fetchApiPage = (0, import_react17.useCallback)(async () => {
+  const fetchApiPage = (0, import_react18.useCallback)(async () => {
     if (!apiUrl) return [];
     const client = axiosInstance || (await import("axios")).default;
     const res = await client.get(apiUrl, {
@@ -1527,7 +1698,7 @@ function MultiCheckbox({
     }
     return Array.isArray(res.data) ? res.data : [];
   }, [apiUrl, axiosInstance, page, pageSize]);
-  const mapData = (0, import_react17.useCallback)(
+  const mapData = (0, import_react18.useCallback)(
     (items) => {
       if (Array.isArray(items) === false) return [];
       return (items || []).map((item) => ({
@@ -1537,7 +1708,7 @@ function MultiCheckbox({
     },
     [dataKey, dataLabel]
   );
-  const loadPage = (0, import_react17.useCallback)(async () => {
+  const loadPage = (0, import_react18.useCallback)(async () => {
     if (source !== "api") return;
     if (pageLoading) return;
     setPageLoading(true);
@@ -1552,7 +1723,7 @@ function MultiCheckbox({
       setPageLoading(false);
     }
   }, [source, pageLoading, fetchApiPage, mapData, pageSize]);
-  (0, import_react17.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     if (source === "api") {
       setOptions([]);
       setPage(1);
@@ -1562,10 +1733,10 @@ function MultiCheckbox({
       setHasMore(false);
     }
   }, [source, JSON.stringify(data)]);
-  (0, import_react17.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     if (source === "api") loadPage();
   }, [page, source]);
-  (0, import_react17.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     if (source !== "api") return;
     if (!hasMore || pageLoading) return;
     const observer = new IntersectionObserver((entries) => {
@@ -1629,10 +1800,10 @@ function MultiCheckbox({
 }
 
 // src/components/Inputs/RichText/RichText.tsx
-var import_react19 = require("react");
+var import_react20 = require("react");
 
 // src/components/Global/TinyMceEditor.tsx
-var import_react18 = require("react");
+var import_react19 = require("react");
 var import_tinymce_react = require("@tinymce/tinymce-react");
 var import_jsx_runtime33 = require("react/jsx-runtime");
 function MyEditor({
@@ -1640,7 +1811,7 @@ function MyEditor({
   onChange,
   isDefault
 }) {
-  const editorRef = (0, import_react18.useRef)(null);
+  const editorRef = (0, import_react19.useRef)(null);
   function stripOuterP(html) {
     const trimmedHtml = html.trim();
     if (!trimmedHtml) return "";
@@ -1652,7 +1823,7 @@ function MyEditor({
     }
     return trimmedHtml;
   }
-  const isDefaultToolbar = (0, import_react18.useMemo)(() => {
+  const isDefaultToolbar = (0, import_react19.useMemo)(() => {
     let toolbar = "undo redo | formatselect | bold italic forecolor";
     if (isDefault) {
       toolbar = "undo redo | blocks | bold italic forecolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help";
@@ -1705,7 +1876,7 @@ function MyEditor({
 // src/components/Inputs/RichText/RichText.tsx
 var import_jsx_runtime34 = require("react/jsx-runtime");
 function RichText({ className, style, ...props }) {
-  (0, import_react19.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     if (props.value !== void 0) {
       handleChange?.(props.value);
     }
@@ -1730,7 +1901,7 @@ function RichText({ className, style, ...props }) {
 }
 
 // src/components/Inputs/Dropdown/Dropdown.tsx
-var import_react22 = require("react");
+var import_react23 = require("react");
 
 // src/components/ui/select.tsx
 var SelectPrimitive = __toESM(require("@radix-ui/react-select"));
@@ -1860,23 +2031,23 @@ function SelectScrollDownButton({
 }
 
 // src/components/Inputs/Dropdown/LazyDropdown.tsx
-var import_react21 = require("react");
+var import_react22 = require("react");
 var import_lucide_react7 = require("lucide-react");
 
 // src/hooks/useLazyDropdown.ts
-var import_react20 = require("react");
+var import_react21 = require("react");
 var import_axios2 = __toESM(require("axios"));
 function useLazyDropdown(config) {
-  const [options, setOptions] = (0, import_react20.useState)([]);
-  const [page, setPage] = (0, import_react20.useState)(1);
-  const [hasMore, setHasMore] = (0, import_react20.useState)(true);
-  const [loading, setLoading] = (0, import_react20.useState)(false);
-  const [searchTerm, setSearchTerm] = (0, import_react20.useState)("");
-  const debounceTimer = (0, import_react20.useRef)(null);
-  const allDataRef = (0, import_react20.useRef)([]);
-  const configRef = (0, import_react20.useRef)(config);
+  const [options, setOptions] = (0, import_react21.useState)([]);
+  const [page, setPage] = (0, import_react21.useState)(1);
+  const [hasMore, setHasMore] = (0, import_react21.useState)(true);
+  const [loading, setLoading] = (0, import_react21.useState)(false);
+  const [searchTerm, setSearchTerm] = (0, import_react21.useState)("");
+  const debounceTimer = (0, import_react21.useRef)(null);
+  const allDataRef = (0, import_react21.useRef)([]);
+  const configRef = (0, import_react21.useRef)(config);
   const PAGE_SIZE = config.pageSize || 10;
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     setOptions([]);
     setPage(1);
     setHasMore(true);
@@ -1889,7 +2060,7 @@ function useLazyDropdown(config) {
       return true;
     });
   };
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     configRef.current = config;
   }, [config]);
   function getValueByPath2(obj, path) {
@@ -1897,7 +2068,7 @@ function useLazyDropdown(config) {
     const parts = path.split(/\./);
     return parts.reduce((acc, key) => acc?.[key], obj);
   }
-  const transformToOptions = (0, import_react20.useCallback)((data) => {
+  const transformToOptions = (0, import_react21.useCallback)((data) => {
     if (!data || !Array.isArray(data)) return [];
     const cfg = configRef.current;
     return data.map((item) => {
@@ -1935,7 +2106,7 @@ function useLazyDropdown(config) {
       params: cleaned
     };
   }
-  const fetchApiData = (0, import_react20.useCallback)(async (pageNum, term) => {
+  const fetchApiData = (0, import_react21.useCallback)(async (pageNum, term) => {
     if (!configRef.current.apiUrl) return [];
     const limit = PAGE_SIZE;
     const params = { page: pageNum, limit };
@@ -1960,7 +2131,7 @@ function useLazyDropdown(config) {
     }
     return [];
   }, [PAGE_SIZE, transformToOptions]);
-  const loadPage = (0, import_react20.useCallback)(async (pageNum, term) => {
+  const loadPage = (0, import_react21.useCallback)(async (pageNum, term) => {
     const cfg = configRef.current;
     if (!cfg.enabled) return;
     setLoading(true);
@@ -2037,7 +2208,7 @@ function useLazyDropdown(config) {
       setLoading(false);
     }
   };
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     const cfg = configRef.current;
     if (!cfg.enabled || !cfg.value || cfg.dataSource !== "api" || !cfg.apiUrl) return;
     if (cfg.isMultiSelect) {
@@ -2050,28 +2221,28 @@ function useLazyDropdown(config) {
     }
     fetchValueItem();
   }, [JSON.stringify(config.value), config.dataKey, config.apiUrl, config.dataSource]);
-  const loadMore = (0, import_react20.useCallback)(() => {
+  const loadMore = (0, import_react21.useCallback)(() => {
     if (!loading && hasMore) {
       loadPage(page + 1, searchTerm);
     }
   }, [loading, hasMore, page, searchTerm]);
-  const search = (0, import_react20.useCallback)((term) => {
+  const search = (0, import_react21.useCallback)((term) => {
     setSearchTerm(term);
     if (debounceTimer.current) clearTimeout(debounceTimer.current);
     debounceTimer.current = setTimeout(() => {
       loadPage(1, term);
     }, 300);
   }, []);
-  const reset = (0, import_react20.useCallback)(() => {
+  const reset = (0, import_react21.useCallback)(() => {
     setSearchTerm("");
     setPage(1);
   }, []);
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     if (config.initialData?.length) {
       allDataRef.current = config.initialData;
     }
   }, [config.initialData]);
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     if (config.fetchOnMount) loadPage(1, "");
     return () => {
       if (debounceTimer.current) clearTimeout(debounceTimer.current);
@@ -2137,10 +2308,10 @@ function LazySelectDropdown({
   enforceStrictQueryParams = false,
   ...props
 }) {
-  const [isOpen, setIsOpen] = (0, import_react21.useState)(false);
-  const [searchTerm, setSearchTerm] = (0, import_react21.useState)("");
-  const dropdownRef = (0, import_react21.useRef)(null);
-  const observerTarget = (0, import_react21.useRef)(null);
+  const [isOpen, setIsOpen] = (0, import_react22.useState)(false);
+  const [searchTerm, setSearchTerm] = (0, import_react22.useState)("");
+  const dropdownRef = (0, import_react22.useRef)(null);
+  const observerTarget = (0, import_react22.useRef)(null);
   const {
     options: lazyOptions,
     loading,
@@ -2162,8 +2333,8 @@ function LazySelectDropdown({
     axiosInstance,
     enforceStrictQueryParams
   });
-  const selectedOption = (0, import_react21.useMemo)(() => lazyOptions.find((opt) => opt.value === value), [lazyOptions, value]);
-  (0, import_react21.useEffect)(() => {
+  const selectedOption = (0, import_react22.useMemo)(() => lazyOptions.find((opt) => opt.value === value), [lazyOptions, value]);
+  (0, import_react22.useEffect)(() => {
     const handleClickOutside = (e) => {
       if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
         setIsOpen(false);
@@ -2173,7 +2344,7 @@ function LazySelectDropdown({
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, []);
-  (0, import_react21.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     if (!isOpen || !hasMore || loading) return;
     const observer = new IntersectionObserver(
       (entries) => {
@@ -2317,7 +2488,7 @@ var Dropdown = ({ className, style, ...props }) => {
   const isEditable = props.isEditable ?? true;
   const isDisabled = props.isDisabled ?? false;
   const isReadonly = props.isReadonly ?? false;
-  (0, import_react22.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     if (props.value !== void 0) {
       handleChange(props.value);
     }
@@ -2376,7 +2547,7 @@ var Dropdown = ({ className, style, ...props }) => {
 var Dropdown_default = Dropdown;
 
 // src/components/Inputs/SwitchToggle/SwitchToggle.tsx
-var import_react23 = require("react");
+var import_react24 = require("react");
 
 // src/components/ui/switch.tsx
 var SwitchPrimitive = __toESM(require("@radix-ui/react-switch"));
@@ -2412,7 +2583,7 @@ var import_jsx_runtime39 = require("react/jsx-runtime");
 var SwitchToggle = ({ className, style, ...props }) => {
   const isEditable = props.isEditable ?? true;
   const isDisabled = props.isDisabled ?? false;
-  (0, import_react23.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     if (props.value !== void 0) {
       handleChange?.(props.value);
     }
@@ -2439,7 +2610,7 @@ var SwitchToggle = ({ className, style, ...props }) => {
 var SwitchToggle_default = SwitchToggle;
 
 // src/components/Inputs/PhoneInput/PhoneInput.tsx
-var import_react24 = require("react");
+var import_react25 = require("react");
 var import_react_international_phone = require("react-international-phone");
 var import_style = require("react-international-phone/style.css");
 var import_jsx_runtime40 = require("react/jsx-runtime");
@@ -2454,7 +2625,7 @@ var PhoneInput = ({ className, style, ...props }) => {
   const placeholder = props.placeholder ?? "Enter phone number";
   const isEditable = props.isEditable ?? true;
   const isDisabled = props.isDisabled ?? false;
-  (0, import_react24.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     if (props.value !== void 0) {
       const normalized = ensureIndiaCode(props.value);
       handleChange?.(normalized);
@@ -2501,7 +2672,7 @@ var PhoneInput = ({ className, style, ...props }) => {
 var PhoneInput_default = PhoneInput;
 
 // src/components/Inputs/SearchInput/SearchInput.tsx
-var import_react25 = require("react");
+var import_react26 = require("react");
 var import_jsx_runtime41 = require("react/jsx-runtime");
 var SearchInput = ({ className, style, ...props }) => {
   const placeholder = props.placeholder ?? "Placeholder text";
@@ -2509,7 +2680,7 @@ var SearchInput = ({ className, style, ...props }) => {
   const isDisabled = props.isDisabled ?? false;
   const isReadonly = props.isReadonly ?? false;
   const isAutocomplete = props.isAutocomplete ?? false;
-  (0, import_react25.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     if (props.value !== void 0) {
       const e = { target: { value: props.value }, type: "change" };
       handleChange?.(e);
@@ -2551,11 +2722,11 @@ var SearchInput = ({ className, style, ...props }) => {
 var SearchInput_default = SearchInput;
 
 // src/components/Inputs/FileInput/FileInput.tsx
-var import_react26 = require("react");
+var import_react27 = require("react");
 var import_jsx_runtime42 = require("react/jsx-runtime");
 var FileInput = ({ className, style, ...props }) => {
   const placeholder = props.placeholder ?? "Placeholder text";
-  (0, import_react26.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     if (props.value !== void 0) {
       const e = { target: { value: props.value }, type: "change" };
       handleChange?.(e);
@@ -2595,12 +2766,12 @@ var FileInput = ({ className, style, ...props }) => {
 var FileInput_default = FileInput;
 
 // src/components/Inputs/DatePicker/DatePicker.tsx
-var React7 = __toESM(require("react"));
+var React8 = __toESM(require("react"));
 var import_date_fns = require("date-fns");
 var import_lucide_react9 = require("lucide-react");
 
 // src/components/ui/calendar.tsx
-var React6 = __toESM(require("react"));
+var React7 = __toESM(require("react"));
 var import_lucide_react8 = require("lucide-react");
 var import_react_day_picker = require("react-day-picker");
 var import_jsx_runtime43 = require("react/jsx-runtime");
@@ -2756,8 +2927,8 @@ function CalendarDayButton({
   ...props
 }) {
   const defaultClassNames = (0, import_react_day_picker.getDefaultClassNames)();
-  const ref = React6.useRef(null);
-  React6.useEffect(() => {
+  const ref = React7.useRef(null);
+  React7.useEffect(() => {
     if (modifiers.focused) ref.current?.focus();
   }, [modifiers.focused]);
   return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
@@ -2851,25 +3022,25 @@ function DateTimePicker({
   const isAutocomplete = props.isAutocomplete ?? false;
   const minDate = resolveDate(minimumDate, customMinimumDate);
   const maxDate = resolveDate(maximumDate, customMaximumDate);
-  const [date, setDate] = React7.useState(() => {
+  const [date, setDate] = React8.useState(() => {
     if (!props.value) return void 0;
     const d = new Date(props.value);
     return isNaN(d.getTime()) ? void 0 : d;
   });
   const initialHours = date ? date.getHours() : 0;
   const initialMinutes = date ? date.getMinutes() : 0;
-  const [hours, setHours] = React7.useState(initialHours);
-  const [minutes, setMinutes] = React7.useState(initialMinutes);
-  const [amPm, setAmPm] = React7.useState("AM");
-  const displayHours = React7.useMemo(() => {
+  const [hours, setHours] = React8.useState(initialHours);
+  const [minutes, setMinutes] = React8.useState(initialMinutes);
+  const [amPm, setAmPm] = React8.useState("AM");
+  const displayHours = React8.useMemo(() => {
     if (hours === 0) return 12;
     if (hours > 12) return hours - 12;
     return hours;
   }, [hours]);
-  React7.useEffect(() => {
+  React8.useEffect(() => {
     setAmPm(hours >= 12 ? "PM" : "AM");
   }, [hours]);
-  React7.useEffect(() => {
+  React8.useEffect(() => {
     if (!props.value) {
       setDate(void 0);
       return;
@@ -2881,8 +3052,8 @@ function DateTimePicker({
       setMinutes(d.getMinutes());
     }
   }, [props.value]);
-  const [year, setYear] = React7.useState(date ? date.getFullYear() : (/* @__PURE__ */ new Date()).getFullYear());
-  React7.useEffect(() => {
+  const [year, setYear] = React8.useState(date ? date.getFullYear() : (/* @__PURE__ */ new Date()).getFullYear());
+  React8.useEffect(() => {
     if (!date) return;
     const newDate = new Date(date);
     newDate.setFullYear(year);
@@ -2985,7 +3156,7 @@ function DateTimePicker({
   for (let y = currentYear - 50; y <= currentYear + 10; y++) {
     yearOptions.push(y);
   }
-  const displayValue = React7.useMemo(() => {
+  const displayValue = React8.useMemo(() => {
     if (!date) return "";
     try {
       if (mode === "date") return (0, import_date_fns.format)(date, "dd-MM-yyyy");
@@ -2996,11 +3167,11 @@ function DateTimePicker({
     }
   }, [date, mode]);
   const isInputDisabled = isDisabled || !isEditable;
-  const [calendarMonthState, setCalendarMonthState] = React7.useState(() => {
+  const [calendarMonthState, setCalendarMonthState] = React8.useState(() => {
     const currentMonth = (/* @__PURE__ */ new Date()).getMonth();
     return date ? new Date(date.getFullYear(), date.getMonth()) : new Date(year, currentMonth);
   });
-  React7.useEffect(() => {
+  React8.useEffect(() => {
     setCalendarMonthState(new Date(year, calendarMonthState.getMonth()));
   }, [year]);
   const handleToday = () => {
@@ -3146,18 +3317,18 @@ function DateTimePicker({
 }
 
 // src/components/Inputs/DateRange/DateRange.tsx
-var import_react27 = __toESM(require("react"));
+var import_react28 = __toESM(require("react"));
 var import_date_fns2 = require("date-fns");
 var import_jsx_runtime46 = require("react/jsx-runtime");
 var DateRange = ({ className, style, ...props }) => {
   const isDateRange = (val) => !!val && val.from instanceof Date;
-  const [date, setDate] = import_react27.default.useState(
+  const [date, setDate] = import_react28.default.useState(
     isDateRange(props.value) ? props.value : {
       from: /* @__PURE__ */ new Date(),
       to: (0, import_date_fns2.addDays)(/* @__PURE__ */ new Date(), 7)
     }
   );
-  (0, import_react27.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     if (props.value && isDateRange(props.value)) {
       handleChange?.(props.value);
     }
@@ -3204,7 +3375,7 @@ var DateRange = ({ className, style, ...props }) => {
 var DateRange_default = DateRange;
 
 // src/components/Inputs/TextInputGroup/TextInputGroup.tsx
-var import_react28 = require("react");
+var import_react29 = require("react");
 var import_jsx_runtime47 = require("react/jsx-runtime");
 var TextInputGroup = ({ className, style, prepend, append, ...props }) => {
   const placeholder = props.placeholder ?? "Placeholder text";
@@ -3212,7 +3383,7 @@ var TextInputGroup = ({ className, style, prepend, append, ...props }) => {
   const isDisabled = props.isDisabled ?? false;
   const isReadonly = props.isReadonly ?? false;
   const isAutocomplete = props.isAutocomplete ?? false;
-  (0, import_react28.useEffect)(() => {
+  (0, import_react29.useEffect)(() => {
     if (props.value !== void 0) {
       const e = { target: { value: props.value }, type: "change" };
       handleChange?.(e);
@@ -3265,7 +3436,7 @@ var TextInputGroup = ({ className, style, prepend, append, ...props }) => {
 var TextInputGroup_default = TextInputGroup;
 
 // src/components/Inputs/Multiselect/MultiSelect.tsx
-var import_react29 = require("react");
+var import_react30 = require("react");
 var import_lucide_react10 = require("lucide-react");
 var import_jsx_runtime48 = require("react/jsx-runtime");
 function LazyMultiSelectDropdown({
@@ -3286,10 +3457,10 @@ function LazyMultiSelectDropdown({
   outputFormat = "array",
   ...props
 }) {
-  const [isOpen, setIsOpen] = (0, import_react29.useState)(false);
-  const [searchTerm, setSearchTerm] = (0, import_react29.useState)("");
-  const dropdownRef = (0, import_react29.useRef)(null);
-  const observerTarget = (0, import_react29.useRef)(null);
+  const [isOpen, setIsOpen] = (0, import_react30.useState)(false);
+  const [searchTerm, setSearchTerm] = (0, import_react30.useState)("");
+  const dropdownRef = (0, import_react30.useRef)(null);
+  const observerTarget = (0, import_react30.useRef)(null);
   const ensureUnique = (arr) => {
     return Array.from(new Set(arr));
   };
@@ -3338,14 +3509,14 @@ function LazyMultiSelectDropdown({
         return unique;
     }
   };
-  const selectedOptions = (0, import_react29.useMemo)(() => {
+  const selectedOptions = (0, import_react30.useMemo)(() => {
     return normalizedValue.map((id2) => {
       const fromLazy = lazyOptions.find((opt) => opt.value === id2);
       if (fromLazy) return fromLazy;
       return { value: id2, label: id2 };
     });
   }, [normalizedValue, lazyOptions]);
-  (0, import_react29.useEffect)(() => {
+  (0, import_react30.useEffect)(() => {
     const handleClick = (e) => {
       if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
         setIsOpen(false);
@@ -3354,7 +3525,7 @@ function LazyMultiSelectDropdown({
     document.addEventListener("mousedown", handleClick);
     return () => document.removeEventListener("mousedown", handleClick);
   }, []);
-  (0, import_react29.useEffect)(() => {
+  (0, import_react30.useEffect)(() => {
     if (!isOpen || !hasMore || loading) return;
     const obs = new IntersectionObserver(
       (entries) => {
@@ -3488,7 +3659,7 @@ function LazyMultiSelectDropdown({
 }
 
 // src/components/ui/data-table.tsx
-var React10 = __toESM(require("react"));
+var React11 = __toESM(require("react"));
 var import_free_solid_svg_icons2 = require("@fortawesome/free-solid-svg-icons");
 var import_react_fontawesome3 = require("@fortawesome/react-fontawesome");
 var import_react_table2 = require("@tanstack/react-table");
@@ -3583,7 +3754,7 @@ function TableCell({ className, ...props }) {
 var import_react_table = require("@tanstack/react-table");
 
 // src/lib/table/cellRendererFactory.tsx
-var import_react30 = __toESM(require("react"));
+var import_react31 = __toESM(require("react"));
 var LucideIcons2 = __toESM(require("lucide-react"));
 var import_lucide_react11 = require("lucide-react");
 var import_image = __toESM(require("next/image"));
@@ -3671,9 +3842,9 @@ var getContrastColor = (bg) => {
 };
 var sanitizeValue = (val) => {
   if (val == null) return null;
-  if (import_react30.default.isValidElement(val)) return val;
+  if (import_react31.default.isValidElement(val)) return val;
   if (typeof val === "string" || typeof val === "number") return val;
-  if (Array.isArray(val)) return val.map((v, i) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_react30.default.Fragment, { children: sanitizeValue(v) }, i));
+  if (Array.isArray(val)) return val.map((v, i) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_react31.default.Fragment, { children: sanitizeValue(v) }, i));
   if (typeof val === "object") {
     if ("name" in val && typeof val.name === "string") return val.name;
     if ("label" in val && typeof val.label === "string") return val.label;
@@ -3930,10 +4101,10 @@ function DataTable({
   enableRowSelection = false,
   getRowSelection
 }) {
-  const [columnFilters, setColumnFilters] = React10.useState([]);
-  const [columnVisibility, setColumnVisibility] = React10.useState({});
-  const [manualSort, setManualSort] = React10.useState(null);
-  const [searchTerm, setSearchTerm] = React10.useState("");
+  const [columnFilters, setColumnFilters] = React11.useState([]);
+  const [columnVisibility, setColumnVisibility] = React11.useState({});
+  const [manualSort, setManualSort] = React11.useState(null);
+  const [searchTerm, setSearchTerm] = React11.useState("");
   const tableData = Array.isArray(data) ? data : [];
   const finalCols = [...columns];
   if (enableRowSelection) {
@@ -3959,8 +4130,8 @@ function DataTable({
     });
   }
   const dynamicCols = useDynamicColumns({ columns: finalCols, enableRowSelection });
-  const [rowSelection, setRowSelection] = React10.useState({});
-  const [localPageSize, setLocalPageSize] = React10.useState(pageSize);
+  const [rowSelection, setRowSelection] = React11.useState({});
+  const [localPageSize, setLocalPageSize] = React11.useState(pageSize);
   const table = (0, import_react_table2.useReactTable)({
     data: tableData,
     columns: dynamicCols,
@@ -4025,7 +4196,7 @@ function DataTable({
     onPageChange?.(currentPageIndex, newSize);
     setLocalPageSize(newSize);
   };
-  const pageSizeOptions = React10.useMemo(() => {
+  const pageSizeOptions = React11.useMemo(() => {
     const options = [5, 10, 20, 50, 100].filter((size) => size < totalRecords);
     if (options.length === 0) {
       options.push(5);
@@ -4584,7 +4755,7 @@ var CustomPagination = ({
 var Pagination_default = CustomPagination;
 
 // src/components/DataDisplay/HistoryTimeline/HistoryTimeline.tsx
-var import_react31 = require("react");
+var import_react32 = require("react");
 var import_lucide_react15 = require("lucide-react");
 
 // src/components/ui/accordion.tsx
@@ -4710,7 +4881,7 @@ var HistoryTimeline = ({
   createdAtKey,
   ...props
 }) => {
-  const data = (0, import_react31.useMemo)(() => {
+  const data = (0, import_react32.useMemo)(() => {
     if (Array.isArray(props.data)) {
       return props.data;
     }
@@ -4787,7 +4958,7 @@ var HistoryTimeline = ({
 var HistoryTimeline_default = HistoryTimeline;
 
 // src/components/Navigation/Tabs/Tabs.tsx
-var import_react32 = require("react");
+var import_react33 = require("react");
 var import_lucide_react17 = require("lucide-react");
 var import_link3 = __toESM(require("next/link"));
 var import_navigation2 = require("next/navigation");
@@ -4976,7 +5147,7 @@ function showConfirmToast({
 // src/components/Navigation/Tabs/Tabs.tsx
 var import_jsx_runtime59 = require("react/jsx-runtime");
 var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode, isBuilder = false, source, parentKey, menuNameKey, menuUrlKey, loading, bgActiveColor, textActiveColor }) => {
-  const [openIndex, setOpenIndex] = (0, import_react32.useState)(null);
+  const [openIndex, setOpenIndex] = (0, import_react33.useState)(null);
   const currentPathname = (0, import_navigation2.usePathname)();
   function groupMenus(menus = []) {
     const menuMap = /* @__PURE__ */ new Map();
@@ -5010,7 +5181,7 @@ var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode, isBuil
     });
     return sortMenus(rootMenus);
   }
-  const rawTabs = (0, import_react32.useMemo)(() => {
+  const rawTabs = (0, import_react33.useMemo)(() => {
     if (!Array.isArray(tabs)) return [];
     if (source === "manual") return Array.isArray(tabs) ? tabs : [];
     return groupMenus(tabs);
@@ -5040,9 +5211,9 @@ var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode, isBuil
     return tab.children.some((child) => isActive(child.url));
   };
   const router = (0, import_navigation2.useRouter)();
-  const [showExitDialog, setShowExitDialog] = (0, import_react32.useState)(false);
-  const [pendingUrl, setPendingUrl] = (0, import_react32.useState)(null);
-  const handleBuilderExit = (0, import_react32.useCallback)(
+  const [showExitDialog, setShowExitDialog] = (0, import_react33.useState)(false);
+  const [pendingUrl, setPendingUrl] = (0, import_react33.useState)(null);
+  const handleBuilderExit = (0, import_react33.useCallback)(
     (e, url) => {
       if (isBuilder) {
         e.preventDefault();
@@ -5209,7 +5380,7 @@ var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode, isBuil
 var Tabs_default = Tabs;
 
 // src/components/Navigation/Stages/Stages.tsx
-var import_react33 = __toESM(require("react"));
+var import_react34 = __toESM(require("react"));
 
 // src/components/ui/tooltip.tsx
 var TooltipPrimitive = __toESM(require("@radix-ui/react-tooltip"));
@@ -5278,11 +5449,11 @@ var StagesComponent = ({
   triggerOnClick = false,
   canvasMode = "desktop"
 }) => {
-  const [activeStage, setActiveStage] = (0, import_react33.useState)("");
-  const [isCompleted, setIsCompleted] = (0, import_react33.useState)(false);
-  const [activeChildStage, setActiveChildStage] = (0, import_react33.useState)(null);
-  const [activeRootStage, setActiveRootStage] = (0, import_react33.useState)(null);
-  (0, import_react33.useEffect)(() => {
+  const [activeStage, setActiveStage] = (0, import_react34.useState)("");
+  const [isCompleted, setIsCompleted] = (0, import_react34.useState)(false);
+  const [activeChildStage, setActiveChildStage] = (0, import_react34.useState)(null);
+  const [activeRootStage, setActiveRootStage] = (0, import_react34.useState)(null);
+  (0, import_react34.useEffect)(() => {
     if (currentStage) {
       setActiveStage(currentStage);
     } else {
@@ -5342,7 +5513,7 @@ var StagesComponent = ({
     }
     return { activeRoot: null, activeChild: null };
   };
-  (0, import_react33.useEffect)(() => {
+  (0, import_react34.useEffect)(() => {
     if (!currentStage || !Array.isArray(stages)) {
       setActiveRootStage(null);
       setActiveChildStage(null);
@@ -5404,7 +5575,7 @@ var StagesComponent = ({
                 }
               }
               const stageKey = typeof stage[dataKey] === "string" ? stage[dataKey] : JSON.stringify(stage[dataKey]);
-              return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_react33.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(Tooltip, { delayDuration: 500, disableHoverableContent: true, children: [
+              return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_react34.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(Tooltip, { delayDuration: 500, disableHoverableContent: true, children: [
                 /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
                   "button",
                   {
@@ -5473,17 +5644,17 @@ var import_jsx_runtime64 = require("react/jsx-runtime");
 var import_jsx_runtime65 = require("react/jsx-runtime");
 
 // src/components/Navigation/Navbar/Navbar.tsx
-var import_react34 = require("react");
+var import_react35 = require("react");
 var import_lucide_react18 = require("lucide-react");
 var import_image2 = __toESM(require("next/image"));
 var import_link4 = __toESM(require("next/link"));
 var import_navigation3 = require("next/navigation");
 
 // src/components/ui/avatar.tsx
-var React12 = __toESM(require("react"));
+var React13 = __toESM(require("react"));
 var AvatarPrimitive = __toESM(require("@radix-ui/react-avatar"));
 var import_jsx_runtime66 = require("react/jsx-runtime");
-var Avatar = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+var Avatar = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
   AvatarPrimitive.Root,
   {
     ref,
@@ -5495,7 +5666,7 @@ var Avatar = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ *
   }
 ));
 Avatar.displayName = AvatarPrimitive.Root.displayName;
-var AvatarImage = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+var AvatarImage = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
   AvatarPrimitive.Image,
   {
     ref,
@@ -5504,7 +5675,7 @@ var AvatarImage = React12.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 AvatarImage.displayName = AvatarPrimitive.Image.displayName;
-var AvatarFallback = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+var AvatarFallback = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
   AvatarPrimitive.Fallback,
   {
     ref,
@@ -5539,10 +5710,10 @@ function Navbar({
   onSearch
 }) {
   const router = (0, import_navigation3.useRouter)();
-  const [screenMode, setScreenMode] = (0, import_react34.useState)(
+  const [screenMode, setScreenMode] = (0, import_react35.useState)(
     canvasMode
   );
-  (0, import_react34.useEffect)(() => {
+  (0, import_react35.useEffect)(() => {
     const detectMode = () => {
       if (window.innerWidth < 640) setScreenMode("mobile");
       else if (window.innerWidth < 1024) setScreenMode("tablet");
@@ -5556,7 +5727,7 @@ function Navbar({
   const isMobile = mode === "mobile";
   const isTablet = mode === "tablet";
   const isDesktop = mode === "desktop";
-  const handleBuilderExit = (0, import_react34.useCallback)(
+  const handleBuilderExit = (0, import_react35.useCallback)(
     (e, url) => {
       if (isBuilder) {
         e.preventDefault();
@@ -5567,7 +5738,7 @@ function Navbar({
     },
     [isBuilder]
   );
-  const formattedMenu = (0, import_react34.useMemo)(() => {
+  const formattedMenu = (0, import_react35.useMemo)(() => {
     if (source === "state" && navList?.length) {
       return navList.map((i) => ({
         ...i,
@@ -5649,7 +5820,7 @@ function Navbar({
 }
 
 // src/components/Chart/BarChart.tsx
-var import_react35 = __toESM(require("react"));
+var import_react36 = __toESM(require("react"));
 var import_axios3 = __toESM(require("axios"));
 var import_recharts = require("recharts");
 var import_jsx_runtime68 = require("react/jsx-runtime");
@@ -5710,18 +5881,18 @@ var ChartComponent = ({
   canvasMode,
   ...props
 }) => {
-  const [rawData, setRawData] = (0, import_react35.useState)([]);
-  const [rawMeta, setRawMeta] = (0, import_react35.useState)(null);
-  const [localLoading, setLocalLoading] = (0, import_react35.useState)(false);
-  const [currentPage, setCurrentPage] = (0, import_react35.useState)(1);
+  const [rawData, setRawData] = (0, import_react36.useState)([]);
+  const [rawMeta, setRawMeta] = (0, import_react36.useState)(null);
+  const [localLoading, setLocalLoading] = (0, import_react36.useState)(false);
+  const [currentPage, setCurrentPage] = (0, import_react36.useState)(1);
   const effectiveData = apiUrl ? rawData : props.data || [];
   const effectiveLoading = apiUrl ? localLoading : externalLoading;
-  (0, import_react35.useEffect)(() => {
+  (0, import_react36.useEffect)(() => {
     if (apiUrl) {
       setCurrentPage(1);
     }
   }, [apiUrl]);
-  const fetchData = (0, import_react35.useCallback)(async (page) => {
+  const fetchData = (0, import_react36.useCallback)(async (page) => {
     if (!apiUrl) return;
     const cancelled = false;
     try {
@@ -5758,7 +5929,7 @@ var ChartComponent = ({
       if (!cancelled) setLocalLoading(false);
     }
   }, [apiUrl, limit]);
-  (0, import_react35.useEffect)(() => {
+  (0, import_react36.useEffect)(() => {
     if (!apiUrl) return;
     fetchData(currentPage);
   }, [apiUrl, currentPage, fetchData]);
@@ -5766,7 +5937,7 @@ var ChartComponent = ({
     if (rawMeta && (newPage < 1 || newPage > rawMeta.pages)) return;
     setCurrentPage(newPage);
   };
-  const data = (0, import_react35.useMemo)(() => {
+  const data = (0, import_react36.useMemo)(() => {
     if (!Array.isArray(effectiveData) || effectiveData.length === 0 || !dataKey || !dataLabel) {
       return [];
     }
@@ -5954,10 +6125,10 @@ var ChartComponent = ({
     ] }) })
   ] });
 };
-var BarChart_default = import_react35.default.memo(ChartComponent);
+var BarChart_default = import_react36.default.memo(ChartComponent);
 
 // src/components/Chart/PieChart.tsx
-var import_react36 = __toESM(require("react"));
+var import_react37 = __toESM(require("react"));
 var import_axios4 = __toESM(require("axios"));
 var import_recharts2 = require("recharts");
 var import_jsx_runtime69 = require("react/jsx-runtime");
@@ -6037,11 +6208,11 @@ var DonutChart = ({
 }) => {
   const showLegends = props.showLegends ?? true;
   const canvasMode = props.canvasMode;
-  const [rawData, setRawData] = (0, import_react36.useState)([]);
-  const [localLoading, setLocalLoading] = (0, import_react36.useState)(false);
+  const [rawData, setRawData] = (0, import_react37.useState)([]);
+  const [localLoading, setLocalLoading] = (0, import_react37.useState)(false);
   const effectiveData = apiUrl ? rawData : props.data || [];
   const effectiveLoading = apiUrl ? localLoading : externalLoading;
-  (0, import_react36.useEffect)(() => {
+  (0, import_react37.useEffect)(() => {
     if (!apiUrl) return;
     let cancelled = false;
     const fetchData = async () => {
@@ -6077,7 +6248,7 @@ var DonutChart = ({
       cancelled = true;
     };
   }, [apiUrl]);
-  const data = (0, import_react36.useMemo)(() => {
+  const data = (0, import_react37.useMemo)(() => {
     if (!Array.isArray(effectiveData) || effectiveData.length === 0) return [];
     return effectiveData.map((item) => ({
       ...item,
@@ -6086,11 +6257,11 @@ var DonutChart = ({
       [dataLabel]: item[dataLabel] ?? "Unknown"
     }));
   }, [effectiveData, dataKey, dataLabel]);
-  const total = (0, import_react36.useMemo)(
+  const total = (0, import_react37.useMemo)(
     () => data.reduce((sum, d) => sum + (d[dataKey] ?? 0), 0),
     [data, dataKey]
   );
-  const formattedTotal = (0, import_react36.useMemo)(() => {
+  const formattedTotal = (0, import_react37.useMemo)(() => {
     if (total >= 1e6) {
       return `${(total / 1e6).toFixed(1)}M`;
     }
@@ -6099,7 +6270,7 @@ var DonutChart = ({
     }
     return total.toString();
   }, [total]);
-  const chartData = (0, import_react36.useMemo)(() => {
+  const chartData = (0, import_react37.useMemo)(() => {
     if (total === 0) return data;
     const sortedData = [...data].sort((a, b) => (b[dataKey] ?? 0) - (a[dataKey] ?? 0));
     const minAngle = 360 / Math.max(12, sortedData.length);
@@ -6122,12 +6293,12 @@ var DonutChart = ({
     if (chartData.length <= 6) return { inner: 85, outer: 150 };
     return { inner: 70, outer: 130 };
   };
-  const [mounted, setMounted] = (0, import_react36.useState)(false);
-  (0, import_react36.useEffect)(() => {
+  const [mounted, setMounted] = (0, import_react37.useState)(false);
+  (0, import_react37.useEffect)(() => {
     const timeout = setTimeout(() => setMounted(true), 100);
     return () => clearTimeout(timeout);
   }, []);
-  const renderLegends = (0, import_react36.useMemo)(() => {
+  const renderLegends = (0, import_react37.useMemo)(() => {
     if (!showLegends) return null;
     return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "flex flex-wrap justify-center gap-2 mt-4 w-full max-w-4xl", children: chartData.map((d, index) => {
       const actualValue = data.find(
@@ -6255,7 +6426,7 @@ var DonutChart = ({
     renderLegends
   ] });
 };
-var PieChart_default = import_react36.default.memo(DonutChart);
+var PieChart_default = import_react37.default.memo(DonutChart);
 
 // src/components/Blocks/EmailComposer.tsx
 var import_jsx_runtime70 = require("react/jsx-runtime");