@appgram/react 0.1.1 → 0.1.3

package/dist/{chunk-3UBJGXCO.js → chunk-WZIN7KEM.js}

@@ -1,20 +1,18 @@
 'use strict';
 
-var chunk75P634IK_js = require('./chunk-75P634IK.js');
+var chunkUPTP7QX5_js = require('./chunk-UPTP7QX5.js');
 var jsxRuntime = require('react/jsx-runtime');
 var framerMotion = require('framer-motion');
 var lucideReact = require('lucide-react');
 var React12 = require('react');
 var ReactMarkdown = require('react-markdown');
 var remarkGfm = require('remark-gfm');
-var DOMPurify = require('dompurify');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var React12__default = /*#__PURE__*/_interopDefault(React12);
 var ReactMarkdown__default = /*#__PURE__*/_interopDefault(ReactMarkdown);
 var remarkGfm__default = /*#__PURE__*/_interopDefault(remarkGfm);
-var DOMPurify__default = /*#__PURE__*/_interopDefault(DOMPurify);
 
 var sizeClasses = {
   sm: "px-2 py-1 text-xs min-w-[50px]",
@@ -37,8 +35,8 @@ function VoteButton({
   className,
   renderContent
 }) {
-  const { theme } = chunk75P634IK_js.useAppgramContext();
-  const { hasVoted, voteCount, isLoading, toggle } = chunk75P634IK_js.useVote({
+  const { theme } = chunkUPTP7QX5_js.useAppgramContext();
+  const { hasVoted, voteCount, isLoading, toggle } = chunkUPTP7QX5_js.useVote({
     wishId,
     initialVoteCount,
     initialHasVoted,
@@ -50,7 +48,7 @@ function VoteButton({
     /* @__PURE__ */ jsxRuntime.jsx(
       "svg",
       {
-        className: chunk75P634IK_js.cn(
+        className: chunkUPTP7QX5_js.cn(
           iconSizes[size],
           "transition-transform duration-200",
           hasVoted && "animate-appgram-vote-pop"
@@ -77,7 +75,7 @@ function VoteButton({
       type: "button",
       onClick: toggle,
       disabled: isLoading,
-      className: chunk75P634IK_js.cn(
+      className: chunkUPTP7QX5_js.cn(
         "inline-flex flex-col items-center justify-center gap-0.5 rounded-lg",
         "border transition-all duration-200",
         "focus:outline-none focus:ring-2 focus:ring-offset-2",
@@ -129,7 +127,7 @@ function WishCard({
   showAuthor = true,
   animationIndex = 0
 }) {
-  const { theme } = chunk75P634IK_js.useAppgramContext();
+  const { theme } = chunkUPTP7QX5_js.useAppgramContext();
   const primaryColor = theme.colors?.primary || "#0EA5E9";
   const borderRadius = theme.borderRadius || 16;
   const isDark = theme.isDark ?? false;
@@ -157,7 +155,7 @@ function WishCard({
         duration: 0.4,
         ease: [0.25, 0.46, 0.45, 0.94]
       },
-      className: chunk75P634IK_js.cn("cursor-pointer group", className),
+      className: chunkUPTP7QX5_js.cn("cursor-pointer group", className),
       onClick,
       children: /* @__PURE__ */ jsxRuntime.jsx(
         "div",
@@ -323,11 +321,11 @@ function WishList({
   showSearch = false,
   className
 }) {
-  const { theme } = chunk75P634IK_js.useAppgramContext();
+  const { theme } = chunkUPTP7QX5_js.useAppgramContext();
   const [searchQuery, setSearchQuery] = React12.useState("");
   const [hasInitiallyLoaded, setHasInitiallyLoaded] = React12.useState(false);
   const [localVotes, setLocalVotes] = React12.useState({});
-  const { wishes, isLoading, error, page, totalPages, setPage, setFilters, refetch } = chunk75P634IK_js.useWishes({
+  const { wishes, isLoading, error, page, totalPages, setPage, setFilters, refetch } = chunkUPTP7QX5_js.useWishes({
     filters: initialFilters,
     refreshInterval
   });
@@ -414,7 +412,7 @@ function WishList({
       )
     ] });
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunk75P634IK_js.cn("space-y-6", className), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkUPTP7QX5_js.cn("space-y-6", className), children: [
     heading && /* @__PURE__ */ jsxRuntime.jsxs(
       framerMotion.motion.div,
       {
@@ -504,7 +502,7 @@ function WishList({
     wishes.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: chunk75P634IK_js.cn(
+        className: chunkUPTP7QX5_js.cn(
           variant === "cards" && "grid gap-4",
           variant === "compact" && "space-y-2",
           variant === "masonry" && "columns-1 md:columns-2 lg:columns-3 gap-4"
@@ -647,7 +645,7 @@ function WishDetail({
   onCommentAdded,
   className
 }) {
-  const { theme } = chunk75P634IK_js.useAppgramContext();
+  const { theme } = chunkUPTP7QX5_js.useAppgramContext();
   const primaryColor = theme.colors?.primary || "#0EA5E9";
   const borderRadius = theme.borderRadius || 16;
   const isDark = theme.isDark ?? false;
@@ -664,7 +662,7 @@ function WishDetail({
     voteCount,
     toggle: toggleVote,
     isLoading: isVoteLoading
-  } = chunk75P634IK_js.useVote({
+  } = chunkUPTP7QX5_js.useVote({
     wishId: wish?.id || "",
     initialVoteCount: wish?.vote_count,
     initialHasVoted: wish?.has_voted
@@ -674,7 +672,7 @@ function WishDetail({
     isLoading: isLoadingComments,
     createComment,
     isCreating: isAddingComment
-  } = chunk75P634IK_js.useComments({
+  } = chunkUPTP7QX5_js.useComments({
     wishId: wish?.id || ""
   });
   if (!wish) return null;
@@ -722,7 +720,7 @@ function WishDetail({
         animate: { x: 0 },
         exit: { x: "100%" },
         transition: { type: "spring", damping: 30, stiffness: 300 },
-        className: chunk75P634IK_js.cn(
+        className: chunkUPTP7QX5_js.cn(
           "fixed right-0 top-0 bottom-0 w-full sm:w-[500px] md:w-[600px] z-50 shadow-2xl flex flex-col overflow-hidden",
           className
         ),
@@ -749,7 +747,7 @@ function WishDetail({
                   disabled: isVoteLoading,
                   whileHover: { scale: 1.05 },
                   whileTap: { scale: 0.95 },
-                  className: chunk75P634IK_js.cn(
+                  className: chunkUPTP7QX5_js.cn(
                     "flex flex-col items-center justify-center gap-1 px-4 py-3 rounded-xl border-2 transition-all min-w-[70px] shrink-0",
                     isVoteLoading && "opacity-50"
                   ),
@@ -762,7 +760,7 @@ function WishDetail({
                     /* @__PURE__ */ jsxRuntime.jsx(
                       lucideReact.ChevronUp,
                       {
-                        className: chunk75P634IK_js.cn("w-6 h-6 transition-all", hasVoted && "fill-current"),
+                        className: chunkUPTP7QX5_js.cn("w-6 h-6 transition-all", hasVoted && "fill-current"),
                         strokeWidth: 2
                       }
                     ),
@@ -929,7 +927,7 @@ function WishDetail({
                     /* @__PURE__ */ jsxRuntime.jsx(
                       "p",
                       {
-                        className: chunk75P634IK_js.cn(
+                        className: chunkUPTP7QX5_js.cn(
                           "text-sm leading-relaxed",
                           comment.is_official && "p-3 rounded-lg"
                         ),
@@ -962,7 +960,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)",
@@ -979,7 +976,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)",
@@ -1022,7 +1018,7 @@ function SubmitWishForm({
   submitButtonText = "Submit Feature Request",
   className
 }) {
-  const { theme, client } = chunk75P634IK_js.useAppgramContext();
+  const { theme, client } = chunkUPTP7QX5_js.useAppgramContext();
   const primaryColor = theme.colors?.primary || "#0EA5E9";
   const secondaryColor = theme.colors?.secondary || "#38BDF8";
   const borderRadius = theme.borderRadius || 16;
@@ -1091,7 +1087,7 @@ function SubmitWishForm({
         animate: { x: 0 },
         exit: { x: "100%" },
         transition: { type: "spring", damping: 30, stiffness: 300 },
-        className: chunk75P634IK_js.cn(
+        className: chunkUPTP7QX5_js.cn(
           "fixed right-0 top-0 bottom-0 w-full sm:w-[480px] md:w-[540px] z-50 shadow-2xl flex flex-col overflow-hidden",
           className
         ),
@@ -1172,7 +1168,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)",
@@ -1226,7 +1221,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: {
@@ -1421,11 +1415,11 @@ function RoadmapColumn({
   renderItem,
   className
 }) {
-  const { theme } = chunk75P634IK_js.useAppgramContext();
+  const { theme } = chunkUPTP7QX5_js.useAppgramContext();
   const borderRadius = theme.borderRadius || 8;
   const isDark = theme.isDark ?? false;
   const items = column.items || [];
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunk75P634IK_js.cn("flex flex-col min-w-[280px] max-w-[320px]", className), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkUPTP7QX5_js.cn("flex flex-col min-w-[280px] max-w-[320px]", className), children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
@@ -1450,7 +1444,7 @@ function RoadmapColumn({
           "div",
           {
             onClick: onItemClick ? () => onItemClick(item) : void 0,
-            className: chunk75P634IK_js.cn(
+            className: chunkUPTP7QX5_js.cn(
               "p-3 shadow-sm",
               "hover:shadow-md transition-shadow duration-200",
               onItemClick && "cursor-pointer"
@@ -1705,8 +1699,8 @@ function RoadmapBoard({
   refreshInterval = 0,
   className
 }) {
-  const { theme } = chunk75P634IK_js.useAppgramContext();
-  const { columns, isLoading, error, refetch } = chunk75P634IK_js.useRoadmap({
+  const { theme } = chunkUPTP7QX5_js.useAppgramContext();
+  const { columns, isLoading, error, refetch } = chunkUPTP7QX5_js.useRoadmap({
     refreshInterval
   });
   const [selectedWish, setSelectedWish] = React12.useState(null);
@@ -1778,7 +1772,7 @@ function RoadmapBoard({
       )
     ] });
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunk75P634IK_js.cn("space-y-8", className), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkUPTP7QX5_js.cn("space-y-8", className), children: [
     heading && /* @__PURE__ */ jsxRuntime.jsxs(
       framerMotion.motion.div,
       {
@@ -1970,7 +1964,7 @@ function ReleaseCard({
   showDate = true,
   className
 }) {
-  const { theme } = chunk75P634IK_js.useAppgramContext();
+  const { theme } = chunkUPTP7QX5_js.useAppgramContext();
   const borderRadius = theme.borderRadius || 8;
   const date = release.published_at || release.created_at;
   const formattedDate = date ? new Date(date).toLocaleDateString("en-US", {
@@ -1982,7 +1976,7 @@ function ReleaseCard({
     "article",
     {
       onClick,
-      className: chunk75P634IK_js.cn(
+      className: chunkUPTP7QX5_js.cn(
         "bg-white border border-gray-200 overflow-hidden",
         "hover:shadow-md transition-shadow duration-200",
         onClick && "cursor-pointer",
@@ -2006,7 +2000,7 @@ function ReleaseCard({
             return /* @__PURE__ */ jsxRuntime.jsx(
               "span",
               {
-                className: chunk75P634IK_js.cn("px-2 py-0.5 text-xs rounded-full", style.bg, style.text),
+                className: chunkUPTP7QX5_js.cn("px-2 py-0.5 text-xs rounded-full", style.bg, style.text),
                 children: label
               },
               label
@@ -2053,7 +2047,7 @@ function ModernReleaseCard({
     framerMotion.motion.article,
     {
       whileHover: { y: -2 },
-      className: chunk75P634IK_js.cn(
+      className: chunkUPTP7QX5_js.cn(
         "group cursor-pointer rounded-lg border transition-all duration-200",
         featured ? "p-6 sm:p-8" : "p-5"
       ),
@@ -2104,7 +2098,7 @@ function ModernReleaseCard({
         /* @__PURE__ */ jsxRuntime.jsx(
           "h3",
           {
-            className: chunk75P634IK_js.cn(
+            className: chunkUPTP7QX5_js.cn(
               "font-semibold mb-3 transition-opacity group-hover:opacity-70",
               featured ? "text-2xl" : "text-lg"
             ),
@@ -2115,7 +2109,7 @@ function ModernReleaseCard({
         (release.excerpt || release.content) && /* @__PURE__ */ jsxRuntime.jsxs(
           "p",
           {
-            className: chunk75P634IK_js.cn(
+            className: chunkUPTP7QX5_js.cn(
               "leading-relaxed mb-5",
               featured ? "text-base" : "text-sm"
             ),
@@ -2218,8 +2212,8 @@ function ReleaseList({
   renderError,
   className
 }) {
-  const { theme } = chunk75P634IK_js.useAppgramContext();
-  const { releases, isLoading, error, refetch } = chunk75P634IK_js.useReleases({ limit });
+  const { theme } = chunkUPTP7QX5_js.useAppgramContext();
+  const { releases, isLoading, error, refetch } = chunkUPTP7QX5_js.useReleases({ limit });
   const primaryColor = theme.colors?.primary || "#0EA5E9";
   const borderRadius = theme.borderRadius || 16;
   const isDark = theme.isDark ?? false;
@@ -2250,7 +2244,7 @@ function ReleaseList({
       )
     ] });
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunk75P634IK_js.cn("max-w-3xl mx-auto", className), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkUPTP7QX5_js.cn("max-w-3xl mx-auto", className), children: [
     (heading || description) && /* @__PURE__ */ jsxRuntime.jsxs(
       framerMotion.motion.header,
       {
@@ -2551,13 +2545,13 @@ function ReleaseDetail({
   renderError,
   className
 }) {
-  const { theme } = chunk75P634IK_js.useAppgramContext();
+  const { theme } = chunkUPTP7QX5_js.useAppgramContext();
   const {
     release: fetchedRelease,
     isLoading,
     error,
     refetch
-  } = chunk75P634IK_js.useRelease({
+  } = chunkUPTP7QX5_js.useRelease({
     releaseSlug: releaseSlug || "",
     skip: !releaseSlug || !!providedRelease
   });
@@ -2597,7 +2591,7 @@ function ReleaseDetail({
     acc[item.type].push(item);
     return acc;
   }, {});
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunk75P634IK_js.cn("w-full", className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-3xl mx-auto px-6 py-8", children: [
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunkUPTP7QX5_js.cn("w-full", className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-3xl mx-auto px-6 py-8", children: [
     showBackButton && onBack && /* @__PURE__ */ jsxRuntime.jsxs(
       framerMotion.motion.button,
       {
@@ -2823,7 +2817,7 @@ function Releases({
     animate: { opacity: 1, x: 0 },
     exit: { opacity: 0, x: -20 }
   };
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunk75P634IK_js.cn("w-full", className), children: /* @__PURE__ */ jsxRuntime.jsxs(framerMotion.AnimatePresence, { mode: "wait", children: [
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunkUPTP7QX5_js.cn("w-full", className), children: /* @__PURE__ */ jsxRuntime.jsxs(framerMotion.AnimatePresence, { mode: "wait", children: [
     viewState.type === "list" && /* @__PURE__ */ jsxRuntime.jsx(
       framerMotion.motion.div,
       {
@@ -2950,7 +2944,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"
@@ -3042,8 +3035,8 @@ function WhatsNewPopup({
   autoPlayInterval = 5e3,
   className
 }) {
-  const { theme, client } = chunk75P634IK_js.useAppgramContext();
-  const { releases, isLoading } = chunk75P634IK_js.useReleases({ limit: 1 });
+  const { theme, client } = chunkUPTP7QX5_js.useAppgramContext();
+  const { releases, isLoading } = chunkUPTP7QX5_js.useReleases({ limit: 1 });
   const [internalOpen, setInternalOpen] = React12.useState(false);
   const [features, setFeatures] = React12.useState([]);
   const isControlled = controlledOpen !== void 0;
@@ -3131,7 +3124,7 @@ function WhatsNewPopup({
       animate: { opacity: 1, y: 0, scale: 1 },
       exit: { opacity: 0, y: 50, scale: 0.95 },
       transition: { type: "spring", damping: 25, stiffness: 300 },
-      className: chunk75P634IK_js.cn(
+      className: chunkUPTP7QX5_js.cn(
         "fixed z-50 w-[380px] max-w-[calc(100vw-2rem)]",
         positionClasses[position],
         className
@@ -3352,8 +3345,8 @@ function HelpCollections({
   renderError,
   className
 }) {
-  const { theme } = chunk75P634IK_js.useAppgramContext();
-  const { flows, isLoading, error, refetch } = chunk75P634IK_js.useHelpCenter();
+  const { theme } = chunkUPTP7QX5_js.useAppgramContext();
+  const { flows, isLoading, error, refetch } = chunkUPTP7QX5_js.useHelpCenter();
   const [searchQuery, setSearchQuery] = React12.useState("");
   const [showAllArticles, setShowAllArticles] = React12.useState(false);
   const [hasInitiallyLoaded, setHasInitiallyLoaded] = React12.useState(false);
@@ -3423,7 +3416,7 @@ function HelpCollections({
     ...onLiveChatClick ? [{ label: "Live Chat", icon: lucideReact.MessageCircle, onClick: onLiveChatClick }] : []
   ];
   const actions = quickActions || defaultQuickActions;
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunk75P634IK_js.cn("w-full", className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-4xl mx-auto px-6 py-8", children: [
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunkUPTP7QX5_js.cn("w-full", className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-4xl mx-auto px-6 py-8", children: [
     (heading || description) && /* @__PURE__ */ jsxRuntime.jsxs(
       framerMotion.motion.header,
       {
@@ -3554,7 +3547,7 @@ function HelpCollections({
           /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
-              className: chunk75P634IK_js.cn(
+              className: chunkUPTP7QX5_js.cn(
                 variant === "grid" && "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4",
                 variant === "list" && "space-y-3"
               ),
@@ -3832,14 +3825,14 @@ function HelpArticles({
   renderError,
   className
 }) {
-  const { theme } = chunk75P634IK_js.useAppgramContext();
+  const { theme } = chunkUPTP7QX5_js.useAppgramContext();
   const isDark = theme.isDark ?? false;
   const {
     flow: fetchedFlow,
     isLoading,
     error,
     refetch
-  } = chunk75P634IK_js.useHelpFlow({
+  } = chunkUPTP7QX5_js.useHelpFlow({
     flowSlug: flowSlug || "",
     skip: !flowSlug || !!providedFlow
   });
@@ -3901,7 +3894,7 @@ function HelpArticles({
     (article) => article.title.toLowerCase().includes(debouncedQuery.toLowerCase()) || article.excerpt?.toLowerCase().includes(debouncedQuery.toLowerCase()) || article.content.toLowerCase().includes(debouncedQuery.toLowerCase())
   ) : articles;
   const publishedArticles = filteredArticles.filter((a) => a.is_published).sort((a, b) => a.sort_order - b.sort_order);
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunk75P634IK_js.cn("w-full", className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-4xl mx-auto px-6 py-8", children: [
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunkUPTP7QX5_js.cn("w-full", className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-4xl mx-auto px-6 py-8", children: [
     showBackButton && onBack && /* @__PURE__ */ jsxRuntime.jsxs(
       framerMotion.motion.button,
       {
@@ -4181,14 +4174,14 @@ function HelpArticleDetail({
   renderError,
   className
 }) {
-  const { theme } = chunk75P634IK_js.useAppgramContext();
+  const { theme } = chunkUPTP7QX5_js.useAppgramContext();
   const isDark = theme.isDark ?? false;
   const {
     article: fetchedArticle,
     isLoading,
     error,
     refetch
-  } = chunk75P634IK_js.useHelpArticle({
+  } = chunkUPTP7QX5_js.useHelpArticle({
     articleSlug: articleSlug || "",
     flowId: flowId || "",
     skip: !articleSlug || !flowId || !!providedArticle
@@ -4224,7 +4217,7 @@ function HelpArticleDetail({
   }
   if (!article) return null;
   const typeConfig = ARTICLE_TYPE_CONFIG2[article.article_type];
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunk75P634IK_js.cn("w-full", className), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkUPTP7QX5_js.cn("w-full", className), children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-4xl mx-auto px-6 py-8", children: [
       showBackButton && onBack && /* @__PURE__ */ jsxRuntime.jsxs(
         framerMotion.motion.button,
@@ -4339,7 +4332,7 @@ function HelpArticleDetail({
                 "div",
                 {
                   className: "article-content",
-                  dangerouslySetInnerHTML: { __html: DOMPurify__default.default.sanitize(article.content) }
+                  dangerouslySetInnerHTML: { __html: article.content }
                 }
               )
             }
@@ -4481,7 +4474,7 @@ function HelpCenter({
     animate: { opacity: 1, x: 0 },
     exit: { opacity: 0, x: -20 }
   };
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunk75P634IK_js.cn("w-full", className), children: /* @__PURE__ */ jsxRuntime.jsxs(framerMotion.AnimatePresence, { mode: "wait", children: [
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunkUPTP7QX5_js.cn("w-full", className), children: /* @__PURE__ */ jsxRuntime.jsxs(framerMotion.AnimatePresence, { mode: "wait", children: [
     viewState.type === "collections" && /* @__PURE__ */ jsxRuntime.jsx(
       framerMotion.motion.div,
       {
@@ -4597,7 +4590,7 @@ function SupportForm({
   accessToken,
   className
 }) {
-  const { theme } = chunk75P634IK_js.useAppgramContext();
+  const { theme } = chunkUPTP7QX5_js.useAppgramContext();
   const {
     submitTicket,
     isSubmitting,
@@ -4608,7 +4601,7 @@ function SupportForm({
     isSendingMagicLink,
     verifyToken,
     isVerifying
-  } = chunk75P634IK_js.useSupport({
+  } = chunkUPTP7QX5_js.useSupport({
     onSubmitSuccess,
     onSubmitError
   });
@@ -4696,7 +4689,7 @@ function SupportForm({
     setAttachments((prev) => prev.filter((_, i) => i !== index));
   };
   if (successMessage) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunk75P634IK_js.cn("max-w-3xl mx-auto", className), children: /* @__PURE__ */ jsxRuntime.jsxs(
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunkUPTP7QX5_js.cn("max-w-3xl mx-auto", className), children: /* @__PURE__ */ jsxRuntime.jsxs(
       framerMotion.motion.div,
       {
         initial: { opacity: 0, scale: 0.95 },
@@ -4747,7 +4740,7 @@ function SupportForm({
       }
     ) });
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunk75P634IK_js.cn("max-w-3xl mx-auto", className), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkUPTP7QX5_js.cn("max-w-3xl mx-auto", className), children: [
     (heading || description) && /* @__PURE__ */ jsxRuntime.jsxs(
       framerMotion.motion.header,
       {
@@ -4891,7 +4884,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",
@@ -4959,7 +4951,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",
@@ -4983,7 +4974,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: {
@@ -5564,7 +5554,7 @@ function StatusBoard({
   renderIncident,
   className
 }) {
-  const { theme } = chunk75P634IK_js.useAppgramContext();
+  const { theme } = chunkUPTP7QX5_js.useAppgramContext();
   const primaryColor = theme.colors?.primary || "#0EA5E9";
   const borderRadius = theme.borderRadius || 16;
   const isDark = theme.isDark ?? false;
@@ -5596,7 +5586,7 @@ function StatusBoard({
     },
     {}
   );
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunk75P634IK_js.cn("max-w-4xl mx-auto space-y-8", className), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkUPTP7QX5_js.cn("max-w-4xl mx-auto space-y-8", className), children: [
     (heading || description) && /* @__PURE__ */ jsxRuntime.jsxs(
       framerMotion.motion.header,
       {
@@ -6088,7 +6078,7 @@ function StatusIncidentDetail({
   showAffectedComponents = true,
   className
 }) {
-  const { theme } = chunk75P634IK_js.useAppgramContext();
+  const { theme } = chunkUPTP7QX5_js.useAppgramContext();
   const primaryColor = theme.colors?.primary || "#0EA5E9";
   const borderRadius = theme.borderRadius || 16;
   const isDark = theme.isDark ?? false;
@@ -6096,7 +6086,7 @@ function StatusIncidentDetail({
   const impact = impactConfig2[incident.impact];
   const StatusIcon = statusConfig3.icon;
   const isResolved = incident.status === "resolved";
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunk75P634IK_js.cn("w-full", className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-3xl mx-auto px-6 py-8", children: [
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunkUPTP7QX5_js.cn("w-full", className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-3xl mx-auto px-6 py-8", children: [
     showBackButton && onBack && /* @__PURE__ */ jsxRuntime.jsxs(
       framerMotion.motion.button,
       {
@@ -6344,7 +6334,762 @@ function StatusIncidentDetail({
     )
   ] }) });
 }
+function SurveyRenderer({
+  slug,
+  title,
+  description,
+  onComplete,
+  onError,
+  externalUserId,
+  metadata,
+  className
+}) {
+  const { theme } = chunkUPTP7QX5_js.useAppgramContext();
+  const { survey, nodes, isLoading, error: fetchError } = chunkUPTP7QX5_js.useSurvey(slug);
+  const { submitResponse, isSubmitting, error: submitError, successMessage } = chunkUPTP7QX5_js.useSurveySubmit({
+    onSuccess: () => onComplete?.(),
+    onError
+  });
+  const [answers, setAnswers] = React12.useState(/* @__PURE__ */ new Map());
+  const [visitedNodes, setVisitedNodes] = React12.useState([]);
+  const primaryColor = theme.colors?.primary || "#0EA5E9";
+  const borderRadius = theme.borderRadius || 16;
+  const isDark = theme.isDark ?? false;
+  const sortedNodes = React12.useMemo(() => {
+    return [...nodes].sort((a, b) => a.sort_order - b.sort_order);
+  }, [nodes]);
+  const rootNode = React12.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 = React12.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 = React12.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 = React12.useCallback(() => {
+    setVisitedNodes((prev) => prev.slice(0, -1));
+  }, []);
+  const handleSubmit = React12.useCallback(async () => {
+    if (!survey) return;
+    const fingerprint = chunkUPTP7QX5_js.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 = React12.useCallback((nodeId, answer) => {
+    setAnswers((prev) => {
+      const next = new Map(prev);
+      next.set(nodeId, answer);
+      return next;
+    });
+  }, []);
+  if (currentNode?.result_message) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunkUPTP7QX5_js.cn("max-w-2xl mx-auto", className), children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+          "p",
+          {
+            className: "text-lg font-medium",
+            style: { color: "var(--appgram-foreground)" },
+            children: currentNode.result_message
+          }
+        )
+      }
+    ) });
+  }
+  if (successMessage) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunkUPTP7QX5_js.cn("max-w-2xl mx-auto", className), children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "inline-flex items-center justify-center w-16 h-16 rounded-full mb-6",
+              style: { backgroundColor: "#10b98115" },
+              children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-8 h-8", style: { color: "#10b981" }, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "h2",
+            {
+              className: "text-2xl font-bold mb-3",
+              style: { color: "var(--appgram-foreground)" },
+              children: "Thank You"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: chunkUPTP7QX5_js.cn("max-w-2xl mx-auto flex items-center justify-center py-12", className), children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: chunkUPTP7QX5_js.cn("max-w-2xl mx-auto", className), children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", {});
+  const currentAnswer = answers.get(currentNode.id);
+  const isAnswered = !!currentAnswer;
+  const isRequired = currentNode.is_required !== false;
+  const canProceed = !isRequired || isAnswered;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkUPTP7QX5_js.cn("max-w-2xl mx-auto", className), children: [
+    (title || survey.name) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-8", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "h1",
+        {
+          className: "text-2xl font-bold mb-2",
+          style: { color: "var(--appgram-foreground)" },
+          children: title || survey.name
+        }
+      ),
+      (description || survey.description) && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
+            "h2",
+            {
+              className: "text-lg font-semibold mb-6",
+              style: { color: "var(--appgram-foreground)" },
+              children: [
+                currentNode.question,
+                isRequired && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "#dc2626" }, children: " *" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            QuestionInput,
+            {
+              node: currentNode,
+              answer: currentAnswer,
+              onChange: (answer) => updateAnswer(currentNode.id, answer),
+              primaryColor,
+              borderRadius,
+              isDark
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "flex gap-3", children: ["yes", "no"].map((value) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "space-y-2", children: (node.options || []).map((option) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "space-y-2", children: (node.options || []).map((option) => {
+        const selected = answer?.answer_options?.includes(option.value) || false;
+        return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("svg", { className: "w-3 h-3 text-white", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "flex gap-2 justify-center", children: ratings.map((value) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", {});
+  }
+}
+function ContactFormRenderer({
+  formId,
+  projectId,
+  title,
+  description,
+  onSuccess,
+  onError,
+  className
+}) {
+  const { theme } = chunkUPTP7QX5_js.useAppgramContext();
+  const { form, isLoading, error: fetchError } = chunkUPTP7QX5_js.useContactForm(formId);
+  const {
+    submitForm,
+    isSubmitting,
+    error: submitError,
+    successMessage,
+    validateField,
+    clearMessages
+  } = chunkUPTP7QX5_js.useContactFormSubmit({
+    onSuccess: () => onSuccess?.(),
+    onError
+  });
+  const [formData, setFormData] = React12.useState({});
+  const [fieldErrors, setFieldErrors] = React12.useState({});
+  const primaryColor = theme.colors?.primary || "#0EA5E9";
+  const borderRadius = theme.borderRadius || 16;
+  const isDark = theme.isDark ?? false;
+  const handleFieldChange = React12.useCallback((fieldId, value) => {
+    setFormData((prev) => ({ ...prev, [fieldId]: value }));
+    setFieldErrors((prev) => {
+      const next = { ...prev };
+      delete next[fieldId];
+      return next;
+    });
+  }, []);
+  const handleSubmit = React12.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__ */ jsxRuntime.jsx("div", { className: chunkUPTP7QX5_js.cn("max-w-2xl mx-auto", className), children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "inline-flex items-center justify-center w-16 h-16 rounded-full mb-6",
+              style: { backgroundColor: "#10b98115" },
+              children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-8 h-8", style: { color: "#10b981" }, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "h2",
+            {
+              className: "text-2xl font-bold mb-3",
+              style: { color: "var(--appgram-foreground)" },
+              children: form?.successMessage || "Thank You"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: chunkUPTP7QX5_js.cn("max-w-2xl mx-auto flex items-center justify-center py-12", className), children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: chunkUPTP7QX5_js.cn("max-w-2xl mx-auto", className), children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", {});
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkUPTP7QX5_js.cn("max-w-2xl mx-auto", className), children: [
+    (title || form.name) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-8", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "h1",
+        {
+          className: "text-2xl font-bold mb-2",
+          style: { color: "var(--appgram-foreground)" },
+          children: title || form.name
+        }
+      ),
+      (description || form.description) && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("form", { onSubmit: handleSubmit, className: "space-y-5", children: [
+            form.fields.map((field) => /* @__PURE__ */ jsxRuntime.jsx(
+              FormFieldInput,
+              {
+                field,
+                value: formData[field.id],
+                error: fieldErrors[field.id],
+                onChange: (value) => handleFieldChange(field.id, value),
+                primaryColor,
+                borderRadius,
+                isDark
+              },
+              field.id
+            )),
+            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+    field.type !== "checkbox" && /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "text-sm font-medium", style: { color: "var(--appgram-foreground)" }, children: [
+      field.label,
+      field.required && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "#dc2626" }, children: " *" })
+    ] }),
+    field.type === "text" && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("option", { value: "", children: field.placeholder || "Select an option" }),
+          (field.options || []).map((opt) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: opt, children: opt }, opt))
+        ]
+      }
+    ),
+    field.type === "radio" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2", children: (field.options || []).map((opt) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "radio",
+              name: field.id,
+              value: opt,
+              checked: value === opt,
+              onChange: () => onChange(opt),
+              className: "sr-only"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: "w-2 h-2 rounded-full",
+                  style: { backgroundColor: primaryColor }
+                }
+              )
+            }
+          ),
+          opt
+        ]
+      },
+      opt
+    )) }),
+    field.type === "checkbox" && /* @__PURE__ */ jsxRuntime.jsxs(
+      "label",
+      {
+        className: "flex items-center gap-3 cursor-pointer",
+        style: { color: "var(--appgram-foreground)" },
+        children: [
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("svg", { className: "w-3 h-3 text-white", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 3, d: "M5 13l4 4L19 7" }) })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm", onClick: () => onChange(!value), children: [
+            field.label,
+            field.required && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "#dc2626" }, children: " *" })
+          ] })
+        ]
+      }
+    ),
+    error && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs", style: { color: "#dc2626" }, children: error })
+  ] });
+}
 
+exports.ContactFormRenderer = ContactFormRenderer;
 exports.HelpArticleDetail = HelpArticleDetail;
 exports.HelpArticles = HelpArticles;
 exports.HelpCenter = HelpCenter;
@@ -6359,10 +7104,11 @@ exports.StatusBoard = StatusBoard;
 exports.StatusIncidentDetail = StatusIncidentDetail;
 exports.SubmitWishForm = SubmitWishForm;
 exports.SupportForm = SupportForm;
+exports.SurveyRenderer = SurveyRenderer;
 exports.VoteButton = VoteButton;
 exports.WhatsNewPopup = WhatsNewPopup;
 exports.WishCard = WishCard;
 exports.WishDetail = WishDetail;
 exports.WishList = WishList;
-//# sourceMappingURL=chunk-3UBJGXCO.js.map
-//# sourceMappingURL=chunk-3UBJGXCO.js.map
+//# sourceMappingURL=chunk-WZIN7KEM.js.map
+//# sourceMappingURL=chunk-WZIN7KEM.js.map