@axzydev/axzy_ui_system 1.2.6 → 1.2.8

package/dist/index.cjs

@@ -440,21 +440,31 @@ var sizeMap = {
   lg: { container: "w-12 h-12", text: "text-base" },
   xl: { container: "w-16 h-16", text: "text-xl" }
 };
+var DEFAULT_COLOR = "bg-primary-600";
+var DEFAULT_BG = "var(--color-primary-600)";
+var DEFAULT_SHADOW = "0 4px 14px 0 rgba(37, 99, 235, 0.35)";
 function ITAvatar({
   src,
   alt = "",
   initials,
   size = "md",
-  color = "bg-primary-500",
+  color = DEFAULT_COLOR,
   className,
   badge,
   onClick
 }) {
   const { container, text } = sizeMap[size];
+  const useInlineStyle = !color || color === DEFAULT_COLOR;
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     "div",
     {
-      className: (0, import_clsx2.default)("relative inline-flex items-center justify-center rounded-full flex-shrink-0", container, className),
+      className: (0, import_clsx2.default)(
+        "relative inline-flex items-center justify-center rounded-full flex-shrink-0 overflow-hidden text-white font-bold tracking-wide",
+        container,
+        !useInlineStyle && color,
+        className
+      ),
+      style: useInlineStyle ? { backgroundColor: DEFAULT_BG, boxShadow: DEFAULT_SHADOW } : void 0,
       onClick,
       role: onClick ? "button" : void 0,
       tabIndex: onClick ? 0 : void 0,
@@ -469,7 +479,7 @@ function ITAvatar({
               e.currentTarget.style.display = "none";
             }
           }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: (0, import_clsx2.default)("w-full h-full rounded-full flex items-center justify-center text-white font-semibold", text, color), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ITText, { as: "span", children: initials || alt.charAt(0).toUpperCase() || "?" }) }),
+        ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: (0, import_clsx2.default)("flex items-center justify-center w-full h-full", text), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ITText, { as: "span", className: "text-white", children: initials || alt.charAt(0).toUpperCase() || "?" }) }),
         badge && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "absolute -bottom-0.5 -right-0.5", children: badge })
       ]
     }
@@ -1812,7 +1822,7 @@ function ITConfirmDialog({
 // src/types/table.types.ts
 var variantStyles = {
   default: "",
-  striped: "divide-y divide-gray-200",
+  striped: "",
   bordered: "border border-gray-200"
 };
 var sizeStyles = {
@@ -1855,6 +1865,7 @@ function getGridColsClass(columns) {
   return gridColsClasses[columns] || "grid-cols-12";
 }
 function getColSpanClass(span, maxCols) {
+  if (span == null) return `col-span-${maxCols}`;
   if (typeof span === "number") {
     return `col-span-${Math.min(span, maxCols)}`;
   }
@@ -2405,8 +2416,8 @@ function ITSelect({
       borderStyle: "solid",
       transition: "all 0.2s",
       color: "var(--input-text-color, var(--color-secondary-900))",
-      appearance: "none"
-      // Important for custom styling
+      appearance: "none",
+      colorScheme: "light dark"
     };
     if (disabled) {
       style.backgroundColor = inputTheme.disabled?.backgroundColor || style.backgroundColor;
@@ -2684,8 +2695,13 @@ function ITTable({
   size = "md",
   itemsPerPageOptions = [5, 10, 20],
   defaultItemsPerPage = 10,
-  title
+  title,
+  renderCard,
+  defaultView = "table",
+  showVerticalBorder = true,
+  verticalBorderClassname
 }) {
+  const [viewMode, setViewMode] = (0, import_react11.useState)(defaultView);
   const {
     currentPage,
     itemsPerPage,
@@ -2885,25 +2901,91 @@ function ITTable({
         return value;
     }
   };
+  const renderDefaultCard = (row) => {
+    const dataCols = columns.filter((c) => c.type !== "actions");
+    const actionCol = columns.find((c) => c.type === "actions");
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "bg-white dark:bg-slate-800 rounded-lg border border-slate-200 dark:border-slate-700 p-3 space-y-2 shadow-sm", children: [
+      dataCols.map((col) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-center justify-between gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "text-[10px] font-bold uppercase tracking-wider text-slate-400 whitespace-nowrap flex-shrink-0 min-w-[70px]", children: col.label }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "text-sm font-medium text-slate-800 dark:text-white text-right truncate", children: renderCellContent(col, row) })
+      ] }, col.key)),
+      actionCol?.actions && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "flex items-center justify-end gap-2 pt-2 border-t border-slate-100 dark:border-slate-700", children: actionCol.actions(row) })
+    ] });
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: (0, import_clsx14.default)("space-y-4 w-full", containerClassName), children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "rounded-xl shadow-sm overflow-hidden", style: { backgroundColor: "var(--color-table-rowBg, #ffffff)" }, children: [
-    title && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "px-6 py-5 border-b border-secondary-100", style: { backgroundColor: "var(--color-table-rowBg, #ffffff)" }, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ITText, { as: "h2", className: "text-xl font-bold text-secondary-900 leading-tight", children: title }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "overflow-x-auto", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+    title && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "px-6 py-5 flex items-center justify-between", style: { backgroundColor: "var(--color-table-rowBg, #ffffff)" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ITText, { as: "h2", className: "text-xl font-bold text-secondary-900 leading-tight", children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-center bg-slate-100 dark:bg-slate-800/80 rounded-lg p-0.5 border border-slate-200 dark:border-slate-700/50", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+          "button",
+          {
+            onClick: () => setViewMode("table"),
+            className: `flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-semibold transition-all ${viewMode === "table" ? "bg-white dark:bg-slate-900 text-slate-900 dark:text-white shadow-sm border border-slate-200/50 dark:border-slate-700" : "text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200"}`,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_fa7.FaTable, { size: 11 }),
+              "Table"
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+          "button",
+          {
+            onClick: () => setViewMode("cards"),
+            className: `flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-semibold transition-all ${viewMode === "cards" ? "bg-white dark:bg-slate-900 text-slate-900 dark:text-white shadow-sm border border-slate-200/50 dark:border-slate-700" : "text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200"}`,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_fa7.FaThLarge, { size: 11 }),
+              "Cards"
+            ]
+          }
+        )
+      ] })
+    ] }),
+    !title && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "flex justify-end px-4 pt-3", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-center bg-slate-100 dark:bg-slate-800/80 rounded-lg p-0.5 border border-slate-200 dark:border-slate-700/50", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+        "button",
+        {
+          onClick: () => setViewMode("table"),
+          className: `flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-semibold transition-all ${viewMode === "table" ? "bg-white dark:bg-slate-900 text-slate-900 dark:text-white shadow-sm border border-slate-200/50 dark:border-slate-700" : "text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200"}`,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_fa7.FaTable, { size: 11 }),
+            "Table"
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+        "button",
+        {
+          onClick: () => setViewMode("cards"),
+          className: `flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-semibold transition-all ${viewMode === "cards" ? "bg-white dark:bg-slate-900 text-slate-900 dark:text-white shadow-sm border border-slate-200/50 dark:border-slate-700" : "text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200"}`,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_fa7.FaThLarge, { size: 11 }),
+            "Cards"
+          ]
+        }
+      )
+    ] }) }),
+    viewMode === "cards" ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "p-4 space-y-3 max-h-[400px] overflow-y-auto", children: currentData.length > 0 ? currentData.map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { children: renderCard ? renderCard(row) : renderDefaultCard(row) }, i)) : /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex flex-col items-center justify-center py-12 text-secondary-400", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ITText, { as: "span", className: "text-lg", children: "No se encontraron resultados" }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ITText, { as: "span", className: "text-sm mt-1", children: "Intenta ajustar los filtros" })
+    ] }) }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "overflow-x-auto", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
       "table",
       {
         className: (0, import_clsx14.default)(
           "min-w-max w-full text-sm text-left text-secondary-600",
+          showVerticalBorder && "[&_th]:border-r [&_th:last-child]:border-r-0 [&_td]:border-r [&_td:last-child]:border-r-0",
+          showVerticalBorder && (verticalBorderClassname || "[&_th]:border-slate-100 dark:[&_th]:border-slate-700/30 [&_td]:border-slate-100 dark:[&_td]:border-slate-700/30"),
           variantStyles[variant],
           sizeStyles[size]
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("tr", { className: "bg-secondary-50 border-b border-secondary-200 text-xs uppercase tracking-wider font-semibold text-secondary-500", children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("tr", { className: "bg-secondary-50 text-xs uppercase tracking-wider font-semibold text-slate-700 dark:text-slate-200", children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
             "th",
             {
               scope: "col",
               className: (0, import_clsx14.default)("px-4 py-4 align-top", col.className),
               children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex flex-col gap-3 min-w-[150px]", children: [
                 /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-center justify-between gap-2", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ITText, { as: "span", className: "text-secondary-700 font-bold", children: col.label }),
+                  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ITText, { as: "span", className: "text-slate-900 dark:text-white font-bold", children: col.label }),
                   col.sortable && col.type !== "actions" && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
                     "button",
                     {
@@ -2919,10 +3001,10 @@ function ITTable({
             },
             col.key
           )) }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("tbody", { className: "divide-y divide-secondary-100", children: currentData.length > 0 ? currentData.map((row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("tbody", { className: "divide-y divide-slate-100 dark:divide-slate-700/30", children: currentData.length > 0 ? currentData.map((row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
             "tr",
             {
-              className: "hover:bg-secondary-50/50 transition-colors duration-150 group",
+              className: (0, import_clsx14.default)("hover:bg-secondary-50/50 transition-colors duration-150 group", variant === "striped" && "odd:bg-secondary-50/40 dark:odd:bg-slate-800/20"),
               children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
                 "td",
                 {
@@ -2940,7 +3022,7 @@ function ITTable({
         ]
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "rounded-b-xl border-t border-secondary-200 px-6 py-4", style: { backgroundColor: "var(--color-table-rowBg, #ffffff)" }, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "rounded-b-xl px-6 py-4", style: { backgroundColor: "var(--color-table-rowBg, #ffffff)" }, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       ITPagination,
       {
         currentPage,
@@ -2976,8 +3058,13 @@ function ITDataTable({
   size = "md",
   itemsPerPageOptions = [5, 10, 20],
   defaultItemsPerPage = 10,
-  title
+  title,
+  renderCard,
+  defaultView,
+  showVerticalBorder = true,
+  verticalBorderClassname
 }) {
+  const [viewMode, setViewMode] = (0, import_react12.useState)(defaultView || "table");
   const [data, setData] = (0, import_react12.useState)([]);
   const [totalItems, setTotalItems] = (0, import_react12.useState)(0);
   const [isLoading, setIsLoading] = (0, import_react12.useState)(fetchOnMount);
@@ -3121,31 +3208,70 @@ function ITDataTable({
         return value;
     }
   };
+  const renderDefaultCard = (row) => {
+    const dataCols = columns.filter((c) => c.type !== "actions");
+    const actionCol = columns.find((c) => c.type === "actions");
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "bg-white dark:bg-slate-800 rounded-lg border border-slate-200 dark:border-slate-700 p-3 space-y-2 shadow-sm", children: [
+      dataCols.map((col) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-center justify-between gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-[10px] font-bold uppercase tracking-wider text-slate-400 whitespace-nowrap flex-shrink-0 min-w-[70px]", children: col.label }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-sm font-medium text-slate-800 dark:text-white text-right truncate", children: renderCellContent(col, row) })
+      ] }, col.key)),
+      actionCol?.actions && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "flex items-center justify-end gap-2 pt-2 border-t border-slate-100 dark:border-slate-700", children: actionCol.actions(row) })
+    ] });
+  };
+  const segCtrlClass = (mode) => `flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-semibold transition-all ${viewMode === mode ? "bg-white dark:bg-slate-900 text-slate-900 dark:text-white shadow-sm border border-slate-200/50 dark:border-slate-700" : "text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200"}`;
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: (0, import_clsx15.default)("space-y-4 w-full relative", containerClassName), children: [
     /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "rounded-xl shadow-sm overflow-hidden", style: { backgroundColor: "var(--color-table-rowBg, #ffffff)" }, children: [
-      title && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "px-6 py-5 border-b border-secondary-100 flex justify-between items-center", style: { backgroundColor: "var(--color-table-rowBg, #ffffff)" }, children: [
+      title && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "px-6 py-5 flex items-center justify-between", style: { backgroundColor: "var(--color-table-rowBg, #ffffff)" }, children: [
         /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ITText, { as: "h2", className: "text-xl font-bold text-secondary-900 leading-tight", children: title }),
-        isLoading && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "text-secondary-400", children: loadingIndicator || /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_fa8.FaSpinner, { className: "animate-spin text-primary-500 text-xl" }) })
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-center gap-3", children: [
+          isLoading && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "text-secondary-400", children: loadingIndicator || /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_fa8.FaSpinner, { className: "animate-spin text-primary-500 text-xl" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-center bg-slate-100 dark:bg-slate-800/80 rounded-lg p-0.5 border border-slate-200 dark:border-slate-700/50", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("button", { onClick: () => setViewMode("table"), className: segCtrlClass("table"), children: [
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_fa8.FaTable, { size: 11 }),
+              "Table"
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("button", { onClick: () => setViewMode("cards"), className: segCtrlClass("cards"), children: [
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_fa8.FaThLarge, { size: 11 }),
+              "Cards"
+            ] })
+          ] })
+        ] })
       ] }),
