@onpe/ui 1.2.44 → 1.2.46

package/dist/icons/Actions/IconMobileNfc/index.d.ts

@@ -1,4 +1,3 @@
 export { IconMobileNfc } from "./IconMobileNfc";
-export type { IconMobileNfcProps } from "./IconMobileNfc";
 export { default } from "./IconMobileNfc";
 //# sourceMappingURL=index.d.ts.map

package/dist/icons/ONPE/index.d.ts

@@ -1,6 +1,5 @@
 export * from "./IconVotoDigital";
 export * from "./IconElectionsGeneral";
-export * from "./ElectionsIcon";
 export * from "./IconDnie1";
 export * from "./IconDnie2";
 export * from "./IconDnie3";

package/dist/icons.d.ts

@@ -3,7 +3,8 @@ export { IconWarning } from "./icons/Actions/IconWarning/IconWarning";
 export { IconCheck } from "./icons/Actions/IconCheck/IconCheck";
 export { IconSpinnerDesktop } from "./icons/Actions/IconSpinnerDesktop/IconSpinnerDesktop";
 export { IconSpinnerMobile } from "./icons/Actions/IconSpinnerMobile/IconSpinnerMobile";
-export { IconInfo } from "./icons/Actions/IconInfo/IconInfo";
+export { IconHome } from "./icons/Actions/IconHome/IconHome";
+export { IconMobileNfc } from "./icons/Actions/IconMobileNfc/IconMobileNfc";
 export { IconChromeColor } from "./icons/Browsers/IconChromeColor/IconChromeColor";
 export { IconChrome } from "./icons/Browsers/IconChrome/IconChrome";
 export { IconSafariColor } from "./icons/Browsers/IconSafariColor/IconSafariColor";
@@ -17,5 +18,8 @@ export { IconAndroid } from "./icons/OperatingSystems/IconAndroid/IconAndroid";
 export { IconApple } from "./icons/OperatingSystems/IconApple/IconApple";
 export { IconVotoDigital } from "./icons/ONPE/IconVotoDigital/IconVotoDigital";
 export { IconElectionsGeneral } from "./icons/ONPE/IconElectionsGeneral/IconElectionsGeneral";
-export { ElectionsIcon } from "./icons/ONPE/ElectionsIcon/ElectionsIcon";
+export { IconDnie1 } from "./icons/ONPE/IconDnie1/IconDnie1";
+export { IconDnie2 } from "./icons/ONPE/IconDnie2/IconDnie2";
+export { IconDnie3 } from "./icons/ONPE/IconDnie3/IconDnie3";
+export { IconNfc } from "./icons/ONPE/IconNfc/IconNfc";
 //# sourceMappingURL=icons.d.ts.map

package/dist/index.css

@@ -928,3 +928,306 @@ body.onpe-modal-open {
     display: none;
   }
 }
