@votodigital-onpeui/react 0.1.0

package/dist/chunk-VPOCM2HP.mjs

@@ -0,0 +1,1038 @@
+import { IconChrome, IconSafari, IconEdge, FaceBookIcon, XIcon, TikTokIcon, InstagramIcon, YoutubeIcon, IconCloseRadius, IconWarning, IconChromeColor, IconSafariColor, IconEdgeColor, IconWindow, IconAndroid, IconApple, IconWarningNotRecommended, IconCheck, IconSpinnerDesktop, IconSpinnerMobile } from './chunk-4CXYX4SI.mjs';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState, useEffect, useRef } from 'react';
+import { createPortal } from 'react-dom';
+
+var colorClasses = {
+  blue: "bg-onpe-blue",
+  skyblue: "bg-onpe-skyblue",
+  "skyblue-light": "bg-onpe-skyblue-light",
+  yellow: "bg-onpe-yellow",
+  "light-skyblue": "bg-onpe-light-skyblue",
+  gray: "bg-onpe-gray",
+  "gray-light": "bg-onpe-gray-light",
+  "gray-extra-light": "bg-onpe-gray-extra-light",
+  red: "bg-onpe-red",
+  "dark-gray": "bg-onpe-dark-gray",
+  green: "bg-onpe-green",
+  "yellow-light": "bg-onpe-yellow-light",
+  primary: "bg-onpe-blue"
+};
+var sizeClasses = {
+  small: "h-10 text-sm",
+  normal: "h-12 text-base",
+  large: "h-14 text-lg"
+};
+function Button({
+  color,
+  title,
+  size = "normal",
+  className = "",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      className: [
+        "inline-flex items-center justify-center",
+        "min-w-[200px] border-none",
+        "text-white font-semibold cursor-pointer",
+        "transition-all duration-300 ease-in-out",
+        "disabled:cursor-default disabled:!bg-onpe-gray",
+        colorClasses[color],
+        sizeClasses[size],
+        className
+      ].filter(Boolean).join(" "),
+      ...props,
+      children: title
+    }
+  );
+}
+var BrowserRecommended = () => {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col lg:flex-row lg:py-2 items-center justify-center gap-6 py-3 pb-6 text-xs text-center text-onpe-blue bg-onpe-skyblue-light/15", children: [
+    /* @__PURE__ */ jsx("p", { children: "Navegadores recomendados:" }),
+    /* @__PURE__ */ jsxs("ul", { className: "flex gap-6 lg:gap-8", children: [
+      /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(IconChrome, { "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Google Chrome" }),
+        /* @__PURE__ */ jsx("p", { className: "hidden md:block text-left", "aria-hidden": "true", children: "Google Chrome" })
+      ] }),
+      /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(IconSafari, { "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Safari" }),
+        /* @__PURE__ */ jsx("p", { className: "hidden md:block text-left", "aria-hidden": "true", children: "Safari" })
+      ] }),
+      /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(IconEdge, { "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Microsoft Edge" }),
+        /* @__PURE__ */ jsx("p", { className: "hidden md:block text-left", "aria-hidden": "true", children: "Microsoft Edge" })
+      ] })
+    ] })
+  ] });
+};
+var Footer = ({
+  showBrowserInfo = true,
+  showContactInfo = true,
+  children,
+  showFooterContent = true,
+  isDevelopment = true,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxs("footer", { ...props, tabIndex: 0, "aria-label": "", children: [
+    showFooterContent && /* @__PURE__ */ jsxs(Fragment, { children: [
+      children && children,
+      showBrowserInfo && /* @__PURE__ */ jsx(BrowserRecommended, {}),
+      showContactInfo && /* @__PURE__ */ jsx("div", { className: "relative z-10 flex w-full min-h-[100px] bg-onpe-blue", children: /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-start w-full flex-col gap-6 mx-auto py-14 px-4 max-w-[1460px] md:py-5 md:px-4 lg:flex-row lg:items-center", children: [
+        /* @__PURE__ */ jsxs("div", { tabIndex: 0, children: [
+          /* @__PURE__ */ jsxs("p", { className: "font-semibold text-onpe-yellow mb-1", children: [
+            /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Oficina central" }),
+            /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "Oficina central:" })
+          ] }),
+          /* @__PURE__ */ jsxs("p", { className: "flex text-sm font-medium text-white", children: [
+            /* @__PURE__ */ jsx("span", { className: "sr-only", lang: "es-PE", children: "Direcci\xF3n: jiroon Washington 1894, Cercado de Lima" }),
+            /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "Jr. Washington 1894, Cercado de Lima" })
+          ] }),
+          /* @__PURE__ */ jsxs("p", { className: "flex text-sm font-medium text-white", children: [
+            /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Horario de atenci\xF3n: Lunes a viernes de 8:30 a. m. a 5:00 p. m." }),
+            /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "Lunes a viernes de 8:30 a. m. a 5:00 p. m." })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { tabIndex: 0, children: [
+          /* @__PURE__ */ jsxs("p", { className: "font-semibold text-onpe-yellow mb-1", children: [
+            /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Cont\xE1ctanos" }),
+            /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "Cont\xE1ctanos:" })
+          ] }),
+          /* @__PURE__ */ jsxs("p", { className: "flex text-sm font-medium text-white", children: [
+            /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Correo electr\xF3nico, informes@onpe punto goob punto pe," }),
+            /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "informes@onpe.gob.pe" })
+          ] }),
+          /* @__PURE__ */ jsxs("p", { className: "flex text-sm font-medium text-white", children: [
+            /* @__PURE__ */ jsx("span", { className: "sr-only", children: "N\xFAmero telef\xF3nico, (01)4170630," }),
+            /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "(01)4170630" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { tabIndex: 0, children: [
+          /* @__PURE__ */ jsxs("p", { className: "font-semibold text-onpe-yellow mb-1", children: [
+            /* @__PURE__ */ jsx("span", { className: "sr-only", children: "S\xEDguenos en nuestras redes sociales" }),
+            /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "S\xEDguenos:" })
+          ] }),
+          /* @__PURE__ */ jsxs("p", { className: "flex text-sm font-medium text-white gap-4", children: [
+            /* @__PURE__ */ jsx(
+              "a",
+              {
+                href: "https://www.facebook.com/ONPEoficial",
+                target: "_blank",
+                rel: "noopener noreferrer",
+                "aria-label": "Facebook de ONPE,",
+                className: "text-onpe-blue-dark",
+                children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: /* @__PURE__ */ jsx(FaceBookIcon, {}) })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "a",
+              {
+                href: "https://x.com/ONPE_oficial",
+                target: "_blank",
+                rel: "noopener noreferrer",
+                "aria-label": "X de ONPE (antes Twitter),",
+                className: "text-onpe-blue-dark",
+                children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: /* @__PURE__ */ jsx(XIcon, {}) })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "a",
+              {
+                href: "https://www.tiktok.com/@onpe_oficial",
+                target: "_blank",
+                rel: "noopener noreferrer",
+                "aria-label": "TikTok de ONPE,",
+                className: "text-onpe-blue-dark",
+                children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: /* @__PURE__ */ jsx(TikTokIcon, {}) })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "a",
+              {
+                href: "https://www.instagram.com/ONPE_oficial/",
+                target: "_blank",
+                rel: "noopener noreferrer",
+                "aria-label": "Instagram de ONPE,",
+                className: "text-onpe-blue-dark",
+                children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: /* @__PURE__ */ jsx(InstagramIcon, {}) })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "a",
+              {
+                href: "https://www.youtube.com/@onpeprensa",
+                target: "_blank",
+                rel: "noopener noreferrer",
+                "aria-label": "YouTube de ONPE,",
+                className: "text-onpe-blue-dark",
+                children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: /* @__PURE__ */ jsx(YoutubeIcon, {}) })
+              }
+            )
+          ] })
+        ] })
+      ] }) })
+    ] }),
+    isDevelopment && /* @__PURE__ */ jsx("div", { className: "h-[93px] w-full text-center flex items-center justify-center bg-onpe-yellow-light/75 fixed z-10 right-0 bottom-0 lg:h-[46px]", children: /* @__PURE__ */ jsx("p", { className: "py-2 px-2 text-2xl text-onpe-blue font-[Consolas,monospace] font-black", children: "Versi\xF3n en Desarrollo - No Oficial" }) })
+  ] });
+};
+var Portal = ({ children, container }) => {
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    setMounted(true);
+    return () => setMounted(false);
+  }, []);
+  if (!mounted) return null;
+  let portalElement = container || document.querySelector("#portal");
+  if (!portalElement) {
+    portalElement = document.body;
+  }
+  return createPortal(children, portalElement);
+};
+var colorClasses2 = {
+  blue: "bg-onpe-blue/80",
+  skyblue: "bg-onpe-skyblue/80",
+  "skyblue-light": "bg-onpe-skyblue-light/80",
+  yellow: "bg-onpe-yellow/80",
+  "light-skyblue": "bg-onpe-light-skyblue/80",
+  gray: "bg-onpe-gray/80",
+  "gray-light": "bg-onpe-gray-light/80",
+  "gray-extra-light": "bg-onpe-gray-extra-light/80",
+  red: "bg-onpe-red/80",
+  "dark-gray": "bg-onpe-dark-gray/80",
+  green: "bg-onpe-green/80",
+  "yellow-light": "bg-onpe-yellow-light/80",
+  primary: "bg-onpe-blue/80"
+};
+var Overlay = ({ show, onClick, color = "blue" }) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      onClick,
+      className: [
+        "absolute inset-0 w-full h-screen z-10 transition-all duration-500",
+        show ? "pointer-events-auto opacity-100" : "pointer-events-none opacity-0",
+        colorClasses2[color]
+      ].join(" ")
+    }
+  );
+};
+var Show = ({ condition, loadingComponent, children }) => {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    condition && loadingComponent,
+    !condition && children
+  ] });
+};
+var Modal = ({
+  isOpen,
+  onClose,
+  children,
+  whitoutBackground = false,
+  closeButton = false,
+  closeDisabled = false,
+  escapeToClose = true,
+  disableFocus = false,
+  disableFocusRestore = false,
+  existTabIndex = true,
+  zIndexLevel = 100,
+  onCloseComplete,
+  overlayColor: _overlayColor = "blue",
+  ...props
+}) => {
+  const modalRef = useRef(null);
+  const contentRef = useRef(null);
+  const previousActiveElement = useRef(null);
+  const [mounted, setMounted] = useState(false);
+  const [visible, setVisible] = useState(false);
+  const [cachedChildren, setCachedChildren] = useState(children);
+  useEffect(() => {
+    if (isOpen) {
+      setCachedChildren(children);
+    }
+  }, [isOpen, children]);
+  useEffect(() => {
+    if (isOpen) {
+      setMounted(true);
+      const raf = requestAnimationFrame(() => {
+        requestAnimationFrame(() => setVisible(true));
+      });
+      return () => cancelAnimationFrame(raf);
+    } else {
+      setVisible(false);
+      const timer = setTimeout(() => {
+        setMounted(false);
+        onCloseComplete?.();
+      }, 200);
+      return () => clearTimeout(timer);
+    }
+  }, [isOpen, onCloseComplete]);
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "";
+    }
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [isOpen]);
+  useEffect(() => {
+    if (!isOpen) return;
+    const resetScroll = () => {
+      const el = contentRef.current;
+      if (!el) return;
+      el.style.scrollBehavior = "auto";
+      el.scrollTop = 0;
+      requestAnimationFrame(() => {
+        el.scrollTop = 0;
+        setTimeout(() => {
+          el.style.scrollBehavior = "smooth";
+        }, 10);
+      });
+    };
+    resetScroll();
+    [10, 50, 100, 200].forEach((d) => setTimeout(resetScroll, d));
+  }, [isOpen]);
+  useEffect(() => {
+    const isElementVisible = (element) => {
+      const style = window.getComputedStyle(element);
+      return style.visibility !== "hidden" && style.display !== "none" && element.offsetParent !== null;
+    };
+    const getFocusableElements = (wrapper) => {
+      const selector = [
+        "a[href]",
+        "area[href]",
+        "button:not([disabled])",
+        'input:not([disabled]):not([type="hidden"])',
+        "select:not([disabled])",
+        "textarea:not([disabled])",
+        "iframe",
+        "object",
+        "embed",
+        '[tabindex]:not([tabindex="-1"])',
+        '[contenteditable="true"]'
+      ].join(",");
+      let focusable = Array.from(
+        wrapper.querySelectorAll(selector)
+      ).filter((el) => isElementVisible(el) && el.tabIndex !== -1);
+      if (wrapper.tabIndex >= 0) {
+        focusable = [wrapper, ...focusable];
+      }
+      return focusable;
+    };
+    const handleFocusOut = (e) => {
+      if (!isOpen || disableFocus) return;
+      const wrapper = modalRef.current;
+      if (!wrapper) return;
+      const relatedTarget = e.relatedTarget;
+      if (relatedTarget && !wrapper.contains(relatedTarget)) {
+        setTimeout(() => {
+          const currentActive = document.activeElement;
+          if (!currentActive || !wrapper.contains(currentActive)) {
+            const focusable = getFocusableElements(wrapper);
+            if (focusable.length > 0) {
+              focusable[focusable.length - 1].focus();
+            } else {
+              wrapper.focus();
+            }
+          }
+        }, 0);
+      }
+    };
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape" && escapeToClose && !closeDisabled) {
+        onClose();
+        return;
+      }
+      if (!isOpen || disableFocus) return;
+      const wrapper = modalRef.current;
+      if (!wrapper) return;
+      const focusable = getFocusableElements(wrapper);
+      const active = document.activeElement || null;
+      const arrowKeys = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"];
+      if (arrowKeys.includes(e.key)) {
+        if (active && wrapper.contains(active)) {
+          const activeIndex2 = focusable.indexOf(active);
+          if ((e.key === "ArrowUp" || e.key === "ArrowLeft") && activeIndex2 === 0) {
+            e.preventDefault();
+            e.stopPropagation();
+            if (focusable.length > 1) focusable[focusable.length - 1].focus();
+            else active.focus();
+            return;
+          }
+          if ((e.key === "ArrowDown" || e.key === "ArrowRight") && activeIndex2 === focusable.length - 1) {
+            e.preventDefault();
+            e.stopPropagation();
+            if (focusable.length > 1) focusable[0].focus();
+            else active.focus();
+            return;
+          }
+          requestAnimationFrame(() => {
+            const currentActive = document.activeElement;
+            if (!currentActive || !wrapper.contains(currentActive)) {
+              if (activeIndex2 !== -1 && focusable[activeIndex2])
+                focusable[activeIndex2].focus();
+              else if (focusable.length > 0) focusable[0].focus();
+              else wrapper.focus();
+            }
+          });
+        } else {
+          e.preventDefault();
+          if (focusable.length > 0) {
+            if (e.key === "ArrowUp" || e.key === "ArrowLeft")
+              focusable[focusable.length - 1].focus();
+            else focusable[0].focus();
+          } else {
+            wrapper.focus();
+          }
+        }
+        return;
+      }
+      if (e.key !== "Tab") return;
+      if (focusable.length === 0) {
+        e.preventDefault();
+        wrapper.focus();
+        return;
+      }
+      const first = focusable[0];
+      const last = focusable[focusable.length - 1];
+      const isShift = e.shiftKey;
+      if (!active || !wrapper.contains(active)) {
+        e.preventDefault();
+        (isShift ? last : first).focus();
+        return;
+      }
+      const activeIndex = focusable.indexOf(active);
+      if (!isShift && (active === last || activeIndex === focusable.length - 1)) {
+        e.preventDefault();
+        first.focus();
+        return;
+      }
+      if (isShift) {
+        e.preventDefault();
+        if (active === first || active === wrapper || activeIndex === 0)
+          last.focus();
+        else if (activeIndex > 0) focusable[activeIndex - 1].focus();
+        else last.focus();
+      }
+    };
+    if (isOpen && !disableFocus) {
+      previousActiveElement.current = document.activeElement;
+      modalRef.current?.focus();
+      document.addEventListener("keydown", handleKeyDown);
+      const wrapper = modalRef.current;
+      if (wrapper) wrapper.addEventListener("focusout", handleFocusOut);
+    } else if (isOpen && disableFocus) {
+      document.addEventListener("keydown", handleKeyDown);
+    }
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+      const wrapper = modalRef.current;
+      if (wrapper) wrapper.removeEventListener("focusout", handleFocusOut);
+      if (!disableFocus && !disableFocusRestore && previousActiveElement.current) {
+        previousActiveElement.current.focus();
+      }
+    };
+  }, [isOpen, onClose, closeDisabled, escapeToClose, disableFocus, disableFocusRestore]);
+  if (!mounted) return null;
+  const contentClass = [
+    "relative flex flex-col items-center justify-start",
+    whitoutBackground ? "bg-transparent" : [
+      "bg-white",
+      "pt-[25px] px-4 pb-[50px]",
+      "min-w-[320px] w-[95vw] max-w-[95vw] max-h-[90vh]",
+      "overflow-y-auto scroll-smooth",
+      "md:pt-[35px] md:px-8 md:pb-[54px] md:max-w-[1000px]"
+    ].join(" "),
+    props.className || ""
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs(Portal, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: { zIndex: zIndexLevel },
+        className: [
+          "fixed inset-0 bg-onpe-blue transition-opacity duration-200",
+          visible ? "opacity-80" : "opacity-0"
+        ].join(" "),
+        onClick: onClose
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: { zIndex: zIndexLevel + 10 },
+        className: [
+          "fixed top-0 w-full h-screen grid place-items-center",
+          "transition-all duration-200",
+          visible ? "opacity-100 scale-100 translate-y-0" : "opacity-[0.2] scale-95 -translate-y-5"
+        ].join(" "),
+        children: /* @__PURE__ */ jsx("div", { className: "relative grid place-items-center", children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: modalRef,
+            onClick: (e) => e.stopPropagation(),
+            ...existTabIndex && { tabIndex: disableFocus ? -1 : 0 },
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-labelledby": props["aria-labelledby"],
+            "aria-describedby": props["aria-describedby"],
+            "aria-label": props["aria-label"],
+            children: [
+              /* @__PURE__ */ jsx("div", { ref: contentRef, className: contentClass, children: cachedChildren }),
+              closeButton && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: onClose,
+                  className: "absolute top-2.5 right-2.5 text-onpe-red cursor-pointer w-4 h-4 border-none bg-transparent p-0 md:w-8 md:h-8",
+                  "aria-label": "Cerrar",
+                  type: "button",
+                  children: /* @__PURE__ */ jsx(IconCloseRadius, { "aria-hidden": "true", className: "w-full h-full" })
+                }
+              )
+            ]
+          }
+        ) })
+      }
+    )
+  ] });
+};
+var ModalBrowserIncompatible = ({
+  isOpen = false,
+  onClose = () => {
+  },
+  className = "",
+  zIndexLevel = 100
+}) => {
+  return /* @__PURE__ */ jsxs(
+    Modal,
+    {
+      zIndexLevel,
+      isOpen,
+      onClose,
+      className: `!max-w-[680px] ${className}`,
+      closeButton: true,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx(
+          IconWarning,
+          {
+            className: "w-16 h-16 sm:w-[84px] sm:h-[84px] text-onpe-skyblue",
+            role: "presentation"
+          }
+        ) }),
+        /* @__PURE__ */ jsx("p", { className: "mt-1 text-base sm:text-2xl font-semibold text-center text-onpe-skyblue", children: "Est\xE1s usando un navegador no recomendado" }),
+        /* @__PURE__ */ jsx("p", { className: "mt-6 text-base sm:text-lg text-center sm:px-2", children: "Para una mejor experiencia y mayor seguridad, debes ingresar con los siguientes navegadores:" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-8 mt-[47px] sm:gap-12", children: [
+          /* @__PURE__ */ jsx(
+            IconChromeColor,
+            {
+              role: "img",
+              "aria-label": "Google Chrome",
+              className: "w-7 h-7 sm:w-12 sm:h-12"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            IconSafariColor,
+            {
+              role: "img",
+              "aria-label": "Safari",
+              className: "w-7 h-7 sm:w-12 sm:h-12"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            IconEdgeColor,
+            {
+              role: "img",
+              "aria-label": "Microsoft Edge",
+              className: "w-7 h-7 sm:w-12 sm:h-12"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+var ModalSystemIncompatible = ({
+  isOpen = false,
+  onClose = () => {
+  },
+  className = "",
+  zIndexLevel = 1e3
+}) => {
+  return /* @__PURE__ */ jsxs(
+    Modal,
+    {
+      zIndexLevel,
+      isOpen,
+      onClose,
+      className: `!max-w-[680px] ${className}`,
+      closeButton: true,
+      closeDisabled: true,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx(
+          IconWarning,
+          {
+            className: "w-16 h-16 sm:w-[84px] sm:h-[84px] text-onpe-skyblue",
+            role: "presentation"
+          }
+        ) }),
+        /* @__PURE__ */ jsx("p", { className: "mt-1 text-base sm:text-2xl font-semibold text-center text-onpe-skyblue", children: "Sistema Operativo no recomendado" }),
+        /* @__PURE__ */ jsx("p", { className: "mt-6 text-base sm:text-lg text-center sm:px-2", children: "Para descargar e instalar el ONPEID utiliza un dispositivo con sistema operativo Windows, macOS, Android o iOS." }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-8 mt-[47px] sm:gap-12", children: [
+          /* @__PURE__ */ jsx(
+            IconWindow,
+            {
+              role: "img",
+              "aria-label": "Windows 10 o superior",
+              className: "w-7 h-7 sm:w-12 sm:h-12 text-onpe-skyblue"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            IconAndroid,
+            {
+              role: "img",
+              "aria-label": "Android 7.0 o superior",
+              className: "w-7 h-7 sm:w-12 sm:h-12 text-onpe-skyblue"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            IconApple,
+            {
+              role: "img",
+              "aria-label": "macOS 10.12 o superior / iOS 11.0 o superior",
+              className: "w-7 h-7 sm:w-12 sm:h-12 text-onpe-skyblue"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+var NotRecommended = ({
+  isOpenBrowserError = false,
+  isOpenDeviceError = false,
+  bottom = 40,
+  right = 20
+}) => {
+  const [isWarningClosed, setIsWarningClosed] = useState(false);
+  const handleOpenWarning = () => setIsWarningClosed(false);
+  const handleCloseWarning = () => setIsWarningClosed(true);
+  const getContainerWidth = () => {
+    if (isWarningClosed) return "60px";
+    if (isOpenDeviceError) return "365px";
+    return "315px";
+  };
+  const getMessageWidth = () => {
+    if (isWarningClosed) return "0";
+    if (isOpenDeviceError) return "335px";
+    return "285px";
+  };
+  const getBottomValue = () => typeof bottom === "string" ? bottom : `${bottom}px`;
+  const getRightValue = () => typeof right === "string" ? right : `${right}px`;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "fixed z-[99]",
+      style: { bottom: getBottomValue(), right: getRightValue() },
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "relative h-[75px] transition-all duration-300",
+          style: { width: getContainerWidth() },
+          children: [
+            isWarningClosed ? /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: handleOpenWarning,
+                className: "absolute left-0 top-0 pb-2 h-[60px] w-[60px] flex items-center justify-center bg-onpe-yellow rounded-full z-10 cursor-pointer border-none transition-transform duration-200 hover:scale-110",
+                "aria-label": "Abrir advertencia",
+                type: "button",
+                children: /* @__PURE__ */ jsx(IconWarningNotRecommended, { className: "w-10 h-[35px] text-black" })
+              }
+            ) : /* @__PURE__ */ jsx("div", { className: "absolute left-0 top-0 pb-2 h-[60px] w-[60px] flex items-center justify-center bg-onpe-yellow rounded-full z-10", children: /* @__PURE__ */ jsx(IconWarningNotRecommended, { className: "w-10 h-[35px] text-black" }) }),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: [
+                  "absolute bg-white left-[30px] top-0 flex flex-col justify-center items-center gap-2",
+                  "border-2 border-onpe-yellow rounded-[10px] h-[60px] text-sm",
+                  "transition-all duration-300 overflow-hidden",
+                  isWarningClosed ? "opacity-0 border-0 pointer-events-none" : "opacity-100"
+                ].join(" "),
+                style: { width: getMessageWidth() },
+                children: /* @__PURE__ */ jsxs("div", { className: "whitespace-nowrap pl-6", children: [
+                  /* @__PURE__ */ jsx("p", { className: "font-bold text-onpe-yellow m-0", children: "Est\xE1s usando un" }),
+                  isOpenDeviceError && /* @__PURE__ */ jsx("p", { className: "m-0 text-onpe-dark-gray", children: "sistema operativo no recomendado" }),
+                  isOpenBrowserError && !isOpenDeviceError && /* @__PURE__ */ jsx("p", { className: "m-0 text-onpe-dark-gray", children: "navegador no recomendado" })
+                ] })
+              }
+            ),
+            !isWarningClosed && /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: handleCloseWarning,
+                className: "absolute -top-2 -right-2 z-20 rounded-full cursor-pointer border-none bg-transparent p-0 transition-opacity duration-200 hover:opacity-80",
+                "aria-label": "Cerrar advertencia",
+                type: "button",
+                children: /* @__PURE__ */ jsx(IconCloseRadius, { className: "w-[23px] h-[23px] text-onpe-yellow bg-white rounded-full" })
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+var ModalConfirm = ({
+  isOpen = false,
+  onClose = () => {
+  },
+  withoutAutoClose = false,
+  title,
+  message,
+  icon = "warning",
+  color = "blue",
+  onConfirm = () => {
+  },
+  onCancel = () => {
+  },
+  textButtonConfirm = "Confirmar",
+  textButtonCancel = "Cancelar",
+  twoButtons = true,
+  className = "",
+  zIndexLevel = 100
+}) => {
+  const titleId = "modal-confirm-title";
+  const messageId = "modal-confirm-message";
+  const handleConfirm = async () => {
+    try {
+      onConfirm();
+      if (!withoutAutoClose) onClose();
+    } catch (error) {
+      console.error("Error en handleConfirm:", error);
+      if (!withoutAutoClose) onClose();
+    }
+  };
+  const handleCancel = () => {
+    onCancel();
+    if (!withoutAutoClose) onClose();
+  };
+  const iconColorClass = color === "red" ? "text-onpe-red" : "text-onpe-skyblue";
+  const titleColorClass = color === "red" ? "text-onpe-red" : "text-onpe-skyblue";
+  return /* @__PURE__ */ jsxs(
+    Modal,
+    {
+      isOpen,
+      onClose,
+      className: `!max-w-[719px] !pt-[30px] !pb-[30px] !px-[30px] ${className}`,
+      closeButton: false,
+      closeDisabled: true,
+      zIndexLevel,
+      "aria-labelledby": titleId,
+      "aria-describedby": messageId,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center", children: [
+          icon === "warning" && /* @__PURE__ */ jsx(
+            IconWarning,
+            {
+              role: "presentation",
+              className: `w-16 h-16 ${iconColorClass}`
+            }
+          ),
+          icon === "success" && /* @__PURE__ */ jsx(
+            IconCheck,
+            {
+              role: "presentation",
+              className: `w-16 h-16 ${iconColorClass}`
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          "p",
+          {
+            id: titleId,
+            className: [
+              message ? "mt-0 md:mt-4" : "mt-0",
+              "text-lg md:text-2xl font-semibold text-center",
+              titleColorClass
+            ].join(" "),
+            children: title
+          }
+        ),
+        message && /* @__PURE__ */ jsx(
+          "div",
+          {
+            id: messageId,
+            className: "mt-7 text-sm md:text-lg text-center max-w-full text-onpe-dark-gray",
+            children: message
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center w-full gap-5 mt-11 md:hidden", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              className: "w-full max-w-[200px]",
+              color: "red",
+              title: textButtonConfirm,
+              onClick: handleConfirm
+            }
+          ),
+          twoButtons && /* @__PURE__ */ jsx(
+            Button,
+            {
+              className: "w-full max-w-[200px]",
+              color: "skyblue",
+              title: textButtonCancel,
+              onClick: handleCancel
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "hidden md:flex md:flex-row items-center justify-center w-full gap-5 mt-11", children: [
+          twoButtons && /* @__PURE__ */ jsx(
+            Button,
+            {
+              className: "w-[200px]",
+              color: "skyblue",
+              title: textButtonCancel,
+              onClick: handleCancel
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              className: "w-[200px]",
+              color: "red",
+              title: textButtonConfirm,
+              onClick: handleConfirm
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+var ModalLoading = ({
+  isOpen = false,
+  onClose = () => {
+  },
+  message = "Cargando...",
+  className = "",
+  zIndexLevel = 100
+}) => {
+  const [announceMessage, setAnnounceMessage] = useState("");
+  useEffect(() => {
+    if (!isOpen) {
+      setAnnounceMessage("");
+      return;
+    }
+    setAnnounceMessage("");
+    const t = globalThis.setTimeout(() => {
+      setAnnounceMessage(message);
+    }, 150);
+    return () => {
+      globalThis.clearTimeout(t);
+    };
+  }, [isOpen, message]);
+  return /* @__PURE__ */ jsxs(
+    Modal,
+    {
+      disableFocus: true,
+      zIndexLevel,
+      isOpen,
+      onClose,
+      className,
+      closeDisabled: true,
+      whitoutBackground: true,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "sr-only", "aria-live": "assertive", "aria-atomic": "true", children: announceMessage }),
+        /* @__PURE__ */ jsx(
+          IconSpinnerDesktop,
+          {
+            className: "hidden md:block text-white animate-spin",
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          IconSpinnerMobile,
+          {
+            className: "block md:hidden text-white animate-spin",
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ jsx("p", { className: "text-white leading-normal text-2xl md:text-[64px] text-center mt-10 md:mt-20", children: message })
+      ]
+    }
+  );
+};
+var ModalDnieVersions = ({
+  isOpen = false,
+  onClose = () => {
+  },
+  className = "",
+  iconDnie1,
+  iconDnie2,
+  iconDnie3,
+  zIndexLevel = 100
+}) => {
+  return /* @__PURE__ */ jsxs(
+    Modal,
+    {
+      zIndexLevel,
+      isOpen,
+      onClose,
+      className: `!max-w-[590px] !pt-[30px] !pb-[38px] ${className}`,
+      closeButton: true,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "h2",
+          {
+            className: "text-center text-onpe-blue font-bold mb-2 text-lg sm:text-xl",
+            tabIndex: 0,
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Versiones del DNI electr\xF3nico" }),
+              /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "Versiones del DNIe" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs("section", { className: "flex flex-col gap-5 sm:gap-8 items-center mt-[18px] sm:mt-6 text-sm", children: [
+          /* @__PURE__ */ jsxs("article", { className: "flex flex-col sm:flex-row items-center sm:items-start gap-10 w-full", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex-1 w-full", children: [
+              /* @__PURE__ */ jsx("p", { className: "flex-1 mb-4", tabIndex: 0, children: /* @__PURE__ */ jsxs("span", { className: "font-bold", children: [
+                /* @__PURE__ */ jsx("span", { className: "sr-only", children: "DNI electr\xF3nico versi\xF3n 1" }),
+                /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "DNIe versi\xF3n 1" })
+              ] }) }),
+              /* @__PURE__ */ jsxs("ul", { role: "none", className: "text-sm list-disc text-justify self-start pl-5", children: [
+                /* @__PURE__ */ jsx("li", { role: "none", className: "mb-2", children: /* @__PURE__ */ jsxs("p", { tabIndex: 0, children: [
+                  /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Chip en la parte delantera del DNI electr\xF3nico." }),
+                  /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "Chip en la parte delantera del DNIe." })
+                ] }) }),
+                /* @__PURE__ */ jsx("li", { role: "none", className: "mb-2", children: /* @__PURE__ */ jsxs("p", { tabIndex: 0, children: [
+                  /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Compatible solo con el lector del DNI electr\xF3nico en PC, Mac o laptop." }),
+                  /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "Compatible solo con el lector del DNIe en PC, Mac o laptop." })
+                ] }) })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "w-[240px] sm:w-[200px] relative", children: iconDnie1 })
+          ] }),
+          /* @__PURE__ */ jsxs("article", { className: "flex flex-col sm:flex-row items-center sm:items-start gap-10 sm:gap-[52px] w-full", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex-1 w-full", children: [
+              /* @__PURE__ */ jsx("p", { className: "flex-1 mb-4", tabIndex: 0, children: /* @__PURE__ */ jsxs("span", { className: "font-bold", children: [
+                /* @__PURE__ */ jsx("span", { className: "sr-only", children: "DNI electr\xF3nico versi\xF3n 2 y 3" }),
+                /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "DNIe versi\xF3n 2 y 3" })
+              ] }) }),
+              /* @__PURE__ */ jsxs("ul", { role: "none", className: "text-sm list-disc text-justify self-start pl-5", children: [
+                /* @__PURE__ */ jsx("li", { role: "none", className: "mb-2", children: /* @__PURE__ */ jsxs("p", { tabIndex: 0, children: [
+                  /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Chip en la parte posterior del DNI electr\xF3nico." }),
+                  /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "Chip en la parte posterior del DNIe." })
+                ] }) }),
+                /* @__PURE__ */ jsx("li", { role: "none", className: "mb-2", children: /* @__PURE__ */ jsxs("p", { tabIndex: 0, children: [
+                  /* @__PURE__ */ 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__ */ jsx("span", { "aria-hidden": "true", children: "Compatibles con el lector del DNIe en PC, Mac o laptop y tecnolog\xEDa NFC (ISO 14443-B) en m\xF3viles." })
+                ] }) })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "w-[240px] sm:w-[200px] h-[181px] relative", children: [
+              iconDnie2,
+              iconDnie3
+            ] })
+          ] })
+        ] })
+      ]
+    }
+  );
+};
+var ModalNfc = ({
+  isOpen = false,
+  onClose = () => {
+  },
+  className = "",
+  iconNfc1,
+  iconNfc2: _iconNfc2,
+  zIndexLevel = 100
+}) => {
+  const ANDROID_VIDEO_URL = "https://www.youtube.com/watch?v=qlVVC9JHSro";
+  const IPHONE_VIDEO_URL = "https://www.youtube.com/watch?v=wjzh_FUVXRE";
+  return /* @__PURE__ */ jsxs(
+    Modal,
+    {
+      zIndexLevel,
+      isOpen,
+      onClose,
+      className: `!max-w-[600px] !pt-[46px] !pb-[46px] !px-[30px] md:!px-[50px] ${className}`,
+      closeButton: true,
+      children: [
+        /* @__PURE__ */ 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__ */ jsxs("section", { className: "flex flex-col gap-6 items-center mt-8 text-sm w-full", children: [
+          /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
+            /* @__PURE__ */ jsxs("p", { className: "text-sm text-justify mb-3", tabIndex: 0, children: [
+              /* @__PURE__ */ jsx("span", { className: "mr-1", children: "1." }),
+              "Celular / Tablet Android"
+            ] }),
+            /* @__PURE__ */ jsxs("ul", { role: "presentation", className: "list-disc pl-[26px] mt-2", children: [
+              /* @__PURE__ */ 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__ */ jsxs("li", { role: "presentation", className: "text-sm text-left mb-2 tracking-[0.15px]", children: [
+                "Otra forma es ir hacia Ajustes",
+                /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: " > " }),
+                "Conexiones o Redes Inal\xE1mbricas",
+                /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: " > " }),
+                'Buscar "NFC".'
+              ] })
+            ] })
+          ] }),
+          iconNfc1,
+          /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
+            /* @__PURE__ */ jsxs("p", { className: "text-sm text-justify mb-3", tabIndex: 0, children: [
+              /* @__PURE__ */ jsx("span", { className: "mr-1", children: "2." }),
+              "Celular iPhone"
+            ] }),
+            /* @__PURE__ */ jsx("ul", { role: "presentation", className: "list-disc pl-[26px] mt-2", children: /* @__PURE__ */ 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__ */ jsx("h2", { className: "text-center text-onpe-blue font-bold my-5 text-base", tabIndex: 0, children: "\xBFC\xF3mo usar el NFC correctamente?" }),
+          /* @__PURE__ */ jsx("div", { className: "pl-3 w-full", children: /* @__PURE__ */ jsxs("ol", { role: "presentation", className: "text-sm text-justify list-decimal list-outside", children: [
+            /* @__PURE__ */ jsx("li", { role: "presentation", className: "mb-2", children: "Activa el NFC en tu celular." }),
+            /* @__PURE__ */ jsx("li", { role: "presentation", className: "mb-2", children: "Busca en internet d\xF3nde est\xE1 el lector NFC seg\xFAn tu modelo." }),
+            /* @__PURE__ */ jsx("li", { role: "presentation", className: "mb-2", children: "Coloca tu DNIe sobre esa zona hasta que recibas una confirmaci\xF3n del sistema." }),
+            /* @__PURE__ */ jsx("li", { role: "presentation", className: "mb-2", children: 'Puedes consultar los videos "Aprende como leer tu DNIe con NFC":' })
+          ] }) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-row gap-5 justify-center items-center", children: [
+            /* @__PURE__ */ jsxs(
+              "a",
+              {
+                className: "text-onpe-skyblue flex flex-row gap-2.5 justify-center items-center no-underline cursor-pointer rounded-lg px-2.5 py-1.5 transition-colors duration-[120ms] focus-visible:outline-2 focus-visible:outline-onpe-blue focus-visible:outline-offset-2",
+                href: ANDROID_VIDEO_URL,
+                target: "_blank",
+                rel: "noopener noreferrer",
+                "aria-label": "Ver video para Android en YouTube",
+                children: [
+                  /* @__PURE__ */ jsx(IconAndroid, {}),
+                  "Android"
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "a",
+              {
+                className: "text-onpe-skyblue flex flex-row gap-2.5 justify-center items-center no-underline cursor-pointer rounded-lg px-2.5 py-1.5 transition-colors duration-[120ms] focus-visible:outline-2 focus-visible:outline-onpe-blue focus-visible:outline-offset-2",
+                href: IPHONE_VIDEO_URL,
+                target: "_blank",
+                rel: "noopener noreferrer",
+                "aria-label": "Ver video para iPhone en YouTube",
+                children: [
+                  /* @__PURE__ */ jsx(IconApple, {}),
+                  "iPhone"
+                ]
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+};
+
+export { BrowserRecommended, Button, Footer, Modal, ModalBrowserIncompatible, ModalConfirm, ModalDnieVersions, ModalLoading, ModalNfc, ModalSystemIncompatible, NotRecommended, Overlay, Portal, Show };
+//# sourceMappingURL=chunk-VPOCM2HP.mjs.map
+//# sourceMappingURL=chunk-VPOCM2HP.mjs.map