+      !title && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "flex justify-end px-4 pt-3", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-center bg-slate-100 dark:bg-slate-800/80 rounded-lg p-0.5 border border-slate-200 dark:border-slate-700/50", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("button", { onClick: () => setViewMode("table"), className: segCtrlClass("table"), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_fa8.FaTable, { size: 11 }),
+          "Table"
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("button", { onClick: () => setViewMode("cards"), className: segCtrlClass("cards"), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_fa8.FaThLarge, { size: 11 }),
+          "Cards"
+        ] })
+      ] }) }),
       /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "overflow-x-auto relative min-h-[200px]", children: [
         isLoading && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "absolute inset-0 z-20 flex items-center justify-center bg-white/40 backdrop-blur-[2px] transition-all duration-300", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "flex flex-col items-center gap-3 p-6 rounded-2xl shadow-xl border border-secondary-100 animate-in fade-in zoom-in duration-300", style: { backgroundColor: "var(--color-table-rowBg, #ffffff)" }, children: loadingIndicator || /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_fa8.FaSpinner, { className: "animate-spin text-primary-500 text-4xl" }),
           /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ITText, { as: "span", className: "text-sm font-semibold text-secondary-600 animate-pulse", children: "Cargando datos..." })
         ] }) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+        viewMode === "cards" ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "p-4 space-y-3 max-h-[400px] overflow-y-auto", children: data.length > 0 ? data.map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { children: renderCard ? renderCard(row) : renderDefaultCard(row) }, i)) : !isLoading && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex flex-col items-center justify-center py-12 text-secondary-400", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ITText, { as: "span", className: "text-lg", children: "No se encontraron resultados" }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ITText, { as: "span", className: "text-sm mt-1", children: "Intenta ajustar los filtros" })
+        ] }) }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
           "table",
           {
             className: (0, import_clsx15.default)(
               "min-w-max w-full text-sm text-left text-secondary-600 transition-opacity duration-300",
+              showVerticalBorder && "[&_th]:border-r [&_th:last-child]:border-r-0 [&_td]:border-r [&_td:last-child]:border-r-0",
+              showVerticalBorder && (verticalBorderClassname || "[&_th]:border-slate-100 dark:[&_th]:border-slate-700/30 [&_td]:border-slate-100 dark:[&_td]:border-slate-700/30"),
               isLoading ? "opacity-50" : "opacity-100",
               variantStyles[variant],
               sizeStyles[size],
               className
             ),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("tr", { className: "bg-white border-b border-secondary-200 text-xs uppercase tracking-wider font-semibold text-secondary-500", children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("th", { scope: "col", className: (0, import_clsx15.default)("px-4 py-4 align-top", col.className), children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex flex-col gap-3 min-w-[150px]", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("tr", { className: "bg-secondary-50 text-xs uppercase tracking-wider font-semibold text-slate-700 dark:text-slate-200", children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("th", { scope: "col", className: (0, import_clsx15.default)("px-4 py-4 align-top", col.className), children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex flex-col gap-3 min-w-[150px]", children: [
                 /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-center justify-between gap-2", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ITText, { as: "span", className: "text-secondary-700 font-bold", children: col.label }),
+                  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ITText, { as: "span", className: "text-slate-900 dark:text-white font-bold", children: col.label }),
                   col.sortable && col.type !== "actions" && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                     "button",
                     {
@@ -3159,7 +3285,7 @@ function ITDataTable({
                 ] }),
                 /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "w-full", children: col.filter ? renderFilterInput(col) : null })
               ] }) }, col.key)) }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("tbody", { className: "divide-y divide-secondary-100", children: data.length > 0 ? data.map((row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("tr", { className: "hover:bg-secondary-50/50 transition-colors duration-150 group", children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("td", { className: (0, import_clsx15.default)("px-4 py-3 align-middle", col.className), children: col.type === "actions" ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "flex items-center justify-center gap-2", children: renderCellContent(col, row) }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "text-secondary-700 font-medium", children: renderCellContent(col, row) }) }, `${rowIndex}-${col.key}`)) }, rowIndex)) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("td", { colSpan: columns.length, className: "px-6 py-20 text-center", children: !isLoading && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex flex-col items-center justify-center text-secondary-400", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("tbody", { className: "divide-y divide-slate-100 dark:divide-slate-700/30", children: data.length > 0 ? data.map((row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("tr", { className: (0, import_clsx15.default)("hover:bg-secondary-50/50 transition-colors duration-150 group", variant === "striped" && "odd:bg-secondary-50/40 dark:odd:bg-slate-800/20"), children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("td", { className: (0, import_clsx15.default)("px-4 py-3 align-middle", col.className), children: col.type === "actions" ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "flex items-center justify-center gap-2", children: renderCellContent(col, row) }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "text-secondary-700 font-medium", children: renderCellContent(col, row) }) }, `${rowIndex}-${col.key}`)) }, rowIndex)) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("td", { colSpan: columns.length, className: "px-6 py-12 text-center", children: !isLoading && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex flex-col items-center justify-center text-secondary-400", children: [
                 /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ITText, { as: "span", className: "text-lg", children: "No se encontraron resultados" }),
                 /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ITText, { as: "span", className: "text-sm mt-1", children: "Intenta ajustar los filtros" })
               ] }) }) }) })
@@ -3168,7 +3294,7 @@ function ITDataTable({
         )
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "rounded-b-xl border-t border-secondary-200 px-6 py-4", style: { backgroundColor: "var(--color-table-rowBg, #ffffff)" }, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "rounded-b-xl px-6 py-4", style: { backgroundColor: "var(--color-table-rowBg, #ffffff)" }, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       ITPagination,
       {
         currentPage,
@@ -3394,7 +3520,7 @@ function ITDatePicker({
           import_fa9.FaCalendarAlt,
           {
             onClick: handleIconClick,
-            className: "text-slate-900 cursor-pointer"
+            className: "text-slate-500 dark:text-slate-400 cursor-pointer"
           }
         ) }),
         variant,
@@ -5642,7 +5768,7 @@ function ITFlex({
 }
 
 // src/components/form-builder/formBuilder.tsx
-var import_react22 = require("react");
+var import_react23 = require("react");
 
 // src/components/form-builder/formBuilder.context.tsx
 var import_react18 = __toESM(require("react"), 1);
@@ -5686,8 +5812,8 @@ var useITFormBuilderContext = () => {
 };
 
 // src/components/form-builder/fieldRenderer.tsx
-var import_react21 = require("react");
-var import_clsx24 = __toESM(require("clsx"), 1);
+var import_react22 = require("react");
+var import_clsx25 = __toESM(require("clsx"), 1);
 
 // src/components/time-picker/timePicker.tsx
 var import_clsx23 = __toESM(require("clsx"), 1);
@@ -5849,7 +5975,7 @@ function ITTimePicker({
             },
             className: (0, import_clsx23.default)(
               "cursor-pointer transition-colors",
-              disabled ? "text-slate-400 cursor-not-allowed" : "text-slate-900 hover:text-slate-600"
+              disabled ? "text-slate-400 cursor-not-allowed" : "text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200"
             )
           }
         )
@@ -5956,27 +6082,204 @@ function ITTimePicker({
   ] });
 }
 
-// src/components/form-builder/useFormBuilder.ts
+// src/components/search-select/search-select.tsx
 var import_react20 = require("react");
