@axzydev/axzy_ui_system 1.4.1 → 1.4.2

package/dist/index.js

@@ -7575,6 +7575,7 @@ function ITSegmentedControl({
 
 // src/components/organisms/sidebar/sidebar.tsx
 import { useEffect as useEffect13, useRef as useRef20, useState as useState27 } from "react";
+import clsx40 from "clsx";
 import { FaChevronDown as FaChevronDown4 } from "react-icons/fa";
 import { jsx as jsx56, jsxs as jsxs43 } from "react/jsx-runtime";
 function isSubItemGroup(entry) {
@@ -7593,7 +7594,8 @@ function ITSidebar({
   onItemClick,
   onSubItemClick,
   subitemConnector = "dot",
-  header
+  header,
+  notification
 }) {
   const [expandedItems, setExpandedItems] = useState27(/* @__PURE__ */ new Set());
   const [isHovering, setIsHovering] = useState27(false);
@@ -7738,6 +7740,87 @@ function ITSidebar({
       /* @__PURE__ */ jsx56("ul", { "aria-labelledby": headingId, className: "flex flex-col gap-0", children: group.items.map(renderSubItem) })
     ] }, group.id);
   };
+  const renderNotification = () => {
+    if (!notification) return null;
+    const {
+      count,
+      icon,
+      label = "Notificaciones",
+      onClick,
+      badgeProps
+    } = notification;
+    const { className: badgeClassName, ...badgeRest } = badgeProps ?? {};
+    const badge = /* @__PURE__ */ jsx56(
+      ITBadget,
+      {
+        color: "danger",
+        size: "sm",
+        ...badgeRest,
+        className: clsx40("shadow-md", badgeClassName),
+        children: String(count)
+      }
+    );
+    if (isSidebarCollapsed) {
+      return /* @__PURE__ */ jsxs43(
+        "button",
+        {
+          type: "button",
+          "aria-label": label,
+          title: label,
+          onClick,
+          className: "relative flex items-center justify-center w-full p-2 mb-1 rounded-xl transition-all duration-300",
+          style: { color: "var(--it-sidebar-icon-color, var(--color-secondary-500))" },
+          onMouseEnter: (e) => {
+            e.currentTarget.style.backgroundColor = "var(--it-sidebar-hover-bg, var(--color-secondary-100))";
+          },
+          onMouseLeave: (e) => {
+            e.currentTarget.style.backgroundColor = "transparent";
+          },
+          children: [
+            icon && /* @__PURE__ */ jsx56("span", { className: "flex items-center justify-center text-[1.05rem]", children: icon }),
+            /* @__PURE__ */ jsx56("span", { className: "absolute top-0.5 right-0.5 pointer-events-none", children: badge })
+          ]
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxs43(
+      "button",
+      {
+        type: "button",
+        "aria-label": label,
+        title: label,
+        onClick,
+        className: "flex items-center gap-2.5 w-full text-left px-3 py-2 mb-1 rounded-xl transition-all duration-300",
+        style: { color: "var(--it-sidebar-label-color, var(--color-secondary-600))" },
+        onMouseEnter: (e) => {
+          e.currentTarget.style.backgroundColor = "var(--it-sidebar-hover-bg, var(--color-secondary-100))";
+        },
+        onMouseLeave: (e) => {
+          e.currentTarget.style.backgroundColor = "transparent";
+        },
+        children: [
+          icon && /* @__PURE__ */ jsx56(
+            "span",
+            {
+              className: "flex-shrink-0 flex items-center justify-center text-[1.05rem]",
+              style: { color: "var(--it-sidebar-icon-color, #9ca3af)" },
+              children: icon
+            }
+          ),
+          /* @__PURE__ */ jsx56(
+            ITText,
+            {
+              as: "span",
+              className: "truncate tracking-wide",
+              style: { fontSize: "0.8rem", fontWeight: 500 },
+              children: label
+            }
+          ),
+          /* @__PURE__ */ jsx56("span", { className: "ml-auto flex-shrink-0", children: badge })
+        ]
+      }
+    );
+  };
   return /* @__PURE__ */ jsxs43(
     "aside",
     {
@@ -7759,9 +7842,11 @@ function ITSidebar({
       },
       children: [
         header && !isSidebarCollapsed && /* @__PURE__ */ jsx56("div", { className: "px-4 pt-4 pb-1 flex-shrink-0", children: header }),
+        notification && /* @__PURE__ */ jsx56("div", { className: "px-4 pt-3 flex-shrink-0", children: renderNotification() }),
         /* @__PURE__ */ jsx56("nav", { "aria-label": "Componentes de la librer\xEDa", className: "flex-1 py-4 overflow-y-auto overflow-x-hidden custom-scrollbar px-4", children: /* @__PURE__ */ jsx56("ul", { className: "space-y-1", children: navigationItems.map((item) => {
           const hasSubmenu = !!item.subitems && item.subitems.length > 0;
           const submenuId = `it-sidebar-submenu-${item.id}`;
+          const { className: badgeClassName, ...badgeRest } = item.badgeProps ?? {};
           return /* @__PURE__ */ jsxs43("li", { className: "relative group/navitem", children: [
             /* @__PURE__ */ jsxs43(
               "div",
@@ -7838,19 +7923,18 @@ function ITSidebar({
                       children: /* @__PURE__ */ jsx56(FaChevronDown4, { className: "w-3 h-3" })
                     }
                   ),
-                  item.badge && /* @__PURE__ */ jsx56(
-                    "span",
+                  item.badge != null && item.badge !== "" && /* @__PURE__ */ jsx56(
+                    ITBadget,
                     {
-                      className: `
-                      absolute flex items-center justify-center font-bold shadow-md
-                      ${isSidebarCollapsed ? "top-1 right-1 w-2.5 h-2.5 rounded-full ring-2 ring-white" : "right-3 top-1/2 transform -translate-y-1/2 px-1.5 py-0 text-[9px] rounded-full backdrop-blur-sm"}
-                    `,
-                      style: {
-                        backgroundColor: "var(--it-sidebar-badge-bg, var(--color-primary-500))",
-                        color: "var(--it-sidebar-badge-color, #ffffff)",
-                        boxShadow: isSidebarCollapsed ? "0 0 0 2px var(--it-sidebar-bg, var(--color-secondary-900))" : "none"
-                      },
-                      children: isSidebarCollapsed ? "" : item.badge
+                      color: "primary",
+                      size: "sm",
+                      ...badgeRest,
+                      className: clsx40(
+                        "absolute shadow-md",
+                        isSidebarCollapsed ? "top-0.5 right-0.5" : "right-3 top-1/2 -translate-y-1/2",
+                        badgeClassName
+                      ),
+                      children: String(item.badge)
                     }
                   )
                 ]
@@ -7916,7 +8000,7 @@ function ITSidebar({
 
 // src/components/atoms/slide/slide.tsx
 import { useState as useState28, useEffect as useEffect14 } from "react";
-import clsx40 from "clsx";
+import clsx41 from "clsx";
 import { jsx as jsx57 } from "react/jsx-runtime";
 function ITSlideToggle({
   onToggle,
@@ -7974,7 +8058,7 @@ function ITSlideToggle({
     "div",
     {
       onClick: toggleSwitch,
-      className: clsx40(
+      className: clsx41(
         "flex items-center rounded-full p-1 transition-colors duration-300",
         container,
         disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer",
@@ -7993,7 +8077,7 @@ function ITSlideToggle({
       children: /* @__PURE__ */ jsx57(
         "div",
         {
-          className: clsx40(
+          className: clsx41(
             "bg-white rounded-full shadow-md transform transition-transform duration-300 pointer-events-none",
             knob,
             isOn ? translate : "translate-x-0"
@@ -8005,7 +8089,7 @@ function ITSlideToggle({
 }
 
 // src/components/atoms/slider/slider.tsx
-import clsx41 from "clsx";
+import clsx42 from "clsx";
 import { jsx as jsx58, jsxs as jsxs44 } from "react/jsx-runtime";
 function ITSlider({
   value,
@@ -8017,7 +8101,7 @@ function ITSlider({
   disabled = false,
   className
 }) {
-  return /* @__PURE__ */ jsxs44("div", { className: clsx41("flex flex-col gap-1.5", className), children: [
+  return /* @__PURE__ */ jsxs44("div", { className: clsx42("flex flex-col gap-1.5", className), children: [
     label && /* @__PURE__ */ jsxs44(ITText, { as: "label", className: "text-xs font-semibold text-secondary-600 dark:text-secondary-400", children: [
       label,
       ": ",
@@ -8033,7 +8117,7 @@ function ITSlider({
         value,
         onChange: (e) => onChange(Number(e.target.value)),
         disabled,
-        className: clsx41(
+        className: clsx42(
           "w-full h-1.5 appearance-none rounded-full outline-none cursor-pointer",
           "bg-secondary-200 dark:bg-secondary-700",
           "accent-primary-500",
@@ -8053,7 +8137,7 @@ function ITSlider({
 }
 
 // src/components/molecules/stat-card/stat-card.tsx
-import clsx42 from "clsx";
+import clsx43 from "clsx";
 import { jsx as jsx59, jsxs as jsxs45 } from "react/jsx-runtime";
 var trendColors = {
   up: "text-emerald-600 bg-emerald-50 dark:text-emerald-400 dark:bg-emerald-950/30",
@@ -8074,7 +8158,7 @@ function ITStatCard({
   return /* @__PURE__ */ jsxs45(
     "div",
     {
-      className: clsx42("rounded-xl p-4 border border-slate-100 dark:border-slate-800", color, className),
+      className: clsx43("rounded-xl p-4 border border-slate-100 dark:border-slate-800", color, className),
       style,
       onClick,
       role: onClick ? "button" : void 0,
@@ -8086,7 +8170,7 @@ function ITStatCard({
         ] }),
         /* @__PURE__ */ jsxs45("div", { className: "flex items-baseline gap-2", children: [
           /* @__PURE__ */ jsx59(ITText, { as: "span", className: "text-2xl font-bold text-slate-800 dark:text-white", children: value }),
-          trend && /* @__PURE__ */ jsx59(ITText, { as: "span", className: clsx42("text-[11px] font-semibold px-1.5 py-0.5 rounded-md", trendColors[trendDirection]), children: trend })
+          trend && /* @__PURE__ */ jsx59(ITText, { as: "span", className: clsx43("text-[11px] font-semibold px-1.5 py-0.5 rounded-md", trendColors[trendDirection]), children: trend })
         ] })
       ]
     }
@@ -8094,7 +8178,7 @@ function ITStatCard({
 }
 
 // src/components/molecules/table/table.tsx
-import clsx43 from "clsx";
+import clsx44 from "clsx";
 import React11, { useState as useState29 } from "react";
 import {
   FaCheck as FaCheck4,
@@ -8271,7 +8355,7 @@ function ITTable({
           children: /* @__PURE__ */ jsx60("div", { className: "relative w-10 h-5 bg-secondary-300 rounded-full", children: /* @__PURE__ */ jsx60(
             "div",
             {
-              className: clsx43(
+              className: clsx44(
                 "absolute top-0.5 w-4 h-4 rounded-full transition-all duration-300 shadow-sm",
                 {
                   "left-0.5 bg-secondary-400": currentValue === void 0,
@@ -8462,7 +8546,7 @@ function ITTable({
     event.preventDefault();
     onRowClick(row, event);
   };
-  return /* @__PURE__ */ jsx60("div", { ref: rootRef, className: clsx43("space-y-4 w-full", containerClassName), children: /* @__PURE__ */ jsxs46("div", { className: tableContainer, style: { backgroundColor: "var(--color-table-rowBg, #ffffff)" }, children: [
+  return /* @__PURE__ */ jsx60("div", { ref: rootRef, className: clsx44("space-y-4 w-full", containerClassName), children: /* @__PURE__ */ jsxs46("div", { className: tableContainer, style: { backgroundColor: "var(--color-table-rowBg, #ffffff)" }, children: [
     title && /* @__PURE__ */ jsxs46("div", { className: "px-6 py-5 flex items-center justify-between", style: { backgroundColor: "var(--color-table-rowBg, #ffffff)" }, children: [
       /* @__PURE__ */ jsx60(ITText, { as: "h2", className: "text-xl font-bold text-secondary-900 leading-tight", children: title }),
       /* @__PURE__ */ jsxs46("div", { className: "flex items-center bg-slate-100 dark:bg-slate-800/80 rounded-lg p-0.5 border border-slate-200 dark:border-slate-700/50", children: [
@@ -8519,7 +8603,7 @@ function ITTable({
     effectiveView === "cards" ? /* @__PURE__ */ jsx60("div", { className: "p-4 space-y-3 max-h-[400px] overflow-y-auto", children: currentData.length > 0 ? currentData.map((row, i) => /* @__PURE__ */ jsx60(
       "div",
       {
-        className: clsx43(tableCardHover, onRowClick && tableCardClickable),
+        className: clsx44(tableCardHover, onRowClick && tableCardClickable),
         role: onRowClick ? "button" : void 0,
         tabIndex: onRowClick ? 0 : void 0,
         onClick: onRowClick ? handleRowClick(row) : void 0,
@@ -8527,7 +8611,7 @@ function ITTable({
         children: renderCard ? renderCard(row) : renderDefaultCard(row)
       },
       i
-    )) : /* @__PURE__ */ jsxs46("div", { className: clsx43(tableEmptyContent, "py-12"), children: [
+    )) : /* @__PURE__ */ jsxs46("div", { className: clsx44(tableEmptyContent, "py-12"), children: [
       /* @__PURE__ */ jsx60(ITText, { as: "span", className: "text-lg", children: "No se encontraron resultados" }),
       /* @__PURE__ */ jsx60(ITText, { as: "span", className: "text-sm mt-1", children: "Intenta ajustar los filtros" })
     ] }) }) : /* @__PURE__ */ jsx60(
@@ -8539,7 +8623,7 @@ function ITTable({
         children: /* @__PURE__ */ jsxs46(
           "table",
           {
-            className: clsx43(
+            className: clsx44(
               tableLayoutClass,
               showVerticalBorder && "[&_th]:border-r [&_th:last-child]:border-r-0 [&_td]:border-r [&_td:last-child]:border-r-0",
               showVerticalBorder && (verticalBorderClassname || "[&_th]:border-slate-100 dark:[&_th]:border-slate-700/30 [&_td]:border-slate-100 dark:[&_td]:border-slate-700/30"),
@@ -8559,7 +8643,7 @@ function ITTable({
               /* @__PURE__ */ jsx60("thead", { children: /* @__PURE__ */ jsx60(
                 "tr",
                 {
-                  className: clsx43(tableHeaderRow, "dark:text-slate-200"),
+                  className: clsx44(tableHeaderRow, "dark:text-slate-200"),
                   "aria-rowindex": isTableVirtual ? 1 : void 0,
                   children: columns.map((col) => {
                     const pin = pinnedMeta[col.key];
@@ -8568,7 +8652,7 @@ function ITTable({
                       "th",
                       {
                         scope: "col",
-                        className: clsx43(
+                        className: clsx44(
                           tableHeaderCell(col.className, density),
                           col.align && tableAlignClasses[col.align],
                           isPinned && "sticky",
@@ -8602,7 +8686,7 @@ function ITTable({
                   })
                 }
               ) }),
-              /* @__PURE__ */ jsx60("tbody", { className: clsx43(tableBody, "dark:divide-slate-700/30"), children: currentData.length > 0 ? /* @__PURE__ */ jsxs46(Fragment9, { children: [
+              /* @__PURE__ */ jsx60("tbody", { className: clsx44(tableBody, "dark:divide-slate-700/30"), children: currentData.length > 0 ? /* @__PURE__ */ jsxs46(Fragment9, { children: [
                 isTableVirtual && topSpacerHeight > 0 && /* @__PURE__ */ jsx60("tr", { "aria-hidden": "true", style: { height: topSpacerHeight }, children: /* @__PURE__ */ jsx60("td", { colSpan: columnCount, style: { padding: 0, border: 0 } }) }),
                 windowData.map((row, windowIndex) => {
                   const absoluteIndex = isTableVirtual ? startIndex + windowIndex : windowIndex;
@@ -8610,7 +8694,7 @@ function ITTable({
                     "tr",
                     {
                       "aria-rowindex": isTableVirtual ? absoluteIndex + 2 : void 0,
-                      className: clsx43(
+                      className: clsx44(
                         tableRow,
                         variant === "striped" && absoluteIndex % 2 === 0 && "bg-secondary-50/40 dark:bg-slate-800/20",
                         onRowClick && tableRowClickable
@@ -8626,7 +8710,7 @@ function ITTable({
                         return /* @__PURE__ */ jsx60(
                           "td",
                           {
-                            className: clsx43(
+                            className: clsx44(
                               tableCell(col.className, density),
                               col.align && tableAlignClasses[col.align],
                               isPinned && "sticky bg-[var(--color-table-rowBg,white)] group-hover:bg-[var(--color-table-rowHover,var(--color-secondary-50))]",
@@ -8638,7 +8722,7 @@ function ITTable({
                               ...isPinned ? pin.side === "left" ? { left: pin.offset } : { right: pin.offset } : {}
                             } : void 0,
                             title: truncateTitle,
-                            children: col.type === "actions" ? /* @__PURE__ */ jsx60("div", { className: tableActionsCell, children: renderCellContent(col, row) }) : /* @__PURE__ */ jsx60("div", { className: clsx43(tableCellText, col.truncate && "truncate"), children: renderCellContent(col, row) })
+                            children: col.type === "actions" ? /* @__PURE__ */ jsx60("div", { className: tableActionsCell, children: renderCellContent(col, row) }) : /* @__PURE__ */ jsx60("div", { className: clsx44(tableCellText, col.truncate && "truncate"), children: renderCellContent(col, row) })
                           },
                           `${absoluteIndex}-${col.key}`
                         );
@@ -8674,7 +8758,7 @@ function ITTable({
 }
 
 // src/components/atoms/textarea/textarea.tsx
-import clsx44 from "clsx";
+import clsx45 from "clsx";
 import { jsx as jsx61, jsxs as jsxs47 } from "react/jsx-runtime";
 var resizeMap = {
   none: "resize-none",
@@ -8695,7 +8779,7 @@ function ITTextarea({
   maxLength,
   resize = "vertical"
 }) {
-  return /* @__PURE__ */ jsxs47("div", { className: clsx44("flex flex-col gap-1.5", className), children: [
+  return /* @__PURE__ */ jsxs47("div", { className: clsx45("flex flex-col gap-1.5", className), children: [
     label && /* @__PURE__ */ jsx61(ITText, { as: "label", className: inputLabel(!!error), htmlFor: name, children: label }),
     /* @__PURE__ */ jsx61(
       "textarea",
@@ -8708,7 +8792,7 @@ function ITTextarea({
         rows,
         disabled,
         maxLength,
-        className: clsx44(
+        className: clsx45(
           "w-full border border-solid transition-all duration-200 rounded-lg px-3 py-2 text-sm outline-none",
           "focus:ring-2",
           resizeMap[resize],
@@ -8723,7 +8807,7 @@ function ITTextarea({
 
 // src/components/molecules/tabs/tabs.tsx
 import { useState as useState30 } from "react";
-import { clsx as clsx45 } from "clsx";
+import { clsx as clsx46 } from "clsx";
 import { jsx as jsx62, jsxs as jsxs48 } from "react/jsx-runtime";
 var ITTabs = ({
   items,
@@ -8740,8 +8824,8 @@ var ITTabs = ({
     if (onChange) onChange(id);
   };
   const activeContent = items.find((item) => item.id === activeId)?.content;
-  return /* @__PURE__ */ jsxs48("div", { className: clsx45("w-full", containerClassName), children: [
-    /* @__PURE__ */ jsx62("div", { className: clsx45(
+  return /* @__PURE__ */ jsxs48("div", { className: clsx46("w-full", containerClassName), children: [
+    /* @__PURE__ */ jsx62("div", { className: clsx46(
       "flex border-secondary-200 mb-4",
       variant === "line" ? "border-b" : "gap-2 p-1 bg-secondary-100 rounded-lg w-fit",
       className
@@ -8752,7 +8836,7 @@ var ITTabs = ({
         {
           onClick: () => handleTabClick(item.id, item.disabled),
           disabled: item.disabled,
-          className: clsx45(
+          className: clsx46(
             "flex items-center gap-2 px-4 py-2 text-sm font-medium transition-all duration-200 outline-none",
             // LINE VARIANT
             variant === "line" && [
@@ -8780,7 +8864,7 @@ var ITTabs = ({
 var tabs_default = ITTabs;
 
 // src/components/organisms/triple-filter/tripleFilter.tsx
-import clsx46 from "clsx";
+import clsx47 from "clsx";
 import { jsx as jsx63 } from "react/jsx-runtime";
 var colorMap2 = {
   primary: "text-primary-600",
@@ -8803,14 +8887,14 @@ var ITTripleFilter = ({
   return /* @__PURE__ */ jsx63(
     "div",
     {
-      className: clsx46("flex bg-slate-100 p-1 rounded-xl gap-1 w-fit", className),
+      className: clsx47("flex bg-slate-100 p-1 rounded-xl gap-1 w-fit", className),
       children: options.map((option) => /* @__PURE__ */ jsx63(
         "button",
         {
           onClick: () => onChange(option.value),
-          className: clsx46(
+          className: clsx47(
             "px-4 py-1.5 rounded-lg text-[10px] font-bold uppercase tracking-wider transition-all duration-200 whitespace-nowrap",
-            value === option.value ? clsx46("bg-white shadow-sm", colorMap2[color]) : "text-slate-400 hover:text-slate-600"
+            value === option.value ? clsx47("bg-white shadow-sm", colorMap2[color]) : "text-slate-400 hover:text-slate-600"
           ),
           children: /* @__PURE__ */ jsx63(ITText, { as: "span", children: option.label })
         },
@@ -8832,7 +8916,7 @@ var positionStyles = {
 };
 
 // src/components/organisms/toast/toast.tsx
-import clsx47 from "clsx";
+import clsx48 from "clsx";
 import { useEffect as useEffect15, useState as useState31 } from "react";
 import { FaTimesCircle as FaTimesCircle2, FaCheckCircle as FaCheckCircle2, FaExclamationTriangle as FaExclamationTriangle3, FaInfoCircle as FaInfoCircle2, FaTimes as FaTimes10 } from "react-icons/fa";
 import { jsx as jsx64, jsxs as jsxs49 } from "react/jsx-runtime";
@@ -8878,7 +8962,7 @@ function ITToast({
   return /* @__PURE__ */ jsxs49(
     "div",
     {
-      className: clsx47(
+      className: clsx48(
         "fixed z-[80] p-4 rounded-xl shadow-xl flex items-center justify-between gap-4 transition-all duration-300 text-white min-w-[300px]",
         positionStyles[position],
         {
@@ -8916,7 +9000,7 @@ import {
   useRef as useRef21,
   useState as useState33
 } from "react";
-import clsx49 from "clsx";
+import clsx50 from "clsx";
 import {
   FaBold,
   FaEraser,
@@ -8940,7 +9024,7 @@ var toolbarActions = [
 
 // src/components/atoms/tooltip/tooltip.tsx
 import { useState as useState32 } from "react";
-import clsx48 from "clsx";
+import clsx49 from "clsx";
 import { jsx as jsx65, jsxs as jsxs50 } from "react/jsx-runtime";
 var positionClasses2 = {
   top: "bottom-full left-1/2 -translate-x-1/2 mb-2",
@@ -8973,14 +9057,14 @@ function ITTooltip({
   return /* @__PURE__ */ jsxs50(
     "div",
     {
-      className: clsx48("relative inline-flex", className),
+      className: clsx49("relative inline-flex", className),
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,
       children: [
         children,
-        visible && /* @__PURE__ */ jsxs50("div", { className: clsx48("absolute z-[70] pointer-events-none", positionClasses2[position]), children: [
+        visible && /* @__PURE__ */ jsxs50("div", { className: clsx49("absolute z-[70] pointer-events-none", positionClasses2[position]), children: [
           /* @__PURE__ */ jsx65("div", { className: "bg-slate-800 dark:bg-slate-700 text-white text-xs rounded-lg px-2.5 py-1.5 whitespace-nowrap shadow-lg", children: /* @__PURE__ */ jsx65(ITText, { as: "span", children: content }) }),
-          /* @__PURE__ */ jsx65("div", { className: clsx48("absolute", arrowClasses[position]) })
+          /* @__PURE__ */ jsx65("div", { className: clsx49("absolute", arrowClasses[position]) })
         ] })
       ]
     }
@@ -9424,7 +9508,7 @@ function ITWysiwyg({
         "aria-pressed": isActive,
         onMouseDown: (e) => e.preventDefault(),
         onClick: () => runAction(action),
-        className: clsx49(
+        className: clsx50(
           "flex h-8 w-8 items-center justify-center rounded-md text-[13px] transition-colors",
           isActive ? "bg-primary-100 text-primary-700 dark:bg-primary-900/40 dark:text-primary-300" : "text-secondary-500 hover:bg-secondary-200/70 hover:text-secondary-800 dark:text-secondary-400 dark:hover:bg-slate-700 dark:hover:text-secondary-200",
           isLocked && "cursor-not-allowed opacity-40"
@@ -9438,7 +9522,7 @@ function ITWysiwyg({
     /* @__PURE__ */ jsxs51(
       "div",
       {
-        className: clsx49(
+        className: clsx50(
           "w-full border border-solid rounded-lg overflow-hidden transition-all duration-200",
           error ? "ring-2 ring-danger-100 border-danger-500" : "border-secondary-300 focus-within:ring-2 focus-within:border-primary-500 focus-within:ring-primary-100",
           isLocked && "opacity-50 cursor-not-allowed bg-secondary-100 dark:bg-slate-800"
@@ -9447,7 +9531,7 @@ function ITWysiwyg({
           /* @__PURE__ */ jsx66(
             "div",
             {
-              className: clsx49(
+              className: clsx50(
                 "flex flex-wrap items-center gap-0.5 px-1.5 py-1 border-b border-secondary-200 bg-secondary-50 dark:bg-slate-800",
                 isLocked && "bg-secondary-100 dark:bg-slate-900"
               ),
@@ -9474,7 +9558,7 @@ function ITWysiwyg({
                 focusedRef.current = false;
                 emitChange();
               },
-              className: clsx49(
+              className: clsx50(
                 "outline-none bg-white dark:bg-slate-900 text-secondary-800 dark:text-secondary-200",
                 "empty:before:content-[attr(data-placeholder)] empty:before:text-secondary-400 empty:before:pointer-events-none empty:before:select-none",
                 "[&_ul]:list-disc [&_ol]:list-decimal [&_ul]:pl-5 [&_ol]:pl-5 [&_li]:ml-4",
@@ -9498,7 +9582,7 @@ function ITWysiwyg({
 // src/components/organisms/dropfile/dropfile.tsx
 import { useState as useState34, useEffect as useEffect17 } from "react";
 import { useDropzone } from "react-dropzone";
-import clsx50 from "clsx";
+import clsx51 from "clsx";
 
 // src/components/organisms/dropfile/dropfile.props.ts
 var FileTypeEnum = /* @__PURE__ */ ((FileTypeEnum2) => {
@@ -9801,7 +9885,7 @@ var ITDropfile = ({
         /* @__PURE__ */ jsx67(ITText, { as: "p", className: "text-[10px] text-secondary-500", children: selectedFile ? (selectedFile.size / 1024 / 1024).toFixed(2) + " MB" : "" })
       ] })
     ] }) }),
-    /* @__PURE__ */ jsx67("div", { className: clsx50("relative bg-secondary-100 flex items-center justify-center", !contentClassName ? "max-h-[200px] min-h-[100px] overflow-auto" : contentClassName), children: selectedFile && fileType?.startsWith("image/") || !selectedFile && imagePreview ? /* @__PURE__ */ jsx67(
+    /* @__PURE__ */ jsx67("div", { className: clsx51("relative bg-secondary-100 flex items-center justify-center", !contentClassName ? "max-h-[200px] min-h-[100px] overflow-auto" : contentClassName), children: selectedFile && fileType?.startsWith("image/") || !selectedFile && imagePreview ? /* @__PURE__ */ jsx67(
       "img",
       {
         src: imagePreview,
@@ -9865,7 +9949,7 @@ var ITDropfile = ({
   ] }) });
   if (view === "button") {
     const hasFile = Boolean(selectedFile || imagePreview);
-    return /* @__PURE__ */ jsxs52("div", { className: clsx50("inline-block", containerClassName), children: [
+    return /* @__PURE__ */ jsxs52("div", { className: clsx51("inline-block", containerClassName), children: [
       /* @__PURE__ */ jsx67(
         ITButton,
         {
@@ -9887,7 +9971,7 @@ var ITDropfile = ({
       ] }) })
     ] });
   }
-  return /* @__PURE__ */ jsxs52("div", { className: clsx50("w-full transition-all duration-300", containerClassName), children: [
+  return /* @__PURE__ */ jsxs52("div", { className: clsx51("w-full transition-all duration-300", containerClassName), children: [
     headerRow,
     dropZoneOrPreview
   ] });
@@ -9896,7 +9980,7 @@ var dropfile_default = ITDropfile;
 
 // src/components/templates/layout/layout.tsx
 import { useState as useState36 } from "react";
-import clsx51 from "clsx";
+import clsx52 from "clsx";
 
 // src/components/organisms/topbar/topbar.tsx
 import { FaUserCircle as FaUserCircle2, FaBars } from "react-icons/fa";
@@ -10154,7 +10238,7 @@ function ITLayout({
               )
             }
           ),
-          /* @__PURE__ */ jsx69("main", { className: "flex-1 overflow-y-auto w-full custom-scrollbar relative z-0", children: /* @__PURE__ */ jsx69("div", { className: clsx51("mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8 py-6 h-full", contentClassName), children }) })
+          /* @__PURE__ */ jsx69("main", { className: "flex-1 overflow-y-auto w-full custom-scrollbar relative z-0", children: /* @__PURE__ */ jsx69("div", { className: clsx52("mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8 py-6 h-full", contentClassName), children }) })
         ]
       }
     )
@@ -10247,7 +10331,7 @@ function ITLoader({
 }
 
 // src/components/molecules/stepper/stepper.tsx
-import clsx52 from "clsx";
+import clsx53 from "clsx";
 import { useEffect as useEffect18, useRef as useRef23, useState as useState37 } from "react";
 import { FaChevronLeft as FaChevronLeft4, FaChevronRight as FaChevronRight5, FaCheck as FaCheck5 } from "react-icons/fa";
 import { jsx as jsx71, jsxs as jsxs55 } from "react/jsx-runtime";
@@ -10324,7 +10408,7 @@ function ITStepper({
     }
     return /* @__PURE__ */ jsx71(ITText, { as: "span", className: "text-sm font-semibold", children: index + 1 });
   };
-  return /* @__PURE__ */ jsxs55("div", { className: clsx52("w-full max-w-5xl mx-auto px-4", containerClassName), children: [
+  return /* @__PURE__ */ jsxs55("div", { className: clsx53("w-full max-w-5xl mx-auto px-4", containerClassName), children: [
     /* @__PURE__ */ jsxs55("div", { className: "relative mb-8", children: [
       /* @__PURE__ */ jsx71(
         "div",
@@ -10359,7 +10443,7 @@ function ITStepper({
               /* @__PURE__ */ jsx71(
                 "div",
                 {
-                  className: clsx52(
+                  className: clsx53(
                     "flex items-center justify-center w-11 h-11 rounded-full border-2 transition-all duration-300 transform",
                     hasIcon && "p-2",
                     isCompleted && "bg-slate-400 border-slate-400 text-white scale-100 shadow",
@@ -10374,7 +10458,7 @@ function ITStepper({
                 ITText,
                 {
                   as: "span",
-                  className: clsx52(
+                  className: clsx53(
                     "mt-2 text-xs sm:text-sm font-medium transition-colors text-center",
                     isCompleted ? "text-slate-400" : !isActive && "text-secondary-400"
                   ),
@@ -10395,7 +10479,7 @@ function ITStepper({
         tabIndex: -1,
         role: "region",
         "aria-labelledby": `step-${currentStep}`,
-        className: clsx52(
+        className: clsx53(
           stepClassName,
           "bg-white border border-secondary-100 rounded-2xl shadow-lg min-h-[280px] transition-transform duration-400 no-scrollbar p-6",
           scrollableContent && "overflow-y-auto hide-scrollbar"