@axzydev/axzy_ui_system 1.0.169 → 1.1.0

package/dist/index.cjs

@@ -1422,10 +1422,10 @@ var DEFAULT_PALETTE = {
   warning: "#eab308",
   // Yellow
   layout: {
-    sidebarBg: "#0f172a",
-    // Dark slate-900
-    sidebarText: "#94a3b8",
-    // Slate-400
+    sidebarBg: "#ffffff",
+    // White (light mode default)
+    sidebarText: "#334155",
+    // Slate-700 (dark text for light sidebar)
     navbarBg: "#ffffff",
     // White
     navbarText: "#1e293b"
@@ -1450,25 +1450,29 @@ var PRESETS = [
       // Indigo
       secondary: "#475569",
       // Slate
-      ternary: "#a855f7",
-      // Purple
+      ternary: "#f472b6",
+      // Pink (was Purple — now distinct from primary)
       danger: "#ef4444",
-      success: "#22c55e",
+      // Red
+      success: "#34d399",
+      // Emerald (distinct green tone)
       info: "#38bdf8",
-      alert: "#f97316",
-      warning: "#eab308",
+      // Sky
+      alert: "#fb923c",
+      // Orange
+      warning: "#fbbf24",
+      // Amber
       layout: {
         sidebarBg: "#020617",
-        // Slate-950
         sidebarText: "#cbd5e1",
         navbarBg: "#0f172a",
         navbarText: "#f8fafc"
       },
       table: {
-        headerBg: "#1e293b",
-        headerText: "#e2e8f0",
-        rowBg: "#0f172a",
-        rowText: "#cbd5e1"
+        headerBg: "#f8fafc",
+        headerText: "#334155",
+        rowBg: "#ffffff",
+        rowText: "#1e293b"
       }
     }
   },
@@ -1478,25 +1482,30 @@ var PRESETS = [
       primary: "#f43f5e",
       // Rose
       secondary: "#64748b",
+      // Slate
       ternary: "#fb923c",
       // Orange
-      danger: "#dc2626",
-      success: "#16a34a",
-      info: "#0ea5e9",
-      alert: "#f97316",
-      warning: "#facc15",
+      danger: "#b91c1c",
+      // Dark Red (distinct from Rose primary)
+      success: "#2dd4bf",
+      // Teal (NOT green — avoids confusion with primary hue)
+      info: "#818cf8",
+      // Indigo (distinct from sky/cyan)
+      alert: "#f59e0b",
+      // Amber (distinct from orange ternary)
+      warning: "#fde047",
+      // Yellow
       layout: {
         sidebarBg: "#0f050b",
-        // Deep rose-slate
         sidebarText: "#fda4af",
         navbarBg: "#1c0a15",
         navbarText: "#ffe4e6"
       },
       table: {
-        headerBg: "#2e1022",
-        headerText: "#fecdd3",
-        rowBg: "#1c0a15",
-        rowText: "#ffe4e6"
+        headerBg: "#f8fafc",
+        headerText: "#334155",
+        rowBg: "#ffffff",
+        rowText: "#1e293b"
       }
     }
   },
@@ -1506,25 +1515,30 @@ var PRESETS = [
       primary: "#0ea5e9",
       // Sky
       secondary: "#64748b",
-      ternary: "#14b8a6",
-      // Teal
-      danger: "#ef4444",
-      success: "#10b981",
-      info: "#3b82f6",
-      alert: "#f97316",
-      warning: "#eab308",
+      // Slate
+      ternary: "#a78bfa",
+      // Violet (distinct from Sky primary)
+      danger: "#f43f5e",
+      // Rose (distinct red, not plain red)
+      success: "#34d399",
+      // Emerald
+      info: "#6366f1",
+      // Indigo (distinct from Sky primary)
+      alert: "#fb923c",
+      // Orange
+      warning: "#fbbf24",
+      // Amber
       layout: {
         sidebarBg: "#031b2f",
-        // Deep ocean blue
         sidebarText: "#7dd3fc",
         navbarBg: "#0b253c",
         navbarText: "#e0f2fe"
       },
       table: {
-        headerBg: "#0c2e4b",
-        headerText: "#bae6fd",
-        rowBg: "#0b253c",
-        rowText: "#e0f2fe"
+        headerBg: "#f8fafc",
+        headerText: "#334155",
+        rowBg: "#ffffff",
+        rowText: "#1e293b"
       }
     }
   },