+var import_clsx24 = __toESM(require("clsx"), 1);
+var import_fa15 = require("react-icons/fa");
+var import_jsx_runtime28 = require("react/jsx-runtime");
+function ITSearchSelect({
+  name,
+  options = [],
+  label,
+  placeholder = "Selecciona una opci\xF3n",
+  valueField = "value",
+  labelField = "label",
+  value,
+  onChange,
+  onBlur,
+  disabled = false,
+  className,
+  touched,
+  required,
+  error,
+  readOnly = false,
+  onSearch,
+  isLoading = false,
+  noResultsMessage = "No se encontraron resultados"
+}) {
+  const [isOpen, setIsOpen] = (0, import_react20.useState)(false);
+  const [searchTerm, setSearchTerm] = (0, import_react20.useState)("");
+  const [isFocused, setIsFocused] = (0, import_react20.useState)(false);
+  const [localTouched, setLocalTouched] = (0, import_react20.useState)(false);
+  const containerRef = (0, import_react20.useRef)(null);
+  const timeoutRef = (0, import_react20.useRef)(null);
+  const selectedOption = (0, import_react20.useMemo)(() => {
+    return options.find((opt) => opt[valueField] === value);
+  }, [options, value, valueField]);
+  (0, import_react20.useEffect)(() => {
+    if (!isFocused) {
+      setSearchTerm(selectedOption ? String(selectedOption[labelField]) : "");
+    }
+  }, [selectedOption, isFocused, labelField]);
+  (0, import_react20.useEffect)(() => {
+    function handleClickOutside(event) {
+      if (containerRef.current && !containerRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+  const filteredOptions = (0, import_react20.useMemo)(() => {
+    if (onSearch) return options;
+    if (!searchTerm || !isFocused) return options;
+    return options.filter(
+      (opt) => String(opt[labelField]).toLowerCase().includes(searchTerm.toLowerCase())
+    );
+  }, [options, searchTerm, onSearch, labelField, isFocused]);
+  const handleInputChange = (e) => {
+    const query = e.target.value;
+    setSearchTerm(query);
+    setIsOpen(true);
+    if (onSearch) {
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+      timeoutRef.current = setTimeout(() => {
+        onSearch(query);
+      }, 500);
+    }
+  };
+  const handleSelect = (option) => {
+    if (onChange) {
+      onChange(option[valueField], option);
+    }
+    setSearchTerm(String(option[labelField]));
+    setIsOpen(false);
+  };
+  const handleFocus = () => {
+    if (disabled || readOnly) return;
+    setIsFocused(true);
+    setIsOpen(true);
+  };
+  const handleInputBlur = (e) => {
+    setTimeout(() => {
+      setIsFocused(false);
+      setLocalTouched(true);
+      onBlur?.(e);
+    }, 200);
+  };
+  const inputTheme = theme.input || {};
+  const isTouched = touched !== void 0 ? touched : localTouched;
+  const isEmpty = value === void 0 || value === null || String(value).trim() === "";
+  const effectiveError = error !== void 0 && error !== false ? error === true ? "Este campo es requerido" : error : required && isEmpty ? "Este campo es requerido" : void 0;
+  const hasError = isTouched && !!effectiveError;
+  const errorMessage = typeof effectiveError === "string" ? effectiveError : "Este campo es requerido";
+  const getInputStyle = () => {
+    const style = {
+      backgroundColor: inputTheme.backgroundColor || "#ffffff",
+      borderColor: inputTheme.borderColor || "#e2e8f0",
+      borderRadius: inputTheme.borderRadius || "0.5rem",
+      padding: inputTheme.padding || "0.5rem 0.75rem",
+      fontSize: inputTheme.fontSize || "0.875rem",
+      borderWidth: "1px",
+      borderStyle: "solid",
+      transition: "all 0.2s",
+      color: "var(--input-text-color, var(--color-secondary-900))",
+      width: "100%"
+    };
+    if (disabled) {
+      style.backgroundColor = inputTheme.disabled?.backgroundColor || "#f1f5f9";
+      style.borderColor = inputTheme.disabled?.borderColor || "#e2e8f0";
+      style.opacity = 0.7;
+      style.cursor = "not-allowed";
+    }
+    if (hasError) {
+      style.borderColor = inputTheme.error?.borderColor || "red";
+      if (isFocused) {
+        style.boxShadow = inputTheme.error?.ring;
+      }
+    } else if (isFocused && !readOnly) {
+      style.boxShadow = inputTheme.focus?.ring;
+      style.borderColor = inputTheme.focus?.borderColor;
+    }
+    return style;
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: (0, import_clsx24.default)("w-full flex flex-col gap-1.5", className, isOpen && "relative z-30"), ref: containerRef, children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+      ITText,
+      {
+        as: "label",
+        className: (0, import_clsx24.default)("text-sm font-medium text-gray-700 dark:text-slate-300", {
+          "text-red-500": hasError
+        }),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ITText, { as: "span", children: label }),
+          required && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ITText, { as: "span", className: "text-red-500 ml-1", children: "*" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "relative", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "relative flex items-center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+          "input",
+          {
+            type: "text",
+            name,
+            value: searchTerm,
+            onChange: handleInputChange,
+            onFocus: handleFocus,
+            onBlur: handleInputBlur,
+            disabled,
+            readOnly,
+            placeholder,
+            className: "outline-none pr-10",
+            style: getInputStyle(),
+            autoComplete: "off"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "absolute right-3 flex items-center gap-2 text-gray-400 pointer-events-none", children: [
+          isLoading && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "animate-spin h-4 w-4 border-2 border-primary-500 border-t-transparent rounded-full" }),
+          !isLoading && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_fa15.FaSearch, { size: 14, className: (0, import_clsx24.default)({ "text-primary-500": isFocused }) })
+        ] })
+      ] }),
+      isOpen && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "absolute z-50 w-full mt-1 bg-white dark:bg-slate-900 border border-gray-200 dark:border-slate-800 rounded-lg shadow-xl overflow-hidden animate-in fade-in zoom-in duration-200 origin-top", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "max-h-60 overflow-y-auto", children: filteredOptions.length > 0 ? filteredOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        ITText,
+        {
+          as: "div",
+          onClick: () => handleSelect(option),
+          className: (0, import_clsx24.default)(
+            "px-4 py-2 text-sm cursor-pointer transition-colors",
+            value === option[valueField] ? "bg-primary-50 dark:bg-primary-950/40 text-primary-700 dark:text-primary-300 font-medium" : "hover:bg-gray-50 dark:hover:bg-slate-800 text-gray-700 dark:text-slate-300"
+          ),
+          children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ITText, { as: "span", children: option[labelField] })
+        },
+        option[valueField]
+      )) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ITText, { as: "div", className: "px-4 py-6 text-sm text-center text-gray-500 italic", children: isLoading ? "Cargando..." : noResultsMessage }) }) })
+    ] }),
+    hasError && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ITText, { as: "p", className: "text-red-500 text-xs mt-1", children: errorMessage })
+  ] });
+}
+
+// src/components/form-builder/useFormBuilder.ts
+var import_react21 = require("react");
 var useFieldRules = (config2, dependentValues) => {
   const { getFieldConfig } = useITFormBuilderContext();
   const fieldConfig = getFieldConfig(config2.name) || config2;
-  const isVisible = (0, import_react20.useMemo)(() => {
+  const isVisible = (0, import_react21.useMemo)(() => {
     if (!fieldConfig.renderWhen) return true;
     return fieldConfig.renderWhen(dependentValues);
   }, [fieldConfig.renderWhen, dependentValues]);
-  const dynamicProps = (0, import_react20.useMemo)(() => {
+  const dynamicProps = (0, import_react21.useMemo)(() => {
     if (!fieldConfig.dynamicProps) return {};
     return fieldConfig.dynamicProps(dependentValues);
   }, [fieldConfig.dynamicProps, dependentValues]);
-  const isRequired = (0, import_react20.useMemo)(() => {
+  const isRequired = (0, import_react21.useMemo)(() => {
     if (typeof dynamicProps.required !== "undefined") return dynamicProps.required;
     if (typeof fieldConfig.required === "function") {
       return fieldConfig.required(dependentValues);
     }
     return fieldConfig.required || false;
   }, [fieldConfig.required, dynamicProps.required, dependentValues]);
-  const isDisabled = (0, import_react20.useMemo)(() => {
+  const isDisabled = (0, import_react21.useMemo)(() => {
     if (typeof dynamicProps.disabled !== "undefined") return dynamicProps.disabled;
     if (typeof fieldConfig.disabled === "function") {
       return fieldConfig.disabled(dependentValues);
@@ -5987,7 +6290,24 @@ var useFieldRules = (config2, dependentValues) => {
 };
 
 // src/components/form-builder/fieldRenderer.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_fa16 = require("react-icons/fa");
+var import_jsx_runtime29 = require("react/jsx-runtime");
+function useAsyncOptions(options, depends) {
+  const [resolved, setResolved] = (0, import_react22.useState)([]);
+  const [loading, setLoading] = (0, import_react22.useState)(false);
+  (0, import_react22.useEffect)(() => {
+    if (typeof options === "function") {
+      setLoading(true);
+      options().then((result) => {
+        setResolved(result.map((o) => ({ value: String(o.value), label: o.label })));
+        setLoading(false);
+      });
+    } else if (Array.isArray(options)) {
+      setResolved(options.map((o) => ({ value: String(o.value), label: o.label })));
+    }
+  }, depends);
+  return { options: resolved, loading };
+}
 var ITFieldRenderer = ({
   config: config2,
   columns = 12,
@@ -6001,7 +6321,7 @@ var ITFieldRenderer = ({
     config2,
     dependentValues
   );
-  (0, import_react21.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     context.registerField(config2.name, config2);
     return () => {
       context.unregisterField(config2.name);
@@ -6027,7 +6347,8 @@ var ITFieldRenderer = ({
     leftIcon,
     rightIcon
   } = activeConfig;
-  const handleChangeWrapper = (0, import_react21.useCallback)(
+  const { options: resolvedOptions, loading: optionsLoading } = useAsyncOptions(options, [options, dependentValues]);
+  const handleChangeWrapper = (0, import_react22.useCallback)(
     async (val) => {
       const finalValue = val?.target ? val.target.value : val;
       await context.setFieldValue(name, finalValue);
@@ -6043,7 +6364,7 @@ var ITFieldRenderer = ({
       case "password":
       case "number":
       case "email":
-        return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
           ITInput,
           {
             type: type === "email" ? "text" : type,
@@ -6068,10 +6389,36 @@ var ITFieldRenderer = ({
           }
         );
       case "select":
-        return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        if (optionsLoading) {
+          return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex items-center gap-2 py-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_fa16.FaSpinner, { className: "animate-spin text-primary-500" }),
+            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(ITText, { as: "span", className: "text-sm text-slate-500", children: "Cargando opciones..." })
+          ] });
+        }
+        if (typeof options === "function") {
+          return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+            ITSearchSelect,
+            {
+              options: resolvedOptions,
+              name,
+              disabled: isDisabled,
+              label: label || "",
+              placeholder,
+              value: value !== void 0 ? value : activeConfig.defaultValue || "",
+              valueField: valueField || "value",
+              labelField: labelField || "label",
+              onChange: (val) => handleChangeWrapper(val),
+              onBlur: context.handleBlur,
+              touched,
+              error,
+              required: isRequired
+            }
+          );
+        }
+        return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
           ITSelect,
           {
-            options: Array.isArray(options) ? options : [],
+            options: resolvedOptions,
             name,
             disabled: isDisabled,
             label: label || "",
@@ -6087,7 +6434,7 @@ var ITFieldRenderer = ({
           }
         );
       case "date":
-        return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
           ITDatePicker,
           {
             name,
@@ -6103,7 +6450,7 @@ var ITFieldRenderer = ({
           }
         );
       case "time":
-        return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
           ITTimePicker,
           {
             name,
@@ -6121,7 +6468,7 @@ var ITFieldRenderer = ({
       case "custom":
         if (activeConfig.component) {
           const CustomComponent = activeConfig.component;
-          return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
             CustomComponent,
             {
               ...activeConfig,
@@ -6136,9 +6483,9 @@ var ITFieldRenderer = ({
         }
         return null;
       case "section":
-        return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: (0, import_clsx24.default)("w-full col-span-full", activeConfig.className), children: [
-          label && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ITText, { as: "h4", className: "text-lg font-semibold text-gray-800 mb-4", children: label }),
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: (0, import_clsx24.default)("grid gap-y-6 gap-x-5", getGridColsClass(columns)), children: activeConfig.fields?.map((childConfig) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: (0, import_clsx25.default)("w-full col-span-full", activeConfig.className), children: [
+          label && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(ITText, { as: "h4", className: "text-lg font-semibold text-gray-800 mb-4", children: label }),
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: (0, import_clsx25.default)("grid gap-y-6 gap-x-5", getGridColsClass(columns)), children: activeConfig.fields?.map((childConfig) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
             ITFieldRenderer,
             {
               config: childConfig,
@@ -6148,7 +6495,7 @@ var ITFieldRenderer = ({
           )) })
         ] });
       case "array":
-        return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "p-4 border-2 border-dashed border-gray-200 rounded-xl", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(ITText, { as: "p", className: "text-sm text-gray-500 text-center", children: [
+        return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "p-4 border-2 border-dashed border-gray-200 rounded-xl", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(ITText, { as: "p", className: "text-sm text-gray-500 text-center", children: [
           "Array Field: ",
           label
         ] }) });
@@ -6156,12 +6503,12 @@ var ITFieldRenderer = ({
         return null;
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: (0, import_clsx24.default)(getColSpanClass(activeConfig.column, columns), activeConfig.className), children: renderField() });
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: (0, import_clsx25.default)(getColSpanClass(activeConfig.column, columns), activeConfig.className), children: renderField() });
 };
-var fieldRenderer_default = (0, import_react21.memo)(ITFieldRenderer);
+var fieldRenderer_default = (0, import_react22.memo)(ITFieldRenderer);
 
 // src/components/form-builder/formBuilder.tsx
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 function buildDependentValues(dependsOn, values) {
   if (!dependsOn || dependsOn.length === 0) return {};
   const deps = {};
@@ -6185,11 +6532,11 @@ function ITFormBuilder({
   },
   isSubmitting = false
 }) {
-  const [mounted, setMounted] = (0, import_react22.useState)(false);
-  (0, import_react22.useEffect)(() => {
+  const [mounted, setMounted] = (0, import_react23.useState)(false);
+  (0, import_react23.useEffect)(() => {
     setMounted(true);
   }, []);
-  const providerValue = (0, import_react22.useMemo)(() => ({
+  const providerValue = (0, import_react23.useMemo)(() => ({
     config: config2 || [],
     values: values || {},
     errors: errors || {},
@@ -6205,7 +6552,7 @@ function ITFormBuilder({
     submitCount: 0
   }), [config2, values, errors, touched, handleChange, handleBlur, setFieldValue, setFieldTouched, setFieldError, isSubmitting]);
   if (config2) {
-    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(ITFormBuilderProvider, { value: providerValue, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: formGrid(columns), children: config2.map((fieldConfig) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(ITFormBuilderProvider, { value: providerValue, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: formGrid(columns), children: config2.map((fieldConfig) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
       fieldRenderer_default,
       {
         config: fieldConfig,
@@ -6218,7 +6565,7 @@ function ITFormBuilder({
       fieldConfig.name
     )) }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: formGrid(columns), children: fields?.map(({
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: formGrid(columns), children: fields?.map(({
     name,
     label,
     type = "text",
@@ -6233,12 +6580,12 @@ function ITFormBuilder({
     formatNumber = true,
     onChangeAction,
     ...props
-  }) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: getColSpanClass(column, columns), children: (() => {
+  }) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: getColSpanClass(column, columns), children: (() => {
     switch (type) {
       case "text":
       case "number":
       case "password":
-        return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
           ITInput,
           {
             type,
@@ -6268,7 +6615,7 @@ function ITFormBuilder({
           }
         );
       case "select":
-        return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
           ITSelect,
           {
             options: options || [],
@@ -6292,7 +6639,7 @@ function ITFormBuilder({
           }
         );
       case "date":
-        return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
           ITDatePicker,
           {
             name,
@@ -6319,8 +6666,8 @@ function ITFormBuilder({
 }
 
 // src/components/grid/grid.tsx
-var import_clsx25 = __toESM(require("clsx"), 1);
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_clsx26 = __toESM(require("clsx"), 1);
+var import_jsx_runtime31 = require("react/jsx-runtime");
 function colSpanClass(span, cols) {
   if (span === void 0) return void 0;
   const clamped = Math.min(Math.max(Math.round(span), 1), cols);
@@ -6331,6 +6678,10 @@ function breakpointSpan(span, bp, cols) {
   const clamped = Math.min(Math.max(Math.round(span), 1), cols);
   return `${bp}:col-span-${clamped}`;
 }
+function gridColsClass(cols) {
+  const clamped = Math.min(Math.max(cols, 1), 12);
+  return `grid-cols-${clamped}`;
+}
 function ITGrid({
   children,
   container,
@@ -6347,12 +6698,11 @@ function ITGrid({
   as: Component = "div"
 }) {
   if (container) {
-    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
       Component,
       {
-        className: (0, import_clsx25.default)("grid", className),
+        className: (0, import_clsx26.default)("grid", gridColsClass(columns), className),
         style: {
-          gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
           gap: spacing > 0 ? `${spacing * 0.25}rem` : void 0,
           ...style
         },
@@ -6361,10 +6711,11 @@ function ITGrid({
     );
   }
   if (item) {
-    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
       Component,
       {
-        className: (0, import_clsx25.default)(
+        className: (0, import_clsx26.default)(
+          "col-span-full",
           colSpanClass(xs ?? sm, columns),
           sm !== void 0 && breakpointSpan(sm, "sm", columns),
           md !== void 0 && breakpointSpan(md, "md", columns),
@@ -6377,34 +6728,34 @@ function ITGrid({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Component, { className, style, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Component, { className, style, children });
 }
 
 // src/components/image/image.tsx
-var import_react23 = require("react");
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_react24 = require("react");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 var ITImage = ({
   src,
   alt,
   className = "",
   fallback = ""
 }) => {
-  const [imageError, setImageError] = (0, import_react23.useState)(false);
+  const [imageError, setImageError] = (0, import_react24.useState)(false);
   const handleImageError = () => {
     setImageError(true);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     "div",
     {
       className: `${className} flex items-center justify-center bg-transparent`,
-      children: imageError ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+      children: imageError ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
         "img",
         {
           src: fallback,
           alt: "Fallback",
           className: "w-full h-full object-cover"
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+      ) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
         "img",
         {
           src,
@@ -6419,9 +6770,9 @@ var ITImage = ({
 var image_default = ITImage;
 
 // src/components/navbar/navbar.tsx
-var import_react24 = require("react");
-var import_fa15 = require("react-icons/fa");
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_react25 = require("react");
+var import_fa17 = require("react-icons/fa");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 function ITNavbar({
   logo,
   logoText,
@@ -6434,9 +6785,9 @@ function ITNavbar({
   showSidebarOnMobile = false,
   sidebarItems
 }) {
-  const [isUserMenuOpen, setIsUserMenuOpen] = (0, import_react24.useState)(false);
-  const [expandedItems, setExpandedItems] = (0, import_react24.useState)(/* @__PURE__ */ new Set());
-  const userMenuRef = (0, import_react24.useRef)(null);
+  const [isUserMenuOpen, setIsUserMenuOpen] = (0, import_react25.useState)(false);
+  const [expandedItems, setExpandedItems] = (0, import_react25.useState)(/* @__PURE__ */ new Set());
+  const userMenuRef = (0, import_react25.useRef)(null);
   useClickOutside_default(userMenuRef, () => setIsUserMenuOpen(false));
   const toggleUserMenu = () => {
     setIsUserMenuOpen(!isUserMenuOpen);
@@ -6459,42 +6810,42 @@ function ITNavbar({
   };
   const shouldUseLegacy = !navigationItems.length && (navItems || sidebarItems);
   if (shouldUseLegacy) {
-    return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex flex-col h-screen", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("nav", { className: "bg-white border-b border-gray-200", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex items-center justify-between mx-auto p-4", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex items-center space-x-3 rtl:space-x-reverse", children: [
-          logo && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "h-8", children: logo }),
-          logoText && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ITText, { as: "span", className: "self-center text-2xl font-semibold whitespace-nowrap text-gray-900", children: logoText })
+    return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex flex-col h-screen", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("nav", { className: "bg-white border-b border-gray-200", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex items-center justify-between mx-auto p-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex items-center space-x-3 rtl:space-x-reverse", children: [
+          logo && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "h-8", children: logo }),
+          logoText && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ITText, { as: "span", className: "self-center text-2xl font-semibold whitespace-nowrap text-gray-900", children: logoText })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "flex items-center justify-end w-full md:w-auto md:order-2", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex items-center space-x-4 md:order-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("ul", { className: "hidden md:flex space-x-4", children: navItems }),
-          userMenu && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "relative", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "flex items-center justify-end w-full md:w-auto md:order-2", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex items-center space-x-4 md:order-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("ul", { className: "hidden md:flex space-x-4", children: navItems }),
+          userMenu && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "relative", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
               "button",
               {
                 type: "button",
                 className: "flex text-sm bg-gray-200 rounded-full md:me-0 focus:ring-4 focus:ring-gray-300",
                 onClick: toggleUserMenu,
-                children: userMenu.userImage ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                children: userMenu.userImage ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                   "img",
                   {
                     className: "w-8 h-8 rounded-full",
                     src: userMenu.userImage,
                     alt: "user photo"
                   }
-                ) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_fa15.FaUserCircle, { className: "w-8 h-8 text-gray-500" })
+                ) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_fa17.FaUserCircle, { className: "w-8 h-8 text-gray-500" })
               }
             ),
-            isUserMenuOpen && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+            isUserMenuOpen && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
               "div",
               {
                 ref: userMenuRef,
                 className: "z-50 absolute right-0 mt-2 text-base list-none bg-white divide-y divide-gray-100 rounded-lg shadow-sm",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "px-4 py-3", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ITText, { as: "span", className: "block text-sm text-gray-900", children: userMenu.userName }),
-                    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ITText, { as: "span", className: "block text-sm text-gray-500 truncate", children: userMenu.userEmail })
+                  /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "px-4 py-3", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ITText, { as: "span", className: "block text-sm text-gray-900", children: userMenu.userName }),
+                    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ITText, { as: "span", className: "block text-sm text-gray-500 truncate", children: userMenu.userEmail })
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("ul", { className: "py-2", children: userMenu.menuItems.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("ul", { className: "py-2", children: userMenu.menuItems.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                     "button",
                     {
                       onClick: () => {
@@ -6502,7 +6853,7 @@ function ITNavbar({
                         setIsUserMenuOpen(false);
                       },
                       className: "block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 w-full text-left",
-                      children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ITText, { as: "span", children: item.label })
+                      children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ITText, { as: "span", children: item.label })
                     }
                   ) }, index)) })
                 ]
@@ -6511,191 +6862,233 @@ function ITNavbar({
           ] })
         ] }) })
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex-1 flex overflow-hidden relative", children: [
-        (showSidebar || showSidebarOnMobile) && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("aside", { className: "fixed inset-y-0 left-0 w-64 bg-gray-50 transform transition-transform duration-300 ease-in-out z-50 shadow-lg md:static md:transform-none md:shadow-none md:border-r md:border-gray-200", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "h-full overflow-y-auto py-4 px-3", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("ul", { className: "space-y-2 font-medium", children: sidebarItems }) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("main", { className: "flex-1 bg-gray-100 overflow-y-auto", children })
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex-1 flex overflow-hidden relative", children: [
+        (showSidebar || showSidebarOnMobile) && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("aside", { className: "fixed inset-y-0 left-0 w-64 bg-gray-50 transform transition-transform duration-300 ease-in-out z-50 shadow-lg md:static md:transform-none md:shadow-none md:border-r md:border-gray-200", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "h-full overflow-y-auto py-4 px-3", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("ul", { className: "space-y-2 font-medium", children: sidebarItems }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("main", { className: "flex-1 bg-gray-100 overflow-y-auto", children })
       ] })
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex h-screen font-sans", style: { backgroundColor: "var(--layout-bg, #f8fafc)" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("aside", { className: "w-72 shadow-xl flex flex-col transition-all duration-300 ease-in-out", style: { backgroundColor: "var(--sidebar-bg, #0f172a)", borderRight: "1px solid var(--sidebar-border, #1e293b)" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "p-6 flex items-center gap-3", style: { borderBottom: "1px solid var(--sidebar-border, #1e293b)" }, children: [
-        logo && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "h-8 w-auto object-contain transition-transform hover:scale-105", children: logo }),
-        logoText && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ITText, { as: "span", className: "text-lg font-bold tracking-wide", style: { color: "var(--sidebar-active-color, #ffffff)" }, children: logoText })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("nav", { className: "flex-1 px-4 py-6 overflow-y-auto custom-scrollbar", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("ul", { className: "flex flex-col gap-1.5", children: navigationItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("li", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
-          "div",
-          {
-            className: `group flex items-center justify-between px-4 py-3 rounded-xl cursor-pointer transition-all duration-200 border-l-4 ${item.isActive ? "shadow-sm" : "hover:shadow-sm"}`,
-            onClick: () => handleItemClick(item),
-            style: {
-              backgroundColor: item.isActive ? "var(--sidebar-active-bg, rgba(255,255,255,0.1))" : "transparent",
-              borderColor: item.isActive ? "var(--sidebar-active-icon, #3b82f6)" : "transparent",
-              color: item.isActive ? "var(--sidebar-active-color, #ffffff)" : "var(--sidebar-label-color, #94a3b8)"
-            },
-            onMouseEnter: (e) => {
-              if (!item.isActive) {
-                e.currentTarget.style.backgroundColor = "var(--sidebar-hover-bg, rgba(255,255,255,0.05))";
-                e.currentTarget.style.color = "var(--sidebar-active-color, #ffffff)";
-              }
-            },
-            onMouseLeave: (e) => {
-              if (!item.isActive) {
-                e.currentTarget.style.backgroundColor = "transparent";
-                e.currentTarget.style.color = "var(--sidebar-label-color, #94a3b8)";
+  const sidebar = theme.sidebar;
+  const topbar = theme.topbar;
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex h-screen font-sans", style: { backgroundColor: theme.layout.backgroundColor }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+      "aside",
+      {
+        className: "w-72 shadow-xl flex flex-col transition-all duration-300 ease-in-out",
+        style: { backgroundColor: sidebar.backgroundColor, borderRight: `1px solid ${sidebar.borderColor}` },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "p-6 flex items-center gap-3", style: { borderBottom: `1px solid ${sidebar.borderColor}` }, children: [
+            logo && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "h-8 w-auto object-contain transition-transform hover:scale-105", children: logo }),
+            logoText && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ITText, { as: "span", className: "text-lg font-bold tracking-wide", style: { color: sidebar.active.color }, children: logoText })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("nav", { className: "flex-1 px-4 py-6 overflow-y-auto custom-scrollbar", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("ul", { className: "flex flex-col gap-1.5", children: navigationItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("li", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+              "div",
+              {
+                className: `group flex items-center justify-between px-4 py-3 rounded-xl cursor-pointer transition-all duration-200 border-l-4 ${item.isActive ? "shadow-sm" : "hover:shadow-sm"}`,
+                onClick: () => handleItemClick(item),
+                style: {
+                  backgroundColor: item.isActive ? sidebar.active.backgroundColor : "transparent",
+                  borderColor: item.isActive ? sidebar.active.iconColor : "transparent",
+                  color: item.isActive ? sidebar.active.color : sidebar.label.color
+                },
+                onMouseEnter: (e) => {
+                  if (!item.isActive) {
+                    e.currentTarget.style.backgroundColor = sidebar.hover.backgroundColor;
+                    e.currentTarget.style.color = sidebar.active.color;
+                  }
+                },
+                onMouseLeave: (e) => {
+                  if (!item.isActive) {
+                    e.currentTarget.style.backgroundColor = "transparent";
+                    e.currentTarget.style.color = sidebar.label.color;
+                  }
+                },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex items-center gap-3", children: [
+                    item.icon && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "text-xl transition-colors", style: {
+                      color: item.isActive ? sidebar.active.iconColor : sidebar.icon.color
+                    }, children: item.icon }),
+                    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ITText, { as: "span", className: `font-medium text-sm ${item.isActive ? "font-semibold" : ""}`, children: item.label })
+                  ] }),
+                  item.subitems && item.subitems.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "transition-transform", style: { color: sidebar.icon.color }, children: expandedItems.has(item.id) ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_fa17.FaChevronDown, { className: "w-3 h-3" }) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_fa17.FaChevronRight, { className: "w-3 h-3" }) })
+                ]
               }
-            },
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex items-center gap-3", children: [
-                item.icon && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "text-xl transition-colors", style: {
-                  color: item.isActive ? "var(--sidebar-active-icon, #3b82f6)" : "var(--sidebar-icon-color, #64748b)"
-                }, children: item.icon }),
-                /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ITText, { as: "span", className: `font-medium text-sm ${item.isActive ? "font-semibold" : ""}`, children: item.label })
-              ] }),
-              item.subitems && item.subitems.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "transition-transform", style: { color: "var(--sidebar-icon-color, #64748b)" }, children: expandedItems.has(item.id) ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_fa15.FaChevronDown, { className: "w-3 h-3" }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_fa15.FaChevronRight, { className: "w-3 h-3" }) })
-            ]
-          }
-        ),
-        item.subitems && item.subitems.length > 0 && expandedItems.has(item.id) && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("ul", { className: "mt-1 ml-4 pl-4 space-y-1", style: { borderLeft: "1px solid var(--sidebar-border, #1e293b)" }, children: item.subitems.map((subitem) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-          "button",
-          {
-            onClick: subitem.action,
-            className: "block w-full text-left px-4 py-2.5 rounded-lg text-sm transition-all duration-200",
-            style: {
-              color: subitem.isActive ? "var(--sidebar-active-color, #ffffff)" : "var(--sidebar-label-color, #94a3b8)",
-              backgroundColor: subitem.isActive ? "var(--sidebar-active-bg, rgba(255,255,255,0.1))" : "transparent"
-            },
-            onMouseEnter: (e) => {
-              if (!subitem.isActive) {
-                e.currentTarget.style.backgroundColor = "var(--sidebar-hover-bg, rgba(255,255,255,0.05))";
+            ),
+            item.subitems && item.subitems.length > 0 && expandedItems.has(item.id) && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("ul", { className: "mt-1 ml-4 pl-4 space-y-1", style: { borderLeft: `1px solid ${sidebar.borderColor}` }, children: item.subitems.map((subitem) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+              "button",
+              {
+                onClick: subitem.action,
+                className: "block w-full text-left px-4 py-2.5 rounded-lg text-sm transition-all duration-200",
+                style: {
+                  color: subitem.isActive ? sidebar.active.color : sidebar.label.color,
+                  backgroundColor: subitem.isActive ? sidebar.active.backgroundColor : "transparent"
+                },
+                onMouseEnter: (e) => {
+                  if (!subitem.isActive) {
+                    e.currentTarget.style.backgroundColor = sidebar.hover.backgroundColor;
+                  }
+                },
+                onMouseLeave: (e) => {
+                  if (!subitem.isActive) {
+                    e.currentTarget.style.backgroundColor = "transparent";
+                  }
+                },
+                children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ITText, { as: "span", children: subitem.label })
               }
-            },
-            onMouseLeave: (e) => {
-              if (!subitem.isActive) {
-                e.currentTarget.style.backgroundColor = "transparent";
+            ) }, subitem.id)) })
+          ] }, item.id)) }) }),
+          userMenu && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "p-4", style: { borderTop: `1px solid ${sidebar.borderColor}` }, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "relative", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+              "button",
+              {
+                type: "button",
+                className: "flex items-center gap-3 w-full p-3 rounded-xl transition-colors duration-200 group",
+                style: { color: sidebar.label.color },
+                onMouseEnter: (e) => {
+                  e.currentTarget.style.backgroundColor = sidebar.hover.backgroundColor;
+                  e.currentTarget.style.color = sidebar.active.color;
+                },
+                onMouseLeave: (e) => {
+                  e.currentTarget.style.backgroundColor = "transparent";
+                  e.currentTarget.style.color = sidebar.label.color;
+                },
+                onClick: toggleUserMenu,
+                children: [
+                  userMenu.userImage ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+                    "img",
+                    {
+                      className: "w-10 h-10 rounded-full border-2 transition-colors",
+                      src: userMenu.userImage,
+                      alt: "user photo",
+                      style: { borderColor: sidebar.borderColor }
+                    }
+                  ) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+                    "div",
+                    {
+                      className: "w-10 h-10 rounded-full flex items-center justify-center transition-colors",
+                      style: { backgroundColor: sidebar.hover.backgroundColor, color: sidebar.icon.color },
+                      children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_fa17.FaUserCircle, { className: "w-6 h-6" })
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex-1 text-left overflow-hidden", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ITText, { as: "div", className: "font-medium text-sm truncate", style: { color: sidebar.active.color }, children: userMenu.userName }),
+                    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ITText, { as: "div", className: "text-xs truncate", style: { color: sidebar.label.color }, children: userMenu.userEmail })
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_fa17.FaChevronRight, { className: "w-3 h-3", style: { color: sidebar.icon.color } })
+                ]
               }
-            },
-            children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ITText, { as: "span", children: subitem.label })
-          }
-        ) }, subitem.id)) })
-      ] }, item.id)) }) }),
-      userMenu && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "p-4", style: { borderTop: "1px solid var(--sidebar-border, #1e293b)" }, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "relative", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
-          "button",
-          {
-            type: "button",
-            className: "flex items-center gap-3 w-full p-3 rounded-xl transition-colors duration-200 group",
-            style: { color: "var(--sidebar-label-color, #94a3b8)" },
-            onMouseEnter: (e) => {
-              e.currentTarget.style.backgroundColor = "var(--sidebar-hover-bg, rgba(255,255,255,0.05))";
-              e.currentTarget.style.color = "var(--sidebar-active-color, #ffffff)";
-            },
-            onMouseLeave: (e) => {
-              e.currentTarget.style.backgroundColor = "transparent";
-              e.currentTarget.style.color = "var(--sidebar-label-color, #94a3b8)";
-            },
-            onClick: toggleUserMenu,
-            children: [
-              userMenu.userImage ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-                "img",
-                {
-                  className: "w-10 h-10 rounded-full border-2 transition-colors",
-                  src: userMenu.userImage,
-                  alt: "user photo",
-                  style: { borderColor: "var(--sidebar-border, #1e293b)" }
-                }
-              ) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "w-10 h-10 rounded-full flex items-center justify-center transition-colors", style: { backgroundColor: "var(--sidebar-hover-bg, rgba(255,255,255,0.1))", color: "var(--sidebar-icon-color, #64748b)" }, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_fa15.FaUserCircle, { className: "w-6 h-6" }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex-1 text-left overflow-hidden", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ITText, { as: "div", className: "font-medium text-sm truncate", style: { color: "var(--sidebar-active-color, #ffffff)" }, children: userMenu.userName }),
-                /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ITText, { as: "div", className: "text-xs truncate", style: { color: "var(--sidebar-label-color, #94a3b8)" }, children: userMenu.userEmail })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_fa15.FaChevronRight, { className: "w-3 h-3", style: { color: "var(--sidebar-icon-color, #64748b)" } })
-            ]
-          }
-        ),
-        isUserMenuOpen && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
-          "div",
-          {
-            ref: userMenuRef,
-            className: "absolute bottom-full left-0 mb-3 w-full rounded-xl shadow-2xl overflow-hidden transform transition-all duration-200 origin-bottom",
-            style: { backgroundColor: "var(--topbar-user-dropdown-bg, #ffffff)", border: "1px solid var(--topbar-user-dropdown-border, #e2e8f0)" },
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "px-4 py-3", style: { backgroundColor: "var(--topbar-user-bg, #f8fafc)", borderBottom: "1px solid var(--topbar-user-dropdown-border, #e2e8f0)" }, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ITText, { as: "span", className: "block text-sm font-semibold", style: { color: "var(--topbar-user-text, #0f172a)" }, children: userMenu.userName }),
-                /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ITText, { as: "span", className: "block text-xs truncate", style: { color: "var(--topbar-user-subtitle, #64748b)" }, children: userMenu.userEmail })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("ul", { className: "py-1", children: userMenu.menuItems.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-                "button",
-                {
-                  onClick: () => {
-                    item.onClick();
-                    setIsUserMenuOpen(false);
-                  },
-                  className: "flex items-center w-full px-4 py-2.5 text-sm transition-colors",
-                  style: { color: "var(--topbar-user-text, #334155)" },
-                  onMouseEnter: (e) => {
-                    e.currentTarget.style.backgroundColor = "var(--topbar-user-item-hover, #f8fafc)";
-                  },
-                  onMouseLeave: (e) => {
-                    e.currentTarget.style.backgroundColor = "transparent";
-                  },
-                  children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ITText, { as: "span", children: item.label })
-                }
-              ) }, index)) })
-            ]
-          }
-        )
-      ] }) })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("main", { className: "flex-1 overflow-y-auto relative", style: { backgroundColor: "var(--layout-bg, #f8fafc)" }, children })
+            ),
+            isUserMenuOpen && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+              "div",
+              {
+                ref: userMenuRef,
+                className: "absolute bottom-full left-0 mb-3 w-full rounded-xl shadow-2xl overflow-hidden transform transition-all duration-200 origin-bottom",
+                style: { backgroundColor: topbar.userMenu.dropdown.backgroundColor, border: `1px solid ${topbar.userMenu.dropdown.borderColor}` },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "px-4 py-3", style: { backgroundColor: topbar.userMenu.backgroundColor, borderBottom: `1px solid ${topbar.userMenu.dropdown.borderColor}` }, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ITText, { as: "span", className: "block text-sm font-semibold", style: { color: topbar.userMenu.textColor }, children: userMenu.userName }),
+                    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ITText, { as: "span", className: "block text-xs truncate", style: { color: topbar.userMenu.subtitleColor }, children: userMenu.userEmail })
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("ul", { className: "py-1", children: userMenu.menuItems.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+                    "button",
+                    {
+                      onClick: () => {
+                        item.onClick();
+                        setIsUserMenuOpen(false);
+                      },
+                      className: "flex items-center w-full px-4 py-2.5 text-sm transition-colors",
+                      style: { color: topbar.userMenu.textColor },
+                      onMouseEnter: (e) => {
+                        e.currentTarget.style.backgroundColor = topbar.userMenu.dropdown.itemHoverBackground;
+                      },
+                      onMouseLeave: (e) => {
+                        e.currentTarget.style.backgroundColor = "transparent";
+                      },
+                      children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ITText, { as: "span", children: item.label })
+                    }
+                  ) }, index)) })
+                ]
+              }
+            )
+          ] }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("main", { className: "flex-1 overflow-y-auto relative", style: { backgroundColor: theme.layout.backgroundColor }, children })
   ] });
 }
 
 // src/components/page/page.tsx
