@zauru-sdk/components 1.0.51 → 1.0.53

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.0.53](https://github.com/intuitiva/zauru-typescript-sdk/compare/v1.0.52...v1.0.53) (2024-04-03)
+
+**Note:** Version bump only for package @zauru-sdk/components
+
+
+
+
+
+## [1.0.52](https://github.com/intuitiva/zauru-typescript-sdk/compare/v1.0.51...v1.0.52) (2024-04-03)
+
+**Note:** Version bump only for package @zauru-sdk/components
+
+
+
+
+
 ## [1.0.51](https://github.com/intuitiva/zauru-typescript-sdk/compare/v1.0.50...v1.0.51) (2024-04-02)
 
 **Note:** Version bump only for package @zauru-sdk/components

package/dist/Buttons/Button.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+/// <reference types="react" resolution-mode="require"/>
 type Props = {
     type?: "reset" | "button" | "submit" | undefined;
     title?: string;

package/dist/Table/ZauruTable.d.ts

@@ -1,5 +1,5 @@
 import type { TableProps } from "react-data-table-component";
-import { ExpandableRowsComponent } from "react-data-table-component/dist/DataTable/types";
+import { ExpandableRowsComponent } from "react-data-table-component/dist/DataTable/types.js";
 type Props = TableProps<any> & {
     columns: any;
     conditionalRowStyles?: any;

package/dist/Zendesk/Chat.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+/// <reference types="react" resolution-mode="require"/>
 export declare const logoutFromZendesk: () => void;
 export declare const ZendeskAPI: (...args: any[]) => void;
 interface ZendeskProps {

package/dist/cjs/Alerts/ErrorBoundaryAlert/ErrorBoundaryAlert.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ErrorBoundaryAlert = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ErrorBoundaryAlert = (props) => {
+    const { title, description } = props;
+    return ((0, jsx_runtime_1.jsx)("div", { className: "rounded-full top-20 mx-auto p-3", children: (0, jsx_runtime_1.jsx)("div", { className: "p-4 text-red-900 bg-red-100 border border-red-200 rounded-md", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between flex-wrap", children: [(0, jsx_runtime_1.jsxs)("div", { className: "w-0 flex-1 flex", children: [(0, jsx_runtime_1.jsx)("div", { className: "mr-3 pt-1", children: (0, jsx_runtime_1.jsx)("svg", { width: "26", height: "26", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", children: (0, jsx_runtime_1.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" }) }) }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h4", { className: "text-md leading-6 font-medium", children: title?.toString() }), (0, jsx_runtime_1.jsx)("p", { className: "text-sm", children: description?.toString() })] })] }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("button", { type: "button", className: "rounded-md focus:outline-none focus:ring-2 focus:ring-red-500", children: (0, jsx_runtime_1.jsx)("svg", { width: "24", height: "24", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", children: (0, jsx_runtime_1.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" }) }) }) })] }) }) }));
+};
+exports.ErrorBoundaryAlert = ErrorBoundaryAlert;

package/dist/cjs/Alerts/StaticAlert.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StaticAlert = void 0;
+const jsx_runtime_1 = require("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: ((0, jsx_runtime_1.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: ((0, jsx_runtime_1.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: ((0, jsx_runtime_1.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" })),
+            };
+    }
+};
+const StaticAlert = (props) => {
+    const { className, title, description, onClose, type = "info", loading = false, } = props;
+    const config = getConfig(type);
+    return ((0, jsx_runtime_1.jsx)("div", { className: `${className} ${config.containerClassName} ${loading ? " hidden" : ""}`, children: (0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between flex-wrap", children: [(0, jsx_runtime_1.jsxs)("div", { className: "w-0 flex-1 flex", children: [(0, jsx_runtime_1.jsx)("div", { className: "mr-3 pt-1", children: (0, jsx_runtime_1.jsx)("svg", { width: "26", height: "26", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", children: config.path }) }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h4", { className: "text-md leading-6 font-medium", children: title }), (0, jsx_runtime_1.jsx)("div", { className: "text-sm", children: description })] })] }), onClose && ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("button", { type: "button", className: `${config.buttonClassName}`, onClick: onClose, children: (0, jsx_runtime_1.jsx)("svg", { width: "24", height: "24", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", children: (0, jsx_runtime_1.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" }) }) }) }))] }) }));
+};
+exports.StaticAlert = StaticAlert;

package/dist/cjs/Alerts/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("./ErrorBoundaryAlert/ErrorBoundaryAlert.js"), exports);
+__exportStar(require("./StaticAlert.js"), exports);

package/dist/cjs/BlockUI/BlockUI.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BlockUI = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const BlockUI = (props) => {
+    const { children, active, loadingText } = props;
+    if (!active) {
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
+    }
+    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [(0, jsx_runtime_1.jsx)("div", { className: "absolute bg-gray-100 bg-opacity-20 z-10 h-full w-full flex items-center justify-center", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-3xl mr-4", children: loadingText }), (0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsx)("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), (0, jsx_runtime_1.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] }) }));
+};
+exports.BlockUI = BlockUI;