+
+/* ModalDnieVersions Component Styles */
+.onpe-modal-dnie-versions-container {
+  /* Solo contenido - el espaciado lo maneja el Modal base */
+  width: 100%;
+  max-width: 590px !important; /* Tamaño específico para este modal */
+}
+
+.onpe-modal-dnie-versions-title {
+  text-align: center;
+  color: var(--onpe-ui-blue);
+  font-weight: 700; /* font-bold */
+  margin-bottom: 8px; /* mb-2 */
+  font-size: 18px; /* text-lg */
+}
+
+.onpe-modal-dnie-versions-content {
+  display: flex;
+  flex-direction: column;
+  gap: 40px; /* gap-10 */
+  align-items: center;
+  margin-top: 28px; /* mt-7 */
+  font-size: 14px; /* text-sm */
+}
+
+.onpe-modal-dnie-versions-article {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 40px; /* gap-10 */
+}
+
+.onpe-modal-dnie-versions-text {
+  flex: 1;
+}
+
+.onpe-modal-dnie-versions-subtitle {
+  flex: 1;
+  margin-bottom: 16px; /* mb-4 */
+}
+
+.onpe-modal-dnie-versions-bold {
+  font-weight: 700; /* font-bold */
+}
+
+.onpe-modal-dnie-versions-list {
+  font-size: 14px; /* text-sm */
+  list-style-type: disc;
+  text-align: justify;
+  align-self: flex-start;
+  padding-left: 20px; /* pl-5 */
+}
+
+.onpe-modal-dnie-versions-list li {
+  margin-bottom: 8px; /* mb-2 */
+}
+
+.onpe-modal-dnie-versions-image-container {
+  width: 240px;
+  position: relative;
+}
+
+.onpe-modal-dnie-versions-image-container-double {
+  height: 181px;
+}
+
+.onpe-modal-dnie-versions-image {
+  width: 200px;
+  height: 117px;
+}
+
+.onpe-modal-dnie-versions-image-overlay {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+}
+
+/* Estilos específicos para móvil */
+@media (max-width: 640px) {
+  .onpe-modal-dnie-versions-title {
+    font-size: 16px; /* text-base para móvil */
+  }
+  
+  .onpe-modal-dnie-versions-content {
+    gap: 32px; /* gap-8 para móvil */
+    margin-top: 24px; /* mt-6 para móvil */
+  }
+  
+  .onpe-modal-dnie-versions-article {
+    gap: 32px; /* gap-8 para móvil */
+  }
+  
+  .onpe-modal-dnie-versions-image-container {
+    width: 200px; /* Más pequeño en móvil */
+  }
+  
+  .onpe-modal-dnie-versions-image {
+    width: 180px; /* Más pequeño en móvil */
+    height: 105px; /* Más pequeño en móvil */
+  }
+}
+
+/* Responsive Design */
+@media (min-width: 640px) {
+  .onpe-modal-dnie-versions-title {
+    font-size: 20px; /* text-xl para tablet y desktop */
+  }
+  
+  .onpe-modal-dnie-versions-content {
+    font-size: 16px; /* text-base para tablet y desktop */
+  }
+  
+  .onpe-modal-dnie-versions-list {
+    font-size: 16px; /* text-base para tablet y desktop */
+  }
+}
+
+@media (min-width: 768px) {
+  .onpe-modal-dnie-versions-container {
+    /* Desktop: Tamaño específico de 590px */
+    max-width: 590px !important;
+  }
+  
+  .onpe-modal-dnie-versions-article {
+    flex-direction: row; /* md:flex-row */
+    align-items: flex-start; /* md:items-start */
+  }
+  
+  .onpe-modal-dnie-versions-article:last-child {
+    gap: 52px; /* gap-13 para desktop */
+  }
+}
+
+@media (min-width: 1024px) {
+  .onpe-modal-dnie-versions-container {
+    /* Desktop grande: Tamaño específico de 590px */
+    max-width: 590px !important;
+  }
+}
+
+/* ModalNfc Component Styles */
+.onpe-modal-nfc-container {
+  /* Solo contenido - el espaciado lo maneja el Modal base */
+  width: 100%;
+  max-width: 600px !important; /* Tamaño específico para este modal */
+}
+
+.onpe-modal-nfc-title {
+  text-align: center;
+  color: var(--onpe-ui-blue);
+  font-weight: 700; /* font-bold */
+  font-size: 18px; /* text-lg */
+}
+
+.onpe-modal-nfc-content {
+  display: flex;
+  flex-direction: column;
+  gap: 24px; /* gap-6 */
+  align-items: center;
+  margin-top: 32px; /* mt-8 */
+  font-size: 14px; /* text-sm */
+}
+
+.onpe-modal-nfc-section {
+  width: 100%;
+}
+
+.onpe-modal-nfc-step {
+  font-size: 14px; /* text-sm */
+  text-align: justify;
+  margin-bottom: 12px; /* mb-3 */
+}
+
+.onpe-modal-nfc-step-number {
+  margin-right: 4px; /* mr-1 */
+}
+
+.onpe-modal-nfc-list {
+  list-style-type: disc;
+  padding-left: 16px; /* pl-4 */
+  margin-top: 8px; /* space-y-2 */
+}
+
+.onpe-modal-nfc-list-item {
+  font-size: 14px; /* text-sm */
+  text-align: justify;
+  margin-bottom: 8px; /* space-y-2 */
+}
+
+.onpe-modal-nfc-image {
+  -o-object-fit: contain;
+     object-fit: contain;
+  width: 273px;
+  height: 348px;
+}
+
+.onpe-modal-nfc-text {
+  text-align: justify;
+  margin-top: 8px; /* mt-2 */
+}
+
+.onpe-modal-nfc-subtitle {
+  text-align: center;
+  color: var(--onpe-ui-blue);
+  font-weight: 700; /* font-bold */
+  margin: 20px 0; /* my-5 */
+  font-size: 18px; /* text-lg */
+}
+
+.onpe-modal-nfc-instructions {
+  padding-left: 12px; /* pl-3 */
+}
+
+.onpe-modal-nfc-ordered-list {
+  font-size: 14px; /* text-sm */
+  text-align: justify;
+  list-style-type: decimal;
+  list-style-position: outside;
+}
+
+.onpe-modal-nfc-ordered-list li {
+  margin-bottom: 8px; /* mb-2 */
+}
+
+.onpe-modal-nfc-icon {
+  width: 273px;
+  padding-bottom: 40px; /* pb-10 */
+  color: var(--onpe-ui-blue);
+}
+
+.onpe-modal-nfc-icon-mobile {
+  width: 100%;
+  height: 100%;
+  padding-bottom: 40px; /* pb-10 */
+  color: var(--onpe-ui-blue);
+}
+
+
+/* Estilos específicos para móvil */
+@media (max-width: 640px) {
+  .onpe-modal-nfc-title {
+    font-size: 16px; /* text-base para móvil */
+  }
+  
+  .onpe-modal-nfc-content {
+    gap: 20px; /* gap-5 para móvil */
+    margin-top: 24px; /* mt-6 para móvil */
+  }
+  
+  .onpe-modal-nfc-image {
+    width: 200px; /* Más pequeño en móvil */
+    height: 260px; /* Más pequeño en móvil */
+  }
+  
+  .onpe-modal-nfc-subtitle {
+    font-size: 16px; /* text-base para móvil */
+  }
+}
+
+/* Responsive Design */
+@media (min-width: 640px) {
+  .onpe-modal-nfc-title {
+    font-size: 20px; /* text-xl para tablet y desktop */
+  }
+  
+  .onpe-modal-nfc-content {
+    font-size: 16px; /* text-base para tablet y desktop */
+  }
+  
+  .onpe-modal-nfc-step {
+    font-size: 16px; /* text-base para tablet y desktop */
+  }
+  
+  .onpe-modal-nfc-list-item {
+    font-size: 16px; /* text-base para tablet y desktop */
+  }
+  
+  .onpe-modal-nfc-text {
+    font-size: 16px; /* text-base para tablet y desktop */
+  }
+  
+  .onpe-modal-nfc-subtitle {
+    font-size: 20px; /* text-xl para tablet y desktop */
+  }
+  
+  .onpe-modal-nfc-ordered-list {
+    font-size: 16px; /* text-base para tablet y desktop */
+  }
+}
+
+@media (min-width: 768px) {
+  .onpe-modal-nfc-container {
+    /* Desktop: Tamaño específico de 600px */
+    max-width: 600px !important;
+  }
+}
+
+@media (min-width: 1024px) {
+  .onpe-modal-nfc-container {
+    /* Desktop grande: Tamaño específico de 600px */
+    max-width: 600px !important;
+  }
+}

