eai-frontend-components 2.0.28 → 2.0.30

package/dist/index.js

@@ -569,7 +569,7 @@ function DatePickerWithRange({ className }) {
         from: new Date(2022, 0, 20),
         to: dateFns.addDays(new Date(2022, 0, 20), 20),
     });
-    return (jsxRuntime.jsx("div", { className: cn('grid gap-2', className), children: jsxRuntime.jsxs(Popover, { children: [jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: jsxRuntime.jsxs(Button, { id: 'date', variant: 'outline', className: cn('w-[300px] justify-start text-left font-normal', !date && 'text-muted-foreground'), children: [jsxRuntime.jsx(lucideReact.CalendarIcon, {}), date?.from ? (date.to ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [dateFns.format(date.from, 'LLL dd, y'), " - ", dateFns.format(date.to, 'LLL dd, y')] })) : (dateFns.format(date.from, 'LLL dd, y'))) : (jsxRuntime.jsx("span", { children: "Pick a date" }))] }) }), jsxRuntime.jsx(PopoverContent, { className: 'w-auto p-0', align: 'start', children: jsxRuntime.jsx(Calendar, { initialFocus: true, mode: 'range', defaultMonth: date?.from, selected: date, onSelect: setDate, numberOfMonths: 2 }) })] }) }));
+    return (jsxRuntime.jsx("div", { className: cn('grid gap-2', className), children: jsxRuntime.jsxs(Popover, { children: [jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: jsxRuntime.jsxs(Button, { id: 'date', type: 'button', variant: 'outline', className: cn('w-[300px] justify-start text-left font-normal', !date && 'text-muted-foreground'), children: [jsxRuntime.jsx(lucideReact.CalendarIcon, {}), date?.from ? (date.to ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [dateFns.format(date.from, 'LLL dd, y'), " - ", dateFns.format(date.to, 'LLL dd, y')] })) : (dateFns.format(date.from, 'LLL dd, y'))) : (jsxRuntime.jsx("span", { children: "Pick a date" }))] }) }), jsxRuntime.jsx(PopoverContent, { className: 'w-auto p-0', align: 'start', children: jsxRuntime.jsx(Calendar, { initialFocus: true, mode: 'range', defaultMonth: date?.from, selected: date, onSelect: setDate, numberOfMonths: 2 }) })] }) }));
 }
 
 const Drawer = ({ shouldScaleBackground = true, ...props }) => (jsxRuntime.jsx(vaul.Drawer.Root, { shouldScaleBackground: shouldScaleBackground, ...props }));
@@ -2312,7 +2312,7 @@ function UseCalendar({ className, getDataFilter }) {
             getDataFilter(date.from, date.to);
         }
     };