-var import_clsx28 = __toESM(require("clsx"), 1);
+var import_clsx29 = __toESM(require("clsx"), 1);
 
 // src/components/page-header/page-header.tsx
-var import_fa16 = require("react-icons/fa");
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_fa18 = require("react-icons/fa");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 function ITPageHeader({
   title,
   description,
   breadcrumbs,
   actions,
   backAction,
+  icon,
+  iconColor,
   className
 }) {
   const showTopRow = breadcrumbs?.length || backAction;
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className, children: [
-    showTopRow && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex items-center justify-between gap-4 mb-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex items-center gap-2 min-w-0", children: [
-        backAction && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: `${className} space-y-3`, children: [
+    showTopRow && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex items-center justify-between gap-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex items-center gap-2 min-w-0", children: [
+        backAction && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
           "button",
           {
             onClick: backAction,
-            className: "p-1.5 rounded-lg text-slate-400 hover:text-slate-600 hover:bg-slate-100 dark:text-slate-500 dark:hover:text-slate-200 dark:hover:bg-slate-800 transition-colors flex-shrink-0",
+            className: "flex items-center justify-center w-9 h-9 rounded-full border border-slate-200 dark:border-slate-700 text-slate-400 hover:text-slate-700 dark:hover:text-slate-200 hover:border-slate-300 dark:hover:border-slate-600 hover:bg-slate-50 dark:hover:bg-slate-800/60 transition-all duration-200 flex-shrink-0",
             "aria-label": "Volver",
-            children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_fa16.FaChevronLeft, { size: 14 })
+            children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_fa18.FaChevronLeft, { size: 14 })
           }
         ),
