@micha.bigler/survey-renderer 0.1.0

package/dist/SurveyRenderer.js

@@ -0,0 +1,985 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import KeyboardArrowDownRoundedIcon from "@mui/icons-material/KeyboardArrowDownRounded";
+import KeyboardArrowUpRoundedIcon from "@mui/icons-material/KeyboardArrowUpRounded";
+import { Alert, Autocomplete, Box, Button, Card, Checkbox, Chip, IconButton, MenuItem, CircularProgress, Divider, LinearProgress, Paper, Radio, RadioGroup, Rating, Slider, Stack, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TextField, Typography, } from "@mui/material";
+import { useTranslation } from "react-i18next";
+import { interpolateSurveyText, localizeSurveyValue } from "./localizeSurvey";
+import { resolveQuestionUiConfig } from "./questionUiConfig";
+import { getGroupsByName, getPageStagedGroupKey, getQuestionStagedGroupKey, getStagedQuestionNames, isQuestionVisible, } from "./stagedGroups";
+import SurveyQuestionHeader, { renderRichText } from "./SurveyQuestionHeader";
+import SurveyDiscoverySelect from "./SurveyDiscoverySelect";
+import SurveyFilteredPlaceSelect from "./SurveyFilteredPlaceSelect";
+import SurveyGeoSelect from "./SurveyGeoSelect";
+import SurveyMapSelect from "./SurveyMapSelect";
+function formatQuestionText(text) {
+    const source = (text || "").trim();
+    const exactBoldMatch = source.match(/^\*\*(.+)\*\*$/);
+    if (exactBoldMatch) {
+        return { kind: "title", text: exactBoldMatch[1].trim() };
+    }
+    return { kind: "body", text: source };
+}
+function parseTitledContent(text) {
+    const source = (text || "").trim();
+    const titledMatch = source.match(/^\*\*(.+?)\*\*\s*([\s\S]*)$/);
+    if (!titledMatch) {
+        return null;
+    }
+    return {
+        title: titledMatch[1].trim(),
+        body: titledMatch[2].trim(),
+    };
+}
+function normalizeTitle(text) {
+    return String(text || "")
+        .toLowerCase()
+        .replace(/\(.*?\)/g, "")
+        .replace(/[^a-z0-9]+/g, " ")
+        .trim();
+}
+function shouldHideNoteTitle(noteTitle, surveyTitle) {
+    const normalizedNoteTitle = normalizeTitle(noteTitle);
+    const normalizedSurveyTitle = normalizeTitle(surveyTitle);
+    if (!normalizedNoteTitle || !normalizedSurveyTitle) {
+        return false;
+    }
+    return (normalizedNoteTitle === normalizedSurveyTitle ||
+        normalizedNoteTitle.includes(normalizedSurveyTitle) ||
+        normalizedSurveyTitle.includes(normalizedNoteTitle));
+}
+function isTitleNote(question, language, contextAnswers = {}) {
+    if (!question || question.type !== "note") {
+        return false;
+    }
+    const label = interpolateSurveyText(localizeSurveyValue(question.labels, language), contextAnswers);
+    return /^\*\*(.+)\*\*$/.test((label || "").trim());
+}
+function ChoiceCardGroup({ imageChoice = false, maxSelections, mediaUrl, multiple = false, neutral = false, onChange, onOtherChange, options, otherOptionValue, otherValue, renderOptionOverlay, value }) {
+    const { t } = useTranslation();
+    const [failedImageValues, setFailedImageValues] = React.useState(() => new Set());
+    const selectedValues = multiple ? (Array.isArray(value) ? value : []) : [value];
+    const maximum = Number(maxSelections);
+    const hasMaximum = multiple && Number.isInteger(maximum) && maximum > 0;
+    const maximumReached = hasMaximum && selectedValues.length >= maximum;
+    const useResponsiveColumns = options.length > 1;
+    const choiceCards = options.map((option) => {
+        const isSelected = multiple
+            ? selectedValues.includes(option.value)
+            : value === option.value;
+        const isDisabled = maximumReached && !isSelected;
+        const isOtherOption = option.value === otherOptionValue;
+        const toggleOption = () => {
+            if (isDisabled)
+                return;
+            if (multiple) {
+                const nextValue = isSelected
+                    ? selectedValues.filter((entry) => entry !== option.value)
+                    : [...selectedValues, option.value];
+                onChange(nextValue);
+                return;
+            }
+            onChange(isSelected ? "" : option.value);
+        };
+        const card = (_jsx(Paper, { "aria-checked": isSelected, "aria-disabled": isDisabled || undefined, "aria-label": imageChoice && option.label ? option.label : undefined, onClick: toggleOption, onKeyDown: (event) => {
+                if (event.key === "Enter" || event.key === " ") {
+                    if (event.key === " ") {
+                        event.preventDefault();
+                    }
+                    toggleOption();
+                }
+            }, role: multiple ? "checkbox" : "radio", sx: {
+                "&:focus-visible": {
+                    outline: "2px solid",
+                    outlineColor: "primary.main",
+                    outlineOffset: 2,
+                },
+                backgroundColor: neutral ? "background.paper" : "rgba(255, 243, 249, 0.96)",
+                border: "1px solid",
+                borderColor: isSelected ? "primary.main" : "divider",
+                borderRadius: 2,
+                cursor: isDisabled ? "not-allowed" : "pointer",
+                minHeight: 72,
+                px: 1.5,
+                py: 1.1,
+                transition: "border-color 150ms ease, background-color 150ms ease",
+                opacity: isDisabled ? 0.52 : 1,
+                bgcolor: isSelected ? (neutral ? "action.selected" : "rgba(13, 174, 209, 0.16)") : (neutral ? "background.paper" : "rgba(255, 243, 249, 0.96)"),
+            }, tabIndex: isDisabled ? -1 : 0, children: _jsxs(Stack, { spacing: 0.25, children: [imageChoice && option.imageAssetId && !failedImageValues.has(option.value) ? (_jsx(Box, { alt: option.label, component: "img", onError: () => setFailedImageValues((current) => new Set(current).add(option.value)), src: mediaUrl ? mediaUrl(option.imageAssetId) : "", sx: {
+                            alignSelf: "center",
+                            borderRadius: 1,
+                            display: "block",
+                            maxHeight: 220,
+                            maxWidth: "100%",
+                            objectFit: "contain",
+                        } })) : null, _jsx(Typography, { children: option.label }), option.hint ? _jsx(Typography, { color: "text.secondary", sx: { whiteSpace: "pre-line" }, variant: "body2", children: renderRichText(option.hint, `option-hint-${option.value}`) }) : null, isOtherOption ? (_jsx(TextField, { disabled: !isSelected, fullWidth: true, inputProps: { "aria-label": option.label }, onClick: (event) => event.stopPropagation(), onChange: (event) => onOtherChange === null || onOtherChange === void 0 ? void 0 : onOtherChange(event.target.value), onKeyDown: (event) => event.stopPropagation(), size: "small", value: otherValue || "" })) : null] }) }, option.value));
+        const optionOverlay = renderOptionOverlay === null || renderOptionOverlay === void 0 ? void 0 : renderOptionOverlay(option);
+        if (!optionOverlay) {
+            return card;
+        }
+        return (_jsxs(Box, { sx: { position: "relative" }, children: [card, _jsx(Box, { sx: { position: "absolute", right: 4, top: 4 }, children: optionOverlay })] }, option.value));
+    });
+    const group = useResponsiveColumns ? (_jsx(Box, { role: "group", sx: {
+            display: "grid",
+            gap: 1.1,
+            gridTemplateColumns: {
+                xs: "1fr",
+                md: "repeat(2, minmax(0, 1fr))",
+            },
+        }, children: choiceCards })) : _jsx(Stack, { role: "group", spacing: 1.1, children: choiceCards });
+    return _jsxs(Stack, { spacing: 0.75, children: [group, hasMaximum ? _jsx(Typography, { color: "text.secondary", variant: "caption", children: t("surveyRenderer.MAX_SELECTIONS", { count: maximum }) }) : null] });
+}
+function StandardQuestionPrompt({ errorText, hint, label }) {
+    return _jsx(SurveyQuestionHeader, { errorText: errorText, hint: hint, label: label });
+}
+function buildLocalizedQuestionOptions(question, language, runtimeOptions = []) {
+    const localizeOption = (option, fallback = {}) => {
+        var _a;
+        return (Object.assign({ value: option.value, label: localizeSurveyValue(option.labels, language) || fallback.label, hint: localizeSurveyValue(option.hints, language) || fallback.hint, isOther: Boolean(option.is_other) }, (Number.isInteger((_a = option.media) === null || _a === void 0 ? void 0 : _a.image) && option.media.image > 0 ? { imageAssetId: option.media.image } : {})));
+    };
+    const fallbackOptions = (question.options || []).map((option) => localizeOption(option));
+    if (!Array.isArray(runtimeOptions) || runtimeOptions.length === 0) {
+        return fallbackOptions;
+    }
+    const questionOptionsByValue = new Map((question.options || []).map((option) => [String(option.value), option]));
+    return runtimeOptions.map((option) => {
+        const questionOption = questionOptionsByValue.get(String(option.value));
+        if (!questionOption) {
+            return option;
+        }
+        return localizeOption(questionOption, option);
+    });
+}
+function NoteField({ hideDuplicateIntroTitle, hint, label, question, surveyTitle }) {
+    const formatted = formatQuestionText(label);
+    const titledContent = parseTitledContent(label);
+    const hideNoteTitle = hideDuplicateIntroTitle && shouldHideNoteTitle((titledContent === null || titledContent === void 0 ? void 0 : titledContent.title) || formatted.text, surveyTitle);
+    if (titledContent) {
+        return (_jsxs(Stack, { spacing: 1, children: [!hideNoteTitle ? (_jsx(Typography, { fontWeight: 700, variant: "h5", children: renderRichText(titledContent.title, `${question.name}-title`) })) : null, titledContent.body ? (_jsx(Typography, { sx: { whiteSpace: "pre-line" }, children: renderRichText(titledContent.body, `${question.name}-body`) })) : null, hint ? _jsx(Typography, { color: "text.secondary", sx: { whiteSpace: "pre-line" }, children: renderRichText(hint, `${question.name}-hint`) }) : null] }));
+    }
+    return (_jsxs(Stack, { spacing: 1, children: [!hideNoteTitle ? (_jsx(Typography, { fontWeight: formatted.kind === "title" ? 700 : 500, variant: formatted.kind === "title" ? "h5" : "body1", children: renderRichText(formatted.text, `${question.name}-formatted`) })) : null, hint ? _jsx(Typography, { color: "text.secondary", sx: { whiteSpace: "pre-line" }, children: renderRichText(hint, `${question.name}-formatted-hint`) }) : null] }));
+}
+function MapSelectOneField({ errorText, hint, label, onChange, options, question, resolvedQuestionUiConfig, stageOptions, value }) {
+    return (_jsx(SurveyMapSelect, { errorText: errorText, hint: hint, label: label, onChange: (nextValue) => onChange(question.name, nextValue, Object.assign({ autosave: true }, stageOptions)), options: options, uiConfig: resolvedQuestionUiConfig, value: value || "" }));
+}
+function SelectOneField({ answers, errorText, hint, label, neutral, onChange, options, question, renderOptionOverlay, stageOptions, value }) {
+    return (_jsxs(Stack, { spacing: 1, sx: { pb: 2.25 }, children: [_jsx(StandardQuestionPrompt, { errorText: errorText, hint: hint, label: label }), _jsx(ChoiceCardGroup, { neutral: neutral, onChange: (nextValue) => onChange(question.name, nextValue, Object.assign({ autosave: true }, stageOptions)), onOtherChange: (nextValue) => onChange(`${question.name}_other`, nextValue, Object.assign({ autosave: true }, stageOptions)), options: options, otherOptionValue: question.or_other ? "other" : undefined, otherValue: answers[`${question.name}_other`], renderOptionOverlay: renderOptionOverlay, value: value || "" })] }));
+}
+function SelectOneOtherTextField({ answers, onChange, options, question, stageOptions, value }) {
+    const selectedOption = options.find((option) => option.value === value);
+    const isOtherSelected = question.or_other && ((selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.isOther) || value === "other");
+    if (!isOtherSelected) {
+        return null;
+    }
+    return (_jsx(TextField, { fullWidth: true, inputProps: { "aria-label": selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label }, onChange: (event) => onChange(`${question.name}_other`, event.target.value, Object.assign({ autosave: true }, stageOptions)), size: "small", value: answers[`${question.name}_other`] || "" }));
+}
+function DropdownSelectOneField({ answers, errorText, hint, label, onChange, options, question, stageOptions, value }) {
+    return (_jsxs(Stack, { spacing: 1, sx: { pb: 2.25 }, children: [_jsx(StandardQuestionPrompt, { errorText: errorText, hint: hint, label: label }), _jsx(TextField, { SelectProps: { inputProps: { "aria-label": label || question.name } }, fullWidth: true, onChange: (event) => onChange(question.name, event.target.value, Object.assign({ autosave: true }, stageOptions)), select: true, value: value || "", children: options.map((option) => _jsx(MenuItem, { value: option.value, children: option.label }, option.value)) }), _jsx(SelectOneOtherTextField, { answers: answers, onChange: onChange, options: options, question: question, stageOptions: stageOptions, value: value })] }));
+}
+function AutocompleteSelectOneField({ answers, errorText, hint, label, onChange, options, question, stageOptions, value }) {
+    const selectedOption = options.find((option) => option.value === value) || null;
+    return (_jsxs(Stack, { spacing: 1, sx: { pb: 2.25 }, children: [_jsx(StandardQuestionPrompt, { errorText: errorText, hint: hint, label: label }), _jsx(Autocomplete, { getOptionLabel: (option) => option.label || option.value, isOptionEqualToValue: (option, selected) => option.value === selected.value, onChange: (_event, nextOption) => onChange(question.name, (nextOption === null || nextOption === void 0 ? void 0 : nextOption.value) || "", Object.assign({ autosave: true }, stageOptions)), options: options, renderInput: (params) => _jsx(TextField, Object.assign({}, params, { inputProps: Object.assign(Object.assign({}, params.inputProps), { "aria-label": label || question.name }) })), value: selectedOption }), _jsx(SelectOneOtherTextField, { answers: answers, onChange: onChange, options: options, question: question, stageOptions: stageOptions, value: value })] }));
+}
+function LikertField({ errorText, hint, label, onChange, options, question, stageOptions, value }) {
+    return (_jsxs(Stack, { spacing: 1, sx: { pb: 2.25 }, children: [_jsx(StandardQuestionPrompt, { errorText: errorText, hint: hint, label: label }), _jsx(RadioGroup, { "aria-label": label || question.name, name: question.name, onChange: (event) => onChange(question.name, event.target.value, Object.assign({ autosave: true }, stageOptions)), row: true, sx: { alignItems: "stretch", flexWrap: "wrap", gap: 0.75 }, value: value || "", children: options.map((option) => (_jsxs(Box, { sx: {
+                        border: "1px solid",
+                        borderColor: value === option.value ? "primary.main" : "divider",
+                        borderRadius: 1.5,
+                        flex: "1 1 145px",
+                        minWidth: 0,
+                        px: 0.5,
+                    }, children: [_jsx(Radio, { value: option.value, sx: { alignItems: "flex-start", width: "100%" }, slotProps: { input: { "aria-label": option.label } } }), _jsx(Typography, { component: "span", sx: { display: "inline-block", pb: 1, pr: 1 }, variant: "body2", children: option.label }), option.hint ? _jsx(Typography, { color: "text.secondary", sx: { display: "block", pb: 1, px: 1 }, variant: "caption", children: renderRichText(option.hint, `likert-option-hint-${option.value}`) }) : null] }, option.value))) })] }));
+}
+function MapSelectMultipleField({ errorText, hint, label, onChange, options, question, resolvedQuestionUiConfig, stageOptions, value }) {
+    return (_jsx(SurveyGeoSelect, { errorText: errorText, hint: hint, label: label, maxSelections: (resolvedQuestionUiConfig === null || resolvedQuestionUiConfig === void 0 ? void 0 : resolvedQuestionUiConfig.maxSelections) || 3, multiple: true, onChange: (nextValue) => onChange(question.name, nextValue, Object.assign({ autosave: true }, stageOptions)), options: options, uiConfig: resolvedQuestionUiConfig, value: Array.isArray(value) ? value : [] }));
+}
+function FilteredSelectMultipleField({ answers, errorText, hint, label, onChange, options, optionsByName, question, resolvedQuestionUiConfig, stageOptions, value }) {
+    return (_jsx(SurveyFilteredPlaceSelect, { allOptionsByName: optionsByName, answers: answers, errorText: errorText, hint: hint, label: label, onChange: (nextValue) => onChange(question.name, nextValue, Object.assign({ autosave: true }, stageOptions)), options: options, uiConfig: resolvedQuestionUiConfig, value: Array.isArray(value) ? value : [] }));
+}
+function DiscoverySelectMultipleField({ errorText, hint, label, onChange, options, optionsByName, question, resolvedQuestionUiConfig, stageOptions, value }) {
+    return (_jsx(SurveyDiscoverySelect, { allOptionsByName: optionsByName, errorText: errorText, hint: hint, label: label, onChange: (nextValue) => onChange(question.name, nextValue, Object.assign({ autosave: true }, stageOptions)), options: options, uiConfig: resolvedQuestionUiConfig, value: Array.isArray(value) ? value : [] }));
+}
+function SelectMultipleField({ answers, errorText, hint, label, neutral, onChange, options, question, renderOptionOverlay, stageOptions, value }) {
+    return (_jsxs(Stack, { spacing: 1, sx: { pb: 2.25 }, children: [_jsx(StandardQuestionPrompt, { errorText: errorText, hint: hint, label: label }), _jsx(ChoiceCardGroup, { maxSelections: question.max_selections, multiple: true, neutral: neutral, onChange: (nextValue) => onChange(question.name, nextValue, Object.assign({ autosave: true }, stageOptions)), onOtherChange: (nextValue) => onChange(`${question.name}_other`, nextValue, Object.assign({ autosave: true }, stageOptions)), options: options, otherOptionValue: question.or_other ? "other" : undefined, otherValue: answers[`${question.name}_other`], renderOptionOverlay: renderOptionOverlay, value: value })] }));
+}
+function ImageChoiceSelectOneField({ answers, errorText, hint, label, mediaUrl, neutral, onChange, options, question, renderOptionOverlay, stageOptions, value }) {
+    return (_jsxs(Stack, { spacing: 1, sx: { pb: 2.25 }, children: [_jsx(StandardQuestionPrompt, { errorText: errorText, hint: hint, label: label }), _jsx(ChoiceCardGroup, { imageChoice: true, mediaUrl: mediaUrl, neutral: neutral, onChange: (nextValue) => onChange(question.name, nextValue, Object.assign({ autosave: true }, stageOptions)), onOtherChange: (nextValue) => onChange(`${question.name}_other`, nextValue, Object.assign({ autosave: true }, stageOptions)), options: options, otherOptionValue: question.or_other ? "other" : undefined, otherValue: answers[`${question.name}_other`], renderOptionOverlay: renderOptionOverlay, value: value || "" })] }));
+}
+function ImageChoiceSelectMultipleField({ answers, errorText, hint, label, mediaUrl, neutral, onChange, options, question, renderOptionOverlay, stageOptions, value }) {
+    return (_jsxs(Stack, { spacing: 1, sx: { pb: 2.25 }, children: [_jsx(StandardQuestionPrompt, { errorText: errorText, hint: hint, label: label }), _jsx(ChoiceCardGroup, { imageChoice: true, maxSelections: question.max_selections, mediaUrl: mediaUrl, multiple: true, neutral: neutral, onChange: (nextValue) => onChange(question.name, nextValue, Object.assign({ autosave: true }, stageOptions)), onOtherChange: (nextValue) => onChange(`${question.name}_other`, nextValue, Object.assign({ autosave: true }, stageOptions)), options: options, otherOptionValue: question.or_other ? "other" : undefined, otherValue: answers[`${question.name}_other`], renderOptionOverlay: renderOptionOverlay, value: value })] }));
+}
+function RankField({ errorText, hint, label, onChange, options, question, stageOptions, value }) {
+    const { t } = useTranslation();
+    const rankMaximum = Number(question.rank_max);
+    const hasRankMaximum = Number.isInteger(rankMaximum) && rankMaximum > 0;
+    const optionValues = new Set(options.map((option) => option.value));
+    const validSelectedValues = Array.isArray(value)
+        ? value.filter((optionValue, index, values) => optionValues.has(optionValue) && values.indexOf(optionValue) === index)
+        : [];
+    // If rank_max was lowered after an answer was already stored under a higher (or absent) cap,
+    // treat only the first rankMaximum entries as still included -- the rest become re-includable
+    // rather than silently staying over-cap and reorderable.
+    const selectedValues = hasRankMaximum ? validSelectedValues.slice(0, rankMaximum) : validSelectedValues;
+    const rankedValues = hasRankMaximum
+        ? selectedValues
+        : [...selectedValues, ...options.map((option) => option.value).filter((optionValue) => !selectedValues.includes(optionValue))];
+    const currentRankValues = hasRankMaximum ? selectedValues : rankedValues;
+    const rankedOptions = rankedValues
+        .map((optionValue) => options.find((option) => option.value === optionValue))
+        .filter(Boolean);
+    const unrankedOptions = hasRankMaximum
+        ? options.filter((option) => !selectedValues.includes(option.value))
+        : [];
+    const displayedOptions = [...rankedOptions, ...unrankedOptions];
+    const saveRank = (nextValue) => onChange(question.name, nextValue, Object.assign({ autosave: true }, stageOptions));
+    const moveOption = (optionValue, direction) => {
+        const currentIndex = currentRankValues.indexOf(optionValue);
+        const nextIndex = currentIndex + direction;
+        if (currentIndex < 0 || nextIndex < 0 || nextIndex >= currentRankValues.length) {
+            return;
+        }
+        const nextValues = [...currentRankValues];
+        [nextValues[currentIndex], nextValues[nextIndex]] = [nextValues[nextIndex], nextValues[currentIndex]];
+        saveRank(nextValues);
+    };
+    const toggleOption = (optionValue) => {
+        if (selectedValues.includes(optionValue)) {
+            saveRank(selectedValues.filter((selectedValue) => selectedValue !== optionValue));
+        }
+        else if (selectedValues.length < rankMaximum) {
+            saveRank([...selectedValues, optionValue]);
+        }
+    };
+    return (_jsxs(Stack, { spacing: 1, sx: { pb: 2.25 }, children: [_jsx(StandardQuestionPrompt, { errorText: errorText, hint: hint, label: label }), _jsx(Box, { component: "ol", sx: { display: "grid", gap: 0.75, listStylePosition: "inside", m: 0, p: 0 }, children: displayedOptions.map((option) => {
+                    const rankIndex = currentRankValues.indexOf(option.value);
+                    const isIncluded = rankIndex >= 0;
+                    const cannotInclude = hasRankMaximum && !isIncluded && selectedValues.length >= rankMaximum;
+                    return (_jsxs(Box, { component: "li", sx: { alignItems: "center", border: "1px solid", borderColor: "divider", borderRadius: 1.5, display: "flex", gap: 0.5, pl: 0.75, pr: 0.5, py: 0.5 }, children: [hasRankMaximum ? (_jsx(Checkbox, { checked: isIncluded, disabled: cannotInclude, inputProps: {
+                                    "aria-label": t(isIncluded ? "surveyRenderer.RANK_EXCLUDE" : "surveyRenderer.RANK_INCLUDE", {
+                                        defaultValue: isIncluded ? "Remove {{option}} from ranking" : "Include {{option}} in ranking",
+                                        option: option.label,
+                                    }),
+                                }, onChange: () => toggleOption(option.value) })) : null, _jsxs(Box, { sx: { flex: 1, minWidth: 0 }, children: [_jsx(Typography, { children: option.label }), option.hint ? _jsx(Typography, { color: "text.secondary", variant: "caption", children: renderRichText(option.hint, `rank-option-hint-${option.value}`) }) : null] }), _jsx(IconButton, { "aria-label": t("surveyRenderer.RANK_MOVE_UP", { defaultValue: "Move {{option}} up", option: option.label }), disabled: !isIncluded || rankIndex === 0, onClick: () => moveOption(option.value, -1), size: "small", children: _jsx(KeyboardArrowUpRoundedIcon, {}) }), _jsx(IconButton, { "aria-label": t("surveyRenderer.RANK_MOVE_DOWN", { defaultValue: "Move {{option}} down", option: option.label }), disabled: !isIncluded || rankIndex === currentRankValues.length - 1, onClick: () => moveOption(option.value, 1), size: "small", children: _jsx(KeyboardArrowDownRoundedIcon, {}) })] }, option.value));
+                }) })] }));
+}
+function RangeField({ errorText, hint, label, onChange, question, stageOptions, value }) {
+    const { max, min, step } = getRangeParameters(question.parameters);
+    const numericValue = Number(value);
+    return (_jsxs(Stack, { spacing: 1, sx: { pb: 1.75 }, children: [_jsx(StandardQuestionPrompt, { errorText: errorText, hint: hint, label: label }), _jsx(Slider, { "aria-label": label || question.name, max: max, min: min, onChange: (_, nextValue) => onChange(question.name, nextValue, Object.assign({ autosave: true }, stageOptions)), step: step, value: Number.isFinite(numericValue) ? numericValue : min })] }));
+}
+function RatingField({ errorText, hint, label, onChange, question, stageOptions, value }) {
+    const { max, min } = getRangeParameters(question.parameters);
+    const numericValue = Number(value);
+    const ratingValue = Number.isFinite(numericValue) && numericValue >= Math.max(min, 1) && numericValue <= max
+        ? numericValue
+        : null;
+    return (_jsxs(Stack, { spacing: 1, sx: { pb: 1.75 }, children: [_jsx(StandardQuestionPrompt, { errorText: errorText, hint: hint, label: label }), _jsx(Rating, { getLabelText: (rating) => String(rating), max: max, name: question.name, onChange: (event, nextValue) => {
+                    const selectedRating = Number.isFinite(nextValue) ? nextValue : Number(event.target.value);
+                    onChange(question.name, Number.isFinite(selectedRating) ? selectedRating : "", Object.assign({ autosave: true }, stageOptions));
+                }, value: ratingValue })] }));
+}
+function NpsField({ errorText, hint, label, onChange, question, stageOptions, value }) {
+    const { t } = useTranslation();
+    const { max, min, step } = getRangeParameters(question.parameters);
+    const numericValue = Number(value);
+    const values = [];
+    for (let current = min; current <= max; current += step) {
+        values.push(current);
+    }
+    return (_jsxs(Stack, { spacing: 1, sx: { pb: 1.75 }, children: [_jsx(StandardQuestionPrompt, { errorText: errorText, hint: hint, label: label }), _jsx(RadioGroup, { "aria-label": label || question.name, name: question.name, onChange: (event) => onChange(question.name, Number(event.target.value), Object.assign({ autosave: true }, stageOptions)), row: true, sx: { display: "grid", gap: 0.65, gridTemplateColumns: "repeat(auto-fit, minmax(38px, 1fr))" }, value: Number.isFinite(numericValue) ? String(numericValue) : "", children: values.map((optionValue) => (_jsxs(Box, { sx: {
+                        alignItems: "center",
+                        border: "1px solid",
+                        borderColor: numericValue === optionValue ? "primary.main" : "divider",
+                        borderRadius: 1.5,
+                        display: "flex",
+                        flexDirection: "column",
+                        py: 0.5,
+                    }, children: [_jsx(Radio, { slotProps: { input: { "aria-label": String(optionValue) } }, value: String(optionValue) }), _jsx(Typography, { variant: "caption", children: optionValue })] }, optionValue))) }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", spacing: 2, children: [_jsx(Typography, { color: "text.secondary", variant: "caption", children: t("surveyRenderer.NPS_NOT_LIKELY", { defaultValue: "Not at all likely" }) }), _jsx(Typography, { color: "text.secondary", sx: { textAlign: "right" }, variant: "caption", children: t("surveyRenderer.NPS_EXTREMELY_LIKELY", { defaultValue: "Extremely likely" }) })] })] }));
+}
+function SemanticDifferentialField({ errorText, hint, label, language, onChange, question, stageOptions, value }) {
+    const { max, min, step } = getRangeParameters(question.parameters);
+    const numericValue = Number(value);
+    const leftLabel = localizeSurveyValue(question.left_labels, language);
+    const rightLabel = localizeSurveyValue(question.right_labels, language);
+    const ariaLabel = [label || question.name, leftLabel, rightLabel].filter(Boolean).join(": ");
+    return (_jsxs(Stack, { spacing: 1, sx: { pb: 1.75 }, children: [_jsx(StandardQuestionPrompt, { errorText: errorText, hint: hint, label: label }), _jsxs(Stack, { alignItems: "center", direction: { xs: "column", sm: "row" }, spacing: 1.25, children: [_jsx(Typography, { component: "span", sx: { flex: "0 1 170px", textAlign: { sm: "right" }, width: { xs: "100%", sm: "auto" } }, variant: "body2", children: leftLabel }), _jsx(Slider, { "aria-label": ariaLabel, max: max, min: min, onChange: (_, nextValue) => onChange(question.name, nextValue, Object.assign({ autosave: true }, stageOptions)), step: step, sx: { flex: 1, minWidth: 160 }, value: Number.isFinite(numericValue) ? numericValue : min }), _jsx(Typography, { component: "span", sx: { flex: "0 1 170px", width: { xs: "100%", sm: "auto" } }, variant: "body2", children: rightLabel })] })] }));
+}
+function pathsEqual(left, right) {
+    if (!Array.isArray(left) || !Array.isArray(right) || left.length !== right.length) {
+        return false;
+    }
+    return left.every((value, index) => value === right[index]);
+}
+function MatrixTableListGroup({ answers, contextAnswers, errors, getQuestionDragProps, groupsByName, language, onChange, optionsByName, questionUiConfig, questions, renderQuestionToolbar, section, serverVisibleQuestionNames, }) {
+    const matrixQuestions = (questions || []).filter((question) => question.type === "select_one" &&
+        pathsEqual(question.group_path, section === null || section === void 0 ? void 0 : section.path) &&
+        isQuestionVisible(question, answers, serverVisibleQuestionNames, questionUiConfig, groupsByName));
+    const firstQuestion = matrixQuestions[0];
+    const options = firstQuestion
+        ? buildLocalizedQuestionOptions(firstQuestion, language, optionsByName[firstQuestion.name])
+        : [];
+    if (!firstQuestion) {
+        return null;
+    }
+    return (_jsx(TableContainer, { component: Paper, variant: "outlined", children: _jsxs(Table, { "aria-label": localizeSurveyValue(section === null || section === void 0 ? void 0 : section.labels, language) || (section === null || section === void 0 ? void 0 : section.name) || "matrix", size: "small", sx: { minWidth: 560 }, children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableCell, { component: "th", scope: "col" }), options.map((option) => _jsx(TableCell, { align: "center", component: "th", scope: "col", children: option.label }, option.value))] }) }), _jsx(TableBody, { children: matrixQuestions.map((question) => {
+                        const stageGroupKey = getQuestionStagedGroupKey(question, questionUiConfig, groupsByName);
+                        const stageOptions = stageGroupKey ? { stagedGroup: stageGroupKey } : {};
+                        const questionLabel = interpolateSurveyText(localizeSurveyValue(question.labels, language), contextAnswers || answers);
+                        const questionToolbar = renderQuestionToolbar === null || renderQuestionToolbar === void 0 ? void 0 : renderQuestionToolbar(question);
+                        const questionDragProps = (getQuestionDragProps === null || getQuestionDragProps === void 0 ? void 0 : getQuestionDragProps(question)) || {};
+                        return (_jsxs(TableRow, Object.assign({}, questionDragProps, { children: [_jsx(TableCell, { component: "th", "data-question-name": question.name, scope: "row", children: _jsxs(Stack, { spacing: 0.5, children: [questionToolbar, _jsx(Typography, { variant: "body2", children: questionLabel }), errors[question.name] ? _jsx(Typography, { color: "error", role: "alert", variant: "caption", children: errors[question.name] }) : null] }) }), options.map((option) => (_jsx(TableCell, { align: "center", children: _jsx(Radio, { checked: answers[question.name] === option.value, name: question.name, onChange: () => onChange(question.name, option.value, Object.assign({ autosave: true }, stageOptions)), slotProps: { input: { "aria-label": `${questionLabel}: ${option.label}` } }, value: option.value }) }, option.value)))] }), question.name));
+                    }) })] }) }));
+}
+function DefaultTextField({ errorText, hint, label, neutral, onBlurSave, onChange, question, stageOptions, value }) {
+    return (_jsxs(Stack, { spacing: 1, sx: { pb: 1.75 }, children: [_jsx(StandardQuestionPrompt, { errorText: errorText, hint: hint, label: label }), _jsx(TextField, { fullWidth: true, multiline: question.type === "text" && question.appearance === "multiline", onBlur: (event) => onBlurSave(question.name, event.target.value, stageOptions), onChange: (event) => onChange(question.name, event.target.value, stageOptions), sx: {
+                    ".MuiOutlinedInput-root": {
+                        backgroundColor: neutral ? "background.paper" : "rgba(255, 243, 249, 0.96)",
+                    },
+                }, type: mapInputType(question.input_type), value: value || "" })] }));
+}
+const QUESTION_RENDERER_REGISTRY = {
+    note: NoteField,
+    "select_one:map-select": MapSelectOneField,
+    "select_one:likert": LikertField,
+    "select_one:minimal": DropdownSelectOneField,
+    "select_one:autocomplete": AutocompleteSelectOneField,
+    "select_one:image-choice": ImageChoiceSelectOneField,
+    select_one: SelectOneField,
+    "select_multiple:map-select": MapSelectMultipleField,
+    "select_multiple:filtered-select": FilteredSelectMultipleField,
+    "select_multiple:discovery-select": DiscoverySelectMultipleField,
+    "select_multiple:image-choice": ImageChoiceSelectMultipleField,
+    select_multiple: SelectMultipleField,
+    rank: RankField,
+    "range:rating": RatingField,
+    "range:nps": NpsField,
+    "range:semantic-differential": SemanticDifferentialField,
+    range: RangeField,
+    default: DefaultTextField,
+};
+function resolveQuestionRenderer(question, resolvedQuestionUiConfig) {
+    const widget = resolvedQuestionUiConfig === null || resolvedQuestionUiConfig === void 0 ? void 0 : resolvedQuestionUiConfig.widget;
+    if (question.type === "select_one") {
+        if (widget === "map-select") {
+            return QUESTION_RENDERER_REGISTRY["select_one:map-select"];
+        }
+        if (question.appearance === "likert") {
+            return QUESTION_RENDERER_REGISTRY["select_one:likert"];
+        }
+        if (question.appearance === "minimal") {
+            return QUESTION_RENDERER_REGISTRY["select_one:minimal"];
+        }
+        if (question.appearance === "autocomplete") {
+            return QUESTION_RENDERER_REGISTRY["select_one:autocomplete"];
+        }
+        if ((question.options || []).some((option) => { var _a; return Number.isInteger((_a = option.media) === null || _a === void 0 ? void 0 : _a.image) && option.media.image > 0; })) {
+            return QUESTION_RENDERER_REGISTRY["select_one:image-choice"];
+        }
+        return QUESTION_RENDERER_REGISTRY.select_one;
+    }
+    if (question.type === "select_multiple") {
+        if (widget === "map-select") {
+            return QUESTION_RENDERER_REGISTRY["select_multiple:map-select"];
+        }
+        if (widget === "filtered-select") {
+            return QUESTION_RENDERER_REGISTRY["select_multiple:filtered-select"];
+        }
+        if (widget === "discovery-select") {
+            return QUESTION_RENDERER_REGISTRY["select_multiple:discovery-select"];
+        }
+        if ((question.options || []).some((option) => { var _a; return Number.isInteger((_a = option.media) === null || _a === void 0 ? void 0 : _a.image) && option.media.image > 0; })) {
+            return QUESTION_RENDERER_REGISTRY["select_multiple:image-choice"];
+        }
+        return QUESTION_RENDERER_REGISTRY.select_multiple;
+    }
+    if (question.type === "range") {
+        if (question.appearance === "rating") {
+            return QUESTION_RENDERER_REGISTRY["range:rating"];
+        }
+        if (question.appearance === "nps") {
+            return QUESTION_RENDERER_REGISTRY["range:nps"];
+        }
+        if (question.appearance === "semantic-differential") {
+            return QUESTION_RENDERER_REGISTRY["range:semantic-differential"];
+        }
+        return QUESTION_RENDERER_REGISTRY.range;
+    }
+    return QUESTION_RENDERER_REGISTRY[question.type] || QUESTION_RENDERER_REGISTRY.default;
+}
+const GROUP_RENDERER_REGISTRY = {
+    "table-list": MatrixTableListGroup,
+};
+function resolveGroupRenderer(section) {
+    return GROUP_RENDERER_REGISTRY[section === null || section === void 0 ? void 0 : section.appearance] || null;
+}
+function QuestionField({ answers, contextAnswers, errors, groupsByName, hideDuplicateIntroTitle, language, onBlurSave, onChange, neutral = false, optionsByName, question, questionUiConfig, mediaUrl, renderOptionOverlay, surveyTitle, }) {
+    if (question.other_of) {
+        return null;
+    }
+    const value = answers[question.name];
+    const interpolationAnswers = contextAnswers || answers;
+    const label = interpolateSurveyText(localizeSurveyValue(question.labels, language), interpolationAnswers);
+    const hint = interpolateSurveyText(localizeSurveyValue(question.hints, language), interpolationAnswers);
+    const errorText = errors[question.name];
+    const resolvedQuestionUiConfig = resolveQuestionUiConfig(question, questionUiConfig);
+    const stagedGroupKey = getQuestionStagedGroupKey(question, questionUiConfig, groupsByName);
+    const stageOptions = stagedGroupKey ? { stagedGroup: stagedGroupKey } : {};
+    const options = buildLocalizedQuestionOptions(question, language, optionsByName[question.name]);
+    if (question.type === "calculate" || question.is_calculated) {
+        return null;
+    }
+    const Renderer = resolveQuestionRenderer(question, resolvedQuestionUiConfig);
+    return (_jsx(Renderer, { answers: answers, errorText: errorText, hideDuplicateIntroTitle: hideDuplicateIntroTitle, hint: hint, label: label, mediaUrl: mediaUrl, neutral: neutral, onBlurSave: onBlurSave, onChange: onChange, options: options, optionsByName: optionsByName, question: question, resolvedQuestionUiConfig: resolvedQuestionUiConfig, renderOptionOverlay: renderOptionOverlay ? (option) => renderOptionOverlay(question, option) : undefined, stageOptions: stageOptions, surveyTitle: surveyTitle, value: value }));
+}
+function getRepeatError(errors, repeatName, repeatIndex, questionName) {
+    return errors[`${repeatName}.${repeatIndex}.${questionName}`] || "";
+}
+function RepeatSection({ answers, entryIndex = null, errors, language, mediaUrl, onBlurSave, onChange, onRepeatAdd, onRepeatRemove, neutral = false, optionsByName, questionUiConfig, renderOptionOverlay, repeatEntries, repeatEvaluation, section, }) {
+    const { t } = useTranslation();
+    const repeatName = section.name;
+    const allEntries = Array.isArray(repeatEntries) ? repeatEntries : [];
+    const entries = entryIndex === null ? allEntries : allEntries.slice(entryIndex, entryIndex + 1);
+    const evaluationEntries = (repeatEvaluation === null || repeatEvaluation === void 0 ? void 0 : repeatEvaluation.entries) || [];
+    const sourceQuestion = detectRepeatSourceQuestion(section);
+    const titleQuestion = (section.questions || []).find((question) => isTitleNote(question, language));
+    return (_jsxs(Stack, { spacing: 2.5, children: [entries.map((entryAnswers, visibleIndex) => {
+                var _a, _b;
+                const repeatIndex = entryIndex === null ? visibleIndex : entryIndex + visibleIndex;
+                const entryVisibleQuestions = ((_a = evaluationEntries[repeatIndex]) === null || _a === void 0 ? void 0 : _a.visible_questions) || [];
+                const entryOptions = ((_b = evaluationEntries[repeatIndex]) === null || _b === void 0 ? void 0 : _b.options) || {};
+                const entryContext = Object.assign(Object.assign({}, answers), entryAnswers);
+                const repeatLabel = entryContext.place_label || entryContext.placeLabel || "";
+                const entryTitle = titleQuestion
+                    ? formatQuestionText(interpolateSurveyText(localizeSurveyValue(titleQuestion.labels, language), entryContext)).text
+                    : repeatLabel;
+                const repeatQuestions = entryVisibleQuestions.length > 0
+                    ? (section.questions || []).filter((question) => entryVisibleQuestions.includes(question.name))
+                    : section.questions || [];
+                const filteredRepeatQuestions = repeatQuestions.filter((question) => !(question.other_of || (titleQuestion && question.name === titleQuestion.name)));
+                return (_jsx(Paper, { sx: {
+                        backgroundColor: neutral ? "background.paper" : "rgba(255, 243, 249, 0.96)",
+                        border: "1px solid",
+                        borderColor: "rgba(17, 17, 17, 0.08)",
+                        boxShadow: "none",
+                        p: 2,
+                    }, children: _jsxs(Stack, { spacing: 2, children: [_jsxs(Stack, { alignItems: { xs: "stretch", sm: "center" }, direction: { xs: "column", sm: "row" }, justifyContent: "space-between", spacing: 1, children: [entryTitle ? _jsx(Typography, { sx: { whiteSpace: "pre-line" }, variant: "subtitle1", children: entryTitle }) : _jsx(Box, {}), !sourceQuestion ? (_jsx(Button, { color: "error", onClick: () => onRepeatRemove(repeatName, repeatIndex), variant: "outlined", children: t("surveyRenderer.REPEAT_REMOVE", "Remove") })) : null] }), _jsx(Divider, {}), filteredRepeatQuestions.map((question) => (_jsx("div", { "data-question-name": question.name, children: _jsx(QuestionField, { answers: entryAnswers, contextAnswers: entryContext, errors: { [question.name]: getRepeatError(errors, repeatName, repeatIndex, question.name) }, groupsByName: {}, language: language, mediaUrl: mediaUrl, onBlurSave: (questionName, value) => onBlurSave(questionName, value, { repeatName, repeatIndex }), onChange: (questionName, value, options = {}) => onChange(questionName, value, Object.assign(Object.assign({}, options), { repeatName, repeatIndex })), neutral: neutral, optionsByName: entryOptions, question: question, questionUiConfig: questionUiConfig, renderOptionOverlay: renderOptionOverlay }) }, `${repeatName}-${repeatIndex}-${question.name}`)))] }) }, `${repeatName}-${repeatIndex}`));
+            }), !sourceQuestion ? (_jsx(Button, { onClick: () => onRepeatAdd(repeatName), variant: "outlined", children: t("surveyRenderer.REPEAT_ADD", "Add entry") })) : null] }));
+}
+function mapInputType(inputType) {
+    if (["integer", "decimal"].includes(inputType)) {
+        return "number";
+    }
+    if (inputType === "date") {
+        return "date";
+    }
+    if (inputType === "time") {
+        return "time";
+    }
+    if (inputType === "dateTime") {
+        return "datetime-local";
+    }
+    if (["email", "url", "tel"].includes(inputType)) {
+        return inputType;
+    }
+    return "text";
+}
+function getRangeParameters(parameters) {
+    const values = parameters && typeof parameters === "object" ? parameters : {};
+    let min = Number(values.start);
+    let max = Number(values.end);
+    let step = Number(values.step);
+    if (!Number.isFinite(min)) {
+        min = 0;
+    }
+    if (!Number.isFinite(max) || max <= min) {
+        min = 0;
+        max = 10;
+    }
+    if (!Number.isFinite(step) || step <= 0) {
+        step = 1;
+    }
+    return { min, max, step };
+}
+function getSectionTitle(section, language, fallbackIndex, t) {
+    const directLabel = localizeSurveyValue(section === null || section === void 0 ? void 0 : section.labels, language);
+    if (directLabel) {
+        return directLabel;
+    }
+    return "";
+}
+function getPageNavigationLabel(pageItem, index, language, answers, t) {
+    var _a, _b;
+    if (!pageItem) {
+        return t("surveyRenderer.SECTION_DEFAULT", { index: index + 1 });
+    }
+    if (pageItem.pageType === "repeat") {
+        const repeatEntry = Array.isArray(answers === null || answers === void 0 ? void 0 : answers[(_a = pageItem.section) === null || _a === void 0 ? void 0 : _a.name])
+            ? ((_b = answers[pageItem.section.name]) === null || _b === void 0 ? void 0 : _b[pageItem.repeatIndex]) || {}
+            : {};
+        const repeatLabel = (repeatEntry === null || repeatEntry === void 0 ? void 0 : repeatEntry.place_label) || (repeatEntry === null || repeatEntry === void 0 ? void 0 : repeatEntry.placeLabel) || "";
+        const baseTitle = pageItem.title || t("surveyRenderer.SECTION_DEFAULT", { index: index + 1 });
+        return repeatLabel || baseTitle;
+    }
+    return pageItem.title || t("surveyRenderer.SECTION_DEFAULT", { index: index + 1 });
+}
+function getPageErrorKeys(pageItem) {
+    var _a;
+    if (!pageItem) {
+        return [];
+    }
+    if (pageItem.pageType === "section") {
+        return (pageItem.questions || []).map((question) => question.name);
+    }
+    if (pageItem.pageType === "repeat") {
+        return (((_a = pageItem.section) === null || _a === void 0 ? void 0 : _a.questions) || []).map((question) => `${pageItem.section.name}.${pageItem.repeatIndex}.${question.name}`);
+    }
+    return [];
+}
+function buildSubmitErrorSummary({ answers, errors, language, pageItems, t }) {
+    if (!errors || Object.keys(errors).length === 0) {
+        return [];
+    }
+    return pageItems
+        .map((pageItem, index) => {
+        const errorKeys = getPageErrorKeys(pageItem);
+        const errorCount = errorKeys.filter((errorKey) => Boolean(errors[errorKey])).length;
+        if (errorCount === 0) {
+            return null;
+        }
+        return {
+            errorCount,
+            index,
+            key: pageItem.key,
+            label: getPageNavigationLabel(pageItem, index, language, answers, t),
+        };
+    })
+        .filter(Boolean);
+}
+function detectRepeatSourceQuestion(section) {
+    const sourceQuestion = (section.questions || []).find((question) => /selected_at\(\s*[A-Za-z0-9_]+\s*,\s*position\(\)\s*-\s*1\s*\)/.test(question.calculation || ""));
+    if (!sourceQuestion) {
+        return null;
+    }
+    const match = (sourceQuestion.calculation || "").match(/selected_at\(\s*([A-Za-z0-9_]+)\s*,\s*position\(\)\s*-\s*1\s*\)/);
+    return match ? match[1] : null;
+}
+function getLeafGroups(groups, repeatGroupNames) {
+    const nonRepeatGroups = (groups || []).filter((group) => !repeatGroupNames.has(group.name));
+    const parentGroupNames = new Set();
+    nonRepeatGroups.forEach((group) => {
+        const path = Array.isArray(group.path || group.group_path) ? group.path || group.group_path : [];
+        path.forEach((entry) => {
+            if (entry !== group.name) {
+                parentGroupNames.add(entry);
+            }
+        });
+    });
+    return nonRepeatGroups
+        .filter((group) => !parentGroupNames.has(group.name))
+        .sort((left, right) => (left.order || 0) - (right.order || 0));
+}
+function buildOrderedPageItems({ answers, definition, allQuestions, evaluation, introQuestions, language, orderedLeafGroups, repeatGroupNames, surveyTitle, t, }) {
+    const pageItems = [];
+    const leafGroupNames = new Set(orderedLeafGroups.map((group) => group.name));
+    if (introQuestions.length > 0) {
+        pageItems.push({
+            key: "intro",
+            pageType: "section",
+            questions: introQuestions,
+            section: null,
+            title: surveyTitle,
+        });
+    }
+    (definition.groups || [])
+        .slice()
+        .sort((left, right) => (left.order || 0) - (right.order || 0))
+        .forEach((group, index) => {
+        var _a, _b;
+        if (repeatGroupNames.has(group.name)) {
+            const repeatQuestions = allQuestions.filter((question) => question.repeat === group.name);
+            const repeatEntries = Array.isArray(answers === null || answers === void 0 ? void 0 : answers[group.name]) ? answers[group.name] : [];
+            const repeatEvaluation = (_a = evaluation === null || evaluation === void 0 ? void 0 : evaluation.repeats) === null || _a === void 0 ? void 0 : _a[group.name];
+            const hasSourceQuestion = Boolean(detectRepeatSourceQuestion({ questions: repeatQuestions }));
+            const hasVisibleRepeatEntries = ((repeatEvaluation === null || repeatEvaluation === void 0 ? void 0 : repeatEvaluation.entries) || []).length > 0 || repeatEntries.length > 0;
+            if (hasSourceQuestion && !hasVisibleRepeatEntries) {
+                return;
+            }
+            const entryCount = Math.max(repeatEntries.length, ((_b = repeatEvaluation === null || repeatEvaluation === void 0 ? void 0 : repeatEvaluation.entries) === null || _b === void 0 ? void 0 : _b.length) || 0);
+            for (let repeatIndex = 0; repeatIndex < entryCount; repeatIndex += 1) {
+                pageItems.push({
+                    key: `repeat-${group.name}-${repeatIndex}`,
+                    pageType: "repeat",
+                    repeatIndex,
+                    section: Object.assign(Object.assign({}, group), { questions: repeatQuestions }),
+                    title: getSectionTitle(group, language, pageItems.length + index, t),
+                });
+            }
+            if (!hasSourceQuestion && entryCount === 0) {
+                pageItems.push({
+                    key: `repeat-${group.name}`,
+                    pageType: "repeat",
+                    repeatIndex: null,
+                    section: Object.assign(Object.assign({}, group), { questions: repeatQuestions }),
+                    title: getSectionTitle(group, language, pageItems.length + index, t),
+                });
+            }
+            return;
+        }
+        if (!leafGroupNames.has(group.name)) {
+            return;
+        }
+        const groupedQuestions = definition.questions.filter((question) => question.group === group.name);
+        if (groupedQuestions.length === 0) {
+            return;
+        }
+        pageItems.push({
+            key: group.name,
+            pageType: "section",
+            questions: groupedQuestions,
+            section: group,
+            title: getSectionTitle(group, language, pageItems.length + index, t),
+        });
+    });
+    const assignedQuestionNames = new Set(pageItems
+        .filter((item) => item.pageType === "section")
+        .flatMap((item) => (item.questions || []).map((question) => question.name)));
+    const remainingQuestions = definition.questions.filter((question) => {
+        if (question.repeat || assignedQuestionNames.has(question.name)) {
+            return false;
+        }
+        return (question.group_path || []).length > 0;
+    });
+    if (remainingQuestions.length > 0) {
+        pageItems.push({
+            key: "other",
+            pageType: "section",
+            questions: remainingQuestions,
+            section: null,
+            title: getSectionTitle(null, language, pageItems.length, t),
+        });
+    }
+    return pageItems;
+}
+function pageHasDiscoverySelect(pageItem, questionUiConfig) {
+    if ((pageItem === null || pageItem === void 0 ? void 0 : pageItem.pageType) !== "section") {
+        return false;
+    }
+    return (pageItem.questions || []).some((question) => { var _a; return ((_a = resolveQuestionUiConfig(question, questionUiConfig)) === null || _a === void 0 ? void 0 : _a.widget) === "discovery-select"; });
+}
+const SurveyRenderer = ({ answers, callToAction, description, currentPageKey = "", errors, enforceValidation = true, hideDuplicateIntroTitle = false, hideSurveyTitle = false, language, loading, mediaUrl, onAttemptNextPage, onBlurSave, onChange, onPageChange, onSubmit, onRepeatAdd, onRepeatRemove, optionsByName, questionUiConfig, neutral = false, renderGroupToolbar, renderOptionOverlay, renderQuestionToolbar, getQuestionDragProps, saving, summaryErrors = {}, submitAttempted = false, submitLabel, submitting, survey, }) => {
+    var _a;
+    const { t } = useTranslation();
+    const hasDefinition = Boolean(survey === null || survey === void 0 ? void 0 : survey.definition);
+    const definition = (survey === null || survey === void 0 ? void 0 : survey.definition) || { questions: [], groups: [], repeats: [] };
+    const evaluation = (survey === null || survey === void 0 ? void 0 : survey.evaluation) || { visible_questions: [], repeats: {} };
+    const groupsByName = React.useMemo(() => getGroupsByName(definition), [definition]);
+    const serverVisibleQuestionNames = React.useMemo(() => new Set(evaluation.visible_questions || []), [evaluation.visible_questions]);
+    const stagedQuestionNames = React.useMemo(() => new Set(getStagedQuestionNames(definition, questionUiConfig, groupsByName)), [definition, groupsByName, questionUiConfig]);
+    const visibleQuestions = React.useMemo(() => definition.questions.filter((question) => serverVisibleQuestionNames.has(question.name) || stagedQuestionNames.has(question.name)), [definition, serverVisibleQuestionNames, stagedQuestionNames]);
+    const repeatGroupNames = React.useMemo(() => new Set((definition.repeats || []).map((group) => group.name)), [definition]);
+    const orderedGroups = React.useMemo(() => getLeafGroups(definition.groups || [], repeatGroupNames), [definition, repeatGroupNames]);
+    const introQuestions = React.useMemo(() => visibleQuestions.filter((question) => (question.group_path || []).length === 0), [visibleQuestions]);
+    const pageItems = React.useMemo(() => buildOrderedPageItems({
+        answers,
+        definition: Object.assign(Object.assign({}, definition), { questions: visibleQuestions }),
+        allQuestions: definition.questions || [],
+        evaluation,
+        introQuestions,
+        language,
+        orderedLeafGroups: orderedGroups,
+        repeatGroupNames,
+        surveyTitle: (survey === null || survey === void 0 ? void 0 : survey.title) || "",
+        t,
+    }), [
+        answers,
+        definition,
+        evaluation,
+        introQuestions,
+        language,
+        orderedGroups,
+        repeatGroupNames,
+        survey === null || survey === void 0 ? void 0 : survey.title,
+        t,
+        visibleQuestions,
+    ]);
+    const [pageIndex, setPageIndex] = React.useState(0);
+    const [maxAccessiblePageIndex, setMaxAccessiblePageIndex] = React.useState(0);
+    const [pendingAdvanceFromPageKey, setPendingAdvanceFromPageKey] = React.useState("");
+    const touchStartRef = React.useRef(null);
+    const onPageChangeRef = React.useRef(onPageChange);
+    const lastRestoredPageKeyRef = React.useRef("");
+    const pageTopRef = React.useRef(null);
+    const previousPageIndexRef = React.useRef(0);
+    React.useEffect(() => {
+        onPageChangeRef.current = onPageChange;
+    }, [onPageChange]);
+    const navigateToIndex = React.useCallback((nextIndex) => {
+        const boundedIndex = Math.max(0, Math.min(nextIndex, Math.max(pageItems.length - 1, 0)));
+        const nextPage = pageItems[boundedIndex] || null;
+        setPageIndex(boundedIndex);
+        setMaxAccessiblePageIndex((current) => Math.max(current, boundedIndex));
+        if ((nextPage === null || nextPage === void 0 ? void 0 : nextPage.key) && onPageChangeRef.current) {
+            onPageChangeRef.current(nextPage.key);
+        }
+    }, [pageItems]);
+    const goToPreviousPage = React.useCallback(() => {
+        setPageIndex((current) => {
+            const nextIndex = Math.max(current - 1, 0);
+            const nextPage = pageItems[nextIndex] || null;
+            if ((nextPage === null || nextPage === void 0 ? void 0 : nextPage.key) && onPageChangeRef.current) {
+                onPageChangeRef.current(nextPage.key);
+            }
+            return nextIndex;
+        });
+    }, [pageItems]);
+    React.useEffect(() => {
+        setPageIndex(0);
+        setMaxAccessiblePageIndex(0);
+        setPendingAdvanceFromPageKey("");
+        lastRestoredPageKeyRef.current = "";
+    }, [survey === null || survey === void 0 ? void 0 : survey.version_id]);
+    React.useEffect(() => {
+        if (!currentPageKey || currentPageKey === lastRestoredPageKeyRef.current) {
+            return;
+        }
+        const nextIndex = pageItems.findIndex((item) => item.key === currentPageKey);
+        if (nextIndex >= 0) {
+            lastRestoredPageKeyRef.current = currentPageKey;
+            setMaxAccessiblePageIndex((current) => Math.max(current, nextIndex));
+            navigateToIndex(nextIndex);
+        }
+    }, [currentPageKey, navigateToIndex, pageItems]);
+    React.useEffect(() => {
+        if (pageIndex > Math.max(pageItems.length - 1, 0)) {
+            setPageIndex(Math.max(pageItems.length - 1, 0));
+        }
+    }, [pageIndex, pageItems.length]);
+    React.useEffect(() => {
+        setMaxAccessiblePageIndex((current) => Math.min(current, Math.max(pageItems.length - 1, 0)));
+    }, [pageItems.length]);
+    React.useEffect(() => {
+        if (!pendingAdvanceFromPageKey) {
+            return;
+        }
+        const sourceIndex = pageItems.findIndex((item) => item.key === pendingAdvanceFromPageKey);
+        if (sourceIndex < 0) {
+            setPendingAdvanceFromPageKey("");
+            return;
+        }
+        setPendingAdvanceFromPageKey("");
+        navigateToIndex(Math.min(sourceIndex + 1, Math.max(pageItems.length - 1, 0)));
+    }, [navigateToIndex, pageItems, pendingAdvanceFromPageKey]);
+    React.useEffect(() => {
+        var _a;
+        if (pageIndex === previousPageIndexRef.current) {
+            return;
+        }
+        previousPageIndexRef.current = pageIndex;
+        (_a = pageTopRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
+            behavior: "smooth",
+            block: "start",
+        });
+    }, [pageIndex]);
+    const currentPage = pageItems[pageIndex] || null;
+    const currentPageStagedGroupKey = getPageStagedGroupKey(currentPage, questionUiConfig, groupsByName);
+    const isLastPage = pageIndex === pageItems.length - 1;
+    const disableTouchPageSwipe = pageHasDiscoverySelect(currentPage, questionUiConfig);
+    const progressValue = pageItems.length > 0 ? ((pageIndex + 1) / pageItems.length) * 100 : 0;
+    const currentPageHasErrors = enforceValidation
+        ? getPageErrorKeys(currentPage).some((errorKey) => Boolean(errors === null || errors === void 0 ? void 0 : errors[errorKey]))
+        : false;
+    const submitErrorSummary = submitAttempted
+        ? buildSubmitErrorSummary({
+            answers,
+            errors: summaryErrors,
+            language,
+            pageItems,
+            t,
+        })
+        : [];
+    const attemptNextPage = React.useCallback(async () => {
+        if (isLastPage || !(currentPage === null || currentPage === void 0 ? void 0 : currentPage.key)) {
+            return;
+        }
+        if (onAttemptNextPage) {
+            const shouldContinue = await onAttemptNextPage({
+                currentPage,
+                pageErrorKeys: getPageErrorKeys(currentPage),
+                stagedGroupKey: currentPageStagedGroupKey,
+            });
+            if (shouldContinue === false) {
+                return;
+            }
+        }
+        setPendingAdvanceFromPageKey(currentPage.key);
+    }, [currentPage, currentPageStagedGroupKey, isLastPage, onAttemptNextPage]);
+    React.useEffect(() => {
+        const handleKeyDown = (event) => {
+            var _a, _b, _c;
+            const tagName = (_b = (_a = event.target) === null || _a === void 0 ? void 0 : _a.tagName) === null || _b === void 0 ? void 0 : _b.toLowerCase();
+            const isEditable = ((_c = event.target) === null || _c === void 0 ? void 0 : _c.isContentEditable) ||
+                ["input", "textarea", "select"].includes(tagName);
+            if (isEditable) {
+                return;
+            }
+            if (event.key === "ArrowLeft") {
+                event.preventDefault();
+                goToPreviousPage();
+            }
+            if (event.key === "ArrowRight" && !isLastPage) {
+                event.preventDefault();
+                void attemptNextPage();
+            }
+        };
+        window.addEventListener("keydown", handleKeyDown);
+        return () => window.removeEventListener("keydown", handleKeyDown);
+    }, [attemptNextPage, goToPreviousPage, isLastPage]);
+    const handlePageJumpChange = React.useCallback((event) => {
+        const nextIndex = Number(event.target.value);
+        // The free-jump relaxation below is a builder-only affordance (gated on `neutral`, the
+        // additive preview flag) -- NOT on `enforceValidation`, which is a real per-survey setting
+        // that also reaches the live public runtime. Gating on enforceValidation instead would let
+        // any published survey with validation disabled skip this bound for real respondents too.
+        if (!Number.isFinite(nextIndex) || (!neutral && nextIndex > maxAccessiblePageIndex)) {
+            return;
+        }
+        navigateToIndex(nextIndex);
+    }, [maxAccessiblePageIndex, navigateToIndex, neutral]);
+    const currentSectionTitleQuestion = (currentPage === null || currentPage === void 0 ? void 0 : currentPage.pageType) === "section"
+        ? (currentPage.questions || []).find((question) => isTitleNote(question, language, answers))
+        : null;
+    if (loading) {
+        return (_jsx(Stack, { alignItems: "center", py: 4, children: _jsx(CircularProgress, {}) }));
+    }
+    if (!hasDefinition) {
+        return _jsx(Alert, { severity: "warning", children: description });
+    }
+    return (_jsx(Card, { onTouchEnd: (event) => {
+            var _a;
+            if (disableTouchPageSwipe) {
+                touchStartRef.current = null;
+                return;
+            }
+            const touchStart = touchStartRef.current;
+            const touch = (_a = event.changedTouches) === null || _a === void 0 ? void 0 : _a[0];
+            if (!touchStart || !touch) {
+                return;
+            }
+            const deltaX = touch.clientX - touchStart.x;
+            const deltaY = touch.clientY - touchStart.y;
+            if (Math.abs(deltaX) < 60 || Math.abs(deltaX) <= Math.abs(deltaY)) {
+                return;
+            }
+            if (deltaX > 0) {
+                goToPreviousPage();
+                return;
+            }
+            if (!isLastPage) {
+                void attemptNextPage();
+            }
+        }, onTouchStart: (event) => {
+            var _a;
+            if (disableTouchPageSwipe) {
+                touchStartRef.current = null;
+                return;
+            }
+            const touch = (_a = event.touches) === null || _a === void 0 ? void 0 : _a[0];
+            if (!touch) {
+                return;
+            }
+            touchStartRef.current = { x: touch.clientX, y: touch.clientY };
+        }, sx: {
+            backgroundColor: neutral ? "background.paper" : "rgba(255, 243, 249, 0.96)",
+            border: "none",
+            boxShadow: "none",
+            maxWidth: "100%",
+            overflow: "visible",
+            overflowX: "clip",
+            pb: { xs: 2.5, md: 3 },
+            pt: { xs: 0.25, md: 0.5 },
+            px: { xs: 1, sm: 1.5, md: 3 },
+        }, children: _jsxs(Stack, { spacing: 3, sx: { minWidth: 0 }, children: [_jsx(Box, { ref: pageTopRef }), _jsxs(Box, { sx: { minWidth: 0 }, children: [!hideSurveyTitle ? (_jsx(Typography, { gutterBottom: true, sx: {
+                                overflowWrap: "anywhere",
+                                wordBreak: "break-word",
+                            }, variant: "h4", children: (survey === null || survey === void 0 ? void 0 : survey.title) || "" })) : null, description ? (_jsx(Typography, { color: "text.secondary", sx: {
+                                overflowWrap: "anywhere",
+                                whiteSpace: "pre-line",
+                                wordBreak: "break-word",
+                            }, children: description })) : null] }), (currentPage === null || currentPage === void 0 ? void 0 : currentPage.pageType) === "section" ? (() => {
+                    var _a, _b;
+                    const groupToolbar = renderGroupToolbar === null || renderGroupToolbar === void 0 ? void 0 : renderGroupToolbar(currentPage.section);
+                    const GroupRenderer = resolveGroupRenderer(currentPage.section);
+                    const groupContent = GroupRenderer ? (_jsx(GroupRenderer, { answers: answers, contextAnswers: answers, errors: errors, groupsByName: groupsByName, hideDuplicateIntroTitle: hideDuplicateIntroTitle, language: language, neutral: neutral, onBlurSave: onBlurSave, onChange: onChange, optionsByName: optionsByName, getQuestionDragProps: getQuestionDragProps, questionUiConfig: questionUiConfig, questions: currentPage.questions, renderOptionOverlay: renderOptionOverlay, renderQuestionToolbar: renderQuestionToolbar, section: currentPage.section, serverVisibleQuestionNames: serverVisibleQuestionNames, mediaUrl: mediaUrl, surveyTitle: (survey === null || survey === void 0 ? void 0 : survey.title) || "" })) : currentPage.questions
+                        .filter((question) => {
+                        if (question.other_of) {
+                            return false;
+                        }
+                        if (currentSectionTitleQuestion && question.name === currentSectionTitleQuestion.name) {
+                            return false;
+                        }
+                        return isQuestionVisible(question, answers, serverVisibleQuestionNames, questionUiConfig, groupsByName);
+                    })
+                        .map((question) => {
+                        const questionToolbar = renderQuestionToolbar === null || renderQuestionToolbar === void 0 ? void 0 : renderQuestionToolbar(question);
+                        const questionDragProps = (getQuestionDragProps === null || getQuestionDragProps === void 0 ? void 0 : getQuestionDragProps(question)) || {};
+                        const questionContent = (_jsx(QuestionField, { answers: answers, contextAnswers: answers, errors: errors, groupsByName: groupsByName, hideDuplicateIntroTitle: hideDuplicateIntroTitle, language: language, neutral: neutral, onBlurSave: onBlurSave, onChange: onChange, optionsByName: optionsByName, question: question, questionUiConfig: questionUiConfig, mediaUrl: mediaUrl, renderOptionOverlay: renderOptionOverlay, surveyTitle: (survey === null || survey === void 0 ? void 0 : survey.title) || "" }));
+                        if (!neutral && !questionToolbar && Object.keys(questionDragProps).length === 0) {
+                            return _jsx("div", { "data-question-name": question.name, children: questionContent }, question.name);
+                        }
+                        return (_jsxs(Box, Object.assign({ component: "div", "data-question-name": question.name, sx: {
+                                backgroundColor: neutral ? "background.default" : undefined,
+                                border: neutral ? "1px solid" : undefined,
+                                borderColor: neutral ? "divider" : undefined,
+                                borderRadius: neutral ? 2 : undefined,
+                                p: neutral ? { xs: 1.25, sm: 1.5 } : undefined,
+                                "&:hover, &:focus-within": neutral ? { borderColor: "primary.main" } : undefined,
+                            } }, questionDragProps, { children: [questionToolbar, questionContent] }), question.name));
+                    });
+                    return (_jsxs(Box, { component: "div", "data-group-name": (_a = currentPage.section) === null || _a === void 0 ? void 0 : _a.name, sx: neutral ? {
+                            backgroundColor: "background.paper",
+                            border: "1px solid",
+                            borderColor: "divider",
+                            borderLeft: "3px solid",
+                            borderLeftColor: "primary.main",
+                            borderRadius: 2,
+                            p: { xs: 1.5, sm: 2 },
+                        } : undefined, children: [groupToolbar, neutral && currentPage.title ? (_jsxs(Stack, { alignItems: "center", direction: "row", spacing: 1, sx: { mb: 2 }, children: [_jsx(Typography, { variant: "subtitle1", children: currentPage.title }), ((_b = currentPage.section) === null || _b === void 0 ? void 0 : _b.appearance) === "field-list" ? _jsx(Chip, { color: "primary", label: t("AiBuilder.PAGE_BADGE", { defaultValue: "Page" }), size: "small", variant: "outlined" }) : null] })) : null, _jsx(Stack, { spacing: 2.5, children: groupContent })] }, currentPage.key));
+                })() : null, (currentPage === null || currentPage === void 0 ? void 0 : currentPage.pageType) === "repeat" ? (_jsx(RepeatSection, { answers: answers, entryIndex: currentPage.repeatIndex, errors: errors, language: language, mediaUrl: mediaUrl, onBlurSave: onBlurSave, onChange: onChange, onRepeatAdd: onRepeatAdd, onRepeatRemove: onRepeatRemove, optionsByName: optionsByName, questionUiConfig: questionUiConfig, neutral: neutral, renderOptionOverlay: renderOptionOverlay, repeatEntries: answers[currentPage.section.name] || [], repeatEvaluation: (_a = evaluation.repeats) === null || _a === void 0 ? void 0 : _a[currentPage.section.name], section: currentPage.section }, currentPage.key)) : null, _jsxs(Stack, { spacing: 1.25, sx: { pt: 2 }, children: [submitErrorSummary.length > 0 ? (_jsx(Alert, { severity: "error", children: _jsxs(Stack, { spacing: 1.25, children: [_jsx(Typography, { fontWeight: 700, children: t("surveyRenderer.SUBMIT_ERRORS_TITLE") }), _jsx(Typography, { variant: "body2", children: t("surveyRenderer.SUBMIT_ERRORS_BODY") }), _jsx(Stack, { direction: { xs: "column", sm: "row" }, flexWrap: "wrap", gap: 1, children: submitErrorSummary.map((entry) => (_jsx(Button, { onClick: () => navigateToIndex(entry.index), size: "small", sx: { alignSelf: { xs: "stretch", sm: "flex-start" } }, variant: "outlined", children: `${entry.label} (${entry.errorCount})` }, entry.key))) })] }) })) : null, currentPageHasErrors ? (_jsx(Alert, { severity: "warning", children: t("surveyRenderer.FIX_ERRORS_BEFORE_CONTINUE") })) : null, _jsxs(Stack, { direction: "row", spacing: 1.5, children: [_jsx(Button, { disabled: pageIndex === 0, onClick: goToPreviousPage, sx: neutral ? { flex: 1, minHeight: 56 } : {
+                                        backgroundColor: "#f5bfd8",
+                                        color: "#7a2455",
+                                        flex: 1,
+                                        minHeight: 56,
+                                        "&:hover": {
+                                            backgroundColor: "#eeabc9",
+                                        },
+                                    }, variant: neutral ? "outlined" : "contained", children: t("surveyRenderer.PREVIOUS_QUESTION", {
+                                        defaultValue: "Back to the previous question",
+                                    }) }), !isLastPage ? (_jsx(Button, { onClick: () => {
+                                        void attemptNextPage();
+                                    }, sx: {
+                                        flex: 1,
+                                        minHeight: 56,
+                                    }, variant: "contained", children: t("surveyRenderer.NEXT_QUESTION", {
+                                        defaultValue: "Continue to the next question",
+                                    }) })) : (_jsx(Button, { disabled: submitting, onClick: onSubmit, sx: {
+                                        flex: 1,
+                                        minHeight: 56,
+                                    }, variant: "contained", children: submitLabel }))] }), callToAction] }), _jsxs(Box, { sx: {
+                        alignItems: { xs: "stretch", md: "center" },
+                        display: "grid",
+                        gap: 1.25,
+                        gridTemplateColumns: { xs: "1fr", md: "minmax(0, 1fr) 260px" },
+                    }, children: [_jsx(LinearProgress, { color: "primary", sx: {
+                                backgroundColor: "rgba(17, 17, 17, 0.08)",
+                                borderRadius: 999,
+                                height: 10,
+                                "& .MuiLinearProgress-bar": {
+                                    borderRadius: 999,
+                                },
+                            }, value: progressValue, variant: "determinate" }), pageItems.length > 1 && neutral ? (_jsx(Stack, { direction: "row", flexWrap: "wrap", gap: 1, children: pageItems.map((pageItem, index) => (_jsx(Button, { "aria-current": index === pageIndex ? "page" : undefined, onClick: () => navigateToIndex(index), size: "small", sx: { borderRadius: 999 }, variant: index === pageIndex ? "contained" : "outlined", children: getPageNavigationLabel(pageItem, index, language, answers, t) }, pageItem.key))) })) : pageItems.length > 1 ? (_jsx(TextField, { fullWidth: true, label: t("surveyRenderer.PAGE_JUMP"), onChange: handlePageJumpChange, select: true, size: "small", sx: {
+                                ".MuiOutlinedInput-root": {
+                                    backgroundColor: neutral ? "background.paper" : "rgba(255, 243, 249, 0.96)",
+                                },
+                            }, value: String(pageIndex), children: pageItems.map((pageItem, index) => (_jsx(MenuItem, { disabled: index > maxAccessiblePageIndex, value: String(index), children: getPageNavigationLabel(pageItem, index, language, answers, t) }, pageItem.key))) })) : null] })] }) }));
+};
+export default SurveyRenderer;