@zauru-sdk/components 1.0.52 → 1.0.53

package/dist/cjs/Wizards/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./StepWizard.js"), exports);

package/dist/cjs/Zendesk/Chat.js

@@ -0,0 +1,69 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Zendesk = exports.ZendeskAPI = exports.logoutFromZendesk = void 0;
+const react_1 = require("react");
+const canUseDOM = () => {
+    if (typeof window === "undefined" ||
+        !window.document ||
+        !window.document.createElement) {
+        return false;
+    }
+    return true;
+};
+const logoutFromZendesk = () => {
+    if (canUseDOM() && window.zE) {
+        window.zE("messenger", "logoutUser");
+    }
+    else {
+        console.warn("Zendesk is not initialized yet");
+    }
+};
+exports.logoutFromZendesk = logoutFromZendesk;
+const ZendeskAPI = (...args) => {
+    if (canUseDOM() && window.zE) {
+        window.zE.apply(null, args);
+    }
+    else {
+        console.warn("Zendesk is not initialized yet");
+    }
+};
+exports.ZendeskAPI = ZendeskAPI;
+const Zendesk = (props) => {
+    const { defer, configuration, token, ...other } = props;
+    (0, react_1.useEffect)(() => {
+        const insertScript = () => {
+            const zendeskScript = document.createElement("script");
+            if (defer) {
+                zendeskScript.defer = true;
+            }
+            else {
+                zendeskScript.async = true;
+            }
+            zendeskScript.id = "ze-snippet";
+            zendeskScript.src = `https://static.zdassets.com/ekr/snippet.js?key=${configuration.zendeskChatKey}`;
+            zendeskScript.addEventListener("load", () => {
+                if (props.onLoaded) {
+                    props.onLoaded();
+                }
+                window.zE("messenger", "loginUser", function (callback) {
+                    callback(token);
+                });
+            });
+            document.body.appendChild(zendeskScript);
+            return zendeskScript; // Devolvemos la referencia del script
+        };
+        let script; // Guardamos la referencia del script aquí
+        if (canUseDOM() && !window.zE) {
+            script = insertScript();
+            window.zESettings = other;
+        }
+        return () => {
+            if (script) {
+                // Si el script existe, lo eliminamos del DOM
+                script.remove();
+            }
+        };
+    }, [props, defer, other, configuration, token]);
+    return null;
+};
+exports.Zendesk = Zendesk;

package/dist/cjs/Zendesk/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Chat.js"), exports);
+__exportStar(require("./zendesk.config.js"), exports);

package/dist/cjs/Zendesk/zendesk.config.js

@@ -0,0 +1,31 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.zendeskJwt = void 0;
+const jsonwebtoken_1 = __importDefault(require("jsonwebtoken"));
+function zendeskJwt(current_user, configuration) {
+    // get the INFO
+    const jwtSecret = configuration.zendeskJWTSecret;
+    const jwtKey = configuration.zendeskJWTKey;
+    const expiresIn = Math.floor(Date.now() / 1000) + 60 * 60 * 24; // Expires in 1 day
+    // create the payload
+    const payload = {
+        external_id: "z" +
+            current_user.selected_entity_id.toString() +
+            "-" +
+            current_user.id.toString(),
+        email: current_user.email,
+        name: current_user.name,
+        organization_id: current_user.selected_entity_id.toString(),
+        scope: "user",
+        exp: expiresIn,
+    };
+    const jwtHeader = { kid: jwtKey, typ: "JWT", alg: "HS256" };
+    return jsonwebtoken_1.default.sign(payload, jwtSecret, {
+        algorithm: "HS256",
+        header: jwtHeader,
+    });
+}
+exports.zendeskJwt = zendeskJwt;

package/dist/cjs/index.js

