@algorithm-shift/design-system 1.2.980 → 1.2.982

package/dist/index.js

@@ -48,7 +48,7 @@ __export(src_exports, {
   FlexLayout: () => Flex_default,
   GridLayout: () => Grid_default,
   HistoryTimeline: () => HistoryTimeline_default,
-  Icon: () => Icon_default,
+  Icon: () => Icon2,
   Image: () => Image_default,
   Modal: () => Modal,
   MultiCheckbox: () => MultiCheckbox,
@@ -478,7 +478,7 @@ var Typography = ({
       import_react5.default.createElement("span", {
         key: "html",
         className: "pointer-events-none",
-        dangerouslySetInnerHTML: { __html: textContent }
+        dangerouslySetInnerHTML: { __html: textContent || "--" }
       })
     ]
   );
@@ -26952,39 +26952,117 @@ function SplitButton({ style, textContent, className, list = [] }) {
 }
 
 // src/components/Basic/Icon/Icon.tsx
-var faSolid = __toESM(require("@fortawesome/free-solid-svg-icons"));
+var import_react8 = require("react");
 var import_react_fontawesome2 = require("@fortawesome/react-fontawesome");
 var import_jsx_runtime18 = require("react/jsx-runtime");
-var Icon2 = ({ iconType = "fontawesome", name = "Envelope", className, fontSize = 10, style }) => {
-  let content = null;
-  if (iconType === "fontawesome") {
-    const faKey = "fa" + name.charAt(0).toUpperCase() + name.slice(1);
-    const faIcon = faSolid[faKey];
-    if (!faIcon) {
+async function loadFAIcon(iconName, prefix = "fas") {
+  const pkgMap = {
+    fas: "@fortawesome/free-solid-svg-icons",
+    // Solid
+    far: "@fortawesome/free-regular-svg-icons",
+    // Regular
+    fab: "@fortawesome/free-brands-svg-icons"
+    // Brands
+  };
+  const basePackage = pkgMap[prefix] || pkgMap["fas"];
+  const modulePath = `${basePackage}`;
+  try {
+    const mod = await import(modulePath);
+    return mod[iconName] || Object.values(mod)[0];
+  } catch {
+    console.warn(`FA icon not found in ${modulePath}`);
+    return null;
+  }
+}
+function Icon2(props) {
+  const {
+    iconSet = "fontawesome",
+    icon,
+    prefix = "fas",
+    iconSize = 16,
+    className = "",
+    style = {},
+    title = "",
+    spin = false,
+    fixedWidth = false,
+    pulse = false,
+    ...rest
+  } = props;
+  const [dynamicIcon, setDynamicIcon] = (0, import_react8.useState)(icon || null);
+  (0, import_react8.useEffect)(() => {
+    if (icon && iconSet === "fontawesome") {
+      loadFAIcon(icon, prefix).then((ico) => setDynamicIcon(ico));
+    }
+  }, [iconSet, icon, prefix]);
+  if (iconSet === "lucide") {
+    const Comp = lucide_react_exports[icon];
+    if (!Comp) {
+      console.warn(`Lucide icon not found: ${icon}`);
       return null;
     }
-    content = /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    const numericSize = typeof iconSize === "number" ? iconSize : parseInt(iconSize, 10) || 16;
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      Comp,
+      {
+        size: numericSize,
+        className,
+        title,
+        style,
+        "aria-hidden": title ? void 0 : true,
+        onClick: () => props.onClick?.(),
+        ...rest
+      }
+    );
+  }
+  if (iconSet === "fontawesome") {
+    if (!dynamicIcon) return null;
+    const tempStyle = { ...style };
+    delete tempStyle.height;
+    delete tempStyle.width;
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       import_react_fontawesome2.FontAwesomeIcon,
       {
-        icon: faIcon,
-        className: cn("inline-block"),
-        style: { fontSize: `${fontSize}px`, color: style?.color }
+        icon: dynamicIcon,
+        size: typeof iconSize === "string" ? iconSize : void 0,
+        spin,
+        spinPulse: pulse,
+        widthAuto: fixedWidth,
+        className: cn(className),
+        title,
+        style: {
+          ...tempStyle
+        },
+        onClick: () => props.onClick?.()
       }
     );
   }
-  if (iconType === "lucide") {
-    const Lucide = lucide_react_exports[name];
-    if (!Lucide) {
-      return null;
-    }
-    content = /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Lucide, { className: cn("w-5 h-5"), size: fontSize, style: { color: style?.color } });
+  if (iconSet === "fa" || iconSet === "fa-css") {
+    const sizeStyle = typeof iconSize === "number" ? { fontSize: iconSize } : {};
+    const cls = [
+      `${prefix} fa-${icon}`,
+      spin ? "fa-spin" : "",
+      pulse ? "fa-pulse" : "",
+      fixedWidth ? "fa-fw" : "",
+      className
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      "i",
+      {
+        className: cls,
+        style: { ...sizeStyle, ...style },
+        title,
+        "aria-hidden": title ? void 0 : true,
+        onClick: () => props.onClick?.(),
+        ...rest
+      }
+    );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style, className, children: content });
-};
-var Icon_default = Icon2;
+  console.warn("Unknown icon set:", iconSet);
+  return null;
+}
 
 // src/components/Inputs/TextInput/TextInput.tsx
-var import_react8 = require("react");
+var import_react9 = require("react");
 
 // src/components/ui/input.tsx
 var import_jsx_runtime19 = require("react/jsx-runtime");
@@ -27013,7 +27091,7 @@ var TextInput = ({ className, style, ...props }) => {
   const isDisabled = props.isDisabled ?? false;
   const isReadonly = props.isReadonly ?? false;
   const isAutocomplete = props.isAutocomplete ?? false;
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (props.value !== void 0) {
       const e = { target: { value: props.value } };
       handleChange?.(e);
@@ -27055,7 +27133,7 @@ var TextInput = ({ className, style, ...props }) => {
 var TextInput_default = TextInput;
 
 // src/components/Inputs/NumberInput/NumberInput.tsx
-var import_react9 = require("react");
+var import_react10 = require("react");
 var import_jsx_runtime21 = require("react/jsx-runtime");
 var NumberInput = ({ className, style, ...props }) => {
   const placeholder = props.placeholder ?? "Placeholder text";
@@ -27063,7 +27141,7 @@ var NumberInput = ({ 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 } };
       handleChange?.(e);
@@ -27105,7 +27183,7 @@ var NumberInput = ({ className, style, ...props }) => {
 var NumberInput_default = NumberInput;
 
 // src/components/Inputs/EmailInput/EmailInput.tsx
-var import_react10 = require("react");
+var import_react11 = require("react");
 var import_jsx_runtime22 = require("react/jsx-runtime");
 var EmailInput = ({ className, style, ...props }) => {
   const placeholder = props.placeholder ?? "Placeholder text";
@@ -27113,7 +27191,7 @@ var EmailInput = ({ 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 } };
       handleChange?.(e);
@@ -27155,7 +27233,7 @@ var EmailInput = ({ className, style, ...props }) => {
 var EmailInput_default = EmailInput;
 
 // src/components/Inputs/PasswordInput/PasswordInput.tsx
-var import_react11 = require("react");
+var import_react12 = require("react");
 var import_jsx_runtime23 = require("react/jsx-runtime");
 var PasswordInput = ({ className, style, ...props }) => {
   const placeholder = props.placeholder ?? "Placeholder text";
@@ -27163,7 +27241,7 @@ var PasswordInput = ({ 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 } };
       handleChange?.(e);
@@ -27205,7 +27283,7 @@ var PasswordInput = ({ className, style, ...props }) => {
 var PasswordInput_default = PasswordInput;
 
 // src/components/Inputs/Textarea/Textarea.tsx
-var import_react12 = require("react");
+var import_react13 = require("react");
 
 // src/components/ui/textarea.tsx
 var import_jsx_runtime24 = require("react/jsx-runtime");
@@ -27231,7 +27309,7 @@ var Textarea2 = ({ 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 } };
       handleChange?.(e);
@@ -27265,7 +27343,7 @@ var Textarea2 = ({ className, style, ...props }) => {
 var Textarea_default = Textarea2;
 
 // src/components/Inputs/UrlInput/UrlInput.tsx
-var import_react13 = require("react");
+var import_react14 = require("react");
 var import_jsx_runtime26 = require("react/jsx-runtime");
 var UrlInput = ({ className, style, ...props }) => {
   const placeholder = props.placeholder ?? "Placeholder text";
@@ -27273,7 +27351,7 @@ var UrlInput = ({ 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 } };
       handleChange?.(e);
@@ -27318,7 +27396,7 @@ var UrlInput = ({ className, style, ...props }) => {
 var UrlInput_default = UrlInput;
 
 // src/components/Inputs/Checkbox/Checkbox.tsx
-var import_react14 = require("react");
+var import_react15 = require("react");
 
 // src/components/ui/checkbox.tsx
 var CheckboxPrimitive = __toESM(require("@radix-ui/react-checkbox"));
@@ -27383,7 +27461,7 @@ var CheckboxInput = ({ className, style, ...props }) => {
     }
     return false;
   };
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     if (props.value) {
       handleChange(formatValue(props.value));
     }
@@ -27410,7 +27488,7 @@ var CheckboxInput = ({ className, style, ...props }) => {
 var Checkbox_default = CheckboxInput;
 
 // src/components/Inputs/RadioInput/RadioInput.tsx
-var import_react15 = require("react");
+var import_react16 = require("react");
 
 // src/components/ui/radio-group.tsx
 var RadioGroupPrimitive = __toESM(require("@radix-ui/react-radio-group"));
@@ -27470,7 +27548,7 @@ var RadioInput = ({
     value: item[dataKey || "value"],
     label: item[dataLabel || "label"]
   }));
-  (0, import_react15.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     if (props.value !== void 0) {
       handleChange?.(props.value);
     }
@@ -27500,7 +27578,7 @@ var RadioInput = ({
 var RadioInput_default = RadioInput;
 
 // src/components/Inputs/MultiCheckbox/MultiCheckbox.tsx
-var import_react16 = require("react");
+var import_react17 = require("react");
 var import_jsx_runtime32 = require("react/jsx-runtime");
 function MultiCheckbox({
   apiUrl,
@@ -27519,11 +27597,11 @@ function MultiCheckbox({
   onUncheckItems,
   ...props
 }) {
-  const [options, setOptions] = (0, import_react16.useState)([]);
-  const [page, setPage] = (0, import_react16.useState)(1);
-  const [hasMore, setHasMore] = (0, import_react16.useState)(true);
-  const [pageLoading, setPageLoading] = (0, import_react16.useState)(false);
-  const loadMoreRef = (0, import_react16.useRef)(null);
+  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 normalizeInput = (val) => {
     if (!val) return [];
     if (Array.isArray(val)) return val;
@@ -27545,7 +27623,7 @@ function MultiCheckbox({
         return arr;
     }
   };
-  const fetchApiPage = (0, import_react16.useCallback)(async () => {
+  const fetchApiPage = (0, import_react17.useCallback)(async () => {
     if (!apiUrl) return [];
     const client = axiosInstance || (await import("axios")).default;
     const res = await client.get(apiUrl, {
@@ -27557,7 +27635,7 @@ function MultiCheckbox({
     }
     return Array.isArray(res.data) ? res.data : [];
   }, [apiUrl, axiosInstance, page, pageSize]);
-  const mapData = (0, import_react16.useCallback)(
+  const mapData = (0, import_react17.useCallback)(
     (items) => {
       if (Array.isArray(items) === false) return [];
       return (items || []).map((item) => ({
@@ -27567,7 +27645,7 @@ function MultiCheckbox({
     },
     [dataKey, dataLabel]
   );
-  const loadPage = (0, import_react16.useCallback)(async () => {
+  const loadPage = (0, import_react17.useCallback)(async () => {
     if (source !== "api") return;
     if (pageLoading) return;
     setPageLoading(true);
@@ -27582,7 +27660,7 @@ function MultiCheckbox({
       setPageLoading(false);
     }
   }, [source, pageLoading, fetchApiPage, mapData, pageSize]);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (source === "api") {
       setOptions([]);
       setPage(1);
@@ -27592,10 +27670,10 @@ function MultiCheckbox({
       setHasMore(false);
     }
   }, [source, JSON.stringify(data)]);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (source === "api") loadPage();
   }, [page, source]);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (source !== "api") return;
     if (!hasMore || pageLoading) return;
     const observer = new IntersectionObserver((entries) => {
@@ -27658,10 +27736,10 @@ function MultiCheckbox({
 }
 
 // src/components/Inputs/RichText/RichText.tsx
-var import_react18 = require("react");
+var import_react19 = require("react");
 
 // src/components/Global/TinyMceEditor.tsx
-var import_react17 = require("react");
+var import_react18 = require("react");
 var import_tinymce_react = require("@tinymce/tinymce-react");
 var import_jsx_runtime33 = require("react/jsx-runtime");
 function MyEditor({
@@ -27669,7 +27747,7 @@ function MyEditor({
   onChange,
   isDefault
 }) {
-  const editorRef = (0, import_react17.useRef)(null);
+  const editorRef = (0, import_react18.useRef)(null);
   function stripOuterP(html) {
     const trimmedHtml = html.trim();
     if (!trimmedHtml) return "";
@@ -27681,7 +27759,7 @@ function MyEditor({
     }
     return trimmedHtml;
   }
-  const isDefaultToolbar = (0, import_react17.useMemo)(() => {
+  const isDefaultToolbar = (0, import_react18.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";
@@ -27734,7 +27812,7 @@ function MyEditor({
 // src/components/Inputs/RichText/RichText.tsx
 var import_jsx_runtime34 = require("react/jsx-runtime");
 function RichText({ className, style, ...props }) {
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (props.value !== void 0) {
       handleChange?.(props.value);
     }
@@ -27759,7 +27837,7 @@ function RichText({ className, style, ...props }) {
 }
 
 // src/components/Inputs/Dropdown/Dropdown.tsx
-var import_react21 = require("react");
+var import_react22 = require("react");
 
 // src/components/ui/select.tsx
 var SelectPrimitive = __toESM(require("@radix-ui/react-select"));
@@ -27888,20 +27966,20 @@ function SelectScrollDownButton({
 }
 
 // src/components/Inputs/Dropdown/LazyDropdown.tsx
-var import_react20 = require("react");
+var import_react21 = require("react");
 
 // src/hooks/useLazyDropdown.ts
-var import_react19 = require("react");
+var import_react20 = require("react");
 var import_axios = __toESM(require("axios"));
 function useLazyDropdown(config) {
-  const [options, setOptions] = (0, import_react19.useState)([]);
-  const [page, setPage] = (0, import_react19.useState)(1);
-  const [hasMore, setHasMore] = (0, import_react19.useState)(true);
-  const [loading, setLoading] = (0, import_react19.useState)(false);
-  const [searchTerm, setSearchTerm] = (0, import_react19.useState)("");
-  const debounceTimer = (0, import_react19.useRef)(null);
-  const allDataRef = (0, import_react19.useRef)([]);
-  const configRef = (0, import_react19.useRef)(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 PAGE_SIZE = config.pageSize || 10;
   const uniqueOptions = (items) => {
     const seen = /* @__PURE__ */ new Set();
@@ -27911,7 +27989,7 @@ function useLazyDropdown(config) {
       return true;
     });
   };
-  (0, import_react19.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     configRef.current = config;
   }, [config]);
   function getValueByPath2(obj, path) {
@@ -27919,7 +27997,7 @@ function useLazyDropdown(config) {
     const parts = path.split(/\./);
     return parts.reduce((acc, key) => acc?.[key], obj);
   }
-  const transformToOptions = (0, import_react19.useCallback)((data) => {
+  const transformToOptions = (0, import_react20.useCallback)((data) => {
     if (!data || !Array.isArray(data)) return [];
     const cfg = configRef.current;
     return data.map((item) => {
@@ -27957,7 +28035,7 @@ function useLazyDropdown(config) {
       params: cleaned
     };
   }
-  const fetchApiData = (0, import_react19.useCallback)(async (pageNum, term) => {
+  const fetchApiData = (0, import_react20.useCallback)(async (pageNum, term) => {
     if (!configRef.current.apiUrl) return [];
     const limit = PAGE_SIZE;
     const params = { page: pageNum, limit };
@@ -27982,7 +28060,7 @@ function useLazyDropdown(config) {
     }
     return [];
   }, [PAGE_SIZE, transformToOptions]);
-  const loadPage = (0, import_react19.useCallback)(async (pageNum, term) => {
+  const loadPage = (0, import_react20.useCallback)(async (pageNum, term) => {
     const cfg = configRef.current;
     if (!cfg.enabled) return;
     setLoading(true);
@@ -28059,7 +28137,7 @@ function useLazyDropdown(config) {
       setLoading(false);
     }
   };
-  (0, import_react19.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     const cfg = configRef.current;
     if (!cfg.enabled || !cfg.value || cfg.dataSource !== "api" || !cfg.apiUrl) return;
     if (cfg.isMultiSelect) {
@@ -28072,29 +28150,29 @@ function useLazyDropdown(config) {
     }
     fetchValueItem();
   }, [JSON.stringify(config.value), config.dataKey, config.apiUrl, config.dataSource]);
-  const loadMore = (0, import_react19.useCallback)(() => {
+  const loadMore = (0, import_react20.useCallback)(() => {
     if (!loading && hasMore) {
       loadPage(page + 1, searchTerm);
     }
   }, [loading, hasMore, page, searchTerm]);
-  const search = (0, import_react19.useCallback)((term) => {
+  const search = (0, import_react20.useCallback)((term) => {
     setSearchTerm(term);
     if (debounceTimer.current) clearTimeout(debounceTimer.current);
     debounceTimer.current = setTimeout(() => {
       loadPage(1, term);
     }, 300);
   }, []);
-  const reset = (0, import_react19.useCallback)(() => {
+  const reset = (0, import_react20.useCallback)(() => {
     setSearchTerm("");
     setPage(1);
   }, []);
-  (0, import_react19.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     if (config.initialData?.length) {
       allDataRef.current = config.initialData;
       loadPage(1, "");
     }
   }, [config.initialData]);
-  (0, import_react19.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     return () => {
       if (debounceTimer.current) clearTimeout(debounceTimer.current);
     };
@@ -28155,12 +28233,13 @@ function LazySelectDropdown({
   dataLabel = "name",
   errorMessage,
   axiosInstance,
-  enableAddNewOption = false
+  enableAddNewOption = false,
+  enforceStrictQueryParams = false
 }) {
-  const [isOpen, setIsOpen] = (0, import_react20.useState)(false);
-  const [searchTerm, setSearchTerm] = (0, import_react20.useState)("");
-  const dropdownRef = (0, import_react20.useRef)(null);
-  const observerTarget = (0, import_react20.useRef)(null);
+  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 {
     options: lazyOptions,
     loading,
@@ -28179,10 +28258,11 @@ function LazySelectDropdown({
     dataLabel,
     initialData: options || [],
     value,
-    axiosInstance
+    axiosInstance,
+    enforceStrictQueryParams
   });
-  const selectedOption = (0, import_react20.useMemo)(() => lazyOptions.find((opt) => opt.value === value), [lazyOptions, value]);
-  (0, import_react20.useEffect)(() => {
+  const selectedOption = (0, import_react21.useMemo)(() => lazyOptions.find((opt) => opt.value === value), [lazyOptions, value]);
+  (0, import_react21.useEffect)(() => {
     const handleClickOutside = (e) => {
       if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
         setIsOpen(false);
@@ -28192,7 +28272,7 @@ function LazySelectDropdown({
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, []);
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     if (!isOpen || !hasMore || loading) return;
     const observer = new IntersectionObserver(
       (entries) => {
@@ -28332,7 +28412,7 @@ var Dropdown = ({ className, style, ...props }) => {
   const isEditable = props.isEditable ?? true;
   const isDisabled = props.isDisabled ?? false;
   const isReadonly = props.isReadonly ?? false;
-  (0, import_react21.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     if (props.value !== void 0) {
       handleChange(props.value);
     }
@@ -28391,7 +28471,7 @@ var Dropdown = ({ className, style, ...props }) => {
 var Dropdown_default = Dropdown;
 
 // src/components/Inputs/SwitchToggle/SwitchToggle.tsx
-var import_react22 = require("react");
+var import_react23 = require("react");
 
 // src/components/ui/switch.tsx
 var SwitchPrimitive = __toESM(require("@radix-ui/react-switch"));
@@ -28427,7 +28507,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_react22.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     if (props.value !== void 0) {
       handleChange?.(props.value);
     }
@@ -28454,7 +28534,7 @@ var SwitchToggle = ({ className, style, ...props }) => {
 var SwitchToggle_default = SwitchToggle;
 
 // src/components/Inputs/PhoneInput/PhoneInput.tsx
-var import_react23 = require("react");
+var import_react24 = 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");
@@ -28469,7 +28549,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_react23.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     if (props.value !== void 0) {
       const normalized = ensureIndiaCode(props.value);
       handleChange?.(normalized);
@@ -28516,7 +28596,7 @@ var PhoneInput = ({ className, style, ...props }) => {
 var PhoneInput_default = PhoneInput;
 
 // src/components/Inputs/SearchInput/SearchInput.tsx
-var import_react24 = require("react");
+var import_react25 = require("react");
 var import_jsx_runtime41 = require("react/jsx-runtime");
 var SearchInput = ({ className, style, ...props }) => {
   const placeholder = props.placeholder ?? "Placeholder text";
@@ -28524,7 +28604,7 @@ var SearchInput = ({ className, style, ...props }) => {
   const isDisabled = props.isDisabled ?? false;
   const isReadonly = props.isReadonly ?? false;
   const isAutocomplete = props.isAutocomplete ?? false;
-  (0, import_react24.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     if (props.value !== void 0) {
       const e = { target: { value: props.value } };
       handleChange?.(e);
@@ -28566,11 +28646,11 @@ var SearchInput = ({ className, style, ...props }) => {
 var SearchInput_default = SearchInput;
 
 // src/components/Inputs/FileInput/FileInput.tsx
-var import_react25 = require("react");
+var import_react26 = require("react");
 var import_jsx_runtime42 = require("react/jsx-runtime");
 var FileInput2 = ({ className, style, ...props }) => {
   const placeholder = props.placeholder ?? "Placeholder text";
-  (0, import_react25.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     if (props.value !== void 0) {
       const e = { target: { value: props.value } };
       handleChange?.(e);
@@ -28610,11 +28690,11 @@ var FileInput2 = ({ className, style, ...props }) => {
 var FileInput_default = FileInput2;
 
 // src/components/Inputs/DatePicker/DatePicker.tsx
-var React6 = __toESM(require("react"));
+var React7 = __toESM(require("react"));
 var import_date_fns = require("date-fns");
 
 // src/components/ui/calendar.tsx
-var React5 = __toESM(require("react"));
+var React6 = __toESM(require("react"));
 var import_react_day_picker = require("react-day-picker");
 var import_jsx_runtime43 = require("react/jsx-runtime");
 function Calendar2({
@@ -28769,8 +28849,8 @@ function CalendarDayButton({
   ...props
 }) {
   const defaultClassNames = (0, import_react_day_picker.getDefaultClassNames)();
-  const ref = React5.useRef(null);
-  React5.useEffect(() => {
+  const ref = React6.useRef(null);
+  React6.useEffect(() => {
     if (modifiers.focused) ref.current?.focus();
   }, [modifiers.focused]);
   return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
@@ -28864,25 +28944,25 @@ function DateTimePicker({
   const isAutocomplete = props.isAutocomplete ?? false;
   const minDate = resolveDate(minimumDate, customMinimumDate);
   const maxDate = resolveDate(maximumDate, customMaximumDate);
-  const [date, setDate] = React6.useState(() => {
+  const [date, setDate] = React7.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] = React6.useState(initialHours);
-  const [minutes, setMinutes] = React6.useState(initialMinutes);
-  const [amPm, setAmPm] = React6.useState("AM");
-  const displayHours = React6.useMemo(() => {
+  const [hours, setHours] = React7.useState(initialHours);
+  const [minutes, setMinutes] = React7.useState(initialMinutes);
+  const [amPm, setAmPm] = React7.useState("AM");
+  const displayHours = React7.useMemo(() => {
     if (hours === 0) return 12;
     if (hours > 12) return hours - 12;
     return hours;
   }, [hours]);
-  React6.useEffect(() => {
+  React7.useEffect(() => {
     setAmPm(hours >= 12 ? "PM" : "AM");
   }, [hours]);
-  React6.useEffect(() => {
+  React7.useEffect(() => {
     if (!props.value) {
       setDate(void 0);
       return;
@@ -28894,8 +28974,8 @@ function DateTimePicker({
       setMinutes(d.getMinutes());
     }
   }, [props.value]);
-  const [year, setYear] = React6.useState(date ? date.getFullYear() : (/* @__PURE__ */ new Date()).getFullYear());
-  React6.useEffect(() => {
+  const [year, setYear] = React7.useState(date ? date.getFullYear() : (/* @__PURE__ */ new Date()).getFullYear());
+  React7.useEffect(() => {
     if (!date) return;
     const newDate = new Date(date);
     newDate.setFullYear(year);
@@ -28998,7 +29078,7 @@ function DateTimePicker({
   for (let y = currentYear - 50; y <= currentYear + 10; y++) {
     yearOptions.push(y);
   }
-  const displayValue = React6.useMemo(() => {
+  const displayValue = React7.useMemo(() => {
     if (!date) return "";
     try {
       if (mode === "date") return (0, import_date_fns.format)(date, "dd-MM-yyyy");
@@ -29009,11 +29089,11 @@ function DateTimePicker({
     }
   }, [date, mode]);
   const isInputDisabled = isDisabled || !isEditable;
-  const [calendarMonthState, setCalendarMonthState] = React6.useState(() => {
+  const [calendarMonthState, setCalendarMonthState] = React7.useState(() => {
     const currentMonth = (/* @__PURE__ */ new Date()).getMonth();
     return date ? new Date(date.getFullYear(), date.getMonth()) : new Date(year, currentMonth);
   });
-  React6.useEffect(() => {
+  React7.useEffect(() => {
     setCalendarMonthState(new Date(year, calendarMonthState.getMonth()));
   }, [year]);
   const handleToday = () => {
@@ -29159,18 +29239,18 @@ function DateTimePicker({
 }
 
 // src/components/Inputs/DateRange/DateRange.tsx
-var import_react26 = __toESM(require("react"));
+var import_react27 = __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_react26.default.useState(
+  const [date, setDate] = import_react27.default.useState(
     isDateRange(props.value) ? props.value : {
       from: /* @__PURE__ */ new Date(),
       to: (0, import_date_fns2.addDays)(/* @__PURE__ */ new Date(), 7)
     }
   );
-  (0, import_react26.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     if (props.value && isDateRange(props.value)) {
       handleChange?.(props.value);
     }
@@ -29217,7 +29297,7 @@ var DateRange = ({ className, style, ...props }) => {
 var DateRange_default = DateRange;
 
 // src/components/Inputs/TextInputGroup/TextInputGroup.tsx
-var import_react27 = require("react");
+var import_react28 = require("react");
 var import_jsx_runtime47 = require("react/jsx-runtime");
 var TextInputGroup = ({ className, style, prepend, append, ...props }) => {
   const placeholder = props.placeholder ?? "Placeholder text";
@@ -29225,7 +29305,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_react27.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     if (props.value !== void 0) {
       const e = { target: { value: props.value } };
       handleChange?.(e);
@@ -29278,10 +29358,9 @@ var TextInputGroup = ({ className, style, prepend, append, ...props }) => {
 var TextInputGroup_default = TextInputGroup;
 
 // src/components/Inputs/Multiselect/MultiSelect.tsx
-var import_react28 = require("react");
+var import_react29 = require("react");
 var import_jsx_runtime48 = require("react/jsx-runtime");
 function LazyMultiSelectDropdown({
-  options = [],
   value = [],
   onChange,
   placeholder,
@@ -29296,12 +29375,13 @@ function LazyMultiSelectDropdown({
   dataLabel = "name",
   errorMessage,
   axiosInstance,
-  outputFormat = "array"
+  outputFormat = "array",
+  ...props
 }) {
-  const [isOpen, setIsOpen] = (0, import_react28.useState)(false);
-  const [searchTerm, setSearchTerm] = (0, import_react28.useState)("");
-  const dropdownRef = (0, import_react28.useRef)(null);
-  const observerTarget = (0, import_react28.useRef)(null);
+  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 ensureUnique = (arr) => {
     return Array.from(new Set(arr));
   };
@@ -29318,26 +29398,27 @@ function LazyMultiSelectDropdown({
     return ensureUnique(arr);
   };
   const normalizedValue = normalizeInput(value);
+  const list = Array.isArray(props?.data) ? props.data : [];
   const {
     options: lazyOptions,
     loading,
     hasMore,
     loadMore,
     search,
-    reset,
     loadPage
   } = useLazyDropdown({
     enabled: true,
     dataSource: source || "",
     apiUrl,
-    pageSize: pageSize || 10,
+    pageSize: pageSize ?? 10,
     dataKey,
     dataLabel,
-    initialData: options || [],
+    initialData: list || [],
     value: normalizedValue,
     axiosInstance,
     isMultiSelect: true
   });
+  const dataLoading = props.loading || loading;
   const convertOutput = (values) => {
     const unique = ensureUnique(values);
     switch (outputFormat) {
@@ -29349,10 +29430,10 @@ function LazyMultiSelectDropdown({
         return unique;
     }
   };
-  const selectedOptions = (0, import_react28.useMemo)(() => {
+  const selectedOptions = (0, import_react29.useMemo)(() => {
     return lazyOptions.filter((opt) => normalizedValue.includes(opt.value));
   }, [lazyOptions, normalizedValue]);
-  (0, import_react28.useEffect)(() => {
+  (0, import_react29.useEffect)(() => {
     const handleClick = (e) => {
       if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
         setIsOpen(false);
@@ -29361,7 +29442,7 @@ function LazyMultiSelectDropdown({
     document.addEventListener("mousedown", handleClick);
     return () => document.removeEventListener("mousedown", handleClick);
   }, []);
-  (0, import_react28.useEffect)(() => {
+  (0, import_react29.useEffect)(() => {
     if (!isOpen || !hasMore || loading) return;
     const obs = new IntersectionObserver(
       (entries) => {
@@ -29400,10 +29481,11 @@ function LazyMultiSelectDropdown({
       {
         onClick: handleFocus,
         className: cn(
-          "min-h-10 w-full flex items-center flex-wrap gap-1 px-2 py-1 border border-[#BDBDBD] rounded-md bg-white cursor-pointer",
+          "w-full flex items-center flex-wrap gap-1 border border-[#BDBDBD] rounded-md bg-white cursor-pointer",
           disabled && "bg-gray-100 cursor-not-allowed",
           errorMessage && "border-red-500",
-          className
+          className,
+          "px-2 py-2 min-h-[35px]"
         ),
         children: [
           selectedOptions.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
@@ -29433,7 +29515,7 @@ function LazyMultiSelectDropdown({
             {
               type: "text",
               placeholder: selectedOptions.length ? "" : placeholder,
-              className: "flex-1 min-w-[60px] p-1 outline-none text-xs disabled:cursor-not-allowed",
+              className: "flex-1 min-w-[60px] px-2 py-0 outline-none text-xs disabled:cursor-not-allowed",
               value: isOpen ? searchTerm : "",
               onChange: handleSearch,
               readOnly,
@@ -29455,7 +29537,7 @@ function LazyMultiSelectDropdown({
           top: dropdownRef.current ? dropdownRef.current.getBoundingClientRect().bottom + window.scrollY : 0,
           left: dropdownRef.current ? dropdownRef.current.getBoundingClientRect().left + window.scrollX : 0
         },
-        children: loading && lazyOptions.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "px-3 py-4 text-center text-gray-500", children: "Loading..." }) : lazyOptions.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_jsx_runtime48.Fragment, { children: [
+        children: dataLoading && lazyOptions.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "px-3 py-3 text-center text-gray-500", children: "Loading..." }) : lazyOptions.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_jsx_runtime48.Fragment, { children: [
           lazyOptions.map((option) => {
             const isSelected = normalizedValue.includes(option.value);
             return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
@@ -29482,14 +29564,14 @@ function LazyMultiSelectDropdown({
               children: loading ? "Loading\u2026" : "Scroll for more\u2026"
             }
           )
-        ] }) : /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "px-3 py-4 text-center text-gray-500", children: "No results" })
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "px-3 py-3 text-center text-gray-500", children: "No results" })
       }
     ) })
   ] });
 }
 
 // src/components/ui/data-table.tsx
-var React9 = __toESM(require("react"));
+var React10 = __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");
@@ -29583,7 +29665,7 @@ function TableCell({ className, ...props }) {
 var import_react_table = require("@tanstack/react-table");
 
 // src/lib/table/cellRendererFactory.tsx
-var import_react29 = __toESM(require("react"));
+var import_react30 = __toESM(require("react"));
 var import_image3 = __toESM(require("next/image"));
 
 // src/lib/dayjs-setup.ts
@@ -29669,9 +29751,9 @@ var getContrastColor = (bg) => {
 };
 var sanitizeValue = (val) => {
   if (val == null) return null;
-  if (import_react29.default.isValidElement(val)) return val;
+  if (import_react30.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_react29.default.Fragment, { children: sanitizeValue(v) }, i));
+  if (Array.isArray(val)) return val.map((v, i) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_react30.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;
@@ -29816,6 +29898,13 @@ var cellRendererFactory = (renderer, rendererProps, value, row, customRenderers
           onChange: info.row.getToggleSelectedHandler()
         }
       );
+    case "html":
+      return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+        "span",
+        {
+          dangerouslySetInnerHTML: { __html: String(rowValue || formattedValue) }
+        }
+      );
     /* -------------------- ADVANCED -------------------- */
     case "custom": {
       const CustomRenderer = customRenderers[rendererProps?.customRendererId] || customRenderers[rendererProps?.rendererId];
@@ -29917,10 +30006,10 @@ function DataTable({
   enableRowSelection = false,
   getRowSelection
 }) {
-  const [columnFilters, setColumnFilters] = React9.useState([]);
-  const [columnVisibility, setColumnVisibility] = React9.useState({});
-  const [manualSort, setManualSort] = React9.useState(null);
-  const [searchTerm, setSearchTerm] = React9.useState("");
+  const [columnFilters, setColumnFilters] = React10.useState([]);
+  const [columnVisibility, setColumnVisibility] = React10.useState({});
+  const [manualSort, setManualSort] = React10.useState(null);
+  const [searchTerm, setSearchTerm] = React10.useState("");
   const tableData = Array.isArray(data) ? data : [];
   const finalCols = [...columns];
   if (enableRowSelection) {
@@ -29946,8 +30035,8 @@ function DataTable({
     });
   }
   const dynamicCols = useDynamicColumns({ columns: finalCols, enableRowSelection });
-  const [rowSelection, setRowSelection] = React9.useState({});
-  const [localPageSize, setLocalPageSize] = React9.useState(pageSize);
+  const [rowSelection, setRowSelection] = React10.useState({});
+  const [localPageSize, setLocalPageSize] = React10.useState(pageSize);
   const table = (0, import_react_table2.useReactTable)({
     data: tableData,
     columns: dynamicCols,
@@ -30012,7 +30101,7 @@ function DataTable({
     onPageChange?.(currentPageIndex, newSize);
     setLocalPageSize(newSize);
   };
-  const pageSizeOptions = React9.useMemo(() => {
+  const pageSizeOptions = React10.useMemo(() => {
     const options = [10, 20, 50, 100].filter((size) => size < totalRecords);
     if (options.length === 0) {
       options.push(10);
@@ -30088,17 +30177,20 @@ function DataTable({
             ),
             "Toggle All"
           ] }),
-          table.getAllLeafColumns().map((column) => /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("label", { className: "flex items-center gap-2 text-sm", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-              "input",
-              {
-                type: "checkbox",
-                checked: column.getIsVisible(),
-                onChange: (e) => column.toggleVisibility(e.target.checked)
-              }
-            ),
-            column.columnDef.header?.toString() ?? column.id
-          ] }, column.id))
+          table.getAllLeafColumns().map((column) => {
+            const header = column.columnDef.header;
+            return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("label", { className: "flex items-center gap-2 text-sm", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+                "input",
+                {
+                  type: "checkbox",
+                  checked: column.getIsVisible(),
+                  onChange: (e) => column.toggleVisibility(e.target.checked)
+                }
+              ),
+              typeof header === "function" ? header({ column, header, table }) : typeof header === "string" ? header : column.id
+            ] }, column.id);
+          })
         ] })
       ] })
     ] }),
@@ -30567,7 +30659,7 @@ var CustomPagination = ({
 var Pagination_default = CustomPagination;
 
 // src/components/DataDisplay/HistoryTimeline/HistoryTimeline.tsx
-var import_react30 = require("react");
+var import_react31 = require("react");
 
 // src/components/ui/accordion.tsx
 var AccordionPrimitive = __toESM(require("@radix-ui/react-accordion"));
@@ -30691,7 +30783,7 @@ var HistoryTimeline = ({
   createdAtKey,
   ...props
 }) => {
-  const data = (0, import_react30.useMemo)(() => {
+  const data = (0, import_react31.useMemo)(() => {
     if (Array.isArray(props.data)) {
       return props.data;
     }
@@ -30768,7 +30860,7 @@ var HistoryTimeline = ({
 var HistoryTimeline_default = HistoryTimeline;
 
 // src/components/Navigation/Tabs/Tabs.tsx
-var import_react31 = require("react");
+var import_react32 = require("react");
 var import_link5 = __toESM(require("next/link"));
 var import_navigation3 = require("next/navigation");
 
@@ -30926,7 +31018,7 @@ function showSonnerToast({
 // 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_react31.useState)(null);
+  const [openIndex, setOpenIndex] = (0, import_react32.useState)(null);
   const currentPathname = (0, import_navigation3.usePathname)();
   function groupMenus(menus = []) {
     const menuMap = /* @__PURE__ */ new Map();
@@ -30960,7 +31052,7 @@ var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode, isBuil
     });
     return sortMenus(rootMenus);
   }
-  const rawTabs = (0, import_react31.useMemo)(() => {
+  const rawTabs = (0, import_react32.useMemo)(() => {
     if (!Array.isArray(tabs)) return [];
     if (source === "manual") return Array.isArray(tabs) ? tabs : [];
     return groupMenus(tabs);
@@ -30990,9 +31082,9 @@ var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode, isBuil
     return tab.children.some((child) => isActive(child.url));
   };
   const router = (0, import_navigation3.useRouter)();
-  const [showExitDialog, setShowExitDialog] = (0, import_react31.useState)(false);
-  const [pendingUrl, setPendingUrl] = (0, import_react31.useState)(null);
-  const handleBuilderExit = (0, import_react31.useCallback)(
+  const [showExitDialog, setShowExitDialog] = (0, import_react32.useState)(false);
+  const [pendingUrl, setPendingUrl] = (0, import_react32.useState)(null);
+  const handleBuilderExit = (0, import_react32.useCallback)(
     (e, url) => {
       if (isBuilder) {
         e.preventDefault();
@@ -31159,7 +31251,7 @@ var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode, isBuil
 var Tabs_default = Tabs;
 
 // src/components/Navigation/Stages/Stages.tsx
-var import_react32 = __toESM(require("react"));
+var import_react33 = __toESM(require("react"));
 var import_jsx_runtime60 = require("react/jsx-runtime");
 var StagesComponent = ({
   stages,
@@ -31176,8 +31268,8 @@ var StagesComponent = ({
   triggerOnClick = false,
   canvasMode = "desktop"
 }) => {
-  const [activeStage, setActiveStage] = (0, import_react32.useState)(currentStage || (stages && stages.length > 0 ? stages[0][dataKey] : null));
-  const [isCompleted, setIsCompleted] = (0, import_react32.useState)(false);
+  const [activeStage, setActiveStage] = (0, import_react33.useState)(currentStage || (stages && stages.length > 0 ? stages[0][dataKey] : null));
+  const [isCompleted, setIsCompleted] = (0, import_react33.useState)(false);
   const updateStage = (stageKey) => {
     setActiveStage(stageKey);
     onStageChange?.(stageKey);
@@ -31245,7 +31337,7 @@ var StagesComponent = ({
               const currentIndex = stages.findIndex((s) => s[dataKey] === activeStage);
               const isCompletedStage = isAllStagesCompleted || index <= currentIndex;
               const isActive = !isAllStagesCompleted && index === currentIndex;
-              return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_react32.default.Fragment, { children: [
+              return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_react33.default.Fragment, { children: [
                 /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
                   "button",
                   {
@@ -31313,10 +31405,10 @@ var import_jsx_runtime63 = require("react/jsx-runtime");
 var import_jsx_runtime64 = require("react/jsx-runtime");
 
 // src/components/ui/avatar.tsx
-var React11 = __toESM(require("react"));
+var React12 = __toESM(require("react"));
 var AvatarPrimitive = __toESM(require("@radix-ui/react-avatar"));
 var import_jsx_runtime65 = require("react/jsx-runtime");
-var Avatar = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+var Avatar = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
   AvatarPrimitive.Root,
   {
     ref,
@@ -31328,7 +31420,7 @@ var Avatar = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ *
   }
 ));
 Avatar.displayName = AvatarPrimitive.Root.displayName;
-var AvatarImage = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+var AvatarImage = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
   AvatarPrimitive.Image,
   {
     ref,
@@ -31337,7 +31429,7 @@ var AvatarImage = React11.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 AvatarImage.displayName = AvatarPrimitive.Image.displayName;
-var AvatarFallback = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+var AvatarFallback = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
   AvatarPrimitive.Fallback,
   {
     ref,
@@ -31355,7 +31447,7 @@ var import_link6 = __toESM(require("next/link"));
 var import_image4 = __toESM(require("next/image"));
 var import_navigation4 = require("next/navigation");
 var import_react_dropdown_menu = require("@radix-ui/react-dropdown-menu");
-var import_react33 = require("react");
+var import_react34 = require("react");
 var import_jsx_runtime66 = require("react/jsx-runtime");
 function Navbar({
   style,
@@ -31376,9 +31468,9 @@ function Navbar({
 }) {
   const isMobileView = canvasMode === "mobile" || canvasMode === "tablet";
   const router = (0, import_navigation4.useRouter)();
-  const [showExitDialog, setShowExitDialog] = (0, import_react33.useState)(false);
-  const [pendingUrl, setPendingUrl] = (0, import_react33.useState)(null);
-  const handleBuilderExit = (0, import_react33.useCallback)(
+  const [showExitDialog, setShowExitDialog] = (0, import_react34.useState)(false);
+  const [pendingUrl, setPendingUrl] = (0, import_react34.useState)(null);
+  const handleBuilderExit = (0, import_react34.useCallback)(
     (e, url) => {
       if (isBuilder) {
         e.preventDefault();
@@ -31394,7 +31486,7 @@ function Navbar({
       router.push(pendingUrl);
     }
   };
-  const formatedMenu = (0, import_react33.useMemo)(() => {
+  const formatedMenu = (0, import_react34.useMemo)(() => {
     if (source === "state" && navList && navList.length) {
       return navList.map((i) => ({ ...i, header: i.name || "Menu" }));
     }
@@ -31497,7 +31589,7 @@ function Navbar({
 }
 
 // src/components/Chart/BarChart.tsx
-var import_react34 = __toESM(require("react"));
+var import_react35 = __toESM(require("react"));
 var import_axios2 = __toESM(require("axios"));
 var import_recharts = require("recharts");
 var import_jsx_runtime67 = require("react/jsx-runtime");
@@ -31558,18 +31650,18 @@ var ChartComponent = ({
   canvasMode,
   ...props
 }) => {
-  const [rawData, setRawData] = (0, import_react34.useState)([]);
-  const [rawMeta, setRawMeta] = (0, import_react34.useState)(null);
-  const [localLoading, setLocalLoading] = (0, import_react34.useState)(false);
-  const [currentPage, setCurrentPage] = (0, import_react34.useState)(1);
+  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 effectiveData = apiUrl ? rawData : props.data || [];
   const effectiveLoading = apiUrl ? localLoading : externalLoading;
-  (0, import_react34.useEffect)(() => {
+  (0, import_react35.useEffect)(() => {
     if (apiUrl) {
       setCurrentPage(1);
     }
   }, [apiUrl]);
-  const fetchData = (0, import_react34.useCallback)(async (page) => {
+  const fetchData = (0, import_react35.useCallback)(async (page) => {
     if (!apiUrl) return;
     const cancelled = false;
     try {
@@ -31606,7 +31698,7 @@ var ChartComponent = ({
       if (!cancelled) setLocalLoading(false);
     }
   }, [apiUrl, limit]);
-  (0, import_react34.useEffect)(() => {
+  (0, import_react35.useEffect)(() => {
     if (!apiUrl) return;
     fetchData(currentPage);
   }, [apiUrl, currentPage, fetchData]);
@@ -31614,7 +31706,7 @@ var ChartComponent = ({
     if (rawMeta && (newPage < 1 || newPage > rawMeta.pages)) return;
     setCurrentPage(newPage);
   };
-  const data = (0, import_react34.useMemo)(() => {
+  const data = (0, import_react35.useMemo)(() => {
     if (!Array.isArray(effectiveData) || effectiveData.length === 0 || !dataKey || !dataLabel) {
       return [];
     }
@@ -31802,10 +31894,10 @@ var ChartComponent = ({
     ] }) })
   ] });
 };
-var BarChart_default = import_react34.default.memo(ChartComponent);
+var BarChart_default = import_react35.default.memo(ChartComponent);
 
 // src/components/Chart/PieChart.tsx
-var import_react35 = __toESM(require("react"));
+var import_react36 = __toESM(require("react"));
 var import_axios3 = __toESM(require("axios"));
 var import_recharts2 = require("recharts");
 var import_jsx_runtime68 = require("react/jsx-runtime");
@@ -31885,11 +31977,11 @@ var DonutChart = ({
 }) => {
   const showLegends = props.showLegends ?? true;
   const canvasMode = props.canvasMode;
-  const [rawData, setRawData] = (0, import_react35.useState)([]);
-  const [localLoading, setLocalLoading] = (0, import_react35.useState)(false);
+  const [rawData, setRawData] = (0, import_react36.useState)([]);
+  const [localLoading, setLocalLoading] = (0, import_react36.useState)(false);
   const effectiveData = apiUrl ? rawData : props.data || [];
   const effectiveLoading = apiUrl ? localLoading : externalLoading;
-  (0, import_react35.useEffect)(() => {
+  (0, import_react36.useEffect)(() => {
     if (!apiUrl) return;
     let cancelled = false;
     const fetchData = async () => {
@@ -31925,7 +32017,7 @@ var DonutChart = ({
       cancelled = true;
     };
   }, [apiUrl]);
-  const data = (0, import_react35.useMemo)(() => {
+  const data = (0, import_react36.useMemo)(() => {
     if (!Array.isArray(effectiveData) || effectiveData.length === 0) return [];
     return effectiveData.map((item) => ({
       ...item,
@@ -31934,11 +32026,11 @@ var DonutChart = ({
       [dataLabel]: item[dataLabel] ?? "Unknown"
     }));
   }, [effectiveData, dataKey, dataLabel]);
-  const total = (0, import_react35.useMemo)(
+  const total = (0, import_react36.useMemo)(
     () => data.reduce((sum, d) => sum + (d[dataKey] ?? 0), 0),
     [data, dataKey]
   );
-  const formattedTotal = (0, import_react35.useMemo)(() => {
+  const formattedTotal = (0, import_react36.useMemo)(() => {
     if (total >= 1e6) {
       return `${(total / 1e6).toFixed(1)}M`;
     }
@@ -31947,7 +32039,7 @@ var DonutChart = ({
     }
     return total.toString();
   }, [total]);
-  const chartData = (0, import_react35.useMemo)(() => {
+  const chartData = (0, import_react36.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);
@@ -31970,12 +32062,12 @@ var DonutChart = ({
     if (chartData.length <= 6) return { inner: 85, outer: 150 };
     return { inner: 70, outer: 130 };
   };
-  const [mounted, setMounted] = (0, import_react35.useState)(false);
-  (0, import_react35.useEffect)(() => {
+  const [mounted, setMounted] = (0, import_react36.useState)(false);
+  (0, import_react36.useEffect)(() => {
     const timeout = setTimeout(() => setMounted(true), 100);
     return () => clearTimeout(timeout);
   }, []);
-  const renderLegends = (0, import_react35.useMemo)(() => {
+  const renderLegends = (0, import_react36.useMemo)(() => {
     if (!showLegends) return null;
     return /* @__PURE__ */ (0, import_jsx_runtime68.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(
@@ -32103,7 +32195,7 @@ var DonutChart = ({
     renderLegends
   ] });
 };
-var PieChart_default = import_react35.default.memo(DonutChart);
+var PieChart_default = import_react36.default.memo(DonutChart);
 
 // src/components/Blocks/EmailComposer.tsx
 var import_jsx_runtime69 = require("react/jsx-runtime");