-        breadcrumbs && breadcrumbs.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ITBreadcrumbs, { items: breadcrumbs })
+        breadcrumbs && breadcrumbs.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ITBreadcrumbs, { items: breadcrumbs })
       ] }),
-      actions && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "flex items-center gap-2 flex-shrink-0", children: actions })
+      actions && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "flex items-center gap-3 flex-shrink-0", children: actions })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex items-start justify-between gap-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "min-w-0", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ITText, { as: "h1", className: "text-2xl font-extrabold text-slate-800 dark:text-white tracking-tight", children: title }),
-        description && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ITText, { as: "p", className: "text-sm text-slate-500 dark:text-slate-400 mt-0.5", children: description })
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex items-start justify-between gap-6", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex items-start gap-4 min-w-0", children: [
+        icon && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+          "div",
+          {
+            className: "flex items-center justify-center w-12 h-12 rounded-full border border-slate-200 dark:border-slate-700 bg-slate-50/50 dark:bg-slate-800/50 text-slate-600 dark:text-slate-300 flex-shrink-0 transition-all duration-200 hover:border-slate-300 dark:hover:border-slate-500 hover:shadow-sm",
+            style: iconColor ? { color: iconColor } : void 0,
+            children: icon
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "min-w-0", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+            ITText,
+            {
+              as: "h1",
+              className: "text-3xl font-bold text-slate-800 dark:text-white tracking-tight leading-tight",
+              children: title
+            }
+          ),
+          description && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+            ITText,
+            {
+              as: "p",
+              className: "text-sm font-light text-slate-500 dark:text-slate-400 mt-1 leading-relaxed",
+              children: description
+            }
+          )
+        ] })
       ] }),
