@axzydev/axzy_ui_system 1.4.1 → 1.4.3

package/dist/index.cjs

@@ -98,6 +98,7 @@ __export(index_exports, {
   useDebouncedSearch: () => useDebouncedSearch,
   useEditableRow: () => useEditableRow,
   useFloatingPanel: () => useFloatingPanel,
+  useITFlatAppearance: () => useITFlatAppearance,
   useITTheme: () => useITTheme,
   useITThemeSafe: () => useITThemeSafe,
   useTableState: () => useTableState
@@ -1896,7 +1897,26 @@ var calendar_default = ITCalendar;
 
 // src/components/molecules/card/card.tsx
 var import_clsx8 = __toESM(require("clsx"), 1);
+var import_react10 = require("react");
+
+// src/theme/theme-context.ts
 var import_react9 = require("react");
+var ITThemeContext = (0, import_react9.createContext)(void 0);
+var useITTheme = () => {
+  const context = (0, import_react9.useContext)(ITThemeContext);
+  if (!context) {
+    throw new Error("useITTheme must be used within an ITThemeProvider");
+  }
+  return context;
+};
+var useITThemeSafe = () => {
+  return (0, import_react9.useContext)(ITThemeContext);
+};
+var useITFlatAppearance = () => {
+  return (0, import_react9.useContext)(ITThemeContext)?.appearance === "flat";
+};
+
+// src/components/molecules/card/card.tsx
 var import_jsx_runtime9 = require("react/jsx-runtime");
 function ITCard({
   title,
@@ -1911,17 +1931,21 @@ function ITCard({
   actionClassName,
   onClick
 }) {
-  const [isHovered, setIsHovered] = (0, import_react9.useState)(false);
+  const [isHovered, setIsHovered] = (0, import_react10.useState)(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 = {
@@ -1949,7 +1973,7 @@ function ITCard({
             ITText,
             {
               as: "h3",
-              className: (0, import_clsx8.default)("text-xl font-semibold mb-2", titleClassName),
+              className: (0, import_clsx8.default)(flat ? "text-base font-semibold mb-3" : "text-xl font-semibold mb-2", titleClassName),
               children: title
             }
           ),
@@ -2123,7 +2147,7 @@ function ITChip({
 
 // src/components/molecules/chip-input/chip-input.tsx
 var import_clsx12 = __toESM(require("clsx"), 1);
-var import_react10 = require("react");
+var import_react11 = require("react");
 
 // src/utils/styles.ts
 var import_clsx11 = __toESM(require("clsx"), 1);
@@ -2255,11 +2279,11 @@ function ITChipInput({
   helpText,
   className
 }) {
-  const [inputValue, setInputValue] = (0, import_react10.useState)("");
-  const [localTouched, setLocalTouched] = (0, import_react10.useState)(false);
-  const [localError, setLocalError] = (0, import_react10.useState)(void 0);
-  const [isFocused, setIsFocused] = (0, import_react10.useState)(false);
-  const inputRef = (0, import_react10.useRef)(null);
+  const [inputValue, setInputValue] = (0, import_react11.useState)("");
+  const [localTouched, setLocalTouched] = (0, import_react11.useState)(false);
+  const [localError, setLocalError] = (0, import_react11.useState)(void 0);
+  const [isFocused, setIsFocused] = (0, import_react11.useState)(false);
+  const inputRef = (0, import_react11.useRef)(null);
   const inputTheme = theme.input || {};
   const isTouched = touched !== void 0 ? touched : localTouched;
   const externalError = error !== void 0 && error !== false ? error === true ? "Este campo es requerido" : error : required && value.length === 0 ? "Este campo es requerido" : void 0;
@@ -2400,7 +2424,7 @@ function ITChipInput({
 
 // src/components/molecules/dropdown-menu/dropdown-menu.tsx
 var import_clsx13 = __toESM(require("clsx"), 1);
-var import_react11 = require("react");
+var import_react12 = require("react");
 var import_react_dom = require("react-dom");
 var import_fa6 = require("react-icons/fa");
 var import_jsx_runtime13 = require("react/jsx-runtime");
@@ -2414,20 +2438,20 @@ function ITDropdownMenu({
   className,
   menuClassName
 }) {
-  const [isOpen, setIsOpen] = (0, import_react11.useState)(false);
-  const [activeIndex, setActiveIndex] = (0, import_react11.useState)(-1);
-  const triggerRef = (0, import_react11.useRef)(null);
-  const itemRefs = (0, import_react11.useRef)([]);
+  const [isOpen, setIsOpen] = (0, import_react12.useState)(false);
+  const [activeIndex, setActiveIndex] = (0, import_react12.useState)(-1);
+  const triggerRef = (0, import_react12.useRef)(null);
+  const itemRefs = (0, import_react12.useRef)([]);
   const { panelRef, style: panelStyle } = useFloatingPanel(triggerRef, isOpen, {
     estimatedHeight: Math.max(items.length * 40, 120),
     matchWidth: false,
     align: placement.endsWith("end") ? "end" : "start"
   });
-  const enabledIndexes = (0, import_react11.useMemo)(
+  const enabledIndexes = (0, import_react12.useMemo)(
     () => items.map((item, i) => item.disabled ? -1 : i).filter((i) => i >= 0),
     [items]
   );
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     if (!isOpen) return;
     function handleClickOutside(event) {
       const target = event.target;
@@ -2438,7 +2462,7 @@ function ITDropdownMenu({
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, [isOpen, panelRef]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     if (isOpen) {
       setActiveIndex(enabledIndexes[0] ?? -1);
       requestAnimationFrame(() => {
@@ -2610,12 +2634,12 @@ function ITField({
 }
 
 // src/components/molecules/masked-input/masked-input.tsx
-var import_react13 = require("react");
+var import_react14 = require("react");
 var import_clsx16 = __toESM(require("clsx"), 1);
 
 // src/components/atoms/input/input.tsx
 var import_clsx15 = __toESM(require("clsx"), 1);
-var import_react12 = require("react");
+var import_react13 = require("react");
 var import_jsx_runtime15 = require("react/jsx-runtime");
 function ITInput({
   name,
@@ -2655,12 +2679,12 @@ function ITInput({
   const isNumberType = type === "number";
   const isTextArea = type === "textarea";
   const decimalPlaces = decimals ?? (currencyFormat ? 2 : 0);
-  const [displayValue, setDisplayValue] = (0, import_react12.useState)("");
-  const [isFocused, setIsFocused] = (0, import_react12.useState)(false);
-  const [hasSelectedAll, setHasSelectedAll] = (0, import_react12.useState)(false);
-  const [showPassword, setShowPassword] = (0, import_react12.useState)(false);
-  const [localTouched, setLocalTouched] = (0, import_react12.useState)(false);
-  const inputRef = (0, import_react12.useRef)(null);
+  const [displayValue, setDisplayValue] = (0, import_react13.useState)("");
+  const [isFocused, setIsFocused] = (0, import_react13.useState)(false);
+  const [hasSelectedAll, setHasSelectedAll] = (0, import_react13.useState)(false);
+  const [showPassword, setShowPassword] = (0, import_react13.useState)(false);
+  const [localTouched, setLocalTouched] = (0, import_react13.useState)(false);
+  const inputRef = (0, import_react13.useRef)(null);
   const inputTheme = theme.input || {};
   const getStyle = () => {
     const style = inputFieldStyle(inputTheme, size);
@@ -2699,7 +2723,7 @@ function ITInput({
       setHasSelectedAll(true);
     }
   };
-  const formatValue = (0, import_react12.useCallback)(
+  const formatValue = (0, import_react13.useCallback)(
     (val) => {
       const num = typeof val === "string" ? parseFloat(val.replace(/,/g, "")) : val;
       if (num == null || isNaN(num)) {
@@ -2718,14 +2742,14 @@ function ITInput({
     },
     [currencyFormat, decimalPlaces]
   );
-  const unformatValue = (0, import_react12.useCallback)(
+  const unformatValue = (0, import_react13.useCallback)(
     (val) => {
       if (val == null) return "";
       return String(val).replace(/,/g, "");
     },
     []
   );
-  (0, import_react12.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     if (!isFocused) {
       if (isNumberType) {
         if (formatNumber) {
@@ -3193,15 +3217,15 @@ function ITMaskedInput({
   iconRight,
   autoFocus = false
 }) {
-  const containerRef = (0, import_react13.useRef)(null);
-  const rawRef = (0, import_react13.useRef)(value ?? "");
+  const containerRef = (0, import_react14.useRef)(null);
+  const rawRef = (0, import_react14.useRef)(value ?? "");
   const isControlled = value !== void 0;
-  const [internalRaw, setInternalRaw] = (0, import_react13.useState)(value ?? "");
-  const [invalidPattern, setInvalidPattern] = (0, import_react13.useState)(false);
-  const rules = (0, import_react13.useMemo)(() => parseMask(mask), [mask]);
-  const tokenCount = (0, import_react13.useMemo)(() => rules.filter((r) => r.type === "token").length, [rules]);
+  const [internalRaw, setInternalRaw] = (0, import_react14.useState)(value ?? "");
+  const [invalidPattern, setInvalidPattern] = (0, import_react14.useState)(false);
+  const rules = (0, import_react14.useMemo)(() => parseMask(mask), [mask]);
+  const tokenCount = (0, import_react14.useMemo)(() => rules.filter((r) => r.type === "token").length, [rules]);
   const raw = isControlled ? value ?? "" : internalRaw;
-  const display = (0, import_react13.useMemo)(() => format2(raw, rules, placeholderChar), [raw, rules, placeholderChar]);
+  const display = (0, import_react14.useMemo)(() => format2(raw, rules, placeholderChar), [raw, rules, placeholderChar]);
   const scheduleCaret = (caret) => {
     const inputEl = containerRef.current?.querySelector("input");
     if (!inputEl) return;
@@ -3265,7 +3289,7 @@ function ITMaskedInput({
 
 // src/components/molecules/multi-select/multi-select.tsx
 var import_clsx17 = __toESM(require("clsx"), 1);
-var import_react14 = require("react");
+var import_react15 = require("react");
 var import_react_dom2 = require("react-dom");
 var import_fa7 = require("react-icons/fa");
 var import_jsx_runtime17 = require("react/jsx-runtime");
@@ -3294,32 +3318,32 @@ function ITMultiSelect({
   renderOption,
   className
 }) {
-  const [isOpen, setIsOpen] = (0, import_react14.useState)(false);
-  const [searchTerm, setSearchTerm] = (0, import_react14.useState)("");
-  const [isFocused, setIsFocused] = (0, import_react14.useState)(false);
-  const [localTouched, setLocalTouched] = (0, import_react14.useState)(false);
-  const [activeIndex, setActiveIndex] = (0, import_react14.useState)(-1);
-  const containerRef = (0, import_react14.useRef)(null);
-  const controlRef = (0, import_react14.useRef)(null);
-  const inputRef = (0, import_react14.useRef)(null);
-  const optionRefs = (0, import_react14.useRef)([]);
-  const timeoutRef = (0, import_react14.useRef)(null);
+  const [isOpen, setIsOpen] = (0, import_react15.useState)(false);
+  const [searchTerm, setSearchTerm] = (0, import_react15.useState)("");
+  const [isFocused, setIsFocused] = (0, import_react15.useState)(false);
+  const [localTouched, setLocalTouched] = (0, import_react15.useState)(false);
+  const [activeIndex, setActiveIndex] = (0, import_react15.useState)(-1);
+  const containerRef = (0, import_react15.useRef)(null);
+  const controlRef = (0, import_react15.useRef)(null);
+  const inputRef = (0, import_react15.useRef)(null);
+  const optionRefs = (0, import_react15.useRef)([]);
+  const timeoutRef = (0, import_react15.useRef)(null);
   const { panelRef, style: panelStyle } = useFloatingPanel(controlRef, isOpen, {
     estimatedHeight: 260,
     matchWidth: true
   });
-  const selectedOptions = (0, import_react14.useMemo)(
+  const selectedOptions = (0, import_react15.useMemo)(
     () => options.filter((opt) => value.includes(opt[valueField])),
     [options, value, valueField]
   );
-  const filteredOptions = (0, import_react14.useMemo)(() => {
+  const filteredOptions = (0, import_react15.useMemo)(() => {
     if (onSearch) return options;
     if (!searchTerm) return options;
     return options.filter(
       (opt) => String(opt[labelField]).toLowerCase().includes(searchTerm.toLowerCase())
     );
   }, [options, searchTerm, onSearch, labelField]);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     function handleClickOutside(event) {
       const target = event.target;
       if (!containerRef.current?.contains(target) && !panelRef.current?.contains(target)) {
@@ -3618,11 +3642,11 @@ function ITConfirmDialog({
 }
 
 // src/hooks/useElementSize.ts
-var import_react15 = require("react");
+var import_react16 = require("react");
 function useElementSize() {
-  const ref = (0, import_react15.useRef)(null);
-  const [size, setSize] = (0, import_react15.useState)({ width: 0, height: 0 });
-  (0, import_react15.useLayoutEffect)(() => {
+  const ref = (0, import_react16.useRef)(null);
+  const [size, setSize] = (0, import_react16.useState)({ width: 0, height: 0 });
+  (0, import_react16.useLayoutEffect)(() => {
     const element = ref.current;
     if (!element) return;
     const update = () => {
@@ -3638,7 +3662,7 @@ function useElementSize() {
 }
 
 // src/hooks/useVirtualRows.ts
-var import_react16 = require("react");
+var import_react17 = require("react");
 function useVirtualRows({
   count,
   rowHeight,
@@ -3646,15 +3670,15 @@ function useVirtualRows({
   enabled = true,
   resetKey
 }) {
-  const scrollRef = (0, import_react16.useRef)(null);
-  const [scrollTop, setScrollTop] = (0, import_react16.useState)(0);
-  const [viewportHeight, setViewportHeight] = (0, import_react16.useState)(0);
-  const scrollToTop = (0, import_react16.useCallback)(() => {
+  const scrollRef = (0, import_react17.useRef)(null);
+  const [scrollTop, setScrollTop] = (0, import_react17.useState)(0);
+  const [viewportHeight, setViewportHeight] = (0, import_react17.useState)(0);
+  const scrollToTop = (0, import_react17.useCallback)(() => {
     setScrollTop(0);
     const element = scrollRef.current;
     if (element) element.scrollTop = 0;
   }, []);
-  (0, import_react16.useLayoutEffect)(() => {
+  (0, import_react17.useLayoutEffect)(() => {
     if (!enabled) return;
     const element = scrollRef.current;
     if (!element) return;
@@ -3670,7 +3694,7 @@ function useVirtualRows({
       observer.disconnect();
     };
   }, [enabled]);
-  (0, import_react16.useLayoutEffect)(() => {
+  (0, import_react17.useLayoutEffect)(() => {
     if (!enabled) return;
     const element = scrollRef.current;
     if (element) element.scrollTop = 0;
@@ -3698,18 +3722,18 @@ function useVirtualRows({
 
 // src/components/organisms/data-table/dataTable.tsx
 var import_clsx23 = __toESM(require("clsx"), 1);
-var import_react21 = __toESM(require("react"), 1);
+var import_react22 = __toESM(require("react"), 1);
 var import_fa13 = require("react-icons/fa");
 var import_md = require("react-icons/md");
 
 // src/components/molecules/pagination/pagination.tsx
-var import_react18 = __toESM(require("react"), 1);
+var import_react19 = __toESM(require("react"), 1);
 var import_clsx20 = __toESM(require("clsx"), 1);
 var import_fa10 = require("react-icons/fa");
 
 // src/components/molecules/select/select.tsx
 var import_clsx19 = __toESM(require("clsx"), 1);
-var import_react17 = require("react");
+var import_react18 = require("react");
 var import_fa9 = require("react-icons/fa");
 var import_jsx_runtime19 = require("react/jsx-runtime");
 function ITSelect({
@@ -3730,8 +3754,8 @@ function ITSelect({
   readOnly = false,
   size = "md"
 }) {
-  const [isFocused, setIsFocused] = (0, import_react17.useState)(false);
-  const [localTouched, setLocalTouched] = (0, import_react17.useState)(false);
+  const [isFocused, setIsFocused] = (0, import_react18.useState)(false);
+  const [localTouched, setLocalTouched] = (0, import_react18.useState)(false);
   const inputTheme = theme.input || {};
   const isTouched = touched !== void 0 ? touched : localTouched;
   const isEmpty = value === void 0 || value === null || String(value).trim() === "";
@@ -3825,7 +3849,7 @@ var usePagination = ({
   currentPage,
   siblingCount = 1
 }) => {
-  return import_react18.default.useMemo(() => {
+  return import_react19.default.useMemo(() => {
     const totalPageNumbers = siblingCount + 5;
     if (totalPageNumbers >= totalPages) {
       return Array.from({ length: totalPages }, (_, i) => i + 1);
@@ -3993,7 +4017,7 @@ function ITPagination({
 }
 
 // src/components/molecules/search-select/search-select.tsx
-var import_react19 = require("react");
+var import_react20 = require("react");
 var import_react_dom3 = require("react-dom");
 var import_clsx21 = __toESM(require("clsx"), 1);
 var import_fa11 = require("react-icons/fa");
@@ -4022,26 +4046,26 @@ function ITSearchSelect({
   clearable = true,
   onClear
 }) {
-  const [isOpen, setIsOpen] = (0, import_react19.useState)(false);
-  const [searchTerm, setSearchTerm] = (0, import_react19.useState)("");
-  const [isFocused, setIsFocused] = (0, import_react19.useState)(false);
-  const [localTouched, setLocalTouched] = (0, import_react19.useState)(false);
-  const containerRef = (0, import_react19.useRef)(null);
-  const inputWrapperRef = (0, import_react19.useRef)(null);
-  const timeoutRef = (0, import_react19.useRef)(null);
+  const [isOpen, setIsOpen] = (0, import_react20.useState)(false);
+  const [searchTerm, setSearchTerm] = (0, import_react20.useState)("");
+  const [isFocused, setIsFocused] = (0, import_react20.useState)(false);
+  const [localTouched, setLocalTouched] = (0, import_react20.useState)(false);
+  const containerRef = (0, import_react20.useRef)(null);
+  const inputWrapperRef = (0, import_react20.useRef)(null);
+  const timeoutRef = (0, import_react20.useRef)(null);
   const { panelRef, style: panelStyle } = useFloatingPanel(inputWrapperRef, isOpen, {
     estimatedHeight: 260,
     matchWidth: true
   });
-  const selectedOption = (0, import_react19.useMemo)(() => {
+  const selectedOption = (0, import_react20.useMemo)(() => {
     return options.find((opt) => opt[valueField] === value);
   }, [options, value, valueField]);
-  (0, import_react19.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     if (!isFocused) {
       setSearchTerm(selectedOption ? String(selectedOption[labelField]) : "");
     }
   }, [selectedOption, isFocused, labelField]);
-  (0, import_react19.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     function handleClickOutside(event) {
       const target = event.target;
       const inContainer = containerRef.current?.contains(target);
@@ -4054,7 +4078,7 @@ function ITSearchSelect({
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, []);
   const selectedLabel = selectedOption ? String(selectedOption[labelField]) : "";
-  const filteredOptions = (0, import_react19.useMemo)(() => {
+  const filteredOptions = (0, import_react20.useMemo)(() => {
     if (onSearch) return options;
     if (!searchTerm || !isFocused || searchTerm === selectedLabel) return options;
     return options.filter(
@@ -4225,7 +4249,7 @@ function ITSearchSelect({
 
 // src/components/molecules/date-picker/datePicker.tsx
 var import_clsx22 = __toESM(require("clsx"), 1);
-var import_react20 = __toESM(require("react"), 1);
+var import_react21 = __toESM(require("react"), 1);
 var import_react_dom4 = require("react-dom");
 var import_fa12 = require("react-icons/fa");
 var import_date_fns2 = require("date-fns");
@@ -4249,16 +4273,16 @@ function ITDatePicker({
   maxDate,
   range = false
 }) {
-  const [isOpen, setIsOpen] = (0, import_react20.useState)(false);
-  const [inputValue, setInputValue] = (0, import_react20.useState)("");
-  const [isValidDate, setIsValidDate] = (0, import_react20.useState)(true);
-  const [internalRange, setInternalRange] = (0, import_react20.useState)([null, null]);
-  const wrapperRef = (0, import_react20.useRef)(null);
+  const [isOpen, setIsOpen] = (0, import_react21.useState)(false);
+  const [inputValue, setInputValue] = (0, import_react21.useState)("");
+  const [isValidDate, setIsValidDate] = (0, import_react21.useState)(true);
+  const [internalRange, setInternalRange] = (0, import_react21.useState)([null, null]);
+  const wrapperRef = (0, import_react21.useRef)(null);
   const { panelRef, style: panelStyle } = useFloatingPanel(wrapperRef, isOpen, {
     estimatedHeight: 360,
     matchWidth: false
   });
-  const dateRange = import_react20.default.useMemo(() => {
+  const dateRange = import_react21.default.useMemo(() => {
     if (range) {
       if (Array.isArray(value)) return value;
       return internalRange;
@@ -4266,7 +4290,7 @@ function ITDatePicker({
     return [value instanceof Date ? value : null, null];
   }, [value, range, internalRange]);
   const [startDate, endDate] = dateRange;
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     if (range) {
       if (startDate && endDate) {
         setInputValue(`${formatDate(startDate)} - ${formatDate(endDate)}`);
@@ -4283,7 +4307,7 @@ function ITDatePicker({
       }
     }
   }, [startDate, endDate, range]);
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     const handleClickOutside = (event) => {
       const target = event.target;
       const inWrapper = wrapperRef.current?.contains(target);
@@ -4557,11 +4581,11 @@ function ITDataTable({
   overscan = 5,
   stickyHeader = false
 }) {
-  const [viewMode, setViewMode] = (0, import_react21.useState)(defaultView || "table");
+  const [viewMode, setViewMode] = (0, import_react22.useState)(defaultView || "table");
   const { ref: rootRef, width: containerWidth } = useElementSize();
-  const [data, setData] = (0, import_react21.useState)([]);
-  const [totalItems, setTotalItems] = (0, import_react21.useState)(0);
-  const [isLoading, setIsLoading] = (0, import_react21.useState)(fetchOnMount);
+  const [data, setData] = (0, import_react22.useState)([]);
+  const [totalItems, setTotalItems] = (0, import_react22.useState)(0);
+  const [isLoading, setIsLoading] = (0, import_react22.useState)(fetchOnMount);
   const isFixed = layout === "fixed";
   const forcedCards = autoCardBreakpoint > 0 && containerWidth > 0 && containerWidth < autoCardBreakpoint;
   const effectiveView = forcedCards ? "cards" : viewMode;
@@ -4571,7 +4595,7 @@ function ITDataTable({
   const isStickyHeader = stickyHeader && isTableVirtual;
   const resolvedRowHeight = rowHeight ?? getRowHeight(size, density);
   const columnCount = columns.length;
-  const pinnedMeta = import_react21.default.useMemo(() => getPinnedColumnMeta(columns), [columns]);
+  const pinnedMeta = import_react22.default.useMemo(() => getPinnedColumnMeta(columns), [columns]);
   const scrollOuterClass = isTableVirtual ? "relative min-h-[200px]" : "overflow-x-auto relative min-h-[200px]";
   const {
     currentPage,
@@ -4597,15 +4621,15 @@ function ITDataTable({
     resetKey: `${currentPage}-${itemsPerPage}`
   });
   const windowData = isTableVirtual ? data.slice(startIndex, endIndex + 1) : data;
-  const debounceTimerRef = (0, import_react21.useRef)(null);
-  const hasFetchedRef = (0, import_react21.useRef)(false);
-  const fetchDataRef = (0, import_react21.useRef)(fetchData);
+  const debounceTimerRef = (0, import_react22.useRef)(null);
+  const hasFetchedRef = (0, import_react22.useRef)(false);
+  const fetchDataRef = (0, import_react22.useRef)(fetchData);
   fetchDataRef.current = fetchData;
-  const externalFiltersRef = (0, import_react21.useRef)(externalFilters);
+  const externalFiltersRef = (0, import_react22.useRef)(externalFilters);
   externalFiltersRef.current = externalFilters;
   const externalKey = JSON.stringify(externalFilters);
   const computedTotalPages = Math.ceil(totalItems / itemsPerPage) || 1;
-  const performFetch = (0, import_react21.useCallback)(async () => {
+  const performFetch = (0, import_react22.useCallback)(async () => {
     setIsLoading(true);
     try {
       const response = await fetchDataRef.current({
@@ -4626,9 +4650,9 @@ function ITDataTable({
       setIsLoading(false);
     }
   }, [currentPage, itemsPerPage, filters, sortConfig]);
-  const performFetchRef = (0, import_react21.useRef)(performFetch);
+  const performFetchRef = (0, import_react22.useRef)(performFetch);
   performFetchRef.current = performFetch;
-  (0, import_react21.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     if (!fetchOnMount && !hasFetchedRef.current) return;
     if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current);
     debounceTimerRef.current = setTimeout(() => {
@@ -5028,20 +5052,6 @@ var import_fa15 = require("react-icons/fa");
 // src/components/molecules/form-header/form-header.tsx
 var import_fa14 = require("react-icons/fa");
 
-// src/theme/theme-context.ts
-var import_react22 = require("react");
-var ITThemeContext = (0, import_react22.createContext)(void 0);
-var useITTheme = () => {
-  const context = (0, import_react22.useContext)(ITThemeContext);
-  if (!context) {
-    throw new Error("useITTheme must be used within an ITThemeProvider");
-  }
-  return context;
-};
-var useITThemeSafe = () => {
-  return (0, import_react22.useContext)(ITThemeContext);
-};
-
 // src/utils/color.utils.ts
 var isLightColor = (hex) => {
   if (!hex || typeof hex !== "string") return false;
@@ -6607,6 +6617,7 @@ function ITPageHeader({
   className
 }) {
   const showTopRow = breadcrumbs?.length || backAction;
+  const flat = useITFlatAppearance();
   return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: `${className} space-y-3`, children: [
     showTopRow && /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex items-center justify-between gap-4", children: [
       /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex items-center gap-2 min-w-0", children: [
@@ -6625,7 +6636,7 @@ function ITPageHeader({
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex items-start justify-between gap-6", children: [
       /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex items-start gap-4 min-w-0", children: [
-        icon && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+        icon && !flat && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
           "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",
@@ -6638,7 +6649,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
             }
           ),
@@ -6646,7 +6657,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
             }
           )
@@ -7663,6 +7674,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,8 +7693,11 @@ function ITSidebar({
   onItemClick,
   onSubItemClick,
   subitemConnector = "dot",
-  header
+  header,
+  notification,
+  brand
 }) {
+  const flat = useITFlatAppearance();
   const [expandedItems, setExpandedItems] = (0, import_react35.useState)(/* @__PURE__ */ new Set());
   const [isHovering, setIsHovering] = (0, import_react35.useState)(false);
   const sidebarRef = (0, import_react35.useRef)(null);
@@ -7751,7 +7766,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__ */ (0, import_jsx_runtime57.jsx)("li", { className: "relative", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
     "button",
     {
@@ -7826,6 +7841,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",
     {
@@ -7836,20 +7932,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__ */ (0, import_jsx_runtime57.jsxs)(
+          "div",
+          {
+            className: `flex items-center flex-shrink-0 h-[64px] ${isSidebarCollapsed ? "justify-center px-2" : "gap-2.5 px-7"}`,
+            children: [
+              brand.logo && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "flex-shrink-0 flex items-center", children: brand.logo }),
+              brand.text && !isSidebarCollapsed && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+                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__ */ (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",
@@ -7866,8 +7981,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))";
@@ -7883,7 +7998,7 @@ function ITSidebar({
                   }
                 },
                 children: [
-                  item.isActive && !isSidebarCollapsed && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+                  item.isActive && !isSidebarCollapsed && !flat && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
                     "div",
                     {
                       className: "absolute left-0 top-1/4 bottom-1/4 w-[3px] rounded-r-full transition-all",
@@ -7898,8 +8013,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
                       }
@@ -7911,7 +8026,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
@@ -7926,19 +8041,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 +8118,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 +8176,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 +8195,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 +8207,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 +8219,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 +8235,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 +8255,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 +8276,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 +8288,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 +8296,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 +8467,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 +8658,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 +8715,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 +8723,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 +8735,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 +8755,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 +8764,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 +8798,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 +8806,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 +8822,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 +8834,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 +8870,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 +8891,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 +8904,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 +8919,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 +8936,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 +8948,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 +8976,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 +8999,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 +9028,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 +9074,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 +9107,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 +9123,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 +9156,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 +9607,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 +9621,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 +9630,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 +9657,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 +9681,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 +9984,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 +10048,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 +10070,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 +10079,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");
@@ -9980,21 +10094,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] = (0, import_react43.useState)(false);
   const userMenuRef = (0, import_react43.useRef)(null);
   useClickOutside_default(userMenuRef, () => setIsUserMenuOpen(false));
   return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
     "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__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "flex items-center justify-between h-[72px] px-6 lg:px-8", children: [
+      children: /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: `flex items-center justify-between px-6 lg:px-8 ${flat ? "h-[64px]" : "h-[72px]"}`, children: [
         /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "flex items-center gap-5", children: [
           showMobileMenuButton && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
             "button",
@@ -10009,7 +10126,7 @@ function ITTopBar({
               children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(import_fa30.FaBars, { className: "w-[1.125rem] h-[1.125rem]" })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: `items-center gap-3 ${hideBrandOnDesktop ? "flex lg:hidden" : "flex"}`, children: [
             logo && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "flex-shrink-0 drop-shadow-sm", children: logo }),
             logoText && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
               ITText,
@@ -10043,7 +10160,7 @@ function ITTopBar({
             item.id
           )) })
         ] }),
-        centerContent && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "hidden lg:flex flex-1 min-w-0 items-center justify-center px-4", children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "w-full max-w-[420px]", children: centerContent }) }),
+        centerContent && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: `hidden lg:flex flex-1 min-w-0 items-center ${hideBrandOnDesktop ? "justify-start pr-4" : "justify-center px-4"}`, children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "w-full max-w-[420px]", children: centerContent }) }),
         (children || userMenu) && /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "flex items-center gap-2", children: [
           children,
           userMenu && /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "relative", children: [
@@ -10051,7 +10168,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"
                 },
@@ -10071,10 +10188,21 @@ function ITTopBar({
                         src: userMenu.userImage,
                         alt: "Current user"
                       }
+                    ) : flat && initials ? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+                      "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__ */ (0, import_jsx_runtime69.jsx)("div", { className: "w-9 h-9 rounded-full bg-slate-100 flex items-center justify-center ring-2 ring-white shadow-sm", children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(import_fa30.FaUserCircle, { className: "w-6 h-6", style: { color: "var(--it-topbar-icon, #94a3b8)" } }) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "absolute bottom-0 right-0 w-2.5 h-2.5 bg-green-500 border-2 border-white rounded-full" })
+                    !flat && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "absolute bottom-0 right-0 w-2.5 h-2.5 bg-green-500 border-2 border-white rounded-full" })
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "hidden sm:flex flex-col text-left py-0.5", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: `hidden sm:flex flex-col py-0.5 ${flat ? "text-right" : "text-left"}`, children: [
                     /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
                       ITText,
                       {
@@ -10155,75 +10283,102 @@ function ITLayout({
   sidebar,
   children,
   className = "",
-  contentClassName = ""
+  contentClassName = "",
+  sidebarFullHeight = false
 }) {
   const [internalCollapsed, setInternalCollapsed] = (0, import_react44.useState)(true);
   const [mobileSidebarOpen, setMobileSidebarOpen] = (0, import_react44.useState)(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__ */ (0, import_jsx_runtime70.jsxs)("div", { className: `flex flex-col h-screen overflow-hidden w-full ${className}`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
-      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__ */ (0, import_jsx_runtime70.jsx)(
+    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__ */ (0, import_jsx_runtime70.jsxs)("div", { className: `hidden lg:block relative h-full ${sidebarFullHeight ? "z-50" : "z-40"}`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: `${reservedWidth} h-full flex-shrink-0` }),
+      /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: "absolute top-0 left-0 h-full", children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+        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__ */ (0, import_jsx_runtime70.jsx)(
+    "div",
+    {
+      className: "lg:hidden fixed inset-0 z-[40] transition-opacity duration-300 backdrop-blur-sm bg-black/40",
+      onClick: () => setMobileSidebarOpen(false),
+      children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+        "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__ */ (0, import_jsx_runtime70.jsx)(
+            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__ */ (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 }) });
+  if (sidebarFullHeight) {
+    return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(
+      "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__ */ (0, import_jsx_runtime70.jsxs)("div", { className: "flex flex-col flex-1 min-w-0 overflow-hidden", children: [
+            topBarNode,
+            main
+          ] }),
+          mobileSidebar
+        ]
       }
-    ),
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: `flex flex-col h-screen overflow-hidden w-full ${className}`, children: [
+    topBarNode,
     /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(
       "div",
       {
         className: "flex flex-1 overflow-hidden relative",
         style: { backgroundColor: layoutTokens.backgroundColor },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: "hidden lg:block relative z-40 h-full", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
-              "div",
-              {
-                className: `${desktopCollapsed ? "w-[88px]" : "w-[280px]"} h-full flex-shrink-0`
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: "absolute top-0 left-0 h-full", children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
-              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__ */ (0, import_jsx_runtime70.jsx)(
-            "div",
-            {
-              className: "lg:hidden fixed inset-0 z-[40] transition-opacity duration-300 backdrop-blur-sm bg-black/40",
-              onClick: () => setMobileSidebarOpen(false),
-              children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
-                "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__ */ (0, import_jsx_runtime70.jsx)(
-                    ITSidebar,
-                    {
-                      ...sidebar,
-                      isCollapsed: false,
-                      visibleOnMobile: true,
-                      className: "h-full shadow-2xl relative z-[60]",
-                      onToggleCollapse: () => setMobileSidebarOpen(false),
-                      onItemClick: () => setMobileSidebarOpen(false),
-                      onSubItemClick: () => setMobileSidebarOpen(false)
-                    }
-                  )
-                }
-              )
-            }
-          ),
-          /* @__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 }) })
+          desktopSidebar,
+          mobileSidebar,
+          main
         ]
       }
     )
@@ -10316,7 +10471,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 +10548,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 +10583,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 +10598,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 +10619,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"
@@ -10783,7 +10938,8 @@ function ITThemeProvider({
   showFab = true,
   density = 1,
   radius,
-  shadow
+  shadow,
+  appearance = "soft"
 }) {
   const [palette2, setPaletteState] = (0, import_react46.useState)(() => {
     const basePalette = {
@@ -10896,6 +11052,11 @@ function ITThemeProvider({
       root.style.fontSize = "";
     };
   }, [density]);
+  (0, import_react46.useLayoutEffect)(() => {
+    const root = document.documentElement;
+    root.setAttribute("data-it-appearance", appearance);
+    return () => root.removeAttribute("data-it-appearance");
+  }, [appearance]);
   (0, import_react46.useLayoutEffect)(() => {
     const root = document.documentElement;
     const radiusTokens = ["xs", "sm", "md", "lg", "xl", "2xl", "3xl"];
@@ -12177,7 +12338,8 @@ function ITThemeProvider({
         applyPreset,
         resolvedTheme,
         darkModeMode,
-        setDarkModeMode
+        setDarkModeMode,
+        appearance
       },
       children: [
         children,
@@ -12438,6 +12600,7 @@ var createValidationSchema = (fields) => Yup.object().shape(
   useDebouncedSearch,
   useEditableRow,
   useFloatingPanel,
+  useITFlatAppearance,
   useITTheme,
   useITThemeSafe,
   useTableState