@axzydev/axzy_ui_system 1.4.1 → 1.4.2

package/README.md

@@ -103,8 +103,8 @@ export default function App() {
 ### 1. Clonar e instalar
 
 ```bash
-git clone https://github.com/axzydev/axzy_ui_system.git
-cd axzy_ui_system
+git clone https://github.com/maag070208/AXZY_UI_SYSTEM.git
+cd AXZY_UI_SYSTEM
 pnpm install
 ```
 

package/dist/index.cjs

@@ -7663,6 +7663,7 @@ function ITSegmentedControl({
 
 // src/components/organisms/sidebar/sidebar.tsx
 var import_react35 = require("react");
+var import_clsx40 = __toESM(require("clsx"), 1);
 var import_fa26 = require("react-icons/fa");
 var import_jsx_runtime57 = require("react/jsx-runtime");
 function isSubItemGroup(entry) {
@@ -7681,7 +7682,8 @@ function ITSidebar({
   onItemClick,
   onSubItemClick,
   subitemConnector = "dot",
-  header
+  header,
+  notification
 }) {
   const [expandedItems, setExpandedItems] = (0, import_react35.useState)(/* @__PURE__ */ new Set());
   const [isHovering, setIsHovering] = (0, import_react35.useState)(false);
@@ -7826,6 +7828,87 @@ function ITSidebar({
       /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("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__ */ (0, import_jsx_runtime57.jsx)(
+      ITBadget,
+      {
+        color: "danger",
+        size: "sm",
+        ...badgeRest,
+        className: (0, import_clsx40.default)("shadow-md", badgeClassName),
+        children: String(count)
+      }
+    );
+    if (isSidebarCollapsed) {
+      return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
+        "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__ */ (0, import_jsx_runtime57.jsx)("span", { className: "flex items-center justify-center text-[1.05rem]", children: icon }),
+            /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "absolute top-0.5 right-0.5 pointer-events-none", children: badge })
+          ]
+        }
+      );
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
+      "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__ */ (0, import_jsx_runtime57.jsx)(
+            "span",
+            {
+              className: "flex-shrink-0 flex items-center justify-center text-[1.05rem]",
+              style: { color: "var(--it-sidebar-icon-color, #9ca3af)" },
+              children: icon
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+            ITText,
+            {
+              as: "span",
+              className: "truncate tracking-wide",
+              style: { fontSize: "0.8rem", fontWeight: 500 },
+              children: label
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "ml-auto flex-shrink-0", children: badge })
+        ]
+      }
+    );
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
     "aside",
     {
@@ -7847,9 +7930,11 @@ function ITSidebar({
       },
       children: [
         header && !isSidebarCollapsed && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "px-4 pt-4 pb-1 flex-shrink-0", children: header }),
+        notification && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "px-4 pt-3 flex-shrink-0", children: renderNotification() }),
         /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("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__ */ (0, import_jsx_runtime57.jsx)("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__ */ (0, import_jsx_runtime57.jsxs)("li", { className: "relative group/navitem", children: [
             /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
               "div",
@@ -7926,19 +8011,18 @@ function ITSidebar({
                       children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_fa26.FaChevronDown, { className: "w-3 h-3" })
                     }
                   ),
-                  item.badge && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
-                    "span",
+                  item.badge != null && item.badge !== "" && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+                    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: (0, import_clsx40.default)(
+                        "absolute shadow-md",
+                        isSidebarCollapsed ? "top-0.5 right-0.5" : "right-3 top-1/2 -translate-y-1/2",
+                        badgeClassName
+                      ),
+                      children: String(item.badge)
                     }
                   )
                 ]