@@ -0,0 +1,40 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Alerts/index.js"), exports);
+__exportStar(require("./BlockUI/index.js"), exports);
+__exportStar(require("./Buttons/index.js"), exports);
+__exportStar(require("./Card/index.js"), exports);
+__exportStar(require("./ConnectionState/index.js"), exports);
+__exportStar(require("./Chat/index.js"), exports);
+__exportStar(require("./Containers/index.js"), exports);
+__exportStar(require("./DynamicTable/index.js"), exports);
+__exportStar(require("./Footer/index.js"), exports);
+__exportStar(require("./Form/index.js"), exports);
+__exportStar(require("./Labels/index.js"), exports);
+__exportStar(require("./Layouts/index.js"), exports);
+__exportStar(require("./LineSeparator/index.js"), exports);
+__exportStar(require("./Modal/index.js"), exports);
+__exportStar(require("./NavBar/index.js"), exports);
+__exportStar(require("./Skeletons/index.js"), exports);
+__exportStar(require("./Tab/index.js"), exports);
+__exportStar(require("./Table/index.js"), exports);
+__exportStar(require("./TaskList/index.js"), exports);
+__exportStar(require("./Titles/index.js"), exports);
+__exportStar(require("./Tooltip/index.js"), exports);
+__exportStar(require("./WithTooltip/index.js"), exports);
+__exportStar(require("./Wizards/index.js"), exports);
+__exportStar(require("./Zendesk/index.js"), exports);

package/dist/cjs/tailwind.config.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+module.exports = {
+    content: ["./app/**/*.{ts,tsx,jsx,js}"],
+    theme: {
+        extend: {},
+    },
+    plugins: [require("@tailwindcss/forms")],
+};

