@onpe/ui 1.2.33 → 1.2.35
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Button/Button.d.ts +1 -0
- package/dist/components/ErrorHandling/ModalBrowserIncompatible/ModalBrowserIncompatible.d.ts +1 -0
- package/dist/components/ErrorHandling/ModalSystemIncompatible/ModalSystemIncompatible.d.ts +1 -0
- package/dist/components/Feedback/ModalConfirm/ModalConfirm.d.ts +3 -1
- package/dist/components/Feedback/ModalLoading/ModalLoading.d.ts +1 -0
- package/dist/components/Modal/Modal.d.ts +1 -0
- package/dist/components/Overlay/Overlay.d.ts +1 -0
- package/dist/components.d.ts +2 -1
- package/dist/components.esm.js +127 -120
- package/dist/components.js +127 -120
- package/dist/index.css +72 -1932
- package/dist/index.d.ts +2 -1
- package/dist/index.esm.js +127 -120
- package/dist/index.js +127 -120
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -85,47 +85,39 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
|
|
|
85
85
|
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
|
|
86
86
|
};
|
|
87
87
|
|
|
88
|
+
function styleInject(css, ref) {
|
|
89
|
+
if ( ref === void 0 ) ref = {};
|
|
90
|
+
var insertAt = ref.insertAt;
|
|
91
|
+
|
|
92
|
+
if (!css || typeof document === 'undefined') { return; }
|
|
93
|
+
|
|
94
|
+
var head = document.head || document.getElementsByTagName('head')[0];
|
|
95
|
+
var style = document.createElement('style');
|
|
96
|
+
style.type = 'text/css';
|
|
97
|
+
|
|
98
|
+
if (insertAt === 'top') {
|
|
99
|
+
if (head.firstChild) {
|
|
100
|
+
head.insertBefore(style, head.firstChild);
|
|
101
|
+
} else {
|
|
102
|
+
head.appendChild(style);
|
|
103
|
+
}
|
|
104
|
+
} else {
|
|
105
|
+
head.appendChild(style);
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
if (style.styleSheet) {
|
|
109
|
+
style.styleSheet.cssText = css;
|
|
110
|
+
} else {
|
|
111
|
+
style.appendChild(document.createTextNode(css));
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
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";
|
|
116
|
+
styleInject(css_248z$8);
|
|
117
|
+
|
|
88
118
|
var Button = function (_a) {
|
|
89
|
-
var color = _a.color, title = _a.title,
|
|
90
|
-
|
|
91
|
-
if (color === "blue")
|
|
92
|
-
return "bg-onpe-ui-blue hover:bg-onpe-ui-blue/30";
|
|
93
|
-
if (color === "skyblue")
|
|
94
|
-
return "bg-onpe-ui-skyblue hover:bg-onpe-ui-skyblue/30";
|
|
95
|
-
if (color === "skyblue-light")
|
|
96
|
-
return "bg-onpe-ui-skyblue-light hover:bg-onpe-ui-skyblue-light/30";
|
|
97
|
-
if (color === "yellow")
|
|
98
|
-
return "bg-onpe-ui-yellow hover:bg-onpe-ui-yellow/30";
|
|
99
|
-
if (color === "light-skyblue")
|
|
100
|
-
return "bg-onpe-ui-light-skyblue hover:bg-onpe-ui-light-skyblue/30";
|
|
101
|
-
if (color === "gray")
|
|
102
|
-
return "bg-onpe-ui-gray hover:bg-onpe-ui-gray/30";
|
|
103
|
-
if (color === "gray-light")
|
|
104
|
-
return "bg-onpe-ui-gray-light hover:bg-onpe-ui-gray-light/30";
|
|
105
|
-
if (color === "gray-extra-light")
|
|
106
|
-
return "bg-onpe-ui-gray-extra-light hover:bg-onpe-ui-gray-extra-light/30";
|
|
107
|
-
if (color === "red")
|
|
108
|
-
return "bg-onpe-ui-red hover:bg-onpe-ui-red/30";
|
|
109
|
-
if (color === "dark-gray")
|
|
110
|
-
return "bg-onpe-ui-dark-gray hover:bg-onpe-ui-dark-gray/30";
|
|
111
|
-
if (color === "green")
|
|
112
|
-
return "bg-onpe-ui-green hover:bg-onpe-ui-green/30";
|
|
113
|
-
if (color === "yellow-light")
|
|
114
|
-
return "bg-onpe-ui-yellow-light hover:bg-onpe-ui-yellow-light/30";
|
|
115
|
-
if (color === "primary")
|
|
116
|
-
return "bg-onpe-ui-blue hover:bg-onpe-ui-blue/30";
|
|
117
|
-
return "";
|
|
118
|
-
};
|
|
119
|
-
var getSize = function () {
|
|
120
|
-
if (size === "small")
|
|
121
|
-
return "h-10 text-sm";
|
|
122
|
-
if (size === "normal")
|
|
123
|
-
return "h-12 text-base";
|
|
124
|
-
if (size === "large")
|
|
125
|
-
return "h-14 text-lg";
|
|
126
|
-
return "h-12 text-base"; // Por defecto es normal
|
|
127
|
-
};
|
|
128
|
-
return (jsx("button", __assign({ className: "text-white cursor-pointer disabled:cursor-not-allowed flex justify-center items-center font-semibold disabled:bg-onpe-ui-gray disabled:hover:bg-onpe-ui-gray ".concat(getColor(), " ").concat(getSize(), " transition-all duration-300 ease-in-out min-w-[200px] ").concat(className) }, props, { children: title })));
|
|
119
|
+
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"]);
|
|
120
|
+
return (jsx("button", __assign({ className: "onpe-button onpe-button-".concat(color, " onpe-button-").concat(size, " ").concat(className || "") }, props, { children: title })));
|
|
129
121
|
};
|
|
130
122
|
|
|
131
123
|
var Portal = function (_a) {
|
|
@@ -151,60 +143,90 @@ var Show = function (_a) {
|
|
|
151
143
|
return (jsxs(Fragment, { children: [condition && loadingComponent, !condition && children] }));
|
|
152
144
|
};
|
|
153
145
|
|
|
146
|
+
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";
|
|
147
|
+
styleInject(css_248z$7);
|
|
148
|
+
|
|
154
149
|
var Overlay = function (_a) {
|
|
155
150
|
var show = _a.show, onClick = _a.onClick, _b = _a.color, color = _b === void 0 ? "blue" : _b;
|
|
156
151
|
var getColorClass = function () {
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
return "bg-onpe-ui-skyblue/80";
|
|
162
|
-
case "skyblue-light":
|
|
163
|
-
return "bg-onpe-ui-skyblue-light/80";
|
|
164
|
-
case "yellow":
|
|
165
|
-
return "bg-onpe-ui-yellow/80";
|
|
166
|
-
case "light-skyblue":
|
|
167
|
-
return "bg-onpe-ui-light-skyblue/80";
|
|
168
|
-
case "gray":
|
|
169
|
-
return "bg-onpe-ui-gray/80";
|
|
170
|
-
case "gray-light":
|
|
171
|
-
return "bg-onpe-ui-gray-light/80";
|
|
172
|
-
case "gray-extra-light":
|
|
173
|
-
return "bg-onpe-ui-gray-extra-light/80";
|
|
174
|
-
case "red":
|
|
175
|
-
return "bg-onpe-ui-red/80";
|
|
176
|
-
case "dark-gray":
|
|
177
|
-
return "bg-onpe-ui-dark-gray/80";
|
|
178
|
-
case "green":
|
|
179
|
-
return "bg-onpe-ui-green/80";
|
|
180
|
-
case "yellow-light":
|
|
181
|
-
return "bg-onpe-ui-yellow-light/80";
|
|
182
|
-
case "primary":
|
|
183
|
-
return "bg-onpe-ui-blue/80";
|
|
184
|
-
default:
|
|
185
|
-
return "bg-onpe-ui-blue/80";
|
|
186
|
-
}
|
|
152
|
+
return "onpe-overlay-".concat(color);
|
|
153
|
+
};
|
|
154
|
+
var getVisibilityClass = function () {
|
|
155
|
+
return show ? "onpe-overlay-show" : "onpe-overlay-hide";
|
|
187
156
|
};
|
|
188
|
-
return
|
|
157
|
+
return jsx("div", { onClick: onClick, className: "onpe-overlay ".concat(getVisibilityClass(), " ").concat(getColorClass()) });
|
|
189
158
|
};
|
|
190
159
|
|
|
191
160
|
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" }) }))); };
|
|
192
161
|
|
|
193
|
-
var
|
|
194
|
-
|
|
195
|
-
|
|
162
|
+
var css_248z$6 = "/* Modal Component Styles */\r\n.onpe-modal-container {\r\n position: fixed;\r\n top: 0;\r\n width: 100%;\r\n height: 100vh;\r\n display: grid;\r\n place-items: center;\r\n}\r\n\r\n/* Prevenir scroll del body cuando el modal está abierto */\r\nbody.onpe-modal-open {\r\n overflow: hidden;\r\n}\r\n\r\n.onpe-modal-container.onpe-modal-open {\r\n opacity: 1;\r\n z-index: 50;\r\n}\r\n\r\n.onpe-modal-container.onpe-modal-open.onpe-modal-top-absolute {\r\n z-index: 100;\r\n}\r\n\r\n.onpe-modal-container.onpe-modal-closed {\r\n opacity: 0;\r\n z-index: -10;\r\n}\r\n\r\n.onpe-modal-content-wrapper {\r\n position: relative;\r\n z-index: 20;\r\n display: grid;\r\n place-items: center;\r\n}\r\n\r\n.onpe-modal-content {\r\n position: relative;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n\r\n.onpe-modal-content.onpe-modal-with-background {\r\n background-color: white;\r\n padding: 2.5rem 0.25rem; /* py-10 px-1 */\r\n min-width: 320px;\r\n width: 98vw;\r\n max-width: 95vw;\r\n max-height: 90vh;\r\n overflow-y: auto;\r\n scroll-behavior: smooth; /* Scroll suave */\r\n scrollbar-width: thin; /* Scrollbar más delgado */\r\n scrollbar-color: #cbd5e0 #f7fafc; /* Colores del scrollbar */\r\n transition: scroll-behavior 0.1s ease-in-out; /* Transición suave para el reset */\r\n}\r\n\r\n/* Estilos para el scrollbar en WebKit (Chrome, Safari, Edge) */\r\n.onpe-modal-content.onpe-modal-with-background::-webkit-scrollbar {\r\n width: 8px;\r\n}\r\n\r\n.onpe-modal-content.onpe-modal-with-background::-webkit-scrollbar-track {\r\n background: #f7fafc;\r\n border-radius: 4px;\r\n}\r\n\r\n.onpe-modal-content.onpe-modal-with-background::-webkit-scrollbar-thumb {\r\n background: #cbd5e0;\r\n border-radius: 4px;\r\n}\r\n\r\n.onpe-modal-content.onpe-modal-with-background::-webkit-scrollbar-thumb:hover {\r\n background: #a0aec0;\r\n}\r\n\r\n.onpe-modal-content.onpe-modal-without-background {\r\n /* Sin fondo - solo contenido */\r\n}\r\n\r\n.onpe-modal-close-button {\r\n position: absolute;\r\n top: 1rem; /* top-4 */\r\n right: 1rem; /* right-4 */\r\n border-radius: 50%;\r\n background-color: var(--onpe-ui-red);\r\n padding: 7px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n z-index: 30;\r\n border: none;\r\n cursor: pointer;\r\n}\r\n\r\n.onpe-modal-close-button:hover {\r\n background-color: rgba(227, 0, 43, 0.8); /* onpe-ui-red con hover */\r\n}\r\n\r\n.onpe-modal-close-icon {\r\n height: 10px;\r\n width: 10px;\r\n color: white;\r\n}\r\n\r\n/* Responsive Design */\r\n@media (min-width: 768px) {\r\n .onpe-modal-content.onpe-modal-with-background {\r\n padding: 2.5rem 0; /* md:px-auto */\r\n width: 500px; /* md:w-[500px] */\r\n }\r\n}\r\n\r\n@media (min-width: 1024px) {\r\n .onpe-modal-content.onpe-modal-with-background {\r\n padding: 4rem 1.25rem; /* lg:py-16 lg:px-5 */\r\n width: 1024px; /* lg:w-[1024px] */\r\n }\r\n}\r\n";
|
|
163
|
+
styleInject(css_248z$6);
|
|
164
|
+
|
|
196
165
|
var Modal = function (_a) {
|
|
197
166
|
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"]);
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
167
|
+
// Manejar el scroll del body cuando el modal está abierto
|
|
168
|
+
useEffect(function () {
|
|
169
|
+
if (isOpen) {
|
|
170
|
+
document.body.classList.add("onpe-modal-open");
|
|
171
|
+
}
|
|
172
|
+
else {
|
|
173
|
+
document.body.classList.remove("onpe-modal-open");
|
|
174
|
+
}
|
|
175
|
+
// Cleanup: remover la clase cuando el componente se desmonte
|
|
176
|
+
return function () {
|
|
177
|
+
document.body.classList.remove("onpe-modal-open");
|
|
178
|
+
};
|
|
179
|
+
}, [isOpen]);
|
|
180
|
+
// Resetear scroll del modal cuando se abre
|
|
181
|
+
useEffect(function () {
|
|
182
|
+
if (isOpen) {
|
|
183
|
+
// Resetear inmediatamente cuando se abre
|
|
184
|
+
var modalContentElement_1 = document.querySelector(".onpe-modal-content.onpe-modal-with-background");
|
|
185
|
+
if (modalContentElement_1) {
|
|
186
|
+
// Desactivar animación temporalmente para reset instantáneo
|
|
187
|
+
modalContentElement_1.style.scrollBehavior = "auto";
|
|
188
|
+
modalContentElement_1.scrollTop = 0;
|
|
189
|
+
// Reactivar animación después del reset
|
|
190
|
+
setTimeout(function () {
|
|
191
|
+
modalContentElement_1.style.scrollBehavior = "smooth";
|
|
192
|
+
}, 10);
|
|
193
|
+
}
|
|
194
|
+
// También resetear después de un pequeño delay por si acaso
|
|
195
|
+
setTimeout(function () {
|
|
196
|
+
var modalContentElementDelayed = document.querySelector(".onpe-modal-content.onpe-modal-with-background");
|
|
197
|
+
if (modalContentElementDelayed) {
|
|
198
|
+
modalContentElementDelayed.style.scrollBehavior = "auto";
|
|
199
|
+
modalContentElementDelayed.scrollTop = 0;
|
|
200
|
+
setTimeout(function () {
|
|
201
|
+
modalContentElementDelayed.style.scrollBehavior = "smooth";
|
|
202
|
+
}, 10);
|
|
203
|
+
}
|
|
204
|
+
}, 50);
|
|
205
|
+
}
|
|
206
|
+
else {
|
|
207
|
+
// Resetear scroll cuando se cierra para que no se vea la animación al reabrir
|
|
208
|
+
var modalContentElement = document.querySelector(".onpe-modal-content.onpe-modal-with-background");
|
|
209
|
+
if (modalContentElement) {
|
|
210
|
+
modalContentElement.style.scrollBehavior = "auto";
|
|
211
|
+
modalContentElement.scrollTop = 0;
|
|
212
|
+
modalContentElement.style.scrollBehavior = "smooth";
|
|
213
|
+
}
|
|
214
|
+
}
|
|
215
|
+
}, [isOpen]);
|
|
216
|
+
var getContainerClass = function () {
|
|
217
|
+
var baseClass = "onpe-modal-container";
|
|
218
|
+
if (isOpen) {
|
|
219
|
+
return topAbsolute ? "".concat(baseClass, " onpe-modal-open onpe-modal-top-absolute") : "".concat(baseClass, " onpe-modal-open");
|
|
220
|
+
}
|
|
221
|
+
return "".concat(baseClass, " onpe-modal-closed");
|
|
222
|
+
};
|
|
223
|
+
var getContentClass = function () {
|
|
224
|
+
var baseClass = "onpe-modal-content";
|
|
225
|
+
var backgroundClass = whitoutBackground ? "onpe-modal-without-background" : "onpe-modal-with-background";
|
|
226
|
+
var customClass = props.className || "";
|
|
227
|
+
return "".concat(baseClass, " ").concat(backgroundClass, " ").concat(customClass).trim();
|
|
228
|
+
};
|
|
229
|
+
return (jsx(Portal, { children: jsxs("div", { className: getContainerClass(), children: [jsx(Overlay, { show: isOpen, onClick: closeDisabled ? undefined : onClose, color: overlayColor }), jsxs("div", { className: "onpe-modal-content-wrapper", children: [jsx("div", { className: getContentClass(), children: children }), closeButton && (jsx("button", { onClick: onClose, className: "onpe-modal-close-button", "aria-label": "Cerrar", children: jsx(IconClose, { className: "onpe-modal-close-icon" }) }))] })] }) }));
|
|
208
230
|
};
|
|
209
231
|
|
|
210
232
|
var IconWarning = function (props) { return (jsxs("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "5.040041067761807 0 89.93839835728953 75.564681724846", style: {
|
|
@@ -217,15 +239,21 @@ var IconSafariColor = function (props) { return (jsxs("svg", __assign({ width: 4
|
|
|
217
239
|
|
|
218
240
|
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" }) })] })] }))); };
|
|
219
241
|
|
|
242
|
+
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";
|
|
243
|
+
styleInject(css_248z$5);
|
|
244
|
+
|
|
220
245
|
var ModalBrowserIncompatible = function (_a) {
|
|
221
246
|
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;
|
|
222
|
-
return (jsxs(Modal, { isOpen: isOpen, onClose: onClose, className: "
|
|
247
|
+
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" })] })] }));
|
|
223
248
|
};
|
|
224
249
|
|
|
225
250
|
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" }) }))); };
|
|
226
251
|
|
|
252
|
+
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); /* Color por defecto: azul */\n}\n\n/* Colores dinámicos para el icono */\n.onpe-modal-confirm-icon-blue {\n color: var(--onpe-ui-skyblue);\n}\n\n.onpe-modal-confirm-icon-red {\n color: var(--onpe-ui-red);\n}\n\n.onpe-modal-confirm-title {\n margin-top: 0.75rem; /* mt-3 */\n font-size: 1.125rem; /* text-lg */\n font-weight: 600; /* font-semibold */\n text-align: center;\n color: var(--onpe-ui-skyblue); /* Color por defecto: azul */\n}\n\n/* Colores dinámicos para el título */\n.onpe-modal-confirm-title-blue {\n color: var(--onpe-ui-skyblue);\n}\n\n.onpe-modal-confirm-title-red {\n color: var(--onpe-ui-red);\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 color: var(--onpe-ui-dark-gray); /* Usar variable CSS de ONPE, fallback a #333333 */\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";
|
|
253
|
+
styleInject(css_248z$4);
|
|
254
|
+
|
|
227
255
|
var ModalConfirm = function (_a) {
|
|
228
|
-
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 =
|
|
256
|
+
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;
|
|
229
257
|
var handleConfirm = function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
230
258
|
return __generator(this, function (_a) {
|
|
231
259
|
try {
|
|
@@ -243,16 +271,19 @@ var ModalConfirm = function (_a) {
|
|
|
243
271
|
onCancel();
|
|
244
272
|
onClose();
|
|
245
273
|
};
|
|
246
|
-
return (jsxs(Modal, { isOpen: isOpen, onClose: onClose, className: "
|
|
274
|
+
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 })] })] }));
|
|
247
275
|
};
|
|
248
276
|
|
|
249
277
|
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" }) }))); };
|
|
250
278
|
|
|
251
279
|
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" }) }))); };
|
|
252
280
|
|
|
281
|
+
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";
|
|
282
|
+
styleInject(css_248z$3);
|
|
283
|
+
|
|
253
284
|
var ModalLoading = function (_a) {
|
|
254
285
|
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;
|
|
255
|
-
return (jsxs(Modal, { isOpen: isOpen, onClose: onClose, className: className, closeDisabled: true, whitoutBackground: true, children: [jsx(IconSpinnerDesktop, { className: "
|
|
286
|
+
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 })] }));
|
|
256
287
|
};
|
|
257
288
|
|
|
258
289
|
var IconWindow = function (props) { return (jsx("svg", __assign({ width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: jsx("path", { d: "M21.7629 3.14219C21.8365 3.20154 21.8958 3.27659 21.9365 3.36184C21.9773 3.44709 21.9985 3.54039 21.9985 3.63489V11.8676H11.866V5.02304L21.2322 3.01427C21.3247 2.99429 21.4205 2.9953 21.5126 3.01722C21.6046 3.03914 21.6906 3.08141 21.7642 3.14093M10.5994 5.29409L3.50029 6.81523C3.35863 6.84566 3.23169 6.92374 3.14065 7.03646C3.0496 7.14917 2.99996 7.28969 3 7.43458V11.8676H10.5994V5.29409ZM3 13.1341V18.8337C3.00002 18.9863 3.05513 19.1337 3.1552 19.2489C3.25526 19.3641 3.39355 19.4393 3.54462 19.4606L10.5994 20.4688V13.1341H3ZM11.866 20.6499L21.2766 21.9938C21.3663 22.0065 21.4577 21.9997 21.5447 21.974C21.6316 21.9484 21.712 21.9043 21.7804 21.8449C21.8489 21.7854 21.9038 21.712 21.9414 21.6295C21.979 21.547 21.9985 21.4575 21.9985 21.3668V13.1341H11.866V20.6499Z", fill: "currentColor" }) }))); };
|
|
@@ -261,9 +292,12 @@ var IconAndroid = function (props) { return (jsx("svg", __assign({ width: 24, he
|
|
|
261
292
|
|
|
262
293
|
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" }) }))); };
|
|
263
294
|
|
|
295
|
+
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";
|
|
296
|
+
styleInject(css_248z$2);
|
|
297
|
+
|
|
264
298
|
var ModalSystemIncompatible = function (_a) {
|
|
265
299
|
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;
|
|
266
|
-
return (jsxs(Modal, { isOpen: isOpen, onClose: onClose, className: "
|
|
300
|
+
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" })] })] }));
|
|
267
301
|
};
|
|
268
302
|
|
|
269
303
|
var IconChrome = 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: [jsxs("g", { clipPath: "url(#clip2_4460_12124)", children: [jsx("path", { d: "M4.00488 3.44051C6.20217 1.58479 9.04983 0.560425 12.0001 0.564465C14.1846 0.563653 16.3279 1.12509 18.1987 2.18821C20.0696 3.25133 21.597 4.77577 22.6161 6.59708H12.0001C10.8956 6.5969 9.81579 6.90448 8.89627 7.48114C7.97674 8.0578 7.25859 8.87781 6.83208 9.8381L4.00488 3.44051Z", fill: "currentColor" }), jsx("path", { d: "M2.79194 4.62109C1.53583 6.03815 0.666731 7.72344 0.260475 9.5299C-0.145781 11.3364 -0.0768467 13.2091 0.461263 14.9846C0.999374 16.7602 1.99031 18.3847 3.34759 19.7163C4.70487 21.0478 6.38726 22.0461 8.24794 22.6239L12.7471 17.1071C11.3631 17.2831 9.95915 16.9654 8.81071 16.2163C7.66226 15.4671 6.85212 14.3407 6.53914 13.0577C6.50797 13.0141 6.48169 12.9676 6.46074 12.919L2.79194 4.62109Z", fill: "currentColor" }), jsx("path", { d: "M9.94385 23.0208C12.0087 23.3602 14.1319 23.1838 16.102 22.5093C18.0721 21.8347 19.8204 20.6856 21.1728 19.1761C22.5252 17.6667 23.4346 15.8497 23.8105 13.906C24.1864 11.9624 24.0155 9.95977 23.315 8.09766C23.2769 8.10277 23.2384 8.10529 23.1998 8.1052H15.9198C16.4526 8.59622 16.8757 9.18278 17.1642 9.83031C17.4527 10.4778 17.6009 11.1733 17.5998 11.8756C17.6033 13.2244 17.0569 14.5229 16.0734 15.5027L9.94385 23.0208Z", fill: "currentColor" }), jsx("path", { d: "M8 11.8759C8 10.8759 8.42143 9.91687 9.17157 9.20979C9.92172 8.5027 10.9391 8.10547 12 8.10547C13.0609 8.10547 14.0783 8.5027 14.8284 9.20979C15.5786 9.91687 16 10.8759 16 11.8759C16 12.8758 15.5786 13.8348 14.8284 14.5419C14.0783 15.249 13.0609 15.6462 12 15.6462C10.9391 15.6462 9.92172 15.249 9.17157 14.5419C8.42143 13.8348 8 12.8758 8 11.8759Z", fill: "currentColor" })] }), jsx("defs", { children: jsx("clipPath", { id: "clip2_4460_12124", children: jsx("rect", { width: 24, height: 22.6223, fill: "white", transform: "translate(0 0.564453)" }) }) })] }))); };
|
|
@@ -272,46 +306,19 @@ var IconSafari = function (props) { return (jsxs("svg", __assign({ width: 24, he
|
|
|
272
306
|
|
|
273
307
|
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" }) }) })] }))); };
|
|
274
308
|
|
|
275
|
-
|
|
276
|
-
if ( ref === void 0 ) ref = {};
|
|
277
|
-
var insertAt = ref.insertAt;
|
|
278
|
-
|
|
279
|
-
if (!css || typeof document === 'undefined') { return; }
|
|
280
|
-
|
|
281
|
-
var head = document.head || document.getElementsByTagName('head')[0];
|
|
282
|
-
var style = document.createElement('style');
|
|
283
|
-
style.type = 'text/css';
|
|
284
|
-
|
|
285
|
-
if (insertAt === 'top') {
|
|
286
|
-
if (head.firstChild) {
|
|
287
|
-
head.insertBefore(style, head.firstChild);
|
|
288
|
-
} else {
|
|
289
|
-
head.appendChild(style);
|
|
290
|
-
}
|
|
291
|
-
} else {
|
|
292
|
-
head.appendChild(style);
|
|
293
|
-
}
|
|
294
|
-
|
|
295
|
-
if (style.styleSheet) {
|
|
296
|
-
style.styleSheet.cssText = css;
|
|
297
|
-
} else {
|
|
298
|
-
style.appendChild(document.createTextNode(css));
|
|
299
|
-
}
|
|
300
|
-
}
|
|
301
|
-
|
|
302
|
-
var css_248z$1 = "/* BrowserRecommended Component Styles */\r\n.onpe-ui-container .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-ui-container .onpe-browser-recommended .onpe-browser-list {\r\n display: flex;\r\n gap: 1.5rem;\r\n}\r\n\r\n.onpe-ui-container .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-ui-container .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-ui-container .onpe-browser-recommended {\r\n padding: 0.5rem 0;\r\n }\r\n \r\n .onpe-ui-container .onpe-browser-recommended .onpe-browser-list {\r\n gap: 2rem;\r\n }\r\n \r\n .onpe-ui-container .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-ui-container .onpe-browser-recommended {\r\n flex-direction: row;\r\n }\r\n}\r\n";
|
|
309
|
+
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";
|
|
303
310
|
styleInject(css_248z$1);
|
|
304
311
|
|
|
305
312
|
var BrowserRecommended = function () {
|
|
306
|
-
return (
|
|
313
|
+
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" })] })] })] }));
|
|
307
314
|
};
|
|
308
315
|
|
|
309
|
-
var css_248z = "/* Footer Component Styles */\r\n.onpe-
|
|
316
|
+
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";
|
|
310
317
|
styleInject(css_248z);
|
|
311
318
|
|
|
312
319
|
var Footer = function (_a) {
|
|
313
320
|
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"]);
|
|
314
|
-
return (
|
|
321
|
+
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"] }) }))] })));
|
|
315
322
|
};
|
|
316
323
|
|
|
317
324
|
/**
|