karsten-design-system 1.2.52 → 1.2.53

package/dist/index.js

@@ -302,10 +302,43 @@ function ExpandablePanel({ title, children, defaultOpen = true, }) {
     return (jsx("div", { className: "relative p-[2px] rounded-lg mb-4", children: jsxs("div", { className: "rounded-lg overflow-hidden border shadow-container\n                      bg-light-500 border-light-600 text-primary\n                      dark:bg-dark-100 dark:border-dark-500 dark:shadow-dark-400 dark:text-light-500", children: [jsxs("div", { className: "flex justify-between items-center px-4 py-2 cursor-pointer\n                     bg-gradient-to-r from-[#f3f4f6] to-light-500\n                     dark:from-dark-300 dark:to-dark-100 dark:border-dark-400", onClick: () => setIsOpen(!isOpen), children: [jsx("div", { className: "text-xl font-bold", children: title }), jsx("button", { children: jsx("i", { className: `pi ${isOpen ? 'pi-chevron-down' : 'pi-chevron-up'} text-primary dark:text-light-500` }) })] }), isOpen && jsx("div", { className: "p-4", children: children })] }) }));
 }
 
-function FileUpload({ label = 'Enviar arquivos', value = [], onChange, multiple = true, fileTypes, className, error, disabled = false, }) {
+function FileUpload({ label = 'Enviar arquivos', value = [], onChange, multiple = true, fileTypes, className, error, disabled = false, systemLanguage = 'pt', }) {
     const [isDragging, setIsDragging] = useState(false);
     const fileInputRef = useRef(null);
     const [uploadFiles, setUploadFiles] = useState(value);
+    const messages = {
+        pt: {
+            supportsImages: 'Suporta apenas imagens',
+            supportsPdf: 'Suporta apenas PDFs',
+            supportsBoth: 'Suporta imagens e PDFs',
+            limitReached: 'Limite atingido',
+            dragDrop: 'Arraste e solte os arquivos aqui',
+            alreadySelected: 'Já possui um arquivo selecionado',
+            orClick: 'ou clique para selecionar arquivos',
+            selectedFiles: 'Arquivos selecionados',
+        },
+        en: {
+            supportsImages: 'Supports only images',
+            supportsPdf: 'Supports only PDFs',
+            supportsBoth: 'Supports images and PDFs',
+            limitReached: 'Limit reached',
+            dragDrop: 'Drag and drop files here',
+            alreadySelected: 'File already selected',
+            orClick: 'or click to select files',
+            selectedFiles: 'Selected files',
+        },
+        es: {
+            supportsImages: 'Soporta solo imágenes',
+            supportsPdf: 'Soporta solo PDFs',
+            supportsBoth: 'Soporta imágenes y PDFs',
+            limitReached: 'Límite alcanzado',
+            dragDrop: 'Arrastra y suelta los archivos aquí',
+            alreadySelected: 'Ya hay un archivo seleccionado',
+            orClick: 'o haz clic para seleccionar archivos',
+            selectedFiles: 'Archivos seleccionados',
+        },
+    };
+    const lang = messages[systemLanguage || 'pt'];
     useEffect(() => {
         setUploadFiles(value);
     }, [value]);
@@ -358,11 +391,11 @@ function FileUpload({ label = 'Enviar arquivos', value = [], onChange, multiple
         const includesImage = types.includes('image');
         const includesPdf = types.includes('pdf');
         if (includesImage && includesPdf)
-            return 'Suporta imagens e PDFs';
+            return lang.supportsBoth;
         if (includesImage)
-            return 'Suporta apenas imagens';
+            return lang.supportsImages;
         if (includesPdf)
-            return 'Suporta apenas PDFs';
+            return lang.supportsPdf;
         return '';
     };
     const handleDragOver = (e) => {
@@ -384,9 +417,7 @@ function FileUpload({ label = 'Enviar arquivos', value = [], onChange, multiple
     const isDisabled = !multiple && visibleFiles.length > 0;
     return (jsxs("div", { className: clsx('space-y-3', className), children: [jsx("label", { htmlFor: "file-upload", className: "text-[18px] font-medium text-primary dark:text-light-500", children: label }), jsxs("div", { role: "button", "aria-label": "\u00C1rea de envio de arquivos", "aria-disabled": isDisabled || disabled, className: clsx('border-2 border-dashed rounded-lg p-2 text-center cursor-pointer transition-colors', isDragging && !error
                     ? 'border-primary bg-primary/5'
-                    : 'border-[#e6e6e6] hover:border-primary/50 dark:hover:border-light-500 dark:border-light-100', isDisabled || (disabled && 'bg-gray-200 cursor-auto'), error && 'border-red-500 hover:border-red-500'), onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, onClick: () => fileInputRef.current?.click(), children: [jsx("input", { id: "file-upload", ref: fileInputRef, type: "file", onChange: (e) => handleFileChange(e.target.files), className: "hidden", multiple: multiple, accept: getAcceptedMimeTypes(fileTypes), disabled: isDisabled || disabled }), jsxs("div", { className: "flex flex-col items-center justify-center space-y-3", children: [jsx("i", { className: "pi pi-upload text-xl text-[#a0a4b3]" }), jsx("p", { className: "text-lg font-semibold text-primary dark:text-light-500", children: isDisabled ? 'Limite atingido' : 'Arraste e solte arquivos aqui' }), jsx("p", { className: "text-sm text-[#a0a4b3]", children: isDisabled
-                                    ? 'Já possui um arquivo selecionado'
-                                    : 'ou clique para selecionar arquivos' }), jsx("p", { className: "text-xs text-[#a0a4b3]", children: getSupportedFileText(fileTypes) })] })] }), error && (jsx("span", { className: "text-redError text-xs", role: "alert", "aria-live": "assertive", children: error })), visibleFiles.length > 0 && (jsxs("div", { className: "space-y-4", children: [jsxs("p", { className: "text-base text-[#a0a4b3]", children: ["Arquivos selecionados (", visibleFiles.length, ")"] }), jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4", children: visibleFiles.map((file, index) => (jsxs("div", { className: "relative group overflow-hidden rounded border border-gray-200", children: [jsx("div", { className: "aspect-square bg-[#e6e6e6] flex items-center justify-center", children: file.type === 'image' && file.previewUrl ? (jsx("img", { src: file?.previewUrl, alt: file?.file?.name || file?.name, className: "object-cover w-full h-full transition-transform duration-300 ease-in-out group-hover:scale-105" })) : (jsxs("div", { className: "flex flex-col items-center justify-center p-4 transition-transform duration-300 ease-in-out group-hover:scale-105", children: [jsx("i", { className: "pi pi-file-pdf text-4xl text-primary" }), jsx("span", { className: "mt-2 text-xs text-center truncate max-w-full", children: file?.file?.name || file?.name })] })) }), jsx("button", { type: "button", className: "absolute top-1 right-1 w-6 h-6 flex items-center justify-center bg-primary hover:bg-primaryActive rounded-full transition-colors", onClick: (e) => {
+                    : 'border-[#e6e6e6] hover:border-primary/50 dark:hover:border-light-500 dark:border-light-100', isDisabled || (disabled && 'bg-gray-200 cursor-auto'), error && 'border-red-500 hover:border-red-500'), onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, onClick: () => fileInputRef.current?.click(), children: [jsx("input", { id: "file-upload", ref: fileInputRef, type: "file", onChange: (e) => handleFileChange(e.target.files), className: "hidden", multiple: multiple, accept: getAcceptedMimeTypes(fileTypes), disabled: isDisabled || disabled }), jsxs("div", { className: "flex flex-col items-center justify-center space-y-3", children: [jsx("i", { className: "pi pi-upload text-xl text-[#a0a4b3]" }), jsx("p", { className: "text-lg font-semibold text-primary dark:text-light-500", children: isDisabled ? lang.limitReached : lang.dragDrop }), jsx("p", { className: "text-sm text-[#a0a4b3]", children: isDisabled ? lang.alreadySelected : lang.orClick }), jsx("p", { className: "text-xs text-[#a0a4b3]", children: getSupportedFileText(fileTypes) })] })] }), error && (jsx("span", { className: "text-redError text-xs", role: "alert", "aria-live": "assertive", children: error })), visibleFiles.length > 0 && (jsxs("div", { className: "space-y-4", children: [jsxs("p", { className: "text-base text-[#a0a4b3]", children: [lang.selectedFiles, " (", visibleFiles.length, ")"] }), jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4", children: visibleFiles.map((file, index) => (jsxs("div", { className: "relative group overflow-hidden rounded border border-gray-200", children: [jsx("div", { className: "aspect-square bg-[#e6e6e6] flex items-center justify-center", children: file.type === 'image' && file.previewUrl ? (jsx("img", { src: file?.previewUrl, alt: file?.file?.name || file?.name, className: "object-cover w-full h-full transition-transform duration-300 ease-in-out group-hover:scale-105" })) : (jsxs("div", { className: "flex flex-col items-center justify-center p-4 transition-transform duration-300 ease-in-out group-hover:scale-105", children: [jsx("i", { className: "pi pi-file-pdf text-4xl text-primary" }), jsx("span", { className: "mt-2 text-xs text-center truncate max-w-full", children: file?.file?.name || file?.name })] })) }), jsx("button", { type: "button", className: "absolute top-1 right-1 w-6 h-6 flex items-center justify-center bg-primary hover:bg-primaryActive rounded-full transition-colors", onClick: (e) => {
                                         e.stopPropagation();
                                         handleRemoveFile(file);
                                     }, "aria-label": `Remover o arquivo ${file.file?.name || file.name}`, children: jsx("i", { className: "pi pi-times text-light-500 text-xs hover:text-slate-200" }) })] }, index))) })] }))] }));
