@appgram/react 0.1.0 → 0.1.3

package/dist/{chunk-AIDLOCVJ.mjs → chunk-UWIJR4ZY.mjs}

@@ -1,11 +1,10 @@
-import { useAppgramContext, useVote, cn, useWishes, useComments, useRoadmap, useReleases, useRelease, useHelpCenter, useHelpFlow, useHelpArticle, useSupport } from './chunk-N6PJDQCU.mjs';
+import { useAppgramContext, useVote, cn, useWishes, useComments, useRoadmap, useReleases, useRelease, useHelpCenter, useHelpFlow, useHelpArticle, useSupport, useSurvey, useSurveySubmit, getFingerprint, useContactForm, useContactFormSubmit } from './chunk-NABMGLTY.mjs';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { motion, AnimatePresence } from 'framer-motion';
 import { ChevronUp, MessageSquare, Plus, Search, Sparkles, AlertCircle, CheckCircle2, Clock, X, User, Loader2, Send, Package, ArrowLeft, Tag, Calendar, Wrench, Bug, Zap, Gift, ChevronRight, Mail, MessageCircle, HelpCircle, Folder, BookOpen, FileText, Upload, XCircle, AlertTriangle, ArrowRight, Activity, ChevronLeft, Pause, Play } from 'lucide-react';
