@algorithm-shift/design-system 1.3.126 → 1.3.128

package/dist/index.js

@@ -33,6 +33,7 @@ var src_exports = {};
 __export(src_exports, {
   Accordion: () => Accordion_default,
   AccordionGroup: () => AccordionGroup_default,
+  Audio: () => Audio_default,
   BarChart: () => BarChart_default,
   Breadcrumb: () => Breadcrumb_default,
   Button: () => Button_default,
@@ -1174,13 +1175,98 @@ function Icon(props) {
   return null;
 }
 
-// src/components/Inputs/TextInput/TextInput.tsx
+// src/components/Basic/Audio/Audio.tsx
 var import_react10 = require("react");
+var import_lucide_react4 = require("lucide-react");
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var formatTime = (time) => {
+  if (isNaN(time) || !isFinite(time)) return "00:00";
+  const minutes = Math.floor(time / 60);
+  const seconds = Math.floor(time % 60);
+  return `${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
+};
+var AudioWrapper = (props) => {
+  const audioRef = (0, import_react10.useRef)(null);
+  const [isPlaying, setIsPlaying] = (0, import_react10.useState)(false);
+  const [currentTime, setCurrentTime] = (0, import_react10.useState)(0);
+  const [duration, setDuration] = (0, import_react10.useState)(0);
+  (0, import_react10.useEffect)(() => {
+    const audioEl = audioRef.current;
+    if (!audioEl) return;
+    const handleEnded = () => setIsPlaying(false);
+    const handlePause = () => setIsPlaying(false);
+    const handlePlay = () => setIsPlaying(true);
+    const handleTimeUpdate = () => setCurrentTime(audioEl.currentTime);
+    const handleLoadedMetadata = () => setDuration(audioEl.duration);
+    audioEl.addEventListener("ended", handleEnded);
+    audioEl.addEventListener("pause", handlePause);
+    audioEl.addEventListener("play", handlePlay);
+    audioEl.addEventListener("timeupdate", handleTimeUpdate);
+    audioEl.addEventListener("loadedmetadata", handleLoadedMetadata);
+    return () => {
+      audioEl.removeEventListener("ended", handleEnded);
+      audioEl.removeEventListener("pause", handlePause);
+      audioEl.removeEventListener("play", handlePlay);
+      audioEl.removeEventListener("timeupdate", handleTimeUpdate);
+      audioEl.removeEventListener("loadedmetadata", handleLoadedMetadata);
+    };
+  }, []);
+  const togglePlay = () => {
+    if (audioRef.current) {
+      if (isPlaying) {
+        audioRef.current.pause();
+      } else {
+        audioRef.current.play();
+      }
+    }
+  };
+  const handleSeek = (e) => {
+    const time = Number(e.target.value);
+    if (audioRef.current) {
+      audioRef.current.currentTime = time;
+      setCurrentTime(time);
+    }
+  };
+  const url = props.data || props.src || props.value;
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center gap-3 p-3 bg-white rounded-lg border shadow-sm w-full min-w-[250px]", children: [
+    url && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("audio", { ref: audioRef, src: url, preload: "metadata" }),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      "button",
+      {
+        onClick: togglePlay,
+        disabled: !url,
+        className: "p-2 flex-shrink-0 flex items-center justify-center text-blue-600 bg-blue-50 rounded-full hover:bg-blue-100 disabled:opacity-50 disabled:bg-gray-50 disabled:text-gray-400 transition-colors",
+        title: isPlaying ? "Pause Audio" : "Play Audio",
+        children: isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react4.Pause, { size: 20, className: "fill-current" }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react4.Play, { size: 20, className: "fill-current transform translate-x-0.5" })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex-1 flex items-center gap-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text-xs font-medium text-gray-500 tabular-nums w-10 text-right", children: formatTime(currentTime) }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        "input",
+        {
+          type: "range",
+          min: "0",
+          max: duration || 100,
+          value: currentTime,
+          onChange: handleSeek,
+          disabled: !url,
+          className: "flex-1 h-1.5 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-blue-600 disabled:accent-gray-400"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text-xs font-medium text-gray-500 tabular-nums w-10", children: formatTime(duration) })
+    ] })
+  ] });
+};
+var Audio_default = AudioWrapper;
+
+// src/components/Inputs/TextInput/TextInput.tsx
+var import_react11 = require("react");
 
 // src/components/ui/input.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 function Input({ className, type, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     "input",
     {
       type,
@@ -1197,14 +1283,14 @@ function Input({ className, type, ...props }) {
 }
 
 // src/components/Inputs/TextInput/TextInput.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 var TextInput = ({ className, style, ...props }) => {
   const placeholder = props.placeholder || "Placeholder text";
   const isEditable = props.isEditable ?? true;
   const isDisabled = props.isDisabled ?? false;
   const isReadonly = props.isReadonly ?? false;
   const isAutocomplete = props.isAutocomplete ?? false;
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     if (props.value !== void 0) {
       const e = { target: { value: props.value }, type: "change" };
       handleChange?.(e);
@@ -1220,8 +1306,8 @@ var TextInput = ({ className, style, ...props }) => {
     if (value === null || value === void 0) return "";
     return value;
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
       Input,
       {
         type: props.inputType || "text",
@@ -1240,21 +1326,21 @@ var TextInput = ({ className, style, ...props }) => {
         readOnly: isReadonly
       }
     ),
-    props.errorMessage && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "mt-1 text-xs text-red-500", children: props.errorMessage })
+    props.errorMessage && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "mt-1 text-xs text-red-500", children: props.errorMessage })
   ] });
 };
 var TextInput_default = TextInput;
 
 // src/components/Inputs/NumberInput/NumberInput.tsx
-var import_react11 = require("react");
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_react12 = require("react");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 var NumberInput = ({ className, style, ...props }) => {
   const placeholder = props.placeholder ?? "Placeholder text";
   const isEditable = props.isEditable ?? true;
   const isDisabled = props.isDisabled ?? false;
   const isReadonly = props.isReadonly ?? false;
   const isAutocomplete = props.isAutocomplete ?? false;
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     if (props.value !== void 0) {
       const e = { target: { value: props.value }, type: "change" };
       handleChange?.(e);
@@ -1270,8 +1356,8 @@ var NumberInput = ({ className, style, ...props }) => {
     if (value === null || value === void 0) return 0;
     return value;
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "flex justify-start items-center relative", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "flex justify-start items-center relative", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
       Input,
       {
         type: props.inputType || "number",
@@ -1290,21 +1376,21 @@ var NumberInput = ({ className, style, ...props }) => {
         readOnly: isReadonly
       }
     ) }),
-    props.errorMessage && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "mt-1 text-xs text-red-500", children: props.errorMessage })
+    props.errorMessage && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "mt-1 text-xs text-red-500", children: props.errorMessage })
   ] });
 };
 var NumberInput_default = NumberInput;
 
 // src/components/Inputs/EmailInput/EmailInput.tsx
-var import_react12 = require("react");
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_react13 = require("react");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 var EmailInput = ({ className, style, ...props }) => {
   const placeholder = props.placeholder ?? "Placeholder text";
   const isEditable = props.isEditable ?? true;
   const isDisabled = props.isDisabled ?? false;
   const isReadonly = props.isReadonly ?? false;
   const isAutocomplete = props.isAutocomplete ?? false;
-  (0, import_react12.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     if (props.value !== void 0) {
       const e = { target: { value: props.value }, type: "change" };
       handleChange?.(e);
@@ -1320,8 +1406,8 @@ var EmailInput = ({ className, style, ...props }) => {
     if (value === null || value === void 0) return "";
     return value;
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "flex justify-start items-center relative", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "flex justify-start items-center relative", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       Input,
       {
         type: props.inputType || "email",
@@ -1340,21 +1426,21 @@ var EmailInput = ({ className, style, ...props }) => {
         readOnly: isReadonly
       }
     ) }),
-    props.errorMessage && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "mt-1 text-xs text-red-500", children: props.errorMessage })
+    props.errorMessage && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "mt-1 text-xs text-red-500", children: props.errorMessage })
   ] });
 };
 var EmailInput_default = EmailInput;
 
 // src/components/Inputs/PasswordInput/PasswordInput.tsx
-var import_react13 = require("react");
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_react14 = require("react");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 var PasswordInput = ({ className, style, ...props }) => {
   const placeholder = props.placeholder ?? "Placeholder text";
   const isEditable = props.isEditable ?? true;
   const isDisabled = props.isDisabled ?? false;
   const isReadonly = props.isReadonly ?? false;
   const isAutocomplete = props.isAutocomplete ?? false;
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     if (props.value !== void 0) {
       const e = { target: { value: props.value }, type: "change" };
       handleChange?.(e);
@@ -1370,8 +1456,8 @@ var PasswordInput = ({ className, style, ...props }) => {
     if (value === null || value === void 0) return "";
     return value;
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "flex justify-start items-center relative", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex justify-start items-center relative", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       Input,
       {
         type: props.inputType || "password",
@@ -1390,18 +1476,18 @@ var PasswordInput = ({ className, style, ...props }) => {
         readOnly: isReadonly
       }
     ) }),
-    props.errorMessage && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "mt-1 text-xs text-red-500", children: props.errorMessage })
+    props.errorMessage && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "mt-1 text-xs text-red-500", children: props.errorMessage })
   ] });
 };
 var PasswordInput_default = PasswordInput;
 
 // src/components/Inputs/Textarea/Textarea.tsx
-var import_react14 = require("react");
+var import_react15 = require("react");
 
 // src/components/ui/textarea.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 function Textarea({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     "textarea",
     {
       "data-slot": "textarea",
@@ -1415,14 +1501,14 @@ function Textarea({ className, ...props }) {
 }
 
 // src/components/Inputs/Textarea/Textarea.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 var Textarea2 = ({ className, style, ...props }) => {
   const placeholder = props.placeholder ?? "Placeholder text";
   const isEditable = props.isEditable ?? true;
   const isDisabled = props.isDisabled ?? false;
   const isReadonly = props.isReadonly ?? false;
   const isAutocomplete = props.isAutocomplete ?? false;
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     if (props.value !== void 0) {
       const e = { target: { value: props.value }, type: "change" };
       handleChange?.(e);
@@ -1431,8 +1517,8 @@ var Textarea2 = ({ className, style, ...props }) => {
   const handleChange = (e) => {
     props.onChange?.(e, props?.name || "");
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
       Textarea,
       {
         id: "textarea-field",
@@ -1450,21 +1536,21 @@ var Textarea2 = ({ className, style, ...props }) => {
         readOnly: isReadonly
       }
     ),
-    props.errorMessage && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { className: "mt-1 text-xs text-red-500", children: props.errorMessage })
+    props.errorMessage && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "mt-1 text-xs text-red-500", children: props.errorMessage })
   ] });
 };
 var Textarea_default = Textarea2;
 
 // src/components/Inputs/UrlInput/UrlInput.tsx
-var import_react15 = require("react");
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_react16 = require("react");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 var UrlInput = ({ className, style, ...props }) => {
   const placeholder = props.placeholder ?? "Placeholder text";
   const isEditable = props.isEditable ?? true;
   const isDisabled = props.isDisabled ?? false;
   const isReadonly = props.isReadonly ?? false;
   const isAutocomplete = props.isAutocomplete ?? false;
-  (0, import_react15.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     if (props.value !== void 0) {
       const e = { target: { value: props.value }, type: "change" };
       handleChange?.(e);
@@ -1480,10 +1566,10 @@ var UrlInput = ({ className, style, ...props }) => {
     if (value === null || value === void 0) return "";
     return value;
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex justify-start items-center relative", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "bg-[#E9E9E9] absolute px-10 text-center top-1/2 h-full justify-center items-center flex w-10 -translate-y-1/2 text-[#383838] font-[500] text-[12px]", children: "https://" }),
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex justify-start items-center relative", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "bg-[#E9E9E9] absolute px-10 text-center top-1/2 h-full justify-center items-center flex w-10 -translate-y-1/2 text-[#383838] font-[500] text-[12px]", children: "https://" }),
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
         Input,
         {
           id: props.name || "url-field",
@@ -1503,23 +1589,23 @@ var UrlInput = ({ className, style, ...props }) => {
         }
       )
     ] }),
-    props.errorMessage && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "mt-1 text-xs text-red-500", children: props.errorMessage })
+    props.errorMessage && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("p", { className: "mt-1 text-xs text-red-500", children: props.errorMessage })
   ] });
 };
 var UrlInput_default = UrlInput;
 
 // src/components/Inputs/Checkbox/Checkbox.tsx
-var import_react16 = require("react");
+var import_react17 = require("react");
 
 // src/components/ui/checkbox.tsx
 var CheckboxPrimitive = __toESM(require("@radix-ui/react-checkbox"));
-var import_lucide_react4 = require("lucide-react");
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_lucide_react5 = require("lucide-react");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 function Checkbox({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
     CheckboxPrimitive.Root,
     {
       "data-slot": "checkbox",
@@ -1528,12 +1614,12 @@ function Checkbox({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
         CheckboxPrimitive.Indicator,
         {
           "data-slot": "checkbox-indicator",
           className: "flex items-center justify-center text-current transition-none",
-          children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react4.CheckIcon, { className: "size-3.5" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react5.CheckIcon, { className: "size-3.5" })
         }
       )
     }
@@ -1542,12 +1628,12 @@ function Checkbox({
 
 // src/components/ui/label.tsx
 var LabelPrimitive = __toESM(require("@radix-ui/react-label"));
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 function Label2({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     LabelPrimitive.Root,
     {
       "data-slot": "label",
@@ -1561,7 +1647,7 @@ function Label2({
 }
 
 // src/components/Inputs/Checkbox/Checkbox.tsx
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 var CheckboxInput = ({ className, style, ...props }) => {
   const isEditable = props.isEditable ?? true;
   const isDisabled = props.isDisabled ?? false;
@@ -1575,7 +1661,7 @@ var CheckboxInput = ({ className, style, ...props }) => {
     }
     return false;
   };
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (props.value) {
       handleChange(formatValue(props.value));
     }
@@ -1583,9 +1669,9 @@ var CheckboxInput = ({ className, style, ...props }) => {
   const handleChange = (value) => {
     props.onChange?.(value, props?.name || "");
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className, style, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex items-center space-x-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className, style, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex items-center space-x-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
         Checkbox,
         {
           id: props.name || "checkbox",
@@ -1594,25 +1680,25 @@ var CheckboxInput = ({ className, style, ...props }) => {
           disabled: !isEditable || isDisabled
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Label2, { htmlFor: props.name || "checkbox", children: text })
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Label2, { htmlFor: props.name || "checkbox", children: text })
     ] }) }),
-    props.errorMessage && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { className: "mt-1 text-xs text-red-500", children: props.errorMessage })
+    props.errorMessage && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "mt-1 text-xs text-red-500", children: props.errorMessage })
   ] });
 };
 var Checkbox_default = CheckboxInput;
 
 // src/components/Inputs/RadioInput/RadioInput.tsx
-var import_react17 = require("react");
+var import_react18 = require("react");
 
 // src/components/ui/radio-group.tsx
 var RadioGroupPrimitive = __toESM(require("@radix-ui/react-radio-group"));
-var import_lucide_react5 = require("lucide-react");
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_lucide_react6 = require("lucide-react");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 function RadioGroup2({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
     RadioGroupPrimitive.Root,
     {
       "data-slot": "radio-group",
@@ -1625,7 +1711,7 @@ function RadioGroupItem({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
     RadioGroupPrimitive.Item,
     {
       "data-slot": "radio-group-item",
@@ -1634,12 +1720,12 @@ function RadioGroupItem({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
         RadioGroupPrimitive.Indicator,
         {
           "data-slot": "radio-group-indicator",
           className: "relative flex items-center justify-center",
-          children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_lucide_react5.CircleIcon, { className: "fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react6.CircleIcon, { className: "fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" })
         }
       )
     }
@@ -1647,7 +1733,7 @@ function RadioGroupItem({
 }
 
 // src/components/Inputs/RadioInput/RadioInput.tsx
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 var RadioInput = ({
   className,
   style,
@@ -1663,7 +1749,7 @@ var RadioInput = ({
     value: item[dataKey || "value"],
     label: item[dataLabel || "label"]
   }));
-  (0, import_react17.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     if (props.value !== void 0) {
       handleChange?.(props.value);
     }
@@ -1672,29 +1758,29 @@ var RadioInput = ({
     onChange?.(value, props?.name || "");
   };
   const resolvedDefaultValue = (typeof defaultValue === "string" ? defaultValue : void 0) ?? options[0]?.value;
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className, style, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className, style, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
       RadioGroup2,
       {
         defaultValue: resolvedDefaultValue,
         onValueChange: handleChange,
         children: [
-          options.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "text-sm text-gray-500", children: "No options available" }),
-          options.map((item) => /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex items-center space-x-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(RadioGroupItem, { value: item.value, id: `radio-${item.value}` }),
-            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Label2, { htmlFor: `radio-${item.value}`, children: item.label })
+          options.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "text-sm text-gray-500", children: "No options available" }),
+          options.map((item) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex items-center space-x-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(RadioGroupItem, { value: item.value, id: `radio-${item.value}` }),
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Label2, { htmlFor: `radio-${item.value}`, children: item.label })
           ] }, item.value))
         ]
       }
     ) }),
-    props.errorMessage && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { className: "mt-1 text-xs text-red-500", children: props.errorMessage })
+    props.errorMessage && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { className: "mt-1 text-xs text-red-500", children: props.errorMessage })
   ] });
 };
 var RadioInput_default = RadioInput;
 
 // src/components/Inputs/MultiCheckbox/MultiCheckbox.tsx
-var import_react18 = require("react");
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_react19 = require("react");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 function MultiCheckbox({
   apiUrl,
   axiosInstance,
@@ -1712,11 +1798,11 @@ function MultiCheckbox({
   onUncheckItems,
   ...props
 }) {
-  const [options, setOptions] = (0, import_react18.useState)([]);
-  const [page, setPage] = (0, import_react18.useState)(1);
-  const [hasMore, setHasMore] = (0, import_react18.useState)(true);
-  const [pageLoading, setPageLoading] = (0, import_react18.useState)(false);
-  const loadMoreRef = (0, import_react18.useRef)(null);
+  const [options, setOptions] = (0, import_react19.useState)([]);
+  const [page, setPage] = (0, import_react19.useState)(1);
+  const [hasMore, setHasMore] = (0, import_react19.useState)(true);
+  const [pageLoading, setPageLoading] = (0, import_react19.useState)(false);
+  const loadMoreRef = (0, import_react19.useRef)(null);
   const normalizeInput = (val) => {
     if (!val) return [];
     if (Array.isArray(val)) return val;
@@ -1738,7 +1824,7 @@ function MultiCheckbox({
         return arr;
     }
   };
-  const fetchApiPage = (0, import_react18.useCallback)(async () => {
+  const fetchApiPage = (0, import_react19.useCallback)(async () => {
     if (!apiUrl) return [];
     const client = axiosInstance || (await import("axios")).default;
     const res = await client.get(apiUrl, {
@@ -1750,7 +1836,7 @@ function MultiCheckbox({
     }
     return Array.isArray(res.data) ? res.data : [];
   }, [apiUrl, axiosInstance, page, pageSize]);
-  const mapData = (0, import_react18.useCallback)(
+  const mapData = (0, import_react19.useCallback)(
     (items) => {
       if (Array.isArray(items) === false) return [];
       return (items || []).map((item) => ({
@@ -1760,7 +1846,7 @@ function MultiCheckbox({
     },
     [dataKey, dataLabel]
   );
-  const loadPage = (0, import_react18.useCallback)(async () => {
+  const loadPage = (0, import_react19.useCallback)(async () => {
     if (source !== "api") return;
     if (pageLoading) return;
     setPageLoading(true);
@@ -1775,7 +1861,7 @@ function MultiCheckbox({
       setPageLoading(false);
     }
   }, [source, pageLoading, fetchApiPage, mapData, pageSize]);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (source === "api") {
       setOptions([]);
       setPage(1);
@@ -1785,10 +1871,10 @@ function MultiCheckbox({
       setHasMore(false);
     }
   }, [source, JSON.stringify(data)]);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (source === "api") loadPage();
   }, [page, source]);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (source !== "api") return;
     if (!hasMore || pageLoading) return;
     const observer = new IntersectionObserver((entries) => {
@@ -1807,11 +1893,11 @@ function MultiCheckbox({
       options.filter((opt) => !updated.includes(opt.value)).map((opt) => opt.value)
     ), props.name || "");
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: cn("flex flex-col gap-2 max-h-64 overflow-auto", className), style, children: [
-    options.length === 0 && !pageLoading && !loading && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "text-center py-2 text-gray-500 text-sm", children: "No options available." }),
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: cn("flex flex-col gap-2 max-h-64 overflow-auto", className), style, children: [
+    options.length === 0 && !pageLoading && !loading && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "text-center py-2 text-gray-500 text-sm", children: "No options available." }),
     options.map((opt, index) => {
       const hasError = !!props.errorMessage;
-      return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
         "div",
         {
           className: cn(
@@ -1819,7 +1905,7 @@ function MultiCheckbox({
             hasError && "bg-red-50"
           ),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
               Checkbox,
               {
                 id: props.name ? `${props.name}-${opt.value}` : opt.value,
@@ -1831,7 +1917,7 @@ function MultiCheckbox({
                 )
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
               Label2,
               {
                 id: props.name ? `${props.name}-${opt.value}` : opt.value,
@@ -1845,25 +1931,25 @@ function MultiCheckbox({
         `${index}-${opt.value}`
       );
     }),
-    source === "api" && hasMore && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { ref: loadMoreRef, className: "h-4" }),
-    (pageLoading || loading) && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "text-center py-2 text-gray-500 text-sm", children: "Loading\u2026" }),
-    props.errorMessage && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { className: "mt-1 text-xs text-red-500", children: props.errorMessage })
+    source === "api" && hasMore && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { ref: loadMoreRef, className: "h-4" }),
+    (pageLoading || loading) && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "text-center py-2 text-gray-500 text-sm", children: "Loading\u2026" }),
+    props.errorMessage && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: "mt-1 text-xs text-red-500", children: props.errorMessage })
   ] });
 }
 
 // src/components/Inputs/RichText/RichText.tsx
-var import_react20 = require("react");
+var import_react21 = require("react");
 
 // src/components/Global/TinyMceEditor.tsx
-var import_react19 = require("react");
+var import_react20 = require("react");
 var import_tinymce_react = require("@tinymce/tinymce-react");
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 function MyEditor({
   value,
   onChange,
   isDefault
 }) {
-  const editorRef = (0, import_react19.useRef)(null);
+  const editorRef = (0, import_react20.useRef)(null);
   function stripOuterP(html) {
     const trimmedHtml = html.trim();
     if (!trimmedHtml) return "";
@@ -1875,14 +1961,14 @@ function MyEditor({
     }
     return trimmedHtml;
   }
-  const isDefaultToolbar = (0, import_react19.useMemo)(() => {
+  const isDefaultToolbar = (0, import_react20.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";
     }
     return toolbar;
   }, [isDefault]);
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
     import_tinymce_react.Editor,
     {
       apiKey: process.env.NEXT_PUBLIC_TINYMCE_API_KEY,
@@ -1926,9 +2012,9 @@ function MyEditor({
 }
 
 // src/components/Inputs/RichText/RichText.tsx
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 function RichText({ className, style, ...props }) {
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     if (props.value !== void 0) {
       handleChange?.(props.value);
     }
@@ -1936,7 +2022,7 @@ function RichText({ className, style, ...props }) {
   const handleChange = (content) => {
     props.onChange?.(content, props?.name || "");
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
     "div",
     {
       className: cn(className, props.errorMessage ? "border-red-500" : ""),
@@ -1945,29 +2031,29 @@ function RichText({ className, style, ...props }) {
         borderColor: props.errorMessage ? "#f87171" : style?.borderColor
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(MyEditor, { onChange: handleChange, value: props.value || "", isDefault: true }),
-        props.errorMessage && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "mt-1 text-xs text-red-500", children: props.errorMessage })
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(MyEditor, { onChange: handleChange, value: props.value || "", isDefault: true }),
+        props.errorMessage && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "mt-1 text-xs text-red-500", children: props.errorMessage })
       ]
     }
   );
 }
 
 // src/components/Inputs/Dropdown/Dropdown.tsx
-var import_react23 = require("react");
+var import_react24 = require("react");
 
 // src/components/ui/select.tsx
 var SelectPrimitive = __toESM(require("@radix-ui/react-select"));
-var import_lucide_react6 = require("lucide-react");
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_lucide_react7 = require("lucide-react");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 function Select({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(SelectPrimitive.Root, { "data-slot": "select", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(SelectPrimitive.Root, { "data-slot": "select", ...props });
 }
 function SelectValue({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(SelectPrimitive.Value, { "data-slot": "select-value", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(SelectPrimitive.Value, { "data-slot": "select-value", ...props });
 }
 function SelectTrigger({
   className,
@@ -1975,7 +2061,7 @@ function SelectTrigger({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
     SelectPrimitive.Trigger,
     {
       "data-slot": "select-trigger",
@@ -1987,7 +2073,7 @@ function SelectTrigger({
       ...props,
       children: [
         children,
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react6.ChevronDownIcon, { className: "size-4 opacity-50" }) })
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react7.ChevronDownIcon, { className: "size-4 opacity-50" }) })
       ]
     }
   );
@@ -1998,7 +2084,7 @@ function SelectContent({
   position = "popper",
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(SelectPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(SelectPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
     SelectPrimitive.Content,
     {
       "data-slot": "select-content",
@@ -2010,8 +2096,8 @@ function SelectContent({
       position,
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(SelectScrollUpButton, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(SelectScrollUpButton, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
           SelectPrimitive.Viewport,
           {
             className: cn(
@@ -2021,7 +2107,7 @@ function SelectContent({
             children
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(SelectScrollDownButton, {})
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(SelectScrollDownButton, {})
       ]
     }
   ) });
@@ -2031,7 +2117,7 @@ function SelectItem({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
     SelectPrimitive.Item,
     {
       "data-slot": "select-item",
@@ -2041,8 +2127,8 @@ function SelectItem({
       ),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "absolute right-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react6.CheckIcon, { className: "size-4" }) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(SelectPrimitive.ItemText, { children })
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "absolute right-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react7.CheckIcon, { className: "size-4" }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(SelectPrimitive.ItemText, { children })
       ]
     }
   );
@@ -2051,7 +2137,7 @@ function SelectScrollUpButton({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
     SelectPrimitive.ScrollUpButton,
     {
       "data-slot": "select-scroll-up-button",
@@ -2060,7 +2146,7 @@ function SelectScrollUpButton({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react6.ChevronUpIcon, { className: "size-4" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react7.ChevronUpIcon, { className: "size-4" })
     }
   );
 }
@@ -2068,7 +2154,7 @@ function SelectScrollDownButton({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
     SelectPrimitive.ScrollDownButton,
     {
       "data-slot": "select-scroll-down-button",
@@ -2077,29 +2163,29 @@ function SelectScrollDownButton({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react6.ChevronDownIcon, { className: "size-4" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react7.ChevronDownIcon, { className: "size-4" })
     }
   );
 }
 
 // src/components/Inputs/Dropdown/LazyDropdown.tsx
-var import_react22 = require("react");
-var import_lucide_react7 = require("lucide-react");
+var import_react23 = require("react");
+var import_lucide_react8 = require("lucide-react");
 
 // src/hooks/useLazyDropdown.ts
-var import_react21 = require("react");
+var import_react22 = require("react");
 var import_axios2 = __toESM(require("axios"));
 function useLazyDropdown(config) {
-  const [options, setOptions] = (0, import_react21.useState)([]);
-  const [page, setPage] = (0, import_react21.useState)(1);
-  const [hasMore, setHasMore] = (0, import_react21.useState)(true);
-  const [loading, setLoading] = (0, import_react21.useState)(false);
-  const [searchTerm, setSearchTerm] = (0, import_react21.useState)("");
-  const debounceTimer = (0, import_react21.useRef)(null);
-  const allDataRef = (0, import_react21.useRef)([]);
-  const configRef = (0, import_react21.useRef)(config);
+  const [options, setOptions] = (0, import_react22.useState)([]);
+  const [page, setPage] = (0, import_react22.useState)(1);
+  const [hasMore, setHasMore] = (0, import_react22.useState)(true);
+  const [loading, setLoading] = (0, import_react22.useState)(false);
+  const [searchTerm, setSearchTerm] = (0, import_react22.useState)("");
+  const debounceTimer = (0, import_react22.useRef)(null);
+  const allDataRef = (0, import_react22.useRef)([]);
+  const configRef = (0, import_react22.useRef)(config);
   const PAGE_SIZE = config.pageSize || 10;
-  (0, import_react21.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     setOptions([]);
     setPage(1);
     setHasMore(true);
@@ -2112,7 +2198,7 @@ function useLazyDropdown(config) {
       return true;
     });
   };
-  (0, import_react21.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     configRef.current = config;
   }, [config]);
   function getValueByPath2(obj, path) {
@@ -2123,7 +2209,7 @@ function useLazyDropdown(config) {
   function isEmptyParamValue(value) {
     return value === "" || value === void 0 || value === null || value === "null" || value === "undefined";
   }
-  const transformToOptions = (0, import_react21.useCallback)((data) => {
+  const transformToOptions = (0, import_react22.useCallback)((data) => {
     if (!data || !Array.isArray(data)) return [];
     const cfg = configRef.current;
     return data.map((item) => {
@@ -2161,7 +2247,7 @@ function useLazyDropdown(config) {
       params: cleaned
     };
   }
-  const fetchApiData = (0, import_react21.useCallback)(async (pageNum, term) => {
+  const fetchApiData = (0, import_react22.useCallback)(async (pageNum, term) => {
     if (!configRef.current.apiUrl) return [];
     const limit = PAGE_SIZE;
     const params = { page: pageNum, limit };
@@ -2186,7 +2272,7 @@ function useLazyDropdown(config) {
     }
     return [];
   }, [PAGE_SIZE, transformToOptions]);
-  const loadPage = (0, import_react21.useCallback)(async (pageNum, term) => {
+  const loadPage = (0, import_react22.useCallback)(async (pageNum, term) => {
     const cfg = configRef.current;
     if (!cfg.enabled) return;
     setLoading(true);
@@ -2274,7 +2360,7 @@ function useLazyDropdown(config) {
       setLoading(false);
     }
   };
-  (0, import_react21.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     const cfg = configRef.current;
     if (!cfg.enabled || !cfg.value || cfg.dataSource !== "api" || !cfg.apiUrl) return;
     if (cfg.isMultiSelect) {
@@ -2287,28 +2373,28 @@ function useLazyDropdown(config) {
     }
     fetchValueItem();
   }, [JSON.stringify(config.value), config.dataKey, config.apiUrl, config.dataSource]);
-  const loadMore = (0, import_react21.useCallback)(() => {
+  const loadMore = (0, import_react22.useCallback)(() => {
     if (!loading && hasMore) {
       loadPage(page + 1, searchTerm);
     }
   }, [loading, hasMore, page, searchTerm]);
-  const search = (0, import_react21.useCallback)((term) => {
+  const search = (0, import_react22.useCallback)((term) => {
     setSearchTerm(term);
     if (debounceTimer.current) clearTimeout(debounceTimer.current);
     debounceTimer.current = setTimeout(() => {
       loadPage(1, term);
     }, 300);
   }, []);
-  const reset = (0, import_react21.useCallback)(() => {
+  const reset = (0, import_react22.useCallback)(() => {
     setSearchTerm("");
     setPage(1);
   }, []);
-  (0, import_react21.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     if (config.initialData?.length) {
       allDataRef.current = config.initialData;
     }
   }, [config.initialData]);
-  (0, import_react21.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     if (config.fetchOnMount) loadPage(1, "");
     return () => {
       if (debounceTimer.current) clearTimeout(debounceTimer.current);
@@ -2355,7 +2441,7 @@ function useLazyDropdown(config) {
 }
 
 // src/components/Inputs/Dropdown/LazyDropdown.tsx
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 function LazySelectDropdown({
   options = [],
   value,
@@ -2376,11 +2462,12 @@ function LazySelectDropdown({
   enforceStrictQueryParams = false,
   ...props
 }) {
-  const [isOpen, setIsOpen] = (0, import_react22.useState)(false);
-  const [searchTerm, setSearchTerm] = (0, import_react22.useState)("");
-  const [highlightedIndex, setHighlightedIndex] = (0, import_react22.useState)(-1);
-  const dropdownRef = (0, import_react22.useRef)(null);
-  const observerTarget = (0, import_react22.useRef)(null);
+  const [isOpen, setIsOpen] = (0, import_react23.useState)(false);
+  const [searchTerm, setSearchTerm] = (0, import_react23.useState)("");
+  const [highlightedIndex, setHighlightedIndex] = (0, import_react23.useState)(-1);
+  const dropdownRef = (0, import_react23.useRef)(null);
+  const popupRef = (0, import_react23.useRef)(null);
+  const observerTarget = (0, import_react23.useRef)(null);
   const {
     options: lazyOptions,
     loading,
@@ -2402,26 +2489,31 @@ function LazySelectDropdown({
     axiosInstance,
     enforceStrictQueryParams
   });
-  const selectedOption = (0, import_react22.useMemo)(() => lazyOptions.find((opt) => opt.value === value), [lazyOptions, value]);
-  (0, import_react22.useEffect)(() => {
+  const selectedOption = (0, import_react23.useMemo)(() => lazyOptions.find((opt) => opt.value === value), [lazyOptions, value]);
+  (0, import_react23.useEffect)(() => {
     if (!isOpen) {
       setHighlightedIndex(-1);
     } else if (lazyOptions.length > 0 && highlightedIndex === -1) {
       setHighlightedIndex(0);
     }
   }, [isOpen, lazyOptions.length, highlightedIndex]);
-  (0, import_react22.useEffect)(() => {
-    const handleClickOutside = (e) => {
-      if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
+  (0, import_react23.useEffect)(() => {
+    const handleOutside = (e) => {
+      const target = e.target;
+      if (dropdownRef.current && !dropdownRef.current.contains(target) && (!popupRef.current || !popupRef.current.contains(target))) {
         setIsOpen(false);
         setSearchTerm("");
         setHighlightedIndex(-1);
       }
     };
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => document.removeEventListener("mousedown", handleClickOutside);
+    document.addEventListener("mousedown", handleOutside);
+    document.addEventListener("focusin", handleOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleOutside);
+      document.removeEventListener("focusin", handleOutside);
+    };
   }, []);
-  (0, import_react22.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     if (!isOpen || !hasMore || loading) return;
     const observer = new IntersectionObserver(
       (entries) => {
@@ -2512,8 +2604,8 @@ function LazySelectDropdown({
         break;
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { ref: dropdownRef, className: "relative w-full", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { ref: dropdownRef, className: "relative w-full", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
       "input",
       {
         type: "text",
@@ -2535,20 +2627,21 @@ function LazySelectDropdown({
         autoComplete: "off"
       }
     ),
-    selectedOption && !disabled && !readOnly && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    selectedOption && !disabled && !readOnly && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
       "button",
       {
         type: "button",
         "aria-label": "Clear selection",
         onClick: handleRemoveSelection,
         className: "absolute right-2 top-1/2 -translate-y-1/2 h-5 w-5 flex items-center justify-center rounded hover:bg-gray-200 text-gray-500 focus:outline-none",
-        children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react7.XSquareIcon, { className: "h-5 w-5 pointer-events-none" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_lucide_react8.XSquareIcon, { className: "h-5 w-5 pointer-events-none" })
       }
     ),
-    errorMessage && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { className: "mt-1 text-xs text-red-500", children: errorMessage }),
-    isOpen && !disabled && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Portal_default, { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    errorMessage && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "mt-1 text-xs text-red-500", children: errorMessage }),
+    isOpen && !disabled && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Portal_default, { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
       "div",
       {
+        ref: popupRef,
         onMouseDown: (e) => e.stopPropagation(),
         className: "absolute z-[900] w-fit mt-1 bg-white border border-gray-300 rounded-lg shadow-lg max-h-60 overflow-y-auto",
         style: {
@@ -2557,14 +2650,14 @@ function LazySelectDropdown({
           top: dropdownRef.current ? dropdownRef.current.getBoundingClientRect().bottom + window.scrollY : 0,
           left: dropdownRef.current ? dropdownRef.current.getBoundingClientRect().left + window.scrollX : 0
         },
-        children: props.loading && !loading ? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "px-3 py-4 text-center text-gray-500 flex items-center justify-center gap-2 text-sm", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "animate-spin w-4 h-4 border-2 border-gray-300 border-t-blue-500 rounded-full" }),
+        children: props.loading && !loading ? /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "px-3 py-4 text-center text-gray-500 flex items-center justify-center gap-2 text-sm", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "animate-spin w-4 h-4 border-2 border-gray-300 border-t-blue-500 rounded-full" }),
           "Loading..."
-        ] }) : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_jsx_runtime36.Fragment, { children: loading && lazyOptions.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "px-3 py-4 text-center text-gray-500 flex items-center justify-center gap-2 text-sm", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "animate-spin w-4 h-4 border-2 border-gray-300 border-t-blue-500 rounded-full" }),
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_jsx_runtime37.Fragment, { children: loading && lazyOptions.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "px-3 py-4 text-center text-gray-500 flex items-center justify-center gap-2 text-sm", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "animate-spin w-4 h-4 border-2 border-gray-300 border-t-blue-500 rounded-full" }),
           "Loading..."
-        ] }) : lazyOptions.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
-          lazyOptions.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+        ] }) : lazyOptions.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
+          lazyOptions.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
             "div",
             {
               tabIndex: 0,
@@ -2583,20 +2676,20 @@ function LazySelectDropdown({
             },
             `${option.value}-${index}`
           )),
-          hasMore && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+          hasMore && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
             "div",
             {
               ref: observerTarget,
               className: "px-3 py-2 text-center text-gray-400 text-sm border-t",
-              children: loading ? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex items-center justify-center gap-2 text-sm", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "animate-spin w-3 h-3 border-2 border-gray-300 border-t-blue-500 rounded-full" }),
+              children: loading ? /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex items-center justify-center gap-2 text-sm", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "animate-spin w-3 h-3 border-2 border-gray-300 border-t-blue-500 rounded-full" }),
                 "Loading more..."
               ] }) : "Scroll for more..."
             }
           )
-        ] }) : /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "px-3 py-4 text-sm text-center text-gray-500", children: [
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "px-3 py-4 text-sm text-center text-gray-500", children: [
           searchTerm ? `No results for "${searchTerm}"` : "No options available",
-          enableAddNewOption && searchTerm && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+          enableAddNewOption && searchTerm && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
             "div",
             {
               onClick: () => handleAddNewOption(searchTerm),
@@ -2612,14 +2705,14 @@ function LazySelectDropdown({
 var LazyDropdown_default = LazySelectDropdown;
 
 // src/components/Inputs/Dropdown/Dropdown.tsx
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 var Dropdown = ({ className, style, ...props }) => {
   const list = Array.isArray(props?.data) ? props.data : [];
   const placeholder = props.placeholder ? props.placeholder : "Select an option";
   const isEditable = props.isEditable ?? true;
   const isDisabled = props.isDisabled ?? false;
   const isReadonly = props.isReadonly ?? false;
-  (0, import_react23.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     if (props.value !== void 0) {
       handleChange(props.value);
     }
@@ -2634,7 +2727,7 @@ var Dropdown = ({ className, style, ...props }) => {
     label: item[dataLabel]
   }));
   if (props.lazyLoad) {
-    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
       LazyDropdown_default,
       {
         ...props,
@@ -2651,9 +2744,9 @@ var Dropdown = ({ className, style, ...props }) => {
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Select, { name: props.name, value: props.value || "", onValueChange: handleChange, disabled: isDisabled || !isEditable, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_jsx_runtime38.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(Select, { name: props.name, value: props.value || "", onValueChange: handleChange, disabled: isDisabled || !isEditable, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
         SelectTrigger,
         {
           id: props.name || "select-field",
@@ -2663,31 +2756,31 @@ var Dropdown = ({ className, style, ...props }) => {
             borderColor: props.errorMessage ? "#f87171" : style?.borderColor
           },
           "aria-readonly": isReadonly,
-          children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(SelectValue, { placeholder })
+          children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(SelectValue, { placeholder })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(SelectContent, { children: [
-        props.dataLoading && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(SelectItem, { value: "none", disabled: true, children: "Loading..." }),
-        !props.dataLoading && options.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(SelectItem, { value: "none", disabled: true, children: "No options" }),
-        options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(SelectItem, { value: opt.value, children: opt.label }, opt.value))
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(SelectContent, { children: [
+        props.dataLoading && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(SelectItem, { value: "none", disabled: true, children: "Loading..." }),
+        !props.dataLoading && options.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(SelectItem, { value: "none", disabled: true, children: "No options" }),
+        options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(SelectItem, { value: opt.value, children: opt.label }, opt.value))
       ] })
     ] }),
-    props.errorMessage && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "mt-1 text-xs text-red-500", children: props.errorMessage })
+    props.errorMessage && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { className: "mt-1 text-xs text-red-500", children: props.errorMessage })
   ] });
 };
 var Dropdown_default = Dropdown;
 
 // src/components/Inputs/SwitchToggle/SwitchToggle.tsx
-var import_react24 = require("react");
+var import_react25 = require("react");
 
 // src/components/ui/switch.tsx
 var SwitchPrimitive = __toESM(require("@radix-ui/react-switch"));
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 function Switch({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     SwitchPrimitive.Root,
     {
       "data-slot": "switch",
@@ -2696,7 +2789,7 @@ function Switch({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
         SwitchPrimitive.Thumb,
         {
           "data-slot": "switch-thumb",
@@ -2710,11 +2803,11 @@ function Switch({
 }
 
 // src/components/Inputs/SwitchToggle/SwitchToggle.tsx
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 var SwitchToggle = ({ className, style, ...props }) => {
   const isEditable = props.isEditable ?? true;
   const isDisabled = props.isDisabled ?? false;
-  (0, import_react24.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     if (props.value !== void 0) {
       handleChange?.(props.value);
     }
@@ -2722,9 +2815,9 @@ var SwitchToggle = ({ className, style, ...props }) => {
   const handleChange = (value) => {
     props.onChange?.(value, props?.name || "");
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className, style, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex items-center space-x-2 mb-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className, style, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex items-center space-x-2 mb-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
         Switch,
         {
           id: props.name || "switch",
@@ -2733,18 +2826,18 @@ var SwitchToggle = ({ className, style, ...props }) => {
           disabled: isDisabled || !isEditable
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Label2, { htmlFor: props.name || "switch", children: props.text })
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Label2, { htmlFor: props.name || "switch", children: props.text })
     ] }) }),
-    props.errorMessage && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("p", { className: "mt-1 text-xs text-red-500", children: props.errorMessage })
+    props.errorMessage && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "mt-1 text-xs text-red-500", children: props.errorMessage })
   ] });
 };
 var SwitchToggle_default = SwitchToggle;
 
 // src/components/Inputs/PhoneInput/PhoneInput.tsx
-var import_react25 = require("react");
+var import_react26 = 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");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 var ensureDialcode = (val) => {
   if (!val) return "";
   const trimmed = val.trim();
@@ -2753,11 +2846,11 @@ var ensureDialcode = (val) => {
   return `+91${local}`;
 };
 var PhoneInput = ({ className, style, ...props }) => {
-  const ref = (0, import_react25.useRef)(null);
+  const ref = (0, import_react26.useRef)(null);
   const placeholder = props.placeholder ?? "Enter phone number";
   const isEditable = props.isEditable ?? true;
   const isDisabled = props.isDisabled ?? false;
-  (0, import_react25.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     if (props.value !== void 0) {
       handleChange?.(ensureDialcode(props.value), ref.current?.state);
     }
@@ -2772,8 +2865,8 @@ var PhoneInput = ({ className, style, ...props }) => {
     props.onChange?.(event, props.name || "");
     props.getPhoneState?.(meta);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
       import_react_international_phone.PhoneInput,
       {
         ref,
@@ -2798,21 +2891,21 @@ var PhoneInput = ({ className, style, ...props }) => {
         disabled: isDisabled || !isEditable
       }
     ),
-    props.errorMessage && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "mt-1 text-xs text-red-500", children: props.errorMessage })
+    props.errorMessage && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { className: "mt-1 text-xs text-red-500", children: props.errorMessage })
   ] });
 };
 var PhoneInput_default = PhoneInput;
 
 // src/components/Inputs/SearchInput/SearchInput.tsx
-var import_react26 = require("react");
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_react27 = require("react");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 var SearchInput = ({ className, style, ...props }) => {
   const placeholder = props.placeholder ?? "Placeholder text";
   const isEditable = props.isEditable ?? true;
   const isDisabled = props.isDisabled ?? false;
   const isReadonly = props.isReadonly ?? false;
   const isAutocomplete = props.isAutocomplete ?? false;
-  (0, import_react26.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     if (props.value !== void 0) {
       const e = { target: { value: props.value }, type: "change" };
       handleChange?.(e);
@@ -2828,8 +2921,8 @@ var SearchInput = ({ className, style, ...props }) => {
     if (value === null || value === void 0) return "";
     return value;
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "flex justify-start items-center relative", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_jsx_runtime42.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "flex justify-start items-center relative", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
       Input,
       {
         type: props.inputType || "search",
@@ -2848,17 +2941,17 @@ var SearchInput = ({ className, style, ...props }) => {
         readOnly: isReadonly
       }
     ) }),
-    props.errorMessage && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { className: "mt-1 text-xs text-red-500", children: props.errorMessage })
+    props.errorMessage && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("p", { className: "mt-1 text-xs text-red-500", children: props.errorMessage })
   ] });
 };
 var SearchInput_default = SearchInput;
 
 // src/components/Inputs/FileInput/FileInput.tsx
-var import_react27 = require("react");
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_react28 = require("react");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 var FileInput = ({ className, style, ...props }) => {
   const placeholder = props.placeholder ?? "Placeholder text";
-  (0, import_react27.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     if (props.value !== void 0) {
       const e = { target: { value: props.value }, type: "change" };
       handleChange?.(e);
@@ -2874,8 +2967,8 @@ var FileInput = ({ className, style, ...props }) => {
     if (value === null || value === void 0) return "";
     return value;
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "d-flex items-center relative align-middle", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "d-flex items-center relative align-middle", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
       Input,
       {
         type: props.inputType || "file",
@@ -2892,21 +2985,21 @@ var FileInput = ({ className, style, ...props }) => {
         onChange: handleChange
       }
     ),
-    props.errorMessage && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("p", { className: "mt-1 text-xs text-red-500", children: props.errorMessage })
+    props.errorMessage && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("p", { className: "mt-1 text-xs text-red-500", children: props.errorMessage })
   ] });
 };
 var FileInput_default = FileInput;
 
 // src/components/Inputs/DatePicker/DatePicker.tsx
-var React8 = __toESM(require("react"));
+var React9 = __toESM(require("react"));
 var import_date_fns = require("date-fns");
-var import_lucide_react9 = require("lucide-react");
+var import_lucide_react10 = require("lucide-react");
 
 // src/components/ui/calendar.tsx
-var React7 = __toESM(require("react"));
-var import_lucide_react8 = require("lucide-react");
+var React8 = __toESM(require("react"));
+var import_lucide_react9 = require("lucide-react");
 var import_react_day_picker = require("react-day-picker");
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 function Calendar({
   className,
   classNames,
@@ -2918,7 +3011,7 @@ function Calendar({
   ...props
 }) {
   const defaultClassNames = (0, import_react_day_picker.getDefaultClassNames)();
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
     import_react_day_picker.DayPicker,
     {
       showOutsideDays,
@@ -3017,7 +3110,7 @@ function Calendar({
       },
       components: {
         Root: ({ className: className2, rootRef, ...props2 }) => {
-          return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
             "div",
             {
               "data-slot": "calendar",
@@ -3029,22 +3122,22 @@ function Calendar({
         },
         Chevron: ({ className: className2, orientation, ...props2 }) => {
           if (orientation === "left") {
-            return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react8.ChevronLeftIcon, { className: cn("size-4", className2), ...props2 });
+            return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react9.ChevronLeftIcon, { className: cn("size-4", className2), ...props2 });
           }
           if (orientation === "right") {
-            return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-              import_lucide_react8.ChevronRightIcon,
+            return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+              import_lucide_react9.ChevronRightIcon,
               {
                 className: cn("size-4", className2),
                 ...props2
               }
             );
           }
-          return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react8.ChevronDownIcon, { className: cn("size-4", className2), ...props2 });
+          return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react9.ChevronDownIcon, { className: cn("size-4", className2), ...props2 });
         },
         DayButton: CalendarDayButton,
         WeekNumber: ({ children, ...props2 }) => {
-          return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("td", { ...props2, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "flex size-(--cell-size) items-center justify-center text-center", children }) });
+          return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("td", { ...props2, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "flex size-(--cell-size) items-center justify-center text-center", children }) });
         },
         ...components
       },
@@ -3059,11 +3152,11 @@ function CalendarDayButton({
   ...props
 }) {
   const defaultClassNames = (0, import_react_day_picker.getDefaultClassNames)();
-  const ref = React7.useRef(null);
-  React7.useEffect(() => {
+  const ref = React8.useRef(null);
+  React8.useEffect(() => {
     if (modifiers.focused) ref.current?.focus();
   }, [modifiers.focused]);
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
     Button,
     {
       ref,
@@ -3086,16 +3179,16 @@ function CalendarDayButton({
 
 // src/components/ui/popover.tsx
 var PopoverPrimitive = __toESM(require("@radix-ui/react-popover"));
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var import_jsx_runtime45 = require("react/jsx-runtime");
 function Popover({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(PopoverPrimitive.Root, { "data-slot": "popover", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(PopoverPrimitive.Root, { "data-slot": "popover", ...props });
 }
 function PopoverTrigger({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
 }
 function PopoverContent({
   className,
@@ -3103,7 +3196,7 @@ function PopoverContent({
   sideOffset = 4,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(PopoverPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(PopoverPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
     PopoverPrimitive.Content,
     {
       "data-slot": "popover-content",
@@ -3119,7 +3212,7 @@ function PopoverContent({
 }
 
 // src/components/Inputs/DatePicker/DatePicker.tsx
-var import_jsx_runtime45 = require("react/jsx-runtime");
+var import_jsx_runtime46 = require("react/jsx-runtime");
 function resolveDate(option, customOption) {
   if (!option) return void 0;
   switch (option) {
@@ -3186,7 +3279,7 @@ function DateTimePicker({
   mode = "date",
   ...props
 }) {
-  const [open, setOpen] = React8.useState(false);
+  const [open, setOpen] = React9.useState(false);
   const placeholderMap = {
     date: "Select date",
     datetime: "Select date & time",
@@ -3205,7 +3298,7 @@ function DateTimePicker({
   const isAutocomplete = props.isAutocomplete ?? false;
   const minDate = resolveDate(minimumDate, customMinimumDate);
   const maxDate = resolveDate(maximumDate, customMaximumDate);
-  const [date, setDate] = React8.useState(() => {
+  const [date, setDate] = React9.useState(() => {
     if (props.value) {
       const d = new Date(props.value);
       if (!isNaN(d.getTime())) return d;
@@ -3214,15 +3307,15 @@ function DateTimePicker({
   });
   const initialHours = date ? date.getHours() : 0;
   const initialMinutes = date ? date.getMinutes() : 0;
-  const [hours, setHours] = React8.useState(initialHours);
-  const [minutes, setMinutes] = React8.useState(initialMinutes);
-  const [amPm, setAmPm] = React8.useState("AM");
-  const displayHours = React8.useMemo(() => {
+  const [hours, setHours] = React9.useState(initialHours);
+  const [minutes, setMinutes] = React9.useState(initialMinutes);
+  const [amPm, setAmPm] = React9.useState("AM");
+  const displayHours = React9.useMemo(() => {
     if (hours === 0) return 12;
     if (hours > 12) return hours - 12;
     return hours;
   }, [hours]);
-  React8.useEffect(() => {
+  React9.useEffect(() => {
     setAmPm(hours >= 12 ? "PM" : "AM");
   }, [hours]);
   const emitChange = (nextDate) => {
@@ -3246,7 +3339,7 @@ function DateTimePicker({
     };
     props.onChange(event, props.name || "");
   };
-  React8.useEffect(() => {
+  React9.useEffect(() => {
     if (!props.value) {
       const defaultDate = resolveDefaultDate(defaultDateValue, customDefaultDate);
       setDate(defaultDate);
@@ -3268,8 +3361,8 @@ function DateTimePicker({
       setMinutes(d.getMinutes());
     }
   }, [props.value, defaultDateValue, customDefaultDate]);
-  const [year, setYear] = React8.useState(date ? date.getFullYear() : (/* @__PURE__ */ new Date()).getFullYear());
-  React8.useEffect(() => {
+  const [year, setYear] = React9.useState(date ? date.getFullYear() : (/* @__PURE__ */ new Date()).getFullYear());
+  React9.useEffect(() => {
     if (!date) return;
     const newDate = new Date(date);
     newDate.setFullYear(year);
@@ -3353,7 +3446,7 @@ function DateTimePicker({
   for (let y = currentYear - 90; y <= currentYear; y++) {
     yearOptions.push(y);
   }
-  const displayValue = React8.useMemo(() => {
+  const displayValue = React9.useMemo(() => {
     if (!date) return "";
     try {
       if (mode === "date") return (0, import_date_fns.format)(date, "dd-MM-yyyy");
@@ -3364,11 +3457,11 @@ function DateTimePicker({
     }
   }, [date, mode]);
   const isInputDisabled = isDisabled || !isEditable;
-  const [calendarMonthState, setCalendarMonthState] = React8.useState(() => {
+  const [calendarMonthState, setCalendarMonthState] = React9.useState(() => {
     const currentMonth = (/* @__PURE__ */ new Date()).getMonth();
     return date ? new Date(date.getFullYear(), date.getMonth()) : new Date(year, currentMonth);
   });
-  React8.useEffect(() => {
+  React9.useEffect(() => {
     setCalendarMonthState(new Date(year, calendarMonthState.getMonth()));
   }, [year]);
   const handleToday = () => {
@@ -3377,9 +3470,9 @@ function DateTimePicker({
     updateDateTime(selectedYearDate);
     setOpen(false);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "flex flex-col", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(Popover, { open, onOpenChange: setOpen, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "flex flex-col", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(Popover, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
         Button,
         {
           type: "button",
@@ -3396,10 +3489,10 @@ function DateTimePicker({
           },
           disabled: isInputDisabled,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_lucide_react9.Calendar1Icon, { className: "absolute left-2 top-2" }),
-            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "ml-5", children: displayValue || placeholder }),
-            displayValue && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-              import_lucide_react9.XSquareIcon,
+            /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_lucide_react10.Calendar1Icon, { className: "absolute left-2 top-2" }),
+            /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "ml-5", children: displayValue || placeholder }),
+            displayValue && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+              import_lucide_react10.XSquareIcon,
               {
                 className: "absolute right-2 top-2 cursor-pointer",
                 role: "presentation",
@@ -3415,10 +3508,10 @@ function DateTimePicker({
           ]
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(PopoverContent, { className: "w-auto text-sm p-2", align: "start", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "flex flex-col gap-1", children: [
-        (mode === "date" || mode === "datetime") && /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_jsx_runtime45.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "flex items-center justify-between gap-1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(PopoverContent, { className: "w-auto text-sm p-2", align: "start", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "flex flex-col gap-1", children: [
+        (mode === "date" || mode === "datetime") && /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_jsx_runtime46.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "flex items-center justify-between gap-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
               "label",
               {
                 className: "text-xs text-blue-600 font-bold cursor-pointer",
@@ -3427,18 +3520,18 @@ function DateTimePicker({
                 children: "Today"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
               "select",
               {
                 className: "h-8 rounded border bg-background px-2 text-xs",
                 value: year,
                 onChange: (e) => setYear(Number(e.target.value)),
                 disabled: isInputDisabled || isReadonly,
-                children: yearOptions.map((y) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("option", { value: y, children: y }, y))
+                children: yearOptions.map((y) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("option", { value: y, children: y }, y))
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "calendar-container", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "calendar-container", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
             Calendar,
             {
               mode: "single",
@@ -3456,20 +3549,20 @@ function DateTimePicker({
             }
           ) })
         ] }),
-        (mode === "time" || mode === "datetime") && /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "flex items-center gap-2 mt-0", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("label", { className: "text-xs text-muted-foreground", children: "Time" }),
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+        (mode === "time" || mode === "datetime") && /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "flex items-center gap-2 mt-0", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("label", { className: "text-xs text-muted-foreground", children: "Time" }),
+          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
             "select",
             {
               className: "h-8 rounded border bg-background px-2 text-xs",
               value: displayHours,
               onChange: handleHoursChange,
               disabled: isInputDisabled || isReadonly,
-              children: Array.from({ length: 12 }, (_, i) => i + 1).map((hour) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("option", { value: hour, children: hour.toString().padStart(2, "0") }, hour))
+              children: Array.from({ length: 12 }, (_, i) => i + 1).map((hour) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("option", { value: hour, children: hour.toString().padStart(2, "0") }, hour))
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "text-sm", children: ":" }),
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "text-sm", children: ":" }),
+          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
             "select",
             {
               className: "h-8 rounded border bg-background px-2 text-xs",
@@ -3478,11 +3571,11 @@ function DateTimePicker({
               disabled: isInputDisabled || isReadonly,
               children: Array.from({ length: 12 }).map((_, i) => {
                 const val = i * 5;
-                return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("option", { value: val, children: val.toString().padStart(2, "0") }, val);
+                return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("option", { value: val, children: val.toString().padStart(2, "0") }, val);
               })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
             "select",
             {
               className: "h-8 rounded border bg-background px-2 text-xs",
@@ -3490,15 +3583,15 @@ function DateTimePicker({
               onChange: handleAmPmChange,
               disabled: isInputDisabled || isReadonly,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("option", { value: "AM", children: "AM" }),
-                /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("option", { value: "PM", children: "PM" })
+                /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("option", { value: "AM", children: "AM" }),
+                /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("option", { value: "PM", children: "PM" })
               ]
             }
           )
         ] })
       ] }) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
       Input,
       {
         type: "hidden",
@@ -3511,23 +3604,23 @@ function DateTimePicker({
         }
       }
     ),
-    props.errorMessage && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("p", { className: "mt-1 text-xs text-red-500", children: props.errorMessage })
+    props.errorMessage && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("p", { className: "mt-1 text-xs text-red-500", children: props.errorMessage })
   ] });
 }
 
 // src/components/Inputs/DateRange/DateRange.tsx
-var import_react28 = __toESM(require("react"));
+var import_react29 = __toESM(require("react"));
 var import_date_fns2 = require("date-fns");
-var import_jsx_runtime46 = require("react/jsx-runtime");
+var import_jsx_runtime47 = require("react/jsx-runtime");
 var DateRange = ({ className, style, ...props }) => {
   const isDateRange = (val) => !!val && val.from instanceof Date;
-  const [date, setDate] = import_react28.default.useState(
+  const [date, setDate] = import_react29.default.useState(
     isDateRange(props.value) ? props.value : {
       from: /* @__PURE__ */ new Date(),
       to: (0, import_date_fns2.addDays)(/* @__PURE__ */ new Date(), 7)
     }
   );
-  (0, import_react28.useEffect)(() => {
+  (0, import_react29.useEffect)(() => {
     if (props.value && isDateRange(props.value)) {
       handleChange?.(props.value);
     }
@@ -3538,9 +3631,9 @@ var DateRange = ({ className, style, ...props }) => {
       props.onChange?.(value, props?.name || "");
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_jsx_runtime46.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className, style, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(Popover, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_jsx_runtime47.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className, style, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(Popover, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
         Button,
         {
           id: "date",
@@ -3549,15 +3642,15 @@ var DateRange = ({ className, style, ...props }) => {
             "w-full justify-start text-left font-normal text-[11px] border-[#BDBDBD]",
             !date && "text-muted-foreground"
           ),
-          children: date?.from ? date.to ? /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_jsx_runtime46.Fragment, { children: [
+          children: date?.from ? date.to ? /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_jsx_runtime47.Fragment, { children: [
             (0, import_date_fns2.format)(date.from, "LLL dd, y"),
             " -",
             " ",
             (0, import_date_fns2.format)(date.to, "LLL dd, y")
-          ] }) : (0, import_date_fns2.format)(date.from, "LLL dd, y") : /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { children: "Pick a date range" })
+          ] }) : (0, import_date_fns2.format)(date.from, "LLL dd, y") : /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { children: "Pick a date range" })
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(PopoverContent, { className: "w-auto p-0", align: "start", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(PopoverContent, { className: "w-auto p-0", align: "start", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
         Calendar,
         {
           mode: "range",
@@ -3568,21 +3661,21 @@ var DateRange = ({ className, style, ...props }) => {
         }
       ) })
     ] }) }),
-    props.errorMessage && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("p", { className: "mt-1 text-xs text-red-500", children: props.errorMessage })
+    props.errorMessage && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("p", { className: "mt-1 text-xs text-red-500", children: props.errorMessage })
   ] });
 };
 var DateRange_default = DateRange;
 
 // src/components/Inputs/TextInputGroup/TextInputGroup.tsx
-var import_react29 = require("react");
-var import_jsx_runtime47 = require("react/jsx-runtime");
+var import_react30 = require("react");
+var import_jsx_runtime48 = require("react/jsx-runtime");
 var TextInputGroup = ({ className, style, prepend, append, ...props }) => {
   const placeholder = props.placeholder ?? "Placeholder text";
   const isEditable = props.isEditable ?? true;
   const isDisabled = props.isDisabled ?? false;
   const isReadonly = props.isReadonly ?? false;
   const isAutocomplete = props.isAutocomplete ?? false;
-  (0, import_react29.useEffect)(() => {
+  (0, import_react30.useEffect)(() => {
     if (props.value !== void 0) {
       const e = { target: { value: props.value }, type: "change" };
       handleChange?.(e);
@@ -3591,8 +3684,8 @@ var TextInputGroup = ({ className, style, prepend, append, ...props }) => {
   const handleChange = (e) => {
     props.onChange?.(e, props?.name || "");
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_jsx_runtime47.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_jsx_runtime48.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
       "div",
       {
         className: cn(
@@ -3602,8 +3695,8 @@ var TextInputGroup = ({ className, style, prepend, append, ...props }) => {
           props.errorMessage ? "border-red-500" : ""
         ),
         children: [
-          prepend && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "px-3 flex items-center bg-gray-500 text-white h-10 rounded-l-md", children: prepend }),
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+          prepend && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "px-3 flex items-center bg-gray-500 text-white h-10 rounded-l-md", children: prepend }),
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
             Input,
             {
               id: props.name || "prepend-input",
@@ -3625,19 +3718,19 @@ var TextInputGroup = ({ className, style, prepend, append, ...props }) => {
               readOnly: isReadonly
             }
           ),
-          append && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "px-3 flex items-center bg-gray-500 text-white h-10 rounded-r-md", children: append })
+          append && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "px-3 flex items-center bg-gray-500 text-white h-10 rounded-r-md", children: append })
         ]
       }
     ),
-    props.errorMessage && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("p", { className: "mt-1 text-xs text-red-500", children: props.errorMessage })
+    props.errorMessage && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("p", { className: "mt-1 text-xs text-red-500", children: props.errorMessage })
   ] });
 };
 var TextInputGroup_default = TextInputGroup;
 
 // src/components/Inputs/Multiselect/MultiSelect.tsx
-var import_react30 = require("react");
-var import_lucide_react10 = require("lucide-react");
-var import_jsx_runtime48 = require("react/jsx-runtime");
+var import_react31 = require("react");
+var import_lucide_react11 = require("lucide-react");
+var import_jsx_runtime49 = require("react/jsx-runtime");
 function LazyMultiSelectDropdown({
   value = [],
   onChange,
@@ -3655,10 +3748,10 @@ function LazyMultiSelectDropdown({
   outputFormat = "array",
   ...props
 }) {
-  const [isOpen, setIsOpen] = (0, import_react30.useState)(false);
-  const [searchTerm, setSearchTerm] = (0, import_react30.useState)("");
-  const dropdownRef = (0, import_react30.useRef)(null);
-  const observerTarget = (0, import_react30.useRef)(null);
+  const [isOpen, setIsOpen] = (0, import_react31.useState)(false);
+  const [searchTerm, setSearchTerm] = (0, import_react31.useState)("");
+  const dropdownRef = (0, import_react31.useRef)(null);
+  const observerTarget = (0, import_react31.useRef)(null);
   const ensureUnique = (arr) => {
     return Array.from(new Set(arr));
   };
@@ -3707,14 +3800,14 @@ function LazyMultiSelectDropdown({
         return unique;
     }
   };
-  const selectedOptions = (0, import_react30.useMemo)(() => {
+  const selectedOptions = (0, import_react31.useMemo)(() => {
     return normalizedValue.map((id) => {
       const fromLazy = lazyOptions.find((opt) => opt.value === id);
       if (fromLazy) return fromLazy;
       return { value: id, label: id };
     });
   }, [normalizedValue, lazyOptions]);
-  (0, import_react30.useEffect)(() => {
+  (0, import_react31.useEffect)(() => {
     const handleClick = (e) => {
       if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
         setIsOpen(false);
@@ -3723,7 +3816,7 @@ function LazyMultiSelectDropdown({
     document.addEventListener("mousedown", handleClick);
     return () => document.removeEventListener("mousedown", handleClick);
   }, []);
-  (0, import_react30.useEffect)(() => {
+  (0, import_react31.useEffect)(() => {
     if (!isOpen || !hasMore || loading) return;
     const obs = new IntersectionObserver(
       (entries) => {
@@ -3760,8 +3853,8 @@ function LazyMultiSelectDropdown({
       }
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { ref: dropdownRef, className: "relative w-full", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { ref: dropdownRef, className: "relative w-full", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
       "div",
       {
         onClick: handleFocus,
@@ -3773,13 +3866,13 @@ function LazyMultiSelectDropdown({
           "px-2 py-2 min-h-[35px]"
         ),
         children: [
-          selectedOptions.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+          selectedOptions.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
             "span",
             {
               className: "bg-blue-100 text-blue-700 px-2 py-1 rounded-md text-xs flex items-center gap-1",
               children: [
                 opt.label,
-                !disabled && !readOnly && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+                !disabled && !readOnly && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
                   "button",
                   {
                     type: "button",
@@ -3788,14 +3881,14 @@ function LazyMultiSelectDropdown({
                       removeTag(opt.value);
                     },
                     className: "hover:text-red-600",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_lucide_react10.XIcon, { size: 12 })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_lucide_react11.XIcon, { size: 12 })
                   }
                 )
               ]
             },
             opt.value
           )),
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
             "input",
             {
               type: "text",
@@ -3811,8 +3904,8 @@ function LazyMultiSelectDropdown({
         ]
       }
     ),
-    errorMessage && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("p", { className: "mt-1 text-xs text-red-500", children: errorMessage }),
-    isOpen && !disabled && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Portal_default, { children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+    errorMessage && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("p", { className: "mt-1 text-xs text-red-500", children: errorMessage }),
+    isOpen && !disabled && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Portal_default, { children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
       "div",
       {
         onMouseDown: (e) => e.stopPropagation(),
@@ -3823,10 +3916,10 @@ function LazyMultiSelectDropdown({
           top: dropdownRef.current ? dropdownRef.current.getBoundingClientRect().bottom + window.scrollY : 0,
           left: dropdownRef.current ? dropdownRef.current.getBoundingClientRect().left + window.scrollX : 0
         },
-        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: [
+        children: dataLoading && lazyOptions.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "px-3 py-3 text-center text-gray-500", children: "Loading..." }) : lazyOptions.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_jsx_runtime49.Fragment, { children: [
           lazyOptions.map((option) => {
             const isSelected = normalizedValue.includes(option.value);
-            return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+            return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
               "div",
               {
                 onClick: () => toggleSelect(option.value),
@@ -3836,13 +3929,13 @@ function LazyMultiSelectDropdown({
                 ),
                 children: [
                   option.label,
-                  isSelected && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_lucide_react10.XSquareIcon, { size: 16 })
+                  isSelected && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_lucide_react11.XSquareIcon, { size: 16 })
                 ]
               },
               option.value
             );
           }),
-          hasMore && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+          hasMore && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
             "div",
             {
               ref: observerTarget,
@@ -3850,29 +3943,29 @@ function LazyMultiSelectDropdown({
               children: loading ? "Loading\u2026" : "Scroll for more\u2026"
             }
           )
-        ] }) : /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "px-3 py-3 text-center text-gray-500", children: "No results" })
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "px-3 py-3 text-center text-gray-500", children: "No results" })
       }
     ) })
   ] });
 }
 
 // src/components/ui/data-table.tsx
-var React11 = __toESM(require("react"));
+var React12 = __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");
 var import_axios3 = __toESM(require("axios"));
-var import_lucide_react12 = require("lucide-react");
+var import_lucide_react13 = require("lucide-react");
 
 // src/components/ui/table.tsx
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_jsx_runtime50 = require("react/jsx-runtime");
 function Table({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
     "div",
     {
       "data-slot": "table-container",
       className: "relative w-full overflow-x-auto rounded-md border border-gray-200 bg-white",
-      children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
         "table",
         {
           "data-slot": "table",
@@ -3884,7 +3977,7 @@ function Table({ className, ...props }) {
   );
 }
 function TableHeader({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
     "thead",
     {
       "data-slot": "table-header",
@@ -3897,7 +3990,7 @@ function TableHeader({ className, ...props }) {
   );
 }
 function TableBody({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
     "tbody",
     {
       "data-slot": "table-body",
@@ -3910,7 +4003,7 @@ function TableBody({ className, ...props }) {
   );
 }
 function TableRow({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
     "tr",
     {
       "data-slot": "table-row",
@@ -3923,7 +4016,7 @@ function TableRow({ className, ...props }) {
   );
 }
 function TableHead({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
     "th",
     {
       "data-slot": "table-head",
@@ -3936,7 +4029,7 @@ function TableHead({ className, ...props }) {
   );
 }
 function TableCell({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
     "td",
     {
       "data-slot": "table-cell",
@@ -3953,11 +4046,11 @@ function TableCell({ className, ...props }) {
 var import_react_table = require("@tanstack/react-table");
 
 // src/lib/table/cellRendererFactory.tsx
-var import_react31 = __toESM(require("react"));
+var import_react32 = __toESM(require("react"));
 var LucideIcons2 = __toESM(require("lucide-react"));
-var import_lucide_react11 = require("lucide-react");
+var import_lucide_react12 = require("lucide-react");
 var import_image = __toESM(require("next/image"));
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_jsx_runtime51 = require("react/jsx-runtime");
 var getContrastColor = (bg) => {
   let c = bg.trim().toUpperCase();
   if (/^#([a-fA-F0-9]{3})$/.test(c)) {
@@ -3991,9 +4084,9 @@ var getContrastColor = (bg) => {
 };
 var sanitizeValue = (val) => {
   if (val == null) return null;
-  if (import_react31.default.isValidElement(val)) return val;
+  if (import_react32.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_react31.default.Fragment, { children: sanitizeValue(v) }, i));
+  if (Array.isArray(val)) return val.map((v, i) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_react32.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;
@@ -4011,13 +4104,13 @@ var cellRendererFactory = (renderer, rendererProps, value, row, customRenderers
   switch (renderer) {
     /* -------------------- BASIC -------------------- */
     case "text":
-      return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { children: rowValue || formattedValue });
+      return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { children: rowValue || formattedValue });
     case "number":
-      return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "tabular-nums text-right", children: valueFormatter(rowValue || value, "number:2") });
+      return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "tabular-nums text-right", children: valueFormatter(rowValue || value, "number:2") });
     case "date":
-      return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { children: valueFormatter(rowValue || value, format3) });
+      return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { children: valueFormatter(rowValue || value, format3) });
     case "link":
-      return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
         "a",
         {
           href: `${rendererProps?.prefix || ""}${rowValue || formattedValue}`,
@@ -4029,7 +4122,7 @@ var cellRendererFactory = (renderer, rendererProps, value, row, customRenderers
       );
     /* -------------------- VISUAL -------------------- */
     case "image":
-      return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "relative", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "relative", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
         import_image.default,
         {
           src: rowValue || formattedValue || rendererProps?.fallback || "/placeholder.png",
@@ -4045,7 +4138,7 @@ var cellRendererFactory = (renderer, rendererProps, value, row, customRenderers
       ) });
     case "icon":
       if (!formattedValue) return null;
-      return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
         Icon,
         {
           iconSet: rendererProps?.iconSet,
@@ -4062,7 +4155,7 @@ var cellRendererFactory = (renderer, rendererProps, value, row, customRenderers
       const color = rendererProps?.colorMap?.[formattedValue] || rendererProps?.color || "gray";
       if (!formattedValue) return null;
       const textColor = getContrastColor(color);
-      return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
         "span",
         {
           className: `inline-block px-2 py-1 text-xs rounded-full bg-${color}-100 text-${textColor}-700 ${rendererProps?.className || ""}`,
@@ -4077,13 +4170,13 @@ var cellRendererFactory = (renderer, rendererProps, value, row, customRenderers
       const IconComponent = typeof maybeIcon === "function" ? maybeIcon : LucideIcons2.Star;
       if (!formattedValue) return null;
       const textColor = getContrastColor(color);
-      return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
         "span",
         {
           className: `inline-flex items-center gap-1 px-2 py-1 text-xs rounded-full bg-[${color}]-100 text-[${textColor}]-700`,
           style: { backgroundColor: color, color: textColor },
           children: [
-            rendererProps?.icon && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_jsx_runtime50.Fragment, { children: IconComponent ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(IconComponent, { className: "h-4 w-4" }) : /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(LucideIcons2.Box, { className: "h-4 w-4" }) }),
+            rendererProps?.icon && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_jsx_runtime51.Fragment, { children: IconComponent ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(IconComponent, { className: "h-4 w-4" }) : /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(LucideIcons2.Box, { className: "h-4 w-4" }) }),
             formattedValue
           ]
         }
@@ -4091,7 +4184,7 @@ var cellRendererFactory = (renderer, rendererProps, value, row, customRenderers
     }
     /* -------------------- INTERACTIVE -------------------- */
     case "button":
-      return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
         "button",
         {
           onClick: () => rendererProps?.onClick?.(row, formattedValue),
@@ -4100,8 +4193,8 @@ var cellRendererFactory = (renderer, rendererProps, value, row, customRenderers
         }
       );
     case "switch":
-      return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("label", { className: "inline-flex items-center cursor-pointer", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("label", { className: "inline-flex items-center cursor-pointer", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
           "input",
           {
             type: "checkbox",
@@ -4110,10 +4203,10 @@ var cellRendererFactory = (renderer, rendererProps, value, row, customRenderers
             className: "sr-only peer"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "relative w-9 h-5 bg-gray-300 peer-checked:bg-blue-600 rounded-full transition-all", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "absolute top-[2px] left-[2px] w-4 h-4 bg-white rounded-full peer-checked:translate-x-4 transition-all" }) })
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "relative w-9 h-5 bg-gray-300 peer-checked:bg-blue-600 rounded-full transition-all", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "absolute top-[2px] left-[2px] w-4 h-4 bg-white rounded-full peer-checked:translate-x-4 transition-all" }) })
       ] });
     case "progress":
-      return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "w-full bg-gray-100 rounded-full h-2", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "w-full bg-gray-100 rounded-full h-2", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
         "div",
         {
           className: "bg-blue-600 h-2 rounded-full transition-all",
@@ -4122,8 +4215,8 @@ var cellRendererFactory = (renderer, rendererProps, value, row, customRenderers
       ) });
     case "rating": {
       const stars = Math.round(Number(rowValue || formattedValue) || 0);
-      return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "flex items-center", children: Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
-        import_lucide_react11.Star,
+      return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "flex items-center", children: Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+        import_lucide_react12.Star,
         {
           size: 16,
           className: i < stars ? "text-yellow-400" : "text-gray-300",
@@ -4133,7 +4226,7 @@ var cellRendererFactory = (renderer, rendererProps, value, row, customRenderers
       )) });
     }
     case "checkbox":
-      return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
         "input",
         {
           type: "checkbox",
@@ -4143,7 +4236,7 @@ var cellRendererFactory = (renderer, rendererProps, value, row, customRenderers
         }
       );
     case "html":
-      return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
         "span",
         {
           dangerouslySetInnerHTML: { __html: String(rowValue || formattedValue) }
@@ -4153,7 +4246,7 @@ var cellRendererFactory = (renderer, rendererProps, value, row, customRenderers
     case "custom": {
       const CustomRenderer = customRenderers[rendererProps?.customRendererId] || customRenderers[rendererProps?.rendererId];
       if (CustomRenderer)
-        return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
           CustomRenderer,
           {
             value: formattedValue,
@@ -4161,11 +4254,11 @@ var cellRendererFactory = (renderer, rendererProps, value, row, customRenderers
             ...rendererProps
           }
         );
-      return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { children: "Missing custom renderer" });
+      return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { children: "Missing custom renderer" });
     }
     /* -------------------- DEFAULT -------------------- */
     default:
-      return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { children: formattedValue || "-" });
+      return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { children: formattedValue || "-" });
   }
 };
 
@@ -4229,7 +4322,7 @@ var useDynamicColumns = (config, customRenderers = {}, customFormatters = {}) =>
 };
 
 // src/components/ui/data-table.tsx
-var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_jsx_runtime52 = require("react/jsx-runtime");
 function DataTable({
   columns,
   data,
@@ -4256,13 +4349,13 @@ function DataTable({
   enableTotalRecords,
   getRowCount
 }) {
-  const [columnFilters, setColumnFilters] = React11.useState([]);
-  const [columnVisibility, setColumnVisibility] = React11.useState({});
-  const hasLoadedInitialState = React11.useRef(false);
-  const isSavingRef = React11.useRef(false);
-  const isFetchingRef = React11.useRef(false);
-  const [fetchLoading, setFetchLoading] = React11.useState(false);
-  const transformApiToFrontend = React11.useCallback((apiSettings, allColumnIds) => {
+  const [columnFilters, setColumnFilters] = React12.useState([]);
+  const [columnVisibility, setColumnVisibility] = React12.useState({});
+  const hasLoadedInitialState = React12.useRef(false);
+  const isSavingRef = React12.useRef(false);
+  const isFetchingRef = React12.useRef(false);
+  const [fetchLoading, setFetchLoading] = React12.useState(false);
+  const transformApiToFrontend = React12.useCallback((apiSettings, allColumnIds) => {
     if (!apiSettings || !apiSettings.columns || !apiSettings.columns.visible) {
       return {};
     }
@@ -4273,7 +4366,7 @@ function DataTable({
     });
     return result;
   }, []);
-  const transformFrontendToApi = React11.useCallback((visibility) => {
+  const transformFrontendToApi = React12.useCallback((visibility) => {
     const visibleColumns = Object.keys(visibility).filter((colId) => visibility[colId] === true);
     return {
       columns: {
@@ -4281,7 +4374,7 @@ function DataTable({
       }
     };
   }, []);
-  const fetchColumnPreferences = React11.useCallback(async () => {
+  const fetchColumnPreferences = React12.useCallback(async () => {
     if (isFetchingRef.current) {
       return;
     }
@@ -4341,7 +4434,7 @@ function DataTable({
       isFetchingRef.current = false;
     }
   }, [tableId, transformApiToFrontend, manageColumns]);
-  const saveColumnPreferences = React11.useCallback(async (visibility) => {
+  const saveColumnPreferences = React12.useCallback(async (visibility) => {
     if (!tableId || isSavingRef.current || !manageColumns) {
       return;
     }
@@ -4367,7 +4460,7 @@ function DataTable({
       isSavingRef.current = false;
     }
   }, [tableId, transformFrontendToApi, manageColumns]);
-  React11.useEffect(() => {
+  React12.useEffect(() => {
     if (hasLoadedInitialState.current || isFetchingRef.current) {
       return;
     }
@@ -4378,10 +4471,10 @@ function DataTable({
       fetchColumnPreferences();
     }
   }, [tableId, manageColumns]);
-  const [manualSort, setManualSort] = React11.useState(null);
-  const [searchTerm, setSearchTerm] = React11.useState("");
+  const [manualSort, setManualSort] = React12.useState(null);
+  const [searchTerm, setSearchTerm] = React12.useState("");
   const tableData = Array.isArray(data) ? data : [];
-  const filteredData = React11.useMemo(() => {
+  const filteredData = React12.useMemo(() => {
     if (paginationMode === "client" && globalSearch && searchTerm.trim()) {
       const searchLower = searchTerm.toLowerCase().trim();
       return tableData.filter((row) => {
@@ -4404,7 +4497,7 @@ function DataTable({
       id: "__select__",
       renderer: "checkbox",
       size: 40,
-      header: ({ table: table2 }) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+      header: ({ table: table2 }) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
         "input",
         {
           type: "checkbox",
@@ -4422,12 +4515,12 @@ function DataTable({
     });
   }
   const dynamicCols = useDynamicColumns({ columns: finalCols, enableRowSelection });
-  const [rowSelection, setRowSelection] = React11.useState({});
-  const [localPageSize, setLocalPageSize] = React11.useState(pageSize);
-  const [localPageIndex, setLocalPageIndex] = React11.useState(0);
-  const isUpdatingPageSizeRef = React11.useRef(false);
-  const tableRef = React11.useRef(null);
-  React11.useEffect(() => {
+  const [rowSelection, setRowSelection] = React12.useState({});
+  const [localPageSize, setLocalPageSize] = React12.useState(pageSize);
+  const [localPageIndex, setLocalPageIndex] = React12.useState(0);
+  const isUpdatingPageSizeRef = React12.useRef(false);
+  const tableRef = React12.useRef(null);
+  React12.useEffect(() => {
     if (paginationMode === "client") {
       setLocalPageSize(pageSize);
     } else if (paginationMode === "server" && meta?.limit != null) {
@@ -4503,7 +4596,7 @@ function DataTable({
       }
     }
   });
-  React11.useEffect(() => {
+  React12.useEffect(() => {
     tableRef.current = table;
     if (table && !hasLoadedInitialState.current && !isFetchingRef.current && tableId) {
       fetchColumnPreferences();
@@ -4541,7 +4634,7 @@ function DataTable({
       setLocalPageIndex(0);
     }
   };
-  const pageSizeOptions = React11.useMemo(() => {
+  const pageSizeOptions = React12.useMemo(() => {
     if (paginationMode === "client") {
       return [5, 10, 20, 50, 100];
     }
@@ -4552,10 +4645,10 @@ function DataTable({
     }
     return base;
   }, [paginationMode, meta?.limit]);
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "overflow-hidden rounded-md w-full", children: [
-    !loading && /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "flex justify-between p-2 bg-gray-50", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "flex items-center gap-4 w-full", children: [
-        enableTotalRecords && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "overflow-hidden rounded-md w-full", children: [
+    !loading && /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "flex justify-between p-2 bg-gray-50", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "flex items-center gap-4 w-full", children: [
+        enableTotalRecords && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
           Button,
           {
             size: "sm",
@@ -4570,9 +4663,9 @@ function DataTable({
             children: fetchLoading ? "Fetching..." : "Get Count"
           }
         ),
-        globalSearch && /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "flex items-center gap-2 w-full max-w-sm", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "relative w-full", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+        globalSearch && /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "flex items-center gap-2 w-full max-w-sm", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "relative w-full", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
               "input",
               {
                 type: "text",
@@ -4594,9 +4687,9 @@ function DataTable({
                 className: "border border-gray-300 rounded-md text-sm px-3 py-2 pl-8 w-full focus:outline-none focus:ring-1 focus:ring-[#12715B]"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_lucide_react12.Search, { className: "absolute left-2 top-2.5 text-gray-400", size: 16 })
+            /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_lucide_react13.Search, { className: "absolute left-2 top-2.5 text-gray-400", size: 16 })
           ] }),
-          paginationMode === "server" && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+          paginationMode === "server" && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
             Button,
             {
               size: "sm",
@@ -4607,8 +4700,8 @@ function DataTable({
           )
         ] })
       ] }),
-      manageColumns && /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(Popover, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+      manageColumns && /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(Popover, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
           Button,
           {
             variant: "outline",
@@ -4617,11 +4710,11 @@ function DataTable({
             children: "Manage Columns"
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(PopoverContent, { align: "end", className: "w-48 p-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "text-sm font-medium mb-2", children: "Show / Hide Columns" }),
-          /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "max-h-56 overflow-y-auto pr-1 space-y-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("label", { className: "flex items-center gap-2 text-sm font-semibold border-b pb-2 mb-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(PopoverContent, { align: "end", className: "w-48 p-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "text-sm font-medium mb-2", children: "Show / Hide Columns" }),
+          /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "max-h-56 overflow-y-auto pr-1 space-y-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("label", { className: "flex items-center gap-2 text-sm font-semibold border-b pb-2 mb-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
                 "input",
                 {
                   type: "checkbox",
@@ -4642,8 +4735,8 @@ function DataTable({
             ] }),
             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)(
+              return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("label", { className: "flex items-center gap-2 text-sm", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
                   "input",
                   {
                     type: "checkbox",
@@ -4658,12 +4751,12 @@ function DataTable({
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(Table, { className: "table-fixed", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(TableHeader, { children: table.getHeaderGroups().map((hg) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(TableRow, { children: hg.headers.map((header, index) => {
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(Table, { className: "table-fixed", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(TableHeader, { children: table.getHeaderGroups().map((hg) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(TableRow, { children: hg.headers.map((header, index) => {
         const canSort = header.column.getCanSort();
         const canFilter = header.column.getCanFilter();
         const sortDir = manualSort?.key === header.column.id ? manualSort.dir : null;
-        return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
           TableHead,
           {
             className: "relative select-none",
@@ -4672,8 +4765,8 @@ function DataTable({
               minWidth: header.column.columnDef.minSize,
               maxWidth: header.column.columnDef.maxSize
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "flex items-center justify-between", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "flex items-center justify-between", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
                 "span",
                 {
                   className: `flex items-center gap-1 ${canSort ? "cursor-pointer" : ""}`,
@@ -4685,32 +4778,32 @@ function DataTable({
                   },
                   children: [
                     (0, import_react_table2.flexRender)(header.column.columnDef.header, header.getContext()),
-                    canSort && /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_jsx_runtime51.Fragment, { children: [
-                      sortDir === "asc" && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_lucide_react12.ArrowUp, { size: 14, className: "text-gray-500" }),
-                      sortDir === "desc" && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_lucide_react12.ArrowDown, { size: 14, className: "text-gray-500" }),
-                      !sortDir && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_lucide_react12.ArrowUpDown, { size: 14, className: "text-gray-400" })
+                    canSort && /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_jsx_runtime52.Fragment, { children: [
+                      sortDir === "asc" && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_lucide_react13.ArrowUp, { size: 14, className: "text-gray-500" }),
+                      sortDir === "desc" && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_lucide_react13.ArrowDown, { size: 14, className: "text-gray-500" }),
+                      !sortDir && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_lucide_react13.ArrowUpDown, { size: 14, className: "text-gray-400" })
                     ] })
                   ]
                 }
               ),
-              canFilter && /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(Popover, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+              canFilter && /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(Popover, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
                   "span",
                   {
                     role: "presentation",
                     className: "pl-5 cursor-pointer",
                     onClick: (e) => e.stopPropagation(),
-                    children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_react_fontawesome3.FontAwesomeIcon, { icon: import_free_solid_svg_icons2.faEllipsisH, className: "w-5 h-5 text-gray-500" })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_react_fontawesome3.FontAwesomeIcon, { icon: import_free_solid_svg_icons2.faEllipsisH, className: "w-5 h-5 text-gray-500" })
                   }
                 ) }),
-                /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
                   PopoverContent,
                   {
                     align: "center",
                     sideOffset: 14,
                     className: "w-50 p-3 z-[200] border-gray-300",
                     avoidCollisions: true,
-                    children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
+                    children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
                       "form",
                       {
                         onSubmit: (e) => {
@@ -4723,8 +4816,8 @@ function DataTable({
                         },
                         className: "space-y-2",
                         children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("label", { htmlFor: "filter", className: "text-xs text-gray-500 font-normal", children: "Filter by value:" }),
-                          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("label", { htmlFor: "filter", className: "text-xs text-gray-500 font-normal", children: "Filter by value:" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
                             "input",
                             {
                               name: "filter",
@@ -4734,7 +4827,7 @@ function DataTable({
                               autoComplete: "off"
                             }
                           ),
-                          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "justify-end flex", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "justify-end flex", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
                             Button,
                             {
                               type: "submit",
@@ -4753,9 +4846,9 @@ function DataTable({
           `header-${header.id}-${index}`
         );
       }) }, `header-group-${hg.id}`)) }),
-      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(TableBody, { children: loading ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_jsx_runtime51.Fragment, { children: Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(TableRow, { children: table.getHeaderGroups()[0].headers.map((header, j) => {
+      /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(TableBody, { children: loading ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_jsx_runtime52.Fragment, { children: Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(TableRow, { children: table.getHeaderGroups()[0].headers.map((header, j) => {
         const column = header.column;
-        return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
           TableCell,
           {
             className: "p-3",
@@ -4764,15 +4857,15 @@ function DataTable({
               minWidth: column.columnDef.minSize,
               maxWidth: column.columnDef.maxSize
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "h-4 bg-gray-200 rounded w-full block animate-pulse" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "h-4 bg-gray-200 rounded w-full block animate-pulse" })
           },
           j
         );
-      }) }, i)) }) : table.getRowModel().rows.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(TableRow, { children: row.getVisibleCells().map((cell, cellIndex, arr) => {
+      }) }, i)) }) : table.getRowModel().rows.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(TableRow, { children: row.getVisibleCells().map((cell, cellIndex, arr) => {
         const meta2 = cell.column.columnDef.meta || {};
         const isClickable = meta2?.isClickable;
         const isLastCell = cellIndex === arr.length - 1;
-        return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
+        return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
           TableCell,
           {
             className: `break-words whitespace-normal align-top ${isClickable ? "cursor-pointer hover:bg-gray-100 underline text-blue-500" : ""} relative py-2 ${meta2?.cellClass ?? ""}`,
@@ -4789,9 +4882,9 @@ function DataTable({
             },
             children: [
               (0, import_react_table2.flexRender)(cell.column.columnDef.cell, cell.getContext()),
-              isLastCell && rowActions && rowActions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "absolute p-1 px-2 inset-y-0 right-0 flex items-center transition-opacity duration-200", children: rowActions.map((action) => {
+              isLastCell && rowActions && rowActions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "absolute p-1 px-2 inset-y-0 right-0 flex items-center transition-opacity duration-200", children: rowActions.map((action) => {
                 const isDelete = action.id === "delete" || action.icon === "delete";
-                return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+                return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
                   "button",
                   {
                     className: `ml-2 px-2 py-1 text-[12px] rounded cursor-pointer ${isDelete ? "bg-red-800 text-white hover:bg-neutral-600" : "bg-gray-300 hover:bg-gray-400"}`,
@@ -4813,23 +4906,23 @@ function DataTable({
           },
           `cell-${cell.id}-${cellIndex}`
         );
-      }) }, row.id)) : /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(TableCell, { colSpan: dynamicCols.length, className: "h-24 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "flex items-center justify-center py-10 w-full min-w-full text-gray-600 bg-gray-100", children: "No results." }) }) }) })
+      }) }, row.id)) : /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(TableCell, { colSpan: dynamicCols.length, className: "h-24 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "flex items-center justify-center py-10 w-full min-w-full text-gray-600 bg-gray-100", children: "No results." }) }) }) })
     ] }),
-    pagination && /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "flex items-center justify-between py-3 text-sm w-full", children: [
-      !loading && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "flex gap-2 items-center", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+    pagination && /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "flex items-center justify-between py-3 text-sm w-full", children: [
+      !loading && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "flex gap-2 items-center", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
         "select",
         {
           value: paginationMode === "server" && meta?.limit != null ? meta.limit : localPageSize,
           onChange: handlePageSizeChange,
           className: "ml-2 border rounded py-1 text-sm cursor-pointer border-blue-600",
-          children: pageSizeOptions.map((size) => /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("option", { value: size, children: [
+          children: pageSizeOptions.map((size) => /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("option", { value: size, children: [
             size,
             " / page"
           ] }, size))
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
           "button",
           {
             onClick: () => table.previousPage(),
@@ -4838,7 +4931,7 @@ function DataTable({
             children: "Prev"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
           "button",
           {
             onClick: () => table.nextPage(),
@@ -4853,7 +4946,7 @@ function DataTable({
 }
 
 // src/components/DataDisplay/Table/Table.tsx
-var import_jsx_runtime52 = require("react/jsx-runtime");
+var import_jsx_runtime53 = require("react/jsx-runtime");
 var Table2 = ({
   columns,
   data,
@@ -4878,7 +4971,7 @@ var Table2 = ({
   const rawColumns = Array.isArray(columns) ? columns : [];
   const rawData = Array.isArray(data) ? data : [];
   const isControlled = typeof page === "number";
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: `${className || ""} space-y-3`, style, children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: `${className || ""} space-y-3`, style, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
     DataTable,
     {
       ...props,
@@ -4909,10 +5002,10 @@ var Table2 = ({
 var Table_default = Table2;
 
 // src/components/ui/pagination.tsx
-var import_lucide_react13 = require("lucide-react");
-var import_jsx_runtime53 = require("react/jsx-runtime");
+var import_lucide_react14 = require("lucide-react");
+var import_jsx_runtime54 = require("react/jsx-runtime");
 function Pagination({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
     "nav",
     {
       role: "navigation",
@@ -4927,7 +5020,7 @@ function PaginationContent({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
     "ul",
     {
       "data-slot": "pagination-content",
@@ -4937,7 +5030,7 @@ function PaginationContent({
   );
 }
 function PaginationItem({ ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("li", { "data-slot": "pagination-item", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("li", { "data-slot": "pagination-item", ...props });
 }
 function PaginationLink({
   className,
@@ -4945,7 +5038,7 @@ function PaginationLink({
   size = "icon",
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
     "a",
     {
       "aria-current": isActive ? "page" : void 0,
@@ -4966,7 +5059,7 @@ function PaginationPrevious({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
     PaginationLink,
     {
       "aria-label": "Go to previous page",
@@ -4974,8 +5067,8 @@ function PaginationPrevious({
       className: cn("gap-1 px-2.5 sm:pl-2.5", className),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_lucide_react13.ChevronLeftIcon, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "hidden sm:block", children: "Previous" })
+        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react14.ChevronLeftIcon, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "hidden sm:block", children: "Previous" })
       ]
     }
   );
@@ -4984,7 +5077,7 @@ function PaginationNext({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
     PaginationLink,
     {
       "aria-label": "Go to next page",
@@ -4992,8 +5085,8 @@ function PaginationNext({
       className: cn("gap-1 px-2.5 sm:pr-2.5", className),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "hidden sm:block", children: "Next" }),
-        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_lucide_react13.ChevronRightIcon, {})
+        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "hidden sm:block", children: "Next" }),
+        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react14.ChevronRightIcon, {})
       ]
     }
   );
@@ -5002,7 +5095,7 @@ function PaginationEllipsis({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
     "span",
     {
       "aria-hidden": true,
@@ -5010,15 +5103,15 @@ function PaginationEllipsis({
       className: cn("flex size-9 items-center justify-center", className),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_lucide_react13.MoreHorizontalIcon, { className: "size-4" }),
-        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "sr-only", children: "More pages" })
+        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react14.MoreHorizontalIcon, { className: "size-4" }),
+        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "sr-only", children: "More pages" })
       ]
     }
   );
 }
 
 // src/components/DataDisplay/Pagination/Pagination.tsx
-var import_jsx_runtime54 = require("react/jsx-runtime");
+var import_jsx_runtime55 = require("react/jsx-runtime");
 var CustomPagination = ({
   totalPages,
   currentPage,
@@ -5064,10 +5157,10 @@ var CustomPagination = ({
     }
   };
   const pageNumbers = getPageNumbers();
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "flex flex-row gap-1 w-full items-center justify-between", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("p", { className: "text-sm text-muted-foreground whitespace-nowrap", children: "Items per page:" }),
-      /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "flex flex-row gap-1 w-full items-center justify-between", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("p", { className: "text-sm text-muted-foreground whitespace-nowrap", children: "Items per page:" }),
+      /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
         Select,
         {
           defaultValue: String(perPage),
@@ -5075,26 +5168,26 @@ var CustomPagination = ({
             onPageChange({ page: 1, itemsPerPage: Number(value) });
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(SelectTrigger, { className: "w-[100px]", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(SelectValue, { placeholder: "Select" }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(SelectContent, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(SelectItem, { value: "5", children: "5" }),
-              /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(SelectItem, { value: "10", children: "10" }),
-              /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(SelectItem, { value: "20", children: "20" }),
-              /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(SelectItem, { value: "50", children: "50" })
+            /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(SelectTrigger, { className: "w-[100px]", children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(SelectValue, { placeholder: "Select" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(SelectContent, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(SelectItem, { value: "5", children: "5" }),
+              /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(SelectItem, { value: "10", children: "10" }),
+              /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(SelectItem, { value: "20", children: "20" }),
+              /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(SelectItem, { value: "50", children: "50" })
             ] })
           ]
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Pagination, { className: "justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(PaginationContent, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(PaginationItem, { children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Pagination, { className: "justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(PaginationContent, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(PaginationItem, { children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
         PaginationPrevious,
         {
           onClick: () => handlePageChange(currentPage - 1),
           className: currentPage === 1 ? "pointer-events-none opacity-50" : "cursor-pointer"
         }
       ) }),
-      pageNumbers.map((pageNumber, index) => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(PaginationItem, { children: pageNumber === "..." ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(PaginationEllipsis, {}) : /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+      pageNumbers.map((pageNumber, index) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(PaginationItem, { children: pageNumber === "..." ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(PaginationEllipsis, {}) : /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
         PaginationLink,
         {
           onClick: () => handlePageChange(pageNumber),
@@ -5103,7 +5196,7 @@ var CustomPagination = ({
           children: pageNumber
         }
       ) }, index)),
-      /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(PaginationItem, { children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(PaginationItem, { children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
         PaginationNext,
         {
           onClick: () => handlePageChange(currentPage + 1),
@@ -5116,23 +5209,23 @@ var CustomPagination = ({
 var Pagination_default = CustomPagination;
 
 // src/components/DataDisplay/HistoryTimeline/HistoryTimeline.tsx
-var import_react32 = require("react");
-var import_lucide_react15 = require("lucide-react");
+var import_react33 = require("react");
+var import_lucide_react16 = require("lucide-react");
 
 // src/components/ui/accordion.tsx
 var AccordionPrimitive = __toESM(require("@radix-ui/react-accordion"));
-var import_lucide_react14 = require("lucide-react");
-var import_jsx_runtime55 = require("react/jsx-runtime");
+var import_lucide_react15 = require("lucide-react");
+var import_jsx_runtime56 = require("react/jsx-runtime");
 function Accordion2({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(AccordionPrimitive.Root, { "data-slot": "accordion", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(AccordionPrimitive.Root, { "data-slot": "accordion", ...props });
 }
 function AccordionItem({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
     AccordionPrimitive.Item,
     {
       "data-slot": "accordion-item",
@@ -5146,7 +5239,7 @@ function AccordionTrigger({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(AccordionPrimitive.Header, { className: "flex", children: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(AccordionPrimitive.Header, { className: "flex", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
     AccordionPrimitive.Trigger,
     {
       "data-slot": "accordion-trigger",
@@ -5157,7 +5250,7 @@ function AccordionTrigger({
       ...props,
       children: [
         children,
-        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_lucide_react14.ChevronDownIcon, { className: "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" })
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_lucide_react15.ChevronDownIcon, { className: "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" })
       ]
     }
   ) });
@@ -5167,21 +5260,21 @@ function AccordionContent({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
     AccordionPrimitive.Content,
     {
       "data-slot": "accordion-content",
       className: "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm",
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: cn("pt-0 pb-4", className), children })
+      children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: cn("pt-0 pb-4", className), children })
     }
   );
 }
 
 // src/components/ui/card.tsx
-var import_jsx_runtime56 = require("react/jsx-runtime");
+var import_jsx_runtime57 = require("react/jsx-runtime");
 function Card({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
     "div",
     {
       "data-slot": "card",
@@ -5194,7 +5287,7 @@ function Card({ className, ...props }) {
   );
 }
 function CardHeader({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
     "div",
     {
       "data-slot": "card-header",
@@ -5207,7 +5300,7 @@ function CardHeader({ className, ...props }) {
   );
 }
 function CardTitle({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
     "div",
     {
       "data-slot": "card-title",
@@ -5217,7 +5310,7 @@ function CardTitle({ className, ...props }) {
   );
 }
 function CardContent({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
     "div",
     {
       "data-slot": "card-content",
@@ -5228,7 +5321,7 @@ function CardContent({ className, ...props }) {
 }
 
 // src/components/DataDisplay/HistoryTimeline/HistoryTimeline.tsx
-var import_jsx_runtime57 = require("react/jsx-runtime");
+var import_jsx_runtime58 = require("react/jsx-runtime");
 function getValue(item, key) {
   if (!key) return void 0;
   return item[key];
@@ -5242,33 +5335,33 @@ var HistoryTimeline = ({
   createdAtKey,
   ...props
 }) => {
-  const data = (0, import_react32.useMemo)(() => {
+  const data = (0, import_react33.useMemo)(() => {
     if (Array.isArray(props.data)) {
       return props.data;
     }
     return [];
   }, [props.data]);
   if (loading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Card, { className: cn("w-full", className), children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(CardContent, { className: "flex items-center justify-center px-4 py-8", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_lucide_react15.LoaderCircle, { className: "h-5 w-5 animate-spin text-muted-foreground" }),
-      /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "ml-2 text-sm text-muted-foreground", children: "Loading history\u2026" })
+    return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Card, { className: cn("w-full", className), children: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(CardContent, { className: "flex items-center justify-center px-4 py-8", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_lucide_react16.LoaderCircle, { className: "h-5 w-5 animate-spin text-muted-foreground" }),
+      /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "ml-2 text-sm text-muted-foreground", children: "Loading history\u2026" })
     ] }) });
   }
   if (data.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Card, { className: cn("w-full", className), children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(CardContent, { className: "px-4 py-8 text-center text-muted-foreground", children: "No history available." }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Card, { className: cn("w-full", className), children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(CardContent, { className: "px-4 py-8 text-center text-muted-foreground", children: "No history available." }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Card, { className: cn("w-full", className), children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Accordion2, { type: "single", collapsible: true, defaultValue: "history", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(AccordionItem, { value: "history", className: "border-0", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(CardHeader, { className: "flex flex-row items-center justify-between gap-2 border-b px-4 py-3", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Card, { className: cn("w-full", className), children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Accordion2, { type: "single", collapsible: true, defaultValue: "history", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(AccordionItem, { value: "history", className: "border-0", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(CardHeader, { className: "flex flex-row items-center justify-between gap-2 border-b px-4 py-3", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
       AccordionTrigger,
       {
         className: cn(
           "flex flex-1 items-center justify-between gap-2 p-0 text-left",
           "hover:no-underline"
         ),
-        children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(CardTitle, { className: "text-base font-semibold", children: title })
+        children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(CardTitle, { className: "text-base font-semibold", children: title })
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(AccordionContent, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(CardContent, { className: "px-4 py-3", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("ol", { className: "relative ml-4 border-l-2 border-[#939393] space-y-4", children: data.map((item, index) => {
+    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(AccordionContent, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(CardContent, { className: "px-4 py-3", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("ol", { className: "relative ml-4 border-l-2 border-[#939393] space-y-4", children: data.map((item, index) => {
       const id = item.id ?? index;
       const rawTitle = getValue(item, titleKey);
       const rawDescription = getValue(item, descriptionKey);
@@ -5276,39 +5369,39 @@ var HistoryTimeline = ({
       const titleText = String(rawTitle ?? "");
       const descriptionText = rawDescription != null ? String(rawDescription) : "";
       const createdAtDate = rawCreatedAt != null ? new Date(rawCreatedAt) : null;
-      return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("li", { className: "relative pl-4", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "absolute left-[-9px] top-2 flex h-4 w-4 items-center justify-center rounded-full bg-primary text-primary-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "bg-[#06A59A] text-white rounded-md p-[5px]", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
-          import_lucide_react15.Info,
+      return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("li", { className: "relative pl-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "absolute left-[-9px] top-2 flex h-4 w-4 items-center justify-center rounded-full bg-primary text-primary-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "bg-[#06A59A] text-white rounded-md p-[5px]", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+          import_lucide_react16.Info,
           {
             className: cn(
               "h-5 w-5 text-white"
             )
           }
         ) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
           Accordion2,
           {
             type: "single",
             collapsible: true,
             className: "w-full",
-            children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(AccordionItem, { value: `item-${item.id}`, className: "border-0", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(AccordionItem, { value: `item-${item.id}`, className: "border-0", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
                 AccordionTrigger,
                 {
                   className: cn(
                     "flex items-center justify-between gap-2 rounded-md px-2 py-1 text-left",
                     "hover:bg-muted/60 hover:no-underline"
                   ),
-                  children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "flex flex-col gap-1", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "text-sm font-medium leading-none", children: titleText }),
-                    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "text-[11px] text-muted-foreground", children: new Intl.DateTimeFormat("default", {
+                  children: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "flex flex-col gap-1", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "text-sm font-medium leading-none", children: titleText }),
+                    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "text-[11px] text-muted-foreground", children: new Intl.DateTimeFormat("default", {
                       dateStyle: "medium",
                       timeStyle: "short"
                     }).format(createdAtDate ?? /* @__PURE__ */ new Date()) })
                   ] })
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(AccordionContent, { className: "pt-1", children: descriptionText && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("p", { className: "rounded-md bg-muted px-2 py-2 text-xs text-muted-foreground", children: descriptionText }) })
+              /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(AccordionContent, { className: "pt-1", children: descriptionText && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("p", { className: "rounded-md bg-muted px-2 py-2 text-xs text-muted-foreground", children: descriptionText }) })
             ] })
           }
         )
@@ -5319,30 +5412,30 @@ var HistoryTimeline = ({
 var HistoryTimeline_default = HistoryTimeline;
 
 // src/components/Navigation/Tabs/Tabs.tsx
-var import_react33 = require("react");
-var import_lucide_react17 = require("lucide-react");
+var import_react34 = require("react");
+var import_lucide_react18 = require("lucide-react");
 var import_link3 = __toESM(require("next/link"));
 var import_navigation2 = require("next/navigation");
 
 // src/components/ui/dialog.tsx
 var DialogPrimitive = __toESM(require("@radix-ui/react-dialog"));
-var import_lucide_react16 = require("lucide-react");
-var import_jsx_runtime58 = require("react/jsx-runtime");
+var import_lucide_react17 = require("lucide-react");
+var import_jsx_runtime59 = require("react/jsx-runtime");
 function Dialog({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
 }
 function DialogPortal({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(DialogPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(DialogPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
 }
 function DialogOverlay({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
     DialogPrimitive.Overlay,
     {
       "data-slot": "dialog-overlay",
@@ -5360,9 +5453,9 @@ function DialogContent({
   showCloseButton = true,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(DialogPortal, { "data-slot": "dialog-portal", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(DialogOverlay, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(DialogPortal, { "data-slot": "dialog-portal", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(DialogOverlay, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
       DialogPrimitive.Content,
       {
         "data-slot": "dialog-content",
@@ -5373,14 +5466,14 @@ function DialogContent({
         ...props,
         children: [
           children,
-          showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
+          showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
             DialogPrimitive.Close,
             {
               "data-slot": "dialog-close",
               className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_lucide_react16.XIcon, {}),
-                /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "sr-only", children: "Close" })
+                /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_lucide_react17.XIcon, {}),
+                /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "sr-only", children: "Close" })
               ]
             }
           )
@@ -5390,7 +5483,7 @@ function DialogContent({
   ] });
 }
 function DialogHeader({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
     "div",
     {
       "data-slot": "dialog-header",
@@ -5400,7 +5493,7 @@ function DialogHeader({ className, ...props }) {
   );
 }
 function DialogFooter({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
     "div",
     {
       "data-slot": "dialog-footer",
@@ -5416,7 +5509,7 @@ function DialogTitle({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
     DialogPrimitive.Title,
     {
       "data-slot": "dialog-title",
@@ -5429,7 +5522,7 @@ function DialogDescription({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
     DialogPrimitive.Description,
     {
       "data-slot": "dialog-description",
@@ -5506,9 +5599,9 @@ function showConfirmToast({
 }
 
 // src/components/Navigation/Tabs/Tabs.tsx
-var import_jsx_runtime59 = require("react/jsx-runtime");
+var import_jsx_runtime60 = 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_react33.useState)(null);
+  const [openIndex, setOpenIndex] = (0, import_react34.useState)(null);
   const currentPathname = (0, import_navigation2.usePathname)();
   function groupMenus(menus = []) {
     const menuMap = /* @__PURE__ */ new Map();
@@ -5542,7 +5635,7 @@ var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode, isBuil
     });
     return sortMenus(rootMenus);
   }
-  const rawTabs = (0, import_react33.useMemo)(() => {
+  const rawTabs = (0, import_react34.useMemo)(() => {
     if (!Array.isArray(tabs)) return [];
     if (source === "manual") return Array.isArray(tabs) ? tabs : [];
     return groupMenus(tabs);
@@ -5572,9 +5665,9 @@ var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode, isBuil
     return tab.children.some((child) => isActive(child.url));
   };
   const router = (0, import_navigation2.useRouter)();
-  const [showExitDialog, setShowExitDialog] = (0, import_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();
@@ -5605,13 +5698,13 @@ var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode, isBuil
       border: active && textActiveColor ? `1px solid ${textActiveColor}` : void 0
     };
     if (Array.isArray(tab.children) && tab.children.length > 0 && tab.isDropDown) {
-      return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
         DropdownMenu,
         {
           open: openIndex === index,
           onOpenChange: (open) => setOpenIndex(open ? index : null),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
               DropdownMenuTrigger,
               {
                 className: `${finalClasses} inline-flex items-center gap-1`,
@@ -5625,11 +5718,11 @@ var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode, isBuil
                 style: finalStyle,
                 children: [
                   tab.header,
-                  /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_lucide_react17.ChevronDown, { className: "h-4 w-4 opacity-80" })
+                  /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_lucide_react18.ChevronDown, { className: "h-4 w-4 opacity-80" })
                 ]
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
               DropdownMenuContent,
               {
                 align: "start",
@@ -5642,12 +5735,12 @@ var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode, isBuil
                 onMouseLeave: () => {
                   timeout = setTimeout(() => setOpenIndex(null), 150);
                 },
-                children: tab.children.map((item, index2) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+                children: tab.children.map((item, index2) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
                   DropdownMenuItem,
                   {
                     asChild: true,
                     className: "cursor-pointer rounded-sm px-3 py-2 text-gray-800 hover:bg-gray-100 focus:bg-gray-100",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+                    children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
                       import_link3.default,
                       {
                         href: item.url || "#",
@@ -5666,7 +5759,7 @@ var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode, isBuil
         index
       );
     }
-    return tab.url ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+    return tab.url ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
       import_link3.default,
       {
         href: tab.url,
@@ -5677,14 +5770,14 @@ var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode, isBuil
         children: tab.header
       },
       index
-    ) : /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: finalClasses, style: finalStyle, role: "button", tabIndex: 0, children: tab.header }, index);
+    ) : /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: finalClasses, style: finalStyle, role: "button", tabIndex: 0, children: tab.header }, index);
   };
-  const renderMobileMenu = () => /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(DropdownMenu, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(DropdownMenuTrigger, { className: "flex items-center gap-2 px-3 py-2 rounded-md bg-white/10 text-white text-sm", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_lucide_react17.Menu, { className: "h-4 w-4" }),
+  const renderMobileMenu = () => /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(DropdownMenu, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(DropdownMenuTrigger, { className: "flex items-center gap-2 px-3 py-2 rounded-md bg-white/10 text-white text-sm", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_lucide_react18.Menu, { className: "h-4 w-4" }),
       "Menu"
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
       DropdownMenuContent,
       {
         align: "start",
@@ -5693,25 +5786,25 @@ var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode, isBuil
         children: rawTabs.map((tab, i) => {
           const hasChildren = Array.isArray(tab.children) && tab.children.length > 0 && tab.isDropDown;
           if (hasChildren) {
-            return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(DropdownMenuSub, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(DropdownMenuSubTrigger, { className: "flex items-center justify-between cursor-pointer rounded-sm px-3 py-2 text-[13px] text-foreground hover:text-foreground", children: tab.header }),
-              /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(DropdownMenuSubContent, { className: "bg-white border shadow-lg rounded-md p-1", children: tab.children.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(DropdownMenuSub, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(DropdownMenuSubTrigger, { className: "flex items-center justify-between cursor-pointer rounded-sm px-3 py-2 text-[13px] text-foreground hover:text-foreground", children: tab.header }),
+              /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(DropdownMenuSubContent, { className: "bg-white border shadow-lg rounded-md p-1", children: tab.children.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
                 DropdownMenuItem,
                 {
                   asChild: true,
                   className: "cursor-pointer rounded-sm px-3 py-2 text-gray-800 hover:bg-gray-100",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_link3.default, { href: item.url || "#", onClick: (e) => handleBuilderExit(e, item.url || "#"), children: item.header })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_link3.default, { href: item.url || "#", onClick: (e) => handleBuilderExit(e, item.url || "#"), children: item.header })
                 },
                 item.id || index
               )) })
             ] }, i);
           }
-          return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
             DropdownMenuItem,
             {
               asChild: true,
               className: "cursor-pointer rounded-sm px-3 py-2 text-[13px] text-gray-800 hover:bg-gray-100",
-              children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_link3.default, { href: tab.url || "#", onClick: (e) => handleBuilderExit(e, tab.url || "#"), children: tab.header })
+              children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_link3.default, { href: tab.url || "#", onClick: (e) => handleBuilderExit(e, tab.url || "#"), children: tab.header })
             },
             i
           );
@@ -5721,19 +5814,19 @@ var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode, isBuil
   ] });
   const forceMobile = canvasMode ? canvasMode === "mobile" || canvasMode === "tablet" : void 0;
   const forceDesktop = canvasMode ? canvasMode === "desktop" : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_jsx_runtime59.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: cn("min-h-10", className), style, children: [
-      forceDesktop !== void 0 ? forceDesktop && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "hidden md:flex", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: `flex gap-2 ${verticalMenu ? "flex-col items-start" : "flex-row"}`, children: rawTabs.map(renderDesktopTab) }) }) : /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "hidden md:flex", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: `flex gap-2 ${verticalMenu ? "flex-col items-start" : "flex-row"}`, children: rawTabs.map(renderDesktopTab) }) }),
-      forceMobile !== void 0 ? forceMobile && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { children: renderMobileMenu() }) : /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "flex md:hidden", children: renderMobileMenu() })
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_jsx_runtime60.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: cn("min-h-10", className), style, children: [
+      forceDesktop !== void 0 ? forceDesktop && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "hidden md:flex", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: `flex gap-2 ${verticalMenu ? "flex-col items-start" : "flex-row"}`, children: rawTabs.map(renderDesktopTab) }) }) : /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "hidden md:flex", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: `flex gap-2 ${verticalMenu ? "flex-col items-start" : "flex-row"}`, children: rawTabs.map(renderDesktopTab) }) }),
+      forceMobile !== void 0 ? forceMobile && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { children: renderMobileMenu() }) : /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "flex md:hidden", children: renderMobileMenu() })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Dialog, { open: showExitDialog, onOpenChange: setShowExitDialog, children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(DialogContent, { className: "bg-[#fff]", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(DialogHeader, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(DialogTitle, { children: "Exit Builder?" }),
-        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(DialogDescription, { children: "You are about to leave the builder. Any unsaved changes may be lost." })
+    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Dialog, { open: showExitDialog, onOpenChange: setShowExitDialog, children: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(DialogContent, { className: "bg-[#fff]", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(DialogHeader, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(DialogTitle, { children: "Exit Builder?" }),
+        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(DialogDescription, { children: "You are about to leave the builder. Any unsaved changes may be lost." })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(DialogFooter, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Button, { className: "cursor-pointer bg-[#12715b] text-[#fff]", variant: "outline", onClick: () => setShowExitDialog(false), children: "Cancel" }),
-        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Button, { className: "cursor-pointer border-[#12715b] border", onClick: confirmExit, children: "Yes, Exit" })
+      /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(DialogFooter, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Button, { className: "cursor-pointer bg-[#12715b] text-[#fff]", variant: "outline", onClick: () => setShowExitDialog(false), children: "Cancel" }),
+        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Button, { className: "cursor-pointer border-[#12715b] border", onClick: confirmExit, children: "Yes, Exit" })
       ] })
     ] }) })
   ] });
@@ -5741,16 +5834,16 @@ var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode, isBuil
 var Tabs_default = Tabs;
 
 // src/components/Navigation/Stages/Stages.tsx
-var import_react34 = __toESM(require("react"));
+var import_react35 = __toESM(require("react"));
 
 // src/components/ui/tooltip.tsx
 var TooltipPrimitive = __toESM(require("@radix-ui/react-tooltip"));
-var import_jsx_runtime60 = require("react/jsx-runtime");
+var import_jsx_runtime61 = require("react/jsx-runtime");
 function TooltipProvider({
   delayDuration = 0,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
     TooltipPrimitive.Provider,
     {
       "data-slot": "tooltip-provider",
@@ -5762,12 +5855,12 @@ function TooltipProvider({
 function Tooltip({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props }) });
 }
 function TooltipTrigger({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
 }
 function TooltipContent({
   className,
@@ -5776,7 +5869,7 @@ function TooltipContent({
   hideArrow,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(TooltipPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(TooltipPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
     TooltipPrimitive.Content,
     {
       "data-slot": "tooltip-content",
@@ -5788,14 +5881,14 @@ function TooltipContent({
       ...props,
       children: [
         children,
-        !hideArrow && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(TooltipPrimitive.Arrow, { className: "bg-primary fill-primary z-50 size-2.5 rotate-45 rounded-[2px]" })
+        !hideArrow && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(TooltipPrimitive.Arrow, { className: "bg-primary fill-primary z-50 size-2.5 rotate-45 rounded-[2px]" })
       ]
     }
   ) });
 }
 
 // src/components/Navigation/Stages/Stages.tsx
-var import_jsx_runtime61 = require("react/jsx-runtime");
+var import_jsx_runtime62 = require("react/jsx-runtime");
 var StagesComponent = ({
   stages,
   isShowBtn,
@@ -5812,11 +5905,11 @@ var StagesComponent = ({
   canvasMode = "desktop",
   ...props
 }) => {
-  const [activeStage, setActiveStage] = (0, import_react34.useState)("");
-  const [isCompleted, setIsCompleted] = (0, import_react34.useState)(false);
-  const [activeChildStage, setActiveChildStage] = (0, import_react34.useState)(null);
-  const [activeRootStage, setActiveRootStage] = (0, import_react34.useState)(null);
-  (0, import_react34.useEffect)(() => {
+  const [activeStage, setActiveStage] = (0, import_react35.useState)("");
+  const [isCompleted, setIsCompleted] = (0, import_react35.useState)(false);
+  const [activeChildStage, setActiveChildStage] = (0, import_react35.useState)(null);
+  const [activeRootStage, setActiveRootStage] = (0, import_react35.useState)(null);
+  (0, import_react35.useEffect)(() => {
     if (currentStage) {
       setActiveStage(currentStage);
     } else {
@@ -5878,7 +5971,7 @@ var StagesComponent = ({
     }
     return { activeRoot: null, activeChild: null };
   };
-  (0, import_react34.useEffect)(() => {
+  (0, import_react35.useEffect)(() => {
     if (!currentStage || !Array.isArray(stages)) {
       setActiveRootStage(null);
       setActiveChildStage(null);
@@ -5891,7 +5984,7 @@ var StagesComponent = ({
   const isAllStagesCompleted = isCompleted;
   const disabled = isAllStagesCompleted || loading || saving;
   const primaryColor = props.primaryColor || "#12715b";
-  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className, style, children: /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className, style, children: /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
     "div",
     {
       className: `
@@ -5901,8 +5994,8 @@ var StagesComponent = ({
         ${isMobile ? "p-3 sm:p-4" : "p-2"}
       `,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "flex items-center flex-shrink-0 order-1 lg:order-1", children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("button", { className: "p-2 hover:bg-gray-100 rounded flex-shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("svg", { className: "w-4 h-4 text-gray-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) }) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "flex items-center flex-shrink-0 order-1 lg:order-1", children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("button", { className: "p-2 hover:bg-gray-100 rounded flex-shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("svg", { className: "w-4 h-4 text-gray-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
           "div",
           {
             className: `
@@ -5910,7 +6003,7 @@ var StagesComponent = ({
           flex-wrap gap-2 sm:gap-2 lg:gap-3 w-full lg:w-auto
           ${isMobile ? "order-2 mt-2 lg:mt-0" : "order-2"}
         `,
-            children: loading ? Array(6).fill(null).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+            children: loading ? Array(6).fill(null).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
               "button",
               {
                 className: `
@@ -5940,7 +6033,8 @@ var StagesComponent = ({
                 const isCurrentRootStage = activeRootStage?.[dataKey] === stage[dataKey];
                 const stageHasChildren = Array.isArray(stage?.children) && stage.children.length > 0;
                 const isCurrentChildStage = activeChildStage?.[dataKey] === activeStage;
-                const showOutcomeForCurrentStage = showAsActive && hasOutcome && stageHasChildren && isCurrentRootStage && isCurrentChildStage;
+                const isNotParentSelected = activeChildStage?.[dataKey] !== activeRootStage?.[dataKey];
+                const showOutcomeForCurrentStage = showAsActive && hasOutcome && stageHasChildren && isCurrentRootStage && isCurrentChildStage && isNotParentSelected;
                 let stageColor = `text-[${primaryColor}] border-2 border-[${primaryColor}]`;
                 let stageStyle = {
                   borderColor: primaryColor,
@@ -5965,8 +6059,8 @@ var StagesComponent = ({
                   }
                 }
                 const stageKey = typeof stage[dataKey] === "string" ? stage[dataKey] : JSON.stringify(stage[dataKey]);
-                return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_react34.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(Tooltip, { delayDuration: 500, disableHoverableContent: true, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+                return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_react35.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(Tooltip, { delayDuration: 500, disableHoverableContent: true, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
                     "button",
                     {
                       className: `
@@ -5984,21 +6078,21 @@ var StagesComponent = ({
                       children: stageLabel
                     }
                   ) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(TooltipContent, { side: "top", sideOffset: 6, hideArrow: true, children: stageLabel }),
-                  !isMobile && index < safeStages.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "hidden sm:flex sm:flex-shrink-0 w-3 h-px bg-gray-300 sm:w-4" })
+                  /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(TooltipContent, { side: "top", sideOffset: 6, hideArrow: true, children: stageLabel }),
+                  !isMobile && index < safeStages.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "hidden sm:flex sm:flex-shrink-0 w-3 h-px bg-gray-300 sm:w-4" })
                 ] }, stageKey) }, stageKey);
               });
             })()
           }
         ),
-        isShowBtn && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+        isShowBtn && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
           "div",
           {
             className: `
             flex items-center flex-shrink-0 w-full lg:w-auto
             ${isMobile ? "order-3 mt-3 lg:mt-0" : "order-3"}
           `,
-            children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
               "button",
               {
                 className: `
@@ -6021,33 +6115,33 @@ var StagesComponent = ({
 var Stages_default = StagesComponent;
 
 // src/components/Navigation/Spacer/Spacer.tsx
-var import_jsx_runtime62 = require("react/jsx-runtime");
+var import_jsx_runtime63 = require("react/jsx-runtime");
 var Spacer = ({ className, style }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: `${className}`, style });
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: `${className}`, style });
 };
 var Spacer_default = Spacer;
 
 // src/components/Navigation/Profile/Profile.tsx
-var import_jsx_runtime63 = require("react/jsx-runtime");
+var import_jsx_runtime64 = require("react/jsx-runtime");
 
 // src/components/Navigation/Notification/Notification.tsx
-var import_jsx_runtime64 = require("react/jsx-runtime");
+var import_jsx_runtime65 = require("react/jsx-runtime");
 
 // src/components/Navigation/Logo/Logo.tsx
-var import_jsx_runtime65 = require("react/jsx-runtime");
+var import_jsx_runtime66 = require("react/jsx-runtime");
 
 // src/components/Navigation/Navbar/Navbar.tsx
-var import_react35 = require("react");
-var import_lucide_react18 = require("lucide-react");
+var import_react36 = require("react");
+var import_lucide_react19 = require("lucide-react");
 var import_image2 = __toESM(require("next/image"));
 var import_link4 = __toESM(require("next/link"));
 var import_navigation3 = require("next/navigation");
 
 // src/components/ui/avatar.tsx
-var React13 = __toESM(require("react"));
+var React14 = __toESM(require("react"));
 var AvatarPrimitive = __toESM(require("@radix-ui/react-avatar"));
-var import_jsx_runtime66 = require("react/jsx-runtime");
-var Avatar = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+var import_jsx_runtime67 = require("react/jsx-runtime");
+var Avatar = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
   AvatarPrimitive.Root,
   {
     ref,
@@ -6059,7 +6153,7 @@ var Avatar = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ *
   }
 ));
 Avatar.displayName = AvatarPrimitive.Root.displayName;
-var AvatarImage = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+var AvatarImage = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
   AvatarPrimitive.Image,
   {
     ref,
@@ -6068,7 +6162,7 @@ var AvatarImage = React13.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 AvatarImage.displayName = AvatarPrimitive.Image.displayName;
-var AvatarFallback = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+var AvatarFallback = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
   AvatarPrimitive.Fallback,
   {
     ref,
@@ -6082,7 +6176,7 @@ var AvatarFallback = React13.forwardRef(({ className, ...props }, ref) => /* @__
 AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
 
 // src/components/Navigation/Navbar/Navbar.tsx
-var import_jsx_runtime67 = require("react/jsx-runtime");
+var import_jsx_runtime68 = require("react/jsx-runtime");
 function Navbar({
   style,
   badgeType,
@@ -6104,10 +6198,10 @@ function Navbar({
   primaryColor = "#2a55a3"
 }) {
   const router = (0, import_navigation3.useRouter)();
-  const [screenMode, setScreenMode] = (0, import_react35.useState)(
+  const [screenMode, setScreenMode] = (0, import_react36.useState)(
     canvasMode
   );
-  (0, import_react35.useEffect)(() => {
+  (0, import_react36.useEffect)(() => {
     const detectMode = () => {
       if (window.innerWidth < 640) setScreenMode("mobile");
       else if (window.innerWidth < 1024) setScreenMode("tablet");
@@ -6121,7 +6215,7 @@ function Navbar({
   const isMobile = mode === "mobile";
   const isTablet = mode === "tablet";
   const isDesktop = mode === "desktop";
-  const handleBuilderExit = (0, import_react35.useCallback)(
+  const handleBuilderExit = (0, import_react36.useCallback)(
     (e, url) => {
       if (isBuilder) {
         e.preventDefault();
@@ -6132,7 +6226,7 @@ function Navbar({
     },
     [isBuilder]
   );
-  const formattedMenu = (0, import_react35.useMemo)(() => {
+  const formattedMenu = (0, import_react36.useMemo)(() => {
     if (source === "state" && navList?.length) {
       return navList.map((i) => ({
         ...i,
@@ -6141,9 +6235,9 @@ function Navbar({
     }
     return list;
   }, [source, navList, list]);
-  const RenderSearchInput = () => /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "flex-1 px-2", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "relative w-full max-w-md border border-gray-300 rounded-md", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react18.Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 dark:text-white text-gray-400" }),
-    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+  const RenderSearchInput = () => /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "flex-1 px-2", children: /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "relative w-full max-w-md border border-gray-300 rounded-md", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_lucide_react19.Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 dark:text-white text-gray-400" }),
+    /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
       Input,
       {
         placeholder: "Search",
@@ -6159,23 +6253,23 @@ function Navbar({
       }
     )
   ] }) });
-  return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(import_jsx_runtime67.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(import_jsx_runtime68.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
       "nav",
       {
         className: "w-full min-h-[75px] border-b border-gray-200 dark:border-gray-800 dark:bg-gray-800 bg-white shadow-sm",
         style,
-        children: /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "mx-auto flex max-w-[90%] items-center justify-between px-4 py-4", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "mx-auto flex max-w-[90%] items-center justify-between px-4 py-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
             import_link4.default,
             {
               href: "/",
               onClick: (e) => handleBuilderExit(e, "/"),
               className: "flex items-center space-x-2",
-              children: imageUrl ? /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_image2.default, { src: imageUrl, alt: altText, width: 180, height: 40 }) : /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "font-semibold text-blue-700", children: "Logo" })
+              children: imageUrl ? /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_image2.default, { src: imageUrl, alt: altText, width: 180, height: 40 }) : /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { className: "font-semibold text-blue-700", children: "Logo" })
             }
           ),
-          isDesktop && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "hidden md:flex items-center space-x-6", children: formattedMenu.map((item) => /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+          isDesktop && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "hidden md:flex items-center space-x-6", children: formattedMenu.map((item) => /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
             import_link4.default,
             {
               href: item.url,
@@ -6185,23 +6279,23 @@ function Navbar({
             },
             item.id
           )) }),
-          /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex items-center space-x-3", children: [
-            (isDesktop || isTablet) && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(RenderSearchInput, {}),
-            /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "relative bg-gray-200 dark:bg-gray-700 rounded-md", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Button, { variant: "ghost", size: "icon", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react18.Bell, { className: "h-5 w-5 text-gray-700 dark:text-gray-300" }) }),
-              badgeType === "number" && !(hideBadgeWhenZero && badgeCount === 0) && Number(badgeCount) > 0 ? /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "absolute -top-1 -right-1 h-4 w-4 flex items-center justify-center bg-red-500 rounded-full text-white text-[10px]", children: badgeCount }) : !hideBadgeWhenZero && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "absolute -top-1 -right-1 h-2 w-2 bg-red-500 rounded-full" })
+          /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "flex items-center space-x-3", children: [
+            (isDesktop || isTablet) && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(RenderSearchInput, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "relative bg-gray-200 dark:bg-gray-700 rounded-md", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Button, { variant: "ghost", size: "icon", children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_lucide_react19.Bell, { className: "h-5 w-5 text-gray-700 dark:text-gray-300" }) }),
+              badgeType === "number" && !(hideBadgeWhenZero && badgeCount === 0) && Number(badgeCount) > 0 ? /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { className: "absolute -top-1 -right-1 h-4 w-4 flex items-center justify-center bg-red-500 rounded-full text-white text-[10px]", children: badgeCount }) : !hideBadgeWhenZero && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { className: "absolute -top-1 -right-1 h-2 w-2 bg-red-500 rounded-full" })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(DropdownMenu, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex items-center space-x-2 cursor-pointer", children: [
-                !isMobile && showName && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("h4", { className: "text-gray-900 dark:text-gray-300 text-sm", children: userName }),
-                /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Avatar, { className: "h-8 w-8", children: profileType === "avatar" ? /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(AvatarImage, { src: "/images/appbuilder/toolset/profile.svg", alt: "profile" }) : /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: `bg-[${primaryColor}] text-white h-full w-full rounded-full flex items-center justify-center text-xs`, style: { backgroundColor: primaryColor }, children: getInitials(userName) }) }),
-                (isMobile || isTablet) && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Button, { variant: "ghost", size: "icon", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react18.Menu, { className: "h-6 w-6" }) })
+            /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(DropdownMenu, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "flex items-center space-x-2 cursor-pointer", children: [
+                !isMobile && showName && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("h4", { className: "text-gray-900 dark:text-gray-300 text-sm", children: userName }),
+                /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Avatar, { className: "h-8 w-8", children: profileType === "avatar" ? /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(AvatarImage, { src: "/images/appbuilder/toolset/profile.svg", alt: "profile" }) : /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: `bg-[${primaryColor}] text-white h-full w-full rounded-full flex items-center justify-center text-xs`, style: { backgroundColor: primaryColor }, children: getInitials(userName) }) }),
+                (isMobile || isTablet) && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Button, { variant: "ghost", size: "icon", children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_lucide_react19.Menu, { className: "h-6 w-6" }) })
               ] }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(DropdownMenuContent, { align: "end", className: "bg-white dark:bg-gray-800", children: [
-                profileMenu.map((item) => /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(DropdownMenuItem, { children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_link4.default, { href: item.url, onClick: (e) => handleBuilderExit(e, item.url), children: item.header }) }, item.id)),
-                (isMobile || isTablet) && /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(import_jsx_runtime67.Fragment, { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(DropdownMenuSeparator, {}),
-                  formattedMenu.map((item) => /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(DropdownMenuItem, { children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_link4.default, { href: item.url, onClick: (e) => handleBuilderExit(e, item.url), children: item.header }) }, item.id))
+              /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(DropdownMenuContent, { align: "end", className: "bg-white dark:bg-gray-800", children: [
+                profileMenu.map((item) => /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(DropdownMenuItem, { children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_link4.default, { href: item.url, onClick: (e) => handleBuilderExit(e, item.url), children: item.header }) }, item.id)),
+                (isMobile || isTablet) && /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(import_jsx_runtime68.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(DropdownMenuSeparator, {}),
+                  formattedMenu.map((item) => /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(DropdownMenuItem, { children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_link4.default, { href: item.url, onClick: (e) => handleBuilderExit(e, item.url), children: item.header }) }, item.id))
                 ] })
               ] })
             ] })
@@ -6209,15 +6303,15 @@ function Navbar({
         ] })
       }
     ),
-    isMobile && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "p-3", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(RenderSearchInput, {}) })
+    isMobile && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "p-3", children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(RenderSearchInput, {}) })
   ] });
 }
 
 // src/components/Chart/BarChart.tsx
-var import_react36 = __toESM(require("react"));
+var import_react37 = __toESM(require("react"));
 var import_axios4 = __toESM(require("axios"));
 var import_recharts = require("recharts");
-var import_jsx_runtime68 = require("react/jsx-runtime");
+var import_jsx_runtime69 = require("react/jsx-runtime");
 var palette = [
   "#2563eb",
   "#1d4ed8",
@@ -6277,18 +6371,18 @@ var ChartComponent = ({
   ...props
 }) => {
   const useApi = source === "api" && !!apiUrl;
-  const [rawData, setRawData] = (0, import_react36.useState)([]);
-  const [rawMeta, setRawMeta] = (0, import_react36.useState)(null);
-  const [localLoading, setLocalLoading] = (0, import_react36.useState)(false);
-  const [currentPage, setCurrentPage] = (0, import_react36.useState)(1);
+  const [rawData, setRawData] = (0, import_react37.useState)([]);
+  const [rawMeta, setRawMeta] = (0, import_react37.useState)(null);
+  const [localLoading, setLocalLoading] = (0, import_react37.useState)(false);
+  const [currentPage, setCurrentPage] = (0, import_react37.useState)(1);
   const effectiveData = useApi ? rawData : props.data || [];
   const effectiveLoading = useApi ? localLoading : externalLoading;
-  (0, import_react36.useEffect)(() => {
+  (0, import_react37.useEffect)(() => {
     if (useApi) {
       setCurrentPage(1);
     }
   }, [useApi]);
-  const fetchData = (0, import_react36.useCallback)(async (page) => {
+  const fetchData = (0, import_react37.useCallback)(async (page) => {
     if (!apiUrl) return;
     const cancelled = false;
     try {
@@ -6325,7 +6419,7 @@ var ChartComponent = ({
       if (!cancelled) setLocalLoading(false);
     }
   }, [apiUrl, limit]);
-  (0, import_react36.useEffect)(() => {
+  (0, import_react37.useEffect)(() => {
     if (!useApi) return;
     fetchData(currentPage);
   }, [useApi, currentPage, fetchData]);
@@ -6333,7 +6427,7 @@ var ChartComponent = ({
     if (rawMeta && (newPage < 1 || newPage > rawMeta.pages)) return;
     setCurrentPage(newPage);
   };
-  const data = (0, import_react36.useMemo)(() => {
+  const data = (0, import_react37.useMemo)(() => {
     if (!Array.isArray(effectiveData) || effectiveData.length === 0 || !dataKey || !dataLabel) {
       return [];
     }
@@ -6345,10 +6439,10 @@ var ChartComponent = ({
   }, [effectiveData, dataKey, dataLabel]);
   const chartType = props.chartType || "bar";
   const forceMobile = canvasMode === "mobile" || canvasMode === "tablet";
-  const renderLegends = (0, import_react36.useMemo)(() => {
+  const renderLegends = (0, import_react37.useMemo)(() => {
     if (!showLegends || !dataKey || !dataLabel) return null;
     const isLegendRight2 = !forceMobile && legendPosition === "right";
-    return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
       "div",
       {
         className: isLegendRight2 ? "flex flex-col gap-2 w-full min-w-0 justify-start overflow-y-auto max-h-[260px]" : "flex flex-wrap justify-center gap-2 mt-4 w-full max-w-4xl",
@@ -6361,7 +6455,7 @@ var ChartComponent = ({
             [dataLabel]: d[dataLabel],
             [dataKey]: value
           };
-          return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
+          return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(
             "div",
             {
               role: onLegendClick ? "button" : void 0,
@@ -6370,16 +6464,16 @@ var ChartComponent = ({
               onKeyDown: onLegendClick ? (e) => e.key === "Enter" && onLegendClick(payload) : void 0,
               className: `flex items-center space-x-2 rounded-lg border border-gray-200/50 px-3 py-1.5 min-w-[180px] w-[180px] bg-white/80 backdrop-blur-sm shadow-sm hover:shadow-md transition-all ${onLegendClick ? "cursor-pointer" : ""}`,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
                   "span",
                   {
                     className: "inline-block w-[12px] h-[12px] rounded-full shrink-0 border-2 border-white/50",
                     style: { backgroundColor: d.fill }
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "min-w-0 flex-1", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { className: "text-gray-900 text-[11px] md:text-[13px] font-semibold block truncate leading-tight capitalize", children: d[dataLabel] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { className: "text-xs text-gray-600 font-medium", children: displayValue })
+                /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "min-w-0 flex-1", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { className: "text-gray-900 text-[11px] md:text-[13px] font-semibold block truncate leading-tight capitalize", children: d[dataLabel] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { className: "text-xs text-gray-600 font-medium", children: displayValue })
                 ] })
               ]
             },
@@ -6390,27 +6484,27 @@ var ChartComponent = ({
     );
   }, [data, dataLabel, dataKey, showLegends, onLegendClick, legendPosition, forceMobile]);
   if (effectiveLoading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(
       "div",
       {
         className: `relative flex flex-col w-full h-[300px] md:h-[400px] bg-gradient-to-br from-gray-50 to-gray-100 rounded-xl p-6 ${className}`,
         style,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "mb-6 flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "inline-flex items-center space-x-2 bg-white/90 px-6 py-2.5 rounded-xl backdrop-blur-sm border border-gray-200 shadow-lg", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "w-5 h-5 border-2 border-gray-400 border-t-blue-500 rounded-full animate-spin" }),
-            /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { className: "text-sm font-medium text-gray-700 bg-gradient-to-r from-gray-300 bg-clip-text animate-pulse", children: "Loading chart data..." })
+          /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "mb-6 flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "inline-flex items-center space-x-2 bg-white/90 px-6 py-2.5 rounded-xl backdrop-blur-sm border border-gray-200 shadow-lg", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "w-5 h-5 border-2 border-gray-400 border-t-blue-500 rounded-full animate-spin" }),
+            /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { className: "text-sm font-medium text-gray-700 bg-gradient-to-r from-gray-300 bg-clip-text animate-pulse", children: "Loading chart data..." })
           ] }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "absolute inset-0 bg-gradient-to-r from-transparent via-white/60 to-transparent animate-shimmer rounded-xl" }),
-          /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "flex-1 relative w-full h-full min-h-[240px] md:min-h-[320px] bg-white/80 rounded-lg border border-gray-200/50 shadow-sm", children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "absolute bottom-0 left-4 right-4 flex gap-2 h-[200px] md:h-[280px] justify-center items-end", children: [...Array(20)].map((_, idx) => {
+          /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "absolute inset-0 bg-gradient-to-r from-transparent via-white/60 to-transparent animate-shimmer rounded-xl" }),
+          /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "flex-1 relative w-full h-full min-h-[240px] md:min-h-[320px] bg-white/80 rounded-lg border border-gray-200/50 shadow-sm", children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "absolute bottom-0 left-4 right-4 flex gap-2 h-[200px] md:h-[280px] justify-center items-end", children: [...Array(20)].map((_, idx) => {
             const randomHeight = `${Math.floor(Math.random() * 76) + 20}%`;
-            return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
+            return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(
               "div",
               {
                 className: `relative w-10 md:w-12 flex-1 max-w-[48px] rounded-t-lg bg-gradient-to-t from-gray-100 via-gray-200 to-transparent shadow-lg border border-gray-200/50 animate-slide-up stagger-${idx} overflow-hidden`,
                 style: { height: randomHeight, animationDelay: `${idx * 0.08}s` },
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "absolute inset-0 bg-gradient-to-r from-white/40 via-transparent to-white/40 animate-shimmer-bar" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "absolute bottom-1 left-1/2 w-4 h-1 rounded-full transform -translate-x-1/2 blur-sm" })
+                  /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "absolute inset-0 bg-gradient-to-r from-white/40 via-transparent to-white/40 animate-shimmer-bar" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "absolute bottom-1 left-1/2 w-4 h-1 rounded-full transform -translate-x-1/2 blur-sm" })
                 ]
               },
               `bar-${idx}`
@@ -6421,74 +6515,74 @@ var ChartComponent = ({
     );
   }
   if (data.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
       "div",
       {
         className: `relative flex flex-col items-center justify-center w-full h-[300px] md:h-[400px] bg-gradient-to-br from-gray-50 to-gray-100 rounded-xl p-6 ${className}`,
         style,
-        children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "text-center", children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "inline-flex items-center space-x-2 bg-white/80 px-6 py-3 rounded-xl backdrop-blur-sm border border-gray-200 shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { className: "text-sm font-medium text-gray-600", children: "No data" }) }) })
+        children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "text-center", children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "inline-flex items-center space-x-2 bg-white/80 px-6 py-3 rounded-xl backdrop-blur-sm border border-gray-200 shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { className: "text-sm font-medium text-gray-600", children: "No data" }) }) })
       }
     );
   }
   const isLegendRight = !forceMobile && legendPosition === "right";
-  return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(
     "div",
     {
       className: `relative flex ${isLegendRight ? "flex-row items-stretch gap-4" : "flex-col items-center"} ${className}`,
       style,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(
           "div",
           {
             className: `relative flex items-center justify-center ${isLegendRight ? "flex-[2] min-w-0 max-w-[70%] h-[450px]" : "w-full md:w-[75%] h-[450px] mb-2"}`,
             children: [
-              isPaginationEnabled && rawMeta && /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "flex items-center justify-between mb-4 px-2", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "flex items-center space-x-2 sm:hidden w-full justify-center", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+              isPaginationEnabled && rawMeta && /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "flex items-center justify-between mb-4 px-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "flex items-center space-x-2 sm:hidden w-full justify-center", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
                     "button",
                     {
                       onClick: () => handlePageChange(currentPage - 1),
                       disabled: currentPage === 1 || localLoading,
                       className: "flex-1 px-3 py-2 text-xs font-medium rounded-lg border bg-white shadow-sm hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200 flex items-center justify-center space-x-1 min-w-0",
-                      children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { children: "\u2190 Prev" })
+                      children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { children: "\u2190 Prev" })
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { className: "px-2 py-2 text-xs font-semibold text-gray-700 min-w-[36px] text-center flex-shrink-0", children: currentPage }),
-                  /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { className: "px-2 py-2 text-xs font-semibold text-gray-700 min-w-[36px] text-center flex-shrink-0", children: currentPage }),
+                  /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
                     "button",
                     {
                       onClick: () => handlePageChange(currentPage + 1),
                       disabled: currentPage >= rawMeta.pages || localLoading,
                       className: "flex-1 px-3 py-2 text-xs font-medium rounded-lg border bg-white shadow-sm hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200 flex items-center justify-center space-x-1 min-w-0",
-                      children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { children: "Next \u2192" })
+                      children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { children: "Next \u2192" })
                     }
                   )
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "hidden sm:flex items-center space-x-2", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "hidden sm:flex items-center space-x-2", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
                     "button",
                     {
                       onClick: () => handlePageChange(currentPage - 1),
                       disabled: currentPage === 1 || localLoading,
                       className: "px-3 py-1.5 text-sm font-medium rounded-lg border bg-white shadow-sm hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200 flex items-center space-x-1",
-                      children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { children: "\u2190 Prev" })
+                      children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { children: "\u2190 Prev" })
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { className: "px-3 py-1 text-sm font-medium text-gray-700", children: currentPage }),
-                  /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { className: "px-3 py-1 text-sm font-medium text-gray-700", children: currentPage }),
+                  /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
                     "button",
                     {
                       onClick: () => handlePageChange(currentPage + 1),
                       disabled: currentPage >= rawMeta.pages || localLoading,
                       className: "px-3 py-1.5 text-sm font-medium rounded-lg border bg-white shadow-sm hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200 flex items-center space-x-1",
-                      children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { children: "Next \u2192" })
+                      children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { children: "Next \u2192" })
                     }
                   )
                 ] })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_recharts.ResponsiveContainer, { width: "100%", height: "100%", children: chartType === "bar" ? /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(import_recharts.BarChart, { data, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_recharts.CartesianGrid, { strokeDasharray: "3 3" }),
-                /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(import_recharts.ResponsiveContainer, { width: "100%", height: "100%", children: chartType === "bar" ? /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(import_recharts.BarChart, { data, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(import_recharts.CartesianGrid, { strokeDasharray: "3 3" }),
+                /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
                   import_recharts.XAxis,
                   {
                     dataKey: dataLabel,
@@ -6506,7 +6600,7 @@ var ChartComponent = ({
                     className: "hidden sm:block"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
                   import_recharts.YAxis,
                   {
                     tickFormatter: (value) => `${(value / 1e3).toFixed(0)}k`,
@@ -6519,8 +6613,8 @@ var ChartComponent = ({
                     width: 60
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_recharts.Tooltip, { formatter: (value) => value != null ? [`${value}`, "Count"] : ["", "Count"] }),
-                /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(import_recharts.Tooltip, { formatter: (value) => value != null ? [`${value}`, "Count"] : ["", "Count"] }),
+                /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
                   import_recharts.Bar,
                   {
                     dataKey,
@@ -6528,13 +6622,13 @@ var ChartComponent = ({
                     isAnimationActive: false
                   }
                 )
-              ] }) : /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(import_recharts.AreaChart, { data, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("linearGradient", { id: "colorCount", x1: "0", y1: "0", x2: "0", y2: "1", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("stop", { offset: "5%", stopColor: "#00695C", stopOpacity: 0.8 }),
-                  /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("stop", { offset: "95%", stopColor: "#00695C", stopOpacity: 0 })
+              ] }) : /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(import_recharts.AreaChart, { data, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("linearGradient", { id: "colorCount", x1: "0", y1: "0", x2: "0", y2: "1", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("stop", { offset: "5%", stopColor: "#00695C", stopOpacity: 0.8 }),
+                  /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("stop", { offset: "95%", stopColor: "#00695C", stopOpacity: 0 })
                 ] }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_recharts.CartesianGrid, { strokeDasharray: "3 3" }),
-                /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(import_recharts.CartesianGrid, { strokeDasharray: "3 3" }),
+                /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
                   import_recharts.XAxis,
                   {
                     dataKey: dataLabel,
@@ -6548,7 +6642,7 @@ var ChartComponent = ({
                     }
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
                   import_recharts.YAxis,
                   {
                     tickFormatter: (value) => `${(value / 1e3).toFixed(0)}k`,
@@ -6561,8 +6655,8 @@ var ChartComponent = ({
                     width: 60
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_recharts.Tooltip, { formatter: (value) => value != null ? `${value}k` : "" }),
-                /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(import_recharts.Tooltip, { formatter: (value) => value != null ? `${value}k` : "" }),
+                /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
                   import_recharts.Area,
                   {
                     type: "monotone",
@@ -6577,18 +6671,18 @@ var ChartComponent = ({
             ]
           }
         ),
-        showLegends && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: isLegendRight ? "flex flex-col w-[30%] min-w-[180px] justify-center" : "w-full", children: renderLegends })
+        showLegends && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: isLegendRight ? "flex flex-col w-[30%] min-w-[180px] justify-center" : "w-full", children: renderLegends })
       ]
     }
   );
 };
-var BarChart_default = import_react36.default.memo(ChartComponent);
+var BarChart_default = import_react37.default.memo(ChartComponent);
 
 // src/components/Chart/PieChart.tsx
-var import_react37 = __toESM(require("react"));
+var import_react38 = __toESM(require("react"));
 var import_axios5 = __toESM(require("axios"));
 var import_recharts2 = require("recharts");
-var import_jsx_runtime69 = require("react/jsx-runtime");
+var import_jsx_runtime70 = require("react/jsx-runtime");
 var getRandomColor = () => {
   const palette2 = [
     "#2563eb",
@@ -6669,11 +6763,11 @@ var DonutChart = ({
   const showLegends = props.showLegends ?? true;
   const canvasMode = props.canvasMode;
   const useApi = source === "api" && !!apiUrl;
-  const [rawData, setRawData] = (0, import_react37.useState)([]);
-  const [localLoading, setLocalLoading] = (0, import_react37.useState)(false);
+  const [rawData, setRawData] = (0, import_react38.useState)([]);
+  const [localLoading, setLocalLoading] = (0, import_react38.useState)(false);
   const effectiveData = useApi ? rawData : props.data || [];
   const effectiveLoading = useApi ? localLoading : externalLoading;
-  (0, import_react37.useEffect)(() => {
+  (0, import_react38.useEffect)(() => {
     if (!useApi) return;
     let cancelled = false;
     const fetchData = async () => {
@@ -6709,7 +6803,7 @@ var DonutChart = ({
       cancelled = true;
     };
   }, [useApi, apiUrl]);
-  const data = (0, import_react37.useMemo)(() => {
+  const data = (0, import_react38.useMemo)(() => {
     if (!Array.isArray(effectiveData) || effectiveData.length === 0) return [];
     return effectiveData.map((item) => ({
       ...item,
@@ -6718,11 +6812,11 @@ var DonutChart = ({
       [dataLabel]: item[dataLabel] ?? "Unknown"
     }));
   }, [effectiveData, dataKey, dataLabel]);
-  const total = (0, import_react37.useMemo)(
+  const total = (0, import_react38.useMemo)(
     () => data.reduce((sum, d) => sum + (d[dataKey] ?? 0), 0),
     [data, dataKey]
   );
-  const formattedTotal = (0, import_react37.useMemo)(() => {
+  const formattedTotal = (0, import_react38.useMemo)(() => {
     if (total >= 1e6) {
       return `${(total / 1e6).toFixed(1)}M`;
     }
@@ -6731,7 +6825,7 @@ var DonutChart = ({
     }
     return total.toString();
   }, [total]);
-  const chartData = (0, import_react37.useMemo)(() => {
+  const chartData = (0, import_react38.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);
@@ -6754,15 +6848,15 @@ var DonutChart = ({
     if (chartData.length <= 6) return { inner: 85, outer: 150 };
     return { inner: 70, outer: 130 };
   };
-  const [mounted, setMounted] = (0, import_react37.useState)(false);
-  (0, import_react37.useEffect)(() => {
+  const [mounted, setMounted] = (0, import_react38.useState)(false);
+  (0, import_react38.useEffect)(() => {
     const timeout = setTimeout(() => setMounted(true), 100);
     return () => clearTimeout(timeout);
   }, []);
-  const renderLegends = (0, import_react37.useMemo)(() => {
+  const renderLegends = (0, import_react38.useMemo)(() => {
     if (!showLegends) return null;
     const isLegendRight2 = !forceMobile && legendPosition === "right";
-    return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
       "div",
       {
         className: isLegendRight2 ? "flex flex-col gap-2 w-full min-w-0 justify-start overflow-y-auto max-h-[260px]" : "flex flex-wrap justify-center gap-2 mt-4 w-full max-w-4xl",
@@ -6777,7 +6871,7 @@ var DonutChart = ({
             [dataLabel]: d[dataLabel],
             [dataKey]: actualValue
           };
-          return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(
+          return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(
             "div",
             {
               role: onLegendClick ? "button" : void 0,
@@ -6786,22 +6880,22 @@ var DonutChart = ({
               onKeyDown: onLegendClick ? (e) => e.key === "Enter" && onLegendClick(payload) : void 0,
               className: `flex items-center space-x-2 rounded-lg border border-gray-200/50 px-3 py-1.5 w-[48%] sm:w-[32%] md:w-auto bg-white/80 backdrop-blur-sm shadow-sm hover:shadow-md transition-all ${onLegendClick ? "cursor-pointer" : ""}`,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
                   "span",
                   {
                     className: "inline-block w-[12px] h-[12px] rounded-full shrink-0 border-2 border-white/50",
                     style: { backgroundColor: d.color }
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "min-w-0 flex-1", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { className: "text-gray-900 text-[11px] md:text-[13px] font-semibold block truncate leading-tight", children: d[dataLabel] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "flex items-center gap-1 text-xs text-gray-600 font-medium", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { children: displayValue }),
-                    /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("span", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: "min-w-0 flex-1", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { className: "text-gray-900 text-[11px] md:text-[13px] font-semibold block truncate leading-tight", children: d[dataLabel] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: "flex items-center gap-1 text-xs text-gray-600 font-medium", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { children: displayValue }),
+                    /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("span", { children: [
                       (actualValue / total * 100).toFixed(1),
                       "%"
                     ] }),
-                    d.isBoosted && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { className: "text-[9px] px-1 py-0.5 bg-blue-100 text-blue-700 rounded-full", children: "min" })
+                    d.isBoosted && /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { className: "text-[9px] px-1 py-0.5 bg-blue-100 text-blue-700 rounded-full", children: "min" })
                   ] })
                 ] })
               ]
@@ -6814,26 +6908,26 @@ var DonutChart = ({
   }, [chartData, data, dataLabel, dataKey, total, showLegends, onLegendClick, legendPosition, forceMobile]);
   if (!mounted) return null;
   if (effectiveLoading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(
       "div",
       {
         className: `relative flex flex-col items-center w-full h-[300px] md:h-[400px] bg-gradient-to-br from-gray-50 to-gray-100 rounded-xl p-6 ${className}`,
         style,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "absolute inset-0 bg-gradient-to-r from-transparent via-white/60 to-transparent animate-shimmer rounded-xl" }),
-          /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "mt-6 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "inline-flex items-center space-x-2 bg-white/80 px-6 py-2 rounded-full backdrop-blur-sm border border-gray-200 shadow-lg", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "w-5 h-5 border-2 border-gray-300 border-t-blue-400 rounded-full animate-spin" }),
-            /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { className: "text-sm font-medium text-gray-600 bg-gradient-to-r from-gray-300 bg-clip-text animate-pulse", children: "Loading chart data..." })
+          /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: "absolute inset-0 bg-gradient-to-r from-transparent via-white/60 to-transparent animate-shimmer rounded-xl" }),
+          /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: "mt-6 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: "inline-flex items-center space-x-2 bg-white/80 px-6 py-2 rounded-full backdrop-blur-sm border border-gray-200 shadow-lg", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: "w-5 h-5 border-2 border-gray-300 border-t-blue-400 rounded-full animate-spin" }),
+            /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { className: "text-sm font-medium text-gray-600 bg-gradient-to-r from-gray-300 bg-clip-text animate-pulse", children: "Loading chart data..." })
           ] }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "flex flex-wrap justify-center gap-3 mt-8 w-full max-w-4xl", children: [...Array(18)].map((_, idx) => /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: "flex flex-wrap justify-center gap-3 mt-8 w-full max-w-4xl", children: [...Array(18)].map((_, idx) => /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(
             "div",
             {
               className: `h-10 w-[48%] sm:w-[32%] md:w-32 rounded-xl bg-gradient-to-r from-gray-200 via-gray-300/50 to-gray-200 p-3 flex items-center space-x-3 animate-slide-up stagger-${idx} shadow-sm border border-gray-200/50`,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "w-4 h-4 rounded-full bg-gradient-to-r from-blue-300 to-purple-300 animate-pulse" }),
-                /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "flex-1 space-y-1", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "h-3 w-20 bg-gray-300 rounded animate-pulse" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "h-2.5 w-16 bg-gray-200/60 rounded animate-pulse-delayed" })
+                /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: "w-4 h-4 rounded-full bg-gradient-to-r from-blue-300 to-purple-300 animate-pulse" }),
+                /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: "flex-1 space-y-1", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: "h-3 w-20 bg-gray-300 rounded animate-pulse" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: "h-2.5 w-16 bg-gray-200/60 rounded animate-pulse-delayed" })
                 ] })
               ]
             },
@@ -6844,12 +6938,12 @@ var DonutChart = ({
     );
   }
   if (data.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
       "div",
       {
         className: `relative flex flex-col items-center justify-center w-full h-[300px] md:h-[400px] bg-gradient-to-br from-gray-50 to-gray-100 rounded-xl p-6 ${className}`,
         style,
-        children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "text-center", children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "inline-flex items-center space-x-2 bg-white/80 px-6 py-3 rounded-xl backdrop-blur-sm border border-gray-200 shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { className: "text-sm font-medium text-gray-600", children: "No data" }) }) })
+        children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: "text-center", children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: "inline-flex items-center space-x-2 bg-white/80 px-6 py-3 rounded-xl backdrop-blur-sm border border-gray-200 shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { className: "text-sm font-medium text-gray-600", children: "No data" }) }) })
       }
     );
   }
@@ -6857,19 +6951,19 @@ var DonutChart = ({
   const innerRadius = inner;
   const outerRadius = outer;
   const isLegendRight = !forceMobile && legendPosition === "right";
-  return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(
     "div",
     {
       className: `relative flex ${isLegendRight ? "flex-row items-stretch gap-4" : "flex-col items-center"} ${className}`,
       style,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(
           "div",
           {
             className: `relative flex items-center justify-center ${isLegendRight ? "flex-[2] min-w-0 max-w-[70%]" : "w-full md:w-[75%]"} h-[280px] md:h-[380px] ${isLegendRight ? "" : "mb-2"}`,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(import_recharts2.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(import_recharts2.PieChart, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_recharts2.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(import_recharts2.PieChart, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
                   import_recharts2.Pie,
                   {
                     data: chartData,
@@ -6882,7 +6976,7 @@ var DonutChart = ({
                     isAnimationActive: true,
                     animationDuration: 800,
                     minAngle: 3,
-                    children: chartData.map((entry, index) => /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+                    children: chartData.map((entry, index) => /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
                       import_recharts2.Cell,
                       {
                         fill: entry.color,
@@ -6893,7 +6987,7 @@ var DonutChart = ({
                     ))
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
                   import_recharts2.Tooltip,
                   {
                     formatter: (value, name, payload) => {
@@ -6916,25 +7010,25 @@ var DonutChart = ({
                   }
                 )
               ] }) }),
-              total > 0 && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: `absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-center pointer-events-none ${forceMobile ? "text-xl px-2" : "text-3xl px-4"} font-bold bg-white/90 backdrop-blur-sm rounded-full py-1 shadow-lg`, children: /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "text-[#1f2937] leading-tight", children: [
+              total > 0 && /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: `absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-center pointer-events-none ${forceMobile ? "text-xl px-2" : "text-3xl px-4"} font-bold bg-white/90 backdrop-blur-sm rounded-full py-1 shadow-lg`, children: /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: "text-[#1f2937] leading-tight", children: [
                 formattedTotal,
-                /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { className: "text-sm md:text-base font-normal text-gray-600 block md:inline-block md:ml-1", children: "total" })
+                /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { className: "text-sm md:text-base font-normal text-gray-600 block md:inline-block md:ml-1", children: "total" })
               ] }) })
             ]
           }
         ),
-        showLegends && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: isLegendRight ? "flex flex-col w-[30%] min-w-[180px] justify-center" : "w-full", children: renderLegends })
+        showLegends && /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: isLegendRight ? "flex flex-col w-[30%] min-w-[180px] justify-center" : "w-full", children: renderLegends })
       ]
     }
   );
 };
-var PieChart_default = import_react37.default.memo(DonutChart);
+var PieChart_default = import_react38.default.memo(DonutChart);
 
 // src/components/Blocks/EmailComposer.tsx
-var import_jsx_runtime70 = require("react/jsx-runtime");
+var import_jsx_runtime71 = require("react/jsx-runtime");
 function EmailComposer({ className, style, to, setTo, showCc, setShowCc, showBcc, setShowBcc, cc, setCc, bcc, setBcc, subject, setSubject, body, setBody }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className, style, children: /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: "border rounded-md shadow bg-[#fff] p-4 mx-auto z-[50] relative", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: "mb-3", children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className, style, children: /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "border rounded-md shadow bg-[#fff] p-4 mx-auto z-[50] relative", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "mb-3", children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
       "input",
       {
         type: "email",
@@ -6943,8 +7037,8 @@ function EmailComposer({ className, style, to, setTo, showCc, setShowCc, showBcc
         required: true
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: "mb-3", children: /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "mb-3", children: /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
         "input",
         {
           type: "email",
@@ -6955,7 +7049,7 @@ function EmailComposer({ className, style, to, setTo, showCc, setShowCc, showBcc
           required: true
         }
       ),
-      !showCc && /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+      !showCc && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
         "button",
         {
           onClick: () => setShowCc?.(true),
@@ -6963,7 +7057,7 @@ function EmailComposer({ className, style, to, setTo, showCc, setShowCc, showBcc
           children: "Cc"
         }
       ),
-      !showBcc && /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+      !showBcc && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
         "button",
         {
           onClick: () => setShowBcc?.(true),
@@ -6972,7 +7066,7 @@ function EmailComposer({ className, style, to, setTo, showCc, setShowCc, showBcc
         }
       )
     ] }) }),
-    showCc && /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: "mb-3", children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+    showCc && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "mb-3", children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
       "input",
       {
         type: "text",
@@ -6982,7 +7076,7 @@ function EmailComposer({ className, style, to, setTo, showCc, setShowCc, showBcc
         className: "w-full flex-1 border-2 rounded-md h-[40px] px-3 focus:outline-none border-[#E9E9E9] text-[#383838]"
       }
     ) }),
-    showBcc && /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: "mb-3", children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+    showBcc && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "mb-3", children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
       "input",
       {
         type: "text",
@@ -6992,7 +7086,7 @@ function EmailComposer({ className, style, to, setTo, showCc, setShowCc, showBcc
         className: "w-full flex-1 border-2 rounded-md h-[40px] px-3 focus:outline-none border-[#E9E9E9] text-[#383838]"
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: "mb-3", children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "mb-3", children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
       "input",
       {
         type: "text",
@@ -7002,11 +7096,11 @@ function EmailComposer({ className, style, to, setTo, showCc, setShowCc, showBcc
         className: "w-full flex-1 border-2 rounded-md h-[40px] px-3 focus:outline-none border-[#E9E9E9] text-[#383838]"
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: "mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(MyEditor, { value: body, onChange: setBody }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: "flex justify-end gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("button", { className: "px-4 py-2 rounded-md text-gray-600 hover:bg-gray-100", children: "Discard" }),
-      /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("button", { className: "px-4 py-2 rounded-md border text-[#12715B] border-[#12715B]", children: "Reset" }),
-      /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("button", { className: "px-4 py-2 rounded-md bg-[#12715B] text-white", children: "Send" })
+    /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(MyEditor, { value: body, onChange: setBody }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "flex justify-end gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("button", { className: "px-4 py-2 rounded-md text-gray-600 hover:bg-gray-100", children: "Discard" }),
+      /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("button", { className: "px-4 py-2 rounded-md border text-[#12715B] border-[#12715B]", children: "Reset" }),
+      /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("button", { className: "px-4 py-2 rounded-md bg-[#12715B] text-white", children: "Send" })
     ] })
   ] }) });
 }
@@ -7014,10 +7108,10 @@ function EmailComposer({ className, style, to, setTo, showCc, setShowCc, showBcc
 // src/components/ui/sonner.tsx
 var import_next_themes = require("next-themes");
 var import_sonner2 = require("sonner");
-var import_jsx_runtime71 = require("react/jsx-runtime");
+var import_jsx_runtime72 = require("react/jsx-runtime");
 var Toaster = ({ ...props }) => {
   const { theme = "system" } = (0, import_next_themes.useTheme)();
-  return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
     import_sonner2.Toaster,
     {
       theme,
@@ -7035,6 +7129,7 @@ var Toaster = ({ ...props }) => {
 0 && (module.exports = {
   Accordion,
   AccordionGroup,
+  Audio,
   BarChart,
   Breadcrumb,
   Button,