@votodigital-onpeui/react 0.1.44 → 0.1.46

package/dist/{chunk-7CXCLAZB.mjs → chunk-QM7ORWXU.mjs}

@@ -1,5 +1,5 @@
 import { IconSpinnerDesktop, IconSpinnerMobile, IconCheck, IconQuestion, IconInfo, IconWarningNotRecommended } from './chunk-M2KQXQLY.mjs';
-import { Modal } from './chunk-TH3PUGJ6.mjs';
+import { Modal } from './chunk-OQLX5JLQ.mjs';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useState, useEffect } from 'react';
 
@@ -104,7 +104,6 @@ var ModalConfirm = ({
   const titleId = "modal-confirm-title";
   const messageId = "modal-confirm-message";
   const effectiveTitle = title ?? defaultTitleByType[type] ?? "";
-  const effectiveMessage = message ?? content;
   const effectiveColorClass = color ? colorOverrideMap[color] ?? "text-onpe-skyblue" : "text-onpe-skyblue";
   const effectiveButtonMode = buttonMode ?? (type === "question" ? "confirm" : "single");
   const isConfirmMode = effectiveButtonMode === "confirm";
@@ -152,21 +151,29 @@ var ModalConfirm = ({
             children: effectiveTitle
           }
         ),
-        effectiveMessage && (typeof effectiveMessage === "string" ? /* @__PURE__ */ jsx(
+        message && (typeof message === "string" ? /* @__PURE__ */ jsx(
           "div",
           {
             id: messageId,
             className: `mt-7 text-sm md:text-lg max-w-full text-black ${alignJustify ? "text-justify" : "text-center"}`,
-            dangerouslySetInnerHTML: { __html: effectiveMessage }
+            dangerouslySetInnerHTML: { __html: message }
           }
         ) : /* @__PURE__ */ jsx(
           "div",
           {
             id: messageId,
             className: `mt-7 text-sm md:text-lg max-w-full text-black ${alignJustify ? "text-justify" : "text-center"}`,
-            children: effectiveMessage
+            children: message
           }
         )),
+        content && /* @__PURE__ */ jsx(
+          "div",
+          {
+            id: message ? void 0 : messageId,
+            className: `mt-7 text-sm md:text-lg max-w-full text-black ${alignJustify ? "text-justify" : "text-center"}`,
+            children: content
+          }
+        ),
         /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center w-full gap-5 mt-11 md:hidden", children: [
           /* @__PURE__ */ jsx(
             Button,
@@ -275,5 +282,5 @@ var ModalLoading = ({
 };
 
 export { Button, ModalConfirm, ModalLoading };
-//# sourceMappingURL=chunk-7CXCLAZB.mjs.map
-//# sourceMappingURL=chunk-7CXCLAZB.mjs.map
+//# sourceMappingURL=chunk-QM7ORWXU.mjs.map
+//# sourceMappingURL=chunk-QM7ORWXU.mjs.map

package/dist/chunk-QM7ORWXU.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Button/Button.tsx","../src/components/Feedback/ModalConfirm/ModalConfirm.tsx","../src/components/Feedback/ModalLoading/ModalLoading.tsx"],"names":["jsx","jsxs"],"mappings":"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","file":"chunk-QM7ORWXU.mjs","sourcesContent":["type ButtonColor =\n  | \"blue\"\n  | \"skyblue\"\n  | \"skyblue-light\"\n  | \"yellow\"\n  | \"light-skyblue\"\n  | \"gray\"\n  | \"gray-light\"\n  | \"gray-extra-light\"\n  | \"red\"\n  | \"dark-gray\"\n  | \"green\"\n  | \"yellow-light\"\n  | \"primary\";\n\ntype ButtonSize = \"small\" | \"normal\" | \"large\";\n\nexport interface ButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  color: ButtonColor;\n  title: string;\n  size?: ButtonSize;\n}\n\nconst colorClasses: Record<ButtonColor, string> = {\n  blue: \"bg-onpe-blue\",\n  skyblue: \"bg-onpe-skyblue\",\n  \"skyblue-light\": \"bg-onpe-skyblue-light\",\n  yellow: \"bg-onpe-yellow\",\n  \"light-skyblue\": \"bg-onpe-light-skyblue\",\n  gray: \"bg-onpe-gray\",\n  \"gray-light\": \"bg-onpe-gray-light\",\n  \"gray-extra-light\": \"bg-onpe-gray-extra-light\",\n  red: \"bg-onpe-red\",\n  \"dark-gray\": \"bg-onpe-dark-gray\",\n  green: \"bg-onpe-green\",\n  \"yellow-light\": \"bg-onpe-yellow-light\",\n  primary: \"bg-onpe-blue\",\n};\n\nconst sizeClasses: Record<ButtonSize, string> = {\n  small: \"h-10 text-sm\",\n  normal: \"h-12 text-base\",\n  large: \"h-14 text-lg\",\n};\n\nexport function Button({\n  color,\n  title,\n  size = \"normal\",\n  className = \"\",\n  ...props\n}: ButtonProps) {\n  return (\n    <button\n      className={[\n        \"inline-flex items-center justify-center\",\n        \"min-w-[200px] border-none\",\n        \"text-white font-semibold cursor-pointer\",\n        \"transition-all duration-300 ease-in-out\",\n        \"disabled:cursor-default disabled:!bg-onpe-gray\",\n        colorClasses[color],\n        sizeClasses[size],\n        className,\n      ]\n        .filter(Boolean)\n        .join(\" \")}\n      {...props}\n    >\n      {title}\n    </button>\n  );\n}\n\nexport default Button;\n","import { type ReactNode } from \"react\";\r\nimport { Modal } from \"../../Modal/Modal\";\r\nimport { Button } from \"../../Button/Button\";\r\nimport { IconCheck } from \"../../../icons/Actions/IconCheck\";\r\nimport { IconWarningNotRecommended } from \"../../../icons\";\r\nimport { IconQuestion } from \"../../../icons/Actions/IconQuestion\";\r\nimport { IconInfo } from \"../../../icons/Actions/IconInfo\";\r\n\r\nexport type ModalType = \"warning\" | \"success\" | \"question\" | \"info\" | \"none\";\r\n\r\n/** Mapa de override de color a clase CSS (icono + título) */\r\nconst colorOverrideMap: Record<string, string> = {\r\n  red: \"text-onpe-red\",\r\n  blue: \"text-onpe-blue\",\r\n  skyblue: \"text-onpe-skyblue\",\r\n  yellow: \"text-onpe-yellow\",\r\n};\r\n\r\nfunction renderIcon(type: ModalType, colorClass: string): ReactNode {\r\n  if (type === \"none\") return null;\r\n  if (type === \"success\") {\r\n    return <IconCheck role=\"presentation\" className={`w-16 h-16 ${colorClass}`} />;\r\n  }\r\n  if (type === \"question\") {\r\n    return <IconQuestion role=\"presentation\" className={`w-16 h-16 ${colorClass}`} />;\r\n  }\r\n  if (type === \"info\") {\r\n    return <IconInfo role=\"presentation\" className={`w-16 h-16 ${colorClass}`} />;\r\n  }\r\n  // error | warning\r\n  return <IconWarningNotRecommended role=\"presentation\" className={`w-16 h-16 ${colorClass}`} />;\r\n}\r\n\r\nconst defaultTitleByType: Record<string, string> = {\r\n  success: \"Confirmación\",\r\n  warning: \"Advertencia\",\r\n  question: \"Atención\",\r\n  info: \"Información\",\r\n};\r\n\r\nexport interface ModalConfirmProps {\r\n  isOpen: boolean;\r\n  onClose: () => void;\r\n  title?: string;\r\n  /** Contenido del modal (string o JSX) */\r\n  message?: ReactNode;\r\n  /** Alias de message */\r\n  content?: ReactNode;\r\n  /** Tipo semántico: determina icono, color de título y color de botón confirmar */\r\n  type?: ModalType;\r\n  /**\r\n   * \"single\" → un botón \"Confirmar\".\r\n   * \"double\" → \"Cancelar\" + \"Confirmar\".\r\n   * \"confirm\" → \"No\" + \"Sí\" (diálogo de confirmación Sí/No).\r\n   */\r\n  buttonMode?: \"single\" | \"double\" | \"confirm\";\r\n  /** Deshabilita el botón confirmar */\r\n  disabledConfirmButton?: boolean;\r\n  /** Deshabilita el cierre del modal */\r\n  closeDisabled?: boolean;\r\n  /**\r\n   * Override del color del icono y título.\r\n   * Si no se provee, se deriva automáticamente del `type`.\r\n   */\r\n  color?: \"red\" | \"blue\" | \"skyblue\" | \"yellow\";\r\n  onConfirm?: () => void | Promise<void>;\r\n  onCancel?: () => void | Promise<void>;\r\n  textButtonConfirm?: string;\r\n  textButtonCancel?: string;\r\n  className?: string;\r\n  zIndexLevel?: number;\r\n  withoutAutoClose?: boolean;\r\n  disableFocus?: boolean;\r\n  /** Muestra el botón X para cerrar el modal */\r\n  closeButton?: boolean;\r\n  /** Alinea el texto del mensaje a la izquierda (justify) en vez de centrado */\r\n  alignJustify?: boolean;\r\n  /** Alinea el modal al tope de la pantalla en vez de al centro */\r\n  alignTop?: boolean;\r\n  /** Habilita animación de entrada/salida (default: true) */\r\n  animated?: boolean;\r\n  /** Bloquea el scroll del body mientras el modal está abierto (default: true) */\r\n  preventBodyScroll?: boolean;\r\n}\r\n\r\nexport const ModalConfirm = ({\r\n  isOpen = false,\r\n  onClose = () => {},\r\n  withoutAutoClose = false,\r\n  title,\r\n  message,\r\n  content,\r\n  type = \"warning\",\r\n  buttonMode,\r\n  disabledConfirmButton = false,\r\n  closeDisabled = false,\r\n  color,\r\n  onConfirm = () => {},\r\n  onCancel = () => {},\r\n  textButtonConfirm,\r\n  textButtonCancel,\r\n  className = \"\",\r\n  zIndexLevel = 100,\r\n  disableFocus = false,\r\n  closeButton = false,\r\n  alignJustify = false,\r\n  alignTop = false,\r\n  animated = true,\r\n  preventBodyScroll = true,\r\n}: ModalConfirmProps) => {\r\n  const titleId = \"modal-confirm-title\";\r\n  const messageId = \"modal-confirm-message\";\r\n\r\n  const effectiveTitle = title ?? defaultTitleByType[type] ?? \"\";\r\n  // Título e ícono siempre skyblue por defecto; `color` es el único override\r\n  const effectiveColorClass = color\r\n    ? (colorOverrideMap[color] ?? \"text-onpe-skyblue\")\r\n    : \"text-onpe-skyblue\";\r\n  const effectiveButtonMode = buttonMode ?? (type === \"question\" ? \"confirm\" : \"single\");\r\n  const isConfirmMode = effectiveButtonMode === \"confirm\";\r\n  const showTwoButtons = effectiveButtonMode === \"double\" || isConfirmMode;\r\n  const confirmLabel = textButtonConfirm ?? (isConfirmMode ? \"Sí\" : effectiveButtonMode === \"double\" ? \"Confirmar\" : \"Aceptar\");\r\n  const cancelLabel = textButtonCancel ?? (isConfirmMode ? \"No\" : \"Cancelar\");\r\n\r\n  const handleConfirm = async () => {\r\n    try {\r\n      await onConfirm();\r\n      if (!withoutAutoClose) onClose();\r\n    } catch (error) {\r\n      console.error(\"Error en handleConfirm:\", error);\r\n      if (!withoutAutoClose) onClose();\r\n    }\r\n  };\r\n\r\n  const handleCancel = () => {\r\n    onCancel();\r\n    if (!withoutAutoClose) onClose();\r\n  };\r\n\r\n  return (\r\n    <Modal\r\n      isOpen={isOpen}\r\n      onClose={onClose}\r\n      className={`bg-white pt-[30px] pb-[30px] px-[30px] max-w-[719px]! ${className}`}\r\n      closeButton={closeButton}\r\n      closeDisabled={closeDisabled}\r\n      zIndexLevel={zIndexLevel}\r\n      aria-labelledby={titleId}\r\n      aria-describedby={messageId}\r\n      disableFocus={disableFocus}\r\n      alignTop={alignTop}\r\n      animated={animated}\r\n      preventBodyScroll={preventBodyScroll}\r\n    >\r\n      {/* Icono */}\r\n      <div className=\"flex items-center justify-center\">\r\n        {renderIcon(type, effectiveColorClass)}\r\n      </div>\r\n\r\n      {/* Título */}\r\n      <p\r\n        id={titleId}\r\n        className={[\r\n          \"text-lg md:text-2xl font-semibold text-center mt-0 md:mt-4\",\r\n          effectiveColorClass,\r\n        ].join(\" \")}\r\n      >\r\n        {effectiveTitle}\r\n      </p>\r\n\r\n      {/* Mensaje / Contenido */}\r\n      {message && (\r\n        typeof message === \"string\" ? (\r\n          <div\r\n            id={messageId}\r\n            className={`mt-7 text-sm md:text-lg max-w-full text-black ${alignJustify ? \"text-justify\" : \"text-center\"}`}\r\n            dangerouslySetInnerHTML={{ __html: message }}\r\n          />\r\n        ) : (\r\n          <div\r\n            id={messageId}\r\n            className={`mt-7 text-sm md:text-lg max-w-full text-black ${alignJustify ? \"text-justify\" : \"text-center\"}`}\r\n          >\r\n            {message}\r\n          </div>\r\n        )\r\n      )}\r\n      {content && (\r\n        <div\r\n          id={message ? undefined : messageId}\r\n          className={`mt-7 text-sm md:text-lg max-w-full text-black ${alignJustify ? \"text-justify\" : \"text-center\"}`}\r\n        >\r\n          {content}\r\n        </div>\r\n      )}\r\n\r\n      {/* Mobile: apilado */}\r\n      <div className=\"flex flex-col items-center justify-center w-full gap-5 mt-11 md:hidden\">\r\n        <Button\r\n          className=\"w-full max-w-[200px]\"\r\n          color=\"red\"\r\n          title={confirmLabel}\r\n          onClick={handleConfirm}\r\n          disabled={disabledConfirmButton}\r\n        />\r\n        {showTwoButtons && (\r\n          <Button\r\n            className=\"w-full max-w-[200px]\"\r\n            color=\"skyblue\"\r\n            title={cancelLabel}\r\n            onClick={handleCancel}\r\n          />\r\n        )}\r\n      </div>\r\n\r\n      {/* Desktop: fila */}\r\n      <div className=\"hidden md:flex md:flex-row items-center justify-center w-full gap-5 mt-11\">\r\n        {showTwoButtons && (\r\n          <Button\r\n            className=\"w-[200px]\"\r\n            color=\"skyblue\"\r\n            title={cancelLabel}\r\n            onClick={handleCancel}\r\n          />\r\n        )}\r\n        <Button\r\n          className=\"w-[200px]\"\r\n          color=\"red\"\r\n          title={confirmLabel}\r\n          onClick={handleConfirm}\r\n          disabled={disabledConfirmButton}\r\n        />\r\n      </div>\r\n    </Modal>\r\n  );\r\n};\r\n\r\nexport default ModalConfirm;\r\n","import { type ReactNode, useEffect, useState } from \"react\";\r\nimport { Modal } from \"../../Modal/Modal\";\r\nimport { IconSpinnerDesktop } from \"../../../icons/Actions/IconSpinnerDesktop\";\r\nimport { IconSpinnerMobile } from \"../../../icons/Actions/IconSpinnerMobile\";\r\n\r\nexport interface ModalLoadingProps {\r\n  isOpen: boolean;\r\n  onClose?: () => void;\r\n  message?: string;\r\n  className?: string;\r\n  zIndexLevel?: number;\r\n  animated?: boolean;\r\n  preventBodyScroll?: boolean;\r\n  /** Spinner personalizado. Si no se provee, se usa el spinner por defecto de la librería. */\r\n  spinner?: ReactNode;\r\n}\r\n\r\nexport const ModalLoading = ({\r\n  isOpen = false,\r\n  onClose = () => {},\r\n  message = \"Cargando...\",\r\n  className = \"\",\r\n  zIndexLevel = 100,\r\n  animated = true,\r\n  preventBodyScroll = true,\r\n  spinner,\r\n}: ModalLoadingProps) => {\r\n  const [announceMessage, setAnnounceMessage] = useState(\"\");\r\n\r\n  useEffect(() => {\r\n    if (!isOpen) {\r\n      setAnnounceMessage(\"\");\r\n      return;\r\n    }\r\n    setAnnounceMessage(\"\");\r\n    const t = globalThis.setTimeout(() => {\r\n      setAnnounceMessage(message);\r\n    }, 150);\r\n    return () => {\r\n      globalThis.clearTimeout(t);\r\n    };\r\n  }, [isOpen, message]);\r\n\r\n  return (\r\n    <Modal\r\n      disableFocus\r\n      zIndexLevel={zIndexLevel}\r\n      isOpen={isOpen}\r\n      onClose={onClose}\r\n      className={className}\r\n      closeDisabled\r\n      whitoutBackground={true}\r\n      animated={animated}\r\n      preventBodyScroll={preventBodyScroll}\r\n    >\r\n      <div className=\"sr-only\" aria-live=\"assertive\" aria-atomic=\"true\">\r\n        {announceMessage}\r\n      </div>\r\n      {spinner ?? (\r\n        <>\r\n          <IconSpinnerDesktop\r\n            className=\"hidden md:block text-white animate-spin\"\r\n            aria-hidden=\"true\"\r\n          />\r\n          <IconSpinnerMobile\r\n            className=\"block md:hidden text-white animate-spin\"\r\n            aria-hidden=\"true\"\r\n          />\r\n        </>\r\n      )}\r\n      <p className=\"text-white leading-normal text-2xl md:text-[64px] text-center mt-10 md:mt-20\">\r\n        {message}\r\n      </p>\r\n    </Modal>\r\n  );\r\n};\r\n\r\nexport default ModalLoading;\r\n"]}

package/dist/components.js

@@ -1213,7 +1213,6 @@ var ModalConfirm = ({
   const titleId = "modal-confirm-title";
   const messageId = "modal-confirm-message";
   const effectiveTitle = title ?? defaultTitleByType[type] ?? "";
-  const effectiveMessage = message ?? content;
   const effectiveColorClass = color ? colorOverrideMap[color] ?? "text-onpe-skyblue" : "text-onpe-skyblue";
   const effectiveButtonMode = buttonMode ?? (type === "question" ? "confirm" : "single");
   const isConfirmMode = effectiveButtonMode === "confirm";
@@ -1261,21 +1260,29 @@ var ModalConfirm = ({
             children: effectiveTitle
           }
         ),
-        effectiveMessage && (typeof effectiveMessage === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+        message && (typeof message === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
             id: messageId,
             className: `mt-7 text-sm md:text-lg max-w-full text-black ${alignJustify ? "text-justify" : "text-center"}`,
-            dangerouslySetInnerHTML: { __html: effectiveMessage }
+            dangerouslySetInnerHTML: { __html: message }
           }
         ) : /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
             id: messageId,
             className: `mt-7 text-sm md:text-lg max-w-full text-black ${alignJustify ? "text-justify" : "text-center"}`,
-            children: effectiveMessage
+            children: message
           }
         )),
+        content && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            id: message ? void 0 : messageId,
+            className: `mt-7 text-sm md:text-lg max-w-full text-black ${alignJustify ? "text-justify" : "text-center"}`,
+            children: content
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center w-full gap-5 mt-11 md:hidden", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             Button,
@@ -1398,7 +1405,7 @@ var ModalDnieVersions = ({
       zIndexLevel,
       isOpen,
       onClose,
-      className: `bg-white max-w-[590px]! pt-[30px] pb-[38px] ${className}`,
+      className: `bg-white max-w-[590px]! pt-[30px] pb-[38px] md:pt-[35px] px-4 md:pb-[54px] md:px-8 ${className}`,
       closeButton: true,
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs(
@@ -1419,20 +1426,28 @@ var ModalDnieVersions = ({
                 /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "DNI electr\xF3nico versi\xF3n 1" }),
                 /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: "DNIe versi\xF3n 1" })
               ] }) }),