-      !showTopRow && actions && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "flex items-center gap-2 flex-shrink-0", children: actions })
+      !showTopRow && actions && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "flex items-center gap-3 flex-shrink-0", children: actions })
     ] })
   ] });
 }
 
 // src/components/skeleton/skeleton.tsx
-var import_clsx26 = __toESM(require("clsx"), 1);
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_clsx27 = __toESM(require("clsx"), 1);
+var import_jsx_runtime35 = require("react/jsx-runtime");
 var variantClasses = {
   text: "rounded-md h-4 w-full",
   circular: "rounded-full",
@@ -6715,10 +7108,10 @@ function ITSkeleton({
     ...style
   };
   const items = Array.from({ length: count }, (_, i) => i);
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_jsx_runtime34.Fragment, { children: items.map((i) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_jsx_runtime35.Fragment, { children: items.map((i) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
     "div",
     {
-      className: (0, import_clsx26.default)(
+      className: (0, import_clsx27.default)(
         "animate-pulse bg-slate-200 dark:bg-slate-700",
         variantClasses[variant],
         variant === "text" && count > 1 && i < count - 1 && "mb-2",
@@ -6734,9 +7127,9 @@ function ITSkeleton({
 }
 
 // src/components/stack/stack.tsx
-var import_clsx27 = __toESM(require("clsx"), 1);
-var import_react25 = require("react");
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_clsx28 = __toESM(require("clsx"), 1);
+var import_react26 = require("react");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 var directionMap2 = {
   row: "flex-row",
   column: "flex-col",
@@ -6776,15 +7169,15 @@ function ITStack({
   as: Component = "div"
 }) {
   const hasDivider = divider !== void 0;
-  const items = import_react25.Children.toArray(children);
+  const items = import_react26.Children.toArray(children);
   const resolvedStyle = {
     gap: spacing > 0 ? `${spacing * 0.25}rem` : void 0,
     ...style
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
     Component,
     {
-      className: (0, import_clsx27.default)(
+      className: (0, import_clsx28.default)(
         "flex",
         directionMap2[direction],
         alignItems && alignMap2[alignItems],
@@ -6793,27 +7186,29 @@ function ITStack({
         className
       ),
       style: resolvedStyle,
-      children: hasDivider ? items.map((child, index) => /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_react25.Fragment, { children: [
+      children: hasDivider ? items.map((child, index) => /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_react26.Fragment, { children: [
         child,
-        index < items.length - 1 && (0, import_react25.isValidElement)(divider) ? (0, import_react25.cloneElement)(divider, { key: `divider-${index}` }) : null
+        index < items.length - 1 && (0, import_react26.isValidElement)(divider) ? (0, import_react26.cloneElement)(divider, { key: `divider-${index}` }) : null
       ] }, index)) : children
     }
   );
 }
 
 // src/components/page/page.tsx
-var import_jsx_runtime36 = require("react/jsx-runtime");
-var hasHeader = (props) => !!(props.title || props.description || props.breadcrumbs || props.actions || props.backAction);
+var import_jsx_runtime37 = require("react/jsx-runtime");
+var hasHeader = (props) => !!(props.title || props.description || props.breadcrumbs || props.actions || props.backAction || props.icon);
 var renderHeader = (props) => {
   if (!hasHeader(props)) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
     ITPageHeader,
     {
       title: props.title || "",
       description: props.description,
       breadcrumbs: props.breadcrumbs,
       actions: props.actions,
-      backAction: props.backAction
+      backAction: props.backAction,
+      icon: props.icon,
+      iconColor: props.iconColor
     }
   );
 };
@@ -6829,28 +7224,36 @@ function ITPage(props) {
     emptyDescription,
     emptyAction,
     className,
-    children
+    children,
+    maxWidth = "7xl",
+    noPadding = false
   } = props;
-  const wrapperClass = (0, import_clsx28.default)("space-y-6", className);
+  const wrapperClass = (0, import_clsx29.default)(
+    "mx-auto w-full",
+    !noPadding && "px-4 sm:px-6 lg:px-8 py-6",
+    `max-w-${maxWidth}`,
+    "space-y-8",
+    className
+  );
   if (loading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: wrapperClass, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: wrapperClass, children: [
       renderHeader(props),
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(ITStack, { spacing: 4, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ITSkeleton, { variant: "rectangular", height: 40, width: "40%" }),
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ITSkeleton, { variant: "rectangular", height: 200 }),
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ITSkeleton, { variant: "rectangular", height: 200 })
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(ITStack, { spacing: 6, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ITSkeleton, { variant: "rectangular", height: 40, width: "40%", className: "rounded-lg" }),
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ITSkeleton, { variant: "rectangular", height: 200, className: "rounded-lg" }),
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ITSkeleton, { variant: "rectangular", height: 200, className: "rounded-lg" })
       ] })
     ] });
   }
   if (error) {
-    return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: wrapperClass, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: wrapperClass, children: [
       renderHeader(props),
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
         ITEmptyState,
         {
           title: errorTitle || "Error",
           description: error,
-          action: onRetry ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+          action: onRetry ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
             ITButton,
             {
               label: errorActionLabel || "Reintentar",
@@ -6863,9 +7266,9 @@ function ITPage(props) {
     ] });
   }
   if (empty) {
-    return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: wrapperClass, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: wrapperClass, children: [
       renderHeader(props),
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
         ITEmptyState,
         {
           title: emptyTitle || "Sin datos",
@@ -6875,16 +7278,16 @@ function ITPage(props) {
       )
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: wrapperClass, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: wrapperClass, children: [
     renderHeader(props),
     children
   ] });
 }
 
 // src/components/popover/popover.tsx
-var import_react26 = require("react");
-var import_clsx29 = __toESM(require("clsx"), 1);
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_react27 = require("react");
+var import_clsx30 = __toESM(require("clsx"), 1);
+var import_jsx_runtime38 = require("react/jsx-runtime");
 var positionClasses = {
   top: "bottom-full left-1/2 -translate-x-1/2 mb-2",
   bottom: "top-full left-1/2 -translate-x-1/2 mt-2",
@@ -6899,23 +7302,23 @@ function ITPopover({
   onClose,
   className
 }) {
-  const [internalOpen, setInternalOpen] = (0, import_react26.useState)(false);
+  const [internalOpen, setInternalOpen] = (0, import_react27.useState)(false);
   const isControlled = controlledOpen !== void 0;
   const open = isControlled ? controlledOpen : internalOpen;
-  const ref = (0, import_react26.useRef)(null);
+  const ref = (0, import_react27.useRef)(null);
   useClickOutside_default(ref, () => {
     if (isControlled) onClose?.();
     else setInternalOpen(false);
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { ref, className: (0, import_clsx29.default)("relative inline-flex", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { onClick: () => isControlled ? onClose?.() : setInternalOpen((p) => !p), className: "cursor-pointer", children: trigger }),
-    open && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: (0, import_clsx29.default)("absolute z-[200]", positionClasses[position]), children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "bg-white dark:bg-slate-800 rounded-xl shadow-xl border border-slate-200 dark:border-slate-700 p-3 min-w-[160px]", children }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { ref, className: (0, import_clsx30.default)("relative inline-flex", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { onClick: () => isControlled ? onClose?.() : setInternalOpen((p) => !p), className: "cursor-pointer", children: trigger }),
+    open && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: (0, import_clsx30.default)("absolute z-[200]", positionClasses[position]), children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "bg-white dark:bg-slate-800 rounded-xl shadow-xl border border-slate-200 dark:border-slate-700 p-3 min-w-[160px]", children }) })
   ] });
 }
 
 // src/components/progress/progress.tsx
-var import_clsx30 = __toESM(require("clsx"), 1);
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_clsx31 = __toESM(require("clsx"), 1);
+var import_jsx_runtime39 = require("react/jsx-runtime");
 var colorMap = {
   primary: "bg-primary-500",
   secondary: "bg-secondary-500",
@@ -6942,18 +7345,18 @@ function ITProgress({
   style
 }) {
   const pct = Math.min(Math.max(value / max * 100, 0), 100);
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     "div",
     {
-      className: (0, import_clsx30.default)("w-full bg-slate-200 dark:bg-slate-700 rounded-full overflow-hidden", sizeMap3[size], className),
+      className: (0, import_clsx31.default)("w-full bg-slate-200 dark:bg-slate-700 rounded-full overflow-hidden", sizeMap3[size], className),
       style,
       role: "progressbar",
       "aria-valuenow": variant === "determinate" ? value : void 0,
       "aria-valuemax": max,
-      children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
         "div",
         {
-          className: (0, import_clsx30.default)(
+          className: (0, import_clsx31.default)(
             "h-full rounded-full transition-all duration-500",
             colorMap[color],
             variant === "indeterminate" && "animate-pulse w-1/2"
@@ -6966,8 +7369,8 @@ function ITProgress({
 }
 
 // src/components/radio/radio.tsx
-var import_clsx31 = __toESM(require("clsx"), 1);
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_clsx32 = __toESM(require("clsx"), 1);
+var import_jsx_runtime40 = require("react/jsx-runtime");
 function ITRadioGroup({
   name,
   value,
@@ -6977,25 +7380,25 @@ function ITRadioGroup({
   direction = "column",
   className
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
     "div",
     {
-      className: (0, import_clsx31.default)(
+      className: (0, import_clsx32.default)(
         "flex gap-3",
         direction === "row" ? "flex-row flex-wrap" : "flex-col",
         className
       ),
       children: options.map((opt) => {
         const isSelected = opt.value === value;
-        return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+        return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
           "label",
           {
-            className: (0, import_clsx31.default)(
+            className: (0, import_clsx32.default)(
               "inline-flex items-center gap-2 cursor-pointer select-none",
               disabled && "opacity-50 cursor-not-allowed"
             ),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
                 "input",
                 {
                   type: "radio",
@@ -7007,18 +7410,18 @@ function ITRadioGroup({
                   className: "peer sr-only"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
                 "div",
                 {
-                  className: (0, import_clsx31.default)(
+                  className: (0, import_clsx32.default)(
                     "w-4 h-4 rounded-full border-2 flex items-center justify-center transition-all",
                     isSelected ? "border-primary-500" : "border-slate-300 dark:border-slate-600",
                     !disabled && "peer-focus:ring-2 peer-focus:ring-primary-200"
                   ),
-                  children: isSelected && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "w-2 h-2 rounded-full bg-primary-500" })
+                  children: isSelected && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "w-2 h-2 rounded-full bg-primary-500" })
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(ITText, { as: "span", className: "text-sm text-slate-700 dark:text-slate-300", children: opt.label })
+              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ITText, { as: "span", className: "text-sm text-slate-700 dark:text-slate-300", children: opt.label })
             ]
           },
           opt.value
@@ -7028,189 +7431,12 @@ function ITRadioGroup({
   );
 }
 
-// src/components/search-select/search-select.tsx
-var import_react27 = require("react");
-var import_clsx32 = __toESM(require("clsx"), 1);
-var import_fa17 = require("react-icons/fa");
-var import_jsx_runtime40 = require("react/jsx-runtime");
-function ITSearchSelect({
-  name,
-  options = [],
-  label,
-  placeholder = "Selecciona una opci\xF3n",
-  valueField = "value",
-  labelField = "label",
-  value,
-  onChange,
-  onBlur,
-  disabled = false,
-  className,
-  touched,
-  required,
-  error,
-  readOnly = false,
-  onSearch,
-  isLoading = false,
-  noResultsMessage = "No se encontraron resultados"
-}) {
-  const [isOpen, setIsOpen] = (0, import_react27.useState)(false);
-  const [searchTerm, setSearchTerm] = (0, import_react27.useState)("");
-  const [isFocused, setIsFocused] = (0, import_react27.useState)(false);
-  const [localTouched, setLocalTouched] = (0, import_react27.useState)(false);
-  const containerRef = (0, import_react27.useRef)(null);
-  const timeoutRef = (0, import_react27.useRef)(null);
-  const selectedOption = (0, import_react27.useMemo)(() => {
-    return options.find((opt) => opt[valueField] === value);
-  }, [options, value, valueField]);
-  (0, import_react27.useEffect)(() => {
-    if (!isFocused) {
-      setSearchTerm(selectedOption ? String(selectedOption[labelField]) : "");
-    }
-  }, [selectedOption, isFocused, labelField]);
-  (0, import_react27.useEffect)(() => {
-    function handleClickOutside(event) {
-      if (containerRef.current && !containerRef.current.contains(event.target)) {
-        setIsOpen(false);
-      }
-    }
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, []);
-  const filteredOptions = (0, import_react27.useMemo)(() => {
-    if (onSearch) return options;
-    if (!searchTerm || !isFocused) return options;
-    return options.filter(
-      (opt) => String(opt[labelField]).toLowerCase().includes(searchTerm.toLowerCase())
-    );
-  }, [options, searchTerm, onSearch, labelField, isFocused]);
-  const handleInputChange = (e) => {
-    const query = e.target.value;
-    setSearchTerm(query);
-    setIsOpen(true);
-    if (onSearch) {
-      if (timeoutRef.current) clearTimeout(timeoutRef.current);
-      timeoutRef.current = setTimeout(() => {
-        onSearch(query);
-      }, 500);
-    }
-  };
-  const handleSelect = (option) => {
-    if (onChange) {
-      onChange(option[valueField], option);
-    }
-    setSearchTerm(String(option[labelField]));
-    setIsOpen(false);
-  };
-  const handleFocus = () => {
-    if (disabled || readOnly) return;
-    setIsFocused(true);
-    setIsOpen(true);
-  };
-  const handleInputBlur = (e) => {
-    setTimeout(() => {
-      setIsFocused(false);
-      setLocalTouched(true);
-      onBlur?.(e);
-    }, 200);
-  };
-  const inputTheme = theme.input || {};
-  const isTouched = touched !== void 0 ? touched : localTouched;
-  const isEmpty = value === void 0 || value === null || String(value).trim() === "";
-  const effectiveError = error !== void 0 && error !== false ? error === true ? "Este campo es requerido" : error : required && isEmpty ? "Este campo es requerido" : void 0;
-  const hasError = isTouched && !!effectiveError;
-  const errorMessage = typeof effectiveError === "string" ? effectiveError : "Este campo es requerido";
-  const getInputStyle = () => {
-    const style = {
-      backgroundColor: inputTheme.backgroundColor || "#ffffff",
-      borderColor: inputTheme.borderColor || "#e2e8f0",
-      borderRadius: inputTheme.borderRadius || "0.5rem",
-      padding: inputTheme.padding || "0.5rem 0.75rem",
-      fontSize: inputTheme.fontSize || "0.875rem",
-      borderWidth: "1px",
-      borderStyle: "solid",
-      transition: "all 0.2s",
-      color: "var(--input-text-color, var(--color-secondary-900))",
-      width: "100%"
-    };
-    if (disabled) {
-      style.backgroundColor = inputTheme.disabled?.backgroundColor || "#f1f5f9";
-      style.borderColor = inputTheme.disabled?.borderColor || "#e2e8f0";
-      style.opacity = 0.7;
-      style.cursor = "not-allowed";
-    }
-    if (hasError) {
-      style.borderColor = inputTheme.error?.borderColor || "red";
-      if (isFocused) {
-        style.boxShadow = inputTheme.error?.ring;
-      }
-    } else if (isFocused && !readOnly) {
-      style.boxShadow = inputTheme.focus?.ring;
-      style.borderColor = inputTheme.focus?.borderColor;
-    }
-    return style;
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: (0, import_clsx32.default)("w-full flex flex-col gap-1.5", className, isOpen && "relative z-30"), ref: containerRef, children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
-      ITText,
-      {
-        as: "label",
-        className: (0, import_clsx32.default)("text-sm font-medium text-gray-700 dark:text-slate-300", {
-          "text-red-500": hasError
-        }),
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ITText, { as: "span", children: label }),
-          required && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ITText, { as: "span", className: "text-red-500 ml-1", children: "*" })
-        ]
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "relative", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "relative flex items-center", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-          "input",
-          {
-            type: "text",
-            name,
-            value: searchTerm,
-            onChange: handleInputChange,
-            onFocus: handleFocus,
-            onBlur: handleInputBlur,
-            disabled,
-            readOnly,
-            placeholder,
-            className: "outline-none pr-10",
-            style: getInputStyle(),
-            autoComplete: "off"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "absolute right-3 flex items-center gap-2 text-gray-400 pointer-events-none", children: [
-          isLoading && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "animate-spin h-4 w-4 border-2 border-primary-500 border-t-transparent rounded-full" }),
-          !isLoading && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_fa17.FaSearch, { size: 14, className: (0, import_clsx32.default)({ "text-primary-500": isFocused }) })
-        ] })
-      ] }),
-      isOpen && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "absolute z-50 w-full mt-1 bg-white dark:bg-slate-900 border border-gray-200 dark:border-slate-800 rounded-lg shadow-xl overflow-hidden animate-in fade-in zoom-in duration-200 origin-top", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "max-h-60 overflow-y-auto", children: filteredOptions.length > 0 ? filteredOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-        ITText,
-        {
-          as: "div",
-          onClick: () => handleSelect(option),
-          className: (0, import_clsx32.default)(
-            "px-4 py-2 text-sm cursor-pointer transition-colors",
-            value === option[valueField] ? "bg-primary-50 dark:bg-primary-950/40 text-primary-700 dark:text-primary-300 font-medium" : "hover:bg-gray-50 dark:hover:bg-slate-800 text-gray-700 dark:text-slate-300"
-          ),
-          children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ITText, { as: "span", children: option[labelField] })
-        },
-        option[valueField]
-      )) : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ITText, { as: "div", className: "px-4 py-6 text-sm text-center text-gray-500 italic", children: isLoading ? "Cargando..." : noResultsMessage }) }) })
-    ] }),
-    hasError && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ITText, { as: "p", className: "text-red-500 text-xs mt-1", children: errorMessage })
-  ] });
-}
-
 // src/components/searchTable/searchTable.tsx
 var import_clsx34 = __toESM(require("clsx"), 1);
 var import_react28 = require("react");
 
 // src/components/searchTable/components/SearchInput.tsx
