@onpe/ui 1.2.77 → 1.2.79

package/dist/components/Feedback/ModalConfirm/ModalConfirm.d.ts

@@ -1,4 +1,5 @@
 import { ReactNode } from "react";
+import "./ModalConfirm.css";
 export interface ModalConfirmProps {
     isOpen: boolean;
     onClose: () => void;
@@ -13,7 +14,8 @@ export interface ModalConfirmProps {
     twoButtons?: boolean;
     className?: string;
     zIndexLevel?: number;
+    withoutAutoClose?: boolean;
 }
-export declare const ModalConfirm: ({ isOpen, onClose, title, message, icon, color, onConfirm, onCancel, textButtonConfirm, textButtonCancel, twoButtons, className, zIndexLevel, }: ModalConfirmProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ModalConfirm: ({ isOpen, onClose, withoutAutoClose, title, message, icon, color, onConfirm, onCancel, textButtonConfirm, textButtonCancel, twoButtons, className, zIndexLevel, }: ModalConfirmProps) => import("react/jsx-runtime").JSX.Element;
 export default ModalConfirm;
 //# sourceMappingURL=ModalConfirm.d.ts.map

package/dist/components.css

@@ -465,6 +465,108 @@ body.onpe-modal-open {
   }
 }
 
+/* ModalConfirm Component Styles */
+.onpe-modal-confirm-container {
+  /* Solo contenido - el espaciado lo maneja el Modal base */
+  width: 100%;
+  max-width: 719px !important; /* Tamaño específico para este modal */
+  padding-top: 30px !important;
+  padding-bottom: 30px !important;
+  padding-left: 30px !important;
+  padding-right: 30px !important;
+}
+
+.onpe-modal-confirm-icon-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.onpe-modal-confirm-icon {
+  width: 64px; /* 4rem = 64px */
+  height: 64px; /* 4rem = 64px */
+  color: var(--onpe-ui-skyblue); /* Color por defecto: azul */
+}
+
+/* Colores dinámicos para el icono */
+.onpe-modal-confirm-icon-blue {
+  color: var(--onpe-ui-skyblue);
+}
+
+.onpe-modal-confirm-icon-red {
+  color: var(--onpe-ui-red);
+}
+
+.onpe-modal-confirm-title {
+  margin-top: 0px;
+  font-size: 18px; /* 1.125rem = 18px */
+  font-weight: 600; /* font-semibold */
+  text-align: center;
+  color: var(--onpe-ui-skyblue); /* Color por defecto: azul */
+}
+
+/* Colores dinámicos para el título */
+.onpe-modal-confirm-title-blue {
+  color: var(--onpe-ui-skyblue);
+}
+
+.onpe-modal-confirm-title-red {
+  color: var(--onpe-ui-red);
+}
+
+.onpe-modal-confirm-message {
+  margin-top: 28px; /* 1.75rem = 28px */
+  font-size: 14px; /* 0.875rem = 14px */
+  text-align: center;
+  max-width: 100%;
+  color: var(--onpe-ui-dark-gray); /* Usar variable CSS de ONPE, fallback a #333333 */
+}
+
+.onpe-modal-confirm-buttons-container {
+  display: flex;
+  flex-direction: column-reverse;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  gap: 20px; /* 1.25rem = 20px */
+  margin-top: 44px; /* 2.75rem = 44px */
+}
+
+.onpe-modal-confirm-button {
+  width: 100%;
+  max-width: 200px;
+}
+
+/* Responsive Design */
+@media (min-width: 768px) {
+  .onpe-modal-confirm-container {
+    max-width: 719px !important;
+    padding-top: 30px !important;
+    padding-bottom: 30px !important;
+    padding-left: 30px !important;
+    padding-right: 30px !important;
+  }
+
+  .onpe-modal-confirm-title {
+    margin-top: 16px; /* 1rem = 16px */
+    font-size: 24px; /* 1.5rem = 24px */
+  }
+  
+  .onpe-modal-confirm-message {
+    font-size: 18px; /* 1.125rem = 18px */
+  }
+  
+  .onpe-modal-confirm-buttons-container {
+    flex-direction: row; /* lg:flex-row */
+  }
+  
+  .onpe-modal-confirm-button {
+    width: 200px;
+  }
+}
+
+
+
 /* ModalLoading Component Styles */
 .onpe-modal-loading-spinner-desktop {
   display: none; /* hidden */

package/dist/components.d.ts

@@ -65,8 +65,9 @@ interface ModalConfirmProps {
     twoButtons?: boolean;
     className?: string;
     zIndexLevel?: number;
+    withoutAutoClose?: boolean;
 }
-declare const ModalConfirm: ({ isOpen, onClose, title, message, icon, color, onConfirm, onCancel, textButtonConfirm, textButtonCancel, twoButtons, className, zIndexLevel, }: ModalConfirmProps) => react_jsx_runtime.JSX.Element;
+declare const ModalConfirm: ({ isOpen, onClose, withoutAutoClose, title, message, icon, color, onConfirm, onCancel, textButtonConfirm, textButtonCancel, twoButtons, className, zIndexLevel, }: ModalConfirmProps) => react_jsx_runtime.JSX.Element;
 
 interface ModalLoadingProps {
     isOpen: boolean;

package/dist/components.esm.css

@@ -465,6 +465,108 @@ body.onpe-modal-open {
   }
 }
 
+/* ModalConfirm Component Styles */
+.onpe-modal-confirm-container {
+  /* Solo contenido - el espaciado lo maneja el Modal base */
+  width: 100%;
+  max-width: 719px !important; /* Tamaño específico para este modal */
+  padding-top: 30px !important;
+  padding-bottom: 30px !important;
+  padding-left: 30px !important;
+  padding-right: 30px !important;
+}
+
+.onpe-modal-confirm-icon-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.onpe-modal-confirm-icon {
+  width: 64px; /* 4rem = 64px */
+  height: 64px; /* 4rem = 64px */
+  color: var(--onpe-ui-skyblue); /* Color por defecto: azul */
+}
+
+/* Colores dinámicos para el icono */
+.onpe-modal-confirm-icon-blue {
+  color: var(--onpe-ui-skyblue);
+}
+
+.onpe-modal-confirm-icon-red {
+  color: var(--onpe-ui-red);
+}
+
+.onpe-modal-confirm-title {
+  margin-top: 0px;
+  font-size: 18px; /* 1.125rem = 18px */
+  font-weight: 600; /* font-semibold */
+  text-align: center;
+  color: var(--onpe-ui-skyblue); /* Color por defecto: azul */
+}
+
+/* Colores dinámicos para el título */
+.onpe-modal-confirm-title-blue {
+  color: var(--onpe-ui-skyblue);
+}
+
+.onpe-modal-confirm-title-red {
+  color: var(--onpe-ui-red);
+}
+
+.onpe-modal-confirm-message {
+  margin-top: 28px; /* 1.75rem = 28px */
+  font-size: 14px; /* 0.875rem = 14px */
+  text-align: center;
+  max-width: 100%;
+  color: var(--onpe-ui-dark-gray); /* Usar variable CSS de ONPE, fallback a #333333 */
+}
+
+.onpe-modal-confirm-buttons-container {
+  display: flex;
+  flex-direction: column-reverse;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  gap: 20px; /* 1.25rem = 20px */
+  margin-top: 44px; /* 2.75rem = 44px */
+}
+
+.onpe-modal-confirm-button {
+  width: 100%;
+  max-width: 200px;
+}
+
+/* Responsive Design */
+@media (min-width: 768px) {
+  .onpe-modal-confirm-container {
+    max-width: 719px !important;
+    padding-top: 30px !important;
+    padding-bottom: 30px !important;
+    padding-left: 30px !important;
+    padding-right: 30px !important;
+  }
+
+  .onpe-modal-confirm-title {
+    margin-top: 16px; /* 1rem = 16px */
+    font-size: 24px; /* 1.5rem = 24px */
+  }
+  
+  .onpe-modal-confirm-message {
+    font-size: 18px; /* 1.125rem = 18px */
+  }
+  
+  .onpe-modal-confirm-buttons-container {
+    flex-direction: row; /* lg:flex-row */
+  }
+  
+  .onpe-modal-confirm-button {
+    width: 200px;
+  }
+}
+
+
+
 /* ModalLoading Component Styles */
 .onpe-modal-loading-spinner-desktop {
   display: none; /* hidden */