-              /* @__PURE__ */ jsxRuntime.jsxs("ul", { role: "none", className: "text-sm list-disc text-justify self-start pl-8", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("li", { role: "none", className: "mb-2", children: /* @__PURE__ */ jsxRuntime.jsxs("p", { tabIndex: 0, children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Chip en la parte delantera del DNI electr\xF3nico." }),
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: "Chip en la parte delantera del DNIe." })
-                ] }) }),
-                /* @__PURE__ */ jsxRuntime.jsx("li", { role: "none", className: "mb-2", children: /* @__PURE__ */ jsxRuntime.jsxs("p", { tabIndex: 0, children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Compatible solo con el lector del DNI electr\xF3nico en PC, Mac o laptop." }),
-                  /* @__PURE__ */ jsxRuntime.jsxs("span", { "aria-hidden": "true", children: [
-                    "Compatible solo con el lector del DNIe en ",
-                    /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "PC, Mac o laptop" }),
-                    "."
-                  ] })
-                ] }) })
-              ] })
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "ul",
+                {
+                  role: "none",
+                  className: "text-sm list-disc text-justify self-start pl-8",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("li", { role: "none", className: "mb-2", children: /* @__PURE__ */ jsxRuntime.jsxs("p", { tabIndex: 0, children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Chip en la parte delantera del DNI electr\xF3nico." }),
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: "Chip en la parte delantera del DNIe." })
+                    ] }) }),
+                    /* @__PURE__ */ jsxRuntime.jsx("li", { role: "none", className: "mb-2", children: /* @__PURE__ */ jsxRuntime.jsxs("p", { tabIndex: 0, children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Compatible solo con el lector del DNI electr\xF3nico en PC, Mac o laptop." }),
+                      /* @__PURE__ */ jsxRuntime.jsxs("span", { "aria-hidden": "true", children: [
+                        "Compatible solo con el lector del DNIe en",
+                        " ",
+                        /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "PC, Mac o laptop" }),
+                        "."
+                      ] })
+                    ] }) })
+                  ]
+                }
+              )
             ] }),
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-[240px] sm:w-[200px] relative flex justify-center", children: iconDnie1 })
           ] }),
