@onpe/ui 1.2.76 → 1.2.78

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/components/Feedback/ModalConfirm/ModalConfirm.d.ts +1 -0
  2. package/dist/components.css +102 -0
  3. package/dist/components.esm.css +102 -0
  4. package/dist/index.css +102 -0
  5. package/dist/index.esm.css +102 -0
  6. package/package.json +1 -1
package/dist/components/Feedback/ModalConfirm/ModalConfirm.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import { ReactNode } from "react";
2
+ import "./ModalConfirm.css";
2
3
  export interface ModalConfirmProps {
3
4
  isOpen: boolean;
4
5
  onClose: () => void;
package/dist/components.css CHANGED
@@ -465,6 +465,108 @@ body.onpe-modal-open {
465
465
  }
466
466
  }
467
467
 
468
+ /* ModalConfirm Component Styles */
469
+ .onpe-modal-confirm-container {
470
+ /* Solo contenido - el espaciado lo maneja el Modal base */
471
+ width: 100%;
472
+ max-width: 719px !important; /* Tamaño específico para este modal */
473
+ padding-top: 30px !important;
474
+ padding-bottom: 30px !important;
475
+ padding-left: 30px !important;
476
+ padding-right: 30px !important;
477
+ }
478
+
479
+ .onpe-modal-confirm-icon-container {
480
+ display: flex;
481
+ align-items: center;
482
+ justify-content: center;
483
+ }
484
+
485
+ .onpe-modal-confirm-icon {
486
+ width: 64px; /* 4rem = 64px */
487
+ height: 64px; /* 4rem = 64px */
488
+ color: var(--onpe-ui-skyblue); /* Color por defecto: azul */
489
+ }
490
+
491
+ /* Colores dinámicos para el icono */
492
+ .onpe-modal-confirm-icon-blue {
493
+ color: var(--onpe-ui-skyblue);
494
+ }
495
+
496
+ .onpe-modal-confirm-icon-red {
497
+ color: var(--onpe-ui-red);
498
+ }
499
+
500
+ .onpe-modal-confirm-title {
501
+ margin-top: 0px;
502
+ font-size: 18px; /* 1.125rem = 18px */
503
+ font-weight: 600; /* font-semibold */
504
+ text-align: center;
505
+ color: var(--onpe-ui-skyblue); /* Color por defecto: azul */
506
+ }
507
+
508
+ /* Colores dinámicos para el título */
509
+ .onpe-modal-confirm-title-blue {
510
+ color: var(--onpe-ui-skyblue);
511
+ }
512
+
513
+ .onpe-modal-confirm-title-red {
514
+ color: var(--onpe-ui-red);
515
+ }
516
+
517
+ .onpe-modal-confirm-message {
518
+ margin-top: 28px; /* 1.75rem = 28px */
519
+ font-size: 14px; /* 0.875rem = 14px */
520
+ text-align: center;
521
+ max-width: 100%;
522
+ color: var(--onpe-ui-dark-gray); /* Usar variable CSS de ONPE, fallback a #333333 */
523
+ }
524
+
525
+ .onpe-modal-confirm-buttons-container {
526
+ display: flex;
527
+ flex-direction: column-reverse;
528
+ align-items: center;
529
+ justify-content: center;
530
+ width: 100%;
531
+ gap: 20px; /* 1.25rem = 20px */
532
+ margin-top: 44px; /* 2.75rem = 44px */
533
+ }
534
+
535
+ .onpe-modal-confirm-button {
536
+ width: 100%;
537
+ max-width: 200px;
538
+ }
539
+
540
+ /* Responsive Design */
541
+ @media (min-width: 768px) {
542
+ .onpe-modal-confirm-container {
543
+ max-width: 719px !important;
544
+ padding-top: 30px !important;
545
+ padding-bottom: 30px !important;
546
+ padding-left: 30px !important;
547
+ padding-right: 30px !important;
548
+ }
549
+
550
+ .onpe-modal-confirm-title {
551
+ margin-top: 16px; /* 1rem = 16px */
552
+ font-size: 24px; /* 1.5rem = 24px */
553
+ }
554
+
555
+ .onpe-modal-confirm-message {
556
+ font-size: 18px; /* 1.125rem = 18px */
557
+ }
558
+
559
+ .onpe-modal-confirm-buttons-container {
560
+ flex-direction: row; /* lg:flex-row */
561
+ }
562
+
563
+ .onpe-modal-confirm-button {
564
+ width: 200px;
565
+ }
566
+ }
567
+
568
+
569
+
468
570
  /* ModalLoading Component Styles */