package/dist/esm/Alerts/ErrorBoundaryAlert/ErrorBoundaryAlert.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const ErrorBoundaryAlert = (props) => {
+    const { title, description } = props;
+    return (_jsx("div", { className: "rounded-full top-20 mx-auto p-3", children: _jsx("div", { className: "p-4 text-red-900 bg-red-100 border border-red-200 rounded-md", children: _jsxs("div", { className: "flex justify-between flex-wrap", children: [_jsxs("div", { className: "w-0 flex-1 flex", children: [_jsx("div", { className: "mr-3 pt-1", children: _jsx("svg", { width: "26", height: "26", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", children: _jsx("path", { d: "M13.6086 3.247l8.1916 15.8c.0999.2.1998.5.1998.8 0 1-.7992 1.8-1.7982 1.8H3.7188c-.2997 0-.4995-.1-.7992-.2-.7992-.5-1.1988-1.5-.6993-2.4 5.3067-10.1184 8.0706-15.385 8.2915-15.8.3314-.6222.8681-.8886 1.4817-.897.6135-.008 1.273.2807 1.6151.897zM12 18.95c.718 0 1.3-.582 1.3-1.3 0-.718-.582-1.3-1.3-1.3-.718 0-1.3.582-1.3 1.3 0 .718.582 1.3 1.3 1.3zm-.8895-10.203v5.4c0 .5.4.9.9.9s.9-.4.9-.9v-5.3c0-.5-.4-.9-.9-.9s-.9.4-.9.8z" }) }) }), _jsxs("div", { children: [_jsx("h4", { className: "text-md leading-6 font-medium", children: title?.toString() }), _jsx("p", { className: "text-sm", children: description?.toString() })] })] }), _jsx("div", { children: _jsx("button", { type: "button", className: "rounded-md focus:outline-none focus:ring-2 focus:ring-red-500", children: _jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", children: _jsx("path", { d: "M17.6555 6.3331a.9.9 0 0 1 .001 1.2728l-4.1032 4.1085a.4.4 0 0 0 0 .5653l4.1031 4.1088a.9002.9002 0 0 1 .0797 1.1807l-.0806.092a.9.9 0 0 1-1.2728-.0009l-4.1006-4.1068a.4.4 0 0 0-.5662 0l-4.099 4.1068a.9.9 0 1 1-1.2738-1.2718l4.1027-4.1089a.4.4 0 0 0 0-.5652L6.343 7.6059a.9002.9002 0 0 1-.0796-1.1807l.0806-.092a.9.9 0 0 1 1.2728.0009l4.099 4.1055a.4.4 0 0 0 .5662 0l4.1006-4.1055a.9.9 0 0 1 1.2728-.001z" }) }) }) })] }) }) }));
+};

package/dist/esm/Alerts/StaticAlert.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const getConfig = (type) => {
+    switch (type) {
+        case "info":
+            return {
+                containerClassName: "text-blue-900 bg-blue-100 border border-blue-200 rounded-md",
+                buttonClassName: "rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500",
+                path: (_jsx("path", { d: "M14.1667 17h-3.3334c-.5 0-.8333-.3146-.8333-.7865 0-.472.3333-.7865.8333-.7865H11.5c.0833 0 .1667-.0787.1667-.1573v-3.5394c0-.0786-.0834-.1573-.1667-.1573h-.6667c-.5 0-.8333-.3146-.8333-.7865S10.3333 10 10.8333 10h.8334c.9166 0 1.6666.7079 1.6666 1.573v3.7753c0 .0787.0834.1573.1667.1573h.6667c.5 0 .8333.3146.8333.7865 0 .472-.3333.7079-.8333.7079zM12.3 6c.6933 0 1.3.6067 1.3 1.3s-.52 1.3-1.3 1.3S11 7.9933 11 7.3 11.6067 6 12.3 6zM12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2" })),
+            };
+        case "success":
+            return {
+                containerClassName: "text-green-900 bg-green-100 border border-green-200 rounded-md",
+                buttonClassName: "rounded-md focus:outline-none focus:ring-2 focus:ring-green-500",
+                path: (_jsx("path", { d: "M8.445 12.6675A.9.9 0 0 0 7.1424 13.91l2.5726 2.7448c.3679.3856.9884.3689 1.335-.036l5.591-7.0366a.9.9 0 0 0-1.3674-1.1705l-4.6548 5.9132a.4.4 0 0 1-.607.0252l-1.567-1.6826zM1.9995 12c0-5.5 4.5-10 10-10s10 4.5 10 10-4.5 10-10 10-10-4.5-10-10z" })),
+            };
+        default:
+            return {
+                containerClassName: "text-blue-900 bg-blue-100 border border-blue-200 rounded-md",
+                buttonClassName: "rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500",
+                path: (_jsx("path", { d: "M14.1667 17h-3.3334c-.5 0-.8333-.3146-.8333-.7865 0-.472.3333-.7865.8333-.7865H11.5c.0833 0 .1667-.0787.1667-.1573v-3.5394c0-.0786-.0834-.1573-.1667-.1573h-.6667c-.5 0-.8333-.3146-.8333-.7865S10.3333 10 10.8333 10h.8334c.9166 0 1.6666.7079 1.6666 1.573v3.7753c0 .0787.0834.1573.1667.1573h.6667c.5 0 .8333.3146.8333.7865 0 .472-.3333.7079-.8333.7079zM12.3 6c.6933 0 1.3.6067 1.3 1.3s-.52 1.3-1.3 1.3S11 7.9933 11 7.3 11.6067 6 12.3 6zM12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2" })),
+            };
+    }
+};
+export const StaticAlert = (props) => {
+    const { className, title, description, onClose, type = "info", loading = false, } = props;
+    const config = getConfig(type);
+    return (_jsx("div", { className: `${className} ${config.containerClassName} ${loading ? " hidden" : ""}`, children: _jsxs("div", { className: "flex justify-between flex-wrap", children: [_jsxs("div", { className: "w-0 flex-1 flex", children: [_jsx("div", { className: "mr-3 pt-1", children: _jsx("svg", { width: "26", height: "26", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", children: config.path }) }), _jsxs("div", { children: [_jsx("h4", { className: "text-md leading-6 font-medium", children: title }), _jsx("div", { className: "text-sm", children: description })] })] }), onClose && (_jsx("div", { children: _jsx("button", { type: "button", className: `${config.buttonClassName}`, onClick: onClose, children: _jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", children: _jsx("path", { d: "M17.6555 6.3331a.9.9 0 0 1 .001 1.2728l-4.1032 4.1085a.4.4 0 0 0 0 .5653l4.1031 4.1088a.9002.9002 0 0 1 .0797 1.1807l-.0806.092a.9.9 0 0 1-1.2728-.0009l-4.1006-4.1068a.4.4 0 0 0-.5662 0l-4.099 4.1068a.9.9 0 1 1-1.2738-1.2718l4.1027-4.1089a.4.4 0 0 0 0-.5652L6.343 7.6059a.9002.9002 0 0 1-.0796-1.1807l.0806-.092a.9.9 0 0 1 1.2728.0009l4.099 4.1055a.4.4 0 0 0 .5662 0l4.1006-4.1055a.9.9 0 0 1 1.2728-.001z" }) }) }) }))] }) }));
+};

package/dist/esm/Alerts/index.js

@@ -0,0 +1,2 @@
+export * from "./ErrorBoundaryAlert/ErrorBoundaryAlert.js";
+export * from "./StaticAlert.js";

package/dist/esm/BlockUI/BlockUI.js

@@ -0,0 +1,8 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const BlockUI = (props) => {
+    const { children, active, loadingText } = props;
+    if (!active) {
+        return _jsx(_Fragment, { children: children });
+    }
+    return (_jsx("div", { children: _jsxs("div", { className: "relative", children: [_jsx("div", { className: "absolute bg-gray-100 bg-opacity-20 z-10 h-full w-full flex items-center justify-center", children: _jsxs("div", { className: "flex items-center", children: [_jsx("span", { className: "text-3xl mr-4", children: loadingText }), _jsxs("svg", { className: "animate-spin h-5 w-5 text-gray-600", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [_jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), _jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })] })] }) }), children] }) }));
+};