@@ -1442,20 +1457,31 @@ var ModalDnieVersions = ({
                 /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "DNI electr\xF3nico versi\xF3n 2 y 3" }),
                 /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: "DNIe versi\xF3n 2 y 3" })
               ] }) }),
-              /* @__PURE__ */ jsxRuntime.jsxs("ul", { role: "none", className: "text-sm list-disc text-justify self-start pl-8", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("li", { role: "none", className: "mb-2", children: /* @__PURE__ */ jsxRuntime.jsxs("p", { tabIndex: 0, children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Chip en la parte posterior del DNI electr\xF3nico." }),
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: "Chip en la parte posterior del DNIe." })
-                ] }) }),
-                /* @__PURE__ */ jsxRuntime.jsx("li", { role: "none", className: "mb-2", children: /* @__PURE__ */ jsxRuntime.jsxs("p", { tabIndex: 0, children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Compatibles con el lector del DNI electr\xF3nico en PC, Mac o laptop y tecnolog\xEDa NFC (ISO 14443-B) en m\xF3viles." }),
-                  /* @__PURE__ */ jsxRuntime.jsxs("span", { "aria-hidden": "true", children: [
-                    "Compatibles con el lector del DNIe en ",
-                    /* @__PURE__ */ jsxRuntime.jsx("strong", { children: " PC, Mac o laptop y tecnolog\xEDa NFC (ISO 14443-B) en m\xF3viles" }),
-                    "."
-                  ] })
-                ] }) })
-              ] })
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "ul",
+                {
+                  role: "none",
+                  className: "text-sm list-disc text-justify self-start pl-8",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("li", { role: "none", className: "mb-2", children: /* @__PURE__ */ jsxRuntime.jsxs("p", { tabIndex: 0, children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Chip en la parte posterior del DNI electr\xF3nico." }),
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: "Chip en la parte posterior del DNIe." })
+                    ] }) }),
+                    /* @__PURE__ */ jsxRuntime.jsx("li", { role: "none", className: "mb-2", children: /* @__PURE__ */ jsxRuntime.jsxs("p", { tabIndex: 0, children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Compatibles con el lector del DNI electr\xF3nico en PC, Mac o laptop y tecnolog\xEDa NFC (ISO 14443-B) en m\xF3viles." }),
+                      /* @__PURE__ */ jsxRuntime.jsxs("span", { "aria-hidden": "true", children: [
+                        "Compatibles con el lector del DNIe en",
+                        " ",
+                        /* @__PURE__ */ jsxRuntime.jsxs("strong", { children: [
+                          " ",
+                          "PC, Mac o laptop y tecnolog\xEDa NFC (ISO 14443-B) en m\xF3viles"
+                        ] }),
+                        "."
+                      ] })
+                    ] }) })
+                  ]
+                }
+              )
             ] }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-[240px] sm:w-[200px] h-[181px] relative", children: [
               iconDnie2,
