@algorithm-shift/design-system 1.2.59 → 1.2.61

package/dist/index.js

@@ -65,6 +65,8 @@ __export(src_exports, {
   Spacer: () => Spacer_default,
   Stages: () => Stages_default,
   SwitchToggle: () => SwitchToggle_default,
+  TabGroup: () => TabGroupComponent,
+  TabList: () => TabList,
   Table: () => Table_default,
   Tabs: () => Tabs_default,
   Text: () => TextInput_default,
@@ -79,15 +81,30 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 
 // src/components/Layout/Modal.tsx
+var import_react = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
 var Modal = ({
   children,
-  onClose,
-  label,
   className,
-  style
+  style,
+  showModal,
+  onModalClose,
+  label
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className, style, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "min-h-80", children: [
+  (0, import_react.useEffect)(() => {
+    if (showModal) {
+      const wrapper = document.getElementById("canvas-wrapper") || document.getElementById("canvas-preview");
+      if (!wrapper) return;
+      const overlay = document.createElement("div");
+      overlay.className = "absolute flex inset-0 bg-black opacity-50 z-10 w-full h-full";
+      wrapper.appendChild(overlay);
+      return () => {
+        if (wrapper.contains(overlay)) wrapper.removeChild(overlay);
+      };
+    }
+  }, [showModal]);
+  if (!showModal) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `${className} top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 shadow-lg rounded-md z-90 bg-[#fff] `, style: { position: "fixed", ...style }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "min-h-80", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex justify-between items-center p-4 border-b border-gray-300 bg-gray-100", children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h4", { className: "text-[#000]", children: label || "Modal Title" }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -95,7 +112,7 @@ var Modal = ({
         {
           className: "cursor-pointer text-[#000]",
           role: "presentation",
-          onClick: onClose,
+          onClick: () => onModalClose && onModalClose(false),
           children: "X"
         }
       )
@@ -142,7 +159,7 @@ var Container = ({
 var Container_default = Container;
 
 // src/components/Layout/Accordion.tsx
-var import_react = require("react");
+var import_react2 = require("react");
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var Accordion = ({
   children,
@@ -150,7 +167,7 @@ var Accordion = ({
   style,
   className
 }) => {
-  const [isOpen, setIsOpen] = (0, import_react.useState)(false);
+  const [isOpen, setIsOpen] = (0, import_react2.useState)(false);
   const onToggleCollapse = () => {
     setIsOpen((prev) => !prev);
   };
@@ -195,6 +212,55 @@ var AccordionGroup = ({ children, style, className }) => {
 };
 var AccordionGroup_default = AccordionGroup;
 
+// src/components/Layout/TabList.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function TabList({
+  children,
+  style,
+  className,
+  activeTab,
+  tabId
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    "div",
+    {
+      className: `min-h-30 ${className} ${activeTab === tabId ? "visible" : "hidden"}`,
+      style,
+      children
+    }
+  );
+}
+
+// src/components/Layout/TabGroup.tsx
+var import_react3 = require("react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function TabGroupComponent({
+  children,
+  style,
+  className,
+  list,
+  activeTab,
+  onTabChange
+}) {
+  const formatedList = (0, import_react3.useMemo)(
+    () => Array.isArray(list) ? [...list].sort((a, b) => (a.orderNumber ?? 0) - (b.orderNumber ?? 0)) : [],
+    [list]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className, style, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex border-b border-gray-200 gap-1", children: formatedList.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      "button",
+      {
+        "data-id": tab.tabId,
+        className: `px-4 py-2 text-sm border-b-2 font-medium transition-colors cursor-pointer ${activeTab === tab.tabId ? " bg-blue-500 text-white" : "bg-gray-100 "}`,
+        onClick: () => onTabChange && onTabChange(tab.tabId),
+        children: tab.name || "Tab List"
+      },
+      tab.tabId
+    )) }),
+    children
+  ] });
+}
+
 // src/components/ui/button.tsx
 var import_react_slot = require("@radix-ui/react-slot");
 var import_class_variance_authority = require("class-variance-authority");
@@ -217,7 +283,7 @@ function getInitials(name) {
 }
 
 // src/components/ui/button.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var buttonVariants = (0, import_class_variance_authority.cva)(
   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
   {
@@ -251,7 +317,7 @@ function Button({
   ...props
 }) {
   const Comp = asChild ? import_react_slot.Slot : "button";
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     Comp,
     {
       "data-slot": "button",
@@ -262,20 +328,23 @@ function Button({
 }
 
 // src/components/Basic/Button/Button.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var ButtonWrapper = ({
   className,
   style,
   textContent = "Button",
+  loadingText = "Loading...",
+  loading = false,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     Button,
     {
       ...props,
       className,
       style,
-      children: textContent
+      disabled: props.disabled || loading,
+      children: loading ? loadingText : textContent
     }
   );
 };
@@ -285,7 +354,7 @@ var Button_default = ButtonWrapper;
 var image_placeholder_default = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAD25JREFUeJzt3XfwHGUdx/H3LyEJoQihJVITIEEQBUQHIQEBQaRMwApIyS8UQQREBQUZRaUXUQwwYoShSlWqQ5ci1ZE2YkIgEBIggNQEQgKk+Mf3t/7utt2ze7u35T6vmZ1M7vae57m7/fxu99nd5wERERERERERERERERERERERERERERERERERERERERERERERERERERERERGR7tJTdANiDAIOBDag3O2sm/eBS4Dnim6IxLsAWKKlkOVtYETrr6j+BhTdgBhfL7oBXWwYsH3RjSiDMgdkUNEN6HKDi25AGSxVdAMSeA14q+hG1FQPsFHRjZBk3qV5v/joYptTa0sTPA7pLbJBZVHmXSyRwikgIjEUEJEYCohIDAVEJIYCIhJDARGJoYCIxFBARGIoICIxqnQtVtYGAbsCewCfB9bELtB7G/gPcBdwBTC7qAaKxMnrWqweYC/gRVrfF/ERcB52+Xed6VqsCN22i7U0cBlwJbCOw/qDgMOAp4DP5dguKaluCshg4AZgnxSvXQu4F9sVky7STccgZwE7hTw+D7gFeBKYD4wEdgHG+NZbHrgR2AR4M7dWijjK8hhkLOHHGH8g/PiiB/g2FgT/ay5uox1lpWOQCsoyIHcS3AB+6vC6McB/fa9bDKzfRlvKSAGJkGQXa1ngCGwXJMp04FxggWOZawDfB1YKeW5ogrbFGQns4HvsZuAMh9c+C0zEdsE8PX2PHZ9F40psAvBF32PvAX/EfUigTwBHYl3oacwHLgSedlx/GWwbHRWzzgxgEvBByjZFuh63IWMudyxvCPCCY5nt/IJ8N6SszRK8vgd41Pf6f6VsS1mF/YJELW/g3u0d9suddJkLrO5Y37WOZV7nWF4iixwrn+tY3uaO5bUbkEm+cmalKON4XxkfUq8ewCQBWQLs7FDm0IRlxi3fcXwfCxzLW+hYXqIv2XXdxxzXm457mNqxaki9Sfl3KQYDK6RrTmLjgduws/ojO1RnnI9w2+VZAEzNoL7FWA+ji8cd1xvoWnk73byzsJ/bRtOAnzi+fg72l+gXwCohz29KgjeSQJr3HPaaRe02xMEE4CL6/zhtA2xHupAn9SLBYZbmAGcCLzm8fgmwO3Aabidlw8wDzgGmOK6/F3Zs6e9EWQ07l5Ur/8/UQTnXl1Uv1tm+ct4k+e7Rqb4y3if/8YInEL5b+xLZ96LVvRfrUILvz0md9qOj+H92VybYqxVnIPCtkDKdP+QU/L8cjdYE7qF+Xc2l1A0BuZ3gQdlpuA+teRiwnu+xm9ttVIxeosPhUUg6pBsC8gbW/ddoM2wjbHU8sjN2iUqjBcCl2TQtoBfr9/d/L09hu3WNFJKS+YDmfbi9c64vyzPpY7CuWf9+6MPAFgSPJ1YGTif8GOCkNtoRpzeivkewHrNx2Ik6//Mv035I6n4MMoHm9zYvj0pOb6hgOnaWNE9Z3w9yFMGNwFueBa7BJo65H+vKDFvvcWxjylov8eHw5BWSugdkGM33/5ySRyU92JwRe5N/OCD7gPRgXYZpT1Y9T/pLJuJMxC0cnjxCUveAAKyInXDclprMWJbHHYU9wDHAxyQLx73A8Azq90saDk/WIemGgNROntMffAa7ALFVMGZi53vy6MxIGw5PliFRQCqoE/ODrAv8ALvA8j7gIeAm7MTgl8nnTD60Hw5PViFRQCqorhPoHEA24fCMJTokox3LUEAqqI4BOQC7+C6rcHjaDYkCUkF1C0he4fC0ExIFpILqFJC8w+FJGxIFpILqEpBOhcOTJiQKSAXVISCdDodnLHYzmr/eVwgPiQKSgR7sJv7x2M3xeat6QIoKhydJSLohIMth4zBvkVcFv6b/w5vaV2GeqhyQAyk2HB7XkNQ9ICtgt0177+2EPCqZR/MHuFcelTTIKyDLYVd37o37PSFJlCUcHpeQ1D0g+9P83vy3DmTC/wFW5ZbbRsOxAQe8Mu8n21/CsoXD0yokdQ+Ibrl1MBz4O/Dphse2Bm4lm5AcCEwmeKXoo9iYwHMyqCOtB7Gbv97zPb46diGm6xn3rtMtAfHCsVHIc+NoPyQHUd5weB4Evkp4SO7qfHOqoRsCEhcOzzhs7Kk0ITkIG46zzOHwPER4SFYroC2VUPeADMfu2/aHYyHB/dCxJA9JlcLhiQqJhKhzQLxwbOh7/GNsGJ9DiA7J8g7lVzEcHoUkB1XqxRqOjcbnb/NH2Mkiz8GE9zo9QHxIol5XdG9VUlsR3rulXqwUqhIQ13B4ojb2BwkPSV3C4YkKSW+BbcqaAtInaTg8riGpWzg841BA2lb2gIwgXTg8rUJS13CAThRGqsskniOwrtyoA/IbHcqY3PfvBTQfeG+FTemwPuU4IF+nb/kn7jN5SUp16MXKIhyeyYT3bo2mHOGYiI3PdR82d+Kl2Iy8gzrYBolQxl2suN2q3duoO2p3qsjdqoFE9zi9iXU5b0e6P3raxcpA2QIyArvsPutweMp2zLEUwfGRw5bZ2AiSWyYoWwHJgH9jOSCPShrEBSTvcHj8ISn6gPw6WgekcZmBTfWwaYty6x4Qb7fZWxbnUcndNG+IeV8BGhWQuHCMz6EduwJ/Bk7G7Qx7nr5JsoA0LlOwG4XGhJRb94BsRP/lRUuAO/KoZBVsOrMrsLny8hYWkE6Ho2yGEjwOeR6bJCjJeMNPYHNJrt1Xbt0DAjar2DXA77DpLSrPH5Cz6O5weC6n+f2/j40RsCrwPayHy3XK7sXYdVk/Dnmut0PvR1LyByTsgLnbwgGwG8HPYU/fOmsAP8S6otPukvXm+zakXf6A+JcP6b5wgJ3zeJvmz+L6mPVHAcdh07glCchDwH4Uf9wlEeIC0q3h8PyJ5s9jAW6TGm0I/Ap4BvegzAf+gp10HZrlm5D2RAWk28MBsCPBz2VCwjI2w6bVezGkrKjlPayTZjd09r5wYQFROMxA4HWaP5tb2yhvS+zk4mzcw/I29ku2A/nNoyIx/AFROJqdR/Pn8zHtd18OwC5XuQC7fMU1LK8B52KXzddi/r8q8AfkV8U2p3S2JrihHpJh+UthQwVdgl2Q6RqWWcCZwOYZtkVCVHno0U7oAV6i+TO6J6e6hgBfA64mOMJm3PIscCLBK61rawD5DNcZRgFp7Tc0f0aLsHGu8rQsNmzrjdhur0tQFgNH5NwuF0PI8RaPnbB7EBZi+5t572sqIK19geDGeFQH618Ru0fF5VKXVzvYLr8B2O0Ai7DOjR3zqMT/c55LJQ0UEDfTaf6cHimgDSsCk4gPyLQC2uXxX30w0/WFSX5u1vT9f50Er5X8XO37/xbAyA7VvQp2lfNM4PCY9d6h2F0s/7a7duhaIap0T/qewMZFN6KE1gh5bC/sPpC8jMB+0Q/FjkmivAH8FuuSnptje0rB/5PZ6TsKtbgvT6b4vF2shR1/zm9R/yvYxZKdmInMRS1HNcnlrq8usQnWtTo1o/K8Cx4nEN+LORM4A7gQ6+GqvDKPavJQ0Q2ouKxmANsXO59xMNHhmI7NjzIaOJ+ahAPK/QvSC5yC/SXU5QutbYAdNHv2JJu5+H5J9HYyBfuOrsK6ULtap49BJJmjCX5Hm2VQbuOUdY3LEVTnD5emYBOuJvjF751BuUdjd276HY71Zkkf/YKU3wM0f0cvks1f+fGEX1YyDfhkBuXnTb8gAtixQKN1SDaAXJSbsDsK/b8kY7BJQKsQklQUkHq5luDBsmtv1vLE7zJ1bUhcaRerGu6i+Xt6ldZ/CPen/+TflcSf64ja3XqG8oaklmPzSjoHEfyuto9Zf2XsXvPG9W8k/p7zqoVEAZH/G4btBjV+V5Nj1j+R4Hdbt5AoINLkFpq/q7cI39hXIP6at7qEpCMBmeGrYNs8KpFM7Etwg9g1ZL2fhayXZUjKcp5kJ5rbNj2PSrYBXsDuST6F6pxF7UbLE5xL5DLfOstgl6M3rrOA8JDcQLVD0oMNJPEBFo6xxTZHysA/l8hcbBR3z48IbtBHASeFPF6HkIg0CZtL5Bt9zw0hOEjc6/Tfv6GQSO2FzSVyXd9zhxHciI/1vT7rkExFIZGS8c8l8gGwEsHxeN8ifBT3kwkPyfUoJFIDYXOJ3BHy2AkxZSgkUlthc4n4lznYycU4WYdkCpp3RErCP5eIfznVsZx2QhI2qNyBCd+HSC52IDoc87C5DV2dElHOX4kOSVh38hKC08aJFGIgNj1B2EZ6dorykoQkbHLQJdhcJppTRErjXIIb6QLSXy/lEpKwe+SXALfRfMKyNlbHxju6Gdil4LZIMuMIbqjnt1lmXEiOjXiuyHCMxy7inExOvWiN9zsvpIvmfKiBHqznqPF8iPP4tDFOJTwIZQvHJjRPI35fHpWoF6LaRgGXYrfOfinDcl1CcjvF7lYdEtKmzPkr0P0g4okLSdHhAI1qIgU7jvDR5O8Edsc6BCpJAZGsHEf/BY5gB8TjqXA4oNxj80r1/Byb6mw5shtZvlAKiGTtpaIbkCXtYonEUEBEYiggIjEUEJEYCohIDAVEJIYCIhJDARGJoYCIxEgSkHm+/8/JsiEiOXrf9/+5eVTSOBL4E/QPUylSdsvRPJ31MXlV9FlgR2xsV5EqWRr4CrBx0Q0RERERERERERERERERkZJLMgT9AGAPbNjKWdj4riJVMRzYD1gDeI4chh89j/5rWV7GJoMUqYJVgVfp337PyaMS/1xz++RRiUgOJtK87c53fWGSy90H+/4/NMFrRYrkv7jWeTBt3TAlEkMBEYmhgIjE6Emwrr9b7HXgXd9j04EjgRdalLUWMAn4VIL6Pc/11TGjxXpr99WxQYo6ngWOAGa2WG9kXx2jU9Qxra+OWS3WGwX8PmUdz2CfVas61u2rY/0UdUzF3sfLDnVMAtZLUccU4HBgdov1RmPvY5Tv8WHAar7Hkmz7TlznonvQoay7EpSXto572qzDZR67f7RZx90OdTTODZlXHQ+3WcftDnU80mYdf3Oo47EE5WVuoWPFLjfEN/ZJp1lcBox4o8063nKo450263i9JHW812Ydr3Sgjla/5mCT9biU9bFDWUCyY5BrHde7OsOyolyT0TpVqKMun1Un3odrHVe5VppkP2wINrPtujHrTAMupnVClwL2BzZKUH+aOiaQbrrqqcAl2K9mnEF9daQ5lpqCzTrrUkcv6Y6lktQxERiToo6ngcuARS3WG4y9jzR1/Bu43LGOA4g/lpoOXAR8lKIdIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIrX3Py2wAaYahY2rAAAAAElFTkSuQmCC";
 
 // src/components/Basic/Image/Image.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var ImageControl = ({
   className,
   style,
@@ -302,26 +371,26 @@ var ImageControl = ({
     className
   );
   if (!imageUrl && !imageUrlExternal) {
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: imageClass, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("img", { src: image_placeholder_default, alt: altText, className: "opacity-50", width: 50, height: 50 }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: imageClass, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("img", { src: image_placeholder_default, alt: altText, className: "opacity-50", width: 50, height: 50 }) });
   }
   const url = imageUrlExternal || imageUrl;
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("img", { src: url, alt: altText, className: defaultImgClass, style });
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("img", { src: url, alt: altText, className: defaultImgClass, style });
 };
 var Image_default = ImageControl;
 
 // src/components/Basic/Shape/Shape.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var Shape = ({
   children,
   className,
   style
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className, style, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className, style, children });
 };
 var Shape_default = Shape;
 
 // src/components/Basic/Typography/Typography.tsx