-import React12, { useState, useEffect, useCallback, useRef } from 'react';
+import React12, { useState, useEffect, useCallback, useRef, useMemo } from 'react';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
-import DOMPurify from 'dompurify';
 
 var sizeClasses = {
   sm: "px-2 py-1 text-xs min-w-[50px]",
@@ -953,7 +952,6 @@ function WishDetail({
                       placeholder: "Your name (optional)",
                       value: authorName,
                       onChange: (e) => setAuthorName(e.target.value),
-                      maxLength: 100,
                       className: "w-full h-10 px-4 text-sm border focus:outline-none focus:ring-2 transition-all",
                       style: {
                         borderColor: isDark ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.1)",
@@ -970,7 +968,6 @@ function WishDetail({
                         placeholder: "Write a comment...",
                         value: newComment,
                         onChange: (e) => setNewComment(e.target.value),
-                        maxLength: 1e3,
                         className: "flex-1 min-h-[60px] px-4 py-3 text-sm border focus:outline-none focus:ring-2 resize-none transition-all",
                         style: {
                           borderColor: isDark ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.1)",
@@ -1163,7 +1160,6 @@ function SubmitWishForm({
                         value: formData.title,
                         onChange: (e) => setFormData({ ...formData, title: e.target.value }),
                         required: true,
-                        maxLength: 150,
                         className: "w-full h-11 px-4 text-sm border focus:outline-none focus:ring-2 transition-all",
                         style: {
                           borderColor: isDark ? "rgba(255, 255, 255, 0.15)" : "rgba(0, 0, 0, 0.15)",
@@ -1217,7 +1213,6 @@ function SubmitWishForm({
                         value: formData.description,
                         onChange: (e) => setFormData({ ...formData, description: e.target.value }),
                         required: true,
-                        maxLength: 500,
                         rows: 5,
                         className: "w-full px-4 py-3 text-sm border focus:outline-none focus:ring-2 resize-none transition-all",
                         style: {
@@ -2941,7 +2936,6 @@ function MediaCarousel({
                 {
                   src: getEmbedUrl(currentMedia.url),
                   className: "w-full h-full",
-                  sandbox: "allow-scripts allow-same-origin allow-presentation",
                   allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
                   allowFullScreen: true,
                   title: currentMedia.title || "Video"
@@ -4330,7 +4324,7 @@ function HelpArticleDetail({
                 "div",
                 {
                   className: "article-content",
-                  dangerouslySetInnerHTML: { __html: DOMPurify.sanitize(article.content) }
+                  dangerouslySetInnerHTML: { __html: article.content }
                 }
               )
             }
@@ -4882,7 +4876,6 @@ function SupportForm({
                       placeholder: "Your name",
                       value: formData.user_name,
                       onChange: handleChange,
-                      maxLength: 100,
                       className: "w-full h-10 px-4 text-sm border focus:outline-none focus:ring-2 transition-all",
                       style: {
                         backgroundColor: isDark ? "var(--appgram-card)" : "white",
@@ -4950,7 +4943,6 @@ function SupportForm({
                       value: formData.subject,
                       onChange: handleChange,
                       required: true,
-                      maxLength: 200,
                       className: "w-full h-10 px-4 text-sm border focus:outline-none focus:ring-2 transition-all",
                       style: {
                         backgroundColor: isDark ? "var(--appgram-card)" : "white",
@@ -4974,7 +4966,6 @@ function SupportForm({
                       value: formData.description,
                       onChange: handleChange,
                       required: true,
-                      maxLength: 2e3,
                       rows: 5,
                       className: "w-full px-4 py-3 text-sm border focus:outline-none focus:ring-2 resize-none transition-all",
                       style: {
@@ -6335,7 +6326,761 @@ function StatusIncidentDetail({
     )
   ] }) });
 }
+function SurveyRenderer({
+  slug,
+  title,
+  description,
+  onComplete,
+  onError,
+  externalUserId,
+  metadata,
+  className
+}) {
+  const { theme } = useAppgramContext();
+  const { survey, nodes, isLoading, error: fetchError } = useSurvey(slug);
+  const { submitResponse, isSubmitting, error: submitError, successMessage } = useSurveySubmit({
+    onSuccess: () => onComplete?.(),
+    onError
+  });
+  const [answers, setAnswers] = useState(/* @__PURE__ */ new Map());
+  const [visitedNodes, setVisitedNodes] = useState([]);
+  const primaryColor = theme.colors?.primary || "#0EA5E9";
+  const borderRadius = theme.borderRadius || 16;
+  const isDark = theme.isDark ?? false;
+  const sortedNodes = useMemo(() => {
+    return [...nodes].sort((a, b) => a.sort_order - b.sort_order);
+  }, [nodes]);
+  const rootNode = useMemo(() => {
+    return sortedNodes.find((n) => n.parent_id === null) || sortedNodes[0];
+  }, [sortedNodes]);
+  const currentNodeId = visitedNodes.length > 0 ? visitedNodes[visitedNodes.length - 1] : rootNode?.id;
+  const currentNode = nodes.find((n) => n.id === currentNodeId) || null;
+  const getNextNode = useCallback((node, answer) => {
+    if (node.question_type === "yes_no") {
+      const isYes = answer.answer_text === "yes" || answer.answer === true;
+      const nextId = isYes ? node.answer_yes_node_id : node.answer_no_node_id;
+      if (nextId) {
+        return nodes.find((n) => n.id === nextId) || null;
+      }
+    }
+    if (node.branches && node.branches.length > 0) {
+      for (const branch of node.branches) {
+        const { condition } = branch;
+        let matches = false;
+        if (condition.type === "equals") {
+          if (answer.answer_text !== void 0) matches = answer.answer_text === String(condition.value);
+          if (answer.answer_rating !== void 0) matches = answer.answer_rating === Number(condition.value);
+          if (answer.answer_options?.length === 1) matches = answer.answer_options[0] === String(condition.value);
+        } else if (condition.type === "contains") {
+          if (answer.answer_text) matches = answer.answer_text.includes(String(condition.value));
+          if (answer.answer_options) matches = answer.answer_options.includes(String(condition.value));
+        } else if (condition.type === "gt" && answer.answer_rating !== void 0) {
+          matches = answer.answer_rating > Number(condition.value);
+        } else if (condition.type === "lt" && answer.answer_rating !== void 0) {
+          matches = answer.answer_rating < Number(condition.value);
+        } else if (condition.type === "gte" && answer.answer_rating !== void 0) {
+          matches = answer.answer_rating >= Number(condition.value);
+        } else if (condition.type === "lte" && answer.answer_rating !== void 0) {
+          matches = answer.answer_rating <= Number(condition.value);
+        }
+        if (matches) {
+          return nodes.find((n) => n.id === branch.next_node_id) || null;
+        }
+      }
+    }
+    if (node.next_node_id) {
+      return nodes.find((n) => n.id === node.next_node_id) || null;
+    }
+    return null;
+  }, [nodes]);
+  const handleNext = useCallback(() => {
+    if (!currentNode) return;
+    const answer = answers.get(currentNode.id);
+    if (!answer && currentNode.is_required) return;
+    const nextNode = answer ? getNextNode(currentNode, answer) : null;
+    if (nextNode) {
+      setVisitedNodes((prev) => [...prev, nextNode.id]);
+    } else {
+      handleSubmit();
+    }
+  }, [currentNode, answers, getNextNode]);
+  const handleBack = useCallback(() => {
+    setVisitedNodes((prev) => prev.slice(0, -1));
+  }, []);
+  const handleSubmit = useCallback(async () => {
+    if (!survey) return;
+    const fingerprint = getFingerprint();
+    const answerEntries = Array.from(answers.entries()).map(([nodeId, ans]) => ({
+      node_id: nodeId,
+      answer: ans.answer,
+      answer_text: ans.answer_text,
+      answer_options: ans.answer_options,
+      answer_rating: ans.answer_rating
+    }));
+    await submitResponse(survey.id, {
+      fingerprint,
+      external_user_id: externalUserId,
+      metadata,
+      answers: answerEntries
+    });
+  }, [survey, answers, submitResponse, externalUserId, metadata]);
+  const updateAnswer = useCallback((nodeId, answer) => {
+    setAnswers((prev) => {
+      const next = new Map(prev);
+      next.set(nodeId, answer);
+      return next;
+    });
+  }, []);
+  if (currentNode?.result_message) {
+    return /* @__PURE__ */ jsx("div", { className: cn("max-w-2xl mx-auto", className), children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "rounded-lg border p-8 text-center",
+        style: {
+          backgroundColor: isDark ? "var(--appgram-card)" : "rgba(255, 255, 255, 0.7)",
+          borderColor: isDark ? "rgba(255, 255, 255, 0.05)" : "rgba(0, 0, 0, 0.05)",
+          borderRadius: `${Math.min(borderRadius, 12)}px`
+        },
+        children: /* @__PURE__ */ jsx(
+          "p",
+          {
+            className: "text-lg font-medium",
+            style: { color: "var(--appgram-foreground)" },
+            children: currentNode.result_message
+          }
+        )
+      }
+    ) });
+  }
+  if (successMessage) {
+    return /* @__PURE__ */ jsx("div", { className: cn("max-w-2xl mx-auto", className), children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "rounded-lg border p-8 text-center",
+        style: {
+          backgroundColor: isDark ? "var(--appgram-card)" : "rgba(255, 255, 255, 0.7)",
+          borderColor: isDark ? "rgba(255, 255, 255, 0.05)" : "rgba(0, 0, 0, 0.05)",
+          borderRadius: `${Math.min(borderRadius, 12)}px`
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "inline-flex items-center justify-center w-16 h-16 rounded-full mb-6",
+              style: { backgroundColor: "#10b98115" },
+              children: /* @__PURE__ */ jsx("svg", { className: "w-8 h-8", style: { color: "#10b981" }, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "h2",
+            {
+              className: "text-2xl font-bold mb-3",
+              style: { color: "var(--appgram-foreground)" },
+              children: "Thank You"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: "text-base",
+              style: { color: isDark ? "rgba(255, 255, 255, 0.6)" : "rgba(0, 0, 0, 0.6)" },
+              children: successMessage
+            }
+          )
+        ]
+      }
+    ) });
+  }
+  if (isLoading) {
+    return /* @__PURE__ */ jsx("div", { className: cn("max-w-2xl mx-auto flex items-center justify-center py-12", className), children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "w-8 h-8 border-2 border-t-transparent rounded-full animate-spin",
+        style: { borderColor: primaryColor, borderTopColor: "transparent" }
+      }
+    ) });
+  }
+  if (fetchError || submitError) {
+    return /* @__PURE__ */ jsx("div", { className: cn("max-w-2xl mx-auto", className), children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "p-4 text-sm",
+        style: {
+          backgroundColor: "rgba(239, 68, 68, 0.1)",
+          color: "#dc2626",
+          borderRadius: `${Math.min(borderRadius, 8)}px`
+        },
+        children: fetchError || submitError
+      }
+    ) });
+  }
+  if (!currentNode || !survey) return /* @__PURE__ */ jsx("div", {});
+  const currentAnswer = answers.get(currentNode.id);
+  const isAnswered = !!currentAnswer;
+  const isRequired = currentNode.is_required !== false;
+  const canProceed = !isRequired || isAnswered;
+  return /* @__PURE__ */ jsxs("div", { className: cn("max-w-2xl mx-auto", className), children: [
+    (title || survey.name) && /* @__PURE__ */ jsxs("div", { className: "mb-8", children: [
+      /* @__PURE__ */ jsx(
+        "h1",
+        {
+          className: "text-2xl font-bold mb-2",
+          style: { color: "var(--appgram-foreground)" },
+          children: title || survey.name
+        }
+      ),
+      (description || survey.description) && /* @__PURE__ */ jsx(
+        "p",
+        {
+          className: "text-base",
+          style: { color: isDark ? "rgba(255, 255, 255, 0.6)" : "rgba(0, 0, 0, 0.6)" },
+          children: description || survey.description
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "rounded-lg border p-6",
+        style: {
+          backgroundColor: isDark ? "var(--appgram-card)" : "rgba(255, 255, 255, 0.7)",
+          borderColor: isDark ? "rgba(255, 255, 255, 0.05)" : "rgba(0, 0, 0, 0.05)",
+          borderRadius: `${Math.min(borderRadius, 12)}px`
+        },
+        children: [
+          /* @__PURE__ */ jsxs(
+            "h2",
+            {
+              className: "text-lg font-semibold mb-6",
+              style: { color: "var(--appgram-foreground)" },
+              children: [
+                currentNode.question,
+                isRequired && /* @__PURE__ */ jsx("span", { style: { color: "#dc2626" }, children: " *" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            QuestionInput,
+            {
+              node: currentNode,
+              answer: currentAnswer,
+              onChange: (answer) => updateAnswer(currentNode.id, answer),
+              primaryColor,
+              borderRadius,
+              isDark
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mt-8 pt-6 border-t", style: { borderColor: isDark ? "rgba(255, 255, 255, 0.05)" : "rgba(0, 0, 0, 0.05)" }, children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: handleBack,
+                disabled: visitedNodes.length === 0,
+                className: "px-4 py-2 text-sm font-medium transition-opacity disabled:opacity-30",
+                style: { color: isDark ? "rgba(255, 255, 255, 0.6)" : "rgba(0, 0, 0, 0.6)" },
+                children: "Back"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: handleNext,
+                disabled: !canProceed || isSubmitting,
+                className: "px-6 py-2.5 text-sm text-white font-medium transition-all hover:shadow-lg disabled:opacity-50",
+                style: {
+                  backgroundColor: primaryColor,
+                  borderRadius: `${Math.min(borderRadius, 8)}px`
+                },
+                children: isSubmitting ? "Submitting..." : "Next"
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+function QuestionInput({
+  node,
+  answer,
+  onChange,
+  primaryColor,
+  borderRadius,
+  isDark
+}) {
+  switch (node.question_type) {
+    case "yes_no":
+      return /* @__PURE__ */ jsx("div", { className: "flex gap-3", children: ["yes", "no"].map((value) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => onChange({ answer_text: value, answer: value === "yes" }),
+          className: "flex-1 py-3 text-sm font-medium border transition-all",
+          style: {
+            backgroundColor: answer?.answer_text === value ? `${primaryColor}15` : "transparent",
+            borderColor: answer?.answer_text === value ? primaryColor : isDark ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.1)",
+            color: answer?.answer_text === value ? primaryColor : "var(--appgram-foreground)",
+            borderRadius: `${Math.min(borderRadius, 8)}px`
+          },
+          children: value.charAt(0).toUpperCase() + value.slice(1)
+        },
+        value
+      )) });
+    case "short_answer":
+      return /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "text",
+          value: answer?.answer_text || "",
+          onChange: (e) => onChange({ answer_text: e.target.value }),
+          placeholder: "Type your answer...",
+          className: "w-full h-10 px-4 text-sm border focus:outline-none focus:ring-2 transition-all",
+          style: {
+            backgroundColor: isDark ? "var(--appgram-card)" : "white",
+            borderColor: isDark ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.1)",
+            color: "var(--appgram-foreground)",
+            borderRadius: `${Math.min(borderRadius, 8)}px`
+          }
+        }
+      );
+    case "paragraph":
+      return /* @__PURE__ */ jsx(
+        "textarea",
+        {
+          value: answer?.answer_text || "",
+          onChange: (e) => onChange({ answer_text: e.target.value }),
+          placeholder: "Type your answer...",
+          rows: 4,
+          className: "w-full px-4 py-3 text-sm border focus:outline-none focus:ring-2 resize-none transition-all",
+          style: {
+            backgroundColor: isDark ? "var(--appgram-card)" : "white",
+            borderColor: isDark ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.1)",
+            color: "var(--appgram-foreground)",
+            borderRadius: `${Math.min(borderRadius, 8)}px`
+          }
+        }
+      );
+    case "multiple_choice":
+      return /* @__PURE__ */ jsx("div", { className: "space-y-2", children: (node.options || []).map((option) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => onChange({ answer_options: [option.value] }),
+          className: "w-full text-left px-4 py-3 text-sm border transition-all",
+          style: {
+            backgroundColor: answer?.answer_options?.[0] === option.value ? `${primaryColor}15` : "transparent",
+            borderColor: answer?.answer_options?.[0] === option.value ? primaryColor : isDark ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.1)",
+            color: "var(--appgram-foreground)",
+            borderRadius: `${Math.min(borderRadius, 8)}px`
+          },
+          children: option.label
+        },
+        option.value
+      )) });
+    case "checkboxes":
+      return /* @__PURE__ */ jsx("div", { className: "space-y-2", children: (node.options || []).map((option) => {
+        const selected = answer?.answer_options?.includes(option.value) || false;
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => {
+              const current = answer?.answer_options || [];
+              const next = selected ? current.filter((v) => v !== option.value) : [...current, option.value];
+              onChange({ answer_options: next });
+            },
+            className: "w-full text-left px-4 py-3 text-sm border transition-all flex items-center gap-3",
+            style: {
+              backgroundColor: selected ? `${primaryColor}15` : "transparent",
+              borderColor: selected ? primaryColor : isDark ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.1)",
+              color: "var(--appgram-foreground)",
+              borderRadius: `${Math.min(borderRadius, 8)}px`
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "w-4 h-4 border rounded flex items-center justify-center shrink-0",
+                  style: {
+                    borderColor: selected ? primaryColor : isDark ? "rgba(255, 255, 255, 0.3)" : "rgba(0, 0, 0, 0.3)",
+                    backgroundColor: selected ? primaryColor : "transparent"
+                  },
+                  children: selected && /* @__PURE__ */ jsx("svg", { className: "w-3 h-3 text-white", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 3, d: "M5 13l4 4L19 7" }) })
+                }
+              ),
+              option.label
+            ]
+          },
+          option.value
+        );
+      }) });
+    case "rating": {
+      const min = node.min_rating ?? 1;
+      const max = node.max_rating ?? 5;
+      const ratings = Array.from({ length: max - min + 1 }, (_, i) => min + i);
+      return /* @__PURE__ */ jsx("div", { className: "flex gap-2 justify-center", children: ratings.map((value) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => onChange({ answer_rating: value }),
+          className: "w-12 h-12 text-sm font-medium border transition-all",
+          style: {
+            backgroundColor: answer?.answer_rating === value ? primaryColor : "transparent",
+            borderColor: answer?.answer_rating === value ? primaryColor : isDark ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.1)",
+            color: answer?.answer_rating === value ? "white" : "var(--appgram-foreground)",
+            borderRadius: `${Math.min(borderRadius, 8)}px`
+          },
+          children: value
+        },
+        value
+      )) });
+    }
+    default:
+      return /* @__PURE__ */ jsx("div", {});
+  }
+}
+function ContactFormRenderer({
+  formId,
+  projectId,
+  title,
+  description,
+  onSuccess,
+  onError,
+  className
+}) {
+  const { theme } = useAppgramContext();
+  const { form, isLoading, error: fetchError } = useContactForm(formId);
+  const {
+    submitForm,
+    isSubmitting,
+    error: submitError,
+    successMessage,
+    validateField,
+    clearMessages
+  } = useContactFormSubmit({
+    onSuccess: () => onSuccess?.(),
+    onError
+  });
+  const [formData, setFormData] = useState({});
+  const [fieldErrors, setFieldErrors] = useState({});
+  const primaryColor = theme.colors?.primary || "#0EA5E9";
+  const borderRadius = theme.borderRadius || 16;
+  const isDark = theme.isDark ?? false;
+  const handleFieldChange = useCallback((fieldId, value) => {
+    setFormData((prev) => ({ ...prev, [fieldId]: value }));
+    setFieldErrors((prev) => {
+      const next = { ...prev };
+      delete next[fieldId];
+      return next;
+    });
+  }, []);
+  const handleSubmit = useCallback(async (e) => {
+    e.preventDefault();
+    if (!form) return;
+    const errors = {};
+    for (const field of form.fields) {
+      const value = formData[field.id];
+      if (field.type === "checkbox") continue;
+      const error = validateField(String(value || ""), field);
+      if (error) errors[field.id] = error;
+    }
+    if (Object.keys(errors).length > 0) {
+      setFieldErrors(errors);
+      return;
+    }
+    const result = await submitForm(projectId, formId, { data: formData });
+    if (result) {
+      setFormData({});
+      setFieldErrors({});
+    }
+  }, [form, formData, validateField, submitForm, projectId, formId]);
+  if (successMessage) {
+    return /* @__PURE__ */ jsx("div", { className: cn("max-w-2xl mx-auto", className), children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "rounded-lg border p-8 text-center",
+        style: {
+          backgroundColor: isDark ? "var(--appgram-card)" : "rgba(255, 255, 255, 0.7)",
+          borderColor: isDark ? "rgba(255, 255, 255, 0.05)" : "rgba(0, 0, 0, 0.05)",
+          borderRadius: `${Math.min(borderRadius, 12)}px`
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "inline-flex items-center justify-center w-16 h-16 rounded-full mb-6",
+              style: { backgroundColor: "#10b98115" },
+              children: /* @__PURE__ */ jsx("svg", { className: "w-8 h-8", style: { color: "#10b981" }, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "h2",
+            {
+              className: "text-2xl font-bold mb-3",
+              style: { color: "var(--appgram-foreground)" },
+              children: form?.successMessage || "Thank You"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: "text-base mb-6",
+              style: { color: isDark ? "rgba(255, 255, 255, 0.6)" : "rgba(0, 0, 0, 0.6)" },
+              children: successMessage
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: clearMessages,
+              className: "px-6 py-3 text-white font-medium transition-all hover:shadow-lg",
+              style: {
+                backgroundColor: primaryColor,
+                borderRadius: `${Math.min(borderRadius, 12)}px`
+              },
+              children: "Submit Another"
+            }
+          )
+        ]
+      }
+    ) });
+  }
+  if (isLoading) {
+    return /* @__PURE__ */ jsx("div", { className: cn("max-w-2xl mx-auto flex items-center justify-center py-12", className), children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "w-8 h-8 border-2 border-t-transparent rounded-full animate-spin",
+        style: { borderColor: primaryColor, borderTopColor: "transparent" }
+      }
+    ) });
+  }
+  if (fetchError) {
+    return /* @__PURE__ */ jsx("div", { className: cn("max-w-2xl mx-auto", className), children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "p-4 text-sm",
+        style: {
+          backgroundColor: "rgba(239, 68, 68, 0.1)",
+          color: "#dc2626",
+          borderRadius: `${Math.min(borderRadius, 8)}px`
+        },
+        children: fetchError
+      }
+    ) });
+  }
+  if (!form) return /* @__PURE__ */ jsx("div", {});
+  return /* @__PURE__ */ jsxs("div", { className: cn("max-w-2xl mx-auto", className), children: [
+    (title || form.name) && /* @__PURE__ */ jsxs("div", { className: "mb-8", children: [
+      /* @__PURE__ */ jsx(
+        "h1",
+        {
+          className: "text-2xl font-bold mb-2",
+          style: { color: "var(--appgram-foreground)" },
+          children: title || form.name
+        }
+      ),
+      (description || form.description) && /* @__PURE__ */ jsx(
+        "p",
+        {
+          className: "text-base",
+          style: { color: isDark ? "rgba(255, 255, 255, 0.6)" : "rgba(0, 0, 0, 0.6)" },
+          children: description || form.description
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "rounded-lg border p-6",
+        style: {
+          backgroundColor: isDark ? "var(--appgram-card)" : "rgba(255, 255, 255, 0.7)",
+          borderColor: isDark ? "rgba(255, 255, 255, 0.05)" : "rgba(0, 0, 0, 0.05)",
+          borderRadius: `${Math.min(borderRadius, 12)}px`
+        },
+        children: [
+          submitError && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "p-3 text-sm mb-4",
+              style: {
+                backgroundColor: "rgba(239, 68, 68, 0.1)",
+                color: "#dc2626",
+                borderRadius: `${Math.min(borderRadius, 8)}px`
+              },
+              children: submitError
+            }
+          ),
+          /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className: "space-y-5", children: [
+            form.fields.map((field) => /* @__PURE__ */ jsx(
+              FormFieldInput,
+              {
+                field,
+                value: formData[field.id],
+                error: fieldErrors[field.id],
+                onChange: (value) => handleFieldChange(field.id, value),
+                primaryColor,
+                borderRadius,
+                isDark
+              },
+              field.id
+            )),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "submit",
+                disabled: isSubmitting,
+                className: "w-full flex items-center justify-center gap-2 py-3 text-white font-medium transition-all hover:shadow-lg disabled:opacity-50",
+                style: {
+                  backgroundColor: primaryColor,
+                  borderRadius: `${Math.min(borderRadius, 8)}px`
+                },
+                children: isSubmitting ? "Submitting..." : form.submitButtonText || "Submit"
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+function FormFieldInput({
+  field,
+  value,
+  error,
+  onChange,
+  primaryColor,
+  borderRadius,
+  isDark
+}) {
+  const inputStyles = {
+    backgroundColor: isDark ? "var(--appgram-card)" : "white",
+    borderColor: error ? "#dc2626" : isDark ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.1)",
+    color: "var(--appgram-foreground)",
+    borderRadius: `${Math.min(borderRadius, 8)}px`
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+    field.type !== "checkbox" && /* @__PURE__ */ jsxs("label", { className: "text-sm font-medium", style: { color: "var(--appgram-foreground)" }, children: [
+      field.label,
+      field.required && /* @__PURE__ */ jsx("span", { style: { color: "#dc2626" }, children: " *" })
+    ] }),
+    field.type === "text" && /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "text",
+        value: String(value || ""),
+        onChange: (e) => onChange(e.target.value),
+        placeholder: field.placeholder,
+        required: field.required,
+        className: "w-full h-10 px-4 text-sm border focus:outline-none focus:ring-2 transition-all",
+        style: inputStyles
+      }
+    ),
+    field.type === "email" && /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "email",
+        value: String(value || ""),
+        onChange: (e) => onChange(e.target.value),
+        placeholder: field.placeholder || "you@example.com",
+        required: field.required,
+        className: "w-full h-10 px-4 text-sm border focus:outline-none focus:ring-2 transition-all",
+        style: inputStyles
+      }
+    ),
+    field.type === "textarea" && /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        value: String(value || ""),
+        onChange: (e) => onChange(e.target.value),
+        placeholder: field.placeholder,
+        required: field.required,
+        rows: 4,
+        className: "w-full px-4 py-3 text-sm border focus:outline-none focus:ring-2 resize-none transition-all",
+        style: inputStyles
+      }
+    ),
+    field.type === "select" && /* @__PURE__ */ jsxs(
+      "select",
+      {
+        value: String(value || ""),
+        onChange: (e) => onChange(e.target.value),
+        required: field.required,
+        className: "w-full h-10 px-4 text-sm border focus:outline-none focus:ring-2 transition-all appearance-none",
+        style: inputStyles,
+        children: [
+          /* @__PURE__ */ jsx("option", { value: "", children: field.placeholder || "Select an option" }),
+          (field.options || []).map((opt) => /* @__PURE__ */ jsx("option", { value: opt, children: opt }, opt))
+        ]
+      }
+    ),
+    field.type === "radio" && /* @__PURE__ */ jsx("div", { className: "space-y-2", children: (field.options || []).map((opt) => /* @__PURE__ */ jsxs(
+      "label",
+      {
+        className: "flex items-center gap-3 px-4 py-3 text-sm border cursor-pointer transition-all",
+        style: {
+          backgroundColor: value === opt ? `${primaryColor}15` : "transparent",
+          borderColor: value === opt ? primaryColor : isDark ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.1)",
+          color: "var(--appgram-foreground)",
+          borderRadius: `${Math.min(borderRadius, 8)}px`
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "radio",
+              name: field.id,
+              value: opt,
+              checked: value === opt,
+              onChange: () => onChange(opt),
+              className: "sr-only"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "w-4 h-4 rounded-full border-2 flex items-center justify-center shrink-0",
+              style: {
+                borderColor: value === opt ? primaryColor : isDark ? "rgba(255, 255, 255, 0.3)" : "rgba(0, 0, 0, 0.3)"
+              },
+              children: value === opt && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "w-2 h-2 rounded-full",
+                  style: { backgroundColor: primaryColor }
+                }
+              )
+            }
+          ),
+          opt
+        ]
+      },
+      opt
+    )) }),
+    field.type === "checkbox" && /* @__PURE__ */ jsxs(
+      "label",
+      {
+        className: "flex items-center gap-3 cursor-pointer",
+        style: { color: "var(--appgram-foreground)" },
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "w-4 h-4 border rounded flex items-center justify-center shrink-0 cursor-pointer",
+              style: {
+                borderColor: value ? primaryColor : isDark ? "rgba(255, 255, 255, 0.3)" : "rgba(0, 0, 0, 0.3)",
+                backgroundColor: value ? primaryColor : "transparent"
+              },
+              onClick: () => onChange(!value),
+              children: value && /* @__PURE__ */ jsx("svg", { className: "w-3 h-3 text-white", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 3, d: "M5 13l4 4L19 7" }) })
+            }
+          ),
+          /* @__PURE__ */ jsxs("span", { className: "text-sm", onClick: () => onChange(!value), children: [
+            field.label,
+            field.required && /* @__PURE__ */ jsx("span", { style: { color: "#dc2626" }, children: " *" })
+          ] })
+        ]
+      }
+    ),
+    error && /* @__PURE__ */ jsx("p", { className: "text-xs", style: { color: "#dc2626" }, children: error })
+  ] });
+}
 
-export { HelpArticleDetail, HelpArticles, HelpCenter, HelpCollections, ReleaseCard, ReleaseDetail, ReleaseList, Releases, RoadmapBoard, RoadmapColumn, StatusBoard, StatusIncidentDetail, SubmitWishForm, SupportForm, VoteButton, WhatsNewPopup, WishCard, WishDetail, WishList };
-//# sourceMappingURL=chunk-AIDLOCVJ.mjs.map
-//# sourceMappingURL=chunk-AIDLOCVJ.mjs.map
+export { ContactFormRenderer, HelpArticleDetail, HelpArticles, HelpCenter, HelpCollections, ReleaseCard, ReleaseDetail, ReleaseList, Releases, RoadmapBoard, RoadmapColumn, StatusBoard, StatusIncidentDetail, SubmitWishForm, SupportForm, SurveyRenderer, VoteButton, WhatsNewPopup, WishCard, WishDetail, WishList };
+//# sourceMappingURL=chunk-UWIJR4ZY.mjs.map
+//# sourceMappingURL=chunk-UWIJR4ZY.mjs.map