@metropolle/design-system 1.2026.0-1.1.1728 → 1.2026.0-1.3.119

package/dist/react/index.esm.js

@@ -1385,14 +1385,26 @@ function cn(...classes) {
  * </GlassCard>
  * ```
  */
-const GlassCard = forwardRef(({ glassStyle = 'liquid', intensity = 'md', theme, variant = 'light', blur, 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') {
-        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 }));
+        // 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)
@@ -1827,36 +1839,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 }) => {
@@ -1894,10 +1913,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',
@@ -1911,18 +1929,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));
                 }) }))] }));
@@ -2022,7 +2036,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))) })] }));
@@ -2430,6 +2444,157 @@ 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
  *
@@ -2464,7 +2629,7 @@ function getStyles(isDark) {
             // Dark theme: subtle glass effect
             background: isDark
                 ? 'rgba(255, 255, 255, 0.03)'
-                : 'rgba(255, 255, 255, 0.55)',
+                : '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%))',
@@ -2549,6 +2714,160 @@ function Modal({ open, onClose, closeOnOverlay = true, children, className, styl
     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, children: cancelText }), jsxRuntimeExports.jsx(Button, { variant: "primary", size: "sm", type: "submit", disabled: loading || submitDisabled, children: loading ? 'Saving...' : 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') {
@@ -2563,7 +2882,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',
@@ -2595,7 +2915,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 }) {
@@ -2621,5 +2941,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, Select, TableHeader, TableRow, ThemeToggle, Typography, auditLogTableConfig, citiesTableConfig, cn, countriesTableConfig, getTableConfig, parametersTableConfig, regionsTableConfig, statesTableConfig };
 //# sourceMappingURL=index.esm.js.map