-var import_fa18 = require("react-icons/fa");
+var import_fa19 = require("react-icons/fa");
 var import_jsx_runtime41 = require("react/jsx-runtime");
 function SearchInput({
   placeholder = "Buscar en todos los campos...",
@@ -7219,7 +7445,7 @@ function SearchInput({
   className = ""
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: `relative flex-1 ${className}`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_fa18.FaSearch, { className: "h-5 w-5 text-gray-400" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_fa19.FaSearch, { className: "h-5 w-5 text-gray-400" }) }),
     /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
       ITInput,
       {
@@ -7236,7 +7462,7 @@ function SearchInput({
 }
 
 // src/components/searchTable/components/SortButton.tsx
-var import_fa19 = require("react-icons/fa");
+var import_fa20 = require("react-icons/fa");
 var import_jsx_runtime42 = require("react/jsx-runtime");
 function SortButton({
   sortConfig,
@@ -7251,7 +7477,7 @@ function SortButton({
       "aria-label": `Ordenar tabla ${sortConfig ? sortConfig.direction === "asc" ? "descendente" : "ascendente" : "ascendente"}`,
       title: "Ordenar tabla",
       children: [
-        sortConfig ? sortConfig.direction === "asc" ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_fa19.FaSortUp, { className: "w-4 h-4 text-slate-500" }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_fa19.FaSortDown, { className: "w-4 h-4 text-slate-500" }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_fa19.FaSort, { className: "w-4 h-4 text-gray-500" }),
+        sortConfig ? sortConfig.direction === "asc" ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_fa20.FaSortUp, { className: "w-4 h-4 text-slate-500" }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_fa20.FaSortDown, { className: "w-4 h-4 text-slate-500" }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_fa20.FaSort, { className: "w-4 h-4 text-gray-500" }),
         /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ITText, { as: "span", className: "text-sm font-medium text-gray-700", children: sortConfig ? sortConfig.direction === "asc" ? "Asc \u2191" : "Desc \u2193" : "Ordenar" })
       ]
     }
@@ -7354,7 +7580,7 @@ var getNestedValue4 = (obj, path) => {
 
 // src/components/searchTable/components/TableRow.tsx
 var import_clsx33 = __toESM(require("clsx"), 1);
-var import_fa20 = require("react-icons/fa");
+var import_fa21 = require("react-icons/fa");
 
 // src/components/searchTable/components/EditableCell.tsx
 var import_jsx_runtime46 = require("react/jsx-runtime");
@@ -7510,13 +7736,13 @@ function TableRow({
         return typeof value === "number" && col.currencyMX ? formatCurrencyMX2(value) : value;
       case "boolean":
         return value ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
-          import_fa20.FaCheck,
+          import_fa21.FaCheck,
           {
             className: "text-green-500",
             "aria-label": "Verdadero",
             title: "Verdadero"
           }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_fa20.FaTimes, { className: "text-red-500", "aria-label": "Falso", title: "Falso" });
+        ) : /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_fa21.FaTimes, { className: "text-red-500", "aria-label": "Falso", title: "Falso" });
       case "actions":
         if (isEditing && col.saveActions) {
           return col.saveActions(rowData, {
@@ -7590,7 +7816,7 @@ function TableEmptyState({
 }
 
 // src/components/searchTable/components/PaginationControls.tsx
-var import_fa21 = require("react-icons/fa");
+var import_fa22 = require("react-icons/fa");
 
 // src/components/searchTable/components/PaginationInfo.tsx
 var import_jsx_runtime49 = require("react/jsx-runtime");
@@ -7656,7 +7882,7 @@ function PaginationControls({
           className: "min-w-[32px]",
           ariaLabel: "P\xE1gina anterior",
           title: "Ir a la p\xE1gina anterior",
-          children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_fa21.FaArrowLeft, { "aria-hidden": "true" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_fa22.FaArrowLeft, { "aria-hidden": "true" })
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(ITText, { as: "span", className: "px-4 py-2 text-sm text-gray-700", "aria-live": "polite", children: [
@@ -7675,7 +7901,7 @@ function PaginationControls({
           className: "min-w-[32px]",
           ariaLabel: "P\xE1gina siguiente",
           title: "Ir a la p\xE1gina siguiente",
-          children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_fa21.FaArrowRight, { "aria-hidden": "true" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_fa22.FaArrowRight, { "aria-hidden": "true" })
         }
       )
     ] })
@@ -7827,7 +8053,7 @@ function ITSearchTable({
 
 // src/components/sidebar/sidebar.tsx
 var import_react29 = require("react");
-var import_fa22 = require("react-icons/fa");
+var import_fa23 = require("react-icons/fa");
 var import_jsx_runtime52 = require("react/jsx-runtime");
 function ITSidebar({
   navigationItems = [],
@@ -7987,7 +8213,7 @@ function ITSidebar({
                 {
                   className: `flex-shrink-0 transition-transform duration-300 ease-[cubic-bezier(0.2,0,0,1)] ${expandedItems.has(item.id) ? "rotate-180" : ""}`,
                   style: { color: item.isActive ? "var(--sidebar-active-color, #0f172a)" : "var(--sidebar-icon-color, #64748b)", opacity: 0.7 },
-                  children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_fa22.FaChevronDown, { className: "w-3 h-3" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_fa23.FaChevronDown, { className: "w-3 h-3" })
                 }
               ),
               item.badge && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
@@ -8395,7 +8621,7 @@ var positionStyles = {
 // src/components/toast/toast.tsx
 var import_clsx40 = __toESM(require("clsx"), 1);
 var import_react31 = require("react");
-var import_fa23 = require("react-icons/fa");
+var import_fa24 = require("react-icons/fa");
 var import_jsx_runtime58 = require("react/jsx-runtime");
 function ITToast({
   message,
@@ -8425,15 +8651,15 @@ function ITToast({
   const TypeIcon = () => {
     switch (type) {
       case "success":
-        return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_fa23.FaCheckCircle, { className: "w-5 h-5 flex-shrink-0" });
+        return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_fa24.FaCheckCircle, { className: "w-5 h-5 flex-shrink-0" });
       case "error":
       case "danger":
-        return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_fa23.FaTimesCircle, { className: "w-5 h-5 flex-shrink-0" });
+        return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_fa24.FaTimesCircle, { className: "w-5 h-5 flex-shrink-0" });
       case "warning":
-        return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_fa23.FaExclamationTriangle, { className: "w-5 h-5 flex-shrink-0" });
+        return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_fa24.FaExclamationTriangle, { className: "w-5 h-5 flex-shrink-0" });
       case "info":
       default:
-        return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_fa23.FaInfoCircle, { className: "w-5 h-5 flex-shrink-0" });
+        return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_fa24.FaInfoCircle, { className: "w-5 h-5 flex-shrink-0" });
     }
   };
   return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
@@ -8462,7 +8688,7 @@ function ITToast({
             onClick: handleClose,
             className: "p-1.5 rounded-full hover:bg-black/15 transition-colors focus:outline-none focus:ring-2 focus:ring-white/50",
             "aria-label": "Close notification",
-            children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_fa23.FaTimes, { className: "w-4 h-4" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_fa24.FaTimes, { className: "w-4 h-4" })
           }
         )
       ]
@@ -8474,7 +8700,8 @@ function ITToast({
 var import_react32 = require("react");
 var import_react_dropzone = require("react-dropzone");
 var import_clsx41 = __toESM(require("clsx"), 1);
-var import_jsx_runtime59 = require("react/jsx-runtime");
+
+// src/components/dropfile/dropfile.props.ts
 var FileTypeEnum = /* @__PURE__ */ ((FileTypeEnum2) => {
   FileTypeEnum2["PDF"] = "application/pdf";
   FileTypeEnum2["XLS"] = "application/vnd.ms-excel";
@@ -8492,6 +8719,9 @@ var UploadStatus = /* @__PURE__ */ ((UploadStatus2) => {
   UploadStatus2["ERROR"] = "error";
   return UploadStatus2;
 })(UploadStatus || {});
+
+// src/components/dropfile/dropfile.tsx
+var import_jsx_runtime59 = require("react/jsx-runtime");
 var ITDropfile = ({
   onFileSelect,
   onCancel,
@@ -8787,7 +9017,7 @@ var import_react34 = require("react");
 var import_clsx42 = __toESM(require("clsx"), 1);
 
 // src/components/topbar/topbar.tsx
-var import_fa24 = require("react-icons/fa");
+var import_fa25 = require("react-icons/fa");
 var import_react33 = require("react");
 var import_jsx_runtime60 = require("react/jsx-runtime");
 function ITTopBar({
@@ -8823,7 +9053,7 @@ function ITTopBar({
               onMouseEnter: (e) => e.currentTarget.style.backgroundColor = "var(--topbar-user-hover, #f1f5f9)",
               onMouseLeave: (e) => e.currentTarget.style.backgroundColor = "transparent",
               onClick: onToggleMobileMenu,
-              children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_fa24.FaBars, { className: "w-[1.125rem] h-[1.125rem]" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_fa25.FaBars, { className: "w-[1.125rem] h-[1.125rem]" })
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "flex items-center gap-3", children: [
@@ -8885,7 +9115,7 @@ function ITTopBar({
                       src: userMenu.userImage,
                       alt: "Current user"
                     }
-                  ) : /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "w-9 h-9 rounded-full bg-slate-100 flex items-center justify-center ring-2 ring-white shadow-sm", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_fa24.FaUserCircle, { className: "w-6 h-6", style: { color: "var(--topbar-icon, #94a3b8)" } }) }),
+                  ) : /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "w-9 h-9 rounded-full bg-slate-100 flex items-center justify-center ring-2 ring-white shadow-sm", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_fa25.FaUserCircle, { className: "w-6 h-6", style: { color: "var(--topbar-icon, #94a3b8)" } }) }),
                   /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "absolute bottom-0 right-0 w-2.5 h-2.5 bg-green-500 border-2 border-white rounded-full" })
                 ] }),
                 /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "hidden sm:flex flex-col text-left py-0.5", children: [
@@ -8970,8 +9200,13 @@ function ITLayout({
   className = "",
   contentClassName = ""
 }) {
-  const [desktopCollapsed, setDesktopCollapsed] = (0, import_react34.useState)(true);
+  const [internalCollapsed, setInternalCollapsed] = (0, import_react34.useState)(true);
   const [mobileSidebarOpen, setMobileSidebarOpen] = (0, import_react34.useState)(false);
+  const isControlled = sidebar.isCollapsed !== void 0;
+  const desktopCollapsed = isControlled ? sidebar.isCollapsed : internalCollapsed;
+  const handleToggleCollapse = isControlled ? sidebar.onToggleCollapse ?? (() => {
+  }) : () => setInternalCollapsed((v) => !v);
+  const layoutTokens = theme.layout;
   return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: `flex flex-col h-screen overflow-hidden w-full ${className}`, children: [
     /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
       ITTopBar,
@@ -8981,48 +9216,55 @@ function ITLayout({
         onToggleMobileMenu: () => setMobileSidebarOpen((v) => !v)
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "flex flex-1 overflow-hidden relative", style: { backgroundColor: "var(--layout-bg, #f8fafc)" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "hidden lg:block relative z-40 h-full", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "w-[88px] h-full flex-shrink-0" }),
-        /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "absolute top-0 left-0 h-full", children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
-          ITSidebar,
-          {
-            ...sidebar,
-            isCollapsed: desktopCollapsed,
-            onToggleCollapse: () => setDesktopCollapsed((v) => !v),
-            visibleOnMobile: false,
-            className: `h-full drop-shadow-2xl transition-all duration-400 ease-[cubic-bezier(0.2,0,0,1)] flex-shrink-0`
-          }
-        ) })
-      ] }),
-      mobileSidebarOpen && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
-        "div",
-        {
-          className: "lg:hidden fixed inset-0 z-50 transition-opacity duration-300 backdrop-blur-sm bg-black/40",
-          onClick: () => setMobileSidebarOpen(false),
-          children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
+      "div",
+      {
+        className: "flex flex-1 overflow-hidden relative",
+        style: { backgroundColor: layoutTokens.backgroundColor },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "hidden lg:block relative z-40 h-full", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "w-[88px] h-full flex-shrink-0" }),
+            /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "absolute top-0 left-0 h-full", children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+              ITSidebar,
+              {
+                ...sidebar,
+                isCollapsed: desktopCollapsed,
+                onToggleCollapse: handleToggleCollapse,
+                visibleOnMobile: false,
+                className: "h-full drop-shadow-2xl transition-all duration-400 ease-[cubic-bezier(0.2,0,0,1)] flex-shrink-0"
+              }
+            ) })
+          ] }),
+          mobileSidebarOpen && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
             "div",
             {
-              className: "h-full w-fit flex transform transition-transform duration-300 ease-[cubic-bezier(0.2,0,0,1)]",
-              onClick: (e) => e.stopPropagation(),
+              className: "lg:hidden fixed inset-0 z-50 transition-opacity duration-300 backdrop-blur-sm bg-black/40",
+              onClick: () => setMobileSidebarOpen(false),
               children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
-                ITSidebar,
+                "div",
                 {
-                  ...sidebar,
-                  isCollapsed: false,
-                  visibleOnMobile: true,
-                  className: "h-full shadow-2xl relative z-[60]",
-                  onToggleCollapse: () => setMobileSidebarOpen(false),
-                  onItemClick: () => setMobileSidebarOpen(false),
-                  onSubItemClick: () => setMobileSidebarOpen(false)
+                  className: "h-full w-fit flex transform transition-transform duration-300 ease-[cubic-bezier(0.2,0,0,1)]",
+                  onClick: (e) => e.stopPropagation(),
+                  children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+                    ITSidebar,
+                    {
+                      ...sidebar,
+                      isCollapsed: false,
+                      visibleOnMobile: true,
+                      className: "h-full shadow-2xl relative z-[60]",
+                      onToggleCollapse: () => setMobileSidebarOpen(false),
+                      onItemClick: () => setMobileSidebarOpen(false),
+                      onSubItemClick: () => setMobileSidebarOpen(false)
+                    }
+                  )
                 }
               )
             }