-var import_react2 = __toESM(require("react"));
+var import_react4 = __toESM(require("react"));
 var Typography = ({
   className,
   style,
@@ -329,14 +398,14 @@ var Typography = ({
   textContent
 }) => {
   const Tag2 = tagName || "h1";
-  return import_react2.default.createElement(
+  return import_react4.default.createElement(
     Tag2,
     {
       style,
       className: cn(className, "pointer-events-auto")
     },
     [
-      import_react2.default.createElement("span", {
+      import_react4.default.createElement("span", {
         key: "html",
         className: "pointer-events-none",
         dangerouslySetInnerHTML: { __html: textContent }
@@ -7544,7 +7613,7 @@ __export(icons_exports, {
 });
 
 // node_modules/lucide-react/dist/esm/createLucideIcon.js
-var import_react4 = require("react");
+var import_react6 = require("react");
 
 // node_modules/lucide-react/dist/esm/shared/src/utils.js
 var toKebabCase = (string) => string.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
@@ -7568,7 +7637,7 @@ var hasA11yProp = (props) => {
 };
 
 // node_modules/lucide-react/dist/esm/Icon.js
-var import_react3 = require("react");
+var import_react5 = require("react");
 
 // node_modules/lucide-react/dist/esm/defaultAttributes.js
 var defaultAttributes = {
@@ -7584,7 +7653,7 @@ var defaultAttributes = {
 };
 
 // node_modules/lucide-react/dist/esm/Icon.js
-var Icon = (0, import_react3.forwardRef)(
+var Icon = (0, import_react5.forwardRef)(
   ({
     color = "currentColor",
     size = 24,
@@ -7594,7 +7663,7 @@ var Icon = (0, import_react3.forwardRef)(
     children,
     iconNode,
     ...rest
-  }, ref) => (0, import_react3.createElement)(
+  }, ref) => (0, import_react5.createElement)(
     "svg",
     {
       ref,
@@ -7608,7 +7677,7 @@ var Icon = (0, import_react3.forwardRef)(
       ...rest
     },
     [
-      ...iconNode.map(([tag, attrs]) => (0, import_react3.createElement)(tag, attrs)),
+      ...iconNode.map(([tag, attrs]) => (0, import_react5.createElement)(tag, attrs)),
       ...Array.isArray(children) ? children : [children]
     ]
   )
@@ -7616,8 +7685,8 @@ var Icon = (0, import_react3.forwardRef)(
 
 // node_modules/lucide-react/dist/esm/createLucideIcon.js
 var createLucideIcon = (iconName, iconNode) => {
-  const Component2 = (0, import_react4.forwardRef)(
-    ({ className, ...props }, ref) => (0, import_react4.createElement)(Icon, {
+  const Component2 = (0, import_react6.forwardRef)(
+    ({ className, ...props }, ref) => (0, import_react6.createElement)(Icon, {
       ref,
       iconNode,
       className: mergeClasses(
@@ -26654,9 +26723,9 @@ var ZoomOut = createLucideIcon("zoom-out", __iconNode1634);
 
 // src/components/Basic/Breadcrumb/Breadcrumb.tsx
 var import_link3 = __toESM(require("next/link"));
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var Breadcrumb = ({ list = [], className, style }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     "nav",
     {
       "aria-label": "breadcrumb",
@@ -26664,16 +26733,16 @@ var Breadcrumb = ({ list = [], className, style }) => {
       style,
       children: list.map((item, index) => {
         const isLast = index === list.length - 1;
-        return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center", children: [
-          item.url && !isLast ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-center", children: [
+          item.url && !isLast ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
             import_link3.default,
             {
               href: item.url,
               className: "hover:text-foreground transition-colors",
               children: item.header
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "text-foreground font-medium", children: item.header }),
-          !isLast && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ChevronRight, { className: "mx-2 h-4 w-4 text-muted-foreground" })
+          ) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "text-foreground font-medium", children: item.header }),
+          !isLast && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ChevronRight, { className: "mx-2 h-4 w-4 text-muted-foreground" })
         ] }, item.id);
       })
     }
@@ -26683,16 +26752,16 @@ var Breadcrumb_default = Breadcrumb;
 
 // src/components/ui/dropdown-menu.tsx
 var DropdownMenuPrimitive = __toESM(require("@radix-ui/react-dropdown-menu"));
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 function DropdownMenu({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DropdownMenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(DropdownMenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props });
 }
 function DropdownMenuTrigger({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     DropdownMenuPrimitive.Trigger,
     {
       "data-slot": "dropdown-menu-trigger",
@@ -26705,7 +26774,7 @@ function DropdownMenuContent({
   sideOffset = 4,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     DropdownMenuPrimitive.Content,
     {
       "data-slot": "dropdown-menu-content",
@@ -26724,7 +26793,7 @@ function DropdownMenuItem({
   variant = "default",
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     DropdownMenuPrimitive.Item,
     {
       "data-slot": "dropdown-menu-item",
@@ -26741,7 +26810,7 @@ function DropdownMenuItem({
 function DropdownMenuSub({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DropdownMenuPrimitive.Sub, { "data-slot": "dropdown-menu-sub", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(DropdownMenuPrimitive.Sub, { "data-slot": "dropdown-menu-sub", ...props });
 }
 function DropdownMenuSubTrigger({
   className,
@@ -26749,7 +26818,7 @@ function DropdownMenuSubTrigger({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
     DropdownMenuPrimitive.SubTrigger,
     {
       "data-slot": "dropdown-menu-sub-trigger",
@@ -26761,7 +26830,7 @@ function DropdownMenuSubTrigger({
       ...props,
       children: [
         children,
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ChevronRight, { className: "ml-auto size-4" })
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ChevronRight, { className: "ml-auto size-4" })
       ]
     }
   );
@@ -26770,7 +26839,7 @@ function DropdownMenuSubContent({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     DropdownMenuPrimitive.SubContent,
     {
       "data-slot": "dropdown-menu-sub-content",
@@ -26785,11 +26854,11 @@ function DropdownMenuSubContent({
 
 // src/components/Basic/ButtonGroup/ButtonGroup.tsx
 var import_link4 = __toESM(require("next/link"));
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 function SplitButton({ style, textContent, className, list = [] }) {
   const bgColor = style?.backgroundColor || "";
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "inline-flex rounded-md overflow-hidden border border-teal-200 bg-teal-700 items-center focus:ring-0", style: { backgroundColor: bgColor }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "inline-flex rounded-md overflow-hidden border border-teal-200 bg-teal-700 items-center focus:ring-0", style: { backgroundColor: bgColor }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       Button,
       {
         className: `rounded-none border-r px-4 py-2 text-whit focus:ring-0 ${className || ""}`,
@@ -26797,17 +26866,17 @@ function SplitButton({ style, textContent, className, list = [] }) {
         children: textContent || "Button"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(DropdownMenu, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(DropdownMenu, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         Button,
         {
           className: "rounded-none bg-teal-700 px-4 py-2 text-white ring-0 shadow-none hover:bg-teal-600 focus:ring-0",
           "aria-label": "Open Dropdown",
           style: { backgroundColor: bgColor },
-          children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ChevronDown, { className: "w-4 h-4" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ChevronDown, { className: "w-4 h-4" })
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DropdownMenuContent, { align: "end", className: "bg-white min-w-[120px]", children: list.map((item) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DropdownMenuItem, { className: "text-black", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_link4.default, { href: item.url || "#", children: item.header }) }, item.id)) })
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(DropdownMenuContent, { align: "end", className: "bg-white min-w-[120px]", children: list.map((item) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(DropdownMenuItem, { className: "text-black", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_link4.default, { href: item.url || "#", children: item.header }) }, item.id)) })
     ] })
   ] });
 }
@@ -26815,7 +26884,7 @@ function SplitButton({ style, textContent, className, list = [] }) {
 // src/components/Basic/Icon/Icon.tsx
 var faSolid = __toESM(require("@fortawesome/free-solid-svg-icons"));
 var import_react_fontawesome = require("@fortawesome/react-fontawesome");
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var Icon2 = ({ iconType = "fontawesome", name = "Envelope", className, fontSize = 10, style }) => {
   let content = null;
   if (iconType === "fontawesome") {
@@ -26824,7 +26893,7 @@ var Icon2 = ({ iconType = "fontawesome", name = "Envelope", className, fontSize
     if (!faIcon) {
       return null;
     }
-    content = /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    content = /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       import_react_fontawesome.FontAwesomeIcon,
       {
         icon: faIcon,
@@ -26838,16 +26907,19 @@ var Icon2 = ({ iconType = "fontawesome", name = "Envelope", className, fontSize
     if (!Lucide) {
       return null;
     }
-    content = /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Lucide, { className: cn("w-5 h-5"), size: fontSize, style: { color: style?.color } });
+    content = /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Lucide, { className: cn("w-5 h-5"), size: fontSize, style: { color: style?.color } });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { style, className, children: content });
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { style, className, children: content });
 };
 var Icon_default = Icon2;
 
+// src/components/Inputs/TextInput/TextInput.tsx
+var import_react7 = require("react");
+
 // src/components/ui/input.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 function Input({ className, type, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     "input",
     {
       type,
@@ -26864,18 +26936,24 @@ function Input({ className, type, ...props }) {
 }
 
 // src/components/Inputs/TextInput/TextInput.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime19 = 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_react7.useEffect)(() => {
+    if (props.value !== void 0) {
+      const e = { target: { value: props.value } };
+      handleChange?.(e);
+    }
+  }, []);
   const handleChange = (e) => {
     props.onChange?.(e);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       Input,
       {
         type: "text",
@@ -26893,26 +26971,33 @@ var TextInput = ({ className, style, ...props }) => {
         readOnly: isReadonly
       }
     ),
-    props.errorMessage && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "mt-1 text-xs text-red-500", children: props.errorMessage })
+    props.errorMessage && /* @__PURE__ */ (0, import_jsx_runtime19.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_jsx_runtime18 = require("react/jsx-runtime");
+var import_react8 = require("react");
+var import_jsx_runtime20 = 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_react8.useEffect)(() => {
+    if (props.value !== void 0) {
+      const e = { target: { value: props.value } };
+      handleChange?.(e);
+    }
+  }, []);
   const handleChange = (e) => {
     props.onChange?.(e);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex justify-start items-center relative", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Calculator, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[#BDBDBD]" }),
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex justify-start items-center relative", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Calculator, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[#BDBDBD]" }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
         Input,
         {
           type: "number",
@@ -26932,26 +27017,33 @@ var NumberInput = ({ className, style, ...props }) => {
         }
       )
     ] }),
-    props.errorMessage && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "mt-1 text-xs text-red-500", children: props.errorMessage })
+    props.errorMessage && /* @__PURE__ */ (0, import_jsx_runtime20.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_jsx_runtime19 = require("react/jsx-runtime");
+var import_react9 = require("react");
+var import_jsx_runtime21 = 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_react9.useEffect)(() => {
+    if (props.value !== void 0) {
+      const e = { target: { value: props.value } };
+      handleChange?.(e);
+    }
+  }, []);
   const handleChange = (e) => {
     props.onChange?.(e);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex justify-start items-center relative", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Mail, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[#BDBDBD]" }),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex justify-start items-center relative", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Mail, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[#BDBDBD]" }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
         Input,
         {
           type: "email",
@@ -26970,26 +27062,33 @@ var EmailInput = ({ className, style, ...props }) => {
         }
       )
     ] }),
-    props.errorMessage && /* @__PURE__ */ (0, import_jsx_runtime19.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 EmailInput_default = EmailInput;
 
 // src/components/Inputs/PasswordInput/PasswordInput.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_react10 = require("react");
+var import_jsx_runtime22 = 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_react10.useEffect)(() => {
+    if (props.value !== void 0) {
+      const e = { target: { value: props.value } };
+      handleChange?.(e);
+    }
+  }, []);
   const handleChange = (e) => {
     props.onChange?.(e);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex justify-start items-center relative", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ScanEye, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[#BDBDBD]" }),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex justify-start items-center relative", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ScanEye, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[#BDBDBD]" }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
         Input,
         {
           type: "password",
@@ -27009,15 +27108,18 @@ var PasswordInput = ({ className, style, ...props }) => {
         }
       )
     ] }),
-    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_runtime22.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_react11 = require("react");
+
 // src/components/ui/textarea.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 function Textarea({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     "textarea",
     {
       "data-slot": "textarea",
@@ -27031,18 +27133,24 @@ function Textarea({ className, ...props }) {
 }
 
 // src/components/Inputs/Textarea/Textarea.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime24 = 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_react11.useEffect)(() => {
+    if (props.value !== void 0) {
+      const e = { target: { value: props.value } };
+      handleChange?.(e);
+    }
+  }, []);
   const handleChange = (e) => {
     props.onChange?.(e);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       Textarea,
       {
         id: "textarea-field",
@@ -27060,26 +27168,33 @@ var Textarea2 = ({ 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_runtime24.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_jsx_runtime23 = require("react/jsx-runtime");
+var import_react12 = require("react");
+var import_jsx_runtime25 = 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_react12.useEffect)(() => {
+    if (props.value !== void 0) {
+      const e = { target: { value: props.value } };
+      handleChange?.(e);
+    }
+  }, []);
   const handleChange = (e) => {
     props.onChange?.(e);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex justify-start items-center relative", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime23.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_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex justify-start items-center relative", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime25.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_runtime25.jsx)(
         Input,
         {
           id: "url-field",
@@ -27099,19 +27214,22 @@ var UrlInput = ({ className, style, ...props }) => {
         }
       )
     ] }),
-    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_runtime25.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_react13 = require("react");
+
 // src/components/ui/checkbox.tsx
 var CheckboxPrimitive = __toESM(require("@radix-ui/react-checkbox"));
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 function Checkbox({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     CheckboxPrimitive.Root,
     {
       "data-slot": "checkbox",
@@ -27120,12 +27238,12 @@ function Checkbox({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
         CheckboxPrimitive.Indicator,
         {
           "data-slot": "checkbox-indicator",
           className: "flex items-center justify-center text-current transition-none",
-          children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Check, { className: "size-3.5" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Check, { className: "size-3.5" })
         }
       )
     }
@@ -27134,12 +27252,12 @@ function Checkbox({
 
 // src/components/ui/label.tsx
 var LabelPrimitive = __toESM(require("@radix-ui/react-label"));
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 function Label2({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
     LabelPrimitive.Root,
     {
       "data-slot": "label",
@@ -27153,17 +27271,22 @@ function Label2({
 }
 
 // src/components/Inputs/Checkbox/Checkbox.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 var CheckboxInput = ({ className, style, ...props }) => {
   const isEditable = props.isEditable ?? true;
   const isDisabled = props.isDisabled ?? false;
   const text = props.text ? props.text : "Subscribe";
+  (0, import_react13.useEffect)(() => {
+    if (props.value) {
+      handleChange(props.value);
+    }
+  }, []);
   const handleChange = (value) => {
     props.onChange?.(value);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className, style, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex items-center space-x-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className, style, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex items-center space-x-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
         Checkbox,
         {
           id: props.name || "checkbox",
@@ -27172,21 +27295,24 @@ var CheckboxInput = ({ className, style, ...props }) => {
           disabled: !isEditable || isDisabled
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Label2, { htmlFor: props.name || "checkbox", children: text })
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Label2, { htmlFor: props.name || "checkbox", children: text })
     ] }) }),
-    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_runtime28.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_react14 = require("react");
+
 // src/components/ui/radio-group.tsx
 var RadioGroupPrimitive = __toESM(require("@radix-ui/react-radio-group"));
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 function RadioGroup2({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     RadioGroupPrimitive.Root,
     {
       "data-slot": "radio-group",
@@ -27199,7 +27325,7 @@ function RadioGroupItem({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     RadioGroupPrimitive.Item,
     {
       "data-slot": "radio-group-item",
@@ -27208,12 +27334,12 @@ function RadioGroupItem({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
         RadioGroupPrimitive.Indicator,
         {
           "data-slot": "radio-group-indicator",
           className: "relative flex items-center justify-center",
-          children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Circle, { 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_runtime29.jsx)(Circle, { className: "fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" })
         }
       )
     }
@@ -27221,7 +27347,7 @@ function RadioGroupItem({
 }
 
 // src/components/Inputs/RadioInput/RadioInput.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 var RadioInput = ({
   className,
   style,
@@ -27237,33 +27363,38 @@ var RadioInput = ({
     value: item[dataKey || "value"],
     label: item[dataLabel || "label"]
   }));
+  (0, import_react14.useEffect)(() => {
+    if (props.value !== void 0) {
+      handleChange?.(props.value);
+    }
+  }, []);
   const handleChange = (value) => {
     onChange?.(value);
   };
   const resolvedDefaultValue = (typeof defaultValue === "string" ? defaultValue : void 0) ?? options[0]?.value;
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className, style, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+  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)(
       RadioGroup2,
       {
         defaultValue: resolvedDefaultValue,
         onValueChange: handleChange,
         children: [
-          options.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "text-sm text-gray-500", children: "No options available" }),
-          options.map((item) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex items-center space-x-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(RadioGroupItem, { value: item.value, id: `radio-${item.value}` }),
-            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Label2, { htmlFor: `radio-${item.value}`, children: item.label })
+          options.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "text-sm text-gray-500", children: "No options available" }),
+          options.map((item) => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex items-center space-x-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(RadioGroupItem, { value: item.value, id: `radio-${item.value}` }),
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Label2, { htmlFor: `radio-${item.value}`, children: item.label })
           ] }, item.value))
         ]
       }
     ) }),
-    props.errorMessage && /* @__PURE__ */ (0, import_jsx_runtime28.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 RadioInput_default = RadioInput;
 
 // src/components/Inputs/MultiCheckbox/MultiCheckbox.tsx
-var import_react5 = require("react");
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_react15 = require("react");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 var MultiCheckbox = ({
   className,
   style,
@@ -27276,12 +27407,17 @@ var MultiCheckbox = ({
   isDisabled = false
 }) => {
   const list = Array.isArray(data) ? data : [];
-  const [value, setValue] = (0, import_react5.useState)(propValue);
+  const [value, setValue] = (0, import_react15.useState)(propValue);
   const options = (list || []).map((item) => ({
     value: item[dataKey || "value"],
     label: item[dataLabel || "label"]
   }));
-  const handleChange = (0, import_react5.useCallback)(
+  (0, import_react15.useEffect)(() => {
+    if (propValue !== void 0) {
+      onChange?.(propValue);
+    }
+  }, []);
+  const handleChange = (0, import_react15.useCallback)(
     (key, checked) => {
       setValue((prev) => {
         const newValue = { ...prev, [key]: checked };
@@ -27291,15 +27427,15 @@ var MultiCheckbox = ({
     },
     [onChange]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
     "div",
     {
       className: cn("flex flex-col gap-3", className),
       style,
       children: [
-        options.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { className: "text-sm text-gray-500", children: "No options available." }),
-        options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex items-center space-x-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+        options.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { className: "text-sm text-gray-500", children: "No options available." }),
+        options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex items-center space-x-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
             Checkbox,
             {
               id: opt.value,
@@ -27308,7 +27444,7 @@ var MultiCheckbox = ({
               disabled: !isEditable || isDisabled
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Label2, { htmlFor: opt.value, children: opt.label })
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Label2, { htmlFor: opt.value, children: opt.label })
         ] }, opt.value))
       ]
     }
@@ -27316,16 +27452,19 @@ var MultiCheckbox = ({
 };
 var MultiCheckbox_default = MultiCheckbox;
 
+// src/components/Inputs/RichText/RichText.tsx
+var import_react17 = require("react");
+
 // src/components/Global/TinyMceEditor.tsx
-var import_react6 = require("react");
+var import_react16 = require("react");
 var import_tinymce_react = require("@tinymce/tinymce-react");
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 function MyEditor({
   value,
   onChange,
   isDefault
 }) {
-  const editorRef = (0, import_react6.useRef)(null);
+  const editorRef = (0, import_react16.useRef)(null);
   function stripOuterP(html) {
     const trimmedHtml = html.trim();
     if (!trimmedHtml) return "";
@@ -27337,14 +27476,14 @@ function MyEditor({
     }
     return trimmedHtml;
   }
-  const isDefaultToolbar = (0, import_react6.useMemo)(() => {
+  const isDefaultToolbar = (0, import_react16.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_runtime30.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     import_tinymce_react.Editor,
     {
       apiKey: process.env.NEXT_PUBLIC_TINYMCE_API_KEY,
@@ -27388,9 +27527,17 @@ function MyEditor({
 }
 
 // src/components/Inputs/RichText/RichText.tsx
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 function RichText({ className, style, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+  (0, import_react17.useEffect)(() => {
+    if (props.value !== void 0) {
+      handleChange?.(props.value);
+    }
+  }, []);
+  const handleChange = (content) => {
+    props.onChange?.(content);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
     "div",
     {
       className: cn(className, props.errorMessage ? "border-red-500" : ""),
@@ -27399,25 +27546,28 @@ function RichText({ className, style, ...props }) {
         borderColor: props.errorMessage ? "#f87171" : style?.borderColor
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(MyEditor, { onChange: (content) => props.onChange?.(content), value: props.value || "", isDefault: true }),
-        props.errorMessage && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { className: "mt-1 text-xs text-red-500", children: props.errorMessage })
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(MyEditor, { onChange: handleChange, value: props.value || "", isDefault: true }),
+        props.errorMessage && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: "mt-1 text-xs text-red-500", children: props.errorMessage })
       ]
     }
   );
 }
 
+// src/components/Inputs/Dropdown/Dropdown.tsx
+var import_react18 = require("react");
+
 // src/components/ui/select.tsx
 var SelectPrimitive = __toESM(require("@radix-ui/react-select"));
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 function Select({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SelectPrimitive.Root, { "data-slot": "select", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(SelectPrimitive.Root, { "data-slot": "select", ...props });
 }
 function SelectValue({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SelectPrimitive.Value, { "data-slot": "select-value", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(SelectPrimitive.Value, { "data-slot": "select-value", ...props });
 }
 function SelectTrigger({
   className,
@@ -27425,7 +27575,7 @@ function SelectTrigger({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
     SelectPrimitive.Trigger,
     {
       "data-slot": "select-trigger",
@@ -27437,7 +27587,7 @@ function SelectTrigger({
       ...props,
       children: [
         children,
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChevronDown, { className: "size-4 opacity-50" }) })
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ChevronDown, { className: "size-4 opacity-50" }) })
       ]
     }
   );
@@ -27448,7 +27598,7 @@ function SelectContent({
   position = "popper",
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SelectPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(SelectPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
     SelectPrimitive.Content,
     {
       "data-slot": "select-content",
@@ -27460,8 +27610,8 @@ function SelectContent({
       position,
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SelectScrollUpButton, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(SelectScrollUpButton, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
           SelectPrimitive.Viewport,
           {
             className: cn(
@@ -27471,7 +27621,7 @@ function SelectContent({
             children
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SelectScrollDownButton, {})
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(SelectScrollDownButton, {})
       ]
     }
   ) });
@@ -27481,7 +27631,7 @@ function SelectItem({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
     SelectPrimitive.Item,
     {
       "data-slot": "select-item",
@@ -27491,8 +27641,8 @@ function SelectItem({
       ),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "absolute right-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Check, { className: "size-4" }) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SelectPrimitive.ItemText, { children })
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "absolute right-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Check, { className: "size-4" }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(SelectPrimitive.ItemText, { children })
       ]
     }
   );
@@ -27501,7 +27651,7 @@ function SelectScrollUpButton({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
     SelectPrimitive.ScrollUpButton,
     {
       "data-slot": "select-scroll-up-button",
@@ -27510,7 +27660,7 @@ function SelectScrollUpButton({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChevronUp, { className: "size-4" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ChevronUp, { className: "size-4" })
     }
   );
 }
@@ -27518,7 +27668,7 @@ function SelectScrollDownButton({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
     SelectPrimitive.ScrollDownButton,
     {
       "data-slot": "select-scroll-down-button",
@@ -27527,19 +27677,24 @@ function SelectScrollDownButton({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChevronDown, { className: "size-4" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ChevronDown, { className: "size-4" })
     }
   );
 }
 
 // src/components/Inputs/Dropdown/Dropdown.tsx
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 var Dropdown = ({ className, style, ...props }) => {
   const list = Array.isArray(props?.data) ? props.data : [];
   const placeholder = props.placeholder ? props.placeholder : "Placeholder text";
   const isEditable = props.isEditable ?? true;
   const isDisabled = props.isDisabled ?? false;
   const isReadonly = props.isReadonly ?? false;
+  (0, import_react18.useEffect)(() => {
+    if (props.value !== void 0) {
+      handleChange(props.value);
+    }
+  }, []);
   const handleChange = (value) => {
     props.onChange?.(value);
   };
@@ -27549,9 +27704,9 @@ var Dropdown = ({ className, style, ...props }) => {
     value: item[dataKey],
     label: item[dataLabel]
   }));
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(Select, { name: props.name, value: props.value || "", onValueChange: handleChange, disabled: isDisabled || !isEditable, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Select, { name: props.name, value: props.value || "", onValueChange: handleChange, disabled: isDisabled || !isEditable, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
         SelectTrigger,
         {
           id: props.name || "select-field",
@@ -27561,24 +27716,31 @@ var Dropdown = ({ className, style, ...props }) => {
             borderColor: props.errorMessage ? "#f87171" : style?.borderColor
           },
           "aria-readonly": isReadonly,
-          children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(SelectValue, { placeholder })
+          children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(SelectValue, { placeholder })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(SelectContent, { children: options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(SelectItem, { value: opt.value, children: opt.label }, opt.value)) })
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(SelectContent, { children: [
+        props.dataLoading && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(SelectItem, { value: "none", disabled: true, children: "Loading..." }),
+        !props.dataLoading && options.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(SelectItem, { value: "none", disabled: true, children: "No options" }),
+        options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(SelectItem, { value: opt.value, children: opt.label }, opt.value))
+      ] })
     ] }),
-    props.errorMessage && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: "mt-1 text-xs text-red-500", children: props.errorMessage })
+    props.errorMessage && /* @__PURE__ */ (0, import_jsx_runtime35.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_react19 = require("react");
+
 // src/components/ui/switch.tsx
 var SwitchPrimitive = __toESM(require("@radix-ui/react-switch"));
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 function Switch({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
     SwitchPrimitive.Root,
     {
       "data-slot": "switch",
@@ -27587,7 +27749,7 @@ function Switch({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
         SwitchPrimitive.Thumb,
         {
           "data-slot": "switch-thumb",
@@ -27601,16 +27763,21 @@ function Switch({
 }
 
 // src/components/Inputs/SwitchToggle/SwitchToggle.tsx
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 var SwitchToggle = ({ className, style, ...props }) => {
   const isEditable = props.isEditable ?? true;
   const isDisabled = props.isDisabled ?? false;
+  (0, import_react19.useEffect)(() => {
+    if (props.value !== void 0) {
+      handleChange?.(props.value);
+    }
+  }, []);
   const handleChange = (value) => {
     props.onChange?.(value);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className, style, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex items-center space-x-2 mb-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className, style, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex items-center space-x-2 mb-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
         Switch,
         {
           id: props.name || "switch",
@@ -27619,26 +27786,32 @@ var SwitchToggle = ({ className, style, ...props }) => {
           disabled: isDisabled || !isEditable
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Label2, { htmlFor: props.name || "switch", children: props.text })
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Label2, { htmlFor: props.name || "switch", children: props.text })
     ] }) }),
-    props.errorMessage && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "mt-1 text-xs text-red-500", children: props.errorMessage })
+    props.errorMessage && /* @__PURE__ */ (0, import_jsx_runtime37.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_react20 = require("react");
 var import_react_international_phone = require("react-international-phone");
 var import_style = require("react-international-phone/style.css");
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 var PhoneInput = ({ className, style, ...props }) => {
   const placeholder = props.placeholder ?? "Enter phone number";
   const isEditable = props.isEditable ?? true;
   const isDisabled = props.isDisabled ?? false;
+  (0, import_react20.useEffect)(() => {
+    if (props.value !== void 0) {
+      handleChange?.(props.value);
+    }
+  }, []);
   const handleChange = (val) => {
     props.onChange?.(val);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_jsx_runtime38.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
       import_react_international_phone.PhoneInput,
       {
         defaultCountry: "in",
@@ -27662,26 +27835,33 @@ var PhoneInput = ({ className, style, ...props }) => {
         disabled: isDisabled || !isEditable
       }
     ),
-    props.errorMessage && /* @__PURE__ */ (0, import_jsx_runtime36.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 PhoneInput_default = PhoneInput;
 
 // src/components/Inputs/SearchInput/SearchInput.tsx
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_react21 = require("react");
+var import_jsx_runtime39 = 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_react21.useEffect)(() => {
+    if (props.value !== void 0) {
+      const e = { target: { value: props.value } };
+      handleChange?.(e);
+    }
+  }, []);
   const handleChange = (e) => {
     props.onChange?.(e);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex justify-start items-center relative", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Search, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[#BDBDBD]" }),
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex justify-start items-center relative", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Search, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[#BDBDBD]" }),
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
         Input,
         {
           type: "text",
@@ -27701,17 +27881,27 @@ var SearchInput = ({ className, style, ...props }) => {
         }
       )
     ] }),
-    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_runtime39.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_jsx_runtime38 = require("react/jsx-runtime");
+var import_react22 = require("react");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 var FileInput2 = ({ className, style, ...props }) => {
   const placeholder = props.placeholder ?? "Placeholder text";
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "d-flex items-center relative align-middle", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+  (0, import_react22.useEffect)(() => {
+    if (props.value !== void 0) {
+      const e = { target: { value: props.value } };
+      handleChange?.(e);
+    }
+  }, []);
+  const handleChange = (e) => {
+    props.onChange?.(e);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "d-flex items-center relative align-middle", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
       Input,
       {
         type: "file",
@@ -27725,18 +27915,17 @@ var FileInput2 = ({ className, style, ...props }) => {
         },
         autoComplete: "off",
         placeholder,
-        onChange: (e) => {
-          props.onChange?.(e);
-        }
+        onChange: handleChange
       }
     ),
-    props.errorMessage && /* @__PURE__ */ (0, import_jsx_runtime38.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 FileInput_default = FileInput2;
 
 // src/components/Inputs/DatePicker/DatePicker.tsx
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_react23 = require("react");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 function DatePicker({ className, style, ...props }) {
   const placeholder = props.placeholder ?? "Placeholder text";
   const minimumDate = props.minimumDate ?? "none";
@@ -27761,13 +27950,18 @@ function DatePicker({ className, style, ...props }) {
   };
   const minDate = resolveDate(minimumDate, customMinimumDate);
   const maxDate = resolveDate(maximumDate, customMaximumDate);
+  (0, import_react23.useEffect)(() => {
+    if (props.value !== void 0) {
+      handleChange(props.value);
+    }
+  }, []);
   const handleChange = (e) => {
     props.onChange?.(e);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex justify-start items-center relative", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Calendar, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[#BDBDBD]" }),
-      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex justify-start items-center relative", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Calendar, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[#BDBDBD]" }),
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
         Input,
         {
           type: "date",
@@ -27793,18 +27987,18 @@ function DatePicker({ className, style, ...props }) {
         }
       )
     ] }),
-    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_runtime41.jsx)("p", { className: "mt-1 text-xs text-red-500", children: props.errorMessage })
   ] });
 }
 
 // src/components/Inputs/DateRange/DateRange.tsx
-var React4 = __toESM(require("react"));
+var import_react24 = __toESM(require("react"));
 var import_date_fns = require("date-fns");
 
 // src/components/ui/calendar.tsx
-var React3 = __toESM(require("react"));
+var React4 = __toESM(require("react"));
 var import_react_day_picker = require("react-day-picker");
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 function Calendar2({
   className,
   classNames,
@@ -27816,7 +28010,7 @@ function Calendar2({
   ...props
 }) {
   const defaultClassNames = (0, import_react_day_picker.getDefaultClassNames)();
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
     import_react_day_picker.DayPicker,
     {
       showOutsideDays,
@@ -27915,7 +28109,7 @@ function Calendar2({
       },
       components: {
         Root: ({ className: className2, rootRef, ...props2 }) => {
-          return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
             "div",
             {
               "data-slot": "calendar",
@@ -27927,10 +28121,10 @@ function Calendar2({
         },
         Chevron: ({ className: className2, orientation, ...props2 }) => {
           if (orientation === "left") {
-            return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ChevronLeft, { className: cn("size-4", className2), ...props2 });
+            return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ChevronLeft, { className: cn("size-4", className2), ...props2 });
           }
           if (orientation === "right") {
-            return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
               ChevronRight,
               {
                 className: cn("size-4", className2),
@@ -27938,11 +28132,11 @@ function Calendar2({
               }
             );
           }
-          return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ChevronDown, { className: cn("size-4", className2), ...props2 });
+          return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ChevronDown, { className: cn("size-4", className2), ...props2 });
         },
         DayButton: CalendarDayButton,
         WeekNumber: ({ children, ...props2 }) => {
-          return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("td", { ...props2, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "flex size-(--cell-size) items-center justify-center text-center", children }) });
+          return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("td", { ...props2, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "flex size-(--cell-size) items-center justify-center text-center", children }) });
         },
         ...components
       },
@@ -27957,11 +28151,11 @@ function CalendarDayButton({
   ...props
 }) {
   const defaultClassNames = (0, import_react_day_picker.getDefaultClassNames)();
-  const ref = React3.useRef(null);
-  React3.useEffect(() => {
+  const ref = React4.useRef(null);
+  React4.useEffect(() => {
     if (modifiers.focused) ref.current?.focus();
   }, [modifiers.focused]);
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
     Button,
     {
       ref,
@@ -27984,16 +28178,16 @@ function CalendarDayButton({
 
 // src/components/ui/popover.tsx
 var PopoverPrimitive = __toESM(require("@radix-ui/react-popover"));
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 function Popover({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(PopoverPrimitive.Root, { "data-slot": "popover", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(PopoverPrimitive.Root, { "data-slot": "popover", ...props });
 }
 function PopoverTrigger({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
 }
 function PopoverContent({
   className,
@@ -28001,7 +28195,7 @@ function PopoverContent({
   sideOffset = 4,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(PopoverPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(PopoverPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
     PopoverPrimitive.Content,
     {
       "data-slot": "popover-content",
@@ -28017,24 +28211,29 @@ function PopoverContent({
 }
 
 // src/components/Inputs/DateRange/DateRange.tsx
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 var DateRange = ({ className, style, ...props }) => {
   const isDateRange = (val) => !!val && val.from instanceof Date;
-  const [date, setDate] = React4.useState(
+  const [date, setDate] = import_react24.default.useState(
     isDateRange(props.value) ? props.value : {
       from: /* @__PURE__ */ new Date(),
       to: (0, import_date_fns.addDays)(/* @__PURE__ */ new Date(), 7)
     }
   );
+  (0, import_react24.useEffect)(() => {
+    if (props.value && isDateRange(props.value)) {
+      handleChange?.(props.value);
+    }
+  }, []);
   const handleChange = (value) => {
     setDate(value);
     if (value) {
       props.onChange?.(value);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_jsx_runtime42.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className, style, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(Popover, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_jsx_runtime44.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className, style, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(Popover, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
         Button,
         {
           id: "date",
@@ -28043,15 +28242,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_runtime42.jsxs)(import_jsx_runtime42.Fragment, { children: [
+          children: date?.from ? date.to ? /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_jsx_runtime44.Fragment, { children: [
             (0, import_date_fns.format)(date.from, "LLL dd, y"),
             " -",
             " ",
             (0, import_date_fns.format)(date.to, "LLL dd, y")
-          ] }) : (0, import_date_fns.format)(date.from, "LLL dd, y") : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { children: "Pick a date range" })
+          ] }) : (0, import_date_fns.format)(date.from, "LLL dd, y") : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { children: "Pick a date range" })
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(PopoverContent, { className: "w-auto p-0", align: "start", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(PopoverContent, { className: "w-auto p-0", align: "start", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
         Calendar2,
         {
           mode: "range",
@@ -28062,24 +28261,31 @@ var DateRange = ({ className, style, ...props }) => {
         }
       ) })
     ] }) }),
-    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_runtime44.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_jsx_runtime43 = require("react/jsx-runtime");
+var import_react25 = require("react");
+var import_jsx_runtime45 = 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_react25.useEffect)(() => {
+    if (props.value !== void 0) {
+      const e = { target: { value: props.value } };
+      handleChange?.(e);
+    }
+  }, []);
   const handleChange = (e) => {
     props.onChange?.(e);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_jsx_runtime43.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_jsx_runtime45.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
       "div",
       {
         className: cn(
@@ -28089,8 +28295,8 @@ var TextInputGroup = ({ className, style, prepend, append, ...props }) => {
           props.errorMessage ? "border-red-500" : ""
         ),
         children: [
-          prepend && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "px-3 flex items-center bg-gray-500 text-white h-10 rounded-l-md", children: prepend }),
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+          prepend && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "px-3 flex items-center bg-gray-500 text-white h-10 rounded-l-md", children: prepend }),
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
             Input,
             {
               id: props.name || "prepend-input",
@@ -28112,30 +28318,30 @@ var TextInputGroup = ({ className, style, prepend, append, ...props }) => {
               readOnly: isReadonly
             }
           ),
-          append && /* @__PURE__ */ (0, import_jsx_runtime43.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_runtime45.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_runtime43.jsx)("p", { className: "mt-1 text-xs text-red-500", children: props.errorMessage })
+    props.errorMessage && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("p", { className: "mt-1 text-xs text-red-500", children: props.errorMessage })
   ] });
 };
 var TextInputGroup_default = TextInputGroup;
 
 // src/components/DataDisplay/Table/Table.tsx
-var import_react7 = require("react");
+var import_react26 = require("react");
 
 // src/components/ui/data-table.tsx
 var import_react_table = require("@tanstack/react-table");
 
 // src/components/ui/table.tsx
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var import_jsx_runtime46 = require("react/jsx-runtime");
 function Table3({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime46.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_runtime44.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
         "table",
         {
           "data-slot": "table",
@@ -28147,7 +28353,7 @@ function Table3({ className, ...props }) {
   );
 }
 function TableHeader({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
     "thead",
     {
       "data-slot": "table-header",
@@ -28160,7 +28366,7 @@ function TableHeader({ className, ...props }) {
   );
 }
 function TableBody({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
     "tbody",
     {
       "data-slot": "table-body",
@@ -28173,7 +28379,7 @@ function TableBody({ className, ...props }) {
   );
 }
 function TableRow({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
     "tr",
     {
       "data-slot": "table-row",
@@ -28186,7 +28392,7 @@ function TableRow({ className, ...props }) {
   );
 }
 function TableHead({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
     "th",
     {
       "data-slot": "table-head",
@@ -28199,7 +28405,7 @@ function TableHead({ className, ...props }) {
   );
 }
 function TableCell({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
     "td",
     {
       "data-slot": "table-cell",
@@ -28213,7 +28419,7 @@ function TableCell({ className, ...props }) {
 }
 
 // src/components/ui/data-table.tsx
-var import_jsx_runtime45 = require("react/jsx-runtime");
+var import_jsx_runtime47 = require("react/jsx-runtime");
 function DataTable({
   columns,
   rowActions,
@@ -28238,14 +28444,14 @@ function DataTable({
       onCellClick(rowData, columnId);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "overflow-hidden rounded-md border w-full", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(Table3, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(TableRow, { children: headerGroup.headers.map((header) => {
-      return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(TableHead, { children: header.isPlaceholder ? null : (0, import_react_table.flexRender)(
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "overflow-hidden rounded-md border w-full", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(Table3, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(TableRow, { children: headerGroup.headers.map((header) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(TableHead, { children: header.isPlaceholder ? null : (0, import_react_table.flexRender)(
         header.column.columnDef.header,
         header.getContext()
       ) }, header.id);
     }) }, headerGroup.id)) }),
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(TableBody, { children: loading ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(TableCell, { colSpan: columns.length, className: "h-24 text-center", children: "Loading..." }) }) : /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_jsx_runtime45.Fragment, { children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(TableBody, { children: loading ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(TableCell, { colSpan: columns.length, className: "h-24 text-center", children: "Loading..." }) }) : /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_jsx_runtime47.Fragment, { children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
       TableRow,
       {
         "data-state": row.getIsSelected() && "selected",
@@ -28255,7 +28461,7 @@ function DataTable({
             const isCellClickable = cellClickEnabled(row.original, cell.column.id);
             const dynamicClass = cell.column.columnDef.meta?.cellClass || "";
             const dynamicStyle = cell.column.columnDef.meta?.cellStyle || {};
-            return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
               TableCell,
               {
                 className: `${dynamicClass} ${isCellClickable ? "underline cursor-pointer" : ""}`,
@@ -28270,18 +28476,18 @@ function DataTable({
               cell.id
             );
           }),
-          rowActions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "absolute top-0 right-0 bg-white py-3 min-w-[100px] z-50 shadow-md flex items-center justify-center gap-3 p-2 opacity-0 group-hover:opacity-100 duration-300 h-full", children: rowActions.map((action, index) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("p", { className: "text-[#383838] text-[12px] cursor-pointer font-[400]", children: action.header }, index)) })
+          rowActions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "absolute top-0 right-0 bg-white py-3 min-w-[100px] z-50 shadow-md flex items-center justify-center gap-3 p-2 opacity-0 group-hover:opacity-100 duration-300 h-full", children: rowActions.map((action, index) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("p", { className: "text-[#383838] text-[12px] cursor-pointer font-[400]", children: action.header }, index)) })
         ]
       },
       row.id
-    )) : /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(TableCell, { colSpan: columns.length, className: "h-24 text-center", children: "No results." }) }) }) })
+    )) : /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(TableCell, { colSpan: columns.length, className: "h-24 text-center", children: "No results." }) }) }) })
   ] }) });
 }
 
 // src/components/ui/pagination.tsx
-var import_jsx_runtime46 = require("react/jsx-runtime");
+var import_jsx_runtime48 = require("react/jsx-runtime");
 function Pagination({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
     "nav",
     {
       role: "navigation",
@@ -28296,7 +28502,7 @@ function PaginationContent({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
     "ul",
     {
       "data-slot": "pagination-content",
@@ -28306,7 +28512,7 @@ function PaginationContent({
   );
 }
 function PaginationItem({ ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("li", { "data-slot": "pagination-item", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("li", { "data-slot": "pagination-item", ...props });
 }
 function PaginationLink({
   className,
@@ -28314,7 +28520,7 @@ function PaginationLink({
   size = "icon",
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
     "a",
     {
       "aria-current": isActive ? "page" : void 0,
@@ -28335,7 +28541,7 @@ function PaginationPrevious({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
     PaginationLink,
     {
       "aria-label": "Go to previous page",
@@ -28343,8 +28549,8 @@ function PaginationPrevious({
       className: cn("gap-1 px-2.5 sm:pl-2.5", className),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(ChevronLeft, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "hidden sm:block", children: "Previous" })
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ChevronLeft, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "hidden sm:block", children: "Previous" })
       ]
     }
   );
@@ -28353,7 +28559,7 @@ function PaginationNext({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
     PaginationLink,
     {
       "aria-label": "Go to next page",
@@ -28361,8 +28567,8 @@ function PaginationNext({
       className: cn("gap-1 px-2.5 sm:pr-2.5", className),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "hidden sm:block", children: "Next" }),
-        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(ChevronRight, {})
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "hidden sm:block", children: "Next" }),
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ChevronRight, {})
       ]
     }
   );
@@ -28371,7 +28577,7 @@ function PaginationEllipsis({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
     "span",
     {
       "aria-hidden": true,
@@ -28379,15 +28585,15 @@ function PaginationEllipsis({
       className: cn("flex size-9 items-center justify-center", className),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Ellipsis, { className: "size-4" }),
-        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "sr-only", children: "More pages" })
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Ellipsis, { className: "size-4" }),
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "sr-only", children: "More pages" })
       ]
     }
   );
 }
 
 // src/components/DataDisplay/Pagination/Pagination.tsx
-var import_jsx_runtime47 = require("react/jsx-runtime");
+var import_jsx_runtime49 = require("react/jsx-runtime");
 var CustomPagination = ({
   totalPages,
   currentPage,
@@ -28433,10 +28639,10 @@ var CustomPagination = ({
     }
   };
   const pageNumbers = getPageNumbers();
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "flex flex-row gap-1 w-full items-center justify-between", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("p", { className: "text-sm text-muted-foreground whitespace-nowrap", children: "Items per page:" }),
-      /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex flex-row gap-1 w-full items-center justify-between", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("p", { className: "text-sm text-muted-foreground whitespace-nowrap", children: "Items per page:" }),
+      /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
         Select,
         {
           defaultValue: String(perPage),
@@ -28444,26 +28650,26 @@ var CustomPagination = ({
             onPageChange({ page: 1, itemsPerPage: Number(value) });
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(SelectTrigger, { className: "w-[100px]", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(SelectValue, { placeholder: "Select" }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(SelectContent, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(SelectItem, { value: "5", children: "5" }),
-              /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(SelectItem, { value: "10", children: "10" }),
-              /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(SelectItem, { value: "20", children: "20" }),
-              /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(SelectItem, { value: "50", children: "50" })
+            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(SelectTrigger, { className: "w-[100px]", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(SelectValue, { placeholder: "Select" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(SelectContent, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(SelectItem, { value: "5", children: "5" }),
+              /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(SelectItem, { value: "10", children: "10" }),
+              /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(SelectItem, { value: "20", children: "20" }),
+              /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(SelectItem, { value: "50", children: "50" })
             ] })
           ]
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Pagination, { className: "justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(PaginationContent, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(PaginationItem, { children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Pagination, { className: "justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(PaginationContent, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(PaginationItem, { children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
         PaginationPrevious,
         {
           onClick: () => handlePageChange(currentPage - 1),
           className: currentPage === 1 ? "pointer-events-none opacity-50" : "cursor-pointer"
         }
       ) }),
-      pageNumbers.map((pageNumber, index) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(PaginationItem, { children: pageNumber === "..." ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(PaginationEllipsis, {}) : /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+      pageNumbers.map((pageNumber, index) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(PaginationItem, { children: pageNumber === "..." ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(PaginationEllipsis, {}) : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
         PaginationLink,
         {
           onClick: () => handlePageChange(pageNumber),
@@ -28472,7 +28678,7 @@ var CustomPagination = ({
           children: pageNumber
         }
       ) }, index)),
-      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(PaginationItem, { children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(PaginationItem, { children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
         PaginationNext,
         {
           onClick: () => handlePageChange(currentPage + 1),
@@ -28485,7 +28691,7 @@ var CustomPagination = ({
 var Pagination_default = CustomPagination;
 
 // src/components/DataDisplay/Table/Table.tsx
-var import_jsx_runtime48 = require("react/jsx-runtime");
+var import_jsx_runtime50 = require("react/jsx-runtime");
 var Table4 = ({
   columns,
   data,
@@ -28505,9 +28711,9 @@ var Table4 = ({
   const rawData = Array.isArray(data) ? data : [];
   const rawRowActions = Array.isArray(rowActions) ? rowActions : [];
   const isControlled = typeof page === "number";
-  const [internalPage, setInternalPage] = (0, import_react7.useState)(1);
+  const [internalPage, setInternalPage] = (0, import_react26.useState)(1);
   const currentPage = isControlled ? page : internalPage;
-  (0, import_react7.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     if (isControlled) return;
     if (currentPage > 1 && !pagination) setInternalPage(1);
   }, [pagination, isControlled]);
@@ -28531,8 +28737,8 @@ var Table4 = ({
     if (!selectedColumn) return false;
     return selectedColumn.isClickable ?? false;
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: `${className || ""} space-y-3`, style, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: `${className || ""} space-y-3`, style, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
       DataTable,
       {
         ...props,
@@ -28543,7 +28749,7 @@ var Table4 = ({
         cellClickEnabled: isCellClickEnabled
       }
     ),
-    enablePagination && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+    enablePagination && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
       Pagination_default,
       {
         perPage: itemsPerPage,
@@ -28558,7 +28764,7 @@ var Table_default = Table4;
 
 // src/components/Navigation/Tabs/Tabs.tsx
 var import_link5 = __toESM(require("next/link"));
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_jsx_runtime51 = require("react/jsx-runtime");
 var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode }) => {
   const rawTabs = Array.isArray(tabs) ? tabs : [];
   const baseClasses = "text-[12px] text-foreground p-2 text-center rounded-md transition-colors";
@@ -28571,23 +28777,23 @@ var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode }) => {
   const renderDesktopTab = (tab, index) => {
     const finalClasses = [baseClasses, isActive(tab.url) ? activeClasses : hoverClasses, tab.className || ""].join(" ");
     if (Array.isArray(tab.children) && tab.children.length > 0 && tab.isDropDown) {
-      return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(DropdownMenu, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(DropdownMenuTrigger, { className: `${finalClasses} inline-flex items-center gap-1`, children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(DropdownMenu, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(DropdownMenuTrigger, { className: `${finalClasses} inline-flex items-center gap-1`, children: [
           tab.header,
-          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ChevronDown, { className: "h-4 w-4 opacity-80" })
+          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(ChevronDown, { className: "h-4 w-4 opacity-80" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
           DropdownMenuContent,
           {
             align: "start",
             sideOffset: 6,
             className: "z-50 min-w-[160px] rounded-md border border-gray-200 bg-white p-1 shadow-lg",
-            children: tab.children.map((item) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+            children: tab.children.map((item) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
               DropdownMenuItem,
               {
                 asChild: true,
                 className: "cursor-pointer rounded-sm px-3 py-2 text-[12px] text-gray-800 hover:bg-gray-100 focus:bg-gray-100",
-                children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_link5.default, { href: item.url || "#", children: item.header })
+                children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_link5.default, { href: item.url || "#", children: item.header })
               },
               item.id
             ))
@@ -28595,14 +28801,14 @@ var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode }) => {
         )
       ] }, index);
     }
-    return tab.url ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_link5.default, { href: tab.url, className: finalClasses, style: tab.style, children: tab.header }, index) : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: finalClasses, style: tab.style, role: "button", tabIndex: 0, children: tab.header }, index);
+    return tab.url ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_link5.default, { href: tab.url, className: finalClasses, style: tab.style, children: tab.header }, index) : /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: finalClasses, style: tab.style, role: "button", tabIndex: 0, children: tab.header }, index);
   };
-  const renderMobileMenu = () => /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(DropdownMenu, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime49.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_runtime49.jsx)(Menu, { className: "h-4 w-4" }),
+  const renderMobileMenu = () => /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(DropdownMenu, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime51.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_runtime51.jsx)(Menu, { className: "h-4 w-4" }),
       "Menu"
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
       DropdownMenuContent,
       {
         align: "start",
@@ -28611,25 +28817,25 @@ var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode }) => {
         children: rawTabs.map((tab, i) => {
           const hasChildren = Array.isArray(tab.children) && tab.children.length > 0 && tab.isDropDown;
           if (hasChildren) {
-            return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(DropdownMenuSub, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime49.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_runtime49.jsx)(DropdownMenuSubContent, { className: "bg-white border shadow-lg rounded-md p-1", children: tab.children.map((item) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(DropdownMenuSub, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime51.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_runtime51.jsx)(DropdownMenuSubContent, { className: "bg-white border shadow-lg rounded-md p-1", children: tab.children.map((item) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
                 DropdownMenuItem,
                 {
                   asChild: true,
                   className: "cursor-pointer rounded-sm px-3 py-2 text-[12px] text-gray-800 hover:bg-gray-100",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_link5.default, { href: item.url || "#", children: item.header })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_link5.default, { href: item.url || "#", children: item.header })
                 },
                 item.id
               )) })
             ] }, i);
           }
-          return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime51.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_runtime49.jsx)(import_link5.default, { href: tab.url || "#", children: tab.header })
+              children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_link5.default, { href: tab.url || "#", children: tab.header })
             },
             i
           );
@@ -28639,56 +28845,56 @@ var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode }) => {
   ] });
   const forceMobile = canvasMode === "mobile" || canvasMode === "tablet";
   const forceDesktop = canvasMode === "desktop";
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className, style, children: [
-    forceDesktop && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "hidden md:flex", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: `flex gap-2 ${verticalMenu ? "flex-col items-start" : "flex-row"}`, children: rawTabs.map(renderDesktopTab) }) }),
-    forceMobile && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { children: renderMobileMenu() }),
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "md:hidden", children: renderMobileMenu() })
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className, style, children: [
+    forceDesktop && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "hidden md:flex", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: `flex gap-2 ${verticalMenu ? "flex-col items-start" : "flex-row"}`, children: rawTabs.map(renderDesktopTab) }) }),
+    forceMobile && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { children: renderMobileMenu() }),
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "md:hidden", children: renderMobileMenu() })
   ] });
 };
 var Tabs_default = Tabs;
 
 // src/components/Navigation/Stages/Stages.tsx
-var import_react8 = __toESM(require("react"));
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_react27 = __toESM(require("react"));
+var import_jsx_runtime52 = require("react/jsx-runtime");
 var StagesComponent = ({ stages, isShowBtn, buttonText, className, style }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className, style, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "flex items-center justify-between bg-red p-2 rounded-lg border border-gray-200 w-full", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("button", { className: "p-2 hover:bg-gray-100 rounded", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("svg", { className: "w-4 h-4 text-gray-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "flex items-center flex-1 px-2 flex-wrap gap-2", children: stages?.length > 0 && stages?.map((stage, index) => /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_react8.default.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className, style, children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "flex items-center justify-between bg-red p-2 rounded-lg border border-gray-200 w-full", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("button", { className: "p-2 hover:bg-gray-100 rounded", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("svg", { className: "w-4 h-4 text-gray-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "flex items-center flex-1 px-2 flex-wrap gap-2", children: stages?.length > 0 && stages?.map((stage, index) => /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_react27.default.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
         "button",
         {
           className: `min-w-[120px] px-4 py-2 rounded-full text-sm font-medium transition-colors duration-200 whitespace-nowrap ${stage.isActive ? "bg-[#034486] text-white shadow-md" : "bg-white text-gray-700 hover:bg-gray-100 border border-gray-200"}`,
           children: stage.header
         }
       ),
-      index < stages.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "flex-shrink-0 w-3 h-px bg-gray-300" })
+      index < stages.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "flex-shrink-0 w-3 h-px bg-gray-300" })
     ] }, stage.id)) }),
-    isShowBtn && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("button", { className: "bg-[#034486] text-white px-6 py-2 rounded-lg text-sm font-medium transition-colors duration-200 shadow-sm", children: buttonText }) })
+    isShowBtn && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("button", { className: "bg-[#034486] text-white px-6 py-2 rounded-lg text-sm font-medium transition-colors duration-200 shadow-sm", children: buttonText }) })
   ] }) });
 };
 var Stages_default = StagesComponent;
 
 // src/components/Navigation/Spacer/Spacer.tsx
-var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_jsx_runtime53 = require("react/jsx-runtime");
 var Spacer = ({ className, style }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: `${className}`, style });
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: `${className}`, style });
 };
 var Spacer_default = Spacer;
 
 // src/components/Navigation/Profile/Profile.tsx
-var import_jsx_runtime52 = require("react/jsx-runtime");
+var import_jsx_runtime54 = require("react/jsx-runtime");
 
 // src/components/Navigation/Notification/Notification.tsx
-var import_jsx_runtime53 = require("react/jsx-runtime");
+var import_jsx_runtime55 = require("react/jsx-runtime");
 
 // src/components/Navigation/Logo/Logo.tsx
-var import_jsx_runtime54 = require("react/jsx-runtime");
+var import_jsx_runtime56 = require("react/jsx-runtime");
 
 // src/components/ui/avatar.tsx
-var React6 = __toESM(require("react"));
+var React7 = __toESM(require("react"));
 var AvatarPrimitive = __toESM(require("@radix-ui/react-avatar"));
-var import_jsx_runtime55 = require("react/jsx-runtime");
-var Avatar = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+var import_jsx_runtime57 = require("react/jsx-runtime");
+var Avatar = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
   AvatarPrimitive.Root,
   {
     ref,
@@ -28700,7 +28906,7 @@ var Avatar = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
   }
 ));
 Avatar.displayName = AvatarPrimitive.Root.displayName;
-var AvatarImage = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+var AvatarImage = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
   AvatarPrimitive.Image,
   {
     ref,
@@ -28709,7 +28915,7 @@ var AvatarImage = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 AvatarImage.displayName = AvatarPrimitive.Image.displayName;
-var AvatarFallback = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+var AvatarFallback = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
   AvatarPrimitive.Fallback,
   {
     ref,
@@ -28725,7 +28931,8 @@ AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
 // src/components/Navigation/Navbar/Navbar.tsx
 var import_link6 = __toESM(require("next/link"));
 var import_image3 = __toESM(require("next/image"));
-var import_jsx_runtime56 = require("react/jsx-runtime");
+var import_react_dropdown_menu = require("@radix-ui/react-dropdown-menu");
+var import_jsx_runtime58 = require("react/jsx-runtime");
 function Navbar({
   style,
   badgeType,
@@ -28737,12 +28944,13 @@ function Navbar({
   altText = "Logo",
   canvasMode = "desktop",
   list = [],
+  profileMenu = [],
   userName = "Guest User"
 }) {
   const isMobileView = canvasMode === "mobile" || canvasMode === "tablet";
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("nav", { className: "w-full border-b bg-white shadow-sm", style, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "mx-auto flex max-w-7xl items-center justify-between px-4 py-4", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_link6.default, { href: "/", className: "flex items-center space-x-2", children: imageUrl ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_image3.default, { src: imageUrl, alt: altText, width: 200, height: 200 }) : /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "font-semibold text-blue-700", children: "Logo" }) }),
-    !isMobileView && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "flex items-center space-x-6 sm:hidden md:flex", children: list.map((item) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("nav", { className: "w-full border-b bg-white shadow-sm", style, children: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "mx-auto flex max-w-7xl items-center justify-between px-4 py-4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_link6.default, { href: "/", className: "flex items-center space-x-2", children: imageUrl ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_image3.default, { src: imageUrl, alt: altText, width: 200, height: 200 }) : /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "font-semibold text-blue-700", children: "Logo" }) }),
+    !isMobileView && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "flex items-center space-x-6 sm:hidden md:flex", children: list.map((item) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
       import_link6.default,
       {
         href: item.url || "#",
@@ -28751,54 +28959,60 @@ function Navbar({
       },
       item.id
     )) }),
-    /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "flex items-center space-x-3", children: [
-      !isMobileView ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "flex-1 px-6", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "relative w-full max-w-md border border-gray-300 rounded-md", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" }),
-        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Input, { placeholder: "Search", className: "pl-9 text-gray-400" })
-      ] }) }) : /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "flex items-center space-x-3", children: [
+      !isMobileView ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "flex-1 px-6", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "relative w-full max-w-md border border-gray-300 rounded-md", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" }),
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Input, { placeholder: "Search", className: "pl-9 text-gray-400" })
+      ] }) }) : /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
         Button,
         {
           variant: "ghost",
           size: "icon",
           className: "border border-gray-400",
-          children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Search, { className: "h-5 w-5 text-gray-400" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Search, { className: "h-5 w-5 text-gray-400" })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "relative bg-[#E9E9E9] rounded-md", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Button, { variant: "ghost", size: "icon", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Bell, { className: "h-5 w-5 text-[#1C1B1F]" }) }),
-        badgeType === "number" && !(hideBadgeWhenZero && badgeCount === 0) && Number(badgeCount) > 0 ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "absolute -top-1 -right-1 flex h-4 w-4 items-center justify-center rounded-full bg-red-500 text-[10px] text-white leading-8", children: badgeCount }) : /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "absolute -top-1 -right-1 flex h-2 w-2 items-center justify-center rounded-full bg-red-500" })
+      /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "relative bg-[#E9E9E9] rounded-md", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Button, { variant: "ghost", size: "icon", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Bell, { className: "h-5 w-5 text-[#1C1B1F]" }) }),
+        badgeType === "number" && !(hideBadgeWhenZero && badgeCount === 0) && Number(badgeCount) > 0 ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "absolute -top-1 -right-1 flex h-4 w-4 items-center justify-center rounded-full bg-red-500 text-[10px] text-white leading-8", children: badgeCount }) : /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "absolute -top-1 -right-1 flex h-2 w-2 items-center justify-center rounded-full bg-red-500" })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(DropdownMenu, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "flex items-center space-x-2", children: [
-          !isMobileView && showName && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("h4", { className: "text-[#000000] text-[13px] font-[500] mb-0", children: userName }),
-          !isMobileView ? /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_jsx_runtime56.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Avatar, { className: "cursor-pointer h-8 w-8 text-gray-900", children: profileType === "avatar" ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(DropdownMenu, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "flex items-center space-x-2", children: [
+          !isMobileView && showName && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("h4", { className: "text-[#000000] text-[13px] font-[500] mb-0", children: userName }),
+          !isMobileView ? /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_jsx_runtime58.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Avatar, { className: "cursor-pointer h-8 w-8 text-gray-900", children: profileType === "avatar" ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
               AvatarImage,
               {
                 src: "/images/appbuilder/toolset/profile.svg",
                 alt: "Profile"
               }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "w-8 h-8 bg-[#12715b] rounded-full text-[#fff] text-center text-[11px] flex items-center justify-center", children: userName && getInitials(userName) }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+            ) : /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "w-8 h-8 bg-[#12715b] rounded-full text-[#fff] text-center text-[11px] flex items-center justify-center", children: userName && getInitials(userName) }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
               Button,
               {
                 variant: "ghost",
                 size: "icon",
                 className: "text-gray-900 md:hidden",
-                children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Menu, { className: "h-6 w-6" })
+                children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Menu, { className: "h-6 w-6" })
               }
             )
-          ] }) : /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
             Button,
             {
               variant: "ghost",
               size: "icon",
               className: "text-gray-900",
-              children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Menu, { className: "h-6 w-6" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Menu, { className: "h-6 w-6" })
             }
           )
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(DropdownMenuContent, { align: "end", className: "bg-white", children: list && list.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_jsx_runtime56.Fragment, { children: list.map((item) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(DropdownMenuItem, { className: "text-black", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_link6.default, { href: item.url || "#", children: item.header }) }, item.id)) }) })
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(DropdownMenuContent, { align: "end", className: "bg-white", children: [
+          profileMenu && profileMenu.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_jsx_runtime58.Fragment, { children: profileMenu.map((item) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(DropdownMenuItem, { className: "text-black", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_link6.default, { href: item.url || "#", children: item.header }) }, item.id)) }),
+          /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "md:hidden", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_react_dropdown_menu.DropdownMenuSeparator, {}),
+            list && list.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_jsx_runtime58.Fragment, { children: list.map((item) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(DropdownMenuItem, { className: "text-black", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_link6.default, { href: item.url || "#", children: item.header }) }, item.id)) })
+          ] })
+        ] })
       ] })
     ] })
   ] }) });