package/dist/esm/BlockUI/index.js

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

package/dist/esm/Buttons/Button.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Button = (props) => {
+    const { type = "submit", loading = false, loadingText = "Guardando...", title = "Guardar", name = "save", onClickSave, selectedColor = "indigo", children, className = "", disabled = false, } = props;
+    const COLORS = {
+        green: {
+            bg900: "bg-green-900",
+            bg700: "bg-green-700",
+            bg600: "bg-green-600",
+            bg500: "bg-green-500",
+            ring600: "ring-green-600",
+            ring500: "ring-green-500",
+        },
+        indigo: {
+            bg900: "bg-indigo-900",
+            bg700: "bg-indigo-700",
+            bg600: "bg-indigo-600",
+            bg500: "bg-indigo-500",
+            ring600: "ring-indigo-600",
+            ring500: "ring-indigo-500",
+        },
+        red: {
+            bg900: "bg-red-900",
+            bg700: "bg-red-700",
+            bg600: "bg-red-600",
+            bg500: "bg-red-500",
+            ring600: "ring-red-600",
+            ring500: "ring-red-500",
+        },
+        yellow: {
+            bg900: "bg-yellow-900",
+            bg700: "bg-yellow-700",
+            bg600: "bg-yellow-600",
+            bg500: "bg-yellow-500",
+            ring600: "ring-yellow-600",
+            ring500: "ring-yellow-500",
+        },
+    };
+    const color = COLORS[selectedColor];
+    const inside = children ?? title;
+    return (_jsx("button", { type: type, name: "action", disabled: loading || disabled, value: name, onClick: onClickSave, className: `ml-2 ${loading || disabled ? " bg-opacity-25 " : ""} ${loading
+            ? " cursor-progress"
+            : `${disabled ? "" : `hover:${color.bg700}`}`} inline-flex justify-center rounded-md border border-transparent ${color.bg600} py-2 px-4 text-sm font-medium text-white shadow-sm focus:outline-none focus:ring-2 focus:${color.ring500} focus:ring-offset-2 ${className}`, children: loading ? loadingText : inside }));
+};

package/dist/esm/Buttons/index.js

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

package/dist/esm/Card/Card.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const Card = (props) => {
+    const { children, title, className } = props;
+    return (_jsxs("div", { className: `p-4 space-y-3 shadow sm:overflow-hidden sm:rounded-md ${className}`, children: [title && (_jsx("label", { className: "inline text-lg font-medium text-gray-700", children: `${title.toUpperCase()}` })), children] }));
+};

package/dist/esm/Card/index.js

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

