@axzydev/axzy_ui_system 1.4.1 → 1.4.3

package/dist/index.js

@@ -1809,6 +1809,25 @@ var calendar_default = ITCalendar;
 // src/components/molecules/card/card.tsx
 import clsx8 from "clsx";
 import { useState as useState8 } from "react";
+
+// src/theme/theme-context.ts
+import { createContext, useContext } from "react";
+var ITThemeContext = createContext(void 0);
+var useITTheme = () => {
+  const context = useContext(ITThemeContext);
+  if (!context) {
+    throw new Error("useITTheme must be used within an ITThemeProvider");
+  }
+  return context;
+};
+var useITThemeSafe = () => {
+  return useContext(ITThemeContext);
+};
+var useITFlatAppearance = () => {
+  return useContext(ITThemeContext)?.appearance === "flat";
+};
+
+// src/components/molecules/card/card.tsx
 import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
 function ITCard({
   title,
@@ -1824,16 +1843,20 @@ function ITCard({
   onClick
 }) {
   const [isHovered, setIsHovered] = useState8(false);
+  const flat = useITFlatAppearance();
   const containerStyle = {
     backgroundColor: "var(--it-card-bg, #ffffff)",
-    borderColor: "var(--it-card-border, rgba(15, 23, 42, 0.06))",
+    borderColor: flat ? "var(--it-card-flat-border, var(--color-secondary-200))" : "var(--it-card-border, rgba(15, 23, 42, 0.06))",
     borderWidth: "1px",
-    borderRadius: "var(--it-card-radius, var(--radius-2xl))",
+    borderStyle: "solid",
+    borderRadius: flat ? "var(--it-card-radius, var(--radius-lg))" : "var(--it-card-radius, var(--radius-2xl))",
     // Soft depth: every card floats a little at rest; interactive cards
     // gain visual weight on hover instead of appearing flat until clicked.
-    boxShadow: onClick ? isHovered ? "var(--shadow-lg)" : "var(--shadow-sm)" : "var(--shadow-sm)",
+    // Flat appearance: the hairline border carries the surface, so a card
+    // only gets a shadow as hover feedback when it is clickable.
+    boxShadow: flat ? onClick && isHovered ? "var(--shadow-sm)" : "none" : onClick ? isHovered ? "var(--shadow-lg)" : "var(--shadow-sm)" : "var(--shadow-sm)",
     transition: onClick ? "box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out" : "none",
-    transform: onClick && isHovered ? "translateY(-2px)" : "translateY(0)",
+    transform: onClick && isHovered && !flat ? "translateY(-2px)" : "translateY(0)",
     cursor: onClick ? "pointer" : "default"
   };
   const bodyStyle = {
@@ -1861,7 +1884,7 @@ function ITCard({
             ITText,
             {
               as: "h3",
-              className: clsx8("text-xl font-semibold mb-2", titleClassName),
+              className: clsx8(flat ? "text-base font-semibold mb-3" : "text-xl font-semibold mb-2", titleClassName),
               children: title
             }
           ),
@@ -4940,20 +4963,6 @@ import { FaRegTimesCircle } from "react-icons/fa";
 // src/components/molecules/form-header/form-header.tsx
 import { FaTimes as FaTimes6 } from "react-icons/fa";
 
-// src/theme/theme-context.ts
-import { createContext, useContext } from "react";
-var ITThemeContext = createContext(void 0);
-var useITTheme = () => {
-  const context = useContext(ITThemeContext);
-  if (!context) {
-    throw new Error("useITTheme must be used within an ITThemeProvider");
-  }
-  return context;
-};
-var useITThemeSafe = () => {
-  return useContext(ITThemeContext);
-};
-
 // src/utils/color.utils.ts
 var isLightColor = (hex) => {
   if (!hex || typeof hex !== "string") return false;
@@ -6519,6 +6528,7 @@ function ITPageHeader({
   className
 }) {
   const showTopRow = breadcrumbs?.length || backAction;
+  const flat = useITFlatAppearance();
   return /* @__PURE__ */ jsxs29("div", { className: `${className} space-y-3`, children: [
     showTopRow && /* @__PURE__ */ jsxs29("div", { className: "flex items-center justify-between gap-4", children: [
       /* @__PURE__ */ jsxs29("div", { className: "flex items-center gap-2 min-w-0", children: [
@@ -6537,7 +6547,7 @@ function ITPageHeader({
     ] }),
     /* @__PURE__ */ jsxs29("div", { className: "flex items-start justify-between gap-6", children: [
       /* @__PURE__ */ jsxs29("div", { className: "flex items-start gap-4 min-w-0", children: [
-        icon && /* @__PURE__ */ jsx38(
+        icon && !flat && /* @__PURE__ */ jsx38(
           "div",
           {
             className: "flex items-center justify-center w-12 h-12 rounded-full border border-slate-200 dark:border-slate-700 bg-slate-50/50 dark:bg-slate-800/50 text-slate-600 dark:text-slate-300 flex-shrink-0 transition-all duration-200 hover:border-slate-300 dark:hover:border-slate-500 hover:shadow-sm",
@@ -6550,7 +6560,7 @@ function ITPageHeader({
             ITText,
             {
               as: "h1",
-              className: "text-3xl font-bold text-slate-800 dark:text-white tracking-tight leading-tight",
+              className: flat ? "text-[1.625rem] font-bold text-slate-900 dark:text-white tracking-tight leading-tight" : "text-3xl font-bold text-slate-800 dark:text-white tracking-tight leading-tight",
               children: title
             }
           ),
@@ -6558,7 +6568,7 @@ function ITPageHeader({
             ITText,
             {
               as: "p",
-              className: "text-sm font-light text-slate-500 dark:text-slate-400 mt-1 leading-relaxed",
+              className: flat ? "text-sm font-normal text-slate-500 dark:text-slate-400 mt-0.5 leading-relaxed" : "text-sm font-light text-slate-500 dark:text-slate-400 mt-1 leading-relaxed",
               children: description
             }
           )
@@ -7575,6 +7585,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,8 +7604,11 @@ function ITSidebar({
   onItemClick,
   onSubItemClick,
   subitemConnector = "dot",
-  header
+  header,
+  notification,
+  brand
 }) {
+  const flat = useITFlatAppearance();
   const [expandedItems, setExpandedItems] = useState27(/* @__PURE__ */ new Set());
   const [isHovering, setIsHovering] = useState27(false);
   const sidebarRef = useRef20(null);
@@ -7663,7 +7677,7 @@ function ITSidebar({
     }
   };
   const isSidebarCollapsed = visibleOnMobile ? false : !isHovering && isCollapsed;
-  const sidebarWidth = isSidebarCollapsed ? "w-[88px]" : "w-[280px]";
+  const sidebarWidth = isSidebarCollapsed ? "w-[88px]" : flat ? "w-[248px]" : "w-[280px]";
   const renderSubItem = (subitem) => /* @__PURE__ */ jsx56("li", { className: "relative", children: /* @__PURE__ */ jsxs43(
     "button",
     {
@@ -7738,6 +7752,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",
     {
@@ -7748,20 +7843,39 @@ function ITSidebar({
         ${sidebarWidth}
         ${className}
         ${!visibleOnMobile ? "hidden lg:flex" : "flex"}
-        shadow-[4px_0_32px_rgba(15,23,42,0.04)]
+        ${flat ? "" : "shadow-[4px_0_32px_rgba(15,23,42,0.04)]"}
       `,
       style: {
         zIndex: 50,
         backgroundColor: "var(--it-sidebar-bg, rgba(255, 255, 255, 0.90))",
         borderRight: "1px solid var(--it-sidebar-border, var(--color-secondary-200))",
-        WebkitBackdropFilter: "blur(12px)",
-        backdropFilter: "blur(12px)"
+        ...flat ? {} : { WebkitBackdropFilter: "blur(12px)", backdropFilter: "blur(12px)" }
       },
       children: [
+        brand && (brand.logo || brand.text) && /* @__PURE__ */ jsxs43(
+          "div",
+          {
+            className: `flex items-center flex-shrink-0 h-[64px] ${isSidebarCollapsed ? "justify-center px-2" : "gap-2.5 px-7"}`,
+            children: [
+              brand.logo && /* @__PURE__ */ jsx56("div", { className: "flex-shrink-0 flex items-center", children: brand.logo }),
+              brand.text && !isSidebarCollapsed && /* @__PURE__ */ jsx56(
+                ITText,
+                {
+                  as: "span",
+                  className: "text-[1.05rem] font-bold tracking-tight truncate",
+                  style: { color: "var(--it-sidebar-brand-color, var(--it-sidebar-label-color, var(--color-secondary-900)))" },
+                  children: brand.text
+                }
+              )
+            ]
+          }
+        ),
         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",
@@ -7778,8 +7892,8 @@ function ITSidebar({
                 `,
                 style: {
                   backgroundColor: item.isActive ? "var(--it-sidebar-active-bg, var(--color-secondary-50))" : "transparent",
-                  boxShadow: item.isActive ? "var(--shadow-xs)" : "none",
-                  border: item.isActive ? "1px solid var(--it-sidebar-border, var(--color-secondary-200))" : "1px solid transparent"
+                  boxShadow: item.isActive && !flat ? "var(--shadow-xs)" : "none",
+                  border: item.isActive && !flat ? "1px solid var(--it-sidebar-border, var(--color-secondary-200))" : "1px solid transparent"
                 },
                 onMouseEnter: (e) => {
                   if (!item.isActive) e.currentTarget.style.backgroundColor = "var(--it-sidebar-hover-bg, var(--color-secondary-100))";
@@ -7795,7 +7909,7 @@ function ITSidebar({
                   }
                 },
                 children: [
-                  item.isActive && !isSidebarCollapsed && /* @__PURE__ */ jsx56(
+                  item.isActive && !isSidebarCollapsed && !flat && /* @__PURE__ */ jsx56(
                     "div",
                     {
                       className: "absolute left-0 top-1/4 bottom-1/4 w-[3px] rounded-r-full transition-all",
@@ -7810,8 +7924,8 @@ function ITSidebar({
                         style: {
                           color: item.isActive ? "var(--it-sidebar-active-icon, var(--color-primary-500))" : "var(--it-sidebar-icon-color, #9ca3af)",
                           opacity: item.isActive ? 1 : 0.8,
-                          fontSize: item.isActive ? "1.12rem" : "1.05rem",
-                          filter: item.isActive ? "drop-shadow(0 0 8px rgba(255,255,255,0.2))" : "none"
+                          fontSize: flat ? "1rem" : item.isActive ? "1.12rem" : "1.05rem",
+                          filter: item.isActive && !flat ? "drop-shadow(0 0 8px rgba(255,255,255,0.2))" : "none"
                         },
                         children: item.icon
                       }
@@ -7823,7 +7937,7 @@ function ITSidebar({
                         className: `transition-all duration-300 truncate tracking-wide`,
                         style: {
                           color: item.isActive ? "var(--it-sidebar-active-color, #ffffff)" : "var(--it-sidebar-label-color, var(--color-secondary-300))",
-                          fontSize: "0.8rem",
+                          fontSize: flat ? "0.875rem" : "0.8rem",
                           fontWeight: item.isActive ? "600" : "500"
                         },
                         children: item.label
@@ -7838,19 +7952,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 +8029,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 +8087,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 +8106,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 +8118,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 +8130,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 +8146,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 +8166,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 +8187,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 +8199,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 +8207,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 +8384,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 +8575,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 +8632,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 +8640,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 +8652,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 +8672,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 +8681,7 @@ function ITTable({
                       "th",
                       {
                         scope: "col",
-                        className: clsx43(
+                        className: clsx44(
                           tableHeaderCell(col.className, density),
                           col.align && tableAlignClasses[col.align],
                           isPinned && "sticky",
@@ -8602,7 +8715,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 +8723,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 +8739,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 +8751,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 +8787,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 +8808,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 +8821,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 +8836,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 +8853,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 +8865,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 +8893,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 +8916,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 +8945,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 +8991,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 +9029,7 @@ import {
   useRef as useRef21,
   useState as useState33
 } from "react";
-import clsx49 from "clsx";
+import clsx50 from "clsx";
 import {
   FaBold,
   FaEraser,
@@ -8940,7 +9053,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 +9086,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 +9537,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 +9551,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 +9560,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 +9587,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 +9611,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 +9914,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 +9978,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 +10000,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 +10009,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";
@@ -9911,21 +10024,24 @@ function ITTopBar({
   showMobileMenuButton,
   onToggleMobileMenu,
   navItems,
-  onNavItemClick
+  onNavItemClick,
+  hideBrandOnDesktop = false
 }) {
+  const flat = useITFlatAppearance();
+  const initials = (userMenu?.userName ?? "").trim().split(/\s+/).slice(0, 2).map((word) => word.charAt(0).toUpperCase()).join("");
   const [isUserMenuOpen, setIsUserMenuOpen] = useState35(false);
   const userMenuRef = useRef22(null);
   useClickOutside_default(userMenuRef, () => setIsUserMenuOpen(false));
   return /* @__PURE__ */ jsx68(
     "header",
     {
-      className: "sticky top-0 z-40 backdrop-blur-md transition-all duration-300",
+      className: `sticky top-0 z-40 transition-all duration-300 ${flat ? "" : "backdrop-blur-md"}`,
       style: {
         backgroundColor: "var(--it-topbar-bg, rgba(255, 255, 255, 0.9))",
         borderBottom: "1px solid var(--it-topbar-border, rgba(15, 23, 42, 0.06))",
-        boxShadow: "var(--shadow-xs)"
+        boxShadow: flat ? "none" : "var(--shadow-xs)"
       },
-      children: /* @__PURE__ */ jsxs53("div", { className: "flex items-center justify-between h-[72px] px-6 lg:px-8", children: [
+      children: /* @__PURE__ */ jsxs53("div", { className: `flex items-center justify-between px-6 lg:px-8 ${flat ? "h-[64px]" : "h-[72px]"}`, children: [
         /* @__PURE__ */ jsxs53("div", { className: "flex items-center gap-5", children: [
           showMobileMenuButton && /* @__PURE__ */ jsx68(
             "button",
@@ -9940,7 +10056,7 @@ function ITTopBar({
               children: /* @__PURE__ */ jsx68(FaBars, { className: "w-[1.125rem] h-[1.125rem]" })
             }
           ),
-          /* @__PURE__ */ jsxs53("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ jsxs53("div", { className: `items-center gap-3 ${hideBrandOnDesktop ? "flex lg:hidden" : "flex"}`, children: [
             logo && /* @__PURE__ */ jsx68("div", { className: "flex-shrink-0 drop-shadow-sm", children: logo }),
             logoText && /* @__PURE__ */ jsx68(
               ITText,
@@ -9974,7 +10090,7 @@ function ITTopBar({
             item.id
           )) })
         ] }),
-        centerContent && /* @__PURE__ */ jsx68("div", { className: "hidden lg:flex flex-1 min-w-0 items-center justify-center px-4", children: /* @__PURE__ */ jsx68("div", { className: "w-full max-w-[420px]", children: centerContent }) }),
+        centerContent && /* @__PURE__ */ jsx68("div", { className: `hidden lg:flex flex-1 min-w-0 items-center ${hideBrandOnDesktop ? "justify-start pr-4" : "justify-center px-4"}`, children: /* @__PURE__ */ jsx68("div", { className: "w-full max-w-[420px]", children: centerContent }) }),
         (children || userMenu) && /* @__PURE__ */ jsxs53("div", { className: "flex items-center gap-2", children: [
           children,
           userMenu && /* @__PURE__ */ jsxs53("div", { className: "relative", children: [
@@ -9982,7 +10098,7 @@ function ITTopBar({
               "button",
               {
                 type: "button",
-                className: "flex items-center gap-3 rounded-full pl-2 pr-4 py-1.5 transition-all duration-200 ease-[cubic-bezier(0.2,0,0,1)] border border-transparent hover:border-secondary-200",
+                className: `flex items-center gap-3 rounded-full py-1.5 transition-all duration-200 ease-[cubic-bezier(0.2,0,0,1)] border border-transparent hover:border-secondary-200 ${flat ? "flex-row-reverse pl-4 pr-2" : "pl-2 pr-4"}`,
                 style: {
                   backgroundColor: isUserMenuOpen ? "var(--it-topbar-user-hover, #f1f5f9)" : "transparent"
                 },
@@ -10002,10 +10118,21 @@ function ITTopBar({
                         src: userMenu.userImage,
                         alt: "Current user"
                       }
+                    ) : flat && initials ? /* @__PURE__ */ jsx68(
+                      "div",
+                      {
+                        "aria-hidden": "true",
+                        className: "w-9 h-9 rounded-full flex items-center justify-center text-[0.8rem] font-semibold",
+                        style: {
+                          backgroundColor: "color-mix(in srgb, var(--color-primary, #3b82f6) 14%, transparent)",
+                          color: "var(--color-primary, #2563eb)"
+                        },
+                        children: initials
+                      }
                     ) : /* @__PURE__ */ jsx68("div", { className: "w-9 h-9 rounded-full bg-slate-100 flex items-center justify-center ring-2 ring-white shadow-sm", children: /* @__PURE__ */ jsx68(FaUserCircle2, { className: "w-6 h-6", style: { color: "var(--it-topbar-icon, #94a3b8)" } }) }),
-                    /* @__PURE__ */ jsx68("div", { className: "absolute bottom-0 right-0 w-2.5 h-2.5 bg-green-500 border-2 border-white rounded-full" })
+                    !flat && /* @__PURE__ */ jsx68("div", { className: "absolute bottom-0 right-0 w-2.5 h-2.5 bg-green-500 border-2 border-white rounded-full" })
                   ] }),
-                  /* @__PURE__ */ jsxs53("div", { className: "hidden sm:flex flex-col text-left py-0.5", children: [
+                  /* @__PURE__ */ jsxs53("div", { className: `hidden sm:flex flex-col py-0.5 ${flat ? "text-right" : "text-left"}`, children: [
                     /* @__PURE__ */ jsx68(
                       ITText,
                       {
@@ -10086,75 +10213,102 @@ function ITLayout({
   sidebar,
   children,
   className = "",
-  contentClassName = ""
+  contentClassName = "",
+  sidebarFullHeight = false
 }) {
   const [internalCollapsed, setInternalCollapsed] = useState36(true);
   const [mobileSidebarOpen, setMobileSidebarOpen] = useState36(false);
+  const flat = useITFlatAppearance();
   const isControlled = sidebar.isCollapsed !== void 0;
   const desktopCollapsed = isControlled ? sidebar.isCollapsed : internalCollapsed;
   const handleToggleCollapse = isControlled ? sidebar.onToggleCollapse ?? (() => {
   }) : () => setInternalCollapsed((v) => !v);
   const layoutTokens = theme.layout;
-  return /* @__PURE__ */ jsxs54("div", { className: `flex flex-col h-screen overflow-hidden w-full ${className}`, children: [
-    /* @__PURE__ */ jsx69(
-      ITTopBar,
+  const reservedWidth = desktopCollapsed ? "w-[88px]" : flat ? "w-[248px]" : "w-[280px]";
+  const brand = sidebarFullHeight ? sidebar.brand ?? { logo: topBar.logo, text: topBar.logoText } : sidebar.brand;
+  const topBarNode = /* @__PURE__ */ jsx69(
+    ITTopBar,
+    {
+      ...topBar,
+      hideBrandOnDesktop: sidebarFullHeight || topBar.hideBrandOnDesktop,
+      showMobileMenuButton: true,
+      onToggleMobileMenu: () => setMobileSidebarOpen((v) => !v)
+    }
+  );
+  const desktopSidebar = (
+    // Full-height: the sidebar sits beside the top bar, so it needs to win the
+    // stacking order when the collapsed rail expands over the content on hover.
+    /* @__PURE__ */ jsxs54("div", { className: `hidden lg:block relative h-full ${sidebarFullHeight ? "z-50" : "z-40"}`, children: [
+      /* @__PURE__ */ jsx69("div", { className: `${reservedWidth} h-full flex-shrink-0` }),
+      /* @__PURE__ */ jsx69("div", { className: "absolute top-0 left-0 h-full", children: /* @__PURE__ */ jsx69(
+        ITSidebar,
+        {
+          ...sidebar,
+          brand,
+          isCollapsed: desktopCollapsed,
+          onToggleCollapse: handleToggleCollapse,
+          visibleOnMobile: false,
+          className: `h-full ${flat ? "" : "drop-shadow-2xl"} transition-all duration-400 ease-[cubic-bezier(0.2,0,0,1)] flex-shrink-0`
+        }
+      ) })
+    ] })
+  );
+  const mobileSidebar = mobileSidebarOpen && /* @__PURE__ */ jsx69(
+    "div",
+    {
+      className: "lg:hidden fixed inset-0 z-[40] transition-opacity duration-300 backdrop-blur-sm bg-black/40",
+      onClick: () => setMobileSidebarOpen(false),
+      children: /* @__PURE__ */ jsx69(
+        "div",
+        {
+          className: "h-full w-fit flex transform transition-transform duration-300 ease-[cubic-bezier(0.2,0,0,1)]",
+          onClick: (e) => e.stopPropagation(),
+          children: /* @__PURE__ */ jsx69(
+            ITSidebar,
+            {
+              ...sidebar,
+              brand,
+              isCollapsed: false,
+              visibleOnMobile: true,
+              className: "h-full shadow-2xl relative z-[60]",
+              onToggleCollapse: () => setMobileSidebarOpen(false),
+              onItemClick: () => setMobileSidebarOpen(false),
+              onSubItemClick: () => setMobileSidebarOpen(false)
+            }
+          )
+        }
+      )
+    }
+  );
+  const main = /* @__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 }) });
+  if (sidebarFullHeight) {
+    return /* @__PURE__ */ jsxs54(
+      "div",
       {
-        ...topBar,
-        showMobileMenuButton: true,
-        onToggleMobileMenu: () => setMobileSidebarOpen((v) => !v)
+        className: `flex h-screen overflow-hidden w-full relative ${className}`,
+        style: { backgroundColor: layoutTokens.backgroundColor },
+        children: [
+          desktopSidebar,
+          /* @__PURE__ */ jsxs54("div", { className: "flex flex-col flex-1 min-w-0 overflow-hidden", children: [
+            topBarNode,
+            main
+          ] }),
+          mobileSidebar
+        ]
       }
-    ),
+    );
+  }
+  return /* @__PURE__ */ jsxs54("div", { className: `flex flex-col h-screen overflow-hidden w-full ${className}`, children: [
+    topBarNode,
     /* @__PURE__ */ jsxs54(
       "div",
       {
         className: "flex flex-1 overflow-hidden relative",
         style: { backgroundColor: layoutTokens.backgroundColor },
         children: [
-          /* @__PURE__ */ jsxs54("div", { className: "hidden lg:block relative z-40 h-full", children: [
-            /* @__PURE__ */ jsx69(
-              "div",
-              {
-                className: `${desktopCollapsed ? "w-[88px]" : "w-[280px]"} h-full flex-shrink-0`
-              }
-            ),
-            /* @__PURE__ */ jsx69("div", { className: "absolute top-0 left-0 h-full", children: /* @__PURE__ */ jsx69(
-              ITSidebar,
-              {
-                ...sidebar,
-                isCollapsed: desktopCollapsed,
-                onToggleCollapse: handleToggleCollapse,
-                visibleOnMobile: false,
-                className: "h-full drop-shadow-2xl transition-all duration-400 ease-[cubic-bezier(0.2,0,0,1)] flex-shrink-0"
-              }
-            ) })
-          ] }),
-          mobileSidebarOpen && /* @__PURE__ */ jsx69(
-            "div",
-            {
-              className: "lg:hidden fixed inset-0 z-[40] transition-opacity duration-300 backdrop-blur-sm bg-black/40",
-              onClick: () => setMobileSidebarOpen(false),
-              children: /* @__PURE__ */ jsx69(
-                "div",
-                {
-                  className: "h-full w-fit flex transform transition-transform duration-300 ease-[cubic-bezier(0.2,0,0,1)]",
-                  onClick: (e) => e.stopPropagation(),
-                  children: /* @__PURE__ */ jsx69(
-                    ITSidebar,
-                    {
-                      ...sidebar,
-                      isCollapsed: false,
-                      visibleOnMobile: true,
-                      className: "h-full shadow-2xl relative z-[60]",
-                      onToggleCollapse: () => setMobileSidebarOpen(false),
-                      onItemClick: () => setMobileSidebarOpen(false),
-                      onSubItemClick: () => setMobileSidebarOpen(false)
-                    }
-                  )
-                }
-              )
-            }
-          ),
-          /* @__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 }) })
+          desktopSidebar,
+          mobileSidebar,
+          main
         ]
       }
     )
@@ -10247,7 +10401,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 +10478,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 +10513,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 +10528,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 +10549,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"
@@ -10714,7 +10868,8 @@ function ITThemeProvider({
   showFab = true,
   density = 1,
   radius,
-  shadow
+  shadow,
+  appearance = "soft"
 }) {
   const [palette2, setPaletteState] = useState38(() => {
     const basePalette = {
@@ -10827,6 +10982,11 @@ function ITThemeProvider({
       root.style.fontSize = "";
     };
   }, [density]);
+  useLayoutEffect4(() => {
+    const root = document.documentElement;
+    root.setAttribute("data-it-appearance", appearance);
+    return () => root.removeAttribute("data-it-appearance");
+  }, [appearance]);
   useLayoutEffect4(() => {
     const root = document.documentElement;
     const radiusTokens = ["xs", "sm", "md", "lg", "xl", "2xl", "3xl"];
@@ -12108,7 +12268,8 @@ function ITThemeProvider({
         applyPreset,
         resolvedTheme,
         darkModeMode,
-        setDarkModeMode
+        setDarkModeMode,
+        appearance
       },
       children: [
         children,
@@ -12368,6 +12529,7 @@ export {
   useDebouncedSearch,
   useEditableRow,
   useFloatingPanel,
+  useITFlatAppearance,
   useITTheme,
   useITThemeSafe,
   useTableState