@micha.bigler/survey-renderer 0.1.0

package/dist/SurveyGeoSelect.js

@@ -0,0 +1,361 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import AddIcon from "@mui/icons-material/Add";
+import RemoveIcon from "@mui/icons-material/Remove";
+import { Alert, Autocomplete, Box, Chip, IconButton, Stack, TextField, } from "@mui/material";
+import { useTranslation } from "react-i18next";
+import { GeoJSON, MapContainer, Pane, TileLayer, useMap } from "react-leaflet";
+import "leaflet/dist/leaflet.css";
+import { getGeoDataset } from "./geoDatasets";
+import { normalizeLabel } from "./questionUiConfig";
+import SurveyQuestionHeader from "./SurveyQuestionHeader";
+const ESRI_LIGHT_BASE_TILE_URL = "https://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/{z}/{y}/{x}";
+const ESRI_LIGHT_REFERENCE_TILE_URL = "https://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Reference/MapServer/tile/{z}/{y}/{x}";
+const ESRI_ATTRIBUTION = "Tiles © Esri — Esri, DeLorme, NAVTEQ, TomTom, Intermap, iPC, USGS, FAO, NPS, NRCAN, GeoBase, Kadaster NL, Ordnance Survey, Esri Japan, METI, Esri China (Hong Kong), and the GIS User Community";
+function collectBoundsFromCoordinates(coordinates, bounds) {
+    if (!Array.isArray(coordinates)) {
+        return;
+    }
+    if (coordinates.length >= 2 && typeof coordinates[0] === "number" && typeof coordinates[1] === "number") {
+        const [lon, lat] = coordinates;
+        bounds.minLon = Math.min(bounds.minLon, lon);
+        bounds.maxLon = Math.max(bounds.maxLon, lon);
+        bounds.minLat = Math.min(bounds.minLat, lat);
+        bounds.maxLat = Math.max(bounds.maxLat, lat);
+        return;
+    }
+    coordinates.forEach((item) => collectBoundsFromCoordinates(item, bounds));
+}
+function getFeatureCollectionBounds(featureCollection) {
+    const bounds = {
+        minLon: Number.POSITIVE_INFINITY,
+        maxLon: Number.NEGATIVE_INFINITY,
+        minLat: Number.POSITIVE_INFINITY,
+        maxLat: Number.NEGATIVE_INFINITY,
+    };
+    ((featureCollection === null || featureCollection === void 0 ? void 0 : featureCollection.features) || []).forEach((feature) => {
+        var _a;
+        collectBoundsFromCoordinates((_a = feature === null || feature === void 0 ? void 0 : feature.geometry) === null || _a === void 0 ? void 0 : _a.coordinates, bounds);
+    });
+    if (!Number.isFinite(bounds.minLon) ||
+        !Number.isFinite(bounds.maxLon) ||
+        !Number.isFinite(bounds.minLat) ||
+        !Number.isFinite(bounds.maxLat)) {
+        return null;
+    }
+    return bounds;
+}
+function useGeoDataset(uiConfig) {
+    const dataset = React.useMemo(() => getGeoDataset(uiConfig === null || uiConfig === void 0 ? void 0 : uiConfig.datasetKey), [uiConfig === null || uiConfig === void 0 ? void 0 : uiConfig.datasetKey]);
+    const [featureCollection, setFeatureCollection] = React.useState(() => (dataset === null || dataset === void 0 ? void 0 : dataset.featureCollection) || null);
+    const [loading, setLoading] = React.useState(Boolean((dataset === null || dataset === void 0 ? void 0 : dataset.url) && !(dataset === null || dataset === void 0 ? void 0 : dataset.featureCollection)));
+    const [loadFailed, setLoadFailed] = React.useState(false);
+    React.useEffect(() => {
+        let active = true;
+        if (dataset === null || dataset === void 0 ? void 0 : dataset.featureCollection) {
+            setFeatureCollection(dataset.featureCollection);
+            setLoading(false);
+            setLoadFailed(false);
+            return () => {
+                active = false;
+            };
+        }
+        if (!(dataset === null || dataset === void 0 ? void 0 : dataset.url)) {
+            setFeatureCollection(null);
+            setLoading(false);
+            setLoadFailed(false);
+            return () => {
+                active = false;
+            };
+        }
+        const loadFeatureCollection = async () => {
+            if (active) {
+                setLoading(true);
+                setLoadFailed(false);
+            }
+            try {
+                const response = await fetch(dataset.url, { credentials: "same-origin" });
+                if (!response.ok) {
+                    throw new Error(`Geo dataset request failed with status ${response.status}`);
+                }
+                const nextFeatureCollection = await response.json();
+                if (active) {
+                    setFeatureCollection(nextFeatureCollection);
+                    setLoading(false);
+                }
+            }
+            catch (_error) {
+                if (active) {
+                    setFeatureCollection(null);
+                    setLoading(false);
+                    setLoadFailed(true);
+                }
+            }
+        };
+        loadFeatureCollection();
+        return () => {
+            active = false;
+        };
+    }, [dataset]);
+    return {
+        dataset,
+        featureCollection,
+        loading,
+        loadFailed,
+    };
+}
+function MapBoundsController({ featureCollection }) {
+    const map = useMap();
+    const hasFittedRef = React.useRef(false);
+    React.useEffect(() => {
+        if (hasFittedRef.current) {
+            return;
+        }
+        const bounds = getFeatureCollectionBounds(featureCollection);
+        if (!bounds) {
+            return;
+        }
+        map.invalidateSize();
+        const latPadding = (bounds.maxLat - bounds.minLat) * 0.01;
+        const lonPadding = (bounds.maxLon - bounds.minLon) * 0.01;
+        const paddedBounds = [
+            [bounds.minLat - latPadding, bounds.minLon - lonPadding],
+            [bounds.maxLat + latPadding, bounds.maxLon + lonPadding],
+        ];
+        map.fitBounds(paddedBounds, { maxZoom: 13.5, padding: [8, 8] });
+        hasFittedRef.current = true;
+    }, [featureCollection, map]);
+    return null;
+}
+function MapPolygonsLayer({ featureCollection, multiple = false, onSelect, selectedValueKeys }) {
+    const style = React.useCallback((feature) => {
+        var _a;
+        const optionValue = String(((_a = feature === null || feature === void 0 ? void 0 : feature.properties) === null || _a === void 0 ? void 0 : _a.optionValue) || "");
+        const isSelected = selectedValueKeys.has(optionValue);
+        return {
+            color: isSelected ? "#0DAED1" : "#332733",
+            fillColor: isSelected ? "#0DAED1" : "#f2dce8",
+            fillOpacity: isSelected ? 0.38 : 0.22,
+            opacity: 0.95,
+            weight: isSelected ? 3 : 1.4,
+        };
+    }, [selectedValueKeys]);
+    // Refs damit Leaflet-Closures immer den aktuellen Stand lesen.
+    // onEachFeature wird von Leaflet nur einmal aufgerufen (bei Layer-Erstellung),
+    // danach sind alle Closures eingefroren — Refs umgehen das Problem.
+    const styleRef = React.useRef(style);
+    styleRef.current = style;
+    const onSelectRef = React.useRef(onSelect);
+    onSelectRef.current = onSelect;
+    const onEachFeature = React.useCallback((feature, layer) => {
+        var _a, _b;
+        const optionValue = String(((_a = feature === null || feature === void 0 ? void 0 : feature.properties) === null || _a === void 0 ? void 0 : _a.optionValue) || "");
+        const optionLabel = ((_b = feature === null || feature === void 0 ? void 0 : feature.properties) === null || _b === void 0 ? void 0 : _b.optionLabel) || "";
+        if (!optionValue) {
+            return;
+        }
+        layer.on({
+            click: () => onSelectRef.current(optionValue, multiple),
+            mouseover: () => {
+                if (!(layer === null || layer === void 0 ? void 0 : layer._map)) {
+                    return;
+                }
+                layer.setStyle({ fillOpacity: 0.34, weight: 2.2 });
+            },
+            mouseout: () => {
+                if (!(layer === null || layer === void 0 ? void 0 : layer._map)) {
+                    return;
+                }
+                layer.setStyle(styleRef.current(feature));
+            },
+        });
+        if (optionLabel) {
+            layer.bindTooltip(optionLabel, {
+                direction: "center",
+                opacity: 0.92,
+                sticky: true,
+            });
+        }
+    }, [multiple]);
+    return (_jsx(Pane, { name: "districts", style: { zIndex: 450 }, children: _jsx(GeoJSON, { data: featureCollection, onEachFeature: onEachFeature, pane: "districts", style: style }) }));
+}
+function MapZoomControls() {
+    const { t } = useTranslation();
+    const map = useMap();
+    return (_jsxs(Stack, { spacing: 1, sx: {
+            left: 12,
+            position: "absolute",
+            top: 12,
+            zIndex: 500,
+        }, children: [_jsx(IconButton, { "aria-label": t("surveyRenderer.MAP_ZOOM_IN"), onClick: () => map.zoomIn(), size: "small", sx: {
+                    backgroundColor: "rgba(255, 255, 255, 0.94)",
+                    border: "1px solid rgba(17, 17, 17, 0.08)",
+                    borderRadius: 1.5,
+                    boxShadow: "0 8px 20px rgba(17, 17, 17, 0.12)",
+                    color: "#171117",
+                    "&:hover": {
+                        backgroundColor: "#ffffff",
+                        color: "#0DAED1",
+                    },
+                }, title: t("surveyRenderer.MAP_ZOOM_IN"), children: _jsx(AddIcon, { fontSize: "small" }) }), _jsx(IconButton, { "aria-label": t("surveyRenderer.MAP_ZOOM_OUT"), onClick: () => map.zoomOut(), size: "small", sx: {
+                    backgroundColor: "rgba(255, 255, 255, 0.94)",
+                    border: "1px solid rgba(17, 17, 17, 0.08)",
+                    borderRadius: 1.5,
+                    boxShadow: "0 8px 20px rgba(17, 17, 17, 0.12)",
+                    color: "#171117",
+                    "&:hover": {
+                        backgroundColor: "#ffffff",
+                        color: "#0DAED1",
+                    },
+                }, title: t("surveyRenderer.MAP_ZOOM_OUT"), children: _jsx(RemoveIcon, { fontSize: "small" }) })] }));
+}
+function LeafletMap({ featureCollection, multiple = false, onSelect, selectedValueKeys }) {
+    const isCoarsePointer = React.useMemo(() => {
+        if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+            return false;
+        }
+        return window.matchMedia("(pointer: coarse)").matches;
+    }, []);
+    return (_jsx(Box, { onClick: (event) => event.stopPropagation(), onTouchEnd: (event) => event.stopPropagation(), onTouchStart: (event) => event.stopPropagation(), sx: {
+            backgroundColor: "rgba(255, 243, 249, 0.96)",
+            border: "1px solid",
+            borderColor: "rgba(17, 17, 17, 0.08)",
+            borderRadius: 2,
+            height: { xs: 300, sm: 360 },
+            overflow: "hidden",
+            ".leaflet-container": {
+                backgroundColor: "#f8eef4",
+                display: "block",
+                fontFamily: "inherit",
+                height: "100%",
+                width: "100%",
+            },
+            ".leaflet-tile-pane": {
+                opacity: 0.92,
+            },
+            ".leaflet-control-attribution": {
+                backgroundColor: "rgba(255, 243, 249, 0.96)",
+                fontSize: "10px",
+            },
+            ".leaflet-tooltip": {
+                backgroundColor: "rgba(17, 17, 17, 0.78)",
+                border: "none",
+                borderRadius: "10px",
+                boxShadow: "none",
+                color: "#ffffff",
+                padding: "4px 8px",
+            },
+            ".leaflet-tooltip:before": {
+                display: "none",
+            },
+        }, children: _jsxs(MapContainer, { attributionControl: true, boxZoom: false, center: [47.5596, 7.5886], doubleClickZoom: false, dragging: !isCoarsePointer, maxZoom: 13.5, minZoom: 11, scrollWheelZoom: false, style: { height: "100%", minHeight: "300px", width: "100%" }, tap: false, touchZoom: false, zoom: 12.5, zoomSnap: 0.5, zoomDelta: 0.5, zoomControl: false, children: [_jsx(TileLayer, { attribution: ESRI_ATTRIBUTION, maxNativeZoom: 13, maxZoom: 13.5, url: ESRI_LIGHT_BASE_TILE_URL }), _jsx(TileLayer, { attribution: ESRI_ATTRIBUTION, maxNativeZoom: 13, maxZoom: 13.5, opacity: 0.45, url: ESRI_LIGHT_REFERENCE_TILE_URL }), _jsx(MapZoomControls, {}), _jsx(MapBoundsController, { featureCollection: featureCollection }), _jsx(MapPolygonsLayer, { featureCollection: featureCollection, multiple: multiple, onSelect: onSelect, selectedValueKeys: selectedValueKeys })] }) }));
+}
+function buildFeatureEntries(options, uiConfig, featureCollection, dataset) {
+    const features = Array.isArray(featureCollection === null || featureCollection === void 0 ? void 0 : featureCollection.features) ? featureCollection.features : [];
+    const featureLabelProperty = (uiConfig === null || uiConfig === void 0 ? void 0 : uiConfig.featureLabelProperty) || (dataset === null || dataset === void 0 ? void 0 : dataset.featureLabelProperty) || "name";
+    const optionByLabel = new Map(options.map((option) => [normalizeLabel(option.label), option]));
+    return features.map((feature, index) => {
+        var _a, _b;
+        const featureLabel = ((_a = feature === null || feature === void 0 ? void 0 : feature.properties) === null || _a === void 0 ? void 0 : _a[featureLabelProperty]) || "";
+        const matchedOption = optionByLabel.get(normalizeLabel(featureLabel)) || null;
+        return {
+            type: "Feature",
+            geometry: (feature === null || feature === void 0 ? void 0 : feature.geometry) || null,
+            properties: {
+                id: (feature === null || feature === void 0 ? void 0 : feature.id) || ((_b = feature === null || feature === void 0 ? void 0 : feature.properties) === null || _b === void 0 ? void 0 : _b.ID) || `${featureLabel}-${index}`,
+                optionLabel: (matchedOption === null || matchedOption === void 0 ? void 0 : matchedOption.label) || "",
+                optionValue: (matchedOption === null || matchedOption === void 0 ? void 0 : matchedOption.value) || "",
+            },
+        };
+    });
+}
+function defaultPlaceholderKey(multiple) {
+    return multiple ? "surveyRenderer.MAP_MULTI_AUTOCOMPLETE_PLACEHOLDER" : "surveyRenderer.MAP_AUTOCOMPLETE_PLACEHOLDER";
+}
+const SurveyGeoSelect = ({ errorText, hint, label, maxSelections = 1, multiple = false, onChange, options, uiConfig, value, }) => {
+    const { t } = useTranslation();
+    const { dataset, featureCollection: rawFeatureCollection, loading, loadFailed } = useGeoDataset(uiConfig);
+    const normalizedMultipleValue = React.useMemo(() => (Array.isArray(value) ? value.map((entry) => String(entry)) : []), [value]);
+    const [localSelectedValues, setLocalSelectedValues] = React.useState(normalizedMultipleValue);
+    const preparedFeatures = React.useMemo(() => buildFeatureEntries(options, uiConfig, rawFeatureCollection, dataset), [dataset, options, rawFeatureCollection, uiConfig]);
+    const featureCollection = React.useMemo(() => ({
+        type: "FeatureCollection",
+        features: preparedFeatures.filter((feature) => feature.geometry),
+    }), [preparedFeatures]);
+    React.useEffect(() => {
+        if (!multiple) {
+            return;
+        }
+        setLocalSelectedValues(normalizedMultipleValue);
+    }, [multiple, normalizedMultipleValue]);
+    const selectedValues = multiple ? localSelectedValues : [value || ""];
+    const selectedValueKeys = React.useMemo(() => new Set(selectedValues.map((entry) => String(entry || "")).filter(Boolean)), [selectedValues]);
+    const selectedItems = options.filter((option) => selectedValueKeys.has(String(option.value)));
+    const selectedItem = selectedItems[0] || null;
+    const hasMapFeatures = ((featureCollection === null || featureCollection === void 0 ? void 0 : featureCollection.features) || []).length > 0;
+    const placeholderKey = (uiConfig === null || uiConfig === void 0 ? void 0 : uiConfig.autocompletePlaceholderKey) || defaultPlaceholderKey(multiple);
+    const handleSelect = React.useCallback((nextValue) => {
+        if (!multiple) {
+            onChange(nextValue);
+            return;
+        }
+        const nextValueKey = String(nextValue || "");
+        const alreadySelected = selectedValues.some((entry) => String(entry) === nextValueKey);
+        if (alreadySelected) {
+            const nextValues = selectedValues.filter((entry) => String(entry) !== nextValueKey);
+            setLocalSelectedValues(nextValues);
+            onChange(nextValues);
+            return;
+        }
+        if (selectedValues.length >= maxSelections) {
+            return;
+        }
+        const nextValues = [...selectedValues, nextValueKey];
+        setLocalSelectedValues(nextValues);
+        onChange(nextValues);
+    }, [maxSelections, multiple, onChange, selectedValues]);
+    const handleAutocompleteChange = React.useCallback((_event, nextOption) => {
+        if (!multiple) {
+            onChange((nextOption === null || nextOption === void 0 ? void 0 : nextOption.value) || "");
+            return;
+        }
+        const nextValues = (nextOption || []).map((entry) => String(entry.value)).slice(0, maxSelections);
+        setLocalSelectedValues(nextValues);
+        onChange(nextValues);
+    }, [maxSelections, multiple, onChange]);
+    return (_jsxs(Stack, { spacing: 1.5, children: [(label || hint || errorText) ? (_jsx(SurveyQuestionHeader, { errorText: errorText, hint: hint, label: label })) : null, hasMapFeatures ? (_jsx(LeafletMap, { featureCollection: featureCollection, multiple: multiple, onSelect: handleSelect, selectedValueKeys: selectedValueKeys })) : loading ? (_jsx(Alert, { severity: "info", children: t((uiConfig === null || uiConfig === void 0 ? void 0 : uiConfig.loadingMessageKey) || "surveyRenderer.MAP_LOADING") })) : (_jsx(Alert, { severity: loadFailed ? "warning" : "info", children: t((uiConfig === null || uiConfig === void 0 ? void 0 : uiConfig.emptyMessageKey) || (loadFailed ? "surveyRenderer.MAP_DATA_PENDING" : "surveyRenderer.MAP_AUTOCOMPLETE_EMPTY")) })), multiple && selectedValues.length >= maxSelections ? (_jsx(Alert, { severity: "info", children: t("surveyRenderer.MAP_MAX_REACHED", { max: maxSelections }) })) : null, _jsx(Autocomplete, { fullWidth: true, getOptionLabel: (option) => option.label || "", isOptionEqualToValue: (option, candidate) => option.value === candidate.value, multiple: multiple, noOptionsText: t((uiConfig === null || uiConfig === void 0 ? void 0 : uiConfig.emptyMessageKey) || "surveyRenderer.MAP_AUTOCOMPLETE_EMPTY", "Keine passenden Quartiere gefunden"), onChange: handleAutocompleteChange, options: options, renderTags: (tagValue, getTagProps) => tagValue.map((option, index) => {
+                    const _a = getTagProps({ index }), { key } = _a, tagProps = __rest(_a, ["key"]);
+                    return (_createElement(Chip, Object.assign({}, tagProps, { key: key, label: option.label, sx: {
+                            backgroundColor: "#ffffff",
+                            border: "1px solid rgba(15, 23, 42, 0.10)",
+                            borderRadius: 999,
+                            fontSize: 14,
+                            fontWeight: 600,
+                            height: 34,
+                            px: 0.5,
+                        } })));
+                }), renderInput: (params) => (_jsx(TextField, Object.assign({}, params, { placeholder: t(placeholderKey, "Quartier eingeben oder auswählen"), sx: {
+                        ".MuiAutocomplete-tag": {
+                            margin: "4px 6px 4px 0",
+                        },
+                        ".MuiOutlinedInput-root": {
+                            backgroundColor: "rgba(255, 243, 249, 0.96)",
+                            borderRadius: 3,
+                            paddingBottom: multiple ? "8px !important" : undefined,
+                            paddingTop: multiple ? "8px !important" : undefined,
+                        },
+                    } }))), value: multiple ? selectedItems : selectedItem })] }));
+};
+export default SurveyGeoSelect;