package/dist/index.d.ts

@@ -90,6 +90,20 @@ declare const Footer: ({ showBrowserInfo, showContactInfo, children, showFooterC
 
 declare const BrowserRecommended: () => react_jsx_runtime.JSX.Element;
 
+interface ModalDnieVersionsProps {
+    isOpen: boolean;
+    onClose: () => void;
+    className?: string;
+}
+declare const ModalDnieVersions: ({ isOpen, onClose, className }: ModalDnieVersionsProps) => react_jsx_runtime.JSX.Element;
+
+interface ModalNfcProps {
+    isOpen: boolean;
+    onClose: () => void;
+    className?: string;
+}
+declare const ModalNfc: ({ isOpen, onClose, className }: ModalNfcProps) => react_jsx_runtime.JSX.Element;
+
 /**
  * Hook para debounce de valores
  * @param value - Valor a debounce
@@ -173,7 +187,9 @@ declare const IconSpinnerDesktop: (props: SVGProps<SVGSVGElement>) => react_jsx_
 
 declare const IconSpinnerMobile: (props: SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
 
-declare const IconInfo: (props: SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+declare const IconHome: ({ ...props }: SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+
+declare const IconMobileNfc: (props: SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
 
 declare const IconChromeColor: (props: SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
 
@@ -201,7 +217,13 @@ declare const IconVotoDigital: (props: SVGProps<SVGSVGElement>) => react_jsx_run
 
 declare const IconElectionsGeneral: (props: SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
 
-declare const ElectionsIcon: (props: SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+declare const IconDnie1: (props: SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+
+declare const IconDnie2: (props: SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+
+declare const IconDnie3: (props: SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+
+declare const IconNfc: (props: SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
 
-export { APIClient, BrowserRecommended, Button, ElectionsIcon, Footer, IconAndroid, IconApple, IconCheck, IconChrome, IconChromeColor, IconClose, IconEdge, IconEdgeColor, IconElectionsGeneral, IconInfo, IconMozilla, IconMozillaColor, IconSafari, IconSafariColor, IconSpinnerDesktop, IconSpinnerMobile, IconVotoDigital, IconWarning, IconWindow, Modal, ModalBrowserIncompatible, ModalConfirm, ModalLoading, ModalSystemIncompatible, Overlay, Portal, Show, StorageManager, apiClient, formatDate, useDebounce, useLocalStorage, validateEmail };
-export type { ButtonProps, FooterProps, ModalBrowserIncompatibleProps, ModalConfirmProps, ModalLoadingProps, ModalProps, ModalSystemIncompatibleProps, OverlayProps, PortalProps, ShowProps };
+export { APIClient, BrowserRecommended, Button, Footer, IconAndroid, IconApple, IconCheck, IconChrome, IconChromeColor, IconClose, IconDnie1, IconDnie2, IconDnie3, IconEdge, IconEdgeColor, IconElectionsGeneral, IconHome, IconMobileNfc, IconMozilla, IconMozillaColor, IconNfc, IconSafari, IconSafariColor, IconSpinnerDesktop, IconSpinnerMobile, IconVotoDigital, IconWarning, IconWindow, Modal, ModalBrowserIncompatible, ModalConfirm, ModalDnieVersions, ModalLoading, ModalNfc, ModalSystemIncompatible, Overlay, Portal, Show, StorageManager, apiClient, formatDate, useDebounce, useLocalStorage, validateEmail };
+export type { ButtonProps, FooterProps, ModalBrowserIncompatibleProps, ModalConfirmProps, ModalDnieVersionsProps, ModalLoadingProps, ModalNfcProps, ModalProps, ModalSystemIncompatibleProps, OverlayProps, PortalProps, ShowProps };

package/dist/index.esm.css

@@ -928,3 +928,306 @@ body.onpe-modal-open {
     display: none;
   }
 }
+
+/* ModalDnieVersions Component Styles */
+.onpe-modal-dnie-versions-container {
+  /* Solo contenido - el espaciado lo maneja el Modal base */
+  width: 100%;
+  max-width: 590px !important; /* Tamaño específico para este modal */
+}
+
+.onpe-modal-dnie-versions-title {
+  text-align: center;
+  color: var(--onpe-ui-blue);
+  font-weight: 700; /* font-bold */
+  margin-bottom: 8px; /* mb-2 */
+  font-size: 18px; /* text-lg */
+}
+
+.onpe-modal-dnie-versions-content {
+  display: flex;
+  flex-direction: column;
+  gap: 40px; /* gap-10 */
+  align-items: center;
+  margin-top: 28px; /* mt-7 */
+  font-size: 14px; /* text-sm */
+}
+
+.onpe-modal-dnie-versions-article {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 40px; /* gap-10 */
+}
+
+.onpe-modal-dnie-versions-text {
+  flex: 1;
+}
+
+.onpe-modal-dnie-versions-subtitle {
+  flex: 1;
+  margin-bottom: 16px; /* mb-4 */
+}
+
+.onpe-modal-dnie-versions-bold {
+  font-weight: 700; /* font-bold */
+}
+
+.onpe-modal-dnie-versions-list {
+  font-size: 14px; /* text-sm */
+  list-style-type: disc;
+  text-align: justify;
+  align-self: flex-start;
+  padding-left: 20px; /* pl-5 */
+}
+
+.onpe-modal-dnie-versions-list li {
+  margin-bottom: 8px; /* mb-2 */
+}
+
+.onpe-modal-dnie-versions-image-container {
+  width: 240px;
+  position: relative;
+}
+
+.onpe-modal-dnie-versions-image-container-double {
+  height: 181px;
+}
+
+.onpe-modal-dnie-versions-image {
+  width: 200px;
+  height: 117px;
+}
+
+.onpe-modal-dnie-versions-image-overlay {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+}
+
+/* Estilos específicos para móvil */
+@media (max-width: 640px) {
+  .onpe-modal-dnie-versions-title {
+    font-size: 16px; /* text-base para móvil */
+  }
+  
+  .onpe-modal-dnie-versions-content {
+    gap: 32px; /* gap-8 para móvil */
+    margin-top: 24px; /* mt-6 para móvil */
+  }
+  
+  .onpe-modal-dnie-versions-article {
+    gap: 32px; /* gap-8 para móvil */
+  }
+  
+  .onpe-modal-dnie-versions-image-container {
+    width: 200px; /* Más pequeño en móvil */
+  }
+  
+  .onpe-modal-dnie-versions-image {
+    width: 180px; /* Más pequeño en móvil */
+    height: 105px; /* Más pequeño en móvil */
+  }
+}
+
+/* Responsive Design */
+@media (min-width: 640px) {
+  .onpe-modal-dnie-versions-title {
+    font-size: 20px; /* text-xl para tablet y desktop */
+  }
+  
+  .onpe-modal-dnie-versions-content {
+    font-size: 16px; /* text-base para tablet y desktop */
+  }
+  
+  .onpe-modal-dnie-versions-list {
+    font-size: 16px; /* text-base para tablet y desktop */
+  }
+}
+
+@media (min-width: 768px) {
+  .onpe-modal-dnie-versions-container {
+    /* Desktop: Tamaño específico de 590px */
+    max-width: 590px !important;
+  }
+  
+  .onpe-modal-dnie-versions-article {
+    flex-direction: row; /* md:flex-row */
+    align-items: flex-start; /* md:items-start */
+  }
+  
+  .onpe-modal-dnie-versions-article:last-child {
+    gap: 52px; /* gap-13 para desktop */
+  }
+}
+
+@media (min-width: 1024px) {
+  .onpe-modal-dnie-versions-container {
+    /* Desktop grande: Tamaño específico de 590px */
+    max-width: 590px !important;
+  }
+}
+
+/* ModalNfc Component Styles */
+.onpe-modal-nfc-container {
+  /* Solo contenido - el espaciado lo maneja el Modal base */
+  width: 100%;
+  max-width: 600px !important; /* Tamaño específico para este modal */
+}
+
+.onpe-modal-nfc-title {
+  text-align: center;
+  color: var(--onpe-ui-blue);
+  font-weight: 700; /* font-bold */
+  font-size: 18px; /* text-lg */
+}
+
+.onpe-modal-nfc-content {
+  display: flex;
+  flex-direction: column;
+  gap: 24px; /* gap-6 */
+  align-items: center;
+  margin-top: 32px; /* mt-8 */
+  font-size: 14px; /* text-sm */
+}
+
+.onpe-modal-nfc-section {
+  width: 100%;
+}
+
+.onpe-modal-nfc-step {
+  font-size: 14px; /* text-sm */
+  text-align: justify;
+  margin-bottom: 12px; /* mb-3 */
+}
+
+.onpe-modal-nfc-step-number {
+  margin-right: 4px; /* mr-1 */
+}
+
+.onpe-modal-nfc-list {
+  list-style-type: disc;
+  padding-left: 16px; /* pl-4 */
+  margin-top: 8px; /* space-y-2 */
+}
+
+.onpe-modal-nfc-list-item {
+  font-size: 14px; /* text-sm */
+  text-align: justify;
+  margin-bottom: 8px; /* space-y-2 */
+}
+
+.onpe-modal-nfc-image {
+  -o-object-fit: contain;
+     object-fit: contain;
+  width: 273px;
+  height: 348px;
+}
+
+.onpe-modal-nfc-text {
+  text-align: justify;
+  margin-top: 8px; /* mt-2 */
+}
+
+.onpe-modal-nfc-subtitle {
+  text-align: center;
+  color: var(--onpe-ui-blue);
+  font-weight: 700; /* font-bold */
+  margin: 20px 0; /* my-5 */
+  font-size: 18px; /* text-lg */
+}
+
+.onpe-modal-nfc-instructions {
+  padding-left: 12px; /* pl-3 */
+}
+
+.onpe-modal-nfc-ordered-list {
+  font-size: 14px; /* text-sm */
+  text-align: justify;
+  list-style-type: decimal;
+  list-style-position: outside;
+}
+
+.onpe-modal-nfc-ordered-list li {
+  margin-bottom: 8px; /* mb-2 */
+}
+
+.onpe-modal-nfc-icon {
+  width: 273px;
+  padding-bottom: 40px; /* pb-10 */
+  color: var(--onpe-ui-blue);
+}
+
+.onpe-modal-nfc-icon-mobile {
+  width: 100%;
+  height: 100%;
+  padding-bottom: 40px; /* pb-10 */
+  color: var(--onpe-ui-blue);
+}
+
+
+/* Estilos específicos para móvil */
+@media (max-width: 640px) {
+  .onpe-modal-nfc-title {
+    font-size: 16px; /* text-base para móvil */
+  }
+  
+  .onpe-modal-nfc-content {
+    gap: 20px; /* gap-5 para móvil */
+    margin-top: 24px; /* mt-6 para móvil */
+  }
+  
+  .onpe-modal-nfc-image {
+    width: 200px; /* Más pequeño en móvil */
+    height: 260px; /* Más pequeño en móvil */
+  }
+  
+  .onpe-modal-nfc-subtitle {
+    font-size: 16px; /* text-base para móvil */
+  }
+}
+
+/* Responsive Design */
+@media (min-width: 640px) {
+  .onpe-modal-nfc-title {
+    font-size: 20px; /* text-xl para tablet y desktop */
+  }
+  
+  .onpe-modal-nfc-content {
+    font-size: 16px; /* text-base para tablet y desktop */
+  }
+  
+  .onpe-modal-nfc-step {
+    font-size: 16px; /* text-base para tablet y desktop */
+  }
+  
+  .onpe-modal-nfc-list-item {
+    font-size: 16px; /* text-base para tablet y desktop */
+  }
+  
+  .onpe-modal-nfc-text {
+    font-size: 16px; /* text-base para tablet y desktop */
+  }
+  
+  .onpe-modal-nfc-subtitle {
+    font-size: 20px; /* text-xl para tablet y desktop */
+  }
+  
+  .onpe-modal-nfc-ordered-list {
+    font-size: 16px; /* text-base para tablet y desktop */
+  }
+}
+
+@media (min-width: 768px) {
+  .onpe-modal-nfc-container {
+    /* Desktop: Tamaño específico de 600px */
+    max-width: 600px !important;
+  }
+}
+
+@media (min-width: 1024px) {
+  .onpe-modal-nfc-container {
+    /* Desktop grande: Tamaño específico de 600px */
+    max-width: 600px !important;
+  }
+}