package/dist/cjs/BlockUI/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("./BlockUI.js"), exports);

package/dist/cjs/Buttons/Button.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Button = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+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 ((0, jsx_runtime_1.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 }));
+};
+exports.Button = Button;

package/dist/cjs/Buttons/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("./Button.js"), exports);

package/dist/cjs/Card/Card.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Card = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Card = (props) => {
+    const { children, title, className } = props;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: `p-4 space-y-3 shadow sm:overflow-hidden sm:rounded-md ${className}`, children: [title && ((0, jsx_runtime_1.jsx)("label", { className: "inline text-lg font-medium text-gray-700", children: `${title.toUpperCase()}` })), children] }));
+};
+exports.Card = Card;

package/dist/cjs/Card/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("./Card.js"), exports);

package/dist/cjs/Chat/ChatLayout.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChatLayout = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const index_js_1 = require("../Form/TextField/index.js");
+const react_2 = require("@remix-run/react");
+const LoadingInputSkeleton_js_1 = require("../Skeletons/LoadingInputSkeleton.js");
+const icons_1 = require("@zauru-sdk/icons");
+const ChatLayout = ({ children, sendingMessage = false, formConfig = undefined, }) => {
+    const refAttachment = (0, react_1.useRef)(null);
+    const [formValues, setFormValues] = (0, react_1.useState)({ image: null });
+    const handleAttachmentClick = () => {
+        if (refAttachment.current) {
+            refAttachment.current.click();
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col h-full", children: [(0, jsx_runtime_1.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 }), (0, jsx_runtime_1.jsxs)(react_2.Form, { id: "formRef", encType: "multipart/form-data", method: "post", children: [formConfig ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(index_js_1.TextField, { hidden: true, name: "reference", defaultValue: formConfig.reference ?? "" }), (0, jsx_runtime_1.jsx)(index_js_1.TextField, { hidden: true, name: "form_id", defaultValue: formConfig.form_id }), (0, jsx_runtime_1.jsx)(index_js_1.TextField, { hidden: true, name: "document_id", defaultValue: formConfig.document_id }), (0, jsx_runtime_1.jsx)(index_js_1.TextField, { hidden: true, name: "document_type", defaultValue: formConfig.document_type }), (0, jsx_runtime_1.jsx)(index_js_1.TextField, { hidden: true, name: "id_number", defaultValue: formConfig?.id_number ?? "" })] })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {})), (0, jsx_runtime_1.jsxs)("div", { className: "mt-4 flex", children: [sendingMessage ? ((0, jsx_runtime_1.jsx)(LoadingInputSkeleton_js_1.LoadingInputSkeleton, {})) : ((0, jsx_runtime_1.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" })), (0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)(icons_1.AttachmentIconSVG, {}) }), (0, jsx_runtime_1.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 ? (0, jsx_runtime_1.jsx)(icons_1.SpinnerSvg, {}) : (0, jsx_runtime_1.jsx)(icons_1.SendMessageIcon, {}) })] }), (0, jsx_runtime_1.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 });
+                            }
+                        } })] })] }));
+};
+exports.ChatLayout = ChatLayout;

