@elevasis/ui 2.34.0 → 2.35.0

package/dist/typeform/index.js

@@ -1,2051 +1,3 @@
+export { TypeformArrayField, TypeformCheckboxGroup, TypeformNavigation, TypeformProgress, TypeformQuestionWrapper, TypeformRadioGroup, TypeformSurvey, TypeformTextInput, brochureStyles, brochureTheme, createCustomValue, createPresetValue, createSurveyConfig, defaultTheme, extractAnswerValue, extractMultiAnswerValues, getAnswerString, getCustomValueText, getMultiAnswerStrings, hasCustomValue, hasPresetValue, isCustomValue, isPresetValue, mergeTheme, useCardStyle, useTypeform, useTypeformContext } from '../chunk-AUDNF2Q7.js';
 export { answerValueSchema, checkboxWithOtherSchema, multiAnswerValueSchema, radioWithOtherSchema } from '../chunk-6M6OLGQY.js';
 import '../chunk-I2KLQ2HA.js';
-import { createContext, useMemo, useState, useCallback, useEffect, useContext, useRef } from 'react';
-import { Box, Progress, Text, Group, Button, Kbd, Modal, Stack, Transition, Title, UnstyledButton, TextInput, Textarea, Center, Alert, Card, ActionIcon, Paper } from '@mantine/core';
-import { IconArrowLeft, IconCheck, IconArrowRight, IconPlus, IconPencil, IconTrash, IconX } from '@tabler/icons-react';
-import { createPortal } from 'react-dom';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-
-function normalizeToPages(config) {
-  if (config.pages && config.pages.length > 0) {
-    return config.pages;
-  }
-  if (config.questions && config.questions.length > 0) {
-    return config.questions.map((q) => ({
-      id: `page-${q.id}`,
-      questions: [q]
-    }));
-  }
-  return [];
-}
-function validateArrayQuestion(question, value, fieldErrors) {
-  const items = value || [];
-  const completedItems = items.filter((item) => item._status === "completed");
-  const editingItems = items.filter((item) => item._status === "editing");
-  if (editingItems.length > 0) {
-    return "Complete or remove all pending items before continuing";
-  }
-  if (question.minItems && completedItems.length < question.minItems) {
-    return `At least ${question.minItems} item(s) required`;
-  }
-  if (question.maxItems && items.length > question.maxItems) {
-    return `Maximum ${question.maxItems} item(s) allowed`;
-  }
-  let hasNestedError = false;
-  for (let i = 0; i < items.length; i++) {
-    const item = items[i];
-    if (item._status !== "completed") continue;
-    for (const field of question.itemTemplate.fields) {
-      if (field.type === "content") continue;
-      if (field.required) {
-        const fieldValue = item[field.id];
-        const isEmpty = !fieldValue || typeof fieldValue === "string" && !fieldValue.trim() || Array.isArray(fieldValue) && fieldValue.length === 0;
-        if (isEmpty) {
-          const errorKey = `${question.id}[${i}].${field.id}`;
-          fieldErrors[errorKey] = `${field.question || field.id} is required`;
-          hasNestedError = true;
-        }
-      }
-    }
-  }
-  if (hasNestedError) {
-    return "Please complete all required fields in each item";
-  }
-  return null;
-}
-function evaluateCondition(condition, answers) {
-  if (!condition) return true;
-  if (typeof condition === "function") return condition(answers);
-  const rawValue = answers[condition.field];
-  let value;
-  if (rawValue && typeof rawValue === "object" && "type" in rawValue) {
-    value = rawValue.value;
-  } else if (Array.isArray(rawValue) && rawValue.length > 0 && typeof rawValue[0] === "object" && "type" in rawValue[0]) {
-    value = rawValue.map((v) => v.value);
-  } else {
-    value = rawValue;
-  }
-  switch (condition.operator) {
-    case "equals":
-      return value === condition.value;
-    case "notEquals":
-      return value !== condition.value;
-    case "includes":
-      return Array.isArray(value) ? value.includes(condition.value) : String(value ?? "").includes(condition.value);
-    case "notIncludes":
-      return Array.isArray(value) ? !value.includes(condition.value) : !String(value ?? "").includes(condition.value);
-    case "isEmpty":
-      return !value || Array.isArray(value) && value.length === 0 || value === "";
-    case "isNotEmpty":
-      return !!value && (!Array.isArray(value) || value.length > 0) && value !== "";
-    default:
-      return true;
-  }
-}
-function useTypeform(config) {
-  const { schema, onSubmit, onStepChange, onPageChange, initialValues } = config;
-  const pages = useMemo(() => normalizeToPages(config), [config]);
-  const [currentPageIndex, setCurrentPageIndex] = useState(0);
-  const [answers, setAnswers] = useState(() => {
-    if (initialValues) {
-      return initialValues;
-    }
-    return {};
-  });
-  const [errors, setErrors] = useState({});
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  const [isComplete, setIsComplete] = useState(false);
-  const [direction, setDirection] = useState("forward");
-  const visiblePages = useMemo(
-    () => pages.filter((page) => evaluateCondition(page.condition, answers)),
-    [pages, answers]
-  );
-  const currentVisiblePageIndex = useMemo(() => {
-    if (currentPageIndex >= visiblePages.length) {
-      return Math.max(0, visiblePages.length - 1);
-    }
-    return currentPageIndex;
-  }, [currentPageIndex, visiblePages.length]);
-  const currentPage = visiblePages[currentVisiblePageIndex] ?? null;
-  const currentPageQuestions = currentPage?.questions ?? [];
-  const currentQuestion = currentPageQuestions[0] ?? null;
-  const allQuestions = useMemo(
-    () => visiblePages.flatMap((p) => p.questions).filter((q) => q.type !== "content"),
-    [visiblePages]
-  );
-  const progress = visiblePages.length > 0 ? (currentVisiblePageIndex + 1) / visiblePages.length * 100 : 0;
-  const isFirstPage = currentVisiblePageIndex === 0;
-  const isLastPage = currentVisiblePageIndex === visiblePages.length - 1;
-  const isFirstQuestion = isFirstPage;
-  const isLastQuestion = isLastPage;
-  const validateQuestion = useCallback(
-    (question, fieldErrors) => {
-      if (question.type === "content") {
-        return null;
-      }
-      const answer = answers[question.id];
-      if (question.type === "array") {
-        const arrayQ = question;
-        const arrayValue = answer;
-        const errorsCollector = fieldErrors || {};
-        return validateArrayQuestion(arrayQ, arrayValue, errorsCollector);
-      }
-      if (question.required) {
-        if (answer === void 0 || answer === "" || Array.isArray(answer) && answer.length === 0) {
-          return "This field is required";
-        }
-      }
-      if (question.type === "email" || question.type === "text" && question.inputType === "email") {
-        if (answer && typeof answer === "string") {
-          const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-          if (!emailRegex.test(answer)) {
-            return "Please enter a valid email address";
-          }
-        }
-      }
-      if (question.type === "checkbox") {
-        const checkboxQ = question;
-        const selectedCount = Array.isArray(answer) ? answer.length : 0;
-        if (checkboxQ.minSelect && selectedCount < checkboxQ.minSelect) {
-          return `Please select at least ${checkboxQ.minSelect} option(s)`;
-        }
-        if (checkboxQ.maxSelect && selectedCount > checkboxQ.maxSelect) {
-          return `Please select at most ${checkboxQ.maxSelect} option(s)`;
-        }
-      }
-      return null;
-    },
-    [answers]
-  );
-  const validateCurrentPage = useCallback(() => {
-    const pageErrors = {};
-    for (const question of currentPageQuestions) {
-      if (question.type === "content") continue;
-      const error = validateQuestion(question, pageErrors);
-      if (error) {
-        pageErrors[question.id] = error;
-      }
-    }
-    return pageErrors;
-  }, [currentPageQuestions, validateQuestion]);
-  const canProceed = useMemo(() => {
-    if (!currentPage) return false;
-    for (const question of currentPageQuestions) {
-      if (question.type === "content") continue;
-      if (validateQuestion(question) !== null) {
-        return false;
-      }
-    }
-    return true;
-  }, [currentPage, currentPageQuestions, validateQuestion]);
-  const setAnswer = useCallback(
-    (questionId, value) => {
-      setAnswers((prev) => ({ ...prev, [questionId]: value }));
-      setErrors((prev) => {
-        const next2 = { ...prev };
-        delete next2[questionId];
-        return next2;
-      });
-    },
-    []
-  );
-  const setArrayItemAnswer = useCallback(
-    (questionId, itemIndex, fieldId, value) => {
-      setAnswers((prev) => {
-        const currentArray = prev[questionId] || [];
-        const newArray = [...currentArray];
-        if (!newArray[itemIndex]) {
-          newArray[itemIndex] = { _status: "editing" };
-        }
-        newArray[itemIndex] = { ...newArray[itemIndex], [fieldId]: value };
-        return { ...prev, [questionId]: newArray };
-      });
-      setErrors((prev) => {
-        const next2 = { ...prev };
-        const errorKey = `${questionId}[${itemIndex}].${fieldId}`;
-        delete next2[errorKey];
-        return next2;
-      });
-    },
-    []
-  );
-  const next = useCallback(() => {
-    if (!currentPage) return;
-    const pageErrors = validateCurrentPage();
-    if (Object.keys(pageErrors).length > 0) {
-      setErrors((prev) => ({ ...prev, ...pageErrors }));
-      return;
-    }
-    if (currentVisiblePageIndex < visiblePages.length - 1) {
-      const nextIndex = currentVisiblePageIndex + 1;
-      setDirection("forward");
-      setCurrentPageIndex(nextIndex);
-      const nextPage = visiblePages[nextIndex];
-      onPageChange?.(nextIndex, nextPage);
-      if (nextPage.questions[0]) {
-        onStepChange?.(nextIndex, nextPage.questions[0]);
-      }
-    }
-  }, [currentVisiblePageIndex, currentPage, visiblePages, validateCurrentPage, onPageChange, onStepChange]);
-  const back = useCallback(() => {
-    if (currentVisiblePageIndex > 0) {
-      const prevIndex = currentVisiblePageIndex - 1;
-      setDirection("backward");
-      setCurrentPageIndex(prevIndex);
-      const prevPage = visiblePages[prevIndex];
-      onPageChange?.(prevIndex, prevPage);
-      if (prevPage.questions[0]) {
-        onStepChange?.(prevIndex, prevPage.questions[0]);
-      }
-    }
-  }, [currentVisiblePageIndex, visiblePages, onPageChange, onStepChange]);
-  const goTo = useCallback(
-    (index) => {
-      if (index >= 0 && index < visiblePages.length) {
-        setCurrentPageIndex(index);
-        const page = visiblePages[index];
-        onPageChange?.(index, page);
-        if (page.questions[0]) {
-          onStepChange?.(index, page.questions[0]);
-        }
-      }
-    },
-    [visiblePages, onPageChange, onStepChange]
-  );
-  const submit = useCallback(async () => {
-    const allErrors = {};
-    for (const question of allQuestions) {
-      const error = validateQuestion(question);
-      if (error) {
-        allErrors[question.id] = error;
-      }
-    }
-    if (Object.keys(allErrors).length > 0) {
-      setErrors(allErrors);
-      for (let i = 0; i < visiblePages.length; i++) {
-        const page = visiblePages[i];
-        if (page.questions.some((q) => allErrors[q.id])) {
-          setCurrentPageIndex(i);
-          break;
-        }
-      }
-      return;
-    }
-    if (schema) {
-      const result = schema.safeParse(answers);
-      if (!result.success) {
-        const zodErrors = {};
-        for (const issue of result.error.issues) {
-          const pathStr = issue.path.join(".");
-          const topLevelField = issue.path[0];
-          if (typeof topLevelField === "string") {
-            if (zodErrors[topLevelField]) {
-              zodErrors[topLevelField] += `; ${issue.message}`;
-            } else {
-              zodErrors[topLevelField] = issue.message;
-            }
-          }
-          if (pathStr && pathStr !== String(topLevelField)) {
-            zodErrors[pathStr] = issue.message;
-          }
-        }
-        setErrors(zodErrors);
-        for (let i = 0; i < visiblePages.length; i++) {
-          const page = visiblePages[i];
-          const pageQuestionIds = page.questions.map((q) => q.id);
-          if (pageQuestionIds.some((qId) => zodErrors[qId])) {
-            setCurrentPageIndex(i);
-            break;
-          }
-        }
-        return;
-      }
-    }
-    setIsSubmitting(true);
-    try {
-      await onSubmit(answers);
-      setIsComplete(true);
-    } catch (error) {
-      console.error("[Typeform] Form submission error:", error);
-      setErrors({ _form: error instanceof Error ? error.message : "Submission failed. Please try again." });
-    } finally {
-      setIsSubmitting(false);
-    }
-  }, [answers, allQuestions, visiblePages, schema, onSubmit, validateQuestion]);
-  const reset = useCallback(() => {
-    setCurrentPageIndex(0);
-    setAnswers(initialValues ? initialValues : {});
-    setErrors({});
-    setIsSubmitting(false);
-    setIsComplete(false);
-  }, [initialValues]);
-  const terminateAndSubmit = useCallback(
-    async (reason) => {
-      if (!config.terminationAction?.onTerminate) {
-        console.warn("terminateAndSubmit called but no terminationAction.onTerminate configured");
-        return;
-      }
-      try {
-        setIsSubmitting(true);
-        const partialData = answers;
-        const currentPage2 = visiblePages[currentVisiblePageIndex];
-        const lastPageIndex = pages.findIndex((p) => p.id === currentPage2?.id);
-        await config.terminationAction.onTerminate({
-          partialData,
-          lastPageIndex: lastPageIndex >= 0 ? lastPageIndex : currentVisiblePageIndex,
-          reason
-        });
-        setIsComplete(true);
-      } catch (error) {
-        console.error("Termination failed:", error);
-        throw error;
-      } finally {
-        setIsSubmitting(false);
-      }
-    },
-    [answers, config, currentVisiblePageIndex, visiblePages, pages]
-  );
-  return {
-    // State
-    currentIndex: currentVisiblePageIndex,
-    // backwards compatibility
-    answers,
-    errors,
-    isSubmitting,
-    isComplete,
-    direction,
-    // Computed
-    currentQuestion,
-    currentPage,
-    currentPageIndex: currentVisiblePageIndex,
-    pages: visiblePages,
-    // Return visible pages for progress bar
-    progress,
-    isFirstQuestion,
-    isLastQuestion,
-    isFirstPage,
-    isLastPage,
-    canProceed,
-    // Actions
-    next,
-    back,
-    goTo,
-    setAnswer,
-    setArrayItemAnswer,
-    submit,
-    reset,
-    terminateAndSubmit
-  };
-}
-
-// src/components/typeform/theme.ts
-var defaultTheme = {
-  colors: {
-    primary: "var(--mantine-color-blue-6)",
-    background: "var(--color-background)",
-    card: "var(--mantine-color-blue-9)",
-    cardBorder: "var(--mantine-color-dark-5)",
-    text: "var(--color-text)",
-    textMuted: "var(--color-text-dimmed)"
-  },
-  spacing: {
-    questionGap: 12,
-    contentMaxWidth: 800,
-    // Wider default for better multi-question support
-    pageGap: 32
-    // Gap between questions on same page
-  },
-  animation: {
-    duration: 300,
-    easing: "ease"
-  },
-  options: {
-    autoAdvance: false,
-    compact: false
-    // Compact mode for multi-question pages
-  }
-};
-function mergeTheme(theme) {
-  return {
-    colors: { ...defaultTheme.colors, ...theme?.colors },
-    spacing: { ...defaultTheme.spacing, ...theme?.spacing },
-    animation: { ...defaultTheme.animation, ...theme?.animation },
-    options: { ...defaultTheme.options, ...theme?.options }
-  };
-}
-function TypeformProgress({
-  current,
-  total,
-  showPercentage = false,
-  usePortal = false
-}) {
-  const { styles } = useTypeformContext();
-  const percentage = total > 0 ? Math.round(current / total * 100) : 0;
-  const [mounted, setMounted] = useState(false);
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-  const content = /* @__PURE__ */ jsxs(
-    Box,
-    {
-      style: {
-        position: "fixed",
-        top: 0,
-        left: 0,
-        right: 0,
-        zIndex: 1e3,
-        ...styles?.progress
-      },
-      children: [
-        /* @__PURE__ */ jsx(
-          Progress,
-          {
-            value: percentage,
-            size: 4,
-            radius: 0,
-            transitionDuration: 300,
-            style: styles?.progressBar,
-            styles: {
-              root: {
-                background: "var(--mantine-color-dark-6)"
-              }
-            }
-          }
-        ),
-        showPercentage && /* @__PURE__ */ jsxs(Text, { size: "xs", c: "dimmed", ta: "right", pr: "md", pt: 4, style: styles?.progressText, children: [
-          percentage,
-          "%"
-        ] })
-      ]
-    }
-  );
-  if (usePortal && mounted && typeof document !== "undefined") {
-    return createPortal(content, document.body);
-  }
-  return content;
-}
-function TypeformNavigation({
-  onBack,
-  onNext,
-  onSubmit,
-  canGoBack,
-  canGoNext,
-  isLastQuestion,
-  isSubmitting,
-  terminationAction,
-  onTerminate
-}) {
-  const { styles } = useTypeformContext();
-  const [showTerminationModal, setShowTerminationModal] = useState(false);
-  return /* @__PURE__ */ jsxs(
-    Box,
-    {
-      style: {
-        position: "sticky",
-        bottom: 0,
-        padding: "var(--mantine-spacing-md)",
-        background: "var(--color-background)",
-        borderTop: "1px solid var(--color-border)",
-        borderRadius: "var(--mantine-radius-default)",
-        ...styles?.navigation
-      },
-      children: [
-        /* @__PURE__ */ jsxs(Group, { justify: "space-between", maw: 600, mx: "auto", children: [
-          /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
-            terminationAction && onTerminate && !canGoBack && /* @__PURE__ */ jsx(
-              Button,
-              {
-                variant: terminationAction.variant || "subtle",
-                color: terminationAction.color || "red",
-                onClick: () => {
-                  if (terminationAction.confirmText) {
-                    setShowTerminationModal(true);
-                  } else {
-                    onTerminate();
-                  }
-                },
-                style: styles?.buttonTerminate,
-                children: terminationAction.label
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              Button,
-              {
-                variant: "subtle",
-                color: "gray",
-                leftSection: /* @__PURE__ */ jsx(IconArrowLeft, { size: 16 }),
-                onClick: onBack,
-                disabled: !canGoBack,
-                style: styles?.buttonBack,
-                styles: {
-                  root: {
-                    visibility: canGoBack ? "visible" : "hidden"
-                  }
-                },
-                children: "Back"
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
-            /* @__PURE__ */ jsxs(Text, { size: "sm", c: "dimmed", children: [
-              "Press ",
-              /* @__PURE__ */ jsx(Kbd, { size: "xs", children: "Enter" })
-            ] }),
-            isLastQuestion ? /* @__PURE__ */ jsx(
-              Button,
-              {
-                rightSection: /* @__PURE__ */ jsx(IconCheck, { size: 16 }),
-                onClick: onSubmit,
-                loading: isSubmitting,
-                disabled: !canGoNext,
-                style: {
-                  background: "var(--color-primary)",
-                  color: "white",
-                  transition: "all 150ms ease",
-                  ...styles?.buttonSubmit
-                },
-                children: "Submit"
-              }
-            ) : /* @__PURE__ */ jsx(
-              Button,
-              {
-                rightSection: /* @__PURE__ */ jsx(IconArrowRight, { size: 16 }),
-                onClick: onNext,
-                disabled: !canGoNext,
-                style: {
-                  background: "var(--color-primary)",
-                  color: "white",
-                  transition: "all 150ms ease",
-                  ...styles?.buttonNext
-                },
-                children: "Continue"
-              }
-            )
-          ] })
-        ] }),
-        terminationAction && onTerminate && /* @__PURE__ */ jsx(
-          Modal,
-          {
-            opened: showTerminationModal,
-            onClose: () => setShowTerminationModal(false),
-            title: terminationAction.label,
-            centered: true,
-            children: /* @__PURE__ */ jsxs(Stack, { children: [
-              /* @__PURE__ */ jsx(Text, { children: terminationAction.confirmText }),
-              /* @__PURE__ */ jsxs(Group, { justify: "flex-end", children: [
-                /* @__PURE__ */ jsx(Button, { variant: "subtle", onClick: () => setShowTerminationModal(false), children: "Cancel" }),
-                /* @__PURE__ */ jsx(
-                  Button,
-                  {
-                    color: terminationAction.color || "red",
-                    onClick: async () => {
-                      await onTerminate();
-                      setShowTerminationModal(false);
-                    },
-                    children: "Confirm"
-                  }
-                )
-              ] })
-            ] })
-          }
-        )
-      ]
-    }
-  );
-}
-var slideForward = {
-  in: { opacity: 1, transform: "translateY(0)" },
-  out: { opacity: 0, transform: "translateY(-40px)" },
-  transitionProperty: "opacity, transform"
-};
-var slideBackward = {
-  in: { opacity: 1, transform: "translateY(0)" },
-  out: { opacity: 0, transform: "translateY(40px)" },
-  transitionProperty: "opacity, transform"
-};
-function TypeformQuestionWrapper({
-  question,
-  description,
-  questionNumber,
-  isActive,
-  children,
-  error,
-  direction = "forward",
-  theme,
-  compact = false,
-  styles: customStyles
-}) {
-  const maxWidth = theme?.spacing?.contentMaxWidth ?? 800;
-  return /* @__PURE__ */ jsx(
-    Transition,
-    {
-      mounted: isActive,
-      transition: direction === "backward" ? slideBackward : slideForward,
-      duration: theme?.animation?.duration ?? 300,
-      timingFunction: theme?.animation?.easing ?? "ease",
-      children: (transitionStyles) => /* @__PURE__ */ jsx(
-        Box,
-        {
-          style: {
-            ...transitionStyles,
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "center",
-            justifyContent: "flex-start",
-            minHeight: "100vh",
-            padding: "var(--mantine-spacing-xl)",
-            paddingTop: "min(15vh, 80px)",
-            paddingBottom: 100,
-            // Space for navigation
-            overflow: "auto",
-            ...customStyles?.question
-          },
-          children: /* @__PURE__ */ jsxs(Box, { maw: maxWidth, w: "100%", children: [
-            /* @__PURE__ */ jsxs(Text, { size: "sm", c: "dimmed", mb: "xs", style: customStyles?.questionNumber, children: [
-              questionNumber,
-              " \u2192"
-            ] }),
-            /* @__PURE__ */ jsx(
-              Title,
-              {
-                order: 2,
-                mb: "sm",
-                style: {
-                  fontSize: compact ? "clamp(1.25rem, 3vw, 1.5rem)" : "clamp(1.5rem, 4vw, 2rem)",
-                  fontWeight: 500,
-                  lineHeight: 1.3,
-                  ...customStyles?.questionTitle
-                },
-                children: question
-              }
-            ),
-            description && /* @__PURE__ */ jsx(Text, { size: compact ? "md" : "lg", c: "dimmed", mb: "xl", style: customStyles?.questionDescription, children: description }),
-            /* @__PURE__ */ jsx(Box, { mt: "xl", children }),
-            error && /* @__PURE__ */ jsx(Text, { size: "sm", c: "red", mt: "md", style: customStyles?.error, children: error })
-          ] })
-        }
-      )
-    }
-  );
-}
-function TypeformPageWrapper({
-  page,
-  pageNumber,
-  isActive,
-  direction = "forward",
-  theme,
-  compact = false,
-  styles: customStyles,
-  errors,
-  renderField
-}) {
-  const maxWidth = theme?.spacing?.contentMaxWidth ?? 800;
-  const pageGap = theme?.spacing?.pageGap ?? 32;
-  const isMultiQuestion = page.questions.length > 1;
-  return /* @__PURE__ */ jsx(
-    Transition,
-    {
-      mounted: isActive,
-      transition: direction === "backward" ? slideBackward : slideForward,
-      duration: theme?.animation?.duration ?? 300,
-      timingFunction: theme?.animation?.easing ?? "ease",
-      children: (transitionStyles) => /* @__PURE__ */ jsx(
-        Box,
-        {
-          style: {
-            ...transitionStyles,
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "center",
-            justifyContent: "flex-start",
-            minHeight: "100vh",
-            padding: "var(--mantine-spacing-xl)",
-            paddingTop: "min(15vh, 80px)",
-            paddingBottom: 100,
-            // Space for navigation
-            overflow: "auto",
-            ...customStyles?.question
-          },
-          children: /* @__PURE__ */ jsxs(Box, { maw: maxWidth, w: "100%", children: [
-            page.title && /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsxs(Text, { size: "sm", c: "dimmed", mb: "xs", style: customStyles?.questionNumber, children: [
-                pageNumber,
-                " \u2192"
-              ] }),
-              /* @__PURE__ */ jsx(
-                Title,
-                {
-                  order: 2,
-                  mb: "sm",
-                  style: {
-                    fontSize: "clamp(1.5rem, 4vw, 2rem)",
-                    fontWeight: 600,
-                    lineHeight: 1.3,
-                    ...customStyles?.questionTitle
-                  },
-                  children: page.title
-                }
-              ),
-              page.description && /* @__PURE__ */ jsx(Text, { size: "md", c: "dimmed", mb: "lg", style: customStyles?.questionDescription, children: page.description })
-            ] }),
-            /* @__PURE__ */ jsx(Stack, { gap: pageGap, children: page.questions.map((question) => {
-              const error = errors[question.id];
-              const showQuestionNumber = !page.title;
-              if (question.type === "content") {
-                return /* @__PURE__ */ jsx(Box, { mt: isMultiQuestion ? "sm" : "md", children: renderField(question) }, question.id);
-              }
-              return /* @__PURE__ */ jsxs(Box, { children: [
-                showQuestionNumber && !isMultiQuestion && /* @__PURE__ */ jsxs(Text, { size: "sm", c: "dimmed", mb: "xs", style: customStyles?.questionNumber, children: [
-                  pageNumber,
-                  " \u2192"
-                ] }),
-                /* @__PURE__ */ jsxs(
-                  Title,
-                  {
-                    order: isMultiQuestion ? 3 : 2,
-                    mb: "xs",
-                    style: {
-                      fontSize: isMultiQuestion ? "clamp(1.125rem, 2.5vw, 1.25rem)" : compact ? "clamp(1.25rem, 3vw, 1.5rem)" : "clamp(1.5rem, 4vw, 2rem)",
-                      fontWeight: 500,
-                      lineHeight: 1.4
-                    },
-                    children: [
-                      question.question,
-                      question.required && /* @__PURE__ */ jsx(Text, { component: "span", c: "red", ml: 6, children: "*" })
-                    ]
-                  }
-                ),
-                question.description && /* @__PURE__ */ jsx(
-                  Text,
-                  {
-                    size: isMultiQuestion ? "sm" : compact ? "md" : "lg",
-                    c: "dimmed",
-                    mb: "md",
-                    style: customStyles?.questionDescription,
-                    children: question.description
-                  }
-                ),
-                /* @__PURE__ */ jsx(Box, { mt: isMultiQuestion ? "sm" : "xl", children: renderField(question) }),
-                error && /* @__PURE__ */ jsx(Text, { size: "sm", c: "red", mt: "md", style: customStyles?.error, children: error })
-              ] }, question.id);
-            }) })
-          ] })
-        }
-      )
-    }
-  );
-}
-
-// src/components/typeform/hooks.ts
-function useCardStyle() {
-  const { config, styles } = useTypeformContext();
-  const theme = config.theme;
-  const getCardStyle = (isSelected, isHovered) => {
-    const base = {
-      display: "block",
-      width: "100%",
-      padding: "var(--mantine-spacing-sm) var(--mantine-spacing-md)",
-      borderRadius: "var(--mantine-radius-md)",
-      border: "1px solid var(--color-border)",
-      backgroundColor: "transparent",
-      ...styles?.card,
-      // Force-disable any preset transition (instant state changes)
-      transition: "none"
-    };
-    const fallbackSelected = {
-      border: "var(--active-border)",
-      backgroundColor: "var(--active-background)"
-    };
-    const fallbackHovered = {
-      backgroundColor: "var(--color-surface)"
-    };
-    if (isSelected) {
-      return {
-        ...base,
-        ...fallbackSelected,
-        ...styles?.cardSelected
-      };
-    }
-    if (isHovered) {
-      return {
-        ...base,
-        ...fallbackHovered,
-        ...styles?.cardHovered
-      };
-    }
-    return base;
-  };
-  const getKeyStyle = (isSelected, isHovered) => ({
-    minWidth: 24,
-    height: 24,
-    display: "inline-flex",
-    alignItems: "center",
-    justifyContent: "center",
-    fontSize: "var(--mantine-font-size-xs)",
-    backgroundColor: isSelected || isHovered ? "var(--color-primary)" : "var(--mantine-color-dark-5)",
-    color: isSelected || isHovered ? "#ffffff" : void 0,
-    border: "none",
-    flexShrink: 0,
-    ...styles?.cardKey,
-    transition: "none",
-    ...isSelected || isHovered ? { backgroundColor: "var(--color-primary)", color: "#ffffff" } : null
-  });
-  return { getCardStyle, getKeyStyle, theme, styles };
-}
-
-// src/components/typeform/types.ts
-function createPresetValue(value) {
-  return { type: "preset", value };
-}
-function createCustomValue(value) {
-  return { type: "custom", value };
-}
-function isCustomValue(answer) {
-  return answer.type === "custom";
-}
-function isPresetValue(answer) {
-  return answer.type === "preset";
-}
-function getAnswerString(answer) {
-  return answer?.value ?? "";
-}
-function getMultiAnswerStrings(answers) {
-  return answers.map((a) => a.value);
-}
-function hasCustomValue(answers) {
-  return answers.some((a) => a.type === "custom");
-}
-function getCustomValueText(answers) {
-  const custom = answers.find((a) => a.type === "custom");
-  return custom?.value;
-}
-function hasPresetValue(answers, value) {
-  return answers.some((a) => a.type === "preset" && a.value === value);
-}
-function extractAnswerValue(answer) {
-  return answer.value;
-}
-function extractMultiAnswerValues(answers) {
-  return answers.map((a) => a.value);
-}
-function createSurveyConfig(config) {
-  return config;
-}
-function TypeformRadioGroup({ question, value, onChange, error }) {
-  const { getCardStyle, getKeyStyle, styles } = useCardStyle();
-  const { options } = question;
-  const [hoveredIndex, setHoveredIndex] = useState(null);
-  const [otherText, setOtherText] = useState(() => {
-    if (value && isCustomValue(value)) {
-      return value.value;
-    }
-    return "";
-  });
-  useEffect(() => {
-    if (value && isCustomValue(value)) {
-      setOtherText(value.value);
-    } else if (!value || !isCustomValue(value)) {
-      setOtherText("");
-    }
-  }, [value]);
-  const isOtherSelected = value && isCustomValue(value);
-  const selectedPresetValue = value && !isCustomValue(value) ? value.value : null;
-  const handleOptionClick = (optionValue) => {
-    const isOther = optionValue.toLowerCase() === "other";
-    if (isOther) {
-      onChange(createCustomValue(otherText));
-    } else {
-      onChange(createPresetValue(optionValue));
-      setOtherText("");
-    }
-  };
-  const handleOtherTextChange = (text) => {
-    setOtherText(text);
-    onChange(createCustomValue(text));
-  };
-  return /* @__PURE__ */ jsxs(Stack, { gap: "xs", children: [
-    options.map((option, index) => {
-      const isOther = option.value.toLowerCase() === "other";
-      const isSelected = isOther ? isOtherSelected : selectedPresetValue === option.value;
-      const letterKey = String.fromCharCode(65 + index);
-      return /* @__PURE__ */ jsx(
-        UnstyledButton,
-        {
-          onClick: () => handleOptionClick(option.value),
-          onMouseEnter: () => setHoveredIndex(index),
-          onMouseLeave: () => setHoveredIndex(null),
-          style: getCardStyle(!!isSelected, hoveredIndex === index),
-          children: /* @__PURE__ */ jsxs(Group, { gap: "sm", wrap: "nowrap", children: [
-            /* @__PURE__ */ jsx(Kbd, { size: "xs", style: getKeyStyle(!!isSelected, hoveredIndex === index), children: letterKey }),
-            /* @__PURE__ */ jsxs(Box, { style: { flex: 1 }, children: [
-              /* @__PURE__ */ jsx(Text, { size: "sm", fw: 500, style: styles?.cardLabel, children: option.label }),
-              option.description && /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", mt: 2, style: styles?.cardDescription, children: option.description })
-            ] }),
-            isSelected && /* @__PURE__ */ jsx(IconCheck, { size: 16, style: { color: "var(--color-primary)", ...styles?.cardCheckmark } })
-          ] })
-        },
-        option.value
-      );
-    }),
-    isOtherSelected && /* @__PURE__ */ jsx(Box, { mt: "md", children: /* @__PURE__ */ jsx(
-      TextInput,
-      {
-        placeholder: "Please specify...",
-        value: otherText,
-        onChange: (e) => handleOtherTextChange(e.target.value),
-        styles: {
-          input: {
-            ...styles?.input,
-            fontSize: 16
-          }
-        }
-      }
-    ) }),
-    error && /* @__PURE__ */ jsx(Text, { size: "sm", c: "red", mt: "sm", style: styles?.error, children: error })
-  ] });
-}
-function TypeformCheckboxGroup({ question, value, onChange, error }) {
-  const { getCardStyle, getKeyStyle, styles } = useCardStyle();
-  const { options } = question;
-  const [hoveredIndex, setHoveredIndex] = useState(null);
-  const [otherText, setOtherText] = useState(() => getCustomValueText(value) ?? "");
-  useEffect(() => {
-    const customText = getCustomValueText(value);
-    if (customText !== void 0) {
-      setOtherText(customText);
-    } else if (!hasCustomValue(value)) {
-      setOtherText("");
-    }
-  }, [value]);
-  const isOtherSelected = hasCustomValue(value);
-  const handleToggle = (optionValue) => {
-    const isOther = optionValue.toLowerCase() === "other";
-    if (isOther) {
-      if (isOtherSelected) {
-        onChange(value.filter((v) => v.type !== "custom"));
-        setOtherText("");
-      } else {
-        onChange([...value, createCustomValue("")]);
-      }
-    } else {
-      const hasValue = hasPresetValue(value, optionValue);
-      if (hasValue) {
-        onChange(value.filter((v) => !(v.type === "preset" && v.value === optionValue)));
-      } else {
-        onChange([...value, createPresetValue(optionValue)]);
-      }
-    }
-  };
-  const handleOtherTextChange = (text) => {
-    setOtherText(text);
-    const withoutCustom = value.filter((v) => v.type !== "custom");
-    onChange([...withoutCustom, createCustomValue(text)]);
-  };
-  return /* @__PURE__ */ jsxs(Stack, { gap: "xs", children: [
-    options.map((option, index) => {
-      const isOther = option.value.toLowerCase() === "other";
-      const isSelected = isOther ? isOtherSelected : hasPresetValue(value, option.value);
-      const letterKey = String.fromCharCode(65 + index);
-      return /* @__PURE__ */ jsx(
-        UnstyledButton,
-        {
-          onClick: () => handleToggle(option.value),
-          onMouseEnter: () => setHoveredIndex(index),
-          onMouseLeave: () => setHoveredIndex(null),
-          style: getCardStyle(isSelected, hoveredIndex === index),
-          children: /* @__PURE__ */ jsxs(Group, { gap: "sm", wrap: "nowrap", children: [
-            /* @__PURE__ */ jsx(Kbd, { size: "xs", style: getKeyStyle(isSelected, hoveredIndex === index), children: letterKey }),
-            /* @__PURE__ */ jsx(
-              Box,
-              {
-                style: {
-                  width: 20,
-                  height: 20,
-                  borderRadius: 4,
-                  border: `2px solid ${isSelected ? "var(--color-primary)" : "var(--mantine-color-dark-4)"}`,
-                  backgroundColor: isSelected ? "var(--color-primary)" : "transparent",
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "center",
-                  transition: "all 150ms ease",
-                  flexShrink: 0
-                },
-                children: isSelected && /* @__PURE__ */ jsx(IconCheck, { size: 14, style: { color: "white" } })
-              }
-            ),
-            /* @__PURE__ */ jsxs(Box, { style: { flex: 1 }, children: [
-              /* @__PURE__ */ jsx(Text, { size: "sm", fw: 500, style: styles?.cardLabel, children: option.label }),
-              option.description && /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", mt: 2, style: styles?.cardDescription, children: option.description })
-            ] })
-          ] })
-        },
-        option.value
-      );
-    }),
-    isOtherSelected && /* @__PURE__ */ jsx(Box, { mt: "md", children: /* @__PURE__ */ jsx(
-      TextInput,
-      {
-        placeholder: "Please specify...",
-        value: otherText,
-        onChange: (e) => handleOtherTextChange(e.target.value),
-        styles: {
-          input: {
-            ...styles?.input,
-            fontSize: 16
-          }
-        }
-      }
-    ) }),
-    /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", mt: "xs", children: "Select all that apply" }),
-    error && /* @__PURE__ */ jsx(Text, { size: "sm", c: "red", mt: "sm", style: styles?.error, children: error })
-  ] });
-}
-function TypeformTextInput({ question, value, onChange, error, onSubmit }) {
-  const { config, styles } = useTypeformContext();
-  const theme = config.theme;
-  const handleKeyDown = (e) => {
-    if (e.key === "Enter" && !e.shiftKey && question.type !== "textarea") {
-      e.preventDefault();
-      onSubmit?.();
-    }
-  };
-  const focusBorderColor = theme?.colors?.primary ?? "var(--mantine-color-blue-6)";
-  const textColor = theme?.colors?.text ?? void 0;
-  if (question.type === "textarea") {
-    const textareaQuestion = question;
-    return /* @__PURE__ */ jsx(
-      Textarea,
-      {
-        value,
-        onChange: (e) => onChange(e.target.value),
-        placeholder: textareaQuestion.placeholder || "Type your answer here...",
-        error,
-        rows: textareaQuestion.rows || 4,
-        autoFocus: true,
-        styles: {
-          input: {
-            ...styles?.textarea,
-            color: textColor,
-            "&:focus": {
-              borderColor: focusBorderColor
-            }
-          }
-        }
-      }
-    );
-  }
-  const textQuestion = question;
-  return /* @__PURE__ */ jsx(
-    TextInput,
-    {
-      value,
-      onChange: (e) => onChange(e.target.value),
-      placeholder: textQuestion.placeholder || "Type your answer here...",
-      type: textQuestion.inputType || "text",
-      error,
-      onKeyDown: handleKeyDown,
-      autoFocus: true,
-      styles: {
-        input: {
-          ...styles?.input,
-          color: textColor,
-          "&:focus": {
-            borderBottomColor: focusBorderColor
-          }
-        }
-      }
-    }
-  );
-}
-function TypeformArrayField({
-  question,
-  value = [],
-  onChange,
-  errors,
-  renderField,
-  theme: _theme
-}) {
-  const {
-    itemTemplate,
-    minItems = 0,
-    maxItems,
-    addLabel = "Add item",
-    removeLabel = "Remove",
-    itemLabel,
-    summaryFields
-  } = question;
-  const [localErrors, setLocalErrors] = useState({});
-  const hasEditingItems = value.some((item) => item._status === "editing");
-  const canAdd = (maxItems === void 0 || value.length < maxItems) && !hasEditingItems;
-  const getCanRemove = (item) => {
-    const completedCount = value.filter((i) => i._status === "completed").length;
-    if (item._status === "editing") return true;
-    return completedCount > minItems;
-  };
-  const handleAdd = () => {
-    if (!canAdd) return;
-    const newItem = { _status: "editing" };
-    itemTemplate.fields.forEach((field) => {
-      if (field.type !== "content") {
-        if (field.type === "checkbox") {
-          newItem[field.id] = [];
-        } else {
-          newItem[field.id] = "";
-        }
-      }
-    });
-    onChange([...value, newItem]);
-  };
-  const handleRemove = (index) => {
-    const newValue = value.filter((_, i) => i !== index);
-    onChange(newValue);
-    const newLocalErrors = { ...localErrors };
-    Object.keys(newLocalErrors).forEach((key) => {
-      if (key.startsWith(`${question.id}[${index}]`)) {
-        delete newLocalErrors[key];
-      }
-    });
-    setLocalErrors(newLocalErrors);
-  };
-  const handleCancel = (index) => {
-    handleRemove(index);
-  };
-  const handleItemChange = (index, fieldId, fieldValue) => {
-    const newValue = [...value];
-    newValue[index] = { ...newValue[index], [fieldId]: fieldValue };
-    onChange(newValue);
-    const errorKey = `${question.id}[${index}].${fieldId}`;
-    if (localErrors[errorKey]) {
-      const newLocalErrors = { ...localErrors };
-      delete newLocalErrors[errorKey];
-      setLocalErrors(newLocalErrors);
-    }
-  };
-  const validateItem = (index) => {
-    const item = value[index];
-    if (!item) return false;
-    const newErrors = {};
-    let hasError = false;
-    for (const field of itemTemplate.fields) {
-      if (field.type === "content") continue;
-      if (field.required) {
-        const fieldValue = item[field.id];
-        const isEmpty = !fieldValue || typeof fieldValue === "string" && !fieldValue.trim() || Array.isArray(fieldValue) && fieldValue.length === 0;
-        if (isEmpty) {
-          const errorKey = `${question.id}[${index}].${field.id}`;
-          newErrors[errorKey] = `${field.question || field.id} is required`;
-          hasError = true;
-        }
-      }
-    }
-    setLocalErrors((prev) => ({ ...prev, ...newErrors }));
-    return !hasError;
-  };
-  const handleComplete = (index) => {
-    if (validateItem(index)) {
-      const newValue = [...value];
-      newValue[index] = { ...newValue[index], _status: "completed" };
-      onChange(newValue);
-    }
-  };
-  const handleEdit = (index) => {
-    const newValue = [...value];
-    newValue[index] = { ...newValue[index], _status: "editing" };
-    onChange(newValue);
-  };
-  const getItemLabel = (index) => {
-    if (itemLabel) return itemLabel(index);
-    return `Item ${index + 1}`;
-  };
-  const getFieldError = (index, fieldId) => {
-    const errorKey = `${question.id}[${index}].${fieldId}`;
-    return localErrors[errorKey] || errors?.[errorKey];
-  };
-  const getFieldValue = (item, field) => {
-    if (field.type === "content") return "";
-    const val = item[field.id];
-    if (val === void 0) {
-      if (field.type === "checkbox") return [];
-      return "";
-    }
-    if (typeof val === "string" || Array.isArray(val)) return val;
-    return "";
-  };
-  const getFieldLabel = (fieldId) => {
-    const field = itemTemplate.fields.find((f) => f.id === fieldId);
-    if (!field || field.type === "content") return fieldId;
-    return field.question || fieldId;
-  };
-  const renderSummary = (item, index) => {
-    const fieldsToShow = summaryFields || itemTemplate.fields.slice(0, 4).map((f) => f.id);
-    const summaryLines = [];
-    for (const fieldId of fieldsToShow) {
-      if (fieldId === "_status") continue;
-      const val = item[fieldId];
-      if (!val) continue;
-      const label = getFieldLabel(fieldId);
-      let displayValue = "";
-      if (typeof val === "string") {
-        displayValue = val.length > 60 ? val.substring(0, 60) + "..." : val;
-      } else if (Array.isArray(val)) {
-        displayValue = val.join(", ");
-      }
-      if (displayValue) {
-        summaryLines.push({ label, value: displayValue });
-      }
-    }
-    return /* @__PURE__ */ jsxs(
-      Card,
-      {
-        withBorder: true,
-        padding: "md",
-        style: {
-          backgroundColor: "var(--color-surface)",
-          borderColor: "rgba(255, 255, 255, 0.12)",
-          borderRadius: 12
-        },
-        children: [
-          /* @__PURE__ */ jsxs(Group, { justify: "space-between", align: "flex-start", mb: "xs", children: [
-            /* @__PURE__ */ jsx(Text, { fw: 600, size: "sm", c: "dimmed", style: { fontFamily: "var(--mantine-font-family-headings)" }, children: getItemLabel(index) }),
-            /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
-              /* @__PURE__ */ jsx(ActionIcon, { variant: "subtle", color: "gray", onClick: () => handleEdit(index), "aria-label": "Edit", size: "sm", children: /* @__PURE__ */ jsx(IconPencil, { size: 14 }) }),
-              getCanRemove(item) && /* @__PURE__ */ jsx(
-                ActionIcon,
-                {
-                  variant: "subtle",
-                  color: "red",
-                  onClick: () => handleRemove(index),
-                  "aria-label": removeLabel,
-                  size: "sm",
-                  children: /* @__PURE__ */ jsx(IconTrash, { size: 14 })
-                }
-              )
-            ] })
-          ] }),
-          /* @__PURE__ */ jsx(
-            Paper,
-            {
-              p: "sm",
-              style: {
-                backgroundColor: "var(--glass-background)",
-                borderRadius: 8
-              },
-              children: summaryLines.length > 0 ? /* @__PURE__ */ jsxs(Stack, { gap: 4, children: [
-                summaryLines[0] && /* @__PURE__ */ jsx(Text, { size: "sm", style: { color: "var(--color-text)" }, children: summaryLines[0].value }),
-                summaryLines.length > 1 && /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: summaryLines.slice(1).map((line) => line.value).join(" \xB7 ") })
-              ] }) : /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", fs: "italic", children: "No data" })
-            }
-          )
-        ]
-      },
-      index
-    );
-  };
-  const renderEditingForm = (item, index) => {
-    return /* @__PURE__ */ jsxs(
-      Card,
-      {
-        withBorder: true,
-        padding: "md",
-        style: {
-          backgroundColor: "var(--color-surface)",
-          borderColor: "rgba(0, 153, 255, 0.3)",
-          borderRadius: 12
-        },
-        children: [
-          /* @__PURE__ */ jsx(Text, { fw: 500, mb: "md", children: getItemLabel(index) }),
-          /* @__PURE__ */ jsx(Stack, { gap: "sm", children: itemTemplate.fields.map((field) => /* @__PURE__ */ jsx(Box, { children: renderField(
-            field,
-            index,
-            `${question.id}[${index}].${field.id}`,
-            getFieldValue(item, field),
-            (fieldValue) => handleItemChange(index, field.id, fieldValue),
-            getFieldError(index, field.id)
-          ) }, field.id)) }),
-          /* @__PURE__ */ jsxs(Group, { justify: "space-between", mt: "lg", children: [
-            /* @__PURE__ */ jsx(Button, { variant: "filled", leftSection: /* @__PURE__ */ jsx(IconCheck, { size: 16 }), onClick: () => handleComplete(index), children: "Complete" }),
-            /* @__PURE__ */ jsx(Button, { variant: "subtle", color: "gray", leftSection: /* @__PURE__ */ jsx(IconX, { size: 16 }), onClick: () => handleCancel(index), children: "Cancel" })
-          ] })
-        ]
-      },
-      index
-    );
-  };
-  return /* @__PURE__ */ jsxs(Stack, { gap: "md", children: [
-    value.map(
-      (item, index) => item._status === "completed" ? renderSummary(item, index) : renderEditingForm(item, index)
-    ),
-    canAdd && /* @__PURE__ */ jsx(Button, { variant: "light", leftSection: /* @__PURE__ */ jsx(IconPlus, { size: 16 }), onClick: handleAdd, children: addLabel })
-  ] });
-}
-var TypeformContext = createContext(null);
-function useTypeformContext() {
-  const context = useContext(TypeformContext);
-  if (!context) {
-    throw new Error("useTypeformContext must be used within a TypeformSurvey");
-  }
-  return context;
-}
-function TypeformSurvey({
-  config,
-  className,
-  styles,
-  hideProgress,
-  mode = "paginated",
-  renderPageSection
-}) {
-  const typeform = useTypeform(config);
-  const {
-    currentPage,
-    currentPageIndex,
-    pages,
-    answers,
-    errors,
-    isFirstPage,
-    isLastPage,
-    isSubmitting,
-    isComplete,
-    canProceed,
-    direction,
-    next,
-    back,
-    submit,
-    setAnswer,
-    terminateAndSubmit
-  } = typeform;
-  const nextRef = useRef(next);
-  nextRef.current = next;
-  const mergedTheme = mergeTheme(config.theme);
-  const isCompact = mergedTheme.options?.compact ?? false;
-  const isMultiQuestion = (currentPage?.questions.length ?? 0) > 1;
-  const parseMarkdown = (text) => {
-    const lines = text.split("\n");
-    return lines.map((line, idx) => {
-      const parts = line.split(/(\*\*.*?\*\*)/);
-      const renderedLine = parts.map((part, partIdx) => {
-        if (part.startsWith("**") && part.endsWith("**")) {
-          return /* @__PURE__ */ jsx(
-            Text,
-            {
-              component: "span",
-              fw: 700,
-              style: {
-                color: "var(--color-text)"
-              },
-              children: part.slice(2, -2)
-            },
-            partIdx
-          );
-        }
-        return part;
-      });
-      return /* @__PURE__ */ jsxs("span", { children: [
-        renderedLine,
-        idx < lines.length - 1 && /* @__PURE__ */ jsx("br", {})
-      ] }, idx);
-    });
-  };
-  const renderContent = (question) => {
-    const { content, style = "default" } = question;
-    switch (style) {
-      case "callout":
-        return /* @__PURE__ */ jsx(
-          Paper,
-          {
-            p: "lg",
-            style: {
-              backgroundColor: "var(--color-surface)",
-              border: "1px solid rgba(255, 255, 255, 0.07)",
-              borderRadius: 12,
-              backdropFilter: "blur(24px)",
-              WebkitBackdropFilter: "blur(24px)"
-            },
-            children: /* @__PURE__ */ jsx(Text, { size: "sm", style: { lineHeight: 1.6, color: "rgb(212, 212, 216)" }, children: parseMarkdown(content) })
-          },
-          question.id
-        );
-      case "script":
-        return /* @__PURE__ */ jsx(
-          Text,
-          {
-            fs: "italic",
-            size: "sm",
-            style: {
-              color: "rgb(161, 161, 170)",
-              padding: "8px 16px",
-              borderLeft: "3px solid rgba(0, 153, 255, 0.3)"
-            },
-            children: parseMarkdown(content)
-          },
-          question.id
-        );
-      case "info":
-        return /* @__PURE__ */ jsx(
-          Paper,
-          {
-            p: "lg",
-            style: {
-              backgroundColor: "var(--color-surface)",
-              border: "1px solid rgba(255, 255, 255, 0.07)",
-              borderRadius: 12,
-              backdropFilter: "blur(24px)",
-              WebkitBackdropFilter: "blur(24px)"
-            },
-            children: /* @__PURE__ */ jsx(Text, { size: "sm", style: { lineHeight: 1.6, color: "rgb(212, 212, 216)" }, children: parseMarkdown(content) })
-          },
-          question.id
-        );
-      case "warning":
-        return /* @__PURE__ */ jsxs(
-          Paper,
-          {
-            p: "md",
-            style: {
-              backgroundColor: "color-mix(in srgb, var(--color-warning) 10%, transparent)",
-              border: "1px solid rgba(249, 115, 22, 0.2)",
-              borderRadius: 12
-            },
-            children: [
-              /* @__PURE__ */ jsx(
-                Text,
-                {
-                  size: "sm",
-                  fw: 600,
-                  mb: "xs",
-                  style: { color: "rgb(251, 146, 60)", fontFamily: "var(--mantine-font-family-headings)" },
-                  children: "Note"
-                }
-              ),
-              /* @__PURE__ */ jsx(Text, { size: "sm", style: { lineHeight: 1.6, color: "var(--color-text)" }, children: parseMarkdown(content) })
-            ]
-          },
-          question.id
-        );
-      default:
-        return /* @__PURE__ */ jsx(Text, { style: { color: "var(--color-text)" }, children: parseMarkdown(content) }, question.id);
-    }
-  };
-  const renderField = (question) => {
-    const questionId = question.id;
-    const error = errors[questionId];
-    switch (question.type) {
-      case "content":
-        return renderContent(question);
-      case "radio": {
-        const rawValue = answers[questionId];
-        let answerValue;
-        if (rawValue && typeof rawValue === "object" && "type" in rawValue) {
-          answerValue = rawValue;
-        } else if (typeof rawValue === "string" && rawValue) {
-          answerValue = createPresetValue(rawValue);
-        }
-        const handleRadioChange = (value) => {
-          setAnswer(questionId, value);
-          if (mergedTheme.options?.autoAdvance && !isLastPage && !isMultiQuestion && !isCustomValue(value)) {
-            setTimeout(() => {
-              nextRef.current();
-            }, 400);
-          }
-        };
-        return /* @__PURE__ */ jsx(
-          TypeformRadioGroup,
-          {
-            question,
-            value: answerValue,
-            onChange: handleRadioChange,
-            error
-          },
-          questionId
-        );
-      }
-      case "checkbox": {
-        const rawValue = answers[questionId];
-        let multiValue = [];
-        if (Array.isArray(rawValue)) {
-          if (rawValue.length > 0 && typeof rawValue[0] === "object" && "type" in rawValue[0]) {
-            multiValue = rawValue;
-          } else {
-            multiValue = rawValue.map((v) => createPresetValue(v));
-          }
-        }
-        return /* @__PURE__ */ jsx(
-          TypeformCheckboxGroup,
-          {
-            question,
-            value: multiValue,
-            onChange: (value) => setAnswer(questionId, value),
-            error
-          },
-          questionId
-        );
-      }
-      case "text":
-      case "email":
-      case "textarea":
-        return /* @__PURE__ */ jsx(
-          TypeformTextInput,
-          {
-            question,
-            value: answers[questionId] || "",
-            onChange: (value) => setAnswer(questionId, value),
-            error,
-            onSubmit: () => {
-              if (isLastPage) {
-                submit();
-              } else if (canProceed) {
-                next();
-              }
-            }
-          },
-          questionId
-        );
-      case "array":
-        return /* @__PURE__ */ jsx(
-          TypeformArrayField,
-          {
-            question,
-            value: answers[questionId] || [],
-            onChange: (value) => setAnswer(questionId, value),
-            errors,
-            renderField: renderNestedField,
-            theme: mergedTheme
-          },
-          questionId
-        );
-      default:
-        return null;
-    }
-  };
-  const renderNestedField = (field, _itemIndex, fieldId, value, onFieldChange, error) => {
-    switch (field.type) {
-      case "content":
-        return renderContent(field);
-      case "radio": {
-        const answerValue = typeof value === "string" && value ? createPresetValue(value) : void 0;
-        return /* @__PURE__ */ jsxs(Box, { mt: "md", children: [
-          /* @__PURE__ */ jsxs(Text, { size: "sm", fw: 500, mb: 4, children: [
-            field.question,
-            field.required && /* @__PURE__ */ jsx(Text, { component: "span", c: "red", ml: 4, children: "*" })
-          ] }),
-          /* @__PURE__ */ jsx(
-            TypeformRadioGroup,
-            {
-              question: field,
-              value: answerValue,
-              onChange: (newValue) => onFieldChange(newValue.value),
-              error
-            }
-          )
-        ] }, fieldId);
-      }
-      case "checkbox": {
-        const multiValue = Array.isArray(value) ? value.map((v) => createPresetValue(v)) : [];
-        return /* @__PURE__ */ jsxs(Box, { mt: "md", children: [
-          /* @__PURE__ */ jsxs(Text, { size: "sm", fw: 500, mb: 4, children: [
-            field.question,
-            field.required && /* @__PURE__ */ jsx(Text, { component: "span", c: "red", ml: 4, children: "*" })
-          ] }),
-          /* @__PURE__ */ jsx(
-            TypeformCheckboxGroup,
-            {
-              question: field,
-              value: multiValue,
-              onChange: (newValue) => onFieldChange(newValue.map((v) => v.value)),
-              error
-            }
-          )
-        ] }, fieldId);
-      }
-      case "text":
-      case "email":
-      case "textarea":
-        return /* @__PURE__ */ jsxs(Box, { mt: "md", children: [
-          /* @__PURE__ */ jsxs(Text, { size: "sm", fw: 500, mb: 4, children: [
-            field.question,
-            field.required && /* @__PURE__ */ jsx(Text, { component: "span", c: "red", ml: 4, children: "*" })
-          ] }),
-          /* @__PURE__ */ jsx(
-            TypeformTextInput,
-            {
-              question: field,
-              value: value || "",
-              onChange: onFieldChange,
-              error
-            }
-          )
-        ] }, fieldId);
-      default:
-        return null;
-    }
-  };
-  const handleKeyDown = useCallback(
-    (e) => {
-      if (isComplete) return;
-      if (mode === "all") return;
-      if (e.key === "Enter" && !e.shiftKey) {
-        const activeElement = document.activeElement;
-        if (activeElement?.tagName === "TEXTAREA") return;
-        if (isMultiQuestion) return;
-        if (isLastPage) {
-          submit();
-        } else if (canProceed) {
-          next();
-        }
-        return;
-      }
-      if (!isMultiQuestion && currentPage?.questions[0]) {
-        const question = currentPage.questions[0];
-        if (question.type === "radio" || question.type === "checkbox") {
-          const key = e.key.toUpperCase();
-          const index = key.charCodeAt(0) - 65;
-          const options = question.type === "radio" ? question.options : question.options;
-          if (index >= 0 && index < options.length) {
-            const option = options[index];
-            if (question.type === "radio") {
-              const newValue = createPresetValue(option.value);
-              setAnswer(question.id, newValue);
-              if (mergedTheme.options?.autoAdvance && !isLastPage && option.value.toLowerCase() !== "other") {
-                setTimeout(() => nextRef.current(), 400);
-              }
-            } else {
-              const rawValue = answers[question.id];
-              let currentValue = [];
-              if (Array.isArray(rawValue)) {
-                if (rawValue.length > 0 && typeof rawValue[0] === "object" && "type" in rawValue[0]) {
-                  currentValue = rawValue;
-                } else {
-                  currentValue = rawValue.map((v) => createPresetValue(v));
-                }
-              }
-              const hasValue = currentValue.some((v) => v.type === "preset" && v.value === option.value);
-              if (hasValue) {
-                setAnswer(
-                  question.id,
-                  currentValue.filter((v) => !(v.type === "preset" && v.value === option.value))
-                );
-              } else {
-                setAnswer(question.id, [...currentValue, createPresetValue(option.value)]);
-              }
-            }
-          }
-        }
-      }
-    },
-    [
-      currentPage,
-      answers,
-      isLastPage,
-      isComplete,
-      canProceed,
-      isMultiQuestion,
-      mode,
-      next,
-      submit,
-      setAnswer,
-      mergedTheme
-    ]
-  );
-  useEffect(() => {
-    window.addEventListener("keydown", handleKeyDown);
-    return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [handleKeyDown]);
-  useEffect(() => {
-    if (typeof window === "undefined") return;
-    if (mode === "all") return;
-    window.scrollTo({ top: 0, left: 0, behavior: "auto" });
-  }, [currentPageIndex, mode]);
-  if (isComplete) {
-    return /* @__PURE__ */ jsx(Box, { className, style: styles?.container, children: /* @__PURE__ */ jsx(
-      Center,
-      {
-        style: {
-          // minHeight: '100vh',
-          padding: "var(--mantine-spacing-xl)"
-          // ...styles?.completion,
-        },
-        children: /* @__PURE__ */ jsxs(Stack, { align: "center", gap: "lg", children: [
-          /* @__PURE__ */ jsx(
-            Box,
-            {
-              style: {
-                width: 80,
-                height: 80,
-                borderRadius: "50%",
-                background: "var(--mantine-color-green-6)",
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                ...styles?.completionIcon
-              },
-              children: /* @__PURE__ */ jsx(IconCheck, { size: 40, color: "white" })
-            }
-          ),
-          /* @__PURE__ */ jsx(Title, { order: 3, style: styles?.completionTitle, children: "Thank you!" }),
-          /* @__PURE__ */ jsx(Text, { size: "lg", c: "dimmed", ta: "center", maw: 400, style: styles?.completionText, children: "Your response has been recorded." })
-        ] })
-      }
-    ) });
-  }
-  const contextValue = {
-    ...typeform,
-    config,
-    styles
-  };
-  return /* @__PURE__ */ jsx(TypeformContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(
-    Box,
-    {
-      className,
-      style: {
-        minHeight: "100vh",
-        background: mergedTheme.colors?.background,
-        ...styles?.container
-      },
-      children: [
-        !hideProgress && mode !== "all" && /* @__PURE__ */ jsx(TypeformProgress, { current: currentPageIndex + 1, total: pages.length, usePortal: true }),
-        errors._form && /* @__PURE__ */ jsx(Box, { px: "xl", pt: "md", children: /* @__PURE__ */ jsx(Alert, { color: "red", variant: "light", title: "Submission Error", children: errors._form }) }),
-        mode === "all" ? /* @__PURE__ */ jsx(Fragment, { children: pages.map((page, idx) => {
-          const wrapper = /* @__PURE__ */ jsx(
-            TypeformPageWrapper,
-            {
-              page,
-              pageNumber: idx + 1,
-              isActive: true,
-              direction: "forward",
-              theme: mergedTheme,
-              compact: isCompact,
-              styles: {
-                // Override minHeight so each section doesn't force full viewport height
-                question: { minHeight: "auto", paddingTop: "var(--mantine-spacing-xl)", ...styles?.question },
-                questionNumber: styles?.questionNumber,
-                questionTitle: styles?.questionTitle,
-                questionDescription: styles?.questionDescription,
-                error: styles?.error
-              },
-              errors,
-              renderField
-            },
-            page.id
-          );
-          return renderPageSection ? renderPageSection(page, wrapper) : wrapper;
-        }) }) : currentPage && /* @__PURE__ */ jsx(
-          TypeformPageWrapper,
-          {
-            page: currentPage,
-            pageNumber: currentPageIndex + 1,
-            isActive: true,
-            direction,
-            theme: mergedTheme,
-            compact: isCompact,
-            styles: {
-              question: styles?.question,
-              questionNumber: styles?.questionNumber,
-              questionTitle: styles?.questionTitle,
-              questionDescription: styles?.questionDescription,
-              error: styles?.error
-            },
-            errors,
-            renderField
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          TypeformNavigation,
-          {
-            onBack: back,
-            onNext: next,
-            onSubmit: submit,
-            canGoBack: mode === "all" ? false : !isFirstPage,
-            canGoNext: canProceed,
-            isLastQuestion: mode === "all" ? true : isLastPage,
-            isSubmitting,
-            terminationAction: config.terminationAction,
-            onTerminate: terminateAndSubmit
-          }
-        )
-      ]
-    }
-  ) });
-}
-
-// src/components/typeform/presets/brochure-style.ts
-var brochureTheme = {
-  colors: {
-    primary: "#0099ff",
-    background: "transparent",
-    // Use parent container background
-    card: "rgba(24, 24, 27, 0.4)",
-    // zinc-900/40
-    cardBorder: "rgba(255, 255, 255, 0.07)",
-    text: "#ffffff",
-    textMuted: "rgb(161, 161, 170)"
-    // zinc-400
-  },
-  spacing: {
-    questionGap: 14,
-    contentMaxWidth: 900,
-    // Wider for better multi-question support
-    pageGap: 36
-    // Gap between questions on same page
-  },
-  animation: {
-    duration: 400,
-    easing: "cubic-bezier(0.4, 0, 0.2, 1)"
-  },
-  options: {
-    autoAdvance: false,
-    compact: false
-    // Can be enabled for multi-question pages
-  }
-};
-var brochureStyles = {
-  // Container - transparent, no min-height when inside glass card
-  container: {
-    backgroundColor: "transparent",
-    minHeight: "auto"
-  },
-  // Question wrapper - centered content with generous padding
-  question: {
-    minHeight: "auto",
-    padding: "56px 40px",
-    paddingBottom: 120
-  },
-  // Question number - subtle badge style
-  questionNumber: {
-    fontSize: 13,
-    fontWeight: 600,
-    textTransform: "uppercase",
-    letterSpacing: "0.15em",
-    color: "#0099ff",
-    marginBottom: 16
-  },
-  // Question title - cleaner, more modern sizing
-  questionTitle: {
-    fontSize: "clamp(1.5rem, 3.5vw, 1.875rem)",
-    fontWeight: 600,
-    letterSpacing: "-0.025em",
-    lineHeight: 1.3,
-    color: "#ffffff",
-    marginBottom: 12
-  },
-  // Question description - muted text
-  questionDescription: {
-    fontSize: 16,
-    lineHeight: 1.5,
-    color: "rgb(161, 161, 170)"
-    // zinc-400
-  },
-  // Option cards - glass morphism effect with comfortable padding
-  card: {
-    backgroundColor: "rgba(24, 24, 27, 0.4)",
-    backdropFilter: "blur(24px)",
-    WebkitBackdropFilter: "blur(24px)",
-    border: "1px solid rgba(255, 255, 255, 0.07)",
-    borderRadius: 12,
-    padding: "16px 20px",
-    boxShadow: "0 8px 32px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.03)",
-    transition: "all 300ms cubic-bezier(0.4, 0, 0.2, 1)"
-  },
-  // Selected card - solid blue fill, no glow
-  cardSelected: {
-    backgroundColor: "rgba(0, 153, 255, 0.32)",
-    border: "1px solid rgba(0, 153, 255, 0.85)",
-    boxShadow: "none"
-  },
-  // Hovered card - instant subtle highlight (no transform/lift)
-  cardHovered: {
-    backgroundColor: "rgba(24, 24, 27, 0.6)",
-    border: "1px solid rgba(255, 255, 255, 0.12)"
-  },
-  // Card label text - more readable
-  cardLabel: {
-    fontSize: 15,
-    fontWeight: 500,
-    lineHeight: 1.4,
-    color: "#ffffff"
-  },
-  // Card description text
-  cardDescription: {
-    fontSize: 14,
-    lineHeight: 1.5,
-    color: "rgb(113, 113, 122)"
-    // zinc-500
-  },
-  // Keyboard hint badge
-  cardKey: {
-    backgroundColor: "rgba(255, 255, 255, 0.08)",
-    border: "none",
-    borderRadius: 6,
-    fontSize: 12,
-    fontWeight: 600
-  },
-  // Checkmark icon
-  cardCheckmark: {
-    color: "#0099ff"
-  },
-  // Text input styling - cleaner, modern sizing
-  input: {
-    backgroundColor: "transparent",
-    border: "none",
-    borderBottom: "2px solid rgba(255, 255, 255, 0.1)",
-    borderRadius: 0,
-    fontSize: 16,
-    fontWeight: 400,
-    color: "#ffffff",
-    padding: "12px 0",
-    transition: "border-color 200ms ease"
-  },
-  // Textarea styling
-  textarea: {
-    backgroundColor: "rgba(24, 24, 27, 0.4)",
-    backdropFilter: "blur(24px)",
-    WebkitBackdropFilter: "blur(24px)",
-    border: "1px solid rgba(255, 255, 255, 0.07)",
-    borderRadius: 12,
-    fontSize: 16,
-    lineHeight: 1.5,
-    color: "#ffffff",
-    padding: 16
-  },
-  // Progress bar container - fixed at top of viewport
-  progress: {
-    position: "fixed",
-    top: 0,
-    left: 0,
-    right: 0,
-    zIndex: 1e3,
-    backgroundColor: "transparent"
-  },
-  // Progress bar itself
-  progressBar: {
-    height: 3
-  },
-  // Progress percentage text
-  progressText: {
-    color: "rgb(113, 113, 122)",
-    // zinc-500
-    fontSize: 11
-  },
-  // Navigation footer - relative positioning inside glass card
-  navigation: {
-    position: "relative",
-    backgroundColor: "rgba(0, 0, 0, 0.4)",
-    backdropFilter: "blur(24px)",
-    WebkitBackdropFilter: "blur(24px)",
-    borderTop: "1px solid rgba(255, 255, 255, 0.05)",
-    borderRadius: "0 0 16px 16px",
-    padding: "20px 40px"
-  },
-  // Back button
-  buttonBack: {
-    color: "rgb(161, 161, 170)",
-    // zinc-400
-    backgroundColor: "transparent",
-    border: "none"
-  },
-  // Next/Continue button
-  buttonNext: {
-    backgroundColor: "#0099ff",
-    color: "#ffffff",
-    border: "none",
-    borderRadius: 8,
-    padding: "12px 24px",
-    fontSize: 15,
-    fontWeight: 600,
-    boxShadow: "0 4px 20px rgba(0, 153, 255, 0.3)",
-    transition: "all 200ms ease"
-  },
-  // Submit button (uses gradient, so keep background shorthand)
-  buttonSubmit: {
-    background: "linear-gradient(135deg, #0099ff 0%, #0066cc 100%)",
-    color: "#ffffff",
-    border: "none",
-    borderRadius: 8,
-    padding: "12px 28px",
-    fontSize: 15,
-    fontWeight: 600,
-    boxShadow: "0 4px 20px rgba(0, 153, 255, 0.4)",
-    transition: "all 200ms ease"
-  },
-  // Terminate button (No Show) - true red, not pink
-  buttonTerminate: {
-    backgroundColor: "#dc2626",
-    color: "#ffffff",
-    border: "none",
-    borderRadius: 8,
-    padding: "10px 20px",
-    fontSize: 14,
-    fontWeight: 600,
-    transition: "all 200ms ease"
-  },
-  // Completion screen
-  completion: {
-    backgroundColor: "transparent"
-  },
-  // Completion icon (uses gradient, so keep background shorthand)
-  completionIcon: {
-    width: 100,
-    height: 100,
-    background: "linear-gradient(135deg, #0099ff 0%, #0066cc 100%)",
-    boxShadow: "0 8px 40px rgba(0, 153, 255, 0.4)"
-  },
-  // Completion title
-  completionTitle: {
-    fontSize: 32,
-    fontWeight: 600,
-    color: "#ffffff"
-  },
-  // Completion text
-  completionText: {
-    fontSize: 18,
-    color: "rgb(161, 161, 170)"
-    // zinc-400
-  },
-  // Error message
-  error: {
-    color: "rgb(248, 113, 113)",
-    // red-400
-    fontSize: 14,
-    marginTop: 12
-  }
-};
-
-export { TypeformArrayField, TypeformCheckboxGroup, TypeformNavigation, TypeformProgress, TypeformQuestionWrapper, TypeformRadioGroup, TypeformSurvey, TypeformTextInput, brochureStyles, brochureTheme, createCustomValue, createPresetValue, createSurveyConfig, defaultTheme, extractAnswerValue, extractMultiAnswerValues, getAnswerString, getCustomValueText, getMultiAnswerStrings, hasCustomValue, hasPresetValue, isCustomValue, isPresetValue, mergeTheme, useCardStyle, useTypeform, useTypeformContext };