@@ -1484,10 +1510,17 @@ var ModalNfc = ({
       zIndexLevel,
       isOpen,
       onClose,
-      className: `bg-white max-w-[600px]! pt-[46px] pb-[46px] px-[30px] md:px-[50px] ${className}`,
+      className: `bg-white max-w-[600px]! pt-[46px] pb-[46px] px-[30px] md:px-[50px] md:pt-[35px] md:pb-[54px]  ${className}`,
       closeButton: true,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-center text-onpe-blue font-bold text-base", tabIndex: 0, children: "\xBFC\xF3mo saber si tu dispositivo m\xF3vil tiene NFC?" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "h2",
+          {
+            className: "text-center text-onpe-blue font-bold text-base",
+            tabIndex: 0,
+            children: "\xBFC\xF3mo saber si tu dispositivo m\xF3vil tiene NFC?"
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "flex flex-col gap-6 items-center mt-8 text-sm w-full", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full", children: [
             /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-justify mb-3", tabIndex: 0, children: [
@@ -1495,14 +1528,28 @@ var ModalNfc = ({
               "Celular Android"
             ] }),
             /* @__PURE__ */ jsxRuntime.jsxs("ul", { role: "presentation", className: "list-disc pl-[26px] mt-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("li", { role: "presentation", className: "text-sm text-left mb-2 tracking-[0.15px]", children: "Desde la barra de notificaciones, simplemente deslizando hacia abajo desde tu pantalla y buscando el \xEDcono del NFC." }),
-              /* @__PURE__ */ jsxRuntime.jsxs("li", { role: "presentation", className: "text-sm text-left mb-2 tracking-[0.15px]", children: [
-                "Otra forma es ir hacia Ajustes",
-                /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: " > " }),
-                "Conexiones o Redes Inal\xE1mbricas",
-                /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: " > " }),
-                'Buscar "NFC".'
-              ] })
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "li",
+                {
+                  role: "presentation",
+                  className: "text-sm text-left mb-2 tracking-[0.15px]",
+                  children: "Desde la barra de notificaciones, simplemente deslizando hacia abajo desde tu pantalla y buscando el \xEDcono del NFC."
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "li",
+                {
+                  role: "presentation",
+                  className: "text-sm text-left mb-2 tracking-[0.15px]",
+                  children: [
+                    "Otra forma es ir hacia Ajustes",
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: " > " }),
+                    "Conexiones o Redes Inal\xE1mbricas",
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: " > " }),
+                    'Buscar "NFC".'
+                  ]
+                }
+              )
             ] })
           ] }),
           iconNfc1,
