@zauru-sdk/components 2.0.206 → 2.0.207

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.0.207](https://github.com/intuitiva/zauru-typescript-sdk/compare/v2.0.206...v2.0.207) (2025-03-27)
+
+**Note:** Version bump only for package @zauru-sdk/components
+
+
+
+
+
 ## [2.0.206](https://github.com/intuitiva/zauru-typescript-sdk/compare/v2.0.205...v2.0.206) (2025-03-27)
 
 **Note:** Version bump only for package @zauru-sdk/components

package/dist/Buttons/Button.d.ts

@@ -5,7 +5,7 @@ type Props = {
     onClickSave?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
     loading?: boolean;
     loadingText?: string;
-    selectedColor?: "indigo" | "green" | "red" | "yellow";
+    selectedColor?: "indigo" | "green" | "red" | "yellow" | "gray";
     children?: React.ReactNode;
     className?: string;
     disabled?: boolean;

package/dist/esm/Buttons/Button.js

@@ -42,6 +42,15 @@ export const Button = (props) => {
             ring600: "ring-yellow-600",
             ring500: "ring-yellow-500",
         },
+        gray: {
+            bg900: "bg-gray-900",
+            bg700: "bg-gray-700",
+            bg600: "bg-gray-600",
+            bg500: "bg-gray-500",
+            bg200: "bg-gray-200",
+            ring600: "ring-gray-600",
+            ring500: "ring-gray-500",
+        },
     };
     const color = COLORS[selectedColor];
     const errorMessage = formHasErrors

package/dist/esm/DynamicTable/GenericDynamicTable.js

@@ -7,7 +7,6 @@ import { createModal } from "../Modal/index.js";
 import { Button } from "../Buttons/index.js";
 import { generateClientUUID } from "@zauru-sdk/common";
 import { LoadingInputSkeleton } from "../Skeletons/index.js";
-import { WithTooltip } from "../WithTooltip/index.js";
 import { TrashSvg } from "@zauru-sdk/icons";
 import { useFormContext } from "react-hook-form";
 import { ComponentError } from "../Alerts/index.js";
@@ -234,23 +233,23 @@ export const GenericDynamicTable = (props) => {
                             column.onChange(rowData, sendValue, setTableValue);
                     }, defaultValue: defaultVal, options: column.options ?? [] }, `${rowData.id}-${column.name}`)) }, `${rowData.id}-${column.name}`));
         };
-        const renderDeleteButton = (rowData) => (_jsx("td", { className: "align-middle w-16", children: _jsx(WithTooltip, { text: "Eliminar", children: _jsx("button", { className: "bg-red-500 hover:bg-red-600 font-bold py-1 px-2 rounded ml-2", onClick: (event) => {
-                        event.preventDefault();
-                        event.stopPropagation();
-                        if (confirmDelete) {
-                            createModal({
-                                title: "¿Está seguro que quiere eliminar este registro?",
-                                description: "Una vez eliminada la información no podrá ser recuperada.",
-                            }).then((response) => {
-                                if (response === "OK") {
-                                    removeRow(rowData.id);
-                                }
-                            });
-                        }
-                        else {
-                            removeRow(rowData.id);
-                        }
-                    }, type: "button", children: _jsx(TrashSvg, {}) }) }) }));
+        const renderDeleteButton = (rowData) => (_jsx("td", { className: "align-middle w-16", children: _jsx("button", { title: "Eliminar", type: "button", className: "bg-red-500 hover:bg-red-600 font-bold py-1 px-2 rounded ml-2", onClick: (event) => {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    if (confirmDelete) {
+                        createModal({
+                            title: "¿Está seguro que quiere eliminar este registro?",
+                            description: "Una vez eliminada la información no podrá ser recuperada.",
+                        }).then((response) => {
+                            if (response === "OK") {
+                                removeRow(rowData.id);
+                            }
+                        });
+                    }
+                    else {
+                        removeRow(rowData.id);
+                    }
+                }, children: _jsx(TrashSvg, {}) }) }));
         const renderRows = () => {
             let mapeable = filteredTableData.slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage);
             // Si estamos cargando, mostramos celdas skeleton

