@zauru-sdk/components 1.0.51 → 1.0.52

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.
 
+## [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/package.json

@@ -1,15 +1,18 @@
 {
   "name": "@zauru-sdk/components",
-  "version": "1.0.51",
+  "version": "1.0.52",
   "description": "Componentes reutilizables en las WebApps de Zauru.",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/esm/index.js",
+  "types": "./dist/index.d.ts",
   "type": "module",
   "publishConfig": {
     "access": "public"
   },
   "scripts": {
-    "build": "tsc",
+    "build": "npm run build:cjs && npm run build:esm",
+    "build:cjs": "tsc -p tsconfig.cjs.json",
+    "build:esm": "tsc -p tsconfig.esm.json",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "author": {
@@ -22,13 +25,6 @@
     "@types/jsonwebtoken": "^9.0.2",
     "@types/react": "^18.2.20",
     "@types/react-dom": "^18.2.7",
-    "eslint": "^8.38.0",
-    "eslint-config-prettier": "^9.0.0",
-    "eslint-import-resolver-typescript": "^3.6.1",
-    "eslint-plugin-import": "^2.28.1",
-    "eslint-plugin-jsx-a11y": "^6.7.1",
-    "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
     "postcss": "^8.4.35",
     "tailwindcss": "^3.4.1",
     "typescript": "^5.1.6"
@@ -37,10 +33,10 @@
     "@reduxjs/toolkit": "^2.2.1",
     "@remix-run/react": "^2.8.1",
     "@zauru-sdk/common": "^1.0.50",
-    "@zauru-sdk/hooks": "^1.0.51",
+    "@zauru-sdk/hooks": "^1.0.52",
     "@zauru-sdk/icons": "^1.0.50",
     "@zauru-sdk/types": "^1.0.49",
-    "@zauru-sdk/utils": "^1.0.50",
+    "@zauru-sdk/utils": "^1.0.52",
     "framer-motion": "^11.0.8",
     "jsonwebtoken": "^9.0.2",
     "react": "^18.2.0",
@@ -50,8 +46,5 @@
     "react-select": "^5.8.0",
     "styled-components": "^5.3.5"
   },
-  "engines": {
-    "node": ">=20"
-  },
-  "gitHead": "486709e3c5ca7b076f4d4ea882179b38c30998a8"
+  "gitHead": "f5c0e92ea8dbca13f636f8bdeaf3976a0b294424"
 }

package/tsconfig.cjs.json

@@ -0,0 +1,8 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "module": "CommonJS",
+    "moduleResolution": "Node",
+    "outDir": "./dist/cjs"
+  }
+}

package/tsconfig.esm.json

@@ -0,0 +1,11 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "module": "NodeNext",
+    "target": "ES2022",
+    "moduleResolution": "NodeNext",
+    "outDir": "./dist/esm",
+    "declaration": true,
+    "declarationDir": "./dist"
+  }
+}

package/tsconfig.json

@@ -1,26 +1,17 @@
 {
-  "include": ["env.d.ts", "**/*.ts", "**/*.tsx", "**/*.css"],
+  "include": ["**/*.ts", "**/*.tsx", "**/*.css"],
   "compilerOptions": {
-    "allowSyntheticDefaultImports": true,
-    "lib": ["DOM", "DOM.Iterable", "ES2022"],
-    "isolatedModules": true,
-    "esModuleInterop": true,
-    "jsx": "react-jsx",
-    "module": "ESNext",
-    "moduleResolution": "Bundler",
-    "resolveJsonModule": true,
     "target": "ES2022",
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "esModuleInterop": true,
     "strict": true,
-    "allowJs": true,
-    "skipLibCheck": true,
-    "forceConsistentCasingInFileNames": true,
+    "jsx": "react-jsx",
     "baseUrl": ".",
     "outDir": "./dist",
     "rootDir": "./src",
-    "declaration": true,
-    "declarationDir": "./dist",
     "paths": {
-      "~/*": ["./app/*"]
+      "~/*": ["./src/*"]
     }
   }
 }

package/dist/Alerts/ErrorBoundaryAlert/ErrorBoundaryAlert.d.ts

@@ -1,6 +0,0 @@
-type Props = {
-    title: string;
-    description: string;
-};
-export declare const ErrorBoundaryAlert: (props: Props) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/Alerts/ErrorBoundaryAlert/ErrorBoundaryAlert.js

@@ -1,5 +0,0 @@
-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/Alerts/StaticAlert.d.ts

@@ -1,11 +0,0 @@
-type Props = {
-    className?: string;
-    title: string;
-    description: any;
-    showCloseButton?: boolean;
-    onClose?: () => void;
-    type?: "success" | "info";
-    loading?: boolean;
-};
-export declare const StaticAlert: (props: Props) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/Alerts/StaticAlert.js

@@ -1,28 +0,0 @@
-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/Alerts/index.d.ts

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

package/dist/Alerts/index.js

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

package/dist/BlockUI/BlockUI.d.ts

@@ -1,8 +0,0 @@
-import React from "react";
-type Props = {
-    children: React.ReactNode;
-    active: boolean;
-    loadingText?: string;
-};
-export declare const BlockUI: (props: Props) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/BlockUI/BlockUI.js