@@ -1511,16 +1558,37 @@ var ModalNfc = ({
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mr-1", children: "2." }),
               "Celular iPhone"
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("ul", { role: "presentation", className: "list-disc pl-[26px] mt-2", children: /* @__PURE__ */ jsxRuntime.jsx("li", { role: "presentation", className: "text-sm text-left mb-2 tracking-[0.15px]", children: "Todos los modelos iPhone 7 en adelante ya cuentan con tecnolog\xEDa NFC activa." }) })
+            /* @__PURE__ */ jsxRuntime.jsx("ul", { role: "presentation", className: "list-disc pl-[26px] mt-2", children: /* @__PURE__ */ jsxRuntime.jsx(
+              "li",
+              {
+                role: "presentation",
+                className: "text-sm text-left mb-2 tracking-[0.15px]",
+                children: "Todos los modelos iPhone 7 en adelante ya cuentan con tecnolog\xEDa NFC activa."
+              }
+            ) })
           ] }),
           iconNfc2,
-          /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-center text-onpe-blue font-bold my-5 text-base", tabIndex: 0, children: "\xBFC\xF3mo usar el NFC correctamente?" }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pl-3 w-full", children: /* @__PURE__ */ jsxRuntime.jsxs("ol", { role: "presentation", className: "text-sm text-justify list-decimal list-outside", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("li", { role: "presentation", className: "mb-2", children: "Activa el NFC en tu celular." }),
-            /* @__PURE__ */ jsxRuntime.jsx("li", { role: "presentation", className: "mb-2", children: "Busca en internet d\xF3nde est\xE1 el lector NFC seg\xFAn tu modelo." }),
-            /* @__PURE__ */ jsxRuntime.jsx("li", { role: "presentation", className: "mb-2", children: "Coloca tu DNIe sobre esa zona hasta que recibas la confirmaci\xF3n del sistema." }),
-            /* @__PURE__ */ jsxRuntime.jsx("li", { role: "presentation", className: "mb-2", children: 'Puedes consultar los videos "Aprende como leer tu DNIe con NFC":' })
-          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "h2",
+            {
+              className: "text-center text-onpe-blue font-bold my-5 text-base",
+              tabIndex: 0,
+              children: "\xBFC\xF3mo usar el NFC correctamente?"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pl-3 w-full", children: /* @__PURE__ */ jsxRuntime.jsxs(
+            "ol",
+            {
+              role: "presentation",
+              className: "text-sm text-justify list-decimal list-outside",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("li", { role: "presentation", className: "mb-2", children: "Activa el NFC en tu celular." }),
+                /* @__PURE__ */ jsxRuntime.jsx("li", { role: "presentation", className: "mb-2", children: "Busca en internet d\xF3nde est\xE1 el lector NFC seg\xFAn tu modelo." }),
+                /* @__PURE__ */ jsxRuntime.jsx("li", { role: "presentation", className: "mb-2", children: "Coloca tu DNIe sobre esa zona hasta que recibas la confirmaci\xF3n del sistema." }),
+                /* @__PURE__ */ jsxRuntime.jsx("li", { role: "presentation", className: "mb-2", children: 'Puedes consultar los videos "Aprende como leer tu DNIe con NFC":' })
+              ]
+            }
+          ) }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row gap-5 justify-center items-center", children: [
             /* @__PURE__ */ jsxRuntime.jsxs(
               "a",