package/dist/esm/Chat/ChatLayout.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { TextField } from "../Form/TextField/index.js";
+import { Form } from "@remix-run/react";
+import { LoadingInputSkeleton } from "../Skeletons/LoadingInputSkeleton.js";
+import { AttachmentIconSVG, SendMessageIcon, SpinnerSvg, } from "@zauru-sdk/icons";
+export const ChatLayout = ({ children, sendingMessage = false, formConfig = undefined, }) => {
+    const refAttachment = useRef(null);
+    const [formValues, setFormValues] = useState({ image: null });
+    const handleAttachmentClick = () => {
+        if (refAttachment.current) {
+            refAttachment.current.click();
+        }
+    };
+    return (_jsxs("div", { className: "flex flex-col h-full", children: [_jsx("div", { className: "flex flex-col-reverse overflow-y-auto p-4 bg-gray-100 border border-gray-200 rounded-lg grow max-h-[65vh]", children: children }), _jsxs(Form, { id: "formRef", encType: "multipart/form-data", method: "post", children: [formConfig ? (_jsxs(_Fragment, { children: [_jsx(TextField, { hidden: true, name: "reference", defaultValue: formConfig.reference ?? "" }), _jsx(TextField, { hidden: true, name: "form_id", defaultValue: formConfig.form_id }), _jsx(TextField, { hidden: true, name: "document_id", defaultValue: formConfig.document_id }), _jsx(TextField, { hidden: true, name: "document_type", defaultValue: formConfig.document_type }), _jsx(TextField, { hidden: true, name: "id_number", defaultValue: formConfig?.id_number ?? "" })] })) : (_jsx(_Fragment, {})), _jsxs("div", { className: "mt-4 flex", children: [sendingMessage ? (_jsx(LoadingInputSkeleton, {})) : (_jsx("input", { name: `message${formConfig?.messageFieldId
+                                    ? `_${formConfig?.messageFieldId}`
+                                    : ""}`, type: "text", placeholder: "Escribe un mensaje...", className: "form-input px-4 py-2 border border-gray-300 rounded-l-lg grow" })), _jsx("button", { onClick: handleAttachmentClick, className: `${formValues?.image ? "bg-blue-500" : ""} hover:bg-blue-700 text-white font-bold py-2 px-4`, type: "button", children: _jsx(AttachmentIconSVG, {}) }), _jsx("button", { className: "bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-r-lg", type: "submit", name: "action", value: "sendMessage", children: sendingMessage ? _jsx(SpinnerSvg, {}) : _jsx(SendMessageIcon, {}) })] }), _jsx("input", { ref: refAttachment, hidden: true, name: `attachment${formConfig?.attachmentFieldId
+                            ? `_${formConfig?.attachmentFieldId}`
+                            : ""}`, type: "file", accept: ".jpg, .png, .jpeg, .png", onChange: (e) => {
+                            if (e.target.value && e.target.value !== "") {
+                                setFormValues({ ...formValues, image: e.target.value });
+                            }
+                            else {
+                                setFormValues({ ...formValues, image: null });
+                            }
+                        } })] })] }));
+};

package/dist/esm/Chat/ChatMessageHistory.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { CheckIconSVG, PencilSvg } from "@zauru-sdk/icons";
+import { useState, useEffect, useRef } from "react";
+export const ChatMessageHistory = (props) => {
+    const { author, content, onLike, onUpdateComment, id, commentOwner = false, date, imageLink, } = props;
+    const initials = author ? author[0].toUpperCase() : "A";
+    const [isUpdating, setIsUpdating] = useState(false);
+    const [updatedContent, setUpdatedContent] = useState(content);
+    const textAreaRef = useRef(null);
+    const [shouldPulse, setShouldPulse] = useState(false);
+    useEffect(() => {
+        if (isUpdating && textAreaRef.current) {
+            textAreaRef.current.style.height = "auto";
+            textAreaRef.current.style.height = `${textAreaRef.current.scrollHeight}px`;
+            textAreaRef.current.focus();
+        }
+    }, [isUpdating]);
+    // Efecto secundario que se ejecuta cada vez que 'isUpdating' cambia
+    useEffect(() => {
+        // Activar la animación
+        setShouldPulse(true);
+        // Establecer un temporizador para eliminar la clase después de que la animación se haya completado
+        const timer = setTimeout(() => {
+            setShouldPulse(false);
+        }, 15000); // Tiempo total de la animación
+        // Limpiar el temporizador si el componente se desmonta o si 'isUpdating' cambia de nuevo antes de que la animación se complete
+        return () => clearTimeout(timer);
+    }, [isUpdating]);
+    const handleUpdate = (e) => {
+        if (e.target.value.length <= 254) {
+            setUpdatedContent(e.target.value);
+        }
+    };
+    const handleUpdateClick = () => {
+        if (isUpdating) {
+            if (textAreaRef.current) {
+                textAreaRef.current.blur();
+            }
+            //onUpdateComment && onUpdateComment(updatedContent, itsNew);
+        }
+        setIsUpdating(!isUpdating);
+    };
+    return (_jsxs("div", { className: "p-1 rounded-xl flex items-center space-x-4 relative", children: [commentOwner && (_jsx("div", { className: "absolute top-2 right-2", children: _jsx("button", { onClick: handleUpdateClick, className: `${shouldPulse ? "animate-custom-pulse" : ""}`, children: isUpdating ? _jsx(CheckIconSVG, {}) : _jsx(PencilSvg, {}) }) })), _jsx("div", { className: `w-[0%] lg:w-[8%] h-16 bg-purple-300 rounded-full flex items-center justify-center overflow-hidden text-white text-xl font-bold`, children: initials }), _jsxs("div", { className: "flex flex-col justify-between h-full w-[92%]", children: [_jsxs("div", { children: [_jsxs("div", { className: "flex flex-row space-x-2", children: [_jsx("div", { className: "text-xl font-medium text-black", children: author }), _jsx("div", { className: "text-xl font-medium text-gray-500", children: date && _jsxs(_Fragment, { children: [" - ", date] }) })] }), isUpdating ? (_jsx("textarea", { ref: textAreaRef, className: "bg-gray-100 rounded p-2 w-full resize-none", value: updatedContent, onChange: handleUpdate, maxLength: 254, placeholder: "Deja tus buenos deseos..." })) : (_jsx("p", { className: "text-gray-500", children: updatedContent }))] }), _jsx("div", { className: "flex justify-end items-center", children: _jsx("button", { onClick: () => { }, children: _jsx(_Fragment, {}) }) })] }), imageLink && (_jsx("div", { className: `w-[25%] flex items-center justify-center overflow-hidden text-white text-xl font-bold`, children: _jsx("div", { onClick: () => {
+                        return window.open(imageLink, "_blank");
+                    }, children: _jsx("img", { src: imageLink, alt: "IMG_CHAT", className: `h-48 w-48 inline mr-1 pb-1`, style: {
+                            stroke: "currentColor",
+                            strokeWidth: 2,
+                            strokeLinecap: "round",
+                            strokeLinejoin: "round",
+                            fill: "none",
+                            backgroundColor: "transparent",
+                        } }) }) }))] }));
+};