package/dist/esm/Form/DynamicBaculoForm/index.js

@@ -115,7 +115,7 @@ export function DynamicBaculoForm(props) {
     };
     const renderFields = () => {
         const fields = form.settings_form_fields;
-        return (_jsx("div", { className: "flex flex-wrap gap-4 items-stretch", children: fields.map((field) => {
+        return (_jsx("div", { className: "flex flex-wrap gap-4 items-stretch space-y-4", children: fields.map((field) => {
                 const rule = showingRules.find((x) => x.name === field.name);
                 if (rule && !rule.show)
                     return null;

package/dist/esm/Form/FileUpload/index.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { DownloadIconSVG, IdeaIconSVG } from "@zauru-sdk/icons";
 import { useState, useEffect, useRef } from "react";
 import { useFormContext } from "react-hook-form";
+import { Button } from "../../Buttons/index.js";
 export const FileUploadField = (props) => {
     const { id, name, title, helpText, hint, onChange, readOnly = false, fileTypes = [], showAvailableTypes = false, className, defaultValue, download = false, required = false, optimizeImages = true, zauruBaseURL = "https://zauru.herokuapp.com", setProcessing, signature = false, } = props;
     const { register: tempRegister, setValue, formState: { errors }, } = useFormContext() || { formState: {} };
@@ -249,7 +250,19 @@ export const FileUploadField = (props) => {
                                         border: "1px solid #ccc",
                                         backgroundColor: "transparent",
                                         touchAction: "none",
-                                    }, onPointerDown: handlePointerDown, onPointerMove: handlePointerMove, onPointerUp: handlePointerUp, onPointerLeave: handlePointerUp }) }), _jsxs("div", { className: "p-4 flex justify-center space-x-4", children: [_jsx("button", { type: "button", onClick: clearCanvas, className: "text-blue-600 underline text-sm", children: "Reset" }), _jsx("button", { type: "button", onClick: handleSignatureConfirm, className: "text-blue-600 underline text-sm", children: "Ok" }), _jsx("button", { type: "button", onClick: () => setOpenSignatureModal(false), className: "text-gray-600 underline text-sm", children: "Cancelar" })] })] }))] }));
+                                    }, onPointerDown: handlePointerDown, onPointerMove: handlePointerMove, onPointerUp: handlePointerUp, onPointerLeave: handlePointerUp }) }), _jsxs("div", { className: "flex flex-col md:flex-row justify-center items-center space-x-4 space-y-4", children: [_jsxs(Button, { className: "flex items-center space-x-5", type: "button", name: "print", selectedColor: "indigo", onClickSave: clearCanvas, children: [_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", style: {
+                                                    fill: "rgba(0, 0, 0, 1)",
+                                                    transform: "scale(2)",
+                                                    msFilter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)",
+                                                }, children: [_jsx("path", { d: "M12 16c1.671 0 3-1.331 3-3s-1.329-3-3-3-3 1.331-3 3 1.329 3 3 3z" }), _jsx("path", { d: "M20.817 11.186a8.94 8.94 0 0 0-1.355-3.219 9.053 9.053 0 0 0-2.43-2.43 8.95 8.95 0 0 0-3.219-1.355 9.028 9.028 0 0 0-1.838-.18V2L8 5l3.975 3V6.002c.484-.002.968.044 1.435.14a6.961 6.961 0 0 1 2.502 1.053 7.005 7.005 0 0 1 1.892 1.892A6.967 6.967 0 0 1 19 13a7.032 7.032 0 0 1-.55 2.725 7.11 7.11 0 0 1-.644 1.188 7.2 7.2 0 0 1-.858 1.039 7.028 7.028 0 0 1-3.536 1.907 7.13 7.13 0 0 1-2.822 0 6.961 6.961 0 0 1-2.503-1.054 7.002 7.002 0 0 1-1.89-1.89A6.996 6.996 0 0 1 5 13H3a9.02 9.02 0 0 0 1.539 5.034 9.096 9.096 0 0 0 2.428 2.428A8.95 8.95 0 0 0 12 22a9.09 9.09 0 0 0 1.814-.183 9.014 9.014 0 0 0 3.218-1.355 8.886 8.886 0 0 0 1.331-1.099 9.228 9.228 0 0 0 1.1-1.332A8.952 8.952 0 0 0 21 13a9.09 9.09 0 0 0-.183-1.814z" })] }), _jsx("span", { className: "text-5xl", children: "Limpiar" })] }), _jsxs(Button, { className: "flex items-center space-x-5", type: "button", name: "print", selectedColor: "green", onClickSave: handleSignatureConfirm, children: [_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", style: {
+                                                    fill: "rgba(0, 0, 0, 1)",
+                                                    transform: "scale(2)",
+                                                    msFilter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)",
+                                                }, children: _jsx("path", { d: "M5 21h14a2 2 0 0 0 2-2V8a1 1 0 0 0-.29-.71l-4-4A1 1 0 0 0 16 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2zm10-2H9v-5h6zM13 7h-2V5h2zM5 5h2v4h8V5h.59L19 8.41V19h-2v-5a2 2 0 0 0-2-2H9a2 2 0 0 0-2 2v5H5z" }) }), _jsx("span", { className: "text-5xl", children: "Confirmar" })] }), _jsxs(Button, { className: "flex items-center space-x-5", type: "button", name: "print", selectedColor: "gray", onClickSave: () => setOpenSignatureModal(false), children: [_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", style: {
+                                                    fill: "rgba(0, 0, 0, 1)",
+                                                    transform: "scale(2)",
+                                                    msFilter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)",
+                                                }, children: [_jsx("path", { d: "M19.002 3h-14c-1.103 0-2 .897-2 2v4h2V5h14v14h-14v-4h-2v4c0 1.103.897 2 2 2h14c1.103 0 2-.897 2-2V5c0-1.103-.898-2-2-2z" }), _jsx("path", { d: "m11 16 5-4-5-4v3.001H3v2h8z" })] }), _jsx("span", { className: "text-5xl", children: "Cancelar" })] })] })] }))] }));
         }
     }
     /**

package/dist/esm/Layouts/errorLayout/index.js

@@ -6,10 +6,12 @@ export const ErrorLayout = ({ from, isRootLevel = true, error: parentError, }) =
         const error = useRouteError();
         const [showDetails, setShowDetails] = useState(!!parentError);
         const baseError = (_jsxs("div", { className: "min-h-screen flex flex-col items-center justify-center p-4", children: [_jsx("img", { src: "/logo.png", alt: "Zauru Logo", className: "mb-8 h-20" }), _jsx("h1", { className: "text-5xl font-extrabold text-red-500 mb-6", children: "\u00A1Ups!" }), _jsxs("div", { className: "w-full max-w-2xl flex flex-col items-center", children: [_jsx("p", { className: "text-2xl text-gray-300 mb-8 text-center", children: isRouteErrorResponse(error)
-                                ? `Error ${error.status}: ${error.statusText}`
+                                ? `Error en request: ${error.status}: ${error.statusText} - PATH: ${error.data.path} - MESSAGE: ${error.data.message}`
                                 : error instanceof Error
-                                    ? error.message
-                                    : "Ha ocurrido un error inesperado" }), from && (_jsxs("p", { className: "text-lg text-gray-400 mb-4 text-center", children: ["Error lanzado desde: ", from] })), parentError && (_jsxs("div", { className: "mb-4 text-center", children: [_jsx("button", { onClick: () => setShowDetails(!showDetails), className: "text-blue-400 hover:text-blue-300 transition duration-300", children: showDetails ? "Ocultar detalles" : "Ver más detalles" }), showDetails && (_jsx("p", { className: "mt-2 text-gray-400 text-sm", children: parentError instanceof Error
+                                    ? `Error: ${error.message} - NAME: ${error.name} - STACK: ${error.stack?.slice(0, 100)} - CAUSE: ${error.cause}`
+                                    : `Ha ocurrido un error inesperado: ${error}` }), from && (_jsxs("p", { className: "text-lg text-gray-400 mb-4 text-center", children: [isRootLevel
+                                    ? "(*) Error lanzado desde: "
+                                    : "Error lanzado desde: ", from] })), parentError && (_jsxs("div", { className: "mb-4 text-center", children: [_jsx("button", { onClick: () => setShowDetails(!showDetails), className: "text-blue-400 hover:text-blue-300 transition duration-300", children: showDetails ? "Ocultar detalles" : "Ver más detalles" }), showDetails && (_jsx("p", { className: "mt-2 text-gray-400 text-sm", children: parentError instanceof Error
                                         ? parentError.message
                                         : String(parentError) }))] }))] }), _jsx(Link, { to: "/", className: "bg-blue-600 text-white py-3 px-8 rounded-full text-lg font-semibold hover:bg-blue-700 transition duration-300 transform hover:scale-105", children: "Regresar al inicio" }), _jsx("div", { className: "mt-12 text-gray-500 text-center", children: _jsx("p", { children: "Si el problema persiste, por favor contacta a soporte." }) })] }));
         if (!isRootLevel) {

package/dist/esm/index.js

@@ -19,8 +19,6 @@ export * from "./Tab/index.js";
 export * from "./Table/index.js";
 export * from "./TaskList/index.js";
 export * from "./Titles/index.js";
-export * from "./Tooltip/index.js";
-export * from "./WithTooltip/index.js";
 export * from "./Wizards/index.js";
 export * from "./Zendesk/index.js";
 export * from "./HOC/ValidateEmployeeAccess/index.js";

package/dist/index.d.ts

@@ -19,8 +19,6 @@ export * from "./Tab/index.js";
 export * from "./Table/index.js";
 export * from "./TaskList/index.js";
 export * from "./Titles/index.js";
-export * from "./Tooltip/index.js";
-export * from "./WithTooltip/index.js";
 export * from "./Wizards/index.js";
 export * from "./Zendesk/index.js";
 export * from "./HOC/ValidateEmployeeAccess/index.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zauru-sdk/components",
-  "version": "2.0.206",
+  "version": "2.0.207",
   "description": "Componentes reutilizables en las WebApps de Zauru.",
   "main": "./dist/esm/index.js",
   "module": "./dist/esm/index.js",
@@ -35,11 +35,11 @@
     "@rails/activestorage": "^8.0.200",
     "@reduxjs/toolkit": "^2.2.1",
     "@remix-run/react": "^2.8.1",
-    "@zauru-sdk/common": "^2.0.204",
-    "@zauru-sdk/hooks": "^2.0.204",
+    "@zauru-sdk/common": "^2.0.207",
+    "@zauru-sdk/hooks": "^2.0.207",
     "@zauru-sdk/icons": "^2.0.188",
-    "@zauru-sdk/types": "^2.0.204",
-    "@zauru-sdk/utils": "^2.0.206",
+    "@zauru-sdk/types": "^2.0.207",
+    "@zauru-sdk/utils": "^2.0.207",
     "browser-image-compression": "^2.0.2",
     "framer-motion": "^11.7.0",
     "jsonwebtoken": "^9.0.2",
@@ -52,5 +52,5 @@
     "styled-components": "^5.3.5",
     "zod": "^3.23.8"
   },
-  "gitHead": "f4d62b2808133edcd12c983d20e6c7853c02f646"
+  "gitHead": "da31168a5844799e3dd53840f5ce37f236e7af9d"
 }

package/src/Buttons/Button.tsx

@@ -9,7 +9,7 @@ type Props = {
   //Cargando...
   loading?: boolean;
   loadingText?: string;
-  selectedColor?: "indigo" | "green" | "red" | "yellow";
+  selectedColor?: "indigo" | "green" | "red" | "yellow" | "gray";
   children?: React.ReactNode;
   className?: string;
   disabled?: boolean;
@@ -74,6 +74,15 @@ export const Button = (props: Props) => {
       ring600: "ring-yellow-600",
       ring500: "ring-yellow-500",
     },
+    gray: {
+      bg900: "bg-gray-900",
+      bg700: "bg-gray-700",
+      bg600: "bg-gray-600",
+      bg500: "bg-gray-500",
+      bg200: "bg-gray-200",
+      ring600: "ring-gray-600",
+      ring500: "ring-gray-500",
+    },
   };
 
   const color: ColorInterface = COLORS[selectedColor];

package/src/DynamicTable/GenericDynamicTable.tsx

@@ -11,7 +11,6 @@ import {
 } from "@zauru-sdk/types";
 import { generateClientUUID } from "@zauru-sdk/common";
 import { LoadingInputSkeleton } from "../Skeletons/index.js";
-import { WithTooltip } from "../WithTooltip/index.js";
 import { TrashSvg } from "@zauru-sdk/icons";
 import { useFormContext } from "react-hook-form";
 import { ComponentError } from "../Alerts/index.js";
@@ -435,33 +434,30 @@ export const GenericDynamicTable = (props: Props) => {
 
     const renderDeleteButton = (rowData: RowDataType) => (
       <td className="align-middle w-16">
-        <WithTooltip text="Eliminar">
-          <button
-            className="bg-red-500 hover:bg-red-600 font-bold py-1 px-2 rounded ml-2"
-            onClick={(
-              event: React.MouseEvent<HTMLButtonElement, MouseEvent>
-            ) => {
-              event.preventDefault();
-              event.stopPropagation();
-              if (confirmDelete) {
-                createModal({
-                  title: "¿Está seguro que quiere eliminar este registro?",
-                  description:
-                    "Una vez eliminada la información no podrá ser recuperada.",
-                }).then((response) => {
-                  if (response === "OK") {
-                    removeRow(rowData.id);
-                  }
-                });
-              } else {
-                removeRow(rowData.id);
-              }
-            }}
-            type="button"
-          >
-            <TrashSvg />
-          </button>
-        </WithTooltip>
+        <button
+          title="Eliminar"
+          type="button"
+          className="bg-red-500 hover:bg-red-600 font-bold py-1 px-2 rounded ml-2"
+          onClick={(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+            event.preventDefault();
+            event.stopPropagation();
+            if (confirmDelete) {
+              createModal({
+                title: "¿Está seguro que quiere eliminar este registro?",
+                description:
+                  "Una vez eliminada la información no podrá ser recuperada.",
+              }).then((response) => {
+                if (response === "OK") {
+                  removeRow(rowData.id);
+                }
+              });
+            } else {
+              removeRow(rowData.id);
+            }
+          }}
+        >
+          <TrashSvg />
+        </button>
       </td>
     );
 

package/src/Form/DynamicBaculoForm/index.tsx

@@ -342,7 +342,7 @@ export function DynamicBaculoForm(props: Props) {
   const renderFields = () => {
     const fields = form.settings_form_fields;
     return (
-      <div className="flex flex-wrap gap-4 items-stretch">
+      <div className="flex flex-wrap gap-4 items-stretch space-y-4">
         {fields.map((field) => {
           const rule = showingRules.find((x) => x.name === field.name);
           if (rule && !rule.show) return null;

package/src/Form/FileUpload/index.tsx

@@ -1,6 +1,7 @@
 import { DownloadIconSVG, IdeaIconSVG } from "@zauru-sdk/icons";
 import React, { useState, useEffect, useRef } from "react";
 import { useFormContext } from "react-hook-form";
+import { Button } from "../../Buttons/index.js";
 //import imageCompression, { Options } from "browser-image-compression";
 
 type Props = {
@@ -150,7 +151,6 @@ export const FileUploadField = (props: Props) => {
     event?: React.ChangeEvent<HTMLInputElement>
   ) => {
     let processedFile = file;
-
     /*
     if (file && file.type.startsWith("image/") && optimizeImages) {
       try {
@@ -183,7 +183,6 @@ export const FileUploadField = (props: Props) => {
       }
     } else 
     */