@@ -1534,25 +1548,30 @@ var PRESETS = [
       primary: "#10b981",
       // Emerald
       secondary: "#64748b",
+      // Slate
       ternary: "#84cc16",
-      // Lime
+      // Lime (yellow-green, distinct from emerald)
       danger: "#ef4444",
-      success: "#16a34a",
-      info: "#06b6d4",
-      alert: "#f59e0b",
-      warning: "#eab308",
+      // Red
+      success: "#2dd4bf",
+      // Teal (distinct cyan-green, NOT another green)
+      info: "#38bdf8",
+      // Sky blue (distinct from greens)
+      alert: "#f97316",
+      // Orange
+      warning: "#fbbf24",
+      // Amber (distinct from orange)
       layout: {
         sidebarBg: "#022c1b",
-        // Deep forest green
         sidebarText: "#6ee7b7",
         navbarBg: "#043e26",
         navbarText: "#d1fae5"
       },
       table: {
-        headerBg: "#064e3b",
-        headerText: "#a7f3d0",
-        rowBg: "#043e26",
-        rowText: "#d1fae5"
+        headerBg: "#f8fafc",
+        headerText: "#334155",
+        rowBg: "#ffffff",
+        rowText: "#1e293b"
       }
     }
   },
@@ -1562,25 +1581,30 @@ var PRESETS = [
       primary: "#8b5cf6",
       // Violet
       secondary: "#64748b",
+      // Slate
       ternary: "#ec4899",
-      // Pink
-      danger: "#e11d48",
-      success: "#22c55e",
-      info: "#3b82f6",
-      alert: "#f97316",
-      warning: "#facc15",
+      // Pink (distinct from violet)
+      danger: "#ef4444",
+      // Red
+      success: "#34d399",
+      // Emerald (clean green, distinct from violet)
+      info: "#38bdf8",
+      // Sky (distinct from violet/pink)
+      alert: "#fb923c",
+      // Orange
+      warning: "#fbbf24",
+      // Amber
       layout: {
         sidebarBg: "#1e0b36",
-        // Deep royal purple
         sidebarText: "#c084fc",
         navbarBg: "#291048",
         navbarText: "#f3e8ff"
       },
       table: {
-        headerBg: "#3b1764",
-        headerText: "#e9d5ff",
-        rowBg: "#291048",
-        rowText: "#f3e8ff"
+        headerBg: "#f8fafc",
+        headerText: "#334155",
+        rowBg: "#ffffff",
+        rowText: "#1e293b"
       }
     }
   }
@@ -1617,7 +1641,29 @@ var isLightColor2 = (hex) => {
   const brightness = (r * 299 + g * 587 + b * 114) / 1e3;
   return brightness > 140;
 };