@@ -28806,28 +29020,28 @@ function Navbar({
 
 // src/components/Chart/BarChart.tsx
 var import_recharts = require("recharts");
-var import_jsx_runtime57 = require("react/jsx-runtime");
+var import_jsx_runtime59 = require("react/jsx-runtime");
 var ChartComponent = ({ className, style, ...props }) => {
   const data = Array.isArray(props?.data) ? props.data : [];
   const chartType = props.chartType || "bar";
   const legendsPosition = props.legendsPosition === "middle" || props.legendsPosition === "bottom" ? props.legendsPosition : "top";
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: `${className} h-[400px]`, style, children: data.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_recharts.ResponsiveContainer, { width: "100%", height: "100%", children: chartType === "bar" ? /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_recharts.BarChart, { data, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_recharts.CartesianGrid, { strokeDasharray: "3 3" }),
-    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_recharts.XAxis, { dataKey: "name" }),
-    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_recharts.YAxis, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_recharts.Tooltip, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_recharts.Legend, { verticalAlign: legendsPosition, align: "center" }),
-    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_recharts.Bar, { dataKey: "value", fill: "#00695C" })
-  ] }) : /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_recharts.AreaChart, { data, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("linearGradient", { id: "colorCount", x1: "0", y1: "0", x2: "0", y2: "1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("stop", { offset: "5%", stopColor: "#00695C", stopOpacity: 0.8 }),
-      /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("stop", { offset: "95%", stopColor: "#00695C", stopOpacity: 0 })
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: `${className} h-[400px]`, style, children: data.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_recharts.ResponsiveContainer, { width: "100%", height: "100%", children: chartType === "bar" ? /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_recharts.BarChart, { data, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_recharts.CartesianGrid, { strokeDasharray: "3 3" }),
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_recharts.XAxis, { dataKey: "name" }),
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_recharts.YAxis, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_recharts.Tooltip, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_recharts.Legend, { verticalAlign: legendsPosition, align: "center" }),
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_recharts.Bar, { dataKey: "value", fill: "#00695C" })
+  ] }) : /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_recharts.AreaChart, { data, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("linearGradient", { id: "colorCount", x1: "0", y1: "0", x2: "0", y2: "1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("stop", { offset: "5%", stopColor: "#00695C", stopOpacity: 0.8 }),
+      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("stop", { offset: "95%", stopColor: "#00695C", stopOpacity: 0 })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_recharts.CartesianGrid, { strokeDasharray: "3 3" }),
-    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_recharts.XAxis, { dataKey: "name" }),
-    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_recharts.YAxis, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_recharts.Tooltip, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_recharts.CartesianGrid, { strokeDasharray: "3 3" }),
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_recharts.XAxis, { dataKey: "name" }),
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_recharts.YAxis, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_recharts.Tooltip, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
       import_recharts.Area,
       {
         type: "monotone",
@@ -28843,7 +29057,7 @@ var BarChart_default = ChartComponent;
 
 // src/components/Chart/PieChart.tsx
 var import_recharts2 = require("recharts");
-var import_jsx_runtime58 = require("react/jsx-runtime");
+var import_jsx_runtime60 = require("react/jsx-runtime");
 var DonutChart = ({ className, style, ...props }) => {
   const data = Array.isArray(props?.data) ? props.data : [];
   const total = data.reduce((sum, d) => sum + d.value, 0);
@@ -28854,7 +29068,7 @@ var DonutChart = ({ className, style, ...props }) => {
   const renderLabel = ({ value, x, y }) => {
     if (value == null) return null;
     const percentage = (Number(value) / total * 100).toFixed(0);
-    return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
       "text",
       {
         x,
@@ -28876,33 +29090,33 @@ var DonutChart = ({ className, style, ...props }) => {
   const wrapperClass = canvasMode ? forceDesktop ? "flex-row" : "flex-col" : "flex-col md:flex-row";
   const renderLegends = () => {
     if (!showLegends) return null;
-    return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_jsx_runtime58.Fragment, { children: data.map((d) => /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_jsx_runtime60.Fragment, { children: data.map((d) => /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
       "div",
       {
         className: "flex items-center space-x-2 rounded-md border border-gray-200 px-3 py-2 w-[48%] md:w-auto",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
             "span",
             {
               className: "inline-block w-[16px] h-[16px] rounded",
               style: { backgroundColor: d.color }
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "text-[#000000] text-[12px] md:text-[13px] font-[500]", children: d.name })
+          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { className: "text-[#000000] text-[12px] md:text-[13px] font-[500]", children: d.name })
         ]
       },
       d.name
     )) });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
     "div",
     {
       className: `relative flex items-center ${wrapperClass} ${className}`,
       style,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "relative w-full md:w-[70%] h-[300px] md:h-[400px] flex items-center justify-center", children: [
-          data.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_recharts2.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_recharts2.PieChart, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "relative w-full md:w-[70%] h-[300px] md:h-[400px] flex items-center justify-center", children: [
+          data.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_recharts2.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_recharts2.PieChart, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
               import_recharts2.Pie,
               {
                 data,
@@ -28914,8 +29128,8 @@ var DonutChart = ({ className, style, ...props }) => {
                 labelLine: false,
                 isAnimationActive: false,
                 children: [
-                  data.map((entry, index) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_recharts2.Cell, { fill: entry.color }, `cell-${index}`)),
-                  /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+                  data.map((entry, index) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_recharts2.Cell, { fill: entry.color }, `cell-${index}`)),
+                  /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
                     import_recharts2.LabelList,
                     {
                       dataKey: "value",
@@ -28926,14 +29140,14 @@ var DonutChart = ({ className, style, ...props }) => {
                 ]
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_recharts2.Tooltip, { formatter: (value, name) => [`${value}k`, name] })
+            /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_recharts2.Tooltip, { formatter: (value, name) => [`${value}k`, name] })
           ] }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-2xl md:text-4xl font-bold text-[#000]", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-2xl md:text-4xl font-bold text-[#000]", children: [
             total,
             "k"
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: `flex ${forceDesktop ? "flex-col ml-auto space-y-3" : "flex-wrap justify-center gap-2 mt-4"}
+        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: `flex ${forceDesktop ? "flex-col ml-auto space-y-3" : "flex-wrap justify-center gap-2 mt-4"}
             w-full md:w-auto`, children: renderLegends() })
       ]
     }
@@ -28942,10 +29156,10 @@ var DonutChart = ({ className, style, ...props }) => {
 var PieChart_default = DonutChart;
 
 // src/components/Blocks/EmailComposer.tsx
-var import_jsx_runtime59 = require("react/jsx-runtime");
+var import_jsx_runtime61 = 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_runtime59.jsx)("div", { className, style, children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "border rounded-md shadow bg-[#fff] p-4 mx-auto z-[50] relative", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "mb-3", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className, style, children: /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "border rounded-md shadow bg-[#fff] p-4 mx-auto z-[50] relative", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "mb-3", children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
       "input",
       {
         type: "email",
@@ -28954,8 +29168,8 @@ function EmailComposer({ className, style, to, setTo, showCc, setShowCc, showBcc
         required: true
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "mb-3", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "mb-3", children: /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
         "input",
         {
           type: "email",
@@ -28966,7 +29180,7 @@ function EmailComposer({ className, style, to, setTo, showCc, setShowCc, showBcc
           required: true
         }
       ),
-      !showCc && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+      !showCc && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
         "button",
         {
           onClick: () => setShowCc?.(true),
@@ -28974,7 +29188,7 @@ function EmailComposer({ className, style, to, setTo, showCc, setShowCc, showBcc
           children: "Cc"
         }
       ),
-      !showBcc && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+      !showBcc && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
         "button",
         {
           onClick: () => setShowBcc?.(true),
@@ -28983,7 +29197,7 @@ function EmailComposer({ className, style, to, setTo, showCc, setShowCc, showBcc
         }
       )
     ] }) }),
-    showCc && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "mb-3", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+    showCc && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "mb-3", children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
       "input",
       {
         type: "text",
@@ -28993,7 +29207,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_runtime59.jsx)("div", { className: "mb-3", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+    showBcc && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "mb-3", children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
       "input",
       {
         type: "text",
@@ -29003,7 +29217,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_runtime59.jsx)("div", { className: "mb-3", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "mb-3", children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
       "input",
       {
         type: "text",
@@ -29013,11 +29227,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_runtime59.jsx)("div", { className: "mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(MyEditor, { value: body, onChange: setBody }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "flex justify-end gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("button", { className: "px-4 py-2 rounded-md text-gray-600 hover:bg-gray-100", children: "Discard" }),
-      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("button", { className: "px-4 py-2 rounded-md border text-[#12715B] border-[#12715B]", children: "Reset" }),
-      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("button", { className: "px-4 py-2 rounded-md bg-[#12715B] text-white", children: "Send" })
+    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(MyEditor, { value: body, onChange: setBody }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "flex justify-end gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("button", { className: "px-4 py-2 rounded-md text-gray-600 hover:bg-gray-100", children: "Discard" }),
+      /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("button", { className: "px-4 py-2 rounded-md border text-[#12715B] border-[#12715B]", children: "Reset" }),
+      /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("button", { className: "px-4 py-2 rounded-md bg-[#12715B] text-white", children: "Send" })
     ] })
   ] }) });
 }
@@ -29094,6 +29308,8 @@ function showSonnerToast({
   Spacer,
   Stages,
   SwitchToggle,
+  TabGroup,
+  TabList,
   Table,
   Tabs,
   Text,