469
571
  .onpe-modal-loading-spinner-desktop {
470
572
  display: none; /* hidden */
package/dist/components.esm.css CHANGED
@@ -465,6 +465,108 @@ body.onpe-modal-open {
465
465
  }
466
466
  }
467
467
 
468
+ /* ModalConfirm Component Styles */
469
+ .onpe-modal-confirm-container {
470
+ /* Solo contenido - el espaciado lo maneja el Modal base */
471
+ width: 100%;
472
+ max-width: 719px !important; /* Tamaño específico para este modal */
473
+ padding-top: 30px !important;
474
+ padding-bottom: 30px !important;
475
+ padding-left: 30px !important;
476
+ padding-right: 30px !important;
477
+ }
478
+
479
+ .onpe-modal-confirm-icon-container {
480
+ display: flex;
481
+ align-items: center;
482
+ justify-content: center;
483
+ }
484
+
485
+ .onpe-modal-confirm-icon {
486
+ width: 64px; /* 4rem = 64px */
487
+ height: 64px; /* 4rem = 64px */
488
+ color: var(--onpe-ui-skyblue); /* Color por defecto: azul */
489
+ }
490
+
491
+ /* Colores dinámicos para el icono */
492
+ .onpe-modal-confirm-icon-blue {
493
+ color: var(--onpe-ui-skyblue);
494
+ }
495
+
496
+ .onpe-modal-confirm-icon-red {
497
+ color: var(--onpe-ui-red);
498
+ }
499
+
500
+ .onpe-modal-confirm-title {
501
+ margin-top: 0px;
502
+ font-size: 18px; /* 1.125rem = 18px */
503
+ font-weight: 600; /* font-semibold */
504
+ text-align: center;
505
+ color: var(--onpe-ui-skyblue); /* Color por defecto: azul */
506
+ }
507
+
508
+ /* Colores dinámicos para el título */
509
+ .onpe-modal-confirm-title-blue {
510
+ color: var(--onpe-ui-skyblue);
511
+ }
512
+
513
+ .onpe-modal-confirm-title-red {
514
+ color: var(--onpe-ui-red);
515
+ }
516
+
517
+ .onpe-modal-confirm-message {
518
+ margin-top: 28px; /* 1.75rem = 28px */
519
+ font-size: 14px; /* 0.875rem = 14px */
520
+ text-align: center;
521
+ max-width: 100%;
522
+ color: var(--onpe-ui-dark-gray); /* Usar variable CSS de ONPE, fallback a #333333 */
523
+ }
524
+
525
+ .onpe-modal-confirm-buttons-container {
526
+ display: flex;
527
+ flex-direction: column-reverse;
528
+ align-items: center;
529
+ justify-content: center;
530
+ width: 100%;
531
+ gap: 20px; /* 1.25rem = 20px */
532
+ margin-top: 44px; /* 2.75rem = 44px */
533
+ }
534
+
535
+ .onpe-modal-confirm-button {
536
+ width: 100%;
537
+ max-width: 200px;
538
+ }
539
+
540
+ /* Responsive Design */
541
+ @media (min-width: 768px) {
542
+ .onpe-modal-confirm-container {
543
+ max-width: 719px !important;
544
+ padding-top: 30px !important;
545
+ padding-bottom: 30px !important;
546
+ padding-left: 30px !important;
547
+ padding-right: 30px !important;
548
+ }
549
+
550
+ .onpe-modal-confirm-title {
551
+ margin-top: 16px; /* 1rem = 16px */
552
+ font-size: 24px; /* 1.5rem = 24px */
553
+ }
554
+
555
+ .onpe-modal-confirm-message {
556
+ font-size: 18px; /* 1.125rem = 18px */
557
+ }
558
+
559
+ .onpe-modal-confirm-buttons-container {
560
+ flex-direction: row; /* lg:flex-row */
561
+ }
562
+
563
+ .onpe-modal-confirm-button {
564
+ width: 200px;
565
+ }
566
+ }
567
+
568
+
569
+
468
570
  /* ModalLoading Component Styles */