-    return (jsxRuntime.jsx("div", { className: cn('grid gap-2', className), children: jsxRuntime.jsxs(PopoverPrimitive.Popover, { children: [jsxRuntime.jsx(PopoverPrimitive.PopoverTrigger, { asChild: true, children: jsxRuntime.jsxs(Button, { id: 'date', variant: 'outline', className: 'flex justify-center items-center px-4 py-2 cursor-pointer bg-primaryBack text-textFilter rounded-md', children: [jsxRuntime.jsx(lucideReact.CalendarDays, { color: '#0F172A', size: 16, className: 'mr-4' }), date?.to ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [dateFns.format(date.from, 'dd/MM', { locale: ptBR }), " - ", dateFns.format(date.to, 'dd/MM', { locale: ptBR })] })) : (jsxRuntime.jsx("span", { children: "Filtrar por Per\u00EDodo" }))] }) }), jsxRuntime.jsxs(PopoverPrimitive.PopoverContent, { className: 'w-auto p-0 testeCalendar flex flex-col justify-center bg-white  z-10 shadow-md text-black ', align: 'start', children: [jsxRuntime.jsx(Calendar, { mode: 'range', locale: ptBR, selected: date, onSelect: setDate, className: '  ' }), jsxRuntime.jsx(PopoverPrimitive.PopoverClose, { className: 'flex justify-center items-center p-4', children: jsxRuntime.jsx(Button, { className: 'w-[150px] bg-background-primary mt-8  px-4 py-2 text-white', onClick: submitDate, children: "Aplicar Filtro" }) })] })] }) }));
+    return (jsxRuntime.jsx("div", { className: cn('grid gap-2', className), children: jsxRuntime.jsxs(PopoverPrimitive.Popover, { children: [jsxRuntime.jsx(PopoverPrimitive.PopoverTrigger, { asChild: true, children: jsxRuntime.jsxs(Button, { type: 'button', id: 'date', variant: 'outline', className: 'flex justify-center items-center px-4 py-2 cursor-pointer bg-primaryBack text-textFilter rounded-md', children: [jsxRuntime.jsx(lucideReact.CalendarDays, { color: '#0F172A', size: 16, className: 'mr-4' }), date?.to ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [dateFns.format(date.from, 'dd/MM', { locale: ptBR }), " - ", dateFns.format(date.to, 'dd/MM', { locale: ptBR })] })) : (jsxRuntime.jsx("span", { children: "Filtrar por Per\u00EDodo" }))] }) }), jsxRuntime.jsxs(PopoverPrimitive.PopoverContent, { className: 'w-auto p-0 testeCalendar flex flex-col justify-center bg-white  z-10 shadow-md text-black ', align: 'start', children: [jsxRuntime.jsx(Calendar, { mode: 'range', locale: ptBR, selected: date, onSelect: setDate, className: '  ' }), jsxRuntime.jsx(PopoverPrimitive.PopoverClose, { className: 'flex justify-center items-center p-4', children: jsxRuntime.jsx(Button, { type: 'button', className: 'w-[150px] bg-background-primary mt-8  px-4 py-2 text-white', onClick: submitDate, children: "Aplicar Filtro" }) })] })] }) }));
 }
 
 const formHelpText = (helpText) => {
@@ -2379,7 +2379,7 @@ const FormInputColor = ({ control, name, label, subLabel, helpText, placeholder,
             handleColorChange(rgbToHex(newRgb), onChange);
         }
     };
-    return (jsxRuntime.jsx(FormField, { control: control, name: name, render: ({ field, formState }) => (jsxRuntime.jsxs(FormItem, { className: className, children: [jsxRuntime.jsxs("div", { className: 'flex items-center space-x-1.5', children: [label && formLabelAndSubLabel(FormLabel, label, subLabel, required), helpText && formHelpText(helpText)] }), jsxRuntime.jsxs(Popover, { children: [jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: jsxRuntime.jsx(FormControl, { children: jsxRuntime.jsx(Button, { variant: 'outline', className: cn('w-[240px] justify-start text-left font-normal', !field.value && 'text-zinc-500', className), disabled: disabled || formState.isSubmitting, children: jsxRuntime.jsxs("div", { className: 'w-full flex items-center gap-2', children: [field.value ? (jsxRuntime.jsx("div", { className: 'h-4 w-4 rounded !bg-center !bg-cover transition-all border', style: { backgroundColor: field.value } })) : (jsxRuntime.jsx(lucideReact.Paintbrush, { className: 'h-4 w-4' })), jsxRuntime.jsx("div", { className: 'truncate flex-1 text-sm', children: field.value ? field.value : placeholder || 'Selecione uma cor' })] }) }) }) }), jsxRuntime.jsx(PopoverContent, { className: cn('w-80', className), children: jsxRuntime.jsxs("div", { className: 'flex flex-col gap-4', children: [jsxRuntime.jsx("section", { className: '[&_.react-colorful]:w-auto', children: jsxRuntime.jsx(reactColorful.HexColorPicker, { color: field.value ?? DEFAULT_COLOR, onChange: (newColor) => handleColorChange(newColor, field.onChange) }) }), jsxRuntime.jsxs("div", { className: 'flex gap-2', children: [jsxRuntime.jsxs("div", { className: 'flex flex-col gap-1', children: [jsxRuntime.jsx(Label, { children: "Hex" }), jsxRuntime.jsx(Input, { value: currentColor, onChange: (e) => handleHexChange(e.target.value, field.onChange), maxLength: 7 })] }), jsxRuntime.jsxs("div", { className: 'flex gap-2', children: [jsxRuntime.jsxs("div", { className: 'flex flex-col gap-1', children: [jsxRuntime.jsx(Label, { children: "R" }), jsxRuntime.jsx(Input, { value: rgb.r, onChange: (e) => handleRgbChange('r', e.target.value, field.onChange), className: 'w-14' })] }), jsxRuntime.jsxs("div", { className: 'flex flex-col gap-1', children: [jsxRuntime.jsx(Label, { children: "G" }), jsxRuntime.jsx(Input, { value: rgb.g, onChange: (e) => handleRgbChange('g', e.target.value, field.onChange), className: 'w-14' })] }), jsxRuntime.jsxs("div", { className: 'flex flex-col gap-1', children: [jsxRuntime.jsx(Label, { children: "B" }), jsxRuntime.jsx(Input, { value: rgb.b, onChange: (e) => handleRgbChange('b', e.target.value, field.onChange), className: 'w-14' })] })] })] })] }) })] }), formMessage(FormMessage)] })) }));
+    return (jsxRuntime.jsx(FormField, { control: control, name: name, render: ({ field, formState }) => (jsxRuntime.jsxs(FormItem, { className: className, children: [jsxRuntime.jsxs("div", { className: 'flex items-center space-x-1.5', children: [label && formLabelAndSubLabel(FormLabel, label, subLabel, required), helpText && formHelpText(helpText)] }), jsxRuntime.jsxs(Popover, { children: [jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: jsxRuntime.jsx(FormControl, { children: jsxRuntime.jsx(Button, { type: 'button', variant: 'outline', className: cn('w-[240px] justify-start text-left font-normal', !field.value && 'text-zinc-500', className), disabled: disabled || formState.isSubmitting, children: jsxRuntime.jsxs("div", { className: 'w-full flex items-center gap-2', children: [field.value ? (jsxRuntime.jsx("div", { className: 'h-4 w-4 rounded !bg-center !bg-cover transition-all border', style: { backgroundColor: field.value } })) : (jsxRuntime.jsx(lucideReact.Paintbrush, { className: 'h-4 w-4' })), jsxRuntime.jsx("div", { className: 'truncate flex-1 text-sm', children: field.value ? field.value : placeholder || 'Selecione uma cor' })] }) }) }) }), jsxRuntime.jsx(PopoverContent, { className: cn('w-80', className), children: jsxRuntime.jsxs("div", { className: 'flex flex-col gap-4', children: [jsxRuntime.jsx("section", { className: '[&_.react-colorful]:w-auto', children: jsxRuntime.jsx(reactColorful.HexColorPicker, { color: field.value ?? DEFAULT_COLOR, onChange: (newColor) => handleColorChange(newColor, field.onChange) }) }), jsxRuntime.jsxs("div", { className: 'flex gap-2', children: [jsxRuntime.jsxs("div", { className: 'flex flex-col gap-1', children: [jsxRuntime.jsx(Label, { children: "Hex" }), jsxRuntime.jsx(Input, { value: currentColor, onChange: (e) => handleHexChange(e.target.value, field.onChange), maxLength: 7 })] }), jsxRuntime.jsxs("div", { className: 'flex gap-2', children: [jsxRuntime.jsxs("div", { className: 'flex flex-col gap-1', children: [jsxRuntime.jsx(Label, { children: "R" }), jsxRuntime.jsx(Input, { value: rgb.r, onChange: (e) => handleRgbChange('r', e.target.value, field.onChange), className: 'w-14' })] }), jsxRuntime.jsxs("div", { className: 'flex flex-col gap-1', children: [jsxRuntime.jsx(Label, { children: "G" }), jsxRuntime.jsx(Input, { value: rgb.g, onChange: (e) => handleRgbChange('g', e.target.value, field.onChange), className: 'w-14' })] }), jsxRuntime.jsxs("div", { className: 'flex flex-col gap-1', children: [jsxRuntime.jsx(Label, { children: "B" }), jsxRuntime.jsx(Input, { value: rgb.b, onChange: (e) => handleRgbChange('b', e.target.value, field.onChange), className: 'w-14' })] })] })] })] }) })] }), formMessage(FormMessage)] })) }));
 };
 
 const FormCombobox = ({ control, variant = 'outline', name, label, subLabel, helpText, placeholder, className, disabled, required, options, selectedOption, iconLeft, iconRight, addEmptyOption, canUnselect = false, closePopUpOnChange = true, runInternalSearch = true, disabledSearch = false, onChange, onSearch, footerAction, }) => {
@@ -2651,7 +2651,7 @@ const MultiSelect = React__namespace.forwardRef(({ control, name, label, subLabe
             field.onChange(allValues);
         }
     };
-    return (jsxRuntime.jsx(FormField, { control: control, name: name, render: ({ field }) => (jsxRuntime.jsxs(FormItem, { children: [jsxRuntime.jsxs("div", { className: 'flex items-center space-x-1.5', children: [label && formLabelAndSubLabel(FormLabel, label, subLabel, required), helpText && formHelpText(helpText)] }), jsxRuntime.jsxs(Popover, { open: isPopoverOpen, onOpenChange: setIsPopoverOpen, modal: modalPopover, children: [jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: jsxRuntime.jsx(Button, { ref: ref, ...props, onClick: handleTogglePopover, className: cn('flex w-full p-1 rounded-md border min-h-10 h-auto items-center justify-between bg-background hover:bg-background [&_svg]:size-3.5', className), children: field.value?.length > 0 ? (jsxRuntime.jsxs("div", { className: 'flex justify-between items-center w-full', children: [jsxRuntime.jsxs("div", { className: 'flex items-center', children: [jsxRuntime.jsx("div", { className: `grid grid-cols-${maxCount}`, children: field.value.slice(0, maxCount).map((option) => {
+    return (jsxRuntime.jsx(FormField, { control: control, name: name, render: ({ field }) => (jsxRuntime.jsxs(FormItem, { children: [jsxRuntime.jsxs("div", { className: 'flex items-center space-x-1.5', children: [label && formLabelAndSubLabel(FormLabel, label, subLabel, required), helpText && formHelpText(helpText)] }), jsxRuntime.jsxs(Popover, { open: isPopoverOpen, onOpenChange: setIsPopoverOpen, modal: modalPopover, children: [jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: jsxRuntime.jsx(Button, { ref: ref, ...props, onClick: handleTogglePopover, type: 'button', className: cn('flex w-full p-1 rounded-md border min-h-10 h-auto items-center justify-between bg-background hover:bg-background [&_svg]:size-3.5', className), children: field.value?.length > 0 ? (jsxRuntime.jsxs("div", { className: 'flex justify-between items-center w-full', children: [jsxRuntime.jsxs("div", { className: 'flex items-center', children: [jsxRuntime.jsx("div", { className: `grid grid-cols-${maxCount}`, children: field.value.slice(0, maxCount).map((option) => {
                                                         return (jsxRuntime.jsxs(Badge, { className: cn(multiSelectVariants({ variant })), onClick: (event) => {
                                                                 event.stopPropagation();
                                                                 toggleOption(option, field);
@@ -3248,7 +3248,7 @@ const LabelWithTitle = ({ title, value, value2, required, showCopyIcon = false,
 };
 
 const NotFound = () => {
-    return (jsxRuntime.jsx("div", { className: "flex flex-col items-center justify-center h-screen bg-[url('/imgs/404.png')] bg-cover bg-no-repeat bg-center", children: jsxRuntime.jsxs("div", { className: 'flex flex-col items-center justify-center gap-8 w-[424px]', children: [jsxRuntime.jsxs("div", { className: 'flex flex-col items-center w-full', children: [jsxRuntime.jsx("div", { className: 'text-5xl font-extrabold', children: "404" }), jsxRuntime.jsx("div", { className: 'text-3xl font-semibold', children: "P\u00E1gina Indispon\u00EDvel" })] }), jsxRuntime.jsx("div", { className: 'flex text-center text-xl font-semibold text-zinc-500', children: "A p\u00E1gina que voc\u00EA est\u00E1 tentando acessar se encontra indispon\u00EDvel no momento, tente novamente mais tarde" }), jsxRuntime.jsx("div", { className: 'flex justify-center w-full', children: jsxRuntime.jsxs(Button, { onClick: () => {
+    return (jsxRuntime.jsx("div", { className: "flex flex-col items-center justify-center h-screen bg-[url('/imgs/404.png')] bg-cover bg-no-repeat bg-center", children: jsxRuntime.jsxs("div", { className: 'flex flex-col items-center justify-center gap-8 w-[424px]', children: [jsxRuntime.jsxs("div", { className: 'flex flex-col items-center w-full', children: [jsxRuntime.jsx("div", { className: 'text-5xl font-extrabold', children: "404" }), jsxRuntime.jsx("div", { className: 'text-3xl font-semibold', children: "P\u00E1gina Indispon\u00EDvel" })] }), jsxRuntime.jsx("div", { className: 'flex text-center text-xl font-semibold text-zinc-500', children: "A p\u00E1gina que voc\u00EA est\u00E1 tentando acessar se encontra indispon\u00EDvel no momento, tente novamente mais tarde" }), jsxRuntime.jsx("div", { className: 'flex justify-center w-full', children: jsxRuntime.jsxs(Button, { type: 'button', onClick: () => {
                             window.location.href = '/';
                         }, className: '[&_svg]:size-5', children: [jsxRuntime.jsx(lucideReact.BarChart2, {}), "Voltar Para Inicial"] }) })] }) }));
 };
@@ -3378,7 +3378,7 @@ function DataTableExport({ exportData, totalRows }) {
         if (!exportData)
             return null;
         if (exportData.type === 'xlsx') {
-            return (jsxRuntime.jsx(Button, { variant: 'secondary', onClick: exportXlSX, children: "Exportar" }));
+            return (jsxRuntime.jsx(Button, { type: 'button', variant: 'secondary', onClick: exportXlSX, children: "Exportar" }));
         }
         if (exportData.type === 'dialog') {
             const onSubmit = async (_values) => {
@@ -3395,7 +3395,7 @@ function DataTableExport({ exportData, totalRows }) {
                     variant: 'destructive',
                 });
             };
-            return (jsxRuntime.jsx(Form, { ...form, onSubmit: handleSubmit(onSubmit, onError), children: jsxRuntime.jsxs(Dialog, { children: [jsxRuntime.jsx(DialogTrigger, { asChild: true, children: jsxRuntime.jsx(Button, { variant: 'secondary', children: "Exportar" }) }), jsxRuntime.jsxs(DialogContent, { hideClose: true, className: 'fixed p-6 rounded-lg w-[451px]', children: [jsxRuntime.jsxs(DialogHeader, { children: [jsxRuntime.jsx(DialogTitle, { children: "Exportar" }), jsxRuntime.jsx(DialogDescription, {})] }), jsxRuntime.jsxs("div", { className: 'flex flex-col gap-6', children: [jsxRuntime.jsx(FormRadioGroup, { control: control, name: 'model', label: 'Selecione o modelo de visualiza\u00E7\u00E3o', options: [
+            return (jsxRuntime.jsx(Form, { ...form, onSubmit: handleSubmit(onSubmit, onError), children: jsxRuntime.jsxs(Dialog, { children: [jsxRuntime.jsx(DialogTrigger, { asChild: true, children: jsxRuntime.jsx(Button, { type: 'button', variant: 'secondary', children: "Exportar" }) }), jsxRuntime.jsxs(DialogContent, { hideClose: true, className: 'fixed p-6 rounded-lg w-[451px]', children: [jsxRuntime.jsxs(DialogHeader, { children: [jsxRuntime.jsx(DialogTitle, { children: "Exportar" }), jsxRuntime.jsx(DialogDescription, {})] }), jsxRuntime.jsxs("div", { className: 'flex flex-col gap-6', children: [jsxRuntime.jsx(FormRadioGroup, { control: control, name: 'model', label: 'Selecione o modelo de visualiza\u00E7\u00E3o', options: [
                                                 { value: '0', label: 'Resumido' },
                                                 { value: '1', label: 'Detalhado' },
                                             ], className: 'text-sm font-normal', classNameOptions: 'flex flex-col gap-4 mt-4 text-sm font-normal' }), jsxRuntime.jsx(FormRadioGroup, { control: control, name: 'format', label: 'Selecione o formato desejado para exporta\u00E7\u00E3o', options: [
@@ -3445,7 +3445,7 @@ function DataTableFooter({ isLoading, totalRows, totalPages, currentPage, hidePa
 
 function DataTableHeader({ table, canActionsRow, enableMultiRowSelection }) {
     const headerGroups = table.getHeaderGroups();
-    return (jsxRuntime.jsx(TableHeader, { children: headerGroups.map((headerGroup) => (jsxRuntime.jsxs(TableRow, { className: 'bg-background dark:bg-datatable-accent rounded-t-md sticky top-0 z-10', children: [enableMultiRowSelection && (jsxRuntime.jsx(TableHead, { className: 'h-[65px] w-6', children: jsxRuntime.jsx(Checkbox, { checked: table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'), onCheckedChange: (value) => table.toggleAllPageRowsSelected(!!value) }) })), headerGroup.headers.map((header) => (jsxRuntime.jsx(TableHead, { className: cn('h-[65px] whitespace-nowrap', header.column.id === 'id' ? 'sticky left-0 z-20' : '', header.column.columnDef.enableSorting ? 'pl-2' : ''), children: header.column.columnDef.enableSorting ? (jsxRuntime.jsxs(Button, { variant: 'ghost', onClick: () => header.column.toggleSorting(header.column.getIsSorted() === 'asc'), children: [reactTable.flexRender(header.column.columnDef.header, header.getContext()), header.column.getIsSorted() === 'asc' ? (jsxRuntime.jsx(lucideReact.MoveUp, { className: 'ml-2 h-4 w-4' })) : header.column.getIsSorted() === 'desc' ? (jsxRuntime.jsx(lucideReact.MoveDown, { className: 'ml-2 h-4 w-4' })) : (jsxRuntime.jsx(lucideReact.ArrowUpDown, { className: 'ml-2 h-4 w-4' }))] })) : (reactTable.flexRender(header.column.columnDef.header, header.getContext())) }, header.id))), canActionsRow && jsxRuntime.jsx(TableHead, {})] }, headerGroup.id))) }));
+    return (jsxRuntime.jsx(TableHeader, { children: headerGroups.map((headerGroup) => (jsxRuntime.jsxs(TableRow, { className: 'bg-background dark:bg-datatable-accent rounded-t-md sticky top-0 z-10', children: [enableMultiRowSelection && (jsxRuntime.jsx(TableHead, { className: 'h-[65px] w-6', children: jsxRuntime.jsx(Checkbox, { checked: table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'), onCheckedChange: (value) => table.toggleAllPageRowsSelected(!!value) }) })), headerGroup.headers.map((header) => (jsxRuntime.jsx(TableHead, { className: cn('h-[65px] whitespace-nowrap', header.column.id === 'id' ? 'sticky left-0 z-20' : '', header.column.columnDef.enableSorting && 'px-2'), children: header.column.columnDef.enableSorting ? (jsxRuntime.jsxs(Button, { type: 'button', variant: 'ghost', onClick: () => header.column.toggleSorting(header.column.getIsSorted() === 'asc'), children: [reactTable.flexRender(header.column.columnDef.header, header.getContext()), header.column.getIsSorted() === 'asc' ? (jsxRuntime.jsx(lucideReact.MoveUp, { className: 'ml-2 h-4 w-4' })) : header.column.getIsSorted() === 'desc' ? (jsxRuntime.jsx(lucideReact.MoveDown, { className: 'ml-2 h-4 w-4' })) : (jsxRuntime.jsx(lucideReact.ArrowUpDown, { className: 'ml-2 h-4 w-4' }))] })) : (reactTable.flexRender(header.column.columnDef.header, header.getContext())) }, header.id))), canActionsRow && jsxRuntime.jsx(TableHead, {})] }, headerGroup.id))) }));
 }
 
 function DataTableRows({ table, isLoading, columns, actionsRow, textNoRecords, enableMultiRowSelection }) {
@@ -3458,7 +3458,7 @@ function DataTableRows({ table, isLoading, columns, actionsRow, textNoRecords, e
         return rows;
     };
     const renderRows = () => {
-        return rows.map((row) => (jsxRuntime.jsxs(TableRow, { "data-state": row.getIsSelected() && 'selected', className: 'group', children: [enableMultiRowSelection && (jsxRuntime.jsx(TableCell, { className: 'py-4', children: jsxRuntime.jsx(Checkbox, { checked: row.getIsSelected(), onCheckedChange: (value) => row.toggleSelected(!!value), "aria-label": 'Select row' }) })), row.getVisibleCells().map((cell) => (jsxRuntime.jsx(TableCell, { className: 'py-4', children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))), actionsRow && (jsxRuntime.jsx(TableCell, { className: 'opacity-0 group-hover:opacity-100 hover:opacity-100 relative overflow-visible w-[0px]', children: jsxRuntime.jsx("div", { className: 'absolute transition-colors group-hover:bg-datatable-accent overflow-visible right-5 -translate-y-1/2 flex space-x-4', children: actionsRow.map((action, index) => (jsxRuntime.jsxs(Button, { variant: action.variant || 'default', className: cn('bg-datatable-accent', action.className?.(row.original) || ''), onClick: () => action.onClick?.(row.original), disabled: action.disabled?.(row.original) || false, children: [action.icon, action.label] }, `action-row-${index}`))) }) }, `buttons-${row.id}`))] }, row.id)));
+        return rows.map((row) => (jsxRuntime.jsxs(TableRow, { "data-state": row.getIsSelected() && 'selected', className: 'group', children: [enableMultiRowSelection && (jsxRuntime.jsx(TableCell, { className: 'py-4', children: jsxRuntime.jsx(Checkbox, { checked: row.getIsSelected(), onCheckedChange: (value) => row.toggleSelected(!!value), "aria-label": 'Select row' }) })), row.getVisibleCells().map((cell) => (jsxRuntime.jsx(TableCell, { className: 'py-4', children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))), actionsRow && (jsxRuntime.jsx(TableCell, { className: 'opacity-0 group-hover:opacity-100 hover:opacity-100 relative overflow-visible w-[0px]', children: jsxRuntime.jsx("div", { className: 'absolute transition-colors group-hover:bg-datatable-accent overflow-visible right-5 -translate-y-1/2 flex space-x-4', children: actionsRow.map((action, index) => (jsxRuntime.jsxs(Button, { type: 'button', variant: action.variant || 'default', className: cn('bg-datatable-accent', action.className?.(row.original) || ''), onClick: () => action.onClick?.(row.original), disabled: action.disabled?.(row.original) || false, children: [action.icon, action.label] }, `action-row-${index}`))) }) }, `buttons-${row.id}`))] }, row.id)));
     };
     const renderEmptyRows = () => {
         const colSpan = columns.length + (actionsRow ? 1 : 0);
@@ -3553,7 +3553,7 @@ function DataTable({ columns, data, className, title, rowsPage, actions, actions
     };
     return (jsxRuntime.jsxs("div", { className: 'flex flex-col flex-1', children: [(!hideFilterField || filtersActions || customFilters || actions) && (jsxRuntime.jsxs("div", { className: 'flex items-end justify-between mb-4 space-x-6', children: [jsxRuntime.jsxs("div", { className: 'flex items-center gap-x-4', children: [!hideFilterField && (jsxRuntime.jsxs("div", { className: 'flex bg-background items-center border border-slate-300 rounded-sm w-[350px] overflow-hidden focus-within:outline-none focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 group', children: [jsxRuntime.jsx("div", { className: 'pl-3.5 transform transition-transform duration-300 group-hover:-translate-x-1', children: jsxRuntime.jsx(lucideReact.Search, { size: 18, className: 'w-5 h-5 stroke-zinc-500 dark:stroke-default' }) }), jsxRuntime.jsx("input", { placeholder: 'Buscar', onKeyUp: (event) => {
                                             handleSearchChange(event);
-                                        }, className: 'w-full bg-background text-default border-none focus:ring-0 focus:outline-none px-3 py-2 transform transition-transform duration-300 group-hover:-translate-x-1 ' })] })), filtersActions && (jsxRuntime.jsxs(Sheet, { open: filtersActions.filterOpen, onOpenChange: filtersActions.setFilterOpen, children: [jsxRuntime.jsx(SheetTrigger, { asChild: true, children: jsxRuntime.jsxs(Button, { variant: 'secondary', type: 'button', children: [jsxRuntime.jsx(lucideReact.Filter, { size: 20, className: 'h-4 w-4' }), " Filtros", filtersActions.countFilters > 0 && (jsxRuntime.jsx("div", { className: 'bg-background-primary text-white rounded-full h-5 w-5 flex items-center justify-center text-sm placeholder:text-muted-foreground', children: filtersActions.countFilters }))] }) }), jsxRuntime.jsxs(SheetContent, { children: [jsxRuntime.jsxs(SheetHeader, { children: [jsxRuntime.jsx(SheetTitle, { children: "Filtros" }), jsxRuntime.jsx(SheetDescription, {})] }), jsxRuntime.jsx("div", { className: 'flex flex-col py-6', children: filtersActions.fields })] })] }))] }), customFilters, jsxRuntime.jsx("div", { className: 'flex space-x-4 content-end', children: actions?.map((action, index) => (jsxRuntime.jsx("div", { children: jsxRuntime.jsxs(Button, { onClick: () => action.onClick?.(selectedIds, selectedRows), className: cn(action.className, action.hideUnselectedRows && selectedRows.length === 0 ? 'hidden' : ''), variant: action.variant || 'default', disabled: action.disabled, children: [jsxRuntime.jsx("div", { className: '[&_svg]:size-5', children: action.icon }), action.label] }) }, `action-table-${index}`))) })] })), jsxRuntime.jsxs("div", { className: `flex-1 flex flex-col rounded-md border ${className}`, children: [jsxRuntime.jsx("div", { className: 'flex items-center justify-between', children: title && jsxRuntime.jsx("div", { className: 'text-h4 p-4', children: title }) }), jsxRuntime.jsx("div", { id: 'data-table', ref: tableContainerRef, style: fixedHeight ? { height: fixedHeight } : { height: tableHeight }, className: 'flex flex-col justify-between rounded-md overflow-x-auto overflow-y-auto', children: jsxRuntime.jsxs(Table, { children: [jsxRuntime.jsx(DataTableHeader, { table: table, canActionsRow: actionsRow && actionsRow.length > 0, enableMultiRowSelection: enableMultiRowSelection }), jsxRuntime.jsx(TableBody, { className: 'bg-background', children: jsxRuntime.jsx(DataTableRows, { table: table, columns: columns, isLoading: isLoading, actionsRow: actionsRow, textNoRecords: textNoRecords, enableMultiRowSelection: enableMultiRowSelection }) })] }) })] }), jsxRuntime.jsx(DataTableFooter, { hidePagination: hidePagination, disablePagination: disablePagination, isLoading: isLoading, totalRows: totalRows, totalPages: totalPages, currentPage: currentPage, pagination: pagination, handlePageSize: handlePageSize, handlePage: handlePage, previousPage: { action: () => table.previousPage(), disabled: !table.getCanPreviousPage() }, nextPage: { action: () => table.nextPage(), disabled: !table.getCanNextPage() }, exportData: exportData })] }));
+                                        }, className: 'w-full bg-background text-default border-none focus:ring-0 focus:outline-none px-3 py-2 transform transition-transform duration-300 group-hover:-translate-x-1 ' })] })), filtersActions && (jsxRuntime.jsxs(Sheet, { open: filtersActions.filterOpen, onOpenChange: filtersActions.setFilterOpen, children: [jsxRuntime.jsx(SheetTrigger, { asChild: true, children: jsxRuntime.jsxs(Button, { variant: 'secondary', type: 'button', children: [jsxRuntime.jsx(lucideReact.Filter, { size: 20, className: 'h-4 w-4' }), " Filtros", filtersActions.countFilters > 0 && (jsxRuntime.jsx("div", { className: 'bg-background-primary text-white rounded-full h-5 w-5 flex items-center justify-center text-sm placeholder:text-muted-foreground', children: filtersActions.countFilters }))] }) }), jsxRuntime.jsxs(SheetContent, { children: [jsxRuntime.jsxs(SheetHeader, { children: [jsxRuntime.jsx(SheetTitle, { children: "Filtros" }), jsxRuntime.jsx(SheetDescription, {})] }), jsxRuntime.jsx("div", { className: 'flex flex-col py-6', children: filtersActions.fields })] })] }))] }), customFilters, jsxRuntime.jsx("div", { className: 'flex space-x-4 content-end', children: actions?.map((action, index) => (jsxRuntime.jsx("div", { children: jsxRuntime.jsxs(Button, { type: 'button', onClick: () => action.onClick?.(selectedIds, selectedRows), className: cn(action.className, action.hideUnselectedRows && selectedRows.length === 0 ? 'hidden' : ''), variant: action.variant || 'default', disabled: action.disabled, children: [jsxRuntime.jsx("div", { className: '[&_svg]:size-5', children: action.icon }), action.label] }) }, `action-table-${index}`))) })] })), jsxRuntime.jsxs("div", { className: `flex-1 flex flex-col rounded-md border ${className}`, children: [jsxRuntime.jsx("div", { className: 'flex items-center justify-between', children: title && jsxRuntime.jsx("div", { className: 'text-h4 p-4', children: title }) }), jsxRuntime.jsx("div", { id: 'data-table', ref: tableContainerRef, style: fixedHeight ? { height: fixedHeight } : { height: tableHeight }, className: 'flex flex-col justify-between rounded-md overflow-x-auto overflow-y-auto', children: jsxRuntime.jsxs(Table, { children: [jsxRuntime.jsx(DataTableHeader, { table: table, canActionsRow: actionsRow && actionsRow.length > 0, enableMultiRowSelection: enableMultiRowSelection }), jsxRuntime.jsx(TableBody, { className: 'bg-background', children: jsxRuntime.jsx(DataTableRows, { table: table, columns: columns, isLoading: isLoading, actionsRow: actionsRow, textNoRecords: textNoRecords, enableMultiRowSelection: enableMultiRowSelection }) })] }) })] }), jsxRuntime.jsx(DataTableFooter, { hidePagination: hidePagination, disablePagination: disablePagination, isLoading: isLoading, totalRows: totalRows, totalPages: totalPages, currentPage: currentPage, pagination: pagination, handlePageSize: handlePageSize, handlePage: handlePage, previousPage: { action: () => table.previousPage(), disabled: !table.getCanPreviousPage() }, nextPage: { action: () => table.nextPage(), disabled: !table.getCanNextPage() }, exportData: exportData })] }));
 }
 
 function isUUIDv4(str) {