webs-sdk 0.18.28 → 0.18.30

package/dist/components/Quiz.js

@@ -1,41 +1,9 @@
 "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 react_1 = __importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 function parseMeta(raw) {
     if (!raw)
         return {};
@@ -186,7 +154,7 @@ function normalizeResponse(json) {
 }
 function QuizCard({ quiz, index, theme, texts, onClick }) {
     const [hovered, setHovered] = (0, react_1.useState)(false);
-    return (react_1.default.createElement("div", { onClick: onClick, onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), style: {
+    return ((0, jsx_runtime_1.jsxs)("div", { onClick: onClick, onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), style: {
             backgroundColor: theme.cardBackground,
             border: `1.5px solid ${hovered ? theme.primaryColor : theme.cardBorderColor}`,
             borderRadius: '16px',
@@ -197,62 +165,57 @@ 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',
-        } },
-        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',
-                } }, 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',
+        }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                    width: '100%',
+                    aspectRatio: '16/9',
+                    backgroundColor: theme.backgroundColor,
                     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))));
+                    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 })] })] }));
 }
 function QuizModal({ questions, results, startIndex, theme, texts, onClose }) {
     var _a;
@@ -343,9 +306,67 @@ 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 (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: {
+        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: {
                         position: 'absolute',
                         top: '16px',
                         right: '16px',
@@ -355,185 +376,98 @@ function QuizModal({ questions, results, startIndex, theme, texts, onClose }) {
                         color: theme.neutralMid,
                         fontSize: '20px',
                         lineHeight: 1,
-                    } }, "\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',
-                            } }, 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: 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',
+                    }, 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',
-                        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,
+                        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,
-                        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)))));
+                        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,
+                                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: {
+                        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 })] })] }) }));
 }
 const DEFAULT_THEME = {
     primaryColor: '#FF2273',
@@ -659,87 +593,68 @@ function Quiz({ config, theme: themeP, texts: textsP, onQuizStart, onQuizComplet
     }, []);
     const visible = quizItems.slice(0, visibleCount);
     const hasMore = visibleCount < quizItems.length;
-    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 }))));
+    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 }))] }));
 }
 function QuizForYouCard({ title, description, ctaText, ctaHref, desktopImage, mobileImage, imageAlt = '', imageOnRight = false, titleColor = '#210F5C', descriptionColor = '#0F1F35', ctaColor = '#FF2273', ctaHoverColor = '#E81F69', backgroundColor = '#FFFFFF', paddingClass = '', }) {
-    return (react_1.default.createElement("div", { style: { backgroundColor, width: '100%' }, className: paddingClass },
-        react_1.default.createElement("div", { style: {
+    return ((0, jsx_runtime_1.jsx)("div", { style: { backgroundColor, width: '100%' }, className: paddingClass, children: (0, jsx_runtime_1.jsxs)("div", { style: {
                 display: 'flex',
                 flexDirection: imageOnRight ? 'row-reverse' : 'row',
                 minHeight: '420px',
                 alignItems: 'stretch',
-            } },
-            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' } })))));
+            }, 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' } }) })] }) }));
 }
 exports.default = Quiz;
 //# sourceMappingURL=Quiz.js.map