-          )
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("main", { className: "flex-1 overflow-y-auto w-full custom-scrollbar relative z-0", children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: (0, import_clsx42.default)("mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8 py-6 h-full", contentClassName), children }) })
-    ] })
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("main", { className: "flex-1 overflow-y-auto w-full custom-scrollbar relative z-0", children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: (0, import_clsx42.default)("mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8 py-6 h-full", contentClassName), children }) })
+        ]
+      }
+    )
   ] });
 }
 
@@ -9114,7 +9356,7 @@ function ITLoader({
 // src/components/stepper/stepper.tsx
 var import_clsx43 = __toESM(require("clsx"), 1);
 var import_react35 = require("react");
-var import_fa25 = require("react-icons/fa");
+var import_fa26 = require("react-icons/fa");
 var import_jsx_runtime63 = require("react/jsx-runtime");
 function ITStepper({
   steps,
@@ -9182,7 +9424,7 @@ function ITStepper({
   const renderStepContent = (index, isCompleted, isActive) => {
     const step = steps[index];
     if (isCompleted) {
-      return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_fa25.FaCheck, { className: "w-4 h-4" });
+      return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_fa26.FaCheck, { className: "w-4 h-4" });
     }
     if (step.icon && useIcons) {
       return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "flex items-center justify-center w-5 h-5", children: step.icon });
@@ -9278,7 +9520,7 @@ function ITStepper({
           disabled: currentStep === 0,
           onClick: prevStep,
           children: /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_fa25.FaChevronLeft, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_fa26.FaChevronLeft, {}),
             /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(ITText, { as: "span", children: "Atr\xE1s" })
           ] })
         }
@@ -9299,7 +9541,7 @@ function ITStepper({
             onClick: nextStep,
             children: /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "flex items-center gap-2", children: [
               /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(ITText, { as: "span", children: currentStep === steps.length - 1 ? "Finalizar" : "Siguiente" }),
-              currentStep === steps.length - 1 ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_fa25.FaCheck, {}) : /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_fa25.FaChevronRight, {})
+              currentStep === steps.length - 1 ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_fa26.FaCheck, {}) : /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_fa26.FaChevronRight, {})
             ] })
           }
         )