package/dist/cjs/Chat/ChatMessageHistory.js

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChatMessageHistory = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const icons_1 = require("@zauru-sdk/icons");
+const react_1 = require("react");
+const ChatMessageHistory = (props) => {
+    const { author, content, onLike, onUpdateComment, id, commentOwner = false, date, imageLink, } = props;
+    const initials = author ? author[0].toUpperCase() : "A";
+    const [isUpdating, setIsUpdating] = (0, react_1.useState)(false);
+    const [updatedContent, setUpdatedContent] = (0, react_1.useState)(content);
+    const textAreaRef = (0, react_1.useRef)(null);
+    const [shouldPulse, setShouldPulse] = (0, react_1.useState)(false);
+    (0, react_1.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
+    (0, react_1.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 ((0, jsx_runtime_1.jsxs)("div", { className: "p-1 rounded-xl flex items-center space-x-4 relative", children: [commentOwner && ((0, jsx_runtime_1.jsx)("div", { className: "absolute top-2 right-2", children: (0, jsx_runtime_1.jsx)("button", { onClick: handleUpdateClick, className: `${shouldPulse ? "animate-custom-pulse" : ""}`, children: isUpdating ? (0, jsx_runtime_1.jsx)(icons_1.CheckIconSVG, {}) : (0, jsx_runtime_1.jsx)(icons_1.PencilSvg, {}) }) })), (0, jsx_runtime_1.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 }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col justify-between h-full w-[92%]", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-row space-x-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-xl font-medium text-black", children: author }), (0, jsx_runtime_1.jsx)("div", { className: "text-xl font-medium text-gray-500", children: date && (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [" - ", date] }) })] }), isUpdating ? ((0, jsx_runtime_1.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..." })) : ((0, jsx_runtime_1.jsx)("p", { className: "text-gray-500", children: updatedContent }))] }), (0, jsx_runtime_1.jsx)("div", { className: "flex justify-end items-center", children: (0, jsx_runtime_1.jsx)("button", { onClick: () => { }, children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}) }) })] }), imageLink && ((0, jsx_runtime_1.jsx)("div", { className: `w-[25%] flex items-center justify-center overflow-hidden text-white text-xl font-bold`, children: (0, jsx_runtime_1.jsx)("div", { onClick: () => {
+                        return window.open(imageLink, "_blank");
+                    }, children: (0, jsx_runtime_1.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",
+                        } }) }) }))] }));
+};
+exports.ChatMessageHistory = ChatMessageHistory;

package/dist/cjs/Chat/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("./ChatLayout.js"), exports);
+__exportStar(require("./ChatMessageHistory.js"), exports);

package/dist/cjs/ConnectionState/ConnectionState.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConnectionState = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const hooks_1 = require("@zauru-sdk/hooks");
+const ConnectionState = () => {
+    const isOnline = (0, hooks_1.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 ((0, jsx_runtime_1.jsx)("div", { style: styles.container, children: (0, jsx_runtime_1.jsx)("p", { style: styles.text, children: isOnline ? "ONLINE ✅🌐" : "OFFLINE ❌🌐" }) }));
+};
+exports.ConnectionState = ConnectionState;

package/dist/cjs/ConnectionState/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("./ConnectionState.js"), exports);

package/dist/cjs/Containers/BodyContainer.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BodyContainer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const BodyContainer = (props) => {
+    const { children } = props;
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("body", { className: "flex flex-col min-h-screen m-0", children: children }) }));
+};
+exports.BodyContainer = BodyContainer;

package/dist/cjs/Containers/ButtonSectionContainer.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonSectionContainer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ButtonSectionContainer = (props) => {
+    const { children, className, whitBg = true } = props;
+    return ((0, jsx_runtime_1.jsx)("div", { className: `${whitBg ? "bg-gray-50" : ""} px-4 py-3 text-right sm:px-6 ${className}`, children: children }));
+};
+exports.ButtonSectionContainer = ButtonSectionContainer;

package/dist/cjs/Containers/Container.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Container = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Container = (props) => {
+    const { title, description, children, className = "", rightContent } = props;
+    const titleInfo = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [title && ((0, jsx_runtime_1.jsx)("h3", { className: "text-3xl font-bold leading-8 text-gray-900", children: title })), description && ((0, jsx_runtime_1.jsx)("p", { className: "mt-1 text-md text-gray-600", children: description }))] }));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", { className: `mx-2 ${className}`, children: [rightContent && ((0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between items-center", children: [(0, jsx_runtime_1.jsx)("div", { children: titleInfo }), (0, jsx_runtime_1.jsx)("div", { children: rightContent })] })), !rightContent && titleInfo, (0, jsx_runtime_1.jsx)("div", { className: "mt-5 space-y-5", children: children })] }) }));
+};
+exports.Container = Container;

