@zauru-sdk/components 1.0.116 → 1.0.119

package/CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.0.119](https://github.com/intuitiva/zauru-typescript-sdk/compare/v1.0.117...v1.0.119) (2024-09-26)
+
+**Note:** Version bump only for package @zauru-sdk/components
+
+
+
+
+
+## [1.0.118](https://github.com/intuitiva/zauru-typescript-sdk/compare/v1.0.117...v1.0.118) (2024-09-26)
+
+**Note:** Version bump only for package @zauru-sdk/components
+
+
+
+
+
+## [1.0.117](https://github.com/intuitiva/zauru-typescript-sdk/compare/v1.0.116...v1.0.117) (2024-09-26)
+
+**Note:** Version bump only for package @zauru-sdk/components
+
+
+
+
+
 ## [1.0.116](https://github.com/intuitiva/zauru-typescript-sdk/compare/v1.0.115...v1.0.116) (2024-09-26)
 
 **Note:** Version bump only for package @zauru-sdk/components

package/dist/Buttons/Button.d.ts

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

package/dist/HOC/ValidateEmployeeAccess/index.d.ts

@@ -1,5 +1,5 @@
 export declare const ValidateEmployeeAccess: ({ children, permissionVariableName, showIfNoPermission, }: {
     children: React.ReactNode;
     permissionVariableName: string;
-    showIfNoPermission?: boolean | undefined;
+    showIfNoPermission?: boolean;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/Layouts/errorLayout/index.d.ts

@@ -1 +1,3 @@
-export declare const ErrorLayout: () => import("react/jsx-runtime").JSX.Element;
+export declare const ErrorLayout: ({ from }: {
+    from?: string;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/ProgressBar/ProgressCircle.d.ts

@@ -2,5 +2,5 @@ export declare const ProgressCircle: ({ total, completed, description, title, }:
     total: number;
     completed: number;
     description: string;
-    title?: string | undefined;
+    title?: string;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/Zendesk/Chat.d.ts

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

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

@@ -160,9 +160,9 @@ export const SelectField = (props) => {
     }
     return (_jsxs("div", { className: `col-span-6 sm:col-span-3 ${className}`, ref: selectRef, children: [title && (_jsxs("label", { htmlFor: error ? `${name}-error` : `${name}-success`, className: `block text-sm font-medium ${color === "red"
                     ? "text-red-700 dark:text-red-500"
-                    : "text-gray-700 dark:text-gray-500"}`, children: [title, required && _jsx("span", { className: "text-red-500", children: "*" })] })), _jsxs("div", { className: "relative", children: [_jsx("input", { type: "text", id: id, value: inputValue, onFocus: () => setIsOpen(true), onKeyDown: handleKeyDown, readOnly: isReadOnly, disabled: disabled, className: `block w-full rounded-md ${bgColor} ${borderColor} ${textColor} shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm`, placeholder: isMulti ? "Select options..." : "Select an option...", autoComplete: "off", onChange: handleInputChange, onBlur: handleBlur, required: required }), _jsx("input", { type: "hidden", ...(register ?? {}), name: name, value: isMulti
+                    : "text-gray-700 dark:text-gray-500"}`, children: [title, required && _jsx("span", { className: "text-red-500", children: "*" })] })), _jsxs("div", { className: "relative", children: [_jsx("input", { type: "text", id: id, value: inputValue, onFocus: () => setIsOpen(true), onKeyDown: handleKeyDown, readOnly: isReadOnly, disabled: disabled, className: `block w-full rounded-md ${bgColor} ${borderColor} ${textColor} shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm pr-10`, placeholder: isMulti ? "Select options..." : "Select an option...", autoComplete: "off", onChange: handleInputChange, onBlur: handleBlur, required: required }), _jsx("input", { type: "hidden", ...(register ?? {}), name: name, value: isMulti
                             ? valueMulti.map((v) => v.value).join(",")
-                            : value?.value || "" }), isClearable && (value || valueMulti.length > 0) && (_jsx("button", { type: "button", onClick: handleClear, className: "absolute inset-y-0 right-0 pr-3 flex items-center", children: "\u00D7" })), isOpen && !isReadOnly && (_jsx("ul", { ref: optionsRef, className: "absolute z-10 mt-1 w-full bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm", children: filteredOptions.map((option, index) => (_jsx("li", { className: `cursor-pointer select-none relative py-2 pl-3 pr-9 ${(isMulti
+                            : value?.value || "" }), isClearable && (value || valueMulti.length > 0) && (_jsx("button", { type: "button", onClick: handleClear, className: "absolute inset-y-0 right-0 pr-3 flex items-center", children: "\u00D7" })), !isClearable && (value || valueMulti.length > 0) && (_jsx("span", { className: "absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none", children: _jsx("svg", { className: "h-5 w-5 text-green-500", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }) })), isOpen && !isReadOnly && (_jsx("ul", { ref: optionsRef, className: "absolute z-10 mt-1 w-full bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm", children: filteredOptions.map((option, index) => (_jsx("li", { className: `cursor-pointer select-none relative py-2 pl-3 pr-9 ${(isMulti
                                 ? valueMulti.some((v) => v.value === option.value)
                                 : value?.value === option.value)
                                 ? "text-white bg-indigo-600"

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

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { isRouteErrorResponse, Links, Meta, Scripts, useRouteError, Link, } from "@remix-run/react";
-export const ErrorLayout = () => {
+export const ErrorLayout = ({ from }) => {
     const error = useRouteError();
-    return (_jsxs("html", { lang: "es", className: "bg-gray-900 text-white", children: [_jsxs("head", { children: [_jsx("meta", { charSet: "utf-8" }), _jsx("meta", { name: "viewport", content: "width=device-width, initial-scale=1" }), _jsx("title", { children: "\u00A1Ups! Algo sali\u00F3 mal" }), _jsx(Meta, {}), _jsx(Links, {})] }), _jsxs("body", { className: "min-h-screen flex flex-col items-center justify-center p-4", children: [_jsx("img", { src: "/logo.png", alt: "Zauru Logo", className: "mb-8 h-20" }), _jsx("h1", { className: "text-5xl font-extrabold text-red-500 mb-6", children: "\u00A1Ups!" }), _jsx("div", { className: "w-full max-w-2xl", children: _jsx("p", { className: "text-2xl text-gray-300 mb-8 text-center", children: isRouteErrorResponse(error)
-                                ? `Error ${error.status}: ${error.statusText}`
-                                : error instanceof Error
-                                    ? error.message
-                                    : "Ha ocurrido un error inesperado" }) }), _jsx(Link, { to: "/", className: "bg-blue-600 text-white py-3 px-8 rounded-full text-lg font-semibold hover:bg-blue-700 transition duration-300 transform hover:scale-105", children: "Regresar al inicio" }), _jsx("div", { className: "mt-12 text-gray-500", children: _jsx("p", { children: "Si el problema persiste, por favor contacta a soporte." }) }), _jsx(Scripts, {})] })] }));
+    return (_jsxs("html", { lang: "es", className: "bg-gray-900 text-white", children: [_jsxs("head", { children: [_jsx("meta", { charSet: "utf-8" }), _jsx("meta", { name: "viewport", content: "width=device-width, initial-scale=1" }), _jsx("title", { children: "\u00A1Ups! Algo sali\u00F3 mal" }), _jsx(Meta, {}), _jsx(Links, {})] }), _jsxs("body", { className: "min-h-screen flex flex-col items-center justify-center p-4", children: [_jsx("img", { src: "/logo.png", alt: "Zauru Logo", className: "mb-8 h-20" }), _jsx("h1", { className: "text-5xl font-extrabold text-red-500 mb-6", children: "\u00A1Ups!" }), _jsxs("div", { className: "w-full max-w-2xl", children: [_jsx("p", { className: "text-2xl text-gray-300 mb-8 text-center", children: isRouteErrorResponse(error)
+                                    ? `Error ${error.status}: ${error.statusText}`
+                                    : error instanceof Error
+                                        ? error.message
+                                        : "Ha ocurrido un error inesperado" }), from && (_jsxs("p", { className: "text-lg text-gray-400 mb-4 text-center", children: ["Error lanzado desde: ", from] }))] }), _jsx(Link, { to: "/", className: "bg-blue-600 text-white py-3 px-8 rounded-full text-lg font-semibold hover:bg-blue-700 transition duration-300 transform hover:scale-105", children: "Regresar al inicio" }), _jsx("div", { className: "mt-12 text-gray-500", children: _jsx("p", { children: "Si el problema persiste, por favor contacta a soporte." }) }), _jsx(Scripts, {})] })] }));
 };

package/dist/esm/SidePanel/index.js

@@ -41,6 +41,6 @@ const SidePanel = ({ children, closeOnClickOutside = true, widthPercentage = 25,
             return buttonIcon;
         }
     };
-    return (_jsxs(_Fragment, { children: [_jsx(AnimatePresence, { children: isOpen && (_jsxs(motion.div, { ref: panelRef, initial: { x: "100%" }, animate: { x: 0 }, exit: { x: "100%" }, transition: { type: "spring", stiffness: 300, damping: 30 }, className: "fixed top-0 right-0 h-full bg-white shadow-lg z-[9999] overflow-y-auto", style: { width: `${widthPercentage}%` }, children: [_jsx("button", { onClick: togglePanel, className: "absolute top-4 left-4 p-2 rounded-full bg-gray-200 hover:bg-gray-300 transition-colors", children: _jsx(ChevronRightIcon, {}) }), _jsx("div", { className: "p-6 mt-16", children: children })] })) }), !isOpen && (_jsx("button", { onClick: togglePanel, className: "fixed top-1/2 right-0 transform -translate-y-1/2 bg-indigo-600 text-white p-3 rounded-l-lg shadow-md hover:bg-indigo-700 transition-colors z-[10000]", children: renderIcon() }))] }));
+    return (_jsxs(_Fragment, { children: [_jsxs(motion.div, { ref: panelRef, initial: { x: "100%" }, animate: { x: isOpen ? 0 : "100%" }, transition: { type: "spring", stiffness: 300, damping: 30 }, className: `fixed top-0 right-0 h-full bg-white shadow-lg z-[9999] overflow-y-auto`, style: { width: `${widthPercentage}%` }, children: [_jsx("button", { onClick: togglePanel, className: "absolute top-4 left-4 p-2 rounded-full bg-gray-200 hover:bg-gray-300 transition-colors", children: _jsx(ChevronRightIcon, {}) }), _jsx("div", { className: "p-6 mt-16", children: children })] }), _jsx(AnimatePresence, { children: !isOpen && (_jsx(motion.button, { initial: { opacity: 0, x: 20 }, animate: { opacity: 1, x: 0 }, exit: { opacity: 0, x: 20 }, transition: { duration: 0.2 }, onClick: togglePanel, className: `fixed top-1/2 right-0 transform -translate-y-1/2 bg-indigo-600 text-white p-3 rounded-l-lg shadow-md hover:bg-indigo-700 transition-colors z-[10000]`, children: renderIcon() })) })] }));
 };
 export default SidePanel;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zauru-sdk/components",
-  "version": "1.0.116",
+  "version": "1.0.119",
   "description": "Componentes reutilizables en las WebApps de Zauru.",
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",
@@ -10,8 +10,7 @@
     "access": "public"
   },
   "scripts": {
-    "build": "npm run build:cjs && npm run build:esm",
-    "build:cjs": "tsc -p tsconfig.cjs.json",
+    "build": "npm run build:esm",
     "build:esm": "tsc -p tsconfig.esm.json",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
@@ -34,11 +33,11 @@
     "@hookform/resolvers": "^3.9.0",
     "@reduxjs/toolkit": "^2.2.1",
     "@remix-run/react": "^2.8.1",
-    "@zauru-sdk/common": "^1.0.116",
-    "@zauru-sdk/hooks": "^1.0.116",
-    "@zauru-sdk/icons": "^1.0.60",
-    "@zauru-sdk/types": "^1.0.116",
-    "@zauru-sdk/utils": "^1.0.116",
+    "@zauru-sdk/common": "^1.0.119",
+    "@zauru-sdk/hooks": "^1.0.119",
+    "@zauru-sdk/icons": "^1.0.119",
+    "@zauru-sdk/types": "^1.0.119",
+    "@zauru-sdk/utils": "^1.0.119",
     "framer-motion": "^11.7.0",
     "jsonwebtoken": "^9.0.2",
     "react": "^18.2.0",
@@ -50,5 +49,5 @@
     "styled-components": "^5.3.5",
     "zod": "^3.23.8"
   },
-  "gitHead": "9626d12f4ce2db9df58e992711879cacdfdb9c6e"
+  "gitHead": "61a0842f7e502c72e54defddb197fa69aa58f422"
 }

package/src/Form/SelectField/index.tsx

@@ -274,7 +274,7 @@ export const SelectField = (props: Props) => {
           onKeyDown={handleKeyDown}
           readOnly={isReadOnly}
           disabled={disabled}
-          className={`block w-full rounded-md ${bgColor} ${borderColor} ${textColor} shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm`}
+          className={`block w-full rounded-md ${bgColor} ${borderColor} ${textColor} shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm pr-10`}
           placeholder={isMulti ? "Select options..." : "Select an option..."}
           autoComplete="off"
           onChange={handleInputChange}
@@ -300,6 +300,24 @@ export const SelectField = (props: Props) => {
             ×
           </button>
         )}
+        {!isClearable && (value || valueMulti.length > 0) && (
+          <span className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
+            <svg
+              className="h-5 w-5 text-green-500"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M5 13l4 4L19 7"
+              />
+            </svg>
+          </span>
+        )}
         {isOpen && !isReadOnly && (
           <ul
             ref={optionsRef}

package/src/Form/TextField/index.tsx

@@ -1,5 +1,5 @@
 import { IdeaIconSVG } from "@zauru-sdk/icons";
-import React, { useEffect, useMemo, useState } from "react";
+import React, { useEffect, useState } from "react";
 import { useFormContext } from "react-hook-form";
 
 type Props = {

package/src/Layouts/errorLayout/index.tsx

@@ -7,7 +7,7 @@ import {
   Link,
 } from "@remix-run/react";
 
-export const ErrorLayout = () => {
+export const ErrorLayout = ({ from }: { from?: string }) => {
   const error = useRouteError();
 
   return (
@@ -30,6 +30,11 @@ export const ErrorLayout = () => {
               ? error.message
               : "Ha ocurrido un error inesperado"}
           </p>
+          {from && (
+            <p className="text-lg text-gray-400 mb-4 text-center">
+              Error lanzado desde: {from}
+            </p>
+          )}
         </div>
         <Link
           to="/"

package/src/SidePanel/index.tsx

@@ -116,36 +116,36 @@ const SidePanel: React.FC<SidePanelProps> = ({
 
   return (
     <>
-      <AnimatePresence>
-        {isOpen && (
-          <motion.div
-            ref={panelRef}
-            initial={{ x: "100%" }}
-            animate={{ x: 0 }}
-            exit={{ x: "100%" }}
-            transition={{ type: "spring", stiffness: 300, damping: 30 }}
-            className="fixed top-0 right-0 h-full bg-white shadow-lg z-[9999] overflow-y-auto"
-            style={{ width: `${widthPercentage}%` }}
-          >
-            <button
-              onClick={togglePanel}
-              className="absolute top-4 left-4 p-2 rounded-full bg-gray-200 hover:bg-gray-300 transition-colors"
-            >
-              <ChevronRightIcon />
-            </button>
-            <div className="p-6 mt-16">{children}</div>
-          </motion.div>
-        )}
-      </AnimatePresence>
-
-      {!isOpen && (
+      <motion.div
+        ref={panelRef}
+        initial={{ x: "100%" }}
+        animate={{ x: isOpen ? 0 : "100%" }}
+        transition={{ type: "spring", stiffness: 300, damping: 30 }}
+        className={`fixed top-0 right-0 h-full bg-white shadow-lg z-[9999] overflow-y-auto`}
+        style={{ width: `${widthPercentage}%` }}
+      >
         <button
           onClick={togglePanel}
-          className="fixed top-1/2 right-0 transform -translate-y-1/2 bg-indigo-600 text-white p-3 rounded-l-lg shadow-md hover:bg-indigo-700 transition-colors z-[10000]"
+          className="absolute top-4 left-4 p-2 rounded-full bg-gray-200 hover:bg-gray-300 transition-colors"
         >
-          {renderIcon()}
+          <ChevronRightIcon />
         </button>
-      )}
+        <div className="p-6 mt-16">{children}</div>
+      </motion.div>
+      <AnimatePresence>
+        {!isOpen && (
+          <motion.button
+            initial={{ opacity: 0, x: 20 }}
+            animate={{ opacity: 1, x: 0 }}
+            exit={{ opacity: 0, x: 20 }}
+            transition={{ duration: 0.2 }}
+            onClick={togglePanel}
+            className={`fixed top-1/2 right-0 transform -translate-y-1/2 bg-indigo-600 text-white p-3 rounded-l-lg shadow-md hover:bg-indigo-700 transition-colors z-[10000]`}
+          >
+            {renderIcon()}
+          </motion.button>
+        )}
+      </AnimatePresence>
     </>
   );
 };

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

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

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

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

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

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

@@ -1,62 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Button = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_hook_form_1 = require("react-hook-form");
-const Button = (props) => {
-    const { type = "submit", loading = false, loadingText = "Guardando...", title = "Guardar", name = "save", onClickSave, selectedColor = "indigo", children, className = "", disabled = false, enableFormErrorsValidation = false, enableFormErrorsDescriptions = false, } = props;
-    const formContext = (0, react_hook_form_1.useFormContext)();
-    const formHasErrors = formContext ? !formContext.formState.isValid : false;
-    const formErrors = formContext ? formContext.formState.errors : {};
-    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;
-    const errorMessage = formHasErrors
-        ? Object.values(formErrors)
-            .map((error) => error?.message?.toString())
-            .join(", ")
-        : "";
-    const buttonContent = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", { type: "hidden", name: "action", value: name }), (0, jsx_runtime_1.jsx)("button", { type: type, disabled: loading || disabled || (enableFormErrorsValidation && formHasErrors), onClick: onClickSave, className: `ml-2 ${loading || disabled || (enableFormErrorsValidation && formHasErrors)
-                    ? " bg-opacity-25 "
-                    : ""} ${loading
-                    ? " cursor-progress"
-                    : `${disabled || (enableFormErrorsValidation && formHasErrors)
-                        ? ""
-                        : `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 })] }));
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(enableFormErrorsValidation && formHasErrors && errorMessage) ||
-                (enableFormErrorsDescriptions && errorMessage) ? ((0, jsx_runtime_1.jsx)("div", { className: "flex flex-col items-end mb-2", children: (0, jsx_runtime_1.jsx)("div", { className: "p-2 bg-red-100 border border-red-400 text-red-700 rounded-md shadow-sm", children: (0, jsx_runtime_1.jsx)("p", { className: "text-sm", children: errorMessage }) }) })) : null, buttonContent] }));
-};
-exports.Button = Button;

package/dist/cjs/Buttons/index.js

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

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

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

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

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

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