@@ -8004,7 +8088,7 @@ function ITSidebar({
 
 // src/components/atoms/slide/slide.tsx
 var import_react36 = require("react");
-var import_clsx40 = __toESM(require("clsx"), 1);
+var import_clsx41 = __toESM(require("clsx"), 1);
 var import_jsx_runtime58 = require("react/jsx-runtime");
 function ITSlideToggle({
   onToggle,
@@ -8062,7 +8146,7 @@ function ITSlideToggle({
     "div",
     {
       onClick: toggleSwitch,
-      className: (0, import_clsx40.default)(
+      className: (0, import_clsx41.default)(
         "flex items-center rounded-full p-1 transition-colors duration-300",
         container,
         disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer",
@@ -8081,7 +8165,7 @@ function ITSlideToggle({
       children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
         "div",
         {
-          className: (0, import_clsx40.default)(
+          className: (0, import_clsx41.default)(
             "bg-white rounded-full shadow-md transform transition-transform duration-300 pointer-events-none",
             knob,
             isOn ? translate : "translate-x-0"
@@ -8093,7 +8177,7 @@ function ITSlideToggle({
 }
 
 // src/components/atoms/slider/slider.tsx
-var import_clsx41 = __toESM(require("clsx"), 1);
+var import_clsx42 = __toESM(require("clsx"), 1);
 var import_jsx_runtime59 = require("react/jsx-runtime");
 function ITSlider({
   value,
@@ -8105,7 +8189,7 @@ function ITSlider({
   disabled = false,
   className
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: (0, import_clsx41.default)("flex flex-col gap-1.5", className), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: (0, import_clsx42.default)("flex flex-col gap-1.5", className), children: [
     label && /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(ITText, { as: "label", className: "text-xs font-semibold text-secondary-600 dark:text-secondary-400", children: [
       label,
       ": ",
@@ -8121,7 +8205,7 @@ function ITSlider({
         value,
         onChange: (e) => onChange(Number(e.target.value)),
         disabled,
-        className: (0, import_clsx41.default)(
+        className: (0, import_clsx42.default)(
           "w-full h-1.5 appearance-none rounded-full outline-none cursor-pointer",
           "bg-secondary-200 dark:bg-secondary-700",
           "accent-primary-500",
@@ -8141,7 +8225,7 @@ function ITSlider({
 }
 
 // src/components/molecules/stat-card/stat-card.tsx
-var import_clsx42 = __toESM(require("clsx"), 1);
+var import_clsx43 = __toESM(require("clsx"), 1);
 var import_jsx_runtime60 = require("react/jsx-runtime");
 var trendColors = {
   up: "text-emerald-600 bg-emerald-50 dark:text-emerald-400 dark:bg-emerald-950/30",
@@ -8162,7 +8246,7 @@ function ITStatCard({
   return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
     "div",
     {
-      className: (0, import_clsx42.default)("rounded-xl p-4 border border-slate-100 dark:border-slate-800", color, className),
+      className: (0, import_clsx43.default)("rounded-xl p-4 border border-slate-100 dark:border-slate-800", color, className),
       style,
       onClick,
       role: onClick ? "button" : void 0,
@@ -8174,7 +8258,7 @@ function ITStatCard({
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "flex items-baseline gap-2", children: [
           /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(ITText, { as: "span", className: "text-2xl font-bold text-slate-800 dark:text-white", children: value }),
-          trend && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(ITText, { as: "span", className: (0, import_clsx42.default)("text-[11px] font-semibold px-1.5 py-0.5 rounded-md", trendColors[trendDirection]), children: trend })
+          trend && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(ITText, { as: "span", className: (0, import_clsx43.default)("text-[11px] font-semibold px-1.5 py-0.5 rounded-md", trendColors[trendDirection]), children: trend })
         ] })
       ]
     }
@@ -8182,7 +8266,7 @@ function ITStatCard({
 }
 
 // src/components/molecules/table/table.tsx
-var import_clsx43 = __toESM(require("clsx"), 1);
+var import_clsx44 = __toESM(require("clsx"), 1);
 var import_react37 = __toESM(require("react"), 1);
 var import_fa27 = require("react-icons/fa");
 var import_md2 = require("react-icons/md");
@@ -8353,7 +8437,7 @@ function ITTable({
           children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "relative w-10 h-5 bg-secondary-300 rounded-full", children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
             "div",
             {
-              className: (0, import_clsx43.default)(
+              className: (0, import_clsx44.default)(
                 "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,
@@ -8544,7 +8628,7 @@ function ITTable({
     event.preventDefault();
     onRowClick(row, event);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { ref: rootRef, className: (0, import_clsx43.default)("space-y-4 w-full", containerClassName), children: /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: tableContainer, style: { backgroundColor: "var(--color-table-rowBg, #ffffff)" }, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { ref: rootRef, className: (0, import_clsx44.default)("space-y-4 w-full", containerClassName), children: /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: tableContainer, style: { backgroundColor: "var(--color-table-rowBg, #ffffff)" }, children: [
     title && /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "px-6 py-5 flex items-center justify-between", style: { backgroundColor: "var(--color-table-rowBg, #ffffff)" }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(ITText, { as: "h2", className: "text-xl font-bold text-secondary-900 leading-tight", children: title }),
       /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "flex items-center bg-slate-100 dark:bg-slate-800/80 rounded-lg p-0.5 border border-slate-200 dark:border-slate-700/50", children: [
@@ -8601,7 +8685,7 @@ function ITTable({
     effectiveView === "cards" ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "p-4 space-y-3 max-h-[400px] overflow-y-auto", children: currentData.length > 0 ? currentData.map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
       "div",
       {
-        className: (0, import_clsx43.default)(tableCardHover, onRowClick && tableCardClickable),
+        className: (0, import_clsx44.default)(tableCardHover, onRowClick && tableCardClickable),
         role: onRowClick ? "button" : void 0,
         tabIndex: onRowClick ? 0 : void 0,
         onClick: onRowClick ? handleRowClick(row) : void 0,
@@ -8609,7 +8693,7 @@ function ITTable({
         children: renderCard ? renderCard(row) : renderDefaultCard(row)
       },
       i
-    )) : /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: (0, import_clsx43.default)(tableEmptyContent, "py-12"), children: [
+    )) : /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: (0, import_clsx44.default)(tableEmptyContent, "py-12"), children: [
       /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(ITText, { as: "span", className: "text-lg", children: "No se encontraron resultados" }),
       /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(ITText, { as: "span", className: "text-sm mt-1", children: "Intenta ajustar los filtros" })
     ] }) }) : /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
@@ -8621,7 +8705,7 @@ function ITTable({
         children: /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
           "table",
           {
-            className: (0, import_clsx43.default)(
+            className: (0, import_clsx44.default)(
               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"),
@@ -8641,7 +8725,7 @@ function ITTable({
               /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
                 "tr",
                 {
-                  className: (0, import_clsx43.default)(tableHeaderRow, "dark:text-slate-200"),
+                  className: (0, import_clsx44.default)(tableHeaderRow, "dark:text-slate-200"),
                   "aria-rowindex": isTableVirtual ? 1 : void 0,
                   children: columns.map((col) => {
                     const pin = pinnedMeta[col.key];
@@ -8650,7 +8734,7 @@ function ITTable({
                       "th",
                       {
                         scope: "col",
-                        className: (0, import_clsx43.default)(
+                        className: (0, import_clsx44.default)(
                           tableHeaderCell(col.className, density),
                           col.align && tableAlignClasses[col.align],
                           isPinned && "sticky",
@@ -8684,7 +8768,7 @@ function ITTable({
                   })
                 }
               ) }),
-              /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("tbody", { className: (0, import_clsx43.default)(tableBody, "dark:divide-slate-700/30"), children: currentData.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(import_jsx_runtime61.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("tbody", { className: (0, import_clsx44.default)(tableBody, "dark:divide-slate-700/30"), children: currentData.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(import_jsx_runtime61.Fragment, { children: [
                 isTableVirtual && topSpacerHeight > 0 && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("tr", { "aria-hidden": "true", style: { height: topSpacerHeight }, children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("td", { colSpan: columnCount, style: { padding: 0, border: 0 } }) }),
                 windowData.map((row, windowIndex) => {
                   const absoluteIndex = isTableVirtual ? startIndex + windowIndex : windowIndex;
@@ -8692,7 +8776,7 @@ function ITTable({
                     "tr",
                     {
                       "aria-rowindex": isTableVirtual ? absoluteIndex + 2 : void 0,
-                      className: (0, import_clsx43.default)(
+                      className: (0, import_clsx44.default)(
                         tableRow,
                         variant === "striped" && absoluteIndex % 2 === 0 && "bg-secondary-50/40 dark:bg-slate-800/20",
                         onRowClick && tableRowClickable
@@ -8708,7 +8792,7 @@ function ITTable({
                         return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
                           "td",
                           {
-                            className: (0, import_clsx43.default)(
+                            className: (0, import_clsx44.default)(
                               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))]",
@@ -8720,7 +8804,7 @@ function ITTable({
                               ...isPinned ? pin.side === "left" ? { left: pin.offset } : { right: pin.offset } : {}
                             } : void 0,
                             title: truncateTitle,
-                            children: col.type === "actions" ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: tableActionsCell, children: renderCellContent(col, row) }) : /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: (0, import_clsx43.default)(tableCellText, col.truncate && "truncate"), children: renderCellContent(col, row) })
+                            children: col.type === "actions" ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: tableActionsCell, children: renderCellContent(col, row) }) : /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: (0, import_clsx44.default)(tableCellText, col.truncate && "truncate"), children: renderCellContent(col, row) })
                           },
                           `${absoluteIndex}-${col.key}`
                         );
@@ -8756,7 +8840,7 @@ function ITTable({
 }
 
 // src/components/atoms/textarea/textarea.tsx
-var import_clsx44 = __toESM(require("clsx"), 1);
+var import_clsx45 = __toESM(require("clsx"), 1);
 var import_jsx_runtime62 = require("react/jsx-runtime");
 var resizeMap = {
   none: "resize-none",
@@ -8777,7 +8861,7 @@ function ITTextarea({
   maxLength,
   resize = "vertical"
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: (0, import_clsx44.default)("flex flex-col gap-1.5", className), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: (0, import_clsx45.default)("flex flex-col gap-1.5", className), children: [
     label && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(ITText, { as: "label", className: inputLabel(!!error), htmlFor: name, children: label }),
     /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
       "textarea",
@@ -8790,7 +8874,7 @@ function ITTextarea({
         rows,
         disabled,
         maxLength,
-        className: (0, import_clsx44.default)(
+        className: (0, import_clsx45.default)(
           "w-full border border-solid transition-all duration-200 rounded-lg px-3 py-2 text-sm outline-none",
           "focus:ring-2",
           resizeMap[resize],
@@ -8805,7 +8889,7 @@ function ITTextarea({
 
 // src/components/molecules/tabs/tabs.tsx
 var import_react38 = require("react");
-var import_clsx45 = require("clsx");
+var import_clsx46 = require("clsx");
 var import_jsx_runtime63 = require("react/jsx-runtime");
 var ITTabs = ({
   items,
@@ -8822,8 +8906,8 @@ var ITTabs = ({
     if (onChange) onChange(id);
   };
   const activeContent = items.find((item) => item.id === activeId)?.content;
-  return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: (0, import_clsx45.clsx)("w-full", containerClassName), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: (0, import_clsx45.clsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: (0, import_clsx46.clsx)("w-full", containerClassName), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: (0, import_clsx46.clsx)(
       "flex border-secondary-200 mb-4",
       variant === "line" ? "border-b" : "gap-2 p-1 bg-secondary-100 rounded-lg w-fit",
       className
@@ -8834,7 +8918,7 @@ var ITTabs = ({
         {
           onClick: () => handleTabClick(item.id, item.disabled),
           disabled: item.disabled,
-          className: (0, import_clsx45.clsx)(
+          className: (0, import_clsx46.clsx)(
             "flex items-center gap-2 px-4 py-2 text-sm font-medium transition-all duration-200 outline-none",
             // LINE VARIANT
             variant === "line" && [
@@ -8862,7 +8946,7 @@ var ITTabs = ({
 var tabs_default = ITTabs;
 
 // src/components/organisms/triple-filter/tripleFilter.tsx
-var import_clsx46 = __toESM(require("clsx"), 1);
+var import_clsx47 = __toESM(require("clsx"), 1);
 var import_jsx_runtime64 = require("react/jsx-runtime");
 var colorMap2 = {
   primary: "text-primary-600",
@@ -8885,14 +8969,14 @@ var ITTripleFilter = ({
   return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
     "div",
     {
-      className: (0, import_clsx46.default)("flex bg-slate-100 p-1 rounded-xl gap-1 w-fit", className),
+      className: (0, import_clsx47.default)("flex bg-slate-100 p-1 rounded-xl gap-1 w-fit", className),
       children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
         "button",
         {
           onClick: () => onChange(option.value),
-          className: (0, import_clsx46.default)(
+          className: (0, import_clsx47.default)(
             "px-4 py-1.5 rounded-lg text-[10px] font-bold uppercase tracking-wider transition-all duration-200 whitespace-nowrap",
-            value === option.value ? (0, import_clsx46.default)("bg-white shadow-sm", colorMap2[color]) : "text-slate-400 hover:text-slate-600"
+            value === option.value ? (0, import_clsx47.default)("bg-white shadow-sm", colorMap2[color]) : "text-slate-400 hover:text-slate-600"
           ),
           children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(ITText, { as: "span", children: option.label })
         },
@@ -8914,7 +8998,7 @@ var positionStyles = {
 };
 
 // src/components/organisms/toast/toast.tsx
-var import_clsx47 = __toESM(require("clsx"), 1);
+var import_clsx48 = __toESM(require("clsx"), 1);
 var import_react39 = require("react");
 var import_fa28 = require("react-icons/fa");
 var import_jsx_runtime65 = require("react/jsx-runtime");
@@ -8960,7 +9044,7 @@ function ITToast({
   return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
     "div",
     {
-      className: (0, import_clsx47.default)(
+      className: (0, import_clsx48.default)(
         "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],
         {
@@ -8993,7 +9077,7 @@ function ITToast({
 
 // src/components/molecules/wysiwyg/wysiwyg.tsx
 var import_react41 = require("react");
-var import_clsx49 = __toESM(require("clsx"), 1);
+var import_clsx50 = __toESM(require("clsx"), 1);
 var import_fa29 = require("react-icons/fa");
 
 // src/components/molecules/wysiwyg/wysiwyg.props.ts
@@ -9009,7 +9093,7 @@ var toolbarActions = [
 
 // src/components/atoms/tooltip/tooltip.tsx
 var import_react40 = require("react");
-var import_clsx48 = __toESM(require("clsx"), 1);
+var import_clsx49 = __toESM(require("clsx"), 1);
 var import_jsx_runtime66 = require("react/jsx-runtime");
 var positionClasses2 = {
   top: "bottom-full left-1/2 -translate-x-1/2 mb-2",
@@ -9042,14 +9126,14 @@ function ITTooltip({
   return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(
     "div",
     {
-      className: (0, import_clsx48.default)("relative inline-flex", className),
+      className: (0, import_clsx49.default)("relative inline-flex", className),
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,
       children: [
         children,
-        visible && /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: (0, import_clsx48.default)("absolute z-[70] pointer-events-none", positionClasses2[position]), children: [
+        visible && /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: (0, import_clsx49.default)("absolute z-[70] pointer-events-none", positionClasses2[position]), children: [
           /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("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__ */ (0, import_jsx_runtime66.jsx)(ITText, { as: "span", children: content }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: (0, import_clsx48.default)("absolute", arrowClasses[position]) })
+          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: (0, import_clsx49.default)("absolute", arrowClasses[position]) })
         ] })
       ]
     }
@@ -9493,7 +9577,7 @@ function ITWysiwyg({
         "aria-pressed": isActive,
         onMouseDown: (e) => e.preventDefault(),
         onClick: () => runAction(action),
-        className: (0, import_clsx49.default)(
+        className: (0, import_clsx50.default)(
           "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"
@@ -9507,7 +9591,7 @@ function ITWysiwyg({
     /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(
       "div",
       {
-        className: (0, import_clsx49.default)(
+        className: (0, import_clsx50.default)(
           "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"
@@ -9516,7 +9600,7 @@ function ITWysiwyg({
           /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
             "div",
             {
-              className: (0, import_clsx49.default)(
+              className: (0, import_clsx50.default)(
                 "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"
               ),
@@ -9543,7 +9627,7 @@ function ITWysiwyg({
                 focusedRef.current = false;
                 emitChange();
               },
-              className: (0, import_clsx49.default)(
+              className: (0, import_clsx50.default)(
                 "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",
@@ -9567,7 +9651,7 @@ function ITWysiwyg({
 // src/components/organisms/dropfile/dropfile.tsx
 var import_react42 = require("react");
 var import_react_dropzone = require("react-dropzone");
-var import_clsx50 = __toESM(require("clsx"), 1);
+var import_clsx51 = __toESM(require("clsx"), 1);
 
 // src/components/organisms/dropfile/dropfile.props.ts
 var FileTypeEnum = /* @__PURE__ */ ((FileTypeEnum2) => {
@@ -9870,7 +9954,7 @@ var ITDropfile = ({
         /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(ITText, { as: "p", className: "text-[10px] text-secondary-500", children: selectedFile ? (selectedFile.size / 1024 / 1024).toFixed(2) + " MB" : "" })
       ] })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: (0, import_clsx50.default)("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__ */ (0, import_jsx_runtime68.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: (0, import_clsx51.default)("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__ */ (0, import_jsx_runtime68.jsx)(
       "img",
       {
         src: imagePreview,
@@ -9934,7 +10018,7 @@ var ITDropfile = ({
   ] }) });
   if (view === "button") {
     const hasFile = Boolean(selectedFile || imagePreview);
-    return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: (0, import_clsx50.default)("inline-block", containerClassName), children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: (0, import_clsx51.default)("inline-block", containerClassName), children: [
       /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
         ITButton,
         {
@@ -9956,7 +10040,7 @@ var ITDropfile = ({
       ] }) })
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: (0, import_clsx50.default)("w-full transition-all duration-300", containerClassName), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: (0, import_clsx51.default)("w-full transition-all duration-300", containerClassName), children: [
     headerRow,
     dropZoneOrPreview
   ] });
@@ -9965,7 +10049,7 @@ var dropfile_default = ITDropfile;
 
 // src/components/templates/layout/layout.tsx
 var import_react44 = require("react");
-var import_clsx51 = __toESM(require("clsx"), 1);
+var import_clsx52 = __toESM(require("clsx"), 1);
 
 // src/components/organisms/topbar/topbar.tsx
 var import_fa30 = require("react-icons/fa");
@@ -10223,7 +10307,7 @@ function ITLayout({
               )
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("main", { className: "flex-1 overflow-y-auto w-full custom-scrollbar relative z-0", children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: (0, import_clsx51.default)("mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8 py-6 h-full", contentClassName), children }) })
+          /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("main", { className: "flex-1 overflow-y-auto w-full custom-scrollbar relative z-0", children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: (0, import_clsx52.default)("mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8 py-6 h-full", contentClassName), children }) })
         ]
       }
     )
@@ -10316,7 +10400,7 @@ function ITLoader({
 }
 
 // src/components/molecules/stepper/stepper.tsx
-var import_clsx52 = __toESM(require("clsx"), 1);
+var import_clsx53 = __toESM(require("clsx"), 1);
 var import_react45 = require("react");
 var import_fa31 = require("react-icons/fa");
 var import_jsx_runtime72 = require("react/jsx-runtime");
@@ -10393,7 +10477,7 @@ function ITStepper({
     }
     return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(ITText, { as: "span", className: "text-sm font-semibold", children: index + 1 });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { className: (0, import_clsx52.default)("w-full max-w-5xl mx-auto px-4", containerClassName), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { className: (0, import_clsx53.default)("w-full max-w-5xl mx-auto px-4", containerClassName), children: [
     /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { className: "relative mb-8", children: [
       /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
         "div",
@@ -10428,7 +10512,7 @@ function ITStepper({
               /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
                 "div",
                 {
-                  className: (0, import_clsx52.default)(
+                  className: (0, import_clsx53.default)(
                     "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",
@@ -10443,7 +10527,7 @@ function ITStepper({
                 ITText,
                 {
                   as: "span",
-                  className: (0, import_clsx52.default)(
+                  className: (0, import_clsx53.default)(
                     "mt-2 text-xs sm:text-sm font-medium transition-colors text-center",
                     isCompleted ? "text-slate-400" : !isActive && "text-secondary-400"
                   ),
@@ -10464,7 +10548,7 @@ function ITStepper({
         tabIndex: -1,
         role: "region",
         "aria-labelledby": `step-${currentStep}`,
-        className: (0, import_clsx52.default)(
+        className: (0, import_clsx53.default)(
           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"