@@ -1,8 +0,0 @@
-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/BlockUI/index.d.ts

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

package/dist/BlockUI/index.js

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

package/dist/Buttons/Button.d.ts

@@ -1,15 +0,0 @@
-/// <reference types="react" />
-type Props = {
-    type?: "reset" | "button" | "submit" | undefined;
-    title?: string;
-    name?: string;
-    onClickSave?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-    loading?: boolean;
-    loadingText?: string;
-    selectedColor?: "indigo" | "green" | "red" | "yellow";
-    children?: React.ReactNode;
-    className?: string;
-    disabled?: boolean;
-};
-export declare const Button: (props: Props) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/Buttons/Button.js

@@ -1,43 +0,0 @@
-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/Buttons/index.d.ts

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

package/dist/Buttons/index.js

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

package/dist/Card/Card.d.ts

@@ -1,8 +0,0 @@
-import React from "react";
-type Props = {
-    children: React.ReactNode;
-    title?: string;
-    className?: string;
-};
-export declare const Card: (props: Props) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/Card/Card.js

@@ -1,5 +0,0 @@
-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/Card/index.d.ts

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

package/dist/Card/index.js

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

package/dist/Chat/ChatLayout.d.ts

@@ -1,17 +0,0 @@
-import React from "react";
-import { FormDocumentType } from "@zauru-sdk/types";
-interface ChatLayoutProps {
-    children?: React.ReactNode;
-    sendingMessage?: boolean;
-    formConfig?: {
-        document_type: FormDocumentType;
-        form_id: number;
-        document_id: number;
-        id_number?: string;
-        reference?: string;
-        attachmentFieldId: number;
-        messageFieldId: number;
-    };
-}
-export declare const ChatLayout: React.FC<ChatLayoutProps>;
-export {};

package/dist/Chat/ChatLayout.js

@@ -1,27 +0,0 @@
-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/Chat/ChatMessageHistory.d.ts

@@ -1,12 +0,0 @@
-type Props = {
-    author: string;
-    content: string;
-    date?: string;
-    onLike?: (like: boolean) => void;
-    onUpdateComment?: (text: string, itsNew?: boolean) => void;
-    id: string;
-    commentOwner?: boolean;
-    imageLink?: string;
-};
-export declare const ChatMessageHistory: (props: Props) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/Chat/ChatMessageHistory.js

@@ -1,53 +0,0 @@
-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/Chat/index.d.ts

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

package/dist/Chat/index.js

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

package/dist/ConnectionState/ConnectionState.d.ts

@@ -1 +0,0 @@
-export declare const ConnectionState: () => import("react/jsx-runtime").JSX.Element;

package/dist/ConnectionState/ConnectionState.js

@@ -1,21 +0,0 @@
-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/ConnectionState/index.d.ts

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

package/dist/ConnectionState/index.js

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

package/dist/Containers/BodyContainer.d.ts

@@ -1,6 +0,0 @@
-import React from "react";
-type Props = {
-    children: React.ReactNode;
-};
-export declare const BodyContainer: (props: Props) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/Containers/BodyContainer.js

@@ -1,5 +0,0 @@
-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/Containers/ButtonSectionContainer.d.ts

@@ -1,8 +0,0 @@
-import React from "react";
-type Props = {
-    children: React.ReactNode;
-    className?: string;
-    whitBg?: boolean;
-};
-export declare const ButtonSectionContainer: (props: Props) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/Containers/ButtonSectionContainer.js

@@ -1,5 +0,0 @@
-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/Containers/Container.d.ts

@@ -1,10 +0,0 @@
-import React from "react";
-type Props = {
-    title?: string;
-    description?: string;
-    children: React.ReactNode;
-    className?: string;
-    rightContent?: React.ReactNode;
-};
-export declare const Container: (props: Props) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/Containers/Container.js

@@ -1,6 +0,0 @@
-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/Containers/DoubleContainer.d.ts

@@ -1,9 +0,0 @@
-import React from "react";
-type Props = {
-    title?: string;
-    description?: string;
-    className?: string;
-    children: React.ReactNode;
-};
-export declare const DoubleContainer: (props: Props) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/Containers/DoubleContainer.js

@@ -1,14 +0,0 @@
-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/Containers/MainContainer.d.ts

@@ -1,6 +0,0 @@
-import React from "react";
-type Props = {
-    children: React.ReactNode;
-};
-export declare const MainContainer: (props: Props) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/Containers/MainContainer.js

@@ -1,5 +0,0 @@
-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/Containers/OutletContainer.d.ts

@@ -1,6 +0,0 @@
-import React from "react";
-type Props = {
-    children: React.ReactNode;
-};
-export declare const OutletContainer: (props: Props) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/Containers/OutletContainer.js

@@ -1,5 +0,0 @@
-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/Containers/SubContainer.d.ts

@@ -1,10 +0,0 @@
-import React from "react";
-type Props = {
-    title?: string;
-    description?: string;
-    children: React.ReactNode;
-    className?: string;
-    rightContent?: React.ReactNode;
-};
-export declare const SubContainer: (props: Props) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/Containers/SubContainer.js

@@ -1,6 +0,0 @@
-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/Containers/index.d.ts

@@ -1,7 +0,0 @@
-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";