@@ -789,7 +820,7 @@ function ModalForm({ isOpen, title, description, onClose, children, }) {
 }
 
 function MultiSelect(props) {
-    const { options, placeholder = 'Selecione uma opção', label = 'Opção', disabled = false, error, isLoading = false, isReadOnly = true, ariaLabel = 'Selecione uma ou mais opções', isLoadingOptions = false, } = props;
+    const { options, placeholder = 'Selecione uma opção', label = 'Opção', disabled = false, error, isLoading = false, isReadOnly = true, ariaLabel = 'Selecione uma ou mais opções', isLoadingOptions = false, systemLanguage = 'pt', } = props;
     const [isOpen, setIsOpen] = useState(false);
     const [visibleText, setVisibleText] = useState('');
     const [searchText, setSearchText] = useState('');
@@ -797,6 +828,24 @@ function MultiSelect(props) {
     const containerRef = useRef(null);
     const inputRef = useRef(null);
     const hasOnInputChange = props?.onInputChange !== undefined;
+    const messages = {
+        pt: {
+            loadingMessage: 'Carregando...',
+            typeToSearchMessage: 'Digite para buscar',
+            noResultsFoundMessage: 'Nenhum resultado encontrado',
+        },
+        en: {
+            loadingMessage: 'Loading...',
+            typeToSearchMessage: 'Type to search',
+            noResultsFoundMessage: 'No results found',
+        },
+        es: {
+            loadingMessage: 'Cargando...',
+            typeToSearchMessage: 'Escribe para buscar',
+            noResultsFoundMessage: 'No se encontraron resultados',
+        },
+    };
+    const lang = messages[systemLanguage || 'pt'];
     const normalize = (str) => str
         .normalize('NFD')
         .replace(/[\u0300-\u036f]/g, '')
@@ -896,7 +945,7 @@ function MultiSelect(props) {
         }
     }, [props.value]);
     return (jsxs("div", { ref: containerRef, className: "relative flex flex-col w-100", children: [jsxs("div", { className: "relative w-full cursor-pointer", onClick: toggleDropdown, children: [jsx(FloatingLabel, { value: selectedText(), label: label, disabled: isInputDisabled, error: error }), jsxs(IconField, { className: "w-full", children: [jsx(InputText, { ref: inputRef, placeholder: placeholder, type: "text", value: isLoading
-                                    ? 'Carregando...'
+                                    ? lang.loadingMessage
                                     : isOpen && !isReadOnly
                                         ? searchText
                                         : visibleText, onChange: (e) => {
@@ -935,8 +984,8 @@ function MultiSelect(props) {
                                     ? 'pi pi-spinner pi-spin'
                                     : isOpen
                                         ? 'pi pi-angle-up'
-                                        : 'pi pi-angle-down', 'text-light-700 px-2 flex items-center cursor-pointer', isInputDisabled && 'text-disabled', error && 'text-redError'), onClick: toggleDropdown })] })] }), isOpen && (jsx("div", { className: clsx('absolute w-full bg-light-500 border shadow-md z-40 rounded-md p-2 -bottom-1 translate-y-full dark:bg-dark-100', error ? 'border-redError' : 'border-light-700'), children: isLoadingOptions ? (jsxs("div", { className: "p-4 text-center text-light-700 flex items-center justify-center gap-2", children: ["Carregando", jsx("i", { className: "pi pi-spinner pi-spin" })] })) : props.onInputChange && searchText.length === 0 && !props.value ? (jsx("div", { className: "p-4 text-center text-light-700", children: "Digite para pesquisar" })) : filteredOptions.length > 0 ? (jsx("ul", { className: "max-h-60 overflow-y-auto", children: filteredOptions.map((option, index) => (jsxs("li", { onClick: () => handleSelect(option), className: clsx('p-2 flex justify-between items-center cursor-pointer', 'hover:bg-light-300 hover:font-bold dark:bg-dark-100 dark:text-light-500 dark:hover:bg-dark-400', index === highlightedIndex && 'bg-light-300 font-bold'), title: option.label, children: [jsx("span", { className: "truncate max-w-[calc(100%-20px)]", children: option.label }), jsx("input", { type: 'checkbox', checked: Array.isArray(props.value) &&
-                                    props.value.some((v) => v.value === option.value), onChange: () => handleSelect(option), className: clsx('appearance-none w-2 h-2 ring-1 ring-offset-2 ring-offset-light-500 ring-light-700 checked:bg-primary cursor-pointer rounded-md dark:bg-dark-100 dark:checked:bg-light-500 dark:checked:border-light-500 dark:ring-offset-dark-100 dark:ring-offset-2') })] }, option.value))) })) : (jsx("div", { className: "p-4 text-center text-light-700", children: "Nenhum resultado encontrado" })) })), hasError && jsx("span", { className: "text-redError text-xs px-2", children: error })] }));
+                                        : 'pi pi-angle-down', 'text-light-700 px-2 flex items-center cursor-pointer', isInputDisabled && 'text-disabled', error && 'text-redError'), onClick: toggleDropdown })] })] }), isOpen && (jsx("div", { className: clsx('absolute w-full bg-light-500 border shadow-md z-40 rounded-md p-2 -bottom-1 translate-y-full dark:bg-dark-100', error ? 'border-redError' : 'border-light-700'), children: isLoadingOptions ? (jsxs("div", { className: "p-4 text-center text-light-700 flex items-center justify-center gap-2", children: [lang.loadingMessage, jsx("i", { className: "pi pi-spinner pi-spin" })] })) : props.onInputChange && searchText.length === 0 && !props.value ? (jsx("div", { className: "p-4 text-center text-light-700", children: lang.typeToSearchMessage })) : filteredOptions.length > 0 ? (jsx("ul", { className: "max-h-60 overflow-y-auto", children: filteredOptions.map((option, index) => (jsxs("li", { onClick: () => handleSelect(option), className: clsx('p-2 flex justify-between items-center cursor-pointer', 'hover:bg-light-300 hover:font-bold dark:bg-dark-100 dark:text-light-500 dark:hover:bg-dark-400', index === highlightedIndex && 'bg-light-300 font-bold'), title: option.label, children: [jsx("span", { className: "truncate max-w-[calc(100%-20px)]", children: option.label }), jsx("input", { type: 'checkbox', checked: Array.isArray(props.value) &&
+                                    props.value.some((v) => v.value === option.value), onChange: () => handleSelect(option), className: clsx('appearance-none w-2 h-2 ring-1 ring-offset-2 ring-offset-light-500 ring-light-700 checked:bg-primary cursor-pointer rounded-md dark:bg-dark-100 dark:checked:bg-light-500 dark:checked:border-light-500 dark:ring-offset-dark-100 dark:ring-offset-2') })] }, option.value))) })) : (jsx("div", { className: "p-4 text-center text-light-700", children: lang.noResultsFoundMessage })) })), hasError && jsx("span", { className: "text-redError text-xs px-2", children: error })] }));
 }
 
 /**
@@ -4265,12 +4314,30 @@ function RadioButton({ label, value, checked, onChange, disabled = false, error
 }
 
 function Select(props) {
-    const { options, placeholder = 'Selecione uma opção', label = 'Opção', disabled = false, error, isLoading = false, isReadOnly = true, ariaLabel = 'Selecione uma opção', isLoadingOptions = false, } = props;
+    const { options, placeholder = 'Selecione uma opção', label = 'Opção', disabled = false, error, isLoading = false, isReadOnly = true, ariaLabel = 'Selecione uma opção', isLoadingOptions = false, systemLanguage = 'pt', } = props;
     const [isOpen, setIsOpen] = useState(false);
     const [searchText, setSearchText] = useState('');
     const [highlightedIndex, setHighlightedIndex] = useState(-1);
     const containerRef = useRef(null);
     const inputRef = useRef(null);
+    const messages = {
+        pt: {
+            loadingMessage: 'Carregando...',
+            typeToSearchMessage: 'Digite para buscar',
+            noResultsFoundMessage: 'Nenhum resultado encontrado',
+        },
+        en: {
+            loadingMessage: 'Loading...',
+            typeToSearchMessage: 'Type to search',
+            noResultsFoundMessage: 'No results found',
+        },
+        es: {
+            loadingMessage: 'Cargando...',
+            typeToSearchMessage: 'Escribe para buscar',
+            noResultsFoundMessage: 'No se encontraron resultados',
+        },
+    };
+    const lang = messages[systemLanguage || 'pt'];
     const hasOnInputChange = props?.onInputChange !== undefined;
     const normalize = (str) => str
         .normalize('NFD')
@@ -4353,7 +4420,7 @@ function Select(props) {
         };
     }, []);
     return (jsxs("div", { ref: containerRef, className: "relative flex flex-col w-100", children: [jsxs("div", { className: "relative w-full cursor-pointer", onClick: toggleDropdown, children: [jsx(FloatingLabel, { value: props.value ? props.value.label : '', label: label, disabled: isInputDisabled, error: error }), jsxs(IconField, { className: "w-full", children: [jsx(InputText, { ref: inputRef, placeholder: placeholder, type: "text", value: isLoading
-                                    ? 'Carregando...'
+                                    ? lang.loadingMessage
                                     : isOpen
                                         ? searchText
                                         : (props.value?.label ?? ''), onClick: toggleDropdown, onChange: (e) => {
@@ -4394,7 +4461,7 @@ function Select(props) {
                                     ? 'pi pi-spinner pi-spin'
                                     : isOpen
                                         ? 'pi pi-angle-up'
-                                        : 'pi pi-angle-down', 'text-light-700 px-2 flex items-center cursor-pointer', isInputDisabled && 'text-disabled', error && 'text-redError'), onClick: toggleDropdown })] })] }), isOpen && (jsx("div", { className: clsx('absolute w-full bg-light-500 border shadow-md z-40 rounded-md p-2 -bottom-1 translate-y-full dark:bg-dark-100', error ? 'border-redError' : 'border-light-700'), children: isLoadingOptions ? (jsxs("div", { className: "p-4 text-center text-light-700 flex items-center justify-center gap-2", children: ["Carregando", jsx("i", { className: "pi pi-spinner pi-spin" })] })) : props.onInputChange && searchText.length === 0 && !props.value ? (jsx("div", { className: "p-4 text-center text-light-700", children: "Digite para pesquisar" })) : filteredOptions.length > 0 ? (jsx("ul", { className: "max-h-60 overflow-y-auto", children: filteredOptions.map((option, index) => (jsxs("li", { onClick: () => handleSelect(option), className: clsx('p-2 flex justify-between items-center cursor-pointer', 'hover:bg-light-300 hover:font-bold dark:bg-dark-100 dark:text-light-500 dark:hover:bg-dark-400', index === highlightedIndex && 'bg-light-300 font-bold'), children: [jsx("span", { className: "truncate max-w-[calc(100%-20px)]", children: option.label }), jsx("input", { type: 'radio', checked: props.value?.value === option.value, onChange: () => handleSelect(option), className: clsx('appearance-none w-2 h-2 rounded-full ring-1 ring-offset-2 ring-offset-light-500 ring-light-700 checked:bg-primary cursor-pointer dark:bg-dark-100 dark:checked:bg-light-500 dark:checked:border-light-500 dark:ring-offset-dark-100 dark:ring-offset-2') })] }, option.value))) })) : (jsx("div", { className: "p-4 text-center text-light-700", children: "Nenhum resultado encontrado" })) })), hasError && jsx("span", { className: "text-redError text-xs px-2", children: error })] }));
+                                        : 'pi pi-angle-down', 'text-light-700 px-2 flex items-center cursor-pointer', isInputDisabled && 'text-disabled', error && 'text-redError'), onClick: toggleDropdown })] })] }), isOpen && (jsx("div", { className: clsx('absolute w-full bg-light-500 border shadow-md z-40 rounded-md p-2 -bottom-1 translate-y-full dark:bg-dark-100', error ? 'border-redError' : 'border-light-700'), children: isLoadingOptions ? (jsxs("div", { className: "p-4 text-center text-light-700 flex items-center justify-center gap-2", children: [lang.loadingMessage, jsx("i", { className: "pi pi-spinner pi-spin" })] })) : props.onInputChange && searchText.length === 0 && !props.value ? (jsx("div", { className: "p-4 text-center text-light-700", children: lang.typeToSearchMessage })) : filteredOptions.length > 0 ? (jsx("ul", { className: "max-h-60 overflow-y-auto", children: filteredOptions.map((option, index) => (jsxs("li", { onClick: () => handleSelect(option), className: clsx('p-2 flex justify-between items-center cursor-pointer', 'hover:bg-light-300 hover:font-bold dark:bg-dark-100 dark:text-light-500 dark:hover:bg-dark-400', index === highlightedIndex && 'bg-light-300 font-bold'), children: [jsx("span", { className: "truncate max-w-[calc(100%-20px)]", children: option.label }), jsx("input", { type: 'radio', checked: props.value?.value === option.value, onChange: () => handleSelect(option), className: clsx('appearance-none w-2 h-2 rounded-full ring-1 ring-offset-2 ring-offset-light-500 ring-light-700 checked:bg-primary cursor-pointer dark:bg-dark-100 dark:checked:bg-light-500 dark:checked:border-light-500 dark:ring-offset-dark-100 dark:ring-offset-2') })] }, option.value))) })) : (jsx("div", { className: "p-4 text-center text-light-700", children: lang.noResultsFoundMessage })) })), hasError && jsx("span", { className: "text-redError text-xs px-2", children: error })] }));
 }
 
 function Skeleton({ shape = 'rectangle', width = '100%', height = '1rem', borderRadius, animation = 'wave', size, className, }) {
@@ -4476,7 +4543,7 @@ function parseDateRange(value) {
         return [null, null];
     }
 }
-function Table({ columns, data, totalRecords, actions = [], isOrdered = true, actionsHeaderClassName = '', actionsColumnsClassName = '', rowsPerPage = 10, onPageChange, isPaginated = true, isLoading = false, onFilterChange, onSortChange, actionLabel = 'AÇÕES', }) {
+function Table({ columns, data, totalRecords, actions = [], isOrdered = true, actionsHeaderClassName = '', actionsColumnsClassName = '', rowsPerPage = 10, onPageChange, isPaginated = true, isLoading = false, onFilterChange, onSortChange, actionLabel = 'AÇÕES', systemLanguage = 'pt', }) {
     const [sortDirection, setSortDirection] = useState({});
     const [sortedData, setSortedData] = useState(data);
     const [currentPage, setCurrentPage] = useState(1);
@@ -4486,6 +4553,45 @@ function Table({ columns, data, totalRecords, actions = [], isOrdered = true, ac
     const filterButtonRefs = useRef({});
     const [filterModalPosition, setFilterModalPosition] = useState(null);
     const [filterStatus, setFilterStatus] = useState({});
+    const messages = {
+        pt: {
+            filterByMessage: 'Filtrar por',
+            typeToFilterMessage: 'Digite para filtrar',
+            selectOptionMessage: 'Selecione uma opção',
+            selectOneOrMoreOptionsMessage: 'Selecione uma ou mais opções',
+            selectDateMessage: 'Selecione uma data',
+            selectDatesMessage: 'Selecione as datas',
+            buttonCloseMessage: 'Fechar',
+            buttonClearFilterMessage: 'Limpar',
+            buttonApplyFilterMessage: 'Aplicar',
+            noResultsMessage: 'Não há dados disponíveis',
+        },
+        en: {
+            filterByMessage: 'Filter by',
+            typeToFilterMessage: 'Type to filter',
+            selectOptionMessage: 'Select an option',
+            selectOneOrMoreOptionsMessage: 'Select one or more options',
+            selectDateMessage: 'Select a date',
+            selectDatesMessage: 'Select dates',
+            buttonCloseMessage: 'Close',
+            buttonClearFilterMessage: 'Clear',
+            buttonApplyFilterMessage: 'Apply',
+            noResultsMessage: 'No data available',
+        },
+        es: {
+            filterByMessage: 'Filtrar por',
+            typeToFilterMessage: 'Escribe para filtrar',
+            selectOptionMessage: 'Seleccione una opción',
+            selectOneOrMoreOptionsMessage: 'Seleccione una o más opciones',
+            selectDateMessage: 'Seleccione una fecha',
+            selectDatesMessage: 'Seleccione las fechas',
+            buttonCloseMessage: 'Cerrar',
+            buttonClearFilterMessage: 'Limpiar',
+            buttonApplyFilterMessage: 'Aplicar',
+            noResultsMessage: 'No hay datos disponibles',
+        },
+    };
+    const lang = messages[systemLanguage || 'pt'];
     const handleSort = (dataIndex) => {
         setSortDirection((prev) => {
             const current = prev[dataIndex];
@@ -4586,21 +4692,21 @@ function Table({ columns, data, totalRecords, actions = [], isOrdered = true, ac
                                                     border: '1px solid var(--tw-border-light-500, #e5e7eb)',
                                                     color: 'var(--tw-text-primary, #222)',
                                                     padding: 16,
-                                                }, className: "normal-case bg-light-500 dark:bg-dark-100 dark:text-light-500", children: [jsxs("div", { className: "space-y-4 text-primary dark:text-light-500", children: [jsxs("h1", { className: "text-primary text-sm dark:text-light-500", children: ["Filtrar por ", column?.label?.toLowerCase()] }), jsxs("div", { className: "w-full", children: [column.filterType === 'text' && (jsx(Input, { placeholder: "Digite para filtrar", value: filters[column.dataIndex] || '', onChange: (e) => setFilters((prev) => ({
+                                                }, className: "normal-case bg-light-500 dark:bg-dark-100 dark:text-light-500", children: [jsxs("div", { className: "space-y-4 text-primary dark:text-light-500", children: [jsxs("h1", { className: "text-primary text-sm dark:text-light-500", children: [lang.filterByMessage, " ", column?.label?.toLowerCase()] }), jsxs("div", { className: "w-full", children: [column.filterType === 'text' && (jsx(Input, { placeholder: lang.typeToFilterMessage, value: filters[column.dataIndex] || '', onChange: (e) => setFilters((prev) => ({
                                                                             ...prev,
                                                                             [column.dataIndex]: e,
                                                                         })), mask: column?.mask, "aria-label": `Filtrar por ${column.label}`, maxLength: column?.maxLength || 40 })), column.filterType === 'select' && (jsx(Select, { options: column.filterOptions || [], value: column.filterOptions?.find((option) => option.value ===
                                                                             filters[column.dataIndex]) || null, onChange: (selected) => setFilters((prev) => ({
                                                                             ...prev,
                                                                             [column.dataIndex]: selected?.value ?? null,
-                                                                        })), placeholder: "Selecione uma op\u00E7\u00E3o", label: "", "aria-label": `Filtrar por ${column.label}`, isReadOnly: !column.isSearchableInSelectMode })), column.filterType === 'multiSelect' && (jsx(MultiSelect, { options: column.filterOptions || [], value: (filters[column.dataIndex]
+                                                                        })), placeholder: lang.selectOptionMessage, label: "", "aria-label": `Filtrar por ${column.label}`, isReadOnly: !column.isSearchableInSelectMode })), column.filterType === 'multiSelect' && (jsx(MultiSelect, { options: column.filterOptions || [], value: (filters[column.dataIndex]
                                                                             ? JSON.parse(filters[column.dataIndex])
                                                                             : []), onChange: (selected) => setFilters((prev) => ({
                                                                             ...prev,
                                                                             [column.dataIndex]: selected
                                                                                 ? JSON.stringify(selected)
                                                                                 : '',
-                                                                        })), placeholder: "Selecione uma ou mais op\u00E7\u00F5es", label: "", "aria-label": `Filtrar por ${column.label}` })), column.filterType === 'singleDate' && (jsx(CalendarInput, { label: "", selectionMode: "single", placeholder: "Selecione uma data", value: filters[column.dataIndex]
+                                                                        })), placeholder: lang.selectOneOrMoreOptionsMessage, label: "", "aria-label": `Filtrar por ${column.label}` })), column.filterType === 'singleDate' && (jsx(CalendarInput, { label: "", selectionMode: "single", placeholder: lang.selectDateMessage, value: filters[column.dataIndex]
                                                                             ? new Date(filters[column.dataIndex])
                                                                             : null, onChange: (e) => {
                                                                             const value = e?.value;
@@ -4610,7 +4716,7 @@ function Table({ columns, data, totalRecords, actions = [], isOrdered = true, ac
                                                                                     ? value.toISOString()
                                                                                     : '',
                                                                             }));
-                                                                        }, ariaLabel: `Filtrar por ${column.label}`, showTime: column.isShowTimeInDateMode ? true : false })), column.filterType === 'rangeDate' && (jsx(CalendarInput, { label: "", selectionMode: "range", placeholder: "Selecione as datas", value: filters[column.dataIndex]
+                                                                        }, ariaLabel: `Filtrar por ${column.label}`, showTime: column.isShowTimeInDateMode ? true : false })), column.filterType === 'rangeDate' && (jsx(CalendarInput, { label: "", selectionMode: "range", placeholder: lang.selectDatesMessage, value: filters[column.dataIndex]
                                                                             ? parseDateRange(filters[column.dataIndex])
                                                                             : null, onChange: (e) => {
                                                                             const range = e?.value;
@@ -4631,7 +4737,7 @@ function Table({ columns, data, totalRecords, actions = [], isOrdered = true, ac
                                                                     }));
                                                                     setOpenFilter(null);
                                                                     setFilterModalPosition(null);
-                                                                }, label: "Fechar", width: "10", size: "small", "aria-label": "Fechar filtro" }), jsx(Button, { variant: "secondary", onClick: () => handleClearFilter(column), label: "Limpar", width: "10", size: "small", "aria-label": "Limpar filtro" }), jsx(Button, { variant: "primary", onClick: () => handleFilter(column), label: "Aplicar", width: "10", size: "small", "aria-label": "Aplicar filtro" })] })] })) }), jsxs("div", { className: "flex flex-col items-start", children: [column.label, isOrdered && (jsxs("div", { className: "flex flex-row", children: [jsx("button", { onClick: () => handleSort(column.dataIndex), "aria-label": `Ordenar por ${column.label}`, children: jsx("i", { className: clsx('text-xs cursor-pointer pi', sortDirection[column.dataIndex] === 'ASC' &&
+                                                                }, label: lang.buttonCloseMessage, width: "10", size: "small", "aria-label": "Fechar filtro" }), jsx(Button, { variant: "secondary", onClick: () => handleClearFilter(column), label: lang.buttonClearFilterMessage, width: "10", size: "small", "aria-label": "Limpar filtro" }), jsx(Button, { variant: "primary", onClick: () => handleFilter(column), label: lang.buttonApplyFilterMessage, width: "10", size: "small", "aria-label": "Aplicar filtro" })] })] })) }), jsxs("div", { className: "flex flex-col items-start", children: [column.label, isOrdered && (jsxs("div", { className: "flex flex-row", children: [jsx("button", { onClick: () => handleSort(column.dataIndex), "aria-label": `Ordenar por ${column.label}`, children: jsx("i", { className: clsx('text-xs cursor-pointer pi', sortDirection[column.dataIndex] === 'ASC' &&
                                                                     'pi-sort-amount-up-alt', sortDirection[column.dataIndex] === 'DESC' &&
                                                                     'pi-sort-amount-down', !sortDirection[column.dataIndex] && 'pi-sort-alt') }) }), column.filterable && (jsx(Fragment, { children: jsx("button", { ref: (el) => {
                                                                     filterButtonRefs.current[column.dataIndex] = el;
@@ -4657,7 +4763,7 @@ function Table({ columns, data, totalRecords, actions = [], isOrdered = true, ac
                                                 if (!isDisabled)
                                                     action.onClick(row);
                                             }, "aria-label": action?.ariaLabel || action.label, role: "button", children: jsx(Tooltip, { text: action?.label, children: action.icon }) }, idx));
-                                    }) }))] }, index)))) : (jsx("tr", { children: jsxs("td", { colSpan: columns.length + (actions.length > 0 ? 1 : 0), className: "p-6 text-center text-primary bg-light-300 dark:text-light-500 dark:bg-dark-200", children: [jsx("i", { className: "pi pi-database mr-2" }), " N\u00E3o h\u00E1 dados dispon\u00EDveis."] }) })) })] }), sortedData.length > 0 && isPaginated && (jsx(Paginator, { first: (currentPage - 1) * rowsPerPage, rows: rowsPerPage, totalRecords: totalRecords, onPageChange: (event) => {
+                                    }) }))] }, index)))) : (jsx("tr", { children: jsxs("td", { colSpan: columns.length + (actions.length > 0 ? 1 : 0), className: "p-6 text-center text-primary bg-light-300 dark:text-light-500 dark:bg-dark-200", children: [jsx("i", { className: "pi pi-database mr-2" }), " ", lang.noResultsMessage] }) })) })] }), sortedData.length > 0 && isPaginated && (jsx(Paginator, { first: (currentPage - 1) * rowsPerPage, rows: rowsPerPage, totalRecords: totalRecords, onPageChange: (event) => {
                     setCurrentPage(event.page + 1);
                     onPageChange(event.page + 1);
                 } }))] }));