@axzydev/axzy_ui_system 1.4.2 → 1.4.4

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
             }
           )
@@ -7683,8 +7694,12 @@ function ITSidebar({
   onSubItemClick,
   subitemConnector = "dot",
   header,
-  notification
+  notification,
+  brand,
+  onToggleCollapse,
+  expandOnHover = true
 }) {
+  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);
@@ -7738,6 +7753,9 @@ function ITSidebar({
       });
     }
   }, [navigationItems]);
+  const isSidebarCollapsed = visibleOnMobile ? false : isCollapsed && !(expandOnHover && isHovering);
+  const sidebarWidth = isSidebarCollapsed ? flat ? "w-[72px]" : "w-[88px]" : flat ? "w-[248px]" : "w-[280px]";
+  const fixedRail = isSidebarCollapsed && !expandOnHover;
   const toggleExpanded = (itemId) => {
     const newExpanded = new Set(expandedItems);
     if (newExpanded.has(itemId)) newExpanded.delete(itemId);
@@ -7746,14 +7764,17 @@ function ITSidebar({
   };
   const handleItemClick = (item) => {
     if (item.subitems && item.subitems.length > 0) {
-      toggleExpanded(item.id);
+      if (isSidebarCollapsed && !expandOnHover) {
+        setExpandedItems((prev) => new Set(prev).add(item.id));
+        onToggleCollapse?.();
+      } else {
+        toggleExpanded(item.id);
+      }
     } else {
       if (item.action) item.action();
       if (onItemClick) onItemClick(item);
     }
   };
-  const isSidebarCollapsed = visibleOnMobile ? false : !isHovering && isCollapsed;
-  const sidebarWidth = isSidebarCollapsed ? "w-[88px]" : "w-[280px]";
   const renderSubItem = (subitem) => /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("li", { className: "relative", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
     "button",
     {
@@ -7766,7 +7787,7 @@ function ITSidebar({
       style: {
         color: subitem.isActive ? "var(--it-sidebar-active-color, var(--color-secondary-900))" : "var(--it-sidebar-label-color, var(--color-secondary-600))",
         backgroundColor: subitem.isActive ? "var(--it-sidebar-active-bg, var(--color-secondary-50))" : "transparent",
-        fontSize: "0.78rem",
+        fontSize: flat ? "0.84rem" : "0.78rem",
         fontWeight: subitem.isActive ? 600 : 500,
         letterSpacing: "0.01em",
         marginLeft: subitemConnector === "|" ? "-1px" : "0"
@@ -7784,7 +7805,7 @@ function ITSidebar({
         }
       },
       children: [
-        subitem.isActive && subitemConnector === "|" && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+        subitem.isActive && subitemConnector === "|" && !flat && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
           "div",
           {
             className: "absolute left-0 top-1/3 bottom-1/3 w-[2.5px] rounded-r-full transition-all",
@@ -7919,22 +7940,40 @@ 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) => {
+        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("nav", { "aria-label": "Componentes de la librer\xEDa", className: `flex-1 py-4 custom-scrollbar ${fixedRail ? "overflow-visible" : "overflow-y-auto overflow-x-hidden"} ${flat && isSidebarCollapsed ? "px-3" : "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 ?? {};
+          const active = !!item.isActive && !(flat && hasSubmenu && !isSidebarCollapsed);
           return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("li", { className: "relative group/navitem", children: [
             /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
               "div",
@@ -7947,18 +7986,18 @@ function ITSidebar({
                 className: `flex items-center cursor-pointer 
                   transition-all duration-300 ease-[cubic-bezier(0.2,0,0,1)]
                   rounded-xl relative overflow-visible
-                  ${isSidebarCollapsed ? "justify-center p-2 mb-1" : "justify-between px-3 py-2 mb-0.5"}
+                  ${isSidebarCollapsed ? flat ? "justify-center h-10 mb-1" : "justify-center p-2 mb-1" : "justify-between px-3 py-2 mb-0.5"}
                 `,
                 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"
+                  backgroundColor: active ? "var(--it-sidebar-active-bg, var(--color-secondary-50))" : "transparent",
+                  boxShadow: active && !flat ? "var(--shadow-xs)" : "none",
+                  border: active && !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))";
+                  if (!active) e.currentTarget.style.backgroundColor = "var(--it-sidebar-hover-bg, var(--color-secondary-100))";
                 },
                 onMouseLeave: (e) => {
-                  if (!item.isActive) e.currentTarget.style.backgroundColor = "transparent";
+                  if (!active) e.currentTarget.style.backgroundColor = "transparent";
                 },
                 onClick: () => handleItemClick(item),
                 onKeyDown: (e) => {
@@ -7968,7 +8007,7 @@ function ITSidebar({
                   }
                 },
                 children: [
-                  item.isActive && !isSidebarCollapsed && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+                  active && !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",
@@ -7981,10 +8020,10 @@ function ITSidebar({
                       {
                         className: `transition-all duration-300 flex-shrink-0 flex items-center justify-center`,
                         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"
+                          color: active ? "var(--it-sidebar-active-icon, var(--color-primary-500))" : "var(--it-sidebar-icon-color, #9ca3af)",
+                          opacity: active ? 1 : 0.8,
+                          fontSize: flat ? "1rem" : active ? "1.12rem" : "1.05rem",
+                          filter: active && !flat ? "drop-shadow(0 0 8px rgba(255,255,255,0.2))" : "none"
                         },
                         children: item.icon
                       }
@@ -7995,9 +8034,9 @@ function ITSidebar({
                         as: "span",
                         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",
-                          fontWeight: item.isActive ? "600" : "500"
+                          color: active ? "var(--it-sidebar-active-color, #ffffff)" : "var(--it-sidebar-label-color, var(--color-secondary-300))",
+                          fontSize: flat ? "0.875rem" : "0.8rem",
+                          fontWeight: active ? "600" : "500"
                         },
                         children: item.label
                       }
@@ -8007,7 +8046,7 @@ function ITSidebar({
                     "div",
                     {
                       className: `flex-shrink-0 transition-transform duration-300 ease-[cubic-bezier(0.2,0,0,1)] ${expandedItems.has(item.id) ? "rotate-180" : ""}`,
-                      style: { color: item.isActive ? "var(--it-sidebar-active-color, var(--color-secondary-900))" : "var(--it-sidebar-icon-color, var(--color-secondary-500))", opacity: 0.7 },
+                      style: { color: active ? "var(--it-sidebar-active-color, var(--color-secondary-900))" : "var(--it-sidebar-icon-color, var(--color-secondary-500))", opacity: 0.7 },
                       children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_fa26.FaChevronDown, { className: "w-3 h-3" })
                     }
                   ),
@@ -8028,7 +8067,21 @@ function ITSidebar({
                 ]
               }
             ),
-            isSidebarCollapsed && /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
+            isSidebarCollapsed && flat && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+              "div",
+              {
+                role: "tooltip",
+                className: "absolute left-full top-1/2 -translate-y-1/2 ml-3 px-2.5 py-1.5 rounded-lg whitespace-nowrap opacity-0 invisible group-hover/navitem:opacity-100 group-hover/navitem:visible transition-opacity duration-150 pointer-events-none z-[70]",
+                style: {
+                  backgroundColor: "var(--it-sidebar-tooltip-bg, var(--color-secondary-900))",
+                  color: "var(--it-sidebar-tooltip-color, #ffffff)",
+                  fontSize: "0.78rem",
+                  fontWeight: 500
+                },
+                children: item.label
+              }
+            ),
+            isSidebarCollapsed && !flat && /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
               "div",
               {
                 className: "absolute left-full top-0 ml-4 rounded-2xl opacity-0 invisible group-hover/navitem:opacity-100 group-hover/navitem:visible transition-all duration-300 pointer-events-none z-[70] min-w-[220px] overflow-hidden -translate-x-2 group-hover/navitem:translate-x-0 shadow-[0_10px_40px_-10px_rgba(0,0,0,0.15)]",
@@ -8070,7 +8123,7 @@ function ITSidebar({
             !isSidebarCollapsed && item.subitems && item.subitems.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { id: submenuId, role: "group", "aria-label": item.label, className: `overflow-hidden transition-all duration-400 ease-[cubic-bezier(0.2,0,0,1)] ${expandedItems.has(item.id) ? "max-h-[1000px] opacity-100 mt-1" : "max-h-0 opacity-0"}`, children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
               "ul",
               {
-                className: "ml-4 flex flex-col gap-0 py-0.5",
+                className: `${flat && subitemConnector === "|" ? "ml-[21px] pl-2" : "ml-4"} flex flex-col gap-0 py-0.5`,
                 style: {
                   borderLeft: subitemConnector === "|" ? "1px solid var(--it-sidebar-border, var(--color-secondary-200))" : "none"
                 },
@@ -10064,26 +10117,32 @@ function ITTopBar({
   showMobileMenuButton,
   onToggleMobileMenu,
   navItems,
-  onNavItemClick
+  onNavItemClick,
+  hideBrandOnDesktop = false,
+  showDesktopMenuButton = 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",
             {
-              className: "lg:hidden p-2.5 rounded-xl transition-colors duration-200",
+              type: "button",
+              "aria-label": "Men\xFA",
+              className: `${showDesktopMenuButton ? "" : "lg:hidden"} p-2.5 -ml-2.5 rounded-xl transition-colors duration-200`,
               style: {
                 color: "var(--it-topbar-icon, #64748b)"
               },
@@ -10093,7 +10152,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,
@@ -10127,7 +10186,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: [
@@ -10135,7 +10194,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"
                 },
@@ -10155,10 +10214,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,
                       {
@@ -10239,75 +10309,108 @@ 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 ? flat ? "w-[72px]" : "w-[88px]" : flat ? "w-[248px]" : "w-[280px]";
+  const toggleByButton = sidebar.expandOnHover === false;
+  const handleMenuButton = () => {
+    if (toggleByButton && window.matchMedia("(min-width: 1024px)").matches) handleToggleCollapse();
+    else setMobileSidebarOpen((v) => !v);
+  };
+  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,
+      showDesktopMenuButton: toggleByButton || topBar.showDesktopMenuButton,
+      onToggleMobileMenu: handleMenuButton
+    }
+  );
+  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_clsx52.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
         ]
       }
     )
@@ -10867,7 +10970,8 @@ function ITThemeProvider({
   showFab = true,
   density = 1,
   radius,
-  shadow
+  shadow,
+  appearance = "soft"
 }) {
   const [palette2, setPaletteState] = (0, import_react46.useState)(() => {
     const basePalette = {
@@ -10980,6 +11084,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"];
@@ -12261,7 +12370,8 @@ function ITThemeProvider({
         applyPreset,
         resolvedTheme,
         darkModeMode,
-        setDarkModeMode
+        setDarkModeMode,
+        appearance
       },
       children: [
         children,
@@ -12522,6 +12632,7 @@ var createValidationSchema = (fields) => Yup.object().shape(
   useDebouncedSearch,
   useEditableRow,
   useFloatingPanel,
+  useITFlatAppearance,
   useITTheme,
   useITThemeSafe,
   useTableState