-function ITThemeProvider({ children, theme: theme2 }) {
+var isVeryDarkColor = (hex) => {
+  if (!hex || typeof hex !== "string") return false;
+  const color = hex.replace("#", "");
+  let r = 0, g = 0, b = 0;
+  if (color.length === 3) {
+    r = parseInt(color[0] + color[0], 16);
+    g = parseInt(color[1] + color[1], 16);
+    b = parseInt(color[2] + color[2], 16);
+  } else if (color.length === 6) {
+    r = parseInt(color.substring(0, 2), 16);
+    g = parseInt(color.substring(2, 4), 16);
+    b = parseInt(color.substring(4, 6), 16);
+  } else {
+    return false;
+  }
+  const brightness = (r * 299 + g * 587 + b * 114) / 1e3;
+  return brightness < 50;
+};
+function ITThemeProvider({
+  children,
+  theme: theme2,
+  showFab = true
+}) {
   const [palette2, setPaletteState] = (0, import_react6.useState)(() => {
     const basePalette = {
       ...DEFAULT_PALETTE,
@@ -1625,6 +1671,9 @@ function ITThemeProvider({ children, theme: theme2 }) {
       layout: { ...DEFAULT_PALETTE.layout, ...theme2?.layout },
       table: { ...DEFAULT_PALETTE.table, ...theme2?.table }
     };
+    if (!showFab) {
+      return basePalette;
+    }
     try {
       const saved = localStorage.getItem(STORAGE_KEY);
       if (saved) {
@@ -1674,13 +1723,15 @@ function ITThemeProvider({ children, theme: theme2 }) {
     localStorage.setItem("it-theme-custom-presets", JSON.stringify(updated));
   };
   const [resolvedTheme, setResolvedTheme] = (0, import_react6.useState)("light");
-  const [darkModeMode, setDarkModeMode] = (0, import_react6.useState)(() => {
-    const saved = localStorage.getItem("it-theme-dark-mode");
-    if (saved === "light" || saved === "dark" || saved === "system") {
-      return saved;
+  const [darkModeMode, setDarkModeMode] = (0, import_react6.useState)(
+    () => {
+      const saved = localStorage.getItem("it-theme-dark-mode");
+      if (saved === "light" || saved === "dark" || saved === "system") {
+        return saved;
+      }
+      return "system";
     }
-    return "system";
-  });
+  );
   (0, import_react6.useEffect)(() => {
     localStorage.setItem("it-theme-dark-mode", darkModeMode);
     const applyDarkMode = (isDark) => {
@@ -1706,22 +1757,42 @@ function ITThemeProvider({ children, theme: theme2 }) {
       applyDarkMode(darkModeMode === "dark");
     }
   }, [darkModeMode]);
+  (0, import_react6.useEffect)(() => {
+    if (!showFab) {
+      setPaletteState({
+        ...DEFAULT_PALETTE,
+        ...theme2,
+        layout: { ...DEFAULT_PALETTE.layout, ...theme2?.layout },
+        table: { ...DEFAULT_PALETTE.table, ...theme2?.table }
+      });
+    }
+  }, [theme2, showFab]);
   (0, import_react6.useEffect)(() => {
     const injectStyles = (obj, prefix = "") => {
       Object.entries(obj).forEach(([key, val]) => {
         if (typeof val === "object" && val !== null) {
           injectStyles(val, prefix + key + "-");
         } else {
-          document.documentElement.style.setProperty(`--color-${prefix}${key}`, val);
+          document.documentElement.style.setProperty(
+            `--color-${prefix}${key}`,
+            val
+          );
           if (prefix === "layout-") {
-            document.documentElement.style.setProperty(`--color-${key}`, val);
+            document.documentElement.style.setProperty(
+              `--color-${key}`,
+              val
+            );
           }
         }
       });
     };
     injectStyles(palette2);
-    localStorage.setItem(STORAGE_KEY, JSON.stringify(palette2));
-    let styleTag = document.getElementById("it-theme-dynamic-overrides");
+    if (showFab) {
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(palette2));
+    }
+    let styleTag = document.getElementById(
+      "it-theme-dynamic-overrides"
+    );
     if (!styleTag) {
       styleTag = document.createElement("style");
       styleTag.id = "it-theme-dynamic-overrides";
@@ -1763,29 +1834,34 @@ function ITThemeProvider({ children, theme: theme2 }) {
       }
     } else {
       if (!isLightColor2(tableRowBg)) {
-        tableRowBg = `color-mix(in srgb, ${palette2.table.rowBg} 8%, #ffffff)`;
+        tableRowBg = isVeryDarkColor(palette2.table.rowBg) ? "#ffffff" : `color-mix(in srgb, ${palette2.table.rowBg} 8%, #ffffff)`;
       }
       if (isLightColor2(tableRowText)) {
         tableRowText = `color-mix(in srgb, ${palette2.table.rowText} 30%, #1e293b)`;
+      } else if (!isLightColor2(tableRowText) && isVeryDarkColor(palette2.table.rowText)) {
       }
       if (!isLightColor2(tableHeaderBg)) {
-        tableHeaderBg = `color-mix(in srgb, ${palette2.table.headerBg} 12%, #f8fafc)`;
+        tableHeaderBg = isVeryDarkColor(palette2.table.headerBg) ? "#f1f5f9" : `color-mix(in srgb, ${palette2.table.headerBg} 12%, #f8fafc)`;
       }
       if (isLightColor2(tableHeaderText)) {
         tableHeaderText = `color-mix(in srgb, ${palette2.table.headerText} 30%, #334155)`;
+      } else if (!isLightColor2(tableHeaderText) && isVeryDarkColor(palette2.table.headerText)) {
       }
       if (!isLightColor2(navbarBg)) {
-        navbarBg = `color-mix(in srgb, ${palette2.layout.navbarBg} 8%, #ffffff)`;
+        navbarBg = isVeryDarkColor(palette2.layout.navbarBg) ? "#ffffff" : `color-mix(in srgb, ${palette2.layout.navbarBg} 8%, #ffffff)`;
       }
       if (isLightColor2(navbarText)) {
         navbarText = `color-mix(in srgb, ${palette2.layout.navbarText} 30%, #1e293b)`;
       }
       if (!isLightColor2(sidebarBg)) {
-        sidebarBg = `color-mix(in srgb, ${palette2.layout.sidebarBg} 8%, #ffffff)`;
+        sidebarBg = isVeryDarkColor(palette2.layout.sidebarBg) ? "#ffffff" : `color-mix(in srgb, ${palette2.layout.sidebarBg} 8%, #ffffff)`;
       }
       if (isLightColor2(sidebarText)) {
         sidebarText = `color-mix(in srgb, ${palette2.layout.sidebarText} 30%, #1e293b)`;
       }
+      if (sidebarBg === "#ffffff" || isLightColor2(sidebarBg)) {
+        sidebarText = "#334155";
+      }
     }
     styleTag.innerHTML = `
       :root {
@@ -2887,7 +2963,7 @@ function ITThemeProvider({ children, theme: theme2 }) {
       },
       children: [
         children,
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        showFab && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           "button",
           {
             onClick: () => setIsOpen((prev) => !prev),
@@ -2906,7 +2982,7 @@ function ITThemeProvider({ children, theme: theme2 }) {
             children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_md.MdPalette, { style: { width: "28px", height: "28px" } })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        showFab && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           ITDialog,
           {
             isOpen,
@@ -2954,10 +3030,36 @@ function ITThemeProvider({ children, theme: theme2 }) {
                             ),
                             /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-[10px] font-semibold truncate w-full mb-1 pr-4", children: preset.name }),
                             /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex gap-1", children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "w-2.5 h-2.5 rounded-full border border-black/10", style: { backgroundColor: preset.colors.primary } }),
-                              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "w-2.5 h-2.5 rounded-full border border-black/10", style: { backgroundColor: preset.colors.secondary } }),
-                              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "w-2.5 h-2.5 rounded-full border border-black/10", style: { backgroundColor: preset.colors.ternary } }),
-                              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "w-2.5 h-2.5 rounded-full border border-black/10", style: { backgroundColor: preset.colors.success } })
+                              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                                "span",
+                                {
+                                  className: "w-2.5 h-2.5 rounded-full border border-black/10",
+                                  style: { backgroundColor: preset.colors.primary }
+                                }
+                              ),
+                              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                                "span",
+                                {
+                                  className: "w-2.5 h-2.5 rounded-full border border-black/10",
+                                  style: {
+                                    backgroundColor: preset.colors.secondary
+                                  }
+                                }
+                              ),
+                              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                                "span",
+                                {
+                                  className: "w-2.5 h-2.5 rounded-full border border-black/10",
+                                  style: { backgroundColor: preset.colors.ternary }
+                                }
+                              ),
+                              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                                "span",
+                                {
+                                  className: "w-2.5 h-2.5 rounded-full border border-black/10",
+                                  style: { backgroundColor: preset.colors.success }
+                                }
+                              )
                             ] })
                           ]
                         },
@@ -2978,10 +3080,34 @@ function ITThemeProvider({ children, theme: theme2 }) {
                         children: [
                           /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-[10px] font-semibold truncate w-full mb-1", children: preset.name }),
                           /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex gap-1", children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "w-2.5 h-2.5 rounded-full border border-black/10", style: { backgroundColor: preset.colors.primary } }),
-                            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "w-2.5 h-2.5 rounded-full border border-black/10", style: { backgroundColor: preset.colors.secondary } }),
-                            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "w-2.5 h-2.5 rounded-full border border-black/10", style: { backgroundColor: preset.colors.ternary } }),
-                            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "w-2.5 h-2.5 rounded-full border border-black/10", style: { backgroundColor: preset.colors.success } })
+                            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                              "span",
+                              {
+                                className: "w-2.5 h-2.5 rounded-full border border-black/10",
+                                style: { backgroundColor: preset.colors.primary }
+                              }
+                            ),
+                            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                              "span",
+                              {
+                                className: "w-2.5 h-2.5 rounded-full border border-black/10",
+                                style: { backgroundColor: preset.colors.secondary }
+                              }
+                            ),
+                            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                              "span",
+                              {
+                                className: "w-2.5 h-2.5 rounded-full border border-black/10",
+                                style: { backgroundColor: preset.colors.ternary }
+                              }
+                            ),
+                            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                              "span",
+                              {
+                                className: "w-2.5 h-2.5 rounded-full border border-black/10",
+                                style: { backgroundColor: preset.colors.success }
+                              }
+                            )
                           ] })
                         ]
                       },
@@ -4245,8 +4371,8 @@ function ITTable({
         return value;
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: (0, import_clsx9.default)("space-y-4 w-full", containerClassName), children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "bg-white rounded-xl shadow-sm border border-secondary-200 overflow-hidden", children: [
-    title && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "bg-white px-6 py-5 border-b border-secondary-100", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("h2", { className: "text-xl font-bold text-secondary-900 leading-tight", children: title }) }),
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: (0, import_clsx9.default)("space-y-4 w-full", containerClassName), children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "rounded-xl shadow-sm border border-secondary-200 overflow-hidden", style: { backgroundColor: "var(--color-table-rowBg, #ffffff)" }, children: [
+    title && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "px-6 py-5 border-b border-secondary-100", style: { backgroundColor: "var(--color-table-rowBg, #ffffff)" }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("h2", { className: "text-xl font-bold text-secondary-900 leading-tight", children: title }) }),
     /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "overflow-x-auto", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
       "table",
       {
@@ -4300,7 +4426,7 @@ function ITTable({
         ]
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "bg-white rounded-b-xl border-t border-secondary-200 px-6 py-4", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime12.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_runtime12.jsx)(
       ITPagination,
       {
         currentPage,
@@ -4509,13 +4635,13 @@ function ITDataTable({
     }
   };
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: (0, import_clsx10.default)("space-y-4 w-full relative", containerClassName), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "bg-white rounded-xl shadow-sm border border-secondary-200 overflow-hidden", children: [
-      title && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "bg-white px-6 py-5 border-b border-secondary-100 flex justify-between items-center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "rounded-xl shadow-sm border border-secondary-200 overflow-hidden", style: { backgroundColor: "var(--color-table-rowBg, #ffffff)" }, children: [
+      title && /* @__PURE__ */ (0, import_jsx_runtime13.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: [
         /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("h2", { className: "text-xl font-bold text-secondary-900 leading-tight", children: title }),
         isLoading && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "text-secondary-400", children: loadingIndicator || /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_fa7.FaSpinner, { className: "animate-spin text-primary-500 text-xl" }) })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "overflow-x-auto relative min-h-[200px]", children: [
-        isLoading && /* @__PURE__ */ (0, import_jsx_runtime13.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_runtime13.jsx)("div", { className: "flex flex-col items-center gap-3 bg-white p-6 rounded-2xl shadow-xl border border-secondary-100 animate-in fade-in zoom-in duration-300", children: loadingIndicator || /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+        isLoading && /* @__PURE__ */ (0, import_jsx_runtime13.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_runtime13.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_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_fa7.FaSpinner, { className: "animate-spin text-primary-500 text-4xl" }),
           /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "text-sm font-semibold text-secondary-600 animate-pulse", children: "Cargando datos..." })
         ] }) }) }),
@@ -4555,7 +4681,7 @@ function ITDataTable({
         )
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "bg-white rounded-b-xl border-t border-secondary-200 px-6 py-4", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime13.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_runtime13.jsx)(
       ITPagination,
       {
         currentPage,