469
571
  .onpe-modal-loading-spinner-desktop {
470
572
  display: none; /* hidden */
package/dist/index.css CHANGED
@@ -465,6 +465,108 @@ body.onpe-modal-open {
465
465
  }
466
466
  }
467
467
 
468
+ /* ModalConfirm Component Styles */
469
+ .onpe-modal-confirm-container {
470
+ /* Solo contenido - el espaciado lo maneja el Modal base */
471
+ width: 100%;
472
+ max-width: 719px !important; /* Tamaño específico para este modal */
473
+ padding-top: 30px !important;
474
+ padding-bottom: 30px !important;
475
+ padding-left: 30px !important;
476
+ padding-right: 30px !important;
477
+ }
478
+
479
+ .onpe-modal-confirm-icon-container {
480
+ display: flex;
481
+ align-items: center;
482
+ justify-content: center;
483
+ }
484
+
485
+ .onpe-modal-confirm-icon {
486
+ width: 64px; /* 4rem = 64px */
487
+ height: 64px; /* 4rem = 64px */
488
+ color: var(--onpe-ui-skyblue); /* Color por defecto: azul */
489
+ }
490
+
491
+ /* Colores dinámicos para el icono */
492
+ .onpe-modal-confirm-icon-blue {
493
+ color: var(--onpe-ui-skyblue);
494
+ }
495
+
496
+ .onpe-modal-confirm-icon-red {
497
+ color: var(--onpe-ui-red);
498
+ }
499
+
500
+ .onpe-modal-confirm-title {
501
+ margin-top: 0px;
502
+ font-size: 18px; /* 1.125rem = 18px */
503
+ font-weight: 600; /* font-semibold */
504
+ text-align: center;
505
+ color: var(--onpe-ui-skyblue); /* Color por defecto: azul */
506
+ }
507
+
508
+ /* Colores dinámicos para el título */
509
+ .onpe-modal-confirm-title-blue {
510
+ color: var(--onpe-ui-skyblue);
511
+ }
512
+
513
+ .onpe-modal-confirm-title-red {
514
+ color: var(--onpe-ui-red);
515
+ }
516
+
517
+ .onpe-modal-confirm-message {
518
+ margin-top: 28px; /* 1.75rem = 28px */
519
+ font-size: 14px; /* 0.875rem = 14px */
520
+ text-align: center;
521
+ max-width: 100%;
522
+ color: var(--onpe-ui-dark-gray); /* Usar variable CSS de ONPE, fallback a #333333 */
523
+ }
524
+
525
+ .onpe-modal-confirm-buttons-container {
526
+ display: flex;
527
+ flex-direction: column-reverse;
528
+ align-items: center;
529
+ justify-content: center;
530
+ width: 100%;
531
+ gap: 20px; /* 1.25rem = 20px */
532
+ margin-top: 44px; /* 2.75rem = 44px */
533
+ }
534
+
535
+ .onpe-modal-confirm-button {
536
+ width: 100%;
537
+ max-width: 200px;
538
+ }
539
+
540
+ /* Responsive Design */
541
+ @media (min-width: 768px) {
542
+ .onpe-modal-confirm-container {
543
+ max-width: 719px !important;
544
+ padding-top: 30px !important;
545
+ padding-bottom: 30px !important;
546
+ padding-left: 30px !important;
547
+ padding-right: 30px !important;
548
+ }
549
+
550
+ .onpe-modal-confirm-title {
551
+ margin-top: 16px; /* 1rem = 16px */
552
+ font-size: 24px; /* 1.5rem = 24px */
553
+ }
554
+
555
+ .onpe-modal-confirm-message {
556
+ font-size: 18px; /* 1.125rem = 18px */
557
+ }
558
+
559
+ .onpe-modal-confirm-buttons-container {
560
+ flex-direction: row; /* lg:flex-row */
561
+ }
562
+
563
+ .onpe-modal-confirm-button {
564
+ width: 200px;
565
+ }
566
+ }
567
+
568
+
569
+
468
570
  /* ModalLoading Component Styles */
469
571
  .onpe-modal-loading-spinner-desktop {
470
572
  display: none; /* hidden */
package/dist/index.esm.css CHANGED
@@ -465,6 +465,108 @@ body.onpe-modal-open {
465
465
  }
466
466
  }
