@onpe/ui 1.2.75 → 1.2.77

package/dist/index.css

@@ -465,109 +465,6 @@ 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 */
-    margin-top: 80px; /* 5rem = 80px */
-  }
-  
-  .onpe-modal-confirm-button {
-    width: 200px;
-  }
-}
-
-
-
 /* ModalLoading Component Styles */
 .onpe-modal-loading-spinner-desktop {
   display: none; /* hidden */

package/dist/index.d.ts

@@ -55,7 +55,7 @@ interface ModalConfirmProps {
     isOpen: boolean;
     onClose: () => void;
     title: string;
-    message: string;
+    message: ReactNode;
     icon?: "warning" | "success";
     color?: "blue" | "red";
     onConfirm?: () => void;

package/dist/index.esm.css

@@ -465,109 +465,6 @@ 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 */
-    margin-top: 80px; /* 5rem = 80px */
-  }
-  
-  .onpe-modal-confirm-button {
-    width: 200px;
-  }
-}
-
-
-
 /* ModalLoading Component Styles */
 .onpe-modal-loading-spinner-desktop {
   display: none; /* hidden */