-
     if (file && file.type.startsWith("image/")) {
       const objectUrl = URL.createObjectURL(file);
       setPreviewSrc(objectUrl);
@@ -404,28 +403,78 @@ export const FileUploadField = (props: Props) => {
                   onPointerLeave={handlePointerUp}
                 ></canvas>
               </div>
-              <div className="p-4 flex justify-center space-x-4">
-                <button
+              <div className="flex flex-col md:flex-row justify-center items-center space-x-4 space-y-4">
+                <Button
+                  className="flex items-center space-x-5"
                   type="button"
-                  onClick={clearCanvas}
-                  className="text-blue-600 underline text-sm"
+                  name="print"
+                  selectedColor="indigo"
+                  onClickSave={clearCanvas}
                 >
-                  Reset
-                </button>
-                <button
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="24"
+                    height="24"
+                    viewBox="0 0 24 24"
+                    style={{
+                      fill: "rgba(0, 0, 0, 1)",
+                      transform: "scale(2)",
+                      msFilter:
+                        "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)",
+                    }}
+                  >
+                    <path d="M12 16c1.671 0 3-1.331 3-3s-1.329-3-3-3-3 1.331-3 3 1.329 3 3 3z"></path>
+                    <path d="M20.817 11.186a8.94 8.94 0 0 0-1.355-3.219 9.053 9.053 0 0 0-2.43-2.43 8.95 8.95 0 0 0-3.219-1.355 9.028 9.028 0 0 0-1.838-.18V2L8 5l3.975 3V6.002c.484-.002.968.044 1.435.14a6.961 6.961 0 0 1 2.502 1.053 7.005 7.005 0 0 1 1.892 1.892A6.967 6.967 0 0 1 19 13a7.032 7.032 0 0 1-.55 2.725 7.11 7.11 0 0 1-.644 1.188 7.2 7.2 0 0 1-.858 1.039 7.028 7.028 0 0 1-3.536 1.907 7.13 7.13 0 0 1-2.822 0 6.961 6.961 0 0 1-2.503-1.054 7.002 7.002 0 0 1-1.89-1.89A6.996 6.996 0 0 1 5 13H3a9.02 9.02 0 0 0 1.539 5.034 9.096 9.096 0 0 0 2.428 2.428A8.95 8.95 0 0 0 12 22a9.09 9.09 0 0 0 1.814-.183 9.014 9.014 0 0 0 3.218-1.355 8.886 8.886 0 0 0 1.331-1.099 9.228 9.228 0 0 0 1.1-1.332A8.952 8.952 0 0 0 21 13a9.09 9.09 0 0 0-.183-1.814z"></path>
+                  </svg>
+                  <span className="text-5xl">Limpiar</span>
+                </Button>
+                <Button
+                  className="flex items-center space-x-5"
                   type="button"
-                  onClick={handleSignatureConfirm}
-                  className="text-blue-600 underline text-sm"
+                  name="print"
+                  selectedColor="green"
+                  onClickSave={handleSignatureConfirm}
                 >
-                  Ok
-                </button>
-                <button
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="24"
+                    height="24"
+                    viewBox="0 0 24 24"
+                    style={{
+                      fill: "rgba(0, 0, 0, 1)",
+                      transform: "scale(2)",
+                      msFilter:
+                        "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)",
+                    }}
+                  >
+                    <path d="M5 21h14a2 2 0 0 0 2-2V8a1 1 0 0 0-.29-.71l-4-4A1 1 0 0 0 16 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2zm10-2H9v-5h6zM13 7h-2V5h2zM5 5h2v4h8V5h.59L19 8.41V19h-2v-5a2 2 0 0 0-2-2H9a2 2 0 0 0-2 2v5H5z"></path>
+                  </svg>
+                  <span className="text-5xl">Confirmar</span>
+                </Button>
+                <Button
+                  className="flex items-center space-x-5"
                   type="button"
-                  onClick={() => setOpenSignatureModal(false)}
-                  className="text-gray-600 underline text-sm"
+                  name="print"
+                  selectedColor="gray"
+                  onClickSave={() => setOpenSignatureModal(false)}
                 >
-                  Cancelar
-                </button>
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="24"
+                    height="24"
+                    viewBox="0 0 24 24"
+                    style={{
+                      fill: "rgba(0, 0, 0, 1)",
+                      transform: "scale(2)",
+                      msFilter:
+                        "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)",
+                    }}
+                  >
+                    <path d="M19.002 3h-14c-1.103 0-2 .897-2 2v4h2V5h14v14h-14v-4h-2v4c0 1.103.897 2 2 2h14c1.103 0 2-.897 2-2V5c0-1.103-.898-2-2-2z"></path>
+                    <path d="m11 16 5-4-5-4v3.001H3v2h8z"></path>
+                  </svg>
+                  <span className="text-5xl">Cancelar</span>
+                </Button>
               </div>
             </div>
           )}

