@metropolle/design-system 1.2025.1-2.5.1903 → 1.2026.0-1.10.2344

package/dist/react/index.esm.js

@@ -1,4 +1,4 @@
-import require$$0, { forwardRef, useState, useEffect, useMemo, useRef } from 'react';
+import require$$0, { forwardRef, useState, useRef, useEffect, useMemo, useCallback } from 'react';
 import { createPortal } from 'react-dom';
 
 var jsxRuntime = {exports: {}};
@@ -1370,12 +1370,47 @@ 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, cardVariant = 'default', style, ...props }, ref) => {
+    // Resolve theme from new prop or deprecated variant
+    const resolvedTheme = theme ?? variant;
+    // =====================
+    // LIQUID GLASS MODE
+    // =====================
+    if (glassStyle === 'liquid') {
+        // PROC-007: Card variant styles
+        const variantStyles = {
+            default: {},
+            highlight: {
+                borderLeft: '4px solid var(--mds-color-brand-primary, #0055FF)',
+                boxShadow: '0 4px 20px rgba(0, 85, 255, 0.15)'
+            },
+            subtle: {
+                background: 'rgba(255, 255, 255, 0.02)',
+                border: '1px solid rgba(255, 255, 255, 0.05)'
+            }
+        };
+        return (jsxRuntimeExports.jsx("div", { ref: ref, className: cn('mds-liquid-glass', `mds-liquid-glass--${intensity}`, `mds-liquid-glass--${cardVariant}`, !enableHover && 'mds-liquid-glass--no-hover', className), style: { ...variantStyles[cardVariant], ...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 = {
@@ -1383,12 +1418,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})`;
     }
@@ -1403,7 +1442,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;
@@ -1421,7 +1460,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
@@ -1429,6 +1468,125 @@ const GlassCard = forwardRef(({ variant = 'light', blur = 20, opacity, children,
 });
 GlassCard.displayName = 'GlassCard';
 
+// Default placeholder avatar - adapts to theme with high transparency
+const getPlaceholderAvatar = (isDark) => {
+    const bgColor = isDark ? 'rgba(26, 26, 46, 0.15)' : 'rgba(255, 255, 255, 0.1)';
+    const fgColor = isDark ? 'rgba(255, 255, 255, 0.08)' : 'rgba(0, 0, 0, 0.06)';
+    return 'data:image/svg+xml,' + encodeURIComponent(`
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" fill="none">
+  <rect width="200" height="200" fill="${bgColor}"/>
+  <circle cx="100" cy="80" r="40" fill="${fgColor}"/>
+  <ellipse cx="100" cy="180" rx="60" ry="50" fill="${fgColor}"/>
+</svg>
+`);
+};
+// =============================================================================
+// Icons
+// =============================================================================
+const Icons = {
+    shield: (jsxRuntimeExports.jsx("svg", { viewBox: "0 0 24 24", children: jsxRuntimeExports.jsx("path", { d: "M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-2 16l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z", fill: "currentColor" }) })),
+    plus: (jsxRuntimeExports.jsx("svg", { viewBox: "0 0 24 24", children: jsxRuntimeExports.jsx("path", { d: "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z", fill: "currentColor" }) })),
+    instagram: jsxRuntimeExports.jsx("path", { d: "M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z" }),
+    x: jsxRuntimeExports.jsx("path", { d: "M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" }),
+    linkedin: jsxRuntimeExports.jsx("path", { d: "M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" }),
+    website: jsxRuntimeExports.jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z" }),
+};
+function SocialLink({ href, title, icon }) {
+    const iconPath = Icons[icon];
+    if (!iconPath || typeof iconPath === 'object')
+        return null;
+    return (jsxRuntimeExports.jsx("a", { href: href, className: "mds-profile-card__social-link", title: title, target: "_blank", rel: "noopener noreferrer", children: jsxRuntimeExports.jsx("svg", { viewBox: "0 0 24 24", children: iconPath }) }));
+}
+function StatItem({ label, verified }) {
+    return (jsxRuntimeExports.jsxs("div", { className: "mds-profile-card__stat-item", children: [jsxRuntimeExports.jsx("span", { className: "mds-profile-card__stat-label", children: label }), jsxRuntimeExports.jsx("span", { className: `mds-profile-card__stat-value ${verified ? 'mds-profile-card__stat-value--verified' : ''}`, children: verified ? 'Verified' : 'Not Verified' })] }));
+}
+// =============================================================================
+// Main Component
+// =============================================================================
+function ProfileCard({ user, variant = 'full', photoWidth, showSocial = false, socialLinks, showRotatingInfo = false, photoSlot, className = '', onSocialClick, }) {
+    const [showVerifiedPopup, setShowVerifiedPopup] = useState(false);
+    const [showSocialPopup, setShowSocialPopup] = useState(false);
+    const [currentInfoIndex, setCurrentInfoIndex] = useState(0);
+    const [isDarkTheme, setIsDarkTheme] = useState(true);
+    const verifiedRef = useRef(null);
+    const socialRef = useRef(null);
+    // Calculate photo width based on variant
+    const computedPhotoWidth = photoWidth ?? (variant === 'full' ? 280 : 200);
+    // Detect theme
+    useEffect(() => {
+        const checkTheme = () => {
+            const theme = document.documentElement.getAttribute('data-theme');
+            setIsDarkTheme(theme !== 'light');
+        };
+        checkTheme();
+        const observer = new MutationObserver((mutations) => {
+            mutations.forEach((mutation) => {
+                if (mutation.attributeName === 'data-theme') {
+                    checkTheme();
+                }
+            });
+        });
+        observer.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] });
+        return () => observer.disconnect();
+    }, []);
+    // Dynamic info texts for rotating display
+    const infoTexts = [
+        `Member since ${new Date(user.created_at).getFullYear()}`,
+        ...(user.verified >= 1 ? ['Email Verified'] : []),
+        ...(user.verified >= 2 ? ['Identity Verified'] : []),
+        ...(user.verified >= 3 ? ['Professional Verified'] : []),
+    ];
+    // Rotate info text
+    useEffect(() => {
+        if (!showRotatingInfo)
+            return;
+        const interval = setInterval(() => {
+            setCurrentInfoIndex((prev) => (prev + 1) % infoTexts.length);
+        }, 10000);
+        return () => clearInterval(interval);
+    }, [infoTexts.length, showRotatingInfo]);
+    // Close popups on click outside
+    useEffect(() => {
+        const handleClickOutside = (e) => {
+            if (verifiedRef.current && !verifiedRef.current.contains(e.target)) {
+                setShowVerifiedPopup(false);
+            }
+            if (socialRef.current && !socialRef.current.contains(e.target)) {
+                setShowSocialPopup(false);
+            }
+        };
+        document.addEventListener('click', handleClickOutside);
+        return () => document.removeEventListener('click', handleClickOutside);
+    }, []);
+    // Get display values
+    const displayName = user.full_name || user.username || 'User';
+    const profession = user.profession_name || user.profession_code || '';
+    const getLocation = () => {
+        if (!user.city_code && !user.state_code && !user.country_code)
+            return null;
+        const city = user.city_name || user.city_code?.toUpperCase() || '';
+        const state = user.state_code?.toUpperCase() || '';
+        const country = user.country_name || user.country_code?.toUpperCase() || '';
+        const parts = [city, state, country].filter(Boolean);
+        return parts.join(', ');
+    };
+    const memberSince = new Date(user.created_at).getFullYear().toString();
+    const photoUrl = user.photo_url_medium || user.photo_url_full || getPlaceholderAvatar(isDarkTheme);
+    return (jsxRuntimeExports.jsxs("article", { className: `mds-profile-card ${className}`, style: { '--mds-profile-card-photo-width': `${computedPhotoWidth}px` }, children: [jsxRuntimeExports.jsx("div", { className: "mds-profile-card__grain" }), jsxRuntimeExports.jsx("div", { className: "mds-profile-card__photo", children: photoSlot ? (jsxRuntimeExports.jsx("div", { className: "mds-profile-card__photo-slot", children: photoSlot })) : (jsxRuntimeExports.jsx("img", { src: photoUrl, alt: displayName, className: "mds-profile-card__avatar" })) }), jsxRuntimeExports.jsxs("div", { className: "mds-profile-card__content", children: [jsxRuntimeExports.jsxs("div", { className: "mds-profile-card__identity", children: [jsxRuntimeExports.jsx("h1", { className: "mds-profile-card__name", children: displayName.toUpperCase() }), variant === 'full' && profession && (jsxRuntimeExports.jsx("p", { className: "mds-profile-card__profession", children: profession.toUpperCase() })), variant === 'compact' && (jsxRuntimeExports.jsx("p", { className: "mds-profile-card__username", children: user.username }))] }), jsxRuntimeExports.jsxs("div", { className: "mds-profile-card__details", children: [variant === 'full' && getLocation() && (jsxRuntimeExports.jsx("p", { className: "mds-profile-card__location", children: getLocation() })), variant === 'full' && (jsxRuntimeExports.jsx("span", { className: "mds-profile-card__username-detail", children: user.username })), variant === 'compact' && user.email && (jsxRuntimeExports.jsx("p", { className: "mds-profile-card__email", children: user.email })), variant === 'compact' && (jsxRuntimeExports.jsxs("span", { className: "mds-profile-card__member", children: ["Member since ", memberSince] }))] }), variant === 'compact' && (jsxRuntimeExports.jsxs("div", { className: "mds-profile-card__verification", children: [jsxRuntimeExports.jsxs("button", { className: "mds-profile-card__verified-badge", title: `Verification Level ${user.verified}`, onClick: (e) => {
+                                    e.stopPropagation();
+                                    setShowVerifiedPopup(!showVerifiedPopup);
+                                }, children: [Icons.shield, jsxRuntimeExports.jsxs("span", { children: ["Level ", user.verified] })] }), jsxRuntimeExports.jsxs("div", { className: "mds-profile-card__dots", children: [jsxRuntimeExports.jsx("span", { className: `mds-profile-card__dot ${user.verified >= 1 ? 'active' : ''}`, title: "Email Verified" }), jsxRuntimeExports.jsx("span", { className: `mds-profile-card__dot ${user.verified >= 2 ? 'active' : ''}`, title: "Identity Verified" }), jsxRuntimeExports.jsx("span", { className: `mds-profile-card__dot ${user.verified >= 3 ? 'active' : ''}`, title: "Professional Verified" })] })] })), showSocial && (jsxRuntimeExports.jsxs("div", { ref: socialRef, className: "mds-profile-card__social", children: [jsxRuntimeExports.jsx("button", { className: "mds-profile-card__social-trigger", onClick: (e) => {
+                                    e.stopPropagation();
+                                    setShowSocialPopup(!showSocialPopup);
+                                    setShowVerifiedPopup(false);
+                                    onSocialClick?.();
+                                }, "aria-label": "Show social links", children: Icons.plus }), showSocialPopup && socialLinks && (jsxRuntimeExports.jsxs("div", { className: "mds-profile-card__social-popup", children: [socialLinks.instagram && jsxRuntimeExports.jsx(SocialLink, { href: socialLinks.instagram, title: "Instagram", icon: "instagram" }), socialLinks.x && jsxRuntimeExports.jsx(SocialLink, { href: socialLinks.x, title: "X", icon: "x" }), socialLinks.linkedin && jsxRuntimeExports.jsx(SocialLink, { href: socialLinks.linkedin, title: "LinkedIn", icon: "linkedin" }), socialLinks.website && jsxRuntimeExports.jsx(SocialLink, { href: socialLinks.website, title: "Website", icon: "website" })] }))] })), variant === 'full' && (jsxRuntimeExports.jsxs("div", { className: "mds-profile-card__dynamic-group", children: [showRotatingInfo && (jsxRuntimeExports.jsx("span", { className: "mds-profile-card__dynamic-info", children: infoTexts[currentInfoIndex] })), jsxRuntimeExports.jsxs("div", { ref: verifiedRef, className: "mds-profile-card__verified-section", children: [jsxRuntimeExports.jsx("button", { className: "mds-profile-card__verified-trigger", onClick: (e) => {
+                                            e.stopPropagation();
+                                            setShowVerifiedPopup(!showVerifiedPopup);
+                                            setShowSocialPopup(false);
+                                        }, title: "Verification Status", children: Icons.shield }), showVerifiedPopup && (jsxRuntimeExports.jsxs("div", { className: "mds-profile-card__verified-popup", children: [jsxRuntimeExports.jsxs("div", { className: "mds-profile-card__verified-header", children: ["Verification Level ", user.verified] }), jsxRuntimeExports.jsxs("div", { className: "mds-profile-card__verified-stats", children: [jsxRuntimeExports.jsx(StatItem, { label: "Email", verified: user.verified >= 1 }), jsxRuntimeExports.jsx(StatItem, { label: "Identity", verified: user.verified >= 2 }), jsxRuntimeExports.jsx(StatItem, { label: "Professional", verified: user.verified >= 3 })] }), jsxRuntimeExports.jsxs("div", { className: "mds-profile-card__verified-date", children: ["Since ", memberSince] })] }))] }), showRotatingInfo && (jsxRuntimeExports.jsx("div", { className: "mds-profile-card__info-dots", children: infoTexts.map((_, index) => (jsxRuntimeExports.jsx("span", { className: `mds-profile-card__info-dot ${index === currentInfoIndex ? 'active' : ''}` }, index))) }))] }))] })] }));
+}
+
 const variantElementMap = {
     h1: 'h1',
     h2: 'h2',
@@ -1493,22 +1651,241 @@ const LoadingSpinner = () => (jsxRuntimeExports.jsxs("svg", { className: "mds-sp
 /**
  * Select Component (Design System)
  *
- * Provides a themed select element with multiple variants:
- * - `base`: Standard form select with mds-input styling
- * - `themed`: Generic themed select with dashboard control styling (recommended)
- * - `dashboard`: Legacy alias for themed variant (backward compatibility)
+ * 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, children, className, containerClassName, variant = 'themed', ...rest }, ref) => {
-    const isThemed = variant === 'themed' || variant === 'dashboard';
-    const selectEl = (jsxRuntimeExports.jsx("select", { ref: ref, className: cn(isThemed
-            ? 'mds-select-themed'
-            : 'mds-input mds-select', className), ...rest, children: options
-            ? options.map(opt => (jsxRuntimeExports.jsx("option", { value: opt.value, children: opt.label }, opt.value)))
-            : children }));
-    if (isThemed) {
-        return (jsxRuntimeExports.jsx("div", { className: cn('mds-dropdown', containerClassName), children: selectEl }));
-    }
-    return selectEl;
+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';
 
@@ -1581,36 +1958,43 @@ function ThemeToggle({ size = 'md', className = '', disabled = false, onChange,
     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: {
+const TableHeader = ({ columns, gridTemplate, onSort, sortColumn, sortDirection, hasActions = false }) => {
+    return (jsxRuntimeExports.jsxs("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))) }));
+        }, 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))), hasActions && (jsxRuntimeExports.jsx("div", { role: "columnheader", style: {
+                    color: 'var(--text-primary)',
+                    fontWeight: '500',
+                    fontSize: '14px',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center'
+                }, children: "Actions" }))] }));
 };
 
 const TableRow = ({ item, index, columns, actions = [], gridTemplate, isLast, variant, onActionClick }) => {
@@ -1648,10 +2032,9 @@ const TableRow = ({ item, index, columns, actions = [], gridTemplate, isLast, va
                     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)',
+                            border: 'none',
                             borderRadius: '6px',
-                            padding: '6px 12px',
+                            padding: '6px 8px',
                             color: action.variant === 'danger' ? '#f87171' : 'var(--text-primary)',
                             fontSize: '12px',
                             cursor: isDisabled || isLoading ? 'not-allowed' : 'pointer',
@@ -1665,18 +2048,14 @@ const TableRow = ({ item, index, columns, actions = [], gridTemplate, isLast, va
                             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));
                 }) }))] }));
@@ -1776,7 +2155,7 @@ const DataTable = ({ data, columns, loading = false, searchTerm = '', actions =
                     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: {
+                }, 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, hasActions: actions.length > 0 }), 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))) })] }));
@@ -2184,12 +2563,233 @@ const getTableConfig = (type) => {
     }
 };
 
+/**
+ * FormField - Normalized wrapper for form inputs
+ *
+ * Pattern extracted from AdminUserModal.tsx (backoffice/users)
+ * Provides consistent label, error, and helper text styling
+ */
+function FormField({ label, required = false, error, helper, disabled = false, children, className = '' }) {
+    return (jsxRuntimeExports.jsxs("div", { className: `mds-form-field ${className}`, style: { opacity: disabled ? 0.6 : 1 }, children: [jsxRuntimeExports.jsxs("label", { style: {
+                    display: 'block',
+                    marginBottom: '6px',
+                    color: 'var(--mds-color-text-primary, var(--text-primary))',
+                    fontSize: '0.9rem',
+                    fontWeight: 500
+                }, children: [label, required && (jsxRuntimeExports.jsx("span", { style: { color: 'var(--mds-color-error, #ef4444)', marginLeft: '4px' }, children: "*" }))] }), children, error && (jsxRuntimeExports.jsx("span", { style: {
+                    color: 'var(--mds-color-error, #ef4444)',
+                    fontSize: '0.8rem',
+                    marginTop: '4px',
+                    display: 'block'
+                }, children: error })), helper && !error && (jsxRuntimeExports.jsx("span", { style: {
+                    color: 'var(--mds-color-text-secondary, var(--text-secondary))',
+                    fontSize: '0.75rem',
+                    marginTop: '4px',
+                    display: 'block'
+                }, children: helper }))] }));
+}
+
+const gapValues = {
+    sm: '12px',
+    md: '16px',
+    lg: '24px'
+};
+/**
+ * FormGrid - Normalized grid layout for form fields
+ *
+ * Pattern extracted from AdminUserModal.tsx (backoffice/users)
+ * Provides consistent 1 or 2 column layouts with proper gap
+ */
+function FormGrid({ columns = 1, gap = 'md', children, className = '' }) {
+    return (jsxRuntimeExports.jsx("div", { className: `mds-form-grid ${className}`, style: {
+            display: 'grid',
+            gridTemplateColumns: columns === 2 ? 'repeat(2, 1fr)' : '1fr',
+            gap: gapValues[gap]
+        }, children: children }));
+}
+
+/**
+ * FormSection - Normalized section wrapper for grouping form fields
+ *
+ * Pattern extracted from AdminUserModal.tsx (backoffice/users)
+ * Provides consistent section headers and spacing
+ */
+function FormSection({ title, description, children, className = '' }) {
+    return (jsxRuntimeExports.jsxs("div", { className: `mds-form-section ${className}`, style: {
+            marginBottom: '24px'
+        }, children: [title && (jsxRuntimeExports.jsx("h4", { style: {
+                    margin: '0 0 8px 0',
+                    color: 'var(--mds-color-text-primary, var(--text-primary))',
+                    fontSize: '1rem',
+                    fontWeight: 600,
+                    letterSpacing: '-0.02em'
+                }, children: title })), description && (jsxRuntimeExports.jsx("p", { style: {
+                    margin: '0 0 16px 0',
+                    color: 'var(--mds-color-text-secondary, var(--text-secondary))',
+                    fontSize: '0.85rem',
+                    lineHeight: 1.5
+                }, children: description })), jsxRuntimeExports.jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: '16px' }, children: children })] }));
+}
+
+const variantColors = {
+    default: {
+        bg: 'rgba(255, 255, 255, 0.03)',
+        border: 'rgba(255, 255, 255, 0.1)',
+        accent: 'var(--mds-color-text-secondary, #888)'
+    },
+    info: {
+        bg: 'rgba(59, 130, 246, 0.1)',
+        border: 'rgba(59, 130, 246, 0.2)',
+        accent: 'var(--mds-color-info, #3b82f6)'
+    },
+    success: {
+        bg: 'rgba(16, 185, 129, 0.1)',
+        border: 'rgba(16, 185, 129, 0.2)',
+        accent: 'var(--mds-color-success, #10b981)'
+    },
+    warning: {
+        bg: 'rgba(245, 158, 11, 0.1)',
+        border: 'rgba(245, 158, 11, 0.2)',
+        accent: 'var(--mds-color-warning, #f59e0b)'
+    },
+    danger: {
+        bg: 'rgba(239, 68, 68, 0.1)',
+        border: 'rgba(239, 68, 68, 0.2)',
+        accent: 'var(--mds-color-error, #ef4444)'
+    }
+};
+/**
+ * InfoBox - Normalized info/alert box for read-only information
+ *
+ * Pattern extracted from AdminUserModal.tsx (backoffice/users)
+ * Provides consistent info boxes for alerts, status displays, and read-only data
+ *
+ * @example
+ * // Alert style (with accent)
+ * <InfoBox variant="info" accent>
+ *   An invitation email will be sent...
+ * </InfoBox>
+ *
+ * @example
+ * // Status display (default)
+ * <InfoBox title="User Information">
+ *   <InfoRow label="Status" value="Active" />
+ *   <InfoRow label="Created" value="Jan 1, 2024" />
+ * </InfoBox>
+ */
+function InfoBox({ title, variant = 'default', accent = false, copyable = false, children, className = '' }) {
+    const colors = variantColors[variant];
+    const handleCopy = () => {
+        if (!copyable)
+            return;
+        const text = typeof children === 'string' ? children : '';
+        if (text) {
+            navigator.clipboard.writeText(text);
+        }
+    };
+    return (jsxRuntimeExports.jsxs("div", { className: `mds-info-box ${className}`, style: {
+            padding: '12px 16px',
+            backgroundColor: colors.bg,
+            borderRadius: '8px',
+            border: `1px solid ${colors.border}`,
+            borderLeft: accent ? `4px solid ${colors.accent}` : `1px solid ${colors.border}`,
+            cursor: copyable ? 'pointer' : 'default'
+        }, onClick: copyable ? handleCopy : undefined, title: copyable ? 'Click to copy' : undefined, children: [title && (jsxRuntimeExports.jsx("div", { style: {
+                    color: 'var(--mds-color-text-secondary, var(--text-secondary))',
+                    fontSize: '0.85rem',
+                    marginBottom: '8px',
+                    fontWeight: 500
+                }, children: title })), jsxRuntimeExports.jsx("div", { style: {
+                    color: 'var(--mds-color-text-primary, var(--text-primary))',
+                    fontSize: '0.9rem',
+                    lineHeight: 1.5
+                }, children: children })] }));
+}
+function InfoRow({ label, value, valueColor }) {
+    return (jsxRuntimeExports.jsxs("div", { style: {
+            display: 'flex',
+            justifyContent: 'space-between',
+            fontSize: '0.85rem',
+            padding: '2px 0'
+        }, children: [jsxRuntimeExports.jsxs("span", { style: { color: 'var(--mds-color-text-secondary, var(--text-secondary))' }, children: [label, ":"] }), jsxRuntimeExports.jsx("span", { style: { color: valueColor || 'var(--mds-color-text-primary, var(--text-primary))' }, children: value })] }));
+}
+
+/**
+ * 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.45)',
+            // 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;
@@ -2215,30 +2815,178 @@ function Modal({ open, onClose, closeOnOverlay = true, children, className, styl
     }, [open, onClose]);
     if (!mounted || (!renderPortal && !open))
         return null;
+    // Get theme-aware styles (same pattern as ProfileCard)
+    const styles = getStyles(isDarkTheme);
     const overlayStyle = {
-        position: 'fixed',
-        inset: 0,
-        backgroundColor: 'rgba(0, 0, 0, 0.7)',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        zIndex: 1000,
-        padding: '16px',
+        ...styles.overlay,
         opacity: visible ? 1 : 0,
-        transition: 'opacity 200ms ease'
+        transition: 'opacity 200ms ease',
     };
-    const innerStyle = {
-        maxWidth: '640px',
-        width: '100%',
-        transform: visible ? 'scale(1)' : 'scale(0.98)',
+    const cardStyle = {
+        ...styles.card,
+        transform: visible ? 'scale(1)' : 'scale(0.96)',
         opacity: visible ? 1 : 0,
-        transition: 'opacity 200ms ease, transform 200ms ease',
-        ...style
+        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: innerStyle, onClick: (e) => e.stopPropagation(), ref: (el) => (containerRef.current = el), children: children }) }));
+    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);
 }
 
+const sizeMap$1 = {
+    sm: '400px',
+    md: '480px',
+    lg: '600px',
+    xl: '800px'
+};
+/**
+ * FormModal - Normalized template for CRUD modal forms
+ *
+ * Pattern extracted from AdminUserModal.tsx (backoffice/users)
+ * Provides consistent structure for create/edit entity modals
+ *
+ * @example
+ * <FormModal
+ *   open={showModal}
+ *   onClose={() => setShowModal(false)}
+ *   onSubmit={handleSubmit}
+ *   title="Edit User"
+ *   info="Changes will be saved immediately."
+ *   infoVariant="info"
+ *   loading={isSaving}
+ *   submitText="Save"
+ * >
+ *   <FormField label="Name" required error={errors.name}>
+ *     <input className="mds-input" value={name} onChange={...} />
+ *   </FormField>
+ * </FormModal>
+ */
+function FormModal({ open, onClose, onSubmit, title, icon, subtitle, info, infoVariant = 'info', children, submitText = 'Save', cancelText = 'Cancel', loading = false, submitDisabled = false, size = 'md', className = '' }) {
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        onSubmit(e);
+    };
+    return (jsxRuntimeExports.jsxs(Modal, { open: open, onClose: onClose, closeOnOverlay: !loading, className: className, style: {
+            maxWidth: sizeMap$1[size],
+            maxHeight: '90vh',
+            overflowY: 'auto',
+            padding: '24px'
+        }, children: [jsxRuntimeExports.jsxs("div", { style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    marginBottom: subtitle ? '8px' : '24px'
+                }, children: [jsxRuntimeExports.jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '12px' }, children: [icon && (jsxRuntimeExports.jsx("div", { style: {
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    justifyContent: 'center',
+                                    width: 32,
+                                    height: 32,
+                                    fontSize: '1.25rem',
+                                    lineHeight: 0,
+                                    opacity: 0.5
+                                }, children: icon })), jsxRuntimeExports.jsx(Typography, { variant: "h3", color: "primary", style: { margin: 0 }, children: title })] }), jsxRuntimeExports.jsx("button", { type: "button", onClick: onClose, disabled: loading, style: {
+                            background: 'none',
+                            border: 'none',
+                            padding: '8px',
+                            cursor: loading ? 'not-allowed' : 'pointer',
+                            color: 'var(--mds-color-text-secondary)',
+                            opacity: loading ? 0.5 : 1,
+                            borderRadius: '6px',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            transition: 'all 0.2s ease'
+                        }, onMouseEnter: (e) => {
+                            if (!loading)
+                                e.currentTarget.style.backgroundColor = 'rgba(255, 255, 255, 0.1)';
+                        }, onMouseLeave: (e) => {
+                            e.currentTarget.style.backgroundColor = 'transparent';
+                        }, "aria-label": "Close modal", children: jsxRuntimeExports.jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsxRuntimeExports.jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), jsxRuntimeExports.jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] }) })] }), subtitle && (jsxRuntimeExports.jsx(Typography, { variant: "body", color: "secondary", style: { marginBottom: '24px', fontSize: '0.9rem' }, children: subtitle })), info && (jsxRuntimeExports.jsx("div", { style: { marginBottom: '20px' }, children: jsxRuntimeExports.jsx(InfoBox, { variant: infoVariant, accent: true, children: info }) })), jsxRuntimeExports.jsxs("form", { onSubmit: handleSubmit, style: { display: 'flex', flexDirection: 'column', gap: '16px' }, children: [children, jsxRuntimeExports.jsxs("div", { style: {
+                            display: 'flex',
+                            gap: '12px',
+                            justifyContent: 'flex-end',
+                            marginTop: '16px',
+                            paddingTop: '16px',
+                            borderTop: '1px solid rgba(255, 255, 255, 0.1)'
+                        }, children: [jsxRuntimeExports.jsx(Button, { variant: "secondary", size: "sm", type: "button", onClick: onClose, disabled: loading, style: { minWidth: '90px' }, children: cancelText }), jsxRuntimeExports.jsx(Button, { variant: "primary", size: "sm", type: "submit", loading: loading, disabled: loading || submitDisabled, style: { minWidth: '110px' }, children: submitText })] })] })] }));
+}
+
+const sizeMap = {
+    sm: '400px',
+    md: '480px',
+    lg: '600px',
+    xl: '800px'
+};
+/**
+ * DetailModal - Normalized template for read-only detail modals
+ *
+ * Pattern extracted from GeographyDetailsModal, AuditLogDetailModal (backoffice)
+ * Provides consistent structure for viewing entity details
+ *
+ * @example
+ * <DetailModal
+ *   open={showDetails}
+ *   onClose={() => setShowDetails(false)}
+ *   title="User Details"
+ *   subtitle="Created on Jan 1, 2024"
+ *   action={{
+ *     label: 'Edit',
+ *     onClick: handleEdit,
+ *     variant: 'primary'
+ *   }}
+ * >
+ *   <InfoBox title="Basic Information">
+ *     <InfoRow label="Name" value={user.name} />
+ *     <InfoRow label="Email" value={user.email} />
+ *   </InfoBox>
+ * </DetailModal>
+ */
+function DetailModal({ open, onClose, title, icon, subtitle, children, closeText = 'Close', action, size = 'md', className = '' }) {
+    return (jsxRuntimeExports.jsxs(Modal, { open: open, onClose: onClose, closeOnOverlay: true, className: className, style: {
+            maxWidth: sizeMap[size],
+            maxHeight: '90vh',
+            overflowY: 'auto',
+            padding: '24px'
+        }, children: [jsxRuntimeExports.jsxs("div", { style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    marginBottom: subtitle ? '8px' : '24px'
+                }, children: [jsxRuntimeExports.jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '12px' }, children: [icon && (jsxRuntimeExports.jsx("div", { style: {
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    justifyContent: 'center',
+                                    width: 32,
+                                    height: 32,
+                                    fontSize: '1.25rem',
+                                    lineHeight: 0,
+                                    opacity: 0.5
+                                }, children: icon })), jsxRuntimeExports.jsx(Typography, { variant: "h3", color: "primary", style: { margin: 0 }, children: title })] }), jsxRuntimeExports.jsx("button", { type: "button", onClick: onClose, style: {
+                            background: 'none',
+                            border: 'none',
+                            padding: '8px',
+                            cursor: 'pointer',
+                            color: 'var(--mds-color-text-secondary)',
+                            borderRadius: '6px',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            transition: 'all 0.2s ease'
+                        }, onMouseEnter: (e) => {
+                            e.currentTarget.style.backgroundColor = 'rgba(255, 255, 255, 0.1)';
+                        }, onMouseLeave: (e) => {
+                            e.currentTarget.style.backgroundColor = 'transparent';
+                        }, "aria-label": "Close modal", children: jsxRuntimeExports.jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsxRuntimeExports.jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), jsxRuntimeExports.jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] }) })] }), subtitle && (jsxRuntimeExports.jsx(Typography, { variant: "body", color: "secondary", style: { marginBottom: '24px', fontSize: '0.9rem' }, children: subtitle })), jsxRuntimeExports.jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: '16px' }, children: children }), jsxRuntimeExports.jsxs("div", { style: {
+                    display: 'flex',
+                    gap: '12px',
+                    justifyContent: 'flex-end',
+                    marginTop: '24px',
+                    paddingTop: '16px',
+                    borderTop: '1px solid rgba(255, 255, 255, 0.1)'
+                }, children: [jsxRuntimeExports.jsx(Button, { variant: "secondary", size: "sm", onClick: onClose, children: closeText }), action && (jsxRuntimeExports.jsx(Button, { variant: action.variant || 'primary', size: "sm", onClick: action.onClick, disabled: action.disabled, children: action.label }))] })] }));
+}
+
 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') {
@@ -2253,7 +3001,8 @@ function ModalHeader({ title, icon, onClose, closeAriaLabel = 'Fechar', align =
             alignItems: 'center',
             justifyContent: 'center',
             fontSize: '1.25rem',
-            lineHeight: 0
+            lineHeight: 0,
+            opacity: 0.5
         };
         const closeBox = {
             position: 'absolute',
@@ -2285,7 +3034,7 @@ function ModalHeader({ title, icon, onClose, closeAriaLabel = 'Fechar', align =
             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 }))] }));
+        }, 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, opacity: 0.5 }, 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 }) {
@@ -2311,5 +3060,5 @@ function ConfirmDialog({ open, onClose, title, description, confirmText = 'Confi
     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 };
+export { ActionIcons, BrandLogo, Button, CellRenderers, ConfirmDialog, DataTable, DetailModal, FormField, FormGrid, FormModal, FormSection, GlassCard, InfoBox, InfoRow, Modal, ModalBody, ModalFooter, ModalHeader, ProfileCard, Select, TableHeader, TableRow, ThemeToggle, Typography, auditLogTableConfig, citiesTableConfig, cn, countriesTableConfig, getTableConfig, parametersTableConfig, regionsTableConfig, statesTableConfig };
 //# sourceMappingURL=index.esm.js.map