@onpe/ui 1.2.34 → 1.2.36

package/dist/components.esm.js

@@ -85,36 +85,6 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
-function styleInject(css, ref) {
-  if ( ref === void 0 ) ref = {};
-  var insertAt = ref.insertAt;
-
-  if (!css || typeof document === 'undefined') { return; }
-
-  var head = document.head || document.getElementsByTagName('head')[0];
-  var style = document.createElement('style');
-  style.type = 'text/css';
-
-  if (insertAt === 'top') {
-    if (head.firstChild) {
-      head.insertBefore(style, head.firstChild);
-    } else {
-      head.appendChild(style);
-    }
-  } else {
-    head.appendChild(style);
-  }
-
-  if (style.styleSheet) {
-    style.styleSheet.cssText = css;
-  } else {
-    style.appendChild(document.createTextNode(css));
-  }
-}
-
-var css_248z$8 = "/* Button Component Styles */\r\n.onpe-button {\r\n  color: white;\r\n  cursor: pointer;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  font-weight: 600;\r\n  transition: all 0.3s ease-in-out;\r\n  min-width: 200px;\r\n  border: none;\r\n}\r\n\r\n.onpe-button:disabled {\r\n  cursor: not-allowed;\r\n  background-color: var(--onpe-ui-gray);\r\n}\r\n\r\n.onpe-button:disabled:hover {\r\n  background-color: var(--onpe-ui-gray);\r\n}\r\n\r\n/* Button Sizes */\r\n.onpe-button.onpe-button-small {\r\n  height: 2.5rem; /* h-10 */\r\n  font-size: 0.875rem; /* text-sm */\r\n}\r\n\r\n.onpe-button.onpe-button-normal {\r\n  height: 3rem; /* h-12 */\r\n  font-size: 1rem; /* text-base */\r\n}\r\n\r\n.onpe-button.onpe-button-large {\r\n  height: 3.5rem; /* h-14 */\r\n  font-size: 1.125rem; /* text-lg */\r\n}\r\n\r\n/* Button Colors */\r\n.onpe-button.onpe-button-blue {\r\n  background-color: var(--onpe-ui-blue);\r\n}\r\n\r\n.onpe-button.onpe-button-blue:hover {\r\n  background-color: rgba(0, 55, 112, 0.3); /* onpe-ui-blue/30 */\r\n}\r\n\r\n.onpe-button.onpe-button-skyblue {\r\n  background-color: var(--onpe-ui-skyblue);\r\n}\r\n\r\n.onpe-button.onpe-button-skyblue:hover {\r\n  background-color: rgba(0, 115, 207, 0.3); /* onpe-ui-skyblue/30 */\r\n}\r\n\r\n.onpe-button.onpe-button-skyblue-light {\r\n  background-color: var(--onpe-ui-skyblue-light);\r\n}\r\n\r\n.onpe-button.onpe-button-skyblue-light:hover {\r\n  background-color: rgba(105, 178, 232, 0.3); /* onpe-ui-skyblue-light/30 */\r\n}\r\n\r\n.onpe-button.onpe-button-yellow {\r\n  background-color: var(--onpe-ui-yellow);\r\n}\r\n\r\n.onpe-button.onpe-button-yellow:hover {\r\n  background-color: rgba(255, 184, 28, 0.3); /* onpe-ui-yellow/30 */\r\n}\r\n\r\n.onpe-button.onpe-button-light-skyblue {\r\n  background-color: var(--onpe-ui-light-skyblue);\r\n}\r\n\r\n.onpe-button.onpe-button-light-skyblue:hover {\r\n  background-color: rgba(170, 239, 246, 0.3); /* onpe-ui-light-skyblue/30 */\r\n}\r\n\r\n.onpe-button.onpe-button-gray {\r\n  background-color: var(--onpe-ui-gray);\r\n}\r\n\r\n.onpe-button.onpe-button-gray:hover {\r\n  background-color: rgba(188, 188, 188, 0.3); /* onpe-ui-gray/30 */\r\n}\r\n\r\n.onpe-button.onpe-button-gray-light {\r\n  background-color: var(--onpe-ui-gray-light);\r\n}\r\n\r\n.onpe-button.onpe-button-gray-light:hover {\r\n  background-color: rgba(189, 189, 189, 0.3); /* onpe-ui-gray-light/30 */\r\n}\r\n\r\n.onpe-button.onpe-button-gray-extra-light {\r\n  background-color: var(--onpe-ui-gray-extra-light);\r\n}\r\n\r\n.onpe-button.onpe-button-gray-extra-light:hover {\r\n  background-color: rgba(242, 242, 242, 0.3); /* onpe-ui-gray-extra-light/30 */\r\n}\r\n\r\n.onpe-button.onpe-button-red {\r\n  background-color: var(--onpe-ui-red);\r\n}\r\n\r\n.onpe-button.onpe-button-red:hover {\r\n  background-color: rgba(227, 0, 43, 0.3); /* onpe-ui-red/30 */\r\n}\r\n\r\n.onpe-button.onpe-button-dark-gray {\r\n  background-color: var(--onpe-ui-dark-gray);\r\n}\r\n\r\n.onpe-button.onpe-button-dark-gray:hover {\r\n  background-color: rgba(79, 79, 79, 0.3); /* onpe-ui-dark-gray/30 */\r\n}\r\n\r\n.onpe-button.onpe-button-green {\r\n  background-color: var(--onpe-ui-green);\r\n}\r\n\r\n.onpe-button.onpe-button-green:hover {\r\n  background-color: rgba(118, 189, 67, 0.3); /* onpe-ui-green/30 */\r\n}\r\n\r\n.onpe-button.onpe-button-yellow-light {\r\n  background-color: var(--onpe-ui-yellow-light);\r\n}\r\n\r\n.onpe-button.onpe-button-yellow-light:hover {\r\n  background-color: rgba(255, 241, 210, 0.3); /* onpe-ui-yellow-light/30 */\r\n}\r\n\r\n.onpe-button.onpe-button-primary {\r\n  background-color: var(--onpe-ui-blue);\r\n}\r\n\r\n.onpe-button.onpe-button-primary:hover {\r\n  background-color: rgba(0, 55, 112, 0.3); /* onpe-ui-blue/30 */\r\n}\r\n\r\n";
-styleInject(css_248z$8);
-
 var Button = function (_a) {
     var color = _a.color, title = _a.title, _b = _a.size, size = _b === void 0 ? "normal" : _b, className = _a.className, props = __rest(_a, ["color", "title", "size", "className"]);
     return (jsx("button", __assign({ className: "onpe-button onpe-button-".concat(color, " onpe-button-").concat(size, " ").concat(className || "") }, props, { children: title })));
@@ -143,9 +113,6 @@ var Show = function (_a) {
     return (jsxs(Fragment, { children: [condition && loadingComponent, !condition && children] }));
 };
 
-var css_248z$7 = "/* Overlay Component Styles */\r\n.onpe-overlay {\r\n  position: absolute;\r\n  top: 0;\r\n  right: 0;\r\n  bottom: 0;\r\n  left: 0;\r\n  width: 100%;\r\n  height: 100vh;\r\n  z-index: 10;\r\n  transition: all 0.5s ease-in-out;\r\n}\r\n\r\n.onpe-overlay.onpe-overlay-show {\r\n  pointer-events: auto;\r\n  opacity: 1;\r\n}\r\n\r\n.onpe-overlay.onpe-overlay-hide {\r\n  pointer-events: none;\r\n  opacity: 0;\r\n}\r\n\r\n/* Overlay Colors */\r\n.onpe-overlay.onpe-overlay-blue {\r\n  background-color: rgba(0, 55, 112, 0.8); /* onpe-ui-blue/80 */\r\n}\r\n\r\n.onpe-overlay.onpe-overlay-skyblue {\r\n  background-color: rgba(0, 115, 207, 0.8); /* onpe-ui-skyblue/80 */\r\n}\r\n\r\n.onpe-overlay.onpe-overlay-skyblue-light {\r\n  background-color: rgba(105, 178, 232, 0.8); /* onpe-ui-skyblue-light/80 */\r\n}\r\n\r\n.onpe-overlay.onpe-overlay-yellow {\r\n  background-color: rgba(255, 184, 28, 0.8); /* onpe-ui-yellow/80 */\r\n}\r\n\r\n.onpe-overlay.onpe-overlay-light-skyblue {\r\n  background-color: rgba(170, 239, 246, 0.8); /* onpe-ui-light-skyblue/80 */\r\n}\r\n\r\n.onpe-overlay.onpe-overlay-gray {\r\n  background-color: rgba(188, 188, 188, 0.8); /* onpe-ui-gray/80 */\r\n}\r\n\r\n.onpe-overlay.onpe-overlay-gray-light {\r\n  background-color: rgba(189, 189, 189, 0.8); /* onpe-ui-gray-light/80 */\r\n}\r\n\r\n.onpe-overlay.onpe-overlay-gray-extra-light {\r\n  background-color: rgba(242, 242, 242, 0.8); /* onpe-ui-gray-extra-light/80 */\r\n}\r\n\r\n.onpe-overlay.onpe-overlay-red {\r\n  background-color: rgba(227, 0, 43, 0.8); /* onpe-ui-red/80 */\r\n}\r\n\r\n.onpe-overlay.onpe-overlay-dark-gray {\r\n  background-color: rgba(79, 79, 79, 0.8); /* onpe-ui-dark-gray/80 */\r\n}\r\n\r\n.onpe-overlay.onpe-overlay-green {\r\n  background-color: rgba(118, 189, 67, 0.8); /* onpe-ui-green/80 */\r\n}\r\n\r\n.onpe-overlay.onpe-overlay-yellow-light {\r\n  background-color: rgba(255, 241, 210, 0.8); /* onpe-ui-yellow-light/80 */\r\n}\r\n\r\n.onpe-overlay.onpe-overlay-primary {\r\n  background-color: rgba(0, 55, 112, 0.8); /* onpe-ui-blue/80 */\r\n}\r\n";
-styleInject(css_248z$7);
-
 var Overlay = function (_a) {
     var show = _a.show, onClick = _a.onClick, _b = _a.color, color = _b === void 0 ? "blue" : _b;
     var getColorClass = function () {
@@ -159,9 +126,6 @@ var Overlay = function (_a) {
 
 var IconClose = function (props) { return (jsx("svg", __assign({ width: 16, height: 16, viewBox: "0 0 8 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: jsx("path", { d: "M6.82839 1.17139L1.17139 6.82839M1.17139 1.17139L6.82839 6.82839", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }) }))); };
 
-var css_248z$6 = "/* Modal Component Styles */\n.onpe-modal-container {\n  position: fixed;\n  top: 0;\n  width: 100%;\n  height: 100vh;\n  display: grid;\n  place-items: center;\n}\n\n/* Prevenir scroll del body cuando el modal está abierto */\nbody.onpe-modal-open {\n  overflow: hidden;\n}\n\n.onpe-modal-container.onpe-modal-open {\n  opacity: 1;\n  z-index: 50;\n}\n\n.onpe-modal-container.onpe-modal-open.onpe-modal-top-absolute {\n  z-index: 100;\n}\n\n.onpe-modal-container.onpe-modal-closed {\n  opacity: 0;\n  z-index: -10;\n}\n\n.onpe-modal-content-wrapper {\n  position: relative;\n  z-index: 20;\n  display: grid;\n  place-items: center;\n}\n\n.onpe-modal-content {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n}\n\n.onpe-modal-content.onpe-modal-with-background {\n  background-color: white;\n  padding: 2.5rem 0.25rem; /* py-10 px-1 */\n  min-width: 320px;\n  width: 98vw;\n  max-width: 95vw;\n  max-height: 90vh;\n  overflow-y: auto;\n  scroll-behavior: smooth; /* Scroll suave */\n  scrollbar-width: thin; /* Scrollbar más delgado */\n  scrollbar-color: #cbd5e0 #f7fafc; /* Colores del scrollbar */\n  transition: scroll-behavior 0.1s ease-in-out; /* Transición suave para el reset */\n}\n\n/* Estilos para el scrollbar en WebKit (Chrome, Safari, Edge) */\n.onpe-modal-content.onpe-modal-with-background::-webkit-scrollbar {\n  width: 8px;\n}\n\n.onpe-modal-content.onpe-modal-with-background::-webkit-scrollbar-track {\n  background: #f7fafc;\n  border-radius: 4px;\n}\n\n.onpe-modal-content.onpe-modal-with-background::-webkit-scrollbar-thumb {\n  background: #cbd5e0;\n  border-radius: 4px;\n}\n\n.onpe-modal-content.onpe-modal-with-background::-webkit-scrollbar-thumb:hover {\n  background: #a0aec0;\n}\n\n.onpe-modal-content.onpe-modal-without-background {\n  /* Sin fondo - solo contenido */\n}\n\n.onpe-modal-close-button {\n  position: absolute;\n  top: 1rem; /* top-4 */\n  right: 1rem; /* right-4 */\n  border-radius: 50%;\n  background-color: var(--onpe-ui-red);\n  padding: 7px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 30;\n  border: none;\n  cursor: pointer;\n}\n\n.onpe-modal-close-button:hover {\n  background-color: rgba(227, 0, 43, 0.8); /* onpe-ui-red con hover */\n}\n\n.onpe-modal-close-icon {\n  height: 10px;\n  width: 10px;\n  color: white;\n}\n\n/* Responsive Design */\n@media (min-width: 768px) {\n  .onpe-modal-content.onpe-modal-with-background {\n    padding: 2.5rem 0; /* md:px-auto */\n    width: 500px; /* md:w-[500px] */\n  }\n}\n\n@media (min-width: 1024px) {\n  .onpe-modal-content.onpe-modal-with-background {\n    padding: 4rem 1.25rem; /* lg:py-16 lg:px-5 */\n    width: 1024px; /* lg:w-[1024px] */\n  }\n}\n";
-styleInject(css_248z$6);
-
 var Modal = function (_a) {
     var isOpen = _a.isOpen, onClose = _a.onClose, children = _a.children, _b = _a.whitoutBackground, whitoutBackground = _b === void 0 ? false : _b, _c = _a.topAbsolute, topAbsolute = _c === void 0 ? false : _c, _d = _a.closeButton, closeButton = _d === void 0 ? false : _d, _e = _a.closeDisabled, closeDisabled = _e === void 0 ? false : _e, _f = _a.overlayColor, overlayColor = _f === void 0 ? "blue" : _f, props = __rest(_a, ["isOpen", "onClose", "children", "whitoutBackground", "topAbsolute", "closeButton", "closeDisabled", "overlayColor"]);
     // Manejar el scroll del body cuando el modal está abierto
@@ -239,9 +203,6 @@ var IconSafariColor = function (props) { return (jsxs("svg", __assign({ width: 4
 
 var IconEdgeColor = function (props) { return (jsxs("svg", __assign({ width: 48, height: 48, viewBox: "0 0 48 48", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: [jsxs("g", { clipPath: "url(#clip0_2937_2810)", children: [jsx("path", { d: "M43.3141 35.7195C42.6766 36.057 42.0203 36.357 41.3453 36.6008C39.1891 37.407 36.9203 37.8195 34.6141 37.8195C25.7453 37.8195 18.0203 31.7258 18.0203 23.8883C18.0391 21.7508 19.2203 19.782 21.0953 18.7695C13.0703 19.107 11.0078 27.4695 11.0078 32.3633C11.0078 46.2195 23.7766 47.6258 26.5328 47.6258C28.0141 47.6258 30.2453 47.1945 31.5953 46.7633L31.8391 46.6883C37.0141 44.907 41.4016 41.4195 44.3266 36.7883C44.5516 36.432 44.4391 35.982 44.1016 35.757C43.8578 35.607 43.5578 35.5883 43.3141 35.7195Z", fill: "url(#paint0_linear_2937_2810)" }), jsx("path", { opacity: 0.35, d: "M43.3141 35.7195C42.6766 36.057 42.0203 36.357 41.3453 36.6008C39.1891 37.407 36.9203 37.8195 34.6141 37.8195C25.7453 37.8195 18.0203 31.7258 18.0203 23.8883C18.0391 21.7508 19.2203 19.782 21.0953 18.7695C13.0703 19.107 11.0078 27.4695 11.0078 32.3633C11.0078 46.2195 23.7766 47.6258 26.5328 47.6258C28.0141 47.6258 30.2453 47.1945 31.5953 46.7633L31.8391 46.6883C37.0141 44.907 41.4016 41.4195 44.3266 36.7883C44.5516 36.432 44.4391 35.982 44.1016 35.757C43.8578 35.607 43.5578 35.5883 43.3141 35.7195Z", fill: "url(#paint1_radial_2937_2810)" }), jsx("path", { d: "M19.8169 45.2641C18.1482 44.2328 16.7044 42.8641 15.5607 41.2703C10.6294 34.5203 12.1107 25.0516 18.8607 20.1203C19.5732 19.6141 20.3044 19.1453 21.0919 18.7703C21.6732 18.4891 22.6669 18.0016 23.9982 18.0203C25.8919 18.0391 27.6732 18.9391 28.8169 20.4578C29.5669 21.4703 29.9982 22.6891 30.0169 23.9641C30.0169 23.9266 34.6107 9.03906 15.0169 9.03906C6.78565 9.03906 0.0169045 16.8578 0.0169045 23.7016C-0.0205955 27.3203 0.766904 30.9203 2.28565 34.2016C7.46065 45.2266 20.0607 50.6266 31.6107 46.7828C27.6544 48.0203 23.3419 47.4766 19.8169 45.2641Z", fill: "url(#paint2_linear_2937_2810)" }), jsx("path", { opacity: 0.41, d: "M19.8169 45.2641C18.1482 44.2328 16.7044 42.8641 15.5607 41.2703C10.6294 34.5203 12.1107 25.0516 18.8607 20.1203C19.5732 19.6141 20.3044 19.1453 21.0919 18.7703C21.6732 18.4891 22.6669 18.0016 23.9982 18.0203C25.8919 18.0391 27.6732 18.9391 28.8169 20.4578C29.5669 21.4703 29.9982 22.6891 30.0169 23.9641C30.0169 23.9266 34.6107 9.03906 15.0169 9.03906C6.78565 9.03906 0.0169045 16.8578 0.0169045 23.7016C-0.0205955 27.3203 0.766904 30.9203 2.28565 34.2016C7.46065 45.2266 20.0607 50.6266 31.6107 46.7828C27.6544 48.0203 23.3419 47.4766 19.8169 45.2641Z", fill: "url(#paint3_radial_2937_2810)" }), jsx("path", { d: "M28.5563 27.9187C28.4062 28.1062 27.9375 28.3875 27.9375 28.9875C27.9375 29.475 28.2562 29.9438 28.8187 30.3375C31.5187 32.2125 36.6 31.9688 36.6188 31.9688C38.625 31.9688 40.575 31.425 42.3 30.4125C45.825 28.35 48 24.5813 48 20.4938C48.0563 16.2938 46.5 13.5 45.8812 12.2625C41.9062 4.48125 33.3187 0 24 0C10.875 0 0.1875 10.5375 0 23.6625C0.09375 16.8187 6.9 11.2875 15 11.2875C15.6562 11.2875 19.4062 11.3438 22.875 13.1813C25.9312 14.7938 27.5438 16.725 28.65 18.6562C29.8125 20.6625 30.0188 23.175 30.0188 24.1875C30.0188 25.1812 29.5125 26.6812 28.5563 27.9187Z", fill: "url(#paint4_radial_2937_2810)" }), jsx("path", { d: "M28.5563 27.9187C28.4062 28.1062 27.9375 28.3875 27.9375 28.9875C27.9375 29.475 28.2562 29.9438 28.8187 30.3375C31.5187 32.2125 36.6 31.9688 36.6188 31.9688C38.625 31.9688 40.575 31.425 42.3 30.4125C45.825 28.35 48 24.5813 48 20.4938C48.0563 16.2938 46.5 13.5 45.8812 12.2625C41.9062 4.48125 33.3187 0 24 0C10.875 0 0.1875 10.5375 0 23.6625C0.09375 16.8187 6.9 11.2875 15 11.2875C15.6562 11.2875 19.4062 11.3438 22.875 13.1813C25.9312 14.7938 27.5438 16.725 28.65 18.6562C29.8125 20.6625 30.0188 23.175 30.0188 24.1875C30.0188 25.1812 29.5125 26.6812 28.5563 27.9187Z", fill: "url(#paint5_radial_2937_2810)" })] }), jsxs("defs", { children: [jsxs("linearGradient", { id: "paint0_linear_2937_2810", x1: 11.0086, y1: 33.192, x2: 44.4366, y2: 33.192, gradientUnits: "userSpaceOnUse", children: [jsx("stop", { stopColor: "#0C59A4" }), jsx("stop", { offset: 1, stopColor: "#114A8B" })] }), jsxs("radialGradient", { id: "paint1_radial_2937_2810", cx: 0, cy: 0, r: 1, gradientUnits: "userSpaceOnUse", gradientTransform: "translate(29.475 33.4576) scale(17.882 16.986)", children: [jsx("stop", { offset: 0.72, stopOpacity: 0 }), jsx("stop", { offset: 0.95, stopOpacity: 0.53 }), jsx("stop", { offset: 1 })] }), jsxs("linearGradient", { id: "paint2_linear_2937_2810", x1: 28.6427, y1: 18.7039, x2: 7.76028, y2: 41.4499, gradientUnits: "userSpaceOnUse", children: [jsx("stop", { stopColor: "#1B9DE2" }), jsx("stop", { offset: 0.16, stopColor: "#1595DF" }), jsx("stop", { offset: 0.67, stopColor: "#0680D7" }), jsx("stop", { offset: 1, stopColor: "#0078D4" })] }), jsxs("radialGradient", { id: "paint3_radial_2937_2810", cx: 0, cy: 0, r: 1, gradientUnits: "userSpaceOnUse", gradientTransform: "translate(13.2373 37.3159) rotate(-81.3826) scale(26.8871 21.7263)", children: [jsx("stop", { offset: 0.76, stopOpacity: 0 }), jsx("stop", { offset: 0.95, stopOpacity: 0.5 }), jsx("stop", { offset: 1 })] }), jsxs("radialGradient", { id: "paint4_radial_2937_2810", cx: 0, cy: 0, r: 1, gradientUnits: "userSpaceOnUse", gradientTransform: "translate(4.84718 8.88615) rotate(92.2911) scale(37.9784 80.8984)", children: [jsx("stop", { stopColor: "#35C1F1" }), jsx("stop", { offset: 0.11, stopColor: "#34C1ED" }), jsx("stop", { offset: 0.23, stopColor: "#2FC2DF" }), jsx("stop", { offset: 0.31, stopColor: "#2BC3D2" }), jsx("stop", { offset: 0.67, stopColor: "#36C752" })] }), jsxs("radialGradient", { id: "paint5_radial_2937_2810", cx: 0, cy: 0, r: 1, gradientUnits: "userSpaceOnUse", gradientTransform: "translate(45.0113 14.5136) rotate(73.7366) scale(18.2477 14.8419)", children: [jsx("stop", { stopColor: "#66EB6E" }), jsx("stop", { offset: 1, stopColor: "#66EB6E", stopOpacity: 0 })] }), jsx("clipPath", { id: "clip0_2937_2810", children: jsx("rect", { width: 48, height: 48, fill: "white" }) })] })] }))); };
 
-var css_248z$5 = "/* ModalBrowserIncompatible Component Styles */\r\n.onpe-modal-browser-incompatible-container {\r\n  max-width: 680px !important;\r\n  padding-top: 1.25rem !important; /* pt-5 */\r\n  padding-bottom: 2rem !important; /* pb-8 */\r\n}\r\n\r\n.onpe-modal-browser-incompatible-icon-container {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n\r\n.onpe-modal-browser-incompatible-icon {\r\n  width: 5.5rem; /* w-22 */\r\n  height: 5.5rem; /* h-22 */\r\n  color: var(--onpe-ui-skyblue);\r\n}\r\n\r\n.onpe-modal-browser-incompatible-title {\r\n  margin-top: 1.5rem; /* mt-6 */\r\n  font-size: 0.875rem; /* text-sm */\r\n  font-weight: 500; /* font-medium */\r\n  text-align: center;\r\n  color: var(--onpe-ui-skyblue);\r\n}\r\n\r\n.onpe-modal-browser-incompatible-message {\r\n  margin-top: 1.5rem; /* mt-6 */\r\n  font-size: 0.875rem; /* text-sm */\r\n  text-align: center;\r\n}\r\n\r\n.onpe-modal-browser-incompatible-browsers-container {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: 2rem; /* gap-8 */\r\n  margin-top: 1.25rem; /* mt-5 */\r\n}\r\n\r\n.onpe-modal-browser-incompatible-browser-icon {\r\n  width: 2rem; /* w-[32px] */\r\n  height: 2rem; /* h-[32px] */\r\n}\r\n\r\n/* Responsive Design */\r\n@media (min-width: 768px) {\r\n  .onpe-modal-browser-incompatible-container {\r\n    width: 680px !important;\r\n    max-width: 680px !important;\r\n  }\r\n}\r\n\r\n@media (min-width: 1024px) {\r\n  .onpe-modal-browser-incompatible-container {\r\n    width: 680px !important;\r\n    max-width: 680px !important;\r\n  }\r\n  \r\n  .onpe-modal-browser-incompatible-title {\r\n    font-size: 1.5rem; /* md:text-2xl */\r\n  }\r\n  \r\n  .onpe-modal-browser-incompatible-message {\r\n    font-size: 1.125rem; /* md:text-lg */\r\n  }\r\n  \r\n  .onpe-modal-browser-incompatible-browsers-container {\r\n    gap: 3rem; /* md:gap-12 */\r\n  }\r\n  \r\n  .onpe-modal-browser-incompatible-browser-icon {\r\n    width: 3rem; /* md:w-[48px] */\r\n    height: 3rem; /* md:h-[48px] */\r\n  }\r\n}\r\n";
-styleInject(css_248z$5);
-
 var ModalBrowserIncompatible = function (_a) {
     var _b = _a.isOpen, isOpen = _b === void 0 ? false : _b, _c = _a.onClose, onClose = _c === void 0 ? function () { } : _c, _d = _a.className, className = _d === void 0 ? "" : _d;
     return (jsxs(Modal, { isOpen: isOpen, onClose: onClose, className: "onpe-modal-browser-incompatible-container ".concat(className), closeButton: true, closeDisabled: true, children: [jsx("div", { className: "onpe-modal-browser-incompatible-icon-container", children: jsx(IconWarning, { className: "onpe-modal-browser-incompatible-icon" }) }), jsx("p", { className: "onpe-modal-browser-incompatible-title", children: "Navegador no recomendado" }), jsx("p", { className: "onpe-modal-browser-incompatible-message", children: "Para una mejor experiencia y mayor seguridad, debes ingresar con los siguientes navegadores:" }), jsxs("div", { className: "onpe-modal-browser-incompatible-browsers-container", children: [jsx(IconChromeColor, { className: "onpe-modal-browser-incompatible-browser-icon" }), jsx(IconSafariColor, { className: "onpe-modal-browser-incompatible-browser-icon" }), jsx(IconEdgeColor, { className: "onpe-modal-browser-incompatible-browser-icon" })] })] }));
@@ -249,11 +210,8 @@ var ModalBrowserIncompatible = function (_a) {
 
 var IconCheck = function (props) { return (jsx("svg", __assign({ width: 64, height: 64, viewBox: "0 0 64 64", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "mt-10 lg:mt-16" }, props, { children: jsx("path", { d: "M28.2673 44.2663L47.0673 25.4663L43.334 21.733L28.2673 36.7997L20.6673 29.1997L16.934 32.933L28.2673 44.2663ZM32.0007 58.6663C28.3118 58.6663 24.8451 57.9659 21.6007 56.565C18.3562 55.1641 15.534 53.2646 13.134 50.8663C10.734 48.4663 8.83443 45.6441 7.43532 42.3997C6.03621 39.1552 5.33576 35.6886 5.33398 31.9997C5.33398 28.3108 6.03443 24.8441 7.43532 21.5997C8.83621 18.3552 10.7358 15.533 13.134 13.133C15.534 10.733 18.3562 8.83345 21.6007 7.43434C24.8451 6.03523 28.3118 5.33479 32.0007 5.33301C35.6895 5.33301 39.1562 6.03345 42.4007 7.43434C45.6451 8.83523 48.4673 10.7348 50.8673 13.133C53.2673 15.533 55.1678 18.3552 56.5686 21.5997C57.9695 24.8441 58.6691 28.3108 58.6673 31.9997C58.6673 35.6886 57.9669 39.1552 56.566 42.3997C55.1651 45.6441 53.2655 48.4663 50.8673 50.8663C48.4673 53.2663 45.6451 55.1668 42.4007 56.5677C39.1562 57.9686 35.6895 58.6681 32.0007 58.6663ZM32.0007 53.333C37.9562 53.333 43.0006 51.2663 47.134 47.133C51.2673 42.9997 53.334 37.9552 53.334 31.9997C53.334 26.0441 51.2673 20.9997 47.134 16.8663C43.0006 12.733 37.9562 10.6663 32.0007 10.6663C26.0451 10.6663 21.0007 12.733 16.8673 16.8663C12.734 20.9997 10.6673 26.0441 10.6673 31.9997C10.6673 37.9552 12.734 42.9997 16.8673 47.133C21.0007 51.2663 26.0451 53.333 32.0007 53.333Z", fill: "currentColor" }) }))); };
 
-var css_248z$4 = "/* ModalConfirm Component Styles */\n.onpe-modal-confirm-container {\n  max-width: 680px !important;\n  width: 680px !important;\n  padding-top: 1.25rem !important; /* pt-5 */\n  padding-bottom: 2rem !important; /* pb-8 */\n}\n\n.onpe-modal-confirm-icon-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.onpe-modal-confirm-icon {\n  width: 4rem; /* w-16 */\n  height: 4rem; /* h-16 */\n  color: var(--onpe-ui-skyblue);\n}\n\n.onpe-modal-confirm-title {\n  margin-top: 0.75rem; /* mt-3 */\n  font-size: 1.125rem; /* text-lg */\n  font-weight: 500; /* font-medium */\n  text-align: center;\n  color: var(--onpe-ui-skyblue);\n}\n\n.onpe-modal-confirm-message {\n  margin-top: 1.75rem; /* mt-7 */\n  font-size: 0.875rem; /* text-sm */\n  text-align: center;\n  max-width: 100%;\n}\n\n.onpe-modal-confirm-buttons-container {\n  display: flex;\n  flex-direction: column-reverse;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  gap: 1.25rem; /* gap-5 */\n  margin-top: 2.75rem; /* mt-11 */\n}\n\n.onpe-modal-confirm-button {\n  width: 100%;\n  max-width: 200px;\n}\n\n/* Responsive Design */\n@media (min-width: 768px) {\n  .onpe-modal-confirm-container {\n    width: 680px !important;\n    max-width: 680px !important;\n  }\n}\n\n@media (min-width: 1024px) {\n  .onpe-modal-confirm-container {\n    width: 680px !important;\n    max-width: 680px !important;\n  }\n  \n  .onpe-modal-confirm-title {\n    margin-top: 1rem; /* lg:mt-4 */\n    font-size: 1.5rem; /* lg:text-2xl */\n  }\n  \n  .onpe-modal-confirm-message {\n    font-size: 1.125rem; /* lg:text-lg */\n    max-width: 576px; /* lg:max-w-[576px] */\n  }\n  \n  .onpe-modal-confirm-buttons-container {\n    flex-direction: row; /* lg:flex-row */\n    margin-top: 5rem; /* lg:mt-20 */\n  }\n  \n  .onpe-modal-confirm-button {\n    width: 200px; /* lg:w-[200px] */\n  }\n}\n";
-styleInject(css_248z$4);
-
 var ModalConfirm = function (_a) {
-    var _b = _a.isOpen, isOpen = _b === void 0 ? false : _b, _c = _a.onClose, onClose = _c === void 0 ? function () { } : _c, title = _a.title, message = _a.message, _d = _a.icon, icon = _d === void 0 ? "warning" : _d, _e = _a.onConfirm, onConfirm = _e === void 0 ? function () { } : _e, _f = _a.onCancel, onCancel = _f === void 0 ? function () { } : _f, _g = _a.textButtonConfirm, textButtonConfirm = _g === void 0 ? "Confirmar" : _g, _h = _a.textButtonCancel, textButtonCancel = _h === void 0 ? "Cancelar" : _h, _j = _a.twoButtons, twoButtons = _j === void 0 ? true : _j, _k = _a.className, className = _k === void 0 ? "" : _k;
+    var _b = _a.isOpen, isOpen = _b === void 0 ? false : _b, _c = _a.onClose, onClose = _c === void 0 ? function () { } : _c, title = _a.title, message = _a.message, _d = _a.icon, icon = _d === void 0 ? "warning" : _d, _e = _a.color, color = _e === void 0 ? "blue" : _e, _f = _a.onConfirm, onConfirm = _f === void 0 ? function () { } : _f, _g = _a.onCancel, onCancel = _g === void 0 ? function () { } : _g, _h = _a.textButtonConfirm, textButtonConfirm = _h === void 0 ? "Confirmar" : _h, _j = _a.textButtonCancel, textButtonCancel = _j === void 0 ? "Cancelar" : _j, _k = _a.twoButtons, twoButtons = _k === void 0 ? true : _k, _l = _a.className, className = _l === void 0 ? "" : _l;
     var handleConfirm = function () { return __awaiter(void 0, void 0, void 0, function () {
         return __generator(this, function (_a) {
             try {
@@ -271,16 +229,13 @@ var ModalConfirm = function (_a) {
         onCancel();
         onClose();
     };
-    return (jsxs(Modal, { isOpen: isOpen, onClose: onClose, className: "onpe-modal-confirm-container ".concat(className), closeButton: true, closeDisabled: true, topAbsolute: true, children: [jsxs("div", { className: "onpe-modal-confirm-icon-container", children: [icon === "warning" && jsx(IconWarning, { className: "onpe-modal-confirm-icon" }), icon === "success" && jsx(IconCheck, { className: "onpe-modal-confirm-icon" })] }), jsx("p", { className: "onpe-modal-confirm-title", children: title }), jsx("p", { className: "onpe-modal-confirm-message", children: message }), jsxs("div", { className: "onpe-modal-confirm-buttons-container", children: [twoButtons && jsx(Button, { className: "onpe-modal-confirm-button", color: "blue", title: textButtonCancel, onClick: handleCancel }), jsx(Button, { className: "onpe-modal-confirm-button", color: "red", title: textButtonConfirm, onClick: handleConfirm })] })] }));
+    return (jsxs(Modal, { isOpen: isOpen, onClose: onClose, className: "onpe-modal-confirm-container ".concat(className), closeButton: true, closeDisabled: true, topAbsolute: true, children: [jsxs("div", { className: "onpe-modal-confirm-icon-container onpe-modal-confirm-icon-".concat(color), children: [icon === "warning" && jsx(IconWarning, { className: "onpe-modal-confirm-icon onpe-modal-confirm-icon-".concat(color) }), icon === "success" && jsx(IconCheck, { className: "onpe-modal-confirm-icon onpe-modal-confirm-icon-".concat(color) })] }), jsx("p", { className: "onpe-modal-confirm-title onpe-modal-confirm-title-".concat(color), children: title }), jsx("p", { className: "onpe-modal-confirm-message", children: message }), jsxs("div", { className: "onpe-modal-confirm-buttons-container", children: [twoButtons && jsx(Button, { className: "onpe-modal-confirm-button", color: "blue", title: textButtonCancel, onClick: handleCancel }), jsx(Button, { className: "onpe-modal-confirm-button", color: "red", title: textButtonConfirm, onClick: handleConfirm })] })] }));
 };
 
 var IconSpinnerDesktop = function (props) { return (jsx("svg", __assign({ width: 102, height: 102, viewBox: "0 0 102 102", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: jsx("path", { d: "M50.9999 3.08313C23.9241 3.08208 3.08296 24.6456 3.08325 51C3.08354 75.4375 22.453 98.9167 50.9999 98.9167C77.5573 98.9167 98.9166 77.3542 98.9166 51", stroke: "currentColor", strokeWidth: 6, strokeLinecap: "round" }) }))); };
 
 var IconSpinnerMobile = function (props) { return (jsx("svg", __assign({ width: 33, height: 33, viewBox: "0 0 33 33", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: jsx("path", { d: "M16.5 3C8.87169 2.9997 2.99992 9.07499 3 16.5C3.00008 23.385 8.45721 30 16.5 30C23.9822 30 30 23.925 30 16.5", stroke: "currentColor", strokeWidth: 6, strokeLinecap: "round" }) }))); };
 
-var css_248z$3 = "/* ModalLoading Component Styles */\r\n.onpe-modal-loading-spinner-desktop {\r\n  display: none; /* hidden */\r\n  color: white;\r\n  animation: spin 1s linear infinite; /* animate-spin */\r\n}\r\n\r\n.onpe-modal-loading-spinner-mobile {\r\n  display: block; /* block */\r\n  color: white;\r\n  animation: spin 1s linear infinite; /* animate-spin */\r\n}\r\n\r\n.onpe-modal-loading-message {\r\n  color: white;\r\n  line-height: normal; /* leading-normal */\r\n  font-size: 1.5rem; /* text-2xl */\r\n  text-align: center;\r\n  margin-top: 2.5rem; /* mt-10 */\r\n}\r\n\r\n/* Responsive Design */\r\n@media (min-width: 768px) {\r\n  .onpe-modal-loading-spinner-desktop {\r\n    display: block; /* md:block */\r\n  }\r\n  \r\n  .onpe-modal-loading-spinner-mobile {\r\n    display: none; /* md:hidden */\r\n  }\r\n  \r\n  .onpe-modal-loading-message {\r\n    font-size: 4rem; /* md:text-[64px] */\r\n    margin-top: 5rem; /* md:mt-20 */\r\n  }\r\n}\r\n\r\n/* Spin Animation */\r\n@keyframes spin {\r\n  from {\r\n    transform: rotate(0deg);\r\n  }\r\n  to {\r\n    transform: rotate(360deg);\r\n  }\r\n}\r\n";
-styleInject(css_248z$3);
-
 var ModalLoading = function (_a) {
     var _b = _a.isOpen, isOpen = _b === void 0 ? false : _b, _c = _a.onClose, onClose = _c === void 0 ? function () { } : _c, _d = _a.message, message = _d === void 0 ? "Cargando..." : _d, _e = _a.className, className = _e === void 0 ? "" : _e;
     return (jsxs(Modal, { isOpen: isOpen, onClose: onClose, className: className, closeDisabled: true, whitoutBackground: true, children: [jsx(IconSpinnerDesktop, { className: "onpe-modal-loading-spinner-desktop" }), jsx(IconSpinnerMobile, { className: "onpe-modal-loading-spinner-mobile" }), jsx("p", { className: "onpe-modal-loading-message", children: message })] }));
@@ -292,9 +247,6 @@ var IconAndroid = function (props) { return (jsx("svg", __assign({ width: 24, he
 
 var IconApple = function (props) { return (jsx("svg", __assign({ stroke: "currentColor", fill: "currentColor", width: 24, height: 24, strokeWidth: 0, viewBox: "0 0 384 512", xmlns: "http://www.w3.org/2000/svg" }, props, { children: jsx("path", { d: "M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z" }) }))); };
 
-var css_248z$2 = "/* ModalSystemIncompatible Component Styles */\r\n.onpe-modal-system-incompatible-container {\r\n  max-width: 680px !important;\r\n  padding-top: 2.5rem !important; /* pt-10 */\r\n  padding-bottom: 6.125rem !important; /* pb-24.5 */\r\n}\r\n\r\n.onpe-modal-system-incompatible-icon-container {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n}\r\n\r\n.onpe-modal-system-incompatible-icon {\r\n  width: 5.5rem; /* w-22 */\r\n  height: 5.5rem; /* h-22 */\r\n  color: var(--onpe-ui-skyblue);\r\n}\r\n\r\n.onpe-modal-system-incompatible-title {\r\n  font-size: 0.875rem; /* text-sm */\r\n  text-align: center;\r\n  margin-top: 1.5rem; /* mt-6 */\r\n  color: var(--onpe-ui-skyblue);\r\n  font-weight: 500; /* font-medium */\r\n}\r\n\r\n.onpe-modal-system-incompatible-message {\r\n  font-size: 0.875rem; /* text-sm */\r\n  margin-top: 2.5rem; /* mt-10 */\r\n  text-align: center;\r\n}\r\n\r\n.onpe-modal-system-incompatible-systems-container {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 2rem; /* gap-8 */\r\n  margin-top: 1.25rem; /* mt-5 */\r\n  color: var(--onpe-ui-skyblue);\r\n}\r\n\r\n.onpe-modal-system-incompatible-system-icon {\r\n  width: 2rem; /* w-[32px] */\r\n  height: 2rem; /* h-[32px] */\r\n}\r\n\r\n/* Responsive Design */\r\n@media (min-width: 768px) {\r\n  .onpe-modal-system-incompatible-container {\r\n    width: 680px !important;\r\n    max-width: 680px !important;\r\n  }\r\n}\r\n\r\n@media (min-width: 1024px) {\r\n  .onpe-modal-system-incompatible-container {\r\n    width: 680px !important;\r\n    max-width: 680px !important;\r\n  }\r\n  \r\n  .onpe-modal-system-incompatible-title {\r\n    font-size: 1.5rem; /* md:text-2xl */\r\n  }\r\n  \r\n  .onpe-modal-system-incompatible-message {\r\n    font-size: 1.125rem; /* md:text-lg */\r\n  }\r\n  \r\n  .onpe-modal-system-incompatible-systems-container {\r\n    gap: 3rem; /* md:gap-12 */\r\n  }\r\n  \r\n  .onpe-modal-system-incompatible-system-icon {\r\n    width: 3rem; /* md:w-[48px] */\r\n    height: 3rem; /* md:h-[48px] */\r\n  }\r\n}\r\n\r\n@media (min-width: 1280px) {\r\n  .onpe-modal-system-incompatible-message {\r\n    padding-left: 3rem; /* xl:px-12 */\r\n    padding-right: 3rem; /* xl:px-12 */\r\n  }\r\n}\r\n";
-styleInject(css_248z$2);
-
 var ModalSystemIncompatible = function (_a) {
     var _b = _a.isOpen, isOpen = _b === void 0 ? false : _b, _c = _a.onClose, onClose = _c === void 0 ? function () { } : _c, _d = _a.className, className = _d === void 0 ? "" : _d;
     return (jsxs(Modal, { isOpen: isOpen, onClose: onClose, className: "onpe-modal-system-incompatible-container ".concat(className), closeButton: true, closeDisabled: true, children: [jsx("div", { className: "onpe-modal-system-incompatible-icon-container", children: jsx(IconWarning, { className: "onpe-modal-system-incompatible-icon" }) }), jsx("p", { className: "onpe-modal-system-incompatible-title", children: "Sistema Operativo no recomendado" }), jsx("p", { className: "onpe-modal-system-incompatible-message", children: "Para descargar e instalar el ONPEID utiliza un dispositivo con sistema operativo Windows, macOS, Android o iOS." }), jsxs("div", { className: "onpe-modal-system-incompatible-systems-container", children: [jsx(IconWindow, { className: "onpe-modal-system-incompatible-system-icon" }), jsx(IconAndroid, { className: "onpe-modal-system-incompatible-system-icon" }), jsx(IconApple, { className: "onpe-modal-system-incompatible-system-icon" })] })] }));
@@ -306,16 +258,10 @@ var IconSafari = function (props) { return (jsxs("svg", __assign({ width: 24, he
 
 var IconEdge = function (props) { return (jsxs("svg", __assign({ width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: [jsx("g", { clipPath: "url(#clip0_8211_8231)", children: jsx("path", { d: "M9.86748 11.7697C9.90253 13.051 10.5964 14.591 12.2319 15.9545C13.6546 17.1391 16.1157 18.0916 18.1066 18.0916C18.7863 18.0923 19.4637 18.0112 20.124 17.8498C20.3714 17.7895 20.6314 17.8089 20.8671 17.905C21.1027 18.0012 21.302 18.1693 21.4366 18.3854C21.5711 18.6015 21.6339 18.8546 21.6162 19.1085C21.5984 19.3624 21.5009 19.6043 21.3377 19.7996C19.4012 22.1173 16.6672 23.6261 13.674 24.029C13.5491 24.0479 13.4218 24.0422 13.2992 24.0121C10.7136 23.3739 7.83188 20.132 7.83188 16.8828C7.83188 14.0132 8.84726 12.4769 9.86748 11.7697ZM9.01407 7.25984C10.0434 7.42348 10.9791 7.95314 11.6492 8.75146C11.0422 8.77677 10.442 8.88996 9.86748 9.08749C7.44144 9.89737 5.4143 12.5168 5.4143 16.8828C5.4143 19.9495 6.86364 22.0394 8.76385 23.6797C3.94442 22.315 0.34827 18.0384 0.00255686 12.8685C-0.0167921 12.5867 0.0742415 12.3084 0.256402 12.0925L0.461897 11.8556L0.853544 11.4228L1.17629 11.0832L1.3564 10.897L1.75772 10.4945L2.21464 10.0485L2.46607 9.81034C4.77485 7.63093 7.18034 6.94798 9.01407 7.25984ZM12.0626 -0.0398865C17.8165 -0.0398865 22.6299 3.97926 23.8507 9.36309C24.2859 11.279 23.7141 12.7779 22.8511 13.821C22.1768 14.6235 21.3065 15.2381 20.3247 15.6052C19.1582 16.0173 17.8467 16.0004 16.8047 15.8179C15.8739 15.6547 14.7135 15.3404 14.1418 14.5221C13.9795 14.2901 13.9038 14.0085 13.9278 13.7264C13.9519 13.4443 14.0743 13.1796 14.2735 12.9785C14.8598 12.3862 15.1305 11.7758 15.1704 11.2294C15.182 11.0104 15.1637 10.7908 15.116 10.5767C14.4125 7.40973 12.2319 5.35362 9.41902 4.87616C6.08276 4.30925 2.91695 6.03295 0.576731 8.27037C2.16266 3.44498 6.70529 -0.0398865 12.0626 -0.0398865Z", fill: "currentColor" }) }), jsx("defs", { children: jsx("clipPath", { id: "clip0_8211_8231", children: jsx("rect", { width: 24, height: 24, fill: "white" }) }) })] }))); };
 
-var css_248z$1 = "/* BrowserRecommended Component Styles */\r\n.onpe-browser-recommended {\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: 1.5rem;\r\n  padding: 0.75rem 0 1.5rem 0;\r\n  font-size: 0.75rem;\r\n  text-align: center;\r\n  color: var(--onpe-ui-blue);\r\n  background-color: rgba(105, 178, 232, 0.15); /* onpe-ui-skyblue-light/15 */\r\n}\r\n\r\n.onpe-browser-recommended .onpe-browser-list {\r\n  display: flex;\r\n  gap: 1.5rem;\r\n}\r\n\r\n.onpe-browser-recommended .onpe-browser-item {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 0.5rem;\r\n}\r\n\r\n.onpe-browser-recommended .onpe-browser-name {\r\n  display: none;\r\n  text-align: left;\r\n}\r\n\r\n/* Responsive Design */\r\n@media (min-width: 768px) {\r\n  .onpe-browser-recommended {\r\n    padding: 0.5rem 0;\r\n  }\r\n  \r\n  .onpe-browser-recommended .onpe-browser-list {\r\n    gap: 2rem;\r\n  }\r\n  \r\n  .onpe-browser-recommended .onpe-browser-name {\r\n    display: block;\r\n  }\r\n}\r\n\r\n@media (min-width: 1024px) {\r\n  .onpe-browser-recommended {\r\n    flex-direction: row;\r\n  }\r\n}\r\n";
-styleInject(css_248z$1);
-
 var BrowserRecommended = function () {
     return (jsxs("div", { className: "onpe-browser-recommended", children: [jsx("p", { children: "Navegadores recomendados:" }), jsxs("div", { className: "onpe-browser-list", children: [jsxs("div", { className: "onpe-browser-item", children: [jsx(IconChrome, {}), jsx("p", { className: "onpe-browser-name", children: "Google Chrome" })] }), jsxs("div", { className: "onpe-browser-item", children: [jsx(IconSafari, {}), jsx("p", { className: "onpe-browser-name", children: "Safari" })] }), jsxs("div", { className: "onpe-browser-item", children: [jsx(IconEdge, {}), jsx("p", { className: "onpe-browser-name", children: "Microsoft Edge" })] })] })] }));
 };
 
-var css_248z = "/* Footer Component Styles */\r\n.onpe-footer {\r\n  /* Footer base styles */\r\n}\r\n\r\n.onpe-footer-content {\r\n  /* Content wrapper styles */\r\n}\r\n\r\n.onpe-footer-contact {\r\n  position: relative;\r\n  z-index: 10;\r\n  display: flex;\r\n  width: 100%;\r\n  min-height: 100px;\r\n  background-color: var(--onpe-ui-blue);\r\n}\r\n\r\n.onpe-footer-contact-list {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: flex-start;\r\n  width: 100%;\r\n  flex-direction: column;\r\n  gap: 1.5rem;\r\n  margin: 0 auto;\r\n  padding: 3.5rem 1rem;\r\n  max-width: 1456px;\r\n}\r\n\r\n.onpe-footer-contact-item {\r\n  /* List item styles */\r\n}\r\n\r\n.onpe-footer-contact-title {\r\n  font-weight: 600;\r\n  color: var(--onpe-ui-yellow);\r\n  margin-bottom: 0.25rem;\r\n}\r\n\r\n.onpe-footer-contact-text {\r\n  font-size: 0.875rem;\r\n  font-weight: 500;\r\n  color: white;\r\n}\r\n\r\n.onpe-footer-development {\r\n  height: 93px;\r\n  width: 100%;\r\n  text-align: center;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  background-color: rgba(255, 241, 210, 0.75); /* onpe-ui-yellow-light/75 */\r\n  position: fixed;\r\n  z-index: 10;\r\n  right: 0;\r\n  bottom: 0;\r\n}\r\n\r\n.onpe-footer-development-text {\r\n  padding: 0.5rem 0.5rem;\r\n  font-size: 1.5rem;\r\n  color: var(--onpe-ui-blue);\r\n  font-family: 'Consolas', monospace;\r\n  font-weight: 900;\r\n}\r\n\r\n.onpe-footer-development-break {\r\n  display: block;\r\n}\r\n\r\n/* Responsive Design */\r\n@media (min-width: 768px) {\r\n  .onpe-footer-contact-list {\r\n    padding: 1.75rem 1rem;\r\n  }\r\n}\r\n\r\n@media (min-width: 1024px) {\r\n  .onpe-footer-contact-list {\r\n    flex-direction: row;\r\n    align-items: center;\r\n  }\r\n  \r\n  .onpe-footer-development {\r\n    height: 46px;\r\n  }\r\n  \r\n  .onpe-footer-development-break {\r\n    display: none;\r\n  }\r\n}\r\n";
-styleInject(css_248z);
-
 var Footer = function (_a) {
     var _b = _a.showBrowserInfo, showBrowserInfo = _b === void 0 ? true : _b, _c = _a.showContactInfo, showContactInfo = _c === void 0 ? true : _c, children = _a.children, _d = _a.showFooterContent, showFooterContent = _d === void 0 ? true : _d, _e = _a.isDevelopment, isDevelopment = _e === void 0 ? true : _e, props = __rest(_a, ["showBrowserInfo", "showContactInfo", "children", "showFooterContent", "isDevelopment"]);
     return (jsxs("footer", __assign({}, props, { children: [showFooterContent && (jsxs(Fragment, { children: [children && children, showBrowserInfo && jsx(BrowserRecommended, {}), showContactInfo && (jsx("div", { className: "onpe-footer-contact", children: jsxs("ul", { className: "onpe-footer-contact-list", children: [jsxs("li", { className: "onpe-footer-contact-item", children: [jsx("p", { className: "onpe-footer-contact-title", children: "Oficina central" }), jsx("p", { className: "onpe-footer-contact-text", children: "Jr. Washington 1894 - Cercado de Lima" })] }), jsxs("li", { className: "onpe-footer-contact-item", children: [jsx("p", { className: "onpe-footer-contact-title", children: "Escr\u00EDbenos" }), jsx("p", { className: "onpe-footer-contact-text", children: "informes@onpe.gob.pe" })] }), jsxs("li", { className: "onpe-footer-contact-item", children: [jsx("p", { className: "onpe-footer-contact-title", children: "Central telef\u00F3nica" }), jsx("p", { className: "onpe-footer-contact-text", children: "(01) 4170630 | Lunes a viernes de 8:30 a.m. a 4:30 p.m." })] })] }) }))] })), isDevelopment && (jsx("div", { className: "onpe-footer-development", children: jsxs("p", { className: "onpe-footer-development-text", children: ["Versi\u00F3n en Desarrollo ", jsx("br", { className: "onpe-footer-development-break" }), " - No Oficial"] }) }))] })));

package/dist/components.js

@@ -85,36 +85,6 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
-function styleInject(css, ref) {
-  if ( ref === void 0 ) ref = {};
-  var insertAt = ref.insertAt;
-
-  if (!css || typeof document === 'undefined') { return; }
-
-  var head = document.head || document.getElementsByTagName('head')[0];
-  var style = document.createElement('style');
-  style.type = 'text/css';
-
-  if (insertAt === 'top') {
-    if (head.firstChild) {
-      head.insertBefore(style, head.firstChild);
-    } else {
-      head.appendChild(style);
-    }
-  } else {
-    head.appendChild(style);
-  }
-
-  if (style.styleSheet) {
-    style.styleSheet.cssText = css;
-  } else {
-    style.appendChild(document.createTextNode(css));
-  }
-}
-
-var css_248z$8 = "/* Button Component Styles */\r\n.onpe-button {\r\n  color: white;\r\n  cursor: pointer;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  font-weight: 600;\r\n  transition: all 0.3s ease-in-out;\r\n  min-width: 200px;\r\n  border: none;\r\n}\r\n\r\n.onpe-button:disabled {\r\n  cursor: not-allowed;\r\n  background-color: var(--onpe-ui-gray);\r\n}\r\n\r\n.onpe-button:disabled:hover {\r\n  background-color: var(--onpe-ui-gray);\r\n}\r\n\r\n/* Button Sizes */\r\n.onpe-button.onpe-button-small {\r\n  height: 2.5rem; /* h-10 */\r\n  font-size: 0.875rem; /* text-sm */\r\n}\r\n\r\n.onpe-button.onpe-button-normal {\r\n  height: 3rem; /* h-12 */\r\n  font-size: 1rem; /* text-base */\r\n}\r\n\r\n.onpe-button.onpe-button-large {\r\n  height: 3.5rem; /* h-14 */\r\n  font-size: 1.125rem; /* text-lg */\r\n}\r\n\r\n/* Button Colors */\r\n.onpe-button.onpe-button-blue {\r\n  background-color: var(--onpe-ui-blue);\r\n}\r\n\r\n.onpe-button.onpe-button-blue:hover {\r\n  background-color: rgba(0, 55, 112, 0.3); /* onpe-ui-blue/30 */\r\n}\r\n\r\n.onpe-button.onpe-button-skyblue {\r\n  background-color: var(--onpe-ui-skyblue);\r\n}\r\n\r\n.onpe-button.onpe-button-skyblue:hover {\r\n  background-color: rgba(0, 115, 207, 0.3); /* onpe-ui-skyblue/30 */\r\n}\r\n\r\n.onpe-button.onpe-button-skyblue-light {\r\n  background-color: var(--onpe-ui-skyblue-light);\r\n}\r\n\r\n.onpe-button.onpe-button-skyblue-light:hover {\r\n  background-color: rgba(105, 178, 232, 0.3); /* onpe-ui-skyblue-light/30 */\r\n}\r\n\r\n.onpe-button.onpe-button-yellow {\r\n  background-color: var(--onpe-ui-yellow);\r\n}\r\n\r\n.onpe-button.onpe-button-yellow:hover {\r\n  background-color: rgba(255, 184, 28, 0.3); /* onpe-ui-yellow/30 */\r\n}\r\n\r\n.onpe-button.onpe-button-light-skyblue {\r\n  background-color: var(--onpe-ui-light-skyblue);\r\n}\r\n\r\n.onpe-button.onpe-button-light-skyblue:hover {\r\n  background-color: rgba(170, 239, 246, 0.3); /* onpe-ui-light-skyblue/30 */\r\n}\r\n\r\n.onpe-button.onpe-button-gray {\r\n  background-color: var(--onpe-ui-gray);\r\n}\r\n\r\n.onpe-button.onpe-button-gray:hover {\r\n  background-color: rgba(188, 188, 188, 0.3); /* onpe-ui-gray/30 */\r\n}\r\n\r\n.onpe-button.onpe-button-gray-light {\r\n  background-color: var(--onpe-ui-gray-light);\r\n}\r\n\r\n.onpe-button.onpe-button-gray-light:hover {\r\n  background-color: rgba(189, 189, 189, 0.3); /* onpe-ui-gray-light/30 */\r\n}\r\n\r\n.onpe-button.onpe-button-gray-extra-light {\r\n  background-color: var(--onpe-ui-gray-extra-light);\r\n}\r\n\r\n.onpe-button.onpe-button-gray-extra-light:hover {\r\n  background-color: rgba(242, 242, 242, 0.3); /* onpe-ui-gray-extra-light/30 */\r\n}\r\n\r\n.onpe-button.onpe-button-red {\r\n  background-color: var(--onpe-ui-red);\r\n}\r\n\r\n.onpe-button.onpe-button-red:hover {\r\n  background-color: rgba(227, 0, 43, 0.3); /* onpe-ui-red/30 */\r\n}\r\n\r\n.onpe-button.onpe-button-dark-gray {\r\n  background-color: var(--onpe-ui-dark-gray);\r\n}\r\n\r\n.onpe-button.onpe-button-dark-gray:hover {\r\n  background-color: rgba(79, 79, 79, 0.3); /* onpe-ui-dark-gray/30 */\r\n}\r\n\r\n.onpe-button.onpe-button-green {\r\n  background-color: var(--onpe-ui-green);\r\n}\r\n\r\n.onpe-button.onpe-button-green:hover {\r\n  background-color: rgba(118, 189, 67, 0.3); /* onpe-ui-green/30 */\r\n}\r\n\r\n.onpe-button.onpe-button-yellow-light {\r\n  background-color: var(--onpe-ui-yellow-light);\r\n}\r\n\r\n.onpe-button.onpe-button-yellow-light:hover {\r\n  background-color: rgba(255, 241, 210, 0.3); /* onpe-ui-yellow-light/30 */\r\n}\r\n\r\n.onpe-button.onpe-button-primary {\r\n  background-color: var(--onpe-ui-blue);\r\n}\r\n\r\n.onpe-button.onpe-button-primary:hover {\r\n  background-color: rgba(0, 55, 112, 0.3); /* onpe-ui-blue/30 */\r\n}\r\n\r\n";
-styleInject(css_248z$8);
-
 var Button = function (_a) {
     var color = _a.color, title = _a.title, _b = _a.size, size = _b === void 0 ? "normal" : _b, className = _a.className, props = __rest(_a, ["color", "title", "size", "className"]);
     return (jsx("button", __assign({ className: "onpe-button onpe-button-".concat(color, " onpe-button-").concat(size, " ").concat(className || "") }, props, { children: title })));
@@ -143,9 +113,6 @@ var Show = function (_a) {
     return (jsxs(Fragment, { children: [condition && loadingComponent, !condition && children] }));
 };
 
-var css_248z$7 = "/* Overlay Component Styles */\r\n.onpe-overlay {\r\n  position: absolute;\r\n  top: 0;\r\n  right: 0;\r\n  bottom: 0;\r\n  left: 0;\r\n  width: 100%;\r\n  height: 100vh;\r\n  z-index: 10;\r\n  transition: all 0.5s ease-in-out;\r\n}\r\n\r\n.onpe-overlay.onpe-overlay-show {\r\n  pointer-events: auto;\r\n  opacity: 1;\r\n}\r\n\r\n.onpe-overlay.onpe-overlay-hide {\r\n  pointer-events: none;\r\n  opacity: 0;\r\n}\r\n\r\n/* Overlay Colors */\r\n.onpe-overlay.onpe-overlay-blue {\r\n  background-color: rgba(0, 55, 112, 0.8); /* onpe-ui-blue/80 */\r\n}\r\n\r\n.onpe-overlay.onpe-overlay-skyblue {\r\n  background-color: rgba(0, 115, 207, 0.8); /* onpe-ui-skyblue/80 */\r\n}\r\n\r\n.onpe-overlay.onpe-overlay-skyblue-light {\r\n  background-color: rgba(105, 178, 232, 0.8); /* onpe-ui-skyblue-light/80 */\r\n}\r\n\r\n.onpe-overlay.onpe-overlay-yellow {\r\n  background-color: rgba(255, 184, 28, 0.8); /* onpe-ui-yellow/80 */\r\n}\r\n\r\n.onpe-overlay.onpe-overlay-light-skyblue {\r\n  background-color: rgba(170, 239, 246, 0.8); /* onpe-ui-light-skyblue/80 */\r\n}\r\n\r\n.onpe-overlay.onpe-overlay-gray {\r\n  background-color: rgba(188, 188, 188, 0.8); /* onpe-ui-gray/80 */\r\n}\r\n\r\n.onpe-overlay.onpe-overlay-gray-light {\r\n  background-color: rgba(189, 189, 189, 0.8); /* onpe-ui-gray-light/80 */\r\n}\r\n\r\n.onpe-overlay.onpe-overlay-gray-extra-light {\r\n  background-color: rgba(242, 242, 242, 0.8); /* onpe-ui-gray-extra-light/80 */\r\n}\r\n\r\n.onpe-overlay.onpe-overlay-red {\r\n  background-color: rgba(227, 0, 43, 0.8); /* onpe-ui-red/80 */\r\n}\r\n\r\n.onpe-overlay.onpe-overlay-dark-gray {\r\n  background-color: rgba(79, 79, 79, 0.8); /* onpe-ui-dark-gray/80 */\r\n}\r\n\r\n.onpe-overlay.onpe-overlay-green {\r\n  background-color: rgba(118, 189, 67, 0.8); /* onpe-ui-green/80 */\r\n}\r\n\r\n.onpe-overlay.onpe-overlay-yellow-light {\r\n  background-color: rgba(255, 241, 210, 0.8); /* onpe-ui-yellow-light/80 */\r\n}\r\n\r\n.onpe-overlay.onpe-overlay-primary {\r\n  background-color: rgba(0, 55, 112, 0.8); /* onpe-ui-blue/80 */\r\n}\r\n";
-styleInject(css_248z$7);
-
 var Overlay = function (_a) {
     var show = _a.show, onClick = _a.onClick, _b = _a.color, color = _b === void 0 ? "blue" : _b;
     var getColorClass = function () {
@@ -159,9 +126,6 @@ var Overlay = function (_a) {
 
 var IconClose = function (props) { return (jsx("svg", __assign({ width: 16, height: 16, viewBox: "0 0 8 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: jsx("path", { d: "M6.82839 1.17139L1.17139 6.82839M1.17139 1.17139L6.82839 6.82839", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }) }))); };
 
-var css_248z$6 = "/* Modal Component Styles */\n.onpe-modal-container {\n  position: fixed;\n  top: 0;\n  width: 100%;\n  height: 100vh;\n  display: grid;\n  place-items: center;\n}\n\n/* Prevenir scroll del body cuando el modal está abierto */\nbody.onpe-modal-open {\n  overflow: hidden;\n}\n\n.onpe-modal-container.onpe-modal-open {\n  opacity: 1;\n  z-index: 50;\n}\n\n.onpe-modal-container.onpe-modal-open.onpe-modal-top-absolute {\n  z-index: 100;\n}\n\n.onpe-modal-container.onpe-modal-closed {\n  opacity: 0;\n  z-index: -10;\n}\n\n.onpe-modal-content-wrapper {\n  position: relative;\n  z-index: 20;\n  display: grid;\n  place-items: center;\n}\n\n.onpe-modal-content {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n}\n\n.onpe-modal-content.onpe-modal-with-background {\n  background-color: white;\n  padding: 2.5rem 0.25rem; /* py-10 px-1 */\n  min-width: 320px;\n  width: 98vw;\n  max-width: 95vw;\n  max-height: 90vh;\n  overflow-y: auto;\n  scroll-behavior: smooth; /* Scroll suave */\n  scrollbar-width: thin; /* Scrollbar más delgado */\n  scrollbar-color: #cbd5e0 #f7fafc; /* Colores del scrollbar */\n  transition: scroll-behavior 0.1s ease-in-out; /* Transición suave para el reset */\n}\n\n/* Estilos para el scrollbar en WebKit (Chrome, Safari, Edge) */\n.onpe-modal-content.onpe-modal-with-background::-webkit-scrollbar {\n  width: 8px;\n}\n\n.onpe-modal-content.onpe-modal-with-background::-webkit-scrollbar-track {\n  background: #f7fafc;\n  border-radius: 4px;\n}\n\n.onpe-modal-content.onpe-modal-with-background::-webkit-scrollbar-thumb {\n  background: #cbd5e0;\n  border-radius: 4px;\n}\n\n.onpe-modal-content.onpe-modal-with-background::-webkit-scrollbar-thumb:hover {\n  background: #a0aec0;\n}\n\n.onpe-modal-content.onpe-modal-without-background {\n  /* Sin fondo - solo contenido */\n}\n\n.onpe-modal-close-button {\n  position: absolute;\n  top: 1rem; /* top-4 */\n  right: 1rem; /* right-4 */\n  border-radius: 50%;\n  background-color: var(--onpe-ui-red);\n  padding: 7px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 30;\n  border: none;\n  cursor: pointer;\n}\n\n.onpe-modal-close-button:hover {\n  background-color: rgba(227, 0, 43, 0.8); /* onpe-ui-red con hover */\n}\n\n.onpe-modal-close-icon {\n  height: 10px;\n  width: 10px;\n  color: white;\n}\n\n/* Responsive Design */\n@media (min-width: 768px) {\n  .onpe-modal-content.onpe-modal-with-background {\n    padding: 2.5rem 0; /* md:px-auto */\n    width: 500px; /* md:w-[500px] */\n  }\n}\n\n@media (min-width: 1024px) {\n  .onpe-modal-content.onpe-modal-with-background {\n    padding: 4rem 1.25rem; /* lg:py-16 lg:px-5 */\n    width: 1024px; /* lg:w-[1024px] */\n  }\n}\n";
-styleInject(css_248z$6);
-
 var Modal = function (_a) {
     var isOpen = _a.isOpen, onClose = _a.onClose, children = _a.children, _b = _a.whitoutBackground, whitoutBackground = _b === void 0 ? false : _b, _c = _a.topAbsolute, topAbsolute = _c === void 0 ? false : _c, _d = _a.closeButton, closeButton = _d === void 0 ? false : _d, _e = _a.closeDisabled, closeDisabled = _e === void 0 ? false : _e, _f = _a.overlayColor, overlayColor = _f === void 0 ? "blue" : _f, props = __rest(_a, ["isOpen", "onClose", "children", "whitoutBackground", "topAbsolute", "closeButton", "closeDisabled", "overlayColor"]);
     // Manejar el scroll del body cuando el modal está abierto
@@ -239,9 +203,6 @@ var IconSafariColor = function (props) { return (jsxs("svg", __assign({ width: 4
 
 var IconEdgeColor = function (props) { return (jsxs("svg", __assign({ width: 48, height: 48, viewBox: "0 0 48 48", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: [jsxs("g", { clipPath: "url(#clip0_2937_2810)", children: [jsx("path", { d: "M43.3141 35.7195C42.6766 36.057 42.0203 36.357 41.3453 36.6008C39.1891 37.407 36.9203 37.8195 34.6141 37.8195C25.7453 37.8195 18.0203 31.7258 18.0203 23.8883C18.0391 21.7508 19.2203 19.782 21.0953 18.7695C13.0703 19.107 11.0078 27.4695 11.0078 32.3633C11.0078 46.2195 23.7766 47.6258 26.5328 47.6258C28.0141 47.6258 30.2453 47.1945 31.5953 46.7633L31.8391 46.6883C37.0141 44.907 41.4016 41.4195 44.3266 36.7883C44.5516 36.432 44.4391 35.982 44.1016 35.757C43.8578 35.607 43.5578 35.5883 43.3141 35.7195Z", fill: "url(#paint0_linear_2937_2810)" }), jsx("path", { opacity: 0.35, d: "M43.3141 35.7195C42.6766 36.057 42.0203 36.357 41.3453 36.6008C39.1891 37.407 36.9203 37.8195 34.6141 37.8195C25.7453 37.8195 18.0203 31.7258 18.0203 23.8883C18.0391 21.7508 19.2203 19.782 21.0953 18.7695C13.0703 19.107 11.0078 27.4695 11.0078 32.3633C11.0078 46.2195 23.7766 47.6258 26.5328 47.6258C28.0141 47.6258 30.2453 47.1945 31.5953 46.7633L31.8391 46.6883C37.0141 44.907 41.4016 41.4195 44.3266 36.7883C44.5516 36.432 44.4391 35.982 44.1016 35.757C43.8578 35.607 43.5578 35.5883 43.3141 35.7195Z", fill: "url(#paint1_radial_2937_2810)" }), jsx("path", { d: "M19.8169 45.2641C18.1482 44.2328 16.7044 42.8641 15.5607 41.2703C10.6294 34.5203 12.1107 25.0516 18.8607 20.1203C19.5732 19.6141 20.3044 19.1453 21.0919 18.7703C21.6732 18.4891 22.6669 18.0016 23.9982 18.0203C25.8919 18.0391 27.6732 18.9391 28.8169 20.4578C29.5669 21.4703 29.9982 22.6891 30.0169 23.9641C30.0169 23.9266 34.6107 9.03906 15.0169 9.03906C6.78565 9.03906 0.0169045 16.8578 0.0169045 23.7016C-0.0205955 27.3203 0.766904 30.9203 2.28565 34.2016C7.46065 45.2266 20.0607 50.6266 31.6107 46.7828C27.6544 48.0203 23.3419 47.4766 19.8169 45.2641Z", fill: "url(#paint2_linear_2937_2810)" }), jsx("path", { opacity: 0.41, d: "M19.8169 45.2641C18.1482 44.2328 16.7044 42.8641 15.5607 41.2703C10.6294 34.5203 12.1107 25.0516 18.8607 20.1203C19.5732 19.6141 20.3044 19.1453 21.0919 18.7703C21.6732 18.4891 22.6669 18.0016 23.9982 18.0203C25.8919 18.0391 27.6732 18.9391 28.8169 20.4578C29.5669 21.4703 29.9982 22.6891 30.0169 23.9641C30.0169 23.9266 34.6107 9.03906 15.0169 9.03906C6.78565 9.03906 0.0169045 16.8578 0.0169045 23.7016C-0.0205955 27.3203 0.766904 30.9203 2.28565 34.2016C7.46065 45.2266 20.0607 50.6266 31.6107 46.7828C27.6544 48.0203 23.3419 47.4766 19.8169 45.2641Z", fill: "url(#paint3_radial_2937_2810)" }), jsx("path", { d: "M28.5563 27.9187C28.4062 28.1062 27.9375 28.3875 27.9375 28.9875C27.9375 29.475 28.2562 29.9438 28.8187 30.3375C31.5187 32.2125 36.6 31.9688 36.6188 31.9688C38.625 31.9688 40.575 31.425 42.3 30.4125C45.825 28.35 48 24.5813 48 20.4938C48.0563 16.2938 46.5 13.5 45.8812 12.2625C41.9062 4.48125 33.3187 0 24 0C10.875 0 0.1875 10.5375 0 23.6625C0.09375 16.8187 6.9 11.2875 15 11.2875C15.6562 11.2875 19.4062 11.3438 22.875 13.1813C25.9312 14.7938 27.5438 16.725 28.65 18.6562C29.8125 20.6625 30.0188 23.175 30.0188 24.1875C30.0188 25.1812 29.5125 26.6812 28.5563 27.9187Z", fill: "url(#paint4_radial_2937_2810)" }), jsx("path", { d: "M28.5563 27.9187C28.4062 28.1062 27.9375 28.3875 27.9375 28.9875C27.9375 29.475 28.2562 29.9438 28.8187 30.3375C31.5187 32.2125 36.6 31.9688 36.6188 31.9688C38.625 31.9688 40.575 31.425 42.3 30.4125C45.825 28.35 48 24.5813 48 20.4938C48.0563 16.2938 46.5 13.5 45.8812 12.2625C41.9062 4.48125 33.3187 0 24 0C10.875 0 0.1875 10.5375 0 23.6625C0.09375 16.8187 6.9 11.2875 15 11.2875C15.6562 11.2875 19.4062 11.3438 22.875 13.1813C25.9312 14.7938 27.5438 16.725 28.65 18.6562C29.8125 20.6625 30.0188 23.175 30.0188 24.1875C30.0188 25.1812 29.5125 26.6812 28.5563 27.9187Z", fill: "url(#paint5_radial_2937_2810)" })] }), jsxs("defs", { children: [jsxs("linearGradient", { id: "paint0_linear_2937_2810", x1: 11.0086, y1: 33.192, x2: 44.4366, y2: 33.192, gradientUnits: "userSpaceOnUse", children: [jsx("stop", { stopColor: "#0C59A4" }), jsx("stop", { offset: 1, stopColor: "#114A8B" })] }), jsxs("radialGradient", { id: "paint1_radial_2937_2810", cx: 0, cy: 0, r: 1, gradientUnits: "userSpaceOnUse", gradientTransform: "translate(29.475 33.4576) scale(17.882 16.986)", children: [jsx("stop", { offset: 0.72, stopOpacity: 0 }), jsx("stop", { offset: 0.95, stopOpacity: 0.53 }), jsx("stop", { offset: 1 })] }), jsxs("linearGradient", { id: "paint2_linear_2937_2810", x1: 28.6427, y1: 18.7039, x2: 7.76028, y2: 41.4499, gradientUnits: "userSpaceOnUse", children: [jsx("stop", { stopColor: "#1B9DE2" }), jsx("stop", { offset: 0.16, stopColor: "#1595DF" }), jsx("stop", { offset: 0.67, stopColor: "#0680D7" }), jsx("stop", { offset: 1, stopColor: "#0078D4" })] }), jsxs("radialGradient", { id: "paint3_radial_2937_2810", cx: 0, cy: 0, r: 1, gradientUnits: "userSpaceOnUse", gradientTransform: "translate(13.2373 37.3159) rotate(-81.3826) scale(26.8871 21.7263)", children: [jsx("stop", { offset: 0.76, stopOpacity: 0 }), jsx("stop", { offset: 0.95, stopOpacity: 0.5 }), jsx("stop", { offset: 1 })] }), jsxs("radialGradient", { id: "paint4_radial_2937_2810", cx: 0, cy: 0, r: 1, gradientUnits: "userSpaceOnUse", gradientTransform: "translate(4.84718 8.88615) rotate(92.2911) scale(37.9784 80.8984)", children: [jsx("stop", { stopColor: "#35C1F1" }), jsx("stop", { offset: 0.11, stopColor: "#34C1ED" }), jsx("stop", { offset: 0.23, stopColor: "#2FC2DF" }), jsx("stop", { offset: 0.31, stopColor: "#2BC3D2" }), jsx("stop", { offset: 0.67, stopColor: "#36C752" })] }), jsxs("radialGradient", { id: "paint5_radial_2937_2810", cx: 0, cy: 0, r: 1, gradientUnits: "userSpaceOnUse", gradientTransform: "translate(45.0113 14.5136) rotate(73.7366) scale(18.2477 14.8419)", children: [jsx("stop", { stopColor: "#66EB6E" }), jsx("stop", { offset: 1, stopColor: "#66EB6E", stopOpacity: 0 })] }), jsx("clipPath", { id: "clip0_2937_2810", children: jsx("rect", { width: 48, height: 48, fill: "white" }) })] })] }))); };
 
-var css_248z$5 = "/* ModalBrowserIncompatible Component Styles */\r\n.onpe-modal-browser-incompatible-container {\r\n  max-width: 680px !important;\r\n  padding-top: 1.25rem !important; /* pt-5 */\r\n  padding-bottom: 2rem !important; /* pb-8 */\r\n}\r\n\r\n.onpe-modal-browser-incompatible-icon-container {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n\r\n.onpe-modal-browser-incompatible-icon {\r\n  width: 5.5rem; /* w-22 */\r\n  height: 5.5rem; /* h-22 */\r\n  color: var(--onpe-ui-skyblue);\r\n}\r\n\r\n.onpe-modal-browser-incompatible-title {\r\n  margin-top: 1.5rem; /* mt-6 */\r\n  font-size: 0.875rem; /* text-sm */\r\n  font-weight: 500; /* font-medium */\r\n  text-align: center;\r\n  color: var(--onpe-ui-skyblue);\r\n}\r\n\r\n.onpe-modal-browser-incompatible-message {\r\n  margin-top: 1.5rem; /* mt-6 */\r\n  font-size: 0.875rem; /* text-sm */\r\n  text-align: center;\r\n}\r\n\r\n.onpe-modal-browser-incompatible-browsers-container {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: 2rem; /* gap-8 */\r\n  margin-top: 1.25rem; /* mt-5 */\r\n}\r\n\r\n.onpe-modal-browser-incompatible-browser-icon {\r\n  width: 2rem; /* w-[32px] */\r\n  height: 2rem; /* h-[32px] */\r\n}\r\n\r\n/* Responsive Design */\r\n@media (min-width: 768px) {\r\n  .onpe-modal-browser-incompatible-container {\r\n    width: 680px !important;\r\n    max-width: 680px !important;\r\n  }\r\n}\r\n\r\n@media (min-width: 1024px) {\r\n  .onpe-modal-browser-incompatible-container {\r\n    width: 680px !important;\r\n    max-width: 680px !important;\r\n  }\r\n  \r\n  .onpe-modal-browser-incompatible-title {\r\n    font-size: 1.5rem; /* md:text-2xl */\r\n  }\r\n  \r\n  .onpe-modal-browser-incompatible-message {\r\n    font-size: 1.125rem; /* md:text-lg */\r\n  }\r\n  \r\n  .onpe-modal-browser-incompatible-browsers-container {\r\n    gap: 3rem; /* md:gap-12 */\r\n  }\r\n  \r\n  .onpe-modal-browser-incompatible-browser-icon {\r\n    width: 3rem; /* md:w-[48px] */\r\n    height: 3rem; /* md:h-[48px] */\r\n  }\r\n}\r\n";
-styleInject(css_248z$5);
-
 var ModalBrowserIncompatible = function (_a) {
     var _b = _a.isOpen, isOpen = _b === void 0 ? false : _b, _c = _a.onClose, onClose = _c === void 0 ? function () { } : _c, _d = _a.className, className = _d === void 0 ? "" : _d;
     return (jsxs(Modal, { isOpen: isOpen, onClose: onClose, className: "onpe-modal-browser-incompatible-container ".concat(className), closeButton: true, closeDisabled: true, children: [jsx("div", { className: "onpe-modal-browser-incompatible-icon-container", children: jsx(IconWarning, { className: "onpe-modal-browser-incompatible-icon" }) }), jsx("p", { className: "onpe-modal-browser-incompatible-title", children: "Navegador no recomendado" }), jsx("p", { className: "onpe-modal-browser-incompatible-message", children: "Para una mejor experiencia y mayor seguridad, debes ingresar con los siguientes navegadores:" }), jsxs("div", { className: "onpe-modal-browser-incompatible-browsers-container", children: [jsx(IconChromeColor, { className: "onpe-modal-browser-incompatible-browser-icon" }), jsx(IconSafariColor, { className: "onpe-modal-browser-incompatible-browser-icon" }), jsx(IconEdgeColor, { className: "onpe-modal-browser-incompatible-browser-icon" })] })] }));
@@ -249,11 +210,8 @@ var ModalBrowserIncompatible = function (_a) {
 
 var IconCheck = function (props) { return (jsx("svg", __assign({ width: 64, height: 64, viewBox: "0 0 64 64", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "mt-10 lg:mt-16" }, props, { children: jsx("path", { d: "M28.2673 44.2663L47.0673 25.4663L43.334 21.733L28.2673 36.7997L20.6673 29.1997L16.934 32.933L28.2673 44.2663ZM32.0007 58.6663C28.3118 58.6663 24.8451 57.9659 21.6007 56.565C18.3562 55.1641 15.534 53.2646 13.134 50.8663C10.734 48.4663 8.83443 45.6441 7.43532 42.3997C6.03621 39.1552 5.33576 35.6886 5.33398 31.9997C5.33398 28.3108 6.03443 24.8441 7.43532 21.5997C8.83621 18.3552 10.7358 15.533 13.134 13.133C15.534 10.733 18.3562 8.83345 21.6007 7.43434C24.8451 6.03523 28.3118 5.33479 32.0007 5.33301C35.6895 5.33301 39.1562 6.03345 42.4007 7.43434C45.6451 8.83523 48.4673 10.7348 50.8673 13.133C53.2673 15.533 55.1678 18.3552 56.5686 21.5997C57.9695 24.8441 58.6691 28.3108 58.6673 31.9997C58.6673 35.6886 57.9669 39.1552 56.566 42.3997C55.1651 45.6441 53.2655 48.4663 50.8673 50.8663C48.4673 53.2663 45.6451 55.1668 42.4007 56.5677C39.1562 57.9686 35.6895 58.6681 32.0007 58.6663ZM32.0007 53.333C37.9562 53.333 43.0006 51.2663 47.134 47.133C51.2673 42.9997 53.334 37.9552 53.334 31.9997C53.334 26.0441 51.2673 20.9997 47.134 16.8663C43.0006 12.733 37.9562 10.6663 32.0007 10.6663C26.0451 10.6663 21.0007 12.733 16.8673 16.8663C12.734 20.9997 10.6673 26.0441 10.6673 31.9997C10.6673 37.9552 12.734 42.9997 16.8673 47.133C21.0007 51.2663 26.0451 53.333 32.0007 53.333Z", fill: "currentColor" }) }))); };
 
-var css_248z$4 = "/* ModalConfirm Component Styles */\n.onpe-modal-confirm-container {\n  max-width: 680px !important;\n  width: 680px !important;\n  padding-top: 1.25rem !important; /* pt-5 */\n  padding-bottom: 2rem !important; /* pb-8 */\n}\n\n.onpe-modal-confirm-icon-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.onpe-modal-confirm-icon {\n  width: 4rem; /* w-16 */\n  height: 4rem; /* h-16 */\n  color: var(--onpe-ui-skyblue);\n}\n\n.onpe-modal-confirm-title {\n  margin-top: 0.75rem; /* mt-3 */\n  font-size: 1.125rem; /* text-lg */\n  font-weight: 500; /* font-medium */\n  text-align: center;\n  color: var(--onpe-ui-skyblue);\n}\n\n.onpe-modal-confirm-message {\n  margin-top: 1.75rem; /* mt-7 */\n  font-size: 0.875rem; /* text-sm */\n  text-align: center;\n  max-width: 100%;\n}\n\n.onpe-modal-confirm-buttons-container {\n  display: flex;\n  flex-direction: column-reverse;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  gap: 1.25rem; /* gap-5 */\n  margin-top: 2.75rem; /* mt-11 */\n}\n\n.onpe-modal-confirm-button {\n  width: 100%;\n  max-width: 200px;\n}\n\n/* Responsive Design */\n@media (min-width: 768px) {\n  .onpe-modal-confirm-container {\n    width: 680px !important;\n    max-width: 680px !important;\n  }\n}\n\n@media (min-width: 1024px) {\n  .onpe-modal-confirm-container {\n    width: 680px !important;\n    max-width: 680px !important;\n  }\n  \n  .onpe-modal-confirm-title {\n    margin-top: 1rem; /* lg:mt-4 */\n    font-size: 1.5rem; /* lg:text-2xl */\n  }\n  \n  .onpe-modal-confirm-message {\n    font-size: 1.125rem; /* lg:text-lg */\n    max-width: 576px; /* lg:max-w-[576px] */\n  }\n  \n  .onpe-modal-confirm-buttons-container {\n    flex-direction: row; /* lg:flex-row */\n    margin-top: 5rem; /* lg:mt-20 */\n  }\n  \n  .onpe-modal-confirm-button {\n    width: 200px; /* lg:w-[200px] */\n  }\n}\n";
-styleInject(css_248z$4);
-
 var ModalConfirm = function (_a) {
-    var _b = _a.isOpen, isOpen = _b === void 0 ? false : _b, _c = _a.onClose, onClose = _c === void 0 ? function () { } : _c, title = _a.title, message = _a.message, _d = _a.icon, icon = _d === void 0 ? "warning" : _d, _e = _a.onConfirm, onConfirm = _e === void 0 ? function () { } : _e, _f = _a.onCancel, onCancel = _f === void 0 ? function () { } : _f, _g = _a.textButtonConfirm, textButtonConfirm = _g === void 0 ? "Confirmar" : _g, _h = _a.textButtonCancel, textButtonCancel = _h === void 0 ? "Cancelar" : _h, _j = _a.twoButtons, twoButtons = _j === void 0 ? true : _j, _k = _a.className, className = _k === void 0 ? "" : _k;
+    var _b = _a.isOpen, isOpen = _b === void 0 ? false : _b, _c = _a.onClose, onClose = _c === void 0 ? function () { } : _c, title = _a.title, message = _a.message, _d = _a.icon, icon = _d === void 0 ? "warning" : _d, _e = _a.color, color = _e === void 0 ? "blue" : _e, _f = _a.onConfirm, onConfirm = _f === void 0 ? function () { } : _f, _g = _a.onCancel, onCancel = _g === void 0 ? function () { } : _g, _h = _a.textButtonConfirm, textButtonConfirm = _h === void 0 ? "Confirmar" : _h, _j = _a.textButtonCancel, textButtonCancel = _j === void 0 ? "Cancelar" : _j, _k = _a.twoButtons, twoButtons = _k === void 0 ? true : _k, _l = _a.className, className = _l === void 0 ? "" : _l;
     var handleConfirm = function () { return __awaiter(void 0, void 0, void 0, function () {
         return __generator(this, function (_a) {
             try {
@@ -271,16 +229,13 @@ var ModalConfirm = function (_a) {
         onCancel();
         onClose();
     };
-    return (jsxs(Modal, { isOpen: isOpen, onClose: onClose, className: "onpe-modal-confirm-container ".concat(className), closeButton: true, closeDisabled: true, topAbsolute: true, children: [jsxs("div", { className: "onpe-modal-confirm-icon-container", children: [icon === "warning" && jsx(IconWarning, { className: "onpe-modal-confirm-icon" }), icon === "success" && jsx(IconCheck, { className: "onpe-modal-confirm-icon" })] }), jsx("p", { className: "onpe-modal-confirm-title", children: title }), jsx("p", { className: "onpe-modal-confirm-message", children: message }), jsxs("div", { className: "onpe-modal-confirm-buttons-container", children: [twoButtons && jsx(Button, { className: "onpe-modal-confirm-button", color: "blue", title: textButtonCancel, onClick: handleCancel }), jsx(Button, { className: "onpe-modal-confirm-button", color: "red", title: textButtonConfirm, onClick: handleConfirm })] })] }));
+    return (jsxs(Modal, { isOpen: isOpen, onClose: onClose, className: "onpe-modal-confirm-container ".concat(className), closeButton: true, closeDisabled: true, topAbsolute: true, children: [jsxs("div", { className: "onpe-modal-confirm-icon-container onpe-modal-confirm-icon-".concat(color), children: [icon === "warning" && jsx(IconWarning, { className: "onpe-modal-confirm-icon onpe-modal-confirm-icon-".concat(color) }), icon === "success" && jsx(IconCheck, { className: "onpe-modal-confirm-icon onpe-modal-confirm-icon-".concat(color) })] }), jsx("p", { className: "onpe-modal-confirm-title onpe-modal-confirm-title-".concat(color), children: title }), jsx("p", { className: "onpe-modal-confirm-message", children: message }), jsxs("div", { className: "onpe-modal-confirm-buttons-container", children: [twoButtons && jsx(Button, { className: "onpe-modal-confirm-button", color: "blue", title: textButtonCancel, onClick: handleCancel }), jsx(Button, { className: "onpe-modal-confirm-button", color: "red", title: textButtonConfirm, onClick: handleConfirm })] })] }));
 };
 
 var IconSpinnerDesktop = function (props) { return (jsx("svg", __assign({ width: 102, height: 102, viewBox: "0 0 102 102", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: jsx("path", { d: "M50.9999 3.08313C23.9241 3.08208 3.08296 24.6456 3.08325 51C3.08354 75.4375 22.453 98.9167 50.9999 98.9167C77.5573 98.9167 98.9166 77.3542 98.9166 51", stroke: "currentColor", strokeWidth: 6, strokeLinecap: "round" }) }))); };
 
 var IconSpinnerMobile = function (props) { return (jsx("svg", __assign({ width: 33, height: 33, viewBox: "0 0 33 33", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: jsx("path", { d: "M16.5 3C8.87169 2.9997 2.99992 9.07499 3 16.5C3.00008 23.385 8.45721 30 16.5 30C23.9822 30 30 23.925 30 16.5", stroke: "currentColor", strokeWidth: 6, strokeLinecap: "round" }) }))); };
 
-var css_248z$3 = "/* ModalLoading Component Styles */\r\n.onpe-modal-loading-spinner-desktop {\r\n  display: none; /* hidden */\r\n  color: white;\r\n  animation: spin 1s linear infinite; /* animate-spin */\r\n}\r\n\r\n.onpe-modal-loading-spinner-mobile {\r\n  display: block; /* block */\r\n  color: white;\r\n  animation: spin 1s linear infinite; /* animate-spin */\r\n}\r\n\r\n.onpe-modal-loading-message {\r\n  color: white;\r\n  line-height: normal; /* leading-normal */\r\n  font-size: 1.5rem; /* text-2xl */\r\n  text-align: center;\r\n  margin-top: 2.5rem; /* mt-10 */\r\n}\r\n\r\n/* Responsive Design */\r\n@media (min-width: 768px) {\r\n  .onpe-modal-loading-spinner-desktop {\r\n    display: block; /* md:block */\r\n  }\r\n  \r\n  .onpe-modal-loading-spinner-mobile {\r\n    display: none; /* md:hidden */\r\n  }\r\n  \r\n  .onpe-modal-loading-message {\r\n    font-size: 4rem; /* md:text-[64px] */\r\n    margin-top: 5rem; /* md:mt-20 */\r\n  }\r\n}\r\n\r\n/* Spin Animation */\r\n@keyframes spin {\r\n  from {\r\n    transform: rotate(0deg);\r\n  }\r\n  to {\r\n    transform: rotate(360deg);\r\n  }\r\n}\r\n";
-styleInject(css_248z$3);
-
 var ModalLoading = function (_a) {
     var _b = _a.isOpen, isOpen = _b === void 0 ? false : _b, _c = _a.onClose, onClose = _c === void 0 ? function () { } : _c, _d = _a.message, message = _d === void 0 ? "Cargando..." : _d, _e = _a.className, className = _e === void 0 ? "" : _e;
     return (jsxs(Modal, { isOpen: isOpen, onClose: onClose, className: className, closeDisabled: true, whitoutBackground: true, children: [jsx(IconSpinnerDesktop, { className: "onpe-modal-loading-spinner-desktop" }), jsx(IconSpinnerMobile, { className: "onpe-modal-loading-spinner-mobile" }), jsx("p", { className: "onpe-modal-loading-message", children: message })] }));
@@ -292,9 +247,6 @@ var IconAndroid = function (props) { return (jsx("svg", __assign({ width: 24, he
 
 var IconApple = function (props) { return (jsx("svg", __assign({ stroke: "currentColor", fill: "currentColor", width: 24, height: 24, strokeWidth: 0, viewBox: "0 0 384 512", xmlns: "http://www.w3.org/2000/svg" }, props, { children: jsx("path", { d: "M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z" }) }))); };
 
-var css_248z$2 = "/* ModalSystemIncompatible Component Styles */\r\n.onpe-modal-system-incompatible-container {\r\n  max-width: 680px !important;\r\n  padding-top: 2.5rem !important; /* pt-10 */\r\n  padding-bottom: 6.125rem !important; /* pb-24.5 */\r\n}\r\n\r\n.onpe-modal-system-incompatible-icon-container {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n}\r\n\r\n.onpe-modal-system-incompatible-icon {\r\n  width: 5.5rem; /* w-22 */\r\n  height: 5.5rem; /* h-22 */\r\n  color: var(--onpe-ui-skyblue);\r\n}\r\n\r\n.onpe-modal-system-incompatible-title {\r\n  font-size: 0.875rem; /* text-sm */\r\n  text-align: center;\r\n  margin-top: 1.5rem; /* mt-6 */\r\n  color: var(--onpe-ui-skyblue);\r\n  font-weight: 500; /* font-medium */\r\n}\r\n\r\n.onpe-modal-system-incompatible-message {\r\n  font-size: 0.875rem; /* text-sm */\r\n  margin-top: 2.5rem; /* mt-10 */\r\n  text-align: center;\r\n}\r\n\r\n.onpe-modal-system-incompatible-systems-container {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 2rem; /* gap-8 */\r\n  margin-top: 1.25rem; /* mt-5 */\r\n  color: var(--onpe-ui-skyblue);\r\n}\r\n\r\n.onpe-modal-system-incompatible-system-icon {\r\n  width: 2rem; /* w-[32px] */\r\n  height: 2rem; /* h-[32px] */\r\n}\r\n\r\n/* Responsive Design */\r\n@media (min-width: 768px) {\r\n  .onpe-modal-system-incompatible-container {\r\n    width: 680px !important;\r\n    max-width: 680px !important;\r\n  }\r\n}\r\n\r\n@media (min-width: 1024px) {\r\n  .onpe-modal-system-incompatible-container {\r\n    width: 680px !important;\r\n    max-width: 680px !important;\r\n  }\r\n  \r\n  .onpe-modal-system-incompatible-title {\r\n    font-size: 1.5rem; /* md:text-2xl */\r\n  }\r\n  \r\n  .onpe-modal-system-incompatible-message {\r\n    font-size: 1.125rem; /* md:text-lg */\r\n  }\r\n  \r\n  .onpe-modal-system-incompatible-systems-container {\r\n    gap: 3rem; /* md:gap-12 */\r\n  }\r\n  \r\n  .onpe-modal-system-incompatible-system-icon {\r\n    width: 3rem; /* md:w-[48px] */\r\n    height: 3rem; /* md:h-[48px] */\r\n  }\r\n}\r\n\r\n@media (min-width: 1280px) {\r\n  .onpe-modal-system-incompatible-message {\r\n    padding-left: 3rem; /* xl:px-12 */\r\n    padding-right: 3rem; /* xl:px-12 */\r\n  }\r\n}\r\n";
-styleInject(css_248z$2);
-
 var ModalSystemIncompatible = function (_a) {
     var _b = _a.isOpen, isOpen = _b === void 0 ? false : _b, _c = _a.onClose, onClose = _c === void 0 ? function () { } : _c, _d = _a.className, className = _d === void 0 ? "" : _d;
     return (jsxs(Modal, { isOpen: isOpen, onClose: onClose, className: "onpe-modal-system-incompatible-container ".concat(className), closeButton: true, closeDisabled: true, children: [jsx("div", { className: "onpe-modal-system-incompatible-icon-container", children: jsx(IconWarning, { className: "onpe-modal-system-incompatible-icon" }) }), jsx("p", { className: "onpe-modal-system-incompatible-title", children: "Sistema Operativo no recomendado" }), jsx("p", { className: "onpe-modal-system-incompatible-message", children: "Para descargar e instalar el ONPEID utiliza un dispositivo con sistema operativo Windows, macOS, Android o iOS." }), jsxs("div", { className: "onpe-modal-system-incompatible-systems-container", children: [jsx(IconWindow, { className: "onpe-modal-system-incompatible-system-icon" }), jsx(IconAndroid, { className: "onpe-modal-system-incompatible-system-icon" }), jsx(IconApple, { className: "onpe-modal-system-incompatible-system-icon" })] })] }));
@@ -306,16 +258,10 @@ var IconSafari = function (props) { return (jsxs("svg", __assign({ width: 24, he
 
 var IconEdge = function (props) { return (jsxs("svg", __assign({ width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: [jsx("g", { clipPath: "url(#clip0_8211_8231)", children: jsx("path", { d: "M9.86748 11.7697C9.90253 13.051 10.5964 14.591 12.2319 15.9545C13.6546 17.1391 16.1157 18.0916 18.1066 18.0916C18.7863 18.0923 19.4637 18.0112 20.124 17.8498C20.3714 17.7895 20.6314 17.8089 20.8671 17.905C21.1027 18.0012 21.302 18.1693 21.4366 18.3854C21.5711 18.6015 21.6339 18.8546 21.6162 19.1085C21.5984 19.3624 21.5009 19.6043 21.3377 19.7996C19.4012 22.1173 16.6672 23.6261 13.674 24.029C13.5491 24.0479 13.4218 24.0422 13.2992 24.0121C10.7136 23.3739 7.83188 20.132 7.83188 16.8828C7.83188 14.0132 8.84726 12.4769 9.86748 11.7697ZM9.01407 7.25984C10.0434 7.42348 10.9791 7.95314 11.6492 8.75146C11.0422 8.77677 10.442 8.88996 9.86748 9.08749C7.44144 9.89737 5.4143 12.5168 5.4143 16.8828C5.4143 19.9495 6.86364 22.0394 8.76385 23.6797C3.94442 22.315 0.34827 18.0384 0.00255686 12.8685C-0.0167921 12.5867 0.0742415 12.3084 0.256402 12.0925L0.461897 11.8556L0.853544 11.4228L1.17629 11.0832L1.3564 10.897L1.75772 10.4945L2.21464 10.0485L2.46607 9.81034C4.77485 7.63093 7.18034 6.94798 9.01407 7.25984ZM12.0626 -0.0398865C17.8165 -0.0398865 22.6299 3.97926 23.8507 9.36309C24.2859 11.279 23.7141 12.7779 22.8511 13.821C22.1768 14.6235 21.3065 15.2381 20.3247 15.6052C19.1582 16.0173 17.8467 16.0004 16.8047 15.8179C15.8739 15.6547 14.7135 15.3404 14.1418 14.5221C13.9795 14.2901 13.9038 14.0085 13.9278 13.7264C13.9519 13.4443 14.0743 13.1796 14.2735 12.9785C14.8598 12.3862 15.1305 11.7758 15.1704 11.2294C15.182 11.0104 15.1637 10.7908 15.116 10.5767C14.4125 7.40973 12.2319 5.35362 9.41902 4.87616C6.08276 4.30925 2.91695 6.03295 0.576731 8.27037C2.16266 3.44498 6.70529 -0.0398865 12.0626 -0.0398865Z", fill: "currentColor" }) }), jsx("defs", { children: jsx("clipPath", { id: "clip0_8211_8231", children: jsx("rect", { width: 24, height: 24, fill: "white" }) }) })] }))); };
 
-var css_248z$1 = "/* BrowserRecommended Component Styles */\r\n.onpe-browser-recommended {\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: 1.5rem;\r\n  padding: 0.75rem 0 1.5rem 0;\r\n  font-size: 0.75rem;\r\n  text-align: center;\r\n  color: var(--onpe-ui-blue);\r\n  background-color: rgba(105, 178, 232, 0.15); /* onpe-ui-skyblue-light/15 */\r\n}\r\n\r\n.onpe-browser-recommended .onpe-browser-list {\r\n  display: flex;\r\n  gap: 1.5rem;\r\n}\r\n\r\n.onpe-browser-recommended .onpe-browser-item {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 0.5rem;\r\n}\r\n\r\n.onpe-browser-recommended .onpe-browser-name {\r\n  display: none;\r\n  text-align: left;\r\n}\r\n\r\n/* Responsive Design */\r\n@media (min-width: 768px) {\r\n  .onpe-browser-recommended {\r\n    padding: 0.5rem 0;\r\n  }\r\n  \r\n  .onpe-browser-recommended .onpe-browser-list {\r\n    gap: 2rem;\r\n  }\r\n  \r\n  .onpe-browser-recommended .onpe-browser-name {\r\n    display: block;\r\n  }\r\n}\r\n\r\n@media (min-width: 1024px) {\r\n  .onpe-browser-recommended {\r\n    flex-direction: row;\r\n  }\r\n}\r\n";
-styleInject(css_248z$1);
-
 var BrowserRecommended = function () {
     return (jsxs("div", { className: "onpe-browser-recommended", children: [jsx("p", { children: "Navegadores recomendados:" }), jsxs("div", { className: "onpe-browser-list", children: [jsxs("div", { className: "onpe-browser-item", children: [jsx(IconChrome, {}), jsx("p", { className: "onpe-browser-name", children: "Google Chrome" })] }), jsxs("div", { className: "onpe-browser-item", children: [jsx(IconSafari, {}), jsx("p", { className: "onpe-browser-name", children: "Safari" })] }), jsxs("div", { className: "onpe-browser-item", children: [jsx(IconEdge, {}), jsx("p", { className: "onpe-browser-name", children: "Microsoft Edge" })] })] })] }));
 };
 
-var css_248z = "/* Footer Component Styles */\r\n.onpe-footer {\r\n  /* Footer base styles */\r\n}\r\n\r\n.onpe-footer-content {\r\n  /* Content wrapper styles */\r\n}\r\n\r\n.onpe-footer-contact {\r\n  position: relative;\r\n  z-index: 10;\r\n  display: flex;\r\n  width: 100%;\r\n  min-height: 100px;\r\n  background-color: var(--onpe-ui-blue);\r\n}\r\n\r\n.onpe-footer-contact-list {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: flex-start;\r\n  width: 100%;\r\n  flex-direction: column;\r\n  gap: 1.5rem;\r\n  margin: 0 auto;\r\n  padding: 3.5rem 1rem;\r\n  max-width: 1456px;\r\n}\r\n\r\n.onpe-footer-contact-item {\r\n  /* List item styles */\r\n}\r\n\r\n.onpe-footer-contact-title {\r\n  font-weight: 600;\r\n  color: var(--onpe-ui-yellow);\r\n  margin-bottom: 0.25rem;\r\n}\r\n\r\n.onpe-footer-contact-text {\r\n  font-size: 0.875rem;\r\n  font-weight: 500;\r\n  color: white;\r\n}\r\n\r\n.onpe-footer-development {\r\n  height: 93px;\r\n  width: 100%;\r\n  text-align: center;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  background-color: rgba(255, 241, 210, 0.75); /* onpe-ui-yellow-light/75 */\r\n  position: fixed;\r\n  z-index: 10;\r\n  right: 0;\r\n  bottom: 0;\r\n}\r\n\r\n.onpe-footer-development-text {\r\n  padding: 0.5rem 0.5rem;\r\n  font-size: 1.5rem;\r\n  color: var(--onpe-ui-blue);\r\n  font-family: 'Consolas', monospace;\r\n  font-weight: 900;\r\n}\r\n\r\n.onpe-footer-development-break {\r\n  display: block;\r\n}\r\n\r\n/* Responsive Design */\r\n@media (min-width: 768px) {\r\n  .onpe-footer-contact-list {\r\n    padding: 1.75rem 1rem;\r\n  }\r\n}\r\n\r\n@media (min-width: 1024px) {\r\n  .onpe-footer-contact-list {\r\n    flex-direction: row;\r\n    align-items: center;\r\n  }\r\n  \r\n  .onpe-footer-development {\r\n    height: 46px;\r\n  }\r\n  \r\n  .onpe-footer-development-break {\r\n    display: none;\r\n  }\r\n}\r\n";
-styleInject(css_248z);
-
 var Footer = function (_a) {
     var _b = _a.showBrowserInfo, showBrowserInfo = _b === void 0 ? true : _b, _c = _a.showContactInfo, showContactInfo = _c === void 0 ? true : _c, children = _a.children, _d = _a.showFooterContent, showFooterContent = _d === void 0 ? true : _d, _e = _a.isDevelopment, isDevelopment = _e === void 0 ? true : _e, props = __rest(_a, ["showBrowserInfo", "showContactInfo", "children", "showFooterContent", "isDevelopment"]);
     return (jsxs("footer", __assign({}, props, { children: [showFooterContent && (jsxs(Fragment, { children: [children && children, showBrowserInfo && jsx(BrowserRecommended, {}), showContactInfo && (jsx("div", { className: "onpe-footer-contact", children: jsxs("ul", { className: "onpe-footer-contact-list", children: [jsxs("li", { className: "onpe-footer-contact-item", children: [jsx("p", { className: "onpe-footer-contact-title", children: "Oficina central" }), jsx("p", { className: "onpe-footer-contact-text", children: "Jr. Washington 1894 - Cercado de Lima" })] }), jsxs("li", { className: "onpe-footer-contact-item", children: [jsx("p", { className: "onpe-footer-contact-title", children: "Escr\u00EDbenos" }), jsx("p", { className: "onpe-footer-contact-text", children: "informes@onpe.gob.pe" })] }), jsxs("li", { className: "onpe-footer-contact-item", children: [jsx("p", { className: "onpe-footer-contact-title", children: "Central telef\u00F3nica" }), jsx("p", { className: "onpe-footer-contact-text", children: "(01) 4170630 | Lunes a viernes de 8:30 a.m. a 4:30 p.m." })] })] }) }))] })), isDevelopment && (jsx("div", { className: "onpe-footer-development", children: jsxs("p", { className: "onpe-footer-development-text", children: ["Versi\u00F3n en Desarrollo ", jsx("br", { className: "onpe-footer-development-break" }), " - No Oficial"] }) }))] })));