@opengovsg/confetti 0.0.0

package/build/index.js

@@ -0,0 +1,1155 @@
+import { ErrorBoundary } from "react-error-boundary";
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { z } from "zod/v4/mini";
+import { useLocalStorage, useTimeout } from "usehooks-ts";
+import ky from "ky";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { Button, Checkbox, CheckboxGroup, FieldError, Input, Label, Radio, RadioGroup, Text, TextArea, TextField, composeRenderProps } from "react-aria-components";
+
+//#region src/logic/route.ts
+const isVisible = ({ index, questions, answers }) => {
+	if (index === 0) return true;
+	for (let i = 0; i < index; i++) {
+		const question = questions[i];
+		const answer = question ? answers[question.id] : void 0;
+		if (!question || !question.visible) continue;
+		const logic = question.routingLogic;
+		if (logic.type === "always") if (evaluateTarget({
+			position: i,
+			value: logic.target
+		}) === index) return true;
+		else continue;
+		if ((answer === void 0 || answer === null) && question.required) continue;
+		const cases = logic.cases;
+		const match = answer !== null ? cases.find((condition) => evaluateCondition({
+			answer,
+			condition
+		})) : void 0;
+		if (!match) if (evaluateTarget({
+			position: i,
+			value: logic.default
+		}) === index) return true;
+		else continue;
+		if (evaluateTarget({
+			position: i,
+			value: match.target
+		}) === index) return true;
+		else continue;
+	}
+	return false;
+};
+const evaluateTarget = ({ position, value }) => {
+	switch (value.type) {
+		case "next": return position + 1;
+		case "jump": return value.target;
+		case "end": return null;
+	}
+};
+const evaluateCondition = ({ answer, condition }) => {
+	const value = evaluateValue(condition.value);
+	switch (condition.operator) {
+		case "equal": return answer === value;
+		case "not-equal": return answer !== value;
+		case "greater": return typeof answer === "number" && typeof value === "number" && answer > value;
+		case "greater-or-equal": return typeof answer === "number" && typeof value === "number" && answer >= value;
+		case "less": return typeof answer === "number" && typeof value === "number" && answer < value;
+		case "less-or-equal": return typeof answer === "number" && typeof value === "number" && answer <= value;
+		case "contains": return Array.isArray(answer) && typeof value === "string" && answer.includes(value);
+		case "not-contains": return Array.isArray(answer) && typeof value === "string" && !answer.includes(value);
+	}
+};
+const evaluateValue = (node) => {
+	return node.value;
+};
+
+//#endregion
+//#region ../validators/src/questions/routing.ts
+const nextTargetSchema = z.object({ type: z.literal("next") });
+const endTargetSchema = z.object({ type: z.literal("end") });
+const jumpTargetSchema = z.object({
+	type: z.literal("jump"),
+	target: z.number({ error: "Target question is required" })
+});
+const conditionTargetSchema = z.discriminatedUnion("type", [
+	nextTargetSchema,
+	jumpTargetSchema,
+	endTargetSchema
+]);
+const valueNode = z.object({
+	type: z.literal("value"),
+	value: z.union([z.string().check(z.trim(), z.minLength(1, { error: "Value is required" })), z.number({ error: "Value is required" })])
+});
+const binaryOperatorConditionSchema = z.object({
+	type: z.literal("binary-operator"),
+	operator: z.union([
+		z.literal("equal"),
+		z.literal("not-equal"),
+		z.literal("greater"),
+		z.literal("greater-or-equal"),
+		z.literal("less"),
+		z.literal("less-or-equal"),
+		z.literal("contains"),
+		z.literal("not-contains")
+	]),
+	value: valueNode,
+	target: conditionTargetSchema
+});
+const switchConditionSchema = z.object({
+	type: z.literal("switch"),
+	cases: z.array(binaryOperatorConditionSchema),
+	default: conditionTargetSchema
+});
+const alwaysConditionSchema = z.object({
+	type: z.literal("always"),
+	target: conditionTargetSchema
+});
+const routingLogicSchema = z.discriminatedUnion("type", [alwaysConditionSchema, switchConditionSchema]);
+
+//#endregion
+//#region ../validators/src/questions/properties.ts
+const optionSchema = z.object({
+	label: z.string().check(z.trim(), z.minLength(1, { error: "Label is required" })),
+	value: z.string().check(z.trim(), z.minLength(1, { error: "Value is required" }))
+});
+const editableSchema = z.nullable(z.object({
+	label: z.string().check(z.trim(), z.minLength(1, { error: "Label is required" })),
+	max: z.number()
+}));
+const ratingQuestionSchema = z.object({
+	type: z.literal("rating"),
+	scale: z.number().check(z.minimum(2), z.maximum(10)),
+	labels: z.optional(z.object({
+		lower: z.string().check(z.trim(), z.minLength(1, { error: "The rating label is required" })),
+		upper: z.string().check(z.trim(), z.minLength(1, { error: "The rating label is required" }))
+	})),
+	display: z.optional(z.literal([
+		"star",
+		"emoji",
+		"number"
+	]))
+});
+const textQuestionSchema = z.object({
+	type: z.literal("open-ended"),
+	max: z.number()
+});
+const singleSelectQuestionSchema = z.object({
+	type: z.literal("single-select"),
+	options: z.array(optionSchema),
+	editable: editableSchema
+});
+const multiSelectQuestionSchema = z.object({
+	type: z.literal("multi-select"),
+	options: z.array(optionSchema),
+	editable: editableSchema,
+	max: z.optional(z.number())
+});
+const questionPropertiesSchema = z.discriminatedUnion("type", [
+	ratingQuestionSchema,
+	singleSelectQuestionSchema,
+	textQuestionSchema,
+	multiSelectQuestionSchema
+]);
+
+//#endregion
+//#region ../validators/src/questions/constants.ts
+const CHECKBOX_OTHERS_VALUE = "__CONFETTI_CHECKBOX_Others";
+const RADIO_OTHERS_VALUE = "__CONFETTI_RADIO_Others";
+
+//#endregion
+//#region ../validators/src/questions/answers.ts
+const baseRatingAnswerSchema = (scale) => z.number().check(z.int(), z.minimum(1), z.maximum(scale));
+const ratingAnswerSchemaFactory = ({ scale }, { required }) => {
+	const baseSchema = baseRatingAnswerSchema(scale);
+	return required ? baseSchema : z.optional(baseSchema);
+};
+const openEndedAnswerSchemaFactory = ({ maxLength }, { required }) => z.string().check(z.trim(), ...required ? [z.minLength(1, { error: "This field is required" })] : [], z.maxLength(maxLength ?? 2048, { error: ({ maximum }) => `Please enter less than ${maximum} characters` }));
+const baseSingleSelectAnswerSchema = (maxLength, required) => z.string().check(z.trim(), ...required ? [z.minLength(1, { error: "This field is required" })] : [], z.maxLength(maxLength ?? 1024, { error: ({ maximum }) => `Please enter less than ${maximum} characters` }), z.refine((val) => val !== RADIO_OTHERS_VALUE, { error: "Please fill out the free text field" }));
+const singleSelectAnswerSchemaFactory = ({ maxLength }, { required }) => {
+	const baseSchema = baseSingleSelectAnswerSchema(maxLength, required);
+	return required ? baseSchema : z.optional(baseSchema);
+};
+const multiSelectAnswerSchemaFactory = ({ maxSelected, maxLength }, { required }) => z.array(z.string().check(z.trim(), ...required ? [z.minLength(1, { error: "This field is required" })] : [], z.maxLength(maxLength ?? 1024, { error: ({ maximum }) => `Please enter less than ${maximum} characters` }), z.refine((val) => val !== CHECKBOX_OTHERS_VALUE, { error: "Please fill out the free text field" }))).check(...required ? [z.minLength(1, { error: "Please select at least one option" })] : [], z.maxLength(maxSelected ?? 1024, { error: ({ maximum }) => `Please select less than ${maximum} options` }));
+
+//#endregion
+//#region ../validators/src/survey.ts
+const publicGetSurveyOutputSchema = z.object({
+	title: z.string(),
+	description: z.nullable(z.string()),
+	questions: z.array(z.object({
+		id: z.string(),
+		title: z.string(),
+		description: z.nullable(z.string()),
+		position: z.number(),
+		required: z.boolean(),
+		properties: questionPropertiesSchema,
+		routingLogic: routingLogicSchema
+	}))
+});
+
+//#endregion
+//#region ../validators/src/response.ts
+const publicPutResponseInputSchema = z.object({
+	respondent: z.string().check(z.trim(), z.minLength(1), z.maxLength(2048)),
+	data: z.record(z.string(), z.union([
+		z.string().check(z.trim(), z.maxLength(2048)),
+		z.number(),
+		z.array(z.string().check(z.trim(), z.maxLength(2048))).check(z.maxLength(1024))
+	])),
+	metadata: z.record(z.string().check(z.trim(), z.maxLength(1e3)), z.string().check(z.trim(), z.maxLength(1e3)))
+});
+const publicGetRespondentOutputSchema = z.object({ lastRespondedAt: z.nullable(z.union([z.iso.datetime(), z.date()])) });
+
+//#endregion
+//#region src/logic/validate.ts
+const VALIDATOR_FACTORY_MAP = {
+	rating: ({ scale }, meta) => ratingAnswerSchemaFactory({ scale }, meta),
+	"open-ended": ({ max }, meta) => openEndedAnswerSchemaFactory({ maxLength: max }, meta),
+	"single-select": ({ editable }, meta) => singleSelectAnswerSchemaFactory({ maxLength: editable?.max }, meta),
+	"multi-select": ({ editable, max }, meta) => multiSelectAnswerSchemaFactory({
+		maxLength: editable?.max,
+		maxSelected: max
+	}, meta)
+};
+const getAnswerValidator = (properties, meta) => {
+	const type = properties.type;
+	switch (type) {
+		case "rating": {
+			const validator = VALIDATOR_FACTORY_MAP[type];
+			return validator(properties, meta);
+		}
+		case "open-ended": {
+			const validator = VALIDATOR_FACTORY_MAP[type];
+			return validator(properties, meta);
+		}
+		case "single-select": {
+			const validator = VALIDATOR_FACTORY_MAP[type];
+			return validator(properties, meta);
+		}
+		case "multi-select": {
+			const validator = VALIDATOR_FACTORY_MAP[type];
+			return validator(properties, meta);
+		}
+		default: throw new Error("Unsupported question type");
+	}
+};
+
+//#endregion
+//#region src/utils.ts
+function prettifyError(error) {
+	return error.issues[0]?.message ?? "Invalid input";
+}
+
+//#endregion
+//#region src/logic/api.ts
+const API_HOST = "https://confetti.hack2026.gov.sg/api/cfti";
+const client = ky.create({
+	prefixUrl: API_HOST,
+	retry: {
+		limit: 3,
+		methods: ["get"]
+	},
+	timeout: 6e4
+});
+
+//#endregion
+//#region src/components/ConfettiProvider.tsx
+const ConfettiContext = createContext(null);
+const ConfettiProvider = ({ children, surveyId, publishableKey, respondent, metadata, isSurveyVisible: isSurveyVisibleInput, apiBaseUrl }) => {
+	const [survey, setSurvey] = useState();
+	const [lastRespondedAt, setLastRespondedAt] = useState();
+	const responseId = useMemo(() => crypto.randomUUID(), []);
+	const [internalRespondentId, setInternalRespondentId] = useLocalStorage(`cfti:${surveyId}:respondent`, "");
+	useEffect(() => {
+		if (internalRespondentId) return;
+		setInternalRespondentId(crypto.randomUUID());
+	}, [internalRespondentId, setInternalRespondentId]);
+	const client$1 = useMemo(() => {
+		const properties = { headers: { "x-cfti-pk": publishableKey } };
+		if (apiBaseUrl) properties.prefixUrl = apiBaseUrl;
+		return client.extend(properties);
+	}, [apiBaseUrl, publishableKey]);
+	useEffect(() => {
+		client$1.get(`${surveyId}`).json().then((data) => {
+			const parseResult = publicGetSurveyOutputSchema.safeParse(data);
+			if (!parseResult.success) return;
+			setSurvey(parseResult.data);
+		});
+		if (!respondent && !internalRespondentId) return;
+		client$1.get(`${surveyId}/respondent/${respondent ?? internalRespondentId}`).json().then((data) => {
+			const parseResult = publicGetRespondentOutputSchema.safeParse(data);
+			if (!parseResult.success) {
+				setLastRespondedAt(null);
+				return;
+			}
+			setLastRespondedAt(parseResult.data.lastRespondedAt ? new Date(parseResult.data.lastRespondedAt) : null);
+		});
+	}, [
+		apiBaseUrl,
+		client$1,
+		internalRespondentId,
+		respondent,
+		surveyId
+	]);
+	const submit = useCallback(async ({ answers }) => {
+		await client$1.put(`${surveyId}/response/${responseId}`, { json: {
+			respondent: respondent ?? internalRespondentId,
+			data: answers,
+			metadata
+		} });
+	}, [
+		client$1,
+		internalRespondentId,
+		metadata,
+		respondent,
+		responseId,
+		surveyId
+	]);
+	const dismiss = useCallback(() => {
+		setSurvey(void 0);
+	}, []);
+	if (!useMemo(() => {
+		if (isSurveyVisibleInput === void 0) return true;
+		if (typeof isSurveyVisibleInput === "boolean") return isSurveyVisibleInput;
+		if (lastRespondedAt === void 0) return false;
+		return isSurveyVisibleInput({ lastRespondedAt });
+	}, [isSurveyVisibleInput, lastRespondedAt]) || !survey) return null;
+	return /* @__PURE__ */ jsx(ConfettiContext.Provider, {
+		value: {
+			submit,
+			dismiss,
+			surveyId,
+			survey,
+			metadata
+		},
+		children
+	});
+};
+const useConfetti = () => {
+	const context = useContext(ConfettiContext);
+	if (!context) throw new Error("useConfetti must be used within a ConfettiProvider");
+	return context;
+};
+
+//#endregion
+//#region src/components/ConfettiController.tsx
+const getNextQuestionState = ({ originalQuestions, answers, errors, pointer = -1 }) => {
+	if (!originalQuestions) return {
+		questions: [],
+		currentIndex: -1
+	};
+	const questions = originalQuestions.sort((a, b) => a.position - b.position).map((question) => {
+		const obj = { ...question };
+		const error = errors[question.id];
+		if (error) obj.error = error;
+		return {
+			...obj,
+			visible: false
+		};
+	});
+	for (let i = 0; i < questions.length; i++) {
+		const question = questions[i];
+		if (!question) continue;
+		question.visible = isVisible({
+			index: i,
+			questions,
+			answers
+		});
+	}
+	let nextIndex = questions.findIndex((q, i) => i > pointer && q.visible && answers[q.id] === void 0);
+	if (nextIndex === -1) nextIndex = questions.findLastIndex((q) => !!q.visible);
+	return {
+		questions,
+		currentIndex: nextIndex
+	};
+};
+const getSubmittableAnswers = ({ questions, answers }) => {
+	return Object.fromEntries(Object.entries(answers).filter(([id]) => !!questions.find((question) => question.id === id)?.visible).filter(([, answer]) => answer !== null));
+};
+const ConfettiController = ({ current: currentProp, shouldAutoSubmit, onFinished, children }) => {
+	const { survey, submit } = useConfetti();
+	const [answers, setAnswers] = useState({});
+	const [errors, setErrors] = useState({});
+	const state = useMemo(() => getNextQuestionState({
+		originalQuestions: survey?.questions,
+		answers,
+		errors,
+		pointer: currentProp
+	}), [
+		survey?.questions,
+		answers,
+		errors,
+		currentProp
+	]);
+	const isCompleted = useMemo(() => {
+		return !!state.questions.filter(({ required, visible }) => !!required && !!visible).every(({ id }) => answers[id] !== void 0);
+	}, [answers, state.questions]);
+	const [isSubmitted, setIsSubmitted] = useState(false);
+	const handleSubmitWithFinish = useCallback(({ answers: answers$1 }) => {
+		submit({ answers: answers$1 }).finally(() => {
+			onFinished?.();
+		});
+	}, [onFinished, submit]);
+	const handleSubmit = useCallback(() => {
+		handleSubmitWithFinish({ answers: getSubmittableAnswers({
+			questions: state.questions,
+			answers
+		}) });
+		setIsSubmitted(true);
+	}, [
+		answers,
+		state.questions,
+		handleSubmitWithFinish
+	]);
+	const update = useCallback(({ question: index, answer }) => {
+		const question = state.questions.at(index);
+		if (!question) return { error: "Question index is invalid" };
+		const parseResult = getAnswerValidator(question.properties, { required: question.required }).safeParse(answer);
+		if (!parseResult.success) {
+			const prettifiedError = prettifyError(parseResult.error);
+			setErrors((prev) => {
+				if (prev[question.id] === prettifiedError) return prev;
+				const copy = { ...prev };
+				copy[question.id] = prettifiedError;
+				return copy;
+			});
+			return { error: prettifiedError };
+		}
+		const internalAnswer = !question.required && !answer ? null : answer;
+		const next = { ...answers };
+		if (next[question.id] === internalAnswer) return { next: getNextQuestionState({
+			originalQuestions: survey?.questions,
+			answers: next,
+			errors,
+			pointer: currentProp
+		}).currentIndex };
+		next[question.id] = internalAnswer;
+		setAnswers(next);
+		const nextQuestionState = getNextQuestionState({
+			originalQuestions: survey?.questions,
+			answers: next,
+			errors,
+			pointer: currentProp
+		});
+		if (nextQuestionState.questions.filter(({ visible }) => !!visible).every(({ id }) => next[id] !== void 0) && shouldAutoSubmit) {
+			handleSubmitWithFinish({ answers: getSubmittableAnswers({
+				questions: nextQuestionState.questions,
+				answers: next
+			}) });
+			setIsSubmitted(true);
+		}
+		return { next: nextQuestionState.currentIndex };
+	}, [
+		state.questions,
+		answers,
+		survey?.questions,
+		errors,
+		shouldAutoSubmit,
+		currentProp,
+		handleSubmitWithFinish
+	]);
+	if (state.questions.length === 0) return /* @__PURE__ */ jsx(Fragment, {});
+	return /* @__PURE__ */ jsx("div", {
+		className: "confetti",
+		children: children({
+			questions: state.questions,
+			current: currentProp ?? state.currentIndex,
+			update,
+			isCompleted,
+			submit: handleSubmit,
+			isSubmitted,
+			errors
+		})
+	});
+};
+
+//#endregion
+//#region src/components/Confetti.tsx
+const Confetti = ({ children, shouldAutoSubmit, ...props }) => {
+	return /* @__PURE__ */ jsx(ErrorBoundary, {
+		fallback: /* @__PURE__ */ jsx(Fragment, {}),
+		children: /* @__PURE__ */ jsx(ConfettiProvider, {
+			...props,
+			children: /* @__PURE__ */ jsx(ConfettiController, {
+				shouldAutoSubmit,
+				children
+			})
+		})
+	});
+};
+
+//#endregion
+//#region src/components/ThankYouMessage.tsx
+const ThankYouMessage = ({ title, description, classNames }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: clsx("cf-question", classNames?.question),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: clsx("cf-header", classNames?.header),
+			children: [/* @__PURE__ */ jsx(Label, {
+				className: clsx("cf-title", classNames?.title),
+				children: title ?? "Feedback submitted!"
+			}), /* @__PURE__ */ jsx(Text, {
+				slot: "description",
+				className: clsx("cf-description", classNames?.description),
+				children: description ?? "Thank you for your feedback!"
+			})]
+		})
+	});
+};
+
+//#endregion
+//#region src/components/container/PopoverContainer.tsx
+const PopoverContainer = ({ children, classNames, containerProps, onDismiss, closeOnFinishMs = 3e3 }) => {
+	const { surveyId, dismiss } = useConfetti();
+	const [isFinished, setIsFinished] = useState(false);
+	useTimeout(() => {
+		dismiss();
+	}, isFinished ? closeOnFinishMs : null);
+	return /* @__PURE__ */ jsxs("div", {
+		className: clsx("confetti-dialog", classNames?.dialog),
+		id: `${surveyId}-popover`,
+		...containerProps,
+		children: [/* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: clsx("confetti-dialog-close", classNames?.closeButton),
+			"aria-label": "Dismiss",
+			onClick: async () => {
+				await dismiss();
+				onDismiss?.();
+			},
+			children: /* @__PURE__ */ jsx("svg", {
+				xmlns: "http://www.w3.org/2000/svg",
+				viewBox: "0 0 16 16",
+				fill: "none",
+				className: clsx(classNames?.icon),
+				children: /* @__PURE__ */ jsx("path", {
+					fill: "currentColor",
+					fillRule: "evenodd",
+					d: "M3.53 3.529c.26-.26.682-.26.942 0l3.529 3.528 3.528-3.528a.667.667 0 0 1 .943.942L8.943 8l3.53 3.528a.667.667 0 0 1-.944.943L8.001 8.943 4.472 12.47a.667.667 0 1 1-.943-.943L7.058 8 3.529 4.47a.667.667 0 0 1 0-.942Z",
+					clipRule: "evenodd"
+				})
+			})
+		}), typeof children === "function" ? children({ setIsFinished: () => setIsFinished(true) }) : children]
+	});
+};
+
+//#endregion
+//#region src/components/questions/FreeText.tsx
+const FreeText = ({ id, title, description, properties, onChange, classNames, required, error }) => {
+	const [value, setValue] = useState("");
+	useEffect(() => {
+		onChange(value);
+	}, [onChange, value]);
+	return /* @__PURE__ */ jsxs(TextField, {
+		isRequired: required,
+		isInvalid: !!error,
+		name: id,
+		className: clsx("cf-question", classNames?.question),
+		value,
+		onChange: (v) => {
+			setValue(v);
+			onChange(v);
+		},
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: clsx("cf-header", classNames?.header),
+				children: [/* @__PURE__ */ jsx(Label, {
+					className: clsx("cf-title", classNames?.title),
+					children: title
+				}), description && /* @__PURE__ */ jsx(Text, {
+					slot: "description",
+					className: clsx("cf-description", classNames?.description),
+					children: description
+				})]
+			}),
+			/* @__PURE__ */ jsx(TextArea, {
+				className: clsx("cf-textarea", classNames?.textarea),
+				maxLength: properties.max,
+				rows: 4,
+				placeholder: "Start typing..."
+			}),
+			/* @__PURE__ */ jsx(FieldError, {
+				className: clsx("cf-error", classNames?.error),
+				children: error
+			})
+		]
+	});
+};
+
+//#endregion
+//#region src/components/questions/MultiChoice.tsx
+const MultiChoiceCheckbox = ({ children, classNames, ...props }) => {
+	return /* @__PURE__ */ jsx(Checkbox, {
+		...props,
+		children: ({ isIndeterminate }) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+			className: clsx("cf-checkbox-indicator", classNames?.indicator),
+			children: /* @__PURE__ */ jsx("svg", {
+				viewBox: "0 0 18 18",
+				"aria-hidden": "true",
+				className: clsx("cf-checkbox-indicator-svg", classNames?.svg),
+				children: isIndeterminate ? /* @__PURE__ */ jsx("rect", {
+					x: 1,
+					y: 7.5,
+					width: 16,
+					height: 3
+				}) : /* @__PURE__ */ jsx("polyline", { points: "2 9 7 14 16 4" })
+			}, isIndeterminate ? "indeterminate" : "check")
+		}), children] })
+	});
+};
+const MultiChoice = ({ title, description, properties, classNames, onChange, id, required, error }) => {
+	const hasEditable = !!properties.editable;
+	const [value, setValue] = useState([]);
+	const [othersValue, setOthersValue] = useState("");
+	const othersRef = useRef(null);
+	const othersInputRef = useRef(null);
+	const submissionValue = useMemo(() => {
+		const othersValueIndex = value.indexOf(CHECKBOX_OTHERS_VALUE);
+		if (othersValueIndex === -1) return value;
+		const submissionValue$1 = [...value];
+		submissionValue$1[othersValueIndex] = othersValue || CHECKBOX_OTHERS_VALUE;
+		return submissionValue$1;
+	}, [othersValue, value]);
+	useEffect(() => {
+		onChange(submissionValue);
+	}, [onChange, submissionValue]);
+	return /* @__PURE__ */ jsx(CheckboxGroup, {
+		isRequired: required,
+		isInvalid: !!error,
+		name: id,
+		value,
+		onChange: setValue,
+		className: clsx("cf-question", classNames?.question),
+		children: ({ state }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: clsx("cf-header", classNames?.header),
+				children: [/* @__PURE__ */ jsx(Label, {
+					className: clsx("cf-title", classNames?.title),
+					children: title
+				}), description && /* @__PURE__ */ jsx(Text, {
+					slot: "description",
+					className: clsx("cf-description", classNames?.description),
+					children: description
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: clsx("cf-response-choices", classNames?.group),
+				children: [properties.options.map((option, index) => /* @__PURE__ */ jsx(MultiChoiceCheckbox, {
+					className: clsx("cf-checkbox", classNames?.checkbox),
+					value: option.value,
+					classNames: {
+						indicator: classNames?.indicator,
+						svg: classNames?.svg
+					},
+					children: option.label
+				}, index)), hasEditable && /* @__PURE__ */ jsxs("div", {
+					className: clsx("cf-others-choice", classNames?.othersChoice),
+					children: [/* @__PURE__ */ jsx(MultiChoiceCheckbox, {
+						inputRef: othersRef,
+						onChange: (isSelected) => {
+							if (!othersInputRef.current) return;
+							if (isSelected) requestAnimationFrame(() => {
+								if (!othersInputRef.current) return;
+								othersInputRef.current.focus();
+							});
+						},
+						className: clsx("cf-checkbox", classNames?.checkbox),
+						value: CHECKBOX_OTHERS_VALUE,
+						classNames: {
+							indicator: classNames?.indicator,
+							svg: classNames?.svg
+						},
+						children: properties.editable?.label
+					}), /* @__PURE__ */ jsx(Input, {
+						value: othersValue,
+						onChange: (e) => {
+							setOthersValue(e.target.value);
+						},
+						tabIndex: state.value.includes(CHECKBOX_OTHERS_VALUE) ? 0 : -1,
+						ref: othersInputRef,
+						onFocus: () => {
+							if (othersRef.current?.checked === false) othersRef.current.click();
+						},
+						className: clsx("cf-input", classNames?.othersInput)
+					})]
+				})]
+			}),
+			/* @__PURE__ */ jsx(FieldError, {
+				className: clsx("cf-error", classNames?.error),
+				children: error
+			})
+		] })
+	});
+};
+
+//#endregion
+//#region src/components/svgr/EmojiAngry.tsx
+const EmojiAngry = (props) => /* @__PURE__ */ jsxs("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	width: 40,
+	height: 40,
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	strokeWidth: 2,
+	...props,
+	children: [/* @__PURE__ */ jsx("circle", {
+		cx: 12,
+		cy: 12,
+		r: 10
+	}), /* @__PURE__ */ jsx("path", { d: "M16 16s-1.5-2-4-2-4 2-4 2M7.5 8 10 9M14 9l2.5-1M9 10h.01M15 10h.01" })]
+});
+
+//#endregion
+//#region src/components/svgr/EmojiBeaming.tsx
+const EmojiBeaming = (props) => /* @__PURE__ */ jsxs("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	width: 40,
+	height: 40,
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	strokeWidth: 2,
+	...props,
+	children: [/* @__PURE__ */ jsx("circle", {
+		cx: 12,
+		cy: 12,
+		r: 10
+	}), /* @__PURE__ */ jsx("path", { d: "M18 13a6 6 0 0 1-6 5 6 6 0 0 1-6-5h12ZM9 9h.01M15 9h.01" })]
+});
+
+//#endregion
+//#region src/components/svgr/EmojiFrown.tsx
+const EmojiFrown = (props) => /* @__PURE__ */ jsxs("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	width: 40,
+	height: 40,
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	strokeWidth: 2,
+	...props,
+	children: [/* @__PURE__ */ jsx("circle", {
+		cx: 12,
+		cy: 12,
+		r: 10
+	}), /* @__PURE__ */ jsx("path", { d: "M16 16s-1.5-2-4-2-4 2-4 2M9 9h.01M15 9h.01" })]
+});
+
+//#endregion
+//#region src/components/svgr/EmojiMeh.tsx
+const EmojiMeh = (props) => /* @__PURE__ */ jsxs("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	width: 40,
+	height: 40,
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	strokeWidth: 2,
+	...props,
+	children: [/* @__PURE__ */ jsx("circle", {
+		cx: 12,
+		cy: 12,
+		r: 10
+	}), /* @__PURE__ */ jsx("path", { d: "M8 15h8M9 9h.01M15 9h.01" })]
+});
+
+//#endregion
+//#region src/components/svgr/EmojiSmile.tsx
+const EmojiSmile = (props) => /* @__PURE__ */ jsxs("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	width: 40,
+	height: 40,
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	strokeWidth: 2,
+	...props,
+	children: [/* @__PURE__ */ jsx("circle", {
+		cx: 12,
+		cy: 12,
+		r: 10
+	}), /* @__PURE__ */ jsx("path", { d: "M8 14s1.5 2 4 2 4-2 4-2M9 9h.01M15 9h.01" })]
+});
+
+//#endregion
+//#region src/components/svgr/Star.tsx
+const Star = (props) => /* @__PURE__ */ jsx("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	viewBox: "0 0 24 24",
+	width: 40,
+	height: 40,
+	fill: "none",
+	...props,
+	children: /* @__PURE__ */ jsx("path", {
+		fill: "currentColor",
+		d: "m6.516 14.323-1.49 6.452a.998.998 0 0 0 1.529 1.057L12 18.202l5.445 3.63a1.001 1.001 0 0 0 1.517-1.106l-1.829-6.4 4.536-4.082a1 1 0 0 0-.59-1.74l-5.701-.454-2.467-5.461a.998.998 0 0 0-1.822 0L8.622 8.05l-5.701.453a1 1 0 0 0-.619 1.713l4.214 4.107zm2.853-4.326a.998.998 0 0 0 .832-.586L12 5.43l1.799 3.981a.998.998 0 0 0 .832.586l3.972.315-3.271 2.944c-.284.256-.397.65-.293 1.018l1.253 4.385-3.736-2.491a.995.995 0 0 0-1.109 0l-3.904 2.603 1.05-4.546a1 1 0 0 0-.276-.94l-3.038-2.962 4.09-.326z"
+	})
+});
+
+//#endregion
+//#region src/components/svgr/StarSolid.tsx
+const StarSolid = (props) => {
+	return /* @__PURE__ */ jsx("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		width: 40,
+		height: 40,
+		viewBox: "0 0 24 24",
+		...props,
+		children: /* @__PURE__ */ jsx("path", {
+			fill: "currentColor",
+			d: "M21.947 9.179a1.001 1.001 0 0 0-.868-.676l-5.701-.453-2.467-5.461a.998.998 0 0 0-1.822-.001L8.622 8.05l-5.701.453a1 1 0 0 0-.619 1.713l4.213 4.107-1.49 6.452a1 1 0 0 0 1.53 1.057L12 18.202l5.445 3.63a1.001 1.001 0 0 0 1.517-1.106l-1.829-6.4 4.536-4.082c.297-.268.406-.686.278-1.065z"
+		})
+	});
+};
+
+//#endregion
+//#region src/components/questions/Rating.tsx
+const StarRatingDisplay = ({ state, properties, classNames }) => {
+	const selectedValue = state.selectedValue ? Number(state.selectedValue) : null;
+	return /* @__PURE__ */ jsx("div", {
+		className: clsx("cf-rating-display-star", classNames?.ratingDisplayStar),
+		children: Array.from({ length: properties.scale }, (_, index) => {
+			const value = index + 1;
+			const radioValue = String(value);
+			const isFilled = selectedValue && value <= selectedValue;
+			return /* @__PURE__ */ jsx(Radio, {
+				className: clsx("cf-rating-star", classNames?.ratingStar),
+				value: radioValue,
+				"data-filled": isFilled ? "true" : void 0,
+				children: isFilled ? /* @__PURE__ */ jsx(StarSolid, {}) : /* @__PURE__ */ jsx(Star, {})
+			}, index);
+		})
+	});
+};
+const NumberRatingDisplay = ({ properties, classNames }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: clsx("cf-rating-display-number", classNames?.ratingDisplayNumber),
+		children: Array.from({ length: properties.scale }, (_, index) => {
+			const value = index + 1;
+			const radioValue = String(value);
+			return /* @__PURE__ */ jsx(Radio, {
+				className: clsx("cf-rating-number", classNames?.ratingNumber),
+				value: radioValue,
+				children: value
+			}, index);
+		})
+	});
+};
+const EmojiRatingDisplay = ({ properties, classNames, state }) => {
+	const EMOJI_FIVE = useMemo(() => [
+		EmojiAngry,
+		EmojiFrown,
+		EmojiMeh,
+		EmojiSmile,
+		EmojiBeaming
+	], []);
+	const EMOJI_THREE = useMemo(() => [
+		EmojiFrown,
+		EmojiMeh,
+		EmojiSmile
+	], []);
+	if (!useMemo(() => {
+		return properties.scale === 3 || properties.scale === 5;
+	}, [properties.scale])) return /* @__PURE__ */ jsx(NumberRatingDisplay, {
+		properties,
+		classNames,
+		state
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: clsx("cf-rating-display-emoji", classNames?.ratingDisplayEmoji),
+		children: Array.from({ length: properties.scale }, (_, index) => {
+			const value = index + 1;
+			const radioValue = String(value);
+			const Emoji = properties.scale === 5 ? EMOJI_FIVE[index] : EMOJI_THREE[index];
+			return /* @__PURE__ */ jsx(Radio, {
+				className: clsx("cf-rating-emoji", classNames?.ratingEmoji),
+				value: radioValue,
+				children: Emoji && /* @__PURE__ */ jsx(Emoji, {})
+			}, index);
+		})
+	});
+};
+const RatingDisplay = (props) => {
+	switch (props.properties.display ?? "star") {
+		case "emoji": return /* @__PURE__ */ jsx(EmojiRatingDisplay, { ...props });
+		case "number": return /* @__PURE__ */ jsx(NumberRatingDisplay, { ...props });
+		case "star":
+		default: return /* @__PURE__ */ jsx(StarRatingDisplay, { ...props });
+	}
+};
+const Rating = ({ properties, title, description, classNames, onChange, id, error, required }) => {
+	const [selected, setSelected] = useState(null);
+	const submissionValue = useMemo(() => {
+		return selected ? Number(selected) : void 0;
+	}, [selected]);
+	useEffect(() => {
+		onChange(submissionValue);
+	}, [onChange, submissionValue]);
+	return /* @__PURE__ */ jsx(RadioGroup, {
+		isRequired: required,
+		isInvalid: !!error,
+		name: id,
+		className: clsx("cf-question", classNames?.question),
+		value: selected,
+		onChange: setSelected,
+		children: ({ state }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: clsx("cf-header", classNames?.header),
+				children: [/* @__PURE__ */ jsx(Label, {
+					className: clsx("cf-title", classNames?.title),
+					children: title
+				}), description && /* @__PURE__ */ jsx(Text, {
+					slot: "description",
+					className: clsx("cf-description", classNames?.description),
+					children: description
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: clsx("cf-rating-section", classNames?.ratingSection),
+				children: [/* @__PURE__ */ jsx(RatingDisplay, {
+					state,
+					properties,
+					classNames
+				}), /* @__PURE__ */ jsxs("div", {
+					className: clsx("cf-rating-text", classNames?.ratingText),
+					children: [/* @__PURE__ */ jsx("span", {
+						className: clsx("cf-rating-text-lower", classNames?.ratingTextLower),
+						children: properties.labels?.lower
+					}), /* @__PURE__ */ jsx("span", {
+						className: clsx("cf-rating-text-upper", classNames?.ratingTextUpper),
+						children: properties.labels?.upper
+					})]
+				})]
+			}),
+			/* @__PURE__ */ jsx(FieldError, {
+				className: clsx("cf-error", classNames?.error),
+				children: error
+			})
+		] })
+	});
+};
+
+//#endregion
+//#region src/components/questions/SingleChoice.tsx
+const SingleChoiceRadio = ({ classNames, className, ...props }) => {
+	return /* @__PURE__ */ jsx(Radio, {
+		...props,
+		className: clsx(className, classNames?.radio),
+		children: composeRenderProps(props.children, (children) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", { className: clsx("cf-radio-indicator", classNames?.indicator) }), children] }))
+	});
+};
+const SingleChoice = ({ title, description, properties, classNames, onChange, id, required, error }) => {
+	const [value, setValue] = useState(null);
+	const [othersValue, setOthersValue] = useState("");
+	const hasEditable = !!properties.editable;
+	const othersRef = useRef(null);
+	const othersInputRef = useRef(null);
+	const submissionValue = useMemo(() => {
+		if (value === RADIO_OTHERS_VALUE) return othersValue || RADIO_OTHERS_VALUE;
+		return value ?? void 0;
+	}, [othersValue, value]);
+	useEffect(() => {
+		onChange(submissionValue);
+	}, [onChange, submissionValue]);
+	return /* @__PURE__ */ jsx(RadioGroup, {
+		isRequired: required,
+		isInvalid: !!error,
+		name: id,
+		onChange: (key) => {
+			setValue(key);
+			if (key === RADIO_OTHERS_VALUE) requestAnimationFrame(() => {
+				if (!othersInputRef.current) return;
+				othersInputRef.current.focus();
+			});
+		},
+		value,
+		className: clsx("cf-question", classNames?.question),
+		children: ({ state }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: clsx("cf-header", classNames?.header),
+				children: [/* @__PURE__ */ jsx(Label, {
+					className: clsx("cf-title", classNames?.title),
+					children: title
+				}), description && /* @__PURE__ */ jsx(Text, {
+					slot: "description",
+					className: clsx("cf-description", classNames?.description),
+					children: description
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: clsx("cf-response-choices", classNames?.group),
+				children: [properties.options.map((option, index) => /* @__PURE__ */ jsx(SingleChoiceRadio, {
+					classNames: {
+						indicator: classNames?.indicator,
+						radio: clsx("cf-radio", classNames?.radio)
+					},
+					value: option.value,
+					children: option.label
+				}, index)), hasEditable && /* @__PURE__ */ jsxs("div", {
+					className: clsx("cf-others-choice", classNames?.othersChoice),
+					children: [/* @__PURE__ */ jsx(SingleChoiceRadio, {
+						inputRef: othersRef,
+						value: RADIO_OTHERS_VALUE,
+						classNames: {
+							indicator: classNames?.indicator,
+							radio: clsx("cf-radio", classNames?.radio)
+						},
+						children: properties.editable?.label
+					}), /* @__PURE__ */ jsx(Input, {
+						tabIndex: state.selectedValue === RADIO_OTHERS_VALUE ? 0 : -1,
+						ref: othersInputRef,
+						value: othersValue,
+						onChange: (e) => setOthersValue(e.target.value),
+						onFocus: () => {
+							if (othersRef.current?.checked === false) othersRef.current.click();
+						},
+						className: clsx("cf-input", classNames?.othersInput)
+					})]
+				})]
+			}),
+			/* @__PURE__ */ jsx(FieldError, {
+				className: clsx("cf-error", classNames?.error),
+				children: error
+			})
+		] })
+	});
+};
+
+//#endregion
+//#region src/components/questions/factory.tsx
+const SurveyQuestionFactory = ({ question, onChange, error }) => {
+	switch (question.properties.type) {
+		case "rating": return /* @__PURE__ */ jsx(Rating, {
+			...question,
+			properties: question.properties,
+			onChange,
+			error
+		}, question.id);
+		case "open-ended": return /* @__PURE__ */ jsx(FreeText, {
+			...question,
+			properties: question.properties,
+			onChange,
+			error
+		}, question.id);
+		case "single-select": return /* @__PURE__ */ jsx(SingleChoice, {
+			...question,
+			properties: question.properties,
+			onChange,
+			error
+		}, question.id);
+		case "multi-select": return /* @__PURE__ */ jsx(MultiChoice, {
+			...question,
+			properties: question.properties,
+			onChange,
+			error
+		}, question.id);
+	}
+	return /* @__PURE__ */ jsx("div", { children: "Unsupported question type" }, question.id);
+};
+
+//#endregion
+//#region src/components/SubmitButton.tsx
+const SubmitButton = ({ onPress, isDisabled, children = "Submit" }) => {
+	return /* @__PURE__ */ jsx(Button, {
+		isDisabled,
+		className: "cf-submit-button",
+		onPress,
+		children
+	});
+};
+
+//#endregion
+//#region src/components/presentation/Flow.tsx
+const getInitialState = (type) => {
+	switch (type) {
+		case "multi-select": return [];
+		default: return "";
+	}
+};
+const Flow = ({ onSubmit, children, question }) => {
+	const [answer, setAnswer] = useState(getInitialState(question.properties.type));
+	const validator = useMemo(() => getAnswerValidator(question.properties, { required: question.required }), [question.properties, question.required]);
+	const error = useMemo(() => {
+		const parseResult = validator.safeParse(answer);
+		if (parseResult.success) return;
+		return prettifyError(parseResult.error);
+	}, [answer, validator]);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [children({
+		onChange: setAnswer,
+		question,
+		error
+	}), /* @__PURE__ */ jsx(SubmitButton, {
+		isDisabled: !!error,
+		onPress: () => onSubmit(answer)
+	})] });
+};
+
+//#endregion
+//#region src/components/presentation/Embed.tsx
+const Embed = ({ isCompleted, onSubmit, children }) => {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [children, isCompleted && /* @__PURE__ */ jsx(SubmitButton, { onPress: onSubmit })] });
+};
+
+//#endregion
+//#region src/templates/EmbeddedConfetti.tsx
+const EmbeddedConfetti = (props) => {
+	return /* @__PURE__ */ jsx(Confetti, {
+		...props,
+		shouldAutoSubmit: false,
+		children: ({ questions, update, isCompleted, submit, isSubmitted }) => {
+			if (isSubmitted) return /* @__PURE__ */ jsx(ThankYouMessage, {});
+			return /* @__PURE__ */ jsx(Embed, {
+				onSubmit: submit,
+				isCompleted,
+				children: questions.filter(({ visible }) => !!visible).map((question) => {
+					return /* @__PURE__ */ jsx(SurveyQuestionFactory, {
+						question,
+						onChange: (answer) => answer && update({
+							question: question.position,
+							answer
+						})
+					}, question.position);
+				})
+			});
+		}
+	});
+};
+
+//#endregion
+//#region src/templates/StepperConfetti.tsx
+const StepperConfetti = (props) => {
+	return /* @__PURE__ */ jsx(Confetti, {
+		...props,
+		shouldAutoSubmit: true,
+		children: ({ current, questions, update, isSubmitted }) => {
+			if (isSubmitted) return /* @__PURE__ */ jsx(ThankYouMessage, {});
+			const currentQuestion = questions[current];
+			if (!currentQuestion) return /* @__PURE__ */ jsx(Fragment, {});
+			return /* @__PURE__ */ jsx(Flow, {
+				question: currentQuestion,
+				onSubmit: (answer) => {
+					return update({
+						question: current,
+						answer
+					});
+				},
+				children: (flowProps) => /* @__PURE__ */ jsx(SurveyQuestionFactory, { ...flowProps })
+			});
+		}
+	});
+};
+
+//#endregion
+export { Confetti, ConfettiContext, ConfettiController, ConfettiProvider, Embed, EmbeddedConfetti, Flow, FreeText, MultiChoice, PopoverContainer, Rating, SingleChoice, StepperConfetti, SurveyQuestionFactory, ThankYouMessage, useConfetti };
+//# sourceMappingURL=index.js.map