package/src/Layouts/errorLayout/index.tsx

@@ -28,14 +28,21 @@ export const ErrorLayout = ({
         <div className="w-full max-w-2xl flex flex-col items-center">
           <p className="text-2xl text-gray-300 mb-8 text-center">
             {isRouteErrorResponse(error)
-              ? `Error ${error.status}: ${error.statusText}`
+              ? `Error en request: ${error.status}: ${error.statusText} - PATH: ${error.data.path} - MESSAGE: ${error.data.message}`
               : error instanceof Error
-              ? error.message
-              : "Ha ocurrido un error inesperado"}
+              ? `Error: ${error.message} - NAME: ${
+                  error.name
+                } - STACK: ${error.stack?.slice(0, 100)} - CAUSE: ${
+                  error.cause
+                }`
+              : `Ha ocurrido un error inesperado: ${error}`}
           </p>
           {from && (
             <p className="text-lg text-gray-400 mb-4 text-center">
-              Error lanzado desde: {from}
+              {isRootLevel
+                ? "(*) Error lanzado desde: "
+                : "Error lanzado desde: "}
+              {from}
             </p>
           )}
           {parentError && (

package/src/index.ts

@@ -19,8 +19,6 @@ export * from "./Tab/index.js";
 export * from "./Table/index.js";
 export * from "./TaskList/index.js";
 export * from "./Titles/index.js";
-export * from "./Tooltip/index.js";
-export * from "./WithTooltip/index.js";
 export * from "./Wizards/index.js";
 export * from "./Zendesk/index.js";
 export * from "./HOC/ValidateEmployeeAccess/index.js";

package/src/Tooltip/Tooltip.tsx

@@ -1,42 +0,0 @@
-"use client";
-
-import React, { useState } from "react";
-
-type Props = {
-  children: React.ReactNode;
-  text: string;
-};
-
-export const Tooltip = ({ children, text }: Props) => {
-  const [show, setShow] = useState(false);
-
-  return (
-    <div className="relative inline-block">
-      <div
-        onMouseEnter={() => setShow(true)}
-        onMouseLeave={() => setShow(false)}
-      >
-        {children}
-      </div>
-      {show && (
-        <div
-          className="absolute z-10 bg-gray-700 text-white px-2 py-1 rounded-md bottom-full left-1/2 transform -translate-x-1/2"
-          style={{ whiteSpace: "nowrap", height: "2rem" }}
-        >
-          {text}
-          <div
-            className="absolute top-full left-1/2 transform -translate-x-1/2"
-            style={{
-              width: "0",
-              height: "0",
-              borderTop: "6px solid transparent",
-              borderLeft: "6px solid transparent",
-              borderRight: "6px solid transparent",
-              borderBottom: "6px solid gray",
-            }}
-          ></div>
-        </div>
-      )}
-    </div>
-  );
-};

package/src/Tooltip/index.ts

@@ -1 +0,0 @@
-export * from "./Tooltip.js";

package/src/WithTooltip/WithTooltip.tsx

@@ -1,22 +0,0 @@
-import React from "react";
-
-type Props = {
-  children: React.ReactNode;
-  text: string;
-};
-
-export const WithTooltip = (props: Props) => {
-  const { children, text } = props;
-
-  return (
-    <div className="group relative inline-block">
-      {children}
-      <div className="pointer-events-none absolute left-1/2 -translate-x-1/2 bottom-full mb-2 opacity-0 transition-opacity duration-300 group-hover:opacity-100">
-        <div className="relative bg-black text-white text-sm rounded py-1 px-2 text-wrap w-40">
-          {text}
-          <div className="absolute top-full left-1/2 -translate-x-1/2 border-4 border-transparent border-t-black"></div>
-        </div>
-      </div>
-    </div>
-  );
-};

package/src/WithTooltip/index.tsx

@@ -1 +0,0 @@
-export * from "./WithTooltip.js";