package/dist/esm/Chat/index.js

@@ -0,0 +1,2 @@
+export * from "./ChatLayout.js";
+export * from "./ChatMessageHistory.js";

package/dist/esm/ConnectionState/ConnectionState.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useIsOnline } from "@zauru-sdk/hooks";
+export const ConnectionState = () => {
+    const isOnline = useIsOnline();
+    // Definir estilos
+    const styles = {
+        container: {
+            padding: "10px",
+            borderRadius: "5px",
+            backgroundColor: isOnline ? "#d4edda" : "#f8d7da",
+            color: isOnline ? "#155724" : "#721c24",
+            fontWeight: "bold",
+        },
+        text: {
+            fontSize: "16px",
+            margin: 0,
+        },
+    };
+    // Renderizar el estado de conexión
+    return (_jsx("div", { style: styles.container, children: _jsx("p", { style: styles.text, children: isOnline ? "ONLINE ✅🌐" : "OFFLINE ❌🌐" }) }));
+};

package/dist/esm/ConnectionState/index.js

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

package/dist/esm/Containers/BodyContainer.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+export const BodyContainer = (props) => {
+    const { children } = props;
+    return (_jsx(_Fragment, { children: _jsx("body", { className: "flex flex-col min-h-screen m-0", children: children }) }));
+};

package/dist/esm/Containers/ButtonSectionContainer.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const ButtonSectionContainer = (props) => {
+    const { children, className, whitBg = true } = props;
+    return (_jsx("div", { className: `${whitBg ? "bg-gray-50" : ""} px-4 py-3 text-right sm:px-6 ${className}`, children: children }));
+};

package/dist/esm/Containers/Container.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+export const Container = (props) => {
+    const { title, description, children, className = "", rightContent } = props;
+    const titleInfo = (_jsxs(_Fragment, { children: [title && (_jsx("h3", { className: "text-3xl font-bold leading-8 text-gray-900", children: title })), description && (_jsx("p", { className: "mt-1 text-md text-gray-600", children: description }))] }));
+    return (_jsx(_Fragment, { children: _jsxs("div", { className: `mx-2 ${className}`, children: [rightContent && (_jsxs("div", { className: "flex justify-between items-center", children: [_jsx("div", { children: titleInfo }), _jsx("div", { children: rightContent })] })), !rightContent && titleInfo, _jsx("div", { className: "mt-5 space-y-5", children: children })] }) }));
+};

