@metropolle/design-system 1.0.0-beta.20250821022912.15e7eda → 1.0.0-beta.2026.1.1.1723.0f6bc6d

package/dist/react/index.esm.js

@@ -1,4 +1,5 @@
-import require$$0, { forwardRef } from 'react';
+import require$$0, { forwardRef, useState, useRef, useEffect, useMemo, useCallback } from 'react';
+import { createPortal } from 'react-dom';
 
 var jsxRuntime = {exports: {}};
 
@@ -1369,12 +1370,35 @@ function cn(...classes) {
 /**
  * Glass Card Component
  *
- * Componente de cartão com efeito glassmorphism baseado na identidade Metropolle.
- * Migrado dos componentes Angular existentes com melhorias.
+ * Componente de cartão com efeito glassmorphism ou Liquid Glass (iOS 26 style).
+ *
+ * @example
+ * ```tsx
+ * // Liquid Glass (novo padrão)
+ * <GlassCard glassStyle="liquid" intensity="md">
+ *   Content here
+ * </GlassCard>
+ *
+ * // Glassmorphism tradicional (retrocompatível)
+ * <GlassCard glassStyle="glass" variant="dark">
+ *   Content here
+ * </GlassCard>
+ * ```
  */
-const GlassCard = forwardRef(({ variant = 'light', blur = 20, opacity, children, className, enableHover = true, style, ...props }, ref) => {
+const GlassCard = forwardRef(({ glassStyle = 'liquid', intensity = 'md', theme, variant = 'light', blur, opacity, children, className, enableHover = true, style, ...props }, ref) => {
+    // Resolve theme from new prop or deprecated variant
+    const resolvedTheme = theme ?? variant;
+    // =====================
+    // LIQUID GLASS MODE
+    // =====================
+    if (glassStyle === 'liquid') {
+        return (jsxRuntimeExports.jsx("div", { ref: ref, className: cn('mds-liquid-glass', `mds-liquid-glass--${intensity}`, !enableHover && 'mds-liquid-glass--no-hover', className), style: style, ...props, children: children }));
+    }
+    // =====================
+    // GLASS MODE (legacy)
+    // =====================
     // Default opacities baseadas no design existente
-    const defaultOpacity = variant === 'light' ? 0.15 : 0.8;
+    const defaultOpacity = resolvedTheme === 'light' ? 0.15 : 0.8;
     const finalOpacity = opacity ?? defaultOpacity;
     // Use CSS classes for base styles to avoid hydration mismatches
     const baseStyles = {
@@ -1382,12 +1406,16 @@ const GlassCard = forwardRef(({ variant = 'light', blur = 20, opacity, children,
     };
     // Only apply custom styles for non-default values
     const customStyles = {};
-    if (blur !== 20) {
-        customStyles.backdropFilter = `blur(${blur}px)`;
-        customStyles.WebkitBackdropFilter = `blur(${blur}px)`;
+    // Support legacy blur prop or convert from intensity
+    const resolvedBlur = blur ?? (intensity ? {
+        xs: 2, sm: 4, md: 6, lg: 8, xl: 12
+    }[intensity] : 20);
+    if (resolvedBlur !== 20) {
+        customStyles.backdropFilter = `blur(${resolvedBlur}px)`;
+        customStyles.WebkitBackdropFilter = `blur(${resolvedBlur}px)`;
     }
     if (opacity !== undefined) {
-        customStyles.background = variant === 'light'
+        customStyles.background = resolvedTheme === 'light'
             ? `rgba(255, 255, 255, ${finalOpacity})`
             : `rgba(60, 60, 60, ${finalOpacity})`;
     }
@@ -1402,7 +1430,7 @@ const GlassCard = forwardRef(({ variant = 'light', blur = 20, opacity, children,
             borderColor: 'rgba(255, 255, 255, 0.2)',
             background: opacity !== undefined ? `rgba(70, 70, 70, ${finalOpacity})` : undefined,
         }
-    }[variant] : {};
+    }[resolvedTheme] : {};
     const handleMouseEnter = (e) => {
         if (!enableHover)
             return;
@@ -1420,7 +1448,7 @@ const GlassCard = forwardRef(({ variant = 'light', blur = 20, opacity, children,
         });
         props.onMouseLeave?.(e);
     };
-    return (jsxRuntimeExports.jsx("div", { ref: ref, className: cn('mds-glass-card', `mds-glass-card--${variant}`, !enableHover && 'mds-glass-card--no-hover', className), style: {
+    return (jsxRuntimeExports.jsx("div", { ref: ref, className: cn('mds-glass-card', `mds-glass-card--${resolvedTheme}`, !enableHover && 'mds-glass-card--no-hover', className), style: {
             ...baseStyles,
             ...customStyles,
             ...style
@@ -1458,13 +1486,14 @@ const Typography = forwardRef(({ variant = 'body', size, as, children, className
     return (jsxRuntimeExports.jsx(Component, { ref: ref, className: cn('mds-text', `mds-text--${variant}`, `mds-text--size-${finalSize}`, `mds-text--color-${color}`, `mds-text--weight-${weight}`, className), ...props, children: children }));
 });
 Typography.displayName = 'Typography';
-const BrandLogo = forwardRef(({ size = 'md', className, children = 'Metropolle', ...props }, ref) => {
+const BrandLogo = forwardRef(({ size = 'md', weight = 'bold', // Peso bold por padrão para a marca
+className, children = 'Metropolle', ...props }, ref) => {
     const sizeMap = {
         sm: '2xl',
         md: '4xl',
         lg: '4xl', // Same as md but with different mobile behavior
     };
-    return (jsxRuntimeExports.jsx(Typography, { ref: ref, variant: "brand", size: sizeMap[size], className: cn('mds-brand-logo', `mds-brand-logo--${size}`, className), ...props, children: children }));
+    return (jsxRuntimeExports.jsx(Typography, { ref: ref, variant: "brand", size: sizeMap[size], weight: weight, className: cn('mds-brand-logo', `mds-brand-logo--${size}`, className), ...props, children: children }));
 });
 BrandLogo.displayName = 'BrandLogo';
 
@@ -1488,5 +1517,1109 @@ Button.displayName = 'Button';
  */
 const LoadingSpinner = () => (jsxRuntimeExports.jsxs("svg", { className: "mds-spinner", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: [jsxRuntimeExports.jsx("circle", { className: "mds-spinner__track", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "2", fill: "none", opacity: "0.25" }), jsxRuntimeExports.jsx("circle", { className: "mds-spinner__path", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "2", fill: "none", strokeDasharray: "40 20", strokeLinecap: "round" })] }));
 
-export { BrandLogo, Button, GlassCard, Typography, cn };
+/**
+ * Select Component (Design System)
+ *
+ * Custom dropdown select that renders consistently across all browsers.
+ * Unlike native <select>, this component renders the dropdown via JavaScript,
+ * ensuring proper theming support on Edge/Chrome Windows.
+ *
+ * @example
+ * ```tsx
+ * <Select
+ *   options={[
+ *     { label: 'Option 1', value: '1' },
+ *     { label: 'Option 2', value: '2' },
+ *   ]}
+ *   value={selectedValue}
+ *   onChange={setSelectedValue}
+ *   placeholder="Select an option..."
+ * />
+ * ```
+ */
+const Select = forwardRef(({ options, value, onChange, placeholder = 'Select...', variant = 'themed', size = 'md', disabled = false, loading = false, error = false, className, dropdownClassName, id, name, 'aria-label': ariaLabel, fullWidth = false, searchable = false, searchPlaceholder = 'Search...', maxHeight = 300, zIndex = 1050, }, ref) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [searchTerm, setSearchTerm] = useState('');
+    const [highlightedIndex, setHighlightedIndex] = useState(-1);
+    const [mounted, setMounted] = useState(false);
+    const triggerRef = useRef(null);
+    const dropdownRef = useRef(null);
+    const searchInputRef = useRef(null);
+    const listRef = useRef(null);
+    // Combine refs
+    const combinedRef = (el) => {
+        triggerRef.current = el;
+        if (typeof ref === 'function') {
+            ref(el);
+        }
+        else if (ref) {
+            ref.current = el;
+        }
+    };
+    // Client-side only
+    useEffect(() => {
+        setMounted(true);
+    }, []);
+    // Filter options based on search
+    const filteredOptions = useMemo(() => {
+        if (!searchTerm)
+            return options;
+        const term = searchTerm.toLowerCase();
+        return options.filter(opt => {
+            const label = typeof opt.label === 'string' ? opt.label : String(opt.value);
+            return label.toLowerCase().includes(term);
+        });
+    }, [options, searchTerm]);
+    // Get selected option label
+    const selectedOption = useMemo(() => {
+        return options.find(opt => opt.value === value);
+    }, [options, value]);
+    // Handle dropdown positioning
+    const [dropdownPosition, setDropdownPosition] = useState({ top: 0, left: 0, width: 0 });
+    const updateDropdownPosition = useCallback(() => {
+        if (!triggerRef.current)
+            return;
+        const rect = triggerRef.current.getBoundingClientRect();
+        const viewportHeight = window.innerHeight;
+        const spaceBelow = viewportHeight - rect.bottom;
+        const spaceAbove = rect.top;
+        // Determine if dropdown should open above or below
+        const dropdownHeight = Math.min(maxHeight, filteredOptions.length * 40 + (searchable ? 48 : 0));
+        const openAbove = spaceBelow < dropdownHeight && spaceAbove > spaceBelow;
+        setDropdownPosition({
+            top: openAbove ? rect.top - dropdownHeight : rect.bottom + 4,
+            left: rect.left,
+            width: rect.width,
+        });
+    }, [maxHeight, filteredOptions.length, searchable]);
+    // Open dropdown
+    const openDropdown = useCallback(() => {
+        if (disabled || loading)
+            return;
+        updateDropdownPosition();
+        setIsOpen(true);
+        setSearchTerm('');
+        setHighlightedIndex(value ? filteredOptions.findIndex(opt => opt.value === value) : 0);
+    }, [disabled, loading, updateDropdownPosition, value, filteredOptions]);
+    // Close dropdown
+    const closeDropdown = useCallback(() => {
+        setIsOpen(false);
+        setSearchTerm('');
+        setHighlightedIndex(-1);
+        triggerRef.current?.focus();
+    }, []);
+    // Handle option select
+    const handleSelect = useCallback((optionValue) => {
+        // Safety check: ensure we're passing a string, not an object
+        const safeValue = typeof optionValue === 'string' ? optionValue : String(optionValue);
+        onChange?.(safeValue);
+        closeDropdown();
+    }, [onChange, closeDropdown]);
+    // Keyboard navigation
+    const handleKeyDown = useCallback((e) => {
+        if (disabled || loading)
+            return;
+        switch (e.key) {
+            case 'Enter':
+            case ' ':
+                e.preventDefault();
+                if (isOpen && highlightedIndex >= 0 && filteredOptions[highlightedIndex]) {
+                    const opt = filteredOptions[highlightedIndex];
+                    if (!opt.disabled) {
+                        handleSelect(opt.value);
+                    }
+                }
+                else if (!isOpen) {
+                    openDropdown();
+                }
+                break;
+            case 'ArrowDown':
+                e.preventDefault();
+                if (!isOpen) {
+                    openDropdown();
+                }
+                else {
+                    setHighlightedIndex(prev => {
+                        const next = prev + 1;
+                        return next >= filteredOptions.length ? 0 : next;
+                    });
+                }
+                break;
+            case 'ArrowUp':
+                e.preventDefault();
+                if (isOpen) {
+                    setHighlightedIndex(prev => {
+                        const next = prev - 1;
+                        return next < 0 ? filteredOptions.length - 1 : next;
+                    });
+                }
+                break;
+            case 'Escape':
+                e.preventDefault();
+                closeDropdown();
+                break;
+            case 'Tab':
+                if (isOpen) {
+                    closeDropdown();
+                }
+                break;
+            case 'Home':
+                if (isOpen) {
+                    e.preventDefault();
+                    setHighlightedIndex(0);
+                }
+                break;
+            case 'End':
+                if (isOpen) {
+                    e.preventDefault();
+                    setHighlightedIndex(filteredOptions.length - 1);
+                }
+                break;
+        }
+    }, [disabled, loading, isOpen, highlightedIndex, filteredOptions, handleSelect, openDropdown, closeDropdown]);
+    // Click outside to close
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const handleClickOutside = (e) => {
+            if (triggerRef.current?.contains(e.target) ||
+                dropdownRef.current?.contains(e.target)) {
+                return;
+            }
+            closeDropdown();
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, [isOpen, closeDropdown]);
+    // Update position on scroll/resize
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const handleUpdate = () => updateDropdownPosition();
+        window.addEventListener('scroll', handleUpdate, true);
+        window.addEventListener('resize', handleUpdate);
+        return () => {
+            window.removeEventListener('scroll', handleUpdate, true);
+            window.removeEventListener('resize', handleUpdate);
+        };
+    }, [isOpen, updateDropdownPosition]);
+    // Focus search input when dropdown opens
+    useEffect(() => {
+        if (isOpen && searchable && searchInputRef.current) {
+            searchInputRef.current.focus();
+        }
+    }, [isOpen, searchable]);
+    // Scroll highlighted option into view
+    useEffect(() => {
+        if (!isOpen || highlightedIndex < 0 || !listRef.current)
+            return;
+        const highlighted = listRef.current.children[highlightedIndex];
+        if (highlighted) {
+            highlighted.scrollIntoView({ block: 'nearest' });
+        }
+    }, [isOpen, highlightedIndex]);
+    // Size classes
+    const sizeClasses = {
+        sm: 'mds-select--sm',
+        md: 'mds-select--md',
+        lg: 'mds-select--lg',
+    };
+    // Variant classes
+    const variantClasses = {
+        base: 'mds-select--base',
+        themed: 'mds-select--themed',
+        dashboard: 'mds-select--themed',
+    };
+    const triggerClasses = cn('mds-select-trigger', sizeClasses[size], variantClasses[variant], isOpen && 'mds-select-trigger--open', disabled && 'mds-select-trigger--disabled', loading && 'mds-select-trigger--loading', error && 'mds-select-trigger--error', fullWidth && 'mds-select-trigger--full-width', className);
+    const dropdownClasses = cn('mds-select-dropdown', variantClasses[variant], dropdownClassName);
+    // Hidden input for form submission
+    const hiddenInput = name ? (jsxRuntimeExports.jsx("input", { type: "hidden", name: name, value: value || '' })) : null;
+    // Dropdown portal content
+    const dropdownContent = isOpen && mounted ? createPortal(jsxRuntimeExports.jsxs("div", { ref: dropdownRef, className: dropdownClasses, style: {
+            position: 'fixed',
+            top: dropdownPosition.top,
+            left: dropdownPosition.left,
+            width: dropdownPosition.width,
+            maxHeight,
+            zIndex,
+        }, role: "listbox", "aria-label": ariaLabel || placeholder, children: [searchable && (jsxRuntimeExports.jsxs("div", { className: "mds-select-search", children: [jsxRuntimeExports.jsx("input", { ref: searchInputRef, type: "text", className: "mds-select-search__input", placeholder: searchPlaceholder, value: searchTerm, onChange: (e) => {
+                            setSearchTerm(e.target.value);
+                            setHighlightedIndex(0);
+                        }, onKeyDown: handleKeyDown, "aria-label": "Search options" }), jsxRuntimeExports.jsx("svg", { className: "mds-select-search__icon", viewBox: "0 0 20 20", fill: "currentColor", children: jsxRuntimeExports.jsx("path", { fillRule: "evenodd", d: "M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z", clipRule: "evenodd" }) })] })), jsxRuntimeExports.jsx("ul", { ref: listRef, className: "mds-select-options", children: filteredOptions.length === 0 ? (jsxRuntimeExports.jsx("li", { className: "mds-select-option mds-select-option--empty", children: "No options found" })) : (filteredOptions.map((option, index) => (jsxRuntimeExports.jsxs("li", { className: cn('mds-select-option', option.value === value && 'mds-select-option--selected', index === highlightedIndex && 'mds-select-option--highlighted', option.disabled && 'mds-select-option--disabled'), role: "option", "aria-selected": option.value === value, "aria-disabled": option.disabled, onClick: () => {
+                        if (!option.disabled) {
+                            handleSelect(option.value);
+                        }
+                    }, onMouseEnter: () => {
+                        if (!option.disabled) {
+                            setHighlightedIndex(index);
+                        }
+                    }, children: [jsxRuntimeExports.jsx("span", { className: "mds-select-option__label", children: option.label }), option.value === value && (jsxRuntimeExports.jsx("svg", { className: "mds-select-option__check", viewBox: "0 0 20 20", fill: "currentColor", children: jsxRuntimeExports.jsx("path", { fillRule: "evenodd", d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z", clipRule: "evenodd" }) }))] }, option.value)))) })] }), document.body) : null;
+    return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [hiddenInput, jsxRuntimeExports.jsxs("button", { ref: combinedRef, type: "button", id: id, className: triggerClasses, onClick: () => isOpen ? closeDropdown() : openDropdown(), onKeyDown: handleKeyDown, disabled: disabled || loading, "aria-haspopup": "listbox", "aria-expanded": isOpen, "aria-label": ariaLabel, "aria-invalid": error, children: [jsxRuntimeExports.jsx("span", { className: cn('mds-select-trigger__value', !selectedOption && 'mds-select-trigger__placeholder'), children: loading ? 'Loading...' : (selectedOption?.label || placeholder) }), jsxRuntimeExports.jsx("span", { className: "mds-select-trigger__icon", children: loading ? (jsxRuntimeExports.jsx("svg", { className: "mds-select-spinner", viewBox: "0 0 24 24", fill: "none", children: jsxRuntimeExports.jsx("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeDasharray: "32", strokeDashoffset: "32", children: jsxRuntimeExports.jsx("animate", { attributeName: "stroke-dashoffset", values: "32;0", dur: "1s", repeatCount: "indefinite" }) }) })) : (jsxRuntimeExports.jsx("svg", { className: "mds-select-chevron", viewBox: "0 0 20 20", fill: "currentColor", children: jsxRuntimeExports.jsx("path", { fillRule: "evenodd", d: "M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z", clipRule: "evenodd" }) })) })] }), dropdownContent] }));
+});
+Select.displayName = 'Select';
+
+function ThemeToggle({ size = 'md', className = '', disabled = false, onChange, storageKey = 'theme' }) {
+    const [theme, setTheme] = useState('dark');
+    const [mounted, setMounted] = useState(false);
+    // Initialize theme on mount
+    useEffect(() => {
+        try {
+            if (typeof window !== 'undefined') {
+                const savedTheme = localStorage.getItem(storageKey) || 'dark';
+                setTheme(savedTheme);
+                document.documentElement.setAttribute('data-theme', savedTheme);
+                setMounted(true);
+            }
+        }
+        catch (err) {
+            setTheme('dark');
+            setMounted(true);
+        }
+    }, [storageKey]);
+    // Listen to external theme changes
+    useEffect(() => {
+        if (typeof window !== 'undefined') {
+            const updateTheme = () => {
+                const currentTheme = document.documentElement.getAttribute('data-theme') || 'dark';
+                setTheme(currentTheme);
+            };
+            const observer = new MutationObserver(() => {
+                updateTheme();
+            });
+            observer.observe(document.documentElement, {
+                attributes: true,
+                attributeFilter: ['data-theme']
+            });
+            return () => observer.disconnect();
+        }
+    }, []);
+    const toggleTheme = () => {
+        if (disabled)
+            return;
+        try {
+            const newTheme = theme === 'light' ? 'dark' : 'light';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem(storageKey, newTheme);
+            setTheme(newTheme);
+            onChange?.(newTheme);
+        }
+        catch (err) {
+            console.warn('Failed to toggle theme:', err);
+        }
+    };
+    // Don't render until mounted (prevents hydration mismatch)
+    if (!mounted) {
+        return (jsxRuntimeExports.jsx("div", { className: `mds-theme-toggle mds-theme-toggle--${size} ${className}`, style: { opacity: 0.5 }, "aria-hidden": "true" }));
+    }
+    const isDark = theme === 'dark';
+    const buttonStyle = isDark
+        ? {
+            backgroundColor: 'rgba(0, 0, 0, 0.35)',
+            border: '1px solid rgba(255, 255, 255, 0.18)',
+            boxShadow: '0 2px 8px rgba(0, 0, 0, 0.3)'
+        }
+        : undefined;
+    const buttonClasses = [
+        'mds-theme-toggle',
+        `mds-theme-toggle--${size}`,
+        className
+    ].filter(Boolean).join(' ');
+    return (jsxRuntimeExports.jsx("button", { onClick: toggleTheme, className: buttonClasses, disabled: disabled, type: "button", "aria-pressed": isDark, "aria-label": `Switch to ${isDark ? 'light' : 'dark'} mode`, title: `Switch to ${isDark ? 'light' : 'dark'} mode`, "data-theme": isDark ? 'dark' : 'light', style: buttonStyle }));
+}
+
+const TableHeader = ({ columns, gridTemplate, onSort, sortColumn, sortDirection }) => {
+    return (jsxRuntimeExports.jsx("div", { role: "rowgroup", style: {
+            display: 'grid',
+            gridTemplateColumns: gridTemplate,
+            gap: '16px',
+            padding: '16px 20px',
+            borderBottom: '1px solid var(--border-color)',
+            backgroundColor: 'rgba(255, 255, 255, 0.05)'
+        }, children: columns.map((column) => (jsxRuntimeExports.jsxs("div", { role: "columnheader", style: {
+                color: 'var(--text-primary)',
+                fontWeight: '500',
+                fontSize: '14px',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: column.align === 'center' ? 'center' :
+                    column.align === 'right' ? 'flex-end' : 'flex-start',
+                cursor: column.sortable && onSort ? 'pointer' : 'default',
+                gap: '4px',
+                transition: 'color 0.2s ease'
+            }, onClick: () => column.sortable && onSort && onSort(column.key), onMouseEnter: (e) => {
+                if (column.sortable && onSort) {
+                    e.currentTarget.style.color = '#ffffff';
+                }
+            }, onMouseLeave: (e) => {
+                e.currentTarget.style.color = 'var(--text-primary)';
+            }, children: [column.label, column.sortable && onSort && (jsxRuntimeExports.jsx("span", { style: {
+                        fontSize: '12px',
+                        opacity: sortColumn === column.key ? 1 : 0.5
+                    }, children: sortColumn === column.key ?
+                        (sortDirection === 'asc' ? '↑' : '↓') : '↕' }))] }, column.key))) }));
+};
+
+const TableRow = ({ item, index, columns, actions = [], gridTemplate, isLast, variant, onActionClick }) => {
+    return (jsxRuntimeExports.jsxs("div", { role: "row", style: {
+            display: 'grid',
+            gridTemplateColumns: gridTemplate,
+            gap: '16px',
+            padding: variant === 'compact' ? '12px 20px' : '16px 20px',
+            borderBottom: isLast ? 'none' : '1px solid var(--border-color)',
+            backgroundColor: 'transparent',
+            transition: 'background-color 0.2s ease'
+        }, onMouseEnter: (e) => {
+            e.currentTarget.style.backgroundColor = 'rgba(255, 255, 255, 0.05)';
+        }, onMouseLeave: (e) => {
+            e.currentTarget.style.backgroundColor = 'transparent';
+        }, children: [columns.map((column) => (jsxRuntimeExports.jsx("div", { role: "cell", style: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: '4px',
+                    justifyContent: 'center',
+                    alignItems: column.align === 'center' ? 'center' :
+                        column.align === 'right' ? 'flex-end' : 'flex-start'
+                }, children: column.render ?
+                    column.render(item[column.key], item, index) :
+                    jsxRuntimeExports.jsx("div", { style: {
+                            color: 'var(--text-primary)',
+                            fontSize: '14px'
+                        }, children: item[column.key] }) }, column.key))), actions.length > 0 && (jsxRuntimeExports.jsx("div", { role: "cell", style: {
+                    display: 'flex',
+                    gap: '8px',
+                    justifyContent: 'center',
+                    alignItems: 'center'
+                }, children: actions.map((action) => {
+                    const isDisabled = action.disabled?.(item) || false;
+                    const isLoading = action.loading?.(item) || false;
+                    return (jsxRuntimeExports.jsxs("button", { onClick: () => !isDisabled && !isLoading && onActionClick(action, item), disabled: isDisabled || isLoading, style: {
+                            background: 'none',
+                            border: action.variant === 'danger' ? '1px solid rgba(239, 68, 68, 0.3)' :
+                                '1px solid var(--border-color)',
+                            borderRadius: '6px',
+                            padding: '6px 12px',
+                            color: action.variant === 'danger' ? '#f87171' : 'var(--text-primary)',
+                            fontSize: '12px',
+                            cursor: isDisabled || isLoading ? 'not-allowed' : 'pointer',
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: '4px',
+                            transition: 'all 0.2s ease',
+                            opacity: isDisabled || isLoading ? 0.5 : 1,
+                            whiteSpace: 'nowrap'
+                        }, onMouseEnter: (e) => {
+                            if (!isDisabled && !isLoading) {
+                                if (action.variant === 'danger') {
+                                    e.currentTarget.style.backgroundColor = 'rgba(239, 68, 68, 0.1)';
+                                    e.currentTarget.style.borderColor = 'rgba(239, 68, 68, 0.5)';
+                                }
+                                else {
+                                    e.currentTarget.style.backgroundColor = 'rgba(255, 255, 255, 0.1)';
+                                    e.currentTarget.style.borderColor = 'var(--text-primary)';
+                                }
+                            }
+                        }, onMouseLeave: (e) => {
+                            if (!isDisabled && !isLoading) {
+                                e.currentTarget.style.backgroundColor = 'transparent';
+                                e.currentTarget.style.borderColor = action.variant === 'danger' ?
+                                    'rgba(239, 68, 68, 0.3)' : 'var(--border-color)';
+                            }
+                        }, children: [action.icon && action.icon, action.label] }, action.key));
+                }) }))] }));
+};
+
+const DataTable = ({ data, columns, loading = false, searchTerm = '', actions = [], variant = 'default', responsive = 'stack', onSort, emptyMessage = 'Nenhum item encontrado', loadingMessage = 'Carregando...', className, style, maxHeight = '600px', showSearchCount = true, rowHover = true, striped = false }) => {
+    const [sortColumn, setSortColumn] = useState('');
+    const [sortDirection, setSortDirection] = useState('asc');
+    // Filter data based on search term
+    const filteredData = useMemo(() => {
+        if (!searchTerm)
+            return data;
+        return data.filter(item => {
+            return columns.some(column => {
+                const value = item[column.key];
+                if (value === null || value === undefined)
+                    return false;
+                return String(value).toLowerCase().includes(searchTerm.toLowerCase());
+            });
+        });
+    }, [data, searchTerm, columns]);
+    // Generate grid template based on columns and actions
+    const gridTemplate = useMemo(() => {
+        const columnWidths = columns.map(col => col.width || '1fr').join(' ');
+        const actionsWidth = actions.length > 0 ? ' 120px' : '';
+        return columnWidths + actionsWidth;
+    }, [columns, actions]);
+    // Handle sort
+    const handleSort = (columnKey) => {
+        let direction = 'asc';
+        if (sortColumn === columnKey && sortDirection === 'asc') {
+            direction = 'desc';
+        }
+        setSortColumn(columnKey);
+        setSortDirection(direction);
+        if (onSort) {
+            onSort(columnKey, direction);
+        }
+    };
+    // Handle action click
+    const handleActionClick = (action, item) => {
+        action.onClick(item);
+    };
+    // Loading state
+    if (loading) {
+        return (jsxRuntimeExports.jsx("div", { className: className, style: {
+                position: 'relative',
+                borderRadius: '24px',
+                backdropFilter: 'blur(24px)',
+                backgroundColor: 'rgba(255, 255, 255, 0.1)',
+                border: '1px solid rgba(255, 255, 255, 0.3)',
+                boxShadow: '0 12px 40px rgba(0, 0, 0, 0.15)',
+                padding: '32px',
+                ...style
+            }, children: jsxRuntimeExports.jsxs("div", { style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    gap: '12px'
+                }, children: [jsxRuntimeExports.jsx("div", { style: {
+                            width: '32px',
+                            height: '32px',
+                            border: '2px solid transparent',
+                            borderTop: '2px solid white',
+                            borderRadius: '50%',
+                            animation: 'spin 1s linear infinite'
+                        } }), jsxRuntimeExports.jsx("span", { style: { color: 'var(--text-primary)' }, children: loadingMessage })] }) }));
+    }
+    // Empty state
+    if (filteredData.length === 0) {
+        return (jsxRuntimeExports.jsx("div", { className: className, style: {
+                position: 'relative',
+                borderRadius: '24px',
+                backdropFilter: 'blur(24px)',
+                backgroundColor: 'rgba(255, 255, 255, 0.1)',
+                border: '1px solid rgba(255, 255, 255, 0.3)',
+                boxShadow: '0 12px 40px rgba(0, 0, 0, 0.15)',
+                padding: '40px',
+                textAlign: 'center',
+                ...style
+            }, children: jsxRuntimeExports.jsx("div", { style: {
+                    color: 'var(--text-secondary)',
+                    fontSize: '16px'
+                }, children: emptyMessage }) }));
+    }
+    return (jsxRuntimeExports.jsxs("div", { className: className, style: {
+            position: 'relative',
+            borderRadius: '24px',
+            backdropFilter: 'blur(24px)',
+            backgroundColor: 'rgba(255, 255, 255, 0.1)',
+            border: '1px solid rgba(255, 255, 255, 0.3)',
+            boxShadow: '0 12px 40px rgba(0, 0, 0, 0.15)',
+            overflow: 'hidden',
+            ...style
+        }, role: "table", "aria-label": "Tabela de dados", children: [showSearchCount && searchTerm && (jsxRuntimeExports.jsxs("div", { style: {
+                    padding: '16px',
+                    color: 'var(--text-secondary)',
+                    fontSize: '14px',
+                    borderBottom: '1px solid var(--border-color)'
+                }, children: ["Mostrando", ' ', jsxRuntimeExports.jsx("span", { style: { fontWeight: '500', color: 'var(--text-primary)' }, children: filteredData.length }), ' ', "de", ' ', jsxRuntimeExports.jsx("span", { style: { fontWeight: '500', color: 'var(--text-primary)' }, children: data.length }), ' ', "itens"] })), jsxRuntimeExports.jsx(TableHeader, { columns: columns, gridTemplate: gridTemplate, onSort: onSort ? handleSort : undefined, sortColumn: sortColumn, sortDirection: sortDirection }), jsxRuntimeExports.jsx("div", { role: "rowgroup", style: {
+                    maxHeight,
+                    overflowY: 'auto'
+                }, children: filteredData.map((item, index) => (jsxRuntimeExports.jsx(TableRow, { item: item, index: index, columns: columns, actions: actions, gridTemplate: gridTemplate, isLast: index === filteredData.length - 1, variant: variant, onActionClick: handleActionClick }, item.id || index))) })] }));
+};
+
+const CellRenderers = {
+    // ID cell - monospace background
+    id: (value) => (jsxRuntimeExports.jsx("div", { className: "data-table-code", style: {
+            color: 'var(--text-secondary)',
+            fontSize: '12px',
+            backgroundColor: 'rgba(255, 255, 255, 0.05)',
+            padding: '2px 8px',
+            borderRadius: '4px',
+            textAlign: 'center',
+            fontFamily: 'monospace'
+        }, children: value })),
+    // Name cell - primary text with background
+    name: (value) => (jsxRuntimeExports.jsx("div", { className: "data-table-code", style: {
+            color: 'var(--text-primary)',
+            fontSize: '14px',
+            backgroundColor: 'rgba(255, 255, 255, 0.1)',
+            padding: '4px 12px',
+            borderRadius: '8px',
+            fontFamily: 'monospace'
+        }, children: value })),
+    // Parameter value - masked if secure
+    parameterValue: (value, item) => {
+        const displayValue = item.type === 'SecureString' ? '••••••••' :
+            (value?.length > 50 ? `${value.substring(0, 50)}...` : value);
+        return (jsxRuntimeExports.jsx("div", { className: "data-table-code", style: {
+                color: 'var(--text-primary)',
+                fontSize: '14px',
+                backgroundColor: 'rgba(255, 255, 255, 0.1)',
+                borderRadius: '8px',
+                maxWidth: '300px',
+                wordBreak: 'break-all',
+                padding: '4px 12px',
+                fontFamily: 'monospace'
+            }, children: displayValue }));
+    },
+    // Badge renderer for types/statuses
+    badge: (value, variant = 'primary') => (jsxRuntimeExports.jsx("span", { className: `data-table-badge ${variant}`, children: value })),
+    // Parameter type badge
+    parameterType: (value) => {
+        const variant = value === 'SecureString' ? 'danger' :
+            value === 'StringList' ? 'success' : 'primary';
+        return CellRenderers.badge(value, variant);
+    },
+    // Environment badge
+    environment: (value, item) => {
+        const env = item.name?.includes('/prod/') ? 'PROD' : 'DEV';
+        const variant = env === 'PROD' ? 'info' : 'warning';
+        return CellRenderers.badge(env, variant);
+    },
+    // Action type badge for audit logs
+    actionType: (value) => {
+        const variant = value === 'CREATE' ? 'success' :
+            value === 'UPDATE' ? 'primary' : 'danger';
+        return CellRenderers.badge(value, variant);
+    },
+    // Date formatter
+    date: (value) => (jsxRuntimeExports.jsx("div", { style: {
+            color: 'var(--text-primary)',
+            fontSize: '14px'
+        }, children: value ? new Date(value).toLocaleString('pt-BR') : '-' })),
+    // Description/secondary text
+    description: (value) => (jsxRuntimeExports.jsx("div", { style: {
+            color: 'var(--text-secondary)',
+            fontSize: '12px',
+            maxWidth: '300px',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap'
+        }, children: value })),
+    // JSON preview for audit changes
+    jsonPreview: (value) => {
+        const jsonString = JSON.stringify(value);
+        const preview = jsonString.length > 30 ? jsonString.substring(0, 30) + '...' : jsonString;
+        return (jsxRuntimeExports.jsx("div", { style: {
+                color: 'var(--text-secondary)',
+                fontSize: '12px',
+                fontFamily: 'monospace',
+                maxWidth: '150px',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                whiteSpace: 'nowrap'
+            }, children: preview }));
+    },
+    // Combined cell with main value and description
+    combined: (mainValue, description) => (jsxRuntimeExports.jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px' }, children: [CellRenderers.name(mainValue), description && CellRenderers.description(description)] })),
+    // Combined with badges
+    combinedWithBadges: (mainValue, badges) => (jsxRuntimeExports.jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px' }, children: [CellRenderers.name(mainValue), jsxRuntimeExports.jsx("div", { style: { display: 'flex', gap: '8px', flexWrap: 'wrap' }, children: badges.map((badge, index) => (jsxRuntimeExports.jsx("span", { className: `data-table-badge ${badge.variant || 'primary'}`, children: badge.value }, index))) })] }))
+};
+// Common action icons
+const ActionIcons = {
+    edit: (jsxRuntimeExports.jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "currentColor", children: jsxRuntimeExports.jsx("path", { d: "M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z" }) })),
+    delete: (jsxRuntimeExports.jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "currentColor", children: jsxRuntimeExports.jsx("path", { d: "M9,3V4H4V6H5V19A2,2 0 0,0 7,21H17A2,2 0 0,0 19,19V6H20V4H15V3H9M7,6H17V19H7V6M9,8V17H11V8H9M13,8V17H15V8H13Z" }) })),
+    view: (jsxRuntimeExports.jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "currentColor", children: jsxRuntimeExports.jsx("path", { d: "M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z" }) })),
+    loading: (jsxRuntimeExports.jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "currentColor", className: "data-table-spinner", children: jsxRuntimeExports.jsx("path", { d: "M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z" }) }))
+};
+
+// Configuração para ParametersTable (Settings)
+const parametersTableConfig = {
+    columns: [
+        {
+            key: 'name',
+            label: 'Parâmetro',
+            width: '1fr',
+            render: (value, item) => CellRenderers.combinedWithBadges(value, [
+                { value: item.type, variant: item.type === 'SecureString' ? 'danger' :
+                        item.type === 'StringList' ? 'success' : 'primary' },
+                { value: item.name.includes('/prod/') ? 'PROD' : 'DEV',
+                    variant: item.name.includes('/prod/') ? 'info' : 'warning' }
+            ])
+        },
+        {
+            key: 'value',
+            label: 'Valor',
+            width: '2fr',
+            render: (value, item) => (jsxRuntimeExports.jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px' }, children: [CellRenderers.parameterValue(value, item), CellRenderers.description(item.description)] }))
+        }
+    ],
+    actions: [
+        {
+            key: 'edit',
+            label: '✏️',
+            variant: 'secondary',
+            onClick: (item) => console.log('Edit', item),
+            disabled: (item) => false
+        },
+        {
+            key: 'delete',
+            label: '🗑️',
+            variant: 'danger',
+            onClick: (item) => console.log('Delete', item),
+            disabled: (item) => false,
+            loading: (item) => item.deleting || false
+        }
+    ]
+};
+// Configuração para GeographyTable - Regions
+const regionsTableConfig = {
+    columns: [
+        {
+            key: 'region_id',
+            label: 'ID',
+            width: '80px',
+            render: CellRenderers.id
+        },
+        {
+            key: 'name',
+            label: 'Nome',
+            width: '1fr',
+            render: CellRenderers.name
+        },
+        {
+            key: 'code',
+            label: 'Código',
+            width: '120px',
+            render: CellRenderers.name
+        },
+        {
+            key: 'created_at',
+            label: 'Criado em',
+            width: '140px',
+            render: CellRenderers.date
+        },
+        {
+            key: 'created_by',
+            label: 'Criado por',
+            width: '140px',
+            render: (value) => CellRenderers.name(value)
+        }
+    ],
+    actions: [
+        {
+            key: 'edit',
+            label: '✏️',
+            variant: 'secondary',
+            onClick: (item) => console.log('Edit region', item)
+        },
+        {
+            key: 'delete',
+            label: '🗑️',
+            variant: 'danger',
+            onClick: (item) => console.log('Delete region', item),
+            loading: (item) => item.deleting || false
+        }
+    ]
+};
+// Configuração para GeographyTable - Countries
+const countriesTableConfig = {
+    columns: [
+        {
+            key: 'country_id',
+            label: 'ID',
+            width: '80px',
+            render: CellRenderers.id
+        },
+        {
+            key: 'name',
+            label: 'Nome',
+            width: '1fr',
+            render: CellRenderers.name
+        },
+        {
+            key: 'iso2',
+            label: 'Código',
+            width: '120px',
+            render: (value, item) => CellRenderers.combinedWithBadges(value, [
+                { value: item.iso3, variant: 'primary' }
+            ])
+        },
+        {
+            key: 'capital',
+            label: 'Capital',
+            width: '140px',
+            render: CellRenderers.name
+        },
+        {
+            key: 'region',
+            label: 'Região',
+            width: '120px',
+            render: (value) => CellRenderers.badge(value, 'info')
+        }
+    ],
+    actions: [
+        {
+            key: 'edit',
+            label: '✏️',
+            variant: 'secondary',
+            onClick: (item) => console.log('Edit country', item)
+        },
+        {
+            key: 'delete',
+            label: '🗑️',
+            variant: 'danger',
+            onClick: (item) => console.log('Delete country', item)
+        }
+    ]
+};
+// Configuração para Audit Log
+const auditLogTableConfig = {
+    columns: [
+        {
+            key: 'timestamp',
+            label: 'Data/Hora',
+            width: '140px',
+            render: CellRenderers.date
+        },
+        {
+            key: 'user_email',
+            label: 'Usuário',
+            width: '180px',
+            render: CellRenderers.name
+        },
+        {
+            key: 'action',
+            label: 'Ação',
+            width: '100px',
+            render: CellRenderers.actionType
+        },
+        {
+            key: 'entity_type',
+            label: 'Tipo',
+            width: '120px',
+            render: (value) => CellRenderers.badge(value, 'primary')
+        },
+        {
+            key: 'entity_id',
+            label: 'ID',
+            width: '120px',
+            render: CellRenderers.description
+        },
+        {
+            key: 'changes',
+            label: 'Alterações',
+            width: '1fr',
+            render: (value, item) => (jsxRuntimeExports.jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '8px' }, children: [CellRenderers.jsonPreview(value), jsxRuntimeExports.jsxs("button", { onClick: () => console.log('View details', item), style: {
+                            background: 'none',
+                            border: '1px solid var(--border-color)',
+                            borderRadius: '4px',
+                            padding: '4px 8px',
+                            color: 'var(--text-primary)',
+                            fontSize: '12px',
+                            cursor: 'pointer',
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: '4px',
+                            transition: 'all 0.2s ease',
+                            whiteSpace: 'nowrap'
+                        }, children: [ActionIcons.view, "Ver Detalhes"] })] }))
+        }
+    ]
+};
+// Configuração para States
+const statesTableConfig = {
+    columns: [
+        {
+            key: 'state_id',
+            label: 'ID',
+            width: '80px',
+            render: CellRenderers.id
+        },
+        {
+            key: 'name',
+            label: 'Nome',
+            width: '1fr',
+            render: CellRenderers.name
+        },
+        {
+            key: 'code',
+            label: 'Código',
+            width: '120px',
+            render: CellRenderers.name
+        },
+        {
+            key: 'country_name',
+            label: 'País',
+            width: '140px',
+            render: (value) => CellRenderers.badge(value, 'info')
+        }
+    ],
+    actions: [
+        {
+            key: 'edit',
+            label: '✏️',
+            variant: 'secondary',
+            onClick: (item) => console.log('Edit state', item)
+        },
+        {
+            key: 'delete',
+            label: '🗑️',
+            variant: 'danger',
+            onClick: (item) => console.log('Delete state', item)
+        }
+    ]
+};
+// Configuração para Cities
+const citiesTableConfig = {
+    columns: [
+        {
+            key: 'city_id',
+            label: 'ID',
+            width: '80px',
+            render: CellRenderers.id
+        },
+        {
+            key: 'name',
+            label: 'Nome',
+            width: '1fr',
+            render: CellRenderers.name
+        },
+        {
+            key: 'population',
+            label: 'População',
+            width: '120px',
+            render: (value) => (jsxRuntimeExports.jsx("div", { style: { color: 'var(--text-primary)', fontSize: '14px' }, children: value ? value.toLocaleString('pt-BR') : '-' }))
+        },
+        {
+            key: 'state_name',
+            label: 'Estado',
+            width: '140px',
+            render: (value) => CellRenderers.badge(value, 'success')
+        },
+        {
+            key: 'country_name',
+            label: 'País',
+            width: '120px',
+            render: (value) => CellRenderers.badge(value, 'info')
+        }
+    ],
+    actions: [
+        {
+            key: 'edit',
+            label: '✏️',
+            variant: 'secondary',
+            onClick: (item) => console.log('Edit city', item)
+        },
+        {
+            key: 'delete',
+            label: '🗑️',
+            variant: 'danger',
+            onClick: (item) => console.log('Delete city', item)
+        }
+    ]
+};
+// Função helper para aplicar configuração baseada no tipo
+const getTableConfig = (type) => {
+    switch (type) {
+        case 'parameters':
+            return parametersTableConfig;
+        case 'regions':
+            return regionsTableConfig;
+        case 'countries':
+            return countriesTableConfig;
+        case 'states':
+            return statesTableConfig;
+        case 'cities':
+            return citiesTableConfig;
+        case 'audit':
+            return auditLogTableConfig;
+        default:
+            return parametersTableConfig;
+    }
+};
+
+/**
+ * Theme-aware styles generator - Liquid Glass pattern
+ *
+ * Light theme: White semi-transparent overlay to keep background bright
+ * Dark theme: Dark overlay for contrast
+ */
+function getStyles(isDark) {
+    return {
+        // Overlay behind the modal
+        overlay: {
+            position: 'fixed',
+            inset: 0,
+            zIndex: 9999,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            padding: 20,
+            // Light theme: white overlay to keep brightness
+            // Dark theme: dark overlay for contrast
+            backgroundColor: isDark ? 'rgba(0, 0, 0, 0.6)' : 'rgba(255, 255, 255, 0.4)',
+            backdropFilter: 'blur(8px)',
+            WebkitBackdropFilter: 'blur(8px)',
+        },
+        // Modal card - Liquid Glass
+        card: {
+            position: 'relative',
+            maxWidth: 640,
+            width: '100%',
+            borderRadius: 24,
+            overflow: 'hidden',
+            // Light theme: Liquid Glass transparency
+            // Dark theme: subtle glass effect
+            background: isDark
+                ? 'rgba(255, 255, 255, 0.03)'
+                : 'rgba(255, 255, 255, 0.55)',
+            // Liquid Glass: Strong blur + saturation
+            backdropFilter: 'blur(var(--mds-liquid-blur-xl, 24px)) saturate(var(--mds-liquid-saturate-vibrant, 140%))',
+            WebkitBackdropFilter: 'blur(var(--mds-liquid-blur-xl, 24px)) saturate(var(--mds-liquid-saturate-vibrant, 140%))',
+            // Liquid Glass: Subtle border for edge definition
+            border: isDark
+                ? '1px solid rgba(255, 255, 255, 0.08)'
+                : '1px solid rgba(255, 255, 255, 0.9)',
+            // Liquid Glass: Layered shadows + inner glow
+            boxShadow: isDark
+                ? 'var(--mds-liquid-shadow-elevated, 0 12px 40px rgba(0, 0, 0, 0.3)), var(--mds-liquid-glow-edge, inset 0 1px 0 rgba(255, 255, 255, 0.1))'
+                : '0 8px 32px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 1)',
+            // Liquid Glass: Smooth transition
+            transition: 'var(--mds-liquid-transition, all 0.25s cubic-bezier(0.25, 0.1, 0.25, 1))',
+        },
+    };
+}
+function Modal({ open, onClose, closeOnOverlay = true, children, className, style }) {
+    const [mounted, setMounted] = useState(false);
+    const [visible, setVisible] = useState(false);
+    const [renderPortal, setRenderPortal] = useState(false);
+    const [isDarkTheme, setIsDarkTheme] = useState(true);
+    const containerRef = useRef(null);
+    useEffect(() => setMounted(true), []);
+    // Detect theme - EXACT same pattern as ProfileCard.tsx
+    useEffect(() => {
+        const checkTheme = () => {
+            const theme = document.documentElement.getAttribute('data-theme');
+            setIsDarkTheme(theme !== 'light');
+        };
+        checkTheme();
+        // Watch for theme changes
+        const observer = new MutationObserver((mutations) => {
+            mutations.forEach((mutation) => {
+                if (mutation.attributeName === 'data-theme') {
+                    checkTheme();
+                }
+            });
+        });
+        observer.observe(document.documentElement, { attributes: true });
+        return () => observer.disconnect();
+    }, []);
+    useEffect(() => {
+        if (!mounted)
+            return;
+        if (open) {
+            setVisible(true);
+            setRenderPortal(true);
+        }
+        else {
+            setVisible(false);
+            const t = setTimeout(() => setRenderPortal(false), 200);
+            return () => clearTimeout(t);
+        }
+    }, [open, mounted]);
+    useEffect(() => {
+        if (!open)
+            return;
+        const onKeyDown = (e) => {
+            if (e.key === 'Escape')
+                onClose();
+        };
+        document.addEventListener('keydown', onKeyDown);
+        return () => document.removeEventListener('keydown', onKeyDown);
+    }, [open, onClose]);
+    if (!mounted || (!renderPortal && !open))
+        return null;
+    // Get theme-aware styles (same pattern as ProfileCard)
+    const styles = getStyles(isDarkTheme);
+    const overlayStyle = {
+        ...styles.overlay,
+        opacity: visible ? 1 : 0,
+        transition: 'opacity 200ms ease',
+    };
+    const cardStyle = {
+        ...styles.card,
+        transform: visible ? 'scale(1)' : 'scale(0.96)',
+        opacity: visible ? 1 : 0,
+        transition: 'opacity 200ms ease, transform 200ms cubic-bezier(0.4, 0, 0.2, 1)',
+        ...style,
+    };
+    const content = (jsxRuntimeExports.jsx("div", { className: "modal-overlay mds-modal-overlay", style: overlayStyle, onClick: closeOnOverlay ? onClose : undefined, "aria-modal": "true", role: "dialog", children: jsxRuntimeExports.jsx("div", { className: className, style: cardStyle, onClick: (e) => e.stopPropagation(), ref: (el) => (containerRef.current = el), children: children }) }));
+    return createPortal(content, document.body);
+}
+
+function ModalHeader({ title, icon, onClose, closeAriaLabel = 'Fechar', align = 'center' }) {
+    const CloseIcon = (jsxRuntimeExports.jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": true, children: jsxRuntimeExports.jsx("path", { d: "M18.3 5.71a1 1 0 00-1.41 0L12 10.59 7.11 5.7A1 1 0 105.7 7.11L10.59 12l-4.9 4.89a1 1 0 101.42 1.42L12 13.41l4.89 4.9a1 1 0 001.42-1.42L13.41 12l4.9-4.89a1 1 0 000-1.4z" }) }));
+    if (align === 'center') {
+        const iconBox = {
+            position: 'absolute',
+            left: 16,
+            top: '50%',
+            transform: 'translateY(-50%)',
+            width: 32,
+            height: 32,
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            fontSize: '1.25rem',
+            lineHeight: 0
+        };
+        const closeBox = {
+            position: 'absolute',
+            right: 16,
+            top: '50%',
+            transform: 'translateY(-50%)',
+            width: 32,
+            height: 32,
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            background: 'transparent',
+            border: 'none',
+            padding: 0,
+            cursor: 'pointer',
+            lineHeight: 0
+        };
+        return (jsxRuntimeExports.jsxs("div", { className: "mds-modal-header", style: {
+                position: 'relative',
+                padding: '16px 24px',
+                marginBottom: 16,
+                borderBottom: '1px solid var(--border-color)'
+            }, children: [icon && (jsxRuntimeExports.jsx("div", { "aria-hidden": true, style: iconBox, children: icon })), jsxRuntimeExports.jsx("div", { style: { textAlign: 'center' }, children: typeof title === 'string' ? (jsxRuntimeExports.jsx("h3", { style: { margin: 0 }, children: title })) : (title) }), onClose && (jsxRuntimeExports.jsx("button", { type: "button", "aria-label": closeAriaLabel, onClick: onClose, style: closeBox, children: CloseIcon }))] }));
+    }
+    return (jsxRuntimeExports.jsxs("div", { className: "mds-modal-header", style: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: 12,
+            padding: '16px 24px',
+            marginBottom: 16,
+            borderBottom: '1px solid var(--border-color)'
+        }, children: [icon && (jsxRuntimeExports.jsx("div", { "aria-hidden": true, style: { display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 32, height: 32, fontSize: '1.25rem', lineHeight: 0 }, children: icon })), jsxRuntimeExports.jsx("div", { style: { margin: 0, fontSize: '1.125rem', fontWeight: 600, flex: 1 }, children: typeof title === 'string' ? (jsxRuntimeExports.jsx("h3", { style: { margin: 0 }, children: title })) : (title) }), onClose && (jsxRuntimeExports.jsx("button", { type: "button", "aria-label": closeAriaLabel, onClick: onClose, style: { marginLeft: 'auto', background: 'transparent', border: 'none', width: 32, height: 32, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', lineHeight: 0 }, children: CloseIcon }))] }));
+}
+
+function ModalBody({ children, style, className }) {
+    return (jsxRuntimeExports.jsx("div", { className: className, style: { padding: '16px 24px', ...style }, children: children }));
+}
+
+function ModalFooter({ children, align = 'end' }) {
+    const justify = align === 'start' ? 'flex-start' : align === 'center' ? 'center' : 'flex-end';
+    return (jsxRuntimeExports.jsx("div", { style: { display: 'flex', gap: 12, justifyContent: justify, borderTop: '1px solid var(--border-color)', padding: '16px 24px', marginTop: 8 }, children: children }));
+}
+
+const IconWarning = (jsxRuntimeExports.jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": true, children: jsxRuntimeExports.jsx("path", { d: "M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" }) }));
+const IconDanger = (jsxRuntimeExports.jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": true, children: jsxRuntimeExports.jsx("path", { d: "M12 2a10 10 0 100 20 10 10 0 000-20zm-1 5h2v8h-2V7zm0 10h2v2h-2v-2z" }) }));
+const IconInfo = (jsxRuntimeExports.jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": true, children: jsxRuntimeExports.jsx("path", { d: "M11 9h2V7h-2v2zm0 8h2v-6h-2v6zm1-15a10 10 0 100 20 10 10 0 000-20z" }) }));
+const IconSuccess = (jsxRuntimeExports.jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": true, children: jsxRuntimeExports.jsx("path", { d: "M12 2a10 10 0 100 20 10 10 0 000-20zm-1 14l-4-4 1.41-1.41L11 12.17l4.59-4.58L17 9l-6 7z" }) }));
+const toneIcon = {
+    warning: IconWarning,
+    danger: IconDanger,
+    info: IconInfo,
+    success: IconSuccess
+};
+function ConfirmDialog({ open, onClose, title, description, confirmText = 'Confirmar', cancelText = 'Cancelar', onConfirm, loading = false, tone = 'warning', icon, disableOverlayClose }) {
+    return (jsxRuntimeExports.jsx(Modal, { open: open, onClose: onClose, closeOnOverlay: !disableOverlayClose, children: jsxRuntimeExports.jsxs("div", { className: "mds-modal-card", style: { maxWidth: 480, width: '100%' }, children: [jsxRuntimeExports.jsx(ModalHeader, { title: title, icon: icon ?? toneIcon[tone], onClose: onClose, align: "center" }), description && (jsxRuntimeExports.jsx("div", { style: { padding: '0 24px 16px 24px' }, children: description })), jsxRuntimeExports.jsxs("div", { style: { display: 'flex', gap: 12, justifyContent: 'flex-end', borderTop: '1px solid var(--border-color)', padding: '16px 24px', marginTop: 8 }, children: [jsxRuntimeExports.jsx("button", { type: "button", onClick: onClose, className: "mds-button mds-button--secondary", children: cancelText }), jsxRuntimeExports.jsx("button", { type: "button", onClick: onConfirm, disabled: loading, className: "mds-button mds-button--primary", children: loading ? 'Processando...' : confirmText })] })] }) }));
+}
+
+export { ActionIcons, BrandLogo, Button, CellRenderers, ConfirmDialog, DataTable, GlassCard, Modal, ModalBody, ModalFooter, ModalHeader, Select, TableHeader, TableRow, ThemeToggle, Typography, auditLogTableConfig, citiesTableConfig, cn, countriesTableConfig, getTableConfig, parametersTableConfig, regionsTableConfig, statesTableConfig };
 //# sourceMappingURL=index.esm.js.map