@algorithm-shift/design-system 1.2.980 → 1.2.982

package/dist/index.mjs

@@ -382,7 +382,7 @@ var Typography = ({
       React4.createElement("span", {
         key: "html",
         className: "pointer-events-none",
-        dangerouslySetInnerHTML: { __html: textContent }
+        dangerouslySetInnerHTML: { __html: textContent || "--" }
       })
     ]
   );
@@ -26856,39 +26856,117 @@ function SplitButton({ style, textContent, className, list = [] }) {
 }
 
 // src/components/Basic/Icon/Icon.tsx
-import * as faSolid from "@fortawesome/free-solid-svg-icons";
+import { useEffect as useEffect3, useState as useState3 } from "react";
 import { FontAwesomeIcon as FontAwesomeIcon2 } from "@fortawesome/react-fontawesome";
 import { jsx as jsx18 } from "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] = useState3(icon || null);
+  useEffect3(() => {
+    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__ */ jsx18(
+    const numericSize = typeof iconSize === "number" ? iconSize : parseInt(iconSize, 10) || 16;
+    return /* @__PURE__ */ jsx18(
+      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__ */ jsx18(
       FontAwesomeIcon2,
       {
-        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__ */ jsx18(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__ */ jsx18(
+      "i",
+      {
+        className: cls,
+        style: { ...sizeStyle, ...style },
+        title,
+        "aria-hidden": title ? void 0 : true,
+        onClick: () => props.onClick?.(),
+        ...rest
+      }
+    );
   }
-  return /* @__PURE__ */ jsx18("div", { style, className, children: content });
-};
-var Icon_default = Icon2;
+  console.warn("Unknown icon set:", iconSet);
+  return null;
+}
 
 // src/components/Inputs/TextInput/TextInput.tsx
-import { useEffect as useEffect3 } from "react";
+import { useEffect as useEffect4 } from "react";
 
 // src/components/ui/input.tsx
 import { jsx as jsx19 } from "react/jsx-runtime";
@@ -26917,7 +26995,7 @@ var TextInput = ({ className, style, ...props }) => {
   const isDisabled = props.isDisabled ?? false;
   const isReadonly = props.isReadonly ?? false;
   const isAutocomplete = props.isAutocomplete ?? false;
-  useEffect3(() => {
+  useEffect4(() => {
     if (props.value !== void 0) {
       const e = { target: { value: props.value } };
       handleChange?.(e);
@@ -26959,7 +27037,7 @@ var TextInput = ({ className, style, ...props }) => {
 var TextInput_default = TextInput;
 
 // src/components/Inputs/NumberInput/NumberInput.tsx
-import { useEffect as useEffect4 } from "react";
+import { useEffect as useEffect5 } from "react";
 import { Fragment as Fragment4, jsx as jsx21, jsxs as jsxs8 } from "react/jsx-runtime";
 var NumberInput = ({ className, style, ...props }) => {
   const placeholder = props.placeholder ?? "Placeholder text";
@@ -26967,7 +27045,7 @@ var NumberInput = ({ className, style, ...props }) => {
   const isDisabled = props.isDisabled ?? false;
   const isReadonly = props.isReadonly ?? false;
   const isAutocomplete = props.isAutocomplete ?? false;
-  useEffect4(() => {
+  useEffect5(() => {
     if (props.value !== void 0) {
       const e = { target: { value: props.value } };
       handleChange?.(e);
@@ -27009,7 +27087,7 @@ var NumberInput = ({ className, style, ...props }) => {
 var NumberInput_default = NumberInput;
 
 // src/components/Inputs/EmailInput/EmailInput.tsx
-import { useEffect as useEffect5 } from "react";
+import { useEffect as useEffect6 } from "react";
 import { Fragment as Fragment5, jsx as jsx22, jsxs as jsxs9 } from "react/jsx-runtime";
 var EmailInput = ({ className, style, ...props }) => {
   const placeholder = props.placeholder ?? "Placeholder text";
@@ -27017,7 +27095,7 @@ var EmailInput = ({ className, style, ...props }) => {
   const isDisabled = props.isDisabled ?? false;
   const isReadonly = props.isReadonly ?? false;
   const isAutocomplete = props.isAutocomplete ?? false;
-  useEffect5(() => {
+  useEffect6(() => {
     if (props.value !== void 0) {
       const e = { target: { value: props.value } };
       handleChange?.(e);
@@ -27059,7 +27137,7 @@ var EmailInput = ({ className, style, ...props }) => {
 var EmailInput_default = EmailInput;
 
 // src/components/Inputs/PasswordInput/PasswordInput.tsx
-import { useEffect as useEffect6 } from "react";
+import { useEffect as useEffect7 } from "react";
 import { Fragment as Fragment6, jsx as jsx23, jsxs as jsxs10 } from "react/jsx-runtime";
 var PasswordInput = ({ className, style, ...props }) => {
   const placeholder = props.placeholder ?? "Placeholder text";
@@ -27067,7 +27145,7 @@ var PasswordInput = ({ className, style, ...props }) => {
   const isDisabled = props.isDisabled ?? false;
   const isReadonly = props.isReadonly ?? false;
   const isAutocomplete = props.isAutocomplete ?? false;
-  useEffect6(() => {
+  useEffect7(() => {
     if (props.value !== void 0) {
       const e = { target: { value: props.value } };
       handleChange?.(e);
@@ -27109,7 +27187,7 @@ var PasswordInput = ({ className, style, ...props }) => {
 var PasswordInput_default = PasswordInput;
 
 // src/components/Inputs/Textarea/Textarea.tsx
-import { useEffect as useEffect7 } from "react";
+import { useEffect as useEffect8 } from "react";
 
 // src/components/ui/textarea.tsx
 import { jsx as jsx24 } from "react/jsx-runtime";
@@ -27135,7 +27213,7 @@ var Textarea2 = ({ className, style, ...props }) => {
   const isDisabled = props.isDisabled ?? false;
   const isReadonly = props.isReadonly ?? false;
   const isAutocomplete = props.isAutocomplete ?? false;
-  useEffect7(() => {
+  useEffect8(() => {
     if (props.value !== void 0) {
       const e = { target: { value: props.value } };
       handleChange?.(e);
@@ -27169,7 +27247,7 @@ var Textarea2 = ({ className, style, ...props }) => {
 var Textarea_default = Textarea2;
 
 // src/components/Inputs/UrlInput/UrlInput.tsx
-import { useEffect as useEffect8 } from "react";
+import { useEffect as useEffect9 } from "react";
 import { Fragment as Fragment8, jsx as jsx26, jsxs as jsxs12 } from "react/jsx-runtime";
 var UrlInput = ({ className, style, ...props }) => {
   const placeholder = props.placeholder ?? "Placeholder text";
@@ -27177,7 +27255,7 @@ var UrlInput = ({ className, style, ...props }) => {
   const isDisabled = props.isDisabled ?? false;
   const isReadonly = props.isReadonly ?? false;
   const isAutocomplete = props.isAutocomplete ?? false;
-  useEffect8(() => {
+  useEffect9(() => {
     if (props.value !== void 0) {
       const e = { target: { value: props.value } };
       handleChange?.(e);
@@ -27222,7 +27300,7 @@ var UrlInput = ({ className, style, ...props }) => {
 var UrlInput_default = UrlInput;
 
 // src/components/Inputs/Checkbox/Checkbox.tsx
-import { useEffect as useEffect9 } from "react";
+import { useEffect as useEffect10 } from "react";
 
 // src/components/ui/checkbox.tsx
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
@@ -27287,7 +27365,7 @@ var CheckboxInput = ({ className, style, ...props }) => {
     }
     return false;
   };
-  useEffect9(() => {
+  useEffect10(() => {
     if (props.value) {
       handleChange(formatValue(props.value));
     }
@@ -27314,7 +27392,7 @@ var CheckboxInput = ({ className, style, ...props }) => {
 var Checkbox_default = CheckboxInput;
 
 // src/components/Inputs/RadioInput/RadioInput.tsx
-import { useEffect as useEffect10 } from "react";
+import { useEffect as useEffect11 } from "react";
 
 // src/components/ui/radio-group.tsx
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
@@ -27374,7 +27452,7 @@ var RadioInput = ({
     value: item[dataKey || "value"],
     label: item[dataLabel || "label"]
   }));
-  useEffect10(() => {
+  useEffect11(() => {
     if (props.value !== void 0) {
       handleChange?.(props.value);
     }
@@ -27404,7 +27482,7 @@ var RadioInput = ({
 var RadioInput_default = RadioInput;
 
 // src/components/Inputs/MultiCheckbox/MultiCheckbox.tsx
-import { useEffect as useEffect11, useState as useState3, useRef, useCallback } from "react";
+import { useEffect as useEffect12, useState as useState4, useRef, useCallback } from "react";
 import { jsx as jsx32, jsxs as jsxs15 } from "react/jsx-runtime";
 function MultiCheckbox({
   apiUrl,
@@ -27423,10 +27501,10 @@ function MultiCheckbox({
   onUncheckItems,
   ...props
 }) {
-  const [options, setOptions] = useState3([]);
-  const [page, setPage] = useState3(1);
-  const [hasMore, setHasMore] = useState3(true);
-  const [pageLoading, setPageLoading] = useState3(false);
+  const [options, setOptions] = useState4([]);
+  const [page, setPage] = useState4(1);
+  const [hasMore, setHasMore] = useState4(true);
+  const [pageLoading, setPageLoading] = useState4(false);
   const loadMoreRef = useRef(null);
   const normalizeInput = (val) => {
     if (!val) return [];
@@ -27486,7 +27564,7 @@ function MultiCheckbox({
       setPageLoading(false);
     }
   }, [source, pageLoading, fetchApiPage, mapData, pageSize]);
-  useEffect11(() => {
+  useEffect12(() => {
     if (source === "api") {
       setOptions([]);
       setPage(1);
@@ -27496,10 +27574,10 @@ function MultiCheckbox({
       setHasMore(false);
     }
   }, [source, JSON.stringify(data)]);
-  useEffect11(() => {
+  useEffect12(() => {
     if (source === "api") loadPage();
   }, [page, source]);
-  useEffect11(() => {
+  useEffect12(() => {
     if (source !== "api") return;
     if (!hasMore || pageLoading) return;
     const observer = new IntersectionObserver((entries) => {
@@ -27562,7 +27640,7 @@ function MultiCheckbox({
 }
 
 // src/components/Inputs/RichText/RichText.tsx
-import { useEffect as useEffect12 } from "react";
+import { useEffect as useEffect13 } from "react";
 
 // src/components/Global/TinyMceEditor.tsx
 import { useMemo as useMemo2, useRef as useRef2 } from "react";
@@ -27638,7 +27716,7 @@ function MyEditor({
 // src/components/Inputs/RichText/RichText.tsx
 import { jsx as jsx34, jsxs as jsxs16 } from "react/jsx-runtime";
 function RichText({ className, style, ...props }) {
-  useEffect12(() => {
+  useEffect13(() => {
     if (props.value !== void 0) {
       handleChange?.(props.value);
     }
@@ -27663,7 +27741,7 @@ function RichText({ className, style, ...props }) {
 }
 
 // src/components/Inputs/Dropdown/Dropdown.tsx
-import { useEffect as useEffect15 } from "react";
+import { useEffect as useEffect16 } from "react";
 
 // src/components/ui/select.tsx
 import * as SelectPrimitive from "@radix-ui/react-select";
@@ -27792,17 +27870,17 @@ function SelectScrollDownButton({
 }
 
 // src/components/Inputs/Dropdown/LazyDropdown.tsx
-import { useState as useState5, useRef as useRef4, useEffect as useEffect14, useMemo as useMemo3 } from "react";
+import { useState as useState6, useRef as useRef4, useEffect as useEffect15, useMemo as useMemo3 } from "react";
 
 // src/hooks/useLazyDropdown.ts
-import { useState as useState4, useEffect as useEffect13, useRef as useRef3, useCallback as useCallback2 } from "react";
+import { useState as useState5, useEffect as useEffect14, useRef as useRef3, useCallback as useCallback2 } from "react";
 import axios from "axios";
 function useLazyDropdown(config) {
-  const [options, setOptions] = useState4([]);
-  const [page, setPage] = useState4(1);
-  const [hasMore, setHasMore] = useState4(true);
-  const [loading, setLoading] = useState4(false);
-  const [searchTerm, setSearchTerm] = useState4("");
+  const [options, setOptions] = useState5([]);
+  const [page, setPage] = useState5(1);
+  const [hasMore, setHasMore] = useState5(true);
+  const [loading, setLoading] = useState5(false);
+  const [searchTerm, setSearchTerm] = useState5("");
   const debounceTimer = useRef3(null);
   const allDataRef = useRef3([]);
   const configRef = useRef3(config);
@@ -27815,7 +27893,7 @@ function useLazyDropdown(config) {
       return true;
     });
   };
-  useEffect13(() => {
+  useEffect14(() => {
     configRef.current = config;
   }, [config]);
   function getValueByPath2(obj, path) {
@@ -27963,7 +28041,7 @@ function useLazyDropdown(config) {
       setLoading(false);
     }
   };
-  useEffect13(() => {
+  useEffect14(() => {
     const cfg = configRef.current;
     if (!cfg.enabled || !cfg.value || cfg.dataSource !== "api" || !cfg.apiUrl) return;
     if (cfg.isMultiSelect) {
@@ -27992,13 +28070,13 @@ function useLazyDropdown(config) {
     setSearchTerm("");
     setPage(1);
   }, []);
-  useEffect13(() => {
+  useEffect14(() => {
     if (config.initialData?.length) {
       allDataRef.current = config.initialData;
       loadPage(1, "");
     }
   }, [config.initialData]);
-  useEffect13(() => {
+  useEffect14(() => {
     return () => {
       if (debounceTimer.current) clearTimeout(debounceTimer.current);
     };
@@ -28059,10 +28137,11 @@ function LazySelectDropdown({
   dataLabel = "name",
   errorMessage,
   axiosInstance,
-  enableAddNewOption = false
+  enableAddNewOption = false,
+  enforceStrictQueryParams = false
 }) {
-  const [isOpen, setIsOpen] = useState5(false);
-  const [searchTerm, setSearchTerm] = useState5("");
+  const [isOpen, setIsOpen] = useState6(false);
+  const [searchTerm, setSearchTerm] = useState6("");
   const dropdownRef = useRef4(null);
   const observerTarget = useRef4(null);
   const {
@@ -28083,10 +28162,11 @@ function LazySelectDropdown({
     dataLabel,
     initialData: options || [],
     value,
-    axiosInstance
+    axiosInstance,
+    enforceStrictQueryParams
   });
   const selectedOption = useMemo3(() => lazyOptions.find((opt) => opt.value === value), [lazyOptions, value]);
-  useEffect14(() => {
+  useEffect15(() => {
     const handleClickOutside = (e) => {
       if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
         setIsOpen(false);
@@ -28096,7 +28176,7 @@ function LazySelectDropdown({
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, []);
-  useEffect14(() => {
+  useEffect15(() => {
     if (!isOpen || !hasMore || loading) return;
     const observer = new IntersectionObserver(
       (entries) => {
@@ -28236,7 +28316,7 @@ var Dropdown = ({ className, style, ...props }) => {
   const isEditable = props.isEditable ?? true;
   const isDisabled = props.isDisabled ?? false;
   const isReadonly = props.isReadonly ?? false;
-  useEffect15(() => {
+  useEffect16(() => {
     if (props.value !== void 0) {
       handleChange(props.value);
     }
@@ -28295,7 +28375,7 @@ var Dropdown = ({ className, style, ...props }) => {
 var Dropdown_default = Dropdown;
 
 // src/components/Inputs/SwitchToggle/SwitchToggle.tsx
-import { useEffect as useEffect16 } from "react";
+import { useEffect as useEffect17 } from "react";
 
 // src/components/ui/switch.tsx
 import * as SwitchPrimitive from "@radix-ui/react-switch";
@@ -28331,7 +28411,7 @@ import { Fragment as Fragment13, jsx as jsx39, jsxs as jsxs20 } from "react/jsx-
 var SwitchToggle = ({ className, style, ...props }) => {
   const isEditable = props.isEditable ?? true;
   const isDisabled = props.isDisabled ?? false;
-  useEffect16(() => {
+  useEffect17(() => {
     if (props.value !== void 0) {
       handleChange?.(props.value);
     }
@@ -28358,7 +28438,7 @@ var SwitchToggle = ({ className, style, ...props }) => {
 var SwitchToggle_default = SwitchToggle;
 
 // src/components/Inputs/PhoneInput/PhoneInput.tsx
-import { useEffect as useEffect17 } from "react";
+import { useEffect as useEffect18 } from "react";
 import { PhoneInput as PhoneInputField } from "react-international-phone";
 import "react-international-phone/style.css";
 import { Fragment as Fragment14, jsx as jsx40, jsxs as jsxs21 } from "react/jsx-runtime";
@@ -28373,7 +28453,7 @@ var PhoneInput = ({ className, style, ...props }) => {
   const placeholder = props.placeholder ?? "Enter phone number";
   const isEditable = props.isEditable ?? true;
   const isDisabled = props.isDisabled ?? false;
-  useEffect17(() => {
+  useEffect18(() => {
     if (props.value !== void 0) {
       const normalized = ensureIndiaCode(props.value);
       handleChange?.(normalized);
@@ -28420,7 +28500,7 @@ var PhoneInput = ({ className, style, ...props }) => {
 var PhoneInput_default = PhoneInput;
 
 // src/components/Inputs/SearchInput/SearchInput.tsx
-import { useEffect as useEffect18 } from "react";
+import { useEffect as useEffect19 } from "react";
 import { Fragment as Fragment15, jsx as jsx41, jsxs as jsxs22 } from "react/jsx-runtime";
 var SearchInput = ({ className, style, ...props }) => {
   const placeholder = props.placeholder ?? "Placeholder text";
@@ -28428,7 +28508,7 @@ var SearchInput = ({ className, style, ...props }) => {
   const isDisabled = props.isDisabled ?? false;
   const isReadonly = props.isReadonly ?? false;
   const isAutocomplete = props.isAutocomplete ?? false;
-  useEffect18(() => {
+  useEffect19(() => {
     if (props.value !== void 0) {
       const e = { target: { value: props.value } };
       handleChange?.(e);
@@ -28470,11 +28550,11 @@ var SearchInput = ({ className, style, ...props }) => {
 var SearchInput_default = SearchInput;
 
 // src/components/Inputs/FileInput/FileInput.tsx
-import { useEffect as useEffect19 } from "react";
+import { useEffect as useEffect20 } from "react";
 import { jsx as jsx42, jsxs as jsxs23 } from "react/jsx-runtime";
 var FileInput2 = ({ className, style, ...props }) => {
   const placeholder = props.placeholder ?? "Placeholder text";
-  useEffect19(() => {
+  useEffect20(() => {
     if (props.value !== void 0) {
       const e = { target: { value: props.value } };
       handleChange?.(e);
@@ -28514,11 +28594,11 @@ var FileInput2 = ({ className, style, ...props }) => {
 var FileInput_default = FileInput2;
 
 // src/components/Inputs/DatePicker/DatePicker.tsx
-import * as React6 from "react";
+import * as React7 from "react";
 import { format } from "date-fns";
 
 // src/components/ui/calendar.tsx
-import * as React5 from "react";
+import * as React6 from "react";
 import { DayPicker, getDefaultClassNames } from "react-day-picker";
 import { jsx as jsx43 } from "react/jsx-runtime";
 function Calendar2({
@@ -28673,8 +28753,8 @@ function CalendarDayButton({
   ...props
 }) {
   const defaultClassNames = 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__ */ jsx43(
@@ -28768,25 +28848,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;
@@ -28798,8 +28878,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);
@@ -28902,7 +28982,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 format(date, "dd-MM-yyyy");
@@ -28913,11 +28993,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 = () => {
@@ -29063,18 +29143,18 @@ function DateTimePicker({
 }
 
 // src/components/Inputs/DateRange/DateRange.tsx
-import React7, { useEffect as useEffect22 } from "react";
+import React8, { useEffect as useEffect23 } from "react";
 import { addDays, format as format2 } from "date-fns";
 import { Fragment as Fragment17, jsx as jsx46, jsxs as jsxs25 } from "react/jsx-runtime";
 var DateRange = ({ className, style, ...props }) => {
   const isDateRange = (val) => !!val && val.from instanceof Date;
-  const [date, setDate] = React7.useState(
+  const [date, setDate] = React8.useState(
     isDateRange(props.value) ? props.value : {
       from: /* @__PURE__ */ new Date(),
       to: addDays(/* @__PURE__ */ new Date(), 7)
     }
   );
-  useEffect22(() => {
+  useEffect23(() => {
     if (props.value && isDateRange(props.value)) {
       handleChange?.(props.value);
     }
@@ -29121,7 +29201,7 @@ var DateRange = ({ className, style, ...props }) => {
 var DateRange_default = DateRange;
 
 // src/components/Inputs/TextInputGroup/TextInputGroup.tsx
-import { useEffect as useEffect23 } from "react";
+import { useEffect as useEffect24 } from "react";
 import { Fragment as Fragment18, jsx as jsx47, jsxs as jsxs26 } from "react/jsx-runtime";
 var TextInputGroup = ({ className, style, prepend, append, ...props }) => {
   const placeholder = props.placeholder ?? "Placeholder text";
@@ -29129,7 +29209,7 @@ var TextInputGroup = ({ className, style, prepend, append, ...props }) => {
   const isDisabled = props.isDisabled ?? false;
   const isReadonly = props.isReadonly ?? false;
   const isAutocomplete = props.isAutocomplete ?? false;
-  useEffect23(() => {
+  useEffect24(() => {
     if (props.value !== void 0) {
       const e = { target: { value: props.value } };
       handleChange?.(e);
@@ -29182,10 +29262,9 @@ var TextInputGroup = ({ className, style, prepend, append, ...props }) => {
 var TextInputGroup_default = TextInputGroup;
 
 // src/components/Inputs/Multiselect/MultiSelect.tsx
-import { useState as useState7, useRef as useRef6, useEffect as useEffect24, useMemo as useMemo5 } from "react";
+import { useState as useState8, useRef as useRef6, useEffect as useEffect25, useMemo as useMemo5 } from "react";
 import { Fragment as Fragment19, jsx as jsx48, jsxs as jsxs27 } from "react/jsx-runtime";
 function LazyMultiSelectDropdown({
-  options = [],
   value = [],
   onChange,
   placeholder,
@@ -29200,10 +29279,11 @@ function LazyMultiSelectDropdown({
   dataLabel = "name",
   errorMessage,
   axiosInstance,
-  outputFormat = "array"
+  outputFormat = "array",
+  ...props
 }) {
-  const [isOpen, setIsOpen] = useState7(false);
-  const [searchTerm, setSearchTerm] = useState7("");
+  const [isOpen, setIsOpen] = useState8(false);
+  const [searchTerm, setSearchTerm] = useState8("");
   const dropdownRef = useRef6(null);
   const observerTarget = useRef6(null);
   const ensureUnique = (arr) => {
@@ -29222,26 +29302,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) {
@@ -29256,7 +29337,7 @@ function LazyMultiSelectDropdown({
   const selectedOptions = useMemo5(() => {
     return lazyOptions.filter((opt) => normalizedValue.includes(opt.value));
   }, [lazyOptions, normalizedValue]);
-  useEffect24(() => {
+  useEffect25(() => {
     const handleClick = (e) => {
       if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
         setIsOpen(false);
@@ -29265,7 +29346,7 @@ function LazyMultiSelectDropdown({
     document.addEventListener("mousedown", handleClick);
     return () => document.removeEventListener("mousedown", handleClick);
   }, []);
-  useEffect24(() => {
+  useEffect25(() => {
     if (!isOpen || !hasMore || loading) return;
     const obs = new IntersectionObserver(
       (entries) => {
@@ -29304,10 +29385,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__ */ jsxs27(
@@ -29337,7 +29419,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,
@@ -29359,7 +29441,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__ */ jsx48("div", { className: "px-3 py-4 text-center text-gray-500", children: "Loading..." }) : lazyOptions.length > 0 ? /* @__PURE__ */ jsxs27(Fragment19, { children: [
+        children: dataLoading && lazyOptions.length === 0 ? /* @__PURE__ */ jsx48("div", { className: "px-3 py-3 text-center text-gray-500", children: "Loading..." }) : lazyOptions.length > 0 ? /* @__PURE__ */ jsxs27(Fragment19, { children: [
           lazyOptions.map((option) => {
             const isSelected = normalizedValue.includes(option.value);
             return /* @__PURE__ */ jsxs27(
@@ -29386,14 +29468,14 @@ function LazyMultiSelectDropdown({
               children: loading ? "Loading\u2026" : "Scroll for more\u2026"
             }
           )
-        ] }) : /* @__PURE__ */ jsx48("div", { className: "px-3 py-4 text-center text-gray-500", children: "No results" })
+        ] }) : /* @__PURE__ */ jsx48("div", { className: "px-3 py-3 text-center text-gray-500", children: "No results" })
       }
     ) })
   ] });
 }
 
 // src/components/ui/data-table.tsx
-import * as React9 from "react";
+import * as React10 from "react";
 import { faEllipsisH } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon as FontAwesomeIcon3 } from "@fortawesome/react-fontawesome";
 import {
@@ -29493,7 +29575,7 @@ function TableCell({ className, ...props }) {
 import { createColumnHelper } from "@tanstack/react-table";
 
 // src/lib/table/cellRendererFactory.tsx
-import React8 from "react";
+import React9 from "react";
 import Image2 from "next/image";
 
 // src/lib/dayjs-setup.ts
@@ -29579,9 +29661,9 @@ var getContrastColor = (bg) => {
 };
 var sanitizeValue = (val) => {
   if (val == null) return null;
-  if (React8.isValidElement(val)) return val;
+  if (React9.isValidElement(val)) return val;
   if (typeof val === "string" || typeof val === "number") return val;
-  if (Array.isArray(val)) return val.map((v, i) => /* @__PURE__ */ jsx50(React8.Fragment, { children: sanitizeValue(v) }, i));
+  if (Array.isArray(val)) return val.map((v, i) => /* @__PURE__ */ jsx50(React9.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;
@@ -29726,6 +29808,13 @@ var cellRendererFactory = (renderer, rendererProps, value, row, customRenderers
           onChange: info.row.getToggleSelectedHandler()
         }
       );
+    case "html":
+      return /* @__PURE__ */ jsx50(
+        "span",
+        {
+          dangerouslySetInnerHTML: { __html: String(rowValue || formattedValue) }
+        }
+      );
     /* -------------------- ADVANCED -------------------- */
     case "custom": {
       const CustomRenderer = customRenderers[rendererProps?.customRendererId] || customRenderers[rendererProps?.rendererId];
@@ -29827,10 +29916,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) {
@@ -29856,8 +29945,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 = useReactTable({
     data: tableData,
     columns: dynamicCols,
@@ -29922,7 +30011,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);
@@ -29998,17 +30087,20 @@ function DataTable({
             ),
             "Toggle All"
           ] }),
-          table.getAllLeafColumns().map((column) => /* @__PURE__ */ jsxs29("label", { className: "flex items-center gap-2 text-sm", children: [
-            /* @__PURE__ */ jsx51(
-              "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__ */ jsxs29("label", { className: "flex items-center gap-2 text-sm", children: [
+              /* @__PURE__ */ jsx51(
+                "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);
+          })
         ] })
       ] })
     ] }),
@@ -30678,7 +30770,7 @@ var HistoryTimeline = ({
 var HistoryTimeline_default = HistoryTimeline;
 
 // src/components/Navigation/Tabs/Tabs.tsx
-import { useCallback as useCallback3, useMemo as useMemo8, useState as useState9 } from "react";
+import { useCallback as useCallback3, useMemo as useMemo8, useState as useState10 } from "react";
 import Link5 from "next/link";
 import { usePathname, useRouter } from "next/navigation";
 
@@ -30836,7 +30928,7 @@ function showSonnerToast({
 // src/components/Navigation/Tabs/Tabs.tsx
 import { Fragment as Fragment22, jsx as jsx59, jsxs as jsxs35 } from "react/jsx-runtime";
 var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode, isBuilder = false, source, parentKey, menuNameKey, menuUrlKey, loading, bgActiveColor, textActiveColor }) => {
-  const [openIndex, setOpenIndex] = useState9(null);
+  const [openIndex, setOpenIndex] = useState10(null);
   const currentPathname = usePathname();
   function groupMenus(menus = []) {
     const menuMap = /* @__PURE__ */ new Map();
@@ -30900,8 +30992,8 @@ var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode, isBuil
     return tab.children.some((child) => isActive(child.url));
   };
   const router = useRouter();
-  const [showExitDialog, setShowExitDialog] = useState9(false);
-  const [pendingUrl, setPendingUrl] = useState9(null);
+  const [showExitDialog, setShowExitDialog] = useState10(false);
+  const [pendingUrl, setPendingUrl] = useState10(null);
   const handleBuilderExit = useCallback3(
     (e, url) => {
       if (isBuilder) {
@@ -31069,7 +31161,7 @@ var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode, isBuil
 var Tabs_default = Tabs;
 
 // src/components/Navigation/Stages/Stages.tsx
-import React10, { useState as useState10 } from "react";
+import React11, { useState as useState11 } from "react";
 import { jsx as jsx60, jsxs as jsxs36 } from "react/jsx-runtime";
 var StagesComponent = ({
   stages,
@@ -31086,8 +31178,8 @@ var StagesComponent = ({
   triggerOnClick = false,
   canvasMode = "desktop"
 }) => {
-  const [activeStage, setActiveStage] = useState10(currentStage || (stages && stages.length > 0 ? stages[0][dataKey] : null));
-  const [isCompleted, setIsCompleted] = useState10(false);
+  const [activeStage, setActiveStage] = useState11(currentStage || (stages && stages.length > 0 ? stages[0][dataKey] : null));
+  const [isCompleted, setIsCompleted] = useState11(false);
   const updateStage = (stageKey) => {
     setActiveStage(stageKey);
     onStageChange?.(stageKey);
@@ -31155,7 +31247,7 @@ var StagesComponent = ({
               const currentIndex = stages.findIndex((s) => s[dataKey] === activeStage);
               const isCompletedStage = isAllStagesCompleted || index <= currentIndex;
               const isActive = !isAllStagesCompleted && index === currentIndex;
-              return /* @__PURE__ */ jsxs36(React10.Fragment, { children: [
+              return /* @__PURE__ */ jsxs36(React11.Fragment, { children: [
                 /* @__PURE__ */ jsx60(
                   "button",
                   {
@@ -31223,10 +31315,10 @@ import { jsx as jsx63, jsxs as jsxs38 } from "react/jsx-runtime";
 import { jsx as jsx64 } from "react/jsx-runtime";
 
 // src/components/ui/avatar.tsx
-import * as React11 from "react";
+import * as React12 from "react";
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
 import { jsx as jsx65 } from "react/jsx-runtime";
-var Avatar = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx65(
+var Avatar = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx65(
   AvatarPrimitive.Root,
   {
     ref,
@@ -31238,7 +31330,7 @@ var Avatar = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ *
   }
 ));
 Avatar.displayName = AvatarPrimitive.Root.displayName;
-var AvatarImage = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx65(
+var AvatarImage = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx65(
   AvatarPrimitive.Image,
   {
     ref,
@@ -31247,7 +31339,7 @@ var AvatarImage = React11.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 AvatarImage.displayName = AvatarPrimitive.Image.displayName;
-var AvatarFallback = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx65(
+var AvatarFallback = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx65(
   AvatarPrimitive.Fallback,
   {
     ref,
@@ -31265,7 +31357,7 @@ import Link6 from "next/link";
 import Image4 from "next/image";
 import { useRouter as useRouter2 } from "next/navigation";
 import { DropdownMenuSeparator } from "@radix-ui/react-dropdown-menu";
-import { useCallback as useCallback4, useMemo as useMemo9, useState as useState11 } from "react";
+import { useCallback as useCallback4, useMemo as useMemo9, useState as useState12 } from "react";
 import { Fragment as Fragment23, jsx as jsx66, jsxs as jsxs39 } from "react/jsx-runtime";
 function Navbar({
   style,
@@ -31286,8 +31378,8 @@ function Navbar({
 }) {
   const isMobileView = canvasMode === "mobile" || canvasMode === "tablet";
   const router = useRouter2();
-  const [showExitDialog, setShowExitDialog] = useState11(false);
-  const [pendingUrl, setPendingUrl] = useState11(null);
+  const [showExitDialog, setShowExitDialog] = useState12(false);
+  const [pendingUrl, setPendingUrl] = useState12(null);
   const handleBuilderExit = useCallback4(
     (e, url) => {
       if (isBuilder) {
@@ -31407,7 +31499,7 @@ function Navbar({
 }
 
 // src/components/Chart/BarChart.tsx
-import React12, { useEffect as useEffect25, useMemo as useMemo10, useState as useState12, useCallback as useCallback5 } from "react";
+import React13, { useEffect as useEffect26, useMemo as useMemo10, useState as useState13, useCallback as useCallback5 } from "react";
 import axios2 from "axios";
 import {
   BarChart,
@@ -31479,13 +31571,13 @@ var ChartComponent = ({
   canvasMode,
   ...props
 }) => {
-  const [rawData, setRawData] = useState12([]);
-  const [rawMeta, setRawMeta] = useState12(null);
-  const [localLoading, setLocalLoading] = useState12(false);
-  const [currentPage, setCurrentPage] = useState12(1);
+  const [rawData, setRawData] = useState13([]);
+  const [rawMeta, setRawMeta] = useState13(null);
+  const [localLoading, setLocalLoading] = useState13(false);
+  const [currentPage, setCurrentPage] = useState13(1);
   const effectiveData = apiUrl ? rawData : props.data || [];
   const effectiveLoading = apiUrl ? localLoading : externalLoading;
-  useEffect25(() => {
+  useEffect26(() => {
     if (apiUrl) {
       setCurrentPage(1);
     }
@@ -31527,7 +31619,7 @@ var ChartComponent = ({
       if (!cancelled) setLocalLoading(false);
     }
   }, [apiUrl, limit]);
-  useEffect25(() => {
+  useEffect26(() => {
     if (!apiUrl) return;
     fetchData(currentPage);
   }, [apiUrl, currentPage, fetchData]);
@@ -31723,10 +31815,10 @@ var ChartComponent = ({
     ] }) })
   ] });
 };
-var BarChart_default = React12.memo(ChartComponent);
+var BarChart_default = React13.memo(ChartComponent);
 
 // src/components/Chart/PieChart.tsx
-import React13, { useEffect as useEffect26, useMemo as useMemo11, useState as useState13 } from "react";
+import React14, { useEffect as useEffect27, useMemo as useMemo11, useState as useState14 } from "react";
 import axios3 from "axios";
 import {
   PieChart,
@@ -31812,11 +31904,11 @@ var DonutChart = ({
 }) => {
   const showLegends = props.showLegends ?? true;
   const canvasMode = props.canvasMode;
-  const [rawData, setRawData] = useState13([]);
-  const [localLoading, setLocalLoading] = useState13(false);
+  const [rawData, setRawData] = useState14([]);
+  const [localLoading, setLocalLoading] = useState14(false);
   const effectiveData = apiUrl ? rawData : props.data || [];
   const effectiveLoading = apiUrl ? localLoading : externalLoading;
-  useEffect26(() => {
+  useEffect27(() => {
     if (!apiUrl) return;
     let cancelled = false;
     const fetchData = async () => {
@@ -31897,8 +31989,8 @@ var DonutChart = ({
     if (chartData.length <= 6) return { inner: 85, outer: 150 };
     return { inner: 70, outer: 130 };
   };
-  const [mounted, setMounted] = useState13(false);
-  useEffect26(() => {
+  const [mounted, setMounted] = useState14(false);
+  useEffect27(() => {
     const timeout = setTimeout(() => setMounted(true), 100);
     return () => clearTimeout(timeout);
   }, []);
@@ -32030,7 +32122,7 @@ var DonutChart = ({
     renderLegends
   ] });
 };
-var PieChart_default = React13.memo(DonutChart);
+var PieChart_default = React14.memo(DonutChart);
 
 // src/components/Blocks/EmailComposer.tsx
 import { jsx as jsx69, jsxs as jsxs42 } from "react/jsx-runtime";
@@ -32151,7 +32243,7 @@ export {
   Flex_default as FlexLayout,
   Grid_default as GridLayout,
   HistoryTimeline_default as HistoryTimeline,
-  Icon_default as Icon,
+  Icon2 as Icon,
   Image_default as Image,
   Modal,
   MultiCheckbox,