package/dist/SurveyMapSelect.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import SurveyGeoSelect from "./SurveyGeoSelect";
+const SurveyMapSelect = (props) => _jsx(SurveyGeoSelect, Object.assign({}, props));
+export default SurveyMapSelect;

package/dist/SurveyQuestionHeader.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { Alert, Box, Stack, Typography } from "@mui/material";
+const richTextLinkSx = {
+    backgroundColor: "rgba(13, 174, 209, 0.12)",
+    borderRadius: 1,
+    boxDecorationBreak: "clone",
+    color: "primary.dark",
+    display: "inline",
+    fontWeight: 600,
+    px: 0.35,
+    py: 0.1,
+    textDecoration: "underline",
+    textDecorationColor: "rgba(13, 174, 209, 0.72)",
+    textDecorationThickness: "0.08em",
+    textUnderlineOffset: "0.16em",
+    transition: "background-color 150ms ease, text-decoration-color 150ms ease, color 150ms ease",
+    wordBreak: "break-word",
+    "&:hover": {
+        backgroundColor: "rgba(13, 174, 209, 0.18)",
+        textDecorationColor: "rgba(13, 174, 209, 0.95)",
+    },
+};
+export function renderRichText(text, keyPrefix = "rich-text") {
+    const parts = String(text)
+        .split(/(\*\*[\s\S]+?\*\*|\[[^\]]+\]\(https?:\/\/[^\s)]+\)|https?:\/\/[^\s<]+)/g)
+        .filter(Boolean);
+    return parts.map((part, index) => {
+        const boldMatch = part.match(/^\*\*(.+)\*\*$/);
+        if (boldMatch) {
+            return (_jsx(Box, { component: "strong", sx: { fontWeight: 700 }, children: renderRichText(boldMatch[1], `${keyPrefix}-bold-${index}`) }, `${keyPrefix}-bold-${index}`));
+        }
+        const markdownLinkMatch = part.match(/^\[([^\]]+)\]\((https?:\/\/[^\s)]+)\)$/);
+        if (markdownLinkMatch) {
+            return (_jsx(Box, { component: "a", href: markdownLinkMatch[2], onClick: (event) => event.stopPropagation(), rel: "noreferrer", sx: richTextLinkSx, target: "_blank", children: renderRichText(markdownLinkMatch[1], `${keyPrefix}-link-label-${index}`) }, `${keyPrefix}-link-${index}`));
+        }
+        const urlMatch = part.match(/^(https?:\/\/[^\s<]+)$/);
+        if (urlMatch) {
+            return (_jsx(Box, { component: "a", href: urlMatch[1], onClick: (event) => event.stopPropagation(), rel: "noreferrer", sx: richTextLinkSx, target: "_blank", children: urlMatch[1] }, `${keyPrefix}-url-${index}`));
+        }
+        return _jsx(React.Fragment, { children: part }, `${part}-${index}`);
+    });
+}
+const SurveyQuestionHeader = ({ errorText, hint, label }) => (_jsxs(Stack, { spacing: 0.5, children: [_jsx(Typography, { sx: {
+                fontSize: { xs: "1.15rem", md: "1.25rem" },
+                fontWeight: 700,
+                lineHeight: 1.45,
+                whiteSpace: "pre-line",
+            }, variant: "h6", children: renderRichText(label, "question-label") }), hint ? (_jsx(Typography, { color: "text.secondary", sx: { whiteSpace: "pre-line" }, children: renderRichText(hint, "question-hint") })) : null, errorText ? _jsx(Alert, { severity: "error", children: errorText }) : null] }));
+export default SurveyQuestionHeader;