webs-sdk 0.18.25 → 0.18.26

package/dist/components/Quiz.js

@@ -1,9 +1,41 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Quiz = Quiz;
 exports.QuizForYouCard = QuizForYouCard;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
+const react_1 = __importStar(require("react"));
 function parseMeta(raw) {
     if (!raw)
         return {};
@@ -154,7 +186,7 @@ function normalizeResponse(json) {
 }
 function QuizCard({ quiz, index, theme, texts, onClick }) {
     const [hovered, setHovered] = (0, react_1.useState)(false);
-    return ((0, jsx_runtime_1.jsxs)("div", { onClick: onClick, onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), style: {
+    return (react_1.default.createElement("div", { onClick: onClick, onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), style: {
             backgroundColor: theme.cardBackground,
             border: `1.5px solid ${hovered ? theme.primaryColor : theme.cardBorderColor}`,
             borderRadius: '16px',
@@ -165,57 +197,62 @@ function QuizCard({ quiz, index, theme, texts, onClick }) {
             boxShadow: hovered ? '0 8px 24px rgba(0,0,0,0.12)' : '0 2px 8px rgba(0,0,0,0.06)',
             display: 'flex',
             flexDirection: 'column',
-        }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
-                    width: '100%',
-                    aspectRatio: '16/9',
-                    backgroundColor: theme.backgroundColor,
+        } },
+        react_1.default.createElement("div", { style: {
+                width: '100%',
+                aspectRatio: '16/9',
+                backgroundColor: theme.backgroundColor,
+                overflow: 'hidden',
+                position: 'relative',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+            } }, quiz.thumbnail ? (react_1.default.createElement("img", { src: quiz.thumbnail, alt: quiz.title, style: { width: '100%', height: '100%', objectFit: 'cover' } })) : (react_1.default.createElement("div", { style: {
+                width: '56px',
+                height: '56px',
+                borderRadius: '50%',
+                backgroundColor: theme.primaryColor,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                color: theme.buttonTextColor,
+                fontSize: '24px',
+                fontWeight: 700,
+            } }, index + 1))),
+        react_1.default.createElement("div", { style: { padding: '16px', flex: 1, display: 'flex', flexDirection: 'column', gap: '8px' } },
+            react_1.default.createElement("p", { style: {
+                    color: theme.textColor,
+                    fontSize: '15px',
+                    lineHeight: 1.4,
+                    margin: 0,
+                    fontWeight: 700,
+                    display: '-webkit-box',
+                    WebkitLineClamp: 2,
+                    WebkitBoxOrient: 'vertical',
                     overflow: 'hidden',
-                    position: 'relative',
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                }, children: quiz.thumbnail ? ((0, jsx_runtime_1.jsx)("img", { src: quiz.thumbnail, alt: quiz.title, style: { width: '100%', height: '100%', objectFit: 'cover' } })) : ((0, jsx_runtime_1.jsx)("div", { style: {
-                        width: '56px',
-                        height: '56px',
-                        borderRadius: '50%',
-                        backgroundColor: theme.primaryColor,
-                        display: 'flex',
-                        alignItems: 'center',
-                        justifyContent: 'center',
-                        color: theme.buttonTextColor,
-                        fontSize: '24px',
-                        fontWeight: 700,
-                    }, children: index + 1 })) }), (0, jsx_runtime_1.jsxs)("div", { style: { padding: '16px', flex: 1, display: 'flex', flexDirection: 'column', gap: '8px' }, children: [(0, jsx_runtime_1.jsx)("p", { style: {
-                            color: theme.textColor,
-                            fontSize: '15px',
-                            lineHeight: 1.4,
-                            margin: 0,
-                            fontWeight: 700,
-                            display: '-webkit-box',
-                            WebkitLineClamp: 2,
-                            WebkitBoxOrient: 'vertical',
-                            overflow: 'hidden',
-                        }, children: quiz.title }), quiz.description && ((0, jsx_runtime_1.jsx)("p", { style: {
-                            color: theme.neutralMid,
-                            fontSize: '13px',
-                            lineHeight: 1.4,
-                            margin: 0,
-                            display: '-webkit-box',
-                            WebkitLineClamp: 2,
-                            WebkitBoxOrient: 'vertical',
-                            overflow: 'hidden',
-                        }, children: quiz.description })), (0, jsx_runtime_1.jsx)("button", { style: {
-                            marginTop: 'auto',
-                            padding: '8px 16px',
-                            borderRadius: '20px',
-                            border: 'none',
-                            backgroundColor: theme.buttonColor,
-                            color: theme.buttonTextColor,
-                            fontSize: '13px',
-                            fontWeight: 600,
-                            cursor: 'pointer',
-                            transition: 'opacity 0.2s',
-                        }, onMouseEnter: (e) => { e.currentTarget.style.opacity = '0.85'; }, onMouseLeave: (e) => { e.currentTarget.style.opacity = '1'; }, children: texts.startQuiz })] })] }));
+                } }, quiz.title),
+            quiz.description && (react_1.default.createElement("p", { style: {
+                    color: theme.neutralMid,
+                    fontSize: '13px',
+                    lineHeight: 1.4,
+                    margin: 0,
+                    display: '-webkit-box',
+                    WebkitLineClamp: 2,
+                    WebkitBoxOrient: 'vertical',
+                    overflow: 'hidden',
+                } }, quiz.description)),
+            react_1.default.createElement("button", { style: {
+                    marginTop: 'auto',
+                    padding: '8px 16px',
+                    borderRadius: '20px',
+                    border: 'none',
+                    backgroundColor: theme.buttonColor,
+                    color: theme.buttonTextColor,
+                    fontSize: '13px',
+                    fontWeight: 600,
+                    cursor: 'pointer',
+                    transition: 'opacity 0.2s',
+                }, onMouseEnter: (e) => { e.currentTarget.style.opacity = '0.85'; }, onMouseLeave: (e) => { e.currentTarget.style.opacity = '1'; } }, texts.startQuiz))));
 }
 function QuizModal({ questions, results, startIndex, theme, texts, onClose }) {
     var _a;
@@ -306,67 +343,9 @@ function QuizModal({ questions, results, startIndex, theme, texts, onClose }) {
             const matchedResult = results.find(r => score >= r.minPoints && score <= r.maxPoints);
             resultMessage = matchedResult === null || matchedResult === void 0 ? void 0 : matchedResult.description;
         }
-        return ((0, jsx_runtime_1.jsx)("div", { style: overlayStyle, onClick: handleOverlayClick, children: (0, jsx_runtime_1.jsxs)("div", { style: modalStyle, children: [(0, jsx_runtime_1.jsx)("button", { onClick: onClose, "aria-label": texts.closeButton, style: {
-                            position: 'absolute',
-                            top: '16px',
-                            right: '16px',
-                            background: 'none',
-                            border: 'none',
-                            cursor: 'pointer',
-                            color: theme.neutralMid,
-                            fontSize: '20px',
-                            lineHeight: 1,
-                        }, children: "\u2715" }), (0, jsx_runtime_1.jsxs)("div", { style: { textAlign: 'center', paddingTop: '8px' }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
-                                    width: '80px',
-                                    height: '80px',
-                                    borderRadius: '50%',
-                                    backgroundColor: theme.primaryColor,
-                                    margin: '0 auto 20px',
-                                    display: 'flex',
-                                    alignItems: 'center',
-                                    justifyContent: 'center',
-                                    fontSize: '32px',
-                                    color: theme.buttonTextColor,
-                                }, children: "\uD83C\uDFC6" }), isQuizPointsBased ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("p", { style: {
-                                            fontSize: '18px',
-                                            fontWeight: 600,
-                                            color: theme.textColor,
-                                            margin: '0 0 16px',
-                                        }, children: formatLabel(texts.scoreLabel, { score, total: score }) }), resultMessage && ((0, jsx_runtime_1.jsx)("p", { style: {
-                                            fontSize: '15px',
-                                            lineHeight: 1.6,
-                                            color: theme.neutralMid,
-                                            margin: 0,
-                                            textAlign: 'left',
-                                        }, children: resultMessage }))] })) : ((0, jsx_runtime_1.jsx)("p", { style: {
-                                    fontSize: '22px',
-                                    fontWeight: 700,
-                                    color: theme.textColor,
-                                    margin: '0 0 8px',
-                                }, children: formatLabel(texts.scoreLabel, { score, total }) }))] }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', gap: '12px', marginTop: '8px' }, children: [(0, jsx_runtime_1.jsx)("button", { onClick: handleRetry, style: {
-                                    flex: 1,
-                                    padding: '12px',
-                                    borderRadius: '12px',
-                                    border: `1.5px solid ${theme.primaryColor}`,
-                                    backgroundColor: 'transparent',
-                                    color: theme.primaryColor,
-                                    fontWeight: 600,
-                                    cursor: 'pointer',
-                                    fontSize: '14px',
-                                }, children: texts.retryButton }), (0, jsx_runtime_1.jsx)("button", { onClick: onClose, style: {
-                                    flex: 1,
-                                    padding: '12px',
-                                    borderRadius: '12px',
-                                    border: 'none',
-                                    backgroundColor: theme.primaryColor,
-                                    color: theme.buttonTextColor,
-                                    fontWeight: 600,
-                                    cursor: 'pointer',
-                                    fontSize: '14px',
-                                }, children: texts.closeButton })] })] }) }));
-    }
-    const isCorrect = !isPointsBased && selectedOption !== null && selectedOption === current.correctIndex;
-    return ((0, jsx_runtime_1.jsx)("div", { style: overlayStyle, onClick: handleOverlayClick, children: (0, jsx_runtime_1.jsxs)("div", { style: modalStyle, children: [(0, jsx_runtime_1.jsx)("button", { onClick: onClose, "aria-label": texts.closeButton, style: {
+        return (react_1.default.createElement("div", { style: overlayStyle, onClick: handleOverlayClick },
+            react_1.default.createElement("div", { style: modalStyle },
+                react_1.default.createElement("button", { onClick: onClose, "aria-label": texts.closeButton, style: {
                         position: 'absolute',
                         top: '16px',
                         right: '16px',
@@ -376,98 +355,185 @@ function QuizModal({ questions, results, startIndex, theme, texts, onClose }) {
                         color: theme.neutralMid,
                         fontSize: '20px',
                         lineHeight: 1,
-                    }, children: "\u2715" }), (0, jsx_runtime_1.jsxs)("div", { style: { paddingTop: '4px' }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
-                                display: 'flex',
-                                justifyContent: 'space-between',
-                                alignItems: 'center',
-                                marginBottom: '8px',
-                            }, children: (0, jsx_runtime_1.jsx)("span", { style: { fontSize: '12px', color: theme.neutralMid }, children: formatLabel(texts.questionLabel, { current: currentIndex + 1, total }) }) }), (0, jsx_runtime_1.jsx)("div", { style: {
-                                height: '4px',
-                                borderRadius: '2px',
-                                backgroundColor: theme.cardBorderColor,
-                                overflow: 'hidden',
-                            }, children: (0, jsx_runtime_1.jsx)("div", { style: {
-                                    height: '100%',
-                                    width: `${((currentIndex + 1) / total) * 100}%`,
-                                    backgroundColor: theme.primaryColor,
-                                    transition: 'width 0.3s',
-                                } }) })] }), current.thumbnail && ((0, jsx_runtime_1.jsx)("div", { style: {
-                        borderRadius: '12px',
-                        overflow: 'hidden',
-                        aspectRatio: '16/9',
-                    }, children: (0, jsx_runtime_1.jsx)("img", { src: current.thumbnail, alt: current.question, style: { width: '100%', height: '100%', objectFit: 'cover' } }) })), (0, jsx_runtime_1.jsx)("p", { style: {
-                        fontSize: '18px',
-                        fontWeight: 700,
-                        color: theme.textColor,
-                        margin: 0,
-                        lineHeight: 1.45,
-                    }, children: current.question }), (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flexDirection: 'column', gap: '10px' }, children: current.options.map((option, idx) => {
-                        let bg = theme.cardBackground;
-                        let border = theme.cardBorderColor;
-                        let color = theme.textColor;
-                        const hasAnswer = selectedOption !== null;
-                        if (hasAnswer && !isPointsBased) {
-                            if (idx === current.correctIndex) {
-                                bg = '#E8F5E9';
-                                border = '#4CAF50';
-                                color = '#1B5E20';
-                            }
-                            else if (idx === selectedOption) {
-                                bg = '#FFEBEE';
-                                border = '#F44336';
-                                color = '#B71C1C';
-                            }
-                        }
-                        else if (idx === selectedOption) {
-                            bg = theme.primaryColor;
-                            color = theme.buttonTextColor;
-                            border = theme.primaryColor;
-                        }
-                        return ((0, jsx_runtime_1.jsx)("button", { onClick: () => handleSelect(idx), style: {
-                                padding: '12px 16px',
-                                borderRadius: '12px',
-                                border: `1.5px solid ${border}`,
-                                backgroundColor: bg,
-                                color,
-                                fontSize: '14px',
-                                fontWeight: 500,
+                    } }, "\u2715"),
+                react_1.default.createElement("div", { style: { textAlign: 'center', paddingTop: '8px' } },
+                    react_1.default.createElement("div", { style: {
+                            width: '80px',
+                            height: '80px',
+                            borderRadius: '50%',
+                            backgroundColor: theme.primaryColor,
+                            margin: '0 auto 20px',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            fontSize: '32px',
+                            color: theme.buttonTextColor,
+                        } }, "\uD83C\uDFC6"),
+                    isQuizPointsBased ? (react_1.default.createElement(react_1.default.Fragment, null,
+                        react_1.default.createElement("p", { style: {
+                                fontSize: '18px',
+                                fontWeight: 600,
+                                color: theme.textColor,
+                                margin: '0 0 16px',
+                            } }, formatLabel(texts.scoreLabel, { score, total: score })),
+                        resultMessage && (react_1.default.createElement("p", { style: {
+                                fontSize: '15px',
+                                lineHeight: 1.6,
+                                color: theme.neutralMid,
+                                margin: 0,
                                 textAlign: 'left',
-                                cursor: 'pointer',
-                                transition: 'all 0.2s',
-                                lineHeight: 1.5,
-                            }, children: option.text }, idx));
-                    }) }), selectedOption !== null && !isPointsBased && ((0, jsx_runtime_1.jsxs)("p", { style: {
+                            } }, resultMessage)))) : (react_1.default.createElement("p", { style: {
+                            fontSize: '22px',
+                            fontWeight: 700,
+                            color: theme.textColor,
+                            margin: '0 0 8px',
+                        } }, formatLabel(texts.scoreLabel, { score, total })))),
+                react_1.default.createElement("div", { style: { display: 'flex', gap: '12px', marginTop: '8px' } },
+                    react_1.default.createElement("button", { onClick: handleRetry, style: {
+                            flex: 1,
+                            padding: '12px',
+                            borderRadius: '12px',
+                            border: `1.5px solid ${theme.primaryColor}`,
+                            backgroundColor: 'transparent',
+                            color: theme.primaryColor,
+                            fontWeight: 600,
+                            cursor: 'pointer',
+                            fontSize: '14px',
+                        } }, texts.retryButton),
+                    react_1.default.createElement("button", { onClick: onClose, style: {
+                            flex: 1,
+                            padding: '12px',
+                            borderRadius: '12px',
+                            border: 'none',
+                            backgroundColor: theme.primaryColor,
+                            color: theme.buttonTextColor,
+                            fontWeight: 600,
+                            cursor: 'pointer',
+                            fontSize: '14px',
+                        } }, texts.closeButton)))));
+    }
+    const isCorrect = !isPointsBased && selectedOption !== null && selectedOption === current.correctIndex;
+    return (react_1.default.createElement("div", { style: overlayStyle, onClick: handleOverlayClick },
+        react_1.default.createElement("div", { style: modalStyle },
+            react_1.default.createElement("button", { onClick: onClose, "aria-label": texts.closeButton, style: {
+                    position: 'absolute',
+                    top: '16px',
+                    right: '16px',
+                    background: 'none',
+                    border: 'none',
+                    cursor: 'pointer',
+                    color: theme.neutralMid,
+                    fontSize: '20px',
+                    lineHeight: 1,
+                } }, "\u2715"),
+            react_1.default.createElement("div", { style: { paddingTop: '4px' } },
+                react_1.default.createElement("div", { style: {
+                        display: 'flex',
+                        justifyContent: 'space-between',
+                        alignItems: 'center',
+                        marginBottom: '8px',
+                    } },
+                    react_1.default.createElement("span", { style: { fontSize: '12px', color: theme.neutralMid } }, formatLabel(texts.questionLabel, { current: currentIndex + 1, total }))),
+                react_1.default.createElement("div", { style: {
+                        height: '4px',
+                        borderRadius: '2px',
+                        backgroundColor: theme.cardBorderColor,
+                        overflow: 'hidden',
+                    } },
+                    react_1.default.createElement("div", { style: {
+                            height: '100%',
+                            width: `${((currentIndex + 1) / total) * 100}%`,
+                            backgroundColor: theme.primaryColor,
+                            transition: 'width 0.3s',
+                        } }))),
+            current.thumbnail && (react_1.default.createElement("div", { style: {
+                    borderRadius: '12px',
+                    overflow: 'hidden',
+                    aspectRatio: '16/9',
+                } },
+                react_1.default.createElement("img", { src: current.thumbnail, alt: current.question, style: { width: '100%', height: '100%', objectFit: 'cover' } }))),
+            react_1.default.createElement("p", { style: {
+                    fontSize: '18px',
+                    fontWeight: 700,
+                    color: theme.textColor,
+                    margin: 0,
+                    lineHeight: 1.45,
+                } }, current.question),
+            react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '10px' } }, current.options.map((option, idx) => {
+                let bg = theme.cardBackground;
+                let border = theme.cardBorderColor;
+                let color = theme.textColor;
+                const hasAnswer = selectedOption !== null;
+                if (hasAnswer && !isPointsBased) {
+                    if (idx === current.correctIndex) {
+                        bg = '#E8F5E9';
+                        border = '#4CAF50';
+                        color = '#1B5E20';
+                    }
+                    else if (idx === selectedOption) {
+                        bg = '#FFEBEE';
+                        border = '#F44336';
+                        color = '#B71C1C';
+                    }
+                }
+                else if (idx === selectedOption) {
+                    bg = theme.primaryColor;
+                    color = theme.buttonTextColor;
+                    border = theme.primaryColor;
+                }
+                return (react_1.default.createElement("button", { key: idx, onClick: () => handleSelect(idx), style: {
+                        padding: '12px 16px',
+                        borderRadius: '12px',
+                        border: `1.5px solid ${border}`,
+                        backgroundColor: bg,
+                        color,
                         fontSize: '14px',
-                        fontWeight: 600,
-                        color: isCorrect ? '#2E7D32' : '#C62828',
-                        margin: 0,
-                    }, children: [isCorrect ? texts.correctAnswer : texts.wrongAnswer, current.explanation && ((0, jsx_runtime_1.jsx)("span", { style: { fontWeight: 400, display: 'block', marginTop: 4 }, children: current.explanation }))] })), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', gap: '12px' }, children: [currentIndex > 0 && ((0, jsx_runtime_1.jsxs)("button", { onClick: handlePrevious, style: {
-                                flex: 1,
-                                padding: '14px',
-                                borderRadius: '12px',
-                                border: `1.5px solid ${theme.primaryColor}`,
-                                backgroundColor: 'transparent',
-                                color: theme.primaryColor,
-                                fontWeight: 700,
-                                fontSize: '15px',
-                                cursor: 'pointer',
-                                transition: 'opacity 0.2s',
-                            }, onMouseEnter: (e) => { e.currentTarget.style.opacity = '0.85'; }, onMouseLeave: (e) => { e.currentTarget.style.opacity = '1'; }, children: ["\u2190 ", texts.previousButton] })), (0, jsx_runtime_1.jsx)("button", { onClick: handleNext, disabled: selectedOption === null, style: {
-                                flex: currentIndex > 0 ? 1 : 'auto',
-                                width: currentIndex === 0 ? '100%' : 'auto',
-                                padding: '14px',
-                                borderRadius: '12px',
-                                border: 'none',
-                                backgroundColor: selectedOption === null ? theme.neutralMid : theme.primaryColor,
-                                color: theme.buttonTextColor,
-                                fontWeight: 700,
-                                fontSize: '15px',
-                                cursor: selectedOption === null ? 'not-allowed' : 'pointer',
-                                transition: 'opacity 0.2s',
-                                opacity: selectedOption === null ? 0.5 : 1,
-                            }, onMouseEnter: (e) => { if (selectedOption !== null)
-                                e.currentTarget.style.opacity = '0.85'; }, onMouseLeave: (e) => { if (selectedOption !== null)
-                                e.currentTarget.style.opacity = '1'; }, children: currentIndex + 1 >= total ? texts.submitButton : texts.nextButton })] })] }) }));
+                        fontWeight: 500,
+                        textAlign: 'left',
+                        cursor: 'pointer',
+                        transition: 'all 0.2s',
+                        lineHeight: 1.5,
+                    } }, option.text));
+            })),
+            selectedOption !== null && !isPointsBased && (react_1.default.createElement("p", { style: {
+                    fontSize: '14px',
+                    fontWeight: 600,
+                    color: isCorrect ? '#2E7D32' : '#C62828',
+                    margin: 0,
+                } },
+                isCorrect ? texts.correctAnswer : texts.wrongAnswer,
+                current.explanation && (react_1.default.createElement("span", { style: { fontWeight: 400, display: 'block', marginTop: 4 } }, current.explanation)))),
+            react_1.default.createElement("div", { style: { display: 'flex', gap: '12px' } },
+                currentIndex > 0 && (react_1.default.createElement("button", { onClick: handlePrevious, style: {
+                        flex: 1,
+                        padding: '14px',
+                        borderRadius: '12px',
+                        border: `1.5px solid ${theme.primaryColor}`,
+                        backgroundColor: 'transparent',
+                        color: theme.primaryColor,
+                        fontWeight: 700,
+                        fontSize: '15px',
+                        cursor: 'pointer',
+                        transition: 'opacity 0.2s',
+                    }, onMouseEnter: (e) => { e.currentTarget.style.opacity = '0.85'; }, onMouseLeave: (e) => { e.currentTarget.style.opacity = '1'; } },
+                    "\u2190 ",
+                    texts.previousButton)),
+                react_1.default.createElement("button", { onClick: handleNext, disabled: selectedOption === null, style: {
+                        flex: currentIndex > 0 ? 1 : 'auto',
+                        width: currentIndex === 0 ? '100%' : 'auto',
+                        padding: '14px',
+                        borderRadius: '12px',
+                        border: 'none',
+                        backgroundColor: selectedOption === null ? theme.neutralMid : theme.primaryColor,
+                        color: theme.buttonTextColor,
+                        fontWeight: 700,
+                        fontSize: '15px',
+                        cursor: selectedOption === null ? 'not-allowed' : 'pointer',
+                        transition: 'opacity 0.2s',
+                        opacity: selectedOption === null ? 0.5 : 1,
+                    }, onMouseEnter: (e) => { if (selectedOption !== null)
+                        e.currentTarget.style.opacity = '0.85'; }, onMouseLeave: (e) => { if (selectedOption !== null)
+                        e.currentTarget.style.opacity = '1'; } }, currentIndex + 1 >= total ? texts.submitButton : texts.nextButton)))));
 }
 const DEFAULT_THEME = {
     primaryColor: '#FF2273',
@@ -593,68 +659,87 @@ function Quiz({ config, theme: themeP, texts: textsP, onQuizStart, onQuizComplet
     }, []);
     const visible = quizItems.slice(0, visibleCount);
     const hasMore = visibleCount < quizItems.length;
-    return ((0, jsx_runtime_1.jsxs)("div", { style: { backgroundColor: theme.backgroundColor, minHeight: '100vh' }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { padding: '40px 16px', maxWidth: '1200px', margin: '0 auto' }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { textAlign: 'center', marginBottom: '32px' }, children: [(0, jsx_runtime_1.jsx)("h2", { style: {
-                                    fontSize: '28px',
-                                    fontWeight: 700,
-                                    color: theme.titleDarkColor,
-                                    margin: '0 0 8px',
-                                }, children: texts.title }), texts.subtitle && ((0, jsx_runtime_1.jsx)("p", { style: {
-                                    fontSize: '16px',
-                                    color: theme.neutralMid,
-                                    margin: 0,
-                                }, children: texts.subtitle }))] }), loading ? ((0, jsx_runtime_1.jsx)("div", { style: { textAlign: 'center', padding: '40px', color: theme.neutralMid }, children: texts.loading })) : quizItems.length === 0 ? ((0, jsx_runtime_1.jsx)("div", { style: { textAlign: 'center', padding: '40px', color: theme.neutralMid }, children: texts.noItems })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: {
-                                    display: 'grid',
-                                    gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))',
-                                    gap: '20px',
-                                    marginBottom: '32px',
-                                }, children: visible.map((quiz, idx) => ((0, jsx_runtime_1.jsx)(QuizCard, { quiz: quiz, index: idx, theme: theme, texts: texts, onClick: () => handleCardClick(quiz) }, quiz.id))) }), hasMore && ((0, jsx_runtime_1.jsx)("div", { style: { textAlign: 'center' }, children: (0, jsx_runtime_1.jsx)("button", { onClick: () => setVisibleCount(v => v + loadMoreCount), style: {
-                                        padding: '12px 32px',
-                                        borderRadius: '24px',
-                                        border: `1.5px solid ${theme.primaryColor}`,
-                                        backgroundColor: 'transparent',
-                                        color: theme.primaryColor,
-                                        fontWeight: 600,
-                                        fontSize: '15px',
-                                        cursor: 'pointer',
-                                        transition: 'all 0.2s',
-                                    }, onMouseEnter: (e) => {
-                                        e.currentTarget.style.backgroundColor = theme.primaryColor;
-                                        e.currentTarget.style.color = theme.buttonTextColor;
-                                    }, onMouseLeave: (e) => {
-                                        e.currentTarget.style.backgroundColor = 'transparent';
-                                        e.currentTarget.style.color = theme.primaryColor;
-                                    }, children: texts.loadMore }) }))] }))] }), activeQuiz && loadingQuestions && ((0, jsx_runtime_1.jsx)("div", { style: {
-                    position: 'fixed',
-                    inset: 0,
-                    zIndex: 9999,
-                    backgroundColor: 'rgba(0,0,0,0.6)',
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                }, children: (0, jsx_runtime_1.jsx)("div", { style: {
-                        backgroundColor: theme.cardBackground,
-                        borderRadius: '20px',
-                        padding: '40px',
-                        textAlign: 'center',
-                        color: theme.textColor,
-                    }, children: texts.loadingQuestions }) })), activeQuiz && !loadingQuestions && activeQuestions.length > 0 && ((0, jsx_runtime_1.jsx)(QuizModal, { questions: activeQuestions, results: activeResults, startIndex: 0, theme: theme, texts: texts, onClose: handleCloseModal }))] }));
+    return (react_1.default.createElement("div", { style: { backgroundColor: theme.backgroundColor, minHeight: '100vh' } },
+        react_1.default.createElement("div", { style: { padding: '40px 16px', maxWidth: '1200px', margin: '0 auto' } },
+            react_1.default.createElement("div", { style: { textAlign: 'center', marginBottom: '32px' } },
+                react_1.default.createElement("h2", { style: {
+                        fontSize: '28px',
+                        fontWeight: 700,
+                        color: theme.titleDarkColor,
+                        margin: '0 0 8px',
+                    } }, texts.title),
+                texts.subtitle && (react_1.default.createElement("p", { style: {
+                        fontSize: '16px',
+                        color: theme.neutralMid,
+                        margin: 0,
+                    } }, texts.subtitle))),
+            loading ? (react_1.default.createElement("div", { style: { textAlign: 'center', padding: '40px', color: theme.neutralMid } }, texts.loading)) : quizItems.length === 0 ? (react_1.default.createElement("div", { style: { textAlign: 'center', padding: '40px', color: theme.neutralMid } }, texts.noItems)) : (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement("div", { style: {
+                        display: 'grid',
+                        gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))',
+                        gap: '20px',
+                        marginBottom: '32px',
+                    } }, visible.map((quiz, idx) => (react_1.default.createElement(QuizCard, { key: quiz.id, quiz: quiz, index: idx, theme: theme, texts: texts, onClick: () => handleCardClick(quiz) })))),
+                hasMore && (react_1.default.createElement("div", { style: { textAlign: 'center' } },
+                    react_1.default.createElement("button", { onClick: () => setVisibleCount(v => v + loadMoreCount), style: {
+                            padding: '12px 32px',
+                            borderRadius: '24px',
+                            border: `1.5px solid ${theme.primaryColor}`,
+                            backgroundColor: 'transparent',
+                            color: theme.primaryColor,
+                            fontWeight: 600,
+                            fontSize: '15px',
+                            cursor: 'pointer',
+                            transition: 'all 0.2s',
+                        }, onMouseEnter: (e) => {
+                            e.currentTarget.style.backgroundColor = theme.primaryColor;
+                            e.currentTarget.style.color = theme.buttonTextColor;
+                        }, onMouseLeave: (e) => {
+                            e.currentTarget.style.backgroundColor = 'transparent';
+                            e.currentTarget.style.color = theme.primaryColor;
+                        } }, texts.loadMore)))))),
+        activeQuiz && loadingQuestions && (react_1.default.createElement("div", { style: {
+                position: 'fixed',
+                inset: 0,
+                zIndex: 9999,
+                backgroundColor: 'rgba(0,0,0,0.6)',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+            } },
+            react_1.default.createElement("div", { style: {
+                    backgroundColor: theme.cardBackground,
+                    borderRadius: '20px',
+                    padding: '40px',
+                    textAlign: 'center',
+                    color: theme.textColor,
+                } }, texts.loadingQuestions))),
+        activeQuiz && !loadingQuestions && activeQuestions.length > 0 && (react_1.default.createElement(QuizModal, { questions: activeQuestions, results: activeResults, startIndex: 0, theme: theme, texts: texts, onClose: handleCloseModal }))));
 }
 function QuizForYouCard({ title, description, ctaText, ctaHref, desktopImage, mobileImage, imageAlt = '', imageOnRight = false, titleColor = '#210F5C', descriptionColor = '#0F1F35', ctaColor = '#FF2273', ctaHoverColor = '#E81F69', backgroundColor = '#FFFFFF', paddingClass = '', }) {
-    return ((0, jsx_runtime_1.jsx)("div", { style: { backgroundColor, width: '100%' }, className: paddingClass, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+    return (react_1.default.createElement("div", { style: { backgroundColor, width: '100%' }, className: paddingClass },
+        react_1.default.createElement("div", { style: {
                 display: 'flex',
                 flexDirection: imageOnRight ? 'row-reverse' : 'row',
                 minHeight: '420px',
                 alignItems: 'stretch',
-            }, children: [(0, jsx_runtime_1.jsx)("div", { style: { flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '40px' }, children: (0, jsx_runtime_1.jsxs)("div", { style: { maxWidth: '400px', textAlign: 'center' }, children: [(0, jsx_runtime_1.jsx)("h2", { style: { color: titleColor, fontSize: '32px', fontWeight: 700, marginBottom: '16px' }, children: title }), (0, jsx_runtime_1.jsx)("p", { style: { color: descriptionColor, fontSize: '16px', marginBottom: '24px' }, children: description }), (0, jsx_runtime_1.jsx)("a", { href: ctaHref, style: {
-                                    display: 'inline-block',
-                                    padding: '12px 32px',
-                                    borderRadius: '24px',
-                                    backgroundColor: ctaColor,
-                                    color: '#fff',
-                                    textDecoration: 'none',
-                                    fontWeight: 600,
-                                    transition: 'background-color 0.2s',
-                                }, onMouseEnter: (e) => { e.currentTarget.style.backgroundColor = ctaHoverColor; }, onMouseLeave: (e) => { e.currentTarget.style.backgroundColor = ctaColor; }, children: ctaText })] }) }), (0, jsx_runtime_1.jsx)("div", { style: { flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '20px' }, children: (0, jsx_runtime_1.jsx)("img", { src: desktopImage, alt: imageAlt, style: { maxWidth: '100%', height: 'auto' } }) })] }) }));
+            } },
+            react_1.default.createElement("div", { style: { flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '40px' } },
+                react_1.default.createElement("div", { style: { maxWidth: '400px', textAlign: 'center' } },
+                    react_1.default.createElement("h2", { style: { color: titleColor, fontSize: '32px', fontWeight: 700, marginBottom: '16px' } }, title),
+                    react_1.default.createElement("p", { style: { color: descriptionColor, fontSize: '16px', marginBottom: '24px' } }, description),
+                    react_1.default.createElement("a", { href: ctaHref, style: {
+                            display: 'inline-block',
+                            padding: '12px 32px',
+                            borderRadius: '24px',
+                            backgroundColor: ctaColor,
+                            color: '#fff',
+                            textDecoration: 'none',
+                            fontWeight: 600,
+                            transition: 'background-color 0.2s',
+                        }, onMouseEnter: (e) => { e.currentTarget.style.backgroundColor = ctaHoverColor; }, onMouseLeave: (e) => { e.currentTarget.style.backgroundColor = ctaColor; } }, ctaText))),
+            react_1.default.createElement("div", { style: { flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '20px' } },
+                react_1.default.createElement("img", { src: desktopImage, alt: imageAlt, style: { maxWidth: '100%', height: 'auto' } })))));
 }
 exports.default = Quiz;
 //# sourceMappingURL=Quiz.js.map