@axzydev/axzy_ui_system 1.0.167 → 1.0.168

package/dist/index.js

@@ -259,17 +259,17 @@ var components = {
     }
   },
   card: {
-    backgroundColor: "#ffffff",
+    backgroundColor: "var(--card-bg, #ffffff)",
     borderRadius: "1rem",
-    borderColor: semanticColors.gray[200],
+    borderColor: `var(--card-border, ${semanticColors.gray[200]})`,
     borderWidth: "1px",
-    shadow: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+    shadow: "var(--card-shadow, 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1))",
     hover: {
-      shadow: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)"
+      shadow: "var(--card-shadow-hover, 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1))"
     },
     header: {
-      backgroundColor: semanticColors.gray[50],
-      borderBottom: `1px solid var(--color-secondary-200)`,
+      backgroundColor: `var(--card-header-bg, ${semanticColors.gray[50]})`,
+      borderBottom: `1px solid var(--card-header-border, var(--color-secondary-200))`,
       padding: "1rem 1.5rem",
       borderTopLeftRadius: "1rem",
       borderTopRightRadius: "1rem"
@@ -279,23 +279,23 @@ var components = {
     }
   },
   input: {
-    backgroundColor: "#ffffff",
-    borderColor: semanticColors.gray[300],
+    backgroundColor: "var(--input-bg, #ffffff)",
+    borderColor: `var(--input-border, ${semanticColors.gray[300]})`,
     borderRadius: "0.5rem",
     padding: "0.5rem 0.75rem",
     fontSize: "0.875rem",
     focus: {
-      borderColor: semanticColors.primary[500],
-      ring: `0 0 0 3px ${semanticColors.primary[100]}`
+      borderColor: `var(--input-focus-border, ${semanticColors.primary[500]})`,
+      ring: `var(--input-focus-ring, 0 0 0 3px ${semanticColors.primary[100]})`
     },
-    placeholder: semanticColors.gray[400],
+    placeholder: `var(--input-placeholder, ${semanticColors.gray[400]})`,
     disabled: {
-      backgroundColor: semanticColors.gray[100],
-      borderColor: semanticColors.gray[200]
+      backgroundColor: `var(--input-disabled-bg, ${semanticColors.gray[100]})`,
+      borderColor: `var(--input-disabled-border, ${semanticColors.gray[200]})`
     },
     error: {
-      borderColor: semanticColors.danger[500],
-      ring: `0 0 0 3px ${semanticColors.danger[100]}`
+      borderColor: `var(--input-error-border, ${semanticColors.danger[500]})`,
+      ring: `var(--input-error-ring, 0 0 0 3px ${semanticColors.danger[100]})`
     }
   },
   table: {
@@ -343,24 +343,24 @@ var components = {
   },
   modal: {
     overlay: {
-      backgroundColor: "rgba(15, 23, 42, 0.75)"
+      backgroundColor: "var(--modal-overlay, rgba(15, 23, 42, 0.75))"
     },
     content: {
-      backgroundColor: "#ffffff",
+      backgroundColor: "var(--modal-bg, #ffffff)",
       borderRadius: "1rem",
-      shadow: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)"
+      shadow: "var(--modal-shadow, 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1))"
     },
     header: {
       padding: "1.5rem 1.5rem 0.5rem 1.5rem",
-      borderBottom: `1px solid var(--color-secondary-200)`
+      borderBottom: `1px solid var(--modal-header-border, var(--color-secondary-200))`
     },
     body: {
       padding: "1.5rem"
     },
     footer: {
       padding: "1rem 1.5rem",
-      borderTop: `1px solid var(--color-secondary-200)`,
-      backgroundColor: semanticColors.gray[50]
+      borderTop: `1px solid var(--modal-footer-border, var(--color-secondary-200))`,
+      backgroundColor: `var(--modal-footer-bg, ${semanticColors.gray[50]})`
     }
   },
   calendar: {
@@ -627,11 +627,21 @@ var ITCalendar = ({
   endDate,
   minDate,
   maxDate,
-  className
+  className,
+  variant = "primary"
 }) => {
   const mode = modeProp || (onChange ? "month" : "week");
   const [currentDate, setCurrentDate] = useState2(value || /* @__PURE__ */ new Date());
   const [view, setView] = useState2("calendar");
+  const getVariantStyles = () => {
+    const v = variant || "primary";
+    return {
+      "--calendar-selected-bg": `var(--color-${v})`,
+      "--calendar-range-bg": `var(--color-${v}-50)`,
+      "--calendar-today-bg": `var(--color-${v}-100)`,
+      "--calendar-today-text": `var(--color-${v})`
+    };
+  };
   useEffect(() => {
     if (value) setCurrentDate(value);
   }, [value]);
@@ -749,7 +759,8 @@ var ITCalendar = ({
       className: cn("flex flex-col h-full rounded-lg shadow-sm overflow-hidden select-none", className),
       style: {
         backgroundColor: "var(--calendar-bg, #ffffff)",
-        border: "1px solid var(--calendar-border, #e2e8f0)"
+        border: "1px solid var(--calendar-border, #e2e8f0)",
+        ...getVariantStyles()
       },
       onMouseUp: handleMouseUp,
       onMouseLeave: () => {
@@ -757,218 +768,326 @@ var ITCalendar = ({
         setDragCurrent(null);
       },
       children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-2 py-2 border-b border-gray-200", style: { backgroundColor: "var(--calendar-bg, #ffffff)" }, children: [
-          /* @__PURE__ */ jsx3(
-            "h2",
-            {
-              className: "text-sm font-bold capitalize cursor-pointer transition-colors select-none px-2 py-1 rounded",
-              style: {
-                color: "var(--calendar-header-text, #1e293b)"
-              },
-              onClick: () => setView(view === "calendar" ? "years" : "calendar"),
-              onMouseEnter: (e) => {
-                e.currentTarget.style.backgroundColor = "var(--calendar-header-hover, #f1f5f9)";
-              },
-              onMouseLeave: (e) => {
-                e.currentTarget.style.backgroundColor = "transparent";
-              },
-              children: view === "years" ? `${years[0]} - ${years[years.length - 1]}` : format(currentDate, "MMMM yyyy", { locale: es })
-            }
-          ),
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-            /* @__PURE__ */ jsx3("button", { onClick: handlePrev, type: "button", className: "p-1.5 hover:bg-gray-100 rounded-md transition-colors text-gray-600", children: /* @__PURE__ */ jsx3(FaChevronLeft, { size: 14 }) }),
-            /* @__PURE__ */ jsx3("button", { onClick: handleToday, type: "button", className: "text-sm font-medium text-gray-700 hover:bg-gray-100 px-3 py-1.5 rounded-md transition-colors", children: "Hoy" }),
-            /* @__PURE__ */ jsx3("button", { onClick: handleNext, type: "button", className: "p-1.5 hover:bg-gray-100 rounded-md transition-colors text-gray-600", children: /* @__PURE__ */ jsx3(FaChevronRight, { size: 14 }) })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsx3("div", { className: "flex-1 overflow-auto relative bg-white", children: view === "years" ? /* @__PURE__ */ jsx3("div", { className: "p-4 grid grid-cols-4 gap-2", children: years.map((year) => /* @__PURE__ */ jsx3(
-          "button",
+        /* @__PURE__ */ jsxs(
+          "div",
           {
-            type: "button",
-            className: cn(
-              "h-10 rounded-md text-sm font-medium transition-colors border border-transparent",
-              year === currentDate.getFullYear() ? "bg-primary-600 text-white" : "hover:bg-primary-50 text-gray-700 hover:text-primary-700"
-            ),
-            onClick: () => {
-              setCurrentDate((d) => {
-                const newDate = new Date(d);
-                newDate.setFullYear(year);
-                return newDate;
-              });
-              setView("calendar");
+            className: "flex items-center justify-between px-2 py-2 border-b",
+            style: {
+              backgroundColor: "var(--calendar-bg, #ffffff)",
+              borderBottomColor: "var(--calendar-border, #e2e8f0)"
             },
-            children: year
-          },
-          year
-        )) }) : mode === "month" ? /* @__PURE__ */ jsxs("div", { className: "p-4", children: [
-          /* @__PURE__ */ jsx3("div", { className: "grid grid-cols-7 mb-2", children: ["Lun", "Mar", "Mi\xE9", "Jue", "Vie", "S\xE1b", "Dom"].map((day) => /* @__PURE__ */ jsx3("div", { className: "text-center text-xs font-semibold text-gray-400 uppercase py-1", children: day }, day)) }),
-          /* @__PURE__ */ jsx3("div", { className: "grid grid-cols-7 gap-1", children: monthDays.map((day) => {
-            const isDisabled = isDateDisabled(day);
-            const isCurrentMonth = isSameMonth(day, currentDate);
-            const isSelected = selectionMode === "single" && value && isSameDay(day, value);
-            const isRangeStart = selectionMode === "range" && startDate && isSameDay(day, startDate);
-            const isRangeEnd = selectionMode === "range" && endDate && isSameDay(day, endDate);
-            const isInRange = selectionMode === "range" && startDate && endDate && isAfter(day, startDate) && isBefore(day, endDate);
-            return /* @__PURE__ */ jsxs(
+            children: [
+              /* @__PURE__ */ jsx3(
+                "h2",
+                {
+                  className: "text-sm font-bold capitalize cursor-pointer transition-colors select-none px-2 py-1 rounded",
+                  style: {
+                    color: "var(--calendar-header-text, #1e293b)"
+                  },
+                  onClick: () => setView(view === "calendar" ? "years" : "calendar"),
+                  onMouseEnter: (e) => {
+                    e.currentTarget.style.backgroundColor = "var(--calendar-header-hover, #f1f5f9)";
+                  },
+                  onMouseLeave: (e) => {
+                    e.currentTarget.style.backgroundColor = "transparent";
+                  },
+                  children: view === "years" ? `${years[0]} - ${years[years.length - 1]}` : format(currentDate, "MMMM yyyy", { locale: es })
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+                /* @__PURE__ */ jsx3(
+                  "button",
+                  {
+                    onClick: handlePrev,
+                    type: "button",
+                    className: "p-1.5 rounded-md transition-colors",
+                    style: { color: "var(--calendar-days-text, #334155)" },
+                    onMouseEnter: (e) => {
+                      e.currentTarget.style.backgroundColor = "var(--calendar-header-hover, #f1f5f9)";
+                    },
+                    onMouseLeave: (e) => {
+                      e.currentTarget.style.backgroundColor = "transparent";
+                    },
+                    children: /* @__PURE__ */ jsx3(FaChevronLeft, { size: 14 })
+                  }
+                ),
+                /* @__PURE__ */ jsx3(
+                  "button",
+                  {
+                    onClick: handleToday,
+                    type: "button",
+                    className: "text-sm font-medium px-3 py-1.5 rounded-md transition-colors",
+                    style: { color: "var(--calendar-days-text, #334155)" },
+                    onMouseEnter: (e) => {
+                      e.currentTarget.style.backgroundColor = "var(--calendar-header-hover, #f1f5f9)";
+                    },
+                    onMouseLeave: (e) => {
+                      e.currentTarget.style.backgroundColor = "transparent";
+                    },
+                    children: "Hoy"
+                  }
+                ),
+                /* @__PURE__ */ jsx3(
+                  "button",
+                  {
+                    onClick: handleNext,
+                    type: "button",
+                    className: "p-1.5 rounded-md transition-colors",
+                    style: { color: "var(--calendar-days-text, #334155)" },
+                    onMouseEnter: (e) => {
+                      e.currentTarget.style.backgroundColor = "var(--calendar-header-hover, #f1f5f9)";
+                    },
+                    onMouseLeave: (e) => {
+                      e.currentTarget.style.backgroundColor = "transparent";
+                    },
+                    children: /* @__PURE__ */ jsx3(FaChevronRight, { size: 14 })
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          "div",
+          {
+            className: "flex-1 overflow-auto relative",
+            style: { backgroundColor: "var(--calendar-bg, #ffffff)" },
+            children: view === "years" ? /* @__PURE__ */ jsx3("div", { className: "p-4 grid grid-cols-4 gap-2", children: years.map((year) => /* @__PURE__ */ jsx3(
               "button",
               {
                 type: "button",
-                disabled: isDisabled,
-                onClick: () => onChange && onChange(day),
                 className: cn(
-                  "h-10 w-full flex items-center justify-center rounded-md text-sm transition-colors relative",
-                  !isCurrentMonth && "opacity-40",
-                  isDisabled && "opacity-20 cursor-not-allowed"
+                  "h-10 rounded-md text-sm font-medium transition-colors border border-transparent",
+                  year === currentDate.getFullYear() ? "bg-[var(--calendar-selected-bg)] text-[var(--calendar-selected-text)]" : "hover:bg-[var(--calendar-today-bg)] hover:text-[var(--calendar-today-text)]"
                 ),
                 style: {
-                  backgroundColor: isSelected || isRangeStart || isRangeEnd ? "var(--calendar-selected-bg, #2563eb)" : isInRange ? "var(--calendar-range-bg, #eff6ff)" : isToday(day) ? "var(--calendar-today-bg, #eff6ff)" : "transparent",
-                  color: isSelected || isRangeStart || isRangeEnd ? "var(--calendar-selected-text, #ffffff)" : isToday(day) ? "var(--calendar-today-text, #2563eb)" : "var(--calendar-days-text, #334155)",
-                  fontWeight: isSelected || isRangeStart || isRangeEnd || isToday(day) ? "700" : "400"
+                  color: year === currentDate.getFullYear() ? "var(--calendar-selected-text, #ffffff)" : "var(--calendar-days-text, #334155)"
                 },
-                children: [
-                  format(day, "d"),
-                  selectionMode === "range" && isRangeStart && endDate && /* @__PURE__ */ jsx3("div", { className: "absolute right-0 top-0 bottom-0 w-2 bg-primary-50 -z-10" }),
-                  selectionMode === "range" && isRangeEnd && startDate && /* @__PURE__ */ jsx3("div", { className: "absolute left-0 top-0 bottom-0 w-2 bg-primary-50 -z-10" })
-                ]
+                onClick: () => {
+                  setCurrentDate((d) => {
+                    const newDate = new Date(d);
+                    newDate.setFullYear(year);
+                    return newDate;
+                  });
+                  setView("calendar");
+                },
+                children: year
               },
-              day.toISOString()
-            );
-          }) })
-        ] }) : (
-          /* Week/Day View (Scheduler) */
-          /* @__PURE__ */ jsxs("div", { className: cn("flex h-full", mode === "week" ? "min-w-[800px]" : "w-full"), children: [
-            /* @__PURE__ */ jsx3("div", { className: "flex-none w-16 border-r border-gray-100 bg-gray-50 pt-10 select-none", children: TIME_SLOTS.map((hour) => hour < END_HOUR && /* @__PURE__ */ jsx3("div", { className: "h-20 relative text-right pr-2", children: /* @__PURE__ */ jsx3("span", { className: "text-xs text-gray-400 -mt-2 inline-block transform -translate-y-1/2", children: format((/* @__PURE__ */ new Date()).setHours(hour, 0), "HH:mm") }) }, hour)) }),
-            /* @__PURE__ */ jsx3("div", { className: "flex flex-1", children: viewDays.map((day) => /* @__PURE__ */ jsxs("div", { className: "flex-1 border-r border-gray-100 min-w-[120px] relative", children: [
-              /* @__PURE__ */ jsxs("div", { className: cn(
-                "h-10 border-b border-gray-200 flex flex-col items-center justify-center sticky top-0 bg-white z-10",
-                isToday(day) && "bg-primary-50"
-              ), children: [
-                /* @__PURE__ */ jsx3("span", { className: cn("text-xs font-semibold uppercase", isToday(day) ? "text-primary-600" : "text-gray-500"), children: format(day, "EEE", { locale: es }) }),
-                /* @__PURE__ */ jsx3("span", { className: cn(
-                  "text-sm font-bold w-6 h-6 flex items-center justify-center rounded-full mt-0.5",
-                  isToday(day) ? "bg-primary-600 text-white" : "text-gray-800"
-                ), children: format(day, "d") })
-              ] }),
-              /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-                TIME_SLOTS.map((hour) => hour < END_HOUR && /* @__PURE__ */ jsxs(
+              year
+            )) }) : mode === "month" ? /* @__PURE__ */ jsxs("div", { className: "p-4", children: [
+              /* @__PURE__ */ jsx3("div", { className: "grid grid-cols-7 mb-2", children: ["Lun", "Mar", "Mi\xE9", "Jue", "Vie", "S\xE1b", "Dom"].map((day) => /* @__PURE__ */ jsx3("div", { className: "text-center text-xs font-semibold text-gray-400 uppercase py-1", children: day }, day)) }),
+              /* @__PURE__ */ jsx3("div", { className: "grid grid-cols-7 gap-1", children: monthDays.map((day) => {
+                const isDisabled = isDateDisabled(day);
+                const isCurrentMonth = isSameMonth(day, currentDate);
+                const isSelected = selectionMode === "single" && value && isSameDay(day, value);
+                const isRangeStart = selectionMode === "range" && startDate && isSameDay(day, startDate);
+                const isRangeEnd = selectionMode === "range" && endDate && isSameDay(day, endDate);
+                const isInRange = selectionMode === "range" && startDate && endDate && isAfter(day, startDate) && isBefore(day, endDate);
+                return /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    disabled: isDisabled,
+                    onClick: () => onChange && onChange(day),
+                    className: cn(
+                      "h-10 w-full flex items-center justify-center rounded-md text-sm transition-colors relative",
+                      !isCurrentMonth && "opacity-40",
+                      isDisabled && "opacity-20 cursor-not-allowed"
+                    ),
+                    style: {
+                      backgroundColor: isSelected || isRangeStart || isRangeEnd ? "var(--calendar-selected-bg, #2563eb)" : isInRange ? "var(--calendar-range-bg, #eff6ff)" : isToday(day) ? "var(--calendar-today-bg, #eff6ff)" : "transparent",
+                      color: isSelected || isRangeStart || isRangeEnd ? "var(--calendar-selected-text, #ffffff)" : isToday(day) ? "var(--calendar-today-text, #2563eb)" : "var(--calendar-days-text, #334155)",
+                      fontWeight: isSelected || isRangeStart || isRangeEnd || isToday(day) ? "700" : "400"
+                    },
+                    children: [
+                      format(day, "d"),
+                      selectionMode === "range" && isRangeStart && endDate && /* @__PURE__ */ jsx3("div", { className: "absolute right-0 top-0 bottom-0 w-2 bg-[var(--calendar-range-bg)] -z-10" }),
+                      selectionMode === "range" && isRangeEnd && startDate && /* @__PURE__ */ jsx3("div", { className: "absolute left-0 top-0 bottom-0 w-2 bg-[var(--calendar-range-bg)] -z-10" })
+                    ]
+                  },
+                  day.toISOString()
+                );
+              }) })
+            ] }) : (
+              /* Week/Day View (Scheduler) */
+              /* @__PURE__ */ jsxs("div", { className: cn("flex h-full", mode === "week" ? "min-w-[800px]" : "w-full"), children: [
+                /* @__PURE__ */ jsx3(
+                  "div",
+                  {
+                    className: "flex-none w-16 pt-10 select-none",
+                    style: {
+                      backgroundColor: "var(--calendar-header-hover, #f1f5f9)",
+                      borderRight: "1px solid var(--calendar-border, #e2e8f0)"
+                    },
+                    children: TIME_SLOTS.map((hour) => hour < END_HOUR && /* @__PURE__ */ jsx3("div", { className: "h-20 relative text-right pr-2", children: /* @__PURE__ */ jsx3("span", { className: "text-xs text-slate-400 dark:text-slate-500 -mt-2 inline-block transform -translate-y-1/2", children: format((/* @__PURE__ */ new Date()).setHours(hour, 0), "HH:mm") }) }, hour))
+                  }
+                ),
+                /* @__PURE__ */ jsx3("div", { className: "flex flex-1", children: viewDays.map((day) => /* @__PURE__ */ jsxs(
                   "div",
                   {
-                    className: "h-20 border-b border-gray-100 border-dashed relative group",
+                    className: "flex-1 min-w-[120px] relative",
+                    style: { borderRight: "1px solid var(--calendar-border, #e2e8f0)" },
                     children: [
-                      /* @__PURE__ */ jsx3(
+                      /* @__PURE__ */ jsxs(
                         "div",
                         {
-                          className: "absolute inset-x-0 top-0 h-10 border-b border-transparent hover:border-primary-100 hover:bg-primary-50/30 transition-colors cursor-pointer z-0",
-                          onMouseDown: (e) => {
-                            const d = new Date(day);
-                            d.setHours(hour, 0, 0, 0);
-                            handleMouseDown(d, e);
-                          },
-                          onMouseEnter: () => {
-                            const d = new Date(day);
-                            d.setHours(hour, 0, 0, 0);
-                            handleMouseEnter(d);
+                          className: "h-10 flex flex-col items-center justify-center sticky top-0 z-10",
+                          style: {
+                            backgroundColor: isToday(day) ? "var(--calendar-today-bg, #eff6ff)" : "var(--calendar-bg, #ffffff)",
+                            borderBottom: "1px solid var(--calendar-border, #e2e8f0)"
                           },
-                          onClick: () => {
-                            if (!isDraggingRef.current) {
-                              const d = new Date(day);
-                              d.setHours(hour, 0, 0, 0);
-                              onSlotClick && onSlotClick(d);
-                            }
-                          }
+                          children: [
+                            /* @__PURE__ */ jsx3(
+                              "span",
+                              {
+                                className: "text-xs font-semibold uppercase",
+                                style: {
+                                  color: isToday(day) ? "var(--calendar-today-text, #2563eb)" : "var(--calendar-days-text, #334155)",
+                                  opacity: isToday(day) ? 1 : 0.6
+                                },
+                                children: format(day, "EEE", { locale: es })
+                              }
+                            ),
+                            /* @__PURE__ */ jsx3(
+                              "span",
+                              {
+                                className: "text-sm font-bold w-6 h-6 flex items-center justify-center rounded-full mt-0.5",
+                                style: {
+                                  color: isToday(day) ? "var(--calendar-selected-text, #ffffff)" : "var(--calendar-days-text, #334155)",
+                                  backgroundColor: isToday(day) ? "var(--calendar-selected-bg, #2563eb)" : "transparent"
+                                },
+                                children: format(day, "d")
+                              }
+                            )
+                          ]
                         }
                       ),
-                      /* @__PURE__ */ jsx3(
+                      /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+                        TIME_SLOTS.map((hour) => hour < END_HOUR && /* @__PURE__ */ jsxs(
+                          "div",
+                          {
+                            className: "h-20 relative group",
+                            style: { borderBottom: "1px dashed var(--calendar-border, #e2e8f0)" },
+                            children: [
+                              /* @__PURE__ */ jsx3(
+                                "div",
+                                {
+                                  className: "absolute inset-x-0 top-0 h-10 border-b border-transparent hover:border-[var(--calendar-today-bg)] hover:bg-[var(--calendar-today-bg)] transition-colors cursor-pointer z-0",
+                                  onMouseDown: (e) => {
+                                    const d = new Date(day);
+                                    d.setHours(hour, 0, 0, 0);
+                                    handleMouseDown(d, e);
+                                  },
+                                  onMouseEnter: () => {
+                                    const d = new Date(day);
+                                    d.setHours(hour, 0, 0, 0);
+                                    handleMouseEnter(d);
+                                  },
+                                  onClick: () => {
+                                    if (!isDraggingRef.current) {
+                                      const d = new Date(day);
+                                      d.setHours(hour, 0, 0, 0);
+                                      onSlotClick && onSlotClick(d);
+                                    }
+                                  }
+                                }
+                              ),
+                              /* @__PURE__ */ jsx3(
+                                "div",
+                                {
+                                  className: "absolute inset-x-0 bottom-0 h-10 hover:border-[var(--calendar-today-bg)] hover:bg-[var(--calendar-today-bg)] transition-colors cursor-pointer z-0",
+                                  onMouseDown: (e) => {
+                                    const d = new Date(day);
+                                    d.setHours(hour, 30, 0, 0);
+                                    handleMouseDown(d, e);
+                                  },
+                                  onMouseEnter: () => {
+                                    const d = new Date(day);
+                                    d.setHours(hour, 30, 0, 0);
+                                    handleMouseEnter(d);
+                                  },
+                                  onClick: () => {
+                                    if (!isDraggingRef.current) {
+                                      const d = new Date(day);
+                                      d.setHours(hour, 30, 0, 0);
+                                      onSlotClick && onSlotClick(d);
+                                    }
+                                  }
+                                }
+                              )
+                            ]
+                          },
+                          hour
+                        )),
+                        dragStart && dragCurrent && isSameDay(dragStart, day) && (() => {
+                          let start = dragStart;
+                          let end = dragCurrent;
+                          if (isBefore(end, start)) [start, end] = [end, start];
+                          const finalEnd = addMinutes(end, 30);
+                          const startMinutes = start.getHours() * 60 + start.getMinutes();
+                          const dayStartMinutes = START_HOUR * 60;
+                          const duration = differenceInMinutes(finalEnd, start);
+                          const top = (startMinutes - dayStartMinutes) / 60 * 80;
+                          const height = duration / 60 * 80;
+                          return /* @__PURE__ */ jsx3(
+                            "div",
+                            {
+                              className: "absolute left-1 right-1 bg-[var(--calendar-selected-bg)]/30 border border-[var(--calendar-selected-bg)] rounded z-10 pointer-events-none",
+                              style: { top: `${top}px`, height: `${height}px` }
+                            }
+                          );
+                        })(),
+                        weekEvents.filter((event) => isSameDay(typeof event.start === "string" ? parseISO(event.start) : event.start, day)).map((event) => {
+                          const style = getEventStyle(event);
+                          return /* @__PURE__ */ jsxs(
+                            "div",
+                            {
+                              className: cn(
+                                "absolute left-1 right-1 rounded px-2 py-1 text-xs cursor-pointer hover:brightness-95 transition-all shadow-sm overflow-hidden z-20 border-l-4",
+                                !event.color && "bg-[var(--calendar-today-bg)] text-[var(--calendar-today-text)] border-[var(--calendar-selected-bg)]"
+                              ),
+                              style: {
+                                top: style.top,
+                                height: style.height,
+                                backgroundColor: event.color ? `${event.color}20` : void 0,
+                                borderColor: event.color,
+                                color: event.color ? event.color : void 0
+                              },
+                              onClick: (e) => {
+                                e.stopPropagation();
+                                onEventClick && onEventClick(event);
+                              },
+                              children: [
+                                /* @__PURE__ */ jsx3("div", { className: "font-semibold truncate", children: event.title }),
+                                /* @__PURE__ */ jsxs("div", { className: "opacity-80 truncate", children: [
+                                  format(typeof event.start === "string" ? parseISO(event.start) : event.start, "HH:mm"),
+                                  " -",
+                                  format(typeof event.end === "string" ? parseISO(event.end) : event.end, "HH:mm")
+                                ] })
+                              ]
+                            },
+                            event.id
+                          );
+                        })
+                      ] }),
+                      isToday(day) && /* @__PURE__ */ jsx3(
                         "div",
                         {
-                          className: "absolute inset-x-0 bottom-0 h-10 hover:border-primary-100 hover:bg-primary-50/30 transition-colors cursor-pointer z-0",
-                          onMouseDown: (e) => {
-                            const d = new Date(day);
-                            d.setHours(hour, 30, 0, 0);
-                            handleMouseDown(d, e);
-                          },
-                          onMouseEnter: () => {
-                            const d = new Date(day);
-                            d.setHours(hour, 30, 0, 0);
-                            handleMouseEnter(d);
+                          className: "absolute left-0 right-0 border-t-2 border-danger-500 z-30 pointer-events-none",
+                          style: {
+                            top: `${((/* @__PURE__ */ new Date()).getHours() * 60 + (/* @__PURE__ */ new Date()).getMinutes() - START_HOUR * 60) / 60 * 80}px`
                           },
-                          onClick: () => {
-                            if (!isDraggingRef.current) {
-                              const d = new Date(day);
-                              d.setHours(hour, 30, 0, 0);
-                              onSlotClick && onSlotClick(d);
-                            }
-                          }
+                          children: /* @__PURE__ */ jsx3("div", { className: "absolute -left-1.5 -top-1.5 w-3 h-3 bg-danger-500 rounded-full" })
                         }
                       )
                     ]
                   },
-                  hour
-                )),
-                dragStart && dragCurrent && isSameDay(dragStart, day) && (() => {
-                  let start = dragStart;
-                  let end = dragCurrent;
-                  if (isBefore(end, start)) [start, end] = [end, start];
-                  const finalEnd = addMinutes(end, 30);
-                  const startMinutes = start.getHours() * 60 + start.getMinutes();
-                  const dayStartMinutes = START_HOUR * 60;
-                  const duration = differenceInMinutes(finalEnd, start);
-                  const top = (startMinutes - dayStartMinutes) / 60 * 80;
-                  const height = duration / 60 * 80;
-                  return /* @__PURE__ */ jsx3(
-                    "div",
-                    {
-                      className: "absolute left-1 right-1 bg-primary-500/30 border border-primary-500 rounded z-10 pointer-events-none",
-                      style: { top: `${top}px`, height: `${height}px` }
-                    }
-                  );
-                })(),
-                weekEvents.filter((event) => isSameDay(typeof event.start === "string" ? parseISO(event.start) : event.start, day)).map((event) => {
-                  const style = getEventStyle(event);
-                  return /* @__PURE__ */ jsxs(
-                    "div",
-                    {
-                      className: cn(
-                        "absolute left-1 right-1 rounded px-2 py-1 text-xs cursor-pointer hover:brightness-95 transition-all shadow-sm overflow-hidden z-20 border-l-4",
-                        !event.color && "bg-primary-100 text-primary-700 border-primary-500"
-                      ),
-                      style: {
-                        top: style.top,
-                        height: style.height,
-                        backgroundColor: event.color ? `${event.color}20` : void 0,
-                        borderColor: event.color,
-                        color: event.color ? event.color : void 0
-                      },
-                      onClick: (e) => {
-                        e.stopPropagation();
-                        onEventClick && onEventClick(event);
-                      },
-                      children: [
-                        /* @__PURE__ */ jsx3("div", { className: "font-semibold truncate", children: event.title }),
-                        /* @__PURE__ */ jsxs("div", { className: "opacity-80 truncate", children: [
-                          format(typeof event.start === "string" ? parseISO(event.start) : event.start, "HH:mm"),
-                          " -",
-                          format(typeof event.end === "string" ? parseISO(event.end) : event.end, "HH:mm")
-                        ] })
-                      ]
-                    },
-                    event.id
-                  );
-                })
-              ] }),
-              isToday(day) && /* @__PURE__ */ jsx3(
-                "div",
-                {
-                  className: "absolute left-0 right-0 border-t-2 border-danger-500 z-30 pointer-events-none",
-                  style: {
-                    top: `${((/* @__PURE__ */ new Date()).getHours() * 60 + (/* @__PURE__ */ new Date()).getMinutes() - START_HOUR * 60) / 60 * 80}px`
-                  },
-                  children: /* @__PURE__ */ jsx3("div", { className: "absolute -left-1.5 -top-1.5 w-3 h-3 bg-danger-500 rounded-full" })
-                }
-              )
-            ] }, day.toISOString())) })
-          ] })
-        ) })
+                  day.toISOString()
+                )) })
+              ] })
+            )
+          }
+        )
       ]
     }
   );
@@ -1105,6 +1224,7 @@ function ITInput({
   const [isFocused, setIsFocused] = useState4(false);
   const [hasSelectedAll, setHasSelectedAll] = useState4(false);
   const [showPassword, setShowPassword] = useState4(false);
+  const [localTouched, setLocalTouched] = useState4(false);
   const inputRef = useRef(null);
   const inputTheme = theme.input || {};
   const getStyle = () => {
@@ -1117,8 +1237,8 @@ function ITInput({
       borderWidth: "1px",
       borderStyle: "solid",
       transition: "all 0.2s",
-      color: theme.colors.gray[900]
-      // Default text color
+      color: "var(--input-text-color, var(--color-secondary-900))"
+      // Theme-aware text color
     };
     if (disabled) {
       style.backgroundColor = inputTheme.disabled?.backgroundColor || style.backgroundColor;
@@ -1141,7 +1261,11 @@ function ITInput({
     }
     return style;
   };
-  const hasError = touched && error;
+  const isTouched = touched !== void 0 ? touched : localTouched;
+  const isEmpty = isCheckboxOrRadio ? !checked : 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 handleClick = (e) => {
     if (onClick) {
       onClick();
@@ -1311,6 +1435,7 @@ function ITInput({
     e.currentTarget.select();
   };
   const handleBlur = (e) => {
+    setLocalTouched(true);
     setHasSelectedAll(false);
     setIsFocused(false);
     if (readOnly) {
@@ -1394,7 +1519,14 @@ function ITInput({
             id: name,
             type,
             checked,
-            onChange: handleTextChange,
+            onChange: (e) => {
+              setLocalTouched(true);
+              handleTextChange(e);
+            },
+            onBlur: (e) => {
+              setLocalTouched(true);
+              onBlur?.(e);
+            },
             disabled,
             required,
             className: clsx5(
@@ -1403,11 +1535,11 @@ function ITInput({
               type === "checkbox" && "form-checkbox rounded",
               className,
               { "opacity-50 cursor-not-allowed": disabled },
-              { "border-red-500": touched && error }
+              { "border-red-500": hasError }
             )
           }
         ),
-        label && /* @__PURE__ */ jsxs3("label", { htmlFor: name, className: "text-sm text-gray-700 select-none", children: [
+        label && /* @__PURE__ */ jsxs3("label", { htmlFor: name, className: "text-sm text-gray-700 dark:text-slate-300 select-none", children: [
           label,
           " ",
           required && /* @__PURE__ */ jsx5("span", { className: "text-red-500", children: "*" })
@@ -1421,8 +1553,8 @@ function ITInput({
           {
             htmlFor: name,
             className: clsx5(
-              "text-sm font-medium text-gray-700",
-              { "text-red-500": touched && error },
+              "text-sm font-medium text-gray-700 dark:text-slate-300",
+              { "text-red-500": hasError },
               labelClassName
             ),
             children: [
@@ -1441,7 +1573,11 @@ function ITInput({
               placeholder,
               value: value ?? "",
               onChange: readOnly ? void 0 : onChange,
-              onBlur: readOnly ? void 0 : onBlur,
+              onBlur: (e) => {
+                if (readOnly) return;
+                setLocalTouched(true);
+                onBlur?.(e);
+              },
               readOnly,
               maxLength,
               minLength,
@@ -1473,6 +1609,7 @@ function ITInput({
                 onFocus: isNumberType ? handleFocus : () => setIsFocused(true),
                 onBlur: isNumberType ? handleBlur : (e) => {
                   setIsFocused(false);
+                  setLocalTouched(true);
                   onBlur?.(e);
                 },
                 onKeyDown: isNumberType ? handleKeyDown : void 0,
@@ -1519,12 +1656,12 @@ function ITInput({
         ] })
       ] })
     ),
-    touched && error && !isCheckboxOrRadio && /* @__PURE__ */ jsx5("div", { className: "flex-shrink-0 min-w-[140px] flex items-center pt-3", children: /* @__PURE__ */ jsx5("p", { className: "text-red-500 text-xs", children: error }) }),
+    hasError && !isCheckboxOrRadio && /* @__PURE__ */ jsx5("div", { className: "flex-shrink-0 min-w-[140px] flex items-center pt-3", children: /* @__PURE__ */ jsx5("p", { className: "text-red-500 text-xs", children: errorMessage }) }),
     showHintLength && (minLength || maxLength) && !isCheckboxOrRadio && /* @__PURE__ */ jsx5("div", { className: "mt-1 text-xs", children: /* @__PURE__ */ jsxs3("p", { className: "text-gray-500", children: [
       currentLength,
       maxLength && `/${maxLength}`
     ] }) }),
-    isCheckboxOrRadio && touched && error && /* @__PURE__ */ jsx5("div", { className: "mt-1 text-xs", children: /* @__PURE__ */ jsx5("p", { className: "text-red-500", children: error }) })
+    isCheckboxOrRadio && hasError && /* @__PURE__ */ jsx5("div", { className: "mt-1 text-xs", children: /* @__PURE__ */ jsx5("p", { className: "text-red-500", children: errorMessage }) })
   ] });
 }
 
@@ -1535,8 +1672,8 @@ import { FaChevronLeft as FaChevronLeft2, FaChevronRight as FaChevronRight2 } fr
 
 // src/components/select/select.tsx
 import clsx6 from "clsx";
-import { FaAngleDown } from "react-icons/fa";
 import { useState as useState5 } from "react";
+import { FaAngleDown } from "react-icons/fa";
 import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 function ITSelect({
   name,
@@ -1556,7 +1693,13 @@ function ITSelect({
   readOnly = false
 }) {
   const [isFocused, setIsFocused] = useState5(false);
+  const [localTouched, setLocalTouched] = useState5(false);
   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 getStyle = () => {
     const style = {
       backgroundColor: inputTheme.backgroundColor,
@@ -1567,7 +1710,7 @@ function ITSelect({
       borderWidth: "1px",
       borderStyle: "solid",
       transition: "all 0.2s",
-      color: theme.colors.gray[900],
+      color: "var(--input-text-color, var(--color-secondary-900))",
       appearance: "none"
       // Important for custom styling
     };
@@ -1576,7 +1719,7 @@ function ITSelect({
       style.borderColor = inputTheme.disabled?.borderColor || style.borderColor;
       style.opacity = 0.7;
     }
-    if (touched && error) {
+    if (hasError) {
       style.borderColor = inputTheme.error?.borderColor || "red";
       if (isFocused) {
         style.boxShadow = inputTheme.error?.ring;
@@ -1594,8 +1737,8 @@ function ITSelect({
       {
         htmlFor: name,
         className: clsx6(
-          "text-sm font-medium text-gray-700 pt-0",
-          { "text-red-500": touched && error }
+          "text-sm font-medium text-gray-700 dark:text-slate-300 pt-0",
+          { "text-red-500": hasError }
         ),
         children: [
           label,
@@ -1614,6 +1757,7 @@ function ITSelect({
             onChange: readOnly ? void 0 : onChange,
             onBlur: (e) => {
               setIsFocused(false);
+              setLocalTouched(true);
               readOnly ? void 0 : onBlur?.(e);
             },
             onFocus: () => setIsFocused(true),
@@ -1641,7 +1785,7 @@ function ITSelect({
         ),
         /* @__PURE__ */ jsx6("div", { className: "absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none text-gray-500", children: /* @__PURE__ */ jsx6(FaAngleDown, {}) })
       ] }),
-      touched && error && /* @__PURE__ */ jsx6("div", { className: "flex-shrink-0 min-w-[140px] flex items-center pt-3", children: /* @__PURE__ */ jsx6("p", { className: "text-red-500 text-xs", children: error }) })
+      hasError && /* @__PURE__ */ jsx6("div", { className: "flex-shrink-0 min-w-[140px] flex items-center pt-3", children: /* @__PURE__ */ jsx6("p", { className: "text-red-500 text-xs", children: errorMessage }) })
     ] })
   ] }) });
 }
@@ -2648,6 +2792,7 @@ function ITDatePicker({
             onChange: handleDateChange,
             minDate,
             maxDate,
+            variant,
             className: "h-auto border-none shadow-none w-full"
           }
         )
@@ -2909,11 +3054,11 @@ function ITTimePicker({
   const handleBlurInput = () => {
     if (!validateTime(inputValue)) {
       setIsValidTime(false);
-      onBlur({ target: { name, value } });
+      onBlur?.({ target: { name, value } });
       return;
     }
     setIsValidTime(true);
-    onBlur({ target: { name, value: inputValue } });
+    onBlur?.({ target: { name, value: inputValue } });
   };
   const handleHourSelect = (h) => {
     const min = currentMinute || "00";
@@ -3752,6 +3897,7 @@ function ITSearchSelect({
   const [isOpen, setIsOpen] = useState15(false);
   const [searchTerm, setSearchTerm] = useState15("");
   const [isFocused, setIsFocused] = useState15(false);
+  const [localTouched, setLocalTouched] = useState15(false);
   const containerRef = useRef7(null);
   const timeoutRef = useRef7(null);
   const selectedOption = useMemo4(() => {
@@ -3804,10 +3950,16 @@ function ITSearchSelect({
   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",
@@ -3818,7 +3970,7 @@ function ITSearchSelect({
       borderWidth: "1px",
       borderStyle: "solid",
       transition: "all 0.2s",
-      color: theme.colors.gray[900],
+      color: "var(--input-text-color, var(--color-secondary-900))",
       width: "100%"
     };
     if (disabled) {
@@ -3827,7 +3979,7 @@ function ITSearchSelect({
       style.opacity = 0.7;
       style.cursor = "not-allowed";
     }
-    if (touched && error) {
+    if (hasError) {
       style.borderColor = inputTheme.error?.borderColor || "red";
       if (isFocused) {
         style.boxShadow = inputTheme.error?.ring;
@@ -3838,12 +3990,12 @@ function ITSearchSelect({
     }
     return style;
   };
-  return /* @__PURE__ */ jsxs14("div", { className: clsx14("w-full flex flex-col gap-1.5", className), ref: containerRef, children: [
+  return /* @__PURE__ */ jsxs14("div", { className: clsx14("w-full flex flex-col gap-1.5", className, isOpen && "relative z-30"), ref: containerRef, children: [
     label && /* @__PURE__ */ jsxs14(
       "label",
       {
-        className: clsx14("text-sm font-medium text-gray-700", {
-          "text-red-500": touched && error
+        className: clsx14("text-sm font-medium text-gray-700 dark:text-slate-300", {
+          "text-red-500": hasError
         }),
         children: [
           label,
@@ -3875,20 +4027,20 @@ function ITSearchSelect({
           !isLoading && /* @__PURE__ */ jsx19(FaSearch, { size: 14, className: clsx14({ "text-primary-500": isFocused }) })
         ] })
       ] }),
-      isOpen && /* @__PURE__ */ jsx19("div", { className: "absolute z-50 w-full mt-1 bg-white border border-gray-200 rounded-lg shadow-xl overflow-hidden animate-in fade-in zoom-in duration-200 origin-top", children: /* @__PURE__ */ jsx19("div", { className: "max-h-60 overflow-y-auto", children: filteredOptions.length > 0 ? filteredOptions.map((option) => /* @__PURE__ */ jsx19(
+      isOpen && /* @__PURE__ */ jsx19("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__ */ jsx19("div", { className: "max-h-60 overflow-y-auto", children: filteredOptions.length > 0 ? filteredOptions.map((option) => /* @__PURE__ */ jsx19(
         "div",
         {
           onClick: () => handleSelect(option),
           className: clsx14(
             "px-4 py-2 text-sm cursor-pointer transition-colors",
-            value === option[valueField] ? "bg-primary-50 text-primary-700 font-medium" : "hover:bg-gray-50 text-gray-700"
+            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: option[labelField]
         },
         option[valueField]
       )) : /* @__PURE__ */ jsx19("div", { className: "px-4 py-6 text-sm text-center text-gray-500 italic", children: isLoading ? "Cargando..." : noResultsMessage }) }) })
     ] }),
-    touched && error && /* @__PURE__ */ jsx19("p", { className: "text-red-500 text-xs mt-1", children: error })
+    hasError && /* @__PURE__ */ jsx19("p", { className: "text-red-500 text-xs mt-1", children: errorMessage })
   ] });
 }
 
@@ -4165,6 +4317,23 @@ import { useState as useState19, useEffect as useEffect15, useRef as useRef8 } f
 import { useDropzone } from "react-dropzone";
 import clsx18 from "clsx";
 import { Fragment as Fragment5, jsx as jsx25, jsxs as jsxs17 } from "react/jsx-runtime";
+var FileTypeEnum = /* @__PURE__ */ ((FileTypeEnum2) => {
+  FileTypeEnum2["PDF"] = "application/pdf";
+  FileTypeEnum2["XLS"] = "application/vnd.ms-excel";
+  FileTypeEnum2["XLSX"] = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
+  FileTypeEnum2["CSV"] = "text/csv";
+  FileTypeEnum2["PNG"] = "image/png";
+  FileTypeEnum2["JPG"] = "image/jpg";
+  FileTypeEnum2["JPEG"] = "image/jpeg";
+  return FileTypeEnum2;
+})(FileTypeEnum || {});
+var UploadStatus = /* @__PURE__ */ ((UploadStatus2) => {
+  UploadStatus2["PENDING"] = "pendiente";
+  UploadStatus2["UPLOADING"] = "subiendo";
+  UploadStatus2["UPLOADED"] = "subido";
+  UploadStatus2["ERROR"] = "error";
+  return UploadStatus2;
+})(UploadStatus || {});
 var ITDropfile = ({
   onFileSelect,
   onCancel,
@@ -4641,7 +4810,8 @@ function ITSidebar({
   className = "",
   visibleOnMobile = false,
   onItemClick,
-  onSubItemClick
+  onSubItemClick,
+  subitemConnector = "|"
 }) {
   const [expandedItems, setExpandedItems] = useState21(/* @__PURE__ */ new Set());
   const [isHovering, setIsHovering] = useState21(false);
@@ -4673,6 +4843,27 @@ function ITSidebar({
       if (leaveTimeoutRef.current) clearTimeout(leaveTimeoutRef.current);
     };
   }, [isCollapsed]);
+  useEffect16(() => {
+    const activeParents = /* @__PURE__ */ new Set();
+    navigationItems.forEach((item) => {
+      if (item.subitems && item.subitems.some((sub) => sub.isActive)) {
+        activeParents.add(item.id);
+      }
+    });
+    if (activeParents.size > 0) {
+      setExpandedItems((prev) => {
+        const next = new Set(prev);
+        let changed = false;
+        activeParents.forEach((id) => {
+          if (!next.has(id)) {
+            next.add(id);
+            changed = true;
+          }
+        });
+        return changed ? next : prev;
+      });
+    }
+  }, [navigationItems]);
   const toggleExpanded = (itemId) => {
     const newExpanded = new Set(expandedItems);
     if (newExpanded.has(itemId)) newExpanded.delete(itemId);
@@ -4819,39 +5010,48 @@ function ITSidebar({
             ]
           }
         ),
-        !isSidebarCollapsed && item.subitems && item.subitems.length > 0 && /* @__PURE__ */ jsx27("div", { className: `overflow-hidden transition-all duration-400 ease-[cubic-bezier(0.2,0,0,1)] ${expandedItems.has(item.id) ? "max-h-[500px] opacity-100 mt-1" : "max-h-0 opacity-0"}`, children: /* @__PURE__ */ jsx27("ul", { className: "ml-5 pl-4 space-y-1 py-1", style: { borderLeft: `2px solid ${theme.sidebar?.borderColor || "#e2e8f0"}` }, children: item.subitems.map((subitem) => /* @__PURE__ */ jsxs19("li", { className: "relative", children: [
-          subitem.isActive && /* @__PURE__ */ jsx27("div", { className: "absolute -left-[18px] top-1/2 -translate-y-1/2 w-4 h-[2px] rounded-r-full", style: { backgroundColor: theme.sidebar?.active?.iconColor || "#10b981" } }),
-          /* @__PURE__ */ jsx27(
-            "button",
-            {
-              onClick: () => {
-                if (subitem.action) subitem.action();
-                if (onSubItemClick) onSubItemClick(subitem);
-              },
-              className: `block w-full text-left px-4 py-2 rounded-xl transition-all duration-300`,
-              style: {
-                color: subitem.isActive ? theme.sidebar?.active?.color || "#0f172a" : theme.sidebar?.label?.color || "#475569",
-                backgroundColor: subitem.isActive ? theme.sidebar?.active?.backgroundColor || "#f8fafc" : "transparent",
-                fontSize: "0.85rem",
-                fontWeight: subitem.isActive ? 600 : 500,
-                letterSpacing: "0.01em"
-              },
-              onMouseEnter: (e) => {
-                if (!subitem.isActive) {
-                  e.currentTarget.style.backgroundColor = theme.sidebar?.hover?.backgroundColor || "#f1f5f9";
-                  e.currentTarget.style.transform = "translateX(4px)";
-                }
-              },
-              onMouseLeave: (e) => {
-                if (!subitem.isActive) {
-                  e.currentTarget.style.backgroundColor = "transparent";
-                  e.currentTarget.style.transform = "translateX(0)";
+        !isSidebarCollapsed && item.subitems && item.subitems.length > 0 && /* @__PURE__ */ jsx27("div", { className: `overflow-hidden transition-all duration-400 ease-[cubic-bezier(0.2,0,0,1)] ${expandedItems.has(item.id) ? "max-h-[500px] opacity-100 mt-1" : "max-h-0 opacity-0"}`, children: /* @__PURE__ */ jsx27(
+          "ul",
+          {
+            className: "ml-5 pl-4 space-y-1 py-1",
+            style: {
+              borderLeft: subitemConnector === "none" ? "none" : `2px ${subitemConnector === "dots" ? "dotted" : "solid"} ${theme.sidebar?.borderColor || "#e2e8f0"}`
+            },
+            children: item.subitems.map((subitem) => /* @__PURE__ */ jsxs19("li", { className: "relative", children: [
+              subitem.isActive && (subitemConnector === "lines" || subitemConnector === "dots") && /* @__PURE__ */ jsx27("div", { className: "absolute -left-[18px] top-1/2 -translate-y-1/2 w-4 h-[2px] rounded-r-full", style: { backgroundColor: theme.sidebar?.active?.iconColor || "#10b981" } }),
+              /* @__PURE__ */ jsx27(
+                "button",
+                {
+                  onClick: () => {
+                    if (subitem.action) subitem.action();
+                    if (onSubItemClick) onSubItemClick(subitem);
+                  },
+                  className: `block w-full text-left px-4 py-2 rounded-xl transition-all duration-300`,
+                  style: {
+                    color: subitem.isActive ? theme.sidebar?.active?.color || "#0f172a" : theme.sidebar?.label?.color || "#475569",
+                    backgroundColor: subitem.isActive ? theme.sidebar?.active?.backgroundColor || "#f8fafc" : "transparent",
+                    fontSize: "0.85rem",
+                    fontWeight: subitem.isActive ? 600 : 500,
+                    letterSpacing: "0.01em"
+                  },
+                  onMouseEnter: (e) => {
+                    if (!subitem.isActive) {
+                      e.currentTarget.style.backgroundColor = theme.sidebar?.hover?.backgroundColor || "#f1f5f9";
+                      e.currentTarget.style.transform = "translateX(4px)";
+                    }
+                  },
+                  onMouseLeave: (e) => {
+                    if (!subitem.isActive) {
+                      e.currentTarget.style.backgroundColor = "transparent";
+                      e.currentTarget.style.transform = "translateX(0)";
+                    }
+                  },
+                  children: subitem.label
                 }
-              },
-              children: subitem.label
-            }
-          )
-        ] }, subitem.id)) }) })
+              )
+            ] }, subitem.id))
+          }
+        ) })
       ] }, item.id)) }) })
     }
   );
@@ -5211,153 +5411,1756 @@ function ITStepper({
 }
 
 // src/components/theme-provider/themeProvider.tsx
-import { useMemo as useMemo5 } from "react";
+import { createContext as createContext2, useContext as useContext2, useState as useState24, useEffect as useEffect18 } from "react";
+import { MdPalette, MdClose, MdRefresh, MdCheck } from "react-icons/md";
 import { Fragment as Fragment6, jsx as jsx31, jsxs as jsxs22 } from "react/jsx-runtime";
-function ITThemeProvider({ theme: theme2, children }) {
-  const activeThemeContext = useMemo5(() => {
-    const baseColors = {
-      primary: palette.blue,
-      secondary: palette.gray,
-      success: palette.success,
-      danger: palette.danger,
-      warning: palette.warning,
-      info: palette.cyan,
-      purple: palette.purple
-    };
-    return {
-      colors: {
-        ...baseColors,
-        ...theme2?.colors
+var STORAGE_KEY = "it-theme-palette";
+var DEFAULT_PALETTE = {
+  primary: "#06b6d4",
+  // Cyan
+  secondary: "#6b7280",
+  // Gray
+  ternary: "#8b5cf6",
+  // Purple/Violet
+  danger: "#ef4444",
+  // Red
+  success: "#22c55e",
+  // Green
+  info: "#3b82f6",
+  // Blue
+  alert: "#f97316",
+  // Orange
+  warning: "#eab308",
+  // Yellow
+  layout: {
+    sidebarBg: "#0f172a",
+    // Dark slate-900
+    sidebarText: "#94a3b8",
+    // Slate-400
+    navbarBg: "#ffffff",
+    // White
+    navbarText: "#1e293b"
+    // Slate-800
+  },
+  table: {
+    headerBg: "#f8fafc",
+    // Slate-50
+    headerText: "#334155",
+    // Slate-700
+    rowBg: "#ffffff",
+    // White
+    rowText: "#1e293b"
+    // Slate-800
+  }
+};
+var PRESETS = [
+  {
+    name: "Midnight Nova \u{1F30C}",
+    colors: {
+      primary: "#6366f1",
+      // Indigo
+      secondary: "#475569",
+      // Slate
+      ternary: "#a855f7",
+      // Purple
+      danger: "#ef4444",
+      success: "#22c55e",
+      info: "#38bdf8",
+      alert: "#f97316",
+      warning: "#eab308",
+      layout: {
+        sidebarBg: "#020617",
+        // Slate-950
+        sidebarText: "#cbd5e1",
+        navbarBg: "#0f172a",
+        navbarText: "#f8fafc"
+      },
+      table: {
+        headerBg: "#1e293b",
+        headerText: "#e2e8f0",
+        rowBg: "#0f172a",
+        rowText: "#cbd5e1"
+      }
+    }
+  },
+  {
+    name: "Tokyo Drift \u{1F3CE}\uFE0F",
+    colors: {
+      primary: "#f43f5e",
+      // Rose
+      secondary: "#64748b",
+      ternary: "#fb923c",
+      // Orange
+      danger: "#dc2626",
+      success: "#16a34a",
+      info: "#0ea5e9",
+      alert: "#f97316",
+      warning: "#facc15",
+      layout: {
+        sidebarBg: "#0f050b",
+        // Deep rose-slate
+        sidebarText: "#fda4af",
+        navbarBg: "#1c0a15",
+        navbarText: "#ffe4e6"
+      },
+      table: {
+        headerBg: "#2e1022",
+        headerText: "#fecdd3",
+        rowBg: "#1c0a15",
+        rowText: "#ffe4e6"
+      }
+    }
+  },
+  {
+    name: "Ocean Core \u{1F30A}",
+    colors: {
+      primary: "#0ea5e9",
+      // Sky
+      secondary: "#64748b",
+      ternary: "#14b8a6",
+      // Teal
+      danger: "#ef4444",
+      success: "#10b981",
+      info: "#3b82f6",
+      alert: "#f97316",
+      warning: "#eab308",
+      layout: {
+        sidebarBg: "#031b2f",
+        // Deep ocean blue
+        sidebarText: "#7dd3fc",
+        navbarBg: "#0b253c",
+        navbarText: "#e0f2fe"
+      },
+      table: {
+        headerBg: "#0c2e4b",
+        headerText: "#bae6fd",
+        rowBg: "#0b253c",
+        rowText: "#e0f2fe"
+      }
+    }
+  },
+  {
+    name: "Matrix Pulse \u{1F49A}",
+    colors: {
+      primary: "#10b981",
+      // Emerald
+      secondary: "#64748b",
+      ternary: "#84cc16",
+      // Lime
+      danger: "#ef4444",
+      success: "#16a34a",
+      info: "#06b6d4",
+      alert: "#f59e0b",
+      warning: "#eab308",
+      layout: {
+        sidebarBg: "#022c1b",
+        // Deep forest green
+        sidebarText: "#6ee7b7",
+        navbarBg: "#043e26",
+        navbarText: "#d1fae5"
       },
+      table: {
+        headerBg: "#064e3b",
+        headerText: "#a7f3d0",
+        rowBg: "#043e26",
+        rowText: "#d1fae5"
+      }
+    }
+  },
+  {
+    name: "Royal Velvet \u{1F451}",
+    colors: {
+      primary: "#8b5cf6",
+      // Violet
+      secondary: "#64748b",
+      ternary: "#ec4899",
+      // Pink
+      danger: "#e11d48",
+      success: "#22c55e",
+      info: "#3b82f6",
+      alert: "#f97316",
+      warning: "#facc15",
       layout: {
-        ...theme.layout,
-        ...theme2?.layout
+        sidebarBg: "#1e0b36",
+        // Deep royal purple
+        sidebarText: "#c084fc",
+        navbarBg: "#291048",
+        navbarText: "#f3e8ff"
+      },
+      table: {
+        headerBg: "#3b1764",
+        headerText: "#e9d5ff",
+        rowBg: "#291048",
+        rowText: "#f3e8ff"
       }
+    }
+  }
+];
+var ITThemeContext = createContext2(void 0);
+var useITTheme = () => {
+  const context = useContext2(ITThemeContext);
+  if (!context) {
+    throw new Error("useITTheme must be used within an ITThemeProvider");
+  }
+  return context;
+};
+var getNestedValue3 = (obj, path) => {
+  return path.split(".").reduce((acc, part) => acc && acc[part], obj);
+};
+var isLightColor = (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 > 140;
+};
+function ITThemeProvider({ children, theme: theme2 }) {
+  const [palette2, setPaletteState] = useState24(() => {
+    const basePalette = {
+      ...DEFAULT_PALETTE,
+      ...theme2,
+      layout: { ...DEFAULT_PALETTE.layout, ...theme2?.layout },
+      table: { ...DEFAULT_PALETTE.table, ...theme2?.table }
     };
-  }, [theme2]);
-  const cssVariables = useMemo5(() => {
-    let variablesString = "";
-    Object.entries(activeThemeContext.colors).forEach(([colorName, scale]) => {
-      Object.entries(scale).forEach(([shade, hexValue]) => {
-        variablesString += `--color-${colorName}-${shade}: ${hexValue};
-`;
-      });
-    });
-    if (theme2?.layout) {
-      if (theme2.layout.backgroundColor) variablesString += `--layout-bg: ${theme2.layout.backgroundColor};
-`;
-      if (theme2.layout.contentPadding) variablesString += `--layout-padding: ${theme2.layout.contentPadding};
-`;
-    }
-    if (theme2?.topbar) {
-      if (theme2.topbar.backgroundColor) variablesString += `--topbar-bg: ${theme2.topbar.backgroundColor};
-`;
-      if (theme2.topbar.borderColor) variablesString += `--topbar-border: ${theme2.topbar.borderColor};
-`;
-      if (theme2.topbar.iconColor) variablesString += `--topbar-icon: ${theme2.topbar.iconColor};
-`;
-      if (theme2.topbar.iconHoverColor) variablesString += `--topbar-icon-hover: ${theme2.topbar.iconHoverColor};
-`;
-      if (theme2.topbar.shadow) variablesString += `--topbar-shadow: ${theme2.topbar.shadow};
-`;
-      if (theme2.topbar.textColor) variablesString += `--topbar-text: ${theme2.topbar.textColor};
-`;
-      if (theme2.topbar.textHoverColor) variablesString += `--topbar-text-hover: ${theme2.topbar.textHoverColor};
-`;
-      if (theme2.topbar.userMenu) {
-        if (theme2.topbar.userMenu.backgroundColor) variablesString += `--topbar-user-bg: ${theme2.topbar.userMenu.backgroundColor};
-`;
-        if (theme2.topbar.userMenu.hoverBackground) variablesString += `--topbar-user-hover: ${theme2.topbar.userMenu.hoverBackground};
-`;
-        if (theme2.topbar.userMenu.textColor) variablesString += `--topbar-user-text: ${theme2.topbar.userMenu.textColor};
-`;
-        if (theme2.topbar.userMenu.subtitleColor) variablesString += `--topbar-user-subtitle: ${theme2.topbar.userMenu.subtitleColor};
-`;
-        if (theme2.topbar.userMenu.dropdown) {
-          if (theme2.topbar.userMenu.dropdown.backgroundColor) variablesString += `--topbar-user-dropdown-bg: ${theme2.topbar.userMenu.dropdown.backgroundColor};
-`;
-          if (theme2.topbar.userMenu.dropdown.borderColor) variablesString += `--topbar-user-dropdown-border: ${theme2.topbar.userMenu.dropdown.borderColor};
-`;
-          if (theme2.topbar.userMenu.dropdown.itemHoverBackground) variablesString += `--topbar-user-item-hover: ${theme2.topbar.userMenu.dropdown.itemHoverBackground};
-`;
+    try {
+      const saved = localStorage.getItem(STORAGE_KEY);
+      if (saved) {
+        const parsed = JSON.parse(saved);
+        return {
+          ...basePalette,
+          ...parsed,
+          layout: { ...basePalette.layout, ...parsed.layout },
+          table: { ...basePalette.table, ...parsed.table }
+        };
+      }
+    } catch (e) {
+      console.error("Failed to load theme from localStorage", e);
+    }
+    return basePalette;
+  });
+  const [isOpen, setIsOpen] = useState24(false);
+  const [showSavedToast, setShowSavedToast] = useState24(false);
+  const [resolvedTheme, setResolvedTheme] = useState24("light");
+  const [darkModeMode, setDarkModeMode] = useState24(() => {
+    const saved = localStorage.getItem("it-theme-dark-mode");
+    if (saved === "light" || saved === "dark" || saved === "system") {
+      return saved;
+    }
+    return "system";
+  });
+  useEffect18(() => {
+    localStorage.setItem("it-theme-dark-mode", darkModeMode);
+    const applyDarkMode = (isDark) => {
+      if (isDark) {
+        document.documentElement.classList.add("dark");
+        document.documentElement.setAttribute("data-theme", "dark");
+        setResolvedTheme("dark");
+      } else {
+        document.documentElement.classList.remove("dark");
+        document.documentElement.setAttribute("data-theme", "light");
+        setResolvedTheme("light");
+      }
+    };
+    if (darkModeMode === "system") {
+      const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+      applyDarkMode(mediaQuery.matches);
+      const listener = (e) => {
+        applyDarkMode(e.matches);
+      };
+      mediaQuery.addEventListener("change", listener);
+      return () => mediaQuery.removeEventListener("change", listener);
+    } else {
+      applyDarkMode(darkModeMode === "dark");
+    }
+  }, [darkModeMode]);
+  useEffect18(() => {
+    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);
+          if (prefix === "layout-") {
+            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 (!styleTag) {
+      styleTag = document.createElement("style");
+      styleTag.id = "it-theme-dynamic-overrides";
+      document.head.appendChild(styleTag);
+    }
+    const isDark = resolvedTheme === "dark";
+    let tableRowBg = palette2.table.rowBg;
+    let tableRowText = palette2.table.rowText;
+    let tableHeaderBg = palette2.table.headerBg;
+    let tableHeaderText = palette2.table.headerText;
+    let navbarBg = palette2.layout.navbarBg;
+    let navbarText = palette2.layout.navbarText;
+    let sidebarBg = palette2.layout.sidebarBg;
+    let sidebarText = palette2.layout.sidebarText;
+    if (isDark) {
+      if (isLightColor(tableRowBg)) {
+        tableRowBg = `color-mix(in srgb, ${palette2.table.rowBg} 8%, #111827)`;
+      }
+      if (!isLightColor(tableRowText)) {
+        tableRowText = `color-mix(in srgb, ${palette2.table.rowText} 20%, #f3f4f6)`;
+      }
+      if (isLightColor(tableHeaderBg)) {
+        tableHeaderBg = `color-mix(in srgb, ${palette2.table.headerBg} 12%, #1f2937)`;
+      }
+      if (!isLightColor(tableHeaderText)) {
+        tableHeaderText = `color-mix(in srgb, ${palette2.table.headerText} 20%, #f9fafb)`;
+      }
+      if (isLightColor(navbarBg)) {
+        navbarBg = `color-mix(in srgb, ${palette2.layout.navbarBg} 8%, #111827)`;
+      }
+      if (!isLightColor(navbarText)) {
+        navbarText = `color-mix(in srgb, ${palette2.layout.navbarText} 20%, #f3f4f6)`;
+      }
+      if (isLightColor(sidebarBg)) {
+        sidebarBg = `color-mix(in srgb, ${palette2.layout.sidebarBg} 8%, #0f172a)`;
+      }
+      if (!isLightColor(sidebarText)) {
+        sidebarText = `color-mix(in srgb, ${palette2.layout.sidebarText} 20%, #cbd5e1)`;
+      }
+    } else {
+      if (!isLightColor(tableRowBg)) {
+        tableRowBg = `color-mix(in srgb, ${palette2.table.rowBg} 8%, #ffffff)`;
+      }
+      if (isLightColor(tableRowText)) {
+        tableRowText = `color-mix(in srgb, ${palette2.table.rowText} 30%, #1e293b)`;
+      }
+      if (!isLightColor(tableHeaderBg)) {
+        tableHeaderBg = `color-mix(in srgb, ${palette2.table.headerBg} 12%, #f8fafc)`;
+      }
+      if (isLightColor(tableHeaderText)) {
+        tableHeaderText = `color-mix(in srgb, ${palette2.table.headerText} 30%, #334155)`;
+      }
+      if (!isLightColor(navbarBg)) {
+        navbarBg = `color-mix(in srgb, ${palette2.layout.navbarBg} 8%, #ffffff)`;
+      }
+      if (isLightColor(navbarText)) {
+        navbarText = `color-mix(in srgb, ${palette2.layout.navbarText} 30%, #1e293b)`;
+      }
+      if (!isLightColor(sidebarBg)) {
+        sidebarBg = `color-mix(in srgb, ${palette2.layout.sidebarBg} 8%, #ffffff)`;
+      }
+      if (isLightColor(sidebarText)) {
+        sidebarText = `color-mix(in srgb, ${palette2.layout.sidebarText} 30%, #1e293b)`;
       }
     }
-    if (theme2?.sidebar) {
-      if (theme2.sidebar.backgroundColor) variablesString += `--sidebar-bg: ${theme2.sidebar.backgroundColor};
-`;
-      if (theme2.sidebar.borderColor) variablesString += `--sidebar-border: ${theme2.sidebar.borderColor};
-`;
-      if (theme2.sidebar.label) {
-        if (theme2.sidebar.label.color) variablesString += `--sidebar-label-color: ${theme2.sidebar.label.color};
-`;
-        if (theme2.sidebar.label.size) variablesString += `--sidebar-label-size: ${theme2.sidebar.label.size};
-`;
-        if (theme2.sidebar.label.weight) variablesString += `--sidebar-label-weight: ${theme2.sidebar.label.weight};
-`;
-      }
-      if (theme2.sidebar.icon) {
-        if (theme2.sidebar.icon.color) variablesString += `--sidebar-icon-color: ${theme2.sidebar.icon.color};
-`;
-        if (theme2.sidebar.icon.size) variablesString += `--sidebar-icon-size: ${theme2.sidebar.icon.size};
-`;
-      }
-      if (theme2.sidebar.hover?.backgroundColor) variablesString += `--sidebar-hover-bg: ${theme2.sidebar.hover.backgroundColor};
-`;
-      if (theme2.sidebar.active) {
-        if (theme2.sidebar.active.backgroundColor) variablesString += `--sidebar-active-bg: ${theme2.sidebar.active.backgroundColor};
-`;
-        if (theme2.sidebar.active.color) variablesString += `--sidebar-active-color: ${theme2.sidebar.active.color};
-`;
-        if (theme2.sidebar.active.iconColor) variablesString += `--sidebar-active-icon: ${theme2.sidebar.active.iconColor};
-`;
-      }
-      if (theme2.sidebar.badge) {
-        if (theme2.sidebar.badge.backgroundColor) variablesString += `--sidebar-badge-bg: ${theme2.sidebar.badge.backgroundColor};
-`;
-        if (theme2.sidebar.badge.color) variablesString += `--sidebar-badge-color: ${theme2.sidebar.badge.color};
-`;
-      }
-    }
-    if (theme2?.calendar) {
-      if (theme2.calendar.backgroundColor) variablesString += `--calendar-bg: ${theme2.calendar.backgroundColor};
-`;
-      if (theme2.calendar.borderColor) variablesString += `--calendar-border: ${theme2.calendar.borderColor};
-`;
-      if (theme2.calendar.header) {
-        if (theme2.calendar.header.textColor) variablesString += `--calendar-header-text: ${theme2.calendar.header.textColor};
-`;
-        if (theme2.calendar.header.hoverBackground) variablesString += `--calendar-header-hover: ${theme2.calendar.header.hoverBackground};
-`;
-      }
-      if (theme2.calendar.days) {
-        if (theme2.calendar.days.textColor) variablesString += `--calendar-days-text: ${theme2.calendar.days.textColor};
-`;
-        if (theme2.calendar.days.weekendColor) variablesString += `--calendar-days-weekend: ${theme2.calendar.days.weekendColor};
-`;
-        if (theme2.calendar.days.outsideMonthColor) variablesString += `--calendar-days-outside: ${theme2.calendar.days.outsideMonthColor};
-`;
-      }
-      if (theme2.calendar.selection) {
-        if (theme2.calendar.selection.selectedColor) variablesString += `--calendar-selected-text: ${theme2.calendar.selection.selectedColor};
-`;
-        if (theme2.calendar.selection.selectedBackground) variablesString += `--calendar-selected-bg: ${theme2.calendar.selection.selectedBackground};
-`;
-        if (theme2.calendar.selection.rangeBackground) variablesString += `--calendar-range-bg: ${theme2.calendar.selection.rangeBackground};
-`;
-        if (theme2.calendar.selection.todayBackground) variablesString += `--calendar-today-bg: ${theme2.calendar.selection.todayBackground};
-`;
-        if (theme2.calendar.selection.todayColor) variablesString += `--calendar-today-text: ${theme2.calendar.selection.todayColor};
-`;
-      }
-    }
-    return `:root {
-${variablesString}}`;
-  }, [activeThemeContext]);
-  return /* @__PURE__ */ jsxs22(Fragment6, { children: [
-    /* @__PURE__ */ jsx31("style", { suppressHydrationWarning: true, children: cssVariables }),
-    children
-  ] });
+    styleTag.innerHTML = `
+      :root {
+        --color-primary: ${palette2.primary};
+        --color-secondary: ${palette2.secondary};
+        --color-ternary: ${palette2.ternary};
+        --color-danger: ${palette2.danger};
+        --color-success: ${palette2.success};
+        --color-info: ${palette2.info};
+        --color-alert: ${palette2.alert};
+        --color-warning: ${palette2.warning};
+
+        /* Generated scales for primary */
+        --color-primary-50: color-mix(in srgb, var(--color-primary) 5%, #ffffff);
+        --color-primary-100: color-mix(in srgb, var(--color-primary) 10%, #ffffff);
+        --color-primary-200: color-mix(in srgb, var(--color-primary) 30%, #ffffff);
+        --color-primary-300: color-mix(in srgb, var(--color-primary) 50%, #ffffff);
+        --color-primary-400: color-mix(in srgb, var(--color-primary) 70%, #ffffff);
+        --color-primary-500: var(--color-primary);
+        --color-primary-600: color-mix(in srgb, var(--color-primary) 85%, #000000);
+        --color-primary-700: color-mix(in srgb, var(--color-primary) 70%, #000000);
+        --color-primary-800: color-mix(in srgb, var(--color-primary) 55%, #000000);
+        --color-primary-900: color-mix(in srgb, var(--color-primary) 40%, #000000);
+        --color-primary-950: color-mix(in srgb, var(--color-primary) 25%, #000000);
+
+        /* Generated scales for secondary */
+        --color-secondary-50: color-mix(in srgb, var(--color-secondary) 5%, #ffffff);
+        --color-secondary-100: color-mix(in srgb, var(--color-secondary) 10%, #ffffff);
+        --color-secondary-200: color-mix(in srgb, var(--color-secondary) 30%, #ffffff);
+        --color-secondary-300: color-mix(in srgb, var(--color-secondary) 50%, #ffffff);
+        --color-secondary-400: color-mix(in srgb, var(--color-secondary) 70%, #ffffff);
+        --color-secondary-500: var(--color-secondary);
+        --color-secondary-600: color-mix(in srgb, var(--color-secondary) 85%, #000000);
+        --color-secondary-700: color-mix(in srgb, var(--color-secondary) 70%, #000000);
+        --color-secondary-800: color-mix(in srgb, var(--color-secondary) 55%, #000000);
+        --color-secondary-900: color-mix(in srgb, var(--color-secondary) 40%, #000000);
+        --color-secondary-950: color-mix(in srgb, var(--color-secondary) 25%, #000000);
+
+        /* Generated scales for ternary */
+        --color-ternary-50: color-mix(in srgb, var(--color-ternary) 5%, #ffffff);
+        --color-ternary-100: color-mix(in srgb, var(--color-ternary) 10%, #ffffff);
+        --color-ternary-200: color-mix(in srgb, var(--color-ternary) 30%, #ffffff);
+        --color-ternary-300: color-mix(in srgb, var(--color-ternary) 50%, #ffffff);
+        --color-ternary-400: color-mix(in srgb, var(--color-ternary) 70%, #ffffff);
+        --color-ternary-500: var(--color-ternary);
+        --color-ternary-600: color-mix(in srgb, var(--color-ternary) 85%, #000000);
+        --color-ternary-700: color-mix(in srgb, var(--color-ternary) 70%, #000000);
+        --color-ternary-800: color-mix(in srgb, var(--color-ternary) 55%, #000000);
+        --color-ternary-900: color-mix(in srgb, var(--color-ternary) 40%, #000000);
+        --color-ternary-950: color-mix(in srgb, var(--color-ternary) 25%, #000000);
+
+        /* Purple scales mapped as aliases to ternary */
+        --color-purple-50: var(--color-ternary-50);
+        --color-purple-100: var(--color-ternary-100);
+        --color-purple-200: var(--color-ternary-200);
+        --color-purple-300: var(--color-ternary-300);
+        --color-purple-400: var(--color-ternary-400);
+        --color-purple-500: var(--color-ternary-500);
+        --color-purple-600: var(--color-ternary-600);
+        --color-purple-700: var(--color-ternary-700);
+        --color-purple-800: var(--color-ternary-800);
+        --color-purple-900: var(--color-ternary-900);
+        --color-purple-950: var(--color-ternary-950);
+
+        /* Generated scales for danger */
+        --color-danger-50: color-mix(in srgb, var(--color-danger) 5%, #ffffff);
+        --color-danger-100: color-mix(in srgb, var(--color-danger) 10%, #ffffff);
+        --color-danger-200: color-mix(in srgb, var(--color-danger) 30%, #ffffff);
+        --color-danger-300: color-mix(in srgb, var(--color-danger) 50%, #ffffff);
+        --color-danger-400: color-mix(in srgb, var(--color-danger) 70%, #ffffff);
+        --color-danger-500: var(--color-danger);
+        --color-danger-600: color-mix(in srgb, var(--color-danger) 85%, #000000);
+        --color-danger-700: color-mix(in srgb, var(--color-danger) 70%, #000000);
+        --color-danger-800: color-mix(in srgb, var(--color-danger) 55%, #000000);
+        --color-danger-900: color-mix(in srgb, var(--color-danger) 40%, #000000);
+        --color-danger-950: color-mix(in srgb, var(--color-danger) 25%, #000000);
+
+        /* Generated scales for success */
+        --color-success-50: color-mix(in srgb, var(--color-success) 5%, #ffffff);
+        --color-success-100: color-mix(in srgb, var(--color-success) 10%, #ffffff);
+        --color-success-200: color-mix(in srgb, var(--color-success) 30%, #ffffff);
+        --color-success-300: color-mix(in srgb, var(--color-success) 50%, #ffffff);
+        --color-success-400: color-mix(in srgb, var(--color-success) 70%, #ffffff);
+        --color-success-500: var(--color-success);
+        --color-success-600: color-mix(in srgb, var(--color-success) 85%, #000000);
+        --color-success-700: color-mix(in srgb, var(--color-success) 70%, #000000);
+        --color-success-800: color-mix(in srgb, var(--color-success) 55%, #000000);
+        --color-success-900: color-mix(in srgb, var(--color-success) 40%, #000000);
+        --color-success-950: color-mix(in srgb, var(--color-success) 25%, #000000);
+
+        /* Generated scales for info */
+        --color-info-50: color-mix(in srgb, var(--color-info) 5%, #ffffff);
+        --color-info-100: color-mix(in srgb, var(--color-info) 10%, #ffffff);
+        --color-info-200: color-mix(in srgb, var(--color-info) 30%, #ffffff);
+        --color-info-300: color-mix(in srgb, var(--color-info) 50%, #ffffff);
+        --color-info-400: color-mix(in srgb, var(--color-info) 70%, #ffffff);
+        --color-info-500: var(--color-info);
+        --color-info-600: color-mix(in srgb, var(--color-info) 85%, #000000);
+        --color-info-700: color-mix(in srgb, var(--color-info) 70%, #000000);
+        --color-info-800: color-mix(in srgb, var(--color-info) 55%, #000000);
+        --color-info-900: color-mix(in srgb, var(--color-info) 40%, #000000);
+        --color-info-950: color-mix(in srgb, var(--color-info) 25%, #000000);
+
+        /* Generated scales for alert */
+        --color-alert-50: color-mix(in srgb, var(--color-alert) 5%, #ffffff);
+        --color-alert-100: color-mix(in srgb, var(--color-alert) 10%, #ffffff);
+        --color-alert-200: color-mix(in srgb, var(--color-alert) 30%, #ffffff);
+        --color-alert-300: color-mix(in srgb, var(--color-alert) 50%, #ffffff);
+        --color-alert-400: color-mix(in srgb, var(--color-alert) 70%, #ffffff);
+        --color-alert-500: var(--color-alert);
+        --color-alert-600: color-mix(in srgb, var(--color-alert) 85%, #000000);
+        --color-alert-700: color-mix(in srgb, var(--color-alert) 70%, #000000);
+        --color-alert-800: color-mix(in srgb, var(--color-alert) 55%, #000000);
+        --color-alert-900: color-mix(in srgb, var(--color-alert) 40%, #000000);
+        --color-alert-950: color-mix(in srgb, var(--color-alert) 25%, #000000);
+
+        /* Generated scales for warning */
+        --color-warning-50: color-mix(in srgb, var(--color-warning) 5%, #ffffff);
+        --color-warning-100: color-mix(in srgb, var(--color-warning) 10%, #ffffff);
+        --color-warning-200: color-mix(in srgb, var(--color-warning) 30%, #ffffff);
+        --color-warning-300: color-mix(in srgb, var(--color-warning) 50%, #ffffff);
+        --color-warning-400: color-mix(in srgb, var(--color-warning) 70%, #ffffff);
+        --color-warning-500: var(--color-warning);
+        --color-warning-600: color-mix(in srgb, var(--color-warning) 85%, #000000);
+        --color-warning-700: color-mix(in srgb, var(--color-warning) 70%, #000000);
+        --color-warning-800: color-mix(in srgb, var(--color-warning) 55%, #000000);
+        --color-warning-900: color-mix(in srgb, var(--color-warning) 40%, #000000);
+        --color-warning-950: color-mix(in srgb, var(--color-warning) 25%, #000000);
+
+        /* Support legacy client app variables */
+        --color-primary-focus: color-mix(in srgb, var(--color-primary) 30%, transparent);
+        --color-primary-light: color-mix(in srgb, var(--color-primary) 10%, #ffffff);
+        --color-secondary-border: color-mix(in srgb, var(--color-secondary) 30%, #000000);
+        --color-ternary-light: color-mix(in srgb, var(--color-ternary) 15%, #ffffff);
+        --color-danger-focus: color-mix(in srgb, var(--color-danger) 30%, transparent);
+        --color-success-focus: color-mix(in srgb, var(--color-success) 30%, transparent);
+        --color-info-focus: color-mix(in srgb, var(--color-info) 30%, transparent);
+        --color-alert-focus: color-mix(in srgb, var(--color-alert) 30%, transparent);
+        --color-warning-focus: color-mix(in srgb, var(--color-warning) 30%, transparent);
+
+        /* Map library properties for complete safety */
+        --color-primary-hover: color-mix(in srgb, var(--color-primary) 85%, #000000);
+        --color-primary-ring: color-mix(in srgb, var(--color-primary) 40%, transparent);
+        --color-primary-soft: color-mix(in srgb, var(--color-primary) 12%, transparent);
+        --color-primary-soft-border: color-mix(in srgb, var(--color-primary) 24%, transparent);
+
+        --color-secondary-hover: color-mix(in srgb, var(--color-secondary) 85%, #000000);
+        --color-secondary-ring: color-mix(in srgb, var(--color-secondary) 40%, transparent);
+        --color-secondary-soft: color-mix(in srgb, var(--color-secondary) 12%, transparent);
+        --color-secondary-soft-border: color-mix(in srgb, var(--color-secondary) 24%, transparent);
+
+        --color-ternary-hover: color-mix(in srgb, var(--color-ternary) 85%, #000000);
+        --color-ternary-ring: color-mix(in srgb, var(--color-ternary) 40%, transparent);
+        --color-ternary-soft: color-mix(in srgb, var(--color-ternary) 12%, transparent);
+        --color-ternary-soft-border: color-mix(in srgb, var(--color-ternary) 24%, transparent);
+
+        --color-danger-hover: color-mix(in srgb, var(--color-danger) 85%, #000000);
+        --color-danger-ring: color-mix(in srgb, var(--color-danger) 40%, transparent);
+        --color-danger-soft: color-mix(in srgb, var(--color-danger) 12%, transparent);
+        --color-danger-soft-border: color-mix(in srgb, var(--color-danger) 24%, transparent);
+
+        --color-success-hover: color-mix(in srgb, var(--color-success) 85%, #000000);
+        --color-success-ring: color-mix(in srgb, var(--color-success) 40%, transparent);
+        --color-success-soft: color-mix(in srgb, var(--color-success) 12%, transparent);
+        --color-success-soft-border: color-mix(in srgb, var(--color-success) 24%, transparent);
+
+        --color-info-hover: color-mix(in srgb, var(--color-info) 85%, #000000);
+        --color-info-ring: color-mix(in srgb, var(--color-info) 40%, transparent);
+        --color-info-soft: color-mix(in srgb, var(--color-info) 12%, transparent);
+        --color-info-soft-border: color-mix(in srgb, var(--color-info) 24%, transparent);
+
+        --color-alert-hover: color-mix(in srgb, var(--color-alert) 85%, #000000);
+        --color-alert-ring: color-mix(in srgb, var(--color-alert) 40%, transparent);
+        --color-alert-soft: color-mix(in srgb, var(--color-alert) 12%, transparent);
+        --color-alert-soft-border: color-mix(in srgb, var(--color-alert) 24%, transparent);
+
+        --color-warning-hover: color-mix(in srgb, var(--color-warning) 85%, #000000);
+        --color-warning-ring: color-mix(in srgb, var(--color-warning) 40%, transparent);
+        --color-warning-soft: color-mix(in srgb, var(--color-warning) 12%, transparent);
+        --color-warning-soft-border: color-mix(in srgb, var(--color-warning) 24%, transparent);
+
+        --color-sidebarBg: ${sidebarBg} !important;
+        --color-sidebarText: ${sidebarText} !important;
+        --color-navbarBg: ${navbarBg} !important;
+        --color-navbarText: ${navbarText} !important;
+
+        --color-table-headerBg: ${tableHeaderBg} !important;
+        --color-table-headerText: ${tableHeaderText} !important;
+        --color-table-rowBg: ${tableRowBg} !important;
+        --color-table-rowText: ${tableRowText} !important;
+
+        /* Native library variables integration */
+        --sidebar-bg: var(--color-sidebarBg);
+        --sidebar-border: color-mix(in srgb, var(--color-sidebarBg) 85%, #000000);
+        --sidebar-label-color: var(--color-sidebarText);
+        --sidebar-icon-color: color-mix(in srgb, var(--color-sidebarText) 80%, transparent);
+        --sidebar-hover-bg: color-mix(in srgb, var(--color-sidebarText) 10%, transparent);
+        --sidebar-active-bg: color-mix(in srgb, var(--color-primary) 12%, transparent);
+        --sidebar-active-color: var(--color-primary);
+        --sidebar-active-icon: var(--color-primary);
+        --sidebar-badge-bg: var(--color-primary);
+        --sidebar-badge-color: #ffffff;
+
+        --topbar-bg: var(--color-navbarBg);
+        --topbar-text: var(--color-navbarText);
+        --topbar-border: color-mix(in srgb, var(--color-navbarBg) 85%, #000000);
+        --topbar-icon: color-mix(in srgb, var(--color-navbarText) 80%, transparent);
+        --topbar-icon-hover: var(--color-navbarText);
+
+        --layout-bg: var(--color-secondary-50);
+        --input-text-color: var(--color-secondary-900);
+
+        --calendar-selected-bg: var(--color-primary);
+        --calendar-selected-text: #ffffff;
+        --calendar-range-bg: var(--color-primary-50);
+        --calendar-today-bg: var(--color-primary-100);
+        --calendar-today-text: var(--color-primary);
+      }
+
+      /* Dark mode overrides */
+      .dark, [data-theme="dark"] {
+        --layout-bg: #090f1d;
+        --card-bg: #111827;
+        --card-border: #1f2937;
+        --card-header-bg: #1f2937;
+        --card-header-border: #374151;
+        --input-bg: #1f2937;
+        --input-border: #374151;
+        --input-placeholder: #6b7280;
+        --input-text-color: #cbd5e1;
+        --modal-bg: #111827;
+        --modal-footer-bg: #1f2937;
+        --modal-header-border: #374151;
+        --modal-footer-border: #374151;
+        --calendar-bg: #111827;
+        --calendar-border: #1f2937;
+        --calendar-header-text: #f3f4f6;
+        --calendar-header-hover: #1f2937;
+        --calendar-days-text: #e5e7eb;
+        --calendar-selected-bg: var(--color-primary);
+        --calendar-selected-text: #ffffff;
+        --calendar-range-bg: var(--color-primary-50);
+        --calendar-today-bg: var(--color-primary-100);
+        --calendar-today-text: var(--color-primary);
+
+        /* Override dynamic color-mix scales to blend with dark instead of white */
+        --color-primary-50: color-mix(in srgb, var(--color-primary) 10%, #0b1329);
+        --color-primary-100: color-mix(in srgb, var(--color-primary) 20%, #0b1329);
+        --color-primary-200: color-mix(in srgb, var(--color-primary) 35%, #0b1329);
+        --color-primary-300: color-mix(in srgb, var(--color-primary) 50%, #0b1329);
+        --color-primary-400: color-mix(in srgb, var(--color-primary) 70%, #0b1329);
+
+        --color-secondary-50: color-mix(in srgb, var(--color-secondary) 10%, #090f1d);
+        --color-secondary-100: color-mix(in srgb, var(--color-secondary) 18%, #090f1d);
+        --color-secondary-200: color-mix(in srgb, var(--color-secondary) 30%, #090f1d);
+        --color-secondary-300: color-mix(in srgb, var(--color-secondary) 45%, #090f1d);
+        --color-secondary-400: color-mix(in srgb, var(--color-secondary) 60%, #090f1d);
+
+        --color-success-50: color-mix(in srgb, var(--color-success) 10%, #061f14);
+        --color-success-100: color-mix(in srgb, var(--color-success) 20%, #061f14);
+        --color-success-200: color-mix(in srgb, var(--color-success) 35%, #061f14);
+
+        --color-danger-50: color-mix(in srgb, var(--color-danger) 10%, #1f0808);
+        --color-danger-100: color-mix(in srgb, var(--color-danger) 20%, #1f0808);
+        --color-danger-200: color-mix(in srgb, var(--color-danger) 35%, #1f0808);
+
+        --color-warning-50: color-mix(in srgb, var(--color-warning) 10%, #1f1b05);
+        --color-warning-100: color-mix(in srgb, var(--color-warning) 20%, #1f1b05);
+        --color-warning-200: color-mix(in srgb, var(--color-warning) 35%, #1f1b05);
+
+        --color-ternary-50: color-mix(in srgb, var(--color-ternary) 10%, #14081f);
+        --color-ternary-100: color-mix(in srgb, var(--color-ternary) 20%, #14081f);
+        --color-ternary-200: color-mix(in srgb, var(--color-ternary) 35%, #14081f);
+
+        --color-info-50: color-mix(in srgb, var(--color-info) 10%, #08141f);
+        --color-info-100: color-mix(in srgb, var(--color-info) 20%, #08141f);
+        --color-info-200: color-mix(in srgb, var(--color-info) 35%, #08141f);
+      }
+
+      /* Force dark mode class overrides for common backgrounds, borders, and texts */
+      .dark, [data-theme="dark"] {
+        color: #cbd5e1;
+      }
+      .dark .text-slate-800, [data-theme="dark"] .text-slate-800,
+      .dark .text-gray-800, [data-theme="dark"] .text-gray-800,
+      .dark h1, [data-theme="dark"] h1,
+      .dark h2, [data-theme="dark"] h2,
+      .dark h3, [data-theme="dark"] h3 {
+        color: #f8fafc !important;
+      }
+      .dark .text-slate-700, [data-theme="dark"] .text-slate-700,
+      .dark .text-gray-700, [data-theme="dark"] .text-gray-700 {
+        color: #cbd5e1 !important;
+      }
+      .dark .text-slate-600, [data-theme="dark"] .text-slate-600,
+      .dark .text-gray-600, [data-theme="dark"] .text-gray-600 {
+        color: #cbd5e1 !important;
+      }
+      .dark .text-slate-500, [data-theme="dark"] .text-slate-500,
+      .dark .text-gray-500, [data-theme="dark"] .text-gray-500 {
+        color: #94a3b8 !important;
+      }
+      .dark .text-slate-400, [data-theme="dark"] .text-slate-400,
+      .dark .text-gray-400, [data-theme="dark"] .text-gray-400 {
+        color: #64748b !important;
+      }
+
+      .dark .bg-white, [data-theme="dark"] .bg-white {
+        background-color: var(--card-bg, #111827) !important;
+      }
+      .dark .bg-slate-50, [data-theme="dark"] .bg-slate-50,
+      .dark .bg-gray-50, [data-theme="dark"] .bg-gray-50 {
+        background-color: #1f2937 !important;
+      }
+      .dark .border-slate-100, [data-theme="dark"] .border-slate-100,
+      .dark .border-gray-100, [data-theme="dark"] .border-gray-100,
+      .dark .border-slate-200, [data-theme="dark"] .border-slate-200,
+      .dark .border-gray-200, [data-theme="dark"] .border-gray-200 {
+        border-color: #374151 !important;
+      }
+
+      .dark .bg-gray-100, [data-theme="dark"] .bg-gray-100,
+      .dark .bg-slate-100, [data-theme="dark"] .bg-slate-100 {
+        background-color: #1f2937 !important;
+      }
+      .dark .border-gray-300, [data-theme="dark"] .border-gray-300,
+      .dark .border-slate-300, [data-theme="dark"] .border-slate-300 {
+        border-color: #4b5563 !important;
+      }
+      .dark .bg-gray-200, [data-theme="dark"] .bg-gray-200,
+      .dark .bg-slate-200, [data-theme="dark"] .bg-slate-200 {
+        background-color: #374151 !important;
+      }
+
+      /* Light mode overrides inside forced light subtree */
+      [data-theme="light"] {
+        color: #334155;
+        --layout-bg: var(--color-secondary-50);
+        --card-bg: #ffffff;
+        --card-border: #f1f5f9;
+        --card-header-bg: #f8fafc;
+        --card-header-border: #e2e8f0;
+        --input-bg: #ffffff;
+        --input-border: #cbd5e1;
+        --input-placeholder: #94a3b8;
+        --input-text-color: #1e293b;
+        --modal-bg: #ffffff;
+        --modal-footer-bg: #f8fafc;
+        --modal-header-border: #e2e8f0;
+        --modal-footer-border: #e2e8f0;
+        --calendar-bg: #ffffff;
+        --calendar-border: #e2e8f0;
+        --calendar-header-text: #1e293b;
+        --calendar-header-hover: #f1f5f9;
+        --calendar-days-text: #334155;
+        --calendar-selected-bg: var(--color-primary);
+        --calendar-selected-text: #ffffff;
+        --calendar-range-bg: var(--color-primary-50);
+        --calendar-today-bg: var(--color-primary-100);
+        --calendar-today-text: var(--color-primary);
+
+        --color-primary-50: color-mix(in srgb, var(--color-primary) 5%, #ffffff);
+        --color-primary-100: color-mix(in srgb, var(--color-primary) 10%, #ffffff);
+        --color-primary-200: color-mix(in srgb, var(--color-primary) 30%, #ffffff);
+        --color-primary-300: color-mix(in srgb, var(--color-primary) 50%, #ffffff);
+        --color-primary-400: color-mix(in srgb, var(--color-primary) 70%, #ffffff);
+
+        --color-secondary-50: color-mix(in srgb, var(--color-secondary) 5%, #ffffff);
+        --color-secondary-100: color-mix(in srgb, var(--color-secondary) 10%, #ffffff);
+        --color-secondary-200: color-mix(in srgb, var(--color-secondary) 30%, #ffffff);
+        --color-secondary-300: color-mix(in srgb, var(--color-secondary) 50%, #ffffff);
+        --color-secondary-400: color-mix(in srgb, var(--color-secondary) 70%, #ffffff);
+
+        --color-success-50: color-mix(in srgb, var(--color-success) 5%, #ffffff);
+        --color-success-100: color-mix(in srgb, var(--color-success) 10%, #ffffff);
+        --color-success-200: color-mix(in srgb, var(--color-success) 30%, #ffffff);
+
+        --color-danger-50: color-mix(in srgb, var(--color-danger) 5%, #ffffff);
+        --color-danger-100: color-mix(in srgb, var(--color-danger) 10%, #ffffff);
+        --color-danger-200: color-mix(in srgb, var(--color-danger) 30%, #ffffff);
+
+        --color-warning-50: color-mix(in srgb, var(--color-warning) 5%, #ffffff);
+        --color-warning-100: color-mix(in srgb, var(--color-warning) 10%, #ffffff);
+        --color-warning-200: color-mix(in srgb, var(--color-warning) 30%, #ffffff);
+
+        --color-ternary-50: color-mix(in srgb, var(--color-ternary) 5%, #ffffff);
+        --color-ternary-100: color-mix(in srgb, var(--color-ternary) 10%, #ffffff);
+        --color-ternary-200: color-mix(in srgb, var(--color-ternary) 30%, #ffffff);
+
+        --color-info-50: color-mix(in srgb, var(--color-info) 5%, #ffffff);
+        --color-info-100: color-mix(in srgb, var(--color-info) 10%, #ffffff);
+        --color-info-200: color-mix(in srgb, var(--color-info) 30%, #ffffff);
+      }
+
+      [data-theme="light"] .text-slate-800,
+      [data-theme="light"] .text-gray-800,
+      [data-theme="light"] h1,
+      [data-theme="light"] h2,
+      [data-theme="light"] h3 {
+        color: #1e293b !important;
+      }
+      [data-theme="light"] .text-slate-700,
+      [data-theme="light"] .text-gray-700 {
+        color: #334155 !important;
+      }
+      [data-theme="light"] .text-slate-600,
+      [data-theme="light"] .text-gray-600 {
+        color: #475569 !important;
+      }
+      [data-theme="light"] .text-slate-500,
+      [data-theme="light"] .text-gray-500 {
+        color: #64748b !important;
+      }
+      [data-theme="light"] .text-slate-400,
+      [data-theme="light"] .text-gray-400 {
+        color: #94a3b8 !important;
+      }
+
+      [data-theme="light"] .bg-white {
+        background-color: #ffffff !important;
+      }
+      [data-theme="light"] .bg-slate-50,
+      [data-theme="light"] .bg-gray-50 {
+        background-color: #f8fafc !important;
+      }
+      [data-theme="light"] .border-slate-100,
+      [data-theme="light"] .border-gray-100,
+      [data-theme="light"] .border-slate-200,
+      [data-theme="light"] .border-gray-200 {
+        border-color: #e2e8f0 !important;
+      }
+      [data-theme="light"] .bg-gray-100,
+      [data-theme="light"] .bg-slate-100 {
+        background-color: #f1f5f9 !important;
+      }
+      [data-theme="light"] .border-gray-300,
+      [data-theme="light"] .border-slate-300 {
+        border-color: #cbd5e1 !important;
+      }
+      [data-theme="light"] .bg-gray-200,
+      [data-theme="light"] .bg-slate-200 {
+        background-color: #e2e8f0 !important;
+      }
+
+
+      /* Primary overrides (cyan mappings in UI library) */
+      .bg-cyan-400 { background-color: var(--color-primary) !important; }
+      .hover\\:bg-cyan-500:hover { background-color: var(--color-primary-hover) !important; }
+      .focus\\:ring-cyan-300:focus { --tw-ring-color: var(--color-primary-ring) !important; }
+      .text-cyan-600 { color: var(--color-primary) !important; }
+      .text-cyan-500 { color: var(--color-primary) !important; }
+      .border-cyan-400 { border-color: var(--color-primary) !important; }
+      .focus\\:border-cyan-500:focus { border-color: var(--color-primary-hover) !important; }
+      .focus\\:ring-cyan-500:focus { --tw-ring-color: var(--color-primary-hover) !important; }
+      .text-cyan-100 { color: var(--color-primary-soft) !important; }
+      .hover\\:bg-cyan-50:hover { background-color: var(--color-primary-soft) !important; }
+
+      /* Success overrides (green mappings in UI library) */
+      .bg-green-700 { background-color: var(--color-success) !important; }
+      .hover\\:bg-green-800:hover { background-color: var(--color-success-hover) !important; }
+      .focus\\:ring-green-300:focus { --tw-ring-color: var(--color-success-ring) !important; }
+      .text-green-700 { color: var(--color-success) !important; }
+      .border-green-700 { border-color: var(--color-success) !important; }
+      .bg-green-500 { background-color: var(--color-success) !important; }
+      .hover\\:bg-green-600:hover { background-color: var(--color-success-hover) !important; }
+
+      /* Danger overrides (red mappings in UI library) */
+      .bg-red-700 { background-color: var(--color-danger) !important; }
+      .hover\\:bg-red-800:hover { background-color: var(--color-danger-hover) !important; }
+      .focus\\:ring-red-300:focus { --tw-ring-color: var(--color-danger-ring) !important; }
+      .text-red-700 { color: var(--color-danger) !important; }
+      .border-red-700 { border-color: var(--color-danger) !important; }
+      .bg-red-500 { background-color: var(--color-danger) !important; }
+      .hover\\:bg-red-600:hover { background-color: var(--color-danger-hover) !important; }
+
+      /* Warning overrides (yellow mappings in UI library) */
+      .bg-yellow-400 { background-color: var(--color-warning) !important; }
+      .hover\\:bg-yellow-500:hover { background-color: var(--color-warning-hover) !important; }
+      .focus\\:ring-yellow-300:focus { --tw-ring-color: var(--color-warning-ring) !important; }
+      .text-yellow-600 { color: var(--color-warning-hover) !important; }
+      .border-yellow-400 { border-color: var(--color-warning) !important; }
+      .bg-yellow-500 { background-color: var(--color-warning) !important; }
+      .hover\\:bg-yellow-600:hover { background-color: var(--color-warning-hover) !important; }
+
+      /* Ternary / Orange overrides */
+      .bg-orange-500 { background-color: var(--color-ternary) !important; }
+      .hover\\:bg-orange-500:hover { background-color: var(--color-ternary-hover) !important; }
+      .hover\\:bg-orange-600:hover { background-color: var(--color-ternary-hover) !important; }
+      .text-orange-500 { color: var(--color-ternary) !important; }
+      .text-orange-800 { color: var(--color-ternary-hover) !important; }
+      .bg-orange-200 { background-color: var(--color-ternary-soft) !important; }
+      .border-orange-400 { border-color: var(--color-ternary) !important; }
+      .border-orange-500 { border-color: var(--color-ternary) !important; }
+      .hover\\:bg-orange-50\\/30:hover { background-color: var(--color-ternary-soft) !important; }
+
+      /* Info / Blue overrides */
+      .bg-blue-500 { background-color: var(--color-info) !important; }
+      .hover\\:bg-blue-600:hover { background-color: var(--color-info-hover) !important; }
+      .text-blue-500 { color: var(--color-info) !important; }
+      .text-blue-600 { color: var(--color-info-hover) !important; }
+      .border-blue-500 { border-color: var(--color-info) !important; }
+
+      /* Secondary elements overrides */
+      button[class*="bg-white"][class*="hover:bg-gray-100"] {
+        background-color: var(--color-secondary) !important;
+        border-color: var(--color-secondary-soft-border) !important;
+        color: #111827 !important;
+      }
+      button[class*="bg-white"][class*="hover:bg-gray-100"]:hover {
+        background-color: var(--color-secondary-hover) !important;
+      }
+
+      /* Custom Table styling overrides */
+      thead tr, tr.bg-secondary-50, tr[class*="bg-secondary-50"] {
+        background-color: var(--color-table-headerBg) !important;
+        border-bottom-color: color-mix(in srgb, var(--color-table-headerBg) 85%, #000000) !important;
+      }
+      th span, th div span {
+        color: var(--color-table-headerText) !important;
+      }
+      tbody tr {
+        background-color: var(--color-table-rowBg) !important;
+      }
+      tbody tr td, tbody tr td div {
+        color: var(--color-table-rowText) !important;
+      }
+      tbody tr:hover {
+        background-color: color-mix(in srgb, var(--color-primary) 8%, var(--color-table-rowBg)) !important;
+      }
+
+      /* Animation for Saved Indicator */
+      @keyframes fadeInOut {
+        0%, 100% { opacity: 0; transform: translateY(-4px); }
+        15%, 85% { opacity: 1; transform: translateY(0); }
+      }
+      .animate-fade-in-out {
+        animation: fadeInOut 1.5s ease-in-out forwards;
+      }
+
+      /* Fallback utility classes for blurs */
+      .backdrop-blur-xs {
+        backdrop-filter: blur(2px);
+        -webkit-backdrop-filter: blur(2px);
+      }
+      .backdrop-blur-xl {
+        backdrop-filter: blur(24px);
+        -webkit-backdrop-filter: blur(24px);
+      }
+
+      /* =======================================================================
+         AUTONOMOUS THEME DESIGNER STYLES (No Tailwind dependencies)
+         ======================================================================= */
+
+      @keyframes itBounce {
+        0%, 100% { transform: translateY(0); }
+        50% { transform: translateY(-8px); }
+      }
+      .it-theme-bounce {
+        animation: itBounce 3s infinite ease-in-out !important;
+      }
+
+      /* FAB styles */
+      .it-theme-fab {
+        position: fixed !important;
+        bottom: 24px !important;
+        right: 24px !important;
+        width: 56px !important;
+        height: 56px !important;
+        border-radius: 50% !important;
+        border: none !important;
+        color: #ffffff !important;
+        box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.15) !important;
+        display: flex !important;
+        align-items: center !important;
+        justify-content: center !important;
+        cursor: pointer !important;
+        z-index: 99999 !important;
+        transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s ease, box-shadow 0.2s ease !important;
+        outline: none !important;
+      }
+      .it-theme-fab:hover {
+        transform: scale(1.1) !important;
+        box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.2) !important;
+      }
+      .it-theme-fab:active {
+        transform: scale(0.95) !important;
+      }
+
+      /* Backdrop styles */
+      .it-theme-backdrop {
+        position: fixed !important;
+        top: 0 !important;
+        left: 0 !important;
+        right: 0 !important;
+        bottom: 0 !important;
+        background-color: rgba(15, 23, 42, 0.3) !important;
+        backdrop-filter: blur(4px) !important;
+        -webkit-backdrop-filter: blur(4px) !important;
+        z-index: 99997 !important;
+        transition: opacity 0.3s ease !important;
+      }
+
+      /* Drawer container */
+      .it-theme-drawer {
+        position: fixed !important;
+        top: 0 !important;
+        right: 0 !important;
+        bottom: 0 !important;
+        width: 100% !important;
+        max-width: 420px !important;
+        background-color: #ffffff !important;
+        box-shadow: -10px 0 25px -5px rgba(0, 0, 0, 0.08), -8px 0 10px -6px rgba(0, 0, 0, 0.08) !important;
+        z-index: 99998 !important;
+        display: flex !important;
+        flex-direction: column !important;
+        justify-content: space-between !important;
+        padding: 24px !important;
+        box-sizing: border-box !important;
+        border-left: 1px solid rgba(226, 232, 240, 0.8) !important;
+        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
+        font-family: Inter, system-ui, -apple-system, sans-serif !important;
+        color: #1e293b !important;
+      }
+
+      .dark .it-theme-drawer, [data-theme="dark"] .it-theme-drawer {
+        background-color: #0f172a !important;
+        border-left-color: rgba(30, 41, 59, 0.8) !important;
+        color: #f1f5f9 !important;
+      }
+
+      /* Drawer Header */
+      .it-theme-drawer-header {
+        display: flex !important;
+        align-items: center !important;
+        justify-content: space-between !important;
+        padding-bottom: 16px !important;
+        border-bottom: 1px solid #e2e8f0 !important;
+      }
+      .dark .it-theme-drawer-header, [data-theme="dark"] .it-theme-drawer-header {
+        border-bottom-color: #1e293b !important;
+      }
+      
+      .it-theme-drawer-title-group {
+        display: flex !important;
+        align-items: center !important;
+        gap: 12px !important;
+      }
+
+      .it-theme-icon-container {
+        width: 36px !important;
+        height: 36px !important;
+        border-radius: 8px !important;
+        display: flex !important;
+        align-items: center !important;
+        justify-content: center !important;
+        color: #ffffff !important;
+      }
+
+      .it-theme-drawer-title {
+        font-size: 16px !important;
+        font-weight: 700 !important;
+        margin: 0 !important;
+        color: #1e293b !important;
+        line-height: 1.2 !important;
+      }
+      .dark .it-theme-drawer-title, [data-theme="dark"] .it-theme-drawer-title {
+        color: #f8fafc !important;
+      }
+
+      .it-theme-drawer-subtitle {
+        font-size: 11px !important;
+        color: #64748b !important;
+        margin: 2px 0 0 0 !important;
+        font-weight: 400 !important;
+      }
+      .dark .it-theme-drawer-subtitle, [data-theme="dark"] .it-theme-drawer-subtitle {
+        color: #94a3b8 !important;
+      }
+
+      .it-theme-close-btn {
+        background: none !important;
+        border: none !important;
+        color: #94a3b8 !important;
+        cursor: pointer !important;
+        padding: 6px !important;
+        border-radius: 6px !important;
+        display: flex !important;
+        align-items: center !important;
+        justify-content: center !important;
+        transition: background-color 0.2s, color 0.2s !important;
+      }
+      .it-theme-close-btn:hover {
+        background-color: #f1f5f9 !important;
+        color: #334155 !important;
+      }
+      .dark .it-theme-close-btn:hover, [data-theme="dark"] .it-theme-close-btn:hover {
+        background-color: #1e293b !important;
+        color: #f1f5f9 !important;
+      }
+
+      /* Sections inside Drawer */
+      .it-theme-section {
+        margin-top: 18px !important;
+      }
+      
+      .it-theme-section-title {
+        font-size: 10px !important;
+        font-weight: 700 !important;
+        text-transform: uppercase !important;
+        letter-spacing: 0.05em !important;
+        color: #94a3b8 !important;
+        margin-bottom: 8px !important;
+        margin-top: 0 !important;
+      }
+
+      /* Preset Grid */
+      .it-theme-presets-grid {
+        display: grid !important;
+        grid-template-columns: repeat(2, 1fr) !important;
+        gap: 8px !important;
+      }
+
+      .it-theme-preset-card {
+        display: flex !important;
+        flex-direction: column !important;
+        align-items: flex-start !important;
+        padding: 10px !important;
+        border-radius: 10px !important;
+        border: 1px solid #e2e8f0 !important;
+        background-color: rgba(255, 255, 255, 0.6) !important;
+        cursor: pointer !important;
+        text-align: left !important;
+        transition: all 0.2s ease !important;
+        width: 100% !important;
+        box-sizing: border-box !important;
+      }
+      .dark .it-theme-preset-card, [data-theme="dark"] .it-theme-preset-card {
+        border-color: #1e293b !important;
+        background-color: rgba(15, 23, 42, 0.4) !important;
+      }
+      
+      .it-theme-preset-card:hover {
+        border-color: #cbd5e1 !important;
+        transform: translateY(-1px) !important;
+      }
+      .dark .it-theme-preset-card:hover, [data-theme="dark"] .it-theme-preset-card:hover {
+        border-color: #334155 !important;
+      }
+
+      .it-theme-preset-name {
+        font-size: 11px !important;
+        font-weight: 600 !important;
+        color: #334155 !important;
+        margin-bottom: 6px !important;
+        margin-top: 0 !important;
+        white-space: nowrap !important;
+        overflow: hidden !important;
+        text-overflow: ellipsis !important;
+        width: 100% !important;
+      }
+      .dark .it-theme-preset-name, [data-theme="dark"] .it-theme-preset-name {
+        color: #cbd5e1 !important;
+      }
+
+      .it-theme-preset-colors {
+        display: flex !important;
+        gap: 4px !important;
+      }
+
+      .it-theme-preset-dot {
+        width: 12px !important;
+        height: 12px !important;
+        border-radius: 50% !important;
+        border: 1px solid rgba(0,0,0,0.08) !important;
+      }
+
+      /* Color controls list */
+      .it-theme-color-list {
+        display: flex !important;
+        flex-direction: column !important;
+        gap: 6px !important;
+        max-height: 250px !important;
+        overflow-y: auto !important;
+        padding-right: 4px !important;
+      }
+
+      .it-theme-color-row {
+        display: flex !important;
+        align-items: center !important;
+        justify-content: space-between !important;
+        padding: 6px 10px !important;
+        border-radius: 10px !important;
+        border: 1px solid #f1f5f9 !important;
+        background-color: rgba(248, 250, 252, 0.5) !important;
+      }
+      .dark .it-theme-color-row, [data-theme="dark"] .it-theme-color-row {
+        border-color: #1e293b !important;
+        background-color: rgba(9, 15, 29, 0.5) !important;
+      }
+
+      .it-theme-color-left {
+        display: flex !important;
+        align-items: center !important;
+        gap: 12px !important;
+      }
+
+      .it-theme-color-picker-btn {
+        position: relative !important;
+        width: 28px !important;
+        height: 28px !important;
+        border-radius: 50% !important;
+        overflow: hidden !important;
+        border: 1px solid #cbd5e1 !important;
+        box-shadow: inset 0 2px 4px 0 rgba(0,0,0,0.06) !important;
+        cursor: pointer !important;
+        display: flex !important;
+        align-items: center !important;
+        justify-content: center !important;
+      }
+      .dark .it-theme-color-picker-btn, [data-theme="dark"] .it-theme-color-picker-btn {
+        border-color: #475569 !important;
+      }
+
+      .it-theme-color-picker-input {
+        position: absolute !important;
+        top: 0 !important;
+        left: 0 !important;
+        width: 100% !important;
+        height: 100% !important;
+        opacity: 0 !important;
+        cursor: pointer !important;
+        margin: 0 !important;
+        padding: 0 !important;
+      }
+
+      .it-theme-color-picker-preview {
+        width: 100% !important;
+        height: 100% !important;
+        border-radius: 50% !important;
+      }
+
+      .it-theme-color-meta {
+        display: flex !important;
+        flex-direction: column !important;
+      }
+
+      .it-theme-color-label {
+        font-size: 10px !important;
+        font-weight: 700 !important;
+        text-transform: uppercase !important;
+        color: #475569 !important;
+      }
+      .dark .it-theme-color-label, [data-theme="dark"] .it-theme-color-label {
+        color: #cbd5e1 !important;
+      }
+
+      .it-theme-color-hex-text {
+        font-family: monospace !important;
+        font-size: 9px !important;
+        color: #94a3b8 !important;
+        margin-top: 1px !important;
+      }
+
+      .it-theme-color-text-input {
+        width: 80px !important;
+        padding: 4px 6px !important;
+        font-size: 11px !important;
+        font-family: monospace !important;
+        text-align: center !important;
+        border-radius: 6px !important;
+        border: 1px solid #cbd5e1 !important;
+        background-color: #ffffff !important;
+        color: #334155 !important;
+        outline: none !important;
+        transition: border-color 0.2s !important;
+        box-sizing: border-box !important;
+      }
+      .dark .it-theme-color-text-input, [data-theme="dark"] .it-theme-color-text-input {
+        border-color: #475569 !important;
+        background-color: #1e293b !important;
+        color: #cbd5e1 !important;
+      }
+
+      /* Mode Selector Segmented Control */
+      .it-theme-mode-selector {
+        display: grid !important;
+        grid-template-columns: repeat(3, 1fr) !important;
+        gap: 2px !important;
+        background-color: #f1f5f9 !important;
+        padding: 2px !important;
+        border-radius: 8px !important;
+        width: 180px !important;
+      }
+      .dark .it-theme-mode-selector, [data-theme="dark"] .it-theme-mode-selector {
+        background-color: #1e293b !important;
+      }
+
+      .it-theme-mode-btn {
+        background: none !important;
+        border: none !important;
+        padding: 6px 8px !important;
+        font-size: 11px !important;
+        font-weight: 600 !important;
+        color: #475569 !important;
+        border-radius: 6px !important;
+        cursor: pointer !important;
+        text-align: center !important;
+        transition: all 0.2s ease !important;
+      }
+      .dark .it-theme-mode-btn, [data-theme="dark"] .it-theme-mode-btn {
+        color: #94a3b8 !important;
+      }
+
+      .it-theme-mode-btn-active {
+        background-color: #ffffff !important;
+        color: var(--color-primary) !important;
+        box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
+      }
+      .dark .it-theme-mode-btn-active, [data-theme="dark"] .it-theme-mode-btn-active {
+        background-color: #0f172a !important;
+        color: var(--color-primary) !important;
+      }
+
+      /* Saved notification toast */
+      .it-theme-toast-container {
+        height: 20px !important;
+        margin: 6px 0 !important;
+        position: relative !important;
+      }
+
+      .it-theme-toast {
+        position: absolute !important;
+        top: 0 !important;
+        left: 0 !important;
+        right: 0 !important;
+        display: flex !important;
+        justify-content: center !important;
+      }
+
+      .it-theme-toast-badge {
+        display: inline-flex !important;
+        align-items: center !important;
+        gap: 4px !important;
+        font-size: 10px !important;
+        font-weight: 600 !important;
+        background-color: rgba(34, 197, 94, 0.1) !important;
+        color: #16a34a !important;
+        padding: 3px 10px !important;
+        border-radius: 9999px !important;
+        border: 1px solid rgba(34, 197, 94, 0.2) !important;
+      }
+
+      /* Drawer Footer */
+      .it-theme-drawer-footer {
+        padding-top: 12px !important;
+        margin-top: 12px !important;
+        border-top: 1px solid #e2e8f0 !important;
+        display: flex !important;
+        align-items: center !important;
+        justify-content: space-between !important;
+      }
+      .dark .it-theme-drawer-footer, [data-theme="dark"] .it-theme-drawer-footer {
+        border-top-color: #1e293b !important;
+      }
+
+      .it-theme-reset-btn {
+        display: flex !important;
+        align-items: center !important;
+        gap: 6px !important;
+        padding: 6px 12px !important;
+        font-size: 11px !important;
+        font-weight: 600 !important;
+        background: none !important;
+        border: none !important;
+        border-radius: 6px !important;
+        color: #64748b !important;
+        cursor: pointer !important;
+        transition: background-color 0.2s, color 0.2s !important;
+      }
+      .it-theme-reset-btn:hover {
+        background-color: #f1f5f9 !important;
+        color: #1e293b !important;
+      }
+      .dark .it-theme-reset-btn:hover, [data-theme="dark"] .it-theme-reset-btn:hover {
+        background-color: #1e293b !important;
+        color: #f8fafc !important;
+      }
+
+      .it-theme-done-btn {
+        padding: 6px 16px !important;
+        font-size: 11px !important;
+        font-weight: 700 !important;
+        border: none !important;
+        border-radius: 6px !important;
+        color: #ffffff !important;
+        cursor: pointer !important;
+        box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
+        transition: transform 0.2s, background-color 0.2s !important;
+      }
+      .it-theme-done-btn:hover {
+        transform: translateY(-1px) !important;
+      }
+    `;
+    setShowSavedToast(true);
+    const timer = setTimeout(() => setShowSavedToast(false), 1500);
+    return () => clearTimeout(timer);
+  }, [palette2, resolvedTheme]);
+  const updateColor = (key, value) => {
+    setPaletteState((prev) => {
+      if (key.includes(".")) {
+        const [section, subKey] = key.split(".");
+        return {
+          ...prev,
+          [section]: {
+            ...prev[section],
+            [subKey]: value
+          }
+        };
+      }
+      return {
+        ...prev,
+        [key]: value
+      };
+    });
+  };
+  const applyPreset = (colors2) => {
+    setPaletteState(colors2);
+  };
+  const resetTheme = () => {
+    const basePalette = {
+      ...DEFAULT_PALETTE,
+      ...theme2,
+      layout: { ...DEFAULT_PALETTE.layout, ...theme2?.layout },
+      table: { ...DEFAULT_PALETTE.table, ...theme2?.table }
+    };
+    setPaletteState(basePalette);
+  };
+  return /* @__PURE__ */ jsxs22(
+    ITThemeContext.Provider,
+    {
+      value: {
+        palette: palette2,
+        colors: palette2,
+        setPalette: setPaletteState,
+        updateColor,
+        resetTheme,
+        applyPreset,
+        resolvedTheme,
+        darkModeMode,
+        setDarkModeMode
+      },
+      children: [
+        children,
+        /* @__PURE__ */ jsx31(
+          "button",
+          {
+            onClick: () => setIsOpen((prev) => !prev),
+            className: "it-theme-fab it-theme-bounce",
+            style: {
+              backgroundColor: "var(--color-primary)"
+            },
+            onMouseEnter: (e) => {
+              e.currentTarget.style.backgroundColor = "var(--color-primary-hover)";
+            },
+            onMouseLeave: (e) => {
+              e.currentTarget.style.backgroundColor = "var(--color-primary)";
+            },
+            "aria-label": "Configurar Paleta de Colores",
+            title: "Configurar Paleta de Colores",
+            children: /* @__PURE__ */ jsx31(MdPalette, { style: { width: "28px", height: "28px" } })
+          }
+        ),
+        isOpen && /* @__PURE__ */ jsxs22(Fragment6, { children: [
+          /* @__PURE__ */ jsx31(
+            "div",
+            {
+              onClick: () => setIsOpen(false),
+              className: "it-theme-backdrop"
+            }
+          ),
+          /* @__PURE__ */ jsxs22("div", { className: "it-theme-drawer", children: [
+            /* @__PURE__ */ jsxs22("div", { children: [
+              /* @__PURE__ */ jsxs22("div", { className: "it-theme-drawer-header", children: [
+                /* @__PURE__ */ jsxs22("div", { className: "it-theme-drawer-title-group", children: [
+                  /* @__PURE__ */ jsx31(
+                    "div",
+                    {
+                      className: "it-theme-icon-container",
+                      style: { backgroundColor: "var(--color-primary)" },
+                      children: /* @__PURE__ */ jsx31(MdPalette, { style: { width: "20px", height: "20px" } })
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs22("div", { children: [
+                    /* @__PURE__ */ jsx31("h3", { className: "it-theme-drawer-title", children: "ITTheme Designer" }),
+                    /* @__PURE__ */ jsx31("p", { className: "it-theme-drawer-subtitle", children: "Configure color tokens in real-time" })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsx31(
+                  "button",
+                  {
+                    onClick: () => setIsOpen(false),
+                    className: "it-theme-close-btn",
+                    children: /* @__PURE__ */ jsx31(MdClose, { style: { width: "20px", height: "20px" } })
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx31("div", { className: "it-theme-toast-container", children: showSavedToast && /* @__PURE__ */ jsx31("div", { className: "it-theme-toast", children: /* @__PURE__ */ jsxs22("span", { className: "it-theme-toast-badge", children: [
+                /* @__PURE__ */ jsx31(MdCheck, { style: { width: "14px", height: "14px" } }),
+                "Auto-saved to LocalStorage"
+              ] }) }) }),
+              /* @__PURE__ */ jsxs22("div", { className: "it-theme-section", style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "16px" }, children: [
+                /* @__PURE__ */ jsx31("h4", { className: "it-theme-section-title", style: { margin: 0 }, children: "Apariencia" }),
+                /* @__PURE__ */ jsxs22("div", { className: "it-theme-mode-selector", children: [
+                  /* @__PURE__ */ jsx31(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => setDarkModeMode("light"),
+                      className: `it-theme-mode-btn ${darkModeMode === "light" ? "it-theme-mode-btn-active" : ""}`,
+                      children: "Claro"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx31(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => setDarkModeMode("dark"),
+                      className: `it-theme-mode-btn ${darkModeMode === "dark" ? "it-theme-mode-btn-active" : ""}`,
+                      children: "Oscuro"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx31(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => setDarkModeMode("system"),
+                      className: `it-theme-mode-btn ${darkModeMode === "system" ? "it-theme-mode-btn-active" : ""}`,
+                      children: "Local"
+                    }
+                  )
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs22("div", { className: "it-theme-section", children: [
+                /* @__PURE__ */ jsx31("h4", { className: "it-theme-section-title", children: "Presets" }),
+                /* @__PURE__ */ jsx31("div", { className: "it-theme-presets-grid", children: PRESETS.map((preset) => {
+                  const isSelected = JSON.stringify(preset.colors) === JSON.stringify(palette2);
+                  return /* @__PURE__ */ jsxs22(
+                    "button",
+                    {
+                      onClick: () => applyPreset(preset.colors),
+                      className: "it-theme-preset-card",
+                      style: isSelected ? {
+                        borderColor: "var(--color-primary)",
+                        backgroundColor: "color-mix(in srgb, var(--color-primary) 5%, transparent)",
+                        boxShadow: "0 0 0 1px var(--color-primary)"
+                      } : {},
+                      children: [
+                        /* @__PURE__ */ jsx31("span", { className: "it-theme-preset-name", children: preset.name }),
+                        /* @__PURE__ */ jsxs22("div", { className: "it-theme-preset-colors", children: [
+                          /* @__PURE__ */ jsx31(
+                            "span",
+                            {
+                              className: "it-theme-preset-dot",
+                              style: { backgroundColor: preset.colors.primary }
+                            }
+                          ),
+                          /* @__PURE__ */ jsx31(
+                            "span",
+                            {
+                              className: "it-theme-preset-dot",
+                              style: { backgroundColor: preset.colors.secondary }
+                            }
+                          ),
+                          /* @__PURE__ */ jsx31(
+                            "span",
+                            {
+                              className: "it-theme-preset-dot",
+                              style: { backgroundColor: preset.colors.ternary }
+                            }
+                          ),
+                          /* @__PURE__ */ jsx31(
+                            "span",
+                            {
+                              className: "it-theme-preset-dot",
+                              style: { backgroundColor: preset.colors.success }
+                            }
+                          )
+                        ] })
+                      ]
+                    },
+                    preset.name
+                  );
+                }) })
+              ] }),
+              /* @__PURE__ */ jsxs22("div", { children: [
+                /* @__PURE__ */ jsxs22("div", { className: "it-theme-section", children: [
+                  /* @__PURE__ */ jsx31("h4", { className: "it-theme-section-title", children: "Base Brand Colors" }),
+                  /* @__PURE__ */ jsx31("div", { className: "it-theme-color-list", children: [
+                    "primary",
+                    "secondary",
+                    "ternary",
+                    "danger",
+                    "success",
+                    "info",
+                    "alert",
+                    "warning"
+                  ].map((key) => {
+                    return /* @__PURE__ */ jsxs22(
+                      "div",
+                      {
+                        className: "it-theme-color-row",
+                        children: [
+                          /* @__PURE__ */ jsxs22("div", { className: "it-theme-color-left", children: [
+                            /* @__PURE__ */ jsxs22("div", { className: "it-theme-color-picker-btn", children: [
+                              /* @__PURE__ */ jsx31(
+                                "input",
+                                {
+                                  type: "color",
+                                  value: getNestedValue3(palette2, key),
+                                  onChange: (e) => updateColor(key, e.target.value),
+                                  className: "it-theme-color-picker-input"
+                                }
+                              ),
+                              /* @__PURE__ */ jsx31(
+                                "div",
+                                {
+                                  className: "it-theme-color-picker-preview",
+                                  style: { backgroundColor: getNestedValue3(palette2, key) }
+                                }
+                              )
+                            ] }),
+                            /* @__PURE__ */ jsxs22("div", { className: "it-theme-color-meta", children: [
+                              /* @__PURE__ */ jsx31("span", { className: "it-theme-color-label", children: key }),
+                              /* @__PURE__ */ jsx31("div", { className: "it-theme-color-hex-text", children: getNestedValue3(palette2, key) })
+                            ] })
+                          ] }),
+                          /* @__PURE__ */ jsx31(
+                            "input",
+                            {
+                              type: "text",
+                              value: getNestedValue3(palette2, key),
+                              onChange: (e) => updateColor(key, e.target.value),
+                              placeholder: "#000000",
+                              className: "it-theme-color-text-input"
+                            }
+                          )
+                        ]
+                      },
+                      key
+                    );
+                  }) })
+                ] }),
+                /* @__PURE__ */ jsxs22("div", { className: "it-theme-section", children: [
+                  /* @__PURE__ */ jsx31("h4", { className: "it-theme-section-title", children: "Sidebar & Navbar Styles" }),
+                  /* @__PURE__ */ jsx31("div", { className: "it-theme-color-list", children: [
+                    "layout.sidebarBg",
+                    "layout.sidebarText",
+                    "layout.navbarBg",
+                    "layout.navbarText"
+                  ].map((key) => {
+                    const displayLabel = key.split(".")[1];
+                    return /* @__PURE__ */ jsxs22(
+                      "div",
+                      {
+                        className: "it-theme-color-row",
+                        children: [
+                          /* @__PURE__ */ jsxs22("div", { className: "it-theme-color-left", children: [
+                            /* @__PURE__ */ jsxs22("div", { className: "it-theme-color-picker-btn", children: [
+                              /* @__PURE__ */ jsx31(
+                                "input",
+                                {
+                                  type: "color",
+                                  value: getNestedValue3(palette2, key),
+                                  onChange: (e) => updateColor(key, e.target.value),
+                                  className: "it-theme-color-picker-input"
+                                }
+                              ),
+                              /* @__PURE__ */ jsx31(
+                                "div",
+                                {
+                                  className: "it-theme-color-picker-preview",
+                                  style: { backgroundColor: getNestedValue3(palette2, key) }
+                                }
+                              )
+                            ] }),
+                            /* @__PURE__ */ jsxs22("div", { className: "it-theme-color-meta", children: [
+                              /* @__PURE__ */ jsx31("span", { className: "it-theme-color-label", children: displayLabel }),
+                              /* @__PURE__ */ jsx31("div", { className: "it-theme-color-hex-text", children: getNestedValue3(palette2, key) })
+                            ] })
+                          ] }),
+                          /* @__PURE__ */ jsx31(
+                            "input",
+                            {
+                              type: "text",
+                              value: getNestedValue3(palette2, key),
+                              onChange: (e) => updateColor(key, e.target.value),
+                              placeholder: "#000000",
+                              className: "it-theme-color-text-input"
+                            }
+                          )
+                        ]
+                      },
+                      key
+                    );
+                  }) })
+                ] }),
+                /* @__PURE__ */ jsxs22("div", { className: "it-theme-section", style: { paddingBottom: "24px" }, children: [
+                  /* @__PURE__ */ jsx31("h4", { className: "it-theme-section-title", children: "Table Styles" }),
+                  /* @__PURE__ */ jsx31("div", { className: "it-theme-color-list", children: [
+                    "table.headerBg",
+                    "table.headerText",
+                    "table.rowBg",
+                    "table.rowText"
+                  ].map((key) => {
+                    const displayLabel = key.split(".")[1];
+                    return /* @__PURE__ */ jsxs22(
+                      "div",
+                      {
+                        className: "it-theme-color-row",
+                        children: [
+                          /* @__PURE__ */ jsxs22("div", { className: "it-theme-color-left", children: [
+                            /* @__PURE__ */ jsxs22("div", { className: "it-theme-color-picker-btn", children: [
+                              /* @__PURE__ */ jsx31(
+                                "input",
+                                {
+                                  type: "color",
+                                  value: getNestedValue3(palette2, key),
+                                  onChange: (e) => updateColor(key, e.target.value),
+                                  className: "it-theme-color-picker-input"
+                                }
+                              ),
+                              /* @__PURE__ */ jsx31(
+                                "div",
+                                {
+                                  className: "it-theme-color-picker-preview",
+                                  style: { backgroundColor: getNestedValue3(palette2, key) }
+                                }
+                              )
+                            ] }),
+                            /* @__PURE__ */ jsxs22("div", { className: "it-theme-color-meta", children: [
+                              /* @__PURE__ */ jsx31("span", { className: "it-theme-color-label", children: displayLabel }),
+                              /* @__PURE__ */ jsx31("div", { className: "it-theme-color-hex-text", children: getNestedValue3(palette2, key) })
+                            ] })
+                          ] }),
+                          /* @__PURE__ */ jsx31(
+                            "input",
+                            {
+                              type: "text",
+                              value: getNestedValue3(palette2, key),
+                              onChange: (e) => updateColor(key, e.target.value),
+                              placeholder: "#000000",
+                              className: "it-theme-color-text-input"
+                            }
+                          )
+                        ]
+                      },
+                      key
+                    );
+                  }) })
+                ] })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs22("div", { className: "it-theme-drawer-footer", children: [
+              /* @__PURE__ */ jsxs22(
+                "button",
+                {
+                  onClick: resetTheme,
+                  className: "it-theme-reset-btn",
+                  children: [
+                    /* @__PURE__ */ jsx31(MdRefresh, { style: { width: "16px", height: "16px" } }),
+                    "Reset Defaults"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx31(
+                "button",
+                {
+                  onClick: () => setIsOpen(false),
+                  className: "it-theme-done-btn",
+                  style: {
+                    backgroundColor: "var(--color-primary)"
+                  },
+                  onMouseEnter: (e) => {
+                    e.currentTarget.style.backgroundColor = "var(--color-primary-hover)";
+                  },
+                  onMouseLeave: (e) => {
+                    e.currentTarget.style.backgroundColor = "var(--color-primary)";
+                  },
+                  children: "Done"
+                }
+              )
+            ] })
+          ] })
+        ] })
+      ]
+    }
+  );
 }
 
 // src/types/yup.types.ts
@@ -5371,6 +7174,7 @@ var createValidationSchema = (fields) => Yup.object().shape(
   }, {})
 );
 export {
+  FileTypeEnum,
   ITBadget,
   ITButton,
   calendar_default as ITCalendar,
@@ -5397,6 +7201,8 @@ export {
   ITTimePicker,
   ITToast,
   tripleFilter_default as ITTripleFilter,
-  createValidationSchema
+  UploadStatus,
+  createValidationSchema,
+  useITTheme
 };
 //# sourceMappingURL=index.js.map