package/dist/esm/Containers/DoubleContainer.js

@@ -0,0 +1,14 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const DoubleContainer = (props) => {
+    const { title, description, className = "", children } = props;
+    const getChildren = (index) => {
+        if (children && Array.isArray(children) && children[index]) {
+            return children[index];
+        }
+        if (children && index === 0) {
+            return children;
+        }
+        return _jsx(_Fragment, {});
+    };
+    return (_jsx(_Fragment, { children: _jsxs("div", { className: `mx-2 ${className}`, children: [title && (_jsx("h3", { className: "text-3xl font-bold leading-8 text-gray-900", children: title })), description && (_jsx("p", { className: "mt-1 text-md text-gray-600", children: description })), _jsxs("div", { className: "grid xl:grid-cols-3 md:grid-cols-1 gap-4", children: [_jsx("div", { className: "xl:col-span-2 md:col-span-1 mt-5", children: getChildren(0) }), _jsx("div", { className: "xl:col-span-1 md:col-span-1 mt-5", children: getChildren(1) })] })] }) }));
+};

package/dist/esm/Containers/MainContainer.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+export const MainContainer = (props) => {
+    const { children } = props;
+    return (_jsx(_Fragment, { children: _jsx("div", { className: "md:p-10 p-0 mt-10 ml-2 mr-2 mb-10 md:mt-0 md:ml-0 md:mr-0 md:mb-0", children: children }) }));
+};

package/dist/esm/Containers/OutletContainer.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+export const OutletContainer = (props) => {
+    const { children } = props;
+    return (_jsx(_Fragment, { children: _jsx("div", { className: "flex-1 overflow-x-auto", children: children }) }));
+};

package/dist/esm/Containers/SubContainer.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+export const SubContainer = (props) => {
+    const { title, description, children, className = "", rightContent } = props;
+    const titleInfo = (_jsxs(_Fragment, { children: [title && (_jsx("h3", { className: "text-xl font-bold leading-8 text-gray-900", children: title })), description && (_jsx("p", { className: "mt-1 text-md text-gray-600", children: description }))] }));
+    return (_jsxs("div", { className: `${className}`, children: [rightContent && (_jsxs("div", { className: "flex justify-between items-center", children: [_jsx("div", { children: titleInfo }), _jsx("div", { children: rightContent })] })), !rightContent && titleInfo, _jsx("div", { className: "mt-5 space-y-3", children: children })] }));
+};

package/dist/esm/Containers/index.js

@@ -0,0 +1,7 @@
+export * from "./BodyContainer.js";
+export * from "./ButtonSectionContainer.js";
+export * from "./Container.js";
+export * from "./DoubleContainer.js";
+export * from "./MainContainer.js";
+export * from "./OutletContainer.js";
+export * from "./SubContainer.js";

package/dist/esm/DynamicTable/BasicPrintDynamicTable.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { isNumeric } from "@zauru-sdk/common";
+//TABLA PARA LA IMPRESION:
+export const BasicTableHTML = (props) => {
+    const { data, footer, headers } = props;
+    return (_jsxs("table", { style: { borderCollapse: "collapse", width: "100%" }, children: [_jsx("thead", { children: _jsx("tr", { children: headers?.map((titulo, index) => (_jsx("th", { style: {
+                            border: "1px solid black",
+                            padding: "10px",
+                            textAlign: "center",
+                            whiteSpace: "normal",
+                        }, children: titulo.label }, index))) }) }), _jsx("tbody", { children: data?.map((fila, index) => (_jsx("tr", { children: headers?.map((titulo, index) => (_jsx("td", { style: {
+                            border: "1px solid black",
+                            padding: "1px",
+                            textAlign: "center",
+                            whiteSpace: "normal",
+                            fontSize: isNumeric(fila[titulo.name])
+                                ? "2em"
+                                : "1em",
+                        }, children: fila[titulo.name] }, index))) }, index))) }), _jsx("tfoot", { children: _jsx("tr", { children: headers?.map((titulo, index) => (_jsx("td", { style: {
+                            padding: "10px",
+                            textAlign: "center",
+                            whiteSpace: "normal",
+                            fontSize: isNumeric(footer[titulo.name])
+                                ? "2em"
+                                : "1em",
+                        }, children: footer[titulo.name] }, index))) }) })] }));
+};