package/dist/cjs/Containers/DoubleContainer.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DoubleContainer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+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 (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
+    };
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", { className: `mx-2 ${className}`, children: [title && ((0, jsx_runtime_1.jsx)("h3", { className: "text-3xl font-bold leading-8 text-gray-900", children: title })), description && ((0, jsx_runtime_1.jsx)("p", { className: "mt-1 text-md text-gray-600", children: description })), (0, jsx_runtime_1.jsxs)("div", { className: "grid xl:grid-cols-3 md:grid-cols-1 gap-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "xl:col-span-2 md:col-span-1 mt-5", children: getChildren(0) }), (0, jsx_runtime_1.jsx)("div", { className: "xl:col-span-1 md:col-span-1 mt-5", children: getChildren(1) })] })] }) }));
+};
+exports.DoubleContainer = DoubleContainer;

package/dist/cjs/Containers/MainContainer.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MainContainer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const MainContainer = (props) => {
+    const { children } = props;
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.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 }) }));
+};
+exports.MainContainer = MainContainer;

package/dist/cjs/Containers/OutletContainer.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OutletContainer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const OutletContainer = (props) => {
+    const { children } = props;
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("div", { className: "flex-1 overflow-x-auto", children: children }) }));
+};
+exports.OutletContainer = OutletContainer;

package/dist/cjs/Containers/SubContainer.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SubContainer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const SubContainer = (props) => {
+    const { title, description, children, className = "", rightContent } = props;
+    const titleInfo = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [title && ((0, jsx_runtime_1.jsx)("h3", { className: "text-xl font-bold leading-8 text-gray-900", children: title })), description && ((0, jsx_runtime_1.jsx)("p", { className: "mt-1 text-md text-gray-600", children: description }))] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: `${className}`, children: [rightContent && ((0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between items-center", children: [(0, jsx_runtime_1.jsx)("div", { children: titleInfo }), (0, jsx_runtime_1.jsx)("div", { children: rightContent })] })), !rightContent && titleInfo, (0, jsx_runtime_1.jsx)("div", { className: "mt-5 space-y-3", children: children })] }));
+};
+exports.SubContainer = SubContainer;

package/dist/cjs/Containers/index.js

@@ -0,0 +1,23 @@
+"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("./BodyContainer.js"), exports);
+__exportStar(require("./ButtonSectionContainer.js"), exports);
+__exportStar(require("./Container.js"), exports);
+__exportStar(require("./DoubleContainer.js"), exports);
+__exportStar(require("./MainContainer.js"), exports);
+__exportStar(require("./OutletContainer.js"), exports);
+__exportStar(require("./SubContainer.js"), exports);

package/dist/cjs/DynamicTable/BasicPrintDynamicTable.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BasicTableHTML = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const common_1 = require("@zauru-sdk/common");
+//TABLA PARA LA IMPRESION:
+const BasicTableHTML = (props) => {
+    const { data, footer, headers } = props;
+    return ((0, jsx_runtime_1.jsxs)("table", { style: { borderCollapse: "collapse", width: "100%" }, children: [(0, jsx_runtime_1.jsx)("thead", { children: (0, jsx_runtime_1.jsx)("tr", { children: headers?.map((titulo, index) => ((0, jsx_runtime_1.jsx)("th", { style: {
+                            border: "1px solid black",
+                            padding: "10px",
+                            textAlign: "center",
+                            whiteSpace: "normal",
+                        }, children: titulo.label }, index))) }) }), (0, jsx_runtime_1.jsx)("tbody", { children: data?.map((fila, index) => ((0, jsx_runtime_1.jsx)("tr", { children: headers?.map((titulo, index) => ((0, jsx_runtime_1.jsx)("td", { style: {
+                            border: "1px solid black",
+                            padding: "1px",
+                            textAlign: "center",
+                            whiteSpace: "normal",
+                            fontSize: (0, common_1.isNumeric)(fila[titulo.name])
+                                ? "2em"
+                                : "1em",
+                        }, children: fila[titulo.name] }, index))) }, index))) }), (0, jsx_runtime_1.jsx)("tfoot", { children: (0, jsx_runtime_1.jsx)("tr", { children: headers?.map((titulo, index) => ((0, jsx_runtime_1.jsx)("td", { style: {
+                            padding: "10px",
+                            textAlign: "center",
+                            whiteSpace: "normal",
+                            fontSize: (0, common_1.isNumeric)(footer[titulo.name])
+                                ? "2em"
+                                : "1em",
+                        }, children: footer[titulo.name] }, index))) }) })] }));
+};
+exports.BasicTableHTML = BasicTableHTML;