467
467
 
468
+ /* ModalConfirm Component Styles */
469
+ .onpe-modal-confirm-container {
470
+ /* Solo contenido - el espaciado lo maneja el Modal base */
471
+ width: 100%;
472
+ max-width: 719px !important; /* Tamaño específico para este modal */
473
+ padding-top: 30px !important;
474
+ padding-bottom: 30px !important;
475
+ padding-left: 30px !important;
476
+ padding-right: 30px !important;
477
+ }
478
+
479
+ .onpe-modal-confirm-icon-container {
480
+ display: flex;
481
+ align-items: center;
482
+ justify-content: center;
483
+ }
484
+
485
+ .onpe-modal-confirm-icon {
486
+ width: 64px; /* 4rem = 64px */
487
+ height: 64px; /* 4rem = 64px */
488
+ color: var(--onpe-ui-skyblue); /* Color por defecto: azul */
489
+ }
490
+
491
+ /* Colores dinámicos para el icono */
492
+ .onpe-modal-confirm-icon-blue {
493
+ color: var(--onpe-ui-skyblue);
494
+ }
495
+
496
+ .onpe-modal-confirm-icon-red {
497
+ color: var(--onpe-ui-red);
498
+ }
499
+
500
+ .onpe-modal-confirm-title {
501
+ margin-top: 0px;
502
+ font-size: 18px; /* 1.125rem = 18px */
503
+ font-weight: 600; /* font-semibold */
504
+ text-align: center;
505
+ color: var(--onpe-ui-skyblue); /* Color por defecto: azul */
506
+ }
507
+
508
+ /* Colores dinámicos para el título */
509
+ .onpe-modal-confirm-title-blue {
510
+ color: var(--onpe-ui-skyblue);
511
+ }
512
+
513
+ .onpe-modal-confirm-title-red {
514
+ color: var(--onpe-ui-red);
515
+ }
516
+
517
+ .onpe-modal-confirm-message {
518
+ margin-top: 28px; /* 1.75rem = 28px */
519
+ font-size: 14px; /* 0.875rem = 14px */
520
+ text-align: center;
521
+ max-width: 100%;
522
+ color: var(--onpe-ui-dark-gray); /* Usar variable CSS de ONPE, fallback a #333333 */
523
+ }
524
+
525
+ .onpe-modal-confirm-buttons-container {
526
+ display: flex;
527
+ flex-direction: column-reverse;
528
+ align-items: center;
529
+ justify-content: center;
530
+ width: 100%;
531
+ gap: 20px; /* 1.25rem = 20px */
532
+ margin-top: 44px; /* 2.75rem = 44px */
533
+ }
534
+
535
+ .onpe-modal-confirm-button {
536
+ width: 100%;
537
+ max-width: 200px;
538
+ }
539
+
540
+ /* Responsive Design */
541
+ @media (min-width: 768px) {
542
+ .onpe-modal-confirm-container {
543
+ max-width: 719px !important;
544
+ padding-top: 30px !important;
545
+ padding-bottom: 30px !important;
546
+ padding-left: 30px !important;
547
+ padding-right: 30px !important;
548
+ }
549
+
550
+ .onpe-modal-confirm-title {
551
+ margin-top: 16px; /* 1rem = 16px */
552
+ font-size: 24px; /* 1.5rem = 24px */
553
+ }
554
+
555
+ .onpe-modal-confirm-message {
556
+ font-size: 18px; /* 1.125rem = 18px */
557
+ }
558
+
559
+ .onpe-modal-confirm-buttons-container {
560
+ flex-direction: row; /* lg:flex-row */
561
+ }
562
+
563
+ .onpe-modal-confirm-button {
564
+ width: 200px;
565
+ }
566
+ }
567
+
568
+
569
+
468
570
  /* ModalLoading Component Styles */
469
571
  .onpe-modal-loading-spinner-desktop {
470
572
  display: none; /* hidden */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@onpe/ui",
3
- "version": "1.2.76",
3
+ "version": "1.2.78",
4
4
  "type": "module",
5
5
  "description": "Librería de componentes UI para ONPE - Componentes e Iconos",
6
6
  "main": "dist/index.js",